body,span,h2,h3{ font-family: Microsoft JhengHei, Microsoft YaHei, Arial,sans-serif; color: #000}
a{ text-decoration: none}
section{ width: 100%; display: block; position: relative}
.center{ text-align: center}
.wrapbig{ width: 1400px; margin: 0 auto; background: #fff;}
.wrap{ width: 1200px; margin: 0 auto; position: relative}
.abs{ position: absolute}
.fll{ float: left;}
.flr{ float: right;}
.col-left{ float: left;}
.col-right{ float: right;}
.clear{ clear: both}
p{ line-height: 40px; font-size: 23px;}
.bold{ font-weight: bold;}
.block{ display: block}
.in-blk{ display: inline-block}
.no-show{ display: none}
.mgb-50{ margin-bottom: 50px}
.mgb-10{ margin-bottom: 10px}
.mgb-20{ margin-bottom: 20px}
.mgb-30{ margin-bottom: 30px}
.mgt-50{ margin-top: 50px}
.mgt-20{ margin-top: 20px}
.mgt-30{ margin-top: 30px}
.mgt-40{ margin-top: 40px}
.pgb-30{ padding-bottom: 30px;}
.pgt-20{ padding-top: 20px;}
.pgt-30{ padding-top: 30px;}
.row{ width: 100%;}
.w50{ width: 50%;}
.w33p{ width: 31%; display: inline-block}

.width700{ width: 700px; margin: 0 auto}
.width900{ width: 900px; margin: 0 auto}
h2{ font-size: 36px; font-weight: bold;}

:root {
  --animate-delay: 0.5s;
}



body{ font-size: 23px; line-height: 32px;}

nav{float: right; margin-top: 6px; margin-right: 30px; }
nav span{ display: block; font-size: 14px; color:#231815;  margin-top: 5px; }
nav div{display: inline-block; }
nav div a{display: inline-block; font-size: 20px;font-weight: bold; border: 0; text-align: center; padding: 0 10px; color: #fff ; transition: all 0.5s;position: relative}
nav a.active{ color: #fff; background: #000}
nav a:hover{ transition: all 0.5s; color: #fff; background: #000}
nav a:last-child{ border: 0}


#footer{ font-size: 12px; text-align: center;  display: block; clear: both}
#footer .row{ margin-bottom: 15px;}
#footer p{ font-size: 12px;}
.head{ width: 100%; padding: 0 5%; padding-top: 10px; opacity: 1; transition: all 0.2s; display: inline-block;z-index: 99; box-sizing: border-box; position: fixed; top: 0}
.head.fadein{ padding-bottom: 0px; position: fixed; top: 0}
.logo{ display: inline-block; margin-left: 30px;}
.text-center{text-align: center}
.text-left{ text-align: left}
.container{ width: 1200px; margin: 0 auto; position: relative}
.pimg{ margin-right: 50px;}
.pimg:before{ content: ''; position: relative; top: 18px; left: -10px; width: 60px; height: 75px; background: url(../images/TAICCA-04.png); display: inline-block;}

/*****************Pages************************/

.loading{ width: 100%; height: 100vh; background: #d31d0e; color: #fff; z-index: 999; position: fixed; top: 0; left: 0}
.cter{ width: 200px; margin: 0 auto; padding-top: 400px;}
#progstat,#progress{ color: #fff;}

.fixedlft{ width: 45px; height: 100vh; background: #fff; position: fixed; left: 0; top: 0;z-index: 5}
.fixedlft .scroll{ transform:rotate(90deg); font-size: 16px; font-weight: bold;position: absolute; bottom: 130px; left: -5px}
.fixedlft span{ width: 1px; height: 50px; background: #000; display: inline-block; transform: rotate(90deg); position: absolute; bottom: -10px; left: -50px}
.fixedlft em{}
.fixedlft .gotop{ position: fixed;left: 0; bottom: 0; width: 45px; background: #000; cursor: pointer; padding-top: 10px;}
.fixedlft .gotop:hover{ opacity: 0.8}

.banner{width: 100%; min-height: 850px; background: url(../images/bg-kv.jpg) center top no-repeat; overflow: hidden; background-size: cover}
.banner .wp{ padding-top:120px; margin: 0 auto; text-align: center}
.banner .lft{ width: 45%; display: inline-block; position: absolute; bottom:-10px; left: 50px}
.banner .rig{ width: 54%; display: inline-block;padding-right: 8%; box-sizing: border-box; padding-left: 3%; vertical-align: top; padding-top: 50px;position: absolute; bottom:100px; right: 0}

.title { width: 100%; text-align: center; margin-bottom: 50px; position: relative; }
.title span{ font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: 48px;}
.title.whitefont span{ color: #fff;}
.title:after{ width: 40%; content: ''; height: 1px; background: #000; position: absolute; right: 0; top: 15px; z-index: 1}
.title:before{ width: 40%; content: ''; height: 1px; background: #000; position: absolute; left: 0; top: 15px; z-index: 1}

.s01{width: 100%; min-height: 805px; background: url(../images/bg-s1-1920x865.jpg) center top no-repeat; overflow: hidden; background-size: cover; padding-top: 60px;}
.s01 .wrap{ width: 85%; padding: 0 5%}
.s01 .slider .item{ padding-right: 100px; position: relative}
.s01 .slider .nb{display: inline-block; position: absolute; top: 15px; left: 0px;z-index: 1}
.s01 .slider .img img{padding-left: 40px; padding-top: 60px;max-width: 450px; width: 100%; transition: all 0.5s}
.s01 .slider .img img:hover{transform: scale(1.02);transition: all 0.5s}
.s01 .slider .ti{position: absolute; top: 60%;z-index: 1}
.s01 .slider .ti img{ width: 100%; max-width: 365px}
.s01 .slider .text{ position: relative; padding-top: 15px;padding-left: 40px;}
.s01 .slider .text img{position: absolute; top: 20px;}
.s01 .slider .text h3{ width: 100%; font-weight: bold; text-align: right; font-size: 28px; padding-left: 40px;}
.s01 .slider .text h3 span{ font-weight: normal; font-size: 18px; margin-left: 10px;}
.s01 .slider .text .awp{ width: 100%; display: inline-block; padding-left: 40px;}
.s01 .slider .text a{ background: #000; border-radius: 10px; color: #fff; float: right;font-size: 12px; padding:0 15px; display: inline-block;}
.s01 .slider .text a:hover{ background: #333}


.s02{width: 100%; min-height: 1000px; background: url(../images/bg-s2-1920x1000.jpg) center top no-repeat; overflow: hidden; background-size: cover; padding-top: 60px;}
.s02 .title { width: 100%; text-align: center; margin-bottom: 50px; position: relative; }
.s02 .title span{ font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: 48px; color: #fff;}
.s02 .title:after{ width: 36%; content: ''; height: 1px; background: #fff; position: absolute; right: 0; top: 15px; z-index: 1}
.s02 .title:before{ width: 36%; content: ''; height: 1px; background: #fff; position: absolute; left: 0; top: 15px; z-index: 1}
.s02 .choose{ width: 980px; margin: 0 auto; margin-top: 50px; text-align: center}
.s02 .choose a{display: inline-block; text-align: center; margin-top: 40px;}
.s02 .choose p{ font-size: 24px; color: #fff}
.s02 .choose .sp{ font-size: 21px; color: #AF8762; margin-top:30px;}



.s03{width: 100%; min-height: 955px; background: url(../images/bg-s3-1920x955.jpg) center top no-repeat; overflow: hidden; background-size: cover; padding-top: 60px;}
.s03 .wp{ width: 1400px; margin: 0 auto; text-align: center}
.s03 .itm{ width: 420px; display: inline-block; vertical-align: top; margin-bottom: 50px; overflow: hidden}
.s03 .itm img{ transition: all 0.5s}
.s03 .itm img:hover{ transform: scale(1.02);transition: all 0.5s}
.s03 .itm.mg50{ padding: 0 30px;}
.s03 .itm img{ width: 100%;}
.s03 .itm a.vidbtn{ width: 99.5%; display: inline-block; border: 1px solid #000; padding: 10px 0; text-align: center; color: #000; font-size: 15px;}
.s03 .itm a.vidbtn:hover{ background: #fff; border: 1px solid #fff;}
.s03 .itm .vidbtn-no{ width: 99.5%; display: inline-block; border: 1px solid #000; padding: 10px 0; text-align: center; color: #000; font-size: 15px;}
    
    
.s04{width: 100%; min-height: 700px; background: url(../images/bg-s4-1920x750.jpg) center top no-repeat; overflow: hidden; background-size: cover; padding-top: 100px;}
.s04 .title span{ line-height: 60px; margin-top: -40px; display: inline-block}

.s04 .wp{ width: 1100px; margin: 0 auto; margin-top: 100px;}
.s04 .item{ width: 360px; min-height: 400px; display: inline-block; position: relative; vertical-align: top; text-align: center}
.s04 .nb{position: absolute; top: -50px; left: 10px}
.s04 .img{}
.s04 .img img{ transition: all 0.5s}
.s04 .img img:hover{ transform: scale(1.02); transition: all 0.5s}
.s04 .text{}
.s04 .red{ width: 100%; color: #fff;  text-align: left; margin-top: 15px;margin-left: 15%; margin-bottom: 20px;}
.s04 .red span{background: #cf2410; display: inline-block; color: #fff;padding:0 10px; font-size: 18px; }
.s04 .red span:last-child{ position: relative; top: -2px}
.s04 .text a{position: absolute; bottom: 0; left: 15%}
.s04 .bg2{ min-height: 700px; background: url(../images/bg-s4-330x750.gif) right bottom no-repeat}


.s05{width: 100%; min-height: 640px; background: url(../images/bg-s5-1920x640.jpg) center top no-repeat; overflow: hidden; background-size: cover; padding-top: 80px;}
.s05 .bti{ text-align: center; color: #fff; font-size: 48px; line-height: 60px; font-weight: bold; margin-bottom: 50px;}
.s05 .bti .en{ font-size: 36px; color: #fff;}
.s05 .wrap{ width: 580px; margin: 0 auto; color: #fff;}
.s05 .left{ width: 270px; display: inline-block} 
.s05 .rig{ width: 280px;display: inline-block; vertical-align: top} 
.s05 .rig p{ font-size: 16px; line-height: 30px;}
.s05 .rig a{margin-top: 30px; display: inline-block}


.slick-dots li button:before{ color: #fff!important}
.slick-dots li.slick-active button:before{ color: #fff !important}
.slick-prev, .slick-next{ width: 30px !important; height: 30px !important;}
.slick-next{ background: url(../images/arrow-rig.svg) no-repeat !important; right: -10px !important }
.slick-prev{ background: url(../images/arrow-left.svg) no-repeat !important; left: -25px !important }
.slick-next:before{display: none;}
.slick-prev:before{display: none;}

#footer{ background: #000; padding: 20px 0}
#footer img{}

.mbkv{ display: none; padding-top: 40px; background: url(../images/mbkvbg.jpg) repeat}
.ansfinal .btns{ position: relative; left: -37px;}

.backtop{ position: fixed; bottom: 15%; right: -30px;  opacity: 0;z-index: 999;transition: all 0.5s; }
.backtop .gotop{width: 100px; height: 100px; background: url(../images/top.png); background-size: contain;position:  absolute; bottom: 70px; right: 0; transition: all 0.5s}
.backtop .gojob:hover{opacity: 0.8}

.backtop.fadein{ opacity: 1;right: 10px; transition: all 0.5s; display: block}

.hidden{ display: none; }

.test{ background: #e2e2e3; min-height: 100vh; padding-top: 80px; padding-bottom: 80px; box-sizing: border-box}
.test .wrap{ width: 1000px; min-height: 800px; border: 1px solid #aaa; margin: 0 auto; padding: 50px; box-sizing: border-box;}
.test .h1{ font-family: "Noto Serif Tc"; font-size: 60px; text-align: center; line-height: 60px; margin-bottom: 80px;}
.test .circle{ margin-bottom: 50px; width: 100%;}
.test .circle .item{ width: 32.3%; display: inline-block; text-align: center}
.test .circle .item img{ display: inline-block}
.test .intro{ text-align: center; font-size: 21px; line-height: 40px;}
.test .cfa{ margin-top: 30px; display: inline-block}
.quest{}
.quest.hide{ display: none;}
.quest .h2{ font-size: 37px;font-family: "Noto Serif Tc"; position: absolute; top: 0; left: 0; background: #000; color: #fff; padding: 20px 20px;}
.quest .ti{ font-size: 36px;font-family: "Noto Serif Tc"; margin-top: 170px; padding-left: 150px; position: relative; line-height: 50px; margin-bottom: 60px;}
.quest .ti em{ font-size: 97px;font-family: "Noto Serif Tc"; position: absolute; left: 50px;}
.quest .ans{ font-size: 21px; padding-left: 150px;}
.quest .ans >div{ margin-bottom: 50px;}

.ansfinal{ background: #111;  color: #fff;font-size: 21px; display: none}
.ansfinal .hide{ display: none;}
.ansfinal .wrap{ width: 100%; min-height: 1750px; margin: 0 auto; padding: 50px; box-sizing: border-box;  }
.w1000{width: 1000px; padding-top: 80px; padding-bottom: 80px; margin: 0 auto;}
.ansfinal .wrap.bga{ background:url(../images/b_bg-A.jpg) no-repeat center }
.ansfinal .wrap.bgb{ background:url(../images/b_bg-B.jpg) no-repeat center }
.ansfinal .wrap.bgc{ background:url(../images/b_bg-C.jpg) no-repeat center }
.ansfinal .wrap.bgd{ background:url(../images/b_bg-D.jpg) no-repeat center }
.ansfinal .wrap.bge{ background:url(../images/b_bg-E.jpg) no-repeat center }
.ansfinal .wrap.bgf{ background:url(../images/b_bg-F.jpg) no-repeat center }

.ansfinal .h2{font-family: "Noto Serif Tc"; font-size: 37px; margin-bottom: 50px; margin-top: 30px;}
.ansfinal .h1{font-family: "Noto Serif Tc"; font-size: 74px; color: #9a725c;}
.topwrap{ margin-bottom: 30px; border-bottom: 1px solid #ddd; padding-bottom: 30px; margin-bottom: 50px; }
.topl{ display: inline-block}
.topl img{ width: 200px; display: inline-block; border: 1px solid #727171; border-radius: 99em}
.topr{ display: inline-block; vertical-align: top}

.ansfinal .h1 em{font-family: "Noto Serif Tc";font-size: 36px; color: #9a725c}
.ansfinal .h3{ margin-bottom: 50px; font-size: 36px;}
.ansfinal .info{ font-size: 21px; margin-bottom: 120px;}
.ansfinal .star{ color: #fff; margin-bottom: 20px;}
.ansfinal .star span{ color: #fff; margin-right: 15px;}
.ansfinal i.st{ width: 23px; height: 22px; display: inline-block;background: url(../images/star.svg); margin-right: 5px;}
.ansfinal .related{ margin-top: 80px; margin-bottom: 80px;}
.ansfinal .related .tit{font-family: "Noto Serif Tc"; font-size: 37px; border-bottom: 1px solid #fff; padding-bottom: 20px; margin-bottom: 30px;}
.ansfinal .related .left{ width: 49%;display: inline-block}
.ansfinal .related .rig{ width: 49%;display: inline-block; vertical-align: top}
.ansfinal .related .rig span{color: #fff;font-size: 18px; margin-left: 15px;}
.ansfinal .related .rig .cfa{margin-top: 30px;}
.ansfinal .pds{}
.ansfinal .pds .row{ vertical-align: top; display: inline-block; width: 100%; margin-bottom: 20px;}
.ansfinal .pds .tit{font-family: "Noto Serif Tc";font-size: 37px; border-bottom: 1px solid #fff; padding-bottom: 20px; margin-bottom: 30px;}
.ansfinal .pds .left{width: 49%;display: inline-block; vertical-align: top;}
.ansfinal .pds .rig{width: 49%;display: inline-block; vertical-align: top;}
.ansfinal .pds a{ color: #fff;}
.ansfinal .btns{ width: 100%; margin-top: 30px; text-align: center; display: inline-block}
.ansfinal .btns a{ padding:0 15px; text-align: center}



@keyframes pull {
            0% {
                height: 0;
            }

            100% {
                height: 1.2rem;
            }
        }

        @keyframes pop {
            0% {
                opacity: 0;
            }

            75% {
                opacity: 1;
            }

            100% {
                transform: scale(1.2);
            }
        }

        
        .checkbox-pop{
            display: none;
        }

        
        .checkbox-pop+label span{
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0 10px -4px 0;
            /*layout relationship between check and label*/
        }

       
        .checkbox-pop+label span:before,
        .checkbox-pop+label span:after
        {
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            content: "";
            position: absolute;
            z-index: 1;
            width: 30px;
            height: 30px;
            background: #fff;
            border: 0px solid #ff4040;
        }

        
        .checkbox-pop+label span:after{
            z-index: 0;
            border: none;
        }

        .checkbox-pop:checked+label span:before {
            animation: pop 0.3s ease;
            z-index: 100;
            background: #9a725c;
        }



.pc{ display: block}
.mb{ display: none;}
.box{ display: none;}
.mbhsow,.mbfixbtm{ display: none;}
@media only screen and (max-width: 1800px) {    
    .s02{ background: #000; }
    .title:before,.title:after,.s02 .title:before,.s02 .title:after{ width: 30%}
}
@media only screen and (max-width: 1600px) {
    .logo{ max-width: 440px;}
    nav{ margin-bottom: 10px;}
    .banner{ min-height: 750px}
}
@media only screen and (max-width: 1400px) {
    .head{padding: 0px 7%;}
    nav{ margin-top: 30px;}
    .logo{ max-width: 370px; margin-left: 0; margin-top: 20px;}
    .s03{ background-repeat:repeat}
    .s03 .wp{ width: 100%}
    .s03 .itm.mg50{ padding: 0}
    .s03 .itm{width: 45%; margin: 0 2%; margin-bottom: 15px;}
    .banner{ min-height: 700px}
}
@media only screen and (max-width: 1200px) {
    .container{ width: 100%;}
    nav div a{ padding: 0 5px; font-size: 18px;}
    .logo{ max-width: 300px;}
    .slick-next{ right: -25px !important;z-index: 2}
    .slick-prev{ left: -25px !important;z-index: 2}
    .slick-prev, .slick-next{ width: 38px !important; height: 40px !important; }
     .banner{ min-height: 600px}
    
   
}

@media only screen and (max-width: 1000px) {
    .mb img{ display: inline-block;}
    .pc{ display: none !important}
    .mb{ display: block;}
    .wrap,.w1000{ width: 100% !important}
    .ansfinal .wrap.bga,.ansfinal .wrap.bgb,.ansfinal .wrap.bgc,.ansfinal .wrap.bgd,.ansfinal .wrap.bge,.ansfinal .wrap.bgf{ background-color: #000; background-image: none !important}
    .topl img{ width: 160px;}
    .ansfinal .h2{ margin-top: 20px;}
    .topr{ padding-left: 10px;}
    .box{ display: block}
    .head {padding-top: 0;z-index: 99; min-height: 65px}
    .head.fadein{ padding-bottom: 0;}
    
   
    .container{ width: 100%;}
    
    nav{ display: none; width: 100%; margin-top: 0px; z-index: 999; position: fixed; background: #fff; left: 0; top: 65px}
    nav > div{ width: 100%;padding: 15px 0; border-bottom: 1px solid #ddd; text-align: center}
    nav a{ border-right: 0; color: #000; display: inline-block}
    nav div a{ color: #000}
    nav a:hover span{ border: 0; padding: 0}
    nav a.active:after{ display: none;}
    .logo{ width: inherit; margin-top: 10px; margin-left: 10px;}
    .logo img{ max-width: 170px;}
    .fixedlft{ display: none;}
    
    .slick-next{ right: 15px !important}
    .slick-prev{ left: 15px !important}
    .slick-prev, .slick-next{ width: 38px !important; height: 40px !important; }
    .mbkv{ display: block}
    .s01{ margin-top: -10px; min-height: 675px; padding-bottom: 30px;}
    .s02{ min-height: 665px; padding-bottom: 50px;}
    .s02 .choose{ width: 100% }
    .s02 .choose img{ width: 96%;text-align: center}
    .s03{ padding-bottom: 50px;}
    .s04 .wp{ width: 100%}
    .s04 .item{ width: 320px; display: block; margin: 0 auto; margin-bottom: 50px;}
    .s05 .left,.s05 .rig{ width: 100%; text-align: center}
    .s05 .rig{ margin-top: 50px;padding-bottom: 50px;}
    #footer { width: 90%; padding: 20px 5%}
    #footer img{ width: 100%}
    .s03 .itm a{ font-size: 13px; padding: 2px 0}
    .title:before{ width: 28%}
    .title:after{ width: 28%}
    .s02 .title:before{ width: 20%}
    .s02 .title:after{ width: 20%}
    .ansfinal .pds .rig img,.ansfinal .pds .left img,.ansfinal .related .left img{ max-width: 100%}
}
/*tablet*/
@media only screen and (max-width: 780px) {
    .s03{ min-height: 755px; padding-bottom: 50px;}
    .quest .ans,.quest .ti{ padding-left: 40px;}
    .quest .ti em{ font-size: 60px; left: -13px;}
    .ansfinal .related .left,.ansfinal .related .rig{ width: 100%;}
    .ansfinal .pds .left,.ansfinal .pds .rig{ width: 100%}
    .s02{ min-height: 550px; padding-top: 80px;}
    .s02 .title:before{ display: none}
    .s02 .title:after{ display: none}
    .title:before{ width: 18%}
    .title:after{ width: 18%}
  .s04 .bg2{ padding-bottom: 30px;}
    
}
  
@media only screen and (max-width: 500px) {
    p{ font-size: 20px; line-height: 34px;}
    
    .mbhsow{ display: block}
    .title img{max-width: 200px;}
    .logo{max-width:180px}
    .logo img{width: 100%}
    .head{ padding: 0 10px}
    
    .test .wrap{ padding: 30px;}
    .test .h1{ font-size: 33px; line-height: 40px; margin-bottom: 40px;}
    .quest .h2{ font-size: 26px;}
    .quest .ti{ font-size: 24px; line-height: 30px}
    .quest .ans >div{ margin-bottom: 30px;}
    .test .wrap{ min-height: 700px;}
    .quest .ans{font-size: 19px;}
    .ansfinal .wrap{ padding: 30px;}
    .ansfinal .h2{ font-size: 33px; margin-bottom: 40px;}
    .ansfinal .h1{ font-size: 40px;}
    .ansfinal .h1 em{ font-size: 20px;}
    .ansfinal .h3{ font-size: 26px; line-height: 36px;}
    .ansfinal .info{ font-size: 19px; margin-bottom: 50px;}
    .ansfinal .pds .tit{ font-size: 26px;}
    .ansfinal .pds .left, .ansfinal .pds .rig{ margin-bottom: 10px;}
    .s01{ min-height: 500px; padding-bottom: 80px}
    .s01 .slider .text img{ left: 0}
    .s02{ min-height: 500px; padding-left: 10px; padding-right: 10px; box-sizing: border-box}
    .s02 .choose{ margin-top: 80px;}
    .s03{ min-height: 565px;}
    .s03 .itm a{ width: 99%;}
    .title span{ font-size: 36px;}
    .title:before{ width: 22%}
    .title:after{ width: 22%}
    .s02 .title span{ font-size: 36px;}
    .s02 .title:before{ display: none}
    .s02 .title:after{ display: none}
    .title:before{ width: 22%}
    .title:after{ width: 22%}
    .s04{ padding-top: 80px; padding-bottom: 50px;}
    
    .topl img{ width: 120px;}
    .w1000{ padding-top: 30px;}
    .ansfinal .related .tit{ font-size: 22px; line-height: 27px;}
    .ansfinal .btns img{ max-width: 70%}
    .ansfinal .btns{ left: 0}
    
    .title:before,.title:after{ display: none;}
    
    
}


/*updown*/
@-webkit-keyframes updown {
	0% {
		-webkit-transform: translateY(-12%);
		-moz-transform: translateY(-12%);
		-ms-transform: translateY(-12%);
		-o-transform: translateY(-12%);
		transform: translateY(-12%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-moz-keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-ms-keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-o-keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

.updown{
	-webkit-animation: updown 700ms forwards ease-in-out infinite alternate;
	-moz-animation: updown 700ms forwards ease-in-out infinite alternate;
	-ms-animation: updown 700ms forwards ease-in-out infinite alternate;
	-o-animation: updown 700ms forwards ease-in-out infinite alternate;
	animation: updown 700ms forwards ease-in-out infinite alternate;
}





/* 
green: #3FAF82

*/

.box {
  position: absolute;
  top: 0px;
  right:0px;
/*  transform: translate(-50%, -50%);*/
  width:66px;
  height: 65px;
  background: #000;
/*  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);*/
}

.btn {
  position: absolute;
  top: 35px;
  right: -13px;
  transform: translate(-50%, -50%);
  width: 43px;
  cursor: pointer;
}
.btn.active{ top: 38px; right: -12px;}

.box span {
  display: block;
  width: 100%;
/*  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);*/
/*  border-radius: 3px;*/
  height: 5px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.box span + span {
  margin-top: 11px;
}

.box .active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.box .not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.box .active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.box .not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.box .active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.box .not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 10px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes barjump {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: -10px;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 150px;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 250px;
  }
}



.mous{ position: absolute; display: inline-block; bottom: 50px; left: 280px;}
.mous em{ display: block; position: absolute; background: none; top: -30px; left: -22px; color: #01ffff;}
.mous span{ display: block;}
.mous span:after {
  content: "";
  position: absolute;
    z-index: 9999;
}

.mous > span:before {
  background-color: #fff;
  width: 1px;
  height: 30px;
  top: 50%;
  right: 0;
    z-index: 999;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

.mous > span:after {
  background-color: #01ffff;
  width: 1px;
  height: 80px;
  top: 50%;
  right: -8px;
    z-index: 999;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  animation-name: mouse;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes mouse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: -10px;
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 40px;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 70px;
    opacity: .3;
  }
}
.biggerbtn{ animation: biggerbtn 500ms forwards ease-in-out infinite alternate;}
@keyframes biggerbtn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  
  }
}


/* GENERAL BUTTON STYLING */
.btn-5,
.btn-5::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-5 {
  display: block;
  position: relative;
  text-transform: uppercase;
}

.btn-5::before,
.btn-5::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}

.btn-5:hover {
  color: #333;
}
/* BUTTON 5 */
.btn-5 {
  overflow: hidden;
}

.btn-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -55%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.btn-5:hover:after {
  height: 100%;
  width: 155%;
}

@-webkit-keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media (max-width: 1024px) {
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-125%);
    }
  }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-125%);
    }
  }
}
@media (max-width: 768px) {
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-166.65%);
    }
  }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-166.65%);
    }
  }
}
#marquee {
  width: 100%;
    overflow-x: hidden;
}
#marquee .view {
  overflow: hidden;
  width: 100%;
}
#marquee .pic-container {
  display: flex;
  -webkit-animation: marquee 60s infinite linear;
          animation: marquee 60s infinite linear;
}
#marquee .pic-container .pic {
  flex-basis: 20%;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  #marquee .pic-container .pic {
    flex-basis: 25%;
  }
}
@media (max-width: 768px) {
  #marquee .pic-container .pic {
    flex-basis: 33.33%;
  }
}
#marquee img {
  vertical-align: middle;
    margin-bottom: 30px;
}

.biggerbtn{
    animation: biggerbtn 500ms forwards ease-in-out infinite alternate;
}

@keyframes biggerbtn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  
  }
}