﻿

.about-row{

    display:flex;
}

.about-row .txt-col{
   flex:1 0 0;
   max-width:50%;
   display:flex;
   flex-direction:column;
}


.about-row .img-col{
   flex:1 0 0;
   max-width:50%;
   display:flex;
   padding-top:300px;
       background-color:#f57120;
}

.about-row .img-col .img{
  width:100%;
  aspect-ratio:1/1;

}

.about-row .img-col .img img{
  width:100%;
  height:100%;
 object-fit:cover;
}


.about-row .txt-col .top-txt{
   flex:1 0 0;
      background-color:#f57120;
}
.about-row .txt-col .btm-txt{
       flex:1 0 0;
  background-color:#eee;
  display:flex;
  align-items:center;

}

.about-row .txt-col .top-txt .txt-con{
  margin:160px 0 90px 0;

}


.about-row .txt-col .top-txt .txt-con .head{
 color:#000;
 font-size:58px;
 font-weight:600;
 margin:0;

}


.about-row .txt-col .top-txt .txt-con .head span{
 color:#fff;
 font-size:58px;
 font-weight:300;

}



.about-row .txt-col .top-txt .txt-con .desc{
 color:#fff;
 font-size:18px;
 font-weight:300;
  margin:45px 0;
}





.about-row .txt-col .btm-txt .txt-con{
  margin:90px 0;
  min-width:100%;

}


.about-row .txt-col .btm-txt .txt-con .head{
 color:#f57120;
 font-size:48px;
 font-weight:500;
 margin:0;

}

.about-row .txt-col .btm-txt .txt-con .desc{
 color:#000;
 font-size:18px;
 font-weight:300;
  margin:45px 0 0 0;
}










.about-mv-row{
    padding-top:180px;
}


.about-mv-row .mv-item{
    display:flex;
}

.about-mv-row .mv-item.vision-item{
   flex-direction:row-reverse;
}



.about-mv-row .mv-item .txt-col{
   flex:1 0 0;
   max-width:50%;
   display:flex;
   align-items:center;
}


.about-mv-row .mv-item .img-col{
   flex:1 0 0;
   max-width:50%;
   aspect-ratio:3/2;
}


.about-mv-row .mv-item .img-col img{
  width:100%;
  height:100%;
  object-fit:cover

}



.about-mv-row .mv-item .txt-col .txt-con{
 min-width:100%;
 margin:90px 0;

}

.about-mv-row .mv-item .txt-col .txt-con .head-con{
 display:flex;
 flex-direction:column-reverse;
 margin-bottom:30px;
}

.about-mv-row .mv-item .txt-col .txt-con .head-con .head{
 font-size:48px;
 margin:0;
 font-weight:500;
}


.about-mv-row .mv-item .txt-col .txt-con .head-con .head-en{
 font-size:18px;
 margin:0;
 font-weight:300
}



.about-mv-row .mv-item .txt-col .txt-con .desc-con{
 margin-top:30px;
}


.about-mv-row .mv-item .txt-col .txt-con .desc-con .desc{
 font-size:28px;
  max-width:560px;
}



.about-mv-row .mv-item.mission-item .txt-col{
   background-color:#333;
   color:#fff;
   transform:translateY(-180px)
}
.about-mv-row .mv-item.mission-item .txt-col .head{
   color:#f57120;
}


.about-mv-row .mv-item.vision-item .txt-col{
   background-color:#f57120;
   color:#fff;
}
.about-mv-row .mv-item.vision-item .txt-col .head{
   color:#000;
}


.about-mv-row .mv-item.vision-item .img-col{

   transform:translateY(-180px)
}












.index-values-row{
    display:grid;
            grid-template-columns: repeat(4,1fr);

    grid-column-gap: 0px;
    grid-row-gap: 0px;

    margin-bottom:30px;
}

.index-values-row .value-item{
   padding:30px;
}
.index-values-row .value-item:first-of-type{
   padding-right:0;
}

.index-values-row .value-item:last-of-type{
   padding-left:0;
}


.index-values-row .value-item:not(:last-of-type){
   border-left:1px solid #aaa
}



.index-values-row .value-item .icon-con{
    text-align:center;
}
.index-values-row .value-item .icon-con img{
 width:90px;
 height:90px;
 object-fit:contain;
}

.index-values-row .value-item .head-con{
 text-align:center;
 margin:30px 0
}

.index-values-row .value-item .head-con .head{
 color:#000;
 margin:0;
 font-size:22px;
 font-weight:400
}


.index-values-row .value-item .desc-con{
 font-size:18px;
 font-weight:300;
}









.team-con{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin: 30px 0;
}



.team-con .team-item{
  background-color:#fff
}

.team-con .team-item .img{
 aspect-ratio:1/1;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .5s;
    transition: all .5s;
}

.team-con .team-item:hover .img {
        filter: none;
        -webkit-filter: grayscale(0%);
    }



.team-con .team-item .img img{
 width:100%;
 height:100%;
 object-fit:cover;
}


.team-con .team-item .txt{
 padding:15px;
}

.team-con .team-item .txt .name{
 font-size:18px;
 font-weight:500;
 color:#000;
 margin:0;
}



