@charset "utf-8";

@font-face {
	font-family: 'OneGothicTitle';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
	font-weight: normal;
	font-display: swap;
}
@font-face {
	font-family: 'OneGothicBody';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff');
	font-weight: normal;
	font-display: swap;
}

:root {

    /* font-size */
    --title-text: 42px;
    --x-large-text: 22px;
    --large-text: 18px;
    --medium-text: 16px;
}

/* main ------------------------------- */
main {
    width: 100%;
    margin-top: 80px;
}

section {padding:8.125rem 0;}
section:first-child {margin-top:-3.75rem;}

@media screen and (max-width:1024px) {
    section {padding:5rem 0;}
}

.main-contents {
    width: 100%;
}

.main_visual {
    position: relative;
    min-height: 840px;
    background: url(../img/main_page/main_img.png) no-repeat;
    background-position: top center;
    background-size: cover;
}

.main_title {
    padding-top: 470px;
    text-align: center;
}

.visual_text img {
    margin: 20px 0;
}

.visual_text h2 {
    text-align: center;
    color: var(--white-color);
    font-size: 62px;
    font-weight: 800;
}

.visual_text h2 > span {
    padding: 8px 14px;
    border-radius: 5px;
    background-color: #BB1D2E;
}

.visual_text p {
    color: #FFDC89;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
}

.visual_text p span {
    display: inline-block;
    margin-top: 20px;
    color: #8D7150;
    font-size: 48px;
    font-weight: 700;
}

/* ---- main-contents ---- */

/* main_intro */
.main_intro {
    height: 935px;
    background: url(../img/main_page/part1_back.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #FEF2E4;
}

.main_intro_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}


.intro_title {
    display: flex;
    align-items: flex-end;
}

.intro_title img {
    margin-bottom: 16px;
}

.intro_title h3 {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    margin-right: 20px;
    color: var(--main-color);
    font-size: 60px;
    font-weight: 300;
    font-family: 'INKLIPQUID';
}

.intro_title h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40px;
    width: 30px;
    height: 30px;
    background: url(../img/main_page/part1_icon.svg) no-repeat;
}
 
.intro_title h3 span {
    color: #002D56;
    font-weight: 800;
}

.main_intro .intro_box {
    justify-content: space-between;
    margin-top: 100px;
}

.main_intro .intro_box img {
    width: 33%;
    height: fit-content;
    border-radius: 16px;
}

.intro_text {
    margin-left: 40px;
}

.intro_text h4 {
    margin-bottom: 26px;
    color: #232323;
    font-size: 36px;
    font-weight: 700;
}

.intro_text h4 span {
    color: var(--main-color);
}

.intro_text p {
    margin-bottom: 40px;
    color: #545454;
    line-height: 1.5;
    font-size: 18px;
}

.intro_text p span {
    color: #002D56;
    font-weight: 700;
}

.intro_text strong {
    font-size: 28px;
    font-weight: 600;
}

.intro_text strong span:first-child {
    position: relative;
}

.intro_text strong span:first-child::before {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 100%;
    height: 10px;
    background-color: #FFE177;
    z-index: -1;
}

.intro_text strong span:last-child {
    color: var(--main-color);
}

/* main_ltr */
.main_ltr-1 {
    display: flex;
    justify-content: space-between;
    margin-top: 160px;
    margin-bottom: 140px;
    height: 400px;
    background: url(../img/main_page/part2_img1.png) no-repeat;
    background-size: 55%;
    background-position: right;
}

.main_ltr_text > strong {
    display: flex;
    align-items: flex-end;
    font-size: 40px;
    font-weight: 300;
}

.main_ltr_text > strong > img {
    width: 442px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.main_ltr_text > p {
    margin-top: 80px;
    font-size: 32px;
    line-height: 1.8;
}

.main_ltr_text > p > span {
    color: var(--main-color);
    font-weight: 600;
}

.main_ltr-1 > img {
    width: 60%;
}

.main_ltr-2 img {
    width: 100%;
}

.main_ltr-2 img:last-child {
    display: none;
}

.main_ltr-3 {
    display: flex;
    justify-content: space-between;
    margin-top: 150px;
    margin-bottom: 210px;
}

.main_ltr-3 p {
    display: inline-block;
    text-align: center;
    margin-top: 50px;
    font-size: 32px;
}

.main_ltr-3 p > span {
    font-weight: 800;
}

.main_ltr-3 > div {
    width: 30%;
    height: 450px;
    background: url(../img/main_page/part2_img3-1.png) no-repeat;
    background-size: contain;
    background-position-x: right;
}

.main_ltr-3 > div:nth-child(2) {
    background: url(../img/main_page/part2_img3-2.png) no-repeat;
    background-size: contain;
    background-position-x: right;
}

.main_ltr-3 > div:nth-child(3) {
    background: url(../img/main_page/part2_img3-3.png) no-repeat;
    background-size: contain;
    background-position-x: right;
}


/* main_sys_intro */
.main_sys_intro {
    padding-top: 180px;
    padding-bottom: 126px;
    background: url(../img/main_page/part3_back.png) no-repeat;
    background-size: contain;
    background-color: var(--light-back);
    background-position: bottom;
}

.sys_int-title {
    position: relative;
    text-align: center;
    margin-bottom: 80px;
}

.sys_int-title strong {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'INKLIPQUID';
    font-size: 80px;
    font-weight: 300;
}

.sys_int-title strong > span {
    width: 60px;
    color: var(--main-color);
}

.sys_int-title strong > span > img {
    width: 60px;
    margin: 0 10px;
}

.sys_int-title h2 {
    font-size: 48px;
    font-weight: 600;
}

.sys_int-title div>img {
    height: 100px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.sys_int-title .flex_box {
    align-items: flex-end;
    justify-content: center;
    
}

.sys_int-list {
    position: relative;
    width: 1160px;
    margin: 0 auto;
    margin-top: 40px;
}

.sys_int-list h3 {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 680px;
    color: #fff;
    font-size: 34px;
    margin: 0 auto;
    padding-top: 6px;
    padding-bottom: 10px;
    border-radius: 50px;
    background-color: var(--main-color);
    z-index: 1;
}

.sys_int-list h3 span {
    text-emphasis: filled #FFC15E;
    margin-left: 10px;
}

.sys_int-list ul {
    position: relative;
    margin-top: 24px;
    padding: 60px 80px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.6);
    border-radius: 30px;
}

.sys_int-list ul::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    box-shadow: inset 50px -50px 57.1px rgba(192,187,167,0.1);
    background: rgba(255,255,255,0.1);
    z-index: 0;
}

.sys_int-list ul>li {
    position: relative;
    display: flex;
    align-items: center;
    height: 130px;
    margin-bottom: 20px;
    padding: 0 80px;
    font-size: 24px;
    border-radius: 30px;
    background-color: #fff;
    border: 2px solid var(--main-color);
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.15);
    z-index: 5;
}

.sys_int-list ul li strong {
    width: 110px;
    text-align: center;
    font-family: 'INKLIPQUID';
    font-size: 68px;
    font-weight: 300;
    color: var(--main-color);
    margin-right: 20px;
    z-index: 2;
}


