/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 4, 2014, 10:49:12 AM
    Author     : Ping
*/

@font-face {
    font-family: "font";
    src: url("font/century-gothic.eot");
    src: url("font/century-gothic.eot?#iefix") format("embedded-opentype"),
        url("font/century-gothic.woff") format("woff"),
        url("font/century-gothic.ttf") format("truetype"),
        url("font/century-gothic.svg#font") format("svg");
    font-weight: normal;
    font-style: normal;
}

body, img, ul, li, h1, h2, h3, h4, h5, h6, table, th, td, p, iframe {
    border: none;
    margin: 0;
    padding: 0;
}

body {
    font-size: 14px;
    line-height: 1.25;
    font-family: "font";
    font-weight: 300;
    background: #ffffff;
}

h1, h2, h3, h4, h5, h6, th { font-weight: normal; }

table { border-spacing: 0; }

p { text-align: justify; }

a { text-decoration: none; }

.link {
    text-decoration: underline;
    color: #333333;
}

.link:hover { color: #1175bc; }

.main {
    min-width: 1020px;
    min-height: 760px;
    position: relative;
    background: #ffffff;
}
.bodyx {
    min-width: 700px;
    min-height: 400px;
	text-align:center;
    position: relative;
    background: #ffffff;
}

.wrap {
    width: 1000px;
    height: 210px;
    margin: 0 auto;
    position: relative;
}

h1 {
    font-size: 32px;
    font-weight: 800;
    left: 50%;
    margin-left: -500px;
}

h2 {
    font-size: 18px;
    font-weight: 600;
    /*background: url(../img/layout/h2.png);*/
    padding: 8px 0 5px 23px;
    width: 467px;
    text-align: left;
    border-bottom: 1px #666666 solid;
}

h3 {
    font-size: 18px;
    font-weight: 800;
    padding: 11px 0 60px;
    color: #ffffff;
}

/*<<<<<<<<<<< footer >>>>>>>>>>>*/

.footer {
    font-weight: 400;
    color: #999999;
    background: #ffffff;
    text-align: center;
    font-size: 13px;
    padding: 12px 0;
    min-width: 1020px;
    /*border-top: 1px #999999 solid;*/
}

.footer2 {
    background: #ffffff url(../img/layout/footer.png) no-repeat;
    padding: 195px 0 9px;
    margin-top: -30px;
    position: relative;
}

/*<<<<<<<<<<< header >>>>>>>>>>>*/

.header {
    background: #000000;
    min-width: 1020px;
}

.header .wrap { height: 100px; }

.logo {
    display: block;
    float: left;
    padding: 20px 0;
}

.logo img { display: block; }

.social {
    float: right;
    position: relative;
    margin-top: 20px;
}

.social a {
    position: absolute;
    width: 50px;
    height: 20px;
    display: block;
    opacity: .75;
    filter: alpha(opacity=75);
    top: 0;
}

.social a:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.facebook {
    right: 141px;
    background: url(../img/btn/social.png) left center;
}

.youtube {
    right: 70px;
    background: url(../img/btn/social.png) right center;
}

.social .fb-like {
    /*    position: absolute !important;
        left: 970px;
        top: 0;*/
}

.menu {
    position: absolute;
    bottom: 11px;
    right: -8px;
}

.menu a {
    position: relative;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    padding: 6px 12px 6px 24px;
}

.menu a:hover, .menu .active {
    text-shadow: 0 0 15px #ffffff;
    color: #ffffff;
}

.menu a span {
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: 6px;
}

.menu a:hover span, .menu .active span {
    box-shadow: 0 0 15px #ffffff;
    color: #ffffff;
    background: #ffffff !important;
}

.menu b { display: none; }

.menu a img {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.menu a img:first-child { left: 0; }

/*<<<<<<<<<<< banner >>>>>>>>>>>*/

.banner, .banner2, .map {
    height: 550px;
    position: relative;
    overflow: hidden;
    background: center center no-repeat;
}

.banner table, .banner2 table {
    position: absolute;
    top: 0;
    left: 0;
}

.banner table tr td a, .banner2 table tr td a {
    height: 550px;
    display: block;
    background: center center no-repeat;
}

.banner div a {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    background: url(../img/btn/nav.png);
    top: 250px;
    cursor: pointer;
}

.banner #prev {
    right: 50%;
    margin-right: 475px;
    background-position: left top;
}

.banner #prev:hover { background-position: left bottom; }

.banner #next {
    left: 50%;
    margin-left: 475px;
    background-position: right top;
}

.banner #next:hover { background-position: right bottom; }

.banner span {
    position: absolute;
    bottom: 10px;
    z-index: 1;
}

.banner span button {
    border: none;
    margin: 5px;
    padding: 5px;
    background: url(../img/btn/bullet.png);
    outline: none;
    cursor: pointer;
}

