@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(//fonts.googleapis.com/css?family=Amiri);

/* header  */
header {position: absolute;padding: 10px 0;}
.wrap section {}

/* projectBox */
#projectBox {background: url(/images/44/img-headerBg2.jpg) no-repeat 0 0 #fae0e1;display: none;}
#projectBox ul { overflow: hidden; margin: 0 auto; width: 1160px; }
#projectBox ul li { float: left; width: 143px; border-left: 1px #e7cece solid; border-right: 1px #e7cece solid; }
#projectBox ul li .item { margin: 15px auto; width: 167px; background: url(/images/44/icon-nail0.png) no-repeat 0 center; display: block; color: #6e6161;margin: 0;padding: 10px 0;width: auto;background-position: 50% 10px;}
#projectBox ul li:nth-child(2) .item { background-image: url(/images/44/icon-hair.png); }
#projectBox ul li:nth-child(3) .item { background-image: url(/images/44/icon-nail.png); }
#projectBox ul li:nth-child(4) .item { background-image: url(/images/44/icon-nail1.png); } 
#projectBox ul li:nth-child(5) .item { background-image: url(/images/44/icon-service.png); }
#projectBox ul li:nth-child(6) .item { background-image: url(/images/44/icon-exclusive.png); }
#projectBox ul li:nth-child(7) .item { background-image: url(/images/44/icon-eyelashes.png); }
#projectBox ul li:nth-child(8) .item { background-image: url(/images/44/icon-bride.png); }
#projectBox ul li .item h3 { margin-left: 50px; height: 26px; font-size: 18px; line-height: 22px; font-weight: 500;padding-top: 54px;margin-left: 0;text-align: center; }
#projectBox ul li .item h3 b { margin-left: 10px; font-size: 13px; }
#projectBox ul li .item p { margin-left: 50px; color: #6e6161; font-size: 12px; }
#projectBox ul li:hover .item h3 , #projectBox ul li:hover .item p { margin-left: 15px; }

#iSeo{
    padding: 10px 0;
    background: #b4b4b4;
    color: #2e2e2e;
	transition: none;
	font-size:10pt;
}
#iSeo div{
	transition: none;
}
#iSeo section{
	background:none;
	transition: none;
	
}
#footermaq{
	position: absolute;
	bottom: -30px;
}
/* aboutBox */
#articleInfo3 ul li {
	overflow: hidden;
	color: #333;
	position:relative;
}
#articleInfo3 ul li .bgset{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:1;
}
#articleInfo3 ul li .bgset img{
	width:100%;
	height:100%;
	object-fit: cover;		
}
#articleInfo3 .tit {
	margin: auto;
	margin-bottom: 0;
	transition: all 0.4s ease-in-out 0s;
	text-align: center;
	margin-bottom: 20px;
}


#articleInfo3 .tit i ,
#articleInfo3 .tit h2 {
	display: inline-block;
	font-size: 30px;
}

#articleInfo3 .tit i {
	margin-right: 10px;
	font-size: 40px;
	vertical-align: inherit;
}

#articleInfo3 article {
	margin: auto;
	font-size: 16px;
	line-height: 170%;
	padding: 20px 0 0;
}
#articleInfo3 article p{
    margin: 0px;
    font-size: 16px;
    line-height: 170%;
    text-align: center;
}
#articleInfo3 .btn {
    width: 100%;
    margin-top: 24px;
}

#articleInfo3 .btn li {
    float: left;
    width: 50%;
}
#articleInfo3 .btn li a {
    display: block;
    font-size: 16px;
    color: #777777;
    width: 88%;
    text-align: center;
    height: 34px;
    line-height: 34px;
    border: 2px solid #eaeaea;
    border-radius: 25px;
    font-weight: 700;
}

#articleInfo3 .btn li a:hover {
    background-color: #5d5d5d;
    color: #fff;
}
#articleInfo3{
	margin: 60px 130px 0;
}

#articleInfo3 ul li:first-child .info {
	padding: 20px 2%;
	width: 46%;
	background: rgba(255,255,255,0.7);
	position: relative;
    z-index: 2;
}

