@import url('sub.css'); 

/* 대표이사 인사말 */
.greeting-cont{display: flex; flex-direction: column; gap:40px;}
.greeting-box{border-bottom: 5px solid var(--main); position: relative; display: flex; gap:30px; box-sizing: border-box; padding: 0 125px; margin-top: -140px;}
.greeting-box::before{content: ''; display: block; width: 100%; height: calc(100% - 140px); background: url('/company/img/greeting_bg.png') no-repeat center bottom/cover; position: absolute; left: 0; bottom: 0; z-index: 1;}
.greeting-box::after{content: ''; display: block; width: 915px; height: 135px; background: url('/company/img/greeting_logo.png') no-repeat center/ contain; position: absolute; right: 0; bottom: calc(100% - 140px); z-index: 1;}
.greeting-box dt{display: flex; flex:1; flex-direction: column; justify-content: flex-end; padding: 130px 0; position: relative; z-index: 2;}
.greeting-box dt h4{font-weight: 700;}
.greeting-box dd{flex:1; aspect-ratio: 645/559; overflow: hidden; margin-bottom: -5px; position: relative; z-index: 2;}
.greeting-box dd img{display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;}
.greeting-txt{display: flex; flex-direction: column; gap:12px;}
.greeting-ceo{color: var(--black);}
.greeting-ceo strong{display: block; font-weight: 800; letter-spacing: inherit;}

/* 비전 */
.vision-cont{display: flex; flex-direction: column; gap:40px;}
.vision-list{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.vision-list dl{display: flex; flex-direction: column; gap:20px;}
.vision-list dl dt{aspect-ratio: 510/430; overflow: hidden;}
.vision-list dl dt img{display: block; width: 100%; height: 100%; object-fit: cover;}
.vision-list dl dd{display: flex; flex-direction: column; gap:12px;}
.vision-list dl dd h4{color:var(--black); font-weight: 700;}



/* 사업장소개 */
.contact-cont {padding-top:60px;}
.contact-map {position:relative; width:100%; max-width:1590px; margin:0 auto; aspect-ratio:1590/743; container-type:inline-size; container-name:contact-map;}
.contact-map img {display:block; width:100%; height:100%; object-fit:fill;}
.map-marker {position:absolute; transform:translate(-50%,-100%); z-index:2;}
.map-marker--kr {left:37.92%; top:42.8%;}
.map-marker--cn {left:35.28%; top:45.49%;}
.map-marker--us {left:81.07%; top:44.82%;}
.map-marker__pin {display:block; width:2.025cqw; aspect-ratio:28/40; height:auto; position:relative; background:url('/company/img/contact-marker1.png') no-repeat center/contain; background-size:100% 100%;}
.map-marker--kr .map-marker__pin {background-image:url('/company/img/contact-marker2.png');}

.contact-popup {width:100%;}

.contact-list {display:grid; grid-template-columns:repeat(3,1fr); align-items: start; grid-gap:60px; width:100%; max-width:1590px; margin:-370px auto 0; position: relative; z-index: 4;}

.contact-popup__in {position:relative; display:flex; flex-direction:column; width:100%; height:100%; background:rgba(255,255,255,0.35); border:1px solid var(--border); padding:30px; box-sizing:border-box; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);  min-height: 340px;}
.contact-popup__head {position:relative; flex-shrink:0; display:flex; justify-content:center; padding:0 0 20px; box-sizing:border-box;}
.contact-popup__country {display:flex; align-items:center; justify-content:center; gap:2px;}
.contact-popup__flag {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:35px; height:35px; border:1px solid var(--border); border-radius:500px; overflow:hidden; background:var(--white); box-sizing:border-box;}
.contact-popup__flag img {display:block; width:100%; height:100%; object-fit:contain;}
.contact-popup__nation {padding:4px 14px 3px; border:1px solid var(--black); border-radius:500px; font-weight:700; line-height:175%; letter-spacing:-1.12px; color:var(--black); background:var(--white);}

