/* ==========
== RWD配置 ==
========== */
html{font-size: 12px;}
@media(max-width: 318px){
  html{display: none;}
}
@media (min-width: 576px) {
  html{font-size: 13.25px;}
}
@media (min-width: 768px) {
  html{font-size: 14.5px;}
}
@media (min-width: 992px) {
  html{font-size: 15.75px;}
}
@media (min-width: 1200px) {
  .container {max-width: 1200px;}
  html{font-size: 17px;}
}

/* ===========
== 主要顏色 ==
=========== */
.c_blue {color: #1aa0c7!important;}
.c_teal {color: #00aba6!important;}
.c_pink {color: #ea6188!important;}
.c_rose {color: #d6295a!important;}
.c_orange {color: #ec6d34!important;}
.c_yellow {color: #ffb502!important;}

.bc_blue {border-color: #1aa0c7!important;}
.bc_teal {border-color: #00aba6!important;}
.bc_pink {border-color: #ea6188!important;}
.bc_rose {border-color: #d6295a!important;}
.bc_orange {border-color: #ec6d34!important;}
.bc_yellow {border-color: #ffb502!important;}

.bgc_blue {background-color: #1aa0c7!important;}
.bgc_teal {background-color: #00aba6!important;}
.bgc_pink {background-color: #ea6188!important;}
.bgc_rose {background-color: #d6295a!important;}
.bgc_orange {background-color: #ec6d34!important;}
.bgc_yellow {background-color: #ffb502!important;}


/* ===========================================
== position 常用語法 (數字鍵盤1-9表示其位置) ==
============================================ */
.relative{position:relative!important;}
.absolute{position:absolute!important;}
.fixed{position:fixed!important;}
.abs-1{position:absolute!important;left:0;bottom:0}
.abs-2{position:absolute!important;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.abs-3{position:absolute!important;right:0;bottom:0}
.abs-4{position:absolute!important;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.abs-5{position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.abs-6{position:absolute!important;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.abs-7{position:absolute!important;left:0;top:0}
.abs-8{position:absolute!important;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.abs-9{position:absolute!important;right:0;top:0}
.abs-full{position:absolute!important;left:0;right:0;top:0;bottom:0}
.fixed-1{position:fixed!important;left:0;bottom:0}
.fixed-2{position:fixed!important;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.fixed-3{position:fixed!important;right:0;bottom:0}
.fixed-4{position:fixed!important;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.fixed-5{position:fixed!important;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.fixed-6{position:fixed!important;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.fixed-7{position:fixed!important;left:0;top:0}
.fixed-8{position:fixed!important;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.fixed-9{position:fixed!important;right:0;top:0}
.fixed-full{position:fixed!important;left:0;right:0;top:0;bottom:0}



/* =========
== button ==
========= */

.btn{display:inline-block;cursor:pointer;text-align:center;font-weight:bold;border:none;outline:none;-webkit-transition:color .5s;-o-transition:color .5s;transition:color .5s;position:relative;text-indent:0px;overflow:hidden;text-decoration:none;}

.btn_hover span{position:relative}
.btn_hover:hover{color:#fff;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}
.btn_hover:hover:after{-webkit-transform:translate(15px, -50%);-ms-transform:translate(15px, -50%);transform:translate(15px, -50%)}
.btn_hover:hover:before{-webkit-transform:scale(1) translate(-50%, -50%);-ms-transform:scale(1) translate(-50%, -50%);transform:scale(1) translate(-50%, -50%)}

.btn_blue{background-color:transparent; border:1px #1aa0c7 solid; color:#1aa0c7;}
.btn_blue:before{content:'';width:500px;height:500px;background-color:#42A5E9;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}

.btn_teal{background-color:transparent; border:1px #00aba6 solid; color:#00aba6;}
.btn_teal:before{content:'';width:500px;height:500px;background-color:#00aba6;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}

.btn_pink{background-color:transparent; border:1px #ea6188 solid; color:#ea6188;}
.btn_pink:before{content:'';width:500px;height:500px;background-color:#ea6188;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}

.btn_rose{background-color:transparent; border:1px #d6295a solid; color:#d6295a;}
.btn_rose:before{content:'';width:500px;height:500px;background-color:#d6295a;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}

.btn_orange{background-color:transparent; border:1px #ec6d34 solid; color:#ec6d34;}
.btn_orange:before{content:'';width:500px;height:500px;background-color:#ec6d34;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}

.btn_yellow{background-color:transparent; border:1px #ffb502 solid; color:#ffb502;}
.btn_yellow:before{content:'';width:500px;height:500px;background-color:#ffb502;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}

.btn_sm{ width:8rem; line-height: 2rem; font-size:1rem;}
.btn_md{ width:13rem; line-height: 3rem; font-size:1.15rem;}
.btn_lg{ width:16rem; line-height: 3.75rem; font-size:1.25rem;}


/* ======
== tag ==
========= */
.tag{ display:inline-block;text-align:center;}

.tag_1, .tag_orange{ border:1px #ec6d34 solid; color:#ec6d34; }
.tag_2, .tag_blue{ border:1px #1aa0c7 solid; color:#1aa0c7; }
.tag_3, .tag_pink{ border:1px #ea6188 solid; color:#ea6188; }

.tag_md{ width: 6rem; line-height: 1.5rem; font-size:0.9rem; }

/* =======
== 排版 ==
======= */
.row-f > * { float: left;}
.row-f:before, .row-f:after {content: " "; display: table; clear: both;}
.container{ max-width: 1200px; margin: auto; }
.block_padding{ padding: 1.25rem;}
.block_padding_x{ padding-left: 1.25rem; padding-right: 1.25rem;}
.block_padding_y{ padding-top: 1.25rem; padding-bottom: 1.25rem;}
.flex-centers{ display:inline-flex; align-items: center; justify-content: center; }


/* 標題(大) */
.title_large{ position: relative; background: url(../images/common/top_bg.jpg) no-repeat left center; background-size: cover; padding: 2rem 0; text-align: center; color: #ffffff; font-weight: bold; }
.title_large__text { font-size: 1.35rem; }
.title_large__text > span:nth-child(1){ display: inline-block; font-size: 2em; transform: skewX(-10deg); text-shadow: 1px 0; letter-spacing: 1px; }
.title_large__text > span:nth-child(2){ display: inline-block; font-size: 1em; margin-left: 0.5rem; }


/* 標題含有箭頭 */
.title_with_arrow{ display:inline-block; position: relative; color: #1AA0C7; font-weight: bold; font-size: 1.4rem; border-bottom: 2px solid #1AA0C7; padding: 0.5rem 2.5rem 0.5rem 0.75rem;}
.title_with_arrow::after{ content:""; position: absolute; bottom:-2px; right:0; width: 2rem; border-bottom: 2px solid #1AA0C7; transform-origin: 100%; transform: rotate(45deg); }



/* 標題含有more */
.title_with_more_arrow{ position: relative; color: #1AA0C7; font-weight: bold; font-size: 0.9rem; border-bottom: 1px solid #1AA0C7; padding: 0.6rem 1rem; }
.title_with_more_arrow__text > span:nth-child(1){ display: inline-block; font-size: 2.4em; transform: skewX(-10deg); }
.title_with_more_arrow__text > span:nth-child(2){ display: inline-block; font-size: 1.3em; margin-left: 0.75rem; }
.title_with_more_arrow__more{ position: absolute; bottom:0; right:0; color: #1AA0C7; padding: 0.4rem 2rem; font-size: 0.9em; cursor: pointer; user-select: none; -ms-user-select: none; -webkit-user-select: none; }
.title_with_more_arrow__more::after{ content:""; position: absolute; bottom:-1px; right:0; width: 2rem; border-bottom: 1px solid #1AA0C7; transform-origin: 100%; transform: rotate(45deg); }

@media (min-width: 768px) {
  .title_with_more_arrow__more{ padding: 0.6rem 2rem; }
}


/* news_list & history */
.news_list{ padding: 15px;}
.news_list_context{ width: 1200px; min-height: 800px; padding-bottom: 100px; margin: auto; }
.news_list__padding { position: relative; padding: 1rem 1rem; border-bottom: 1px #dddddd dashed; }
.news_list__row { display: flex; flex-wrap: wrap; position: relative; align-items: center; }

.news_list__date { color: #9d9d9d; font-weight: bold; order: 1; }
.news_list__category { margin-top: 0.6rem; order: 3; }
.news_list__subject { color:#111; display: block; position: relative; text-decoration:none; line-height: 1.3; margin-top: 0.6rem; width: 100%; padding-right:0; order: 2; }
.news_list__more { position:absolute; right:0; bottom:5%; transform: translateY(50%); font-size: 1rem; font-weight: bold; background-color: #f0f0f0; padding: 1rem; }
.news_list__more > span:nth-child(1) { display: inline-block; vertical-align: middle; color:#1aa0c7; font-size: 0.8em; transform: skewX(-12deg); letter-spacing: 1px; }
.news_list__more > span:nth-child(2) { display: inline-block; vertical-align: middle; color:#ffffff; font-size: 1.4em; width: 1.4em; line-height:1.4em; background-color: #1aa0c7; border-radius: 100px; text-align: center; margin-left:0.1em; }

@media (min-width: 768px) {
  .news_list__padding { padding: 2rem 2rem; }
  .news_list__row { flex-wrap: nowrap; }
  .news_list__row > *:not(:last-child) { margin-right: 1.5rem; }
  .news_list__title{ padding: 1rem 2rem; font-size: 1.3rem; }
  .news_list__category { margin-top: 0; order: 1; }
  .news_list__subject { margin-top: 0; padding-right: 7rem; width: unset; flex-grow: 1; order: 1; }
  .news_list__more { bottom:46%; padding: 1rem 2rem;}
}


/*
.bg-aspect-ratio-5-1{ width: 100%; height: calc(375px/5*1); background: no-repeat center center; background-size: cover; }
@media (min-width: 576px) {
    .bg-aspect-ratio-5-1{ height: calc(576px/5*1);}
}
@media (min-width: 768px) {
    .bg-aspect-ratio-5-1{ height: calc(768px/5*1);}
}
@media (min-width: 992px) {
    .bg-aspect-ratio-5-1{ height: calc(992px/5*1);}
}
@media (min-width: 1200px) {
    .bg-aspect-ratio-5-1{ height: calc(1200px/5*1);}
}
*/


/* ====== top_banner ====== */
.top_banner.wap{ display: block; width: 100%;}
.top_banner.pc{ display: none; height: calc(1200px/16*9); width: 100%; background: no-repeat center center; background-size: cover; }

@media (min-width: 1200px) {
  .top_banner.wap{ display: none;}
  .top_banner.pc{ display: block;}
}

#wrapper { display:none; width:100%; position:relative; overflow:hidden;}

.lds-roller { display: inline-block; width: 66px; height: 66px;}
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px;}
.lds-roller div:after { content: " "; display: block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: -3px 0 0 -3px;}
.lds-roller2 div:after { background: #FFF !important;}
.lds-roller div:nth-child(1) { animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after { top: 50px; left: 50px;}
.lds-roller div:nth-child(2) { animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after { top: 54px; left: 45px;}
.lds-roller div:nth-child(3) { animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after { top: 57px; left: 39px;}
.lds-roller div:nth-child(4) { animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after { top: 58px; left: 32px;}
.lds-roller div:nth-child(5) { animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after { top: 57px; left: 25px;}
.lds-roller div:nth-child(6) { animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after { top: 54px; left: 19px;}
.lds-roller div:nth-child(7) { animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after { top: 50px; left: 14px;}
.lds-roller div:nth-child(8) { animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after { top: 45px; left: 10px;}
@keyframes lds-roller {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader { font-size: 90px; /* text-indent: -9999em;*/ overflow: hidden; width: 1em; height: 1em; border-radius: 50%; margin: 72px auto; position: relative; margin-top:-0.5em; top:50%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: tada 1.7s infinite ease; animation: tada 1.7s infinite ease;}
.loader_logo { position: absolute; left: 50%; top: 45%; text-align: center; transform: translate(-50%, -50%);}
.loader_logo p { font-size:18px; font-weight:bolder; color:#000;}
.loaderimg {  /*-webkit-animation: tada 1.7s infinite ease; animation: tada 1.7s infinite ease; width:91%; */ position: relative; left: 0px;}
.loaderimg2 { position: absolute; left: 126px; top: 70px; width: 30%;}	
  
#loader {position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; background-color: red; color: #fff;}
#loader2 {width:100%; height:100%; /* background: url(../images/common/bg.jpg) repeat;*/ background-color:#000; opacity:0.8;position:fixed; height:100%; z-index:9999; display:none; top:0px;color:#FFF;}
#myProgress { position: relative; top: 5px;}
#myBar { width: 0%; height: 30px; background-color:#000; text-align: center; line-height: 30px; color:#ffffff; font-size:22px;}

/* claer */
.clearfix { clear:both;}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 

.p14{font-size:14px;}
.p_m_0{ padding:0 0 0 0; margin:0 0 0 0;}

.a_act{color:#006d8d;}
.kv{width:100%; position:relative;}
.kv img{ position: relative; width: 100%; height: auto;}

/* 
.story_more{ width:260px; height:60px; margin-left:-130px; left:50%; position:relative; margin-top:30px; border:1px #1aa0c7 solid; }
.story_more{background-color:;display:inline-block;cursor:pointer;text-align:center;font-size:20px;font-weight:bold;-webkit-transition:.5s;-o-transition:.5s;transition:.5s;position:relative;text-indent:0px;overflow:hidden;line-height:2.9; text-decoration:none;}
.story_more:before{content:'';width:500px;height:500px;background-color:#42A5E9;position:absolute;border-radius:50%;-webkit-transform:scale(0) translate(-50%, -50%);-ms-transform:scale(0) translate(-50%, -50%);transform:scale(0) translate(-50%, -50%);-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;transform-origin:0% 0%;top:50%;left:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.story_more span{position:relative}
.story_more:hover{color:#fff;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}
.story_more:hover:after{-webkit-transform:translate(15px, -50%);-ms-transform:translate(15px, -50%);transform:translate(15px, -50%)}
.story_more:hover:before{-webkit-transform:scale(1) translate(-50%, -50%);-ms-transform:scale(1) translate(-50%, -50%);transform:scale(1) translate(-50%, -50%)}
*/

.indx_tip1{position:absolute; top:50px; right:50px;}

.news_top{ position:relative; width:100%; height:147px; background-color:#0e8ac7; text-align:center; overflow:hidden;}
.top_bg{ position:absolute; left:0px; width:100%;  min-height:147px;}
.news_top_title{position:absolute; width:261px; margin-left:-130px; left:50%; top:60px;}
.story_top_title{position:absolute; width:344px; margin-left:-172px; left:50%; top:60px;}
.member_top_title{position:absolute; width:335px; margin-left:-167px; left:50%; top:60px;}

.news_list_pg{position:relative; width:1200px; margin-left:-600px; left:50%; background-color:#f0f0f0; margin-top:50px; margin-bottom:150px;}
.news_list_ct_r{float:left; margin-right: 20px; width:260px;}
.news_list_ct_r_date{ width:100px;float:left;margin-right: 45px;font-size:19px; color:#818181;line-height:0px; letter-spacing: 3px; }
.news_list_ct_r_p{ position:relative; top:-6px;}
.news_list_ct_l{float:left; width:750px; padding-top: 5px;}
.news_list_ct_l a{font-size:19px; color:#818181; line-height:30px; text-decoration:none; display:block;}
.mg22{ margin-bottom:22px;}

.news_more{ position:absolute; right:0px; height:31px; margin-top:-15px; top:50%;}
.news_tip{ margin-left:0px; margin-bottom:20px;}
.page-box { padding:3px; text-align:center;  display:block; margin:6px auto; position:relative; top:30px; }
.page-box a { border:#eee 1px solid; padding:2px 6px 2px 6px; margin:2px; color:#646464; text-decoration:none; }
.news_list_ct_l a:hover{color: #1aa0c7;}
.current {	border:#eee 1px solid; padding:2px 6px 2px 6px; margin:2px; color:#f26b23; font-weight:bold;}
.news_ct{ line-height:28px; }