@charset "UTF-8";
/**
 * 
 * @authors wuchangjiang (qianduanwcj@126.com)
 * @date    2018-01-18-----------------
 * @version $Id$
 */


body,html{
	height: 100%;
	font-family: "Microsoft YaHei";
	overflow: hidden;
}
/*loading*/
.loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #d6eef8;}
.loading .hidding {
    width: 220px;
    height: 220px;
    position: absolute;
    top: 48%;
    left: 50%;    
    margin: -110px 0 0 -110px;
    background: #d6eef8;
    z-index: 99999;
}
.loading_quan1{ width: 205px; height: 205px; top: 50%; left: 50%; margin: -102.5px 0 0 -102.5px;
	-webkit-animation: rotating2 10s linear infinite;
	animation: rotating2 10s linear infinite;
}
.loading_quan2{ width: 205px; height: 205px; top: 50%; left: 50%; margin: -102.5px 0 0 -102.5px;
	-webkit-animation: rotating 10s linear infinite;
	animation: rotating 10s linear infinite;
}
.loading_line{
    width: 1px;
    background: #ced8e6;
    position: absolute;
    left: 50%;
    z-index: 97;
}
.loading p{width: 100%;position: absolute;top: 50%;left: 0;margin-top: -20px;text-align: center;color: #788695;font-size: 15px;}
.loading p span{ font-size:18px; display: block; line-height: 30px;}
/*loading End*/

/*pop*/
.mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,.7); display: none;}
.popBox { display: none; position: fixed; top: 50%; left: 50%; z-index: 10000; 
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.pop_v{}
.pop_v video{ width: 700px;}

.popBox2 .pop_close2{ width: 79px; height: 79px; background-position: -1px -531px; position: absolute; right: -46px; top: -52px;}

.popBox2{}
.popBox2 .cont{ width: 695px; height: 423px; background: url(../images/pop.png?v=20180124) left top no-repeat;}
.popBox2 .cont h3{ color: #796d51; font-size: 30px; line-height: 100px; text-align: center; padding-bottom: 15px; font-weight: normal;}
.popBox2 .cont .txt{ padding-top: 16px; padding: 0 10px 0 30px; height: 280px; overflow-y: scroll; width: 648px; font-size: 18px; color: #ae8439; text-align: center;}
.popBox2 .cont .txt p{ line-height: 26px; text-indent: 2em; text-align: left; margin-bottom: 5px;}
.popBox2 .cont .txt p.p1{ text-indent: 0;}
.popBox2 .cont .txt p a{ color: #5f7cc3;}
.popBox2 .cont .txt img{ padding-top: 8px;}
.popBox2 .cont .txt h4{ line-height: 34px; padding-bottom: 14px; text-align: center; font-weight: normal;}
.popBox2 .cont .txt::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
}
.popBox2 .cont .txt::-webkit-scrollbar-thumb {
    height: 8px;
    width: 100%;
    border-top: 0;
    border-bottom: 0;
    background-color: #ddc896;
    background-clip: padding-box;
}
/*pop End*/


.icon{background:url(../images/icon.png?v=20180124) no-repeat;}
.logo{ width:97px; height:121px; background-position:0 -25px; top: 18px; left: 145px; z-index: 2;}
.logo2{ width:136px; height:29px; background-position:-100px -25px; top: 90px; left: 267px; z-index: 2;}
.logo3{ width:134px; height:37px; background-position:-100px -62px; top: 86px; left: 429px; z-index: 2;}

.bg_video,
.bg_video video { 
	position: absolute;
	width: 1920px;
	height: 1080px;
	top: 50%;
	left: 50%;
	margin-top: -540px;
	margin-left: -960px;
}

/*nav*/
.nav { width: 122px; height: 100%; position: fixed; right: 22px; top: 0; z-index: 20;}
.nav .line{ position: absolute; right: 16px; top: 0; height: 100%; border: 1px dotted #9ecbe2;}
.nav .nav_cont{ position: absolute; z-index: 2; top: 160px;}
.nav .nav_cont a { height: 34px; width: 122px; background: url(../images/nav.png) 0 0 no-repeat; text-align: center; display: block; margin-bottom: 40px;}
.nav .nav_cont .nav1{ background-position: 0 0;}
.nav .nav_cont .nav2{ background-position: 0 -75px;}
.nav .nav_cont .nav3{ background-position: 0 -150px;}
.nav .nav_cont .nav4{ background-position: 0 -225px;}
.nav .nav_cont a.active{ background-position-x: -122px;}
.nav .nav_cont a:hover{ background-position-x: -122px;}
/*End nav*/

.downlaod_box{position: absolute; right: 42px; top: 432px; z-index: 21;}
.downlaod_box p{ }
.downlaod_box p span{ display: block; text-align: center; font-size: 14px; color: #e4f5fb; line-height: 26px; background: rgba(107,117,138,.6);}
.downlaod_box p img{width: 121px;height: 121px; display: block;}
.downlaod_box ul{ }
.downlaod_box ul li{ }
.downlaod_box ul li a{ display: block; width: 123px; height: 36px; text-indent: -999em; }
.downlaod_box ul li.ios a{background-position: 0 -269px;}
.downlaod_box ul li.ios a:hover{ background-position: -123px -269px;}
.downlaod_box ul li.and{margin-top: 4px;}
.downlaod_box ul li.and a{ background-position: 0 -306px;}
.downlaod_box ul li.and a:hover{ background-position: -123px -306px;}


.control{ z-index: 21; top: 44px; right: 76px;}
.control a{ width: 60px; height: 25px; line-height: 25px; top: 0; display: block; float: left; position: relative; left: 20px;}
.control a span{ color: #808da7; font-size: 14px; top: 0; left: 25px; opacity: 0; position: absolute;}
.control a i{height:25px; width:32px; background-position:0 0; top: 0; left: 10px; display: block;}
.control a:nth-child(1) i{ background-position: 0 0;}
.control a:nth-child(2) i{ background-position: -32px 0;}
.control a:nth-child(3) i{ background-position: -64px 0;}
.control a.pause i{ background-position: -128px 0;}
.control a:nth-child(4) i{ background-position: -96px 0;}

.control a,
.control a span,
.control a i{
	-webkit-transition: all .5s;
	transition: all .5s;
}

.control a:hover{ width: 70px;}
.control a:hover span{ opacity: 1; left: 35px;}

.jiathis_style{ margin-left: -180px; cursor: default;}
.jiathis_style a{cursor: default;}


.swiper-container,
.swiper-slide{ width: 100%; height: 100%;}
.swiper-slide .center { width: 1400px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -700px; z-index: 10;}

.one{ background: url(../images/bg1.jpg?v=20180201) 50% 0 no-repeat;}
.one .slogan{ position: absolute; left: 426px; top: 76px;}
	
.btn_video{ width: 112px;height: 109px;position: absolute; top: 318px; left: 793px;}
.btn_video i{ width: 112px; height: 109px; background: url(../images/p1/btn_video_icon.png) 0 0 no-repeat; position: absolute; top: 0; left: 0;}
.btn_video em{ width: 72px; height: 72px; background: url(../images/p1/btn_video.png) 0 0 no-repeat; position: absolute; top: 50%; left: 50%; display: block;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
@-webkit-keyframes rotating {
	from {-webkit-transform: rotate(0deg)}
	to {-webkit-transform: rotate(360deg)}
}
@keyframes rotating {
	from {transform: rotate(0deg)}
	to {transform: rotate(360deg)}
}
@-webkit-keyframes rotating2 {
	from {-webkit-transform: rotate(360deg)}
	to {-webkit-transform: rotate(0deg)}
}
@keyframes rotating2 {
	from {transform: rotate(360deg)}
	to {transform: rotate(0deg)}
}
.three{ background: url(../images/bg3.jpg) 50% 0 no-repeat;}
.three .bgs{ background: url(../images/p3/bgs.png) left top no-repeat; width: 1000px; height: 628px; position: absolute; left: 150px; top: 85px;}
.three .swiper-container{width: 870px;height: 462px;position: absolute;top: 157px;margin-left: 122px;}
.three .swiper-container img{ width: 100%; height: 100%;}
.three .foot{width: 80px;height: 107px;background: url(../images/p3/foot.png) left top no-repeat;position: absolute;left: 178px;top: 157px;z-index: 2;}
.three .vid_list{ position: absolute; left: 262px; top: 722px;}
.three .vid_list ul{}
.three .vid_list ul li{ float: left; width: 142px; height: 86px; box-shadow: 0 0 5px #626a6f; background: #ffffff; margin-right: 6px; text-align: center; line-height: 86px; position: relative;}
.three .vid_list ul li img{ width: 130px; height: 72px; vertical-align: middle;}
.three .vid_list ul li i{ position: absolute; left: 0; top: 0; width: 130px; height: 72px; background: rgba(0,0,0,.6); left: 50%; top: 50%; 
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.three .vid_list ul li i em{ width: 49px; height: 49px; display: block; position: absolute; background-position: -67px -147px; left: 50%; top: 50%; 
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

.three .swiper-button-prev{ width: 48px; height: 92px; background-position: -607px 0; left: 200px; margin-top: -70px;}
.three .swiper-button-next{ width: 48px; height: 92px; background-position: -538px 0; right: 185px; margin-top: -70px;}

.two{ background: url(../images/bg2.jpg) 50% 0 no-repeat;}
.two .mask_two{ background: url(../images/p2/bg2_mask.png) center center no-repeat; height: 100%; position: absolute; z-index: 3; top: 0; width: 1920px; opacity: .8;}
.two .n{ background: url(../images/p2/n.png?v=20180123) 0 0 no-repeat; width: 984px; height: 745px; position: absolute; left: 780px; bottom: 0px; z-index: 2; display: none;}
.two .n.active{
	animation: n 1s ease both;
}
.two .n.active2{
	animation: n2 1s ease both;
}
.two .v{ background: url(../images/p2/v.png?v=20180123) 0 0 no-repeat; width: 728px; height: 672px; position: absolute; left: 791px; bottom: 0px; z-index: 1; display: none;}
.two .v.active{
	animation: v 1s ease both;
}
.two .v.active2{
	animation: v2 1s ease both;
}
/**/
.tabs{ position: absolute; right: 118px; top: 210px;}
.tabs ul{ }
.tabs ul li{ width: 50px; height: 150px; background-position: -246px -156px; position: relative;}
.tabs ul li a{color: #6d7e84;font-size: 20px;padding: 27px 12px 0;display: block;text-align:  center;line-height: 24px;height: 100%;box-sizing:  border-box;}
.tabs ul li.active{ background-position: -246px 0;}
.tabs ul li:hover :after{ content: ''; position: absolute; background: url(../images/icon.png?v=20180124) -123px -489px no-repeat; width: 38px; height: 139px; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

.conts{}
.conts .conts_com{ display: none;}
.conts .conts_com.active{ display: block;}
/*end*/

.two .conts .conts_com ul{ position: absolute; left: 244px; top: 172px;}
.two .conts .conts_com ul li{ text-align: center; margin-bottom: 40px; position: absolute;}
.two .conts .conts_com ul li img{}
.two .conts .conts_com ul li p{ color: #596976; font-size: 14px; line-height: 30px;}
.two .conts .conts_com ul li:nth-child(2){ top: 252px;}
.two .conts .conts_com ul li:nth-child(3){ top: 100px; left: 184px;}
.two .conts .conts_com ul li:nth-child(4){ top: 352px; left: 184px;}
.two .conts .conts_com ul li a:hover{}
.two .conts .conts_com ul li a:hover :after{ content: ''; width: 124px; height: 122px; background: url(../images/icon.png?v=20180124) 0 -342px no-repeat; position: absolute; left: 0; top:0;}

.four{ background: url(../images/bg4.jpg) 50% 0 no-repeat;}
.four .tabs{ top: 148px;}
.four .conts{}
.four .conts .conts_com{}
.four .conts .conts_com img{}
.four .conts .conts_com p{ width: 272px; color: #5b5b5b; line-height: 26px;}
.four .conts .conts_com1{}
.four .conts .conts_com1 img{ position: absolute; left: 124px; top: 180px;}
.four .conts .conts_com1 p{ position: absolute; left: 858px; top: 230px; font-size: 16px;}
.four .conts .conts_com1 p span{ color: #4eb1d2;}
.four .conts .conts_com2{}
.four .conts .conts_com2 ul{ position: absolute; left: 215px; top: 171px; width: 998px;}
.four .conts .conts_com2 ul li{ width: 450px; height: 96px; position: relative; border: 6px solid #a98107; float: left; margin-right: 74px; margin-bottom: 80px;}
.four .conts .conts_com2 ul li:nth-child(even){ margin: 0;}
.four .conts .conts_com2 ul li i{ width: 110px; height: 163px; position: absolute; left: -68px; top: -68px;}
.four .conts .conts_com2 ul li i.i1{ background-position: -296px 0;}
.four .conts .conts_com2 ul li i.i2{ background-position: -406px 0;}
.four .conts .conts_com2 ul li i.i3{ background-position: -296px -163px;}
.four .conts .conts_com2 ul li i.i4{ background-position: -406px -163px;}
.four .conts .conts_com2 ul li i.i5{ background-position: -296px -326px;}
.four .conts .conts_com2 ul li i.i6{ background-position: -406px -326px;}
.four .conts .conts_com2 ul li i.i7{ background-position: -296px -489px;}
.four .conts .conts_com2 ul li i.i8{ background-position: -406px -489px;}
.four .conts .conts_com2 ul li h3{ line-height: 42px; padding-top: 9px; margin-left: 53px; border-bottom: 1px solid #bbcdd4; width: 340px; font-size: 24px; color: #ba8e47; font-weight: normal;}
.four .conts .conts_com2 ul li p{ font-size: 14px; color: #8f8f8f; line-height: 34px; padding-left: 54px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 246px;}
.four .conts .conts_com2 ul li a{ width: 109px; height: 34px; line-height: 34px; text-align: center; color: #755b1c; font-size: 16px; background-position: 0 -489px; position: absolute; right: 15px; top: 34px;}

/* 五行男友力 */
.one .ny{ display: none;}
.one .mn{ width: 438px; height: 505px; bottom: 0; left: 15px;}
.one .sn{ width: 588px; height: 490px; bottom: 0; right: 155px;}