/*
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 : Aug 19, 2014, 10:01:29 AM
    Author     : Ping
*/

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

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

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

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

body {
    font-family: font, sans-serif;
    font-size: 12px;
    color: #000000;
    line-height: 1.25;
}

img { display: block; }

a {
    text-decoration: none;
    color: #ff0000;
    cursor: pointer;
}

a:hover { text-decoration: underline; }

table { border-spacing: 0; }

p {
    text-align: justify;
    line-height: 1.5;
}

.wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
}

input[type="text"], input[type="password"] {
    border: 1px #e1e1e1 solid;
    background: #ffffff no-repeat right top;
    font-family: font, sans-serif;
    color: #707070;
    height: 25px;
    width: 195px;
    font-size: 12px;
    padding: 0 8px;
    outline: none;
}

select {
    border: 1px #e1e1e1 solid;
    background: #ffffff no-repeat right top;
    font-family: font, sans-serif;
    color: #707070;
    height: 27px;
    width: 213px;
    font-size: 12px;
    padding: 1px 1px 1px 4px;
    outline: none;
}

textarea {
    border: 1px #e1e1e1 solid;
    background: #ffffff no-repeat right top;
    font-family: font, sans-serif;
    color: #707070;
    height: 154px;
    width: 195px;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    resize: none;
    overflow: auto;
}

button {
    width: 100%;
    text-align: center;
    background: #ff0000;
    color: #ffffff;
    font-family: font, sans-serif;
    font-size: 12px;
    height: 27px;
    cursor: pointer;
    overflow: auto;
}

button:hover { background: #9b1b1e; }

h1 {
    font-family: fontb, sans-serif;
    font-weight: normal;
    font-size: 24px;
    color: #ff0000;
    padding-bottom: 10px;
}

h2 {
    font-family: fontbi, sans-serif;
    font-size: 42px;
    padding-bottom: 12px;
    color: #ff0000;
}

h3 {
    font-family: fontbi, sans-serif;
    font-size: 18px;
    color: #ff0000;
}

h4 {
    font-size: 14px;
    color: #ff0000;
    padding-bottom: 7px;
}

/*<<<<<<<<<<< icon >>>>>>>>>>>*/

.facebook {
    display: block;
    width: 27px;
    height: 27px;
    background: url(../img/layout/icon.png) 0 0;
}

.prev {
    display: block;
    width: 52px;
    height: 52px;
    background: url(../img/layout/icon.png) -27px 0;
}

.prev:hover, .prev.disabled { background-position: -27px -52px !important; }

.next {
    display: block;
    width: 52px;
    height: 52px;
    background: url(../img/layout/icon.png) -79px 0;
}

.next:hover, .next.disabled { background-position: -79px -52px !important; }

.bullet {
    display: block;
    width: 11px;
    height: 11px;
    background: url(../img/layout/icon.png) 0 -27px;
}

.bullet.active { background-position: -11px -27px !important; }

.search {
    display: block;
    width: 32px;
    height: 27px;
    background: url(../img/layout/icon.png) -131px 0;
}

.search:hover { background: url(../img/layout/icon.png) -131px -27px; }

.phone {
    display: block;
    width: 18px;
    height: 18px;
    background: url(../img/layout/icon.png) -163px -18px;
}

.fax {
    display: block;
    width: 18px;
    height: 18px;
    background: url(../img/layout/icon.png) -163px 0;
}

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

.header {
    border-top: 8px #ff0000 solid;
    padding-bottom: 13px;
    min-width: 1240px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: url(../img/layout/shadow.png) repeat-x center bottom;
}

.header > div {
    background: #ffffff;
    border-top: 4px #000000 solid;
    padding: 15px 0;
}

#logo {
    display: block;
    float: left;
}

.menu {
    float: right;
    list-style: none;
    margin-top: 18.5px;
}

.menu li { float: left; }

.menu li a {
    display: block;
    line-height: 27px;
    padding: 0 30px;
    color: #000000;
    font-size: 14px;
}

.menu li a:hover, .menu li a.active {
    color: #ff0000;
    text-decoration: none;
}

.menu li .facebook {
    padding: 0;
    margin-left: 15px;
}

.header_reserved { height: 106px; }

/*<<<<<<<<<<< home >>>>>>>>>>>*/

.home {
    background: url(../img/bg/home.jpg) repeat-x center center;
    height: 639px;
}

.home .wrap { display: none; }

.banner {
    width: 710px;
    height: 402px;
    position: relative;
    overflow: hidden;
    margin: 51px 0 0 191px;
}

.banner table {
    position: absolute;
    top: 0;
    left: 0;
    background: #000000;
}

