﻿

.services-row .service-item{
  display:flex;
  background-color:#2d2d2d;
  transition:all 0.5s;

}

.services-row .service-item:hover{

  background-color:#191919;


}




.services-row .service-item:nth-of-type(2n){
  flex-direction:row-reverse;

}


.services-row .service-item .txt-col{
  flex:1 0 0;
  max-width:50%;
  display:flex;
  align-items:flex-end;

}

.services-row .service-item .txt-col .txt-con{
padding:45px;
min-width:100%;

}


.services-row .service-item .txt-col .txt-con .head-con{
    margin-bottom:45px;
}


.services-row .service-item .txt-col .txt-con .head-con .head{
       color:#fff;
       font-size:36px;
       font-weight:500;
       padding:0;
       margin:0;
       margin-bottom:5px;
    }


.services-row .service-item .txt-col .txt-con .head-con .head-en{
       color:#fff;
       font-size:18px;
       padding:0;
       margin:0;
         font-weight:300;
         text-transform:uppercase;
    }

.services-row .service-item .txt-col .txt-con .desc-con{
    margin:45px 0;
    font-size:16px;
    font-weight:300;
    max-width:480px;
}




.services-row .service-item .img-col{
  flex:1 0 0;
  max-width:50%;
  aspect-ratio:1/1;
  overflow:hidden;

}

.services-row .service-item .img-col img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:all 1s;

}

.services-row .service-item:hover .img-col img{
 transform:scale(1.05)
}










.service-row{

}
.service-row .slogan-row {
    margin:90px 0;
}
.service-row .slogan-row .slogan{
   color:#f57120;
   font-size:32px;
   font-weight:300;
   width:50%;

}

.service-row .feature-row {
    margin:60px 0;
}

.service-row .feature-row  .feature-con{
   grid-template-columns: repeat(6, 1fr);
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;

    margin-bottom:45px;

}
.service-row .feature-row  .feature-con .feature-item{

    padding:45px 30px;
    text-align:center;
        border:1px solid #444;
        margin-bottom:-1px;
        margin-left:-1px;
}
.service-row .feature-row  .feature-con .feature-item:not(:last-of-type){

}


.service-row .feature-row  .feature-con .feature-item .ico-con{
  width:50px;
  height:50px;
  display:inline-block;
}

.service-row .feature-row  .feature-con .feature-item .ico-con img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.service-row .feature-row  .feature-con .feature-item .head{
  color:#fff;
  font-size:18px;
  font-weight:400;
  margin:30px 0;
}
.service-row .feature-row  .feature-con .feature-item .desc{

  font-size:14px;
  font-weight:300;
  text-align:right;
}



.service-row .info-row{
    margin:30px 0 0 0;
}

.service-row .info-row .info-con .info-item{
  display:flex;

}
.service-row .info-row .info-con .info-item:nth-of-type(2n){
  flex-direction:row-reverse;
  margin-top:-10vw;

}


.service-row .info-row .info-con .info-item .txt-col{
  flex:1 0 0;
  max-width:50%;
  display:flex;


}


.service-row .info-row .info-con .info-item:nth-of-type(2n) .txt-col{
  align-items:flex-end

}
.service-row .info-row .info-con .info-item .txt-col .txt-con{
 padding:45px 0 calc(10vw + 45px) 45px;
 width:100%;
 max-width:480px;

}
.service-row .info-row .info-con .info-item:nth-of-type(2n) .txt-col .txt-con{
 padding:calc(10vw + 45px) 45px 45px 0;

}

.service-row .info-row .info-con .info-item .txt-col .txt-con .head{
 font-size:32px;
 font-weight:500;
 color:#fff;
 margin:0;
 margin-bottom:30px;

}
.service-row .info-row .info-con .info-item .txt-col .txt-con .desc{
 font-size:22px;
 color:#fff;
 margin:0;
font-weight:300

}

.service-row .info-row .desc-con {
margin:60px 0;

}

.service-row .info-row .desc-con .desc{
    font-size:16px;
    font-weight:300;
    column-count: 2;
      column-gap: 30px;
        column-rule: 1px solid #666;

}

.service-row .info-row .banner-con {
width:100%;
aspect-ratio:4/1

}
.service-row .info-row .banner-con img {
width:100%;
height:100%;
object-fit:cover;

}



