:root{
    --banner-height:calc(200px + (600 - 200) * ((100vw - 320px) / (1920 - 320)));
    --active:#E2A32C;
}
.page-template-solution section.page{
    width: 100%;
    overflow: hidden; 
}
li{
    list-style: none;
}
.clearfix::before,.clearfix::after{
    display: table;
    content: '';
}
.clearfix::after{
    clear: both;
}
.clearfix{
    *zoom:1;
}

input{
    padding:0.2rem 0.8rem;
    border:1px solid #EEEFF3;
}
input.lg{
    padding:0.5rem 1rem;
}
input:hover,input:focus,input:active,input:focus-visible{
    border:1px solid var(--active);
    outline:none;
}
.fw-lighter{
    font-weight: lighter;
}
.fw400{
    font-weight: 400;
}
.bb-color{
    color:#000  ;
}
.b-color{
    color:#333641  ;
}
.t-color{
    color:#85878D ;
}
.w-color{
    color:#fff ;
}
.p-color{
    color:#1A1C4C ;
}
.d-table{
    display: table;
}
@media screen and (min-width: 320px) {
    .text16 {
      font-size: 0.875rem;
    }
  }
  @media screen and (min-width: 992px) {
    .text16 {
      font-size: 1rem;
    }
  }
  .text12 {
    font-size: 12px;
  }
   
.text65{
    font-size:65px;
}
.line-height-12{
    line-height: 1.2;
}
.line-height-13{
    line-height: 1.4;
}
.line-height-14{
    line-height: 1.4;
}
.letter-spacing-5{
    letter-spacing:0.5rem;
}
.line-t{
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 2px;
    left: calc(50% - 80px/2 + 0.5px);
    top: 114px;

    background: #E2A32C;
    border-radius: 1px;
}
.vertical-lr{
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
}
.table-cell{
    display:table-cell;
}
.opacity-0{
    opacity: 0;
}
.opacity-50{
    opacity: 0.5;
}
.opacity-60{
    opacity: 0.6;
}
.opacity-70{
    opacity: 0.7;
}
.opacity-100{
    opacity: 1;
}
.vw-5{
    width: 5%!important;
}
.vw-10{
    width: 10%!important;
}
.vw-12{
    width: 12%!important;
}
.vw-20{
    width: 20%!important;
}
.vw-25{
    width: 25%!important;
}
.vw-28{
    width: 28%!important;
}
.vw-30{
    width: 30%!important;
}
.vw-38{
    width: 38%!important;
}
.vw-40{
    width: 40%!important;
}
.vw-45{
    width: 45%!important;
}
.vw-50{
    width: 50%!important;
}
.vw-55{
    width: 55%!important;
}
.vw-56{
    width: 56%!important;
}
.vw-57{
    width: 57%!important;
}
.vw-58{
    width: 58%!important;
}
.vw-59{
    width: 59%!important;
}
.vw-60{
    width: 60%!important;
}
.vw-63{
    width: 63%!important;
}
.vw-65{
    width: 65%!important;
}
.vw-70{
    width: 70%!important;
}
.vw-75{
    width: 75%!important;
}
.vw-80{
    width: 80%!important;
}
.vw-85{
    width: 85%!important;
}
.vw-90{
    width: 90%!important;
}
.vw-100{
    width: 100%!important;
}

.vh-5{
    height: 5%!important;
}
.vh-10{
    height: 10%!important;
}
.vh-20{
    height: 20%!important;
}
.vh-30{
    height: 30%!important;
}
.vh-40{
    height: 40%!important;
}
.vh-45{
    height: 45%!important;
}
.vh-50{
    height: 50%!important;
}
.vh-55{
    height: 55%!important;
}
.vh-56{
    height: 56%!important;
}
.vh-57{
    height: 57%!important;
}
.vh-58{
    height: 58%!important;
}
.vh-59{
    height: 59%!important;
}
.vh-60{
    height: 60%!important;
}
.vh-70{
    height: 70%!important;
}
.vh-80{
    height: 80%!important;
}
.vh-85{
    height: 85%!important;
}
.vh-90{
    height: 90%!important;
}
.vh-100{
    height: 100%!important;
}

.bg{
    background-color: #fff;
}
.bg-ash{
    background-color: #F7F8FB;
}
.bg-act{
    background-color: #FFF6E6;
}
.bg-lg{
    background: linear-gradient(to bottom, #D8D8D8 0%, #F7F8FB 0.01%, rgba(247, 248, 251, 0) 100%), #FFFFFF;
}
.bg-lgc{
    background: linear-gradient(to bottom, #FFF5E2 0%, rgba(255, 245, 226, 0) 100%), #FFFFFF
}
.active{
    color:var(--active);
}
.border{
    border:1px solid #D8D8D8;
}
.border-t{
    border-bottom:1px solid #D8D8D8;
}
.border-r{
    border-right:1px solid #F7F8FB;
}
.border-radius5{
    border-radius: 5px;
}
.border-radius14{
    border-radius: 14px;
}
.border-radius20{
    border-radius: 20px;
}
.border-radius-trlb40{
    border-radius: 0px 40px;
}
.border-dashed{
    border-style: dashed;
}
.border-active{
    border-color:var(--active);
}
.position-relative{
    position: relative;
}
.form .item{
    border-radius: 3px;
}
.form .bg{
    background:#EEEFF3;
}
.form .border{
    border-color:#EEEFF3;
}
.form .item label{
    padding:0.5rem 0;
    white-space: nowrap;
}
.img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
}
.img img{
    transition: all 0.3s;
}
.img:hover img{
    transform: scale(1.03);
}
.white-space-nowrap{
    white-space: nowrap;
}

.overflow-hidden{
    overflow: hidden;
}
.overflow-visible{
    overflow: visible!important;
}
.overflow-auto{
    overflow: auto;
}
.box-shadow{
    box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.06)
}
.pr{
    position:relative;
}
.ps-b{
    position:absolute;
    bottom:0;
}
.ps-b100{
    position:absolute;
    bottom:0;
    transform: translateY(-100%);
}
.cursor-pointer{
    cursor: pointer;
}

.py-2 {
    padding-top: 0.2rem!important;
    padding-bottom: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .py-2 {
      padding-top: 0.5rem!important;
      padding-bottom: 0.5rem!important;
    }
  }
  
.px-2 {
    padding-left: 0.2rem!important;
    padding-right: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .px-2 {
        padding-left: 0.5rem!important;
        padding-right: 0.5rem!important;
    }
  }

.pt-2 {
    padding-top: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .pt-2 {
      padding-top: 0.5rem!important;
    }
  }

.pb-2 {
    padding-bottom: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .pb-2 {
      padding-bottom: 0.5rem!important;
    }
  }
  
.ps-2 {
    padding-left: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .ps-2 {
        padding-left: 0.5rem!important;
    }
  }
.pe-2 {
    padding-right: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .pe-2 {
        padding-right: 0.5rem!important;
    }
  }
.p-2 {
    padding: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .p-2 {
        padding: 0.5rem!important;
    }
  }

.my-2 {
    margin-top: 0.2rem!important;
    margin-bottom: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .my-2 {
        margin-top: 0.5rem!important;
      margin-bottom: 0.5rem!important;
    }
  }
  
.mx-2 {
    margin-left: 0.2rem!important;
    margin-right: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .mx-2 {
        margin-left: 0.5rem!important;
        margin-right: 0.5rem!important;
    }
  }

.mt-2 {
    margin-top: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .mt-2 {
        margin-top: 0.5rem!important;
    }
  }
.mb-2 {
    margin-bottom: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .mb-2 {
        margin-bottom: 0.5rem!important;
    }
  }
  
.ms-2 {
    margin-left: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .ms-2 {
        margin-left: 0.5rem!important;
    }
  }
.me-2 {
    margin-right: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .me-2 {
        margin-right: 0.5rem!important;
    }
  }
.m-2 {
    margin: 0.2rem!important;
  }
  @media (min-width: 992px) {
    .m-2 {
        margin: 0.5rem!important;
    }
  }



.py-3 {
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .py-3 {
      padding-top: 1rem!important;
      padding-bottom: 1rem!important;
    }
  }
  
