@charset "utf-8";

/* -----------------------------------------------------------
  lecture layout
------------------------------------------------------------ */

/* lecture navigation 
------------------------------------------------------------ */
div.lectureNav {
clear:both;
height:84px;
background:url(/freeplus/lecture/images/lecture_navbg_01.gif) no-repeat left 10px;
}
div.lectureNav p {
margin:0 0 8px 29px;
}
div.lectureNav ul {
margin-left:13px;
}
div.lectureNav ul:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.lectureNav ul{display:inline-block;}
/* Hides from IE-mac \*/
* html div.lectureNav ul {height: 1%;}
div.lectureNav ul {display: block;}
/* End hide from IE-mac */

div.lectureNav ul li {
float:left;
width:177px;
margin-right:1px;
font-size:1px;
line-height:0.1;
}


/* lecture frame
------------------------------------------------------------ */
div.lectureFrame01 {
margin:18px 0 15px;
zoom:1;
}
div.lectureFrame02 {
padding-bottom:32px;
zoom:1;
}
div.lectureFrame03 {
padding-top:7px;
zoom:1;
}

/* #lecture01 */
#lecture01 div.lectureFrame01 {
background:url(/freeplus/lecture/images/index_bg_01.gif) repeat-y left top;
}
#lecture01 div.lectureFrame02 {
background:url(/freeplus/lecture/images/index_bg_02.gif) no-repeat bottom;
}
#lecture01 div.lectureFrame03 {
background:url(/freeplus/lecture/images/index_bg_03.jpg) no-repeat;
}

/* #lecture02 */
#lecture02 div.lectureFrame01 {
background:url(/freeplus/lecture/images/index02_bg_01.gif) repeat-y left top;
}
#lecture02 div.lectureFrame02 {
background:url(/freeplus/lecture/images/index02_bg_02.gif) no-repeat bottom;
}
#lecture02 div.lectureFrame03 {
background:url(/freeplus/lecture/images/index02_bg_03.jpg) no-repeat;
}


/* contents navigation
-------------------------------------------------- */
div.contentsNav ul {
margin-left:9px;
}
div.contentsNav ul:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.contentsNav ul{display:inline-block;}
/* Hides from IE-mac \*/
* html div.contentsNav ul {height: 1%;}
div.contentsNav ul {display: block;}
/* End hide from IE-mac */

div.contentsNav ul li {
float:left;
width:182px;
font-size:1px;
line-height:0.1;
}


/* contents inner
-------------------------------------------------- */
div#contentsInner {
width:670px;
margin:31px 0 0 30px;
}
div#contentsInner h2 {
margin-bottom:16px;
}


/* chart frame
-------------------------------------------------- */
div.chartFrame {
margin:54px 0 32px 10px;
}
div.chartFrame ul:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.chartFrame ul {display:inline-block;}
/* Hides from IE-mac \*/
* html div.chartFrame ul {height: 1%;}
div.chartFrame ul {display: block;}
/* End hide from IE-mac */

/* #lecture01 */
#lecture01 div.chartFrame {
margin-top:54px;
}
/* #lecture02 */
#lecture02 div.chartFrame {
margin-top:20px;
}

div.chartFrame ul li {
float:left;
width:330px;
}


/* feature frame
-------------------------------------------------- */
div.featureFrame {
margin:0 0 27px 10px;
padding:17px 0 15px;
}
div.featureFrame:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.featureFrame {display:inline-block;}
/* Hides from IE-mac \*/
* html div.featureFrame {height: 1%;}
div.featureFrame {display: block;}
/* End hide from IE-mac */

/* #lecture01 */
#lecture01 div.featureFrame {
background:url(/freeplus/lecture/images/index_bg_04.gif) no-repeat;
}
#lecture01 div.featureFrame .floatLeft {
margin-top:27px;
}
/* #lecture02 */
#lecture02 div.featureFrame {
background:url(/freeplus/lecture/images/index02_bg_04.gif) no-repeat;
}
#lecture02 div.featureFrame .floatLeft {
margin-top:19px;
}

div.featureFrameInner {
width:616px;
margin-left:20px;
}
div.featureFrameInner p {
float:left;
}
div.featureFrameInner ul li {
margin-bottom:7px;
width: 316px;
}
div.featureFrameInner ul li.last {
margin-bottom:0px;
}


/* products Listwrapper
-------------------------------------------------- */
div.productsListwrapper:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.productsListwrapper {display:inline-block;}
/* Hides from IE-mac \*/
* html div.productsListwrapper {height: 1%;}
div.productsListwrapper {display: block;}
/* End hide from IE-mac */


