/* Theme Name: kuaqiu Version: 1.0 Description: 安徽领聚数字作为Google中国区核心合作伙伴,拥有安徽省唯一的一家Google出海体验中心,为安徽本土化外贸企业出海提供一站式服务——网站搭建,谷歌SEO优化,谷歌竞价,谷歌SNS社媒营销等。 Author: 版权所有：安徽领聚 */ @charset "utf-8"; .wrap { width: 58.3%; margin: 0 auto } .wrap_top { width: 72.9%; margin: 0 auto } html { scroll-behavior: smooth } .abou_main{ max-width: 100%; overflow: hidden; } table{ min-width: 580px; } .far{ font-family: "Font Awesome 5 Pro" !important; } @media screen and (max-width:1600px) { .wrap { width: 65% } .wrap_top {width: 88%;} } @media screen and (max-width:1440px) { .wrap { width: 78% } .wrap_top {width: 90%;} } @media screen and (max-width:1366px) { .wrap_top {width: 96%;} } @media screen and (max-width:1200px) { .wrap { width: 88% } } @media screen and (max-width:1024px) { .wrap { width: 94% } .wrap_top { position: initial; } } @font-face { font-family: 'ops'; src: url('static/webfonts/OpenSans-Regular.ttf') format("truetype"); font-weight: normal; } @font-face { font-family: 'ops'; src: url('static/webfonts/OpenSans-ExtraBold.ttf') format("truetype"); font-weight: bold; } @font-face { font-family: 'ops'; src: url('static/webfonts/OpenSans-ExtraBoldItalic.ttf') format("truetype"); font-style: italic; } :root { --i_color: #006d2c; /* 全局颜色 */ --i_color2: #22B66F; --i_color3: #063501; /* 副颜色 */ --header_height: 1.07rem; /* 头部高度 */ --border_color: rgba(0, 0, 0, .1); /* 默认边框颜色 */ --f_menu_height: 50px; /* 移动端底部菜单 */ } @media screen and (max-width:1024px) { :root, header { --header_height: .6rem; } } @media screen and (max-width:768px) { :root { --border_color: rgba(0, 0, 0, .06) } } /* header */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 2014; background-color: white; } /* header::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--border_color); z-index: 2014; } */ .top_cont { position: relative; z-index: 2013; } .top { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; position: relative; } /* .TopHeader .top_cont { background: #222; } */ @media screen and (max-width:1024px) { header { top: 0; top: 0; width: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, .1); } header {border-radius:0} /* .top_cont { background: #333 !important; } */ .top_search_ico::after {height: 0rem !important;} } /* logo */ .logo { display: -webkit-flex; display: flex; align-items: center; height: var(--header_height); } .logo a { display: -webkit-flex; display: flex; align-items: center; height: 97%; } .logo img { max-height: 100%; } @media screen and (max-width:1440px) { .logo a { height: 60%; } } @media screen and (max-width:1024px) { .logo a { height: 70%; } } /* 导航 */ @media screen and (min-width:1025px) { .i_nav { margin-left: auto; display: -webkit-flex; display: flex; flex-wrap: nowrap; z-index: 2014; } .i_nav>li { position: relative; margin: 0 .26rem; } .i_nav>li>a { display: block; font-size: .2rem; color: #333; line-height: var(--header_height); white-space: nowrap; -webkit-border-radius: .08rem; border-radius: .08rem; text-transform: capitalize; } .i_nav>.current-menu-item>a, .i_nav>.current-category-ancestor>a, .i_nav>.current-post-ancestor>a, .i_nav>.current-menu-ancestor>a, .i_nav>.current-menu-parent>a, .i_nav>li:hover>a, .i_nav .curr>a { color: var(--i_color) !important; } .i_nav .sub-menu { display: none; position: absolute; border-top: 2px solid var(--i_color); background: rgb(255 255 255 / 100%); min-width: 1.6rem; overflow: hidden; } .i_nav .sub-menu li { position: relative; } .i_nav .sub-menu li::before, .i_nav .sub-menu li::after { content: ''; position: absolute; bottom: 0; height: 1px; } .i_nav .sub-menu li::before { left: 0; width: 100%; background: rgb(0 0 0 / 8%); } .i_nav .sub-menu li::after { right: 0; width: 0; background: var(--i_color); } .i_nav .sub-menu a { display: block; padding: 0 .8rem 0 .2rem; font-size: 0.15rem; color: #444; line-height: 0.44rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; left: 0; } .i_nav .sub-menu a::before { content: "\f324"; font-family: "Font Awesome 5 Pro"; font-weight: 300; position: absolute; top: 50%; transform: translate(0, -50%); left: -.16rem; font-size: 0.14rem; color: var(--i_color); } .i_nav .sub-menu li:hover::after { right: initial; left: 0; width: 100%; } .i_nav .sub-menu li:hover a { left: .16rem; } .i_nav .sub-menu li:hover a { color: var(--i_color); } .i_nav .sub-menu li:hover a::before { left: 0; } .i_nav .sub-menu li, .i_nav .sub-menu li::after, .i_nav .sub-menu a, .i_nav .sub-menu a::before { -webkit-transition: all .5s ease; transition: all .5s ease } /* .i_nav li:nth-child(3) a{ box-sizing: border-box; padding-right: 0.24rem; position: relative; } .i_nav li:nth-child(3) a::after{ content: ''; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 0.12rem; height: 0.08rem; background: url('static/imgs/xia.png') center no-repeat; background-size: 100% 100%; } */ } @media screen and (max-width:1440px) { .i_nav>li { margin: 0 .2rem; } } @media screen and (max-width:1366px) { .i_nav>li { margin: 0 .16rem; } .i_nav>li>a { font-size: 0.15rem; } } @media screen and (max-width:1200px) { .i_nav>li { margin: 0 .14rem; } .i_nav>li>a { font-size: 0.14rem; } } @media screen and (max-width:1024px) { .i_nav { display: none; position: fixed; top: var(--header_height); left: 0; width: 100%; width: 100vw; max-height: calc(100vh - var(--header_height)); background: #FFF; overflow-y: auto; z-index: 2 } /*滚动条*/ .i_nav::-webkit-scrollbar { width: 3px; height: 8px } .i_nav::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #555 } .i_nav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .i_nav>li { margin: 0 0 !important; border-bottom: 1px solid var(--border_color); position: relative } .i_nav>.menu-item-has-children i { display: block; position: absolute; top: 0; right: 0; width: .44rem; height: .44rem; background: #F1F1F1; } .i_nav>.menu-item-has-children i::before { content: '\f107'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.26rem; color: #222; } .i_nav>.menu-item-has-children i.on::before { content: '\f106'; } .i_nav>li>a { padding: 0 .2rem; font-size: .15rem; color: #222; line-height: .44rem; text-transform: uppercase; } .i_nav>li>.sub-menu { display: none } .i_nav>li>.sub-menu li { position: relative; } .i_nav .sub-menu a { padding: 0 .4rem; font-size: .14rem; color: #555; line-height: .4rem; position: relative } .i_nav .sub-menu li:not(:last-child) { border-bottom: 1px solid var(--border_color) } .i_nav>li>.sub-menu b { position: absolute; top: 0; right: 0; width: .4rem; height: .4rem; background: url(static/imgs/public/arrow_down_hollow_hei.svg) no-repeat center; background-size: .16rem; } .i_nav>li>.sub-menu b.on { background: url(static/imgs/public/arrow_up_hollow_hei.svg) no-repeat center; background-size: .16rem; } .i_nav .sub-menu .sub-menu { display: none; } .i_nav .sub-menu .sub-menu a { padding: 0 .6rem; font-size: .13rem; color: #888; line-height: .36rem; position: relative; } .i_nav a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } } @media screen and (max-width:768px) {} @media screen and (max-width:560px) {} /* 移动端导航按钮 */ .nav_menu { /* position: absolute; right: 0; top: 50%; transform: translateY(-50%); */ position: relative; width: 22px; height: 16px; display: none; cursor: pointer } .nav_menu i { display: block; width: 100%; height: 3px; position: absolute; top: 50%; margin-top: -2px; background: #222; border-radius: .1rem; transition: 0.5s } .nav_menu::before, .nav_menu::after { content: ""; width: 100%; height: 3px; background: #222; position: absolute; left: 0; border-radius: .1rem; transition: 0.5s } .nav_menu::before { top: 0; } .nav_menu::after { bottom: 0; } .nav_menu.on i { opacity: 0 } .nav_menu.on::before { transform: rotate(45deg); top: 50%; margin-top: -2px } .nav_menu.on::after { transform: rotate(-45deg); top: 50%; margin-top: -2px } @media screen and (max-width:1024px) { .nav_menu { display: block !important } } .top_r { --size: .24rem } .top_r { margin-left: 0.3rem; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; height: var(--header_height) } .top_search_ico { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; height: var(--header_height); margin-right: 0.3rem; position: relative; } .top_search_ico::after{ content: ''; position: absolute; top: 50%; right: -0.15rem; transform: translate(0,-50%); width: 0.01rem; height: 0.3rem; background-color: #D8D8D8; } .top_search_ico i { font-size: var(--size); cursor: pointer; } .top_search_ico.on i { color: var(--i_color); } .top_language { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; height: var(--header_height); position: relative; } .top_language>i { font-size: var(--size); cursor: pointer; } .top_language.on>i { color: var(--i_color); } .top_language_i{ display: flex; display: -webkit-flex; align-items: center; } .top_language_i img{ width: 0.22rem; } .top_language_i p{ font-size: 0.16rem; font-weight: bold; color: var(--i_color); margin-left: 0.05rem; box-sizing: border-box; padding-right: 0.1rem; position: relative; } .top_language_i p::after{ content: ''; position: absolute; top: calc(50% + 0.025rem); right: 0; transform: translate(0,-50%); border-top: 0.05rem solid #6a6a6a; border-bottom: 0.05rem solid transparent; border-left: 0.03rem solid transparent; border-right: 0.03rem solid transparent; } .top_language_list { visibility: hidden; opacity: 0; position: absolute; top: calc(var(--header_height) - .2rem); right: 0; z-index: 2; -webkit-transition: all .3s ease; transition: all .3s ease } .top_language_list.on { visibility: visible; opacity: 1; top: var(--header_height); box-shadow: .04rem .06rem .1rem rgb(0 0 0 / 10%); } .top_language_list ul { overflow: hidden; } .top_language_list li { background: #FFF; } .top_language_list a>span { display: block; padding: 0 14px; min-width: 100px; overflow: hidden } .top_language_list img, .top_language_list .trp-ls-language-name { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: .12rem; color: #666; line-height: .3rem } .top_language_list li:hover { background: var(--i_color) } .top_language_list li:hover .trp-ls-language-name { color: #FFF; } .top_language, .top_language>i { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } @media screen and (max-width:1024px) { .top_language { margin: 0 .2rem; } } @media screen and (max-width:768px) {} @media screen and (max-width:560px) {} header, .top_cont, .logo, .logo img, .i_nav>li, .i_nav>li>a, .top_r { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease } /* search main */ .top_search { --search_height: .38rem } .top_search { position: fixed; top: -1rem; left: 0; width: 100%; padding: .16rem 0; background: #FFF; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 6; } .top_search.on { top: var(--header_height); box-shadow: 0 0.06rem 0.1rem rgb(0 0 0 / 8%); } .top_search form { width: 80%; margin: 0 auto; max-width: 5rem; display: -webkit-flex; display: flex; flex-wrap: wrap; box-sizing: border-box; border: 1px solid var(--i_color); overflow: hidden; } .top_search_ipt { width: calc(100% - var(--search_height)); height: var(--search_height); box-sizing: border-box; padding: 0 0 0 .12rem; } .top_search_btn { font-size: 0; width: calc(var(--search_height)); height: var(--search_height); background: var(--i_color) url(static/imgs/search.svg) no-repeat center; background-size: .2rem; cursor: pointer; } @media screen and (max-width:1366px) { .top_r { margin-left: 0.5rem; } .top_search_ico { margin-right: 0.3rem; } } @media screen and (max-width:1200px) {} @media screen and (max-width:1024px) { .top_r { margin-left: auto; } .top_search_ico { margin-right: 0; } } @media screen and (max-width:768px) { .top_search { --search_height: .34rem } .top_search { padding: .12rem 0; } } @media screen and (max-width:560px) { .top_search form { width: 94%; } .top_search_btn {} } /* email_btn */ .email_btn{ background-color: var(--i_color); margin-left: 0.4rem; transition: all 0.3s ease; } .email_btn p{ font-size: 0.16rem; font-weight: bold; color: white; box-sizing: border-box; padding: 0.16rem; cursor: pointer; } .email_btn:hover{ background-color: var(--i_color2); } @media screen and (max-width:1024px) { .email_btn{ margin-left: 0rem; margin-right: 0.2rem; } } /* 导航下拉 */ /* products */ @media screen and (min-width:1025px) { .drop{ width: 100%; position: fixed; top: var(--header_height); left: 0; background-color: #fdfdfd; box-sizing: border-box; padding: 0.4rem 0; z-index: 99999999; border-radius: 0 0 0.4rem 0.4rem; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; } .drop h2{ font-size: 0.38rem; font-weight: bold; color: #333333; text-align: center; box-sizing: border-box; display: inline-block; position: relative; padding-bottom: 0.2rem; margin-bottom: 0.4rem; } .drop h2 span{ color: var(--i_color); } .drop h2::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #dedede; } .drop_ul{ display: flex; display: -webkit-flex; } .drop_ul li{ width: 22.5%; margin-right: 2.5%; } .drop_ul li:hover img{ transform:translate(-50%,-50%) scale(1.2); } .drop_ul_img{ position: relative; overflow: hidden; border-radius: 0.2rem; } .drop_ul_img::before{ content: ''; position: absolute; top: 0%; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); opacity: 0; z-index: 2; transition: all 0.3s linear; } .drop_ul li:hover .drop_ul_img::before{ opacity: 1; } .drop_ul_img::after{ content: ''; display: block; padding-bottom: 80%; } .drop_ul li img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 1.4s linear; } .drop_ul h3{ font-size: 0.2rem; line-height: 0.22rem; color: var(--i_color); font-weight: bold; text-align: center; box-sizing: border-box; padding: 0.2rem 0 0.3rem 0; } .drop_jian{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .drop_jian li{ width: 22.5%; margin-right: 2.5%; margin-bottom: 0.15rem; } .drop_jian li a{ display: flex; display: -webkit-flex; align-items: center; box-sizing: border-box; padding-left: 12%; } .drop_jian li a i{ display: block; width: 0.13rem; min-width: 0.13rem; height: 0.14rem; background: url('static/imgs/green_jian.png') center no-repeat; background-size: 100% 100%; } .drop_jian li a h4{ font-size: 0.16rem; color: #666666; font-weight: bold; margin-left: 0.09rem; transition: all 0.3s ease; } .drop_jian li a:hover i{ animation: bounce_513 1s infinite; } .drop_jian li a:hover h4{ color: var(--i_color); } .drop_btn{ margin-top: 0.3rem; } .drop_btn a{ background-color: var(--i_color); display: flex; display: -webkit-flex; justify-content: center; align-items: center; width: 2.5rem; height: 0.45rem; transition: all 0.3s ease; } .drop_btn a:hover{ background-color: var(--i_color2); } .drop_btn h5{ font-size: 0.14rem; color: white; font-weight: bold; margin-right: 0.08rem; margin-top: 0.02rem; } .drop_btn i{ display: block; display: -webkit-flex; width: 0.15rem; height: 0.15rem; background: url('static/imgs/top_brn.png') center no-repeat; background-size: 100% 100%; } @keyframes bounce_513 { 0%, 100% { transform: translateX(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateX(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @media screen and (max-width:1600px) { } @media screen and (max-width:1440px) { } @media screen and (max-width:1366px) { } @media screen and (max-width:1200px) { } } @media screen and (max-width:1024px) { .drop{display: none;} } /* -=---------------------banner--------------------------- */ /* banner */ .banner{width:100%; overflow:hidden; position:relative;margin-top: var(--header_height);} .banner .swiper-slide{height:0; overflow:hidden; padding-bottom:84.5vh; position:relative} .banner .swiper-slide a{ width: 100%; display: block; } .banner .swiper-slide a>img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover} .banner .swiper-slide video{position:absolute; left:0; top:0; width:100%; height:100%!important; object-fit:cover; z-index:2} .banner .swiper-button-prev, .banner .swiper-button-next{ position:absolute; top:50%; transform:translate(0,-50%); width:60px; height:60px; z-index:999; outline:none; cursor:pointer; -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期浏览器*/ user-select:none; -webkit-border-radius:200px; -moz-border-radius:200px; border-radius:200px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .banner .swiper-button-prev{left:-60px; background:rgba(0,0,0,.6) url(static/imgs/arrow_left_kx_bai.svg) no-repeat center; background-size:26px} .banner .swiper-button-next{right:-60px; background:rgba(0,0,0,.6) url(static/imgs/arrow_right_kx_bai.svg) no-repeat center; background-size:26px} .banner:hover .swiper-button-prev{left:4%} .banner:hover .swiper-button-next{right:4%} .banner .swiper-button-prev:hover, .banner .swiper-button-next:hover{background-color:var(--i_color)} .banner .pagination-all{ position:absolute; bottom:30px; left:50%; transform:translate(-50%,0); cursor:pointer; z-index:10; } .banner .swiper-pagination { position: relative; display: inline-block; text-align: left; } .banner .swiper-pagination-bullet { width: 70px; height: 1px; border-radius: 0; background: rgba(255, 255, 255, 0.7); opacity: 1; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .banner .swiper-pagination-bullet::after{ content: ''; width: 0%; height: 2px; background-color: var(--i_color); position: absolute; top: 50%; left: 0; transform: translate(0,-50%); transition: width 4.5s linear; opacity: 0; } .banner .swiper-pagination-bullet-active { position: relative; } .banner .swiper-pagination-bullet-active::after{ content: ''; width: 100%; opacity: 1; } .banner_svg{ width: 100%; height: 0.5rem; position: absolute; bottom: -1px; left: 0; z-index: 4; transform: rotate(180deg); } .banner_svg svg{ width: 100%; height: 100%; } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ .banner .swiper-button-prev, .banner .swiper-button-next{display:none!important} } @media screen and (max-width:767px){ .banner .swiper-slide{padding-bottom:88%} } @media screen and (max-width:560px){ .banner .pagination-all{bottom:26px} .banner .swiper-pagination-bullet{width:35px} } @media screen and (max-width:425px){ } /* banner上的文字 */ .banner1_text{ position: absolute; top: 5%; left: 3%; } .banner1_text h2{ font-size: 1.02rem; line-height: 0.99rem; color: white; font-weight: bold; font-family: 'ops'; font-style: italic; -webkit-text-stroke: 3px var(--i_color); } .banner_text2{ position: absolute; bottom: 11%; left: 3%; } .banner_text2 h2{ font-size: 1.23rem; line-height: 1.13rem; font-family: 'ops'; font-style: italic; color: white; text-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5); } .banner_text3{ position: absolute; top: 5%; right: 3%; } .banner_text3 h2{ font-size: 1.19rem; line-height: 1.13rem; color: var(--i_color); font-family: 'ops'; font-style: italic; box-sizing: border-box; -webkit-text-stroke: 4px white; } .banner_text4{ position: absolute; bottom: 11%; left: 3%; } .banner_text4 h2{ font-size: 1.13rem; line-height: 1.13rem; color: var(--i_color); font-family: 'ops'; font-style: italic; box-sizing: border-box; -webkit-text-stroke: 4px white; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ .banner1_text h2 {font-size: 0.9rem;line-height: 0.8rem;} .banner_text2 h2{font-size: 1rem;line-height: 1.13rem;} .banner_text3 h2{font-size: 1rem;line-height: 1rem;} .banner_text4 h2{font-size: 0.8rem;line-height: 0.8rem;} } @media screen and (max-width:767px){ .banner1_text h2 br{display: none;} .banner1_text h2 {font-size: 0.8rem;line-height: 0.7rem;} .banner_text2 h2 {font-size: 0.7rem;line-height: 0.9rem;} .banner_text3 h2{font-size: 0.8rem;line-height: 1rem;} .banner_text4 h2 { font-size: 0.6rem; line-height: 0.6rem; -webkit-text-stroke: 2px white; } } @media screen and (max-width:560px){ .banner1_text h2 {font-size: 0.55rem;line-height: 0.6rem;} .banner1_text h2{-webkit-text-stroke: 2px var(--i_color);} .banner_text2 h2 {font-size: 0.5rem;line-height: 0.7rem;} .banner_text3 h2{font-size: 0.6rem;line-height:0.8rem;-webkit-text-stroke: 2px white;} .banner_text4 h2 { font-size: 0.48rem; line-height: 0.48rem; -webkit-text-stroke: 1px white; } } @media screen and (max-width:425px){ .banner1_text h2 {font-size: 0.45rem;line-height: 0.6rem;} .banner1_text h2{-webkit-text-stroke: 1px var(--i_color);} .banner_text3 h2{font-size: 0.5rem;line-height:0.6rem;} .banner_text4 h2 { font-size: 0.4rem; line-height: 0.4rem; } } /* ------------------------------main------------------------ */ .home_four{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; margin-top: -0.6rem; } .home_four li{ display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; align-items: center; width: 24%; box-sizing: border-box; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); position: relative; z-index: 3; padding: 0.22rem 3%; background-color: white; } .home_four li img{ width: 0.4rem; height: 0.4rem; object-fit: contain; transition: all 0.3s ease; } .home_four li:hover img{ transform: translateY(-8px); } .home_four li h2{ font-size: 0.25rem; color: #666; font-weight: bold; margin: 0.05rem 0 0.1rem 0; } .home_four li h2 span{ } .home_four li h3{ font-size: 0.16rem; line-height: 0.16rem; color: #666; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ .home_four li {width: 49.5%;margin-bottom: 0.2rem;} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .home_four li {width: 49%;} } @media screen and (max-width:425px){ .home_four li {width: 100%;} } /* home_nine */ .home_nine{ display: flex; display: -webkit-flex; box-sizing: border-box; padding: 1rem 0; position: relative; } .home_nine_left{ width: 47.5%; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; } .home_nine_left li{ width: calc((100% - 0.2rem) / 3); position: relative; overflow: hidden; border-radius: 0.04rem; margin-bottom: 0.1rem; } .home_nine_left p{ font-size: 0.18rem; color: white; line-height: 0.3rem; font-weight: bold; text-align: center; position: absolute; width: 98%; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition-duration: 800ms; z-index: 3; } .home_nine_left li:hover p{ opacity: 1; transform:translate(-50%,-50%) scale(1); } .home_nine_left li::after{ content: ''; display: block; padding-bottom: 67%; } .home_nine_left li img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.8s ease; } .home_nine_left li:hover img{ transform: translate(-50%,-50%) scale(1.1); } .home_nine_right{ width: 52.5%; box-sizing: border-box; padding-left: 5%; } .home_nine_right h2{ font-size: 0.22rem; color: #666666; font-weight: bold; margin-top: 0.2rem; } .home_nine_right h3{ font-size: 0.31rem; color: #333333; font-weight: bold; margin: 0.2rem 0 0.4rem 0; } .home_nine_right h4{ font-size: 0.16rem; color: #999999; line-height: 0.3rem; } .home_nine_btn{ margin-top: 0.1rem; } .all_btn{ display: flex; display: -webkit-flex; align-items: center; justify-content: center; background-color: var(--i_color); width: 2.5rem; height: 0.45rem; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease; } .all_btn:hover{ background-color: var(--i_color2); } .all_btn i{ display: block; width: 0.14rem; height: 0.14rem; background: url('static/imgs/left_jian.png') center no-repeat; background-size: 100% 100%; margin-right: 0.1rem; } .all_btn p{ font-size: 0.14rem; font-weight: bold; color: white; } .home_nine_left li .span1::after{ content: ''; position: absolute; width: 25%; top: -100%; left: 0; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 1; transition: all 0.5s ease; transition-delay: 0.1s; } .home_nine_left li .span1::before{ content: ''; position: absolute; width: 25%; top: -100%; left: 25%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 1; transition: all 0.6s ease; transition-delay: 0.2s; } .home_nine_left li .span2::after{ content: ''; position: absolute; width: 25%; top: -100%; left: 50%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 1; transition: all 0.7s ease; transition-delay: 0.3s; } .home_nine_left li .span2::before{ content: ''; position: absolute; width: 25%; top: -100%; left: 75%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 1; transition: all 0.8s ease; transition-delay: 0.4s; } .home_nine_left li:hover .span1::after{ top: 0; } .home_nine_left li:hover .span1::before{ top: 0; } .home_nine_left li:hover .span2::after{ top: 0; } .home_nine_left li:hover .span2::before{ top: 0; } .nine_img{ width: 100%; height: 100%; position: relative; z-index: 4; opacity: 0; cursor: pointer; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .home_nine_right{padding-left: 4%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_nine_right{padding-left: 3%;} } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .home_nine_left {width: 100%;} .home_nine_right {width: 100%;padding-left: 0%;} .home_nine {flex-wrap: wrap;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* home_more */ .home_more{ background-color: #f9f9f9; box-sizing: border-box; padding: 1rem 0; position: relative; } .home_title{ display: flex; display: -webkit-flex; flex-direction: column; align-items: center; } .home_title h2{ font-size: 0.34rem; font-weight: bold; color: #333333; text-align: center; } .home_title img{ width: 1.12rem; margin-top: 0.18rem; } .svg_top{ position: absolute; width: 100%; height: 0.5rem; top: 0; left: 0; } .svg_top svg{ width: 100%; height: 100%; } .home_more_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; margin-top: 0.5rem; } .home_more_ul li{ width: 24%; box-sizing: border-box; box-shadow: 0 0 10px rgba(0, 0, 0, .1); } .home_more_ul li a{ width: 100%; display: block; } .home_more_img{ position: relative; width: 100%; overflow: hidden; } .home_more_img::after{ content: ''; display: block; padding-bottom: 100%; } .home_more_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; } .home_more_text{ box-sizing: border-box; padding: 0.2rem 4% 0.25rem 4%; } .home_more_text h3{ font-size: 0.22rem; color: #333333; font-weight: bold; text-align: center; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; transition: all 0.3s ease; } .home_more_text h4{ margin-top: 0.1rem; font-size: 0.16rem; line-height: 0.24rem; color: #999999; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; height: 0.96rem; } .home_more_btn{ display: flex; display: -webkit-flex; justify-content: center; background-color: var(--i_color); box-sizing: border-box; padding: 0.15rem 4%; width: 100%; transition: all 0.3s ease; } .home_more_btn h5{ font-size: 0.14rem; color: white; font-weight: bold; } .home_more_btn i{ display: block; width: 0.14rem; height: 0.14rem; background: url(static/imgs/left_jian.png) center no-repeat; background-size: 100% 100%; margin-left: 0.1rem; } .home_more_ul li:hover img{ transform: translate(-50%,-50%) scale(1.1); } .home_more_ul li:hover h3{ color: var(--i_color2); } .home_more_ul li:hover .home_more_btn{ background-color: var(--i_color2); } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .home_more_ul li {width: 49%;margin-bottom: 0.2rem;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* home_what */ .home_what{ box-sizing: border-box; padding: 1rem 0; } .home_what_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; margin-top: 0.55rem; } .home_what_ul li{ width: 32%; box-sizing: border-box; box-shadow: 0 0 10px rgba(0, 0, 0, .15); box-sizing: border-box; padding: 0.25rem 2.8%; } .home_what_ul i{ display: block; width: 0.79rem; height: 0.13rem; background: url('static/imgs/5x.png') center no-repeat; background-size: 100% 100%; } .home_what_ul p{ font-size: 0.16rem; line-height: 0.24rem; color: #999999; height: 2.16rem; overflow: auto; margin: 0.25rem 0 0.15rem 0; box-sizing: border-box; padding-right: 1%; } /*滚动条*/ .home_what_ul p::-webkit-scrollbar { width: 2px; height: 8px } .home_what_ul p::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: var(--i_color2) } .home_what_ul p::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .home_what_div1{ display: flex; display: -webkit-flex; } .home_what_div1 img{ width: 0.5rem; height: 0.5rem; border-radius: 50%; object-fit: cover; animation: spin 12s ease-in-out infinite alternate-reverse; } /* @keyframes spin{ 0%{ border-radius: 40% 60% 60% 40%/60% 30% 70% 40%; } 100% { transform: rotate(1turn); border-radius: 40% 60%; } } */ .home_what_div2{ width: calc(100% - 0.5rem); box-sizing: border-box; padding-left: 6%; display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; } .home_what_div2 h3{ font-size: 0.14rem; line-height: 0.22rem; color: #333333; font-weight: bold; } .home_what_div2 h4{ font-size: 0.14rem; color: #acacac; line-height: 0.22rem; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .home_what_ul li {width: 100%;margin-bottom: 0.2rem;} .home_what_ul p { font-size: 14px; line-height: 20px; height: 80px; } } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* home_last */ .home_news{ margin-top: 0.55rem; margin-bottom: 1rem; } /* 合作伙伴 */ .blogs_partner_box{} .blogs_partner{position:relative} .blogs_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .blogs_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .blogs_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .blogs_partner_list .img{width:100%; box-sizing:border-box; position:relative; overflow:hidden} .blogs_partner_list .img:before{content:""; display:block; padding-bottom:64%} .blogs_partner_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .blogs_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} .blogs_partner_text{ background-color: #f6f6f6; box-sizing: border-box; padding: 0.2rem 4% 0.4rem 4%; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; } .blogs_partner_text span{ display: inline-block; box-sizing: border-box; padding: 0.08rem 0.15rem; background-color: #e4e4e4; font-size: 0.16rem; font-weight: bold; color: var(--i_color); margin-bottom: 0.1rem; } .blogs_partner_text h3{ font-size: 0.2rem; line-height: 0.32rem; font-weight: bold; color: var(--i_color); text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 0.64rem; transition: all 0.3s ease; } .blogs_partner_div{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; margin: 0.1rem 0; } .blogs_partner_div i{ display: block; width: 0.2rem; height: 0.21rem; background: url('static/imgs/data.png') center no-repeat; background-size: 100% 100%; } .blogs_partner_div h4{ font-size: 12px; color: #adadad; margin-left: 0.04rem; } .blogs_partner_text h5{ font-size: 13px; line-height: 18px; color: #adadad; text-align: center; height: 108px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; } .blogs_partner_list .swiper-slide:hover img{ transform: translate(-50%,-50%) scale(1.1); } .blogs_partner_list .swiper-slide:hover .blogs_partner_text span,.blogs_partner_list .swiper-slide:hover h3{ color: var(--i_color2); } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .blogs_partner .pt-button-prev, .blogs_partner .pt-button-next{display:none} .pt-pagination{display:block} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* ----------------------------------footer------------------------------------- */ /* footer_form */ .footer_form{ box-sizing: border-box; background: url('static/imgs/home_form.png') center no-repeat; background-size: cover; border-radius: 0.4rem; padding: 0.4rem 5.8%; display: flex; display: -webkit-flex; flex-wrap: wrap; position: relative; z-index: 2; margin-bottom: -0.7rem; } .footer_form_left{ width: 59.3%; box-sizing: border-box; } .footer_form_ul{ display: flex; display: -webkit-flex; } .footer_form_li1{ min-width: 1.05rem; height: 1.05rem; position: relative; } .footer_form_li2{ box-sizing: border-box; padding-left: 0.1rem; } .footer_form_li2 h2{ font-size: 0.34rem; color: white; font-weight: bold; } .footer_form_li2 h3{ font-size: 0.26rem; line-height: 0.3rem; color: white; } .footer_form_div1{ font-size: 14px; line-height: 0.2rem; color: white; margin: 0.55rem 0; } .footer_form_div2{ font-size: 14px; line-height: 0.2rem; color: white; } .footer_form_right{ width: 40.7%; box-sizing: border-box; padding-left: 2%; } .footer_form_right h2{ font-size: 0.32rem; line-height: 0.22rem; color: white; font-weight: bold; } .footer_form_right h3{ font-size: 14px; color: white; line-height: 22px; margin-bottom: 0.15rem; } @keyframes pulse00 { 0% { -webkit-transform: scale(1); transform: scale(1); background: #d0e6d8; } 50% { -webkit-transform: scale(0.01); transform: scale(0.01); background: #addbbe; } 100% { -webkit-transform: scale(1); transform: scale(1); background: #9bdbb3; } } .r1 { animation-name: pulse00; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: pulse00; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 { animation-name: pulse00; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: pulse00; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 { animation-name: pulse00; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: pulse00; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } .loader { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 1.05rem; height: 1.05rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { width: 0.15rem; height: 0.15rem; background-color: #addbbe; box-sizing: border-box; border: 1px solid #addbbe; border-radius: 50%; margin: 2px; } #wpforms-44 { --input_font_size: 0.16rem; --input_height: .46rem } #wpforms-form-44 { width: 100%; position: relative; overflow: hidden } #wpforms-44 input, #wpforms-44 button { margin: 0; padding: 0; border: none; background: none } #wpforms-44 .wpforms-field { padding: 0; margin: 0 } #wpforms-44 .wpforms-field-label { font-size: 0; } #wpforms-44 .wpforms-required-label { position: absolute; top: .2rem; left: .08rem; font-size: .16rem; color: #F00 } #wpforms-44 .wpforms-field { width: 100%; background: transparent; padding-bottom: 20px; position: relative; overflow: hidden } #wpforms-44 .wpforms-field-container input, #wpforms-44 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #333; height: var(--input_height); box-sizing: border-box; background: #FFF; padding: 0 .2rem; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease } #wpforms-44 .wpforms-field-container input:hover, #wpforms-44 textarea:hover { border-color: var(--i_color); } #wpforms-44 input { line-height: var(--input_height); border-radius: .05rem; } #wpforms-44 textarea { line-height: .22rem; min-height: 1rem; padding: .15rem .2rem; border-radius: .05rem; height: 1rem; } #wpforms-44 input::-webkit-input-placeholder, #wpforms-44 textarea::-webkit-input-placeholder { color: #909090; font-size: var(--input_font_size) } #wpforms-44 input::-moz-placeholder, #wpforms-44 textarea::-moz-placeholder { color: #909090; font-size: var(--input_font_size) } #wpforms-44 input::-ms-input-placeholder, #wpforms-44 textarea::-ms-input-placeholder { color: #909090; font-size: var(--input_font_size) } #wpforms-44-field_1-error, #wpforms-44-field_2-error, #wpforms-44-field_3-error, #wpforms-44-field_4-error, #wpforms-44-field_5-error, #wpforms-44-field_6-error { position: absolute; font-size: 12px; color: #A90909; } #wpforms-44 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } #wpforms-44 .wpforms-submit-container { padding: 0 !important; overflow: hidden; position: relative; margin-left: auto; width: 100%; } #wpforms-44 .wpforms-submit-container button { width: 100%; height: .48rem; font-size: .16rem; font-weight: bold; color: white; background: #f27900; line-height: .48rem; cursor: pointer; position: relative; border-radius: .05rem; z-index: 2; } #wpforms-44 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-44 .wpforms-submit-container button{ position: relative; overflow: hidden; } @media screen and (max-width:1600px) { } @media screen and (max-width:1440px) { } @media screen and (max-width:1366px) { } @media screen and (max-width:1200px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:960px) { } @media screen and (max-width:768px) { .footer_form_left {width: 100%;} .footer_form_right {width: 100%;padding-left: 0%;margin-top: 0.4rem;} } @media screen and (max-width:560px) { } @media screen and (max-width:425px) { } /* .footer_green .footer_area{ background-color: var(--i_color) !important; } */ .footer_area{ background-color: var(--i_color) ; box-sizing: border-box; padding: 1.05rem 0 0.2rem 0; } .footer{ display: flex; display: -webkit-flex; flex-wrap: wrap; box-sizing: border-box; padding-bottom: 0.4rem; } .footer_us{ width: 40%; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; box-sizing: border-box; padding-right: 10%; } .footer_us>img{ width: 1.66rem; margin-bottom: 0.2rem; } .footer_us h2{ font-size: 14px; line-height: 0.3rem; color: white; } .footer_us_ul{ display: flex; display: -webkit-flex; justify-content: center; margin-top: 0.2rem; } .footer_us_ul li{ margin: 0 0.05rem; } .footer_us_ul li a{ display: block; } .footer_us_ul img{ width: 0.33rem; transition: all 0.3s ease; } .footer_us_ul li:hover img{ transform: translateY(-8px); } .footer_center{ width: 18%; } .footer_center h2{ font-size: 0.2rem; color: white; font-weight: bold; } .footer_center_ul{ margin-top: 0.2rem; } .footer_center_ul li{ margin-bottom: 0.2rem; } .footer_center_ul li a{ font-size: 0.16rem; color: white; text-transform: capitalize; transition: all 0.5s ease; } .footer_center_ul li:hover a{ color: var(--i_color2); } .footer_center2{ width: 20%; } .footer_right{ width: 22%; } .footer_right h2{ font-size: 0.2rem; color: white; font-weight: bold; margin-bottom: 0.2rem; } .footer_right_ul{ } .footer_right_ul li{ margin-bottom: 0.2rem; display: flex; display: -webkit-flex; align-items: flex-start; } .footer_right_ul img{ min-width: 0.22rem; transition: all 0.3s ease; } .footer_right_ul li:nth-child(2) img{ margin-top: 0.05rem; } .footer_right_ul img:hover{ transform: translateY(-8px); } .footer_right_ul a{ font-size: 0.16rem; color: white; margin-left: 0.22rem; line-height: 0.24rem; transition: all 0.3s ease; } .footer_right_ul li a:hover{ color: var(--i_color2); } .footer_max{ border-top: 1px solid #308954; box-sizing: border-box; padding-top: 0.2rem; } .footer_max h2 br{ display: none; } .footer_max h2,.footer_max h2 a{ color: white; text-align: center; font-size: 14px; transition: all 0.3s ease; } .footer_max h2 a:hover{ color: var(--i_color2); } @media screen and (max-width:1600px) { .footer_us {padding-right: 9%;} } @media screen and (max-width:1440px) { .footer_us {padding-right: 8%;} } @media screen and (max-width:1366px) { .footer_us {padding-right: 7%;} } @media screen and (max-width:1200px) { .footer_us {padding-right: 6%;} } @media screen and (max-width:1024px) { .footer_us {padding-right: 5%;} } @media screen and (max-width:960px) { .footer_us {width: 50%;} .footer_right{ display: none; } .footer_center{width: 25%;} } @media screen and (max-width:768px) { .footer_us {width: 100%;padding-right: 0%;} .footer_center{width: 100%;} .footer_center_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .footer_center_ul li{ width: 50%; } } @media screen and (max-width:560px) { } @media screen and (max-width:425px) { } /* ----------------------about------------------------ */ .about_banner{ width: 100%; overflow: hidden; position: relative; margin-top: var(--header_height); } .about_banner::after{ content: ''; display: block; padding-bottom: 15.3%; } .about_banner img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .about_banner_text{ position: absolute; top: 50%; transform: translate(0,-50%); } .about_absolute{ left: 20.85%; width: 58.3%; } .about_banner_text h2{ font-size: 0.65rem; font-weight: 900; color: var(--i_color); -webkit-text-stroke: 0.03rem white; font-family: Arial; } .about_banner_text h3{ font-size: 0.4rem; font-weight: 900; color: var(--i_color); -webkit-text-stroke: 0.01rem white; margin-bottom: 0.2rem; } .about_banner_btn{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; width: 2.5rem; height: 0.5rem; box-sizing: border-box; padding: 0 0.1rem; background-color: var(--i_color); transition: all 0.5s ease; cursor: pointer; } .about_banner_btn h4{ font-size: 0.14rem; font-weight: bold; color: white; margin-right: 0.1rem; } .about_banner_btn i{ display: block; width: 0.18rem; height: 0.18rem; background: url('static/imgs/flays.png') center no-repeat; background-size: 100% 100%; } .about_banner_btn:hover{ background-color: var(--i_color2); } @media screen and (max-width:1600px){ .about_absolute{left: 17.5%;width: 65%;} .about_banner::after {padding-bottom: 18%;} } @media screen and (max-width:1440px){ .about_absolute{left: 11%;width: 78%;} .about_banner::after {padding-bottom: 22%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .about_absolute{left: 6%;width: 88%;} .about_banner::after {padding-bottom: 25%;} } @media screen and (max-width:1025px){ .about_absolute{left: 3%;width: 94%;} .about_banner::after {padding-bottom: 30%;} } @media screen and (max-width:959px){ .about_banner::after {padding-bottom: 34%;} } @media screen and (max-width:767px){ .about_banner::after {padding-bottom: 38%;} .about_banner_text h2 { font-size: 0.55rem; -webkit-text-stroke: 0.02rem white; } .about_banner_text h3 {font-size: 0.35rem;} } @media screen and (max-width:560px){ .about_banner::after {padding-bottom: 45%;} .about_banner_text h2 {font-size: 0.4rem;} .about_banner_text h3 {font-size: 0.28rem;} } @media screen and (max-width:425px){ .about_banner::after {padding-bottom: 55%;} .about_banner_text h2 {font-size: 0.35rem;} } /* hanki */ .hanki{ box-sizing: border-box; padding: 0.7rem 0; display: flex; display: -webkit-flex; flex-wrap: wrap; align-items: center; } .hanki_left{ width: 45.7%; } .hanki_left h2{ font-size: 0.4rem; color: #333; font-weight: bold; box-sizing: border-box; padding-left: 0.2rem; position: relative; } .hanki_left h2::after{ content: ''; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 0.05rem; height: 0.5rem; background-color: var(--i_color); } .hanki_left h3{ font-size: 0.16rem; line-height: 0.35rem; color: #666d74; box-sizing: border-box; padding: 0.1rem 4% 0 4%; } .hanki_right{ width: 54.3%; position: relative; overflow: hidden; } .hanki_right::after{ content: ''; display: block; padding-bottom: 73%; } .hanki_right img{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover; } @media screen and (max-width:560px){ .hanki {flex-direction: column-reverse;} .hanki li{width: 100% !important; } .hanki_left{margin-top: 0.4rem;} } @media screen and (max-width:425px){ } /* about_four */ .about_four_area{ width: 100%; background-color: #f2f2f2; box-sizing: border-box; padding: 0.9rem 0 0.7rem 0; } .about_four{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .about_four li{ width: 50%; display: flex; display: -webkit-flex; margin-bottom: 0.4rem; } .about_four_left{ width: 1rem; height: 1rem; border-radius: 50%; background-color: white; display: flex; display: -webkit-flex; justify-content: center; align-items: center; position: relative; } .about_four_left::after{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: scale(0.5); opacity: 0; background-color: var(--i_color); transition: all 0.5s ease 0.1s; } .about_four_left img{ width: 0.5rem; height: 0.5rem; object-fit: contain; position: relative; z-index: 2; } .about_four_right{ width: calc(100% - 1rem); box-sizing: border-box; padding: 0.15rem 5% 0 5%; } .about_four_right h2{ font-size: 0.2rem; color: #333333; font-weight: bold; text-transform: uppercase; translate: all 0.3s ease; } .about_four_right h3{ font-size: 0.16rem; line-height: 0.25rem; color: #666d74; margin-top: 0.1rem; } .about_four li:hover h2{ color: var(--i_color); } .about_four li:hover .about_four_left::after{ transform: scale(1) rotate(45deg); opacity: 1; border-radius: 50%; } .about_four li:hover img{ filter: grayscale(100%) brightness(100000000); -webkit-filter: grayscale(100%) brightness(100000000) ; } @media screen and (max-width:767px){ .about_four li{width: 100%;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* factory */ .factory{ box-sizing: border-box; padding: 1rem 0; } .about_title{ } .about_title h2{ font-size: 0.4rem; color: #333333; font-weight: bold; text-align: center; position: relative; box-sizing: border-box; padding: 0 3% 0.2rem 3%; } .about_title h2::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 0.5rem; height: 0.05rem; background-color: var(--i_color); } .factory_top{ width: 77%; display: flex; display: -webkit-flex; flex-wrap: wrap; margin-top: 0.6rem; } .factory_top_left{ width: 64.5%; position: relative; overflow: hidden; } .factory_top_left::after{ content: ''; display: block; padding-bottom: 43%; } .factory_top_left img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .factory_top:hover .factory_top_left img{ transform: translate(-50%,-50%) scale(1.1); } .factory_top_right{ width: 35.5%; box-sizing: border-box; padding: 0.7rem 4% 0.3rem 4%; background-color: #f2f2f2; } .factory_top_right h3{ font-size: 0.3rem; font-weight: bold; color: #333333; box-sizing: border-box; padding-bottom: 0.3rem; position: relative; margin-bottom: 0.3rem; } .factory_top_right h3::after{ content: ''; position: absolute; bottom: 0; left: 0%; width: 0.64rem; height: 0.03rem; background-color: var(--i_color); } .factory_top_right h4{ font-size: 0.16rem; line-height: 0.25rem; color: #666d74; } .factory_bto{ margin-left: auto; flex-direction: row-reverse; } @media screen and (max-width:1600px){ .factory_top {width: 80%;} .factory_top_right h3 {font-size: 0.28rem;} } @media screen and (max-width:1440px){ .factory_top {width: 88%;} .factory_top_right h3 {font-size: 0.25rem;} .factory_top_right h4 {line-height: 0.22rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .factory_top {width: 94%;} } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ .factory_top {width: 100%;} .factory_top_right {padding: 0.4rem 2% 0.2rem 2%;} .factory_top_right {width: 45%;} .factory_top_left{width: 55%;} } @media screen and (max-width:767px){ .factory_top_right {width: 100%;} .factory_top_left{width: 100%;} .factory_top_right {padding: 0.4rem 3%;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* flow */ .flow_area{ width: 100%; box-sizing: border-box; padding: 1rem 0; background-color: #f2f2f2; position: relative; } .flow{ } .flow_title{ } .flow_title h2{ font-size: 0.4rem; font-weight: bold; color: #333333; text-align: center; margin-bottom: 0.1rem; } .flow_title h3{ font-size: 0.16rem; line-height: 0.25rem; color: #666d74; text-align: center; position: relative; box-sizing: border-box; padding-bottom: 0.2rem; margin-bottom: 0.55rem; } .flow_title h3::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 0.5rem; height: 0.05rem; background-color: var(--i_color); } .flow_ul{ display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap; } .flow_ul li{ width: 13%; position: relative; } .flow_ul li:not(:last-child)::after{ content: ''; position: absolute; top: 36%; right: -29%; transform: translate(0,-50%); width: 0.35rem; height: 0.24rem; background: url('static/imgs/jian.png') center no-repeat; background-size: contain; } .flow_ul_img{ width: 100%; position: relative; overflow: hidden; border-radius: 0.2rem; box-sizing: border-box; border: 2px solid var(--i_color3); transition: all 0.3s ease; } .flow_ul_img::after{ content: ''; display: block; padding-bottom: 152%; } .flow_ul_img img{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover; } .flow_ul h4{ font-size: 0.16rem; color: white; font-weight: bold; background-color: var(--i_color3); box-sizing: border-box; padding: 0.08rem 4%; border-radius: 0.18rem; text-align: center; margin-top: 0.5rem; position: relative; transition: all 0.3s ease; } .flow_ul h4::before{ content: ''; position: absolute; top: -0.5rem; left: 50%; transform: translate(-50%,0); border-top: 0.1rem solid var(--i_color3); border-bottom: 0.1rem solid transparent; border-left: 0.12rem solid transparent; border-right: 0.12rem solid transparent; transition: all 0.3s ease; } .flow_ul li:hover h4{ background-color: var(--i_color2); } /* .flow_ul li:hover h4::before{ border-top: 0.1rem solid var(--i_color2); } .flow_ul li:hover .flow_ul_img{ border: 2px solid var(--i_color2); } */ @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .flow_ul li {width: 27%;margin-bottom: 0.4rem;} .flow_ul li:not(:last-child)::after {top: 41%;right: -24%;} .flow_ul li:nth-child(3)::after{width: 0;} } @media screen and (max-width:560px){ .flow_ul li:not(:last-child)::after { width: 0; } } @media screen and (max-width:425px){ .flow_ul li {width: 30%;} } /* step */ .step{ box-sizing: border-box; padding: 1rem 0; } .step_ul{ margin-top: 0.8rem; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; } .step_ul li{ display: flex; display: -webkit-flex; flex-direction: column; align-items: center; width: 22%; } .step_ul li img{ height: 0.5rem; transition: all 0.3s ease; } .step_ul li:hover img{ transform: rotateY(180deg); } .step_ul li h3{ font-size: 0.26rem; font-weight: bold; color: var(--i_color); margin: 0.1rem 0 0.2rem 0; } .step_ul li h4{ font-size: 0.16rem; line-height: 0.32rem; color: #666d74; text-align: center; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .step_ul li{width: 49%;margin-bottom: 0.2rem;} .about_title h2 {font-size: 0.35rem;} } @media screen and (max-width:560px){ .about_title h2 {font-size: 0.3rem;} } @media screen and (max-width:425px){ .about_title h2 {font-size: 0.25rem;} .step_ul li{width: 100%;} } /* say */ .say_area{ width: 100%; background-color: white; box-sizing: border-box; padding: 1rem 0; position: relative; } .say{ position: relative; position: relative; z-index: 1; } .say::after{ content: ''; position: absolute; width: 0.79rem; height: 0.61rem; background: url('static/imgs/shuang.png') center no-repeat; background-size: contain; top: 0; left: 0; z-index: -1; } .say_title{ margin-bottom: 0.55rem; } .say_title h2{ font-size: 0.22rem; color: #656565; text-align: center; } .say_title h3{ font-size: 0.34rem; color: #333333; font-weight: bold; box-sizing: border-box; padding: 0.2rem 0; position: relative; text-align: center; } .say_title h3::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 1.2rem; height: 0.02rem; background-color: var(--i_color); } .say_all{ box-sizing: border-box; padding: 0 1rem; } /* say */ .say_partner_box{} .say_partner{position:relative} .say_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .say_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .say_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .say_left{ width: 24%; box-sizing: border-box; padding: 0 2%; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; } .say_left img{ width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-bottom: 0.3rem; } .say_left h2{ font-size: 0.18rem; color: #333333; font-weight: bold; text-transform: uppercase; text-align: center; } .say_left h3{ font-size: 0.14rem; color: #acacac; margin-top: 0.05rem; text-align: center; } .say_right{ width: 76%; } .say_right h4{ font-size: 0.16rem; color: #999999; line-height: 0.33rem; } /* 指示器 */ .say_partner .pt-pagination{display:block; text-align:center; margin:0.5rem auto 0} .say_partner .pt-pagination .swiper-pagination-bullet{width:8px; height:8px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .say_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .say_partner .pt-button-prev, .say_partner .pt-button-next{display:none} .pt-pagination{display:block} } @media screen and (max-width:959px){ .say_all { padding: 0; } } @media screen and (max-width:767px){ .say_right h4 {font-size: 14px;line-height: 20px;} } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* ---------------about_we------------------ */ .about_we{ width: 100%; background-color: var(--i_color3); box-sizing: border-box; padding: 0.7rem 0; } .about_ul{ display:flex; display: -webkit-flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .about_ul_left{ font-size: 0.34rem; line-height: 0.45rem; color: white; font-weight: bold; width: calc(100% - 2.3rem); box-sizing: border-box; padding-right: 2%; } .about_ul_right{ } .about_ul_right a{ width: 2.3rem; height: 0.5rem; display: flex; display: -webkit-flex; justify-content: center; align-items: center; border: 1px solid white; box-sizing: border-box; transition: all 0.3s ease; } .about_ul_right a p{ font-size: 0.18rem; font-weight: bold; color: white; margin-top: 0.03rem; } .about_ul_right a i{ display: block; width: 0.2rem; height: 0.2rem; background: url('static/imgs/juan.png') center no-repeat; background-size: 100% 100%; margin-left: 0.08rem; } .about_ul_right a:hover{ border: 1px solid transparent; background-color: var(--i_color2); } @media screen and (max-width:767px){ .about_ul_left br{display: none;} .about_ul_left{width: 100%;margin-bottom: 0.2rem;padding-right: 0%;} .about_ul_right{width: 100%;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* ----------------------------------contact---------------------------- */ .contact_banner{ width: 100%; position: relative; margin-top: var(--header_height); } .contact_banner::after{ content: ''; display: block; padding-bottom: 41%; } .contact_banner img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .contact_banner_text{ position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%); } .contact_banner_text h2{ font-size: 0.62rem; color: white; font-weight: bold; text-align: center; text-transform: uppercase; position: relative; box-sizing: border-box; padding-bottom: 0.2rem; } .contact_banner_text h2::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 1.13rem; height: 0.03rem; background-color: #f36b1f; } .contact_banner_text h3{ font-size: 0.2rem; line-height: 0.22rem; color: white; text-align: center; margin-top: 0.2rem; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ .contact_banner_text h2 {font-size: 0.5rem;} } @media screen and (max-width:767px){ .contact_banner_text h3 br{display: none;} .contact_banner_text h2 {font-size: 0.4rem;} .contact_banner_text{width: 80%;} .contact_banner::after{padding-bottom: 50%;} } @media screen and (max-width:560px){ .contact_banner_text{width: 94%;} .contact_banner_text h2 {font-size: 0.35rem;} .contact_banner::after{padding-bottom: 60%;} .contact_banner_text h3 {margin-top: 0.1rem;} .contact_banner_text h2 {padding-bottom: 0.1rem;} } @media screen and (max-width:425px){ .contact_banner_text h2 {font-size: 0.3rem;} } /* contact_form */ .contact_form{ width: 42%; margin: 0 auto; background-color: white; box-sizing: border-box; padding: 0.6rem 4% 0.8rem 4%; box-shadow: 0 0 10px rgba(0, 0, 0, .2); position: relative; z-index: 4; margin-top: -2.6rem; margin-bottom: 1rem; } .contact_form h2{ font-size: 0.44rem; line-height: 0.48rem; color: #454545; font-weight: bold; text-align: center; margin-bottom: 0.5rem; } /* contact 表单 */ #wpforms-51 { --input_font_size: 16px; --input_height: .4rem } #wpforms-form-51 { width: 100%; position: relative; overflow: hidden } #wpforms-51 input, #wpforms-51 button { margin: 0; padding: 0; border: none; background: none } #wpforms-51 .wpforms-field { padding: 0; margin: 0 } #wpforms-51 .wpforms-field-label { font-size: 0; } #wpforms-51 .wpforms-required-label { position: absolute; top: .14rem; left: .05rem; font-size: .16rem; color: #F00 } #wpforms-51 .wpforms-field { width: 100%; background: transparent; padding-bottom: .2rem; position: relative; overflow: hidden } #wpforms-51 .wpforms-field-container input, #wpforms-51 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #333; height: var(--input_height); box-sizing: border-box; background: #f7f7f7; padding: 0 .2rem; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease; border: 1px solid #d7d7d9; } #wpforms-51 .wpforms-field-container input:hover, #wpforms-51 textarea:hover { border-color: var(--i_color); } #wpforms-51 input { line-height: var(--input_height); border-radius: 0.04rem; } #wpforms-51 textarea { line-height: .22rem; min-height: 1rem; padding: .08rem .16rem; border-radius: .04rem; } #wpforms-51 input::-webkit-input-placeholder, #wpforms-51 textarea::-webkit-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-51 input::-moz-placeholder, #wpforms-51 textarea::-moz-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-51 input::-ms-input-placeholder, #wpforms-51 textarea::-ms-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-51-field_1-error, #wpforms-51-field_2-error, #wpforms-51-field_3-error, #wpforms-51-field_4-error, #wpforms-51-field_5-error, #wpforms-51-field_6-error { position: absolute; font-size: 12px; color: #A90909; } #wpforms-51 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } #wpforms-51 .wpforms-submit-container { padding: 0 !important; overflow: hidden; position: relative; display: flex; display: -webkit-flex; justify-content: center; } #wpforms-51 .wpforms-submit-container button { width: 2rem; height: .42rem; font-size: .14rem; font-weight: bold; color: white; background: var(--i_color); line-height: .42rem; cursor: pointer; position: relative; -webkit-border-radius: .04rem; border-radius: .04rem; z-index: 2; transition: all 0.3s ease; } #wpforms-51 .wpforms-submit-container button:hover { background-color: var(--i_color2); } #wpforms-51 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-51 .wpforms-submit-container button{ position: relative; overflow: hidden; } @media screen and (max-width:1600px){ .contact_form{width: 45%;} } @media screen and (max-width:1440px){ .contact_form{width: 50%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .contact_form{width: 55%;} } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ .contact_form{width: 70%;} .contact_form {margin-top: -2rem;} } @media screen and (max-width:767px){ .contact_form{width: 80%;} .contact_form {margin-top: -1.5rem;} .contact_form h2 {font-size: 0.4rem;} .contact_form h2 br{display: none;} } @media screen and (max-width:560px){ .contact_form{width: 94%;} .contact_form {margin-top: -1rem;} .contact_form h2 {font-size: 0.35rem;} } @media screen and (max-width:425px){ } /* contact_us */ .contact_us_area{ box-sizing: border-box; padding: 1rem 0; background-color: #f7f7f7; position: relative; } .contact_us{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .contact_us>div{ width: 50%; } .contact_us_left{ } .contact_us h2{ font-size: 0.3rem; color: #363636; font-weight: bold; box-sizing: border-box; padding-bottom: 0.1rem; position: relative; } .contact_us h2::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 1.4rem; height: 0.03rem; background-color: var(--i_color); } .contact_left_ul{ box-sizing: border-box; padding-right: 5%; margin-top: 0.5rem; } .contact_left_ul li{ display: flex; display: -webkit-flex; align-items: center; margin-bottom: 0.3rem; } .contact_left_ul li img{ width: 0.25rem; height: 0.3rem; object-fit: contain; min-width: 0.25rem; margin-right: 0.2rem; transition: all 0.3s ease; } .contact_left_ul li img:hover{ transform: translateY(-8px); } .contact_left_ul li a{ font-size: 0.16rem; color: #1d1d1d; transition: all 0.3s ease; } .contact_left_ul li a:hover{ color: var(--i_color); } .contact_map{ width: 100%; height: 3.5rem; background-color: var(--i_color); margin-top: 0.2rem; } .contact_map #simpleMap, .contact_map .fluid-width-video-wrapper, .contact_map iframe { width: 100%; height: 100% !important; } @media screen and (max-width:767px){ .contact_us>div { width: 100%; } .contact_us_right{ margin-top: 0.2rem; } } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* ---------------------news--------------------- */ .news_banner_text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .news_banner_text h2{ font-size: 0.44rem; font-weight: bold; color: white; text-align: center; box-sizing: border-box; padding-bottom: 0.1rem; position: relative; } .news_banner_text h2::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 1.12rem; height: 0.03rem; background-color: #f36b1f; } .news_banner_text h3{ font-size: 0.2rem; color: white; text-align: center; margin-top: 0.3rem; } /* news */ .news_area{ box-sizing: border-box; padding: 0.5rem 0 1rem 0; } .new_title{ text-align: center; font-size: 0.18rem; color: #333; margin-top: 0.2rem; } .news_all_ul{ margin-top: 0.8rem; display: flex; display: -webkit-flex; flex-wrap: wrap; } .news_all_ul li{ width: calc((100% - 0.6rem) / 3); margin-right: 0.3rem; box-sizing: border-box; box-shadow: 0 0 10px rgba(0, 0, 0, .15); border-radius: 0.05rem; overflow: hidden; transition: all 0.3s ease; margin-bottom: 0.3rem; } .news_all_ul li:nth-child(3n){ margin-right: 0; } .news_all_ul li a{ display: block; width: 100%; } .news_all_img{ width: 100%; position: relative; overflow: hidden; } .news_all_img::after{ content: ''; display: block; padding-bottom: 65%; } .news_all_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; } .news_all_text{ box-sizing: border-box; padding: 0.3rem 4% 0.15rem 4%; } .news_all_text h3{ font-size: 0.2rem; line-height: 0.29rem; color: var(--i_color); font-weight: bold; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 0.58rem; } .news_all_text h4{ font-size: 0.14rem; color: #666d74; line-height: 0.2rem; margin: 0.15rem 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 0.6rem; } .news_all_text h5{ font-size: 0.14rem; line-height: 0.2rem; color: #b2b6b9; box-sizing: border-box; padding-top: 0.15rem; position: relative; } .news_all_text h5::after{ content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: 120%; height: 1px; background-color: #eaeaea; } .news_all_text h5::before{ content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: 0%; height: 1px; background-color: var(--i_color); z-index: 2; transition: all 0.5s ease; } .news_all_ul li:hover .news_all_text h5::before{ width: 120%; } .news_all_ul li:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, .3); } .news_all_ul li:hover .news_all_img img{ transform: translate(-50%,-50%) scale(1.1); } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .news_all_ul {margin-top: 0.6rem;} } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .news_all_ul li {width: calc((100% - 0.2rem) / 2);margin-right: 0.2rem;} .news_all_ul li:nth-child(3n){margin-right: 0.2rem;} .news_all_ul li:nth-child(2n){margin-right: 0;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* 页数 */ /* Number of pages */ .in_page_box { text-align: center; margin: 0.4rem auto 0.8rem; overflow: hidden } .in_page { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .in_page li { margin: 0 .04rem; } .in_page a, .in_page span { display: block; padding: 0 .14rem; line-height: .3rem; font-size: .14rem; color: #666; background: #FFF; border: 1px solid var(--border_color); overflow: hidden; transition: all 0.3s ease; border-radius: 0.3rem; } .in_page li{ margin:0 0.04rem; } .in_page>i { margin-left: 0.1rem; font-size: 0rem; color: #888; } .in_page a:hover, .in_page .active_page a, .in_page .active_page span { border-color: var(--i_color) !important; background: var(--i_color); color: #FFF !important } @media screen and (max-width:1024px) { .in_page a, .in_page span { padding: 0 0.12rem; line-height: 0.26rem; font-size: 0.14rem; } } @media screen and (max-width:767px) { .in_page>i { display: block; width: 100%; margin-top: 0.1rem; font-size: 0rem; } } /* news_want */ .news_want_area{ width: 100%; position: relative; box-sizing: border-box; background-color: #f7f7f7; padding: 0.5rem 0; margin-bottom: 0.6rem; } .news_want{ display: flex; display: -webkit-flex; flex-direction: column; align-items: center; } .news_want h2{ font-size: 0.34rem; color: #3a3f45; font-weight: bold; text-align: center; } .news_want h3{ font-size: 0.24rem; color: #5f655c; text-align: center; margin: 10px 0 20px 0; } .news_want a{ display: block; font-size: 0.16rem; color: white; font-weight: bold; width: 2.8rem; height: 0.5rem; background-color: var(--i_color); display: flex; display: -webkit-flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .news_want a:hover{ background-color: var(--i_color2); } @media screen and (max-width:560px){ .news_want h2{font-size: 0.28rem;} } @media screen and (max-width:425px){ .news_want h2{font-size: 0.22rem;} .news_want h3 {font-size: 0.2rem;} } /* -------------------------single-news --------------------------*/ .singleNews_banner_text{ position: absolute; top: 50%; transform: translate(0,-50%); } .singleNews_banner_text h2{ font-size: 0.4rem; line-height: 0.42rem; font-weight: bold; color: white; box-sizing: border-box; padding-bottom: 0.3rem; position: relative; margin-bottom: 0.2rem; } .singleNews_banner_text h2::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 1.14rem; height: 0.03rem; background-color: #f36b1f; } .singleNews_banner_text h3{ font-size: 0.2rem; color: white; font-weight: bold; } @media screen and (max-width:560px){ .singleNews_banner_text h2 br{display: none;} } @media screen and (max-width:425px){ } /* single_news */ .single_news{ box-sizing: border-box; padding: 0.5rem 0; box-shadow: 0 0 10px rgba(0, 0, 0, .2); margin-top: 0.5rem; margin-bottom: 1rem; } .single_news h1{ font-size: 0.4rem; font-weight: bold; line-height: 0.44rem; color: var(--i_color); text-align: center; box-sizing: border-box; padding: 0 2%; } .single_news_div{ box-sizing: border-box; padding: 0.2rem 2%; display: flex; display: -webkit-flex; justify-content: center; align-items: center; border-bottom: 1px solid #ededed; } .single_news_div h2{ font-size: 0.16rem; color:#363636; box-sizing: border-box; padding-right: 2%; margin-right: 2%; position: relative; } .single_news_div h2::after{ content: ''; position: absolute; width: 1px; height: 0.11rem; background-color: #bfbfbf; right: 0; top: 50%; transform: translate(0,-50%); } .single_news_div h3{ font-size: 0.16rem; color:#363636; } .single_news_div a{ display: block; } .single_news_div ion-icon{ font-size: 0.18rem; color: #3e4055; margin-left: 0.2rem; transition: all 0.3s ease; } .single_news_div ion-icon:hover{ color: var(--i_color); transform: translateY(-5px); } .single_news_all{ box-sizing: border-box; padding: 0.25rem 3% 0 3%; color: #5c5c5c; font-size: 0.16rem; line-height: 0.3rem; } .single_news_bto{ display: flex; display: -webkit-flex; box-sizing: border-box; padding: 1rem 3% 0 3%; align-items: center; } .single_news_btn{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; width: 1.5rem; height: 0.4rem; border-radius: 0.2rem; background-color: var(--i_color); transition: all 0.3s ease; } .single_news_btn:hover{ background-color: var(--i_color2); } .single_news_btn i{ display: block; width: 0.17rem; height: 0.13rem; background: url('static/imgs/hui.png') center no-repeat; background-size: 100% 100%; margin-right: 0.1rem; } .single_news_btn p{ font-size: 0.16rem; color: white; font-weight: bold; } /* 上一篇 下一篇 */ .ar_fot { overflow: hidden; width: calc(100% - 1.5rem); box-sizing: border-box; padding-right: 1%; } .ar_fot ul { overflow: hidden; display: flex; display: -webkit-flex; flex-direction: column; } .ar_fot li { overflow: hidden; display: flex; display: -webkit-flex; margin-bottom: 0.2rem; align-items: center; } .ar_fot li b { display: block; text-align: right; font-size: 0.16rem; color: #333333; font-weight: bold; margin-right: 0.1rem; } .ar_fot_div{ margin-right: 0.2rem; display: flex; display: -webkit-flex; } .ar_fot li a,.ar_fot li span { display: block; font-size: 0.16rem; width: 100%; text-align: right; font-weight: bold; } .ar_fot li a { color:#333333 } .ar_fot li span { color: #999 } .ar_fot li a:hover { color: var(--i_color) } @media screen and (max-width:767px){ .single_news_bto { flex-direction: column; align-items: baseline; } .ar_fot {width: 100%;} .single_news_bto {padding: 0.6rem 3% 0 3%;} .single_news h1 {font-size: 0.35rem;} } @media screen and (max-width:560px){ .single_news_bto {padding: 0.4rem 3% 0 3%;} .single_news h1 {font-size: 0.3rem;} } @media screen and (max-width:425px){ } /* -----------------------products---------------------- */ .product_banner_text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 94%; } .product_banner_text h2{ font-size: 0.44rem; font-weight: bold; color: white; box-sizing: border-box; padding-bottom: 0.2rem; position: relative; text-align: center; margin-bottom: 0.1rem; text-transform: capitalize; } .product_banner_text h2::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 1.14rem; height: 0.03rem; background-color: #f36b1f; } @media screen and (max-width:767px){ .product_banner_text h2{font-size: 0.4rem;} } @media screen and (max-width:560px){ .product_banner_text h2{font-size: 0.35rem;} } @media screen and (max-width:425px){ .product_banner_text h2{font-size: 0.3rem;} } /* 当前位置 */ .in_position{ padding:14px 0; background:transparent; width: 100%; } .in_position .container{ display: flex; display: -webkit-flex; justify-content: center; } .in_position a{display:block; float:left; font-size:18px; color:#fff; position:relative; line-height:20px; text-transform:uppercase} .in_position a:first-child{} .in_position a:not(:last-child):after{content:">"; margin:0 0.1rem; color:#fff} .in_position a:last-child{color:var(--i_color2)!important} .in_position a:hover{color:var(--i_color2)} @media screen and (max-width:959px){ .in_position a{font-size:15px} .in_position{bottom: 0.3rem;} } @media screen and (max-width:767px){ .in_position a{font-size:14px} .in_position{bottom: 0.2rem;} } @media screen and (max-width:560px){ .in_position a{font-size:12px} .in_position{bottom: 0rem;} } /* --------------------products--------------------- */ .products_all{ display: flex; display: -webkit-flex; flex-wrap: wrap; box-sizing: border-box; padding: 0.7rem 0 1rem 0; } .products_all_left h2{ font-size: 0.32rem; color: #333333; font-weight: bold; box-sizing: border-box; padding-bottom: 0.2rem; border-bottom: 1px solid #ececec; margin-bottom: 0.3rem; } .products_all_right{ width: calc(100% - 2.3rem); } .products_all_ul{ } .products_all_ul li{ margin-bottom: 0.3rem; } .products_all_ul li a{ display: block; font-size: 0.16rem; color: var(--i_color); font-weight: bold; display: flex; display: -webkit-flex; align-items: center; text-transform: capitalize; } .products_all_ul .products_li_active a{ border-bottom: 1px solid var(--i_color); } .products_all_ul .products_li_active i{ color: var(--i_color); } .products_all_ul li a i{ display: block; font-size: 0.16rem; color: #333; font-weight: bold; margin-left: auto; box-sizing: border-box; padding-left: 0.05rem; } .products_all_left{ width: 2.3rem; box-sizing: border-box; padding-right: 0.05rem; } .products_list{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .products_list li{ width: 24%; margin-left: 1%; border: 1px solid #e6e6e6; box-sizing: border-box; margin-bottom: 0.2rem; } .products_list_img{ display: block; width: 100%; position: relative; overflow: hidden; cursor: pointer; } .products_list_img::after{ content: ''; display: block; padding-bottom: 100%; } .products_list_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .products_list_text{ background-color: #f7f7f7; box-sizing: border-box; padding: 0.3rem 3% 0.15rem 3%; } .products_list_text a{ display: block; width: 100%; } .products_list_text h3{ font-size: 0.16rem; line-height: 0.2rem; color: #333333; font-weight: bold; text-align: center; margin-bottom: 0.3rem; transition: all .2s linear; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 0.4rem; } .products_list_text:hover h3{ color: var(--i_color); } .products_list_text h6{ font-size: 0.14rem; color: #515151; font-weight: bold; display: block; width: 1.1rem; height: 0.3rem; background-color: #ebe9eb; border: 1px solid #dcdadc; display: flex; display: -webkit-flex; justify-content: center; align-items: center; margin: 0 auto; transition: all .2s linear; } .products_list_text:hover h6{ background-color: var(--i_color); color: white; } .products_eyes{ position: absolute; bottom: -100%; left: 0; width: 100%; display: flex; display: -webkit-flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, .5); box-sizing: border-box; padding: 0.1rem 2%; transition: all 0.3s ease; } .products_eyes h4{ width: 0.22rem; height: 0.12rem; background: url('static/imgs/eyes.png') center no-repeat; background-size: cover; margin-right: 0.05rem; } .products_eyes h5{ font-size: 0.18rem; color: white; margin-top: 0.02rem; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .products_list li .products_list_img:hover .products_eyes{ bottom: 0; } .show{ display: block; transition: all .2s linear; } .hide{ transition: all .2s linear; opacity: 0; -webkit-filter: blur(0); filter: blur(0); } .products_list li:hover .products_list_img .hide{ opacity: 1; -webkit-transform:translate(-50%,-50%) scale(1) translateZ(0) translateY(0); transform:translate(-50%,-50%) scale(1) translateZ(0) translateY(0); pointer-events: inherit; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ .products_all_left {width: 100%;box-sizing: border-box;padding: 0 0 0 1%;} .products_all_right {width: 100%;margin-top: 0.2rem;} .products_all_ul li a {font-size: 14px;} .products_all_ul{display: none;} .products_all_left h2{position: relative;} .products_all_left h2::after{ content: ''; position: absolute; top: 50%; right: 0; width: 0.4rem; height: 0.4rem; transform: translate(0,-50%); background: url('static/imgs/dd.svg') center no-repeat; background-size: 20px; } } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .products_list li {width: 49%;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* product_send */ .product_send_area{ background-color: #f7f7f7; box-sizing: border-box; padding: 1rem 0; position: relative; } .product_send{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .product_send>li{ width: 50%; } .product_send_left{ } .product_send_left h2{ font-size: 0.26rem; font-weight: bold; color: #333333; box-sizing: border-box; padding-bottom: 0.2rem; position: relative; margin-bottom: 0.2rem; } .product_send_left h2::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0.5rem; height: 0.04rem; background-color: var(--i_color); } .product_send_left h3{ font-size: 0.6rem; line-height: 0.66rem; color: #333; font-weight: bold; } .product_send_left h4{ font-size: 0.16rem; color: #333; margin: 0.2rem 0; } .product_send_left h5{ font-size: 0.16rem; line-height: 0.34rem; color: #666d74; } .product_send_right{ box-sizing: border-box; padding: 0.3rem; box-shadow: 0 0 10px rgba(0, 0, 0, .3); background-color: #f7f7f7; } /* products 表单 */ #wpforms-54 { --input_font_size: 16px; --input_height: .4rem } #wpforms-form-54 { width: 100%; position: relative; overflow: hidden } #wpforms-54 input, #wpforms-54 button { margin: 0; padding: 0; border: none; background: none; } #wpforms-54 .wpforms-field { padding: 0; margin: 0 } #wpforms-54 .wpforms-field-label { font-size: 0; } #wpforms-54 .wpforms-required-label { position: absolute; top: .14rem; left: .05rem; font-size: .16rem; color: #F00 } #wpforms-54 .wpforms-field { width: 100%; background: transparent; padding-bottom: .2rem; position: relative; overflow: hidden } #wpforms-54 .wpforms-field-container input, #wpforms-54 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #333; height: var(--input_height); box-sizing: border-box; background: #f2f2f2; padding: 0 .2rem; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease; border: 1px solid #d7d7d9; } #wpforms-54 .wpforms-field-container input:hover, #wpforms-54 textarea:hover { border-color: var(--i_color); } #wpforms-54 input { line-height: var(--input_height); border-radius: 0.04rem; } #wpforms-54 textarea { line-height: .22rem; min-height: 1rem; padding: .08rem .16rem; border-radius: .04rem; } #wpforms-54 input::-webkit-input-placeholder, #wpforms-54 textarea::-webkit-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-54 input::-moz-placeholder, #wpforms-54 textarea::-moz-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-54 input::-ms-input-placeholder, #wpforms-54 textarea::-ms-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-54-field_1-error, #wpforms-54-field_2-error, #wpforms-54-field_3-error, #wpforms-54-field_4-error, #wpforms-54-field_5-error, #wpforms-54-field_6-error { position: absolute; font-size: 12px; color: #A90909; } #wpforms-54 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } #wpforms-54 .wpforms-submit-container { padding: 0 !important; overflow: hidden; position: relative; display: flex; display: -webkit-flex; justify-content: center; } #wpforms-54 .wpforms-submit-container button { width: 2.5rem; height: .5rem; font-size: .14rem; font-weight: bold; color: white; background: var(--i_color); line-height: .5rem; cursor: pointer; position: relative; z-index: 2; transition: all 0.3s ease; } #wpforms-54 .wpforms-submit-container button:hover { background-color: var(--i_color2); } #wpforms-54 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-54 .wpforms-submit-container button{ position: relative; overflow: hidden; } @media screen and (max-width:1600px) { } @media screen and (max-width:1440px) { } @media screen and (max-width:1366px) { } @media screen and (max-width:1200px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:960px) { .product_send>li { width: 100%; } .product_send_right{margin-top: 0.4rem;} .product_send_left h3 br{display: none;} .product_send_left h5 br{display: none;} } @media screen and (max-width:768px) { } @media screen and (max-width:560px) { } @media screen and (max-width:425px) { } /* products_view */ .products_view_area{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .5); z-index: 99999999999; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .products_view{ background-color: white; width: 9.74rem; max-width: 100%; box-sizing: border-box; display: flex; display: -webkit-flex; flex-wrap: wrap; position: relative; } .products_view>div{ width: 50%; } .products_view_right{ box-sizing: border-box; padding: 0.4rem 3%; height: 4.87rem; overflow: auto; } /*滚动条*/ .products_view_right::-webkit-scrollbar { width: 2px; height: 8px } .products_view_right::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: var(--i_color) } .products_view_right::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .products_view_right h2{ font-size: 0.4rem; line-height: 0.44rem; color: var(--i_color); font-weight: bold; } .products_view_div{ margin: 0.2rem 0; display: flex; display: -webkit-flex; } .products_view_div>div{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .products_view_div1{ box-sizing: border-box; padding-right: 0.1rem; margin-right: 0.1rem; position: relative; } .products_view_div1::after{ content: ''; width: 0.01rem; height: 0.3rem; background-color: #dddddd; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); } .products_view_div2{ } .products_view_div h3{ font-size: 0.16rem; font-weight: bold; color: #333; } .products_view_div a{ font-size: 0.14rem; font-weight: bold; color: var(--i_color); margin-left: 0.05rem; } .products_view_text{ font-size: 0.16rem; line-height: 0.24rem; color: #797979; } .products_view_i{ display: block; width: 0.15rem; height: 0.14rem; background: url('static/imgs/cha.png') center no-repeat; background-size: 100% 100%; position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 55; } /* 合作伙伴 */ .view_partner_box{} .view_partner{position:relative} .view_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .view_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .view_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .view_partner_list .img{width:100%; box-sizing:border-box; position:relative; overflow:hidden} .view_partner_list .img:before{content:""; display:block; padding-bottom:100%} .view_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .view_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} /* 指示器 */ .view_partner .pt-pagination{display:block; text-align:center; margin:20px auto 0;position: absolute;bottom: 0.15rem;left: 50%;transform: translate(-50%,0);z-index: 3;} .view_partner .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#686666; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .view_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:#12100f} /* 左右箭头 */ .view_partner .pt-button-prev, .view_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .view_partner .pt-button-prev:before, .view_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .view_partner .pt-button-prev{left:0px} .view_partner .pt-button-prev:before{content:"<"} .view_partner .pt-button-next{right:0px} .view_partner .pt-button-next:before{content:">"} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .view_partner .pt-button-prev, .view_partner .pt-button-next{display:none} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .products_view>div { width: 100%; } .view_partner_list .img:before { padding-bottom: 50%; } .products_view_right {height: 3rem;} .view_partner_list .img {width: 80%;margin: 0 auto;} } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} .view_partner_list .img {width: 100%;margin: 0 auto;} .view_partner_list .img:before { padding-bottom: 80%; } } /* ----------------single-products------------ */ .single_products{ box-sizing: border-box; padding: 1rem 0 0 0; display: flex; display: -webkit-flex; flex-wrap: wrap; align-items: flex-start; } .single_products_left{ width: 3.57rem; } .product_img_max{ width: 100%; position: relative; overflow: hidden; cursor: pointer; } .product_img_max::after{ content: ''; display: block; padding-bottom: 100%; } .product_img_max img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .product_img_dl{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .product_img_dl dt{ width: calc((100% - 0.6rem) / 4); margin-right: 0.2rem; position: relative; margin-top: 0.2rem; border: 1px solid #dfdfdf; box-sizing: border-box; } .product_img_dl dt:nth-child(4n){ margin-right: 0; } .product_img_dl dt::after{ content: ''; display: block; padding-bottom: 100%; } .product_img_dl img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; opacity: 0.5; cursor: pointer; transition: all 0.3s ease; } .product_img_dl dt.on img{ opacity: 1; } .single_products_right{ width: calc(100% - 3.57rem); box-sizing: border-box; padding-left: 4%; } .single_products_right h1{ font-size: 0.4rem; line-height: 0.44rem; font-weight: bold; color: var(--i_color); } .single_products_tag{ display: flex; display: -webkit-flex; flex-wrap: wrap; margin: 0.2rem 0; } .single_products_tag>div{ display: flex; display: -webkit-flex; } .single_tag1{ box-sizing: border-box; padding-right: 0.1rem; margin-right: 0.1rem; position: relative; } .single_tag1::after{ content: ''; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 1px; height: 0.3rem; background-color: #dddddd; } .single_tag2{ } .single_products_tag h2{ font-size: 0.16rem; font-weight: bold; color: #333; } .single_products_tag a{ font-size: 0.16rem; font-weight: bold; color: var(--i_color); margin-left: 0.05rem; } .single_products_tag a:hover{ color: var(--i_color2); } .single_tag_text{ font-size: 0.16rem; line-height: 0.3rem; color: #333333; } .single_tag_btn{ display: block; width: 3rem; box-sizing: border-box; padding: 14px 0; background-color: var(--i_color); display: flex; display: -webkit-flex; justify-content: center; align-items: center; margin-top: 0.25rem; transition: all 0.3s ease; } .single_tag_btn:hover { background-color: var(--i_color2); } .single_tag_btn h3{ font-size: 0.16rem; color: white; font-weight: bold; } .single_tag_btn i{ display: block; width: 0.15rem; height: 0.14rem; background: url('static/imgs/dao.png') center no-repeat; background-size: 100% 100%; margin-left: 0.08rem; } @media screen and (max-width:767px){ .single_products_right {width: 100%;padding-left: 0%;margin-top: 0.4rem;} .single_products {justify-content: center;} .single_products_left { width: 5rem; } } @media screen and (max-width:560px){ .single_products_left { width: 4.5rem; } } @media screen and (max-width:425px){ .single_products_left { width: 100%; } } /* single_bjj */ .single_bjj_area{ box-sizing: border-box; padding: 1rem 0; background-color: #f9f9f9; position: relative; } .single_bjj{ } .single_bjj h2{ font-size: 0.2rem; color: #515151; box-sizing: border-box; padding: 0.2rem 1%; background-color: #ebe9eb; border: 1px solid #d3ced2; } .single_bjj article{ box-sizing: border-box; padding: 0.25rem 1%; font-size: 0.18rem; color: #333; line-height: 0.3rem; overflow: auto; } .single_bjj article hr{margin: .1rem 0;} .single_bjj article img{ max-width: 100%; } .single_bjj article li{ list-style:disc !important; margin: 10px 17px !important; } /*滚动条*/ .single_bjj article::-webkit-scrollbar { width: 3px; height: 2px } .single_bjj article::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: var(--i_color) } .single_bjj article::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } table, th, td { border-collapse: collapse; border: 1px solid rgba(0,0,0,0.1); padding: 10px; } /* single_form */ .single_form{ box-sizing: border-box; padding: 0.8rem 0; } .single_form_h3{ font-size: 0.16rem; line-height: 0.32rem; color: #666d74; text-align: center; margin: 0.2rem 0 0.4rem 0; } .single_form_input{ box-sizing: border-box; padding: 0.4rem 4%; box-shadow: 0 0 10px rgba(0, 0, 0, .3); width: 70%; margin: 0 auto; background-color: #f7f7f7; } /* 侧边客服 表单 */ #wpforms-57{--input_font_size:0.16rem; --input_height:42px} #wpforms-57{width:100%; margin:0 auto; padding:0} #wpforms-form-57{width:100%; overflow:hidden} #wpforms-57 input, #wpforms-57 button{margin:0; padding:0; border:none; background:none} #wpforms-57 .wpforms-field{padding:0; margin:0} #wpforms-57 .wpforms-error-container{line-height:16px} #wpforms-57 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-57 .wpforms-submit-container{padding:0!important; width:2.2rem; height:var(--input_height); background:var(--i_color);position:relative;margin:0 auto;} #wpforms-57 .wpforms-field{ position: relative; } #wpforms-57 .wpforms-field-label{ font-size: 0; } #wpforms-57 .wpforms-field-label span{ position: absolute; top: 15px; left: 3px; font-size: 0.14rem; color: red; } #wpforms-57 .wpforms-field{width:100%; padding-bottom:20px; background:transparent; overflow:hidden} #wpforms-57 .wpforms-field:nth-child(1){margin-right:20px} #wpforms-57 .wpforms-field:nth-child(1), #wpforms-57 .wpforms-field:nth-child(2){width:calc(50% - 10px)} #wpforms-57 input{height:var(--input_height)} #wpforms-57 textarea{height:1.4rem} #wpforms-57 input, #wpforms-57 textarea{width:100%;border: 0; max-width:100%!important; font-size:var(--input_font_size);border: 1px solid #d7d7d9; background-color: white; color:#222; box-sizing:border-box; line-height:var(--input_height); padding:0 10px;transition: all 0.3s ease ;} #wpforms-57 .wpforms-field-container input:hover, #wpforms-57 textarea:hover { border-color: var(--i_color); } #wpforms-57 input::-webkit-input-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 input::-moz-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 input::-moz-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 input::-ms-input-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 textarea::-webkit-input-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 textarea::-moz-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 textarea::-moz-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 textarea::-ms-input-placeholder{color:#b3b3b3; font-size:var(--input_font_size)} #wpforms-57 #wpforms-57-field_1-error, #wpforms-57 #wpforms-57-field_2-error, #wpforms-57 #wpforms-57-field_3-error, #wpforms-57 #wpforms-57-field_4-error{position:absolute; font-size:14px} #wpforms-57 .wpforms-submit-container button{overflow: hidden; width:100%; height:var(--input_height); font-size:0.14rem;font-weight: bold; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-57 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} #wpforms-57 .wpforms-submit-container:hover{ background-color: var(--i_color2); animation-delay: 0.01s; } @media screen and (max-width:959px){ .single_form_input {width: 80%;} } @media screen and (max-width:767px){ .single_form_input {width: 90%;} } @media screen and (max-width:560px){ .single_form_input {width: 100%;} } @media screen and (max-width:425px){ } /* hot_products */ .hot_products{ margin-bottom: 1rem; } .hot_products_all{ margin-top: 0.45rem; } /* 其他产品 */ .hot_partner_box{} .hot_partner{position:relative} .hot_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .hot_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .hot_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .hot_partner_list .swiper-slide a{ display: block; width: 100%; } .hot_partner_list .img{width:100%; box-sizing:border-box;position:relative; overflow:hidden} .hot_partner_list .img:before{content:""; display:block; padding-bottom:100%} .hot_partner_list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .hot_partner_list h2{ font-size: 0.16rem; line-height: 0.23rem; color: var(--i_color); font-weight: bold; text-align: center; box-sizing: border-box; padding: 0 2%; margin: 0.25rem 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 0.46rem; } .hot_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} .hot_partner_list .swiper-slide a:hover .hide{ opacity: 1; -webkit-transform:translate(-50%,-50%) scale(1) translateZ(0) translateY(0); transform:translate(-50%,-50%) scale(1) translateZ(0) translateY(0); pointer-events: inherit; } /* 指示器 */ .hot_partner .pt-pagination{display:block; text-align:center; margin:20px auto 0} .hot_partner .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#cccccc; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .hot_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:#666666} /* 左右箭头 */ .hot_partner .pt-button-prev, .hot_partner .pt-button-next{position:absolute; top:40%; transform:translate(0,-50%); width:0.5rem; height:0.5rem; background:rgba(0,0,0,.3);border-radius: 50%; z-index:999; cursor:pointer; outline:none} .hot_partner .pt-button-prev:before, .hot_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; font-weight: bold; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .hot_partner .pt-button-prev{left:-5.5%} .hot_partner .pt-button-prev:before{content:"<"} .hot_partner .pt-button-next{right:-5.5%} .hot_partner .pt-button-next:before{content:">"} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .hot_partner .pt-button-prev, .hot_partner .pt-button-next{display:none} .pt-pagination{display:block} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .pt-pagination{margin:14px auto 0} .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* 首页 弹出表单 */ .home_pop_area{ position: fixed; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .5); top: 0; left: 0; z-index: 999999999; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .home_pop{ width: 4.6rem; background-color: white; box-sizing: border-box; padding: 0.25rem 2%; position: relative; max-width: 100%; border-top: 0.04rem solid var(--i_color); } .about_pop{ width: 6.3rem; max-width: 100%; } .home_pop h2{ font-size: 0.22rem; color: #9999a6; } .home_pop h3{ font-size: 0.36rem; color: var(--i_color); font-weight: bold; margin: 0.2rem 0; } .home_pop h4{ font-size: 0.18rem; line-height: 0.2rem; color: #333; margin-bottom: 0.3rem; } .home_pop_i{ display: block; position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; background: url('static/imgs/green_cha.png') center no-repeat; background-size: 12px; z-index: 5; cursor: pointer; } /* contact 表单 */ #wpforms-41 { --input_font_size: 16px; --input_height: .4rem } #wpforms-form-41 { width: 100%; position: relative; overflow: hidden } #wpforms-41 input, #wpforms-41 button { margin: 0; padding: 0; border: none; background: none } #wpforms-41 .wpforms-field { padding: 0; margin: 0 } #wpforms-41 .wpforms-field-label { font-size: 0; } #wpforms-41 .wpforms-required-label { position: absolute; top: .14rem; left: .05rem; font-size: .16rem; color: #F00 } #wpforms-41 .wpforms-field { width: 100%; background: transparent; padding-bottom: .2rem; position: relative; overflow: hidden } #wpforms-41 .wpforms-field-container input, #wpforms-41 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #333; height: var(--input_height); box-sizing: border-box; background: #f7f7f7; padding: 0 .2rem; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease; border: 1px solid #d7d7d9; } #wpforms-41 .wpforms-field-container input:hover, #wpforms-41 textarea:hover { border-color: var(--i_color); } #wpforms-41 input { line-height: var(--input_height); border-radius: 0.04rem; } #wpforms-41 textarea { line-height: .22rem; min-height: 1rem; padding: .08rem .16rem; border-radius: .04rem; } #wpforms-41 input::-webkit-input-placeholder, #wpforms-41 textarea::-webkit-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-41 input::-moz-placeholder, #wpforms-41 textarea::-moz-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-41 input::-ms-input-placeholder, #wpforms-41 textarea::-ms-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-41-field_1-error, #wpforms-41-field_2-error, #wpforms-41-field_3-error, #wpforms-41-field_4-error, #wpforms-41-field_5-error, #wpforms-41-field_6-error { position: absolute; font-size: 12px; color: #A90909; } #wpforms-41 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } #wpforms-41 .wpforms-submit-container { padding: 0 !important; overflow: hidden; position: relative; display: flex; display: -webkit-flex; justify-content: flex-end; } #wpforms-41 .wpforms-submit-container button { width: 2rem; height: .42rem; font-size: .14rem; font-weight: bold; color: white; background: var(--i_color); line-height: .42rem; cursor: pointer; position: relative; -webkit-border-radius: .04rem; border-radius: .04rem; z-index: 2; transition: all 0.3s ease; } #wpforms-41 .wpforms-submit-container button:hover { background-color: var(--i_color2); } #wpforms-41 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-41 .wpforms-submit-container button{ position: relative; overflow: hidden; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* about 弹出表单 */ #wpforms-48 { --input_font_size: 16px; --input_height: .4rem } #wpforms-form-48 { width: 100%; position: relative; overflow: hidden } #wpforms-48 input, #wpforms-48 button { margin: 0; padding: 0; border: none; background: none } #wpforms-48 .wpforms-field { padding: 0; margin: 0 } #wpforms-48 .wpforms-field-label { font-size: 0; } #wpforms-48 .wpforms-required-label { position: absolute; top: .14rem; left: .05rem; font-size: .16rem; color: #F00 } #wpforms-48 .wpforms-field { width: 100%; background: transparent; padding-bottom: .2rem; position: relative; overflow: hidden } #wpforms-48 .wpforms-field-container input, #wpforms-48 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #333; height: var(--input_height); box-sizing: border-box; background: #f7f7f7; padding: 0 .2rem; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease; border: 1px solid #d7d7d9; } #wpforms-48 .wpforms-field-container input:hover, #wpforms-48 textarea:hover { border-color: var(--i_color); } #wpforms-48 input { line-height: var(--input_height); border-radius: 0.04rem; } #wpforms-48 textarea { line-height: .22rem; min-height: 1rem; padding: .08rem .16rem; border-radius: .04rem; } #wpforms-48 input::-webkit-input-placeholder, #wpforms-48 textarea::-webkit-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-48 input::-moz-placeholder, #wpforms-48 textarea::-moz-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-48 input::-ms-input-placeholder, #wpforms-48 textarea::-ms-input-placeholder { color: #b3b3b3; font-size: var(--input_font_size) } #wpforms-48-field_1-error, #wpforms-48-field_2-error, #wpforms-48-field_3-error, #wpforms-48-field_4-error, #wpforms-48-field_5-error, #wpforms-48-field_6-error { position: absolute; font-size: 12px; color: #A90909; } #wpforms-48 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } #wpforms-48 .wpforms-submit-container { padding: 0 !important; overflow: hidden; position: relative; display: flex; display: -webkit-flex; justify-content: flex-end; } #wpforms-48 .wpforms-submit-container button { width: 2rem; height: .42rem; font-size: .14rem; font-weight: bold; color: white; background: var(--i_color); line-height: .42rem; cursor: pointer; position: relative; -webkit-border-radius: .04rem; border-radius: .04rem; z-index: 2; transition: all 0.3s ease; } #wpforms-48 .wpforms-submit-container button:hover { background-color: var(--i_color2); } #wpforms-48 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px } #wpforms-48 .wpforms-submit-container button{ position: relative; overflow: hidden; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1025px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } /* aside meun */ .fixed_contact { --ico_size: 50px; } .fixed_contact { position: fixed; bottom: 20%; right: calc(-1 * var(--ico_size)); width: 0; z-index: 9999999; -webkit-transition: all .4s ease; transition: all .4s ease } .fixed_contact.on { right: 0; } .fixed_contact li { display: inline-block; float: left; clear: both; } .fixed_contact a { position: relative; right: var(--ico_size); display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; margin: 2px 0; background: #338a56; -webkit-border-radius: .06rem 0 0 .06rem; border-radius: .06rem 0 0 .06rem; -webkit-transition: all .5s ease; transition: all .5s ease; cursor: pointer; } .aside_top { cursor: pointer; } .fixed_contact i { width: var(--ico_size); height: var(--ico_size); position: relative; background-color: #006d2c !important; } .fixed_contact i::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.22rem; color: #FFF; } .aside_wa i::before { font-size: .24rem; } .fixed_contact li p { display: block; padding:0 0.2rem; font-size: .14rem; color: #FFF; line-height: var(--ico_size); white-space: nowrap; } .fixed_contact a:hover { right: 100%; } .aside_wx{ position: relative; } .aside_wx_img{ display: none; width: 100%; position: absolute; bottom: -1.58rem; left: 0; box-sizing: border-box; opacity: 0; z-index: 2; transition: all 0.3s ease; transition-delay: 0.3s; } .aside_wx_img img{ width: 100%; height: 100%; } .fixed_contact .aside_wx a:hover .aside_wx_img{ opacity: 1; display: block; } @media screen and (max-width:1440px) { .fixed_contact { --ico_size: 42px; } } @media screen and (max-width:1024px) { .fixed_contact { --ico_size: 40px; } .fixed_contact a:hover { right: var(--ico_size) !important; } .fixed_contact i::before { font-size: 0.2rem; } } @media screen and (max-width:560px) { .fixed_contact { --ico_size: 34px; } .fixed_contact i::before { font-size: 0.18rem; } .fixed_contact li p { font-size: .13rem; } } /* 移动端底部 */ .footer_phone_show{ display: none; } .footer_phone{ position: fixed; bottom: 0; left: 0; width: 100%; background-color: white; z-index: 999; } .footer_phone{ width: 100%; display: flex; display: -webkit-flex; flex-direction: row; } .footer_phone li{ width: 32%; padding: 13px; border-right: 1px solid rgba(211,211,211,1); border-top: 1px solid rgba(211,211,211,1); } .footer_phone li:nth-child(3){ border-right: 0px; } .footer_phone a{ display: block; width: 100%; display: flex; display: -webkit-flex; justify-content: center; } .footer_phone ion-icon { font-size: 23px; } .footer_phone p{ font-size: 12px; color: #333333; font-family: Arial; line-height: 23px; margin-left: 10px; } @media screen and (max-width:959px){ .footer_phone_show{ display: block; } footer{margin-bottom: 50px;} } /* 隐私政策 */ .privacy{margin-bottom: 100px;padding-top: 70px;} #header{background-color: rgb(0 0 0 / 57%) !important;} .privacy_cont{} .privacy_cont .tit{margin-bottom:30px} .privacy_cont .tit h2{font-size:24px; text-align:center; font-weight:bold} .privacy_cont article, .privacy_cont article *{font-size:14px; color:#666; line-height:24px} .foot {top: 130px;} .privacy ol {padding: 0px;} @media screen and (max-width:1200px){ .privacy{margin-bottom: 50px;} } @media screen and (max-width:959px){ .privacy{margin-bottom: 30px;} } /* 感谢页面 */ .thanks{padding-top: 100px; margin:0px auto 100px; text-align:center; } .thanks h2{margin-bottom:20px; font-size:30px; color:#222; font-weight:bold} .thanks a{z-index: 2; display: flex;display: -webkit-flex;justify-content: center; position: relative; transition: all 1s ease;} .btns { height: 4em; width: 12em; display: flex; align-items: center; justify-content: center; background: transparent; border: 0px solid black; cursor: pointer; } .btns:hover p{ color: var(--i_color); } .wrapper { height: 2em; width: 8em; position: relative; background: transparent; display: flex; justify-content: center; align-items: center; } .thanks .text { font-size: 17px; z-index: 1; color: #000; padding: 4px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); transition: all 0.5s ease; } .flower { display: grid; grid-template-columns: 1em 1em; position: absolute; transition: grid-template-columns 0.8s ease; } .flower1 { top: -12px; left: -13px; transform: rotate(5deg); } .flower2 { bottom: -5px; left: 8px; transform: rotate(35deg); } .flower3 { bottom: -15px; transform: rotate(0deg); } .flower4 { top: -14px; transform: rotate(15deg); } .flower5 { right: 11px; top: -3px; transform: rotate(25deg); } .flower6 { right: -15px; bottom: -15px; transform: rotate(30deg); } .petal { height: 1em; width: 1em; border-radius: 40% 70% / 7% 90%; background: linear-gradient(#fff, #93e0ee); border: 0.5px solid #96d1ec; z-index: 0; transition: width 0.8s ease, height 0.8s ease; } .two { transform: rotate(90deg); } .three { transform: rotate(270deg); } .four { transform: rotate(180deg); } .btns:hover .petal { background: linear-gradient(#9ac9ff, #cfb6ff); border: 0.5px solid #96b4ec; } .btns:hover .flower { grid-template-columns: 1.5em 1.5em; } .btns:hover .flower .petal { width: 1.5em; height: 1.5em; } .btns:hover .text { background: rgba(255, 255, 255, 0.4); } .btns:hover div.flower1 { animation: 15s linear 0s normal none infinite running flower1; } @keyframes flower1 { 0% { transform: rotate(5deg); } 100% { transform: rotate(365deg); } } .btns:hover div.flower2 { animation: 13s linear 1s normal none infinite running flower2; } @keyframes flower2 { 0% { transform: rotate(35deg); } 100% { transform: rotate(-325deg); } } .btns:hover div.flower3 { animation: 16s linear 1s normal none infinite running flower3; } @keyframes flower3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btns:hover div.flower4 { animation: 17s linear 1s normal none infinite running flower4; } @keyframes flower4 { 0% { transform: rotate(15deg); } 100% { transform: rotate(375deg); } } .btns:hover div.flower5 { animation: 20s linear 1s normal none infinite running flower5; } @keyframes flower5 { 0% { transform: rotate(25deg); } 100% { transform: rotate(-335deg); } } .btns:hover div.flower6 { animation: 15s linear 1s normal none infinite running flower6; } @keyframes flower6 { 0% { transform: rotate(30deg); } 100% { transform: rotate(390deg); } } @media screen and (max-width:1200px){ .thanks{padding-top: 60px;} } @media screen and (max-width:767px){ .thanks{padding-top: 40px;margin:0px auto 70px} } @media screen and (max-width:560px){ } /* 搜索页 */ .search{background-color: white;} .in_search_tit{padding-bottom:70px; text-align:center;background-color: white;} .in_search_tit h2{font-size:34px; color:var(--i_color); font-weight:bold; text-transform:uppercase;padding-top: 0.4rem;} .in_search_tit p{margin:16px 0; font-size:24px; color:#757575} .in_search{width:510px; margin:0 auto; border:1px solid var(--border_color); overflow:hidden} .in_search .search_ipt{float:left; box-sizing:border-box; padding-left:10px; width:calc(100% - 110px); font-size:15px; color:#333; line-height:46px} .in_search .search_btn{float:right; width:110px; height:46px; line-height:46px; background:var(--i_color); font-size:18px; color:#FFF;cursor: pointer;} @media screen and (max-width:1440px){ .in_search_tit{} .in_search_tit h2{font-size:32px} .in_search_tit p{font-size:22px} .pd_other li{width: 23%;margin-bottom: 0.6rem;} } @media screen and (max-width:1366px){ .in_search_tit h2{font-size:28px} .in_search_tit p{font-size:20px} .in_search .search_btn{font-size:16px} } @media screen and (max-width:1200px){ .in_search_tit{padding-bottom:60px} .in_search_tit h2{font-size:26px} .in_search_tit p{margin:10px auto 16px; font-size:18px} .pd_other li{width: 23%;margin-bottom: 0.4rem;} } @media screen and (max-width:959px){ .in_search_list li{margin-bottom:30px} .in_search_tit h2{font-size:24px} .in_search_tit p{font-size:17px} .pd_other li{width: 23%;margin-bottom: 0.2rem;} } @media screen and (max-width:767px){ .in_search_tit{padding-bottom:40px} .in_search{width:90%} .in_search_tit h2{font-size:22px} .in_search_tit p{font-size:16px} } @media screen and (max-width:560px){ .in_search_tit{padding-bottom:34px} .in_search{width:94%} .in_search_tit h2{font-size:20px} .in_search_tit p{font-size:14px} .in_search .search_ipt{line-height:38px} .in_search .search_btn{height:38px; line-height:38px} } /* search results list */ .in_search_list { padding-bottom: .6rem; overflow: hidden; } .in_search_list li { box-sizing: border-box; border: 1px solid var(--border_color); margin-bottom: 0.26rem; } .in_search_list a { display: block; padding: .2rem; } .in_search_list h2 { font-size: 0.18rem; color: #212121; font-weight: bold; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .in_search_list h6 { margin: .1rem 0; font-size: 0.14rem; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .in_search_list i { display: inline-block; padding: .06rem .1rem; font-size: 0.13rem; color: var(--i_color); background: #EDEDED; -webkit-border-radius: .04rem; border-radius: .04rem; } @media screen and (max-width:1024px) { .in_search_list h2 { font-size: 0.15rem; white-space: initial; } .in_search_list h6 { font-size: 0.13rem; } .in_search_list i { font-size: 0.12rem; } } @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .in_search_list li { margin-bottom: 0.2rem; } } @media screen and (max-width:560px) { .in_search_list { padding-bottom: .3rem } } .main{ background-color: white; width: 100%; height: 100%; position: relative; } /* 404 */ .in404{position:absolute; top:0; left:0; width:100%; height:100%; background:#FFF} .in404_text{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center} .in404_text h1{font-size:220px; color:#BBB} .in404_text h6{margin:10px auto 30px; font-size:18px; color:#999} .in404_text a{display:inline-block; padding:0 40px; line-height:32px; font-size:15px; color:#999; border:2px solid #DDD; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px} @media screen and (max-width:959px){ .in404_text h1{font-size:180px} } @media screen and (max-width:767px){ .in404_text h1{font-size:140px} .in404_text h6{font-size:16px} .in404_text a{font-size:14px} } @media screen and (max-width:560px){ .in404_text h1{font-size:70px} .in404_text h6{margin:10px auto 18px; font-size:14px; line-height:20px} .in404_text a{font-size:13px} } .banner_top{ margin-top: var(--header_height); } /* tag */ .tag{ box-sizing: border-box; padding: 0.8rem 0; } .tag h2{ font-size: 0.4rem; font-weight: bold; text-transform: uppercase; color: #333; text-align: center; } .tag .products_all_right{ width: 100%; } .tag p{ font-size: 0.2rem; color: #333; margin: 0.2rem 0 0.4rem 0; text-align: center; } .tag .products_eyes{ display: none; } .tanchu_shide{ display: none; } .form_hide{ display: none !important; } .abc {}