/* CSS Document */ body{ font-size:100%;line-height:1.1; width:100%; position:relative; font-family:"微软雅黑",arial,sans-serif; overflow-x:hidden; background: #fff; } *{ padding:0; margin:0;} img{ max-width:100%;} #bdshare_weixin_qrcode_dialog *,#bdshare_weixin_qrcode_dialog{ box-sizing:content-box; } .j_tab{ display:table; width:100%; height:100%;} .j_tab_cel{ display:table-cell; vertical-align:middle; width:100%; height:100%;} *{ margin:0; padding:0; outline:none; } a{ color:inherit;} a:focus{ outline: none !important;} h4, .h4, h5, .h5, h6, .h6,h1, .h1, h2, .h2, h3, .h3,p{ margin:0;} h5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} h5 a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} img{ max-width:100%; max-height:100%;} .img img{ width:100%; height:100%; object-fit: cover; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } li:hover .img img{ transform: scale(1.05) rotate(.1deg); -webkit-transform: scale(1.05) rotate(.1deg); -moz-transform: scale(1.05) rotate(.1deg); -ms-transform: scale(1.05) rotate(.1deg); -o-transform: scale(1.05) rotate(.1deg); } svg{ max-width:100%; max-height:100%;} table{table-layout: fixed;} .pd10{ padding:10px;} .m10{ margin:10px;} .mr20{ margin-right:20px;} .baibj{ background:#FFF!important;} .m{ max-width: 1700px; margin: 0 auto; padding:0 50px; display: block; } .pad_top{ padding-top:4.06rem;} .pad_bot{ padding-bottom:4.06rem;} .pad_aside{ padding-left:45px; padding-right:45px;} .draw_h{ display:block; border-radius: 50%; text-align: center; position:relative;} .draw_h:before{ content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; border: 1px solid rgba(100%,100%,100%,.5); border-radius: 50%;} svg.drawcircle{position:absolute;top:0;left:0;overflow: inherit;display: block;pointer-events: none;} svg.drawcircle circle { fill: none; box-sizing:border-box; stroke-width: 1; stroke: none; stroke-dasharray: 0 , 400; stroke-dashoffset:400; transition: all .3s linear 0s; } .draw_h:hover svg.drawcircle circle { stroke:#3f7bc5; stroke-dasharray:400 , 0; stroke-dashoffset:400; -webkit-transition: all 1.5s cubic-bezier(0.11, 0.57, 0.58, 1); transition: all 1.5s cubic-bezier(0.11, 0.57, 0.58, 1); -moz-transition: all 1.5s cubic-bezier(0.11, 0.57, 0.58, 1); -ms-transition: all 1.5s cubic-bezier(0.11, 0.57, 0.58, 1); -o-transition: all 1.5s cubic-bezier(0.11, 0.57, 0.58, 1);} .draw_h .icon { fill: #626262; vertical-align: middle; transition:.3s; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .draw_h:hover .icon{ fill:#0081cc;} /*===========================header=============================*/ #header{ position: fixed; height:5.6875rem; z-index:999; width:100%; top:0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } #header:before{ content: ""; display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, .2); position: absolute; bottom: 0; left: 0; transition: .5s; -webkit-transition:; -moz-transition:; -ms-transition:; -o-transition:; } #header .m{ height:100%; display: flex; justify-content: space-between; } #logo{ float:left; height:100%; margin-right: 4rem; } #logo img{ height: 3.5rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } #logo img.img02{ display: none; opacity: 0; } #header .fr{flex-grow: 1;display: flex;justify-content: flex-end;/*justify-content: space-between;*/align-items: center;width: 1320px; max-width: calc(100% - 18rem); position: absolute;right: 0;} #nav{ flex-grow:0.6; padding-right: 1rem; border-right: 1px solid rgba(255,255,255,.2); transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } #nav ul{display: flex; } #nav ul li{ float:right; flex-grow:0.6; height:5.6875rem; line-height:5.6875rem; position:relative; z-index:0; text-align: center;} #nav ul li a{ display:block; text-transform:uppercase;} #nav ul li h3{ font-size:1rem; color:#fff; display: inline-block; line-height:5.6875rem; overflow:hidden; position:relative; z-index: 1; text-align: center; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } #nav ul li h3:before{ content: ""; display: block; background:#E04208; width:0; height:3px; position: absolute; left: 0; bottom: 0; z-index: -1; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } #nav ul li:hover h3:before{ width: 100%;} #nav ul li.on h3:before{ width: 100%;} #nav ul li .sub{ position:absolute; top:100%; background:rgba(10, 10, 10, 0.5); background: #0756a5; width:100%; left:0; z-index: 10000; display: none; } #nav ul li .sub .box{ text-align: center; } #nav ul li .sub a{ padding:0; line-height:2.5rem; color: #fff; transition:.3s; font-size:.875rem;} #nav ul li .sub a:hover{ background:#E04208; } .top_search{ width:15rem;height:5.6875rem; background:#0067C4;} body.ny{ padding-top: 5.6875rem;} .ny #header{ background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; width: 100%;} .ny #nav ul li h3{ color: #0d0d0d;} .ny #logo img.img01{ display: none; } .ny #logo img.img02{ display: block; opacity: 1; } .ny #nav{ border-right: 1px solid #e5e5e5;} .ny .top_search .btn_search img.img01{ display: none;} .ny .top_search .btn_search img.img02{ display: inline-block;} .ny .top_search .input{ color: #555;} .ny .top_search .input::-webkit-input-placeholder{color:#fff; color: #b8b8b8;} .ny .top_search .input::-moz-placeholder{ color:#fff; color: #b8b8b8;} .ny .top_search .input:-moz-placeholder{color:#fff; color: #b8b8b8;} .ny .top_search .input:-ms-input-placeholder{ color:#fff; color: #b8b8b8;} .ny .top_search .input:focus::-webkit-input-placeholder {color: transparent;} .ny .top_search .input:focus:-moz-placeholder {color: transparent;} .ny .top_search .input:focus::-moz-placeholder {color: transparent;} .ny .top_search .input:focus:-ms-input-placeholder {color: transparent;} #header.xg { background: #fff; position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);} .xg #nav ul li h3{ color: #0d0d0d;} .xg #logo img.img01{ display: none; } .xg #logo img.img02{ display: block; opacity: 1; } .xg #nav{ border-right: 1px solid #e5e5e5;} .xg .top_search .btn_search img.img01{ display: none;} .xg .top_search .btn_search img.img02{ display: inline-block;} .xg .top_search .input{ color: #555;} .xg .top_search .input::-webkit-input-placeholder{color:#fff; color: #b8b8b8;} .xg .top_search .input::-moz-placeholder{ color:#fff; color: #b8b8b8;} .xg .top_search .input:-moz-placeholder{color:#fff; color: #b8b8b8;} .xg .top_search .input:-ms-input-placeholder{ color:#fff; color: #b8b8b8;} .xg .top_search .input:focus::-webkit-input-placeholder {color: transparent;} .xg .top_search .input:focus:-moz-placeholder {color: transparent;} .xg .top_search .input:focus::-moz-placeholder {color: transparent;} .xg .top_search .input:focus:-ms-input-placeholder {color: transparent;} /***********************/ /*手机导航开始*/ #m_header{ display:none; height:4.5rem; position:absolute; top:0; width:100%; z-index:999; transition:0s 1.5s; box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);} #m_header .m{ position:relative; height:100%; display: flex; align-items: center;} #m_logo{ transition:0s 1.5s; height:100%; visibility:visible; float: left; margin-right: 2rem; line-height: 4.5rem; display: flex; align-items: center;} #m_logo a{ display: block;} #m_logo img{ height: 2.925rem;} #m_logo img.img02{ display: none;} #m_header .top_menu{ height: 4.5rem; line-height: 4.5rem; border:0;} .ny #m_logo img.img01{ display: none;} .ny #m_logo img.img02{ display: block;} /*导航按钮开始*/ #nav_btn_box{ height:100%; z-index:999999999; margin-left:20px; position:absolute; height:4.5rem; right:0; top: 0; display:none; } #nav_btn_box .m{ height: 100%; display: flex; align-items: center;} #nav_btn_box.on{ background:none; } #nav_btn{} #nav_btn .point.on .navbtn::after, #nav_btn .point.on .navbtn::before{background: #a0a0a0;} #nav_btn{ cursor: pointer; text-align: center;z-index:99999; padding-bottom:4px; transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s; outline:none; box-shadow:none;} #nav_btn .point{display: inline-block;width: 1.875rem;height: 22px; position: relative; outline:none;} #nav_btn .point:hover .navbtn, #nav_btn .point:hover .navbtn::after, #nav_btn .point:hover .navbtn::before{width: 1.75rem;} #nav_btn .navbtn{position: absolute;top: 12px;left: 0;display: inline-block;width: 21px;height: 1px;-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-ms-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;/* background: #333; */} #nav_btn .navbtn::after, #nav_btn .navbtn::before{position: absolute;left: 0;display: inline-block;width: 1.75rem;height: 3px;content: '';-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-ms-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;background: #0089D4;} .ny #nav_btn .navbtn::after, .ny #nav_btn .navbtn::before{ background: #999;} #nav_btn .navbtn::after{top: -5px;} #nav_btn .navbtn::before{top: 5px;} #nav_btn .point.on .navbtn{background: transparent;} #nav_btn .point.on .navbtn::after{-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);top: 0px;} #nav_btn .point.on .navbtn::before{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);top: 0px;} /*导航按钮结束*/ .m_nav_list{/* flex-direction:column; *//* justify-content: flex-start; */width:100%;/* overflow: auto; */} .m_nav_list::-webkit-scrollbar {display:none} #m_nav { z-index: -1; position: fixed; background: #f7f7f7; width: 100%; height:100vh; right: 0; top: 0; display:none; padding:50px 0; overflow:hidden; pointer-events: none; transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -moz-transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -o-transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); -ms-transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); display: block; overflow: auto; visibility: hidden; opacity: 0; } #m_nav::-webkit-scrollbar{ display: none;} #m_nav.act{pointer-events: auto;top:0; visibility: visible; opacity: 1;z-index: 99999;} #m_nav>ul>li{width: 80%;overflow:hidden;padding: 0 1rem;margin: 0 auto;} #m_nav>ul>li+li{border-top: 1px solid rgb(111 111 111 / 10%);} #m_nav li .a{ } #m_nav li .a h3{line-height:4.5rem;height:4.5rem;color: #3d3d3d;padding:0;font-size:1.125rem;float:left;} #m_nav li .a span{ display:block; position:absolute; top:0; right:10px; width: 20px; height: 50px; text-align:center;} #m_nav li .a span i{ font-size:0;} #m_nav .title .a i{opacity:1;filter:alpha(opacity=100);display:inline-block;width: 16px;height:4.5rem;float:right;display:inline-block;background: url(../image/arrow_down.svg) center no-repeat;background-size:contain;} #m_nav li.on.title .a i{ transform:rotate(-90deg);-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);} #m_nav .on.title .a i{ transform:rotate(-90deg);-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);} #m_nav li{display:block;width:100%;} .slide_nav{ position: absolute; left:0; height: 70px; z-index: 998; padding:15px; top:0; width: 100%; } #m_nav .title .list{display:none;position:relative;width:100%;z-index:9;left:0;margin-left:0;background:none;border:0;clear: both;padding-bottom:10px;} #m_nav .title .list span{ background:none; } #m_nav .title .list span a:hover{ color: #014085;} #m_nav .title .list a{display:block;font-size:1rem;color: #666;text-align:left;line-height:35px;height: 35px;border:0;font-weight:300;} /*三级导航 开始*/ #m_nav .title .list .void>a{background-size:10px; position:relative;} #m_nav .title .list .void>a:before{ content:"·"; position:absolute; left:-1em; font-size:12px; font-weight:bold;} #m_nav .title .list span{ position:relative; display:block;} #m_nav .title .list span .sub{ position: static; width:100%;display: block !important; overflow:hidden;} #m_nav .title .sub a{ background:none; font-size:.875rem; opacity:.8; min-width:50%; float:left; display:inline-block; color:#999;} .nav_mask { position: fixed; top: 0; left: 0;width: 100%;height: 100%;z-index: 1000;background-color: rgba(0,0,0,0.4);display: none;} /* 新增二级分类样式 */ #nav ul li .sub .sub-level { position: relative;border-bottom: 1px solid rgba(255,255,255,0.1);} #nav ul li .sub .has-sub { position: relative; } #nav ul li .sub .has-sub .arrow { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; transition: transform 0.3s;} #nav ul li .sub .sub-level:hover .has-sub .arrow { transform: translateY(-50%) rotate(180deg);} #nav ul li .sub .sub-level-2 { position: absolute; left: 100%; top: 0; background: #0756a5; width: 150px; display: none; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);} #nav ul li .sub .sub-level:hover .sub-level-2 { display: block;} #nav ul li .sub .sub-level-2 a { display: block; padding: 0 15px; line-height: 2.5rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); transition: all 0.3s;} #nav ul li .sub .sub-level-2 a:hover { background: #E04208;} #nav ul li .sub .sub-level-2 a:last-child { border-bottom: none;} /* 移动端二级分类样式 */ #m_nav .sub-level { position: relative;} #m_nav .sub-level .has-sub { position: relative;} #m_nav .sub-level .has-sub i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 35px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkw4IDEwTDEyIDYiIHN0cm9rZT0iIzY2NiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+) center no-repeat; background-size: 12px; transition: transform 0.3s;} #m_nav .sub-level.on .has-sub i { transform: translateY(-50%) rotate(-90deg);} #m_nav .sub-level-2 { display: none; padding-left: 15px;} #m_nav .sub-level.on .sub-level-2 { display: block;} #m_nav .sub-level-2 a { font-size: 0.9rem !important; color: #888 !important; line-height: 30px !important; height: 30px !important;} /* 图片区域 */ .product-container {margin: 0 auto; border-radius: 12px; overflow: hidden;} .product-detail { display: flex; flex-direction: column;} /* 图片区域 */ .product-images { position: relative; padding: 15px; background: #fff;} .main-image-container { position: relative; margin-bottom: 15px; border-radius: 8px; overflow: hidden; background: #f9f9f9; touch-action: pan-y;} .image-slider { display: flex; transition: transform 0.3s ease; height: 100%;} .slide0 {flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 100%;} .slide0 img { max-width: 100%; max-height: 100%; object-fit: contain;} .image-nav { display: flex; justify-content: space-between; position: absolute; top: 50%; width: 100%; transform: translateY(-50%); padding: 0 10px; pointer-events: none;} .nav-btn { background: rgba(255, 255, 255, 0.85); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.3s; pointer-events: all; font-size: 18px; color: #666;} .nav-btn:hover { background: rgba(255, 255, 255, 1); transform: scale(1.05);} .image-indicator { display: flex; justify-content: center; margin-top: 10px;} .indicator-dot { width: 6px; height: 6px; border-radius: 50%; background: #ddd; margin: 0 4px; transition: all 0.3s;} .indicator-dot.active { background: #ff5000; width: 20px; border-radius: 3px;} .thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; -webkit-overflow-scrolling: touch;} .thumbnail { width: 60px; height: 60px; border: 2px solid #eee; border-radius: 6px; overflow: hidden; cursor: pointer; flex-shrink: 0; transition: all 0.3s;} .thumbnail.active { border-color: #ff5000;} .thumbnail img { width: 100%; height: 100%; object-fit: cover;} /* 产品信息区域 */ .product-info { padding: 20px 15px; background: #fff;} .product-title { font-size: 18px; font-weight: bold; margin-bottom: 12px; margin-top:1rem; line-height: 1.4;} .product-price { color: #ff5000; font-size: 24px; font-weight: bold; margin-bottom: 20px;} .product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;} .tag { background: #fff2e8; color: #ff5000; padding: 4px 8px; border-radius: 4px; font-size: 12px;} .spec-section { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;} .spec-title { font-size: 15px; margin-bottom: 12px; color: #666; display: flex; justify-content: space-between; align-items: center; line-height:1.8;} .spec-options { display: flex; flex-wrap: wrap; gap: 10px;} .spec-option { padding: 8px 15px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; transition: all 0.3s; font-size: 14px;} .spec-option:hover { border-color: #ff5000;} .spec-option.active { border-color: #ff5000; background-color: #fff5f0; color: #ff5000;} .spec-option.disabled { color: #ccc; background: #f9f9f9; cursor: not-allowed;} .quantity-section { display: flex; align-items: center; margin-bottom: 25px;} .quantity-title { margin-right: 15px; color: #666; font-size: 15px;} .quantity-control { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;} .quantity-btn { width: 36px; height: 36px; background: #f5f5f5; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px;} .quantity-btn:disabled { color: #ccc; cursor: not-allowed;} .quantity-input { width: 50px; height: 36px; border: none; text-align: center; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 15px;} .action-buttons { display: flex; gap: 12px; position: sticky; bottom: 0; background: #fff; padding: 15px 0; margin: 0 -15px; padding-left: 15px; padding-right: 15px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);} .btn { padding: 14px 0; border-radius: 20px; font-size: 16px; cursor: pointer; transition: all 0.3s; border: none; flex: 1; text-align: center; font-weight: bold;} .btn-cart { background: #ffefe6; color: #ff5000; border: 1px solid #ff5000;} .btn-cart:hover { background: #ff5000; color: white;} .btn-buy { background: #ff5000; color: white;} .btn-buy:hover { background: #ff3500;} /* 响应式设计 */ @media (min-width: 768px) { .product-detail { flex-direction: row; padding: 20px; } .product-images { flex: 1; padding: 0; margin-right: 30px; } .main-image-container { height: 500px; } .product-info { flex: 1; padding: 0; } .product-title { font-size: 22px; } .product-price { font-size: 28px; } .thumbnail { width: 80px; height: 80px; } .action-buttons { position: static; box-shadow: none; padding: 0; margin: 0; } } @media (min-width: 992px) { .main-image-container { height: 400px; } .thumbnails { justify-content: center; } } @media ( max-width: 992px) { .product-images { flex: 1; padding: 0;} .product-info{ padding: 0;} } /*顶部搜索*/ .wap_search{font-size:15px;color:#fff;text-align:center;height:80px;letter-spacing:2px;overflow:hidden;width:100%;display: block; } .wap_search form{height:40px;border-radius:20px;background: rgb(255 255 255);position:relative;width: 23rem;margin: 20px auto;} .wap_search .input{font-size:.875rem;color: #646464;height:40px;line-height:40px;padding-left:1.5rem;box-shadow:none;-webkit-appearance: none;float:left;border-right: 0;background:none;} .wap_search .btn_blue{position:absolute;cursor:pointer;top:0;right:0;width: 40px;height:40px;line-height:40px;border:0;background: url(../image/seach_white.svg) center no-repeat #fb2002;background-size: 1.5rem;border-radius: 20px;} .wap_search .btn_blue.fr{ background:#e9edef; color:#4e4f53;} .wap_search input::-webkit-input-placeholder{ color:#999; } .wap_search input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#999; } .wap_search input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#999; } .wap_search input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#999; }/* WebKit browsers */ .wap_search input:focus::-webkit-input-placeholder {color: transparent;/* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 */}/* Mozilla Firefox 4 to 18 */ .wap_search input:focus:-moz-placeholder {color: transparent;}/* Mozilla Firefox 19+ */ .wap_search input:focus::-moz-placeholder {color: transparent;}/* Internet Explorer 10+ */ .wap_search input:focus:-ms-input-placeholder {color: transparent;}/* 点击搜索框获取焦点 placeholder消失-结束 */ .section{ overflow: hidden;} /*首页banner*/ /*首页banner*/ #banner{ width:100%; overflow: hidden; position: relative; top:80px; left:0; z-index:1; background:#fff; } #banner .banner_slider{ margin: 0; } .mouse_down{ width: 51px; height: 51px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .3); position: absolute; left:50%; bottom: 100px; margin-left:-25px; text-align: center; z-index: 50; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .mouse_down span { display: inline-block; width: 15px; height:23px; border:2px solid #fff; border-radius:12px; margin: auto; position: relative; } .mouse_down span:before { content: ""; width: 2px; height: 4px; background: #fff; position: absolute; left: 50%; margin-left: -1px; top: 3px; animation-delay: 0ms; animation-duration: 1500ms; animation-iteration-count: infinite; animation-name: arrow; animation-play-state: running; animation-timing-function: linear; } .mouse_down b { display: block; text-align: center; color: #766047; font-size: 18px; line-height: 1; font-family: Arial; margin-top: 4px; font-weight: normal; } @-webkit-keyframes arrow { 0% { opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0px, 5px, 0px); } } @keyframes arrow { 0% { opacity: 0; transform: translate3d(0px, 0px, 0px); } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0px, 5px, 0px); } } #gotop{ width:3.125rem; height:3.125rem; background:#E04208; border-radius:50%; cursor:pointer; display: flex; align-items: center; justify-content: center; opacity: 1; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; position: fixed; right: 2rem; bottom: 10%; z-index: 9999; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; } #gotop svg{ width: 2rem;} #gotop.hide{ height: 0; } #gotop:hover{ background: #0075C0;} .s_about{ margin-top:5rem; padding:4rem 0; width: 100%; overflow: hidden; background: url(../image/s_about_bg.png) top center no-repeat;} .s_about .m{ align-items: center;} .s_about .box{ display: flex; align-items: center;justify-content: space-between;} .s_about .left{ max-width: 964px; padding-right: 4.375rem;} .s_about .right{ float:right; width:46rem; flex-shrink: 0;} .s_about .pic{ position: relative;} .s_about .pic img{ height: 100%; border-radius:2rem; border:1rem solid #fff;} .s_about .pic .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .s_about .pic .mask .btn_play{ width: 3rem; height: 3rem; display: block;} .s_about .txt{} .s_about .tt{ margin-bottom:1.5rem;} .s_about .tt li{ width:33.33%; float:left; text-align:center; padding-bottom:1rem; border-right:1px solid #CCC;} .s_about .tt li:nth-last-child(1){ border-right:none;} .s_about .tt span em{ font-size:1.25rem; color: #000000; font-family: play-black; text-transform: uppercase;} .s_about .tt h3{ font-size: 1.6rem; color: #005BAC;padding-top:11px;} .s_about .tt i{ display: block; width: 25px; height: 3px; background: #fb2002; margin-top: 1.5rem;} .s_about .con{ font-size: 1rem; color: #7e7e7e; line-height: 1.75rem;} .s_about .btn_xq{ margin-top:2.625rem;} .btn_xq { position: relative; z-index:0; -webkit-transition: all .5s; transition: all .5s; background: #0075C0; color: white; text-align: center; line-height: 2.5rem; border-radius: 20px; width: 9.375rem; height: 2.5rem; font-size: .875rem; display: block; overflow: hidden; text-transform: uppercase; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px;} .btn_xq:before { content: ""; display:block; width:0; height: 100%; background:#FFCC00; position: absolute; z-index:-1; right: 0; top: 0; -webkit-transition: .38s cubic-bezier(.4,0,.2,1); transition: .38s cubic-bezier(.4,0,.2,1); border-radius: 3px; } .btn_xq:hover:before { width:100%; right:auto; left:0;} .s_more{display:inline-flex!important;align-items:center;justify-content:center!important;gap:1.125rem;border-radius:5rem;transition:all .5s ease;padding:.3rem .625rem .3rem 1.625rem;border:1px solid #d2d2d2; background:#0E74BC; margin-top:2rem; width:150px; height:40px;} .s_more font{font-size:.9375rem;color:#fff;transition:all .5s ease;} .s_more .iconfont{width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff; background:#fff url(../image/more0.png) no-repeat center center;} .s_more .iconfont::before{transform:rotate(-45deg);transition:all .5s ease;} .s_more:hover{background-color:#E04208;border-color:#E98F2D;} .s_more:hover .iconfont{background-color:#fff;font-size:1.125rem;color:#E98F2D;} .s_shuzi{ display: flex; justify-content: space-between; margin-top: 5.625rem;} .s_shuzi li{} .s_shuzi li div{ font-size: 3.125rem; color: #0075C0; font-family: "Barlow Condensed Bold";} .s_shuzi li div p span{ font-size: 1.25rem;color: #0075C0; font-family: "Barlow Condensed Bold";} .s_shuzi li div p{ align-self: flex-end; font-size: .875rem; color: #7e7e7e; font-weight: normal; margin-bottom: .75rem;} .s_shuzi li p{ font-size: 1rem; color: #7e7e7e; margin-top: 3px;} .inrow>li,.inrow span{display:inline-block;*display:inline;*zoom:1;font-size:14px;letter-spacing:normal;word-spacing:normal; } .s_shuzi li .counter{display: inline-block;margin-right: 4px;overflow: hidden;} .s_shuzi li>div{ display: flex; align-items: center; transition: .5s ease-out; -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -ms-transition: .5s ease-out; -o-transition: .5s ease-out; } .s_shuzi li:hover>div{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .dataNums{ width:100%; text-align:center;} .dataNums .dataOne{width: 1.375rem;height:4rem;display: block;float: left;text-align: center; } .dataNums .dataBoc {position: relative;width: 100%;height: 100%;/* overflow: hidden; */} .dataNums .dataBoc .numtt {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .dataNums .numtt span{width:100%;height:100%; font-family: inherit;display: block; line-height: 4rem; height:4rem; color: inherit;font-size: inherit; } .s_shuzi li div{ vertical-align: top;} .tc{ transition:all ease 300ms; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index:999; pointer-events: none; visibility:hidden; opacity:0; transition:.5s; overflow: auto;} .tc[name=tc_search]{ opacity:1;} .tc.act{ display: block; pointer-events: auto; visibility:visible; opacity:1;} .tc-box{ box-sizing:border-box; z-index:999; display: block; position:relative; } .tc_close{ position: absolute; cursor:pointer; color:#e13a39; font-size:30px; right: 30px; top: 30px;} .tc_bg { height: 100%; background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; width: 100%; z-index: 0; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; transition:.5s; } .tc.act .tc_bg{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; transition:.5s; } .tc1 .tc{pointer-events: none;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; position: fixed;width: 100%;height: 100%;top: 0;z-index: 99999;} .tc1 .tc.act{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; pointer-events: auto; } .tc1 .tc-box{position:absolute; background: #309dd5; overflow: hidden;top:50%;z-index:9999; width: 11rem; left:50%;margin-left: -5.5rem;margin-top: -5.5rem;} .tc1 .tc.act .tc-box{ transform:scale(1);} .tc1 .tc.act{display: block; } .tc1 .close{position: absolute; cursor:pointer;font-size: 20px;right: 30px;top: 30px; } .tc1 .tc-box h3 img{ width:10rem; height:10rem; margin:.5rem;} .tc1 .tc-box h5{ width:11rem; height:3rem; line-height:3rem; font-size:1rem; color:#fff; text-align:center} .tc .j_tab{ table-layout: fixed;} .tc.act .tc-box{opacity: 1;} .tc_close{ position: absolute; cursor:pointer; color:#e13a39; font-size:30px; right:15px; top: 15px;} .tc_bg { height: 100%; background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; width: 100%; z-index: 0;} .tc.act .tc_bg{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; transition:.5s; } .s_tt{ text-align: center; margin-bottom:2rem;} .s_tt h3{ font-size: 1.875rem; color: #252525; font-weight: bold; padding-bottom:.7rem;} .s_tt h3 span{ font-size: 1.25rem; color: #eee!important; font-family: play-bold; text-transform: uppercase; display: inline-block; margin-left: .5rem;} .s_tt i{ display: block; width: 190px; height: 5px; margin: 0 auto; margin-top: 1.25rem; background: url(../image/btxian.png) center no-repeat; background-size: cover;} .chanpinbj{ width: 100%; padding:4rem 0 2.5rem 0;background: url(../image/s_area_bg.jpg) left top no-repeat; background-size:100%;} .s_fuwu{ width: 100%; padding:4rem 0 2.5rem 0;background:#F3F4F4 url(../image/huanbao02_bg.jpg) center no-repeat; background-size:100%;} .s_fuwu .slick-arrow{ z-index:99; position:absolute; top:50%; opacity:1; margin-top: -1.5rem; display:block; width:55px; height: 55px; background-size:contain !important;} .s_fuwu .slick-prev{ left:-3.125rem;background:url(../image/licheng_left.png) left center no-repeat; transition:300ms;-webkit-transition:300ms;} .s_fuwu .slick-next{ right:-3.125rem; background:url(../image/licheng_right.png) right center no-repeat; transition:300ms;-webkit-transition:300ms;} .s_fuwu .slick-prev:hover{ background:url(../image/licheng_left_on.png) left center no-repeat; } .s_fuwu .slick-next:hover{ background:url(../image/licheng_right_on.png) right center no-repeat; } .s_news{ width: 100%; overflow: hidden; padding-top:6.375rem; overflow: hidden; padding-bottom: 3.75rem; border-bottom: 1px solid #e5e5e5;background: url(../image/huanbao02_bg.jpg) center no-repeat; background-size: cover; background-attachment: fixed;} .s_news .s_tt{ text-align:center; margin-bottom: 0; position: relative;} .s_news .hd{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.875rem;} .s_news .hd:before{ content: ""; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: #e5e5e5; z-index: -1;} .s_news .hd ul{ margin-bottom: 1rem;} .s_news .hd ul li{ float: left;} .s_news .hd ul li a{ font-size: 1.375rem; color: #252525; white-space: nowrap; font-weight: bold; padding-left: 2.375rem; position: relative; padding-right: 1rem; } .s_news .hd ul li.slick-current a{ color: #3f7bc5;} .s_news .hd ul li.slick-current a:before{ content: ""; display: inline-block; width: 1.3125rem; height: 20px; background: url(../image/news_ico.png) center no-repeat; background-size: contain; position: absolute; left: .5rem; top: 50%; margin-top: -10px;} .s_news .huodong{ display: flex;} .btn_arr{ display: block; width: 5rem; height: 2.5rem; line-height: 2.375rem; overflow: hidden; position: relative; border: 1px solid #cdcdcd; border-radius: 1.25rem; -webkit-border-radius: 1.25rem; -moz-border-radius: 1.25rem; -ms-border-radius: 1.25rem; -o-border-radius: 1.25rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .btn_arr font{ display: block; width: 100%; height: 100%; line-height: 2.375rem; text-align: center; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .btn_arr font:nth-child(1){ left: -50px;} .btn_arr font:nth-child(2){ left:0;} .btn_arr font svg path{ fill:#b8b8b8; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .btn_arr font svg{ display: inline-block; width: 20px; height: 20px; vertical-align: middle;} .btn_arr:hover{ background: #66b72e; border: 1px solid #66b72e;} .btn_arr:hover font:nth-child(1){ left:0;} .btn_arr:hover font:nth-child(2){ left:50px;} .btn_arr:hover font svg path{ fill:#fff;} .s_coop{ padding:3.75rem 0; width: 100%; overflow: hidden;} .s_coop ul{ margin: 0 -.9375rem; margin-top: -2rem;} .s_coop ul li{ padding: 0 .9375rem; margin-top: 2rem;} .s_coop ul li a{ display: block; border:1px solid #d6d6d6; position: relative; overflow: hidden; height: 5rem; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .s_coop ul li .pic{ display: flex; align-items: center; justify-content: center; height: 100%;} .s_coop ul li .pic img{ max-width: 70%; max-height: 4.5rem;} .s_coop ul li .txt{ position: absolute; left: 0; top: 0; width: 100%; height: 0; display: flex; align-items: center; justify-content: center; background: rgba(61, 117, 192,.89); color: #fff; opacity: 0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .s_coop ul li:hover .txt{ opacity: 1; height: 100%; top: auto; bottom: 0;} .s_coop .slick-arrow{ z-index:99; position:absolute; top:50%; opacity:1; margin-top: 15px; display:block; width:8px; height: 15px; background-size:contain !important;} .s_coop .slick-prev{ left:-3.125rem;background:url(../image/s_fuwu_left.png) left center no-repeat; transition:300ms;-webkit-transition:300ms;} .s_coop .slick-next{ right:-3.125rem; background:url(../image/s_fuwu_right.png) right center no-repeat; transition:300ms;-webkit-transition:300ms;} .s_coop .slick-prev:hover{ background:url(../image/s_fuwu_left_on.png) left center no-repeat; } .s_coop .slick-next:hover{ background:url(../image/s_fuwu_right_on.png) right center no-repeat; } #foot{ background: #333333; padding:2.5rem 0; color: #fff; border-top:5px solid #0089D4;} #foot .m{ display: flex;} #foot .left{ flex-shrink: 0;} #foot .right{ padding-left: 20.625rem; flex-grow:1; display: flex; flex-direction: column; justify-content: space-between; } .foot_lianxi{} .foot_tel{ margin-bottom: .75rem;} .foot_tel p{ font-size: 1rem; color: #fff; font-weight: bold;} .foot_tel p img{ width: 1rem; margin-right: .625rem;} .foot_tel h6 p{ font-size: 2.5rem; color:#0089D4;font-family: "Barlow Condensed Medium";} .foot_lianxi .txt{ font-size: .9375rem; color: rgba(255,255,255,.5); line-height: 1.875rem;margin-bottom: 2.5rem;} .foot_lianxi ul{ } .foot_lianxi ul li{ float: left; margin-right: 1.5rem;} .foot_lianxi ul li img{ width: 5.9375rem; height: 5.9375rem;} .foot_lianxi ul li p{ text-align: center; font-size: .875rem; color: rgba(255,255,255,.5); margin-top: .625rem;} .foot_nav{ overflow: hidden; display: flex; justify-content: space-between;} .foot_nav dl{ float: left;} .foot_nav dl dt{ font-size: 1rem; font-weight: bold; margin-bottom: 1.25rem;} .foot_nav dl dd{ font-size: .9rem; line-height: 2.125rem; color: rgba(255,255,255,.5); transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .foot_nav dl dd:hover{ color: #0075C0;} .foot_bot{ padding: .5rem 2.5rem; width: 100%; background: #0075C0; display: flex; justify-content: space-between; flex-wrap: wrap; border-radius: 23px; -webkit-border-radius: 23px; -moz-border-radius: 23px; -ms-border-radius: 23px; -o-border-radius: 23px; } .foot_bot .copyright{ line-height: 1.875rem; font-size: .8rem; color: rgba(255,255,255,.8); text-align:center;} .foot_link{ float: right; line-height: 1.875rem; position: relative; } .foot_link .hd{ cursor: pointer; font-size: .875rem;} .foot_link .bd{ position: absolute; bottom:calc(100% + .5rem); left: 0; width: 100%; background: #464646; padding: 1rem 1.25rem; font-size: .875rem; line-height: 1.5rem} .foot_link .bd a{ display: block; margin-bottom: .5rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .foot_link .bd a:hover{ color: #0075C0;} /*内页banner*/ .n_banner {width: 100%; text-align:center; overflow:hidden;} .n_banner div.pic{ width: 100%; height:24.6875rem; position: relative;} .n_banner .txt{ margin-top:80px; color:#fff; width: 100%; height: 100%; text-align:center; display: flex; align-items: center; justify-content: center;} .n_banner .txt b{ font-size:2rem; font-weight:normal;} .n_title {padding: 0;position: relative; background:#fff;border-bottom: #e3e6ea 1px solid;} .n_title .m { position: relative; } .n_nav { position: relative; } .n_nav a {display: inline-block;height: 5rem;font-size: 1.125rem; font-weight: normal; float: left;line-height: 5rem;margin-right: 4.5rem; color: #252525;text-align: center;box-sizing: border-box;position: relative;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;} .n_nav a strong {display: block; position: relative;z-index: 4;height: 75px;line-height: 75px; font-weight: normal; } .n_nav a:before {content: "";width: 0;height: 2px;position: absolute; bottom:0; left: 0; background: #0075C0;transition: 0.3s ease-in-out; opacity: 0;} .n_nav .on:before, .n_nav a:hover:before { width: 100%; opacity: 1;} .n_nav .on strong, .n_nav a:hover strong{ color: #0075C0; font-weight: bold;} .layui-col-md4 { height: 5rem } .position {line-height: 5rem;left: 0;bottom: 0;font-size: .9375rem;color: #747679;display: flex;align-items: center;} .position img{ vertical-align: middle; margin-bottom: 0; margin-right: 10px;} .position span, .position a, .position i {font-size: .8125rem;color: #828386;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;} .position i {margin: 0px 10px;font-style: normal;width: 4px;height: 6px;background: url(../image/position_ico.png) center no-repeat;font-size: 0;display: inline-block;vertical-align: middle;} .position em { color: #fb2002;font-style: normal;font-size: .8125rem;} .position a:hover {color: #fb2002;} .n_main_box .main_box { width: 1200px; height: 80px; position: relative; margin: 0 auto; } #n_main{ background: #eff2f7;} a{ cursor: pointer;} .n_about{ padding:3rem 0; width: 100%; overflow: hidden; } .n_about .m{ display: flex; align-items: center;} .n_about .left{ max-width: 964px; padding-right: 4.375rem;} .n_about .right{ width: 39.6875rem; flex-shrink: 0;} .n_about .pic{ position: relative;} .n_about .pic img{ height: 100%;} .n_about .pic .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .n_about .pic .mask .btn_play{ width: 3rem; height: 3rem; display: block;} .n_about .txt{} .n_about .tt{ margin-bottom:2.375rem;} .n_about .tt span{ color: #373737; font-family: "Barlow Condensed"; text-transform: uppercase; letter-spacing: 3px;} .n_about .tt p{ font-size:1.275rem; color: #fb2002; font-family: "Barlow Condensed Bold"; text-transform: uppercase;} .n_about .tt p b{ color: #0075C0;font-size:2.275rem;} .n_about .tt h3{ font-size: 1.625rem; color: #272727; font-weight: bold; margin-top: 1.5rem;} .n_about .tt i{ display: inline-block; vertical-align: middle; width: 17px; height: 3px; background: #0067C4; margin-right: 15px; } .n_about .con{ font-size: 1rem; color: #767676; line-height: 2.5rem;} .n_about .con img{border-radius: 2rem; border:0px solid #fff;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); margin-left:2rem; margin-bottom:1rem;} /*====移动端导航====*/ #m_n_nav{background: #0075C0;display: none;line-height: 50px;position: relative;z-index: 99; width: 100%;} #bnt_back{position:absolute;left: 1rem;top:0;} #bnt_back svg{fill: #fff;height: 30px;vertical-align: middle;width: 26px;} #m_n_nav i{} #m_n_nav h1{font-size: 14px;color: #fff;text-align: center;margin: 0;line-height: 50px;} #bnt_sub_nav{position: absolute;right: 1rem;top: 0;cursor: pointer;color: #fff;font-size: 18px;} #bnt_sub_nav svg{fill: #fff;height: 30px;vertical-align: middle;width: 19px;} #bnt_sub_nav img{ display: block; height: 15px; } #bnt_sub_nav.on img{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);} #sub_nav_content{background: #f0f3f5; display: none; box-shadow: 0 0 5px rgb(153 153 153 / 34%); z-index: 9;} #sub_nav_content ul{ padding: 10px;} #sub_nav_content ul li { display: block; line-height: 28px; margin: 1rem 0;} #sub_nav_content ul li a{ display:block; border-left:2px solid #0075C0; height:30px; line-height: 30px; font-size: 14px; padding-left: 10px; color: #535455;} #sub_nav_content ul li.on a{color: #0075C0;} #sub_nav_content dl{font-size:0;overflow: hidden;background: #fff;padding: 10px 0; margin: 0;} #sub_nav_content dt{position:relative;background:#fff;z-index: 999;width: 33.333333%;display: inline-block;margin-bottom: 0;float: left;text-align: center;} #sub_nav_content dt a{margin:0 2px;display:block;color:#5b5349;line-height: 30px;font-size:13px; vertical-align: top;} #sub_nav_content dt a strong{ font-weight: 400;} #sub_nav_content dt a i{position: absolute;right: 15px;top: 0;opacity:0;filter:alpha(opacity=0);display: none;} #sub_nav_content dt a{} #sub_nav_content dt.title{background:#fafafb;} #sub_nav_content dt.title i{ opacity:1;filter:alpha(opacity=100);} #sub_nav_content dt.title_on { background:#fafafb;} #sub_nav_content dt.title_on a{ color: #0075C0; border-top:1px solid #fff;} #sub_nav_content dt.title_on a i{ color: #0075C0; } #sub_nav_content dt.last a{border-top:1px solid #f8f8f8;} #sub_nav_content dt.on a,#sub_nav_content dt.title_on a{color: #0075C0;} #sub_nav_content dd{ display:none;} #sub_nav_content dd .box{padding:0px 0px 0px 0px;} #sub_nav_content dd a{ padding:0 25px; line-height:30px;border-top:1px solid #e7e7e7;font-size:12px;color:#5b5349;display:block;height:30px;} #sub_nav_content dd a.on{ color: #0075C0;} .subnav{ margin-top:2rem; overflow: hidden; margin-bottom: 2.125rem;} .subnav ul{ text-align: center;} .subnav ul li{ position:relative; display: inline-block; margin-bottom: 1rem;} .subnav ul li a{ display:block; width:9.375rem; height:2.8125rem; line-height:2.6875rem; border-radius:2rem; transition:.5s; text-align:center; border:1px solid #d9d9d9; font-size:1rem; font-weight: bold; color:#5a5a5a; margin:0 1.25rem; position:relative; z-index:1; overflow:hidden;} .subnav ul li a:before{ content:""; width:0; height:100%; display:block; background:#fb2002; transition:.5s; position: absolute; z-index:-1; top:0; right:0;} .subnav ul li:hover a,.subnav ul li.on a{ border:1px solid #fb2002; color: #fff;} .subnav ul li:hover a:before,.subnav ul li.on a:before{ width:100%; right:auto; left:0;} .n_zizhi{ width: 100%; padding-bottom: 3.75rem; overflow: hidden; background: url(../image/n_zizhi_bg.jpg) center top no-repeat; background-size: cover;} .zizhi_list{} .zizhi_list ul{ margin-top:1rem;} .zizhi_list ul li{ width: 25%; float: left; margin-top: 3rem;} .zizhi_list ul li a{} .zizhi_list ul li .pic{ width: 245px; height: 349px; margin: 0 auto; background: #fff;} .zizhi_list ul li .pic img{ width: 100%; height: 100%; object-fit: contain;} .zizhi_list ul li .desk{ width: 100%; height: 50px; margin: 0 auto; margin-top: -1rem; background: url(../image/zizhi_bg.png) center no-repeat; background-size: contain !important;} .zizhi_list ul li p{ text-align: center; font-size: 1.125rem; font-weight: bold; color: #252525; line-height: 2rem;} /*翻页*/ .page { text-align:center; margin-top:1.55rem; font-size: 0;} .page li{ display:inline-block; list-style: none; } .page a{ padding:0 10px; min-width: 35px; line-height: 33px; height: 35px; display:inline-block; border: 1px solid #d1d3d8; border-radius: 22px; margin:0 7px; color:#868686; text-transform: capitalize; font-size:.875rem; -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out; -o-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out; transition: all 0.36s ease-in-out; -webkit-border-radius: 22px; -moz-border-radius: 22px; -ms-border-radius: 22px; -o-border-radius: 22px; } .page .on{ background:#005BAC; color:#fff; border:1px solid #005BAC; } .page a:hover{ background:#005BAC; color:#fff; text-decoration:none; border:1px solid #005BAC;} .page span{ padding:0 .25rem; line-height: 33px; height: 35px; display: inline-block; border: 1px solid #d1d3d8;transition: all 0.36s ease-in-out; border-radius: 22px; -webkit-border-radius: 22px; -moz-border-radius: 22px; -ms-border-radius: 22px; -o-border-radius: 22px; } .page span a{ border: 0 !important; background: none !important; height: 33px;} .page span:hover{ background:#005BAC; color:#fff; text-decoration:none; border:1px solid #005BAC;} .page span:hover a{color:#fff;} .n_video{ padding-top: 3.125rem; padding-bottom: 3.75rem; width: 100%; overflow: hidden; } .video_list{} .video_list ul{ margin: 0 -1.25rem; margin-top: -1.75rem;} .video_list ul li{ width: 25%; float: left; margin-top: 1.75rem; padding: 0 1.25rem;} .video_list ul li a{ display: block;} .video_list ul li .img{ position: relative;} .video_list ul li .img img{} .video_list ul li .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .video_list ul li .mask .ico_play{ width: 3rem; height: 3rem; display: block; background: url(../image/play.png) center no-repeat; background-size: contain;} .video_list ul li p{ text-align: center; font-weight: bold; font-size: 1rem; padding-top: .875rem; color: #404040;} video{ object-fit: cover;} .video_slide{ overflow: hidden; margin-bottom: 3.75rem;} .video_slide .left{ float: left; width: calc(100% - 25.375rem); padding-right: 2.5rem; position: relative;} .video_slide .left .video-js{ padding-top: 56%; height: 0;} .video_slide .right{ width: 25.375rem; float: right; background: #fff; padding-bottom: 1.5rem;} .video_slide .hd{ height: 3.625rem; } .video_slide .hd ul{ overflow: hidden;} .video_slide .hd ul li{ width: 33.333%; float: left;} .video_slide .hd ul li a{ font-size: 1rem; line-height: 3.625rem; color: #404040; font-weight: bold; display: block; text-align: center; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .video_slide .hd ul li.slick-current a{ color: #fff; background: #0075C0;} .video_slide .hd ul li.on a{ color: #fff; background: #0075C0;} .video_slide .bd{ padding: 1.75rem 1.25rem 0;} .video_slide .bd ul li{ margin-bottom: 2.25rem;} .video_slide .bd ul li a{ display: block;} .video_slide .bd ul li .img{ position: relative;} .video_slide .bd ul li .img img{} .video_slide .bd ul li .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .video_slide .bd ul li .mask .ico_play{ width: 3rem; height: 3rem; display: block; background: url(../image/play.png) center no-repeat; background-size: contain;} .video_slide .bd ul li p{ text-align: center; font-weight: bold; font-size: 1rem; padding-top: .875rem; color: #404040;} .video_slide .txt{ display: block; height: 34px; margin: 0 1.25rem; line-height: 34px; text-align: center; background: #fb2002; color: #fff;} .video_slide .vjs-poster{ display: none;} .video_slide .bd ul li .mask:before{ content: ""; display: block; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 0; background: rgba(115, 197, 43,.9); transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .video_slide .bd ul li:hover .mask:before{ height: 100%; top: 0; bottom: auto;} .video_slide .bd ul li .on p{ color: #fb2002;} .video_slide .bd ul li .on .mask{ opacity: 0;} .n_licheng{ padding-top: 4.25rem; padding-bottom: 9rem; background: url(../image/licheng_bg.jpg) center bottom no-repeat;} .n_licheng .hd{ overflow: hidden; width: 100%; margin-bottom: 2rem;} .n_licheng .hd .tt{ float: left;} .n_licheng .hd .tt span{ font-size: 2rem; color: #fb2002; font-family: Roboto-Light;} .n_licheng .hd .tt h3{ font-size: 1.625rem; color: #434343; margin-top: .75rem;} .n_licheng .hd .arrowbox{ float: right;} .n_licheng .slick-arrow{ display: inline-block; border-radius:50%; cursor:pointer; width: 3.4375rem; height: 3.4375rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_licheng .slick-prev2{ background: url(../image/licheng_left.png) center no-repeat; background-size: contain !important; margin-right: .75rem;} .n_licheng .slick-next2{ background: url(../image/licheng_right.png) center no-repeat; background-size: contain !important;} .n_licheng .slick-prev2:hover{ background: url(../image/licheng_left_on.png) center no-repeat; } .n_licheng .slick-next2:hover{ background: url(../image/licheng_right_on.png) center no-repeat; } .n_licheng .bd{ position: relative;} .licheng_slide{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .licheng_slide .m{ height: 100%;} .licheng_slide ul{ height: 100%;} .licheng_slide ul li{ float: left; width: 13%; position: relative; height: 100%; transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; } .licheng_slide ul li .txt{ position: absolute; padding-left: 24px;} .licheng_slide ul li .txt .year{ font-size: 2rem; margin-bottom: 7px; color: #0075C0; font-family: "Barlow Condensed Medium"; transform:translateY(50px); opacity: 0; transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; -webkit-transform:translateY(50px); -moz-transform:translateY(50px); -ms-transform:translateY(50px); -o-transform:translateY(50px); } .licheng_slide ul li .txt .con{ font-size: .9375rem; line-height: 1.625rem; color: #626262; width: 20rem; transform:translateY(50px); opacity: 0; transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; -webkit-transform:translateY(50px); -moz-transform:translateY(50px); -ms-transform:translateY(50px); -o-transform:translateY(50px); } .licheng_slide ul li .txt:before{ content: ""; background: #fff; display: block; width: 11px; height: 11px; position: absolute; z-index: 99; left: 0; top: 1rem; border: 2px solid #fb2002; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .licheng_slide ul li .txt:after{ content: ""; display: block; width: 1px; height: 100%; position: absolute; left: 0; top: 1rem; background: #e2e2e2; left: 5px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .licheng_slide ul li:nth-child(1) .txt{ bottom: 40%; padding-bottom: 4rem;} .licheng_slide ul li:nth-child(2) .txt{ top: 56%; padding-top: 5rem;} .licheng_slide ul li:nth-child(3) .txt{ bottom: 40%; padding-bottom: 6rem;} .licheng_slide ul li:nth-child(4) .txt{ top: 65%; padding-top: 5rem;} .licheng_slide ul li:nth-child(5) .txt{ bottom: 30%; padding-bottom: 13rem;} .licheng_slide ul li:nth-child(6) .txt{ top: 65%; padding-top: 5rem;} .licheng_slide ul li:nth-child(7) .txt{ bottom: 50%; padding-bottom: 13rem;} .licheng_slide ul li:nth-child(even) .txt:before{ top: 6rem;} .licheng_slide ul li:nth-child(even) .txt:after{ height: 6rem;} .licheng_slide .slick-list,.licheng_slide .slick-track{ height: 100%; overflow: visible;} .n_licheng ul.slick-current li .year{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } .n_licheng ul.slick-current li .con{ opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } .licheng_slide_wap{ display: none; } .licheng_slide_wap ul{ } .licheng_slide_wap ul li{ position: relative;transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; } .licheng_slide_wap ul li .txt{ padding-left: 24px; position: relative;} .licheng_slide_wap ul li .txt .year{ font-size: 2rem; color: #0075C0; margin-bottom: 5px; font-family: "Barlow Condensed"; transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; } .licheng_slide_wap ul li .txt .con{ font-size: .9375rem; line-height: 1.625rem; padding-bottom: 2rem; color: #626262; transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; } .licheng_slide_wap ul li .txt:before{ content: ""; display: block; width: 11px; height: 11px; position: absolute; left: 0; top: 1rem; border: 2px solid #fb2002; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .licheng_slide_wap ul li .txt:after{ content: ""; display: block; width: 1px; height: 100%; position: absolute; left: 0; top: 1rem; background: #e2e2e2; left: 5px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .n_tt{ text-align: center; margin-bottom: 2.5rem;} .n_tt h3{ text-align: center; font-size: 1.5rem; color: #35383a; margin-bottom: 6px; font-weight: bold;} .n_tt span{ font-size: 1.25rem; color: #b6b6b6; font-family: Roboto; text-transform: uppercase;} .n_tt p{ font-size: .9375rem; color: #a0a2a4; margin-top: 1rem; line-height: 1.5;} .n_tt i{ display: block; width: 25px; height: 1px; background: #fb2002; margin: 0 auto; margin-top: 1.75rem;} .n_wenhua{ padding-top: 3.75rem; padding-bottom: 3.75rem;} .n_wenhua .box1{} .n_wenhua .box1 ul{ overflow: hidden; margin: -5px;} .n_wenhua .box1 ul li{ width: 39.5%; float: left; padding: 5px; transition: .5s ease-out; -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -ms-transition: .5s ease-out; -o-transition: .5s ease-out; } .n_wenhua .box1 ul li .box{ height: 22.5rem; background: #f8f8f8; position: relative; z-index: 1; padding: 3.125rem; } .n_wenhua .box1 ul li .box:before{ content: ""; display: block; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 100%; background: url(../image/wenhua.jpg) center no-repeat; opacity: 0; visibility: hidden; transition: .9s; -webkit-transition: .9s; -moz-transition: .9s; -ms-transition: .9s; -o-transition: .9s; } .n_wenhua .box1 ul li:nth-child(2) .box:before{ background: url(../image/wenhua02.jpg) center no-repeat;} .n_wenhua .box1 ul li .ico{ margin-bottom: 1.375rem; width: 2rem; height: 2rem;} .n_wenhua .box1 ul li .ico img{ transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_wenhua .box1 ul li .ico img.img02{ display: none;} .n_wenhua .box1 ul li h3{ font-size: 1.125rem; color: #5a5a5a; margin-bottom: 4px; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_wenhua .box1 ul li span{ font-size: 1rem; color: #5a5a5a; display: block; margin-bottom: 3.75rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_wenhua .box1 ul li p{ font-size: 1.125rem; line-height: 1.5rem; color: #5a5a5a; font-weight: bold; position: relative; display: inline-block; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_wenhua .box1 ul li i{ display: block; width: 21px; height: 1.25rem; position: absolute; background: url(../image/wh_yinhao02.png) center no-repeat; background-size: contain; right: -3rem; border-bottom: -1.625rem;} .n_wenhua .box1 ul li.on{ width: 60.5%; } .n_wenhua .box1 ul li.on i{ background: url(../image/wh_yinhao01.png) center no-repeat;} .n_wenhua .box1 ul li.on .box:before{ opacity: 1; visibility: visible;} .n_wenhua .box1 ul li.on .ico img.img01{ display: none;} .n_wenhua .box1 ul li.on .ico img.img02{ display: block;} .n_wenhua .box1 ul li.on h3{ color: #fff;} .n_wenhua .box1 ul li.on span{ color: #fff; } .n_wenhua .box1 ul li.on p{ color: #fff; } .n_wenhua .box2{} .n_wenhua .box2 ul{ overflow: hidden; margin: -5px;} .n_wenhua .box2 ul li{ width: 33.333%; float: left; padding: 5px; transition: .5s ease-out; -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -ms-transition: .5s ease-out; -o-transition: .5s ease-out; } .n_wenhua .box2 ul li .box{ height: 20.5rem; background: #f8f8f8; position: relative; z-index: 1; padding: 3.125rem; } .n_wenhua .box2 ul li .ico{ margin-bottom: 1.375rem; width: 2rem; height: 2rem;} .n_wenhua .box2 ul li .ico img{ transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_wenhua .box2 ul li .ico img.img02{ display: none;} .n_wenhua .box2 ul li h3{ font-size: 1.125rem; color: #5a5a5a; margin-bottom: 4px; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_wenhua .box2 ul li span{ font-size: 1rem; color: #5a5a5a; display: block; margin-bottom: 3.75rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_wenhua .box2 ul li p{ font-size: 1.125rem; position: relative; display: inline-block; color: #5a5a5a; line-height: 1.5rem; font-weight: bold; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_wenhua .box2 ul li i{ display: block; width: 21px; height: 1.25rem; position: absolute; background: url(../image/wh_yinhao02.png) center no-repeat; background-size: contain; right: -3rem; border-bottom: -1.625rem;} .n_wenhua .box2 ul li.on i{ background: url(../image/wh_yinhao01.png) center no-repeat;} .n_wenhua .box2 ul li.on .ico img.img01{ display: none;} .n_wenhua .box2 ul li.on .ico img.img02{ display: block;} .n_wenhua .box2 ul li.on h3{ color: #fff;} .n_wenhua .box2 ul li.on span{ color: #fff; } .n_wenhua .box2 ul li.on p{ color: #fff; } .n_wenhua .box2 ul li:hover p{ transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .n_wenhua .box2 ul li:nth-child(1) .box{ background: #0075C0;} .n_wenhua .box2 ul li:nth-child(3) .box{ background: #fb2002;} .n_wenhua ul li:hover .ico{ animation: jello 1s; -webkit-animation: jello 1s; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @-moz-keyframes jello { from, 11.1%, to { -moz-transform: none; transform: none } 22.2% { -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } .n_huodong{ width: 100%; overflow: hidden; background: url(../image/n_huodong_bg.jpg) center no-repeat; background-size: cover; padding: 3.875rem 0;} .n_huodong ul{ margin: 0 -.9375rem;} .n_huodong ul li{ padding: 0 .9375rem;} .n_huodong ul li a{} .n_huodong ul li .img{} .n_huodong ul li .img img{} .n_huodong ul li .txt{ padding-top: 2rem;} .n_huodong ul li .txt h5{ font-size: 1.125rem; color: #333333; font-weight: bold; margin-bottom: 1rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huodong ul li .txt p{ font-size: .9375rem; line-height: 1.5rem; height: 3rem; overflow: hidden; color: #7b7b7b; margin-bottom: .875rem;} .n_huodong ul li .txt span{ font-size: .875rem; color: #111111; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huodong ul li .txt span:hover{ color: #fb2002;} .n_huodong .slick-arrow{ z-index:99; position:absolute; top:38%; opacity:1; display:block; width:2.375rem; height: 2.375rem; background-size:contain !important;} .n_huodong .slick-prev{ left:-5.625rem;background:url(../image/huodong_left.png) left center no-repeat; transition:300ms;-webkit-transition:300ms;} .n_huodong .slick-next{ right:-5.625rem; background:url(../image/huodong_right.png) right center no-repeat; transition:300ms;-webkit-transition:300ms;} .n_huodong .slick-prev:hover{ background:url(../image/huodong_left_on.png) left center no-repeat; } .n_huodong .slick-next:hover{ background:url(../image/huodong_right_on.png) right center no-repeat; } .n_huodong ul li:hover h5{ color: #0075C0;} .n_news{ width: 100%; overflow: hidden; padding-top: 3.125rem; padding-bottom:3.75rem;} .n_news ul{ margin: 0 -.9375rem; margin-top: -2rem; overflow: hidden;display: flex; flex-wrap: wrap; justify-content: space-between;} .n_news ul li{ padding: 0 .9375rem; background:#fff; margin-top:2rem; overflow: hidden; width: calc(50% - 2rem); float:left; } .n_news ul li a{ position: relative; z-index: 1; } .n_news ul li .img{ width: 13.25rem; height: 13.75rem; float: left; margin-right: 2rem; flex-shrink: 0; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; position: relative; } .n_news ul li .img img{/* object-fit: cover;*/ width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.3s ease;} .n_news ul li .txt{ height: 13.75rem; display: flex; align-content: center; flex-wrap: wrap; position: relative;} .n_news ul li .txt:before{ content: ""; display: block; width: 100%; height: 1px; background: #e5e5e5; position: absolute; left: 0; bottom: 0;} .n_news ul li .txt:after{ content: ""; display: block; width: 0; height: 1px; background: #1f77e4; position: absolute; left: 0; bottom: 0; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } .n_news ul li .txt span{ font-size: .75rem; font-family: Bahnschrift; color: #595959; display: block; width: 100%; margin-bottom: 1rem;} .n_news ul li .txt span:before{ content: ""; display: inline-block; width: .9375rem; height: 2px; background: #fb2002; vertical-align: middle; margin-right: .5rem;} .n_news ul li h2{ font-size: 1.125rem; color: #464646; font-weight: bold; margin-bottom: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_news ul li p{ font-size: .9375rem; color: #737373; line-height: 1.5rem; height: 3rem; overflow: hidden;} .n_news ul li .btn_xx{ height: 2rem; line-height: 2rem; font-size: .875rem; color: #939498; margin-top: 1.25rem;transition: .5s;} .n_news ul li .btn_xx svg.ico_see{ width: 1.25rem; height: 20px; display: inline-block; vertical-align: middle; margin-right: 1rem;} .n_news ul li .btn_xx svg.icon{ width: 8px; height: 8px; display: inline-block; vertical-align: middle; margin-left: 5px;} .n_news ul li .btn_xx svg path{ transition:.5s; -webkit-transition:.5s; -moz-transition:.5s; -ms-transition:.5s; -o-transition:.5s;} .n_news ul li a:hover h2{ color:#0075C0;} .n_news ul li a:hover .btn_xx{ color:#0075C0;} .n_news ul li a:hover svg path{ fill:#0075C0;} .n_news ul li a:hover .txt:after{ width: 100%;} .ar_fot{ border: 1px solid #e5e5e5; overflow: hidden; margin-top: 3rem;} .ar_fot ul{ display: flex; align-items: center; justify-content: space-between; position: relative;} .ar_fot ul li{ float: left; height: 4.25rem; line-height: 4.25rem; padding: 0 2rem;} .ar_fot ul li:nth-child(2){ text-align: right;} .ar_fot ul li a{ font-size: 1rem; display: flex; align-items: center; justify-content: space-between; color: #959595;} .ar_fot ul li svg{ width: 1rem; height: 1rem; margin: 0 .5rem;} .ar_fot ul:before{ content: ""; display: block; width: 2px; height: 15px; position: absolute; top: 50%; margin-top: -7.5px; left: 50%; background: #cccccc;} svg{ display: inline-block; vertical-align: middle;} .ar_fot a svg path{ fill:#888888} .ar_fot a:hover{ color: #0075C0;} .ar_fot a:hover svg path{ fill: #0075C0;} #n_news_xq{ width: 100%; padding: 3.75rem 0; position: relative; z-index: 99;} #n_news_xq .left_con{ /*width: calc(100% - 27.25rem); float: left;*/ background: #fff; padding: 2.5rem 2.5rem 3.5rem;} #n_news_xq .right_con{ width: 24.25rem; float: right; position: sticky; top: 9rem;} .social-share{ display: inline-block;} .ar_title{ border-bottom: 1px solid #e5e5e5; padding-bottom: 1.5rem; margin-bottom: 2.25rem;} .ar_title h3{ font-size: 1.7rem; color: #000000; line-height: 2rem; margin-bottom: 1.125rem;} .ar_title h4 span{ margin-right: 1.5rem; font-size: .875rem; color: #7d7d7d; line-height: 2rem; display: inline-block;} .ar_title:before{ content: ""; display: block; width: 64px; height: 2px; background: #FFCC00; position: absolute; bottom: 0; left:50%; margin-left:-30px;} .join .ar_title:before{ width: 2.75rem;} .join .ar_title h4 span{ font-size: 1.0625rem; color: #828282;} .ar_article{ font-size:1rem; color:#7d7d7d; line-height:1.875rem; text-align:justify; } .ar_article h4{ font-size: 1.125rem;margin-bottom: 2rem;} .ar_article p{font-size:1rem;color:#7d7d7d;line-height:1.875rem; padding-bottom:1.75rem;} .ar_article p:last-child{ padding-bottom: 0;} .ar_article strong{ font-weight:bold;} .ar_article td,.ar_article th{ padding:15px; border: 1px solid #c6c5c5; font-size:1rem !important; font-family: "微软雅黑","Microsoft YaHei", sans-serif !important;} .ar_article td *,.ar_article th *{ font-size:0.95rem !important; font-family: "微软雅黑","Microsoft YaHei", sans-serif !important;} .ar_article td p,.ar_article th p{ padding-bottom:0; margin-bottom:0; text-align: inherit;} .ar_article img{ max-width:100%;} .ar_article a{ color:#363636;} .ar_article h1,.ar_article h2,.ar_article h3,.ar_article h4,.ar_article h5,.ar_article h6,.ar_article b{ font-weight:bold; color:#232323;} .ar_article ul li, .ar_article ol li{ padding-bottom:0 !important; margin-bottom:0 !important; margin-left:2rem;} .ar_article ul li p, .ar_article ol li p{ padding-bottom:0; margin-bottom:3px !important; } .ar_article ul, .ar_article ol{ margin-bottom:15px;} .hot_tt{ padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #d7d9de;} .hot_tt h3{ font-size: 1.5rem; color: #454545; margin-bottom: .5rem;} .hot_tt span{ font-size: 1.5rem; color: #c6c6c6; font-family: play; text-transform: uppercase;} .news_tuijian{} .news_tuijian ul{} .news_tuijian ul li{ margin-bottom: 1.25rem;} .news_tuijian ul li a{ display: flex; align-items: center;} .news_tuijian ul li .time{ font-family: Bebas; color: #fb2002; margin-right: 1.25rem; font-size: .75rem; width: 4rem; height: 4rem; background: #f4f7f6; flex-shrink: 0; display: flex; align-items: center; justify-content: center;} .news_tuijian ul li .time span{ font-size: 1.5rem;display: block; margin-bottom:4px;} .news_tuijian ul li p{ font-size: 1rem; line-height: 1.625rem; color: #787878; max-height: 3.25rem; overflow: hidden; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .news_tuijian ul li:hover p{ color: #000;} .n_lianxi{ padding: 3.75rem 0;} .n_lianxi .box1{ overflow: hidden; display: flex; align-items: center; justify-content: space-between;} .n_lianxi .box1 .left{ float: left; position: relative; z-index: 1;} .n_lianxi .box1 .left:before{ content: ""; display: block; position: absolute; background: url(../image/lianxi_bg.jpg) center no-repeat; z-index: -1; width: 520px; height: 371px; right: -180px; bottom: -20px;} .n_lianxi .box1 .right{ float: right; width: 530px; background: #fff; position: relative; z-index: 9; padding: 1.5rem 1.5rem; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .n_lianxi .box1 .left .tt{ margin-bottom: 1.75rem;} .n_lianxi .box1 .left .tt h3{ font-size: 1.5rem; color:#35383a; } .n_lianxi .box1 .left .tt span{ font-size: 1.25rem; color: #b6b6b6; font-family: Roboto; text-transform: uppercase; display: block; margin-top: .5rem; margin-bottom: 1.5rem; } .n_lianxi .box1 .left .tt i{ display: block; width: 25px; height: 1px; background: #fb2002;} .n_lianxi .box1 .left dl{ margin-top: 1.5rem; margin-bottom: 0;} .n_lianxi .box1 .left dl dt{ font-size: 1.125rem; color: #0075C0; font-weight: bold; margin-bottom: 11px; padding-left: 2.25rem; position: relative;} .n_lianxi .box1 .left dl dt img{ position: absolute; left: 0; top: .25rem;} .n_lianxi .box1 .left dl dd{ font-size: 1rem; color: #676767; font-weight: bold; padding-left: 2.25rem;} .n_lianxi .box1 .left dl .tel{ font-size: 2.125rem; color: #3a3939; font-family: "Barlow Condensed SemiBold";} .n_lianxi .ewm{ display: inline-block;padding-left: 22px;} .n_lianxi .ewm .box{ float: left; display: flex; flex-direction: row-reverse; align-items: center; margin-left: 2.5rem; margin-top: 1rem;} .n_lianxi .ewm img{ border: 1px solid #ddd; width: 109px; height: 109px;} .n_lianxi .ewm p{ text-align: center; width: 1rem; font-size: .875rem; color: #282828; margin-right: .5rem; } .n_lianxi .flex{ display: flex; align-items: flex-end;} .n_lianxi form{} .n_lianxi form .group{ margin-bottom: 22px; width: 48.5%;} .n_lianxi form .group.textarea{ width: 100%;} .n_lianxi form .group.yzm{ width: calc(100% - 169px);} .n_lianxi form .group.btnbox{ width: 150px;} .n_lianxi form .span{ display: block; font-size: 1rem; height: 17px; color: #3d3d3d; margin-bottom: 1rem;} .n_lianxi form .span i{ color: #e73728;} .n_lianxi form .input{ height: 50px; border: 1px solid #d5d5d5; width: 100%; padding: 0 18px; font-size: .8125rem; color: #666;} .n_lianxi form textarea{ border: 1px solid #d5d5d5; height: 6.75rem; line-height: 1.7; width: 100%; padding: 10px 18px; font-size: .8125rem; color: #666; font-family: "微软雅黑";} .n_lianxi form .btn_submit{ height: 50px; width: 155px; background: #0075C0; color: #fff; border: 0; outline: 0; float: right;} ::-webkit-input-placeholder{color:#afafaf;} ::-moz-placeholder{ /* Mozilla Firefox 19+ */color:#afafaf;} ::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */color:#afafaf;} ::-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#afafaf;} :focus::-webkit-input-placeholder {color: transparent;} :focus:-moz-placeholder { color: transparent;} :focus::-moz-placeholder { color: transparent;} :focus:-ms-input-placeholder {color: transparent;} #miso_map{ height: 28rem; margin-top: 3.125rem; border: 1px solid #e1e1e1;} .n_branch{ padding-bottom:3.75rem;} .n_branch .tt{ font-size:28px; color:#3f3f40; font-weight:bold; margin-bottom:40px;} .n_branch ul{ margin:-15px; overflow: hidden;} .n_branch ul li{ width: 50%; float: left;} .n_branch ul li .box{ background:#f5f5f5 url(../image/branch_bg.jpg) center no-repeat; background-size: cover; padding:2.5rem 1.75rem; margin:1.25rem; position:relative; z-index:1;} .n_branch ul li h6{ font-size:1.25rem; line-height:1.875rem; max-height:3.75rem; overflow:hidden; color:#484848; font-weight:bold;transition:.7s;} .n_branch ul li i{ display:block; width:25px; height:2px; background:#fb2002; margin-top:13px; margin-bottom:14px;transition:.7s;} .n_branch ul li .txt{ font-size:1rem; line-height:1.875rem; overflow:hidden; color:#787878;transition:.7s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:5; overflow: hidden; text-overflow: ellipsis; line-clamp:5; } .n_branch ul li .btn_map{ font-size:.875rem; color:#686868; padding-top:5px; margin-left: -3px; height:22px; line-height: 22px; display:block; display: flex; align-items: center; margin-top:12px;transition:.7s;} .n_branch ul li .btn_map svg{ margin-right: .375rem;} .n_branch ul li font{ font-size:42px; color:#e1e1e1; position:absolute; right:55px; bottom:0; font-weight:bold;transition:.7s;} .n_branch ul li:hover .btn_map{ color: #0075C0;} .n_branch ul li:hover .btn_map svg path{ fill: #0075C0;} .n_branch .slick-dots{ bottom:-35px;} .n_branch .slick-dots li{ width:10px; height:10px; border:1px solid #a5a5a5; border-radius:5px; opacity:1; transition:.3s; padding:0; font-size:0; box-sizing:border-box; } .n_branch .slick-dots li.slick-active{ width:32px; border:1px solid #d2b068; background:none; } .n_branch .slick-dots li button:before{ display:none;} .n_join{ width: 100%; padding-top: 3.75rem; padding-bottom: 3.75rem; overflow: hidden;} .n_join ul{ margin: 0 -1.25rem; margin-top: -1.875rem; display: flex; flex-wrap: wrap;} .n_join ul li{ width: 50%; float: left; padding: 0 1.25rem; margin-top: 1.875rem;} .n_join ul li a{ display: block; border: 1px solid #e3e6ea; padding: 1.75rem; height: 100%;} .n_join ul li h5{ font-size: 1.25rem; color: #000000; font-weight: bold; padding-left: 2.5rem; background: url(../image/ico_join.png) left center no-repeat; background-size: 1.4375rem;} .n_join ul li .yaoqiu{ margin-top: 1.125rem; margin-bottom: 1.625rem; font-size: 0;} .n_join ul li .yaoqiu span{ display: inline-block; line-height: 1.875rem; margin-right: 2.5rem; font-size: .9375rem; color: #828282; } .n_join ul li .fuli{ font-size: 0; margin-bottom: 2.25rem;} .n_join ul li .fuli span{ display: inline-block; margin-right: .875rem; margin-bottom: .5rem; border: 1px solid #e4e7ea; font-size: 13px; color: #969696; text-align: center; padding: 10px 1rem; min-width: 6.125rem; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .n_join ul li:hover .btn_arr{ background: #66b72e; border: 1px solid #66b72e;} .n_join ul li:hover .btn_arr font:nth-child(1){ left:0;} .n_join ul li:hover .btn_arr font:nth-child(2){ left:50px;} .n_join ul li:hover .btn_arr font svg path{ fill:#fff;} .btn_join{ position: relative; z-index:0; -webkit-transition: all .5s; transition: all .5s; background: #0075C0; color: white; text-align: center; border-radius: 1.5rem; line-height: 45px; font-size: 1rem; width: 12rem; height: 45px; display: block; margin-top: 2rem; text-transform: uppercase; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; -ms-border-radius: 1.5rem; -o-border-radius: 1.5rem; overflow: hidden; } .btn_join img{ width: 16px; margin-right: .5rem;} .btn_join:before { content: ""; display:block; width:0; height: 100%; background:#1758b0; position: absolute; z-index:-1; right: 0; top: 0; -webkit-transition: .38s cubic-bezier(.4,0,.2,1); transition: .38s cubic-bezier(.4,0,.2,1); border-radius: 3px; } .btn_join:hover:before { width:100%; right:auto; left:0; } .join_tuijian{} .join_tuijian ul{} .join_tuijian ul li{} .join_tuijian ul li a{ display: flex; align-items: center; justify-content: space-between; height: 3rem;} .join_tuijian ul li h5{ font-size: 1rem; color: #787878; padding-left: 2rem; line-height: 3rem; background: url(../image/ico_join01.png) left center no-repeat; background-size: 1.375rem !important; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .join_tuijian ul li .btn_arr{ width: 44px; height: 20px;} .join_tuijian ul li .btn_arr svg{ height: 10px;} .join_tuijian ul li .btn_arr svg path{ fill:#5f5f5f;} .join_tuijian ul li:hover h5{ background: url(../image/ico_join.png) left center no-repeat; } .join_tuijian .btn_arr:hover{ background: #0075C0; border: 1px solid #0075C0;} .join_tuijian ul li:hover .btn_arr{ background: #0075C0; border: 1px solid #0075C0;} .join_tuijian ul li:hover .btn_arr font:nth-child(1){ left:0;} .join_tuijian ul li:hover .btn_arr font:nth-child(2){ left:50px;} .join_tuijian ul li:hover .btn_arr font svg path{ fill:#fff;} .n_tt2{ margin-bottom: 2rem;} .n_tt2 h3{ font-size: 1.5rem; color: #35383a;} .n_tt2 span{ font-size: 1.25rem; color: #b6b6b6; font-family: Roboto; text-transform: uppercase; display: block; margin-top: .625rem; margin-bottom: 1.5rem;} .n_tt2 i{ display: block; width: 25px; height: 1px; background: #fb2002;} .n_jiaru{ padding-top: 4.375rem; padding-bottom: 5rem; width: 100%; overflow: hidden;} .n_jiaru .m{ display: flex; align-items: flex-end;} .n_jiaru .left{ flex-shrink: 0; width: 36.5rem;} .n_jiaru .right{ padding-left: 10rem; width: calc(100% - 36.5rem);} .n_jiaru .txt{ font-size: 1rem; color: #5b5b5b; line-height: 1.875rem;} .n_jiaru .swiper{ position: relative; margin-top: 4.5rem;} .n_jiaru .swiper .box{ padding-bottom: 3.5rem;} .n_jiaru .swiper .box .tt{ position: relative; padding-top: 10px;} .n_jiaru .swiper .box .tt font{ font-size: 3.125rem; position: absolute; right: 1rem; top: 10px; color: #e4e6ea; font-family: Roboto-Light; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_jiaru .swiper .box span{ display: block; font-size: 1.0625rem; color: #b3b3b3; font-family: Roboto; text-transform: uppercase; margin-bottom: .5rem; transition: .5s;} .n_jiaru .swiper .box h5{ font-size: 1.25rem; color: #333333; color: #333333; margin-bottom: 1.5rem; display: flex; align-items: center; transition: .5s;} /* .n_jiaru .swiper .box:hover span{ color: #0075C0;} .n_jiaru .swiper .box:hover h5{ color: #0075C0;} */ .n_jiaru .swiper .box:hover font{ transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .n_jiaru .swiper .box h5 img{ margin-right: 9px;} .n_jiaru .swiper .box:hover h5 img{ animation: jello 1s; -webkit-animation: jello 1s; } .n_jiaru .swiper .box p{ font-size: 1rem; line-height: 1.875rem; color: #8d8d8d;} .n_jiaru .swiper .box i{ display: block; width: 21px; height: 1.25rem; background: url(../image/n_jiaru_yinhao.png) center no-repeat; margin-top: 2.5rem; margin-bottom: 2rem;} .n_jiaru .swiper-container-horizontal>.swiper-scrollbar{ overflow: hidden; background: none !important;} .n_jiaru .swiper-container-horizontal>.swiper-scrollbar:before{ content: ""; display: block; width: 100%; height: 1px; background: #dad9df; position: absolute; left: 0; top: 50%; margin-top: -.5px;} .n_jiaru .swiper-scrollbar-drag{cursor: pointer !important; background: none !important;} .n_jiaru .swiper-scrollbar-drag:before{ content: ""; display: block; width: 1000px; height: 1px; background: #fb2002; position: absolute; right: 20px; top: 50%; margin-top: -.5px; z-index: 1;} .n_jiaru .swiper-scrollbar-drag:after{ content: ""; display: block; background: url(../image/huakuai.png) center no-repeat; width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index:2;} .n_jiaru .swiper .swiper-slide:nth-child(1) .box .tt font{ color: #c5d4e2;} .n_jiaru .swiper .swiper-slide:nth-child(2) .box .tt font{ color: #cbc5e2;} .n_jiaru .swiper .swiper-slide:nth-child(3) .box .tt font{ color: #e2dfc5;} .n_jiaru .swiper .swiper-slide:nth-child(4) .box .tt font{ color: #c5e2ca;} .n_jiaru .swiper .swiper-slide:nth-child(5) .box .tt font{ color: #dee2c5;} .n_jiaru .swiper .swiper-slide:nth-child(6) .box .tt font{ color: #e2c5c5;} .n_jiaru .swiper .swiper-slide:nth-child(7) .box .tt font{ color: #c5e2cf;} .n_shili{ padding: 6.875rem 0; background: url(../image/n_shili_bg.jpg) center no-repeat; background-size: cover; width: 100%; overflow: hidden;} .n_shili .txt{ max-width: 740px;} .n_shili .con{ font-size: 1rem; line-height: 1.875rem; color: #5b5b5b; margin-bottom: 7rem;} .n_shili ul{ display: flex; justify-content: space-between;} .n_shili li{ float: left;} .n_shili li a { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 7.25rem; height: 7.25rem; padding-top: 8px; position: relative; z-index:1; margin: 0px auto; color:#333; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s; } .n_shili li a:before{ content:""; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #d8d8d8; background: rgba(255, 255, 255, .1); display: block; position: absolute; z-index:-1; left: 0px; top: 0px; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s;} .n_shili li .ico{ position: relative; width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; display: block; z-index: 2; } .n_shili li:hover .ico{ animation: jello 1s; -webkit-animation: jello 1s; } .n_shili li .name{ font-size: 1rem; color: #5b5b5b; display: block; margin-bottom: 5px; } .n_rencai{ padding: 5rem 0; width: 100%; overflow: hidden; background: #eff2f7;} .n_rencai .n_tt2{ text-align: center;} .n_rencai .n_tt2 i{ margin: 0 auto;} .n_rencai .n_tt2 p{ margin-top: 1.25rem; font-size: 1rem; line-height: 1.875rem;} .n_rencai ul{ margin: 0 -1.25rem;} .n_rencai ul li{ float: left; padding: 0 1.25rem;} .n_rencai ul li .box{ background: url(../image/rencai_li.png) center top no-repeat; position: relative; z-index: 1; background-size: 100% !important; display: block; padding:1.25rem 0 0; transition: .3s; overflow: hidden; border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px; -ms-border-radius: 9px; -o-border-radius: 9px; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_rencai ul li .pic{ width: 100%; overflow: hidden; padding: 0 1rem; margin-bottom: 2.25rem;} .n_rencai ul li .pic img{ width: 100%; height: 100%;} .n_rencai ul li .txt{ padding: 0 1rem 2rem; background: #fff; position: relative; z-index: 1; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_rencai ul li h5{ font-size: 1rem; color: #303030; font-weight: bold; margin-bottom: 1.25rem; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_rencai ul li i{ display: block; width: 25px; height: 1px; background: #fb2002; margin-bottom: 1.25rem; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_rencai ul li p{ font-size: 1rem; color: #585858; line-height: 1.5rem; height: 6rem; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_rencai ul li span{ font-size: 7.5rem; color: #f7f7f7; font-family: Roboto-Light; position: absolute; z-index: -1; right: 0; bottom: -3.25rem; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .n_rencai ul li:hover .box{ background: url(../image/rencai_li_on.png) center top no-repeat; } .n_rencai ul li:hover .txt{ background: #0075C0;} .n_rencai ul li:hover h5{ font-size: 1rem; color: #ffffff;} .n_rencai ul li:hover i{ display: block; width: 25px; height: 1px; background: #fff;} .n_rencai ul li:hover p{ font-size: 1rem; color: #fefefe;} .n_rencai ul li:hover span{ color: #4d7ec4;} .n_rencai ul li:hover .box{ transform: rotateY(20deg); -webkit-transform: rotateY(20deg); -moz-transform: rotateY(20deg); -ms-transform: rotateY(20deg); -o-transform: rotateY(20deg); } .miaodian{ position: relative; top: -4rem;} .n_peiyu{ width: 100%; overflow: hidden; padding: 3.75rem 0;} .n_peiyu .m{ display: flex;} .n_peiyu .left{ width: 27.75rem; float: left; position: relative;} .n_peiyu .right{ width: calc(100% - 27.75rem); float: right;} .n_peiyu .right .pic{ height: 100%; width: 100%; height: 637px;} .n_peiyu .right .pic img{ object-fit: cover; height: 100%; width: 100%;} .n_peiyu .hd{} .n_peiyu .hd ul{ height: 100%;} .n_peiyu .hd ul li{ background: #fff url(../image/peiyu_txt.jpg) center bottom no-repeat; background-size: 100%; padding: 4.375rem 3.5rem; height: 637px;text-align: justify;} .n_peiyu .hd ul li .box{ padding-bottom: 12rem;} .n_peiyu .hd ul li .box .tt{ color: #35383a; font-size: 1.5rem; margin-bottom: 3rem;} .n_peiyu .hd ul li .box .con{ font-size: 1rem; line-height: 1.875rem; color: #979797;} .n_peiyu .slick_arrow_right{ position:absolute; left:1.875rem; bottom:8rem;display: none;} .n_peiyu .slick_arrow_right .slick-arrow{ z-index:99; float:left; display:block; font-size:0; cursor:pointer; width: 3.125rem; height: 3.125rem; background-size: contain !important; margin-right: 1.25rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_peiyu .slick_arrow_right .slick-prev2{ background: url(../image/peiyu_left.png) center no-repeat; } .n_peiyu .slick_arrow_right .slick-next2{ background: url(../image/peiyu_right.png) center no-repeat; } .n_peiyu .slick_arrow_right .slick-prev2:hover{ background: url(../image/peiyu_left_on.png) center no-repeat; } .n_peiyu .slick_arrow_right .slick-next2:hover{ background: url(../image/peiyu_right_on.png) center no-repeat; } .n_huanjing{ padding: 3.75rem 0; padding-bottom: 3.75rem; overflow: hidden; width: 100%;} .n_huanjing ul{ display: flex; margin: 0 -.9375rem; margin-bottom: 3rem;} .n_huanjing ul li{ padding: 0 .9375rem; width: 25%; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huanjing ul li .box{ position: relative;} .n_huanjing ul li .img{ height: 31.875rem;} .n_huanjing ul li .img img{} .n_huanjing ul li .txt{ position: absolute; background: #fff; bottom: -2.375rem; left: 2.625rem; right: 2.625rem; padding: 1.25rem;} .n_huanjing ul li .tt1{ text-align: center;} .n_huanjing ul li .tt1.on{ opacity: 0; text-align: left; } .n_huanjing ul li .tt{ display: flex; justify-content: center; text-align: center; } .n_huanjing ul li .tt .ico{ width: 1.5rem; height: 1.5rem; display: none; opacity: 0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huanjing ul li .txt h5{ font-size: 1.125rem; color: #38383b; font-weight: bold; margin-bottom: 6px;} .n_huanjing ul li .txt span{ font-size: .875rem; color: #c6c6c6; text-transform: uppercase;} .n_huanjing ul .con{ margin-top: 1rem; font-size: 1rem; line-height: 1.625rem; height: 0; overflow: hidden; opacity: 0; transition: .5s; color: #a9a9a9; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huanjing ul li.on{ width: 50%;} .n_huanjing ul li.on .tt{ text-align: left; justify-content: space-between;} .n_huanjing ul li.on .tt .ico{ display: block; opacity: 1;} .n_huanjing ul li.on .con{ height: 3.25rem; opacity: 1; } .n_gongyi{ padding-top: 5.5rem; padding-bottom: 3.125rem; border-bottom: 1px solid #d7d9de;} .n_gongyi .flex{ position: relative; text-align: center;} .n_gongyi .flex .pic{ position: relative; display: inline-block;} .n_gongyi .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 25%; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column;} .n_gongyi .mask h6{ font-size: 1.625rem; font-family: "Barlow Condensed"; text-transform: uppercase; letter-spacing: .375rem;} .n_gongyi .mask h3{ font-size: 3.5rem; font-weight: bold; margin-bottom: 1rem;} .n_gongyi .mask p{ font-size: .8125rem; line-height: 1.375rem;} .n_gongyi .flex ul.ul_1{ text-align: right; } .n_gongyi .flex ul.ul_2{ text-align: left; } /* .n_gongyi ul.ul_1{ height: 590px;} .n_gongyi ul.ul_2{ height: 590px;} */ .n_gongyi ul li{position: absolute; } .n_gongyi ul li .line{position:absolute;width:100%;height: 1px;left: 0;bottom: -16px; background: #cfd1d9; transition:0.6s} .n_gongyi ul li .line:before{ content:""; position:absolute; right: -7px; top: -13px; width: 14px; height: 14px; border: #c2c4cc 2px solid; border-radius: 50%; transition:.5s ; -webkit-transition:.5s ; -moz-transition:.5s ; -ms-transition:.5s ; -o-transition:.5s ; } .n_gongyi ul li .line:after{ content:""; display: block; position:absolute; right: 0; top: 0; width: 0; height: 1px; background: #fb2002; transition:2s ; -webkit-transition:2s ; -moz-transition:2s ; -ms-transition:2s ; -o-transition:2s ; } .n_gongyi ul li h5{ font-size: 1.125rem; color: #212121; font-weight: bold; position: relative; overflow: visible; margin-bottom: 1.25rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_gongyi ul li h5 span{ position: absolute; right: -2rem; top: 0; display: block; max-width: 22px; max-height: 22px;} .n_gongyi ul li p{ font-size: 1rem; line-height: 1.875rem; color: #838383;} .n_gongyi ul.ul_2 li h5 span{ left: -2rem; right: 0;} .n_gongyi ul.ul_2 li .line:before{ left: -7px; right: auto;} .n_gongyi ul.ul_2 li .line:after{ left: 0; right: auto;} .n_gongyi ul li.li_1{bottom: 552px; right: 50%; margin-right: 256px; padding-right: 59px;} .n_gongyi ul li.li_2{bottom:129px; right: 50%; margin-right: 256px; padding-right: 120px;} .n_gongyi ul li.li_3{bottom: 552px; left: 50%; margin-left: 256px; padding-left: 59px;} .n_gongyi ul li.li_4{ bottom:129px; left: 50%; margin-left: 256px; padding-left: 120px;} .n_gongyi ul li.li_5{ text-align: center; width: 100%; position: static; max-width: 737px; margin: 0 auto;} .n_gongyi ul li.li_5 .line{ width: 0; position: relative; margin: 0 auto; margin-top: -10px; margin-bottom: 3rem;} .n_gongyi ul li.li_5 h5{ display: flex; flex-direction: row-reverse; width: fit-content; margin-left: auto; margin-right: auto;} .n_gongyi ul li.li_5 h5 span{ position: static; margin-right: 10px;} .n_gongyi ul li:hover h5{ color: #0075C0;} .n_gongyi ul li:hover span{ animation: jello 1s; -webkit-animation: jello 1s; } .n_gongyi ul li:hover .line{ } .n_gongyi ul li:hover .line:before{border: #fb2002 2px solid; } .n_gongyi ul li:hover .line:after{ width: 100%;} .circle { position: relative; z-index:999; } .circle img{ position: relative;} .circle span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 50%; background-color: rgba(113, 195, 43, 0.3); transform: scale(.5); -webkit-animation: circleScale 3s linear infinite; -moz-animation: circleScale 3s linear infinite; -ms-animation: circleScale 3s linear infinite; animation: circleScale 3s linear infinite; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); } .circle span:nth-of-type(2) { animation-delay: 1s; } .circle span:nth-of-type(3) { animation-delay: 2s; } @keyframes circleScale { 0% { opacity: 1; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); -o-transform: scale(.5); } 100% { opacity: 0; transform: scale(1.125); -webkit-transform: scale(1.125); -moz-transform: scale(1.125); -ms-transform: scale(1.125); -o-transform: scale(1.125); } } .circle a{ cursor:pointer; position:relative;} .n_gy_list{ padding-top: 3.75rem; padding-bottom: 3.75rem; overflow: hidden;} .n_gy_list .hd{ overflow: hidden; margin-bottom: 2.125rem; display:none;} .n_gy_list .hd ul{ text-align: center;} .n_gy_list .hd ul li{ position:relative; display: inline-block; margin:0 1rem; margin-bottom: 1rem;} .n_gy_list .hd ul li a{ display:block; min-width:14rem; height:2.8125rem; line-height:2.6875rem; padding: 0 3rem; border-radius:2rem; transition:.5s; text-align:center; border:1px solid #d9d9d9; font-size:1rem; color:#5a5a5a; font-weight: bold; position:relative; z-index:1; overflow:hidden;} .n_gy_list .hd ul li a:before{ content:""; width:0; height:100%; display:block; background:#fb2002; transition:.5s; position: absolute; z-index:-1; top:0; right:0;} .n_gy_list .hd ul li:hover a,.n_gy_list .hd ul li.on a{ border:1px solid #fb2002; color: #fff;} .n_gy_list .hd ul li:hover a:before,.n_gy_list .hd ul li.on a:before{ width:100%; right:auto; left:0;} .pic06 ul{ margin: 0 -.9375rem;} .pic06 ul li{ width: calc(25% - 30px); float: left; margin:15px; box-sizing: border-box; background:#fff;box-shadow: 0 0 5px rgb(73 66 66 / 10%); padding:10px 10px 30px 10px; text-align:center;} .pic06 ul li a{ display: block; position: relative;} .pic06 ul li .s_more{ margin-top:10px!important;} .pic06 ul li .img{ width: 100%; position: relative; aspect-ratio: 1.3/1; /* 保持正方形 */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .pic06 ul li .img img{ width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.3s ease;} .pic06 ul li .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(5, 73, 150, 0.83); text-align: center; opacity: 0;visibility:hidden ; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .pic06 ul li .mask h5{ font-size: 1.125rem; color: #fff; text-align: center; padding: 0 1rem; white-space: normal; line-height: 1.5; } .pic06 ul li .mask span{ font-size: 2rem; color: #fff; font-weight: lighter;} .pic06 ul li .txt{ text-align: center; padding-top: 5px; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .pic06 ul li .txt h5{ font-size: 1.125rem; color: #252525; font-weight: bold;} .pic06 ul li .txt p{ font-size:0.9rem; color: #252525; margin:1rem auto; background:#E1E1E1;border-radius:20px; line-height:2rem; width:8rem;} .pic06 ul li .box{transform:translateY(30px); transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; -webkit-transform:translateY(30px); -moz-transform:translateY(30px); -ms-transform:translateY(30px); -o-transform:translateY(30px); } .pic06 ul li:hover .mask{ opacity: 0; visibility: visible;} .pic06 ul li:hover .box{ transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .pic06 ul li:hover .txt h5{ color: #1F68AF;} .n_gy_list .pic06 ul li .txt{ padding-top:.7rem; padding-bottom:.3rem;} .n_gy_list .pic06 ul li .txt h5{ font-size: 1rem; color: #252525;} .n_gy_list .pic06 ul li:hover .txt h5{ color: #1F68AF;} .pic1 ul{ margin: 0 -.9375rem;} .pic1 ul li{ width: calc(25% - 30px); float: left; margin:15px; box-sizing: border-box; background:#fff;box-shadow: 0 0 5px rgb(73 66 66 / 10%); padding:10px 10px 30px 10px; text-align:center; border:1px solid #fff;} .pic1 ul li a{ display: block; } .pic1 ul li .s_more{ margin-top:10px!important;} .pic1 ul li .img{ width: 100%; position: relative; aspect-ratio: 1.3/1; /* 保持正方形 */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .pic1 ul li .img img{ width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.3s ease;} .pic1 ul li .txt{ text-align: center; padding-top: 5px;} .pic1 ul li .txt h5{ font-size: 1rem; color: #252525; padding:10px 0; line-height:22px; text-align:left!important; display: -webkit-box!important; height:60px; -webkit-box-orient: vertical!important; -webkit-line-clamp: 2!important; overflow: hidden; text-overflow: ellipsis!important; white-space: normal!important;} .pic1 ul li .txt p{ font-size:0.9rem; color: #252525; margin:1rem auto; background:#E1E1E1;border-radius:20px; line-height:2rem; width:8rem;} .pic1 ul li:hover{border:1px solid #ccc;} .shijian{display: flex; justify-content:left; color:#666; font-size:13px; line-height:20px;} .shijian img{ margin-right:10px;} .btn_load{ width: 70px; margin: 0 auto; text-align: center; color: #333; font-size: .9375rem; font-weight: bold; margin-top: 3rem; clear: both; cursor: pointer;} .btn_load p{ margin-top: 8px;} .btn_load svg{ width: 20px; height: 20px;} .btn_load:hover{ color: #0075C0;} .btn_load:hover svg path{ fill:#0075C0;} .n_huanwei01{ padding-top: 3.75rem; padding-bottom: 6rem; width: 100%; overflow: hidden;} .n_huanwei01 .m{ display: flex; align-items: center; justify-content: space-between;} .n_huanwei01 .left{ max-width: 42.5rem;} .n_huanwei01 .right{ flex-shrink: 0;} .n_huanwei01 .n_tt{ text-align: left;} .n_huanwei01 .n_tt h3{ text-align: left; font-weight: normal;} .n_huanwei01 .n_tt i{ margin-left: 0;} .n_huanwei01 .left .con{ font-size: 1rem; line-height: 1.875rem; color: #5b5b5b; min-height: 240px;} .n_huanwei01 .left .tt{ font-size: 1rem; color: #5b5b5b; line-height: 1.875rem; margin-top: 1.875rem; margin-bottom: 2rem;} .liucheng{ position: relative; z-index: 1; color: #fff; font-size: .9375rem; padding: 0 3rem 0 2.375rem; display: flex; justify-content: space-between; align-items: center;} .liucheng:before{ content: ""; display: block; width: 100%; background: #0075C0; position: absolute; left: 0; z-index: -1; top: 1rem; bottom: 1rem; border-radius: 2rem; -webkit-border-radius: 2rem; -moz-border-radius: 2rem; -ms-border-radius: 2rem; -o-border-radius: 2rem; } .liucheng img{ width: 1.75rem;} .n_pingtai{ position: relative; margin: 4rem 200px; margin-bottom: 40px;} .n_pingtai .txt{ position: absolute; text-align: center; left: 0; top: 0; width: 100%; height: 100%; color:#fff; display: flex; align-items: center; justify-content: center;} .n_pingtai .txt .ico{ margin-bottom: 1.125rem;} .n_pingtai .txt p{ font-size: 1.25rem; font-weight: bold;} .n_pingtai .ul .li{ position: absolute; display: flex; min-width: 260px;} .n_pingtai .ul .li p{ font-size: 1rem; color: #5b5b5b; margin: .75rem;} .n_pingtai .ul .li .ico{ width: 67px; height: 76px; flex-shrink: 0; background: url(../image/huanwei_6.png) center no-repeat; background-size: contain !important; transition: .5s; display: flex; align-items: center; justify-content: center; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_pingtai .ul .li .ico img{ transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; } .n_pingtai .ul .li:hover .ico{ background: url(../image/huanwei_6_on.png) center no-repeat;} .n_pingtai .ul .li:hover .ico img{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .n_pingtai .ul .li.li_1{ bottom: 100%; margin-bottom: -38px; flex-direction: column-reverse; justify-content: center; align-items: center; width: 100%;} .n_pingtai .ul .li.li_2{ left: 230px; top: 35px; align-items: center;} .n_pingtai .ul .li.li_3{left: 230px; bottom: 35px; align-items: center;} .n_pingtai .ul .li.li_4{ top: 100%; margin-top: -38px; flex-direction: column; justify-content: center; align-items: center; width: 100%;} .n_pingtai .ul .li.li_5{ right: 230px; bottom: 35px; align-items: center; flex-direction: row-reverse;} .n_pingtai .ul .li.li_6{ right: 230px; top: 35px; align-items: center; flex-direction: row-reverse;} .n_pingtai .pic{ width: 266px;} .n_pingtai .draw_h{} .n_pingtai.san .ul .li .ico{width: 51px;height: 58px; } .n_pingtai.san .ul .li.li_1{bottom: 100%;margin-bottom: 6px; } .n_pingtai.san .ul .li.li_2{left: 230px;top: -7px; } .n_pingtai.san .ul .li.li_3{left: 271px;bottom: 105px; } .n_pingtai.san .ul .li.li_4{top: 100%;margin-top: 2px; } .n_pingtai.san .ul .li.li_5{right: 270px;bottom: 100px; } .n_pingtai.san .ul .li.li_6{right: 230px;top: -14px; } .n_pingtai.san .ul .li.li_7{right: 230px;bottom: -3px; align-items: center; flex-direction: row-reverse; } .n_pingtai.san .ul .li.li_8{left: 230px;bottom: -3px; } .n_pingtai.san .draw_h{left: -25px; top: -25px;} .n_youshi{ background: #fff; padding-top: 3.75rem; padding-bottom: 3.75rem; width: 100%; overflow: hidden;} .n_youshi .m{ display: flex; justify-content: space-between;} .n_youshi .n_tt h3{ font-weight: normal;} .n_youshi .left{width: 100%;} .n_youshi .left ul{ display: flex; flex-flow: wrap; justify-content: space-between; } .n_youshi .left ul li{display: flex;margin-bottom: 2.5rem;width: 48%;} .n_youshi .left ul li span{ width: 80px; padding-left: 40px; font-size: 1.25rem; font-family: Roboto; padding-bottom: 1rem; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;} .n_youshi .left ul li span:before{ content: ""; display: block; width: 50%; position: absolute; z-index: -1; left: 0; top: 0; height: 100%; background: #fb2002; transform: skewY(-15deg); -webkit-transform: skewY(-15deg); -moz-transform: skewY(-15deg); -ms-transform: skewY(-15deg); -o-transform: skewY(-15deg); transform-origin: left; } .n_youshi .left ul li span:after{ content: ""; display: block; width: 50%; position: absolute; z-index: -1; left: 50%; top: 0; height: 100%; background: #85d541; transform: skewY(15deg); -webkit-transform: skewY(15deg); -moz-transform: skewY(15deg); -ms-transform: skewY(15deg); -o-transform: skewY(15deg); transform-origin: right; } .n_youshi .left ul li .txt{ background: #f8f8f8; flex-grow: 1; padding: 1.875rem 2rem;} .n_youshi .left ul li .txt h5{ font-size: 1rem; font-weight: bold; color: #383838; margin-bottom: .5rem;} .n_youshi .left ul li .txt p{ font-size: 1rem; line-height: 1.5rem; color: #5b5b5b;} .n_youshi .right{ width: 700px; max-width: 95%;} .n_youshi .left ul li:hover span:before{ background: #0075C0;} .n_youshi .left ul li:hover span:after{ background: #5e8fd1;} .n_youshi .left ul li:hover .txt{ background: #5e8fd1;} .n_youshi .left ul li:hover .txt h5{ color: #fff;} .n_youshi .left ul li:hover .txt p{ color: #fff;} .slide_car{ margin: 0 1rem;} .slide_car ul{} .slide_car ul li{ padding: 0 50px;} .slide_car ul li .box{ text-align: center;} .slide_car ul li .img{ overflow: hidden; } .slide_car ul li .txt{ display: flex; padding: 0 5%; } .slide_car ul li .txt p{ width: 50%; font-size: 1rem; color: #5b5b5b; margin-top: 1.625rem;} .slide_car .slick-arrow{ z-index:99; position:absolute; top:50%; opacity:1; margin-top: -15px; display:block; width:8px; height: 15px; background-size:contain !important;} .slide_car .slick-prev{ left:-1rem;background:url(../image/s_fuwu_left.png) left center no-repeat; transition:300ms;-webkit-transition:300ms;} .slide_car .slick-next{ right:-1rem; background:url(../image/s_fuwu_right.png) right center no-repeat; transition:300ms;-webkit-transition:300ms;} .slide_car .slick-prev:hover{ background:url(../image/s_fuwu_left_on.png) left center no-repeat; } .slide_car .slick-next:hover{ background:url(../image/s_fuwu_right_on.png) right center no-repeat; } .n_huanbao01{ padding-top: 3.75rem; padding-bottom: 6rem; width: 100%; overflow: hidden;} .n_huanbao01 .m{ display: flex; justify-content: space-between;} .n_huanbao01 .left{ max-width: 42.5rem; background: url(../image/huanbao_txt.jpg) left bottom no-repeat; padding-right: 2rem;} .n_huanbao01 .right{ flex-shrink: 0;} .n_huanbao01 .n_tt{ text-align: left;} .n_huanbao01 .n_tt h3{ text-align: left; font-weight: normal;} .n_huanbao01 .n_tt i{ margin-left: 0;} .n_huanbao01 .left .con{ font-size: 1rem; line-height: 1.875rem; color: #5b5b5b;} .n_huanbao01 .left .tt{ font-size: 1rem; color: #5b5b5b; line-height: 1.875rem; margin-top: 1.875rem; margin-bottom: 2rem;} .n_huanbao01 .right{ width: 42.5rem; max-width: 100%;} .n_huanbao01 .right .box{ position: relative;} .n_huanbao01 .right .box1{ position: relative; z-index: 3; margin-right: 80px; overflow: hidden;} .n_huanbao01 .right .box2{ position: absolute; top: 20px; bottom: 20px; left: 40px; right: 40px; z-index: 2; overflow: hidden;} .n_huanbao01 .right .box3{ position: absolute; top: 40px; bottom: 40px; left: 80px; right: 0; z-index: 1; overflow: hidden;} .n_huanbao01 .right .pic img{ width: 100%;} .n_huanbao01 .right .box2 .pic{ background: #000;} .n_huanbao01 .right .box2 .pic img{ opacity: .5;} .n_huanbao01 .right .box3 .pic{ background: #000;} .n_huanbao01 .right .box3 .pic img{ opacity: .3;} .n_huanbao02 .n_tt h3{ font-weight: normal;} .n_huanbao02{ width: 100%; padding-top: 4.375rem; padding-bottom: 5.625rem; overflow: hidden; background: #fff url(../image/huanbao02_bg.jpg) center bottom no-repeat; background-size: cover;} .n_huanbao02 .center{ width: 430px; height: 206px; margin: 0 auto; position: relative; flex-shrink: 0; margin: 2.5rem; margin-top: 0;} .n_huanbao02 .center .box{ width: 187px; height: 136px; position: absolute; background: url(../image/sanjiao01.png) center no-repeat; padding-bottom: 1rem; background-size: contain !important; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huanbao02 .center .box span{ font-size: 1.25rem; color: #0075C0; font-family: Roboto; display: block; margin-bottom: .75rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huanbao02 .center .box .ico{ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_huanbao02 .center .box .ico .img02{ display: none;} .n_huanbao02 .center .box1{ left: 0; top: 0;} .n_huanbao02 .center .box2{ right: 0; top: 0;} .n_huanbao02 .center .box3{ left: 50%; margin-left: -93.5px; bottom: 0; background: url(../image/sanjiao02.png) center no-repeat; padding-top: 1rem;} .n_huanbao02 .center .box.on{ background: url(../image/sanjiao01_on.png) center no-repeat;} .n_huanbao02 .center .box.box3.on{ background: url(../image/sanjiao02_on.png) center no-repeat;} .n_huanbao02 .center .box.on span{ color: #fff;} .n_huanbao02 .center .box.on .ico{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .n_huanbao02 .center .box.on .ico .img01{ display: none;} .n_huanbao02 .center .box.on .ico .img02{ display: block;} .n_huanbao02 .flex{ display: flex; align-items: center;} .n_huanbao02 .txt{ width: 100%; flex-grow: 1;} .n_huanbao02 .txt h5{ font-size: 1.125rem; color: #1a1a1a; margin-bottom: 1rem;} .n_huanbao02 .txt p{ font-size: 1rem; color: #717171; line-height: 1.5rem;} .n_huanbao02 .txt1{ text-align: right;} .n_huanbao02 .txt3{ text-align: center;} .n_gufei01{ padding-top: 3.75rem; padding-bottom: 6rem; width: 100%; overflow: hidden;} .n_gufei01 .m{ display: flex; align-items: flex-end; justify-content: space-between;} .n_gufei01 .left{ max-width: 44.5rem; border-bottom: 1px solid #d7d9de; padding-bottom: 4.375rem; margin-right: 2rem;} .n_gufei01 .right{ flex-shrink: 0;} .n_gufei01 .n_tt{ text-align: left;} .n_gufei01 .n_tt h3{ text-align: left;font-weight: normal;} .n_gufei01 .n_tt i{ margin-left: 0;} .n_gufei01 .left .con{ font-size: 1rem; line-height: 1.875rem; color: #5b5b5b;} .n_gufei01 .left .tt{ font-size: 1rem; color: #5b5b5b; line-height: 1.875rem; margin-top: 1.875rem; margin-bottom: 2rem;} .n_gufei02{ width: 100%; overflow: hidden; } .n_gufei02 .m{ display: flex;} .n_gufei02 .left{ width: 27.75rem; float: left; position: relative;} .n_gufei02 .right{ width: calc(100% - 27.75rem); float: right;} .n_gufei02 .right .pic{ height: 100%; width: 100%; height: 637px;} .n_gufei02 .right .pic img{ object-fit: cover; height: 100%; width: 100%;} .n_gufei02 .hd{} .n_gufei02 .hd ul{ height: 100%;} .n_gufei02 .hd ul li{ background: #0075C0; background-size: 100%; padding: 4.375rem 1.875rem; height: 637px;} .n_gufei02 .hd ul li .box{ padding-bottom: 12rem;} .n_gufei02 .hd ul li .box .tt{ margin-bottom: 3.25rem;} .n_gufei02 .hd ul li .box .tt i{ display: block; width: 25px; height: 1px; background: #fff;} .n_gufei02 .hd ul li .box .tt span{ font-size: .875rem; font-family: Roboto; text-transform: uppercase; color: rgba(255, 255, 255, .4); display: block; margin-top: 1.75rem; margin-bottom: .75rem;} .n_gufei02 .hd ul li .box .tt h3{ font-size: 2.125rem; color: #fff;} .n_gufei02 .hd ul li .box .con{ font-size: 1rem; line-height: 1.875rem; color: #fff; color: rgba(255, 255, 255, .8);} .n_gufei02 .slick_arrow_right{ position:absolute; left:1.875rem; bottom:8rem;} .n_gufei02 .slick_arrow_right .slick-arrow{ z-index:99; float:left; display:block; font-size:0; cursor:pointer; width: 3.125rem; height: 3.125rem; background-size: contain !important; margin-right: 1.25rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_gufei02 .slick_arrow_right .slick-prev2{ background: url(../image/gufei_left.png) center no-repeat; } .n_gufei02 .slick_arrow_right .slick-next2{ background: url(../image/gufei_right.png) center no-repeat; } .n_gufei02 .slick_arrow_right .slick-prev2:hover{ background: url(../image/gufei_left_on.png) center no-repeat; } .n_gufei02 .slick_arrow_right .slick-next2:hover{ background: url(../image/gufei_right_on.png) center no-repeat; } .n_gufei03{ padding-top: 3.75rem; padding-bottom: 6rem; width: 100%; overflow: hidden;} .n_gufei03 .m{ display: flex; align-items: flex-start; justify-content: space-between;} .n_gufei03 .right{ max-width: 42.5rem; padding-bottom: 4.375rem; padding-top: 3rem; margin-left: 2rem;} .n_gufei03 .left{ flex-shrink: 0;} .n_gufei03 .n_tt{ text-align: left;} .n_gufei03 .n_tt h3{ text-align: left; } .n_gufei03 .n_tt i{ margin-left: 0;} .n_gufei03 .right .con{ font-size: 1rem; line-height: 1.875rem; color: #5b5b5b;} .n_gufei03 .right .tt{ font-size: 1rem; color: #5b5b5b; line-height: 1.875rem; margin-top: 1.875rem; margin-bottom: 2rem;} .n_gufei04{ padding-top: 3.75rem; padding-bottom: 6rem; width: 100%; overflow: hidden; background: #fff;} .n_gufei04 .m{ display: flex; align-items: flex-end; justify-content: space-between;} .n_gufei04 .left{ max-width: 422px; } .n_gufei04 .right{ flex-shrink: .2; margin-left: 2rem; } .n_gufei04 .n_tt{ text-align: left;} .n_gufei04 .n_tt h3{ text-align: left;} .n_gufei04 .n_tt i{ margin-left: 0;} .n_gufei04 .left .con{ font-size: 1rem; line-height: 1.875rem; color: #5b5b5b;} .n_gufei04 .left .tt{ font-size: 1rem; color: #5b5b5b; line-height: 1.875rem; margin-top: 1.875rem; margin-bottom: 2rem;} .n_gufei04 .tt{ border-bottom: 1px solid #e5e5e5;} .n_gufei04 .tt h3{ font-size: 1rem; color: #5b5b5b;} .n_gufei04 .tt h3 span{ font-size: 8.125rem; font-family: Roboto; color: #f2f3f7; font-style: italic;} .gufeijishu{ width: 1000px; max-width: 100%;} .gufeijishu ul{} .gufeijishu ul li{ width: 20%; float: left; position: relative; overflow: hidden;} .gufeijishu ul li .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .gufeijishu ul li .mask p{ width: 1.375rem; font-size: 1.375rem; color: #fff; font-weight: bold;} .gufeijishu ul li .txt{ position: absolute; left: 0; top: 100%; width: 100%; height: 100%; display: flex; opacity: 0;font-size: 1rem; line-height: 1.875rem; text-align: justify; padding: 1.75rem 1.5rem; align-items: center; justify-content: center; background: #0075C0; color: #fff; transition: .7s; -webkit-transition: .7s; -moz-transition: .7s; -ms-transition: .7s; -o-transition: .7s; } .gufeijishu ul li .txt h5{ font-size: 1.375rem; color: #fff; font-weight: bold; margin-bottom: 1.25rem;} .gufeijishu ul li .txt p{ font-size: 1rem; line-height: 1.875rem; text-align: justify;} .gufeijishu ul li .txt span{ display: block; width: 21px; height: 1.25rem; background: url(../image/wh_yinhao01.png) center no-repeat; background-size: contain; float: right; margin-top: 3.5rem;} .gufeijishu ul li:hover .txt{ top: 0; opacity: 1;} .n_gufei05{ padding-top: 4.375rem; width: 100%; overflow: hidden;} .n_gufei05 ul{ margin: 0 2rem; } .n_gufei05 ul li{ padding:4rem 0; } .n_gufei05 ul li .box{ display:block; position:relative; text-align:center; border-radius:50%; overflow: hidden; width:10.625rem; height:10.625rem; margin: 0 auto; transition: .5s; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .n_gufei05 ul li .img{ overflow:hidden; border-radius:50%; width:10.625rem; height:10.625rem; margin:0 auto; transition:.7s; position:relative; } .n_gufei05 ul li .mask{ opacity: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fb2002; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: .5s; -webkit-transition:; -moz-transition:; -ms-transition:; -o-transition:; } .n_gufei05 ul li .img img{ border-radius:50%;} .n_gufei05 ul li .mask .ico{ margin-bottom: .9375rem;} .n_gufei05 ul li.slick-center .box{ transform:scale(1.5); -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); -o-transform:scale(1.5); } .n_gufei05 ul li.slick-center .mask{ opacity: 0; transform: scale(.3); -webkit-transform: scale(.3); -moz-transform: scale(.3); -ms-transform: scale(.3); -o-transform: scale(.3); } .n_gufei05 ul li .txt{ display: none;} .n_gufei05 ul li.slick-center .txt{ padding-top:5rem;} .n_gufei05 .txtbox{ text-align: center; border-bottom: 1px solid #e3e6ea; padding-bottom: 4rem; margin-top: 1.25rem;} .n_gufei05 .txtbox h5{ font-size: 1.125rem; color: #313131; font-weight: bold; margin-bottom: 1rem;} .n_gufei05 .txtbox p{ font-size: 1rem; color: #949494; line-height: 1.7;} .n_gufei05 .slick-arrow{ z-index:99; position:absolute; top:50%; opacity:1; display:block; width:8px; height: 15px; background-size:contain !important;} .n_gufei05 .slick-prev{ left:-2rem;background:url(../image/s_fuwu_left.png) left center no-repeat; transition:300ms;-webkit-transition:300ms;} .n_gufei05 .slick-next{ right:-2rem; background:url(../image/s_fuwu_right.png) right center no-repeat; transition:300ms;-webkit-transition:300ms;} .n_gufei05 .slick-prev:hover{ background:url(../image/s_fuwu_left_on.png) left center no-repeat; } .n_gufei05 .slick-next:hover{ background:url(../image/s_fuwu_right_on.png) right center no-repeat; } .n_gufei03 .left{ } .gufei_lc{ position: relative; margin:55px 140px 55px 100px; z-index: 1;} .circle02{ transform: scale(.79); -webkit-transform: scale(.79); -moz-transform: scale(.79); -ms-transform: scale(.79); -o-transform: scale(.79); } .circle03{ transform: scale(.57); -webkit-transform: scale(.57); -moz-transform: scale(.57); -ms-transform: scale(.57); -o-transform: scale(.57); } .draw_h{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: .6;} .draw_h{ display:block; border-radius: 50%; text-align: center; } .draw_h:before{ content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; /* border: 1px solid #cfdbed; */ border-radius: 50%;} svg.drawcircle{position:absolute;top:0;left:0;overflow: inherit;display: block;pointer-events: none;} svg.drawcircle circle { fill: none; box-sizing:border-box; stroke-width: 1; stroke: none; stroke-dasharray: 0 , 1770; stroke-dashoffset:1770; transition: all .3s linear 0s; } .aos-animate .gufei_lc .draw_h svg.drawcircle circle { stroke:#0075C0; stroke-dasharray:1770 , 0; stroke-dashoffset:1770; } .aos-animate .gufei_lc .draw_h.circle01 svg.drawcircle circle{ -webkit-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 0s; transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 0s; -moz-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 0s; -ms-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 0s; -o-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 0s; } .aos-animate .gufei_lc .draw_h.circle02 svg.drawcircle circle{ -webkit-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 2s; transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 2s; -moz-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 2s; -ms-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 2s; -o-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 2s; } .aos-animate .gufei_lc .draw_h.circle03 svg.drawcircle circle{ -webkit-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 4s; transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 4s; -moz-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 4s; -ms-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 4s; -o-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1) 4s; } .gufei_lc .center{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center;} .gufei_lc .center img{} .gufei_lc_pic{ width: 562px; max-width: inherit;} .gufei_lc .center h4{ font-size: 1.25rem; color: #fff; font-weight: bold; margin-top: .875rem;} .gufei_lc ul{} .gufei_lc ul li{ position: absolute; display: flex; cursor: pointer;} .gufei_lc ul li .txt{ padding: 10px;} .gufei_lc ul li .ico{width: 74px;flex-shrink: 0;} .gufei_lc ul li .ico img{ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .gufei_lc ul li span{ font-size: 1rem; color: #0075C0; font-family: Bahnschrift; } .gufei_lc ul li p{ white-space: nowrap; font-size: 14px; color: #5b5b5b; margin-top: 4px;} .gufei_lc ul li.li_1{right: 501px;top: 109px;flex-direction: row-reverse;align-items: center;text-align: right;} .gufei_lc ul li.li_2{right: 339px;top: -27px;flex-direction: row-reverse;align-items: center;text-align: right;} .gufei_lc ul li.li_3{left: 366px;top: -25px;align-items: center;} .gufei_lc ul li.li_4{left: 509px;top: 149px;align-items: center;align-items: center;} .gufei_lc ul li.li_5{left: 493px;top: 363px;align-items: center;} .gufei_lc ul li.li_6{left: 347px;top: 495px;align-items: center;} .gufei_lc ul li.li_7{right: 402px;top: 487px;flex-direction: row-reverse;align-items: center;text-align: right;} .gufei_lc ul li.li_8{right: 522px;top: 318px;flex-direction: row-reverse;align-items: center;text-align: right;} .gufei_lc ul li.li_9{right: 400px;top: 225px;flex-direction: row-reverse;align-items: center;text-align: right;} .gufei_lc ul li.li_10{right:243px;top: 83px;flex-direction: row-reverse;align-items: center;text-align: right;} .gufei_lc ul li.li_11{left: 385px;bottom: 252px;flex-direction: column-reverse;text-align: center;} .gufei_lc ul li.li_12{left: 243px;top: 390px;} .gufei_lc ul li.li_13{left: 164px;top: 369px;align-items: flex-end;} .gufei_lc ul li.li_12 .txt{position: relative; top: -35px;} .gufei_lc ul li.li_11 .ico{ margin: 0 auto;} .gufei_lc ul li:hover img{ filter: drop-shadow(0px 5px 3px #0075C0); -webkit-filter: drop-shadow(0px 5px 3px #0075C0); } .gufei_lc ul li.on img{ filter: drop-shadow(4px 10px 10px #0075C0); -webkit-filter: drop-shadow(4px 10px 10px #0075C0); } .lc_con{ height: 0; visibility: hidden; opacity: 0; transform: translateY(0px); transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } .lc_con.on{ height: auto; visibility: visible; display: block; opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } .l-loader { width: 100vw; height: 100vh; position: fixed; z-index: 9999999999999; } .p-loader { position: relative; width: 100%; height: 100%; background-color: #f8f9f9; display: flex; align-items: center; justify-content: center; } .p-loader .p-loader__line { position: relative; z-index: 9999; width: 380px; height: 1px; background-color: #dfdfdf; opacity: 1; transition: .5s; overflow: hidden; visibility: visible; } .loaded #loader-wrapper .p-loader__line { opacity: 0; visibility: hidden; } .p-loader .p-loader__line:before, .p-loader .p-loader__line:after { position: absolute; top: 0; left: 0; content: ' '; display: block; width: 250px; height: 1px; } .p-loader .p-loader__line:before { -webkit-transform: translateX(-380px); transform: translateX(-380px); background-image: linear-gradient(-90deg, #59696d 20%, #93b4c5 69%, #afbec6 97%); -webkit-animation: LOADING_BEFORE 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; animation: LOADING_BEFORE 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; } .p-loader .p-loader__line:after { -webkit-transform: translateX(380px); transform: translateX(380px); background-image: linear-gradient(90deg, #59696d 20%, #93b4c5 69%, #afbec6 97%); -webkit-animation: LOADING_AFTER 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; animation: LOADING_AFTER 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; } @media screen and (max-width: 1100px) { .p-line__illust { width: 81.54545vw; height: 49.18182vw; } .n_about .con img{ margin-left:0;} } @-webkit-keyframes LOADING_BEFORE { 0% { -webkit-transform: translateX(-380px); transform: translateX(-380px); } 40% { -webkit-transform: translateX(380px); transform: translateX(380px); } 100% { -webkit-transform: translateX(380px); transform: translateX(380px); } } @keyframes LOADING_BEFORE { 0% { -webkit-transform: translateX(-380px); transform: translateX(-380px); } 40% { -webkit-transform: translateX(380px); transform: translateX(380px); } 100% { -webkit-transform: translateX(380px); transform: translateX(380px); } } @-webkit-keyframes LOADING_BEFORE_SP { 0% { -webkit-transform: translateX(-190px); transform: translateX(-190px); } 40% { -webkit-transform: translateX(190px); transform: translateX(190px); } 100% { -webkit-transform: translateX(190px); transform: translateX(190px); } } @keyframes LOADING_BEFORE_SP { 0% { -webkit-transform: translateX(-190px); transform: translateX(-190px); } 40% { -webkit-transform: translateX(190px); transform: translateX(190px); } 100% { -webkit-transform: translateX(190px); transform: translateX(190px); } } @-webkit-keyframes LOADING_AFTER { 0% { -webkit-transform: translateX(380px); transform: translateX(380px); } 60% { -webkit-transform: translateX(380px); transform: translateX(380px); } 100% { -webkit-transform: translateX(-380px); transform: translateX(-380px); } } @keyframes LOADING_AFTER { 0% { -webkit-transform: translateX(380px); transform: translateX(380px); } 60% { -webkit-transform: translateX(380px); transform: translateX(380px); } 100% { -webkit-transform: translateX(-380px); transform: translateX(-380px); } } @-webkit-keyframes LOADING_AFTER_SP { 0% { -webkit-transform: translateX(190px); transform: translateX(190px); } 60% { -webkit-transform: translateX(190px); transform: translateX(190px); } 100% { -webkit-transform: translateX(-190px); transform: translateX(-190px); } } @keyframes LOADING_AFTER_SP { 0% { -webkit-transform: translateX(190px); transform: translateX(190px); } 60% { -webkit-transform: translateX(190px); transform: translateX(190px); } 100% { -webkit-transform: translateX(-190px); transform: translateX(-190px); } } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; background: none; opacity: 1; } .loaded #loader-wrapper { visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out; } #loader-wrapper .loader-section { position: fixed; left: 0; right: 0; width: 100%; height: 51%; background: #f8f9f9; z-index: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #loader-wrapper .loader-section.section-left { top: 0; } #loader-wrapper .loader-section.section-right { bottom: 0; } .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } @-webkit-keyframes play{ 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-moz-keyframes play{ 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @keyframes play{ 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } .pt_con{ display: none;} .pt_con.on{ display: block;} .n_pingtai .ul .li.on .ico{ background: url(../image/huanwei_6_on.png) center no-repeat;} .n_pingtai .ul .li.on .ico img{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .n_pingtai .draw_h{ opacity:1;} svg.drawcircle path { fill: none; box-sizing:border-box; stroke-width: 2; stroke: none; stroke-dasharray: 0 , 750; stroke-dashoffset:750; transition: all .3s linear 0s; } .aos-animate .draw_h svg path { stroke:#0075C0; stroke-dasharray:750 , 0; stroke-dashoffset:750; } .n_pingtai .draw_h .before{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -2; /* border: 1px solid #cfdbed; */ } .n_pingtai .draw_h .before path{fill: none; box-sizing:border-box; stroke-width: 2; stroke:#cfdbed;} .aos-animate .draw_h svg.drawcircle path{ -webkit-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1); transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1); -moz-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1); -ms-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1); -o-transition: all 4s cubic-bezier(0.11, 0.57, 0.58, 1); } .video_slide .bd{ border-radius: .625rem; -webkit-border-radius: .625rem; -moz-border-radius: .625rem; -ms-border-radius: .625rem; -o-border-radius: .625rem;} .video_slide .hd .mask .play_ico{ transform: scale(.6); -webkit-transform: scale(.6); -moz-transform: scale(.6); -ms-transform: scale(.6); -o-transform: scale(.6); } .video_slide .slick-arrow{ width: 3.125rem; height: 3.125rem; z-index: 9; margin-top: -2rem; background-size: contain !important; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; } .video_slide .slick-arrow.slick-prev{ left: -7.5rem; background: url(../image/arr_left.png) center no-repeat;} .video_slide .slick-arrow.slick-next{ right: -7.5rem; background: url(../image/arr_right.png) center no-repeat;} .video_slide .slick-arrow.slick-prev:hover{ background: url(../image/arr_left_on.png) center no-repeat;} .video_slide .slick-arrow.slick-next:hover{ background: url(../image/arr_right_on.png) center no-repeat;} .video_slide ul li{ position: relative;} .video_slide .bd ul li p{ font-size: 1.5rem; color: #1d1d1f; font-weight: bold; text-align: center; margin-top: 2.25rem;} .video_slide .hd ul li p{ font-size: 1rem; color: #1d1d1f; text-align: center; padding-top: 1rem;} .video_slide .bd .slick-list{ overflow: visible;} /* 基础样式 */ .top_menu { position: relative; height:5.6875rem; display: inline-block; text-align:center; display: flex; justify-content: center; align-items: center;} .btn_language{ padding:0 10px;} .btn_language span { display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none; cursor: pointer; font-size:20px; color: #fff; } .language_sub { position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: none; min-width: 120px; z-index: 1000;} .language_sub a { display: block; padding: 8px 16px; color: #333; text-decoration: none; transition: background 0.2s; } .language_sub a:hover { background:#0067C4; color:#FFF;} /* 桌面端悬停效果 */ @media (hover: hover) { .top_menu:hover .language_sub, .top_menu:focus-within .language_sub { display: block; } } .btn_language a {display: flex; align-items: center; gap: 6px; padding: 8px; color:#FFF; text-decoration: none;} /* 下拉菜单样式 */ .language_sub { position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: none; min-width: 120px; z-index: 1000; color:#333; } .w_search{ display:none;} @media (max-width:1180px) { .w_search{ display:block; position:absolute; z-index:999; right:50px; color:#333;} .w_search .btn_language a{color:#333; line-height:3rem;} } /* 移动端优化 */ @media (max-width: 768px) { .language_sub { width: 100vw; right: -8px; border-radius: 0; border-left: none; border-right: none; } } .language_sub a { display: block; padding: 10px 16px; color: #333; text-decoration: none;} .top_menu svg path { fill: #fff;} .language_sub.active { display: block;} .icon.arrow { transition: transform 0.2s;} .btn_language.active .icon.arrow { transform: rotate(180deg);} .huoban { display: grid; grid-template-columns: repeat(7, 1fr); justify-content: space-between; gap: 15px; margin: 0 auto; padding: 20px;} .huoban > div { aspect-ratio: 2/1.5; display: flex; align-items: center; justify-content: center; background: #fff; padding: 10px; overflow: hidden; transition: transform 0.3s ease; position: relative;border-radius:1rem;} .huoban img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease;} /* 悬停效果 */ .huoban > div:hover { transform: scale(1.02); z-index: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.1);} .huoban img:hover { transform: scale(1.15);} /* 响应式设计 */ @media (max-width: 1200px) { .huoban { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 768px) { .huoban { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 480px) { .huoban { grid-template-columns: repeat(3, 1fr); } } /* 大图切换容器 */ .slider-container {position: relative; width: 100%;height: 790px;overflow: hidden;} .slider {display: flex;width: 500%;height: 100%;transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);} .slide {position: relative; width: 20%;height: 100%;} .slide-image {width: 100%;height: 100%;object-fit: cover;} .slide-content { position: absolute; bottom: 0; left: 0;right: 0; padding: 40px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: white; transform: translateY(20px); opacity: 0; transition: all 0.5s ease 0.3s;} .slide.active .slide-content {transform: translateY(0); opacity: 1;} .slide-description {font-size: 1.1rem; max-width: 600px;} /* 导航按钮 */ .slider-nav {position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; z-index: 10;} .nav-dot {width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease;} .nav-dot.active {background: white; transform: scale(1.2);} /* 左右箭头 */ .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; backdrop-filter: blur(5px);} .slider-arrow:hover { background: rgba(255, 255, 255, 0.3);} .arrow-prev {left: 30px;} .arrow-next {right: 30px;} .arrow-icon {color: white; font-size: 24px; font-weight: bold;} /* 缩略图导航 */ .thumbnail-nav {display: flex;justify-content: center;gap: 15px;margin-top: 30px; padding: 0 20px;} .thumbnail {width: 120px;height: 80px; border-radius: 8px; overflow: hidden; cursor: pointer;opacity: 0.7; transition: all 0.3s ease; border: 3px solid transparent;} .thumbnail.active { opacity: 1; border-color: #3498db; transform: scale(1.05);} .thumbnail img { width: 100%; height: 100%; object-fit: cover;} @media (max-width: 1440px) { .slider-container{height: 650px;} } @media (max-width: 1280px) { .slider-container { height: 500px; } .slide-title { font-size: 1.8rem;} } @media (max-width: 992px) { .slider-container { height: 450px; } .slide-content {padding: 30px;} .slide-title {font-size: 1.6rem;} .slide-description {font-size: 1rem;} .slider-arrow { width: 45px;height: 45px;} .thumbnail {width: 100px;height: 70px;} } @media (max-width: 768px) { .slider-container { height: 400px;} .slide-content {padding: 25px;} .slide-title { font-size: 1.4rem; } .slider-arrow { width: 40px; height: 40px;} .arrow-prev {left: 15px;} .arrow-next {right: 15px;} .thumbnail-nav {gap: 10px;} .thumbnail {width: 80px;height: 60px;} } @media (max-width: 576px) { .slider-container { height: 300px; } .slide-content { padding: 20px;} .slide-description {font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .slider-arrow { width: 36px;height: 36px;} .arrow-icon { font-size: 18px;} .slider-nav {bottom: 20px;} .nav-dot { width: 10px; height: 10px;} .thumbnail-nav {margin-top: 20px; gap: 8px;} .thumbnail {width: 60px;height: 45px;} } @media (max-width: 400px) { .slider-container { height: 180px;} .slide-content {padding: 15px;} .slide-title { font-size: 1.1rem;} .slide-description {font-size: 0.85rem;} .thumbnail-nav {display: none;} }