@charset "utf-8"; .w100 { width: 100%; } .h100 { height: 100%; } .wh100 { width: 100%; height: 100%; } .groui-select { margin-right: 15px; display: inline-block; position: relative; background-color: #fff; } .groui-select.select-active .select-options { visibility: visible; -webkit-animation-name: selectin; -moz-animation-name: selectin; -o-animation-name: selectin; animation-name: selectin; } .groui-select.select-active .select-label-input { box-shadow: 0 0 0 1px #00a73c inset; } .groui-select.select-active .select-icon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .groui-select .select-container { position: relative; } .groui-select .select-label-input { width: 240px; cursor: pointer; outline: none; border: none; box-shadow: 0 0 0 1px #e4e7ed inset; background-color: #fff; border-radius: 4px; line-height: 2.5; padding: 0 30px 0 15px; font-size: inherit; -webkit-transition: box-shadow 0.5s; -o-transition: box-shadow 0.5s; -moz-transition: box-shadow 0.5s; transition: box-shadow 0.5s; } .groui-select .select-icon { position: absolute; right: 15px; top: 0; bottom: 0; width: 12px; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .groui-select .select-options { visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; -o-animation-name: none; animation-name: none; -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; -o-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; position: absolute; min-width: 100%; left: 0; z-index: 9; padding: 10px 0; border-radius: 4px; top: 100%; max-height: 200px; border: solid 1px #e4e7ed; background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); overflow: auto; } .groui-select .select-options::-webkit-scrollbar { width: 2px; } .groui-select .select-options::-webkit-scrollbar-thumb { width: 2px; background-color: #00a73c; } .groui-select .select-option { padding: 0 10px; line-height: 2.4285714286; cursor: pointer; display: block; text-align: left; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-transition: background-color 0.3s, color 0.3s; -o-transition: background-color 0.3s, color 0.3s; -moz-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .groui-select .select-option:hover, .groui-select .select-option.select-option-active { background-color: #00a73c; color: #fff; } .liuyan_tanchuang { position: fixed; width: 90%; max-width: 400px; display: none; top: 100px; left: 50%; -webkit-transform: translatex(-50%); -moz-transform: translatex(-50%); -ms-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); z-index: 2010; border-radius: 2px; background: #000; } .liuyan_tanchuang .lox { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 15px; color: #fff; line-height: 24px; } .liuyan_tanchuang .ico { width: 24px; } .liuyan_tanchuang .out { width: 20px; cursor: pointer; margin-top: 2px; } .liuyan_tanchuang .wz { width: -webkit-calc(100% - 48px); width: -moz-calc(100% - 48px); width: calc(100% - 48px); padding: 0 10px; } .my-time { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-time::before, .my-time::after { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-times { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-times::before, .my-times::after { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-times * { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-times *::before, .my-times *::after { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-img-active { cursor: pointer; } .my-img-active.my-img-container, .my-img-active .my-img-container { overflow: hidden; } .my-img-active .my-img-target { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-img-active:hover.my-img-target { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .my-img-active:hover .my-img-target { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .my-img-toggle { cursor: pointer; } .my-img-toggle.my-img-target, .my-img-toggle .my-img-target { position: relative; display: inline-block; } .my-img-toggle.my-img-target img, .my-img-toggle .my-img-target img { -webkit-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1); } .my-img-toggle.my-img-target img:nth-child(2), .my-img-toggle .my-img-target img:nth-child(2) { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; } .my-img-toggle:not(.my-img-not):hover.my-img-target img:nth-child(1), .my-img-toggle:not(.my-img-not):hover .my-img-target img:nth-child(1), .my-img-toggle:not(.my-img-not).active.my-img-target img:nth-child(1), .my-img-toggle:not(.my-img-not).active .my-img-target img:nth-child(1) { opacity: 0; } .my-img-toggle:not(.my-img-not):hover.my-img-target img:nth-child(2), .my-img-toggle:not(.my-img-not):hover .my-img-target img:nth-child(2), .my-img-toggle:not(.my-img-not).active.my-img-target img:nth-child(2), .my-img-toggle:not(.my-img-not).active .my-img-target img:nth-child(2) { opacity: 1; } .my-main img, .my-main video { -o-object-fit: cover; object-fit: cover; } .my-main video { display: block; } .my-main a { color: inherit; } .my-main input, .my-main textarea { font-size: inherit; background-color: transparent; border: none; outline: none; } .my-main textarea { resize: none; font-family: "微软雅黑"; } header.active { position: sticky; top: 0; left: 0; z-index: 1000; } header.active .head { position: relative; } .my-nav { background-color: rgba(255, 255, 255, 0.9); margin-top: -66px; position: relative; height: 66px; } .my-nav .nox { position: absolute; top: 0; left: 0; width: 100%; line-height: 66px; } .my-nav .box { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-right: 0.5rem; position: relative; } .my-nav .box .jianfan{ position: absolute; top: 0; right: 0; } .my-nav .box .jianfan a.active{ color: #00a73c; } .my-nav .nav-item { margin: 0 0.4rem; } .my-nav .nav-item:hover, .my-nav .nav-item.active { color: #00a73c; } .my-nav-inv .nav-item { margin: 0 0.2rem; } .my-nav .nox.act { position: fixed; background: rgb(255, 255, 255); border-bottom: 1px solid #ddd; } .my-nav .nox.up { z-index: 10; } .my-list3 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .my-list3 .swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .my-list3::after, .my-list3 .swiper-wrapper::after { position: relative; content: ""; height: 0; width: 31.6176470588%; } .my-list3 .item3 { width: 31.6176470588%; padding-top: 0.26rem; padding-bottom: 0.37rem; background-color: #f8f8f8; border-radius: 0.12rem; overflow: hidden; margin-bottom: 0.4rem; border-top: 0.04rem solid #f8f8f8; position: relative; } .my-list3 .item3:hover { border-top-color: #00a73c; } .my-list3 .item3:hover .item3-title { color: #00a73c; } .my-list3 .item3-tip { position: absolute; line-height: 1.875; padding: 0 0.15rem; background-color: #f46924; border-radius: 50px; color: #fff; left: 0.3rem; top: 0.3rem; } .my-list3 .item3-img { width: 106.976744186%; max-width: initial; margin-left: -3.488372093%; position: relative; } .my-list3 .item3-img img{ -webkit-transform: scale(.9); transform: scale(.9); } .my-list3 .item3-title { line-height: 1.3333333333; margin-bottom: 0.06rem; text-align: center; padding: 0 10px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .my-list3 .item3-text { line-height: 1.625; text-align: center; padding: 0 10px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .my-active1 { position: absolute; bottom: 0.4rem; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); width: 3px; height: 0.8rem; background-color: rgba(255, 255, 255, 0.3); overflow: hidden; } .my-active1 s { position: absolute; display: block; left: 0; right: 0; height: 0.2rem; background-color: #eeeeee; -webkit-animation: ani1 2s linear infinite both; -moz-animation: ani1 2s linear infinite both; -o-animation: ani1 2s linear infinite both; animation: ani1 2s linear infinite both; } .my-swiper-pagination.swiper-pagination-horizontal { bottom: 0; } .my-swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet { margin: 0 5px; } .my-swiper-pagination.status1 .swiper-pagination-bullet { background-color: #fff; } .my-swiper-pagination.status2 .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.15); width: 0.2rem; } .my-swiper-pagination.status2 .swiper-pagination-bullet-active { width: 0.3rem; } .my-swiper-pagination.status1 .swiper-pagination-bullet-active, .my-swiper-pagination.status2 .swiper-pagination-bullet-active { background-color: #00a73c; } .my-swiper-pagination .swiper-pagination-bullet { width: 0.3rem; height: 0.04rem; border-radius: 2px; background-color: #dcdcdb; opacity: 1; } .my-swiper-pagination .swiper-pagination-bullet-active { width: 0.4rem; background-color: #00a73c; } .my-swiper-button .swiper-button { --swiper-navigation-size: 56px; } .my-swiper-button .swiper-button::after { display: none; } .my-swiper-button.status1 .swiper-button { background-color: rgba(255, 255, 255, 0.6); } .my-swiper-button.status2 .swiper-button { background-color: rgba(240, 240, 240, 0.6); } .my-swiper-button .swiper-button:hover { background-color: #00a73c; } .my-swiper-button .swiper-button { width: 56px; height: 56px; background-color: #fff; border-radius: 50%; } .my-swiper-button .swiper-button span { width: 0.12rem; } .my-swiper-button .swiper-button-prev span { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .my-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; display: none; } .my-modal .modal-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .my-modal .modal-container { width: 100%; height: 100%; position: relative; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: safe center; -moz-box-align: safe center; -ms-flex-align: safe center; align-items: safe center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: auto; padding: 5vh 15px; } .my-modal .modal-main { position: relative; max-width: 100%; } .my-modal .modal-close { position: absolute; top: 0; right: -33px; width: 18px; } .my-modal .modal-close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .my-list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0.1rem; } .my-list::after { position: relative; content: ""; height: 0; width: 31.6176470588%; } .my-list .item { width: 32.3529411765%; background-color: #ffffff; border-radius: 0.08rem; margin-bottom: 0.3rem; padding: 0.4rem 0.4rem 0.35rem; } .my-list .item:hover .item-title { color: #00a73c; } .my-list .item-icon { width: 1.3333333333em; margin-bottom: 0.14rem; } .my-list .item-title { line-height: 28px; height: 56px; margin-bottom: 0.1rem; word-break: break-all; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .my-list .item-time { line-height: 1.6666666667; color: #999; } .banner .content { position: absolute; left: 0; right: 0; top: 86px; } .banner .title { color: #fff; text-align: center; line-height: 1.2; margin-bottom: 0.2rem; } .banner .text { color: #fff; text-align: center; line-height: 1.5; } .products .my-nav .box { max-width: 1360px; width: 70%; } .products .my-nav .btn { position: absolute; right: 0; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); line-height: 2.75; padding: 0 0.24rem; background-color: #fff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50px; } .products .my-nav .btn:hover { background-color: #00a73c; } .products .my-nav .btn:hover .btn-text { color: #fff; } .products .my-nav .btn-icon { width: 1.25em; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 0.11rem; } .products .my-nav .btn-text { color: #444; } .products .section1 { padding-top: 1.15rem; padding-bottom: 0.8rem; } .products .section1 .box { max-width: 1360px; width: 70%; } .products .section1 .item .item { margin-top: 0.55rem; } .products .section1 .item-title { line-height: 1.25; margin-bottom: 0.3rem; } .products .section1 .item2 .item2 { margin-top: 0.15rem; } .products .section1 .item2-title { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.35rem; } .products .section1 .item2-title img { width: 0.5em; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 0.2rem; } .products .section1 .item2-title p { line-height: 1.5555555556; margin-right: 0.2rem; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .products .section1 .item2-title s { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: block; height: 1px; background-color: #f2f2f2; } .products .section2 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1100; pointer-events: none; overflow: hidden; } .products .section2.active { pointer-events: auto; } .products .section2.active .mask { opacity: 1; } .products .section2.active .container { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .products .section2 .mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); opacity: 0; } .products .section2 .container { position: absolute; background-color: #fff; top: 0; right: 0; bottom: 0; width: 56.25em; max-width: 100%; padding-top: 0.83rem; padding-bottom: 0.83rem; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .products .section2 .top { padding-left: 0.6rem; padding-right: 0.6rem; padding-bottom: 0.25rem; border-bottom: 1px solid #f2f2f2; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .products .section2 .select { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .products .section2 .select-item { line-height: 1.3333333333; color: #a3a3a3; cursor: pointer; } .products .section2 .select-item .select-item { margin-left: 0.4rem; } .products .section2 .select-item:hover, .products .section2 .select-item.active { color: #222; } .products .section2 .close { width: 1em; cursor: pointer; } .products .section2 .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .products .section2 .content { display: none; } .products .section2 .content.active { display: block; } .products .section2 .list { padding-left: 0.6rem; padding-right: 0.6rem; padding-top: 0.25rem; padding-bottom: 0.8rem; border-bottom: 1px solid #f2f2f2; } .products .section2 .item .item { margin-top: 0.15rem; } .products .section2 .item-title { line-height: 1.5555555556; margin-bottom: 0.17rem; } .products .section2 .item-ul { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products .section2 .item-li { width: 17.9487179487%; margin-right: 2.5641025641%; margin-bottom: 0.2rem; line-height: 1.375; color: #666; padding: 0.12rem 0.08rem; text-align: center; border: 1px solid #ececec; border-radius: 50px; cursor: pointer; } .products .section2 .item-li.active { color: #00a73c; border-color: #00a73c; } .products .section2 .item-li:nth-of-type(5n) { margin-right: 0; } .products .section2 .btns { padding: 0.3rem 0.6rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .products .section2 .btn { line-height: 3; padding: 0 0.55rem; border-radius: 50px; cursor: pointer; } .products .section2 .btn .btn { margin-left: 0.2rem; } .products .section2 .btn1 { background-color: #00a73c; color: #fff; } .products .section2 .btn1:hover { background-color: #4cc176; } .products .section2 .btn2 { background-color: rgba(246, 246, 246, 0.92); } .products .section2 .btn2:hover { background-color: #d1d1d1; } .products .section2 .content2 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 0.6rem; padding-right: 0.6rem; padding-top: 0.7rem; padding-bottom: 0.8rem; } .products .section2 .list2 { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-right: 15px; } .products .section2 .list3 { width: 60.2564102564%; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .products .section2 .item2 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; line-height: 1.375; cursor: pointer; } .products .section2 .item2 .item2 { margin-top: 0.24rem; } .products .section2 .item2 span { width: 0.5625em; height: 1.375em; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 0.17rem; } .products .section2 .item2 s { display: block; width: 100%; height: 0.5625em; border-radius: 50px; background-color: #dfdfdf; } .products .section2 .item2 p { color: #666666; display: none; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .products .section2 .item2.active s { width: 0.3125em; height: 1.125em; } .products .section2 .item2.active p { display: inline; } .products .section2 .item2.active.active1 s { background-color: #00a73c; } .products .section2 .item2.active.active1 p { color: #222; -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } .products .section2 .item3 { display: none; } .products .section2 .item3.active { display: block; } .products .section2 .item3.active1 .item3-li.status1 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .products .section2 .item3-li { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0.13rem 0.4rem; border-radius: 50px; border: 1px solid #ececec; cursor: pointer; margin-bottom: 0.2rem; } .products .section2 .item3-li.status1 { display: none; } .products .section2 .item3-li.active { border-color: #00a73c; } .products .section2 .item3-li.active img { opacity: 1; } .products .section2 .item3-li img { width: 1.125em; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 10px; opacity: 0; } .products .section2 .item3-li p { color: #666666; line-height: 1.375; } .products .section2 .btns2 { display: none; border-top: 1px solid #f2f2f2; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .products .section2 .btns2.active { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .results .section1 { padding-top: 0.95rem; padding-bottom: 0.8rem; } .results .section1 .box { max-width: 1360px; width: 70%; } .results .section1 .title { line-height: 1.25; margin-bottom: 0.3rem; } .results .section1 .content { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 0.1rem; border-bottom: 1px solid #f2f2f2; margin-bottom: 0.5rem; } .results .section1 .left { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; color: #666; } .results .section1 .text { margin-right: 0.2rem; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; line-height: 3.125; } .results .section1 .infos { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .results .section1 .info { line-height: 3.125; background-color: #f7f7f7; border-radius: 50px; margin-right: 0.2rem; padding: 0 0.3rem; margin-bottom: 10px; } .results .section1 .tip { line-height: 1.375; color: #666; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .results .section1 .tip span { color: #00a73c; } .products2 .banner .content { padding-top: 1.95rem; } .products2 .section1 { padding-top: 1rem; padding-bottom: 0.7rem; background-color: #dee0e2; } .products2 .section1 .box { max-width: 1580px; } .products2 .section1 .swiper { padding-bottom: 0.3rem; } .products2 .section1 .swiper-slide { width: 23.5443037975%; padding-top: 0.93rem; padding-bottom: 0.6rem; background-color: #ffffff; border-radius: 0.08rem; height: auto; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .products2 .section1 .slide-img { width: 72.5806451613%; margin: 0 auto 0.52rem; } .products2 .section1 .slide-title { width: 100%; padding: 0 10px; line-height: 1.3846153846; margin-bottom: 0.1rem; text-align: center; } .products2 .section1 .slide-text { width: 100%; padding: 0 10px; line-height: 1.625; margin-bottom: 0.33rem; text-align: center; color: #555; } .products2 .section1 .slide-more { margin-top: auto; width: 100%; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .products2 .section2 { min-height: 9.9rem; padding-top: 1.15rem; position: relative; background-color: #fafafa; overflow: hidden; } .products2 .section2 .title { text-align: center; line-height: 1.2222222222; margin-bottom: 0.1rem; } .products2 .section2 .text { text-align: center; line-height: 1.5; } .products2 .section2 .container { position: relative; margin-top: 2.37rem; margin-bottom: 2.37rem; } .products2 .section2 .list-container { padding: 0.15rem 0; } .products2 .section2 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .products2 .section2 .item { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 2.4rem; height: 1rem; background-color: #fff; box-shadow: 0px 0.04rem 0.12rem 0px rgba(0, 0, 0, 0.04); border-radius: 0.08rem; margin-right: 0.3rem; } .products2 .section2 .item img { width: 2rem; } .products2 .section2 .bg { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 8.24rem; height: 8.24rem; } .products2 .section2 #earthcanvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .products2 .section2 .controls { position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none; opacity: 0; } .products2 .section3 { padding-top: 1.15rem; padding-bottom: 1.2rem; } .products2 .section3 .box { max-width: 1360px; width: 70%; } .products2 .section3 .title { text-align: center; line-height: 1.2222222222; margin-bottom: 0.35rem; } .products2 .section3 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .products2 .section3 .item { width: 31.9117647059%; background-color: #f6f6f6; border-radius: 0.08rem; padding-top: 0.94rem; padding-bottom: 0.53rem; } .products2 .section3 .item-icon { width: 3em; margin: 0 auto 0.27rem; } .products2 .section3 .item-img { width: 4em; height: 4em; background-color: #fff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto 0.07rem; -webkit-transform: translate3d(0, -0.5em, 0); -moz-transform: translate3d(0, -0.5em, 0); transform: translate3d(0, -0.5em, 0); } .products2 .section3 .item-img img { width: 3.25em; } .products2 .section3 .item-title { text-align: center; margin-bottom: 0.02rem; line-height: 1.5; } .products2 .section3 .item-text { line-height: 1.625; text-align: center; color: #555; } .products2 .section3 .item-text a:hover { color: #00a73c; } .products2 .section3 .btn { cursor: pointer; } .products2 .section3 .btn:hover .item-title { color: #00a73c; } .modal-form .modal-main { width: 11.6rem; background-color: #fff; border-radius: 0.16rem; padding: 0.33rem 0.5rem 0.4rem; } .modal-form .title { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0.2rem; } .modal-form .close { width: 1em; cursor: pointer; } .modal-form .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .modal-form .text { line-height: 1.625; color: #888; margin-bottom: 0.35rem; } .modal-form .form { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .modal-form .form-item { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 48.1132075472%; border-bottom: 1px solid #f2f2f2; margin-bottom: 0.2rem; } .modal-form .form-item.btns { width: 100%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; border: none; margin-top: 0.2rem; margin-bottom: 0; } .modal-form .form-item.active { border-bottom-color: #d8261c; } .modal-form .form-label { color: #555555; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; width: 5em; } .modal-form .form-label.required::before { position: relative; content: "*"; color: #00a73c; margin-right: 0.3em; } .modal-form .form-content { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .modal-form .form-input { line-height: 3.125; text-align: right; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 0; } .modal-form .form-input::-webkit-input-placeholder { font-family: "pfm"; color: #a6a6a6; } .modal-form .form-input:-moz-placeholder { font-family: "pfm"; color: #a6a6a6; } .modal-form .form-input::-moz-placeholder { font-family: "pfm"; color: #a6a6a6; } .modal-form .form-input:-ms-input-placeholder { font-family: "pfm"; color: #a6a6a6; } .modal-form .form-input::placeholder { font-family: "pfm"; color: #a6a6a6; } .modal-form .groui-select { margin-right: 0; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .modal-form .groui-select .select-label-input { width: 100%; box-shadow: none; line-height: 3.125; text-align: right; padding-right: -webkit-calc(0.2rem 7px); padding-right: -moz-calc(0.2rem 7px); padding-right: calc(0.2rem 7px); } .modal-form .groui-select .select-icon { right: 0.1rem; width: 7px; } .modal-form .groui-select .select-icon img { width: 100%; } .modal-form .code-img { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; height: 3.125em; margin-left: 0.2rem; cursor: pointer; } .modal-form .btn { line-height: 3; padding: 0 0.55rem; border-radius: 50px; cursor: pointer; } .modal-form .btn .btn { margin-left: 0.2rem; } .modal-form .btn1 { background-color: #00a73c; color: #fff; } .modal-form .btn1:hover { background-color: #4cc176; } .modal-form .btn2 { background-color: rgba(246, 246, 246, 0.92); } .modal-form .btn2:hover { background-color: #d1d1d1; } .products3 .banner .content { padding-top: 2.15rem; } .products3 .section1 { padding-top: 1.13rem; padding-bottom: 0.8rem; } .products3 .section1 .box { max-width: 1580px; } .products3 .section1 .title { text-align: center; line-height: 1.2222222222; margin-bottom: 0.1rem; } .products3 .section1 .text { text-align: center; line-height: 1.5; margin-bottom: 0.35rem; } .products3 .section1 .swiper { padding-bottom: 0.4rem; } .products3 .section1 .swiper-slide { border-radius: 0.08rem; } .products3 .section1 .slide-info { position: absolute; left: 10px; right: 10px; bottom: 9.6428571429%; text-align: center; } .products3 .section1 .slide-title { line-height: 1.5; margin-bottom: 0.07rem; } .products3 .section1 .slide-text { line-height: 1.6666666667; } .products3 .section2 { padding-top: 1.24rem; padding-bottom: 0.8rem; background-color: #f6f6f6; } .products3 .section2 .box { max-width: 1580px; } .products3 .section2 .title { text-align: center; line-height: 1.2222222222; margin-bottom: 0.1rem; } .products3 .section2 .text { text-align: center; line-height: 1.5; margin-bottom: 0.35rem; } .products3 .section2 .swiper { padding-bottom: 0.4rem; } .products3 .section2 .swiper-slide { border-radius: 0.08rem; } .products3 .section2 .swiper-slide.active .slide-content { opacity: 1; pointer-events: auto; } .products3 .section2 .slide-info { position: absolute; left: 10px; right: 10px; bottom: 8.9285714286%; text-align: center; } .products3 .section2 .slide-title { line-height: 1.5; margin-bottom: 0.24rem; } .products3 .section2 .slide-more { -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .products3 .section2 .slide-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #00a73c; z-index: 2; padding-left: 0.29rem; padding-right: 0.29rem; padding-top: 0.74rem; padding-bottom: 0.56rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; pointer-events: none; } .products3 .section2 .slide-title2 { line-height: 1.5; color: #fff; text-align: center; padding-bottom: 0.24rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .products3 .section2 .slide-text2 { color: #fff; line-height: 1.6470588235; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 0; overflow: auto; -moz-box-sizing: content-box; box-sizing: content-box; width: 100%; padding-right: 10px; } .products3 .section2 .slide-text2::-webkit-scrollbar { width: 4px; } .products3 .section2 .slide-text2::-webkit-scrollbar-thumb { width: 4px; background-color: #fff; } .products3 .section2 .slide-icon { margin: 10px auto 0; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .products3 .section2 .slide-icon:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .products3 .section3 { padding-top: 1.15rem; overflow: hidden; } .products3 .section3 .title { text-align: center; line-height: 1.2222222222; margin-bottom: 0.1rem; } .products3 .section3 .text { text-align: center; line-height: 1.5; } .products3 .section3 .content2{ display: none; } .products3 .section3 .container { width: 30.2em; margin: 1.45rem auto 1.28rem; position: relative; } .products3 .section3 .container.active .circle1 { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .products3 .section3 .container.active .circle2 { -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .products3 .section3 .container.active .item, .products3 .section3 .container.active .item2 { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; } .products3 .section3 .circle1 { width: 30.2em; height: 30.2em; border: 1px dashed rgba(0, 167, 60, 0.3); border-radius: 50%; margin: 0 auto; position: relative; } .products3 .section3 .line1 { position: absolute; width: 48.8em; height: 48.8em; border: 1px dashed rgba(0, 167, 60, 0.2); border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .products3 .section3 .line2 { position: absolute; width: 79.5em; height: 79.5em; border: 1px dashed rgba(0, 167, 60, 0.1); border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .products3 .section3 .circle2 { width: 21.1em; height: 21.1em; border-radius: 50%; background-color: rgba(0, 167, 60, 0.1); position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .products3 .section3 .circle3 { width: 9.6em; height: 9.6em; border-radius: 50%; background-color: #fff; box-shadow: 0px 0.12rem 0.3rem 0px rgba(0, 167, 60, 0.16); position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .products3 .section3 .circle3 img { width: 6em; } .products3 .section3 .item { width: 5.4em; height: 5.4em; border-radius: 50%; background-color: #00a73c; box-shadow: 0px 0.06rem 0.2rem 0px rgba(0, 167, 60, 0.1); color: #fff; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; line-height: 1.3; position: absolute; } .products3 .section3 .item:nth-child(1) { left: 10.9004739336%; top: -6.1611374408%; } .products3 .section3 .item:nth-child(2) { left: 63.7440758294%; top: -6.1611374408%; } .products3 .section3 .item:nth-child(3) { left: 85.5450236967%; top: 36.9668246445%; } .products3 .section3 .item:nth-child(4) { left: 63.7440758294%; top: 79.3838862559%; } .products3 .section3 .item:nth-child(5) { left: 10.9004739336%; top: 79.3838862559%; } .products3 .section3 .item:nth-child(6) { left: -10.9004739336%; top: 36.9668246445%; } .products3 .section3 .item2 { position: absolute; } .products3 .section3 .item2:nth-child(1) { left: 22.0198675497%; top: 6.4569536424%; } .products3 .section3 .item2:nth-child(1) .item2-title { text-align: right; bottom: 100%; right: 100%; padding-right: 0.04rem; padding-bottom: 0.03rem; } .products3 .section3 .item2:nth-child(2) { left: 75%; top: 6.4569536424%; } .products3 .section3 .item2:nth-child(2) .item2-title { text-align: right; bottom: 100%; left: 100%; padding-left: 0.04rem; padding-bottom: 0.03rem; } .products3 .section3 .item2:nth-child(3) { left: 98.8410596026%; top: 48.8410596026%; } .products3 .section3 .item2:nth-child(3) .item2-title { left: 100%; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); padding-left: 0.2rem; } .products3 .section3 .item2:nth-child(4) { left: 75%; top: 91.3907284768%; } .products3 .section3 .item2:nth-child(4) .item2-title { top: 100%; left: 100%; padding-left: 0.04rem; padding-top: 0.03rem; } .products3 .section3 .item2:nth-child(5) { left: 22.8476821192%; top: 91.3907284768%; } .products3 .section3 .item2:nth-child(5) .item2-title { text-align: right; top: 100%; right: 100%; padding-right: 0.04rem; padding-top: 0.03rem; } .products3 .section3 .item2:nth-child(6) { left: -1.1589403974%; top: 48.8410596026%; } .products3 .section3 .item2:nth-child(6) .item2-title { text-align: right; right: 100%; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); padding-right: 0.2rem; } .products3 .section3 .item2-dot { width: 0.7em; height: 0.7em; display: block; border-radius: 50%; background-color: #ffffff; border: solid 0.03rem #00a73c; } .products3 .section3 .item2-title { position: absolute; white-space: nowrap; line-height: 1.5; } .compare .section1 { padding-top: 1rem; padding-bottom: 1.2rem; } .compare .section1 .box { max-width: 1360px; width: 70%; } .compare .section1 .title { text-align: center; line-height: 1.25; margin-bottom: 0.35rem; } .compare .section1 .select { border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .compare .section1 .text1 { line-height: 1.5555555556; margin-bottom: 0.12rem; } .compare .section1 .text2 { line-height: 1.5555555556; color: #666; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .compare .section1 .text2 label { cursor: pointer; } .compare .section1 .input { position: relative; display: block; margin-left: 0.09rem; } .compare .section1 .input input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 2; cursor: pointer; } .compare .section1 .input input:checked span { background-color: #00a73c; } .compare .section1 .input input:checked span s { left: 1.1666666667em; } .compare .section1 .input span { display: block; width: 2.2222222222em; height: 1.2222222222em; border-radius: 50px; background-color: #dcdcdc; } .compare .section1 .input span s { width: 0.8888888889em; height: 0.8888888889em; background-color: #fff; border-radius: 50%; left: 0.1666666667em; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); display: block; position: absolute; } .compare .section1 .ul { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; width: 82.3529411765%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .compare .section1 .li { -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; min-height: 1.66rem; } .compare .section1 .li-content { padding-bottom: 0.32rem; position: relative; } .compare .section1 .li-icon { position: absolute; width: 0.9090909091em; top: 0.3rem; right: 0.4rem; z-index: 5; cursor: pointer; } .compare .section1 .li-icon:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .compare .section1 .li-title { text-align: center; line-height: 1.4545454545; margin-bottom: 0.11rem; } .compare .section1 .li-btn { text-align: center; cursor: pointer; color: #00a73c; } .compare .section1 .li-btn:hover { color: #4cc176; } .compare .section1 .li-add { height: 100%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .compare .section1 .li-add-btn { cursor: pointer; width: 3.6666666667em; } .compare .section1 .bottom { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.2rem; } .compare .section1 .ul2 { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; width: 82.3529411765%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .compare .section1 .li2 { -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 10px; padding-right: 10px; } .compare .section1 .li2 span { display: block; width: 1em; height: 1em; border-radius: 50%; margin: 0 0.05rem; } .compare .section2 { background-color: #f6f6f6; padding-top: 0.62rem; padding-bottom: 1.05rem; } .compare .section2 .box { max-width: 1360px; width: 70%; } .compare .section2 .item .item { margin-top: 0.55rem; } .compare .section2 .item-title { line-height: 1.3333333333; margin-bottom: 0.25rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .compare .section2 .item-ul { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .compare .section2 .item-li { margin-left: 0.5rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .compare .section2 .item-li s { margin-right: 0.11rem; } .compare .section2 .active1 { width: 1em; height: 1em; background-color: #222; border-radius: 50%; display: block; } .compare .section2 .active2 { width: 1em; height: 1em; border: solid 2px #222222; border-radius: 50%; display: block; } .compare .section2 .active3 { display: block; width: 0.8235294118em; height: 0.03rem; background-color: #222; } .compare .section2 .list2 { border-top: 1px solid #e7e7e7; } .compare .section2 .item2 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0.15rem 0; border-bottom: 1px solid #e7e7e7; } .compare .section2 .item2-title { line-height: 1.5555555556; } .compare .section2 .ul { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; width: 82.3529411765%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .compare .section2 .li { width: 25%; text-align: center; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #444; line-height: 1.5882352941; } .compare .section2 .tip { line-height: 1.625; color: #888; margin-top: 0.35rem; } .modal-compare .modal-main { width: 100%; height: 80vh; max-width: 1160px; background-color: #fff; border-radius: 0.16rem; padding: 0.4rem 0.6rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .modal-compare .title { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0.5rem; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .modal-compare .close { width: 1em; cursor: pointer; } .modal-compare .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .modal-compare .content { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 0; } .modal-compare .select { width: 11.7307692308%; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; border-right: 1px solid #f5f5f5; overflow: auto; } .modal-compare .select-item { display: block; color: #555555; line-height: 1.6666666667; cursor: pointer; padding-right: 5px; position: relative; } .modal-compare .select-item s { display: block; width: 3px; height: 0; background-color: #00a73c; position: absolute; right: 0; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .modal-compare .select-item.active, .modal-compare .select-item:hover { color: #00a73c; } .modal-compare .select-item.active s, .modal-compare .select-item:hover s { height: 1em; } .modal-compare .select-item .select-item { margin-top: 0.2rem; } .modal-compare .list-container { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: auto; } .modal-compare .list-container::-webkit-scrollbar { width: 4px; background-color: rgba(225, 225, 225, 0.3); } .modal-compare .list-container::-webkit-scrollbar-thumb { width: 4px; background-color: #00a73c; } .modal-compare .list-top { background-color: #fff; padding-bottom: 0.4rem; position: sticky; top: 0; left: 0; z-index: 10; } .modal-compare .input { width: 90%; max-width: 22.5em; position: relative; margin: 0 auto; } .modal-compare .input input { width: 100%; line-height: 3; background-color: #f7f7f7; border-radius: 0.06rem; padding-left: 0.3rem; padding-right: 4em; border: 1px solid #f7f7f7; } .modal-compare .input input::-webkit-input-placeholder { color: #a6a6a6; } .modal-compare .input input:-moz-placeholder { color: #a6a6a6; } .modal-compare .input input::-moz-placeholder { color: #a6a6a6; } .modal-compare .input input:-ms-input-placeholder { color: #a6a6a6; } .modal-compare .input input::placeholder { color: #a6a6a6; } .modal-compare .input input:focus { border-color: #00a73c; } .modal-compare .input img { position: absolute; width: 1.125em; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); right: 0.3rem; cursor: pointer; } .modal-compare .input img:hover { opacity: 0.7; } .modal-compare .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .modal-compare .item { width: 33%; } .modal-compare .item-title { text-align: center; margin: 0.1rem 0; } .service .banner .content { padding-top: 2.7rem; } .service .section1 { padding-top: 1rem; padding-bottom: 0.8rem; } .service .section1 .box { max-width: 1360px; width: 70%; } .service .section1 .content { background-color: #f6f6f6; border-radius: 0.08rem; padding: 0.25rem 0.25rem 0.25rem 0.6rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.2rem; } .service .section1 .info { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .service .section1 .info .more { margin-top: 0.7rem; } .service .section1 .title { line-height: 1.5; margin-bottom: 0.3rem; } .service .section1 .text1 { line-height: 1.2; margin-bottom: 0.1rem; } .service .section1 .text2 { line-height: 1.625; } .service .section1 .img { width: 49.6470588235%; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 15px; } .service .section1 { overflow: hidden; } .service .section1 .swiper { padding: 0.4rem 0; overflow: visible; } .service .section1 .swiper-slide { height: auto; background-color: #f6f6f6; border-radius: 0.08rem; text-align: center; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 0.75rem; padding-bottom: 0.7rem; padding-left: 10px; padding-right: 10px; position: relative; top: 0px; -webkit-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .service .section1 .swiper-slide.act { box-shadow: 0 5px 10px #ddd; top: -10px; } .service .section1 .swiper-slide.act .more .a { background: #00a73c; } .service .section1 .swiper-slide.act .more .a .wz { color: #fff; left: 0; } .service .section1 .swiper-slide.act .more .a s { left: 0; opacity: 1; } .service .section1 .slide-icon { width: 2.2222222222em; margin: 0 auto 0.15rem; } .service .section1 .slide-title { line-height: 1.5555555556; margin-bottom: 0.33rem; } .service .section1 .slide-text1 { line-height: 1.5; margin-bottom: 0.05rem; } .service .section1 .slide-text2 { line-height: 1.6666666667; color: #555; margin-bottom: 0.3rem; } .service .section1 .slide-more { -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: auto; } .service .section2 { background-color: #f6f6f6; padding-top: 1rem; overflow: hidden; } .service .section2 .box { max-width: 1360px; width: 70%; } .service .section2 .container { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .service .section2 .left { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-right: 1.4rem; padding-top: 0.35rem; padding-bottom: 0.5rem; } .service .section2 .title { line-height: 1.25; margin-bottom: 0.14rem; } .service .section2 .text { line-height: 1.5882352941; margin-bottom: 0.63rem; } .service .section2 .item-top { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.27rem; } .service .section2 .item-top s { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 1px; background-color: #e5e5e5; } .service .section2 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .service .section2 .item { margin-bottom: 0.2rem; } .service .section2 .item .item { margin-left: 0.9rem; } .service .section2 .item-icon { width: 2.5em; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 0.1rem; } .service .section2 .item-ul { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .service .section2 .item-li .item-li { margin-left: 0.3rem; } .service .section2 .item-li-code { width: 7.5em; background-color: #fff; padding: 0.9375em; } .service .section2 .item-li-title { text-align: center; line-height: 1.625; margin-top: 0.16rem; } .service .section2 .swipers { width: 21.1029411765%; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 15.6617647059%; position: relative; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .service .section2 .swiper { position: absolute; width: 94.0766550523%; left: 50%; bottom: 0; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); border-radius: 0.3rem 0.3rem 0 0; } .service .section2 .swiper-bg { position: absolute; width: 97.212543554%; top: -0.14rem; right: -77.7003484321%; } .service .section2 .swiper-bg2 { position: relative; z-index: 5; } .service .section2 .swiper-button-prev { left: -0.96rem; } .service .section2 .swiper-button-next { right: -0.96rem; } .classroom .section1 { padding-top: 1.6rem; padding-bottom: 1.2rem; } .classroom .section1 .box { max-width: 1360px; width: 70%; } .classroom .section1 .title { line-height: 1.25; margin-bottom: 0.35rem; text-align: center; } .classroom .section1 .list { margin-bottom: 0.4rem; } .classroom .section1 .item { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.2rem 0.3rem 0.2rem 0.4rem; background-color: #f8f8f8; border-radius: 0.08rem; margin-bottom: 0.2rem; } .classroom .section1 .item:hover .item-title { color: #00a73c; } .classroom .section1 .item:hover .item-icon2 { opacity: 1; } .classroom .section1 .item-icon { width: 1.6em; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .classroom .section1 .item-title { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 0; line-height: 1.6; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding-left: 0.3rem; padding-right: 10px; } .classroom .section1 .item-icon2 { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; width: 0.5em; opacity: 0; } .contact .banner .content { top:50%; transform: translatey(-50%);-webkit-transform: translatey(-50%); } .contact .section1 { padding: 1rem 0; } .contact .section1 .box { max-width: 1360px; width: 70%; } .contact .section1 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contact .section1 .list::after { position: relative; content: ""; width: 31.9117647059%; height: 0; } .contact .section1 .item { width: 31.9117647059%; background-color: #f8f8f8; border-radius: 0.08rem; padding: 0.35rem 0.4rem 0.2rem; position: relative; margin-bottom: 0.3rem; } .contact .section1 .item-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .contact .section1 .item-title { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1.5; margin-bottom: 0.15rem; } .contact .section1 .item-title img { width: 0.45em; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 0.1rem; } .contact .section1 .item-line { width: 100%; height: 1px; display: block; background-color: #efefef; margin-bottom: 0.2rem; } .contact .section1 .item-content { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contact .section1 .item-info { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-right: 10px; } .contact .section1 .item-info p { color: #666666; line-height: 1.6666666667; margin-bottom: 0.03rem; } .contact .section1 .item-info a { line-height: 1.5882352941; position: relative; z-index: 3; } .contact .section1 .item-info a:hover { color: #00a73c; text-decoration: underline; } .contact .section1 .item-code { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; width: 5em; padding: 0.5em; background-color: #fff; } .mall .section1 { padding-top: 1.6rem; padding-bottom: 1.2rem; } .mall .section1 .box { max-width: 1360px; width: 70%; } .mall .section1 .title { text-align: center; line-height: 1.25; margin-bottom: 0.38rem; } .mall .section1 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .mall .section1 .item { width: 18.75%; margin-right: 1.5441176471%; padding: 0.66rem 10px 0.52rem; background-color: #f6f6f6; border-radius: 0.08rem; } .mall .section1 .item:nth-of-type(5n) { margin-right: 0; } .mall .section1 .item.code .a:hover .item-code, .mall .section1 .item.code .item-code:hover { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .mall .section1 .item-img { width: 0.7rem; margin: 0 auto 0.25rem; } .mall .section1 .item-title { text-align: center; line-height: 1.5555555556; margin-bottom: 0.34rem; } .mall .section1 .more { -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .mall .section1 .item-code { position: absolute; z-index: 5; left: 50%; bottom: 100%; padding-bottom: 0.25rem; pointer-events: none; opacity: 0; -webkit-transform: translate3d(-50%, -20px, 0); -moz-transform: translate3d(-50%, -20px, 0); transform: translate3d(-50%, -20px, 0); } .mall .section1 .item-code-container { width: 9em; box-shadow: 0px 0.05rem 0.2rem 0px rgba(0, 167, 60, 0.1); position: relative; } .mall .section1 .item-code-container::after { position: absolute; content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #fff; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); top: 99%; } .investor { background-color: #f6f6f6; } .investor .my-nav .box{width:70%;max-width:1360px;} .investor .my-nav { margin-top: 0; background-color: #fff; } .investor .section1 { padding-top: 0.95rem; padding-bottom: 0.35rem; } .investor .section1 .box { max-width: 1360px; width: 70%; } .investor .section1 .title { line-height: 1.3333333333; margin-bottom: 0.35rem; } .investor .section1 .content { background-color: #fff; border-radius: 0.08rem; padding: 0.43rem 0.4rem 0.47rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .investor .section1 .text { line-height: 1.3333333333; } .investor .section1 .text span { color: #777; margin-left: 0.2rem; } .investor .section1 .info { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .investor .section1 .text2 { margin-right: 0.96rem; } .investor .section1 .text2 p:nth-child(1) { line-height: 1.3333333333; margin-bottom: 0.06rem; } .investor .section1 .text2 p:nth-child(2) { color: #999; line-height: 1.6666666667; } .investor .section1 .text3 { margin-top: 0.06rem; position: relative; } .investor .section1 .text3.red p:nth-child(2) { color: #f42222; } .investor .section1 .text3.red .img img:nth-child(1) { display: block; } .investor .section1 .text3.green p:nth-child(2) { color: #00a73c; } .investor .section1 .text3.green .img img:nth-child(2) { display: block; } .investor .section1 .text3 p:nth-child(1) { line-height: 1.5; margin-bottom: 0.06rem; color: #666; } .investor .section1 .text3 p:nth-child(2) { line-height: 1.5555555556; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .investor .section1 .text3 p:nth-child(2) span:last-child { margin-left: 0.22rem; display: block; } .investor .section1 .img { position: absolute; width: 0.75em; left: -0.5rem; top: 0.55em; } .investor .section1 .img img { display: none; } .investor .section2 { padding-top: 0.4rem; padding-bottom: 0.35rem; } .investor .section2 .box { max-width: 1360px; width: 70%; } .investor .section2 .title { line-height: 1.3333333333; margin-bottom: 0.35rem; } .investor .section2 .ul { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 0.4rem; } .investor .section2 .li { width: 23.3088235294%; margin-right: 2.2058823529%; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 0, 0, 0.04); } .investor .section2 .li:nth-of-type(4n) { margin-right: 0; } .investor .section2 .ul2 { padding: 0.1rem 0.4rem; background-color: #fff; border-radius: 0.08rem; margin-bottom: 0.4rem; } .investor .section2 .li2 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.2rem 0; border-bottom: 1px solid #f2f2f2; } .investor .section2 .li2:last-child { border-bottom: none; } .investor .section2 .li2:hover .li2-title { color: #00a73c; } .investor .section2 .li2-title { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 0; line-height: 1.5882352941; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .investor .section2 .li2-time { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 10px; color: #999999; } .investor .section3 { padding-top: 0.4rem; padding-bottom: 1.2rem; } .investor .section3 .box { max-width: 1360px; width: 70%; } .investor .section3 .title { line-height: 1.3333333333; margin-bottom: 0.35rem; } .investor .section3 .content { height: 4.78rem; background-color: #ffffff; border-radius: 0.08rem; overflow: hidden; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .investor .section3 .info { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0.35rem 0.4rem 0.6rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .investor .section3 .title { line-height: 1.3333333333; margin-bottom: 0.35rem; } .investor .section3 .text { width: 100%; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #999999; margin-bottom: 0.33rem; } .investor .section3 .text p { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 0.2rem; } .investor .section3 .text s { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 1px; background-color: #f2f2f2; } .investor .section3 .text2 { margin-bottom: 10px; } .investor .section3 .text2 p { line-height: 1.2222222222; } .investor .section3 .text2 p p { margin-top: 0.22rem; } .investor .section3 .text2 img { display: inline-block; vertical-align: middle; width: 1.2222222222em; margin-right: 0.18rem; } .investor .section3 .text2 a:hover { color: #00a73c; text-decoration: underline; } .investor .section3 .code { margin-top: auto; width: 87px; } .investor .section3 .img { width: 59.5588235294%; height: 100%; } .news .section1 { padding-top: 1.2rem; padding-bottom: 1.2rem; } .news .section1 .box { max-width: 1580px; } .news .section1 .select { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0.4rem; } .news .section1 .select-item { line-height: 3.3333333333; border-radius: 50px; min-width: 8em; padding: 0 10px; background-color: #f5f5f5; text-align: center; margin: 0 0.1rem; margin-bottom: 10px; } .news .section1 .select-item:hover, .news .section1 .select-item.active { background-color: #00a73c; color: #fff; } .news .section1 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #f2f2f2; margin-bottom: 0.4rem; } .news .section1 .list::after { position: relative; content: ""; width: 31.6455696203%; height: 0; } .news .section1 .item { width: 31.6455696203%; margin-bottom: 0.56rem; } .news .section1 .item:hover .item-title { color: #00a73c; } .news .section1 .item-img { border-radius: 0.08rem; margin-bottom: 0.25rem; } .news .section1 .item-time { line-height: 1.7142857143; color: #a7a7a7; margin-bottom: 0.12rem; } .news .section1 .item-title { line-height: 1.4736842105; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .life .section1 { padding-top: 1.2rem; padding-bottom: 1.2rem; } .life .section1 .box { max-width: 1360px; width: 70%; } .life .section1 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0.3rem; } .life .section1 .item { width: 48.5294117647%; margin-bottom: 0.6rem; } .life .section1 .item:hover .item-title { color: #00a73c; } .life .section1 .item-img { margin-bottom: 0.35rem; border-radius: 0.08rem; } .life .section1 .item-title { line-height: 1.3846153846; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.09rem; } .life .section1 .item-text { line-height: 1.625; height: 3.25em; color: #666; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 0.25rem; } .sevmap .section1 { height: 9.97rem; position: relative; } .sevmap .section1 .container { position: absolute; left: 1.7rem; top: 1.55rem; bottom: 0.9rem; width: 6.4rem; background-color: #fff; z-index: 5; box-shadow: 0px -0.05rem 0.2rem 0px rgba(0, 0, 0, 0.06); border-radius: 0.08rem; padding: 0.35rem 0.4rem 0.4rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sevmap .section1 .title { line-height: 1.625; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #a4a4a4; margin-bottom: 0.15rem; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .sevmap .section1 .title img { width: 1.2em; margin-left: 0.15rem; margin-right: 0.04rem; } .sevmap .section1 .title span:nth-child(3) { color: #00a73c; } .sevmap .section1 .fillter { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0.2rem; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .sevmap .section1 .groui-select { width: 32.1428571429%; margin-right: 0; margin-bottom: 0.1rem; } .sevmap .section1 .groui-select .select-label-input { width: 100%; line-height: 3; box-shadow: none; border: 1px solid #f6f6f6; background-color: #f6f6f6; border-radius: 0.06rem; padding-left: 0.3rem; padding-right: 2.5em; } .sevmap .section1 .groui-select .select-icon { width: 0.5em; right: 0.2rem; } .sevmap .section1 .groui-select .select-icon img { width: 100%; } .sevmap .section1 .input { line-height: 3; border: 1px solid #f6f6f6; background-color: #f6f6f6; border-radius: 0.06rem; padding-left: 0.3rem; padding-right: 0.3rem; width: 66.0714285714%; } .sevmap .section1 .input:focus { border-color: #00a73c; } .sevmap .section1 .input::-webkit-input-placeholder { color: #a6a6a6; } .sevmap .section1 .input:-moz-placeholder { color: #a6a6a6; } .sevmap .section1 .input::-moz-placeholder { color: #a6a6a6; } .sevmap .section1 .input:-ms-input-placeholder { color: #a6a6a6; } .sevmap .section1 .input::placeholder { color: #a6a6a6; } .sevmap .section1 .btn { line-height: 3.125; text-align: center; width: 32.1428571429%; background-color: #00a73c; color: #fff; border-radius: 0.06rem; cursor: pointer; } .sevmap .section1 .btn:hover { background-color: #4cc176; } .sevmap .section1 .select { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #fbfbfb; border-bottom: 1px solid #fbfbfb; margin-bottom: 0.3rem; -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .sevmap .section1 .select-text { color: #a4a4a4; margin-right: 0.2rem; } .sevmap .section1 .select-item { color: #666; cursor: pointer; margin-right: 0.3rem; } .sevmap .section1 .select-item:hover, .sevmap .section1 .select-item.active { color: #00a73c; } .sevmap .section1 .select-item { line-height: 1.625; padding: 0.17rem 0; } .sevmap .section1 .list { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: auto; height: 0; padding-right: 1.26rem; } .sevmap .section1 .list::-webkit-scrollbar { width: 4px; background-color: rgba(225, 225, 225, 0.3); border-radius: 1px; } .sevmap .section1 .list::-webkit-scrollbar-thumb { background-color: #00a73c; border-radius: 1px; } .sevmap .section1 .item { padding-top: 0.24rem; padding-bottom: 0.3rem; border-bottom: 1px solid #f4f4f4; } .sevmap .section1 .item:first-child { padding-top: 0; } .sevmap .section1 .item-title { line-height: 1.5555555556; margin-bottom: 0.1rem; } .sevmap .section1 .item-text { line-height: 1.625; color: #888888; margin-bottom: 0.07rem; } .sevmap .section1 .item-text img { width: 1em; display: inline-block; vertical-align: middle; margin-right: 0.16rem; } .sevmap .section1 .item-text a:hover { color: #00a73c; text-decoration: underline; } .sevmap .section1 .item-tip { line-height: 1.8666666667; border: 2px solid #000; display: inline-block; padding: 0 0.14rem; border-radius: 50px; } .sevmap .section1 .item-tip.active1 { border-color: #00a73c; color: #00a73c; } .sevmap .section1 .item-tip.active2 { border-color: #fe945f; color: #fe945f; } .sevmap .section1 .amap-icon { width: 35px !important; height: 41px !important; } .sevmap .section1 .amap-icon .wz { display: none; } .sevmap .section1 .xuanze { margin: 5px 0 12px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .sevmap .section1 .xuanze > div { width: 30%; height: 50px; } .sevmap .section1 .xuanze select { display: block; width: 100%; height: 100%; padding: 0 15px; background: #f1f1f1; border-radius: 8px; border: 1px solid #f1f1f1; cursor: pointer; } .know6 { padding-bottom: 1rem; } .know6 .img { width: 100%; max-width: 1700px; margin: 1rem auto 0; } .z_tanchuang .tbox .modal .out { background-color: transparent; background-image: url(/uploads/image/philsvg/28.svg); -o-background-size: 100% 100%; background-size: 100% 100%; } .z_tanchuang .tbox .modal .out:hover { background-color: transparent; background-image: url(/uploads/image/philsvg/28.svg); -o-background-size: 100% 100%; background-size: 100% 100%; } .my-style1 .content { position: absolute; left: 0; right: 0; top: 3.55rem; text-align: center; color: #fff; z-index: 4; } .my-style1 .content.hei{ color: #000; } .my-style1 .title { line-height: 1.2; margin-bottom: 0.16rem; } .my-style1 .text { line-height: 1.5; } .my-style1 .my-active1 { z-index: 4; } .my-style2 { padding-top: 1.2rem; padding-bottom: 0.9rem; } .my-style2 .swiper { padding-bottom: 30px; } .my-style2 .swiper-slide { border-radius: 8px; } .my-style2 .slide-content { top: 0.94rem; left: 10px; right: 10px; } .my-style3 .swiper-slide-active .slide-img{margin-top: 10px;} .my-style3 .swiper-slide-active .slide-title, .my-style3 .swiper-slide-active .slide-text, .my-style3 .swiper-slide-active .slide-img { -webkit-animation-name: fadeinup; -moz-animation-name: fadeinup; -o-animation-name: fadeinup; animation-name: fadeinup; } .my-style3 .swiper-slide-active .slide-title { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .my-style3 .swiper-slide-active .slide-text { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .my-style3 .swiper-slide-active .slide-img { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } .my-style3 .slide-content { position: absolute; left: 0; right: 0; top: 1.34rem; text-align: center; } .my-style3 .slide-content.bai{ color: #fff; } .my-style3 .slide-title, .my-style3 .slide-text { -webkit-animation-name: fadeoutdown; -moz-animation-name: fadeoutdown; -o-animation-name: fadeoutdown; animation-name: fadeoutdown; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; } .my-style3 .slide-title { line-height: 1.2222222222; margin-bottom: 0.2rem; } .my-style3 .slide-text { line-height: 1.5789473684; } .my-style3 .swiper-button-prev { left: 0.8rem; } .my-style3 .swiper-button-next { right: 0.8rem; } .my-style3 .swiper-pagination { bottom: 20px; } .my-style4 { padding-top: 1.35rem; padding-bottom: 1.2rem; } .my-style4 .title { text-align: center; line-height: 1.2222222222; margin-bottom: 0.45rem; } .my-style4 .swipers { position: relative; } .my-style4 .swiper-slide { border-radius: 8px; overflow: hidden; background-color: #f6f6f6; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .my-style4 .slide-info { width: 50%; padding: 0.8rem 0 0.75rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .my-style4 .slide-content { padding: 0 0.6rem; } .my-style4 .slide-title { line-height: 1.3125; margin-bottom: 0.2rem; } .my-style4 .slide-text { line-height: 1.5789473684; } .my-style4 .slide-ul { margin: 0 0.13rem -10px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; overflow: auto; padding-bottom: 10px; } .my-style4 .slide-ul::-webkit-scrollbar { height: 5px; } .my-style4 .slide-ul::-webkit-scrollbar-thumb { height: 5px; background-color: #00a73c; } .my-style4 .slide-ul::-webkit-scrollbar-thumb:hover { cursor: pointer; } .my-style4 .slide-li { width: 25%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; border-right: 1px solid #eeeeee; } .my-style4 .slide-li:last-child { border-right: none; } .my-style4 .slide-li-img { width: 5.7894736842em; margin: 0 auto 0.1rem; } .my-style4 .slide-li-title { line-height: 1.5789473684; text-align: center; } .my-style4 .slide-img { width: 50%; } .my-style4 .swiper-button-prev { left: -0.89rem; } .my-style4 .swiper-button-next { right: -0.89rem; } .my-style5 { padding-top: 1.14rem; padding-bottom: 1.2rem; text-align: center; overflow: hidden; } .my-style5 .title { line-height: 1.2222222222; margin-bottom: 0.1rem; } .my-style5 .text { line-height: 1.5789473684; margin-bottom: 0.35rem; } .my-style5 .swipers { width: 100%; max-width: 1920px; margin: 0 auto; position: relative; } .my-style5 .swipers .swiper-slide{ border-radius: 10px; overflow: hidden; } .my-style5 .swiper { width: 65%; max-width: 1200px; overflow: initial; } .my-style5 .slide-content { position: absolute; left: 10px; right: 10px; bottom: 0.9rem; color: #fff; } .my-style5 .slide-title { line-height: 1.3333333333; margin-bottom: 0.1rem; } .my-style5 .slide-text { line-height: 1.5263157895; margin-bottom: 0.15rem; } .my-style5 .slide-label { line-height: 1.5882352941; } .my-style5 .swiper-button-prev { left: 0.8rem; } .my-style5 .swiper-button-next { right: 0.8rem; } .my-style5 .swiper-pagination { bottom: 0.3rem; } .my-style6:hover .children { opacity: 1; -webkit-transform: translate3d(0, -1px, 0); -moz-transform: translate3d(0, -1px, 0); transform: translate3d(0, -1px, 0); pointer-events: auto; } .my-style6:hover dt s { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .my-style6 .children { position: absolute; left: -0.2rem; top: 100%; padding-top: 10px; opacity: 0; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); pointer-events: none; z-index: 5; } .my-style6 .children-container { background-color: #fff; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.06); border-radius: 8px; } .my-style6 .children-link { padding: 0.19rem 0.17rem 0.19rem 0.2rem; border-bottom: 1px solid #f2f2f2; } .my-style6 .children-link:last-child { border-bottom: none; } .my-style6 .children-link img { max-width: initial; width: 7.3333333333em; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .my-style7 .modal-main { width: 11.6rem; background-color: #fff; border-radius: 0.16rem; padding: 0.4rem 0.6rem 0.3rem; } .my-style7 .title { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.4rem; } .my-style7 .close { width: 1em; cursor: pointer; } .my-style7 .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .my-style7 .item .item { margin-top: 0.5rem; } .my-style7 .item-title { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.4rem; } .my-style7 .item-title p { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 0.11rem; } .my-style7 .item-title s { -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 1px; background-color: #f2f2f2; } .my-style7 .item-ul { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .my-style7 .item-li { width: 25%; padding-right: 10px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; } .my-style7 .item-li:hover .item-info-title { color: #00a73c; } .my-style7 .item-icon { width: 1.8888888889em; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 0.19rem; } .my-style7 .item-info-title { margin-bottom: 0.05rem; } .my-style7 .item-info-text { color: #555; } .my-style8 { position: relative; } .my-style8 .children { width: 15em; position: absolute; right: 0; bottom: 100%; padding-bottom: 0.2rem; opacity: 0; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); pointer-events: none; } .my-style8 .children-container { background-color: #fff; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.06); border-radius: 8px; } .my-style8 .children-item { padding: 0.3rem 0.28rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .my-style8 .children-item .children-item{ border-top: 1px solid #f2f2f2;; } .my-style8 .children-icon { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 0.1rem; } .my-style8 .children-text { line-height: 1.625; margin-top: 0.13rem; margin-bottom: 0.09rem; } .my-style8 .children-text2 { line-height: 1.625; color: #00a73c; } .my-style8 .children-text2:hover { text-decoration: underline; } .my-style8 .children-ul { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 0.21rem; } .my-style8 .children-li { width: 2.3em; margin-right: 0.2rem; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .my-video-img { position: relative; height: 100vh; } .my-video-img .play-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); display: none; } .my-video-img .video { position: absolute; top: 0; left: 0; } .my-video-img .video-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.15; z-index: 2; } .my-video-img img[] { display: none; } .my-beer-slider .beer-handle { background-image: url(/uploads/image/philsvg/27-1.svg); -o-background-size: 100% 100%; background-size: 100% 100%; } .video-wow { position: absolute; top: 20vh; left: 0; right: 0; } .my-content { position: absolute; left: 0; right: 0; top: 1.34rem; color: #fff; text-align: center; z-index: 4; } .my-content.status1 { color: #222222; } .my-content .title { line-height: 1.2222222222; margin-bottom: 0.2rem; } .my-content .text { line-height: 1.5789473684; } .innovation .section2 { height: 180vh; position: relative; } .innovation .section2 .container { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; } .innovation .section2 .video { position: relative; } .innovation .section2 .video-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.15; z-index: 2; } .innovation .section2 .content { position: absolute; left: 0; right: 0; top: 1.34rem; color: #fff; text-align: center; z-index: 4; } .innovation .section2 .title { line-height: 1.2; margin-bottom: 0.1rem; } .innovation .section2 .text { line-height: 1.3; margin-bottom: 0.1rem; } .innovation .section2 .list { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.3; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.1rem; } .innovation .section2 .item { -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } .innovation .section2 .item:first-child .item-content { -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .innovation .section2 .item-content { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .innovation .section2 .item-line { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0.5rem; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .innovation .section2 .item-line s { width: 1px; height: 7.8947368421em; background-color: rgba(240, 243, 250, 0.15); margin-bottom: 0.05rem; } .innovation .section2 .item-line img { width: 0.3684210526em; } .innovation .section2 .item-line img img { margin-top: 2px; } .innovation .section2 .text2-container { overflow: hidden; --color: rgba(115, 115, 115, 0); -webkit-mask-image: -webkit-linear-gradient(top, #d9d9d9, var(--color)); mask-image: linear-gradient(to bottom, #d9d9d9, var(--color)); } .innovation .section2 .text2 { line-height: 1.5789473684; } .innovation .section5 { position: relative; } .innovation .section5 .content { position: absolute; left: 0; right: 0; top: 1.14rem; text-align: center; } .innovation .section5 .title { line-height: 1.2222222222; margin-bottom: 0.1rem; } .innovation .section5 .text { line-height: 1.5789473684; } .innovation2 .section3, .innovation2 .section5 { position: relative; } .innovation3 .section3 { position: relative; } .innovation4 .section2 { position: relative; } .innovation4 .section4 .slide-content { color: #fff; } .innovation5 .section3 { border-top: 1px solid #fcfcfc; padding-top: 1.15rem; } .innovation5 .section3 .title { line-height: 1.2222222222; margin-bottom: 0.45rem; text-align: center; } .innovation5 .section3 .slide-content { top: 1.2rem; color: #fff; } .innovation5 .section4 { padding-top: 1.15rem; padding-bottom: 1rem; } .innovation5 .section4 .title { line-height: 1.2222222222; margin-bottom: 0.45rem; text-align: center; } .innovation5 .section4 .swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .innovation5 .section4 .swiper-wrapper::after { content: ""; position: relative; height: 0; width: 31.6455696203%; } .innovation5 .section4 .swiper-slide { width: 31.6455696203%; border-radius: 8px; margin-bottom: 0.5rem; } .innovation5 .section4 .slide-mask { position: absolute; top: 2.53rem; left: 0; right: 0; bottom: 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); z-index: 2; } .innovation5 .section4 .slide-content { position: absolute; left: 10px; right: 10px; bottom: 0.43rem; z-index: 3; color: #fff; text-align: center; } .innovation5 .section4 .slide-title { line-height: 1.4166666667; margin-bottom: 0.04rem; } .innovation5 .section4 .slide-text { line-height: 1.6666666667; } .innovation5 .section5 { background-color: #f6f6f6; } .innovation5 .section5 .swiper-slide { background-color: #fff; } .innovation5 .section6 .title { margin-bottom: 0.45rem; } .innovation5 .section6 .slide-content { color: #222; bottom: 0.53rem; } .innovation5 .section6 .slide-title { line-height: 1.3125; margin-bottom: 0.08rem; } .innovation5 .section6 .slide-text { line-height: 1.6666666667; margin-bottom: 0; } .honor { padding-top: 86px; background-color: #f6f6f6; } .honor .section1 { padding-top: 1rem; padding-bottom: 1rem; } .honor .section1 .box { max-width: 1360px; width: 70%; } .honor .section1 .title { line-height: 1.25; margin-bottom: 0.45rem; text-align: center; } .honor .section1 .list-container { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .honor .section1 .item { width: 22.7941176471%; padding: 0.1rem 0.1rem 0.17rem; background-color: #ffffff; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.06); border-radius: 4px; margin-bottom: 0.4rem; } .honor .section1 .item-img { margin-bottom: 0.15rem; } .honor .section1 .item-title { line-height: 1.5263157895; color: #444; margin-bottom: 0.03rem; padding: 0 0.1rem; } .honor .section1 .item-text { line-height: 1.625; color: #666; padding: 0 0.1rem; } .mob_shouji{display: none;} @media (max-width: 1200px) { .honor { padding-top: 0; } } @media (max-width: 1050px) { .z_tanchuang .tbox .modal { width: 90%; } .z_tanchuang .tbox .modal .out { left: 50%; right: auto; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); top: auto; bottom: -72px; width: 32px; height: 32px; } .z_tanchuang .tbox .modal .out:hover { -webkit-transform: translate3d(-50%, 0, 0) rotate(180deg); -moz-transform: translate3d(-50%, 0, 0) rotate(180deg); transform: translate3d(-50%, 0, 0) rotate(180deg); } } @media (min-width: 961px) { .products .section2 .item-li:hover { color: #00a73c; border-color: #00a73c; } .products .section2 .item3-li:hover { border-color: #00a73c; } .products .section2 .item3-li:hover img { opacity: 1; } .products3 .section3 .circle1, .products3 .section3 .circle2 { -webkit-transition: -webkit-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); transition: -webkit-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: -o-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: transform 1s cubic-bezier(0.43, 0.195, 0.02, 1), -moz-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); transition: transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); transition: transform 1s cubic-bezier(0.43, 0.195, 0.02, 1), -webkit-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1), -moz-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1), -o-transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); } .products3 .section3 .circle1 { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); } .products3 .section3 .circle2 { -webkit-transform: translate3d(-50%, -50%, 0) scale(0.1); -moz-transform: translate3d(-50%, -50%, 0) scale(0.1); transform: translate3d(-50%, -50%, 0) scale(0.1); } .products3 .section3 .item, .products3 .section3 .item2 { -webkit-transition: 1s all 1s cubic-bezier(0.43, 0.195, 0.02, 1); -o-transition: 1s all 1s cubic-bezier(0.43, 0.195, 0.02, 1); -moz-transition: 1s all 1s cubic-bezier(0.43, 0.195, 0.02, 1); transition: 1s all 1s cubic-bezier(0.43, 0.195, 0.02, 1); } .products3 .section3 .item:nth-child(1), .products3 .section3 .item2:nth-child(1) { opacity: 0; -webkit-transform: translate3d(30px, 30px, 0); -moz-transform: translate3d(30px, 30px, 0); transform: translate3d(30px, 30px, 0); } .products3 .section3 .item:nth-child(2), .products3 .section3 .item2:nth-child(2) { opacity: 0; -webkit-transform: translate3d(-30px, 30px, 0); -moz-transform: translate3d(-30px, 30px, 0); transform: translate3d(-30px, 30px, 0); } .products3 .section3 .item:nth-child(3), .products3 .section3 .item2:nth-child(3) { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); -moz-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } .products3 .section3 .item:nth-child(4), .products3 .section3 .item2:nth-child(4) { opacity: 0; -webkit-transform: translate3d(-30px, -30px, 0); -moz-transform: translate3d(-30px, -30px, 0); transform: translate3d(-30px, -30px, 0); } .products3 .section3 .item:nth-child(5), .products3 .section3 .item2:nth-child(5) { opacity: 0; -webkit-transform: translate3d(30px, -30px, 0); -moz-transform: translate3d(30px, -30px, 0); transform: translate3d(30px, -30px, 0); } .products3 .section3 .item:nth-child(6), .products3 .section3 .item2:nth-child(6) { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); -moz-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } .show960 { display: none; } } @media (min-width: 960px) { .my-style8:hover .children { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: auto; } } @media (max-width: 960px) { .hide960 { display: none; } .show960 { display: block; } .padding50 { padding-top: 50px !important; padding-bottom: 50px !important; } .my-nav { display: none; } .banner .pimg { display: none; } .banner .mimg { display: block; } .my-list3 .item3 { width: 49%; } .my-modal .modal-main { width: 100%; } .my-modal .modal-close { right: 0; top: -33px; } .my-list .item { width: 100%; } .products .my-nav { display: block; margin-top: 0; } .products .my-nav .box { -webkit-justify-content: flex-end; justify-content: flex-end; } .products .my-nav .nav-item { display: none; } .products .my-nav .btn { position: relative; top: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin-top: 20px; background-color: rgba(246, 246, 246, 0.92); } .products .section1 .item3 { width: 250px; } .my-list3 .swiper-wrapper { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .products .section2 .item-li { width: auto; padding: 0.12rem 0.18rem; } .products .section2 .content2 { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products .section2 .list3 { width: 100%; margin-top: 20px; } .results .section1 .content { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .results .section1 .left { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .results .section1 .text { margin-bottom: 10px; } .results .section1 .info { margin-bottom: 10px; } .products2 .banner .content { top: 0; padding-top: 40px; } .products2 .section1 .swiper-slide { width: 100%; border-radius: 0; } .products2 .section3 .list { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products2 .section3 .item { width: 100%; margin-bottom: 20px; } .modal-form .form-item { width: 100%; } .products3 .banner .content { top: 0; bottom: 0; padding-top: 0; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .products3 .section1 .slide-info { bottom: 8px; } .products3 .section2 .swiper-slide { width: 100%; } .products3 .section2 .slide-info { bottom: 18px; } .products3 .section3 .content { position: relative; } .products3 .section3 .container { font-size: 10px; left: 50%; margin-left: 0; margin-right: 0; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); margin: 20px 0 30px; } .products3 .section3 .circle1 { width: 28em; height: 28em; } .products3 .section3 .circle2 { width: 19em; height: 19em; } .products3 .section3 .item2:nth-child(3) .item2-title { padding-left: 3px; white-space: initial; width: 5em; } .products3 .section3 .item2:nth-child(6) .item2-title { padding-right: 3px; white-space: initial; width: 5em; } .compare .section1 .container { overflow: auto; padding-bottom: 10px; } .compare .section1 .container::-webkit-scrollbar { width: 0; height: 3px; } .compare .section1 .container::-webkit-scrollbar-thumb { height: 3px; background-color: #00a73c; } .compare .section1 .select, .compare .section1 .bottom { display: block; margin-top: 20px; } .compare .section1 .select .info { padding: 20px 0; } .compare .section1 .ul,.compare .section1 .ul2,.compare .section2 .ul{width: 100%;} .compare .section1 .li:nth-child(n 3),.compare .section1 .li2:nth-child(n 3),.compare .section2 .li:nth-child(n 3){display: none;} .compare .section1 .ul2{padding: 20px 0 0;} .compare .section2 .list2-container { } .compare .section2 .list2-container::-webkit-scrollbar { height: 3px; } .compare .section2 .list2-container::-webkit-scrollbar-thumb { height: 3px; background-color: #00a73c; } .compare .section2 .list2 { } .compare .section2 .item2-title{font-weight: bold;} .compare .section2 .item2{display: block;padding: 20px 0 10px;} .compare .section2 .li{width: 50%;text-align: center;line-height: 1.6;padding: 10px 0;} .modal-compare .modal-main { padding: 15px; } .modal-compare .select { width: 30%; } .modal-compare .item { width: 100%; } .service .banner .content { top: 0; padding-top: 80px; } .service .section1 .content { padding: 20px; -webkit-flex-direction: column-reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .service .section1 .img { width: 100%; margin-left: 0; } .service .section1 .info { width: 100%; margin-top: 20px; } .service .section1 .swiper-slide { width: 220px; } .service .section2 .container { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .service .section2 .left { width: 100%; padding-right: 0; padding-top: 0; } .service .section2 .swipers { width: 200px; margin: 0 auto; } .classroom .section1 .item { padding: 10px 15px; } .classroom .section1 .item-title { padding-left: 10px; padding-right: 0; } .classroom .section1 .item-icon2 { display: none; } .contact .banner .content { top: 0; bottom: 0; padding-top: 0; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .contact .section1 .item { width: 100%; } .mall .section1 .list { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mall .section1 .item { width: 49%; margin-right: 0; margin-bottom: 10px; } .investor .section1 .content { padding: 20px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .investor .section1 .text { margin-bottom: 20px; } .investor .section2 .ul { -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .investor .section2 .li { width: 49%; margin-right: 0; margin-bottom: 10px; } .investor .section2 .ul2 { padding: 5px 10px; } .investor .section3 .content { height: auto; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .investor .section3 .info { width: 100%; padding: 15px; } .investor .section3 .img { width: 100%; } .news .section1 .item { width: 100%; } .life .section1 .item { width: 100%; } .sevmap .section1 { height: auto; } .sevmap .section1 .container { position: relative; width: 100%; left: auto; top: auto; bottom: auto; height: 500px; border-radius: 0; } .sevmap .section1 .map { height: 400px; } .service .section1 .swiper { } .my-video-img { height: 144vw; } .my-style1 .content { top: 30px; } .my-style2 .slide-content { top: 15px; } .my-style3 .slide-content { top: 60px; } .my-style3 .swiper-button { display: none; } .my-style4 .swiper { padding-bottom: 20px; } .my-style4 .swiper-slide { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: column-reverse; } .my-style4 .slide-info, .my-style4 .slide-img { width: 100%; } .my-style4 .slide-info { padding: 20px 0; } .my-style4 .slide-text { margin-bottom: 20px; } .my-style4 .slide-li { } .my-style4 .swiper-button { display: none; } .my-style5 .swiper { width: 100%; } .my-style5 .slide-content { bottom: 60px; padding: 0 5%; } .my-style5 .swiper-button { display: none; } .my-style7 .modal-main { padding: 20px; } .my-style7 .item-li { width: 50%; } .my-beer-slider .beer-handle { width: 35px; height: 35px; } .innovation .section2 { height: auto; } .innovation .section2 .content { top: 20px; } .innovation .section2 .text2-container { -webkit-mask-image: initial; mask-image: initial; } .innovation .section2 .play-icon { position: static; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin: 20px auto 0; } .innovation .section5 .content { top: 0; position: relative; margin-bottom: 15px; } .innovation2 .section3 .my-content { position: static; color: #222; margin: 30px 0; } .innovation2 .section5 .my-content { position: static; color: #222; margin-bottom: 30px; } .innovation3 .section2 .my-content { top: 30px; } .innovation3 .section3 .my-content { position: static; color: #222; margin: 30px 0; } .innovation4 .section2 .my-content { position: static; color: #222; margin: 30px 0; } .innovation4 .section5 .my-content { top: 30px; } .innovation5 .section4 .swiper-wrapper { -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .innovation5 .section4 .swiper-slide { width: 100%; } .honor .section1 .item { width: 49%; margin-bottom: 10px; } .investor .section2{padding: 0 0 50px!important;} .investor .section2 .ul{margin-bottom:0;} .investor .section3{padding-top: 0 !important;} .news .section1 .select{flex-wrap:nowrap;overflow:auto;justify-content:flex-start;} .products .section1 .my-list3{overflow:visible;} .products .section1{overflow: hidden;} .products .section2 .top{padding:0 5% 25px;} .products .section2 .list{padding: 20px 5%;} .products3 .section1 .box{width:100% !important;} .products3 .section1 .swiper-slide{border-radius:0;} .products3 .section2 .box,.products2 .section1 .box{width:100% !important;} .products3 .section2 .box > p{padding:0 5%;} .products3 .section2 .swiper-slide{border-radius:0;} .products3 .section3 .item2-title{display:none;} .products3 .section3 .item2{display: none;} .products3 .section3 .line2{display: none;} .products3 .section3 .line1{display:none;} .innovation .section1 {display: none;} .innovation .section2 {display: none;} .innovation .section3 {display: none;} .innovation .section4 {display: none;} .innovation .section5 {display: none;} .innovation2 .section1 {display: none;} .innovation2 .section2 {display: none;} .innovation2 .section3 {display: none;} .innovation2 .section4 {display: none;} .innovation2 .section5 {display: none;} .innovation3 .section1 {display: none;} .innovation3 .section2 {display: none;} .innovation3 .section3 {display: none;} .innovation3 .section4 {display: none;} .innovation3 .section5 {display: none;} .innovation4 .section1 {display: none;} .innovation4 .section2 {display: none;} .innovation4 .section3 {display: none;} .innovation4 .section4 {display: none;} .innovation4 .section5 {display: none;} .innovation5 .section1 {display: none;} .innovation5 .section2 {display: none;} .innovation5 .section3 {display: none;} .innovation5 .section4 {display: none;} .innovation5 .section5 {display: none;} .innovation5 .section6 {display: none;} .mob_shouji{display: block !important;} .section1m{position: relative;overflow: hidden;} .section1m img{width: 100%;} .section1m video{position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;object-fit: cover;} .section1m .txt{width: 100%;position: absolute;top: 0;left: 0;z-index: 3;color: #fff;text-align: center;line-height: 1.5;padding-top: 100px;height: 100%;background: rgba(0, 0, 0, 0.15);} .section1m.bg0 .txt{background: rgba(0, 0, 0, 0);} .section1m .txt .tt{font-size: 28px;} .section1m .txt .tc{margin: 10px 0 15px;font-size: 14px;} .section1m .txt .bofang{width: 50px;height: 50px; margin: 0 auto; border-radius: 50%;overflow: hidden;} .section1m .txt .bofang s{display: block;width: 100%;height: 100%;background: url(/uploads/image/philsvg/play-icon2.svg) center no-repeat;background-size: cover;} .section1m .my-active1{z-index: 4;} .section2m .txt{padding-top: 50px;} .section2m .txt .tt{font-size: 24px;} .section2m .txt .tc{font-size: 13px;line-height: 1.5;} .section2m .txt .tc .p1{padding: 10px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.5);} .section2m .txt .tc .p2{padding: 10px 0;border-bottom: 1px solid #fff;opacity: 0.5;} .section2m .txt .tc .p3{padding: 10px 0;} .my-style3 .slide-title{font-size: 24px;} .my-style3 .slide-text{font-size: 13px;} .my-style5 .title{font-size: 24px;} .my-style5 .text{font-size: 13px;margin-bottom: 30px;} .my-style5 .swipers .swiper-slide{border-radius: 0px;} .my-style5 .slide-title{font-size: 24px;} .my-style5 .slide-text,.my-style5 .slide-label{font-size: 13px;} .section5m .txt{padding-top: 50px;color: #000;background: rgba(0, 0, 0, 0);} .inn2_section1m{padding: 30px 5% 1px;} .inn2_section1m .ul1{} .inn2_section1m .ul1 li{position: relative;border-radius: 10px;overflow: hidden;color: #fff;line-height: 1.5;margin-bottom: 20px;} .inn2_section1m .ul1 li .txt{width: 100%;position: absolute;top: 0;left: 0;z-index: 2;text-align: center;padding: 30px 5%;font-size: 13px;} .inn2_section1m .ul1 li .txt .ltt{font-size: 24px;margin-bottom: 10px;} .my-style4 .title{font-size: 24px;} .my-style4 .slide-title{font-size: 20px;margin-bottom: 5px;} .my-style4 .slide-text{font-size: 13px;} .my-style4 .slide-ul{margin: 0;width: 100%;justify-content: center;} .my-style4 .slide-li{padding: 0 10px;} .my-style4 .slide-li-title{font-size: 12px;} .my-style4 .slide-content{padding: 0 10px;} .my-style4{overflow: hidden;} .my-style4 .swiper{overflow: visible;} .innovation5 .section3{border-top: 1px solid #f5f5f5;} .innovation5 .section3 .title{font-size: 24px;} .innovation5 .section4 .title{font-size: 24px;} .innovation5 .section4 .slide-title{font-size: 18px;} .innovation5 .section4{overflow: hidden;} .innovation5 .section4 .swiper{overflow: visible;width: 90%;} .innovation5 .section6{padding-bottom: 0 !important;} .innovation5 .section6 .slide-content{bottom: 50px;} .my-style8 .children {width: 100%;position: fixed;right: 0;bottom: 0;padding-bottom: 0;z-index: 9;} .my-style8 .children-container{border-radius:8px 8px 0 0;} .my-style8 .children-item{padding:40px 5% 20px;} .my-style8 .children-item:last-child{padding-top:20px;} .my-style8 .children-text{margin:10px 0;} .my-style8 .children-ul{padding-top:5px;} .my-style8 .out{ position: absolute; top: 10px; right: 5%; width: 30px; height: 30px; background: url(/uploads/image/phisvg/out.svg) center no-repeat; background-size: 20px; } .my-style8.act .children{ opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: auto; } .my-style8 .children-li{ width: 50px;margin-right:15px;} } @media (max-width: 500px) { .my-list3 .item3 { width: 100%; } } @-webkit-keyframes ani1 { 0% { top: 0%; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { top: 100%; -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } } @-moz-keyframes ani1 { 0% { top: 0%; -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { top: 100%; -moz-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } } @-o-keyframes ani1 { 0% { top: 0%; transform: translate3d(0, -100%, 0); } 100% { top: 100%; transform: translate3d(0, 0%, 0); } } @keyframes ani1 { 0% { top: 0%; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { top: 100%; -webkit-transform: translate3d(0, 0%, 0); -moz-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } } @-webkit-keyframes selectin { 0% { opacity: 0.3; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } } @-moz-keyframes selectin { 0% { opacity: 0.3; -moz-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { opacity: 1; -moz-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } } @-o-keyframes selectin { 0% { opacity: 0.3; transform: translate3d(0, 30px, 0); } 100% { opacity: 1; transform: translate3d(0, 15px, 0); } } @keyframes selectin { 0% { opacity: 0.3; -webkit-transform: translate3d(0, 30px, 0); -moz-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 15px, 0); -moz-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } }