@charset "UTF-8";

.sub-page.about {padding: 0;}

.about .img img {width: 100%; height: auto; object-fit: contain; display: block;}

/* .visual {
    width: 100%; height: 832px; padding-top: 206px; background-size: 1831px auto; background-repeat: no-repeat; background-position: -45px calc(-1036.5px - 141px); 
    background-image: url("data:image/svg+xml,%3Csvg width='1831' height='1869' viewBox='0 0 1831 1869' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_2)'%3E%3Cpath d='M380.18 95.841C380.18 95.841 223.743 171.241 118.46 416.18C118.46 416.18 -84.658 888.633 41.05 1490.11C41.05 1490.11 126.682 1850.88 591.522 1868.14C591.522 1868.14 1168.65 1887.7 1650.69 1433.66C1650.69 1433.66 1999.27 1121.83 1726.87 680.06C1726.87 680.06 1185.85 -152.164 542.368 24.653C542.373 24.654 471.107 41.838 380.18 95.841Z' fill='url(%23paint0_linear_1_2)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_2' x1='-0.000456769' y1='-0.00136551' x2='1554.39' y2='989.522' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F1F8FE' stop-opacity='0.996'/%3E%3Cstop offset='1' stop-color='%23F4F9FF'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1_2'%3E%3Crect width='1830.92' height='1868.26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
} */

/* .visual {
    width: 100%; height: 832px; padding-top: clamp(80px, 10.72916666667vw, 206px); background-size: calc(100% - 89px) auto; background-repeat: no-repeat; background-position: clamp(-45px, -2.34375vw, 0px) calc(clamp(-1036.5px, -53.984375vw, 0px) - 141px); 
    background-image: url("data:image/svg+xml,%3Csvg width='1831' height='1869' viewBox='0 0 1831 1869' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_2)'%3E%3Cpath d='M380.18 95.841C380.18 95.841 223.743 171.241 118.46 416.18C118.46 416.18 -84.658 888.633 41.05 1490.11C41.05 1490.11 126.682 1850.88 591.522 1868.14C591.522 1868.14 1168.65 1887.7 1650.69 1433.66C1650.69 1433.66 1999.27 1121.83 1726.87 680.06C1726.87 680.06 1185.85 -152.164 542.368 24.653C542.373 24.654 471.107 41.838 380.18 95.841Z' fill='url(%23paint0_linear_1_2)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_2' x1='-0.000456769' y1='-0.00136551' x2='1554.39' y2='989.522' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F1F8FE' stop-opacity='0.996'/%3E%3Cstop offset='1' stop-color='%23F4F9FF'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1_2'%3E%3Crect width='1830.92' height='1868.26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
} */

