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: 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}
.mgt-50{ margin-top: 50px}
.pgb-30{ padding-bottom: 30px;}
.pgt-20{ padding-top: 20px;}
.pgt-30{ padding-top: 30px;}
.pgt-40{ padding-top: 40px;}
.pgt-50{ padding-top: 50px;}
.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;
    --blue:#003770;
    --orange:#e8551f;
    --yellow:#f7b53d;
}



body{ font-size: 18px; line-height: 32px; background: #d6eacf}
/*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); } 

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

.slick-slide img{ display: inline-block !important}
.spks{ width:960px; margin: 0px auto; margin-top: 80px;}
.sprow{ display: flex; flex-direction: column; text-align: center; align-items:center; padding-bottom: 20px;}
.spks .tit{font-weight: bold; width: 100%; text-align: center; font-size: 32px; line-height: 46px; color: #fff !important;border: 0; margin-bottom: 40px;}
.spks .img{ }
.spks .ti1{ font-weight: bold; color: #e2e66d; font-size: 1.1em;}
.spks .ti2{ font-weight: 500}
.spks p{ font-weight: 400; font-family: Microsoft JhengHei; font-size: 15px; line-height: 22px;}

.main{width: 100%; font-family: "Noto Sans Tc";}
.inner{ }
.kv{ background: #d6eacf}
.cont-wrap{padding-bottom: 100px;}
.agenda{ color: #fff; width: 100%; display: none}
.agenda .info{ width: 800px; margin: 0 auto; margin-top: 0px;}
.agenda .info p{ margin-bottom: 20px;}
.agenda table{width: 800px; margin: 0 auto; margin-top: 20px;  margin-bottom:30px;
/*    background: #737488*/
}

