@charset "UTF-8"

html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0px;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: white;
}

::selection {
    background: #d7a745;
    color: #FFF;
    text-shadow: none;
}

/* NAV */
.logo-desktop {
    position: relative;
    bottom: 60px;
    left: -10px;
}

.logo-desktop img {
    max-width: 80%;
    height: auto;
}

.btn-member-desktop {
    position: relative;
    top: 15px;
    left: 15px;
}

.call-to-action a {
    outline: none !important;
}

.call-to-action a:hover,
.call-to-action a:visited {
    color: #d7a745 !important;
    outline: none !important;
}



/* format */
.no-padding {
    padding: 0 !important;
}

.pull-right {
    float: right !important;
}

section {
    padding: 0 !important;
}

.half_banner>div {
    min-height: 1000px;
}


/* bg */
.teachers-bg {
    background-image: url(../image/primary/bg/wuwow-teacher-top10.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: -25px 0;
}

#wuwow {
    background-color: #fff;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url(../image/primary/bg/wuwow-bg01.jpg);
    background-image: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url(../image/primary/bg/wuwow-bg01.jpg); //Opera
    background-image: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url(../image/primary/bg/wuwow-bg01.jpg); //Firefox
    background-image: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url(../image/primary/bg/wuwow-bg01.jpg); //Safari & Chrome
    background-image: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url(../image/primary/bg/wuwow-bg01.jpg); //IE
    background-size: 100%;
    background-repeat: no-repeat;
    min-height: 1000px;
    background-position: 30px 90px;
    background-attachment: fixed;
}

#wuwow .banner_tit:after {
    background: #d7a745;
}


#feature {
    background-color: #fff;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.9)), url(../image/primary/bg/feature-bg01.jpg);
    background-image: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.9)), url(../image/primary/bg/feature-bg01.jpg); //Opera
    background-image: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.9)), url(../image/primary/bg/feature-bg01.jpg); //Firefox
    background-image: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.9)), url(../image/primary/bg/feature-bg01.jpg); //Safari & Chrome
    background-image: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.9)), url(../image/primary/bg/feature-bg01.jpg); //IE
    background-size: 100%;
    background-repeat: no-repeat;
    min-height: 650px;
    background-attachment: fixed;
}

#feature .banner_text {
    color: white;

}

#feature .banner_tit h2 {
    color: white;
    font-size: 28px;
    font-weight: bold;
    margin: 100px 0 40px 0;
    letter-spacing: 1px;
}

#feature .banner_tit h3 {
    color: white;
    font-size: 24px;
    line-height: 1.6em;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

#feature .banner_tit:after {
    background: white;

}



/* text color */
.text-gold {
    color: #d7a745 !important;
}

.text-grey {
    color: #777 !important;
}


/* btn */
.playButton {
    width: 86px !important;
    height: 86px !important;
    display: inline-block !important;
    top: 60%;
    left: 50%;
    margin-top: -43px;
    margin-left: -43px;
    position: absolute !important;
    z-index: 90;
}

.btn-gold {
    color: #d7a745 !important;
    font-size: 16px !important;
    font-weight: 500;
    padding: 5px 25px !important;
    background: transparent !important;
    border: 1px solid #d7a745 !important;
    border-radius: 50px !important;
    outline: none !important;
}

.btn-gold:hover,
.btn-gold a:hover,
.btn-gold a:focus,
.btn-gold a:active,
.btn-gold a:visited {
    color: white !important;
    background: #d7a745 !important;
    box-shadow: 0 0 20px rgba(215, 167, 69, .8);
    outline: none !important;
}


.btn-red {
    color: #a8121d !important;
    font-size: 16px !important;
    font-weight: 500;
    padding: 5px 25px !important;
    background: transparent !important;
    border: 1px solid #a8121d !important;
    border-radius: 50px !important;
    outline: none !important;
    cursor: pointer !important;
}

