@font-face {
    font-family: 'SUIT Variable';
    font-weight: 100 900;
    src: url('../../fonts/1st/SUIT-Variable.woff2') format('woff2-variations'),
    url("/assets/fonts/1st/SUIT-Variable.ttf") format("truetype");
}

@font-face {
    font-family: 'SUITE Variable';
    font-weight: 100 900;
    src: url('../../fonts/SUITE-Variable.woff2') format('woff2-variations'),
    url("/assets/fonts/SUITE-Variable.ttf") format("truetype");
}

.hidden {
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    height: 0;
    width: 0;
}


::-webkit-scrollbar-thumb{
    background: #AAB8CC;
}
* {
    scrollbar-color: #AAB8CC #fff;
}

body {
    font-family: 'SUITE Variable', sans-serif;
    font-weight: 400;
}

body img {
    vertical-align: top;
}

.wrap {
    background: #000;
}

.wrap > div {
    max-width: 720px;
    margin: 0 auto;
    background: url("/assets/images/2nd/all-bg.png?ver=01") no-repeat 0 22% #09133C;
    background-size: 100% auto;
}


/* Hero */
.wrap .hero {
    position: relative;
    aspect-ratio: 360 / 974;
    background: url("/assets/images/2nd/hero-bg.png?ver=02") no-repeat 0 0;
    background-size: 100% auto;
}
.wrap .hero .hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    height: clamp(56px, calc(56px + (56 * ((100vw - 360px) / (720 - 360)))), 112px);
    margin-bottom: clamp(56px, calc(56px + (8 * ((100vw - 360px) / (720 - 360)))), 16px);
}

.wrap .hero .hero-top h1 {
    width: clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px);
    height: clamp(19px, calc(19px + (19 * ((100vw - 360px) / (720 - 360)))), 38px);
}
.wrap .hero .hero-top h1 img {
    width: 100%;
    height: 100%;
}
.wrap .hero .hero-top > a {
    font-family: 'SUIT Variable', sans-serif;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(4px, calc(4px + (4 * ((100vw - 360px) / (720 - 360)))), 8px);
    width: clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px);
    height: clamp(32px, calc(32px + (32 * ((100vw - 360px) / (720 - 360)))), 64px);
    border-radius: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    background: #1F7AFF;
    color: #fff;
    font-weight: 600;
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
}
.wrap .hero .hero-top a:after {
    content: "";
    width: clamp(11px, calc(11px + (11 * ((100vw - 360px) / (720 - 360)))), 22px);
    height: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    background: url("/assets/images/2nd/download.png") no-repeat 0 0;
    background-size: 100% 100%;
}

.wrap .hero .hero-title p {
    text-align: center;
    text-indent: -9999px;
    overflow: hidden;
}
.wrap .hero .hero-title p:first-child {
    margin-bottom: clamp(7px, calc(7px + (7 * ((100vw - 360px) / (720 - 360)))), 14px);
}
.wrap .hero .hero-title p:first-child img {
    width: clamp(230px, calc(230px + (230 * ((100vw - 360px) / (720 - 360)))), 460px);
    height: clamp(128px, calc(128px + (128 * ((100vw - 360px) / (720 - 360)))), 256px);
}
.wrap .hero .hero-title p:last-child img {
    width: clamp(294px, calc(294px + (294 * ((100vw - 360px) / (720 - 360)))), 588px);
    height: clamp(36px, calc(36px + (36 * ((100vw - 360px) / (720 - 360)))), 72px);
}

.wrap .hero .hero-bottom {
    padding: 0 clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    position: absolute;
    left: 0;
    bottom: clamp(80px, calc(80px + (80 * ((100vw - 360px) / (720 - 360)))), 160px);
    width: 100%;
    box-sizing: border-box;
}
.wrap .hero .hero-bottom > p {
    margin-bottom: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    text-align: center;
    color: #fff;
    font-size: clamp(22px, calc(22px + (22 * ((100vw - 360px) / (720 - 360)))), 44px);
    line-height: clamp(24px, calc(24px + (24 * ((100vw - 360px) / (720 - 360)))), 48px);
    font-weight: 600;
}
.wrap .hero .hero-bottom > ul {
    background: #1046B5;
    border-radius: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    margin-bottom: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    padding: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px)
    0
    clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px)
    clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.wrap .hero .hero-bottom > ul li {
    position: relative;
    padding-left: clamp(23px, calc(23px + (23 * ((100vw - 360px) / (720 - 360)))), 46px);
    color: #fff;
    font-weight: 600;
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.wrap .hero .hero-bottom > ul li em {
    font-weight: 900;
    color: #17FA73;
}
.wrap .hero .hero-bottom > ul li span {
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
    font-weight: 500;
}
.wrap .hero .hero-bottom > ul li:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url("/assets/images/2nd/hero-list-bg.png") no-repeat 0 0;
    background-size: 100% 100%;
    width: clamp(14.5px, calc(14.5px + (14.5 * ((100vw - 360px) / (720 - 360)))), 29px);
    height: clamp(13px, calc(13px + (13 * ((100vw - 360px) / (720 - 360)))), 26px);
}
.wrap .hero .hero-bottom > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrap .hero .hero-bottom > div a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(155px, calc(155px + (155 * ((100vw - 360px) / (720 - 360)))), 310px);
    height: clamp(46px, calc(46px + (46 * ((100vw - 360px) / (720 - 360)))), 92px);
    border-radius: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    font-size: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
    font-weight: 800;
    text-decoration: none;
}
.wrap .hero .hero-bottom > div a:first-child {
    color: #000;
    background: #00FFFF;
}
.wrap .hero .hero-bottom > div a:last-child {
    color: #fff;
    background: #00A1FF;
}


