.container{margin-right: auto;margin-left: auto; }
.ex-3{ padding-left: -1em; padding-right: -1em;}
.col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }

@media screen and (max-width:576px) {
  /*general*/
  body{width: 100%;max-width: 100%; min-width: 0;}
  .pconly{display: none;}
  .col-sm-12{width: 100%; max-width: 100%; flex-basis: 100%;}
  .col-sm-6{width: 50% !important;flex: 0 0 50%;max-width: 50%; padding: 6px;}
  .col-sm-6:nth-child(2n+1){padding-left: 15px;}
  .col-sm-6:nth-child(2n){padding-right: 15px;}
  .col-sm-4{width: 33.333% !important;flex: 0 0 33.333%;max-width: 33.333%; padding: 6px;}
  .py-sm-2{padding-top: .5em !important; padding-bottom: .5em !important;}
  .m-px-10{padding-left: 9px; padding-right: 9px;}
  .pb-3{padding-bottom: .6em !important;}
  .flex-sm-col{flex-direction: column}
  .py-sm-4{padding-top: 1em !important; padding-bottom: 1em !important;}
  .p-sm-4{padding: 1em !important;}

  .section .hd h2{font-size: 1.25rem; padding: 0 1rem;}
  .setion  .hd h3{font-size: 1rem;}
  .hd h3{font-size: 1rem; text-align: left;padding: 1rem;}

  .mnav a{color:#fff}

  .col-3{padding: 6px;}
  .col-3:first-child{padding-left: 15px;}
  .col-3:last-child{padding-right: 15px;}
  header{height:5em}
  header .container{padding: 0;}
  header .top{display: none;}

  .g-list .cap img{height: 100%;}
  .g-list .col-sm-12 .card{ max-height: 60vw;}
  .g-list .cap .card img{width: 100%;}
  .g-list .col-6 .card{ max-height: 35vw;}
  .g-list .col-6 .card img{ height: 100%;}
  .g-list .col-6:nth-child(2n+1){ padding-right: 10px;}
  .g-list .col-6:nth-child(2n){ padding-left: 10px;}

  .grid-sm-2{display:grid;grid-template-columns: repeat(2, 1fr)}
  .grid-sm-2:before{content: none;}
  .app ul.grid-sm-2{padding: 0 2rem; gap: 1rem;}
  .grid-sm-2 li{width: 100%;}



  .mnav{ border: none; background: transparent; height: 30px; width: 30px;  right: 1em; position: relative; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; cursor: pointer; }
  .mnav a{background-color: #fff; display: block; height: 2px;  position: relative;  transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%;}
  .mnav a:after, .mnav a:before { background-color: #fff; content: ""; display: block; height: 2px; left: 0; position: absolute; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; }
  .mnav a:before{top: -8px;}
  .mnav a::after{top: 8px;}
  .mnav.selected a:before { transform: translateY(0px) rotate(-45deg); -webkit-transform: translateY(0px) rotate( -45deg ); -ms-transform: translateY(0px) rotate(-45deg); }
  .mnav.selected a:after { transform: translateY(0px) rotate(45deg); -webkit-transform: translateY(0px) rotate( 45deg ); -ms-transform: translateY(0px) rotate(45deg); }
  .mnav.selected a { background-color: transparent !important; }
  .mnav.selected a:after, .mnav.selected a:before { top: 0; }  

  nav .logo{display: flex; max-width: 50%; flex-basis: 40%;  overflow: hidden; }
  nav .logo a{height: 0; padding-bottom: 20%; display: block; overflow: hidden}
  nav{display: flex; justify-content: space-between;align-items: center; flex-wrap: wrap; padding: 1em;}
  .nav{display: flex; flex-basis:100%;     justify-content: space-between; display: none;z-index: 999;  left: 0; padding-bottom: 1em; background: rgba(0,0,0,.9); margin-top: .7em;}
  .nav ul { display: flex; flex-direction: column; padding-top: 1em;}
  .nav ul li a{padding: .8em 1em; background: #fff;}
  .nav>ul>li>a{width: 100%;}
  .nav>ul>li>a::after{    content: "\e668"; font-family: iconfont!important; font-size: 16px; font-style: normal; display: inline;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; width: auto;height: auto;
      background: transparent;
  }
  .nav>ul>li:hover>a::after{width: auto;}
  .nav>ul>li .img{display: none;}

  .nav ul li div.sub{max-height: 0; visibility: hidden; transition: all .3s ease-out;}
  .nav ul li:hover div.sub{max-height:20em; visibility: visible; transition: max-height .3s ease-in;}
  .subnav a{ width: 100%; text-indent: 1em;}
  .subnav{ width: 100%;}
  ul.subnav{padding-top: 0;}

  .search{padding: 1em;}

  .crnt{display: none;}
  .capital{display: none;}
  .sub-index{margin-bottom: 2em; }
  .sub-index h2{text-align: center; margin-top: 1em; color: #f60; background: #fff; padding: 1em;}
  .sub-index ul{ display: flex; flex-direction:row; padding:.5em 0 1em 0; width: 100%; margin-left: 0; margin-top: 0; justify-content: center;}
  .sub-index ul li { border-bottom: 1px solid #ccc; padding: 0; border: none;}
  .sub-index ul li a{white-space: nowrap; padding: .3em; height: auto; border-bottom: 1px solid #ccc;}
  .sub-index ul li.active a{border-bottom: 2px solid #f60 ;}
  .sub-index ul li a::after{content: none;}
  .breadcrumb{padding: 0}

  .card .date-box{margin-left: 5px;}

  .banner-con h1{font-size: 2em; padding: 0 15px; font-weight: normal;}
  .i-banner{height: 50vh; overflow: hidden; position: relative;}
  .banner .swiper-container{height: 50vh;}
  .slide-item{height: 50vh;}
  .swiper-button-next, .swiper-button-prev{display: none}

.slide-img{ width: 100%; height: 100%; background-size:auto; background-repeat: no-repeat;}
.slide-img a{display: block;width: 100%; height: 100%; }
.slide-img a img{width: 100%; height: 100%; object-fit: cover}

  .slide-item .slide-img{width: 100%;height: 100%;background-size: 100% 100%;background-position: calc(50vw - 360px) 0;margin: 0;}
  .banner-img{height: 40vh; background-position: center;}
  .banner .img-wrap{ padding-top: 85%;}
  .cap-txt{top: 50%}
  .slide-img video{width: 100%; height: 100%; object-fit: cover;}
  
  .brands li img{height: 3.5em;}
  .gallery .img-magnify a{max-height: 30vw;}

  .index h1{font-size: 18px; padding-top: 0;}
  .follow ul{display: flex; justify-content: center;}

  .swiper-slide-active .banner-border{width: 94%; height: 30vh;transform: translateX(-50%); margin: 0;top: 20%;}

  .banner-full{top: 65%; height: 240px;}
  .banner-write .w1{font-size: 9em; line-height:2;}
  .swiper-slide-active .banner-write .w1{transform: translateY(-0.25em)}
  .banner-write .w2{font-size: 36px;}
  .banner-write .w2 .w21{font-size: 24px;}
  .banner-write .w2 .w22{font-size: 36px;}
  .banner-write .w2 .w23{color: #eee;}

  .slide-txt {width: 100%; height: 100%;}
  .slide-txt .mask{width: 100%; bottom: 0; background: rgba(0,0,0,.2);position: absolute; padding: 1em; }
  .slide-txt .mask h2{font-size: 2em; color: #fff; margin-bottom: 1em;line-height: 1.5}
  .svc .icons-box .iconfont{ font-size: 4em;}
  .icons-box dl dt h1{font-size: 1em;}
  .icons-box .row a{height: auto; padding: 0;margin: 0}
  .icons-box dl dt h2{font-size: 1rem; margin: 0;}
  .icons-box dl dt h2::before{content: none;}
  .icons-box dl dd{display: none;}

  /*case*/
  .grid-wall ul.list{display: grid; grid-template-columns: repeat(2,1fr);gap: 10px; padding: 10px;}
  .grid-wall ul.list li a{padding: 0}

  .counter ul li{width: 50%; padding-top:2em; }
  .counter ul li span{font-size: 2em; color: #fff; font-weight: bold; display: block;}
  .index-why-us, .panel-about{aspect-ratio: 4/3; padding:2em 0}
  .panel .con{width: 100%; padding: 15px;}

  .i-news .tab-hd{flex-direction: column;}
  .i-news .tab-hd h1{text-align: center}
  .i-news .tab-hd ul{display: flex; flex-direction: row; justify-content: center; margin-top: 1em; flex-wrap: wrap}
  .i-news .tab-hd ul li{white-space: nowrap}
  .i-news .i-list-news {flex-direction: column}

  .sol-con{left: 0}
  .sol .tab .bd>div.active .sol-con{padding:8em 1em 0 1em;}
  .s-logo ul{flex-wrap: nowrap; column-gap: 0}
  .s-logo ul li{ flex-basis: 33.33333%; padding: .5em;}
  .s-logo ul li img{width: 100%;}
  .sol-con .txt{max-width: 100%;}
  .sol-panel ul.hd li{flex-basis: 33.3333%}
  .sol-panel ul.badges li{margin-bottom: 1em;}
  .contact-info{padding: 1em 2em;}

  .partner .brands{ padding:0 15px;}
  .partner  li:last-child{display: none;}

  /*about*/
  .con h1{font-size: 2em; margin: 1em 0;}
  .panel .con h2{font-size: 1.5em; margin: 1em 0;}
  .idea h1,.idea .item h2{font-size: 2em;}
  .idea>h2,.idea .item p{font-size: 1.5em;}
  .qulifications{overflow: hidden}
  .brands .hd h2{font-size: 2em;}
  .desc p{font-size: 1em;}
  .brands .pale{width: 100%;}
  .brands .pale .list{padding: 1em}
  .brands .logo-gray{ padding: 0 }
  .brands .pale ul li img{ width: 100%; height: auto}

  .timeline{ padding: 1.5em;}
  .timeline .swiper-wrapper:before{left: 0;}
  .time-item{justify-content: end;}
  .time-con{flex-direction: row; width: 100%;}
  .time-con:before{left: -7px;}
  .brands .pale ul li{flex-basis: 33.3333%;}
  .time-con .txt{font-size: 14px;}
  #certify{width: 100%;}
  #certify .swiper-slide{width: 60%;height: auto;}

  /*case*/
  .cap-txt h1{font-size: 2em;}
  .main .filter{padding:0 1em;}
  .filter ul li{margin-bottom: 1em;}
  .filter ul li{margin-bottom: 1em;}
  .filter ul li a{padding: .5em 1em;}

  .mac-box{width: 87.5vw; height: 49.25vw; margin-top: 5em;}
  .mac-frm{width:62.5vw;height: 42.5vw}
  .project .container{padding:2rem 1rem;}
  .project .sev-item{padding: 1em 0;}
  .project .hd h2{font-size: 24px; font-weight: normal}
  .sev-item ul li{line-height: 2; padding-top: .5rem;}
  .container img{max-width: 100%;}
  .project .container h1{font-size: 2em;}
  .project .container p{font-size: 16px;}
  .overview ol, .txt h2{width: 100%; margin-left: 0}
  .overview ol, .txt h2{padding:.25em 0}
  .color-img{width: 100%;}
  .swiper-box{padding: 0}
  .case a{padding: 1em}

  .video-banner{width: 100%; height: 50vh;}
  .video-banner video{object-position: 65% top;}
  .video-banner video{width:100%; height: 100%; object-fit: cover}
  .responsive .container{padding: 0 1em;}
  .responsive .container h2{font-size: 2em;}
  .responsive .container h3{font-size: 1.25em;}
  .inno dl{flex-direction: column;}
  .inno dl dt,.inno dl  dd{width: 100%;}

  .grid-sm-1{grid-template-columns: repeat(1, 1fr)}

  .addons .items{width: 100%;}
  /*assist*/
  .assist ul li{width: 100%;}
  .px-sm-4{padding: 0 1em;}

  /*news */
 .news-list .tab .hd ul li a,.news-con .tab .hd ul li a{font-size: 1.25em; padding: .25em; white-space: nowrap;}
  .news-list .tab .hd ul li ,news-con .tab .hd ul li {flex-basis: 20%;}
  .news-list .list ul li{padding: 1em 0}
  .news-list .list ul li dl dd{padding: 1em;}
  .news-list .list ul li dl dd a p{height: 4.8em; overflow: hidden}
  .news-list .list ul li dl dd a{padding: 1em; display: block}

  /*solution  */
  .solutions{padding-top: 2em;}
  .sol-items .iconfont{font-size: 3em;}
  .sol-items .txt{font-size: 1em;}
  .sol-items .txt span{display: none}
  .solutions .tt h2{font-size: 2em;}
  .solutions .tt p{font-size: 1.25em;}
  .solutions .con .img-wrap{padding-bottom:35%; height: 0 }
  .solutions .con .txt{top: 2em;}
  .solutions .con .txt .desc ul li{padding: .5em 0}
  .solutions .list .txt .iconfont{font-size: 3em;}
  .solutions .list .txt ul{flex-wrap: wrap; width: 96%;}
  .solutions .list .txt ul li{flex-basis: 33.3333%; }
  .solutions .list .txt span{font-size: 1.25em; padding-top: .5rem}
  .solutions .case .circle{width: 4em; height: 4em; padding: .5em;}
  .solutions .case .circle img{width: 100%; height: 100%; object-fit: contain; transform: none}

  /*services*/
  .service .list .item{flex-direction: column; padding: 1em;}
  .service .list .item:nth-child(2n){flex-direction: column;}
  .service .item>div{width: 100%;}
  .service .item i{width: 4em; height: 4em; padding-top: 1em; display: inline-block}
  .service .item i:before{font-size: 2em; }
  .service .item ul{flex-wrap: wrap; gap: 0}
  .service .item ul li{flex-basis: 50%; margin: 0;}

  .service .item .img{width:100%; padding-top: 4em;}
  .service .item .svg{width: 80%;}

  /*service and solution  */
  .banner .banner-con{width: 100%; left: 0;}
  .banner-con p{font-size: 13px; padding: 1rem;}

  .cap-anchor{ overflow-x: scroll; }
  .cap-anchor ul{width:700px;}
  .cap-anchor ul li{height: 3rem; line-height: 3; font-size: 1rem;}

  .why-us ul{padding: 1rem; }
  .why-us ul.flex{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}
  .why-us ul li{width: 100%;}
  .why-us ul li h3{font-size: 1rem; color: var(--main-color)}
  .why-us ul li p{font-size: .8rem;}
  .why-us ul li:before{width: 100%; background-size: 100%;}

  .blk-list .list ul li{width: 50%; padding: 2em 1em;}

  .blk-list .list ul li h4{font-size: 1rem; color: var(--main-color)}
    .blk-list .list ul li p{font-size: .8rem;}

    .di-blk .flex{flex-direction: column;}
    .list-new .grid{grid-template-columns: repeat(1, 1fr); gap: 1rem;}
    #specification .relative{display: flex ;flex-direction: column-reverse;}
    #specification .relative .img img{width: 100%;}
    #specification .relative .absolute{position: relative;}
    #specification .relative .hd{padding: 2rem}
    p.consult{text-align: center; line-height: inherit}

  .p-5{padding: 1.5em !important;}
  .pt-sm-0 {padding-top: 0!important;}
  .py-sm-0  {padding-top: 0!important; padding-bottom: 0!important;}
  .py-sm-2 {padding-top: .5em!important; padding-bottom: .5em!important;}

  .industry ul li{display: flex ;flex:0 0 50%; flex-wrap: wrap;}
  .industry ul li a{width: 100%; padding: 1rem; }

  .list-block li h3{font-size: 1rem;}
  .list-block li p{font-size: .85rem;}

  .app .list-block li{padding: 1rem;}

  .plus h2{font-size: 1.25rem;}
  .plus h3{font-size: 14px;}

  /*miniprogram*/
  .tt h2{font-size: 1.5em; font-weight:normal; margin-bottom: 0}
  .tt h3{padding: 1rem; font-size: 1rem;}
  .blocks .flex{flex-direction: column;}

  .banner .breadcrumb{bottom: 3.5rem; right: 1rem;}
  .banner .breadcrumb a{ font-size: .85rem;}
  .list-new .grid li a h3{font-size: 18px;}
    .list-new .grid li a p{font-size: 14px;}

  .cap-txt a.case-lk{padding: 0 1em;}

  .sev-item ul li a{font-size: 14px;}

  .hd h1{font-size: 1.5em;}
  .icons-box{padding: 1em;}
  .mt-5, .my-5{margin-top:1.5rem !important;  }
  .i-news .bd{padding: 1em;}
   /*spacing*/
  .m-py-3{padding-top: 1em !important; padding-bottom: 1em !important;}
  .btn-cnt{margin: 0;}
  .m-mt-0{margin-top: 0 !important;}
  .assist ul li a p{font-size:14px}
  
}


@media screen and (min-width:576px){
  .col-1-5{width: 20%;}
}


@media screen and (min-width:768px){
     .-mx-lg-4{margin: 0 -1rem;}
    .mnav{display: none;}
    .nav>ul{display: flex;}
    .nav>ul>li{float: left;position: relative;}
    .nav>ul>li>a{background: #fff;z-index: 1000;}
    .nav>ul>li>a::after{content: ""; height: 4px; background: #f60; position: absolute; width: 0;
      top: 3em; transition-property: all;-webkit-transition-property:all;transition-timing-function: ease-out;
      transition-duration: 0.3s;  left: 50%;right: 50%;
 }
 .nav ul li div.sub{  opacity: 0; height: 0; top: 2em; transition:all .5s ease; overflow: hidden; position: absolute; background: none; width: auto;}
 .nav ul li:hover div.sub ul{width: 100%;}
.nav ul li:hover div.sub{  opacity: 1; height: auto; top: 4em; white-space: nowrap; background: #fff; padding: 1em 0;}
.nav ul li div.sub ul li a{text-align: center; width: 100%; padding: .5em 1em;}
.banner .swiper-container{height: 600px;}
.nav ul li .sub ul{float: left;}
  .pb-lg-4 {padding-bottom: 2rem;}
  .p-lg-golden {margin:0 auto;width: 61.8%;}

  .pt-sm-4,.py-sm-4 {padding-top: 1.5rem!important}
  .pb-sm-4,.py-sm-4 {padding-bottom: 1.5rem!important}
  .col-lg-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%}
  .col-lg-8 {width: 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%;}
  .col-lg-6{width: 50%; flex:0 0 50%; max-width: 50%;}
  }

@media screen and (min-width:1220px){
 .col-lg-8 {width: 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%;}

}

@media screen and (max-width:992px){
 
}

@media screen and (max-width:768px){


}

@media (min-width: 1200px) {
  .container {width: 86%;max-width: 90%;}

}

/*project*/
.nav>ul>li>a{background: transparent}
@media screen and (min-width: 768px){
  .banner .swiper-container {height: 100%;}
}