.btn-red:hover,
.btn-red a:hover,
.btn-red a:focus,
.btn-red a:active,
.btn-red a:visited {
    color: white !important;
    background: #a8121d !important;
    box-shadow: 0 0 20px rgba(168, 18, 29, .8);
    outline: none !important;
    cursor: pointer !important;
}


.btn-action {
    color: white !important;
    font-size: 16px !important;
    font-weight: 500;
    padding: 5px 15px !important;
    background: #a8121d !important;
    border: 1px solid #a8121d !important;
    border-radius: 50px !important;
    outline: none !important;
}

.btn-action:hover,
.btn-action a:hover,
.btn-action a:focus,
.btn-action a:active,
.btn-action a:visited {
    color: white !important;
    background: #a8121d !important;
    box-shadow: 0 0 20px rgba(168, 18, 29, .8);
    outline: none !important;
}

.btn-white {
    color: #d7a745 !important;
    font-size: 16px !important;
    font-weight: 500;
    padding: 5px 25px !important;
    background: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 50px !important;
    outline: none !important;
}

.btn-white:hover,
.btn-white a:hover,
.btn-white a:focus,
.btn-white a:active,
.btn-white a:visited {
    color: #d7a745 !important;
    background: #fff !important;
    box-shadow: 0 0 20px rgba(168, 126, 36, .8);
    outline: none !important;
    text-decoration: none;
}



/* WUWOW-index-slider
--------------------------------*/
#WUWOW-index-slider .owl-carousel .owl-stage,
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: auto;
    touch-action: auto;
}

#WUWOW-index-slider .owl-dots {
    margin-top: 5px;
    text-align: center;
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 15px;
}

#WUWOW-index-slider .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;

}

#WUWOW-index-slider .owl-dot.active {
    background-color: #d7a745;
}

#WUWOW-index-slider .owl-item,
.item {
    padding: 0px 0px;

}

#WUWOW-index-slider .btn {
    margin-top: 20px;
}
#WUWOW-index-slider .index_slider {
    margin-top: 20px;
}

#WUWOW-index-slider button:focus {
    outline: 0px auto -webkit-focus-ring-color;
}
/* WUWOW-index-slider
--------------------------------*/
.m-br1 {
    display: inline-block;
}

/* Footer */
section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#footer {
    background: #000;
    letter-spacing: 1px;
    padding: 60px 0 !important
}

#footer h5 {
    font-size: 24px;
    padding-left: 10px;
    border-left: 3px solid #d7a745;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color: #d7a745;
}


#footer a {
    color: #999;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

#footer a:hover {
    color: #d7a745;
    text-decoration: underline;
}

#footer ul.social li {
    padding: 3px 0;
}

#footer ul.social li a i {
    margin-right: 5px;
    font-size: 24px;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}


#footer ul.social li a>i.fa-facebook:hover {
    color: #3b5998;
}

#footer ul.social li a>i.fa-youtube:hover {
    color: #ff0000;
}

#footer ul.social li a>i.fa-instagram:hover {
    color: #8134AF;
}


#footer ul.social li:hover a i {}

#footer ul.social li a,
#footer ul.quick-links li a {
    color: #ccc;
    font-size: 16px;
}

#footer ul.quick-links li a:hover {
    color: #d7a745;
    text-decoration: none !important;
}


#footer ul.social li a:hover {
    color: #d7a745;
    text-decoration: none !important;
}



#footer ul.quick-links li {
    padding: 3px 0;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}

#footer ul.quick-links li:hover {
    padding: 3px 0;
    margin-left: 5px;
    font-weight: 700;
}

#footer ul.quick-links li a i {
    margin-right: 5px;
}

#footer ul.quick-links li:hover a i {
    font-weight: 700;
}

#footer li.join-us-department{
	display: none;
}

#footer ul li.join-us:hover li.join-us-department{
	display: block;
	color:#ccc;
	font-size: 16px;
	cursor: pointer; 
	text-decoration:none !important;
}

