@import url('sub.css'); 



/**** S:: Overview ****/
/* COMPANY */
.company_cont{display: flex;}
.company_cont > div{box-sizing:border-box; width: 50%;}
.company_cont .txt_area{padding: 50px 40px 160px;}
.company_cont .img_area{display: block;}
.company_cont .img_area img{width: 100%; height: 100%; object-fit:cover;}

	.company-table{border-top: 2px solid var(--main); text-align:left; width: 100%;}
	.company-table th{width: 155px; padding: 20px; box-sizing:border-box; font-size:1rem; line-height: 150%; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-default); background:var(--grayBg); border-bottom: 1px solid var(--border);}
	.company-table td{padding: 20px; box-sizing:border-box; font-size:1rem; line-height: 150%; letter-spacing: var(--letter-spacing-default); border-bottom: 1px solid var(--border);}
	.company-table td strong{display: inline; font-weight: 600; color:var(--black); letter-spacing: inherit; line-height: inherit;}
	.company-table td span{display: inline; letter-spacing: inherit; line-height: inherit;}



/* Organization */
.organization_style{display: flex; gap:30px 240px; flex-wrap:wrap; position: relative;}
.organization_style .organization_img{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%);}
.organization_style .organization_img img{width: 100%; height: auto;}
.organization_style > dl{width: calc((100% - 240px)/2); min-height:260px; padding: 0 240px 0 100px; background:var(--white); border-radius:300px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; text-align:left;} 
.organization_style > dl:nth-child(odd){padding: 0 100px 0 240px;} 
.organization_style > dl > dt{display: none; box-sizing:border-box;}
.organization_style > dl > dt img{}
.organization_style > dl > dd{display: flex; gap:0 45px; justify-content: flex-start;}
.organization_style > dl:nth-child(odd) > dd{justify-content: flex-end;}
.organization_style > dl > dd > dl{width: auto;}
.organization_style > dl:nth-child(even) > dd > dl{width: 100px;}
.organization_style > dl:nth-child(even) > dd > dl.two{flex:1;}
.organization_style > dl > dd > dl > dt{font-size:1rem; font-weight: 600; letter-spacing: var(--letter-spacing-default); line-height: 130%;}
.organization_style > dl > dd > dl > dd{padding: 7px 0 0;}

.dots{gap:4px 2px; display: flex; flex-wrap:wrap; flex-direction: column;}
.dots > li{padding-left: 10px; box-sizing:border-box; font-size:0.778rem; line-height: 150%; position: relative;}
.two .dots{flex-direction: row;}
.two .dots > li{width: calc((100% - 2px)/2);}
.dots > li::before{content:''; display: inline-block; width: 3px; aspect-ratio:1/1; background:var(--main); position: absolute; left:0; top:9px;}