/* main_system */
.main_system {
    margin: 200px 0;
}

.point-bubble-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 456px;
    padding: 56px 80px;
    background: url(../img/main_page/part4_back.svg) no-repeat;
    background-size: contain;
    background-position: center;
}

.point-bubble-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.point-bubble-tit > img {
    width: 70px;
}

.point-bubble p {
    color: #fff;
    font-size: 22px;
    margin-top: 50px;
}

.point-bubble h3 {
    color: #FFFBD3;
    font-size: 48px;
    line-height: 1.2;
}

.point-bubble h3 > span {
    position: relative;
    color: #fff;
    padding-left: 16px;
    padding-right: 10px;
}

.point-bubble h3 > span::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0px;
    width: 100%;
    height: 80px;
    background: url(../img/main_page/part4_eff.svg) no-repeat;
    background-size: contain;
}

.sys_title {
    text-align: center;
}

.sys_title h3 {
    margin-top: 90px;
    font-size: 48px;
    font-weight: 500;
}

.sys_title h3 span {
    color: #DD253A;
    font-weight: 800;
}

.sys_title p {
    margin-top: 20px;
    color: #363636;
    font-size: 24px;
    font-weight: 400;
}

.main_system .screen_box_zone {
    display: flex;
    justify-content: space-between;
    margin-top: 92px;
    word-break: break-all;
}

.main_system .screen_box {
    width: 31.5%;
}

.main_system .screen_text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

.main_system .screen_text strong {
    width: 100%;
    font-size: 22px;
    color: #fff;
    padding: 10px;
    margin-bottom: 16px;
    border-radius: 50px;
    background-color: var(--main-color);
}

.main_system .screen_text p {
    text-align: left;
    font-size: 20px;
    font-weight: 500;
}

.main_system .screen_text span {
    font-weight: 800;
    color: #146E7A;
}

.main_system .screen_img {
    border-radius: 20px;
}

.screen_img .text_title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.screen_img .text_title > strong {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    width: 55px;
    height: 55px;
    color: #fff;
    line-height: 1.5;
    border-radius: 50% 50% 0 50%;
    background-color: #3876BA;
}

.screen_img .text_title h4 {
    font-size: 42px;
    margin-left: 24px;
    color: #363636;
}

.main_system .screen_img img {
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}


/* main_rlu */
.main_rlu {
    padding-top: 110px;
    background-color:var(--light-back);
}

.main_rlu .flex_box {
    justify-content: space-between;
}

.rlu_title h3 {
    line-height: 1;
    font-weight: 800;
    font-size: 60px;
}

.rlu_title h3 span {
    font-size: 36px;
    color: var(--main-color);
}

.rlu_title p {
    margin: 45px 0;
    font-size: 24px;
}

.main_rlu {
    position: relative;
}

.main_rlu .rlu_box_in {
    min-height: 884px;
}

.main_rlu .text_zone {
    width: 48%;
    margin-top: 40px;
}

.main_rlu .text_box {
    display: flex;
    align-items: center;
    max-width: 500px;
    width: 100%;
    margin-top: 18px;
    margin-bottom: 110px;
    padding: 18px 35px;
    border-radius: 100px;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.15);
    background: url(../img/main_page/go-arrow.svg) no-repeat;
    background-position: 94%;
    background-color:var(--main-color);
}

.main_rlu .text_box:first-child {
    margin-top: 0px;
}

.main_rlu .text_box p {
    margin-left: 16px;
    color: #fff;
    font-size: 28px;
}

.main_rlu .screen_zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 580px;
    overflow: hidden;
}

.main_rlu .screen_zone img {
    position: absolute;
    bottom: 148px;
    right: 0;
    width: 100%;
}


/* main_sign_up */
.main_sign_up {
    position: relative;
    height: 380px;
    text-align: center;
}

.main_sign_up_box {
    position: absolute;
    top: -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 160px 0 160px 0;
    background: url(../img/main_page/part6_back.png) no-repeat;
    background-size: cover;
}

.main_sign_up p {
    color: #fff;
    font-size: 36px;
    font-weight: 300;
}

.main_sign_up p span {
    font-size: 48px;
    font-weight: 900;
}

.main_sign_up a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 40px;
    width: 520px;
    height: 90px;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    border-radius: 10px;
    background-color: var(--main-color);
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.main_sign_up a:hover {
    transform: scale(1.01);
    transition: 0.3s;
    background-color: #a0815c;
}

@media (min-width:1280px) and (max-width:1380px) {
    .main_system .screen_box .screen_text {
        padding: 20px 30px;
    }

}