#footer  ul li.join-us-department:hover{
	color:#d7a745;
}

.copyright,
.copyright a {
    color: #999 !important;
}

.copyright a:hover {
    color: #d7a745 !important;
}



/* Moblie Footer - slide out menu */
#menu {
    background: #060a55;
}

.mobile-menu-style {
    padding-top: 25px;
}


.mobile_menu a {
    width: 100%;
    padding: 10px;
    float: left;
    color: #d7a745 !important;
    font-size: 16px;
}

.copyright-m {
    padding: 50px 15px 0 15px;
    color: white !important;

}

.copyright-m p,
.copyright-m a {
    font-size: 16px;
    padding: 0px !important;
    color: #d7a745;
        line-height: 2;
}

.copyright-m a {
    padding: 10px !important;
}


.copyright-m-info p,
.copyright-m-info a {
    font-size: 12px;
    padding: 0px !important;
    color: #d7a745;
    line-height: 2;
}


.copyright-m-info a {
    color: #d7a745;
}

.copyright-m hr {
    margin: 10px;
    border-top: 1px solid rgba(215, 167, 69, .3);
}

@media (max-width:1024px) {
    .half_banner>div {
        min-height: 300px;
    }


    .logo-desktop img {
        max-width: 50%;
        height: auto;
    }

    .logo-desktop {
        position: relative;
        bottom: 50px;
        left: -20px;
    }
}



@media (max-width:768px) {



    #header {
        background: url(../image/primary/header_bg.jpg) #dbb158;
        height: 70px;
    }

    #header.navbar-shrink {
        padding-top: 2rem;
        padding-bottom: 2rem;
        box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.09);
        background: url(../image/primary/header_bg.jpg) #dbb158;
        height: 70px;
    }


    #header .logo {
        display: inline-block;
        position: absolute;
        bottom: 0%;
        top: 0%;
        left: 0%;
        right: 0;
        z-index: 10;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-direction: column;
        padding: 15px 0;
    }

    #header .logo img {
        width: 100%;
        height: auto;
    }

    #header.navbar-shrink .logo img {
        transform: none;
        transition-duration: 0.3s;
    }


    #nav-menu-container {
        display: none;
    }



    /*slider*/
    #main_content {
        margin-top: 44px;
    }

    .carousel-indicators {
        bottom: 45% !important;
        left: 5% !important;
        justify-content: center !important;
    }

    .container {
        max-width: 768px !important;
    }

    #main_content>.container {
        padding: 0;
    }

    .m-br1 {
        display: none;
    }

    #WUWOW-index-slider .owl-item,
    .item {
        padding: 0px 0px;
    }



    #wuwow {
        background-size: 1000px;
        min-height: 700px;
        background-position: -50px 190px;
        background-attachment: scroll;
    }

    #feature {
        background-size: auto;
        background-attachment: scroll;
    }

}


@media (max-width:767px) {
    #footer h5 {
        padding-left: 0;
        border-left: transparent;
        padding-bottom: 0px;
        margin-bottom: 10px;
    }

}


@media (max-width: 480px) {
    #WUWOW-index-slider .owl-dots {
        margin-top: 25px;
        text-align: center;
        position: absolute;
        left: 25%;
        right: 25%;
        bottom: 0px;
    }


    .slider_info h1 {
        font-size: 25px;
    }

    .slider_info h2 {
        font-size: 24px;
    }

    .banner_text {
        max-width: 320px;
    }

    .half_banner>div {
        background-size: 450px;
        min-height: 450px;
    }

    .carousel-indicators {
        bottom: 64% !important;
        left: 5% !important;
        justify-content: center !important;
    }

    .carousel-control {
        display: none;
    }


    .teachers-bg {
        background-position: -20px 0px;
    }

    #wuwow {
        background-size: 500px;
        min-height: 700px;
        background-position: -20px 390px;
    }

    #feature {
        background-size: auto;
        min-height: 750px;
    }

    .copyright-m {
        padding: 20px 15px 0 15px;
        color: white !important;

    }


}


