@charset "utf-8";
/* CSS reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
table {border-collapse:collapse;border-spacing:0;}
ol,ul {list-style:none;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
/* General Style */
img.width_100{height:auto; max-width:100%; margin:auto;}
#video{
	width: 100%;
	height: 508px;
	margin: auto;
	background-image: url(../images/index_02.jpg);
}
.h1{ width:334px; height:140px; margin:auto;}
.video_content{
	width: 1000px;
	height: 508px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
.kv {
	height: 508px;
	width: 500px;
	position: absolute;
	top: 0px;
	right: 0px;
}

.t1 {
	height: 508px;
	width: 460px;
	position: absolute;
	left: 15px;
}



.video_wrap{
	width: 595px;
	height: 355px;
	position: absolute;
	top: 5px;
	left: 35px;
	z-index: 5;
}
.video_inner{width:550px; height:309px; background:#000; position:absolute; top:22px; left:23px; z-index:10;}
.video_txt{width:348px; height:320px; background:url(../images/video_txt.png); position:absolute; top:27px; right:33px;}
.like_wrap{width: 100px;height: 20px;position: absolute;top: 200px;left: 130px;}
.share_btn{width: 102px;height: 25px; background-image:url(../images/share_btn.png);position: absolute;top: 245px;left: 120px;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition:all 0.5s ease;}
.share_btn:hover{background-image:url(../images/share_btn_hover.png);;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition:all 0.5s ease}
.small_prod{width:76px; height:234px; background:url(../images/small_prod.png) no-repeat; position:absolute; right:0px; bottom:10px; opacity:0;}
.small_prod{opacity:none\9;}


#prod{
	width: 1000px;
	height: 679px;
	margin: auto;
	position: relative;
	background-color: #FFF;
}
#prod ol li {
	float: left;
	height: 580px;
	width: 300px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 20px;
}



.t2 {
	height: 35px;
	width: 407px;
	margin-right: auto;
	margin-left: auto;
}

.professional {
	float: left;
	height: 580px;
	width: 300px;
	margin-right: 10px;
	margin-top: 20px;
	margin-left: 20px;
}



.trial_btn1 {
	height: 35px;
	width: 100px;
	cursor: pointer;
	position: absolute;
	left: 534px;
	top: 609px;
}
.trial_btn2 {
	height: 35px;
	width: 100px;
	cursor: pointer;
	position: absolute;
	left: 860px;
	top: 609px;
}


#mv_wrap {
	background-color: #FFF;
	/* [disabled]text-align: center; */
	height: 533px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
}

.mv {
	height: 477px;
	width: 940px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}



.big_prod{width:700px; height:650px; background:url(../images/big_prod.jpg) left center no-repeat; top:60px; left:0; z-index:0; position:absolute;}
.prod_notice{width:250px; height:53px; background:url(../images/prod_notice.png) no-repeat; bottom:105px; left:75px; z-index:5; position:absolute;}
.prod_content{width:500px; height:420px; left:50%; top:50%; margin:-190px 0 0 -20px; position:absolute;}