@media screen and (max-width:1280px) {
    /* main_visual */
    .main_visual {
        min-height: 600px;
        margin-top: 60px;
        background: url(../img/main_page/main_img.png) no-repeat;
        background-position: bottom center;
        background-size: cover;
    }

    .main_title {
        padding-top: 380px;
        padding-bottom: 50px;
    }

    .visual_text h2 {
        font-size: 48px;
    }
    
    .visual_text h2 > span {
        padding: 6px 10px;
    }

    .visual_text p {
        font-size: 28px;
    }

    .visual_text img {
        margin: 10px 0;
    }
    
    /* main_intro */
    .main_intro {
        height: 720px;
    }

    .main_intro h3 {
        font-size: 45px;
    }

    .main_intro .intro_box {
        margin-top: 70px;
    }

    .main_intro .intro_box img {
        width: 40%;
    }

    .intro_text h4 {
        font-size: 24px;
    }

    .intro_text p {
        font-size: 18px;
    }

    .intro_text strong {
        font-size: 24px;
    }

    .intro_title img {
        width: 200px;
    }

    /* main_ltr */
    .main_ltr-1 {
        height: auto;
        margin-top: 100px;
        background-size: 50%;
        background-position: right bottom;
    }

    .main_ltr_text > p {
        margin-top: 40px;
        font-size: 24px;
    }

    .main_ltr_text > strong {
        font-size: 32px;
    }

    .main_ltr_text > strong > img {
        width: 330px;
    }

    .main_ltr-3 {
        margin-bottom: 0;
    }

    .main_ltr-3 > div {
        height: 360px;
    }

    .main_ltr-3 p {
        font-size: 24px;
    }

    /* main_sys_intro */
    .main_sys_intro {
        padding-top: 120px;
        padding-bottom: 88px;
    }

    .sys_int-title strong {
        top: -50px;
        font-size: 60px;
    }
    
    .sys_int-title strong > span > img {
        width: 54px;
        margin: 0 6px;
    }
    
    .sys_int-title div>img {
        height: 86px;
        margin-bottom: 4px;
    }
    
    .sys_int-title h2 {
        font-size: 36px;
    }
    
    .sys_int-list {
        width: 80%;
    }
    
    .sys_int-list h3 {
        width: 520px;
        padding-top: 4px;
        padding-bottom: 8px;
        font-size: 30px;
    }

    .sys_int-list ul {
        padding: 50px 40px;
    }

    .sys_int-list ul>li {
        padding: 0 50px;
        font-size: 20px;
    }

    .sys_int-list ul>li:last-child {
        margin-bottom: 0;
    }

    .sys_int-list ul li strong {
        width: 80px;
        font-size: 48px;
    }

    /* main_system */
    .main_system {
        margin: 60px 0;
    }

    .point-bubble-box {
        width: 95%;
        height: auto;
        margin: 0 auto;
        min-height: 370px;
        padding: 40px 50px;
    }
    
    .point-bubble-tit > img {
        width: 60px;
    }
    
    .point-bubble h3 {
        font-size: 32px;
    }

    .point-bubble h3 > span::before {
        top: -10px;
    }

    .point-bubble h3 > span > img {
        width: 150px;
    }

    .point-bubble p {
        margin-top: 40px;
        font-size: 18px;
    }

    .main_system .screen_box_zone {
        margin-top: 80px;
    }

    .main_system .sys_title h3 {
        margin-top: 50px;
        font-size: 36px;
    }

    .main_system .sys_title p {
        font-size: 20px;
    }

    .main_system .screen_text {
        margin-bottom: 30px;
    }

    .main_system .screen_text strong {
        font-size: 16px;
    }

    .main_system .screen_text p {
        font-size: 18px;
    }

    .screen_img .text_title > strong {
        width: 40px;
        height: 40px;
        font-size: 28px;
    }

    .screen_img .text_title h4 {
        margin-left: 16px;
        font-size: 30px;
    }

    /* main_rlu */
    .main_rlu {
        padding-top: 40px;
    }

    .main_rlu .rlu_box_in {
        min-height: 750px;
    }

    .main_rlu .rlu_title h3 {
        font-size: 40px;
    }

    .main_rlu .rlu_title h3 span {
        font-size: 30px;
    }

    .main_rlu .rlu_title p {
        margin-bottom: 60px;
        font-size: 20px;
    }

    .main_rlu .text_box p {
        font-size: 24px;
    }

    .main_rlu .screen_zone img {
        position: absolute;
        bottom: 110px;
        width: 90%;
    }

    /* main_sign_up */
    .main_sign_up_box {
        height: 340px;
        border-radius: 100px 0 100px 0;
        background: url(../img/main_page/part6_back.png) no-repeat;
        background-size: cover;
    }

    .main_sign_up {
        height: 340px;
    }

    .main_sign_up p {
        font-size: 28px;
    }

    .main_sign_up p span {
        font-size: 40px;
    }

    .main_sign_up a {
        width: 400px;
        height: 75px;
        font-size: 28px;
        margin-top: 24px;
    }
}