/* Floating Menu */
.wrap > div header {
    position: sticky;
    top: 0;
    left: 0;
    background: #1046B5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 100;
}

.wrap > div header.active {
    opacity: 1;
    visibility: visible;
}
.wrap > div header > p img {
    width: clamp(80px, calc(80px + (80 * ((100vw - 360px) / (720 - 360)))), 160px);
    height: auto;
}
.wrap > div header > ul {
    display: flex;
    align-items: center;
}
.wrap > div header > ul > li {
    flex: 1 1 0;
    width: 20%;
    text-align: center;
}
.wrap > div header > ul > li img {
    width: clamp(45px, calc(45px + (45 * ((100vw - 360px) / (720 - 360)))), 90px);
    height: clamp(29.5px, calc(29.5px + (29.5 * ((100vw - 360px) / (720 - 360)))), 59px);
}
.wrap > div header > ul > li > a {
    font-family: 'SUIT Variable', sans-serif;
    display: block;
    text-align: center;
    color: #fff;
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    font-weight: 500;
    box-sizing: border-box;
    border-bottom: 3px solid #1046B5;
    text-decoration: none;
    height: clamp(54px, calc(54px + (54 * ((100vw - 360px) / (720 - 360)))), 108px);
    line-height: clamp(54px, calc(54px + (54 * ((100vw - 360px) / (720 - 360)))), 108px);
}

.wrap > div header > ul > li.active > a {
    border-bottom: clamp(3px, calc(3px + (3 * ((100vw - 360px) / (720 - 360)))), 6px) solid #17FA73;
}