#articleInfo3 ul li:first-child .info  .tit {
	margin-top: 0;
}



#articleInfo3 ul li:first-child .info  .tit i {
	font-size: 70px;
}

#articleInfo3 ul li:first-child .info h2 {
	font-size: 48px;
	line-height: 45px;
}

#articleInfo3 ul li:first-child .info h2 b {
	font-size: 30px;
	display: block;
}

#articleInfo3 ul li:first-child .info .info article {
	margin: 30px 10px 0 90px;
}

#articleInfo3 ul li .leftBox {
	overflow: hidden;
	float: left;
	/* width: 50%; */
}
#articleInfo3 ul li .rightBox {
	overflow: hidden;
	float: left;
	width: 45%;
	padding: 103px 40px;
	background-color: #fbfbfb;
}

#articleInfo3 ul li .leftBox {
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInLeft;
}

#articleInfo3 ul li .rightBox {
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
}

#articleInfo3 ul li .photoBox {
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#articleInfo3 ul li .photoBox img {
	transition: all 1.6s ease-in-out 0s;
	transform:scale(1,1);
	background-position: 50% 50%;
}

#articleInfo3 ul li:hover .photoBox img {
	transform: scale(1.2);
}

/* otherBox */
#otherBox , #popMember ul , #smallPicture , #productBox ul {overflow: hidden;margin-top: 40px;}
#otherBox > div { float: left; width: 50%; }
#otherBox .leftBox .list { overflow: hidden; position: relative; margin: 10px 0; margin-right: 2%; float: left; width: 48%; }
#otherBox .leftBox .list .info { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); top: -100%; left: 0; color: #fff; }
#otherBox .leftBox .list:hover .info { top: 0; }
#otherBox .leftBox .list .info article { margin-top: 35%; text-align: center; }
#otherBox .leftBox .list .info article p { text-align: center; }
#otherBox .leftBox .list .info article p a { margin-top: 15px; padding: 5px 25px; border: 1px #fff solid; display: inline-block; color: #fff; }
#otherBox .leftBox .news {background: rgb(122,186,214,0.9);background: -moz-linear-gradient(left, #d14a77 0%, #7099b4 100%);background: -webkit-linear-gradient(left, #d14a77 0%,#7099b4 100%);background: linear-gradient(to right, #d14a77 0%,#7099b4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d14a77', endColorstr='#7099b4',GradientType=1 );}
#otherBox .leftBox .news a{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}
#otherBox .leftBox .news h3 , #otherBox .leftBox .news h4 { text-align: center; font-size: 20px; color: #fff; }
#otherBox .leftBox .news h3 { margin: 60px 0 5px; font-size: 25px; font-family: 'Amiri', serif; font-weight: normal; }
#otherBox .leftBox .news h4 span { vertical-align: top; font-weight: 500; }
#otherBox .leftBox .news .bd { margin: 10px auto 20px; width: 70%; }
#otherBox .leftBox .news .bd ul li p { text-align: center; color: #fff; }
#otherBox .leftBox .news .bd ul li p.text-clamp { height: 50px; -webkit-line-clamp: 2; }
#otherBox .leftBox .news .bd ul li p a { color: #fff; }

/* popMember */
#popMember { position: relative; margin-bottom: 70px; }
#popMember h3 , #smallPicture .tit h3 , #productBox .tit h3 {font-size: 28px;color: #424141;font-weight: normal;text-align: center;}
#popMember h3 b , #smallPicture .tit h3 b , #productBox .tit h3 b { font-weight: bold; }
#popMember a.prev , #popMember a.next { position: absolute; top: 35%; font-size: 40px; color: #c9c9c9; }
#popMember a.prev { left: 50px; }
#popMember a.next { right: 50px; }
#popMember .bd { margin: 0 auto; width: 70%; }
#popMember ul li , #smallPicture > div { float: left; width: 50%; }
#popMember ul li .popPhoto , #popMember ul li p { margin: 0 10px; }
#popMember ul li p { height: 24px; text-align: center; -webkit-line-clamp: 1; }
#popMember ul li p a { color: #7e7d7d; }

