@charset "UTF-8";

@font-face {
    font-family: 'Soopilmyungjo'; 
    src: url('../fonts/SoopilmyungjoOTF_030.otf') format('opentype'); 
    font-weight: 300;
}

@font-face {
    font-family: 'Soopilmyungjo'; 
    src: url('../fonts/SoopilmyungjoOTF_040.otf') format('opentype'); 
    font-weight: 400;
}

.about {width: 100%; height: 100%; flex-grow: 1;}
.about .bg {display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.67) 100%), url('../img/about/about-element.jpg'); background-size: cover; background-position: center;}

/* CEO 인사말 */
.ceo-message {text-align: center;}
.ceo-message>.txt, 
.organization>.txt {white-space: pre-line;}
.ceo-message .txt .tint {color: var(--highlight);}
.ceo-message>* + * {margin-top: 60px;}

.ul-visual, 
.ul-organization {display: -webkit-flex; display: flex; justify-content: center; align-items: stretch;}
.ul-visual>.item {width: calc(100%/3); height: 500px; padding: 0 30px 40px; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 1;}
.ul-visual>.item::before {content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.50) 100%);}

.visual1 {background-image: url('../img/main/visual1.png');}
.visual2 {background-image: url('../img/main/visual2.jpg');}
.visual3 {background-image: url('../img/main/visual3.jpg');}

.ceo-message .slogan-area {width: 100%; height: 100%; color: #fff; display: -webkit-flex; display: flex; flex-direction: column;}
.ceo-message .slogan-area .slogan {text-align: right; font-size: 2rem; font-weight: 675; line-height: 1.4; letter-spacing: -0.03em; margin-top: auto;}
.ceo-message .slogan-area .slogan-txt {padding: 15px 0px; font-size: 1.5rem; font-weight: 333; line-height: 1.5; letter-spacing: -0.02em; text-align: left; border-bottom: 1px solid #FFF;}

.ceo-message .sign-area {font-family: 'Soopilmyungjo'; text-align: right; line-height: 1.4;}
.ceo-message .sign-area .company {font-weight: 300; font-size: 1rem;}
.ceo-message .sign-area .position {font-weight: 400; font-size: 1.125rem;}
.ceo-message .sign-area .ceo-name {font-weight: 400; font-size: 1.5rem;}
.ceo-message .sign-area .ceo-sign {font-weight: 400; font-size: 1.5rem;}
/* //CEO 인사말 */


/* 조직도 */
.organization .txt {text-align: center;}
.organization .txt + .ul-organization {margin-top: 100px;}
.ul-organization>.item {width: calc(100%/3); height: 520px; padding: 0 30px 40px; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 1;}
.ul-organization>.item::before {content: ''; position: absolute; inset: 0; z-index: -1;}
.ul-organization>.item:nth-child(odd):before {background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.70) 100%);}
.ul-organization>.item:nth-child(even):before {background: linear-gradient(180deg, rgba(74, 148, 177, 0.40) 0%, rgba(74, 148, 177, 0.70) 100%);}

.organization1 {background-image: url('../img/about/organization1.jpg');}
.organization2 {background-image: url('../img/about/organization2.jpg');}
.organization3 {background-image: url('../img/about/organization3.jpg');}

.organization .txt-area {width: 100%; height: 100%; color: #fff; display: -webkit-flex; display: flex; flex-direction: column;}
.organization .txt-area .department {padding: 15px 0px; border-bottom: 1px solid #FFF;}
.organization .txt-area .tit {font-size: 2rem; font-weight: 675; line-height: 150%; letter-spacing: -0.02em;}
.organization .txt-area .txt {font-size: 1.5rem; font-weight: 333; line-height: 150%; letter-spacing: -0.02em; text-align: left;}

.ul-job {margin-top: auto;}
.ul-job .job {color: #FFF; text-align: right; font-size: 1.875rem; font-weight: 440; line-height: 140%; letter-spacing: -0.03em;}
/* //조직도 */


/* 오시는 길 */
.info-area {padding: 5rem 2.5rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 100px; border-radius: 10px; border: 1px solid var(--border); background: #FFF; position: relative; margin-bottom: calc(0px - 263.594px / 2); z-index: 2;}
.info-area .logo {width: 90%; max-width: 261.222px; height: 60px;}
.info-area .logo img {width: 100%; height: 100%; object-fit: contain; display: block;}
.ul-contact-info>li {padding: 1.25rem 0; display: grid; grid-template-columns: 1.5rem auto; column-gap: 1rem; align-items: center; font-size: 1.375rem; line-height: 1.4;}
.ul-contact-info>li:first-child {padding-top: 0;}
.ul-contact-info>li:last-child {padding-bottom: 0;}
.ul-contact-info>li .tit {font-weight: 550;}
.ul-contact-info>li i {font-size: 1.5rem; margin: 0 auto;}

#map {width: 100%; height: 500px;}
#map .customoverlay {padding: 5px 20px; border-radius: 3px; border: 1px solid #07024B; background-color: #fff; margin-top: -76px;}
/* //오시는 길 */





@media screen and (max-width:1440px){
    .info-area {width: calc(100% - var(--inner-padding-l)*2); gap: 6.94444444444vw;}
}

@media screen and (max-width:1200px){
    .ceo-message .txt br {display: none;}
}

@media screen and (min-width:993px){
    .about>.contact-info {padding-bottom: 0;}
}

@media screen and (max-width:992px){
    .ul-visual, 
    .ul-organization {flex-direction: column;}
    .ul-visual>.item, 
    .ul-organization>.item {width: 100%;}
    
    .about>.contact-info {padding-bottom: 0;}
    .info-area .logo {height: 40px;}
}

@media screen and (max-width:768px){
    .info-area {flex-direction: column;}
    .ul-contact-info>li {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;}
}

@media screen and (max-width:480px){
    .ceo-message .tit {margin-bottom: 40px;}
    
    .ul-visual>.item, 
    .ul-organization>.item {padding: 0 20px 30px;}
    
    .about>.contact-info {padding-bottom: 0;}
    .info-area .logo {height: 36px;}
}