#banner .container .content .title2 { font-size: 44px; line-height: 1.5; color: #000; font-weight: 400; } #banner, #banner .container { padding-top: 50px; align-items: normal; } #news .site_btn a { color: #e60022; } #banner .container .content .title3 { font-size: 16px; height: 60px; line-height: 22px; margin: 12px 0 16px; width: 580px; color: #000; padding: 0; background-image: none; } .w1400 .subtitle .subtitle1 { color: #5b5b5b; font-size: 16px; font-weight: 400; margin-top: 12px; } .w1400 .subtitle .subtitle2 { color: red; font-size: 16px; font-weight: 400; margin-top: 12px; } .service_wrapper { width: 1200px; } .tab-item { width: 16%; } .tab-item .title { margin-top: 20px; text-align: center; } .tab-content[data-v-4f11c9f0] { border-radius: 8px; display: inline-block; height: 80px; text-align: center; width: 85px; } .tab-content .img-box[data-v-4f11c9f0] { animation-delay: 0s; animation-direction: normal; animation-duration: .5s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-name: product-icon-leave-4f11c9f0; animation-play-state: running; animation-timing-function: steps(24); background-position: center 0; background-repeat: no-repeat; background-size: 100%; height: 80px; overflow: hidden; width: 85px; } .tab-item[data-v-4f11c9f0] { cursor: pointer; display: inline-block; height: 128px; padding-bottom: 0; position: relative; text-align: center; transition-delay: 0s; transition-duration: .3s; transition-property: color; transition-timing-function: cubic-bezier(.22, .08, .32, .99); } .active2 { border-radius: 100px; border-bottom: 4px solid #5b5b5b; border-image: linear-gradient(red, #ff6b00) 30 30; } .product-list-item { margin: 0 auto; width: 100%; height: 449px; position: relative; } .product-list { width: 100%; left: 0px; position: absolute; top: 0px; height: 453px; background-color: #f5f5f7; overflow: hidden; transition: height .5s cubic-bezier(.215, .61, .355, 1), opacity .5s cubic-bezier(.215, .61, .355, 1) .2s; } .column { margin-top: 30px; float: left; width: 100%; } .product-card2:hover { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .15); } .product-card2:hover .title1 { color: #c70b0b!important; } .product-card3 { transition: all 0.6s; } .product-card3:hover .title1 { color: #c70b0b!important; } .product-card2 { transition: all 0.6s; width: 90%; display: inline-block; background-image: url(/static/images/product_bg.png); background-size: 100% 100%; border-radius: 8px; box-sizing: border-box; height: 156px; margin: 12px; padding: 25px 16px 25px 20px; } .product-card3 { border-radius: 8px; box-sizing: border-box; height: 90px; margin: 12px; padding: 25px 16px 25px 20px; } .product-card3 .title1 { color: #181818; font-size: 16px; font-weight: 600; height: 22px; line-height: 22px; overflow: hidden; } .product-card3 .tag-red { background: #ffdede; border-radius: 4px; color: #e74339; display: inline-block; font-size: 12px; font-weight: 400; line-height: 21px; margin-left: 8px; padding: 0 6px; vertical-align: middle; } .product-card3 .desc1 { color: #5b5b5b; font-size: 14px; font-weight: 400; height: 17px; line-height: 17px; margin: 12px 0; max-width: 286px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } .product-card3 .tag-grey { border: 1px solid #979797; border-radius: 2px; box-sizing: border-box; color: #979797; font-size: 12px; font-weight: 400; margin-right: 8px; padding: 2px 9px; } .g-main { margin: 0 auto; width: 1280px; } .product-card2 .title1 { color: #181818; font-size: 18px; font-weight: 600; } .product-card2 .desc1 { color: #5b5b5b; font-size: 14px; font-weight: 400; height: 17px; line-height: 17px; margin: 12px 0; max-width: 286px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } .kt-btn { display: inline-grid; width: 80px; height: 33px; background: linear-gradient( 109.9deg, red 30.4%, #ff6b00 77.46%); background-repeat: no-repeat; border: none; border-radius: 4px; color: #fff; transition: all .3s cubic-bezier(.22, .08, .32, .99); } .kt-btn2 { margin-left: 10px; border: 1px solid #adadad; border-radius: 4px; color: #181818; display: inline-block; font-size: 12px; font-weight: 600; line-height: 17px; padding: 8px 16px; transition-delay: 0s; transition-duration: .3s; transition-property: color; transition-timing-function: cubic-bezier(.22, .08, .32, .99); vertical-align: top; } .kt-btn span { font-weight: 600; text-align: center; line-height: 32px; font-size: 12px; color: #fff; } .product-list-1 { width: 25%; float: left; } .product-list-2 { width: 25%; float: left; } .product-list-3 { width: 25%; float: left; } .product-list-4 { width: 25%; float: left; } .column1 { float: left; margin-top: 10px; width: 100%; } .column2 { float: left; margin-top: 10px; width: 100%; } .column3 { float: left; margin-top: 10px; width: 100%; } .ct-application { overflow: hidden; padding: 40px 0; position: relative; } .ct-application .col-left { float: left; position: relative; width: 30%; } .col-zhong { left: 23px; float: left; width: 15%; position: relative; } .zhong-con { margin-top: 20px; margin-left: 20px; } .zhong-con img { width: 95%; } .ct-application .col-left .item { background: transparent; border: none; color: #181818; font-size: 16px; font-weight: 400; margin: 12px 0 0; padding: 0; } .ct-application .col-left .link { margin-bottom: 20px; margin-top: 20px; } .ct-application .col-left .link a span { color: #c70b0b; } .ct-application .col-left .item .subtitle { color: #5b5b5b; } .ct-application .col-left .item>h4 { color: #181818; font-size: 26px; font-weight: 600; transition-delay: 0s; transition-duration: .3s; transition-property: color; transition-timing-function: cubic-bezier(.22, .08, .32, .99); } .insurance { color: #574730; display: inline-block; font-size: 14px; font-weight: 400; height: 20px; line-height: 20px; margin-top: 20px; width: 48%; } .insurance img { top: 3px; position: relative; } .insurance .insuran-con { margin-left: 10px; } .-ctyun-icon-shangcheng_shield_16:before { content: "\e647"; } .ct-application:before { background-image: url(/static/images/leftbar.png); content: ""; display: block; height: 387px; left: -10px; position: absolute; top: -40px; width: 688px; } .ct-application .col-middle { left: 50px; width: 55%; float: right; position: relative; } .ct-application .col-middle .item:hover, .ct-application .col-right .item:hover { background: linear-gradient( 109.9deg, red 30.4%, #ff6b00 77.46%); } .ct-application .col-middle .item:hover>h4, .ct-application .col-right .item:hover>h4 { color: #fff!important; } .ct-application .col-middle .item:hover>p, .ct-application .col-right .item:hover>p { color: #fff; } .ct-application .item .img-box { animation-delay: 0s; animation-direction: normal; animation-duration: .5s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-name: product-icon-leave; animation-play-state: running; animation-timing-function: steps(24); background-position: center 0; background-repeat: no-repeat; background-size: 100%; height: 80px; overflow: hidden; width: 80px; } .ct-application .item>.img-box { position: absolute; right: 18px; top: 15px; } .ct-application .item>p { line-height: 20px; position: relative; white-space: nowrap; } .ct-application .item>h4 { color: #181818; font-size: 20px; font-weight: 600; line-height: 28px; margin-bottom: 12px; position: relative; white-space: nowrap; } .ct-application .col-middle .item { background: #f5f5f5; background-position: 264px; background-repeat: no-repeat; background-size: 80px 80px; border: 1px solid #e6e6e6; border-radius: 8px; box-sizing: border-box; color: #5b5b5b; display: inline-block; font-size: 14px; font-weight: 400; line-height: 28px; margin: 12px; padding: 24px; position: relative; width: 322px; } .ct-service { background: #f2f3f5; padding-bottom: 39px; } .ct-title { margin: 0 auto; /*padding-bottom: 40px;*/ padding-top: 40px; text-align: center; width: 768px; } .ct-title>.title { color: #181818; font-size: 26px; font-weight: 400; line-height: 36px; } .g-main { margin: 0 auto; width: 1280px; } .ct-service .item:first-child { transition-delay: 0s; transition-duration: .3s; transition-timing-function: cubic-bezier(.22, .08, .32, .99); } .item3 { font-size: 14px; color: #878787; } .item4 { margin-top: 44px; } .item-a { color: #c70b0b; font-size: 14px; } .ct-service .item { background: #fff; background-repeat: no-repeat; background-size: 100% 100%; border-radius: 8px; color: #878787; display: inline-block; height: 80px; overflow-y: scroll; line-height: 17px; margin: 30px 12px; padding: 50px 30px; vertical-align: top; width: 26%; } .ct-service .item::-webkit-scrollbar { display: none; } /*.ct-service .item:first-child:hover {*/ /*    background-image: url(/static/images/S_bg01.723a55a.png);*/ /*}*/ .ct-service .item>div:last-child p { margin-bottom: 18px; } /*.ct-service .item:nth-child(2):hover {*/ /*    background-image: url(/static/images/S_bg02.46027c0.png);*/ /*}*/ /*.ct-service .item:nth-child(3):hover {*/ /*    background-image: url(/static/images/S_bg03.d774df2.png);*/ /*}*/ /*.ct-service .item:nth-child(4):hover {*/ /*    background-image: url(/static/images/S_bg04.49251d8.png);*/ /*}*/ .ct-service .item>div:first-child { color: #181818; font-size: 18px; font-weight: 600; line-height: 25px; margin-bottom: 12px; } .ct-service .item>div { line-height: 20px; } #je_process { display: none; width: 100%; padding: 56px 0 60px; /* background-image: url(/public/images/je_proess_bg.jpg); */ background-position: 50%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed } #je_process .container .title, #je_process .container .title .sitetitle { color: #000 } #je_process .process_wrapper { width: 100%; margin-top: 36px } #je_process .process_wrapper .process_list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } #je_process .process_wrapper .process_list .process_item { width: 25% } #je_process .process_wrapper .process_list .process_item .num { text-align: center; position: relative; display: block; max-width: 240px; margin: 0 auto } #je_process .process_wrapper .process_list .process_item .num img { width: 30%; margin: 0 auto } #je_process .process_wrapper .process_list .process_item .line { width: 100%; height: 0; border-bottom: 1px dashed #ededed; background-color: rgba(0, 0, 0, 0); margin: 20px 0; position: relative } #je_process .process_wrapper .process_list .process_item .line span { width: 12px; height: 12px; background-color: #f1616b; border-radius: 0; z-index: 2 } #je_process .process_wrapper .process_list .process_item .line:after, #je_process .process_wrapper .process_list .process_item .line span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } #je_process .process_wrapper .process_list .process_item .line:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #ededed; border-radius: 0; background-color: rgba(0, 0, 0, 0); z-index: 1 } #je_process .process_wrapper .process_list .process_item .content { width: 100%; text-align: center } #je_process .process_wrapper .process_list .process_item .content h3 { margin: 10px 0; font-size: 20px; font-weight: 600; color: #181818 } #je_process .process_wrapper .process_list .process_item .content .a { color: #000; font-size: 20px; margin-bottom: 8px; font-weight: 600 } #je_process .process_wrapper .process_list .process_item .content p { font-size: 16px; line-height: 1.5; color: #181818 } #je_process { width: 100%; padding: 56px 0 60px; /* background-image: url(/public/images/je_proess_bg.jpg); */ background-position: 50%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed } #je_process .container .title, #je_process .container .title .sitetitle { color: #000 } #je_process .process_wrapper { width: 100%; margin-top: 36px } #je_process .process_wrapper .process_list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } #je_process .process_wrapper .process_list .process_item { width: 25% } #je_process .process_wrapper .process_list .process_item .num { text-align: center; position: relative; display: block; max-width: 240px; margin: 0 auto } #je_process .process_wrapper .process_list .process_item .num img { width: 30%; margin: 0 auto } #je_process .process_wrapper .process_list .process_item .line { width: 100%; height: 0; border-bottom: 1px dashed #ededed; background-color: rgba(0, 0, 0, 0); margin: 20px 0; position: relative } #je_process .process_wrapper .process_list .process_item .line span { width: 12px; height: 12px; background-color: #f1616b; border-radius: 0; z-index: 2 } #je_process .process_wrapper .process_list .process_item .line:after, #je_process .process_wrapper .process_list .process_item .line span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } #je_process .process_wrapper .process_list .process_item .line:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #ededed; border-radius: 0; background-color: rgba(0, 0, 0, 0); z-index: 1 } #je_process .process_wrapper .process_list .process_item .content { width: 100%; text-align: center } #je_process .process_wrapper .process_list .process_item .content h3 { margin: 10px 0; font-size: 20px; font-weight: 600; color: #181818 } #je_process .process_wrapper .process_list .process_item .content .a { color: #000; font-size: 20px; margin-bottom: 8px; font-weight: 600 } #service { margin-top: 30px; } #je_process .process_wrapper .process_list .process_item .content p { font-size: 16px; line-height: 1.5; color: #181818 } @media screen and (max-width:768px) { .col-zhong { width: 100%; } .ct-application .col-middle { left: 0; } .zhong-con { margin: 50px 0 0 0; padding: 10%; } .zhong-con img { width: 100%; } #du_process { display: none; } #je_process { margin-top: 1118px; display: block; width: 100%; padding: 36px 0; /* background-image: url(/public/images/je_proess_bg.jpg); */ background-position: 50%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed } #je_process .container .title, #je_process .container .title .sitetitle { color: #000 } #je_process .process_wrapper { width: 100%; margin-top: 36px } #je_process .process_wrapper .process_list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } #je_process .process_wrapper .process_list .process_item { width: 50%; margin-bottom: 12px } #je_process .process_wrapper .process_list .process_item .num { text-align: center; position: relative; display: block; max-width: 240px; margin: 0 auto } #je_process .process_wrapper .process_list .process_item .num img { width: 30%; margin: 0 auto } #je_process .process_wrapper .process_list .process_item .line { width: 100%; height: 0; border-bottom: 1px dashed #ededed; background-color: rgba(0, 0, 0, 0); margin: 20px 0; position: relative } #je_process .process_wrapper .process_list .process_item .line span { width: 12px; height: 12px; background-color: #f1616a; border-radius: 0; z-index: 2 } #je_process .process_wrapper .process_list .process_item .line:after, #je_process .process_wrapper .process_list .process_item .line span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } #je_process .process_wrapper .process_list .process_item .line:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #ededed; border-radius: 0; background-color: rgba(0, 0, 0, 0); z-index: 1 } #je_process .process_wrapper .process_list .process_item .content { width: 100%; text-align: center } #je_process .process_wrapper .process_list .process_item .content h3 { margin: 10px 0; font-size: 18px; font-weight: 600; color: #181818 } #je_process .process_wrapper .process_list .process_item .content .a { color: #000; font-size: 18px; margin-bottom: 8px; font-weight: 600 } #je_process .process_wrapper .process_list .process_item .content p { font-size: 14px; line-height: 1.5; color: #181818; } #banner, #banner .container { padding-top: 20px; } #banner .container .content .title2 { font-size: 20px; } #banner .container, #banner .container .content { justify-content: left; align-items: flex-start; } #banner .container, #banner .container .content { font-size: 14px; } #banner .container .content .title3 { width: 100%; font-size: 12px; text-align: left; } #service .container, #service .container .service_list { display: block; } .w1400 .title .sitetitle { width: 100%; font-size: 18px; } .w1400 .subtitle .subtitle1 { font-size: 14px; } .w1400 .subtitle .subtitle2 { font-size: 14px; } .service_wrapper { width: 100%; } #service .container .service_list { padding: 0; } .tab-item[data-v-4f11c9f0] { /*padding: 1%;*/ height: 135px; width: 49%; margin-top: 10px; } .w1400 { padding: 0; } .product-list { height: auto; } .product-list-1 { width: 100%; float: left; } .product-list-2, .product-list-3, .product-list-4 { width: 100%; float: left; } .product-list { height: 1566px; z-index: 999; } #du_process { margin-top: 1115px; } #du_process .title p { width: 100%; } .ct-application { width: 100%; } .g-main { width: 100%; } .ct-application .col-left { padding: 0 2%; width: 96%; } .ct-application .col-left .item>h4 { font-size: 18px; width: 96%; } .ct-application .item>p { width: 96%; font-size: 14px; } .col-left .item { width: 96%; } .item3 span { line-height: 30px; color: #b7b7b7; } .ct-application .col-middle { width: 100%; } .ct-application .col-middle .item { width: 93%; margin-top: 30px; } .ct-title { width: 100%; } .ct-application .item>h4 { font-size: 16px; } .ct-title>.title { font-size: 20px; } .ct-service .item { height: 120px; width: 93%; padding: 5%; margin-top: 20px; } .ct-service .item>div:first-child { font-size: 18px; } .col-zhong { left: 0; } .ct-service .item>div { font-size: 14px; } .ct-application .col-left .item { padding-left: 3%; } .item4 { margin-top: 10px; } #banner .container, #banner .container .content { margin-left: 10px; } } @media screen and (max-width: 1200px) { .g-main { width: 100%; } }