.team-more-row{
    margin-top:30px;
}











@media(max-width:1199px){

     .about-row .txt-col .top-txt .txt-con{
  margin:90px 0 45px 0;


}
    .about-row .txt-col .btm-txt .txt-con{
  margin:45px 0;


}
    .about-row .txt-col .top-txt .txt-con .head{
 font-size:42px;

}
    .about-row .txt-col .top-txt .txt-con .head span{

 font-size:42px;

}


    .about-row .txt-col .btm-txt .txt-con .head {

    font-size: 36px;

}

    .about-row .txt-col .btm-txt .txt-con .desc {

    margin: 30px 0px 0px;
}


                .team-con {

    grid-template-columns: repeat(5, 1fr);

}
}

@media(max-width:991px){

    .index-values-row {
        grid-template-columns: repeat(2,1fr);
    }

        .index-values-row .value-item {
            padding: 30px;
            margin-bottom: 30px;
        }

            .index-values-row .value-item:nth-of-type(2n+1) {
                padding-right: 0;
            }

            .index-values-row .value-item:nth-of-type(2n) {
                padding-left: 0;
            }


            .index-values-row .value-item:nth-of-type(2n) {
                border-left: none;
            }



            .team-con {

    grid-template-columns: repeat(4, 1fr);

}
}









@media(max-width:767px) {



.about-row{
    position:relative;
    padding-top:75vw;
}

.about-row .txt-col{

   max-width:initial;
   min-width:100%;
   position:relative;
   z-index:2;
}


.about-row .img-col{
   position:absolute;
   top:0;
   left:0;
   max-width:initial;
   padding-top:0;
   z-index:1
}

.about-row .img-col .img{
  width:100%;
  aspect-ratio:9/10;

}




.about-row .txt-col .top-txt{
  width:85%;
}


.about-row .txt-col .btm-txt{

}

.about-row .txt-col .top-txt .txt-con{
  margin:50px 0;

}


.about-row .txt-col .top-txt .txt-con .head{

 font-size:36px;


}


.about-row .txt-col .top-txt .txt-con .head span{

 font-size:36px;

}



.about-row .txt-col .top-txt .txt-con .desc{
     font-size:14px;
   margin:20px 0;
}





.about-row .txt-col .btm-txt .txt-con{
  margin:50px 0 0 0;

}


.about-row .txt-col .btm-txt .txt-con .head{

 font-size:30px;


}

.about-row .txt-col .btm-txt .txt-con .desc{
 font-size:14px;
  margin:20px 0 0 0;
}










.about-mv-row{
    padding-top:0;
}


.about-mv-row .mv-item{
    position:relative;
    padding:33% 0 0 33%;
}

.about-mv-row .mv-item.vision-item{
   flex-direction:row;
       padding: 0 33% 33% 0;

}



.about-mv-row .mv-item .txt-col{
   min-width:100%;
   max-width:initial;
   position:relative;
   z-index:2;
}


.about-mv-row .mv-item .img-col{
   position:absolute;
   top:0;
   left:0;

   z-index:1;
   max-width:initial;
   width:100%;
   height:100%;
   aspect-ratio:3/2;
}


.about-mv-row .mv-item .img-col img{
  width:100%;
  height:100%;
  object-fit:cover

}



.about-mv-row .mv-item .txt-col .txt-con{
 margin:50px 0;

}

.about-mv-row .mv-item .txt-col .txt-con .head-con{

 margin-bottom:20px;
}

.about-mv-row .mv-item .txt-col .txt-con .head-con .head{
 font-size:30px;

}


.about-mv-row .mv-item .txt-col .txt-con .head-con .head-en{
 font-size:14px;

}



.about-mv-row .mv-item .txt-col .txt-con .desc-con{
 margin-top:20px;
}


.about-mv-row .mv-item .txt-col .txt-con .desc-con .desc{
 font-size:20px;
  max-width:initial;
}



.about-mv-row .mv-item.mission-item .txt-col{
   background-color:#333;
   color:#fff;
   transform:translateY(0)
}
.about-mv-row .mv-item.mission-item .txt-col .head{
   color:#f57120;
}


.about-mv-row .mv-item.vision-item .txt-col{
   background-color:#f57120;
   color:#fff;
}
.about-mv-row .mv-item.vision-item .txt-col .head{
   color:#000;
}


.about-mv-row .mv-item.vision-item .img-col{

   transform:translateY(0)
}










    .index-values-row {
        margin-bottom: 0;
    }


        .index-values-row .value-item {
            padding: 15px;
            margin-bottom: 20px;
        }

            .index-values-row .value-item .icon-con img {
                width: 45px;
                height: 45px;
            }

            .index-values-row .value-item .head-con {
                margin: 15px 0;
            }

                .index-values-row .value-item .head-con .head {
                    font-size: 16px;
                }


            .index-values-row .value-item .desc-con {
                font-size: 12px;
            }









.team-con{

    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    margin: 15px 0;
}



.team-con .team-item .txt{
 padding:10px;
}

.team-con .team-item .txt .name{
 font-size:14px;
}

.team-con .team-item .txt .pos{
 font-size:10px;
}



.team-more-row{
    margin-top:20px;
}













}
