﻿@import url(https://js01.v15cdn.com/single-template/public.css);
.wmpage210-page1 .wmpage210-page1-box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-left{width:44%;position:relative;z-index:2}
.wmpage210-page1 .wmpage210-page1-left img{position:relative;display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:5/4;border-radius:10px}
.wmpage210-page1 .wmpage210-page1-left::after{background:rgba(255,255,255,.4);content:'';position:absolute;left:0;top:0;width:100%;height:0;opacity:1;z-index:1;pointer-events:none}
.wmpage210-page1 .wmpage210-page1-left:hover::after{opacity:0;height:100%;transition:all .4s linear}
.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-card{display:inline-flex;justify-content:center;flex-direction:column;align-items:center;min-width:200px;height:170px;padding:0 20px;background:var(--color);position:absolute;right:-30px;bottom:-30px;border-radius:8px;z-index:3}
.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-num{font-size:var(--wmpage-font36);font-weight:var(--fontbold6);color:#fff;line-height:1.1}
.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-title{color:#fff}
.wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-right{width:50%}
.wmpage210-page1 .wmpage210-page1-right .wmpage210-page1-text{display:flex;align-items:center;text-transform:uppercase;color:var(--color);font-weight:var(--fontbold6);font-size:var(--wmpage-font15)}
.wmpage210-page1 .wmpage210-page1-right .wmpage210-page1-text em{margin-right:5px}
.wmpage210-page1 .wmpage210-page1-right .wmpage-title{color:var(--wmpage-color22);margin:3px 0 8px}
.wmpage210-page1 .wmpage210-page1-right .wmpage210-page1-desc{color:var(--wmpage-color8);margin-bottom:15px}
.wmpage210-page1 .wmpage210-page1-right ul{display:flex;flex-wrap:wrap;justify-content:space-between}
.wmpage210-page1 .wmpage210-page1-right ul li{width:50%;display:flex;align-items:center;margin-top:8px;color:var(--wmpage-color8);font-weight:var(--fontbold6)}
.wmpage210-page1 .wmpage210-page1-right li em{color:var(--color);margin-right:8px;font-weight:var(--fontbold5)}
.wmpage210-page1 .wmpage210-page1-btn a{display:inline-flex;justify-content:center;position:relative;align-items:center;padding:0 20px;min-width:160px;height:50px;z-index:1;transition:.5s;overflow:hidden;border:1px solid #a6a6a6;background-color:#fff;font-size:var(--wmpage-font17);text-transform:uppercase;color:#fff;font-weight:var(--fontbold6);-webkit-mask-position-x:0;-webkit-mask-position-y:0;transition:mask-position .7s steps(22),-webkit-mask-position .7s steps(22);margin-top:35px;border-radius:5px}
.wmpage210-page1 .wmpage210-page1-btn a:after{display:flex;align-items:flex-end;justify-content:flex-end;color:#fff;position:absolute;content:'';cursor:pointer;width:100%;height:100%;left:0;top:0;background-color:var(--color);background-image:url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);-webkit-mask:url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);mask:url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);-webkit-mask-size:2300% 100%;mask-size:2300% 100%;z-index:-1;-webkit-mask-position-x:0;-webkit-mask-position-y:0;transition:mask-position .7s steps(22),-webkit-mask-position .7s steps(22);filter:grayscale(1)}
.wmpage210-page1 .wmpage210-page1-btn a:hover{color:var(--color)}
.wmpage210-page1 .wmpage210-page1-btn a:hover:after{animation:page1 .7s steps(22) forwards}
.wmpage210-page1 .wmpage210-page1-btn a:not(:hover):after{animation:page1-reverse .7s steps(22) forwards}
@keyframes page1{0%{mask-position:100% 0;-webkit-mask-position-x:0;-webkit-mask-position-y:0}
100%{mask-position:0 0;-webkit-mask-position-x:100%;-webkit-mask-position-y:0}
}@keyframes page1-reverse{0%{mask-position:0 0;-webkit-mask-position-x:100%;-webkit-mask-position-y:0}
100%{mask-position:100% 0;-webkit-mask-position-x:0;-webkit-mask-position-y:0}
}@media screen and (max-width:1024px){.wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-left{width:100%;margin-bottom:30px}
.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-card{left:0;bottom:0;right:auto;border-radius:0 8px 0 0}
.wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-right{width:100%}
}@media screen and (max-width:500px){.wmpage210-page1 .wmpage210-page1-right ul li{width:100%}
.wmpage210-page1 .wmpage210-page1-left img{height:400px}
}



.banner-contant{position: absolute;width: 100%;top: 20%;text-align: center;}
.banner-contant .p1{font-size: 70px;line-height: 1;color: var(--color);font-weight: 600;text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;}
.banner-contant .p2{font-size: 48px;color: var(--color);font-weight: bold;text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;margin-top: 25px;}
.banner-contant .btns{display: flex;justify-content: center;margin-top: 50px;}
.banner-contant .btns a{font-size: 30px;color: #fff;background: var(--color);padding: 20px 35px;border: 5px solid #fff;line-height: 1;}
.bacnner3 .p1{display:inline-block;padding: 0 50px 20px;position: relative;z-index: 3;color: #fff;text-shadow: unset;}
.bacnner3 .p1::after{position: absolute;content: '';width: 100%;height: 25%;background: var(--color);left: 0;bottom: 20px;z-index: -1;}
.bacnner3 .p2{line-height: 1.25;text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;}
@media (max-width:1700px) {.banner-contant{top: 15%;}
.banner-contant .p1{font-size: 64px;}
.banner-contant .p2{font-size: 48px;line-height: 1;}}
@media (max-width:1640px) {.banner-contant{zoom: .9;}}
@media (max-width:1280px) {.banner-contant{zoom: .7;}}
@media (max-width:1024px) {.banner-contant{zoom: .6;}}
@media (max-width:768px) {.banner-contant{zoom: .5;}}
@media (max-width:550px) {.banner-contant{zoom: .4;}}
.hometitle{font-weight:700;font-size:40px;color:#000;line-height:1.25}
.padding{padding:4% 0}
.l-wrap{padding:0 30px;max-width:1580px;margin:0 auto}
.homehead{text-align:center}
.homeline{width:60px;height:8px;background:var(--color1);display:flex;margin:20px auto}
.hometxt{font-weight:400;font-size:20px;color:#000}
.homebtns{display:flex;justify-content:center;margin-top:15px}
.homebtns a{width:250px;height:60px;background:var(--color1);font-weight:500;font-size:25px;color:#fff;text-align:center;line-height:60px;position:relative;overflow:hidden;transition:background .35s ease,transform .35s ease,box-shadow .35s ease}
.homebtns a::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4),hsla(0,0%,100%,0));transform:skewX(-25deg);transition:left .55s ease}
.homebtns a:hover{background:var(--color);transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,82,164,.35)}
.homebtns a:hover::after{left:130%}
.home-solution{padding:54px 0}
.home-solution .contant{display:flex;gap:15px;margin-top:40px}
.home-solution .items{background:#fff;border:1px solid #d9d9d9;flex:1;transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.home-solution .items .img a{aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;overflow:hidden}
.home-solution .items .img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.home-solution .items:hover{transform: translateY(-6px);box-shadow: 0 14px 30px rgba(0, 0, 0, .14);background: var(--color);color: #fff;}
.home-solution .items:hover .img img{transform:scale(1.08)}
.home-solution .items .info{padding:16px 22px}
.home-solution .items .info .p1{font-weight:700;font-size:24px;line-height:1.25;margin-bottom:20px}
.home-solution .items .info .p2{font-weight:400;font-size:18px;line-height:23px}
.home-abouts{padding:80px 0 65px;background:url(/Content/uploads/2026173002/20260909175151a7b8e645778d4112a525c6113b4e6af9.webp) center no-repeat;background-size:cover}
.home-abouts .about-top{display:flex;align-items:center}
.home-abouts .about-top .info{flex:1;padding-right:6.5%}
.home-abouts .about-top .img{width:50%;overflow:hidden}
.home-abouts .about-top .img img{transition:transform .55s ease,filter .55s ease}
.home-abouts .about-top:hover .img img{transform:scale(1.06)}
.home-abouts .about-top .txt{font-size:18px;color:#000;line-height:28px;margin-top:25px}
.home-abouts .list{display:flex;flex-wrap:wrap;margin-top:30px;gap:20px}
.home-abouts .list li{width:45%}
.home-abouts .list li .p1{color:var(--color);font-size:30px;font-weight:700;line-height:1;margin-bottom:15px}
.home-abouts .list li .p2{font-size:18px;color:#000;line-height:1.25}
.home-abouts .homebtns{justify-content:flex-start;margin-top:25px}
.home-abouts .homedev{font-weight:700;font-size:24px;color:var(--color1);line-height:22px;margin-bottom:25px}
.home-abouts .hometxt{font-size:18px;color:#000;line-height:28px;margin-top:15px}
.home-abouts .about-bottom{overflow:hidden;margin-top:50px}
.home-abouts .aboutbutton-next,.home-abouts .aboutbutton-prev{width:62px;height:62px;background:#dedede;border-radius:50%;border:2px solid var(--color1);display:flex;justify-content:center;align-items:center;z-index:2;cursor:pointer;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.home-abouts .aboutbutton-next em,.home-abouts .aboutbutton-prev em{color:var(--color1);font-size:24px;width:24px;line-height:1;transition:color .3s ease}
.home-abouts .aboutbutton-next:hover,.home-abouts .aboutbutton-prev:hover{background:var(--color1);transform:translateY(-4px);box-shadow:0 8px 18px rgba(247,172,2,.45)}
.home-abouts .aboutbutton-next:hover em,.home-abouts .aboutbutton-prev:hover em{color:#fff}
.home-abouts .aboutsSwiper1 .swiper-slide img{transition:filter .45s ease}
.home-abouts .aboutsSwiper1 .swiper-slide:hover img{filter:brightness(1.15)}
.home-abouts .aboutbtn{display:flex;justify-content:center;gap:25px;margin-top:25px;position:relative}
.home-abouts .aboutbtn .box{display:flex;gap:25px;background:#e0e0e0;position:relative;z-index:5;padding:0 30px}
.home-abouts .aboutbtn::after{content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--color1);z-index:0}
.home-projects{padding:60px 0 70px}
.home-projects .contant{display:flex;gap:20px;flex-wrap:wrap;margin-top:40px}
.home-projects .contant .items{flex:0 0 calc((100% - 40px)/ 3);position:relative;overflow:hidden}
.home-projects .items img{width:100%;display:block;transition:transform .6s ease}
.home-projects .cards{position:absolute;width:100%;height:100%;top:65%;left:0;padding:25px 35px;display:flex;flex-direction:column;justify-content:end;transition:all .3s ease-in-out}
.home-projects .title{font-weight:700;font-size:24px;color:#fff;line-height:31px}
.home-projects .cards .line{width:40px;height:4px;background:var(--color1);display:block;margin:10px 0}
.home-projects .text{font-weight:400;font-size:15px;color:#fefefe;line-height:24px}
.home-projects .cards a{font-size:20px;color:var(--color1);display:flex;margin-top:10px;transition:color .3s ease,transform .3s ease}
.home-projects .contant .items:hover img{transform:scale(1.06)}
.home-projects .cards a:hover{color:#ffcf3d;transform:translateX(8px)}
.home-projects .cards .line,.home-projects .cards a,.home-projects .text{opacity:0}
.home-projects .contant .items:hover .cards{top:0;background:#17416bcc;justify-content: center;}
.home-projects .contant .items:hover .btn,.home-projects .contant .items:hover .line,.home-projects .contant .items:hover .text{opacity:1}
.home-certified{background:#eaeaea;padding:60px 0 50px;position:relative}
.home-certified::after{position:absolute;content:'';width:100%;height:30%;background:var(--color);bottom:0}
.home-certified .contant{padding: 35px 0;display: flex;justify-content: center;align-items: center;position: relative;}
.home-certified .cerSwiper1{padding:40px 5px 60px}
.home-certified .cerbutton-next,.home-certified .cerbutton-prev{width: 45px;height: 45px;background: rgba(247, 172, 2, 0);border: 2px solid #F7AC02;position: absolute;top: 50%;transform: translateY(-50%);display: flex;justify-content: center;align-items: center;cursor: pointer;transition: all .3s ease-in-out}
.home-certified .cerbutton-next em,.cerbutton-prev em{font-size: 22px;width: 22px;color: var(--color1);line-height: 1;transition: all .3s ease-in-out;}
.home-certified .cerbutton-next{left: -65px;}
.home-certified .cerbutton-prev{right: -50px;}
.home-certified .cerbutton-next:hover,.home-certified .cerbutton-prev:hover{background: var(--color1);}
.home-certified .cerbutton-next:hover em,.home-certified .cerbutton-prev:hover em{color: #fff;}
.home-certified .cerSwiper1 .swiper-slide.swiper-slide-active img{transform:scale(1.1)}
.home-certified .cerSwiper1 .swiper-pagination{bottom:0!important}
.home-certified .cerSwiper1 .swiper-pagination .swiper-pagination-bullet-active{background:var(--color1)!important}
.home-certified .cerSwiper1 .swiper-slide img{transition:transform .45s ease,filter .45s ease,box-shadow .45s ease}
.home-certified .cerSwiper1 .swiper-slide:hover img{filter:brightness(1.15);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.home-news{padding:50px 0 70px;background:#f2f2f2}
.home-news .news-list{margin-top:50px}
.home-inquiry{background:url(/Content/uploads/2026173002/202609091653576f98178c9fbb428c9f823b66bfd1d231.webp) center no-repeat;background-size:cover;padding:50px 0;margin-bottom: 20px;position: relative;}
.home-inquiry .l-wrap{display:flex;align-items:center;justify-content:space-between}
.home-inquiry .inquiry-left{width:45%}
.home-inquiry .inquiry-right{width:49.5%;background:linear-gradient(90deg,#0052a4 0,#00468b 100%);box-shadow:-3px 4px 9px 0 rgba(34,65,113,.46);border-radius:31px;padding:55px 45px}
.home-inquiry .inquiry-right .hometitle{color: #fff;}
.home-inquiry .inquiry-right .homeline {margin: 10px 0 15px;height: 5px;}
.home-inquiry .inquiry-right .wmkcfeedback input{width:48%}
.home-inquiry .inquiry-right .hometxt{color: #ffff;margin-bottom: 25px;}
.home-inquiry .inquiry-right .wmkcfeedback .send-btn{margin:20px auto 0;width:100%;border-radius:5px;background:var(--color1);transition:background .35s ease,transform .35s ease,box-shadow .35s ease}
.home-inquiry .inquiry-right .wmkcfeedback .send-btn:hover{background:#fff;transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,82,164,.4);color: var(--color);}
.home-inquiry .homeline{margin:20px 0 20px}
.home-inquiry .lists{margin-top:40px}
.home-inquiry .lists li{display:flex;align-items:baseline;gap:15px;font-weight:400;font-size:20px;color:#000;margin-bottom:15px;transition:color .3s ease}
.home-inquiry .lists li img{transition:transform .35s ease}
.home-inquiry .lists li:hover img{transform:translateX(6px) scale(1.1)}
.home-inquiry .lists li a{transition:color .3s ease}
.home-inquiry .lists li:hover a{color:var(--color)}
.home-inquiry::after{position: absolute;content: '';background: linear-gradient(90deg, #0052A4 0%, #F7AC02 100%);width: 100%;height: 20px;bottom: -20px;}
/* ================= responsive ================= */
@media (max-width:1640px){
    .l-wrap{padding:0 24px}
}
@media (max-width:1440px){
    .l-wrap{padding:0 22px}
    .hometitle{font-size:36px}
}
@media (max-width:1280px){
    .l-wrap{padding:0 20px}
    .hometitle{font-size:32px}
    .home-solution .items .info .p1{font-size:21px}
    .home-solution .items .info .p2{font-size:16px;line-height:21px}
    .home-abouts{padding: 55px 0;}
    .home-abouts .about-top .info{padding-right: 3%;}
    .home-abouts .list li .p1{font-size: 26px;}
    .home-abouts .about-top .txt{margin-top: 15px;}
    .home-abouts .list{margin-top: 20px;}
    .homebtns a{width: 220px;height: 55px;font-size: 20px;line-height: 55px;}
    .home-projects .contant{margin-top: 30px;}
    .home-projects .contant .items{flex: 0 0 calc((100% - 20px) / 2);}
    .home-certified .contant{padding: 15px 0;width: 90%;margin: 0 auto;}
    .homeline {height: 5px;background: var(--color1);display: flex;margin: 10px auto;}
}
@media (max-width:1024px){
    .hometitle{font-size:30px}
    .home-solution{padding:46px 0}
    .home-abouts{padding:64px 0 50px}
    .home-projects{padding:50px 0 56px}
    .home-certified{padding:50px 0 42px}
    .home-news{padding:44px 0 56px}
    .home-inquiry{padding:46px 0}
    .home-solution .contant{flex-wrap:wrap}
    .home-solution .items{flex:0 0 calc((100% - 15px)/ 2)}
    .home-abouts .about-top{flex-direction:column;align-items:flex-start;gap:30px}
    .home-abouts .about-top .info{width:100%;padding-right:0}
    .home-abouts .about-top .img{width:100%}
    .home-abouts .about-top .img img{width:100%;height:auto;display:block}
    .home-projects .contant .items{flex:0 0 calc((100% - 0px)/ 1)}
    .home-projects .contant .items:hover .cards{justify-content: flex-end;}
    .home-inquiry .l-wrap{flex-direction:column;align-items:stretch;gap:36px}
    .home-inquiry .inquiry-left{width:100%}
    .home-inquiry .inquiry-right{width:100%;padding:42px 34px}
    .home-inquiry .lists li{font-size:18px}
    .home-certified .contant{width: 85%;}
    .home-projects .title{font-size: 22px;}
}
@media (max-width:768px){
    .l-wrap{padding:0 18px}
    .hometitle{font-size:27px}
    .hometxt{font-size:17px}
    .home-solution{padding:40px 0}
    .home-abouts{padding:52px 0 42px}
    .home-projects{padding:42px 0 50px}
    .home-certified{padding:44px 0 38px}
    .home-news{padding:38px 0 48px}
    .home-inquiry{padding:42px 0}
    .home-solution .items .info .p1{font-size:20px}
    .home-solution .items .info .p2{font-size:15px;line-height:20px}
    .home-abouts .list li .p1{font-size:27px}
    .home-abouts .about-bottom{margin-top:40px}
    .home-abouts .aboutbutton-next,.home-abouts .aboutbutton-prev{width:50px;height:50px}
    .home-abouts .aboutbutton-next em,.home-abouts .aboutbutton-prev em{font-size:20px;width:20px}
    .home-abouts .aboutbtn .box{gap:14px;padding:0 18px}
    .home-news .news-list{margin-top:30px}
    .home-certified .cerSwiper1{padding:36px 5px 52px}
}
@media (max-width:550px){
    .l-wrap{padding:0 14px}
    .hometitle{font-size:23px}
    .hometxt{font-size:15px;line-height:1.4}
    .homeline{width:46px;height:6px;margin:14px auto}
    .home-solution .contant{margin-top:26px;gap:12px}
    .home-solution .items{flex:0 0 100%}
    .home-abouts .list li{width:100%}
    .home-projects .contant{margin-top:26px;gap:14px}
    .home-projects .contant .items{flex:0 0 100%}
    .home-projects .cards{padding:18px 22px}
    .home-projects .title{font-size:20px;line-height:1.35}
    .home-projects .text{font-size:14px;line-height:22px}
    .home-projects .cards a{font-size:18px}
    .home-inquiry .inquiry-right{padding:30px 18px;border-radius:22px}
    .inquiry-right .wmkcfeedback input{width:100%}
    .home-inquiry .lists li{font-size:16px;align-items:flex-start}
    .homebtns a{width:230px;height:54px;font-size:22px;line-height:54px}
    .home-abouts .homedev{font-size:20px}
}
@media (hover:none),(max-width:768px){
    .home-projects .cards{top:0;background:#17416bcc}
    .home-projects .cards .line,.home-projects .cards a,.home-projects .cards .text{opacity:1}
}






