@charset 'UTF-8';
.slick-loading .slick-list{/*background:#fff url(ajax-loader.gif) center center no-repeat;*/background:rgba(225,225,225,0);}
@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}

.slick-next,.slick-prev{position:absolute;top:50%;display:none; width:83px; height:103px; padding:0; -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0; background:none; z-index:10;}


.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:none;}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{/*opacity:1;*/ filter:brightness(110%);/**/}
.slick-next:focus:before,.slick-next:hover:before{content:' '; width:83px; height:103px;
 background-image:url(../images/btn_chart_ov.png);background-position:center 0;  background-repeat:no-repeat; background-size:contain;} 
.slick-prev:focus:before,.slick-prev:hover:before{content:' '; width:83px; height:103px;
 background-image:url(../images/btn_chalt_ov.png);background-position:center 0;  background-repeat:no-repeat; background-size:contain;}
/*.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.0;cursor:auto;pointer-events:none}*/
.slick-next:before,.slick-prev:before{width:83px;  /*opacity:.5;*/}
.slick-prev{left:-80px; }

[dir=rtl] .slick-prev{ right:-80px; left:auto}
.slick-prev:before{
   content:' '; width:83px; height:103px;
   background-repeat:no-repeat;
   background-image:url(../images/btn_chalt.png);background-position:center 0; background-size:contain; display:block;
 }

[dir=rtl] .slick-prev:before{
   content:' '; width:83px; height:103px; display:block;
   background-repeat:no-repeat;
   background-image:url(../images/btn_chalt.png);background-position:center 0; background-size:contain; 
   }
.slick-next{right:-80px; }

[dir=rtl] .slick-next{right:auto; left:-80px; }
.slick-next:before{
   content:' '; width:83px; height:103px;
   background-repeat:no-repeat;
   background-image:url(../images/btn_chart.png);background-position:center 0; background-size:contain; display:block;
 }

[dir=rtl] .slick-next:before{
   content:' '; width:83px; height:103px;
   background-repeat:no-repeat;
   background-image:url(../images/btn_chart.png);background-position:center 0; background-size:contain; display:block;
 }

 #section3 .slick-slider{
	-webkit-user-select:text;
	-khtml-user-select:text;
	-moz-user-select:text;
	-ms-user-select:text;
	user-select:text;
  }


/*slick-dots*****************************************************/
.slick-dotted.slick-slider{margin-bottom:0px}
.slick-dots{position:absolute; bottom:-1.86rem; left:0; display:block; width:100%; padding:0; list-style:none; text-align:center; z-index:80;}
#section2 .slick-dots{margin:0;}
#section5 .slick-dots{margin:0;}
.slick-dots li{position:relative;display:inline-block; width:26px; height:25px; margin:0 .1rem 0 .1rem; padding:0; cursor:pointer}
.slick-dots li button{display:block; width:26px; height:25px; padding:0px; cursor:pointer; color:transparent; border:0; outline:0; background:0 0;}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,.slick-dots li button:hover:before{ opacity:1; content:" "; background-image:url(../images/btn_banner_ov.png); background-size:100% auto; background-position:center center;}
.slick-dots li button:before{position:absolute;top:0;left:0; width:26px; height:25px; content:" "; background-image:url(../images/btn_banner.png); background-size:100% auto; background-position:center center; background-repeat:no-repeat; opacity:1;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li.slick-active button:before{ content:" "; background-image:url(../images/btn_banner_ov.png); background-size:100% auto; background-position:center center;}

#chacamp_block .chapic img.s,
#chacamp_block .chacon img.s{ display:none; }

#section3 .slick-prev {
   left:1rem; top:25%;
}
#section3 .slick-next {
   right:1rem; top:25%;
}


.slick-next,.slick-prev{ width:46px; height:62px; }

.slick-next:focus:before,.slick-next:hover:before{width:46px; height:62px;} 
.slick-prev:focus:before,.slick-prev:hover:before{ width:46px; height:62px;}
.slick-next:before,.slick-prev:before{ width:46px; }

.slick-prev:before, .slick-next:before{
   width:46px; height:62px;
   }

[dir=rtl] .slick-prev:before, [dir=rtl] .slick-next:before{
   width:46px; height:62px;
   }



