@charset "UTF-8";

/* CEO 인사말 시작 */
.about {width: 100%; height: 100%; background-image: url('../img/about/about.jpg'); flex-grow: 1;}
.about .sub-title-area {margin-bottom: 130px;}
.about .sub-title-area .text2 {color: #EEEEEE;}
.about .sub-title-area .title1 {color: #fff;}

.ceo-message {font-weight: 400; font-size: 1.375rem; color: #EEEEEE; text-align: center; line-height: 1.5;}
.ceo-message .handwriting {font-family: 'InkLipquid'; font-size: 2.25rem; margin-bottom: 44px;}
.ceo-message .tit {font-weight: 600; font-size: 2.25rem; margin-bottom: 50px;}
.ceo-message .txt {white-space: pre-line; margin-bottom: 112px;}
.ceo-message .sign-area {text-align: right;}
.ceo-message .sign-area .position {font-weight: 400; font-size: 1rem;}
.ceo-message .sign-area .ceo-name {font-weight: 500; font-size: 1.5rem;}
.ceo-message .sign-area .ceo-sign {font-family: 'Satisfy', cursive; font-weight: 400; font-size: 1.5em;}
/* //CEO 인사말 끝 */

/* 가족회사 시작 */
/* .ul-partner {display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center;} */
.ul-partner {display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap;}

.ul-partner>.item .thumb {width: 100%; padding-bottom: 133.333333%; position: relative; border-radius: 10px; background-position: center; background-size: cover; overflow: hidden;}
.ul-partner>.item:first-child .thumb {background-image: url('../img/about/partner01.jpg');}
.ul-partner>.item:nth-child(2) .thumb {background-image: url('../img/about/partner02.jpg');}
.ul-partner>.item:nth-child(3) .thumb {background-image: url('../img/about/partner03.jpg');}
.ul-partner>.item:nth-child(4) .thumb {background-image: url('../img/about/partner04.jpg');}
.ul-partner>.item:nth-child(5) .thumb {background-image: url('../img/about/partner05.jpg');}
.ul-partner>.item:nth-child(6) .thumb {background-image: url('../img/about/partner06.jpg');}
.ul-partner>.item .thumb::after {width: 100%; height: 100%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, .30) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);}

.ul-partner .company {position: absolute; z-index: 1; font-weight: 700; font-size: 1.5rem; color: #FFFFFF;}
/* //가족회사 끝 */

/* 사업분야 시작 */
.ul-business>.item {display: grid; grid-template-columns: calc(100% - 540px) 500px; gap: 40px; margin-bottom: 120px;}
.ul-business>.item:last-child {margin-bottom: 28px;}
.ul-business .txt-area {margin-top: 22px;}
.ul-business .title1 {position: relative; padding-left: 17px; margin-top: 22px; margin-bottom: 12px; line-height: 1.2;}
.ul-business .title1::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; content: ''; width: 3px; height: 100%; background: var(--highlight); border-radius: 999px;}
.ul-description .item {display: -webkit-flex; display: flex; justify-content: start; align-items: start; gap: 20px; margin-bottom: 1.5rem;}
.ul-description .item:last-child {margin-bottom: 0;}
.ul-description .tit {width: 110px; display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 12px;}
.ul-description .tit::before {display: inline-block; content: ''; width: 4px; height: 4px; background: var(--primary);}
.ul-description .txt {white-space: pre-line;}
.ul-business .img-box .thumb {border-radius: 10px;}
.ul-business .img-box1 {position: relative; width: 360px;}
.ul-business .img-box1 .thumb {position: relative; width: 100%; padding-bottom: 66.666666%; overflow: hidden;}
.ul-business .img-box2 {position: relative; width: 260px;}
.ul-business .img-box2 .thumb {position: absolute; right: -240px; bottom: -28px; width: 100%; padding-bottom: 66.9230769%; overflow: hidden;}
.ul-business .img-box img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover;}
/* //사업분야 끝 */

/* VISION 시작 */
.vision {padding-bottom: 0;}
.ul-philosophy {width: 100%; max-width: 1100px; margin: 0 auto; margin-bottom: 130px;}
.ul-philosophy .item {position: relative; margin-bottom: 60px;}
.ul-philosophy .item:last-child {margin-bottom: 0;}
.ul-philosophy svg {display: block;}
.ul-philosophy .num1 {height: 105px;}
.ul-philosophy .num2 {height: 105.08px;}
.ul-philosophy .num3 {height: 110.22px;}
.ul-philosophy .text1 {position: absolute; left: 90px; bottom: 20px;}