.agenda .spks{ display:none}
.agenda h3{ font-size:22px; font-weight:bold; color:#4c623b; font-family:"Noto Sans Tc"; margin-bottom:30px;}
.agenda li{ color:#666; list-style-type: disc;margin-left:30px;}
.agenda .tips{width: 800px; margin: 0 auto; margin-top: 0px; color:#597c39; margin-bottom:20px; text-align:center; padding-top:80px; font-weight:bold; font-size:36px;}
.agenda table tr{}

.agenda table tr td{ border-bottom: 2px solid #0b6e41; padding: 8px; color: #666}
.agenda table tr td:first-child{ width: 200px; text-align: left; color: #0b6e41; vertical-align: middle}
.agenda table .tit{ font-weight: bold; width: 100%; text-align: center; font-size: 24px; line-height: 46px; border: 0}
.agenda table .title{ color:#fff;}
.agenda table .title td{ background: #0b6e41; font-weight: bold; color: #fff !important}
.agenda .ti{ }
.agenda table.fst td:first-child{ text-align: left; padding-left: 50px; box-sizing: border-box}
.agenda p, .register .note{ color:#666;}

.tab{ width: 800px; text-align: center;position: relative;  margin: 0 auto}
.tab a{ width: 49%; color: #597c39;padding: 10px 20px;  border-top-left-radius: 5px; border-top-right-radius: 5px; line-height: 46px; display: inline-block; box-sizing: border-box; float: left; border-bottom: 2px solid #fff; }
.tab a.active{ border: 2px solid #333;border-bottom: 0;color: #4c623b}
.tab a:hover{ color: #4c623b}

.register{ width: 100%; display: inline-block;  }
.register .note{ width: 800px; margin: 0 auto; color: #fff; position: relative; top:50px; display:none;}
.register .form{ width: 800px; margin: 0 auto; color: #4c623b; margin-top: 80px;}
.register .ti{font-family: 'Arial'; font-weight: bold}
.register .row{ width: 100%; display: inline-block; margin-bottom: 20px;}
.register .row span{ display:block;}
.register input{ background: #0b6e41; color: #fff; border: 0; font-size: 17px; padding: 10px; border-radius: 5px }
.register textarea{ width: 90%; background: #0b6e41; color: #fff; border: 0; font-size: 17px; padding: 10px; border-radius: 5px }
.register input::placeholder{color: #ddd}
.register select{background: #0b6e41; color: #fff; border: 0; font-size: 17px; padding: 10px; border-radius: 5px}
.register input[type="text"] {width: 90%;}
.register input[type="radio"] {border: 0; margin-right: 10px; display: inline-block;}
.register label{ font-family: 'Arial'}
.register label.sml-btm{ color: #666;font-size: 13px; display: block}
.register .col-6{ width: 49.5%; display: inline-block}
.register .col-3{ width: 24.5%; display: inline-block}
.register .col-4{ width: 33.2%; display: inline-block}
.register .sec{ display: inline-block; padding: 0 10px;}
.register .sec.first{padding-left: 0;}
.text-center{ text-align: center}
.btns{ background: #4c623b; padding: 10px 50px; border-radius: 5px; font-weight: bold; color: #fff; border: 0; display: inline-block; cursor: pointer}
.register input{ box-sizing: border-box}
.work .id{ margin-left: 10px;}

.pdl-20{ padding-left: 20px;}
.pdl-20 span{ font-weight: normal; color: #fff; margin-bottom: 8px; display: inline-block}
.spk{ color: #e2e66d}
.nrtxt,.nrtxt span{ font-style: normal; font-weight: normal !important; color: #fff;}

footer{ width: 100%; background: #fff; padding: 30px 0}
footer .container{ width: 100%; margin: 0 auto; display: flex;flex-direction:column; align-items:center;justify-content:center; padding: 0 5%; box-sizing: border-box;}
footer .container >div{display: flex;align-items:center;justify-content: center;flex-wrap: wrap}
footer .container >div.fi{ margin-right: 25px; margin-bottom: 20px;}

footer .container span{ margin-right: 10px;}
.citizenship .sec{ padding: 0; margin-right: 10px; margin-left: 0;}

.no-tw{ display: none;}
.slick-prev:before, .slick-next:before{ font-size: 30px !important}

/*****************RWD************************/
.mb{ display: none;}
.box{ display: none;}
.mbkv{ display: none; background: #d6eacf}


@media only screen and (max-width: 1400px) {
    .cont-wrap{ }
    
}

@media only screen and (max-width: 1000px) {
    
    .cont-wrap{ }
   
    
}
/*tablet*/
@media only screen and (max-width: 800px) {
    .kv{ display: none;}
    .mbkv{display: block}
    .cont-wrap{ padding-top: 0;}
    .tab{ width: 100%; top: 0px; z-index: 2}
    .agenda {margin-top: 0;}
    .agenda table,.agenda .info{ width: 96%; margin: 0 auto; margin-top: 20px;}
    .register .form{padding-top: 20px; width: 96%; margin: 0 auto; }
    .register .note{ width: 100%; padding: 0 2%;box-sizing: border-box;z-index:1; top: 30px;}
    footer .container{ width: 100%; box-sizing: border-box; display: flex; flex-direction: column;
align-items: center}
    footer .container >div{ padding-left: 20px;}
    .spks{ width: 100%;}
    
    .agenda .tips{ width:100%;}
    
}
   
@media only screen and (max-width:500px) {
    .tab a{ padding: 5px 7px; width: 49.8%; font-size: 16px; line-height: 38px}
    .agenda .info p,.register .note{ font-size: 15px; line-height: 26px;}
    .agenda table tr td:first-child{ width: 120px; ;}
    .agenda table tr td{font-size: 15px; line-height: 26px;}
    .agenda table .tit{ font-size: 25px;}
    .agenda table.fst td:first-child{ padding-left: 20px;}
    
    .register .sec{ padding: 0; margin-right: 5px; float: left;}
    .work .id{ margin-left: 5px;}
    .register .col-3{ width: 24.2%; display: inline-block; }
    .register .col-4{ width: 32.2%; display: inline-block}
    .register .col-6{ width: 49%; display: inline-block}
    .register .form{font-size: 15px}
    .register input[type="text"]{ width: 95%}
    
    .register .title .sec{ min-width: 64px; padding:0 3px}
    .register .work .sec{ min-width: 90px;}
    
    footer .container span{ width: 100%;}
    footer .container >div{flex-direction:column; width: 100%;; text-align: center; padding-left: 0;}
    footer .container >div.fi{ margin-bottom: 20px; margin-right: 0;}
    footer .container >div{ margin-top: 10px;}
    footer .container >div img{ max-width: 250px;}
    
    .slick-next{ right: 15px !important }
    .slick-prev{ left: 15px !important}
    .spks .intro{ padding: 0 20px;}
    .spks .ti1{ font-size: 17px;}
    .spks .ti2{ font-size: 15px;}
    .spks p{ font-size: 15px;}
    
}


/* 
green: #3FAF82

*/

.box {
  position: absolute;
  top: 0px;
  right:0px;
/*  transform: translate(-50%, -50%);*/
  width:66px;
  height: 65px;
  background: var(--blue);
/*  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);
  }
}