/*共用*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
.hv-center{ display: flex; justify-content: center; align-items: center;}

/* 修改 fullpage */
.fp-tableCell{ vertical-align: top;}
.fp-center .fp-tableCell{vertical-align: middle;}
.fp-bottom .fp-tableCell{vertical-align: bottom;}
#fullpage{overflow: hidden;}


/*尋覽列*/
#top_bar{z-index: 1000; position: fixed; width: 100%; padding: 0.3vw; background-color: rgba(0, 0, 0, 0.24); padding-left: 10vw;  padding-right: 10vw;}
#navbarNavDropdown{justify-content: flex-end;}
#navbarNavDropdown ul li a{font-size: 1.4vw;  font-weight: 600;}
.dropdown-menu{opacity: 0; transform: translate(0,-20px); transition: all 0.5s; display: block; visibility: hidden;
               border: none;background-color: #000;}
.dropdown-menu.show{opacity: 1; transform: translate(0,0px); visibility: visible;}
.dropdown-item{color: #fff;}
.navbar-brand img{width: 12vw;}

#navbarDropdownMenuLink{    background: none; border: none; font-size: 1.4vw; font-weight: 600;}

/*twentytwenty*/
.twentytwenty-after-label, .twentytwenty-before-label{display: none;}


.h100{height: 100vh;}
.info{width: 67vw; margin: auto;}
.bg_black{background-color: #212529;}
.bg-dark{background-color: #000!important;}
.text-blue{color: #00478d;}
h1{font-family: 'Montserrat', sans-serif;}
h2,h3,h4,h5,p,span,a,li{font-family: 'Lato', sans-serif;}
h1{font-weight: bold; font-size: 2.1vw;}
h4{font-size: 1.5vw;}
h5{font-size: 1.1vw;}
p{font-size: 1vw;}
span{display: block; letter-spacing: 0.5px;}
b{font-size: 1vw;color: #00478d;;}

/* .pt-5, .py-5{    padding-top: 2.5vw !important;}
.pb-5, .py-5{    padding-bottom: 2.5vw !important;} */




/*cd_banner*/
.cd_banner{background-image: url("../img/banner01.jpg"); background-repeat: no-repeat;}
.cd_banner img{width: 100%;}
.cd_banner .menu{position: absolute; top: 0; left: 0; width: 100%; z-index: 20;}
.navbar-light .navbar-nav .nav-link{color: #fff!important;}
.navbar-light .navbar-nav .nav-lin:hover{color: #fff;}


.cd_banner .txt{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.cd_banner .btn{border-radius: 25px; font-size: 21px; width: 200px; height: 50px; background-color: #fc8c0c;}

/*1*/
#section1 #cd{width: 30vw; position: absolute;}

/*2*/
.ttw_exp{ opacity: 1; position: absolute; background-color: rgba(0,0,0,0.8); width: 100%; height: 37.9vw; z-index: 1;  display: flex;  justify-content: center;  align-items: center;}
.ttw_exp.close{opacity: 0; visibility: hidden;}

.ttw_exp .mv_div{position: relative;}
.ttw_exp .mv_div .arrow{width: 400px;}
.ttw_exp .mv_div .mouse{ position: absolute; left: 0; top: 30px; width: 30px; 
                         animation-name: mouse_mv;
                         animation-duration: 10s;
                         animation-iteration-count: infinite;}



@keyframes mouse_mv{
  0%{
    top: 100px;
    left: 0%;
  }
  15%{
    top: 15px;
    left: 47%;
  }
  35%{
    top: 15px;
    left: 47%;
  }
  50%{
    top: 15px;
    left: 0%;
  }
  100%{
    top: 15px;
    left: 100%;
  }
}

.ttw_exp .mv_div .click{position: absolute; left: 46%; top: 2px; width: 30px; height: 30px; 
                        border-radius: 50px; border: 2px solid #fff; 
                        display: flex; justify-content: center; align-items: center;
                        animation-name: click_mv;
                        animation-duration: 10s;
                        animation-iteration-count: infinite;}

.ttw_exp .mv_div .click div{ width: 80%;  height: 80%;  border-radius: 50px;  background-color: #fff;}

@keyframes click_mv{
  0%{
    opacity: 0;
    transform: scale(1);
  }
  15%{
    opacity: 0;
    transform: scale(1);
  }
  20%{
    opacity: 1;
    transform: scale(1.5);
  }
  35%{
    opacity: 0;
    transform: scale(1.5);
  }
  100%{
    opacity: 0;
    transform: scale(1.5);
  }
}

.ttw_exp h4{    color: #fff; text-align: center; position: absolute; width: 100%; margin-top: 10px;}


/*3*/
#section3 img{width: 26vw;}

/*4*/
.groove{background-image: url("../img/bg_5.png"); background-repeat: no-repeat;}
.groove .info{padding-top: 30vw;}
.cd-water{ position: absolute; bottom: 0; z-index: 0; bottom: -50px; left: -75px;}
.cd-water img{width: 22vw;}
#section4{background-color: #000;}
#section4 .info-1 img{ width: 30vw;}
#section4 .info-1 iframe{width: 30vw; height: 16vw;}
#section4 .info-2 img{    width: 8vw;}

/*5*/
#section5 .info{ padding-top: 0;  margin-top: 27vw;  margin-left: 10vw;  width: 50vw;  background-color: rgb(0 0 0 / 0.5);  padding: 20px 30px;}
.Stickiness{background-image: url("../img/bg_6.jpg"); background-repeat: no-repeat;}

/*7*/
#section7 .pie{display: inline-block;   position: relative;}
#section7 .pie img{width: 25vw;}
#section7 .pie span{ position: absolute; white-space: nowrap; padding-left: 7px;}
#section7 .pie span::before{content: ''; position: absolute; background-color: #000;}
#section7 .pie span:nth-child(1){ top: -28%; left: 33%;  font-size: 0.8vw;}
#section7 .pie span:nth-child(1)::before{left: 0px; top: 0; width: 1px; height: 8vw; }
#section7 .pie span:nth-child(2){top: 14%; right: -20%;     font-size: 0.8vw;}
#section7 .pie span:nth-child(2)::before{ right: 102%; bottom: 12px; width: 8vw; height: 1px;}
#section7 .pie span:nth-child(3){ bottom: -12%; left: 46%;     font-size: 0.8vw;}
#section7 .pie span:nth-child(3)::before{ left: 10%; bottom: 100%; width: 1px; height: 5vw;}
#section7 .pie span:nth-child(4){bottom: -20%;  left: 22%;     font-size: 0.8vw;}
#section7 .pie span:nth-child(4)::before{ left: 50%; bottom: 110%; width: 1px; height: 6vw;}
#section7 .pie span:nth-child(5){text-align: left; top: 63%; left: -60%;     font-size: 0.8vw;}
#section7 .pie span:nth-child(5)::before{ left: 102%; top: 12px; width: 9vw; height: 1px;}
#section7 .pie span:nth-child(6){top: 33%; left: -75%;     font-size: 0.8vw;}
#section7 .pie span:nth-child(6)::before{ left: 102%; top: 12px; width: 8vw; height: 1px;}

/*8*/
.disc{position: absolute; right: -145px; top:0;}
.disc img{height: 100vh;}
.number img{width:30vw;}
#section8 .cd_img{position: absolute; bottom: 0; width: 50%;}

/*9*/
#section9 .cd_img{position: absolute; bottom: 0; width: 50%;}

/*work*/
.work img{width:100%;}

/*section10*/
#section10 li{font-size: 1vw;}

/*11*/
.life{background-image: url("../img/bg_11.jpg"); background-repeat: no-repeat; background-size: cover;}
#section11 .cd img{width:66vw;}
#section11 .dvd img{width:66vw;}

/*12*/
.spe_CD ul{list-style: none; padding-left: 0;}
.spe_CD span{font-size: 15px; color: #abaaaa;}
.spe_CD h4{font-size: 1.3vw; font-weight:bold; color: #fff; margin: 1vw 0;}
#section12 .cd_img{position: absolute; bottom: 40px; width:24vw;}

/*13*/
.spe_DVD ul{list-style: none; padding-left: 0;}
.spe_DVD span{ font-size: 15px; color: #abaaaa;}
.spe_DVD h4{font-size: 1.3vw; font-weight:bold; color: #fff; margin: 1vw 0;}
#section13 .cd_img{position: absolute; bottom: 40px; width:24vw;}

/*14*/
.Option ul{list-style: none; padding-left: 0;}
.Option ul li{display: inline-block; margin-right: 50px;}
.Option h5{color: #00478d; font-size: 1.3vw; font-weight: bold;}
.Option h3{font-size: 1.3vw; font-weight: bold; margin: 0;}
.Option .txt{border-radius: 10px;border: 1px solid #ccc;   display: flex;  justify-content: center;  align-items: center;}
.Option .txt a{display: inline-block; padding: 2vw 1vw; color: #000;}
.Option span{display:inline; font-size: 20px;}
.Option img{width:13vw;}

/*15*/
#section15 .info{ padding: 4vw 0 0px 0 !important;}


/*contact*/
.contact{background-color: #fafafa;}
.contact .brands_100 img{display: inline-block; }
.contact .btn-primary{color: #fff;background-color: #064a95;border-color: #064a95;}
.contact .form-group{    margin-bottom: 0rem;}
.contact .form-group span{color: #c01a20; display: inline;}
.contact .cooperate img{width:26vw;}
.contact .top100 img{ width: 9vw;}
.contact form label{ margin-bottom: 0.4vw;  font-size: 1vw;}
.contact form .form-control{ padding: 0.1vw; font-size: 0.8vw; height: auto;}


/*footer*/
.footer{background-color: #363f47;}
.footer a {display: inline-block; padding:5px ;}
.footer a img{ height: 35px;}

/*order_now*/
.order_now{ position: fixed; bottom: 40px; right: 0; padding: 10px 40px; color: #fff !important; 
            font-weight: 600;  border-right: 0; border-radius: 50px 0 0 50px; background-color: #00478d;}


@media (min-width: 992px){

  .hamburger{display: none;}

  .pc_img{display: block !important;}
  .pc_inline_img{display: inline-block !important;}
  .ph_img{display: none !important;}
  .pt-lg-5, .py-lg-5{padding-top: 2.5vw !important;}
  .pb-lg-5, .py-lg-5{padding-bottom: 2.5vw !important;}
}
@media (min-width: 768px){
  .pt-md-5, .py-md-5{ padding-top: 2.5vw !important;}
  .pb-md-5, .py-md-5{ padding-bottom: 2.5vw !important;}
}

@media (max-width:1280px){
  .contact span{display: inline;}
}
@media(max-width: 768px){

    p{font-size: 16px;}
    h1{font-size: 25px;}
    span{display: inline;}
    
    

    .pc_img{display: none !important;}
    .pc_inline_img{display: none !important;}
    .ph_img{display: block !important;}
    .info{width:100%;margin: auto;} 
    .w100{width:100% !important;}
    .h100{height: auto;}
    
    .pd-md-5,.py-md-5{padding-bottom: 5vw!important;}
    .pt-md-5,.py-md-5{padding-top: 5vw!important;}
    

     /*.cd_banner*/
     .cd_banner{height: 100vh!important;}
    
     /*navbar*/
    .hamburger{display: inline-block;}
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{ background-color: #fff;}
    .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after{ background-color: #fff; }
    .hamburger.is-active:hover, .hamburger:hover{ opacity: 1;}
    button:focus{outline: none;}

    .dropdown-menu{display: none;}
    #navbarDropdownMenuLink, #navbarNavDropdown ul li a{font-size: 20px;}
    
    /*section1*/
    #section1 #cd{top: auto; bottom: -10% !important; width: 45vw;}
    
    /*section2*/
    .ttw_exp{height: 99vw;}
    .ttw_exp h4{top: 35px !important; font-size: 25px;}
    .ttw_exp .mv_div .arrow{width: 300px;}
    .ttw_exp .mv_div .click{ left: 45%; top:0;}

     /*section3*/
     #section3 img{width:68vw;}

     /*section4*/
    #section4 .info-1 iframe{  width: 100%; height: 36vw;  margin-bottom: 0;}
    .cd-water img{width:30vw;}

    /*section5*/
    #section5.groove{ background-size: cover !important;}
    #section5 .info{ margin-top: 10vw; margin-left: auto; width: 90vw;}
    #section5 .fp-tableCell{vertical-align:middle;}

    /*section6*/
    #section6 { background-size: cover !important;}
    #section6 .info{ padding: 6vw 5vw;}

    /*section8*/
    #section8 .cd_img { width: 90%; top: auto!important;}

    /*section9*/
    #section9 .cd_img { width: 90%; top: auto!important;}

  

    /*footer*/
    .contact .top100 img{width:auto;}
    .contact form .form-control{height:5vw;}



}

@media(max-width: 420px){
    .w90{width:90% !important;}
    .w100{width:100% !important;}
    .w50{width:50% !important;}
    .h100{height: auto;}
    h1{font-size: 23px;}
    p{font-size: 14px;}
    span{display: inline;}
    .info{width:100%;margin: auto;}
    .work span{word-break: break-all;}


    /*navbar*/
    .navbar-brand img{ width: 40vw; }
    #top_bar{ padding-left: 4vw; padding-right: 4vw;}
    #navbarDropdownMenuLink, #navbarNavDropdown ul li a{font-size: 15px;}
    
    

    /*.cd_banner*/
    .cd_banner{height: 100vh!important;}
    .cd_banner h4{font-size: 16px;}

    /*waterproof*/
    .waterproof h1{text-align: left; padding: 0 15px;}
    .waterproof p{text-align: left; padding: 0 15px;}
    .waterproof h5{font-size: 15px; margin: 10px 0;}

    /*spe_cd*/
    .spe_CD h4{font-size: 18px; margin: 10px 0;}

    /*spe_dvd*/
    .spe_DVD h4{font-size: 18px; margin: 10px 0;}

    /*option*/
    .Option h5{font-size: 15px; margin: 10px 0;}
    
    /*section4*/
    #section4 .info-1 iframe{  width: 100%; height: 50vw;  margin-bottom: 5vw;}
    
    /*section5*/
    #section5.groove{ background-size: cover !important;}
    #section5 .info{ padding: 30vw 5vw;}

    /*section6*/
    #section6 { background-size: cover !important;}
    #section6 .info iframe{height: 50vw;}

    /*section7*/
    #section7 .info{padding-top: 5vw;}

    #section10 li{font-size: 13px;}

    /*section12*/
    #section12 .cd_img{ position: relative; }

    /*section13*/
    #section13 .cd_img{ position: relative; }

    /*section14*/
    #section14.Option h3{font-size: 6vw;}
    .Option .txt a{padding:5vw 1vw;}

    /*section15*/
    .contact form .form-control{padding:2vw; height: auto; font-size: 14px;}
    .contact form label{font-size: 14px;}
    .contact .top100 img{width:50vw;}

    
    /* order_now */
    .order_now{ padding: 10px 15px; font-size: 13px;}



}



/* IE 用 */
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
  
}