@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, 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 {
	xfont-family: Times, 'Microsoft YaHei', 'Microsoft JhengHei', "STHeiti", Times New Roman, serif;
	font-family: Times, Times New Roman, serif;
    font-size: 13px;
    text-align: left;
    color: #000;
    background: #fff;
}

.wrapper { xwidth: 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 { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #7c8178; }
a img { border: none; }

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

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

.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f15 { font-size: 15px; }
.f19 { font-size: 19px !important; line-height: 22px !important; }
.f22 { font-size: 22px; }
.f23 { font-size: 23px; }
.f24 { font-size: 24px !important; }
.f25 { font-size: 25px; }
.f36 { font-size: 36px !important; }
.f120 { font-size: 120px !important; line-height: 110px !important; }

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; }
.w270 { width: 270px; }
.h280 { height: 280px; }
/*Example*/

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

span.italic { font-family: 'didot_lt_stditalic'; }
span.italic_normal { font-style: italic; }

/********************************************************************************/
/* HEADER */
/********************************************************************************/
.top {
    height: 50px;
    padding: 12px 0 0;
    text-align: center;
}

.logo { margin-top: 4px; }

.logo .img {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 138px;
    height: 30px;
    background: url(../../images/logo.png) no-repeat;
}

.top .top_left, .top .top_right { position: absolute; top: 12px; }

.top .top_left { left: 20px; }
.top .top_right { right: 20px; text-transform: uppercase; }

.top .block_first {
    float: left;
    padding: 3px 12px 0 0;
}
.top .block {
    float: left;
    padding: 3px 12px 0;
    background: url(../../images/util-bar.png) no-repeat 0 4px;
}

.top .top_right .current_lang { text-decoration: none; color: #7c8178; }

.top .lang_chi { font-size: 12px; line-height: 15px; }

/********************************************************************************/
/* TOPNAV */
/********************************************************************************/
#topnav {
    width: auto;
    height: 30px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    font-size: 14px;
    text-transform: uppercase;
}

#topnav ul { text-align: center; }
#topnav ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 12px 0 13px;
    height: 11px;
}

#topnav ul li a { display: block; padding: 9px 0 5px; }
#topnav ul li a:hover { color: #000; border-bottom: 2px solid #000; }

/********************************************************************************/
/* BOTTOMNAV */
/********************************************************************************/
#bottomnav {
    width: auto;
    height: 30px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    font-size: 14px;
    text-transform: uppercase;
}
#bottomnav ul { text-align: center; }
#bottomnav ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 12px 0 13px;
    height: 11px;
}

#bottomnav ul li a { display: block; padding: 9px 0 5px; }
#bottomnav ul li a:hover, #bottomnav ul li a.current { color: #000; border-bottom: 2px solid #000; }

/********************************************************************************/
/* FOOTER */
/********************************************************************************/
.bottom {
    height: 26px;
    padding: 20px 0 0;
    text-align: center;
}
.bottom .block_first {
    display: inline-block;
    zoom: 1;
    *display: inline;
    padding: 3px 12px 0 0;
}
.bottom .block {
    display: inline-block;
    zoom: 1;
    *display: inline;
    padding: 3px 12px 0;
    background: url(../../images/util-bar.png) no-repeat 0 4px;
}

.icon {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 2px 0 1px;
}

/********************************************************************************/
/* CONTENT */
/********************************************************************************/
#content {
    width: 1260px;
    height: 606px;
    color: #fff;
    position: relative;
}

#content .para p { font-size: 15px; line-height: 17px; }

.common_inside {
	width: 960px;
	margin: 0 auto;
	position: relative;
	height: 100%;
	color: #000;
}

/* btn */
.btn_white, .btn_black { text-align: center; text-transform: uppercase; }
.btn_white span a { display: inline-block; zoom: 1; *display: inline; background: #fff; color: #000; padding: 6px 12px; }
.btn_black span a { display: inline-block; zoom: 1; *display: inline; background: #000; color: #fff; padding: 6px 12px; }

.line_white { border-bottom: 1px solid #fff; padding: 18px 0 0; margin: 0 0 18px; }
.line_black { border-bottom: 1px solid #000; padding: 18px 0 0; margin: 0 0 18px; }

/* para postion */
.home, .ingredients, .stories { height: 606px; }
.home .para { width: 474px; top: -93px; left: 60px; margin-left: 10px; transform-origin: left center; }
.ingredients .para { width: 510px; top: -93px; left: 60px; margin-left: 10px; transform-origin: left center; }
.stories .para { width: 600px; top: -93px; left: -624px; transform-origin: left center; }

.tit {
    font-family: 'didot_lt_stdregular';
    font-size: 55px;
    letter-spacing: -1px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
}
.tit sup {
    font-size: 36%;
    bottom: 1.9em;
}

a.link {
    color: #fff;
    text-decoration: underline;
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 5px 0;
}

/*---------------------------------------------------------------------------- stories & testimonials */

.stories .product_cat {
	width: 600px;
	top: -180px;
	left: 20px;
}
.stories .product_cat ul { text-align: center; }
.stories .product_cat ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
	margin: 0 24px
}
.testimonials .tit {
	font-size: 36px;
	line-height: 36px;
    margin-top: 50px;
}
.testimonials .serums { margin: 40px 0 0; }
.testimonials .eyes { margin: 220px 0 0; }
.testimonials .eyes .product_name { width: 155px; }
.testimonials .moisturizers { margin: 25px 0 0; }
.testimonials .products ul { text-align: center; }
.testimonials .products ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
	margin: 0 20px
}
.testimonials a:hover .product_name, a:hover .collection_name { color: #01775a; }
.testimonials .product_name, .collection_name {
	margin: 20px 0 0;
	text-transform: uppercase;
	line-height: 15px;
	width: 135px;
}
/* back button */
.btn_back a span {
	display: block;
	width: 35px;
	height: 35px;
    background: url(../../images/btn_box_back.gif) no-repeat 0 0;
}
.btn_back a:hover span { background-position: bottom left; }
.btn_back {
	top: 420px;
	right: 0;
}


/*---------------------------------------------------------------------------- slider */

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

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

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



.step { text-align: center; }
.step .line { padding: 0 15px; }

/*----*/

html, body { width: 100%; height: 100%; overflow: hidden; }
.footer { width: 100%; background-color: #ffffff; }
.center { color: #ffffff; overflow: hidden; position: relative; }
.bg-home { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
html:root .bg-home {
    top: 50%;
    right:auto;
    bottom:auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.center-wrapper { left:50%; top:50%; position: absolute; }

.main { height: 100%; overflow: hidden; }

/*ingredients*/
.ingredients { overflow: hidden; }
.slider-item-wrapper, .slider-wrapper { height: 100%; width: 100%; position: absolute; top:0; }
.carousel-control-prev, .carousel-control-next {z-index: 2; }
.slider-item-wrapper-01 { left: 0; }
.slider-item-wrapper-02 { left: 100%; }
.slider-item-wrapper-03 { left: 200%; }
.slider-item-wrapper-04 { left: 300%; }
.slider-item-wrapper-05 { left: 400%; }