@import url('sub.css'); 



/**** S:: 인사말 ****/
.greeting {display: flex; gap: var(--space-4xl); max-width:1380px;}
.greeting > div{flex:1; position: relative;}
.greeting__media {display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.greeting__image-wrap {}
.greeting__image-wrap img {display: block; width: 100%; height: auto;}
.greeting__content{}
.greeting__content::after{content:''; display: block; width: 149px; height: 40px; background:url('/about/img/greeting_ci.png') no-repeat center/contain; position: absolute; right: 0; top:0; z-index: -1;}
.greeting__title { margin: 0; font-family: var(--eng); font-weight: 800;}
.greeting__title span {display: inline; letter-spacing: inherit; line-height:inherit; color: var(--main); }
.greeting__lead { margin: var(--space-md) 0 0; line-height: 170%; font-weight: 400; color: var(--black); }
.greeting__lead strong { color: var(--main); font-weight: 400; }
.greeting__body { margin: var(--space-md) 0 0; color:var(--basic);}
.greeting__sign { margin: var(--space-xl) 0 0; display: flex; align-items: center; gap: 8px; color: var(--black);}
.greeting__sign span {font-weight: 600; letter-spacing: 0; }
.greeting__sign strong {font-weight: 600;}
/**** E:: 인사말 ****/



/**** S:: 경영철학 ****/


.partner, .vision, .core {margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 50px; }
.partner__title, .vision__title, .core__title { margin: 0; font-family: var(--eng); font-weight: 700; text-align: center; }
.partner__intro { width: 100%; display: flex; align-items: center; gap: var(--space-4xl); }
.partner__image-box {flex:1; border: 1px solid var(--border); margin: 0; padding: var(--space-3xl); display: flex; justify-content: center; background:var(--white);}
.partner__image-box img {max-width: 402px; width: 100%; height: auto; display: block; mix-blend-mode: multiply; filter: contrast(1.1);}
.partner__copy { flex: 1; min-width: 0; }
.partner__headline { margin: 0; color: var(--black); font-weight: 400; font-family:var(--eng);}
.partner__headline strong { color: var(--main); font-weight: 800; }
.partner__text { margin: var(--space-lg) 0 0; color: var(--basic); font-weight: 400; }
.vision {max-width:100%; width: 100%; position: relative; overflow: hidden; justify-content: center; }
.vision__bg { position: absolute; inset: 0; z-index: 1; }
.vision__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vision__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); color: var(--white); text-align: center; }
.vision__title { color: var(--white); }
.vision__logo { max-width: 670px; width: 100%; height: auto; display: block; }

.core__title__wrap{display: flex; flex-direction: column; align-items: center; gap:10px;}
.core__desc { margin: 0; text-align: center; color: var(--black); font-weight: 400; line-height:165%;}
.core__list { width: 100%; max-width: 1590px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.core__item { position: relative; overflow: hidden; aspect-ratio: 1/1;}
.core__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.core__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--white); padding: var(--space-md); }
.core__overlay .core__icon { width: auto; height: 86px;}
.core__en { margin: 0; font-family: var(--eng); letter-spacing: 0.8pt; font-weight: 800; padding-top: 30px; color:var(--white);}
.core__ko { margin: 0; color: rgba(255, 255, 255, 0.7); padding-top: 8px;}
/**** E:: 경영철학 ****/