.ul-vision {display: -webkit-flex; display: flex; justify-content: center; align-items: center; margin-bottom: 100px;}
.ul-vision .circle {width: 240px; height: 240px; border-radius: 50%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-left: -24px;}
.ul-vision .circle:first-child {margin-left: 0;}
.ul-vision .circle:nth-child(2n+1) {background: rgba(0, 168, 229, .75);}
.ul-vision .circle:nth-child(2n) {background: rgba(0, 75, 102, .65);}
.ul-vision .circle .img-area {width: 100px; height: 100px;}
.ul-vision .circle .img-area img {display: block; width: 100%; height: 100%; object-fit: cover;}
.ul-vision .circle .tit {font-weight: 700; font-size: 1.625rem; color: #fff; line-height: 1;}

.vision2 {padding: 60px 0; background: #F9F9F9;}
.ul-vision-info {display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); row-gap: 40px; width: 100%; max-width: 1200px; margin: 0 auto;}
.ul-vision-info .item {display: flex; justify-content: start; align-items: start; gap: 20px; padding-left: 20px; padding-right: 20px;}
.ul-vision-info .item .img-area {width: 50px; height: 50px;}
.ul-vision-info .item .img-area img {display: block; width: 100%; height: 100%; object-fit: cover;}
.ul-vision-info .info {width: 100%;}
.ul-vision-info .info .title2 {margin-top: 4px; margin-bottom: 30px; line-height: 1;}
/* //VISION 끝 */





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .ul-business .title1::before {margin-right: 14px;}

    .ul-description .tit {margin-right: 20px;}
    .ul-description .tit::before {margin-right: 12px;}

    .ul-vision-info .item .img-area {margin-right: 20px;}
}



@media screen and (max-width:1200px){
    .ul-description .txt {white-space: normal;}

    .vision2 {padding: 60px 50px;}
}

@media screen and (min-width:993px){
    .ul-partner {gap: 24px;}
    .ul-partner>.item {width: calc((100% - 72px)/4);}
    .ul-partner .company {width: calc(100% - 48px); top: 40px; left: 24px;}

    .ul-vision-info .info .txt {white-space: pre-line;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .ul-vision-info .item {margin-bottom: 40px;}
        .ul-vision-info .item:nth-last-child(-n+2) {margin-bottom: 0;}
    }
}

@media screen and (max-width:992px){
    .ul-partner {gap: 16px;}
    .ul-partner>.item {width: calc((100% - 32px)/3);}
    .ul-partner .company {width: calc(100% - 40px); top: 36px; left: 20px;}

    .business {padding-bottom: 110px;}
    .ul-business>.item {grid-template-columns: calc(100% - 440px) 400px; gap: 30px; margin-bottom: 80px;}
    .ul-business .img-box1 {width: 300px;}
    .ul-business .img-box2 {width: 220px;}
    .ul-business .img-box2 .thumb {right: -200px;}

    .ul-philosophy {margin-bottom: 100px;}
    .ul-vision {margin-bottom: 80px;}
    .ul-vision .circle {width: 180px; height: 180px;}
    .ul-vision .circle .img-area {width: 75px; height: 75px; margin-bottom: 4px;}
    .ul-vision-info {grid-auto-rows: minmax(100px, auto);}
    .ul-vision-info .info .title2 {margin-bottom: 20px;}
}

@media screen and (max-width:768px){
    .ul-partner>.item {width: calc((100% - 16px)/2);}

    .business {padding-bottom: 90px;}
    .ul-business>.item {grid-template-columns: 1fr; gap: 30px; margin-bottom: 94px /* 66 + 28 */;}
    .ul-business .txt-area {margin-top: 0;}

    .ul-philosophy {margin-bottom: 80px;}
    .ul-vision {width: 100%; max-width: 400px; margin: 0 auto; flex-wrap: wrap; margin-bottom: 66px;}
    .ul-vision .circle {margin-left: -20px;}
    .ul-vision .circle:nth-child(3) {order: 4; margin-top: -20px;}
    .ul-vision .circle:nth-child(4) {order: 3; margin-top: -20px; margin-left: 0;}
    .vision2 {padding: 50px 40px;}
}

@media screen and (min-width:481px){
    .ul-vision-info .item:nth-child(2n) {border-left: 1px solid #BBBBBB;}
}

@media screen and (max-width:480px){
    .ceo-message .tit {margin-bottom: 40px;}

    .ul-partner {gap: 12px;}
    .ul-partner>.item {width: calc((100% - 12px)/2);}
    .ul-partner .company {width: calc(100% - 32px); top: 32px; left: 16px;}

    .business {padding-bottom: 70px;}
    .ul-business>.item {margin-bottom: 70px /* 50 + 20 */;}
    .ul-business>.item:last-child {margin-bottom: 20px;}
    .ul-business .img-box1 {width: 71.42857142857%;}
    .ul-business .img-box2 {width: 50%;}
    .ul-business .img-box2 .thumb {right: -100%; bottom: -20px;}

    .ul-philosophy {margin-bottom: 60px;}
    .ul-philosophy .item {margin-bottom: 40px;}
    .ul-vision {margin-bottom: 50px;}
    .ul-vision .circle {width: 50%; max-width: 180px; margin-left: -16px;}
    .ul-vision .circle:nth-child(3) {margin-top: -16px;}
    .ul-vision .circle:nth-child(4) {margin-top: -16px;}
    .ul-vision .circle .img-area {width: 60px; height: 60px; margin-bottom: 0;}
    .vision2 {padding: 30px 12px;}
    .ul-vision-info {grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 26px;}
    .ul-vision-info .item {gap: 6px; padding-left: 0; padding-right: 0;}
    .ul-vision-info .info .title2 {margin-bottom: 6px;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .ul-vision-info .item {margin-bottom: 26px;}
        .ul-vision-info .item:last-child {margin-bottom: 0;}
        .ul-vision-info .item .img-area {margin-right: 6px;}
    }
}