﻿@media screen and (max-width: 1800px) {
  .xz-home .adv-wrap {
    margin-top: -13.8rem;
  }
}

@media screen and (max-width: 1700px) {
  .xz-home .adv-wrap {
    margin-top: -10.8rem;
  }
}

@media screen and (max-width: 1680px) {
  .xz-home .adv-wrap {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 1600px) {
  header #header-search-btn {
    margin-left: 2rem;
    margin-right: 1rem;
  }
  .pro-intro .pro-intro-x .pro-btns .whats-txt {
    display: none;
  }
  .project-main {
    flex-direction: column-reverse;
  }
  .project-main .project-r {
    width: 100%;
  }
  .xz-404 .xz-404-info .right-404 .big {
    font-size: 4rem;
  }
}

@media screen and (max-width: 1280px) {
  .pro-intro .pro-intro-x {
    padding-left: 0;
  }
  .xz-slide-gallery.slick-slider
.xz-gallery-item.slick-current
+ .xz-gallery-item {
    overflow: hidden;
  }
  .home-proj-ls {
    --arrow-padding: -3rem;
    --arrow-color: #2095d4;
  }
}

@media screen and (max-width: 1126px) {
  .xz-btns {
    gap: 1rem;
  }
  .xz-btns .xz-btn {
    padding: 0 2rem;
  }
  .xz-contact .contact-wrap .contact-container .right {
    background: url(../images/map-bg.png) 35% 0 no-repeat, url(../images/map.png) 35% 0 no-repeat;
  }
}

