.top1 { width: 100%; height: 100%; overflow: hidden; min-height: 9rem; } .top1 .swiper-container { width: 100%; height: 100%; } .top1 .swiper-wrapper { width: 100%; height: 100%; } .top1 .swiper-slide { width: 100%; height: 100%; position: relative; background-attachment: scroll; background-position: bottom; opacity: 0 !important; } .top1 .swiper-slide-active { opacity: 1 !important; } .top1 .swiper-slide>div { width: 40%; } .top1 .swiper-slide>div>img { width: 100%; } .top1 .swiper-slide>img { width: 100%; height: 100%; } .top1 .swiper-slide>.ban1{ padding: .41rem 0%; position: relative; } .top1 .swiper-slide>.ban1::after{ height: 2px; width: 100%; left: 0%; bottom: 0%; background-image: linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0)); } .top1 .swiper-slide>.ban1::before{ height: 2px; width: 100%; left: 0%; top: 0%; background-image: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0)); } .top1 .swiper-slide>.ban1>p{ color: #fff; font-size: .3rem; font-weight: lighter; margin-bottom: .2rem; font-family: arial; } .top1 .swiper-slide>.ban1>b{ color: #fff; display: block; font-size: .52rem; position: relative; z-index: 10; font-weight: bold; } .top1 .swiper-slide>.ban1>i{ display: block; position: absolute; height: .35rem; width: 100%; background-color: #86e0dc; opacity: .3; bottom: 16%; left: 0%; } .top1 .swiper-slide>.ban2{ } .top1 .swiper-slide>.ban2>p{ color: #fff; font-size: .3rem; opacity: 0.7; } .top1 .swiper-slide>.ban2>b{ color: #fff; font-size: .4rem; line-height: 1.5; display: block; margin: .32rem 0 .52rem 0; font-weight: bold; letter-spacing: .01rem; } .top1 .swiper-slide>.ban2>i{ color: #fff; font-size: .18rem; line-height: 2; display: block; text-transform: uppercase; font-family: arial; } .top1 .swiper-slide>.ban4>p{ font-size: .39rem; color: transparent; position: relative; -webkit-text-stroke: 1px #ffffff; text-stroke: 12px #ffffff; text-transform: uppercase; opacity: .6; } .top1 .swiper-slide>.ban4>p>i{ height: .2rem; overflow: hidden; position: absolute; line-height: 1; top: -14%; left: 0%; opacity: .3; } .top1 .swiper-slide>.ban4>p>i:nth-child(2){ opacity: .1; top: -.26rem; } .top1 .swiper-slide>.ban4>b{ font-size: .36rem; line-height: 1.5; color: #fff; font-weight: bold; display: block; } .top1 .swiper-slide>.ban4>i{ font-size: .18rem; line-height: 2; color: #fff; display: block; text-transform: uppercase; font-family: arial; } .top1 .swiper-slide>.ban5>p{ font-size: .6rem; font-weight: bold; color: #fff; /* text-transform: uppercase; */ font-family: arial; line-height: 1; } .top1 .swiper-slide>.ban5>b{ font-size: .36rem; color: #fff; display: block; margin: .4rem 0 .6rem 0; } .top1 .swiper-slide>.ban5>a{ display: block; font-size: .18rem; color: #fff; border: 1px solid #fff; width: 1.8rem; height: .5rem; line-height: .5rem; text-align: center; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .top1 .swiper-slide>.ban5>a:hover{ border: 1px solid transparent; background-color: #004eb9; color: #fff; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .top1 .swiper-slide>.ban1, .top1 .swiper-slide>.ban2, .top1 .swiper-slide>.ban4, .top1 .swiper-slide>.ban5, .top1 .swiper-slide>.ban3_1, .top1 .swiper-slide>.ban3_2, .top1 .swiper-slide>.ban3_3, .top1 .swiper-slide>.ban3_4 { position: absolute; top: 3.39rem; left: 1.6rem; transition: .8s; transform: translatey(50%); opacity: 0; } .top1 .swiper-slide>.ban1{ top: 3rem; } .top1 .swiper-slide>.ban2 { top: 2.6rem; width: 41%; } .top1 .swiper-slide>.ban3{ width: 29%; } .top1 .swiper-slide>.ban4{ top: 2.5rem; width: 45%; } .top1 .swiper-slide>.ban5 { top: 2.8rem; width: 36%; } .top1 .swiper-slide.ban3>div{ left:2.16rem; } .top1 .swiper-slide.ban3>div>p{ font-size: .32rem; font-weight: bold; color: #fff; } .top1 .swiper-slide.ban3>div>p span{font-size: 0.56rem;font-weight: bold;} .top1 .swiper-slide.ban3>div>b{ color: transparent; -webkit-text-stroke: 2px #ffffff; text-stroke: 2px #ffffff; font-size: .6rem; font-family: arial; opacity: 0.1; display: block; position: absolute; top: 0.3rem; left: 0; width: 200%; text-transform: uppercase; display: none; } .top1 .swiper-slide.ban3>div>i{ font-size: .18rem; font-family: arial; opacity: 0.15; display: block; color: #fff; text-transform: uppercase; display: none; font-family: arial; } .top1 .swiper-slide.ban3>.box1{top: 2rem;left: 1.55rem;position: absolute; } .top1 .swiper-slide.ban3>.box1 p{font-family: arial;font-size: 2rem;color: transparent; -webkit-text-stroke: 1px #ffffff; text-stroke: 1px #ffffff;} .top1 .swiper-slide.ban3>.box2{top: 7rem;left: 10.5rem;position: absolute;} .top1 .swiper-slide.ban3>.box2 p{font-family: arial;font-size: 2rem;} .top1 .swiper-slide>.ban3_1 { transform: translatey(100%); -webkit-transform: translatey(100%); -moz-transform: translatey(100%); -ms-transform: translatey(100%); -o-transform: translatey(100%); top: 3.1rem; width: 50%; } .top1 .swiper-slide>.ban3_2 { transform: translatey(100%); top: 4.1rem; left: 5rem; transition-delay: .15s; width: 50%; } .top1 .swiper-slide>.ban3_3 { transform: translatey(100%); top: 5.1rem; transition-delay: .3s; width: 50%; } .top1 .swiper-slide>.ban3_4 { transform: translatey(100%); top: 6.1rem; left: 6rem; transition-delay: .45s; width: 50%; } .top1 .swiper-slide-active>.ban1, .top1 .swiper-slide-active>.ban2, .top1 .swiper-slide-active>.ban4, .top1 .swiper-slide-active>.ban5, .top1 .swiper-slide-active>.ban3_1, .top1 .swiper-slide-active>.ban3_2, .top1 .swiper-slide-active>.ban3_3, .top1 .swiper-slide-active>.ban3_4 { opacity: 1; transform: translatey(0); -webkit-transform: translatey(0); -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); } .top1 .swiper-slide>.ban1{ /* width: 38%; */ width: 7rem; } .top1 .swiper-pagination { left: 92%; width: .7rem; bottom: 3rem; } .top1 .swiper-pagination>span::after { position: absolute; top: 39%; height: .12rem; width: .12rem; background-color: #fff; left: 39%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .top1 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { position: relative; width: .6rem; height: .6rem; display: block; background: transparent; opacity: .6; border-radius: 50%; border: 1px solid #ffffff; margin-top: .54rem; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top1 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active { opacity: 1; } /*****************************top2**************************/ .top2 { padding-top: 1.2rem; padding-right: 1.68rem; position: relative; padding-left: 1.68rem; /* background-image: url(/uploads/image/eshimg/map.png); */ } .top2>span { position: absolute; width: 45%; height: 65%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .top2>span>img{ width: 100%; height: auto; } .top2>span>ul{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } .top2>span>ul>li{ position: absolute; } .top2>span>ul>li:nth-child(1){ top: 15.5%; left: 27%; } .top2>span>ul>li:nth-child(2){ top: 21%; left: 42%; } .top2>span>ul>li:nth-child(3){ top: 23%; left: 39%; } .top2>span>ul>li:nth-child(4){ top: 24.3%; left: 40%; } .top2>span>ul>li:nth-child(5){ top: 29.5%; left: 37.5%; } .top2>span>ul>li:nth-child(6){ top: 31%; left: 42.5%; } .top2>span>ul>li:nth-child(7){ top: 33.5%; left: 43.5%; } .top2>span>ul>li:nth-child(8){ top: 34.5%; left: 39.5%; } .top2>span>ul>li:nth-child(9){ top: 35.5%; left: 35.5%; } .top2>span>ul>li:nth-child(10){ top: 40.5%; left: 40.2%; } .top2>span>ul>li:nth-child(11){ top: 59%; left: 5.2%; } .top2>span>ul>li:nth-child(12){ top: 66%; left: 37.2%; } .top2>span>ul>li>i{ display: block; width: .08rem; height: .08rem; /* border-radius: 50%; */ position: absolute; top: 30%; left: -.0rem; background-color: #626262; } .top2.on>span>ul>li>i{ left: -.1rem; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .top2>span>ul>li>i:nth-child(2){ animation-name: da0; animation-delay: 0s; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .top2>span>ul>li.on>i:nth-child(2){ animation-name: da; animation-delay: 0s; animation-duration: 2.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; } .top2>span>ul>li>i:nth-child(3){ animation-name: da; animation-delay: 0.5s; animation-duration: 2.5s; animation-timing-function: linear; animation-iteration-count: infinite; } .top2>span>ul>li>i:nth-child(4){ animation-name: da; animation-delay: 1s; animation-duration: 2.5s; animation-timing-function: linear; animation-iteration-count: infinite; } .top2>span>ul>li>p{ font-size: .16rem; position: relative; z-index: 10; } .top2>span>ul>li:nth-child(10)>p{ transform: translatey(-.1rem); } .top2>span>ul>li.on{ } .top2>span>ul>li.on>p { transform: translatey(-.1rem); } .top2>span>ul>li.on>i{ background-color: #004bb4; } .top2>span>ul>li.on>i:nth-child(2){ } .top2>span>ul>li.on>p{ color: #004bb4; transform: translatex(-130%); } .top2>.rt { width: 42%; position: relative; z-index: 10; } .top2>.rt>b { font-weight: bold; font-size: .5rem; color: #004bb4; display: block; transform: translatey(100%); opacity: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; -webkit-transform: translatey(100%); -moz-transform: translatey(100%); -ms-transform: translatey(100%); -o-transform: translatey(100%); } .top2>.rt>p { text-align: justify; font-size: .16rem; color: #333; margin-top: .45rem; line-height: 1.5; transform: translatey(100%); opacity: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; -webkit-transform: translatey(100%); -moz-transform: translatey(100%); -ms-transform: translatey(100%); -o-transform: translatey(100%); } .top2>.rt>p>i { color: #004bb4; display: inline; } .top2>.rt>a { width: 55%; color: #333; transform: translatey(100%); opacity: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; -webkit-transform: translatey(100%); -moz-transform: translatey(100%); -ms-transform: translatey(100%); -o-transform: translatey(100%); } .top2>.rt>b.on, .top2>.rt>a.on, .top2>.rt>p.on { opacity: 1; transform: translatey(0); -webkit-transform: translatey(0); -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); } .top2>.rt>a::after { background: #e5e5e5; } .top2>ul { display: flex; justify-content: space-between; padding-left: 1.6rem; margin-bottom: 1.3rem; margin-top: 1.4rem; position: relative; z-index: 10; } .top2>ul>li { width: 25%; text-align: center; } .top2>ul>li:first-child { text-align: center; } .top2>ul>li:last-child { text-align: right; } .top2>ul>li>b { font-size: .6rem; color: #004eb9; display: block; text-align: center; } .top2>ul>li>p { font-size: .16rem; color: #333; line-height: 2; text-align: center; } /* .top2>ul>li:nth-child(3)>p { text-align: right; } */ /*****************************top3**************************/ .top3 { width: 100%; position: relative; float: left; } .top3>img { opacity: 0; width: 100%; } .top3>.qie_tu { position: absolute; top: 0%; width: 100%; } .top3>.qie_tu>li { position: absolute; top: 0%; width: 100%; opacity: 0; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } .top3>.qie_tu>li>img { width: 100%; } .top3>.qie_tu>li.active { opacity: 1; } .top3>.qie_tu>li.active>img {} .top3>b { font-size: .36rem; color: #fff; position: absolute; z-index: 10; top: 1.5rem; } .top3>b.t3_b1 { left: 1.6rem; font-weight: bold; } .top3>b.t3_b2 { right: 1.6rem; font-weight: bold; } .top3>div {} .top3>div>ul { opacity: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top3.on>div>ul { opacity: 1; } .top3>div>ul>li { opacity: 0; position: absolute; top: 3rem; left: 1.6rem; width: 80%; transition: .8s; } .top3>div>ul>li>a{ width: 2.5rem; } .top3>div>ul>li>b { font-size: .3rem; color: #fff; display: block; } .top3>div>ul>li>p { font-size: .16rem; color: #fff; width: 60%; line-height: 2; margin-top: .39rem; margin-bottom: .1rem; text-align: justify; letter-spacing: 0px; } .top3>div>ul>li.active { opacity: 1; transition-delay: .8s; } .top3>.qie_an { position: absolute; bottom: 10%; left: .4rem; display: flex; justify-content: space-between; width: 95%; } .top3>.qie_an>i { display: block; width: 80%; position: absolute; top: .04rem; left: 10%; height: 1px; background: #ffffff7d; } .top3>.qie_an>li { font-size: .18rem; color: #ffffff8a; width: 25%; text-align: center; cursor: pointer; } .top3>.qie_an>li>i { display: block; width: .1rem; height: .1rem; border-radius: 50%; background: #fff; margin: 0 auto; margin-bottom: .3rem; position: relative; z-index: 10; } .top3>.qie_an>li>i>u { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; border-radius: 50%; transition: .8s; background: #008d50; } .top3>.qie_an>li>i>div { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; border-radius: 50%; transition: .8s; background: #fff; z-index: 10; } .top3>.qie_an>li>p { transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top3>.qie_an>li.active { color: #fff; } .top3>.qie_an>li.active>i>u { transform: scale(3); -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); } .top3>.qie_an>li.active>p {} /***********************top4************************/ .top4_1 { padding: 5% 8%; padding-bottom: .63rem; background: #f5f5f5; position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; } .top4_1>b { opacity: 0; transform: translatey(.5rem); transition: .8s; float: left; font-size: .52rem; color: #333; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; -webkit-transform: translatey(.5rem); -moz-transform: translatey(.5rem); -ms-transform: translatey(.5rem); -o-transform: translatey(.5rem); line-height: 1.3; } .top4_1>p { opacity: 0; transition: .8s; float: right; font-size: .18rem; text-align: right; line-height: 2; transform: translatey(.4rem); } .top4_1.on>p{ transform: translatey(0rem); opacity: 1; -webkit-transform: translatey(0rem); -moz-transform: translatey(0rem); -ms-transform: translatey(0rem); -o-transform: translatey(0rem); } .top4_1.on>b { font-weight: bold; opacity: 1; transform: translatey(0); -webkit-transform: translatey(0); -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); } .top4_2 { padding-bottom: 1.5rem; padding-left: 1.6rem; display: flex; position: relative; z-index: 10; } .top4_2>.lf { width: 85%; opacity: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top4_2.on>.lf { opacity: 1; } .top4_2>.lf>ul { float: left; width: 100%; position: relative; } .top4_2>.lf>ul>li { float: left; width: 100%; position: absolute; overflow: hidden; z-index: 1; opacity: 0; transition: .8s; } .top4_2>.lf>ul>li>p { font-size: .3rem; text-align: center; margin: .65rem 0 .4rem 0; color: #333; opacity: 0; } .top4_2>.lf>ul>li>div { width: 100%; position: relative; } .top4_2>.lf>ul>li>div .swiper-slide { transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top4_2>.lf>ul>li.active>div .swiper-slide { transform: translatex(-25%); -webkit-transform: translatex(-25%); -moz-transform: translatex(-25%); -ms-transform: translatex(-25%); -o-transform: translatex(-25%); } .top4_2>.lf>ul>li>div .swiper-slide-next { opacity: 1; } .top4_2>.lf>ul>li>div .swiper-slide-active { opacity: 1; } .top4_2>.lf>ul>li>div .swiper-slide>p { font-size: .26rem; text-align: left; margin: .65rem 0 .4rem 0; color: #333; } .top4_2>.lf>ul>li>div .swiper-slide>img { width: 100%; border-radius: 0 1.1rem 0 0; } .top4_2>.lf>ul>li.active { position: relative; z-index: 10; opacity: 1; } .top4_2>.rt { width: 15%; padding-top: 1.34rem; padding-bottom: .7rem; position: relative; } .top4_2>.rt>ul { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .top4_2>.rt>ul>li { font-size: .18rem; color: #333; text-align: left; position: relative; line-height: 1.5; cursor: pointer; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; width: 100%; } .top4_2>.rt>ul>li.active { color: #004bb4; } .top4_2>.rt>ul>li::after { width: .4rem; height: 1px; position: absolute; top: 49%; right: -0.4rem; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top4_2>.rt>ul>li::before { width: 1.4rem; height: 1px; position: absolute; top: 49%; left: -60%; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top4_2>.rt>ul>li.active::after { background: #004bb4; } .top4_2>.rt>ul>li.active::before { background: #004bb4; } .top4_2>.rt>div { width: 100%; /* margin-top: 29%; */ position: absolute; bottom: 0%; } .top4_2>.rt>div>ul { width: 100%; } .top4_2>.rt>div>ul>li { width: 100%; display: flex; justify-content: flex-start; padding-left: 0%; position: absolute; top: 0; opacity: 0; z-index: 1; } .top4_2>.rt>div>ul>li>div { width: .46rem; height: .46rem; position: relative; background: none; cursor: pointer; margin-left: 0%; margin-right: 5%; } .top4_2>.rt>div>ul>li>div:last-child { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .top4_2>.rt>div>ul>li>div>img { transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; width: 100%; } .top4_2>.rt>div>ul>li>div>img:last-child { position: absolute; top: 0; opacity: 0; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .top4_2>.rt>div>ul>li>div:hover>img:last-child { opacity: 1; } .top4_2>.rt>div>ul>li.active { position: relative; z-index: 10; opacity: 1; } /*******************************top5***********************/ .top5 { position: relative; z-index: 10; } .top5>img { width: 100%; } .top5>.t5_1 { position: absolute; top: 1rem; padding: 0 1.6rem; } .top5>.t5_1>p { font-size: .52rem; font-weight: bold; color: #fff; } .top5>.t5_1>ul { width: 30%; display: flex; justify-content: space-between; } .top5>.t5_1>ul>li { font-size: .18rem; color: #fff; position: relative; padding-bottom: .1rem; cursor: pointer; } .top5>.t5_1>ul>li::after { position: absolute; bottom: 0; left: 0; width: 100%; background: #fff; height: 2px; transform: scalex(0); transition: .8s; } .top5>.t5_1>ul>li:hover::after { transform: scalex(1); -webkit-transform: scalex(1); -moz-transform: scalex(1); -ms-transform: scalex(1); -o-transform: scalex(1); } .top5>.t5_1>ul>li.active::after { transform: scalex(1); -webkit-transform: scalex(1); -moz-transform: scalex(1); -ms-transform: scalex(1); -o-transform: scalex(1); } .top5>.t5_2 { width: 100%; position: absolute; top: 2.29rem; padding: 0 1.6rem; } .top5>.t5_2>ul { position: relative; width: 100%; } .top5>.t5_2>ul>li { position: absolute; width: 100%; top: 0%; opacity: 0; transition: .8s; transition-delay: 0.5s; } .top5>.t5_2>ul>li.active { opacity: 1; z-index: 5; transition-delay: 0s; } .top5>.t5_2>ul>li>ul { width: 100%; opacity: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top5>.t5_2>ul>li>ul.on { opacity: 1; } .top5>.t5_2>ul>li>ul>li { width: 100%; position: absolute; top: 0; opacity: 0; transition: .8s; transition-delay: .5s; box-shadow: 0px 35px 25px 1px rgba(0, 0, 0, 0.07); } .top5 li>img { width: 100%; } .top5>.t5_2>ul>li>ul>li.active { opacity: 1; transition-delay: 0s; z-index: 1; } .top5>.t5_2>ul>li>div { float: left; width: 90%; position: absolute; top: 5.5rem; background: #fff; padding: 2% 0; left: 5%; z-index: 2; /* z-index: 10; */ } .top5>.t5_2>ul>li>div>ul { position: relative; width: 10%; transform: translate(.2rem, -.17rem); } .top5>.t5_2>ul>li>div>ul.t5_ul2 { transform: translate(-.15rem, -.17rem); } .top5>.t5_2>ul>li>div>ul>li { position: absolute; top: 0%; opacity: 0; transition: .8s; width: 100%; /* transform: translatey(.1rem); */ } .top5>.t5_2>ul>li>div>ul>li.active { opacity: 1; } .top5>.t5_2>ul>li>div>div { font-size: .16rem; color: #333; position: relative; display: flex; justify-content: space-between; width: 60%; margin-left: 20%; float: left; line-height: .46rem; } .top5>.t5_2>ul>li>div>div>span { width: .46rem; height: .46rem; position: relative; cursor: pointer; } .top5>.t5_2>ul>li>div>div>span:first-child>img:nth-child(2) { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .top5>.t5_2>ul>li>div>div>span:last-child>img:nth-child(1) { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .top5>.t5_2>ul>li>div>div>span>img { position: absolute; opacity: 0; transition: .8s; width: 100%; } .top5>.t5_2>ul>li>div>div>span>img:nth-child(1) { opacity: 1; } .top5>.t5_2>ul>li>div>div>span:hover>img { opacity: 1; } .top5>.t5_2>ul>li>div>div>span:hover>img:nth-child(1) { opacity: 0; } .top5>.t5_2>ul>li>div>div>ul { position: relative; width: 80%; } .top5>.t5_2>ul>li>div>div>ul>li { position: absolute; width: 100%; text-align: center; transition: .8s; opacity: 0; } .top5>.t5_2>ul>li>div>div>ul>li.active { opacity: 1; } /****************************top6***********************/ .top6 { padding: 1.5rem 1.6rem; padding-top: .5rem; position: relative; z-index: 10; } .top6>h3 { font-size: .52rem; color: #333; margin-bottom: .6rem; } .top6>.lf { width: 37%; position: relative; } .top6>.lf>ul { position: absolute; width: 100%; top: 0; } .top6>.lf>ul>li { position: absolute; z-index: 1; opacity: 0; transition: .8s; top: 0; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top6>.lf>ul>li.active { opacity: 1; z-index: 10; } .top6>.lf>ul.cheng { position: relative; } .top6>.lf>ul.cheng>li { position: relative; } .top6>.lf>ul>li>span { overflow: hidden; width: 100%; display: block; margin-bottom: .41rem; } .top6>.lf>ul>li>span>img { width: 100%; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; } .top6>.lf>ul>li>span:hover>img { /* transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); */ } .top6>.lf>ul>li>i { font-size: .16rem; color: #333; display: block; } .top6>.lf>ul>li>b { font-weight: bold; font-size: .3rem; color: #333; margin: .32rem 0 .5rem 0; width: 100%; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .top6>.lf>ul>li>p { font-size: .16rem; line-height: 2; color: #999; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .top6>.lf>ul>li>a { width: 50%; color: #333; margin-top: .9rem; } .top6>.lf>ul>li>a::after { background: rgba(0, 0, 0, .1); } .top6>.lf>.rt { width: 20%; display: flex; justify-content: space-between; padding-top: .92rem; } .top6>.lf>.rt>span { width: .46rem; cursor: pointer; height: .46rem; position: relative; transform: rotate(180deg); z-index: 10; } .top6>.lf>.rt>span:last-child { transform: rotate(0deg); } .top6>.lf>.rt>span>img { position: absolute; opacity: 0; transition: .8s; width: 100%; } .top6>.lf>.rt>span>img:nth-child(1) { transform: rotate(180deg); opacity: 1; } .top6>.lf>.rt>span:hover>img { opacity: 1; } .top6>.lf>.rt>span:hover>img:nth-child(1) { opacity: 0; } .top6>.rt { width: 55%; border-top: 1px solid #c9c9ca; border-bottom: 1px solid #c9c9ca; opacity: 0; transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -ms-transition: 1.5s; -o-transition: 1.5s; } .top6.on>.rt { opacity: 1; } .top6>.rt>ul { width: 100%; float: left; display: flex; justify-content: space-between; flex-wrap: wrap; } .top6>.rt>ul>li { width: 44%; /* border-bottom: 1px solid transparent; */ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; position: relative; min-height: 1.5rem; } .top6>.rt>ul>li::after { position: absolute; bottom: 0%; left: 0%; height: 1px; width: 0%; background-color: #004bb4; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } .top6>.rt>ul>li:hover::after { width: 100%; } .top6>.rt>ul>li i { font-size: .16rem; color: #646464; display: block; font-family: harmonyos_sans_sc_light; margin: .36rem 0 .23rem 0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .top6>.rt>ul>li p { font-size: .18rem; color: #333333; /* margin-bottom: .49rem; */ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .top6>.rt>ul>li:hover p, .top6>.rt>ul>li:hover i { color: #004bb4; } @media screen and (max-width:2560px) and (min-width:1930px) { /* .top3>.qie_an { bottom: -20%; } */ .top1 { min-height: 10rem; } .top1 .swiper-pagination { bottom: 2.5rem; } .top1 .swiper-slide>.ban3_1 { top: 2.4rem; } .top1 .swiper-slide>.ban5 { top: 3rem; } .top1 .swiper-slide>.ban3_4 { /* top: 8.9rem; */ top: 8.3rem; } .top1 .swiper-slide>.ban3_3 { /* top: 6.8rem; */ top: 6.3rem; } .top1 .swiper-slide>.ban3_2 { /* top: 4.5rem; */ top: 4.2rem; } .top1 .swiper-slide>.ban4 { top: 3.5rem; width: 40%; } } .ph_top3{ position: relative; z-index: 10; padding: 100px 50px; background: #fafafa; } .ph_top3>b{ display: block; font-size: 48px; font-weight: bold; } .ph_top3>p{ font-size: 30px; margin-bottom: 60px; margin-top: 25px; } .ph_top3>ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .ph_top3>ul>li{ width: 47%; font-size: 24px; text-align: center; color: #333; padding: 14px 0; margin-bottom: 30px; border: 1px solid #e5e5e5; transition: .5s; } .ph_top3>ul>li.active{ background: #014099; color: #fff; } .ph_top3>div{ margin-top: 30px; } .ph_top3>div>div{ position: absolute; opacity: 0; transition: 0s; z-index: 0; } .ph_top3>div>div.active{ position: relative; z-index: 10; opacity: 1; transition: 0.5s; } .ph_top3>div>div>span{ } .ph_top3>div>div>b{ display: block; font-size: 36px; margin: 40px 0 30px 0; font-weight: bold; } .ph_top3>div>div>p{ font-size: 18px; color: #646464; line-height: 2; text-align: justify; } .ph_top3>div>div>a{ display: block; padding: 16px 30px; font-size: 18px; color: #fff; width: max-content; background: #014099; margin-top: 40px; } .ph_top4{ position: relative; z-index: 10; padding: 80px 50px; padding-right: 0; background-image: url(/uploads/image/eshimg/top4_ph_bg.png); overflow: hidden; } .ph_top4>h3{ font-size: 48px; line-height: 1; color: #fff; } .ph_top4>b{ display: block; font-size: 30px; margin: 30px 0; color: #fff; } .ph_top4>p{ font-size: 18px; line-height: 2; color: #fff; margin-bottom: 70px; padding-right: 50px; text-align: justify; } .ph_top4>.ph_t41{ float: left; overflow: auto; width: 100%; } .ph_top4>.ph_t41>ul{ float: left; width: 350%; margin-bottom: 50px; } .ph_top4>.ph_t41>ul>li{ font-size: 24px; color: #fff; opacity: .6; transition: .5s; float: left; padding: 10px 0; line-height: 1; margin-right: 45px; border-bottom: 4px solid transparent; } .ph_top4>.ph_t41>ul>li.active{ font-size: 30px; opacity: 1; border-bottom: 4px solid #fff; } .ph_top4>.ph_t42{ float: left; width: 100%; } .ph_top4>.ph_t42 img{border-radius: 0 1rem 0 0;} .ph_top4>.ph_t42>ul{ float: left; width: 100%; } .ph_top4>.ph_t42>ul>li{ float: left; width: 100%; position: absolute; overflow: hidden; z-index: 1; opacity: 0; transition: 0.8s; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s; padding: 0 50px; transform: translatex(10%); -webkit-transform: translatex(10%); -moz-transform: translatex(10%); -ms-transform: translatex(10%); -o-transform: translatex(10%); } .ph_top4>.ph_t42>ul>li.active{ padding: 0 0px; transition: 0.8s; position: relative; z-index: 10; opacity: 1; transform: translatex(0%); -webkit-transform: translatex(0%); -moz-transform: translatex(0%); -ms-transform: translatex(0%); -o-transform: translatex(0%); -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s; transition-delay: .8s; } .ph_top4>.ph_t42>ul>li p{ font-size: 18px; line-height: 1; color: #fff; margin: 30px 0; } @media screen and (max-width:2160px) and (min-width:1930px) { .top1 .swiper-slide>.ban3_1 { top: 2.8rem; } .top6>.rt>ul>li::after { bottom: -1.5%; } .top1 .swiper-slide>.ban5 { top: 4rem; } .top1 .swiper-slide>.ban3_4 { top: 9.4rem; } .top1 .swiper-slide>.ban3_3 { top: 7.38rem; } .top1 .swiper-slide>.ban3_2 { top: 5rem; } .top1 .swiper-slide>.ban1{ top: 4.39rem; } .top1 .swiper-slide>.ban2 { top: 4rem; } .top1 .swiper-slide>.ban4, .top1 .swiper-slide>.ban5 { top: 3.47rem; } .top1 .swiper-pagination { bottom: 3.5rem; } .top6>.lf>ul>li>a { margin-top: .6rem; } } @media screen and (max-width:1680px) { .top1 { min-height: 740px; } .top1 .swiper-slide>.ban5 { width: 40%; } /* .top2>ul>li { width: 12%; } */ .top2>ul>li:nth-child(3)>p { text-align: center; } } @media screen and (max-width:1560px) { .top1 { min-height: 700px; } .top5>.t5_1>ul { width: 40%; } .top1 .swiper-pagination { bottom: 2.5rem; } .top1 .swiper-slide>.ban5 { width: 40%; } .top1 .swiper-slide>.ban4 { /* width: 66%; */ } .top1 .swiper-slide>.ban3_2 { width: 55%; } } @media screen and (max-width:1440px) { .top2>.rt { width: 43%; } .top5>.t5_1>ul { width: 50%; } .top1 .swiper-slide>.ban4 { top: 3.5rem; } .top2>ul>li { width: 25%; } .top1 .swiper-slide>.ban3_2 { top: 4.3rem; } .top1 { min-height: 800px; } .top1 .swiper-slide>.ban3_1 { top: 3.5rem; } .top6>.rt>ul>li { width: 49%; } .top6>.lf>ul>li>a { margin-top: .85rem; } .top1 .swiper-slide>.ban3_3 { top: 6.8rem; } .top2>ul>li:nth-child(3)>p { text-align: center; } .top1 .swiper-slide>.ban3_4 { top: 9rem; } .top1 .swiper-slide-active>.ban1{ /* width: 38%; */ /* width: 7.2rem; */ } .top3>.qie_an>li, .top6>.rt>ul>li p, .top5>.t5_1>ul>li, .top1 .swiper-slide>.ban2>i, .top1 .swiper-slide>.ban4>i, .top4_1>p{ font-size: 16px; } .top2>.rt>p, .top6>.lf>ul>li>p, .top2>ul>li>p , .top3>div>ul>li>p, .top5>.t5_2>ul>li>div>div{ font-size: 14px; } .top4_2>.rt>ul>li { font-size: 16px; line-height: 1.3; margin-bottom: 6%; } .top6>.lf>ul>li>a { width: 60%; } a.lj { font-size: 14px; width: 4.5rem; } .top3>div>ul>li>p { width: 60%; } .top2>.rt>a { width: 60%; } .top2 { padding-top: 0.8rem; } .top2>ul { margin-bottom: 1.3rem; margin-top: 1.6rem; } } @media screen and (max-width:1400px) { .top6>.rt>ul>li { width: 47%; } .top1 .swiper-slide>.ban4 { /* width: 41%; */ } } @media screen and (max-width:1366px) { .top3>div>ul>li>a{ width: 20%; } .top1 { min-height: 700px; } .top1 .swiper-slide>.ban3_1 { top: 1.6rem; } .top1 .swiper-slide>.ban3_2 { top: 4rem; } .top1 .swiper-slide>.ban3_3 { top: 6.3rem; } .top1 .swiper-slide>.ban3_4 { top: 8.2rem; } .top3>div>ul>li>p { line-height: 1.5; } .top3>div>ul>li { top: 2.6rem; } } @media screen and (max-width:1280px) { .top1 { min-height: 650px; } .top1 .swiper-slide>.ban2 { top: 3.5rem; } .top1 .swiper-slide>.ban5 { top: 3.2rem; } .top1 .swiper-slide>.ban4 { top: 3.3rem; width: 50%; } .top6>.rt>ul>li { width: 45%; } .top2>ul>li { width: 25%; } .dh>.rt { width: 80%; } .top6>.lf>ul>li>a { margin-top: .85rem; } .top4_1 { padding: 5% 5%; } .top2>.rt>a{ width: 65%; } .top2>ul { margin-bottom: 0.6rem; margin-top: 0.6rem; } .top1 .swiper-slide>.ban3_2 { top: 4.3rem; } .top1 .swiper-slide>.ban3_3 { top: 6.6rem; } .top1 .swiper-slide>.ban3_4 { top: 8.8rem; } } @media screen and (max-width:1024px) { .top1 .swiper-slide>.ban1>p, .top1 .swiper-slide>.ban4>i { font-size: 22px; opacity: .8; } .top1 .swiper-slide.ban3>div>b { top: 40%; } .top1 .swiper-slide>.ban3_1 { top: 10%; } .top1 .swiper-slide>.ban3_2 { top: 20%; left: 35%; } .top1 .swiper-slide>.ban3_3 { top: 30%; } .top1 .swiper-slide>.ban3_4 { top: 40%; } .top1 { min-height: 1634px; } .top1 .swiper-slide>.ban2>i{ font-size: 14px; } .top1 .swiper-slide>.ban4>b{ /* text-align: justify; */ } .top5>.t5_1>ul>li{ font-size: 24px; } /* .top1 .swiper-slide>.ban2>i{ font-size: 22px; } */ .top1 .swiper-slide>.ban4>p { font-size: 30px; } .top1 .swiper-slide>.ban4>p>i { height: 15px; top: -17%; } .top1 .swiper-slide>.ban4>p>i:nth-child(2) { top: -23px; } .top1 .swiper-slide.ban3>div>i{ font-size: 18px; } .top1 .swiper-slide.ban3>div>b{ font-size: 50px; } .top1 .swiper-slide-active>.ban1, .top1 .swiper-slide>.ban1{ width: 70%; padding: 33px 0; left: 50px; top: 225px; } .top1 .swiper-slide>.ban4{ width: 85%; left: 50px; /* top: 33%; */ top: 225px; } .top1 .swiper-slide>.ban1>b, .top1 .swiper-slide.ban3>div>p, .top1 .swiper-slide>.ban5>b, .top1 .swiper-slide>.ban4>b{ font-size: 40px; } .top1 .swiper-slide>.ban2>b{ font-size: 56px; } .top1 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { position: relative; width: 28px; height: 28px; margin-right: 60px; display: inline-block; } .top1 .swiper-pagination { bottom: 0; width: 100%; left: 0%; } .top1 .swiper-slide>.ban2 { top: 225px; width: 85%; left: 50px; } .top1 .swiper-slide>.ban5{ width: 85%; left: 50px; top: 225px; } .top1 .swiper-slide>.ban2>p { font-size: 23px; } .top1 .swiper-slide>.ban3_1, .top1 .swiper-slide>.ban3_2{ width: 100%; } .top1 .swiper-slide>.ban3_3, .top1 .swiper-slide>.ban3_4{ width: 80%; left: 10%; } .top1 .swiper-slide>.ban5>p { font-size: 54px; } .top1 .swiper-slide>.ban5>a { font-size: 18px; width: 180px; height: 50px; line-height: 50px; } .top2>span{ /* display: none; */ } .top2>.rt { width: 100%; padding: 0 50px; } .top2>.rt>b { font-size: 48px; color: #333; text-align: center; } .top2>.rt>p{ font-size: 18px; } .top2>.rt>a { width: 350px; height: 50px; line-height: 50px; background: #014099; color: #fff; font-size: 18px; display: block; text-align: center; margin: 0 auto; margin-top: 40px; } .top2>ul{ flex-wrap: wrap; padding: 60px 10% 0 10%; } .top2>ul>li { width: 25%; } .top2>ul>li>b { font-size: 52px; font-weight: 500; /* text-align: left !important; */ } .top2>span>img { width: 100%; height: auto; } .top2>ul>li>p{ font-size: 18px; /* text-align: left !important; */ } .top2 { padding-right: 0; padding-top: 80px; } .ph_dh { padding: 0 50px; } .top5 { margin-bottom: 33%; } .top5>.t5_1>p, .top6>h3 { font-size: 48px; text-align: center; } .top5>.t5_2 { top: 60%; } .top5>.t5_1>ul { width: 100%; justify-content: space-evenly; margin-top: 60px; } .top5>.t5_2>ul>li>div{ top: 440px; } .top5>.t5_2>ul>li>div>div>span, .top6>.lf>.rt>span { width: 46px; height: 46px; } .top6 { padding: 1.5rem 50px; } .top5>.t5_2>ul>li>div>div>ul { line-height: 46px; font-size: 18px; } .top5>.t5_2>ul>li>div>div { width: 80%; margin-left: 10%; } .top6>.lf, .top6>.rt { width: 100%; } .top6>.lf>ul>li>i{ font-size: 18px; } .top6>.lf>ul>li>b{ font-size: 36px; } .top6>.lf>ul>li>p{ font-size: 18px; color: #646464; -webkit-line-clamp: 4; } .top6>.lf>ul>li>a{ color: #333; font-size: 18px; width: 280px; } .top6>.lf>ul>li>a::after{ background-color: #e5e5e5; } .top6>.lf>ul>li>a>i{ width: 50px; height: 50px; right: 20%; } .top6>.lf>.rt { width: 13%; padding-top: 1rem; } .top6>.lf { margin-bottom: 60px; } .top6>.rt { position: relative; border-top: 10px solid transparent; border-bottom: none; } .top6>.rt::before { top: -10px; left: -10%; width: 120%; background-color: #f8f8f8; height: 10px; } .top6>.rt>ul>li { width: 100%; border-bottom: 1px solid #dcdcdc; padding-bottom: 30px; } .top6>.rt>ul>li i { font-size: 18px; margin-top: 40px; margin-bottom: 20px; } .top6>.rt>ul>li p{ font-size: 24px; } } @media screen and (max-width:768px) { .top1 .swiper-slide>.ban4>i { line-height: 1.5; } .top2>.rt>a { width: 300px; } .ph_top3>div>div>p, .ph_top4>p{ text-align: left; } .top1 .swiper-slide>.ban3_2 { left: 10%; } .top1 { min-height: 1334px; } .top1 .swiper-slide.ban3>.box1{top:2.5rem;} .top1 .swiper-slide.ban3>.box1 p{font-size: 3.5rem;} .top1 .swiper-slide.ban3>.box2{top: 35%;left:80%;} .top1 .swiper-slide.ban3>.box2 p{font-size: 3.5rem;} .top1 .swiper-slide.ban3>div>p span{font-size: 1.3rem;} .top1 .swiper-slide>.ban3_1 { top: 15%; } .top1 .swiper-slide>.ban3_2 { width: 70%; top:20%; } .top1 .swiper-slide>.ban3_3 { width: 90%; top:25%; } .top1 .swiper-slide>.ban3_4 { top: 30%; width: 80%; } .top1 .swiper-slide>.ban1>b, .top1 .swiper-slide.ban3>div>p, .top1 .swiper-slide>.ban5>b, .top1 .swiper-slide>.ban4>b{font-size: 24px;} .top5>.t5_2>ul>li>ul>li { box-shadow: 0px 10px 10px 1px rgb(0 0 0 / 7%); } .top4_2>.rt>ul>li { line-height: 2.5; } .dh>.rt>div>p>i { margin-top: 3%; } .dh>.rt>ul>li { margin-right: 4%; } .top3>div>ul>li>a{ width: 30%; } .top1 .swiper-slide-active>.ban1, .top1 .swiper-slide>.ban1 { width: 68%; } .top2>ul>li { width: 50%; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 40px 10%; padding-left:130px; padding-right: 0; } .top2>ul>li:nth-child(2), .top2>ul>li:nth-child(4){ padding-left: 50px; } .top2>ul { flex-wrap: wrap; padding: 0; margin-bottom: 0; } .top5>.t5_2 { top: 75%; } .top5>.t5_2>ul>li>div { top: 325px; padding: 0; } .top5>.t5_1>ul { margin-top: 50px; } .top5>.t5_1>ul>li{padding: 0 0.50rem;} .top6>.lf>.rt { width: 18%; padding-top: 1rem; } } @media screen and (max-width:540px) { .ph_top4>p{ padding-right: 0px; } .top2>.rt>p { transform: translatey(20%); -webkit-transform: translatey(20%); -moz-transform: translatey(20%); -ms-transform: translatey(20%); -o-transform: translatey(20%); } .top1 .swiper-slide>.ban5>a { font-size: 14px; width: 120px; height: 40px; line-height: 40px; margin-top: 50px; } .top1 .swiper-slide.ban3>div>i { font-size: 12px; } .top1 .swiper-slide.ban3>div>b { font-size: 25px; } .top1 .swiper-slide.ban3>.box1{top:3.5rem;} .top1 .swiper-slide.ban3>.box1 p{font-size: 3.5rem;} .top1 .swiper-slide.ban3>.box2{top: 43%;left:86%;} .top1 .swiper-slide.ban3>.box2 p{font-size: 3.5rem;} .top1 .swiper-slide.ban3>div>p span{font-size: 1rem;} .top1 .swiper-slide>.ban3_1 { top: 13%; } .top1 .swiper-slide>.ban3_2 { width: 83%; top:16.5%; } .top1 .swiper-slide>.ban3_3 { width: 88%; top:21.5%; } .top1 .swiper-slide>.ban3_4 { top: 29%; width: 90%; } .top1 { min-height: 568px; } .top1 .swiper-slide>.ban1>b, .top1 .swiper-slide.ban3>div>p, .top1 .swiper-slide>.ban2>b, .top1 .swiper-slide>.ban5>b, .top1 .swiper-slide>.ban4>b { font-size: 15px; line-height: 1rem; } .top1 .swiper-slide>.ban1>p, .top1 .swiper-slide>.ban2>i, .top1 .swiper-slide>.ban4>i { font-size: 14px; opacity: .8; letter-spacing: 0.1px; } .top1 .swiper-slide-active>.ban1, .top1 .swiper-slide>.ban1 { width: 75%; padding: 15px 0; left: 30px; top: 25%; } .top1 .swiper-slide>.ban2>b { font-size: 28px ; line-height: 1.8rem; } .ph_dh { padding: 0 30px; } .top1 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin-right: 20px; } .top1 .swiper-pagination>span::after { top: 32%; height: 10px; width: 10px; left: 32%; } .top1 .swiper-pagination { bottom: 3%; } .top1 .swiper-slide>.ban2, .top1 .swiper-slide>.ban4, .top1 .swiper-slide>.ban5 { top: 25%; left: 30px; } .top1 .swiper-slide>.ban5>p, .top6>.lf>ul>li>b, .ph_top4>.ph_t41>ul>li.active { font-size: 20px; } .top2 { padding-right: 0; padding-top: 40px; } .top2>.rt>b, .ph_top4>h3, .top5>.t5_1>p, .top6>h3, .ph_top3>b { font-size: 30px; } .top2>.rt>p, .ph_top4>.ph_t41>ul>li, .top6>.lf>ul>li>p, .top6>.lf>ul>li>a, .top5>.t5_1>ul>li { font-size: 16px; } .top2>.rt>p{ text-align: left; } .top6>.lf>ul>li>i, ul.me1>li>a{ font-size: 14px; } .top2>.rt{ padding: 0 30px; } .top2>ul>li { padding-left: 5%; padding-right: 5%; } .top2>ul>li:nth-child(2), .top2>ul>li:nth-child(4) { padding-left: 5%; } .top5>.t5_1>ul { margin-top: 20px; } .ph_top4>.ph_t41>ul>li { margin-right: 20px; } .top5>.t5_2 { top: 85%; } .top6>.lf>ul>li>a>i { width: 35px; height: 35px; right: 25%; top: -30%; } .ph_top4>p { margin-bottom: 30px; } .top5>.t5_2>ul>li>div>div>span, .top6>.lf>.rt>span { width: 35px; height: 35px; } .top6>.lf>.rt { width: 30%; padding-top: .7rem; } .top6>.lf { margin-bottom: 30px; } .top6>.rt>ul>li p { font-size: 18px; } .top6>.rt>ul>li { padding-bottom: 15px; } .top6>.rt>ul>li i { font-size: 14px; margin-top: 20px; margin-bottom: 10px; } .top6>.lf>ul>li>a { width: 250px; } .top5>.t5_2>ul>li>div>div { width: 100%; margin-left: 0%; } .top5 { margin-bottom: 50%; } .top5>.t5_2>ul>li>div { top: 165px; padding: 0; width: 100%; left: 0%; } .top5>.t5_2>ul>li>div>div>ul { font-size: 13px; line-height: 35px; } .top6 { padding: 1.5rem 30px; } .top5>.t5_1>ul>li { text-align: center; padding: 0 0.50rem; } .ph_top4>.ph_t41>ul { float: left; width: 2150px; margin-bottom: 25px; } .ph_top4>.ph_t42>ul>li p { font-size: 16px; margin: 15px 0; line-height: 1.6; } .top2>ul>li>p { font-size: 14px; } .ph_top3>div>div>b, .ph_top4>b{ font-size: 22px; } .top2>ul>li>b { font-size: 32px; } .ph_top3>div>div>p, .ph_top4>p{ font-size: 16px; } .top6 { overflow-x: hidden; } .ph_top3>div>div>a { padding: 12px 20px; font-size: 16px; max-width: 100%; } .ph_top3 { padding: 50px 30px } .ph_top3>p { font-size: 22px; margin-bottom: 30px; margin-top: 10px; } .ph_top3>ul>li { width: 49%; font-size: 14px; } .ph_top3>div>div>b { margin: 20px 0 15px 0; } .ph_top4 { padding: 40px 30px; } .ph_top4>b{ /* padding-right: 30px; */ } .top1 .swiper-slide>.ban4>p { font-size: 20px; } .top1 .swiper-slide>.ban4>p>i { height: 10px; top: -14%; } .top1 .swiper-slide>.ban4>p>i:nth-child(2) { top: -13px; } .top1 .swiper-slide>.ban2>p { font-size: 14px; } } @media screen and (max-width:320px){ .ph_top4>p { padding-right: 0px; } .top1 .swiper-slide-active>.ban1, .top1 .swiper-slide>.ban1 { width: 85%; } }