html, body {
    font-family:'Poppins', Arial, Helvetica, sans-serif; font-size:12px;
    padding:0; margin:0;
}
a:hover, a:focus { text-decoration:none; }
.navbar-brand { height:auto; }
.scrolled { display:none; }
.menu { margin:0; padding:0; }
.menu-button-container { display:none; height:100%; width:30px; cursor:pointer; }
#menu-toggle { display:none; }
.menu-button, .menu-button::before, .menu-button::after {
    display:block; background-color:#fff; position:absolute; height:4px; width:30px;
    -webkit-transition:transform 400ms cubic-bezier(0.23, 1, 0.32, 1); transition:transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;
}
.page2 .menu-button, .page2 .menu-button::before, .page2 .menu-button::after { background-color:#ce2772; }
.menu-button::before { content:''; margin-top:-8px; }
.menu-button::after { content:''; margin-top:8px; }
#menu-toggle:checked + .menu-button-container .menu-button::before { margin-top:0px; -webkit-transform:rotate(405deg); transform:rotate(405deg); }
#menu-toggle:checked + .menu-button-container .menu-button { background:rgba(255, 255, 255, 0); }
#menu-toggle:checked + .menu-button-container .menu-button::after { margin-top:0px; -webkit-transform:rotate(-405deg); transform:rotate(-405deg); }
.navbar-nav > li { padding:6px 12px; }
.navbar-nav > li > a { color:#fff; font-size:20px; }
.navbar-nav > li > a:hover, .navbar-nav > li > a:active { background-color:transparent; color:#ccc; }
.nav > li > a:focus, .nav > li > a:hover { text-decoration:none; background-color:transparent; }
.main .main-container { height:100vh; }
.main-container { background:transparent url('../img/webp/img-bg.webp') center center / cover no-repeat fixed; }
.top-nav {
    position:fixed; width:100%; z-index:11; padding:0 15px;
    display:flex; display:-webkit-flex; display:-ms-flexbox; align-items:center; -webkit-align-items:center; -ms-flex-align:center;
    justify-content:space-between; -webkit-justify-content:space-between; -webkit-flex-direction:row; flex-direction:row;
}
.inner-cont .intro-title { font-weight:800; font-size:42px; }
.inner-cont {
    width:55%; color:#fff; text-align:center; font-size:20px; font-weight:200;
    position:absolute; top:50%; left:50%; margin:-10% 0 0 -27%;
}
.inner-cont .btn1 { color:#fff; font-weight:800; text-transform:uppercase; }
.intro { margin:15px 0 40px; }
.btn1 { border-radius:15px; border:solid 2px #fff; padding:15px 40px; }
.icon-scroll, .icon-scroll:before { position:absolute; left:50%; }
.icon-scroll {
    width:40px; height:70px;
    margin-top:-35px; margin-left:-20px;
    bottom:5%;
    box-shadow:inset 0 0 0 1px #fff;
    border-radius:25px;
}
.icon-scroll:before {
    content:'';
    width:8px; height:8px;
    background:#fff;
    margin-left:-4px;
    top:8px;
    border-radius:4px;
    -webkit-animation-duration:1.5s; animation-duration:1.5s;
    -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;
    -webkit-animation-name:scroll; animation-name:scroll;
}
@-webkit-keyframes scroll {
    0% { opacity:1; }
    100% { opacity:0; -webkit-transform:translateY(46px); transform:translateY(46px); }
}
@keyframes scroll {
    0% { opacity:1; }
    100% { opacity:0; -webkit-transform:translateY(46px); transform:translateY(46px); }
}
.page2 .top-nav { position:fixed; z-index:11; background-color:#eee; box-shadow:0 3px 7px 3px rgba(0, 0, 0, .15); width:100%; }
.page2 .navbar-nav > li > a { color:#666; font-size:20px; }
.page2 .navbar-nav > li > a:hover, .navbar-nav > li > a:active { background-color:transparent; color:#333; }
.page2 .container { width:1366px; }
.contents { padding-top:150px; }
.top-title { width:90%; padding-bottom:70px; }
.title1 { font-weight:800; font-size:22px; margin-bottom:30px; }
.borderline { background-color:#822260; height:10px; display:block; width:100px; }
.title2 { font-weight:800; font-size:60px; line-height:64px; margin:30px 0; }
.title3 { font-weight:400; font-size:28px; color:#666; }
.cate > .row > div { margin-bottom:50px; }
.title0 { font-weight:800; font-size:26px; color:#666; border-bottom:dashed 2px #ccc; margin-bottom:20px; padding-bottom:5px; min-height:50px; }
.title0 img { margin-right:10px; }
.swiper-container { width:100%; height:400px; overflow:hidden; position:relative; }
.swiper-slide { width:100%!important; }
.swiper-slide img { width:100%; object-fit:cover; }
.swiper-button-prev, .swiper-button-next { color:#fff !important; }
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content:'\203A'!important; filter:drop-shadow(0 0 3px rgba(0,0,0,.8)); }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content:'\2039'!important; filter:drop-shadow(0 0 3px rgba(0,0,0,.8)); }
.caption { position:absolute; bottom:0; background-color:rgba(0, 0, 0, .7); z-index:5; width:100%; color:#fff; padding:5px; }
.rt-list { background-color:#eee; padding:10px; }
.rt-list span { display:block; padding:5px 10px; font-size:16px; }
.rt-list span:before { content:'\25b6'; color:#bb1d83; display:inline-block; margin-right:10px; }
.cate3 .row, .cate4 .row, .cate5 .row { margin-bottom:30px; }
.cate3 .row > div img, .cate4 .row > div img { display:block; margin:0 auto; width:120px; }
.cate3 .row > div span, .cate4 .row > div span { font-weight:800; color:#666; text-align:center; display:block; margin-top:5px; }
.cate5 .row > div img { width:100%; height:220px; object-fit:cover; }
.cate6 > img, .cate7 > img { margin-bottom:10px; width:100%; }
.col2 { -webkit-box-flex:1; flex:1; }
/* Accordion styles */
.tabs {
    border-radius:8px;
    overflow:hidden;
    margin-bottom:50px;
}
.tab { width:100%; color:white; overflow:hidden; }
.tab-label {
    display:-webkit-box;
    display:flex;
    -webkit-box-pack:justify;
    justify-content:space-between;
    padding:0 1em;
    font-weight:bold;
    cursor:pointer;
    border-bottom:dashed 1px #ccc;
    /* Icon */
}
.tab-label::after {
    content:"\276F";
    width:1em;
    height:1em;
    text-align:center;
    -webkit-transition:all .35s;
    transition:all .35s;
    color:#666;
    margin-top:7px;
}
.tab-content {
    max-height:0;
    padding:0 1em;
    color:#2c3e50;
    background:white;
    -webkit-transition:all .35s;
    transition:all .35s;
}
.tabs input { position:absolute; opacity:0; z-index:-1; }
.tabs input:checked + .tab-label::after { -webkit-transform:rotate(90deg); transform:rotate(90deg); }
.tabs input:checked ~ .tab-content { max-height:100vh; padding:1em; }
.contact { height:100vh; position:relative; }
.contact .row, .contact .textarea { margin-bottom:15px; }
.contact { background:transparent url('../img/webp/bg-contact.webp') center center / cover no-repeat; }
.contactbox {
    background-color:rgba(255, 255, 255, .7); text-align:center; width:90%; max-width:800px; margin:0 auto;
    border-radius:15px; padding:30px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9;
}
.contact-title { color:#e1275d; font-weight:800; font-size:60px; }
.contact-sub { font-weight:400; font-size:20px; color:#666; }
.grecaptcha-badge { margin:10px auto; position:relative!important; bottom:0!important; right:0!important; }
.button {
    background:rgb(204, 28, 141);
    background:-moz-linear-gradient(90deg, rgba(204, 28, 141, 1) 0%, rgba(207, 67, 116, 1) 100%);
    background:-webkit-linear-gradient(90deg, rgba(204, 28, 141, 1) 0%, rgba(207, 67, 116, 1) 100%);
    background:linear-gradient(90deg, rgba(204, 28, 141, 1) 0%, rgba(207, 67, 116, 1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc1c8d", endColorstr="#cf4374", GradientType=1);
    color:#fff !important;
    font-weight:800;
    padding:10px 50px;
}
#button {
    display:inline-block;
    background-color:rgba(0, 0, 0, .5);
    width:50px; height:50px;
    text-align:center;
    border-radius:4px;
    position:fixed; z-index:1000; right:30px; bottom:47px;
    transition:background-color .3s, opacity .5s, visibility .5s;
    opacity:0;
    visibility:hidden;
}
#button::after {
    content:"\25b2";
    font-weight:normal;
    font-style:normal;
    font-size:18px;
    line-height:50px;
    color:#fff;
}
#button:hover {
    cursor:pointer;
    background-color:#333;
}
#button:active {
    background-color:#555;
}
#button.show {
    opacity:1;
    visibility:visible;
}
#footer { background-color:#eee; padding:15px 15px 10px; color:#333; }
.footerwrap {
    display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
    -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
    flex-flow:row wrap; place-content:stretch space-between; align-items:center;
}
.copyright, .tnclinks { padding:0 0 5px; }
.copyright { text-align:center; }
.copyright a { cursor:pointer; text-decoration:none; color:#333; }
.tnclinks { text-align:center; font-size:12px; line-height:14px; color:#333; }
.extra_link a { text-decoration:none; color:#333; font-size:12px; line-height:14px; }
.extra_link a:hover { text-decoration:underline; }

.mobi { display:none; }
.fade-in-top {
    -webkit-animation:fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation:fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform:translateY(-50px); transform:translateY(-50px);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(0); transform:translateY(0);
        opacity:1;
    }
}
@keyframes fade-in-top {
    0% {
        -webkit-transform:translateY(-50px); transform:translateY(-50px);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(0); transform:translateY(0);
        opacity:1;
    }
}
@media only screen and (max-width:1366px) {
    .inner-cont { margin:-10% 0 0 -28%; font-size:16px; }
    .inner-cont .intro-title { font-weight:800; font-size:28px; }
    .intro { margin:10px 0 25px; }
    .btn1 { border-radius:10px; padding:10px 25px; }
    .page2 .container { width:970px; }
    .main .navbar-brand img { width:150px; }
    .main .navbar-nav > li > a { font-size:18px; }
    .title1 { font-size:18px; margin-bottom:20px; }
    .borderline { height:7px; width:70px; }
    .title2 { font-size:48px; line-height:52px; margin:20px 0; }
    .title3 { font-size:20px; }
    .cate > .row { margin-bottom:30px; }
    .title0 { font-size:18px; border-bottom:dashed 1px #ccc; margin-bottom:10px; padding-bottom:5px; min-height:35px; }
    .title0 img { margin-right:5px; width:25px; }
    .swiper-container { width:100%; height:350px; }
    .swiper-slide img { height:350px; }
    .swiper-button-prev:after, .swiper-button-next:after { font-size:22px; }
    .cate3 .row, .cate4 .row, .cate5 .row { margin-bottom:20px; }
    .cate3 .row > div img, .cate4 .row > div img { width:90px; }
    .cate5 .row > div img { height:170px; object-fit:cover; }
    .rt-list span { font-size:13px; }
    .contact .row, .contact .textarea { margin-bottom:5px; }
    .contactbox { max-width:600px; padding:15px; }
    .contact-title { font-size:48px; }
    .contact-sub { font-size:14px; }
    #button { width:35px; height:35px; }
    #button::after { font-size:14px; line-height:35px; }
}
@media only screen and (max-width:768px) {
    .main-container { background-attachment:scroll; }
    .navbar-brand img { width:120px; }
    .top-nav { padding:0 15px 0 0; background-color:rgba(0,0,0,.7); }
    .menu-button-container { display:flex; display:-webkit-flex; display:-ms-flexbox; }
    .menu {
        position:absolute; top:-1px; margin-top:50px; left:0; width:100%;
        -webkit-flex-direction:column; flex-direction:column; -webkit-align-items:center; align-items:center;
        -webkit-justify-content:center; justify-content:center;
    }
    #menu-toggle ~ .menu li, #menu-toggle ~ .menu li a {
        height:0; margin:0; padding:0; border:0;
        -webkit-transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1); transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle ~ .menu li a { display:none; }
    #menu-toggle:checked ~ .menu li {
        height:60px; padding:0.5em;
        -webkit-transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1); transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li a { display:block; padding:15px 0; height:auto; width:100%; text-align:center; }
    #menu-toggle:checked ~ .menu { -webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, .15); box-shadow:0 6px 5px 0 rgba(0, 0, 0, .15); }
    .menu > li {
        display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; -webkit-justify-content:center;
        margin:0; padding:0.5em 0; width:100%; background-color:rgba(0,0,0,.7);
    }
    .page2 .menu > li { background-color:#eee; }
    .menu > li:not(:last-child) { border-bottom:1px solid #444; }
    .inner-cont { width:100%; margin:0 auto; padding:30vh 5% 0; font-size:13px; position:relative; top:0; left:0; transform:none; }
    .inner-cont .intro-title { font-size:24px; }
    .page2 .container { width:100%; }
    .contents { padding-top:100px; }
    .title2 { font-size:36px; line-height:40px; margin:12px 0; }
    .title3 { font-size:16px; }
    .top-title { padding-bottom:40px; }
    .cate3 .row > div img, .cate4 .row > div img { width:70px; }
    .contact-title { font-size:36px; }
}
@media only screen and (max-width:480px) {
    #navbar { background-color:rgba(0, 0, 0, .95); }
    .page2 #navbar { background-color:transparent; }
    .inner-cont .btn1 { width:200px; }
    .title0 { border:none; margin-bottom:0; }
    .title2 { font-size:24px; line-height:28px; }
    .cate { padding:0; }
    .cate3 .row, .cate4 .row, .cate5 .row { overflow:auto; }
    .cate3 .row > div img, .cate4 .row > div img { width:60px; }
    .swiper-container { height:150px; }
    .swiper-slide img { height:150px; }
    .navbar-toggle { padding:0; }
    .top-title { width:100%; }
    .contact-title { font-size:24px; }
    .desk { display:none; }
    .mobi { display:block; }
}
@media only screen and (max-width:320px) {
    .grecaptcha-badge { margin:5px auto; }
    .cate3 .row > div, .cate4 .row > div { width:50%; }
    .cate3 .row > div img, .cate4 .row > div img { width:90px; }
}
@media only screen and (max-width:991px) and (orientation:landscape) {
    .main-container { background-attachment:scroll; }
    .page2 .container { width:100%; }
    .page2 #navbar { background-color:transparent; }
    .contact { height:170vh; }
}