@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 {width: 100%; height: 300px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-image: url('../img/about/about.jpg'); background-size: cover; background-position: center;}
.about .sub-title-area .text2 {color: #EEEEEE;}
.about .sub-title-area .title2 {color: #fff;}

.about .title1 {text-align: center; overflow: hidden; position: relative; margin-bottom: 5rem; z-index: 1;}
.about .title1 p {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 0 40px; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #fff;}
.about .title1 .svg-line {width: 100vw; height: 2px; position: absolute; top: calc(50% - 2px); left: 50%; transform: translateX(-50%); z-index: -1;}

/* 개요 */
.summary .inner {padding: 0;}
.summary-table {width: 100%; display: -webkit-flex; display: flex; align-items: stretch;}

.summary-table .caption {padding: 40px 60px; background: #EEE; -webkit-flex-shrink: 0; flex-shrink: 0;}
.summary-table .caption .slogan {color: var(--darkgray, #333); text-align: center; font-family: 'Soopilmyungjo'; font-size: 2.5rem; font-weight: 400; line-height: 120%; letter-spacing: -0.01em; white-space: pre-line;}
.summary-table .caption .slogan + img {margin-top: 60px;}
.summary-table .caption img {width: 100%; max-width: 294px; object-fit: contain; display: block; margin: 0 auto;}

.ul-summary {width: 100%; display: grid; grid-template-columns: auto 1fr;}
.ul-summary>.item {padding: 6px 30px; display: flex; align-items: center;}
.ul-summary .th {justify-content: center; text-align: center; font-size: 1.125rem; font-weight: 600; line-height: 140%; border-bottom: 1px solid #666;}
.ul-summary .td {text-align: left; border-bottom: 1px solid var(--border, #DFDFDF);}
/* //개요 */

/* 연혁 */
.company-history {width: 100%;}
.history-wrap {width: 100%; background: url('../img/history_line.gif') repeat-y center; overflow: hidden;}
.history-wrap .title {text-align: center;}
.history-wrap .title h4 {display: table; width: 150px; height: 150px; margin: 0 auto; position: relative;}
.history-wrap .title h4 span {display: table-cell; vertical-align: middle; width: 100%; height: 100%; border-radius: 50%; background: var(--highlight); font-family: Gmarket Sans; font-weight: 700; font-size: 1.875rem; color: #fff; line-height: 1; padding-top: 4px;}
.history-wrap .history-box {width: 100%; overflow: hidden; margin: 35px 0;}
.history-box .box-wrap .box {margin: 0;}
.history-box .box-wrap .box li {position: relative; padding: 5px 0; display: -webkit-flex; display: flex; align-items: center; column-gap: 8px; line-height: 1;}
.history-box .box-wrap .box li::before {content: ''; color: #ACACAC; font-family: Gmarket Sans; font-size: 1.125rem; font-weight: 700; line-height: 1; display: inline-block; padding-top: 4px;}
.history-box .box-wrap .box li::after {content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red, #FF4546); display: inline-block;}

.history-box2020 .box-wrap .box li:nth-last-child(1)::before {content: '07월';}

.history-box2015 .box-wrap .box li:nth-last-child(1)::before {content: '08월';}

.history-box2017 .box-wrap .box li:nth-last-child(1)::before {content: '10월';}

.history-box2021 .box-wrap .box li:nth-last-child(1)::before,
.history-box2017 .box-wrap .box li:nth-last-child(2)::before {content: '11월';}

.history-box2022 .box-wrap .box li:nth-last-child(1)::before, 
.history-box2020 .box-wrap .box li:nth-last-child(2)::before,
.history-box2018 .box-wrap .box li:nth-last-child(1)::before, 
.history-box2018 .box-wrap .box li:nth-last-child(2)::before {content: '12월';}

.history-box .box-wrap.right {width: 50%; position: relative; float: right; text-align: left;}
.history-box .box-wrap.right .box li {justify-content: start;}

.history-box .box-wrap.left {width: 50%; position: relative; float: left; text-align: right;}
.history-box .box-wrap.left .box li {justify-content: end;}

.history-box .box-wrap.right .box li::after {order: 1;}
.history-box .box-wrap.right .box li::before {order: 2;}
.history-box .box-wrap.right .box li>span {order: 3;}

.history-box .box-wrap.left .box li>span {order: 1;}
.history-box .box-wrap.left .box li::before {order: 2;}
.history-box .box-wrap.left .box li::after {order: 3;}
/* //연혁 */

/* 비전 */
.vision-area {width: 900px; height: 857.73px; margin: 0 auto; position: relative;}
.vision-area .tit {color: #FFF; text-align: center; white-space: pre-line;}

.vision-area .vision-element {display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; row-gap: 16px;}
.vision-area .vision-element3 {padding: 0 50px;}

.vision-area .ul-txt .txt {color: #FFF;}
.vision-area .vision-element:not(.vision-element2) .ul-txt .txt::before {content: '• ';}
.vision-area .vision-element2 .ul-txt .txt::before {content: '* ';}
/* //비전 */
/* //회사소개 */

/* 조직도 */
.ul-organization {display: grid; justify-content: center; align-items: flex-start;}
.ul-organization>.item {position: relative; z-index: 1;}

.ul-organization>.item1 {grid-area: group1; margin: 0 auto;}

.ul-organization>.item2-1 {grid-area: group2-1;}
.ul-organization>.item2-2 {grid-area: group2-2;}

.ul-organization>.item3-1 {grid-area: group3-1;}
.ul-organization>.item3-2 {grid-area: group3-2;}
.ul-organization>.item3-3 {grid-area: group3-3;}
.ul-organization>.item3-4 {grid-area: group3-4;}

.organization-box {
    width: 9.375rem; height: 9.375rem; padding: 10px; background-color: #FFFFFF; border-radius: 50%; position: relative; background-size: 100%; background-repeat: no-repeat; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-shrink: 0; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none'%3E%3Ccircle cx='75' cy='75' r='74.5' stroke='%23999999' stroke-dasharray='6 6'/%3E%3C/svg%3E");
}

.organization-box::after {content: ''; width: calc(9.375rem + 6px); height: calc(9.375rem + 6px); display: inline-block; border-radius: 50%; position: absolute; top: -3px; left: -3px; background-size: 100%; background-repeat: no-repeat;}

.organization-box1::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='81' viewBox='0 0 156 81' fill='none'%3E%3Cpath d='M153 78C153 36.5786 119.421 3 78 3C36.5786 3 3 36.5786 3 78' stroke='%23FCBA62' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");}

.organization-box2::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='81' viewBox='0 0 156 81' fill='none'%3E%3Cpath d='M153 78C153 36.5786 119.421 3 78 3C36.5786 3 3 36.5786 3 78' stroke='%23FF4546' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");}

.organization-box3::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='81' viewBox='0 0 156 81' fill='none'%3E%3Cpath d='M153 78C153 36.5786 119.421 3 78 3C36.5786 3 3 36.5786 3 78' stroke='%238D59B6' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");}


/* 인사말 */
.ceo-message {text-align: center;}
.ceo-message .txt {white-space: pre-line;}
.ceo-message .txt .tint {color: var(--highlight, #FCBA62);}
.ceo-message .txt + .sign-area {margin-top: 60px;}
.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;}
/* //인사말 */


/* 오시는 길 */
.about.map .bg {background-image: url('../img/about/bg_map.jpg');}

.title3 + .ul-contact-info {margin-top: 2.5rem;}
.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-wrap {width: 100%; max-width: 600px; border-radius: var(--border-radius); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); overflow: hidden;}
.map-area {width: 100%; max-width: 600px; padding-bottom: 50%; position: relative;}
#map {width: 100%; height: 100%; position: absolute; inset: 0;}
/* //오시는 길 */





/* 영어 */
.about.eng .history-box2020 .box-wrap .box li:nth-last-child(1)::before {content: 'July';}

.about.eng .history-box2015 .box-wrap .box li:nth-last-child(1)::before {content: 'August';}

.about.eng .history-box2017 .box-wrap .box li:nth-last-child(1)::before {content: 'October';}

.about.eng .history-box2021 .box-wrap .box li:nth-last-child(1)::before,
.about.eng .history-box2017 .box-wrap .box li:nth-last-child(2)::before {content: 'November';}

.about.eng .history-box2022 .box-wrap .box li:nth-last-child(1)::before, 
.about.eng .history-box2020 .box-wrap .box li:nth-last-child(2)::before,
.about.eng .history-box2018 .box-wrap .box li:nth-last-child(1)::before, 
.about.eng .history-box2018 .box-wrap .box li:nth-last-child(2)::before {content: 'December';}
/* //영어 */





@media screen and (min-width:1921px){
    .about .bg {height: 15.625vw;}
}

@media screen and (min-width:1201px) and (max-width:1920px){
    .about .bg {height: 300px;}
}

@media screen and (max-width:1200px){
    .about .bg {height: 25vw; min-height: 200px;}


    .ceo-message .txt br {display: none;}
}

@media screen and (min-width:993px) and (max-width:1200px){
    .summary-table .caption .slogan {font-size: 3.33333333333vw;}
    .summary-table .caption img {width: 24.5vw; min-width: 200px;}
}

@media screen and (min-width:993px){
    .history-box .box-wrap.left .box li {padding-right: 60px;}
    .history-box .box-wrap.right .box li {padding-left: 60px;}

    .vision {padding-top: 150px; padding-bottom: 150px;}
    

    /* 조직도 */
    .ul-organization {gap: 100px;}

    .ul-organization>.item::after, 
    .ul-organization>.item2::before {height: 52px;}
    .ul-organization>.item3::after, 
    .ul-organization>.item2::before {margin-top: calc(-50px - 100%);}

    /* width: organization-box 반지름 길이*개수 + ul-organization gap*개수 + 2px(stroke-linecap='round'일 때) */
    .ul-organization>.item1::before {width: calc(9.375rem/2*2 + 100px + 2px); top: calc(100% + 50px); left: calc(50% - ((9.375rem/2*2 + 100px + 2px)/2));}
    .ul-organization>.item3-1::before {width: calc(9.375rem/2*6 + 100px*3 + 2px); top: -50px; left: calc(9.375rem/2 - 1px);}
    /* //조직도 */
}

@media screen and (max-width:992px){
    .about .title1 p {padding: 0 30px;}


    .summary-table .caption {padding: 34px 50px;}
    .summary-table .caption .slogan {font-size: 3.5vw;}
    .summary-table .caption .slogan + img {margin-top: 40px;}
    .summary-table .caption img {width: 20vw; min-width: 160px;}
    .ul-summary>.item {padding: 6px 20px;}

    .history-wrap {background-position: 5% top;}
    .history-wrap .title h4 {width: 100%; height: 4rem;}
    .history-wrap .title h4 span {border-radius: 0;}
    .history-box .box-wrap .box li {padding-left: 5%; padding-right: 5%; display: -webkit-flex; display: flex;}
    .history-box .box-wrap.right {width: 95%;}
    .history-box .box-wrap.left {width: 95%; float: right;}
    .history-box .box-wrap.left .box li {justify-content: start; text-align: left;}
    .history-box .box-wrap.left .box li>span {order: 3;}
    .history-box .box-wrap.left .box li::before {order: 2;}
    .history-box .box-wrap.left .box li::after {order: 1;}

    .vision {padding-top: 110px; padding-bottom: 110px;}
}

@media screen and (min-width:769px) and (max-width:992px){
    .vision-area {transform: scale(0.7); margin: -128px auto;}
    .vision-area .vision-element>* {transform: scale(1.2);}
    .vision-area .vision-element3 {padding-left: 60px;}


    /* 조직도 */
    .ul-organization {gap: 70px;}

    .ul-organization>.item::after, 
    .ul-organization>.item2::before {height: 37px;}
    .ul-organization>.item3::after, 
    .ul-organization>.item2::before {margin-top: calc(-35px - 100%);}

    /* width: organization-box 반지름 길이*개수 + ul-organization gap*개수 + 2px(stroke-linecap='round'일 때) */
    .ul-organization>.item1::before {width: calc(9.375rem/2*2 + 70px + 2px); top: calc(100% + 35px); left: calc(50% - ((9.375rem/2*2 + 70px + 2px)/2));}
    .ul-organization>.item3-1::before {width: calc(9.375rem/2*6 + 70px*3 + 2px); top: -35px; left: calc(9.375rem/2 - 1px);}
    /* //조직도 */
}

@media screen and (min-width:769px) and (max-width:900px){
    .vision-area {margin-left: calc((100vw - 900px)/2);}
}

@media screen and (min-width:769px){
    .vision-area .vision-element {width: 485px; height: 485px; background-repeat: no-repeat; position: absolute;}

    .vision-area .vision-element1 {top: 0; left: 202.292px;}
    .vision-area .vision-element1 {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='485' height='484' viewBox='0 0 485 484' fill='none'%3E%3Cpath d='M484.243 242.115C484.243 282.773 474.171 321.121 456.391 354.795H456.29C443.483 354.795 430.892 355.716 418.576 357.524C415.746 357.925 412.927 358.385 410.138 358.882C349.786 369.702 296.561 401.359 258.237 446.104C256.352 448.276 254.533 450.467 252.749 452.699C251.277 454.518 249.847 456.361 248.423 458.234C246.478 460.802 244.569 463.411 242.726 466.05C240.793 468.791 238.926 471.562 237.1 474.38C235.066 477.534 233.085 480.724 231.194 483.979C150.614 480.389 80.1665 437.229 38.8325 373.508C36.8637 370.468 34.9546 367.386 33.1354 364.256C31.3521 361.252 29.6465 358.182 28.0128 355.094C10.1375 321.342 2.47276e-07 282.893 2.47276e-07 242.115C-0.00598411 108.616 108.61 0 242.115 0C375.62 0 484.243 108.616 484.243 242.115Z' fill='%238D59B6'/%3E%3C/svg%3E"); background-position: left top;}
    
    .vision-area .vision-element2 {bottom: 0; left: 0;}
    .vision-area .vision-element2 {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='485' height='483' viewBox='0 0 485 483' fill='none'%3E%3Cpath d='M484.249 241.032C484.249 286.328 471.741 328.751 450 365.046C448.205 368.062 446.32 371.042 444.393 373.987C442.549 376.793 440.64 379.546 438.684 382.263C394.687 443.327 322.976 483.147 242.133 483.147C108.616 483.147 0 374.531 0 241.032C0 115.301 96.3362 11.6456 219.075 0C225.431 10.7479 232.54 20.9931 240.332 30.6699C242.002 32.7524 243.701 34.811 245.443 36.8277C287.531 86.0491 347.578 119.448 415.327 126.821C417.894 127.096 420.461 127.347 423.058 127.545C423.13 127.545 423.208 127.557 423.28 127.557C426.535 127.82 429.815 128.005 433.118 128.143C436.595 128.281 440.09 128.353 443.603 128.353H443.693C447.894 128.353 452.083 128.251 456.236 128.053C474.117 161.805 484.249 200.255 484.249 241.032Z' fill='%23FCBA62'/%3E%3C/svg%3E"); background-position: left bottom;}
    
    .vision-area .vision-element3 {bottom: 0; right: 0;}
    .vision-area .vision-element3 {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='439' height='484' viewBox='0 0 439 484' fill='none'%3E%3Cpath d='M438.678 242.121C438.678 375.62 330.061 484.237 196.55 484.237C115.714 484.237 43.997 444.417 0 383.352C5.13458 375.411 9.85024 367.182 14.0872 358.679C15.1943 356.512 16.2535 354.328 17.2768 352.12C32.896 318.679 41.6272 281.403 41.6272 242.121C41.6272 202.84 32.9977 166.018 17.5641 132.745C16.7382 130.95 15.8944 129.178 15.0207 127.407C14.8232 126.994 14.6078 126.587 14.3984 126.174C13.1297 123.595 11.8072 121.064 10.4487 118.532C8.82695 115.54 7.15729 112.572 5.42183 109.657C3.66243 106.689 1.85515 103.775 0 100.89C41.9803 42.6326 109.203 3.69234 185.503 0.251333C189.172 0.0897552 192.846 0 196.55 0H196.838C200.404 0 203.959 0.0897552 207.484 0.251333C335.95 5.98435 438.678 112.285 438.678 242.121Z' fill='%23FF4546'/%3E%3C/svg%3E"); background-position: right bottom;}


    /* 조직도 */
    .ul-organization {
        grid-template-areas: 
        "group1 group1 group1 group1"
        "group2-1 group2-1 group2-2 group2-2"
        "group3-1 group3-2 group3-3 group3-4";
    }

    .ul-organization>.item2-1 {margin-left: auto;}
    .ul-organization>.item2-2 {margin-right: auto;}

    .ul-organization>.item::after, 
    .ul-organization>.item2::before {
        content: ''; width: 1px; display: block; margin-left: auto; margin-right: auto;
        position: absolute; top: 100%; left: calc(50% - 0.5px); z-index: -1;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='52' viewBox='0 0 1 52' fill='none'%3E%3Cline x1='0.5' y1='1' x2='0.5' y2='51' stroke='%23999999' stroke-linecap='round' stroke-dasharray='6 6' stroke-width='1' /%3E%3C/svg%3E");
    }

    .ul-organization>.item1::before, 
    .ul-organization>.item3-1::before {
        content: ''; height: 1px; display: block; margin: 0 auto; position: absolute; z-index: -1;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='1' viewBox='0 0 252 1' fill='none'%3E%3Cline x1='1' y1='0.5' x2='251' y2='0.5' stroke='%23999999' stroke-linecap='round' stroke-dasharray='6 6' stroke-width='1' /%3E%3C/svg%3E");
    }
    /* //조직도 */


    .contact-info {display: grid; grid-template-columns: minmax(40%, 590px) minmax(38%, 560px); gap: 5rem; align-items: start;}
}

@media screen and (max-width:768px){
    .summary-table {flex-direction: column;}
    .summary-table .caption .slogan {font-size: 5vw;}
    .summary-table .caption img {width: 30vw; min-width: 160px;}

    .vision-area {width: 100%; height: auto; padding: var(--inner-padding);}
    .vision-area .vision-element {width: 384px; height: 384px; padding: var(--inner-padding-l); border-radius: 50%; margin: 0 auto;}
    .vision-area .vision-element:not(.vision-element1) {margin-top: -10vw;}
    .vision-area .vision-element1 {background-color: #8D59B6;}
    .vision-area .vision-element2 {background-color: var(--highlight, #FCBA62); position: relative;}
    .vision-area .vision-element3 {background-color: var(--red, #FF4546);}


    /* 조직도 */
    .ul-organization {
        gap: 60px;
        grid-template-areas: 
        "group1 group1"
        "group2-1 group3-1"
        "group2-2 group3-2"
        "group2-2 group3-3"
        "group2-2 group3-4";
    }
    .ul-organization>.item:not(.item1, .item2-1, .item3-1) {margin-top: -30px;}

    .ul-organization>.item::after {
        content: ''; width: 1px; height: 32px; display: block; margin: 0 auto;
        position: absolute; top: 100%; left: calc(50% - 0.5px); z-index: -1;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='52' viewBox='0 0 1 52' fill='none'%3E%3Cline x1='0.5' y1='1' x2='0.5' y2='51' stroke='%23999999' stroke-linecap='round' stroke-dasharray='6 6' stroke-width='1' /%3E%3C/svg%3E");
    }
    .ul-organization>.item2::after, 
    .ul-organization>.item3::after {margin-top: calc(-30px - 100%);}

    .ul-organization>.item1::before {
        content: ''; height: 1px; display: block; margin: 0 auto; position: absolute; z-index: -1;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='1' viewBox='0 0 252 1' fill='none'%3E%3Cline x1='1' y1='0.5' x2='251' y2='0.5' stroke='%23999999' stroke-linecap='round' stroke-dasharray='6 6' stroke-width='1' /%3E%3C/svg%3E");
    }
    /* width: organization-box 반지름 길이*개수 + ul-organization gap*개수 + 2px(stroke-linecap='round'일 때) */
    .ul-organization>.item1::before {width: calc(9.375rem/2*2 + 60px + 2px); top: calc(100% + 30px); left: calc(50% - ((9.375rem/2*2 + 60px + 2px)/2));}
    /* //조직도 */


    .contact-info>.left {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: 0 auto; margin-bottom: 5rem;}
    .contact-info>.right {margin: 0 auto;}
    .contact-info .title3 {text-align: center;}
    .ul-contact-info>li {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: 0 auto;}
}

@media screen and (max-width:480px){
    .about {padding-top: 0; padding-bottom: 0;}

    .about .title1 {gap: 8px;}
    .about .title1 p {padding: 0 20px;}


    .summary-table .caption .slogan {font-size: 7vw;}
    .summary-table .caption img {width: 50vw; min-width: 160px;}
    .ul-summary>.item {padding: 6px 14px;}

    .vision {padding-top: 80px; padding-bottom: 80px;}
    .vision-area .vision-element {width: 90vw; height: 90vw; max-width: 352px; max-height: 352px;}
    .vision-area .vision-element:not(.vision-element1) {margin-top: -15vw;}


    .ceo-message .tit {margin-bottom: 40px;}
}