/*----------------------------------------- 
   Adjustment for css frameworks  
 ----------------------------------------*/
 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
 /* Images' default margin */
.container img { margin:0 }
/*----------------------------------------/
  Default Typography
----------------------------------------*/
html { font-size: 100%; }
/*body { font-family: 'Noto Sans TC', 'Microsoft Jhenghei','Roboto', sans-serif !important; overflow-x:hidden; margin:0; padding:0; height: 100%;  color: #677788; position: relative; }*/
#cms-main p, #cms-main td, #cms-main li, #cms-main label {  color:#495057; line-height: 1.5rem; font-weight: 400!important;}
/*h1, h2, h3, h4, h5, h6 {  font-family: 'Noto Sans TC', 'Microsoft Jhenghei','Roboto', sans-serif!important;font-weight: 400!important; }*/
h1 {font-size: 2.36rem;margin:0.4rem 0;}
h2 {font-size: 2rem;margin:0.6rem 0;}
h3 {font-size: 1.73rem;margin:0.7rem 0;}
h4 {font-size: 1.6rem;margin:0.8rem 0;}
h5 {font-size: 1.48rem;margin:0.8rem 0;}
h6 {font-size: 1.3rem;margin:0.8rem 0;}
#cms-main p {margin:auto 0; display: block;}
#cms-main a{ text-decoration: none;  }
#cms-main a:hover, #cms-main a:active, #cms-main a:visited, #cms-main a:focus {text-decoration: none;  }
@media all and (max-width: 1024px) {
h1 {font-size: 2rem;}
h2 {font-size: 1.73rem;}
h3 {font-size: 1.6rem;}
h4 {font-size: 1.48rem;}
h5 {font-size: 1.3rem;font-weight:bold;}
h6 {font-size: 1rem;font-weight:bold;}
}
 /*----------------------------------------/
  banner area
----------------------------------------*/
.cms-main-banner { width:100%; height: auto; padding: 0; margin:0px auto; display: flex;  flex-wrap: wrap; align-content: flex-start; position: relative; z-index: 0; line-height: 2.5em; vertical-align: top;overflow: hidden; }
.cms-main-banner-img { width: 100%; height: auto; overflow: hidden;  position: relative; z-index: 3; }
.cms-main-banner-wrap { width: 100%;  padding-top: 5%;  position: absolute;  z-index: 999;}
.cms-main-banner-img img { width: 100%; height: auto; overflow: hidden; }
.cms-main-banner h1 { font-size: 1.5em; line-height: 1em; color: #000; font-weight:300; text-align: center; }
.cms-main-banner p { font-size: 80%; }
 /*----------------------------------------/
cms-main-content
----------------------------------------*/
 .cms-main-content{position: relative;}
 /*----------------------------------------/
  裝飾用動畫元素
----------------------------------------*/
.cms-decorate { height: 100px; width: 100%; position: absolute; z-index: 10; left: 0px; margin-top: -50px;}
.cms-decorate:after {
	content:"";
	background-image: url(../../images/item/back_wave01-1.png);
	background-repeat: repeat-x;
	background-position: center 20px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave1;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave1;
	-webkit-animation-duration: 16s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave1 {
0% {background-position: 0px 20px;}
100% {background-position: 1080px 20px;}
}
@-webkit-keyframes wave1 {
0% {background-position: 0px 20px;}
100% {background-position: 1080px 20px;}
}
.cms-decorate:before {
	content:"";
	background-image: url(../../images/item/back_wave02-1.png);
	background-repeat: repeat-x;
	background-position: center 20px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave2;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave2;
	-webkit-animation-duration: 16s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave2 {
0% {background-position: 1080px 20px;}
100% {background-position: 0px 20px;}
}
@-webkit-keyframes wave2 {
0% {background-position: 1080px 20px;}
100% {background-position: 0px 20px;}
}
.cms-decorate-end { height: 100px; width: 100%;  position: absolute; z-index: 13; left: 0px;  }
.cms-decorate-end:after {
	content:"";
	background-image: url(../images/item/back_wave03.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height:100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 10px;
	animation-name: wave3;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave3;
	-webkit-animation-duration: 16s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave3 {
0% {background-position: 0px 0px;}
100% {background-position: 1080px 0px;}
}
@-webkit-keyframes wave3 {
0% {background-position: 0px 0px;}
100% {background-position: 1080px 0px;}
}
.cms-decorate-end:before {
	content:"";
	background-image: url(../images/item/back_wave04.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom:0px;
	animation-name: wave4;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave4;
	-webkit-animation-duration: 30s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave4 {
0% {background-position: 1080px 0px;}
100% {background-position: 0px 0px;}
}
@-webkit-keyframes wave4 {
0% {background-position: 1080px 0px;}
100% {background-position: 0px 0px;}
}
 /*----------------------------------------/
  麵包屑 自訂顏色樣式
----------------------------------------*/
.cms-main-breads{ width: 100%; min-height:40px; margin:0px auto; position: relative;z-index:88;  }
.cms-main-breads .breadcrumb{padding: 0px; background:none; }
.cms-main-breads .breadcrumb li{ font-size: 0.75rem;  color: #323366; }
.cms-main-breads .breadcrumb li a{ color: #797eb8; }
 
/* description =======================================================================	*/
#cms-main .cms-description{   display: flex; flex-wrap: wrap; justify-content:center; align-items: center; flex-direction: column;  padding:0px 20px; margin: 0 auto;     }
#cms-main .cms-description p{margin:0 !important;font-size:0.875rem; line-height: 1.65rem; color: #646c6f;  }
@media (max-width: 767.98px) {
#cms-main .cms-description p{font-size:0.75rem; }
}
/*----------------------------------------/
  title樣式
----------------------------------------*/
.cms-title-h1 { width:100%;  display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center;  -ms-flex-pack: center; justify-content: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;  margin-bottom: 30px;}
.cms-title-h1::before{  content: ''; -webkit-flex-grow: 1;  -ms-flex-positive: 1; flex-grow: 1; height: 136px; background: url("../images/item/title-line-1.gif") right top/contain no-repeat;  }
.cms-title-h1::after { content: '';  -webkit-flex-grow: 1;  -ms-flex-positive: 1; flex-grow: 1; height:136px;  background: url("../images/item/title-line-2.png") left top/contain no-repeat;  }
.cms-title-h1::before { margin-right: 30px}
.cms-title-h1::after { margin-left: 30px}
@media (max-width: 1199.98px) {
.cms-title-h1::before{  height: 96px; background-size: auto 96px; }
.cms-title-h1::after {   height:96px; background-size: auto 96px;  }
}
@media (max-width: 767.98px) {
.cms-title-h1 { font-size:1.5rem;margin-bottom: 10px;margin-top: 15px; }   
.cms-title-h1::before{ margin-right:5px;  height: 76px; background-size: auto 76px; background-position:0px top; }
.cms-title-h1::after { height:56px; background-size: auto 56px; }

}

/*----------------------------------------/
  title樣式2
----------------------------------------*/
.cms-title-h2 { width: 100%; display: flex; flex-wrap: wrap; position: relative;  }
.cms-title-h2::after { position: absolute; content: ''; margin-left:-20%; width: 100%; height:136px;  background: url("../images/item/title-news.png") left top/contain no-repeat;  }
.cms-title-h2 h2 { margin:15px 15px 0 15px;  display: flex;  justify-content: flex-start; flex-direction: column; font-weight: 400; }
.cms-title-h2 span { font-size: .875rem; color: #6e77ce;  text-align: left; display: flex; }
.cms-title-h2 i{ display:flex; width:80px; height: 80px;  }
.cms-title-h2 i img{max-width: 100%; height: auto;margin: 0; }
/*----------------------------------------/
  title樣式3
----------------------------------------*/
.cms-title-h3{ position: relative; width: 100%; margin:100px auto 50px auto; z-index: 1; }
.cms-title-h3 h2 { display: flex; flex-flow: row; align-items: center; justify-content: center; color: #3b3e6a; font-weight: 400; margin: 20px auto 0 auto;}
.cms-title-h3 span{ position: relative; width: 50px; margin: 0px 20px;} 
.cms-title-h3 span::before{ content: ''; display: block; width: 100%; height: 1px; background: #000; } 
.cms-title-h3 label { position: relative; background: #fff; font-size: 32px; color: #3b3e6a; padding: 0 40px; z-index: 2;}

@media screen and (max-width: 767px) {
.cms-title-h3{ width: 100%; margin:100px auto 50px auto;}
}

@media screen and (max-width: 430px) {
	.cms-title-h3 span { width: 30px; margin: 0 12px;}
}

/*----------------------------------------/
  title樣式4
----------------------------------------*/
.cms-title-block{ width: 96%;  max-width: 900px; margin:1% auto 0px auto; }
.cms-title-block h1 {width:100%; margin:5% 0 4% 0;padding:0px 0px 20px 0px;  display: block;  position: relative; font-size:1.25rem;  color: #000; text-align:center; font-weight:400; letter-spacing: 1px; border-bottom: solid 1px #b6b7ca;}
.cms-title-block h1::after{position: absolute; content: ''; left:30%; bottom: -2px;  width: 200px; height: 3px; background:#31325e;} 
.cms-title-block p{margin-top:15px;  font-size:0.875rem; color:#a99e73; text-align: center; }
 
/*----------------------------------------/
  title樣式5
----------------------------------------*/
.cms-title { padding: 10px 8px;  font-size:1.15rem; font-weight: 400; border-bottom: 2px solid #494848; }
  
.cms-title-about{ display:block; width: 100%;  position: relative; margin:0 ;  padding: 50px 0px 30px 120px; font-size: 2.35rem; font-weight: 400; color:#2e3160;background: url("../images/item/title.png") no-repeat left 30px;  background-size: 80px 80px; z-index: 999; }
.cms-title-about span{ display:block; font-size:15px; color: #6e77ce; line-height:1.5rem;  } 

@media (min-width:768px) {
.cms-title-block h1 { font-size:1.75rem;  margin:0 0 4% 0;}
.cms-title-block h1::after{  left:40%;} 
	
}





/*----------------------------------------/
  次選單樣式
----------------------------------------*/
.cms-tab-bar { margin-top: 40px; background-color:transparent; }
.cms-tab-bar .cms-btn-tab { display: none;font-weight: 700; }
.cms-tab-bar { width:100%; display: flex; margin:0 auto; font-size:0.875rem; transition: background-color 220ms ease-in, box-shadow 80ms ease-in; background: transparent; box-shadow: none; border: none;z-index:1;  }
.cms-tab { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; padding-top:0; z-index:0;   background:transparent;}
.cms-tab a { padding:5px 15px;  color:#9a916a; text-decoration-line: none; }
.cms-tab li.current{ color:#fff;  background:#a99e73;}
.cms-tab li.current a{ color:#fff!important; text-shadow:none;}
.cms-tab li{ display: flex; width: auto;  margin:5px;  position: relative;  border: solid 1px #a99e73; }
.cms-tab li a{ padding: 5px;  position: relative; font-size:0.875rem; color:#9a916a!important; text-decoration-line: none;  }
.cms-tab li a:hover{ background-color:#a99e73;color:#fff!important; }
.cms-tab li a span{   padding:2px 15px; text-align: center;}
.cms-tab li:first-child { border-top: solid 1px #a99e73; }
.cms-tab li:last-child { border-bottom: solid 1px #a99e73; }
.cms-tab li.current:after{ content:" "; width: 0px; height: 0px; border-style: solid; border-width: 5px 7.5px 0 7.5px; border-color: #a99e73 transparent transparent transparent; position:absolute; bottom:-5px; left:50%; margin-left:-7.5px;}

@media (max-width: 767.98px) {
.cms-tab-bar {position: relative;width: 100%;   display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; background:#777eb9; z-index:1;   }
.cms-tab-bar .cms-btn-tab{ color: #fff; width: 100%; margin: 0px; padding:5px 0px; display: flex; justify-content: center; align-items: center; }
.cms-tab { left: 0; right: 0; margin: 0; padding: 0; background-color:#bbc0e6; display: none;  list-style: none; z-index:0; }
.cms-tab li {width: 100%;margin: 0; padding: 0; display: flex; border-bottom:1px solid #fff; border-left:none;   border-right:none;  border-top:none;   text-shadow:none;    }
.cms-tab li:first-child { border-top:1px solid #fff;}
.cms-tab li:last-child { border-bottom: none; }
.cms-tab li.current{ color:#fff;  background:#777eb9;   }
.cms-tab li.current:after{ display: none;}
.cms-tab li a {padding:8px 10px;   color: #fff!important;  text-decoration: none;  }
.cms-tab li a:hover { color:#ac0b0b; }
}
/*----------------------------------------/
  分頁 自訂顏色樣式
----------------------------------------*/
.cms-pagination{}
.cms-pagination .page-link { color:#31315e; background-color:#f5f6fe; border: 1px solid #cccce2;}
.cms-pagination .page-link:hover { color: #fff; background-color:#686aab; border-color:#686aab;}
.cms-pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.cms-pagination .page-item:first-child .page-link { }
.cms-pagination .page-item:last-child .page-link { }
.cms-pagination .page-item.active .page-link { color: #fff!important;  background-color:#30315f; border-color:#31315e;}
.cms-pagination .page-item.disabled .page-link { color: #6c757d;  background-color: #f5f6fe; border-color:#cccce2;}

/*----------------------------------------/
  btn 自訂顏色樣式
----------------------------------------*/
#cms-main .btn { padding: 0.375rem 0.75rem; font-size: .95rem; line-height: 1.75; }
#cms-main .btn-secondary{  font-size: .95rem;color:#fff;line-height: 1.5;  }
.btn.cms-btn-pill { border-radius: 6.1875rem; }
.btn.cms-btn-outline-primary{text-align: center; color: #30315f;  font-weight:400;  border-color:#30315f;  }
.btn.cms-btn-outline-primary:hover { color:#71869d; background-color:#eaedfb; border-color:#eaedfb;}
.btn.cms-btn-secondary { color:#fff; font-weight: 400;  background-color:#7d4b9a; border-color:#7d4b9a;  }
.btn.cms-btn-secondary:hover { color: #71869d; background-color:#eaedfb; border-color:#eaedfb; }

.btn-back {  color: #48443b;  margin-bottom: 15px; padding: 5px 20px;   line-height: 28px;  text-align: center; background: url(../../images/icon/arrow-left.svg) no-repeat left 8px; border: solid 1px #48443b;}
.btn-back:hover { color: #c9163a;  }


.cms-btn-submit{  font-weight: 400; background:#30315e!important;border: solid 1px #30315e;  color: #fff!important; vertical-align: text-bottom; }
.cms-btn-submit:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }


.transition-3d-hover { transition: all .2s ease-in-out}
.transition-3d-hover:focus, .transition-3d-hover:hover {-webkit-transform: translateY(-3px);transform: translateY(-3px)}

.cms-text-pink{color: #ed5a5a!important;}



/*----------------------------------------/
  ul style 自訂樣式
----------------------------------------*/
.cms-dot{ width: auto;  display: block; margin: 5px auto; }
.cms-dot li{ width: 100%; display: block; padding:1px 0 3px 15px; font-size:0.938rem; line-height:1.75rem; font-weight:400;  background: url(../../images/icon/dot.svg)  no-repeat left 10px; background-size:6px;}
.cms-arrow{ width: 100%; display: block; margin: 1.5% auto; }
.cms-arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:400; background: url(../../images/icon/arrow-right.svg) no-repeat left 8px; background-size:8px;}
.cms-decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;}
.cms-decimal li{margin-bottom: 10px; font-size:15px; line-height:1.5em; font-weight:400;  }

 /*--------form style------------*/
#cms-main label{ font-size:.9rem;}
/* select, input, option, textarea, input[type="radio"]{ padding-left:15px;  font-size:0.875rem; color: #000;background-color:rgba(255,255,255,.8);border: 1px solid #afbabf;border-radius:0px;  } */
/* input[type="radio"], input[type="checkbox"] { display: none;  } */
input[type="radio"]+label, input[type="checkbox"]+label { width:auto; font-size:.75rem;  box-sizing: border-box; padding: 5px 5px 0px 5px; display: inline-block; border: 1px solid transparent; cursor: pointer; vertical-align: bottom; border-radius: 4px;background-color:transparent; color: #666; -moz-transition: color 0.2s ease, background-color 0.2s ease; -o-transition: color 0.2s ease, background-color 0.2s ease; -webkit-transition: color 0.2s ease, background-color 0.2s ease; transition: color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]+label:before, input[type="checkbox"]+label:before { height: 18px; width: 18px; margin:0px 4px 0 0; content: ""; display: inline-block; vertical-align: middle; border: 1px solid #afbabf; background-color: #fff; border-radius: 50%; -moz-transition: border-color 0.2s ease, background-color 0.2s ease; -o-transition: border-color 0.2s ease, background-color 0.2s ease; -webkit-transition: border-color 0.2s ease, background-color 0.2s ease; transition: border-color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]:nth-of-type(2n+1)+label, input[type="checkbox"]:nth-of-type(2n+1)+label {  color: #000 }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { border: 1px solid transparent; color:#c74060; background-color:transparent; font-weight: 700; }
input[type="checkbox"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -246px -60px }
input[type="radio"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -107px -63px }
input, button, select, textarea { outline: none; }
*:focus { outline: none; }
/* placeholder  */
input::placeholder {  font-size:0.875rem;  }
input:focus, textarea:focus { outline: none;box-shadow: 0 0 5px 2px #ebd0b7;  }
input:focus::placeholder { color: transparent;  }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
select{
/* 	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	background: url("../images/icon/icon-arrow.svg") no-repeat right center; */
	background-size: 18px auto;
	width:100%;
	min-height:30px;
	font-size:0.875rem;
	padding-left:5px;
	padding-right:20px;
	background-color:#fff;
	border: 1px solid #afbabf;
}
/*IE */
select::-ms-expand {display: none; }
select:focus{ box-shadow: 0 0 5px 2px #467BF4;    }

/* Hashtag ===================================================================== */
.hashtag-common {
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
  margin-top: 20px;  
}
.hashtag-common-icon {
  position: absolute;
  left: 5px;
  top: 0px;
}
.hashtag-common ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5px;
  margin-bottom: 5px;
}
.hashtag-common li {
  list-style: none;
}
.hashtag-common li a {
  display: block;
  font-size: 0.9rem;
  background-color: #e7e7e7;
  border: 1px solid #d9d9d9;
  padding: 5px 7px;
  margin-bottom: 10px;
  border-radius: 3px;
  margin-left: 10px;
  color: #8b8b8b;
  transition: all 0.5s;
}
.hashtag-common li a:hover, .hashtag-common li a.selected {
  color: #fff;
  font-weight: bold;
  background-color: #a3a3a3;
}