/* 혜택 */
.wrap .benefit {
    padding: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px) 0;
    background: #09133C;
}
.wrap .benefit h2 {
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.wrap .benefit > p {
    text-align: center;
    margin-bottom: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}
.wrap .benefit > p img {
    width: clamp(206.5px, calc(206.5px + (206.5 * ((100vw - 360px) / (720 - 360)))), 413px);
    height: clamp(83.5px, calc(83.5px + (83.5 * ((100vw - 360px) / (720 - 360)))), 167px);
}
.wrap .benefit .tab {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(6px, calc(6px + (6 * ((100vw - 360px) / (720 - 360)))), 12px) clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    margin-bottom: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}

.wrap .benefit .tab li button {
    cursor: pointer;
    font-weight: 600;
    color: #E9E9E9;
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    letter-spacing: -2%;
    background: none;
    padding: 0;
    border: clamp(1px, calc(1px + (1 * ((100vw - 360px) / (720 - 360)))), 2px) solid #E9E9E9;
    box-sizing: border-box;
    width: clamp(84px, calc(84px + (84 * ((100vw - 360px) / (720 - 360)))), 168px);
    height: clamp(27px, calc(27px + (27 * ((100vw - 360px) / (720 - 360)))), 54px);
    border-radius: clamp(60px, calc(60px + (60 * ((100vw - 360px) / (720 - 360)))), 120px);
    overflow: hidden;
    line-height: 100%;
}

.wrap .benefit .tab li.active button {
    border-color: #17FA73;
    background: #17FA73;
    color: #000;
}

.wrap .benefit .benefit-tab-detail {
    padding: 0 clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}

.wrap .benefit .benefit-tab-detail ul {
    flex-direction: column;
    gap: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px) 0;
    display: none;
}
.wrap .benefit .benefit-tab-detail ul.active {
    display: flex;
}
.wrap .benefit .benefit-tab-detail > ul > li {
    padding: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    border-radius: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px) clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px);
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-01-01 {
    background-image: url("/assets/images/2nd/benefit-01-01.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-01-02 {
    background-image: url("/assets/images/2nd/benefit-01-02.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-01-03 {
    background-image: url("/assets/images/2nd/benefit-01-03.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-01-04 {
    background-image: url("/assets/images/2nd/benefit-03-03.png");
    background-position: 100% 100%;
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-01-05 {
    background-image: url("/assets/images/2nd/benefit-01-05.png");
}

.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-02-01 {
    background-image: url("/assets/images/2nd/benefit-02-01.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-02-02 {
    background-image: url("/assets/images/2nd/benefit-02-02.png");
}

.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-03-01 {
    background-image: url("/assets/images/2nd/benefit-03-01.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-03-02 {
    background-image: url("/assets/images/2nd/benefit-03-02.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-03-03 {
    background-image: url("/assets/images/2nd/benefit-03-03.png");
    background-position: 100% 100%;
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-03-04 {
    background-image: url("/assets/images/2nd/benefit-03-04.png");
}

.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-04-01 {
    background-image: url("/assets/images/2nd/benefit-04-01.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-04-02 {
    background-image: url("/assets/images/2nd/benefit-04-02.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-04-03 {
    background-image: url("/assets/images/2nd/benefit-04-03.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-04-04 {
    background-image: url("/assets/images/2nd/benefit-04-04.png");
}

.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-05-01 {
    background-image: url("/assets/images/2nd/benefit-05-01.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-05-02 {
    background-image: url("/assets/images/2nd/benefit-05-02.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-05-03 {
    background-image: url("/assets/images/2nd/benefit-05-03.png");
}
.wrap .benefit .benefit-tab-detail > ul > li.benefit-detail-05-04 {
    background-image: url("/assets/images/2nd/benefit-05-04.png");
}

.wrap .benefit .benefit-tab-detail > ul > li > div {
    text-align: center;
}
.wrap .benefit .benefit-tab-detail > ul > li > div > p:nth-child(1) {
    color: #000;
    font-weight: 700;
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
}
.wrap .benefit .benefit-tab-detail > ul > li > div > p:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px) 0;
}
.wrap .benefit .benefit-tab-detail > ul > li > div > p:nth-child(2) img:first-child {
    width: clamp(83px, calc(83px + (83 * ((100vw - 360px) / (720 - 360)))), 166px);
    height: clamp(47px, calc(47px + (47 * ((100vw - 360px) / (720 - 360)))), 94px);
}
.wrap .benefit .benefit-tab-detail > ul > li > div > p:nth-child(2) img:last-child {
    width: clamp(121.5px, calc(121.5px + (121.5 * ((100vw - 360px) / (720 - 360)))), 243px);
    height: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}
.wrap .benefit .benefit-tab-detail > ul > li > div > p:nth-child(3) {
    font-weight: 600;
    font-size: clamp(11px, calc(11px + (11 * ((100vw - 360px) / (720 - 360)))), 22px);
    line-height: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    letter-spacing: -2%;
}

.wrap .benefit .benefit-tab-detail > ul > li > p:nth-child(1) {
    font-weight: 800;
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    font-size: clamp(18px, calc(18px + (18 * ((100vw - 360px) / (720 - 360)))), 36px);
    letter-spacing: -2%;
    color: #000000;
    margin-bottom: clamp(8px, calc(8px + (8 * ((100vw - 360px) / (720 - 360)))), 16px);
}
.wrap .benefit .benefit-tab-detail > ul > li > p:nth-child(1) em {
    display: block;
    color: #1F7AFF;
}
.wrap .benefit .benefit-tab-detail > ul > li > p:nth-child(1) em span {
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
}
.wrap .benefit .benefit-tab-detail > ul > li > p:nth-child(2) {
    font-weight: 600;
    color: #000;
    font-size: clamp(11px, calc(11px + (11 * ((100vw - 360px) / (720 - 360)))), 22px);
    line-height: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.wrap .benefit .benefit-tab-detail > ul > li > p:nth-child(2) span {
    font-weight: 800;
}
.wrap .benefit .benefit-tab-detail > ul > li > p:nth-child(2) em {
    font-weight: 800;
    color: #1F7AFF;
}

/* Product */
.wrap .product > p {
    padding-top: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px);
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.wrap .product > h2 {
    text-align: center;
}
.wrap .product > h2 img {
    width: clamp(218.5px, calc(218.5px + (218.5 * ((100vw - 360px) / (720 - 360)))), 437px);
    height: clamp(40.5px, calc(40.5px + (40.5 * ((100vw - 360px) / (720 - 360)))), 81px);
}
.wrap .product > div {
    position: relative;
}
.wrap .product > div > a {
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - clamp(120px, calc(120px + (120 * ((100vw - 360px) / (720 - 360)))), 240px));
    height: auto;
    aspect-ratio: 16 / 5;
}
.wrap .product > div > a.product_01 {
    top: clamp(135px, calc(135px + (135 * ((100vw - 360px) / (720 - 360)))), 270px);
}
.wrap .product > div > a.product_02 {
    top: clamp(221px, calc(221px + (221 * ((100vw - 360px) / (720 - 360)))), 442px);
}
.wrap .product > div > a.product_03 {
    top: clamp(306px, calc(306px + (306 * ((100vw - 360px) / (720 - 360)))), 612px);
}

.wrap .product > div img {
    width: 100%;
    height: auto;
}

/* LEVEL */
.wrap .level {
    position: relative;
    margin-top: clamp(-174px, calc(-87px + (-87 * ((100vw - 360px) / (720 - 360)))), -87px);
    padding-bottom: clamp(35px, calc(35px + (35 * ((100vw - 360px) / (720 - 360)))), 70px);
}
.wrap .level > p {
    /*padding-top: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px);*/
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.wrap .level > h2 {
    text-align: center;
    margin-bottom: clamp(2px, calc(2px + (2 * ((100vw - 360px) / (720 - 360)))), 4px);
}
.wrap .level > h2 img {
    width: clamp(193px, calc(193px + (193 * ((100vw - 360px) / (720 - 360)))), 386px);
    height: clamp(34.5px, calc(34.5px + (34.5 * ((100vw - 360px) / (720 - 360)))), 69px);
}

.wrap .level > div {
    padding: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.wrap .level > div > ul {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px) 0;
}
.wrap .level > div > ul > li {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 20px 50%;
    background-size: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px) auto;
    border-radius: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
}
.wrap .level > div > ul > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(53px, calc(53px + (53 * ((100vw - 360px) / (720 - 360)))), 106px);
    text-decoration: none;
    color: #000;
    letter-spacing: -2%;
    font-weight: 800;
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    background: url("/assets/images/2nd/level-arrow.png") no-repeat calc(100% - 20px) 50%;
    background-size: clamp(7px, calc(7px + (7 * ((100vw - 360px) / (720 - 360)))), 14px) auto;
}
.wrap .level > div > ul > li.list-01 {
    background-image: url("/assets/images/2nd/level-01.png?ver=01");
}
.wrap .level > div > ul > li.list-02 {
    background-image: url("/assets/images/2nd/level-02.png?ver=01");
}
.wrap .level > div > ul > li.list-03 {
    background-image: url("/assets/images/2nd/level-03.png?ver=01");
}
.wrap .level > div > ul > li.list-04 {
    background-image: url("/assets/images/2nd/level-04.png?ver=01");
}
.wrap .level > div > ul > li.list-05 {
    background-image: url("/assets/images/2nd/level-05.png?ver=01");
}
.wrap .level > div > ul > li.list-06 {
    background-image: url("/assets/images/2nd/level-06.png?ver=01");
}
.wrap .level > div > ul > li > div {
    padding-bottom: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    text-align: center;
}
.wrap .level > div > ul > li > div p:first-child {
    color: #000;
    font-weight: 700;
    margin-bottom: clamp(8px, calc(8px + (8 * ((100vw - 360px) / (720 - 360)))), 16px);
    font-size: clamp(11px, calc(11px + (11 * ((100vw - 360px) / (720 - 360)))), 22px);
}
.wrap .level > div > ul > li > div p:last-child {
    color: #1F7AFF;
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    line-height: clamp(18px, calc(18px + (18 * ((100vw - 360px) / (720 - 360)))), 36px);
    font-weight: 800;
}

/* Event */
.wrap .event {
    position: relative;
    padding: 0 0 clamp(80px, calc(80px + (80 * ((100vw - 360px) / (720 - 360)))), 160px);
}
.wrap .event .comming-soon {
    position: absolute;
    top: clamp(166px, calc(166px + (166 * ((100vw - 360px) / (720 - 360)))), 332px);
    left: 0;
    display: none;
    width: 100%;
    height: calc(100% - clamp(166px, calc(166px + (166 * ((100vw - 360px) / (720 - 360)))), 332px));
    background-color: #060F34CC;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wrap .event.end .comming-soon {
    display: block;
}
.wrap .event .comming-soon > div {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
}
.wrap .event .comming-soon > div .end-text-01 {
    margin-bottom: clamp(4px, calc(4px + (4 * ((100vw - 360px) / (720 - 360)))), 8px);
}
.wrap .event .comming-soon > div .end-text-01 img {
    width: 100%;
    height: auto;
}
.wrap .event .comming-soon > div .end-text-02 {
    font-weight: 800;
    font-family: 'SUIT Variable', sans-serif;
    color: #fff;
    font-size: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    margin-bottom: clamp(26px, calc(26px + (26 * ((100vw - 360px) / (720 - 360)))), 52px);
    letter-spacing: -3%;
}
.wrap .event .comming-soon > div .end-text-02 span {
    font-size: clamp(44px, calc(44px + (44 * ((100vw - 360px) / (720 - 360)))), 88px);
}
.wrap .event .comming-soon > div .end-text-02 em {
    color: #17FA73;
}
.wrap .event .comming-soon > div .end-text-03 {
    color: #fff;
    font-weight: 900;
    font-size: clamp(48px, calc(48px + (48 * ((100vw - 360px) / (720 - 360)))), 96px);
}

.wrap .event > p.npay {
    text-align: center;
}
.wrap .event > p.npay img {
    width: clamp(254px, calc(254px + (254 * ((100vw - 360px) / (720 - 360)))), 508px);
    height: clamp(22px, calc(22px + (22 * ((100vw - 360px) / (720 - 360)))), 44px);
}
.wrap .event > p.text {
    padding-top: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.wrap .event > h2 {
    text-align: center;
    margin-bottom: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}
.wrap .event > h2 img {
    width: clamp(227px, calc(227px + (227 * ((100vw - 360px) / (720 - 360)))), 454px);
    height: clamp(76px, calc(76px + (76 * ((100vw - 360px) / (720 - 360)))), 152px);
}
.wrap .event > p.bg {
    margin-bottom: clamp(54px, calc(54px + (54 * ((100vw - 360px) / (720 - 360)))), 108px);
}
.wrap .event > p.bg img {
    width: 100%;
    height: auto;
}
.wrap .event > ul > li.event-01 h3 {
    text-align: center;
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.wrap .event > ul > li.event-01 h3 img {
    width: clamp(227px, calc(227px + (227 * ((100vw - 360px) / (720 - 360)))), 454px);
    height: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px);
}
.wrap .event > ul > li.event-01 > a {
    text-decoration: none;
}
.wrap .event > ul > li.event-01 > a > div {
    margin-bottom: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    padding: 0 clamp(38px, calc(38px + (38 * ((100vw - 360px) / (720 - 360)))), 76px);
}
.wrap .event > ul > li.event-01 > a > div > div {
    border-radius: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px 0;
    aspect-ratio: 284 / 91;
    width: 100%;
    height: auto;
    background: url("/assets/images/2nd/event-line.png") no-repeat 50% 0 #fff;
    background-size: clamp(226px, calc(226px + (226 * ((100vw - 360px) / (720 - 360)))), 452px) clamp(1px, calc(1px + (1 * ((100vw - 360px) / (720 - 360)))), 2px);
}
.wrap .event > ul > li.event-01 > a > div > div:first-child {
    background-image: none;
}
.wrap .event > ul > li.event-01 > a > div > div h4 {
    font-weight: 800;
    font-size: clamp(18px, calc(18px + (18 * ((100vw - 360px) / (720 - 360)))), 36px);
    line-height: clamp(22px, calc(22px + (22 * ((100vw - 360px) / (720 - 360)))), 44px);
    letter-spacing: -2%;
    color: #1F7AFF;
}
.wrap .event > ul > li.event-01 > a > div > div p {
    text-align: center;
    color: #000;
    font-size: clamp(11px, calc(11px + (11 * ((100vw - 360px) / (720 - 360)))), 22px);
    line-height: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    letter-spacing: -2%;
    font-weight: 600;
}

.wrap .event > ul > li.event-02 {
    margin-top: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px);
}
.wrap .event > ul > li.event-02 h3 {
    text-align: center;
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.wrap .event > ul > li.event-02 h3 img {
    width: clamp(232px, calc(232px + (232 * ((100vw - 360px) / (720 - 360)))), 464px);
    height: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px);
}
.wrap .event > ul > li.event-02 > a {
    text-decoration: none;
}
.wrap .event > ul > li.event-02 > a > div {
    text-align: center;
    padding: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px)  0;
    margin: 0 clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    border: clamp(1px, calc(1px + (1 * ((100vw - 360px) / (720 - 360)))), 2px) dashed #fff;
    border-radius: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.wrap .event > ul > li.event-02 > a > div > p:first-child {
    color: #fff;
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    line-height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    font-weight: 700;
}
.wrap .event > ul > li.event-02 > a > div > p:first-child em {
    color: #17FA73;
}
.wrap .event > ul > li.event-02 > a > div > p:first-child em span {
    font-weight: 400;
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
}

.wrap .event > ul > li.event-02 > a > div > p:nth-child(2) {
    color: #fff;
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
}
.wrap .event > ul > li.event-02 > a >  p.bg2 {
    padding: 0 clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    margin-top: clamp(4px, calc(4px + (4 * ((100vw - 360px) / (720 - 360)))), 8px);
    margin-bottom: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
}
.wrap .event > ul > li.event-02 > a > p.bg2 img {
    width: 100%;
    height: auto;
}
.wrap .event > ul > li > a > p {
    padding: 0 clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    text-align: center;
    margin-bottom: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
}
.wrap .event > ul > li.event-01 > a > p {
    margin-bottom: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}

.wrap .event > ul > li > a > p {
    text-decoration: underline;
    letter-spacing: -2%;
    font-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    font-weight: 700;
    color: #fff;
}


/* FAQ */
.wrap > div .faq {
    padding: clamp(80px, calc(80px + (80 * ((100vw - 360px) / (720 - 360)))), 160px) clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    background: #f5f5f5;
    font-family: 'SUIT Variable', sans-serif;
}

.wrap > div .faq h1 {
    color: #0576FF;
    font-weight: 900;
    font-size: clamp(37px, calc(37px + (37 * ((100vw - 360px) / (720 - 360)))), 74px);
    line-height: clamp(38px, calc(38px + (38 * ((100vw - 360px) / (720 - 360)))), 76px);
    margin-bottom: clamp(35px, calc(35px + (35 * ((100vw - 360px) / (720 - 360)))), 70px);
    text-align: center;
}

.wrap > div .faq > div {
    background: #fff;
    border-radius: 16px;
    padding: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px) clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px) 0;
}

.wrap > div .faq > div > dl dt {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000;
    font-size: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
    font-weight: 900;
    line-height: clamp(19px, calc(19px + (19 * ((100vw - 360px) / (720 - 360)))), 38px);
    border-bottom: 1px solid #DCDCDC;
    padding-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    letter-spacing: -3%;
}

.wrap > div .faq > div > dl dt img {
    width: clamp(13px, calc(13px + (13 * ((100vw - 360px) / (720 - 360)))), 26px);
    height: auto;
    transform: rotate(0);
    transition: transform ease-in-out 0.3s;
}

.wrap > div .faq > div > dl.on dt img {
    transform: rotate(-180deg);
}

.wrap > div .faq > div > dl dd {
    margin-top: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    font-weight: 500;
    line-height: clamp(17px, calc(17px + (17 * ((100vw - 360px) / (720 - 360)))), 34px);
    display: none;
    overflow: hidden;
    letter-spacing: -3%;
}
.wrap > div .faq > div > dl dd .small {
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
}

.wrap > div .faq > div > dl dd a {
    color: #0576FF;
    text-decoration: underline;
    font-weight: 800;
}

.wrap > div .faq > div > dl dd a span {
    font-weight: 400;
}


.wrap > div footer {
    font-family: 'SUIT Variable', sans-serif;
    background: #1C1C1C;
    padding: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px) clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    font-weight: 300;
    color: #D3D3D3;
    font-size: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    line-height: clamp(16px, calc(17px + (17 * ((100vw - 360px) / (720 - 360)))), 32px);
    letter-spacing: -5%;
}
.wrap > div footer > div h3 {
    color: #E5E5E5;
    font-weight: 700;
}

.wrap > div footer > div a {
    text-decoration: none;
    color: #D3D3D3;
}
.wrap > div footer > div > ul > li {
    margin-bottom: -3px;
}
.wrap > div footer > div > ul > li:last-child {
    margin-bottom: 0;
}
.wrap > div footer > div > ul > li > span.dot {
    font-weight: 900;
    padding: 0 clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 7px);
}
.wrap > div footer > div > ul > li > ul {
    padding-left: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.wrap > div footer > div.small > ul > li {
    display: flex;
    font-weight: 300;
    font-size: clamp(8px, calc(8px + (8 * ((100vw - 360px) / (720 - 360)))), 16px);
    line-height: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
}


.wrap > div .sns {
    font-family: 'SUIT Variable', sans-serif;
    padding: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px) 20px clamp(95px, calc(95px + (95 * ((100vw - 360px) / (720 - 360)))), 190px);
    background: #D5D5D5;
}

.wrap > div .sns > ul {
    display: flex;
    gap: 0 clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    align-items: center;
    justify-content: center;
}

.wrap > div .sns > ul li img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    max-width: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}

.wrap > div .sns > p {
    margin-top: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    text-align: center;
    font-weight: 500;
    color: #737373;
    font-size: clamp(8px, calc(8px + (8 * ((100vw - 360px) / (720 - 360)))), 16px);
}

.wrap > div .floating-button {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    text-align: center;
    max-width: 720px;
    transform: translateX(-50%);
    transition: opacity 0.8s ease-in-out;
    z-index: 100;
    display: flex;
    align-items: center;
}

.wrap > div .floating-button.active {
    opacity: 1;
    pointer-events: auto; /* 보일 때 클릭 가능 */
}

/*.wrap > div .floating-button button {
    border: none;
    padding: 0;
    background: none;
    position: absolute;
    top: clamp(-96px, calc(-53px + (-53 * ((100vw - 360px) / 360))), -53px);
    right: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}*/

.wrap > div .floating-button button img {
    /*width: clamp(38px, calc(38px + (38 * ((100vw - 360px) / (720 - 360)))), 76px);*/
}

.wrap > div .floating-button img {
    vertical-align: top;
    width: 100%;
}

/* LEVEL */
.level-wrap {
    background: #000;
}
.level-wrap > main {
    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(50px, calc(50px + (50 * ((100vw - 360px) / (720 - 360)))), 100px) clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.level-wrap > main.level-01 {
    background: #EFE5FE;
}

.level-wrap > main.level-01 .level-01-bottom-section {
    padding: 0;
    aspect-ratio: 640 / 644;
    background: url("/assets/images/2nd/levelUp/level-01/level-01-bottom-section-bg.png") no-repeat 0 0;
    background-size: 100% 100%;
}
.level-wrap > main.level-01 .level-01-bottom-section h2 {
    display: block;
    text-align: center;
    color: #fff;
    font-size: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    line-height: clamp(23px, calc(23px + (23 * ((100vw - 360px) / (720 - 360)))), 46px);
    font-weight: 800;
    margin-top: clamp(36px, calc(36px + (36 * ((100vw - 360px) / (720 - 360)))), 72px);
    margin-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.level-wrap > main.level-01 .level-01-bottom-section h2 span {
    color: #8EF4FF;
}
.level-wrap > main.level-01 .level-01-bottom-section > p {
    justify-content: center;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0 clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    font-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    line-height: clamp(23px, calc(23px + (23 * ((100vw - 360px) / (720 - 360)))), 46px);
    margin-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    font-weight: 800;
}
.level-wrap > main.level-01 .level-01-bottom-section > p img {
    width: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    height: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.level-wrap > main.level-01 .level-01-bottom-section > div {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    line-height: clamp(18px, calc(18px + (18 * ((100vw - 360px) / (720 - 360)))), 36px);
}

.level-wrap > main.level-02 {
    background: #EDF6E2;
}
.level-wrap > main.level-03 {
    background: #DAECED;
}
.level-wrap > main.level-04 {
    background: #CAECEA;
}
.level-wrap > main.level-05 {
    background: #F1EFE1;
}
.level-wrap > main.level-06 {
    background: #EAF2FF;
}


.level-wrap > main > h1 {
    text-align: center;
    color: #000;
    font-size: clamp(34px, calc(34px + (34 * ((100vw - 360px) / (720 - 360)))), 68px);
    font-weight: 800;
    line-height: clamp(38px, calc(38px + (38 * ((100vw - 360px) / (720 - 360)))), 76px);
}
.level-wrap > main > h1 > span {
    font-weight: 900;
}
.level-wrap > main.level-01 > h1 > span {
    color: #8A38F5;
}
.level-wrap > main.level-02 > h1 > span {
    color: #21AE5A;
}
.level-wrap > main.level-03 > h1 > span {
    color: #1F7AFF;
}
.level-wrap > main.level-04 > h1 > span {
    color: #009C92;
}
.level-wrap > main.level-05 > h1 > span {
    color: #E88137;
}
.level-wrap > main.level-06 > h1 > span {
    color: #004BE5;
}

.level-wrap > main > p {
    text-align: center;
    margin: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px) 0;
}
.level-wrap > main > p img {
    height: auto;
}
.level-wrap > main.level-01 > p img {
    width: clamp(250px, calc(250px + (250 * ((100vw - 360px) / (720 - 360)))), 500px);
}
.level-wrap > main.level-02 > p img {
    width: clamp(270px, calc(270px + (270 * ((100vw - 360px) / (720 - 360)))), 540px);
}
.level-wrap > main.level-03 > p img {
    width: clamp(283px, calc(283px + (283 * ((100vw - 360px) / (720 - 360)))), 566px);
}
.level-wrap > main.level-04 > p img {
    width: clamp(268px, calc(268px + (268 * ((100vw - 360px) / (720 - 360)))), 536px);
}
.level-wrap > main.level-05 > p img {
    width: clamp(270px, calc(270px + (270 * ((100vw - 360px) / (720 - 360)))), 540px);
}
.level-wrap > main.level-06 > p img {
    width: clamp(280px, calc(280px + (280 * ((100vw - 360px) / (720 - 360)))), 560px);
}

.level-wrap > main > div {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px) 0;
}
.level-wrap > main > div > section {
    background: #fff;
    padding: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px) clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    border-radius: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
}
.level-wrap > main > div > section.px-0 {
    padding: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px) 0;
}

.level-wrap > main > div > section > h2 {
    display: flex;
    justify-content: center;
    gap: 0 clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    align-items: center;
    color: #000;
    font-size: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    font-weight: 800;
    margin-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.level-wrap > main > div > section > h2 img {
    width: clamp(20px, calc(20px + (20 * ((100vw - 360px) / (720 - 360)))), 40px);
    height: auto;
}

.level-wrap > main > div > section .image {
    text-align: center;
    margin-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.level-wrap > main.level-01 > div > section .image img {
    width: clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px);
    height: auto;
}
.level-wrap > main.level-02 > div > section .image img {
    width: 100%;
    height: auto;
}
.level-wrap > main.level-02 > div > section .image2 {
    margin-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    text-align: center;
}
.level-wrap > main.level-02 > div > section .image2 img {
    width: clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px);
    height: auto;
}
.level-wrap > main.level-02 > div > section .table {
    border-radius: clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    border: 1px solid #E4E4E4;
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
    font-weight: 700;
    overflow: hidden;
    width: clamp(240px, calc(240px + (240 * ((100vw - 360px) / (720 - 360)))), 480px);
    margin: 0 auto;
}
.level-wrap > main.level-02 > div > section .table .head {
    display: inline-flex;
    background: #E6FBEF;
    text-align: center;
    color: #000;

}
.level-wrap > main.level-02 > div > section .table .head p {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 3;
    width: clamp(80px, calc(80px + (80 * ((100vw - 360px) / (720 - 360)))), 160px);
    height: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}
.level-wrap > main.level-02 > div > section .table .body {
    display: inline-flex;
    text-align: center;
    color: #000;
}
.level-wrap > main.level-02 > div > section .table .body p {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 3;
    width: clamp(80px, calc(80px + (80 * ((100vw - 360px) / (720 - 360)))), 160px);
    height: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
}
.level-wrap > main.level-02 > div > section .table .body p:first-child {
    background: #F3F3F3;
}

.level-wrap > main > div > section .text {
    color: #000;
    font-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    font-weight: 600;
    line-height: clamp(18px, calc(18px + (18 * ((100vw - 360px) / (720 - 360)))), 36px);
    text-align: center;
    margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}
.level-wrap > main > div > section .text.text-image img {
    margin-top: clamp(1.5px, calc(1.5px + (1.5 * ((100vw - 360px) / (720 - 360)))), 3px);
    width: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    height: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.level-wrap > main > div > section .text span {
    color: #1F7AFF;
}
.level-wrap > main > div > section .text:last-child {
    margin-bottom: 0;
}

.level-wrap > main > div > section .small {
    text-align: center;
    color: #848484;
    font-weight: 600;
    line-height: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
}
.level-wrap > main > div > section .small.small2 {
    line-height: clamp(19px, calc(19px + (19 * ((100vw - 360px) / (720 - 360)))), 38px);
}

.level-wrap > main > div > section > dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D4D4D4;
    padding-bottom: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
    margin-bottom: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px);
}
.level-wrap > main > div > section > dl:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.level-wrap > main > div > section > dl > dt {
    color: #000;
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    line-height: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px);
    font-weight: 700;
}
.level-wrap > main > div > section > dl > dd {
    aspect-ratio: 105 / 35;
    width: clamp(105px, calc(105px + (105 * ((100vw - 360px) / (720 - 360)))), 210px);
    height: auto;
    color: #fff;
    font-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
    background: #1F7AFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
}

.level-wrap > main.level-02 > div > section ol li {
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    line-height: clamp(25px, calc(25px + (25 * ((100vw - 360px) / (720 - 360)))), 50px);
    font-weight: 500;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(1) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-01.png");
    background-size: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px) auto;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(2) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-02.png");
    background-size: clamp(13px, calc(13px + (13 * ((100vw - 360px) / (720 - 360)))), 26px) auto;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(3) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-03.png");
    background-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px) auto;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(4) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-07.png?ver=01");
    background-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px) auto;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(5) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-04.png");
    background-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px) auto;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(6) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-05.png");
    background-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px) auto;
}
.level-wrap > main.level-02 > div > section ol li:nth-child(7) {
    background-image: url("/assets/images/2nd/levelUp/level-02/icon-06.png");
    background-size: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px) auto;
}

