body,span,h2,h3{ font-family: Microsoft JhengHei, Microsoft YaHei, Arial,sans-serif !important; 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: 30px; font-size: 18px;}
.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;}
.redtxt{ color: #ef4128}
.whitetxt{ color: #fff}

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



body{ font-size: 18px; line-height: 32px;}
/*hamburg*/
#hamburg{ position: absolute; right: 10px; top: 9px; display: block; z-index: 1; }
#hamburg .line{ width: 50px; height: 50px; background: #fff; transition: all 0.5s; }
#hamburg .line span{ position: relative; width: 75%; height: 2px; background: #FF0000; margin: 0 auto; display: block; top: 33.333333%; }
#hamburg .line span:nth-child(2){ top: 66.666666%; }
#hamburg.active .line{ -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } 

nav{float: right; margin-top: 44px; }
nav span{ display: block; font-size: 14px; color:#231815;  margin-top: 5px; }
nav 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: #f04128; padding-bottom: 10px;}
nav a:hover{ transition: all 0.5s; color: #f04128}
nav a:last-child{ border: 0}
nav a:last-child{ border: 0}


#footer{ font-size: 12px; text-align: center;  display: block; clear: both; padding-top: 30px;}
#footer .row{ margin-bottom: 15px;}
#footer p{ font-size: 12px;}
.hdwrap{ }
.head{ width: 100%; padding-top: 30px; position: fixed; top: 0px; opacity: 1; transition: all 0.2s; display: block;z-index: 99; }
.head.fadein{ background: #000; padding-bottom: 20px;}
.logo{ display: inline-block; margin-left: 30px; margin-top: 8px; max-width: 480px;}
.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************************/
.banner{width: 100%; min-height: 875px; background: url(../images/bg_s1.jpg) center top no-repeat}
.banner .slogan{ width: 715px; padding-top: 260px; margin: 0 auto; padding-right: 80px; text-align: center}
/*.banner .slogan img{ max-width: 620px;}*/
.scroll{ width: 80px; margin: 0 auto; margin-top: 80px; text-align: center}

.s02{ width: 100%; min-height: 992px; background: url(../images/bg_s2.jpg) top center no-repeat; margin-top: -1px; display: inline-block}
.s02 .btmtxt{ font-size: 24px; font-weight: bold; line-height: 40px;}
.s02 .w50p{ width: 350px; display: inline-block; color: #fff; margin: 0 20px}
.s02 .w50p p{ margin-top: 20px;}


.s03{ width: 100%; min-height: 900px; background: url(../images/bg_s3.jpg) #ef3c28 center no-repeat; color: #fff;}
.s03 .boxtxt{ width: 800px; margin: 0 auto; padding: 10px 15px; border: 1px solid #fff; color: #fff; text-align: left}
.s03 .w700{ width: 700px; margin: 0 auto; margin-bottom: 50px;}
.s03 h3{ font-weight: bold; color: #fff; font-size: 24px; margin-bottom: 10px;}
.s03 .w33p{ vertical-align: top}

.s04{ width: 100%; padding-top: 120px; min-height: 1557px; background: url(../images/bg_s4.jpg) center no-repeat; color: #fff; }
.s04 h2{ margin-bottom: 30px; color: #eb3528}
.s04 .flow{ width: 720px; padding-top: 90px; padding-bottom: 25px; background: url(../images/TAICCA-09.svg) center top no-repeat; color: #fff; margin: 0 auto}
.s04 .nnote{ font-size: 16px; padding-top: 30px;}
.s04 .w50{ width: 45%; display: inline-block; font-size: 24px; font-weight: bold;}
.s04 .w50 span{ font-size: 16px; color: #fff;}
.s04 .row{ margin-bottom: 36px;}
.s04 .row > .w50:first-child{ text-align: right; padding-right: 30px; box-sizing: border-box}
.s04 .row > .w50:last-child{ text-align: left; padding-left: 30px; box-sizing: border-box}
.s04 .ppt{ width: 800px; margin: 0 auto}
.s04 .ppt{ border: 1px solid #9c9c9c;}
.slick-dots li button:before{ color: #fff!important}
.slick-dots li.slick-active button:before{ color: #fff !important}
.slick-prev, .slick-next{ width: 33px !important; height: 50px !important;}
.slick-next{ background: url(../images/arrow-r.svg) no-repeat !important; right: -65px !important }
.slick-prev{ background: url(../images/arrow-l.svg) no-repeat !important; left: -60px !important }
.slick-next:before{display: none;}
.slick-prev:before{display: none;}

.s05{ width: 100%; padding-top: 30px; min-height: 1170px; background: url(../images/bg_s6.jpg) top center no-repeat; color: #fff; }
.s05 h2{ margin-bottom: 50px;}
.s05 .bx{ width: 330px; display: inline-block; vertical-align: top}
.s05 .bx .ti{ background: #000; color: #00ff75; font-weight: bold; padding: 10px 60px; margin-bottom: 30px; display: inline-block}
.s05 .bx ul{ width: 260px; margin-left: 50px;}
.s05 .bx li{ list-style: disc outside; text-align: left; color: #000; margin-bottom: 20px;}
.s05 .w650{ width: 650px; margin: 0 auto; color: #000}
.s05 .w650 .t01{ font-size: 24px; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid #000; margin-bottom: 20px;}
.s05 .w650 .t02{}
.cluenote{ width:600px; margin: 0 auto; color: #000; text-align: left}
.btnote{ font-size: 24px; font-weight: bold; color: #000; text-align: center;}

.s06{ width: 100%; min-height: 800px; background: url(../images/bg_s7.jpg) center no-repeat; color: #fff;}
.s06 h2{ margin-bottom: 50px;}
.s06 h3{ color: #00ff75; font-size: 24px; font-weight: bold; }
.s06 p{ font-size: 18px;}
.s06 .note{ width: 90%; margin: 0 auto; text-align: center; color: #fff}
.s06 .applytxt{ text-align: center; font: 24px; font-weight: bold;}
.s06 .item{ width: 500px; display: inline-block; padding: 0 40px; margin-bottom: 30px;}
.s06 .whitebg{ background: #fff; color: #f14129; font-size: 24px; font-weight: bold; padding: 5px 0; margin-bottom: 10px;}
.s06 table{ margin-top: 0px;}
.s06 table tr td{ padding: 15px 5px; border-bottom: 1px solid #fff;}
.s06 table tr td:first-child{ text-align: left; }
.s06 table tr td:nth-child(2){ text-align: left;}
.s06 table tr td:last-child { }
.s06 table tr td:last-child i{ font-size: 30px; }
.s06 table tr td.text-center{ text-align: center}


.btn-apply-01{ width: 425px; height: 70px; margin: 30px 0; background: url(../images/TAICCA-12.svg); display: inline-block}
.btn-apply-01:hover{ opacity: 0.8}
.btn-apply-02{ width: 425px; height: 70px; margin: 30px 0; background: url(../images/TAICCA-14.svg); display: inline-block}
.btn-apply-02:hover{ opacity: 0.8}
.btn-apply-03{ width: 425px; height: 70px; margin: 30px 0; background: url(../images/TAICCA-14-hover.svg); display: inline-block}
.btn-apply-03:hover{opacity: 0.8}

.s08 {width: 100%; min-height: 915px; padding-top: 30px; background: url(../images/bg_s9.jpg) top center no-repeat; color: #fff; display: inline-block}
.s08 h2{ text-align: center; margin-bottom: 30px;}
.s08 .w700{ width: 700px; margin: 0 auto}
.s08 h3{ color: #fff; font-weight: bold; font-size: 24px;}
.s08 .w700 >div:first-child{ width: 220px;display: inline-block}
.s08 .w700 >div:last-child{ width: 420px;display: inline-block; margin-left: 40px;}
.s08 .info{ padding-top: 30px;}
.s08 .info > div{  margin-bottom: 44px;}
.s08 .info em{}


.s09{ width: 100%; min-height: 1026px; padding-top: 50px; background: #000; color: #fff;}
.s09 .w850{ width: 850px; margin: 0 auto}
.s09 h2{ text-align: center; margin-bottom: 50px;}
.s09 .item{ border-top: 2px solid #007f3a; padding: 50px 10px; font-weight: bold;}
.s09 .item .arrow{ width: 220px; display: inline-block}
.s09 .item .arrow:before{ content:""; display: inline-block; width: 20px; height: 12px; background: url(../images/TAICCA-11.svg) no-repeat; background-size:contain;}
.s09 .item >div{ vertical-align: top}
.s09 .item >div:last-child{ width: 600px; display: inline-block}
.s09 .item li{ list-style: disc outside;}
.s09 a{color: #000;}
.s09 a:hover{ color: #333;}
.notxt{ border-bottom: 1px solid #999; padding-bottom: 30px;}
.notxt p{ position: relative; padding-left: 10px;}
.notxt em{ position: absolute; left: -25px; }
.notxt ul>li{ list-style:decimal outside; padding-left: 10px;}
.btngg{ background: #cccccc; color: #000; text-decoration: none; border-radius: 15px; padding: 5px 10px}
.ntt{ color: #00ff75; font-size: 24px; font-weight: bold;}


#footer{width: 100%; min-height: 201px; background: #000; color: #fff;}
#footer h4{ color: #fff; font-size: 18px; font-weight: bold;}
#footer .w50{ width: 49%; display: inline-block; vertical-align: top}
#footer img{ padding: 0 10px;}


.backtop{ position: fixed; bottom: 15%; right: -30px;  opacity: 0;z-index: 999;transition: all 0.5s; }
.backtop .gojob{width: 100px; height: 100px; background: url(../images/TAICCA-05.svg); 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}

#footer{ color: #000; padding-bottom: 15px;}





/*NEWS*/
.news-01{ background:url(../images/news-01.jpg) #000; min-height: 90px; padding-top: 50px;}
.news-01 .w25p { width: 24%; display: inline-block; text-align: center}
.news-01 .ti {color: #fff; font-size: 28px; font-weight: bold; border-bottom: 1px solid #fff; display: inline-block; margin-bottom: 50px;}
.news-01 .w25p .numscroller{ color: #00ff28; font-size: 84px; font-weight: bold; font-family: Arial !important}
.news-01 .w25p em{color: #00ff28; font-size: 50px; font-weight: bold; font-family: Arial !important;position: relative; top: -15px; left: 10px;}
.news-02{ background:url(../images/news_bg2.svg) top center; padding-top: 280px;}
.news-02 .peo-wp{ text-align: left;}
.news-02 .peo{ width: 240px; display: inline-block;vertical-align: top; margin: 0 20px; margin-bottom: 40px; text-align: center; color: #fff;}
.news-02 .peo img{ width: 200px;}
.news-02 .peo div:nth-child(2){ font-size: 26px; font-weight: bold;}
.news-02 .peo div:nth-child(3){ font-size: 20px;}
.news-02 .peo span{font-size: 20px; color: #fff;}

.news-03{background:url(../images/news_bg3.svg) #000 top center no-repeat; padding-top: 150px; width: 100%; display: inline-block;}
.boxw{ font-size: 28px; color: #fff; padding: 10px 20px; margin: 30px 0; border: 1px solid #fff; display: inline-block; text-align: center; font-weight: bold;}
.news-03 .clas img{ width: 100%; max-width: 1200px; }
.news-03 .clastb{ max-width: 890px; margin: 0 auto; color: #fff}
.news-03 .clastb table{ width: 100%; margin-bottom: 70px;}
.news-03 .clastb th{ background: #f04128; color: #fff; font-size: 28px; padding: 15px 0; font-weight: bold;}
.news-03 .clastb td{ border-bottom: 1px solid #fff; font-size: 21px; padding: 15px 0; text-align: center}
.news-03 .clastb td.left{ text-align: left; font-size: 16px;}
.news-03 .clastb .tileft{ text-align: left}
.news-03 .clastb td:first-child{ width: 220px;}
.news-03 .clastb td:nth-child(2){ width: 340px;}
a.focusno:focus{outline: 0}

.prize{background:url(../images/news_bg4.svg); padding-top: 50px; min-height: 1170px;}
.prize .w50p{ width: 49.5%;display: inline-block;}
.prize .w100p span{ color: #fff; font-size: 17px;}
.prize table{ width: 90%; color: #fff;}
.prize th{background: #000; font-size: 24px; font-weight: bold; padding: 10px 0}
.prize td{ border-bottom: 1px solid #000; text-align: center; padding: 10px 0}
.prize td:first-child{ width: 160px;}



.mb{ display: none;}
.box{ display: none;}
.mb-show{ display: none;}
.tablet-show{ display: none}
.pc-tablet-yes{display: inline-block}
@media only screen and (max-width: 1200px) {
    .container{ width: 100%;}
    .logo img{width: 100%; max-width: 400px;}
}

@media only screen and (max-width: 1000px) {
    .mb img{ display: inline-block;}
    .pc{ display: none !important}
    .wrap{ width: 100% !important}
    .mb{ display: block;}
    .box{ display: block}
    .head { height: 65px; padding-top: 0;}
    .head.fadein{ padding-bottom: 0;}
   
    .container{ width: 100%;}
    
    nav{ display: none; width: 100%; margin-top: 4px; z-index: 999; position: fixed; background: #000;}
    nav a{ width: 100%;; padding: 15px 0; border-bottom: 1px solid #ddd; border-right: 0}
    nav a:hover span{ border: 0; padding: 0}
    nav a.active:after{ display: none;}
    nav a.active{ color: #e50015; padding-bottom: 15px;}
    .wrap,.hdwrap{ width: 100%;}
    .logo{ width: inherit; max-width: 60%; margin-top: 15px; margin-left: 15px;}
    
    .fixad{ position: fixed; right: 0; bottom: 0px;z-index: 3}
    .btmfix{ position: fixed;bottom: -5px; left: 0; color: #fff; font-weight: bold; width: 100%; display: inline-block; text-align: center; font-size: 24px;z-index: 9999; background: #000; padding: 20px 0}
    .btmfix em{ font-style: italic}
    #footer{  padding-bottom: 75px;}
    
    
    
/*
    .banner .slogan{ width: 90%; margin: 0 auto; padding-right: 0; padding-top: 200px;}
    .banner .slogan img{ width: 100%; max-width: 720px;}
*/
    .width700{ width: 90%; margin: 0 auto}
    .s03{ background-position: bottom; background-color:#ee3e27 }
    .s03 .w33p{ width: 30%;}
    .s03 .boxtxt{ width: 90%; margin: 0 auto}
    .s03 .w700{ width: 100%;}
    .width900{ width: 90%; margin: 0 auto}
    
    .s04 .ppt{ width: 80%; margin: 0 auto}
    
    .s04 .flow{ width: 100%;}
    .s05 .w650{ width: 90%; margin: 0 auto}
    .s06 .w960{ width: 90%; margin: 0 auto; padding:30px 0}
    .s07{ background: url(../images/bg_s8-tablet.jpg) bottom #f14129 no-repeat; padding-bottom: 50px; }
    .s08{ margin-top: -1px;}
    .s08 .w700{ width: 90%; margin: 0 auto}
    .s09 .w850{ width: 90%; margin: 0 auto}
    .s09{ min-height: inherit;}
    
    .news-01 .ti{ font-size: 22px;}
    .news-01 .w25p .numscroller{ font-size: 60px;}
    .news-01 .w25p em{ position: relative; top: -5px; }
    .news-02{padding-top: 70px; background-size: contain; background-repeat: no-repeat; background-color:#f04128 }
    .news-02 .peo{ width: 210px;}
    .news-02 .peo:focus{outline: 0}
    .news-02 .peo div:nth-child(2){ font-size: 24px;}
    .news-02 .peo div:nth-child(3),.news-02 .peo span{ font-size: 18px;}
    
    .news-03{ background-size: contain; padding-top: 70px;}
    .boxw{ margin-bottom: 10px;}
    .news-03 .clas { width: 95%; margin: 0 auto}
    .news-03 .clas img{ width: 100%; }
    .news-03 .clastb{  width: 95%; margin: 0 auto}
    .news-03 .clastb td:first-child{ width: 190px;}
    
    .prize{ background: url(../images/news_bg4-mb.svg);background-size: contain; padding-top: 40px;min-height: 300px; background-repeat: no-repeat;background-color:#f04128;padding-bottom: 50px; }
    .prize .row{ width: 95%; margin: 0 auto}
    .prize .w100p span{ margin-left: 20px;}
    
   
}
/*tablet*/
@media only screen and (max-width: 780px) {
    .logo img{width: 100%; max-width: 340px;}
    .banner{ display: none;}
    .mb-banner{ background: url(../images/mb_kv.jpg) top #000 no-repeat; background-size: 100%; text-align: center; padding-bottom: 25%;}
    .mb-banner .mbslo{ padding-top: 24%; margin: 0 auto}
    .scroll { margin-top: 0; position: relative; top: 0px}

    .cluenote{ width: 90%; margin: 0 auto}
    .s02 .w50p{ width: 33%;}
    .s03{ background: #f0422a; padding-bottom: 30px;}
    .s03 .w33p{ width: 30%; margin-bottom: 30px;}
    .s04{ padding-top: 0; padding-bottom: 30px; background: url(../images/mb_kv_03.jpg); min-height: 1315px;}
    .s04 .row{ margin-bottom: 39px;}
    .s04 .mgt-50{ margin-top: 0;}
    .s04 .row > .w50{ font-size: 17px; vertical-align: top}
    .s05{ background: #00ff75; min-height: inherit; padding-bottom: 50px;}
    .s06 .container{ text-align: center}
    .s06 .w960 >div{ width: 100%;}
    .s06 .note{ width: 90%; margin: 0 auto}
    .s06 .w960 >div:last-child{ margin-bottom: 20px;}
    .s06 .item{ width: 45%; padding: 0 10px; margin-bottom: 30px;}
    .s06 .item table tr td{ font-size: 16px;}
    .s06 .item img{ width: 100%;}
    .s06 .item table tr td{ padding: 10px 5px}
    .s08 .w700 >div:last-child{ width: 100%; margin: 0 auto}
    .s08 .floimg{ display: none;}
    .tablet-show{ display: block}
    .s09 .item >div:last-child{ width: 100%;}
    #footer .w50{ width: 100%; padding-top: 30px;}
    .ftlogo{ width: 40%; margin-bottom: 30px; max-width: 500px}
    .slick-next{right: -35px !important }
    .slick-prev{ left: -30px !important }
    
    .news-01 .w25p{ width: 49%; margin-bottom: 20px;}
    .news-01 .ti{margin-bottom: 30px;}
    .news-02 .peo{ width: 49%; margin: 0; margin-bottom: 30px;}
    .news-03 .clastb th{ font-size: 22px;}
    
    .prize .w50p{ width: 100%;}
    .prize table{ width: 100%;}
    .news-03 .clastb td{ font-size: 16px;}
    
}
@media only screen and (max-width: 767px) {
    .s03 .w33p{ width: 100%; margin-bottom: 30px;} 
    .ftlogo{ width: 70%; }
    .s09{ padding-top: 30px;}
    .s08{ background: #f04128}
    .s02 .w50p{ width: 90%; margin: 0 auto}
    .news-03 .clastb td:first-child{ width: 120px;}
    .news-03 .clastb td:nth-child(2){ width: 220px;}
 }   
@media only screen and (max-width: 480px) {
    .mb-show{ display: block}
    .pc-tablet-yes{ display: none;}
    section{ width: 100%; display: inline-block; float: left; overflow-x: hidden}
    .mb-banner{ padding-bottom: 12%;}
    nav{ margin-top: 15px;}
    .s02{ background:#000; padding-bottom: 80px; margin-top: -1px;} 
    .s02 .w50p{ margin-bottom: 30px;}
    .s03{ padding-top: 50px;padding-bottom: 50px; margin-top: -1px;}
    .s04{ min-height: inherit}
    .s04 .row > .w50:last-child{ line-height: 22px;}
    .s04 .row{ margin-bottom: 40px;}
    .s04 .twoline{ margin-bottom: 0;}
    .s05 .w650 .t01{ font-size: 20px;}
    .s06{ padding-top: 30px; background: #000; }
    .s06 .item{ width: 85%;}
    .s06 h3{ font-size: 22px;}
    .s06 p{ font-size: 16px;}
    .s06 .note{width: 90%; margin: 0 auto}
    .s06 .w960 >div{ margin-bottom: 30px;}
    .s07{ background-position: bottom; background-color: #ee3a29} 
    .s07 .item{ width: 90%; margin: 0 auto}
    .s09{ background-color: #000}
    .s09 h2{ line-height: 50px;}
    .s09 .item >div:last-child{ margin-left: 30px; padding-right: 30px; box-sizing: border-box}
    .banner .slogan{ padding-top: 100px;}
    .banner{ min-height: inherit}
    iframe{ height: 220px;}
    .notxt{ width: 80%; margin: 0 auto}
    .pimg{ margin-right: 0;}
    #footer{ background-color: #000}
    .news-02 .peo{ text-align: center}
    .news-02 .peo img{ display: inline-block}
    .news-03 .clastb td:first-child{ width: 80px;}
    .news-03 .clastb td:nth-child(2){ width: 180px;}
    .news-03 .clastb td{ font-size: 15px;line-height: 22px;}
    .news-03 .clastb td.left{ font-size: 15px; line-height: 22px;}
    .prize td:first-child{width: 100px;}
    .prize th{ font-size: 22px;}
    .prize td{ font-size: 16px;}
}


/*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: #f04128;
/*  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);
  
  }
}