.fl{float: left} .fr{float:right} .index_main .section1 .txt_block{bottom:40vh} .index_main .section1 h3{font-size: 60px;line-height: 180%} .index_main .section1 h4{font-size: 20px;} .aigc_main .section1{ background: url("../images/aigc/bg1.jpg?v=2") no-repeat top center ; background-size:cover ; overflow: hidden; } .aigc_main .section1 img{ max-width:100%; margin-top:20px } .aigc_main .section1 .text{ margin: 0 auto; text-align: center; } .aigc_main h3,.rmb_main h3{ margin-top: 110px; font-size: 36px; text-align: center; font-weight: 300; line-height: 100%; } .aigc_main .section1 .text p{ font-size: 16px; line-height: 230%; margin-top: 60px; } .aigc_main .section2{ background: url("../images/aigc/bg2.jpg") no-repeat top center ; background-size:cover ; overflow: hidden; } .aigc_main .section2{ color: #ffffff; } .aigc_main .section2 .text{ padding-bottom: 50px; } .aigc_main .section2 .tabs .tab-title{ text-align: center; margin-top: 40px; } .aigc_main .section2 .tabs .tab-title li{ font-size: 14px; display: inline-block; line-height: 44px; margin:0 6px; border: 1px solid #4f5a68; border-radius: 5px; cursor: pointer; padding:0 20px; } .aigc_main .section2 .tabs .tab-title li.hover,.aigc_main .section2 .tabs .tab-title li:hover{ background-color: #2884f6; color: #ffffff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .aigc_main .section2 .tabs .tab-content{ padding-top:40px ; } .aigc_main .section2 .tabs .tab-content .item{ display: none; } .aigc_main .section2 .tabs .tab-content .item.hover{ display: block; } .aigc_main .section2 .tabs .tab-content .fl{ position: relative; width:50%; background: url("../images/aigc/dot-bg.png") no-repeat top center; } .aigc_main .section2 .tabs .tab-content .fl img{ max-width: 100%; } .aigc_main .section2 .tabs .tab-content .img{ position: absolute; left: 0; top: 0; z-index: 2; } .aigc_main .section2 .tabs .tab-content .dot{ margin: 80px 0 40px; } .aigc_main .section2 .tabs .tab-content .dot img{ max-width: 100%; } .aigc_main .section2 .tabs .tab-content h4{ font-size: 24px; font-weight: 300; } .aigc_main .section2 .tabs .tab-content .fr{ line-height: 200%; font-size: 16px; text-align: justify; height:405px; padding-right:20px; overflow:auto; } .aigc_main .section2 .tabs .tab-content .fr h6{ font-size:1em; } .aigc_main .section2 .tabs .tab-content .fr p{ margin-bottom:0.5em; } .aigc_main .section2 .tabs .tab-content .fr{ width:calc(50% - 60px); } .aigc_main .section3 .items,.aigc_main .section4 .items,.rmb_main .section4 .items,.rmb_main .section5 .items{ margin-top: 30px; margin-bottom: 30px; } .aigc_main .section3 .tabs .tab-title{ text-align: center; margin-top: 40px; } .aigc_main .section3 .tabs .tab-title li{ font-size: 14px; display: inline-block; line-height: 44px; margin:0 6px; border: 1px solid #e6e6e6; border-radius: 5px; cursor: pointer; padding:0 40px; } .aigc_main .section3 .tabs .tab-title li.hover,.aigc_main .section2 .tabs .tab-title li:hover{ background-color: #2884f6; color: #ffffff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .aigc_main .section3 .tabs .tab-content{ padding-top:40px ; } .aigc_main .section3 .tabs .tab-content .item{ display: none; width:100%; } .aigc_main .section3 .tabs .tab-content .item>div{ width:50%; display:inline-block; } .aigc_main .section3 .tabs .tab-content .item .fl{ padding-right:60px; } .aigc_main .section3 .tabs .tab-content .item.hover{ display: block; align-items:center; } .aigc_main .section3 .tabs .tab-content .item dt{ font-size:20px; border-bottom:1px solid #e6e6e6; margin:18px 0 10px; padding-bottom:20px; background:url("../images/aigc/dot-right.png") no-repeat right center; cursor:pointer; } .aigc_main .section3 .tabs .tab-content .item .active dt{ background-image:url("../images/aigc/dot-down.png"); color:#408ff4; } .aigc_main .section3 .tabs .tab-content .item dl:first-child dt{ margin-top:0; } .aigc_main .section3 .tabs .tab-content .item dd{ font-size:16px; line-height:200%; border-bottom:1px solid #e6e6e6; padding-bottom:10px; display:none; max-height:203px; overflow:auto; padding-right:20px; text-align:justify; } .aigc_main .section3 .tabs .tab-content .item .active dd{ display:block; } .aigc_main .section3 .tabs .tab-content .item:nth-child(2) dd{ height:auto !important; border-bottom:0; } .aigc_main .section3 .item{ margin:10px; float: left; position: relative; width:calc((100% - 40px) / 2 ); overflow: hidden; } .aigc_main .section3 .item img{ width: 100%; } .aigc_main .section3 .item .nomal,.aigc_main .section3 .item .hover{ position: absolute; width:100%; height: 100%; top:0; left:0; background: url("../images/aigc/bg-3-1.png") no-repeat bottom center; color: #ffffff; background-size: contain !important; } .aigc_main .section3 .item .nomal .txt{ font-size: 24px; position: absolute; bottom: 40px; left:40px; } .aigc_main .section3 .item .hover{ background: url("../images/aigc/bg-3-2.png") no-repeat bottom center; display: flex; align-items: center; opacity: 0; } .aigc_main .section3 .item .hover .txt{ padding: 0 36px; } .aigc_main .section3 .item .hover .title{ font-size: 24px; } .aigc_main .section3 .item .hover p{ margin-top: 20px; font-size: 14px; line-height: 160%; } .aigc_main .section4 .item{ margin-bottom: 60px; } .aigc_main .section4 .item .bg{ position: absolute; height:60px; width:60px; background: url("../images/aigc/dot-3.jpg") no-repeat; left:-10px; top:-10px; z-index: -1; } .aigc_main .section4 .item:nth-child(2n) .fl{ float: right; } .aigc_main .section4 .item:nth-child(2n) .fr{ float: right; } .aigc_main .section4 .item:nth-child(2n) .bg{ left:calc(100% - 50px); } .aigc_main .section4 .items .fl{ width:50%; position: relative; } .aigc_main .section4 .items .fl img{ width: 100%; } .aigc_main .section4 .items .fr { width:calc(50% - 60px); } .aigc_main .section4 .item:nth-child(2n) .fr{ padding-right:60px; } .aigc_main .section4 .items .fr .title{ font-size: 24px; margin:30px 0 30px; } .aigc_main .section4 .items .fr .desc{ line-height: 150%; text-align: justify; } .aigc_main .section4 .items .fr .desc li{ padding-left: 30px; background: url("../images/aigc/dot-1.jpg") no-repeat left 5px; margin:8px 0; } .aigc_main .section4 .items .fr a{ border: 1px solid #2884f6; line-height: 46px; width:180px; border-radius: 5px; font-size: 16px; color:#2884f6 ; text-align: center; display: block; margin-top: 50px; display:none; } .aigc_main .section4 .items .fr a:hover{ color:#ffffff ; background: #2884f6; } /**rmb**/ .rmb_main .section1{ position: relative; background: url("../images/rmb/banner-1.jpg") no-repeat center; background-size: cover; } .rmb_main .section1>img{ width:100%; } .rmb_main .section1 .txt{ text-align: center; position: absolute; height: 100%; width: 100%; display: flex; align-items: center; top:0; left: 0; color: #ffffff; } .rmb_main .section1 .content{ width:100%; } .rmb_main .section1 .txt .title{ font-size: 40px; } .rmb_main .section1 .txt .des{ margin:20px 0 40px; } .rmb_main .section2{ background: url("../images/rmb/bg2.jpg") #f5f6f9 no-repeat center; background-size: contain; height: 480px; color: #ffffff; overflow: hidden; color: #333333; text-align:center; } .rmb_main .section2 .des{ font-size: 20px; margin:15px 0 30px; } .rmb_main .section2 .des:after{ content: ''; display: block; height: 4px; width: 24px; background-color: #2884f6; margin: 30px auto 0; } .rmb_main .section2 p{ font-size: 16px; line-height: 200%; text-align: justify; } .rmb_main .section3{ background: url("../images/rmb/bg3.jpg") no-repeat center; background-size: cover; height: 820px; color: #ffffff; overflow: hidden; } .rmb_main .section3{ background: url("../images/rmb/bg3.jpg") no-repeat center; background-size: cover; height: 820px; color: #ffffff; overflow: hidden; } .rmb_main .section3 .items{ margin-top: 40px; } .rmb_main .section3 .item{ float: left; width: calc((100% - 48px)/2); margin:12px; position: relative; height: 240px; z-index: 2; } .rmb_main .section3 .item:before{ content:''; height: 100%; width:100%; position: absolute; top: 10px; right: -10px; z-index: -1; border-top-left-radius: 56px; border-bottom-right-radius: 56px; background-color: #2884f6; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 0; } .rmb_main .section3 .item:hover:before{ opacity: .8; } .rmb_main .section3 .item .content{ height: 100%; width:100%; border-top-left-radius: 56px; border-bottom-right-radius: 56px; background-color: #ffffff; color: #333333; padding:0 56px ; display: flex; align-items: center; z-index: 99; } .rmb_main .section3 .item .dot,.rmb_main .section3 .item .txt{ display: inline-block; vertical-align: middle; } .rmb_main .section3 .item .txt{ width: calc(100% - 136px); margin-left: 40px; } .rmb_main .section3 .item .title{ font-size: 24px; margin-bottom: 30px; } .rmb_main .section3 .item p{ font-size: 16px; line-height: 200%; } .rmb_main .section4 .item{ float: left; width: calc((100% - 126px)/3); margin:12px; border:1px solid #e6e6e6; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .rmb_main .section4 .item:hover{ box-shadow: 0 5px 20px rgb(28, 158, 227, 30%); } .rmb_main .section4 .item img{ width:100%; } .rmb_main .section4 .item:hover:after{ content:''; width:100%; height:100%; display: block; background: url("../images/rmb/bg4.png") no-repeat center ; background-size: contain; z-index: 99; position: absolute; left: 0 ; top: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .rmb_main .section5 .item{ margin-bottom: 60px; } .rmb_main .section5 .item .bg{ position: absolute; height:60px; width:60px; background: url("../images/aigc/dot-3.jpg") no-repeat; left:-10px; top:-10px; z-index: -1; } .rmb_main .section5 .item:nth-child(2n) .fl{ float: right; } .rmb_main .section5 .item:nth-child(2n) .fr{ float: right; } .rmb_main .section5 .item:nth-child(2n) .bg{ left:calc(100% - 50px); } .rmb_main .section5 .items .fl{ width:50%; position: relative; } .rmb_main .section5 .items .fl img{ width: 100%; } .rmb_main .section5 .items .fr { width:calc(50% - 60px) } .rmb_main .section5 .items .fr .title{ font-size: 24px; margin:80px 0 30px; } .rmb_main .section5 .items .fr .desc{ line-height: 200%; font-size: 16px; padding-right: 56px; } .rmb_main .section5 .items .fr a{ border: 1px solid #2884f6; line-height: 46px; width:180px; border-radius: 5px; font-size: 16px; color:#2884f6 ; text-align: center; display: block; margin-top: 50px; display:none; } .rmb_main .section5 .items .fr a:hover{ color:#ffffff ; background: #2884f6; } @media screen and (max-width: 1800px){ .aigc_main .section3 .tabs .tab-content .item .fl{ padding-right:3vh; } .aigc_main .section3 .tabs .tab-content .item dt{ font-size:18px; } .aigc_main .section3 .tabs .tab-content .item:first-child dt{ margin: 10px 0 10px; padding-bottom: 10px; } } @media screen and (max-width: 1750px){ .aigc_main .section2 .tabs .tab-content .fr{ height:23vw; } } @media screen and (max-width: 1700px){ .aigc_main .section1 .text p br{ display: none; } .aigc_main .section2 .tabs .tab-content .dot{ margin: 40px 0 40px; } } @media screen and (max-width: 1600px){ .aigc_main .section4 .items .fr .title,.rmb_main .section5 .items .fr .title{ margin-top: 50px; } .rmb_main .section3 .item .title{ font-size: 18px; margin-bottom: 20px; } .rmb_main .section3 .item p{ font-size: 14px; } } @media screen and (max-width: 1400px){ .aigc_main .section2 .tabs .tab-content .dot{ margin: 20px 0 20px; } .aigc_main .section2 .tabs .tab-content .fr{ width:calc(50% - 30px); } .aigc_main .section3 .item{ width:calc((100% - 40px) / 2 ); } .aigc_main .section4 .items .fr .title,.rmb_main .section5 .items .fr .title{ margin-top: 20px; } .aigc_main .section4 .items .fr a,.rmb_main .section4 .items .fr a{ margin-top: 30px; } .rmb_main .section2 p br{ display: none; } .aigc_main .section3 .tabs .tab-content .item dt{ font-size:16px; } .aigc_main .section3 .tabs .tab-content .item dd{ font-size:14px; } } @media screen and (max-width: 1300px){ .aigc_main .section3 .item { width: 100%; max-width: unset; } .aigc_main .section4 .items .fr .title,.rmb_main .section5 .items .fr .title{ margin-top: 0px; font-size: 18px; } .rmb_main .section5 .items .fr{ width: calc(50% - 30px); } .rmb_main .section5 .items .fr .desc{ font-size: 14px; padding-right: 20px; } .aigc_main .section4 .items .fr a,.rmb_main .section5 .items .fr a{ margin-top: 20px; } .aigc_main .section2 .tabs .tab-content .dot{ width:50px; } .aigc_main .section3 .item{ margin:0; margin-bottom:10px; } .rmb_main .section3 .item .txt{ margin-left: 20px; width: calc(100% - 60px); } .rmb_main .section3 .item p{ line-height: 160%; } .rmb_main .section3 .item .content{ padding: 0 20px; } } @media screen and (max-width: 992px) { .index_main .section1 .txt_block{bottom:20vh} .index_main .section1 h3{font-size: 26px;} .index_main .section1 h4{font-size: 14px;} .aigc_main h3,.rmb_main h3{ margin-top: 50px; font-size: 24px; } .aigc_main .section1 .text p{ line-height: 180%; margin-top: 20px; text-align:justify; background:rgba(255,255,255,.6); padding:20px; border-radius:10px; border:1px solid #ebebeb; } .aigc_main .section2 .tabs .tab-content h4{ font-size: 16px; margin-top: 20px; } .aigc_main .section4 .item,.rmb_main .section5 .item{ margin-bottom: 20px; } .aigc_main .section4 .items .fl,.aigc_main .section4 .items .fr,.rmb_main .section5 .items .fl,.rmb_main .section5 .items .fr{ width:100%; } .aigc_main .section4 .items .fr .desc li{ background-position:0 5px; font-size: 14px; } .aigc_main .section4 .item .bg,.rmb_main .section5 .item .bg{ display: none } .aigc_main .section4 .items .fr a,.rmb_main .section5 .items .fr a{ margin:20px auto; line-height: 36px; width: 150px; font-size: 14px; } .aigc_main .section4 .items .fr .title,.rmb_main .section5 .items .fr .title{ text-align: center; margin: 20px 0; font-size: 18px; } .aigc_main .section4 .item:nth-child(2n) .fr{ padding-right:0; } .rmb_main .section4 .item { float: left; width: calc((100% - 26px) / 3); margin: 10px 10px 0; } .rmb_main .section4 .item:nth-child(1n){ margin-left: 0; } .rmb_main .section4 .item:nth-child(3n) { margin-right: 0; } .rmb_main .section3 .item{ width:100%; height: 150px; margin:8px 0; } .rmb_main .section3 .item .content{ border-radius:5px ; } .aigc_main .section3 .tabs .tab-content .item>div{ width:100%; } .aigc_main .section3 .tabs .tab-content .item .fl{ padding-right:0; margin-bottom:20px; } .aigc_main .section3 .tabs .tab-content .item dd{ height:auto !important; } } @media screen and (max-width: 768px) { .aigc_main .section2 .tabs .tab-title li{ width:auto; margin-bottom:10px; } .aigc_main .section2 .tabs .tab-content .fl,.aigc_main .section2 .tabs .tab-content .fr{ width:100%; } .aigc_main .section2 .tabs .tab-content .dot{ display: none; } .aigc_main .section2 .tabs .tab-content h4{ font-size: 16px; margin-top: 20px; } .aigc_main .section2 .tabs .tab-content .fr{ height:80vw; margin-top:20px; padding-right:10px; line-height:180%; } .aigc_main .section3 .item img{ max-width: unset; width:100%; } .aigc_main .section3 .item .nomal .txt { font-size: 18px; left: unset; bottom: 20px; text-align: center; width:100%; } .aigc_main .section3 .item .hover { display:none; } .aigc_main .section3 .item .nomal{ display:block !important; opacity:1 !important; } .aigc_main h3, .rmb_main h3{ font-size:20px; } .aigc_main .section2 .tabs .tab-title li{ padding:0 8px; font-size:12px; margin:0 0 10px 0; } .rmb_main .section4 .item:nth-child(1n), .rmb_main .section4 .item:nth-child(3n){ margin-left: 0; } .rmb_main .section4 .item:nth-child(3n){ margin-right: 10px; } .rmb_main .section4 .item:nth-child(2n) { margin-right: 0; } .rmb_main .section4 .item { float: left; width: calc((100% - 26px) / 2); margin: 10px 10px 0; } .rmb_main .section3 .item .title{ font-size: 16px; margin-bottom: 10px; } .rmb_main .section3 .item .txt{ width: calc(100% - 40px); margin-left: 0px; } .rmb_main .section3 .item .content{ padding:0 10px; } .rmb_main .section3 .item p{ font-size: 12px; } .rmb_main .section1{ height: 320px; } .rmb_main .section1 img{ display: none; } .rmb_main .section1 .txt .title{ font-size: 24px; } .rmb_main .section2{ background-size: cover; height: 420px; } .rmb_main .section2 .des:after{ margin-top: 10px; } .rmb_main .section2 .des{ margin: 15px 0 30px; } .rmb_main .section2 p{ font-size: 14px; } }