.level-wrap > main.level-03 > div > section ol.item > li {
    display: flex;
    align-items: center;
    height: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px);
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(1) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-01.png") no-repeat 100% 50%;
    background-size: clamp(37px, calc(37px + (37 * ((100vw - 360px) / (720 - 360)))), 74px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(2) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-02.png") no-repeat 100% 50%;
    background-size: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(3) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-03.png") no-repeat 100% 50%;
    background-size: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(4) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-04.png") no-repeat 100% 50%;
    background-size: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(5) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-05.png") no-repeat 100% 50%;
    background-size: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(6) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-06.png") no-repeat 100% 50%;
    background-size: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li:nth-child(7) {
    background: url("/assets/images/2nd/levelUp/level-03/icon-07.png") no-repeat 100% 50%;
    background-size: clamp(33px, calc(33px + (33 * ((100vw - 360px) / (720 - 360)))), 66px) auto;
}
.level-wrap > main.level-03 > div > section ol.item > li > div {
    font-weight: 700;
    display: flex;
    gap: 0 clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    color: #000;
    line-height: clamp(13px, calc(13px + (13 * ((100vw - 360px) / (720 - 360)))), 26px);
}
.level-wrap > main.level-03 > div > section ol.item > li > div > div > p {
    color: #848484;
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
}
.level-wrap > main.level-03 > div > section ul.item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px) 0;
}
.level-wrap > main.level-03 > div > section ul.item > li {
    width: clamp(86px, calc(86px + (86 * ((100vw - 360px) / (720 - 360)))), 172px);
}
.level-wrap > main.level-03 > div > section ul.item > li > img {
    width: 100%;
    height: auto;
}
.level-wrap > main.level-03 > div > section ul.item > li > p {
    text-align: center;
    font-weight: 700;
    font-size: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    line-height: clamp(19px, calc(19px + (19 * ((100vw - 360px) / (720 - 360)))), 38px);
    margin-top: clamp(8px, calc(8px + (8 * ((100vw - 360px) / (720 - 360)))), 16px);
}
.level-wrap > main.level-03 > div > section ul.item > li > p span {
    color: #848484;
}