.cover {
    width: 1014px;
    height: 434px;
    position: absolute;
    background: url(../img/banner/cover.png);
    top: 44px;
    left: 120px;
}

.cover a {
    position: absolute;
    top: 154px;
    display: none;
}

.cover .prev { left: 168px; }
.cover .next { left: 738px; }

.cover div {
    position: absolute;
    top: 282px;
    right: 228px;
}

.cover div span {
    float: left;
    margin: 6px;
}

.cover form {
    position: absolute;
    top: 340px;
    left: 176px;
}

.cover form span {
    float: left;
    font-size: 22px;
    color: #ffffff;
}

.cover form span span {
    float: none;
    display: block;
    font-size: 11px;
}

.cover input {
    margin-left: 10px;
    width: 345px;
    border-right: none;
    float: left;
}

.cover button {
    float: left;
}

.slogan {
    margin: 49px auto 34px;
}

.copyright {
    font-size: 11px;
    color: #707070;
    border-top: 1px #cccccc solid;
}

.copyright p {
    border-top: 1px #ebebeb solid;
    text-align: center;
    padding: 12px 0;
}

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

.footer p {
    font-size: 11px;
    color: #707070;
    text-align: center;
    padding: 25px 0;
}

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

.main {
    min-width: 1240px;
    position: relative;
    overflow: auto;
}

.about { background: url(../img/bg/about.jpg) no-repeat center center; }

.about .wrap { margin: 45px auto 39px; }

.about .wrap span {
    position: absolute;
    top: 0;
    left: 20px;
    background: url(../img/bg/white90.png);
    padding: 24px 26px;
}

.about .wrap div {
    border-top: 8px #ff0000 solid;
    margin-left: 430px;
}

.about .wrap div div {
    background: url(../img/bg/white90.png);
    border-top: 4px #000000 solid;
    margin: 0;
    padding: 15px 25px 0 80px;
    height: 463px;
}

#map {
    width: 100%;
    height: 651px;
}

.contactinfo {
    background: url(../img/bg/white90.png);
    border-top: 8px #ff0000 solid;
    width: 700px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    position: absolute;
    top: 58px;
    height: 482px;
}

.contactinfo div {
    border-top: 4px #000000 solid;
    padding: 16px 25px 0 80px;
}

.contactinfo h2 { margin-left: -9px; }

.contactinfo table tr th {
    font-weight: normal;
    font-family: fontbi, sans-serif;
    color: #ff0000;
    text-align: left;
    padding-bottom: 15px;
}

.contactinfo table tr th:first-child { width: 213px; }

.contactinfo table tr td { vertical-align: top; }

.contactinfo table tr td span {
    display: block;
    line-height: 18px;
    padding-left: 28px;
    width: 185px;
    background-repeat: no-repeat;
}

.contactform {
    width: 213px;
    padding: 35px 25px;
    background: url(../img/bg/white90.png);
    position: absolute;
    top: 58px;
    right: 50%;
    margin-right: 55px;
    height: 420px;
}

.form { list-style: none; }

.form li {
    position: relative;
    margin-top: 14px;
}

.form li label {
    position: absolute;
    top: 6px;
    left: 9px;
    cursor: text;
}

.form li.captcha { padding-bottom: 14px; }

.form li.captcha label { left: 83px; }

.form li.captcha input {
    padding-left: 82px;
    width: 121px;
}

.form li.captcha a {
    position: absolute;
    top: 1px;
    left: 1px;
    text-align: center;
    font-size: 10px;
    color: #000000;
}

.form li.captcha a:hover {
    opacity: 0.75;
    filter: alpha(opacity=75);
    text-decoration: none;
}

#name { text-transform: uppercase; }

.product { background: url(../img/bg/product.jpg) no-repeat center center; }

.product .wrap { /*height: 651px;*/ height: 531px}

.category {
    width: 589px;
    padding: 17px 0 6px 153px;
    background: url(../img/layout/productheader.png) no-repeat;
    position: absolute;
    /*top: 83px;*/
	top: 3px;
    right: 20px;
    list-style: none;
    float: right;
}

.category li { float: left; }

.category li a {
    line-height: 68px;
    display: block;
    font-size: 14px;
    padding: 0 15px;
    color: #ffffff;
}

.category li a:hover, .category li a.active {
    color: #ff0000;
    text-decoration: none;
}

.category li a.disabled {
    color: #939393;
    cursor: not-allowed;
}

.productinfo {
    background: #ffffff;
    padding: 9px 0 0 70px;
    width: 672px;
    height: 183px;
    position: absolute;
    right: 20px;
    /*top: 174px;*/
	top: 94px;
}

.productinfo table {
    line-height: 1.5;
    padding: 0 6px;
}

