@charset "utf-8";

/********************************************************************************/
/* 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;
    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;
}

@font-face {
	font-family: 'UniversLTStd-LightCn';
	src: url('../../fonts/UniversLTStd-LightCn.eot');
	src: url('../../fonts/UniversLTStd-LightCn.woff') format('woff'),
		 url('../../fonts/UniversLTStd-LightCn.ttf') format('truetype'),
		 url('../../fonts/UniversLTStd-LightCn.svg#UniversLTStd-LightCn') format('svg');
	font-weight: normal;
	font-style: normal;
}




/********************************************************************************/
/* DEFAULT VALUE */
/********************************************************************************/
body {
	font-family: 'didot_lt_stdregular', Times, Times New Roman, serif;
	font-size: 27px;
	color: #000;
    line-height: 35px;
	letter-spacing: -1px;
	-webkit-text-size-adjust: none; /* Fix Chrome fonts 12px problem */
}

.wrap {
	width: 640px;
	margin: 0 auto;
}

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

a {text-decoration:underline; color:#000;}

p {
	text-align: center;
	margin: 13px 0 0;
}

.feng {font-family:'didot_lt_stdregular', Times, Times New Roman, serif;}
.fbold {font-weight:bold;}
.fitalic { font-style: italic; }

.f19{font-size:19px;}
.f36{font-size:36px;}
.f160{font-size: 160px;line-height: 0.9;}

.tblack { color: #000!important; }

div.spacer5{clear:both; height:5px; display:block;}
div.spacer10{clear:both; height:10px; 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;}

.w768{width:768px; margin:0 auto;}

.abs{position:absolute;}
.rel{position:relative;} 
.clear{clear:both;}
.clear_l{clear:left;}
.clear_r{clear:right;}

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

/********************************************************************************/
/* HEADER */
/********************************************************************************/
.header {
	width: 640px;
	height: 95px;
	background: url(../../images/logo.gif) center 31px no-repeat #fff;
	border-bottom: 1px solid #000;
}

.header .logo a {
	width: 192px;
	height: 41px;
	display: block;
	position: relative;
	top: 32px;
	left: 223px;
}
.header .lang  {
	position: relative;
	left: 560px;
	top: 13px;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	width: 50px;
}
.header .lang img { margin: 5px 5px 0 0; }

/********************************************************************************/
/* TOPNAV */
/********************************************************************************/
.topnav {
	width: 640px;
	background: #fff;
}

.topnav a, .footer a {
	font-family: 'UniversLTStd-LightCn';	
	font-size: 24px;
	color: #000;
	text-decoration: none;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
}

.topnav ul {
	text-align: center;
	border-bottom: 1px solid #000;
	height: 64px;
}

.topnav ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 25px 0 25px;
}

.topnav ul li a {
	display: block;
	padding: 24px 0 14px;
}

.topnav ul li a.current { border-bottom: 2px solid #000; }

/********************************************************************************/
/* FOOTER */
/********************************************************************************/
.footer {
	width: 640px;
	height: 148px;
	border-top: 1px solid #000;
}

.footer a { font-size: 21px; }
.footer .first_row {padding: 38px 0 0 86px;}
.footer .second_row {padding: 39px 0 0 119px;}
.footer span.line {
	border-left: 1px solid #000;
	display: block;
	height: 18px;
	margin: 0 30px;
}

/********************************************************************************/
/* CONTENT */
/********************************************************************************/
.content { background: #fff; width: 640px; text-align: center; position: relative; }

.banner .arrow_prev { position: absolute; top: 214px; left: 0; }
.banner .arrow_next { position: absolute; top: 214px; right: 0; }

.txt {
	width: 540px;
	text-align: center;
	padding: 60px 0 0;
	margin: 0 auto;
}

.txt .tit {
	color: #00674e;
	font-size: 49px;
	line-height: 46px;
	margin: 0 0 5px;
}

.txt .tit sup {
	font-size: 16px;
	bottom: 1.6em;
}

.btn { padding: 35px 0 10px; }

.social {padding: 42px 0 45px;}
.social .fb a, .social .weibo a {
	width: 52px;
	height: 51px;
	display: block;
}
.social .fb a {background: url(../../images/social.jpg) no-repeat left;}
.social .weibo a {background: url(../../images/social.jpg) no-repeat right;}
.social .fb {margin: 0 28px 0 256px;}

/*---------------------------------------------------------------------------- index, mask */

/*---------------------------------------------------------------------------- testimonials */
.banner_collection_land {
	width: 640px;
	height: 570px;
	background: url(../../images/banner_stories.jpg) no-repeat 0 0;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	padding: 50px 0 0;
}
.banner_collection_land .desc {
	font-size: 24px;
	line-height: 28px;
	width: 530px;
	margin: 0 auto;
	padding: 10px 0 0;
}

.collection a { color: #00674e; text-decoration: none; }
.collection .item {
	width: 640px;
	height: 80px;
	background: url(../../images/bg_product_name.gif) no-repeat;
}
.collection .item .product { padding: 30px 0 0; }
.collection .item .product .name { padding: 0 0 0 20px; }

.product_name {
	font-size: 48px;
	line-height: 46px;
	padding: 60px 0 0;
}
.product_desc {
	font-size: 24px;
	line-height: 26px;
	width: 530px;
	margin: 0 auto;
	padding: 24px 0 60px;
}

.testimonials p { margin: 0; }
p.customers { padding: 24px 0 56px; }
.testimonials .btn { padding-top: 0; font-size: 24px; }

.moisturizers_1 .arrow_prev { position: absolute; top: 330px; left: 0; }
.moisturizers_1 .arrow_next { position: absolute; top: 330px; right: 0; }
.moisturizers_2 .arrow_prev { position: absolute; top: 400px; left: 0; }
.moisturizers_2 .arrow_next { position: absolute; top: 400px; right: 0; }
.moisturizers_3 .arrow_prev { position: absolute; top: 430px; left: 0; }
.moisturizers_3 .arrow_next { position: absolute; top: 430px; right: 0; }
.moisturizers_4 .arrow_prev { position: absolute; top: 375px; left: 0; }
.moisturizers_4 .arrow_next { position: absolute; top: 375px; right: 0; }
.moisturizers_5 .arrow_prev { position: absolute; top: 460px; left: 0; }
.moisturizers_5 .arrow_next { position: absolute; top: 460px; right: 0; }
.eyes_1 .arrow_prev { position: absolute; top: 320px; left: 0; }
.eyes_1 .arrow_next { position: absolute; top: 320px; right: 0; }
.eyes_2 .arrow_prev { position: absolute; top: 320px; left: 0; }
.eyes_2 .arrow_next { position: absolute; top: 320px; right: 0; }
.serums_1 .arrow_prev { position: absolute; top: 445px; left: 0; }
.serums_1 .arrow_next { position: absolute; top: 445px; right: 0; }
.serums_2 .arrow_prev { position: absolute; top: 400px; left: 0; }
.serums_2 .arrow_next { position: absolute; top: 400px; right: 0; }
.serums_3 .arrow_prev { position: absolute; top: 420px; left: 0; }
.serums_3 .arrow_next { position: absolute; top: 420px; right: 0; }
.serums_4 .arrow_prev { position: absolute; top: 395px; left: 0; }
.serums_4 .arrow_next { position: absolute; top: 395px; right: 0; }
.serums_5 .arrow_prev { position: absolute; top: 410px; left: 0; }
.serums_5 .arrow_next { position: absolute; top: 410px; right: 0; }

.collection_name {
	font-size: 40px;
	padding: 44px 0 20px;
}
.collection_desc {
	width: 530px;
	margin: 0 auto;
	padding: 0 0 40px;
	line-height: 28px;
}

/*---------------------------------------------------------------------------- store */
.location {
	width: 640px;
}

.location .store {
	height: 215px;
	padding: 41px 0 0;
	background: url(../../images/dot_line.gif) no-repeat bottom;
}
.location .store .pic {margin: 0 25px 0 30px;}

.location .store .map {
	margin: -56px 0 0 563px;
	position: absolute;
	z-index: 1;
}
.location .store .map a {
	width: 49px;
	height: 48px;
	display: block;
	background: url(../../images/icon_map.jpg) no-repeat;
}

/*---------------------------------------------------------------------------- store locator*/
.map-container { height: 800px; display: none; margin: 20px 0; }
.near-store .location { display: none; }
.btn .hide { display: none; }
.btn_store a {
	width: 301px;
	height: 28px;
	background: url(../images/btn_store.gif) no-repeat;
	display: inline-block;
}
.btn_store_back a {
	width: 307px;
	height: 25px;
	background: url(../images/btn_store_back.gif) no-repeat;
	display: block;
}
.geo-info { margin: 0 auto; position: fixed; top: 40%; width: 100%; text-align: center; }
.geo-info { font-size: 30px; font-weight: bold; color: #000; font-family:"Microsoft JhengHei",Arial,Helvetica,sans-serif; }
.geo-info .msg {-moz-box-shadow:0px 0px 10px #333333; -webkit-box-shadow:0px 0px 10px #333333; box-shadow:0px 0px 10px #333333; background-color: #fff; border: 1px solid #333; padding: 25px 10px; width:400px; margin: 0 auto; }
.geo-info .error { text-align: center; font-weight: normal; font-size: 24px; padding: 0 15px; color: #000000; }
.geo-info .hide { display: none; }
.geo-info .error p { text-align: center; }
.geo-info .error h3 { font-size: 34px; color: #e10000; font-weight: bold; padding: 10px 0 30px 0; }
.geo-info .error a { border: 1px solid #999999; padding:0 20px; font-size: 34px; }
.btn div { display: inline-block; }

/********************************************************************************/
/* FIND YOUR MOISTURIZER */
/********************************************************************************/
/* Janpoem 2012.08.27 @start */
.fl { float: left; }
.fr { float: right; }
.fc { float: none; clear: both; }
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.hd { display: none; }
.js-hd {}
.abs { position: absolute; }
.rel { position: relative; }
.blod { font-weight: bold; }
.block { display: block; }
.lc { margin: 0 auto; }

.box:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
* html .box { zoom:1; }
*:first-child+html .box { zoom:1; }

.w960 { width: 960px; }

.main-container { width: 640px; margin: 0 auto; }
.main-content { width: 640px; margin: 0 auto; background: #fff; }

.bottom-nav { height: 36px; background: #fff; }
.bn-item { float: left; width: 480px; padding: 0px; margin: 0px; }
.bn-item a { display: block; width: 478px; height: 35px; border-width: 1px 1px 0; border-style: solid; border-color: #b9ccc6; background: url(../images/text/bottom_nav.png)  no-repeat center -40px; }
.bn-item a:hover, .bn-item .curr { background-position: center 0px; }
.bn-item .curr { border-color: #fff; }
.bn-item1 a { background-position: center -120px; border-left: 0px; width: 479px; }
.bn-item1 a:hover, .bn-item1 .curr { background-position: center -80px; }
.bn-item2 a { border-right: 0px; width: 479px; }

.page-2, .page-3, .page-4, .page-5 { padding: 40px 0 0; }
.page-2, .page-3, .page-4 { height: 640px; }
.page-item { position: relative; background:url(../images/text/q_bg.jpg) #ffffff no-repeat 0 40px; width: 640px; }
.page-5 {  }
.do-start { position: absolute; width: 89px; height: 25px; top: 377px; left: 620px; background: url(../images/text/start_now.jpg) no-repeat 0 0; }
.page-1 { background: none; }

.q-item { position:static; }
.q-tip { bottom: 90px; left: 204px; position: absolute; text-align: center;}
.q-hover { cursor: pointer; }
.do-next { position: absolute; top: 615px; left: 440px; width: 140px; height: 30px; background: url(../images/text/next.png) no-repeat 0 0; }
.do-prev { height: 30px; left: 60px; position: absolute; top: 615px; width: 190px; background: url(../images/text/prev.png) no-repeat 0 0; }
.do-find { height: 30px; left: 300px; position: absolute; top: 615px; width: 290px;background: url(../images/text/find.png) no-repeat 0 0; }
.do-back { position: absolute; top: 46px ; left: 747px; width: 147px; height: 14px;  }
.do-print { position: absolute; top: 460px; left: 840px; }

.page-2 .do-next { left: 260px; }

.q-hover { opacity: 0.4; filter: Alpha(opacity=40); }
.q-hovered { opacity: 1; filter: Alpha(opacity=100); }
.q-selected { opacity: 1; filter: Alpha(opacity=100); }

.q1 { background: url(../images/text/q1.png) no-repeat 0 0; }
.q1-0 { height: 122px; }
.q1-1,
.q1-2,
.q1-3,
.q1-4,
.q1-5 { height: 79px; }

/*
 used background to control
.q1-1 { background-position: 0px -52px; }
.q1-1-hover { background-position: -520px -52px; }
.q1-2 { background-position: 0px -102px; }
.q1-2-hover { background-position: -520px -102px; }
.q1-3 { background-position: 0px -146px; }
.q1-3-hover { background-position: -520px -146px; }
.q1-4 { background-position: 0px -203px; }
.q1-4-hover { background-position: -520px -203px; }
.q1-5 { background-position: 0px -257px; }
.q1-5-hover { background-position: -520px -257px; }
*/

.q1-1 { background-position: 0 -129px; }
.q1-2 { background-position: 0 -207px; }
.q1-3 { background-position: 0 -285px; }
.q1-4 { background-position: 0 -363px; }
.q1-5 { background-position: 0 -441px; }


.q2 { background: url(../images/text/q2.png) no-repeat 0 0; }
.q2-0 { height: 122px; }
.q2-1,
.q2-2,
.q2-3,
.q2-4 { height: 79px; }

/*
.q2-1 { background-position: 0px -58px; }
.q2-1-hover { background-position: -311px -58px;}
.q2-2 { background-position: 0px -121px; }
.q2-2-hover { background-position: -311px -121px; }
.q2-3 { background-position: 0px -170px; }
.q2-3-hover { background-position: -311px -170px; }
.q2-4 { background-position: 0px -222px; }
.q2-4-hover { background-position: -311px -222px; }
*/
.q2-1 { background-position: 0 -129px; }
.q2-2 { background-position: 0 -207px; }
.q2-3 { background-position: 0 -285px; }
.q2-4 { background-position: 0 -363px; }

.q3 { background: url(../images/text/q3.png) no-repeat 0 0; }
.q3-0 { height: 122px; }
.q3-1,
.q3-2,
.q3-3,
.q3-4,
.q3-5 { height: 79px; }

/*
.q3-1 { background-position: 0px -51px; }
.q3-1-hover { background-position: -530px -51px;}
.q3-2 { background-position: 0px -111px; }
.q3-2-hover { background-position: -530px -111px; }
.q3-3 { background-position: 0px -169px; }
.q3-3-hover { background-position: -530px -169px; }
.q3-4 { background-position: 0px -231px; }
.q3-4-hover { background-position: -530px -231px; }
.q3-5 { background-position: 0px -280px; }
.q3-5-hover { background-position: -530px -280px; }
*/
.q3-1 { background-position: 0 -129px; }
.q3-2 { background-position: 0 -207px; }
.q3-3 { background-position: 0 -285px; }
.q3-4 { background-position: 0 -363px; }
.q3-5 { background-position: 0 -441px; }

.result-item { position: absolute; }
.result-core { top: 150px; width: 640px; height: 770px; }
.result-text {  background: url(../images/text/desc_all.png) no-repeat 0 0; display: block; }

.result-core .result-text-wrap { height: 330px; overflow: hidden; width: 526px; margin: 0 0 0 57px; }
.result-core .result-text { background: none; }
.rc1 .result-text { margin-top: 0px; }
.rc2 .result-text { margin-top: -354px; }
.rc3 .result-text { margin-top: -781px; }
.rc4 .result-text { margin-top: -1167px; }
.rc5 .result-text { margin-top: -1603px; }

.result-core .product { display: block; margin: 0 0 0 120px; }

.result-optima {height: 293px;top: 985px; width: 640px;}
.result-optima .product { margin: 0 auto; display: block; }

.result-others  {height: 293px;top: 1314px; width: 640px;}
.result-others .product { margin: 0 auto; display: block; padding: 0px 0 0px 12px; }

.ro-text { position: absolute; top: 157px; left: 441px; width: 336px; height: 87px; background: url(../images/text/result_box.png) no-repeat 0 0;display: none; }

.product-title {height: 40px; margin-top: 15px; overflow: hidden; text-align: center; }
.ro1 .product-title img { margin-top: 0px; }
.ro2 .product-title img { margin-top: -60px; }
.ro3 .product-title img { margin-top: -120px; }
.ro4 .product-title img { margin-top: -180px; }
.ro-bottom { top: 317px; }
.ro-text .result-text { margin: 10px auto; display: block; width: 300px; height: 60px; background: url(../images/text/desc_all.png) no-repeat 0 -612px; }
.ro2-text .result-text { background-position: 0 -692px; }
.ro3-text .result-text { background-position: 0 -450px; }
.ro4-text .result-text { background-position: 0 -528px; }

.print-tip { position: absolute; top: 426px; left: 587px; }
/* Janpoem 2012.08.27 @over */

.subscribe-form {
    color: #FFFFFF;
    height: 50px;
    position: absolute;
    top:110px;
    z-index: 10;
    width: 100%;
    text-align: center;
    background:#fff;
}
.subscribe-input {
    background-color: #A5BAB2;
    border: 0 none;
    color: #FFFFFF;
    height: 100%;
    line-height: 100%;
    padding: 0 5px;
    width: 300px;
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 20px;
    vertical-align: top;

}
.do-subscribe {
    background-color: #7B998D;
    border: 0 none;
    color: #FFFFFF;
    cursor: pointer;
    height: 100%;
    line-height: 100%;
    padding: 0 35px;
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 20px;
    vertical-align: top;
}
.subscribe-input::-moz-placeholder {
    color: #FFF;
}
.subscribe-input:-moz-placeholder {
    color: #FFF;
}
.subscribe-input::-webkit-input-placeholder { color:#fff; }