.banner span button:hover, .banner span button.active { background-position: right top; }

.banner h1, .banner2 h1 {
    position: absolute;
    bottom: 35px;
    text-shadow: 0 0 10px #ffffff;
}

.next3, .prev3 {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    background: url(../img/btn/nav4.png);
    top: 245px;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.next3:hover, .prev3:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.next3 {
    left: 50%;
    margin-left: 440px;
    background-position: right center;
}

.prev3 {
    right: 50%;
    margin-right: 440px;
    background-position: left center;
}

.map {
    height: 400px;
    width: 100%;
    min-width: 1020px;
}

/*<<<<<<<<<<< main >>>>>>>>>>>*/

#home { background: url(../img/layout/gradient.png) repeat-x center bottom; }

.home > img {
    display: block;
    margin: -108px auto 0;
}

.home a {
    position: absolute;
    right: 50px;
    top: 134px;
    display: block;
}

#product .wrap table {
    table-layout: fixed;
    width: 1000px;
    padding: 25px 0 0;
}

#product .wrap table tr th a {
    display: block;
    font-size: 16px;
    position: relative;
    color: #000000;
    height: 160px;
}

#product .wrap table tr th a img {
    position: absolute;
    width: 150px;
    top: 0;
    left: 8px;
}

#product .wrap table tr th a b {
    font-weight: normal;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#product .wrap table tr th a:hover b {
    font-size: 20px;
    font-weight: bold;
    bottom: -9px;
}

.productList {
    table-layout: fixed;
    width: 1000px;
    padding-top: 24px;
}

.cover {
	width: 490px;
	height: 210px;
	position: relative;
	overflow: hidden;
}

.cover2 { width: 980px; }

.cover > table {
	position: absolute;
	top: 0;
	left: 0;
	height: 210px;
}

.product {
	height: 210px;
	width: 245px;
	position: relative;
	cursor: pointer;
}

.cover > a {
    position: absolute;
    top: 50px;
    width: 40px;
    height: 40px;
    display: block;
    background-image: url(../img/btn/nav3.png);
    cursor: pointer;
    display: none;
}

.prev2 {
    left: 0;
    background-position: left top;
}

.prev2:hover { background-position: left bottom; }

.next2 {
    right: 0;
    background-position: right top;
}

.next2:hover { background-position: right bottom; }

.productImage {
    width: 168px;
    height: 150px;
    position: relative;
}


.productImage img {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50%;
}

.productImage span {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 45px;
    left: 54px;
    background: url(../img/btn/view.png);
    display: none;
}

.productImage label {
    position: absolute;
    display: block;
    width: 59px;
    height: 59px;
    background-image: url(../img/layout/label.png);
    right: 5px;
    top: 5px;
}

.highSheen { background-position: left top; }
.classicMatt { background-position: center top; }
.woodGrain { background-position: right top; }

.product > span {
    position: absolute;
    right: 0;
    left: 128px;
    top: 68px;
    font-size: 14px;
}

.product:hover .productImage { background: url(../img/layout/shadow.png); }
.product:hover .productImage span { display: block; }
.product:hover > span { font-weight: 800; }

.overlay {
    position: fixed;
    background: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
}

.popup { display: none; }

.popupMain td { vertical-align: top; }

.popupMain img {
    margin: -24px 20px 0 -6px;
}

.popupMain p {
    font-size: 14px;
    padding-bottom: 5px;
}

.popupMain p b {
    display: block;
    padding-bottom: 10px;
}

.popupMain ul li {
    margin-left: 15px;
    padding-bottom: 2px;
}

.popupMain label {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label2.png);
    margin-right: 10px;
    margin-top: 10px;
}

.sixyears {
    width: 51px;
    background-position: left top;
}

.smarteco {
    width: 58px;
    background-position: -51px top;
}

.smartflow {
    width: 62px;
    background-position: -109px top;
}

.lowvoc {
    width: 61px;
    background-position: -171px top;
}

.lowodour {
    width: 47px;
    background-position: -232px top;
}

.excellent {
    width: 58px;
    background-position: -282px top;
}

.uv {
    width: 42px;
    background-position: -339px top;
}

