* {margin: 0; padding: 0;/* box-sizing: border-box; */}
body{width: 100%; height: 100%; font-family: '微軟正黑體', 'MS UI Gothic','Noto Sans TC',Arial, Helvetica, sans-serif; font-size: 12px; }
a,a:hover,a:active,a:visited {display: block; text-decoration: none;}
table{width: 100%; border-collapse: collapse; border-spacing: 0;}
table,tr,th,td{margin: 0; padding: 0;}
img{margin: 0; padding: 0; display: block;}

.main{width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; color:#333333; padding-top: 80px; font-size: 12px; background: #acd0f1 url("../images/w_bg.jpg") center top no-repeat; background-size: cover;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}
.darkblue {color: #005bab;}
.babyblue {color: #009fe8;}
.blue{color: #007fe0; font-weight: bold;}
.orange{color: #eb6100;}
.darkorange{color: #cf2a2a;}
.highlight{color: #ef5c58; font-weight: bold;}

.main_container{width: 100%; max-width: 1200px; margin: 0 auto;}
.KV{width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; text-align: center;}
.KV .tit{width: 44%; height: 0; padding-bottom: 4.5045%; margin: 4em auto 2em; background: url("../images/tit.png") center top no-repeat; background-size: 100% auto;
  -webkit-animation: slideInDown 1s ease-in-out;
     -moz-animation: slideInDown 1s ease-in-out; 
      -ms-animation: slideInDown 1s ease-in-out;
       -o-animation: slideInDown 1s ease-in-out;
          animation: slideInDown 1s ease-in-out;
}
.KV .pic{width: 36%; height: 0; padding-bottom: 24.2%; margin: 2em auto; background: url("../images/kvPic.png") center top no-repeat; background-size: 100% auto;}
.KV .date{display: inline-block; font-size: 18px; box-sizing: border-box; color: #005bab; border-radius: 10px; border: 1px solid #005bab; padding: 6px 25px;}
.LINK{display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 1.8em auto; font-size: 20px;}
.LINK .exchange_btn{margin: .5em .35em; 
  -webkit-animation: fadeIn 1.5s ease-in-out;
     -moz-animation: fadeIn 1.5s ease-in-out; 
      -ms-animation: fadeIn 1.5s ease-in-out;
       -o-animation: fadeIn 1.5s ease-in-out;
          animation: fadeIn 1.5s ease-in-out;
}
.LINK .exchange_btn a{display: block; width: 230px; line-height: 1; padding: 1em 0; color: #ffffff; font-weight: bold; text-align: center; text-decoration: none; border-radius: 50px; transition: .3s;}
.LINK .exchange_btn.btn_p a{background-color: #e8546b; box-shadow: 0 6px #c52b43;}
.LINK .exchange_btn.btn_p a:hover{transform: translate(0,6px);box-shadow: 0 0 #c52b43;}
.LINK .exchange_btn.btn_b a{background-color: #4783db; box-shadow: 0 6px #2762b8;}
.LINK .exchange_btn.btn_b a:hover{transform: translate(0,6px);box-shadow: 0 0 #2762b8;}
.LINK .exchange_btn.btn_o a{background-color: #f6a00e; box-shadow: 0 6px #db8100;}
.LINK .exchange_btn.btn_o a:hover{transform: translate(0,6px);box-shadow: 0 0 #db8100;}
.RELATED{text-align: center; font-size: 22px; font-weight: bold; padding: 1em 0 3em;}
.RELATED p{color: #333333; line-height: 1.5;}
.RELATED .web_link a{display:inline-block; color: #2872de; line-height: 2; text-decoration: underline; margin: 0 .5em;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
.main{padding-top: 76px;}
.KV .tit{width: 52%; padding-bottom: 5.5%;}
.KV .pic{width: 48%; padding-bottom: 32.33%;}
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width:768px) {
.main{width: 100%; max-width: 768px; padding-top: 58px; background: #acd0f1 url("../images/m_bg.jpg") center top no-repeat; background-size: 100% auto;}
.KV .tit{width: 84%; padding-bottom: 9%; margin: 10vw auto 5vw;}
.KV .pic{width: 74%; padding-bottom: 49.83932%; margin: 2em auto;}
.KV .date{font-size: 3vw; padding: 2vw 5vw;}
.LINK{flex-direction: column; font-size: 20px;}
.LINK .exchange_btn{margin: 2vw;}
.LINK .exchange_btn a{width: 60vw;}
.RELATED p{line-height: 1;}
}
@media screen and (max-width:450px) {
.KV .date{font-size: 3.5vw;}
.LINK{flex-direction: column;}
.LINK .exchange_btn a{font-size: 5vw; line-height: .8;}
.LINK .exchange_btn.btn_p a{box-shadow: 0 4px #c52b43;}
.LINK .exchange_btn.btn_p a:hover{transform: translate(0,4px);}
.LINK .exchange_btn.btn_b a{box-shadow: 0 4px #2762b8;}
.LINK .exchange_btn.btn_b a:hover{transform: translate(0,4px);}
.LINK .exchange_btn.btn_o a{box-shadow: 0 4px #db8100;}
.LINK .exchange_btn.btn_o a:hover{transform: translate(0,4px);}
.RELATED{font-size: 5vw; padding: 0 0 10vw;}
}