@charset "UTF-8";
/*Noto Sans TC
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap&subset=chinese-traditional');*/
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,button,a{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: baseline;
	font: inherit;
	line-height: 30px;
	/* letter-spacing: 0.7px; */
	text-decoration: none;
	border: 0;
}

html, body { height: 100%; }
body {
	color: #434343;
	background:#fff; 
	font: 16px/30px "微軟正黑體",'Helvetica Neue',sans-serif;/*"Noto Sans TC",*/
	font-weight: bolder;
}

input, button, textarea, select, optgroup, option, a { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: none;}

a { color:#434343; text-decoration:none; word-wrap:break-word; }
button{	background: none; }

h1, h2, h3, h4, h5, h6{ font-weight: bold; font-size:1rem; line-height: 130%; }

ol, ul { list-style: none; }

table {width:auto; border-collapse: collapse; border-spacing: 0; }
/*reset end*/


/*Input*/
input[type="text"],
input[type="password"] { width: 100%; min-width: 100px; padding: 2px 10px; height: 40px; line-height: 36px; }
input[type=text]::-ms-clear,
input[type=password]::-ms-clear { display: none; }
::-webkit-input-placeholder { color: #a0a0a0; }
::-moz-placeholder { color: #a0a0a0; }
:-ms-input-placeholder { color: #a0a0a0; }
:-moz-placeholder { color: #a0a0a0; }

/*select*/
select { width: 100%; min-width: 60px; height: 40px; line-height: 36px; padding: 0 35px 0 10px; vertical-align:middle; font-family: "微軟正黑體",sans-serif; color: #434343; 
 appearance:none; -moz-appearance:none; -webkit-appearance:none; background-color: transparent;
 background-image:url(../images/icon_arror_01.png); background-repeat: no-repeat; background-size: auto 12px; background-position: right 6px center; border: none; }
select:focus { outline: none; }
select::-ms-expand { display: none; }
select option { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
select option:hover { color: #fff; background-color: #666; }
select option:focus { border:0px; outline: 0 !important; -webkit-appearance: none; }
select.inline { display: inline-block; width: 200px; height: 36px; vertical-align: middle; border-bottom: solid 1px #d2d2d2; }
.select_color.select_color_gray { color: #a0a0a0; }
.select_color option { color: #434343; }

/*checkbox*/
input[type="checkbox"] { display:none; }
input[type="checkbox"] + label { display: inline-flex; align-items: flex-start; cursor: pointer; /*vertical-align:middle;*/ }
input[type="checkbox"] + label span { vertical-align: baseline;}
input[type="checkbox"] + label .icon { flex: 0 0 auto; position: relative; display:inline-block; width:1em; height:1em; line-height: 30px; top: 5px; margin: 0 4px 0 0; background:#fff; background-size:100%; border: solid 1px #a2a8b4; border-radius: 4px; }
input[type="checkbox"]:checked + label .icon { background: #333 url(../images/icon_check_01.png) center no-repeat; background-size: auto 8px; }
input[type="checkbox"]:disabled + label span { color: #a0a0a0; }
input[type="checkbox"] + label.check_green { color: #12c38c; }
input[type="checkbox"] + label.check_green .icon { border: solid 1px #12c38c; }
input[type="checkbox"]:checked + label.check_green .icon { background: url(../images/icon_check_02.png) center no-repeat; background-size: auto 10px; }
/*radio*/
input[type="radio"] { display:none;}
input[type="radio"] + label { display: flex; }
input[type="radio"] + label span { cursor: pointer; vertical-align:middle; }
input[type="radio"] + label .icon { flex: 0 0 auto; display:inline-block; position: relative; width: 20px; height: 20px; box-sizing: border-box; cursor: pointer; top: 5px; margin: 0 5px 0 0; background: #fff; background-size:15px; border: solid 1px #a2a8b4; border-radius: 0.7em; }
input[type="radio"]:checked + label .icon::after { content: ""; display: block; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #333; border-radius: 50%; }
/*radio_方形icon
input[type="radio"] + label .icon { flex: 0 0 auto; position: relative; display:inline-block; width:1em; height:1em; vertical-align: middle; margin: 7px 5px 7px 0; background:#fff; background-size:100%; border: solid 1px #a2a8b4; border-radius: 4px; }
input[type="radio"]:checked + label .icon::after { content: ""; display: block; position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; background: #a2a8b4; border-radius: 2px; }*/

input[type="checkbox"] + label.inline,
input[type="radio"] + label.inline { display: inline-block; margin-right: 20px; }
input[type="checkbox"] + label.inline .icon { top: 2px; }
input[type="radio"] + label.inline .icon { top: 0; }

/*
textarea { width: 100%; min-height: 120px; padding: 10px 10px; border: solid 1px #ddd; overflow-y: auto; resize: none; }*/



.tL { text-align: left; }
.tR { text-align: right; }
.tC { text-align: center; }
.vM { vertical-align: middle; }
.tM { font-weight: bold; }
.tB { font-weight: bolder; font-size: 110%;}
.tLine { border-bottom: solid 1px; }

.fL { float:left; }
.fR { float:right; }

.clr {clear:both;}

.web { display:block; }
.mobile { display:none; }

.tSmall { font-size: 14px; line-height: 1.5rem; }
.tBig { font-size: 18px; }
.tBigger { font-size: 21px; }
.tBiggest { font-size: 24px; }
.botM0 { margin-bottom: 0; }
.botM1 { margin-bottom: 10px; }
.botM2 { margin-bottom: 20px; }
.botM3 { margin-bottom: 40px; }

.imgbox {  }
.imgbox img { display: block; max-width: 100%; }
.imgbox.full img { width: 100%; }

.color_green { color: #009e96; }
.color_peach { color: #e61b64; }
.color_bluedark { color: #263348; }
.color_yellow { color: #ffa200; }
.color_gray { color: #898989; }
.color_black { color: #1b1b1b; }

/*連結外連icon*/
.linkIcon { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: middle; background: url(../images/icon_link_01.png) center no-repeat; background-size: 100%; }

/*-----------------頁面-----------------*/
.wrapper { height: 100vh; min-height: 100vh; position: relative; }
.pagesize { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.container {  }

.nav {}

/*header*/
.header { position: relative; z-index: 1000; width: 100%; background: #fff; border-bottom: solid 4px #f19ec2; }
.header .pagesize {  }
.header_inner { display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 0; }
.header_logo {  }
.header_logo a { display: block; width: 440px; height: 42px; background: url(../images/img_logo_01.png) left center no-repeat; background-size: auto 100%; }
.header_menu_nav { display: inline-block; }
.header_menu_nav a { display: inline-block; margin-right: 30px; font-size: 18px; line-height: 24px; vertical-align: text-bottom; }
.header_menu_nav .logout { color: #e61b64; }
.header_btn { display: inline-block; width: 24px; height: 24px; vertical-align: text-bottom; }
.header_btn_search { display: inline-block; background: url(../images/btn_header_01.png) center no-repeat; background-size: 21px; }
.header_btn_menu { display: none; /*background: url(../images/btn_header_02.png) center no-repeat; background-size: 21px;*/ }
/*第二層選單*/
.headerNav { /*display: none;*/ position: absolute; top: calc(100% + 4px); left: 0; width: 100%; box-shadow: 0 10px 8px 0 rgba(0,0,0,0.1); }
.open_headerNav .headerNav { /*display: block;*/ }
.headerNav_area { display: none; background: rgba(255,255,255,0.95); }
.headerNav_inner { display: flex; align-items: stretch; padding: 20px 0 0; }
.headerNav_section { flex: 1 1 auto; min-height: 80px; margin-bottom: 20px; padding: 0 20px; /*border-right: solid 1px #c9c9c9;*/ }
/*.headerNav_section:nth-last-child(1) { border: none; }*/
.headerNav_box { margin-bottom: 10px; }
.headerNav_title { font-size: 18px; font-weight: 700; color: #101010; }
.headerNav_item { padding-left: 10px; }
.headerNav_link {  }
.headerNav_link.point li a { font-size: 14px; line-height: 20px; }
.headerNav_link.point li::before { top: 12px; }
/*研究報告*/
.headerNav_report { flex-wrap: wrap; }
.headerNav_report .headerNav_section { flex: 0 0 20%; }

/*小網menu*/
.mobileMenu { display: none; }

/*popup_search*/
.popup_search { display: none; position: fixed; top: 88px; left: 0; height: 0; overflow: hidden; }
.popup_search.open { /*display: block;*/ z-index: 999; width: 100%; height: auto; background: #fff; }
.popup_search.open ~ .page { position: fixed; width: 100vw; }
.popup_search.open ~ .page::after { content: ""; position: fixed; top: 88px; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); }
.popup_search_inner { display: flex; padding: 20px 0; }
.popup_search_inner input { flex: 1 1 auto; margin-right: 15px; padding: 0; border-bottom: solid 1px #ccc; }
.popup_search_inner .btn { flex: 0 0 auto; }
.popup_search_inner .btn a { padding: 0 20px; line-height: 40px; }


/*footer*/
.footer {}
/*footer_宣告*/
.footer_copyright { padding: 20px; background: #f0f0f0; }
.footer_copyright p { text-align: center; font-size: 15px; line-height: 130%; color: #626262; }
.footer_nav { display: flex; justify-content: center; margin-bottom: 20px; }
.footer_nav li { flex: 0 0 auto; padding: 0 20px; position: relative; }
.footer_nav a { display: block; text-align: center; line-height: 15px; font-size: 15px; font-weight: bolder; color: #009e96; }
.footer_nav li::after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 15px; background: #c9c9c9; }
.footer_nav li:nth-last-child(1)::after { content: none; }
/*footer_資訊*/
.footer_info { padding: 25px 0; line-height: 150%; text-align: center; color: #fff; background: #e988b2; border-bottom: solid 10px #e61b64; }
.footer_info span { display: inline-block; margin: 0 4px; }

/*ul*/
ul.point {  }
ul.point li { position: relative; padding-left: 20px; line-height: 24px; }
ul.point li::before { content: ""; position: absolute; top: 14px; left: 8px; display: block; width: 4px; height: 4px; background: #e61b64; border-radius: 2px; }
ul.point.point_bluedark li::before { background: #263348; }
.point.col2 { display: flex; justify-content: space-between; flex-wrap: wrap; }
.point.col2 li { flex: 0 0 auto; width: 50%; padding-right: 20px; }

/*btn*/
.btn { text-align: center; }
.btn a { display: inline-block; padding: 0 100px; line-height: 60px; text-align: center; font-size: 20px; color: #fff; background: #e61b64; }
.btn .btn_gray { background: #aaa; }
.btn_inline a { margin: 0 15px; }

/*btn_top*/
.btn_top { display: none; z-index: 3000; position: fixed; bottom: 180px; left: calc(50% + 640px); }
.btn_top a { display: block; width: 40px; height: 40px; padding-top: 10px; text-align: center; font-size: 14px; color: #009e96; background: #fff url(../images/icon_arror_08.png) center 7px no-repeat; background-size: auto 7px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); border-radius: 20px; }


/*mmenu*/
.mm-menu_offcanvas { width: 100%; max-width: 100%; }
.mm-menu_opened.mm-menu_offcanvas { z-index: 2; }
.mm-panels, .mm-panels>.mm-panel { background: #009e96; }
.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited { color: #fff; }
.mm-listitem::after { border-bottom-color: #ccc;  }


/*popup*/
.popup { display: none; }
.popup.open { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2000; }
.popup_area { position: relative; z-index: 2001; width: 600px; max-width: calc(100% - 20px); margin: 100px auto 40px; padding: 40px; line-height: 150%; color: #263348; background: #fff; border-radius: 10px; }
.popup_area.padding_small { padding: 20px; }
.popup_area.noRoundCorner { border-radius: 0; }
.popup_inner {  }
.popup_inner.narrow { padding: 0 40px; }
.popup_area .btn a { width: 100%; max-width: 210px; margin-bottom: 10px; padding: 0; }
.popup.open ~ .page { position: fixed; width: 100%; }
.popup_close { position: absolute; top: -30px; right: 5px; display: block; width: 20px; height: 20px; background: url(../images/popup_close_01.png) center no-repeat; background-size: auto 20px; }
.popup_title { margin-bottom: 30px; text-align: center; font-size: 24px; font-weight: bold; }
.popup_area_topTitle,
.popup_area_topTitle.padding_small { padding: 0; }
.popup_area_topTitle .popup_title { /*position: absolute; top: 0; left: 0;*/ width: 100%; margin: 0; padding: 15px; text-align: center; border-bottom: solid 1px #e61b64; }
.popup_area_topTitle .popup_inner { padding: 40px; }
.popup_area_topTitle .popup_inner.narrow { padding: 40px 80px; }

/*popup_loading*/
.loader,
.loader::before,
.loader::after {
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #009E96;
  font-size: 10px;
  margin: 0 auto;
  position: relative;
    top:50%;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader::before,
.loader::after {
  content: '';
  position: absolute;
  top: 0;
}
.loader::before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader::after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% { box-shadow: 0 2.5em 0 -1.3em; }
  40% { box-shadow: 0 2.5em 0 0; }
}
@keyframes load7 {
  0%,
  80%,
  100% { box-shadow: 0 2.5em 0 -1.3em; }
  40% { box-shadow: 0 2.5em 0 0; }
}

.text-large .tSmall {
  font-size: 16px;
}
.text-large { font-size: 19px; }
.text-large .tB,
.text-large .tBig,
.text-large .termFold_title { font-size: 21px; }
.text-large .tBigger { font-size: 25px; }
.text-large .tBiggest,
.text-large .popup_title { font-size: 27px; }

@media screen and (max-width: 1400px) {
	/*btn_top*/
	.btn_top { left: auto; right: 30px; }
}

@media screen and (max-width: 1200px) {
	/*header*/
	.header_logo a {  }
	.header_menu_nav a { margin-right: 10px; font-size: 16px; }

	/*headerNav*/
	.headerNav_inner {  }
	.headerNav_box { display: block; }
	.headerNav_item { padding: 0; }
}

@media screen and (max-width: 1024px) {


	/*header*/
	.header_inner { align-items: center; }
	.header_logo a { width: 200px; height: 40px; background: url(../images/img_logo_02.png) left center no-repeat; background-size: auto 100%; }
	.header_menu_nav a {  }
	/*第二層選單*/
	.headerNav_section { padding: 0 10px; }
	
	/*footer_宣告*/
	.footer_nav li { padding: 0 10px; }
}

@media screen and (max-width: 900px) {

	/*header*/
	.header_menu_nav a {  }

}


@media screen and (max-width: 767px) {
	.web{ display:none; }
	.mobile{ display:block; }


	.botM3 { margin-bottom: 30px; }


	.pagesize { padding: 0 10px; }
	.page { padding-top: 56px; }

	/*header*/
	.header { position: fixed; top: 0; left: 0; }
	.header_inner { padding: 10px 0; }
	.header_logo a { width: 160px; height: 32px; }
	.header_menu_nav { display: none; }
	.header_btn { width: 32px; height: 32px; }
	.header_btn_search { margin-right: 10px; background-size: 24px; }
	.header_btn_menu { display: inline-block; position: relative; background-size: 24px; }
	.header_btn_menu .line { display: block; position: absolute; left: 3px; width: 26px; height: 3px; background-color: #009e96; border-radius: 2px; transition: 0.2s; }
	.header_btn_menu .line01 { top: 5px; }
	.header_btn_menu .line02 { top: 15px; }
	.header_btn_menu .line03 { top: 25px; }
	.open_mobileMenu .header_btn_menu .line01 { width: 30px; top: 15px; left: 1px; transform: rotate(-45deg); }
	.open_mobileMenu .header_btn_menu .line02 { display: none; }
	.open_mobileMenu .header_btn_menu .line03 { width: 30px; top: 15px; left: 1px; transform: rotate(45deg); }
	/*第二層選單*/
	.headerNav.open { display: none; }
	/*小網menu*/
	.mobileMenu { display: none; position: fixed; top: 59px; bottom: 0; left: 0; right: 0; overflow-y: scroll; /*height: calc(100vh - 59px); max-height: calc(100vh - 59px);*/ background: #fff; }
	.open_mobileMenu ~ .container { position: fixed; width: 100vw; overflow-y: scroll; }
	.open_mobileMenu ~ .container::after { content: ""; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 900; background: rgba(50,50,50,0.75); }
	.open_mobileMenu .mobileMenu { /*display: block;*/ }
	.mobileMenu_list a { display: block; }
	.mobileMenu_list > li { position: relative; }
	.mobileMenu_list > li > a { padding: 10px 42px 10px 20px; line-height: 34px; font-size: 18px; font-weight: 700; border-bottom: solid 1px #e5e5e5; }
	.mobileMenu_list .btn_next { position: absolute; top: 0; right: 0; width: 100%; height: 55px; /* top: 10px; right: 10px; width: 34px; height: 34px; */ padding: 0; background: url(../images/icon_arror_02.png) center right 15px no-repeat; background-size: auto 12px; border: none; }
	.mobileMenu_list_sec { display: none; padding-left: 20px; background: #e5e5e5; }
	.btn_next.open { transform: scaleY(-1); }
	.btn_next.open ~ .mobileMenu_list_sec { /*display: block;*/ }
	.mobileMenu_list_sec li { padding: 8px 20px; }
	.mobileMenu_list_sec.point li::before { top: 22px; }
	.mobileMenu_list_sec a {  }
	/*小網menu_卷軸*/
	.mobileMenu .mCSB_inside > .mCSB_container { margin: 0; }


	/*popup_search*/
	.popup_search { top: 56px; }
	.popup_search.open ~ .page::after { top: 56px; }

	/*popup*/
	.popup_area { margin: 50px auto 30px; padding: 20px; }
	.popup_area .btn a { max-width: 320px; }
	.popup_inner.narrow { padding: 0; }
	.popup_title { font-size: 21px; }
	.popup_area_topTitle { padding: 0; }
	.popup_area_topTitle .popup_inner { padding: 20px; }
	.popup_area_topTitle .popup_inner.narrow { padding: 20px 40px; }

	/*banner*/
	.bannerArea { margin-bottom: 20px; }

	/*footer_宣告*/
	.footer_copyright { padding: 20px 0; }
	.footer_copyright .footer_nav { display: none; }
	/*footer_資訊*/
	.footer_info { padding: 20px 0; }
	.footer_info p { font-size: 12px; line-height: 150%; letter-spacing: 0; }
	.footer_info span {  }
	

	/*btn*/
	.btn_inline a { display: block; max-width: 320px; margin: 0 auto 10px; padding: 0; }

	/*btn_top*/
	.btn_top { bottom: 50px; right: 10px; }
	.popup .btn_top { right: 15px; }

	/*ul*/
	.point.col2 { display: block; }
	.point.col2 li { width: 100%; padding-right: 0; }

}