.waterproof {
    width: 132px;
    background-position: -380px top;
}
.tenyears {
    width: 40px;
    background-position: -512px top;
}
.dirt {
    width: 61px;
    background-position: -553px top;
}
.selfclean {
    width: 40px;
    background-position: -615px top;
}
.sirim {
    width: 40px;
    background-position: -656px top;
}
.sirimeco {
    width: 40px;
    background-position: -697px top;
}
.exceluv {
    width: 40px;
    background-position: -738px top;
}
.covercrack {
    width: 32px;
    background-position: -778px top;
}
.newapeo {
    width: 32px;
    background-position: -1000px top;
}
.newlowodour {
    width: 32px;
    background-position: -1035px top;
}
.neweco {
    width: 32px;
    background-position: -1068px top;
}
.newintuse {
    width: 32px;
    background-position: -1100px top;
}
.newflow {
    width: 32px;
    background-position: -1133px top;
}
.newwash {
    width: 32px;
    background-position: -1166px top;
}
.newvoc {
    width: 32px;
    background-position: -1200px top;
}
.newwb {
    width: 32px;
    background-position: -1230px top;
}
.pu-fungus {
    width: 32px;
    background-position: -1265px top;
}
.pu-uv {
    width: 32px;
    background-position: -1298px top;
}

.popupMain label-ecowall {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-ecowall.png);
}

.ecowall{
width:330px;

}

.popupMain label-elashybrid {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-elashybrid.png);
}

.elashybrid{
width:270px;

}

.popupMain label-mediglo {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-mediglo.png);
}

.mediglo{
width:305px;
}

.popupMain label-safeguard {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-safeguard.png);
}

.safeguard{
width:305px;
}

.popupMain label-ws400s {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-ws400s.png);
}

.ws400s{
width:270px;

}

.popupMain label-dpwp {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-dpwp.png);
}

.dpwp{
width:100px;

}
.popupMain label-sproof {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-sproof.png);
}

.sproof{
width:90px;

}

.popupMain label-es5100 {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-es5100.png);
}

.es5100{
width:100px;

}

.popupMain label-antiviral {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-antiviral.png);
}

.antiviral{
width:100px;

}

.popupMain label-silkglo {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-silkglo.png);
}

.silkglo{
width:100px;
}

.popupMain label-easywash {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-easywash.png);
}

.easywash{
width:100px;
}

.popupMain label-supermax {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-supermax.png);
}

.supermax{
width:100px;
}

.popupMain label-emulsion {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-emulsion.png);
}

.emulsion{
width:100px;
}

.popupMain label-ws400 {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-ws400.png);
}

.ws400{
width:100px;
}

.popupMain label-hps {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-hps.png);
}

.hps{
width:90px;
}

.popupMain label-hgds {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-hgds.png);
}

.hgds{
width:90px;
}

.popupMain label-solar {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-solar.png);
}

.solar{
width:90px;
}

.popupMain label-pc {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-pc.png);
}

.pc{
width:100px;
}

.popupMain label-snow {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-snow.png);
}

.snow{
width:180px;
}

.popupMain label-painter {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-painter.png);
}

.painter{
width:205px;
}

.popupMain label-wbc {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-wbc.png);
}

.wbc{
width:75px;
}

.popupMain label-aio {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-aio.png);
}

.aio{
width:300px;
}

.popupMain label-aio2 {
    display: block;
    float: left;
    height: 60px;
    background-image: url(../img/layout/label-aio2.png);
}

.aio2{
width:170px;
}


.popupMain label-spray {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-spray.png);
}

.spray{
width:220px;
}

.popupMain label-epoxy {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-epoxy.png);
}

.epoxy{
width:130px;
}

.popupMain label-spray2 {
    display: block;
    float: left;
    height: 60px;
    background-image: url(../img/layout/label-spray2.png);
}

.spray2{
width:170px;
}

.popupMain label-dis {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-dis.png);
}

.dis{
width:160px;
}

.popupMain label-dis2 {
    display: block;
    float: left;
    height: 60px;
    background-image: url(../img/layout/label-dis2.png);
}

.dis2{
width:160px;
}

.popupMain label-tpgold {
    display: block;
    float: left;
    height: 38px;
    background-image: url(../img/layout/label-tpgold.png);
}

.tpgold{
width:50px;
}

.addthis_sharing_toolbox {
    position: absolute;
    bottom: 105px;
    left: 293px;
    display: block;
}

.downloadLink {
    width: 559px;
    border-spacing: 1px;
    position: absolute;
    bottom: -1px;
    left: -1px;
    table-layout: fixed;
}

