/*=== Web Setting ===*/
*{-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;  }
body {font-family: 'Microsoft JhengHei'; min-width:1200px;}
.wrap {width:1200px;}
.pageContainer {width:100%}
.innerContainer {width:100%}
h1 {}
h2 {}
p {}

/*======*/

body {-webkit-text-size-adjust: 100%  /*fix ios*/}

.pageContainer { position:relative; padding:0; overflow:hidden; clear:both /*fix firefox*/}


#header , #footer {position:relative; width:100%}

.wrap { position:relative; margin:0 auto; padding:0; overflow:hidden}
.mainContent{position:relative; width:100%; overflow:hidden}

.fLeft{float: left;}
.fRight{float: right;}
.flex{display: flex}
.flex-h-center{justify-content: center; -webkit-justify-content: center;}
.flex-v-center{    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;}


/*==========================================
Header
==========================================*/
#header{margin-bottom: 20px;}
.headerTop{padding-top: 15px;}
.nav .navRightLink a{color: #2b2b2b; font-size: 15px; line-height: 25px; margin-right: 50px; font-weight: bold;}
.nav .navRightLink a.selected, nav .navRightLink a:hover{color: #9b7124;}
.nav .lang a{color: #2b2b2b; font-size: 15px; line-height: 25px; margin: 0 15px; font-weight: bold;}
.nav .lang a.selected, nav .lang a:hover{color: #9b7124;}
.nav{margin-top: 20px;}

.main-nav .wrap{overflow: inherit;}
.main-nav{background: #9b7124; width: 100%;}
.main-nav ul > li{float: left; /*padding: 10px 0px;*/ width:11%; border-right: 1px solid #fff;}
.main-nav ul > li a{display:block; width:100%; color:#fff; font-size: 16px; line-height: 20px; /*border-right: 1px solid #fff;*/ padding: 9px 15px;}

.main-nav ul li:hover, .main-nav ul li a.selected{background: #e19e24}
.main-nav ul li:nth-of-type(1) {border-left: 1px solid #fff;}
#nav {min-height: 40px;}
#nav li {float:left;text-align:center;}
/* --------- Drop Down -------- */
#nav ul {position:absolute;left:-999em;top:2em;list-style:none;z-index: 9999;background: #e19e24}
#nav li:hover ul {	left:0;	top: 40px; }
#nav li:hover ul li{ position: relative; float: none; text-align:left; padding: 15px}
#nav li:hover ul li a{border: 0 !important;}
#nav li:hover ul li:hover{	background: #b17e1f}
#nav li:hover ul li a{padding-left: 25px;}
#nav li:hover ul li a i{padding-right: 10px;}

.subNavList li {border:0 !important}

/*==============================================
index
==============================================*/
#top-banner{width: 100%;    margin-bottom: -2px;}
#top-banner .swiper-slide a {margin:0 auto}
.bannerText{position: absolute; left: 19%; top:30%;}
.bannerText p{font-size: 45px; color:#fff; text-shadow:0 2px 5px rgba(0,0,0, .7); padding-bottom: 10px;}

.swiper-pagination-bullet{width: 15px !important; height: 15px !important; background: #d8d8d8 !important; opacity: 1 !important; margin: 0px 15px !important;}
.swiper-pagination-bullet-active{background: #9b7124 !important}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 20px !important;}
.our-services{clear: both; background: #b1b1b1; height: 65px;}
.our-services h2{font-size: 30px; color: #9b7124; font-weight: bold;}
.our-services-triangle{height: 15px; position: relative; text-align: center; clear: both; width: 100%;}
.our-services-triangle p:after{content:""; width: 0;height: 0;border-style: solid;border-width: 15px 15px 0 15px;border-color: #b1b1b1 transparent transparent transparent;    position: absolute;    top: 0px;    z-index: 9999;    left: calc(50% - 15px);}

.our-services-container, .our-services-triangle{background: #f0f0f0;}
.our-services-container{padding-top: 30px;}
.services li{float: left; margin-right: 5%; width: 30%; margin-bottom: 30px;}
.services li:nth-of-type(3n){margin-right: 0px;}
.services li img{max-width: 100%; max-height: 100%; width: auto; height: auto; display: flex}
.services li .title{background: #838383; padding: 15px 20px;}
.services li .title p{color: #fff; font-size: 16px; font-weight: bold;line-height: 20px;}
.services li .title i{color: #fff; float: right;}
.services li .desc{font-size: 14px; margin: 15px 0px; line-height: 20px; color:#000;}
.services li a:hover .img-over{opacity: 1}
.img-container{position: relative;}
.img-over{position: absolute; background: #c78a1bab; z-index: 99999; top: 0; right: 0; width: 100%; height: 100%; opacity:  0; transition: 0.3s}
.img-over img{position: absolute; top: calc(50% - 52px); left: calc(50% - 52px);}

.index-about{background: url(../images/index-about.jpg); padding: 45px 0px;}

.index-about h2, .index-about h1{font-size: 25px; line-height: 25px; color: #fff; text-align: center;}
.index-about h2 span, .index-about h1 span{font-weight: bold}
.index-about hr{border-color: #fff; margin: 25px 0px;}
.index-about p{color: #fff; font-size: 16px; line-height: 25px; text-align: center; padding: 25px 20px; margin: 25px 0; border: solid 2px #fff;}
.btn{font-size: 16px; font-weight: bold; color: #9b7124; background: #fff; padding: 10px 30px; border-radius: 20px; clear: both; float: left; position: relative;}
.btn i{color: #9b7124; margin-left: 10px;}
.btn:hover{background: #9b7124; color: #fff}
.btn:hover i{color: #fff}
.btn-container{text-align: center; margin-bottom: 15px;}

/*==========================================
Common
==========================================*/
.banner{position: relative;}
.banner h1{position: absolute; font-size: 48px; color: #fff; font-weight: bold; text-shadow: 0px 3px #000000;}
.page-content{margin-top: 45px; margin-bottom: 45px;}
.breadcrumb{font-size: 13px; color: #5f6060; text-align: right; width: 100%; line-height: 20px; margin-bottom: 35px;}
.breadcrumb a{font-size: 13px; color: #5f6060; line-height: 20px;}
.breadcrumb a.selected, .breadcrumb a:hover{color: #9b7124}
.sidebar{width: 350px; margin-bottom: 30px;}
.sideNav{margin-bottom: 35px; float: left;}
.sideNav h2{color: #fff; background: #838383; font-size: 18px; font-weight: bold; line-height: 25px; width: 100%; padding: 20px;}
.sideNav ul li{border-top: 1px solid #fff; float: left; width: 100%;}
.sideNav ul li a{font-size: 15px; color: #fff; padding: 15px 20px; float: left; width: 100%; line-height: 25px;    background: #9b7124; position: relative;}
.sideNav ul li a.selected, .sideNav ul li a:hover{background: #e19e24}
.sideNav ul li a.selected:after, .sideNav ul li a:hover:after{content:''; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 5px; border-color: transparent transparent transparent #ffffff; position: absolute; top: 45%; right: 20px;}

.page-detail{width: 100%;}
.hasSideBar{width: calc(100% - 385px); margin-left: 35px;}
.page-detail h1{font-size: 30px; color: #9b7124; line-height: 40px;}
.page-detail hr{border-color: #9b7124; margin: 15px 0px 30px 0px;}
.page-detail p{font-size: 15px; color: #9b7124; line-height: 20px; margin-bottom: 20px; text-align: justify;}
.page-detail p *{font-size: 15px !important; /*color: #9b7124;*/ line-height: 20px;font-family: '微軟正黑體';}
.page-detail p, .page-detail p *, .page-detail ol li, .page-detail ul li, .page-detail li * {text-align: justify;}
.page-detail td *{text-align: inherit;}
.maxWidth75{width: 75%;}
.page-detail ol, .page-detail ul{/*list-style: inside;*/ padding-left: 15px; /*padding-left: 0px;*/ list-style-type: decimal !important; margin-bottom: 20px;}
.page-detail ol li, .page-detail ul li{font-size: 15px; color: #333333; padding-left: 15px; padding-left:0px; line-height: 20px; margin-bottom: 5px;}
.rightPhoto{width: 335px; float: left}
.hasRightPhoto{width: calc(100% - 400px); margin-right: 65px; float: left}
.right-photo-container{width: 285px; height: 210px; background: #fff; margin-top: -35px; position: relative;}
.right-photo-container .img-container{width: 265px; height: 185px;}
.right-photo-container:nth-of-type(1){margin-top: 0px;}
.right-photo-container .img-container img{max-height: 100%; max-width: 100%; width: auto; height: auto;}


.download{float: left; width: 100%; }
.download fieldset{border-color: #cbcbcb; border-radius: 10px; padding: 30px; padding-top: 50px;}
.download legend{margin: 0 auto; font-size: 20px; font-weight: bold; color: #9b7124; padding: 0px 25px;}

.download li{float: left; width: 100%; margin-bottom: 45px;}
.download li:last-of-type{margin-bottom: 0px;}

.download li:nth-child(odd){border: 1px solid #b3b3d8;}
.download li:nth-child(even){border: 1px solid #d8b3b3;}

.download li a{font-size: 15px; font-weight: bold; float: left; width: 100%; position: relative; padding: 13px 0px; line-height: 20px; padding-left: 60px; padding-right: 30px;}

.download li:nth-child(odd) a{background: #e1f1ff; color: #9b7124; border-right: 10px solid #9b7124; }
.download li:nth-child(even) a{background: #ffe1e1; color: #913b3b; border-right: 10px solid #913b3b; }

.download li a:after{content:''; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 5px; position: absolute; top: 40%; right: 20px;}
.download li:nth-child(odd) a:after{border-color: transparent transparent transparent #9b7124;}
.download li:nth-child(even) a:after{border-color: transparent transparent transparent #913b3b;}

.download li a img{position: absolute; left: -10px; top: -32px;}

.page-detail{margin-bottom: 120px; margin-bottom: 0px;}

.page-detail table{width: 100%; border-collapse: collapse; border:1px solid #9b7124; margin-bottom: 60px;}

.page-detail table tr td{color: #9b7124; font-size: 15px; padding:15px 10px; text-align: center; line-height: 20px;}
.page-detail table tr td:nth-of-type(1){text-align: left; max-width: 315px; padding-left: 20px;}
/*.page-detail table tr:nth-of-type(1) td{background: #e19e24; border-color:#e19e24; font-size: 15px; font-weight: bold; color: #fff; }*/

.page-detail table tr td p{margin: 0px; margin-bottom: 5px;}

.page-detail h3{font-size: 18px !important; color: #9b7124; margin-bottom: 10px; line-height: 25px; margin-top: 55px;}
.page-detail h3 span{font-size: 18px !important}
.page-detail ol{margin-bottom: 20px;}
.page-detail ol li{margin-left: 0px; margin-bottom: 15px;}
.page-detail a{color: #9b7124; text-decoration: underline;}

#map{height: 285px;}
.infoBox{background: #fff; border: 1px solid #9b7124; border-radius: 10px; padding: 20px; width: 400px; }
.infoBox p.title{color: #9b7124; font-size: 15px; font-weight: bold; line-height: 20px; margin-bottom: 15px;}
.infoBox p.address{font-size: 15px; color: #4e4e4e; line-height: 20px; margin-bottom: 0}

.company-detail{float: left; width: 600px; margin-top: 40px;}
.table-tr {width: 100%; overflow: hidden;}
.table-tr > div {float: left;}
.company-detail .table-tr{margin-bottom: 30px;}
.company-detail .table-tr > div:nth-of-type(1){width: 45px; margin-right: 20px;}
.company-detail .table-tr > div:nth-of-type(2){width: 535px; padding: 10px 0px; line-height: 30px; font-size: 15px; color: #4e4e4e;}

.contact-us-form-container{float: right;}

.contact-us-form-container h2{font-size: 30px; color: #9b7124; margin-bottom: 20px; margin-top: 40px;}

.contact-us-form{float: right; width: 570px; background: #ececec; border-radius: 10px; padding: 30px;}
.contact-us-form .table-tr{margin-bottom: 20px;}
.contact-us-form .table-tr > div:nth-of-type(1){width: 140px; color: #9b7124; font-size: 15px; height: 35px; line-height: 25px;}
.contact-us-form .table-tr > div:nth-of-type(2){width: calc(100% - 140px);}
.contact-us-form .table-tr > div:nth-of-type(2) input{width: 100%; height: 35px; border:0px;}
.contact-us-form .table-tr > div:nth-of-type(2) textarea{width: 100%; height: 100px; border:0px;}
.contact-us-form .table-tr .btn{text-decoration: none; padding: 10px 55px;}

.hotline{clear: both; width: 100%; margin-top: 35px; float: left;}
.hotline h2{font-size: 30px; color: #9b7124; margin-bottom: 20px; text-align: center;}
.hotline-detail{background: #a18655; border-radius: 10px; padding: 30px;}
.hotline-main li {float: left;margin-right: 25px; width: 260px;}
.hotline-main li:last-of-type{margin-right: 0}
.hotline-main li p:nth-of-type(1){font-size: 18px; font-weight: bold; color: #fff; line-height: 25px; border-bottom: 1px solid #fff; text-align: center; margin-bottom: 30px; padding-bottom: 10px;}
.hotline-main li p{color: #fff; font-size: 15px;line-height: 20px;}
.hotline-main li p span{font-weight: bold; }
.hotline-main li p.title{margin-bottom: 10px; font-weight: bold;}
.hotline-main li p.tel{margin-bottom: 10px;}


.award li{float:left; width: 32%; margin-right: 2%; background: #eee; margin-bottom: 30px !important; position: relative;}
.award li:nth-of-type(3n){margin-right: 0px;}
.award li img{max-width: 100%; max-height: 100%; width: auto; height: auto;}
.award-container{width: 90%; padding: 5px;}
.img-over-flip i{position: absolute; top: calc(50% - 9px); left: calc(50% - 9px); font-size: 20px; font-weight: inherit; color: #fff;}
.img-over-flip{position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); top: 0; transition: 0.5s; transform: scale(0.5) scaleX(-1); opacity: 0}
.award li a:hover .img-over-flip{transform: scale(1) scaleX(1); opacity: 1}

/* mobile */


.mobileIcon {display:none; position:relative; top:10px; height:36px; width:36px; background-color:#fff;  padding:8px; border:2px solid #fff; border-radius:5px; z-index:999}
.mobileIcon span {margin:0 auto; display:block; width:17px; height:2px; background-color:#9b7124; margin-bottom:5px; transition:0.5s; -webkit-transition:0.5s}
.mobileIcon span:nth-last-of-type(1) {margin-bottom:0}
.mobileIcon.opened {padding:3px 8px}
.mobileIcon.opened span:nth-of-type(1) {transform: translate(0px, 13px) rotate(-45deg) scalex(1.3); -webkit-transform: translate(0px, 13px) rotate(-45deg) scalex(1.3); margin-bottom:0}
.mobileIcon.opened span:nth-of-type(2) {display:none}
.mobileIcon.opened span:nth-last-of-type(1) {-webkit-transform: translate(0px, 11px) rotate(45deg) scalex(1.3)}

.sb-slidebar {background-color:#252525 !important}




/*==========================================
Footer
==========================================*/
.footer-top{background: #5e5e5f; padding: 25px 0px;}
.footer-main-nav > li {float: left; margin-right: 30px;}
.footer-main-nav > li > a{font-weight: bold;}
.footer-main-nav > li a{font-size: 13px; color: #c4c4c4; margin-bottom: 15px; line-height: 20px;}
.footer-main-nav > li > ul{margin-top: 15px;}
.footer-main-nav > li > ul li{font-size: 13px; color: #c4c4c4; margin-bottom: 10px; line-height: 20px; margin-right: 0px;}
.footer-bottom{background: #4e4e4e; padding: 10px 0px;}
.footerNav a{font-size: 14px; color: #c4c4c4; margin-right: 30px; font-weight: bold;}
.footerNav li{float: left;}
.copyRight{font-size: 12px; color: #c4c4c4;  float: right;}

/*Top btn*/
#back-top {	display:none; position:fixed; z-index:999; bottom:45px; right:20px;}
#back-top a { display: block; width:25px; height:25px; background:url('../images/btn_top.png') no-repeat left top; text-indent:100%; white-space:nowrap; overflow:hidden;}
#back-top a:hover { background-position:left bottom;}

.page-detail li{font-size: 16px !important; line-height: 20px; margin-bottom: 5px; color: #333333;list-style: disc;}
.page-detail li span{font-size: 16px !important; line-height: 20px; color: #333333;font-family: 微軟正黑體;}
.page-detail a{color: -webkit-link !important;}
.contact-us-form a{color: #9b7124 !important}
.contact-us-form a:hover{color: #fff !important}
.hotline-detail *{color: #fff !important}
/*==========================================
CMS Style
==========================================*/

.undoreset table {border:1px solid #000}
.undoreset table td {border:1px solid #000; padding:5px; vertical-align:middle}
.undoreset img {max-width:100%}
.undoreset p {margin:0 0 30px 0}
.undoreset ul {list-style-type:disc}
.undoreset ol {list-style-type:decimal}
.undoreset li {margin-left:25px}




.page-detail ol.award, .page-detail ul.award, .hotline-detail ul{list-style: none !important}

#page404{text-align: center; min-height: 45vh; display: flex; align-items: center; justify-content: center;}
#page404 div{width: 100%;}
#page404 h1{font-size: 40px; font-weight: bold; margin-bottom: 10px;}
#page404 h2{font-size: 16px; color: #999; font-weight: bold; margin-bottom: 10px;}
#page404 hr{border-top: 1px solid #efe9e9; margin: 40px 0px;}
#page404 p{margin-bottom: 10px; color: #999; font-weight: bold;}