/*=== Web Setting ===*/
body {font-family: 'Microsoft JhengHei', 'Roboto', sans-serif; }
.wrap {width:100%;}
.wrap2 {width:80%}
.pageContainer {width:100%; margin-top:135px}
.innerContainer {width:100%}
h1 {font-size:30px; line-height:36px; margin-bottom:30px; color:#f7941d; }
h2 {font-size:28px; line-height:36px; font-weight:bold; color:#f7941d; margin-bottom:30px}
p, .undoreset p, .undoreset li {font-size:20px; color:#3b3b3b; line-height:32px; margin:0 0 32px 0}
p.font13 {font-size:13px; color:#797979; margin-top:30px}
p.font13 a {color:#797979; }

/*======*/

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 3%; }
.mainContent {position:relative; width:100%; overflow:hidden}

/*==========================================
Header
==========================================*/
header {position:fixed; top:0; left:0; width:100%; z-index:9; background-color:#fff}
header.fixed #headerTop {height:75px}
header.fixed .mainLogo img {width:60px}
header.fixed #headerTop .searchBar {margin:15px 0}
header.fixed #headerTop .langNav {height:75px; line-height:75px}
#headerTop {height:90px}
#headerTop .mainLogo {margin-top:7px}
.mainLogo img {width:77px}
#headerTop .searchBar {width:50%; height:46px; border:1px solid #f7941d; margin:22px 0}
#headerTop .searchBar input[type="text"] {height:44px; width:100%; border:0; font-size:16px}
#headerTop .searchBar .btn_search {display:block; width:104px; height:44px; line-height:44px; font-size:17px; color:#fff; background-color:#d91a5b; text-align:center}
#headerTop .searchBar .btn_search:hover {background-color:#f7941d}
#headerTop .searchBar .btn_search .inlineImg {margin-right:5px}
#headerTop .langNav {font-size:15px; color:#969696; line-height:90px; }
#headerTop .langNav a {color:#969696; margin:0 10px}
#headerTop .langNav a:hover, #headerTop .langNav a.selected {color:#f7941d}

nav {position:relative; border-top:7px solid #d91a5b; background-color:#f7941d}
nav #mainNav > li {position:relative; width:150px; height:38px; margin:0 33px; z-index:9}
nav #mainNav > li > a {display:block; line-height:34px; font-size:20px; color:#fff; width:100%; text-align:center}
nav #subNav {position:absolute; top:38px; left:0; width:100%; height:0; background-color:rgba(231,126,0, .7); z-index:10; overflow:hidden;}
nav #subNav ul {position:relative; width:160px; margin:15px 23px }
nav #subNav ul li {padding-left:20px}
nav #subNav ul li a {display:block; padding-left:15px; font-size:15px; color:#fff; line-height:36px}
nav #subNav ul li a:hover {background:url('../images/icons/icon_arrow02.png') no-repeat left center; text-decoration:underline}

nav #navLine {position:absolute; bottom:0; left:0; width:150px; height:4px; background-color:#fff}
nav #navLine span {position:absolute; top:4px; left:calc(50% - 6px); width: 0; height: 0; border-style: solid; border-width: 6px 5.5px 0 5.5px; border-color: #ffffff transparent transparent transparent; z-index:11}
nav:hover #subNav {height:auto}

/*==========================================
Common
==========================================*/
#homeLeft, #homeRight {position:relative; width:50%}

#leftSlider {width:100%; }
#leftSlider .swiper-pagination-bullet {width:10px; height:10px; margin:0 4px; background-color:#fff; opacity:1}
#leftSlider .swiper-pagination-bullet-active {background-color:#f7941d}
#leftSlider .swiper-slide img {width:100%; display:block}
#leftSlider .swiperCaption {position:absolute; bottom:60px; width:100%; height:50px; line-height:50px; font-size:28px; color:#fff; text-align:center; background:rgba(119,73,0, .6)}
.homePhoto {position:absolute; top:0; left:0; width:100%; height:40%}
.homePhoto div {position:relative; width:50%; height:100%; background-size:cover; background-repeat:no-repeat;}
.homePhoto div:hover {opacity:0.5}
.homePhoto a {display:block; width:100%; height:100%}
.homeRight1 {top:0;}
.homeRight2 {top:40%;}
.homeRight3 {top:60%;}
#homeTitle {position:absolute; width:100%; height:20%; background-color:#774900}
#homeTitle .fLeft {margin-right:30px}
#homeTitle h1 {font-size:40px; color:#fff; margin-bottom:5px}
#homeTitle p {font-size:24px; line-height:26px; color:#f7941d; margin-bottom:0}
#homeTitle p span {font-size:20px}

#aboutText {width:50%}
#aboutVideo {width:46%}
#aboutVideo iframe {width:100%; height:467px}

#chronicle {height:460px}
#chronicle li {width:250px}
#chronicle .year {position:relative; width:100%; height:59px; line-height:59px; padding:0 23px; text-align:center; font-size:28px; color:#fff; margin-bottom:15px}
#chronicle .year span {display:block; width:100%; height:59px; background:url('../images/icons/bg_aboutArrowM.png') repeat-x}
#chronicle .year:before {position:absolute; top:0; left:0; width:23px; height:59px; background:url('../images/icons/bg_aboutArrowL.png') no-repeat left bottom; content:" "}
#chronicle .year:after {position:absolute; top:0; right:0; width:23px; height:59px; background:url('../images/icons/bg_aboutArrowR.png') no-repeat left bottom; content:" "}

#chronicle .event {width:100%; height:170px; padding:18px; border-right:1px solid #fff}
#chronicle li:nth-child(1) .year:before {background-position:left top}
#chronicle li:nth-child(1) .event {border-left:1px solid #fff}

.sideBar {overflow:hidden; width:310px; }
.sideBar ul {width:100%; border:1px solid #dedede; border-bottom:0}
.sideBar li {position:relative; border-bottom:1px solid #dedede}
.sideBar li a {display:block; padding-left:20px; width:100%; height:70px; line-height:70px;}
.sideBar ul > li > a {font-size:18px; color:#f7941d}
.sideBar ol {display:none}
.sideBar ol li {border-bottom:0; }
.sideBar ol li a {font-size:17px; color:#fff; background-color:#d91a5b; border-top:1px solid #dedede}
.sideBar ol li a:hover {background-color:#f7941d}
.sideBar .title {background-color:#f7941d; width:100%; height:54px; line-height:54px; padding-left:20px; font-size:20px; color:#fff; border-bottom:0}
.sideBar .title:after {position:absolute; content:" "; right:0; width:10px; height:100%; background-color:#d91a5b}
.sideBar ul > li > a:hover {color:#d91a5b}
.sideBar ul > li > a.selected {color:#d91a5b; background:url('../images/icons/icon_arrow01.png') no-repeat right 13px center}
.sideBar ul > li > a.selected + ol {display:block}

.innerContent {padding-left:80px}
.innerContent h1 a {color:#f7941d;}
.innerContent h1 a.selected {color:#d91a5b}
.products {width:100%; margin-bottom:-30px}
.products li {position:relative; width:21.5%; margin-right:4%; border:1px solid #dedede; margin-bottom:30px}
.products li:nth-child(4n) {margin-right:0}
.products li .over {opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(247,148,29, .7); z-index:2}
.products li .over div {width:100%; padding-top:60px; background:url('../images/icons/icon_more01.png') no-repeat top center; text-align:center; font-size:20px; color:#fff; transform:scale(0); -webkit-transform:scale(0);}
.products li .imgThumb {width:100%; padding:30px 17px 70px 17px; background-color:#fff}
.products li figcaption {position:absolute; bottom:0; left:0; width:100%; height:40px; line-height:40px; background-color:#f7941d; font-size:20px; color:#fff}
.products li:hover .over {opacity:1}
.products li:hover .over div {transform:scale(1); -webkit-transform:scale(1);}
#productList {width:80%; min-height:500px;}
.productImg {width:40%; padding:100px 35px; border:1px solid #dedede; }
#productDesc {width:56%; margin-left:4%; background-color:#fce7ce}
#productDesc .tabMenu {width:100%; display:inline-block}
#productDesc .tabMenu li {position:relative; float:left; width:50%}
#productDesc .tabMenu a {display:block; width:100%; height:40px; line-height:40px; font-size:24px; color:#fff; text-align:center; background:url('../images/icons/bg_tab02.jpg') repeat-x}
#productDesc .tabMenu li.ui-tabs-active a:after {position:absolute; bottom:-13px; left:calc(50% - 12.5px); content:" "; width: 0; height: 0; border-style: solid; border-width: 13px 12.5px 0 12.5px; border-color: #f7951d transparent transparent transparent;}
#productDesc .tabMenu li.ui-tabs-active a {background-image:url('../images/icons/bg_tab01.jpg')}
#productDesc .tabMenu li:nth-child(1) a {border-radius:3px 0 0 3px}
#productDesc .tabMenu li:nth-child(2) a {border-radius:0 3px 3px 0}
#productDesc .tabContent {padding:40px 25px }
#productDesc .tabContent iframe {display:inline-block; width:600px; height:400px; margin:0 auto; max-width:100%}
#productDesc .tabContent #formula li {padding:14px 64px; border-bottom:1px solid #f7941d}
#productDesc .tabContent #formula li p {margin-bottom:0}
#productDesc .tabContent #formula li a {display:block; padding-left:48px; background:url('../images/icons/icon_pdf.png') no-repeat left center}

#contactInfo div {width:25%; border-left:1px solid #f7941d; padding:20px}
#contactInfo div:nth-of-type(1) {border-left:0}
#contactInfo div span {display:inline-block; width:60px; height:60px; background:url('../images/icons/icon_contact.png') no-repeat; margin-bottom:15px}
#contactInfo div a {color:#3b3b3b; text-decoration:underline}
#contactInfo div a:hover {color:#f7941d}
#contactInfo #contactAddr span {background-position:0 0 }
#contactInfo #contactTel span {background-position:-60px 0 }
#contactInfo #contactFax span {background-position:-120px 0 }
#contactInfo #contactEmail span {background-position:-180px 0 }

#contactForm .tableTr {margin-bottom:20px}
#contactForm .tableTr div {font-size:20px; color:#fff; line-height:32px;}
#contactForm .tableTr div:nth-of-type(1) {width:100%; max-width:130px}
#contactForm .tableTr div:nth-of-type(2) {width:100%}
#contactForm .tableTr div input {display:block; width:100%; height:32px; border:0}
#contactForm .tableTr div textarea {display:block; border:0; width:100%; height:180px}

#map {width:1000px;}
#map iframe {width:100%; height:400px}




/* mobile */

.mobileIcon {display:none; position:absolute; top:0px; right:0; height:53px; width:53px; background-color:#fff;  padding:18px; z-index:999}
.mobileIcon span {margin:0 auto; display:block; width:17px; height:2px; background-color:#f7941d; margin-bottom:5px; transition:0.5s; -webkit-transition:0.5s}
.mobileIcon span:nth-last-of-type(1) {margin-bottom:0}
.mobileIcon.opened {padding:13px}
.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)}
.mobileSearch {position:absolute; top:0; right:53px; width:53px; height:53px; background:url('../images/icons/icon_zoom02.png') no-repeat center center; background-size:20px}
.mobileLang {position:absolute; top:0; right:106px; width:65px; height:53px; line-height:53px; font-size:16px; color:#f7941d; text-align:center}

.sb-slidebar {background-color:#774900 !important; border-left:1px solid #f7ac53}
.mobileNav li {background-color:#f7941d; border-bottom:1px solid #f7ac53; overflow:hidden}
.mobileNav li.selected {background-color:#d91a5b; }
.mobileNav li a {float:left; display:block; width:230px; height:60px; line-height:60px; font-size:20px; color:#fff; padding:0 20px;}
.mobileNav li span {float:right; display:block; width:48px; height:60px; background:url('../images/icons/icon_arrowD01.png') no-repeat center center; cursor:pointer}
.mobileNav li span.open {transform:rotate(-180deg)}
.mobileNav .mSub {display:none; background-color:#ca7a1a}
.mobileNav .mSub a {height:50px; line-height:50px; font-size:18px}


/*==========================================
Footer
==========================================*/



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

/*==========================================
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 ul, .undoreset ol {padding-left:0}
.undoreset ul {list-style-type:disc}
.undoreset ol {list-style-type:decimal}
.undoreset li {margin-left:25px; margin-bottom:10px}