@charset "utf-8";

/********************************************************************************/
/* IMPORT */
/********************************************************************************/
img{
	behavior: url("../css/iepngfix.htc");
}

/********************************************************************************/
/* CSS RESET */
/********************************************************************************/
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { 
    font-family: inherit; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    outline: 0; 
    padding: 0; 
    margin: 0 auto; 
    border: 0;
}
:focus { 
    outline: 0;
}
body { 
    line-height: 1;
}
ol, ul { 
    list-style: none;
}
table { 
    border-collapse: separate;
	border-spacing: 0;
}
caption, th, td { 
    font-weight: normal; 
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after { 
    content: "";
}
blockquote, q { 
    quotes: "" "";
}
sup { 
    position: relative; 
    bottom: 0.3em; 
    vertical-align: baseline;
}
sub { 
    position: relative; 
    bottom: -0.2em; 
    vertical-align: baseline;
}

/********************************************************************************/
/* EMBEDDING FONTS */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
/********************************************************************************/
@font-face {
    font-family: 'didot_lt_stdregular';
    src: url('../../fonts/didotltstd-roman-webfont.eot');
    src: url('../../fonts/didotltstd-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/didotltstd-roman-webfont.woff') format('woff'),
         url('../../fonts/didotltstd-roman-webfont.ttf') format('truetype'),
         url('../../fonts/didotltstd-roman-webfont.svg#didot_lt_stdregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

/********************************************************************************/
/* DEFAULT VALUE */
/********************************************************************************/
body {
	font-family: Times, Times New Roman, serif;
	font-size: 14px;
	text-align: left;
	color: #000;
	background: #7a998d;
}

.wrapper {
	width: 1040px;
}

h1 {font-size:25px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:13px;}

a:link {text-decoration: none; color: #434343;}
a:visited {text-decoration: none; color: #434343;}
a:active {text-decoration: none; color: #5ddad2;}
a:hover {text-decoration: none; color: #5ddad2;}

li { /*padding: 0 5px 2px 0;*/ }

p {
	text-align: center;
	padding: 5px 0;
	color: #000;
	line-height: 18px;
}

.f12{font-size:12px;}
.f13{font-size:13px;}
.f15{font-size:15px;}
.f22{font-size:22px;}
.f23{font-size:23px;}
.f25{font-size:25px;}

div.spacer10{clear:both; height:10px; display:block;}
div.spacer15{clear:both; height:15px; display:block;}
div.spacer20{clear:both; height:20px; display:block;}
div.spacer35{clear:both; height:35px; display:block;}
div.spacer55{clear:both; height:55px; display:block;}

.fl{float:left;}
.fr{float:right;}

.tl{text-align:left;}
.tr{text-align:right;}
.tc{text-align:center;}

.il{display:inline;}
.none{display:none;}

.w960{width:960px;}
.h280{height:280px;} /*Example*/

.abs{position:absolute;}
.rel{position:relative;} 
.clear{clear:both;}
.hidden{display:none;}

/********************************************************************************/
/* HEADER */
/********************************************************************************/
#header {
	height: 66px;
	width: 960px;
}

#header .logo {
	margin: 24px 300px 0 408px;
}
#header .logo .img {
	display: block;
	background: url(../../images/barlow_logo.gif) no-repeat;
	width: 131px;
	height: 28px;
}

.lang { margin: 45px 2px 0 0; }
.lang .en { padding: 0 0 0 17px; }

.lang_chi, .lang_chi_current, .lang_eng, .lang_eng_current {
	display: block;
	background: url(../../images/lang.gif) no-repeat;
	height: 13px;
}

.lang_chi { background-position: right top; width: 54px; }
a:hover .lang_chi, .lang_chi_current { background-position: right bottom; width: 54px; }

.lang_eng { background-position: left top; width: 40px; }
a:hover .lang_eng, .lang_eng_current {background-position: left bottom; width: 40px;}

/********************************************************************************/
/* TOPNAV */
/********************************************************************************/
#topnav {
	height: 35px;
	width: 960px;
	background: #fff;
	border-bottom: 1px solid #7a998d;
}
#topnav ul { padding: 13px 0 0 291px; }
#topnav ul li {
	float: left;
	margin: 0 30px 0 0;
	height: 11px;
}

#topnav .miracle, #topnav .about, #topnav .store, #topnav .email {
	display: block;
	background: url(../images/topnav.gif) no-repeat;
	height: 11px;
}

#topnav .miracle { background-position: left top; width: 63px; }
#topnav .about { background-position: -63px top; width: 71px; }
#topnav .store { background-position: -134px top; width: 86px; }
#topnav .email { background-position: -220px top; width: 89px; }

#topnav a:hover .miracle { background-position: left bottom; }
#topnav a:hover .about { background-position: -63px bottom; }
#topnav a:hover .store { background-position: -134px bottom; }
#topnav a:hover .email { background-position: -220px bottom; }

/********************************************************************************/
/* FOOTER */
/********************************************************************************/
#footer {
	width: 960px;
	height: 30px;
}
#footer ul { margin: 10px 0 0; }
#footer ul li { float: left; }

#footer ul.share { padding: 0 1px 0 0; }
#footer ul.share li { margin: 0 0 0 10px; }

#footer .line {
	display: block;
	background: url(../../images/footer_line.gif) no-repeat;
	width: 1px;
	height: 16px;
	margin: 0 5px;
}

/* footer link */
#footer .txt_contact, #footer .txt_privacy, #footer .txt_tnc, #footer .txt_share {
	display: block;
	background: url(../images/footer_txt.gif) no-repeat;
	margin: 4px 0 0;
}
#footer .txt_contact { background-position: left top; width: 54px; height: 9px; }
#footer .txt_privacy { background-position: left -9px; width: 68px; height: 9px; }
#footer .txt_tnc { background-position: left -18px; width: 96px; height: 9px; }
#footer .txt_share { background-position: left bottom; width: 98px; height: 10px; }

