@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}
body {
  overflow-x: hidden;
  font-family: Arial, 文泉驛正黑, "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", 微軟正黑體, "Microsoft JhengHei", 標楷體, DFKai-SB, sans-serif;
  margin:0;
  color:#333;
  font-size: 0.9em;
}

a {outline: none; }
a:hover, a:focus, a:active, a.active {outline: none; }
h1, h2, h3, h4, h5, h6 {font-family: Arial, 文泉驛正黑, "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", 微軟正黑體, "Microsoft JhengHei", 標楷體, DFKai-SB, sans-serif; letter-spacing: 2px; }
input,select,button {font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", "DFKai-SB", "sans-serif"; letter-spacing: 2px; }


/*--------------------------------------------------------------*/
/*  Header
/*--------------------------------------------------------------*/

/* navbar */
.navbar{z-index:999;box-sizing: border-box; position: fixed; top:0; left:0;right:0;margin:auto;width: 100%; max-width:1440px;transition: 0.2s}
.navbar-short .navbar-header{height:80px;}
.navbar-short .navbar-brand{margin-top:0px;}
.navbar-short .navbar-logo{width:200px;}
.navbar-header {position: relative;height:167px;background:#fff url("./../images/header.png") no-repeat right center;vertical-align: middle;transition: .2s}
.navbar-brand {margin-top:60px;display:inline-block; vertical-align: middle; font-size: 0;transition: .2s}
.navbar-logo {width:255px;transition: 0.2s;}
.navbar-toggle {display:none; position:absolute;right:20px;border: none;height:100%; background: none; font-size: 1.5em; color: red; }
.navbar-toggle:focus {outline: none}
.navbar-collapse {position:absolute;bottom:24px;right:100px;}
.navbar-nav {display:flex;justify-content: center;margin: 0 auto; width:100%;padding: 0; list-style: none; }
.nn-list-item {display: flex;align-items: center;justify-content: center;position: relative;margin:0 20px;text-align:center; font-size: 1.1em; transition: .2s}
.nn-list-item {display: flex;align-items: center;justify-content: center;position: relative;margin:0 20px;text-align:center; font-size: 1.1em; transition: .2s}
.nn-list-item:hover .navbar-subnav{visibility: visible; opacity: 1;}
.nn-list-item:hover .nn-link{color:red;}
.nn-link{display:inline-block; padding:10px 30px; font-weight: 600;color:#7d7b77;text-decoration: none; transition: 0.2s }

@media (max-width: 1280px) {
  .nn-list-item {margin:0 10px}
}

@media (max-width: 1024px) {
  .navbar-header {height: 100px!important;}
  .navbar-toggle{display:inline-block;}
  .navbar-brand {margin-top:10px!important;}
  .navbar-nav {display:none;position:fixed;left:0;top:100px;width:100%;padding:10px 0 ;background:#fff; text-align: center;box-shadow: 2px 2px 15px rgba(0,0,0,0.2);}
  .navbar-logo { width:200px !important;display: list-item;}
  .nn-list-item {margin:0;width:100%;line-height:40px !important;}
}

@media (max-width: 480px) {
  .navbar-header {height: 80px!important;background-size:cover!important;}
  .navbar-logo{width:150px!important}
  .navbar-nav {top:80px;}
  .nn-list-item {color: red; }
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  width: 40px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:hover{background-color: #68b554;}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  /* background-color: #000; */
}

input:focus + .slider {
  /* box-shadow: 0 0 1px #000; */
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* banner */
.header {position:relative;left:0;right:0;margin:167px auto 0 auto; max-width: 1440px;}
.header-banner{width:100%;}

@media (max-width: 1024px) {
  .header {margin-top: 100px;}
}

@media (max-width: 480px) {
  .header {margin-top: 80px;}
}

/*--------------------------------------------------------------*/
/*  Article, Layout
/*--------------------------------------------------------------*/

/*article*/
.article{margin:220px auto 0 auto;max-width:1440px;min-width:320px;}
.article-header{box-sizing: border-box;margin:53px auto 20px auto;width:86%;padding:0 30px;}
.article-title{margin:0;font-weight:800;font-size: 2em;}
.article-subtitle{margin-bottom:6px;font-weight:normal;font-size: 1.4rem;}
.article-content{box-sizing: border-box;margin:0 auto;width:86%;padding:0 30px;color:#333;font-size: 1.1em;line-height:1.8em;}
.article-photo{display: flex;flex-wrap:wrap;margin:30px 0 0 0;padding:0;list-style:none;}
.article-photo-item{margin-bottom:10px;width:100%;}
.article-photo-pic{width:100%;}
.article-photo-text{display: flex;align-items: center}
.article-photo-text .fa{margin-top:5px;margin-right:5px;transform: scaleY(1.6) translateY(15%)}
.article-photo-2row .article-photo-item{margin-right:10px;width:calc(50% - 10px);}
.article-photo-2row .article-photo-item:nth-child(2n){margin-right:0;}
.article-photo-3row .article-photo-item{margin-right:10px;width:calc(33.333% - 10px);}
.article-photo-3row .article-photo-item:nth-child(3n){margin-right:0;}

@media (max-width: 1024px) {
  .article{margin-top:100px}
}

@media (max-width: 768px) {
  .article-content{;width:90% !important;padding:0 !important;font-size:1em !important;}
  .article-header{margin:30px auto 20px auto!important;width:90% !important;padding:0;}
  .article-title{font-size:1.6em !important;margin: 0;}
  .article-subtitle{font-size:1.6em !important;}
  .article-img{width:100%;}
  .article-hr{width:90%;}
}

@media (max-width: 480px) {
  .article-header{margin:20px auto !important;}
  .article-title{font-size:1.4em !important;}
  .article-img{width:100%;}
  .article-hr{height:3px;}
  .article-photo-2row .article-photo-item{margin-right:0;width:100%;}
  .article-photo-3row .article-photo-item{margin-right:0;width:100%;}
}

/*page*/
.page-control{padding-top:20px;text-align:center;}
.page-link{display:inline-block;margin:0 4px;border-radius:5px;padding:2px 26px;background: #68b554;color:#fff;font-weight:bold;font-size:1.2em;text-decoration: none;opacity:.7;transition: .2s}
.page-link:hover{opacity:1;}
.page-link-active{opacity:1;}


/*--------------------------------------------------------------*/
/*  Footer
/*--------------------------------------------------------------*/

.footer{clear:both;display:flex;justify-content:space-between;flex-wrap: wrap;margin:20px auto 26px auto;max-width:1440px;padding:0 0 0 0;background-color: #000;}
.footer-link{box-sizing:border-box;width:50%;padding:0 30px;font-size: 1.1em;line-height: 2em}
.footer-copyright{float:right;padding:10px 30px;color:#999;font-size: 1.1em;line-height: 2em}
.footer-copyright a{margin-right:40px;}
.footer a{text-decoration: none;color:#000;}
.footer a:hover{text-decoration: underline;color:#68b554;}

@media (max-width: 1024px) {
  .footer{background-size:100%;padding-top:140px;}
}

@media (max-width: 768px) {
  .footer{padding-top:120px;}
  .footer-link{width:100%;text-align: center}
  .footer-copyright{width:100%;text-align: center}
}

@media (max-width: 480px) {
  .footer{margin-top:30px;margin-bottom:10px;padding-top:80px;font-size: .9em;}
  .footer-copyright{padding:5px;}
  .footer-link img{height:40px;}
}


/*--------------------------------------------------------------*/
/*  Index
/*--------------------------------------------------------------*/

.index-article {margin:0 auto;}
.index-article .article-header{box-sizing: border-box;margin:70px auto 50px auto;width:86%;padding:0 30px;}
.index-article .article-title{margin:0;text-align:center;font-size: 2.2em;color:#68b554;}
.index-article .article-title:before{content:"—";padding-right:5px;}
.index-article .article-title:after{content:"—";padding-left:5px;}

@media (max-width: 768px) {
  .index-spin360{margin:0!important;width:100%!important;}
}



/*--------------------------------------------------------------*/
/*  About
/*--------------------------------------------------------------*/

.about{margin-top:100px;}
.about .article-content{font-size:24px;}
.about-info{display: flex;flex-wrap: wrap;align-items: center;margin-top:30px;}
.about-info-left{box-sizing:border-box;width:60%;padding:30px;}
.about-info-right{width:40%;}
.color-green{color:#1e923d;}

@media (max-width: 768px) {
    .about{margin-top:70px;}
}

@media (max-width: 480px) {
    .about{margin-top:40px;}
    .about-info-left {width:100%;padding:0 0 30px 0;}
    .about-info-right {width:100%;}
}


/*--------------------------------------------------------------*/
/*  Service
/*--------------------------------------------------------------*/

.service-class{display:flex;margin:0 auto;width:86%;padding: 0;list-style: none;flex-wrap: wrap}
.service-class-item{box-sizing: border-box;margin: 0px 5px 0px 0px;width:calc(23% - 0px); padding: 0px;}
.service-img{margin:0;width:100%; border-radius:5px;background:no-repeat center;background-size: cover}
.service-list{margin:20px 0 40px 0;padding: 0;}
.service-list-item{margin: 0 0px 0px 0px;padding: 10px 0;font-size: 1.1em}
.service-title{clear:both;margin:0;padding:10px 0;font-weight: 400;color:#68b554;}
.service-text{margin:0;font-size:0.96em;line-height:1.4em;}
.service-link{color:#333;text-decoration: none;transition: 0.2s}
.service-link:hover{text-decoration: none;color:#68b554;}
.service-email{margin-top:30px;padding:16px 0;color:#fff;font-size:1.1em;}
.service-email-inner{box-sizing:border-box;margin:0 auto;width:86%;padding:0 30px;}


@media (max-width: 480px) {
  .service-class-item{box-sizing: border-box;margin: 0px 2px 0px 0px;width:calc(48% - 0px); padding: 0px;}
  .service-class{width:100%;}
  .service-list{margin:10px auto 30px auto;width:90%;}
  .service-list-item{padding:5px 0;}
}



/*--------------------------------------------------------------*/
/*  Contact
/*--------------------------------------------------------------*/

.contact{margin:30px auto 0 auto;}
.contact-content {width: 45%; float: left;font-size: 1.2em; padding: 20px 10px}
.maps {width: 45%;float: left;}

@media (max-width: 480px) {
.contact{margin:0 auto 0 auto;}
.contact-content {width: 100%; float: left;font-size: 1em;}
.maps {width: 100%;float: left;}
}
/*--------------------------------------------------------------*/
/*  Tool
/*--------------------------------------------------------------*/

/*ui*/
.ui-input{display:inline-block;box-sizing:border-box;border:1px solid #ddd;padding:8px 10px;background:#f2f0f0;font-size:18px;}
.ui-select{display:inline-block;box-sizing:border-box;border:1px solid #ddd;padding:8px 10px;background:#f2f0f0;font-size:18px;}
.ui-link{text-decoration: none;color:#666;}
.ui-link:hover{text-decoration: underline;}
.ui-btn-submit{width:100%;}
.ui-btn{box-sizing:border-box;display:inline-block;border:none;border-radius:5px;padding:8px 20px;background:#68b554;color:#fff;font-size:20px;text-decoration: none;transition: .2s}
.ui-btn:hover{background:#999;}
.ui-btn-light{box-sizing:border-box;display:inline-block;border:none;border-radius:5px;padding:5px 10px;line-height:18px;background:#bbb;color:#fff;font-size:20px;transition: .2s}
.ui-btn-info{border: 1px solid rgba(0,0,0,0.2);padding:7px 25px;border-radius:30px;color:#333;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-btn-info-white{border: 1px solid rgba(255,255,255,.2);padding:7px 25px;border-radius:30px;color:#fff;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info-white:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-file{padding:10px;border:1px dashed #ccc}
.ui-form hr{margin:40px 0;border:none;border-top:1px dashed #ccc;}
.ui-block {display: flex;justify-content: space-around;flex-wrap: wrap}
.ui-block .ui-block-helf{width:50%;}
.form-control{display:flex;flex-wrap:wrap;justify-content: space-between;margin-bottom: 20px}
.form-control .ui-input,.form-control .ui-select{width:calc(50% - 5px);}

@media screen and (max-width: 480px) {
  .form-control {margin-bottom:10px;}
  .form-control .ui-input{margin-bottom:10px;}
  .form-control .ui-input:last-child{margin-bottom:0;}
  .form-control .ui-input,.form-control .ui-select{width:100%;}
}

/*table*/
.ui-table {margin:0 auto;width:100%;border-spacing: 0px;}
.ui-table th{padding:10px 10px ;background:#999;color:#fff;font-weight: normal;font-size:18px;}
.ui-table td{padding:13px 10px;border-bottom:1px solid #d9d9d9;}
.ui-table tr{transition: .2s}
.ui-table tr:hover{background:#ddd;}
.ui-table .active{background:#fef4e5;}
.ui-table .delete {display: inline-block; margin:0 14px 0 0;width:16px;height:16px;border-radius:50%;text-align:center;background:#5cc2cf;color:#fff;font-size:13px;font-weight: bold;line-height: 16px;cursor: pointer}
.ui-table .add,.ui-table .subtract{display: inline-block;box-sizing:border-box;width:25px;height:25px;line-height:25px;border:1px solid #bcbcbc;vertical-align: middle;cursor: pointer;transition: 0.2s}
.ui-table .add:hover,.ui-table .subtract:hover{border-color:#f39800;background:#f39800;color:#fff;}
.ui-table a{text-decoration:none;color:#68b554;}
.ui-table a:hover{text-decoration:underline;}
.ui-table .label{display:inline-block;padding:6px 10px;border-radius:5px;background:#f39800;color:#fff;font-size: 15px}
/*.ui-table tbody tr td:nth-child(2){text-align: left}*/

@media screen and (max-width: 667px) {
  .ui-table th {display: none; }
  .ui-table td {display: block; border: none; text-align:left!important;}
  .ui-table td:before {content: attr(data-th) " : "; font-weight: bold; }
  .ui-table td {padding:10px;background:#ddd;text-align:left;}
  .ui-table td:nth-child(even) {background:#eee;}
  .ui-block .ui-block-helf{width:100%;}
}

/*effect*/
.fx-opacity0{opacity:0;}
.fx-opacity25{opacity:.25;}
.fx-opacity50{opacity:.5;}
.fx-opacity100{opacity:1;}
.d-none{display:none!important;}

/*flaticon*/
.fa-sign-out-option{background-image: url(../images/icon-sign-out-option.svg)}

/*color or bg*/
.color-purple{color:#431199;}
.color-orange{color:#ea7a48}
.color-orangelight{color:#fde7d5}
.color-red{color:#c00!important}
.color-clay{color: #999}
.bg-cover{background-repeat:no-repeat;background-position:center;background-size:cover;}
.bg-clay{background-color: #999}
.bg-claylight{background-color: #eee}
.bg-red{background-color:#c00}
.bg-orangelight{background-color:#fccfab}
.bg-pruplewhite{background-color: #e7e3f6}
.bg-linear{background: linear-gradient(0deg, rgba(0, 0, 0,.1) 0%,  rgba(0, 0, 0,0) 20%);}

/*float align*/
.flex-center{display:flex;justify-content:center;align-items:center}
.float-left{float:left;}
.float-right{float:right;}
.float-center{margin:0 auto;}
.text-left{text-align:left !important}
.text-right{text-align:right !important}
.text-center{text-align:center !important}
.text-justify {text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; /*IE9*/ -moz-text-align-last:justify; /*Firefox*/ -webkit-text-align-last:justify; /*Chrome*/ }
.text-justify:after {content: ''; display: inline-block; width: 100%; height:0; line-height:0; font-size:0; }
.valign-box{display:inline-block;vertical-align:middle;width:0;height:100%;visibility:hidden;}

/*clear*/
.clear-left{clear:left;}
.clear-right{clear:right;}
.clear-both{clear:both;width:100%}
.clear-fix{clear:both;}
.clear-fix:after{content:".";clear:both;display:block;font-size:0;height:0;line-height:0;visibility: hidden;}