@charset "utf-8";

/* CSS Document */



body {
	background-image: url(../images/bg.jpg);

}

.wrapper {

	width: 95%;

	max-width: 1200px;

	margin: 0 auto;

}
a:hover{
	text-decoration:none;
}

a:active{
	text-decoration:none;
}

a:focus {

  color: #23527c;

	text-decoration:none;

}

img {

	width: 100%;

	height: auto;

}

/*  LOGO選單 */

.header {

}

.logo {

	width: 20%;

	float: left;

}

.menu {

	width: 80%;

	float: left;

}

.menu ul {

	width: 93%;

}

.menu ul li {

	width: 25%;

	float: left;

	list-style: none;

	transition:all .3s;

}

.menu ul li .m1 {

	width: 100%;

	height: 0;

	padding-bottom: 55.14%;

	background-image: url(../images/menu_01.png);

	background-size: cover;

	display: block;

	text-indent: -9999px;

	transition:all .3s;

}

.menu ul li .m1:hover {

	background-image: url(../images/menu_01-1.png);

	padding-bottom: 55.14%;}

.menu ul li .m2 {

	width: 100%;

	height: 0;

	padding-bottom: 55.14%;

	background-image: url(../images/menu_02.png);

	background-size: cover;

	display: block;

	text-indent: -9999px;

	transition:all .3s;

}

.menu ul li .m2:hover {

	background-image: url(../images/menu_02-1.png);

	padding-bottom: 55.14%;	

}

.menu ul li .m3 {

	width: 100%;

	height: 0;

	padding-bottom: 55.14%;

	background-image: url(../images/menu_03.png);

	background-size: cover;

	display: block;

	text-indent: -9999px;

	transition:all .3s;

}

.menu ul li .m3:hover {

	background-image: url(../images/menu_03-1.png);

	padding-bottom: 55.14%;

}

.menu ul li .m4 {

	width: 100%;

	height: 0;

	padding-bottom: 55.14%;

	background-image: url(../images/menu_04.png);

	background-size: cover;

	display: block;

	text-indent: -9999px;

	transition:all .3s;

}

.menu ul li .m4:hover {

	background-image: url(../images/menu_04-1.png);

	padding-bottom: 55.14%;

}

.kv{
	display: block;
}


.kv_mobile{
	display:none;
}

/*  KV下區塊 */

.kv_down {

	width: 100%;

	overflow:hidden;

}

.kv_down h5 {

	color: #07978f;	

	font-size: 1.25em;

	padding: 0.6em 0;

	line-height:1.5;

	font-weight:bold;

}

.kv_down p {

	color: #d84586;

	font-size: 1em;

	padding: 0.6em;

	display: block;

	border: #d84586 1px solid;

	margin-top: 1em;

	font-weight: bold;

}

.kv_down .kv_down_l {

	padding-top: 2em;

	padding-right:2em;

}

.kv_down .kv_down_r {

}

/*  漫畫 */



.pic {

	padding:1em 0 0 0;	

	overflow:hidden;

}

.pic .pic_select_out {

	padding:0 0.8em;

}

.pic .pic_select {

	display: block;

	border: solid 2px #07978f;

	border-radius: 10px;

	background: rgba(255,255,255,1);

	padding:0.8em;

}



.pic .pic_select img{

	margin:0 auto;



}



.pic h5 {

	color: #07978f;	font-size: 1.4em;

padding: 0.6em 0;

	text-align: center;

}

input[type=checkbox].css-checkbox {

	position: absolute;

	z-index: -1000;

	left: -1000px;

	overflow: hidden;

	clip: rect(0 0 0 0);

	height: 1px;

	width: 1px;

	margin: -1px;

	padding: 0;

	border: 0;

}

