/* CSS Document */
@import url("core.css?v=101");
*{ transition:.3s;}
body,html{color:#514E4C;}
body {overflow-x:hidden;}
b, h1, h2, h3, h4, h5, h6, strong { color:#1e2022 }
.container{margin:0 10% }
:root {
    --logo-color: #0e7dc2;
    --font-gray: #d4a21e;
    --yellow-color:#ff7a01;
    --margin-space-top:80px;
    --margin-space-bottom:80px;
    --padding-space-top:80px;
    --padding-space-bottom:80px;
}
.margin-space-top{margin-top:var(--margin-space-top)}
.margin-space-bottom{margin-bottom:var(--margin-space-bottom)}
.padding-space-top{padding-top:var(--padding-space-top)}
.padding-space-bottom{padding-bottom:var(--padding-space-bottom)}
/***/
.topbar { background:#abd2ea; padding:0 310px; height:60px; display: flex; justify-content: left; align-items: center; position: relative; }
.topbar a.email i, .topbar a.address i { display:inline-block; width:30px; height:30px; line-height:30px; text-align:center; margin-right:5px; background:var(--logo-color); border-radius: 50px; }
.topbar a.email i:before, .topbar a.address i:before{background:#fff;width:16px;height:16px;}
.topbar a.address:hover, .topbar a.email:hover{color:var(--logo-color)}
.topbar a.email:hover i, .topbar a.address:hover i{color:#fff}
.topbar a.address, .topbar a.email { font-size:16px; margin-left: 38px; }
.topbar .share_link { position: absolute; right: 0; top: 0; width: 310px; display: flex; height: 100%; align-items: center; }
.topbar .share_link a { width: 36px; height: 36px; display: flex; background: rgba(255, 255, 255, 0.2); align-items: center; justify-content: center; margin: 0 5px; font-size: 18px; border-radius: 50px; }
.topbar .share_link a:hover{background:var(--logo-color);color:#fff}
.topbar .share_link em { display: flex; height: 100%; background: rgba(255, 255, 255, 0.2); width: 1px; margin: 0 15px; }
.topbar .search-cion { font-size: 18px; cursor: pointer; }
.topbar .search-cion i { }
.search-input { position: absolute; right: 0; top: 0; display: none; }
.search-input input { }
.search-input button { }
/***/
header { color:#fff; background: #fff; position:relative; z-index: 990; -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.1); -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.1); box-shadow:2px 2px 10px rgba(0,0,0,0.1);}
header a { color: #fff; }
.header { position: relative; padding: 0 310px; height:80px; }
.logo { position: absolute; left: 0; top: -60px; background: #fff; width: 310px; border-right: 1px solid #ddd; height: 140px; display: flex; justify-content: center; text-align: center; flex-wrap: nowrap; align-content: center; align-items: center; }
.logo img { width: auto; height: 27px; }
/**/
.online_tel {position:absolute;right: 35px;top: 15px;padding-left:50px}
.online_tel label {display:block;position:relative;color:#666;font-weight:600;padding-top: 3px;padding-bottom: 5px;}
.online_tel label:before{content:"";display:block;width:45px;height:45px;background-size:45px;position:absolute;left:-50px;top:0;background: url(../images/icon_konline.jpg) no-repeat center;border-radius: 50px;background-size: 45px;
}
.online_tel a{color:#000;font-size:20px;font-weight:600}
/**/
nav { --nav-li-margin-left:23px;--nav-line-height:80px;--nav-a-size:16px;}
nav li { float: left; margin-left:var(--nav-li-margin-left); position:relative; }
nav li a { font-size: var(--nav-a-size);font-weight:600; color: #000; line-height: var(--nav-line-height); position:relative;z-index:2;
    padding:0 15px;
}
nav li ul {position:absolute; left:0;top:var(--nav-line-height); 
         width:330px;
         background:#fff;
         visibility: hidden;opacity: 0;
        -webkit-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%);
        -khtml-box-shadow: 0 15px 30px -10px rgba(0,0,0,9%);
        -moz-box-shadow: 0 15px 30px -10px rgba(0,0,0,9%);
        -ms-box-shadow: 0 15px 30px -10px rgba(0,0,0,9%);
        -o-box-shadow: 0 15px 30px -10px rgba(0,0,0,9%);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%);
        -webkit-transition: all 300ms linear 0ms;
        -khtml-transition: all 300ms linear 0ms;
        -moz-transition: all 300ms linear 0ms;
        -ms-transition: all 300ms linear 0ms;
        -o-transition: all 300ms linear 0ms;
        transition: all 300ms linear 0ms;
        transform-origin: 0 0 0;
        -webkit-transform-origin: 0 0 0;
        -ms-transform-origin: 0 0 0;
        -o-transform-origin: 0 0 0;
        text-align: left;
        }
nav li ul{
    -webkit-transform: scaleY(0);
    -khtml-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    padding:10px 0;
}
nav li li{ float:none; margin:0; }
nav li li a{line-height:normal;padding:8px 25px;display:block}
nav li.selected ul{-webkit-transform: scaleY(1);
    -khtml-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    visibility:visible;
    opacity: 1;
    -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
nav li>a::before {
    width: var(--beforeWidth, 0);
    right: var(--beforeRight, auto);
    left: var(--beforeLeft, 0);
}
nav li>a i:before{background-image:url(../images/chevron_right_24dp_000_FILL0_wght400_GRAD0_opsz24.png) !important;transform:rotate(90deg) translate(4px,0px) !important}
nav li>a::after, nav li>a::before {
    position: absolute;
    content: '';
    padding-block: 20px;
    background-color: var(--logo-color);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transition: width .3s ease, left .3s ease, right .3s ease;
    -khtml-transition: width .3s ease,left .3s ease,right .3s ease;
    -moz-transition: width .3s ease,left .3s ease,right .3s ease;
    -ms-transition: width .3s ease,left .3s ease,right .3s ease;
    -o-transition: width .3s ease,left .3s ease,right .3s ease;
    transition: width .3s ease, left .3s ease, right .3s ease;
    z-index: -1;
}
nav li>a{--beforeWidth:0;--beforeRight:auto;--beforeLeft:0}
nav li>a:hover,nav li.selected>a{--beforeWidth:100%;--beforeRight:0;--beforeLeft:0;color:#fff}
nav li>a:hover i:before,nav li.selected>a i:before{background-image:url(../images/chevron_right_24dp_FFFFFF.png) !important}
nav li li>a::after, nav li li>a::before {display:none}
nav li li>a:hover{color:var(--logo-color)}
/**/
#scrollTop{position:fixed;right:15px;bottom:25px;z-index:990;border:1px solid var(--logo-color);width:45px;height:45px;border-radius:50px;cursor:pointer;display:none;z-index:90;background:#fff}
#scrollTop i{font-size:25px;color:var(--logo-color);line-height:40px;display:block;text-align:center;}
#scrollTop i:before{width:40px;height:40px;background-size:24px;background-image:url(../images/chevron_right_24dp_0E7DC2.png);transform:rotate(270deg)}
#scrollTop:hover{background:var(--logo-color);color:#fff}
#scrollTop:hover i:before{background-image:url(../images/chevron_right_24dp_FFFFFF.png);}
/**/
footer {padding-top: 60px;padding-bottom: 30px;background:#fff}
footer .container { display: flex; flex-wrap: wrap; }
.f-logo {width: 22%;}
.f-logo p { font-size: 18px; line-height: 1.3; color: #000; margin: 25px 0; }
.flogo { }
.flogo img { width: auto; height: 22px; }
.fsubscribe {border: 1px solid var(--logo-color);border-radius: 5px;padding: 5px;}
.fsubscribe .tnp-subscription{width:100%}
.fsubscribe form{display: flex;flex-wrap: wrap;}
.fsubscribe label{display:none !important}
.fsubscribe .tnp-field-email{border: 0;width: calc(100% - 125px);padding-left:5px;padding-right:10px}
.fsubscribe .tnp-field-email input{background:none;width:100%;border:0; padding: 10px 0;}
.fsubscribe .tnp-field-button{width:125px;}
.fsubscribe .tnp-submit{padding:12px 0;text-align:center;background: var(--yellow-color);border: 0;border-radius: 5px;color: #fff;font-size: 15px;font-weight: 600;cursor:pointer;display:block;width: 100%;}
.fsubscribe button i{margin-left:8px;transform:rotate(320deg);}
.fshare {margin-top: 25px;}
.fshare a {display: inline-block;background: #ecf3f6;color: #333;width: 36px;height: 36px;text-align: center;line-height: 36px;border-radius: 50px;font-size: 18px;margin-right: 10px;}
.fshare a:last-child { margin-right:0 }
.fshare a:hover{background:var(--logo-color);color:#fff}
footer .fshare i:before{background-color:#000!important;}
footer .fshare a:hover i:before{background-color:#fff!important;}
/**/
.f-menu {width: 47%;padding-left: 60px;}
.f-menu b {display: block;font-size: 22px;margin-bottom: 20px;}
.f-menu  ul{display: flex; flex-wrap: wrap;}
.f-menu li {margin-right: 40px;}
.f-menu li:last-child{margin-right:0}
.f-menu p {margin-bottom: 15px;line-height: 1.3;font-size: 18px;}
.f-menu p a { }
.f-menu a:hover{color:var(--logo-color)}
/***/
.f-contact {width: 31%;line-height: 1.3;font-size: 18px;color: #000;}
.f-contact b {display: block;font-size: 22px;margin-bottom: 20px;}
.f-contact p {position: relative;padding-left: 30px;margin-bottom: 15px;}
.f-contact p i:before{background:#000;transform:translateY(3px)}
.f-contact p i {font-size: 20px;position: absolute;left: 0;top: 0;}
.f-contact p a { }
.f-contact a:hover{color:var(--logo-color)}
/**/
copyright {width: 100%;margin-top: 35px;border-top: 1px solid #ddd;padding-top: 35px;font-size: 18px;color: #000;position: relative;}
copyright span {position: absolute;right: 0;top: 35px;}
copyright span a { }
copyright span a:hover{color:var(--logo-color)}
copyright span em {margin: 0 15px;color: #999;}
/***/
#banner-slider { }
#banner-slider img{ display:block; width:100%; height:auto }
#banner-slider .swiper-pagination-b { position:static; max-width:1200px; margin:0 auto; text-align:center }
#banner-slider .swiper-pagination-b * { opacity:1; cursor:pointer; background:none; width:18px; padding:2px; height:18px; margin-left:10px; outline:none; border:2px solid rgba(255, 255, 255, 0); -webkit-border-radius:35px; border-radius:35px; -moz-border-radius:35px; }
#banner-slider .swiper-pagination-b span:before { width:10px; height:10px; content:""; background:#fff; display:block; -webkit-border-radius:35px; border-radius:35px; -moz-border-radius:35px; }
#banner-slider .swiper-pagination-b .swiper-pagination-bullet-active { border-color:rgba(255, 255, 255, 1) }
#banner-slider .swiper-pagination-click { position:absolute; right:0; bottom:20px; width:100%; z-index:990 }
.banner-postion-box { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; }
.banner-postion-left-center { justify-content:left; align-items:center; padding-left:10%; }
.banner-postion-center-center { justify-content:center; align-items:center;text-align:center}
.banner-postion-center-center .banner-postion-container{max-width:80%;}
.banner-postion-container { max-width:600px; }
.banner-postion-container h3 { font-size:45px; line-height:1.2; font-weight:600; color:#fff }
.banner-postion-container p { margin-top:20px; color:#fff; font-size:20px; line-height:1.3; display: block; }
.banner-postion-container em { display: inline-block; margin: 0 15px; color: #fff; font-size: 15px; vertical-align: middle; }
.click-req { display: inline-block; background-color:var(--yellow-color); font-size:16px; padding: 15px 20px; border-radius:55px; color: #fff; margin-right: 20px;}
.click-req i { }
.click-view { color: #fff; font-size: 18px; }
.click-view:hover{color:var(--logo-color);}
.click-req:hover{background-color:var(--logo-color);color:#fff}
/**/
.index-h2 { text-align:center; line-height: 1.3; margin-bottom:35px}
.index-h2 label { background-color:rgba(14, 125, 194, 0.2); color:#000; font-size:12px; border-radius:50px; display:inline-block; padding:10px 15px;font-weight:600; }
.index-h2 h2,.index-h2 h1 { font-size: 35px; font-weight: 600; margin-top:10px; }
.index-h2 p { font-size: 20px; line-height: 1.3; margin-top: 15px; }
/**/
.index-cats-box{}
.index-cats-box .container{max-width:100%;margin-right:0%;}
/**/
#swiper-slide-products{--slide-products-padding-top:50px;
--slide-products-padding-bottom:50px;
--slide-products-h3:25px;
--slide-products-p:18px;
--slide-products-p-margin-top:25px;
--slide-products-button-bottom:70px;
--slide-products-button-width:50px;
}
#swiper-slide-products{padding-bottom:var(--slide-products-button-bottom);}
#swiper-slide-products .swiper-slide{width:395px;height:680px;}
#swiper-slide-products .thumb{width:100%;height:100%;border-radius:10px}
#swiper-slide-products .desc{position:absolute;left:0;top:0;width:100%;height:100%;background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 51%, rgba(0,0,0,0.6) 75%);
    padding:var(--slide-products-padding-top) var(--slide-products-padding-bottom);line-height: 1.3;border-radius:10px;color:#fff}
#swiper-slide-products .swiper-slide:hover .desc{background: linear-gradient(0deg, rgba(14, 125, 194,0.1) 0%, rgba(14, 125, 194,0.3) 51%, rgba(14, 125, 194,0.6) 75%);}
#swiper-slide-products h3{font-size:var(--slide-products-h3);font-weight:600;color:#fff}
#swiper-slide-products p{font-size:var(--slide-products-p);margin-top:var(--slide-products-p-margin-top)}
#swiper-slide-products .more{border-radius:5px;background-color:var(--yellow-color);color:#fff;padding:12px 15px;font-size:15px;position:absolute;
    left:var(--slide-products-padding-top);bottom:var(--slide-products-padding-bottom);font-weight: 600;
}
#swiper-slide-products .more i:before{transform:none}
.swiper-prev-products i:before,.swiper-next-products i:before{color:#333;background:url(../images/chevron_right_24dp_000.png) no-repeat center;width:24px;height:24px;display:block;transform:translateY(-4px)}
.swiper-prev-products i:before{transform:rotate(180deg) translateY(4px)}
.swiper-prev-products,.swiper-next-products{width:var(--slide-products-button-width);height:var(--slide-products-button-width);position:absolute;bottom:0;border:1px solid #666;text-align:center;line-height:var(--slide-products-button-width);font-size:25px;border-radius:50px;z-index:10;cursor:pointer}
.swiper-next-products{right:10%}
.swiper-prev-products{right:10%;margin-right:calc(var(--slide-products-button-width) + 15px);}
#swiper-slide-products .swiper-button-disabled{opacity:0.5}
/**/
.index-app-box { background: #d2e3ee url(../images/application_bg.jpg); height: 862px; }
.index-app-box .container{padding-left:18%}
.index-app-box .index-h2{text-align:right;position:relative;margin-bottom:0}
.index-app-box label {position:absolute;left:0;top:10px;background:var(--logo-color);color:#fff}
.index-app-ul { display: flex; flex-wrap:wrap}
.index-app-ul li { width: calc(33.333333% - 20px); height:456px;padding:50px 40px;margin-top:110px; background: #fff; border-radius:10px; margin-right:30px; position: relative; line-height: 1.2;  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
.index-app-ul li em { width: 110px; height: 110px; left: 40px; top: -50px;  display: block; background: #fff; text-align: center; padding: 15px; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 150px; position: absolute;}
.index-app-ul li em img { width: 100%; height: auto; }
.index-app-ul h3 { font-size: 20px; font-weight: 600; margin-top: 55px; }
.index-app-ul p { font-size: 16px; color: #333; margin: 15px 0; }
.index-app-ul a { border: 1px solid #000; display: block; border-radius: 50px; position: relative; padding: 15px 20px; }
.index-app-ul a i { position: absolute; right: 10px; top: 6px; width: 35px; height: 35px; padding:2px; background: #000; color: #fff; border-radius: 50px; text-align: center; line-height: 35px; }
.index-app-ul li:last-child{margin-right:0}
.index-app-ul li:hover {background:var(--logo-color);}
.index-app-ul li:hover *{color:#fff}
.index-app-ul li:hover a{border-color:#fff}
.index-app-ul li:hover i{background:#fff}
.index-app-ul li:hover i:before{background-image:url(../images/arrow_outward_24dp_194189.png)}
.index-app-ul p.view{padding:0;margin:0;position:absolute;left:40px; bottom:50px;right:40px}
/***/
.odm-ul { display: flex; flex-wrap: wrap; }
.odm-ul li { width:calc(33.333333% - 20px); margin-right:30px; border: 1px solid var(--logo-color); border-radius: 10px; margin-top: 65px; padding: 30px; line-height: 1.3; font-size: 16px; color: #333; position: relative; height:280px; }
.odm-ul li:nth-child(-n+3){}
.odm-ul li:nth-child(3n) {margin-right:0}
.odm-ul li em { display: block; width: 72px; height: 72px; border: 1px solid var(--logo-color); border-radius: 100px; text-align: center; padding: 15px; position: absolute; left: 30px; top: -35px; background: #fff; }
.odm-ul li em img { width: 100%; height: auto; }
.odm-ul li h3 { font-size: 20px; font-weight: 600; display: block; margin-bottom: 15px; margin-top: 35px; }
.odm-ul li p { }
.odm-ul li a { border: 1px solid #333; border-radius: 5px; padding: 12px 25px; position: absolute; left: 30px; bottom: 30px; }
.odm-ul li a i:before{background-image:url(../images/arrow_outward_24dp_1F1F1F.png)}
.odm-ul li:hover{background:var(--logo-color);color:#fff}
.odm-ul li:hover h3{color:#fff}
.odm-ul li:hover a{border-color:#fff;background:#fff;color:var(--logo-color)}
.odm-ul li:hover i:before{background-image:url(../images/arrow_outward_24dp_194189.png)}
/****/
.index-cert-box { background:url(../images/map_bg.jpg) no-repeat center top; height:1000px;}
.index-cert-box .index-h2 label { color: #fff; background: var(--logo-color); }
.index-cert-box .index-h2 h2 { color: #fff; }
.index-cert-box .index-h2 p { color: #fff; }
.cert-p { text-align:center;padding:80px 0; }
.cert-p img { width:auto; height:100px }
#swiper-slide-cert { }
#swiper-slide-cert .swiper-slide {background:#fff;border-radius:5px;padding:45px;line-height: 1.2; height:auto}
#swiper-slide-cert .swiper-slide label { }
#swiper-slide-cert .swiper-slide h3 { font-size: 18px; font-weight: 600; margin-top: 10px; margin-bottom: 15px; }
#swiper-slide-cert .swiper-slide p { font-size: 15px; line-height: 1.5; }
#swiper-slide-cert .usericon {position: relative;border-top: 1px solid #ddd;margin-top: 20px;padding-top: 20px;font-size: 13px;color: #333;}
#swiper-slide-cert .usericon img { width: 60px; float: left; margin-right: 15px; }
#swiper-slide-cert .usericon b { display: block; font-size: 15px; margin-top: 10px; margin-bottom: 5px; }
#swiper-slide-cert .usericon:before{content:"";width:118px;height:16px;background:url(../images/star_icon.jpg) no-repeat;display:block;position:absolute;right:0;top:30px}
#swiper-slide-cert  .swiper-pagination-cert { position:static; max-width:1200px; margin:0 auto; text-align:center; margin-top:60px; }
#swiper-slide-cert  .swiper-pagination-cert * { opacity:1; cursor:pointer; background:none; width:18px; padding:2px; height:18px; margin-left:10px; outline:none; border:2px solid rgba(255, 255, 255, 0); -webkit-border-radius:35px; border-radius:35px; -moz-border-radius:35px; }
#swiper-slide-cert  .swiper-pagination-cert span:before { width:10px; height:10px; content:""; background:#fff; display:block; -webkit-border-radius:35px; border-radius:35px; -moz-border-radius:35px; }
#swiper-slide-cert  .swiper-pagination-cert .swiper-pagination-bullet-active { border-color:rgba(255, 255, 255, 1) }
#swiper-slide-cert .swiper-pagination-click { position:absolute; right:0; bottom:20px; width:100%; z-index:990 }
/****/
.index-why-box { }
.index-why-box .index-h2{text-align:left}
.index-why-box .container { display:flex; flex-wrap:wrap }
.why_desc { width:38%;order:2; padding:35px 0;}
.why_desc_p {font-size: 18px;line-height: 1.3;}
.why_ems {display: flex;flex-wrap: wrap;margin: 50px 0;}
.why_ems li{ width: 33.333333%;text-align: center;}
.why_ems label {font-size: 35px;font-weight: 600;position: relative;color: #000;font-family:'Montserrat',Georgia,'Arial', 'Montserrat','Noto Sans SC'}
.why_ems label em {position: absolute;left:100%;top: 0;font-size: 20px;font-weight: normal;}
.why_ems p {font-size: 18px;display: block;padding-top: 10px;font-weight: 400;}
.about_us {background: var(--yellow-color);border-radius: 5px;color: #fff;padding: 15px 25px;font-weight: 600;font-size: 16px;display: inline-block;}
.about_us i{transform: translateY(-2px);}
.about_us:hover{background-color:var(--logo-color);color:#fff}
.why_ul {width:62%;padding-right:80px;display: flex;flex-wrap: wrap;color:#fff}
.why_li {width: 20%;border-radius: 10px;position: relative;background-size: cover;background-position: center;background-repeat: no-repeat;}
.why_li.on {width: calc(60% - 40px);}
.why_li:before{content:"";display:block;position:absolute;left:0;top:0;height:100%;width:100%;background: linear-gradient(0deg, rgba(14, 125, 194,0.1) 0%, rgba(14, 125, 194,0.3) 51%, rgba(14, 125, 194,0.6) 75%);border-radius: 10px;}
.why_li label {position:absolute;z-index:15;left: 50%;top: 35px;font-size: 25px;color: #fff;font-weight: 600;width: 350px;transform: rotate(90deg);transform-origin: 0;text-transform: uppercase;letter-spacing: 2px;font-family:'Montserrat',Georgia,'Arial', 'Montserrat','Noto Sans SC'}
.why_li p {position:absolute;z-index:15;visibility:hidden;left: 35px;bottom: 35px;font-size: 25px;font-weight: 600;}
.why_li.on label{visibility:hidden;}
.why_li.on p{visibility:visible}
.why_li.on:before{opacity:0}
.why_li+.why_li{margin-left:20px}
/***/
.index-needs{background:var(--logo-color);padding-top:30px;color:#fff;line-height:1.3}
.index-needs .container{background:url(../images/needs.jpg) no-repeat right bottom;height:433px;display: flex;align-items: center;justify-content: left;}
.index-needs h2{font-size: 35px;font-weight:600;margin-bottom: 35px;color:#fff}
.index-needs a{background:var(--yellow-color);color:#fff;font-weight:600;font-size:16px;padding:15px 25px;border-radius:5px;display:inline-block}
.index-needs p{font-size: 20px;max-width: 470px;margin-bottom: 35px;}
.index-needs a i{}
.index-needs a:hover{background:#fff;color:var(--logo-color)}
.index-needs a:hover i:before{background-image:url(../images/arrow_outward_24dp_194189.png)}
/**/
.page-needs{background:url(../images/product/ads-pro.jpg) no-repeat center bottom;padding-top:0px;color:#fff;line-height:1.3}
.page-needs .container{height:433px;display: flex;align-items: center;justify-content: left;}
.page-needs-title h2{font-size: 35px;font-weight:600;margin-bottom: 35px;color:#fff}
.page-needs-title a{background: var(--yellow-color);color: #fff;font-weight:600;font-size:16px;padding:15px 25px;border-radius:5px;display:inline-block;border: 1px solid var(--yellow-color);}
.page-needs-title p{font-size: 20px;width: 470px;margin-bottom: 35px;}
.page-needs-title a i{}
.page-needs-title a.quote:hover i:before{background-image:url(../images/arrow_outward_24dp_FF7A01_FILL0_wght400_GRAD0_opsz24.png)}
.page-needs-title a:hover{}
.page-needs-title a.quote:hover{background:none;color:var(--yellow-color)}
.page-needs-title a.catalogue:hover{background:var(--logo-color);color:#fff;border-color:var(--logo-color)}
.page-needs-title a.catalogue{margin-left:25px;background:none;border-color:#fff;color: #fff;}
/**/
.page-needs-title{width: 530px;}
.odm-three-ul{width: calc(100% - 530px - 100px);margin-left: 100px;display: flex;flex-wrap: wrap;}
.odm-three-ul li{width: calc(33.3333333% - 20px);font-size: 16px;line-height: 1.3;text-align: center;background: rgba(255,255,255,0.2);margin-right: 30px;
                padding:35px 35px;border-radius:10px}
.odm-three-ul li:last-child{margin-right:0}
.odm-three-ul em{border-radius: 50px;background: #fff;width: 85px;height: 85px;display: inline-block; padding:15px;}
.odm-three-ul img{ width: 100%;height: auto;}
.odm-three-ul p{font-size: 16px;margin-top:20px}
/**/
/**/
#kefu{position: fixed;right: 0; top:35%;text-align: right;z-index: 990;}
#kefu ul{}
#kefu li{width:45px;position: relative;margin-bottom:3px;text-align: left;}
#kefu li p{display: none;width:250px;height:100%;position:absolute;right:100%;top: 0;background: var(--logo-color);color: #fff;text-align:left;padding-left:15px;font-size: 16px;line-height:45px}
#kefu li p a{color:#fff;vertical-align:top;}
#kefu li p{width: 240px;white-space: nowrap;}
#kefu li.tel p{width:200px}
#kefu li.email p{width:230px}
#kefu li i{width:100%;height:45px;border-radius:5px;border:1px solid var(--logo-color);display: block;background-color:#fff;background-repeat:no-repeat;background-position:center;box-shadow:2px 5px 10px 0px rgba(0, 0, 0, 0.1);text-align: center;display: flex;justify-content: center;align-items: center;}
#kefu li:hover p,#kefu li.hover p{display:block}
#kefu li i:before{background:var(--logo-color);transform: none;}
#kefu li.hover i{background:var(--logo-color);border-radius:0}
#kefu li.hover i:before{background-color:#fff}