.level-wrap > main.level-04 > div > section ol.item > li {
    display: flex;
    align-items: center;
    height: clamp(40px, calc(40px + (40 * ((100vw - 360px) / (720 - 360)))), 80px);
}
.level-wrap > main.level-04 > div > section ol.item > li:nth-child(1) {
    background: url("/assets/images/2nd/levelUp/level-04/icon-01.png?ver=01") no-repeat 100% 50%;
    background-size: clamp(17px, calc(17px + (17 * ((100vw - 360px) / (720 - 360)))), 34px) auto;
}
.level-wrap > main.level-04 > div > section ol.item > li:nth-child(2) {
    background: url("/assets/images/2nd/levelUp/level-04/icon-02.png?ver=01") no-repeat 100% 50%;
    background-size: clamp(16px, calc(16px + (16 * ((100vw - 360px) / (720 - 360)))), 32px) auto;
}
.level-wrap > main.level-04 > div > section ol.item > li:nth-child(3) {
    background: url("/assets/images/2nd/levelUp/level-04/icon-03.png?ver=01") no-repeat 100% 50%;
    background-size: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px) auto;
}
.level-wrap > main.level-04 > div > section ol.item > li:nth-child(4) {
    background: url("/assets/images/2nd/levelUp/level-04/icon-04.png?ver=01") no-repeat 100% 50%;
    background-size: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px) auto;
}
.level-wrap > main.level-04 > div > section ol.item > li:nth-child(5) {
    background: url("/assets/images/2nd/levelUp/level-04/icon-05.png?ver=01") no-repeat 100% 50%;
    background-size: clamp(15px, calc(15px + (15 * ((100vw - 360px) / (720 - 360)))), 30px) auto;
}
.level-wrap > main.level-04 > div > section ol.item > li > div {
    font-weight: 700;
    display: flex;
    gap: 0 clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    font-size: clamp(12px, calc(12px + (12 * ((100vw - 360px) / (720 - 360)))), 24px);
    color: #000;
    line-height: clamp(13px, calc(13px + (13 * ((100vw - 360px) / (720 - 360)))), 26px);
}
.level-wrap > main.level-04 > div > section ol.item > li > div > div > p {
    color: #848484;
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
}
.level-wrap > main.level-04 > div > section ol.item > li > div > div > em {
    color: #1F7AFF;
}
.level-wrap > main.level-05 > div > section .image2 {
    text-align: center;
    margin-bottom: clamp(14px, calc(14px + (14 * ((100vw - 360px) / (720 - 360)))), 28px);
}
.level-wrap > main.level-05 > div > section .image2 img {
    width: clamp(100px, calc(100px + (100 * ((100vw - 360px) / (720 - 360)))), 200px);
    height: auto;
}

