@charset "utf-8";

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

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;}
section .inner .sub_explain p {font-size: 28px; line-height: 42px; letter-spacing: -1px; text-align: center; margin-bottom: 1em;}
section .inner .sub_explain p:last-of-type {margin-bottom: 0;}


.sub_visual {width: 100%; height: calc(100vh - 100px); position: relative;
    background-image: url(../images/img_visual_bg.png); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sub_visual .inner {padding: 0;}
.sub_visual .inner h3 {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sub_visual .inner h3 .add_text {font-size: 34px; line-height: 50px;}
.sub_visual .inner .badge {width: 160px; height: 160px; background-color: rgba(255, 255, 255, .15); backdrop-filter: blur(15px); border-radius: 50%;
    position: absolute; bottom: 12.8vh; right: 16.66%; animation: rotate_badge 20s linear infinite;transform-origin: 50% 50%;}
.sub_visual .inner svg {width: 100%; height: 100%; fill: currentColor; transform-origin: center;}
.sub_visual .inner svg text {font-size: .8rem; letter-spacing: 0.26rem;}

@keyframes rotate_badge {
    100% {
        transform: rotate(360deg);
    }
}



.definition .inner h4 {font-size: 24px; line-height: 42px; font-weight: 500; letter-spacing: 1px; text-align: center;}
.definition .inner .title_text {margin: 24px 0;}
.definition .inner .img_box {margin-top: 80px;}
.definition .inner .img_box img {border-radius: 30px;}


.onlyone {background: linear-gradient(180deg, #E1D7FF 0%, #C5AFFF 100%);}
.onlyone .inner .title_text {font-size: 92px; line-height: normal; margin-bottom: 60px;}
.onlyone .inner .title_text .add_text {display: block; font-size: 0.43em; font-weight: 400; line-height: 1.2em; letter-spacing: -1px;}
.onlyone .inner ul {width: 80%; margin: 100px auto 0; display: flex; justify-content: center;}
.onlyone .inner ul li {width: 48%; position: relative;}
.onlyone .inner ul li::after {display: block; content: ''; padding-bottom: 100%;}
.onlyone .inner ul li > div {width: 105%; height: 105%; object-fit: cover; border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(15px);}
.onlyone .inner ul li:nth-child(1) > div {border: 1px solid rgba(255, 255, 255, 0.60); background-color: rgba(233, 233, 233, 0.50); z-index: 2;}
.onlyone .inner ul li:nth-child(2) > div {border: 1px solid rgba(113, 63, 255, 0.30); background-color: #9570FF; color: #fff; z-index: 1;}
.onlyone .inner ul li p span {display: block; font-size: 28px; font-weight: 400; margin-bottom: .8em;}
.onlyone .inner ul li p {font-size: 48px; font-weight: 700; line-height: normal; letter-spacing: -1px; text-align: center;}


.atoz {background-image: url(../images/img_atoz_bg.png); background-position: center top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; color: #fff;}
.atoz .inner .title_text {font-weight: 400; font-size: 50px; line-height: 70px; letter-spacing: -1px;}
.atoz .inner .title_text strong {font-weight: 600;}
.atoz .inner dl {text-align: center; margin-top: 90px;}
.atoz .inner dl dt {font-size: 36px; font-weight: 600; line-height: 48px; letter-spacing: -1px; margin-bottom: .8em;}
.atoz .inner dl dt span {display: block; font-weight: 700; font-size: 28px; margin-bottom: .8em;}
.atoz .inner dl dd {font-size: 24px; line-height: 36px; letter-spacing: -1px;}
.atoz .inner dl dd .block {display: inline;}

/* 부산점 */
.atoz.seomyeon {background-image: url(../images/img_atoz_bg_bu.png); background-position: center top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; color: #fff;}
.atoz.seomyeon .inner .title_text {font-weight: 400; font-size: 50px; line-height: 70px; letter-spacing: -1px;}
.atoz.seomyeon .inner .title_text strong {font-weight: 600;}
.atoz.seomyeon .inner dl {text-align: center; margin-top: 90px;}
.atoz.seomyeon .inner dl dt {font-size: 36px; font-weight: 600; line-height: 48px; letter-spacing: -1px; margin-bottom: .8em;}
.atoz.seomyeon .inner dl dt span {display: block; font-weight: 700; font-size: 28px; margin-bottom: .8em;}
.atoz.seomyeon .inner dl dd {font-size: 24px; line-height: 36px; letter-spacing: -1px;}
.atoz.seomyeon .inner dl dd .block {display: inline;}


.banner {background-color: #FAFAFA;}
.banner .inner {padding: 0 16.66%; display: flex; justify-content: center; align-items: center;}
.banner .inner > div {width: 50%;}
.banner .inner .img_box img {height: 100%; object-position: center bottom;}
.banner .inner .text_box {padding-left: 105px;}
.banner .inner .text_box p {font-size: 34px; line-height: 50px; letter-spacing: -1px; margin-bottom: 1em;}
.banner .inner .text_box strong {display: block; font-size: 64px; line-height: 80px; letter-spacing: -1px;}

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

    .banner .inner {padding: 0 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}

    .banner .inner {padding: 0 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .inner .sub_explain p {font-size: 32px; line-height: 48px;}
    section .inner .sub_explain p .block {display: inline;}
    section .inner .sub_explain p i {display: block;}
    section > .inner {padding: 120px 5%;}

    .sub_visual {height: calc(var(--vh, 1vh) * 100 - 100px);}
    .sub_visual .inner h3 .add_text {font-size: 32px; line-height: 48px;}
    .sub_visual .inner h3 i {display: block;}
    .sub_visual .inner .badge {width: 140px; height: 140px; bottom: 10.7vh; right: 5%;}
  

    .definition .inner h4 {font-size: 26px;}
    .definition .inner .title_text {margin: 40px 0;}
    .definition .inner .img_box {margin-top: 60px;}


    .onlyone .inner .title_text {font-size: 64px; margin-bottom: 40px;}
    .onlyone .inner .title_text .add_text {display: block; font-size: .63em; margin-bottom: .5em;}
    .onlyone .inner ul {width: 100%; margin: 70px auto 0;}
    .onlyone .inner ul li > div {width: 110%; height: 110%;}
    .onlyone .inner ul li p span {font-size: 24px; margin-bottom: .8em;}
    .onlyone .inner ul li p {font-size: 36px;}
    
    
    .atoz {background-image: url(../images/img_atoz_bg_tab.png); background-position: center;}
    .atoz .inner .title_text {font-size: 50px; line-height: 70px;}
    .atoz .inner .title_text i {display: block;}
    .atoz .inner dl dt {font-size: 40px; margin-bottom: .8em;}
    .atoz .inner dl dt span {font-size: 32px; line-height: 1em;}
    .atoz .inner dl dd {font-size: 28px; line-height: 42px;}
    .atoz .inner dl dd i {display: block;}

    /* 부산점 */
    .atoz.seomyeon {background-image: url(../images/img_atoz_bg_tab_bu.jpg); background-position: center;}
    .atoz.seomyeon .inner .title_text {font-size: 50px; line-height: 70px;}
    .atoz.seomyeon .inner .title_text i {display: block;}
    .atat.seomyeon .inner dl dt {font-size: 40px; margin-bottom: .8em;}
    .atoz.seomyeon .inner dl dt span {font-size: 32px; line-height: 1em;}
    .atoz.seomyeon .inner dl dd {font-size: 28px; line-height: 42px;}
    .atoz.seomyeon .inner dl dd i {display: block;}
    
    
    .banner .inner {padding: 120px 5% 0; flex-direction: column-reverse;}
    .banner .inner > div {width: 100%;}
    .banner .inner .text_box {padding-left: 0; text-align: center;}
    .banner .inner .text_box p {font-size: 40px; margin-bottom: 0.4em;}
    .banner .inner .text_box p .block {display: inline;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    section .inner .title_text {font-size: 34px;}
    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);}
    .sub_visual .inner h3 {font-size: 34px; line-height: 44px;}
    .sub_visual .inner h3 .add_text {font-size: 22px; line-height: 26px;}
    .sub_visual .inner .badge {width: 80px; height: 80px; bottom: 4.3vh;}


    .definition .inner h4 {font-size: 18px;}
    .definition .inner .title_text {margin: 0 0 30px;}
    .definition .inner .img_box {margin-top: 30px;}
    .definition .inner .img_box img {border-radius: 15px;}


    .onlyone .inner .title_text {font-size: 34px; line-height: 44px; margin-bottom: 20px;}
    .onlyone .inner ul {margin: 40px auto 0;}
    .onlyone .inner ul li p span {font-size: 14px; margin-bottom: .5em;}
    .onlyone .inner ul li p {font-size: 18px;}


    .atoz {background-image: url(../images/img_atoz_bg_mo.png);}
    .atoz .inner .title_text {font-size: 24px; line-height: 34px;}
    .atoz .inner dl {margin-top: 40px;}
    .atoz .inner dl dt {font-size: 22px; line-height: 30px; margin-bottom: .5em;}
    .atoz .inner dl dt span {font-size: 15.6px; letter-spacing: -0.488px; margin-bottom: .5em;}
    .atoz .inner dl dd {font-size: 18px; line-height: 24px;}
    .atoz .inner dl dd i {display: inline;}
    .atoz .inner dl dd i.block {display: block;}

    /* 부산점 */
    .atoz.seomyeon {background-image: url(../images/img_atoz_bg_mo_bu.png);}
    .atoz.seomyeon .inner .title_text {font-size: 24px; line-height: 34px;}
    .atoz.seomyeon .inner dl {margin-top: 40px;}
    .atoz.seomyeon .inner dl dt {font-size: 22px; line-height: 30px; margin-bottom: .5em;}
    .atoz.seomyeon .inner dl dt span {font-size: 15.6px; letter-spacing: -0.488px; margin-bottom: .5em;}
    .atoz.seomyeon .inner dl dd {font-size: 18px; line-height: 24px;}
    .atoz.seomyeon .inner dl dd i {display: inline;}
    .atoz.seomyeon .inner dl dd i.block {display: block;}


    .banner .inner {padding: 60px 5% 0;}
    .banner .inner .text_box p {font-size: 22px; line-height: 25px;}
    .banner .inner .text_box strong {font-size: 34px; line-height: 44px;}
}