.contact-popup__body {display:flex; flex-direction:column; width:100%; box-sizing:border-box;}
.contact-popup__block {display:flex; flex-direction:column; gap:8px; width:100%; padding:20px 0; border-top:1px solid var(--border); box-sizing:border-box;}
.contact-popup__block:last-child {padding-bottom:0;}
.contact-popup__block h4 {width:100%; color:var(--main); font-weight:800; line-height:160%; letter-spacing:var(--letter-spacing-default);}
.contact-popup__list {display:flex; flex-direction:column; gap:4px; width:100%;}
.contact-popup__row {display:flex; align-items:flex-start; width:100%; line-height:175%; letter-spacing:-1.12px;}
.contact-popup__row dt {width:80px; flex-shrink:0; color:var(--black); font-weight:700;}
.contact-popup__row dd {flex:1; min-width:0; color:var(--basic);}
.contact-popup__row dd p {line-height:175%; letter-spacing:-1.12px;}
.contact-popup__tags {display:flex; flex-wrap:wrap; align-items:flex-start; gap:3px; width:100%; padding-top:7px; box-sizing:border-box;}
.contact-popup__tags span {display:inline-block; padding:4px 12px 3px; border-radius:500px; background:rgba(29,32,136,0.08); font-size:0.777rem; font-weight:400; line-height:185%; letter-spacing:-0.98px; color:var(--basic);}
.contact-popup__addr {display:flex; align-items:flex-start; gap:4px; width:100%; line-height:175%; letter-spacing:-1.12px; color:var(--basic);}
.contact-popup__addr::before {content:'\e0c8'; font-family:var(--icon); font-size:20px; width:20px; height:20px; line-height:20px; display:block; flex-shrink:0; margin-top:4px; color:var(--black); text-align:center;}
.contact-popup__addr p {flex:1; min-width:0; color:var(--basic); line-height:175%; letter-spacing:-1.12px;}



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

/* 대표이사 인사말 */
.greeting-box{padding: 0 5%; margin-top: 0;}
.greeting-box::before{height: 100%; }
.greeting-box::after{width: 700px; height: 103px; bottom: 100%;}
.greeting-box dt{padding: 20px 0; justify-content: center;}
.greeting-box dt h4 br{display: none;}




.contact-list {margin:-270px auto 0;}

}

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


.contact-list {margin:-170px auto 0; gap:30px;}



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

/* 대표이사 인사말 */
.greeting-cont{gap:30px;}
.greeting-box::after{width: 500px; height: 74px;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
.contact-cont {padding-top:40px;}
.map-marker--cn {left:34%; top:46.2%;}

/* 사업장소개 */
.contact-list {grid-template-columns: repeat(1, 1fr); grid-gap:15px; margin: -100px auto 0;}
.contact-popup__in{min-height: auto;}

/* 대표이사 인사말 */
.greeting-cont{gap:20px;}
.greeting-box{padding: 7% 5% 0; flex-direction: column;}
.greeting-box::after{width: 400px; height: 59px;}
.greeting-box dt{padding: 0;}
.greeting-box dd{max-width: 70%; margin: 0 auto -2px;}
.greeting-txt{gap:8px;}
.greeting-txt p br{display: none;}

/* 비전 */
.vision-cont{gap:30px;}
.vision-list{grid-gap:20px;}
.vision-list dl{gap:15px;}
.vision-list dl dd{gap:8px;}



/* 사업장소개 */
.contact-popup__addr::before {margin-top:2px;}



#contactPopupKr{order:1;}
#contactPopupCn{order:2;}
#contactPopupUs{order:3;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
.contact-cont {padding-top:30px;}
.map-marker--cn {left:32.8%; top:47%;}
.contact-map .map-marker__pin {width:24px;}

/* 사업장소개 */
.contact-list {margin:0 auto 0;}
.contact-popup__in {padding:20px;}
.contact-popup__flag {width:30px; height:30px;}
.contact-popup__nation {padding:4px 14px 3px;}
.contact-popup__block {padding:15px 0;}
.contact-popup__row dt {width:60px;}
.contact-popup__addr::before {font-size:16px; width:16px; height:16px; line-height:16px; margin-top:3px;}


/* 대표이사 인사말 */
.greeting-cont h3 br{display: none;}
.greeting-box{border-width: 3px;}
.greeting-box::after{width: 250px; height: 37px;}

/* 비전 */
.vision-cont{gap:20px;}
.vision-list{grid-template-columns: repeat(1, 1fr);}
.vision-list dl dd{gap:6px;}



}
/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
.contact-map .map-marker__pin {width:20px;}

}