@charset "utf-8";

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream-7ExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

@font-face{
    font-family: 'SpoqaHanSansNeo-Thin';
    src: url('/about/fonts/SpoqaHanSansNeo-Thin.ttf');
}

@font-face{
    font-family: 'SpoqaHanSansNeo-Light';
    src: url('/about/fonts/SpoqaHanSansNeo-Light.ttf');
}
@font-face{
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('/about/fonts/SpoqaHanSansNeo-Regular.ttf');
}
@font-face{
    font-family: 'SpoqaHanSansNeo-Medium';
    src: url('/about/fonts/SpoqaHanSansNeo-Medium.ttf');
}
@font-face{
    font-family: 'SpoqaHanSansBold';
    src: url('/about/fonts/Spoqa Han Sans Bold.ttf');
}

@font-face{
    font-family: 'THE블랙잭M';
    src: url('/about/fonts/THE블랙잭M.ttf');
}

@font-face {
    font-family: 'OTEnjoystoriesBA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* css 전체 디자인 코드 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'SpoqaHanSansNeo-Regular';
    font-weight: normal;
}

img{
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-auto;
    image-rendering: -o-auto;
    -ms-image-rendering: nearest-neighbor;
}


/* channel plugin */
.cEtkaf.textLauncherContent {
    padding: 20px 62px 20px 30px !important;
}

.lfSkuP{
    right: 46px!important;
}

.float_btn{
    display: none;
}

.float_btn > a > div {
    will-change: transform, opacity, border-radius;
    display: block !important;
    position: fixed;
    height: 58px !important;
    padding: 20px 62px 20px 30px !important;
    background: rgb(255, 255, 255) !important;
    box-sizing: border-box !important;
    box-shadow: rgb(0 0 0 / 12%) 0px 3px 12px 0px !important;
    color: black !important;
    font-family: NotoSansKR, NotoSansJP, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "맑은 고딕", "Yu Gothic", "Segoe UI", Roboto, system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.29 !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: box-shadow 0.2s ease-out 0s !important;
    user-select: none !important;
    cursor: pointer !important;
    right: 60px !important;
    border-radius: 30px 10px 10px 30px !important;
    animation: 0.5s cubic-bezier(0.24, 0.06, 0, 0.97) 0.55s 1 normal backwards running clICxo !important;
    bottom: 111px;
    width: 148px;
    text-align: left;
    z-index: 10;
}

.float_btn > a:first-child > div {
    bottom: 197px;
    z-index: 10;
}

.float_btn > a > img {
    animation: 0.2s cubic-bezier(0.1, 0, 0.6, 1) 0.35s 1 normal backwards running fcEaNs !important;
}

.float_btn > a:first-child > img {
    display: block;
    position: fixed;
    right: 24px;
    bottom: 195px;
    box-shadow: rgb(0 0 0 / 12%) 0px 3px 12px 0px !important;
    border-radius: 50px;
}

.float_btn > a > img {
    animation: 0.2s cubic-bezier(0.1, 0, 0.6, 1) 0.35s 1 normal backwards running fcEaNs !important;
    z-index: 20;
}


/* top_banner */
.wrap{
    position: relative;
}
.top_banner{
    width: 100%;
}


.top_banner .close_btn{
    position: absolute;
    top: 1%;
    right: 2%;
    cursor: pointer;
    width: 2%;
}
.top_banner .banner{
    display: block;
    width: 100%;
}
.top_banner .banner_m{
    display: none;
}
.top_banner .close_btn_m{
    display: none;
}



/* header */

.new_floating_menu{
    position: fixed;
    bottom: 10px;
    right: 12px;
    width: 189px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 1;
}
.new_floating_menu li{
    width: 46%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.new_floating_menu li:nth-of-type(1){
    margin-bottom: 15px;
    opacity: 0;
}
.new_floating_menu li:nth-of-type(2){
    margin-bottom: 15px;
}
.new_floating_menu li img{
    display: block;
    width: 100%;
    cursor: pointer;
}
.new_floating_menu li img:nth-of-type(2){
    display: none;
}

@media (max-width:450px){
    .new_floating_menu{
        bottom: 25px;
        right: 22px;
        width: 87px;
    }
    .new_floating_menu li:nth-of-type(1),
    .new_floating_menu li:nth-of-type(2){
        margin-bottom: 8px;
    }
    .new_floating_menu li:nth-of-type(4){
        box-shadow: none;
    }
    .new_floating_menu li img:nth-of-type(1){
        display: none;
    }
    .new_floating_menu li img:nth-of-type(2){
        display: block;
        border-radius: 4px;
    }
}

/* footer */
.footer{
    width: 100%;
    background-color: #000;
}
.footer .container{
    width: 1000px;
    margin: 0 auto;
    padding: 55px 0 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer .left{
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    line-height: 30px;
    word-break: keep-all;
}
.footer .left .logo{
    margin-bottom: 13px;
}
.pay_footer{
    margin-bottom: 8.5vw;
}

/* index (메인) */
.main_slide{
    background-color: #F2F3F5;
    padding-top: 80px;
}
.main_slide .container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.main_slide .wrap{
    width: 1000px;
    margin: 0 auto;
}
.main_slide .btn_area{
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}
.main_slide ul{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 1000px;
    margin: 0 auto;
}
.main_slide ul li{
    font-size: 18px;
    color: #6B7684;
    text-align: center;
    width: 20%;
    padding: 15px 0;
    position: relative;
    cursor: pointer;
    border-bottom: 4px solid transparent;
}
.main_slide ul li.active{
    color: #397FFF;
    font-family: 'SpoqaHanSansNeo-Medium';
    border-bottom: 4px solid #397FFF;
}
.main_slide ul li:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 30px;
    background-color: #ccc;
}
.main_slide .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
    display: none;
}
.main_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    background-image: url(/about/images/main_prev_icon.png);
    width: 80px;
    height: 80px;
    left: -80px;
    right: auto;
    top: -290px;
}

.main_slide .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
    display: none;
}
.main_slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    background-image: url(/about/images/main_next_icon.png);
    width: 80px;
    height: 80px;
    right: -80px;
    left: auto;
    top: -290px;
}
.main_slide .swiper-slide{
    height: 430px;
    background-repeat: no-repeat;
    background-position: center;
}
.main_slide .swiper-slide.slide_01{
    background-image: url(/about/images/main_slide_01.jpg);
}
.main_slide .swiper-slide.slide_02{
    background-image: url(/about/images/main_slide_02.jpg);
}
.main_slide .swiper-slide.slide_01 > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1000px;
    margin: 50px auto 0;
}
.main_slide .swiper-slide.slide_01 > div a{
    color: #fff;
    font-size: 20px;
    font-family: 'S-CoreDream-7ExtraBold';
    background-color: #fd1f48;
    width: 214px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(253,31,72,0.25);
    margin-top: 250px;
}

.main_slide .slide-control{
    position: absolute;
    bottom: 39px;
    right: -20px;
    z-index: 1;
}
.main_slide .slide-control .play,
.main_slide .slide-control .stop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 100;
}
.main_slide .slide-control .play.active,
.main_slide .slide-control .stop.active {
    display: block;
}

.main_title{
    font-size: 40px;
    text-align: center;
    letter-spacing: -2px;
    word-break: keep-all;
    font-family: 'SpoqaHanSansBold';
    line-height: 50px;
    margin-bottom: 24px;
    color: #000;
}
.main_title .blue{
    color: #397FFF;
    font-family: 'SpoqaHanSansBold';
}
.main_title .regular{
    font-family: 'SpoqaHanSansNeo-Regular';
    color: #000;
}
.main_title .medium{
    font-family: 'SpoqaHanSansNeo-Medium';
    color: #000;
}
.main_title .gray{
    color: #B8B7B7;
}
.main_title .white{
    color: #fff;
    font-family: 'SpoqaHanSansBold';
}
.main_title .m_br{
    display: none;
}
.main_title.top{
    margin-top: 40px;
}

.main_txt{
    font-size: 20px;
    color: #333;
    line-height: 30px;
    margin-bottom: 40px;
    word-break: keep-all;
}
.main_txt span{
    color: #000;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.main_txt .m_br{
    display: none;
}
.main_top_txt{
    font-size: 18px;
    color: #4E5968;
    margin-bottom: 5px;
    word-break: keep-all;
}
.main_sec .container{
    width: 1000px;
    margin: 0 auto;
}

/* 221011 main_sec_add */
.main_sec_add .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 0;
}
.main_sec_add img{
    display: block;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
}
.main_sec_add h1{
    font-size: 40px;
    font-weight: bold;
    line-height: 55px;
    letter-spacing: -1px;
    margin-bottom: 30px;
}
.main_sec_add h1 span{
    color: #B3B3B3;
    font-weight: bold;
}
.main_sec_add p{
    font-size: 20px;
    letter-spacing: -1px;
    margin-bottom: 5px;
}
.main_sec_add h2{
    font-size: 25px;
    color: #3182F6;
    position: relative;
    letter-spacing: -1px;
    margin-bottom: 40px;
}
.main_sec_add h2::after{
    content: '';
    background-image: url(/about/images/main_add_img_02.png);
    background-repeat: no-repeat;
    width: 416px;
    height: 8px;
    position: absolute;
    bottom: -6px;
    left: 0;
}
.main_sec_add ul li{
    font-size: 18px;
    line-height: 28px;
    position: relative;
    padding-left: 12px;
    letter-spacing: -1px;
}
.main_sec_add ul li::after{
    content: '-';
    position: absolute;
    top: 0;
    left: 0;
}
.main_sec_add ul li br{
    display: none;
}

.main_sec_01{
    background-image: url(/about/images/main_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.main_sec_01 .container{
    padding: 100px 0;
}
.main_sec_01 h2{
    font-family: 'THE블랙잭M';
    font-size: 30px;
    color: #fff;
    background-color: #3182F6;
    width: 490px;
    height: 60px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.main_sec_01 h1{
    font-size: 40px;
    text-align: center;
    position: relative;
    letter-spacing: -2px;
    margin: 25px 0 55px;
}
.main_sec_01 h1 img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.main_sec_01 h1 img:nth-of-type(2){
    display: none;
}
.main_sec_01 h1 b{
    font-weight: bold;
}
.main_sec_01 h1 span{
    font-size: 50px;
    font-weight: bold;
    color: #3182F6;
    border: 2px solid #3182F6;
    border-radius: 5px;
    padding: 0 8px;
}
.main_sec_01 .container > img{
    width: 100%;
}
.main_sec_01 p{
    font-size: 30px;
    color: #4E5968;
    text-align: center;
    margin: 28px 0 22px;
}
.main_sec_01 .container > div{
    width: 100%;
    background-color: #F2F3F5;
    border-radius: 20px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    padding: 45px 0;
}

.main_sec_02{
    background-color: #F2F3F5;
}
.main_sec_02 .container{
    padding: 103px 0 100px;
}
.main_sec_02 .main_title{
    text-align: left;
}
.main_sec_02 .container > ul{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.main_sec_02 .container > ul > li{
    width: 48%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 30px 0;
}
.main_sec_02 .container > ul > li > span{
    font-size: 20px;
    width: 188px;
    height: 48px;
    line-height: 48px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #F2F3F5;
    color: #555;
    font-family: 'SpoqaHanSansNeo-Medium';
    margin-bottom: 20px;
}
.main_sec_02 .container > ul > li > ul li{
    font-size: 18px;
    color: #555;
    margin-bottom: 2px;
}
.main_sec_02 .container > ul > li:nth-of-type(2){
    border: 5px solid #397FFF;
    background-image: url(/about/images/main_img_02.png);
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    background-color: #000;
}
.main_sec_02 .container > ul > li:nth-of-type(2) > span{
    font-size: 25px;
    color: #fff;
    background-color: #397FFF;
    margin-bottom: 94px;
}
.main_sec_02 .container > ul > li:nth-of-type(2) > p{
    font-size: 30px;
    line-height: 40px;
}
.main_sec_02 .container > ul > li:nth-of-type(2) > p:nth-of-type(2){
    font-family: 'OTEnjoystoriesBA';
    font-size: 35px;
    margin-top: 5px;
    color: #397FFF;
}
.main_sec_03 .container{
    padding: 100px 0;
}
.main_sec_03 .main_title{
    text-align: left;
}
.main_sec_03 ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 80px auto 0;
}
.main_sec_04{
    background-color: #191F28;
}
.main_sec_04 .container{
    padding: 103px 0 100px;
}
.main_sec_04 .main_title{
    text-align: left;
}
.main_sec_04 .main_title .medium,
.main_sec_04 .main_top_txt{
    color: #fff;
}
.main_sec_04 ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 35px 0;
}
.main_sec_04 ul li{
    width: 48%;
}
.main_sec_04 ul li img{
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
.main_sec_04 ul li p{
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    margin-top: 10px;
}

.free_top{
    background: url('/about/img/sub-benner.png') no-repeat center / cover;
    padding: 168px 0 168px 360px;
}
.free_tit{
    color: var(--blue3, #1A69D9);
    font-family: Pretendard;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-bottom: 22px;
}
.free_top h3{
    color: var(--white1, #FFF);
    font-family: Pretendard;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
}
.free_top p{
    color: var(--white1, #FFF);
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-top: 40px;
}
.free .container{
    padding: 15px 0 10px;
}
.free .main_title{
    margin-bottom: 15px;
}
.free .m_br{
    display: none;
}
.free .sub{
    font-size: 20px;
    text-align: center;
    color: #666;
    margin-bottom: 60px;
    letter-spacing: -0.8px;
    word-break: keep-all;
    font-family: 'SpoqaHanSansNeo-Regular';
}
.free .input_box #qForm{
    width: 717px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.free .input_box #qForm > div{
    width: 100%;
}
.free .input_box #qForm > div:nth-of-type(3){
    display: flex;
    align-items: baseline;
}
.free .input_box #qForm > div > div{
    display: flex;
    align-items: center;
}
.free .input_box #qForm div label{
    width: 93px;
    display: inline-block;
    font-size: 20px;
    font-family: 'SpoqaHanSansNeo-Regular';
}
.free .input_box #qForm > div:nth-of-type(3) label{
    margin-top: 20px;
}
.free .input_box #qForm div input{
    width: 100%;
    height: 55px;
    font-size: 18px;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'SpoqaHanSansNeo-Light';
    padding-left: 15px;
}
.free .input_box #qForm textarea{
    width: calc(100% - 93px);
    height: 200px;
    font-size: 18px;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'SpoqaHanSansNeo-Light';
    resize: none;
    padding: 15px;
}
.free .input_box #qSendBtn{
    width: 216px;
    padding: 13px 0;
    font-size: 20px;
    color: #fff;
    background-color: #397fff;
    border-radius: 10px;
    /* margin: 20px auto 0; */
    margin: 20px 0 0;
    cursor: pointer;
    border: none;
}