/**** S:: 주요연혁 ****/
.history-wrap{position: relative;}
.history-wrap .progressbar{position: absolute; left: 50%; top:0; width: 1px; height: 100%; background:var(--border);}
.history-wrap .progressbar .progress{display: block; width: 3px; height: auto; background:var(--main); position: absolute; left: 50%; top:0; margin-left: -1px; z-index: 2; transition:all .3s ease;}
.history-wrap .progressbar .progress::before{content:''; display: block; width: 21px; aspect-ratio:1/1; border-radius:50%; background:var(--main); opacity: 0.2; position: absolute; left: 50%; bottom: -5px; transform:translateX(-50%);}
.history-wrap .progressbar .progress::after{content:''; display: block; width: 11px; aspect-ratio:1/1; border-radius:50%; background:var(--main); opacity: 1; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%);}
.history-list{padding-top: 70px;}
.history-list .list{display: flex; justify-content:space-between; padding-bottom: 40px;}
.history-list .list:nth-child(even){flex-direction: row-reverse;}
.history-list .list > div{box-sizing:border-box; width: calc(50% - 70px);}
.history-list .list .txt_area{}
.history-list .list .txt_area h4{position: relative; font-weight: 900;}
.history-list .list .txt_area h4::before{content:''; display: block; width: 45px; height: 1px; background:var(--border); position: absolute; left:-70px; top:50%;}
.history-list .list .txt_area ul{padding-top: 15px;}
.history-list .list .txt_area ul li{}
.history-list .list .txt_area ul li::before{}

.history-list .list:nth-child(even) .txt_area{text-align:right;}
.history-list .list:nth-child(even) .txt_area h4::before{left: auto; right: -70px;}
.history-list .list:nth-child(even) .txt_area ul li{padding-right: 10px; padding-left: 0;}
.history-list .list:nth-child(even) .txt_area ul li::before{left: auto; right: 0;}
/**** E:: 주요연혁 ****/

/**** S:: CI 소개 ****/
.ci {display: flex; flex-direction: column; gap: var(--space-lg); padding-top: 80px;}
.ci__logo-box { background: var(--grayBg); padding: 100px; display: flex; justify-content: center; align-items: center; }

.ci__logo-wrap { display: flex; align-items: center; gap: 40px; }
.ci__logo-wrap .ci__logo-mark { max-width: 360px; width: 100%; height: auto; display: block; }
.ci__logo-wrap p{font-weight: 900;}


.ci__sign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.ci__sign-card { margin: 0; min-height: 352px; border: 1px solid var(--border); background: var(--white); padding: 70px var(--space-md) var(--space-lg); display: flex; align-items: center; justify-content: center; position: relative; }
.ci__badge { position: absolute; top: -1px; left: -1px; background: var(--blue-gray); color: var(--white); padding: 8px var(--space-sm);  font-weight: 600;}
.ci__sign-card img { width: 294px; max-width: 86%; height: auto; display: block; }
.ci__desc { width: 100%; }
.ci__row { display: flex; gap: var(--space-lg); padding: 50px 0; border-bottom: 1px solid var(--border); }
.ci__row:last-child { border-bottom: 0; }
.ci__title { width: 375px; margin: 0; flex-shrink: 0; color: var(--black); font-family: var(--eng); letter-spacing: 0;}
.ci__title span { font-family: var(--eng); letter-spacing: 0; }
.ci__text { margin: 0; color: var(--basic); }
.ci__color-wrap { flex: 1; min-width: 0; display: grid;  grid-template-columns: repeat(1, 1fr);  gap: var(--space-lg); }
.ci__color-item { display: flex; align-items: center; gap: var(--space-md); }

.ci__swatch { width: 130px; height: 130px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--white); flex-shrink: 0; font-family:var(--eng);}
.ci__swatch--blue { background: var(--main); }
.ci__swatch--red { background: var(--sub); }

.ci__color-info p { margin: 0 0 10px; line-height: 140%; font-weight: 400; color: var(--black); }
.ci__color-info dl { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ci__color-info dl div { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--eng); font-size: 0.778rem; line-height: 150%; color: var(--basic); }
.ci__color-info dt { width: 55px; font-weight: 600; letter-spacing: 0.28px; font-family:inherit;}
.ci__color-info dd { margin: 0; opacity: 0.7; font-weight: 500; font-family:inherit;}
/**** E:: CI 소개 ****/


