@charset "utf-8";

@font-face { font-family: "Noto Sans TC"; font-style: normal; font-weight: normal; src: url("../fonts/NotoSansTC-Light.woff2") format("woff2"), url("../fonts/NotoSansTC-Light.woff") format("woff"), url("../fonts/NotoSansTC-Light.otf") format("opentype"); font-display: fallback;}
@font-face { font-family: "Noto Sans TC"; font-style: normal; font-weight: bold;  src: url("../fonts/NotoSansTC-Regular.woff2") format("woff2"), url("../fonts/NotoSansTC-Regular.woff") format("woff"), url("../fonts/NotoSansTC-Regular.otf") format("opentype"); font-display: fallback; }
@font-face { font-family: 'Nunito'; font-style: normal;  font-weight: 200; src: url('../fonts/nunito-v9-latin-200.eot'); src: local('Nunito ExtraLight'), local('Nunito-ExtraLight'), url('../fonts/nunito-v9-latin-200.eot?#iefix') format('embedded-opentype'), url('../fonts/nunito-v9-latin-200.woff2') format('woff2'),  url('../fonts/nunito-v9-latin-200.woff') format('woff'), url('../fonts/nunito-v9-latin-200.ttf') format('truetype'), url('../fonts/nunito-v9-latin-200.svg#Nunito') format('svg'); font-display: fallback; }
@font-face { font-family: 'Nunito'; font-style: normal;  font-weight: 400;src: url('../fonts/nunito-v9-latin-regular.eot'); src: local('Nunito Regular'), local('Nunito-Regular'), url('../fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/nunito-v9-latin-regular.woff2') format('woff2'), url('../fonts/nunito-v9-latin-regular.woff') format('woff'), url('../fonts/nunito-v9-latin-regular.ttf') format('truetype'), url('../fonts/nunito-v9-latin-regular.svg#Nunito') format('svg');font-display: fallback; }
@font-face { font-family: 'Nunito';  font-style: normal;  font-weight: 700; src: url('../fonts/nunito-v9-latin-700.eot'); src: local('Nunito Bold'), local('Nunito-Bold'), url('../fonts/nunito-v9-latin-700.eot?#iefix') format('embedded-opentype'),url('../fonts/nunito-v9-latin-700.woff2') format('woff2'),url('../fonts/nunito-v9-latin-700.woff') format('woff'), url('../fonts/nunito-v9-latin-700.ttf') format('truetype'), url('../fonts/nunito-v9-latin-700.svg#Nunito') format('svg'); font-display: fallback;}
@-webkit-viewport { width: device-width; }
@-moz-viewport      { width: device-width; }
 @-ms-viewport       { width: device-width; }
 @-o-viewport        { width: device-width; }
 @viewport           { width: device-width; }
html{ touch-action: manipulation;overflow-x: hidden;}

* { -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: 'Nunito', 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', sans-serif !important; font-size: 1rem; line-height: 1.5;    margin:0; padding:0;  color: #333; background:#f2f2f2; }
h1 {  font-size: 1.2em; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto; }
h3, h4 { font-size: 1.15em; font-weight: 600; }
h5, h6 { font-size: 1.125em; font-weight: 600 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { font-size: 1.05rem; color: #333; line-height: 1.75rem;  font-weight: 400; }
a { 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; }
audio,canvas,video{ display: inline-block;}
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
.color-b{color: #00a596;}
main{  }  
.block{width: 100%; max-width:1170px;  display: block; margin: auto; background: #fff;  border-radius:0px; }
/**brand-wrap****/
.banner{ width: 100%;    height: auto; overflow: hidden;  display: block;   text-align: center;   vertical-align: top; z-index: 0; }
.banner img{ width: 100%; max-width: 100%; height: auto;}

/* TOPcss
-------------------------------------------------- */
.box-top-h2 { margin-bottom: 25px;}
.box-top-h2 h2 { display: inline-block;  font-weight: bold; font-size: 1rem;   }
.box-top-h2 h2 strong{background-image: -webkit-linear-gradient(left, #00afb9, #7dbe55); color: #00afb9; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.box-top-h2 h3 { font-weight: 700; background-image: -webkit-linear-gradient(left, #00afb9, #7dbe55); color: #00afb9; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.title-style{ margin:15px auto;   font-size:1.75rem; font-weight: 700!important;  background:url(../images/index/v-line-2.png) no-repeat  center bottom; background-size:86px 4px;  }


/* wrp-top_about
======================*/
.wrp-top_about { position: relative; width: 100%; display: block; margin: auto; background: url(../images/index/index-bottom.jpg) no-repeat left bottom;}
.box-top_about { position: relative;  width: 100%;   padding: 50px 15px; margin:0 ;  }
.box-top_about h1{ font-size:1.25rem; margin-bottom: 2px;  text-shadow: 0px 1px 0px rgba(255,255,255,1);   }

/*btn-01
============================*/
.btn-01{ display: inline-block; min-width: 180px; padding: 15px; position: relative; text-decoration: none; color: #fff; text-align: center; font-size: 12px; font-weight: 600; z-index: 0;}
.btn-01 > span::after,.btn-01 > span::before,.btn-01 > span > span::after,.btn-01 > span > span::before { background-color: #43cb7a; content: ''; display: block; position: absolute; z-index: 10; -webkit-transition: all .3s ease; transition: all .3s ease;}
.btn-01 > span::after { height: 1px; left: -1px; top: -1px; width: 8px;  }
.btn-01 > span::before { bottom: -1px; height: 1px; right: -1px; width: 8px;}
.btn-01 > span > span::after { height: 8px; left: -1px; top: -1px; width: 1px;}
.btn-01 > span > span::before { bottom: -1px; height: 8px; right: -1px; width: 1px;}
.btn-01 > span > span > span:after{ display: block; content: ""; position: absolute; z-index: -1; top: 0;bottom: 0; left: 0; right: 0; width: 100%; height: 100%; margin: auto;background-image: -webkit-linear-gradient(left, #43cb7a, #3dbc8e);border-radius:30px;  -webkit-transition: .3s; transition: .3s;}
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: block; width:130px; line-height:1.25rem; margin: 8px auto; padding:10px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 20px; text-transform: capitalize;  }
.btn-more { color: #fff;  background-image: -webkit-linear-gradient(left, #43cb7a, #3dbc8e);border-radius:30px;    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); }
.btn-more:hover { color: #fff; background: #00afb9; }




@media screen and (min-width: 769px){
.block{width: 100%; max-width:1170px;  display: block; margin:2% auto;   border-radius:30px; box-shadow: 0px 5px 8px rgba(0,0,0,.3)  }	
.content-top .txt-01{ margin-bottom: 30px;}
.box-top-h2 { margin-bottom: 30px;}
.box-top_about {  width: 60%; padding: 50px 25px 70px 0px; margin:0 0 0 30%;  }

/*btn-01
============================*/
.btn-01{ min-width: 220px; padding: 20px; font-size: 15px;}
.btn-01 > span::after,.btn-01 > span::before { width: 15px;}
.btn-01 > span > span::after,.btn-01 > span > span::before { height: 15px;}
/* hover */
.btn-01:hover > span:after,.btn-01:hover > span:before { width: 100%; width: calc(100% + 2px);}
.btn-01:hover > span > span::after,.btn-01:hover > span > span::before { height: 100%; height: calc(100% + 2px);}
.btn-01 > span > span > span:after{ width: calc(100% - 14px); height: calc(100% - 14px);}
.btn-01:hover > span > span > span:after{ width: 100%; height: 100%;}
}