/*----------------------------------------/
Default Typography
----------------------------------------*/
 
a{   text-decoration: none;  }
a:hover,  a:active,  a:visited,  a:focus {text-decoration: none;  }

/** font-family:=================================*/
.f-s{   font-size: 0.9rem; font-size: min(max(3vw, 0.75rem), 1rem);} 
.f-400{font-weight: 400!important;}
.vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.color-red{color: #9e2b2f;}
.color-white{color: #fff!important; }
.color-gray{color:#597990; }
.txt-stork { -webkit-text-stroke: 1px #333;  -webkit-text-fill-color: transparent;}
.txt-center{ text-align: center;}
.wrapper { width: 100%; max-width: 1330px; padding-left: 15px; padding-right: 15px; margin: auto; }
 @media (max-width:1024px) {
.wrapper { padding-right:20px; padding-left: 20px;  }
}
@media (min-width: 1441px) {
.wrapper {   padding-left: 0px; padding-right: 0px; margin: auto; }

}

.wrapper-full { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 0px; padding-left: 0px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1002px) {
.wrapper-full { padding-right: 10px; padding-left: 10px;   }
}
@media (min-width:768px) {
.wrapper-full { padding-right: 10px; padding-left: 10px;   }
}
/*----------------------------------------/
banner area
----------------------------------------*/
.main-banner { width:100%; padding: 0; margin:0px auto ;  position: relative; z-index: 0; vertical-align: top;  overflow: hidden; }
.main-banner figure { display: block; margin: auto; width: 100%!important;  height: auto;  -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; }
.main-banner figure img { width: 100%!important; height: auto;  -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; }

.main-banner-txt {width: 100%;  height: 200px; margin:2% auto auto auto; padding: 20px;  display: flex; flex-wrap: wrap;  justify-content: center; align-items:center; align-content: center; flex-direction:column; position: absolute;   z-index: 99;overflow:hidden;}
/* Banner 內文字 =====================================================================*/
.main-banner.ins {  position: fixed; left: 0; top: 70px;  z-index: 0; width: 100%; height: 100%;}
.main-banner-txt h1 {  font-size:2.75rem; font-weight:400; text-align: center;  letter-spacing:1px;  text-shadow:0px 1px rgba(255,255,255,.35); 	}
.main-banner-txt em { font-size: 1.25rem;  margin-top: 10px; color: #fff;}
.main-banner-txt p { font-size: 15px; margin: 0!important; color: #fff;}
@media (min-width: 992px) and (max-width: 1199.98px) { 
.main-banner.ins {  top: 60px; }
}
@media (min-width: 1600px) {
.main-banner-txt h1 {  font-size:3.5rem;  }
}
@media (max-width: 991.98px) {
.main-banner-txt { height: 200px; }
}
@media (max-width: 767.98px) {
.main-banner.ins {  top:20px; }   
.main-banner-txt { height:auto; margin:0 auto; padding: 10px 10px 0px 10px;  }
.main-banner-txt h1 {  font-size: 1.25rem;  margin-top: 0px; }
.main-banner-txt em { font-size: 1rem; margin-top: 0px; }
}

/*----------------------------------------/
banner 固定 下方多一個區塊area
----------------------------------------*/
.main-area { width: 100%; position: relative; padding: 0px;  }
@media (min-width: 1200px) {
.main-area {  margin-left: auto; margin-right: auto; }
}
@media (max-width: 767.98px) {
.main-area {  margin-top:0px;}
}
/*----------------------------------------/
cms-main-content
----------------------------------------*/
.main-content{position: relative; width: 100%; margin:0px auto; padding:0px; }
.decorate-end {width: 100%;  height: 100px;  position: absolute; z-index: 13; left: 0px;  }

 
/*----------------------------------------/
麵包屑 自訂顏色樣式
----------------------------------------*/
.main-breads{ width: 100%;   margin:0px; padding:2px 10px;  color:#000; background-color:#fafafa;}
.main-breads .breadcrumb{ width: auto; padding:0px;  margin:5px 0px; background:none;    }
.main-breads .breadcrumb li{ font-size:12px; max-width: 200px; overflow: hidden;  word-break: break-all; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }
.main-breads .breadcrumb li a{ color:#312927;   }
.main-breads .breadcrumb li a:hover{color:#f18201}
.breadcrumb-item+.breadcrumb-item::before { content: " | "; margin-left: 5px;color:#312927;}
.main-breads .breadcrumb li:first-child{ position: relative; padding-left: 20px; color:#f18201;}
.main-breads .breadcrumb-item.active{color:#f18201;}
.main-breads .wrapper{ margin: 0px auto; padding: 0px 20px;}
@media (max-width: 768px) {
.main-breads{ max-width: 100%;  margin:0px auto; border-top: solid 1px rgba(255,255,255,.35);}
.main-breads .breadcrumb{ padding:2px; justify-content: flex-start;  }
.main-breads .wrapper{ margin: 0px auto; padding: 0px;}    
}

 


/*----------------------------------------/
  Default Typography
----------------------------------------*/
.edit h2 {font-size: 125%; margin-bottom: 15px; color:#02802a}
.edit h3 {font-size: 120%; margin-bottom: 15px; color:#02802a}
.edit h4 {font-size: 115%; margin-bottom: 15px; color:#02802a}
.edit h5 {font-size: 110%; margin-bottom: 15px; color:#02802a}
.edit h6 {font-size: 105%; margin-bottom: 15px; color:#02802a}
 
/* description =======================================================================	*/
.description{  max-width: 100%;display: block; padding:0px 50px;margin:30px auto;line-height: 1.875rem; position:relative;}
.description h2 {font-size: 175%; color:#02802a}
.description h3 {font-size: 162.5%;  color:#02802a}
.description h4 {font-size: 150%;  color:#02802a}
.description h5 {font-size: 137.5%;  color:#02802a}
.description h6 {font-size: 125%;  color:#02802a}
.description p { font-size: 1rem; font-size: min(max(3vw, 0.75rem), 1rem);}

@media (max-width: 767.98px) {
.description{  padding:0px;} 
}
 
.title-block{ width: 100%; margin:30px auto; position: relative;  }
.title-block h1 {width:100%; margin:0px auto; padding:20px 0px; font-size:2.25rem; text-align: center; color:#f18201; font-weight:500; position: relative;  }
.title-block h1::before{  content: ''; width:10%;display: block;margin: auto;  height: 2px;left:45%;bottom:0px; position: absolute;  background:#f18201;  }
@media (max-width: 1199.98px) {
.title-block h1{  font-size: 1.5rem; }
}
@media (max-width: 767.98px) {
.title-block {  margin: 15px auto; }  
}  


/*filter*/
.filter { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0.5em;margin-bottom: 1rem;}
.filter label { color: #000; font-size: 1rem; font-size: min(max(3vw, 0.75rem), 1rem);margin: 0.5rem; display: flex;  }
.filter ul, .filter li {  margin: 0; padding: 0; list-style: none;}
.filter ul { border: solid 1px #11754b;}
.filter li { float: left; color:#11754b;  padding: 0.2rem 1rem;font-size: 1rem; font-size: min(max(3vw, 0.75rem), 1rem); cursor: pointer;}
.filter li a{  color:#11754b; }  
.filter li:hover { background-color: #d4e9e2;}
.filter li.active {color: #d4e9e2; background-color: #11754b;}
.filter li.active a {color: #d4e9e2; }
@media screen and (max-width: 420px) {
.filter li {  padding: 0.2em 0.3em;}
}


.main-wrap{ width: 100%; margin: auto; height: auto;  display: flex; flex-wrap: wrap;  position: relative;  }

 
 /*cms-Title Styles 樣式
=================================*/
.title { width: 100%;  margin: 30px 0px; padding-top: 60px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title:before { content: "";width:150px;height: 150px; margin: auto;display: block;  left:calc(50% - 60px); top:-50px; position: absolute; background: url("../images/index/title.png") no-repeat center top; background-size:100% auto;}
.title:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background:#f99a00; bottom: 20%; right: 0px; position: absolute; z-index: -1; }
.title h2{margin:0px auto; padding: 0px 20px; font-size:2.15rem;  font-weight:500; color:#f99a00; background: #fff; letter-spacing: 3px; position: relative;}
.title h3{margin:0px auto; font-size:1rem; font-weight:600;color:#999;background: #fff;position: relative; }
.title h3 strong{ color:#2c2c2c;font-weight:700; }
.title p{ margin:0px auto; font-size:1.063rem;font-weight:400;  }
@media (max-width: 991.98px) {
.title h2{  font-size:2rem;  }
.title h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
.title h1, .title h2{  font-size:1.75rem;  }
.title h3{  font-size: 1.25rem;  }

} 

/*cms-Title Styles 樣式
=================================*/
.title-2 { width: 100%;  margin:30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title-2:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background:#f99a00; bottom: 20%; right: 0px; position: absolute; z-index: -1; }

.title-2 h2{margin:0px auto; padding: 40px 20px 0px 20px; font-size:2.15rem;  font-weight:500; color:#333e48; background: #fff; letter-spacing: 3px; position: relative;}
.title-2 h2:before { content: "";width:120px;height: 120px; margin: auto;display: block;  left:calc(50% - 60px); top:-90px; position: absolute; background: url("../images/index/title-2.png") no-repeat center bottom; background-size: 100% auto}

.title-2 h3{margin:10px auto 0px auto; font-size:1rem; font-weight:600;color:#999; position: relative; }
.title-2 h3 strong{ color:#2c2c2c;font-weight:700; }

@media (max-width: 991.98px) {
.title-2 h2{  font-size:2rem;  }
.title-2 h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
.title-2 {   padding-top: 30px; }   
.title-2 h2{  font-size:1.75rem;  }
.title-2 h3{  font-size:1.25rem;  }    
} 



.icon-pix{   margin: auto; background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto;background-position:center; position: absolute;z-index:1; width: 100px;  height: 100px; top: -150px; right:calc(50% - 50px); bottom: 0; left: calc(50% - 50px); transition: 0.8s 1s; }

.title-icon { width: 100%;  margin:30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title-icon:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background:#f99a00; bottom: 20%; right: 0px; position: absolute; z-index: -1; }

.title-icon  h2{margin:0px auto; padding: 40px 20px 0px 20px; font-size:2.15rem;  font-weight:500; color:#333e48; background: #fff; letter-spacing: 3px; position: relative;}
 

.title-icon  h3{margin:10px auto 0px auto; font-size:1rem; font-weight:600;color:#999; position: relative; }
.title-icon  h3 strong{ color:#2c2c2c;font-weight:700; }

@media (max-width: 991.98px) {
.title-icon  h2{  font-size:2rem;  }
.title-icon  h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
.title-icon  {   padding-top: 30px; }   
.title-icon  h2{  font-size:1.75rem;  }
.title-icon  h3{  font-size:1.25rem;  }    
}



.title-txt{margin: 20px 0px 60px 0px;color:#8f929e; font-weight: 400;  }
.title-3 {margin: 30px 0px; position: relative; font-size: 1.75rem; font-weight: 500; letter-spacing: 3px; }
.title-3 h2{margin:0px auto; padding: 0px 0px 40px 0px; font-size:2rem; font-weight:700; color: #000;  letter-spacing: 3px; position: relative;}
.title-3 h2:after { content: "";width:30%;height:4px; margin: auto; background:#f99a00; bottom: 27%; left: 0px; position: absolute;  }  

.title-3 h3{margin:0px auto; padding: 0px 0px 10px 0px;  letter-spacing: 3px; position: relative;}
.title-3 h3:after { content: "";width:30%;height:4px; margin: auto; background:#f99a00; bottom: 0px; left: 0px; position: absolute;  }  





.title-4 {  margin: 30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  position: relative;  letter-spacing: 3px;}
.title-4 h1{margin:0px 0px 10px 0px;padding: 0px;  font-size:2.5rem;  font-size: min(max(3.5vw, 1.875rem), 2.5rem); font-weight:700;color:#000;letter-spacing: 3px; position: relative;   }
.title-4 h2{margin:0px;  font-size:2rem;  font-size: min(max(3.5vw, 1.5rem), 2rem); font-weight:500;color:#f99a00;letter-spacing: 3px;}

 
.btn-btnbox{ display: flex; justify-content: center; align-content: center;  margin-top: 5rem; }
.txt-stork { -webkit-text-stroke: 1px #333;  -webkit-text-fill-color: transparent;}
 /*tab-bar style======================================================================*/
.tab-bar {position: relative;width: 100%;  min-height:40px;  display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;  background:#fff; z-index:9;   }
.tab-bar .btn-tab{   width: 100%; margin: 0px auto;  padding: 10px 0px;  position: relative;font-size: 1.188rem; font-size: min(max(3vw, 1rem), 1.188rem); font-weight: 700; letter-spacing: 6px; color: #f18201; text-align:center; border-bottom: 1px solid #f18201; }
.tab-bar .btn-tab::after { right: 20px;  top: 10px; content: ""; position: absolute; width: 14px; height: 14px; border-top: 2px solid #f18201; border-right: 2px solid #f18201; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }
ul.tab { left: 0; right: 0; top:50px; position: absolute; margin: 0; width: 100%; padding: 0; display: none;  list-style: none; }
ul.tab li {width: 100%; display: flex; justify-content: center; text-shadow:none;   font-size: 1.15rem;  font-size: min(max(3vw, 0.9rem), 1.15rem); background: #fafaf5;border-bottom: 1px solid #d8d8d8; z-index: 1; }
 ul.tab li:last-child { border-bottom: none; }
ul.tab a { width: 100%;  display: flex; justify-content: center;  padding:8px 10px; text-align: center; text-decoration: none; color: #000;}
ul.tab a:hover { color:#f18201; }
ul.tab li a span{  text-align: center; color:#fff;}
ul.tab li.current a{ color:#f18201; }

@media (min-width:769px) {
.tab-bar {  background:none; z-index: 1; position: relative;  }
.tab-bar .btn-tab { display: none; }
div.tab-bar { width:100%; display: flex; margin:2% auto auto auto; font-size: 0.875rem!important; transition: background-color 220ms ease-in, box-shadow 80ms ease-in; background: transparent; box-shadow: none; border: none;z-index:0;  }
ul.tab { width: 100%; margin:auto;  top:auto;display: flex; align-items: center; justify-content:center; flex-wrap: wrap; text-align: center;border-bottom: solid 1px #e3e3e3; border-top: solid 1px #e3e3e3;z-index:0;position:relative; }
ul.tab a { padding:5px 10px;  color:#2c2c2c;  }
ul.tab li.current { color:#fff!important; background-color:#f18201; text-shadow:none;    }
ul.tab li{ width: auto; margin:0px 5px; display: flex;  position: relative;z-index: 1; border: 1px solid #fff;  background-color: #fff; box-shadow: 3px 0 10px rgb(186 186 186 / 35%);  -webkit-transition: all 0.3s; transition: all 0.3s; }
ul.tab li.current a{ color:#fff!important; }
ul.tab li.current:hover a{ color:#f18201!important; }

ul.tab li a{ font-size:0.9375rem; color:#555!important;  background-color: transparent;  display: block;  margin: 0;  padding:10px 15px; position: relative; transition: all 0.4s ease;    } 
#ul.tab li:last-child {  border-bottom: 1px solid #f18201;  }
ul.tab li:hover{background:#f8f9f9;}    
}
 
/* Underline From Center */
ul.tab li { display: inline-block;vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden;}
ul.tab li:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background:#f18201; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
ul.tab li:hover:before, ul.tab li:focus:before, ul.tab li:active:before { left: 0; right: 0;}


/*----------------------------------------/
 自訂 social-icons 
----------------------------------------*/
.bx-line{  width: 20px; height: 20px; display: inline-block; margin: -10px 10px 0px 0px; padding: 5px; border-radius:10px;   background:url("../images/icon/icon-line.svg") no-repeat center   #7cbc6d;background-size:80%;  }

/*----------------------------------------/
 leftMenu start 樣式
----------------------------------------*/

.leftMenu { width: 100%;  padding: 20px 0px 0 0; position: sticky; top: 0px;}
.leftMenu h2{ font-size: 1.5rem; font-weight: 700; margin-bottom: 30px;  }

.leftMenu ul, .leftMenu ul li {list-style-type:none; margin: 0; padding: 0;}
.leftMenu ul {width: 100%; }
.leftMenu ul li.menu-title a{ color:#fff; font-size: 1.35rem; font-weight: 700; line-height: 2rem; background:#f39800; }
.leftMenu ul li:hover.menu-title a{ color:#fff; }
.leftMenu ul:nth-child(2){margin-bottom: 30px;}
.leftMenu > ul ul {display: none;}
.leftMenu ul li { font-size: 1.15rem; font-weight: 400;  line-height:2rem; border-bottom: 1px solid #d8d8d8; position: relative;}
.leftMenu ul li.current{ border-bottom: 2px solid #f18201;}
.leftMenu ul li.current a{  color:#f18201;}
.leftMenu ul li.current ul li a{ color:#2C2C25;}
.leftMenu ul li:last-child {border-bottom: none;}
.leftMenu ul li a:hover { color:#f18201!important; }
.leftMenu ul li a { transition: all .3s ease }
.leftMenu ul li a:after { content: ""; display: block; height: 4px; width: 100%; transition: all .3s ease; transform: scaleX(0);  position: absolute; left: 0;  bottom: 0; background-color: #009b70;  transform-origin: left bottom}
.leftMenu ul li a.active, .leftMenu ul li a:hover {  border-color: transparent}
.leftMenu ul li a.active:after, .leftMenu ul li a:hover:after {  transform: scaleX(1)}
 
.menu_dot {position: absolute; top: 14px; right: 0px; z-index: 99; width: 50%; height: 30px; cursor: pointer; }
.menu_dot::before {content: ''; width: 12px; height: 2px; background-color: #777; border-radius: 2px; position: absolute; top: 12px; right: 7px; z-index: 99; transition: all 0.5s ease 0s;}
.menu_dot::after {content: ''; width: 2px; height:12px; background-color: #777; border-radius: 2px; position: absolute; top: 7px; right: 12px; z-index: 99; transition: all 0.5s ease 0s;}
.leftMenu .menu_dot_open{top:6px; }
.leftMenu .menu_dot_open::before {background-color:#009b70;}
.leftMenu .menu_dot_open::after { display: none;}
.leftMenu a:link, .leftMenu a:visited {text-decoration:none; color:#2c2c2c; background-color: transparent; padding: 10px 30px; display: block; position: relative; z-index: 1; transition: all 0.5s ease 0s;}
.leftMenu a:active, .leftMenu a:hover {text-decoration:none;  color:#f39800!important; cursor:pointer; transition: all 0.5s ease 0s;}
.leftMenu ul li ul li a{ font-size: 1rem;  color:#666464; font-weight: 400; }
 
/*.leftMenu img style*/
.menu-img {width: 100%; display: flex;flex-wrap: wrap; align-items: center; }
.menu-img figure{width:20%; padding-right: 10px;}
.menu-img h3{width: calc(80% - 10px);}
/*.leftMenu img end style*/
.menu_bg_open{background-color: rgba(243,152,0,0);}

.leftMenu ul li a.menu_arrow_open{background-color:transparent; color:#f18201;}
.menu_arrow {position: absolute; top: 15px; left: 5px; width: 20px; height: 20px; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); transition: all 0.5s ease 0s;}
.menu_arrow::before {content: ''; width: 7px; height: 2px; background-color:#f18201; border-radius: 2px; position: absolute; top: 7px; left: 6px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.5s ease 0s;}
.leftMenu a:hover .menu_arrow::before {background-color:#f18201; transition: all 0.5s ease 0s;}
.menu_arrow::after {content: ''; width: 7px; height: 2px; background-color:#f18201; border-radius: 2px; position: absolute; top: 11px; left: 6px; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); transition: all 0.5s ease 0s;}
.leftMenu ul li a.menu_arrow_open .menu_arrow::before,.leftMenu ul li a.menu_arrow_open .menu_arrow::after  {background-color:#f18201; }
.leftMenu a:hover .menu_arrow::after {background-color: #f18201; transition: all 0.5s ease 0s;}
.menu_arrow_open .menu_arrow {-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); transition: all 0.5s ease 0s;}
 @media only screen and (min-width:993px){
.leftMenuMobile {display: none;}
}
@media(min-width:1025px) {
.leftMenu { width:240px;  }    
}
@media only screen and (max-width:992px){
.leftMenu h2{ display: none;  }
.leftMenu { width: 100%;  padding: 0px; margin: 0px; z-index: 88;position: absolute;  background: #fff; }  
.leftMenu ul {width: 100%;  background-color:#fafaf5; }
.leftMenuMobile {width: 100%; height: 50px; margin: 0px auto; padding: 0px; position: relative; cursor: pointer; background: #fff; border-bottom: solid 1px #f18201}
.leftMenuMobile > span:nth-child(1) { width: 20px; height: 2px; background-color: #f18201; position: absolute; top:25px; right: 22px; transform:rotate(45deg);transition: all 0.5s ease 0s;}
.leftMenu > div.show > span:nth-child(1) {top: 25px; transform: rotate(-45deg);}
.leftMenuMobile > span:nth-child(2) {width: 20px; height: 2px; background-color: #f18201; position: absolute; top: 25px; right: 10px; transform:rotate(-45deg);transition: all 0.5s ease 0s;}
.leftMenu > div.show > span:nth-child(2) {top: 25px; transform: rotate(45deg);}
.leftMenuMobile::before {content: attr(data-title); width: 100%; height:40px; line-height: 40px; position: absolute; top:5px; left: 0px; text-align: center; font-size: 1.188rem; font-weight: 700; color: #f18201;}
.leftMenu > ul {max-height: 0; overflow: hidden; transition: all 0.5s ease 0s; }
.leftMenu > ul.open {max-height: 100%; overflow-y: scroll; padding-bottom: 10px; transition: all 1.5s ease 0s;  z-index: 999}
}



/*----------------------------------------/
  分頁 自訂顏色樣式
----------------------------------------*/
#main-pages .pagination{ margin:20px auto auto auto; padding-bottom: 40px; display: flex; justify-content: center;  }
.pagination .page-link { color:#31315e; background-color:#fff; border: 1px solid #e3ded2;}
.pagination .page-link:hover { color: #fff; background-color:#dcdddd; border-color:#dcdddd;}
.pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.pagination .page-item:first-child .page-link { }
.pagination .page-item:last-child .page-link { }
.pagination .page-item.active .page-link { color: #fff!important;  background-color:#f18201; border-color:#f18201;}
.pagination .page-item.disabled .page-link { color: #6c757d;  background-color: #fff; border-color:#e3ded2;}
/*----------------------------------------/
  btn 自訂顏色樣式
----------------------------------------*/
 .btn { width: 100%; padding: 0.5rem ;  margin-bottom:5px;  font-size: .95rem; line-height: 1.75; border-radius:0px;   }
  @media (max-width: 767.98px) {
 .btn { padding: 0.5rem; font-size: .875rem;    }
 }   
.btn-submit{  font-weight: 400;  background-image: linear-gradient(to right, #333 10%, #000 100%);border: solid 1px #333;  color: #fff!important; vertical-align: text-bottom; }
.btn-submit:hover { color: #fff;  background:#232323;   box-shadow: 0px 3px 10px rgba(148,0,11,.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)}
  

a.btn-back { width:auto; color:#000!important; padding: 10px; font-weight:500;border: solid 1px #fff; background: #fff;  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;  }
.btn-back:before,.btn-back::after{  content: ''; width: 30px; height:1px; background:#797371;-moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s;  transition: ease 0.3s;  }
.btn-back:before { margin-right: 20px; margin-left: 5px;}
.btn-back:after { margin-left: 20px; margin-right: 5px;}
a.btn-back:hover {   color:#f18201!important; border: solid 1px #f18201;}
.btn-back:hover:before{ background:#f18201;-moz-transform: translateX(20%); -ms-transform: translateX(20%); -webkit-transform: translateX(20%); transform: translateX(20%);  }
.btn-back:hover:after{ background:#f18201;-moz-transform: translateX(-20%); -ms-transform: translateX(-20%); -webkit-transform: translateX(-20%); transform: translateX(-20%);  }
@media (max-width: 767.98px) {
.btn-back  { font-size:.875rem; padding:5px  10px;}  
.btn-back:before,.btn-back::after{ display: none; }
 }
 
a.btn-prev,a.btn-next{ color: #000; }
.btn-prev { color:#797371; font-weight: 500; text-align: center; background: url(../images/icon/arrow-left.svg) no-repeat left center #fff; background-size: 12px auto; border: solid 1px #fff;   }
.btn-next { color:#797371; font-weight: 500;  text-align: center; background: url(../images/icon/arrow-right.svg) no-repeat right center #fff; background-size: 12px auto; border: solid 1px #fff;  }
.btn-prev:hover,.btn-next:hover{ color: #f18201;  border: solid 1px #f18201;  }
a.btn-prev:hover,a.btn-next:hover{ color: #f18201!important;  border: solid 1px #f18201!important; }
@media (max-width: 767.98px) {
.btn-prev,.btn-next { background-size: 8px auto;  }  
}

.btn-secondary { font-size: 1rem; font-size: min(max(3vw, .75rem), 1rem);  color:#6e6c6c; font-weight: 500; background:#2c2c2c; border:solid 1px #2c2c2c;border-radius:10px;   }
.btn-secondary:hover { color: #fff; background: #6e6c6c;; border-color:#6e6c6c;; }

.btn-buynow { font-size: 1rem; font-size: min(max(3vw, .75rem), 1rem); color:#fff; font-weight: 500;  background-color:#f18201; border-color:#333; border:solid 1px #f18201; }
.btn-buynow:hover { color: #fff; background-color: #df7475;; border-color:#7777;; }


/*btn-01 =================================*/ 
.btn-01 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: block; margin:40px 0px 0px 0px; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background:#fcb03f; border-radius:0px; z-index: 1;  }
.btn-01 span { display: block;padding-left: 35px;text-transform: uppercase;letter-spacing: 3px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 400;  color: #fff;}
.btn-01 em {position: absolute;width: 45%; height: 1px;right: 23px;top: 50%;transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; background: #fff;  z-index:1;   }
.btn-01:before,.btn-01:after {content: '';background:#f39139;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-01:before { top: 0; left: 0; right: auto;   }
.btn-01:after { bottom: 0; right: 0; left: auto; }
.btn-01:hover:before { width: 100%; right: 0; left: auto;}
.btn-01:hover:after {  width: 100%; left: 0; right: auto;}
.btn-01:hover span{ color: #2c2c2c;}
.btn-01:hover em{background: #2c2c2c; transform: scaleX(0.5);}

/*btn-03===*/
a.btn-03{width: 100%;  padding: 5px 10px; display: flex; align-items: center;  justify-content: center; margin:0px auto; text-align: center; font-size: 1rem; font-weight:400; color: #11754b; border: solid 1px #11754b; -webkit-transition: all 0.3s; transition: all 0.3s;  }
a.btn-03:hover { color:#d4e9e2;  background-color: #f18201; transform: scale(1.05);}
/*a.btn-03:active,a.btn-03:visited { color:#fff; }*/

/*btn-04 ===*/
a.btn-04  { width:10%; margin:20px 0px;padding: 5px 0px; font-size: 1rem;  color:#f28201; font-weight: 700; line-height: 38px; letter-spacing: 2px; transform: scale(1);  transition: all 1s; }
a.btn-04:hover { color:#ffc107;text-shadow:1px 1px  rgba(0,0,0,.5);  transform: scale(1.05);}


.back-button {  width: auto; height: 40px; margin: 0; padding: 10px 20px 10px 10px; position: relative; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; border-radius:10px;  border: solid 1px #777; color: #777; }
.back-button:hover{border-color:#f28201 }
.back-button:hover .back-button-circle {  -webkit-filter: brightness(200%); }
.back-button:hover .back-button-txt, .back-button:hover i { color: #fff; -webkit-transform: translateX(-5px); transform: translateX(-5px)}
.back-button-circle { width: 26px; height: 26px;  position: relative; display: block; margin:0px 10px 0px 0px; border: 1px solid none;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.back-button i.arrow-l { width: 28px; height: 28px; position: absolute;top: 0; bottom: 0; left:0px; background: url("../images/icon/arrow-left-2.svg") no-repeat 4px 4px;  margin: auto;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.back-button-txt { font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; color: #2c2c2c;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}



 

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

/*----------------------------------------/
  ul style 自訂樣式
----------------------------------------*/
 
 /*--------form style-------------
input, option, textarea, input[type="radio"]{min-height:1.35rem; line-height:1.35rem; font-size:0.875rem; color: #000;background-color:#f7f7f7;border: 1px solid #f7f7f7;border-radius:0px;  }
input[type="radio"]+label, input[type="checkbox"]+label { width:auto; box-sizing: border-box; padding: 5px 5px 0px 5px; }
*/
 *:focus { outline: none; }
/* placeholder --*/  
input::placeholder {    }
input:focus, textarea:focus { outline: none;  }
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{min-height:2rem; line-height:2rem;  padding-left:15px;  font-size:0.875rem; color: #000;background-color:#fff;border: 1px solid #ced4db;border-radius:0px;  }

/*IE */
select::-ms-expand {display: none; }
select:focus{ box-shadow: 0 0 5px 2px #467BF4;    }
input, button, select, textarea { outline: none; }




.product-area{ position: relative; padding: 20px 0px;  width: 100%; display: flex; flex-wrap: wrap;   background: #fff;   }
.product-area .main-content {width:calc(100% - 300px);  padding-left:30px; position: relative;}
@media (max-width:1024px) {
.product-area .main-content {   padding-left:0px;}
 }
@media (max-width:992px) {
.product-area .main-content {width: 100%; margin-top:40px; }    
}
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
 @media (max-width: 1024px) {
.product-area .cms-main-content {width:calc(100% - 250px);  padding-left:20px;   align-content: flex-start; align-items: flex-start;}
}
@media (max-width:992px) {
.product-area{  padding:0px;}
.product-area .cms-main-content {width:100%;  padding-left:0px;   align-content: flex-start; align-items: flex-start;}
}
@media (max-width: 767.98px) {
.product-area{  padding:0px;}
.product-area .cms-main-content {width:100%;  padding:0px 15px;}
}
.nav-area { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%;   background-color: transparent;   }
@media(min-width:993px) {
.nav-area { -ms-flex: 0 0 250px; flex: 0 0 250px; max-width: 250px;  padding-right: 10px;  background-color: transparent;   }
}
/*v- add 11/18 */
#st-1 .st-btn{ width: 32px!important; height:32px!important;  border-radius: 99rem!important; }