/* * style.css by 453883682@qq.com */ .banner{ position: relative; height: 100vh; max-height: 39.06vw;} .ban-swiper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-height: 39.06vw;} .ban-swiper .swiper-slide, .ban-swiper .swiper-wrapper { transform: translate3d(0px,0,0);} .ban-swiper .swiper-slide{ overflow: hidden; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;} .ban-img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;} .ban-img .img-bg{ width: 100%; height: 100%; transform: scale(1.1); transition: all 1s;} .ban-img .mobile{ display: none;} .ban-text{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 70px; z-index: 1;} .ban-tit{ line-height: 1.2; font-weight: 600; margin-bottom: .5rem;} .ban-swiper .swiper-slide-active .ban-img .img-bg{ transform: scale(1); transition: all 6s;} .ban-page{ position: absolute; left: 0; right: 0; bottom: .4rem; z-index: 2;} .ban-page .swiper-pagination{ text-align: center;} .ban-page .swiper-pagination-bullet{ position: relative; width: 40px; height: 3px; max-width: .6rem; max-height: .06rem; border-radius: 0; background-color: #FFFFFF; border: none; opacity: 1; margin: 0 .04rem;} .ban-page .swiper-pagination-bullet-active{ background-color: var(--main-color);} .ban-mouse{ position: relative; width: 16px; height: 20px; border: 2px solid #FFFFFF; border-radius: 6px; margin-left: auto;} .ban-mouse i{ display: block; width: 2px; height: 4px; background-color: #FFFFFF; position: absolute; left: 50%; margin-left: -1px; top: 15%; animation: inArrow 2s linear infinite;} .ban-page-num{ line-height: 1; margin-top: .3rem; font-family: 'DINPro-Bold';} .box-bg{ position: relative; background-color: #FFFFFF; overflow: hidden; z-index: 1;} .box1-bg{ position: relative; padding: .6rem 0; background-color: #F4F5F6; background: url(../image/box1-bg.png) center center #F4F5F6 no-repeat; background-size: cover;} .box1-bg.mobile .box1-video{ display: none;} .box1-video{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;} .box1-video video{ width: 100%; height: 100%; object-fit: cover;} .box1-video::before{ display: block; content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom left, rgba(255,255,255,0.8) 40%, transparent 60%, transparent 100%); } .box1-left{ width: 38%; padding-bottom: 2%;} .box1-btn{ width: 180px; line-height: 56px; border-radius: 6px; background-color: var(--main-color); text-align: center; color: #FFFFFF; margin: .15rem; transition: all .3s;} .box1-btn.border{ border: 1px solid rgba(20, 30, 40, .75); color: #141E28; background-color: transparent;} .box1-btn.border:hover{ border-color: var(--main-color); background-color: var(--main-color); color: #FFFFFF;} .box1-btn:hover{ transform: translateY(-3px); box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);} .box1-right{ width: 62%; max-width: 890px;} .box1-list{ margin: 0 -.15rem;} .box1-list li{ width: 50%; padding: .15rem;} .box1-link{ position: relative; display: block; height: 100%; background-color: #FFFFFF; border-radius: .1rem; padding: .1rem .34rem; overflow: hidden; transition: all .5s ease; z-index: 1;} .box1-title{ margin: .2rem 0;} .box1-con{ line-height: 1.6; -webkit-line-clamp: 4; height: 6.4em; margin: .2rem 0 .28rem;} .box1-more{ width: 120px; line-height: 38px; border-radius: 4px; border: 1px solid rgba(20, 30, 40, .34); margin: .2rem 0; transition: all .3s;} .box1-icon{ position: absolute; right: 0; bottom: 0; width: 180px; height: 180px; max-width: 1.8rem; max-height: 1.8rem; z-index: -1;} .ani-icon{ background-size: 100% auto;} .box1-link:hover{ box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);} .box1-link:hover .box1-more{ background-color: var(--main-color); color: #FFFFFF; border-color: var(--main-color); transform: translateY(-3px);} .box2-bg{ padding: .6rem 0; background-color: #FFFFFF;} .box2-box{ position: relative; border-radius: .2rem; background: linear-gradient(180deg, #0F0F33 0%, #2F3553 40%, #596889 100%); overflow: hidden; z-index: 1;} .box2-tab{ flex-shrink: 0; width: 200px; padding: .7rem 0; background: linear-gradient(180deg, #0F0F33 0%, #2F3553 40%, #596889 100%);} .box2-tab li{ position: relative; line-height: 26px; padding: .18rem .2rem .18rem .3rem; margin: .15rem 0; cursor: pointer; transition: all .3s; z-index: 1;} .box2-tab li::before, .box2-tab li::after{ position: absolute; left: 0; bottom: 0; display: block; content: ""; transition: all 0.3s; z-index: -1;} .box2-tab li::before{ width: 0; height: 100%; background-color: var(--main-color);} .box2-tab li::after{ width: 0; height: 100%; background-color: rgba(0,0,0,0.2);} .box2-tab li img{ max-width: 24px; margin-right: 6px; margin-top: -2px;} .box2-tab li.active::before{ top: 0; bottom: auto; width: 6px;} .box2-tab li.active::after{ width: 100%;} .box2-img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;} .box2-img li{ width: 100%; height: 100%; display: none;} .box2-img img{ width: 100%; height: 100%; object-fit: cover;} .box2-swiper{ flex: auto; overflow: hidden;} .box2-right{ position: relative; width: 65%; max-width: 560px; height: 100%; padding: .7rem .5rem; margin-left: auto; z-index: 1;} .box2-right::before{ display: block; content: ""; position: absolute; right: 0; top: 0; width: 120%; height: 100%; background: linear-gradient(to left,#0F0F33 0%, rgba(15, 15, 51, 0) 100%); z-index: -1;} .box2-title{ line-height: 1.2; margin: .4rem 0;} .box2-con{ height: 4.5em; line-height: 1.5; margin: .4rem 0;} .box2-line{ width: 100%; height: 1px; background-color: #FFFFFF; opacity: .2; margin: .5rem 0 .4rem;} .box2-logo{ list-style: none; margin: 0 -.1rem;} .box2-logo li{ width: 33.33%; padding: 0 .1rem; margin-bottom: .1rem;} .box2-logo li span{ display: block; padding-bottom: 50%; background-color: #FFFFFF; border-radius: 6px;} .box2-logo li span img{ position: absolute; left: 50%; top: 50%; max-width: 90%; max-height: 80%; transform: translate(-50%,-50%);} .box3-bg{ padding: .3rem 0 .6rem; background: url(../image/box3-bg.png) center bottom #FFFFFF no-repeat; background-size: 100% auto; overflow: hidden;} .box3-left{ flex-shrink: 0; width: 52%; max-width: 750px; margin-right: 2.7%;} .box3-title{ position: relative;} .box3-title::before{ display: block; content: ""; width: 103px; height: 103px; max-width: 1.1rem; max-height: 1.1rem; background: url(../image/box3-circle.png) center center no-repeat; background-size: contain; position: absolute; left: -.5rem; bottom: -.2rem; animation: zoomIn 5s linear infinite alternate;} .box3-text{ -webkit-line-clamp: 2; margin: .3rem 0;} .box3-list{ line-height: 1.6; margin: .2rem -.1rem;} .box3-list li{ width: 33.33%; padding: .1rem; margin-top: .2rem;} .box3-num{ line-height: 1.6;} .box3-list strong{ font-family: 'DINPro-Medium';} .box3-list span{ font-weight: bold; font-family: 'DINPro-Medium';} .box3-right{ width: 61.8%; max-width: 890px; margin-right: -17%;} .box3-right img{ width: 100%; height: auto;} .box4-bg{ overflow: hidden;} .box4-top{ padding: .6rem 0 0; background: url(../image/box4-bg.png) center .9rem no-repeat; overflow: hidden;} .box4-tab{ line-height: 30px;} .box4-tab li{ padding: 0 1rem;} .box4-tab li span{ position: relative; display: flex; align-items: center; justify-content: center; padding: 0 .12rem .2rem; cursor: pointer;} .box4-tab li span::before{ display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 4px; max-height: .04rem; background: var(--main-color); transition: all .3s;} .box4-tab li span i{ display: block; width: 30px; height: 20px; margin-right: .1rem; background: url(../image/box4-tag-icon.png) left center no-repeat; background-size: contain; max-width: .3rem; max-height: .2rem; width: 0; margin-right: 0; transition: all .3s;} .box4-tab li.active span::before{ left: 0; width: 100%;} .box4-tab li.active i{ width: 30px; margin-right: .1rem;} .box4-bot{ position: relative; padding: .5rem 0 15px; background-color: #F5F7FB;} .box4-bot::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45px; max-height: .5rem; background: linear-gradient(360deg, #F5F7FB 0%, #EBEEF5 100%);} .box4-bot .box-more{ margin: .4rem auto;} .box4-box{ position: relative; display: none;} .box4-box::before, .box4-box::after{ display: block; content: ""; position: absolute; top: 0; bottom: 0; width: 26%; height: 100%; z-index: 2;} .box4-box::before{ left: 0; background: linear-gradient(to right,#F5F7FB 15%, rgba(245, 247, 251, 0) 100%);} .box4-box::after{ right: 0; background: linear-gradient(to left,#F5F7FB 15%, rgba(245, 247, 251, 0) 100%);} .box4-swiper{ margin: .2rem 0;} .box4-swiper .swiper-container-free-mode .swiper-wrapper { -webkit-transition-timing-function: linear; -ms-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; } .box4-swiper .swiper-slide{ width: 164px; height: 82px;} .box4-link{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; background-color: #FFFFFF;} .box4-link img{ max-width: 90%; max-height: 80%;} .box5-bg{ padding: .4rem 0 0;} .box5-bg .box-more{ margin: .4rem auto;} .box5-box{ margin: .4rem 0;} .box5-left{ width: 56.94%; padding: .3rem; box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1);} .box5-list{ margin: 0 -.25rem;} .box5-list li{ width: 50%; padding: 0 .25rem;} .box5-list li + li{ border-left: 1px solid #DCDCDC;} .box5-img{ height: 220px; overflow: hidden;} .box5-img img{ width: 100%; height: 100%; object-fit: cover; transition: all 1s;} .box5-text{ overflow: hidden;} .box5-title{ margin: .2rem 0; transition: all .4s;} .box5-con{ height: 3.2em; line-height: 1.6; -webkit-line-clamp: 2; margin: .2rem 0;} .box5-info i{ font-weight: bold;} .box5-info .time{ color: #878787;} .box5-info .time i{ margin-right: 5px;} .box5-link:hover .box5-img img{ transform: scale(1.05);} .box5-link:hover .box5-title{ color: var(--main-color);} .box5-right{ width: 41.39%;} .box5-list2{ margin: 0 -.1rem;} .box5-list2 li{ height: 200px; padding: 0 .1rem; margin-bottom: .2rem;} .box5-list2 li:nth-child(1){ width: 60.05%;} .box5-list2 li:nth-child(2){ width: 39.95%;} .box5-list2 li:nth-child(3){ width: 100%; height: 260px; margin-bottom: 0;} .box5-list2 li .box5-link{ height: 100%;} .box5-img2{ height: 100%;} .box5-img2 img{ width: 100%; height: 100%; object-fit: cover; transition: all 1s;} .box5-tag{ display: flex; align-items: center; justify-content: center; position: absolute; left: .2rem; top: .2rem; font-size: 14px; line-height: 2; padding: 0 .1rem; border-radius: 5px; background-color: var(--main-color);} .box5-tag i{ display: block; width: 14px; height: 14px; background: url(../image/icon-video.png) center center no-repeat; background-size: contain; margin-right: 5px;} .box5-title2{ position: absolute; left: 0; top: 0; width: 100%; font-size: 12px; line-height: 1.6; padding: .2rem; padding-left: 12%; font-weight: bold;} .box5-title3{ position: absolute; left: 0; bottom: 0; right: 0; line-height: 30px; padding: .15rem .34rem; background-color: rgba(20, 30, 40, 0.6); font-weight: normal;} .box5-link:hover .box5-img2 img{ transform: scale(1.05);} .box5-swiper{ position: relative;} .box5-swiper .swiper-slide{ position: relative; background-color: #000000; overflow: hidden; z-index: 1;} .box5-pic{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;} .box5-pic::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);} .box5-item{ width: 80%; max-width: 660px; min-height: 7.5rem; padding: .3rem 0; margin-left: 11%;} .box5-type{ display: block; min-width: 1.04rem; line-height: calc(24px + .12rem); border: 1px solid #FFFFFF; border-radius: .08rem; opacity: .9; text-align: center; padding: 0 .2rem; margin: .15rem 0; transition: all .4s;} .box5-type:hover{ background-color: var(--main-color); border-color: var(--main-color); opacity: 1;} .box5-name{ margin: .15rem 0; -webkit-line-clamp: 2; transition: all .3s;} .box5-item .box5-con{ margin: .15rem 0; opacity: .8;} .box5-more{ display: inline-flex; align-items: center; margin: .15rem 0;} .box5-more i{ font-size: 70%; font-weight: bold; transition: all .3s;} .box5-more:hover i{ margin-left: .1rem;} .box5-btn{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; z-index: 1;} .box5-btn .container{ position: relative;} .box5-btn i{ display: block; transition: all .4s;} .box5-prev{ position: absolute; right: 100%; cursor: pointer; opacity: .6; font-weight: bold; border-radius: .1rem; transition: all .4s;} .box5-next{ position: absolute; left: 100%; cursor: pointer; opacity: .6; font-weight: bold; border-radius: .1rem; transition: all .4s;} .box5-prev:hover, .box5-next:hover{ background-color: var(--main-color); color: #FFFFFF; opacity: 1;} .box5-prev:hover i, .box5-next:hover i{ transform: scale(0.6);} .box6-bg{ padding: .7rem 0; background: url(../image/box6-bg.png) center center no-repeat; background-size: cover;} .box6-bg .box-more{ margin: .3rem auto 0;} /* HPC 超算云 */ .HPC-bg{ position: relative; padding: .7rem 0; background-color: #FFFFFF; overflow: hidden;} .HPC-bg:nth-child(2n){ background-color: #F6F9FE;} .HPC1-list{ margin: .05rem -.15rem .25rem;} .HPC1-list li{ width: 50%; padding: .15rem;} .HPC1-item{ display: flex; align-items: center; height: 100%; padding: .3rem .5rem; background: #FCFDFF; border: 1px solid #D1D4DC; border-radius: .15rem; transition: all .6s;} .HPC1-icon{ flex-shrink: 0; width: 84px; height: 84px; max-width: .84rem; max-height: .84rem; margin-right: .4rem;} .HPC1-icon img{ width: 100%; height: 100%; object-fit: contain;} .HPC1-text{ flex: auto; overflow: hidden;} .HPC1-title{ line-height: 1.2; margin-bottom: .1rem;} .HPC1-con{ -webkit-line-clamp: 6;} .HPC1-item:hover{ box-shadow: 0 3px 6px rgba(102, 102, 102, .26);} .HPC1-item:hover .HPC1-icon{ animation: swing 2s linear;} .HPC2-list{ margin: .6rem 0;} .HPC2-list li{ position: relative; flex: 1; padding: .2rem 0; z-index: 1;} .HPC2-list li:first-child .HPC2-item{ border-top-left-radius: .1rem; border-bottom-left-radius: .1rem;} .HPC2-list li:last-child .HPC2-item{ border-top-right-radius: .1rem; border-bottom-right-radius: .1rem;} .HPC2-item{ height: 100%; padding: 1px .3rem; background-color: #FFFFFF; box-shadow: 0px .03rem .15rem rgba(0,0,0,0.12); overflow: hidden; transition: all 0.6s;} .HPC2-icon{ width: 90px; height: 90px; max-width: .9rem; max-height: .9rem; margin: .3rem auto;} .HPC2-icon img{ width: 100%; height: 100%; object-fit: contain;} .HPC2-icon img:nth-child(1){ display: block;} .HPC2-icon img:nth-child(2){ display: none;} .HPC2-title{ line-height: 1.1; margin: .3rem 0;} .HPC2-con{ display: block; max-width: 370px; line-height: 1.6; margin: .3rem auto;} .HPC2-mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--main-color); border-radius: .1rem; transform: rotateX(90deg); transition: all 1s ease-out; z-index: -1;} .HPC2-list li.active .HPC2-item{ color: #FFFFFF; background-color: transparent; box-shadow: none;} .HPC2-list li.active .HPC2-icon img:nth-child(1){ display: none;} .HPC2-list li.active .HPC2-icon img:nth-child(2){ display: block; animation: pulse 1s linear 1;} .HPC2-list li.active .HPC2-title{ color: #FFFFFF;} .HPC2-list li.active .HPC2-mask{ transform: rotateX(0);} .HPC3-top{ margin: .48rem 0 .3rem; text-align: center;} .HPC3-tab{ position: relative; display: inline-flex; line-height: 2; border: 1px solid #D7DCE8; border-radius: 25px; overflow: hidden; z-index: 1;} .HPC3-tab li{ cursor: pointer;} .HPC3-tab li span{ display: block; min-width: 132px; padding: .07rem 0; border-radius: 25px;} .HPC3-tab li.active span{ color: #FFFFFF;} .HPC3-tab-mask{ position: absolute; left: 0; top: 0; width: 50%; height: 100%; border-radius: 25px; background-color: var(--main-color); z-index: -1; transition: all .3s;} .HPC3-bot{ margin: .5rem 0 .3rem;} .HPC3-item{ display: none;} .HPC3-item p img{ max-width: 100% !important; height: auto;} .HPC3-table{ width: 100%; line-height: calc(26px + .3rem); text-align: center;} .HPC3-table thead{ background: linear-gradient(90deg, #FF727B 0%, #DF232E 100%);} .HPC3-table th{ font-weight: normal;} .HPC3-table tbody tr:nth-child(2n){ background-color: #F5F5F5} .HPC3-table td{ line-height: 22px; padding: .14rem .1rem;} .HPC3-btn{ display: block; margin: .3rem auto; transition: all .3s;} .HPC3-btn:hover{ box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);} .HPC4-box{ margin: 0 -.5rem;} .HPC4-item{ width: 50%; padding: 0 .5rem;} .HPC4-list{ margin: 0 -.15rem;} .HPC4-list li{ width: 50%; padding: .15rem;} .HPC4-link{ display: block; padding: .26rem .2rem; border-radius: .1rem; background: url(../image/HPC4-bg.png) center center no-repeat; background-size: cover; overflow: hidden; transition: all .3s linear;} .HPC4-img{ width: 80px; height: 80px; max-width: .9rem; max-height: .9rem; margin: .3rem auto; transition: all .3s linear;} .HPC4-title{ line-height: 1.2; margin: .35rem 0;} .HPC4-btn{ position: relative; max-width: 100%; width: 220px; line-height: calc(28px + .2rem); border-radius: .1rem; border: 1px solid #222222; margin: .3rem auto; overflow: hidden; z-index: 1;} .HPC4-btn::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: linear-gradient(to top,#C2E1FF,#FFB7BB); transition: all .3s linear; z-index: -1;} .HPC4-link:hover{ transform: translateY(-5px);} .HPC4-link:hover .HPC4-img{ transform: scale(0.95);} .HPC4-link:hover .HPC4-btn::before{ width: 100%;} .HPC5-swiper{ position: relative;} .HPC5-swiper .swiper-container{ width: auto; margin: 0 -.22rem; padding: .2rem 0;} .HPC5-swiper .swiper-slide{ padding: 0 .22rem;} .HPC5-link{ position: relative; display: block; padding: 0 .28rem; background-color: #FFFFFF; box-shadow: 0px 0px .2rem rgba(23,54,103,0.12); border-radius: .15rem; overflow: hidden;} .HPC5-time{ position: absolute; left: 0; top: 0; width: 80px; line-height: calc(26px + .1rem); background-color: var(--main-color); border-radius: .15rem 0px .15rem 0px;} .HPC5-title{ line-height: 1.6; margin: .4rem 0 .1rem; transition: all .3s;} .HPC5-img{ padding-bottom: 67%;} .HPC5-img .img-bg{ background-size: contain;} .HPC5-text{ position: relative; padding: 0 .4rem; margin: .36rem 0;} .HPC5-text::before, .HPC5-text::after{ display: block; content: ""; width: 37px; height: 99px; max-width: .4rem; max-height: 1rem; position: absolute; top: 50%; transform: translateY(-50%);} .HPC5-text::before{ left: 0; background: url(../image/HPC5-leaf-left.png) left center no-repeat; background-size: contain;} .HPC5-text::after{ right: 0; background: url(../image/HPC5-leaf-right.png) right center no-repeat; background-size: contain;} .HPC5-con{ color: #353535; line-height: 1.6; height: 3.2em; -webkit-line-clamp: 2;} .HPC5-des{ display: flex; flex-direction: column; justify-content: center; min-height: 100%;} .HPC5-ranking{ max-width: 90%; line-height: 1.6; border-top: 1px solid #EBEBEB; margin: .1rem auto 0; padding: .1rem 0 0;} .HPC5-link:hover .HPC5-title{ color: var(--main-color);} .HPC5-link:hover .img-bg{ transform: scale(1.05);} /* AI智算云 */ .AI1-video{ position: relative; border-radius: .2rem; margin: 0 auto 1rem; overflow: hidden;} .AI1-video video{ width: 100%; height: auto; object-fit: cover; opacity: 0;} .AI1-mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: .3rem; z-index: 2; cursor: pointer;} .AI1-mask .img-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;} .AI1-play{ width: 92px; height: 92px; max-width: 1rem; max-height: 1rem; background: url(../image/AI1-play.png) center center no-repeat; background-size: contain; transition: all 1s linear;} .AI1-btn{ display: block; width: fit-content; min-width: 1.27rem; line-height: calc(24px + .16rem); padding: 0 .25rem; background: linear-gradient(90deg, #DF232E 0%, #FF6871 100%); border-radius: 20px;} .AI1-mask:hover .AI1-play{ transform: scale(1.1);} .AI1-box{ position: relative; padding: .4rem .8rem; padding-right: 0 !important; margin: .5rem 0 .4rem; overflow: hidden; z-index: 1;} .AI1-box::before{ display: block; content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 65.972%; background: url(../image/AI1-bg.png) center center no-repeat; background-size: cover; z-index: -1;} .AI1-left{ flex-shrink: 0; width: 47.1%; background-color: #FFFFFF; max-width: 640px; padding: .6rem; line-height: 1.5; max-height: 420px; overflow-y: auto;} .AI1-right{ flex: auto; max-height: 420px; padding: 15px; background-color: #DCE0E8; overflow: hidden;} .AI1-right img{ width: 100%; height: 100%; object-fit: contain; background-color: #FFFFFF;} .AI2-swiper{ margin: .3rem 0;} .AI2-swiper .swiper-container{ width: calc(100% + 0.18rem); padding: .2rem 0; margin-left: -.09rem; margin-right: -.09rem;} .AI2-swiper .swiper-slide{ height: auto; padding: 0 0.09rem;} .AI2-link{ height: 100%; padding: .2rem; background: url(../image/AI2-bg.png) center center #F6F9FF no-repeat; background-size: cover; border-radius: .15rem; overflow: hidden; transition: all .3s linear;} .AI2-icon{ width: 90px; height: 90px; max-width: 1rem; max-height: 1rem; margin: .2rem auto;} .AI2-title{ line-height: 1; margin: .2rem 0;} .AI2-con{ line-height: 1.625; margin: .2rem auto; -webkit-line-clamp: 5;} .AI2-link:hover{ box-shadow: 0 3px 6px rgba(102, 102, 102, .26); transform: translateY(-5px);} .AI2-link:hover .AI2-icon img{ animation: swing 1s linear;} .AI3-list{ margin: .3rem -.1rem;} .AI3-list li{ width: 50%; padding: .1rem;} .AI3-item{ display: flex; height: 100%; padding: .28rem .44rem; border: 1px solid #E3E5E9; transition: all .6s;} .AI3-icon{ flex-shrink: 0; width: 104px; height: 104px; max-width: 1.04rem; max-height: 1.04rem; margin-right: .32rem; transition: all .5s linear;} .AI3-icon img{ width: 100%; height: 100%; object-fit: contain;} .AI3-text{ flex: auto; overflow: hidden;} .AI3-title{ line-height: 1.1; margin-bottom: .1rem; transition: all .3s linear;} .AI3-con{ line-height: 1.5;} .AI3-item:hover{ box-shadow: 0 3px 6px rgba(102, 102, 102, .26); border-color: var(--main-color)} .AI3-item:hover .HPC1-icon{ transform: rotate(360deg); transition: all 1s linear;} .AI3-item:hover .AI3-icon{ transform: translateY(-5px);} .AI3-item:hover .AI3-title{ color: var(--main-color);} .AI4-tab{ margin: .4rem 0; border-bottom: 1px solid #CDD5E2;} .AI4-tab li{ line-height: 24px; padding: 0 .3rem;} .AI4-tab li span{ position: relative; display: block; padding: .22rem 0; margin-bottom: -1px; cursor: pointer; transition: all .5s;} .AI4-tab li span::before{ display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 4px; max-height: .04rem; background-color: var(--main-color); transition: all .5s;} .AI4-tab li span:hover{ color: var(--main-color);} .AI4-tab li.active span{ color: var(--main-color);} .AI4-tab li.active span::before{ left: 0; width: 100%;} .AI4-item{ position: relative; padding-left: 20.83%; overflow: hidden; display: none;} .AI4-item hr{ height: 0; border: none; border-top: 1px solid #D5DBE5; margin: .3rem 0;} .AI4-img{ position: absolute; left: 0; top: 0; width: 20.83%; height: 100%;} .AI4-text{ max-height: 6.7rem; padding: .4rem .7rem; background-color: #FFFFFF; overflow-y: auto;} .AI4-title{ line-height: 1.2; margin-bottom: .1rem;} .AI4-des{ margin: .1rem 0;} .AI4-list{ margin: .15rem -.35rem;} .AI4-list li{ width: 50%; padding: .15rem .35rem;} .AI4-name{ line-height: 24px; margin: .14rem 0;} .AI4-name img{ width: auto; height: 24px; margin-right: 10px; vertical-align: top;} .AI4-h5{ line-height: 1.1; margin-bottom: .15rem;} /* CAX Cloud 设计仿真云 */ .CAX-des{ max-width: 1224px; margin: .5rem auto;} .CAX-img{ margin: .5rem auto;} .CAX-img img{ display: block; max-width: 100% !important; height: auto !important; margin: 0 auto;} .CAX3-box{ position: relative; margin: .4rem auto; z-index: 1;} .CAX3-img{ position: relative; width: 48%; max-width: 670px; padding: 5.2%; margin: 0 auto;} .CAX3-img::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px dotted #F35A63; background-color: rgba(255, 255, 255, .86); z-index: -1; animation: aniCircle2 100s linear infinite;} .CAX3-img img{ width: 100%;} .CAX3-list{ position: absolute; top: 50%; left: 50%; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; transform: translate(-50%,-50%);} .CAX3-list li{ width: 34%; margin: .35rem 0;} .CAX3-item{ display: flex; align-items: center;} .CAX3-icon{ flex-shrink: 0; width: 124px; height: 124px; max-width: 1.24rem; max-height: 1.24rem; border: 2px dotted #B8BCC7; background: linear-gradient(180deg, #EFF2F9 0%, #FFFFFF 100%); border-radius: 50%; transition: all .3s;} .CAX3-icon img{ max-width: 50%; max-height: 50%;} .CAX3-icon img.white{ display: none;} .CAX3-text{ flex: auto; overflow: hidden; margin-left: .2rem;} .CAX3-list li:nth-child(2n + 1) .CAX3-item{ flex-direction: row-reverse;} .CAX3-list li:nth-child(2n + 1) .CAX3-text{ text-align: right; margin-left: 0 !important; margin-right: .2rem;} .CAX3-list li:nth-child(4n) .CAX3-icon{ margin-left: 10%;} .CAX3-list li:nth-child(4n - 1) .CAX3-icon{ margin-right: 10%;} .CAX3-hover{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 30%; max-width: 410px; height: 60%; max-height: 300px; padding: .15rem .2rem .2rem; background: #FFFFFF; box-shadow: 0px 3px 15px rgba(0,0,0,0.16); border-radius: .18rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden;} .CAX3-title{ flex-shrink: 0; margin: .1rem;} .cax3-con{ flex: auto; line-height: 1.6; padding: 0 .2rem; overflow-y: auto;} .CAX3-list li.active .CAX3-icon{ background: var(--main-color); border-color: var(--main-color); border-style: solid;} .CAX3-list li.active .CAX3-icon img.black{ display: none;} .CAX3-list li.active .CAX3-icon img.white{ display: block; animation: pulse 1s linear 1;} .CAX3-list li.active .CAX3-hover{ opacity: 1; visibility: visible; animation: fadeIn .3s linear 1;} .CAX4-list .AI3-item{ background-color: #FFFFFF; border-color: #FFFFFF;} .CAX4-bg .AI2-con{ text-align: left;} .CAX5-swiper{ margin: .5rem 0;} .CAX5-swiper .swiper-container{ padding: 5px 0; margin-left: -.14rem; margin-right: -.14rem;} .CAX5-swiper .swiper-slide{ padding: 0 .14rem;} .CAX5-link{ position: relative; display: block; padding: .4rem; background-color: #F6F9FE; border-radius: .15rem; transition: all .4s;} .CAX5-title{ position: relative; line-height: 2.5; transition: all .4s;} .CAX5-title span{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: .08; line-height: 1; transition: all .5s linear;} .CAX5-con{ margin: .2rem 0; line-height: 24px; height: 120px; -webkit-line-clamp: 5;} .CAX5-more{ width: fit-content; line-height: 38px; background-color: var(--main-color); border-radius: 6px; padding: 0 .15rem;} .CAX5-more i{ margin-left: .08rem;} .CAX5-icon{ position: absolute; right: .4rem; bottom: .15rem; max-width: 1.1rem;} .CAX5-icon img{ max-width: 100%; height: auto;} .CAX5-link:hover{ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transform: translateY(-5px);} .CAX5-link:hover .CAX5-title span{ position: static; display: inline-block; vertical-align: middle;transform: scale(0.7); margin-top: -2px;} .CAX5-link:hover .CAX5-title{ color: var(--main-color);} .CAX5-link:hover .CAX5-icon img{ animation: swing 8s linear infinite;} .CAX5-swiper .swiper-slide:nth-child(1) .CAX5-link:hover .CAX5-icon img{ animation: aniCircle2 8s linear infinite; transform-origin: center center;} .CAX-detail{ font-size: 16px; line-height: 1.625; padding-right: 10px;} .CAX-detail img, .CAX-detail p img{ display: block; max-width: 100% !important; height: auto !important; margin: .2rem auto;} .CAX-detail-h2{ font-size: 24px; line-height: 1.1; margin: .3rem 0;} .CAX-detail-h2 span{ position: relative; display: inline-block; z-index: 1;} .CAX-detail-h2 span::after{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: .1rem; background: linear-gradient(90deg, #DF232E 0%, rgba(223,35,46,0) 100%); border-radius: .1rem; z-index: -1;} .CAX-detail-list{} .CAX-detail-list li{ width: 48%; max-width: 456px; margin-bottom: .24rem;} .CAX-detail-icon{ flex-shrink: 0; width: 66px; height: 66px; max-width: .66rem; max-height: .66rem; margin-right: .2rem;} .CAX-detail-icon img{ margin: 0 auto;} .CAX-detail-text{ flex: auto; overflow: hidden;} .CAX-detail-info{ padding: .25rem .3rem; margin: .4rem 0; background-color: #F6F9FE;} .CAX-detail-info .left{ flex-shrink: 0; line-height: 1.4; text-align: center;} .CAX-detail-info .right{ flex: auto;} .CAX-detail-info .right p span{ display: inline-block; vertical-align: middle; min-width: 140px; margin-right: .15rem;} .CAX-detail-info .right p span:last-child{ margin-right: 0;} .CAX-detail-info .line{ width: 1px; min-height: .6rem; background-color: #C8C8C8; margin: 0 .3rem;} .CAX-circle-list{ justify-content: center; text-align: center; margin: .2rem auto; max-width: 900px;} .CAX-circle-list li{ width: 25%; padding: .1rem;} .CAX-circle-list .circle{ width: 100%; max-width: 120px; height: auto;} .iframe-bg{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index: 10; opacity: 0; visibility: hidden; transition: all .3s;} .iframe-box{ position: relative; width: 1080px; max-width: 90%; padding: .2rem .3rem; background-color: #FFFFFF; border: 1px solid #707070; border-radius: .12rem; margin: 0 auto;} .iframe-close{ position: absolute; top: .2rem; right: .2rem; width: 20px; height: 20px; max-width: .32rem; max-height: .32rem; background: url(../image/iframe-close@2x.png) center center no-repeat; background-size: contain; display: block; cursor: pointer;} .iframe-close:hover{ transform: rotate(90deg); transition: all 1s;} .iframe-title{ line-height: 1.6; padding: .2rem 0; margin: 0 0 .15rem; border-bottom: 1px solid #EEEEEE;} .iframe-title span{ display: none;} #iframe{ width: 100%; max-height: 65vh; min-height: 50vh; margin: .2rem 0;} .iframe-bg.open{ opacity: 1; visibility: visible; transition: all .3s linear .2s;} /* DevOps */ .DevOps1-list{ margin: .1rem -.1rem;} .DevOps1-list li{ width: 50%; padding: .1rem;} .DevOps1-item{ padding: .1rem .5rem; background: url(../image/DevOps1-bg.png) center center no-repeat; background-size: cover; transition: all .5s linear;} .DevOps1-text{ flex: auto; max-width: 320px; overflow: hidden;} .DevOps1-icon{ flex-shrink: 0; width: 135px; height: 163px; max-width: 1.35rem; max-height: 1.63rem; margin: 0 .1rem; margin-left: 5%; perspective: 300px; transform-style: preserve-3d; transition: 0.6s;} .DevOps1-item:hover{ box-shadow: 0 .04rem .1rem rgba(0, 0, 0, 0.1);} .DevOps1-item:hover .DevOps1-icon img{ transform: rotateY(360deg); transition: all .6s linear;} .DevOps2-list{ height: 430px; max-height: 5.8rem; margin: .4rem -2px;} .DevOps2-list li{ flex: 1; height: 100%; padding: 0 2px; transition: all 0.6s ease 0s;} .DevOps2-item{ position: relative; height: 100%; overflow: hidden;} .DevOps2-img{ position: relative; height: 100%; overflow: hidden;} .DevOps2-img .img-bg{ height: 100%;} .DevOps2-img::after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; opacity: .5; transition: all .3s;} .DevOps2-text{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: .2rem;} .DevOps2-icon{ width: 62px; height: 62px; max-width: .62rem; max-height: .62rem; margin: .1rem auto;} .DevOps2-title{ width: 100%; line-height: 1.6; margin: .1rem auto; text-align: center;} .DevOps2-hover{ position: absolute; left: 0; bottom: 0; width: 100%; padding: .2rem .4rem; z-index: 1; opacity: 0; visibility: hidden; transform: translateY(150%); transition: all .3s;} .DevOps2-hover::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 150%; background: linear-gradient(180deg, rgba(223,35,46,0) 0%, #DF232E 100%); z-index: -1;} .DevOps2-name{ display: flex; align-items: center; line-height: 1.1; margin: 0 0 .1rem;} .DevOps2-name img{ width: 28px; max-width: .28rem; margin-right: .08rem;} .DevOps2-list li.active{ flex: 2.75; max-width: none;} .DevOps2-list li.active .DevOps2-img::after{ opacity: 0;} .DevOps2-list li.active .DevOps2-text{ opacity: 0; visibility: hidden; transform: scale(0.5); transition: all .3s linear;} .DevOps2-list li.active .DevOps2-hover{ opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.6s ease 0s, transform 1s ease 0.2s, opacity 1s ease 0.2s;} /* intelligent */ .intelligent1-swiper .swiper-container{ width: calc(100% + .22rem); margin-left: -.11rem; margin-right: -.11rem;} .intelligent1-swiper .swiper-slide{ height: auto; padding: 0 .11rem 5px; padding-top: .5rem;} .intelligent1-item{ height: 100%; padding: 1px .3rem .1rem; background-color: #F6F9FE; border-radius: .1rem; transition: all .3s;} .intelligent1-icon{ position: relative; width: 96px; height: 96px; max-width: 1rem; max-height: 1rem; margin: -.5rem auto 0; background-color: #DF232E; border-radius: 50%; transition: all .5s;} .intelligent1-text{ max-width: 170px; margin: .4rem auto; text-align: center;} .intelligent1-item:hover{ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);} .intelligent1-item:hover .intelligent1-icon{ border-radius: 20%;} .intelligent2-bg .DevOps1-item{ background: url(../image/intelligent2-bg.png) right center no-repeat; background-size: cover;} .intelligent2-bg .DevOps1-text{ max-width: 334px;} .intelligent2-bg .DevOps1-icon{ width: 126px; height: 126px; max-width: 1.26rem; max-height: 1.26rem;} .intelligent4-box{ margin: .5rem 0;} .intelligent4-left{ width: 45%; max-width: 620px;} .intelligent4-item{ line-height: 26px; padding: .2rem .5rem; background-color: #FFFFFF; margin: .16rem 0;} .intelligent4-item p{ position: relative; padding-left: 12px;} .intelligent4-item p::before{ display: block; content: ""; width: 4px; height: 4px; background-color: #353535; border-radius: 50%; position: absolute; left: 0; top: 11px;} .intelligent4-title{ line-height: 1.2; margin: .1rem 0;} .intelligent4-right{ width: 51.67%;} .intelligent4-right img{ width: 100%; height: auto;} .intelligent5-box{ margin: .7rem 0;} .intelligent5-left{ flex-shrink: 0; width: 29.86%;} .intelligent5-left img{ width: 100%;} .intelligent5-arrow{ flex-shrink: 0; margin: 3%; width: 2.7%;} .intelligent5-arrow img{ width: 100%; animation: fadeInLeft 2s linear infinite;} .intelligent5-right{ flex: auto;} .intelligent5-top-list{ margin: 0 -.2rem;} .intelligent5-top-list li{ position: relative; width: 25%; padding: .18rem .2rem;} .intelligent5-top-list li::before{ display: block; content: ""; width: 16px; height: 16px; max-width: .16rem; max-height: .16rem; background: url(../image/intelligent5-arrow-black.png) center center no-repeat; background-size: contain; position: absolute; left: 100%; top: calc(.4rem + 2px); transform: translateX(-50%);} .intelligent5-top-list li:last-child::before, .intelligent5-top-list li:nth-child(4n)::before{ display: none;} .intelligent5-top-item{ position: relative; height: 100%; padding: .1rem .24rem; border: 1px solid #E1E4E9;} .intelligent5-title{ color: #373737; line-height: 1.2; padding: .1rem 0; border-bottom: 1px solid #E6E9F2;} .intelligent5-con{ line-height: 1.7; margin: .15rem 0} .intelligent5-bot-list{ padding: .15rem .3rem; border: 1px solid #E1E4E9;} .intelligent5-bot-list li{ width: 33.33%; padding: 0 .35rem;} .intelligent5-icon{ width: 42px; height: 42px; max-width: .42rem; max-height: .42rem; margin: .1rem auto;} .intelligent5-bg .AI2-link{ background-image: url(../image/intelligent5-bg.png);} .intelligent5-bg .AI2-con{ max-width: 380px; margin-left: auto; margin-right: auto;} .intelligent6-bg{ background: url(../image/intelligent6-bg.png) center center no-repeat; background-size: cover;} .intelligent6-swiper{ margin: .5rem -.24rem;} .intelligent6-swiper .swiper-slide{ height: auto; padding: 0 .24rem;} .intelligent6-item{ height: 100%; padding: .2rem; border: 1px solid rgba(255, 217, 154, 0.47); background: linear-gradient(156deg, rgba(243,203,133,0.65) 0%, rgba(1,7,15,0.4) 60%); border-radius: .1rem;} .intelligent6-icon{ width: 80px; height: 80px; max-width: .8rem; max-height: .8rem; margin: .15rem auto; transition: all .5s;} .intelligent6-text{ line-height: 1.6; margin: .2rem auto;} .intelligent6-item:hover .intelligent6-icon{ transform: scaleX(-1)} .intelligent6-title{ position: relative; margin: .3rem 0; overflow: hidden;} .intelligent6-title span{ display: block; padding: 0 .2rem;} .intelligent6-title i{ position: relative; display: block; width: 14px; height: 14px; max-width: .2rem; max-height: .2rem; background: url(../image/intelligent6-block.png) center center no-repeat; background-size: contain;} .intelligent6-title i::before{ display: block; content: ""; width: 50vw; max-width: 3rem; height: 2px; position: absolute; top: 50%; margin-top: -1px;} .intelligent6-title i:first-child::before{ right: 100%; margin-right: -1px; background: linear-gradient(to right,transparent,rgba(243, 203, 133, .7));} .intelligent6-title i:last-child::before{ left: 100%; margin-left: -1px; background: linear-gradient(to left,transparent,rgba(243, 203, 133, .7));} .intelligent6-bot{ line-height: 22px; margin: .3rem 0; padding: .18rem .2rem; background-color: rgba(255, 255, 255, .16); border-radius: .1rem;} .intelligent6-bot p{ position: relative; padding-left: 15px; margin: .1rem;} .intelligent6-bot p::before{ position: absolute; left: 0; top: 7px; display: block; content: ""; width: 6px; height: 6px; background-color: #E2C18C; transform: rotate(45deg);} .intelligent7-list{ margin: .5rem 0;} .intelligent7-list li{ margin: .4rem 0; flex-direction: row-reverse; border: 1px solid #DFDFDF; border-radius: .1rem; overflow: hidden;} .intelligent7-img{ padding: .3rem; flex-shrink: 0; width: 68.89%;} .intelligent7-img img{ max-width: 100%; max-height: 100%;} .intelligent7-text{ flex: auto; padding: .3rem 3.5%; background-color: #FCFDFE; border-right: 1px solid #DFDFDF; overflow: hidden;} .intelligent7-title{ margin: .3rem 0;} .intelligent7-con{ line-height: 1.6;} .intelligent7-con strong{ color: #333333;} /* ParaCloud */ .ParaCloud1-swiper{ margin: .5rem 0;} .ParaCloud1-swiper .swiper-slide{ height: auto;} .ParaCloud1-item{ height: 100%; border: 1px solid #DBDFE8; padding: .1rem;} .ParaCloud1-title{ line-height: 26px; padding: .15rem; background-color: rgba(223, 35, 46, .05);} .ParaCloud1-img{ position: relative; height: 0; padding-bottom: 50.9%;} .ParaCloud1-img img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 90%; max-height: 90%;} .ParaCloud2-box{ margin: .5rem 0;} .ParaCloud2-img{ position: relative; flex-shrink: 0; width: 65%; padding: .24rem; background-color: #FFFFFF; box-shadow: 0px .03rem .15rem rgba(0,0,0,0.1); border-radius: .3rem; z-index: 1;} .ParaCloud2-img img{ width: 100%; height: auto; min-height: 4.78rem; object-fit: contain;} .ParaCloud2-text{ width: 40%; display: flex; flex-direction: column; justify-content: center; min-height: 4.73rem; padding: .3rem 4.5% .3rem 9%; margin-left: -5%; border-radius: .3rem; background-color: #F6F9FE;} .ParaCloud2-title{ line-height: 1.8; margin: 0 0 .2rem;} .ParaCloud2-con{ line-height: 22px;} .ParaCloud2-con h4{ font-size: 125%; color: #222222; line-height: 1.6; margin: .1rem 0;} .ParaCloud2-con p{ position: relative; padding-left: 12px; margin: 5px 0;} .ParaCloud2-con p::before{ display: block; content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background-color: #353535; border-radius: 50%;} .ParaCloud2-con p.active{ color: var(--main-color); font-weight: bold;} .ParaCloud2-bg:nth-child(2n) .ParaCloud2-box{ flex-direction: row-reverse;} .ParaCloud2-bg:nth-child(2n) .ParaCloud2-text{ background-color: #FFFFFF; padding: .3rem 9% .3rem 4.5%; margin-left: 0; margin-right: -5%;} .ParaCloud2-tab .ParaCloud2-img img{ display: none;} .ParaCloud2-tab .ParaCloud2-con p{ cursor: pointer;} /* Application */ .Application3-box{ margin: .5rem 0;} .Application3-img{ flex-shrink: 0; width: 42%; max-width: 604px;} .Application3-img img{ width: 100%; height: auto;} .Application3-text{ width: 55%; max-width: 746px; line-height: 1.8; overflow: hidden;} .Application3-text h3{ font-size: 125%; color: #222222; line-height: 1.6; margin: .15rem 0;} /* solution-bio */ .bio1-swiper{ margin: .3rem 0;} .bio1-swiper .swiper-container{ width: calc(100% + 10px); margin-left: -5px; margin-right: -5px; padding: .1rem 0;} .bio1-swiper .swiper-slide{ width: auto; flex: 1; padding: 5px;} .bio1-item{ position: relative; padding: .5rem .2rem; background: linear-gradient(360deg, #FBFCFE 0%, #EEF3F8 100%); border-radius: .1rem; transition: all .6s;} .bio1-icon{ width: 180px; height: 180px; max-width: 1.8rem; max-height: 1.8rem; margin: 0 auto .1rem;} .bio1-title{ line-height: 1.2; font-weight: normal;} .bio1-line{ position: absolute; right: 0; bottom: 0; width: 0; height: 2px; background-color: var(--main-color); transition: all .5s linear;} .bio1-item:hover{ transform: translateY(-.1rem);} .bio1-item:hover .bio1-title{ color: var(--main-color);} .bio1-item:hover .bio1-line{ left: 0; right: auto; width: 100%;} .bio2-bg{ background: url(../image/bio2-bg.png) center center no-repeat; background-size: cover;} .bio2-box{ margin: .5rem 0;} .bio2-top{ background-color: #FFFFFF; border: 1px solid #DEDEDE; border-left: none;} .bio2-top .swiper-slide{ padding: .2rem; line-height: 24px; border-left: 1px solid #DEDEDE; cursor: pointer;} .bio2-top .swiper-slide-thumb-active{ background-color: var(--main-color); color: #FFFFFF; transition: all .3s;} .bio2-bot .swiper-container{ box-shadow: 0px 3px 6px rgba(0,0,0,0.16);} .bio2-bot .swiper-pagination{ display: none;} .bio2-item{ flex-direction: row-reverse;} .bio2-img{ flex-shrink: 0; width: 50%; overflow: hidden;} .bio2-img .img-bg{ height: 100%; min-height: 4.8rem; transition: all 1s linear;} .bio2-text{ flex-shrink: 0; width: 50%; background-color: #FFFFFF; box-shadow: 0px 3px 6px rgba(0,0,0,0.16);} .bio2-info{ width: 100%; padding: .3rem 12.5%;} .bio2-title{ line-height: 1.2; font-weight: normal;} .bio2-con{ line-height: 1.7; margin: .3rem 0 .4rem; -webkit-line-clamp: 4;} .bio2-item:hover .img-bg{ transform: scale(1.05);} .bio3-swiper{ position: relative; height: 430px; max-height: 5.2rem; margin: .5rem 0;} .bio3-item{ position: relative; height: 100%;} .bio3-img{ height: 100%;} .bio3-img .img-bg{ height: 100%;} .bio3-mask{ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-color: #000519; opacity: .6; transition: all .6s linear;} .bio3-text{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 .2rem; text-align: center;} .bio3-icon{ width: 30px; height: 30px; max-height: .4rem; margin: 0 auto .2rem;} .bio3-title{ font-weight: normal;} .bio3-hover{ position: absolute; left: 0; bottom: 0; width: 100%; padding: .25rem .3rem; opacity: 0; visibility: hidden; transform: translateY(100%); transition: all .3s;} .bio3-name{ line-height: 1.2; font-weight: normal;} @media (min-width: 1200px){ .bio3-swiper .swiper-container{ width: calc(100% + 4px); margin: 0 -2px;} .bio3-swiper .swiper-slide{ width: 12.05% !important; padding: 0 2px; transition: all .6s ease;} .bio3-swiper .swiper-slide-active{ flex: auto;} .bio3-swiper .swiper-slide-active .bio3-mask{ height: 35%; background: linear-gradient(180deg, rgba(223,35,46,0) 0%, #710007 100%); opacity: 1; transition: all .6s linear, height 0.6s linear 0.3s;} .bio3-swiper .swiper-slide-active .bio3-text{ display: none;} .bio3-swiper .swiper-slide-active .bio3-hover{ opacity: 1; visibility: visible; transform: translateY(0); transition: all .3s linear .3s;} } .bio4-swiper{ position: relative; padding: 0 .86rem; margin: .5rem 0;} .bio4-item{ position: relative; border-radius: .15rem; overflow: hidden; cursor: pointer;} .bio4-img{ padding-bottom: 61.69%;} .bio4-mask{ position: absolute; left: 0; bottom: 0; width: 100%; height: 35%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%); transition: all .3s linear;} .bio4-title{ position: absolute; left: 0; bottom: 0; width: 100%; padding: .3rem .4rem; transition: all .5s linear;} .bio4-hover{ position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: rgba(223, 35, 46, .85); transition: all .5s linear;} .bio4-text{ position: absolute; left: 0; bottom: 0; width: 100%; padding: .2rem .4rem;} .bio4-name{ line-height: 1.2; margin: .2rem 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .5s linear;} .bio4-con{ line-height: 1.625; margin: .2rem 0 .3rem; color: rgba(255, 255, 255, 0.85); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .5s linear;} .bio4-more{ display: flex; align-items: center; justify-content: center; width: 126px; line-height: calc(30px + .1rem); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: .06rem; text-align: center; margin: .2rem 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .5s linear;} .bio4-more i{ display: block; width: 15px; height: 16px; background: url(../image/bio4-more.png) center center no-repeat; background-size: contain; margin-right: 6px;} .bio4-item:hover .img-bg{ transform: scale(1.05);} .bio4-item:hover .bio4-title{ opacity: 0; visibility: hidden; transform: translateY(100%);} .bio4-item:hover .bio4-hover{ height: 100%;} .bio4-item:hover .bio4-name, .bio4-item:hover .bio4-con, .bio4-item:hover .bio4-more{ opacity: 1; visibility: visible; transform: translateY(0);} .bio4-item:hover .bio4-con{ transition-delay: .2s;} .bio4-item:hover .bio4-more{ transition-delay: .4s;} .bio4-prev{ left: 0;} .bio4-next{ right: 0;} .bio4-pop-bg{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10; display: none;} .bio4-pop{ position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 96%; max-width: 1080px; background-color: #FFFFFF; border-radius: .12rem; z-index: 11; display: none;} .bio4-pop-close{ width: 20px; height: 20px; margin-left: auto; margin-right: .2rem; margin-top: .2rem; margin-bottom: .1rem; background: url(../image/bio4-close.png) center center no-repeat; background-size: contain; cursor: pointer;} .bio4-pop-close:hover{ transform: rotate(180deg); transition: all .4s linear;} .bio4-pop-box{ padding: 0 .5rem; margin-bottom: .5rem; max-height: 75vh; overflow-y: auto;} .bio4-pop-img{ position: sticky; top: 0; float: left; width: 40%; max-width: 390px; margin-right: 4.8%;} .bio4-pop-img img{ width: 100%; height: auto;} .bio4-pop-text{ overflow: hidden;} .bio4-pop-title{ line-height: 1.4; margin-bottom: .2rem;} .bio4-pop-con{ line-height: 1.8; max-height: 70vh;} .bio4-pop-con span{ color: var(--main-color);} .bio5-bg .box-title-des{ max-width: 846px; margin: .4rem auto;} .bio5-list{ margin: 0 -.09rem;} .bio5-list li{ width: 33.33%; padding: .09rem;} .bio5-list .AI2-link{ background: url(../image/bio5-bg.png) center center no-repeat; background-size: cover; transition: all .5s linear;} .bio5-list .AI2-con{ max-width: 380px;} .bio5-list .AI2-link:hover{ box-shadow: 0 3px 6px rgba(102, 102, 102, .26); transform: translateY(-5px);} /* solution-metoc */ .metoc1-bg .AI1-box{ padding: 0; overflow: visible;} .metoc1-bg .AI1-box::before{ display: none;} .metoc1-bg .AI1-left{ max-width: 100%; width: 100%; padding-top: 0; padding-bottom: .3rem; padding-left: 0; padding-right: 0; overflow: hidden;} .metoc1-bg .AI1-right{ width: 100%; max-height: none;} .metoc1-list{ margin: 0 -.1rem;} .metoc1-list li{ margin: .42rem 0; padding: 0 .1rem;} .metoc1-icon{ flex-shrink: 0; width: 62px; height: 62px; max-width: .62rem; max-height: .62rem; margin-right: .3rem;} .metoc1-text{ flex: auto; overflow: hidden;} .metoc2-box{ margin: .3rem auto;} .metoc2-tab{ flex-shrink: 0; display: flex; flex-direction: column; width: 25%; max-width: 330px; margin-right: .16rem; text-align: center;} .metoc2-tab li{ flex: 1; margin: 5px 0;} .metoc2-tab li:first-child{ margin-top: 0;} .metoc2-tab li:last-child{ margin-bottom: 0;} .metoc2-tab li span{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: .2rem; background-color: #FFFFFF; box-shadow: 0px 2px 6px rgba(0,0,0,0.08); border-radius: .1rem; cursor: pointer; transition: all .3s;} .metoc2-tab li span::before{ display: block; content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 0%; background: url(../image/metoc2-hover.png) right bottom no-repeat; background-size: contain; transition: all .5s linear;} .metoc2-tab li.active span{ color: #FFFFFF; background: linear-gradient(90deg, #FF616A 0%, #DF232E 100%);} .metoc2-tab li.active span::before{ height: 100%;} .metoc2-swiper{ flex: auto; position: relative; border-radius: .1rem; overflow: hidden;} .metoc2-swiper .swiper-slide{ overflow: hidden;} .metoc2-img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;} .metoc2-text{ padding: .3rem; margin: .8rem .5rem; max-width: 580px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px);} .metoc2-title{ line-height: 1.4; margin: .1rem 0; margin-left: .15rem;} .metoc2-line{ display: block; width: 100%; max-width: 30px; height: 4px; background-color: var(--main-color); margin: .2rem 0; margin-left: .15rem;} .metoc2-list li{ margin: .2rem 0;} .metoc2-icon{ flex-shrink: 0; width: 76px; height: 76px; max-width: .8rem; max-height: .8rem; margin-right: .14rem;} .metoc2-con{ flex: auto; overflow: hidden;} .metoc2-title, .metoc2-line, .metoc2-list{ opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .5s linear;} .metoc2-swiper .swiper-slide-active .metoc2-title, .metoc2-swiper .swiper-slide-active .metoc2-line, .metoc2-swiper .swiper-slide-active .metoc2-list{ opacity: 1; visibility: visible; transform: translateY(0);} .metoc2-swiper .swiper-slide-active .metoc2-line{ transition-delay: .3s;} .metoc2-swiper .swiper-slide-active .metoc2-list{ transition-delay: .6s;} .metoc3-list{ margin: .2rem -.1rem;} .metoc3-list li{ width: 50%; padding: .1rem;} .metoc3-item{ display: flex; align-items: center; height: 100%; padding: .4rem .6rem; background-color: #F5F7FB; background-position: right -10px bottom -10px; transition: all .6s;} .metoc3-icon{ flex-shrink: 0; width: 70px; height: 70px; max-width: .7rem; max-height: .7rem; margin-right: .3rem;} .metoc3-icon img{ width: 100%; height: 100%; object-fit: contain;} .metoc3-text{ flex: auto; overflow: hidden;} .metoc3-title{ line-height: 1.2; margin-bottom: .1rem; transition: all .4s;} .metoc3-con{ max-width: 420px; -webkit-line-clamp: 6;} .metoc3-item:hover{ box-shadow: 0 3px 6px rgba(102, 102, 102, .26); background: url(../image/metoc3-hover.png) right bottom #F5F7FB no-repeat; background-size: auto 55%;} .metoc3-item:hover .metoc3-icon{ transform: rotate(360deg); transition: all 1s linear;} .metoc3-item:hover .metoc3-title{ color: var(--main-color);} .metoc4-bg{ background: url(../image/metoc4-bg.png) center center no-repeat; background-size: cover;} .metoc4-box{ position: relative; margin: .6rem 0;} .metoc4-img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 35%;} .metoc4-img img{ display: block; max-width: 100%; height: auto; margin: 0 auto;} .metoc4-list{ min-height: 390px;} .metoc4-list li{ width: 30%; margin: .18rem 0;} .metoc4-item{ max-width: 392px; line-height: 30px; padding: .15rem .3rem;} .metoc4-list{ position: relative; z-index: 1;} .metoc4-list li:nth-child(2n){ margin-left: 5%; transform: translateY(100%);} .metoc4-list li:nth-child(2n + 1){ margin-right: 5%;} .metoc4-list li:nth-child(2n) .metoc4-item{ margin-left: auto; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); border-left: .05rem solid #DF232E;} .metoc4-list li:nth-child(2n + 1) .metoc4-item{ margin-left: auto; background: linear-gradient(to left, #FFFFFF 0%, rgba(255,255,255,0) 100%); border-right: .05rem solid #DF232E; text-align: right;} /* solution-SaaS */ .SaaS2-bg .metoc4-list li{ transform: translateY(0) !important;} .SaaS3-swiper{ position: relative; padding: .4rem .5rem; margin: .5rem 0; background: url(../image/SaaS3-bg.png) center center no-repeat; background-size: cover;} .SaaS3-swiper .swiper-slide{ height: auto;} .SaaS3-item{ height: 100%; padding: .1rem; background-color: #FFFFFF;} .SaaS3-img{ position: relative; flex-shrink: 0; width: 45.52%;} .SaaS3-img .img-bg{ padding-bottom: 55.74%;} .SaaS3-text{ flex: auto; padding: .3rem .6rem; overflow: hidden;} .SaaS3-douhao-left, .SaaS3-douhao-right{ width: .46rem; height: .46rem; background-position: center center; background-repeat: no-repeat; background-size: contain;} .SaaS3-douhao-left{ background-image: url(../image/douhao-left.png);} .SaaS3-douhao-right{ margin-left: auto; background-image: url(../image/douhao-right.png);} .SaaS3-con{ margin: .3rem 0;} .SaaS3-swiper .SaaS3-prev, .SaaS3-swiper .SaaS3-next{ width: 56px; height: 56px; max-width: .56rem; max-height: .56rem;} .SaaS3-swiper .SaaS3-prev{ left: 0; transform: translate(-50%,-50%);} .SaaS3-swiper .SaaS3-next{ right: 0; transform: translate(50%,-50%);} /* solution-education */ .education1-bg .box-title-des{ margin: .4rem auto;} /* solution-IM */ .IM1-list{ margin: .3rem -.1rem;} .IM1-list li{ width: 50%; padding: .1rem;} .IM1-item{ padding: .35rem .5rem; background: linear-gradient(360deg, #FBFCFE 0%, #EEF3F8 100%); border-radius: .1rem;} .IM1-img{ flex-shrink: 0; width: 25%; max-width: 150px; margin-right: .4rem;} .IM1-img img{ width: 100%; height: auto;} .IM1-text{ flex: auto; overflow: hidden;} .IM1-title{ line-height: 1.2; margin-bottom: .2rem; font-weight: normal;} .IM1-type{ flex-shrink: 0; min-width: .58rem; min-height: .58rem; margin-right: .2rem; line-height: 1.2; background-color: var(--main-color); text-align: center; border-radius: .1rem;} .IM1-con{ flex: auto; line-height: 1.4; overflow: hidden; margin: 0 -.1rem;} .IM1-con p{ float: left; min-width: 34%; padding: 0 .1rem;} .IM2-bg .CAX-img{ margin-bottom: 0;} .IM2-top{ margin: .3rem -.12rem;} .IM2-top li{ width: 16.66%; padding: .12rem;} .IM2-top-item{ padding: .2rem; background-color: #FFFFFF;} .IM2-img{ padding-bottom: 71.11%; margin: 0 0 .18rem;} .IM2-title{ line-height: 1.1; font-weight: normal;} .IM2-bot{ margin: 0 -.45rem; margin-bottom: .3rem;} .IM2-bot > li{ position: relative; width: 33.33%; padding: 0 .45rem .2rem;} .IM2-bot > li::after{ display: block; content: ""; width: 46px; height: 78px; max-width: .46rem; max-height: .78rem; background: url(../image/IM2-arrow.png) right center no-repeat; background-size: contain; position: absolute; left: 100%; top: 50%; transform: translate(-50%,-50%); animation: slide2 1.6s linear infinite;} .IM2-bot > li:last-child::after{ display: none;} .IM2-bot-item{ background-color: #FFFFFF; overflow: hidden;} .IM2-bot-title{ line-height: 1.1; margin: .18rem 0;} .IM2-bot .IM2-top{ margin: .2rem 0; padding: 0 .35rem;} .IM2-bot .IM2-top li{ width: 50%; padding: 0 .15rem;} .IM2-bot .IM2-top-item{ padding: 0;} .IM2-bot .IM2-img{ padding-bottom: 72.41%;} .IM4-bg .HPC1-item{ background-color: #FFFFFF;} .IM6-list{ margin: .3rem -.12rem;} .IM6-list li{ width: 16.66%; padding: .1rem .12rem;} .IM6-list li a{ position: relative; display: block; height: 0; padding-bottom: 50%; background-color: #FFFFFF; border: 1px solid #D3D8E5; border-radius: .06rem; overflow: hidden;} .IM6-list li a span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;} .IM6-list li a span img{ max-width: 86%; max-height: 70%;} /* case */ .case-bg{ padding: .8rem 0;} .case-left{ position: sticky; top: 90px; float: left; width: 20%; max-width: 240px; margin-right: 3.5%;} .case-button{ display: none;} .case-sort{ background: url(../image/case-left.png) center bottom no-repeat; background-size: cover;} .case-sort li{ padding: 5px .2rem;} .case-sort li a{ display: flex; align-items: center; color: #222222; padding: .1rem .2rem; border-radius: .08rem; transition: all .4s;} .case-sort li a img{ width: 40px; max-width: .4rem; margin-right: .14rem;} .case-sort li.active a, .case-sort li a:hover{ background-color: #FFFFFF; box-shadow: 0px 3px 6px rgba(0,0,0,0.06);} .case-right{ flex: auto; overflow: hidden;} .case-list{ margin: 0 -.2rem;} .case-list li{ width: 50%; padding: 0 .2rem; margin-bottom: .4rem;} .case-link{ position: relative;} .case-img{ padding-bottom: 64.86%; border-radius: .1rem;} .case-img::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); z-index: 1; transition: all .6s;} .case-text{ position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .4rem; z-index: 2; transition: all .6s;} .case-tag{ width: fit-content; padding: 0 .12rem; border-radius: .06rem; border: 1px solid rgba(255, 255, 255, 0.6);} .case-title{ margin: .1rem 0;} .case-con{ line-height: 22px; max-height: 0; overflow: hidden; transition: all .6s;} .case-more{ line-height: 22px; max-height: 0; overflow: hidden; transition: all .6s;} .case-more i{ font-size: 14px; margin-left: 2px;} .case-link:hover .case-img::before{ height: 100%; background-color: rgba(223, 35, 46, .75);} .case-link:hover .img-bg{ transform: scale(1.05);} .case-link:hover .case-text{ top: 0; display: flex; flex-direction: column; justify-content: center;} .case-link:hover .case-tag{ margin: .1rem 0;} .case-link:hover .case-con{ max-height: 66px; height: 66px; margin: 0 0 .2rem; transition: all .6s linear .1s;} .case-link:hover .case-more{ max-height: 22px; transition: all .6s linear .2s;} /* case-detail */ .case1-box{ margin: .3rem 0;} .case1-left{ flex: auto; max-width: 790px; overflow: hidden;} .case1-left .CAX-detail-h2{ margin-top: 0;} .case1-swiper{ flex-shrink: 0; width: 40%; max-width: 560px; margin-left: 3%;} .case1-swiper .img-bg{ position: relative; height: 0; padding-bottom: 50.714%;} .case1-swiper .img-bg::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; max-height: 60px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);} .case1-swiper .swiper-pagination.line .swiper-pagination-bullet{ background-color: #FFFFFF;} .case1-swiper .swiper-pagination.line .swiper-pagination-bullet-active{ background-color: var(--main-color);} .case3-list{ margin: .4rem 0;} .case3-list .HPC2-icon{ margin: .4rem auto;} .case3-list .HPC2-con{ margin: .4rem auto;} .case3-list .HPC2-item{ padding: .2rem .3rem; background: linear-gradient(180deg, #F1F3F8 0%, #FFFFFF 100%);} .case3-list li.active .HPC2-item{ background: none;} .case4-list .HPC1-con{ max-width: 420px;} .case5-list{ margin: 0 -.15rem;} .case5-list li{ width: 50%; padding: .15rem;} .case5-link{ position: relative; border-radius: .15rem; overflow: hidden;} .case5-img{ padding-bottom: 34%;} .case5-mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);} .case5-title{ position: absolute; left: 0; bottom: 0; right: 0; line-height: 1.6; padding: .2rem; font-weight: normal;} .case-detail{ line-height: 1.8;} /* news */ .news-list{ margin: .4rem 0;} .news-link{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; padding: .4rem 0; border-bottom: 1px solid #E4E4E4; transition: all .3s;} .news-img{ flex-shrink: 0; width: 27.22%; height: 2.45rem; margin-left: 4%; border-radius: .1rem; overflow: hidden;} .news-img .img-bg{ height: 100%; transition: all 1s linear;} .news-text{ overflow: hidden;} .news-time{ color: #878787; line-height: 1.2;} .news-title{ line-height: 1.4; margin: .2rem 0; transition: all .3s;} .news-con{ color: #A2A2A2; line-height: 26px; height: 52px; -webkit-line-clamp: 2; margin: .2rem 0 .3rem;} .news-more{ display: flex; align-items: center; width: fit-content; line-height: calc(.15rem + 24px); padding: 0 .3rem; border: 1px solid #CBCBCB; border-radius: 6px; transition: all .5s;} .news-more i{ font-size: 120%; color: var(--main-color); font-weight: bold; transition: all .5s;} .news-link:hover{border-color: var(--main-color); box-shadow: 0 1px 0 var(--main-color);} .news-link:hover .img-bg{ transform: scale(1.05);} .news-link:hover .news-title{ color: var(--main-color);} .news-link:hover .news-more{ background-color: var(--main-color); border-color: var(--main-color); color: #FFFFFF;} .news-link:hover .news-more i{ color: #FFFFFF;} /* news-detail */ .news-left{ flex-shrink: 0; width: 74.3%; padding: .3rem 0; border-right: 1px solid #DFDFDF;} .news-top{ padding-right: 6.5%; margin-bottom: .2rem; overflow: hidden;} .news-left-title{ line-height: 1.5; margin: .3rem 0;} .news-left-time{ line-height: 18px; padding-left: 24px; margin: .3rem 0; background: url(../image/icon-time.png) left center no-repeat; background-size: 18px auto;} .news-detail{ line-height: 1.8; margin: .3rem 0;} .news-detail img{ display: block; margin: .1rem auto;} .news-bot{ padding: .5rem 0; padding-right: 6.5%; border-top: 1px solid #DFDFDF;} .news-page{ flex: auto; line-height: 1.4; overflow: hidden;} .news-page p{ margin: .1rem 0;} .news-page p a{ color: #666666; transition: all .3s;} .news-page p a:hover{ color: var(--main-color);} .news-back{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: fit-content; line-height: calc(28px + .2rem); padding: 0 .24rem; border-radius: 6px; margin-left: .3rem; background-color: var(--main-color); transition: all .3s;} .news-back i{ display: block; width: 20px; height: 16px; margin-right: .08rem; background: url(../image/back@2x.png) center center no-repeat; background-size: contain;} .news-back:hover{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: scale(.95);} .news-right{ position: sticky; top: 90px; flex: auto; padding: .3rem 0; padding-left: 2.7%; overflow: hidden;} .news-right-title{ line-height: 1.5; margin: .3rem 0;} .news-right-title img{ max-width: .3rem; height: auto; margin-right: .1rem; margin-top: -2px;} .news-hot-list li{ margin-bottom: .4rem;} .news-hot-img{ border-radius: .1rem; padding-bottom: 62.42%; margin-bottom: .2rem;} .news-hot-title{ line-height: 1.7; margin: .1rem 0; font-weight: normal; transition: all .4s linear;} .news-hot-time{ color: #B4B4B4; line-height: 16px; padding-left: 22px; background: url(../image/icon-time.png) left center no-repeat; background-size: 16px auto;} .news-hot-list li a:hover .img-bg{ transform: scale(1.05);} .news-hot-list li a:hover .news-hot-title{ color: var(--main-color);} /* science */ .sci-bg{ padding: .6rem 0; overflow: hidden;} .sci-title{ line-height: 1.1;} .sci-title strong{ position: relative; display: inline-block; vertical-align: middle; z-index: 1;} .sci-title strong::before{ display: block; content: ""; position: absolute; right: 100%; top: 0; width: 34px; height: 34px; max-width: .4rem; max-height: .4rem; margin-right: .2rem; background: url(../image/science4-icon.png) center center no-repeat; background-size: contain;} .sci-title strong::after{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 14px; max-height: .2rem; background: linear-gradient(90deg, #DF232E 0%, rgba(223,35,46,0) 100%); border-radius: .1rem; z-index: -1;} .sci1-bg{ background: url(../image/science1-bg.png) center center no-repeat; background-size: cover;} .sci1-box{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 55%; max-width: 708px; line-height: 2; min-height: 500px;} .sci1-img{ flex-shrink: 0; width: 293px; max-width: 50%; margin: 0 0 .5rem;} .sci1-img img{ max-width: 100%; height: auto;} .sci1-text{ overflow: hidden; text-align: justify;} .sci2-bg{ background: url(../image/1051034417.png) center center no-repeat; background-size: cover;} .sci2-box{ display: flex; flex-direction: column; justify-content: center; min-height: 560px; width: 50%; max-width: 653px; margin-left: auto; min-height: 500px;} .sci2-img{ display: block; width: 426px; max-width: 80%; margin: .3rem auto;} .sci2-img img{ max-width: 100%; height: auto;} .sci2-text{ color: rgba(255, 255, 255, .8); margin: .3rem 0; text-align: justify;} .sci3-box{ position: relative; margin: .6rem 0; border-radius: .15rem;} .sci3-img{ flex-shrink: 0; width: 57%; border-radius: .15rem 0 0 .15rem; overflow: hidden;} .sci3-img img{ width: 100%; height: 100%; object-fit: cover;} .sci3-text{ position: absolute; right: 0; top: 0; width: 43%; height: 100%; padding: .2rem .2rem; background: linear-gradient(180deg, #EEF3F8 0%, #FFFFFF 100%); box-shadow: 0px 10px 15px rgba(53,53,53,0.09); border-radius: 0 .15rem .15rem 0;} .sci3-scroll{ height: 100%; padding: 0 5%; overflow-y: auto;} .sci3-title{ line-height: 1.4; margin: .2rem 0;} .sci3-con{ line-height: 24px; text-align: justify;} .sci3-con p{ margin: .1rem 0; padding-left: 24px; background-position: left 3px; background-size: 18px auto; background-repeat: no-repeat;} .sci3-con p strong{ position: relative; color: #222222;} .sci3-con p strong::after{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; max-height: .08rem; background: linear-gradient(90deg, #DF232E 0%, rgba(223,35,46,0) 100%); opacity: 0.56; border-radius: .1rem;} .sci3-con p span{ color: #DF232E; margin-left: .16rem; font-weight: bold;} .sci3-con p.time{ background-image: url(../image/science3-icon1.png);} .sci3-con p.teacher{ background-image: url(../image/science3-icon2.png);} .sci3-con p.brief{ background-image: url(../image/science3-icon3.png);} .sci3-btn{ margin: .2rem 0;} .sci3-btn a{ display: block; color: #FFFFFF; line-height: 24px; padding: .08rem .2rem; border: 1px solid var(--main-color); background-color: var(--main-color); border-radius: 6px;} .sci3-btn a.border{ background-color: transparent; color: #353535; border-color: #353535;} .sci3-btn a + a{ margin-left: .16rem;} .sci3-btn a img{ max-width: 20px; max-height: 15px; margin-right: .1rem; margin-top: -2px;} .sci3-bg + .sci4-bg{ padding-top: 0;} .sci4-tab{ width: fit-content; line-height: 32px; margin: .5rem auto; background-color: #F5F7FB; border-radius: 10rem;} .sci4-tab li a, .sci4-tab li span{ display: block; color: #222222; padding: .1rem .3rem; border-radius: 10rem; transition: all .3s;} .sci4-tab li a:hover, .sci4-tab li span:hover{ color: var(--main-color);} .sci4-tab li.active a, .sci4-tab li.actvie span{ color: #FFFFFF; background-color: var(--main-color);} .sci4-tab.white-bg{ background-color: #FFFFFF; border: 1px solid #D7DCE8;} .sci4-list + .paging{ margin: .3rem 0;} .sci4-list{ margin: 0 -.15rem;} .sci4-list li{ width: 33.33%; padding: 0 .15rem; margin-bottom: .3rem;} .sci4-item{ border: 2px solid #FFFFFF; background: linear-gradient(180deg, #E3E7F1 0%, #FFFFFF 100%); box-shadow: 0px .03rem .1rem rgba(5,28,65,0.12); border-radius: .15rem;} .sci4-top{ padding: .24rem; border-bottom: 1px solid #EEEEEE;} .sci4-img{ padding-bottom: 57%; border-radius: .1rem;} .sci4-tag{ position: absolute; left: 0; bottom: 0; min-width: 1.04rem; line-height: calc(24px + .12rem); padding: 0 .2rem; background: linear-gradient(270deg, #D80B17 0%, #FF6069 100%); border-radius: 0px .15rem 0px .1rem; text-align: center;} .sci4-text{ margin-top: .2rem;} .sci4-title{ line-height: 1.4; margin: .1rem 0; transition: all .3s;} .sci4-time{ color: #B2B2B2; padding-left: 22px; background: url(../image/icon-time2.png) left center no-repeat; background-size: 16px auto;} .sci4-bot{ padding: .24rem;} .sci4-bot a{ display: flex; align-items: center; justify-content: center; min-width: 1.18rem; line-height: calc(24px + .14rem); padding: 0 .16rem; border-radius: .06rem; transition: all .3s;} .sci4-bot a + a{ margin-left: .16rem;} .sci4-bot a.gray{ border: 1px solid #C9C9C9; color: #999999;} .sci4-bot a.red{ border: 1px solid var(--main-color); color: var(--main-color);} .sci4-bot a i{ display: block; width: 16px; height: 16px; margin-right: 5px; background-position: center center; background-repeat: no-repeat; background-size: contain;} .play-back i{ background-image: url(../image/science4-icon1.png);} .apply-btn i{ background-image: url(../image/science4-icon2.png);} .sci4-bot a.gray:hover{ color: var(--main-color); border-color: var(--main-color);} .sci4-bot a.gray:hover i{ background-image: url(../image/science3-icon4.png);} .sci4-bot a.red:hover{ color: #FFFFFF; background-color: var(--main-color);} .sci4-bot a.red:hover i{ background-image: url(../image/science4-icon3.png);} .sci4-item:hover .sci4-img .img-bg{ transform: scale(1.05);} .sci4-item:hover .sci4-title{ color: var(--main-color);} .sci5-bg{ background: url(../image/science5-bg.png) center top #FFFFFF no-repeat; background-size: 100% auto;} .sci5-list + .paging{ margin: .2rem 0;} .sci5-list + .paging a{ border: 1px solid #BAC2D2;} .sci5-list + .paging a.active{ border-color: var(--main-color);} .sci5-list li{ width: 25%; padding: 0 .16rem; margin-bottom: .4rem;} .sci5-link{ height: 100%; background: linear-gradient(180deg, rgba(245,247,251,0) 0%, #E4EAF6 100%); border-radius: .2rem 0px .2rem 0px; transition: all .5s linear;} .sci5-img{ position: relative; width: 80%; max-width: 263px;} .sci5-img .img-bg{ padding-bottom: 100%; transition: all 1s linear;} .sci5-tag{ position: absolute; right: -.2rem; bottom: .2rem; min-width: 1.6rem; line-height: calc(24px + .16rem); padding: 0 .2rem; background: linear-gradient(270deg, #D80B17 0%, #FF6069 100%); border-radius: 0px .15rem 0px .1rem; text-align: center; transition: all .5s linear;} .sci5-tag i{ display: inline-block; vertical-align: middle; width: 4px; height: 4px; background-color: #FFFFFF; border-radius: 50%; margin: 0 .06rem;} .sci5-text{ color: #353535; line-height: 24px; margin: .25rem;} .sci5-link:hover{ box-shadow: 0px 3px 10px rgba(5,28,65,0.12); transform: translateY(-5px);} .sci5-link:hover .sci5-tag{ border-radius: .1rem 0 .1rem 0;} .sci6-bg{ background: linear-gradient(180deg, #EEF3F8 0%, #FFFFFF 100%); overflow: hidden;} .sci-title + .join5-swiper{ margin: .5rem 0 .3rem;} .sci-sign{ display: flex; min-height: calc(100vh - 70px);} .sci-sign-left{ position: relative; width: 40.625%; max-width: 780px;} .sci-sign-img{ height: 100%;} .sci-sign-text{ position: absolute; left: 0; top: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 2; padding: .3rem;} .sci-sign-logo{ max-width: 50%; margin: .3rem auto;} .sci-sign-logo img{ max-width: 100%; height: auto;} .sci-sign-text p{ max-width: 480px; margin: 0 auto;} .sci-sign-right{ flex: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: .3rem; overflow: hidden;} .sci-sign-title{ line-height: 1.1; margin: .1rem 0;} .sci-sign-subtitle{ line-height: 1.4; margin: .1rem 0; font-weight: normal;} .sci-sign-subtitle span{ position: relative; display: inline-block; vertical-align: middle;} .sci-sign-subtitle span::before, .sci-sign-subtitle span::after{ display: block; content: ""; position: absolute; top: 50%; width: 70px; max-width: 1rem; height: 1px; background-color: #D5DBE5;} .sci-sign-subtitle span::before{ right: 100%; margin-right: .16rem;} .sci-sign-subtitle span::after{ left: 100%; margin-left: .16rem;} .sci-sign-form{ width: 100%; max-width: 534px; margin: .5rem auto;} .sci-sign-list{ width: 100%;} .sci-sign-list li{ display: flex; align-items: center; margin-bottom: .2rem;} .sci-sign-lable{ display: block; flex-shrink: 0; min-width: 134px; font-weight: normal;} .sci-sign-input{ display: block; width: 100%; height: calc(26px + .2rem); line-height: 26px; padding: .1rem .2rem; flex: auto; border: 1px solid #CDD3DE; border-radius: .06rem; overflow: hidden;} .sci-sign-btn{ display: block; width: 260px; max-width: 80%; height: calc(30px + .2rem); margin-top: .2rem; background: #DF232E; border: none; border-radius: .06rem; cursor: pointer;} .sci-sign-list .layui-form-radio{ margin-top: 0;} .sci-sign-list .layui-form-radio *{ font-size: 18px; color: #555555;} .sci-sign-list .layui-form-radio > i{ font-size: 18px;} .sci-sign-list .layui-form-radio > i:hover, .sci-sign-list .layui-form-radioed > i{ color: var(--main-color);} .sci-pop-bg{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #000000; opacity: .5; display: none; z-index: 10;} .sci-pop{ position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 96%; max-width: 1000px; background-color: #FFFFFF; border-radius: .12rem; margin: 0 auto; z-index: 11; overflow: hidden; display: none;} .sci-pop-close{ position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; background: url(../image/close.png) center center no-repeat; cursor: pointer;} .sci-pop-top{ padding: .4rem .2rem; background: url(../image/pop-bg.png) center center no-repeat; background-size: cover;} .sci-pop-title{ line-height: 1.5;} .sci-pop-td{ line-height: 1; margin: .2rem -.2rem; opacity: .75;} .sci-pop-td span{ position: relative; display: block; margin: .1rem 0; padding: 0 .2rem;} .sci-pop-td span::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #FFFFFF;} .sci-pop-td span:first-child::before{ display: none;} .sci-pop-line{ display: block; width: 90%; max-width: 510px; background-color: #FFFFFF; margin: .2rem auto;} .sci-pop-des{ line-height: 1.5;} .sci-pop-bot{ padding: 0 .3rem .2rem; overflow: hidden;} .sci-pop-tips{ margin: .4rem 0;} .sci-pop-btn{ margin: .3rem 0;} .sci-pop-btn a, .sci-pop-btn span{ display: block; margin: 0 .15rem; min-width: 1.84rem; width: fit-content; color: #FFFFFF; line-height: 36px; padding: .1rem .2rem; border-radius: .06rem; text-align: center; cursor: pointer;} .sci-pop-btn a{ background-color: var(--main-color);} .sci-pop-btn span{ background-color: #CCCCCC;} .about-bg{ position: relative; overflow: hidden;} .a-title{ line-height: 1.1; margin: .3rem 0;} .a-prev, .a-next{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; max-width: .7rem; max-height: .7rem; background-color: #FFFFFF; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: contain; cursor: pointer; transition: all .3s; z-index: 1;} .a-prev::before, .a-next::before{ display: block; content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; background-color: var(--main-color); border-radius: 50%; z-index: -1; transform: scale(0.5); opacity: 0; transition: all .3s linear;} .a-prev i, .a-next i{ font-weight: bold;} .a-prev:hover, .a-next:hover{ color: #FFFFFF;} .a-prev:hover::before, .a-next:hover::before{ transform: scale(1); opacity: 1;} .a-prev:focus, .a-next:focus{ outline: none;} .a-prev.red, .a-next.red{ background-color: #E14C54; color: #FFFFFF;} .a-prev.gray, .a-next.gray{ width: 56px; height: 56px; max-width: .56rem; max-height: .56rem; background-color: #EFF2F9; color: #353535; font-weight: bold;} .a-prev.gray:hover, .a-next.gray:hover{ color: #FFFFFF;} .a1-bg{ padding: 0.6rem 0;} .a1-box{ margin: .9rem 0 .4rem;} .a1-left{ width: 55%; max-width: 775px;} .a1-right{ width: 42%; max-width: 590px;} .a1-right .AI1-video{ margin: 0;} .a1-logo{ margin: 0 0 .4rem;} .a1-logo img{ max-width: 100%; max-height: .56rem;} .a1-text{ line-height: 1.67; padding-right: .35rem; max-height: 2.84rem; overflow-y: auto;} .a1-text::-webkit-scrollbar{ width: 2px; height: 2px; background-color: #DDE0E5; border-radius: 2px;} .a1-text::-webkit-scrollbar-thumb{ border-radius: 2px;} .a2-bg{ padding: 1.2rem 0 0; z-index: 1;} .a2-bg::before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 1.2rem); background: url(../image/a2-bg.png) center center var(--main-color) no-repeat; overflow: visible; z-index: -1;} .a2-img{ position: absolute; left: 0; bottom: 0; width: 38%; max-width: 698px; height: 100%; background-position: left top;} .a2-box{ padding: .5rem 0; margin-left: auto; width: 70%; max-width: 920px;} .a2-logo{ float: right; width: 32%; max-width: 294px; margin-left: .5rem; margin-bottom: .1rem;} .a2-logo img{ max-width: 100%; height: auto;} .a2-text{ line-height: 1.6; margin: .2rem 0; max-height: 8em; padding-right: 5px; overflow-y: auto;} .a2-text::-webkit-scrollbar{ width: 2px; height: 2px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.4);} .a2-text::-webkit-scrollbar-thumb{ background-color: #FFFFFF;} .a3-bg{ padding: .6rem 0; background: url(../image/a3-bg.png) center center no-repeat; background-size: cover;} .a3-prev{ left: 0;} .a3-next{ right: 0;} .a3-tab{ position: relative; padding: 0 .7rem; margin: 0 0 .5rem;} .a3-tab .swiper-container::before{ display: block; content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 0; border-top: 1px dashed #99A0AF;} .a3-tab .swiper-slide{ position: relative; padding: .2rem 0; cursor: pointer;} .a3-tab .swiper-slide::before, .a3-tab .swiper-slide::after{ display: block; content: ""; width: 0%; height: 1px; background-color: var(--main-color); position: absolute; top: 50%;} .a3-tab .swiper-slide::before{ left: 0; transition: all .3s linear;} .a3-tab .swiper-slide::after{ left: 50%; transition: all .3s linear .3s;} .a3-dot{ position: relative; width: 28px; height: 28px; border:5px solid transparent; background-color: var(--main-color); transform: scale(0.6); border-radius: 50%; margin: .34rem auto; z-index: 1; transition: all .3s linear;} .a3-year{ position: absolute; left: 0; right: 0; bottom: 0; color: #777B85; line-height: 34px;} .a3-tab .swiper-slide-thumb-active .a3-dot{ border-color: var(--main-color); background-color: #FFFFFF; transform: scale(1); transition: all .3s linear .6s;} .a3-tab .swiper-slide-thumb-active .a3-year{ color: var(--main-color); font-weight: bold;} .a3-tab .passed::before{ width: 50%;} .a3-tab .passed::after{ width: 50%; transition: all .3s linear;} .a3-tab .pass::before{ width: 50%; transition: all .3s linear .3s;} .a3-box{ position: relative; max-width: 900px; padding: 15px .85rem; margin: .4rem auto; background-color: rgba(245, 247, 251, .9);} .a3-box::before, .a3-box::after{ display: block; content: ""; width: .46rem; height: .46rem; position: absolute; background-position: center center; background-repeat: no-repeat; background-size: contain;} .a3-box::before{ left: .3rem; top: .4rem; background-image: url(../image/douhao-left.png);} .a3-box::after{ right: .3rem; bottom: .4rem; background-image: url(../image/douhao-right.png);} .a3-title{ line-height: 1.4; margin: .3rem 0;} .a3-text{ display: flex; align-items: center; flex-direction: column; margin: .3rem 0;} .a3-con{ max-width: 100%; height: 150px; line-height: 25px; overflow-y: auto;} .a3-con p{ position: relative; padding-left: 32px; margin: .1rem 0; background: url(../image/a3-icon.png) left 4px no-repeat; background-size: 20px auto;} .a4-bg{ padding: .6rem 0; background: url(../image/a4-bg.png) center bottom no-repeat;} .a4-bg .HPC3-top{ margin: .2rem 0;} .a4-bg .HPC3-tab li span{ min-width: 150px;} .a4-bg .HPC3-bot{ position: relative; margin: .2rem 0 .6rem;} .a4-bg .HPC5-link{ padding-top: .28rem;} .a4-bg .HPC5-text{ padding: 0 .32rem;} .a4-bg .HPC5-text::before, .a4-bg .HPC5-text::after{ width: 29px; height: 65px; max-width: .3rem; max-height: .65rem;} .a4-bg .HPC5-text::before{ background-image: url(../image/a4-leaf-left.png);} .a4-bg .HPC5-text::after{ background-image: url(../image/a4-leaf-right.png);} .a4-item{ opacity: 0; visibility: hidden;} .a4-item.active{ opacity: 1; visibility: visible; transition: all 0.3s ease-in-out;} .a4-item2{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;} .a4-swiper{ position: relative;} .a4-swiper .swiper-container{ width: calc(100% + .44rem); margin: 0 -.22rem; padding: .2rem 0;} .a4-swiper .swiper-slide{ padding: 0 .22rem;} .a4-prev{ right: 100%; margin-right: .3rem;} .a4-next{ left: 100%; margin-left: .3rem;} .a5-bg{ padding: .6rem 0; background: url(../image/a5-bg.png) center center no-repeat; background-size: cover;} .a5-swiper{ margin: .3rem 0;} .a5-swiper .swiper-container{ margin: 0 -.15rem;} .a5-swiper .swiper-slide{ height: auto; padding: .15rem;} .a5-item{ height: 100%; padding: .4rem .5rem; border: 2px solid #FFFFFF; background: linear-gradient(180deg, #F5F7FB 0%, #FFFFFF 100%); box-shadow: 0px 4px 12px rgba(36,51,78,0.16); border-radius: .1rem; transition: all .5s;} .a5-icon{ width: 74px; height: 74px; max-width: .74rem; max-height: .74rem;} .a5-title{ line-height: 1.1; margin: .16rem 0;} .a5-con{ line-height: 1.8; margin: .24rem 0 0;} .a5-item:hover{ transform: translateY(-5px)} .a5-item:hover .a5-icon img{ animation: swing 1s linear;} .join1-bg{ padding: .6rem 0; background: url(../image/join-bg.png) top right no-repeat; background-size: 100% auto; overflow: hidden;} .join1-swiper{ position: relative; margin: .4rem 0;} .join1-swiper .swiper-slide{ height: auto;} .join1-item{ min-height: 2.2rem; height: 100%; padding: .3rem; background: #FFFFFF;} .join1-icon{ width: 50px; height: 50px; max-width: .5rem; max-height: .5rem; margin: .15rem auto;} .join1-icon img{ transition: all .3s;} .join1-title{ line-height: 1.4; margin: .15rem 0; font-weight: normal;} .join1-item:hover .join1-icon img{ animation: swing 1s linear 1;} .join2-list{ margin: .3rem 0 .8rem;} .join2-list li{ width: 20%; margin: .3rem 0;} .join2-top{ position: relative;} .join2-top::before, .join2-top::after{ display: block; content: ""; position: absolute; top: 50%; transform: translateY(-50%);} .join2-top::before{ width: 100%; left: 0; border-top: 2px dotted #D2D2D2;} .join2-top::after{ left: 100%; transform: translate(-50%,-50%); width: 18px; height: 21px; background: url(../image/join2-arrow.png) right center no-repeat; background-size: contain; animation: slide 1.5s linear infinite; opacity: 0;} .join2-icon{ position: relative; width: 84px; height: 84px; max-width: .84rem; max-height: .84rem; margin: 0 auto; z-index: 1;} .join2-num{ display: block; line-height: 1; font-weight: bold; margin-bottom: -.5em; background: linear-gradient(to bottom, rgba(34, 34, 34, .1), rgba(107, 107, 107, 0)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .join2-bot{ margin: .1rem 0 0;} .join2-title{ position: relative; line-height: 1.1; margin: .1rem 0;} .join2-en{ color: #BFBFBF; text-transform: uppercase; font-weight: bold;} .join2-list li:last-child .join2-top::after{ display: none;} .join3-list{ list-style: none; margin: .3rem 0;} .join3-list li{ border-bottom: 1px solid #E3E3E3;} .join3-list li:first-child{ border-top: 1px solid #E3E3E3;} .join3-top{ line-height: 30px; padding: .27rem 0; cursor: pointer; transition: all .3s; font-weight: normal;} .join-name{ flex: auto; color: var(--text-color); padding: 0 .4rem; overflow: hidden; transition: all .3s;} .join-year{ flex-shrink: 0; margin-left: auto; width: 15%; opacity: .65; transition: all .2s;} .join-level{ flex-shrink: 0; margin-left: auto; width: 13%; margin-left: 10px; opacity: .65; transition: all .2s;} .join-handle{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(102, 102, 102, .26); margin-left: 10px; color: var(--main-color); padding: 0 .4rem; transition: all .3s;} .join-handle i{ position: relative; display: block; width: 14px; height: 14px; margin-right: 2px;} .join-handle i::before, .join-handle i::after{ display: block; content: ""; background-color: var(--main-color); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all .3s;} .join-handle i::before{ width: 14px; height: 2px;} .join-handle i::after{ width: 2px; height: 14px;} .join-handle strong{ font-weight: normal;} .join3-text{ line-height: 1.8; padding: 10px .5rem; background-color: #F6F7F9; display: none;} .join3-text strong{ color: var(--text-color);} .join3-text h4{ font-size: 112.5%; color: #182129; line-height: 1.8; margin: .3rem 0 .2rem;} .join3-price{ margin: .3rem 0;} .join3-hidden{ display: none;} .join3-bot{ line-height: 24px; padding: .2rem 0; margin-top: .3rem; border-top: 1px solid #E1E1E1;} .join3-bot a{ color: var(--main-color);} .join3-bot a span{ color: #222222;} .join3-bot p{ padding-left: 30px; margin: .14rem 0;} .join3-bot p.tel{ background: url(../image/join-tel.png) left 2px no-repeat;} .join3-bot p.email{ background: url(../image/join-email.png) left 2px no-repeat;} .join3-list li.active .join3-top{ background-color: var(--main-color); color: #FFFFFF;} .join3-list li.active .join-name{ color: #FFFFFF;} .join3-list li.active .join-year, .join3-list li.active .join-level{ opacity: .6;} .join3-list li.active .join-handle{ color: #FFFFFF; border-left-color: rgba(255, 255, 255, 0.26);} .join3-list li.active .join-handle i::before, .join3-list li.active .join-handle i::after{ background-color: #FFFFFF;} .join3-list li.active .join-handle i::after{ transform: translate(-50%,-50%) rotate(90deg);} .join2-bg{ padding: .6rem 0; position: relative; background: linear-gradient(180deg, #F6F9FE 0%, #FFFFFF 100%); overflow: hidden;} .join2-swiper{ position: relative; margin: .5rem 0 1rem;} .join2-swiper .swiper-slide{ width: 44.27%; max-width: 850px; margin: 0 auto; background-color: #FFFFFF;} .join2-img{ padding-bottom: 67%; opacity: .25;} .join2-swiper .swiper-slide-active .join2-img{ opacity: 1; transition: all .3s linear;} .join2-swiper .swiper-pagination{ display: none;} .join2-prev{ left: 16.56%;} .join2-next{ right: 16.56%;} .join4-list{ list-style: none; margin: .1rem -.2rem;} .join4-list li{ width: 33.33%; padding: .2rem;} .join4-item{ position: relative; height: 100%; background-color: #FFFFFF; box-shadow: 0px .1rem .2rem rgba(23,54,103,0.12); border-radius: .15rem; overflow: hidden; transition: all .4s linear;} .join4-title{ line-height: 28px; padding: .2rem 0; background: linear-gradient(270deg, #DF232E 0%, #FF9EA4 100%); font-weight: normal;} .join4-con{ line-height: 2; padding: .4rem .3rem;} .join4-con p{ position: relative; padding-left: 10px;} .join4-con p::before{ display: block; content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #8A8A8A; position: absolute; left: 0; top: 15px;} .join4-icon{ position: absolute; right: .2rem; bottom: .2rem; max-width: 25%;} .join4-icon img{ max-width: 100%; height: auto; transform-origin: right bottom; transition: all .5s linear;} .join4-item:hover{ box-shadow: 0px .1rem .2rem rgba(23,54,103,0.2); transform: translateY(-5px);} .join4-item:hover .join4-icon img{ transform: scale(0.9);} .join5-swiper{ position: relative; margin: .6rem 0 1rem;} .join5-swiper .swiper-container{ border-radius: .15rem;} .join5-swiper .bio4-con{ margin: .2rem 0; -webkit-line-clamp: 4;} .join5-img{ position: relative; padding-bottom: 71.11%; border-radius: .15rem; overflow: hidden;;} .join5-prev{ left: -1rem;} .join5-next{ right: -1rem;} .CAX-detail-h2 + .join5-swiper{ margin: .3rem 0;} /* contact */ .con-top{ position: relative; margin: 1rem 0; padding: .85rem; background-color: #F6F7F9; z-index: 1;} .con-top::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: url(../image/con-bg.png) center center no-repeat; background-size: cover; z-index: -1;} .con-left{ position: relative; flex-shrink: 0; width: 50%; padding: .4rem .5rem; backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.5); box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border-radius: .15rem 0px 0px .15rem; z-index: 1;} .con-title{ line-height: 1.5;} .con-tel{ line-height: 30px; padding-left: 46px; margin: .35rem 0; background: url(../image/con-tel.png) left top no-repeat;} .con-tel span{ display: block;} .con-tel-con p{ margin-bottom: .1rem;} .con-text{ line-height: 2; margin: .3rem 0;} .con-text a{ color: #666666;} .con-text a:hover{ color: var(--main-color);} .con-wx{ margin: .4rem 0;} .con-wx-img{ flex-shrink: 0; width: 40%; max-width: 120px; margin-right: .3rem;} .con-wx-img img{ width: 100%; height: auto;;} .con-wx-text{ line-height: 1.8;} .con-right{ flex: auto; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border-radius: 0 .15rem .15rem 0; overflow: hidden;} .con-map{ height: 100%;} .map-logo{ width: 3rem;} .map-logo img{ width: 100%; height: auto;} .amap-ui-control-position-rt{ top: .3rem !important; right: .3rem !important;} .con-list{ margin: .35rem -.2rem 1rem;} .con-list li{ width: 50%; padding: .15rem .2rem;} .con-item{ height: 100%; background-color: #F6F8FB; border-radius: .1rem; overflow: hidden;} .con-city{ flex-shrink: 0; width: 120px; min-height: 1.2rem; max-width: 1.2rem; background-color: var(--main-color); border-radius: .1rem;} .con-address{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; line-height: 1.6; padding: .2rem .5rem;} /* apply */ .apply-top{ line-height: 24px;} .apply-top p{ position: relative; padding-left: 27px; margin: .1rem 0; background: url(../image/apply-icon.png) left 4px no-repeat;} .apply-top p strong{ color: var(--main-color);} .apply-bot{ line-height: 1.25; max-width: 500px; margin: .3rem auto;} .apply-bot li{ width: 25%; padding: .1rem;} .apply-icon{ width: 54px; height: 54px; max-width: .54rem; max-height: .54rem; margin: .2rem auto;} /* computility */ .computility-top{ margin: .8rem 0;} .computility-top .video{ display: block; width: 100%; height: auto; border: .06rem solid #FFFFFF;} .computility-top .shadow{ display: block; width: 83.33%; margin: 0 auto;} .computility-bot{ margin: .8rem 0 1rem;} /* CAX2 */ .design5-item{ position: relative; border-radius: .15rem; overflow: hidden; cursor: pointer;} .design5-item:hover .img-bg{ transform: scale(1.05);} .design5-item:hover .bio4-title{ opacity: 0; visibility: hidden; transform: translateY(100%);} .design5-item:hover .bio4-hover{ height: 100%;} .design5-item:hover .bio4-name, .design5-item:hover .bio4-con, .design5-item:hover .bio4-more{ opacity: 1; visibility: visible; transform: translateY(0);} .design5-item:hover .bio4-con{ transition-delay: .2s;} .design5-item:hover .bio4-more{ transition-delay: .4s;}