/* products list
-------------------------------------------------- */
div.productsListFrame01 {
width:649px;
margin-left:20px;
padding-bottom:10px;
background-color:#fff;
zoom:1;
}
div.productsListFrame02 {
padding-top:20px;
zoom:1;
}
div.productsListFrame03 {
margin-left:19px;
}

/* #lecture01 */
#lecture01 div.productsListFrame01 {
background:#fff url(/freeplus/lecture/images/index_bg_05.gif) no-repeat bottom;
}
#lecture01 div.productsListFrame02 {
background:url(/freeplus/lecture/images/index_bg_06.gif) no-repeat;
}

/* #lecture02 */
#lecture02 div.productsListFrame01 {
background:#fff url(/freeplus/lecture/images/index02_bg_05.gif) no-repeat bottom;
}
#lecture02 div.productsListFrame02 {
background:url(/freeplus/lecture/images/index02_bg_06.gif) no-repeat;
}
#lecture02 div.productsListFrame03 {
zoom: 1;
}
#lecture02 div.productsListFrame03:after { /* for Modern Browser */
content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

/* .productsListFrame01 */
div.productsListFrame01 h4 {
margin-bottom:18px;
}
div.productsListFrame01 h5 {
margin-bottom:10px;
}

/* .productsList */
div.productsList {
margin-bottom:20px;
}
div.productsList:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.productsList {display:inline-block;}
/* Hides from IE-mac \*/
* html div.productsList {height: 1%;}
div.productsList {display: block;}
/* End hide from IE-mac */

div.itemList01 {
float:left;
width:105px;
}
div.itemList02 {
float:left;
width:210px;
}

#lecture02 div.skincareItemList02 a,
.skincareItemList a {
color:#0095a3;
}
.agingcareItemList a {
color:#fd6394;
}
.whiteningItemList a{
color:#5f7b8f;
}
.basemakeItemList a {
color:#d0a935;
}
.reddishItemList a {
color:#707ec1;
}
.oilcontrolItemList a {
color:#7EBE41;
}

div.productsListInner {
float:left;
display: inline;
}

/* productsListsection */
div.productsListsection:after {content:"."; display:block; height:0.1px; clear:both; visibility:hidden;}
div.productsListsection {display:inline-block;}
/* Hides from IE-mac \*/
* html div.productsListsection {height: 1%;}
div.productsListsection {display: block;}
/* End hide from IE-mac */


div.productsItem {
float:left;
display:inline;
width:95px;
margin:0 10px 0 0;
text-align:center;
zoom:1;
}
div.productsItem a:hover {
text-decoration:none;
}
div.productsItem.lastItem {
margin-right:0;
}
div.productsItem.bigsizeItem {
margin-top:-10px;
}
div.productsItem p img {
margin-bottom:5px;
}

/* -----------------------------------------------------------
  point layout
------------------------------------------------------------ */

/* Base 
------------------------------------------------------------ */
.point {
width:560px;
color:#666;
font-family:"宋体", sans-serif;
background:url(/freeplus/lecture/images/point_bg_01.gif) no-repeat left bottom;
}
/* Frame */
div#pointFrame {
margin:50px 30px 0 50px;
padding-bottom:40px;
font-size:93%;/* 12px */
}
div#pointFrame h1 {
margin-bottom:25px;
}
div#pointFrame p {
line-height:1.6;
}
div#pointFrame p.paragraph {
margin-top:1em;
}
div#pointFrame ul.noticeList {
margin-top:10px;
}
div#pointFrame ul.noticeList li {
margin-bottom:5px;
}

/* point01 */
#point01 p.pointImg01 {
margin:40px 0 80px;
}

/* point02 */
#point02 p.pointImg01 {
margin-top:10px;
}
#point02 p.pointImg02 {
margin:20px 0 30px;
}
/* point03 */
#point03 div.pointImg {
margin-top:20px;
}
#point03 div.pointImg p {
margin-bottom:3px;
background:url(/freeplus/lecture/images/point_arrow_01.jpg) no-repeat center bottom;
}
#point03 div.pointImg p.img01 {
height:166px;
}
#point03 div.pointImg p.img02 {
height:252px;
}
#point03 div.pointImg p.img03 {
margin-bottom:30px;
background:none;
}

/* point04 */
#point04 div.pointList {
padding-bottom:34px;
background:url(/freeplus/lecture/images/point_arrow_01.jpg) no-repeat center bottom;
}
#point04 div.pointList h2 {
margin-bottom:10px;
}
#point04 div.pointList p {
margin-bottom:20px;
}
#point04 div.pointImg {
margin-bottom:30px;
text-align:center;
}
#point04 div.pointImg p,
#point04 div.pointImg li {
margin-top:10px;
font-size:1px;
line-height:0.1;
}