@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: 24%;
	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/product01/page01.png) no-repeat center;
}
div.itenLink div a.page02 {
	background: url(../images/product01/page02.png) no-repeat center;
}
div.itenLink div a.page03 {
	background: url(../images/product01/page03.png) no-repeat center;
}
div.itenLink div a.page04 {
	background: url(../images/product01/page04.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/R_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;
}
li.fiim {
	clear: both;
	padding-left: 0 !important;
	padding-top: 30px;
}
li.fiim a {
	display: block;
	background: url(../images/product01/Film-icon.png) no-repeat left center;
	height: 70px;
	color: #0091b0;
	text-decoration: none;
	padding-left: 75px;
	line-height: 75px;
	transition: all 0.4s;
}
li.fiim a span {
	border-bottom: 1px solid #48cfad;
}
li.fiim a:hover {
	color: #48cfad;
	transition: all 0.4s;
}
/*仿單下載*/
.content .content1 ul li a.download {
	text-decoration: none;
	color: #FFF;
	text-align: center;
	transition: all 0.4s;
	font-size: 13px;
	width: 100%;
	height: 43px;
	display: block; /*background:linear-gradient(-135deg, transparent 1em, #373737 0);*/
	line-height: 43px;
	max-width: 318px;
	background: #373737;
	transition: all 0.4s;
	margin: 25px 0;
}
.content .content1 ul li a.download:hover {
	background: #0091b0;
	transition: all 0.4s;
}
.content .content1 ul li a.download div.downloadleft {
	background: url(../images/product01/downloadleft.png) no-repeat;
	width: 17px;
	height: 43px;
	float: left;
}
.content .content1 ul li a.download div.downloadright {
	background: url(../images/product01/downloadright.png) no-repeat;
	width: 17px;
	height: 43px;
	float: right;
}
.Productloceryl {
	background: url(../images/product01/page01/loceryl.png) no-repeat;
	width: 365px;
	height: 227px;
	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 0 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 {
	width: 40%;
	padding-top: 150px;
	float: left;
	font-size: 13px;
	margin-top: 50px;
	border-right: 1px solid #95b8bf;
	background: url(../images/product01/page01/02_Icon01_Step1%20File.png) no-repeat center top;
}
.content ul li div.step02 {
	width: 58%;
	float: left;
	font-size: 13px;
	margin-top: 50px;
}
.content ul li div.step03 {
	width: 58%;
	float: left;
	font-size: 13px;
	margin-top: 20px;
}
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;
}
.content ul li div.step02 div {
	background: url(../images/product01/page01/02_Icon02_Step2%20Wipe.png) no-repeat left top;
	width: 90%;
	margin: 0 auto;
	box-sizing: border-box;
	min-height: 150px;
	padding: 40px 0 60px 150px;
	border-bottom: 1px solid #95b8bf;
}
.content ul li div.step03 div {
	background: url(../images/product01/page01/02_Icon03_Step3%20Apply.png) no-repeat left top;
	width: 90%;
	margin: 0 auto;
	box-sizing: border-box;
	min-height: 150px;
	padding: 10px 0 0 150px;
}
/*警告及注意事項*/
.content3 {
	width: 980px;
	overflow: hidden;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}
div.notice {
	font-size: 20px;
	line-height: 40px;
	margin-bottom: 20px;
}
div.notice span {
	border-bottom: 2px solid #0091b0;
}
/*哪裡購買*/
h3.HowToBuy {
	background: url(../images/product01/page01/Buytitle.png) no-repeat;
	padding-left: 130px;
}
div.info ul.HowToBuy {
	width: 100%;
	overflow: hidden;
}
div.info ul.HowToBuy li {
	width: 30%;
	float: left;
	color: #252525;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif, "新細明體"
}
div.info ul.HowToBuy li.map {
	width: 68%;
	float: right;
}
div.info ul.HowToBuy li div.tips {
	border-bottom: 1px solid #d8d8d8;
	border-top: 1px solid #d8d8d8;
	padding: 15px 0;
}
.google_map {
	width: 100%;
	height: 560px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
#map_canvas {
	width: 100%;
	height: 100%;
}
div.select {
	margin: 15px 0;
	width: 100%;
	overflow: hidden;
}
div.select select {
	background: none;
	float: left;
	width: 58%;
	margin-right: 5px;
	border: 1px solid #999999;
	height: 35px;
	line-height: 35px;
	border-radius: 3px;
}
div.select select option {
	padding: 10px 0;
}
div.select a {
	background: #39acc5;
	float: left;
	width: 28%;
	padding: 9px 10px;
	text-decoration: none;
	color: #FFF;
	text-align: center;
	font-family: Arial;
	border-radius: 3px;
	transition: all 0.4s;
}
div.select a:hover {
	background: #283480;
	transition: all 0.4s;
}
div.info ul.HowToBuy div.pages {
	border-top: 1px solid #d8d8d8;
	padding-top: 10px;
	margin-top: 10px;
}
div.info ul.HowToBuy div.pages div {
	width: calc(50% - 39px);
	text-decoration: none;
	color: #333;
	float: right;
	display: inline-block;
	line-height: 24px;
	transition: all 0.4s;
	cursor: pointer;
}
div.info ul.HowToBuy div.pages div.pre {
	text-align: left;
	background: url(../images/pre.png) no-repeat left top;
	border-right: 1px solid #CCC;
	padding: 0 10px 0 27px;
}
div.info ul.HowToBuy div.pages div.next {
	text-align: right;
	background: url(../images/next.png) no-repeat right top;
	padding: 0 27px 0 10px;
}
div.info ul.HowToBuy div.pages div:hover {
	transition: all 0.4s;
	color: #39acc5;
}
/*關於灰指甲*/
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;
}
h3.curetitle{
	background: url(../images/product01/page01/curetitle.png) no-repeat;
	padding-left: 287px;
}
h3.curetitle {
    width: auto;
    text-align: left;
    margin-bottom: 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) {
.Productloceryl {
	margin-top: -100px;
}
}

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