@media screen and (max-width: 1024px) {
  .xz-btns .xz-btn {
    padding: 0 1.5rem;
    gap: 1rem;
  }
  .xz-pro-ls .pro-cat-tax {
    flex-direction: column-reverse;
  }
  .xz-pro-ls .pro-cat-tax .pro-cat-left {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
  .xz-pro-ls .pro-cat-tax .pro-cat-left .cat-top {
    width: 58%;
  }
  .xz-pro-ls .pro-cat-tax .pro-cat-left .cat-bottom {
    width: 40%;
    background: #f8f8f8;
  }
  .xz-pro-ls .pro-cat-tax .pro-cat-left .cat-bottom .xz-form-1c5 .xz-form-info,
  .xz-pro-ls .pro-cat-tax .pro-cat-left .cat-bottom .xz-form-1c5 .xz-form-msg {
    background: #fff;
  }
  .news-ls,
  .search-ls {
    grid-template-columns: repeat(3, 1fr);
  }
  .xz-single-layout {
    flex-direction: column;
  }
  .xz-single-layout .xz-single-main {
    width: 100%;
  }
  .xz-single-layout .xz-single-sidebar {
    width: 100%;
    padding-top: 0;
    padding-bottom: 10rem;
  }
  .casepage.alignfull {
    padding-bottom: 0rem;
  }
  .project-l .cat-top .projcat-ls .list_box .list ul li {
    line-height: 1.5em;
  }
  div.xz-cards-block.xz-cards-e5jq {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
  .xz-cards-e5jq > :nth-child(odd) {
    background: #f8f8f8;
  }
  .xz-about .about-top-wrap {
    margin-top: -5rem;
  }
  .xz-about .square-wrap {
    flex-direction: column;
  }
  .xz-contact .contact-wrap .contact-container {
    flex-direction: column;
  }
  .xz-contact .contact-wrap .contact-container .left {
    margin-left: 0;
    width: 100%;
  }
  .xz-contact .contact-wrap .contact-container .right {
    flex: none;
    margin-right: 0;
    padding-right: 0;
    width: 100%;
    height: 67.6rem;
  }
  .xz-home .proj-wrap .xz-tab-home-hotproj .xz-tab-tit-x {
    overflow-x: auto;
  }
  .search-sec.alignfull .search-form {
    height: 30rem;
  }
  .xz-404 .xz-404-info {
    margin-top: 0;
    margin-bottom: 10rem;
  }
  .xz-404 .xz-404-info .right-404 .big {
    margin-top: 0;
  }
}

@media screen and (max-width: 950px) {
  .xz-btns {
    gap: 0.5rem;
  }
  .xz-btns .xz-btn {
    padding: 0 1rem;
    gap: 0.5rem;
  }
  .case_cat-ls {
    grid-template-columns: 1fr 1fr;
  }
  .case_cat-ls li a {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media screen and (max-width: 820px) {
  .pro-intro {
    flex-direction: column;
  }
  .pro-intro .pro-tit {
    margin-left: 2rem;
  }
  .pro-intro .pro-gallery {
    width: 100%;
    max-width: 75rem;
    margin: 0 0 5rem;
  }
  .pro-intro .pro-intro-x {
    width: 100%;
  }
  .xz-btns {
    gap: 1rem;
  }
  .xz-btns .xz-btn {
    padding: 0 2rem;
    gap: 1rem;
  }
  .news-ls,
  .search-ls {
    grid-template-columns: 1fr 1fr;
  }
  .xz-single-main .xz-single-bg {
    padding: 4rem 2rem;
  }
  .xz-single-layout .xz-single-sidebar {
    padding-bottom: 5rem;
  }
  .xz-single-case {
    padding: 4rem 2rem;
  }
  .xz-prenext {
    margin: 5rem 0;
  }
  .xz-pn-link::before,
  .xz-pn-link a {
    font-size: 1.8rem;
  }
  .xz-single-sidebar {
    padding-left: 0;
  }
  .sec-pro-rel {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .sec-pro-rel .rel-pro-x {
    grid-template-columns: 1fr 1fr;
  }
  .sec-case-rel {
    margin-top: 5rem;
  }
  .sec-project-rel {
    margin-top: 5rem;
    margin-bottom: 6rem;
  }
  .sec-project-rel .rel-project-x {
    grid-template-columns: 1fr 1fr;
  }
  .touch-sec-x {
    margin: 5rem auto;
  }
  .xz-project-ls .project-cat-tax {
    flex-direction: column-reverse;
  }
  .xz-project-ls .project-cat-tax .project-cat-right {
    width: 100%;
  }
  .project-l .cat-top .projcat-ls .list_box {
    display: flex;
    flex-flow: row wrap;
    gap: 0 2%;
  }
  .project-l .cat-top .projcat-ls .list_box .list {
    width: 48%;
  }
  .project-main .project-r .proj-intro {
    flex-direction: column;
  }
  .project-main .project-r .proj-intro .proj-gallery {
    width: 100%;
    max-width: 55rem;
    margin: 0 0 5rem;
  }
  .project-main .project-r .proj-intro .proj-intro-x {
    padding-left: 0;
    width: 100%;
  }
  .xz-contact .contact-wrap .contact-container .left {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .xz-home .home-procat {
    grid-template-columns: 1fr;
    gap: 2rem 0;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .home-proj-ls .slick-arrow {
    bottom: -10rem;
    left: 50%;
    top: auto;
  }
  .home-proj-ls .slick-prev.slick-arrow:after {
    transform: translate(-125%, -50%);
  }
  .home-proj-ls .slick-next.slick-arrow:after {
    transform: translate(25%, -50%);
  }
}

@media screen and (max-width: 781px) {
  .xz-slide-gallery.slick-slider {
    --arrow-color: #2095d4;
    --arrow-color-hover: #2095d4;
  }
}

@media screen and (max-width: 768px) {
  .pro-ls,
  .proj-ls {
    grid-template-columns: 1fr;
  }
  .xz-contact .contact-wrap .contact-container .right {
    background: url(../images/map-bg.png) 35% 0 no-repeat, url(../images/map.png) 35% 0 no-repeat;
  }

  .xz-searchform-input,.xz-searchform{
    width:auto;
  }
  .search-g ul{
    gap:25px;
  }
  .xz-home .about-wrap > div:first-child h1{
      font-size:2.1rem;
      line-height:1.2;
  }

}

@media screen and (max-width: 600px) {
  .xz-pro-ls .pro-cat-tax .pro-cat-left {
    flex-direction: column;
  }
  .xz-pro-ls .pro-cat-tax .pro-cat-left .cat-top,
  .xz-pro-ls .pro-cat-tax .pro-cat-left .cat-bottom {
    width: 100%;
  }
  .project-l .cat-top .projcat-ls .list_box {
    gap: 0;
  }
  .project-l .cat-top .projcat-ls .list_box .list {
    width: 100%;
  }
  .xz-about .about-top-wrap {
    padding-top: 9rem;
  }
  .f-sec1,
  .xz-copyright {
    margin-left: 1rem;
  }
  .right-nav {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .xz-copyright {
    padding:3rem 0px 7.5rem;
    margin-left:0px;
  }
  .xz-404 .xz-404-info {
    flex-direction: column;
    gap: 5rem;
  }
  .xz-404 .xz-404-info .left-404,
  .xz-404 .xz-404-info .right-404 {
    width: 100%;
  }
  .xz-404 .xz-404-info .right-404 .big {
    margin-top: 3rem;
  }
  .search-sec.alignfull .search-form {
    height: 25rem;
  }
  
.f-menu3{
    width:100%;
    max-width:100%;
}

.ind_box2 .ito-fst{
    margin-bottom:2rem;
}

.ind_box2 h2{
    margin:2rem auto;
}
.ind_box2 .title1{
    margin-bottom:1rem;
}

.home-proj-ls .slick-track{
    gap:1.5rem;
}
}

@media screen and (max-width: 450px) {
  .xz-banner-tit {
    font-size: 2rem;
    margin-bottom: 0rem;
  }
  .xz-banner-txt {
    margin-bottom: 4rem;
  }
  .xz-btn {
    gap: 1rem;
    padding: 0 2rem;
  }
  .xz-btn i {
    font-size: 2rem;
  }
}





/*------------------------*/

.xz-form-nq5 {
    --c-theme:  #2095d4;
    --c-border: #D9D9D9;
    --c-bg:   #fff;
    --c-label:  #333;
    --c-star:#2095d4;
    --c-font: rgba(37,41,56,0.3);
    --c-green:  #00B160;
    --size:   1.6rem;
    --gap:    1.25em;
    --h:    4em;
    --lh:   1.8em;
    --pd:   .4em .625em;
    --br:   4px;
    --btn-w:  18.75em;
    --btn-jc: flex-end;
    --lines:  3;
  }
  .xz-form-nq5 {
    font-size: var(--size);
  }

  .xz-form-nq5 .xz-form-infos{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:var(--gap);
    margin-bottom: var(--gap);
  }

  .xz-form-nq5 .xz-form-info,
  .xz-form-nq5 .xz-form-msg {
    border:solid 1px var(--c-border);
    background:var(--c-bg);
    padding:var(--pd);
    display: flex;
    align-items: center;
    border-radius: var(--br);
    box-sizing: border-box;
  }
  .xz-form-nq5 .xz-form-info {
    height: var(--h);
  }
  .xz-form-nq5 .xz-form-msg {
    align-items: flex-start;
  }

  .xz-form-nq5 .xz-form-input,
  .xz-form-nq5 .xz-form-textarea {
    width:100%;
    border:none;
    font-size: var(--size);
    line-height: var(--lh);
    outline: 0;
    padding:0;
    margin-left: 1em;
    color:var(--c-font);
  }
  .xz-form-nq5 .xz-form-textarea {
    height: calc(var(--lh) * var(--lines));
    min-height: var(--h);
    font-family: inherit;
    resize: none;
  }

  .xz-form-nq5 .xz-form-label {
    display: block;
    color: var(--c-font);
    line-height: var(--lh);
    width:13.7rem;
  }
  .xz-form-msg .xz-form-label{
    
  }
  .xz-form-nq5 .xz-form-label.required:after {
    content:"*";
    margin-left: .625em;
    color:var(--c-star);
  }

  .xz-form-nq5 .xz-form-btns {
    margin-top: var(--gap);
    display: flex;
    justify-content: var(--btn-jc);
  }
  .xz-form-nq5 .xz-form-button {
    font-size: var(--size);
    border-radius: .4rem;
    display: inline-flex;
    /* justify-content: center; */
    align-items: center;
    padding-left:3rem;
    padding-right:3rem;
    height: var(--h);
    background:var(--c-theme);
    color:#fff;
    border:none;
    transition:all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1em;
  }
  .xz-form-nq5 .xz-form-button path {
    fill: #fff;
  }
  .xz-form-nq5 .xz-form-button:hover {
    background:#3ECEC3;
  }
  .xz-form-nq5 .xz-form-button:active {
    transform:scale(.98);
  }

  @media screen and (max-width: 420px){
    .xz-form-nq5 {
      --gap: .8em;
    }
    .xz-form-nq5 .xz-form-infos {
      grid-template-columns: 1fr;
    }
    .xz-form-nq5 .xz-form-button {
      width:100%;
    }
  }

  .xzform_o {
    position: relative;
  }
  .xz-form-nq5 .xz-form-message.success {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index: 9;
    max-width:75%;
    display: flex;
    text-align: center;
    align-items: center;
    padding:4em;
    background:rgba(255,255,255,.8);
    color:var(--c-green);
    font-size:1.125em;
    line-height: 1.8em;
    font-weight: 500;
    box-shadow:0 .5rem 3rem -.5rem rgba(0,0,0,.3);
  }



/*------------------------*/



.pagination-custom {
    position: relative;
    position: relative;
    transform: translate3d(0, -8px, 0);
    margin-bottom: -8px;
    margin-left: -4px;
    margin-right: -4px;
    line-height: 0;
    font-size: 0;
    text-align: center;
}

.pagination-custom > * {
    position: relative;
    margin-top: 8px;
    padding-left: 4px;
    padding-right: 4px;
}

.pagination-custom li {
    display: inline-block;
    vertical-align: middle;
}
.page-item.disabled .page-link{
    color:white;
    background: #2095d4;
}

.pagination-custom li a, .pagination-custom li span {
    position: relative;
    z-index: 0;
    transition: background 0.4s, border-color 0.4s, color 0.4s;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 39px;
    min-width: 39px;
    height: 39px;
    padding: 5px 10px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    vertical-align: middle;
}

.pagination-custom li a::before, .pagination-custom li span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2095d4;
    z-index: -1;
    opacity: 0;
    transform: scale3d(0.6, 1, 1);
    transition: transform 0.4s, opacity 0.4s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    border-radius: inherit;
}

.pagination-custom li a,.pagination-custom li span, .pagination-custom li a::before, .pagination-custom li span::before {
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.pagination-custom li a:hover::before, .pagination-custom li span:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

.pagination-custom li a,.pagination-custom li span, .pagination-custom li a:active,.pagination-custom li span:active, .pagination-custom li a:focus ,.pagination-custom li span:focus{
    color: #000;
    background: transparent;
    border-color: #cdcdcd;
}

.pagination-custom li a:hover, .pagination-custom li span:hover {
    color: #fff;
    background: transparent;
    border-color: #2095d4;
}

.pagination-custom li.disabled,
.pagination-custom li.active {
    pointer-events: none;
}

.pagination-custom li.active a {
    color: #fff;
    background: #2095d4;
    border-color: #2095d4;
}

.pagination-custom li.active a::after {
    display: none;
}

.pagination-custom li.disabled a {
    color: #9b9b9b;
    background: transparent;
    border-color: #ebebeb;
}

.pagination-custom li.disabled a::after {
    display: none;
}
