* { margin: 0; padding: 0; } a { text-decoration: none; } @font-face { font-family: iconfont; src: url("../fonts/font_1334554_s9gfj6ofc89.eot"); src: url("../fonts/font_1334554_s9gfj6ofc89.eot?#iefix") format('embedded-opentype'),url(../fonts/font_1334554_s9gfj6ofc89.woff2) format('woff2'),url(../fonts/font_1334554_s9gfj6ofc89.woff) format('woff'),url(../fonts/font_1334554_s9gfj6ofc89.ttf) format('truetype'),url(../fonts/font_1334554_s9gfj6ofc89.svg#iconfont) format('svg'); } @font-face { font-family: LemonMilk; src: url("../fonts/LemonMilk.otf"); } @font-face { font-family: montserrat; src: url("../fonts/montserrat-bold-webfont.woff2"); } @font-face { font-family: Exo2; src: url("../fonts/Exo2.0-Thin-webfont.eot"); } .pages { width: 100%; height: 40px; position: relative; overflow: hidden; margin-bottom: 50px; } .m2If-wrap2 ul li .m2IfW2-img{ background: center center no-repeat; background-size: cover; } .pages a { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; float: left; margin-right: 10px; color: rgba(0,0,0,.5); background: rgba(0,0,0,.1); cursor: pointer; } canvas { position: absolute; left: 0; top: 0; z-index: 100; } .pages a.active { background: #e00018; color: #fff; } .sub_banner { overflow: hidden; position: relative; -webkit-transition: all .5s; } nav ul .level1 .sn { display: none; } .sub_banner .s { width: 100%; height: auto; position: relative; } .sub_banner img { opacity: 0; visibility: hidden; filter:contrast(2.5) brightness(2.5); -webkit-transition: all 1s; -webkit-transform: scale(1.05); } ._w1200.ndbox{ width: 1000px; background: #fff; padding: 50px 50px 100px; box-shadow: 0px 0px 15px rgba(0,0,0,.1); margin-top: -100px; } .nd_title{ width: 100%; font-size: 36px; color: #c30813; line-height: 2.2; position: relative; padding-bottom: 10px; } .nd_title::after{ width: 40px; height: 5px; content: ''; position: absolute; left: 0px; bottom: 5px; background: #c30813; } .slogan { opacity: 0; -webkit-transition: all 1s; -webkit-transform: scale(1.05); -webkit-transition-delay: .1s; } .slogan.active { opacity: 1; -webkit-transform: scale(1); } .sub_banner.active img { filter: contrast(1) brightness(1); opacity: 1; visibility: visible; -webkit-transform: scale(1); } #moon_banner .pic, .picBox .pic { position: absolute; top: 0; width: 100%; height: 100%; background-position: center bottom; background-size: cover; opacity: 0; visibility: hidden; filter:contrast(2.5) brightness(2.5); -webkit-transition: all 1s; -webkit-transform: scale(1.05); } #moon_banner .picBox.active .pic, .picBox.active .pic { filter: contrast(1) brightness(1); opacity: 1; visibility: visible; -webkit-transform: scale(1); } nav { width: 100%; background: rgba(255,255,255,0); height: 80px; position: fixed; top: 0; z-index: 100; padding: 0 3%; transition: ease .5s; } nav::before { width: 100%; height: 200px; background: url("../images/header_bg.png") repeat-x; content: ''; position: absolute; left: 0; top: 0; -webkit-transition: all .5s; } nav.navActive::before { top: -200px; } nav .line { position: absolute; top: 80px; height: 1px; width: 100%; background: rgba(0,0,0,.1); left: 0; transition: ease .5s; display: none; } .navActive { background: #fff; } .navColor { color: #000!important; } nav .logo { float: left; width: 107px; z-index: 9; position: absolute; transition: ease .5s; height: 42px; margin-top: 19px; display: block; } @media screen and (min-width: 1024px) {nav .logo img { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: ease .5s; }} @media screen and (max-width: 1024px) {nav .logo img { width: 70%; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: ease .5s; }} nav .logo img:nth-child(1) { opacity: 1; } .nav-right { width: 100%; right: 0; text-align: center; background-color: rgba(255,255,255,0); height: 100%; position: absolute; transition: .5s all ease; box-shadow: 10px 1px 10px 1px rgba(128,128,128,0); overflow: hidden; } .nav-right > ul { position: relative; width: 75%; } .nav-right:after { content: ''; position: absolute; background-image: url("../images/qgjcmt.jpg"); width: 100%; height: 475px; left: 0; opacity: 0; transition: .5s all ease; top: 0; } .nav.navActive .nav-right:after { top: 60px; } nav ul { right: 0; position: relative; transition: .5s all ease; width: 100%; float: right; z-index: 5; height: 100%; } nav ul .level1 { line-height: 80px; list-style: none; width: 14.28%; height: 100%; float: left; font-size: 16px; font-weight: 400; transition: .5s all ease; cursor: pointer; position: relative; } nav ul .level1 a { color: #fff; position: relative; display: block; } nav ul .level1 > a:after { content: ''; bottom: 0; right: 0; width: 0; height: 2px; background: #e00018; position: absolute; transition: ease .5s; } nav ul .level1 > a.activeNav:after { width: 40%; left: 30%; top: 0; } nav ul .level1 span { font-size: 25px; line-height: 60px; } nav ul .level1 ul { width: 100%; list-style: none; padding: 0; margin-top: 0; height: 340px; } nav ul .level1:hover ul { background: rgba(0,0,0,.1); } nav ul .level1 ul li { line-height: 40px; height: 40px; width: 100%; position: relative; font-size: 14px; } nav ul .level1 ul li a:after { content: ''; background: #e00018; position: absolute; right: 0; bottom: 0; transition: ease .5s; height: 2px; width: 0; } nav .imessage { display: inline-block; width: 88px; height: 88px; background: #2678df; } nav .imessage img { margin: 30px 26px; } .nav.active .nav-right { height: 420px; background-repeat: no-repeat; box-shadow: 0 0 15px rgba(0,0,0,.1); } nav.active ul .level1 a { color: #3e3e3e; } nav.active .nav-right:after { opacity: 1; } nav.active .logo img:nth-child(1), nav.navActive .logo img:nth-child(1) { opacity: 0; } nav.active .logo img:nth-child(2), nav.navActive .logo img:nth-child(2) { opacity: 1; } nav.active ul .level1 a.activeNav { color: #e00018; } nav.navActive { height: 60px; box-shadow: 2px 2px 2px rgba(119,119,119,.2); } nav.navActive .logo { margin-top: 9px; } nav.navActive .nav-right { height: 60px; } nav.navActive ul .level1 { height: 60px; line-height: 60px; } nav.navActive .line { opacity: 0; visibility: hidden; } nav.navActive ul .level1 a.activeNav { color: #e00018!important; } footer { width: 100%; position: relative; z-index: 5; background: #fff; } footer .contactUs { width: 100%; display: flex; } footer .contactUs .viewbox { margin: 50px 0; } footer .contactUs .viewbox p { margin: 0; } footer .contactUs .viewbox p:nth-child(1) { color: #e00018; font-size: 28px; padding-bottom: 10px; } footer .contactUs .viewbox p:nth-child(2) { font-size: 14px; padding-bottom: 25px; } footer .contactUs .viewbox .icon img { float: left; } footer .contactUs .viewbox .icon p { color: #e00018; font-size: 36px; margin-left: 60px; position: absolute; font-family: montserrat; } footer .footer { background: #e00018; color: #fff; padding: 25px 0; } footer .footer .footerNav { margin-bottom: 5px; } footer .footer .footerNav ul { list-style: none; text-align: center; margin: 0 auto; } footer .footer .footerNav ul li { display: inline-block; margin: 0 10px; } footer .footer .footerNav ul li a { color: #fff; opacity: .8; } footer .footer .text { text-align: center; opacity: .4; font-size: 12px; } ._slide { width: 171px; line-height: 42px; border: 1px solid #fff; border-radius: 25px; color: #fff; font-size: 14px; position: relative; text-indent: 35px; height: 46px; margin: auto; } ._slide i { position: absolute; right: 2px; height: 32px; width: 32px; border-radius: 50%; background: #fff; color: #3e3e3e; line-height: 32px; font-size: 16px; top: 5px; right: 4px; text-align: center; transition: ease 1s; z-index: 8; text-indent: 0; } ._slide .tips { position: absolute; z-index: 1; left: 0; overflow: hidden; width: 100%; height: 100%; transition: ease 1s; } ._slide .mask { position: absolute; z-index: 5; transition: ease 1s; width: 100%; height: 100%; left: 0; } ._PlateText { font-family: LemonMilk; color: #f7f7f7; font-size: 150px; line-height: 1; z-index: 1; text-align: center; } .banner { width: 100%; position: fixed; box-shadow: inset 0 -11px 20px rgba(0,0,0,.2); } .banner .mask { position: absolute; width: 100%; height: 100%; background: #e01918; top: 0; opacity: 1; } .banner .mask img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .banner .mask.animated { opacity: 0; visibility: hidden; } #banner, #moon_banner { height: 100%; position: absolute; width: 100%; top: 0; z-index: -1; } #banner .picBox, #moon_banner .picBox { position: absolute; top: 0; width: 100%; height: 100%; opacity: 1; visibility: visible; } .lbtn { display: block; margin: 25px auto; width: 200px; height: 40px; border-radius: 35px; position: relative; cursor: pointer; text-align: center; line-height: 40px; font-size: 20px; letter-spacing: 4px; } .texts { width: 800px; height: 60px; position: absolute; left: 15%; top: 45%; color: #fff; font-size: 50px; line-height: 60px; text-shadow: 2px 2px 5px rgba(0,0,0,.1); } .texts > li { display: none; } .texts ul li { height: 60px; position: relative; line-height: 60px; overflow: hidden; display: none; } .texts ul li:first-child { display: block; } .lbtn span { width: 8px; height: 8px; background: #fff; border-radius: 50%; display: inline-block; margin: 16px 2px; } .slogan { width: 250px; height: auto; position: absolute; left: 50%; margin-left: -420px; top: 50%; } .lines { display: block; text-align: center; position: relative; } .slogan .lines .chars { position: relative; display: inline-block; margin: 0 -5px; } .texts .lines .chars { position: relative; display: inline-block; } .slogan li { opacity: 0; visibility: hidden; -webkit-transition: all 1s; position: absolute; left: 0; top: 0; } .slogan li.active { opacity: 1; visibility: visible; } .service { position: relative; background: #fff; z-index: 5; margin-top: 100vh; padding-bottom: 100px; } .service .bgimgtop { position: absolute; right: 0; top: 7%; } .service .bgimgtop img { width: 100%; height: 100%; } .service .bgimgbottom { width: 600px; position: absolute; left: 0; bottom: -2%; z-index: 0; } .service .bgimgbottom img { width: 100%; height: 100%; } .service #service { padding-bottom: 40px; width: 100%; overflow: inherit; } .service #service .li { position: relative; } .service #service .li .serviceBox { background: #e00018; position: relative; } .service #service .li .serviceBox::after { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; content: ''; z-index: 10; -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .1s; } .service #service .li:nth-child(2) .serviceBox::after { -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .2s; } .service #service .li:nth-child(3) .serviceBox::after { -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .3s; } .service #service .li:nth-child(4) .serviceBox::after { -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .4s; } .service #service .li:nth-child(5) .serviceBox::after { -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .5s; } .service #service .li:nth-child(6) .serviceBox::after { -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .6s; } .service #service .li .serviceBox.animated::after { height: 0; bottom: 0; } #service .li .serviceBox.animated .img img { -webkit-transform: scale(1); visibility: visible; } #service .li .img img { width: 100%; visibility: hidden; -webkit-transition: all 1.5s ease .1s; } #service .li:nth-child(2) .img img { -webkit-transition: all 1.5s ease .2s; -webkit-transform: scale(1.2); } #service .li:nth-child(3) .img img { -webkit-transition: all 1.5s ease .3s; -webkit-transform: scale(1.2); } #service .li:nth-child(4) .img img { -webkit-transition: all 1.5s ease .4s; -webkit-transform: scale(1.2); } #service .li:nth-child(5) .img img { -webkit-transition: all 1.5s ease .5s; -webkit-transform: scale(1.2); } #service .li:nth-child(6) .img img { -webkit-transition: all 1.5s ease .6s; -webkit-transform: scale(1.2); } .service #service .li .icon { position: absolute; top: 20%; color: #fff; width: 100%; text-align: center; opacity: 0; transition: ease .5s; display: none; } .service #service .li .icon:after { content: ''; position: absolute; width: 1px; height: 30px; background: rgba(255,255,255,.7); top: 120%; left: 50%; } .service #service .li .icon i { font-size: 70px; } .service #service .li ._slide { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); opacity: 0; transition: ease .6s; } .sub_title { padding: 100px 0 50px; width: 100%; text-align: center; position: relative; z-index: 10; } .sub_title.g { padding-top: 0; } .sub_title.f { text-align: left; padding-bottom: 25px; } .sub_title.f b, .sub_title.f p { color: #e00018; width: 100%; margin-left: 0; } .sub_title.e b { margin-bottom: 10px; } .sub_title.f { padding-top: 0; } .sub_title b { color: #000; font-size: 36px; font-weight: 700; display: block; } .sub_title p { color: #3e3e3e; font-size: 16px; line-height: 1.7; opacity: .7; text-transform: uppercase; display: block; width: 90%; margin-left: 5%; transform: translateY(40px); opacity: 0; -webkit-transition: all 1.5s cubic-bezier(.165,.84,.44,1) .5s; } .sub_title span { transform: translateY(40px); opacity: 0; display: block; -webkit-transition: all 1.5s cubic-bezier(.165,.84,.44,1) .6s; } .sub_title.animated p { -webkit-transform: translateY(0); opacity: .7; } .sub_title.animated span { opacity: 1; -webkit-transform: translateY(0); } .sub_title.h { padding: 100px 0 0; margin-bottom: 25px; } .sub_title.d { padding-bottom: 25px; } .sub_title.d p { width: 100%; margin-left: 0; } .sub_title.c b, .sub_title.c p { color: #fff; } .sub_title .chars { transform: translateX(40px); opacity: 0; -webkit-transition: all 1.5s cubic-bezier(.165,.84,.44,1); } .sub_title.animated .chars { -webkit-transform: translateX(0); opacity: 1; } .sub_title .chars:nth-child(2) { -webkit-transition-delay: .1s; } .sub_title .chars:nth-child(3) { -webkit-transition-delay: .2s; } .sub_title .chars:nth-child(4) { -webkit-transition-delay: .3s; } .sub_title .chars:nth-child(5) { -webkit-transition-delay: .4s; } .sub_title .chars:nth-child(6) { -webkit-transition-delay: .5s; } .sub_title .chars:nth-child(7) { -webkit-transition-delay: .6s; } .sub_title .chars:nth-child(8) { -webkit-transition-delay: .7s; } .sub_title .chars:nth-child(9) { -webkit-transition-delay: .8s; } .service .swiper-wrapper .li .img { width: 100%; transition: ease .7s; position: relative; overflow: hidden; } .service .swiper-wrapper .li.s a { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .service .swiper-wrapper .li.s .thum { width: 100px; height: 85px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); text-align: center; font-size: 14px; } .service .swiper-wrapper .li.s .thum b { width: 50px; height: 50px; display: block; margin: auto; background: url("../images/plus_icon.png") no-repeat; background-size: cover; } .service .swiper-wrapper .li.s .thum p { font-size: 14px; display: block; margin-top: 5px; color: #fff; } .service .swiper-wrapper .li .text { position: absolute; text-align: center; color: #fff; transition: .7s all ease; width: 100%; bottom: 10%; } .service .swiper-wrapper .li p:nth-child(1) { font-size: 18px; line-height: 26px; } .service .swiper-wrapper .li p:nth-child(2) { color: rgba(255,255,255,.6); font-size: 12px; font-family: Exo2; line-height: 1.7; padding: 0 5%; } .course { background-size: cover; width: 100%; background-attachment: fixed; height: 80vh; color: #fff; position: relative; z-index: 5; box-shadow: inset 0 17px 16px rgba(0,0,0,.1); } .course ._w1400 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .course .content { margin-bottom: 60px; overflow: hidden; } .course .content .viewbox { display: inline-block; width: 20%; float: left; position: relative; text-align: center; } .course .content .viewbox::after { width: 1px; height: 50%; position: absolute; right: 0; top: 25%; background: rgba(255,255,255,.2); content: ''; } .course .content .viewbox p { margin: 0; } .course .content .viewbox p:nth-child(1) span { font-size: 48px; font-family: montserrat; } .course .content .viewbox p:nth-child(2) { font-size: 14px; opacity: .5; } .courseA { width: 170px; height: 45px; border: 1px solid #fff; border-radius: 30px; margin-left: 260px; margin-top: 65px; color: #fff; line-height: 45px; position: relative; } .courseA::after { content: ''; width: 30px; height: 30px; background: #fff; border-radius: 50%; position: absolute; right: 7px; top: 7px; } .courseA::before { content: ''; width: 20px; height: 20px; background: url("../images/lansanjiao.png") no-repeat; position: absolute; right: 10px; top: 12px; z-index: 2; } .courseA a { display: block; width: 100%; height: 100%; padding-left: 20px; } .core { height: auto; background: #fff; position: relative; z-index: 5; padding-bottom: 100px; } .core .bgimgtop { width: 1180px; position: absolute; right: 0; margin-top: 5%; } .core .bgimgtop img { width: 100%; height: 100%; } .core .content { margin: 0 auto; position: relative; display: flex; z-index: 5; } .core .content .shadow { width: 60%; position: absolute; left: 20%; height: 100%; box-shadow: 0 0 20px 0 rgba(37,37,37,.8); bottom: 0; border-radius: 0 0 15px 15px; } .core .content:after { content: ''; } .core .content:before { content: ''; } .core .content .viewbox { width: calc(100% / 3); height: auto; position: relative; } .core .content .viewbox::after { width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ''; background: #fff; z-index: 10; visibility: hidden; -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1); } .core .content .viewbox.animated::after { height: 0; visibility: visible; } .core .content .viewbox ._slide { position: absolute; bottom: 8%; left: 50%; z-index: 5; transform: translateX(-50%); opacity: 0; transition: ease .7s; background: #e01918; border: 1px solid #e01918; } .core .content .viewbox::before { content: ''; background: linear-gradient(top ,#013bc6 ,rgba(4,62,200,0) 100%); background: -o-linear-gradient(top ,#02124e ,rgba(4,62,200,0) 100%); background: -ms-linear-gradient(top ,#02124e ,rgba(4,62,200,0) 100%); background: -moz-linear-gradient(top ,#02124e ,rgba(4,62,200,0) 100%); background: -webkit-linear-gradient(top ,#02124e ,rgba(4,62,200,0) 100%); top: 0; width: 100%; display: block; height: 50%; z-index: 2; position: absolute; opacity: 0; transition: ease .7s; } .core .content .viewbox .btnMore { width: 168px; height: 44px; position: absolute; top: 30rem; margin-left: 9rem; z-index: 5; opacity: 0; visibility: hidden; } .core .content .viewbox .btnMore img { width: 100%; height: 100%; } .core .content .viewbox img { position: relative; z-index: 1; width: 100%; } .core .content .viewbox .text { width: 100%; text-align: center; color: #fff; position: absolute; z-index: 5; top: 0; padding: 50px 25px; } .core .content .viewbox .text p:nth-child(1) { font-size: 24px; padding-bottom: 10px; } .core .content .viewbox .text p:nth-child(2) { line-height: 1.7; font-size: 16px; opacity: .7; } .friend { background-size: cover; background-attachment: fixed; width: 100%; height: auto; color: #fff; position: relative; z-index: 5; box-shadow: inset 0 17px 16px rgba(0,0,0,.4); padding-bottom: 100px; } .friend-title { width: 100%; font-size: 36px; display: flex; justify-content: center; font-weight: 700; padding-bottom: 25px; } .friend-title p { text-align: center; } .friend-title p:nth-child(2) { padding-left: 40px; } .friend-cont ul { width: 100%; display: block; position: relative; } .friend-cont ul::after { display: block; width: 100%; height: 1px; clear: both; content: ''; } .friend-cont ul li { width: 19%; display: block; float: left; margin-right: 1.25%; margin-bottom: 20px; position: relative; overflow: hidden; box-shadow: 0 0 5px rgba(0,0,0,.05); height: auto; background: #fff; } .friend-cont ul li a { display: block; height: 100%; position: relative; } .friend-cont ul li img, .tc-img img { max-width: none; width: 100%;-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .friend-cont ul li:nth-child(5n) { margin-right: 0; } footer .contactUs { border-top: 1px solid rgba(0,0,0,.1); } footer .contactUs ._w1400 { display: flex; justify-content: space-around; position: relative; } footer .contactUs ._w1400:after { content: ''; display: block; position: absolute; left: 50%; top: 0; height: 100%; background: rgba(0,0,0,.1); width: 1px; } nav ul .level1 ul li a { display: block; width: auto; height: 40px; line-height: 40px; } footer .contactUs .viewbox { position: relative; } .iconImg { width: 120px; height: auto;position: relative; float: left; margin-right: 24px; } .iconImg img { width: 100%; height: 100%; } .media-single { width: 100%; } .media-single ul { width: 100%; padding: 0; margin: 0; } .media-img { width: 100%; position: relative; } .mi-location { width: 1400px; margin: 0 auto; position: absolute; bottom: 0; left: 13.5%; display: flex; } .mi-location-cont1 { width: 410px; height: 90px; line-height: 90px; background: #e00018; color: #fff; display: flex; } .mi-location-cont1 span { padding-left: 50px; padding-right: 40px; } .mi-location-cont1 p { margin: 0; } .mi-location-cont2 { width: 95px; height: 90px; background: #fff; color: #e00018; text-align: center; } .mi-location-cont2 p { padding-top: 50px; margin: 0; background: url("../images/mi-weizhi.png") no-repeat center top 20px; } .media-single-cont { padding: 60px 45px; } .media-single-cont p { margin: 0; padding-bottom: 5px; opacity: .7; } .media-single-cont small { display: block; width: 170px; height: 45px; background: #e00018; border-radius: 30px; margin-top: 50px; line-height: 45px; padding-left: 35px; color: #fff; position: relative; } .media-single-cont small::after { width: 30px; height: 30px; content: ''; background: #fff url("../images/lansanjiao.png") no-repeat center center; border-radius: 50%; position: absolute; right: 10px; top: 7px; } .media2 { width: 100%; display: flex; background: url("../images/service_bg.jpg") no-repeat; background-size: 100% 100%; overflow: hidden; } .media2-left { width: 100%; } .media2-left ul { width: 100%; padding: 0; margin: 80px 0 0; display: flex; flex-wrap: wrap; height: calc(100vh - 80px); border-top: 1px solid rgba(255,255,255,.1); } .media2-left ul li { width: 33%; color: #fff; position: relative; height: 50%; border-bottom: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); padding: 50px; overflow: hidden; } .media2-left ul li a { width: 100%; height: 100%; display: block; position: relative; } .media2-left ul li::after { content: ''; width: 63px; height: 55px; background: url("../images/guanggaopai.png") no-repeat; position: absolute; left: 47px; bottom: 0; opacity: 0; transition: .5s; } .media2-left ul li::before { content: ''; width: 100%; height: 10%; background: #e00018; position: absolute; left: 0; bottom: -100%; transition: .5s; display: block; } .media2-left ul li:hover::before { height: 100%; bottom: 0; } .media2-left ul li:hover::after { opacity: 1; bottom: 36px; z-index: 5; } .media2-left ul li:hover .m2l-text { top: 0; } .m2l-text { text-align: right; position: absolute; right: 0; top: 50px; display: block; transition: .5s; } .m2l-text h3 { font-size: 28px; padding-bottom: 10px; font-weight: 400; } .m2l-text p { opacity: .7; font-family: Exo2; text-transform: uppercase; } .media2Info { width: 100%; } .m2If-title { padding-top: 45px; padding-bottom: 15px; color: #e00018; text-align: left; } .m2If-title h3 { margin: 0; font-size: 30px; padding-bottom: 10px; } .m2If-cont { width: 100%; opacity: .7; overflow: hidden; } .m2If-cont p { padding-bottom: 10px; } .m2If-cont p span { padding-left: 10px; } .m2If-cont p span:first-child { padding-left: 0; } .m2If-img { width: 100%; padding: 20px 0; } .m2If-img ul { width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .m2If-img ul li { width: 33%; padding-bottom: 10px; } .m2If-img2 ul li { width: auto; } .m2If-img3 { padding: 10px 0; } .m2If-wrap { width: 100%; padding-top: 20px; } .m2If-wrap ul { width: 100%; padding: 0; margin: 0; display: flex; justify-content: space-between; flex-wrap: wrap; } .m2If-wrap ul li { width: 32%; padding: 35px; background: #f6f7f7; margin-bottom: 20px; } .m2IfW-h3 { font-size: 28px; padding-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m2IfW-h3 h3 { color: transparent; -webkit-text-stroke: 1px #e85a69; letter-spacing: .04em; } .m2IfW-h4 { padding-bottom: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m2IfW-p { opacity: .7; line-height: 1.7; height: 189px; overflow: hidden; text-overflow: ellipsis; } .m2If-wrap2 ul li { width: 32%; padding: 0; margin-bottom: 20px; } .m2If-wrap2 { padding-top: 20px; padding-bottom: 75px; } .m2IfW2-cont { padding: 20px 40px 20px; } .m2IfW2-cont h3 { padding-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m2IfW2-cont p { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .back { background: #f9f8f9; } .theory { width: 100%; } .title { padding-top: 65px; padding-bottom: 35px; color: #e00018; text-align: center; position: relative; z-index: 3; } .title h3 { font-size: 36px; } .title p { font-family: Exo2; text-transform: uppercase; } .theory-cont { width: 100%; } .theory-cont ul { width: 100%; padding: 0; } .theory-cont ul li { width: 100%; display: flex; justify-content: space-around; margin-bottom: 30px; box-shadow: 0 0 5px rgba(0,0,0,.05); padding: 50px; } .theory-cont ul li:nth-child(1) { background: #fff url("../images/3000mi.jpg") no-repeat left bottom; } .tc-cont { width: calc(100% - 600px); } .theory-cont ul li:nth-child(2) { background: #fff url("../images/qizhou.jpg") no-repeat left bottom; } .tc-cont h3 { color: #e00018; font-size: 40px; margin: 0; padding-bottom: 35px; } .tc-cont h4 { margin: 0; padding-bottom: 15px; font-size: 18px; } .tc-cont p { margin: 0; opacity: .7; padding-bottom: 5px; } .tc-img { width: 550px; } .theory2 { width: 100%; } .titleP { padding-bottom: 15px; } .title span { color: #7b7b7b; } .theory2-cont { width: 100%; background: #fff; display: flex; padding: 50px; box-shadow: 0 0 5px rgba(0,0,0,.05); } .t2c-left { width: 35%; margin-right: 5%; } .t2c-left h3 { padding-top: 55px; padding-bottom: 45px; color: #e00018; font-size: 24px; } .t2c-left-cont { padding-bottom: 35px; } .t2c-left-cont h4 { padding-bottom: 5px; font-size: 18px; } .t2c-left-cont p { line-height: 1.7; opacity: .7; } .t2c-right { width: 60%; } .t2c-righti img { width: 100%; height: 100%; } .power { width: 100%; position: relative; } .pimg { width: 40%; height: auto; position: absolute; right: 50px; bottom: 50px; } .power-cont { width: 100%; position: relative; background: #fff; padding: 50px; } .pocH3 { padding-bottom: 5px; } .pocP { opacity: .7; padding-bottom: 5px; } .pocSpan { font-size: 45px; color: rgba(0,0,0,.1); font-weight: 700; margin-bottom: 25px; } .pocUl { width: 55%; } .pocUl ul { display: flex; padding: 0; } .pocUl ul li { width: 25%; height: 210px; text-align: center; box-shadow: 0 0 5px rgba(0,0,0,.1); margin-right: 20px; } .plImg { padding-top: 30px; padding-bottom: 15px; display: flex; justify-content: center; } .plH3 { color: #e00018; padding-bottom: 10px; position: relative; margin-bottom: 5px; } .plH3::after { content: ''; width: 15px; height: 1px; background: #e00018; position: absolute; bottom: 0; left: 45%; } .plH3 h3 { font-weight: 400; } .plP { text-align: center; opacity: .7; font-size: 14px; } .plP p { padding-top: 5px; } .power2 { width: 100%; } .adv { position: relative; } .adv::after { width: 156px; height: 156px; content: ''; background: url("../images/round2.png") no-repeat; position: absolute; left: -180px; bottom: 60px; } .adv::before { width: 95px; height: 95px; content: ''; background: #e00018; border-radius: 50%; position: absolute; right: -115px; bottom: 35px; } .advantage { width: 100%; padding: 100px 0; display: block; justify-content: space-between; } .advantage-left { width: 100%; color: #e00018; font-size: 24px; margin-bottom: 25px; } .advantage-left p { font-size: 19px; } .advantage-right { width: 100%; } .advantage-right p { line-height: 1.7; opacity: .7; } .advH3 { font-size: 60px; text-align: center; opacity: .1; padding-bottom: 70px; } .advantage2 { width: 100%; } .advantage2 ul { width: 100%; display: block; overflow: hidden; } .advantage2 ul li { width: 20%; float: left; position: relative; } .advantage2-img { width: 100%; color: #fff; position: relative; transition: .5s; -webkit-filter:blur(0); } .advantage2 ul li:hover .advantage2-img { -webkit-filter:blur(2px) } .ai-location { width: 100%; text-align: center; position: absolute; bottom: 70px; } .ai-location p { font-family: Exo2; text-transform: uppercase; font-size: 14px; opacity: .7; } .ai-location h4 { padding-bottom: 5px; } .advantage2-cont { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.5); color: #fff; padding: 50px 25px; transition: .5s; opacity: 0; } .advantage2-cont h3 { padding-bottom: 5px; } .advantage2-cont h4 { padding-bottom: 20px; font-weight: 400; font-family: Exo2; text-transform: uppercase; font-size: 12px; opacity: .7; } .advantage2-cont p { line-height: 1.7; font-size: 14px; opacity: .7; } .introduction { width: 100%; padding-top: 55px; padding-bottom: 100px; display: flex; justify-content: space-between; } .introduction-left { width: 48%; } .inL-title { text-align: left; padding-top: 0; } .inL-cont { line-height: 1.7; } .inL-cont p { padding-bottom: 15px; } .introduction-right { width: 49%; position: relative; } .introduction-right img { position: relative; margin-top: 100px; } .introduction-data { width: 100%; } .introduction-data ul { width: 100%; height: 100%; padding: 0; margin: 0; display: flex; padding-bottom: 100px; } .introduction-data ul li { width: 22%; padding-left: 35px; border-right: 1px solid rgba(0,0,0,.1); } .introduction-data ul li:nth-child(1), .introduction-data ul li:nth-child(5) { width: 17%; } .introduction-data ul li:nth-child(1) { padding-left: 0; } .introduction-data ul li:nth-child(5) { border-right: 0; } .inD-top { display: flex; height: 52px; overflow: hidden; color: #e00018; } .inD-top span { font-size: 45px; font-family: montserrat; } .inD-top p { line-height: 65px; padding-left: 10px; opacity: .7; } .inD-cont { opacity: .7; } .introduction-course { width: 100%; background: url("../images/bg_developmentpath.jpg") no-repeat center/cover fixed; position: relative; overflow: hidden; } #v3_body { width: 1207px; height: 830px; display: block; top: 162px; left: 50%; margin-left: -603px; background: url("../images/line_bg2.png") 0 0 no-repeat; } #v3_mask { width: 1207px; height: 0; display: block; left: 0; background: url("../images/line_all2.png") 0 0 no-repeat; } .obj { position: absolute; } .introduction-course2 { width: 100%; position: relative; } .historyList { position: relative; margin-top: -150px; } .historyMask { position: absolute; top: 0; width: 100%; left: 0; height: 0; overflow: hidden; } .historyBasic { height: 980px; overflow: hidden; } .historyListUl { position: absolute; width: 890px; left: 50%; transform: translate(-50%,0); top: 0; z-index: 5; min-height: 112px; display: none; } .historyListUl .btnIcon { position: absolute; top: 50%; display: block; transform: translateY(-50%); width: 30px; height: 30px; background: #fff; text-align: center; line-height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; user-select: none; } .historyListUl .btnIcon.active { opacity: 0; visibility: hidden; } .historyListUl .btnIcon.btnLeft { left: -50px; display: none; } .historyListUl .btnIcon.btnRight { right: -50px; } .historyListUl.active { top: 41%; transform: translate(-50%,-50%); position: fixed; } .historyListUl li { position: absolute; color: #fff; opacity: 0; visibility: hidden; } .historyListUl li.active { opacity: 1; visibility: inherit; } .historyListUl .year { width: 200px; line-height: 112px; background: #e00018; text-align: center; font-size: 60px; display: inline-block; vertical-align: top; font-family: montserrat; } .historyListUl .text { display: inline-block; display: inline-flex; width: 684px; min-height: 112px; vertical-align: top; background: #fff; color: #3e3e3e; font-size: 14px; height: auto; padding: 25px 35px; align-items: center; } .HistoricalRiver { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; } .HistoricalRiver ul { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; } .HistoricalRiver li { position: absolute; color: #fff; font-size: 24px; font-family: montserrat; } .HistoricalRiver li .year { position: absolute; line-height: 30px; top: 50%; margin-top: -15px; left: 20px; transform: translateY(100%) translate3d(0,0,0); opacity: 0; transition: all .5s ease-in-out; } .HistoricalRiver li .info { width: 500px; height: auto; font-size: 14px; line-height: 25px; position: absolute; left: 100px; top: -40px; -webkit-transition: all 0s; -webkit-transform: translateX(100px); opacity: 0; } .HistoricalRiver li:nth-child(5) .info { width: 700px; } .HistoricalRiver li:nth-child(6) .info { width: 380px; } .HistoricalRiver li:nth-child(even) .info { left: 50px; } .HistoricalRiver li .info::after { display: block; width: 100%; clear: both; height: 1px; content: ''; } .HistoricalRiver li.show .info { -webkit-transform: translateX(0px); opacity: 1; } .HistoricalRiver li .info .num { width: 120px; height: 80px; background: #e00018; line-height: 80px; text-align: center; color: #fff; font-size: 40px; font-family: montserrat; float: left; position: relative; } .HistoricalRiver li .info .num::after { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #e00018; content: ''; position: absolute; left: -5px; top: 50%; margin-top: -5px; } .HistoricalRiver li .info .des { width: calc(100% - 125px); height: 80px; padding: 20px; float: right; background: #fff; color: #3e3e3e; vertical-align: top; line-height: 20px; } .HistoricalRiver li.active .year { transform: translateY(0) translate3d(0,0,0); opacity: 1; } .HistoricalRiver li:nth-child(even) .year { left: auto; right: 20px; } .HistoricalRiver li:after { content: ''; background: #fff; width: 12px; height: 12px; border-radius: 50%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,100%); opacity: 0; transition: all .5s ease-in-out; } .HistoricalRiver li.active:after { transform: translate(-50%,-50%); opacity: 1; } .indC-img { width: 100%; height: 1000px; position: absolute; left: 0; top: 0; z-index: -1; } .indC-img img { width: 100%; height: 100%; } .introduction-course .inC-title { position: relative; top: auto; } .honor { width: 100%; } .honor-img { width: 100%; } .honor-img img { margin: 0 auto; padding-bottom: 30px; } .honor-wrap { width: 100%; } .honor-wrap ul li { width: 100%; height: 200px; display: flex; } .hw-cont1, .hw-cont2 { width: 50%; } .hw-cont1 { text-align: right; } .hw-cont1 .hc1-title { padding-bottom: 25px; padding-right: 155px; position: relative; } .hw-cont1 .hc1-title h3 { font-weight: 400; font-size: 60px; color: #e00018; font-family: montserrat; } .hw-cont1 .hc1-title::after { content: ''; width: 41px; height: 41px; background: url("../images/time_icon2.png") no-repeat; background-size: cover; position: absolute; right: 0; top: 20px; } .hw-cont1 .hc1-title span { font-size: 22px; position: absolute; right: -40px; bottom: 0; font-family: montserrat; width: 120px; text-align: center; } .hw-cont1 .hc1-cont { padding-right: 155px; position: relative; opacity: .7; } .hw-cont1 .hc1-cont p { padding-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hw-cont1 .hc1-cont::after { width: 1px; height: 90px; background: rgba(0,0,0,.5); content: ''; position: absolute; right: 18px; top: 0; } .hw-cont2 { width: 50%; height: 100%; } .honor-wrap ul li:nth-child(even) { flex-direction: row-reverse; } .honor-wrap ul li:nth-child(even) .hw-cont1 { text-align: left; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title { padding-left: 140px; padding-right: 0; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title::after { content: ''; width: 41px; height: 41px; background: url("../images/time_icon2.png") no-repeat; background-size: cover; position: absolute; left: -41px; top: 20px; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title span { left: -80px; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-cont { padding-left: 140px; padding-right: 0; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-cont::after { left: -18px; } .honor-wrap ul li:nth-child(4) .hw-cont1 .hc1-title span { left: -70px; } .honor-wrap ul li:nth-child(7) .hw-cont1 .hc1-title span { right: -34px; } .cooperation { padding: 50px; } .cooperation ul { width: 100%; margin: 0; padding: 0; display: block; overflow: hidden; } .cooperation ul li { width: 31%; height: auto; display: block; justify-content: center; align-items: center; color: #fff; margin-bottom: 25px; float: left; margin-right: 2%; position: relative; } .cooperation ul li::after { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; content: ''; -webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) .4s; } .cooperation ul li.animated::after { height: 0; } .cooperation ul li .thum { width: 100%; height: auto; position: relative; overflow: hidden; } ._news.news2 ul li .img img { max-width: auto; width: 100%; } .cooperation ul li .thum img { max-width: auto; width: 100%; -webkit-transition: all .5s; -webkit-filter:grayscale(100%); } .cooperation ul li:hover .thum img { -webkit-transform: scale(1.05); -webkit-filter:grayscale(0); } .cooperation-cont { width: 300px; height: auto; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); padding: 20px; } .cooperation-cont .bl { width: 0; height: 2px; background: #fff; position: absolute; left: 0; bottom: 0; -webkit-transition: all .5s; } .cooperation-cont .bl.l1 { top: 0; } .cooperation-cont .bl.l2 { left: auto; right: 0; } .cooperation ul li:hover .bl.l1 { width: 100%; } .cooperation ul li:hover .bl.l2 { width: 100%; right: 0; } .cooperation ul li:hover .cooperation-cont::before { height: 100%; } .cooperation ul li:hover .cooperation-cont::after { height: 100%; } .cooperation-cont::after, .cooperation-cont::before { width: 2px; display: block; height: 0; position: absolute; left: 0; top: 0; -webkit-transition: all .5s; content: ''; background: #fff; } .cooperation-cont::after { left: auto; right: 0; top: auto; bottom: 0; } .singlePage { width: 100%; height: auto; line-height: 2; font-size: 16px; padding: 50px 0 100px; } .singlePage img { display: inline-block; } .singlePage img, .singlePage p { margin-bottom: 20px; } .cooperation-cont h3 { font-size: 28px; line-height: 40px; } .cooperation-cont p { opacity: .7; text-transform: uppercase; font-size: 12px; } .cooperationInfo { padding: 55px 0; overflow: hidden; } .cooperationInfo ul { width: 100%; } .cooperationInfo ul li { width: 100%; margin: 0; padding: 0; display: flex; background: #f6f7f7; margin-bottom: 25px; float: left; } .cooperationInfo ul li.row { width: 32%; margin-right: 2%; display: block; } .cooperationInfo ul li.row .cooperationInfo-img { width: 100%; } .cooperationInfo ul li.row .cooperationInfo-text { width: 100%; padding: 25px; } .cooperationInfo ul li.row a { display: block; } .cooperationInfo ul li.row:nth-child(3n) { margin-right: 0; } .cooperationInfo ul li a { display: flex; width: 100%; } .cooperationInfo-img { width: 66%; background: center center no-repeat; background-size: cover; } .cooperationInfo-img img { max-width: auto; width: 100%; } .cooperationInfo-text { width: 34%; padding: 50px; } .ciTitle { width: 100%; padding-bottom: 15px; } .ciTitle h3 { padding-bottom: 10px; } .ciTitle span { opacity: .7; } .ciP { font-size: 14px; opacity: .7; line-height: 1.7; height: 115px; overflow: hidden; } .partner { width: 100%; padding-top: 65px; padding-bottom: 40px; } .partner ul { width: 100%; display: block; } .partner ul li { width: 19%; margin-bottom: 60px; transition: all .25s ease; } .partner-img { width: 100%; height: 130px; background: #fff; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 5px rgba(0,0,0,.05); } .fbox { padding: 100px 0; } .partner-cont { padding-top: 5px; text-align: center; } .partner-cont h3 { color: #e00018; padding-bottom: 5px; } .partner-cont p { opacity: .7; } .cTop-title { width: 100%; text-align: center; padding-bottom: 30px; border-bottom: 1px solid #ccc; } #allmap { width: 100%; height: 500px; position: relative; } #allmap img { max-width: none!important; width: 100%; } .contact2 { width: 100%; display: flex; } .contact2-left { width: 27%; padding: 40px 0; border-right: 1px solid rgba(0,0,0,.1); display: flex; justify-content: center; align-items: center; } .contact2-mid { width: 46%; padding: 0 25px; border-right: 1px solid rgba(0,0,0,.1); } .c2mH3 { color: #e00018; font-size: 18px; padding-bottom: 5px; margin-top: 25px; } .c2mH3 h3 { font-weight: 400; } .c2mP { opacity: .7; padding-bottom: 10px; font-size: 16px; } .c2mSpan { color: #e00018; font-size: 28px; padding-left: 55px; position: relative; } .c2mSpan span { display: block; font-family: montserrat; } .c2mSpan::after { content: ''; width: 37px; height: 31px; background: url("../images/lxdianhua.jpg") no-repeat; position: absolute; left: 0; top: -2px; } .contact2-right { width: 27%; } .c2r-img { display: flex; justify-content: center; padding-bottom: 0; width: 100px; margin: 10px auto auto; } .c2rP { text-align: center; font-size: 14px; margin-bottom: 10px; display: block; } .joinus { width: 100%; display: flex; justify-content: space-between; margin-bottom: 50px; padding-top: 65px; } .joinus-left { width: 22%; } .jl-cont { width: 100%; padding-top: 142px; padding-left: 35px; padding-bottom: 60px; background: #e00018; color: #fff; position: relative; } .jl-cont::after { content: ''; width: 35px; height: 26px; background: url("../images/zpyouxiang.png") no-repeat; position: absolute; top: 45px; left: 35px; } .joinus-left h3 { font-weight: 400; padding-bottom: 15px; font-size: 22px; } .joinus-right { width: 76%; background: #fff; } .joinus-right>ul>li { width: 100%; margin-bottom: 15px; border: 1px solid rgba(0,0,0,.05); } .joinus-right ul li .jtop { width: 100%; height: auto; padding: 25px; position: relative; overflow: hidden; cursor: pointer; } .joinus-right ul li .jtop .name { width: 200px; height: auto; float: left; font-size: 18px; line-height: 30px; overflow: hidden; font-weight: bold; } .joinus-right ul li .jtop::after { width: 16px; height: 2px; position: absolute; right: 20px; top: 50%; margin-top: -1px; background: #000; display: block; content: ''; } .joinus-right ul li .jtop::before { width: 2px; height: 16px; position: absolute; right: 26px; top: 50%; margin-top: -8px; background: #000; display: block; content: ''; } .joinus-right ul li .jtop .des { width: calc(100% - 250px); float: left; font-size: 14px; line-height: 30px; opacity: .7; } .joinus-right ul li .jtop .des span { position: relative; padding: 0 12px 0 10px; } .joinus-right ul li .jtop .des span::after { width: 1px; height: 100%; position: absolute; right: -1px; top: 0; background: rgba(0,0,0,.1); content: ''; display: block; } .joinus-right ul li .jtop .des span:last-child::after { display: none; } .joinus-right ul li .jdes { width: 100%; height: auto; position: relative; padding: 25px; font-size: 16px; line-height: 1.7; display: none; border-top: 1px solid rgba(0,0,0,.05); } .joinus-right ul li .jdes.active { display: block; } .joinus-right ul li .jdes p { margin-bottom: 10px; } .joinus-right ul li .jtop.active .name { color: #e00018; } .joinus-right ul li .jtop.active::before { display: none; } .list { width: 100%; display: flex; line-height: 90px; position: relative; } .list::after { width: 2px; height: 27px; background: #000; content: ''; position: absolute; right: 45px; top: 31px; } .list::before { width: 27px; height: 2px; background: #000; content: ''; position: absolute; right: 32px; top: 45px; } .list-title { padding-left: 55px; } .list-cont { display: flex; padding-left: 125px; } .list-cont p { padding: 0 15px; position: relative; } .list-cont p::after { content: ''; width: 1px; height: 15px; background: #ccc; position: absolute; right: 0; top: 41%; } .mor { width: 100%; padding: 0 15px; display: none; } .morDis { display: flex; } .mor-cont1 { width: 50%; padding: 35px 40px 50px; border-top: 1px solid #000; } .mor-cont1 p { padding-bottom: 5px; line-height: 1.7; } .power2-cont { width: 100%; background: #fff; padding: 50px; } .power2-cont ul { width: 100%; display: flex; position: relative; padding: 0; } .power2-cont ul::after { content: ''; width: 820px; height: 189px; background: url("../images/fwsjback.png") no-repeat; background-size: 100%; position: absolute; left: -66px; top: 68px; z-index: -1; } .power2-cont ul::before { content: ''; width: 120px; height: 50px; background: url("../images/fwsjback2.png") no-repeat; background-size: 100%; position: absolute; right: 92px; top: 104px; z-index: -1; } .power2-cont ul li { width: 202px; height: 398px; position: relative; margin-right: 25px; margin-top: 76px; } .power2-cont ul li small { position: absolute; top: 27px; right: 5px; color: #fff; z-index: 5; } .p2C-img { width: 202px; height: 178px; text-align: center; color: #fff; position: absolute; top: 20px; z-index: 2; display: flex; justify-content: center; align-items: center; } .p2C-img p { width: 77px; margin-right: 20px; } .p2C-cont { width: 202px; height: 220px; background: #f8f9fb; position: absolute; bottom: 0; opacity: .7; } .p2Cc-title { padding-top: 50px; text-align: center; padding-bottom: 20px; } .p2Cc-title h3 { font-size: 50px; } .p2Cc-title h3 span { font-size: 16px; } .p2Cc-cont { text-align: center; } .p2Cc-cont p { padding-bottom: 5px; } .power2-cont ul li:nth-child(2) { width: 235px; height: 428px; margin-top: 46px; } .power2-cont ul li:nth-child(2) small { top: 31px; } .power2-cont ul li:nth-child(2) .p2C-img { width: 235px; height: 208px; } .power2-cont ul li:nth-child(3) { width: 268px; height: 449px; margin-top: 25px; } .power2-cont ul li:nth-child(3) small { font-size: 15px; top: 34px; } .power2-cont ul li:nth-child(3) .p2C-img { width: 268px; height: 229px; } .power2-cont ul li:nth-child(3) .p2C-cont { width: 240px; } .power2-cont ul li:nth-child(4) { width: 330px; height: 474px; margin-top: 0; } .power2-cont ul li:nth-child(4) small { font-size: 16px; top: 37px; } .power2-cont ul li:nth-child(4) .p2C-img { width: 330px; height: 254px; } .power2-cont ul li:nth-child(4) .p2C-img p { margin-right: 75px; } .power2-cont ul li:nth-child(4) .p2C-cont { width: 260px; } .p2C-day { color: #e00018; font-size: 50px; padding-top: 120px; padding-left: 78px; } .p2C-day span { font-size: 16px; } .cases { padding-top: 55px; padding-bottom: 65px; } .cursor { position: fixed; z-index: 20; left: 0; top: 0; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); pointer-events: none; } .cursor.active .cursor__path_right { -webkit-transform: translate3d(25px,0,1px); -moz-transform: translate3d(25px,0,1px); transform: translate3d(25px,0,1px); } .cursor.active .cursor__path_left { -webkit-transform: translate3d(-25px,0,1px); -moz-transform: translate3d(-25px,0,1px); transform: translate3d(-25px,0,1px); } .cursor .cursor__path { -webkit-transition: all .6s cubic-bezier(.23,1.08,.62,.95); -o-transition: all .6s cubic-bezier(.23,1.08,.62,.95); -moz-transition: all .6s cubic-bezier(.23,1.08,.62,.95); transition: all .6s cubic-bezier(.23,1.08,.62,.95); } .cursor svg, .cursor.show-pointer svg { stroke-dasharray: 200; transition: all .6s cubic-bezier(.23,1.08,.62,.95); } .cursor svg { stroke-dashoffset: 200; stroke-width: 2; } .cursor.show-pointer svg { stroke-dashoffset: 0; } .cursor path { fill: transparent; transition: all .25s cubic-bezier(.23,1.08,.62,.95); } .cursor.active path { fill: #fff; } @media screen and (min-width:1200px) { nav ul .level1:hover ul { transition: .5s all ease; } nav ul .level1 ul li:hover:after { width: 100%; } .service .swiper-wrapper .li:hover .text { transform: translateY(-180px); } .service #service .li:hover ._slide { opacity: 1; bottom: 18%; } .service #service .li:hover .icon { opacity: 1; } .service .swiper-wrapper .li:hover .img { background-size: cover; width: 100%; opacity: 0; } .core .content .viewbox:hover .btnMore { opacity: 1; visibility: inherit; } .advantage2 ul li:hover .advantage2-cont { opacity: 1; top: 0; } .advantage2 ul li:hover .ai-location { display: none; } .joinus-right ul li:hover .mor { display: block; } ._slide:hover i { transform: translateX(-400%) rotate(-1440deg); } ._slide:hover .tips { width: 20%; } .core .content .viewbox:hover ._slide { opacity: 1; } nav ul .level1 ul li:hover a:after { width: 100%; } nav ul .level1 > a:hover:after { width: 40%; left: 30%; top: 0; } } @media screen and (max-width:1920px) { .banner._h100vh { height: 900px; width: 1920px; left: 50%; margin-left: -960px; } .service { margin-top: 900px; } .slogan { width: 320px; height: auto; position: absolute; left: 50%; margin-left: -555px; top: 45%; } } @media screen and (max-width:1600px) { .banner._h100vh { height: 800px; width: 1600px; left: 50%; margin-left: -800px; } .service { margin-top: 800px; } .slogan { width: 280px; margin-left: -475px; top: 50%; } } @media screen and (max-width:1440px) { .friend .contents { width: 300px; height: 300px; left: 39.5%; margin-top: 10.65rem; } .friend .hex { width: 100px; height: 100px; } .friend .hex img { transform: rotate(-45deg); width: 80px; margin-top: 0; margin-left: .8rem; } .friend .logoBox { width: 943px; } .friend .moreBtn { right: 17.3rem; margin-top: 19rem; } .service .bgimgtop { top: 13%; } .core .content .viewbox:hover { background-image: url("../images/core5.png"); background-size: cover; } .core .content .viewbox .btnMore { top: 24rem; margin-left: 7rem; } .friend .contents { left: 39%; } .friend .moreBtn { right: 15.1rem; margin-top: 19.2rem; } } .BMap_bubble_content h1, .BMap_bubble_content p { width: 100%; display: block; } .BMap_bubble_content h1 { font-weight: 700; font-size: 16px; line-height: 25px; } .BMap_bubble_content p { font-size: 14px; width: 320px; opacity: .7; } .qin { width: 100%; height: auto; background: url("../images/bg_developmentpath.jpg") no-repeat center/cover fixed; padding-bottom: 50px; display: none; } .ha { width: 94%; height: auto; margin: 25px auto auto; position: relative; } .ha ul { width: calc(100% - 50px); margin-left: 50px; position: relative; } .ha ul::before { width: 5px; height: 100%; background: #fff; position: absolute; left: -30px; top: 0; border-radius: 5px; content: ''; } .ha ul li { width: 100%; height: auto; margin-bottom: 15px; background: #e00018; display: block; position: relative; } .ha ul li::after { display: block; width: 100%; height: 1px; clear: both; content: ''; } .ha ul li::before { width: 5px; height: 0; background: #6279ff; position: absolute; left: -30px; top: 0; content: ''; -webkit-transition: all .5s; } .ha ul li.animated::before { height: calc(100% + 15px); } .ha ul li .num { width: 100px; height: auto; background: #e00018; color: #fff; float: left; line-height: 25px; text-align: center; font-family: montserrat; font-size: 20px; padding: 20px 0; } .ha ul li .num::after { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #e00018; position: absolute; left: -5px; top: 50%; margin-top: -5px; content: ''; } .ha ul li .num::before { width: 15px; height: 15px; position: absolute; left: -35.5px; top: 50%; background: #fff; border-radius: 50%; margin-top: -7.5px; content: ''; -webkit-transform: scale(0); -webkit-transition: all .35s; } .ha ul li.animated .num::before { -webkit-transform: scale(1); } .ha ul li .des { width: calc(100% - 100px); height: auto; float: left; padding: 20px 10px; line-height: 25px; background: #fff; font-size: 14px; } .dsm_list { width: 100%; height: auto; } .dsm_list::after { display: block; width: 100%; height: 1px; clear: both; content: ''; } .dsm_list ul li { width: 49%; height: 175px; float: left; margin-right: 2%; margin-bottom: 25px; background: #fff; padding: 25px; box-shadow: 0 0 15px rgba(0,0,0,.05); } .dsm_list ul li:nth-child(even) { margin-right: 0; } .dsm_list ul li .icon { width: 100px; height: auto; float: left; margin-top: 15px; } .dsm_list ul li .info { width: calc(100% - 140px); height: auto; float: left; margin-left: 40px; } .dsm_list ul li .info .n { width: 100%; height: auto; font-size: 18px; color: #e00018; position: relative; line-height: 35px; margin-bottom: 10px; } .dsm_list ul li .info .t { font-size: 16px; line-height: 1.7; } .dsm_list ul li .info .n::after { width: 20px; height: 2px; background: #e00018; content: ''; display: block; position: absolute; left: 0; bottom: 0; } .dsm_title { text-align: center; font-size: 24px; line-height: 1.4; margin-bottom: 50px; } .dsm_img { width: 100%; height: auto; background: #fff; padding: 50px; margin-bottom: 100px; } .cul_list { width: 100%; height: auto; overflow: hidden; position: relative; margin-bottom: 100px; } .cul_list ul li { float: left; width: 32%; margin-right: 2%; margin-bottom: 20px; } .cul_list ul li img, .dsm_img img { max-width: auto; width: 100%; } .cul_list ul li:nth-child(1) { width: 100%; } .cul_list ul li:nth-child(4) { margin-right: 0; } ._news_detail { width: 1200px; margin: 0 auto; background: #fff; padding: 30px; position: relative; margin-top: -100px; box-shadow: 0 0 15px rgba(0,0,0,.05); } .detail_box { width: 100%; height: auto; background: #f9f9f9; padding-bottom: 100px; } ._news_detail .returnBtn { position: absolute; right: 0; width: 120px; display: block; text-align: center; line-height: 40px; top: -40px; font-size: 14px; background: #fff; } ._news_detail .returnBtn:hover { background: #e00018; color: #fff; } ._news_detail .detail_content { width: 100%; } ._ndc_top .title { line-height: 1.4; margin-bottom: 0; font-size: 30px; padding-top: 10px; border-bottom: none; padding-bottom: 20px; } /* 榛戝鏍峰紡 */ .moon ._PlateText { opacity: .03; } .moon footer .contactUs .viewbox p:nth-child(2) { opacity: .7; } .moon footer .footer { background: #e00018; } .moon .navColor { color: #fff!important; } .moon nav.active .logo img:nth-child(2), .moon nav.navActive .logo img:nth-child(2) { opacity: 0; } .moon nav.active .logo img:nth-child(1), .moon nav.navActive .logo img:nth-child(1) { opacity: 1; } .moon .core, .moon .core .content .viewbox::after, .moon .footer, .moon .navActive, .moon .service, .moon .service #service .li .serviceBox::after, .moon .temp_box { background: #0f2441; } .temp_box { overflow: hidden; } .moon, .moon .cooperation ul li::after, .moon .detail_box, .moon .nav-right:after, .moon .qin { background: #0d2039; } .m2If-title p { opacity: .7; } .moon .introduction-data ul li { border-right: 1px solid rgba(255,255,255,.1); } .moon .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title::after, .moon .hw-cont1 .hc1-title::after { background: url("../images/time_icon.png") no-repeat; background-size: cover; } .moon .hw-cont1 .hc1-cont::after { background: rgba(255,255,255,.5); } .moon .list::after, .moon .list::before { background: #fff; } .moon .joinus-right ul li { border-bottom: 1px solid rgba(255,255,255,.1); } .moon .mor-cont1 { border-top: 1px solid #fff; color: #fff; } .moon footer .contactUs { border-top: 1px solid rgba(255,255,255,.1); } .moon footer .contactUs ._w1400:after { background: rgba(255,255,255,.1); } .moon .theory2-cont { margin-top: 50px; margin-bottom: 100px; } .moon .power2-cont { margin-bottom: 100px; } .moon .adv::before { opacity: .2; } .moon ._news.news2 ul li .news2_des .text, .moon ._news.news2 ul li .news2_des b, .moon .advantage-right, .moon .dsm_title, .moon .ha ul li .des, .moon .hw-cont1 .hc1-cont, .moon .hw-cont1 .hc1-title span, .moon .inD-cont, .moon .inL-cont, .moon .list, .moon .sub_title b, .moon .sub_title p, .moon .sub_title.animated span, .moon footer .contactUs .viewbox p:nth-child(1), .moon footer .contactUs .viewbox p:nth-child(2), .moon nav.active ul .level1 a { color: #fff; } .moon .ha ul li .des{ color:#3e3e3e; } .moon .singlePage { background: #fff; padding: 0px; margin-top: 25px; } .menu_btn { position: absolute; right: 0; top: 0; width: 60px; height: 60px; background: #d20b17; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; border: none; display: none; } .menu_btn span, .menu_btn span:after, .menu_btn span:before { position: absolute; height: 2px; background-color: #fff; border-radius: 1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .menu_btn span { width: 20px; top: 29px; left: 20px; } .menu_btn span:after, .menu_btn span:before { content: ""; left: 0; } .menu_btn span:before { top: -6px; width: 14px; } .menu_btn span:after { top: 6px; width: 12px; } .menu_btn.active span { background-color: transparent; } .menu_btn.active span:after, .menu_btn.active span:before { background-color: #fff; width: 20px; } .menu_btn.active span:before { -webkit-transform: translateY(6px) rotate(-45deg); -ms-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); } .menu_btn.active span:after { -webkit-transform: translateY(-6px) rotate(45deg); -ms-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); } .menu_btn.active:hover span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } @media screen and (max-width:1366px) { .banner._h100vh { width: 1400px; height: 600px; position: absolute; left: 50%; top: 0; margin-left: -700px; } .service { margin-top: 600px; } .slogan { width: 250px; margin-left: -425px; top: 50%; } } @media screen and (max-width:1024px) { .core .bgimgtop, .service .bgimgtop { display: none; } .dsm_list ul li .info .t, .m2l-text p { font-size: 14px; } .m2l-text h3 { font-size: 24px; } .media2-left ul li { padding: 25px; } .hw-cont1 .hc1-title h3 { font-size: 30px; } .hw-cont1 .hc1-title span { bottom: -40px; } .hw-cont1 .hc1-cont::after { top: 50px; } } @media screen and (max-width:1023px) { .qin { display: block; } .singlePage{ padding-top: 20px; } .introduction-course { display: none; } .hw-cont1 .hc1-cont::after { left: -50px; height: calc(100% + 40px); top: 10px; } .hw-cont1 .hc1-title span { display: none; } .honor-wrap ul li { display: block; } .hw-cont1, .hw-cont2 { width: 100%; padding-left: 70px; text-align: left; } .m2IfW2-cont h3{ font-size: 14px; font-weight: normal; } .hw-cont1 .hc1-cont, .hw-cont1 .hc1-title { padding: 0; } .nd_title::after{ height: 3px; } ._w1200.ndbox{ width: 100%; padding: 15px; margin-top: 0px; } .nd_title{ font-size: 24px; line-height: 1.7; } .honor-wrap { margin-bottom: 100px; } .moon .hw-cont1 .hc1-title h3 { color: #fff; } .nav-right, .nav-right:after, nav::before { display: none; } nav { background: #fff; height: 60px; border-bottom: 1px solid #F0F0F0; } .moon nav { background: #0f2441; height: 60px; border-bottom: none; } nav .logo { width: 120px; margin-top: 9px; } nav .logo img:nth-child(1) { opacity: 0; } nav .logo img:nth-child(2) { opacity: 1; } .moon nav .logo img:nth-child(1) { opacity: 1; } .moon nav .logo img:nth-child(2) { opacity: 0; } /*.banner._h100vh { height: 60vh; }*/ .slogan { width: 200px; margin-left: -352px; } .service { margin-top: 60vh; padding-bottom: 20px; } .sub_title { padding: 50px 0 25px; } .sub_title b { font-size: 24px; } .core .content .viewbox .text p:nth-child(2), .sub_title p { font-size: 14px; } .service .swiper-wrapper .li p:nth-child(1) { font-size: 16px; } .service .swiper-wrapper .li p:nth-child(2) { display: none; } .course { height: 60vh; } .course .content .viewbox p:nth-child(1) span { font-size: 24px; } .course .content .viewbox p:nth-child(2) { font-size: 12px; height: 20px; line-height: 20px; } .core .content .viewbox .text p:nth-child(1) { font-size: 18px; } .core, .friend { padding-bottom: 50px; } .lbtn { margin-bottom: 0; font-size: 16px; } footer .contactUs ._w1400 { display: block; overflow: hidden; } footer .contactUs .viewbox { margin: 15px 0 0; width: 100%; float: left; margin-right: 0; } footer .contactUs .viewbox:nth-child(2) { margin-right: 0; padding-bottom: 35px; } footer .contactUs .viewbox p:nth-child(1) { font-size: 16px; padding-bottom: 5px; } footer .contactUs .viewbox p:nth-child(2) { padding-bottom: 5px; } footer .contactUs ._w1400:after { display: none; } .iconImg { width: 80px; margin-top: 5px; } footer .contactUs .viewbox .icon img { width: 24px; } footer .contactUs .viewbox .icon p { font-size: 24px; margin-left: 30px; } .menu_btn { display: block; } .friend-cont ul li { margin-bottom: 10px; } .nav-right.active { display: block; overflow: initial; } .nav.active .nav-right { height: 100vh; } nav.active ul .level1 ul li a { color: #fff; } .nav-right > ul { width: 100%; height: calc(100vh - 60px); margin-top: 60px; background: #fff; overflow-y: scroll; } nav ul .level1 { width: 100%; height: auto; line-height: 45px; border-bottom: 1px solid #F0F0F0; text-align: left; padding: 0 3%; } nav ul .level1 a { color: #3e3e3e; font-weight: bold; } nav ul .level1 > a.activeNav:after { width: 0; } nav ul .level1 > a.activeNav { color: #d20b17; text-indent: 10px; } nav ul .level1 > a.activeNav::after { width: 2px; height: 50%; background: #d20b17; position: absolute; left: 0; top: 25%; content: ''; } nav ul .level1 ul { display: block; background: #d20b17; height: auto; position: relative; } nav ul .level1 ul::after { width: 0; height: 0; display: block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #d20b17; position: absolute; left: 25px; top: -5px; content: ''; } .inL-cont { font-size: 14px; text-align: justify; } nav ul .level1:hover ul { background: #d20b17; } nav ul .level1 ul li a { color: #fff; height: auto; line-height: 45px; border-bottom: 1px solid #c30813; font-size: 14px; font-weight: normal; text-indent: 20px; } nav ul .level1 ul li { height: auto; width: 50%; float: left; } nav ul .level1 ul.active { display: block; } nav ul .level1 .sn { width: 100px; height: 60px; position: absolute; right: 0; top: 0; display: block; } nav ul .level1 .sn::before { width: 20px; height: 20px; background: url("../images/arrow_down.png") no-repeat; background-size: cover; content: ''; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; opacity: .5; -webkit-transform: rotate(-90deg); } nav ul .level1 .sn.active::before { -webkit-transform: rotate(0deg); } .theory-cont ul li { padding: 25px; } .tc-cont { width: 60%; } .tc-img { width: 40%; } .tc-cont h3 { font-size: 24px; padding-bottom: 5px; } .tc-cont p { font-size: 14px; } .tc-cont h4 { padding-bottom: 5px; } .sub_title.h { padding-top: 50px; } .t2c-left { width: 100%; } .t2c-right { width: 100%; } .theory2-cont { padding: 25px; display: block; margin-bottom: 50px; } .t2c-left h3 { padding-top: 0; padding-bottom: 15px; font-size: 24px; } .t2c-left-cont { padding-bottom: 5px; } .dsm_title { font-size: 16px; margin-bottom: 25px; } .pocP, .sub_title.animated span { font-size: 14px; } .ciTitle span, .singlePage { font-size: 14px; } .dsm_list ul li .icon { width: 50px; float: none; margin: auto; } .dsm_list ul li .info { width: 100%; margin-left: 0; text-align: center; float: none; margin-top: 15px; } .dsm_list ul li { height: 250px; } .dsm_list ul li .info .n::after { left: 50%; margin-left: -10px; } .cooperationInfo-text, .dsm_img, .power-cont { padding: 25px; } .power-cont.mp { padding: 25px; } .pocUl { width: 100%; margin-bottom: 25px; } .pimg { width: 100%; position: relative; right: 0; bottom: 0; } .pocSpan { margin-bottom: 15px; } .pimg img { max-width: auto; width: 100%; } .pocUl ul li:last-child { margin-right: 0; } .advantage, .fbox { padding: 50px 0; } .advantage2 { overflow-x: auto; } .advantage2 ul { width: 200vw; } .advantage2 ul li { width: 40vw; } .m2IfW2-cont { padding: 15px; } .cooperation-cont h3 { font-size: 24px; } .cooperation ul li { margin-bottom: 15px; } .cooperationInfo ul li.row .cooperationInfo-img, .cooperationInfo-img { width: 50%; } .cooperationInfo-text { width: 50%; } .ciP { height: auto; } .cooperationInfo-text { padding: 25px 15px; } .cooperationInfo ul li { margin-bottom: 15px; } .cooperationInfo ul li.row .cooperationInfo-text { padding: 15px; } .cooperationInfo ul li.row { width: 100%; margin-right: 0; } .cooperationInfo ul li.row .cooperationInfo-img { float: left; } .cooperationInfo ul li.row .cooperationInfo-text { width: 50%; float: left; } ._news.news2 ul li .news2_des .text { display: none; } ._news.news2 ul li .news2_des b { margin-bottom: 0; padding-bottom: 0; line-height: 25px; height: 50px; font-size: 16px; border-bottom: none; text-overflow: inherit; white-space: inherit; } ._news.news2 ul li { width: 100%; } ._news.news2 ul li:nth-child(3n){ margin-right: 2%; } ._news.news2 ul li:nth-child(even){ margin-right: 0%; } ._news.news2 ul li .news2_des { padding: 15px; } ._news_detail { width: 90%; margin-top: 0; padding: 15px; } ._ndc_top .title { font-size: 24px; } .detail_box { padding-bottom: 50px; } .introduction { display: block; padding-bottom: 50px; } .introduction-left, .introduction-right { width: 100%; } .introduction-right img { margin-top: 0; max-width: auto; width: 100%; } .inD-top span { font-size: 24px; } .inD-top p { line-height: 25px; } .inD-cont { font-size: 12px; } .introduction-data ul li { padding-left: 10px; } .inD-top { height: 32px; } .introduction-data ul { padding-bottom: 50px; } .cul_list { margin-bottom: 50px; } .hw-cont1 .hc1-cont p { text-overflow: inherit; white-space: normal; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-cont, .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title { padding-left: 50px; } #allmap { height: 300px; } .media2-left ul { height: calc(60vh - 80px); } .m2l-text h3 { font-size: 20px; } .sub_title.inL-title { padding-top: 0; } .joinus-right ul li .jtop .des, .joinus-right ul li .jtop .name { width: 100%; } .joinus-right ul li .jtop .des span:first-child { padding-left: 0; } .joinus-left, .joinus-right { width: 100%; } .joinus-left { margin-bottom: 20px; } .joinus-right ul li .jtop { padding: 15px; } .joinus { display: block; padding-top: 50px; } .jl-cont { padding: 25px; } .jl-cont::after { display: none; } .joinus-left h3 { padding-bottom: 5px; font-size: 18px; } .texts { width: 90%; left: 5%; font-size: 40px; } .texts ul li { text-align: center; } .honor-img img { width: 90px; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-cont::after { left: -50px; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title::after, .hw-cont1 .hc1-title::after { left: -70px; top: 0; } .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-cont, .honor-wrap ul li:nth-child(even) .hw-cont1 .hc1-title { padding-left: 0; } .honor-wrap ul li { height: auto; padding: 20px 0; } .honor-wrap ul li::after { display: block; width: 100%; height: 1px; clear: both; content: ''; } .media2-left ul { height: calc(60vh - 80px); margin-top: 60px; } .sub_banner { margin-top: 60px; } .power2-cont ul li, .power2-cont ul li:nth-child(3) { width: 49%; height: auto; float: left; margin-right: 2%; margin-top: 0; margin-bottom: 25px; } .power2-cont ul li:nth-child(even) { margin-right: 0; width: 49%; height: auto; margin-top: 0; } .power2-cont ul { flex-wrap: wrap; } .p2C-img, .power2-cont ul li:nth-child(2) .p2C-img, .power2-cont ul li:nth-child(3) .p2C-img, .power2-cont ul li:nth-child(4) .p2C-img { width: 200px; height: 200px; background: #ff0036 !important; border-radius: 50%; margin: auto; top: 0; position: relative; } .power2-cont ul li:nth-child(2) .p2C-img { background: #fb4f15 !important; } .power2-cont ul li:nth-child(3) .p2C-img { background: #fd0733 !important; } .power2-cont ul li:nth-child(4) .p2C-img { background: #fc100d !important; } .power2-cont ul li small { position: absolute; top: 27px; right: 5px; color: #fff; z-index: 5; background: #ff0036 !important; width: 100px; height: 30px; line-height: 30px; text-align: center; border-radius: 30px; } .power2-cont ul li:nth-child(2) small { top: 27px; background: #fb4f15 !important; } .power2-cont ul li:nth-child(4) small { top: 27px; background: #fc100d !important; } .p2C-cont, .power2-cont ul li:nth-child(3) .p2C-cont, .power2-cont ul li:nth-child(4) .p2C-cont { width: 100%; height: 200px; position: relative; } .p2C-day { display: none; } .p2C-img p, .power2-cont ul li:nth-child(4) .p2C-img p { width: 100%; margin-right: 0; font-size: 18px; } .power2-cont ul::after { background: none; } .p2Cc-title h3 { font-size: 36px; } .p2Cc-title { padding-top: 25px; } } @media screen and (max-width:767px) { .ndc_detail img{ height: auto; width: 100%; } .course .content .viewbox p { height: 24px; line-height: 24px; } .singlePage img{ width: 100%; height: auto; } .core .content .viewbox .text { padding: 20px 15px; } .core .content .viewbox .text p:nth-child(1) { font-size: 16px; } .core .content .viewbox .text p:nth-child(2) { font-size: 12px; } .banner._h100vh { left: 50%; margin-left: -50%; width: 100vw; } .service { margin-top: 414px; padding-bottom: 20px; } .slogan { width: 100px; margin-left: -185px; top: 50%; } .course .content .viewbox { width: 50%; margin-bottom: 20px; } .course .content { margin-bottom: 20px; } .course { height: auto; padding: 100px 0; } .course ._w1400 { width: 92%; left: 4%; margin-left: 0; top: 0; margin-top: 0; position: relative; transform: translate(0%,0%); } .core .content { flex-wrap: wrap; } .friend-cont ul li { width: 49%; margin-right: 2%; } .friend-cont ul li:nth-child(5n) { margin-right: 2%; } .friend-cont ul li:nth-child(2n) { margin-right: 0; } .core .content .viewbox { width: 100%; } footer .contactUs .viewbox .icon p { margin-left: 0; font-size: 20px; } footer .contactUs .viewbox .icon img { display: none; } footer .footer .footerNav { display: none; } footer .footer .text { padding: 0 3%; } .theory-cont ul li { padding: 15px; display: block; } .tc-cont, .tc-img { width: 100%; } .t2c-left h3 { font-size: 18px; } .t2c-left-cont h4 { font-size: 16px; } .dsm_list ul li { width: 100%; height: auto; } .cooperationInfo-text, .dsm_img, .power-cont { padding: 15px 0; } .pocSpan { font-size: 24px; } .pocUl ul { flex-wrap: wrap; } .pocUl ul li { width: 49%; margin-right: 2%; margin-bottom: 10px; } .pocUl ul li:nth-child(even) { margin-right: 0; } .pocUl { margin-bottom: 5px; } .media2-left ul { height: calc(100vh - 60px); margin-top: 60px; } .media2-left ul li { width: 50%; height: 33.33%; } .media2-left ul li { padding: 15px; } .dsm_list ul li .info .t, .m2l-text p { font-size: 12px; opacity: .5; } .m2l-text h3 { font-size: 18px; } .m2If-title h3 { font-size: 24px; } .m2If-wrap2 { padding-bottom: 50px; } .m2If-wrap2 ul li { width: 100%; } .cooperation { padding: 50px 3%; } .cooperation ul li { width: 100%; margin-right: 0; } .cooperation-cont h3 { font-size: 18px; } .cooperationInfo-img { width: 100%; } .cooperationInfo ul li, .introduction-data ul { flex-wrap: wrap; } .cooperationInfo-text { width: 100%; padding: 15px; } .ciTitle h3 { font-size: 18px; } .cooperationInfo ul li.row .cooperationInfo-img, .cooperationInfo ul li.row .cooperationInfo-text, .cooperationInfo-img { width: 100%; } ._ndc_top .title { font-size: 18px; } .introduction-data ul li { width: 50% !important; text-align: center; margin-bottom: 10px; } .inD-top { height: 32px; text-align: center; display: block; } .introduction-data ul li:nth-child(even) { border-right: none; } .cul_list ul li { width: 100%; margin-right: 0; margin-bottom: 10px; } .hw-cont1 .hc1-cont::after { height: calc(100% + 30px); } .advantage2-cont { padding: 15px; display: none; } .ai-location { bottom: 20px; } .ai-location h4 { font-size: 16px; font-weight: normal; } .ai-location p { font-size: 12px; } .power2-cont { padding: 15px; } .p2C-img, .power2-cont ul li:nth-child(2) .p2C-img, .power2-cont ul li:nth-child(3) .p2C-img, .power2-cont ul li:nth-child(4) .p2C-img { width: 100%; border-radius: 0; height: 30px; display: block; line-height: 30px; } .power2-cont ul li small { position: relative; text-align: center; display: block; width: 100%; right: 0; border-radius: 0; line-height: 40px; top: 0; } .p2C-img p, .power2-cont ul li:nth-child(4) .p2C-img p { font-size: 16px; font-weight: bold; } .power2-cont ul li:nth-child(2) small, .power2-cont ul li:nth-child(3) small, .power2-cont ul li:nth-child(4) small { top: 0; } .texts { font-size: 24px; } .power-cont.mp { padding: 15px; } ._news.news2 ul li .news2_des b { font-size: 14px; line-height: 20px; } ._news.news2 ul li .news2_des { padding: 5px 0; background: none; } .friend { background-size: auto; } .hw-cont1 .hc1-title h3 { font-size: 24px; } .advantage-right, .ha ul li .des, .hw-cont1 .hc1-cont { font-size: 14px; } .joinus-left h3 { font-size: 16px; } .jl-cont { padding: 15px; } .joinus-right ul li .jdes { padding: 15px; font-size: 14px; } } @media screen and (min-width: 1024px) {.gsgs01{ width: 54%; margin:0px auto; line-height:220%;}} @media screen and (max-width: 1024px) {.gsgs01{ height: 99%;margin:0px auto;}} .news-list-page .container {max-width:1350px;} @media screen and (min-width: 1024px) {.news-tab-wrap {padding:65px 0 57px;}} @media screen and (max-width: 1024px) {.news-tab-wrap {padding:65px 0 4px;}} .news-tab-wrap li {display:inline-block;margin-right:10px;} .news-tab-wrap li a { display:block; width:150px; height:50px; font-size:14px; color:#666; line-height:50px; text-align:center; background:#fff; border-radius:25px; transition:all .4s ease-in-out; } .news-tab-wrap li.on a,.news-tab-wrap li a:hover {color:#fff;background:#e00018;} .news-list .item-list {margin-left:-1.5%;} .news-list li { position:relative; float:left; width:48.5%; margin:0 0 1.5% 1.5%; background:#fff; } /* 鑱旂郴鎴戜滑 */ .contact{float: left; width: 100%; padding-bottom: 70px;} .contTop{float: left; width: 100%; margin-top: 80px; position: relative;} .contLe{float: left; width: 66.714286%; background: #ebebeb; padding-bottom: 60px;} .contLe .contTit{float: left; width: 100%; padding: 50px 30px 32px 80px;} .contLe .contTit h2{float: left; width: 100%; line-height: 45px; height: 45px; font-size: 30px; color: #333333;} .contLe .contTit h4{float: left; width: 100%; line-height: 36px; font-size: 16px; color: #9c9c9c;} .contLe ul{float: left; width: 100%;} .contLe ul li{float: left; width: 100%; background: #f6f6f6; padding: 35px 20px 35px 85px;} .contLe ul li:nth-child(2n){background: none;} .contLe .contBox{float: left; width: 50%; padding-left: 62px; position: relative; line-height: 28px; height: 56px; overflow: hidden;} .contLe .contBox i{position: absolute; left: 0; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: block;} .contLe .contBox i img{float: left; width: 100%; display: block;} .contLe .contBox h4{float: left; width: 100%; line-height: 28px; height: 28px; font-size: 16px; color: #444;} .contLe .contBox span{float: left; width: 100%; display: block; line-height: 28px; height: 28px; font-size: 16px; color: #444;} .contLe .contBox.even{width: 100%;} .contRi{position: absolute; right: 0; top: 0; width: 30.857143%; background: #f6f6f6; padding-top: 90px; height: 100%; text-align: center;} .contRi h2{float: left; width: 100%; line-height: 60px; font-size: 30px; color: #333333; height: 60px; } .contRi .contRiBox{display:inline-block; *display:inline; *zoom:1; vertical-align: top; width: 64.583333%; margin-top: 36px;} .contRi .contRiBox img{float: left; width: 46.236559%;} .contRi .contRiBox h4{float: left; width:100%; line-height: 26px; height: 26px; font-size: 14px; color: #6d6d6d; margin-top: 22px; text-align: left;} .contRi .contRiBox span{float: left; width:100%; display: block; line-height: 30px; height: 30px; font-size: 14px; color: #a4a4a4;text-align: left;} .map{float: left; width: 100%; margin-top: 32px; overflow: hidden; position: relative; height: 556px;} .BMap_pop,.BMap_shadow,.anchorBL,.BMapLabel{display:none !important;} @media screen and (max-width:1199px){ .contLe{padding-bottom: 40px;} .contLe .contTit{padding: 40px 20px 22px 60px;} .contLe .contTit h2{line-height: 40px; height: 40px; font-size: 26px;} .contLe .contTit h4{line-height: 30px; font-size: 14px;} .contLe ul li{padding: 30px 20px 30px 65px;} } @media screen and (max-width:991px){ .contact{padding-bottom: 50px;} .contLe{padding-bottom: 30px;} .contLe .contTit{padding: 30px 20px 20px 20px;} .contLe .contTit h2{line-height: 30px; height: 30px; font-size: 22px;} .contLe .contTit h4{line-height: 20px; font-size: 12px;} .contLe ul li{padding: 20px;} .contLe .contBox{padding-left: 42px;line-height: 24px; height: 48px;} .contLe .contBox i{width: 30px; height: 30px; margin-top: -15px;} .contLe .contBox h4{line-height: 24px; height: 24px; font-size: 15px;} .contLe .contBox span{line-height: 24px; height: 24px; font-size: 14px;} .contRi {padding-top: 60px;} .contRi h2{line-height: 40px; font-size: 24px; height: 40px; } .map{height: 400px;} } @media screen and (max-width:767px){ .contTop{margin-top: 30px;} .contact{padding-bottom: 30px;} .contLe{padding-bottom: 30px; width: 100%;} .contLe .contTit{padding: 20px 15px;} .contLe .contTit h2{line-height: 30px; height: 30px; font-size: 18px;} .contLe .contTit h4{line-height: 20px; font-size: 12px;} .contLe ul li{padding: 20px 15px;} .contLe .contBox{padding-left: 35px;height: auto;} .contLe .contBox i{width: 24px; height: 24px; margin-top: -12px;} .contLe .contBox h4{ font-size: 14px;} .contLe .contBox span{height: auto; font-size: 13px;} .contRi {padding-top: 40px; padding-bottom: 30px; position: static; top: auto; right: auto; width: 100%; margin-top: 20px; float: left; } .contRi h2{line-height: 30px; font-size: 20px; height: 30px; } .contRi .contRiBox h4, .contRi .contRiBox span{text-align: center;} .map{height: 300px;} } @media screen and (max-width:369px){ .contLe .contBox{width: 100%; margin-top: 5px; padding-left: 35px;height: auto;} }