/* smallPicture */
#smallPicture .tit { margin-right: 5%; width: 35%; }
#smallPicture .tit h3 { margin-top: 90%; margin-bottom: 0; text-align: right; }
#smallPicture .tit article { margin-left: auto; margin-right: 0; width: 100px; text-align: right; }
#smallPicture .bd { width: 60%; }

/* productBox */
#productBox, #news { margin: 70px 0 0; }
#productBox .tit h3 , #news .tit h3{color: #3b3221;text-align: center;margin-top: 22px;margin-bottom: 12px;font-weight: 500;font-size: 36px;}
#productBox .tit p, #news .tit p {text-align: center;margin-top: 21px;font-size: 19pt;color: #212121;font-family: 'Teko', sans-serif;}
#productBox ul li {margin: 30px 1% 15px;float: left;width: 23%;-webkit-animation-name: flipInX;-moz-animation-name: flipInX;-ms-animation-name: flipInX;-o-animation-name: flipInX;animation-name: flipInX;box-shadow: -1px 1px 19px rgba(0,0,0,0.2);background-color: #fff;}
#productBox ul li .productPhoto a {position: relative;margin: 6px;}
#productBox ul li .productPhoto a:after {position: absolute;margin: 0% 0%;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.31);display: block;top: 0;left: 0;content: "";-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;opacity: 0;}
#productBox ul li h4 {height: 29px;font-size: 16px;text-align: center;-webkit-line-clamp: 1;margin-bottom: 28px;}
#productBox ul li a.more {
    background: #9598a2;
    padding: 1px 10px;
    text-align: center;
    display: block;
    width: 191px;
    height: 40px;
    border-radius: 54px;
    font-size: 15px;
    line-height: 40px;
    color: #fff;
    margin: 21px auto 20px auto;
    width: 80%;
}
#productBox ul li h4 a {color: #474444;font-size: 16pt;font-weight: bold;font-family: "Noto Sans TC", sans-serif;letter-spacing: 1px;}
#productBox ul li p {color: #7e7e7e;text-align: center;font-size: 13pt;height: 23px;margin-top: 18px;margin-bottom: 10px;}
#productBox ul li p.price { font-size: 18px; font-weight: bold; color: #d04b77; }
#productBox ul li:hover .productPhoto a:after { opacity: 1; } 

/* perfectBox */
#perfectBox { margin: 20px 0; }

/* joingBox */
#joingBox { position: relative; color: #fff; }
#joingBox p { margin: 10px 0; font-size: 16px; text-align: center; display: none; }
#joingBox p:first-child { font-size: 20px; }
#joingBox p a { margin-top: 25px; padding: 7px 25px; display: inline-block; border: 1px #fff solid; border-radius: 20px; font-size: 14px; color: #fff; }


/* service */
#service{
	background-image:url(/images/32/index-service-bg.jpg);
	background-position:50% 50%;
	background-attachment:fixed;
	padding: 130px 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, #service {
		background-attachment:initial;
    }
}

#service h2{
	text-align:center;
	color: #1e1e1e;
	font-size:35px;
	font-weight:normal;
	line-height: 160%;
}
#service h2 span{
	display: none;
	margin: 0 auto 25px;
	text-align: center;
}
#service article{
	text-align:center;
	color: #1e1e1e;
	font-size:18px;
	margin: 40px 0 30px;
	line-height:200%;
}

#service a.more{
	background: #ffffff36;
	padding: 1px 10px;
	text-align: center;
	display: block;
	width: 191px;
	height: 40px;
	border-radius: 54px;
	line-height: 40px;
	color: #1e1e1e;
	margin: auto;
	width: 20%;
}

@media screen and (max-width: 1366px){
	#articleInfo3 {
    margin: 60px 30px 0;
}
}


@media screen and (max-width: 1280px) {
	#projectBox ul { width: 960px; }
	#projectBox ul li { width: 235px; }
	#otherBox .leftBox .news h3 { margin-top: 40px; }
	#popMember { margin-bottom: 50px; }
}
@media screen and (max-width: 1024px) {
	#articleInfo3 ul li:first-child .info {
		width: 50%;
	}
	#articleInfo3 article {
		margin: 20px 10px 0 20px;
	}
