.xcx_banner { background: url(../images/miniprogram/banner.png) center top no-repeat; height: 727px; position: relative;}
.xcx_banner .w1200 { padding-top: 326px;}
.xcx_banner .btn { display: block; width: 160px; height: 46px; line-height: 46px; text-align: center; font-size: 18px; background: #ffbc4e; background: linear-gradient(#ffbc4e,#feae41); border-radius: 23px; box-shadow: 0 10px 10px rgba(0,20,70,0.06); color: #fff; font-weight: bold; margin-top: 40px; }
.xcx_banner .btn:hover { box-shadow: 0 10px 10px rgba(0,20,70,0.15); color: #fff; -moz-transform:translateY(-5px);-webkit-transform:translateY(-5px);transform:translateY(-5px); }


.xcx_tit {}
.xcx_tit b{ display: block; text-align: center; font-weight: normal; font-size: 32px; color: #212121; line-height: 50px;}
.xcx_tit span{ display: block; text-align: center; font-weight: normal; font-size: 18px; color: #888888; line-height: 36px;}

.xcx_main1 { background: #f6f6f6; padding: 90px 0;}
.xcx_main1 .xcx_tit { margin-bottom: 60px;}
.xcx_list1 { margin: 0 -45px; height: 360px;}
.xcx_list1 .item { float: left; width: 215px; position: relative; height: 360px; transition:all 300ms ease;}
.xcx_list1 .item .img {}
.xcx_list1 .item .img img{ display: block; margin: 0 auto;}
.xcx_list1 .item .tit { font-size: 18px; color: #333333; text-align: center; line-height: 18px; font-weight: bold; transition:all 300ms ease;}
.xcx_list1 .item .con { font-size: 14px; color: #999999; text-align: center; line-height: 24px; position: relative; padding-top: 50px; transition:all 300ms ease;}
.xcx_list1 .item .con:before { display: block; content: ''; position: absolute; left: 50%; top: 24px; width: 40px; height: 2px; margin-left: -20px; background: #dcddde; transition:all 300ms ease;}
.xcx_list1 .item:hover { border-radius: 10px; background: #fff;}
.xcx_list1 .item:hover .tit{ color: #5086ff;}
.xcx_list1 .item:hover .con{ color: #5086ff;}
.xcx_list1 .item:hover .con:before{ background: #5086ff;}


.xcx_main2 { background: #ffffff; padding: 40px 0;}
.xcx_list2 {}
.xcx_list2 .item { height: 500px; position: relative;}
.xcx_list2 .item .img{ position: absolute; right: 106px; top: 50%; margin-top: -190px;}
.xcx_list2 .item .img img{ display: block;}
.xcx_list2 .item .con { position: absolute; left: 55px; top: 50%; margin-top: -80px;}
.xcx_list2 .item .con .t img{ display: block;}
.xcx_list2 .item .con .m{ font-size: 28px; color: #999999; height: 114px; padding: 20px 0; line-height: 54px;}
.xcx_list2 .item .con .line { width: 164px; height: 4px; background: #ff215c;}

.xcx_main3 { background: url(../images/miniprogram/img2.jpg) center top no-repeat; height: 700px;}


.xcx_main4 { background: #ffffff; padding: 110px 0 80px 0;}
.xcx_main4 .xcx_tit { margin-bottom: 30px;}

.xcx_list3 {}
.xcx_list3 .item { height: 320px; position: relative;}
.xcx_list3 .item .img{ position: absolute; top: 50%; margin-top: -133px;}
.xcx_list3 .item .img img{ display: block;}
.xcx_list3 .item .con { position: absolute; top: 50%; margin-top: -65px;}
.xcx_list3 .item .con .t { height: 44px;}
.xcx_list3 .item .con .t img{ display: block;}
.xcx_list3 .item .con .m{ font-size: 16px; color: #666666; width: 450px; line-height: 28px;}
.xcx_list3 .item .con .line { width: 120px; height: 4px; background: #ff215c; margin-bottom: 32px;}

.xcx_list3 .item_r .img { right: 130px;}
.xcx_list3 .item_l .img { left: 110px;}
.xcx_list3 .item_r .con { left: 110px;}
.xcx_list3 .item_l .con { right: 130px;}


.xcx_main5 { background: url(../images/miniprogram/bg1.jpg) center center no-repeat #dc0842; padding: 110px 0 0 0; height: 800px;}
.xcx_main5 .xcx_tit { margin-bottom: 78px;}
.xcx_main5 .xcx_tit b { color: #fff;}

.xcx_list4 { position: relative; height: 440px; margin: 0 -60px;}
.xcx_list4 .swiper-container { width: 1134px; margin: 0 auto; height: 440px; }
.xcx_list4 .swiper-slide { display: block; width: 366px; padding-top: 28px; transition:all 300ms ease; }
.xcx_list4 .swiper-slide .item{ background: rgba(255,255,255,0.8); margin: 0 auto; width: 314px; border-radius: 10px; height: 380px; padding: 43px 45px 0 45px; transition:all 300ms ease; }
.xcx_list4 .swiper-slide .item .img img{ display: block; margin: 0 auto; }
.xcx_list4 .swiper-slide .item .tit{ font-size: 20px; color: #e64083; text-align: center; font-weight: bold; line-height: 76px; transition:all 300ms ease;}
.xcx_list4 .swiper-slide .item .con{ font-size: 16px; color: #ec79a1; line-height: 30px; height: 90px; overflow: hidden; }
.xcx_list4 .swiper-slide-active { width: 402px; padding-top: 0; }
.xcx_list4 .swiper-slide-active .item{ background: rgba(255,255,255,1); width: 350px; height: 440px; padding: 43px 63px 0 63px; }
.xcx_list4 .swiper-slide-active .item .tit{ color: #333333; }
.xcx_list4 .swiper-slide-active .item .con{ color: #666666; height: 210px; line-height: 26px; }

.xcx_list4 .swiper-button-prev ,.xcx_list4 .swiper-button-next{ position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; background: url(../images/miniprogram/banbtn.png) no-repeat;}
.xcx_list4 .swiper-button-prev { left: 0px; background-position: 0 0;}
.xcx_list4 .swiper-button-next { right: 0px; background-position: 0 -60px;}
.xcx_list4 .swiper-button-prev:hover { background-position: -60px 0;}
.xcx_list4 .swiper-button-next:hover { background-position: -60px -60px;}


.xcx_main6 { background: #ffffff; padding: 98px 0 64px 0;}
.xcx_main6 .xcx_tit { margin-bottom: 65px;}

.xcx_list5 { width: 1020px; margin: 0 auto; height: 570px;}
.xcx_list5 .item { float: left; width: 50%; background: url(../images/miniprogram/linebg.png) center 466px no-repeat; }
.xcx_list5 .item .con{ margin: 0 auto; position: relative; width: 243px; padding: 10px; background: #f0f0f0; border-radius: 10px; transition:all 300ms ease;}
.xcx_list5 .item .img img{ display: block; width: 223px; height: 446px; border-radius: 6px;}
.xcx_list5 .item .erwei { opacity: 0; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; border-radius: 6px; background: rgba(255,255,255,0.9); padding-top: 130px; text-align: center; font-size: 16px; line-height: 36px; color: #ff215c; transition:all 300ms ease;}
.xcx_list5 .item .erwei img { display: block; margin: 0 auto; border-radius: 50%; width: 157px;}
.xcx_list5 .item .tit { text-align: center; font-size: 18px; line-height: 94px; color: #333333;}
.xcx_list5 .item:hover .con { }
.xcx_list5 .item:hover .con .erwei{ opacity: 1; }


.xcx_main7 { background: url(../images/miniprogram/bg2.jpg) center top no-repeat #ffffff; padding: 110px 0 145px 0;}
.xcx_main7 .xcx_tit { margin-bottom: 62px;}
.xcx_main7 .xcx_tit b { color: #fff;}
.xcx_main7 .xcx_tit span { color: #fff;}

.xcx_list6 { background: #fff; border-radius: 10px; box-shadow: 0 45px 103px rgba(0,0,0,0.11); padding: 48px 0;}
.xcx_list6 .item { height: 292px; position: relative;}
.xcx_list6 .item .img{ position: absolute; top: 50%; margin-top: -130px;}
.xcx_list6 .item .img img{ display: block;}
.xcx_list6 .item .con { position: absolute; top: 50%; margin-top: -54px;}
.xcx_list6 .item .con .t { height: 60px;}
.xcx_list6 .item .con .t img{ display: block;}
.xcx_list6 .item .con .m{ font-size: 18px; color: #888888; line-height: 68px;}
.xcx_list6 .item .con .line { width: 120px; height: 4px; background: #ff215c; }

.xcx_list6 .item_r .img { right: 180px;}
.xcx_list6 .item_l .img { left: 160px;}
.xcx_list6 .item_r .con { left: 186px;}
.xcx_list6 .item_l .con { right: 150px;}


.xcx_main8 { background: #ffffff; padding: 0 0 0 0;}
.xcx_main8 .xcx_tit { margin-bottom: 60px;}

.xcx_list7 { height: 145px; padding: 0 19px;}
.xcx_list7 ul li{ float: left; width: 166px; cursor: pointer; text-align: center; color: #666666; font-size: 16px; line-height: 36px; position: relative;}
.xcx_list7 ul li i { display: block; margin: 0 auto 20px auto; width: 82px; height: 82px; background: url(../images/miniprogram/color.png) no-repeat;}
.xcx_list7 ul li i.t1 { background-position: 0 0;}
.xcx_list7 ul li i.t2 { background-position: -166px 0;}
.xcx_list7 ul li i.t3 { background-position: -333px 0;}
.xcx_list7 ul li i.t4 { background-position: -499px 0;}
.xcx_list7 ul li i.t5 { background-position: -665px 0;}
.xcx_list7 ul li i.t6 { background-position: -831px 0;}
.xcx_list7 ul li i.t7 { background-position: -998px 0;}
.xcx_list7 ul li b { display: block; opacity: 0; content: ''; width: 0; height: 0; border-left: 10px transparent solid; border-right: 10px transparent solid; position: absolute; left: 50%; margin-left: -10px; top: 90px;}
.xcx_list7 ul li b.t1 { border-top: 13px #000 solid;}
.xcx_list7 ul li b.t2 { border-top: 13px #ff8e15 solid;}
.xcx_list7 ul li b.t3 { border-top: 13px #e52335 solid;}
.xcx_list7 ul li b.t4 { border-top: 13px #2695f1 solid;}
.xcx_list7 ul li b.t5 { border-top: 13px #724bf4 solid;}
.xcx_list7 ul li b.t6 { border-top: 13px #f3307c solid;}
.xcx_list7 ul li b.t7 { border-top: 13px #b3a393 solid;}
.xcx_list7 ul li.on { background: url(../images/miniprogram/colorhover.png) center -16px no-repeat;}
.xcx_list7 ul li.on b { opacity: 1;}
.xcx_list7 ul li:hover { background: url(../images/miniprogram/colorhover.png) center -16px no-repeat;}


.visibility{ visibility: hidden; position: absolute; z-index: -1;}

.xcx_list8_box { position: relative; height: 600px; }

.xcx_list8 { height: 500px; padding: 20px 0; }
.xcx_list8 .item{ background: url(../images/miniprogram/phone.png) no-repeat; border-radius: 30px; float: left; margin: 0 30px; width: 240px; border-radius: 10px; height: 460px; padding: 48px 10px 0 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition:all 300ms ease; }
.xcx_list8 .item img{ display: block; width: 216px; height: 350px; border-radius: 4px; border: 2px #f5f5f5 solid; }

.xcx_list8 .item:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.15); -moz-transform:translateY(-10px);-webkit-transform:translateY(-10px);transform:translateY(-10px); }


.xcx_main9 { background: url(../images/miniprogram/bg3.jpg) center top no-repeat #e92b46; padding: 85px 0 0 0; height: 730px;}
.xcx_main9 .xcx_tit { margin-bottom: 62px; }
.xcx_main9 .xcx_tit b{ color: #fff;}

.xcx_list9 { margin: 0 auto; width: 1170px; height: 405px;}
.xcx_list9 .item { float: left; margin: 0 30px; width: 330px; background: #fff; border-radius: 10px; position: relative; height: 405px; padding: 25px 60px 0 60px; transition:all 300ms ease;}
.xcx_list9 .item .img {}
.xcx_list9 .item .img img{ display: block; margin: 0 auto;}
.xcx_list9 .item .tit { font-size: 18px; color: #333333; text-align: center; line-height: 46px; font-weight: bold; transition:all 300ms ease; padding-top: 26px; height: 72px; position: relative;}
.xcx_list9 .item .tit:before { display: block; content: ''; position: absolute; left: 50%; top: 2px; width: 40px; height: 2px; margin-left: -20px; background: #ff215c; }
.xcx_list9 .item .con { font-size: 14px; color: #878787; text-align: center; line-height: 24px; }

.xcx_list9 .item:hover { box-shadow: 0 5px 30px rgba(0,0,0,0.2); -moz-transform:translateY(-10px);-webkit-transform:translateY(-10px);transform:translateY(-10px); }



.xcx_main10 { background:#ffffff; padding: 90px 0 48px 0; }
.xcx_main10 .xcx_tit { margin-bottom: 26px; }

.xcx_list10 { height: 450px;}
.xcx_list10 .item { float: left; width: 300px; padding: 30px 0; border-radius: 10px; margin: 0 50px; transition:all 300ms ease;}
.xcx_list10 .item .img { margin-bottom: 22px;}
.xcx_list10 .item .img img{ display: block; margin: 0 auto;}
.xcx_list10 .item .tit { font-size: 18px; color: #333333; text-align: center; line-height: 60px; font-weight: bold; transition:all 300ms ease; padding-top: 26px; height: 72px; position: relative;}
.xcx_list10 .item .tit:before { display: block; content: ''; position: absolute; left: 50%; bottom: 0; width: 60px; height: 2px; margin-left: -30px; background: #457eff; }
.xcx_list10 .item .con { padding: 15px 40px; font-size: 14px; color: #878787; text-align: center; line-height: 24px; }

.xcx_list10 .item:hover { box-shadow: 0 5px 30px rgba(0,0,0,0.2); -moz-transform:translateY(-10px);-webkit-transform:translateY(-10px);transform:translateY(-10px); }



.xcx_main11 { background: url(../images/miniprogram/bg4.jpg) center top no-repeat; padding: 130px 0 0 0; height: 460px;}
.xcx_list11 { font-size: 26px; color: #fff; line-height: 58px; text-align: center;}