/*=== Web Setting ===*/
body {font-family: 'Roboto', 'Microsoft JhengHei';}
.wrap {width:1200px;}
.pageContainer {width:100%}
.innerContainer {width:100%}
h1 {font-size:30px; color:#00a0e9; font-weight:bold}
h1.innerTitle {margin:70px 0 40px 0}
h2 {font-size:18px; color:#00a0e9; font-weight:bold}
p {font-size:15px; color:#424242; line-height:22px; margin-bottom:22px}

/*======*/

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; min-height:800px}

/*==========================================
Header
==========================================*/
#header {position:relative; z-index:10; }
#header.right {right:300px}
.nav.fixed {position:fixed; top:100px; z-index:11}
.nav.fixed + .searchWrap {position:fixed; top:160px}

.mainLogo {line-height:100px; width:210px; margin:0 auto}
.mainLogo img {width:100%; max-width:100%; vertical-align:middle}

.topBar {position:fixed; height:100px; width:100%; overflow:hidden; background-color:#fff; text-align:center;  top:0; z-index:11}
.topBar .langNav {position:absolute; top:0; right:0; line-height:100px}
.topBar .langNav a {float:left; font-size:15px; color:#424242; margin-left:20px}
.topBar .langNav a:hover, #header .topBar .langNav a.selected {color:#00a0e9}
.nav {width:100%; height:60px; background-color:#00a0e9; text-align:center;}
.hoverWrap {position:relative; display:inline-block; }
.hoverWrap ul {position:relative; z-index:2}

#bannerSlider {margin-top:100px}
#mobileSlider {display:none; margin-top:46px}

.nav li {float:left; margin-left:85px}
.nav li:nth-child(1) {margin-left:0}
.nav li a {display:block; font-size:17px; color:#ffffff; line-height:60px; font-weight:700}
.searchBtn {display:block; width:23px; height:60px; background:url('../images/icons/search.png') no-repeat center center}
.nav .hover {position:absolute; right:-2000px; top:0; width:170px; height:60px; background:url('../images/icons/hover.png') no-repeat; z-index:1; transition:0.3s; -webkit-transition:0.3s}

.searchWrap {display:none; position:absolute; width:100%; height:60px}
.searchBar {position:relative; height:60px; right:120px; top:0}
.searchBar a {float:right; position:relative; display:block; width:74px; height:100%; line-height:60px;  }
.searchBar a .arrow {position:absolute; display:block; width:100%; height:100%; background:url('../images/icons/arrowR.png') no-repeat center center; z-index:2}
.searchBar a .bg {display:block; width:100%; height:100%; background-color:#a5a5a5; transform:skewX(-26deg); -webkit-transform:skewX(-26deg); transition:0.2s; -webkit-transform:0.2s}
.searchBar a:hover .bg {background-color:#00a0e9}
.searchBar .inputWrap {position:relative; float:right; width:530px; height:100%; line-height:60px;}
.searchBar .inputBg {position:absolute; top:0; left:0; width:530px; width:100%; height:100%; background-color:#e6e6e6; transform:skewX(-26deg); -webkit-transform:skewX(-26deg); }
.searchBar input {position:relative; width:100%; height:100%; padding:0 20px; font-size:18px; color:#6d6d6d; border:none; margin:0; z-index:2; background:none}

#mobileHead {display:none; position:fixed; top:0; left:0; z-index:11; width:100%; height:46px; background-color:#00a0e9}

#mobileLogo {float:left; display:block; height:25px; margin-top:10px; margin-left:10px}
#mobileLogo img {height:100%}

.mobileNav {width:100%; margin-top:10px}
.mobileNav li {}
.mobileNav li a {display:block; line-height:30px; padding:5px 0 5px 20px; font-size:18px; color:#fff;}

/*==========================================
Common
==========================================*/

.icon_calendar {padding-left:24px; line-height:19px; background:url('../images/icons/calendar.png') no-repeat left top; color:#00a0e9; cursor:pointer}
.icon_calendar:hover {background-position:left bottom; color:#424242}


.swiper-slide img {display:block; width:100%}
.swiper-pagination-bullet {background-color:#929292; opacity:1; }
.swiper-pagination-bullet-active {background-color:#00a0e9}
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {margin:0 8px}
#promoSlider {margin:0 42px}
#promoSlider .swiper-slide p a {color:#424242}
#promoSlider .swiper-slide p a:hover {color:#00a0e9}
#promoSlider .imgThumb {position:relative; margin-bottom:10px}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next,
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image:url('../images/icons/sliderArrow.png'); background-size:64px; width:32px; height:32px}
.swiper-button-prev {left:0; background-position:left top}
.swiper-button-prev:hover {background-position:left bottom}
.swiper-button-next {right:0; background-position:right top}
.swiper-button-next:hover {background-position:right bottom}

.banner {width:100%; margin-top:100px}
.banner > img {display:block; width:100%}
.mBanner {display:none; width:100%}
.mBanner > img {display:block; width:100%}

.homeSection {padding:45px 0}
.homeSection.bgGrey {padding:60px 0; background-color:#f4f4f4}
.homeSection.bgAbout {height:800px; background:url('../images/bgAbout.jpg') no-repeat bottom center}
.bgAbout h1 {margin:305px 0 15px 0; color:#fff}
.bgAbout p {color:#fff}
.bgAbout .btnStyleA {margin-top:15px}
.bgAbout .btnStyleA_text {color:#fff}
.bgAbout .btnStyleA_bg {border-color:#fff}
.bgAbout .btnStyleA:hover .btnStyleA_bg {background-color:#fff}
.bgAbout .btnStyleA:hover .btnStyleA_text {color:#00a0e9}

#homeProductTab .tabs-menu ul {width:100%; margin-bottom:15px}
#homeProductTab .tabs-menu ul li {display:inline-block; margin:0 57px;}
#homeProductTab .tabs-menu a {padding:0 38px; font-size:18px; color:#000000; font-weight:bold}
#homeProductTab .tabs-menu .ui-tabs-active a {color:#00a0e9}
#homeProductTab .track {position:relative; width:100%; height:6px; border-top:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd; margin-bottom:45px} 
#homeProductTab .track span {position:absolute; width:100px; height:6px; background-color:#00a0e9; transform:skewX(-45deg); -webkit-transform:skewX(-45deg); transition:0.3s; -webkit-transition:0.3s}
.productList li {position:relative; width:25%; overflow:hidden}
.productList .imgThumb {width:100%}
.productList .imgThumb .title {width:100%; clear:both; font-size:22px; color:#fff;}
.productList .imgThumb .line {clear:both; display:block; width:0px; height:1px; background-color:#00a0e9; margin:14px auto; transition:0.5s; -webkit-transition:0.5s; }
.productList .imgThumb p {width:80%; margin:0 10%; clear:both; color:#fff}
.productList .imgThumb a.blackBox {position:absolute; left:0; top:0; width:100%; height:100%; padding:0 10px; opacity:0; background-color:rgba(0,0,0, .7); transition:0.5s; -webkit-transition:0.5s; overflow:hidden}
.productList .imgThumb a.blackBox:hover {opacity:1; }
.productList .imgThumb a.blackBox:hover .line {width:70px}

.products {padding:0 70px}
.productListBox {width:75%}
.productListBox .productList li {width:33.33%}
.productCate {width:25%}
.cateList {width:100%; margin-bottom:25px}
.cateList li {width:100%; margin-bottom:10px}
.cateList li > a {padding-left:25px; font-size:15px; color:#424242; line-height:24px; }
.cateList li > a:hover, .cateList li > a.selected {background:url('../images/icons/cateArrow.png') no-repeat left center; color:#00a0e9}
.cateList > li > a {text-transform:uppercase}
.cateList li ol {display:none; padding:5px 0}
.cateList li ol li {margin-bottom:0}
.cateList li ol li > a {padding-left:37px; font-size:15px; color:#424242; line-height:30px; }

.slick-slider {margin-bottom:0}
.slick-slide img {width:100%} /* fullWidth img */
.slick-slide {height:auto} /* fix height */
.slick-dots li button:before {display:none}
.slick-dots li button {background-color:#000}
.slick-prev, .slick-next {width:37px; height:122px; background:url('../images/icons/productArrow.png') no-repeat left top; opacity:1; z-index:99}
.slick-next {right:0; background-position:right top}
.slick-prev:hover, .slick-next:hover {opacity:1 !important}
.slick-prev:before, .slick-next:before {display:none}
.slick-prev:hover {background-position:left bottom}
.slick-next:hover {background-position:right bottom}

	
#productImage {position:relative; width:100%}
#productImage .slick-slide {position:relative}
#productImage .slick-slide .mask {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#00a0e9; opacity:0.5}
#productImage .slick-slide.slick-current .mask {opacity:0}
#productImage .mask {position:absolute; top:0; width:33.33%; height:100%; background-color:rgba(0,160,233, .5)}
#productImage .mask .arrow {display:block; width:37px; height:122px; background-image:url('../images/icons/productArrow.png'); background-repeat:no-repeat}
#productMaskL {left:0}
#productMaskR {right:0}
#productMaskL .arrow {right:0; background-position:left top}
#productMaskR .arrow {left:0; background-position:right top}
#productMaskL .arrow:hover {background-position:left bottom}
#productMaskR .arrow:hover {background-position:right bottom}

#productDesc {width:50%; padding-right:3%; border-right:1px solid #d7d7d7}
#productSpec {width:50%; padding-left:3%}

.productIntro {font-size:18px; line-height:24px; color:#00a0e9; margin-bottom:24px}

.searchProduct {display:none; float:left; overflow:hidden; background-color:#a5a5a5; transition:0.3s; -webkit-transition:0.3s}
.searchProduct:hover {background-color:#00a0e9}
.searchProduct input {width:200px; height:30px}
.searchProduct a {display:block; width:30px; height:30px; background:url('../images/icons/arrowR.png') no-repeat center center; background-size:14px}

.contactList {margin-top:40px}
.contactList li {float:left; width:235px; margin:0 30px}
.contactList li .circle {width:175px; height:175px; margin:0 auto 15px auto; border:1px solid #00a0e9; border-radius:100px; background-repeat:no-repeat; background-position:center center; transition:0.3s; -webkit-transition:0.3s}
.contactList li a {color:#424242}
.contactList li a:hover {color:#00a0e9}
.contactList li .circle:hover {background-color:#00a0e9; transform:scale(0.95,0.95); -webkit-transform:scale(0.95,0.95)}

.contactList li .addr {background-image:url('../images/icons/addr.png'); }
.contactList li .tel {background-image:url('../images/icons/tel.png'); }
.contactList li .fax {background-image:url('../images/icons/fax.png'); }
.contactList li .email {background-image:url('../images/icons/email.png'); }
.contactList li .circle:hover.addr {background-image:url('../images/icons/addr_w.png'); }
.contactList li .circle:hover.tel {background-image:url('../images/icons/tel_w.png'); }
.contactList li .circle:hover.fax {background-image:url('../images/icons/fax_w.png'); }
.contactList li .circle:hover.email {background-image:url('../images/icons/email_w.png'); }

.contactInfo {width:48%}
.contactInfo .contactList {margin-top:0; overflow:hidden}
.contactInfo .contactList li {clear:both; width:100%; margin:0; margin-bottom:10px; }
.contactInfo .contactList li:nth-child(even) {float:right; clear:right}
.contactInfo .contactList li .circle {float:left; width:65px; height:65px; border:1px solid #00a0e9; background-size:60%}
.contactInfo .contactList li p {float:left; text-align:left; line-height:65px; margin-left:20px}
.contactInfo .contactList li:nth-child(1) p {line-height:22px}

.enquiry {width:48%}
.enquiry .tableTr > div {font-size:15px; color:#00a0e9; line-height:30px; margin-bottom:20px}
.enquiry .tableTr > div:nth-child(1) {width:24%}
.enquiry .tableTr > div:nth-child(2) {width:76%}

.mapArea {width:100%; height:475px}
.infoBox p {font-size:15px; color:#424242; line-height:20px; margin-bottom:0}
.infoBox p span {display:block; color:#00a0e9; font-weight:600; margin-bottom:5px}

.aboutContent {width:67%}
.aboutImage {width:31%}
.aboutImage img {width:100%}

#newsYear .tabs-menu {margin-bottom:20px}
#newsYear .tabs-menu li {float:left; width:175px; margin:0 30px 20px 0} 
#newsYear .tabs-menu li:nth-child(6n) {margin-right:0}
#newsYear .tabs-menu li a {display:block; border:1px solid #00a0e9; border-radius:8px; line-height:43px; text-align:center; font-size:18px; color:#00a0e9; transition:0.3s; -webkit-transform:0.3s}
#newsYear .tabs-menu li a:hover {background-color:#00a0e9; color:#fff}
#newsYear .tabs-menu .ui-tabs-active a {background-color:#00a0e9; color:#fff}

.newsList li {position:relative; width:550px; padding-top:30px; margin-bottom:48px}
.newsList li .date {position:absolute; top:0; left:20px; background-color:#00a0e9; padding:10px 0; width:60px; height:80px; font-size:18px; color:#fff; line-height:20px; text-align:center; z-index:9}
.newsList li .date span {display:block; font-size:30px; margin-bottom:5px}
.newsList li .imgThumb {position:relative; width:100%; height:326px; line-height:326px}
.newsList li .caption {width:100%; line-height:30px; padding:5px 12px; background-color:#00a0e9; font-size:18px; color:#fff}

.newsDetail .mainPhoto {width:500px; margin:0 25px 10px 0; box-shadow:2px 2px 5px #cccccc}
.newsDetail .mainPhoto img {display:block; width:100%}
.newsDetail .smallPhoto {width:290px; clear:left; margin-top:15px}
.newsDetail .smallPhoto li {float:left; width:120px; height:70px; line-height:70px; margin:0 25px 25px 0; overflow:hidden}
.newsDetail .smallPhoto img {display:block; width:100%}
.newsContent {padding-left:290px}

.productDetail {width:100%}
.productDetail h2 {margin-bottom:10px}
#productSpec .tableTr > div {font-size:15px; line-height:22px; color:#424242}
#productSpec .tableTr > div:nth-child(1) {width:40%; font-weight:500}
#productSpec .tableTr > div:nth-child(2) {width:60%}

#service-wrap {margin-top:0px}
#service-wrap .roundabout-holder {padding: 0; margin: 0 auto; height: 400px; width: 80%}
#service-wrap .roundabout-moveable-item {width:50%; cursor: pointer;display:block; text-align:center; box-shadow:0 0 4px rgba(0,0,0, .7)}
#service-wrap .roundabout-moveable-item img {display:block; width: 100%;}
.serviceDesc {width:100%; height:36px; background-color:#00a0e9; line-height:36px; font-size:18px; color:#fff; font-weight:bold; transition:0.2s; -webkit-transition:0.2s}
.serviceNum {position:absolute; top:-17px; width:100%; }
.serviceNum span {display:inline-block; width:35px; height:35px; line-height:35px; background-color:#00a0e9; border-radius:20px; font-size:18px; color:#fff;}

.btnService {display:inline-block; width:32px; height:32px; background:url('../images/icons/serviceArrow.png') no-repeat}
#service-prev {background-position:left top}
#service-next {background-position:right top}
#service-prev:hover {background-position:left bottom}
#service-next:hover {background-position:right bottom}

/* mobile */

.mobileIcon {display:none; position:relative; top:5px; right:5px; height:36px; width:36px; padding:8px; border-radius:5px; z-index:999}
.mobileIcon span {margin:0 auto; display:block; width:17px; height:2px; background-color:#fff; 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 {position:relative; z-index:2}
.copyright {font-size:15px; color:#424242; line-height:30px; margin:60px 0}

/*==========================================
CMS Style
==========================================*/

.undoreset table {border:1px solid #000}
.undoreset table td {padding:2px}
.undoreset img {max-width:100%}
.undoreset p {font-size:15px; color:#424242; line-height:22px; margin-bottom:22px}
.undoreset ul {margin:0; list-style-type:disc; padding-left:20px}
.undoreset ol {list-style-type:decimal}
.undoreset li {margin-left:0; font-size:15px; color:#424242; line-height:22px;}