.productinfo table tr td {
    min-width: 281px;
    padding-left: 12px;
    background: url(../img/layout/dot.png) no-repeat;
}

.productimage {
    position: absolute;
    /*top: 0;*/
	top:-80px;
    left: 0;
}

.productlist {
    position: absolute;
    bottom: 0;
    left: 120px;
    right: 120px;
    overflow: hidden;
    height: 285px;
}

.productlist img {
    position: absolute;
    top: 0;
    left: 0;
}

#prevproduct, #nextproduct {
    position: absolute;
    bottom: 70px;
    display: none;
}

#prevproduct.disabled, #nextproduct.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: not-allowed;
}

#prevproduct { left: 40px; }

#nextproduct { right: 40px; }

.page-title {
    background: url(../img/layout/pagetitle.png) no-repeat center bottom;
    position: relative;
    padding: 27px 0 0;
    margin-top: 31px;
    border-bottom: 6px #ff0000 solid;
}

.page-title h2 {
    padding: 0;
    line-height: 58px;
}

.covering {
    background: #000000;
    height: 68px;
    background: #000000;
    border-top: 17px #ff0000 solid;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 50%;
}

.new { border-bottom: 1px #e1e1e1 solid; }

.newproduct {
    width: 1238px;
    table-layout: fixed;
    margin-left: -19px;
    padding-bottom: 19px;
}

.newproduct td {
    padding: 19px;
    font-size: 11px;
}

.newproduct td div {
    border: 1px #e1e1e1 solid;
    position: relative;
    overflow: hidden;
    height: 209px;
    margin-bottom: 12px;
}

.newproduct td div img { margin: 0 auto; }

.newproduct td b {
    display: block;
    font-weight: normal;
    font-family: fontb, sans-serif;
    color: #ff0000;
    font-size: 12px;
}

.event {
    background: url(../img/bg/news.jpg) no-repeat center center;
    height: 651px;
}

.event .wrap { margin-top: 58px; }

.event .wrap > div {
    float: right;
    width: 700px;
    border-top: 8px #ff0000 solid;
}

.event .wrap > div > div {
    width: 650px;
    padding: 16px 25px 36px;
    background: url(../img/bg/white90.png);
    border-top: 4px #000000 solid;
}

.eventlist { list-style: none; }

.eventlist li {
    display: block;
    position: relative;
    height: 93px;
    overflow: hidden;
    margin-bottom: 10px;
}

.eventlist li a {
    overflow: hidden;
    display: block;
}

.eventlist li div {
    width: 93px;
    height: 93px;
    float: left;
}

.eventlist li div img { width: 93px; }

.eventlist li a > b {
    display: block;
    margin-left: 110px;
    margin-top: -2px;
    padding-bottom: 7px;
}

.eventlist li a > p {
    color: #000000;
    margin-left: 110px;
}

.eventdetail img {
    width: 93px;
    float: left;
}

.eventdetail h4 { margin-left: 110px; }

.eventdetail p { margin-left: 110px; }

/*<<<<<<<<<<< scrollbar >>>>>>>>>>>*/

#scrollbar {
    width: 625px;
    position: relative;
}

.viewport {
    width: 625px;
    height: 387px;
    overflow: hidden;
    position: relative;
}

.overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}

.scrollbar {
    background: transparent;
    position: absolute;
    background-position: 0 0;
    right: -30px;
    width: 8px;
    z-index: 1;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

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

.track {
    height: 100%;
    width: 8px;
    position: relative;
    padding: 0;
}

.thumb {
    background: #c5c5c5;
    height: 387px;
    width: 6px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.thumb .end {
    background: #c5c5c5;
    overflow: hidden;
    height: 6px;
    width: 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.disable {
    /*display: none;*/
}

.noSelect {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.notdesktop .wrap, .notdesktop .header, .notdesktop .main {
    width: 100%;
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.notdesktop #logo { float: none; }
.notdesktop #logo img { margin: 0 auto; }

.notdesktop .content-table {
    width: 100%;
    border-spacing: 0;
    padding-top: 106px;
}

.notdesktop .content-desc { padding: 0; }

.product-summary {
    position: relative;
    overflow: hidden;
}

.notdesktop .product-info { padding: 0 10px; }

.notdesktop .product-info { margin-bottom: 30px; }

.notdesktop .sort_action, .notdesktop .manufacturer, .notdesktop .reference_odd, .notdesktop .reference_even { padding: 10px 20px; }

.notdesktop #slider1_container { margin: 10px; }

@media (max-width:600px) {
    .notdesktop #slider1_container {
        float: none !important;
        margin-bottom: 30px;
    }
}