/*=== Web Setting ===*/
body {font-family: 'Muli', sans-serif;}
.wrap {width:1200px;}
.pageContainer {width:100%}
.innerContainer {width:100%}
h1 {font-size:32px; margin-bottom:30px; color:#000; font-weight:bold; text-transform:uppercase}
h2 {}
p {font-size:16px; line-height:30px; color:#000; margin-bottom:30px;}

/*======*/

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}

/*==========================================
Header
==========================================*/
.mainLogo {width:174px; height:65px; margin:25px auto}
.mainLogo img {width:100%}
.nav {position:relative; margin-bottom:20px}
.nav ul {display:inline-block}
.nav ul li {float:left; padding-bottom:13px; margin-right:30px}
.nav ul li:nth-last-child(1) {margin-right:0}
.nav ul li a {display:block; padding: 0 30px; font-size:14px; color:#000000;}
#navOver {position:absolute; bottom:0; left:0; width:100px; height:3px; background-color:#000; transition:0.3s; -webkit-transition:0.3s}

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

.swiper-slide img {width:100%}
#banner .swiper-slide img {display:block}
#banner .swiper-pagination-bullet {margin: 0 5px; width:60px; height:7px; background-color:#fff; border-radius:0; opacity:1}
#banner .swiper-pagination-bullet-active {background-color:#000}
#banner .swiper-pagination {bottom:13px}

.aboutBg {height:500px; padding:40px 50px; background:url('../images/aboutBg.jpg') no-repeat}
.aboutBg h1, .aboutBg p {color:#fff}

.directorBg {background-color:#d8d8d8; height:0; overflow:hidden; max-height:500px}
.directorBg .fLeft {height:500px; width:398px}
.directorBg .fLeft img {position:relative; top:-90px; width:100%}
.directorBg .fRight {height:500px; width:802px; padding:45px 35px 0 35px}
.directorBg.open {height:auto}

.projectBg {width:100%; padding:40px 20px; background-color:#f8f7f7}

#projectTab .tabMenu {width:100%; text-align:center; margin:10px 0}
#projectTab .tabMenu li {display:inline-block; margin:0 15px}
#projectTab .tabMenu a {display:block; width:130px; height:27px; font-size:14px; color:#626262; line-height:27px; text-align:center; border:inset 1px #8f8f8f}
#projectTab .tabMenu .ui-tabs-active a, #projectTab .tabMenu .ui-state-hover a
 {border:none; background:url('../images/icons/productTab2.png') no-repeat; color:#ed1b23}

.projectList {width:100%; overflow:hidden; margin-top:40px}
.projectList li {position:relative; float:left; width:258px; margin-right:42px; margin-bottom:42px}
.projectList li:nth-child(4n) {margin-right:0}
.projectList li .image1 {position:relative; top:0; transition:0.3s; -webkit-transition:0.3s}
.projectList li .image2 {position:absolute; top:100%; width:100%; height:100%; transition:0.3s; -webkit-transition:0.3s}
.projectList li .imgThumb {position:relative; width:100%; height:330px}
.projectList li .imgThumb:hover .image1 {top:-100%}
.projectList li .imgThumb:hover .image2 {top:0%}

.projectList .caption {position:absolute; bottom:30px; width:100%; font-size:28px; color:#fff; text-shadow:1px 1px 3px rgba(0,0,0, .5); text-align:center}

.projectList .imgThumb:hover .zoom {display:block}
.projectThumb a:hover .zoom {display:block}

#project .tabMenu {padding-top:2px} /* bug fix*/


.pressBg {height:500px; padding:40px 0 30px 0; background:url('../images/botbanner02.jpg') no-repeat}
.pressBg h1 {color:#fff}

.pressBg .tableTr {width:80%; margin:0 auto; font-size:20px; line-height:30px; padding:24px 0; border-bottom:1px solid #2e2e2e}
.pressBg .tableTr > div:nth-child(1) {width:38%; }
.pressBg .tableTr > div:nth-child(2) {padding:18px 0; width:62%; }
.pressBg .tableTr > div:nth-child(2) a {color:#fff}
.pressBg .tableTr > div:nth-child(2) span {display:block; width:145px; }
.pressBg .tableTr > div:nth-child(2) span a {color:#808080}
.pressBg .tableTr > div:hover a {color:#ed1b23}
.pressBg .tableTr .imgThumb {width:66px; height:66px; margin-right:60px}
.pressBg .tableTr:nth-of-type(1) {padding-top:0}
.pressBg .moreBtn {color:#fff; background-image:url('../images/icons/plus_w.png')}
.pressBg .backBtn {color:#fff; background-image:url('../images/icons/arrowLeft_w.png')}

.zoom {display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0, .7); background-image:url('../images/icons/zoom.png'); background-repeat:no-repeat; background-position:center center}

.contactBg {background:url('../images/contactTex.jpg'); overflow:hidden; padding:40px 40px 25px 40px}
.contactBg > .fLeft {width:50%}
.contactBg > .fRight {width:45%}
.contactBg .contactInfo li {padding-left:52px; font-size:16px; line-height:34px; color:#000; margin-bottom:30px; background-repeat:no-repeat; background-position:left top}
.contactBg .contactInfo .iconAddr {background-image:url('../images/icons/iconAddr.png')}
.contactBg .contactInfo .iconTel {background-image:url('../images/icons/iconTel.png')}
.contactBg .contactInfo .iconFax {background-image:url('../images/icons/iconFax.png')}
.contactBg .contactInfo .iconEmail {background-image:url('../images/icons/iconEmail.png')}
.contactBg .contactInfo a {color:#000; text-decoration:underline}
.contactBg .contactInfo a:hover {color:#ed1b23}

.contactBg .enquiry .tableTr {margin-bottom:18px; font-size:16px; color:#000}
.contactBg .enquiry .tableTr input,
.contactBg .enquiry .tableTr textarea {width:100%; padding:0 8px; border:1px solid #000; border-radius:16px; height:35px; margin:0; background-color:#fff}
.contactBg .enquiry .tableTr textarea {height:100px; padding:8px}

.contactBg .enquiry .tableTr > div:nth-of-type(1) {width:20%; line-height:32px}
.contactBg .enquiry .tableTr > div:nth-of-type(2) {width:80%}

.mapArea {width:100%; height:250px}
.infoWindow {font-size:13px; color:#000; line-height:20px; margin-bottom:0}

.projectThumb {position:relative; width:30.3%; margin:0 1.5% 3% 1.5%; background-color:#fff;} 
.projectThumb img {width:100%}

/* mobile */

.mobileIcon {display:none; position:absolute; top:40px; right:20px; 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:#000; 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)}

.mobileNav {width:100%; margin-top:20px}
.mobileNav li {width:100%}
.mobileNav li a {display:block; width:100%; padding:10px 20px; line-height:30px; margin-bottom:10px; font-size:16px; color:#fff; font-weight:400}
.mobileNav li a.selected {color:#ed1b23; font-weight:bold}
.sb-archor {position:fixed; top:0; left:0px; width: 0; height: 0; border-style: solid; border-width: 25px 0 25px 20px; border-color: transparent transparent transparent #ffffff;}


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

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

.copyright {font-size:13px; color:#767676; margin-top:46px}
.copyright a {color:#767676}

/*Top btn*/
#back-top {display:block; width:100%; overflow:hidden; text-align:center}
#back-top a { display:inline-block; width:44px; height:58px; 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 {padding:2px}
.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}