/* Digital Twin */
.digital_cont{overflow: hidden;}
.digital_style{padding-bottom: 60px; background:url('/about/img/digital_bg.png') no-repeat center bottom/auto 100%; position: relative;}
.digital_style ul{display: flex; gap:180px; max-width:1490px; justify-content: space-between; position: relative;}
.digital_style ul::before{content:''; display: block; width: 823px; height: 580px; background:url('/about/img/digital_obj.png') no-repeat center/contain; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.digital_style ul li{}
.digital_style ul li img{max-width:100%; height: auto; position: relative; z-index: 5;}
.digital_style ul li img.mo{display: none;}
.digital_style .scanner{position: absolute; right: 50%; margin-right: -38vw; bottom: -64px; max-width:222px; width: 100%; z-index: 6;}
.digital_style .scanner img{max-width:100%; height: auto;}


/* CERTIFICATION */
.certification_cont{overflow: hidden;}
.certification_cont .title_area{position: relative; box-sizing:border-box; text-align: left;}

.certification_list{display: grid; grid-template-columns: repeat(8, 1fr); grid-gap:40px 20px;}
.certification_list .list{position: relative;}
.certification_list .list a{display: block; transition:all .3s linear;}
.certification_list .list .mark{display: block; width: 50px; height: 50px; background-repeat:no-repeat; background-position:center; background-size:contain; position: absolute; right: 6px; top:-15px; z-index: 9;}
.certification_list .list .thumb{aspect-ratio:1/1.4; background:var(--white); overflow: hidden;}
.certification_list .list .thumb img{display: block; width: 100%; height: 100%; object-fit:contain;}
.certification_list .list .desc{padding: 15px 0 0; text-align:center;}
.certification_list .list .desc h4{color:var(--black);}


#certi .popup {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999999999; max-width:520px; width: 90%; display:none;}
#certi .popup_h {display:flex; justify-content:space-between; align-items:center; padding:15px 20px;  background:var(--main);}
#certi .popup_h h4{font-weight: 700; color:var(--white);}
#certi .popup_h .close{display:block; cursor:pointer; width: 24px; height: 24px; font-size:0;} 
#certi .popup_h .close::after{content:'\e5cd'; display: block; width: 100%; height: 100%; line-height: 24px; font-size:24px; color:var(--white); font-family:var(--icon);}

#certi .popup_cont {padding:20px; background:var(--white); display:flex; align-items:center; justify-content:center; position: relative;}
#certi .popup_cont img {width: 100%; height: auto;}
#certi .popup_cont .mark{display: block; width: 62px; height: 64px; background-repeat:no-repeat; background-position:center; background-size:contain; position: absolute; right: 10px; top:10px; z-index: 9;}

.popup_bg{position: fixed; left: 0; top:0; width: 100%; height: 100%; background:rgba(0,0,0,.8); z-index:999999991; display:none;}




/* Global Network */
.global_cont{background:url('/about/img/global_bg.jpg') no-repeat center/cover; overflow: hidden;}
.global_cont .title_area h3{color:var(--white);}
.global_cont .title_area p{color:var(--basicW);}
	.global_style{position: relative; box-sizing:border-box;}
	.global_style .global_style_in{position: relative;}
	.global_style .global_style_img{text-align:center;}
	.global_style img{max-width:100%; height: auto;}
/**** E:: Overview ****/


/**** S:: CEO Message ****/
.ceo_cont{display: flex;}
.ceo_cont article{box-sizing:border-box; width: 50%;}
.ceo_cont .img_area{}
.ceo_cont .txt_area{padding: 100px 80px 100px 100px;}
.ceo_cont .txt_area h3{font-weight: 300;}
.ceo_cont .txt_area h3 b{font-weight: 800; color:var(--main); display: inline; letter-spacing: inherit; line-height: inherit;}
.ceo_cont .txt_area h4{font-weight: 300; color:var(--black); padding: 15px 0 0;}
.ceo_cont .txt_area p{padding: 15px 0 0; line-height: 160%;}
.ceo_cont .txt_area p ~ p{padding: 10px 0 0;}
.ceo_cont .txt_area dl{display: flex; gap:15px; align-items:center; padding: 55px 0 0;}
.ceo_cont .txt_area dl dt{font-weight: 600; color:var(--black);}
.ceo_cont .txt_area dl dd{}
.ceo_cont .txt_area dl dd img{width: 162px; height: auto;}
/**** E:: CEO Message ****/

/**** S:: History ****/

.subtitle.history{padding: 50px 0 30px;}

.history_cont{position: relative; width: 100%; overflow: hidden; padding: 60px 0;}
.history_cont .history_bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center;}
.history_cont .history-arrow{position: absolute; left: 0; top:50%; width: 100%; height: 30px; transform:translateY(-50%); box-sizing:border-box;}
.history_cont .history-arrow::before{content:''; display: block; width: calc(100% - 80px); height: 100%; position: absolute; left:0; top:0; background: linear-gradient(270deg, #F36D07 0%, rgba(243, 109, 7, 0.10) 100%);}
.history_cont .history-arrow::after{content:''; display: block; width: 40px; height: 57px; position: absolute; right:40px; top:50%; transform:translateY(-50%); background:url('/about/img/his_arrow.png') no-repeat center/contain; }
.history_cont .history-arrow .in{display: flex; align-items:center; justify-content: space-between; padding: 0 80px 0 0; width: calc(100% - 80px); position: relative; z-index: 5;}
.history_cont .history-arrow p{font-weight: 600; line-height: 30px; width: 25%; color:var(--white); box-sizing:border-box; padding-left: 30px;}
.history_cont .history-arrow p:first-child{opacity: 0.5;}
.history_cont .history-swiper{box-sizing:border-box; padding: 0 80px 0 0;}
.history_cont .history-swiper .swiper-wrapper{}
.history_cont .history-swiper .swiper-slide{width: auto; height: auto;}
.history_cont .history-swiper .swiper-slide .in{width: 100%; height: 100%; display: flex; flex-direction: column; gap:30px;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .in{flex-direction: column-reverse;}
.history_cont .history-swiper .swiper-slide .in article{flex:1; height: 100%;}
.history_cont .history-swiper .swiper-slide .line_area{width: 100%; height: 30px;}
.history_cont .history-swiper .swiper-slide .box_area .txt_box_in{opacity: 0; visibility:hidden;}

.history_cont .history-swiper .swiper-slide .txt_box{display: flex; flex-direction: column; justify-content: flex-end;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box{justify-content: flex-start;}
.history_cont .history-swiper .swiper-slide .txt_box_in{position: relative; box-sizing:border-box; padding: 0 0 50px 30px;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box_in{padding: 50px 0 0 30px;}
.history_cont .history-swiper .swiper-slide .txt_box_in::before{content:''; display: block; width: 1px; height: 100%; background:rgba(255,255,255,.15); position: absolute; left:0; top:0;}
.history_cont .history-swiper .swiper-slide .txt_box_in::after{content:''; display: block; width: 4px; height: 35px; background:var(--main); position: absolute; left:0; top:0;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box_in::after{top:50px;}
.history_cont .history-swiper .swiper-slide h3{font-weight: 800; line-height: 120%; color:var(--main);}
.history_cont .history-swiper .swiper-slide .list{padding-top: 18px;}
.history_cont .history-swiper .swiper-slide .list dl{display: flex;}
.history_cont .history-swiper .swiper-slide .list dl + dl{margin-top: 10px;}
.history_cont .history-swiper .swiper-slide .list dl dt{width: 90px; font-size:1rem; letter-spacing: 0; line-height: 150%; font-family:var(--eng); color:var(--basicW);}
.history_cont .history-swiper .swiper-slide .list dl dt b{color:var(--white); font-weight: 600;}
.history_cont .history-swiper .swiper-slide .list dl dd{width: calc(100% - 90px); font-size:1rem; line-height: 150%; letter-spacing: var(--letter-spacing-default); color:var(--basicW);}
.history_cont .history-swiper .swiper-slide .list dl dd b{color:var(--white); font-weight: 600;}
/**** E:: History ****/


/*******************************************************************************
    @media 1800px
*******************************************************************************/
@media all and (max-width:1800px){


/**** S:: Overview ****/

/* Organization */
.organization_style > dl{padding: 0 200px 0 100px;} 
.organization_style > dl:nth-child(odd){padding: 0 100px 0 200px;} 

.two .dots{flex-direction: column;}
.two .dots li{width: auto;}


/* Digital Twin */
.digital_style{}
.digital_style ul{gap:100px;}
.digital_style ul::before{width: 45vw; height: 32vw;}
.digital_style .scanner{right: 0; margin-right: 0; bottom: -2vw; width: 18vw;}



/* Global Network */
	.global_style{padding: 0 40px;}
/**** E:: Overview ****/



/**** S:: CEO Message ****/
.ceo_cont .txt_area h3 br{display: none;}
.ceo_cont .txt_area h4 br{display: none;}
/**** E:: CEO Message ****/



/**** S:: History ****/
.history_list{}
.history_list .his_box .his_cate p br{display: none;}
/**** E:: History ****/


}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



/**** S:: Overview ****/
/* COMPANY */
.company_cont .txt_area h3 br{display: none;}

/* Organization */
.organization_style{gap:30px; position: relative;}
.organization_style::before{content:''; display: block; width: 300px; aspect-ratio:1/1; background:url('/about/img/organization_img_mo.png') no-repeat center/contain; position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%);}
.organization_style::after{content:''; display: block; width: 180px; aspect-ratio:1/1; background:var(--white) url('/img/logo.svg') no-repeat center/100px auto; border-radius:50%; position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%);}
.organization_style .organization_img{display: none;}
.organization_style > dl{width: calc((100% - 30px)/2); min-height:200px; padding: 0; overflow: hidden; flex-direction: row;} 
.organization_style > dl:nth-child(odd){padding: 0;} 
.organization_style > dl > dt{display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 200px;}
.organization_style > dl > dt::before{content:''; display: block; width: 100%; height: 100%; background:var(--main); position: absolute; left: 0; top:0; border-radius:300px; transform:scale(0.9);}
.organization_style > dl > dt img{width: 60px; height: auto; position: relative; z-index: 5;}
.organization_style > dl > dd{display: flex; gap:20px; width: calc(100% - 200px); box-sizing:border-box; padding:40px 40px 40px 20px;}
.organization_style > dl > dd > dl{width: auto;}

.two .dots{flex-direction: row;}
.two .dots > li{width: calc((100% - 2px)/2);}

.organization_style > dl:nth-of-type(1),
.organization_style > dl:nth-of-type(3){flex-direction: row-reverse;} 
.organization_style > dl:nth-of-type(1) > dd,
.organization_style > dl:nth-of-type(3) > dd{justify-content: flex-end; padding:40px 20px 40px 40px;}


.dots{}
.dots > li::before{top:9px;}

/**** E:: Overview ****/


/**** S:: CEO Message ****/
.ceo_cont{}
.ceo_cont .txt_area{padding: 60px 40px 60px 60px;}
/**** E:: CEO Message ****/

/**** S:: History ****/
.history_cont .history-arrow p{width: 33.33%;}
/**** E:: History ****/

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/**** S:: Overview ****/


/* Organization */
.organization_style::before{width: 250px;}
.organization_style::after{width: 150px; background-size:80px auto;}
.organization_style > dl{min-height:auto; border-radius:30px;} 
.organization_style > dl > dt{width: 120px;}
.organization_style > dl > dt::before{border-radius:20px;}
.organization_style > dl > dt img{width: 50px;}
.organization_style > dl > dd{gap:20px; flex-wrap:wrap; width: calc(100% - 120px); padding:30px 30px 30px 20px;}
.organization_style > dl > dd > dl{flex:1;}

.organization_style > dl:nth-child(even) > dd > dl{width: auto; flex:1;}
.organization_style > dl:nth-child(even) > dd > dl.two{flex:1;}

.two .dots{flex-direction: column;}
.two .dots li{width: auto;}

.organization_style > dl:nth-of-type(1) > dd,
.organization_style > dl:nth-of-type(3) > dd{padding:30px 20px 30px 30px;}


/* CERTIFICATION */
.certification_list{grid-template-columns: repeat(4, 1fr); grid-gap:40px 20px;}


/* Digital Twin */
.digital_style{}
.digital_style ul{gap:30px;}
.digital_style ul::before{width: 40vw; height: 27vw;}
.digital_style .scanner{right: 2vw; bottom: 0; width: 15vw;}

/* Global Network */
	.global_style{padding: 0 30px;}
/**** E:: Overview ****/


/**** S:: CEO Message ****/
.ceo_cont{flex-wrap:wrap;}
.ceo_cont article{width: 100%;}
.ceo_cont .txt_area{padding:0 40px 60px; order:1;}
.ceo_cont .img_area{order:2;}
/**** E:: CEO Message ****/

/**** S:: History ****/
.history_cont .history-arrow p{width: 50%;}

/**** E:: History ****/



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/**** S:: Overview ****/
/* COMPANY */
.company_cont{flex-wrap:wrap;}
.company_cont > div{width: 100%;}
.company_cont .txt_area{padding: 50px 30px;}
.company_cont .img_area{}



/* Organization */
.organization_style{gap:20px;}
.organization_style::before{width: 180px;}
.organization_style::after{width: 120px; background-size:60px auto;}
.organization_style > dl{width: calc((100% - 20px)/2); display: flex; flex-direction: column; border-radius:20px;} 
.organization_style > dl > dt{width: 100%; padding: 10px;}
.organization_style > dl > dt::before{border-radius:10px 10px 0 0; transform:scale(1);}
.organization_style > dl > dd{width: 100%; height: 100%; padding:25px 20px;}

.organization_style > dl:nth-of-type(3){flex-direction: column; }
.organization_style > dl:nth-of-type(1) > dd,
.organization_style > dl:nth-of-type(3) > dd{padding:25px 20px;}

.organization_style > dl:nth-of-type(1),
.organization_style > dl:nth-of-type(2){flex-direction: column-reverse; justify-content: flex-start;}
.organization_style > dl:nth-of-type(1) dt::before,
.organization_style > dl:nth-of-type(2) dt::before{border-radius: 0 0 10px 10px;}



/* CERTIFICATION */
.certification_list{grid-template-columns: repeat(4, 1fr); grid-gap:30px 10px;}
.certification_list .list .mark{width: 40px; height: 40px; right: 6px; top:-10px;}
.certification_list .list .desc{padding: 10px 0 0;}


#certi .popup_cont .mark{width: 52px; height: 54px;}


/**** E:: Overview ****/


/**** S:: CEO Message ****/
.ceo_cont .txt_area{padding:0 30px 40px;}
.ceo_cont .txt_area h4{padding: 10px 0 0;}
.ceo_cont .txt_area p{padding: 10px 0 0;}
.ceo_cont .txt_area p ~ p{padding: 6px 0 0;}
.ceo_cont .txt_area dl{gap:15px; padding: 30px 0 0;}
.ceo_cont .txt_area dl dd img{width: 120px; height: auto;}
/**** E:: CEO Message ****/



/**** S:: History ****/
.subtitle.history{padding: 40px 0 20px;}


.history_cont .history-arrow{height: 25px;}
.history_cont .history-arrow::before{width: calc(100% - 50px);}
.history_cont .history-arrow::after{width: 28px; height: 40px; right:23px;}
.history_cont .history-arrow .in{padding: 0 50px 0 0; width: calc(100% - 60px);}
.history_cont .history-arrow p{line-height: 25px; padding-left: 20px; width: 50%;}


.history_cont .history-swiper{padding: 0 50px 0 0;}
.history_cont .history-swiper .swiper-slide .in{gap:25px;}
.history_cont .history-swiper .swiper-slide .txt_box_in{padding: 0 0 50px 20px;}
.history_cont .history-swiper .swiper-slide .txt_box_in::after{height: 30px;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box_in{padding: 50px 0 0 20px;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box_in::after{top:50px;}
.history_cont .history-swiper .swiper-slide .list{padding-top: 10px;}
/**** E:: History ****/





}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/**** S:: Overview ****/
/* COMPANY */
.company_cont .txt_area{padding: 30px 20px;}

	.company-table{}
	.company-table th{width: 120px; padding: 15px;}
	.company-table td{padding: 15px;}



/* Organization */
.organization_style{gap:10px;}
.organization_style::before{width: 130px;}
.organization_style::after{width: 90px; background-size:50px auto;}
.organization_style > dl{width: calc((100% - 10px)/2); min-height:320px;} 
.organization_style > dl > dt img{width: 40px;}
.organization_style > dl > dd{gap:15px; padding:15px;}


.organization_style > dl:nth-of-type(1) > dd,
.organization_style > dl:nth-of-type(3) > dd{padding:15px;}




/* Digital Twin */
.digital_style{background-size:150% auto; padding: 0 0 32vw;}
.digital_style ul{gap:0; flex-wrap:wrap;}
.digital_style ul::before{width: 45vw; height: 32vw; transform:translate(-50%,-50%) rotate(90deg);}
.digital_style ul li{width: 100%;}
.digital_style ul li img.mo{display: block;}
.digital_style ul li img.pc{display: none;}
.digital_style .scanner{right: 2vw; bottom: -2vw; width: 30vw;}


/* CERTIFICATION */
.certification_cont .title_area{text-align:left;}
.certification_list{grid-template-columns: repeat(2, 1fr); grid-gap:20px 10px;}

.global_cont .title_area{padding: 0 0 50px;}
.global_style{padding: 0;}
.global_style_in{overflow-x: auto;}
.global_style .responsive-dim.show{display: block;}
.global_style_img{width: 980px;}

/**** E:: Overview ****/


/**** S:: CEO Message ****/
.ceo_cont .txt_area{padding:0 20px 30px;}
.ceo_cont .txt_area dl{gap:10px; padding: 20px 0 0;}
.ceo_cont .txt_area dl dd img{width: 100px; height: auto;}
/**** E:: CEO Message ****/


/**** S:: History ****/
.history_cont{padding: 70px 0;}
.history_cont .history-arrow{height: 20px; padding: 0; position: relative; left: auto; top:auto; transform:translateY(0);}
.history_cont .history-arrow::before{width: calc(100% - 30px);}
.history_cont .history-arrow::after{width: 21px; height: 30px; right:13px;}
.history_cont .history-arrow p{line-height: 20px; font-size:12px; padding-left: 40px; width: auto;}

.history_cont .history-arrow .in{padding: 0 45px 0 0; width: 100%;}



.history_cont .history-swiper{padding: 0 30px 0 0;}
.history_cont .history-swiper .swiper-wrapper{}
.history_cont .history-swiper .swiper-slide{min-height:auto;}
.history_cont .history-swiper .swiper-slide .in{gap:0;}
.history_cont .history-swiper .swiper-slide .in article{flex:auto; height: auto; display: none;}
.history_cont .history-swiper .swiper-slide .in article.txt_box{display: block;}
.history_cont .history-swiper .swiper-slide .txt_box_in{padding: 30px 0 0 20px;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box_in{padding: 30px 0 0 20px;}
.history_cont .history-swiper .swiper-slide .txt_box_in::after{width: 3px; height: 20px; top:30px;}
.history_cont .history-swiper .swiper-slide:nth-child(even) .txt_box_in::after{top:30px;}
.history_cont .history-swiper .swiper-slide .list dl + dl{margin-top: 6px;}
.history_cont .history-swiper .swiper-slide .list dl dt{width: 70px;}
.history_cont .history-swiper .swiper-slide .list dl dd{width: calc(100% - 70px);}
/**** E:: History ****/


}