/*角色動態*/
#section3 .slick-current .chapic_type{ 
      opacity:0; 
      animation-fill-mode: forwards;
      animation-name: fadeIn_simple;
      animation-duration:.4s;
      animation-delay:0s;
   }

#section3 .slick-current .chapic_main{
      opacity:0; 
      animation-fill-mode: forwards;
      animation-name: chapicfadeIn;
      animation-duration:.5s;
      animation-delay:.05s;
      }

#section3 .slick-current .chapic_effect{
      opacity:0; 
      animation-fill-mode: forwards;
      animation-name: chapicfadeIn;
      animation-duration:.8s;
      animation-delay:.1s;
      }


#section3 .slick-current .chapic_data{ 
      opacity:0; 
      animation-fill-mode: forwards;
      animation-name: chaconfadeIn_lt;
      animation-duration: .5s;
      animation-delay:.4s;
   }
   
#section3 .slick-current .chacon{ 
   opacity:0; 
   animation-fill-mode: forwards;
   animation-name: chaconfadeIn;
   animation-duration: .5s;
   animation-delay:.4s;
}

#section3 .slick-current .btn_change{ 
   opacity:0; 
   animation-fill-mode: forwards;
   animation-name: fadeIn_simple;
   animation-duration: 1s;
   animation-delay:.7s;
}

@keyframes fadeIn_simple{
      0% { opacity:0; }
      100% { opacity:1; }
 }
 
 
 @keyframes chapicfadeIn{
      0% { opacity:.1; transform: translateX(-10%);}
      100% { opacity:1; transform: translateX(0); }
 }
 
 @keyframes typefadeIn{
       0% { opacity:0;  transform:translateY(8%); }
       100% {opacity:1; transform: translateY(0);}
 }
 

 @keyframes chaconfadeIn{
   0% { opacity:0; transform: translateX(5%);}
   100% { opacity:1; transform: translateX(0); }
}

@keyframes chaconfadeIn_lt{
   0% { opacity:0; transform: translateX(-5%);}
   100% { opacity:1; transform: translateX(0); }
}

 /* Firefox專用*/
 @-moz-document url-prefix(){
 
          @keyframes chapicfadeIn{
             0% { opacity:.1; filter:blur(3px); transform: translateX(-10%); }
             100% {opacity:1; filter:blur(0px); transform: translateX(0); }
          }
 
          @keyframes typefadeIn{
             0% { opacity:0; transform:translateY(8%); }         
             100% { opacity:1; transform:translateY(0); }
          }
          
 
 }

/*****************/ 


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

            #section3 .slick-prev{
               left:0rem; top:32.5%;
            }
            #section3 .slick-next{
              right:0rem; top:32.5%;
            }

            #chacamp_block .chapic img.s,
            #chacamp_block .chacon img.s{ display:block; }


}	   

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

         #section3 .slick-current .chapic_data{ 
            animation-duration:.4s;
            animation-delay:0s;
         }

         @keyframes chaconfadeIn_lt{
            0% { opacity:0; transform: translateX(0%);}
            100% { opacity:1; transform: translateX(0); }
         }      
	
}

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

         #section3 .slick-prev{
            left:.5rem; top:55vw;
         }
         #section3 .slick-next{
            right:.5rem; top:55vw;
         }

}



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

        .slick-dots li, .slick-dots li button, .slick-dots li button:before{ width:1.48rem; height:1.48rem;}
        .slick-dots{ bottom:-1.65rem; }
            
}

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

      .slick-dots li, .slick-dots li button, .slick-dots li button:before{ width:4.1vw; height:4.1vw;}
      .slick-dots{ bottom:-1.48rem; }


      #section3 .slick-prev{
         left:.45rem; top:54vw;
      }
      #section3 .slick-next{
         right:.45rem; top:54vw;
      }



      .slick-next,.slick-prev{ width:5.5vw; height:62px; }

      .slick-next:focus:before,.slick-next:hover:before{width:5.5vw; height:62px;} 
      .slick-prev:focus:before,.slick-prev:hover:before{ width:5.5vw; height:62px;}
      .slick-next:before,.slick-prev:before{ width:5.5vw; }

      .slick-prev:before, .slick-next:before{
         width:5.5vw; height:62px;
         }

      [dir=rtl] .slick-prev:before, [dir=rtl] .slick-next:before{
         width:5.5vw; height:62px;
         }
         
}