input[type=checkbox].css-checkbox + label.css-label {

	padding-left: 29px;

	height: 24px;

	display: inline-block;

	line-height: 24px;

	background-repeat: no-repeat;

	background-position: 0 0;


	vertical-align: middle;

	cursor: pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label {

	background-position: 0 -24px;

}

label.css-label {

	background-image:url(../images/csscheckbox.png);

	-webkit-touch-callout: none;

	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

}



 .send{

	 margin-top:1em;

	border-radius: 5px;

	background: #07978f;

	color:#FFF;

	font-size:1.2em;

	line-height:2.2;

	text-align:center;

	font-weight:bold;

	transition:all .3s;

	text-decoration:none;

}

 .send{

	 margin-top:1em;

	border-radius: 5px;

	background: #07978f;

	color:#FFF;

	font-size:1.2em;

	line-height:2.2;

	text-align:center;

	font-weight:bold;

	transition:all .3s;

	text-decoration:none;

}
 .send:hover{

	background: #45bdb1;

	color:#FFF;

	font-size:1.3em;

	text-decoration:none;

}



.top{

	width:32px;

	background: #d84586;

	color:rgba(255,255,255,1);

	font-size:0.8em;

	line-height:1.6;

	text-align:center;

	font-weight:bold;

	margin:0 auto;

	margin-top:4em;

	margin-bottom:1.2em;

}



.pink_title h4{

	text-shadow: 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 		0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586;

	color: #FFF;

	font-size: 2em;

	text-align:center;

	line-height:1.3;

	width:60%;

	float:left;

}

.pink_title_line{

	width:20%;

	border-bottom:#d84586 solid 5px;

	float:left;

	padding-top:2.2em;

}

/*  醫生 */

.doctor {

	padding:0em 0 0 0;	

	overflow:hidden;

}

.doctor h5 {

	color: #07978f;

	font-size: 1.4em;

	padding: 0.6em;

}

.doctor p {

	color: #333;

	font-size: 1em;

	padding: 0.6em;

	display: block;

	margin-top: 1em;

}

.doctor .doctor_l {

}

.doctor .doctor_r {

	padding-top:3em;

}





/*  4步驟 */

.step {

	padding:2em 0 0 0;	

	width: 100%;

	overflow:hidden;

}
.step_process{
	display: block;
	margin-top:2em;

}

.step_process1,.step_process2,.step_process3,.step_process4{
	display:none;
	margin-top:1em;

}


.step .step_product_out {

	padding:0 0.8em;

}





.step .step_product {

	display: block;

	border: solid 2px #07978f;

	border-radius: 10px;

	background: rgba(255,255,255,1);

	padding:0.8em;

}

.step .step_product:nth-child(4) {

}

.step h5 {

	color: #07978f;	

	font-size: 1.5em;

	line-height:1.3;

	padding: 0.6em 0;

	text-align: center;

	min-height:130px;

}

.step p{

	margin-top:2em;

	min-height:150px;





}

.pink_text{

	color:#d84586;

	font-weight:bold;



}

.step .more {

	color: #07978f;

	text-align: center;

	margin-top:1em;

}



.step h3 {

	color: #FFF;

    background-color: #e48f13;	font-size: 1.4em;

padding: 0.3em 0;

    text-align: center;

    border-radius: 30px;

    width: 80%;

    margin: 1.5em auto 0 auto;

}







/*  部落客 */

.blog {

	width: 100%;

	overflow:hidden;

	padding:3em 0 3em 0;	

}



.blog p{

	color: #333;

	font-size: 1em;

	padding: 1em 0;

}







.blog .blog_pic{

	float: left;

	width: 28.8%;

	margin: 1em 2em 1em 0;

	padding: 1em;

	display: block;

}

.blog .blog_pic:nth-child(3) {

	margin: 1em 0em 1em 0;

}





/*  【4步驟零時差保養超值組】 */

.sale4_out {

	

	width: 100%;

	margin: 0 auto;

	overflow:hidden;

	background-color:#f9f2f3;

}



.sale4 {

	padding:2em 0;	

	width: 95%;

	max-width: 1200px;

	margin: 0 auto;

	overflow:hidden;

}

.sale4 h4 {

	text-shadow: 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 		0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586;

	color: #FFF;

	font-size: 2em;

	line-height:1.3;

}

.sale4 h5 {

	color: #07978f;	
	font-size: 1.4em;

}

.sale4 h3 {

	color: #dd317c;

	font-size: 2.2em;

}



.sale4 p {

	color: #333;

	font-size: 1em;

	display: block;

	margin-top: 1em;

}

.sale4 .sale4_l {

}

.sale4 .sale4_r {

}







/* Sweep To Right */





.hvr-sweep-to-right {

	color:#d84586;

	border:solid 1px #d84586;

	background:rgba(255,255,255,1);

	padding:0em .5em;

  display: inline-block;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;

  position: relative;

  -webkit-transition-property: color;

  transition-property: color;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.hvr-sweep-to-right:before {

  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #d84586;

  -webkit-transform: scaleX(0);

  transform: scaleX(0);

  -webkit-transform-origin: 0 50%;

  transform-origin: 0 50%;

  -webkit-transition-property: transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-timing-function: ease-out;

  transition-timing-function: ease-out;

}

.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {

	text-decoration:none;

  color: white;

}

.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {

  -webkit-transform: scaleX(1);

  transform: scaleX(1);

}





/*  更多pH5.5零時差產品推薦組合 */

.buy_out {

	width: 100%;

	margin: 0 auto;

	overflow:hidden;

	background-color:#e9a4c6;

}



.buy {

	padding:2em 0;	

	width: 95%;

	max-width: 1200px;

	margin: 0 auto;

	overflow:hidden;

}

.buy_l{



}	



.buy_r{

	margin-top:7em;

}



.buy .logo {

}

.buy .pinkline{

	padding-bottom:1em;

	border-bottom:solid  #d84586 2px; 

}

.buy .store{

	padding-top:1.5em;

}

.buy h4 {

	color: #333;

	font-size: 2.2em;

}

.buy h5 {

	color: #FFF;

	font-size: 1.8em;

}

.buy h3 {

	color: #dd317c;

	font-size: 2em;

}











@media (max-width: 767px) {
	.kv{
	display: none;
}


.kv_mobile{
	display: block;
}



	.kv_down .kv_down_l {

    padding-top: 2em;

    padding-right: 0em;

}



.pic .pic_select {

	margin-bottom:1em;

}

.step .step_product {

	margin-bottom:1em;



}

.step h3 {

	font-size:1em;

    width: 70%;

	padding:0.8em;

	margin-top:0em;

}



.sale4 .sale4_l{

	margin-bottom:2em;

}





.buy_r {

    margin-top: 2em;

}




.kv_down h5 {
    color: #07978f;
    font-size: 1.1em;
    padding: 0.6em 0;
    line-height: 1.5;
    font-weight: bold;
}

.pic h5 {
    color: #07978f;
    font-size: 1.1em;
    padding: 0.6em 0;
    text-align: center;
}

.pink_title h4{

	text-shadow: 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 		0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586;

	color: #FFF;

	font-size: 1.1em;

	text-align:center;

	line-height:1.3;

	width:60%;

	float:left;

}


.doctor h5 {
    color: #07978f;
    font-size: 1.1em;
    padding: 0.6em;
}

.step h5 {
    color: #07978f;
    font-size: 1.1em;
    line-height: 1.3;
    padding: 0.6em 0;
    text-align: center;
    min-height: 130px;
}

.sale4 h4 {
    text-shadow: 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586, 0px 0px 5px #d84586;
    color: #FFF;
    font-size: 1.4em;
    line-height: 1.3;
}


.sale4 h3 {
    color: #dd317c;
    font-size: 1.4em;
}

.buy h4 {
    color: #333;
    font-size: 1.4em;
}


.buy h5 {
    color: #FFF;
    font-size: 1.1em;
}

.doctor {
    padding: 2em 0 0 0;
    overflow: hidden;
}

.doctor .doctor_r {
    padding-top: 1.5em;
}

.doctor p {
    color: #333;
    font-size: 1em;
    padding: 0.6em;
    display: block;
    margin-top: 0em;
}

.step h5 {
    color: #07978f;
    font-size: 1.1em;
    line-height: 1.3;
    padding: 0.6em 0;
    text-align: center;
    min-height: auto;
}

.step p {
    margin-top: 0em;
    min-height: auto;
}

.step .more {
    color: #07978f;
    text-align: center;
    margin-top:0.4em;
}

.step_process{
	display:none;
	margin-top:2em;

}

.step_process1,.step_process2,.step_process3,.step_process4{
	display: block;
	margin-top:1em;
	text-align:center;

}

.step_process1 img,.step_process2 img,.step_process3 img,.step_process4 img{
	width:40%;

}


}





/*  產品彈出視窗 */

.product_area{

	position:relative;

	width:90%;

	margin:0 auto;

	overflow:hidden;

	border: solid #59a69e 10px;

	padding:3em 1em 1em 1em;

	background:rgba(255,255,255,1);

}



.product_area ul{

   list-style: square;

	padding-top:1em;

	margin-left:1em;

}



.product_area h3{

	color: #07978f;

	font-size: 1.6em;

	border-bottom: solid 1px #07978f;

	padding:0.5em 0;

}





/*  個資 */

.data{

	position:relative;

	width:90%;

	margin:0 auto;

	overflow:hidden;

	border: solid #59a69e 10px;

	padding:3em 1em 1em 1em;

	background:rgba(255,255,255,1);

}





.data h3{

	color: #07978f;

	font-size: 1.6em;

	padding:0.5em 0;

	margin:0 auto;

	text-align:center;

}



/*  表單 */

.form{

	position:relative;

	width:90%;

	margin:0 auto;

	overflow:hidden;

	border: solid #59a69e 10px;

	padding:3em 1em 1em 1em;

	background:rgba(255,255,255,1);

}



.form ol{

   list-style: decimal;

	padding-top:1em;

	margin-left:1em;

}





.form h3{

	color: #07978f;

	font-size: 1.6em;

	padding:0.5em 0;

	margin:0 auto;

	text-align:center;

}



.xx{

	position:absolute;

	top:5px;

	right:5px;

}