/*base*/
body{
background:#515253;
}

div#wall{
background: url(../products/img_mist/mist_head_bg.gif) 0 0 repeat-x;
padding-bottom:0px;
}

*html div#dHeaderWrap ul.gNavi{
display:block;
height:31px;
overflow:hidden;
}


#mistWrapper{
display:block;
margin:0 auto;
padding:0;
width:950px;
text-align:left;
background: url(../products/img_mist/mist_bg.jpg) 0 0 no-repeat;
}



#mistContents{
margin:0 55px 0;
padding:31px 0 0 ;
width:840px;
}


/*Contsnts Box Base*/

.grayBox{
background-color:#313131;
}

.grayBox p{
color:#FFFFFF;
}

.mistCont{
margin:30px 0;
}

p.notes{
margin:1em 0 0 0;
font-size:110%;
}

p.notes2{
font-size:110%;
}

ul.advice li{
padding:0 0 0 8px;
background:url(../products/img_mist/advice_mark.gif) 0 6px no-repeat;
}

/*main*/

#mistMain{
display:block;
width:840px;
}

#mistNavi{
float:left;
width:429px;
margin:0 0 17px;
}

#mistNavi ul{
margin:375px 0 0;
}

#mistNavi ul li.navi01{
display:block;
margin:0 0 7px;
}

#mistTitle{
display:block;
float:left;
width:411px;
}

.mistImg{
float:left;
}

#titleComment h3{
margin:0 0 5px;
}

#titleComment .titleInfo{
margin:20px 0 0;
height:116px;
}

#titleComment .titleInfo .point{
color:#ec4671;
}

#titleComment p, #titleComment li{
color:#FFFFFF;
}

#titleComment .buy{
margin:0px 0 15px;
}

#mistVolume{
clear:both;
margin:0 30px 30px ;
width:780px;
color:#FFFFFF;
}

*html #mistVolume{
margin:11px 30px 30px ;
}

*:first-child+html #mistVolume{
margin:15px 30px 30px ;
}


/*30age*/

#ageHair{
padding:30px;
}

#ageHair h2{
margin:0 0 20px;
}

.result{
float:left;
width:300px;
height:85px;
margin:20px 0 0 10px;
padding:15px;
border:1px solid #ec4671;
}

*html .result{
margin:20px 0 0 5px;
}

.result h3{
margin:0 0 10px;
}

.resultImg{
float:right;
margin:20px 10px 0 0;
width:402px;
}

*html .resultImg{
margin:20px 5px 0 0;
}

/*Mechanism*/

#mechanism {
width:840px;
background-color:#FFFFFF;
}

#mechanism h2{
display:block;
margin:0 0 30px;
}

#mechanism h3{
margin:0 0 20px;
}

#mechanism .cont{
width:780px;
padding: 0 30px 30px;
}

.cmcImg{
float:left;
width:380px;
margin:20px 0 0 0;
}

.cmcTxt{
float:right;
width:360px;
margin:60px 0 0 0;
}

.cmcTxt h4{
margin:0 0 20px;
}

.cmcTxt span{
padding:0 2px;
background-color:#ffcccc;
}

/*Elemnt*/

#element{
margin:30px 30px;
color:#FFFFFF;
font-size:90%;
}

/*How To Use*/

#howto{
margin:0 0 20px;
padding:0 30px 30px;
background-color:#FFFFFF;
}

.howtoImg{
margin:20px 0;
}

#howto ul{
margin:0 0 0 12px;
}

#howto ul li{
float:left;
width:156px;
margin:0 50px 0 0; 
}

#howto ul li.third{
margin:0 44px 0 0; 
}

#howto ul li.last{
margin:0 0 0 0; 
}

/*Unit*/

.unitImg{
margin:30px 30px 20px;
}

#unit {
width:780px;
margin:0 30px;
}

*html #unit {
padding:0 0 30px 0;
}

.unitProduct{
float:left;
display:block;
width:228px;
margin:0 46px 30px 0;
padding:0;
color:#FFFFFF;
text-align:center;
}

#unit .last{
margin:0 0 0 0;
}

.unitProduct p{
text-align:left;
margin:10px 0 0;
}

/*Info*/

#infoBox{
margin:40px 0;
}

#infoBox h2{
margin:0 0 25px;
}

#infoBox h3{
margin:0 0 10px;
}

#infoImg{
float:left;
margin:0 47px 0 0;
width:124px;
}

#infoTxt{
color:#FFFFFF;
}

#infoDetail{
float:left;
width:402px;
}

#infoBuy{
float:right;
width:200px;
padding:20px 15px;
border:1px solid #ec4671;
}

#infoBuy .buy{
margin:10px 0 0;
}

.infoBorder{
margin:20px 0;
}

#infoDetail li{
float:left;
width:190px;
}


/*footer*/
#footer{
border-top:1px solid #666666;
height:4em;
padding:10px 0;
color:#FFFFFF;
}

#footer ul{
float:left;
width:350px;
margin:0 0 0 -1em;
}

#footer ul li{
float:left;
padding:0 1em ;
font-size:100%;
border-right:1px solid #666666;
}

#footer ul li.last{
border-right:none;
}

#footer #copyright{
float:right;
width:450px;
text-align:right;
font-size:100%;
}

#footer #copyright p{
font-size:100%;
}

#backTop{
margin:0 0 30px;
text-align:right;
}

/*/////////////////////////////////*/
.clearFix {
    zoom:1;/*for IE 5.5-7*/
}
.clearFix:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}