.px-3 {
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .px-3 {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
  }

.pt-3 {
    padding-top: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .pt-3 {
      padding-top: 1rem!important;
    }
  }

.pb-3 {
    padding-bottom: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .pb-3 {
      padding-bottom: 1rem!important;
    }
  }
  
.ps-3 {
    padding-left: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .ps-3 {
        padding-left: 1rem!important;
    }
  }
.pe-3 {
    padding-right: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .pe-3 {
        padding-right: 1rem!important;
    }
  }
.p-3 {
    padding: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .p-3 {
        padding: 1rem!important;
    }
  }

.my-3 {
    margin-top: 0.5rem!important;
    margin-bottom: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .my-3 {
        margin-top: 1rem!important;
      margin-bottom: 1rem!important;
    }
  }
  
.mx-3 {
    margin-left: 0.5rem!important;
    margin-right: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .mx-3 {
        margin-left: 1rem!important;
        margin-right: 1rem!important;
    }
  }

.mt-3 {
    margin-top: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .mt-3 {
        margin-top: 1rem!important;
    }
  }
.mb-3 {
    margin-bottom: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .mb-3 {
        margin-bottom: 1rem!important;
    }
  }
  
.ms-3 {
    margin-left: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .ms-3 {
        margin-left: 1rem!important;
    }
  }
.me-3 {
    margin-right: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .me-3 {
        margin-right: 1rem!important;
    }
  }
.m-3 {
    margin: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .m-3 {
        margin: 1rem!important;
    }
  }




.py-4 {
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .py-4 {
      padding-top: 1rem!important;
      padding-bottom: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .py-4 {
      padding-top: 1.5rem!important;
      padding-bottom: 1.5rem!important;
    }
  }
  
.px-4 {
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .px-4 {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .px-4 {
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important;
    }
  }

.pt-4 {
    padding-top: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .pt-4 {
      padding-top: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .pt-4 {
      padding-top: 1.5rem!important;
    }
  }

.pb-4 {
    padding-bottom: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .pb-4 {
      padding-bottom: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .pb-4 {
      padding-bottom: 1.5rem!important;
    }
  }
  
.ps-4 {
    padding-left: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .ps-4 {
        padding-left: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .ps-4 {
        padding-left: 1.5rem!important;
    }
  }
.pe-4 {
    padding-right: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .pe-4 {
        padding-right: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .pe-4 {
        padding-right: 1.5rem!important;
    }
  }
.p-4 {
    padding: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .p-4 {
        padding: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .p-4 {
        padding: 1.5rem!important;
    }
  }


.my-4 {
    margin-top: 0.5rem!important;
    margin-bottom: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .my-4 {
        margin-top: 1rem!important;
      margin-bottom: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .my-4 {
        margin-top: 1.5rem!important;
      margin-bottom: 1.5rem!important;
    }
  }
  
.mx-4 {
    margin-left: 0.5rem!important;
    margin-right: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .mx-4 {
        margin-left: 1rem!important;
        margin-right: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .mx-4 {
        margin-left: 1.5rem!important;
        margin-right: 1.5rem!important;
    }
  }

.mt-4 {
    margin-top: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .mt-4 {
        margin-top: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .mt-4 {
        margin-top: 1.5rem!important;
    }
  }
.mb-4 {
    margin-bottom: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .mb-4 {
        margin-bottom: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .mb-4 {
        margin-bottom: 1.5rem!important;
    }
  }
  
.ms-4 {
    margin-left: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .ms-4 {
        margin-left: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .ms-4 {
        margin-left: 1.5rem!important;
    }
  }
.me-4 {
    margin-right: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .me-4 {
        margin-right: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .me-4 {
        margin-right: 1.5rem!important;
    }
  }

.m-4 {
    margin: 0.5rem!important;
  }
  @media (min-width: 768px) {
    .m-4 {
        margin: 1rem!important;
    }
  }
  @media (min-width: 992px) {
    .m-4 {
        margin: 1.5rem!important;
    }
  }



.py-5 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
  }
  @media (min-width: 768px) {
    .py-5 {
      padding-top: 1.5rem!important;
      padding-bottom: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .py-5 {
      padding-top: 2rem!important;
      padding-bottom: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .py-5 {
      padding-top: 2.5rem!important;
      padding-bottom: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .py-5 {
      padding-top: 3rem!important;
      padding-bottom: 3rem!important;
    }
  }
  
.px-5 {
    padding-left: 1rem!important;
    padding-right: 1rem!important;
  }
  @media (min-width: 768px) {
    .px-5 {
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .px-5 {
        padding-left: 2rem!important;
        padding-right: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .px-5 {
        padding-left: 2.5rem!important;
        padding-right: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .px-5 {
        padding-left: 3rem!important;
        padding-right: 3rem!important;
    }
  }


.pt-5 {
    padding-top: 1rem!important;
  }
  @media (min-width: 768px) {
    .pt-5 {
      padding-top: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .pt-5 {
      padding-top: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .pt-5 {
      padding-top: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .pt-5 {
      padding-top: 3rem!important;
    }
  }

.pb-5 {
    padding-bottom: 1rem!important;
  }
  @media (min-width: 768px) {
    .pb-5 {
      padding-bottom: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .pb-5 {
      padding-bottom: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .pb-5 {
      padding-bottom: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .pb-5 {
      padding-bottom: 3rem!important;
    }
  }
  
.ps-5 {
    padding-left: 1rem!important;
  }
  @media (min-width: 768px) {
    .ps-5 {
        padding-left: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .ps-5 {
        padding-left: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .ps-5 {
        padding-left: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .ps-5 {
        padding-left: 3rem!important;
    }
  }
.pe-5 {
    padding-right: 1rem!important;
  }
  @media (min-width: 768px) {
    .pe-5 {
        padding-right: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .pe-5 {
        padding-right: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .pe-5 {
        padding-right: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .pe-5 {
        padding-right: 3rem!important;
    }
  }
.p-5 {
    padding: 1rem!important;
  }
  @media (min-width: 768px) {
    .p-5 {
        padding: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .p-5 {
        padding: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .p-5 {
        padding: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .p-5 {
        padding: 3rem!important;
    }
  }



.my-5 {
    margin-top: 1rem!important;
    margin-bottom: 1rem!important;
  }
  @media (min-width: 768px) {
    .my-5 {
        margin-top: 1.5rem!important;
        margin-bottom: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .my-5 {
        margin-top: 2rem!important;
        margin-bottom: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .my-5 {
        margin-top: 2.5rem!important;
        margin-bottom: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .my-5 {
        margin-top: 3rem!important;
        margin-bottom: 3rem!important;
    }
  }
  
.mx-5 {
    margin-left: 1rem!important;
    margin-right: 1rem!important;
  }
  @media (min-width: 768px) {
    .mx-5 {
        margin-left: 1.5rem!important;
        margin-right: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .mx-5 {
        margin-left: 2rem!important;
        margin-right: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .mx-5 {
        margin-left: 2.5rem!important;
        margin-right: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .mx-5 {
        margin-left: 3rem!important;
        margin-right: 3rem!important;
    }
  }

.mt-5 {
    margin-top: 1rem!important;
  }
  @media (min-width: 768px) {
    .mt-5 {
        margin-top: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .mt-5 {
        margin-top: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .mt-5 {
        margin-top: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .mt-5 {
        margin-top: 3rem!important;
    }
  }
.mb-5 {
    margin-bottom: 1rem!important;
  }
  @media (min-width: 768px) {
    .mb-5 {
        margin-bottom: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .mb-5 {
        margin-bottom: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .mb-5 {
        margin-bottom: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .mb-5 {
        margin-bottom: 3rem!important;
    }
  }
  
.ms-5 {
    margin-left: 1rem!important;
  }
  @media (min-width: 768px) {
    .ms-5 {
        margin-left: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .ms-5 {
        margin-left: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .ms-5 {
        margin-left: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .ms-5 {
        margin-left: 3rem!important;
    }
  }
.me-5 {
    margin-right: 1rem!important;
  }
  @media (min-width: 768px) {
    .me-5 {
        margin-right: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .me-5 {
        margin-right: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .me-5 {
        margin-right: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .me-5 {
        margin-right: 3rem!important;
    }
  }
.m-5 {
    margin: 1rem!important;
  }
  @media (min-width: 768px) {
    .m-5 {
        margin: 1.5rem!important;
    }
  }
  @media (min-width: 992px) {
    .m-5 {
        margin: 2rem!important;
    }
  }
  @media (min-width: 1200px) {
    .m-5 {
        margin: 2.5rem!important;
    }
  }
  @media (min-width: 1400px) {
    .m-5 {
        margin: 3rem!important;
    }
  }
  .title.line{
    position: relative;
  }
  .title.line:after{
    content:'';
    position: absolute;
    left:0;
    bottom:-2.5px;
    width: 100px;
    height: 5px;
    background: #E2A32C;
border-radius: 2.5px;
  }
  
.page-template-solution .title-section h2 {
    padding-bottom: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .page-template-solution .title-section h2 {
      padding-bottom: 1rem!important;
    }
  }
.page-template-solution .title-section {
    margin-bottom: 0.5rem!important;
  }
  @media (min-width: 992px) {
    .page-template-solution .title-section {
        margin-bottom: 1rem!important;
    }
  }

.page-template-solution .banner {

    display: flex;
    align-items: center;
    min-height: var(--banner-height);
}
.page-template-solution .banner .txt{
    position: relative;
    height: auto!important;
    min-height: var(--banner-height);
    padding:1.5rem 0.5rem;
    background: rgba(0,0,0,0.2);
}
.page-template-solution .banner .txt.bb-color,.page-template-solution .banner .txt.p-color{
    background: rgba(255,255,255,0.65);
}
.page-template-solution .banner .txt h2{
    text-shadow: none;
}
.page-template-solution .banner .txt h2,.page-template-solution .banner .txt p{
    min-width:100%;
}
.page-template-solution .banner .bg{
    position: absolute;
    height: 100%;
    object-position: center right;
}
@media (min-width: 768px) {
    .page-template-solution .banner {
        display: block;
      
    }
    .page-template-solution .banner .txt{
        position: absolute;
        height: 100%!important;
        padding: 0;
        background: none;
    }
    .page-template-solution .banner .txt.bb-color,.page-template-solution .banner .txt.p-color{
        background: none;
    }
    .page-template-solution .banner .bg{
        position: relative;
        height: var(--banner-height);
        object-position: center center;
    }
    .page-template-solution .banner .txt h2,.page-template-solution .banner .txt p{
        margin-left: 5%;
        width: 50%;
        max-width: 90%;
        min-width:360px;
    }
}


.three-menu{
    position: absolute;
    left:0;
    white-space: nowrap;
    display: none;
    padding-left:0;
    color:#666;
}
.sub-menu>li.current>a,.three-menu>li.current>a{
    color:#E2A32C;
}

.nav-sub{
    border-bottom: 1px solid #F7F8FB;
}
.nav-sub li{
    display: inline-block;
    text-align: center;
}
.nav-sub li span,.nav-sub li a{
    display: inline-block;
    height: 100%;
    color:#818389;
    padding:0.5rem 0;
}
.nav-sub li a{
    position: relative;
   margin-left:0;
   width: 100%;
}
.nav-sub li a:hover,.nav-sub li.current a{
    color:#E2A32C;
 }
.nav-sub li.current a:after{
    content: '';
    display: block;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    border-bottom: 2px solid #E2A32C;
}
.nav-sub li span{
    display: none;
    position:relative;
    margin-right:3rem;
}
.nav-sub li:first-child span:after{
    content: '';
    display: block;
    position:absolute;
    top:50%;
    right:-3rem;
    width:1px;
    height:1rem;
    background: #818389;
    transform: translateY(-50%);
}
.nav-sub ul{
    display: block!important;
    padding-left:0;
}
.nav-sub li,.nav-sub li span,.nav-sub li a{
    width: 100%;
}
@media (min-width: 768px) {
    .nav-sub ul{
        display: flex!important;
        justify-content: space-around!important;
    }
    .nav-sub li{
        width: auto;
    }
    .nav-sub li span,.nav-sub li a{
        width: auto;
        margin-left:0.5rem;
        padding:1rem 0;
    }
}
@media (min-width: 992px) {
    .nav-sub ul{
        justify-content: center!important;
    }
    .nav-sub li span,.nav-sub li a{
        display: block;
       margin-left:2rem;
       padding:1.2rem 0;
    }
}
@media (min-width: 1200px) {
    .nav-sub li span,.nav-sub li a{
       margin-left:3rem;
       padding:1.5rem 0;
    }
}
.box{
    position:relative;
    height: 16.8rem;
    background: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #F7F8FB;
    overflow: hidden;
}
.box.null{
    display: none;
}
.box.double{
    height: 33.6rem;
}
.box::before{
    content: '';
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    left: -40px;
    top: -40px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.299052) 0%, rgba(255, 245, 226, 0.3) 100%);
    filter: blur(20px);
    border-radius: 50%;
    z-index: 0;
}
.box::after{
    content: '';
    display: block;
    position: absolute;
    width: 172px;
    height: 172px;
    right: -27px;
    bottom: -27px;
    background: rgba(247, 248, 251, 0.3);
    filter: blur(20px);
    border-radius: 50%;
    z-index: 0;
}
.box *{
    position: relative;
    z-index: 1;
}
.box .item.default{
    top:0;
    opacity: 1;
    transition: all 0.3s;
}
.box .item.active{
    top:0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99684) 0%, #FFF5E2 100%);
    border-right: 1px solid #F7F8FB;
    opacity: 0;
    transition: all 0.3s;
    overflow: auto;
}
.box .item.active h4{
    color:#E2A32C;
}
.box h4{
    color:#333641;
}
.box .num{
    margin-left:0.8rem;
    color:#ddd;
}
.box .icon b{
    margin-right:0.8rem;
    font-weight: 400;
}
.box p,.box dd{
    color:#818389;
}
.box .item dd{
    position:relative;
}
.box .item dd::before{
    content: '';
    display: inline-block;
    margin-right: 1rem;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: #818389;
}
.box:not(.no-hover):hover .item.active{
    top:-100%;
    opacity: 1;
}
.box:not(.no-hover):hover .item.default{
    top:-100%;
    opacity: 0;
}
.box .item.default h4{
    display: none;
}
.box .item.default .icon+h4{
    display: block;
    margin-bottom:0;
}
@media (min-width: 992px) {
    .box.null{
        display: block;
    }
}
@media (min-width: 992px) {
    .box .item.default h4{
        display: block;
    }
    .box .item.default .icon+h4,
    .box .item.default h4+p,.box .item.default h4+dl{
        display: none;
    }
}
.circle-icon{
    position: relative;
    min-width: 9.4rem;
    height: 9.4rem;
   
}
.circle-icon::before{
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    left:50%;
    top:0;
    width: 9.4rem;
    height: 9.4rem;
    background: linear-gradient(180deg, #E2A32C 0%, rgba(226, 163, 44, 0.0001) 100%);
    mix-blend-mode: normal;
    opacity: 0.15;
    z-index: 0;
    transform: translateX(-50%);

}
.card:not(.no-bg){
    background: #FFFFFF;
    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.04);
    border-radius: 5px;
}

.card:hover,.card.current{
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5E2 100%);
    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.04);
}
.card h4{
    color:#333641;
    white-space: nowrap;
}
.card:hover h4{
    color:#E2A32C;
}
.card h4.line{
    position:relative;
}
.card h4.line:after{
    content: '';
    display: block;
    position:absolute;
    bottom:0;
    left:0%;
    width:5rem;
    height:3px;
    background: #E2A32C;
    
}
.card.text-center h4.line:after{
    left:50%;
    transform: translateX(-50%);
}
.card.no-bg p.text20{
    line-height: 1.5;
}
.card .icon.small{
    width:48px;
    height:48px;
}
.card.border-r{
    position:relative;

}
.card.border-r::before{
    content:'';
    position:absolute;
    top:100%;
    right: 7%;
    width: 82%;
    height: 1px;
    background:rgba(129, 131, 137, 0.3);
}
@media (min-width: 992px) {
    .card.border-r::before{
        top:9%;
        right:0;
        width: 1px;;
        height: 82%;
    }
}

.page-template-solution .list{
    position:relative;
    top:0;
    background: linear-gradient(to bottom,#FDF8F0 0,#fff 100%);
    box-shadow: 0px 8px 40px rgb(0 0 0 / 4%);
    border-radius: 5px;
    transition: all 0.3s;
}
.page-template-solution .list:hover{
    top:-5px;
    box-shadow: 5px 0px 20px rgb(0 0 0 / 10%);
}
.page-template-solution .list:hover .txt h4{
    color:#E2A32C;
}

.txt-img{
    position:relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 3px 3px 8px rgb(0 0 0 / 6%);
}
.txt-img .txt{
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    background:linear-gradient(to bottom, rgb(4 4 4 / 0) 0,rgb(29 52 68 / 100%) 100%);
}
.txt-img.nobg .txt{
    background:none;
}
.txt-img .txt.top{
    top:1.5rem;
}

.txt-img .img img{
    height: auto;
    width: 100%;
    transition: all 0.3s;
}
@media (min-width: 768px) {
    .txt-img .txt.top{
        top:1rem;
    }
}
@media (min-width: 992px) {
    .txt-img .txt.top{
        top:0;
    }
    .txt-img .img img{
        height: 100%;
        width: auto;
        max-width: 200%;
    }
}
.scenes .item{
    height: 100%;
    transition: all 0.3s;
}

.scenes.protrude .item{
    height: 27.5rem;
}
.scenes .item.current{
    width: 100%;
    flex-grow: 100;
}

.scenes .txt-img .txt p:not(.d-block){
    display: block;
    opacity: 1;
    transition: all 0.3s;
}
.scenes .txt-img:hover .txt p:not(.d-block),
.scenes .item.current .txt p{
    display: block;
    opacity: 1;
}
.scenes .item.current .txt-img .img img{
    width: 100%;
    height: auto;
}
.scenes .item:hover .img img{
    transform: scale(1.05);
}
.scenes .swiper-container .item .txt{
    padding:2rem!important;
}
.scenes .item.swiper-slide{
    min-height: 280px;
}
.scenes .item .txt-img .img{
    height: 100%;
}
.scenes .item .img img,.scenes .item .txt-img .img img{
    max-width: 200%;
    width: 100%;
    height: auto;
}
.scenes .col-lg-4.item{
    height: calc(380px + (560 - 380) * ((100vw - 350px) / (1920 - 350)));
}

.scenes .col-lg-2.item{
    width: 100%!important;
    height: auto;
}
.scenes .item.swiper-slide{
    height: 280px;
}
.scenes .item.swiper-slide .img img{
    width: auto;
    height: 100%;
}
.scenes .item.auto{
    height: auto!important;
}
.scenes .item.auto p span{
    width: 100%!important;
}

@media (min-width: 768px) {
    .scenes .item{
        height: calc(280px + (580 - 280) * ((100vw - 350px) / (1920 - 350)));
    }
    .scenes .swiper-container .item .txt{
        padding-right:calc(60px + 6%)!important;
    }
    .scenes .col-lg-2.item{
        width: 50%!important;
    }
    .scenes .col-lg-2.item{
        height: 414px;
    }
    .scenes .col-lg-2.item .img{
        width: 340px!important;
    }
    .scenes .item.swiper-slide{
        height: 280px;
    }
    .scenes .item.swiper-slide .img{
        width: 696px!important;
    }
    .scenes .item.swiper-slide .img img{
        width:100%;
        height: auto;
    }
    .scenes .col-lg-4.item.swiper-slide{
        height: 408px;
    }
    .scenes .col-lg-4.item.swiper-slide .img{
        width: 324px!important;
    }
    .scenes .item.auto p span.vw-60{
        width: 60%!important;
    }
    .scenes .item.auto p span.vw-65{
        width: 65%!important;
    }
}
@media (min-width: 992px) {
    .scenes .item .txt-img{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .scenes .item.current {
        width: 50%;
    }
    .scenes .item.col-lg-4 {
        width: 20%;
    }
    .scenes .item.item.col-lg-4.current {
        width: 40%;
    }
    .scenes .col-lg-2.item{
        width: 12%!important;
    }
    .scenes .col-lg-2.item.current{
        width: 26%!important;
    }
    .scenes .txt-img .txt p:not(.d-block){
        display: none;
        opacity: 0;
        transition: all 0.3s;
    }
    
    .scenes .swiper-container .item .txt{
        padding:3rem calc(60px + 6%) 3rem 3rem!important;
    }
    .scenes .col-lg-2.item{
        height: 306px;
    }
    .scenes .col-lg-2.item .img{
        width: 252px!important;
    }
    .scenes .col-lg-3.item{
        height: 386px;
    }
    .scenes .col-lg-3.item .img{
        width: 456px!important;
    }
    .scenes .col-lg-4.item{
        height: 360px;
    }
    .scenes .col-lg-4.item .img{
        width: 360px!important;
    }
    .scenes .col-lg-6.item{
        height: 364px;
    }
    .scenes .col-lg-6.item .img{
        width: 456px!important;
    }
    .scenes .item.swiper-slide{
        height: 376px;
    }
    .scenes .item.swiper-slide .img{
        width: 936px!important;
    }
    .scenes .col-lg-4.item.swiper-slide{
        height: 362px;
    }
    .scenes .col-lg-4.item.swiper-slide .img{
        width: 288px!important;
    }
    .scenes .col-lg-6.item.auto .img{
        width:100%!important;
        height: 314px;
    }
    .scenes .col-lg-4.item.auto{
        width:33.33%;
    }
    .scenes .col-lg-4.item.auto .img{
        width:100%!important;
    }
    .scenes .col-lg-4.item.auto{
        height: 358px!important;
    }
    

}
@media (min-width: 1200px) {
    .scenes .col-lg-2.item{
        height: 366px;
    }
    .scenes .col-lg-2.item .img{
        width: 302px!important;
    }
    .scenes .col-lg-3.item{
        height: 462px;
    }
    .scenes .col-lg-3.item .img{
        width: 546px!important;
    }
    .scenes .col-lg-4.item{
        height: 432px;
    }
    .scenes .col-lg-4.item .img{
        width: 432px!important;
    }
    .scenes .col-lg-6.item{
        height: 436px;
    }
    .scenes .col-lg-6.item .img{
        width: 546px!important;
    }
    .scenes .item.swiper-slide{
        height: 448px;
    }
    .scenes .item.swiper-slide .img{
        width: 1116px!important;
    }
    .scenes .col-lg-4.item.swiper-slide{
        height: 438px;
    }
    .scenes .col-lg-4.item.swiper-slide .img{
        width: 348px!important;
    }
    .scenes .col-lg-6.item.auto .img{
        width:100%!important;
        height: 379px;
    }
    .scenes .col-lg-4.item.auto{
        height: 435px!important;
    }
}
@media (min-width: 1400px) {
    .scenes .col-lg-2.item{
        height: 428px;
    }
    .scenes .col-lg-2.item .img{
        width: 352px!important;
    }
    .scenes .col-lg-3.item{
        height: 538px;
    }
    .scenes .col-lg-3.item .img{
        width: 636px!important;
    }
    .scenes .col-lg-4.item{
        height: 504px;
    }
    .scenes .col-lg-4.item .img{
        width: 504px!important;
    }
    .scenes .col-lg-6.item{
        height: 508px;
    }
    .scenes .col-lg-6.item .img{
        width: 636px!important;
    }
    .scenes .item.swiper-slide{
        height: 522px;
    }
    .scenes .item.swiper-slide .img{
        width: 1296px!important;
    }
    .scenes .col-lg-4.item.swiper-slide{
        height: 378px;
    }
    .scenes .col-lg-4.item.swiper-slide .img{
        width: 300px!important;
    }
    .scenes .col-lg-6.item.auto .img{
        width:100%!important;
        height: 445px;
    }
    .scenes .col-lg-4.item.auto{
        height: 512px!important;
    }
}
@media (min-width: 1600px) {
    .scenes .col-lg-2.item{
        height: 480px;
    }
    .scenes .col-lg-2.item .img{
        width: 394px!important;
    }
    .scenes .col-lg-3.item{
        height: 602px;
    }
    .scenes .col-lg-3.item .img{
        width: 712px!important;
    }
    .scenes .col-lg-4.item{
        height: 564px;
    }
    .scenes .col-lg-4.item .img{
        width: 564px!important;
    }
    .scenes .col-lg-6.item{
        height: 568px;
    }
    .scenes .col-lg-6.item .img{
        width: 712px!important;
    }
    .scenes .item.swiper-slide{
        height: 582px;
    }
    .scenes .item.swiper-slide .img{
        width: 1446px!important;
    }
    .scenes .col-lg-4.item.swiper-slide{
        height: 426px;
    }
    .scenes .col-lg-4.item.swiper-slide .img{
        width: 338px!important;
    }
    .scenes .col-lg-6.item.auto .img{
        width:100%!important;
        height: 499px;
    }
    .scenes .col-lg-4.item.auto{
        height: 576px!important;
    }
    
}
.program .item{
    position: relative;
    box-shadow: 3px 3px 8px rgb(0 0 0 / 6%);
    transition: all 0.3s;
    overflow: hidden;
    background:#fff;
}
.program .item .txt-img{
    height: auto!important;
}
.program .item .img{
    height: 100%;
    min-height: calc(200px + (400 - 200) * ((100vw - 350px) / (1920 - 350)));
}
.program .item .img{
    min-height: calc(200px + (260 - 200) * ((100vw - 350px) / (1920 - 350)));
}
.program .item .img img{
    max-width: 100%;
    width: 100%;
    height: auto;
}
.program .item .txt-img .txt{
    position: static;
    display: none;
    background:#fff;
    color:#333641;
    transition: all 0.3s;
}
.program .item>.txt{
    position: relative;
    top:0;
    left:0;
    opacity: 1;
    transition: all 0.3s;
    height: auto!important;
    background:linear-gradient(to bottom, rgb(255 255 255 / 80%) 80%, rgb(255 245 226 / 100%) 100%);
}
.program .item:hover .txt-img .txt{
    opacity: 0;
}
.program .item:hover>.txt{
    top:0;
    opacity: 1;
}

.program .hd .dd{
    width: 50%;
}
.program .hd .dd a{ 
    display: block;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    white-space: nowrap;
}
.program .bd,.program .hd .dd a:hover,.program .hd .dd.active a{
    background:linear-gradient(to bottom, rgb(255 255 255 / 99%) 0, rgb(255 245 226 / 100%) 100%);
}
.program .hd .dd a:hover{
    color:#333
}
.program .hd .dd.active a{
    color:#E2A32C
}
@media (min-width: 768px) {
    .program .hd .dd{
        width: 50%;
    }
    .program.small .item .img img{
        max-width: 200%;
        width: auto;
        height: 100%;
    }
    
}
@media (min-width: 992px) {
    .program .hd .dd{
        width: 33.333%;
    }
    .program .item .txt-img{
        height: 100%!important;
    }
    
    .program .item .img{
        height: calc(200px + (400 - 200) * ((100vw - 350px) / (1920 - 350)));
    }
    .program.small .item .img{
        height: calc(200px + (260 - 200) * ((100vw - 350px) / (1920 - 350)));
    }
    
    .program .item .txt-img .txt{
        display: block;
    }
    .program .item .img img{
        max-width: 200%;
        width: auto;
        height: 100%;
    }
    .program .item>.txt{
        position: absolute;
        top:100%;
        height: 100%!important;
    }
    .program .item:hover .txt-img .txt{
        opacity: 0;
    }
    .program .item:hover>.txt{
        top:0;
        opacity: 1;
    }
}
@media (min-width: 1200px) {
    .program .hd .dd{
        width: 20%;
    }
    
}
@media (min-width: 1400px) {
    .program .item .img img{
        width: 100%;
        height: auto;
    }
    .program.small .item .img img{
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    
}
.dot {
    width:13px;
    height:13px;
    border-radius: 50%;
    background: var(--active);
}

.sys-program .item1{
    background:linear-gradient(to left, rgb(255 252 246 / 100%) 0, rgb(194 211 220 / 54%) 54%, rgb(136 171 196 / 10%) 100%);
}
.sys-program .item2{
    background:linear-gradient(to left, rgb(255 252 246 / 100%) 0, rgb(170 209 213 / 54%) 54%, rgb(91 170 182 / 10%) 100%);
}
.sys-program .item3{
    background:linear-gradient(to left, rgb(255 252 246 / 100%) 0, rgb(171 216 178 / 54%) 54%, rgb(90 182 113 / 10%) 100%);
}
.sys-program .item4{
    background:linear-gradient(to left, rgb(255 252 246 / 100%) 0, rgb(172 217 206 / 54%) 54%, rgb(93 183 168 / 10%) 100%);
}
.sys-program .item .feat .dd{
    width: 100%;
    height: 100%;
    border: 1px solid #F7F8FB;
    cursor: pointer;
}
.sys-program .item .feat .dd:hover,.sys-program .item .feat .active .dd{
    border:none;
    background: #fff;
}
.sys-program .item .dot{
    width: auto;
    height: auto;
    background:none;
    border-radius: 0;
}
.sys-program .item .dot p{
    position: relative;
    padding-left: 20px;
}
.sys-program .item .dot p::before{
    content: '';
    display: block;
    position:absolute;
    top:52%;
    left:0;
    width:6px;
    height:6px;
    background: #333641;
    transform: translateY(-50%);
}
.sys-program .card{
    background:rgb(247 248 251 / 40%);
    border-radius: 5px;
    box-shadow:inset 3px 0px 0px rgb(91 182 166 / 40%);
}

.case .img{
    height: 8.7rem!important;
    border-radius: 5px;;
    box-shadow: 3px 3px 8px rgb(0 0 0 / 6%);
}
.case .img.lg{
    height: 10rem!important;
}
.card-case .item{
    position:relative;
}
.card-case .item>div{
    position: relative;
    z-index: 1;
}
.card-case .item .content{
    overflow: auto;
    height: 500px;
    min-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}
.card-case   .py-3 .d-flex{
    display: block!important;
}
.card-case   .vw-50{
    width: 100%!important;
}
/* .card-case .item:before{
    content: '';
    display: block;
    position:absolute;
    top:7%;
    right:15px;
    width: 4px;
    height: 70%;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    z-index: 0;
}
.card-case .item:after{
    content: '';
    display: block;
    position:absolute;
    bottom:-59px;
    left:50%;
    width: 25%;
    height: 176px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/card-case-b.png) no-repeat center center;
    z-index: 0;
} */
@media (min-width: 768px) {
    .card-case   .vw-50{
        width: 50%!important;
    }
    .card-case   .py-3 .d-flex{
        display: flex!important;
    }
}

.business .card{
    height:calc(250px + (600 - 250) * ((100vw - 320px) / (1920 - 320)));
    align-items: center;
    border-radius: 3px;;
    box-shadow: none;
    background: rgb(255 255 255 / 50%);
}
.business .col-lg-3:nth-child(2n+1) .card{
    background: rgb(255 255 255 / 20%)
}
.business .card p{
    display: block;
    opacity: 1;
    transition: all 0.3s;
}
.business .card h4::after{
    display: none;
}
.business .card:hover{
    align-items: start;
}
.business .card:hover h4::after{
    display: block;
}
.business .card:hover p{
    display: block;
    opacity: 1;
}
.business .card:hover{
    box-shadow: none;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5E2 100%);
}
@media (min-width: 768px) {
    .business .card p{
        display: none;
        opacity: 0;
    }
    .business .card{
        background: rgb(255 255 255 / 50%);
    }
}
.introduce h4.line{
    padding:2rem 0;
    border-bottom:1px solid #818389;
}
.introduce .feat .item{
    background:#FDF5E9;
    padding: 0 10% 18%;
    height: 8rem;
}
.introduce .feat li{
    position: relative;
}
.introduce .feat li::before{
    content: '';
    display: block;
    position:absolute;
    top:1rem;
    left:-2rem;
    width:0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #E2A32C;
}
.introduce .feat .vw-20{
    width: 50%!important;
}

@media (min-width: 768px) {
    .introduce .feat .vw-20{
        width: 33.333%!important;
    }
    .introduce .feat .item{
        height: 10rem;
        padding: 5% 10% 20%;
    }
}
@media (min-width: 1200px) {
    .introduce .feat .vw-20{
        width: 20%!important;
    }
    .introduce .feat .item{
        height: 12rem;
        padding: 15% 10% 28%;
    }
}
.download .item{
    position: relative;
    height: 15rem;
    background: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 8px rgb(0 0 0 / 6%);
    overflow: hidden;
}
.download .item .on{
    position: absolute;
    top:-100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5E2 100%);
    opacity: 0;
    transition: all 0.3s;
}
.download .item:hover .on{
    top:0;
    opacity: 1;
}
.download .item .default h4{
    position: relative;
    top:2rem;
}
@media (min-width: 768px) {
    .download .item{
        height: 21rem;
    }
    .download .item .default h4{
        top:4rem;
    }
}
.advantage .item>.d-flex{
    display: block!important;
}
.advantage .img{
    width: 100%;
    border-radius: 5px;
    height: auto!important;
}
.advantage .img img{
    width: 100%;
}
.advantage .txt{
    width: 100%;
    height: auto!important;
}
.advantage .txt>div{
    position: relative;
    border-bottom:0.5rem solid #F7F8FB;
    padding-top:1rem;
    padding-bottom:1rem;
}
.advantage .txt>div:after,.advantage .txt.top>div:after{
    content: '';
    display: block;
    position:absolute;
    bottom:0;
    left:50%;
    border-left:0.8rem solid transparent;
    border-right:0.8rem solid transparent;
    border-bottom:0.8rem solid #F7F8FB;
    transform: translateX(-50%);
}
.advantage .txt.top>div{
    border-top:0.5rem solid #F7F8FB;
    border-bottom:none;
}
.advantage .txt.top>div:after{
    top:0;
    border-top:0.8rem solid #F7F8FB;
    border-bottom:none;
}
.advantage .txt p{
    margin-bottom: 0;
}
.advantage .num{
    color:#F7F8FB;
    line-height: 0.8;
    margin: 1rem 0;
}
@media (min-width: 768px) {
    .advantage .item>.d-flex{
        display: flex!important;
    }
    .advantage .img{
        width: 46%;
    }
    .advantage .txt{
        width: 54%;
        padding:0;
    }
    .advantage .txt.vh-100,.advantage .img.vh-100{
        height: 100%!important;
    }
    .advantage .txt.vh-55{
        height: auto!important;
        min-height: 55%!important;
    }
    .advantage .img.vh-45{
        height: 45%!important;
    }
    .advantage .txt>div{
        padding-top:0;
        padding-bottom:0;
    }
}
@media (min-width: 1400px) {
    
}
.charact .item{
     min-width: 56px;
    transition: all 0.3s;
    overflow: hidden;
}
.charact .content.d-flex,.charact .item.d-flex{
    display: block!important;
}
.charact .item.current{
    flex-grow: 100;
}
.charact .hd{
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
}
.charact .hd.vh-100{
    height: auto!important;
}
.charact .item:nth-child(2n) .hd{
    background: linear-gradient(to right, #F7F8FB 0%, rgba(247, 248, 251, 0) 100%), #FFFFFF;
}
.charact .hd h4{
    color:rgba(51, 54, 65, 0.3);
    text-align: center;
    margin-bottom: 0;
    padding:0.5rem;
}
.charact .hd h4 span{
    margin-left:1rem;
    letter-spacing: 0.5rem;
}
.charact .item.current .hd{
    background: linear-gradient(to top, #FFFFFF 0%, #FFF5E2 100%);
}
.charact .item.current .hd h4,.charact .item.current .hd h4 span{
    color:#E2A32C;
}
.charact .bd{
    display: none;
    opacity:0;
    position: relative;
    transition: all 0.3s;
    min-height: 170px;
}
.charact .item.current .bd{
    display: flex;
    opacity: 1;
    flex-grow: 100;
}
.charact .bd .img{
    position: relative;
}
.charact .bd .img img{
    width: 100%;
    height: 100%;
}
.charact .bd .txt{
    position: absolute;
    bottom:0;
    width: 100%;
    padding: 1rem;;
}

@media (min-width: 768px) {
    .charact .bd{
        min-height: calc(200px + (500 - 200) * ((100vw - 320px) / (1920 - 320)))!important;
    }
    .charact .bd .img img{
        width: 100%;
        height: auto;
    }
    .charact .hd h4 span{
        letter-spacing:0.8rem;
    }
    .charact .bd{
        min-height: auto!important;
    }
    
}
@media (min-width: 992px) {
    .charact .item{
        min-width: 70px;
    }
    .charact .content.d-flex,.charact .item.d-flex{
        display: flex!important;
    }
    .charact .hd.vh-100{
        height: 100%!important;
    }
    .charact .hd h4{
        padding: 0;
    }
    .charact .hd h4 span{
        margin-left:0;
        display: block;
        writing-mode: vertical-lr;
        writing-mode: tb-lr;
    }
    .charact .item:nth-child(2n) .hd{
        background: linear-gradient(to bottom, #F7F8FB 0%, rgba(247, 248, 251, 0) 100%), #FFFFFF;
    }
    .charact .item .bd{
        display: flex;
        width: 0;
    }
    .charact .item.current .bd{
        width: auto;
    }
    .charact .bd {
        max-width: calc(100% - 70px);
    }
    .charact .bd .img{
        position: relative;
    }
    .charact .bd .txt{
        position: absolute;
        padding: 2rem;
    }
    .charact .bd .img img{
        max-width: 200%;
        width: auto;
        height: 100%;
    }
    .charact .item.col3{
        height: 422px;
    }
    .charact .item.col3 .bd .img{
        width: 656px;
    }
    .charact .item.col4{
        height: 422px;
    }
    .charact .item.col4 .bd .img{
        width: 726px;
    }
}
@media (min-width: 1200px) {
    .charact .item{
        min-width: 72px;
    }
    .charact .bd {
        max-width: calc(100% - 72px);
    }
    .charact .item.col3{
        height: 442px;
    }
    .charact .item.col3 .bd .img{
        width: 827px;
    }
    .charact .item.col4{
        height: 440px;
    }
    .charact .item.col4 .bd .img{
        width: 900px;
    }
}
@media (min-width: 1400px) {
    .charact .item{
        min-width: 74px;
    }
    .charact .bd {
        max-width: calc(100% - 74px);
    }
    .charact .bd .img img{
        width: 100%;
        height: auto;
    }
    .charact .item.col3{
        height: 476px;
    }
    .charact .item.col3 .bd .img{
        width: 998px;
    }
    .charact .item.col4{
        height: 486px;
    }
    .charact .item.col4 .bd .img{
        width: 1072px;
    }
}
@media (min-width: 1600px) {
    .charact .item.col3{
        height: 553px;
    }
    .charact .item.col3 .bd .img{
        width: 1148px;
    }
    .charact .item.col4{
        height: 552px;
    }
    .charact .item.col4 .bd .img{
        width: 1222px;
    }
}
.trust .map{
    position:relative;
    top:0;
    right: 0;
    z-index: -1;
}
.trust .map .img{
    width: auto;
}
.trust .map .icon{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF5E2 0%, #FFFFFF 100%);
    box-shadow: 0px 6px 10px rgba(226, 163, 44, 0.2), 0px 40px 20px rgba(226, 163, 44, 0.1);
}
.trust .map .icon1{
    top: 20%;
    right: 38%;
}
.trust .map .icon2{
    top: 31%;
    right: 18%;
}
.trust .map .icon3{
    top: 49%;
    right: 38%;
}
.trust .map .icon4{
    top: 57%;
    right: 18%;
}
.trust .map .icon img{
    width: 70%;
}
@media (min-width: 768px) {
    .trust .map .icon{
        width: 4.6rem;
        height: 4.6rem;
    }
    .trust .map .icon img{
        width:48px;
    }
    
}
@media (min-width: 992px) {
    .trust .map{
        position:absolute;
        top:-12%;
        right: -5%;
    }
    .trust .map .icon1{
        top:25%;
        right:35%;
    }
    .trust .map .icon2{
        top:32%;
        right:20%;
    }
    .trust .map .icon3{
        top:47%;
        right:35%;
    }
    .trust .map .icon4{
        top:55%;
        right:20%;
    }
}
@media (min-width: 1200px) {
    .trust .map .icon{
        width: 5rem;
        height: 5rem;
    }
}
@media (min-width: 1400px) {
    .trust .map .icon{
        width: 5.6rem;
        height: 5.6rem;
    }
}

.worth .card.d-flex{
    display: block!important;
}
.worth .card.vh-100{
    height: auto!important;
}
@media (min-width: 768px) {
    
    .worth .card.d-flex{
        display: flex!important;
    }
    .worth .card.vh-100{
        height: 100%!important;
    }
}
.page-template-solution .code-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-core.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.page-template-solution .case-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-case.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.page-template-solution .cases-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-cases.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.page-template-solution .card-case-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-card-case.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.page-template-solution .type-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-type.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.page-template-solution .business-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-business.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.page-template-solution .carbus-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-carbus.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.page-template-solution .introduce-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-introduce.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .charact-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-charact.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .protrude-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-protrude.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .protrudes-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-protrudes.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .card-bg{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/banners/retailCard.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.swiper-container{
    position: relative;
    overflow: hidden;
}
.swiper-prev,.swiper-next{
    opacity: 0.6;
}
.swiper-prev:hover,.swiper-next:hover{
    opacity: 1;
}
.scenes .swiper-prev,.scenes .swiper-next{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    z-index: 9;
}
.scenes .swiper-prev .iconfont,.scenes .swiper-next .iconfont{
    padding:10px;
    font-size: 20px;
    font-weight: bold;
    color:#fff;
}
.scenes .swiper-prev:hover  .iconfont,.scenes .swiper-next:hover .iconfont{
    color:#E2A32C;
}
.scenes .swiper-prev{
    left:-25px;
}
.scenes .swiper-next{
    right:-25px;
}
.scenes .swiper-container .num{
    position:absolute;
    bottom:0;
    right:0;
    z-index: 9;
    width: calc(60px + 6%);
    text-align: center;
}
.swiper .radius-prev-next .swiper-prev,.swiper .radius-prev-next .swiper-next{ 
    position: static;
    width: 2.7rem;
    height: 2.7rem;
    line-height: 2.7rem;
    border-radius: 50%;
    border:1px solid #E2A32C;
    transform: translateY(0);
    text-align: center;
    z-index: 1;
}
.swiper .radius-prev-next .swiper-prev:hover,.swiper .radius-prev-next .swiper-next:hover{ 
   background: #E2A32C;
}
.swiper .radius-prev-next .swiper-prev .iconfont, .swiper .radius-prev-next .swiper-next .iconfont{
    color:#E2A32C;
    font-size:18px;

}
.swiper .radius-prev-next .swiper-prev:hover .iconfont, .swiper .radius-prev-next .swiper-next:hover .iconfont{
    color:#fff;
}
@media (min-width: 992px) {
    .scenes .swiper-prev{
        left:-10px;
    }
    .scenes .swiper-next{
        right:-10px;
    }
    .scenes .swiper-prev .iconfont,.scenes .swiper-next .iconfont{
        font-size: 24px;
    }
    .scenes .swiper-container .num{
        bottom:5px;
    }
}
.type .swiper-container{
    overflow:visible;
}
.type .row.swiper-wrapper{
    flex-wrap: nowrap;
}
.type .swiper-prev,.type .swiper-next {
    color:#fff;
    background: linear-gradient(to top,#DFB264 0,#EFCD91 100%);
    border-radius: 3px;
}
.type .swiper-prev i,.type .swiper-next i{
    line-height: 1.6;
}
.custom .thumbSwiper .swiper-slide-thumb-active{
    position: relative;
}
.custom .thumbSwiper .swiper-slide-thumb-active a{
    display: block;
    color:#E2A32C;
}
.custom .thumbSwiper .swiper-slide-thumb-active:after{
    content: '';
    display: block;
    position:absolute;
    bottom:0;
    left:50%;
    width:88px;
    border-bottom:4px solid #E2A32C;
    transform: translateX(-50%);
}
.custom .hd .swiper-container{
    flex: auto;

}
.custom .hd span{
    white-space: nowrap;
    line-height: 2.1;
}
.flow-con{

}
.flow-con .start{
    color: #2574AC;
}
.flow-con .primary{
    color: #3A99D9;
}
.flow-con .success{
    color: #279FA4;
}
.flow-con .end{
    color: #6BA25E;
}
.flow-con .icon{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
}
.flow-con .icon.auto{
    width: auto;
    height: auto;
}
.flow-con .start .icon{
    background: linear-gradient(0deg, #2574AC, #2574AC), #2574AC;
}
.flow-con .primary .icon{
    background: #3A99D9;
}
.flow-con .success .icon{
    background: #279FA4;
}
.flow-con .end .icon{
    background: #6BA25E;
}
.flow-con .arrow{
    position: absolute;  
}
.flow-con .right,.flow-con .bottom{
    position:relative; 
}

.flow-con .right .arrow{
    display: none;
    position: absolute;
    left:100%;
    top:calc(50% - 13px);
    width:34px;
    height: 26px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow-r.png) no-repeat;
    background-size:contain ;
}
.flow-con .right .arrow.b{
    display: block;
    top:100%;
    left:calc(50% - 13px);
    width:26px;
    height: 34px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow-b.png) no-repeat;
}
.flow-con .right .arrow-m{
    width:46px;
    height: 24px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow-rm.png) no-repeat;
    background-size:contain ;
}
.flow-con .top .arrow-m{
    width:24px;
    height: 46px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow-tm.png) no-repeat;
    background-size:contain ;
}
.flow-con .bottom .arrow-m{
    width:24px;
    height: 46px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow-bm.png) no-repeat;
    background-size:contain ;
}
.flow-con .start .icon .arrow{
    top:95%;
    width:20px;
    height: 20px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow1.png);
}
.flow-con .primary .icon .arrow{
    top:95%;
    width:20px;
    height: 20px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow2.png);
}
.flow-con .success .icon .arrow{
    top:95%;
    width:20px;
    height: 20px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow3.png);
}
.flow-con .ps{
    position:absolute;
    top:0;
    transform: translateY(-100%);
}
.flow-con .g-5{
    margin-top:0;
}
@media (min-width: 992px) {

    .flow-con .right .arrow.r{
        display: block;
    }
    .flow-con .right .arrow.b{
        display: none;
    }
}
.digitalFactory .pr{
    padding-bottom:120px;
}
.digitalFactory .txt{
    position: absolute;
    bottom:0;
    left:50%;
    height: 120px;
    width: 100%;
    transform: translateX(-50%);
}
.digitalFactory .txt h4{ 
    font-size: 15px;;
}
.digitalFactory .txt p{ 
    font-size: 12px;;
}
@media (min-width: 992px) {
    .digitalFactory .txt{
        
    }
}
@media (min-width: 1200px) {
    .digitalFactory .pr{
        padding-bottom:100px;
    }
    .digitalFactory .txt{
        width: 470px;
    }
}
.cust-val .cont{
    max-width: 1004px;
}
.cust-val h4{
    line-height: 1;;
    letter-spacing: 10px;
    margin: 0;
}
.cust-val .item{
    position: relative;
    top:0;
    transition: all 0.3s;
}
.cust-val .item:hover{
    top:-5px;
}
.pro-display .hd{
    border-bottom:2px solid #F7F8FB;
}
.pro-display .hd .dd{
    position:relative;
}
.pro-display .hd .dd.active:after{
    content:'';
    position: absolute;
    left: 0;
    bottom:-1px;
    width: 100%;
    height: 2px;
    background: var(--active);
}
.retail-bus .line{
    position:relative;
}
.retail-bus .line:after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width: 80px;
    height: 2px;
    background-color: var(--active);
}
.retail-bus .row{
    margin-top:0;
}
.framework .hd .dd{
    background: #fff;
    border-radius: 10px;
    width: 13%;
}
.framework .hd .dd:hover{
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5E2 100%);
}
.framework .hd .dd:hover a{
    color:var(--active)
}
.framework .arrow.b{
    display: inline-block;
    width:26px;
    height: 34px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow-b.png) no-repeat;
}

.framework .title{
    border-radius:10px;
    background: linear-gradient(99.85deg, #B4AD98 7.32%, #E8E1CF 35.95%, #D4CDBB 74.11%, #B0A994 92.53%);
}
.framework .text-img{
    position: relative;
    min-height: 786px;
}
.framework .text-img>div{
    position: relative;
    z-index: 1;
}
.framework .text-img .bg{
    display: none;
    position: absolute;
    left:50%;
    top:0;
    width: 100%;
    height: 885px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/frame-bg.png) no-repeat center center;
    background-size: contain;
    transform: translateX(-50%);
}
.framework .card.col-lg-4 {
    border-radius: 10px;
}
.framework .text-img .row{
    margin:0;
}
.framework .text-img .col-lg-3>div{
    position: relative;
    z-index: 1;
}
.framework .text-img .col-lg-3 h4{
    background: linear-gradient(180.98deg, #D4CDBB 1.05%, #B0A994 60.33%);
border-top: 1px solid #FFFFFF;
border-radius: 0px 0px 10px 10px;
}
.framework .text-img .col-lg-3{
    position:relative;
    padding:0;
    width: 100%;
    align-items: flex-end;
}
.framework .img-pr{
    position: relative;
    padding-bottom: 320px!important;
}
.framework .card+.img{
    position:absolute;
    bottom:0;
    width: 100%;
    height: 320px;
    max-height: 100%;
}
.framework .card+.img img{
    max-height: 100%;
}
@media (min-width: 768px){
    .framework .img-pr{
        padding-bottom: 560px!important;
    }
    .framework .card+.img{
        height: 560px;
        width: 100%;
    }
    .framework .hd .dd{
        width: 13%;
    }
    .framework .text-img h3.text66{
        writing-mode: vertical-lr;
        writing-mode: tb-lr;
    }
    .framework .card.col-lg-4{
        width: 272px;
        height: 300px;
    }
    .framework .text-img .col-lg-3{
        width: 45%;
        margin: 0 5%;
    }
    .framework .text-img .col-lg-3:nth-child(2n+1){
        margin-left:0
    }
    .framework .text-img .col-lg-3:nth-child(2n){
        margin-right:0
    }
}
@media (min-width: 992px){
    .framework .text-img h3.text66{
        writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
    }
    .framework .text-img .bg{
        display: block;
    }
    .framework .hd .dd{
        width: 12%;
    }
    .framework .text-img{
        min-height: 584px;
    }
    .framework .text-img .bg{
        height: 694px;
    }
    .framework .text-img .col-lg-3{
        width:156px;
        margin: 0 41px;
    }
    .framework .text-img .col-lg-3:nth-child(2n+1){
        margin-left:41px;
    }
    .framework .text-img .col-lg-3:nth-child(2n){
        margin-right:41px;
    }
    .framework .text-img .col-lg-3:first-child{
        margin-left:0
    }
    .framework .text-img .col-lg-3:last-child{
        margin-right:0
    }
    .framework .img-pr{
        position: relative;
        padding-bottom: 0!important;
    }
    .framework .card+.img{
        position:static;
        bottom:0;
        width: auto;
        height: auto;
    }
}
@media (min-width: 1200px){
    
    .framework .text-img{
        min-height: 665px;
    }
    .framework .text-img .bg{
        height: 776px;
    }
    .framework .text-img .col-lg-3{
        width:184px;
        margin: 0 50px;
    }
    .framework .text-img .col-lg-3:nth-child(2n+1){
        margin-left:50px;
    }
    .framework .text-img .col-lg-3:nth-child(2n){
        margin-right:50px;
    }
    .framework .text-img .col-lg-3:first-child{
        margin-left:0
    }
    .framework .text-img .col-lg-3:last-child{
        margin-right:0
    }

}
@media (min-width: 1400px){
    .framework .card.col-lg-4 {
        height: 320px;
    }
    .framework .text-img{
        min-height: 742px;
    }
    .framework .text-img .bg{
        height: 855px;
    }
    .framework .text-img .col-lg-3{
        width:213px;
        margin: 0 58px;
    }
    .framework .text-img .col-lg-3:nth-child(2n+1){
        margin-left:58px;
    }
    .framework .text-img .col-lg-3:nth-child(2n){
        margin-right:58px;
    }
    .framework .text-img .col-lg-3:first-child{
        margin-left:0
    }
    .framework .text-img .col-lg-3:last-child{
        margin-right:0
    }

}
@media (min-width: 1600px){
    .framework .text-img{
        min-height: 787px;
    }
    .framework .text-img .bg{
        width: 1346px;
        height: 885px;
    }
    .framework .text-img .col-lg-3{
        width: 240px;
        margin: 0 64px;
    }
    .framework .text-img .col-lg-3:nth-child(2n+1){
        margin-left:64px;
    }
    .framework .text-img .col-lg-3:nth-child(2n){
        margin-right:64px;
    }
    .framework .text-img .col-lg-3:first-child{
        margin-left:0
    }
    .framework .text-img .col-lg-3:last-child{
        margin-right:0
    }
}

.icard-frame .warning{
    background: linear-gradient(90deg, #FFF5E2 0%, #FFF5E2 100%), #FFFFFF;
    box-shadow: 0px 0px 12px rgba(226, 163, 44, 0.0001);;
}
.icard-frame .success{
    background: linear-gradient(0deg, #99B091, #99B091), #FFFFFF;
box-shadow: 0px 0px 12px rgba(226, 163, 44, 0.0001);
}
.icard-frame .danger{  
background: linear-gradient(0deg, #E2A32C, #E2A32C), #FFFFFF;
box-shadow: 0px 0px 12px rgba(226, 163, 44, 0.0001);
}
.icard-frame .primary{  
    background: linear-gradient(0deg, #4781F3, #4781F3), #FFFFFF;
box-shadow: 0px 0px 12px rgba(226, 163, 44, 0.0001);
}
.icard-frame .vertical-lr{
    width: 60px;
}
.icard-frame .line{
    margin-top:40px;
    margin-bottom:40px;
    position: relative;
    left: 20px;
    width: calc(100% - 50px);
    height: 4px;
    background: #EFCB91;
}
.icard-frame .line:after{
    content:'';
    position: absolute;
    top:50%;
    right: -10px;
    border-top: 12px solid transparent;
    border-left: 20px solid #EFCB91;
    border-bottom: 12px solid transparent;
    transform: translateY(-50%);
}
.icard-frame .bet:not(.line){
    margin: 90px 0;
}
.icard-frame .line.bet{
    margin: 60px 0;
}
.icard-frame .bet .icon{
    position:absolute;
    top:100%;
    left:45%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid #EFCB91;
    background: #fff;
    z-index: 1;
}
.icard-frame .line.bet .icon{
    left:50%;
    transform: translate(-50%,-45%);
}
.icard-frame .arrow{
    
}
.icard-frame .item .arrow.r{
    display: block;
    position:absolute; 
    margin-left:6px;
    left: 100%;
    top:calc(50% - 8px);
    width:20px;
    height: 16px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow4.png) no-repeat center center;
    background-size: cover;
}
.icard-frame .item .arrow.b.ps{
    position:absolute; 
    left:50%;
    top:100%;
    margin-top:3px;
}
.icard-frame .arrow.b{
    width:16px;
    height: 20px;
    background: url(/wp-content/themes/qnz/assets/img/productSolutions/icon/arrow5.png) no-repeat center center;
    background-size: cover;
}
.icard-frame .cont{
    display: block!important;
}
.icard-frame .item{
    width: 100%!important;
}
.icard-frame .item.pr{
    margin-bottom:25px!important;
}
.icard-frame .item .arrow.r{
    display: none;
}
.icard-frame .item .arrow.b{
    display: block;
}
@media (min-width: 992px){
   
}
@media (min-width: 992px){
    .icard-frame .bet:not(.line){
        margin: 55px 0;
    }
}
@media (min-width: 1200px){
    .icard-frame .cont{
        display: flex!important;
    }
    .icard-frame .item.vw-28{
       width: 28%!important;
    }
    .icard-frame .item.vw-38{
        width: 38%!important;
     }
     .icard-frame .item.vw-63{
        width: 63%!important;
     }
     .icard-frame .item .arrow.r{
        display: block;
    }
    .icard-frame .item .arrow.b{
        display: none;
    }
    .icard-frame .line{
        margin-top:0;
        margin-bottom:0;
    }
    .icard-frame .line.bet{
        margin: 0;
    }
    .icard-frame .bet .icon{
        position:absolute;
        top:50%;
        left:98%;
        width: 120px;
        height: 120px;
        transform: translate(-50%,-50%);
    }
}
.case-scene .item{
    border:1px solid #EFCB91;
    border-radius: 5px;
    background: linear-gradient(90deg, #FFF5E2 0%, #FFF5E2 100%), #FFFFFF;
    box-shadow: 0px 0px 12px rgba(226, 163, 44, 0.0001);;
}
.case-scene .arrow {
    position:absolute;
    top:100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.case-scene .arrow i{
    display: block;
    width:6px;
    height: 16px;
    background: var(--active);
    transform: translateY(-50%);
}
.case-scene .arrow i:after{
    content:'';
    position:absolute;
    width: 16px;
    height: 16px;
}
.case-scene .arrow i.l{
    top:calc(50% - 50px);
   
}
.case-scene .arrow i.r{
    bottom:calc(50% - 50px);
    margin-top:-5px;
}
.case-scene .arrow i.l:after{
    left: -5px;
    top: -5px;
    border-top:6px solid var(--active);
    border-left:6px solid var(--active);
    transform: rotateZ(45deg);
}
.case-scene .arrow i.r:after{
    right: -5px;
    bottom:-5px;
    border-top:6px solid var(--active);
    border-right:6px solid var(--active);
    transform: rotateZ(135deg);
}
.case-scene .arrow.auto{
    top:45%;
    left: -20px;
    width: 6px!important;
    height: 100%!important;
}
.case-scene .arrow.auto i{
    height: 110%;
}
.case-scene .item:has(.arrow.auto){
    left: 40px;
    width: calc(100% - 40px - 2rem);
}
.case-scene .cont{
   display: block!important;
}
.case-scene .cont .dl{
    display: flex!important;
 }
 .case-scene .cont .dl .dd.vw-40{
    width: 40%!important;
 }
 .case-scene .cont .item.pr+.item{
    margin-top:30px!important;
 }

 .case-scene .arrow.vh-40, .case-scene .arrow.vh-50{
    margin-top:19px;
    height: 30px!important;
 }
@media (min-width: 768px){
    .case-scene .item:has(.arrow.auto){
        left: 40px;
        width: calc(100% - 40px - 3rem);
    }
}
@media (min-width: 992px){
    .case-scene .cont{
        display: flex!important;
     }
     .case-scene .cont .dl{
        display: block!important;
     }
     .case-scene .arrow{
        flex-direction: column;
        top:50%;
        left: 100%;
        transform: translateY(-50%);
     }
    .case-scene .arrow i{
        width: 40px;
        height: 6px;
        transform: translateY(-50%);
    }
    .case-scene .arrow i:after{
        top:-8px;
        width: 22px;
        height: 22px;
        
    }
    .case-scene .arrow i.l:after{
        top:-8px;
        left: 2px;
        transform: rotateZ(-45deg);
    }
    .case-scene .arrow i.r:after{
        right: 2px;
        transform: rotateZ(45deg);
        
    }
    .case-scene .arrow.auto{
        top:100%;
        left: -40%;
        height: 6px!important;
        width: 100%!important;
    }
    .case-scene .arrow.auto i{
        width: 180%;
        height: 100%!important;
    }
    .case-scene .cont .dl .dd.vw-40{
        width: 100%!important;
     }
     .case-scene .arrow.vh-40{
        height: 40%!important;
     }
     .case-scene .arrow.vh-50{
        height: 50%!important;
     }
     .case-scene .item:has(.arrow.auto){
        left: 0;
        width: auto;
    }
}
@media (min-width: 1200px){
    .case-scene .arrow i{
        width: 55px;
    }
}
@media (min-width: 1400px){
    .case-scene .arrow i{
        width: 60px;
    }
}
.gover-scene .item h4{
    position:absolute; 
    top:-1.4rem;
}
.gover-scene .item h4 span{
    display: inline-block;
    line-height: 1.8;
    border-radius: 32px;
    color:#fff;
}
.gover-scene .warning.txt{
    color:#E2A32C;
}
.gover-scene .warning.bg{
    background: #FFF5E2;
    border: 1px solid #E2AD2C;
}
.gover-scene .warning h4 span{
    background: #E2A32C;
}
.gover-scene .warning .border{
    border-color: #E2A32C;
}
.gover-scene .primary.txt{
    color:#5589EF
}
.gover-scene .primary.bg{
    background: #E9F0FF;
border: 1px solid #2B7FEB;
}
.gover-scene .primary h4 span{
    background: #5589EF;
}
.gover-scene .primary .border{
    border-color: #5589EF;
}
.gover-scene .success.txt{
    color:#99B091
}
.gover-scene .success.bg{
    background: #F2FAEF;
border: 1px solid #99B091;
}
.gover-scene .success h4 span{
    background: #99B091;
}
.gover-scene .success .border{
    border-color: #99B091;
}
.tsm .card{
    border-top:1px solid rgba(226,163,44,0.2);
    border-bottom:1px solid rgba(226,163,44,0.2);

}
.tsm .card .num{
    color: rgba(226,163,44,0.2);
    font-style: normal;
font-weight: 400;
}
.tsm .info{
    background: linear-gradient(90deg, #FFF5E2 0%, rgba(255, 245, 226, 0) 100%);
border-radius: 5px;
}
.tsm-val .col-lg-6{
    width: 100%!important;
}
.tsm-val .col-lg-6 .item{
    display: block!important;
}
.tsm-val .col-lg-6 .item>.vh-100{
    height: auto!important;
    width: 100%;
    padding: 10px;
    text-align: center;
    justify-content: center;
}
@media (min-width: 768px){
    .tsm-val .col-lg-6 .item{
        display: flex!important;
    }
    .tsm-val .col-lg-6 .item>.vh-100{
        padding: 0;
        height: 100%!important;
        width: auto;
        text-align: left;
        justify-content: start;
    }
}
@media (min-width: 1400px){
    .tsm-val .col-lg-6{
        width:50%!important;
    }
}

.page-template-solution .bg-core{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-core1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-cust-core{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-cust-core.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-data{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-data.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-use{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-use.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-val{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-val.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-cust{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-cust.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-product{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-product.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-frame{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-frame.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-template-solution .bg-case-scene{
    background-image: url(/wp-content/themes/qnz/assets/img/productSolutions/bg-case-scene.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}<!--ºÄʱ1755802153.0044Ãë-->