.visual {
    width: 100%; height: 692px; padding-top: clamp(80px, 10.72916666667vw, 206px); background-size: calc(100% - clamp(0px, 4.63541666667vw, 89px)) auto; background-repeat: no-repeat; background-position: clamp(-45px, -2.34375vw, 0px) bottom; overflow-x: clip; overflow-y: visible;
    background-image: url("data:image/svg+xml,%3Csvg width='1831' height='1869' viewBox='0 0 1831 1869' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_2)'%3E%3Cpath d='M380.18 95.841C380.18 95.841 223.743 171.241 118.46 416.18C118.46 416.18 -84.658 888.633 41.05 1490.11C41.05 1490.11 126.682 1850.88 591.522 1868.14C591.522 1868.14 1168.65 1887.7 1650.69 1433.66C1650.69 1433.66 1999.27 1121.83 1726.87 680.06C1726.87 680.06 1185.85 -152.164 542.368 24.653C542.373 24.654 471.107 41.838 380.18 95.841Z' fill='url(%23paint0_linear_1_2)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_2' x1='-0.000456769' y1='-0.00136551' x2='1554.39' y2='989.522' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F1F8FE' stop-opacity='0.996'/%3E%3Cstop offset='1' stop-color='%23F4F9FF'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1_2'%3E%3Crect width='1830.92' height='1868.26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.visual .inner {display: flex; justify-content: space-between; align-items: start; gap: 70px 30px;}

.visual .title1 {padding-left: calc(2.125rem + 15px); position: relative; font-family: "Gmarket Sans"; font-weight: 500; font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--dark);}
.visual .title1::before {
    content: ''; width: 2.125rem; height: 2.438rem; display: block; position: absolute; top: -0.625rem; left: 0; background-size: contain; background-repeat: no-repeat; 
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='39' viewBox='0 0 34 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.285 38.375C20.6221 38.375 26.57 32.4271 26.57 25.09C26.57 17.7529 20.6221 11.805 13.285 11.805C5.9479 11.805 0 17.7529 0 25.09C0 32.4271 5.9479 38.375 13.285 38.375Z' fill='%233ABDFF'/%3E%3Cpath d='M26.5699 13.78C30.3752 13.78 33.4599 10.6952 33.4599 6.89C33.4599 3.08476 30.3752 0 26.5699 0C22.7647 0 19.6799 3.08476 19.6799 6.89C19.6799 10.6952 22.7647 13.78 26.5699 13.78Z' fill='%233653E7'/%3E%3C/svg%3E");
}

.visual .title1 + .text1 {margin-top: 4.75rem;}
.visual .text1 {font-family: "Gmarket Sans"; font-weight: 500; font-size: 1.5rem; line-height: 2.5rem; letter-spacing: -0.02em; color: #535353; white-space: pre-line;}

.visual .ceo {font-family: "Gmarket Sans"; font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--dark); display: flex; justify-content: start; align-items: end; gap: 1.25rem; margin-top: 7.375rem;}
.visual .ceo .sign {width: auto; height: 3.25rem; object-fit: contain; display: inline-block;}

/* .visual .ceo-img {width: clamp(363px, 37.8125vw, 484px); height: clamp(358.5px, 37.34375vw, 478px); object-fit: contain; display: block; margin-top: clamp(-91px, -7.109375vw, -68px); margin-right: clamp(-32px, -2.5vw, -24px);} */
.visual .ceo-img {width: 100%; max-width: 30.25rem; height: 29.875rem; object-fit: contain; display: block; margin-top: clamp(-91px, -7.109375vw, -68px); margin-right: clamp(-32px, -2.5vw, 0px);}


section:not(.visual) .title2 {font-family: "Gmarket Sans"; font-weight: 500; font-size: 3.25rem; line-height: 1.15; text-align: center; letter-spacing: -0.02em; color: var(--dark); white-space: pre-line;}
section:not(.visual) .title2 + .text2 {margin-top: 1rem;}
section:not(.visual) .text2 {font-family: "Gmarket Sans"; font-weight: 500; font-size: 1.375rem; line-height: normal; text-align: center; letter-spacing: -0.02em; color: var(--dark); white-space: pre-line;}


.we {margin-top: 74px;}
.we img {width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; margin-top: clamp(67.5px, 4.6875vw, 90px);}
.we .landscape {max-width: 1200px;}
.we .portrait {max-width: 450px;}


.message {padding: 0 clamp(0px, 8.33333333333vw, 160px) 0 clamp(0px, 6.25vw, 120px); display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 1px;}
.message img {width: 100%; max-width: clamp(360px, 35.15625vw, 675px); object-fit: contain; display: block;}
.message .txt {font-family: "Gmarket Sans"; font-weight: 500; font-size: clamp(21px, 1.45833333333vw, 28px); line-height: 2; text-align: right; letter-spacing: -0.02em; color: #535353; white-space: pre-line; margin-top: -7px;}


/* .manual {margin-top: 85px;} */
.ul-manual {margin-top: 120px;}
.ul-manual>li + li, .ul-manual>.step4 {margin-top: 300px;}
.ul-manual>li {width: 100%; background: #F5F5F5; position: relative; overflow-x: clip; overflow-y: visible;}
.ul-manual>li:not(.step2, .step4) {padding: 100px 0;}
.ul-manual>li:not(.step5) .inner {display: flex; justify-content: space-between; gap: 30px;}
.ul-manual :is(.step2, .step4) .inner {padding: 100px 0; position: relative;}

.ul-manual .txt-area {position: relative; z-index: 1;}
.ul-manual>li:not(.step5):nth-child(odd) .txt-area {text-align: left; margin-left: 0; margin-right: auto;}
.ul-manual>li:not(.step5):nth-child(even) .txt-area {text-align: right; margin-left: auto; margin-right: 0;}
.ul-manual>li.step4 .txt-area {text-align: right !important; margin-left: auto !important; margin-right: 0 !important;}

.ul-manual .tint {font-family: "Gmarket Sans"; font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: -0.02em; color: var(--highlight); margin-bottom: 1.875rem;}
.ul-manual .tit {font-family: "Gmarket Sans"; font-weight: 700; font-size: 1.875rem; line-height: 1.5; letter-spacing: -0.02em; color: #151515; white-space: pre-line;}
.ul-manual .tit + .txt {margin-top: 3.375rem;}
.ul-manual .txt {font-family: "Gmarket Sans"; font-weight: 300; font-size: 1.25rem; line-height: 1.55; letter-spacing: -0.02em; color: #151515; white-space: pre-line;}

/* .ul-manual>li:nth-child(odd) .txt-area {order: 1;}
.ul-manual>li:nth-child(even) .txt-area {order: 2;}
.ul-manual>li:nth-child(odd) .img {order: 2;}
.ul-manual>li:nth-child(even) .img {order: 1;} */

.ul-manual img:not(.ul-lecture img) {display: block; object-fit: contain; position: absolute;}
.step1 img {width: 100%; max-width: clamp(48rem, 57.44791666667vw, 1103px); height: auto; bottom: clamp(-437px, -22.76041666667vw, 0px); right: clamp(-191px, -9.94791666667vw, 0px);}
.step2 img {width: 100%; max-width: clamp(27.5rem, 30.3125vw, 582px); height: auto; bottom: clamp(-148px, -7.70833333333vw, -112px); left: 0;}
.step3 img {width: auto; height: clamp(250px, 17.91666666667vw, 344px); border-radius: clamp(15px, 1.04166666667vw, 20px); box-shadow: 0 clamp(5px, 0.52083333333vw, 10px) clamp(25px, 2.60416666667vw, 50px) rgba(0, 0, 0, 0.24); top: 100px; right: clamp(0px, 8.59375vw, 165px);}


.step4 .inner::before, 
.step4 .inner::after {content: ''; width: 695px; height: 100%; display: block; position: absolute; top: 0; z-index: 5;}
.step4 .inner::before {background: linear-gradient(to left, #F5F5F5 0%, #F5F5F5 46%, #F5F5F500 100%); right: 262px;}
.step4 .inner::after {background: linear-gradient(to right, #F5F5F5 0%, #F5F5F5 54%, #F5F5F500 100%); right: -335px;}

.step4 .txt-area {position: relative; z-index: 10;}

.lecture-swiper {width: 100%; max-width: 1000px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.lecture-swiper .swiper-wrapper {width: 100%; height: 100%; transition-timing-function: linear !important;}
.ul-lecture .lecture {width: 264px; height: 200px; border-radius: 20px; overflow: hidden; position: relative;}
.ul-lecture .lecture::before {content: ''; width: 100%; height: 100%; display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 10;}
.ul-lecture .lecture::after {
    content: ''; width: 92px; height: 92px; position: absolute; top: 50%; left: 50%; z-index: 20; transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_6_3)'%3E%3Cpath d='M80.5 46C80.5 26.9462 65.0538 11.5 46 11.5C26.9462 11.5 11.5 26.9462 11.5 46C11.5 65.0538 26.9462 80.5 46 80.5C65.0538 80.5 80.5 65.0538 80.5 46Z' stroke='white' stroke-width='3'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d_6_3)'%3E%3Cpath d='M58.2999 48.3C58.6774 48.0799 58.9905 47.7646 59.2081 47.3857C59.4258 47.0068 59.5403 46.5775 59.5403 46.1405C59.5403 45.7036 59.4258 45.2743 59.2081 44.8954C58.9905 44.5164 58.6774 44.2012 58.2999 43.981L40.7689 33.758C40.3887 33.5357 39.9565 33.4178 39.5161 33.4162C39.0757 33.4145 38.6426 33.5293 38.2608 33.7488C37.879 33.9684 37.5619 34.2849 37.3417 34.6663C37.1215 35.0478 37.006 35.4806 37.0069 35.921C37.0069 38.009 37.0119 40.611 37.0119 43.187C37.0119 46.687 37.0119 52.4171 37.0039 56.3721C37.0041 56.8118 37.1203 57.2436 37.3408 57.6241C37.5612 58.0046 37.8781 58.3202 38.2595 58.5391C38.6408 58.7579 39.0732 58.8724 39.5129 58.8708C39.9526 58.8692 40.3841 58.7517 40.7639 58.53L58.2999 48.3Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_6_3' x='0' y='0' width='92' height='92' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6_3'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6_3' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d_6_3' x='27.0039' y='23.4161' width='42.5364' height='45.4547' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6_3'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6_3' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.ul-lecture img {width: 100%; height: 100%; display: block; object-fit: cover;}


.ul-manual .step5 {background: url(../img/about/gradient.png); background-size: cover;}
.step5 :is(.tint, .tit) {text-align: center; white-space: pre-line;}





/* 가로 모드 */
@media (orientation: landscape){
    .we .landscape {display: block;}
    .we .portrait {display: none;}
}

/* 세로 모드 */
@media (orientation: portrait){
    .we .landscape {display: none;}
    .we .portrait {display: block;}
}

@media screen and (max-width:1280px){
    .visual {height: 562px; background-position: -132px bottom;}

    .message {margin-top: 74px;}

    .ul-manual>li + li, .ul-manual>.step4 {margin-top: 260px;}

    .step2 img {bottom: -100px;}
    .step4 .inner::before {right: 172px;}

    .lecture-swiper {width: 1961px; height: 180px;}
    .ul-lecture .lecture {width: 238px; height: 180px;}
    .ul-lecture .lecture::after {width: 80px; height: 80px;}
}

@media screen and (max-width:1200px){
    section .inner, 
    .ul-manual :is(.step2, .step4) .inner {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}

    .step2 img {left: var(--inner-padding-l);}
}

@media screen and (max-width:992px){
    .visual {height: auto; padding-bottom: clamp(80px, 10.72916666667vw, 206px); background: transparent linear-gradient(124deg, #F1F8FEFE 0%, #F4F9FF 100%) 0% 0% no-repeat padding-box;}
    .visual .inner {flex-direction: column; align-items: center;}

    .visual .txt-area {order: 2;}
    .visual :is(.title1, .text1) {text-align: center;}
    .visual .ceo {justify-content: center;}
    .visual .ceo-img {margin-top: 0; margin-right: auto; margin-left: auto; order: 1;}

    .we, .message /* , .manual */ {margin-top: 200px;}

    .message {flex-direction: column; padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}
    .message .txt {text-align: center;}
    
    .ul-manual>li + li, .ul-manual>.step4 {margin-top: 200px;}
    .ul-manual>li:not(.step5) .inner {flex-direction: column; align-items: center;}
    .ul-manual>li:not(.step5):nth-child(odd) .txt-area {text-align: center; margin-left: auto; margin-right: auto;}
    .ul-manual>li:not(.step5):nth-child(even) .txt-area {text-align: center; margin-left: auto; margin-right: auto;}
    .ul-manual>li.step4 .txt-area {text-align: center !important; margin-left: auto !important; margin-right: auto !important;}
    .ul-manual img:not(.ul-lecture img) {position: relative;}

    .step1 img {bottom: unset; right: unset; margin-bottom: -374px;}
    .step2 img {bottom: unset; margin-top: 40px; margin-bottom: -200px;}
    .step3 img {top: unset; right: unset; margin-top: 40px;}
    .step4 .inner::before {right: unset; left: -180px;}
    .step4 .inner::after {background: linear-gradient(to right, #F5F5F5 0%, #F5F5F5 46%, #F5F5F500 100%); right: -180px;}
}

@media screen and (max-width:768px){
    /* .visual .title1 {display: flex; flex-direction: column; align-items: center; row-gap: 15px; padding-left: 0;}
    .visual .title1::before {position: relative; top: unset; left: unset;} */
    .visual .title1 {padding-left: 0;}
    .visual .title1::before {display: none;}

    .we, .message /* , .manual */ {margin-top: 120px;}
    .we img {width: 95%;}

    .step1 .inner {overflow-x: clip; overflow-y: visible;}
    .step1 img {width: 48rem; margin-bottom: -466px; margin-right: -30px;}
}

@media screen and (max-width:650px){
    .step4 .inner::before {width: 60%; background: linear-gradient(to left, #F5F5F5 0%, #F5F5F5 70%, #F5F5F500 100%); left: -5vw;}
    .step4 .inner::after {width: 60%; background: linear-gradient(to right, #F5F5F5 0%, #F5F5F5 70%, #F5F5F500 100%); right: -5vw;}
}

@media screen and (max-width:480px){
    .step1 img {width: 120vw; margin-bottom: -86.25vw; margin-right: -12.5vw;}
    .step2 img {margin-bottom: -184px; margin-left: -30px;}
}

@media screen and (max-width:360px){
    .step2 img {margin-bottom: -51.11111111111vw; margin-left: -8.33333333333vw;}
    .step3 img {width: 100%; height: auto;}
}