/* rwd*/
/*-----------------------------------------------
    device width test 
-----------------------------------------------*/
.test_r{position: fixed;width: 5px; height: 10px; z-index: 9999;left: 0;}
@media screen and (min-width:1921px) {/*--帶魚屏--*/
    .test_r{ background-color: #410000;position: fixed;width: 10px; height: 10px; z-index: 9999;left: 0;}
}
@media screen and (max-width:1680px) {/*--桌機--*/
    .test_r{ background-color: #c2c2c2;}
}
@media screen and (max-width:1480px) {/*--筆電--*/
    .test_r{background-color: #ff6c6c79;}
}
@media screen and (max-width:1280px) {/*--小筆電--*/
    .test_r{background-color: #899cff79;}
}
@media screen and (max-width:768px) {/*--ipad--*/
    .test_r{background-color: #e5ff00c2;}
}
@media screen and (max-width:480px) {/*--and--*/
    .test_r{background-color: #ff0000c2;}
}
@media screen and (max-width:400px) {/*--ios--*/
    .test_r{background-color: #4369bac2;}
}

/*-----------------------------------------------
    device pc tablet mobile
-----------------------------------------------*/
.pc{display: block;opacity: 1;pointer-events: auto; }

.tablet ,.mobile{display: none;pointer-events: none; }

@media screen and (max-width:769px){
    .pc{ display: none;opacity: 0;pointer-events: none; }
    .pc02{ display: none;opacity: 0;pointer-events: none; }
    .tablet{display: block;pointer-events: auto; } } 

@media screen and (max-width:480px)
{ .mobile{display: block;width: auto;height: auto;pointer-events: auto; } } 

/*----------------------------------------帶魚屏-----------------------------------------------------*/
@media screen and (min-width:1921px) {
    .top_logo{ left:100px;top:50px;; }
    .social-link {right:130px;bottom:22%;}
    .top_english{right:-50px;bottom:-250%;;z-index:100;position: absolute; }
    .update_btn p{margin:-5% 0 0 40%; }
    .char_title{top:12%;left: 10%;} 

    .char_content{ top:29%;right: 12%;}
    .char_name01{ top:54%;right: 40%; }
    .char_fly01{width:8%; top:15%;left:20%; } 
    .char_fly02{width:8%;top:15%;left:52%; } 
    .char_fly03{width:13%;top:26%;left:47%; } 

    .camp_btnbox ul {gap: 1%; }
    .camp_btnbox li{margin-top: 7.5%;margin-left: 0.5%;}

    .g-plus{ width: 5%; }
    .btn_inner {top: 150px; }
    .btn_inner h3 { font-size: 5.2rem;  }
    .btn_inner p { font-size: 1.1rem;   }

    .camp-modal__close{  top:8%; right: 1%; }
    .g-modal__close{ top: 12%; right: 1%;}

}



/*-------------------------------------------------1680桌機---------------------------------------------*/
@media screen and (max-width:1680px) {
.top_english{right:-4vw;bottom:-8vw;;z-index:100;position: absolute; }
.update-tabs{bottom: 2vw;}
.camp-modal__close{ top: 2vw; right: 7vw; }
.g-modal__close{ top: 1vw; right: 1vw;w }

.btn_inner h3 { font-size: 4rem;  }

}

/*-----------------------------------------------1480筆電---------------------------------------------*/
@media screen and (max-width:1480px) {

.btn_inner h3 { font-size: 3rem; padding-top: 10px;  }

}


/*-------------------------------------1280小筆電 ----------------------------------------------------------*/
@media screen and (max-width:1280px) { 
.bar-box{ top:1vw;right: -40px;}
#menu ul{transform: scale(.9);}
.social-link {  right:2vw;bottom:10vw;}
.update-tabs{width: 100%;height: auto; left: 0%;transform: translateX(-50%);bottom: 4vw;}
}

/*-----menu hamberger ---*/
@media (max-width:768px){
    .bar-box{ width:50px; height:50px; top:10px; right:0px; }
    .menu-toggle{display:block; width:50px; height:50px; background:rgba(0, 0, 0, 0.8); position:relative; cursor:pointer; z-index:3001; }
    .menu-toggle span{ position:absolute; left:12px; width:26px; height:2px; background:#d4af37; transition:.3s; }
    .menu-toggle span:nth-child(1){ top:16px; }
    .menu-toggle span:nth-child(2){ top:24px; }
    .menu-toggle span:nth-child(3){ top:32px; }

    .bar-box.open .menu-toggle span:nth-child(1){ transform:rotate(45deg); top:24px; }
    .bar-box.open .menu-toggle span:nth-child(2){ opacity:0; }
    .bar-box.open .menu-toggle span:nth-child(3){ transform:rotate(-45deg); top:24px; }

    #menu{ position:fixed; inset:0; background:rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:.4s; }
    .bar-box.open #menu{ opacity:1; pointer-events:auto; }

    #menu ul{ width:200px; display:flex ; flex-direction: column; align-items:center;gap:20px; }
    #menu li{ width:200px !important;display:block; height:45px; text-align:center; transform:none !important; }
    #menu li:hover, #menu li.active{ transform:none !important; background-size:200px 100%; }
}



/*------------------------------------768手機版 ----------------------------------------------------------*/
@media screen and (max-width:768px) {
    section.active, .section.active .bg,.section.active .content{ animation:none !important;}
    html, body{ height: auto !important; overflow: auto !important; background-color: #011426; }
    #fullpage{ transform: none !important; transition: none !important; height: auto !important; overflow: visible !important; }
    .fp-overflow, .fp-wrapper, .fp-tableCell, .fp-section{ height: auto !important; min-height: auto !important; overflow: visible !important; }
    .section{ min-height:auto !important; height:auto !important;  overflow: visible;}
    
    .inner, .content{ height:auto !important; max-width:100% !important; box-sizing:border-box; overflow: visible !important; }
    .content.is-center{ position: relative !important; top:auto !important; left:auto !important; transform:none !important; display:block !important; }
    .section, .section .bg, .section .content, .section .inner{ opacity: 1 !important; visibility: visible !important; transform: none !important; }
    .section:not(.is-enter){ opacity: 1 !important; }
    .section.campaign:not(.is-enter) .camp_btnbox,
    .section.campaign:not(.is-enter) .camp_7anlogo,
    .section.campaign:not(.is-enter) .camp_title,
    .section.campaign:not(.is-enter) .campbg_circle01,
    .section.campaign:not(.is-enter) .campbg_circle02{opacity: 1 !important; }   
    .section.gallery:not(.is-enter) .gallery-grid{ opacity: 1 !important;  }
    .section.gallery:not(.is-enter) .g-item{ opacity: 1 !important; }

    .bg{ position: relative; width: 100%; aspect-ratio: 768 / 1400; background-position: center top ; background-size:cover; }
    .top .bg{background-image:url(../images/bg_00_m.jpg);}
    .update .bg  {background-image:url(../images/bg_01_m.jpg); }
    .campaign .bg {background-image:url(../images/bg_01_m.jpg); }
    .gallery .bg  {background-image:url(../images/bg_01_m.jpg);  }
    .movie .bg    {background-image:url(../images/bg_05_m.jpg); background-position-y: 0px;   } 


    .social-link { transform: scale(3); right:150px;top:-220px;}
    .social-link ul li:hover {transform: none;}
    
    .update-tabs{left: 0%;top: -320px;position: absolute; }
    .update_btn { width: 30%; aspect-ratio:210/ 178;;}
    .update_btn p{ margin:45% 0 0 0;}
    .update_btn span{font-size: 1.2rem;margin:-2% 0 0 0;opacity: .6;}
    .update_btn01{background: url(../images/update_btn01_m.png) 0 0 /100% no-repeat; }
    .update_btn02{background: url(../images/update_btn02_m.png) 0 0 /100% no-repeat; }
    .update_btn03{background: url(../images/update_btn03_m.png) 0 0 /100% no-repeat; }
    .update-slider {top: -1360px;position: absolute;}
    .update_box { aspect-ratio: 768/ 1146; }
    .char01{background-image: url(../images/update_01char_m.png);}
    .char02{background-image: url(../images/update_02char_m.png);}
    .char03{background-image: url(../images/update_03char_m.png);}
    .update_nav { top: -810px; }

    
    .camp_btnbox {width:100%; aspect-ratio:768/ 1400;  background: url(../images/camp_bg00_m.png) no-repeat ;background-size: contain;position: absolute;top: -1350px;  }
    .camp_btnbox ul{width: 78%; margin: 0 auto; flex-direction: column  ; margin-top: 250px; }
    .camp_btnbox li{margin-top: 3px; width: clamp(400px, 80vw,588px); aspect-ratio:588/ 279;  }
    .camp_btn01::after{background: none}
    .camp_btn01{background: url(../images/camp_01img_m.png) center/contain no-repeat;  }
    .camp_btn02::after{background: none}
    .camp_btn02{background: url(../images/camp_02img_m.png)  center/contain no-repeat;  }
    .camp_btn03::after{background: none}
    .camp_btn03{background: url(../images/camp_03img_m.png)  center/contain no-repeat; }
    .camp-modal__img{max-height:1000px;}
    .camp-modal__close{top: 10px; right: 10px;transform: scale(1.5); }
    .camp_btn01:hover,.camp_btn02:hover,.camp_btn03:hover { background-size:100%} 
    

    .section.gallery .content{top:50px;position: absolute;}
    .g-title_m{width: 100%;height: 240px; position: relative ;}
    .g-title_m img{}
    .gallery-grid{ grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);  height: 1100px;width: 100%;margin-left: -100%; margin-top: 250px; }

    .g-btn{ background-size:contain; background-position: center; outline: none; }
    .g-plus{  width: 40px; height: 40px; transform: none; }
    .g-btn:hover{transform: none }
    .g-btn:hover::after{ transform: none}


    #footer{height: 200px!important;}
    .copyright{margin-top:50px; }
}

/*------------------------------------480手機版 ----------------------------------------------------------*/

@media screen and (max-width:480px) {
.loading__text{font-size: 30pt !important;}
.social-link { transform: scale(2.5); right:80px;top:-150px;}

.update-slider { top: -730px;}
.update-tabs{ top: -170px;  }
.update_nav { top: -550px;  }
.update_pre { left: 0px; }
.update_next { right:0px  }
.update_nav { transform: scale(.7);   }
.update_pre {  transform: scale(.7); }
.update_pre:hover { transform: translateY(-10%) translateX(-8px) scale(.8); }
.update_next:hover { transform: translateY(-10%) translateX(8px) scale(.8); }
.update_btn p{font-size:14pt;}
.update_btn span{font-size: 1rem;margin:-2.5% 0 0 0;opacity: .6;}


.camp_btnbox {top: -750px;  }
.camp_btnbox ul{width: 100%;  margin-top: 75px;transform: scale(.8); }

.gallery-grid{   height: 580px;width: 100%;margin-left: -100%; margin-top: 110px; }
.g-title_m{top: -80px;}
.g-title_m img{transform: scale(.6);}
.g-plus{  left: 40%; top: 50%; }

.copyright{transform: scale(.5);margin-left: -120px; }

}



/*------------------------------------400手機版 ----------------------------------------------------------*/
@media screen and (max-width:400px) {
    .social-link { transform: scale(2); right:60px;top:-170px;}

    .update-tabs{left: 0%;top: -130px;position: absolute; }
    .update_btn span{font-size:5pt;}
    .update-slider { top: -640px;}

    .update_nav { top: -480px;  }
    .update_pre { left: 0px; }

    .update_next { right:8px  }
    .update_btn p{font-size:10pt;}

    .camp_btnbox {top: -630px;  }
    .camp_btnbox ul{width: 100%;margin-left: -10px;  margin-top: 20px;transform: scale(.7); }

    .gallery-grid{   height: 500px;width: 100%;margin-left: -100%; margin-top: 100px; }
    .g-title_m{top: -80px;}
    .g-title_m img{transform: scale(.6); margin-left: -20px;}
    .g-plus{  left: 40%; top: 35%;transform: scale(.8); }


   .copyright{transform: scale(.5);margin-left: -150px; }


}