/**** S:: 오시는 길 ****/
.location { width: 100%; display: flex; flex-direction: column; gap: var(--space-lg); }
.location__head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); }
.location__text { display: flex; flex-direction: column; gap: var(--space-sm); }
.location__txt { display: flex; flex-direction: column; gap: var(--space-2xs); }
.location__title { margin: 0;  font-weight: 800; color: var(--black); }
.location__address { margin: 0; font-weight: 400; color: var(--black); display: flex; align-items: center; gap: 7px; }
.location__address-icon::before { content: "explore_nearby"; font-family: var(--icon); font-size: 32px; line-height: 1; color: var(--main); display: block; }
.location__guide { margin: 0; color: var(--basic); line-height: 150%; }
.location__links { display: flex; align-items: center; gap: 2px; padding-top: 3px; }
.location__link { width: 42px; height: 42px; border-radius: var(--radius-xs); text-decoration: none; position: relative; display: inline-flex; align-items: center; justify-content: center; transition:all .3s linear;}
.location__link::before{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0;}
.location__link--naver { background: #03CF5D; }
.location__link--naver:hover { background: rgba(3,207,93,.5); }
.location__link--naver::before {background:url('/about/img/naver.png') no-repeat center/contain;}
.location__link--kakao { background: #FEE102; }
.location__link--kakao:hover { background: rgba(254,225,2,.5); }
.location__link--kakao::before {background:url('/about/img/kakao.png') no-repeat center/contain;}
.location__link--google { background: var(--grayBg); }
.location__link--google:hover { background: #EDEEF0; }
.location__link--google::before {background:url('/about/img/google.png') no-repeat center/contain;}
.location__map {height: 520px;}
.location__map .wrap_map{width: 100%; height: 100% !important;}
.location__map .wrap_controllers{display: none !important;}
.location__map .map_border{display: none !important;}
.location__map .cont{display: none !important;}
.location__map iframe{width: 100%; height: 100%;}
/**** E:: 오시는 길 ****/

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

/**** S:: CI 소개 ****/
  .ci {  }
  .ci__title { width: 280px; }
/**** E:: CI 소개 ****/

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

/**** S:: 경영철학 ****/
.partner__intro { gap: var(--space-3xl); }
.partner__headline br{display: none;}
/**** E:: 경영철학 ****/

/**** S:: CI 소개 ****/

  .ci__sign-card { min-height: 300px; }
  .ci__row { padding: var(--space-xl) 0; }
/**** E:: CI 소개 ****/

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


/**** S:: CI 소개 ****/
.ci__logo-wrap {gap: 30px; }
.ci__logo-wrap .ci__logo-mark {max-width: 250px;}
/**** E:: CI 소개 ****/


}

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

/**** S:: 인사말 ****/
.greeting {gap: var(--space-xl);}
.greeting__content::after{width: 120px; height: 32px;}
.greeting__title br{display: none;}
.greeting__lead { margin: var(--space-sm) 0 0;}
.greeting__body { margin: var(--space-sm) 0 0;}
.greeting__sign { margin: var(--space-lg) 0 0;}
/**** E:: 인사말 ****/


/**** S:: 경영철학 ****/
.partner, .vision, .core {gap: 30px; }

.partner__intro { gap: var(--space-xl); }
.partner__image-box {padding: var(--space-xl);}
.partner__copy { }
.partner__text { margin: var(--space-sm) 0 0; }

.vision {}
.vision__content { gap: var(--space-md); }
.vision__logo{width: 70%;}


.core__list {gap: var(--space-md); }
.core__overlay .core__icon { width: auto; height: 60px;}
.core__en { padding-top: 20px;}
.core__ko { padding-top: 5px;}
/**** E:: 경영철학 ****/


/**** S:: 주요연혁 ****/
.history-list .list > div{width: calc(50% - 40px);}
.history-list .list .txt_area h4::before{width: 25px; left:-40px;}
.history-list .list .txt_area ul{padding-top: 10px;}

.history-list .list:nth-child(even) .txt_area h4::before{left: auto; right: -40px;}
/**** E:: 주요연혁 ****/


/**** S:: CI 소개 ****/
  .ci{padding-top: 50px; gap:var(--space-md);}
  .ci__logo-box{padding: 50px;}
  .ci__logo-wrap { flex-direction: column; text-align: center; gap: 20px;}
  .ci__logo-wrap .ci__logo-mark {max-width: 180px;}
  
  
  .ci__sign-grid { grid-template-columns: 1fr; gap: var(--space-md);}
  .ci__row { flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) 0;}
  .ci__title { width: 100%; }
  .ci__color-wrap { gap:var(--space-xs); display: flex; flex-direction: column;}
/**** E:: CI 소개 ****/


/**** S:: 오시는 길 ****/
.location {gap: var(--space-md); }
.location__head {position: relative;}
.location__links {position: absolute; right: 10px; bottom: -70px; z-index: 9999;}
.location__map {height: 400px;}
/**** E:: 오시는 길 ****/


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

/**** S:: 인사말 ****/
.greeting {gap: var(--space-lg); flex-direction: column;}
.greeting > div{}
.greeting__media {gap: 2px;}
.greeting__image-wrap{aspect-ratio:4/3; overflow: hidden;}
.greeting__image-wrap img{width: 100%; height: 100%; object-fit:cover;}
.greeting__content{}
.greeting__content::after{width: 100px; height: 27px;}
.greeting__lead { margin: var(--space-xs) 0 0;}
.greeting__body { margin: var(--space-xs) 0 0;}
.greeting__sign { margin: var(--space-md) 0 0; gap: 5px;}
/**** E:: 인사말 ****/


/**** S:: 경영철학 ****/
.partner, .vision, .core {gap: 20px; }

.partner__intro { gap: var(--space-md); flex-direction: column;}
.partner__image-box {padding: var(--space-lg); width: 100%;}
.partner__image-box img{width: 70%;}
.partner__copy { }
.partner__text { margin: var(--space-xs) 0 0; }

.vision {}
.vision__content { gap: var(--space-sm); }

.core__title__wrap{gap:6px;}
.core__list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-xs); }
.core__overlay { padding: var(--space-xs); }

