@charset "utf-8"; body{ overflow-x:hidden;} body{ color:#3e3a39; height:auto; box-sizing:border-box; font-size:14px; padding-top: 0px;} .noSelect{-moz-user-select: none; /*鐏嫄*/ -webkit-user-select: none; /*webkit娴忚鍣?/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*鏃╂湡娴忚鍣?/ user-select: none;} a{ color:#3e3a39; text-decoration:none;} a:hover{ text-decoration:none; color:#e1251b;} i,em{ font-style:normal;} .menu .h3 span, .menu .h3 i{ font-family:"iconfont" !important; font-size:1em; font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } .menu, .menu .h3 a, .header .wp, .logo img{ transition: all 0.3s ease-out; } .ddddddddd{ transform:scale(1.05,1.05);} .videoAD{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #000; z-index: 9999; overflow: hidden; cursor: pointer;} .videoAD video{ width: 100vw; height: 100vh; object-fit: cover;} .videoClose{position: absolute; left: 50%; bottom:30px; font-size: 18px; width: 2em; height: 2em; line-height: 2em; text-align: center; color: #e1251b; background: #fff; border-radius: 50%; text-align: center; transform: translateX(-50%);} /*娣″叆 鍚戜笂 寰幆*/ .FmovefadeInDown, .pageNext:before{animation:FmovefadeInDown 1.5s infinite ease both;} @keyframes FmovefadeInDown{0%{opacity:0;transform:translateY(-10px)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(15px)}} .FmovefadeInUp{animation:FmovefadeInUp 1.5s infinite ease both;} @keyframes FmovefadeInUp{0%{opacity:0;transform:translateY(30px)}70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}} .Frotation360{animation:Frotation360 2s linear infinite;} @keyframes Frotation360 {from{transform:rotate(0)}to{transform:rotate(360deg)}} .FpulseSlow{animation:FpulseSlow infinite alternate 1s ease-in-out;} @keyframes FpulseSlow {0% {transform:scale(1);opacity:1;}100%{transform:scale(0.9);opacity:0.5;}} .lightSpeedIn{animation:lightSpeedIn infinite alternate 3s ease-in-out;} @keyframes lightSpeedIn{0%{transform:skewX(-10deg);}60%{transform:skewX(10deg);}90%{transform:skewX(-5deg);}100%{transform:none;}} .menu-link { display:none; box-sizing: border-box; position:absolute; top:50%; margin-top:-20px; right:-8px;font-size: 11px;z-index: 10;width:40px;height:40px; padding:7px; transition: all 0.2s ease-out;} .menu-link em{ position:absolute; z-index:3; right:100%; top:50%; text-transform:uppercase; height:40px; line-height:40px; margin-top:-20px; font-size:16px; color:#000; display: none;} .menu-link:hover, .menu-link:focus {} .menu-link span {position: relative;display: block;margin-top:12px;} .menu-link span, .menu-link span:before, .menu-link span:after {background-color: #fff;width: 100%;height:2px; transition: all 0.4s;box-sizing: border-box;} .menu-link span{transition:none;} .menu-link span:before, .menu-link span:after {position: absolute;top: -8px;content: " ";} .menu-link span:after {top:8px;} /*.menu-link.active{ background:#e1251b; border-radius: 50%;}*/ .menu-link.active span {background: transparent;} .menu-link.active span:before { background-color:#fff; transform: rotate(45deg); top:0px;} .menu-link.active span:after { background-color:#fff; transform: rotate(-45deg); top:0px;} .menu-link.active em{ display:none;} .wp{ position: relative; width: 80%; margin: 0 auto;} .header{ position:absolute; left:0px; top:0px; right:0px; z-index:9; border-bottom: 1px solid rgba(255,255,255,0.2); position: fixed;} .header .wp{ width: auto; margin: 0 5%;} .logo{ position:absolute; left:0px; top:50%; margin-top:-0.5em; font-size:28px; line-height: 1;} .logo .img1{ height:1em; width:auto; display: block;} .logo .img2{ height:1em; width:auto; display: none;} .tLanguage{position: absolute; right: 58px; top: 50%; transform: translateY(-50%);} .tLanguage .i{ width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-size:16px; color: #fff; text-align: center; cursor: pointer; display: none;} .tLanguage .box{ line-height: 1; font-size: 16px; color: #fff; display: block;} .tLanguage .box i{ display: inline-block; vertical-align: bottom; margin-left: 0.5em; font-size: 1em;} .tLanguage .box a{ display: inline-block; vertical-align: bottom; color: #fff; font-weight: normal;} .tLanguage .box a.curr{ color: #e1251b;} .ignore{ position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #444; z-index:99; display: none;} .ignore .wp{ height: 100%;} .ignoreList{ height: 100%; display: flex; align-items: center; position: relative;} .ignoreList .i{ width: 32px; height: 32px; line-height: 32px; display: block; border-radius: 16px; background: #fff; color: #e1251b; position: absolute; left: 50%; margin-left: -16px; bottom: 0px; text-align: center; cursor: pointer;} .ignoreList .i:hover{ background: #e1251b; color: #fff;} .ignoreList .wpd{ position: relative; padding-bottom: 60px;} .ignoreList ul{ display: flex; flex-wrap:wrap;} .ignoreList li{ width: 20%;} .ignoreList a{ color: #fff; height: 32px; line-height: 32px; display: block;} .ignoreList a:hover{ color: #e1251b;} .tSearch{position: absolute; right: 0px; top: 50%; margin-top: -16px;} .tSearch .i{ display: block; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-size:16px; color: #fff; text-align: center;} .tSearch .i:after{ content: ''; width: 1px; height: 32px; position: absolute; right: 40px; top: 50%; margin-top: -16px; background: rgba(255,255,255,0.5);} .tSearch.active .i:before{ content:"\e80c";} .tSearch .box{ position: fixed; padding:4.6875em 0; z-index: 3; left: 0px; right: 0px; top:70px; display: none; background:#fff; background-size: 100% 100%; font-size: 1.66666666666667vw;} .tSearch .pd{ position:relative; width:30em; margin: 0 auto;} .tSearch .t{ font-size: 48px; line-height: 1; display: block; text-align: center; color: #7f7f7f; margin-bottom: 2em; font-size: 1.5em;} .tSearch .c{ position: relative; padding-left: 448px; box-shadow: 0 0 3px rgba(0,0,0,0.3); border-radius: 6px;} .ipt_t1{ background:#fff; border:none; color:#e1251b; width:100%; padding:0 48px 0 15px; border-radius:0 6px 6px 0 !important; font-size:14px; height:48px; box-sizing:border-box; display:block;} .ipt_b1{ width:5.4em; text-align:center; font-size:18px; height:48px; color:#fff; position:absolute; right:0px; top:50%; margin-top:-24px; background:#e1251b; border:none; border-radius:6px!important; box-sizing: border-box;} .tSelect{ position: absolute; left: 0px; top: 0px; display: flex;} .tSelect .ipt_s1:first-child{ border-radius: 6px 0 0 6px !important; } .ipt_s1{ width: 112px;/* position: absolute; left: 0px; top: 0px;*/ height: 48px; border: none; padding: 0 0.75em; box-sizing: border-box; font-size: 14px; background:url(../images/select_jt.png) no-repeat right center #e3e5e6 !important; background-size: auto 40% !important; cursor: pointer; display: block;} /*.ipt_s1_1{ border-radius:6px 0 0 6px !important;} .ipt_s1_2{ left: 8em; } .ipt_s1_3{ border-radius:0 6px 6px 0 !important; left: 16em;}*/ .proSearch{} .proSearch .tSearch{ position: static; right: auto; top: auto; margin: 0px;} .proSearch .tSearch .box{ position: static; right: auto; top: auto; margin: 0px; left: auto; display: block; padding: 2.5em 0;} .menu{ text-align: right; margin: 0 150px;} .menu ul{ display: inline-block; vertical-align: bottom; position: relative;} .menu li{ float: left; position: relative;} .menu .h3{ padding: 0 30px; position: relative;} .menu .h3 a{ display: block; color: #fff; height:70px; line-height: 70px; font-size: 16px; position: relative;} .menu .h3 a:before{ content: ''; position: absolute; height: 3px; left: 0px; right: 0px; background:#e1251b; background-size: 100% auto; bottom: -2px; opacity: 0; transition: 0.3s all;} .menu .h3 strong{ font-weight: normal;} .menu .h3 span{ display:none; position:absolute; right:30px; top:50%; margin-top:-20px; font-size: 16px; width:40px; height:40px; text-align:center; line-height:40px; cursor:pointer; margin-right:-10px; } .menu .h3 span:before{ content: "\e604"; } .menu .h3 span.active:before { content: "\e606"; } .menu .h3 i{ display:none; position:absolute; right:30px; top:50%; margin-top:-20px; font-size: 16px; width:40px; height:40px; text-align:center; line-height:40px; margin-right:-10px;} .menu .h3 i:before { content:"\e8e9"; } .menu li:nth-child(5) .h3 a:after{ content: ''; position: absolute; background: url("../images/logo_menu.svg") no-repeat center center; background-size: auto 80%; height: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; aspect-ratio:300/53;} .menu li:nth-child(5) .h3 strong{ opacity: 0;} .menu .box{ position: absolute; top: 100%; left: 50%; width: 160px; margin-left: -80px; padding-top: 0px; visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; transition: 0.3s all; padding:10px 0 0 0;} .menu .box .npd{background: rgba(225,37,27,0.8); border-radius: 12px; box-shadow: 0 3px 5px rgba(0,0,0,0.2); box-sizing: border-box; padding:20px 0;} .menu .box a{ font-size: 16px; line-height: 1.75; display: block; text-align: center; color: rgba(255,255,255,0.85);} .menu .box a:hover{ color: rgba(255,255,255,1);} .menu li:hover .h3 a, .menu li.curr .h3 a{ color:#e1251b;} .menu li:hover .h3 a:before, .menu li.curr .h3 a:before{ opacity: 1;} .menu li:hover .box{ visibility: visible; opacity: 1; transform: translateY(0px); pointer-events:auto;} .header{ transition: 0.3s all;} .body_fix .header{ background: rgba(0,0,0,0.8); box-shadow: 0 0 10px rgba(0,0,0,0.1);} .iBanner{ position: relative; z-index: 4;} .iBanner .swiperDots{ display:none; bottom:40px;} .iBanner .img{ overflow: hidden;} .iBanner .img img{ height:100vh; width:100vw; object-fit: cover; object-position: bottom center;} .iBanner .text{ position: absolute; left: 0px; top: 82px; right: 0px; bottom: 260px; color: #fff; font-size: 1.66666666666667vw;} .iBanner .text .wp{ display: flex; align-items: center; height: 100%; width: 84.375%;} .iBanner .text .em{ font-size: 26px; margin-bottom: 0.75em; line-height: 1.2; font-size: 0.8125em; opacity: 0; transform: translateY(-20px); transition: 0.6s all; transition-delay: 0.8s; text-shadow: 1px 1px 0 rgba(0,0,0,1);} .iBanner .text .h3{ font-size: 48px; margin-bottom: 1em; line-height: 1.5; font-size: 1.5em; opacity: 0; transform: translateY(-20px); transition: 0.6s all; transition-delay: 1s; text-shadow: 1px 1px 0 rgba(0,0,0,1);} .iBanner .text .m{ opacity: 0; transform: translateY(-20px); transition: 0.6s all; transition-delay: 1.2s;} .iBanner .swiper-slide-active .h3{ opacity: 1; transform: translateY(0px);} .iBanner .swiper-slide-active .em{ opacity: 1; transform: translateY(0px);} .iBanner .swiper-slide-active .m{ opacity: 1; transform: translateY(0px);} .iBanner .pd2 .text{ color: #000;} .iBanner .swiperArrow{ display: block; right:7.8125%; width: 28px; height: 28px; line-height: 28px; font-size: 14px; top: auto; margin: 0px; bottom: 8.85416666666667vw; border:none; z-index: 5; color: #fff;} .iBanner .swiperPrev{ left: auto; margin-right: 94px;} .iBanner .swiperNext{} .iBanner .swiperDots{ display: block; bottom: 40%; right: auto; left: 7.8125%; text-align: left;} .iBanner .swiperPage{ position: absolute; display: block; bottom: 8.85416666666667vw; padding: 0 18px; right:7.8125%; margin-left: -42.1875%; z-index: 3; color: #fff; font-size: 18px; line-height: 28px; width: 86px; text-align: center;} .iBanner .swiperPage strong{ font-weight: normal;} .iBanner .swiperPage em{ margin: 0 0.25em;} .iBanner .swiperPage span{ color:rgba(255,255,255,0.5);} .pageNext{ position: absolute; top: 140px; right: 7.8125%; cursor: pointer; z-index: 3;} .pageNext a{ display: block; color: #fff;} .pageNext i{ display: block; height: 2em; width: 2em; line-height: 2em; margin: 0 auto; border: 1px solid #fff; font-size: 16px; color: #fff; border-radius: 50%; text-align: center;} .pageNext span{ display: block; line-height: 1; padding-top: 0.5em; font-size: 14px;} .pageNext a:hover i{ background: #e1251b; color: #fff; border-color: #e1251b;} .more1{ font-size: 14px; color: #e1251b; transition: 0.3s all; display: inline-block; vertical-align: bottom;} .more1 span{ font-size: 1em;} .more1 i{ font-size: 1em; margin-left: 0.3em;} .more1_1{} .more1_2 span{ color: #231815;} .more1_3 span{ color: #fff;} .more1_3 i{ color: #e1251b;} .more1:hover{ transform: translateX(5px);} .tit1{ font-size: 28px; line-height: 1; position: relative; } .tit1 strong{ display: inline-block; vertical-align: bottom; margin-right: 0.75em; font-weight: bold;} .tit1 em{display: inline-block; vertical-align: bottom; font-weight: bold; text-transform: uppercase;} .tit1 a{ position: absolute; right: 0px; top: 50%; margin-top: -0.5em; line-height: 1;} .tit1_3{ margin-bottom: 60px;} .tit1_3 strong{ color: #e1251b; } .tit1_3 em{ color: #231815; } .iStrength{ position: absolute; z-index: 3; left: 0px; bottom: 0px; right: 0px; background: rgba(255,255,255,0.2); border-top: 1px solid rgba(255,255,255,0.2); color: #e1251b; font-size: 1.66666666666667vw;} .iStrength .wp{ width: 84.375%;} .iStrength ul{ display: flex; width: 100%;} .iStrength li{ width: 25%; height: 4.0625em; display: flex; justify-content: center; align-items: center; position: relative;} .iStrength li:before{ content: ''; position: absolute; right: 0px; top: 0px; bottom: 0px; width: 1px; background: rgba(255,255,255,0.2);} .iStrength li:last-child:before{ display: none;} .iStrength .t{ font-size: 0.875em; line-height: 1;} .iStrength .t strong{ display: inline-block; vertical-align: bottom; position: relative;} .iStrength .t i{ font-size: 0.375em; position: absolute; left: 100%; bottom: 70%;} .iStrength .c{ font-size: 0.625em;} .iMain{ background:no-repeat center center; background-size:cover; padding: 0; position: relative; overflow: hidden;} .iMain1{ background-color: #e5e6e6;} .iAbout{ position: relative;} .iAbout .wpd{ z-index: 2; position: relative;} .iAbout .img{ width: 50%; float: right;} .iAbout .img img{ width: 50vw; float: left;} .iAbout .text{ padding-right: 60px; position: absolute; right: 50%; top: 0px; bottom: 0px; display: flex; justify-content: center; align-items: center; z-index: 2; } .iAbout .tit1{ margin-bottom: 1em;} .iAbout .p{ font-size: 18px; text-align: justify; line-height: 1.5; color: #808080; margin-bottom:1em; height: 7.5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:5;} .iAbout .m{ text-align: right;} .iMain2{ background-color: #e3e5e6;} .iCase{} .iCase ul{ position: relative; padding-left: 50%;} .iCase li{ width: 50%; float: left;} .iCase .pd{ display: block; position: relative;} .iCase .img{ } .iCase .text{ position: absolute; left: 0px; top: 0px; color: #fff; padding:1.428571428571429em 2.142857142857143em; font-size: 16px; line-height: 1.2;} .iCase li:first-child{position: absolute; left:0px; width: 50%;} .iCase li:first-child .text{ font-size: 28px;} .iCase .img{ overflow: hidden;} .iCase .img img{ transition: 1s all;} .iCase .pd:hover .img img{ transform: scale(1.05,1.05);} .iMain3{ background: url("../images/iProTit_bg.jpg") no-repeat; background-size: cover;} .iProHead{ height: 7.375em; display: flex; align-items: center; font-size: 1.66666666666667vw;} .iProHead .pd{ width: 100%;} .iProHead .tit1_2{ position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 50%; display: flex; justify-content: center; font-size: 0.875em;} .iProHead .p{ font-size: 0.5625em; line-height: 1.5; color: #000; float: right; min-width: 50%;} .iMain4{ overflow: hidden; margin-bottom: 65px;} .iMain4 .wp{ width: 100%;} .iPro{} .iPro .swiper{ margin:0 -17% 0 0;} .iPro .swiper-slide{ padding-bottom: 72px;} .iPro .pd{ display: block; position: relative;} .iPro .img{ width: 50%; } .iPro .img img{ transition: 1s all; height: auto; aspect-ratio:1116/640; object-fit: cover;} .iPro .text{ position: absolute; left: 50%; top: 0px; right: 0px; bottom: 0px; display: flex; align-items: center; background: #f5f5f5;} .iPro .npd{ padding:10px 10%;} .iPro .h3{ color: rgba(35,24,21,0.43); transition: 0.3s all; font-size: 20px; line-height: 1; position: relative; margin-bottom: 40px;} .iPro .h3:before{ background: rgba(35,24,21,0.43); transition: 0.3s all; content: ''; position: absolute; left: 0px; bottom: -19px; width: 14px; height: 2px;} .iPro .h3 strong{ font-weight:bold; display: block; margin-bottom: 0.25em;} .iPro .h3 em{ font-weight: normal; display: block;} .iPro .p{ color: rgba(35,24,21,0.43); transition: 0.3s all; font-size: 14px; margin-bottom: 2em; line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;} .iPro .swiperArrow{ display: none;} .iPro .swiperDots{ display: block; bottom: 40px;} .iPro .swiperDots span{ background: #808080; width: 12px; height: 12px; border-radius: 50%; transform: scale(0.75); transition: 0.3s all;} .iPro .swiperDots span.swiper-pagination-bullet-active{ border-color: #e1251b; background: #e1251b; transform: scale(1);} .iPro .swiperArrow{ display: block; top: auto; bottom: 0px; margin-top: -1em; display: none;} .iPro .swiperPrev{ left: 35%;} .iPro .swiperNext{ right: 35%;} /*.iPro .swiperArrow{ display: block; top: auto; bottom: 0px; margin: 0px;} .iPro .swiperPrev{ left: auto; right: 10%; margin-right: 3em;} .iPro .swiperNext{ right: 10%;} .iPro .swiperArrow:hover{ border-color: #e1251b; background: #e1251b; color: #fff;}*/ .iPro .pd:hover .h3{ color: rgba(35,24,21,1);} .iPro .pd:hover .h3:before{ background: rgba(35,24,21,1);} .iPro .pd:hover .p{ color: rgba(35,24,21,1);} .iPro .pd:hover .more2{ background: #e1251b; color: #fff;} .more2{ display: inline-block; vertical-align: bottom; font-size: 12px; color: #fff; width: 108px; height: 28px; line-height: 28px; text-align: center; background: #a9aaaa; transition: 0.3s all;} .more2 span{ font-size: 1em;} .more2 i{ font-size: 1em; margin-left: 0.3em;} .more2_1{} .more2:hover{ background: #e1251b; color: #fff; transform: translateX(5px);} .iMain5{ background: #f5f5f5 !important;} .iMain5_1{ font-size:1.66666666666667vw;} .iNews{} .iNews .swiper{ margin: 0 -40px;} .iNews .pd{ display: block; margin: 0 40px;} .iNews .text{ border-top: 2px solid #808080; padding: 20px 0; transition: 1s border;} .iNews .em{ font-size: 14px; color: #828283; margin-bottom: 30px;} .iNews .h3, .iNews .p{ color: #231815; font-size: 24px; line-height: 1.5; height: 3em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; font-weight: bold;} .iNews .img{ overflow: hidden;} .iNews .img img{ transition: 1s all;aspect-ratio:1080/680; width: 100%; height: auto; display: block; object-fit: cover;} .iNews .pd:hover .text{ border-top-color: #e1251b;} .iNews .pd:hover .img img{ transform: scale(1.05,1.05);} .footer{ color: rgba(255,255,255,0.5); background: #1a1a1a;} .footer a{color: rgba(255,255,255,0.5);} .footer a:hover{ color: rgba(255,255,255,1);} .fTop{ padding: 50px 0 20px 0;} .fNav{ margin: 0 200px 0 0; min-height: 200px; text-align: center; font-size: 14px;} .fNav ul{ } .fNav li{ float: left; width: auto; margin-right: 60px;} .fNav li:last-child{ margin-right: 0px;} .fNav .h3{ margin-bottom: 10px; position: relative;} .fNav .h3 a strong{ font-weight: bold;} .fNav .box a{ display: block; line-height: 2;} .fNav li:nth-child(4) .h3 a:after{ content: ''; position: absolute; background: url("../images/logo_menu.svg") no-repeat center center; background-size: auto 80%; height: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; aspect-ratio:300/53; opacity: 0.5;} .fNav li:nth-child(4) .h3 strong{ opacity: 0;} .fNav li:nth-child(4) .h3 a:hover:after{opacity: 1;} .fRight{ position: absolute; right: 0px; top: 0px; width: 120px;} .fLogo{ position: absolute; right: 100%; padding-right: 40px;} .fLogo img{ height: 20px; width: auto;} .fEwm img{ width: 100%; height: auto; display: block;} .fShare{ justify-content: center; padding-top: 10px;} .fShare ul{ margin-bottom:10px;} .fShare li{ position: relative; float: left;} .fShare li:last-child{ margin-right: 0px;} .fShare li{ float:left;} .fShare a{ display:block; width:30px; height:24px; line-height:24px; text-align:center; font-size:18px;} .fShare li .box{width: 140px; position: absolute; border: 1px solid #f5f5f5; margin-bottom: 12px; bottom: 100%; left: 50%; margin-left: -70px; display: none; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 10px; background: #fff; color: #333; text-align: center; border-radius: 8px; box-sizing: border-box;} .fShare li .box:before{ content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; width: 0;height: 0;border-top: 12px solid #f5f5f5;border-right: 6px solid transparent;border-left: 6px solid transparent;} .fShare li .box img{width: 100%; height: auto; display: block; margin-bottom: 10px;} .fShare li:hover .box{ display: block; } .fCon{} .fContact{ border-top: 1px solid rgba(255,255,255,0.1); width: 50%; padding: 20px 0 40px 0;} .fContact .pd{ display: flex;} .fContact dl{ display: flex; margin-right: 40px;} .fContact dt{ margin-right: 1em;} .fBottom{ padding: 10px 0; background: #242628;} .fCopy{ line-height: 2; text-align: center; font-size: 12px;} .fCopy p{ display: inline-block; vertical-align: bottom; margin: 0 0.5em;} .iNews{ font-size: 1.6666666666666666vw;} .iNews .h3, .iNews .p{ font-size: 0.75em;} .iNews .pd{ margin: 0 1.25em;} .iNews .swiper{ margin: 0 -1.25em;} /*瑙嗛*/ .play_btn{ background:#000; display:block;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; position:relative;} .play_btn i{ position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.1); transform: translateZ(0); transition: 0.3s all; z-index: 2;} .play_btn i:before{ font-size: 80px; width: 1em; height: 1em; line-height: 1; position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; color: #fff;} .play_btn:hover i{ color:#fff; background:rgba(0,0,0,0.5);} .video_bg{ position:fixed; left:0px; top:0px; right:0px; bottom:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:42; display:none;} .video_box{ position:fixed; width:1200px; height:auto; left:50%; top:50%; margin:-360px 0 0 -600px; z-index:43; display:none;} .video_box .img_cut{ background:#000;} .video_box i{ color:#fff; width:40px; height:40px; position:absolute; text-align:center; line-height:40px; background-color:#C01924; border-radius:50%; cursor:pointer; z-index:37; left:50%; bottom:-50px; margin-left:-20px;} .video_box i:hover{ background: #802C19;} .video_box video{ width:100%; height:auto; display:block;} .video_box iframe{ width:100%; height:100%; display:block; position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:36;} .video_box_vr i{ position:fixed; top:30px; right:30px; bottom:auto; left:auto; margin:0px;} @media screen and (max-width:768px){ .video_box{ left:0px; margin:0; top:0px; height:auto; right:0px; width:auto;} .video_box video{ height:auto;} } /*鎼滅储*/ .iMainSearch1{ padding:100px 0 60px 0;} .search_tit{ font-size:18px; height:20px; line-height:20px; color:#333; border-left:2px solid #e1251b; padding-left:14px; margin-bottom:24px;} .search_tit span{ color:#e1251b; margin-left:0.5em;} .search_list{ background:#fff; padding:50px 0 80px 0; min-height:25vh;} .search_list ul{ border-top:1px dashed #ccc;} .search_list li{ padding:15px 0; border-bottom:1px dashed #ccc;} .search_list .pd{} .search_list .h3{ font-size:18px;} .search_list .h3 em{ color:#e1251b; margin-right:10px;} .search_list .em{ font-size:14px; color:#ccc;} .search_list .p{ font-size:14px; color:#666;} @media screen and (max-width:768px){ .iMainSearch1{ padding: 40px 0;} .search_tit{} .search_list{ padding: 20px 0 30px 0; min-height: 20vh;} .search_list .h3{ font-size:14px;} } .backTop{ position: fixed; right: 20px; bottom: 100px; width: 48px; height: 48px; background: #ccf0ff; color: #333; border-radius: 8px; cursor: pointer; text-align: center; line-height: 48px; z-index: 10; font-size: 24px;} .backTop:hover{ background: #e1251b; color: #fff;} /*鍒嗛〉*/ .fpage{ text-align:center; padding:30px 0 0 0; font-size:20px;} .fpage ul{ display:inline-block; vertical-align:bottom;} .fpage li{ padding:0 0.25em; float:left;} .fpage .disabled{} .fpage a{} .fpage a, .fpage span{height: 38px;line-height: 36px;display: block;border-radius:3px;color: #fff;font-size: 14px;float: left; min-width: 30px; text-align: center; padding: 0 5px; box-sizing: border-box;background: rgba(255,255,255,0.5); border: 1px solid #d9d9d9; color: #333;} .fpage .active a, .fpage .active span{ background:#e1251b; color:#fff; border-color:#e1251b;} @media screen and (max-width:640px){ .fpage li{ padding: 0 3px;} .fpage a, .fpage span{ height: 24px; line-height: 24px; font-size: 10px; min-width: 24px;} } @media screen and (min-width:1920px){ } @media screen and (max-width:1680px){ .iAbout .tit1{ margin-bottom: 0.75em;} .iAbout .p{ font-size: 14px; height: 6em; -webkit-line-clamp: 4;} .iAbout .text{ padding-right: 40px;} .iProHead .p{ font-size: 16px;} .tit1_3{ margin-bottom: 40px;} .tLanguage .box{ font-size: 14px;} .menu .box a{ font-size: 14px;} .pageNext i{ font-size: 12px;} .pageNext span{ font-size: 12px;} } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .iProHead .tit1_2{ justify-content: flex-start;} } @media screen and (max-width:1366px){ body{ min-width: 1200px;} .logo{ font-size: 24px;} .wp{ width: 1080px;} .menu .h3{ padding: 0 15px;} .menu .h3 a{ font-size: 14px;} .tit1{ font-size: 24px;} .iAbout .tit1{ margin-bottom: 0.5em;} .iAbout .p{ font-size: 12px;} .ignoreList a{ height: 24px; line-height: 24px;} } @media screen and (max-width:1280px){ } @media screen and (max-width:1024px){ body{ padding-top:60px; min-width:inherit;} .oh-footer .wp, .wp, .header .wp{ margin:0 30px; width: auto;} .logo{ font-size: 30px;} .logo .img1{ display: none;} .logo .img2{ display: block;} .tLanguage{ left: auto; top: 50%; right:80px; margin-top: -16px; transform: none;} .tLanguage .i{ display: block;} .tLanguage .box{ display: none; position: fixed; left: 0px; top: 60px; right: 0px; background: #f5f5f5; text-align: center; padding: 30px 0; color: #e1251b;} .tLanguage .box a{ color: #e1251b;} .tSearch{ right: 35px;} .tSearch .i{ display:block; color: #fff;} .tSearch .i:after{ background: #fff; height: 20px; margin-top: -10px; right: 38px;} .tSearch .box{ position:fixed; left:0px; top:60px; right:0px; bottom: 0px; box-sizing: border-box; background:#e8eeff; padding:4.6875em 30px; display:none; width: auto; font-size: 24px;} .ipt_t1{ background: #fff; color: #e1251b;} .proSearch .tSearch .box{ background: #fff;} .menu-link{ display: block;} .menu-link em{ font-size:14px;} .header{ background: rgba(0,0,0,1); border-bottom: none; position: fixed;} .header .wp{ height:60px;} .menu{ position:fixed; top:0px; bottom:0px; z-index:2; margin: 0px; box-sizing:border-box;width:240px; right:-250px;} .menu ul{ padding:80px 0 0 0; float: none; display: block;} .menu li{ margin-bottom:15px; float: none; margin: 0px; padding:0px;} .menu li:hover .h3 a, .menu li.curr .h3 a{ color: #e1251b;} .menu .h3{ padding: 0px; text-align: left; position: relative;} .menu .h3 a{ display:block; vertical-align: bottom; font-size:14px; padding: 0 30px; height:40px; line-height: 40px; overflow:hidden; color:#333;} .menu .h3 a:before{ width: 4em; left: 50%; margin-left: -2em; border-bottom: 1px dashed rgba(255,255,255,0.5); height: 0px; background: no-repeat; bottom: 0px; opacity: 1;} .menu .h3 span{ height:40px; line-height:40px; display:block; text-transform:uppercase;} .menu .h3 i{ height:40px; line-height:40px; display:block;} .menu li:last-child .h3 a:before{ opacity: 0;} /*鏂拌彍鍗?/ .menu{ width: 160px; background: rgba(0,0,0,0.8); background-size: 100% 100%;} .menu li:hover .h3 a, .menu li.curr .h3 a{ color: #fff;} .menu .h3 a{ color: #fff; padding: 0px; text-align: center;} .menu .h3 span, .menu .h3 i{ display: none;} .menu.active{ right:0px;} .menu .box{ display: none; position: static; top: auto; left: auto; width: auto; box-shadow: none; transition: none; margin: 0px; transform: none; opacity: 1; visibility: visible; padding: 0px; padding: 15px 0;} .menu .box .npd{ flex-wrap: wrap;} .menu .box a{ padding:5px 0; margin: 0px; width: 50%;} .menu .box a:before{ display: none;} .iBanner .img{ height: calc(100vh - 60px);} .iBanner .text{ top:60px; bottom: 260px;} .iBanner .text .wp{ width: auto; margin: 0 30px;} .pageNext{ right: 30px;} .iStrength{ font-size: 24px;} .iBanner .swiperArrow{ right: 30px; bottom: 110px;} .iBanner .swiperPage{ right: 30px; bottom: 110px;} .iBanner .swiperDots{ left: 30px;} .pageNext i{ font-size: 12px;} .pageNext span{font-size: 12px;} .iMain{ padding: 50px 0;} .iMain1{ background: #fff;} .iAbout .img{ float: none; width: auto; } .iAbout .img img{ width: 100%; float: none;} .iAbout .text{ position: static; display: block; padding: 30px; right: auto; top: auto; bottom: auto; background: #f5f5f5;} .iMain2{ background: #f5f5f5;} .iCase .text{ font-size: 14px; padding: 1em 1.5em;} .iCase li:first-child .text{ font-size: 24px;} .iProHead{ height: auto; } .iProHead .tit1_2{ font-size: 20px; margin-bottom: 1em;} .iProHead .p{ font-size: 14px;} .iPro .swiper{ } .iPro .npd{ padding: 0 15px;} .iPro .img{ width: 250px;} .iPro .text{ left: 250px;} .iPro .h3{ font-size: 18px; margin-bottom: 20px;} .iPro .h3:before{ bottom: -9px; height: 1px;} .iPro .p{ margin-bottom: 1em;} .iMain4{ margin-bottom: 0px;} .iMain4 .wp{ width: auto;} .iMain5{ background: #f5f5f5;} .iPro .swiper-slide{ padding-bottom: 30px;} .iPro .swiperArrow{ display: none;} .iPro .swiperNext{ right: 0px;} .iPro .swiperPrev{ right: 0px;} .iPro .swiperDots{ display: block; bottom: 0px;} .iPro .swiperDots span{ background: rgba(0,0,0,0.1);} .iPro .swiperDots .swiper-pagination-bullet-active{ background: #e1251b;} .iNews .swiperDots{ display: block; bottom: -20px;} .iNews .swiperDots span{ background: rgba(0,0,0,0.1);} .iNews .swiperDots .swiper-pagination-bullet-active{ background: #e1251b;} .iMain5_1{} .fContact{ width: 100%;} .fNav li{ margin-right: 40px;} .fLogo{ position: static; right: auto; margin-bottom: 10px; padding: 0px;} .fLogo img{ width: 100%; height: auto;} .iCase .text{ font-size: 12px;} .iCase .h3{ font-size: 1.25em;} .iCase li:first-child .text{ font-size: 20px;} .iNews .h3, .iNews .p{ font-size: 18px;} } @media screen and (max-width:980px){ .iCase ul{ padding-left: 0px;} .iCase li:first-child{ position: relative; left: auto; width: 100%;} .iProHead .tit1_2{ position: static; width: auto; display: block; top: auto; left: auto; transform: none; margin-bottom: 1em;} .iProHead .p{ float: none;} .iPro .swiper{ margin: 0 -10px;} .iPro .pd{ margin: 0 10px;} .iPro .npd{ padding: 0px;} .iPro .img{ width: auto;} .iPro .text{ position: static; left: auto; top: auto; right: auto; bottom: auto; display: block; background: #f5f5f5; padding: 20px; } .tSearch .box{ font-size: 20px; } .tSearch .t{ font-size: 1.25em; margin-bottom: 1.5em;} .tSearch .c{ padding-left: 0px; box-shadow: none;} .tSearch .pd{ width: auto;} .tSearch form{ display: flex; flex-wrap: wrap;} .tSelect{display: flex; flex-wrap: wrap; position: relative; left: auto; top: auto; width: 100%;} .ipt_s1{ position: relative; left: auto; top: auto; display: block; width: 50%; box-sizing: border-box; margin-bottom: 10px;} .ipt_t1{ width: 100%; margin-bottom: 10px; padding: 0 1em;} .ipt_b1{ top: auto; bottom: auto; position: relative; margin: 0px; width: 100%;} } @media screen and (max-width:768px){ .ignoreList ul{ max-height: 70vh; overflow-y: auto;} .ignoreList li{ width: 50%;} } @media screen and (max-width:640px){ .pageNext{ top: auto; bottom: 130px; right:66px;} .iStrength{ font-size: 16px;} .iBanner .text{ font-size:4vw; top: 4em; bottom: auto;} .more1{ font-size: 12px;} .iBanner .swiperDots{ bottom: 90px;} .iBanner .swiperArrow{ bottom: 90px;} .iBanner .swiperPage{ bottom: 90px;} .tit1{ font-size: 20px;} .iNews .em{ margin-bottom: 10px;} .fTop{ padding: 50px 0px;} .fRight{ position: static;} .fNav{ margin: 0px; display: none;} .fNav li{ margin-right: 0px; width: 25%; text-align: center;} .footer{ position: relative;} .fCon{ position: absolute; top: 85px; left:0px; right: 0px;} .fContact{ width: auto; padding: 10px 0 0 0; margin-left: 140px;} .fContact .pd{ display: block;} .fContact dl{ display: flex; margin-right: 0px; width: 100%;} .fLogo{ left:140px; position: absolute;} .fLogo img{ height: 16px;} .fShare{ position: absolute; left: 140px; top: 98px; padding-top: 0px; } } @media screen and (max-width:480px){ body{ font-size: 12px;} .oh-footer .wp, .wp, .header .wp{ margin:0 6%;} .iBanner .swiperDots{ left: 6%;} .pageNext{ right: 6%; padding-right: 38px;} .iBanner .swiperPage{ right: 6%;} .iBanner .swiperArrow{ right: 6%;} .iBanner .swiperPrev{ right: 6%;} .iBanner .swiperNext{ right: 6%;} } @media screen and (max-width:413px){ } @media screen and (max-width:374px){ } /*鍐呴〉*/ .nBanner{} .nBanner .pd{ position: relative;} .nBanner .img{ overflow: hidden; } .nBanner .img img{ width: 100%; height: auto; display: block;} .nBanner .text{ position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 1.66666666666667vw;} .nBanner .wp{ display: flex;} .nBanner .npd{ text-align: center;} .nBanner .h3{ font-size: 1em; line-height: 1.2; margin-bottom: 0.1em;} .nBanner .em{ font-size: 1.1875em; line-height: 1.2; text-transform: uppercase;} .pNav{ border-bottom: 1px solid rgba(0,0,0,0.1);} .pNavTit{ position: absolute; left: 0px; top: 50%; line-height: 1; margin-top: -0.5em; font-size: 16px; } .pNavM{ position: absolute; right: 0px; top: 50%; line-height: 1; margin-top: -0.5em; font-size: 16px; } .pNavList{ padding-left: 100px;} .pNavList ul{ display: flex;} .pNavList li{ margin-right:50px;} .pNavList li a{ font-size: 16px; height: 64px; line-height: 64px; display: block; color: #3e3a39; position: relative;} .pNavList li a:before{ content: ''; position: absolute; opacity: 0; background:#e1251b; background-size: 100% 100%; left: 0px; right: 0px; bottom: -2px; height: 3px; transition: 0.3s all;} .pNavList li.active a{ color: #e1251b;} .pNavList li.active a:before{ opacity: 1;} .tit2{ font-size: 24px; display: flex; justify-content: center; position: relative; padding-bottom: 0.75em; margin-bottom: 60px;} .tit2:before{ content: ''; position: absolute; width: 40px; height: 3px; background: #e1251b; left: 0px; bottom: 0px; left: 50%; transform: translateX(-50%);} .tit2 em{ font-weight: bold; margin:0 0.25em; text-transform: uppercase;} .tit2 strong{ font-weight: bold; margin: 0 0.25em;} .proAPP{ background-color: #d9d9d9; background-image: linear-gradient(to top,#eaeaea,#fff);} .pMain{ padding: 100px 0; background: no-repeat center center; background-size: cover;} .proMain1{} .proMain1_1{} .proNavList{} .proNavList ul{ display: flex; flex-wrap: wrap; margin: 0 -18px;} .proNavList li{ width:33.3333%; margin-bottom: 56px;} /*.proNavList li:nth-child(n+4){ width: 25%;}*/ .proNavList .pd{ display: block; margin: 0 18px; background: #fff; position: relative; padding-bottom: 60px; transition: 0.3s all;} .proNavList .img{ } .proNavList .img img{ object-fit: contain;} .proNavList .text{ padding: 12px 38px 22px 38px; color: #3e3a39; transition: 0.3s all;} .proNavList .h3{ font-size: 18px; font-weight: bold; position: relative; line-height: 1.5em; height: 1.5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1;} .proNavList .em{ height: 1.5em; line-height: 1.5em; position: relative;} .proNavList .em:before{ content: ''; position: absolute; width: 40px; height: 3px; background: #e1251b; left: 0px; bottom: -10px; transition: 0.3s all;} .proNavList .m{ position: absolute; bottom: 25px; right: 38px; z-index: 2;} .proNavList .m .more3{ background: #ccc; border-color: #ccc;} .proNavList .pd:hover .m .more3{ background: #e1251b; border-color: #e1251b; color: #fff;} .proNavList .text{ background: #e1251b; color: #fff;} .proNavList .em:before{ background: #fff;} .proNavList .pd:hover{ transform: translateY(-5px); box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);} .more3{ width: 94px; height: 24px; line-height: 24px; font-size: 12px; border: 1px solid #e1251b; color: #e1251b; display: inline-block; vertical-align:bottom; text-align: center; transition: 0.3s all;} .more3 span{ display: inline-block; vertical-align: bottom;} .more3 i{ display: inline-block; vertical-align: bottom; transform: scale(0.8);} .more3:hover{ background: #e1251b; color: #fff;} .proMain2{ background: #f6f6f6; position: relative; z-index: 2;} .proHead{} .proHead{} .tit3{ font-size: 30px; display: flex; height: 100px; line-height: 100px;} .tit3 em{ font-weight: bold; margin-left: 0.25em;} .tit3 strong{ font-weight: bold; margin-left: 0.25em;} .proTj{ width: 220px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%);} .proTj .t{ height: 24px; line-height: 24px; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.5); cursor: pointer;} .proTj .t strong{ font-size: 1em;} .proTj .t i{ font-size: 1em; position: absolute; right: 0px; top: 50%; transform: translateY(-50%);} .proTj .c{ position: absolute; top: 100%; left: 0px; right: 0px; background: rgba(0,0,0,0.5); padding: 1em 0; display: none;} .proTj .c a{ display: block;color: #fff; text-align: center; line-height: 2;} .proTj .c a:hover{ background: #e1251b; color: #fff;} .proMain3{ background: #f6f6f6;} .proMain3 .wp{ width: auto; margin: 0px;} .pro{ position: relative; padding-bottom: 140px;} .proFl{ width: 280px; position: sticky; left: 0px; top: 71px; float: left;} .proNav{} .proNav ul{} .proNav li{ border-bottom: 1px solid rgba(0,0,0,0.1)} .proNav a{ display: block; height: 40px; line-height: 40px; padding:0 20px; font-size: 14px; position: relative; color: #231815; overflow: hidden;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1;} .proNav i{ width: 12px; height: 12px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);} .proNav i:after, .proNav i:before{content: ''; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 8px; height: 2px; background: #231815;} .proNav i:before{ transform: translateY(-50%) rotate(90deg);} .proNav li.curr a{ background: #e1251b; color: #fff;} .proNav li.curr i:after, .proNav li.curr i:before{ background: #fff;} .proFr{ margin-left: 280px; background: #fff; min-height: 600px; padding-bottom: 100px;} .proListA{} .proListA ul{ display: flex; flex-wrap: wrap;} .proListA li{ width: 25%;} .proListA .pd{ display: block; background: #fff; padding-bottom: 30px; position: relative;} .proListA .img{} .proListA .img img{aspect-ratio:780/540; width: 100%; height: auto; display: block ; object-fit: cover;} .proListA .text{ text-align: center; padding: 5px 0 0 0; position: relative; z-index: 2;} .proListA .h3{ color: #3e3a39; font-size: 12px; line-height: 1.2; margin-bottom: 0.2em;} .proListA .em{ color: #828283; font-size: 14px; line-height: 1.2;} .proListA .m{position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.6); opacity: 0; transition: 0.3s all; overflow: hidden; display: flex; justify-content: center; align-items: center;text-align: center; color: #fff;} .proListA .m em{ width: 80px; height: 54px; display: block; margin: 0 auto; position: relative;display: flex; justify-content: center; align-items: center;} .proListA .m em:after, .proListA .m em:before{ content: ''; position: absolute; height: 1px; background: rgba(255,255,255,0.5); width: 600px; } .proListA .m em:after{ left: 100%;} .proListA .m em:before{ right: 100%;} .proListA .m i{ font-size: 36px; line-height: 1; } .proListA .m strong{ display: block;} .proListA .pd:hover .m{ opacity: 1;} .tit4{ padding: 60px 0 100px 0;} .tit4 .pd{ position: relative;} .tit4 em{ font-size: 68px; color: #e1251b; line-height: 1;} .tit4 strong{ font-size: 30px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); line-height: 1;} .tit4 strong:before{ content: ''; width: 40px; height: 3px; background: #e1251b; position: absolute; right: 0px; bottom: -0.5em;} .proMain4{ background: #fff; padding-bottom: 100px;} .proMain4_1{ margin-bottom: 100px;} .proInfoHead{} .proInfoHead .pd{ display: block; position: relative; padding-top: 30px;} .proInfoHead .img{ width: 50%; float: right;} .proInfoHead .img img{ aspect-ratio:1018/614; object-fit: contain; mix-blend-mode: multiply;} .proInfoHead .img .npd{ background-color: #d9d9d9; background-image: linear-gradient(to top,#d9d9d9,#fff); width: 50vw; position: relative;} .proInfoHead .textA{ position: absolute; left: 0; top: 0px; z-index: 3;} .proInfoHead .textA .h3{ font-size: 38px; line-height: 1.2; margin-bottom: 0.4em;} .proInfoHead .textA .h3 strong{ color: #e1251b;} .proInfoHead .textA .h3 span{ margin: 0 0.5em;} .proInfoHead .textA .h3 em{ color: #3e3a39;} .proInfoHead .textA .em{ font-size: 28px; line-height: 1.2; color: #828283;} .proInfoHead .text{ padding-top: 100px; width: 50%;} .proInfoHead .text .tit2{ margin-bottom: 20px;} .features{ font-size: 18px;} .features ul{} .features li{ padding: 0.8em 0;} .features .npd{ line-height: 1.2; position: relative; padding-left: 1em; color: #3e3a39;} .features .npd:before{ content: ""; position:absolute; left: 0px; top:0.35em; background: #e1251b; width: 0.4em; height: 0.4em;aspect-ratio:1/1; border-radius: 50%; transform: rotate(90deg) translateZ(0);} .proMain4_2{ position: relative;} .proMain4_2 .tit2{ margin-bottom: 0px;} .proSize{ display: flex;} .proSize .img{ width: 50%;} .proSize .img img{ width: 100%; height: auto; display: block; aspect-ratio:757/460; object-fit: contain; mix-blend-mode: multiply;} .proSize .text{ width: 30%; margin-left: 14%; display: flex; justify-content: center;} .proSize .text img{ width:100%; height: auto; display: block; aspect-ratio:757/460; object-fit: contain; mix-blend-mode: multiply;} .proMain5{ background-image: linear-gradient(to bottom,#eaeaea,#fff);} .proMain5_1{} .parameter{} .proInfoListA{ font-size: 18px; display: flex; margin-right: -2em;} .proInfoListA ul{ width: 50%; padding-right: 2em; box-sizing: border-box;} .proInfoListA li{ margin-bottom: 1.5em;} .proInfoListA .pd{ display: block; position: relative;} .proInfoListA .h3{ line-height: 1; position: absolute; left: 1em; top: 50%; transform: translateY(-50%); color: #3e3a39; padding: 0 0 0 1em; width: 9em; } .proInfoListA .h3:before{ content: ""; position:absolute; left: 0px; top:0.3em; background:url("../images/icon-xinghao.svg") no-repeat; background-size: 100% 100%; width: 0.4em; height: 0.4em;aspect-ratio:1/1; border-radius: 50%;} .proInfoListA .em{ background:rgba(255,255,255,0.5); color: #3e3a39; padding: 0.5em 1em; margin-left: 11em; min-height: 1.5em; line-height: 1.5em;} .proMain6{ background:#fff; padding-bottom: 100px;} .proMain6_1{ margin-bottom: 40px;} .imgBoxA{ margin-bottom: 30px;} .imgBoxA img{ width: 100%; height: auto; display: block;} .imgBoxA_p{ color: #e70012; font-size: 18px; line-height: 1.2} .proMain6_2{} .tit5{ text-align: center; color: #3e3a39; font-size: 32px; line-height: 1.25em; margin-bottom: 1.25em;} .tit5 strong{ color: #3e3a39; font-weight: normal; margin-right: 0.5em; display: inline-block; vertical-align: bottom;} .tit5 em{ display: inline-block; vertical-align: bottom;} .tit5 span{ background: #cecece; display: inline-block; vertical-align: bottom;} .tableA{ color: #3e3a39; overflow-x: auto; width: 100%; padding-bottom: 10px; font-size: 18px; line-height: 1.25;} .tableA table{ border: 1px solid #cecece; border-collapse: collapse; min-width: 100%;} .tableA td{ border: 1px solid #cecece; padding: 0.5em 1em; min-width: 4em; background: #fff;} .tableA tr:first-child td{ background: #e5e5e5;} .proDown{ width: 60px; background: #fff; position: absolute; left: 100%; margin-left: 80px; top:36px; padding-top: 60px;} .proDownTit{ width: 120px; height: 60px; position: absolute; right: 0px; top:0px; background: #e70012; color: #fff; display: flex; align-items: center; line-height: 1;} .proDownTit i{ width: 54px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); font-size: 27px; text-align: center;} .proDownTit .h3{ margin-left: 54px;} .proDownTit .h3 strong{ font-weight: normal; font-size: 14px; display: block; margin-bottom: 0.2em;} .proDownTit .h3 em{ font-size: 12px; display: block;} .proDownCon{} .proDownCon li{ border-bottom: 1px solid #828283;} .proDownCon li:last-child{ border-bottom: none;} .proDownCon .pd{ position: relative;} .proDownCon .t{ height: 60px; line-height: 60px; font-size: 24px; color: #e1251b; text-align: center; display: block;} .proDownCon .c{ position: absolute; right: 100%; top: 0px; width: 120px; padding-right: 10px; display: none;} .proDownCon .c .npd{ padding: 10px; background: #fff; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1);} .proDownCon .c canvas{ width: 100%; height: auto; display: block;} .proDownCon .copy{ position: absolute; left: 0px; bottom: 0px;} .proDownCon li:hover .c{ display: block;} #copy-text{ opacity: 0; width: 1px; height: 1px; overflow: hidden;} .caseAPP{ background: #f6f6f6;} .caseMain1{ background: url("../images/caseMain1.jpg") no-repeat; background-size: cover; } .caseMain1_1{} .caseListA{} .caseListA .swiper{ margin: 0 -10px;} .caseListA .pd{ display: block; position: relative; margin: 0 10px;} .caseListA .img{} .caseListA .text{ position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; background:rgba(129,129,129,0.45); transition: 0.3s all; color: #fff;} .caseListA .npd{ height: 100%; box-sizing: border-box; padding: 50px 0 70px 0; display: flex; text-align: center;justify-content: space-between; flex-direction: column; transition: 0.3s all;} .caseListA .i{ width: 36px; margin: 0 auto; transition: 0.3s all;filter: brightness(0) invert(1);} .caseListA .i img{ width: 100%; height: auto; display: block;} .caseListA .h3{ font-size: 14px; line-height: 1.2; position: relative; padding-bottom: 1em;} .caseListA .h3:before{ content: ''; position: absolute; left: 50%; width: 1em; margin-left: -0.5em; height: 2px; bottom: 0px; background: #fff;} .caseListA .h3 strong{ display: block; margin-bottom: 0.2em;} .caseListA .h3 em{ display: block;} .caseListA .p{ padding: 30px 30px 0 30px; height: 4.5em;} .caseListA .m{ display: none; position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%);} .caseListA .pd:hover .text{ background:rgba(255,255,255,1); display: flex; justify-content: center; align-items: center;} .caseListA .pd:hover .npd{ display: block; height: auto; padding-bottom: 70px;} .caseListA .pd:hover .i{ filter:none; margin-bottom: 20px;} .caseListA .pd:hover .h3{ color: #3e3a39;} .caseListA .pd:hover .h3 strong{ color: #3e3a39;} .caseListA .pd:hover .h3:before{ background: #e1251b;} .caseListA .pd:hover .m{ display: block;} .caseListA .pd:hover .p{ color: #595757;} .caseListA .swiperArrow{ display: block; margin: 0px; top: -96px;} .caseListA .swiperPrev{ left: auto; right: 0px; margin-right: 3em;} .caseListA .swiperNext{ right: 0px;} .caseListA_2 .pd:hover .h3 strong{ color: #e1251b;} .caseListA_2 .swiperArrow{ display: none;} .caseMain2{} .caseMain2_1{} .formA{} .formA ul{ display: flex; flex-wrap: wrap; margin: 0 -20px;} .formA li{ width: 50%; margin-bottom: 20px;} .formA li.w100{ width: 100%;} .formA .pd{ margin: 0 20px;} .ipt_t2{ width: 100%; border: 1px solid #221714; background: #f6f6f6; height: 46px; box-sizing: border-box; padding: 0 1.5em; display: block; font-size: 14px;} .ipt_text2{ width: 100%; border: 1px solid #221714; background: #f6f6f6; height: 118px; box-sizing: border-box; padding: 0.5em 1.5em; display: block; font-size: 14px;} .ipt_b2{ width:156px; margin: 0 auto; border:none; background: #e1251b; color: #fff; height: 40px; box-sizing: border-box; padding: 0; border-radius: 4px; display: block; font-size: 14px;} .tMain{ padding: 80px 0 50px 0;} .tMain .tit2{ margin-bottom: 0px; } .caseMain3{ overflow: hidden;} .caseMain3_1{} .caseInfoA{} .caseInfoA .pd{ position: relative;} .caseInfoA .img{ display: none;} .caseInfoA .img img{ width: 120vw; height: auto; position: relative; left: 50%; transform: translateX(-50%);} .caseInfoA .text{ float: right; background: #fff; width: 50%;} .caseInfoA .wpd{ padding: 32px 50px;} .caseInfoA .h3{ font-size: 24px; position: relative; line-height:1; padding-bottom: 0.75em; margin-bottom: 0.75em;} .caseInfoA .h3:before{ content: ''; position: absolute; width: 1.5em; height: 3px; background: #e1251b; bottom: 0px; left: 0px;} .caseInfoA .h3 strong{ font-weight: bold; margin-right: 0.5em;} .caseInfoA .h3 em{ font-weight: bold; text-transform: uppercase;} .caseInfoA .em{ font-size: 14px; line-height: 1.4; color: #808080; padding: 2em 0 0.5em 0;} .caseInfoA .p{ font-size: 14px; line-height: 1.4; color: #808080; min-height:15.5em; } .caseInfoA .p p{ margin-bottom: 0.75em;} .caseInfoA .p p:last-child{ margin-bottom: 0em;} .caseListB{ padding-top: 30px;} .caseListB ul{ display: flex; margin: 0 -8%;} .caseListB li{ width: 25%;} .caseListB .npd{ display: block; text-align: center; color: #3e3a39; position: relative;} .caseListB .npd:before{ content: ''; position: absolute; width: 1px; height: 36px; background: rgba(0,0,0,0.2); right: 0px; top: 50%; transform: translateY(-50%);} .caseListB i{ display: block; font-size: 36px; line-height: 1; margin-bottom: 0.3em;} .caseListB img{ width: 36px; display: block; height: auto; margin: 0 auto 12px auto;} .caseListB strong{ display: block; line-height:1;} .caseListB li:last-child .npd:before{ display: none;} .caseMain4{ overflow: hidden; background: #fff;} .tit2_3{justify-content: flex-start;} .tit2_3:before{ left: 0px; transform: translateY(0);} .tit2_3 strong{ color: #e1251b; } .tit2_3 em{} .caseListC{} .caseListC .swiper{ margin:0 -17% 0 0;} .caseListC .swiper-slide{ padding-bottom: 72px;} .caseListC .pd{ display: block; position: relative;} .caseListC .img{ width: 50%; background: #f5f5f5;} .caseListC .img img{ transition: 1s all; height: auto; aspect-ratio:1116/640; object-fit: cover; } .caseListC .text{ position: absolute; left: 50%; top: 0px; right: 0px; bottom: 0px; display: flex; align-items: center;} .caseListC .npd{ padding:10px 10%;} .caseListC .h3{ color: #000; transition: 0.3s all; font-size: 24px; line-height: 1; position: relative; margin-bottom: 40px;} .caseListC .h3:before{ background: rgba(35,24,21,0.43); transition: 0.3s all; content: ''; position: absolute; left: 0px; bottom: -19px; right: 0px; height: 2px;} .caseListC .h3 strong{ font-weight:bold; display: block; height: 1.3em; line-height: 1.3; overflow: hidden; margin-bottom: 0.25em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1;} .caseListC .h3 em{ font-weight: normal; display: block; height: 1.3em; line-height: 1.3; overflow: hidden; margin-bottom: 0.25em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1;} .caseListC .em{ color: #828283; line-height: 1; margin-bottom: 1.25em; font-size: 16px;} .caseListC .p{ color: rgba(35,24,21,0.43); transition: 0.3s all; font-size: 20px; margin-bottom: 1em; line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;} .caseListC .swiperArrow{ display: block; top: auto; bottom: 0px; margin: 0px;} .caseListC .swiperPrev{ left: auto; right: 10%; margin-right: 3em;} .caseListC .swiperNext{ right: 10%;} .caseListC .swiperArrow:hover{ border-color: #e1251b; background: #e1251b; color: #fff;} .caseListC .h3{ color:#e1251b;} .caseListC .h3:before{ background: rgba(35,24,21,1);} .caseListC .h3 em{ color: #3e3a39;} .caseListC .p{ color: rgba(35,24,21,1);} .caseListC .more2{ background: #e1251b; color: #fff;} .caseListC .pd:hover{ background: #e1251b;} .caseListC .pd:hover .h3{ color:#fff;} .caseListC .pd:hover .h3:before{ background: rgba(255,255,255,1);} .caseListC .pd:hover .h3 em{ color: #fff;} .caseListC .pd:hover .em{ color: #fff;} .caseListC .pd:hover .p{ color: rgba(255,255,255,1);} .caseListC .pd:hover .more2{ background: #fff; color: #e1251b;} .caseListC .pd:hover .img img{transform: scale(1.05,1.05);} .caseListC .swiperArrow{ display: block; margin: 0px; top: -96px;} .caseListC .swiperPrev{ left: auto; right: 0px; margin-right: 3em;} .caseListC .swiperNext{ right: 0px;} .caseListC_2 .swiper-slide{ padding-bottom: 0px;} .serviceAPP{} .serviceMain1{} .serviceMain1_1{ margin-bottom: 30px;} .serviceMap{} .serviceMap img{ width: 100%; height: auto; display: block;} .serviceMain1_2{} .service{} .service .pd{ display: block; position: relative; overflow: hidden;} .service .img{ width: 320px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%);} .serviceListA{} .serviceListA ul{ display: flex; flex-wrap: wrap;} .serviceListA li{ width: 50%; border-bottom: 1px dashed rgba(0,0,0,0.2);} .serviceListA .npd{ display: block; padding: 30px;} .serviceListA .t{ color: #e1251b; line-height: 1; font-size: 40px; margin-bottom: 0.2em;} .serviceListA .nnpd{ position: relative; display: inline-block;} .serviceListA .t strong{ font-size: 1em; font-weight: normal;} .serviceListA .t em{ font-size: 1em;} .serviceListA .t i{ position: absolute; left: 100%; top: 0px; font-size: 0.5em;} .serviceListA .c{ font-size: 14px; color: #808080;} .service .text{ width: 50%;} .service .em{ font-size: 17px; line-height: 1.2; color: #e1251b; margin-bottom: 0.5em;} .service .h3{ font-size: 32px; line-height: 1.2; color: #3e3a39; margin-bottom: 0.5em;} .service .p{ font-size: 16px; line-height: 2; color: #808080; margin-bottom: 2em;} .service .p br{ display: none;} .service .m{ margin-bottom: 30px;} .service .h4{position: relative; font-size: 16px; padding-left: 2em; margin-bottom: 1em;} .service .h4 img{ display: block; width: 100%; height: 100%;} .service .h4 i{ font-size:12px; height: 2em; width: 2em; text-align: center; line-height: 2em;position: absolute; left: 0px; top: 50%; margin-top: -1em;} .service .h5{ font-size: 16px; line-height: 2; color: #808080;} .serviceMain2{} .serviceMain2_1{} .serviceListBtit{ font-size:18px; line-height: 1.2; margin-bottom: 2.5em; text-align: center;} .serviceListB{ position: relative;} .serviceListB:before{ content: ''; position: absolute; left: 0px; top: 0px; right: 0px; height: 1px; background: #808080;} .serviceListB ul{ display: flex; } .serviceListB li{ width: 14.28571428571429%;} .serviceListB .pd{ display: block; position: relative; padding-top: 14px; cursor: pointer;} .serviceListB i{ position: absolute; width: 12px; height: 12px; background: #808080; border-radius: 50%; left: 50%; top: 0px; transform: translate(-50%,-50%);} .serviceListB i:before{ content: ''; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff;} .serviceListB strong{ display: block; text-align: center; font-weight: normal;} .serviceListB .pd:hover i{ background: #e1251b;} .serviceListB .pd:hover strong{ color: #e1251b;} .serviceMain3_1{} .caseInfoA_2 .wpd{ padding: 60px 50px;} .caseInfoA_2 .text{ width: 44.5%;} .ideaListA{ padding-top: 60px;} .serviceMain4{} .serviceMain4_1{} .downListA{} .downListA ul{ display: flex; flex-wrap: wrap; margin: 0 -30px;} .downListA li{ width: 33.3333%; padding: 25px 0;} .downListA .pd{ display: block; position: relative; padding-left: 110px; margin:0 30px; overflow: hidden; transition: 0.3s all;} .downListA .img{ width: 110px; height: 50px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);} .downListA .img:before{ content: ''; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 1px; height: 50px; background: #221714;} .downListA .img img{ height: 40px; width: 40px;} .downListA .text{ padding: 20px 36px;} .downListA .i{ right: -10px; bottom: -10px;transform:rotate(45deg);position: absolute;width: 20px; height: 20px; background: #e1251b; opacity: 0; transition: 0.3s all;} .downListA .h3{ font-size: 16px; color: #3e3a39; line-height: 1.5em;} .downListA .em{ font-size: 12px; color: #808080; line-height: 1.5em;} .downListA .pd:hover{ background: #eaeaea;} .downListA .pd:hover .i{ opacity: 1;} .downListB{} .downListB ul{ display: flex; margin: 0 -40px; flex-wrap: wrap;} .downListB li{ width: 25%; padding: 25px 0;} .downListB .pd{ display: block; margin: 0 40px;} .downListB .img{ display: block;} .downListB .text{ display: block; padding-top: 20px;} .downListB .h3{ font-size: 18px; text-align: center; line-height: 1.5; height: 1.5em;overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1;} .dingwei{position: relative;} .dingwei a{ position: absolute; bottom: 100px;} .dingwei_1 a{bottom: 100px;} .aboutAPP{ background: #f6f6f6;} .aboutMain1{ padding-bottom: 0px !important;} .aboutMain1_1{ margin-bottom: 100px;} .videoB{ background: #c5c5c5;} .videoB video{ width: 100%; height: auto; display: block; aspect-ratio:1920/1080; object-fit: contain;} .aboutMain1_2{ background: #eaeaea; position: relative; padding: 100px 0;} .aboutMain1_2:before{ content: ''; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 100vw; margin-left: -50vw; background: #eaeaea;} .aboutA{ position: relative; z-index: 2; font-size: 1.6666666666666666vw;} .aboutAFl{ width: 50%; float: left; padding-top:3em;} .aboutAFl .i{ font-size: 1em; margin-bottom: 2em; position: absolute; left: 0px; top: 0px;} .aboutAFl .i img{ width:auto; height: 1.125em; display: block;} .aboutAFl .h3{ font-size: 1em; line-height: 1; margin-bottom: 2em;} .aboutAFl .p{ line-height: 2; color: #3e3a39; font-size: 0.5em;} .aboutAFl .p p{ margin-bottom: 1em;} .aboutAFl .p p:last-child{ margin-bottom: 0em;} .aboutAFl .text{} .aboutAFr{ width: 40%; float: right; padding-top:3em;} .iStrengthB{ font-size: 1.66666666666667vw;} .iStrengthB ul{ display: flex; flex-wrap: wrap;} .iStrengthB li{ width: 50%; position: relative; margin-bottom: 100px;} .iStrengthB .t{ font-size:1em; line-height: 1; color: #e1251b;} .iStrengthB .t strong{ display: inline-block; vertical-align: bottom; position: relative;} .iStrengthB .t i{ font-size: 0.375em; position: absolute; left: 100%; bottom: 70%;} .iStrengthB .c{ font-size: 0.625em;} .iStrengthB_2{ } .iStrengthB_2 ul{} .iStrengthB_2 li{ width: 33.3333%; margin-bottom: 0px;} .aboutMain1_3{} .subsidiary{} .subsidiary dl{} .subsidiary dd{ padding: 100px 0; position: relative;} .subsidiary .pd{ display: block; position: relative; z-index: 2; font-size: 1.6666666666666666vw;} .subsidiary .img{ width: 54%; float: left;} .subsidiary .text{ padding-left: 8%; position: absolute; left: 54%; top:0px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between;} .subsidiary .h3{ font-size: 1.125em; color: #e1251b; margin-bottom: 0.4em; line-height: 1.2; min-height: 1.2em;} .subsidiary .em{ font-size: 0.75em; color: #4d4d4d; margin-bottom: 1em; line-height: 1.2; min-height: 1.2em;} .subsidiary .p{ font-size: 0.5em; line-height: 2; min-height: 8em; color: #3e3a39;} .subsidiary dd:nth-child(even) .img{ float: right;} .subsidiary dd:nth-child(even) .text{ padding: 0 8% 0 0 ; left: auto; right: 54%;} .subsidiary dd:nth-child(even):before{ content: ''; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 100vw; margin-left: -50vw; background: #eaeaea;} .aboutMain1_4{ position: relative;} .aboutMain1_4:before{ content: ''; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 100vw; margin-left: -50vw; background: #eaeaea;} .aboutListD{ position: relative; z-index: 2; width: 80%; margin: 0 auto; font-size: 1.6666666666666666vw;} .aboutListD ul{ display: flex; margin: 0 -0.5em;} .aboutListD li{ width: 25%;} .aboutListD .pd{ display: block; margin: 0 0.5em; padding: 60px 0;} .aboutListD .i{ width: 2.625em; margin: 0 auto 0.5em auto;} .aboutListD .i img{ width: 100%; height: auto; display: block;} .aboutListD .text{ text-align: center; font-size:0.875em; line-height: 1.2;} .aboutMain2{} .aboutMain2_1{} .aboutMain3{ background: #fff;} .aboutMain3_1{} .aboutListB{} .aboutMain4{} .aboutMain4_1{} .contact{ position: relative; padding-left: 28%;} .contactTit{ position: absolute; left: 0px; top: 0px; } .contactTit .i{ margin-bottom: 4px;} .contactTit .i img{ height: 21px; width: auto;} .contactTit .i img.img1{ display: block;} .contactTit .i img.img2{ display: none;} .contactTit .h3{ font-size: 18px; line-height: 1.2;} .contactCon{ display: flex;justify-content: space-between;} .contactCon dl{ position: relative; padding-left: 70px;} .contactCon dt{ color: #e1251b; width: 1em; height: 1em; position: absolute; left: 0px; top: 0; line-height: 1; font-size: 48px;} .contactCon dd{} .contactCon .h3{ font-size: 22px; color: #e1251b; line-height: 1.2; margin-bottom: 0.2em; } .contactCon .em{ font-size: 18px; color: #3e3a39; line-height: 1.2; min-height: 3.6em;} .aboutMain5{} .aboutMain5_1{} .newsListA{} .newsListA ul{ display: flex; flex-wrap: wrap; margin: 0 -30px;} .newsListA li{ margin-bottom: 40px; width: 33.3333%;} .newsListA .pd{ display: block; position: relative; background: #fff; margin: 0 30px; transition: 0.3s all; border-radius: 5px;} .newsListA .img{ } .newsListA .img img{aspect-ratio:650/456; object-fit: cover;} .newsListA .text{ padding: 30px;} .newsListA .h3{font-size: 18px; line-height: 1.5; height: 1.5em; margin-bottom: 0.5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; font-weight: bold;} .newsListA .em{ font-size: 14px; color: #808080; overflow: hidden; line-height: 1.2; margin-bottom: 0.5em;} .newsListA .em strong{ float: left; font-weight: normal;} .newsListA .em em{ float: right;} .newsListA .em i{ margin-right: 0.25em;} .newsListA .p{ color: #808080; line-height: 1.5; height:3em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;} .newsListA .pd:hover{ transform: translateY(-5px); box-shadow: 0 0 10px rgba(0,0,0,0.1);} .infoA{ font-size: 16px; position: relative; width: 1200px; margin: 0 auto;} .infoA_Fl{ width: 740px; box-sizing: border-box;} .infoA_Fr{; box-sizing: border-box; position: absolute; right: 0px; top: 0px; left: 780px;} .infoAbox{ padding: 20px; background: #fff; margin-bottom: 30px; box-shadow: 0 0 10px rgba(0,0,0,0.05); border-radius: 10px;} .infoAtit{ text-align: center; margin-bottom: 36px; } .infoAtit h1{ font-size: 1.5em; line-height: 1.2; font-weight: bold;} .infoAtit p{ padding-top: 1em; color: #666;} .infoAcon{ color: #666; line-height: 1.75;} .infoAcon img{ max-width: 100%; display: inline-block; vertical-align: baseline;} .infoAcon video{ max-width: 100%; display: inline-block; vertical-align: baseline;} .infoAcon strong{ } .infoAbtn{ position: relative;} .infoAbtnList{} .infoAbtnList ul{ margin-right: -120px;} .infoAbtnList li{ width: 50%; float: left;} .infoAbtnList .pd{ display: block; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.05); border-radius: 6px; position: relative; padding: 0 20px; margin-right:120px; box-shadow: 0 0 10px rgba(0,0,0,0.05);} .infoAbtnList .pd span{ position: absolute; left: 20px; top: 50%; line-height: 1; margin-top: -0.5em; color: #e1251b; font-weight: bold;} .infoAbtnList .pd a{ color: #666; display: block; padding-left: 3.75em; height: 48px; line-height: 48px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .infoAbtnList .pd:hover{ background: #e1251b; color: #fff;} .infoAbtnList .pd:hover i, .infoAbtnList .pd:hover span, .infoAbtnList .pd:hover a{ color: #fff;} .infoAbtnList li:nth-child(even) .pd i{ right: 20px; left: auto;} .infoAbtnM{ position: absolute; left: 50%; top: 0px; width: 100px; text-align: center; margin-left: -50px;} .infoAbtnM a{ color: #e1251b; font-weight: bold; display: block; height: 48px; line-height: 48px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.05); border-radius: 6px;} .infoAbtnM a:hover{ background: #e1251b; color: #fff;} .recommended{background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.05); border-radius: 6px; padding:20px 5px;} .recommendedTit{font-size:24px;margin-bottom:1em;margin-left:20px;} .recommendedTit strong{font-weight:bold;display:block;color:#000;line-height:1;} .recommendedList{max-height:500px;overflow-y:auto;padding:10px;} .recommendedList li{margin-bottom:20px;} .recommendedList li:last-child{margin-bottom:0px;} .recommendedList .pd{ display: block;padding-left:1.5em;position:relative;} .recommendedList .pd:before{content:'';position:absolute;width:1em;height:5px;left:0px;top:0.5em;background:#e1251b;} .recommendedList strong{ display: block;display:block;line-height:1.4em; height: 1.5em; font-size:16px;color:#000;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; margin-right: 100px; font-weight: normal;} .recommendedList em{ position: absolute; right: 0; top: 50%; margin-top: -0.5em; line-height: 1; color: #999;} .recommendedList .pd:hover{color:#e1251b;} .tit2_p{ font-size: 18px; line-height: 1.5; width: 41em; text-align: center; margin: 0 auto 60px auto; color: #808080;} .tit2_p2{ font-size: 18px; line-height: 1.5; margin: 0 auto 60px auto; color: #3e3a39;} .historyListA{ position: relative; margin-left:30%; padding: 60px 0;} .historyListA:before{content: ''; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 1px; background: #808080;} .historyListA ul{} .historyListA li{ margin-bottom: 60px;} .historyListA li:last-child{ margin-bottom: 0px;} .historyListA .pd{ display: block; position: relative; padding:16px 0 16px 64px; } .historyListA .i{ width: 16px; height: 16px; box-sizing: border-box; border:2px solid #808080; border-radius: 50%; position: absolute; left: 0px; top: 30px; z-index: 2; background: #fff; transform: translateX(-50%);} .historyListA .i:before{ content:''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; width: 7px; height: 7px; background: #808080;} .historyListA .em{ line-height: 1; position: absolute; left: 0px; top: 8px; color: #000; transform: translateX(-110px);} .historyListA .em em{ font-size: 32px; display: block; margin-bottom: 0.2em;} .historyListA .em strong{ font-size: 18px; display: block;} .historyListA .h3{ font-size: 18px; line-height: 2; color: #848484;} .historyUp{ width: 36px; height: 36px; font-size: 36px; line-height: 1; position: absolute; left: 0px; top: 0px; transform: translateX(-50%) rotate(90deg); background: #fff; border-radius: 50%; z-index: 2;} .historyDown{ width: 36px; height: 36px; font-size: 36px; line-height: 1; position: absolute; left: 0px; bottom: 0px; transform: translateX(-50%) rotate(90deg); background: #fff; border-radius: 50%; z-index: 2;} .historyListA .pd:hover .em{ color: #e1251b;} .historyListA .pd:hover .h3{ color: #e1251b;} .historyListA .pd:hover .i{ border-color: #e1251b;} .historyListA .pd:hover .i:before{ background: #e1251b;} .aboutMain8{ background:#f6f6f6; overflow: hidden;} .aboutMain8_1{ position: relative; padding-bottom:1.25em;font-size: 1.6666666666666666vw;} .aboutMain8_1:before{ content: ''; position: absolute; left: 50%; bottom: -8.125em; width: 100vw; transform: translate(-50%,-1.4375em); background: url("../images/honor_bg.png") repeat-x bottom center; background-size: auto 12.5em; height: 12.5em; z-index: 2; } .honorListA{ position: relative; z-index: 3; padding-bottom: 3.125em;} .honorListA .swiper{ margin: 0 -1em;} .honorListA .pd{ display: block; margin: 0 1em; background: url("../images/honor_bg1.jpg") no-repeat; background-size: 100% 100%; aspect-ratio:524/720; padding: 7%;} .honorListA .swiperArrow{ display: block; top: auto; bottom: 0px; margin: 0px;} .honorListA .swiperPrev{ left: auto; right: 0%; margin-right: 3em;} .honorListA .swiperNext{ right: 0%;} .honorListA .swiperArrow:hover{ border-color: #e1251b; background: #e1251b; color: #fff;} .proMain4_1{ font-size: 1.6666666666666666vw;} .tit4{ padding: 1.875em 0 3.125em 0;} .tit4 em{ font-size: 1.5em;} .tit4 strong{ font-size: 0.625em;} .proInfoHead .pd{ padding: 3em 0 0 0;} .proInfoHead .textA .h3{ font-size: 1em;} .proInfoHead .textA .em{ font-size: 0.625em;} .proInfoHead .text{ padding-top:0em;} .features{ font-size: 0.5625em;} .caseListC .text{ font-size: 1.6666666666666666vw;} .caseListC .h3{ font-size:18px; margin-bottom: 1.6666666666666667em;} .caseListC .em{ font-size: 16px;} .caseListC .p{ font-size:14px; margin-bottom: 0.5em;} .ztit4{ padding: 60px 0 100px 0;} .ztit4 .pd{ position: relative;} .ztit4 em{ font-size: 68px; color: #e1251b; line-height: 1;} .ztit4 strong{ font-size: 30px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); line-height: 1;} .ztit4 strong:before{ content: ''; width: 40px; height: 3px; background: #e1251b; position: absolute; right: 0px; bottom: -0.5em;} .proMain7{ font-size: 1.6666666666666666vw;} .proMain7_1{ margin-bottom: 100px;} .zproInfoHead{} .zproInfoHead .pd{ display: block; position: relative;} .zproInfoHead .img{ width: 50%; float: right;} .zproInfoHead .img img{ aspect-ratio:1018/614; object-fit: contain; mix-blend-mode: multiply;} .zproInfoHead .npd{ background-color: #d9d9d9; background-image: linear-gradient(to top,#d9d9d9,#fff); /* width: 50vw; */ position: relative;} .zproInfoHead .text{ margin-right: 50%;} .zproInfoHead .h3{ font-size: 38px; line-height: 1.2; color: #e1251b; margin-bottom: 0.1em; position: absolute; bottom: 100%; left: 0px; right: 0px;} .zproInfoHead .em{ font-size: 28px; line-height: 1.2; color: #828283;} .zproInfoHead .nimg{ position: absolute; left: 0px; bottom: 0px; width: 50%;} .zproInfoHead .nimg img{ width: 100%; height: auto; /* aspect-ratio:1572/880; */ aspect-ratio:1018/614; object-fit: contain;} .proMain7_2{ margin-bottom: 100px;} .zfeatures{ font-size: 18px;} .zfeatures ul{ display: flex; flex-wrap: wrap;} .zfeatures li{ width: 50%; padding: 1em 0; border-bottom: 1px solid rgba(0,0,0,0.1);} .zfeatures .pd{ line-height: 1; position: relative; padding-left: 1em;} .zfeatures .pd:before{ content: ""; position:absolute; left: 0px; top:0.3em; background: #e1251b; width: 0.4em; height: 0.4em;aspect-ratio:1/1; border-radius: 50%;} .proMain7_3{ margin-bottom: 100px;} .zparameter{} .zproInfoListA{ font-size: 18px;} .zproInfoListA ul{ display: flex; flex-wrap: wrap; margin: 0 -46px;} .zproInfoListA li{ width: 50%; margin-bottom: 1.5em;} .zproInfoListA .pd{ margin: 0 46px;} .zproInfoListA .h3{ line-height: 1; position: relative; color: #3e3a39; padding: 0 0 0 1em; margin-bottom: 1em; font-weight: bold;} .zproInfoListA .h3:before{ content: ""; position:absolute; left: 0px; top:0.3em; background: #e1251b; width: 0.4em; height: 0.4em;aspect-ratio:1/1; border-radius: 50%;} .zproInfoListA .em{ background: #fff; color: #3e3a39; padding: 0.5em 1em; min-height: 1.6em;} .proMain7_4{ padding-bottom: 160px; position: relative;} .zmaterial{} .proMain7_4 .wpd{ position: relative;} /*閫傞厤*/ .ztit4{ padding: 1.875em 0;} .ztit4 em{ font-size: 1.5em; text-transform: uppercase;} .ztit4 strong{ font-size: 0.9375em;} .ztit4 strong:before{ content: ''; width: 1.333333333333333em; height: 3px; } .proMain7_1{ margin-bottom: 3.125em;} .zproInfoHead .h3{ font-size: 1.1875em;} .zproInfoHead .em{ font-size: 0.875em;} .proMain7_2{ margin-bottom: 3.125em;} .zfeatures{ font-size: 0.5625em;} .proMain7_3{ margin-bottom: 3.125em;} .zproInfoListA{ font-size: 0.5625em;} .zproInfoListA ul{ margin: 0 -1.4375em;} .zproInfoListA .pd{ margin: 0 1.4375em;} .proMain7_4{ padding-bottom: 5em;} @media screen and (max-width:1680px){ .subsidiary .p{ font-size: 14px;} .aboutAFl .p{ font-size: 14px;} .zfeatures{ font-size: 16px;} .zproInfoListA{ font-size: 16px;} .ztit4 strong{ font-size: 16px;} } @media screen and (max-width:1440px){ .proNavList ul{ margin: 0 -13px;} .proNavList li{ margin-bottom: 30px;} .proNavList .pd{ margin: 0 13px;} .proNavList .em{ font-size: 14px;} .proNavList .text{ padding: 20px 25px;} .proInfoListA{ font-size: 16px;} .tit5{ font-size: 24px;} .imgBoxA_p{ font-size: 16px;} .tableA{ font-size: 16px;} .caseInfoA .text{ width: 60%;} .downListA ul{ margin: 0 -15px;} .downListA li{ padding: 20px 0;} .downListA .pd{ margin: 0 15px; padding-left: 80px;} .downListA .img{ width: 80px;} .downListA .text{ padding: 15px 26px;} .downListB ul{ margin: 0 -15px;} .downListB li{ padding: 20px 0;} .downListB .pd{ margin: 0 15px;} .downListB .h3{ font-size: 16px;} .caseListA .p{ font-size: 12px; padding: 20px 20px 0 20px;} .newsListA ul{ margin: 0 -15px;} .newsListA .pd{ margin: 0 15px;} .service .em{ font-size: 16px; line-height: 1.3;} .service .h3{ font-size: 28px;} .service .p{ font-size: 14px;} .serviceListA .t{ font-size: 36px;} .aboutAFl .i img{ height: 32px;} .aboutAFl .h3{ font-size: 28px;} .contactCon dl{ padding-left: 60px;} .contactCon dt{ font-size: 42px;} .contactCon .h3{ font-size: 18px;} .contactCon .em{ font-size: 16px;} .zfeatures{ font-size: 14px;} .zproInfoListA{ font-size: 14px;} .ztit4 strong{ font-size: 14px;} } @media screen and (max-width:1366px){ .infoA{ width: auto;} } @media screen and (max-width:1024px){ .pNavTit{ font-size: 14px;} .pNavList{ padding-left: 80px;} .pNavList li{ margin-right: 20px;} .pNavList li a{ height: 48px; line-height: 48px; font-size: 14px;} .pNavM{ font-size: 14px;} .pNavM:before{ content: ''; position: absolute; left: -10px; width: 1px; height: 20px; background: #ccc; margin-top: -10px; top: 50%;} .pMain{ padding: 80px 0;} .tit2{ font-size: 24px;justify-content: flex-start;} .tit2:before{ left: 0px; transform: translateY(0);} .proFl{ top: 60px; width: 160px;} .proFr{ margin-left: 160px;} .proListA li{ width: 33.3333%;} /*.proNavList li:nth-child(n+4){ width: 50%;}*/ .proNavList .pd{ padding-bottom: 0px;} .proNavList .m{ display: none;} .proInfoListA{ flex-direction: column;} .proInfoListA ul{ width: 100%;} .proInfoListA ul:first-child{ margin-bottom: 30px;} .proDown{ right: 0px; left: auto; margin: 0px; padding: 0px; width: 136px; top: 0px;} .proDownTit{ width: auto; position: relative; top: auto; right: auto; height: 48px;} .proDownCon{ border-bottom: 1px solid #828282;} .proDownCon ul{ display: flex;} .proDownCon li{ width: 33.3333%; border-bottom: none; border-right: 1px solid #828282;} .proDownCon li:first-child{ border-left: 1px solid #828282;} .proDownCon .t{ height: 44px; line-height: 44px; font-size: 16px;} .proDownCon .c{ right: auto; left: 50%; margin-left: -60px; bottom: 100%; top: auto;} .caseListC .swiper{ margin: 0 -15px;} .caseListC .pd{ margin: 0 15px; background: #fff;} .caseListC .img{ width: auto;} .caseListC .text{ font-size: 24px; position: relative; display: block; left: auto; top: auto; right: auto; padding: 30px; } .caseListC .npd{ padding: 0px;} .downListA li{ width: 50%;} .downListB li{ width: 50%;} .iStrengthB{ font-size: 24px;} .tit2_p{ width: auto; text-align: left; font-size: 16px;} .historyListA{ margin-left: 140px;} .historyListA .h3{ font-size: 16px;} .historyListA li{ margin-bottom: 40px;} .aboutMain8_1{ font-size: 24px;} .aboutA{ font-size: 24px;} .subsidiary .pd{ font-size: 24px;} .aboutListD{ font-size: 24px;} .subsidiary .h3{ font-size: 1em;} .subsidiary .em{ font-size: 0.75em;} .subsidiary .p{ line-height: 1.5;} .aboutMain1_1{ margin-bottom: 80px;} .aboutMain1_2{ padding: 80px 0;} .subsidiary dd{ padding: 80px 0;} .iStrengthB{ padding-top: 30px;} } @media screen and (max-width:980px){ .nBanner .text{ font-size: 24px;} .nBanner .img img{ height: 220px; width: 100%; object-fit: cover;} .proNavList li{ width: 50%;} /*.proNavList li:nth-child(odd):last-child{ width: 100%;}*/ .proListA li{ width: 50%;} .tit4{ padding: 80px 0 40px 0;} .tit4 em{ font-size: 1.5em;} .proMain4_1{ font-size: 24px;} .pro{ padding-bottom: 0px;} .proInfoHead .img{ float: none; width: auto;} .proInfoHead .img .npd{ width: 100%; } .proInfoHead .textA{ position: relative; margin-bottom: 1em;} .proInfoHead .textA .h3{ font-size: 1em;} .proInfoHead .text{ width: auto; padding-top: 30px;} .proMain4_2 .tit2{ position: relative; top: auto; left: auto;} .proSize{ margin-left: 0px;} .caseListC .swiper-slide{ padding-bottom: 0px;} .serviceMain3, .caseMain3{ background: none !important; padding: 0px !important;} .caseInfoA .img{ display: block;} .caseInfoA .img img{ width: 100%; left: auto; transform: none;} .caseInfoA .text{ width: auto; float: none; padding: 0px;} .caseInfoA .wpd{ padding: 30px;} .ideaListA{ padding-top: 30px;} .caseInfoA_2 .text{ background: #f8f8f8;} .infoA_Fl{ width: auto; margin-bottom: 30px;} .infoA_Fr{ position: relative; left: auto; top: auto; right: auto;} .infoAbtnList ul{ margin: 0px; font-size: 14px;} .infoAbtnList li{ width: auto; float: none; margin-bottom: 10px;} .infoAbtnList .pd{ margin: 0px; padding: 0px;} .infoAbtnList .pd i{ left: 20px;} .infoAbtnList .pd span{ left: 20px;} .infoAbtnList .pd a{ padding-left: 90px;} .infoAbtnList li:nth-child(even) .pd i{ left: 20px; right: auto;} .infoAbtnM{ position: static; width: auto; margin: 0px; } .infoAbtnM a{ height: 44px; line-height: 44px; font-size: 14px;} .recommendedList strong{ font-size: 14px; margin-right: 86px;} .recommendedList em{ font-size: 12px;} .serviceMain1_1{ margin-bottom: 30px;} .service .img{ position: static; width: auto; right: auto; transform: translateX(0); margin-bottom: 30px; top: auto;} .serviceListA ul{justify-content: space-between; border-bottom: 1px dashed rgba(0,0,0,0.2); padding: 0 2%;} .serviceListA li{ width: auto; padding: 20px 0; border-bottom: none;} .serviceListA .npd{ padding: 0px;} .service .text{ width: auto;} .contactTit{ top: 0px; transform: none;} .contact{ padding-left: 50%;} .contactCon{ display: block;} .contactCon dl{ margin-bottom: 30px;} .newsListA li{ width: 50%;} .aboutAFl{ width: auto; float: none; padding-top: 0px;} .aboutAFl .i{ position: relative; top: auto; left: auto; margin-bottom: 1em;} .aboutAFl .p{ line-height: 1.5;} .aboutAFr{ width: auto; float: none; padding: 0;} .iStrengthB ul{ justify-content: space-between;} .iStrengthB li{ width: auto; margin-bottom: 0px;} .subsidiary dd:nth-child(even) .img, .subsidiary .img{ width: auto; float: none;} .subsidiary dd:nth-child(even) .text, .subsidiary .text{ position: relative; left: auto; right: auto; top: auto; padding:30px 0 0 0;} .ztit4 em{ font-size: 24px;} } @media screen and (max-width:720px){ .proFr{ padding-bottom: 40px;} .proHead{ padding: 40px 0;} .pNavTit{ display: none;} .pNavList{ padding:0 50px 0 0;} .pNavList ul{ flex-wrap: wrap;} .pNavList li{ width:33.3333%; margin-right: 0px; display: flex; justify-content: center; position: relative;} .pNavList li:before{ content: ''; width: 1px; height: 10px; background: rgba(0,0,0,0.1); position: absolute; right: 0px; top: 50%; transform: translateY(-50%);} .pNavList8 li{ width: 25%;} .pNavList8 li:nth-child(4n+0):before{ display: none;} .pNavList7 li{ width: 25%;} .pNavList8 li:nth-child(4n+0):before{ display: none;} .pNavList6 li{ width:33.3333%;} .pNavList6 li:nth-child(3n+0):before{ display: none;} .pNavList5 li{ width:33.3333%;} .pNavList5 li:nth-child(3n+0):before{ display: none;} .pNavList4 li{ width: 25%;} .pNavList3 li{ width:33.3333%;} .pNavList2 li{ width: 50%;} .pNavList1 li{ width: 100%;} .pNavList7 li:last-child:before, .pNavList5 li:last-child:before, .pNavList4 li:last-child:before, .pNavList3 li:last-child:before, .pNavList2 li:last-child:before, .pNavList1 li:last-child:before{ display: none;} .pNavList{ padding-right: 0px;} .pNavM{ display: none;} .tit3{ justify-content: center; height: auto; line-height: 1; margin: 0 0 30px 0;} .proMain2{ } .proTj{ position: relative; right: auto; top: auto; transform: none; width: 100%; margin-bottom: 0px;} .proListA li{ width: 100%;} .tit4{ text-align: left; padding: 40px 0;} .tit4 em{ display: block; font-size: 1.25em;} .tit4 strong{ position: relative; top: auto; right: auto; transform: none;} .tit4 strong:before{ left: 0px;} .proInfoHead .textA{} .proInfoHead .textA .h3{ font-size: 24px;} .proInfoHead .textA .h3 strong{ display: block; font-size: 24px; margin-bottom: 0.4em;} .proInfoHead .textA .h3 span{ display: none;} .proInfoHead .textA .h3 em{ display: block; font-size: 14px;} .proInfoHead .textA .em{ font-size: 14px;} .tit2{ flex-direction: column; text-align: left; margin-bottom: 30px; line-height: 1.2;} .tit2:before{ left: 0%; transform: translateX(0%);} .tit2 strong{ margin: 0px;} .tit2 em{ font-size: 16px; margin: 0px; color: #808080;} .features li{ padding: 0.5em 0;} .proInfoListA{ font-size: 14px;} .proInfoListA .h3{ position: relative; top: auto; transform: none; width: auto; margin: 0 0 0.5em 0; width: auto; left: auto; line-height: 1.2;} .proInfoListA .h3:before{ left: 0px;} .proInfoListA .em{ margin: 0px;} .tableA{ font-size: 14px;} .imgBoxA{ margin-bottom: 20px;} .imgBoxA_p{ font-size: 14px;} .proNavList ul{ margin: 0 -5px;} .proNavList .pd{ margin: 0 5px;} .proNavList li{ margin-bottom: 10px;} .caseListA .swiperArrow{ top:-68px;} .formA ul{ margin: 0 -10px;} .formA .pd{ margin: 0 10px;} .caseInfoA .h3{ font-size: 20px;} .tMain{ padding: 40px 0 30px 0;} .serviceListA .t{ font-size: 20px;} .serviceListA .c{ font-size: 12px;} .service .p br{ display: block;} .serviceListBtit{ margin-bottom: 1em;} .downListA li{ width: 100%; padding: 10px 0;} .contact{ padding: 0px} .contactTit{ position: relative; left: auto; top: auto; margin-bottom: 30px;} .contactCon dl:last-child{ margin-bottom: 0px;} .newsListA ul{ display: block; margin: 0px; } .newsListA li{ width: auto;} .newsListA li:last-child{ margin-bottom: 0px;} .newsListA .pd{ margin: 0px;} .historyListA{ margin-left: 76px;} .historyListA .em{transform: translateX(-76px);} .historyListA .em em{ font-size: 24px;} .historyListA .em strong{ font-size: 14px;} .historyListA .pd{ padding: 10px 0 10px 30px;} .historyListA .h3{ font-size: 14px; line-height: 1.5;} .historyListA .i{ top: 12px;} .tit2_p2{ font-size: 16px} .subsidiary .h3{ font-size: 18px;} .subsidiary .em{ font-size: 16px;} .aboutListD{ font-size: 16px; width: auto;} .aboutListD ul{ justify-content: space-between; margin: 0px;} .aboutListD li{ width: auto;} .aboutListD .pd{ padding: 30px 0; margin: 0px;} .videoB video{aspect-ratio: auto;} .proSize{ display: block;} .proSize .img{ width: auto;} .proSize .text{ width: auto;} .ztit4 .pd{ padding-right: 90px;} .tit2{ margin-bottom: 30px;} .zproInfoHead .img{ width: auto; float: none;} .zproInfoHead .npd{ width: auto;} .zproInfoHead .text{ margin-right: 0px;} .zproInfoHead .nimg{ position: static; width: auto;} .zproInfoHead .h3{ text-align: center; font-size: 18px; padding: 1em 0; position: relative; left: auto; top: auto; right: auto;} .zfeatures ul{ display: block;} .zfeatures li{ width: auto;} .zfeatures .pd{ line-height: 1.2;} .zproInfoListA ul{ display: block; margin: 0px;} .zproInfoListA li{ width: auto;} .zproInfoListA .pd{ margin: 0px;} } @media screen and (max-width:640px){ .contactTit .i img.img1{ display: none;} .contactTit .i img.img2{ display: block;} } @media screen and (max-width:480px){ .pMain{ padding: 60px 0;} .nBanner .text{ font-size: 5vw;} .proMain6_2{ margin-bottom: 40px;} .proDown{ position: relative; top: auto; width: auto;} .tit5{ font-size: 16px;} .proNavList .text{ padding: 15px;} .proNavList .h3{ font-size: 16px;} .proNavList .em{ font-size: 12px;} .proNavList .pd:hover .text .em{ color: #fff;} .caseInfoA .wpd{ padding: 20px;} .caseListC .text{ padding: 20px;} .infoA{ font-size: 14px;} .infoAtit p{ font-size: 12px;} .recommendedList strong{ font-size: 14px; margin-right: 70px;} .recommendedList em{ font-size: 12px;} .serviceListB{ display: flex; justify-content: center;} .serviceListB:before{ display: none;} .serviceListB .pd{ padding: 0px;} .serviceListB ul{ position: relative;} .serviceListB ul:before{ content: ''; width: 1px; height: auto; top: 0px; bottom: 0px; right: auto; left: 0px; background: #808080; position: absolute;} .serviceListB i{ left: 0px; top: 50%;} .serviceListB i:before{} .serviceListB ul{ display: block;} .serviceListB li{ width: auto; margin-bottom:20px;} .serviceListB li:last-child{ margin-bottom: 0px;} .serviceListB strong{ text-align:left; padding-left: 2em; font-size: 16px;} .aboutAFl .i img{ height: 24px;} .aboutAFl .h3{ font-size: 22px;} .iStrengthB{ font-size: 4vw;} .videoAD video{ object-fit: contain;} } @media screen and (max-width:413px){ .service .em{ font-size: 14px;} .service .h3{ font-size: 24px;} .service .p{ font-size: 12px;} } .nodownimg{ display: flex; position: relative; } .nodownimg .npic{ position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%;} .fEwm .nodownimg, .nBanner .img .nodownimg{ display: block;} .logo .nodownimg{ display: block;} .logo .nodownimg:last-child{ display: none;} .contactTit .nodownimg{ display: block;} .contactTit .nodownimg:last-child{ display: none;} @media screen and (max-width:1024px){ .logo .nodownimg{ display: none;} .logo .nodownimg:last-child{ display: block;} .contactTit .nodownimg{ display: none;} .contactTit .nodownimg:last-child{ display: block;} } /*瑙嗛鎾斁鍣?/ .plu-video {width: 100%;height: 100%;box-sizing: border-box;border-radius: 6px;object-fit: fill;filter: blur(0px);background-color: #000000;pointer-events: none; aspect-ratio:1920/746; object-fit: contain;} .plu-video-container {position: relative;overflow: hidden; } .plu-video-container .plu-video-control {position: absolute;left: 0;bottom: 0;width: calc(100% - 60px);height: 60px;display: none;flex-direction: row;padding: 20px 30px 0px 30px;justify-content: space-between;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;align-items: center;background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));z-index: 100; } .plu-video-container .plu-video-control .plu-video-control-left, .plu-video-container .plu-video-control .plu-video-control-right {display: flex;flex-direction: row;align-items: center; } .plu-video-container .plu-video-control .plu-video-control-left span, .plu-video-container .plu-video-control .plu-video-control-right span {display: flex;flex-direction: row;align-items: center;justify-content: center; } .plu-video-container .plu-video-control .plu-video-control-left {flex: 1;display: flex;flex-direction: row;padding-right: 10px; } .plu-video-container .plu-video-control .plu-video-control-btn {width: 60px;height: 26px;border-radius: 4px;border-color: #C8C9C8;border-width: 2px;border-style: solid; background-color: transparent;color: #ffffff;font-weight: bold;box-sizing: border-box;cursor: pointer; } .plu-video-container .plu-video-control .plu-video-control-btn:hover {border-color: #e1251b;color: #e1251b; } .plu-video-container .plu-video-control .plu-video-control-btn-play {width: 30px;height: 26px;border-radius: 4px;border-color: transparent;border-width: 2px;border-style: solid;background-color: transparent;color: #ffffff;font-weight: bold;box-sizing: border-box;cursor: pointer;display: inline-block; } .plu-video-container .plu-video-control .plu-video-control-btn-play:first-child{ opacity: 0;} .plu-video-container .plu-video-control .plu-video-control-btn-play:hover svg path {fill: #e1251b; } .plu-video-container .plu-video-control-progress {flex: 1;height: 2px;background-color: rgba(115, 133, 159, 0.5);cursor: pointer;margin-right: 10px;border-radius: 6px;position: relative; } .plu-video-container .plu-video-control-progress:hover {height: 6px; } .plu-video-container .plu-video-control-progress .plu-video-control-progress-buffer {height: 100%;width: var(--play-pro-buffer);background-color: rgba(245, 246, 248, 0.6);border-radius: 6px; } .plu-video-container .plu-video-control-progress .plu-video-control-progress-bar {position: absolute;top: 0;left: 0;height: 100%;width: var(--play-pro);border-radius: 6px;background-color: #e1251b; } .plu-video-container .plu-video-control-progress-time {color: #ffffff; } .plu-video-container .plu-video-toolTips { opacity: 0; position: absolute;top: var(--showTipY-primary);left: var(--showTipX-primary);z-index: 101;background-color: rgba(0, 0, 0, 0.6);display: var(--showTip-primary); } .plu-video-container .plu-video-toolTips ul, .plu-video-container .plu-video-toolTips li {padding: 0;margin: 0;list-style: none;color: #ffffff;font-size: 14px; } .plu-video-container .plu-video-toolTips li {padding: 4px 10px; } .plu-video-container .plu-video-toolTips li:nth-child(1) {cursor: pointer; } .plu-video-container .plu-video-toolTips li:nth-child(1):hover {color: #e1251b; } .plu-video-container .plu-video-detail {position: absolute;top: 0;left: 0;z-index: 101;width: 250px;height: 100%;background-color: rgba(0, 0, 0, 0.6);border-radius: 6px;overflow-y: auto;display: var(--showDetail-primary); } .plu-video-container .plu-video-detail .plu-video-detail-close {position: absolute;right: 10px;top: 2px;color: #ffffff;cursor: pointer;display: block;width: 16px;height: 16px;font-size: 16px; } .plu-video-container .plu-video-detail .plu-video-detail-close:hover {color: #e1251b; } .plu-video-container .plu-video-detail .plu-video-detail-content {width: calc(100% - 20px); height: calc(100% - 40px);padding: 20px 10px;color: #ffffff;font-size: 14px;word-wrap: break-word; } .plu-video-container .plu-video-loading {position: absolute;top: 40%;left: 48%;z-index: 102;display: var(--showLoading);width: 32px;height: 32px;animation: plu-turnAnimate 2s linear infinite; } .plu-video-container .plu-video-loading svg path {fill: #e1251b; } @keyframes plu-turnAnimate {0% {-webkit-transform: rotate(0deg); }25% {-webkit-transform: rotate(90deg); }50% {-webkit-transform: rotate(180deg); }75% {-webkit-transform: rotate(270deg); } 100% {-webkit-transform: rotate(360deg); } } .plu-video-container .plv-video-volume-bar {width: 50px;height: 6px;position: relative;border-radius: 6px;background-color: rgba(115, 133, 159, 0.5);margin-right: 10px; } .plu-video-container .plv-video-volume-bar .plv-video-volume-bar-buffer {width: var(--volumeW);height: 100%;background-color: #e1251b;border-radius: 6px; position: absolute;left: 0;z-index: 9; } .plu-video-container .plv-video-volume-bar .plv-video-volume-bar-btn {display: block;width: 10px;height: 10px;border-radius: 50%;background-color: #ffffff;position: absolute; left: var(--volumeOffset);top: -2px;cursor: pointer;z-index: 10; } .plu-video-container .plu-picture {position: absolute;top: 0;left: 0;z-index: 99999999999;width: 100%;height: 100%;background-color: black;display: none; } .plu-video-container .plu-picture img {width: 100%;height: 100%; } .plu-video-container .plu-picture .plu-picture-buttons {position: absolute;bottom: 20px;left: calc((100% - 260px) / 2); } .plu-video-container .plu-picture .plu-picture-buttons button {border: 0;padding: 4px 40px;border-radius: 6px;cursor: pointer;background-color: #e1251b;color: #ffffff;margin-left: 20px; } .plu-video-container .picture-error::before {content: '';font-size: 20px;font-weight: 600;color: red;position: absolute;top: 50%;left: 36%; } .plu-video-container .plu-video-rateText {position: absolute;right: 20px;top: 20px;font-size: 16px;font-weight: 600;z-index: 99999999;color: #ffffff;display: none;animation-duration: 2000ms; } .plu-video-container .plu-video-time-tip {position: absolute;top: 45%;left: 45%;z-index: 99999999;padding: 10px;background-color: rgba(0, 0, 0, 0.6);color: #ffffff;font-weight: bold;font-size: 20px;border-radius: 6px;display: none; } .plu-video-container .plu-video-play-svg {position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -32px; cursor: pointer;z-index: 99999999999999999; } .plu-video-screenfull {position: fixed;width: 100% !important;height: 100% !important;z-index: 99999999999999999;top: 0 !important;left: 0 !important; } .infoVideo{ margin-bottom: 20px;/* position: relative; z-index: 2; */} .boxBtn{ padding: 30px 0 60px 0;} .more4{ width:156px; margin: 0 auto; border:none; line-height: 40px; background: #e1251b; color: #fff; height: 40px; box-sizing: border-box; padding: 0; border-radius: 4px; display: block; font-size: 14px; transition: 0.3s all; text-align: center;} .more4:hover{ transform: translateY(-5px); color: #fff;}