@charset "utf-8";

/* #content */
.img_box img {width: 100%;}
.block {display: block;}
.p_color {color: #9570FF;}

section > .inner {padding: 160px 16.66%; box-sizing: border-box;}
section .inner .title_text {font-weight: 700; font-size: 64px; letter-spacing: -1px; text-align: center; margin-bottom: 80px;}
section .inner .title_text .add_text {display: block; font-weight: 400; font-size: .63em; line-height: 1.2em; margin-bottom: .5em;}
section .inner .sub_title {font-size: 48px; font-weight: 700; line-height: 1.2em; letter-spacing: -1px; text-align: center;}
section .inner .sub_explain p {font-weight: 300; font-size: 32px; line-height: 1.2em; letter-spacing: -1px; text-align: center; margin-bottom: 1em;}
section .inner .sub_explain p:last-of-type {margin-bottom: 0;}
section .inner .sub_explain p strong {font-weight: 600;}


.sub_visual {width: 100%; height: calc(100vh - 100px); position: relative; color: #fff; font-weight: 700; font-size: 72px; line-height: 90px;
    background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden;}
.sub_visual .inner .mySwiper {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.sub_visual .inner .mySwiper .swiper-slide {display: flex; justify-content: center; align-items: center; text-align: center; 
    background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden;}
.sub_visual .inner .mySwiper .swiper-slide.visual01 {background-image: url(../images/img_visual01.png);}
.sub_visual .inner .mySwiper .swiper-slide.visual02 {background-image: url(../images/img_visual02.png);}
.sub_visual .inner .mySwiper .swiper-slide.visual03 {background-image: url(../images/img_visual03.png);}

.sub_visual .inner .slogan_wrap {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; 
    position: absolute; left: 50%; top: 50%; transform: translate3D(-50%, -50%, 0); z-index: 2;}
.sub_visual .inner .slogan_wrap [class^="slogan-"] {width: fit-contents; word-break: keep-all; white-space: nowrap;}
.sub_visual .inner .slogan_wrap .mySwiperTxt {width: 180px; height: 40%; margin: 0 1rem;}
.sub_visual .inner .slogan_wrap .mySwiperTxt .swiper-slide {display: flex; align-items: center; justify-content: center; 
    background: transparent; opacity: .5; transition: opacity .3s;}
.sub_visual .inner .slogan_wrap .mySwiperTxt .swiper-slide strong {display: inline-block; border-bottom: 6px solid #fff; transition: border .3s;}
.sub_visual .inner .slogan_wrap .mySwiperTxt .swiper-slide span {opacity: 0; transition: opacity .3s;}
.sub_visual .inner .slogan_wrap .mySwiperTxt .swiper-slide-active {opacity: 1;}
.sub_visual .inner .slogan_wrap .mySwiperTxt .swiper-slide-active span {opacity: 1;}


.definition {background: linear-gradient(0, #F0EBFF 0, #fff 100%);}
.definition .inner .img_box {width: 50%; margin: 0 auto 140px;}
.definition .inner .sub_title {margin: .8em 0;}
.definition .inner .sub_explain p {line-height: 1.8;}
.definition .inner ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.definition .inner ul li {background: rgba(225, 214, 255, .2); border: 1px solid #713FFF; border-radius: 30px; padding: 70px 10%; box-sizing: border-box;}
.definition .inner ul li .icon_box strong {display: block; font-weight: 500; font-size: 26px; line-height: 32px; letter-spacing: -1px; margin-bottom: 40px;}
.definition .inner ul li .icon_box .icon {display: inline-block; width: 70px; height: 70px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.definition .inner ul li .point_text {display: block; font-weight: 500; font-size: 36px; line-height: 52px; text-transform: uppercase; margin: 40px 0 20px;}
.definition .inner ul li p {font-size: 32px; line-height: 48px; letter-spacing: -1px; color: #2E3032;}


.history .inner {padding: 160px 13%;}
.history .inner .title_text {margin-bottom: 160px;}
.history .inner .history_wrap {position: relative; margin: 0 10%;}
.history .inner .history_wrap::before {content: ''; display: block; width: 2px; height: 100%; width: 2px; height: 100%; background: #E0D6FF; position: absolute; left: 80px; top: 28px;}
.history .inner .history_wrap #progressBar {width: 2px; height: 0; background: #713FFF; position: absolute; left: 80px; top: 28px;}
.history .inner .history_box {/* width: 80%; margin: 0 auto; */ padding-bottom: 114px; position: relative;}
/* .history .inner .history_box::before {content: ''; display: block; width: 2px; height: 99%; background: #E0D6FF; position: absolute; left: 80px; top: 1%;}
.history .inner .history_box::after {content: ''; display: block; width: 2px; height: 0; background: rgba(0,0,0,0); position: absolute; left: 80px; top: 1%; z-index: 1;
   animation: progressOn 15s linear Infinite;}
.history .inner .history_box.on::after {background: #713FFF;} */
.history .inner .history_box > li {display: flex; gap: 94px; margin-bottom: 194px; position: relative;}
.history .inner .history_box > li:last-child {margin-bottom: 0;}
.history .inner .history_box > li:last-child:before {content: ''; display: block; width: 12px; height: 12px; background: #fff; 
    border: 3px solid #713FFF; box-sizing: border-box; border-radius: 50%; position: absolute; left: 75px; bottom: -144px; z-index: 2;}
.history .inner .history_box li .part {flex-shrink: 0; width: 158px; height: 158px; border-radius: 50%; background-color: rgba(113, 63, 255, .2);
    font-weight: 600; font-size: 34px; text-align: center; transition: all .2s ease; position: relative; z-index: 2;}
.history .inner .history_box li .parts::before {content: ''; display: block; width: 100%; padding-top: 100%;}
.history .inner .history_box li .part strong {width: 82%; height: 82%; border-radius: 50%; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; color: #161617; background-color: #fff;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.history .inner .history_box li .part.end {background: none;}
.history .inner .history_box li .part.ing strong {background-color: #AA8CFF; color: #fff;}
.history .inner .history_box li .part.end strong {background-color: #AA8CFF; color: #fff;}

.history .inner .history_box li .detail {flex-grow: 1;}
.history .inner .history_box li .detail ul {margin-bottom: 40px;}
.history .inner .history_box li .detail ul li {font-size: 30px; line-height: 55px; letter-spacing: -1px; color: #2E3032; padding-left: 1rem; position: relative;}
.history .inner .history_box li .detail ul li::before {content: '•'; font-size: 1rem; background-color: transparent; position: absolute; left: 0; top: 0;}
.history .inner .history_box li .img_box img {border-radius: 30px;}


/* 프로그래스바 애니메이션 */
@keyframes progressOn {
    0% {height: 0%;}
    25% {height: 25%;}
    50% {height: 50%;}
    75% {height: 75%;}
    100% {height: 99%;}
}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section > .inner {padding: 150px 10%;}

    .history .inner {padding: 150px 5%;}
    .history .inner .history_wrap {margin: 0 5%;}
    /* .history .inner .history_box {width: 90%;} */
    .history .inner .history_box > li {gap: 48px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 150px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .inner .title_text {margin-bottom: 60px;}
    section .inner .sub_title {font-size: 36px; line-height: 48px;}
    section .inner .sub_explain p {font-size: 24px; line-height: 38px;}
    section > .inner {padding: 120px 5%;}

    .sub_visual {height: calc(var(--vh, 1vh) * 100 - 100px); font-size: 64px; line-height: 80px;}
    .sub_visual .inner .slogan_wrap .mySwiperTxt {width: 160px;}


    .definition .inner .img_box {width: 100%; margin: 0 auto 60px;}
    .definition .inner .sub_explain .block {display: inline;}
    .definition .inner .sub_explain i {display: block;}
    .definition .inner .sub_explain p {line-height: 1.4;}
    .definition .inner ul {gap: 16px;}
    .definition .inner ul li {padding: 40px 2%; text-align: center;}
    .definition .inner ul li .icon_box strong {font-size: 16px; line-height: 20px; margin-bottom: 24px;}
    .definition .inner ul li .icon_box .icon {width: 44px; height: 44px;}
    .definition .inner ul li .point_text {font-size: 22px; line-height: 32px; text-transform: uppercase; margin: 24px 0 12px;}
    .definition .inner ul li p {font-size: 20px; line-height: 30px;}


    .history .inner {padding: 120px 5%;}
    .history .inner .title_text {margin-bottom: 60px;}
    .history .inner .history_wrap {margin: 0;}
    .history .inner .history_wrap::before {left: 58px; top: 16px;}
    .history .inner .history_wrap #progressBar {left: 58px; top: 16px;}
    .history .inner .history_box {/* width: 100%;  */padding-bottom: 78px;}
    .history .inner .history_box::before {left: 58px;}
    .history .inner .history_box::after {left: 58px;}
    .history .inner .history_box > li:last-child:before {left: 53px; bottom: -100px;}
    .history .inner .history_box > li {gap: 20px; margin-bottom: 160px;}
    .history .inner .history_box li .part {width: 116px; height: 116px; font-size: 26px;}
    .history .inner .history_box li .part strong {width: 87%; height: 87%;}

    .history .inner .history_box li .detail ul {margin-bottom: 30px;}
    .history .inner .history_box li .detail ul li {font-size: 24px; line-height: 46px;}
    .history .inner .history_box li .detail ul li i {display: block;}
}
/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    section .inner .title_text {font-size: 34px; line-height: 44px; margin-bottom: 40px;}
    section .inner .sub_title {font-size: 22px; line-height: 1.2em; margin-bottom: 20px;}
    section .inner .sub_explain p {font-size: 16px; line-height: 24px;}
    section > .inner {padding: 60px 5%;}


    .sub_visual {height: calc(var(--vh, 1vh) * 100 - 129px); font-size: 34px; line-height: 44px;}
    .sub_visual .inner .slogan_wrap .mySwiperTxt {width: 80px; height: 188px;}
    .sub_visual .inner .slogan_wrap .mySwiperTxt .swiper-slide strong {border-width: 3px;}


    .definition .inner .img_box {margin: 0 auto 30px;}
    .definition .inner .sub_explain .block {display: inline;}
    .definition .inner .sub_explain i {display: block;}
    .definition .inner ul {grid-template-columns: repeat(1, 1fr); gap: 10px;}
    .definition .inner ul li {border-radius: 15px; padding: 20px 2%;}
    .definition .inner ul li .icon_box strong {font-size: 12px; line-height: 1.2em; margin-bottom: 12px;}
    .definition .inner ul li .icon_box .icon {width: 30px; height: 30px;}
    .definition .inner ul li .point_text {font-size: 18px; line-height: 20px; margin: 10px 0;}
    .definition .inner ul li .point_text .block {display: inline;}
    .definition .inner ul li p {font-size: 16px; line-height: 1.2em;}


    .history .inner {padding: 60px 5%;}
    .history .inner .title_text {margin-bottom: 30px;}
    .history .inner .history_wrap::before {width: 1px; left: 24.2px; top: 6.5px;}
    .history .inner .history_wrap #progressBar {width: 1px; left: 24.2px; top: 6.5px;}
    /* .history .inner .history_wrap #progressBar::before {width: 1px;} */
    .history .inner .history_box {padding-bottom: 40px; margin-bottom: 30px;}
    .history .inner .history_box::before {width: 1px; left: 24px;}
    .history .inner .history_box::after {width: 1px; left: 24px;}
    .history .inner .history_box > li:last-child:before {width: 6px; height: 6px; border: 1px solid #713FFF; left: 22px; bottom: -50px;}
    .history .inner .history_box > li {margin-bottom: 60px;}
    .history .inner .history_box li .part {width: 50px; height: 50px; font-size: 13px;}

    .history .inner .history_box li .detail ul {margin-bottom: 20px;}
    .history .inner .history_box li .detail ul li {font-size: 15px; line-height: 24px;}
    .history .inner .history_box li .detail ul li b {display: block;}
    .history .inner .history_box li .img_box img {border-radius: 15px;}
}