/* index */
section.about_us { box-shadow:2px 2px 4px #e3e3e3,-2px 4px 4px #e3e3e3;width:82%;margin:3vw auto;padding:10px 0 30px;border-radius:15px;}
.section.about_us .tt01 {display: block;     line-height: 1.6;}
.spec {font-family:"Acta W01 Book",Georgia,serif}
.in_abtbt {font-family:'Georgia';text-align:center;font-size:28px;text-transform:uppercase}
.in_abtbt span {font-family:Arial;font-size:16px;padding-top:10px;display:block}
.in_abtnr {text-align:center;font-size:14px;line-height:22px}
.in_abtnr a {color:#353535;font-family:Arial}
.in_abtnr a:hover {color:#b28850}
.in_abtbt a {color:#000;font-family:'Arial';font-weight:bold}


.how_to {width:78%;margin:0 auto;}
.how_to > div {}
.how_to .back {padding:0;background:url('../image/how_to_back.jpg') no-repeat center center;background-size:103%;height:inherit;border-radius:15px;}
.how_to .support_you {height:inherit;margin:0;border-radius:15px;background:hsla(30,1%,41%,0.88);color:#fff;padding:10px 25px;text-transform:uppercase;position:relative;}
.how_to .support_you p:first-of-type {padding:10px 25px;font-family:black;font-weight:bold;font-size:15px;}
.how_to .support_you p:last-of-type {line-height:2vw;}
.how_to .playfff {width:6vw;height:6vw;position:absolute;bottom:10vh;left:5vh;background:url(../image/play_fff.png) no-repeat center center;background-size:100%;}
.how_to .extensions {padding-left:20px;}
.how_to .extensions > div {height:30%;margin-top:3.3%;width:100%;display:flex;align-items:center;justify-content:center; border-bottom: 1px solid #eee;}
.how_to .extensions > div:hover {background:#8a796c;cursor:pointer;}
.how_to .extensions > div:hover > div:nth-child(2) > span:first-of-type {color:#fff;}
.how_to .extensions > div:hover > div:nth-child(2) > span:last-of-type {color:rgba(255,255,255,0.60)}
.how_to .extensions > div:hover > div:last-of-type > div {z-index:10;}
.how_to .extensions div > div:first-of-type {width:33%;height:7.5vw;}
.how_to .extensions div > div:nth-child(2) {width:42%;}
.how_to .extensions div > div {display:inline;width:40%;float:left;height:7.5vw;}


.support_you .icon-play {color:#fff;font-size:5rem;}
.extensions > div > div:first-of-type {background-size:100% !important;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.extensions .hairextensions > div:first-of-type {background-size:106% !important;}
.extensions > div > div:last-of-type {font-size:4rem;display:flex;justify-content:center;align-items:center;font-family:black;font-weight:bold;color:hsla(28,11%,58%,0.20);width:25%;position:relative;}
.extensions div > div:nth-child(2) > span:first-of-type {display:block;padding:3px 7px;color:#8a796c;font-weight:bold;font-size:14px;}
.extensions div > div:nth-child(2) > span:last-of-type {color:rgba(138,121,108,0.60);display:block;padding:0 7px;font-size:11px;line-height:15px;text-transform:uppercase;}
.extensions div > div:last-of-type > div {position:absolute;height:15px !important;width:15px !important;bottom:1vh;right:1vh;background:#60544b;display:flex;align-items:center;z-index:-1;}
.extensions div > div:last-of-type > div > p {width:7px;height:7px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);}


.index_eye {width:78%;margin:0 auto;margin-top:20px !important;}
.index_eye .eye {padding-left:0;height:16vw;}
.index_eye .eye > div {float:left;height:inherit;}
.index_eye .eye > div:first-of-type {background-size:80%;background-repeat: no-repeat;}
.index_eye .eye > div:last-of-type {position:relative;}
.index_eye .eye > div:last-of-type > span {display:block;text-transform:uppercase;color:rgba(138,121,108,0.90);padding:0 10px;margin-top:8px;}
.index_eye .eye > div:last-of-type > span:first-of-type {color:#8a796c;font-weight:bold;font-size:14px;}
.index_eye .eye > div:last-of-type > span:nth-child(2) {font-size:13px;line-height:18px;}
.index_eye .eye > div:last-of-type > span:last-of-type {font-size:11px;line-height:18px;}
.index_eye .eye > div:last-of-type > span:last-of-type > b {font-weight:bold;}
.index_eye .eye > div:last-of-type > div {height:35px;position:absolute;bottom:3px;width:100%;font-size:3rem;font-family:black;font-weight:bold;color:hsla(28,11%,58%,0.20);line-height:35px;}
.index_eye .eye > div:last-of-type > div > div {position:absolute;height:15px !important;width:15px !important;bottom:1vh;right:1vh;background:#60544b;display:flex;align-items:center;z-index:-1;}
.index_eye .eye > div:last-of-type > div > div > p {width:7px;height:7px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);}
.eye_view_more {z-index:1;font-size:10px;color:#fff;position:absolute;right:2vw;bottom:1vh;height:14px;line-height:14px;}
.index_eye .eye:hover > div:last-of-type {background:#8a796c;cursor:pointer;}
.index_eye .eye:hover > div:last-of-type > span {color:rgba(255,255,255,0.60)}
.index_eye .eye:hover > div:last-of-type > span:first-of-type {color:#fff;}
.index_eye .eye:hover > div:last-of-type > div > div {z-index:1;}
.index_eye .eye:hover .eye_view_more {z-index:1;}
.index_eye > div:last-of-type > a {overflow:hidden;border-radius:15px;display:block;height:100%;background-size:115%;position:relative;}
.index_eye > div:last-of-type > span:hover {cursor:pointer;}
.index_eye .playfff {width:6vw;height:6vw;position:absolute;bottom:2vh;left:2vh;background:url(../image/play_000.png) no-repeat center center;background-size:100%;}

/* old
.index_know {height:480px; background-size:100%;color:#fff;position:relative;margin-top:40px;}
.index_know > p {display:block;text-transform:uppercase;font-size:2rem;padding:10vh;margin:0 auto;font-weight:bold;z-index:1;}
.index_know .mask {position:absolute;background:rgba(170,151,136,0.47);top:0;left:0;right:0;bottom:0;}
.index_know .container {margin:-16px auto 0 auto;position:relative;}
.poster-item {background:#f1f1f1;height:310px;width:280px;border-radius:10px;transition:all 0.5s;cursor:default;-moz-transition:all 0.5s;cursor:default;-webkit-transition:all 0.5s;cursor:default;-o-transition:all 0.5s;cursor:default;}
.turn_3d {text-align:center;color:#fff;font-weight:400;font-size:36px;padding:28px 0;}
.for_btn {position:relative;height:214px;overflow:hidden}
.in_page {position:absolute;left:50%;top:50%;width:40px;height:40px;margin-left:-20px;margin-top:-20px;}
.in_page>img {width:40px;height:40px;}
.check_more {width:180px;height:50px;line-height:50px;text-align:center;color:#fff;background:#bc241d;margin:0 auto;display:block;}
*/

.index_know {background-size:100%;color:#fff;position:relative;margin-top:40px; display: flex; justify-content: center; align-items: center;}
.index_know .img-responsive {z-index: 1; position: relative;}
.index_know > p {display:block;text-transform:uppercase;font-size:2rem;padding:10vh;margin:0 auto;font-weight:bold;z-index:100; position: absolute; }
.index_know .mask {position:absolute;background:rgba(170,151,136,0.47);top:0;left:0;right:0;bottom:0; z-index:10;}
.index_know .container {margin:-16px auto 0 auto;position:relative;}
.poster-item {background:#f1f1f1;height:310px;width:280px;border-radius:10px;transition:all 0.5s;cursor:default;-moz-transition:all 0.5s;cursor:default;-webkit-transition:all 0.5s;cursor:default;-o-transition:all 0.5s;cursor:default;}
.turn_3d {text-align:center;color:#fff;font-weight:400;font-size:36px;padding:28px 0;}
.for_btn {position:relative;height:214px;overflow:hidden}
.in_page {position:absolute;left:50%;top:50%;width:40px;height:40px;margin-left:-20px;margin-top:-20px;}
.in_page>img {width:40px;height:40px;}
.check_more {width:180px;height:50px;line-height:50px;text-align:center;color:#fff;background:#bc241d;margin:0 auto;display:block;}

    
    
#prev,#next {font-family:'宋体';font-size:3rem;width:50px;height:50px;display:block;line-height:50px;text-align:center;background:rgba(255,255,255,0.60);position:absolute;top:6%;}
#prev:hover,#next:hover {cursor:pointer;}
#next {right:0; margin-top:0;}

.poster-item > div:first-of-type {height:50%;border-radius:10px;background:#8a796c;display:flex;align-items:center;justify-content:center;font-size:28px;font-family:Arial;font-weight:bold;position:relative;}
.poster-item > div:first-of-type > a {position:absolute;display:block;width:40px;height:40px;bottom:15px;left:15px; /*background:url(../image/play_fff.png) no-repeat center center;*/background-size:100%; }
.poster-item > div:last-of-type {height:50%;background:transparent;position:relative;border-radius:0 0 10px 10px;}
.poster-item > div:last-of-type:hover {background:linear-gradient(transparent,#888888);}
.poster-item > div:last-of-type:hover > a {display:flex;}
.poster-item > div:last-of-type > p {color:#525252;padding:10px;line-height:18px;font-family:black;}
.poster-item > div:last-of-type > a {display:flex;height:30px;text-transform:uppercase;border:1.5px solid #fff;border-radius:15px;position:absolute;bottom:8px;justify-content:center;width:50%;left:25%;line-height:30px;color:inherit;font-size:15px;display:none;}
.product_info_video {z-index:999;/* margin-top:20px !important;*/}
.extensions div > div:last-of-type > a:last-of-type,.index_eye .eye > div:last-of-type > div > a:last-of-type {position:absolute;height:15px !important;width:15px !important;bottom:1vh;right:1vh;background:#60544b;display:flex;align-items:center;z-index:-1;}
.how_to .extensions > div:hover > div:last-of-type > a:last-of-type {z-index:10;}
.extensions div > div:last-of-type > a > p,.index_eye .eye > div:last-of-type > div > a:last-of-type > p {width:7px;height:7px; margin-bottom: 0; border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);}
.index_eye .eye:hover > div:last-of-type > div > a:last-of-type {z-index:1;}



/* wap */
@media (max-width:768px) {

html, body {width: 100%; height: 100%; }
body {max-width: 640px;}
.wapbox {margin: 0 auto; background-color: #525252; vertical-align: baseline; overflow-y: scroll; font-family: Arial; max-width: 640px; overflow-x: hidden;}


.nuli{ width:120px; height:80px; position:absolute; top:0; z-index:10;right: 0;.l_san}
.at_no2 .nuli{ width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0);}
.support{margin: 1vh 0.5vh;border-radius: 10px;background: url(../image/support_back.jpg) no-repeat center center;height: 54vw;background-size: 100%;position: relative;color: #fff;text-transform: uppercase;}
.support span,.know span{background: url(../image/play_fff.png) no-repeat center center;background-size: 100%;bottom: 2vh;left: 2vh;width: 6vh;height: 6vh;display: block;position: absolute;}
.support p:first-of-type,.know p:first-of-type{text-align: center;font-size: 1.5rem;font-weight: bold;padding: 5vh 0 0 0;line-height: 1.5;}
.support p:last-of-type,.know p:last-of-type{padding: 2vh 9vh 0 9vh;line-height: 1.2;font-size: 0.8rem;}
.know p:last-of-type{font-size: 0.8rem;padding: 2vh 7vh 0 10vh;line-height: 1.5;}
.know{margin: 1vh 0.5vh;border-radius: 10px;background: url(../image/eye_back.jpg) no-repeat center center;height: 54vw;background-size: 100%;position: relative;color: #fff;text-transform: uppercase;}


/* extensions */
.extensions{height: 15rem;margin: 1vh 0 0 0;background: #8a796c;}
.extensions > div{width: 33%;height: inherit;float: left;}
.extensions > div:first-of-type{border-radius: 50%;overflow: hidden;background: url('../image/extension_back1.png') no-repeat center center;background-size: 90%;}
.extensions > div:nth-child(2){width: 41%;}
.extensions > div:last-of-type{font-size: 10rem;display: flex;justify-content: center;align-items: center;font-family: 'Arial';font-weight: bold;color: hsla(28, 11%, 58%, 0.20);width: 11%;position: relative; }
.extensions > div:last-of-type > a{position: absolute;height: 30px !important;width: 30px !important;bottom: 1vh;right: 1vh;background: #60544b;display: flex;align-items: center;}
.extensions > div:last-of-type > a > p{width: 15px;height: 15px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(135deg);margin-left: 6px;margin-top: -6px; margin-bottom: 0;}
.extensions > div:nth-child(2) > p{padding: 20px 20px 0 20px;}
.extensions > div:nth-child(2) > p:first-of-type{color: #fff;font-size: 1.5rem;line-height: 1.2; padding-top:1.2rem; font-weight: bold;}
.extensions > div:nth-child(2) > p:last-of-type{color: rgba(255, 255, 255, 0.60);text-transform: uppercase;font-size: 1rem;line-height: 1.2;}
/* hair pieces */
.hairpieces{height: 15rem;margin: 1vh 0 0 0;border-top: 2px solid #8a796c;border-bottom: 2px solid #8a796c;background: linear-gradient(to right,#f8f9fb 30%,#fff 30%,#fff 100%);position: relative;}
.hairpieces > div:first-of-type{width: 50%;height: 99%;border-right: 2px solid #8a796c;transform: skew(-30deg);background-color: #f8f9fb;}
.hairpieces > div:last-of-type > p:first-of-type{position: absolute;top: 1.5rem;left: 21%;font-size: 1.4rem;font-weight: bold;color: #8a796c;z-index: 1;}
.hairpieces > div:last-of-type > p:nth-child(2){position: absolute;top: 1vh;left: 1vh; margin:0 auto; background-size: 100%;width: 18vh;height: 15vh;display: block;}
.hairpieces > div:last-of-type > p:nth-child(3){font-size: 10rem;font-family: arial;font-weight: bold;color: hsla(28, 11%, 58%, 0.20);position: absolute;bottom: 5vh;right: 0vh;z-index: 1; margin: 0;}
  /*
.hairpieces > div:last-of-type > p:nth-child(4){position: absolute;top: -1vh;right: 1vh;background: url(../images/pie2.png) no-repeat center center;background-size: 100%;width: 19vh;height: 17vh;display: block;}*/
.hairpieces > div:last-of-type > p:nth-child(5),
.hairpieces > div:last-of-type > p:last-of-type{position: absolute;color: rgba(138, 121, 108, 0.60);text-transform: uppercase;font-size: 1rem; margin: 0;}
.hairpieces > div:last-of-type > p:nth-child(5){top: 64%;left: 49%;}
.hairpieces > div:last-of-type > p:last-of-type{bottom: 1vh;left: 46%;}
/* wigs */
.wigs{height: 15rem;margin: 1vh 0 0 0;background: #8a796c;}
.wigs > div{width: 33%;height: inherit;float: left;}
.wigs > div:first-of-type{border-radius: 50%;overflow: hidden;background: url(../image/wigs_back.jpg) no-repeat center center;background-size: 100%;width: 30%;margin-left: 10px;height: 31vw;margin-top: 2.5vw;}
.wigs > div:nth-child(2){width: 44%;}
.wigs > div:last-of-type{font-size: 10rem;display: flex;justify-content: center;align-items: center;font-family: 'Arial';font-weight: bold;color: hsla(28, 11%, 58%, 0.20);width: 11%;position: relative; }
.wigs > div:last-of-type > a{position: absolute;height: 30px !important;width: 30px !important;bottom: 1vh;right: 1vh;background: #60544b;display: flex;align-items: center;}
.wigs > div:last-of-type > a > p{width: 15px;height: 15px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(136deg);margin-left: 6px;margin-top: -6px; margin-bottom: 0;}
.wigs > div:nth-child(2) > p{padding: 20px 20px 0 20px;}
.wigs > div:nth-child(2) > p:first-of-type{color: #fff;font-size: 1.8rem;line-height: 1.2;font-weight: bold; margin-top: 10px;}
.wigs > div:nth-child(2) > p:last-of-type{color: rgba(255, 255, 255, 0.60);text-transform: uppercase;font-size: 0.8rem;line-height: 1.5; margin-top: 0px;}
div#wigs{height: 20vw;padding: 0;}
div#wigs > p{border-bottom: 1.5px solid #8a796c; margin-top: 0; height: 10vw;position: relative;line-height: 10vw;text-align: center;color: #8a796c;font-size: 20px; margin-bottom: 0;}
div#wigs > p > a{width: 10px;height: 10px;border-top: 1px solid #8a796c;border-left: 1px solid #8a796c;position: absolute;top: 50%;right: 30%;transform: rotate(135deg);}
/* eye */
.eye{height: 36vw;border: 2px solid #8a796c;border-radius: 15px;margin: 10px auto 0 auto;width: 95%;position: relative;}
.eye > div{width: 36%;height: inherit;transform: skew(154deg);border-left: 2px solid #8a796c;border-right: 2px solid #8a796c;margin-left: 30%;}
.eye > p{position: absolute; margin-bottom: 0; margin-top: 0;}
.eye > p:first-of-type{top: 0.3vw;background: url('../image/eye11.jpg') no-repeat center center;background-size: 100%;width: 18vw;height: 35vw;left: 1vw;}
.eye > p:nth-child(2){background: url(../image/eye22.png) no-repeat center center;background-size: 100%;width: 57vw;height: 35vw;left: 20%;}
.eye > p:last-of-type{background: url(../image/eye33.png) no-repeat center center;background-size: 100%;width: 20vw;height: 32vw;right: 3%;}
.eye_word{height: 10vw;}
.eye_word > p{width: 30%;float: left;margin: 1%;height: inherit;display: flex;align-items: center;justify-content: center;font-size: 1rem;text-transform: uppercase;text-align: center;line-height: 1.2;}
.back2{background: url('../image/product-img3.jpg') no-repeat center center;background-size: 100%;height: 34vw;margin-top: 1.5vw;}
/*exhibition*/
.exhibitions{margin: 3vw auto 0 auto;width: 96%;height: 90vw;border-radius: 15px;background: #f1f1f1;}
.exhibitions > div:first-of-type{height: 54vw;border-radius: 15px;background: url('../image/exhibition_back.png') no-repeat center center;background-size: 100%;position: relative;display: flex;align-items: center;justify-content: center;}
.exhibitions > div:first-of-type > p:first-of-type{position: absolute;background: url('../image/play_fff.png') no-repeat center center;background-size: 100%;width: 25vw;height: 25vw;}
.exhibitions > div:first-of-type > p:last-of-type{position: absolute;bottom: 5vw;color: #fff;font-size: 3rem;font-weight: bold;}
.exhibitions > p{padding: 5vw;font-size: 1rem;line-height: 1.2;color: #525252;}

.swipe { overflow: hidden; visibility: hidden; position: relative;z-index: 1;}
.swipe-wrap {overflow: hidden; position: relative;z-index: 1;}

.slid figure { float: left; width: 100%; position: relative;z-index: 1;}
.slid { max-width: 650px;/* 设置最大的宽度 */ margin: 0px auto 1em; /* 居中对齐 */}
figure { margin: 0;/* 对齐，四周宽度都为0，在轮播的时候，以整张图片进行移动 */}

.shejiao{ padding:1rem;overflow: hidden; text-align:center;}
  .shejiao a {display:inline-block; padding:0 0.5rem;}
  .shejiao a i {font-size:2.5rem;}
  /*
.shejiao a{ width:87px; height:72px; display:block; float:left; margin-left:25px; margin-right:25px;}
.shejiao a:nth-child(1){ background:url(../images/whatsapp.png) left top no-repeat;}
.shejiao a:nth-child(2){ background:url(../images/share2.png) left top no-repeat;}
.shejiao a:nth-child(3){ background:url(../images/share3.png) left top no-repeat;}
.shejiao a:nth-child(4){ background:url(../images/share4.png) left top no-repeat;}
*/

.four-category{height:150px;background:#fff;color:#000;margin-top:-2px}
.four-category-inner{border-top:4px solid#fff;width:90%;margin:0 auto}
.four-category .four-category-inner table{color:#000;width:100%;margin:20px auto;font-size:35px}
.four-category .four-category-inner table tr{height:50px}
.four-category-inner td {font-size:1rem;}
.exhibitions > div:first-of-type > p:last-of-type {margin-top: 0;margin-bottom: 0;}


}


@media (min-width:769px) and (max-width:992px;){

}


@media (min-width:1200px) {

}