/* -------------------------------------------------
layout
-------------------------------------------------*/
html,body {background: #000000;}
main {overflow: hidden;max-width: 1920px;margin:0 auto;background: #101010; }
.section {width: 100%; text-align: justify;background: #000000; scroll-snap-type: y mandatory; }
/*----置中----*/
.wrapper{display: flex;justify-content: center;align-items: center;
    min-height: 100vh; /* 滿版高度 */
    padding: 2rem;/* 32px，依全站比例統一縮放 */
    box-sizing: border-box;}
.wrap-box {position: relative; top: 0;right: 0; left: 0;margin: 0px auto 0; padding: 0;z-index: 3;width: 50%;height: 95%;max-width: 1800px;}


/*-----------------------------------------------
    page-frame
-----------------------------------------------*/
.hero_section {background: url(../images/bg_01.jpg)100% 0% /100% no-repeat;height: 55.9vw;max-height:1081px;position: relative;}
.story_section {background:  url(../images/bg_02.jpg)100% 0% /100% no-repeat;height: 55.5vw;max-height:1078px;position: relative; scroll-snap-align: start;scroll-margin-top: 1580px;}
.role_section {background: url(../images/bg_03.jpg)100% 0% /100% no-repeat;height: 56vw;max-height:1081px;position: relative;}
.skin_section{background:  url(../images/bg_04.jpg)100% 0% /100% no-repeat;height: 55.8vw;max-height:1079px;position: relative;}
.merch_section{background: url(../images/bg_05.jpg)100% 0% /100% no-repeat;height: 46vw;max-height:902px;position: relative;}
.callfor_section{background:url(../images/bg_06.jpg)100% 0% /100% no-repeat;height: 46.5vw;max-height:899px;position: relative;}
.ooh_section{background: url(../images/bg_07.jpg)100% 0% /100% no-repeat;height: 50.9vw;max-height:996px;position: relative;}
.pv_section{background:  url(../images/bg_08.jpg)100% 0% /100% no-repeat;height: 52.5vw;max-height:1019px;position: relative;}

@media screen and (max-width:768px) {
    .hero_section {background: url(../images/bg_01m.jpg)100% 0% /100% no-repeat;width: 100%; height:150vw;max-height: 1155px;}
    .story_section {background:  url(../images/bg_02m.jpg)100% 0% /100% no-repeat;width: 100%;height:143vw;max-height: 1098px; }
    .role_section {background: url(../images/bg_03m.jpg)100% 0% /100% no-repeat;;width: 100%;height:192vw;max-height: 1476px;  }
    .skin_section{background:  url(../images/bg_04m.jpg)100% 0% /100% no-repeat;width: 100%;height:154vw;max-height: 1184px; }
    .merch_section{background: url(../images/bg_05m.jpg)100% 0% /100% no-repeat; ;width: 100%;height:114vw;max-height: 885px; }
    .callfor_section{background:url(../images/bg_06m.jpg)100% 0% /100% no-repeat; ;width: 100%;height: 168vw;max-height: 1290px;}
    .ooh_section{background: url(../images/bg_07m.jpg)100% 0% /100% no-repeat;;width: 100%;height:122vw;max-height: 938px;}
    .pv_section{background:  url(../images/bg_08m.jpg)100% 0% /100% no-repeat;;width: 100%;height:255vw;max-height: 1974px }
}

@media screen and (max-width:480px) {
}
@media screen and (max-width:400px) {
}
/*-----------------------------------------------
    footer
-----------------------------------------------*/
#footer {background:url(../images/bg_09.jpg)100% 0% /100% no-repeat;height:29vw;max-height:572px;position: relative;}
.copyright { position:absolute; background: url(../images/cr_img.png) 100% 0 /100% no-repeat; width: 939px;height: 319px;margin: 5vw  0 0 10vw; }

@media screen and (max-width:1480px) {
        .copyright {width: 850px;height: calc(850px * 319 / 939); margin: 3vw  0 0 5vw;}
}
@media screen and (max-width:1280px) {
        .copyright {margin: 3vw  0 0 15vw;}
}

/*-----------------------------------------------
menu
-----------------------------------------------*/
.navbar {position: fixed;top: 0;width:170px ;height: 860px;background:url(../images/menu_bg.png) 0px 0px /100% no-repeat;z-index: 5000;margin: 15px 0 0 20px;}
.navbar ul{width:195px;height:auto; display: flex;flex-direction: column;margin-top: 15px;margin-left:0px; gap: .3rem;list-style: none;}
.navbar ul li{width: 195px;height:35px; display:block;background-image:url(../images/menu_w.png);background-size: 100%; opacity: .8; background-repeat: no-repeat; cursor: pointer;transform-origin: right; }

.navbar li a{width: 195px;height:35px;  display:block; }
.navbar li a:hover,.navbar li:hover { opacity: 1;transform: scale(1.2);}
.navbar li.active,.navbar li.active a{  opacity: 1;transform: scale(1.2);}
.navbar li.active:hover,.navbar li.active a:hover{  opacity: 1; transform: scale(1.2);}

.l_top{}
.l_update{background-position-y:-35px;}
.l_cham{background-position-y:-75px;}
.l_pv{background-position-y:-115px;}

.social-link {z-index: 100;margin:350% 0 0 0;height: 20%;}
.social-link ul {display: flex;}
.social-link ul li {flex: 1;margin: 1% 0;transition: all .3s ease;transform-origin: left top;}

.social-link ul li:hover {transform: scale(1.1);transition: all .3s ease;}

.social-link ul li:nth-child(1) {background: url(../images/social_link.png) 0 0 /18% no-repeat;}
.social-link ul li:nth-child(2) {background: url(../images/social_link.png) 0 48% /18% no-repeat;}
.social-link ul li:nth-child(3) {background: url(../images/social_link.png) 0 100% /18% no-repeat;}



@media screen and (min-width:1921px){
}
@media screen and (max-width:1680px) {
    .navbar{transform: scale(.88);margin: -35px 0 0 10px;}
}
@media screen and (max-width:1480px) {
    .navbar{transform: scale(.68);margin: -130px 0 0 -8px;}
}
@media screen and (max-width:1280px){
}
@media screen and (max-width:768px) {
.social-link  {position: absolute;right: 5px;top: 55px;width: 70px;}
.social-link ul li{margin-left: -10px;}
}

@media screen and (max-width:480px) {
}
/*-----------------------------------------------
hero
-----------------------------------------------*/
.hero_section .hero_slogan{background: url(../images/hero_slogan.png) 100% 0% /100% no-repeat;width: 664px;height: 626px;position: absolute;right: 1vw; top:10vw}
.hero_section .btn-home{ transform-origin: left top;background: url(../images/hero_logo.png) 100% 0%/100% no-repeat;height:100%;width: 10%; position: absolute;right: 1vw; top:1vw}
.hero_section .btn-home:hover {transform: scale(1.05);transition: all .3s ease-in;}

@media screen and (min-width:1921px){
    .hero_section .hero_slogan{right: 2%; top:20%}
}
@media screen and (max-width:1480px) {
    .hero_section .hero_slogan {width: 500px;height: calc(500px * 626 / 664); }
}

@media screen and (max-width:768px) {
    .hero_section .btn-home{width: 35%;right: 1%;; top:0}
    .social-link_m {position: absolute; width: 50%; height: 10%;margin-top:135% ; margin-left: 25%; display: block;z-index: 100;}
    .social-link_m ul {display: flex }
    .social-link_m ul li {flex: 1; justify-content:center;margin-left: 5%;width: 10%; }

    .social-link_m ul li:nth-child(1) {background: url(../images/social_link_r.png) 0 0 /380% no-repeat;}
    .social-link_m ul li:nth-child(2) {background: url(../images/social_link_r.png) 50% 0 /380% no-repeat;}
    .social-link_m ul li:nth-child(3) {background: url(../images/social_link_r.png) 100% 0 /380% no-repeat;}


}

/*-----------------------------------------------
story
-----------------------------------------------*/
.story_section .story_title{background: url(../images/story_title.png) 100% 0% /100% no-repeat;width: 332px;height: 107px; position: absolute;margin: -35vw 0 0 70vw ; z-index: 10;}
.story_section .story_slogan{ background: url(../images/story_slogan.png) 100% 0% /100% no-repeat;width: 737px;height: 232px;   position: absolute;margin: 40vw 0 0 5vw ; z-index: 10;}
.story_section .story_redline{background: url(../images/story_redline.png) 100% 0% /100% no-repeat;width: 100%;height:80vw;max-height:1512px; position:absolute;top:-10vw; z-index: 5;}
.story_section .story_paper{ background: url(../images/story_paper.png) 100% 0% /100% no-repeat;width: 100%;height:30vw;max-height:534px; position: absolute;top:15vw; z-index: 8;}

@media screen and (min-width:1921px){
    .story_section .story_title{margin:-40% 0 0 60% ;  }
    .story_section .story_slogan{margin: 40% 0 0 5%; }
    .story_section .story_redline{top:-12%; }
    .story_section .story_paper{top:25%; }

}
@media screen and (max-width:1680px) {
    .story_section .story_title{width: 280px;height: calc(280px * 107 / 332); }
    .story_section .story_slogan{width: 690px;height: calc(690px * 232 / 737);}
}
@media screen and (max-width:1480px) {
    .story_section .story_title{width: 220px;height: calc(220px * 107 / 332); }
    .story_section .story_slogan{width: 600px;height: calc(600px * 232 / 737); }
}


/*-----------------------------------------------
role  swiper
-----------------------------------------------*/  
.role_section .swiper{margin:auto;position: absolute;overflow: hidden;list-style: none;padding: 0;z-index: 1;width: 100%;height: 100%; } 
.swiper-slide{overflow: hidden;}
.role_section .role-group {position: absolute;left: 0;top: -5%;width: 100%; height: 100%;}
.role-group .role-layer {position: absolute;width: 100%; height: 100%;background-size: contain; opacity: 0;background-position: center;background-repeat: no-repeat;}

.role_section .swiper-slide:nth-child(1) .role-g { 
    background-image: url('../images/role01_g.png'); width: 28% !important;margin:0 0 0 10vw; }
.role_section .swiper-slide:nth-child(1) .role-bg { 
    background-image: url('../images/role01_bg.png');width: 90% !important;margin:-2vw 0 0 1vw; }
.role_section .swiper-slide:nth-child(1) .role-w {
    background-image: url('../images/role01_w.png'); width: 45% !important;margin:0 0 0 48vw;}

.role_section .swiper-slide:nth-child(2) .role-g { 
    background-image: url('../images/role02_g.png'); width: 48% !important;margin:0 0 0 7vw;  }
.role_section .swiper-slide:nth-child(2) .role-bg { 
    background-image: url('../images/role02_bg.png'); width: 90% !important;margin:-2vw 0 0 1vw;  }
.role_section .swiper-slide:nth-child(2) .role-w { 
    background-image: url('../images/role02_w.png'); width: 40% !important;margin:0 0 0 50vw; }

.role-g.active { animation: slideInLeft 0.8s ease-out forwards; }
.role-bg.active { animation: scaleIn 0.6s ease-out 0.3s forwards; }
.role-w.active { animation: slideInRight 0.8s ease-out 0.6s forwards; }
@keyframes slideInLeft {
  from { transform: translateX(-30%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(30%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.swiper-button-prev::after,.swiper-button-next::after {display: none; /* 隱藏原生箭頭 */}
.role_section .swiper-button-next{display: block; z-index: 100;position: absolute;margin:-5vw 2vw 0 0; 
    z-index: 100;background: url('../images/role_btn.png') 100% 50% /200%  no-repeat;width: 3%;height: 6%;  }
.role_section .swiper-button-prev{display: block; z-index: 100;position: absolute;margin:-5vw 0 0 53vw;
    z-index: 100;background: url('../images/role_btn.png') 0% 50% /200%  no-repeat; width: 3%;height: 6%;  }

.role_section .swiper-button-next:hover ,.role_section .swiper-button-prev:hover{transform: scale(1.2);transition: all .3s ease-in;}

@media screen and (min-width:1921px){
.role_section .swiper-slide:nth-child(1) .role-w {margin:0 0 0 48%;}
.role_section .swiper-slide:nth-child(2) .role-w {margin:0 0 0 55%; }
.role_section .swiper-button-next{margin:-5% 1% 0 0;}
.role_section .swiper-button-prev{margin:-5% 0 0 58%;}
}
@media screen and (max-width:1680px) {

}
@media screen and (max-width:1480px) {

}
@media screen and (max-width:1280px){

}
@media screen and (max-width:768px) {
    .role_section .swiper-slide:nth-child(1) .role-g { background-image: url('../images/role01_m.png'); width: 100% !important;margin:0 0 0 0; }
    .role_section .swiper-slide:nth-child(2) .role-g { background-image: url('../images/role02_m.png'); width: 100% !important;margin:0 0 0 0; }
    .role_section .swiper-button-next{margin:70vw 30vw 0 0; width: 15%;height: 15%;  }
    .role_section .swiper-button-prev{margin:70vw 0 0 30vw; width: 15%;height: 15%;  }
}
@media screen and (max-width:480px) {
}


/*-----------------------------------------------
skin
-----------------------------------------------*/
.skin_section .skin_w{background: url(../images/skin_w.png) 100% 0% /100% no-repeat;width:1632px;height: 1087px; position: absolute;right:0;top:-10vw;}

@media screen and (min-width:1921px){
    .skin_section .skin_w{top:-10%; }    
}
@media screen and (max-width:1680px) {
    .skin_section .skin_w{width: 1400px;height: calc(1400px * 1087 / 1632); }
}
@media screen and (max-width:1480px) {
    .skin_section .skin_w{width: 1150px;height: calc(1150px * 1087 / 1632);top:-3vw; }
}
@media screen and (max-width:1280px){
    .skin_section .skin_w{width: 1000px;height: calc(1000px * 1087 / 1632); }
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:480px) {
}

/*-----------------------------------------------
merch
-----------------------------------------------*/
.merch_section .merch_w{background: url(../images/merch_w.png) 100% 0% /100% no-repeat;width: 956px;height: 721px; position: absolute;margin: -10vw 0 0 1vw;}

@media screen and (max-width:1480px) {
    .merch_section .merch_w{width: 750px;height: calc(750px * 721 / 956); }
}

/*-----------------------------------------------
callfor
-----------------------------------------------*/
.callfor_section  .callfor_w{background: url(../images/callfor_w.png) 100% 0% /100% no-repeat;width: 959px;height: 721px; position: absolute;margin: -5vw 0 0 30vw; z-index: 10;}
.callfor_section  .callfor_x{background: url(../images/callfor_x.png) 100% 0% /100% no-repeat;width: 409px;height: 409px; position: absolute;margin: 0 0 0 -50vw; }
.callfor_section  .callfor_btn{background: url(../images/callfor_btn.png) 100% 0% /100% no-repeat;width: 248px;height: 22px; position: absolute;margin: 22vw 0 0 -5vw;z-index: 10; transition: transform 0.3s ease-in;opacity: .8; }
.callfor_section  .callfor_btn:hover{transform: translateX(10px) translateY(0); opacity: 1; }
.callfor_section .callfor_note_btn{background: url(../images/callfor_note_btn.png) 100% 0% /100% no-repeat;width: 248px;height: 22px; position: absolute;margin: 25vw 0 0 -5vw;z-index: 10; transition: transform 0.3s ease-in;opacity: .8; }
.callfor_section .callfor_note_btn:hover{transform: translateX(10px) translateY(0); opacity: 1; }

@media screen and (min-width:1921px){
    .callfor_section  .callfor_w{margin: -5% 0 0 30%; }
    .callfor_section  .callfor_x{ margin: 0 0 0 -50%;}
    .callfor_section  .callfor_btn{ margin: 36% 0 0 -5%;}

}
@media screen and (max-width:1680px) {
    .callfor_section  .callfor_w{width: 800px;height: calc(800px * 721 / 959); }
}
@media screen and (max-width:1480px) {
    .callfor_section  .callfor_w{margin: -5vw 0 0 35vw; }
    .callfor_section  .callfor_x{ margin: 0 0 0 -52%;}
    .callfor_section  .callfor_btn{ margin: 43% 0 0 -2%;}
}
@media screen and (max-width:1280px){
    .callfor_section  .callfor_w{width: 700px;height: calc(700px * 721 / 959);  }
    .callfor_section  .callfor_x{ width: 350px;height: 350px}
}
@media screen and (max-width:768px) {
    .callfor_section  .callfor_btn{background: url(../images/callfor_btn_m.png) 100% 0% /100% no-repeat;width: 80%;height: 20%; position: absolute;
    z-index: 10; margin-top:1240px; margin-left: 2%; }
    .callfor_section  .callfor_note_btn{background: url(../images/callfor_note_btn_m.jpg) 100% 0% /100% no-repeat;width: 80%;height: 20%; position: absolute;
    z-index: 10; margin-top:1400px; margin-left: 2%; }
    .callfor_section  .callfor_btn:hover{transform: translateX(0) translateY(0); opacity: 1; }
    .callfor_section .callfor_note_btn:hover{transform: translateX(0) translateY(0); opacity: 1; }
}
@media screen and (max-width:480px) {   
    .callfor_section  .callfor_btn{ margin-top:430px; }
    .callfor_section  .callfor_note_btn{ margin-top:530px;}
}

@media screen and (max-width:400px) {   
    .callfor_section  .callfor_btn{ margin-top:420px; }
    .callfor_section  .callfor_note_btn{ margin-top:500px;}
}


/*-----------------------------------------------
ooh
-----------------------------------------------*/
.ooh_section .ooh_w{background: url(../images/ooh_w.png) 100% 0% /100% no-repeat;width:1158px;height: 719px;position: absolute; margin: 0 0 0 0; }
.ooh_section .ooh_btn{background: url(../images/ooh_btn.png) 100% 0% /100% no-repeat;width:164px;height: 23px;position: absolute; margin: -30vw 0 0 47vw;   z-index: 10;transition: transform 0.3s ease-in;opacity: .8;}
.ooh_section .ooh_btn:hover{  transform: translateX(10px) translateY(0);opacity: 1; }

@media screen and (min-width:1921px){
    .ooh_section .ooh_btn{ margin: -30% 0 0 47%;  }

}
@media screen and (max-width:1680px) {
.ooh_section .ooh_btn{ margin: -32vw 0 0 55vw;  }

}
@media screen and (max-width:1480px) {
   .ooh_section .ooh_w{width: 890px;height: calc(890px * 719 / 1158);margin: 10vw 0 0 0;}
   .ooh_section .ooh_btn{ margin: -20vw 0 0 48vw;  }

}
@media screen and (max-width:1280px){
         .ooh_section .ooh_w{margin: 5vw 0 0 0;}
         .ooh_section .ooh_btn{ margin: -30vw 0 0 55vw;  }
        }
@media screen and (max-width:768px) {
        .ooh_section .ooh_btn{background: url(../images/ooh_btn_m.png) 100% 0% /100% no-repeat;width: 80%;height: 20%; position: absolute;
        z-index: 10;margin-top: 880px; margin-left: 3%; }
}
@media screen and (max-width:480px) {
        .ooh_section .ooh_btn{margin-top:120px; }
}

@media screen and (max-width:400px) {
    .ooh_section .ooh_btn{margin-top:240px; }
}


/*-----------------------------------------------
pv
-----------------------------------------------*/
.pv_section .pv_img{background: url(../images/pv_img.png) 100% 0% /100% no-repeat;width:1473px;height: 659px;position:absolute;margin: 10vw 0 0 0;}
.story_mv{width:80%;height: 100%;position:absolute;margin: 20vw 0 0 0;}
.video-container {position: absolute;width: 75%;height: 100%;margin: 20vw 0 0 0;}
.video-container iframe {position: absolute;top: 0;left: 0; width: 100%;height: 80%;transition: opacity 0.5s;}
/* 隱藏標題和進度條 */
.ytp-title,.ytp-chrome-top-buttons,.ytp-pause-overlay {display: none !important;}
.html5-endscreen {display: none !important;}


@media screen and (min-width:1921px){
    .pv_section .pv_img{margin: 10% 0 0 0;}
}
@media screen and (max-width:1680px) {
}
@media screen and (max-width:1480px) {
    .pv_section .pv_img{width: 1100px;height: calc(1100px * 659 / 1473); }
    .video-container {margin: 25vw 0 0 0;}
}
@media screen and (max-width:1280px){
}
@media screen and (max-width:768px) {
    .video-container {width: 90%;height: 25%;margin: 530px 0 0 0;}
}
@media screen and (max-width:480px) {
    .video-container {width: 90%;height: 25%;margin:30px 0 0 0;}
}
@media screen and (max-width:400px) {
    .video-container {width: 90%;height: 25%;margin: 90px 0 0 0;}
}