.level-wrap > main.level-06 > section {
    margin-top: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(7px, calc(7px + (7 * ((100vw - 360px) / (720 - 360)))), 14px);;
}
.level-wrap > main.level-06 > section > p {
    border: 1px solid #004BE5;
    background: #fff;
    border-radius: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    align-items: center;
    display: inline-flex;
    height: clamp(32px, calc(32px + (32 * ((100vw - 360px) / (720 - 360)))), 64px);
    padding: 0 clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
    font-weight: 700;
    font-size: clamp(10px, calc(10px + (10 * ((100vw - 360px) / (720 - 360)))), 20px);
}

.level-wrap > main.level-06 > div > section .image img {
    width: 100%;
    height: auto;
}

.level-wrap > main.level-06 > div > section .table {
    border-radius: clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    font-size: clamp(9px, calc(9px + (9 * ((100vw - 360px) / (720 - 360)))), 18px);
    font-weight: 700;
    overflow: hidden;
    width: clamp(240px, calc(240px + (240 * ((100vw - 360px) / (720 - 360)))), 480px);
    margin: 0 auto;
}
.level-wrap > main.level-06 > div > section .table .body {
    display: inline-flex;
    text-align: center;
    color: #000;
}
.level-wrap > main.level-06 > div > section .table .body p {
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 3;
    width: clamp(120px, calc(120px + (120 * ((100vw - 360px) / (720 - 360)))), 240px);
    height: clamp(30px, calc(30px + (30 * ((100vw - 360px) / (720 - 360)))), 60px);
    background: #F0F6FF;
}
.level-wrap > main.level-06 > div > section .table .body p:first-child {
    background: #C0D8FF;
}