@charset "utf-8";
/* CSS Document */

.content{ width:100%;}
div.ProductTitle{ background:#283480; padding:20px;}
div.ProductTitle h2{ font-size:40px; color:#FFF; font-weight:100; width:980px; margin:0 auto; padding:0 15px; box-sizing:border-box;}
.content1{ width:980px; margin:0 auto;}
.content1 ul{ overflow:hidden; margin-bottom:20px;}

/*產品內頁選單*/
div.itenLink{ width:100%; height:122px; background:#e5f4f7;}
div.itenLink div{ width:980px; margin:0 auto;}
div.itenLink div a{ text-decoration:none; color:#3d3d3d; width:32.5%; display:block; float:left; border-bottom:4px solid #b6e7f1; height:118px; margin:0 0.2%; line-height:118px; font-size:16px; text-indent:-9999px; text-align:center;}
div.itenLink div a:hover{ transition: all 0.4s; border-bottom:4px solid #0091b0;}
div.itenLink div a.active{border-bottom:4px solid #0091b0;}
div.itenLink div a.page01{ background:url(../images/product02/page01.png) no-repeat center;}
div.itenLink div a.page02{ background:url(../images/product02/page02.png) no-repeat center;}
div.itenLink div a.page03{ background:url(../images/product02/page03.png) no-repeat center;}

/*產品介紹*/
.content1 div.info{ clear:both; padding:20px;}
.content1 h3{ font-size:39px; color: #0091b0; font-weight:100; background:url(../images/product01/page01/title.png) no-repeat; padding:18px 0 40px 236px;}
.content1 p{ font-size:17px; color:#000000; line-height:1.9; margin:5px 0;}
.content1 p span{ padding-right:13px; margin-right:5px; background:url(../images/all/TM_BLACK.png) no-repeat right top;}
ul.iten li{ padding-left:33px; font-size:15px; color:#333; line-height:2;}
ul.iten li.number01{ background:url(../images/product01/01.png) no-repeat left top;}
ul.iten li.number02{ background:url(../images/product01/02.png) no-repeat left top;}
ul.iten li.number03{ background:url(../images/product01/03.png) no-repeat left top;}
ul.iten li.number04{ background:url(../images/product01/04.png) no-repeat left top;}
ul.iten li.number05{ background:url(../images/product01/05.png) no-repeat left top;}
ul.iten li.number06{ background:url(../images/product01/06.png) no-repeat left top;}
ul.iten li.number07{ background:url(../images/product01/07.png) no-repeat left top;}
ul.iten li.number08{ background:url(../images/product01/08.png) no-repeat left top;}
ul.iten li.number09{ background:url(../images/product01/09.png) no-repeat left top;}
ul.iten li.number10{ background:url(../images/product01/10.png) no-repeat left top;}
ul.iten li span{ background:url(../images/all/TM_BLACK.png) no-repeat right top; padding-right:15px; margin-right:5px;} 

div.tips01{ background:url(../images/product02/01.png) no-repeat left top; padding-left:27px; box-sizing: border-box;}
div.tips02{ background:url(../images/product02/02.png) no-repeat left top; padding-left:27px; box-sizing: border-box;}
div.tips03{ background:url(../images/product02/03.png) no-repeat left top; padding-left:27px; box-sizing: border-box;}

.ProductLOCYCARE{background:url(../images/product02/page01/LOCYCARE.png) no-repeat; width:3610px; height:257px; position: absolute; z-index:1; margin-top: -170px; margin-left: 52%;}

/*劑量與用法*/
.content2{background:#e5f4f7; width:100%; overflow:hidden; padding-bottom:50px;}
.content2 div.stepdiv{ width:980px; margin:0 auto; padding:30px 20px; box-sizing:border-box;}
div.useage{ background:url(../images/product01/page01/usage.png) no-repeat; padding-left:60px; height:50px; font-size:20px; line-height:40px; margin-bottom:20px;}
div.useage span{ border-bottom:2px solid #0091b0;}

/*流程圖*/
ul li.stepdiv{ padding-left:0;}
.content ul li div.step01,
.content ul li div.step02,
.content ul li div.step03,
.content ul li div.step04{ width:25%; padding-top:150px; float:left; font-size:13px; margin-top:10px;}

.content ul li div.step01{ background:url(../images/product02/page01/01.png) no-repeat center top;}
.content ul li div.step02{ background:url(../images/product02/page01/02.png) no-repeat center top;}
.content ul li div.step03{ background:url(../images/product02/page01/03.png) no-repeat center top;}
.content ul li div.step04{ background:url(../images/product02/page01/04.png) no-repeat center top;}

.content ul li div.step01 div,
.content ul li div.step02 div,
.content ul li div.step03 div,
.content ul li div.step04 div{ width:95%; margin:0 auto;}

p.tips{ background:url(../images/product01/tips.png) no-repeat left top; padding-left:27px; box-sizing: border-box;}
.content ul li div.step01 p{ width:90%; margin:0 auto;}


/*哪裡購買*/
h3.HowToBuy{ background:url(../images/product01/page01/Buytitle.png) no-repeat; padding-left:130px;}
div.info ul.HowToBuy{ width:100%; margin:20px 0; overflow:hidden;}
div.info ul.HowToBuy li{ width:30%; float:left; text-align:center; max-width:140px; padding-left:0;}
div.info ul.HowToBuy li p{ background:none; padding-left:inherit;}

/*關於灰指甲*/
h3.abouttitle{ background:url(../images/product01/page01/abouttitle.png) no-repeat; padding-left:192px;}
div.about p{ font-size: 14px; color: #333; line-height:1.7; background:url(../images/all/point.png) no-repeat left top; padding-left:25px;}
div.about p.title{color: #283480; font-weight: 900; background:none; font-size: 17px; padding-left:0;}

@media screen and (max-width: 990px){
    .content1{ width:100%;}
	div.ProductTitle h2{ width:100%; padding:0;}
	div.itenLink div{ width:100%;}
	.stepdiv div.content{ width:100%;}
	.content2 div.stepdiv{ width:100%;}
	.content3{ width:100%;}
}

@media screen and (max-width: 950px){
    .ProductLOCYCARE{ margin-top: -100px;}
}

@media screen and (max-width: 900px){
    .content{ margin-top:80px;}	
}

@media screen and (max-width: 850px){
    .content ul li div.step01,.content ul li div.step02,.content ul li div.step03,.content ul li div.step04{ width:50%; margin-bottom:20px; min-height: 80px;}
}

@media screen and (max-width: 780px){
   .flexslider{ margin-top:80px; display:none;} 
   .ProductLOCYCARE{ display:none;}
}

@media screen and (max-width: 600px){
    div.ProductTitle h2{ font-size:28px;}	
}

@media screen and (max-width: 580px){
	div.itenLink{ width:100%;}
	div.itenLink a{ display:block; border-bottom:1px solid #FFF;}
}

@media screen and (max-width: 550px){
    div.itenLink{ height:123px;}
	div.itenLink div a.page01{ background:url(../images/product02/page01_SM.png) no-repeat center;}
    div.itenLink div a.page02{ background:url(../images/product02/page02_SM.png) no-repeat center;}
    div.itenLink div a.page03{ background:url(../images/product02/page03_SM.png) no-repeat center;}
}

@media screen and (max-width: 450px){
	.content h3{ background:none; padding:10px 0;}
	.content ul li div.step01,.content ul li div.step02,.content ul li div.step03,.content ul li div.step04{ width:100%; text-align:center;}
}

@media screen and (max-width: 400px){
    div.ProductTitle h2{ font-size:20px}
}