.sec-xcx-core { padding-bottom: 65px; }

.core-function { text-align: center; margin-top: 48px; width: 1300px; margin-left: auto; margin-right: auto; font-size: 0; padding-bottom: 44px; }

.core-function-item { width: 244px; height: 177px; box-sizing: border-box; display: inline-block; margin-right: 20px; margin-bottom: 20px; position: relative; overflow: hidden; }
.core-function-item img { width: 100%; height: 100%; }

.core-function-item:nth-child(5n) { margin-right: 0; }

.core-function-img-hover { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.core-function-item:hover .core-function-img-hover { opacity: 1; }

.core-function-item h4 { color: white; font-size: 24px; height: 24px; line-height: 24px; font-weight: 400; position: absolute; top: 64px; width: 100%; transition: top .3s; margin: auto; top: 0; bottom: 0; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -ms-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; }

.core-function-item p { position: absolute; font-size: 14px; font-weight: 400; color: white; width: 100%; transition: top .3s; top: 100%; }

.core-function-item:hover .core-function-p1 { top: 78px; }

.core-function-item:hover .core-function-p2 { top: 102px; }

.core-function-item:hover p { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -ms-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; }

.core-function-item:hover h4 { top: -70px; -webkit-transition-delay: unset; -moz-transition-delay: unset; -ms-transition-delay: unset; -o-transition-delay: unset; transition-delay: unset; }

.sec-xcx-operation { padding-bottom: 44px; }

.intelligent-wrap { width: 994px; margin-left: auto; margin-right: auto; padding-bottom: 40px; }

.intelligent-item { width: 202px; text-align: center; float: left; font-size: 0; }

.intelligent-item:nth-child(2) { margin-left: 182px; margin-right: 182px; width: 225px; }

.intelligent-item h4 { font-size: 18px; font-weight: 400; color: #59607b; height: 18px; line-height: 18px; padding-bottom: 16px; padding-top: 38px; }

.intelligent-item p { color: #9fa5bb; font-size: 14px; height: 14px; line-height: 14px; }

.preview-section { position: relative; height: 740px; background-color: #999D9E; box-sizing: border-box; }

.preview-bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

.preview-bg-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; }

.preview-bg-box img.active { opacity: 1; }

.preview-bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

.preview-bg-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; }

.preview-bg-box img.active { opacity: 1; }

.preview-section { background: url("../Image/xcx/preview-bg.jpg") center/cover; }

.preview-content { position: relative; margin: 0 auto; width: 1200px; height: 100%; }

.preview-left-content { padding-top: 60px; width: 940px; margin: 0 auto; }

.preview-title { padding-bottom: 22px; font-size: 30px; line-height: 30px; text-align: center; color: #fff; font-weight: 400; }

.preview-description { padding-bottom: 67px; font-size: 18px; line-height: 18px; text-align: center; color: #fff; font-weight: 400; }

.preview-left-content-main { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -120px; overflow: hidden; }

.preview-left-content-main .preview-nav-list { width: 200px; height: 450px; position: relative; }

.preview-left-content-main .preview-nav-list:after { content: ''; display: block; width: 2px; height: 431px; background: white; position: absolute; opacity: .2; top: 0; right: 1px; }

.preview-nav-list .top-nav { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; border: 1px solid #fff; border-radius: 2px; }

.preview-nav-list .top-nav a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; font-size: 16px; line-height: 35px; color: #fff; }

.preview-nav-list .top-nav a.active { background-color: rgba(255, 255, 255, 0.5); }

.preview-nav-list .top-nav .center-border { width: 1px; height: 35px; background-color: #fff; }

.preview-nav-list .nav-list-area { position: relative; height: 450px; }

.preview-nav-list .nav-list-area > div.nav-list-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 450px; overflow: hidden; }

div.nav-list-wrap > ul { width: 200px; height: 450px; overflow-x: hidden; overflow-y: auto; }

.preview-nav-list .nav-list-area li { margin-bottom: 20px; width: 200px; height: 36px; line-height: 36px; font-size: 18px; text-align: center; position: relative; text-indent: 44px; }

.preview-nav-list .nav-list-area a { display: block; height: 100%; color: #fff; }

.preview-nav-list .nav-list-area li.active, .preview-nav-list .nav-list-area li.on { background: linear-gradient(-90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); }

.preview-nav-list .nav-list-area li.active:after, .preview-nav-list .nav-list-area li.on:after { content: ''; display: block; width: 4px; height: 36px; background: #3091f2; position: absolute; top: 0; right: 0; }

.preview-nav-list .nav-list-area li.active a, .preview-nav-list .nav-list-area li.on a { color: #3091F2; }

.preview-detail { padding-left: 109px; width: 743px; height: 100%; }

.preview-detail-list { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 16px; }

.preview-detail-item { padding-top: 20px; margin-right: 50px; }

.preview-detail-item-img { padding: 20px; width: 150px; height: 150px; border: 1px solid #b9babe; background-color: rgba(255, 255, 255, 0.1); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.preview-detail-item.active .preview-detail-item-img { background-color: rgba(255, 255, 255, 0.3); }

.preview-detail-item-img img { width: 110px; height: 110px; }

.preview-detail-item-name { padding: 20px 0; height: 20px; width: 150px; font-size: 16px; text-align: center; color: #fff; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.preview-detail-intro-title { padding-top: 30px; padding-bottom: 22px; font-size: 24px; color: #fff; }

.webapp-list-item-content-list { display: none; }

.webapp-list-item-content-list.active { display: block; }

.preview-detail-intro-content { display: none; font-size: 14px; line-height: 30px; color: #fff; margin-top: 26px; }

.preview-detail-intro-content.active { display: block; }

.preview-detail-intro-content.active { display: block; }

.webapp-more-preview { display: none; }

.webapp-more-preview.active { display: block; }

.more-preview-case { display: block; width: 118px; height: 38px; margin-top: 30px; border: 1px solid #fff; border-radius: 2px; line-height: 38px; text-align: center; color: #fff; }

.more-preview-case:hover { background-color: #3091f2; border-color: #3091f2; color: #ffffff; }

.preview-btn { position: absolute; top: 250px; left: 420px; display: none; width: 34px; z-index: 1; }

.preview-btn p { padding: 10px 0; width: 100%; text-align: center; font-size: 18px; -webkit-box-shadow: 2px 2px 2px 0 #5f5f5f; box-shadow: 2px 2px 2px 0 #5f5f5f; border-radius: 5px; background-color: #7C98EF; color: #fff; cursor: pointer; }

.preview-btn .page-down { margin-top: 160px; }

.webapp-list-item { display: none; }

.webapp-list-item.active { display: block; }

.sec-gxxq { padding-bottom: 60px; }

.gxxq-box { margin-bottom: 40px; background: url("../Image/xcx/gxxq-bg.jpg") top center no-repeat; }
.gxxq-box .box-item { width: 190px; }
.gxxq-box .box-item .row-item { border-right: 1px solid #eeeeee; line-height: 60px; height: 60px; text-align: center; font-size: 14px; border-bottom: 1px solid #eeeeee; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; color: #666666; overflow: hidden; }
.gxxq-box .box-item .row-item p { line-height: 30px; color: #666666; }
.gxxq-box .box-item .row-item .price { font-size: 24px; color: #df3833; margin-right: 5px; }
.gxxq-box .box-item .row-item .btn { margin: 10px auto; display: block; width: 150px; height: 40px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; line-height: 40px; text-align: center; background: transparent; }
.gxxq-box .box-item .row-item.box-head { height: 58px; color: #ffffff; background: transparent !important; line-height: 58px; font-size: 18px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.gxxq-box .box-item .row-item.box-bd { height: 360px; }
.gxxq-box .box-item .row-item:nth-child(4) { color: #999999; }
.gxxq-box .box-item:first-child { width: 160px; font-size: 16px; border-left: 1px solid #eeeeee; color: #666666; }
.gxxq-box .box-item:first-child .row-item { background-color: #f7f8fa; }
.gxxq-box .box-item:hover .row-item { background-color: #f7f8fa; }
.gxxq-box .box-item:hover .row-item .btn { color: #ffffff; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); box-shadow: 0px 10px 20px 0px rgba(221, 56, 51, 0.26); }

.sec-xcx-tools { padding-bottom: 40px; }

.tools-box { margin-bottom: 40px; }
.tools-box .tool-item { width: 220px; height: 300px; border-radius: 8px; box-shadow: 0 2px 8px #eee; }
.tools-box .tool-item .item-bd { background-color: #fcfdfd; /*-webkit-box-shadow: 1.5px 2.598px 15px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1.5px 2.598px 15px 0px rgba(0, 0, 0, 0.05);
box-shadow: 1.5px 2.598px 15px 0px rgba(0, 0, 0, 0.05);*/ width: 220px; height: 128px; padding: 15px 27px; }
.tools-box .tool-item .item-name { font-size: 20px; color: #666666; line-height: 38px; }
.tools-box .tool-item .item-desc { font-size: 16px; color: #999999; line-height: 26px; }

.partner-grid { position: relative; height: 440px; margin-top: 150px; }
.partner-grid .grid-item { position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; width: 150px; height: 150px; background-color: #f7f8fa; margin: 4px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-box-shadow: 0 0 5px #f7f8fa; -moz-box-shadow: 0 0 5px #f7f8fa; box-shadow: 0 0 5px #f7f8fa; }
.partner-grid .grid-item .item-wrap { width: 100%; height: 100%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.partner-grid .grid-item .item-wrap img { position: absolute; margin: auto; left: 0; right: 0; bottom: 0; top: 0; }
.partner-grid .grid-item:nth-child(2) { top: 110px; left: 110px; }
.partner-grid .grid-item:nth-child(3) { top: 220px; left: 220px; }
.partner-grid .grid-item:nth-child(4) { top: 0px; left: 220px; }
.partner-grid .grid-item:nth-child(5) { top: 110px; left: 330px; }
.partner-grid .grid-item:nth-child(6) { top: 220px; left: 440px; }
.partner-grid .grid-item:nth-child(7) { top: 0px; left: 440px; }
.partner-grid .grid-item:nth-child(8) { top: 110px; left: 550px; }
.partner-grid .grid-item:nth-child(9) { top: 220px; left: 660px; }
.partner-grid .grid-item:nth-child(10) { top: 0; left: 660px; }
.partner-grid .grid-item:nth-child(11) { top: 110px; left: 770px; }
.partner-grid .grid-item:nth-child(12) { top: 220px; left: 880px; }
.partner-grid .grid-item:nth-child(13) { top: 0; left: 880px; }
.partner-grid .grid-item:nth-child(14) { top: 110px; left: 990px; }
.partner-grid .grid-item:nth-child(15) { top: 0; left: 1100px; }
.partner-grid .grid-item:hover { -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 8px rgba(80, 100, 136, 0.2); }