@media screen and (max-width:1024px) {
    main {
        margin-top: 60px;
    }

    select option {
        font-size: 1rem;
    }
    
    /* main ------------------------------- */
    .main_visual {
        min-height: 600px;
        margin-top: 60px;
        background: url(../img/main_page/main_img-m.png) no-repeat;
        background-position: center 28%;
        background-size: cover;
    }

    .visual_text {
        margin-top: 0px;
    }
 
    .visual_text h2 {
        font-size: 40px;
    }

    .visual_text p {
        font-size: 24px;
    }

    .main_title {
        padding-top: 430px;
    }

    /* main_intro */
    .main_intro {
        height: 935px;
        background: url(../img/main_page/part1_back-tm.png) no-repeat;
        background-size: cover;
        background-position: top right;
        background-color: #FEF2E4;
    }

    .main_intro h3 {
        font-size: 40px;
    }

    .main_intro_box {
        padding: 70px 0;
    }
    
    .main_intro {
        height: auto;
    }

    .main_intro .intro_box {
        margin-top: 60px;
    }

    .intro_text {
        width: 100%;
    }

    .intro_text p {
        font-size: 16px;
    }

    .intro_text {
        margin: 0;
        margin-left: 20px;
    }

    .intro_text p {
        margin-bottom: 40px;
    }
    
    .main_intro .intro_box img {
        width: 33%;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    /* main_ltr */
    .main_ltr-3 p {
        font-size: 24px;
    }

    .sys_int-title strong {
        top: -38px;
        font-size: 48px;
    }

    .sys_int-title strong > span > img {
        width: 40px;
    }

    .sys_int-title h2 {
        font-size: 28px;
    }

    .sys_int-title div>img {
        height: 68px;
    }

    .sys_int-list h3 {
        font-size: 24px;
    }

    .sys_int-list ul {
        padding: 36px 32px;
    }

    .sys_int-list ul li strong {
        width: 60px;
        font-size: 38px;
    }

    .main_sys_intro {
        padding-top: 90px;
    }
    
    /* main_system */
    .main_system {
        margin: 40px 0;
    }

    .point-bubble-box {
        /* min-height: 340px; */
        padding: 40px 40px;
    }

    .point-bubble-box {
        width: 65%;
        max-width: 510px;
        padding: 0;
        background: url(../img/main_page/part4_back-m.svg) no-repeat;
        background-size: contain;
        background-position: center;
    }

    .point-bubble-tit > img {
        width: 50px;
    }

    
    .point-bubble {
        padding: 40px 20px;
    }

    .point-bubble h3 {
        font-size: 28px;
    }

    .point-bubble h3 > span > img {
        width: 132px;
    }

    .point-bubble p {
        margin-top: 22px;
    }

    .screen_img .text_title h4 {
        font-size: 24px;
    }

    .main_system .screen_box_zone {
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .main_system .screen_box {
        width: 47.5%;
        min-width: 272px;
        margin-top: 20px;
    }

    .main_system .screen_box:nth-child(2) {
        margin: 0 10px;
        margin-top: 20px;
    }

    .main_system .screen_text {
        padding: 20px 10px;
        margin-bottom: 15px;
    }

    .main_system .screen_text strong {
        font-size: 18px;
    }

    .main_system .sys_title h3 {
        font-size: 32px;
    }

    .main_system .sys_title p {
        font-size: 20px;
    }

    .main_system .screen_text {
        margin-bottom: 20px;
    }
    

    /* main_rlu */
    /* .main_rlu .rlu_title h3 {
        font-size: 36px;
    }

    .main_rlu .rlu_title h3 span {
        font-size: 24px;
    } */
/* 
    .main_rlu .rlu_title p {
        font-size: 18px;
    } */

    .main_rlu .text_zone {
        width: 70%;
    }

    .main_rlu .text_box {
        background-size: 12px;
    }

    .main_rlu .text_box img {
        width: 30px;
    }

    .main_rlu .rlu_box_in {
        min-height: 640px;
    }

    /* main_sign_up */
}

@media screen and (max-width:768px) {
    .main_visual {
        min-height: 460px;
    }

    .main_title {
        padding-top: 310px;
    }

    .visual_text h2 {
        font-size: 28px;
    }

    .visual_text p {
        font-size: 18px;
    }

    .visual_text h2 > span {
        padding: 4px 5px;
    }

    .visual_text p span {
        font-size: 30px;
    }

    /* main_intro */
    .main_intro {
        padding: 60px 0;
    }

    .main_intro_box {
        padding: 20px 0;
    }

    .main_intro h3 {
        font-size: 30px;
        border-bottom: 0;
    }

    .main_intro .intro_box {
        flex-direction: column;
        margin-top: 30px;
    }

    .main_intro .intro_box img {
        width: 70%;
    }

    .intro_title img {
        width: 130px;
        margin-bottom: 8px;
    }

    .intro_title h3 {
        margin-right: 10px;
    }

    .intro_title h3::before {
        left: -24px;
        width: 25px;
        height: 25px;
        background-size: 20px;
    }

    .intro_text {
        margin-left: 0;
    }

    .intro_text h4 {
        font-size: 22px;
    }

    .intro_text strong {
        font-size: 22px;
    }

    /* main_ltr */
    .main_ltr-1 {
        height: 480px;
        margin-top: 50px;
        margin-bottom: 80px;
        background-size: 90%;
    }
    .main_ltr_text > strong > img {
        width: 228px;
    }

    .main_ltr_text > strong {
        font-size: 22px;
    }

    .main_ltr_text > p {
        margin-top: 25px;
        font-size: 20px;
    }

    .main_ltr-2 img:first-child {
        display: none;
    }

    .main_ltr-2 img:last-child {
        display: block;
        width: 70%;
        margin: 0 auto;
    }

    .main_ltr-3 {
        display: inline-block;
        width: 100%;
    }

    .main_ltr-3 > div {
        width: 70%;
        height: 360px;
        margin: 0 auto;
    }

    .main_ltr-3 p {
        font-size: 20px;
    }

    /* main_sys_intro */
    .sys_int-list {
        width: 100%;
    }

    .main_sys_intro {
        padding-top: 120px;
        padding-bottom: 110px;
    }

    .sys_int-list h3 {
        max-width: 520px;
        width: 100%;
    }

    .sys_int-title h2 {
        font-size: 22px;
    }

    .sys_int-title strong {
        top: -30px;
        font-size: 40px;
    }

    .sys_int-title strong > span > img {
        width: 36px;
    }

    .sys_int-title div>img {
        height: 52px;
    }

    .sys_int-list ul>li {
        padding: 0 26px;
        font-size: 18px;
    }

    .sys_int-list ul li strong {
        width: 110px;
    }

    /* main_system */
    .point-bubble-box {
        width: 100%;
    }

    .point-bubble {
        padding: 50px 20px;
    }

    .point-bubble h3 {
        font-size: 22px;
    }

    .point-bubble h3 > span > img {
        width: 110px;
    }

    .point-bubble-tit > img {
        width: 40px;
    }

    .main_system .sys_title h3 {
        font-size: 28px;
    }

    .main_system .sys_title p {
        text-align: left;
        display: inline-block;
        font-size: 18px;
    }

    .main_system .screen_box {
        width: 70%;
    }
    
    /* main_rlu */
    .main_rlu .text_box {
        max-width: 420px;
        margin-bottom: 0;
    }

    .main_rlu .text_zone {
        width: 100%;
    }

    .main_rlu .screen_zone {
        width: 100%;
        min-height: 460px;
        margin-top: 100px;
        overflow: visible;
    }

    .main_rlu .screen_zone img {
        width: 70%;
        min-width: 400px;
        max-width: 440px;
        bottom: auto;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
    }

    .rlu_title p {
        margin: 24px 0;
    }

    .main_rlu .text_box {
        padding: 12px 20px;
    }

    .main_rlu .text_box img {
        width: 40px;
        bottom: 30px;
    }


    .main_rlu .rlu_box_in {
        min-height: auto;
    }

    .main_rlu .flex_box {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }


    /* main_sign_up */
    .main_sign_up_box {
        position: static;
        border-radius: 0;
    }

    .main_sign_up a {
        width: 320px;
        height: 68px;
        font-size: 24px;
    }

    .main_sign_up p {
        font-size: 24px;
    }

    .main_sign_up p span {
        font-size: 36px;
    }

}

@media screen and (max-width:480px) {
    /* main_visual */
    .main_visual {
        min-height: 340px;
        /* margin-top: 90px; */
    }

    .visual_text img {
        height: 24px;
    }

    .visual_text h2 {
        font-size: 20px;
    }

    .visual_text p {
        margin-top: 10px;
        font-size: 14px;
    }

    .visual_text p span {
        font-size: 18px;
    }

    .main_title {
        padding-top: 254px;
    }

    /* main_intro */
    .main_intro {
        padding: 50px 0;
    }

    .main_intro h3 {
        font-size: 24px;
    }

    .intro_title h3::before {
        left: -10px;
        width: 12px;
        height: 12px;
        background-size: 10px;
    }

    .intro_title img {
        width: 104px;
    }

    .intro_text h4 {
        font-size: 20px;
    }

    .intro_text strong {
        font-size: 16px;
    }

    .main_intro_box {
        padding: 20px;
    }

    .main_intro .intro_box img {
        width: 90%;
    }

    /* main_ltr */
    .main_ltr-1 {
        height: 370px;
    }

    .main_ltr-2 img:last-child {
        width: 90%;
    }

    .main_ltr-3 {
        margin: 0 auto;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    .main_ltr-3 > div {
        width: 90%;
        height: 300px;
    }

    .main_ltr-3 p {
        font-size: 20px;
    }

    .main_ltr_text > p  {
        font-size: 16px;
    }

    .main_ltr_text > strong {
        font-size: 18px;
    }

    .main_ltr_text > strong > img {
        width: 200px;
        margin-right: 6px;
        margin-bottom: 6px;
    }

    /* main_sys_intro */
    .main_sys_intro {
        padding-top: 70px;
        padding-bottom: 50px;
        background: none;
        background-color:var(--light-back);
    }

    .sys_int-title {
        margin-bottom: 60px;
    }

    .sys_int-title strong {
        top: -24px;
        font-size: 28px;
    }

    .sys_int-title strong > span > img {
        width: 24px;
    }

    .sys_int-title h2 {
        font-size: 18px;
    }

    .sys_int-title div>img {
        height: 40px;
    }

    .sys_int-list ul {
        padding: 17px 15px;
    }

    .sys_int-list h3 {
        max-width: 270px;
        font-size: 16px;
    }

    .sys_int-list h3 span {
        margin-left: 5px;
    }

    .sys_int-list ul>li {
        height: 80px;
        padding: 0 14px;
        font-size: 14px;
        border-radius: 10px;
    }

    .sys_int-list ul li strong {
        width: 36px;
        font-size: 22px;
    }

    /* main_system */
    .point-bubble-box {
        min-height: 310px;
        background-size: 100%;
    }
    .point-bubble {
        padding: 60px 18px;
    }
    .point-bubble h3 {
        font-size: 18px;
    }
    .point-bubble h3 > span {
        padding-left: 9px;
        padding-right: 10px;
    }
    .point-bubble h3 > span::before {
        top: -6px;
    }
    .point-bubble h3 > span > img {
        width: 82px;
    }
    .point-bubble p {
        margin-top: 18px;
        font-size: 14px;
    }

    .point-bubble-tit > img {
        width: 24px;
    }

    .main_system {
        margin: 20px 0;
    }
    .main_system .sys_title h3 {
        margin-top: 20px;
        font-size: 20px;
    }

    .main_system .sys_title p {
        width: 224px;
        margin: 0 auto;
        margin-top: 20px;
        text-align: center;
        font-size: 16px;
    }

    .main_system .screen_box_zone {
        margin-top: 24px;
    }

    .main_system .screen_box {
        width: 90%;
    }

    .main_system .screen_text {
        padding: 0px;
    }

    .main_system .screen_text strong {
        font-size: 16px;
    }

    .main_system .screen_text p {
        font-size: 16px;
    }

    .screen_img .text_title > strong {
        align-items: center;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .screen_img .text_title h4 {
        margin-left: 10px;
        font-size: 20px;
    }


    /* main_rlu */
    .main_rlu {
        padding-top: 0px;
    }

    .main_rlu .rlu_title h3 {
        font-size: 24px;
    }

    .main_rlu .rlu_title h3 span {
        font-size: 18px;
    }

    .main_rlu .rlu_title p  {
        margin-bottom: 36px;
        font-size: 14px;
    }

    .main_rlu .text_box {
        margin-top: 10px;
        padding: 12px 20px;
        background-size: 10px;
    }

    .main_rlu .text_box p {
        font-size: 16px;
        margin-left: 12px;
    }

    .main_rlu .screen_zone {
        min-height: 308px;
        margin-top: 50px;
        border-radius: 20px;
    }

    .main_rlu .screen_zone img {
        width: 90%;
        min-width: auto;
        max-width: 345px;
        /* bottom: -30px; */
    }

    .main_rlu .text_box img {
        width: 20px;
    }


    /* main_sign_up */
    .main_sign_up_box {
        height: 220px;
    }
    .main_sign_up {
        height: 200px;
    }

    .main_sign_up p {
        font-size: 16px;
    }
    
    .main_sign_up p span {
        font-size: 20px;
    }

    .main_sign_up a {
        width: 328px;
        height: 60px;
        margin-top: 20px;
        font-size: 22px;
    }
}


/* 게시글 없을때 ------------------------------- */
.no_data_msg_box {
    width: 100% !important;
}
.no_data_msg {width:100% !important; text-align:center; padding:30px 2%; font-size:18px !important; margin-left:0 !important;}



/* 레이어팝업 ------------------------------- */
.pop_close {display:flex; justify-content:center; align-items:center; background-color:#f66262; border:0; border-radius:100%; color:#fff; width:64px; height:64px; position:absolute; top:-24px; right:-24px; text-indent:-9999px;}
.pop_close::after {content:''; background:url(../img/common/btn_close.png) 0 0 no-repeat; width:32px; height:32px; position:absolute;}
.overlay_t {position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; overflow:overlay; padding:15px; background-color:rgba(0,0,0,0.7); text-align:center; z-index:90; display:flex; align-items: center;}
.popLayer {background:#fff; border-radius:25px; box-shadow: 0px 1px 7px rgba(0,0,0,0.4); width: 30%; min-width: 480px; max-width: 560px; margin:0 auto; position:relative; z-index:100; display:none;}
.popLayer h3 {background:#375f9f; border-bottom:1px solid #e5e5e5; color:#fff; font-size:15px; padding:12px 15px; line-height:1.3; text-align:left;}
.popLayer h4 {font-weight:bold; margin-bottom:5px;}
.popLayer em {font-style:normal;}
.popLayer .pop_container {padding:40px 20px; font-size:18px;}
.popLayer .btn_set {margin-top:58px;}
.pop_container .icons {display:block; margin-top: 10px; margin-bottom: 40px;}
.pop_container .icons img {max-width: 100px;}
.pop_container .tetx_wrap em {display:block; color:#232323; font-size:32px; margin-bottom:10px;}

.popLayer .pop_container .tetx_wrap p {
    font-size: 1.6rem;
}

.popLayer .btn_set button {
    min-height: 60px;
    height: 4vh;
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    border-radius: 10px;
    background-color: #002b49;
}

@media screen and (max-width:1280px) {

    .popLayer {
        width: 80%;
        min-width: 260px;
        max-width: 360px;
    }
    
    .popLayer .pop_container {
        padding: 30px 20px;
    }
    
    .pop_container .icons {
        margin: 15px 0 25px;
    }
    
    .pop_container .icons img { 
        width: 100px;
    }
    
    .popLayer .btn_set {
        margin-top: 40px;
    }
    
    
    .popLayer .pop_container .tetx_wrap p {
        font-size: 1.2rem;
    }
    
    .popLayer .btn_set button {
        max-width: 160px;
        min-height: 40px;
        height: 6vh;
        font-size: 1.2rem;
    }
    
    .pop_close {
        width: 50px;
        height: 50px;
    }
    
    .pop_close::after {
        width: 24px;
        height: 24px;
        background-size: cover;
    }
}

@media screen and (max-width:480px) {

    .pop_container .icons img { 
        width: 60px;
    }

    .pop_container .icons {
        margin: 0 15px 25px;
    }

    .popLayer .btn_set {
        margin-top: 30px;
    }

    .popLayer .btn_set button {
        max-width: 160px;
        min-height: 20px;
        height: 5vh;
        font-size: 1.2rem;
    }
}


/* 메인 모달 */

.popup_box {
    /* position: absolute; */
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    width: 80%;
    max-width: 1400px;
    /* height: fit-content; */
    z-index: 999;
}

/* .popup_box > .pay_popup {
    height: 100%;
} */

/* .popup_box:has(#mainPopup1) { height: fit-content; } */

.main_popup {
    position: relative;
    /* height: 100%; */
    /* max-height: 400px; */
    /* margin-right: 60px; */
    box-shadow: 0px 1px 7px rgba(0,0,0,0.4);
}

.main_popup:last-child {
    margin-right: 0px;
}

.main_popup .btn_zone {
    position: absolute;
    /* bottom: -38px; */
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0px 18px;
    color: #fff;
    background-color: #232323;
}

#mainPopup1 .main_popup .btn_zone { bottom: -38px;}

.main_popup .btn_zone>div {
    width: 100%;
}

.main_popup .btn_zone p {
    font-size: 1.2rem;
    font-weight: 300;
    margin-left: 10px;
}

.main_popup .left_btn {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.main_popup .btn_zone input[type="checkbox"] { 
    display: none; 
}

.main_popup input[type="checkbox"] + label{
    cursor: pointer;
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 2px solid var(--main-color);
}

.main_popup input[id="check_today1"]:checked + label::after,
.main_popup input[id="check_today2"]:checked + label::after{
    content:'✔';
    position: absolute;
    font-size: 15px;
    width: 20px;
    height: 20px;
    text-align: center;
    top: 50%; left: 50%;
    color: #fff;
    background-color: var(--main-color);
    transform: translate(-50%, -50%);
}

.main_popup .right_btn {
    cursor: pointer;
}

/* 240624 슬라이드 팝업 작업 */
.main_popup .btn_zone {
    position: absolute;
    /* bottom: -46px; */
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0px 18px;
    color: #232323;
    border-top: 1px solid #B0B0B0;
    background-color: #fff;
}

.main_popup .pop_box {
    display: block;
    width: 40vw;
    max-width: 600px;
    padding: 0;
    margin: 0;
    margin-bottom: 38px;
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
}


.main_popup .pop_box img {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
}

.pop-arrow #prevArrow {
    position: absolute;
    top: 50%; left: -60px;
    transform: translateY(-50%);
    z-index: 99;
} 

.pop-arrow #nextArrow {
    position: absolute;
    top: 50%; right: -60px;
    transform: translateY(-50%);
    z-index: 99;
}

.pop-arrow a {
    height: 50px;
}

.pop-arrow a:last-child img {
    transform: rotate(180deg);
}

.pop-arrow a img {
    height: 100%;
}

.slick-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    display: flex;
}

.slick-dots li {
    margin-right: 12px;
}

.slick-dots li:last-child {
    margin-right: 0px;
}

.slick-dots button {
    width: 12px;
    height: 12px;
    font-size: 0;
    border-radius: 50%;
    background-color: #d1d1d1;
    box-shadow:1px 1px 3px rgba(0, 0, 0, 0.3);
}

.slick-dots button::before {
    display: none;
}
.slick-active button{
    background-color: #232323;
}

/* 240805 결제 팝업 작업 */
.pay_popup {
    position: absolute;
    top: 50% ;
    transform: translateY(-50%);
    /* width: 60vw; */
    /* height: auto; */
    background-color: #fff;
    z-index: 999;
}

.pay_popup .pay_header {
    position: relative;
    padding: 14px 20px;
    border-bottom: 1px solid #888888;
}

.pay_popup .pay_header h4 {
    font-size: 18px;
}

.pay_popup .pay_header button {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: inline-block;
    font-size: 0;
    width: 16px;
    height: 16px;
    background: url(../img/common/burger_menu-close.svg) no-repeat;
}

.pay_con-box {
    padding: 0px 20px;
}

.pay_info {
    text-align: right;
    margin-bottom: 15px;
    padding: 5px 20px;
    background-color:var(--light-back);
}

.pay_info p {
    position: relative;
    display: inline-block;
    font-weight: 600;
    text-align: right;
    color: #545454;
}

.pay_info i {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(../img/main_page/crome.svg) no-repeat;
}

.pay_con-box {
    max-height: 80vh;
    overflow-y: auto;
}

.pay_con-box::-webkit-scrollbar-thumb {
    background-color: var(--gray-color);
}

.pay_txt {
    text-align: left;
}

.pay_txt > p {
    color: #545454;
}

.pay_txt ul {
    margin: 26px 0;
}

.pay_txt ul li {
    font-weight: 600;
}

.pay_txt ul li .point {
    display: inline-block;
    color: var(--main-color);
}

.pay_table {
    width: 100%;
}

.pay_table thead {
    color: #fff;
    background-color: #B0B0B0;
}

.pay_table td {
    width: 25%;
    padding: 5px;
    border: 1px solid #DFDFDF;
}

.pay_guide {
    margin-top: 26px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 10px;
    background-color:var(--light-back);
}

.pay_guide h5 {
    position: relative;
    text-align: left;
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 6px;
}

.pay_guide h5::before {
    content: "";
    position: absolute;
    left: 0px;
    width: 20px;
    height: 20px;
    background: url(../img/main_page/pay_icon.svg) no-repeat;
    background-size: cover;
}

.pay_guide p {
    text-align: left;
    padding: 16px;
    border-radius: 10px;
    background-color: #fff;
}

.pay_btn {
    margin-bottom: 20px;
}

.pay_btn button {
    width: 100px;
    height: 40px;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 6px;
    color: #fff;
    background-color: #3876BA;
}

.pay_btn button:first-child {
    margin-left: 0;
}

.pay_btn button:nth-child(2) {
    background-color: #545454;
}

.pay_btn button:nth-child(3) {
    background-color: var(--main-color);
}

.pay_popup .btn_zone {
    height: 46px;
}

.closing {
    padding-bottom: 10px;
    margin-bottom: 30px;
    text-align: left;
    color: #545454;
    border-bottom: 1px solid #888888;
}

/* 241023 결제 팝업 추가작업 */
.pay_txt_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pay_info_table ul {
    margin-bottom: 16px;
    border-radius: 5px;
    border: 1px solid #B0B0B0;
}

.pay_info_table ul > li {
    text-align: left;
    padding: 3px 10px;
    border-bottom: #B0B0B0;
}

.pay_info_table ul > li >span {
    color: #3876BA;
}

.pay_info_table table {
    width: 100%;
}

.pay_info_table thead {
    color: #fff;
    background-color: #949494;
}

.pay_info_table td {
    width: 25%;
    padding: 10px;
    white-space: nowrap;
    border: 1px solid #DFDFDF;
}

.pay_info_table th {
    padding: 10px;
    color: #fff;
    white-space: nowrap;
    font-weight: 500;
    border: 1px solid #DFDFDF;
    background-color: #707070;
}

.pay_info_table p {
    margin-top: 10px;
    text-align: right;
    font-size: 13px;
    color: var(--main-color);
}

/* 241107 학습법 안내 동영상 작업 */


@media screen and (max-width:1024px) {
    .pay_txt_box {
        flex-direction: column;
    }

    .pay_info_table td,
    .pay_info_table th {
        white-space: normal;
        padding: 5px;
    }
}

@media screen and (max-width:768px) {
    .pay_info_table p {
        text-align: left;
    }
}

/* 240926 선택 팝업 작업 */
.sel_popup {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    padding: 30px;
    border-radius: 20px;
    background-color: #fff;
    z-index: 999;
}

.sel_popup .sel-close {
    display: flex;
    justify-content: right;
}

.sel_popup .sel-close > a {
    width: 20px;
    height: 20px;
    font-size: 0;
    background: url(../img/common/pop-close.svg) no-repeat;
    background-size: cover;
}

.sel_popup h4 {
    margin-top: 30px;
    margin-bottom: 60px;
    font-size: 20px;
}

.sel_popup .btn-box {
    display: flex;
    align-items: center;
}

.sel_popup .btn-box > a {
    display: inline-block;
    padding: 20px 40px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    border-radius: 10px;
    background-color: var(--main-color);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15) inset;
}

.sel_popup .btn-box > a:last-child {
    margin-left: 16px;
    color: var(--font-color);
    background-color: var(--yellow-color);
}

/* 250819 ver2 메인 청구서 */
.payment_result{display: flex; gap: 5px; flex-direction: column;}
.pay_result_box{width: 100%;}

input.b_checkbox:checked + label.payment_check{color: var(--main-color); border: 1px solid var(--main-color);}
.payment_check{font-size: 15px; display: flex; align-items: center; justify-content: center;  width: 100%; height: 45px;  border: 1px solid #dddddd;vertical-align: middle;cursor: pointer;text-align: center;border-radius: 6px; justify-content: space-around;}
.payment_check img{width: 20px;height: 20px;}
.pay_result_wrap{margin-bottom: 20px;}
.pay2_popup{gap: 20px; text-align: left; max-width: 900px; width: 100%; display: flex; background-color: #fff;  border-radius: 15px;}
.left_payment_modal{width: calc(100% - 250px); padding: 30px; padding-right: 0;}
.left_payment_modal .logo_wrap{gap: 8px; margin-bottom: 20px; display: flex; align-items: center;}
.left_payment_modal .logo_wrap p{ font-size: 14px; color: #999;}
.left_payment_modal .logo_wrap .logo_box{display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 30px; border: 1px solid #ededed;}
.left_payment_modal .logo_wrap .logo_box img{display: inline-block; width: 20px; height: 20px;}
.left_payment_modal .bill_title{margin-bottom: 17px; font-size: 24px; font-weight: 900;line-height: 130%;}
.left_payment_modal .bill_sub_title{transform: skew(-0.1deg); color: var(--gray-color); font-size: 15px; line-height: 140%;}
.pay_result_box input{display: none;}

.left_payment_modal .payment_table{
    margin-top: 10px;
    display: table;
    width: 100%;
}
.left_payment_modal .payment_table .modal_pop{text-align: right; margin-bottom: 10px;}
.left_payment_modal .payment_table p{margin-right: 5px; font-weight: 700;cursor: pointer;display: inline-block;}
.left_payment_modal .payment_table p img{vertical-align: text-top;}
.left_payment_modal .payment_table table{width: 100%; text-align: center;}
.left_payment_modal .payment_table thead tr{background-color: #F5F5F5;}
.left_payment_modal .payment_table thead tr th{border: 1px solid #ededed;  padding: 10px 15px; color: var(--gray-color);}
.left_payment_modal .payment_table thead tr th:first-child{text-align: left;}
.left_payment_modal .payment_table tbody td:first-child{text-align: left;}
.left_payment_modal .payment_table tbody td{ padding: 10px 15px; border: 1px solid #ededed;}
.left_payment_modal .payment_etc{border-radius:5px;padding: 20px;background-color: #f9f9fa;margin-top: 20px;}
.left_payment_modal .payment_etc .payment_etc_title{margin-bottom: 10px; color: #2d61ff; font-size: 14px; font-weight: 700;}
.left_payment_modal .payment_etc .payment_etc_title img{margin-right: 5px;}
.left_payment_modal .payment_etc .payment_etc_contents{font-size: 14px; transform: skew(
-0.1deg);}
.left_payment_modal .payment_etc .payment_etc_contents span{ font-weight: 700;transform: skew(
-0.1deg);}

.right_payment_modal{    border-radius: 0px 15px 15px 0; width: 250px; padding: 30px 15px; background-color: #F9F9F9; display: flex; flex-direction: column; justify-content: space-between;}
.right_payment_modal .right_top{margin-top: 30px;display: flex;flex-direction: column;gap: 50px;}
.right_payment_modal .price_wrap{}
.right_payment_modal .price_wrap > span{font-size: 14px;color:#303030;display: inline-block;margin-bottom: 5px;}
.right_payment_modal .price_wrap p{font-size: 24px; font-weight: 900; margin-right: 5px;}
.right_payment_modal .price_wrap p > span{font-size: 14px;margin-left: 5px;color: var(--gray-color);}
.right_payment_modal .price_detail ul{display: flex;gap: 15px;flex-direction: column;}
.right_payment_modal .price_detail ul li{}
.right_payment_modal .price_detail ul li .price_title{margin-bottom: 5px; font-size: 15px;color: var(--gray-color);}
.right_payment_modal .price_detail ul li .price_contents{font-size: 19px;font-weight: 600;color: var(--font-color);}
.right_payment_modal .payment_choice{ display: flex; flex-direction: column;}
.right_payment_modal .payment_choice p{font-size: 14px;margin-bottom: 5px; color: var(--font-color);}

.payment_btn_wrap {margin-top: 10px;}
.payment_btn_wrap button{font-size: 16px; padding: 15px; background-color: var(--main-color); color:#fff; border-radius: 5px; width: 100%; display: flex; align-items: center; justify-content: center;}
.modal_close_btn{position: absolute;right: 20px;background: #eeeeee;top: 20px;padding: 5px 8px;cursor: pointer;border-radius: 5px;}


.click_modal{display: none; position: absolute;background-color: #fff;padding: 30px;border-radius: 15px;box-shadow: 0 4px 16px rgba(0, 0, 0, .05);top: 50%;left: 50%;transform: translate(-54%, -35%);}
.click_modal2{display: none;position: absolute;background-color: #fff;padding: 15px 29px;border-radius: 15px;box-shadow: 0 4px 16px rgba(0, 0, 0, .05);bottom: 30px;right: 0;width: max-content;/* transform: translate(-54%, -50%); */}
.click_modal.on{display: block;}
.click_modal2.on{display: block;}
.click_modal .default_bill{ margin-bottom: 10px;}
.click_modal .default_bill span{font-weight: 700;}
.click_modal .default_bill strong{color:#2d61ff}
.click_modal p{ color: var(--main-color);}

.modal_table_payment{margin-bottom: 15px;}
.modal_table_payment table{display: table;}
.modal_table_payment table thead{ background-color: #f5f5f5;}
.modal_table_payment table tbody{border-bottom: 1px solid #ededed;}
.modal_table_payment table thead tr th{padding: 10px 15px;}
.modal_table_payment table thead tr th:first-child{text-align: left;}
.modal_table_payment table tbody tr td{padding: 10px 15px;}
.modal_table_payment table tbody tr td:first-child{text-align: left;}

#student_pop{cursor: pointer; position: relative}
.view_more_mobile{display: none;}
#click_modal_closed{display: none;}

/* 250909 어플리케이션 안내 팝업 */
#mainPopup3{ display: none;box-shadow: none;}
#mainPopup3 .bgc_pop3{position: relative; width: 100%; min-width: 300px;    backface-visibility: hidden;-webkit-backface-visibility:hidden; /* iOS 대응 */}
#mainPopup3 .go_app_btn{position: absolute;bottom: 25px;display: flex;/* gap: 15px; */width: 85%;/* gap: 0px; */gap: 15px;left: 50%;transform: translateX(-50%);}
#mainPopup3 .go_app_btn a{display: block;width: 100%;}
#mainPopup3 .go_app_btn a img{width: 100%;}
.mainpop_dim{  display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 9999;}

@media screen and (max-width:1400px) {
    .pay_popup {
        width: 80vw;
    }
}
@media screen and (max-width:1400px) {
    #mainPopup3{display: block; width: 45%; }
    #mainPopup3 img{width: 100%;}
}
@media screen and (max-width:1024px) {
    #mainPopup3{display: block; width: 90%; max-width: 375px;}
    .mainpop_dim{display: block;}
    .popup_box {
        display: block;
        width: 100vw;
        height: 100vh;
        max-width: none;
    }
    .popup_box > .pay_popup{height: auto;}
    .main_popup {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        height: fit-content;
    }

    .main_popup .pop_box {
        width: 50vw;
    }

    .main_popup .main_close {
        right: -36px;
    }
    
    .main_popup .main_close img {
        width: 20px;
        height: 20px;
    }

    .pop-arrow #prevArrow {
        left: -50px;
    }

    .pop-arrow #nextArrow {
        right: -50px;
    }

    .pop-arrow a {
        height: 40px;
    }

    .slick-dots button {
        width: 10px;
        height: 10px;
    }
    .pay2_popup{width: 90%;}

}

@media screen and (max-width:768px) {
    .main_popup .pop_box {
        width: 60vw;
        margin-bottom: 0;
    }

    .main_popup .btn_zone {
        bottom: -42px;
    }

    .main_popup .btn_zone p {
        font-size: 1rem;
    }

    .pop-arrow a {
        width: 40px;
    }

    .pop-arrow #prevArrow {
        left: -56px;
    }

    .pop-arrow #nextArrow {
        right: -56px;
    }

    .left_payment_modal{width: calc(100% - 100px);}
}

@media screen and (max-width:586px){
    .pay2_popup{flex-direction: column; overflow-y: auto; max-height: 90%;}
    .left_payment_modal{width: 100%; padding: 20px; padding-bottom: 0;}
    .right_payment_modal{width: 100%; padding: 20px; background-color: #fff; padding-top: 0;}

    /* .left_payment_modal .payment_table{display: none;}
    .payment_etc{display: none;} */
    .payment_all_wrap{display: none;}
    .payment_all_wrap.on{display:block; overflow-x: auto;}
    .left_payment_modal .payment_table{}
    .left_payment_modal .payment_table .modal_pop{text-align: left;}
    .click_modal{width: 90%; padding: 20px;transform:translateX(-50%)}
    .modal_table_payment{overflow-x:auto;}
    /* .payment_all_wrap.on > .payment_etc{display: block;} */
    .right_payment_modal .right_top{margin-top: 0; gap: 15px;}
    /* .right_payment_modal .price_detail ul{margin-bottom: 30px;} */
    .payment_result{flex-direction: row;}
    .payment_check{flex-direction: column; height: 80px;justify-content:center; gap: 15px;}
    .right_payment_modal .price_wrap{border-bottom: 1px solid #ededed; padding-bottom: 8px;}
    .view_more_mobile{margin: 20px 0; display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 15px; background-color:#EFF3F4; color: #545454; padding: 15px;}
    #click_modal_closed{box-shadow: 0 4px 16px rgba(0, 0, 0, .05);position: absolute;right: 43%;top: -53px;background-color: #ffeaea;padding: 10px 13px;border-radius: 45px;transform: translateX(0%);}
}

@media screen and (max-width:480px) {
    .main_popup .pop_box {
        width: 80vw;
    }
    .main_popup .btn_zone {
        bottom: -38px;
    }

    .main_popup .btn_zone p {
        margin-left: 5px;
        font-size: 0.8rem;
    }

    .main_popup input[type="checkbox"] + label {
        width: 18px;
        height: 18px;
    }

    .main_popup .main_close img {
        width: 16px;
        height: 16px;
    }

    .main_popup .main_close {
        right: -32px;
        padding: 6px 8px;
    }

    .pop-arrow {
        display: none;
    }

    .slick-dots {
        bottom: 10px;
    }

    .slick-dots li {
        margin-right: 10px;
    }

    .slick-dots button {
        width: 8px;
        height: 8px;
    }

    /* 결제 팝업 */
    .pay_popup {
        width: 90vw;
    }

    .pay_popup .pay_header {
        padding: 14px 20px;
    }

    .pay_popup .pay_header h4 {
        text-align: left;
        font-size: 16px;
    }

    .pay_con-box {
        padding: 15px;
    }

    .pay_info {
        padding: 5px 10px;
    }

    .pay_info p {
        text-align: left;
    }

    .pay_info p > span {
        display: block;
    }

    .pay_con {
        font-size: 13px;
    }

    .pay_guide {
        padding: 10px;
    }

    .pay_guide p {
        padding: 16px 12px;
    }

    .pay_guide h5 {
        padding-left: 26px;
        font-size: 16px;
    }

    .pay_guide h5::before {
        width: 16px;
        height: 16px;
    }

    .pay_btn button {
        display: block;
        width: 100%;
        margin-left: 0px;
        margin-bottom: 5px;
    }

    .pay_popup td {
        padding: 3px;
    }

    /* 선택 팝업 */
    .sel_popup {
        width: calc(100% - 40px);
    }

    .sel_popup h4 {
        margin-top: 24px;
        margin-bottom: 36px;
        font-size: 18px;
    }

    .sel_popup .btn-box {
        flex-direction: column;
    }

    .sel_popup .btn-box > a {
        width: 100%;
    }

    .sel_popup .btn-box > a:last-child {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* 251205 수정 */

.main_visual2 {position: relative; width:100%; height:100vh; max-height: 819px; background: url('../img/main_page/main_nbg.png')repeat-x center/ auto 100%; font-family:'OneGothicTitle';}
	.main_visual2 dl{width:80%; margin:auto; display:flex; flex-flow:row nowrap; align-items:center; justify-content: space-around;}
	
	.main_visual2 dt {max-width:40%;}
	.main_visual2 dt img { height:100%;}
	.main_visual2 dd p{font-size:clamp(50px, 6vw, 110px); line-height:clamp(60px, 6vw, 120px); font-weight:normal;}
	.main_visual2 dd span{font-size:clamp(25px, 2.6vw, 50px); line-height:clamp(30px, 2.6vw, 60px);font-weight:100;  font-family:'OneGothicBody'; letter-spacing:3px; display:block; margin:10px 0;}
	.main_visual2 dd b{font-size:clamp(15px, 1.3vw, 25px); line-height:clamp(20px, 1.3vw, 30px); font-weight:100; font-family:'OneGothicBody'; letter-spacing:2px; padding-left:3px;display:block; color:#666;}
	.main_visual2 dd strong{color:#ee4b37; font-weight: unset;}
	
	
@media screen and (max-width:1360px) {
	.main_visual2 {height: 90vh; max-height: 700px;}
	.main_visual2 dl{width:90%; height:100%; justify-content: flex-start}
	.main_visual2 dt{height:100%; flex:1; max-width:unset;}
	.main_visual2 dd{flex:1;}
}


@media screen and (max-width:900px) {
	.main_visual2 {height: 90vh; max-height: 500px;}
	.main_visual2 dl{width:100%;}
	}
	
@media screen and (max-width:600px) {
	.main_visual2 {height: 90vh; max-height: unset;}
	.main_visual2 dl{width:100%;  flex-flow:column wrap;}
	.main_visual2 dt img {max-height:400px;display:block; margin:auto;}
	.main_visual2 dt{order:2;         width: 100%;}
	.main_visual2 dd{order:1; display: flex; flex-direction: column; justify-content: center; max-height: 300px; width: 90%;}
	.main_visual2 dd p br{display:none;}
	}