/**
 * Swiper 4.0.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2017 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 28, 2017
 */
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}


body{ overflow-x:hidden ; margin:0px; padding:0px; font-size:13px;font-family:-apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;color:#898989;line-height:1; background:#FFF; }
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0px; padding:0px;}
input,textarea { font-family: "微软雅黑"; border: none; outline: none; background: none; }
ul,li{ list-style:none}
img{border:0px; padding:0px; display: block;}
a{ color:#5c5c5c; text-decoration:none}
.banner { width: 100%; position: relative; overflow: hidden;}
.banner img{ display: block; height: auto; width: 100%;}
.top{ width: 100%; position: absolute; left: 0; top: 0; z-index: 99; transition: 0.5s;}
.w1200{ width: 1200px; margin: 0 auto;}
.top .topBox{ width: 1200px; margin: 0 auto; height: 75px; transition: 0.5s;}
.top .topBox .logo{ float: left; height: 75px; line-height: 75px;}
.top .topBox .logo img{ width: 380px; display: inline-block; vertical-align:middle;}
.top .topBox .nav{ float: right; height: 75px;}
.top .topBox .nav ul{ overflow: hidden; float: right;}
.top .topBox .nav ul li{ float:left; line-height: 75px; margin-left: 16px;}
.top .topBox .nav ul li a{ font-size: 16px; color: #fff;}
.top .topBox .nav ul li.on a{ color: #28dffb;}
.top .topBox .nav ul li:hover a{ color: #28dffb;}
.top .topBox .nav ul li:last-child{ padding: 7px 0; box-sizing: border-box;}
.top .topBox .nav ul li span{ padding-left: 18px; display: block; width: 100%; line-height: 30px; font-size: 12px; color: #fff; background: url(/public/images/logo_07.png) left center no-repeat;}
.top .topBox .nav ul li span:nth-child(2){ background: url(/public/images/logo_09.png) left center no-repeat;}
.top.on{ background: #0e1423; position: fixed;}
.top.page{background: #0e1423; position: relative;}
.bannerBox{ width: 1200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.bannerBox h2{ font-size: 60px; color: #fff; font-weight: bold;}
.bannerBox span{ display: block; width: 38px; height: 4px; background: #fff; margin: 20px 0;}
.bannerBox p{ font-size: 18px; color: #fff; line-height: 32px; width: 630px;} 
.banner img{ display: block; width: 100%; height: auto; min-width: 1440px; }
.banner .swiper-pagination{ width: 100%; bottom: 15px;}
.banner .swiper-pagination span{ width: 15px; height: 15px; background: #5c99c8; margin: 0 5px; opacity: 1; border-radius:8px;}
.banner .swiper-pagination span.swiper-pagination-bullet-active{ background: #60b9ff;}
.indexContainer{ width: 100%; padding-bottom: 115px;}
.indexContainer .layer1{ width: 1200px; margin: 0 auto;}
.indexContainer .tit{ height: 135px; text-align: center; font-size: 32px; color: #000; line-height: 135px; font-weight: bold;}
.indexContainer .layer1 ul{ overflow: hidden;}
.indexContainer .layer1 ul li{ float: left;}
.indexContainer .layer1 ul li{ width: 25%; padding: 0 25px; box-sizing: border-box;}
.indexContainer .layer1 ul li .icon{ width: 100%; height: 210px;}
.indexContainer .layer1 ul li .icon img{ display: block; margin: 0 auto;}
.indexContainer .layer1 ul li .text{ width: 100%;}
.indexContainer .layer1 ul li .text h2{ text-align: center; font-size: 20px; color: #4e5059; padding: 50px 0 25px 0;}
.indexContainer .layer1 ul li .text p{ line-height: 26px; font-size: 14px; color: #5c5f6b;  
  display: -webkit-box; /* 将元素作为弹性伸缩盒模型显示 */
  -webkit-box-orient: vertical; /* 设置伸缩盒的子元素排列方式为垂直 */
  -webkit-line-clamp: 14; /* 限制显示的行数（这里是3行） */
  overflow: hidden; /* 超出部分隐藏 */}
.indexContainer .layer2{ width: 1200px; margin: 0 auto;}
.indexContainer .layer2 ul{ width: 100%; overflow: hidden;}
.indexContainer .layer2 ul li{position: relative; width: 355px; height: 265px; float: left; margin-right: 67.5px; overflow: hidden;}
.indexContainer .layer2 ul li img{ display: block; width: 100%; height: 100%; transition: 1s;}
.indexContainer .layer2 ul li .text{ z-index: 11; width: 100%; position: absolute; transition: 0.5s; bottom: 0; left: 0;}
.indexContainer .layer2 ul li .text h2{ font-size: 24px; text-align: center; color: #fff;}
.indexContainer .layer2 ul li .text p{transition: 0.5s; font-size: 18px; color: #fff; text-align: center; padding: 40px 0 22px 0;}
.indexContainer .layer2 ul li:last-child{ margin-right: 0;}
.indexContainer .layer2 ul li a span{ width: 50%; height: 50%; position: absolute; display: block; transition: 0.5s; background:rgba(0,0,0,0.7); z-index: 10;}
.indexContainer .layer2 ul li a span:nth-child(1){ left:-100%; top:-100%;}
.indexContainer .layer2 ul li a span:nth-child(2){ right: -100%; top:-100%; }
.indexContainer .layer2 ul li a span:nth-child(3){ left:-100%;  bottom:-100%;}
.indexContainer .layer2 ul li a span:nth-child(4){ right: -100%; bottom:-100%;}
.indexContainer .layer2 ul li:hover a span:nth-child(1){ left: 0; top: 0;}
.indexContainer .layer2 ul li:hover a span:nth-child(2){ right: 0; top: 0;}
.indexContainer .layer2 ul li:hover a span:nth-child(3){ left: 0; bottom: 0;}
.indexContainer .layer2 ul li:hover a span:nth-child(4){right: 0; bottom: 0;}
.indexContainer .layer2 ul li:hover .text{ bottom: 50%; transform: translateY(50%);}
.indexContainer .layer2 ul li:hover p{ padding: 20px 0 0 0 ;}
.indexContainer .layer2 ul li:hover img{ transform: scale(1.1);}
.indexContainer .layer3 img{ display: block; margin: 0 auto;}
.indexContainer .layer4{ width: 100%; background: url(/public/images/index_44.jpg); height: 695px; padding-top: 110px; box-sizing: border-box;}
.indexContainer .layer4Box{ width: 1200px; margin: 0 auto;}
.indexContainer .layer4Box p{ font-size: 17px; color: #4e5059; line-height: 40px; text-indent: 35px;}
.indexContainer .layer5{overflow: hidden; width: 1200px; margin: 0 auto; padding-bottom: 40px;}
.indexContainer .layer5 ul{ width: 100%;}
.indexContainer .layer5 ul li{box-sizing: border-box; width:380px; height: 260px; float: left; border: 1px solid #ebebeb; margin-right: 30px; margin-bottom: 30px; transition: 0.5s;}
.indexContainer .layer5 ul li img{ display: block; width: 100%; height: 100%;}
.indexContainer .layer5 ul li:nth-child(3n){ margin: 0;}
.indexContainer .layer5 ul li:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.indexContainer .layer6{ width: 1200px; margin: 0 auto; padding:0 85px 50px 85px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: relative;}
.indexContainer .layer6 .layer6Box h2{ padding: 35px 0 15px 0; font-size: 16px; font-weight:bold; line-height: 16px; overflow: hidden; color: #000;}
.indexContainer .layer6 .layer6Box p{ line-height: 26px; font-size: 14px; line-height: 24px; color: #000;}
.indexContainer .layer6 .swiper-button-next{ right: 35px; top: 285px; margin: 0; background: url(/public/images/index_54.jpg); width: 11px; height: 18px; background-size:100% 100% ;}
.indexContainer .layer6 .swiper-button-prev{ background: url(/public/images/index_57.jpg); width: 11px; height: 18px; background-size:100% 100%; left: 35px; top: 285px; margin: 0;}
.footer{ width: 100%; background: #464646;}
.footer .footerBox{ width: 1200px; margin: 0 auto; overflow: hidden; padding: 35px 0; }
.footer .footerBox ul{ width: 160px; float: left; margin-right: 100px;}
.footer .footerBox ul:last-child{ margin-right: 0;}
.footer .footerBox ul h2{ width: 100%; border-bottom: 1px solid #fff; height: 38px; line-height: 38px; font-weight: bold; font-size: 14px; color: #fff;}
.footer .footerBox ul li{ padding-top: 12px; color: #ccc; line-height: 14px;}
.footer .footerBox ul li a{ font-size: 14px; color: #ccc;}
.footer .footerBox ul li a:hover{ color: #fff;}
.footer .friendLink{ width: 1200px; height: 68px; border: 1px solid #ccc; border-left:0; border-right:0; margin: 0 auto;}
.footer .friendLink ul{ overflow: hidden;}
.footer .friendLink ul li{ float: left; margin-right: 10px; font-size: 16px; color: #fff; line-height: 68px;}
.footer .friendLink ul li a{ color: #fff; font-size: 16px;}
.footer .footerBottom{ width: 1200px; margin: 0 auto; overflow: hidden;}
.footer .footerBottom ul{ float: left;}
.footer .footerBottom ul li{ float: left; line-height: 190px; margin-right: 95px; font-size: 15px; color: #fff;}
.footer .footerBottom ul li img{ display: inline-block; vertical-align: middle; margin: 0 10px;}
.footer .footerBottom .code{ float: right; padding-top: 20px; width: 125px;}
.footer .footerBottom .code img{ display: block; width: 100%;}
.footer .footerBottom .code p{ text-align: center; font-size: 16px; color: #fff; text-align: center; padding-top: 15px;}
.copyright{ width: 100%; height: 40px; background: #666;}
.copyright .copyrightBox ul li a{ color: #fff;}
.copyright .copyrightBox{ width: 1200px; margin: 0 auto; color: #ccc; line-height: 40px;}
.copyright .copyrightBox ul{ float: right;}
.copyright .copyrightBox ul li{ float: left; margin-left: 40px; line-height: 40px; color: #ccc;}
.AppTop{box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #464646; top: 0; left: 0; z-index: 99; display: none; height: 50px; width: 100%; position: fixed; display: none;}
.AppTop .logo{ padding-left: 15px; line-height: 50px; height: 50px;}
.AppTop .logo img{ height: 60%; width: auto; display: inline-block;vertical-align: middle;}
.AppTop .SideClick{ position: absolute; transition: 0.5s; right: 15px; top: 50%; transform: translateY(-50%); width: 24px; height:20px;}
.AppTop .SideClick span{transition: 0.5s; display: block; width: 100%; height: 2px; border-radius:1px; background: #fff; position: absolute; transition: 0.5s;}
.AppTop .SideClick span:nth-child(1){ top: 0; left: 0;}
.AppTop .SideClick span:nth-child(2){ top: 50%; transform: translateY(-50%);}
.AppTop .SideClick span:nth-child(3){ bottom: 0;}
.AppTop .SideClick.on{ transform:translateY(-50%) rotate(180deg);}
.AppTop .SideClick.on span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg);}
.AppTop .SideClick.on span:nth-child(2){ width: 0;}
.AppTop .SideClick.on span:nth-child(3){ top: 50%; transform: translateY(-50%) rotate(-45deg);}
.fixedSide{ width: 60px; position: fixed; right:0; top: 50%; transform: translateY(-50%); padding: 0 3px; box-sizing: border-box; z-index: 50;}
.fixedSide ul{ width: 100%; background: #ff8447;}
.fixedSide ul li{ width: 100%; height: 65px; border-bottom: 1px solid #fff; position: relative;}
.fixedSide ul li .icon{ width: 100%; height: 48px; position: relative;}
.fixedSide ul li .icon img{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.fixedSide ul li p{ text-align: center; font-size: 12px; color: #fff;}
.fixedSide ul li .nrBox{ width: 0; text-align: center; left: 0; height: 65px; background: #ff8447; position: absolute; overflow: hidden; transition: 0.5s; top: 0; font-size: 16px; color: #fff; line-height: 65px;}
.fixedSide ul li:hover .nrBox{ transform: translateX(-150px); width: 150px;}
.fixedSide ul li .code{ width:150px; height: auto; padding:15px; box-sizing: border-box; border-radius:8px;   background: #fff; position: absolute; left:-150px; opacity: 0; overflow: hidden; top: 0; transition: 0.5s; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.fixedSide ul li .code img{ display: block; width: 100%; height: 100%;}
.fixedSide ul li .code p{ padding-top: 15px; color: #333; text-align: center; font-size: 14px;}
.fixedSide ul li:hover .code{ left: -160px; opacity: 1;}
.indexContainer.about .layer4{ padding: 0;}
.indexContainer.about .layer7 h2{ width: 100%; text-align: center; border-bottom: ;}
.indexContainer.about .layer7 .layer7Box{  margin: 0 auto; border: 1px solid #ebebeb; box-shadow: 0 0 10px rgba(0,0,0,0.2); padding: 35px 0; box-sizing: border-box;}
.indexContainer.about .layer7 .layer7Box p{ line-height: 32px; text-indent: 32px; font-size: 16px; color: #0f1523; width: 800px; margin: 0 auto;}
.indexContainer.about .layer7 .layer7Box ul{ text-align: center; padding-top: 35px;}
.indexContainer.about .layer7 .layer7Box ul li{ display: inline-block; margin:0 55px;}
.indexContainer.about .layer7 .layer7Box ul li .icon{ border-radius:50% ; width: 100px; height: 100px; position: relative; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.indexContainer.about .layer7 .layer7Box ul li .icon img{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.indexContainer.about .layer7 .layer7Box ul li span{ display: block;  padding-top: 25px; font-size: 22px; color: #0f1523;}
.join{  margin: 0 auto; padding-bottom: 110px;}
.join .title{ width: 100%; font-size: 32px; font-weight: bold; color: #333; height: 170px; text-align: center; line-height: 170px;}
.join .hd{ width: 100%;}
.join .hd ul{ width: 100%; overflow: hidden;}
.join .hd ul li{ width: 200px; float: left;border-bottom: 1px solid #f9faff; cursor: pointer;}
.join .hd ul li .icon{ width: 95px; height: 95px; border-radius:50%; position: relative; margin: 0 auto; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.join .hd ul li .icon img{ display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.join .hd ul li p{ height: 50px; text-align: center; font-size: 17px; color: #0f1523; line-height: 50px;}
.join .hd ul li.on{ border-bottom: 1px solid #23c8f6;}
.join .bd{ width: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.2); margin: 54px 0 0 0; border-radius:10px; padding: 0 60px; width: 100%; box-sizing: border-box;  padding-bottom: 50px;}
.join .bd h2{ padding: 70px 0 35px 0; font-size: 24px; color: #0f1523; }
.join .bd p{line-height: 36px; font-size: 18px; color: #4e5059;}
.pro{ background: #f0f1f3; overflow: hidden;}
.pro ul li{ float: left; width: 174px; height: 220px; background: #fff; margin:0 30px 30px 0; transition: 0.8s;}
.pro ul li .icon{ width: 100%; height: 165px; position: relative;}
.pro ul li .icon img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.8s;}
.pro ul li:nth-child(6n){ margin-right: 0;}
.pro ul li p{ text-align: center; font-size: 16px;}
.pro ul li:hover{ transform: translateY(-10px); box-shadow: 0 0 15px rgba(0,0,0,0.1);}
.pro ul li:hover .icon img{ transform: translate(-50%,-50%) scale(1.1);}
.caseList{ position: relative; z-index: 9;}
.caseList .hd{ background: #fff;  box-shadow: 0 0 10px rgba(0,0,0,0.2); margin:-20px auto 0 auto; width: 100%; position: relative; z-index: 99; border-radius:10px;}
.caseList .hd ul{ text-align: center; line-height: 70px;}
.caseList .hd ul li{ display: inline-block; margin:0 15px; vertical-align: middle;}
.caseList .hd ul li a{ display: block; border: 1px solid #f0f1f3; text-align: center; border-radius:19px; width:140px; height:38px; line-height: 38px; font-size: 18px; color: #4e5059;}
.caseList .hd ul li.on a{ background: #3884ff; color: #fff; border: 1px solid #3884ff;}
.caseList .hd ul li.on a:hover{ background: #3884ff; color: #fff; border: 1px solid #3884ff;}
.caseList .hd ul li:hover a{ color:#3884ff;}
.caseList .main{ width: 100%; padding-top: 60px;}
.caseList .main ul{}
.caseList .main ul li{ float: left; width: 285px; float: left; margin-right: 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); margin-bottom: 20px; transition: 0.5s;}
.caseList .main ul li:nth-child(4n){ margin-right: 0;}
.caseList .main ul li .icon{ width: 100%; height: 160px; line-height: 160px;text-align: center;}
.caseList .main ul li .icon img{ display: inline-block; margin: 0 auto; vertical-align: middle; width:100%; max-width: 80%;  max-height: 80%; }
.caseList .main ul li p{ width: 100%; height: 40px; line-height: 40px; padding: 0 12px; box-sizing: border-box; font-size: 15px; color: #999; font-size: 14px;}
.caseList .main ul li:hover{ transform: translateY(-10px); }

/* News list styling - matching case list style */
.news_list .main ul li{ float: left; width: 285px; float: left; margin-right: 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); margin-bottom: 20px; transition: 0.5s;}
.news_list .main ul li:nth-child(4n){ margin-right: 0;}
.news_list .main ul li .icon{ width: 100%; height: 160px; line-height: 160px; text-align: center;}
.news_list .main ul li .icon img{ display: inline-block; margin: 0 auto; vertical-align: middle; width:100%; max-width: 80%; max-height: 80%; }
.news_list .main ul li p{ width: 100%; height: 40px; line-height: 40px; padding: 0 12px; box-sizing: border-box; font-size: 15px; color: #999; font-size: 14px;}
.news_list .main ul li:hover{ transform: translateY(-10px); }
.pageMain{ text-align: center; padding: 50px 0;}
.pageMain li{ display: inline-block; margin: 0 5px;}
.pageMain li a{ height: 30px; padding: 0 15px; border:1px solid #eee; color: #b2b2b2; font-size: 12px; display: block; line-height: 30px; border-radius:4px; transition: 0.5s;}
.pageMain li.on a{background: #eee; border: 1px solid #ccc;}
.pageMain li:hover a{ background: #ff8447; border: 1px solid #ff8447; color: #fff;}
.indexContainer.case{ padding: 0;}
.case_details .tit{ font-weight: bold; text-align: center; font-size: 32px; color: #000; line-height: 140px;}
.case_details .floor1{ margin-top: 20px; width: 100%; height: 230px; border-radius:10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: relative;}
.case_details .floor1 .nr{     top: 50%;
    transform: translateY(-50%);
    position: absolute;
 width: 100%;
}
.case_details .floor1 .nr h2{ font-size: 34px;; text-align: center; color: #0f1523; padding-bottom: 40px;  font-weight: bold;}
.case_details .floor1 .nr p{  font-size: 20px; color: #4e5059; line-height: 2;margin: 0 40px; }
.case_details .MainList{ width: 100%; padding: 0 105px 0 105px; box-sizing: border-box;}
.case_details .MainList img{max-width: 100%; margin: 0 auto;height: auto;}
.case_details .title{ width: 100%; border-bottom: 2px solid #245e9e; padding-top: 180px;}
.case_details .title h2{ font-size: 34px; color: #2b5f9f; padding-bottom: 12px; line-height: 34px; font-weight: normal;}
.case_details .title p{ height: 50px; line-height: 50px; font-size: 26px; color: #1ab6f0;}
.case_details .list1{ padding-top: 130px;}
.case_details .list1 .bt{ width: 200px; height: 60px; text-align: center; line-height: 60px; background: #01438e; border-radius:6px; color: #fff; font-size: 24px; margin: 0 auto;}
.case_details .list1 .nr{ width: 100%; text-align: center; padding-top: 28px;}
.case_details .list1 .nr .nrBox{ display: inline-block; margin: 0 10px; width: 225px; vertical-align: top;}
.case_details .list1 .nr .nrBox h2{ background: #01438e; height: 54px; line-height: 54px; text-align: center; font-size: 18px; color: #fff;}
.case_details .list1 .nr .nrBox ul{ height: 180px; background: #e6e7e9; padding-top: 20px;}
.case_details .list1 .nr .nrBox:first-child{ margin-left: 0;}
.case_details .list1 .nr .nrBox:last-child{ margin-right: 0;}
.case_details .list1 .nr .nrBox ul li{ font-size: 16px; padding-bottom:10px;}
.case_details .list2{ width: 525px; height: 270px; background: #d1d2d4; position: relative; padding: 30px; box-sizing: border-box; margin: 160px auto 0 auto;}
.case_details .list2 h2{width: 200px; height: 60px; text-align: center; line-height: 60px; background: #01438e; border-radius:6px; color: #fff; font-size: 24px; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); font-weight: normal;}
.case_details .list2 ul{ overflow: hidden; width: 100%; padding-top: 20px;}
.case_details .list2 ul li{ width: 50%; float: left; line-height: 30px; font-size: 16px; color: #383637; font-weight: 100;}
.case_details .list3{ padding: 90px 0;}
.case_details .list3 img{ display: block; margin: 0 auto;}
.indexContainer.new{ padding: 0;}
.indexContainer.new .layer6{ padding: 0; box-shadow: none;} 
.indexContainer .layer6 ul{ width: 100%; overflow: hidden; padding-bottom: 120px;}
.indexContainer .layer6 ul li{ width: 32%; float: left; margin-right: 2%; margin-bottom: 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); transition: 0.5s;}
.indexContainer .layer6 ul li .icon{ width: 100%; height: 160px; line-height: 160px; text-align: center;}
.indexContainer .layer6 ul li .icon img{ display: inline-block; margin: 0 auto; vertical-align: middle; width: 100%; max-width: 80%; max-height: 80%; }
.indexContainer .layer6 ul li:nth-child(3n){ margin-right: 0;}
.indexContainer .layer6 ul li:hover .layer6Box h2{ color: #3884ff;}
.indexContainer .layer6 ul li:hover{ transform: translateY(-10px); }
.indexContainer .newList{ width: 100%; background: #f6f6ff;}
.indexContainer .newList img{ display: block; margin: 0 auto;}
.cantact{ width: 1150px; margin: 0 auto; padding: 90px 0; }
.cantact ul{ width: 100%;}
.cantact ul li{ float: left; margin:0 20px 20px 0; height: 160px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.cantact ul li.xl{ width: 315px;}
.cantact ul li.xxl{ width: 470px;}
.cantact ul li.xxxl{ width: 805px;}
.cantact ul li:nth-child(3){ margin-right: 0;}
.cantact ul li:nth-child(5){ margin-right: 0;}
.cantact ul li .icon{ width: 105px; height: 100%; position: relative; float: left;}
.cantact ul li .icon img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.cantact ul li .text{ width: calc(100% - 105px); height: 100%; float: left; box-sizing: border-box; position: relative;}
.cantact ul li .textBox{ width: 100%; box-sizing: border-box; position: absolute; top: 50%; transform: translateY(-50%);}
.cantact ul li .textBox p{ font-size: 18px; color: #000; line-height: 44px; font-weight: bold;}
.cantact ul li .textBox span{ font-size: 18px; color: #000; line-height:32px; display: block;}
.cantact ul li .textBox img{ margin-left: 15px;}
.footerFixed{ display: none;}
.pageFull{ width: 1200px; margin: 0 auto;}
.pageFull ul{ padding: 30px 0;}
.pageFull ul li{ line-height: 40px;}
.pageFull ul li a{ font-size: 14px; color: #333;}

.fenlei{margin:10px 0 0 0 }
.fenlei a{
    background-color: #F7F7F7;
    color: #666666;
    padding: 0 13px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    text-align: center;
	font-size: 14px;
    margin: 8px 8px 0px 0px;
}
.fenlei a:hover {
    background-color: #ff8447;
    color: #fff;	
	
}

.fenlei .cur{background: #ff8447;color: #fff; }




.newsCon table td, .newsCon table th {
    padding: 10px 12px !important;
    font-size: 14px !important;
}
.newsCon table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}@media(max-width:1199px ) {
	.pageFull{ width: 100%; padding: 30px 15px; box-sizing: border-box;}
	.footerFixed{ display: block;}
	.footerFixed{ width: 100%; height: 50px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.2); position: fixed; left: 0; bottom: 0; z-index: 99;}
	.footerFixed ul{ width: 100%; height: 100%; overflow: hidden;}
	.footerFixed ul li{ width: 50%; height: 100%; text-align: center; line-height: 50px; float: left;}
	.footerFixed ul li a{ display: block; width: 100%; height: 100%; color: #333; text-align: center; line-height: 50px;}
	.footerFixed ul li a img{ display: inline-block; vertical-align: middle; height: 50%; width: auto; margin: 0 15px;}
	body{ padding-top: 50px;}
	.w1200{ width: 100%;}
	.AppTop{ display: block;}
	.top{ display: block; position: fixed; left: -100%; top: 0; width: 75%; height: 100vh; background:#464646; z-index: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.1); transition: 0.5s;}
	.fixedSide{ display: none;}
	.top.page{ position: fixed;}
	.top .topBox{ width: 100%; height: 100%; height: auto;}
	.top .topBox .logo{ width: 100%; padding: 30px 0; height: auto;}
	.top .topBox .logo img{ width: 50%; display: block; margin: 0 auto;}
	.top .topBox .nav{ width: 60%; margin: 0 auto; float: inherit;}
	.top .topBox .nav ul li{ width: 100%; margin: 0; line-height: 16px; padding-top: 35px;}
	
	
	.banner{ width: 100%; height: 200px;}
	.indexbanner{ width: 100%; height: 300px;}
	.banner .swiper-container{ width: 100%; height: 100%;}
	.banner .swiper-container .swiper-slide-active{ z-index: 10;}
	.banner .swiper-container img{ display: block; height: 100%; width: auto;}
	.banner .bannerBox{ width: 100%; padding: 0 25px; box-sizing: border-box;}
	.bannerBox h2{ font-size: 20px; text-align: left;}
	.bannerBox p{ font-size: 14px; line-height: 24px;text-align: left; width: 100%;}
	.bannerBox span{ margin: 20px 0 15px 0;}
	.indexContainer .tit{ font-size: 22px; text-align: center; line-height: 80px; height: 80px;}
	.indexContainer .layer1{ width: 100%;}
	.indexContainer .layer1 ul{ overflow: hidden; padding: 0 10px;}
	.indexContainer .layer1 ul li{ width: 50%; padding: 20px 10px; /*height: 330px;*/}
	.indexContainer .layer1 ul li .icon{ width: 100%; height: auto;}
	.indexContainer .layer1 ul li .icon img{ display:block; width: 70%; height: auto;}
	.indexContainer .layer1 ul li .text h2{ line-height: 50px; padding: 0; text-align: center; font-size: 14px;}
	.indexContainer .layer1 ul li .text p{ font-size: 12px; line-height: 22px;}
	.indexContainer .layer2{ width: 100%;}
	.indexContainer .layer2 ul li{ width: 95%; margin: 0 auto 10px auto; float: inherit;}
	.indexContainer .layer2 ul li:last-child{ margin: 0 auto;}
	.indexContainer .layer3 img{ width: 95%;}
	.indexContainer .layer4{ height: auto;}
	.indexContainer .layer4Box{ width: 94%; margin: 0 auto;}
	.indexContainer .layer5{ width: 100%;}
	.indexContainer .layer5 ul{ overflow:hidden;padding: 0 10px; box-sizing: border-box;}
	.indexContainer .layer5 ul li{ float: left; width: 49%; margin-right: 2%; margin-bottom: 10px; height: auto; box-sizing: border-box;}
	.indexContainer .layer5 ul li:nth-child(3n){ margin-right: 2%;}
	.indexContainer .layer5 ul li:nth-child(2n){ margin-right: 0;}
	.indexContainer .layer6{ width: 100%; box-shadow: none; padding: 0;}
	.indexContainer .layer6 .icon{ width: 100%;}
	.indexContainer .layer6 .icon img{ display: block; width: 100%;}
	.indexContainer .layer6 .swiper-button-prev{ display: none;}
	.indexContainer .layer6 .swiper-button-next{ display: none;}
	.indexContainer .layer6 .layer6Box h2{ height: 80px; padding: 0; line-height: 80px; overflow: hidden;}
	.footer{ padding: 0 10px; box-sizing: border-box;}
	.footer .footerBox{ width: 100%;  display: none;}
	.footer .footerBox ul{ display: none;}
	.footer .friendLink{ width: 100%;}
	.footer .footerBottom{ width: 100%;}
	.footer .footerBottom ul li{ height: 80px; width: 100%; height: auto; margin: 0; line-height: 40px;}
	.footer .footerBottom ul li img{ height: 20px; width: auto;}
	.footer .footerBottom .code{ width: 100%; padding-bottom: 30px;}
	.footer .footerBottom .code img{ width: 30%; margin: 0 auto;}
	.copyright{ height: auto; text-align: center; padding: 20px; line-height: 22px; box-sizing: border-box; overflow: hidden;}
	.copyright .copyrightBox{ width: 100%; height: auto;}
	.copyright .copyrightBox ul{ width: 100%; text-align: center; float: inherit;}
	.copyright .copyrightBox ul li{ float: inherit;  display: inline-block; margin: 0 5px;}
	.indexContainer.about .layer7 .layer7Box p{ width: 100%; padding: 0 10px; box-sizing: border-box;}
	.indexContainer.about .layer7 .layer7Box ul{ overflow: hidden;}
	.indexContainer.about .layer7 .layer7Box ul li{ width: 50%; float: left; margin: 0 0 20px 0;}
	.indexContainer.about .layer7 .layer7Box ul li .icon{ margin: 0 auto;}
	.join .hd ul li{ width: 33%; margin-bottom: 15px;}
	.join .hd ul li:nth-child(3n){ width: 34%;}
	.join .hd ul li .icon{ width: 75px; height: 75px;}
	.join .hd ul li .icon img{ width: 40%; height: auto;}
	.join .bd{ margin: 20px auto 0 auto; width: 96%; padding: 0 25px 55px 25px;}
	
	.pro{ width: 100%; padding: 0 10px; box-sizing: border-box;}
	.pro ul{ overflow: hidden;}
	.pro ul li{ width: 49%; margin-right: 2%; margin-bottom: 10px;}
	.pro ul li:nth-child(2n){ margin-right: 0;}
	
	.caseList .hd{ height: auto;}
	.caseList .hd ul{ line-height: 60px; padding: 20px 0;}
	.caseList .hd ul li a{ width: auto; font-size: 14px; padding: 0 10px;}
	.caseList .main{ overflow: hidden; padding: 20px 0;}
	.caseList .main ul{ overflow: hidden;}
	.caseList .main ul li{ float: inherit; width: 95%; margin: 0 auto 10px auto;}
	.caseList .main ul li .icon { width: 100%; height: auto;}
	.caseList .main ul li .icon img{ display: block; width:100%; height: auto;}
	.caseList .main ul li:nth-child(4n){ margin: 0 auto;}
	
	.indexContainer .layer6 ul li{ width: 94%; margin: 0 auto 20px auto; float: inherit;}
	.indexContainer .layer6 ul{ padding-bottom: 40px;}
	.indexContainer .newList{ display: none;}
	.cantact{ width: 100%; padding: 15px; box-sizing: border-box;}
	.cantact ul li.xl{ width: 100%;}
	.cantact ul li.xxl{ width: 100%;}
	.cantact ul li.xxxl{ width: 100%;}
	
	.case_details .MainList{ padding: 0 15px; box-sizing: border-box;}
	.case_details .title{ padding: 30px 0 0 0;}
	.case_details .list1{ padding: 30px 0 0 0; }
	.case_details .list1 .nr .nrBox{ width: 100%; display: block; margin: 0 0 15px 0;}
	.case_details .list2{ width: 100%; margin: 50px 0; height: auto;}
	.case_details .list2 ul li{ width: 100%;}
	.case_details .list3 img{ width: 100%; height: auto;}
	
	.banner img{ height: 100%;}
}

/* FIX: 新闻正文行距优化 - 全面加大间距 */
.newsCon {
    max-width: 1100px !important;
    margin: 0 auto !important;
}
.newsCon p { 
    margin: 18px 0 24px 0 !important; 
    line-height: 2.4 !important; 
    font-size: 16px !important;
    color: #333 !important;
}
.newsCon h2, .newsCon h3 { 
    margin: 36px 0 20px 0 !important; 
    line-height: 1.6 !important; 
    font-size: 22px !important;
    color: #0f1523 !important;
}
.newsCon h3 {
    font-size: 18px !important;
    margin: 28px 0 18px 0 !important;
}
.newsCon ul {
    margin: 18px 0 24px 0 !important;
    padding-left: 28px !important;
}
.newsCon ul li {
    margin: 10px 0 12px 0 !important;
    line-height: 2.2 !important;
    font-size: 16px !important;
    color: #333 !important;
}
.newsCon ol {
    margin: 18px 0 24px 0 !important;
    padding-left: 28px !important;
}
.newsCon ol li {
    margin: 10px 0 12px 0 !important;
    line-height: 2.2 !important;
    font-size: 16px !important;
    color: #333 !important;
}
.newsCon strong {
    font-weight: bold !important;
    color: #000 !important;
}
/* 表格内间距加大 */
.newsCon table {
    margin: 20px 0 28px 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}
.newsCon table td, .newsCon table th {
    padding: 14px 18px !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}

/* FIX: 上下篇文章链接间距 */
.newsNextPrev {
    margin-top: 30px !important;
    padding: 20px 0 !important;
    border-top: 1px solid #e8e8e8 !important;
}
.prevBox {
    margin: 8px 0 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}
.nextBox {
    margin: 8px 0 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}
.prevBox .prev {
    margin: 0 !important;
    line-height: 1.8 !important;
    color: #999 !important;
    font-size: 15px !important;
}
.nextBox a.next {
    margin: 0 !important;
    line-height: 1.8 !important;
    color: #0056b3 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}
.nextBox a.next:hover {
    color: #003d82 !important;
    text-decoration: underline !important;
}/* FIX: 新闻中心封面图平铺优化 - 填满容器，避免空白 */
.indexContainer.new .layer6 ul li .icon {
    width: 100% !important;
    height: 220px !important; /* 增加高度到220px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    overflow: hidden !important;
    position: relative !important;
}

.indexContainer.new .layer6 ul li .icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 平铺填满，保持比例但可能裁剪 */
    display: block !important;
    margin: 0 auto !important;
}

/* 移动端适配 */
@media (max-width: 1199px) {
    .indexContainer.new .layer6 ul li .icon {
        height: 180px !important; /* 移动端稍小一些 */
    }
}

/* 确保新闻列表项的布局稳定 */
.indexContainer.new .layer6 ul li {
    width: 32% !important;
    float: left !important;
    margin-right: 2% !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

.indexContainer.new .layer6 ul li:nth-child(3n) {
    margin-right: 0 !important;
}

/* ===== 新闻详情页样式优化 ===== */
.newsTitle {
    text-align: center;
    margin-bottom: 20px;
}

.newsTitle h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    padding: 0 0 15px 0;
    color: #0f1523;
    line-height: 1.3;
}

.newsTitle .info {
    text-align: center;
    font-size: 13px;
    color: #888;
    line-height: 1.8;
}

.newsTitle .info .time,
.newsTitle .info .source {
    display: inline-block;
    margin: 0 12px;
}

.newsTitle .info .time a,
.newsTitle .info .source a {
    color: #888;
    text-decoration: none;
}

/* 标签样式 */
.newsTitle .detail-tags {
    text-align: center;
    margin: 12px 0 0;
}

.newsTitle .detail-tags a {
    display: inline-block;
    padding: 4px 16px;
    margin: 4px 6px;
    background: #f0f5ff;
    color: #3884ff;
    border-radius: 12px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.newsTitle .detail-tags a:hover {
    background: #3884ff;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 132, 255, 0.35);
}

/* 摘要描述样式 */
.newsDesc {
    text-align: center;
    margin: 0 auto 25px;
    max-width: 750px;
}

.newsDesc p {
    font-size: 14px !important;
    line-height: 23.8px !important;
    text-align: center !important;
    color: #555 !important;
    margin: 0 !important;
}


/* 移动端 - 详情页适配 */
@media(max-width:1199px ) {
    .newsTitle h2 {
        font-size: 22px !important;
        padding: 0 15px 12px 15px !important;
    }
    .newsDesc {
        padding: 0 15px !important;
    }
    .newsDesc p {
        font-size: 13px !important;
        line-height: 22px !important;
    }
    .newsTitle .detail-tags a {
        padding: 3px 12px !important;
        margin: 3px 4px !important;
        font-size: 12px !important;
    }
    .newsCon {
        padding: 0 18px 30px !important;
    }
    .newsCon p {
        line-height: 2.5 !important;
        margin: 20px 0 28px 0 !important;
    }
    .newsCon h2, .newsCon h3 {
        margin: 36px 0 22px 0 !important;
    }
    .newsCon h3 {
        margin: 30px 0 20px 0 !important;
    }
    .newsCon ul {
        margin: 16px 0 20px 0 !important;
        padding-left: 22px !important;
    }
    .newsCon ul li {
        margin: 10px 0 12px 0 !important;
        line-height: 2.3 !important;
    }
    .newsCon ol {
        margin: 16px 0 20px 0 !important;
        padding-left: 22px !important;
    }
    .newsCon ol li {
        margin: 10px 0 12px 0 !important;
        line-height: 2.3 !important;
    }
    .newsNextPrev {
        margin-top: 20px !important;
        padding: 15px 0 !important;
        border-top: 1px solid #e8e8e8 !important;
    }
    .prevBox {
        margin: 6px 0 !important;
        line-height: 1.8 !important;
        font-size: 14px !important;
    }
    .nextBox {
        margin: 6px 0 !important;
        line-height: 1.8 !important;
        font-size: 14px !important;
    }
    .prevBox .prev {
        margin: 0 !important;
        line-height: 1.8 !important;
        color: #999 !important;
        font-size: 14px !important;
    }
    .nextBox a.next {
        margin: 0 !important;
        line-height: 1.8 !important;
        color: #0056b3 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }
}

/* ===== 修复暗色模式下卡片排版文字不可见 ===== */
.newsShow {
    background: #ffffff !important;
    color: #333333 !important;
}

.newsTitle h2 {
    color: #0f1523 !important;
    background: transparent !important;
}

/* 正文区域强制高对比 */
.newsCon {
    background: #ffffff !important;
    color: #333333 !important;
}

/* 描述区域 */
.newsDesc {
    background: transparent !important;
}

.newsDesc p {
    color: #555555 !important;
    background: transparent !important;
}

/* 标题卡片区域的h3确保可见 */
.newsCon h3[style*="background:#1a1a2e"] {
    background: #1a1a2e !important;
    color: #ffffff !important;
}

/* 渐变卡片白字 */



/* 多选的 div 通用预防 */
.newsShow *[style*="color"] {
    /* 保持原有颜色，不做全局覆盖 */
}

/* ===== 透气排版优化 2026-06-27 ===== */

/* 文章容器加内边距，不贴边 */
.newsShow {
    padding: 15px !important;
}

/* 正文区加宽加内边距 */
.newsCon {
    padding: 0 20px 40px !important;
}

/* 段落间距加大，行距更舒适 */
.newsCon p {
    margin: 22px 0 28px 0 !important;
    line-height: 2.5 !important;
    font-size: 17px !important;
}

/* 标题上下间距加大 */
.newsCon h2 {
    margin: 48px 0 24px 0 !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
}

.newsCon h3 {
    margin: 40px 0 20px 0 !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
}

/* 列表项间距加大 */
.newsCon ul li, .newsCon ol li {
    margin: 12px 0 14px 0 !important;
    line-height: 2.3 !important;
}

/* 表格更宽敞 */
.newsCon table td, .newsCon table th {
    padding: 16px 20px !important;
    line-height: 2 !important;
}

/* 文章标题区域加内边距 */
.newsTitle {
    padding: 0 20px !important;
    margin-bottom: 30px !important;
}

/* 摘要区域加内边距 */
.newsDesc {
    padding: 0 20px !important;
    margin-bottom: 30px !important;
}

/* 封面图加圆角和阴影，更精致 */
.newsCover {
    margin: 0 20px 30px !important;
}

.newsCover img {
    border-radius: 0 !important;
}

/* 渐变卡片：更宽松的内边距和呼吸空间 */

/* 渐变卡片内标题 */


/* 渐变卡片内段落 */

/* 网格卡片（为什么选择华南腾飞那行） */
.newsCon div[style*="display:grid"] {
    gap: 12px !important;
    gap: 15px !important;
}

.newsCon div[style*="grid-template-columns"] > div {
    padding: 6px !important;
    padding: 10px !important;
}

/* 上下篇文章更宽松 */
.newsNextPrev {
    padding: 25px 20px !important;
    margin: 30px 20px 0 !important;
}

/* Table of Contents 样式 */
details.news-toc {
    background: #f8f9fa !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    padding: 20px 24px !important;
    margin: 30px 0 40px !important;
}

details.news-toc summary {
    font-size: 17px !important;
    font-weight: bold !important;
    color: #0f1523 !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
}

details.news-toc a {
    display: block !important;
    padding: 6px 0 6px 24px !important;
    color: #0056b3 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    border-left: 3px solid #0056b3 !important;
    margin: 4px 0 !important;
}

/* 移动端适配 */
@media(max-width:768px) {
    .newsShow {
        padding: 10px 0 !important;
    }

    .newsCon {
        padding: 0 16px 30px !important;
    }

    .newsCon p {
        font-size: 16px !important;
        line-height: 2.6 !important;
        margin: 18px 0 24px 0 !important;
    }

    .newsCon h2 {
        font-size: 22px !important;
        margin: 36px 0 18px 0 !important;
    }

    .newsCon h3 {
        font-size: 18px !important;
        margin: 30px 0 16px 0 !important;
    }

    .newsCover {
        margin: 0 12px 24px !important;
    }


    .newsTitle {
        padding: 0 16px !important;
    }

    .newsTitle h2 {
        font-size: 24px !important;
    }

    .newsDesc {
        padding: 0 16px !important;
    }

    .newsNextPrev {
        padding: 20px 16px !important;
        margin: 24px 12px 0 !important;
    }
}

/* gradient cards -> white bg, dark text, no card style */
.newsCon div[style*="background:linear-gradient"] {
    background: #ffffff !important;
    color: #333333 !important;
    padding: 30px 40px !important;
    margin: 40px 0 !important;
    border-left: 4px solid #5c99c8 !important;
}

.newsCon div[style*="background:linear-gradient"] h2 {
    color: #1a1a2e !important;
    margin: 0 0 20px 0 !important;
    font-size: 22px !important;
}

.newsCon div[style*="background:linear-gradient"] h3 {
    color: #1a1a2e !important;
    font-size: 18px !important;
    margin: 0 0 15px 0 !important;
}

.newsCon div[style*="background:linear-gradient"] p {
    color: #444444 !important;
    font-size: 15px !important;
    line-height: 2 !important;
    margin: 0 0 15px 0 !important;
}

.newsCon div[style*="background:linear-gradient"] br {
    display: block !important;
    content: "" !important;
    margin: 8px 0 !important;
}

@media screen and (max-width:768px) {
.newsCon div[style*="background:linear-gradient"] {
        padding: 20px 20px !important;
        margin: 30px 0 !important;
        border-left-width: 3px !important;
    }
}



/* Category description for SEO */
.cateDesc{padding:20px 0;border-bottom:1px solid #eee;margin-bottom:20px;}
.cate-desc-text{font-size:14px;line-height:1.8;color:#666;}

/* ===== FIX 2026-09-18 新闻列表排版：float 改为 Grid 三列 ===== */
@media (min-width: 1200px) {
    .indexContainer.new .layer6 ul {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px 2% !important;
    }
    .indexContainer.new .layer6 ul li {
        width: auto !important;
        float: none !important;
        margin: 0 !important;
    }
}


/* ============================================================================
   hntf-seo.css  ——  华南腾飞官网：SEO 模块 + 响应式修复 统一入口
   说明：本文件取代原先分散在 index.php / product1show.php 模板里的内联 <style>。
   .hntf-shell 只允许在此定义一次（历史 bug：曾在模板中重复定义并嵌套 <style>）。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   [0] 响应式图片基础约束 —— 修复富文本大图撑破移动端布局
   背景：CMS 后台插入的图片常带写死的 width/height（如资质图 width="1119"），
        在手机上会撑出横向滚动条（实测首页溢出 741px）。
   放最前面的原因：后续 .hntf-hotgrid img / .rel-grid img 等更具体的规则
        需要能覆盖这里的 height:auto，保持其固定图片高度。
   --------------------------------------------------------------------------- */
.MainList img,
.case_details img,
.layer4Box img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   [1] 统一版块容器 —— 与全站 .w1200 网格对齐（1200px 居中）
   --------------------------------------------------------------------------- */
.hntf-shell { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
@media (min-width: 1200px) { .hntf-shell { padding: 0; } }

/* ---------------------------------------------------------------------------
   [2] SKU 详情页分区卡片
   --------------------------------------------------------------------------- */
.hntf-secbox { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.hntf-secbox h3 { font-size: 16px; color: #0f172a; margin: 0 0 14px; border-bottom: 2px solid #2563eb; padding-bottom: 8px; }
@media (max-width: 767px) { .hntf-secbox { padding: 14px 12px; } }

/* ---------------------------------------------------------------------------
   [3] 首页 · 产品分类直达
   --------------------------------------------------------------------------- */
.hntf-catmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; margin-top: 15px; }
.hntf-catgrp { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 18px; }
.hntf-catlv1 { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px dashed #e5e7eb; font-size: 16px; line-height: 1.4; }
.hntf-catlv1 a { color: #1f2937; text-decoration: none; font-weight: 600; }
.hntf-catlv1 a:hover { color: #1a5fb4; }
.hntf-catlv2 { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hntf-catlv2 a { display: inline-block; padding: 5px 10px; background: #f5f7fa; border: 1px solid #e7ebf0; border-radius: 4px; font-size: 13px; color: #374151; text-decoration: none; transition: all .2s; }
.hntf-catlv2 a:hover { background: #eaf2fd; border-color: #1a5fb4; color: #1a5fb4; }
.hntf-num { font-style: normal; color: #9aa4b2; font-size: 12px; margin-left: 3px; }

/* ---------------------------------------------------------------------------
   [4] 首页 · 精选产品
   --------------------------------------------------------------------------- */
.hntf-hotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }
.hntf-hotgrid a { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; text-decoration: none; color: #1f2937; transition: all .2s; }
.hntf-hotgrid a:hover { border-color: #1a5fb4; box-shadow: 0 4px 14px rgba(26,95,180,.12); }
.hntf-hotgrid img { display: block; width: 100%; height: 140px; object-fit: contain; background: #f5f7fa; border-radius: 6px; }
.hntf-hotgrid h3 { display: -webkit-box; margin: 10px 0 4px; font-size: 14px; line-height: 1.45; font-weight: 500; height: 40px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hntf-hotgrid p { margin: 0; font-size: 12px; color: #6b7280; }

/* ---------------------------------------------------------------------------
   [5] SKU 详情页 · 同类产品 / 相关产品 / 相关方案 互链网格
   --------------------------------------------------------------------------- */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.rel-grid a { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; text-decoration: none; color: #1f2937; transition: all .2s; }
.rel-grid a:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.rel-grid img { display: block; width: 100%; height: 130px; object-fit: contain; background: #f5f7fa; border-radius: 6px; }
.rel-grid h4 { display: -webkit-box; margin: 10px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; height: 38px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rel-more { margin-top: 12px; text-align: right; font-size: 13px; }
.rel-more a { color: #2563eb; text-decoration: none; }
.rel-more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   [6] 移动端断点
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .hntf-catmap { grid-template-columns: 1fr; }
    .hntf-catgrp { padding: 14px; }
    .hntf-hotgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hntf-hotgrid img { height: 110px; }
    .rel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .rel-grid img { height: 100px; }
}

/* ---------------------------------------------------------------------------
   [P2-9] 首页服务项目卡片 — 移动端 2×2 网格修复
   问题：原 CSS 用 float:left + width:50%，4个卡片高度不一致时
         float 会错位堆叠成 2+1+1，而非整齐的 2×2。
   方案：移动端改用 flex-wrap + 等高，确保每行固定 2 列。
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.indexContainer .layer1 ul {
		display: flex;
		flex-wrap: wrap;
		overflow: visible;
		padding: 0 10px;
	}
	.indexContainer .layer1 ul li {
		float: none;
		width: 50%;
		padding: 20px 10px;
		box-sizing: border-box;
	}
	.indexContainer .layer1 ul li:nth-child(odd) { clear: left; }
	.indexContainer .layer1 ul li .icon img {
		display: block;
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   [P2-10] 优势保障图片移动端变形修复
   问题：img 标签的 width="988" HTML 属性在移动端覆盖了 CSS width:95%
   方案：用 max-width:100% + height:auto 强制约束
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.indexContainer .layer3 img {
		width: 95% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* ---------------------------------------------------------------------------
   [P3-3] 方案/产品详情页正文排版优化
   问题：.MainList p 无 font-size/line-height/margin 定义，裸 p 标签继承全局 reset
         导致字体小（可能12-13px）、间距紧凑（margin:0）、不可读
   方案：为 .MainList 内 p/h2/h3/ol/li 补充合理排版样式
   注意：不使用 !important，让内联 style 仍可覆盖
   --------------------------------------------------------------------------- */
.case_details .MainList p {
	font-size: 16px !important;
	line-height: 1.85 !important;
	color: #333 !important;
	margin: 0 0 16px 0 !important;
	text-align: justify !important;
}
.case_details .MainList p:last-child {
	margin-bottom: 0;
}
.case_details .MainList h2 {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #1a2744 !important;
	margin: 28px 0 16px !important;
	padding-bottom: 8px !important;
	border-bottom: 2px solid #e8ecf1 !important;
	line-height: 1.4 !important;
}
.case_details .MainList h3 {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #1e3a5f !important;
	margin: 24px 0 12px !important;
	line-height: 1.4 !important;
}
.case_details .MainList ol,
.case_details .MainList ul {
	margin: 0 0 16px 0;
	padding-left: 24px;
}
.case_details .MainList ol li,
.case_details .MainList ul li {
	font-size: 16px;
	line-height: 1.85;
	color: #333;
	margin-bottom: 8px;
}
.case_details .MainList ol li p,
.case_details .MainList ul li p {
	margin-bottom: 4px;
}
.case_details .MainList strong {
	color: #1a2744;
}
.case_details .MainList img {
	margin: 12px auto;
	display: block;
}

/* 移动端适配 */
@media (max-width: 767px) {
	.case_details .MainList p {
		font-size: 15px !important;
		line-height: 1.8 !important;
		margin-bottom: 14px !important;
	}
	.case_details .MainList h2 {
		font-size: 20px !important;
		margin: 22px 0 14px !important;
	}
	.case_details .MainList h3 {
		font-size: 17px !important;
		margin: 20px 0 10px !important;
	}
	.case_details .MainList ol,
	.case_details .MainList ul {
		padding-left: 20px;
	}
	.case_details .MainList ol li,
	.case_details .MainList ul li {
		font-size: 15px !important;
		line-height: 1.8 !important;
	}
}

/* ---------------------------------------------------------------------------
   [P3-5] 首页服务项目卡片图标图统一约束
   问题：icon 容器 250x210，但 img 没有尺寸约束，大图会撑满
   方案：统一限制 icon img 尺寸
   --------------------------------------------------------------------------- */
.indexContainer .layer1 ul li .icon img {
	max-width: 100% !important;
	max-height: 210px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

/* ---------------------------------------------------------------------------
   [P3-6] 企业简介页资质证书图片移动端居中
   问题：图片 style="float:left" width="1119" 固定左浮动，手机端不居中
   方案：移动端取消浮动，图片居中+自适应宽度
   --------------------------------------------------------------------------- */
/* PC端: 防止图片挡住下方导航栏 */
	.indexContainer.about .layer4Box {
		overflow: hidden !important;
	}
	.indexContainer.about .layer4 {
		overflow: hidden !important;
		height: auto !important;
		min-height: 695px !important;
	}
	.indexContainer.about .layer4Box p:last-child {
		clear: both !important;
		overflow: hidden !important;
	}
	.indexContainer.about .pageFull {
		clear: both !important;
	}
	
	@media (max-width: 767px) {
	.indexContainer.about .layer4Box p:has(img) {
		text-align: center !important;
		overflow: hidden !important;
	}
	.indexContainer.about .layer4Box img {
		float: none !important;
		display: block !important;
		margin: 12px auto !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
	}
	/* PC端: 图片后清除浮动，防止挡住导航栏 */
	.indexContainer.about .layer4Box p:has(img) + *,
	.indexContainer.about .layer4Box > p:last-child {
		clear: both !important;
	}
	.indexContainer.about .pageFull {
		clear: both !important;
		position: relative !important;
		z-index: 1 !important;
	}
	.indexContainer.about .layer4Box p {
		text-align: left;
	}
	.indexContainer.about .layer4Box p[style*="margin-left"] {
		margin-left: 0 !important;
	}
	.indexContainer.about .layer4Box span[style*="font-size:20px"] {
		font-size: 15px !important;
	}
}

/* ---------------------------------------------------------------------------
   [P4-1] PSI CLS 修复：给首页分类封面图设置固定宽高比
   问题：图片从数据库动态输出，无 width/height 属性导致布局偏移
   方案：通过 CSS aspect-ratio 预留空间
   --------------------------------------------------------------------------- */
.indexContainer .layer1 ul li .icon {
	aspect-ratio: 250 / 210;
	min-height: 210px;
	overflow: hidden;
}
.indexContainer .layer1 ul li .icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	max-width: 100% !important;
	max-height: 210px !important;
}

/* PC 端 CLS: 给所有图片预留尺寸 */
img[width][height] {
	aspect-ratio: attr(width) / attr(height);
}

/* ---------------------------------------------------------------------------
   [P4-2] PC端 CLS 修复：给所有屏幕尺寸的 icon 容器预留空间
   问题：P4-1 的 aspect-ratio 只在 @media(767px) 内，PC端没生效
   --------------------------------------------------------------------------- */
.indexContainer .layer1 ul li .icon {
	aspect-ratio: 250 / 210 !important;
	min-height: 210px !important;
	overflow: hidden !important;
}
.indexContainer .layer1 ul li .icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	max-height: 210px !important;
}

/* ---------------------------------------------------------------------------
   [P4-3] PC端 banner CLS 修复
   问题：swiper banner 图片加载后推动 indexContainer 布局偏移 0.4
   方案：给 banner 容器设置固定高度
   --------------------------------------------------------------------------- */
.indexContainer .banner {
	height: 480px !important;
	max-height: 480px !important;
	overflow: hidden !important;
}
.indexContainer .bannerBox {
	height: 480px !important;
	max-height: 480px !important;
	overflow: hidden !important;
}
.indexContainer .banner img,
.indexContainer .bannerBox img {
	width: 100% !important;
	height: 533px !important;
	object-fit: cover !important;
}


/* Keep the first frame identical before and after Swiper initialization. */
.indexbanner.banner{height:clamp(480px,33.3125vw,640px);min-height:0;overflow:hidden}
.indexbanner .swiper-container,.indexbanner .swiper-wrapper,.indexbanner .swiper-slide{height:100%}
.indexbanner .swiper-slide>a{display:block;height:100%;position:relative}
.indexbanner .swiper-slide img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover}
.indexbanner .swiper-slide{flex-shrink:0;width:100%}
.indexbanner .bannerBox{height:auto;max-height:none;overflow:visible}
.indexContainer .layer2 ul li img,.indexContainer .layer5 ul li img{object-fit:cover}
.top .topBox .logo img{width:280px;height:auto;max-width:100%}
.AppTop .logo img{width:190px;max-width:65vw;height:auto}
.hntf-num{color:#4b5563}
.hntf-perf-home .copyright .copyrightBox,.hntf-perf-home .copyright .copyrightBox a{color:#f2f4f7!important}
.hntf-perf-home .fixedSide ul li a p{color:#3d1a00}
.hntf-perf-home .footer .code img{height:auto}
body{color:#595959}
.hntf-perf-home .wow,.hntf-perf-home .ani{visibility:visible!important;animation:none!important}
.hntf-perf-home a:focus-visible,.hntf-perf-home button:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.hntf-perf-home .layer3>img{max-width:100%;height:auto}
.hntf-perf-home .layer4Box img{max-width:100%;height:auto}
.hntf-chat-status{position:fixed;right:18px;bottom:80px;z-index:10001;max-width:min(340px,85vw);padding:14px 18px;border:1px solid #d0d5dd;border-radius:8px;background:white;color:#344054;box-shadow:0 8px 24px #0002;line-height:1.6}
.hntf-chat-status[hidden]{display:none}
@media(max-width:1199px){.indexbanner.banner{height:480px}.indexbanner .bannerBox{padding:0 24px}.indexbanner .bannerBox p{font-size:14px;line-height:24px}.indexbanner .bannerBox h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.indexbanner *{animation:none!important;transition:none!important}}