@charset "utf-8"; * { padding: 0; margin: 0; box-sizing: border-box; user-select: none; -webkit-text-size-adjust: none; } :root { /* ====== Transition ====== */ --tran-03: all 0.3s ease; --tran-04: all 0.4s ease; --tran-05: all 0.5s ease; --tran-06: all 0.6s ease; } body { font-family: "PingFang SC", "Microsoft YaHei", "Calibri", "opensans", "GothicArial", "Arial", "San Francisco", "Hiragino Sans GB", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; background: #ffffff; } body.hd { overflow: hidden; } input, textarea, select, button { border: none; outline: none; resize: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; font-family: "PingFang SC", "Microsoft YaHei", "Arial", "Calibri", "opensans", "GothicArial", "San Francisco", "Hiragino Sans GB", "Helvetica Neue", Helvetica, sans-serif; } button { cursor: pointer; } ul, ol, li { list-style: none; } a { text-decoration: none; color: inherit; cursor: pointer; } a:hover { text-decoration: none; } a:focus { outline: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } i, b { font-style: normal; } table { border-collapse: collapse; border-spacing: 0; } img { max-width: 100%; } /* 引入字体 */ /* @font-face { font-family: "PingFang SC"; src: url(../font/PingFang.ttf); } @font-face { font-family: "Gotham"; src: url(../font/Gotham.otf); } @font-face { font-family: "Gotham-Regular"; src: url(../font/GothamRegular.otf); } @font-face { font-family: "GILLSAN"; src: url(../font/GILLSAN.TTF); } */ /* 清除默认样式 */ .swiper-button-next, .swiper-button-prev { outline: none; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 14px; color: #000000; } input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ font-size: 14px; color: #000000; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */ font-size: 14px; color: #000000; } input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- */ font-size: 14px; color: #000000; } .err-input { border: 1px solid #0bb798 !important; } /* 滚动条 */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-button:vertical { display: none; } ::-webkit-scrollbar-track:vertical { background: #ffffff; } ::-webkit-scrollbar-track-piece { background: #ffffff; } ::-webkit-scrollbar-thumb:vertical { background: #0bb798; border-radius: 30px; } /* 浮动 */ .fl { float: left; } .fr { float: right; } /* 清除 */ .ov { overflow: hidden; } /* 隐藏 */ .op0 { opacity: 0; visibility: hidden; } .op1 { opacity: 1; visibility: visible; } /* flex布局 */ .fl-f { display: flex; display: -webkit-flex; } /* flex上下布局 */ .fl-ac { display: flex; display: -webkit-flex; align-items: center; } .fl-as { display: flex; display: -webkit-flex; align-items: flex-start; } .fl-ae { display: flex; display: -webkit-flex; align-items: flex-end; } /* flex左右布局 */ .fl-jc { display: flex; display: -webkit-flex; justify-content: center; } .fl-jb { display: flex; display: -webkit-flex; justify-content: space-between; } .fl-ja { display: flex; display: -webkit-flex; justify-content: space-around; } .fl-js { display: flex; display: -webkit-flex; justify-content: flex-start; } .fl-je { display: flex; display: -webkit-flex; justify-content: flex-end; } /* flex上下左右布局 */ .fl-cc { display: flex; display: -webkit-flex; align-items: center; justify-content: center; } .fl-cb { display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; } .fl-ca { display: flex; display: -webkit-flex; align-items: center; justify-content: space-around; } .fl-cs { display: flex; display: -webkit-flex; align-items: center; justify-content: flex-start; } .fl-ce { display: flex; display: -webkit-flex; align-items: center; justify-content: flex-end; } .fl-sa { display: flex; display: -webkit-flex; align-items: flex-start; justify-content: space-around; } .fl-sb { display: flex; display: -webkit-flex; align-items: flex-start; justify-content: space-between; } .fl-ss { display: flex; display: -webkit-flex; align-items: flex-start; justify-content: flex-start; } .fl-se { display: flex; display: -webkit-flex; align-items: flex-start; justify-content: flex-end; } .fl-ea { display: flex; display: -webkit-flex; align-items: flex-end; justify-content: space-around; } .fl-eb { display: flex; display: -webkit-flex; align-items: flex-end; justify-content: space-between; } .fl-es { display: flex; display: -webkit-flex; align-items: flex-end; justify-content: flex-start; } .fl-ee { display: flex; display: -webkit-flex; align-items: flex-end; justify-content: flex-end; } /* flex自适应布局 */ .fl-fw { display: flex; flex-wrap: wrap; } .fl-fn { display: flex; flex-wrap: nowrap; } .fl-fc { display: flex; flex-direction: column; } /* 手机端按钮 */ .toggle { display: none; padding: 0 0; background: transparent; border: none !important; z-index: 100; } .toggle .line-top, .toggle .line-middle, .toggle .line-bottom { display: block; width: 24px; height: 3px; background: #ffffff; margin: 5px 0; transition: 0.4s; } .open.toggle .line-top, .open.toggle .line-middle, .open.toggle .line-bottom { background: #ffffff; } .header.on .toggle .line-top, .header.on .toggle .line-middle, .header.on .toggle .line-bottom { background: #0bb798; } .header.on .open.toggle .line-top, .header.on .open.toggle .line-middle, .header.on .open.toggle .line-bottom { background: #0bb798; } .open .line-top { -webkit-transform: rotate(45deg) translate(4px, 9px); transform: rotate(45deg) translate(4px, 9px); } .banner .pic video { max-width: 100%; width: 100%; } .open .line-middle { opacity: 0; } .open .line-bottom { -webkit-transform: rotate(-45deg) translate(2px, -7px); transform: rotate(-45deg) translate(2px, -7px); } .wap-sub { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000; box-sizing: border-box; padding-top: 80px; overflow-y: auto; transform: translateX(-100%); transition: all cubic-bezier(0.75, 0, 0.29, 1.03) 0.5s; display: none; } .wap-sub.on { transform: translateX(0); } .wap-sub .item { width: 100%; height: auto; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 0 4.166667vw; } .wap-sub .item .sll { padding: 10px 0; } .wap-sub .item .sll a { font-size: 16px; font-weight: normal; color: #ffffff; } .wap-sub .item .sll .img { width: 16px; transform: rotate(-90deg); transition: all ease 0.3s; } .wap-sub .item.on .img { transform: rotate(0); } .wap-sub .item .s-sub { width: 100%; overflow: hidden; display: none; background: #333; padding: 0; border-radius: 0; margin: 15px 0; } .s-sub dd a.title { font-size: 16px; } .s-sub dd a { width: 100%; display: block; font-size: 14px; color: #fff; padding: 5px 10px; transition: all ease 0.3s; } .zw { height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: none !important; } .zw::after, .zw::before { display: none !important; } .container { width: 100%; } .wrapnew { width: 100%; } .row { width: 100%; } .more { width: 7.292vw; height: 2.604vw; background: rgba(255, 255, 255, 0.36); /* box-shadow: 0px 0px 10px 1px rgba(11, 183, 152, 0.6); */ border-radius: 24px; margin: 0 auto; transition: all ease 0.5s; } .more .em { width: 1.25vw; height: 1.25vw; background: rgba(255, 255, 255, 0.19); border-radius: 10px; transition: all ease 0.5s; } .more:hover, .more:hover .em { background: #0bb798; } .more:hover { box-shadow: none; } .more span { display: inline-block; margin-right: 0.521vw; } .more span, .more i { font-size: 0.833vw; font-weight: 400; color: #ffffff; transition: all ease 0.5s; } .more1 { width: 7.292vw; height: 2.604vw; background: transparent; box-shadow: 0px 0px 10px 1px rgba(11, 183, 152, 0.53); border: 2px solid #0bb798; border-radius: 24px; margin: 0 auto; transition: all ease 0.5s; } .more1 .em { width: 1.25vw; height: 1.25vw; background: #0bb798; border-radius: 10px; transition: all ease 0.5s; } .more1 span { display: inline-block; margin-right: 0.521vw; } .more1 span, .more1 i { font-size: 0.833vw; font-weight: 400; color: #ffffff; transition: all ease 0.5s; } .more2 { width: 7.292vw; height: 2.604vw; background: #ffffff; border: 2px solid #0bb798; border-radius: 24px; margin: 0 auto; transition: all ease 0.5s; } .more2 .em { width: 1.25vw; height: 1.25vw; background: #ffffff; border-radius: 10px; transition: all ease 0.5s; } .more2 span { display: inline-block; margin-right: 0.521vw; } .more2 span, .more2 i { font-size: 0.833vw; font-weight: 400; color: #000000; transition: all ease 0.5s; } .more2:hover { background: #0bb798; } .more2:hover span, .more2:hover i { color: #ffffff; } .more3 { width: 7.292vw; height: 2.604vw; background: #ffffff; box-shadow: 0px 0px 10px 1px rgba(206, 206, 206, 0.65); border-radius: 24px; margin: 0 auto; transition: all ease 0.5s; } .more3 .em { width: 1.25vw; height: 1.25vw; background: #ffffff; border-radius: 10px; transition: all ease 0.5s; } .more3 span { display: inline-block; margin-right: 0.521vw; } .more3 span, .more3 i { font-size: 0.833vw; font-weight: 400; color: #b2b2b2; transition: all ease 0.5s; } .more3:hover { background: #0bb798; box-shadow: none; } .more3:hover span, .more3:hover i { color: #ffffff; } .swiper-txt span { font-size: 0.833vw; font-weight: 400; color: #7b7b7b; } .swiper-txt span.curr { color: #ffffff; } .swiper-btn { width: 2.083vw; height: 2.083vw; background: #dfdfdf; border-radius: 50%; cursor: pointer; transition: all ease 0.5s; } .swiper-btn i { font-size: 0.833vw; color: #636363; transition: all ease 0.5s; } .swiper-btn:hover { background: #0bb798; } .swiper-btn:hover i { color: #ffffff; } .swiper-btn2 { width: 2.083vw; height: 2.083vw; background: rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; transition: all ease 0.5s; } .swiper-btn2 i { font-size: 0.833vw; color: #ffffff; transition: all ease 0.5s; } .swiper-btn2:hover { background: #ffffff; } .swiper-btn2:hover i { color: #0bb798; } .pagelist { width: 100%; } .pagelist .page { width: 2.344vw; height: 2.344vw; margin: 0 0.313vw; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.08); border-radius: 50%; transition: all ease 0.5s; } .pagelist .page a { width: 100%; height: 100%; font-size: 0.833vw; font-weight: 600; color: #000000; transition: all ease 0.5s; } .pagelist .page i { font-size: 0.833vw; } .pagelist .page.on, .pagelist .page:hover { background: #0bb798; } .pagelist .page.on a, .pagelist .page:hover a { color: #ffffff; } .t1 { width: 100%; margin: 0 0 4.688vw; } .t1 h2 { font-size: 2.5vw; font-weight: 600; color: #000000; position: relative; } .t1 h2::before { content: ""; display: inline-block; position: absolute; left: -1.563vw; top: 0.521vw; width: 0.521vw; border-top: 8px solid #0bb798; border-bottom: 8px solid #ffffff; } .special .t1 h2::before { border-bottom: 8px solid #000000; } .t2 { width: 100%; text-align: center; } .t2 h2 { font-size: 2.5vw; font-weight: 400; color: #000000; display: inline-block; position: relative; } .t2 h2::before { content: ""; position: absolute; top: 0; left: -0.729vw; z-index: 1; width: 0.729vw; height: 0.729vw; border-top: 0.156vw solid #0bb798; border-left: 0.156vw solid #0bb798; transition: all ease 0.5s; } .t2 h2::after { content: ""; position: absolute; bottom: 0; right: -0.729vw; z-index: 1; width: 0.729vw; height: 0.729vw; border-bottom: 0.156vw solid #0bb798; border-right: 0.156vw solid #0bb798; transition: all ease 0.5s; } .t2 h4 { font-size: 1.875vw; font-weight: 600; color: #000000; } .t2 p { max-width: 650px; width: 90%; font-size: 0.933vw; color: #000000; line-height: 1.8; margin: 0.781vw auto 0; } .t2 em { width: 1.25vw; height: 0.208vw; background: #dfdfdf; display: block; margin: 0.938vw auto 0; } @keyframes ani-gd { 0% { transform: translateX(0%); -webkit-transform: translateX(0%); } 100% { transform: translateX(-50%); -webkit-transform: translateX(-50%); } } @-webkit-keyframes ani-gd { 0% { transform: translateX(0%); -webkit-transform: translateX(0%); } 100% { transform: translateX(-50%); -webkit-transform: translateX(-50%); } } @keyframes tobig { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes firstCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 35% { -webkit-transform: translateX(2%) translateY(-14%); transform: translateX(2%) translateY(-14%); } 65% { -webkit-transform: translateX(5%) translateY(14%); transform: translateX(5%) translateY(14%); } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes secondCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9%) translateY(-1%); transform: translateX(-9%) translateY(-1%); } 75% { -webkit-transform: translateX(11%) translateY(-14%); transform: translateX(11%) translateY(-14%); } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes thirdCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 30% { -webkit-transform: translateX(5%) translateY(11%); transform: translateX(5%) translateY(11%); } 70% { -webkit-transform: translateX(-13%) translateY(-5%); transform: translateX(-13%) translateY(-5%); } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } /* 公共头部 */ .header { position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 4.167vw; background: transparent; transition: all ease 0.5s; } .header.dark { background: rgba(0, 0, 0, 0.5) !important; } .header.active, body.dark .header { background: #000000; } .header .row { height: 100%; padding: 0 8.333vw; } .header .logo img { width: 10.417vw; z-index: 210; } .header .after { display: none; } .header.on .before { display: none; } .header.on .after { display: block; } .header .menu { height: 100%; } .header .link { height: 100%; margin: 0 0 0 6.25vw; position: relative; } .header .link:first-child { margin: 0; } .header .link .li>img { width: 0.625vw; margin-right: 0.313vw; opacity: 1; visibility: hidden; transition: all ease 0.5s; } /* .header .link:hover > img, */ .header .link.on .li>img { opacity: 1; visibility: visible; } .header .link .li>span { font-size: 0.833vw; font-weight: 400; color: #ffffff; position: relative; transition: all ease 0.5s; } .header .link .li>span::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 0; height: 1px; z-index: 3; background: #0BB798; transition: all ease 0.5s; } .header .link.on .li>span { color: #0bb798 !important; font-weight: bold; } .header .link:hover .li>span::after { width: 100% !important; } .header.on .link .li>span { color: #000000; } .header.on .link.on .li>span { color: #0bb798; } .header .downmenu { width: max-content; max-width: 300px; min-width: 150px; position: absolute; left: 0; top: 100%; z-index: 50; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; } .header .link:hover .downmenu { display: block; } .header .downmenu a { width: max-content; /* min-width: 100%; */ max-width: 100%; display: block; padding: 0.621vw 1.521vw; font-size: 0.729vw; color: #ffffff; background: transparent; white-space: nowrap; position: relative; transition: all ease 0.5s; } .header .downmenu p.on::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #0BB798; } .header .downmenu a:hover { color: #ffffff; background: linear-gradient(273deg, rgba(11, 183, 152, 0) 0%, #0BB798 100%); } .header .downmenu .curr a, .header .downmenu .curr a:hover { cursor: auto; font-size: 16px; font-weight: bold; color: #0BB798; background: transparent; /* background: linear-gradient(273deg, rgba(171, 171, 171, 0) 0%, #ababab 100%); */ } .footer { width: 100%; background: #131230; position: relative; } .footer .row { width: 100%; padding: 0 8.333vw; } .footer .footA { width: 100%; padding: 4.688vw 0; } .footer .f-cont { width: 16.25%; } .footer .f-cont h4 { font-size: 0.833vw; font-weight: 400; color: #ffffff; } .footer .f-cont h6 { font-size: 0.729vw; font-family: "Gotham-Regular"; font-weight: 400; color: #b2b2b2; margin: 1.042vw 0 0.417vw; } .footer .f-cont p { font-size: 0.729vw; font-family: "Gotham-Bold"; /* font-weight: bold; */ color: #ffffff; } .footer .f-cont p:last-child { font-family: "PingFang SC"; } .footer .f-menu { width: 60%; } .footer .f-menu p { font-size: 0.833vw; font-weight: 400; color: #ffffff; } .footer .f-menu a { font-size: 0.729vw; color: #b2b2b2; transition: all ease 0.5s; } .footer .f-menu em { display: inline-block; vertical-align: middle; width: 0.521vw; height: 0.052vw; background: #b2b2b2; margin-right: 0.625vw; transition: all ease 0.5s; } .footer dd:hover a{ color: #0bb798; } .footer dd:hover em { background: #0bb798; } .footer .f-menu dd { margin: 0.781vw 0 0; } .footer .f-ewm { width: 13.125%; } .footer .f-ewm .ev { width: 48.5%; text-align: center; } .footer .f-ewm h6 { font-size: 0.833vw; font-weight: 600; color: #ffffff; margin: 0 0 1.042vw; } .footer .f-ewm p { font-size: 0.729vw; font-weight: 400; color: #ffffff; margin: 0.26vw 0 0; } .footer .footB { width: 100%; padding: 0 0 3.125vw; } .footer .footB p { font-size: 0.729vw; font-weight: 400; color: #b2b2b2; } .footer .footB a { font-size: 0.729vw; font-family: "Gotham-Regular"; font-weight: 400; color: #b2b2b2; margin-left: 0.521vw; transition: all ease .3s; } .footer .footB a:hover{ color: #0bb798; } .footer .footB a.on { color: #ffffff; } .banner { width: 100%; position: relative; margin-top: 6.6667vw; } .banner .pic { width: 100%; position: relative; overflow: hidden; } /* .banner .pic::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.42); } */ .pic img{ width: unset; } .banner .pic img { max-width: 100%; width: 100%; -webkit-animation: tobig 30s linear infinite; animation: tobig 30s linear infinite; } .banner .intr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 100%; text-align: center; } .banner .intr h2 { font-size: 2.5vw; font-weight: 600; color: #ffffff; position: relative; padding-bottom: 0.938vw; margin-bottom: 0.938vw; } .banner .intr h2::after { content: ""; position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); width: 0.833vw; height: 0.104vw; background: #ffffff; } .banner .intr h4 { font-size: 1.458vw; font-weight: 400; color: #f2f2f2; } .banner .intr p { max-width: 620px; width: 90%; margin: 0 auto; font-size: 0.833vw; font-weight: 400; color: #ffffff; line-height: 1.5; } .banner .play { position: absolute; right: 3.125vw; bottom: 3.646vw; cursor: pointer; z-index: 5; } .banner .play span { font-size: 0.833vw; color: #ffffff; } .banner .play .img { width: 1.25vw; height: 1.25vw; margin-right: 1.042vw; border-radius: 50%; position: relative; } .banner .play .img::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.083vw; height: 2.083vw; border-radius: 50%; background: rgba(255, 255, 255, 0.24); } .navnew { width: 100%; position: sticky; position: -webkit-sticky; top: 4.6875vw; z-index: 40; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.07); transition: all ease 0.5s; } .navnew .row { padding: 0 16.667vw; } .navnew .sub { padding: 10px 15px; /* width: 7.292vw; height: 3.125vw; */ background: #ffffff; transition: all ease 0.5s; } .navnew .sub:hover, .navnew .sub.on { background: #0bb798; } .navnew .sub span { font-size: 0.833vw; font-weight: 400; color: #b2b2b2; transition: all ease 0.5s; } .navnew .sub:hover span, .navnew .sub.on span { color: #ffffff; } /* 首页 */ #pagescroll { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } #pagescroll.on { overflow-x: hidden; overflow-y: scroll; } #pagescroll .section { width: 100%; height: 100%; } #pagescroll .section.height-auto { height: auto !important; } #pagescroll .section.height-auto.on { overflow-x: hidden; overflow-y: scroll; } #page { position: fixed; width: 100%; height: 100vh; overflow: hidden; } #page::-webkit-scrollbar { display: none; } #page.on { overflow-x: hidden; overflow-y: scroll; } #swiper-wrapper { transition-delay: 0.1s; } #page .section { width: 100%; height: 100%; } #page .section.height-auto { height: auto !important; } #page .section .wowd { width: 100%; height: 100%; background: #ffffff; } .layer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; width: 100%; height: 100%; background: #ffffff; } .layer img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; } .layer video { width: 100%; height: 100%; object-fit: cover; } .videob, .imgb { width: 100%; height: 100%; } .layer .video, .layer .img { display: none; } .layer .video.on, .layer .img.on { display: block; } #ckLine { width: 100%; height: 100%; } .stars, .twinkling { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; } .swiper-btns { position: fixed; left: 2.344vw; top: 50%; transform: translateY(-50%); z-index: 20; transition: all ease 0.5s; } .swiper-btns .btns { position: relative; margin: 1.042vw 0; cursor: pointer; transition: all ease 0.5s; } .swiper-btns .btns span { font-size: 0.729vw; font-weight: 400; color: #b2b2b2; margin-left: 0.781vw; opacity: 1; visibility: visible; transition: all ease 0.5s; } .swiper-btns .btns.cur span, .swiper-btns .btns:hover span { opacity: 1; visibility: visible; } .swiper-btns .dots { position: relative; width: 0.938vw; height: 0.938vw; background: transparent; border-radius: 50%; transition: all ease 0.5s; } .swiper-btns .cur .dots { background: #0bb798; } .swiper-btns .dots::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.521vw; height: 0.521vw; background: #b2b2b2; border-radius: 50%; transition: all ease 0.5s; } .swiper-btns .cur .dots::before { background: #ffffff; } .swiper-btns .cur span { color: #0bb798; } /* .swiper-btns .swiper-btn { width: 2.083vw; height: 2.083vw; background: transparent; border: 1px solid #707070; border-radius: 50%; cursor: pointer; transition: all ease 0.5s; } .swiper-btns .swiper-btn i { font-size: 0.833vw; color: #707070; transition: all ease 0.5s; } */ .home1 { width: 100%; height: 100%; position: relative; } .home1 .pic { width: 100%; position: relative; } /* .home1 .pic::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.41); z-index: 0; } */ .home1 .pic img, .home1 .pic video { max-width: 100%; width: 100%; height: 100vh; object-fit: cover; } .home1 .intr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; margin: 0 auto; padding: 0 18.229vw; } .home1 .intr h1 { font-size: 3.125vw; font-weight: bold; color: #ffffff; } .home1 .intr b { color: #0bb798; } .home1 .intr p { max-width: 570px; margin: 1.042vw 0 3.125vw; font-size: 0.833vw; font-weight: 200; color: #ffffff; line-height: 1.5; } .home1 .intr .more { margin: 0; } .home1 .swiper-button { position: absolute; z-index: 5; right: 1.823vw; top: 50%; transform: translateY(-50%); text-align: center; } .home1 .swiper-txt { margin: 0 0 1.042vw; } .home1 .swiper-btn.prev { margin-right: 0.781vw; } /* .home1 .swiper-button-disabled{ opacity: 0; } */ .home2 { width: 100%; height: 100%; position: relative; } .home2::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(118deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.52) 65%, rgba(255, 255, 255, 0.02) 100%); } .home2 .expandbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .home2 .expand { width: 100%; height: 100%; display: none; } .home2 .expand.on { display: block; } .load { position: absolute; display: flex; width: auto; cursor: pointer; transform: rotate(0deg); transform-origin: left center; z-index: 7; } .load span { position: relative; display: block; width: 18px; height: 18px; background: #fff; border: 7px solid #f9b200; border-radius: 50%; transition: background 0.4s ease 0s, opacity 0.4s ease-in-out 0s; } .load span::before, .load span::after { content: ""; display: block; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background: rgba(249, 178, 0, 0.5); } .load span::before { animation: boderM 3s 0.75s infinite; } .load span::after { animation: boderM 3s infinite; } @keyframes boderM { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0; } 20% { opacity: 1; } 75% { transform: translate(-50%, -50%) scale(2); opacity: 0; } 100% { opacity: 0; } } .load>div { overflow: hidden; margin-left: 0.521vw; border-radius: 40px; height: 40px; max-width: 0px; transition: max-width 0.4s ease-in-out 0s; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); text-align: center; } .load:hover>div { max-width: 500px; } .load>div p { font-size: 0.833vw; font-weight: 400; color: #ffffff; position: relative; display: flex; -webkit-box-align: center; align-items: center; height: 100%; max-width: 500px; padding: 0px 1.042vw; border-radius: 40px; z-index: -1; background: #f9b200; overflow: hidden; white-space: nowrap; transform: translateX(-100%) rotate(0deg); opacity: 0; transition: transform 0.4s ease-in-out 0s, background 0.4s ease 0s, opacity 0.4s ease 0s, max-width 0.4s ease-in-out 0s; } .load:hover>div p { transform: translateX(0px) rotate(0deg); opacity: 1; max-width: 100%; } .load:nth-child(1) { left: 52%; top: 16%; } .load:nth-child(2) { left: 72%; top: 33%; } .load:nth-child(3) { left: 90%; bottom: 35%; } .load:nth-child(4) { left: 53%; bottom: 32%; } .load:nth-child(5) { left: 70%; bottom: 27%; } .home2 .row { position: relative; z-index: 3; padding: 8vw 0 0 18.229vw; } .home2 .col { width: 100%; position: relative; z-index: 3; } .home2 .ev { width: 100%; margin: 0 0 3.125vw; transition: all ease 0.5s; } .home2 .pic { width: 100%; } .home2 .pic img { width: 4.167vw; margin-right: 2.344vw; filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; transition: all ease 0.5s; } .home2 .ev:hover .pic img, .home2 .ev.on .pic img { -webkit-filter: none; filter: none; } .home2 .pic h3 { font-size: 2.083vw; font-weight: bold; color: #b2b2b2; transition: all ease 0.5s; } .home2 .ev.on h3 { color: #0bb798; } .home2 .intr { width: 100%; padding-left: 6.51vw; display: none; /* height: 0; overflow: hidden; transition: all ease 0.6s; */ } /* .home2 .ev.on .intr { height: auto; overflow: visible; } */ .home2 .intr p { font-size: 0.833vw; font-weight: 400; color: #666666; margin: 0 0 0.781vw; padding-left: 1.146vw; position: relative; } .home2 .intr p::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: #0bb798; border-radius: 50%; } .home2 .look { padding-left: 1.146vw; } .home2 .more { margin: 0; } .home2 .more span, .home2 .more i { color: #000000; } .home2 .more:hover span, .home2 .more:hover i { color: #ffffff; } .look span { display: inline-block; margin-right: 0.26vw; } .look span, .look i { font-size: 0.729vw; color: #000000; transition: all ease 0.5s; } .home3 { width: 100%; height: 100%; position: relative; } .home3 .row { position: relative; z-index: 5; padding: 8vw 16.667vw 0 18.229vw; } .home3 .t1 { position: relative; } .home3 .t1 p { width: 45vw; position: absolute; right: 0; top: 0; z-index: 6; text-align: center; font-size: 0.938vw; color: #000000; line-height: 1.5; } .home3 .pic { position: relative; width: 38%; } .home3 .pic img { max-width: 100%; width: 100%; border-radius: 50%; z-index: 2; } .home3 .txtb { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 4.948vw; z-index: 5; } .home3 .liquid { position: absolute; background: #0bb798; border-radius: 50%; } .home3 .small { width: 100%; height: 100%; opacity: 0.1; -webkit-animation: firstCircle 10s ease infinite; animation: firstCircle 10s ease infinite; } .home3 .medium { width: 102%; height: 102%; opacity: 0.2; -webkit-animation: secondCircle 10s ease infinite; animation: secondCircle 10s ease infinite; } .home3 .large { width: 104%; height: 104%; opacity: 0.3; -webkit-animation: thirdCircle 10s ease infinite; animation: thirdCircle 10s ease infinite; } .home3 .txtb span { font-size: 4.115vw; font-family: "Poppins"; font-weight: bold; color: #ffffff; display: block; margin: 0 0 1.563vw; } .home3 .txtb p { font-size: 0.833vw; font-weight: 400; color: #ffffff; line-height: 1.5; } .home3 .ev { width: 100%; text-align: center; margin: 0 0 2.083vw; } .home3 .ev:last-child { margin: 0; } .home3 .ev span, .home3 .ev b { font-size: 2.917vw; font-family: "Poppins"; font-weight: bold; color: #000000; } .home3 .ev p { font-size: 0.938vw; font-weight: 400; color: #b2b2b2; } .home4 { width: 100%; height: 100%; position: relative; } .home4 .row { position: relative; z-index: 5; padding: 8vw 7.813vw 0 18.229vw; } .home4 .t1 h2 { color: #ffffff; } .home4 .ev { width: 21%; text-align: center; transition: all ease 0.5s; } .home4 .pic .hv-image-play { width: 150px; height: 150px; background-size: 100%; display: inline-block; } .home4 .intr h4 { font-size: 1.458vw; font-weight: 400; color: #ffffff; transition: all ease 0.5s; } .home4 .intr p { min-height: 3.75vw; font-size: 0.833vw; color: #bcbcbc; line-height: 1.5; margin: 0.521vw 0 1.042vw; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: all ease 0.5s; } .home4 .more1 { box-shadow: none; border: 2px solid transparent; } .home4 .more1 span { display: none; opacity: 0; } .home4 .more1 .em { background: #0bb798; } .home4 .ev:hover .more1 { box-shadow: 0px 0px 10px 1px rgb(11 183 152 / 53%); border: 2px solid #0bb798; } .home4 .ev:hover .more1 span { display: block; opacity: 1; } .home5 { width: 100%; height: 100%; position: relative; } .home5 .row { position: relative; z-index: 5; padding: 8vw 0 0 18.229vw; } .home5 .col { width: 100%; position: relative; } .home5 .swiper-slide { width: 22.917vw !important; } .home5 .ev { width: 100%; transition: all ease 0.5s; } .home5 .pic img { max-width: 100%; width: 100%; } .home5 .intr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 1.563vw; background: #f8f8f9; transition: all ease 0.5s; } .home5 .ev:hover .intr { background: transparent; } .home5 .intr .txt { width: 100%; transition: all ease 0.5s; } .home5 .txt:first-child { transform: translateY(9.375vw); } .home5 .txt:last-child { transform: translateY(-9.375vw); } .home5 .ev:hover .txt { transform: translateY(0px); } .home5 .intr h4 { min-height: 4.167vw; font-size: 1.458vw; font-weight: 600; color: #000000; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .home5 .intr em { width: 100%; height: 0.104vw; background: #0bb798; margin: 1.458vw 0; display: block; transition: all ease 0.5s; } .home5 .intr p { min-height: 2.604vw; font-size: 0.833vw; font-weight: 400; color: #666666; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .home5 .ev:hover h4 { color: #ffffff; } .home5 .ev:hover em { height: 0.052vw; background: rgba(255, 255, 255, 0.35); } .home5 .ev:hover p { color: #e9e9e9; } .home5 .swiper-button { position: absolute; left: -5.208vw; top: 50%; transform: translateY(-50%); transition: all ease 0.5s; } .home5 .swiper-btn { background: #e9e9e9; margin: 1.302vw 0; border: none; transition: all ease 0.5s; } .home5 .swiper-btn i { color: #636363; } .home5 .swiper-btn:hover { background: #0bb798; } .home5 .swiper-btn:hover i { color: #ffffff; } .home6 .row { position: relative; z-index: 5; padding: 8vw 0 5.208vw 18.229vw; } .home6 .col { width: 100%; overflow: hidden; } .home6 .ev { animation: ani-gd 100s linear infinite; } .home6 .ev:nth-child(2n) { animation: ani-gd 100s linear reverse infinite; } .home6 .group { flex-shrink: 0; padding: 0.313vw 0; } .home6 .line { width: 12.5vw; height: 5.208vw; padding: 0.521vw; margin: 0.26vw; border-radius: 20px; background: #fff; transition: all ease 0.5s; } .home6 .line:hover { /* background: #fff; */ z-index: 5; box-shadow: 0 0 25px rgb(31 34 38 / 10%), 0 5px 100px rgb(31 34 38 / 15%); } .home6 .line img { max-width: 80%; } .ab1 { width: 100%; padding: 6.25vw 16.667vw; background-image: url(../img/ab1-bj.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .ab1 .intr { width: 53.125%; } .ab1 .pic { width: 43.75%; position: relative; } .ab1 .pic img { max-width: 100%; width: 100%; } .ab1 .intr h3 { font-size: 2.083vw; font-weight: 600; color: #000000; } .ab1 .intr p { font-size: 0.833vw; color: #000000; line-height: 1.5; margin: 1.823vw 0 0; } .ab1 .intr b { color: #0bb798; } .ab1 .play { width: 2.604vw; height: 2.604vw; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; } .header .downmenu a p { display: block; position: relative; width: 100%; } .ab1 .play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.906vw; height: 3.906vw; border-radius: 50%; background: rgba(255, 255, 255, 0.25); } .ab2 { width: 100%; } .ab2 .col { width: 25%; height: 26.042vw; margin-left: 2%; position: relative; background-repeat: no-repeat; background-position: center; overflow: hidden; transition: all ease 0.5s; } .ab2 .col:first-child { margin: 0; } .ab2 .col:hover { width: 45%; } .ab2 .col .intr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; } .ab2 .intr .img { transform: translateY(3.125vw); transition: all ease 0.5s; } .ab2 .intr h4 { font-size: 1.875vw; font-weight: 600; color: #ffffff; margin: 1.042vw 0; padding-bottom: 1.042vw; position: relative; transform: translateY(3.125vw); transition: all ease 0.5s; } .ab2 .intr h4::after { content: ""; position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); width: 1.042vw; height: 0.156vw; background: #ffffff; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .ab2 .intr h5 { font-size: 1.146vw; color: #ffffff; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .ab2 .col:hover .img, .ab2 .col:hover h4 { transform: translateY(0); } .ab2 .col:hover h4::after, .ab2 .col:hover h5 { opacity: 1; visibility: visible; } .ab3 { width: 100%; padding: 6.25vw 0 0 16.667vw; background-image: url(../img/ab3-bj.jpg); background-repeat: no-repeat; background-size: cover; } .ab3 .t2 { text-align: left; position: relative; } .ab3 .swiper-button { position: absolute; right: 16.667vw; top: 50%; transform: translateY(-50%); } .ab3 .swiper-btn { margin-left: 0.781vw; } .ab3 .swiper1 { width: 100%; } .ab3 .swiper1 .swiper-slide { width: 22.917vw !important; padding: 2.344vw 0; } .ab3 .swiper2 .swiper-slide { width: 22.917vw !important; } .ab3 .ev { width: 100%; padding: 1.563vw; background: #ffffff; box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, 0.11); border-radius: 9px; transition: all ease 0.5s; } .ab3 .date { font-size: 0.938vw; font-weight: 600; color: #b2b2b2; transition: all ease 0.5s; } .ab3 .intr h4 { font-size: 1.458vw; font-weight: 400; color: #000000; margin: 0.781vw 0 0.521vw; min-height: 3.958vw; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .ab3 .intr p { font-size: 0.729vw; color: #666666; line-height: 1.5; transition: all ease 0.5s; } .ab3 .ev:hover h4 { color: #0bb798; } .ab3 .swiper2 { width: 100%; /* width: calc(100% - 16.667vw); */ overflow: hidden; position: relative; } .ab3 .swiper2::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 0.104vw; background: #eeeeee; } .ab3 .date-btn { width: 3.646vw; height: 2.344vw; background: #e9e9e9; border-radius: 23px; /* margin: 0 auto; */ } .ab3 .date-btn span { font-size: 0.938vw; font-weight: 600; color: #000000; } .ab3 .swiper-slide-active .date, .ab3 .swiper-slide-active h4 { color: #0bb798; } .ab3 .swiper-slide-active .date-btn { background: #0bb798; } .ab3 .swiper-slide-active .date-btn span { color: #ffffff; } .ab4 { width: 100%; padding: 6.25vw 0 0; } .ab4 .row { padding: 0 0 0 16.667vw; } .ab4 .swiper-slide { width: 19.01vw; padding: 1.563vw 0; } .ab4 .ev { width: 100%; padding: 2.604vw; background: #ffffff; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.15); border-radius: 11px; transition: all ease 0.5s; } .ab4 .ev:hover { background: #0bb798; } .ab4 .intr { width: 100%; text-align: center; margin: 0 0 0.781vw; } .ab4 .intr p { min-height: 2.604vw; font-size: 0.938vw; font-weight: 600; color: #000000; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .ab4 .ev:hover p { color: #ffffff; } .ab4 .pic { width: 100%; } .ab4 .pic img { max-width: 100%; width: 100%; } .ab4 .swiper-btn { margin-right: 0.781vw; } .ab5 { width: 100%; padding: 6.25vw 0 0; } .ab5 .row1 { margin: 1.302vw 0 6.771vw; padding: 0 8.333vw; background: #000000; } .ab5 .row1 .pic, .ab5 .row1 .intr { width: 50%; } .ab5 .row1 .intr { padding-left: 6.771vw; } .ab5 .pic { width: 100%; position: relative; } .ab5 .pic img { max-width: 100%; width: 100%; } .ab5 .row1 h5 { font-size: 1.458vw; font-weight: 600; color: #ffffff; } .ab5 .row1 h6 { font-size: 0.833vw; font-weight: 600; color: #ffffff; padding-left: 2.083vw; margin-bottom: 2.083vw; position: relative; } .ab5 .row1 h6::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.25vw; height: 0.052vw; background: #b2b2b2; } .ab5 .row1 p { font-size: 0.833vw; color: #ffffff; line-height: 1.5; margin: 0.781vw 0 0; } .ab5 .intr em { display: inline-block; width: 0.313vw; height: 0.313vw; background: #ffffff; border-radius: 50%; margin-right: 0.208vw; vertical-align: middle; } .ab5 .row2 { padding: 0 16.667vw; } .ab5 .row2 .col { width: 23%; border-radius: 9px; position: relative; transition: all ease 0.5s; } .ab5 .row2 .txt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.41) 0%, #000000 100%); border-radius: 9px; padding: 1.042vw; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .ab5 .col:hover .txt { opacity: 1; visibility: visible; } .ab5 .txt em { display: inline-block; width: 6px; height: 6px; background: #ffffff; border-radius: 50%; margin-right: 0.208vw; vertical-align: middle; } .ab5 .txt p { font-size: 0.729vw; font-weight: 400; color: #ffffff; line-height: 1.5; margin: 0.781vw 0 0; } .ab5 .row2 .intr { width: 100%; text-align: center; position: relative; } .ab5 .row2 h5 { font-size: 0.938vw; font-weight: 600; color: #000000; margin: 0.781vw 0 0.521vw; } .ab5 .row2 h6 { font-size: 0.833vw; color: #b2b2b2; } .ab6 { width: 100%; padding: 6.25vw 0 0; } .ab6 .row { margin: 1.563vw 0 0; } .ab6 .col { width: 49.9%; position: relative; transition: all ease 0.5s; } .ab6 .pic { width: 100%; overflow: hidden; } .ab6 .pic img { max-width: 100%; width: 100%; transition: all ease 0.5s; } .ab6 .col:hover img { transform: scale(1.1); } .ab6 .intr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } .ab6 .intr h4 { font-size: 1.875vw; font-weight: 600; color: #ffffff; margin: 0 0 1.302vw; } .ab6 .intr p { font-size: 1.25vw; font-weight: 400; color: #ffffff; } .ab7 { width: 100%; padding: 6.25vw 0; background-image: url(../img/ab7-bj.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .ab7 .row { margin: 1.823vw 0 0; padding: 0; position: relative; } .ab7 .col { overflow: visible; } .ab8 { width: 100%; padding: 6.25vw 0 0; } .ab8 .row { position: relative; margin: 2.344vw 0 0; } .ab8 .map { width: 100%; height: 30.208vw; } .ab8 .bmap { width: 100%; height: 100%; display: none; } .ab8 .bmap.on { display: block; } .ab8 .map .anchorBL { display: none !important; } .ab8 .curr { position: absolute; top: 1.302vw; right: 4.688vw; z-index: 20; border-top: 6px solid #0bb798; } .ab8 .sub { width: 7.031vw; height: 2.604vw; background: #ffffff; cursor: pointer; } .ab8 .sub span { font-size: 0.833vw; color: #000000; } .ab8 .sub.on span { color: #0bb798; } .ab8 .cont { position: absolute; left: 50%; top: 5.208vw; transform: translateX(-50%); z-index: 20; width: 14.583vw; padding: 1.302vw 1.563vw; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.25); border-radius: 13px; } .ab8 .txt { display: none; } .ab8 .txt.on { display: block; } .ab8 .txt h6 { font-size: 0.833vw; font-weight: 600; color: #0bb798; } .ab8 .txt p { font-size: 0.729vw; color: #000000; line-height: 1.5; margin: 0.781vw 0 0; } .ne1 { width: 100%; padding: 6.25vw 16.667vw; position: relative; background-image: url(../img/ne1-bj.jpg); background-repeat: no-repeat; background-size: cover; } .bj { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; } .bj img { max-width: 100%; width: 100%; } .ne1 .col-l { width: 68.75%; } .ne1 .col-r { width: 23.5%; position: sticky; position: -webkit-sticky; top: 7.813vw; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1); padding: 1.302vw; } .ne1 .col-l .ev { width: 100%; padding-bottom: 1.563vw; margin-bottom: 1.563vw; border-bottom: 1px solid #e1e1e1; transition: all ease 0.5s; } .ne1 .pic { width: 36%; } .ne1 .pic img { max-width: 100%; width: 100%; } .ne1 .intr { width: 61%; } .ne1 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #000000; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: all ease 0.5s; } .ne1 .ev:hover h6 { color: #0bb798; } .ne1 .intr p { min-height: 2.5vw; font-size: 0.833vw; color: #666666; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0.521vw 0 1.563vw; transition: all ease 0.5s; } .ne1 .intr .date { font-size: 0.729vw; color: #666666; transition: all ease 0.5s; } .ne1 .txt { width: 100%; padding: 0 0 1.042vw; text-align: center; border-bottom: 1px solid #e6e8eb; } .ne1 .txt h6 { font-size: 0.729vw; font-weight: 400; color: #000000; } .ne1 .col { width: 100%; margin: 1.042vw 0 0; } .ne1 .tag { width: 0.833vw; height: 0.833vw; background: #0bb798; border-radius: 1px; } .ne1 .tag span { font-size: 0.729vw; font-weight: 400; color: #ffffff; } .ne1 .plan { width: calc(100% - 1.302vw); } .ne1 .plan p { min-height: 2.344vw; font-size: 0.729vw; font-weight: 400; color: #666666; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .ne1 .plan span { font-size: 0.729vw; font-weight: 400; color: #b2b2b2; } .ne1 .pagelist { margin: 1.563vw 0 0; } .ne2 { width: 100%; padding: 6.25vw 16.667vw; } .navnewigate { width: 100%; } .navnewigate a, .navnewigate span { font-size: 0.833vw; color: #b2b2b2; } .navnewigate a:last-child { color: #0bb798; } .ne2 .title { width: 100%; padding: 1.823vw 0; text-align: center; } .ne2 .title h5 { font-size: 1.25vw; font-weight: 400; color: #000000; } .ne2 .title p { font-size: 0.833vw; color: #b2b2b2; margin: 0.625vw 0 0; } .ne2 .word { width: 100%; padding: 1.563vw 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .ne2 .word p { font-size: 0.729vw; color: #b2b2b2; line-height: 1.5; margin: 0 0 0.781vw; } .ne2 .turnpage { width: 100%; margin: 1.563vw 0 0; } .ne2 .turnpage .turn { width: 30%; font-size: 0.729vw; color: #b2b2b2; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: all ease 0.5s; } .ne2 .turnpage .turn:last-child { text-align: right; } .t3 { width: 100%; text-align: center; } .t3 h4 { font-size: 1.875vw; font-weight: 600; color: #000000; } .ne3 { width: 100%; padding: 0 16.667vw 6.25vw; } .ne3 .row { margin: 1.563vw 0 0; } .ne3 .ev { width: 100%; } .ne3 .pic { width: 100%; } .ne3 .pic img { max-width: 100%; width: 100%; transition: all ease 0.5s; } .ne3 .intr { width: 100%; margin: 0.625vw 0 0; text-align: center; } .ne3 .intr p { min-height: 2.865vw; font-size: 0.938vw; font-weight: 600; color: #000000; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .re1 { width: 100%; padding: 6.25vw 12.5vw; position: relative; background-image: url(../img/re1-bj.jpg); background-repeat: no-repeat; background-size: cover; } .re1 .col-l { position: sticky; position: -webkit-sticky; top: 7.813vw; } .re1 .col-r { width: 89%; } .re1 .sub { width: 100%; margin: 0 0 1.302vw; display: block; transition: all ease 0.5s; } .re1 .sub em { display: inline-block; width: 0.417vw; height: 0.417vw; border-radius: 50%; background: #0bb798; margin-right: 0.521vw; vertical-align: middle; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .re1 .sub p { font-size: 0.729vw; font-weight: 400; color: #b2b2b2; transition: all ease 0.5s; } .re1 .sub.on em { opacity: 1; visibility: visible; } .re1 .sub.on p { color: #0bb798; } .re1 .col { width: 100%; margin: 0 0 2.604vw; } .re1 .col .pic { width: 30%; } .re1 .col .intr { width: 68%; } .re1 .img>div { margin-right: 1.563vw; } .re1 .txt h4 { min-height: 2.604vw; font-size: 1.875vw; font-weight: 600; color: #000000; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: all ease 0.5s; } .re1 .txt h6 { /* min-height: 2.344vw; */ font-size: 0.833vw; color: #000000; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 1.042vw 0 2.083vw; transition: all ease 0.5s; } .re1 .txt p { font-size: 0.833vw; color: #b2b2b2; line-height: 1.5; margin: 0.521vw 0 0; transition: all ease 0.5s; } .re1 .txt em { display: inline-block; width: 0.417vw; height: 0.417vw; border-radius: 50%; background: #0bb798; margin-right: 0.521vw; vertical-align: middle; } .re1 .more2 { margin: 2.083vw 0 0; } .so1 { width: 100%; padding: 6.25vw 16.667vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so1 .row { margin: 1.823vw 0 0; } .so1 .row .pic img { max-height: 450px; } .so1 .pic { width: 65%; background: #ffffff; display: flex; align-items: center; justify-content: center; } .so1 .intr { width: 34%; padding: 0 1.563vw; background: #ffffff; box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.07); } .so1 .intr .ev { width: 100%; padding: 1.042vw 0; } .so1 .intr .ev:nth-child(2) { border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; } .so1 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #000000; margin: 0 0 0.521vw; } .so1 .intr p { font-size: 0.729vw; color: #b2b2b2; line-height: 1.5; margin: 0 0 0.208vw; } .so1 .pic.bg { box-shadow: 0px 3px 20px 1px rgb(0 0 0 / 7%); } .so1 .icon { width: 32%; padding: 0.781vw 0; background: #fff; text-align: center; border: 1px solid #ededed; transition: all ease 0.5s; } .so1 .icon img { width: 1.042vw; height: 1.042vw; } .so1 .icon p { font-size: 0.625vw; font-size: #666666; margin: 0.26vw 0 0; transition: all ease 0.5s; } .so1 .icon:hover p { color: #0bb798; } .so2 { width: 100%; padding: 6.25vw 0 0; } .so2 .row { margin: 1.823vw 0 0; } .so2 .col { width: 25%; padding: 6.771vw 0; border: 1px solid #dee1e7; transition: all ease 0.5s; } .so2 .col:hover { background: #0bb798; } .so2 .pic img { width: 3.906vw; height: 3.906vw; } .so2 .intr { width: 100%; text-align: center; margin: 0.781vw 0 0; } .so2 .intr p { font-size: 0.938vw; /* font-weight: 600; */ color: #000000; transition: all ease 0.5s; } .so2 .col:hover p { color: #ffffff; } .so3 { width: 100%; padding: 6.25vw 16.667vw 4.167vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so3 .t2 h2, .so6 .t2 h2 { color: #ffffff; } .so3 .row { margin: 1.823vw 0 0; } .so3 .col { width: 32%; margin: 0 0 2.083vw; justify-content: flex-start; } .so3 .pic { width: 1.563vw; } .so3 .intr { margin-left: 1.302vw; /* width: calc(100% - 16.604vw); */ /* text-align: center; */ } .so3 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #ffffff; } .so3 .intr p { font-size: 0.833vw; color: #ffffff; line-height: 1.5; margin: 0.521vw 0 0; } .so4 { width: 100%; padding: 6.25vw 16.667vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so4 .row { margin: 1.823vw 0 0; } /* .pr6 .row .pic{ position: relative; top: 30%; transform: translateY(-50%); transition: translatey 0.5s; } .pr6 .intr p{ transform: translatey(100%); transition: translatey 0.5s; } */ /* .pr6 .col:hover .pic{ top: auto; } */ .so4 .col { width: 23%; background: #ffffff; box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.06); border-radius: 4px; padding: 3.646vw 1.823vw; transition: all ease 0.5s; } .so4 .col:hover { background: #0bb798; } .so4 .intr { width: 100%; margin: 1.042vw 0 0; text-align: center; } .so4 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #000000; margin: 0 0 0.521vw; transition: all ease 0.5s; } .so4 .intr p { font-size: 0.833vw; color: #000000; transition: all ease 0.5s; } .so4 .col:hover h6, .so4 .col:hover p { color: #ffffff; } .so12 .col, .so12 .col:hover { background: transparent; } .so12 .col { box-shadow: none; border-radius: 0; padding: 0; } .so12 .intr h6, .so12 .col:hover h6 { color: #000000; } .so12 .intr p, .so12 .col:hover p { color: #b2b2b2; } .so5 { width: 100%; padding: 6.25vw 0 0; } .so5 .row { margin: 1.823vw 0 0; } .so5 .col { width: 25%; padding: 5.729vw 0; background: #ffffff; border: 1px solid #dee1e7; transition: all ease 0.5s; } .so5 .col:hover { background: #0bb798; } .so5 .intr { width: 100%; text-align: center; } .so5 .intr .txt span, .so5 .intr .txt b { font-size: 2.969vw; font-weight: bold; font-family: "GILLSAN"; color: #0bb798; } .so5 .intr p { min-height: 3.125vw; font-size: 0.938vw; font-weight: 600; color: #000000; max-width: 15.625vw; width: 90%; margin: 1.042vw auto 0; } .so5 .col:hover span, .so5 .col:hover b, .so5 .col:hover p { color: #ffffff; } .so6 { width: 100%; padding: 6.25vw 16.667vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so6 .row { margin: 1.823vw 0 0; } .so6 .col { width: 100%; background: #ffffff; border-radius: 10px; } .so6 .pic, .so6 .intr { width: 50%; } .so6 .intr { padding: 0 2.083vw; } .so6 .pic img { max-width: 100%; width: 100%; border-radius: 10px 0px 0px 10px; } .so6 .img>div { margin-right: 1.563vw; } .so6 .intr h4 { font-size: 1.458vw; font-weight: 600; color: #000000; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin: 0.521vw 0; transition: all ease 0.5s; } .so6 .intr p { min-height: 2.344vw; font-size: 0.833vw; font-weight: 400; color: #b2b2b2; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .so6 .intr .more3 { margin: 1.302vw 0 0; } .so6 .swiper2 { width: 100%; margin-bottom: 1.302vw; border-bottom: 1px solid #e7e9ed; } .so6 .swiper2 .ev { font-size: 0.729vw; font-weight: 400; color: #ffffff; display: inline-block; padding-bottom: 1.042vw; position: relative; } .so6 .swiper2 .swiper-slide-active .ev { color: #0bb798; } .so6 .swiper2 .ev::after { content: ""; position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); width: 100%; height: 0.156vw; background: #0bb798; opacity: 0; visibility: hidden; } .so6 .swiper2 .swiper-slide-active .ev::after { opacity: 1; visibility: visible; } .so7 { width: 100%; padding: 6.25vw 16.667vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so7 .row { margin: 1.823vw 0 0; } .so7 .col { width: 100%; background: #323338; } .so7 .pic { width: 58.5%; } .so7 .pic img { max-width: 100%; width: 100%; } .so7 .intr { width: 41.5%; padding: 0 4.167vw; } .so7 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #ffffff; margin: 0 0 1.042vw; } .so7 .intr p { font-size: 0.833vw; color: #ffffff; line-height: 1.5; } .so7 .swiper2 { width: 100%; margin-bottom: 1.302vw; border-bottom: 1px solid #e4e4e5; } .so6 .swiper2 .swiper-slide, .so7 .swiper2 .swiper-slide { text-align: center; } .so7 .swiper2 .ev { font-size: 0.729vw; font-weight: 400; color: #000000; display: inline-block; padding-bottom: 1.042vw; position: relative; } .so7 .swiper2 .swiper-slide-active .ev { color: #0bb798; } .so7 .swiper2 .ev::after { content: ""; position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); width: 100%; height: 0.156vw; background: #0bb798; opacity: 0; visibility: hidden; } .so7 .swiper2 .swiper-slide-active .ev::after { opacity: 1; visibility: visible; } .so8 { width: 100%; padding: 6.25vw 24.74vw 5.208vw; display: none; } .so8 .row { margin: 1.823vw 0 0; } .so8 .col { width: 100%; margin: 0 0 1.042vw; background: #f5f6f7; box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.1); border-radius: 2px; } .so8 .name { width: 100%; padding: 1.302vw 2.083vw; } .so8 .name p, .so8 .name i { font-size: 1.042vw; font-weight: 400; color: #000000; transition: all ease 0.5s; } .so8 .col.on .name i { color: #0bb798; transform: rotate(-90deg); } .so8 .name p { width: 90%; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .so8 .work { width: 100%; padding: 0.781vw 2.083vw 1.302vw; display: none; } .so8 .work p { font-size: 0.833vw; color: #000000; line-height: 1.5; } .so9 { width: 100%; padding: 6.25vw 16.667vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so9 .row { margin: 2.865vw 0 0; } .so9 .col { /* width: 18%; */ transition: all ease 0.5s; } .so9-1 .col { width: 26%; } .so9 .pic img { width: 3.906vw; height: 3.906vw; } .so9 .intr { width: 100%; text-align: center; margin: 0.781vw 0 0; } .so9 .intr p { font-size: 0.938vw; /* font-weight: 600; */ color: #000000; transition: all ease 0.5s; } .so10 { width: 100%; padding: 6.25vw 16.667vw 4.167vw; } .so10 .row { margin: 1.823vw 0 0; } .so10 .col { width: 30%; margin: 0 0 2.083vw; justify-content: center; } .so10 .pic { width: 1.563vw; } .so10 .intr { width: calc(100% - 8.604vw); text-align: center; } .so10 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #000000; } .so10 .intr p { font-size: 0.833vw; color: #b2b2b2; line-height: 1.5; margin: 0.521vw 0 0; } .so11 { width: 100%; padding: 6.25vw 16.667vw 0; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so11 .t2 { width: 50%; text-align: left; } .so11 .row { width: 50%; } .so11 .col { width: 48%; background: #ffffff; border-radius: 10px; padding: 3.646vw 1.042vw; margin: 0 0 1.042vw; } /* .so11 .col:nth-child(2n) { margin: 1.042vw 0 0; } */ .so11 .pic .img { width: 1.563vw; } .so11 .pic h6 { width: calc(100% - 2.604vw); font-size: 0.938vw; font-weight: 600; color: #000000; } .so11 .intr p { font-size: 0.833vw; color: #b2b2b2; line-height: 1.5; margin: 0.521vw 0 0; } .so13 .t2 h2, .so15 .t2 h2 { color: #ffffff; } .so13 .swiper2 .ev, .so15 .swiper2 .ev { color: #ffffff; } .so13 .col, .so15 .col { background: #ffffff; } .so13 .intr { width: 41.5%; padding: 0 2.865vw; } .so13 .pic { width: 58.5%; } .so13 .intr h6, .so13 .intr p, .so15 .intr h6, .so15 .intr p { color: #000000; } .so14 { width: 100%; padding: 6.25vw 16.667vw; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .so14 .row { margin: 1.823vw 0 0; position: relative; } .so14 .ev { width: 100%; } .so14 .pic { width: 100%; } /* .so14 .pic img { max-width: 80%; width: 80%; } */ .so14 .cont { width: 8.073vw; height: 2.604vw; border: 1px solid #0bb798; margin-left: 0.26vw; transition: all ease 0.5s; } .so14 .cont2:hover { background: #0bb798; color: #fff; } .so14 .intr { width: 100%; margin: 1.042vw 19.5%; } .so14 .intr h6 { font-size: 1.146vw; font-weight: 400; color: #0bb798; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: all ease 0.5s; } .so14 .intr p { font-size: 0.833vw; color: #000000; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0.521vw 0; transition: all ease 0.5s; } .so14 .swiper-btn { display: none; } .so14 .swiper-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } .so14 .prev { left: -5.208vw; } .so14 .next { right: -5.208vw; } .co1 { width: 100%; padding: 7.813vw 29.948vw 6.25vw; } .co1 .row { margin: 1.823vw 0 0; } .co1 .form { width: 100%; background: #ffffff; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.12); padding: 2.604vw; } .co1 .form .label { width: 100%; margin: 0 0 1.042vw; } .co1 .form .label:nth-child(1), .co1 .form .label:nth-child(2) { width: 48%; } .co1 .input { width: 100%; background: #ffffff; border-radius: 10px; border: 1px solid #d9dbde; } .co1 input { height: 2.604vw; padding: 0 1.042vw; } .co1 textarea { height: 15.104vw; padding: 1.042vw; } .co1 span { font-size: 0.729vw; font-weight: 400; color: #727a86; display: block; margin: 0 0 0.26vw; } .co1 i { position: absolute; top: 50%; right: 1.042vw; transform: translateY(-50%); z-index: 4; font-size: 0.833vw; color: #0bb798; pointer-events: none; } .co1 .curr { width: 100%; position: relative; } .co1 .input-sub { position: absolute; top: 100%; left: -1000vw; z-index: 5; width: 100%; border-radius: 10px; border: 1px solid #d9dbde; background: #dedede; height: 18.229vw; overflow: auto; opacity: 0; transition: opacity ease 0.3s; } .co1 .input-sub li { background: #ffffff; padding: 0.521vw 1.042vw; font-size: 0.833vw; color: #8b8b8b; cursor: pointer; transition: all ease 0.5s; } .co1 .input-sub li:hover { background: #ebe9e7; } .co1 .input:focus+.input-sub { opacity: 1; left: 0; } .btn { width: 5.208vw; height: 2.604vw; background: #0bb798; border-radius: 8px; margin: 0.781vw 0 0; cursor: pointer; transition: all ease 0.5s; } .btn span { font-size: 0.729vw; font-weight: 600; color: #ffffff; transition: all ease 0.5s; } .contact { width: 100%; padding: 4.427vw 16.667vw; background-image: url(../img/con-bj.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .contact .intr h4 { font-size: 1.458vw; font-weight: 600; color: #ffffff; } .contact .cont { width: 8.073vw; height: 2.604vw; border: 1px solid #0bb798; margin-left: 0.26vw; transition: all ease 0.5s; } .contact .cont1 { background: #0bb798; } .contact .cont1:hover { background: transparent; } .contact .cont2:hover { background: #ffffff; border: 1px solid #ffffff; } .contact .cont2 { background: transparent; } .contact .cont span { font-size: 0.833vw; font-weight: 400; transition: all ease 0.5s; } .contact .cont1 span { color: #ffffff; } .contact .cont2 span { color: #0bb798; } .contact .cont2:hover span { color: #000000; } .contact .cont img { width: 1.042vw; margin-right: 0.156vw; } .contact2 { background-image: url(../img/con2-bj.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .contact2 .intr { width: 100%; text-align: center; margin: 0 0 1.563vw; } .contact2 .pic { width: 100%; } .pr1 { width: 100%; padding: 6.25vw 16.667vw; background: #f4f7fb; } .pr1 .row { margin: 1.823vw 0 0; } .pr1 .pic { width: 100%; } .pr1 .pic img { max-width: 100%; width: 100%; } .pr2 { width: 100%; padding: 6.25vw 16.667vw; background-image: url(../img/pr2-bj.jpg); background-repeat: no-repeat; background-size: cover; } .pr2 .row { margin: 2.604vw 0 0; } .pr2 .col-l { width: 18%; background: rgba(11, 183, 152, 0.04); padding: 1.302vw 0; } .pr2 .sub { width: 100%; position: relative; padding: 0 0.677vw; margin: 0 0 1.302vw; transition: all ease 0.5s; } .pr2 .sub:last-child { margin: 0; } .pr2 .sub::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.104vw; height: 100%; background: #0bb798; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .pr2 .sub.on::after { opacity: 1; visibility: visible; } .pr2 .sub span { font-size: 0.833vw; font-weight: 100; color: #000000; transition: all ease 0.5s; } .pr2 .sub.on span { color: #0bb798; } .pr2 .col-r { width: 78%; } .pr2 .col { width: 100%; margin: 0 0 1.042vw; padding: 1.042vw 1.042vw 0; background: transparent; transition: all ease 0.5s; } .pr2 .col.on { background: rgba(11, 183, 152, 0.04); } .pr2 .col h5 { width: 100%; font-size: 1.25vw; font-weight: bold; color: #000000; margin: 0 0 0.781vw; transition: all ease 0.5s; } .pr2 .col.on h5 { color: #0bb798; } .pr2 .ev { width: 32%; margin: 0 0 1.042vw; padding: 1.302vw 1.563vw; background: #ffffff; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.09); transition: all ease 0.5s; } .pr2 .ev:hover { background: #0bb798; } .pr2 .ev h6 { font-size: 0.938vw; font-weight: 600; color: #252b3a; line-height: 1.5; margin: 0 0 0.26vw; transition: all ease 0.5s; } .pr2 .ev p { font-size: 0.729vw; font-weight: 400; color: #6c7179; line-height: 1.5; transition: all ease 0.5s; } .pr2 .ev:hover h6, .pr2 .ev:hover p { color: #ffffff; } .pr3 { width: 100%; position: relative; } .pr3 .t2 { position: absolute; top: 6.25vw; z-index: 5; } .pr3 .t2 h2, .pr5 .t2 h2 { color: #ffffff; } .pr3 .col { width: 100%; position: relative; } .pr3 .pic { width: 100%; position: relative; } .pr3 .pic::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.24); pointer-events: none; } .pr3 .pic img{ max-width: 100%; width: 100%; transition: all ease .5s; } .pr3 .intr { position: absolute; left: 16.667vw; bottom: 0; width: 25vw; padding: 0 2.042vw; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(0.469vw); backdrop-filter: blur(0.469vw); } .pr3 .intr h4 { font-size: 1.458vw; font-weight: 600; color: #ffffff; margin: 0 0 1.042vw; } .pr3 .intr h5 { font-size: 0.938vw; font-weight: 600; color: #ffffff; margin: 0 0 0.26vw; } .pr3 .intr h6 { font-size: 0.833vw; color: #ffffff; font-weight: 600; line-height: 1.5; } .pr3 .intr p { font-size: 0.833vw; color: #ffffff; line-height: 1.5; } .pr3 .intr em { display: inline-block; width: 0.521vw; height: 0.104vw; background: #ffffff; margin-right: 0.26vw; vertical-align: middle; } .pr3 .intr .txt:first-child { /* margin: 0 0 1.823vw; */ margin: 1.823vw 0; } .pr3 .swiper-btn2 { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } .pr3 .prev { left: 3.125vw; } .pr3 .next { right: 3.125vw; } .pr4 { width: 100%; padding: 6.25vw 16.667vw 4.688vw; } .pr4 .row { margin: 1.823vw 0 0; } .pr4 .col { width: 25%; padding-left: 2%; padding-right: 2%; margin: 0 0 1.823vw; } /* .pr4 .col:nth-child(1), .pr4 .col:nth-child(5) { padding-left: 0; padding-right: 4%; } .pr4 .col:nth-child(4), .pr4 .col:nth-child(7) { padding-left: 4%; padding-right: 0; } */ .pr4 .pic { width: 3.125vw; height: 3.125vw; background: #ffffff; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.11); border-radius: 5px; margin: 0 auto; } .pr4 .intr { width: 100%; text-align: center; margin: 1.042vw 0 0; } .pr4 .intr p { font-size: 0.833vw; font-weight: 400; color: #000000; line-height: 1.5; } .pr5 .intr b { color: #0bb798; } .pr6 { width: 100%; padding: 6.25vw 16.667vw; } .pr6 .row { margin: 1.823vw 0 0; } .pr6.ac5 .row { justify-content: space-evenly; } .pr6 .row .col.fore-up { width: 23%; } .pr6 .col { position: relative; width: 31%; background: linear-gradient(140deg, #f3f5f8 0%, #fefefe 100%); box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, 0.07); border-radius: 2px; padding: 1.823vw 3.646vw; transition: all ease 0.5s; } .pr6 .col .pic { display: flex; flex-direction: column; position: relative; top: 50%; transform: translateY(-50%); transition: all 0.5s; } .pr6 .col .pic p { font-size: 0.99vw; font-weight: 400; color: #000000; /* transform: translateY(1.302vw); */ transition: all ease 0.5s; padding-top: 10px; } .pr6 .col:hover { background: #0bb798; } .pr6 .col:hover .pic { top: 0%; transform: translateY(0); } .pr6 .intr { width: 100%; text-align: center; margin: 0.781vw 0 0; } .pr6 .intr p { font-size: 0.99vw; font-weight: 400; color: #000000; /* transform: translateY(1.302vw); */ transition: all ease 0.5s; } .pr6 .col:hover p { transform: translateY(0); color: #ffffff; } .pr6 .intr span { font-size: 0.833vw; font-weight: 400; color: rgba(255, 255, 255, 0.8); display: block; margin: 0.521vw 0 0; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .pr6 .col:hover span { opacity: 1; visibility: visible; } .pr7 { width: 100%; padding: 6.25vw 19.271vw 3.646vw; background-image: url(../img/pr7-bj.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .pr7 .row { margin: 1.823vw 0 0; } .pr7 .col { width: 100%; position: relative; } .pr7 .pic { width: 66%; } .pr7 .pic img { max-width: 100%; width: 100%; } .pr7 .intr { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26.042vw; padding: 2.865vw 1.302vw; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.05); } .pr7 .intr h4 { font-size: 1.458vw; font-weight: 600; color: #000000; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin: 0.521vw 0; transition: all ease 0.5s; } .pr7 .intr p { min-height: 2.344vw; font-size: 0.833vw; font-weight: 400; color: #b2b2b2; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .pr7 .intr .more3 { margin: 1.302vw 0 0; } .pr7-2 .col { width: 100%; padding: 1.823vw 0.052vw; background: transparent; box-shadow: none; border: 1px solid #ededed; } .pr7-2 .swiper-slide-active .col { box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.09); z-index: 5; } .pr8 { width: 100%; padding: 6.25vw 0; } .pr9 { width: 100%; padding: 6.25vw 16.667vw; } .pr9 .row { margin: 1.823vw 0 0; } .pr9 .col { width: 23%; } .pr9 .name { width: 100%; height: 3.125vw; background: #0bb798; } .pr9 .name span { font-size: 0.938vw; font-weight: 600; color: #ffffff; } .pr9 .intr { width: 100%; padding: 1.823vw; border: 1px solid #ededed; } .pr9 .intr p { font-size: 0.833vw; color: #b2b2b2; line-height: 1.5; position: relative; padding-left: 0.938vw; } .pr9 .intr p::before { content: ""; position: absolute; left: 0; top: 0.521vw; display: inline-block; width: 0.26vw; height: 0.26vw; border-radius: 50%; background: #0bb798; } .pr10 .t2 h2, .pr10 .swiper2 .ev { color: #ffffff; } .pr10 .col { background: transparent; } .pr10 .intr { width: 26%; padding: 0; } .pr10 .pic { width: 70%; } .pr11 { width: 100%; padding: 6.25vw 16.667vw; background-image: url(../img/pr11-bj.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .pr11 .t2 h2 { color: #ffffff; } .pr11 .row { margin: 1.823vw 0 0; position: relative; } .pr11 .col { width: 100%; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.13); border-radius: 9px; } .pr11 .pic { width: 100%; } .pr11 .pic img { max-width: 100%; width: 100%; } .pr11 .intr { width: 100%; padding: 0.781vw 0; text-align: center; } .pr11 .intr p { font-size: 0.885vw; font-weight: 600; color: #000000; } .pr11 .swiper-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } .pr11 .prev { left: -4.167vw; } .pr11 .next { right: -4.167vw; } .pr12 { width: 100%; padding: 6.25vw 0 0; overflow: hidden; } .pr12 .row { margin: 1.823vw 0 0; position: relative; } .pr12 .pic { width: 100%; } .pr12 .pic img { max-width: 100%; width: 100%; } .pr12 .intr { position: absolute; left: 28.646vw; top: 50%; transform: translateY(-50%); z-index: 6; width: 100%; } .pr12 .swiper-slide { width: 26.563vw !important; padding: 2.083vw 1.563vw; background: #ffffff; } .pr12 .img { width: 4.167vw; } .pr12 .txt { width: calc(100% - 4.948vw); } .pr12 .txt h4 { font-size: 1.458vw; font-weight: 600; color: #000000; margin: 0 0 0.521vw; } .pr12 .txt p { min-height: 3.906vw; font-size: 0.833vw; font-weight: 400; color: #b2b2b2; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .pr12 .swiper-button { margin: 1.563vw 0 0 16.146vw; } .pr12 .swiper-btn { margin-right: 1.563vw; } .pr13 { width: 100%; padding: 6.25vw 16.667vw; background-image: url(../img/pr13-bj.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .pr13 .row { margin: 1.823vw 0 0; } .pr13 .col { width: 26%; } .pr13 .intr { width: 100%; text-align: center; margin: 0.521vw 0 0; } .pr13 .intr h6 { font-size: 0.938vw; font-weight: 600; color: #000000; margin: 0 0 0.417vw; } .pr13 .intr p { font-size: 0.833vw; color: #b2b2b2; line-height: 1.5; } .pr14 { width: 100%; padding: 6.25vw 16.667vw; } .pr14 .row { margin: 1.823vw 0 0; } .pr14 .col { width: 100%; position: relative; } .pr14 .intr { width: 36%; position: absolute; left: 0; right: auto; top: 50%; transform: translateY(-50%); margin: 0 6.5%; } .pr14 .col:nth-child(2n) .intr { left: auto; right: 0; } .pr14 .pic { width: 50%; } .pr14 .pic img { max-width: 100%; width: 100%; } .pr14 .intr h4 { font-size: 1.25vw; font-weight: 600; color: #000000; margin: 0 0 0.625vw; } .pr14 .intr p { font-size: 0.833vw; color: #b2b2b2; line-height: 1.5; } .pr15 { background-image: url(../img/pr15-bj.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .pr15 .t2 h2, .pr15 .intr p { color: #ffffff; } .pr15 .col { background: transparent; } .pr16 { width: 100%; padding: 6.25vw 16.667vw; background: #f3f3f3; } .pr16 .row { margin: 1.823vw 0 0; background: #ffffff; padding: 5.208vw 3.646vw; } .pr16 .swiper2 { width: 100%; margin-bottom: 1.302vw; border-bottom: 1px solid #e4e4e5; } .pr16 .swiper2 .swiper-slide { text-align: center; } .pr16 .swiper2 .ev { font-size: 0.729vw; font-weight: 400; color: #000000; display: inline-block; padding-bottom: 1.042vw; position: relative; } .pr16 .swiper2 .swiper-slide-active .ev { color: #0bb798; } .pr16 .swiper2 .ev::after { content: ""; position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); width: 100%; height: 0.156vw; background: #0bb798; opacity: 0; visibility: hidden; } .pr16 .swiper2 .swiper-slide-active .ev::after { opacity: 1; visibility: visible; } .pr16 .col { position: relative; width: 100%; } .pr16 .pic { width: 100%; } .pr16 .pic img { max-width: 100%; width: 100%; } .pr16 .intr { position: absolute; top: 0; left: 0; width: 41.5%; height: 100%; padding: 1.563vw; background: rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(0.469vw); backdrop-filter: blur(0.469vw); } .pr16 .intr h4 { font-size: 1.458vw; font-weight: 600; color: #ffffff; margin: 0 0 1.042vw; } .pr16 .intr h5 { font-size: 0.938vw; font-weight: 600; color: #ffffff; margin: 0 0 0.26vw; } .pr16 .intr h6 { font-size: 0.833vw; color: #ffffff; font-weight: 600; line-height: 1.5; } .pr16 .intr p { font-size: 0.833vw; color: #ffffff; line-height: 1.5; } .pr16 .intr em { display: inline-block; width: 0.521vw; height: 0.104vw; background: #ffffff; margin-right: 0.26vw; vertical-align: middle; } .pr16 .intr .txt:first-child { margin: 0 0 1.823vw; } .pr17 { width: 100%; padding: 6.25vw 16.667vw; background-image: url(../img/pr17-bj.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; } .pr17 .t2 h2 { color: #ffffff; } .pr17 .row { margin: 1.823vw 0 0; position: relative; } .pr17 .col { width: 100%; background: #ffffff; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.05); } .pr17 .pic { width: 61%; } .pr17 .pic img { max-width: 100%; width: 100%; } .pr17 .intr { width: 39%; padding: 0 1.563vw; } .pr17 .img>div { margin-right: 1.563vw; } .pr17 .intr h4 { font-size: 1.458vw; font-weight: 600; color: #000000; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin: 0.521vw 0; transition: all ease 0.5s; } .pr17 .intr p { min-height: 2.344vw; font-size: 0.833vw; font-weight: 400; color: #b2b2b2; line-height: 1.5; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all ease 0.5s; } .pr17 .intr .more3 { margin: 1.302vw 0 0; } .pr17 .swiper-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } .pr17 .prev { left: -4.167vw; } .pr17 .next { right: -4.167vw; } .fixed-video { position: fixed; left: 0; top: 0; opacity: 0; visibility: hidden; z-index: 500; width: 100%; height: 100%; transform: scale(0); transition: all ease 0.5s; } .fixed-video.open { opacity: 1; visibility: visible; transform: scale(1); transition: all ease 0.5s; } .fixed-video .video-wrap { width: 60vw; max-height: 90vw; position: relative; } .fixed-video .close { width: 2.083vw; height: 2.083vw; background: #ffffff; box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); border-radius: 50%; position: absolute; top: -0.3125vw; right: -0.3125vw; z-index: 1; cursor: pointer; transition: all ease 0.5s; display: flex; align-items: center; justify-content: center; } .fixed-video .close i { font-size: 0.938vw; } .fixed-video .close span{ width: 60%; height: 1px; position: absolute; left: 50%; top: 50%; background: gray; } .fixed-video .close span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); } .fixed-video .close span:nth-child(2){ transform: translate(-50%,-50%) rotate(-45deg); } .fixed-video .video-wrap video { max-width: 100%; width: 100%; max-height: 100%; } .animate .delay1 { transition-delay: 0.1s; } .animate .delay2 { transition-delay: 0.2s; } .animate .delay3 { transition-delay: 0.3s; } .animate .delay4 { transition-delay: 0.4s; } .animate .delay5 { transition-delay: 0.5s; } .animate .delay6 { transition-delay: 0.6s; } .animate .delay7 { transition-delay: 0.7s; } .animate .delay8 { transition-delay: 0.8s; } .animate .delay9 { transition-delay: 0.9s; } .animate .delay10 { transition-delay: 1s; } .fade-in { opacity: 0; filter: alpha(opacity=0); transition: opacity 1s; } .fade-in-up { opacity: 0; filter: alpha(opacity=0); transform: translateY(30px); transition: transform 0.5s, opacity 0.5s; } .fade-in-down { opacity: 0; filter: alpha(opacity=0); transform: translateY(-30px); transition: transform 1s, opacity 1s; } .fade-in-right { opacity: 0; filter: alpha(opacity=0); transform: translateX(30px); transition: transform 1s, opacity 1s; } .fade-in-left { opacity: 0; filter: alpha(opacity=0); transform: translateX(-30px); transition: transform 1s, opacity 1s; } .animate .fade-in { opacity: 1; filter: alpha(opacity=1); } .animate .fade-in-up { opacity: 1; filter: alpha(opacity=1); transform: translateY(0); } .animate .fade-in-down { opacity: 1; filter: alpha(opacity=1); transform: translateY(0); } .animate .fade-in-left { opacity: 1; filter: alpha(opacity=1); transform: translateX(0); } .animate .fade-in-right { opacity: 1; filter: alpha(opacity=1); transform: translateX(0); } /* .scroll { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); cursor: pointer; z-index: 56; display: flex; flex-direction: column; align-items: center; } .scroll p { opacity: 0.57; font-size: 14px; line-height: 2; font-weight: 200; color: #ffffff; } .scroll.on p { color: #0bb798; } .scroll .mouse { width: 28px; height: 42px; border: 1px solid #dfdfdf; border-radius: 15px; position: relative; } .scroll.on .mouse { border: 1px solid #0bb798; } .scroll .mouse::before { content: ""; display: block; width: 2px; height: 13px; background: #ffffff; border-radius: 1px; position: absolute; left: 50%; top: 15%; transform: translate(-50%, 0); } .scroll.on .mouse::before { background: #0bb798; } .scroll .line { width: 1px; height: 45px; background: rgba(255, 255, 255, 0.33); position: relative; overflow: hidden; } .scroll.on .line { background: rgba(0, 0, 0, 0.33); } .scroll .line::before { content: ""; display: block; width: 1px; height: 12px; background: #ffffff; position: absolute; left: 0; top: 0; animation: mouse 1.2s ease alternate infinite; } .scroll.on .line::before { background: #0bb798; } @keyframes mouse { from { transform: translateY(0); } to { transform: translateY(300%); } } .scroll .down { width: 13px; height: 16px; animation: scrollAni 2s infinite; -webkit-animation: scrollAni 2s infinite; display: none; position: relative; } */ /* .scroll .down::after{ content: ""; position:absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .1; animation: scrollAni 2s infinite; -webkit-animation: scrollAni 2s infinite; } */ @keyframes scrollAni { 0% { opacity: 0; /* height: 0; */ } 100% { opacity: 1; /* height: 100%; */ } } @-webkit-keyframes scrollAni { 0% { opacity: 0; /* height: 0; */ } 100% { opacity: 1; /* height: 100%; */ } } .sidebar { position: fixed; bottom: -50vh; right: 2.083vw; z-index: 80; width: 4.167vw; /* padding: 0.781vw 0; */ background: #ffffff; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16); border-radius: 1px; transition: all ease 0.5s; } .sidebar.show { bottom: 25%; } .sidebar .share { width: 100%; position: relative; } .share .ewm { position: absolute; left: -7.292vw; bottom: 0; z-index: 1; width: 5.208vw; height: 5.208vw; background: #ffffff; border-radius: 5px; box-shadow: 0px 3px 10px rgb(0 0 0 / 10%); opacity: 0; visibility: hidden; transition: all ease 0.5s; } .share:hover .ewm { visibility: visible; left: -5.729vw; opacity: 1; } .share .phone { position: absolute; left: -11.458vw; bottom: 0; z-index: 1; width: 9.375vw; padding: 0.521vw 0; background: #ffffff; border-radius: 5px; box-shadow: 0px 3px 10px rgb(0 0 0 / 10%); text-align: center; opacity: 0; visibility: hidden; transition: all ease 0.5s; } .share:hover .phone { visibility: visible; left: -9.896vw; opacity: 1; } .share .phone p { color: #000000; font-size: 0.729vw; white-space: nowrap; } .share .pic { width: 100%; padding: 0.781vw 0.521vw 0.521vw; } .share .after { display: none; } .sidebar .share:hover .before { display: none; } .sidebar .share:hover .after { display: block; } .share .intr { width: 100%; padding: 0.052vw; text-align: center; background: #ffffff; transition: all ease 0.5s; } .share .intr span { font-size: 0.729vw; font-weight: 400; color: #111111; transition: all ease 0.5s; } /* .sidebar .share:first-child .intr{ background: #999; } .sidebar .share:first-child .intr span{ color: #ffffff; } */ .sidebar .share:hover .intr { background: #0bb798; } .sidebar .share:hover span { color: #ffffff; } .scrollup { position: fixed; right: 2.865vw; bottom: -20%; z-index: 50; width: 2.083vw; height: 2.083vw; cursor: pointer; transition: all ease 0.5s; } .show-scroll { bottom: 15%; }