/* sahre */
.share .ico_fb, .share .ico_weibo {
	display: block;
	background: url(../../images/ico_social.jpg) no-repeat;
	height: 14px;
	margin: 1px 0 0;
}
.share .ico_fb { background-position: left top; width: 14px; }
.share .ico_weibo { background-position: left bottom; width: 16px; }

/********************************************************************************/
/* CONTENT */
/********************************************************************************/
#content {
	height: 500px;
	position: relative;
}

.brandstory_1, .brandstory_2, .brandstory_3, .collection, .myth { width: 960px; height: 500px; }
.brandstory_1 {	background: url(../../images/bg_brandstory_1.jpg) no-repeat 0 0; }
.brandstory_2 {	background: url(../../images/bg_brandstory_2.jpg) no-repeat 0 0; }
.brandstory_3 {	background: url(../../images/bg_brandstory_3.jpg) no-repeat 0 0; }
.collection { background: url(../../images/bg_collection.jpg) no-repeat 0 0; }
.myth { background: url(../../images/bg_myth.jpg) no-repeat 0 0; }

.brandstory_1 .para { position: absolute; top: 148px; left: 425px; }
.brandstory_2 .para { position: absolute; top: 143px; left: 1408px; }
.brandstory_3 .para { position: absolute; top: 175px; left: 2370px; }

.tit {
    font-family: 'didot_lt_stdregular';
	font-size: 50px;
	color: #000;
	letter-spacing: -1px;
	line-height: 46px;
	text-align: center;
}
.tit sup {
	font-size: 16px;
	bottom: 1.6em;
}

p.link {
	text-decoration: underline;
	margin: 5px 0 0;
}
.link_pos_1 { position: absolute; top: 352px; left: 628px; }
.link_pos_2 { position: absolute; top: 352px; left: 1588px; }
.link_pos_3 { position: absolute; top: 352px; left: 2548px; }
.link-experience_it_now a { display: block; width: 110px; height: 20px; }

.collection .tit { font-size: 40px; line-height: 40px; }
.collection .tit_where {
    font-family: 'didot_lt_stditalic';
	font-size: 20px;
	color: #000;
	font-style: italic;
	text-align: center;
}
.collection .headline { padding: 16px 0 0; }
.collection p { padding: 0; font-size: 12px; line-height: 16px; }

#product_1 { width: 131px; height: 340px; position:absolute; top: 128px; left: 3001px; }
#product_2 { width: 82px; height: 350px; position:absolute; top: 119px; left: 3132px; }
#product_3 { width: 80px; height: 227px; position:absolute; top: 247px; left: 3214px; }
#product_4 { width: 81px; height: 233px; position:absolute; top: 243px; left: 3294px; }
#product_5 { width: 70px; height: 270px; position:absolute; top: 206px; left: 3375px; }
#product_6 { width: 85px; height: 330px; position:absolute; top: 138px; left: 3444px; }
#product_7 { width: 192px; height: 317px; position:absolute; top: 150px; left: 3559px; }

#popup_product_1 { top: 218px; left: 2950px; }
#popup_product_2 { top: 293px; left: 3050px; }
#popup_product_3 { top: 293px; left: 3134px; }
#popup_product_4 { top: 293px; left: 3213px; }
#popup_product_5 { top: 293px; left: 3285px; }
#popup_product_6 { top: 293px; left: 3368px; }
#popup_product_7 { top: 293px; left: 3498px; }

.popup {
	width: 250px;
	height: 150px;
	background: url(../../images/bg_popup.png) repeat;
	text-align: center;	
	font-size: 12px;
	display: none;
	
	x-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	xopacity: 0.85;
	xfilter: 'alpha(opacity=85)';
	x*filter: alpha(opacity=85);
	x-khtml-opacity: 0.85;
	x-moz-opacity: 0.85;
}
.popup .name { padding: 40px 0 0; }
.popup .desc { width: 220px; padding: 8px 0; }
.popup a { text-decoration: underline; color: #000; }

/*---------------------------------------------------------------------------- slider */
.slider {
    width: 960px;
    height: 500px;
    overflow: hidden;
	position:relative;
}

.jcarousel {
    position: relative;
    overflow: hidden;
    /* You need at least a height, adjust this to your needs */
    height: 500px;
}

.jcarousel ul {
    width: 20000em;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

.carousel-control-prev {
    background: url("../../images/prev-horizontal.gif") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 20px;
    left: 5px;
    position: absolute;
    top: 230px;
    width: 20px;
}

.carousel-control-next {
    background: url("../../images/next-horizontal.gif") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 20px;
    position: absolute;
    right: 0px;
    top: 230px;
    width: 25px;
}

.carousel-control-next:hover, .carousel-control-next:focus, .carousel-control-prev:hover, .carousel-control-prev:focus {
    background-position: -20px 0;
}
.carousel-control-next:active, .carousel-control-prev:active {
    background-position: -40px 0;
}

/*------------------------------------------------------------------------ myth */
.myth .tit { text-align: left; padding: 55px 0 0 60px; }
.myth p { text-align: left; padding: 10px 0 0 60px; }
.myth .qa_section { padding: 30px 0 0 60px; }
.myth .q {
	width: 670px;
	float: left;
	cursor: pointer;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin: 0 0 15px;
}
.myth .ans {
	margin: 0;
	width: 670px;
	clear: both;
}
.myth .ans p { text-align: left; padding: 0 0 25px; width: 670px; }