body { --ww: 7.6vw; --bj: var(--ww); --top: 0.9rem; --color: #f26522; --gap: 0.9rem; --f14: 0.14rem; --f16: 0.16rem; --f18: 0.18rem; --f20: 0.2rem; --f22: 0.22rem; --f24: 0.24rem; --f26: 0.26rem; --f28: 0.28rem; --f30: 0.3rem; --f32: 0.32rem; --f34: 0.34rem; --f36: 0.36rem; --f40: 0.4rem; --f42: 0.42rem; --f44: 0.44rem; --f46: 0.46rem; --f48: 0.48rem; --f52: 0.52rem; --f54: 0.54rem; --f56: 0.56rem; --f58: 0.58rem; --f60: 0.6rem; --f62: 0.62rem; --f66: 0.66rem; } @media (min-width: 1921px) { body { --bj: calc((100vw - (19.2rem - var(--ww))) / 2); } } @media screen and (max-width: 1520px) { body { --f14: 12px; --f16: 14px; --f18: 16px; --f20: 18px; --f22: 18px; --f24: 20px; --f26: 22px; } } @media screen and (max-width: 1200px) { body { --f20: 16px; --f22: 16px; --f24: 18px; --f26: 20px; --f28: 0.36rem; --f30: 0.36rem; --f32: 0.36rem; --f34: 0.38rem; --f36: 0.4rem; --f40: 0.4rem; --f42: 0.4rem; --f44: 0.4rem; --f46: 0.4rem; --f48: 0.4rem; --f52: 0.5rem; --f54: 0.5rem; --f56: 0.52rem; --f58: 0.52rem; --f60: 0.54rem; --f62: 0.56rem; --f66: 0.56rem; --bj: 5vw; --top: 60px; --gap: 0.8rem; } } @media screen and (max-width: 767px) { body { --f14: 0.26rem; --f16: 0.28rem; --f18: 0.3rem; --f20: 0.3rem; --f22: 0.32rem; --f24: 0.34rem; --f26: 0.34rem; --f28: 0.4rem; --f30: 0.4rem; --f32: 0.4rem; --f34: 0.4rem; --f36: 0.4rem; --f40: 0.4rem; --f42: 0.4rem; --f44: 0.4rem; --f46: 0.4rem; --f48: 0.42rem; --f52: 0.44rem; --f54: 0.44rem; --f56: 0.46rem; --f58: 0.46rem; --f60: 0.48rem; --f62: 0.48rem; --f66: 0.48rem; } } :root{ --primary-color : #031600; --secondary-color : #EFF1ED; --bg-color : #FFFFFF; --text-color : #888888; --accent-color : #f26522; --white-color : #FFFFFF; --black-color : #000000; --divider-color : #0316001A; --dark-divider-color : #FFFFFF1A; --error-color : rgb(230, 87, 87); --default-font : "Inter Tight", sans-serif; } body::-webkit-scrollbar { width: 8px; height: 8px; } body::-webkit-scrollbar-thumb { border-radius: 8px; background: linear-gradient(to right, #f26522, #f1c269); } body::-webkit-scrollbar-track { border-radius: 8px; background: #fff; } @-moz-document url-prefix() { body { scrollbar-color: #f26522 #fff; scrollbar-width: thin; -ms-overflow-style: none; } } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } /** 纵向滚动条样式 */ .public_author { position: relative; top: calc(var(--top) * -1 + 1px); } html, body { scroll-behavior: smooth; } .Sitemap, .Privacy_Policy { padding-top: var(--gap); } .pt { padding-top: var(--gap); } .pb { padding-bottom: var(--gap); } .row { display: flex ; flex-wrap: wrap; } .wMain { padding-left: var(--bj); padding-right: var(--bj); width: 100%; } .Privacy_Policy .box_ .content1 { font-size: var(--f42); } .Privacy_Policy .box_ .hr { border-top: 1px solid #eee; margin: 0.5rem 0; } .Privacy_Policy .box_ .content3 { font-size: var(--f18); line-height: 1.8; color: #666; } .Search_List .box1 { padding: 1.4rem 0 0.5rem; font-size: var(--f20); background: #f6f6f6; } .Search_List .box2 { min-height: 40vh; } .Search_List .box2 .item { padding: 0.2rem 0.8rem; border-bottom: 1px solid #eee; } @media screen and (max-width: 1200px) { .Search_List .box2 .item { padding: 0.2rem 0rem; } } .Search_List .box2 .item a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .Search_List .box2 .item a .left { max-width: 80%; } .Search_List .box2 .item a .left .t { font-size: var(--f14); color: #999; } .Search_List .box2 .item a .left .b { font-size: var(--f24); color: #333; transition: 0.4s; margin-top: 12px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .Search_List .box2 .item a .right { font-size: var(--f16); color: var(--color); display: flex; flex-wrap: wrap; align-items: center; transition: 0.4s; } .Search_List .box2 .item a .right i { font-size: var(--f16); display: inline-block; transition: 0.4s; } .Search_List .box2 .item a:hover .b { color: #f26522; } .Search_List .box2 .item a:hover .right i { transform: translateX(5px); } .Search_List .box3 { font-size: var(--f18); text-align: center; } .Sitemap .ap_top { border-bottom: 1px solid #ccc; padding-bottom: 0.46rem; } .Sitemap .ap_top p { font-size: var(--f42); color: #000; } .Sitemap .ap_bot .item { padding: 0.44rem 0; border-bottom: 1px solid #ccc; } .Sitemap .ap_bot .item .content1 a { color: #000; transition: 0.4s; font-size: var(--f26); } .Sitemap .ap_bot .item .content1 a:hover { color: #f26522; } .Sitemap .ap_bot .item .content2 { margin-top: 0.22rem; font-size: var(--f20); } .Sitemap .ap_bot .item .content2 .firstorder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.2rem; } .Sitemap .ap_bot .item .content2 .firstorder a { transition: 0.4s; color: #333; } .Sitemap .ap_bot .item .content2 .firstorder a:hover { color: #f26522; } .Sitemap .ap_bot .item .content2 .multistage { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.2rem; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_1 a { transition: 0.4s; color: #333; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_1 a:hover { color: #f26522; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 { margin-top: 0.26rem; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .title_3 a { font-size: 0.9em; transition: 0.4s; color: #333; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .title_3 a:hover { color: #f26522; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 { padding-left: 0.1rem; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 { margin-top: 0.14rem; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .title_4 a { display: flex; flex-wrap: wrap; align-items: center; font-size: 0.8em; transition: 0.4s; color: #666; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .title_4 a i { transition: 0.4s; font-size: 0.9em; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .title_4 a span { flex: 1; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .title_4 a:hover { color: #f26522; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 { padding-left: 0.1rem; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 .div_5 { margin-top: 0.1rem; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 .div_5 a { display: flex; flex-wrap: wrap; align-items: center; font-size: 0.8em; transition: 0.4s; color: #666; line-height: 1.4; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 .div_5 a i { transition: 0.4s; font-size: 0.9em; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 .div_5 a span { flex: 1; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 .div_5 a + a { margin-top: 4px; } .Sitemap .ap_bot .item .content2 .multistage .ge_list .div_2 .div_3 .box_3 .div_4 .box_4 .div_5 a:hover { color: #f26522; } @media (max-width: 1200px) { .Sitemap .ap_bot .item .content2 .multistage, .Sitemap .ap_bot .item .content2 .firstorder { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 750px) { .Sitemap .ap_bot .item .content2 .multistage, .Sitemap .ap_bot .item .content2 .firstorder { grid-template-columns: repeat(2, 1fr); } } .pc_header { transition: 0.4s; z-index: 5; position: fixed; top: 0; width: 100%; } .pc_header .he_box { transition: 0.4s; position: relative; padding: 0 20px; } .pc_header .he_box::before { transition: 0.4s; z-index: -1; content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: calc(100% - 1rem); height: 100%; border-radius: 0.44rem; } .pc_header .he_box .logo a img { height: 0.54rem; } .pc_header .he_box .logo a .white { display: none; } .pc_header .he_box .column { font-size: var(--f18); } .pc_header .he_box .column .nav { --w: 0.4rem; transition: 0.4s; } .pc_header .he_box .column .nav .slide .item a { transition: 0.4s; color: #666; line-height: var(--top); } .pc_header .he_box .column .nav .slide .down { display: none; position: absolute; left: 50%; transform: translateX(-50%); min-width: 12.8rem; padding-top: .1rem; } .pc_header .he_box .column .nav .slide .down > div { display: flex; flex-wrap: wrap; justify-content: space-between; background: #fff; border-radius: 0.2rem; filter: drop-shadow(0px 0px 30px rgba(204, 217, 231, 0.5)); padding: 0.5rem; } .pc_header .he_box .column .nav .slide .down > div .le_box { min-width: 3.86rem; } .pc_header .he_box .column .nav .slide .down > div .le_box a { transition: 0.8s; font-size: var(--f24); padding: 0.12rem; border-radius: 0.3rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .pc_header .he_box .column .nav .slide .down > div .le_box a .text { transition: 0.4s; color: #666; font-family: Juana; padding: 0 0.2rem; } .pc_header .he_box .column .nav .slide .down > div .le_box a .btn { transition: 0.4s; opacity: 0; width: var(--w); height: var(--w); background: linear-gradient(to right, #f26522, #f1c269); border-radius: 50%; color: #fff; font-size: var(--f16); display: flex; } .pc_header .he_box .column .nav .slide .down > div .le_box a .btn i { margin: auto; } .pc_header .he_box .column .nav .slide .down > div .le_box a + a { margin-top: 0.12rem; } .pc_header .he_box .column .nav .slide .down > div .le_box a.active, .pc_header .he_box .column .nav .slide .down > div .le_box a:hover { background: #f6f6f6; } .pc_header .he_box .column .nav .slide .down > div .le_box a.active .text, .pc_header .he_box .column .nav .slide .down > div .le_box a:hover .text { color: #333; font-family: Juana; } .pc_header .he_box .column .nav .slide .down > div .le_box a.active .btn, .pc_header .he_box .column .nav .slide .down > div .le_box a:hover .btn { opacity: 1; } .pc_header .he_box .column .nav .slide .down > div .ri_box { width: 65%; } .pc_header .he_box .column .nav .slide .down > div .ri_box p { display: none; border-radius: .16rem; overflow: hidden; } .pc_header .he_box .column .nav .slide .down > div .ri_box p a span{line-height:2;} .pc_header .he_box .column .nav .slide .down > div .ri_box p a{ width: 48%; float: left; margin-left: 2%; margin-bottom: 2%; text-align: center} .pc_header .he_box .column .nav .slide .down > div .ri_box p img { width: 100%; border-radius: .16rem; } .pc_header .he_box .column .nav .slide .down > div .ri_box p.active { display: block; } .pc_header .he_box .column .nav .slide .default { display: none; position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - (var(--bj) * 2)); padding-top: .1rem; } .pc_header .he_box .column .nav .slide .default > div { display: flex; background: #fff; border-radius: 0.2rem; filter: drop-shadow(0px 0px 30px rgba(204, 217, 231, 0.5)); padding: 0.36rem 0.4rem; } .pc_header .he_box .column .nav .slide .default > div a { min-width: 2.7rem; display: flex; flex-wrap: wrap; align-items: center; padding: 0.12rem; border-radius: 0.3rem; background: #f6f6f6; } .pc_header .he_box .column .nav .slide .default > div a .le_ { display: flex; flex-wrap: wrap; padding: 0 0.2rem; flex: 1; } .pc_header .he_box .column .nav .slide .default > div a .le_ .svg { width: var(--f22); display: flex; } .pc_header .he_box .column .nav .slide .default > div a .le_ .svg img { transition: 0.4s; max-width: 100%; filter: brightness(0); opacity: 0.4; } .pc_header .he_box .column .nav .slide .default > div a .le_ .wz { flex: 1; transition: 0.4s; color: #666; font-family: Juana; padding-left: 0.1rem; } .pc_header .he_box .column .nav .slide .default > div a .btn { transition: 0.4s; opacity: 0; width: var(--w); height: var(--w); background: linear-gradient(to right, #f26522, #f1c269); border-radius: 50%; color: #fff; font-size: var(--f16); display: flex; } .pc_header .he_box .column .nav .slide .default > div a .btn i { margin: auto; } .pc_header .he_box .column .nav .slide .default > div a.active .le_ .svg img, .pc_header .he_box .column .nav .slide .default > div a:hover .le_ .svg img { filter: brightness(1); opacity: 1; } .pc_header .he_box .column .nav .slide .default > div a.active .le_ .wz, .pc_header .he_box .column .nav .slide .default > div a:hover .le_ .wz { color: #333; font-family: Juana; } .pc_header .he_box .column .nav .slide .default > div a.active .btn, .pc_header .he_box .column .nav .slide .default > div a:hover .btn { opacity: 1; } .pc_header .he_box .column .nav .slide .default > div a + a { margin-left: 0.2rem; } .pc_header .he_box .column .nav .slide + .slide { margin-left: 0.32rem; } .pc_header .he_box .column .nav .slide:hover .item a, .pc_header .he_box .column .nav .slide.active .item a { color: #f26522; } .pc_header .he_box .column .menu { } .pc_header .he_box .column .menu .gw { position: relative; transition: 0.4s; } .pc_header .he_box .column .menu .gw .div1 { cursor: pointer; } .pc_header .he_box .column .menu .gw .div1 svg { transition: 0.4s; width: var(--f20); } .pc_header .he_box .column .menu .gw .div1 svg path { transition: 0.4s; } .pc_header .he_box .column .menu .gw .div1 .s2 { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pc_header .he_box .column .menu .gw .div2 { transition: 0.4s; position: absolute; right: 150%; top: 50%; transform: translateY(-50%) scale(0); transform-origin: right center; } .pc_header .he_box .column .menu .gw .div2 > div { white-space: nowrap; display: flex; border: 1px solid #bbb; border-radius: calc(var(--top) / 1.8 / 2); padding: 0.16rem 0.2rem; } .pc_header .he_box .column .menu .gw .div2 > div a { display: flex; align-items: center; } .pc_header .he_box .column .menu .gw .div2 > div a img { width: var(--f18); } .pc_header .he_box .column .menu .gw .div2 > div a span { transition: 0.4s; font-size: var(--f16); margin-left: 0.1rem; color: #666; } .pc_header .he_box .column .menu .gw .div2 > div a + a { margin-left: 0.3rem; } .pc_header .he_box .column .menu .gw .div2 > div a:hover span { color: #f26522 !important; } .pc_header .he_box .column .menu .search { position: relative; cursor: pointer; margin-left: 0.4rem; font-size: var(--f16); } .pc_header .he_box .column .menu .search .div1 { position: relative; } .pc_header .he_box .column .menu .search .div1 svg { transition: 0.4s; width: var(--f20); } .pc_header .he_box .column .menu .search .div1 svg path { transition: 0.4s; } .pc_header .he_box .column .menu .search .div1 .s2 { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pc_header .he_box .column .menu .search .div2 { transition: 0.4s; position: absolute; right: 150%; top: 50%; transform: translateY(-50%) scale(0); transform-origin: right center; } .pc_header .he_box .column .menu .search .div2 form { width: 4.6rem; display: flex; flex-wrap: wrap; align-items: center; border: 1px solid #bbb; border-radius: calc(var(--top) / 1.8 / 2); padding: 0 0.2rem; } .pc_header .he_box .column .menu .search .div2 form .inp { flex: 1; } .pc_header .he_box .column .menu .search .div2 form .inp input { width: 100%; border: none; height: calc(var(--top) / 1.8); background: none; color: #000; } .pc_header .he_box .column .menu .search .div2 form .inp input::placeholder { color: #999; } .pc_header .he_box .column .menu .search .div2 form span svg path { transition: 0.4s; } .pc_header .he_box .column .menu .lxwm { margin-left: 0.5rem; } .pc_header.opt_1 .he_box .column .nav { opacity: 0; } .pc_header.opt_1 .he_box .column .menu .gw { opacity: 0; } .pc_header.opt_1 .he_box .column .menu .search .div1 .s1 { opacity: 0; } .pc_header.opt_1 .he_box .column .menu .search .div1 .s2 { opacity: 1; } .pc_header.opt_1 .he_box .column .menu .search .div2 { transform: translateY(-50%) scale(1); } .pc_header.opt_2 .he_box .column .nav { opacity: 0; } .pc_header.opt_2 .he_box .column .menu .gw .div1 .s1 { opacity: 0; } .pc_header.opt_2 .he_box .column .menu .gw .div1 .s2 { opacity: 1; } .pc_header.opt_2 .he_box .column .menu .gw .div2 { transform: translateY(-50%) scale(1); } .pc_header.home { background: linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,0)); } .pc_header .he_box .logo a div img { float: left; margin-right: 10px} .pc_header .he_box .logo a div h2 { float: left; line-height:0.54rem } .pc_header.home .he_box .logo a h2{color:#fff} .pc_header.home .he_box .logo a .white img { display: none; } .pc_header.home .he_box .logo a .white { display: block; } .pc_header.home .he_box .logo a .white h2{ color:#1a1a1a} .pc_header.home .he_box .column .nav .slide .item a { color: rgba(255, 255, 255, 0.8); } .pc_header.home .he_box .column .nav .slide:hover .item a, .pc_header.home .he_box .column .nav .slide .item.active a { color: #fff; } .pc_header.home .he_box .column .menu .gw .div1 svg path { fill: #ffffff; } .pc_header.home .he_box .column .menu .gw .div2 > div { border-color: #fff; } .pc_header.home .he_box .column .menu .gw .div2 > div a span { color: #fff; } .pc_header.home .he_box .column .menu .search .div1 svg path { fill: #ffffff; } .pc_header.home .he_box .column .menu .search .div2 form { border-color: #fff; } .pc_header.home .he_box .column .menu .search .div2 form .inp input { color: #fff; } .pc_header.home .he_box .column .menu .search .div2 form .inp input::placeholder { color: #fff; } .pc_header.home .he_box .column .menu .search .div2 form span svg path { fill: #fff; } .pc_header.home .he_box .column .menu .lxwm .pu_link .a { background: transparent; outline: 1px solid #fff; } .pc_header.active { top: 0.2rem; background: none; } .pc_header.active .he_box { padding: 0 0.7rem 0 0.86rem; transition-delay: 0.2s; } .pc_header.active .he_box::before { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); transition-delay: 0.2s; } .pc_header.active .he_box .logo a img { height: 0.4rem; display: block; } .pc_header.active .he_box .logo a h2{ color: #1a1a1a; line-height: 0.4rem} .pc_header.active .he_box .logo a .white { display: none; } .pc_header.active .he_box .column .nav .slide .item a { color: #666; } .pc_header.active .he_box .column .nav .slide:hover .item a, .pc_header.active .he_box .column .nav .slide.active .item a { color: #f26522; } .pc_header.active .he_box .column .menu .gw .div1 svg path { fill: #333333; } .pc_header.active .he_box .column .menu .gw .div2 > div { border-color: #bbb; } .pc_header.active .he_box .column .menu .gw .div2 > div a span { color: #666; } .pc_header.active .he_box .column .menu .search .div1 svg path { fill: #333333; } .pc_header.active .he_box .column .menu .search .div2 form { border-color: #bbb; } .pc_header.active .he_box .column .menu .search .div2 form .inp input { color: #000; } .pc_header.active .he_box .column .menu .search .div2 form .inp input::placeholder { color: #999; } .pc_header.active .he_box .column .menu .search .div2 form span svg path { fill: #333333; } .pc_header.active .he_box .column .menu .lxwm .pu_link .a { background: linear-gradient(to right, #f26522, #f1c269); outline: none; } .pc_header.on { top: calc(var(--top) * -1); } .pc_footer { background: #000 url(../images/footbg.jpg) no-repeat center; font-size: var(--f16); } .pc_footer .ter_top .content1 { padding: 0.36rem 0; } .pc_footer .ter_top .content1 .logo a img { height: 0.86rem; } .pc_footer .ter_top .content1 .dianbu { display: flex; flex-wrap: wrap; } .pc_footer .ter_top .content1 .fslogan{ color:#fff; font-size:var(--f32) } .pc_footer .ter_top .content1 .dianbu a { transition: 0.4s; color: #666; font-size: var(--f20); display: flex; flex-wrap: wrap; align-items: center; } .pc_footer .ter_top .content1 .dianbu a img { width: var(--f20); } .pc_footer .ter_top .content1 .dianbu a span { margin-left: 0.1rem; } .pc_footer .ter_top .content1 .dianbu a + a { margin-left: 0.22rem; } .pc_footer .ter_top .content1 .dianbu a:hover { color: #f26522; } .pc_footer .ter_top .content2 .f_about{ width: 30%} .pc_footer .ter_top .content2 .f_about p{ font-size: var(--f24); transition: 0.4s; color: #fff; line-height: 1.8;} .pc_footer .ter_top .content2 { padding: 0.5rem 0 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .pc_footer .ter_top .content2 .feng { margin-top: 0.5rem; } .pc_footer .ter_top .content2 .feng ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .pc_footer .ter_top .content2 .feng ul li { margin-right: 0.16rem; position: relative; } .pc_footer .ter_top .content2 .feng ul li a { opacity: 0.3; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .pc_footer .ter_top .content2 .newsletter-area h2{transition: 0.4s; color: #fff; font-size: var(--f24);} .pc_footer .ter_top .content2 .nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.1rem; } .pc_footer .ter_top .content2 .nav .item { font-size: var(--f20); } .pc_footer .ter_top .content2 .nav .item .one a { transition: 0.4s; color: #fff; font-size: var(--f24); } .pc_footer .ter_top .content2 .nav .item .one a:hover { color: #f26522; } .pc_footer .ter_top .content2 .nav .item .two { margin-top: 0.4rem; } .pc_footer .ter_top .content2 .nav .item .two a { transition: 0.4s; color: #fff; opacity: 0.3 } .pc_footer .ter_top .content2 .nav .item .two a + a { margin-top: 0.2rem; } .pc_footer .ter_top .content2 .nav .item .two a:hover { color: #fff; opacity: 1 } .pc_footer .ter_top .content2 .newsletter-area form { width: 3.5rem; display: block; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.5rem; position: relative; margin-top: 0.4rem; } .pc_footer .ter_top .content2 .newsletter-area form input { font-size: var(--f16); color: #fff; height: 0.46rem; width: 100%; background: none; border: 0; padding: 0 0.4rem; } .pc_footer .ter_top .content2 .newsletter-area form .submit { position: absolute; right: 0.36rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .pc_footer .ter_top .content2 .newsletter-area form .submit svg { cursor: pointer; } .pc_footer .ter_top .content3 { padding: 0.55rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .pc_footer .ter_top .content3 .lxwm { display: flex; flex-wrap: wrap; } .pc_footer .ter_top .content3 .lxwm div { display: flex; flex-wrap: wrap; align-items: flex-start; /*align-items: center;*/ } .pc_footer .ter_top .content3 .lxwm div img { width: var(--f26); } .pc_footer .ter_top .content3 .lxwm div a { transition: 0.4s; color: #FFF; font-size: var(--f22); opacity: 0.5 } .pc_footer .ter_top .content3 .lxwm div a:hover[href] { color: #f26522; } .pc_footer .ter_top .content3 .lxwm div + div { margin-left: 0.5rem; } .pc_footer .ter_top .content3 .share { display: flex; flex-wrap: wrap; } .pc_footer .ter_top .content3 .share a{ color: #FFF; opacity: 0.5; font-size: var(--f22)} .pc_footer .ter_top .content3 .share .li { position: relative; cursor: pointer; } .pc_footer .ter_top .content3 .share .li > a img { max-width: var(--f36); transition: 0.4s; filter: brightness(0); opacity: 0.4; } .pc_footer .ter_top .content3 .share .li .post { transition: 0.4s; opacity: 0; pointer-events: none; z-index: 1; position: absolute; font-size: 0.88em; color: #666; bottom: 180%; left: 50%; transform: translateX(-50%); transform-origin: center bottom; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); display: flex; border-radius: 0.1rem; padding: 0.16rem; text-align: center; } .pc_footer .ter_top .content3 .share .li .post::before { content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; } .pc_footer .ter_top .content3 .share .li .post > div { position: relative; } .pc_footer .ter_top .content3 .share .li .post > div::before { content: ""; position: absolute; width: 1px; height: 100%; top: 0; right: -0.16rem; background: #eee; } .pc_footer .ter_top .content3 .share .li .post > div .code { position: relative; width: 1.04rem; overflow: hidden; } .pc_footer .ter_top .content3 .share .li .post > div .code img { width: 100%; } .pc_footer .ter_top .content3 .share .li .post > div .code span { width: 100%; position: absolute; top: 0; left: 0; animation: runEwm 2s linear infinite; } .pc_footer .ter_top .content3 .share .li .post > div .code span img { width: 100%; } .pc_footer .ter_top .content3 .share .li .post > div .wz { margin-top: 4px; } .pc_footer .ter_top .content3 .share .li .post > div + div { margin-left: 0.32rem; } .pc_footer .ter_top .content3 .share .li + .li { margin-left: 0.26rem; } @media (min-width: 1200px) { .pc_footer .ter_top .content3 .share .li:hover > a img { filter: brightness(1); opacity: 1; } .pc_footer .ter_top .content3 .share .li:hover .post { opacity: 1; } } @media (max-width: 1200px) { .pc_footer .ter_top .content3 .share .li.active > a img { filter: brightness(1); opacity: 1; } .pc_footer .ter_top .content3 .share .li.active .post { opacity: 1; } } .pc_footer .ter_bot { background: #ebebeb; color: #999; padding: 0.22rem var(--bj); } .pc_footer .ter_bot .copy { display: flex; flex-wrap: wrap; } .pc_footer .ter_bot .copy p a { display: inline; color: #999; transition: 0.4s; } .pc_footer .ter_bot .copy p a:hover { color: #f26522; } .pc_footer .ter_bot .yszc a { display: inline; transition: 0.4s; color: #999; } .pc_footer .ter_bot .yszc a:hover { color: #f26522; } .pc_footer .ter_bot .yszc a + a { margin-left: 0.1rem; } @keyframes runEwm { 0% { top: 0; } 50% { top: 90%; } 100% { top: 0; } } .pu_link { display: inline-block; } .pu_link .a { --h: .58rem; cursor: pointer; transition: 0.4s; overflow: hidden; min-width: 1.82rem; height: var(--h); border-radius: calc(var(--h) / 2); padding: 0 0.33rem; background: linear-gradient(to right, #f26522, #f1c269); color: #fff; font-size: var(--f18); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .pu_link .a p { position: relative; z-index: 2; } .pu_link .a .circle { position: relative; display: flex; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 50%; margin-left: 0.16rem; } .pu_link .a .circle::after, .pu_link .a .circle::before { content: ""; position: absolute; top: -18px; right: -18px; bottom: -18px; left: -18px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100%; opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .pu_link .a .circle span { display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: auto; } .pu_link .a:hover .circle::after, .pu_link .a:hover .circle::before { animation: sonarAnimation 2.8s 0.1s cubic-bezier(0.075, 0.82, 0.165, 1); } .pu_link .a:hover .circle::after { animation-delay: 0.3s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .pu_link.height_ .a { min-width: 1.5rem; height: 0.48rem; padding: 0 0.28rem; font-size: var(--f16); } .pu_link.height_ .a:hover { background: linear-gradient(to right, #f26522, #f1c269) !important; outline: none !important; } .pu_link.white .a { background: transparent; outline: 1px solid #fff; min-width: 1.5rem; height: 0.48rem; padding: 0 0.28rem; font-size: var(--f16); } .pu_link.white .a:hover { background: linear-gradient(to right, #f26522, #f1c269); outline: none; } .pu_link.border .a { position: relative; background: transparent; color: #000; } .pu_link.border .a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; background: linear-gradient(to right, #f26522, #f1c269) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: inherit; } .pu_link.border .a .circle { border-color: #f26522; } .pu_link.border .a .circle span { background: linear-gradient(to right, #f26522, #f1c269); } .pu_link.border .a:hover { background: linear-gradient(to right, #f26522, #f1c269); color: #fff; } .pu_link.border .a:hover .circle { border-color: #fff; } .pu_link.border .a:hover .circle span { background: #fff; } .pu_link + .pu_link { margin-left: 0.15rem; } .home_box .x1 { color: #f26522; font-size: var(--f24); } .home_box .x2 { margin-top: 0.2rem; color: #000; font-size: var(--f42); line-height: 1.3; } .home_box .x2 span { color: #666; } .home_box .x2 span.on { color: #000; } .home_box.white .x1, .home_box.white .x2 { color: #fff; } .m78 { margin-top: 0.78rem; } @keyframes sonarAnimation { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 5% { opacity: 0.8; } 100% { opacity: 0; -webkit-transform: scale(1.8); transform: scale(1.8); } } .index_banner { position: relative; } .index_banner .swiper .swiper-slide { position: relative; } .index_banner .swiper .swiper-slide .slide_img { width: 100%; } .index_banner .swiper .swiper-slide .slide_img img, .index_banner .swiper .swiper-slide .slide_img video { width: 100%; height: var(--vh); } .index_banner .swiper .swiper-slide .slide_post { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 0 var(--bj); display: flex; } .index_banner .swiper .swiper-slide .slide_post > div { width: 100%; margin: auto; font-size: var(--f62); color: #fff; } .index_banner .swiper .swiper-slide .slide_post > div .t1 { opacity: 0; transform: translateY(0.6rem); transition: 0.5s; } .index_banner .swiper .swiper-slide .slide_post > div .t2 { margin-top: 0.1rem; font-size: 0.44em; font-family: Juana; opacity: 0; transform: translateY(0.6rem); transition: 0.5s 0.25s; } .index_banner .swiper .swiper-slide .slide_post > div .t3 { margin-top: 0.66rem; font-size: 0; opacity: 0; transform: translateY(0.6rem); transition: 0.5s 0.5s; } .index_banner .swiper .swiper-slide-active .slide_post > div .t1, .index_banner .swiper .swiper-slide-active .slide_post > div .t2, .index_banner .swiper .swiper-slide-active .slide_post > div .t3 { opacity: 1; transform: translateY(0px); } .index_banner .div_ { --time: 5s; width: 100%; z-index: 2; position: absolute; padding: 0 var(--bj); bottom: 0.6rem; left: 0; display: flex; justify-content: flex-end; } .index_banner .div_ .li { cursor: pointer; color: #fff; display: flex; flex-wrap: wrap; align-items: center; } .index_banner .div_ .li svg { transform: rotate(-90deg); } .index_banner .div_ .li svg .cir2 { stroke-dashoffset: 55; stroke-dasharray: 55; } .index_banner .div_ .li span { margin-left: 0.1rem; font-size: var(--f20); } .index_banner .div_ .li + .li { margin-left: 0.5rem; } .index_banner .div_ .li.active svg .cir2 { animation: StrokeDashoffset var(--time) linear; } @keyframes StrokeDashoffset { 100% { stroke-dashoffset: 0; stroke-dasharray: 55; } } .index_about { position: relative; } .index_about .ut_video { width: 100%; } .index_about .ut_video video { width: 100%; height: var(--vh); } .index_about .ut_post { width: 100%; height: 100%; top: 0; left: 0; padding: var(--gap) var(--bj) 0px var(--bj); display: flex;justify-content: space-between; } .index_about .ut_post img{ border-radius:10px } .index_about .ut_post > div { width: 48%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } .index_about .ut_post > div .content1 .desc { font-size: var(--f20); color: #666; line-height: 1.8; margin: 0.4rem 0 0.65rem; } .index_about .content2 { display: flex;justify-content: space-between; padding: 0 var(--bj) } .index_about .content2 .li .num { color: #f26522; font-size: var(--f48); font-weight: bold } .index_about .content2 .li .desc { color: #666; font-size: var(--f18); } .index_about .content2 .li + .li { margin-left: 1.4rem; } .index_brand { position: relative; } .index_brand .nd_video { position: relative; height: 70vh; } .index_brand .nd_video div { transition: 0.4s; opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .index_brand .nd_video div video { width: 100%; height: 100%; } .index_brand .nd_video div.active { opacity: 1; } .index_brand .nd_video::before { z-index: 1; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); } .index_brand .nd_post { z-index: 2; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: var(--gap) var(--bj); } .index_brand .nd_post > div { width: min(6.8rem, 100%); height: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } .index_brand .nd_post > div .content2 .item { border-bottom: 1px solid transparent; } .index_brand .nd_post > div .content2 .item .m1 { cursor: pointer; transition: 0.4s; font-size: var(--f46); font-family: Juana; color: #fff; opacity: 0.5; } .index_brand .nd_post > div .content2 .item .m2 { display: none; padding-bottom: 0.2rem; } .index_brand .nd_post > div .content2 .item .m2 > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .index_brand .nd_post > div .content2 .item .m2 > div p { font-size: var(--f24); font-family: Juana; color: #fff; flex: .95; } .index_brand .nd_post > div .content2 .item .m2 > div a { font-size: var(--f16); width: 42px; height: 42px; background: linear-gradient(to right, #f26522, #f1c269); border-radius: 50%; color: #fff; display: flex; } .index_brand .nd_post > div .content2 .item .m2 > div a i { margin: auto; } .index_brand .nd_post > div .content2 .item + .item { margin-top: 0.35rem; } .index_brand .nd_post > div .content2 .item.active { border-color: rgba(255, 255, 255, 0.4); } .index_brand .nd_post > div .content2 .item.active .m1 { opacity: 1; font-family: Juana; } .index_quality { position: relative; overflow: hidden; } .index_quality .content_box { display: flex; } .index_quality .content_box .item { flex: 1; position: relative; transition: 0.6s; } .index_quality .content_box .item .em_img { position: relative; width: 100%; height: 100%; } .index_quality .content_box .item .em_img img { width: 100%; height: var(--vh); object-fit: none; } .index_quality .content_box .item .em_post { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: var(--gap) calc(var(--bj) / 2) var(--gap) var(--bj); } .index_quality .content_box .item .em_post > div { width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } .index_quality .content_box .item .em_post > div .content1 .btn { transition: 0.4s; opacity: 0; margin-top: 0.8rem; } .index_quality .content_box .item .em_post > div .content2 { width: fit-content; position: relative; display: flex; --g: 1.8rem; } .index_quality .content_box .item .em_post > div .content2::before { content: ""; position: absolute; left: 50%; top: 6px; width: 93.5%; height: 1px; transform: translateX(-50%); background: rgba(153, 153, 153, 0.2); } .index_quality .content_box .item .em_post > div .content2 .li { cursor: pointer; position: relative; } .index_quality .content_box .item .em_post > div .content2 .li .yuan { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ccc; border-radius: 50%; } .index_quality .content_box .item .em_post > div .content2 .li .yuan::after, .index_quality .content_box .item .em_post > div .content2 .li .yuan::before { transition: 0.4s; opacity: 0; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: linear-gradient(to right, #f26522, #f1c269); border-radius: 50%; } .index_quality .content_box .item .em_post > div .content2 .li .yuan::after { z-index: 1; width: 75%; height: 75%; background: #fff; } .index_quality .content_box .item .em_post > div .content2 .li .wz { padding-top: 22px; color: #000; font-size: var(--f16); } .index_quality .content_box .item .em_post > div .content2 .li + .li { margin-left: var(--g); } .index_quality .content_box .item .em_post > div .content2 .li.active .yuan::after, .index_quality .content_box .item .em_post > div .content2 .li.active .yuan::before { opacity: 1; } @media (min-width: 1200px) { .index_quality .content_box .item:hover { flex: 1.42; } .index_quality .content_box .item:hover .em_post > div .content1 .btn { opacity: 1; margin-top: 0.6rem; } } .index_quality .content_box .item_1 .em_img picture { transition: 0.4s; opacity: 0; position: absolute; width: 100%; height: 100%; } .index_quality .content_box .item_1 .em_img picture img { width: 100%; height: 100%; } .index_quality .content_box .item_1 .em_img picture.active { opacity: 1; } .index_news .ws_bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.32rem; } .index_news .ws_bot .grid { background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); border-radius: 0.14rem; } .index_news .ws_bot .grid a { height: 100%; } .index_news .ws_bot .grid a .img { width: 100%; overflow: hidden; border-radius: 0.14rem 0.14rem 0 0; } .index_news .ws_bot .grid a .img img { border-radius: 0.14rem 0.14rem 0 0; width: 100%; transition: 0.4s; } .index_news .ws_bot .grid a .box { padding: 0.38rem; } .index_news .ws_bot .grid a .box .content1 .t1 { color: #f26522; font-size: var(--f20); font-family: Juana; } .index_news .ws_bot .grid a .box .content1 .t2 { margin-top: 0.14rem; transition: 0.4s; font-family: Juana; color: #333; font-size: var(--f26); line-height: 1.5; height: 3em; } .index_news .ws_bot .grid a .box .content2 { margin-top: 0.84rem; color: #999; font-size: var(--f18); } .index_news .ws_bot .grid a:hover .img img { transform: scale(1.05); } .index_news .ws_bot .grid a:hover .box .content1 .t2 { color: #f26522; } .index_news .ws_bot .grid_all { --h: 0; background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); border-radius: 0.14rem; font-size: var(--f20); padding: 0.38rem; height: var(--h); } .index_news .ws_bot .grid_all .content1 { color: #f26522; font-family: Juana; } .index_news .ws_bot .grid_all .content2 { margin-top: 0.44rem; height: calc(var(--h) - 0.76rem - 0.44rem - 0.24rem); overflow: auto; padding-right: 0.1rem; } .index_news .ws_bot .grid_all .content2::-webkit-scrollbar { width: 2px; height: 2px; } .index_news .ws_bot .grid_all .content2::-webkit-scrollbar-thumb { border-radius: 2px; background: #f26522; } .index_news .ws_bot .grid_all .content2::-webkit-scrollbar-track { border-radius: 2px; background: rgba(0, 0, 0, 0.2); } @-moz-document url-prefix() { .index_news .ws_bot .grid_all .content2 { scrollbar-color: #f26522 rgba(0, 0, 0, 0.2); scrollbar-width: thin; -ms-overflow-style: none; } } .index_news .ws_bot .grid_all .content2 a { transition: 0.4s; font-family: Juana; color: #333; line-height: 1.6; height: 3.2em; font-size: 1.1em; } .index_news .ws_bot .grid_all .content2 a + a { margin-top: 0.36rem; } .index_news .ws_bot .grid_all .content2 a:hover { color: #f26522; } .pu_md { display: flex; flex-wrap: wrap; color: #999; } .pu_md i { font-style: normal; margin: 0 6px; } .pu_md a { transition: 0.4s; color: #999; } .pu_md a:hover { color: #f26522; } .pu_text { font-size: var(--f32); color: #fff; } .pu_level { } .pu_level > div div a { transition: 0.4s; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--f20); color: #666; } .pu_level > div div a svg { transform: rotate(-90deg); } .pu_level > div div a svg .cir2 { stroke-dashoffset: 55; stroke-dasharray: 55; } .pu_level > div div a span { margin-left: 0.14rem; } .pu_level > div div + div { margin-left: 0.36rem; } .pu_level > div div.active a { color: #fff; } .pu_level > div div.active a svg .cir2 { animation: StrokeDashoffset 0.4s linear forwards; } } @media (min-width: 1200px){ .pu_level > div div:hover a { color: #000; } .pu_level > div div:hover a svg .cir2 { animation: StrokeDashoffset 0.4s linear forwards; } } .nianxingheader { display: none !important; z-index: 4; position: fixed; left: 0; top: -100%; width: 100%; } .nianxingheader .pu_level { background: #ffffff; padding: 0 var(--bj); line-height: var(--top); } .nianxingheader.on { top: 0; } .main_box { position: relative; } .main_box::before { z-index: -2; content: ""; position: absolute; width: 100%; height: 100vh; top: 0; left: 0; } .main_box .zbimg { position: absolute; width: 100%; top: 0; left: 0; } .main_box .zbimg img { width: 100%; } .main_box .gradient_bg { z-index: -1; position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; } .main_box .gradient_bg .gradient_bg_base { filter: blur(80px); border-radius: 50%; width: 100%; top: -20%; position: absolute; padding-bottom: calc(1 / 3 * 100%); left: 20%; } .main_box .gradient_bg .gradient_bg_move { width: 100%; padding-bottom: calc(1.5 / 3 * 100%); height: 100vh; top: 0; left: 0; position: absolute; border-radius: 50%; filter: blur(80px); animation: gradientMove 15s infinite alternate; animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1); } .main_box .box_top { position: relative; background: #1A1A1A; } .main_box .box_top .pu_md{ } .main_box .box_top .pu_text { margin: 0.26rem 0 0; } .main_box .box_top .pu_level { padding: 0.46rem 0 ; } .about_us { z-index: 1; position: relative; padding: var(--gap) var(--bj); } .about_us .le_box { position: relative; width: 45%; } .about_us .le_box > div { border-radius: 0.2rem; overflow: hidden; position: static; top: calc(var(--top) + .4rem); } .about_us .le_box img { border-radius: inherit; width: 100%; } .about_us .le_box .play { cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 0.96rem; } .about_us .le_box .play img { transition: 0.4s; border-radius: 50%; } .about_us .le_box .play:hover img { transform: scale(1.08); } .about_us .ri_box { width: 46%; } .about_us .ri_box .content2 { margin: 0.46rem 0 1rem; font-size: var(--f18); line-height: 1.7; /*height: 13.6em;*/ color: #666; /*overflow: auto;*/ /*padding-right: 0.1rem;*/ } .about_us .ri_box .content2::-webkit-scrollbar { width: 2px; height: 2px; } .about_us .ri_box .content2::-webkit-scrollbar-thumb { border-radius: 2px; background: #f26522; } .about_us .ri_box .content2::-webkit-scrollbar-track { border-radius: 2px; background: rgba(0, 0, 0, 0.2); } @-moz-document url-prefix() { .about_us .ri_box .content2 { scrollbar-color: #f26522 rgba(0, 0, 0, 0.2); scrollbar-width: thin; -ms-overflow-style: none; } } .about_us .ri_box .content3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .about_us .ri_box .content3 .li .num { font-size: var(--f56); color: #f26522; } .about_us .ri_box .content3 .li .desc { font-size: var(--f22); color: #666; } .corporate_culture { position: relative; overflow: hidden; } .corporate_culture .re_bk { z-index: -1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .corporate_culture .re_bk picture { width: 100%; height: 100%; } .corporate_culture .re_bk picture img { width: 100%; height: 100%; } .corporate_culture .re_bk .img1, .corporate_culture .re_bk .img2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .corporate_culture .re_bk .img1 img, .corporate_culture .re_bk .img2 img { width: 100%; height: 100%; } .corporate_culture .re_bk .img1 { transition: 0.6s ease-in-out; /*transition-delay: 0.8s;*/ z-index: 1; opacity: 0; transform: translate(0, 0); transform-origin: left bottom; -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 42% 100%); clip-path: polygon(0 0, 0 100%, 100% 100%, 42% 100%); } .corporate_culture .re_bk .img2 { transition: 0.4s; /*transition-delay: 0.8s;*/ opacity: 0; } .corporate_culture .le_box { width: 45%; } .corporate_culture .ri_box { width: 46%; display: flex; flex-wrap: wrap; align-items: flex-end; height: calc(var(--vh) - (var(--gap) * 2)); } .corporate_culture .ri_box > div { width: 100%; } .corporate_culture .ri_box .item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.32rem 0; } .corporate_culture .ri_box .item .div1 { flex: 0.96; } .corporate_culture .ri_box .item .div1 .m1 { font-size: var(--f36); color: #333; } .corporate_culture .ri_box .item .div1 .m2 { margin-top: 0.12rem; font-size: var(--f20); font-family: Juana; color: #666; } .corporate_culture .ri_box .item .div2 { display: flex; width: 1.06rem; height: 1.06rem; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .corporate_culture .ri_box .item .div2 img { margin: auto; max-width: 45%; } .corporate_culture .ri_box .item + .item { border-top: 1px solid #c5c5c5; } .corporate_culture.active .re_bk .img1 { opacity: 1; transform: translate(0, 0); -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); } .corporate_culture.active .re_bk .img2 { opacity: 1; } .send_word { position: relative; background: url("../images/12.jpg") no-repeat center / 100% 100%; } .send_word::before { transition: 1.4s ease-in; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("../images/5.png") no-repeat center / 100% 100%; clip-path: polygon(35% 100%, 0 100%, 0 0, 35% 0); } .send_word .wMain { z-index: 1; position: relative; } .send_word .wMain .le_box { width: 45%; } .send_word .wMain .le_box .content2 { margin: 0.5rem 0 0.7rem; font-size: var(--f18); color: #666; line-height: 1.8; /*height: 27em;*/ /*overflow: auto;*/ /*padding-right: 0.1rem;*/ } .send_word .wMain .le_box .content2::-webkit-scrollbar { width: 2px; height: 2px; } .send_word .wMain .le_box .content2::-webkit-scrollbar-thumb { border-radius: 2px; background: #f26522; } .send_word .wMain .le_box .content2::-webkit-scrollbar-track { border-radius: 2px; background: rgba(0, 0, 0, 0.2); } @-moz-document url-prefix() { .send_word .wMain .le_box .content2 { scrollbar-color: #f26522 rgba(0, 0, 0, 0.2); scrollbar-width: thin; -ms-overflow-style: none; } } .send_word .wMain .le_box .content3 { font-size: var(--f26); color: #f26522; line-height: 1.4; } .send_word .wMain .le_box .content3 span { font-family: MiSansBold; } .send_word .wMain .ri_box { width: 46%; display: flex; justify-content: center; align-items: flex-end; } .send_word .wMain .ri_box img { max-width: 80%; } .send_word.active::before { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0); } .brand_view { position: relative; overflow: hidden; } .brand_view .ew_bk { position: relative; } .brand_view .ew_bk .bk_1 { position: relative; width: 100%; } .brand_view .ew_bk .bk_1 img { width: 100%; } .brand_view .ew_bk .bk_1::before { z-index: 1; content: ""; position: absolute; width: 100%; height: 100%; background: url("../images/8-4.png") no-repeat center / 100% 100%; } .brand_view .ew_bk .bk_2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .brand_view .ew_bk .bk_2 img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; animation: opacityMove 2s linear infinite; } .brand_view .ew_bk .bk_2 .img2 { animation-delay: 0.3s; } .brand_view .ew_bk .bk_2 .img3 { animation-delay: 0.6s; } .brand_view .ew_bk .bk_3 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .brand_view .ew_bk .bk_3 .canvas { position: absolute; width: 54%; height: 42%; bottom: 0%; left: 50%; transform: translateX(-50%); overflow: hidden; } .brand_view .ew_bk .bk_3 .canvas .element { width: 2px; position: absolute; bottom: -100%; background: linear-gradient(to bottom, #28c1de, rgba(40, 193, 222, 0.8), rgba(40, 193, 222, 0.2)); } .brand_view .ew_bk .bk_4 p { position: absolute; top: 0%; left: 0%; border-radius: 50%; animation: spin 6s infinite linear; } .brand_view .ew_bk .bk_4 p img { border-radius: 50%; animation: spin2 6s infinite linear; } .brand_view .ew_bk .bk_4 .img1 { top: 36%; left: 34%; transform-origin: 30% 50%; } .brand_view .ew_bk .bk_4 .img1 img { width: 0.84rem; } .brand_view .ew_bk .bk_4 .img2 { top: 58%; left: 46%; transform-origin: 46% 46%; } .brand_view .ew_bk .bk_4 .img2 img { width: 1.65rem; } .brand_view .ew_bk .bk_4 .img3 { top: 29%; left: 57.2%; transform-origin: 50% 30%; animation-direction: reverse; } .brand_view .ew_bk .bk_4 .img3 img { width: 0.84rem; animation-direction: reverse; } .brand_view .ew_bk .bk_4 .img4 { top: 57.5%; left: 69%; transform-origin: 50% 30%; } .brand_view .ew_bk .bk_4 .img4 img { width: 0.9rem; } .brand_view .ew_post { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: var(--gap) var(--bj); } @keyframes spin { 100% { transform: rotate(-1turn); } } @keyframes spin2 { 100% { transform: rotate(1turn); } } @keyframes moveUpAndFade { 0% { bottom: -100%; } 80% { height: var(--h); } 100% { bottom: 100%; height: 0; } } @keyframes opacityMove { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .brand_undertaking { z-index: 1; position: relative; margin-top:0.9rem; } .brand_undertaking .ng_top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 0.48rem; } .brand_undertaking .ng_bot { margin-top: var(--gap); } .pu_li_1 a { position: relative; background: #fff url("../images/14.jpg") no-repeat center bottom / 100% 100%; border-radius: 0.2rem; padding: 0.54rem; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.04)); } .pu_li_1 a::before { z-index: -1; transition: 0.4s; opacity: 0; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 2px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; -moz-background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #f26522, #f1c269); border-radius: 0.2rem; } .pu_li_1 a .img { width: 100%; display: flex; } .pu_li_1 a .img img { margin: auto; max-width: 100%; max-height: 100%; } .pu_li_1 a .box { position: relative; margin-top: 0.8rem; text-align: center; } .pu_li_1 a .box .content1 { transition: 0.4s; } .pu_li_1 a .box .content1 .t1 { font-size: var(--f20); color: #333; font-weight: bold } .pu_li_1 a .box .content1 .t2 { transition: 0.1s; margin-top: 4px; font-size: var(--f16); color: #666; } .pu_li_1 a .box .content1 .t2 p{ font-size: var(--f16); color: #666;} .pu_li_1 a .box .content2 { opacity: 0; transition: 0.4s; position: absolute; width: 100%; bottom: -100%; left: 50%; transform: translateX(-50%); } .pu_li_1 a:hover { background: none; } .pu_li_1 a:hover::before { opacity: 1; } .pu_li_1 a:hover .box .content1 { transform: translateY(-0.45rem); } .pu_li_1 a:hover .box .content1 .t2 { opacity: 0; } .pu_li_1 a:hover .box .content2 { bottom: 0%; opacity: 1; } .pu_page { display: flex; justify-content: center; flex-wrap: wrap; --w: 0.6rem; font-size: var(--f18); } .pu_page .prev a, .pu_page .next a { transition: 0.4s; display: flex; width: var(--w); height: var(--w); border: 1px solid #e3e3e3; border-radius: 50%; color: #999; } .pu_page .prev a i, .pu_page .next a i { margin: auto; } .pu_page .prev a:hover, .pu_page .next a:hover { background: linear-gradient(to right, #f26522, #f1c269); color: #fff; border-color: #fff; } .pu_page .prev { margin-right: 0.1rem; } .pu_page .next { margin-left: 0.1rem; } .pu_page .number { display: flex; flex-wrap: wrap; } .pu_page .number a { transition: 0.4s; width: var(--w); height: var(--w); line-height: var(--w); text-align: center; background: #f3f3f3; border-radius: 50%; color: #999; font-family: MiSansBold; margin: 0 0.1rem; } .pu_page .number a.active, .pu_page .number a:hover { color: #fff; background: linear-gradient(to right, #f26522, #f1c269); } @keyframes gradientMove { 0% { transform: translate(0); } 25% { transform: translate(20%); } 50% { transform: translate(40%, 20%); } 75% { transform: translate(20%); } } .pu_cut { --w: 0.6rem; display: flex; flex-wrap: wrap; } .pu_cut .prev, .pu_cut .next { cursor: pointer; transition: 0.4s; width: var(--w); height: var(--w); border: 1px solid #efefef; display: flex; font-size: var(--f18); color: #999; border-radius: 50%; } .pu_cut .prev i, .pu_cut .next i { margin: auto; } .pu_cut .prev:hover, .pu_cut .next:hover { background: linear-gradient(to right, #f26522, #f1c269); border-color: transparent; color: #fff; } .pu_cut .next { margin-left: 0.2rem; } .related_products { position: relative; } .related_products .ts_top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .related_products .ts_top .text { font-size: var(--f42); } .related_products .ts_bot { margin-top: 0.7rem; width: calc(100% + 20px); margin-left: -10px; } .related_products .ts_bot .swiper { padding: 10px; } .product_details { position: relative; width: 100%; } .product_details .ls_bk { width: 100%; } .product_details .ls_bk img { width: 100%; height: var(--vh); } .product_details .ls_post { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: var(--top) var(--bj); } .product_details .ls_post .ls_top { display: flex; height: 100%; } .product_details .ls_post .ls_top > div { width: 45%; margin: auto 0; } .product_details .ls_post .ls_top > div .content1 { opacity: 0; visibility: hidden; } .product_details .ls_post .ls_top > div .content1 .t1 { font-size: var(--f62); color: #333; } .product_details .ls_post .ls_top > div .content1 .t2 { margin-top: 0.1rem; font-size: var(--f42); color: #333; } .product_details .ls_post .ls_top > div .content2 { margin-top: 0.7rem; } .product_details .ls_post .ls_bot { position: absolute; bottom: 0.56rem; left: 0; width: 100%; padding: 0 var(--bj); } .product_details .ls_post .ls_bot a { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--f18); } .product_details .ls_post .ls_bot a p { transition: 0.4s; position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; } .product_details .ls_post .ls_bot a p::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; background: linear-gradient(to right, #f26522, #f1c269) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: inherit; } .product_details .ls_post .ls_bot a p i { transition: 0.4s; color: #666; margin: auto; } .product_details .ls_post .ls_bot a span { transition: 0.4s; color: #666; margin-left: 0.18rem; } .product_details .ls_post .ls_bot a:hover p { background: linear-gradient(to right, #f26522, #f1c269); } .product_details .ls_post .ls_bot a:hover p i { color: #fff; } .product_details .fixed_pro { position: absolute; top: 0; left: var(--bj); } .product_details .fixed_pro .content1 { opacity: 1 !important; visibility: visible !important; } .product_details_2 { background: #f2f8ff; } .product_details_2 .wMain { padding-top: 1.4rem; padding-bottom: 1.4rem; } .product_details_2 .wMain .le_box { width: 49%; } .product_details_2 .wMain .le_box .content1 { opacity: 0; visibility: hidden; } .product_details_2 .wMain .le_box .content1 .t1 { font-size: var(--f42); color: #000; } .product_details_2 .wMain .le_box .content1 .t2 { margin-top: 0.1rem; font-size: var(--f24); color: #666; } .product_details_2 .wMain .le_box .content2 { margin: 0.54rem 0 0.6rem; } .product_details_2 .wMain .le_box .content2 ul li { padding-left: 0.3rem; position: relative; font-size: var(--f20); line-height: 2.1; color: #333; } .product_details_2 .wMain .le_box .content2 ul li::before { content: ""; position: absolute; width: 12px; height: 12px; left: 0; top: 0.13rem; border: 2px solid transparent; background: linear-gradient(to right, #f26522, #f1c269) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: 50%; } .product_details_2 .wMain .ri_box { position: relative; width: 6.8rem; } .product_details_2 .wMain .ri_box .swiper { background: url("../images/18.jpg") no-repeat center / 100% 100%; border-radius: 0.2rem; } .product_details_2 .wMain .ri_box .swiper .swiper-slide { height: 6.8rem; display: flex; } .product_details_2 .wMain .ri_box .swiper .swiper-slide img { margin: auto; max-width: 75%; } .product_details_2 .wMain .ri_box .div_ { z-index: 2; position: absolute; bottom: 0.6rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; } .product_details_2 .wMain .ri_box .div_ div { cursor: pointer; position: relative; margin: 0 0.15rem; opacity: 1; width: auto; height: auto; } .product_details_2 .wMain .ri_box .div_ div p { width: 12px; height: 12px; background: #fff; border-radius: 50%; } .product_details_2 .wMain .ri_box .div_ div svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); } .product_details_2 .wMain .ri_box .div_ div svg .cir2 { stroke-dashoffset: 47; stroke-dasharray: 47; } .product_details_2 .wMain .ri_box .div_ div.active p { opacity: 0; transition-delay: .2s; } .product_details_2 .wMain .ri_box .div_ div.active svg .cir2 { animation: StrokeDashoffset 3.8s linear; } .yx-cont1620 { width: calc(100% - (var(--bj) * 2)); margin: auto; } .about-banner { padding: var(--gap) 0; position: relative; overflow: inherit; } .about-banner .about-banner-cont { padding: 0 var(--bj); position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .about-banner .about-banner-cont .about-banner-cont-wrap { height: auto; width: 100%; position: relative; overflow: hidden; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list { height: 100vh; top: 0; left: 0; width: 100%; position: relative; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg { width: 100%; position: absolute; height: 100%; overflow: hidden; transform-origin: right center; top: 53%; transform: translateY(-53%); } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-text-wrap { height: 100%; margin: auto; display: flex; align-items: center; position: relative; transform-origin: left 30%; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs { height: 100%; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-bg { height: 100%; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-bg picture { position: relative; height: 100%; border-radius: 0.2rem; overflow: hidden; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-bg picture::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("../images/10.png") no-repeat center / 100% 100%; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-bg img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; backface-visibility: hidden; border-radius: 0.2rem; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-img { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 5; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-img picture { position: relative; height: 100%; border-radius: 0.2rem; overflow: hidden; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-img:nth-child(1) picture::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("../images/10.png") no-repeat center / 100% 100%; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-img img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; backface-visibility: hidden; border-radius: 0.2rem; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; will-change: transform, opacity; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.36s; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 5; width: 100%; height: 100%; display: flex; align-items: center; transform-origin: left center; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text .altw-titx { text-align: center; position: absolute; opacity: 0; pointer-events: none; left: 50%; transform: translateX(-50%); z-index: -99; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text .altw-titx .ban-title { font-size: var(--f42); line-height: 1.33; color: #fff; transition: all 0.36s; text-align: center; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap { /*height: 100%;*/ margin: auto; display: flex; position: relative; align-items: flex-start; /*transform-origin: left 30%;*/ } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit { position: relative; display: inline-block; /*text-align: center;*/ } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit h1 { font-size: var(--f24); line-height: 1.33; color: #fff; transition: all 0.36s; width: fit-content; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit .altw-tit-sub { margin-top: 0.17rem; font-size: var(--f42); line-height: 1.33; color: #fff; transition: all 0.36s; overflow: hidden; text-align: center; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit .altw-tit-sub p{ width: fit-content; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .altw-parga { width: 40%; overflow: hidden; text-align: left; padding-top: 10vh; transition: all 0.36s; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .altw-parga h2 { color: red; line-height: 1.5; margin-bottom: 50px; opacity: 0; font-size: var(--f30); } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .altw-parga .altw-parga-text { pointer-events: all; position: relative; z-index: 5; color: #fff; font-size: var(--f18); line-height: 1.75; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .yx-cont1620 { display: flex; align-items: center; flex-wrap: wrap; height: 100%; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-pro { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } .about-banner .about-banner-text { padding-top: 150vh; padding-bottom: 28vh; pointer-events: none; position: relative; } .about-banner .about-banner-text .about-banner-text-li { pointer-events: all; height: auto; margin-bottom: 2.6rem; width: 100%; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 { height: 100%; display: flex; flex-wrap: wrap; align-items: center; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap { width: 5.9rem; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-subtit { transition: all 0.36s; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-subtit .p1 { font-size: var(--f42); color: #f26522; font-family: MiSansBold; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-subtit .p2 { color: #666; font-size: var(--f32); line-height: 1.4; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit { margin-top: 0.46rem; font-size: var(--f20); line-height: 1.8; transition: all 0.36s; color: #666; /*height: 12.6em;*/ /*overflow: auto;*/ /*padding-right: 0.1rem;*/ } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit::-webkit-scrollbar { width: 2px; height: 2px; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit::-webkit-scrollbar-thumb { border-radius: 2px; background: #f26522; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit::-webkit-scrollbar-track { border-radius: 2px; background: rgba(0, 0, 0, 0.2); } @-moz-document url-prefix() { .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit { scrollbar-color: #f26522 rgba(0, 0, 0, 0.2); scrollbar-width: thin; -ms-overflow-style: none; } } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit p { position: relative; padding-left: 0.3rem; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit p::before { content: ""; position: absolute; width: 12px; height: 12px; left: 0; top: 0.11rem; border: 2px solid transparent; background: linear-gradient(to right, #f26522, #f1c269) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border-radius: 50%; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-img { display: none; width: 100%; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-img img { width: 100%; } .about-banner .about-banner-text .about-banner-text-li:nth-last-child(1) { margin-bottom: 0; } .quality_assurance .wMain .le_box { width: 38%; } .quality_assurance .wMain .le_box .sticky { position: sticky; top: calc(var(--top) + .4rem); } .quality_assurance .wMain .le_box .desc { margin-top: 0.4rem; font-size: var(--f18); color: #666; line-height: 1.8; position: sticky; } .quality_assurance .wMain .ri_box { width: 52%; } .quality_assurance .wMain .ri_box .content1 .li .num { color: #f26522; font-size: 1.56rem; line-height: 0.8; } .quality_assurance .wMain .ri_box .content1 .li .desc { margin-top: 0.26rem; color: #666; font-size: var(--f22); } .quality_assurance .wMain .ri_box .content1 .li + .li { margin-top: 0.8rem; } .quality_assurance .wMain .ri_box .content2 { margin-top: 0.8rem; border-radius: 0.2rem; overflow: hidden; } .quality_assurance .wMain .ri_box .content2 img { transition: 0.4s; max-width: 100%; border-radius: 0.2rem; } .quality_assurance .wMain .ri_box .content2:hover img { transform: scale(1.05); } .certificate .te_top > div { position: relative; --g: 1.8rem; } .certificate .te_top > div::before { content: ""; position: absolute; left: 50%; top: 6px; width: 93.5%; height: 1px; transform: translateX(-50%); background: rgba(153, 153, 153, 0.2); } .certificate .te_top > div .li { cursor: pointer; position: relative; } .certificate .te_top > div .li .yuan { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ccc; border-radius: 50%; } .certificate .te_top > div .li .yuan::after, .certificate .te_top > div .li .yuan::before { transition: 0.4s; opacity: 0; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: linear-gradient(to right, #f26522, #f1c269); border-radius: 50%; } .certificate .te_top > div .li .yuan::after { z-index: 1; width: 75%; height: 75%; background: #fff; } .certificate .te_top > div .li .wz { padding-top: 22px; color: #000; font-size: var(--f16); } .certificate .te_top > div .li + .li { margin-left: var(--g); } .certificate .te_top > div .li:hover .yuan::after, .certificate .te_top > div .li:hover .yuan::before, .certificate .te_top > div .li.active .yuan::after, .certificate .te_top > div .li.active .yuan::before { opacity: 1; } .certificate .te_cen .swiper { padding: var(--gap) 0 0.56rem; } .certificate .te_cen .swiper .swiper-slide { transition: 0.4s; border-radius: 0.16rem; padding: 0.3rem; } .certificate .te_cen .swiper .swiper-slide .img { height: 3.3rem; display: flex; } .certificate .te_cen .swiper .swiper-slide .img img { margin: auto; max-width: 100%; max-height: 100%; } .certificate .te_cen .swiper .swiper-slide .tips { transition: 0.4s; opacity: 0; text-align: center; margin-top: 0.3rem; font-size: var(--f18); color: #333; } .certificate .te_cen .swiper .swiper-slide:hover { background: #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.08)); } .certificate .te_cen .swiper .swiper-slide:hover .tips { opacity: 1; } .certificate .te_bot { display: flex; flex-wrap: wrap; justify-content: center; } .cases_list .ws_top { width: calc(100% + 20px); margin-left: -10px; } .cases_list .ws_top .swiper { padding: 10px; } .cases_list .ws_top .swiper .swiper-slide a { background: rgba(255, 255, 255, 0.65); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); border-radius: 0.2rem; } .cases_list .ws_top .swiper .swiper-slide a .le_box { width: 58%; border-radius: 0.2rem 0 0 0.2rem; overflow: hidden; } .cases_list .ws_top .swiper .swiper-slide a .le_box img { transition: 0.4s; border-radius: 0.2rem 0 0 0.2rem; width: 100%; } .cases_list .ws_top .swiper .swiper-slide a .ri_box { width: 42%; padding: 0.6rem; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content1 .t1 { font-size: var(--f18); color: #999; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content1 .t2 { margin: 0.16rem 0 0.26rem; color: #000; font-family: Juana; line-height: 1.35; height: 2.7em; font-size: var(--f28); } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content1 .t3 { font-size: var(--f18); line-height: 1.7; height: 3.4em; color: #666; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content2 { border-top: 1px solid #e1e1e1; padding-top: 0.5rem; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content2 .btn { transition: 0.4s; width: 0.6rem; height: 0.6rem; border: 1px solid #e3e3e3; border-radius: 50%; display: flex; font-size: var(--f20); } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content2 .btn i { transition: 0.4s; margin: auto; color: rgba(153, 153, 153); } .cases_list .ws_top .swiper .swiper-slide a:hover .le-box { width: 100%; } .cases_list .ws_top .swiper .swiper-slide a:hover .le-box img { width: 100%; } .cases_list .ws_top .swiper .swiper-slide a:hover .ri_box .content2 .btn { background: linear-gradient(to right, #f26522, #f1c269); border-color: #fff; } .cases_list .ws_top .swiper .swiper-slide a:hover .ri_box .content2 .btn i { color: #fff; } .cases_list .ws_top .div_ { margin-top: 0.6rem; width: 100%; display: flex; justify-content: center; align-items: center; } .cases_list .ws_top .div_ div { cursor: pointer; position: relative; margin: 0 0.15rem; opacity: 1; width: auto; height: auto; } .cases_list .ws_top .div_ div p { width: 12px; height: 12px; background: #cccccc; border-radius: 50%; } .cases_list .ws_top .div_ div svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); } .cases_list .ws_top .div_ div svg .cir2 { stroke-dashoffset: 47; stroke-dasharray: 47; } .cases_list .ws_top .div_ div.active p { opacity: 0; } .cases_list .ws_top .div_ div.active svg .cir2 { animation: StrokeDashoffset 3.8s linear; } .cases_list .ws_bot { } .cases_list .ws_bot .content1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 0.32rem; } .cases_list .ws_bot .content2 { margin-top: var(--gap); } .pu_item_1 a { border-radius: 0.14rem; background: #fff; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.08)); } .pu_item_1 a .img { width: 100%; border-radius: 0.14rem 0.14rem 0 0; overflow: hidden; } .pu_item_1 a .img img { transition: 0.4s; border-radius: 0.14rem 0.14rem 0 0; width: 100%; } .pu_item_1 a .box { padding: 0.25rem 0.28rem; } .pu_item_1 a .box .text .t1 { color: #999; font-size: var(--f18); } .pu_item_1 a .box .text .t2 { transition: 0.4s; margin-top: 0.16rem; font-size: var(--f26); color: #333; line-height: 1.5; } .pu_item_1 a .box .btn { margin-top: 0.52rem; transition: 0.4s; width: 0.6rem; height: 0.6rem; border: 1px solid #e3e3e3; border-radius: 50%; display: flex; font-size: var(--f20); } .pu_item_1 a .box .btn i { transition: 0.4s; margin: auto; color: rgba(153, 153, 153); font-size: 30px } .pu_item_1 a:hover .img img { transform: scale(1.05); } .pu_item_1 a:hover .box .text .t2 { color: #000; } .pu_item_1 a:hover .box .btn { background: linear-gradient(to right, #f26522, #f1c269); border-color: #fff; } .pu_item_1 a:hover .box .btn i { color: #fff; } .news_details { position: relative; background: #fff url("../images/24.jpg") no-repeat top center / 100% auto; } .news_details .content1 { width: 65%; } .news_details .content1 .t1 { font-size: var(--f48); line-height: 1.35; color: #000; } .news_details .content1 .t2 { margin-top: 0.3rem; color: #999; font-size: var(--f18); } .news_details .content2 { margin-top: 30px; } .news_details .content2 .le_box { width: 65%; } .news_details .content2 .le_box .div1 { padding-bottom: 0.8rem; color: #666; font-size: var(--f18); line-height: 2; border-bottom: 1px solid #e1e1e1; } .news_details .content2 .le_box .div2 .li { margin-top: 0.5rem; font-size: var(--f20); } .news_details .content2 .le_box .div2 .li p { color: #f26522; font-family: Juana; margin-bottom: 0.1rem; } .news_details .content2 .le_box .div2 .li a { transition: 0.4s; color: #333; font-family: Juana; } .news_details .content2 .le_box .div2 .li a:hover[href] { color: #f26522; } .news_details .content2 .ri_box { width: 26%; } .news_details .content2 .ri_box > div { position: sticky; top: var(--top); } .news_details .content2 .ri_box > div .div1 { font-size: var(--f32); font-family: Juana; color: #000; } .news_details .content2 .ri_box > div .div2 { margin-top: 0.35rem; } .news_details .content2 .ri_box > div .div2 a { padding: 0.35rem 0; border-top: 1px solid #e1e1e1; } .news_details .content2 .ri_box > div .div2 a .t1 { font-size: var(--f18); color: #999; } .news_details .content2 .ri_box > div .div2 a .t2 { transition: 0.4s; margin-top: 0.1rem; color: #333; font-size: var(--f22); line-height: 1.5; height: 3em; } .news_details .content2 .ri_box > div .div2 a:last-child { border-bottom: 1px solid #e1e1e1; } .news_details .content2 .ri_box > div .div2 a:hover .t2 { color: #f26522; } .other_news { } .other_news .ws_top .text { font-size: var(--f42); } .other_news .ws_bot { margin-top: 0.6rem; width: calc(100% + 20px); margin-left: -10px; } .other_news .ws_bot .swiper { padding: 10px; } .faq_element { z-index: 1; position: relative; } .faq_element .content1 { font-size: var(--f48); line-height: 1.25;font-family: Juana; } .faq_element .content2 { margin-top: 0.78rem; } .faq_element .content2 .item { position: relative; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); border-radius: 0.16rem; padding: 0 0.46rem; } .faq_element .content2 .item::before { z-index: -1; transition: 0.4s; opacity: 0; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 2px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; -moz-background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #f26522, #f1c269); border-radius: 0.2rem; } .faq_element .content2 .item .one { cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0.32rem 0; } .faq_element .content2 .item .one .text { flex: 0.9; } .faq_element .content2 .item .one .text .div1 { font-size: var(--f32); color: #000; font-family: Juana; } .faq_element .content2 .item .one .text .div2 { margin-top: 0.1rem; display: flex; flex-wrap: wrap; align-items: center; } .faq_element .content2 .item .one .text .div2 > div { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--f18); color: #666; } .faq_element .content2 .item .one .text .div2 > div img { max-width: 0.26rem; } .faq_element .content2 .item .one .text .div2 > div span { margin-left: 0.1rem; } .faq_element .content2 .item .one .text .div2 > div + div { margin-left: 0.4rem; } .faq_element .content2 .item .one .btn { transition: 0.4s; width: 0.5rem; height: 0.5rem; border: 1px solid #e0e0e0; display: flex; border-radius: 50%; font-size: var(--f18); } .faq_element .content2 .item .one .btn i { transition: 0.4s; color: #999; margin: auto; } .faq_element .content2 .item .two { display: none; padding: 0 0 0.64rem; } .faq_element .content2 .item .two .div1 .li { font-size: var(--f22); } .faq_element .content2 .item .two .div1 .li .i1 { color: #333; font-family: Juana; } .faq_element .content2 .item .two .div1 .li .i2 { margin-top: 0.15rem; font-size: 0.82em; color: #666; line-height: 2; } .faq_element .content2 .item .two .div1 .li + .li { margin-top: 0.4rem; } .faq_element .content2 .item .two .div2 { margin-top: 0.4rem; } .faq_element .content2 .item + .item { margin-top: 0.3rem; } .faq_element .content2 .item.active { background: transparent; } .faq_element .content2 .item.active::before { opacity: 1; } .faq_element .content2 .item.active .one .btn { background: linear-gradient(to right, #f26522, #f1c269); border-color: #fff; } .faq_element .content2 .item.active .one .btn i { transform: rotateX(180deg); color: #fff; } .faq_element .content3 { margin-top: 0.78rem; } .contact_us { position: relative; background: url("../images/25.jpg") no-repeat top center / 100% 100%; } .contact_us .wMain .le_box { width: 45%; } .contact_us .wMain .le_box .content1 { font-size: var(--f42); color: #000; line-height: 1.33; } .contact_us .wMain .le_box .content2 { margin-top: 0.56rem; } .contact_us .wMain .le_box .content2 .li .tips { font-size: var(--f18); color: #666; } .contact_us .wMain .le_box .content2 .li a { transition: 0.4s; margin-top: 0.14rem; font-size: var(--f36); color: #000; background-image: linear-gradient(to right, #f26522, #f1c269); background-clip: text; -webkit-background-clip: text; } .contact_us .wMain .le_box .content2 .li a:hover[href] { color: transparent; } .contact_us .wMain .le_box .content2 .li + .li { margin-top: 0.68rem; } .contact_us .wMain .le_box .content3 { margin-top: 0.84rem; display: flex; flex-wrap: wrap; } .contact_us .wMain .le_box .content3 > div { position: relative; text-align: center; } .contact_us .wMain .le_box .content3 > div .code { border-radius: 0.1rem; padding: 10px; border: 1px solid #999; } .contact_us .wMain .le_box .content3 > div .code > div { position: relative; width: 1.22rem; overflow: hidden; } .contact_us .wMain .le_box .content3 > div .code > div img { width: 100%; } .contact_us .wMain .le_box .content3 > div .code > div span { width: 100%; position: absolute; top: 0; left: 0; animation: runEwm 2s linear infinite; } .contact_us .wMain .le_box .content3 > div .code > div span img { width: 100%; } .contact_us .wMain .le_box .content3 > div .wz { font-size: var(--f16); margin-top: 0.2rem; color: #666; } .contact_us .wMain .le_box .content3 > div + div { margin-left: 0.32rem; } .contact_us .wMain .ri_box { width: 50%; } .contact_us .wMain .ri_box .content1 { font-size: var(--f42); color: #000; line-height: 1.33; } .contact_us .wMain .ri_box .content2 { margin-top: 0.56rem; } .contact_us .wMain .ri_box .content2 form { --w: 22px; --h: 0.64rem; font-size: var(--f18); } .contact_us .wMain .ri_box .content2 form .box .item1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.26rem 0.2rem; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .tips { color: #333; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .tips span { margin-left: 2px; color: #e78d22; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .xuanze { margin: 0.26rem 0 0.4rem; display: flex; flex-wrap: wrap; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .xuanze > div { display: flex; flex-wrap: wrap; align-items: center; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .xuanze > div p { color: #333; margin-left: 10px; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .xuanze > div + div { margin-left: 1rem; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp { margin-top: 0.16rem; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp textarea, .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp input { transition: 0.4s; width: 100%; height: var(--h); background: #fff; border-radius: 0.1rem; padding: 0 0.28rem; border: 2px solid transparent; color: #e78d22; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp textarea::placeholder, .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp input::placeholder { color: #999; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp textarea:focus, .contact_us .wMain .ri_box .content2 form .box .item1 .label .inp input:focus { border-color: #e78d22; } .contact_us .wMain .ri_box .content2 form .box .item1 .label:last-child { grid-area: 3 / 1 / 4 / 3; } .contact_us .wMain .ri_box .content2 form .box .item1 .label:last-child .inp textarea { height: calc(var(--h) * 2); padding: 0.18rem 0.28rem; } .contact_us .wMain .ri_box .content2 form .box .item2 { margin-top: 0.26rem; display: flex; flex-wrap: wrap; align-items: center; } .contact_us .wMain .ri_box .content2 form .box .item2 p { margin-left: 10px; color: #333; } .contact_us .wMain .ri_box .content2 form .box .item2 p a { display: inline; color: #e78d22; } .contact_us .wMain .ri_box .content2 form .box .layui-form-checkbox { width: var(--w); height: var(--w); line-height: var(--w); margin-right: 0; padding-right: 0; border-radius: 4px; } .contact_us .wMain .ri_box .content2 form .box .layui-form-checkbox i { width: 100%; height: 100%; border: none; font-size: 14px; font-weight: bold; } .contact_us .wMain .ri_box .content2 form .box .layui-form-checkbox i::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .contact_us .wMain .ri_box .content2 form .submit { margin-top: 0.46rem; } .search_box { padding-top: 2rem; background: url("../images/29.jpg") no-repeat center top / 100% auto; } .search_box .ch_top .pu_text { margin: 0.26rem 0 0; } .search_box .ch_top .sosuo { margin: 0.4rem 0 0.95rem; width: min(7.5rem, 100%); } .search_box .ch_top .sosuo form { --w: 0.64rem; } .search_box .ch_top .sosuo form > div { background: #fff; padding: 5px; border-radius: calc((var(--w) + 10px) / 2); filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.04)); } .search_box .ch_top .sosuo form > div .svg { margin-left: 0.2rem; } .search_box .ch_top .sosuo form > div .svg img { width: var(--f20); } .search_box .ch_top .sosuo form > div .inp { padding: 0 0.2rem; flex: 1; } .search_box .ch_top .sosuo form > div .inp input { width: 100%; height: var(--w); background: none; border: none; font-size: var(--f18); color: #000; } .search_box .ch_top .sosuo form > div .inp input::placeholder { color: #999; } .search_box .ch_top .sosuo form > div .btn { cursor: pointer; width: var(--w); height: var(--w); background: linear-gradient(to right, #f26522, #f1c269); border-radius: 50%; display: flex; } .search_box .ch_top .sosuo form > div .btn i { color: #fff; margin: auto; font-size: var(--f20); } .search_box .ch_bot { border-top: 1px solid #e1e1e1; padding: 0.3rem 0 var(--gap); } .search_box .ch_bot .classify { margin-bottom: var(--gap); display: flex; flex-wrap: wrap; align-items: center; font-size: var(--f16); line-height: 2; } .search_box .ch_bot .classify p { color: #999; } .search_box .ch_bot .classify span { color: #777; margin: 0 0.2rem; } .search_box .ch_bot .classify a { transition: 0.4s; color: #333; cursor: pointer; } .search_box .ch_bot .classify a.active, .search_box .ch_bot .classify a:hover { color: #f26522; } .search_box .ch_bot .result .div100 { display: none; } .search_box .ch_bot .result .div100.active { display: block; } .search_box .ch_bot .result .div100 .tips { font-size: var(--f42); color: #000; } .search_box .ch_bot .result .div100 .tips span { font-size: var(--f18); } .search_box .ch_bot .result .div100 .tent { margin-top: 0.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .search_box .ch_bot .result .div100 + .div100 { margin-top: var(--gap); } .search_box .ch_bot .no_date { text-align: center; } .search_box .ch_bot .no_date img { width: min(5.4rem, 100%); } .search_box .ch_bot .no_date p { margin-top: 0.1rem; font-size: var(--f22); color: #999; } @media (max-width: 1500px) { .pu_link .a { --h: 0.6rem; } .pu_link .a .circle { margin-left: 0.2rem; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap { width: 6.6rem; } } @media (max-width: 1200px) { .pc_footer .ter_top .content2 .nav, .pc_header { display: none; } .MobileMain .HeaderMobile .box .button .gw { display: flex; } .MobileMain .HeaderMobile .box .button .gw a img { width: 20px; } .MobileMain .HeaderMobile .box .button .gw a + a { margin-left: 0.3rem; } .pu_link .a { --h: 0.68rem; padding: 0 0.4rem; } .pc_footer .ter_top .content2 { padding: 0; border-bottom: none; } .pc_footer .ter_bot { line-height: 2; } .index_news .ws_bot { grid-template-columns: repeat(2, 1fr); } .index_quality .content_box { flex-wrap: wrap; } .index_quality .content_box .item { width: 100%; flex: none; } .index_quality .content_box .item .em_img img { height: auto; } .index_quality .content_box .item .em_post > div .content1 .btn { opacity: 1; margin-top: 0.4rem; } .index_quality .content_box .item_1 .em_img picture { position: initial; display: none; opacity: 1; } .index_quality .content_box .item_1 .em_img picture.active { display: block; } .index_quality .content_box .item .em_img img { object-fit: cover; } .index_banner .swiper .swiper-slide .slide_img img, .index_banner .swiper .swiper-slide .slide_img video, .index_about .ut_video video, .index_brand .nd_video { height: 70vh; } .index_brand .nd_post > div .content2 .item .m2 > div a { width: 36px; height: 36px; } .pc_footer .ter_top .content3 .share .li .post > div .code { width: 1.4rem; } .pc_footer .ter_top .content3 .share .li .post { left: auto; right: 160%; bottom: auto; top: 50%; transform: translate(0%, -50%); } .pc_footer .ter_top .content3 .share .li .post::before { top: 50%; bottom: auto; left: 100%; transform: translate(0%, -50%); border-top-color: transparent; border-left-color: #fff; } .corporate_culture .ri_box { height: auto; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text .altw-titx, .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg .abcw-list-bg-imgs .albi-img, .pu_page .number a, .brand_view .ew_bk .bk_4, .brand_view .ew_bk .bk_3, .brand_view .ew_bk .bk_2, .brand_view .ew_bk .bk_1::before, .send_word::before { display: none; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text { top: 0; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit { margin: auto; width: 100%; text-align: center; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit .altw-tit-sub p, .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-texts .abcw-list-box .abcw-list-text-wrap .altw-tit h1 { width: 100%; } .main_box { } .send_word .wMain .ri_box img { max-width: 52%; } .brand_undertaking .ng_top { grid-template-columns: repeat(2, 1fr); } .about-banner .about-banner-text .about-banner-text-li { margin-bottom: 0; margin-top: 0.6rem; } .about-banner .about-banner-text { padding-top: 0; padding-bottom: 0; } .pu_li_1 a:hover .box .content1 { transform: translateY(-0.6rem); } .product_details .ls_post { padding: var(--gap) var(--bj); } .product_details .ls_post .ls_top > div { margin: 0; } .about-banner .about-banner-cont { height: auto; position: initial; } .product_details .wMain .ls_bot { position: initial; padding: 0; } .product_details_2 .wMain { padding-top: var(--gap); padding-bottom: var(--gap); } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list { height: auto; } .about-banner .about-banner-cont .about-banner-cont-wrap .abcw-list .abcw-list-bg { position: initial; transform: translateY(0); } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-img { display: block; margin-top: 0.3rem; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit { height: auto; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content1 { padding-bottom: 0.6rem; } .cases_list .ws_top .swiper .swiper-slide a .le_box { border-radius: 0.2rem 0.2rem 0 0; } .cases_list .ws_top .swiper .swiper-slide a .le_box img { border-radius: 0.2rem 0.2rem 0 0; } .news_details .content2 .ri_box { display: none; } .news_details { padding-top: var(--gap); } .cases_list .ws_bot .content1 { grid-template-columns: repeat(2, 1fr); } .faq_element .content2 .item .one .btn i { font-size: 14px; } .faq_element .content2 .item { padding: 0 0.3rem; } .contact_us .wMain .ri_box { order: -1; } .search_box { padding-top: var(--gap); } .search_box .ch_top .sosuo { margin: 0.4rem 0 0.6rem; } .search_box .ch_bot .result .div100 .tent { grid-template-columns: repeat(2, 1fr); } .main_box .gradient_bg .gradient_bg_base { top: -10%; } .send_word .wMain .le_box .content2, .about_us .ri_box .content2 { height: auto; } .product_details .ls_bk img { height: calc(var(--vh) - 60px); } .index_news .ws_bot .grid_all { height: auto; } .index_news .ws_bot .grid_all .content2 { height: auto; padding-right: 0; } .index_news .ws_bot .grid_all { grid-area: 2 / 1 / 3 / 3; } .pc_footer .ter_top .content3 .lxwm div + div { margin-left: .2rem; } .Sitemap, .Privacy_Policy { padding-top: 0; } .nianxingheader, .corporate_culture .re_bk .img2, .corporate_culture .re_bk .img1 { display: none !important; } .contact_us .wMain .le_box, .quality_assurance .wMain .ri_box, .product_details_2 .wMain .ri_box, .product_details .wMain .ls_top > div .ri_box, .corporate_culture .ri_box, .about_us .ri_box { margin-top: 0.6rem; } .contact_us .wMain .ri_box, .contact_us .wMain .le_box, .news_details .content1, .news_details .content2 .le_box, .cases_list .ws_top .swiper .swiper-slide a .ri_box, .cases_list .ws_top .swiper .swiper-slide a .le_box, .quality_assurance .wMain .ri_box, .quality_assurance .wMain .le_box, .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap, .product_details_2 .wMain .ri_box, .product_details_2 .wMain .le_box, .product_details .ls_post .ls_top > div, .send_word .wMain .ri_box, .send_word .wMain .le_box, .corporate_culture .ri_box, .corporate_culture .le_box, .about_us .ri_box, .about_us .le_box, .index_about .ut_post > div { width: 100%; } .product_details .fixed_pro{ display: none; } .product_details_2 .wMain .le_box .content1, .product_details .ls_post .ls_top > div .content1{ opacity: 1; visibility: initial; } .product_details_2 .wMain .ri_box .swiper .swiper-slide { height: 5rem; } } @media (max-width: 750px) { .pu_level >div { white-space: nowrap; flex-wrap: nowrap; overflow: auto; } .pu_level >div::-webkit-scrollbar { width: 0; height: 0; } .pu_level >div >div a { flex-wrap: nowrap; } .search_box .ch_bot .classify div span:nth-child(1) { display: none; } .index_quality .content_box .item .em_post { padding: .6rem 5vw; } .pc_footer .ter_top .content3 .lxwm div a { flex: 1; } .product_details .ls_post .ls_bot a p { width: 32px; height: 32px; } .product_details .ls_post .ls_top > div .content1 .t1 { font-size: .45rem; } .product_details .ls_post .ls_top > div .content1 .t2 { font-size: .37rem; } .index_news .ws_bot .grid_all { grid-area: auto; } .pu_level > div div a svg { transform: scale(0.8) rotate(-90deg); } .faq_element .content2 .item .one .text .div2 { display: none; } .pu_cut, .pu_page { --w: 0.88rem; } .cases_list .ws_top .swiper .swiper-slide a .ri_box > div .content2 .btn, .pu_item_1 a .box .btn, .faq_element .content2 .item .one .btn { width: 0.76rem; height: 0.76rem; } .pu_link .a { --h: 0.8rem; } .index_about .ut_post > div .content2 .li + .li { margin-left: 0.8rem; } .index_brand .nd_post > div { width: 100%; } .index_news .ws_top .btn { margin-top: 0.4rem; } .brand_undertaking .ng_top, .cases_list .ws_bot .content1, .index_news .ws_bot { grid-template-columns: repeat(1, 1fr); } .index_banner .div_ .li + .li { margin-left: 0.2rem; } .pc_footer .ter_top .content1 .dianbu a img { width: 20px; } .pc_footer .ter_top .content1 .logo a img { height: 0.86rem; } .pc_footer .ter_top .content3 { line-height: 1.4; } .pc_footer .ter_top .content3 .lxwm div { width: 100%; margin-left: 0 !important; } .pc_footer .ter_top .content3 .lxwm div img { margin-top: .04rem; } .pc_footer .ter_top .content3 .lxwm div +div { margin-top: 10px; } .pc_footer .ter_top .content3 .share .li > a img { max-width: 26px; } .pc_footer .ter_top .content3 .share { margin-top: 0.36rem; } .pc_footer .ter_top .content3 .share .li .post > div .code { width: 1.8rem; } .pc_footer .ter_top .content3 .share .li .post { right: auto; left: 160%; font-size: 0.8em; } .pc_footer .ter_top .content3 .share .li .post::before { left: -12px; border-top-color: transparent; border-right-color: #fff; } .contact_us .wMain .ri_box .content2 form .box .item1 { grid-template-columns: repeat(1, 1fr); } .contact_us .wMain .ri_box .content2 form .box .item1 .label { grid-area: auto !important; } .contact_us .wMain .ri_box .content2 form { --h: 0.88rem; } .contact_us .wMain .ri_box .content2 form .box .item1 .label .xuanze > div + div { margin-left: 0.4rem; } .quality_assurance .wMain .ri_box .content1 .li .num { font-size: 1rem; } .certificate .te_cen .swiper .swiper-slide .img { height: 4.6rem; } .product_details_2 .wMain .le_box .content2 ul li, .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit p { padding-left: 0.4rem; } .product_details_2 .wMain .le_box .content2 ul li::before { top: 0.18rem; } .about-banner .about-banner-text .about-banner-text-li .yx-cont1620 .abtl-wrap .abtl-wrap-tit p::before { top: 0.14rem; } .product_details .wMain .ls_bot a p { width: 36px; height: 36px; } .pu_level > div div { margin-left: 0 !important; margin-right: 10px; margin-bottom: 4px; } .search_box .ch_bot .result .div100 .tent { grid-template-columns: repeat(1, 1fr); } .search_box .ch_top .sosuo form { --w: 0.74rem; } } .f48 { font-size: var(--f48); font-family: Juana; color: #000; line-height: 1.25; } .About_03 { background: #f7f7fa; } .About_03 .box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2rem; margin-top: 0.9rem } .About_03 .box .item { background: #fff; text-align: center; border-radius: 10px; padding: 0.55rem 0 0.45rem; } .About_03 .box .item .content1 { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .About_03 .box .item .content1 img { height: 0.84rem; } .About_03 .box .item .content2 { font-family: Juana; font-size: var(--f24); margin-top: 0.3rem; line-height: 1.2; } .About_03 .box .item .content3 { font-size: var(--f20); line-height: 1.6; color: #666; padding: 0 0.9rem; margin-top: 0.3rem; } .About_03 .box .item:hover .content1 { -webkit-transform: translateY(-0.1rem); -ms-transform: translateY(-0.1rem); transform: translateY(-0.1rem); } .Inner_Banner { position: relative; } .Inner_Banner picture img { width: 100%; } @media screen and (max-width: 1200px) { .Inner_Banner picture img { min-height: 5rem; } } .Inner_Banner .orientation { position: absolute; left: 0; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; } .Inner_Banner .orientation .content1 { font-size: var(--f48); font-family: Juana; line-height: 1.25; color: #fff; } .Inner_Banner .orientation .content2 { margin-top: 0.34rem; font-size: var(--f28); color: #fff; } .mbx { position: absolute; left: var(--bj); top:120px; z-index: 2; font-size: var(--f16); } .mbx a { color: #fff; opacity: 0.6; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; display: inline-block; } .mbx a:hover { opacity: 1; } .mbx span, .mbx i { color: #fff; } .mbx i { font-size: var(--f14); opacity: 0.6; margin: 0 5px; } .sec_link .offset-1{ flex: 0 0 auto; flex-basis: 83.3333333333%; box-sizing: border-box; position: relative;} .sec_link .link_area ul { display: flex ; } .sec_link .link_area ul li { flex: 1; background: #1A1A1A; padding: 20px } .sec_link .link_area ul li a { display: flex ; align-items: start; justify-content: center; flex-direction: column; position: relative; height: max(calc(180px* var(--base-ratio)), calc(calc(180 / var(--base-size))* var(--base-percent))); padding: 0 max(calc(40px* var(--base-ratio)), calc(calc(40 / var(--base-size))* var(--base-percent))); overflow: hidden; } .sec_link .link_area ul li a strong{ color: #fff; font-size:var(--f32) } .sec_link .link_area ul li p{ color:#fff; font-size: var(--f20) } .sec_link .link_area ul li a strong { display: flex ; align-items: center; width: 100%; font-size: max(calc(28px* var(--base-ratio)), calc(calc(28 / var(--base-size))* var(--base-percent))); line-height: 1; letter-spacing: -0.01em; line-height: 1.4; font-weight: 400; color: #fff; opacity: 0; transform: translateY(100%); transition: opacity .45s, transform .45s; } .sec_link .link_area ul li a strong, .sec_link .link_area ul li a p { opacity: 1; transform: translateY(0); } .sec_link .link_area ul li a strong:after { content: ""; width: max(calc(24px* var(--base-ratio)), calc(calc(24 / var(--base-size))* var(--base-percent))); height: max(calc(24px* var(--base-ratio)), calc(calc(24 / var(--base-size))* var(--base-percent))); background: url(../images/link_area_arrow.svg) center no-repeat; background-size: 100%; display: block; margin-left: max(calc(12px* var(--base-ratio)), calc(calc(12 / var(--base-size))* var(--base-percent))); transform: translateX(-100%); opacity: 0; visibility: hidden; transition: .25s cubic-bezier(0.29, 0.17, 0.25, 0.54); } :root { --base-ratio: 0.5; --base-size: 1920; --base-percent: 100vw; } .sec_link .link_area ul li:hover strong:after{transform:translateX(0);opacity:1;visibility:visible} .flows-section { position: relative; background-repeat: no-repeat; background-position: center top; background-color: #f5f5f5; background: url(../images/bg_flows.jpg?1) center center no-repeat; background-size: cover; } .flows-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); } .flows-section .sec-title .bg_tit { color: #ffffff; } .flows-section .sec-title h2 { color: #ffffff; } .flows-section .content1{ position:relative; text-align: center} .inner-item { margin: 0 auto; position: relative; } .i-process { position: relative; width: 1200px; margin: 0 auto; } .i-process .list { background: url("../images/line.png") no-repeat center; margin: 0 auto; width: 1200px; height: 333px; } .fl { float: left; display: inline; } .fr { float: right; display: inline; } .por { position: relative; } .poa { position: absolute; } .i-process .hold { width: 1106px; height: 352px; margin: 0 auto; } .i-process .btn { width: 20%; height: 150px; line-height: 2; color: #8f8f95; text-align: center; transform: translateX(50px); opacity: 0; padding: 0; border: none; } .i-process .btn p { margin-bottom: 0; line-height: 32px; font-size:var(--f20);; color: #ffffff; text-transform: capitalize; } .i-process .btn.cur { color: #ffffff; } .i-process .btn:nth-child(1) { left: 0; top: 140px; } .i-process .btn:nth-child(2) { left: 20%; top: 73px; } .i-process .btn:nth-child(3) { left: 40%; top: 57px; } .i-process .btn:nth-child(4) { left: 60%; top: 68px; } .i-process .btn:nth-child(5) { left: 80%; top: 138px; } .i-process .btn:nth-child(6) { left: 776px; top: 46px; } .i-process .btn:nth-child(7) { left: 957px; top: 148px; } .i-process .btn:nth-child(8) { left: 1087px; top: 58px; } .i-process .btn .light { width: 10px; height: 10px; border-radius: 5px; background: #ffffff; margin: 12px auto; } .i-process .btn .light:after { content: ""; position: absolute; left: -5px; top: -5px; z-index: -1; width: 20px; height: 20px; border-radius: 10px; background: #f26522; opacity: 0.3; } .i-process .btn.cur .light:after { animation: Circle 1.2s infinite linear; } .i-process .btn.cur .light:after { animation: Circle 1.2s infinite linear; } .i-process .btn .circle { width: 68px; height: 68px; line-height: 68px; border-radius: 34px; background: #edeff1; margin: 12px auto; } .i-process .btn .circle i { font-size: 46px; position: relative; z-index: 100; color: #f26522; } .i-process .btn.cur .circle { background: #f26522; } .i-process .btn.cur .circle i { color: #fff; } .i-process .btn .circle:after { content: ""; position: absolute; left: 0; top: 0; width: 68px; height: 68px; z-index: -1; } .i-process .btn.cur .circle:after {} .i-process { /* height: 350px; */ } .pca_list{ position: relative; width: 100%; height: 100%; z-index: 1; display: flex ; transition-property: transform; box-sizing: content-box;} .service-block-style2 { position: relative; border: 1px solid rgba(8, 8, 8, 0.1); border-left: none; padding: 10px; transition: all 300ms ease; width: 25% } [data-tm-layout=dark] .service-block-style2 { border-color: rgba(255, 255, 255, 0.1); } .service-block-style2 .inner-block { border-radius: 10px; padding: 61px 0 60px; overflow: hidden; width: 100%; display: flex; justify-content: center; align-items: center; transition: all 300ms ease; } @media screen and (min-width: 1400px) and (max-width: 1440px) { .service-block-style2 .inner-block { padding: 46px 0 45px; } } @media screen and (min-width: 1025px) { .service-block-style2 .inner-block { min-height: 625px; } } @media screen and (min-width: 1025px) and (max-width: 1199px) { .service-block-style2 .inner-block { padding: 31px 0 30px; } } .service-block-style2 .inner-block .inner { max-width: 381px; width: 100%; padding: 0 20px; } .service-block-style2 .inner-block.active, .service-block-style2 .inner-block:hover { background-color: #1a1a1a; } .service-block-style2 .inner-block.active .title-box .service-count, .service-block-style2 .inner-block:hover .title-box .service-count { color: #fff; } .service-block-style2 .inner-block.active .title-box .service-title, .service-block-style2 .inner-block:hover .title-box .service-title { color: #fff; } .service-block-style2 .inner-block.active .title-box .service-title a, .service-block-style2 .inner-block:hover .title-box .service-title a { color:#fff; } .service-block-style2 .inner-block.active .title-box .service-title a:hover, .service-block-style2 .inner-block:hover .title-box .service-title a:hover { color: #fff; } .service-block-style2 .inner-block.active .service-thumb img, .service-block-style2 .inner-block:hover .service-thumb img { max-height: 170px; } .service-block-style2 .inner-block.active .content, .service-block-style2 .inner-block:hover .content { display: block; } .service-block-style2 .inner-block .title-box { position: relative; margin-bottom: 67px; } .service-block-style2 .inner-block .title-box .service-count { font-size: var(--f42); font-weight: 600; line-height: 1; margin-bottom: 15px; transition: all 300ms ease; } .service-block-style2 .inner-block .title-box .service-title { margin-top: 0; margin-bottom: 0; transition: all 300ms ease;font-size: var(--f22) } .service-block-style2 .inner-block .title-box .service-title a { color: var(--heading-color); } .service-block-style2 .inner-block .title-box .service-title a:hover { color: var(--theme-color1); } .service-block-style2 .inner-block .service-thumb { position: relative; overflow: hidden; } .service-block-style2 .inner-block .service-thumb img { border-radius: 10px; max-height: 370px; object-fit: cover; width: 100%; transition: all 300ms ease; } .service-block-style2 .inner-block .content { display: none; position: relative; margin-top: 35px; } @media screen and (min-width: 1200px) and (max-width: 1399px) { .service-block-style2 .inner-block .content { margin-top: 30px; } } @media screen and (min-width: 1025px) and (max-width: 1199px) { .service-block-style2 .inner-block .content { margin-top: 35px; } } @media (max-width: 991.98px) { .service-block-style2 .inner-block .content { margin-top: 25px; } } .service-block-style2 .inner-block .content .service-details { color: #fff; margin-bottom: 30px; transition: all 300ms ease; } .service-block-style2 .inner-block:hover .content .service-details a{color: #fff;} @media (max-width: 991.98px) { .service-block-style2 .inner-block .content .service-details { margin-bottom: 23px; } } .service-block-style2 .inner-block .content .service-more { background-color:#f26522; border-radius: 5px; color:#fff ; font-weight: 600; display: inline-block; padding: 12px 24px; transition: all 300ms ease; } .blog_list{display: flex;; width:100%; } .blog-item-current-style1 { position: relative; transition: all 300ms ease; width: 32%; } body.tm-dark-layout .blog-item-current-style1 { border-bottom-color: #1d1d1d; } .blog-item-current-style1:hover .entry-header { transition: all 300ms ease; } .blog-item-current-style1:hover .entry-header .thumb { position: relative; overflow: hidden; } .blog-item-current-style1:hover .entry-header .thumb .icon-box-two { transform: rotate(45deg) scale(1); } .blog-item-current-style1:hover .entry-header .thumb .post-thumb:first-child { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .blog-item-current-style1:hover .entry-header .thumb .post-thumb:nth-child(2) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-item-current-style1:hover .entry-header .thumb .post-thumb .icon-box-two { transform: rotate(45deg) scale(1); } @media (max-width: 1024.98px) { .blog-item-current-style1 .inner-box { margin-bottom: 30px; } } .blog-item-current-style1 .entry-header { position: relative; } .blog-item-current-style1 .entry-header .post-thumb-inner { position: relative; } .blog-item-current-style1 .entry-header .thumb { position: relative; overflow: hidden; margin-bottom: 0; border-radius: 14px; } .blog-item-current-style1 .entry-header .thumb .post-thumb { position: relative; width: 100%; display: block; transition: all 500ms ease; } .blog-item-current-style1 .entry-header .thumb .post-thumb:first-child { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-item-current-style1 .entry-header .entry-meta { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(153, 153, 153, 0.16) 100%); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(50px); border-radius: 14px; margin-bottom: 0; gap: 10px; position: absolute; bottom: 20px; left: 30px; right: 30px; padding: 12.5px 24px 10px; z-index: 2; align-items: center; display: flex; justify-content: space-between; flex-direction: row-reverse; } .blog-item-current-style1 .entry-header .entry-meta::after { background-color: var(--theme-color1); border-radius: 50%; content: ""; height: 5px; position: absolute; left: 50%; top: 50%; width: 5px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .blog-item-current-style1 .entry-header .entry-meta a { color: #fff; } .blog-item-current-style1 .entry-header .entry-meta a:hover { color: #fff; } .blog-item-current-style1 .entry-header .entry-meta li { position: relative; display: flex; align-items: center; font-size: 14px; margin-right: 0; padding-right: 0; text-transform: capitalize; } .blog-item-current-style1 .entry-header .entry-meta li a { color: #fff; font-size: 16px; } .blog-item-current-style1 .entry-header .entry-meta li a:hover { color: var(--theme-color1); } .blog-item-current-style1 .entry-header .entry-meta li .categories-links a { color: #fff; } .blog-item-current-style1 .entry-header .entry-meta li .categories-links a:hover { color: var(--theme-color1); } .blog-item-current-style1 .entry-header .entry-meta li:last-child { margin-right: 0; } .blog-item-current-style1 .entry-header .entry-meta li:last-child:before { display: none; } .blog-item-current-style1 .entry-header .entry-meta li i { display: none; } .blog-item-current-style1 .entry-content { position: relative; padding-top: 27px; transition: all 300ms ease; } .blog-item-current-style1 .entry-content .post-excerpt { margin-bottom: 10px; } .blog-item-current-style1 .entry-content .btn-box a { color: #080808; font-weight: 600; gap: 7px; line-height: 1; display: inline-flex; } [data-tm-layout=dark] .blog-item-current-style1 .entry-content .btn-box a { color: #fff; } .blog-item-current-style1 .entry-content .btn-box a:hover .arrow-left { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .blog-item-current-style1 .entry-content .btn-box a:hover .btn-title { -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .blog-item-current-style1 .entry-content .btn-box a:hover .arrow-right { -webkit-transform: scale(0) translateX(-18px); -moz-transform: scale(0) translateX(-18px); -ms-transform: scale(0) translateX(-18px); transform: scale(0) translateX(-18px); } .blog-item-current-style1 .entry-content .btn-box a .arrow-left { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); transition: all 300ms ease; } .blog-item-current-style1 .entry-content .btn-box a .btn-title { transition: all 300ms ease; } .blog-item-current-style1 .entry-content .btn-box a .arrow-right { -webkit-transform: scale(1) translateX(-18px); -moz-transform: scale(1) translateX(-18px); -ms-transform: scale(1) translateX(-18px); transform: scale(1) translateX(-18px); transition: all 300ms ease; } .blog-item-current-style1 .entry-content .btn-box a i { font-size: 14px; transition: all 300ms ease; } .blog-item-current-style1 .entry-title { margin-top: 0; margin-bottom: 10px; font-size: var(--f24); } .blog-item-current-style1 .mascot-post-excerpt { margin-top: 15px;font-size: var(--f18); color: #777 } .index_tong{ background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/tongbg.jpg) center/cover no-repeat;border-radius: 30px; } .our-services-gold{ } .service-item-gold{ position: relative; background-color: var(--white-color); border-radius: 14px; padding: 40px; height: calc(100% - 30px); margin-bottom: 30px; overflow: hidden; background: rgba(8, 8, 8, 0.1); width: 32% } .service-item-gold::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 0; background: #000; z-index: 0; transition: all 0.4s ease-in-out; } .service-item-gold:hover:before{ top: auto; height: 100%; } .service-item-header-gold{ position: relative; margin-bottom: 40px; z-index: 1; } .service-item-header-gold .icon-box{ width: 50px; height: 50px; background-color: #f26522; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; } .service-item-header-gold .icon-box img{ width: 100%; max-width: 24px; } .service-item-content-gold h2{ font-size: 20px; line-height: 1.4em; transition: all 0.4s ease-in-out; } .service-item-gold:hover .service-item-content-gold h2{ color: #fff; } .service-item-content-gold h2 a{ color: inherit; } .service-item-image-gold a, .service-item-image-gold a figure{ display: block; cursor: none; border-radius: 14px; overflow: hidden; } .service-item-image-gold a figure img{ width: 100%; aspect-ratio: 1 / 0.621; object-fit: cover; border-radius: 14px; transition: all 0.6s ease-in-out; } .service-item-gold:hover .service-item-image-gold a figure img{ transform: scale(1.06); } .companyAchievement{ background: url(../images/ear.jpg) no-repeat center } .companyAchievement > section{display:flex;justify-content:space-between;} .companyAchievement > section h3{font-size:var(--f42);color:#fff;line-height:2.26;margin:0;} .companyAchievement > section p{font-size:calc(18/16 * 1em);line-height:2.22;margin:0;color:#fff;} .companyAchievement > section ul{text-align:center;margin-top:calc(40/16 * 1em);list-style:none;display:flex;align-items:flex-end;min-height:450px;max-height:600px;} .companyAchievement > section ul li:not(:nth-last-of-type(1)){margin-right:calc(73/16 * 1em);} .companyAchievement > section ul aside{font-size:calc(21/16 * 1em);line-height:3;color:#f26522;} .companyAchievement > section ul .shape{width:calc(112/16 * 1em);background-color:#f26522;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;} .companyAchievement > section ul span{font-size:16px;color:#fff;line-height:2.5;} .companyAchievement > section ul .shape{width:calc(60/16 * 1em);} .companyAchievement > section h3{font-size:var(--f42);} .companyAchievement > section p{font-size:calc(16/16 * 1em);} .companyAchievement > section ul li:not(:nth-last-of-type(1)){margin-right:calc(20/16 * 1em);} .companyAchievement .AchievementRight{margin-top:20px;} .companyAchievement > section ul{margin-top:calc(20/16 * 1em);} } .companyAchievement > section ul .shape{width:100%;} .companyAchievement > section ul li{width:20.5%;} .companyAchievement > section ul li:not(:nth-last-of-type(1)){margin-right:6%;} .companyAchievement > section ul .shape{height:0;transition:ease-in-out 2s;} .benefit-content-box{ position: sticky; top: 30px; } .benefit-item{ display: flex; flex-wrap: wrap; gap: 15px; background: var(--secondary-color); border-radius: 14px; margin-bottom: 30px; padding: 30px; } .benefit-item:last-child{ margin-bottom: 0; } .benefit-item .icon-box{ position: relative; width: 50px; height: 50px; background: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .benefit-item .icon-box::before{ content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: var(--primary-color); border-radius: 50%; width: 100%; height: 100%; transform: scale(0); transition: all 0.4s ease-in-out; z-index: 0; } .benefit-item:hover .icon-box::before{ transform: scale(1); } .benefit-item .icon-box img{ position: relative; width: 100%; max-width: 24px; transition: all 0.4s ease-in-out; z-index: 1; } .benefit-item:hover .icon-box img{ filter: brightness(0) invert(1); } .benefit-item-content{ width: calc(100% - 65px); } .benefit-item-content h3{ font-size: 20px; } .benefit-item-content p{ margin: 10px 0 0; } .benefit-content-footer{ margin-top: 60px; } .benefit-footer-list ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 30px; list-style: none; padding: 0; margin: 0 auto; } .benefit-footer-list ul li{ position: relative; font-weight: 500; background: var(--secondary-color); color: var(--primary-color); padding: 12px 15px 12px 30px; border-radius: 100px; transition: all 0.4s ease-in-out; } .benefit-footer-list ul li::before{ content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: var(--accent-color); border-radius: 50%; width: 6px; height: 6px; } .benefit-footer-list ul li:hover{ background: var(--primary-color); color: var(--white-color); } .our-story{ position: relative; background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/work02_bg.jpg) center/cover no-repeat; } .our-story .container{ position: relative; z-index: 2; } .our-story-content{ max-width: 700px; } .story-counter-items-list{ display: flex; flex-wrap: wrap; gap: 30px; } .story-counter-item{ width: calc(50% - 15px); border: 1px solid var(--dark-divider-color); background: var(--divider-color); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 30px; } .story-counter-item-header h2{ font-size: 40px; color: var(--white-color); } .story-counter-item-header h3{ font-size: 20px; color: var(--white-color); margin-top: 10px; } .story-counter-item-content{ border-top: 1px solid var(--dark-divider-color); padding-top: 30px; margin-top: 30px; } .story-counter-item-content p{ color: var(--white-color); margin: 0; } .our-story-btn{ border-top: 1px solid var(--dark-divider-color); padding-top: 40px; margin-top: 40px; } .watch-our-story-circle{ text-align: center; } .watch-our-story-circle a{ display: inline-block; background: var(--divider-color); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 50%; } .watch-our-story-circle a img{ width: 100%; max-width: 130px; border-radius: 50%; animation: infiniterotate 20s infinite linear; } .how-it-work{ } .how-work-item-list{ display: flex; flex-wrap: wrap; gap: 30px; } .how-work-item{ width: calc(33.33% - 20px); } .how-work-item:nth-child(3n + 3) .how-work-item-no::before, .how-work-item:last-child .how-work-item-no::before{ width: 100%; } .how-work-item-no{ position: relative; text-align: center; margin-bottom: 40px; } .how-work-item-no::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--divider-color); width: calc(100% + 30px); height: 1px; left: 0px; } .how-work-item-no h2{ position: relative; font-size: 14px; line-height: normal; display: inline-flex; justify-content: center; background-color: var(--accent-color); border-radius: 100px; padding: 8px 16px; z-index: 1; transition: all 0.4s ease-in-out; } .how-work-item:hover .how-work-item-no h2, .how-work-item.active .how-work-item-no h2{ background-color: var(--primary-color); color: var(--white-color); } .how-work-item-body{ position: relative; padding: 40px; border-radius: 14px; overflow: hidden; } .how-work-item-image{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .how-work-item-image figure{ position: relative; display: block; height: 100%; } .how-work-item-image figure:before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--primary-color); opacity: 40%; } .how-work-item-image:after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--secondary-color); border-radius: 14px; width: 100%; height: 100%; transition: all 0.4s ease-in-out; z-index: 2; } .how-work-item:hover .how-work-item-image::after, .how-work-item.active .how-work-item-image::after{ transform: translate(100%, -100%); } .how-work-item-image img{ height: 100%; width: 100%; object-fit: cover; } .how-work-item-body .icon-box{ position: relative; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--accent-color); border-radius: 50%; margin-bottom: 30px; z-index: 3; } .how-work-item-body .icon-box::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--white-color); border-radius: 100px; transform: scale(0); width: 100%; height: 100%; transition: all 0.4s ease-in-out; z-index: 0; } .how-work-item.active .how-work-item-body .icon-box::before, .how-work-item:hover .how-work-item-body .icon-box::before{ transform: scale(1); } .how-work-item-body .icon-box i{ position: relative; width: 100%; max-width: 24px; z-index: 1; color:#fff; font-size: 24px } .how-work-item:hover .how-work-item-body .icon-box i{ color:var(--accent-color)} .how-work-item-content{ position: relative; z-index: 2; } .how-work-item-content h3{ font-size: 20px; transition: all 0.4s ease-in-out; } .how-work-item-content p{ margin: 10px 0 0; transition: all 0.4s ease-in-out; } .how-work-item-content ul{ list-style: disc; margin: 20px 0 0; padding: 20px 0 0 20px; border-top: 1px solid var(--divider-color); transition: all 0.4s ease-in-out; } .how-work-item-content ul li{ line-height: 1.5em; margin-bottom: 15px; transition: all 0.4s ease-in-out; } .how-work-item-content ul li:last-child{ margin-bottom: 0; } .how-work-item-content ul li::marker{ color: var(--accent-color); } .how-work-item:hover .how-work-item-content h3, .how-work-item:hover .how-work-item-content p, .how-work-item:hover .how-work-item-content ul li, .how-work-item.active .how-work-item-content h3, .how-work-item.active .how-work-item-content p, .how-work-item.active .how-work-item-content ul li{ color: var(--white-color); } .how-work-item.active .how-work-item-content ul, .how-work-item:hover .how-work-item-content ul{ border-color: var(--dark-divider-color); } .how-it-work .section-footer-text{ margin-top: 60px; } .approach-image-box{ position: relative; } .approach-image figure{ display: block; border-radius: 14px; } .approach-image img{ width: 100%; aspect-ratio: 1 / 0.82; object-fit: cover; border-radius: 14px; } .approach-review-box{ position: absolute; bottom: 40px; left: 40px; right: 40px; width: 250px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; background: var(--divider-color); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 25px; z-index: 2; } .approach-review-box .icon-box img{ width: 100%; max-width: 50px; } .approach-review-box-content{ width: calc(100% - 65px); } .approach-review-box-content h3{ font-size: 20px; color: var(--white-color); } .approach-review-star{ display: inline-block; margin: 10px 0 0; } .approach-review-star i{ color: var(--accent-color); } .approach-item-list{ margin-left: 10px; } .approach-item{ background: var(--white-color); border-radius: 14px; padding: 20px 0 10px 40px; } .approach-item:last-child{ margin-bottom: 0; } .approach-item .icon-box{ position: relative; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--accent-color); border-radius: 50%; margin-bottom: 20px; } .approach-item .icon-box i{ color:#fff;} .approach-item .icon-box::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary-color); border-radius: 100px; transform: scale(0); width: 100%; height: 100%; transition: all 0.4s ease-in-out; z-index: 0; } .approach-item:hover .icon-box::before{ transform: scale(1); } .approach-item .icon-box i{ position: relative; width: 100%; transition: all 0.4s ease-in-out; z-index: 1; text-align: center; font-size: 30px } .approach-item:hover .icon-box img{ filter: brightness(0) invert(1); } .approach-item-content h3{ font-size: 20px; line-height: 1.4em; } .approach-item-content p{ margin: 10px 0 0; } .our-approach .section-footer-text{ margin-top: 60px; } .why-choose-content{ margin-right: 15px; } .why-choose-body{ display: flex; flex-wrap: wrap; align-items: center; gap: 25px; } .why-choose-counter-box{ width: calc(41% - 12.5px); background-color: var(--secondary-color); border-radius: 10px; padding: 30px; } .why-choose-counter-item{ border-bottom: 1px solid var(--divider-color); padding-bottom: 25px; margin-bottom: 25px; } .why-choose-counter-item:last-child{ border: none; padding-bottom: 0; margin-bottom: 0; } .why-choose-counter-item h3{ font-size: 30px; color: var(--primary-color); } .why-choose-counter-item p{ font-weight: 600; color: var(--primary-color); margin: 10px 0 0; } .why-choose-info-box{ width: calc(59% - 12.5px); } .why-choose-info-item{ border-bottom: 1px solid var(--divider-color); padding-bottom: 30px; margin-bottom: 30px; } .why-choose-info-item .icon-box{ position: relative; height: 50px; width: 50px; background-color: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; } .why-choose-info-item .icon-box::before{ content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: var(--primary-color); border-radius: 50%; width: 100%; height: 100%; transform: scale(0); transition: all 0.4s ease-in-out; z-index: 0; } .why-choose-info-item:hover .icon-box::before{ transform: scale(1); } .why-choose-info-item .icon-box i{ position: relative; width: 100%; max-width: 24px; z-index: 1; transition: all 0.4s ease-in-out; color:#fff; font-size: 24px; text-align: center } .why-choose-info-item:hover .icon-box i{ filter: brightness(0) invert(1); } .why-choose-info-item-content h2{ font-size: 20px; } .why-choose-info-item-content p{ margin: 10px 0 0; } .why-choose-info-list ul{ list-style: none; padding: 0; margin: 0; } .why-choose-info-list ul li{ position: relative; line-height: 1.5em; padding-left: 25px; margin-bottom: 15px; } .why-choose-info-list ul li:last-child{ margin-bottom: 0; } .why-choose-info-list ul li::before{ content: '\f058'; position: absolute; font-family: 'Font Awesome 7 Free'; font-size: 18px; font-weight: 900; color: var(--accent-color); top: 0; left: 0; } .why-choose-btn{ border-top: 1px solid var(--divider-color); padding-top: 40px; margin-top: 40px; } .why-choose-image-box{ display: flex; flex-wrap: wrap; gap: 20px; background-image: url('../images/why-choose-bg-image.png'); background-position: bottom 30px center; background-repeat: no-repeat; background-size: auto; } .why-choose-image-box-1{ width: calc(56% - 10px); margin-top: 40px; } .why-choose-image-box-2{ position: relative; width: calc(44% - 10px); display: flex; flex-direction: column; gap: 20px; } .why-choose-image{ position: relative; z-index: 1; } .why-choose-image figure{ display: block; border-radius: 14px; } .why-choose-image figure img{ width: 100%; object-fit: cover; border-radius: 14px; } .why-choose-image-box-1 .why-choose-image figure img{ aspect-ratio: 1 / 1.485; } .why-choose-image-box-2 .why-choose-image figure img{ aspect-ratio: 1 / 1.161; } .why-choose-image-box-2 .contact-us-circle{ position: absolute; top: 50%; left: -10px; transform: translate(-50%, -50%); border-radius: 100%; z-index: 1; } .contact-us-circle a{ display: inline-block; border-radius: 50%; border: 10px solid var(--bg-color); overflow: hidden; } .contact-us-circle img{ width: 100%; max-width: 130px; border-radius: 50%; animation: infiniterotate 20s infinite linear; } .contact-us-circle a:hover img{ animation-play-state: paused; } @keyframes infiniterotate{ 100%{ transform: rotate(360deg); } } .video-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; animation: fadeIn 0.3s; } .video-modal-content { position: relative; width: 90%; max-width: 800px; background: transparent; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 比例 */ height: 0; overflow: hidden; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .close-modal { position: absolute; top: -40px; right: 0; color: white; font-size: 30px; font-weight: bold; cursor: pointer; transition: color 0.3s; z-index: 1001; } .close-modal:hover { color: #ff0000; } /* 添加一些动画效果 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.9); } to { transform: scale(1); } } /* 圆形按钮悬停效果 */ .watch-our-story-circle a { display: inline-block; transition: transform 0.3s ease; } .watch-our-story-circle a:hover { transform: scale(1.1); } .pagination{display: flex; flex-wrap: wrap;} .pagination li a,.pagination li span{ transition: 0.4s; width: var(--w); height: var(--w); line-height: var(--w); text-align: center; background: #f3f3f3; border-radius: 50%; color: #999; margin: 0 0.1rem; display: block } .pagination li.active a, .pagination li:hover a,.pagination li.active span,.pagination li:hover span{ color: #fff; background: linear-gradient(to right, #f26522, #f1c269); } @media (max-width: 1000px) { .pca_list{ display: block } .service-block-style2{ width: 100% } .service-block-style2 .inner-block{ padding: 21px 0 20px} .service-block-style2 .inner-block .title-box{margin-bottom:20px} .index_about .ut_post{ display: block} .index_about .ut_post .img{ margin-top: 20px; } .index_about .ut_post .img img{ max-width: 100%; } .index_about .content2 .li + .li{ margin-left: 10px } .col-xl-6{ width:100%} .approach-item{ padding: 20px 0 10px 0px; } .i-process{width:100%} .i-process .list{ width: 100%; height: 350px; background: none ; } .companyAchievement > section ul span{ font-size:12px} .companyAchievement > section{ display: block} .i-process .btn p{font-size: var(--f16);} .blog-item-current-style1{ width:100%} .pc_footer .ter_top .content2 .f_about{ width:100%; padding: 20px 0px} .pc_footer .ter_top .content2 .newsletter-area form{ width:100%; margin-top: 10px} .Inner_Banner .orientation .content1{ font-size: var(--f30);} .Inner_Banner .orientation .content2{ font-size: var(--f16);} .mbx{ top:20px} .sec_link .offset-1{flex-basis:100% } .sec_link .link_area ul{display:block} .main_box .box_top{ display: none} .why-choose-info-box{width: 100%} .col-xl-9{ width: 100%} .our-story-content { max-width: 100%; } .how-work-item-no{ display: none } .how-work-item{width: 100%} }