@media screen and (max-width: 780px) {
.flexslider {
	margin-top: 80px;
	display: none;
}
.content ul li div.step01 {
	width: 100%;
	padding-top: 0;
	margin-top: 0;
}
.content ul li div.step01 {
	border-right: 0;
	background: url(../images/product01/page01/02_Icon01_Step1%20File.png) no-repeat left top;
	min-height: 150px;
	padding-left: 130px;
	box-sizing: border-box;
	margin-top: 20px;
	border-bottom: 1px solid #95b8bf;
}
.content ul li div.step02, .content ul li div.step03 {
	width: 100%;
	margin-top: 20px;
}
.content ul li div.step02 div, .content ul li div.step03 div {
	width: 100%;
}
.Productloceryl {
	display: none;
}
li.fiim {
	float: right;
}
}

@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/product01/page01_SM.png) no-repeat center;
}
div.itenLink div a.page02 {
	background: url(../images/product01/page02_SM.png) no-repeat center;
}
div.itenLink div a.page03 {
	background: url(../images/product01/page03_SM.png) no-repeat center;
}
div.itenLink div a.page04 {
	background: url(../images/product01/page04_SM.png) no-repeat center;
}
}

@media screen and (max-width: 700px) {
div.info ul.HowToBuy li {
	width: 100%;
}
div.info ul.HowToBuy li.map {
	width: 100%;
	margin-top: 50px;
}
.google_map {
	height: 300px;
}
}

@media screen and (max-width: 450px) {
.content h3 {
	background: none;
	padding: 10px 0;
}
.content ul li div.step01 {
	background: url(../images/product01/page01/02_Icon01_Step1%20File.png) no-repeat center top;
	padding: 150px 0 0 0;
}
.content ul li div.step02 div {
	background: url(../images/product01/page01/02_Icon02_Step2%20Wipe.png) no-repeat center top;
	padding: 150px 0 0 0;
}
.content ul li div.step03 div {
	background: url(../images/product01/page01/02_Icon03_Step3%20Apply.png) no-repeat center top;
	padding: 150px 0 0 0;
}
.content ul li div.step02 p {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.content ul li div.step03 p {
	width: 90%;
	margin: 0 auto;
}
}

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