#articleInfo3 {
    display: none;
}
}
@media screen and (max-width: 980px) {
	#service h2{
		font-size: 30px;		
	}
	#service article{
		font-size: 16px;
		margin: 30px 0 0;		
	}
#productBox ul li {
    width: 32%;
}
}
@media screen and (max-width: 768px) {
	#projectBox ul { width: 102%; }
	#projectBox ul li { width: 25%; border-left: 0; border-right: 0; }
	#projectBox ul li .item { margin: 0; padding: 10px 0; width: auto; background-position: 50% 10px; border-left: 1px #e7cece solid; border-right: 1px #e7cece solid; }
	#projectBox ul li .item h3 { padding-top: 54px; margin-left: 0; text-align: center; }
	#projectBox ul li:hover .item h3 { margin-left: 0; }
	#projectBox ul li .item p { display: none; }
	#otherBox > div { margin: 15px 0; width: 100%; }
	#articleInfo3 ul li {
		padding-bottom: 15px;
		border-bottom: 1px #ccc solid;
	}
	#articleInfo3 ul li:first-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
	#articleInfo3 ul li:first-child .info {
		width: 70%;
	}
	#articleInfo3 ul li .wow {
		width: 100%;
	}
	#articleInfo3 ul li:nth-child(3) {
		background-position: right 50%;
	}
	#articleInfo3 ul li:nth-child(5) {
		background-position: right bottom;
	}
	#articleInfo3 ul li:nth-child(2) .leftBox ,
	#articleInfo3 ul li:nth-child(3) .rightBox ,
	#articleInfo3 ul li:nth-child(4) .leftBox ,
	#articleInfo3 ul li:nth-child(5) .rightBox {
		display:none;
	}
}
@media screen and (max-width: 640px) {
	#aboutBox > div { width: 100%; }
	#aboutBox .aboutPhoto { display: none; }
	#productBox ul li { width: 48%; }
	#articleInfo3 ul li:first-child .info {
		width: 80%;
	}
}
@media screen and (max-width: 480px) {
	#perfectBox { display: none; }
	#joingBox { padding: 60px 0; background: url(/images/sub_banner023.jpg) no-repeat 50%; }
	#joingBox p { display: block; }
	#gotop {/* position: absolute; *//* width: 100%; *//* bottom: 0; */}
	#articleInfo3 ul li:first-child .info {
		width: 100%;
	}
#productBox ul li {
    width: 92%;
    margin: 30px 4% 15px;
}

}
@media screen and (max-width: 450px) {
	#projectBox ul li .item h3 { font-size: 16px; text-align: center; }
	#projectBox ul li .item h3 b , #popMember a.prev , #popMember a.next , #smallPicture .tit h3 i { display: none; }
	#otherBox .leftBox .list { margin-right: 0; width: 100%; }
	#popMember .bd { width: 100%; }
	#smallPicture .tit , #smallPicture .bd { float: none; width: 100%; }
	#smallPicture .tit h3 { margin-top: 0; text-align: center; }
	#smallPicture .tit article { width: 100%; text-align: center; }
	#otherBox .leftBox .list{
		width: 80%;
		margin-left: 10%;		
	}
	header{padding:0;}
	#projectBox ul li:last-child .item h3 { font-size: 12px;}
	#articleInfo3 ul li:first-child {
		background-size: cover;
	}
	#articleInfo3 ul li:first-child .info .tit i {
		font-size: 50px;
	}
	#articleInfo3 ul li:first-child .info .tit {
		margin: 0;
	}
	#articleInfo3 ul li:first-child .info h2 {
		font-size: 30px;
		line-height: 30px;
	}
	#articleInfo3 ul li:first-child .info h2 b {
		font-size: 25px;
	}
	#articleInfo3 ul li:nth-child(2) ,
	#articleInfo3 ul li:nth-child(3) ,
	#articleInfo3 ul li:nth-child(4) ,
	#articleInfo3 ul li:nth-child(5) {
		background: none;
	}
}