.ghtx-banner{ height: 260px; background: url(../images/gh-icon/gh-ic2.png) center center no-repeat / cover; } .ghtx-min-auto{ width: 1200px; margin: 0 auto;} .ghtx-banner .ghtx-min-auto{ display: flex; display: -webkit-flex; align-items: center; padding-left: 70px; } .ghtx-banner>img{ width: 383px; height: 257px; } .ghtx-banner-text{ padding-left: 70px; font-size: 65px; color: #2862f6; font-weight:600; } .ghtx-cont{ padding: 30px 0; line-height: 28px; position: relative; } .ghtx-cont .ghtx-min-auto{ width: 1150px; margin: 0 auto;}.ghtx-tit-line1{ background: url(../images/gh-icon/gh-ic3.png) left top no-repeat; padding-left: 130px; font-size: 20px; color: #3a3a3a; padding-top: 10px; } .ghtx-tit-line1>span{ font-weight: bold; background: url(../images/gh-icon/gh-ic4.png) left center no-repeat; font-size: 25px; padding-left: 50px; color: #287bf6;} .ghtx-tit-line1>div{ margin-top:10px; } .ghtx-tit-line2{ padding: 10px 0; } .ghtx-line2ul>ul{ display: flex; display: -webkit-flex; align-items: center; justify-content: space-around; }.ghtx-line2ul>ul>li{ padding-top: 110px; text-align: center; color: #202020; font-size: 20px; width: 170px; flex: none; cursor: pointer; } .ghtx-line2ul>ul>li>div{ overflow: hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ghtx-line2ul>ul>li:hover{ opacity: 0.85; } .ghtx-tit-line2>fieldset{ border: 1px solid #DCDCDC; padding: 0px 0 30px; border-radius: 5px; } .ghtx-tit-line2>fieldset>legend{ text-align: center; border: none; width: inherit; font-size: 24px; color: #555; padding: 0px 20px; } .ghtx-tit-line2>fieldset>legend>div{ font-size:17px; color: #aaa; text-transform: uppercase; padding-top: 10px; }.ghtx-ic1{ background: url(../images/gh-icon/gh-ic5.png) center top no-repeat;} .ghtx-ic2{ background: url(../images/gh-icon/gh-ic6.png) center top no-repeat;} .ghtx-ic3{ background: url(../images/gh-icon/gh-ic7.png) center top no-repeat;} .ghtx-ic4{ background: url(../images/gh-icon/gh-ic8.png) center top no-repeat;} .ghtx-tit-line3{ padding: 10px 0; display: flex; display: -webkit-flex; justify-content: space-between; align-items: stretch; } .ghtx-line3left{ width: 560px; } .ghtx-line3left>ul{ width: 560px; display: flex; display: -webkit-flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } .ghtx-line3left>ul>li{ width: 47%; margin-right: 3%; border: 1px solid #E5E5E5; border-radius: 5px; display: flex; display: -webkit-flex; justify-content: space-between; align-items: stretch; flex:none; }.ghtx-line3left>ul>li:first-child,.ghtx-line3left>ul>li:nth-child(2){ margin-bottom: 15px; } .ghtx-line3left>ul>li>span{ background: #8b9fbd; flex:none; width: 70px; padding: 0px 20px; text-align: center; line-height: 22px; font-size: 16px; color:#fff; font-weight: bold; border-radius: 5px 0 0 5px; display: flex; display: -webkit-flex; justify-content: center; align-items: center; flex-direction: column; } .ghtx-line3left>ul>li>span>i{ display: inline-block; width:24px; height: 22px; margin-bottom: 8px; } .ghtx-icon1{ background: url(../images/gh-icon/gh-ic9.png) center center no-repeat; } .ghtx-icon2{ background: url(../images/gh-icon/gh-ic10.png) center center no-repeat; } .ghtx-icon3{ background: url(../images/gh-icon/gh-ic11.png) center center no-repeat; } .ghtx-icon4{ background: url(../images/gh-icon/gh-ic12.png) center center no-repeat; } .ghtx-line3left>ul>li>div{ padding: 20px; font-size: 15px; color: #555; width: 80%; min-height: 150px; display: flex; display: -webkit-flex; justify-content: center; align-items: center; flex-direction: column; } .ghtx-line3left>ul>li>div>p{ margin: 10px 0; width: 100%; } .ghtx-line3right{ background: #fafafa; border-radius: 5px; width: 610px; display: flex; display: -webkit-flex; justify-content: center; align-items: center;} .ghtx-center-fm{ width: 100%; padding: 0 20px; } .ghtx-3right-tit{ width: 88px; height: 88px; margin: 10px auto; border-radius: 50%; box-shadow: 0 10px 10px rgba(4,201,255, 0.3); background: linear-gradient(45deg,#15dfff,#04c9ff); background: -webkit-linear-gradient(45deg,#15dfff,#04c9ff); background: -moz-linear-gradient(45deg,#15dfff,#04c9ff); background: -o-linear-gradient(45deg,#15dfff,#04c9ff); font-size: 18px; font-weight: bold; color: #fff; text-align: center; line-height: 88px;} .ghtx-less-ul{ margin-top: 25px; width: 560px; } .ghtx-less-ul>ul{ font-size: 18px; color: #333; display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; text-align: center; line-height: 22px; position: relative; } .ghtx-less-ul>ul:before{ content: ""; display: block; height: 1px; width: 485px; position: absolute; top: 0; background: #D2D2D2; left: 50%; margin-left: -242px; } .ghtx-less-ul>ul>li{ flex: none; display: flex; display: -webkit-flex; justify-content: center; align-items: center; padding-top: 30px; position: relative; width: 74px; } .ghtx-less-ul>ul>li:hover{ opacity: 0.85; cursor: pointer; } .ghtx-less-ul>ul>li:before{ position: absolute; left: 50%; margin-left: -12px; display: inline-block; width: 17px; left: 50%; margin-left: -8px; top: 0px; content:""; height: 22px; background: url(../images/gh-icon/gh-ic19.png) center bottom no-repeat;} .ghtx-less-ul>ul>li:first-child:before,.ghtx-less-ul>ul>li:last-child:before{ background: url(../images/gh-icon/gh-ic18.png) center bottom no-repeat;} .ghtx-less-ul>ul>li>div{ width: 74px; padding-top: 68px; overflow: hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ghtx-lessic1{ background: url(../images/gh-icon/gh-ic13.png) center top no-repeat; } .ghtx-lessic2{ background: url(../images/gh-icon/gh-ic14.png) center top no-repeat; } .ghtx-lessic3{ background: url(../images/gh-icon/gh-ic15.png) center top no-repeat; } .ghtx-lessic4{ background: url(../images/gh-icon/gh-ic16.png) center top no-repeat; } .ghtx-lessic5{ background: url(../images/gh-icon/gh-ic17.png) center top no-repeat; } .ghtx-center-mid{ height: 650px; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .ghtx-center-mid>span{ background: url(../images/gh-icon/gh-ic21.png) center top no-repeat; padding-top: 340px; font-size: 25px; color: #333; } .in-cont{ padding: 100px 20px 80px; border-radius: 10px; background: #fff; position: relative; height: 508px; margin-top: 40px; box-shadow: 0 2px 15px rgba(0,0,0,.1); } .in-cont ul { width: 100%; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .in-cont ul li { padding: 20px 1%; flex: auto; } .in-cont ul li>div { -webkit-border-radius: 10px; border-radius: 10px; color: #fff; display: flex; display: -webkit-flex; justify-content: center; align-items: center; flex-direction: column; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; } .in-circle-sca{ text-align: center; position: relative; width: 180px; height: 180px; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; } .in-cont ul li>div:hover .in-circle-sca{ width: 210px; height: 210px; } .in-cont ul li>div:hover span{ font-size: 22px; } .in-cont ul li.active>div .in-circle-sca{ width: 210px; height: 210px; } .in-cont ul li.active>div span{ font-size: 22px; } .in-cont ul li>div span { font-size: 18px; overflow: hidden; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; color: #444; display:-webkit-box; -webkit-line-clamp: 2; text-align: center; width: 100%; -webkit-box-orient: vertical; height: 60px; } .ghtx-in-bg{ background: url(../images/gh-icon/gh-banner.png) center top no-repeat; background-size:contain; height: 402px; position: absolute; z-index:-1; width: 100%; } .ghtx-banner-h{ font-size: 50px; color: #fff; text-align: center; padding:30px 0 20px; } .ghtx-header-t{ position: absolute; left: 50%; margin-left: -165px; top:-75px; display: flex; display: -webkit-flex; align-items: center; justify-content: center; flex-direction: column; width:330px; height: 160px; box-shadow: 0 0 18px rgba(0,191,255,.2); border-radius: 5px; background: linear-gradient(to right,#1ec6ff,#01a3ff); background: -webkit-linear-gradient(left,#1ec6ff,#01a3ff); background: -moz-linear-gradient(left,#1ec6ff,#01a3ff); background: -o-linear-gradient(left,#1ec6ff,#01a3ff);} .ghtx-arw-down{ position: absolute; left: 50%; margin-left: -22px; top:100px; width: 45px; height: 69px; background: url(../images/gh-icon/gh-ic25.png) center center no-repeat; } .ghtx-header-t>span{ font-size: 25px; color: #fff; display: flex; display: -webkit-flex; align-items: center; justify-content: center; height: 75px; width: 100%; background: url(../images/gh-icon/gh-ic24.png) right bottom no-repeat ; } .ghtx-header-t>span>i{ display: inline-block; width: 23px; height: 28px; margin-right: 10px; background: url(../images/gh-icon/gh-ic23.png) center center no-repeat; }.ghtx-header-text{ width: 100%; flex: auto; text-align: center; flex-wrap: wrap; align-content: center; border:1px solid #dcdcdc; border-top: none; background: #fff; border-radius: 0 0 5px 5px; display: flex; display: -webkit-flex; align-items: center; justify-content: center; } .ghtx-header-text>span{ font-size: 18px; color: #626262; width: 100%; } .ghtx-header-text>span>i{ font-size: 30px; color: #1c1c1c; } .ghtx-header-text>p{ font-size: 15px; color: #1c1c1c; margin: 0; } .in-cont .swiper-container{ padding: 20px 0; margin-top:40px; } .in-cont .swiper-container .swiper-slide{ padding: 0px 50px; } .in-cont .swiper-button-next, .in-cont .swiper-button-prev{ background-size:20px; }