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: 1.3em; font-size: 23px;}
.bold{ font-weight: bold;}
.block{ display: block}
.in-blk{ display: inline-block}
.no-show{ display: none}

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



body{ font-size: 18px; line-height: 36px; font-family: "Roboto", sans-serif;}

nav{text-align: center; padding: 15px 0}
nav span{ display: block; font-size: 14px; color:#00a0ea;  margin-top: 5px; }
nav >div{display: inline-block;padding: 0 20px; color: #fff;}
nav >div a{font-size: 20px; border: 0; text-align: center; color: #fff; transition: all 0.5s;position: relative}
nav a:hover{ transition: all 0.5s; color: #dfff67}
nav .lang{}

.logo{ margin-top: 11px;}
.head{ width: 100%; padding: 0 5%; top: 0; padding-top: 10px; opacity: 1; transition: all 0.2s; display: block;z-index: 99; box-sizing: border-box; background: #000 ; }
.head .container{display: flex; flex-direction: row;align-items: center;justify-content: center}
.head.fadein{ position: fixed; top: 0px;}
.logo{ display: inline-block; margin-left: 30px; margin-top: 0px;}
.container{ width: 1200px; margin: 0 auto; position: relative}
.title{ margin-bottom: 35px; text-align: center}
.title .h2{ font-size: 38px; color: #fff; line-height: 1.3em; font-weight:800; position: relative; }
.title .h2.white{ color: #fff}
.title .h2.black{ color: #000}
.title .h2:after{ content: ''; width: 250px; height: 3px; background: #fff; margin: 0 auto; margin-top: 20px; display: block}
.subtitle{ color: #fff; text-align: center; font-size: 20px; margin-bottom: 30px; }

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


.kv-wrap{ background: url(../images/bg_kv.jpg) center top no-repeat; background-size:cover;}
.kv-wrap .container{ width: 1115px; min-height: 560px; padding-bottom: 50px;position: relative; display: flex; flex-direction: row;justify-content: flex-end; align-items: center}
.slogan{ width: 60%;text-align: center}
.slogan img{ width: 100%; max-width: 800px}
.kv-wrap .gosign{}
.kv-wrap .gosign img{ width: 300px; margin-left: 25px;}


.s1{ min-height: 700px; padding-bottom: 80px; background: url(../images/bg_s1.jpg) center top; background-size:cover; color: #fff;}
.s1-wrap{padding-top: 90px; background: url(../images/bg_s1.png) no-repeat center top; background-size:contain;
    background-position-y: 100px}
.s1 .rows{ display: flex; flex-direction: column;align-items: center;justify-content: space-around}
.s1 .text p{line-height: 1.7em; font-size: 23px; margin-bottom: 30px; text-align: justify; font-weight: 300}
.en .s1 .text p{text-align: left}
.s1 .text{  }
.s1 .h2{ color: #cdfa5f}
.s1 .title .h2:after{ width: 250px; background: #fff;}
.btxt{ font-size: 32px; font-weight: bold; margin-bottom: 20px; color: #00faff; text-align: center}
.bx3{ display: flex; flex-direction: row}
.bx3 img{ max-width: 300px; padding: 0 10px;}
.s1 .green{ color:#cdfa5f }


.s2{ min-height: 600px; padding-bottom: 80px; background: url(../images/bg_s2.jpg) center top; background-size:cover;  padding-top: 90px;}
.s2 .subtitle{ font-size: 22px; font-weight: 600; color: #000}
.s2 .title .h2{ color: #006de1}
.s2 .title .h2:after{ background: #e6e6e6}
.spksec{min-height: 1040px; padding-bottom: 80px; background: url(../images/bg_s2.jpg) center top; background-size:cover; padding-top: 90px;}
.spks{ display: flex; flex-direction: row;flex-wrap: wrap;justify-content:center;}
.spks .item{ width: 280px; text-align: center; margin-bottom: 50px; padding: 20px; cursor: pointer; transition: all 0.5s}
.spks .item:hover{ opacity: 0.7; transition: all 0.5s}
.spks .item img{ margin-bottom: 10px; width: 90%;}
.spks .item .tit{ color: #000; font-size: 26px; font-weight: bold; margin-bottom: 5px;}
.spks .item .tit em{ font-size: 18px;}
.spks .item p{ color: #000; font-size: 18px;}
.spks .item a{ margin-top: 10px; display: inline-block; width: 130px;}


.s3{ min-height: 700px; padding-bottom: 80px; background: url(../images/bg_s3.jpg) center top; background-size:cover;  padding-top: 90px;}
.s3 .green{ color: #dfff67}
.agenda{}
.agendatb{ width: 1000px; margin: 0 auto;}
.agenda .tb{ border-radius: 20px; box-shadow:0 0 10px #00000057; background: #e6e6e6; padding:30px 20px; box-sizing: border-box}
.agenda .tb .tit{ font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 15px;}
.agenda table{ text-align: left}
.agenda table th{
    background: transparent;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-size: 22px;
}
.agenda table th.bg2{
    background: transparent;
    color: #fff;
}
.agenda table tr.tdbg{
    background: url(../images/web_agenda_bar.png) left top repeat-x;
    background-size: 100% 100%;
}
.agenda td:nth-child(1){ width: 15%}
.agenda td:nth-child(2){ width: 42%}
.agenda td:nth-child(3){ width: 42%}
.agenda table td{
    font-size: 19px;
    padding: 15px;
    line-height: 1.6em;
    vertical-align: middle;
}
.agenda table td small{ font-size: 15px; font-weight: normal}
.agenda table td span{ font-size: 16px; line-height: 1.3em; display: inline-block}
.agenda table td b{ color: #006ee1; font-weight: bold}
.agenda table td .blk{ display: inline-block; margin-bottom: 10px;}
.agenda table tr{border-bottom: 1px solid #ddd}

.agenda table tr td:first-child{ text-align: center; font-weight: 600;}
.agenda .title .h2:after{ background: #fff; width: 300px}
.agenda .center{ text-align: center}
.agenda .agenda-cfa{margin-top: 30px; display: inline-block}
.agenda .agenda-cfa img{ width: 220px;}
.agenda .note{ width: 800px; margin: 0 auto; color: #fff;}
.tm{ color: #0062df}


.subtitle { color: #000}
.subtitle.white{ color: #fff;}
.subtitle span{ font-size: 16px; font-weight: normal;}



.s4{padding-bottom: 120px; background: url(../images/bg_s4.jpg) center top; background-size:cover;  padding-top: 150px;}
.s4 .title .h2{ color: #e1ff68}
.teamb{ display: flex; flex-direction: row; flex-wrap: wrap;justify-content: center}
.teamb >div{ width: 180px; padding: 18px 20px; color: #fff; text-align: center; font-size: 26px; font-weight: bold; position: relative}
.teamb >div:hover{ cursor: pointer}
.teamb >div .name{ width: 100%; }
.teamb >div .flag {position: absolute; top: 170px; right: 20px}

.slick-next:before,.slick-prev:before{ display: none;}
.slick-next,.slick-next:hover{ width: 30px; height: 56px; background: url(../images/ch_icon_arrow_01.png) no-repeat; background-size: contain}
.slick-prev,.slick-prev:hover{ width: 30px; height: 56px; background: url(../images/ch_icon_arrow_02.png) no-repeat; background-size: contain}


.s5{ min-height: 700px; padding-bottom: 80px; background: url(../images/bg_s5.jpg) center top; background-size:cover;  padding-top: 90px;}
.s5 .title .h2{ color: #e1ff68}
.traffic{ padding-bottom: 20px; background: url(../images/bg_s5.jpg) no-repeat center top; background-size:cover; padding-top: 50px;}
.traffics{ display: flex; flex-direction: row;justify-content:space-around}
.traffics img{transition: all 0.5s}
.traffics img:hover{ transform: scale(1.02); transition: all 0.5s}
.tkwrap{ width: 100%; background: #fff; margin-bottom: 80px; margin-top: 50px; padding: 20px 50px; box-sizing: border-box}
.tkwrap .h3{ color: #6A30FF; font-size: 22px; font-weight: bold;}
.tkwrap li{ font-size: 18px; }
.tkwrap li::before{content: "●"; color: #6A30FF; font-size: 14px; margin-right: 10px;}
.tkwrap li small{ width: 100%; padding-left: 10px; font-size: 14px; display: inline-block; position: relative; top:-5px;}
.mapwrap{ width: 90%; margin: 0 auto; margin-bottom: 50px; border-radius: 30px; box-sizing: border-box; display: flex; flex-direction: row}
.mapwrap .lft{ width: 50%;}
.mapwrap .lft img{ width: 100%;}
.mapwrap .rig{ width: 50%; color: #fff; padding-left: 50px; display: flex; flex-direction: column;justify-content: center}

.traffic .sec{ font-size: 18px; padding: 20px 0;  line-height: 28px;}
.traffic .sec p{ font-size: 18px;  line-height: 28px;word-break:break-word}
.traffic .sec .pd{ padding: 0 50px;}
.traffic .sec .pd a{ text-decoration: underline; color: #fff}
.traffic .sec b{ font-weight: bold; color: #e1ff68; width: 100%; display: inline-block}
.traffic .ti { position: relative; font-size: 24px; color: #707070}
.traffic .ti i{ position: absolute; left: -40px; top: 0px;}
.traffic .box3{ display: flex;justify-content:space-between}
.traffic .box3 img{ max-width: 100%;}
.traffic .bigti{ font-size: 26px; margin-left: 10px;}
.traffic .cfa{ width: 220px; display: inline-block; margin-top: 30px;}
.traffic .cfa img{ width: 100%;}


.ftlogo{ width: 100%; background: #000; text-align: center; padding: 30px 0}
.ftlogo .fttxtinfo{ text-align: center; color: #fff; margin-bottom: 10px; font-size: 16px; display: flex; flex-direction: row; justify-content: center}



.popbox { width: 700px; max-width: 800px !important; font-size: 16px;}
.popbox .top{display: flex; padding-bottom: 20px;}
.popbox .hd{ width: 250px; }
.popbox .inf { display: flex; justify-content: center ;flex-direction: column; align-items: flex-start; margin-left: 30px; font-size: 34px;}
.popbox .inf{ color: #000}
.popbox .tit{ font-weight: bold; margin-bottom: 10px;}
.popbox .tit a{ color: inherit; text-decoration: none; }
.popbox .tit a:hover{ color: #00faff; }
.popbox .inf p{font-size: 19px; line-height:1.4em;}
.popbox .cont{font-size: 16px; line-height: 26px; margin-top: 0px; padding: 20px 0px;}
.popbox .cont p{ font-size:18px; line-height: 32px;}
.popbox .blue{ color: #0056BF; margin-bottom: 10px; margin-top: 10px;}

.team.popbox{
    background: transparent;
    padding: 0;
}
.team.popbox .top{
    background: #ffffff;
    padding: 30px;
    margin: 0;
}
.team.popbox .cont{
    background: #e6e6e6;
    padding: 30px;
    margin: 0;
}
.team.popbox .hd{ width: 150px;}
.team.popbox .inf{ flex-direction: row;align-items: center;justify-content: flex-start; border-bottom: none; /* 移除 popbox team 黑線 */ padding-bottom: 10px;  width: 100% }

.googleinframe{
    background: #000;
    padding: 60px 0;
    margin: 0;
}
.googleinframe iframe{
    width: 90%;
    max-width: 800px;
    height: 600px;
    margin: 0 auto;
    display: block;
    background: #fff;
}

footer{ }

.fixbtn{ position: fixed; right:30px; bottom: 80px; width: 150px; height: 150px; padding: 0; box-sizing: border-box; background: url(../images/btn_fit_bg_150x150-en.png) no-repeat; text-align: center; background-size: 100%; opacity: 1 }
.fixbtn .mobile-btn{ display: none; }
.fixbtn .desktop-btn{ display: block; }
.mobile-kv{ display: none; }
.desktop-kv{ display: block; }
.fixbtn.en{background: url(../images/btn_fit_bg_150x150.png) no-repeat;background-size: 100%;  }
.fixbtn.fadein{ opacity: 1; transition: all 0.5s}
.fixbtn span{  color: #fff; font-size: 32px; font-weight: bold;}
.fixbtn:hover{ opacity: 0.8}
.slid{ padding: 30px; background: #fff7eb}

.btn-cent{ text-align: center; margin-top: 30px;}
.btn-red{ display: inline-block; padding: 5px 20px; color:#fff; background: #ed1b24; border-radius: 30px; font-weight: bold; font-size: 22px;}

.short-img{}
.short-img img{ max-width: 100%}

#swapImg {
      animation: zoom 2s infinite alternate;
    }
 @keyframes zoom {
      from { transform: scale(1); }
      to   { transform: scale(1.03); }
    }

.pc{ display: block}
.mb{ display: none;}
.box{ display: none;}

.fancybox-content{ padding: 25px!important}

.mbbtnfix{ display: none;}
.fix-btm{display: none;}


@media only screen and (max-width: 1200px) {
    .container{ width: 100%; padding: 0 20px; box-sizing: border-box }
    .kv-wrap .container{ width: 100%;}
    .slick-next{ right: 0}
    .slick-prev{ left: 0}
    
}
@media only screen and (max-width: 1000px) {
    .mb{ display: block;}
    .mb img{ width: 100%; display: flex;}
    .pc{ display: none !important}

    .kv1 { background: url(../images/web_ch_mb_kv.jpg) center top; background-size: 100% auto; background-repeat: no-repeat; width: 100%; height: 0; padding-bottom: 100%; }
    .en .kv1 { background: url(../images/web_en_mb_kv.jpg) center top; background-size: 100% auto; background-repeat: no-repeat; width: 100%; height: 0; padding-bottom: 100%; }
    .kv1 .container, .kv1 .slogan, .kv1 img { display: none; }
    .wrap{ width: 100% !important}
    .kv-wrap .container{ min-height: inherit; padding: 0}
    .box{ display: block; z-index: 9999}
    .head {padding-top: 0;z-index: 99; background: #000;min-height: 57px;}
    .head.fadein{ padding-bottom: 0;}
    .logo img{ width: 150px;margin-top: 10px; min-height: 50px;}
    .logo{ margin-top: 0px; width: inherit; max-width: 70%;margin-left: 0; margin-bottom: 0;}
    
    
    nav{ display: none; width: 100%;z-index: 999; position: fixed; background: #000; left: 0; top: 0; margin-top: 0;}
    nav >div,.en nav >div{ width: 100%; border-bottom: none; /* 移除 popbox team 黑線 */padding: 10px 0; border-right: 0; color: #000; text-align: center}
    nav >div a{border-right: 0; color: #fff}
    nav a:hover span{ border: 0; padding: 0}
    nav a.active:after{ display: none;}
    
        
       
    .agenda .note{ width: 100%;}
    .mapwrap{flex-direction: column}
    .mapwrap .lft{ width: 100%;}
    .mapwrap .rig { width: 100%; padding-left: 0; margin-top: 30px;}
    
        
    .fixbtn{ }
    .popbox{ width: 100%;}
    .popbox .lft{ float: right; width: 100%}
    .popbox .rig{ float: left; width: 100%}
    .popbox .hd{ width: 50%; display: inline-block}
    .popbox .hd img{ width: 100%}
    .popbox .inf{ width: 48%; display: inline-block; vertical-align: top; padding-top: 16%;}
    
    .bx3{ display: flex; flex-direction: column}
    .agendatb{ width: 100%;}
    .ftlogo img{ max-width: 100%}
    
   
    
}
/*tablet*/
@media only screen and (max-width: 800px) {
    
    .title .h2{ font-size: 32px;}
    .s1 .text p{ font-size: 20px;}
    .s1 .rows{ flex-direction: column}
    .s1 .text,.s1 .rigimg{ width: 100%;}
    
    .spks .item{ width: 49%; box-sizing: border-box; margin-bottom: 20px;}
    .spks .item .tit{ font-size: 24px;}
    .spks .item p{ font-size: 16px;}
        
   
}


@media only screen and (max-width: 500px) {
   
    .title .h2{ font-size: 28px;}
    .title .h2:after{ width: 260px;}
    .s1 .text p{ font-size: 18px;}
    nav{ padding: 0}
    nav >div.lang{ border-bottom: 0}
    .s2 .subtitle{ font-size: 18px;}
    
    .traffic .sec p{ font-size: 16px;}
    .traffic .cfa{ width: 170px; margin: 0 auto}
    .agenda .agenda-cfa img{ width: 170px;}
    
    .kv-wrap .cfa img{ max-width: 180px;}
    .kv-wrap .date img{ width: 60%;}
    .agenda table td{ width: 100% !important; float: left; padding: 8px; text-align: left; box-sizing: border-box}
    .agenda table tr td:first-child{ text-align: left}
    .agenda table th{ width: 33.2%; float: left; box-sizing: border-box}
    
    .spks{ }
    .teamb >div{ width: 125px; font-size: 22px;}
    
    .popbox .inf p{ font-size: 18px;}
    .popbox .top{ flex-direction: column}
    .popbox .inf{ width: 100%; padding-left: 0; margin-left: 0; padding-top: 15px;}
    .popbox .tit{ font-size: 24px;}
    .popbox .tit a{ color: inherit; text-decoration: none; }
    .popbox .tit a:hover{ color: #00faff; }
    .popbox .cont{ color: #444}

    .s4{padding-top: 80px;}
    .en .popbox .cont p{text-align: left}
       
    .mbbtnfix{ display: block; position: fixed; bottom: 0}
    .mbbtnfix img{ float: left;} 
    
    .subtitle{ font-size: 22px;}
    .teamb >div .flag{ top: 120px;}

    .logo img{ width: 160px;}
    
    .ftlogo .fttxtinfo{ flex-direction: column; font-size: 14px;}
    .ftlogo{ padding-bottom: 90px;}
       .fixbtn{
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        background: none;
        opacity: 1 !important;
        z-index: 9999;
        position: fixed;
    }
    .fixbtn .gotop{ width: 100%; }
    .fixbtn .desktop-btn{ display: none; }
    .fixbtn .mobile-btn{ display: block; }
    .desktop-kv{ display: none; }
    .mobile-kv{ display: block; }

    .googleinframe{ padding: 40px 20px; }
    .googleinframe iframe{ width: 100%; height: 500px; }
    
    
    .fix-btm{ display: none; }
    .gosign{ display: none}
    .slogan{ width: 80%; padding: 30px 20px }
    .btxt{ font-size: 22px;}
}


/*updown*/

@keyframes updown {
	0% {
		-webkit-transform: translateY(-2%);
		-moz-transform: translateY(-2%);
		-ms-transform: translateY(-2%);
		-o-transform: translateY(-2%);
		transform: translateY(-2%);
	}
	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;
}




.box {
  position: absolute;
  top: 4px;
  right:0px;
/*  transform: translate(-50%, -50%);*/
  width:55px;
  height: 55px;
  background: none;
    margin-right: 15px;
/*  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);*/
}

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

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

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

.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;
    margin-top: 19px;
}

.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;
  }
}



.marquee{ animation: marquee 200s linear infinite forwards;}
@media only screen and (max-width: 500px) {
     .marquee{ animation: marquee 400s linear infinite forwards;}
}

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

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee2{ animation: marquee2 200s linear infinite forwards;}

@media only screen and (max-width: 500px) {
     .marquee2{ animation: marquee2 400s linear infinite forwards;}
}

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

@keyframes marquee2 {
  0% {
    transform: translateX(-90%);
  }
  100% {
    transform: translateX(0);
  }
}

.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);
  
  }
}


.rotate-div {  animation: rotate 5s linear infinite;transform-origin: center;}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* === Speakers RWD: 4 / 2 / 1 columns === */
.s2 .spks{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 讓每列平均分布 */
  gap: 24px;                      /* 卡片間距 */
}

.s2 .spks .item{
  flex: 0 0 calc(25% - 18px);     /* 桌機：一排四個 */
  max-width: calc(25% - 18px);
  box-sizing: border-box;
}

/* 平板：一排兩個 */
@media (max-width: 1024px){
  .s2 .spks .item{
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* 手機：一排一個 */
@media (max-width: 600px){
  .s2 .spks .item{
    flex: 0 0 100%;
    max-width: 100%;
  }
}




/* =======================================
   Team / Popbox fixes (CH + EN)
   (1) Remove blue focus outline on hover
   (2) Disable hover color change on team title (.tit)
   (3) Put flag icon and team title on the same line with spacing
   ======================================= */

/* (1) Remove default focus outline on images & anchors inside team sections */
.teamb img,
.teamb img:hover,
.teamb img:focus,
.team.popbox img,
.team.popbox img:hover,
.team.popbox img:focus,
.teamb a:focus,
.team.popbox a:focus {
  outline: none !important;
}

/* Also avoid any default border that some browsers may apply */
.teamb img,
.team.popbox img {
  border: none !important;
}

/* (2) Stop title color change on hover in popbox and team tiles */
.team.popbox .tit,
.team.popbox .tit a {
  color: inherit !important;
  transition: none !important;
}
.team.popbox .tit a:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* Some themes change color on container hover; normalize */
.teamb > div:hover,
.teamb > div:hover .tit,
.teamb > div .tit:hover {
  color: #fff !important;
} /* 保持白色，避免 hover 消失 */

/* (3) Make flag and team name inline with spacing in POPBOX header info */
.team.popbox .inf {
  display: flex;
  align-items: center;
  gap: 8px; /* space between flag and name */
}

/* Ensure the flag container and title align nicely */
.team.popbox .inf .img {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.team.popbox .inf .img img {
  width: 42px;
  height: auto;
  display: block;
}

.team.popbox .inf .tit {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* If the team grid also uses .img + .tit inside each tile in the future,
   keep them on one line with spacing without breaking current layout */
.teamb > div .img,
.teamb > div .tit {
  display: inline-flex;
  align-items: center;
}
.teamb > div .img + .tit {
  margin-left: 8px;
}


/* === Fix: Team name hover color stays visible (CH + EN) === */
.teamb > div:hover strong,
.teamb > div:hover a,
.teamb > div strong:hover,
.teamb > div a:hover {
  color: #fff !important; /* 保持白色，避免 hover 時變黑 */
}

/* Keep popbox title color stable on hover too */
.team.popbox .tit,
.team.popbox .tit a,
.team.popbox .tit a:hover {
  color: inherit !important; /* 依父層顏色，不強制變色 */
  text-decoration: none !important;
}


/* === 強制團隊名稱 <strong> 在 hover 時保持白色 === */
.teamb > div strong,
.teamb > div:hover strong {
  color: #fff !important;
}