@charset "utf-8";
body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 arial,\5b8b\4f53,"microsoft yahei",sans-serif;}
body{background-color:#fff;color:#666;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
em,i,b{font-style:normal;font-weight:400;}
fieldset,img{border:0;}
ul,ol,li{list-style:none;}
button,input,select,textarea{font-size:100%;outline:none}
textarea{resize:none;}
img {display:inline-block;}
table{border-collapse:collapse;border-spacing:0;}
a{color: #666;}
a:link, a:visited{text-decoration:none;outline:none;}
a:hover{color:#39f;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
.clear{clear:both;display:block;height:0;overflow:hidden;font-size:0;}
.hide{display:none;}
.l{float:left;}
.r{float:right;}

.header-box { width: 100%; height: 100px;}
.header { width: 1300px; margin: 0 auto;}
.header h1 { float: left; margin-top: 20px;}
.header h1 img { width: 60px; margin-right: 20px; vertical-align: middle;}
.header h1 span { font-size: 28px; font-weight: bold; color: #000000; vertical-align: middle;}
.header .nav { float: right;}
.header .nav ul { overflow: hidden; margin-top: 38px;}
.header .nav ul li { float: left; margin-left: 50px;}
.header .nav ul li span { font-size: 18px; line-height: 24px; color: #333; cursor: pointer; vertical-align: middle;}
.header .nav ul li span:hover { color: #3E6CFE;}
.header .nav ul li em { font-size: 16px; color: #3E6CFE; cursor: pointer; vertical-align: middle; margin-top: -4px; margin-left: 14px;}
.header .nav ul li.info-li span { cursor: default;}
.header .nav ul li.info-li span:hover { color: #333;}
.banner-box { width: 100%; height: 500px; min-width: 1300px; background: url("../images/banner-bg.png") center top no-repeat; background-size:cover;}
.banner { position: relative; width: 1300px; height:500px; margin: 0 auto;}
.banner .img-01 { width: 256px; position: absolute; top:31px; left: 0; z-index: 9; user-select: none; transform: translateZ(0); animation-name: computer-animation; animation-duration: 0.8s;}
.banner .img-01 img { width: 100%;}
.banner .img-02 { width: 230px; position: absolute; top:74px; left: 133px; z-index: 8; user-select: none; transform: translateZ(0); animation-name: phone-animation; animation-duration: 0.8s;}
.banner .img-02 img { width: 100%;}
.banner .img-03 { width: 398px; position: absolute; left: 410px; top:143px; animation-fill-mode:both; animation-delay: 0.3s; animation-name: h2-animation; animation-duration: 1s;}
.banner .img-03 img  { width: 100%;}
.banner .news { position: absolute; right: 0; top:70px; width: 330px; height: 330px; padding: 30px; animation-fill-mode:both; animation-name: news-animation; animation-duration: 2s; box-sizing: border-box; background: #fff; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.08);}
.banner .news ul li { font-size: 12px; color: #333; margin-bottom: 10px;}

@keyframes computer-animation {
  from {
    transform: translateX(70px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes phone-animation {
  from {
    transform: translateX(40px);
    opacity: 0.2;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes h2-animation {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes news-animation {
  from {
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.com-tit { height: 48px; line-height: 48px; text-align: center;}
.com-tit span { display: inline-block; position: relative; font-size: 36px; font-weight: bold; color: #000; vertical-align: middle; margin: 0 30px;}
.com-tit span::before,.com-tit span::after { content: ""; display: block; width: 515px; height: 1px; border-bottom: 1px dashed #F8D6FF; position: absolute; left: -575px; top:22px;}
.com-tit span::after { left: 204px;}
.com-tit em { display: inline-block; width: 17px; height: 16px; vertical-align: middle; margin-top: -24px;}
.com-tit em img { width: 100%;}
.hot-anchor { width: 1300px; margin: 0 auto; padding-top: 50px; margin-bottom: 60px;}
.hot-anchor .anchor-list { margin-top: 40px;}
.hot-anchor .anchor-list ul { margin-left: 60px;}
.hot-anchor .anchor-list ul li { float: left; margin-right: 50px;}
.hot-anchor .anchor-list ul li:last-child { margin-right: 0;}
.hot-anchor .anchor-list ul li .img { transform:rotateY(0); width: 360px; height: 400px;}
.hot-anchor .anchor-list ul li .img img { width: 100%;}
.hot-anchor .anchor-list ul li .txt {  transform:rotateY(-180deg);width: 360px; height: 400px; padding: 25px; box-sizing: border-box; color: #fff; border-radius: 10px; background: linear-gradient(180deg, #2883FF 0%, #7337FD 100%);}
.hot-anchor .anchor-list ul li .txt h5 { font-size: 28px; height: 38px; line-height: 38px; margin-bottom: 7px;}
.hot-anchor .anchor-list ul li .txt h6 { font-size: 16px; height: 20px; line-height: 20px; margin-bottom: 16px;}
.hot-anchor .anchor-list ul li .txt p { font-size: 12px; line-height: 22px;}
.hot-anchor .anchor-list ul li .preserve-box { position: relative; width: 360px; height: 400px;}
.hot-anchor .anchor-list ul li .preserve-box div { left: 0; top:0; position: absolute; transform-style: preserve-3d; backface-visibility:hidden; transition:all 1s; }
.hot-anchor .anchor-list ul li .preserve-box:hover .img{ transform:rotateY(-180deg);}
.hot-anchor .anchor-list ul li .preserve-box:hover .txt{ transform:rotateY(0deg);}
.hot-anchor .anchor-list ul li .btn-box {margin-top: 15px; width: 360px; border: 1px solid #CCCCCC; border-radius: 10px; height: 50px; line-height: 50px; text-align: center;}
.hot-anchor .anchor-list ul li .btn-box a { font-size: 20px; font-weight: 500; color: #333; display: block; width: 100%; height: 100%;}
.hot-anchor .anchor-list ul li .btn-box a span { vertical-align: middle;}
.hot-anchor .anchor-list ul li .btn-box a img { width: 22px; height: 22px; vertical-align: middle; margin-right: 14px;}
.contact-box .contact { width: 1300px; margin: 0 auto; margin-bottom: 60px;}
.contact-box .contact .contact-icon { width: 79px; margin: 44px auto 40px;}
.contact-box .contact .contact-icon img { width: 100%;}
.contact-box .contact .tt { text-align: center; }
.contact-box .contact .tt p { font-size: 20px; line-height: 36px; color: #333333; }

.footer { width: 100%; height: 60px; background: #333; min-width: 1300px;}
.footer p { text-align: center; font-size: 14px; color: #AAAAAA; line-height: 36px; padding-top: 12px;}
.footer p a { color: #AAAAAA;}

.layui-layer { border-radius: 10px!important;}
.layui-layer-setwin {right: 35px!important; top: 35px!important;}
.com-pop { padding:25px 40px; display: none;}
.com-pop .tit{ font-size: 20px; text-align: center; font-weight: bold; color: #333333; height: 28px; line-height: 28px;}
.com-pop .form-box { margin-top: 24px;}
.com-pop .form-box .form-item { margin-bottom: 15px;}
.com-pop .form-box .form-item:last-child { margin-bottom: 0;}
.com-pop .form-box .form-item .input-box { width: 260px; height: 38px; line-height: 38px; box-sizing: border-box; padding: 0 15px; background: #F5F6FA; border-radius: 5px;}
.com-pop .form-box .form-item .input-box em { font-size: 12px; color: #333; display: inline-block; width: 63px; }
.com-pop .form-box .form-item .input-box input { background: #F5F6FA!important; width: 160px; height:38px; border: none; }
.com-pop .form-box .form-item .input-box.yzm input { width: 94px;}
.com-pop .form-box .form-item .input-box.yzm .yzm-img { cursor: pointer; width: 60px; vertical-align: middle; margin-top: -2px;}
.com-pop .form-box .form-item .input-box.dx input { width: 90px;}
.com-pop .form-box .form-item .input-box.dx .dx-span {user-select: none; vertical-align: middle; margin-top: -1px; cursor: pointer; display: inline-block; text-align: center; width: 70px; height: 26px; line-height: 26px; box-sizing: border-box; background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); border-radius: 3px; border: 1px solid #CCCCCC;}
.com-pop .form-box .form-item .input-box.dx .send-djs { display: none;}
.com-pop .form-box .form-item select { width: 160px;height: 38px; border: none; background: #F5F6FA;}
.com-pop .form-box .btn-item { margin-top: 30px;}
.com-pop .form-box .btn-item .btn { width:100%; height: 40px; text-align: center; }
.com-pop .form-box .btn-item .btn .btn-span { user-select: none; cursor: pointer; display: inline-block; width: 260px; height: 40px; line-height: 40px; background: linear-gradient(131deg, #2883FF 0%, #7337FD 100%); border-radius: 22px; font-weight: 500; font-size: 18px; color: #fff;}
.com-pop .form-box .btn-item .btn .btn-span:hover { background: linear-gradient(131deg, #7337FD 0%, #2883FF 100%);}
.com-pop .form-box .xy-box { text-align: center; margin-top: 17px;}
.com-pop .form-box .xy-box input { vertical-align: middle; margin-right: 5px;}
.com-pop .form-box .xy-box span { vertical-align: middle;}
.com-pop .form-box .xy-box em { color: #2883FF; cursor: pointer;}
.com-pop.login-box .form-box .form-item .input-box em { width: 48px;}
.com-pop.login-box .form-box .form-item .input-box input { width: 175px;}


.yhxy-box { padding:25px 20px!important; }
.yhxy-box .xy-wrap { width: 600px; height: 500px; padding: 20px 20px 0 20px; box-sizing: border-box; overflow: auto;}
.yhxy-box p { margin-bottom: 10px; line-height: 24px;}

.cy1 { width: 480px; height: 850px;}
.cy2 { width: 680px; height: 680px;}
.cy3 { width: 480px; height: 850px;}

::-webkit-input-placeholder { /* Edge */
  color: #CCCCCC;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #CCCCCC;
}

::placeholder {
  color: #CCCCCC;
}