/* intro */
.header.sub{
    background-color: #fff;
}
.intro_title_box{
    width: 100%;
    height: 480px;
    background-image: url(/about/images/intro_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.intro_title_box .container{
    padding-top: 210px;
}
.down_icon{
    width: 31px;
    height: 30px;
    margin: 85px auto 0;
    cursor: pointer;
}
.down_icon img{
    animation-name: down;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes down{
    0%{
        margin-top: 0;
        opacity: 1;
    }
    100%{
        margin-top: 10px;
        opacity: 0;
    }
}
.intro_txt_box1{
    padding: 90px 0;
}
.intro_txt_box2{
    padding: 90px 0;
}
.intro_sub{
    font-size: 18px;
    color: #141414;
    text-align: center;
    margin-bottom: 9px;
    font-weight: 500;
    letter-spacing: -0.5px;
}
.intro_title{
    font-size: 43px;
    font-weight: bold;
    color: #141414;
    text-align: center;
    line-height: 65px;
    letter-spacing: -1px;
}
.intro_title .gray{
    color: #cacaca;
}
.intro_scroll{
    background-color: #fbfbfb;
}
.intro_scroll .container{
    width: 1300px;
    height: 590px;
    position: relative;
    overflow: hidden;
    padding-top: 125px;
    margin: 0 auto;
}
.intro_scroll .img_box{
    position: absolute;
    top: 0;
    right: 0;
    width: 690px;
    height: 100%;
    overflow: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.intro_scroll .img_box::-webkit-scrollbar{
    display: none; /* Chrome, Safari, Opera*/
}
.intro_scroll .img_box .scr_img{
    position: absolute;
    top: 84px;
    left: 0;
    width: 100%;
}
.intro_scroll .img_box_m{
    display: none;
}
.intro_scroll .intro_title{
    text-align: left;
    margin-bottom: 30px;
}
.intro_scroll .sub{
    font-size: 18px;
    color: #474747;
    font-weight: 500;
    letter-spacing: -1px;
    word-break: keep-all;
}

.intro_five{
    width: 100%;
    background-color: #fbfbfb;
    padding: 100px 0;
}
.intro_five .five{
    width: 1270px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.intro_five .five .top_txt{
    color: #cacaca;
    font-size: 25px;
    font-weight: bold;
}
.intro_five .five .bt_txt{
    color: #131313;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 15px;
}
.intro_five .five .txt{
    color: #5e5e5e;
    font-size: 18px;
    letter-spacing: -1px;
    font-weight: 500;
    word-break: keep-all;
}



/* payment */
.bt_banner_m{
    display: none;
}
.bt_banner{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.pay_title_box{
    width: 100%;
    height: 480px;
    background-image: url(/about/images/pay_top_bg.png);
    background-repeat: no-repeat;
    background-position: center 80px;
}
.pay_title_box .container{
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding-top: 70px;
}
.pay_title_box .sub{
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    letter-spacing: -0.5px;
    word-break: keep-all;
}
.common_01 .container{
    width: 1000px;
    margin: 0 auto;
}
.pay_sec_01{
    background-color: #F7F7F7;
    padding: 80px 0;
}
.pay_sec_01 img{
    width: 100%;
    display: block;
    margin: 0 auto;
}
.pay_sec_01 img:nth-of-type(2){
    display: none;
}
.pay_sec_02{
    padding: 80px 0;
}
.pay_sec_02 ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pay_sec_02 ul li{
    width: 32%;
    border: 1px solid #ddd;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 30px 40px 40px;
    cursor: pointer;
}
.pay_sec_02 ul li > div p{
    font-size: 20px;
    color: #141414;
    font-family: 'SpoqaHanSansBold';
    letter-spacing: -0.5px;
}
.pay_sec_02 ul li > div p span{
    font-size: 16px;
}
.pay_sec_02 ul li > span{
    width: 53px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8D8D8;
    border-radius: 50%;
}
.pay_sec_02 ul li.active > div p{
    color: #fff;
}
.pay_sec_02 ul li.active > span{
    border-color: transparent;
    background-color: rgba(0,0,0,0.2);
}
.pay_sec_02 ul li.active_01{
    background-color: #397FFF;
    border-color: #397FFF;
}
.pay_sec_02 ul li.active_02{
    background-color: #8B00CF;
    border-color: #8B00CF;
}
.pay_sec_02 ul li.active_03{
    background-color: #2FA76E;
    border-color: #2FA76E;
}
.blue_txt{
    color: #397FFF;
    font-weight: bold;
}
.purple_txt{
    color: #8B00CF;
    font-weight: bold;
}
.green_txt{
    color: #2FA76E;
    font-weight: bold;
}
.pay_sec_03 .container{
    width: 800px;
    margin: 0 auto;
}
.pay_title{
    font-size: 35px;
    line-height: 44px;
    font-family: 'SpoqaHanSansBold';
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: -1px;
}
.pay_sec_03{
    padding: 20px 0 100px;
}
.pay_sec_03 h2{
    font-size: 25px;
    text-align: center;
    letter-spacing: -1px;
}
.pay_sec_03 .container > p:nth-of-type(1){
    text-align: center;
    color: #555;
    font-size: 18px;
    line-height: 30px;
    margin: 30px auto 40px;
    word-break: keep-all;
}
.pay_sec_03 .container > p:nth-of-type(1) .m_br{
    display: none;
}

.pay_sec_03 .container > p:nth-of-type(2){
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: bold;
    font-size: 25px;
    letter-spacing: -0.8px;
    line-height: 25px;
    margin-bottom: 15px;
}
.pay_sec_03 .container > p:nth-of-type(2) span{
    color: rgba(0,0,0,0.2);
    font-size: 20px;
    font-family: 'THEBlackjackM';
    letter-spacing: -0.5px;
}
.pay_sec_03 .video_area{
    width: 100%;
    height: 382px;
    background-color: #000;
    margin-bottom: 60px;
}
.pay_sec_03 ul li{
    border: 1px solid #ddd;
    border-radius: 20px;
}
.pay_sec_03 ul li .txt_area p:nth-of-type(1){
    font-size: 20px;
    color: #222;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    letter-spacing: -1px;
    margin-bottom: 8px;
}
.pay_sec_03 ul li .txt_area p:nth-of-type(2){
    font-size: 15px;
    color: #595959;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -1px;
    word-break: keep-all;
}
.pay_sec_03 .list_01{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pay_sec_03 .list_01 li{
    width: 48.9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
}
.pay_sec_03 .list_02 li{
    display: flex;
    align-items: center;
    padding: 32px 50px;
    margin-bottom: 20px;
}
.pay_sec_03 .list_02 li:last-child{
    margin-bottom: 0;
}
.pay_sec_03 .list_02 li img{
    display: block;
    margin-right: 30px;
}

.pay_sec_04{
    background-color: rgba(57,127,255,0.05);
    padding: 91px 0 109px;
}
.pay_sec_04.purple{
    background-color: rgba(139,0,207,0.03);
}
.pay_sec_04.green{
    background-color: rgba(47,167,110,0.04);
}
.common_02 .container{
    width: 1200px;
    margin: 0 auto;
}
.pay_sec_04 ul{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.pay_sec_04 ul li{
    width: 31.5%;
    background-color: #fff;
    border-radius: 30px;
    text-align: center;
    padding-bottom: 50px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}
.pay_sec_04 ul li .img_area{
    width: 100%;
    position: relative;
    margin-bottom: 40px;
}
.pay_sec_04 ul li .img_area img{
    display: block;
    width: 100%;
    margin: 0 auto;
}
.pay_sec_04 ul li .img_area p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    width: 100%;
}
.pay_sec_04 ul li > p{
    font-size: 20px;
    line-height: 30px;
    color: #333;
    margin-bottom: 35px;
}
.pay_sec_04.purple ul li > p{
    margin-bottom: 0;
}
.pay_sec_04 ul li:nth-of-type(3) > p{
    margin-bottom: 20px;
}
.pay_sec_04 ul li > span{
    font-size: 25px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -1px;
    font-weight: 900;
    display: inline-block;
    position: relative;
}
.pay_sec_04 ul li > span::after{
    content: '';
    display: inline-block;
    width: 105%;
    height: 10px;
    background-color: rgba(57,127,255,0.1);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.pay_sec_04 ul.short{
    justify-content: center;
    gap: 0 20px;
}
.pay_sec_05 .container{
    padding: 100px 0 70px;
}
.pay_sec_05 h1{
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    margin-bottom: 40px;
    font-size: 25px;
}
.pay_sec_05 h1 span{
    font-family: '나눔명조';
    font-weight: 900;
    font-size: 35px;
    position: relative;
    padding: 0 25px;
    margin-right: 20px;
}
.pay_sec_05 h1 span::before{
    content: '';
    width: 4px;
    height: 29px;
    background-color: #000;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.pay_sec_05 h1 span::after{
    content: '';
    width: 4px;
    height: 29px;
    background-color: #000;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.pay_sec_05 h1 p b{
    font-weight: bold;
    margin-right: 2px;
}
.pay_sec_05 ul li span{
    margin-right: 30px;
}
.pay_sec_05 ul li p .m_br{
    display: none;
}
.pay_sec_05 ul li{
    display: flex;
    font-size: 25px;
    border-radius: 20px;
    word-break: keep-all;
}
.pay_sec_05 ul li:nth-child(odd){
    border: 1px solid #ddd;
    padding: 34px 40px;
    margin-bottom: 20px;
}
.pay_sec_05 ul li:nth-child(even){
    border: 1px dashed #ddd;
    padding: 25px 40px;
    margin-bottom: 30px;
}
.pay_sec_05 ul li:nth-child(even) p{
    font-size: 20px;
}
.pay_sec_06{
    background-color: #F7F7F7;
}
.pay_sec_06 .container{
    padding: 150px 0;
}
.pay_sec_06 .container > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 150px;
}
.pay_sec_06 .slide_area{
    width: 648px;
    position: relative;
}
.pay_sec_06 .slide_area img{
    display: block;
    width: 100%;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
    display: none;
}
.slide_area .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    background-image: url(/about/images/cost_prev_icon.png);
    width: 68px;
    height: 68px;
    left: -34px;
}
.slide_area .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    background-image: url(/about/images/cost_next_icon.png);
    width: 68px;
    height: 68px;
    right: -34px;
}
.pay_sec_06 .txt_area h2{
    font-size: 20px;
    color: #fff;
    width: 357px;
    height: 40px;
    line-height: 40px;
    display: block;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #397FFF;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.pay_sec_06 .txt_area h1{
    font-family: 'GmarketSansBold';
    font-size: 40px;
    line-height: 59px;
    margin-bottom: 25px;
    letter-spacing: -2px;
}
.pay_sec_06 .txt_area h1 span{
    font-family: 'GmarketSansBold';
}
.pay_sec_06 .txt_area p{
    position: relative;
    padding-left: 13px;
    font-size: 20px;
    line-height: 30px;
    word-break: keep-all;
}
.pay_sec_06 .txt_area p::after{
    content: '-';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.pay_sec_06 .txt_area p:not(:last-child){
    margin-bottom: 20px;
}
.pay_sec_06 .txt_area > span{
    font-size: 15px;
    font-weight: bold;
}
.pay_sec_06 .container > div:nth-of-type(2) .txt_area h2{
    background-color: #FF6767;
}
.pay_sec_06 .container > div:nth-of-type(2) .txt_area h1 span{
    color: #FF6767
}
.pay_sec_06 .container > div:nth-of-type(2) .img_area img:nth-of-type(2){
    display: none;
}
.pay_sec_06 .container > div:nth-of-type(3){
    margin-bottom: 0;
}
.pay_sec_06 .container > div:nth-of-type(3) .txt_area h1 span{
    color: #7439FF;
}


/* program */
.pro_title_box{
    width: 100%;
    background-image: url(/about/images/program_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.pro_title_box .container{
    width: 1000px;
    margin: 0 auto;
    padding: 180px 0 100px;
}
.pro_title_box .top_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.pro_title_box .why{
    font-size: 100px;
    color: rgba(89,89,89,0.2);
    font-weight: bold;
    margin-bottom: 20px;
}
.pro_title_box .main_title{
    text-align: left;
    margin-bottom: 0;
}
.pro_title_box .title .point{
    color: #397FFF;
}
.pro_title_box iframe{
    width: 559px;
}
.pro_title_box ul{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
.pro_title_box li{
    width: 23%;
    height: 230px;
    text-align: center;
    font-size: 25px;
    color: #0A0A0B;
    font-weight: bold;
    background-color: #fff;
    box-shadow: 1px 3px 16px rgba(0,108,255,0.16);
    border-radius: 32px;
    padding-top: 88px;
    letter-spacing: -1px;
}
.pro_title_box li .point{
    color: #397FFF;
    font-family: 'SpoqaHanSansBold';
}
.pro_title_box li:nth-of-type(1){
    background-color: #397FFF;
    color: #fff;
    padding-top: 72px;
}
.pro_title_box li:nth-of-type(1) .point{
    color: #ffc0ca;
    font-family: 'SpoqaHanSansBold';
}

.chat{
    background-color: #f7f7f7;
    padding: 105px 0 100px;
}
.chat_list{
    position: relative;
    width: 88%;
    margin: 0 auto;
}
.chat_list1{
    padding-bottom: 286px;
    width: auto!important;
}
.chat_img{
    position: absolute;
    top: 137px;
    left: 50%;
    transform: translateX(-50%);
}

.chat_box{
    background-color: #fff;
    width: 1000px;
    margin: 0 auto;
    border-radius: 50px;
    padding: 160px 0 80px;
}
.chat_box .chat_list .left{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.chat_box .chat_list .left p{
    font-size: 20px;
    color: #131313;
    font-weight: bold;
    border-radius: 20px;
    background-color: #F1F1F1;
    padding: 25px 30px;
    width: 660px;
    margin-left: 20px;
    word-break: keep-all;
}
.chat_box .chat_list .right{
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 40px;
}
.chat_box .chat_list:nth-of-type(1) .right{
    align-items: center;
}
.chat_box .chat_list .right p{
    font-size: 18px;
    color: #fff;
    border-radius: 20px;
    background-color: #397FFF;
    padding: 20px 30px;
    width: 660px;
    margin-right: 20px;
    letter-spacing: -1.3px;
    line-height: 33px;
    word-break: keep-all;
}
.chat_box .chat_list:nth-of-type(4) .right{
    margin-bottom: 0;
}
.chat_box .chat_list .right p span{
    font-size: 20px;
    font-weight: bold;
}
.chat_box .chat_list .left img,
.chat_box .chat_list .right img{
    width: 90px;
}


.advan{
    background-image: url(/about/images/program_bt_bg.jpg);
    background-size: cover;
    width: 100%;
    padding: 105px 0 100px;
}
.advan ul{
    width: 1200px;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
}
.advan li{
    width: 185px;
    height: 185px;
    background-color: #397FFF;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 50%;
    font-size: 21px;
    color: #fff;
}
.advan li img{
    margin-bottom: 20px;
}

/* use */
.use_title_box{
    width: 100%;
    height: 559px;
    background-image: url(/about/images/use_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.use_title_box .container{
    padding-top: 250px;
}
.use_title_box .title{
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    letter-spacing: -1px;
    word-break: keep-all;
}
.use_title_box .title .point{
    color: #397fff;
}
.use_top .container{
    width: 1103px;
    margin: 0 auto;
    padding: 120px 0 150px;
    position: relative;
}
.use_top .bg{
    display: block;
    margin: 0 auto;
}
.use_top .bg_m{
    display: none;
}
.use_top .btn_box{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    position: absolute;
    top: 560px;
    left: 0;
}
.use_top p{
    display: none;
}
.use_step{
    background-color: #F7F7F7;
}
.use_step .page{
    position: relative;
}
.use_step #scr{
    position: absolute;
    top: 22%;
    left: 0;
    width: 10px;
    height: 10px;
}
.tab_menu{
    width: 550px;
    margin: 0 auto 200px;
    display: flex;
    justify-content: space-between;
}
.tab_menu li{
    width: 250px;
    height: 70px;
    background-color: #1EC800;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #fff;
    box-shadow: inset 2px 4px 3px rgba(255,255,255,0.3);
    cursor: pointer;
}
.tab_menu li:nth-of-type(2){
    background-color: #3E2A2E;
    color: #FFE600;
}
.tab_menu li img{
    margin-right: 10px;
}
.use_step .container{
    width: 1308px;
    margin: 0 auto;
    padding: 110px 0 50px;
}
.use_step .pc_img{
    width: 100%;
    display: block;
}
.use_step .m_img{
    display: none;
}

/* tip */
.tip_title_box{
    width: 100%;
    height: 480px;
    background-image: url(/about/images/tip_bg.png);
    background-repeat: no-repeat;
    background-position: center 80px;
}
.tip_title_box .container{
    padding-top: 245px;
}
.tip_title_box .down_icon{
    margin: 100px auto 0;
}
.tip_title_box .title{
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    letter-spacing: -1px;
    word-break: keep-all;
}
.board .container{
    width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
    position: relative;
    margin-bottom: 100px;
}
.board .search_box{
    position: relative;
    width: 250px;
    margin: 0 0 15px auto;
}
.board .search_box input{
    width: 100%;
    height: 50px;
    font-size: 15px;
    color: #888888;
    border: 1px solid #eee;
    padding: 0 20px;
}
.board .search_box img{
    position: absolute;
    top: 16px;
    right: 20px;
}
.board_list_box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.board_list_box .list{
    width: 23.5%;
    border: 1px solid #eee;
    margin-bottom: 30px;
}
.board_list_box .list .img_box{
    background-color: #EEECDB;
    width: 100%;
    height: 200px;
}
.board_list_box .list .txt_box{
    padding: 20px;
}
.board_list_box .title{
    font-size: 18px;
}
.board .heart{
    color: #AC0000;
    display: flex;
    align-items: center;
    font-size: 15px;
    margin: 26px 0 21px;
}
.board .heart img{
    margin-right: 5px;
}
.board .name{
    font-size: 12px;
    color: #555;
}
.board .views{
    font-size: 12px;
    color: #888;
}
.board .views span{
    font-size: 10px;
    margin-left: 5px;
}
.board .write_btn{
    width: 130px;
    height: 50px;
    color: #fff;
    background-color: #397FFF;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
}
.board.write .write_btn{
    border: none;
    outline: none;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
}
.board .list_btn{
    width: 130px;
    height: 50px;
    color: #888;
    border: 1px solid #C4C4C4;
    background-color: #fff;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
}
.board .pagination{
    width: 200px;
    display: flex;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.board .pagination span{
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -1px;
    cursor: pointer;
}
.board_write{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.board_write .top_menu{
    background-color: #eee;
    height: 72px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #ccc;
}
.board_write .write_box{
    padding: 100px;
    display: flex;
    flex-direction: column;
}
.board_write .write_box .title{
    width: 100%;
    border: none;
    outline: none;
    font-size: 40px;
    border-bottom: 1px solid #707070;
    padding-bottom: 30px;
    margin-bottom: 40px;
}
.board_write .write_box textarea{
    width: 100%;
    height: 500px;
    border: none;
    outline: none;
    resize: none;
    font-size: 20px;
}
.board_detail{
    width: 100%;
}
.board_detail .title_box{
    border-top: 1px solid #C4C4C4;
    border-bottom: 1px solid #C4C4C4;
    padding: 20px;
}
.board_detail .title{
    font-size: 20px;
    margin-bottom: 25px;
}
.board_detail .heart{
    margin: 0;
    margin-left: 50px;
}
.board_detail .title_box>div{
    display: flex;
    align-items: flex-start;
}
.board_detail .con_box{
    width: 100%;
    padding: 50px 100px;
    border-bottom: 1px solid #C4C4C4;
}
.board_detail .con_box .img_box{
    width: 100%;
    height: 477px;
    background-color: #EEECDB;
    margin-top: 30px;
}
.board_detail .pagination_box{
    border-bottom: 1px solid #C4C4C4;
    padding: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.board_detail .pagination_box img{
    margin-right: 30px;
}
.board_detail .next_box img{
    transform: rotate(90deg);
}
.board_detail .prev_box img{
    transform: rotate(-90deg);
}

/* api */
.api.pt{
    padding: 280px 0 100px;
}
.api .container{
    width: 900px;
    margin: 0 auto;
}
.welcome{
    background-color: #FBFBFB;
    padding: 87px 0 80px;
    text-align: center;
}
.api_title{
    font-size: 25px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}
.api_title img{
    margin-right: 10px;
}
.api_box .list{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.api_box .list .title{
    font-size: 20px;
    margin-bottom: 10px;
}
.api_box .list input{
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 60px;
    width: 100%;
    font-size: 20px;
    font-weight: 300;
    padding: 0 20px;
    outline: none;
}
.api_btn{
    width: 460px;
    margin: 100px auto 0;
    display: flex;
    justify-content: space-between;
}
.api_btn button{
    width: 220px;
    height: 60px;
    font-size: 22px;
    border-radius: 30px;
    background-color: #F1F1F1;
    border: none;
    outline: none;
    cursor: pointer;
}
.api_btn button:nth-of-type(2){
    color: #fff;
    background-color: #1EC800;
}
.api .pc_img{
    display: block;
    margin: 0 auto;
    max-width: 534px;
    width: 100%;
}
.api .m_img{
    display: none;
}
.api h1{
    font-size: 40px;
    font-family: 'SpoqaHanSansBold';
    margin-top: 30px;
}
.api h1 span{
    font-family: 'SpoqaHanSansBold';
    position: relative;
    z-index: 1;
}
.api h1 span::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 10px;
    background-color: #FFE300;
    z-index: -1;
}
.api .setting{
    font-size: 20px;
    margin: 22px 0 50px;
    word-break: keep-all;
    color: #555;
}
.api .set_btn{
    width: 220px;
    height: 60px;
    border-radius: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 25px;
    background-color: #3E2A2E;
    color: #FFE600;
    box-shadow: inset 2px 4px 3px rgba(255,255,255,0.3);
}

/* complete 220214 추가 */
.complete{
    background-color: #E9ECEF;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.complete h1{
    display: flex;
    align-items: center;
    font-size: 40px;
    margin-bottom: 80px;
}
.complete h1 img{
    margin-right: 25px;
}
.complete>div{
    font-size: 22px;
    background-color: #fff;
    width: 722px;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -1px;
}
.complete>a{
    display: block;
    width: 162px;
    height: 50px;
    line-height: 50px;
    background-color: #397FFF;
    border-radius: 5px;
    text-align: center;
    color: #fff;
}

/* manage(관리자페이지) 추가 */
.admin_header{
    background-color: #397fff;
}
.admin_header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin_header .left{
    display: flex;
    align-items: center;
}
.admin_header .left li{
    width: 219px;
    height: 95px;
    color: #fff;
    font-family: 'SpoqaHanSansBold';
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin_header .left li:nth-of-type(1){
    background-color: #2562ff;
}
.admin_header .left li:nth-of-type(1) img{
    width: 126px;
}
.admin_header .left li:not(:nth-of-type(1)) img{
    margin-left: 12px;
}
.admin_header .right{
    border: 1px solid #fff;
    background: none;
    color: #fff;
    font-family: 'SpoqaHanSansBold';
    font-size: 18px;
    padding: 3px 23px 8px;
    border-radius: 8px;
    margin: 0 86px 0 13px;
}
.admin_header .ham_btn{
    display: none;
}
.admin_header .ham_menu{
    display: none;
}

.manage{
    background-color: #f3f3f3;
}
.manage .container{
    width: 1465px;
    margin: 0 auto;
    padding: 59px 0 79px;
}
.manage table{
    box-shadow: 0 0 13px rgba(0,0,0,0.13);
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.manage table th{
    background-color: #484747;
    color: #fff;
    font-family: 'SpoqaHanSansBold';
    font-size: 20px;
    border-right: 1px solid #b7b7b7;
    padding: 20px 0;
}
.manage table tr th:nth-of-type(1){
    width: 128px;
}
.manage table tr th:nth-of-type(2){
    width: 548px;
}
.manage table tr th:nth-of-type(3){
    width: 246px;
}
.manage table tr th:nth-of-type(4){
    width: 308px;
}
.manage table tr th:nth-of-type(5){
    border-right: none;
}
.manage table td{
    background-color: #fff;
    color: #484747;
    font-family: 'SpoqaHanSansNeo-Light';
    font-size: 17px;
    border-bottom: 1px solid #b7b7b7;
    border-right: 1px solid #b7b7b7;
    padding: 24px 15px;
}
.manage table tr td:nth-of-type(5){
    border-right: none;
}
.manage table tr:last-child td{
    border-bottom: none;
}


/* info_change */
.change .container{
    width: 1000px;
    margin: 0 auto;
    padding: 57px 0 102px;
}
.change h1{
    font-size: 30px;
    font-family: 'SpoqaHanSansBold';
    margin-bottom: 50px;
}
.change .list{
    display: flex;
    margin-bottom: 57px;
}
.change .list:last-child{
    margin-bottom: 0;
}
.change .list > h2{
    font-size: 25px;
    width: 168px;
}
.change .list ul li{
    margin-bottom: 40px;
}
.change .list ul li > p{
    font-size: 18px;
    margin-bottom: 10px;
}
.change .list input{
    width: 250px;
    height: 55px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 18px;
    padding: 0 20px;
    margin-right: 8px;
}
.change .list button{
    width: 112px;
    height: 55px;
    background-color: #F2F3F5;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    margin-right: 8px;
}
.change .list button.blue_btn{
    color: #fff;
    background-color: #397FFF;
}
.change .list ul li > div > p{
    font-size: 16px;
    color: #FF3939;
    margin-top: 10px;
}
.change .list ul li > span{
    font-size: 18px;
    color: rgba(0,0,0,0.5);
    text-decoration: underline;
    text-underline-position: under;
    margin-top: 15px;
    display: block;
    cursor: pointer;
}
#user_new_pw{
    border: 2px solid #FF3939;
    outline: none;
}
#user_phone.active{
    border: 2px solid #397FFF;
    outline: none;
}
.del_popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.del_popup .container{
    width: 460px;
    background-color: #fff;
    margin: 0 auto;
    padding: 50px 0;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.del_popup p:nth-of-type(1){
    font-size: 25px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.del_popup p:nth-of-type(2){
    font-size: 15px;
    margin: 15px auto 40px;
}
.del_popup ul{
    width: 206px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.del_popup ul li{
    width: 46%;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    background-color: #F2F4F6;
    font-size: 20px;
    cursor: pointer;
}
.del_popup ul li:nth-of-type(2){
    background-color: #FFEEEE;
    color: #FF3939;
}

/* login, sign_up, find_pw  */
.login .container{
    padding: 103px 0;
    margin: 0 auto;
}
.login_sec_01 .container{
    width: 600px;
}
.login_sec_02 .container{
    width: 400px;
}
.login h1{
    font-size: 36px;
    font-family: 'SpoqaHanSansNeo-Medium';
    margin: 50px 0 55px;
    text-align:center;
    font-weight:bold;
}
.login .list{
    margin-bottom: 40px;
}
.login .list.last{
    margin-bottom: 20px;
}
.login .list > p{
    font-size: 18px;
    margin-bottom: 10px;
}
.login .list input{
    width: 100%;
    height: 55px;
    line-height: 55px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 18px;
    padding: 0 20px;
}
.login .container > p{
    font-size: 18px;
    color: #555;
}
.login .check_area{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}
.login .check_area > div:nth-of-type(2){
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.login .check_wrap{
    position: relative;
}

.login .check_wrap input[type="checkbox"]{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.login .check_wrap label{
    cursor: pointer;
    font-size: 18px;
    color: #555;
    line-height: 25px;
}
.login .check_wrap label span{
    color: #397FFF;
}
.login .check_wrap label::before{
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    vertical-align: bottom;
    margin-right: 5px;
    border: 1px solid #ddd;
}
.login .check_wrap input[type="checkbox"]:checked + label::before{
    content: '\2713';
    /*            content: '●';*/
    text-align: center;
    line-height: 25px;
    color: #397FFF;
}
.link_area{
   display: flex;
    justify-content: space-between;
}

.login .btn_area{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #555;
}
.login .btn_area button{
    width: 100%;
    height: 55px;
    color: #fff;
    background-color: #397FFF;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    margin: 15px 0;
}
.login .btn_area ul{
    display: flex;
    align-items: center;
    font-size: 18px;
}
.login .btn_area ul li a{
    color: #555;
    display: block;
}
.login .btn_area_01{
    margin-top: 40px;
}
.login .btn_area_01 ul li:nth-of-type(2){
    padding: 0 15px;
}
.login .btn_area_02{
    margin-top: 60px;
    align-items: flex-end;
}
.login .btn_area_02 p{
    font-size: 18px;
}
.login .btn_area_02 p > a{
    color: #397FFF;
    border-bottom: 1px solid #397FFF;
    margin-left: 5px;
}
.login .btn_area_03 > a{
    color: #397FFF;
    font-size: 18px;
}

@media (max-width:1560px){
    .admin_header .right{
        margin: 0 2.5% 0 0;
    }
    .manage .container{
        width: 95%;
    }
    .manage table tr th:nth-of-type(1){
        width: 8.7%;
    }
    .manage table tr th:nth-of-type(2){
        width: 37.4%;
    }
    .manage table tr th:nth-of-type(3){
        width: 16.8%;
    }
    .manage table tr th:nth-of-type(4){
        width: 21%;
    }
}

@media (max-width:1540px){
    .main_slide .swiper-slide{
        background-size: 125vw;
        height: 28vw;
    }
    .main_slide .swiper-slide.slide_01 > div{
        width: 66vw;
        margin: 0 auto;
    }
    .main_slide .swiper-slide.slide_01 > div a{
        margin-top: 20vw;
        width: 14vw;
        height: 3.6vw;
        font-size: 1.3vw;
    }
    .main_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next,
    .main_slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        top: -18vw;
    }
}

@media (max-width:1420px){
    .footer .container{
        padding: 50px 0 55px;
    }
    .footer .left .logo{
        width: 110px;
    }
    .footer .left{
        font-size: 14px;
        font-weight: 300;
        line-height: 23px;
    }
    .footer .right{
        width: 350px;
    }
}

@media (max-width:1390px){
    .main_slide .container{
        width: 1060px;
    }
}

@media (max-width:1350px){
    .header .menu{
        width: 613px;
    }
    
    .intro_scroll .container{
        width: 1000px;
        height: 520px;
    }
    .intro_scroll .img_box{
        width: 510px;
    }
    .intro_title{
        font-size: 40px;
        line-height: 62px;
    }
    .intro_scroll .sub{
        font-size: 16px;
    }
    
    .intro_five .five{
        width: 1000px;
    }
    
    .pay_title_box .container{
        width: 900px;
    }
    
    .pro_title_box iframe{
        width: 508px;
    }
    
    .advan ul{
        width: 1000px;
    }
    .advan li{
        width: 150px;
        height: 150px;
        font-size: 18px;
    }
    
    .use_top .container{
        width: 1000px;
    }
    .use_top .bg{
        width: 100%;
    }
    .use_step .container{
        width: 1000px;
    }
    .use_top .btn_box{
        top: 530px;
    }
}

@media (max-width:1320px){
    .common_02 .container{
        width: 1000px;
    }
    .pay_sec_04 ul li > p{
        font-size: 18px;
    }
    .pay_sec_06 .txt_area p{
        font-size: 18px;
        line-height: 28px;
    }
    .pay_sec_06 .txt_area p:not(:last-child) {
        margin-bottom: 15px;
    }
    .pay_sec_06 .txt_area h1{
        font-size: 38px;
        line-height: 57px;
        margin-bottom: 22px;
    }
    .pay_sec_06 .slide_area{
        width: 529px;
    }
    .pay_sec_06 .img_area img{
        display: block;
        width: 100%;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area{
        width: 529px;
    }
    .pay_sec_06 .container > div:nth-of-type(3) .img_area{
        width: 415px;
    }
    
}

@media (max-width:1250px){
    .header .container{
        width: 95%;
    }
    .board .container{
        width: 1000px;
    }
    .main_slide ul{
        width: 800px!important;
    }
    .main_slide .swiper-slide.slide_01 img{
        width: 400px;
        margin-top: 31px;
    }
    .main_slide .swiper-slide.slide_02 a{
        bottom: 50px;
    }
    .main_slide .swiper-slide.slide_02 a img{
        width: 200px;
    }
    .main_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        width: 60px;
        height: 60px;
        background-size: 60px 60px;
        left: 0;
    }
    .main_slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        width: 60px;
        height: 60px;
        background-size: 60px 60px;
        right: 0;
    }
}

@media (max-width:1120px){
    .header .container{
        width: 90%;
    }
    .header .menu{
        display: none;
    }
    .header .menu + div{
        display: none;
    }
    .header .ham_btn{
        cursor: pointer;
        display: block;
    }
    .ham_bg{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        z-index: 10;
    }
    .ham_menu_box{
        position: fixed;
        top: 0;
        right: 0;
        width: 400px;
        height: 100vh;
        background-color: #fff;
        z-index: 11;
        overflow: auto;
    }
    .ham_menu_box .logo_box{
        height: 192px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        box-shadow: 0 0 10px rgba(0,0,0,0.16);
        position: relative;
    }
    .ham_menu_box .logo_box a{
        width: 120px;
        height: 40px;
        font-size: 18px;
        font-family: 'SpoqaHanSansNeo-Medium';
        margin: 25px 0 30px;
    }
    .ham_menu_box .logo_box .close_btn{
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }
    .ham_menu_box .logo_box div{
        display: flex;
        align-items: center;
        gap: 0 10px;
        margin: 25px 0 30px;
        display: none;
    }
    .ham_menu_box .logo_box div p{
        font-size: 16px;
        color: #4E5968;
    }
    .ham_menu_box .logo_box div p span{
        color: #3082F6;
        border-bottom: 1px solid #3082F6;
    }
    .ham_menu_box .logo_box div button{
        font-size: 18px;
        width: 100px;
        height: 40px;
        background-color: #F2F3F5;
        border: none;
        border-radius: 5px;
        color: #555;
    }
    .ham_menu_box .logo_box div button:nth-of-type(2){
        color: #fff;
        background-color: #888;
    }
    .ham_menu_box .arrow_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ham_menu_box .ham_menu>li:nth-of-type(1){
        padding-top: 40px;
    }
    .ham_menu_box .ham_menu>li{
        border-bottom: 1px solid #eee;
        padding: 25px 20px;
    }
    .ham_menu_box .ham_menu>li>a{
        color: #000;
        font-size: 20px;
    }
    .ham_menu_box .ham_menu .sub_ham_menu li:nth-of-type(1){
        margin: 20px 0;
    }
    .ham_menu_box .ham_menu .sub_ham_menu li a{
        font-size: 18px;
        color: #666;
        padding-left: 10px;
    }
    .ham_menu_box .down_btn{
        font-size: 20px;
        padding: 25px 20px;
    }
    .ham_menu_box .down_btn img{
        width: 15px;
    }
    
    .footer .container{
        width: 92%;
    }
    
    .common_02 .container{
        width: 850px;
    }
    .pay_sec_04 ul li .img_area p{
        font-size: 20px;
    }
    .pay_sec_04 ul li > p{
        font-size: 16px;
        line-height: 26px;
    }
    .pay_sec_04 ul li > span{
        font-size: 20px;
    }
    .pay_sec_06 .txt_area h1{
        font-size: 33px;
        line-height: 50px;
        margin-bottom: 17px;
    }
    .pay_sec_06 .txt_area h2{
        font-size: 18px;
        width: 270px;
    }
    .pay_sec_06 .txt_area p{
        font-size: 16px;
        line-height: 25px;
    }
    .pay_sec_06 .slide_area{
        width: 423px;
    }
    .pay_sec_06 .container > div{
        margin-bottom: 100px;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area{
        width: 422px;
    }
    
    .change .container{
        width: 87%;
    }
    
    .main_slide .container{
        width: 95%;
    }
    .main_slide ul,
    .main_slide .wrap{
        width: 700px!important;
    }
    .main_slide .swiper-slide.slide_01 img {
        width: 310px;
        margin-top: 44px;
    }
    .main_slide .swiper-slide .main_title{
        font-size: 35px;
        line-height: 45px;
        margin-bottom: 25px;
    }
    .main_slide .swiper-slide.slide_02 a img {
        width: 180px;
    }
}

@media (max-width:1050px){
	.main_sec_add img{
        width: 320px;
    }
    .main_sec_add h1{
        font-size: 35px;
    }
    .main_sec_add ul li br{
        display: block;
    }
    
    .main_sec .container{
        width: 800px;
    }
    .main_sec_01 .container > div{
        font-size: 35px;
    }
    .free_top{
        padding-left: 0;
        text-align: center;
    }
    .free .container{
        width: 700px;
        margin: 0 auto;
    }
    .free .sub{
        font-size: 20px;
    }
    .free .input_box #qForm{
        width: 100%;
    }
    .free .input_box textarea{
        font-size: 18px;
    }
    .free .input_box #qSendBtn{
        width: 200px;
        font-size: 20px;
    }
    
    .intro_title_box .container{
        width: 90%;
        margin: 0 auto;
    }
    .intro_scroll .container{
        width: 700px;
        height: 380px;
        padding-top: 100px;
    }
    .intro_title{
        font-size: 30px;
        line-height: 42px;
    }
    .intro_scroll .sub{
        font-size: 12px;
    }
    .intro_scroll .img_box{
        width: 340px;
    }
    .intro_txt_box2{
        padding: 80px 0;
    }
    .intro_five{
        padding: 80px 0;
    }
    .intro_five .five{
        width: 700px;
    }
    .intro_five .five .top_txt{
        font-size: 18px;
    }
    .intro_five .five .bt_txt{
        font-size: 28px;
    }
    .intro_five .five .txt{
        font-size: 14px;
        font-weight: 400;
    }
    
    .pay_title_box .container{
        width: 700px;
    }
    .pay_title_box .sub{
        font-size: 16px;
    }
    
    .pro_title_box .container{
        width: 800px;
    }
    .pro_title_box iframe {
        width: 439px;
    }
    .pro_title_box li{
        height: 184px;
        padding-top: 65px;
        font-size: 21px;
    }
    .pro_title_box li:nth-of-type(1){
        padding-top: 50px;
    }
    
    .chat_img{
        width: 400px;
    }
    .chat_box{
        width: 700px;
        padding: 120px 0 80px;
    }
    .chat_box .chat_list .left p{
        width: 65%;
    }
    .chat_box .chat_list .right p{
        width: 65%;
    }
    .advan ul{
        width: 700px;
        flex-wrap: wrap;
    }
    .advan li{
        width: 185px;
        height: 185px;
        margin-bottom: 20px;
    }
    
    .use_title_box .title{
        font-size: 45px;
    }
    .use_top .container{
        width: 700px;
    }
    .tab_menu{
        margin: 0 auto 150px;
    }
    .use_step .container{
        width: 700px;
    }
    .use_top .btn_box{
        top: 440px;
    }
    .use_top .btn_box *{
        width: 270px;
    }
    
    .board .container{
        width: 700px;
    }
    .tip_title_box .title{
        font-size: 45px;
    }
    .board_list_box .list{
        width: 48%;
    }
    
    .common_01 .container{
        width: 90%;
    }
}

@media (max-width:960px){
    .api .container{
        width: 700px;
    }
    .api .set_btn{
        font-size: 22px;
    }
    
    .pay_sec_02 ul li{
        width: 31.5%;
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    .pay_sec_02 ul li > div p{
        margin-bottom: 20px;
    }
    .pay_sec_03 .container{
        width: 90%;
    }
    .pay_sec_03 .list_01 li{
        flex-direction: column;
        text-align: center;
        width: 48%;
        padding: 40px 15px;
    }
    .pay_sec_03 .list_01 li .txt_area p:nth-of-type(2){
        margin-bottom: 20px;
    }
    .common_02 .container{
        width: 90%;
    }
    .pay_title{
        font-size: 30px;
        line-height: 39px;
    }
    .pay_sec_03 h2{
        font-size: 20px;
    }
    .pay_sec_03 .container > p:nth-of-type(1){
        font-size: 15px;
        line-height: 25px;
    }
    .pay_sec_03 .container > p:nth-of-type(1) .m_br{
        display: block;
    }
    .pay_sec_04 ul li{
        padding-bottom: 4vw;
    }
    .pay_sec_04 ul li .img_area{
        margin-bottom: 4vw;
    }
    .pay_sec_04 ul li .img_area p,
    .pay_sec_04 ul li > span{
        font-size: 2.1vw;
    }
    .pay_sec_04 ul li > p{
        font-size: 1.65vw;
        line-height: 3vw;
        margin-bottom: 3vw;
    }
    .pay_sec_05 h1{
        font-size: 2.61vw;
    }
    .pay_sec_05 h1 span {
        font-size: 3.646vw;
        padding: 0 2.6vw;
        margin-right: 2.1vw;
    }
    .pay_sec_05 ul li{
        font-size: 2.61vw;
    }
    .pay_sec_05 ul li:nth-child(even){
        padding: 2.6vw 4.2vw;
    }
    .pay_sec_05 ul li:nth-child(even) p {
        font-size: 2.1vw;
    }
    .pay_sec_05 ul li:nth-child(odd){
        padding: 3.5vw 4.2vw;
    }
    .pay_sec_06 .slide_area{
        width: 44vw;
    }
    .slide_area .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        width: 6vw;
        height: 6vw;
        right: -3vw;
        background-size: 6vw;
    }
    .slide_area .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        width: 6vw;
        height: 6vw;
        left: -3vw;
        background-size: 6vw;
    }
    .pay_sec_06 .txt_area h1{
        font-size: 3.4vw;
        line-height: 5.5vw;
        margin-bottom: 1.8vw;
    }
    .pay_sec_06 .txt_area p{
        font-size: 1.67vw;
        line-height: 2.5vw;
    }
    .pay_sec_06 .txt_area > span{
        font-size: 1.5vw;
    }
    .pay_sec_06 .txt_area h2{
        font-size: 1.8vw;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area {
        width: 45vw;
    }
    .pay_sec_06 .container > div:nth-of-type(3) .img_area {
        width: 45vw;
    }
}

@media (max-width:900px){
    .main_slide ul, .main_slide .wrap{
        width: 90%!important;
    }
    .main_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next,
    .main_slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        display: none;
    }
    .main_slide .swiper-slide.slide_02 a {
        bottom: 6vw;
    }
    .main_slide .swiper-slide.slide_02 a img {
        width: 20vw;
    }
    .main_slide .swiper-slide.slide_01 img{
        width: 44vw;
        margin-top: 0;
    }
    .main_slide .swiper-slide .main_title{
        margin-top: 0;
    }
    .main_slide .swiper-slide .main_title {
        font-size: 3.888888vw;
        line-height: 5vw;
        margin-bottom: 3vw;
    }
    .main_slide .swiper-slide .txt_area a{
        width: 15.5vw;
        height: 4.5vw;
        line-height: 4.5vw;
        font-size: 1.8vw;
    }
    .main_slide ul li{
        font-size: 1.8vw;
        padding: 12px 0;
    }
    .main_slide .slide-control{
        bottom: 32px;
        right: -1vw;
    }
}

@media (max-width:850px){
    .main_title{
        font-size: 38px;
        line-height: 48px;
    }
    .main_txt{
        font-size: 18px;
        line-height: 28px;
    }
    .main_txt .m_br{
        display: block;
    }
    .main_txt .m_none{
        display: none;
    }
    .main_top_txt{
        font-size: 16px;
        margin-bottom: 0;
    }
    
    .main_sec_add .container{
        flex-direction: column;
    }
    .main_sec_add img{
        width: 416px;
        margin-bottom: 40px;
    }
    
    .main_sec .container{
        width: 85%;
    }
    .main_sec_01 .container > div {
        font-size: 3.5vw;
        padding: 5vw 0;
    }
    .main_sec_01 p{
        font-size: 3.2vw;
    }
    .main_sec_01 h2{
        font-size: 3.53vw;
        width: 57.648vw;
        height: 7.06vw;
    }
    .main_sec_01 h1{
        font-size: 4.71vw;
    }
    .main_sec_01 h1 img{
        width: 64.8vw;
    }
    .main_sec_01 h1 span{
        font-size: 5.888vw;
    }
    .main_sec_03 .container{
        padding: 100px 0 60px;
    }
    .main_sec_03 ul{
        flex-wrap: wrap;
        text-align: center;
    }
    .main_sec_03 ul li{
        width: 50%;
        margin-bottom: 40px;
    }
    .main_sec_04 ul li p{
        font-size: 2vw;
        line-height: 3vw;
    }
    
    .pro_title_box .container{
        width: 90%;
        padding: 160px 0 100px;
    }
    .pro_title_box .why{
        font-size: 90px;
    }
    .pro_title_box .top_box{
        flex-direction: column;
        align-items: center;
    }
    .pro_title_box .top_box > div{
        max-width: 390px;
        width: 100%;
    }
    .pro_title_box iframe{
        max-width: 390px;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 50px;
    }
    .pro_title_box ul{
        flex-wrap: wrap;
        max-width: 390px;
        width: 100%;
        margin: 0 auto;
    }
    .pro_title_box li{
        width: 48%;
        height: 187px;
        padding-top: 62px;
        border-radius: 20px;
    }
    .pro_title_box li:nth-of-type(1){
        padding-top: 50px;
        margin-bottom: 2.5vw;
    }
}

@media (max-width:820px){
    .footer .container{
        flex-direction: column;
        padding: 60px 0;
        width: 430px;
    }
    .footer .left{
        text-align: center;
        margin-bottom: 35px;
    }
    .footer .left .logo{
        display: block;
        margin: 0 auto 30px;
        width: 125px;
    }
    .footer .right{
        width: auto;
    }
    
/*    manage */
    .admin_header .right{
        display: none;
    }
    .admin_header .ham_btn{
        display: block;
        margin-right: 5.2%;
        cursor: pointer;
    }
    .admin_header .left li{
        height: 90px;
    }
    .admin_header .left li:nth-of-type(2),
    .admin_header .left li:nth-of-type(3){
        display: none;
    }
    .admin_header .ham_menu{
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        background-color: #397fff;
        border-top: 1px solid #9ebefa;
    }
    .admin_header .ham_menu li{
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #9ebefa;
        padding: 18px 0;
    }
    .admin_header .ham_menu li p{
        width: 195px;
        font-size: 24.35px;
        color: #fff;
        font-family: 'SpoqaHanSansBold';
    }
    .admin_header .ham_menu li p img{
        margin-left: 15px;
    }
    .manage .container{
        width: 90%;
    }
    
    .change .list{
        flex-direction: column;
        margin-bottom: 27px;
    }
    .change .list ul li{
        margin-bottom: 25px;
    }
    .change .list > h2{
        margin-bottom: 25px;
    }
    .change .list ul li > p{
        margin-bottom: 5px;
    }
}

@media (max-width:750px){
    .main_title .m_br{
        display: block;
    }
    
    .free .container{
        width: 90%;
    }
    
    .intro_scroll .container{
        width: 90%;
        height: auto;
        padding: 150px 0;
    }
    .intro_scroll .intro_title{
        text-align: center;
    }
    .intro_scroll .sub{
        text-align: center;
        font-size: 16px;
        margin-bottom: 60px;
    }
    .intro_scroll .img_box{
        display: none;
    }
    .intro_scroll .img_box_m{
        display: block;
        margin: 0 auto;
        max-width: 419px;
        width: 100%;
    }
    .intro_five .five{
        width: 90%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .intro_five .five li{
        width: 33.33%;
    }
    .intro_five .five li:nth-of-type(1){
        margin-bottom: 50px;
    }
    
    .pay_title_box .container{
        width: 90%;
    }
    .pay_title_box .sub{
        font-size: 14px;
    }
    
    .chat_box{
        width: 90%;
        padding: 120px 0 80px;
    }
    .chat_img{
        width: 340px;
        top: 150px;
    }
    .chat_list1{
        padding-bottom: 270px;
    }
    .chat_box .chat_list .left img,
    .chat_box .chat_list .right img{
        width: 10vw;
    }
    .chat_box .chat_list .left p{
        font-size: 18px;
        padding: 20px;
        width: 67%;
        margin-left: 3vw;
        line-height: 25px;
    }
    .chat_box .chat_list .right p span{
        font-size: 18px;
    }
    .chat_box .chat_list .right p{
        font-size: 16px;
        padding: 20px;
        width: 67%;
        margin-right: 3vw;
        line-height: 25px;
    }
    .advan ul{
        width: 387px;
    }
    
    .use_title_box .title{
        font-size: 38px;
    }
    .use_top .container{
        width: 90%;
    }
    .tab_menu{
        width: 500px;
        margin: 0 auto 130px;
    }
    .tab_menu li{
        width: 230px;
        height: 60px;
        font-size: 30px;
    }
    .use_step .container{
        width: 90%;
    }
    .use_top .btn_box{
        top: 43%;
        width: 35%;
    }
    .use_top .btn_box *{
        width: 100%;
    }
    
    .board .container{
        width: 90%;
    }
    .tip_title_box .title{
        font-size: 38px;
    }
    .board_list_box .list{
        width: 48%;
    }
    .board .write_btn{
        position: static;
        margin: 0 0 0 auto;
    }
    .board_write .write_box{
        padding: 60px;
    }
    .board_write .write_box .title{
        font-size: 35px;
    }
    .board_write .write_box textarea{
        font-size: 18px;
    }
    .board.write .write_btn{
        position: absolute;
        margin: 0;
    }
    .board_detail .con_box{
        padding: 30px 50px;
    }
    
    .api .container{
        width: 340px;
    }
    .api_btn{
        width: 400px;
    }
    .api_btn button{
        width: 190px;
        height: 55px;
        height: 55px;
        font-size: 20px
    }
    
    .complete>div{
        width: 80%;
        padding: 60px 20px;
        word-break: keep-all;
    }
    
    .common_01 .container{
        width: 87%;
    }
    .common_02 .container{
        width: 87%;
    }
    .pay_sec_01 img:nth-of-type(1){
        display: none;
    }
    .pay_sec_01 img:nth-of-type(2){
        display: block;
        max-width: 438px;
        width: 100%;
    }
    .pay_sec_02 ul li{
        padding: 30px 0;
    }
    .pay_sec_02 ul li > div p{
        font-size: 2.78vw;
    }
    .pay_sec_02 ul li > div p span{
        font-size: 2vw;
    }
    .pay_sec_02 ul li > span{
        width: 6vw;
        height: 6vw;
    }
    .pay_sec_03 .container{
        width: 87%;
    }
    .pay_sec_04 ul.short{
        gap: 0;
    }
    .pay_sec_04 ul{
        flex-direction: column;
        max-width: 390px;
        width: 100%;
        margin: 40px auto 0;
    }
    .pay_sec_04 ul li{
        width: 100%;
        margin-bottom: 30px;
        padding-bottom: 8vw;
    }
    .pay_sec_04 ul li:nth-of-type(3){
        margin-bottom: 0;
    }
    .pay_sec_04 ul li .img_area {
        margin-bottom: 6vw;
    }
    .pay_sec_04 ul li .img_area p,
    .pay_sec_04 ul li > span {
        font-size: 3.33333vw;
    }
    .pay_sec_04 ul li > p{
        font-size: 2.66666vw;
        line-height: 4vw;
    }
    .pay_sec_05 h1{
        flex-direction: column;
        align-items: center;
        font-size: 20px;
        line-height: 30px;
    }
    .pay_sec_05 h1 span{
        margin-right: 0;
        font-size: 27px;
        padding: 0 25px;
        margin-bottom: 20px;
    }
    .pay_sec_05 h1 p{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pay_sec_05 ul li {
        font-size: 20px;
        border-radius: 10px;
    }
    .pay_sec_05 ul li:nth-child(even) p {
        font-size: 18px;
    }
    .pay_sec_06 .container{
        padding: 100px 0;
    }
    .pay_sec_06 .container > div{
        flex-direction: column;
        max-width: 531px;
        width: 87%;
        margin: 0 auto 80px;
    }
    .pay_sec_06 .slide_area{
        width: 92%;
        margin-top: 30px;
    }
    .pay_sec_06 .txt_area{
        width: 100%;
    }
    .pay_sec_06 .img_area{
        width: 100%!important;
    }
    .slide_area .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        width: 8vw;
        height: 8vw;
        left: -4vw;
        background-size: 8vw;
    }
    .slide_area .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        width: 8vw;
        height: 8vw;
        right: -4vw;
        background-size: 8vw;
    }
    .pay_sec_06 .txt_area h2 {
        font-size: 18px;
    }
    .pay_sec_06 .txt_area h1{
        font-size: 30px;
        line-height: 45px;
        margin-bottom: 25px;
    }
    .pay_sec_06 .txt_area p{
        font-size: 18px;
        line-height: 25px;
    }
    .pay_sec_06 .txt_area > span{
        font-size: 15px;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area{
        margin-bottom: 30px;
    }
    .pay_sec_06 .container > div:nth-of-type(3) .txt_area{
        margin-bottom: 30px;
    }
    
/*    manage */
    .manage table th{
        font-size: 18px;
    }
    .manage table td{
        font-size: 15px;
        font-weight: 600;
    }
    
    .login .check_wrap label{
        font-size: 2.4vw;
    }
    .login h1{
        font-size: 28px;
    }
}

@media (max-width:650px){
    .tab_menu{
        width: 450px;
        margin: 0 auto 100px;
    }
    .tab_menu li{
        width: 210px;
        height: 55px;
        font-size: 25px;
    }
    .use_top .container{
        padding: 100px 0 130px;
    }
    .use_top .btn_box{
        top: 43%;
    }
    
    .main_sec_02 .container > ul > li{
        padding: 25px 0;
    }
    .main_sec_02 .container > ul > li > span{
        width: 32vw;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2) > p{
        font-size: 20px;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2) > p:nth-of-type(2){
        font-size: 25px;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2) > span{
        font-size: 20px;
    }
    .main_sec_02 .container > ul > li > ul li{
        font-size: 16px;
    }
    .main_sec_04 ul li{
        width: 100%;
    }
    .main_sec_04 ul li p{
        font-size: 2.9vw;
        line-height: 4vw;
        margin-top: 3vw;
    }
    
    .pay_sec_03 ul li .txt_area p:nth-of-type(2){
        font-size: 12px;
    }
    
    .free .input_box #qForm > div > div{
        margin-bottom: 18px;
    }
    .free .input_box #qSendBtn{
        margin: 40px auto 0;
    }
    
/*    manage */
    .manage table tr th:nth-of-type(2){
        width: 14.4%;
    }
    .manage table tr th:nth-of-type(5){
        display: none;
    }
    .manage table tr td:nth-of-type(5){
        display: none;
    }
    
    .free .input_box #qForm > div{
        flex-direction: column;
        margin-bottom: 0;
    }
    .free .input_box #qForm > div > div{
        width: 100%;
    }
    .free .input_box #qForm > div:nth-of-type(3){
        flex-direction: row;
    }
    
    .api h1 {
        font-size: 6.155vw;
        margin-top: 4vw;
    }
    .api .setting {
        font-size: 3vw;
        margin: 3.3vw 0 7.7vw;
    }
    .api .set_btn {
        font-size: 3.5vw;
        width: 34vw;
        height: 9vw;
    }
    
    .login_sec_01 .container,
    .login_sec_02 .container{
        width: 87%;
    }
}

@media (max-width:600px){
    .change .list input{
        width: 43vw;
        font-size: 3vw;
        margin-right: 1.5vw;
    }
    .change .list button{
        width: 16vw;
        margin-right: 1.5vw;
        font-size: 3vw;
    }
    .del_popup .container{
        width: 87%;
    }
    .change .list ul li > div > p{
        font-size: 12px;
    }
    .main_slide ul li{
        font-size: 2.2vw;
    }
    .main_slide .slide-control{
        bottom: 30px;
    }
    .main_slide .slide-control .stop{
        width: 15px;
    }
    .main_sec_01 h2 {
        font-size: 4.53vw;
        width: 64.648vw;
        height: 8.06vw;
    }
    .main_sec_01 h1 img {
        width: 73.8vw;
    }
    .main_sec_01 h1 {
        font-size: 5.71vw;
    }
    .main_sec_01 h1 span {
        font-size: 6.888vw;
    }
    .main_sec_01 p {
        font-size: 3.6vw;
    }
    .main_sec_01 .container > div {
        font-size: 3.9vw;
        padding: 4vw 0;
        border-radius: 12px;
    }
    
    .main_slide .swiper-slide {
        background-size: 100vw;
        height: 143.5vw;
    }
    .main_slide .swiper-slide.slide_01{
        background-image: url(/about/images/main_slide_01_m.jpg);
    }
    .main_slide .swiper-slide.slide_02{
        background-image: url(/about/images/main_slide_02_m.jpg);
    }
    .main_slide .swiper-slide.slide_01 > div{
        width: 74vw;
    }
    .main_slide .swiper-slide.slide_01 > div a {
        margin-top: 70vw;
        width: 38vw;
        height: 8.6vw;
        font-size: 3.3vw;
    }
}

@media (max-width:500px){
	.main_sec_add .container{
        padding: 80px 0;
    }
    .main_sec_add .txt_area{
        width: 100%;
    }
    .main_sec_add img{
        width: 100%;
    }
    .main_sec_add h1 {
        font-size: 7vw;
        line-height: 10vw;
        margin-bottom: 3.5vw;
    }
    .main_sec_add p{
        font-size: 3.2vw;
        margin-bottom: 2vw;
    }
    .main_sec_add h2{
        font-size: 4vw;
        line-height: 7vw;
        margin-bottom: 6vw;
    }
    .main_sec_add ul li {
        font-size: 3vw;
        line-height: 5vw;
    }
    .main_sec_add h2::after{
        width: 66vw;
        height: 1.6vw;
        background-size: 66vw 1.6vw;
        bottom: -0.5vw;
    }
    
    .main_title{
        font-size: 6vw;
        line-height: 8vw;
        letter-spacing: 0px;
    }
    .main_txt,
    .main_top_txt{
        font-size: 3.1vw;
        line-height: 5vw;
    }
    .main_sec_03 ul li:nth-of-type(1) img{
        width: 132px;
    }
    .main_sec_03 ul li:nth-of-type(2) img{
        width: 40px;
    }
    .main_sec_03 ul li:nth-of-type(3) img{
        width: 122px;
    }
    .main_sec_03 ul li:nth-of-type(4) img{
        width: 142px;
    }
    
    .top_banner .banner{
        display: none;
    }
    .top_banner .banner_m{
        display: block;
        width: 100%;
    }
    .top_banner .close_btn{
        display: none;
    }
    .top_banner .close_btn_m{
        display: block;
        position: absolute;
        top: 2%;
        right: 2%;
    }
    
    .free .container{
        padding: 80px 0;
    }
    .free .m_br{
        display: block;
    }
    .free .sub{
        font-size: 16px;
        margin-bottom: 40px;
    }
    .free .input_box input{
        width: 100%;
    }
    .free .input_box #qSendBtn{
        width: 188px;
        margin: 35px auto 0;
    }
    .free .input_box textarea{
        height: 150px;
    }
    
    .footer .container{
        width: 90%;
    }
    .footer .right{
        max-width: 424px;
        width: 100%;
    }
    
    .intro_title_box{
        background-image: url(/about/images/intro_bg_m.png);
        height: 366px;
    }
    .intro_title_box .container{
        padding-top: 150px;
    }
    .down_icon{
        margin: 45px auto 0;
    }
    .intro_sub{
        font-size: 16px;
    }
    .intro_five .five .top_txt{
        font-size: 16px;
    }
    .intro_five .five .bt_txt{
        font-size: 25px;
    }
    
    .pay_title_box .container{
        padding-top: 120px;
        text-align: center;
    }
    .bt_banner{
        display: none;
    }
    .bt_banner_m{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .pay_footer{
        margin-bottom: 22vw;
    }
    
    .pro_title_box{
        background-image: url(/about/images/program_bg_m.png);
        background-position: 0 80px;
    }
    .pro_title_box .why{
        font-size: 70px;
        margin-bottom: 0;
    }
    .pro_title_box .title{
        font-size: 32px;
    }
    
    .chat{
        padding: 80px 0 60px;
    }
    .chat_box{
        width: 88%;
        border-radius: 20px;
        padding: 80px 0 45px;
    }
    .chat_img{
        width: 204px;
        top: 114px;
    }
    .chat_list{
        width: 91%;
    }
    .chat_list1{
        padding-bottom: 140px;
    }
    .chat_box .chat_list .left img,
    .chat_box .chat_list .right img{
        width: 8vw;
    }
    .chat_box .chat_list .left{
        align-items: flex-start;
    }
    .chat_box .chat_list .left p{
        font-size: 15px;
        border-radius: 5px;
        line-height: 20px;
        padding: 8px 15px;
        width: 73%;
    }
    .chat_box .chat_list .right p span{
        font-size: 15px;
    }
    .chat_box .chat_list .right p{
        font-size: 12px;
        line-height: 19px;
        border-radius: 5px;
        padding: 8px 15px;
        letter-spacing: -1px;
        width: 73%;
    }
    .chat_box .chat_list .right{
        margin-bottom: 20px;
    }
    .chat_box .chat_list .left{
        margin-bottom: 20px;
    }
    .advan{
        background-image: url(/about/images/program_bt_bg_m.png);
    }
    .advan .container{
        width: 90%;
        margin: 0 auto;
    }
    
    .use_title_box{
        background-image: url(/about/images/use_bg_m.png);
        height: 492px;
    }
    .use_title_box .container{
        width: 90%;
        margin: 0 auto;
        padding-top: 207px;
    }
    .use_title_box .title{
        font-size: 32px;
    }
    .tab_menu{
        width: 410px;
    }
    .tab_menu li{
        width: 190px;
        height: 53px;
        font-size: 22px;
    }
    .tab_menu li:nth-of-type(1) img{
        width: 20px;
    }
    .tab_menu li:nth-of-type(2) img{
        width: 23px;
    }
    .use_top .container{
        padding: 100px 0 60px;
    }
    .use_top .bg{
        display: none;
    }
    .use_top .bg_m{
        display: block;
        width: 100%;
    }
    .use_top .btn_box{
        position: static;
        width: 220px;
        margin: 0 auto;
    }
    .use_top p{
        display: block;
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
    }
    .use_step .pc_img{
        display: none;
    }
    .use_step .m_img{
        display: block;
        width: 100%;
    }
    .use_step #scr{
        top: 20%;
    }
    
    .tip_title_box .title{
        font-size: 32px;
    }
    .board_list_box .list{
        width: 100%;
    }
    .board_list_box .list .txt_box{
        display: flex;
        flex-direction: column;
    }
    .board_list_box .list .txt_box>div{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .board_list_box .list .txt_box>div>div{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .board_list_box .list .img_box{
        height: 250px;
    }
    .board_list_box .list .title{
        margin-bottom: 20px;
    }
    .board_list_box .list .heart{
        margin: 0;
    }
    .board_list_box .list .name{
        margin-right: 23px;
    }
    .board_list_box .list:nth-of-type(5),
    .board_list_box .list:nth-of-type(6),
    .board_list_box .list:nth-of-type(7),
    .board_list_box .list:nth-of-type(8){
        display: none;
    }
    
    .board_write .write_box{
        padding: 30px;
    }
    .board_write .write_box .title{
        font-size: 30px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .board_write .write_box textarea{
        font-size: 16px;
    }
    .board_detail .con_box{
        padding: 20px;
    }
    .board_detail .con_box .img_box{
        height: 250px;
    }
    .board_detail .title{
        font-size: 18px;
    }
    
    .api.pt{
        padding: 150px 0 100px;
    }
    .api .m_br{
        display: block;
    }
    .api_box .list input{
        font-size: 18px;
    }
    .api_btn{
        margin: 60px auto 0;
        width: 100%;
    }
    .api_btn button{
        width: 47.5%;
    }
    .api .pc_img{
        display: none;
    }
    .api .m_img{
        display: block;
        max-width: 390px;
        width: 100%;
        margin: 0 auto;
    }
    
    .complete h1{
        flex-direction: column;
    }
    .complete h1 img{
        margin-right: 0;
        margin-bottom: 20px;
    }
    .complete>div{
        width: 70%;
        padding: 60px 30px;
    }
    
    .pay_sec_02 ul li{
        width: 30.8%;
        padding: 20px 0;
        border-radius: 10px;
    }
    .pay_sec_02 ul li > div p {
        font-size: 3vw;
        margin-bottom: 3vw;
    }
    .pay_sec_02 ul li > div p span {
        font-size: 2.6vw;
    }
    
    .login .check_area > div:nth-of-type(2){
        flex-wrap: wrap;
        gap: 18px 0;
    }
    .login .check_wrap label {
        font-size: 3.6vw;
    }
    .login .container > p{
        font-size: 3.4vw;
    }
    .login h1 {
        font-size: 26px;
    }
}

@media (max-width:470px){
    .intro_title{
        font-size: 28px;
        line-height: 40px;
    }
    .intro_scroll .sub{
        font-size: 12px;
    }
    .intro_txt_box2{
        padding: 70px 0;
    }
    .intro_five{
        padding: 70px 0;
    }
    .intro_five .five .top_txt{
        font-size: 14px;
        font-weight: 500;
    }
    .intro_five .five .bt_txt{
        font-size: 21px;
    }
    .intro_five .five .txt{
        font-size: 12px;
    }
    
    .pay_title_box .sub{
        font-size: 13px;
    }
    
    .advan ul{
        width: 100%;
    }
    .advan li{
        width: 46.5%;
        height: 41.85vw;
        font-size: 18px;
    }
    
    .tab_menu{
        width: 330px;
        margin: 0 auto 80px;
    }
    .tab_menu li{
        width: 155px;
        font-size: 20px;
    }
    .use_top p{
        font-size: 25px;
        margin-bottom: 25px;
    }
    
    .api_title{
        font-size: 22px;
    }
    .api_title img{
        width: 50px;
    }
    .api_box .list .title{
        font-size: 18px;
    }
    .api_box .list input{
        font-size: 16px;
        height: 55px;
    }
    .api_btn button{
        font-size: 18px;
    }
}

@media (max-width:450px){
    .header .container{
        width: 87%;
    }
    .main_sec .container{
        width: 86%;
    }
    .main_title{
        font-size: 6.7vw;
        line-height: 10vw;
    }
    .main_txt,
    .main_top_txt{
        font-size: 3.34vw;
    }
    .main_sec_01{
        background-image: url(/about/images/main_bg_m.png);
    }
    .main_sec_01 .container{
        padding: 80px 0;
    }
    .main_sec_01 h2 {
        font-size: 4.7vw;
        width: 78vw;
        height: 9.6vw;
    }
    .main_sec_01 h1 {
        font-size: 5.99999vw;
        letter-spacing: 0;
        margin: 6vw 0 8vw;
    }
    .main_sec_01 h1 span {
        font-size: 7.555555vw;
    }
    .main_sec_01 h1 img:nth-of-type(1){
        display: none;
    }
    .main_sec_01 h1 img:nth-of-type(2){
        display: block;
        width: 100%;
        top: -0.8vw;
    }
    .main_sec_01 .container > div {
        font-size: 4.44444vw;
        padding: 4vw 0;
        letter-spacing: -1px;
        border-radius: 10px;
    }
    .main_sec_01 p {
        font-size: 4vw;
        margin: 4vw 0 3vw;
    }
    .main_sec_02 .container{
        padding: 82px 0 80px;
    }
    .main_sec_02 .container > ul > li > span{
        width: 31vw;
        height: 8vw;
        line-height: 8vw;
        font-size: 4vw!important;
    }
    .main_sec_02 .container > ul > li {
        padding: 20px 0;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2){
        border: 4px solid #397FFF;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2) > p{
        font-size: 4.45vw;
        line-height: 7vw;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2) > span{
        margin-bottom: 18vw;
    }
    .main_sec_02 .container > ul > li:nth-of-type(2) > p:nth-of-type(2) {
        font-size: 5.6vw;
    }
    .main_sec_02 .container > ul > li > ul li {
        font-size: 3.4vw;
    }
    .main_sec_03 .container {
        padding: 82px 0 40px;
    }
    .main_sec_03 ul{
        margin: 40px auto 0;
    }
    .main_sec_04 .container{
        padding: 81px 0;
    }
    .main_sec_04 ul li p{
        font-size: 4vw;
        line-height: 6.5vw;
        margin-top: 4.5vw;
    }
    
    .free .container {
        width: 86%;
    }
    .free .sub{
        line-height: 25px;
        font-size: 15px;
        letter-spacing: 0;
    }
    .free .input_box #qForm textarea{
        height: 120px;
    }
    .free .input_box #qSendBtn{
        width: 150px;
        height: 50px;
    }.free .input_box #qForm > div > div {
        margin-bottom: 13px;
    }
    
    .pro_title_box .container{
        width: 86%;
        padding: 163px 0 80px;
    }
    .pro_title_box li{
        width: 47.5%;
        height: 40.85vw;
        font-size: 4vw;
        line-height: 6vw;
        padding-top: 14vw;
    }
    .pro_title_box li:nth-of-type(1) {
        padding-top: 12vw;
        margin-bottom: 5vw;
    }
    
    .chat_box .chat_list .left {
        margin-bottom: 15px;
    }
    
    .advan{
        padding: 84px 0 80px;
    }
    
    .common_01 .container {
        width: 87%;
    }
    .pay_title_box{
        background-image: url(/about/images/pay_top_bg_m.png);
        height: 371px;
    }
    .pay_sec_01{
        padding: 40px 0 35px;
    }
    .pay_sec_02{
        padding: 60px 0;
    }
    .pay_sec_02 ul li{
        padding: 20px 0 15px;
    }
    .pay_sec_02 ul li > div p{
        font-size: 3.5vw;
    }
    .pay_sec_02 ul li > div p span {
        font-size: 2.7vw;
    }
    .pay_sec_02 ul li > span img{
        width: 13px;
    }
    .pay_title_box .container{
        padding-top: 90px;
    }
    .pay_sec_03 {
        padding: 0px 0 80px;
    }
    .pay_sec_03 h2 {
        font-size: 4.44444vw;
    }
    .pay_title {
        font-size: 6.66666vw;
        line-height: 11vw;
    }
    .pay_sec_03 .video_area{
        height: 186px;
        margin-bottom: 46px;
    }
    .pay_sec_03 .container > p:nth-of-type(1) {
        font-size: 3.33333vw;
        line-height: 5.6vw;
    }
    .pay_sec_03 .container > p:nth-of-type(2){
        font-size: 4.44444vw;
    }
    .pay_sec_03 .container > p:nth-of-type(2) span{
        font-size: 4vw;
    }
    .pay_sec_03 .list_01 li{
        width: 47%;
        padding: 6vw 0;
    }
    .pay_sec_03 .list_02 li{
        padding: 3vw 7vw 5vw;
    }
    .pay_sec_03 .list_01 li:nth-of-type(1) img{
        width: 52px;
    }
    .pay_sec_03 .list_01 li:nth-of-type(2) img{
        width: 40px;
    }
    .pay_sec_03 ul li .txt_area p:nth-of-type(1){
        font-size: 4vw;
        margin-bottom: 1.4vw;
    }
    .pay_sec_03 ul li .txt_area p:nth-of-type(2) {
        font-size: 2.66666vw;
    }
    .pay_sec_04{
        padding: 80px 0;
    }
    .pay_sec_04 ul{
        margin: 4vw auto 0;
    }
    .pay_sec_04 ul li .img_area p,
    .pay_sec_04 ul li > span {
        font-size: 5.55555vw;
    }
    .pay_sec_04 ul li > p {
        font-size: 4.44444vw;
        line-height: 7vw;
    }
    .pay_sec_04 ul li .img_area {
        margin-bottom: 9vw;
    }
    .pay_sec_04 ul li{
        padding-bottom: 12vw;
    }
    .pay_sec_05 .container{
        padding: 80px 0 50px;
    }
    .pay_sec_05 h1 {
        font-size: 4.44444vw;
        line-height: 7vw;
        margin-bottom: 6vw;
    }
    .pay_sec_05 h1 span {
        font-size: 6vw;
        padding: 0 5vw;
        margin-bottom: 4vw;
    }
    .pay_sec_05 ul li{
        font-size: 4.44444vw;
    }
    .pay_sec_05 ul li span {
        margin-right: 3vw;
    }
    .pay_sec_05 ul li{
        font-size: 4vw;
    }
    .pay_sec_05 ul li:nth-child(odd) {
        padding: 4vw 7.2vw;
    }
    .pay_sec_05 ul li:nth-child(even) {
        padding: 4.6vw 4vw 4.6vw 7.2vw
    }
    .pay_sec_05 ul li p .m_br{
        display: block;
    }
    .pay_sec_05 ul li:nth-child(even) p {
        font-size: 4vw;
        line-height: 6vw;
    }
    .pay_sec_06 .container > div{
        width: 100%;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area{
        margin-bottom: 0;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area img:nth-of-type(1){
        display: none;
    }
    .pay_sec_06 .container > div:nth-of-type(2) .img_area img:nth-of-type(2){
        display: block;
    }
    .pay_sec_06 .txt_area h2 {
        font-size: 4vw;
        width: 60vw;
        height: 8.8888888vw;
        line-height: 8.8888888vw;
    }
    .pay_sec_06 .txt_area h1 {
        font-size: 6.66666vw;
        line-height: 10vw;
        margin-bottom: 6vw;
    }
    .pay_sec_06 .txt_area p {
        font-size: 4vw;
        line-height: 6vw;
    }
    .pay_sec_06 .txt_area p:not(:last-child) {
        margin-bottom: 4vw;
    }
    .pay_sec_06 .txt_area > span {
        font-size: 3.33333vw;
    }
    .pay_sec_06 .slide_area {
        width: 89.5%;
        margin-top: 6vw;
    }
    .slide_area .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        width: 13vw;
        height: 13vw;
        right: -6.5vw;
        background-size: 13vw;
    }
    .slide_area .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        width: 13vw;
        height: 13vw;
        left: -6.5vw;
        background-size: 13vw;
    }
    
    .free .input_box #qForm div label{
        font-size: 17px;
    }
    .free .input_box #qForm div input{
        font-size: 17px;
        height: 45px;
    }
    
/*    manage */
    .manage .container{
        width: 88%;
        padding: 30px 0 107px;
    }
    .manage table th{
        padding: 18px 0;
    }
    .manage table td{
        padding: 20px 10px;
    }
    
    .board .container{
        padding: 60px 0 95px;
    }
    .tip_title_box{
        background-image: url(/about/images/tip_bg_m.png);
        height: 372px;
    }
    .tip_title_box .container {
        padding-top: 214px;
    }
    .tip_title_box .down_icon {
        margin: 70px auto 0;
    }
    
    .api.pt{
        padding: 127px 0 80px;
    }
    .api_title{
        font-size: 4.56vw;
        margin-bottom: 8vw;
    }
    .api_title img {
        width: 10vw;
    }
    .api_btn{
        margin: 40px auto 0;
    }
    .welcome{
        padding: 60px 0;
    }
    .api .set_btn {
        font-size: 4vw;
        width: 40vw;
        height: 10vw;
    }
    .api .setting{
        margin: 2vw 0 8vw;
    }
    .api h1 {
        font-size: 5.55555vw;
        margin-top: 5vw;
    }
    
    .change .container{
        padding: 114px 0 80px;
    }
    .change h1{
        font-size: 20px;
    }
    .change .list{
        margin-bottom: 6vw;
    }
    .change .list > h2{
        font-size: 18px;
    }
    .change .list ul li{
        margin-bottom: 4vw;
    }
    .change .list ul li > p{
        font-size: 3.33333vw;
        word-break: keep-all;
    }
    .change .list input {
        width: 45vw;
        height: 11.111111vw;
        font-size: 3.5vw;
    }
    .change .list button{
        width: 17vw;
        height: 11.111111vw;
        font-size: 3.5vw
    }
    .change .list ul li > div > p {
        font-size: 2.66666vw;
    }
    .change .list ul li > span{
        font-size: 3.55555vw;
    }
    .del_popup .container{
        padding: 50px 0 40px;
    }
    .del_popup p:nth-of-type(1){
        font-size: 5.55555vw;
    }.del_popup p:nth-of-type(2) {
        font-size: 3.33333vw;
        margin: 3.33333vw auto 8.88888vw;
    }
    .del_popup ul{
        width: 43vw;
    }
    .del_popup ul li{
        font-size: 4vw;
        height: 9vw;
        line-height: 9vw;
    }
    
    .login .container{
        padding: 80px 0;
    }
    .login h1 {
        font-size: 5.6vw;
        margin: 10vw 0 14vw;
    }
    .login .check_wrap label{
        font-size: 4vw;
    }
    .login .btn_area_02 p{
        font-size: 4vw;
    }
    .login .btn_area button {
        width: 25vw;
        height: 12.222222vw;
        font-size: 4vw;
    }
    .login .check_wrap label::before{
        width: 5.111111vw;
        height: 5.111111vw;
    }
    .login .btn_area ul{
        font-size: 4vw;
    }
    .login .list > p{
        font-size: 4vw;
        margin-bottom: 2.5vw;
    }
    .login .list input{
        font-size: 4vw;
        height: 12.222222vw;
        line-height: 12.222222vw;
    }
    
    .main_slide .swiper-slide.slide_01 .txt_area{
        margin-left: 2.5vw;
    }
    .main_slide .swiper-slide .main_title {
        font-size: 6.66666vw;
        line-height: 9vw;
        margin-bottom: 6vw;
    }
    .main_slide .swiper-slide .txt_area a {
        width: 26.666666vw;
        height: 8.89vw;
        line-height: 8.89vw;
        font-size: 3.33333vw;
        margin-bottom: 11vw;
    }
    .main_slide .swiper-slide.slide_02 > div{
        width: 100%!important;
    }
    .main_slide .swiper-slide.slide_02 a {
        bottom: -9vw;
    }
    .main_slide .swiper-slide.slide_02 a img {
        width: 42.3vw;
    }
    .main_slide ul li{
        width: 30%;
        font-size: 3.33333vw
    }
}

@media (max-width:400px){
    .ham_menu_box{
        width: 350px;
    }
    .ham_menu_box .ham_menu>li>a{
        font-size: 18px;
    }
    .ham_menu_box .ham_menu .sub_ham_menu li a{
        font-size: 16px;
    }
}

div#editor{
	min-height:500px;
	border:none !important;
	box-shadow:none !important;
}
div#editor ul, ol{
	padding:15px;
}

div#editor strong{
	font-weight:bold;
}




.brand_area{
    position: fixed;
    bottom: 113px;
    right: 12px;
    z-index: 101;
    background-color: rgba(255,255,255,0.95);
    width: 400px;
    border-radius: 10px;
    overflow: hidden;
}
.brand_area .tit{
    text-align: center;
    padding: 13px 0;
    position: relative;
}
.brand_area .tit .close_btn{
    position: absolute;
    top: 50%;
    right: 21px;
    transform: translateY(-50%);
    cursor: pointer;
}
.brand_area ul li{
    height: 93px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}
.brand_area ul li img{
    display: block;
    margin: 0 auto 4px;
}
.brand_area ul li img:nth-of-type(2){
    display: none;
}
.brand_area ul li p{
    color: #141414;
    font-size: 14px;
}
.brand_area ul li:hover{
    background-color: #e50012;
}
.brand_area ul li:hover p{
    color: #fff;
}
.brand_area ul li:hover img:nth-of-type(1){
    display: none;
}
.brand_area ul li:hover img:nth-of-type(2){
    display: block;
}

@media (max-width:450px){
    .brand_area{
        width: 90%;
        right: 50%;
        transform: translateX(50%);
    }
}





.f_click_plus h2{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
.f_click_plus .check{
    padding: 0px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 42px;
    border: 1px solid #367EF4;
    color: #367EF4;
    text-align: center;
    border-radius: 30px;
    margin: 0 auto;
    margin-bottom: 25px;
    font-weight:bold;
}
.f_click_plus .f_click_go{
    padding: 80px 0;
    background: url(/assets/new/f_click_go_bg.png) no-repeat center / cover;
}
.f_click_plus .fs_30{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
.check01{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 105px 0px 70px 0;
    background: url(/assets/new/check01_bg.png) no-repeat center;
}
.check01 > div{
    flex: 1;
    text-align: center;
}
.check01 > div > span{
    font-size: 20px;
    color: #fff;
    margin-bottom: 5px;
margin-top:15px;
    display: block;
}
.check01 > div > p{
    font-size: 25px;
    color: #fff;
}
.check_arrow{
    text-align: center;
    position: relative;
    bottom: 30px;
}
.f_click_plus .price .tit{
    background: url(/assets/new/사각형\ 397.png) no-repeat bottom / contain;
    background-size: auto;
}
.f_click_plus .price .tit p{
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    letter-spacing: -2px;
}
.f_click_plus .price > p{
    font-size: 23px;
    margin-top: 15px;
    text-align: center;
}
.bg_white.one{
    padding: 115px 0 60px 0;
}
.bg_grey{
    background: #F7F7F7;
    text-align: center;
}
.bg_grey .pc{
    padding: 55px 0;
}
.bg_blue_wrap{
    background: #F6FAFE;
}
.bg_blue{
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}
.bg_blue > div:nth-child(2) > img{
    width: 100%;
}
.bg_blue > div:nth-child(1) .check{
    margin-left: 0;
}
.bg_blue > div:nth-child(1) .tit{
    font-size: 27px;
}
.bg_blue > div:nth-child(1) > p{
    margin-top: 15px;
    font-size: 20px;
}
.bg_white.two,
.bg_blue.two{
    max-width: 1200px;
    gap: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 605px;
    padding: 100px 0;
}
.bg_white.two > div .tit{
    font-size: 28px;
}
.bg_white.two > div > p{
    margin-top: 15px;
    font-size: 20px;
}
.bg_white.two > div .check{
    margin-right: 0;
}
.bg_white.two > div:nth-child(2),
.bg_blue.two > div:nth-child(1){
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.tip_title_box.f_click{
    background: url(/assets/new/f_click_go_bg.png) no-repeat center / cover;
}
.f_click_plus .f_click_go p{
    text-align: center;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}
.f_click_plus .f_click_go .btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 262px;
    height: 50px;
    margin: 0 auto;
    background: #397FFF;
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
}
.bg_grey_top{margin:0 auto;display:block;}
@media screen and (max-width:1200px) {
    .bg_grey .pc{
        display: none;
    }
    .bg_grey_top{display:none;}
    .bg_grey{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bg_grey .m{
        display: block!important;
    }
    .bg_white.two, .bg_blue.two{
        padding: 60px 0;
    }
    .bg_white.two{
        flex-direction: column-reverse;
        padding-left: 4%;
        padding-right: 4%;
    }
    .bg_blue.two{
        flex-direction: column;
        padding-left: 4%;
        padding-right: 4%;
    }
    .bg_white.two > div:nth-child(2), .bg_blue.two > div:nth-child(1){
        width: 100%;
    }
    .f_click_go br{
        display: block!important;
    }
    .bg_white.one{
        padding: 70px 0 80px 0;
    }
}
@media screen and (max-width:1000px) {
    .bg_white.one br{
        display: block!important;
    }
    .check01{
        gap: 100px;
        flex-direction: column;
        background: url(/assets/new/check01_bg_m.png) no-repeat center;
    }
}

/* Mini Swiper */ 
/* 추가된 CSS */
   .mini-swiper-container {
    position: fixed;
    top: 0;
    width: 100%;
    height: 101px;
    background-color: #111;
    z-index: 2000;
    display: flex;
    align-items: center;
    color: #fff;
}
.mini-swiper-container .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.close-banner {
    position: absolute;
    right: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    z-index: 10000;
    top: 10px;
}
/* Header Styles for Desktop */
.header {
    position: fixed;
    top: 101px;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(21, 21, 21, 0.54) 0%, rgba(21, 21, 21, 0.00) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
.header.mt50{
    top: 0px;
}
.header.scrolled {
    background: #fff;
}
.header .h_inner{
    max-width: 1520px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo img {
    max-height: 40px;
    transition: opacity 0.3s;
}

.header.scrolled .header-logo img.default-logo {
    display: none;
}

.header.scrolled .header-logo img.scrolled-logo {
    display: block!important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 20px;
}

.header-menu {
    display: flex;
    align-items: center;
}

.header-menu a {
    margin: 0 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    line-height: 1.5;
}

.header.scrolled .header-menu a {
    color: #333;
}
.header.scrolled .header-menu .info_btn .loginUser {color: var(--gray7, #61646A);}
.header-button{
    color: #fff!important;
}

/* Dropdown for Submenu with Arrow */
.dropdown {
    position: relative;
}

.dropdown > a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 5px;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"%3E%3Cpath d="M1 1L4 4L7 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat;
    margin-left: 5px;
    vertical-align: middle;
}

.header.scrolled .dropdown > a::after {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"%3E%3Cpath d="M1 1L4 4L7 1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    z-index: 1000;
    border-radius: 10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 5px 0;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    vertical-align: middle;
}

.dropdown-menu a:hover {
    background-color: #f0f0f0;
}

/* Icons in Dropdown Menu */
.dropdown-menu .menu-icon {
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 5px;
}

/* Call-to-action Button */
.header-button {
    padding: 10px 20px;
    background-color: #0066ff;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    margin-left: 15px;
}

/* Adjusted Spacing */
.header-menu .header-login {
    margin-left: 190px;
}

/* Hamburger Menu for Mobile */
.hamburger-menu {
    display: none;
    cursor: pointer;
}
.header.scrolled .hamburger-menu div{
    background-color: #000;
}
.hamburger-menu div {
    width: 25px;
    height: 3px;
    /* background-color: #fff; */
    background-color: #000;
    margin: 5px;
    transition: 0.4s;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1001;
    flex-direction: column;
    padding-top: 20px;
}

.mobile-menu.active {
    display: flex;
}

/* Mobile Menu Header */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 45px;
}

.close-icon {
    font-size: 24px;
    cursor: pointer;
}

.mobile-menu a {
    padding: 15px 20px;
    font-size: 18px;
    color: #333;
    text-decoration: none;
}

.manual-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
}

.download-icon {
    margin-left: 5px;
    font-size: 18px;
    color: #333;
}

/* Call-to-action Button in Mobile Menu */
.mobile-cta-button {
    padding: 15px;
    text-align: center;
    color: #fff!important;
    border-radius: 24.5px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    background: linear-gradient(90deg, #3182F6 0%, #0052F0 100%);
    font-size: 18px;
    text-decoration: none;
    margin: 20px auto;
    width: 209px;
    height: 49px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 20px 15px;
}

/* Swiper Slider Styles */
.swiper-container {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    margin-top: 101px;
}
.swiper-container.mt50{
    margin-top: 0;
}
.swiper-wrapper img{
    width: 100%;
}

/* Swiper Custom Navigation */
.swiper-button-prev, .swiper-button-next {
    color: #fff;
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    background: #000;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #fff;
}
.swiper-slide img{
    width: 100%;
}

/* Responsive Styles for Mobile */
@media (max-width: 1060px) {
    .mini-swiper-container{
        display: none;
    }
    .header{
        box-sizing: border-box;
        top: 0;
    }
    .swiper-container{
        margin-top: 0;
    }
    .header-menu {
        display: none;
    }

    .hamburger-menu {
        display: block;
    }
    .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .swiper-slide:first-child img{
        display: none;
    }
    .swiper-slide:first-child img:last-child{
        display: block!important;
    }
}
p.subtitle {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
}

th {
    background-color: #f7f7f7;
    color: #333;
    font-weight: bold;
}

.label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
}

.label.basic {
    background-color: #e6e6e6;
    color: #666;
}

.label.pro {
    background-color: #d4f8e8;
    color: #1cb78c;
}

.label.premium {
    background-color: #ffe3cc;
    color: #f78e1e;
}

.label.expert {
    background-color: #ffe2e5;
    color: #e63946;
}

.info {
    text-align: center;
    font-size: 12px;
    color: #777;
}

.info a {
    color: #3182f6;
    text-decoration: none;
}

.info a:hover {
    text-decoration: underline;
}

/* 메인 섹션 */
.bs-main-section {
    text-align: center;
    padding: 60px 20px;
}

.bs-main-title {
    width: 100%;
    margin-bottom: 20px;
    color: var(--black1, #373C43);
    font-family: Pretendard;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    text-align: left;
}
.bs-main-title span {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--black1, #373C43);
    font-family: 'Pretendard';
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.44px;
}

.bs-video-container {
    width: 100%;
}

.bs-stats-container {
    display: flex;
    max-width: 1200px;
    gap: 20px;
    margin: 0 auto;
}
.bs-stat-card:hover {
    background: linear-gradient(260deg, #48A3F4, #3176F3);
    color: #fff;
}
.bs-stat-card:hover strong {
    color: #fff;
}
.bs-stat-card {
    width: 100%;
    color: #333;
    padding: 60px 50px;
    border-radius: 8px;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    background: #F3F6F9;
}
.bs-stat-card strong {
    color: #3182F6;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.52px;
    margin-top: 10px;
    display: block;
}

/* FAQ 섹션 */
.bs-faq-section {
    background-color: #F3F6F9;
    padding: 150px 20px;
    text-align: center;
}

.bs-faq-title {
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: bold;
    letter-spacing: -0.76px;
}

.bs-faq-container {
    max-width: 1200px; /* 최대 너비 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    text-align: left;
}

.bs-faq-item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* 세로 방향으로 배치 */
    align-items: flex-start; /* 좌측 정렬 */
}

.client-info {
    display: flex; /* 아이콘과 텍스트를 같은 행에 배치 */
    align-items: center; /* 수직 정렬 */
    margin-bottom: 10px; /* 질문 박스 위 여백 */
}

.client-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ddd;
    margin-right: 10px;
}
.client-label{
    font-size: 18px;
}
.question-box{
    position: relative;
    display: flex;
    margin-left: 75px;
    justify-content:start;
}
.question-box::before{
    content: "";
    position: absolute;
    left: 0;
    top: -13px;
    border-width: 0px 15px 15px 0px;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}
.answer-box::before{
    content: "";
    position: absolute;
    right: 0;
    top: -13px;
    border-width: 0px 0px 15px 15px;
    border-style: solid;
    border-color: #E5F3FF transparent;
    display: block;
    width: 0;
}
.question-box p {
    width: 479px; /* 너비 설정 */
    background-color: #ffffff; /* 흰색 배경 */
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 10px; /* A 박스와의 간격 */
    font-weight: 400;
}
.answer-box{
    position: relative;
    display: flex;
    width: 100%;
    justify-content: right;
    margin-top: 50px;
}
.answer-box p{
    display: flex;
    gap: 10px;
    width: 665px; /* 너비 설정 */
    background: #E5F3FF;
    color: #333;
    border-radius: 4px;
    padding: 30px;
    font-weight: 600;
}

/* 기능 섹션 */
.bs-features-section {
    padding: 150px 20px;
    text-align: center;
}

.bs-features-title {
    font-size: 28px;
    margin-bottom: 60px;
    font-weight: bold;
}

.bs-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.bs-feature-item {
    background-color: #F7F7F8;
    padding: 50px 30px 15px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.bs-feature-item p{
    margin-top: 25px;
    position: relative;
    text-align: left;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.4px;
}
.bs-feature-item p:last-child{
    text-align: right;
}
.bs-feature-item p:last-child a{
    display: block;
    width: 100%;
    height: 100%;
}
.feature-icon {
    text-align: left;
}

.bs_top_tit {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
/* 반응형 디자인 */
@media (max-width: 1050px) {
    .bs_top_tit{
        flex-wrap: wrap;
    }
    .bs-video-container iframe{
        width: 100%;
    }
    .bs-video-placeholder{
        height: 230px;
    }
}
@media (max-width: 768px) {
.bs-main-title {
font-size: 24px; /* 제목 크기 조정 */
}
.bs-main-title span {
font-size: 20px; /* 서브 제목 크기 조정 */
}
.bs-stats-container {
flex-direction: column; /* 세로 방향으로 변경 */
align-items: center; /* 중앙 정렬 */
}
.question-box{
width: calc(100% - 50px);
}
.bs-stat-card {
width: 90%;
padding: 50px 0px;
}
.bs-faq-container {
max-width: 100%; /* FAQ 최대 너비 조정 */
}
.question-box p {
width: 100%; /* 질문 박스 너비 조정 */
padding: 20px; /* 패딩 조정 */
}
.answer-box p {
width: 100%; /* 답변 박스 너비 조정 */
padding: 20px; /* 패딩 조정 */
}
.bs-features-grid {
grid-template-columns: 1fr; /* 기능 섹션 1열로 변경 */
}
.bs-feature-item {
padding: 20px; /* 패딩 조정 */
}
}

.intro_ > div {
    max-width: 1200px;
    margin: 0 auto;
}
.intro_tit {
    padding: 150px 0;
    text-align: left;
}
.intro_tit.center {
    text-align: center;
}
.intro_tit > span {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.44px;
}
.intro_tit h3 span {
    font-size: 38px;
    font-weight: bold;
    color: var(--blue2, #3182F6);
}
.intro_tit h3 {
    font-family: Pretendard;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    margin: 20px 0;
}
.intro_tit > p {
    color: var(--gray7, #61646A);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
}
.intro_ul_01 {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
}
.intro_ul_01 li {
    padding: 30px 20px;
    width: 100%;
    height: 420px;
    text-align: left;
    box-sizing: border-box;
    background: url('/about/images/intro_ul_01_01.png') no-repeat center / cover;
}
.intro_ul_01 li:nth-child(2) {
    background: url('/about/images/intro_ul_01_02.png') no-repeat center / cover;
}
.intro_ul_01 li:nth-child(3) {
    background: url('/about/images/intro_ul_01_03.png') no-repeat center / cover;
}
.intro_ul_01 li span {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
}
.intro_ul_01 li h4 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.52px;
    margin: 10px 0;
}
.intro_ul_01 li p {
    color: var(--gray7, #61646A);
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
}
.intro_ul_02 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 60px;
}
.intro_ul_02 li:nth-child(3n){
    border-right: 0;
}
.intro_ul_02 li {
    width: 33.3%;
    padding: 30px 0;
    border-right: 1px solid #8C939F26;
    border-bottom: 1px solid #8C939F26;
}
.intro_ul_02 li h5 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.52px;
    margin-bottom: 10px;
}
.intro_ul_02 li p {
    color: var(--gray5, #BFC5CF);
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .intro_tit {
        padding: 80px 4%; /* Adjust padding for mobile */
    }
    .intro_tit h3,.intro_tit h3 span {
        font-size: 28px; /* Adjust font size for mobile */
        
    }
    .intro_tit h3 br,
    .intro_tit > p br{
        display: none;
        word-break: keep-all;
    }
    .intro_tit > p {
        font-size: 18px; /* Adjust font size for mobile */
        word-break: keep-all;
        word-break: keep-all;
    }
    .intro_ul_01 {
        flex-direction: column; /* Stack items vertically */
        gap: 20px;
    }
    .intro_ul_01 li {
        height: 385px; /* Allow height to adjust based on content */
        border-radius: 15px;
    }
    .intro_ul_02 li {
        width: 100%; /* Full width on mobile */
        border-right: none; /* Remove right border */
    }
    .intro_ul_02 li:nth-child(5){
        display: none;
    }
}

@media (max-width: 480px) {
    .intro_tit h3 {
        font-size: 24px; /* Further adjust font size for smaller screens */
    }
    .intro_tit > p {
        font-size: 16px; /* Further adjust font size for smaller screens */
    }
    .intro_ul_01 li span {
        font-size: 16px; /* Adjust span font size */
    }
    .intro_ul_01 li h4 {
        font-size: 22px; /* Adjust h4 font size */
    }
    .intro_ul_01 li p {
        font-size: 16px; /* Adjust p font size */
    }
    .intro_ul_02 li h5 {
        font-size: 22px; /* Adjust h5 font size */
    }
    .intro_ul_02 li p {
        font-size: 16px; /* Adjust p font size */
    }
}

.a_box {
    display: none; /* 초기에는 A 박스 숨김 */
}
.q_box {
    position: relative; /* 절대 위치 설정을 위한 상대 위치 설정 */
    cursor: pointer; /* 클릭 가능하도록 커서 변경 */
    margin-bottom: 5px; /* 각 질문 박스 간 간격 설정 */
}
.q_box::after {
    content: '';
    position: absolute;
    right: 10px; /* 오른쪽에 위치 */
    top: 50%;
    transform: translateY(-50%) rotate(0deg); /* 초기 상태 */
    transition: transform 0.3s; /* 애니메이션 효과 */
    width: 16px; /* 아이콘 너비 */
    height: 9px; /* 아이콘 높이 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none"><path d="M1 8L8 1L15 8" stroke="%238C939F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); /* SVG 이미지 삽입 */
    background-size: contain; /* 아이콘 크기 조정 */
    background-repeat: no-repeat; /* 반복 방지 */
}
.q_box.open::after {
    transform: translateY(-50%) rotate(180deg); /* 클릭 시 아이콘 회전 */
}



.pack_{
    background: url('/about/images/pack_top_bg.png')no-repeat center / cover;
}
.pack_ .wrap{
    max-width: 1200px;
    margin: 0 auto;
}
.pack_ .wrap .txt{
    padding: 130px 0;
}
.pack_ .wrap .txt h2{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
}
.pack_ .wrap .txt p{
    color: var(--gray7, #61646A);
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin: 40px 0;
}
.pack_ .wrap .txt .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 169px;
    height: 49px;
    background: var(--blue2, #3182F6);
    border-radius: 6px;
}
.pack_ .wrap .txt .btn:hover{
    background: #1A69D9;
}
.pack_ .wrap .txt .btn a{
    text-decoration: none;
    color: #fff;
}
.menu-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0 0 0;
}

/* 상단 메뉴 스타일 */
.top-menu {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
}

.top-menu-item {
padding: 14px 20px;
text-align: center;
color: #555;
cursor: pointer;
border-radius: 28px;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* 그림자에 대한 전환 추가 */
position: relative; /* 절대 위치 설정을 위한 상대 위치 설정 */
overflow: hidden; /* 내부 요소가 경계에서 넘치지 않도록 설정 */
}

.top-menu-item a {
color: #333;
font-size: 20px;
transition: color 0.3s ease; /* 링크 색상 변화에 대한 전환 추가 */
}

.top-menu-item.act {
background: rgba(49, 130, 246, 0.15);
}

.top-menu-item.act a {
color: #3182F6;
}

.top-menu-item:hover {
background: rgba(49, 130, 246, 0.25); /* 배경 색상 강조 */
color: #3182F6;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 부드러운 그림자 추가 */
}

.top-menu-item:hover a {
color: #3182F6;
}

/* 추가적인 스타일을 위한 후크 */
.top-menu-item::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 300%; /* 넓은 효과 */
height: 300%; /* 넓은 효과 */
background: rgba(49, 130, 246, 0.2); /* 약한 배경 효과 */
transition: transform 0.3s ease; /* 변환 효과 추가 */
border-radius: 50%; /* 원형으로 만들기 */
z-index: 0; /* 뒤로 보내기 */
transform: translate(-50%, -50%) scale(0); /* 초기 상태에서 숨기기 */
}

.top-menu-item:hover::before {
transform: translate(-50%, -50%) scale(1); /* 호버 시 확대 효과 */
}

.top-menu-item a {
position: relative; /* 링크를 상대적으로 위치 */
z-index: 1; /* 글자를 앞으로 */
text-decoration: none;
}


/* 하단 메뉴 스타일 */
.bottom-menu {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.bottom-menu-item {
    flex: 1; /* 동일한 너비로 나누기 */
    text-align: center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: border-bottom 0.3s;
    box-sizing: border-box;
}

.bottom-menu-item {
position: relative; /* 자식 요소의 절대 위치 설정을 위한 상대 위치 */
padding-bottom: 15px; /* 아래쪽 패딩 추가 */
transition: color 0.3s ease; /* 색상 변화에 애니메이션 추가 */
}

.bottom-menu-item:hover,
.bottom-menu-item.active {
color: #3182F6; /* 호버 또는 활성 상태에서 글자 색상 변경 */
}

.bottom-menu-item::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0; /* 요소의 하단에 위치 */
height: 3px; /* 선의 두께 */
background-color: #3182F6; /* 선의 색상 */
transform: scaleX(0); /* 초기 상태에서 선 크기를 0으로 설정 */
transition: transform 0.3s ease; /* 선의 크기 변화에 애니메이션 추가 */
}

.bottom-menu-item:hover::after,
.bottom-menu-item.active::after {
transform: scaleX(1); /* 호버 또는 활성 상태에서 선 크기를 1로 변경 */
}

.section{
    display: none;
}
.section.active{
    display: block;
}
.center{
    text-align: center;
}
.inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}
.section .bg-blue{
    background: #F3F6F9;
}
.section h3{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
}
.section .b_p{
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.52px;
    margin: 0!important;
}
.section > div > .inner > p{
    margin: 40px 0;
}
.section p{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
}
.section .ul_01{
    display: flex;
    align-items: stretch;
    gap: 40px;
    max-width: 940px;
    margin: 0 auto;
}
.section .ul_01 li{
    width: 100%;
    padding: 30px;
    background: #fff;
}
.section .ul_01.case03{
    flex-wrap: wrap;
}
.section .ul_01.case03 li{
    width: calc(33.3% - 7px);
    border-radius: 10px;
}
.section .ul_01 li h4{
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.44px;
    margin: 20px 0;
}
.section .ul_01 li h4 span{
    color: #3182F6;
    font-weight: bold;
}
.change li h4{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 131.579% */
    letter-spacing: -0.76px;
}
.change li p{
    margin: 40px 0px 40px 0px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    color: #61646A;
}
.change{
    display: flex;
}
.change li{
    flex: 1;
}
.change li .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.change li .btns > div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 159px;
    height: 49px;
    border-radius: 6px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.32px;
    border: 1px solid var(--gray3, #DEDEE5);
}
.change li .btns > div.act{
    background: var(--blue2, #3182F6);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
    color: #fff;
}
.change li .btns > div:hover{
    background: var(--blue2, #3182F6);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
    color: #fff;
}
.flex_txt{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex_txt h4{
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 131.579% */
    letter-spacing: -0.76px;
}
.flex_txt p{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    color: #61646A;
}
.flex_txt02{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}
.flex_txt02 li{
    flex: 1;
}
.flex_txt02 li h4{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 131.579% */
    letter-spacing: -0.76px;
}
.flex_txt02 li  p{
    margin-top: 40px;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    color: #61646A;
}
.section .ul_02{
    margin-top: 50px;
}
.section .ul_02 li{
    padding: 30px 20px;
    width: 100%;
    border: 1px solid var(--gray3, #DEDEE5);
    background: var(--white1, #FFF);
}

.section .ul_02 li p{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.36px;
    font-weight: bold;
}
.section .ul_02 li:nth-child(2n){
    margin-bottom: 25px;
}
.section .ul_02 li:nth-child(2n) p {
    font-weight: 400;
}
.section .ul_02 li:nth-child(2n) p > span{
    font-weight: bold;
}
.section .ul_02 li:nth-child(2n){
    color: var(--biue4, #1C56A9);
}
.section .ul_02 li:last-child{
    margin-bottom: 0;
}
.bg-blue.day_free{
    padding-left: 60px;
    background: url('/about/images/6-15일무료체험.png') no-repeat center / cover;
}
.bg-blue.day_free h2{
    font-size: 38px;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.76px;
}
.bg-blue.day_free h2 span{
    font-weight: bold;
}
.bg-blue.day_free p{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-top: 15px;
}
.bg-blue.day_free .btn{
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 169px;
    height: 49px;
    background: var(--blue2, #3182F6);
    border-radius: 6px;
}
.bg-blue.day_free .btn:hover{
    background: #1A69D9;
}
.bg-blue.day_free .btn a{
    text-decoration: none;
    color: #fff;
}
        /* 반응형 스타일 추가 */
@media (max-width: 1200px) {
.inner img{
width: 100%;
min-height: 220px;
}

.top-menu {
flex-direction: column;
}

.top-menu-item {
margin-bottom: 10px;
}

.bottom-menu {
flex-direction: column;
padding-top: 10px;
}

.bottom-menu-item {
margin-bottom: 10px;
padding: 15px;
}

.inner {
padding: 50px 20px;
}

.flex_txt02 {
flex-direction: column-reverse;
align-items: center;
gap: 20px;
}

.flex_txt02 li {
width: 100%;
}

.bg-blue.day_free {
padding-left: 20px;
background-size: cover;
}

.section .ul_01 {
flex-direction: column;
align-items: center;
gap: 20px;
}

.section .ul_01 li {
width: 100%!important;
}
.bg-blue.day_free{
padding-left: 0!important;
}
.pack_ .wrap .txt{
padding: 80px 4%;
}
.change{
display: block;
}
.bs-faq-section{
    padding: 80px 4%;
}
.bs-main-section{
    padding: 80px 0;
}
.bs-features-section{
    padding: 80px 4%;
}
}

@media (max-width: 768px) {
.top-menu {
flex-direction: column;
}

.top-menu-item {
width: 100%;
margin-bottom: 10px;
}

.bottom-menu {
flex-direction: column;
}

.bottom-menu-item {
width: 100%;
margin-bottom: 10px;
padding: 15px;
}

.flex_txt {
flex-direction: column;
align-items: center;
}

.flex_txt h4 {
font-size: 28px;
text-align: center;
line-height: normal;
word-break: keep-all;
}
.flex_txt h4 br{
    display: none;
}

.flex_txt p {
font-size: 16px;
text-align: center;
margin-top: 15px;
}

.change li {
flex-direction: column;
align-items: center;
}

.btns {
justify-content: center;
align-items: center;
margin-top: 20px;
}

.img_box img {
width: 100%;
}
.change .img_box{
margin-top: 30px;
}
.pack_{
background: url('/about/images/pack_top_bg_m.png')no-repeat center / cover;
}
.pack_ .wrap .txt .btn{
margin-bottom: 270px;
}
.bg-blue.day_free{
background: url('/about/images/6-15일무료체험_m.png')no-repeat center / cover;
}
.bg-blue.day_free .btn{
margin-bottom: 300px;
}
.bg-blue.day_free h2{
font-size: 28px;
}
.menual_guide .tit h3,.mg_bg h5,.pack_ .wrap .txt h2,.section h3,.change li h4,.flex_txt02 li h4{
font-size: 28px!important;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.56px;
}
.section .ul_02 li p{
font-size: 16px;
}
.mg_bg > p,.menual_guide .step > li > div > p,.bg-blue.day_free p,.pack_ .wrap .txt p,.section > div > .inner > p,.change li p{
font-size: 16px!important;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.32px;
}
.change li p br{
    display: none;
}
.change li p{
    word-break: keep-all;
}
.section h3, .change li h4, .flex_txt02 li h4,.change li p,.flex_txt02 li p{
text-align: center;
}
.section > div > .inner > p br,.flex_txt p br,.flex_txt02 li p br{
display: none;
}
.section .b_p,.menual_guide .tit p,.menual_guide .step > li > div > h5{
font-size: 20px!important;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.4px;
}
.change li h4{
text-align: center;
}
.pack_ .wrap .txt p,.section > div > .inner > p{
margin: 20px 0!important;
}
}

@media (max-width: 480px) {
.pack_ .wrap .txt h2 {
font-size: 28px;
}

.pack_ .wrap .txt p {
font-size: 16px;
}

.btn {
width: 100%;
}

.section h3 {
font-size: 30px;
}

.section p {
font-size: 16px;
}
}
.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.pricing-table-title {
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    margin-bottom: 5px;
    text-align: center;
}

.pricing-table-subtitle {
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.52px;
    margin-top: 0;
    margin-bottom: 50px;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.pricing-table td:first-child{
    font-weight: bold;
}
.pricing-table th, .pricing-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
}

.pricing-table th {
    background-color: #f7f7f7;
    color: #333;
    font-weight: bold;
}

.pricing-label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
}

.pricing-label-basic {
    border-radius: 14.5px;
    border: 1px solid var(--gray6, #8C939F);
    color: var(--gray6, #8C939F);
}

.pricing-label-pro {
    border-radius: 14.5px;
    border: 1px solid #03AD69;
    color: #03AD69;
}

.pricing-label-premium {
    border-radius: 14.5px;
    border: 1px solid #F29122;
    color: #F29122;
}

.pricing-label-expert {
    border-radius: 14.5px;
    border: 1px solid #E2472C;
    color: #E2472C;
}
.pricing-label-custom{
    border-radius: 14.5px;
    border: 1px solid var(--blue2, #3182F6);
    color: var(--blue2, #3182F6);
}

.pricing-info_box {
    color: var(--gray7, #61646A);
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.32px;
    text-align: center;
    margin: 60px 0;
}
.pricing-info_box p{
    padding: 20px 0px;
    margin: 0 auto;
    width: 100%;
    max-width: 422px;
    background: var(--blue1, #F3F6F9);
    box-sizing: border-box;
}

.pricing-info a {
    color: #3182f6;
    text-decoration: none;
    font-weight: bold;
}

.pricing-info a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .pricing-table-wrapper {
        position: relative;
        overflow: hidden;
    }
    .pricing-table-wrapper::before {
        content: '좌우로 스크롤 해주세요';
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: #f3f6f9;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        color: #3182f6;
        animation: move-left-right 1s ease-in-out infinite alternate;
    }
    .pricing-table {
        width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
}

@keyframes move-left-right {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    100% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.menual_guide .tit h3{
    color: var(--black1, #373C43);
    text-align: center;
    font-family: Pretendard;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
}
.menual_guide .tit p{
    color: var(--gray7, #61646A);
    text-align: center;
    font-family: Pretendard;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.52px;
}
.btn_down_blue{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 233px;
    height: 49px;
    border-radius: 6px;
    background: var(--blue2, #3182F6);
    margin: 30px auto 60px auto;
}
.btn_down_blue a{
    color: var(--white1, #FFF);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.32px;
    padding-right: 5px;
}
.menual_guide .step{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 100px;
}
.menual_guide .step > li{
    flex: 1;
}
.menual_guide .step > li:first-child{
    display: flex;
    gap: 10px;
}
.menual_guide .step > li:first-child > div > span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    color: var(--white1, #FFF);
    background: #8C939F;
    margin-top: 7px;
}
.menual_guide .step > li > div > h5{
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.56px;
}
.menual_guide .step > li > div > p{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-top: 10px;
}
.menual_guide .step > li img{
    width: 100%;
}
.mg_bg{
    padding: 150px 0;
    background: url('/about/images/mg_bg01.png')no-repeat center / cover;
}
.mg_bg h5{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    margin-bottom: 40px;
    text-align: center;
    color: #fff;
}
.mg_bg .flex_b{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.mg_bg .flex_b .call{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 348px;
    height: 103px;
    border-radius: 10px;
    background: var(--blue3, #1A69D9);
}
.mg_bg .flex_b .call a{
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.56px;
    color: #fff;
}
.mg_bg .flex_b .kakao{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 348px;
    height: 103px;
    border-radius: 10px;
    background: #FFE812;
}
.mg_bg .flex_b .kakao a{
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.56px;
    color: var(--black1, #373C43);
}
.mg_bg .flex_b a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 10px;
}
.mg_bg > p{
    color: var(--gray6, #8C939F);
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-top: 40px;
}
@media screen and (max-width:1000px) {
    .menual_guide .step{
        padding:  0 4%;
        display: block;
    }
    .menual_guide .step > li:first-child{
        margin-bottom: 20px;
    }
    .mg_bg .flex_b{
        flex-direction: column;
    }
    .mg_bg > p{
        padding: 0 4%;
    }
    .mg_bg .flex_b .call,.mg_bg .flex_b .kakao{
        height: 80px;
    }
    .mg_bg .flex_b .call a,  .mg_bg .flex_b .kakao a{
        font-size: 23px;
    }
    .mg_bg{
        padding: 90px 0;
    }
    .mg_m img{
        display: none!important;
    }
    .mg_m img:last-child{
        display: block!important;
        margin: 0 auto;
    }
}
.pack_.sty_02{
    color: #fff;
    background: url('/about/images/sub-benner_sty02.png')no-repeat center / cover;
}
.f_click_new{
    padding: 150px 0;
    padding-bottom: 0;
}
.f_click_new .tit h4{
    text-align: center;
    font-family: Pretendard;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
}
.f_click_new .box_02,
.f_click_new .box_04{
    padding: 130px 0;
    background: #F3F6F9;
}
.f_click_new .box_03{
    text-align: center;
    padding: 70px 0 130px 0;
}
.f_click_new .box_05{
    padding: 130px 0;
}
.f_click_new .box_02 ul,
.f_click_new .box_04 ul,
.f_click_new .box_05 ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}
.f_click_new .box_02 ul li img,
.f_click_new .box_05 ul li img,
.f_click_new .box_03 img,
.f_click_new .box_04 img{
    width: 100%;
}
.f_click_new .box_01 > span,
.f_click_new .box_02 li > span,
.f_click_new .box_03 > span,
.f_click_new .box_04 li > span,
.f_click_new .box_05 li > span{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14.5px;
    background: var(--blue2, #3182F6);
    width: 48px;
    height: 29px;
    margin: 60px auto 15px auto;
    color: #fff;
    text-align: center;
}
.f_click_new .box_01 > h5{
    text-align: center;
    font-family: Pretendard;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.56px;
}
.f_click_new .box_01 > ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
}
.f_click_new .box_01 > ul > li{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    flex: 1;
    color: #fff;
    text-align: center;
}
.f_click_new .box_01 > ul > li:first-child{
    padding: 45px 50px;
    border-radius: 6px;
    background: var(--blue2, #3182F6);
}
.f_click_new .box_01 > ul > li:nth-child(2){
    padding: 45px 50px;
    border-radius: 6px;
    background: var(--biue4, #1C56A9);
}
.f_click_new .box_01 > ul > li:nth-child(4){
    padding: 45px 50px;
    border-radius: 6px;
    background: #A731F6;
}
.f_click_new .box_01 > ul > li:nth-child(4) > p:first-child{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}
.f_click_new .box_01 .grey_b{
    padding: 40px 0;
    margin-top: 50px;
    border-radius: 10px;
    background: var(--gray1, #F7F7F8);
}
.f_click_new .box_01 .grey_b > p:first-child{
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.4px;
}
.f_click_new .box_01 .grey_b > p:nth-child(2){
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-top: 10px;
}
.f_click_new .box_01 .grey_b ul{
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 35px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22624%22 height=%222%22 viewBox=%220 0 624 2%22 fill=%22none%22%3E%3Cpath d=%22M0 1L624 1.00005%22 stroke=%22%238C939F%22 stroke-dasharray=%222 2%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: 34px;
}
.f_click_new .box_01 .grey_b ul li div{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--gray4, #D5DAE3);
    width: 70px;
    height: 70px;
}
.f_click_new .box_01 .grey_b ul li p{
    color: var(--gray7, #61646A);
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.32px; 
    margin-top: 15px;
}
.f_click_new .box_02 li > h5,
.f_click_new .box_03 > h5,
.f_click_new .box_04 li > h5,
.f_click_new .box_05 li > h5{
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
}
.f_click_new .box_02 li h5 > span,
.f_click_new .box_03 > h5 > span,
.f_click_new .box_04 li > h5 > span,
.f_click_new .box_05 li > h5 > span{
    font-weight: bold;
}
.f_click_new .box_02 li > p,
.f_click_new .box_03 > p:nth-child(3),
.f_click_new .box_04 li > p,
.f_click_new .box_05 li > p{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-top: 15px;
}
.f_click_new .box_03 > p:nth-child(5){
    text-align: center;
    font-family: Pretendard;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.56px;
    margin: 60px 0;
}
.f_click_new .box_03 > p:nth-child(6){
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
}
.f_click_new .box_03 > p:nth-child(6) > span{
    font-weight: bold;
}
.main01{
    padding: 50px 0;
}
.main01 h3{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    text-align: center;
}
.main01 >.inner > p{
    color: var(--gray7, #61646A);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-top: 15px;
}
.main01 >.inner > ul{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.main01 >.inner > ul > li{
    text-align: center;
    flex: 1;
}
.main01 >.inner > ul > li h5{
    text-align: center;
    font-family: Pretendard;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.52px;
}
.main01 >.inner > ul > li p{
    color: var(--gray7, #61646A);
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-top: 15px;
}
.main02{
    padding: 50px 0;
    background: #F7F7F8;
    text-align: center;
}
.main02 h4{
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.56px;
}
.main02 > .inner > p{
    color: var(--gray7, #61646A);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-top: 10px;
}
.main02 .flip_clock{
    margin: 50px 0;
}
.main02 .flip_clock > p{
    font-size: 38px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.76px;
}
.main02 img{
    width: 100%;
    max-width: 1060px;
}


.custom-container {
    text-align: center;
    /* position: absolute;
    left: 50%;
    top: 50%; */
    /* width: 140px;
    height: 90px;
    margin: -45px 0 0 -70px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin: 60px 0;
}

#custom-social {
    text-align: center;
    position: absolute;
    bottom: 14%;
    width: 100%;
}

#custom-social p {
    margin-bottom: 10px;
}

#custom-social ul,
#custom-social li {
    display: inline-block;
}

/* Skeleton */

.custom-flip {
    position: relative;
    float: left;
    margin: 5px;
    width: 60px;
    height: 90px;
    font-size: 80px;
    font-weight: bold;
    line-height: 87px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px rgba(63, 68, 83, 0.20);
}

.custom-flip li {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.custom-flip li:first-child {
    z-index: 2;
}

.custom-flip li a {
    display: block;
    height: 100%;
    perspective: 200px;
}

.custom-flip li a div {
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.custom-flip li a div .custom-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.custom-flip li a div.custom-up {
    transform-origin: 50% 100%;
    top: 0;
}

.custom-flip li a div.custom-up:after {
    content: "";
    position: absolute;
    top: 44px;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 3px;
    background-color: rgba(0, 0, 0, .2);
}

.custom-flip li a div.custom-down {
    transform-origin: 50% 0%;
    bottom: 0;
}

.custom-flip li a div div.custom-inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #ccc;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    background-color: #333;
    border-radius: 6px;
}

.custom-flip li a div.custom-up div.custom-inn {
    top: 0;
}

.custom-flip li a div.custom-down div.custom-inn {
    bottom: 0;
}

/* PLAY */

body.custom-play .custom-flip li.before {
    z-index: 3;
}

body.custom-play .custom-flip li.active {
    animation: asd .5s .5s linear both;
    z-index: 2;
}

@keyframes asd {
    0% {
        z-index: 2;
    }
    5% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}

body.custom-play .custom-flip li.active .custom-down {
    z-index: 2;
    animation: turn .5s .5s linear both;
}

@keyframes turn {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

body.custom-play .custom-flip li.before .custom-up {
    z-index: 2;
    animation: turn2 .5s linear both;
}

@keyframes turn2 {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

/* SHADOW */

body.custom-play .custom-flip li.before .custom-up .custom-shadow {
    background: rgba(0, 0, 0, .1);
    animation: show .5s linear both;
}

body.custom-play .custom-flip li.active .custom-up .custom-shadow {
    background: rgba(0, 0, 0, .1);
    animation: hide .5s .3s linear both;
}

/*DOWN*/

body.custom-play .custom-flip li.before .custom-down .custom-shadow {
    animation: show .5s linear both;
}

body.custom-play .custom-flip li.active .custom-down .custom-shadow {
    background: rgba(0, 0, 0, 1);
    animation: hide .5s .3s linear both;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
      /* 추가된 스타일 */
      .count-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 90px;
        border-radius: 6px;
        background-color: #f0f0f0; /* 카운트 박스 배경색 */
        margin-left: 10px; /* 플립 박스와의 간격 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
        font-size: 80px;
        font-weight: bold;
        line-height: 90px; /* 세로 정렬을 위한 설정 */
        color: #3182F6; /* 숫자 색상 */
    }
    @media screen and (max-width:768px) {     
        .f_click_new .tit h4{
            font-size: 28px;
        }
        .f_click_new .box_01 > ul{
            flex-wrap: wrap;
            padding: 0 4%;
        }
        .f_click_new .box_01 > ul > li:first-child,
        .f_click_new .box_01 > ul > li:nth-child(2){
            width: calc(50% - 10px);
            word-break: keep-all;
        }
        .f_click_new .box_01 > ul > li:nth-child(3),
        .f_click_new .box_01 > ul > li:nth-child(4){
            flex-basis: 50%;
        }
        .f_click_new .box_01 > ul > li:nth-child(3){
            margin: 30px 0;
            transform: rotate(90deg);
        }
        .f_click_new .box_01 .grey_b > p:nth-child(2) br{
            display: none;
            word-break: keep-all;
        }
        .f_click_new .box_01 .grey_b ul{
            flex-direction: column;
            align-items: center;
            gap: 40px;
            background: none;
        }
        .f_click_new .box_01 .grey_b ul li div{
            width: 80px;
            height: 80px;
            margin: 0 auto;
        }
        .f_click_new .box_02 ul{
            flex-direction: column-reverse;
            align-items: center;
            justify-content: center;
            padding: 0 4%;
        }
       .f_click_new .box_02 li > h5, .f_click_new .box_03 > h5, .f_click_new .box_04 li > h5, .f_click_new .box_05 li > h5
        {
            text-align: center;
            font-size: 23px;
        }
        .f_click_new .box_02 li > span{
            margin: 0px auto 15px auto!important;
        }
        .f_click_new .box_02, .f_click_new .box_04{
            padding: 50px 0;
        }
        .f_click_new .box_02 li > p br,
        .f_click_new .box_03 > p:nth-child(3) br,
        .f_click_new .box_04 li > p br,
        .f_click_new .box_05 li > p br{
            display: none;
        }
        .f_click_new .box_02 li > p, .f_click_new .box_03 > p:nth-child(3), .f_click_new .box_04 li > p, .f_click_new .box_05 li > p{
            margin: 25px 0;
            text-align: center;
            font-size: 16px;
        }
        .f_click_new .box_03{
            padding: 50px 4%;
        }
        .f_click_new .box_03 > p:nth-child(5){
            font-size: 23px;
            margin: 30px 0;
        }
        .f_click_new .box_03 > p:nth-child(6){
            font-size: 16px;
        }
        .f_click_new .box_03 > p:nth-child(6) br{
            display: none;
            word-break: keep-all;
        }
        .f_click_new .box_04 ul{
            flex-wrap: wrap;
            justify-content: center;
        }
         .f_click_new .box_02 li > span, .f_click_new .box_03 > span, .f_click_new .box_04 li > span, .f_click_new .box_05 li > span{
            margin: 0px auto 15px auto!important;
        }
        .f_click_new .box_01 .grey_b p{
            padding:  0 4%;
            word-break: keep-all;
        }
        .f_click_new .box_05{
            padding: 50px 4%;
        }
        .f_click_new .box_05 ul{
            flex-direction: column-reverse;
        }
        .f_click_new .box_01 .grey_b ul li p br{
            display: none;
            word-break: keep-all;
        }
        .f_click_new .box_01 .grey_b ul li{
            position: relative;
            z-index: 1;
        }
        .f_click_new .box_01 .grey_b ul li::after {
            content: "";
            display: block;
            width: 2px;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='47' viewBox='0 0 2 47' fill='none'%3E%3Cpath d='M1 0L0.999998 47' stroke='%238C939F' stroke-dasharray='2 2'/%3E%3C/svg%3E");
            background-repeat: repeat-y;
            background-position: center;
            position: absolute;
            top: 50%;
            right: 50%;
            z-index: -1;
          }
          .f_click_new .box_01 .grey_b ul li:last-child:after{
            display: none;
          }
    }
#bid-speed{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#count-display {
    height: 90px;
    display: inline-flex;
    align-items: center;
    width: 100px;
    font-size: 80px;
    background: #fff;
    border-radius: 10px;
    color: #3182F6;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0px 0px 10px 0px rgba(63, 68, 83, 0.20);
    justify-content: center;
    padding-bottom: 10px;
}
.main03{
    padding: 150px 0;
    background: #F3F6F9;
}
.main03 > h4{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    text-align: center;
}
.main03 > p{
    color: var(--gray8, #424756);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-top: 20px;
}
.main03 > ul{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
}
.main03 > svg{
    width: 102px;
}
.main03 > ul li{
    flex: 1;
    text-align: center;
}
.main03 > ul li span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 162px;
    height: 46px;
    border-radius: 23px;
    background: var(--gray4, #D5DAE3);
    margin: 0 auto;
    margin-bottom: 40px;
}
.main03 > ul li:first-child div{
    padding: 15px 0;
    border-radius: 10px;
    border: 2px solid var(--gray4, #D5DAE3);
    background: var(--white2, #FBFBFB);
    font-size: 20px;
    text-align: center;
}
.main03 > ul li:first-child p{
    text-align: center;
    font-family: Pretendard;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.44px;
    margin-top: 40px;
}
.main03 > ul li:last-child span{
    color: #fff;
    background: var(--blue2, #3182F6);
}
.main03 > ul li:last-child div{
    text-align: center;
    color: #3182F6;
    font-weight: bold;
    font-size: 20px;
    background: #F2F5FF;
    border-radius: 10px;
    border: 2px solid var(--blue2, #3182F6);
    padding: 218px 0;
}
.main03 > ul li:last-child p{
    color: #1C56A9;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.44px;
    margin-top: 40px;
}

.main04{
    padding: 150px 0;
}
.main04 h4{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    text-align: center;
    margin-bottom: 40px;
}
.main04_btn{
    margin: 0 auto;
    text-align: center;
    margin-bottom: 50px;
    display: flex; /* inline-flex로 설정 */
    justify-content: center;
    align-items: center;
}
.main04_btn a{
    padding: 15px 25px;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.44px;
}
.main04_btn a.act{
    background: #3182F626;
    color: #3182F6;
    border-radius: 28px;
}
.main04_show img{
    display: block;
    width: 100%;
    max-width: 870px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
}
.main04_show span{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
}
.main04_show h5{
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.56px;
    margin: 10px 0 20px 0;
}
.main04_show p{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    color: #8C939F;
}
.main04_show p:nth-child(5){
    margin-top: 25px;
}
.main04_btn02{
    display: flex;
    gap: 10px;
    margin-top: 80px;
}
.main04_btn02 a{
    padding: 15px 25px;
    border-radius: 6px;
    color: #333;
}
.main04_btn02 a:first-child{
    border: 1px solid var(--gray4, #D5DAE3);
}
.main04_btn02 a:first-child:hover{
    background: #61646A;
    color: #fff;
}
.main04_btn02 a:last-child{
    color: #fff;
    background: #3182F6;
}
.main04_btn02 a:last-child:hover{
    background: #1A69D9;
}
/* .show01,.show02{
    max-width: 870px;
    margin: 0 auto;
} */
.main05{
    padding: 150px 0;
    background: #F3F6F9;
}
.main05 h4{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    text-align: center;
}
.main05 p{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-top: 20px;
    text-align: center;
}
.main05 ul{
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.main05 ul li{
    flex: 1;
    text-align: center;
}
.main06{
    padding: 150px 0;
    text-align: center;
}
.main06 h4{
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.76px;
    margin-bottom: 40px;
}
.main06 ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 983px;
    margin: 0 auto;
}
.main06 ul li div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 20px;
    padding: 40px 20px;
    border-radius: 10px;
    border: 1px solid var(--gray3, #DEDEE5);
    box-shadow: 4px 6px 25px 0px rgba(212, 218, 223, 0.25);
}
.main06 ul li {
    flex: 1;
}
.main06 ul li div:first-child{
    background: #fff;
    color: #3182F6;
}
.main06 ul li div p{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.4px;
    flex: 1;
}
@media screen and (max-width:768px){
    .main01,
    .main02{
        padding: 10px 4%;
    }
    .main01 h3,
    .main03 > h4,
    .main04 h4,
    .main05 h4,
    .main06 h4{
        font-size: 28px;
        letter-spacing: -0.56px;
    }
    .main01 >.inner > ul > li h5{
        font-size: 26px;
    }
    .main02 h4{
        font-size: 20px;
    }
    .main01 >.inner > ul > li p,
    .main02 > .inner > p,.main03 > p,
    .main05 p{
        font-size: 16px;
    }
    .main01 >.inner > ul{
        flex-direction: column;
        gap: 40px;
    }
    .custom-container{
        flex-wrap: wrap;
    }
    .custom-container > p{
        font-size: 28px;
    }
    .main03{
        padding: 60px 4%;
    }
    .main03 > ul{
        flex-direction: column;
    }
    .main03 > ul .main_svg{
        transform: rotate(90deg);
        transform-origin: center;
        margin: 30px 0;
    }
    .main03 > ul li{
        width: 100%;
    }
    .main04{
        padding: 60px 4%;
    }
    .main04 h4 br{
        display: none;
    }
    .main04 h4{
        word-break: keep-all;
    }
    .main04_show span,
    .main04_show h5,
    .main04_show p{
        display: block;
        text-align: center;
    }
    .main04_btn02{
        justify-content: center;
        margin-top: 50px;
    }
    .main05,
    .main06{
        padding: 60px 4%;
    }
    .main05 ul{
        flex-direction: column;
        gap: 30px;
    }
    .main06 ul{
        flex-direction: column;
        gap: 30px;
    }
    .main06 ul li,
    .main06 ul li img{
        width: 100%;
    }
    .main06 ul li div:nth-child(2){
        margin: 15px 0;
    }
    .main06 ul li div p{
        font-size: 16px;
        word-break: keep-all;
    }
    .main06 h4{
        word-break: keep-all;
    }
    .main06 ul li div p br,
    .main06 h4 br{
        display: none;
    }
    .custom-flip{
        height: 60px;
        line-height: 57px;
        font-size: 40px;
    }
    .custom-container{
        font-size: 38px;
    }
    .custom-flip li a div.custom-up:after{
        top: 29px;
        height: 1px;
    }
    #count-display{
        width: 60px;
        height: 60px;
        font-size: 38px;
    }
    .main01 >.inner > p br{
        display: none;
    }
    .main01 >.inner > p{
        word-break: keep-all;
    }
}
.api .container{
    max-width: 600px;
}
.api_title{
    color: #1A69D9;
    font-weight: 500;
}
.api_box .list{
    flex-direction: row;
    align-items: center;
}
.api_box .list input{
    border: 0;
    border-bottom: 1px solid #DEDEE5;
}
.api_box .list .title{
    width: 204px;
    font-weight: bold;
    font-size: 16px;
}
.api_btn button{
    border-radius: 6px;
    border: 1px solid var(--gray4, #D5DAE3);
    background: var(--white1, #FFF);
}
.api_btn button:hover{
    background: var(--gray7, #61646A);
    color: #fff;
}
.api_btn button:nth-of-type(2){
    background: var(--blue2, #3182F6);
}
.api_btn button:nth-of-type(2):hover{
    background: #1A69D9;
}
.free .input_box #qSendBtn{
    color: var(--white1, #FFF);
    font-family: Pretendard;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.32px;
}
.free .input_box #qSendBtn:hover{
    background: #1A69D9;
}
.free .input_box #qForm div label{
    font-weight: bold;
}
.free .input_box #qForm div input::placeholder{
    color: #BFC5CF;
}
.free .input_box #qForm textarea::placeholder{
    color: #BFC5CF;
}
.free .input_box #qForm > .checkbox{
    display: flex;
    margin-top: 20px;
    flex-direction: row!important;
    align-items: center;
    gap: 10px;
}
#privacyAgreement{
    width: auto!important;
}
#privacyAgreement_label{
    width: 100%;
    color: #8C939F;
    flex: 1;
    color: var(--gray6, #8C939F);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.28px;
}
.login .btn_area button:hover{
    background: #1A69D9;
}
.link_area a{
    color: #333;
}
.login .list label{
    width: 90px!important;
}
.login .list input::placeholder{
    color: #8C939F;
}
/* .login .container{
    padding: 40px 0;
} */
.login .join_txt01{
    margin-bottom: 40px;
    color: #1A69D9!important;
    font-size: 20px!important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.4px;
}
.login .list > p{
    font-size: 15px;
    font-weight: bold;
    width: 180px;
}
.login .list{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.login .list input{
    border: 0;
    border-bottom: 1px solid #DEDEE5;
}
.login .list input{
    height: 40px;
    padding: 0;
}
.login .list input::placeholder{
    color: #BFC5CF;
    font-size: 16px;
}
.login .btn_area{
    display: block;
}
.login .container > p{
    margin-top: 10px;
    color: #8C939F;
    font-size: 14px;
}
.login .check_wrap label span,
.login .check_wrap label{
    color: #8C939F;
    font-size: 14px;
}
.login .check_wrap label span a{
    color: #8C939F;
    font-size: 14px;
}
.login .check_area > div:nth-of-type(2){
    justify-content:normal;
    gap: 10px;
}
.login .btn_area_02{
    margin-top: 10px;
}
.login .btn_area_02 p{
    font-size: 14px;
}
.id_check{
    width: 98px!important;
    height: 47px!important;
    border-radius: 6px!important;
    border: 1px solid var(--blue2, #3182F6)!important;
    margin-left: 15 px;
}
.id_check::placeholder{
    font-size: 14px;
    font-weight: 600;
    line-height: normal!important;
    letter-spacing: -0.28px;
    text-align: center;
    color: #61646A!important;
}
.id_check:hover{
    background: #61646A;
    border: 1px solid #61646A!important;
}
.id_check:hover::placeholder {
    color: #fff!important; /* 마우스 오버 시 placeholder 색상 */
}
.login_sec_02 .container{
    max-width: 450px;
    width: 100%;
}
.login.login_sec_02 .list{
    display: block;
}
.login.login_sec_02 .list p{
    font-weight: 500;
    width: 100%;
}
.login.login_sec_02 .list input{
    border-radius: 6px;
    border: 1px solid var(--gray4, #D5DAE3);
    padding: 25px 20px;
}
.login.login_sec_02 .list input::placeholder{
    color: #8C939F!important;
    font-size: 13px;
}
  /* Swiper 기본 스타일 */
  .swiper-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    position: relative; /* 화살표 위치 설정을 위해 추가 */
}

.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 화살표 스타일 설정 */
.swiper-button-next,
.swiper-button-prev {
    color: #fff!important;
    position: absolute!important;
    top: 50%!important;
    transform: translateY(-50%);
    z-index: 10!important;
}

/* 불릿 스타일 설정 */
.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
}

/* 활성화된 불릿 색상 */
.swiper-pagination-bullet-active {
    background-color: #fff;
}

/* 반응형 설정 */
@media (max-width: 768px) {
    .swiper-container {
        height: 60vh;
    }
}

@media (max-width: 480px) {
    .swiper-container {
        height: 40vh;
    }
}

.change h1{
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.72px;
    text-align: center;
}
.change .list{
    display: block;
}
.change .list > h2{
    color: var(--blue3, #1A69D9);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.4px;
    margin-bottom: 30px;
}
.change .list ul li > p{
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: bold;
}
.change .list ul li{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.change .list input{
    border: 0;
    border-bottom: 1px solid #DEDEE5;
    width: 100%;
    padding: 0;
    font-size: 14px;

}
.change .container{
    width: 100%;
    max-width: 600px;
}
.change .list ul li div{
    display: flex;
    width: 100%;
}
.change .list button{
    width: 98px;
    height: 47px;
    flex-shrink: 0;
    border-radius: 6px;
    background-color: #fff!important;
    border: 1px solid var(--gray4, #D5DAE3);
    font-size: 14px;
    font-weight: bold;
}
.change .list button.blue_btn{
    border: 1px solid var(--blue2, #3182F6);
    color: #3182F6;
}
.change .list ul li > p:nth-child(2){
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid #DEDEE5;
    margin-right: 10px;
}
.change .list{
    margin-bottom: 0;
}
@media screen and (max-width:768px) {
    .change{
        padding: 0 4%;
    }
    .change li{
        flex-direction: row;
    }
    .change .list ul li{
        align-items: baseline;
    }
    .change .list ul li > p{
        text-align: left;
    }
    .change .list ul li div{
        flex-wrap: wrap;
    }
    .change .list button{
        margin-top: 10px;
    }
    .change .list:last-child ul li{
        flex-wrap: wrap;
    }
    .change .list ul li > p:nth-child(2){
        width: calc(100% - 120px);
        max-width: 100%;
    }
    .change .list:last-child ul li button{
        width: 100%;
    }
}
.float_1113{
    position: fixed;
    bottom: 10px;
    right: 17%;
    z-index: 1;
}
@media screen and (max-width:768px) {
    .float_1113{
        right: 10px;
    }
    .float_1113 img{
        width: 60px;
    }
}

/* Customer Support Styles */
.customer-service {
    font-weight: normal;
    color: #61646A;
    font-size: 14px;
}

.customer-service > span {
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    color: #000;
}

.footer-header > div:last-child {
    font-size: 24px;
}

/* Company Info Wrapper */
.company-info-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Company Info Text */
.company-info {
    line-height: 1.8;
    text-align: left;
    flex: 1;
    min-width: 200px;
    width: 100%;
}

.company-info p {
    color: #AFAFB0;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    letter-spacing: -0.24px;
    margin: 20px 0 0px 0;
}

.company-info img {
    display: block;
    max-height: 50px; /* Adjust as necessary for the logo size */
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .customer-service {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        word-break: keep-all;
    }

    .footer-header > div:last-child {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .footer-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-info-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-info {
        text-align: center;
        word-break: keep-all;
        word-wrap: break-word;
    }

    .company-info img {
        margin: 0 auto;
    }

    .customer-service > span {
        margin-bottom: 10px;
    }
}