.downloadLink td { background: #1175bc; vertical-align: middle; height:36px; }
.downloadLink .first { border-radius: 5px 0 0 5px; }
.downloadLink .last { border-radius: 0 5px 5px 0; }

.downloadLink a {
    display: block;
    background: url(../img/btn/pdf.png) no-repeat 10px center;
    color: #ffffff;
    padding: 3px 0 3px 50px;
    font-size: 12px;
}

.downloadLink a:hover { text-decoration: underline; }

.downloadLink .addthis_button_email {
    padding: 0;
    background-image: none;
}

.st_email_large {
    margin: 0 auto;
    display: block;
    float: none;
    background: url(../img/btn/email.png) no-repeat center top;
    width: 40px;
    height: 31px;
    cursor: pointer;
    position: absolute;
    bottom: 51px;
    left: 151px;
    display: none;
}

.st_email_large:hover { background-position: center bottom; }

.st_email_large span { display: none !important; }

.category {
    border-bottom: 1px #666666 solid;
    padding-bottom: 100px;
}

.backtotop {
    width: 88px;
    height: 88px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin-left: 500px;
    background: url(../img/btn/backtotop.png);
    opacity: 0.75;
    filter: alpha(opacity=75);
    cursor: pointer;
    display: none;
}

.backtotop:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.bookrack { width: 1001px; }

.bookrack td {
    vertical-align: bottom;
    background: url(../img/layout/rack.jpg) no-repeat;
    padding: 0 50px 5px;
}

.bookrack thead tr td { height: 205px; }

.bookrack tbody tr td {
    height: 172px;
    background-position: left -384px;
}

.bookrack tbody tr .first {
    height: 169px;
    background-position: left -210px;
}

.bookrack tbody tr .last {
    height: 171px;
    background-position: left -561px;
}

.bookrack tfoot tr td {
    height: 21px;
    background-position: left bottom;
}

.book {
    float: left;
    width: 180px;
    height: 137px;
    display: block;
    float: left;
    vertical-align: bottom;
    position: relative;
}

.book img {
	/*max-width: 107px;*/
	height: 160px;
	position: absolute;
	bottom: -11px;
	left: -86px;
}

.book a {
    font-size: 11px;
    color: #ffffff;
    position: absolute;
    right: 0;
    left: 110px;
    bottom: 0;
}

.book a:hover { text-decoration: underline; }

.contact {
    table-layout: fixed;
    height: 260px;
}

.contact th {
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    vertical-align: bottom;
    padding-bottom: 5px;
}

.contact td { vertical-align: top; }

.contact p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.contact a {
    display: block;
    line-height: 15px;
    background: url(../img/layout/icon.png) no-repeat;
    padding-left: 30px;
    margin-top: 5px;
}

.item{
    font-size:23px;
    font-weight:900;
}

.bold {
    font-weight:900;
    font-size:20px;
}

.bold2 {
    font-weight:900;
    font-size:15px;
}

.gallery {
    position: relative;
    padding-top: 29px;
}

.gallery div {
    width: 100%;
    height: 567px;
    position: relative;
    overflow: hidden;
}

.gallery div img {
    height: 567px;
    display: block;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: -100%;
    right: -100%;
}

.gallery .galleryNav {
    height: 150px;
    padding: 20px 0 0;
    overflow: visible;
}

.galleryNav div {
    width: 1000px;
    position: relative;
    overflow: hidden;
    height: 150px;
}

.galleryNav table {
    position: absolute;
    left: 0;
    top: 19px;
}

.galleryNav table tr td div {
    width: 109px;
    height: 82px;
    border: 3px #1175bc solid;
    margin-right: 10px;
    cursor: pointer;
}

.galleryNav table tr td div img { height: 100%; }

.galleryNav table tr td div:hover { border: 3px #f4b912 solid; }

.galleryNav table tr td div.active {
    border: 3px #f4b912 solid;
    width: 119px;
    height: 92px;
}

.galleryNav a, .gallery > a {
    width: 44px;
    height: 88px;
    display: block;
    position: absolute;
    top: 44px;
    background: url(../img/btn/nav5.png);
    cursor: pointer;
}

.gallery > a { top: 240px; }

.galleryNav #gprev, .gallery > #gprev2 {
    background-position: left top;
    left: 0;
}

.galleryNav #gprev:hover, .gallery > #gprev2:hover { background-position: left bottom; }

.galleryNav #gnext, .gallery > #gnext2 {
    background-position: right top;
    right: 0;
}

.galleryNav #gnext:hover, .gallery > #gnext2:hover { background-position: right bottom; }


#popup {
    background: #ffffff;
    height: 428px;
    z-index: 2;
    position: absolute;
    width: 870px;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    display: none;
}

#popup img { float: left; }

#popup .mascot {
    position: absolute;
    left: 38px;
    top: -135px;
} 

.popupMain {
    margin: 0 18px 18px 295px;
    height: 321px;
    padding-top: 89px;
    position: relative;
}

#popup h3 {
    position: absolute;
    left: 0;
    right: 0;
}

#popup h3 a {
    position: absolute;
    display: block;
    width: 44px;
    height: 44px;
    background-image: url(../img/btn/nav2.png);
    cursor: pointer;
	z-index: 1;
}

.close {
    right: 0;
    top: 0;
}

.next, .prev {
    top: 152px;
    height: 88px !important;
}

.prev {
    background-position: left top;
    left: -44px;
}
.next {
    background-position: center top;
    right: -44px;
}
.close { background-position: right top; }

.prev:hover { background-position: left bottom; }
.next:hover { background-position: center bottom; }
.close:hover { background-position: right bottom; }