/* Reset ====================================================================*/
* { -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; }
/* CSS Document */
body { font-family:'Poppins', sans-serif; overflow-x:hidden; margin:0; padding:0; color: #333; }
h1 {  font-size: 1.2em; font-weight: 400; color: #333; }
h2 { font-size: 2.6em; font-weight: 400; color: #000; margin: 5% auto; }
h3, h4 { font-size: 1.25em; font-weight: 400; }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0.5rem auto; font-family:'Muli', sans-serif; line-height: 1em; }
p {  color: #333; line-height: 1.65em;font-weight: 400; }
a { color:#5b204a; text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
article, section { word-wrap: break-word; word-break: keep-all; }
input, select, textarea { margin: 1% auto; padding: 1%; font-size: .85em; line-height: 1.5em; outline: none; box-sizing: border-box; font-family: 'Poppins','Arial',  Microsoft JhengHei, Lucida Sans Unicode, sans-serif}

/* Default ====================================================================*/
.wrap {width: 96%; max-width: 1360px; margin: 0 auto; display: block; }
.container {margin:0; padding-top: 80px;  width: 100%; display:block;}
.table_scroll { overflow-x: auto; }
.mobile { display: none; }
@media only screen and (max-width: 992px) { 
.container {padding-top:60px;  width: 100%; display:block;}	
}
@media only screen and (max-width: 768px) {
.mobile { display: block; }
.pc { display: none; } 
}
/* Basic ======================================================================*/
.text-left { text-align: left !important; }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.text-nowrap { white-space: nowrap }
.text-lowercase { text-transform: lowercase }
.text-uppercase { text-transform: uppercase }
.text-capitalize { text-transform: capitalize }
.color-blue{ color: #0070c9;}
.color-red{color:#ff6440;}
.color-yellow{color:#ffc90b;}
.title { display: block; margin: 5% auto 3% auto; text-align: center; font-size: 2rem;    }
.title::after { content: ""; display: block; width: 10%; height: 2px; margin: 10px auto; background-image: linear-gradient( 135deg, #2AFADF 10%, #5b204a 100%);}
.title span { font-size: 22px; color: #444; }
.subtitle {   font-size: 18px; font-weight: normal; display: block; text-align: left; color: #062033; margin: 0px; }
/* Banner =====================================================================*/
.banner { position: relative; }
.banner img { width: 100%; }
.slogan { display: flex; justify-content: center; align-items:center; flex-direction:column; position: absolute; width: 60%;  right: 10%; padding: 20px; max-width: 800px;height: 100%; z-index: 99; }
.slogan h2{margin: 0px; font-size:1.15rem; }
@media only screen and (max-width: 480px) { 
.slogan{width: 80%;} 	
.slogan h2{ font-size:1.2rem;   }
	
}
/* description =====================================================================*/
.description { display: block; margin:5% auto; padding: 0; width:70%; text-align: left;}
.description h2 { margin: 2% auto 5% auto; font-size: 1.5rem;   text-align:center; font-weight: 700; }
.description h3 { margin: 2% auto 5% auto; font-size: 1.5rem;   text-align:center; font-weight: 700; }
.description p { font-size:.8rem; color:#888; font-weight: 400;  }
@media (max-width: 992px) {
.description { width:90%; }
	
}
/* breadcrumbs =======================================================================*/
.breadcrumbs{ width:100%; display: block; margin:0 auto; background:#f5f5f5; border-bottom:1px solid #f5f5f5; border-top:1px solid #f5f5f5;}
.breadcrumbs ul { width:100%; max-width:1366px; display: block;  margin: 0 auto; padding: 0; border: 0; overflow: hidden;  *zoom: 1; }
.breadcrumbs ul li { position: relative; padding: 5px 15px 5px 30px; margin-bottom:0px;margin-left: 0;  display: inline-block; list-style-image: none; list-style-type: none;  vertical-align: middle;   white-space: nowrap; font-size:.75em; color: #4e8aa5; text-align: center; }
.breadcrumbs ul li a{ color: #333; }
.breadcrumbs ul li:after { -moz-transform: skew(45deg, 0); -ms-transform: skew(45deg, 0); -webkit-transform: skew(45deg, 0); transform: skew(45deg, 0); content: ""; height: 50%; width: 1px; background: #ccc; border-right: 1px solid #ccc; position: absolute; top: 0; right: -15px; z-index: 1; }
.breadcrumbs ul li:before { -moz-transform: skew(-45deg, 0); -ms-transform: skew(-45deg, 0); -webkit-transform: skew(-45deg, 0); transform: skew(-45deg, 0); content: ""; height: 51%; width: 1px; background: #ccc; border-right: 1px solid #ccc; position: absolute; bottom: 0; right: -15px; z-index: 1; }
.breadcrumbs ul li.active { color: #6eb54e; background:#fff;   padding-left:0px; left: -5px; }
.breadcrumbs ul li.active:first-child a{  left: 0; padding-left: 30px; color: #6eb54e; }
.breadcrumbs ul li.active:after{ width: 25px; background:#fff; }
.breadcrumbs ul li.active:before { width: 25px; background:#fff; }
@media only screen and (max-width: 992px) { 
.breadcrumbs { justify-content: flex-start; } 
}

/* page =======================================================================*/
.page { width: 100%; max-width: 1160px; margin: 0px auto;  display:block; text-align: center; }
.page ol li { width: 34px; height: 34px; display: inline-block;border-radius: 50%; border: 1px solid #ddd; position: relative; line-height: 32px; text-align: center; list-style-type: none; margin: 5% auto 2% 5px; background-color:#eee; }
.page ol li:hover { background:#0099FF;}
.page ol li.current a { background: #000; color: #fff; border-radius: 50%;}
.page ol li a { border: none; color: #000; display: block; padding: 0; line-height: 32px; height: 100%; text-decoration: none; }
.page ol li a:hover, .page ol li a:focus { background: none; color: #000; }
.page li.clear{  background: none; border: none;}
.page li a.prev:before, .page li a.next:before, .page li a.prev-over:before, .page li a.next-over:before { content: '';   font-family: 'FontAwesome'; display: block; color: #000; font-size: 20px; }
.page li a.prev:before { content: '\f104'; }
.page li a.next:before { content: '\f105'; }
.page li a.prev-over:before { content: '\f100'; }
.page li a.next-over:before { content: '\f101'; }
/*ul style======================================================================*/
.dot{ width: auto;  display: block; margin: 1% auto; }
.dot li{ width: 100%; display: block; padding:1px 0 10px 20px; font-size:1rem; line-height:1.4em; font-weight:400; color: #475b66;  background:url(../images/icon/dot.png) no-repeat left 8px; background-size:10px;}
ul.arrow{ width: 100%; display: block; margin: 1.5% auto; }
ul.arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:200; background: url(../images/arrow-right.png) no-repeat left 7px; background-size:10px;}
/* Button ======================================================================*/
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: inline-block; line-height:1.35em; margin:8px 4px; padding:8px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 3px; }
.btn i{ margin-right:5px;}

.btn-more { color: #fff;  padding:15px 50px !important;  font-weight: 400;background:#5b204a; }
.btn-more:hover { color: #5b204a;  background: #fff; border: solid 1px #5b204a box-shadow: 0px 1px 6px rgba(0,0,0,.5); }
.btn-more:after { content: "";  position: absolute; width: 10px; height: 10px; border-top: 1px solid #fff; border-left: 1px solid #fff; vertical-align: middle; transform: rotate(135deg); display: block; right: 22px;  top: 0; bottom: 0;  margin: auto; }

.btn-readmore {color: #333;}
a.btn-readmore { margin-top: 16px; padding: 10px 25px;    font-weight: 200;  color: #333;  background-color: #fff; border:solid 1px #adadad;}
a.btn-readmore:hover{ background: #333; color: #fff; }

.btn-idxnews { padding: 5px 40px; color: #3e79ea; background-color: transparent; border: solid 1px #3e79ea; border-radius:5px;  font-size: 13px; transition: 0.2s;}
.btn-idxnews:hover {border-color: #3e79ea; background: #3e79ea; color: #fff; 	transition: 0.3s;}

.btn-submit {  color: #fff; background: #D95225; padding: 10px 60px; }
.btn-submit:hover { box-shadow: 0 0 10px #333 inset; }

.btn-reset {  color: #fff; background: #6B6B6B; padding: 10px 60px; }
.btn-reset:hover { box-shadow: 0 0 10px #333 inset; }

.btn-delete { color: #fff; font-size: 15px; line-height: 15px; background: #7A7A7A; padding: 9px 35px; border-radius: 50px; }
.btn-delete:hover { background: #333; box-shadow: 0 0 10px #000 inset; }

.btn-inquiry {  display: inline-block; width: 75px; text-align: center; color: #fff; font-size: 15px; line-height: 15px; background: #D95225; padding: 7px 20px 7px 15px; border-radius: 50px; }
.btn-inquiry:before { content: '\f075'; display: inline-block; font-family: FontAwesome; font-size: 12px; padding: 1px 4px; margin-right: 5px; }
.btn-inquiry:hover { background: #666; box-shadow: 0 0 5px #333 inset; }

.btn-back {  display: inline-block;  text-align: center; color: #fff; font-size: 15px;  background: #4C4C4C; padding: 7px 20px; border-radius:5px; }
.btn-back:before { content: '\f104'; font-family: FontAwesome; font-size: 12px; border-radius: 100%; border: 1px solid #fff; padding: 1px 4px; margin-right: 5px; }
.btn-back:hover { background: #666; box-shadow: 0 0 5px #333 inset; }

.btn-newsback { color: #fff; font-size: 15px; line-height: 15px; background: #D95225; padding: 7px 30px; border-radius: 50px; }
.btn-newsback:before { content: '\f104'; font-family: FontAwesome; font-size: 12px; border-radius: 100%; border: 1px solid #fff; padding: 1px 4px; margin-right: 8px; }
.btn-newsback:hover { background: #666; box-shadow: 0 0 5px #333 inset; }



.btn-add { color: #fff;  font-weight: 400; background-color: #5b204a;  background: linear-gradient(#5b204a,#5b204a); border:solid 1px #5b204a ;}
.btn-add:hover {color: #fff;  background: #5b204a;   background: linear-gradient(#5b204a,#ac4c90); box-shadow: 0px 1px 6px #5b204a; }

.btn-border { background-color: transparent; border: 2px solid  #999; color: #999; font-weight: 500; }
.btn-border:before, .btn-border:after { content: ''; border-style: solid; border-color: #50a1ff; color: #50a1ff; position: absolute; z-index: 5; border-radius: 3px; box-sizing: content-box; }
.btn-border:before { width: 0; height: 100%; border-width: 2px 0 2px 0; top: -2px; left: 0; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.btn-border:after { width: 100%; height: 0; border-width: 0 2px 0 2px; top: 0; left: -2px; }
.btn-border:hover { color: #50a1ff; background-color: transparent; box-shadow: 0px 1px 6px #42a1ec;}
.btn-border:hover:before { width: 100%; }
.btn-border:hover:after { height: 100%; }

/* width size ======================================================================*/
.v-offer{ margin-top:1%;}
.block{ display: block; margin: auto; }
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { width:100%; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.txtcols { -webkit-column-count: 1; -moz-column-count: 1;  column-count: 1; column-gap: 80px;  }

/* form style ======================================================================*/
select, input, option, button, textarea, input[type="radio"], input[type="checkbox"] { width: auto; min-height: 1.35em; color: #000; background: transparent; border: 1px solid #85776a; font-family: Noto Sans TC, sans-serif, Verdana,cursive}
form { margin: auto; display: block; }
input::placeholder {color:#afbabf;}
input[type="radio"], input[type="checkbox"] { display: none; }
input[type="radio"]+label, input[type="checkbox"]+label { box-sizing: border-box; padding: 0px 10px 0px 2%; display: inline-block; border: 1px solid transparent; cursor: pointer; vertical-align: middle; border-radius: 4px; margin-bottom: 1%; background-color: rgba(126,144,174,.3); color: #000; -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: 22px; width: 22px; margin: -1px 7px 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 { margin-right: 4%; color: #fff; }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { border: 1px solid transparent; color: #fff; background-color: #0070c9; }
input[type="checkbox"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -244px -56px }
input[type="radio"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -104px -60px }

@media (min-width:800px) {
input[type="radio"]+label, input[type="checkbox"]+label { background-color: rgba(126,144,174,0); font-size:.95em; font-weight:400; color:#fff;  }
input[type="radio"]+label:before, input[type="checkbox"]+label:before { height: 22px; width: 22px; border: 1px solid #ccc;  color:#fff;  }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { color:#fff; background-color: transparent; }
input[type="radio"]:hover+label, input[type="checkbox"]:hover+label { color: #a48f4e }
input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before { border-color: #8d8383 }
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1 { width: 8.333333333%; }
.col-2 { width: 16.666666667%; }
.col-3 { width: 24%; }
.col-4 { width: 33.333333333%; }
.col-5 { width: 41.666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333%; }
.col-8 { width: 66.666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333333%; }
.col-11 { width: 91.666666667%; }
.col-12 { width: 100%!important; }
.txtcols { -webkit-column-count: 2; -moz-column-count: 2;  column-count: 2; column-gap: 80px; column-rule: 1px solid #e4e8e7; }	
.px-2 { padding:4em 2em; }	
}


@media only screen and (max-width: 425px) { 
 .btn-submit, .btn-reset { padding: 10px 30px; } 
}

.error-box {
 height: unset;
 padding-bottom: 20px;
 padding-top: 20px;
}