.service-row .info-row .info-con .info-item .img-col{
  flex:1 0 0;
  max-width:50%;
  aspect-ratio:1/1;

}

.service-row .info-row .info-con .info-item .img-col img{
  width:100%;
  height:100%;
  object-fit:cover;

}







@media (max-width: 1499px){

}

@media(max-width:1199px) {

    .service-row .feature-row .feature-con {
        grid-template-columns: repeat(3, 1fr);
    }

}
@media(max-width:991px) {
    .service-row .slogan-row .slogan {
    width: 100%;
}
    .service-row .info-row .info-con .info-item .txt-col .txt-con {
    padding: 30px 0 calc(10vw + 30px) 30px;

}

    .service-row .info-row .info-con .info-item:nth-of-type(2n) .txt-col .txt-con {
    padding: calc(10vw + 30px) 30px 30px 0;
}


}
@media(max-width:767px) {



.services-row .service-item{
 flex-direction:column-reverse;
 margin-bottom:20px;

}

.services-row .service-item:nth-of-type(2n){
  flex-direction:column-reverse;

}


.services-row .service-item .txt-col{

  max-width:initial;
  min-width:100%;


}

.services-row .service-item .txt-col .txt-con{
padding:20px;


}


.services-row .service-item .txt-col .txt-con .head-con{
    margin-bottom:20px;
}


.services-row .service-item .txt-col .txt-con .head-con .head{
       font-size:24px;

       margin-bottom:5px;
    }


.services-row .service-item .txt-col .txt-con .head-con .head-en{

       font-size:14px;

    }

.services-row .service-item .txt-col .txt-con .desc-con{
    margin:20px 0;
    font-size:12px;
    max-width:initial;
}




.services-row .service-item .img-col{
  max-width:initial;
  min-width:100%;
  aspect-ratio:3/1;

  flex:1;


}


.service-row .slogan-row {
    margin:30px 0;
}
.service-row .slogan-row .slogan{

   font-size:24px;


}

.service-row .feature-row {
    margin:30px 0;
}

.service-row .feature-row  .feature-con{
   grid-template-columns: repeat(2, 1fr);

    margin-bottom:20px;

}
.service-row .feature-row  .feature-con .feature-item{

    padding:20px 15px;

}
.service-row .feature-row  .feature-con .feature-item .ico-con{
  width:32px;
  height:32px;

}


.service-row .feature-row  .feature-con .feature-item .head{
  font-size:14px;

  margin:15px 0;
}
.service-row .feature-row  .feature-con .feature-item .desc{

  font-size:10px;
}



.service-row .info-row{
    margin:20px 0 0 0;
}

.service-row .info-row .info-con .info-item{
  display:flex;
  position:relative;
  padding:60px 0 0 60px;

}
.service-row .info-row .info-con .info-item:nth-of-type(2n){
  flex-direction:row;
  margin-top:0;
    padding:0 60px 60px 0;
}


.service-row .info-row .info-con .info-item .txt-col{

  max-width:initial;
  background-color:#2f2f2f;
  position:relative;
  z-index:4;
  width:100%;
}


.service-row .info-row .info-con .info-item:nth-of-type(2n) .txt-col{
  background-color:#191919


}
.service-row .info-row .info-con .info-item .txt-col .txt-con{
 padding:60px 20px;
 max-width:initial;

}
.service-row .info-row .info-con .info-item:nth-of-type(2n) .txt-col .txt-con{
 padding:60px 20px;

}

.service-row .info-row .info-con .info-item .txt-col .txt-con .head{
 font-size:24px;
 margin-bottom:20px;

}
.service-row .info-row .info-con .info-item .txt-col .txt-con .desc{
 font-size:16px;

}


.service-row .info-row .info-con .info-item .img-col{
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 60px);
  height:calc(100%);
  z-index:2;
  max-width:initial;
  aspect-ratio:initial;

}

.service-row .info-row .info-con .info-item:nth-of-type(2n) .img-col{

  top:initial;
  left:initial;

  bottom:0;
  right:0;
}


.service-row .info-row .desc-con {
margin:10px 0;
padding:20px;

}

.service-row .info-row .desc-con .desc{
    font-size:12px;

    column-count: 1;


}

.service-row .info-row .banner-con {

aspect-ratio:3/1

}


}