.shop_btn{width:131px; height:29px; background:url(../images/shop_btn.jpg) no-repeat; border:#666 1px solid; position: absolute; bottom:0; left:195px; margin:auto;}
.shop_btn:hover{ border:#e02623 1px solid;}


#blogger{
	width: 1000px;
	height: 620px;
	background-color: #FFF;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]background-image: url(../images/index_05.png); */
}

.t3 {
	height: 35px;
	width: 390px;
	margin-right: auto;
	margin-left: auto;
}
.bloggger_nav1 {
	height: 74px;
	width: 800px;
	position: absolute;
	left: 102px;
	top: 74px;
}


.bloggger_nav1 ol li {
	float: left;
	margin-right: 6px;
	height: 74px;
	width: 74px;
	cursor: pointer;
}

.bloggger_nav2 {
	height: 74px;
	width: 800px;
	position: absolute;
	left: 102px;
	top: 510px;
}
.bloggger_nav2 ol li {
	float: left;
	margin-right: 6px;
	height: 74px;
	width: 74px;
	cursor: pointer;
}




.blogger_top{width:1000px; height:135px; margin:auto; background:url(../images/blogger_top.jpg) no-repeat;}
.blogger_mid{width:100%; height:330px; border-top:#e02623 2px solid;border-bottom:#e02623 2px solid; background-color:#fff;}
.blooger_content{width:1000px; height:326px; padding:2px 0; background:url(../images/blogger_content.jpg) center right no-repeat; margin:auto; position:relative;}
.color_p{width:182px; height:182px; position:absolute; top:-95px; left:40px;}
#shampoo {
	background-color: #FFF;
	height: 1068px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}


.s_prod2{width:110px; height:321px; position:absolute; bottom:-100px; left:80px;}
.blogger_btn{width:140px; height:30px; background:url(../images/blogger_btn.jpg) no-repeat; position:absolute; bottom:30px; left:230px;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition:all 0.5s ease;}
.blogger_btn:hover{background:url(../images/blogger_btn_hover.jpg) no-repeat;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition:all 0.5s ease;}
.blogger_bottom{width:1000px; height:100px; margin:auto;}
.others{width:500px; height:100px; margin-left:210px; background:url(../images/blogger_bottom.jpg) top center no-repeat; position:relative;}
.gotofb_btn{width:133px; height:28px; background:url(../images/gotofb_btn.jpg) no-repeat; position:
absolute; top:12px; right:10px;}
.gotofb_btn:hover{background:url(../images/gotofb_btn_hover.jpg) no-repeat;}
.footer{width:100%; height:40px; background:#e7e7e7; text-align:center;}
#apDiv1 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: visible;
}

#apDiv2 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv3 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv4 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv5 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv6 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv7 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv8 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv9 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv10 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv11 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv12 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv13 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv14 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv15 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv16 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv17 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv18 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv19 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}
#apDiv20 {
	position: absolute;
	width: 820px;
	height: 360px;
	z-index: 1;
	left: 90px;
	top: 130px;
	visibility: hidden;
}

@media screen and (max-width: 320px)
{
#nav_wrap {
	width: 185px;
	height: 104px;
	background: url(../images/nav_bg.png) no-repeat;
	position: fixed;
	top: 75px;
	left: 0;
	z-index: 100;
	display: none;
}

#video{
	width: 320px;
	height: auto;
	background-image: url(../images/index_02.jpg);
	position: relative;
	left: 0px;
	top: 0px;
}	
.video_content{
	width: 320px;
	height: auto;
	position: relative;
	left: auto;
	top: auto;
	margin: auto;
}
.t1 {
	height: auto;
	width: 320px;
	position: relative;
	left: 0px;
	top: 0px;
}
.kv {
	height: auto;
	width: 100%;
	position: relative;
	display: none;
}
#mv_wrap {
	background-color: #FFF;
	/* [disabled]text-align: center; */
	height: 280px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
}
.mv {
	height: 250px;
	width: 320px;
	margin: 0px;
	position: absolute;
	left: 0px;
	top: 10px;
}
#prod {
	width: 320px;
	height: auto;
	margin: auto;
	position: absolute;
	background-color: #FFF;
	left: 0px;
	top: 630px;
}
#prod ol li {
	height: 580px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
}
#blogger {
	width: 320px;
	height: 620px;
	background-color: #FFF;
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]background-image: url(../images/index_05.png); */
	left: 0px;
	top: 2450px;
}
.t3 {
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}

.bloggger_nav1 {
	height: 32px;
	width: 320px;
	position: absolute;
	margin-top: 10px;
	left: 0px;
	top: 50px;
}
.bloggger_nav1 ol li {
	float: left;
	margin-right: 0px;
	height: 32px;
	width: 32px;
	cursor: pointer;
	position: relative;
}
.bloggger_nav2 {
	height: 32px;
	width: 320px;
	position: absolute;
	margin-top: 10px;
	left: 0px;
	top: 230px;
}
.bloggger_nav2 ol li {
	float: left;
	margin-right: 0px;
	height: 32px;
	width: 32px;
	cursor: pointer;
	position: relative;
}

#apDiv1 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: visible;
	left: -5px;
	top: 90px;
}
#apDiv2 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv3 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv4 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv5 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv6 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv7 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv8 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv9 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv10 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv11 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv12 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv13 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv14 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv15 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv16 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv17 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv18 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv19 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#apDiv20 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	visibility: hidden;
	left: -5px;
	top: 90px;
}
#shampoo {
	background-color: #FFF;
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	left: 0px;
	top: 2750px;
}
.t2 {
	height: auto;
	width: 320px;
	margin: auto;
}

}