/**** E:: 경영철학 ****/

/**** S:: 주요연혁 ****/
.history-wrap .progressbar{left: 0;}
.history-wrap .progressbar .progress{width: 2px; left: 0;}
.history-wrap .progressbar .progress::before{width: 15px; bottom:-4px;}
.history-wrap .progressbar .progress::after{width: 7px;}
.history-list{padding-top: 30px;}
.history-list .list{padding: 0 0 30px 25px; box-sizing:border-box; flex-wrap:wrap;}
.history-list .list:nth-child(even){flex-direction: row;}
.history-list .list > div{width: 100%;}
.history-list .list .txt_area h4{line-height: 120%;}
.history-list .list .txt_area h4::before{width: 15px; left:-25px;}
.history-list .list .txt_area ul{padding-top: 6px;}

.history-list .list:nth-child(even) .txt_area{text-align:left;}
.history-list .list:nth-child(even) .txt_area h4::before{left: -25px; right: auto;}
.history-list .list:nth-child(even) .txt_area ul li{padding-right: 0; padding-left: 10px;}
.history-list .list:nth-child(even) .txt_area ul li::before{left: 0; right: auto;}
/**** E:: 주요연혁 ****/


/**** S:: CI 소개 ****/
  .ci{padding-top: 30px; gap:var(--space-xs);}
  .ci__sign-grid {gap: var(--space-xs);}
  .ci__logo-box { padding: 40px 10px; }
  .ci__row { gap: var(--space-2xs); padding: var(--space-md) 0;}
  .ci__swatch { width: 96px; height: 96px;}
  .ci__color-item { align-items: flex-start; gap: var(--space-sm);}
  .ci__color-info p{margin: 0 0 5px;}
  .ci__sign-card{min-height:250px; padding: 50px var(--space-md) var(--space-md);}
  .ci__sign-card img{max-width:50%;}
  
  
  .ci__logo-wrap .ci__logo-mark {max-width: 120px;}
  .ci__logo-wrap p{font-size:1.3rem;}
/**** E:: CI 소개 ****/


/**** S:: 오시는 길 ****/
.location__head {gap: var(--space-sm);}
.location__text {gap: var(--space-xs); }
.location__address-icon::before {font-size: 28px;}
.location__map {height: 300px;}
/**** E:: 오시는 길 ****/



}