/*公共样式*/
.more1 { background: linear-gradient(90deg,#ee0048,#8100bb); width: 183px; height: 35px; line-height: 35px; font-size: 14px; color: #fff; transition: all 0.8s ease; padding-left: 9px;}
.more1 span { padding-left: 69px; transition: all 0.8s ease;}
.more1:hover { width: 200px;}
.more1:hover span { padding-left: 86px;}


.title h1 { font-size: 35px; line-height: 29px; padding: 27px 0 15px;}
.title h2 { font-size:22px; line-height: 22px; margin-bottom: 37px; }
.title h2 span { display: block; width:94px; height: 5px; background: #000; margin-bottom: 11px; }

.content { overflow: hidden;}


/*关于欧芭莎*/
.about { background: url("../images/about_bg.jpg") no-repeat; background-size:cover; padding: 141px 0 162px;}
.about .img1 { margin: auto;}
.about .text { background: url("../images/about_img2.png") no-repeat; width: 555px; height: 555px; margin: auto; padding: 28px 50px 0; color: #fff; position: relative;}
.about .text a { color: #fff; transition: all 0.3s ease;}
.about .text a:hover { color: #d6d4d4;}
.about .text div { position: relative; z-index: 3;}
.about .text1 { margin: 29px 0 23px -227px; position: relative; z-index: 2;}
.about .img3 { position: absolute; top:-40px; left: -40px; animation: img3 30s ease-out infinite;}
@keyframes img3 {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
.about h2 { font-size: 24px; line-height: 24px; text-align: center;}
.about h2 span { display: block; width: 94px; height: 5px; background: #fff; margin:10px auto 0;}
.about h3 { font-size: 20px; line-height: 20px; letter-spacing: 4px; margin: 24px 0 4px;}
.about .more { margin-top:52px; transition: all 0.3s ease; }
.about .more img { margin: auto;}
.about .more:hover { transform: translate(3px,3px);}


/*品牌*/
.brand { background: url("../images/brand_bg.jpg") no-repeat left; background-size:cover; padding: 105px 0;}
.brand .text { width: 1043px; float: right; padding: 55px 0 57px 60px; height: 651px; position: relative; background:url('../images/brand_img3.gif') no-repeat 57px 315px #eeeeee;}
.brand #brand_L { position: absolute; top:348px; left:22px; z-index: 4; animation:brandL 1s ease-out infinite alternate;}
.brand #brand_R { position: absolute; top:348px; right:40px; z-index: 4; animation:brandR 1s ease-out infinite alternate;}
@keyframes brandL {
    0% { transform: translate(0,0);}
    100% { transform: translate(15px,0);}
}
@keyframes brandR {
    0% { transform: translate(0,0);}
    100% { transform: translate(-15px,0);}
}
.brand .text .left { width: 185px; margin-right: 60px; position: relative; height: 539px;}
.brand .text .box { width: 982px; overflow: hidden; position: relative; height: 539px;}
.brand .text ul { width: 2946px; position: absolute; left: 0;}
.brand .text ul li { float: left; overflow: hidden; z-index: 2;}

.brand .text p { transition: all 0.3s ease;}
.brand .text p:hover { color: #ee0048;}
.brand .text .right { overflow: hidden;}
.brand .text .right a { float: left; overflow: hidden;}
.brand .text .right a img { transition: all 0.5s ease;}
.brand .text .right a:hover img { transform:scale(1.1);}
.brand .text .right .img1 { margin-right: 10px;}
.brand .more1 { position: absolute; bottom:0; left:2px;}


/*产品系列*/
.product { background: url("../images/product_bg.jpg") no-repeat; background-size:cover; padding: 71px 0 131px; position: relative;}
.product .title h1 { padding: 11px 0;}
.product .bg_text { position: absolute; left:0; bottom:131px;}
.product .img_box { position: relative;}
.product .img_box .text1 { position: absolute; bottom:0;}
.product .left { margin-top: 88px;}
.product .left .text1 { left: 0;}
.product .left .text { width: 408px; height: 274px; padding: 45px 69px 0;}
.product .text:hover h2,.product .text:hover p { color: #ed0041;}
.product .left .more1 { width: 235px; margin-top: 40px;}
.product .text { background: #d8d8d8;}
.product .text h2 { font-size: 20px; line-height: 20px; margin-bottom: 10px;}

.product .right { width: 645px;}
.product .box1 { position: relative; margin-bottom: 115px;}
.product .box1 .img_box { float: left;}
.product .box1 .text { float: left; width: 112px; height: 451px; padding: 69px 0 0 30px;}
.product .box1 .text p,.product .box1 .text h2 { writing-mode: vertical-rl; float: left;}
.product .box1 .text h2 { margin-top: 77px;}
.product .box1 .more1 { width: 232px; position: absolute; bottom:87px; right:34px;}

.product .box2 { position: relative; margin-left: 33px;}
.product .box2 .text1 { right:0;}
.product .box2 .text { width: 197px; height: 349px; padding: 56px 37px 0; float: left; position: relative; z-index: 3;}
.product .box2 .more1 { width: 232px; position: absolute; bottom:87px; left:37px;}
.product .box2 .img_box { float: left;}

/*店面展示*/
.store img { width: 100%;}
.store ul { padding: 1px;}
.store ul li { float: left; width:calc(25% - 2px); margin: 1px; position: relative;}
.store ul li span { width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; background:rgba(0,0,0,0.7);}
.store ul li.on span { opacity: 0;}

/*八大服务*/
.serve { background: url("../images/serve_bg.jpg") no-repeat; background-size: cover; padding: 134px 0 271px; margin-bottom: -154px;}
.serve a:hover h3,.serve a:hover h4 { color: #474747;}
.serve h3 { font-weight: bold; font-size: 29px; line-height: 29px; margin: 15px 0 7px;}
.serve h4 { font-size: 22px; line-height: 22px;}
.serve .more1 { margin-top: 107px; width: 232px;}

/*智能护肤*/
.skin { background: #eeeeee; padding: 52px 62px 60px;}
.skin .img1 { margin: auto;}
.skin h2 { margin: 10px 0 64px; background: url("../images/skin_title_bg.jpg") no-repeat center; text-align: center; font-size: 12px; line-height: 33px;}
.skin ul li { float: left; width: 241px; height: 338px; position: relative; margin-right: 37px; margin-bottom: 40px; overflow: hidden;}
.skin ul li:nth-child(4n) { margin-right: 0;}
.skin ul li span { transition: all 0.3s ease; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; background: rgba(0,0,0,0.7); z-index: 3;}
.skin ul li .ico { position: absolute; top:338px; left: 95px; z-index: 2; opacity: 0; transition: all 0.3s ease;}
.skin ul li p { color: #fff; background: linear-gradient(90deg,#ee0048,#8100bb); font-size: 18px; text-align: center; line-height: 39px; position: relative; z-index: 2;}
.skin ul li .img { transition: all 0.3s ease;}
.skin ul li.on span { opacity: 0; width: 0; height: 0; left: 50%; top:50%; border-radius: 50%;}
.skin ul li.on .img { transform: scale(1.1);}
.skin ul li.on .ico { opacity: 1; animation:0.3s skinIco 0.4s ease forwards;}
@keyframes skinIco {
    0% { opacity: 0; top:338px;}
    50% { opacity: 1; top:100px;}
    100% { opacity: 1; top:134px;}
}

/*美肤定制*/
.customization { background: url("../images/product_bg.jpg") no-repeat; background-size: cover; padding: 60px 0 125px;}
.customization .title { text-align: center;}
.customization .title img,.customization .title span { margin:0 auto 11px;}
.customization .box { background: #fff; margin-top: 40px; padding: 10px; height: 461px; position: relative;}
.customization .box .over { overflow: hidden; position: relative; width:1179px; height: 439px;}
.customization .box ul { position: absolute; left: 0; top:0; width: 5895px;}
.customization .box ul li { overflow: hidden; float: left;}
.customization .box ul li .left { background: url("../images/customization_text_bg.jpg") no-repeat; width: 590px; height: 439px; padding: 14px 12px;}
.customization .box ul li .text { background: #fff; width: 566px; height: 410px; padding: 88px 0 0;}
.customization .box h3 { margin-bottom: 20px;}
.customization .box h3 img { margin: auto;}
.customization .box p { text-align: center;}
.customization .box a:hover p { color: #ed0041;}
.customization .more1 { margin:40px auto 0; width: 182px;}
.customization .more1 span { padding-left: 68px;}

.cus_arrow { position: absolute; bottom:58px; left: 58px; z-index: 10;}
.cus_arrow img { float: left;}
.cus_arrow #cusL { cursor: pointer;}
.cus_arrow #cusR { cursor: pointer;}
.cus_arrow .line { margin: 0 27px 0 30px;}

/*招商合作*/
.join { background: url("../images/join_bg.jpg") no-repeat right top; background-size:cover; padding: 90px 0 136px; color: #fff;}
.join .title span { background: #fff;}
.join a { color: #fff;}
.join a:hover h3,.join a:hover h4 { color: #c8c8c8;}
.join h3 { font-size: 29px; line-height: 29px; font-weight: bold; margin: 15px 0 8px;}
.join h4 { font-size: 17px; line-height: 17px;}
.join .more1 { width: 232px; margin-top: 74px;}

/*新闻中心*/
.news { padding: 37px 0 99px;}
.news .title { text-align: center;}
.news .title img { margin: auto;}
.news .title span { margin:0 auto 11px;}
.news ul { margin-top: 44px;}
.news ul li { background: #eeeeee; margin-bottom: 40px; transition: all 0.3s ease;}
.news ul li a { height: 140px; padding: 43px 45px 0 36px;}
.news ul li h3 span { display: block; font-size: 18px; line-height: 18px; color: #a2a2a2; margin-bottom: 13px; transition: all 0.3s ease;}
.news ul li h3 { font-size: 28px; line-height: 28px; border-right:#a2a2a2 solid 2px; float: left; width: 90px; transition: all 0.3s ease;}
.news ul li .center { float: left; margin-left: 17px; width: 900px;}
.news ul li p { color: #969595; transition: all 0.3s ease;}
.news ul li .ico { transition: all 0.3s ease; float: right; background: url("../images/news_ico1.png") no-repeat; width: 58px; height: 58px;}
.news ul li:hover { background: linear-gradient(90deg,#ee0048,#8100bb); }
.news ul li:hover h3 { color: #fff; border-right:#fff solid 2px;}
.news ul li:hover span { color: #fff;}
.news ul li:hover p { color: #fff;}
.news ul li:hover .ico { background: url("../images/news_ico2.png") no-repeat;}
.news .more1 { width: 232px; margin: auto;}