@media (max-width: 320px) {
    .mobile-menu-style {
        padding-top: 0px;
    }
.mobile-nav .nav-item2 {
    padding: 10px 50px;
}
    .copyright-m {
        padding: 20px 15px 0 15px;
        color: white !important;

    }
}

/* 20210907增加 */
#thelab_wuwowBN_mob {
    display: flex;
    flex-direction: row-reverse;
}
#thelab_wuwowBN_mob .slider_info .info_text {
    height: calc( 100% - 110px );
    color: #d3ad4f;
    line-height: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
#thelab_wuwowBN_mob .slider_info {
    background-color: #19335c;
}
#brandname {
    font-size: 32px;
    color: #ddbe69;
}
@media (max-width: 1199px) {
    #brandname {
        font-size: 27px;
    }
    #thelab_wuwowBN_mob .slider_info .info_text {
        height: calc( 100% - 90px );
        line-height: 15px;
    }
}
@media (max-width: 991px) {
    #thelab_wuwowBN_pc {
        display: none;
    }
    #thelab_wuwowBN_mob {
        display: flex;
        flex-direction: column;
    }
    #thelab_wuwowBN_mob .slider_info .info_text .info_content {
        margin-bottom: 65px;
    }
    #thelab_wuwowBN_mob .slider_info .info_text {
        line-height: 21px;
    }
    .remark {
        margin-top: 20px;
    }
}
@media (min-width: 992px) {
    #thelab_wuwowBN_ipad {
        display: none;
    }
}
@media (min-width: 768px) {
    #thelab_wuwowBN_mob {
        display: none;
    }
}
@media (max-width: 767px) {
    #thelab_wuwowBN_mob .slider_info .info_text .info_content {
        margin-bottom: 15px;
    }
    #thelab_wuwowBN_pc {
        display: none;
    }
    #thelab_wuwowBN_ipad {
        display: none;
    }
}
@media (max-width: 575px) {
    #thelab_wuwowBN_mob .slider_info {
        padding-bottom: 0;
    }
    #thelab_wuwowBN_mob .slider_info .info_text .info_content {
        margin-bottom: 50px;
    }
}
/* 因為nav加項目 因此留著八周年慶nav css的更改 */
.main-nav {
    position: relative;
    display: block;
    height: 41px;
}

.main-nav > ul {
    position: absolute;
    right: 320px;
}

.mobile-nav,.mobile-nav-toggle,.mobile-nav-user{
    display: none;
}

@media screen and (max-width: 1023px){
    .main-nav {
        display: none;
    }
    
    .mobile-nav,.mobile-nav-toggle,.mobile-nav-user{
        display: block;
    }
}

.main-nav .nav-item{
    padding: 10px 5px;
}

.main-nav .nav-tel{
    padding: 10px 10px 10px 5px;
  }

.nav-item.anniversary-2022 {
    padding: 0;
}

.nav-item.anniversary-2022 img {
    max-height: 41px;
}

/* 漢堡選單周年慶按鈕 */
.mobile-nav .nav-item.anniversary-2022 img {
    max-height: 60px;
}

.nav-item.nav-tel.phone-icon {
    padding: 0;
}

.nav-item.nav-tel.phone-icon a {
    margin-right: 25px;

    border-radius: 50%;
    padding: 11px;

    transition: background-color 0.65s ease-in-out;
    background-color: #C49C46;
}

.nav-item.nav-tel.phone-icon a:hover {
    background-color: #957839;
    animation: vibrate 0.65s ease;
}

@keyframes vibrate {
    10%,
    90% {
        transform: translate3d(-2%, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(4%, 0, 0);
    }


    30%,
    70% {
        transform: translate3d(-4%, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(8%, 0, 0);
    }

    50% {
        transform: translate3d(-8%, 0, 0);
    }

    
}
/* TODO: fot 八周年慶導航列排版 */