/* common */
body {max-width:500px; margin:0 auto; background:var(--color-white);}

/* header */
header {height:48px; position:fixed; background:var(--color-white); left:50%; top:0; width:100%; max-width:500px; transform:translateX(-50%); padding:0 16px; z-index:1000; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
header .header-logo a {display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:bold; color:rgba(60,129,241,0.5);}
header .header-logo a:before {display:block; content:""; width:32px; height:32px; margin:0 6px 0 0; background:url('../images/logo2.png') no-repeat center / cover;}
header .header-logo a b {font-size:20px; font-weight:900; color:#005CB0; margin:0 4px 0 0;}
header .header-back .back {display:flex; flex-wrap:wrap; align-items:center; font-size:18px; font-weight:bold;}
header .header-back .back:before {display:block; content:""; width:24px; height:24px; margin:0 4px 0 0; background:url('../images/icon_back.svg') no-repeat center / cover;}
header .header-bar {display:flex; flex-wrap:wrap; align-items:center;}
header .header-bar a:not(.reg) {display:block; content:""; width:28px; height:28px; font-size:0; background:url('../images/icon_menu.svg') no-repeat center / cover;}
header .header-bar a.reg {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; margin:0 10px 0 0; height:30px; padding:0 15px; font-size:14px; color:#035BB2; border:1px solid #035BB2; font-weight:500;}
header .header-icon {display:flex; flex-wrap:wrap; align-items:center;}
header .header-icon > * {width:24px; height:24px; font-size:0; background-size:cover; background-position:center; margin:0 24px 0 0;}
header .header-icon > *:last-of-type {margin:0;}
header .header-icon > *.write {background-image:url('../images/icon_write.svg');}
header .header-icon > *.delete {background-image:url('../images/icon_delete.svg');}
header.shadow {box-shadow:0 0 8px rgba(0,0,0,0.08);}

/* footer */
footer {position:fixed; left:50%; bottom:0; width:100%; max-width:500px; transform:translateX(-50%); padding:8px; background:var(--color-white); z-index:99;}
footer p {text-align:center; font-size:14px; word-break:keep-all; margin:0 0 8px;}
footer.shadow {box-shadow:0 0 8px rgba(0,0,0,0.08);}
footer .footer-cate {box-shadow:0 0 8px rgba(0,0,0,0.08); margin:-8px; padding:10px 0 0;}
footer .footer-cate ul {display:flex; flex-wrap:wrap; align-items:flex-end;}
footer .footer-cate ul li {flex:1; min-width:0;}
footer .footer-cate ul li a {display:block; text-align:center; padding:8px 0; position:relative;}
footer .footer-cate ul li a:before {display:block; content:""; width:28px; height:28px; margin:0 auto; background-size:cover; background-position:center;}
footer .footer-cate ul li a p {font-size:12px; font-weight:600; margin:4px 0 0;}
footer .footer-cate ul li.home a:before {background-image:url('../images/icon_footer_cate_01.svg');}
footer .footer-cate ul li.support a:before {background-image:url('../images/icon_footer_cate_02.svg');}
footer .footer-cate ul li.order a:before {background-image:url('../images/icon_footer_cate_03.png'); width:90px; height:90px; position:absolute; left:50%; top:-63px; transform:translateX(-50%);}
footer .footer-cate ul li.history a:before {background-image:url('../images/icon_footer_cate_04.svg');}
footer .footer-cate ul li.my a:before {background-image:url('../images/icon_footer_cate_05.svg');}
footer .footer-cate ul li.active.home a:before {background-image:url('../images/icon_footer_cate_01_on.svg');}
footer .footer-cate ul li.active.my a:before {background-image:url('../images/icon_footer_cate_05_on.svg');}
footer .footer-cate ul li.active a p {color:var(--color-active);}
footer .footer-cate ul li:not(.order, .home).active a:before {filter:var(--filter-active-100);}

/* section */
section {padding:0 16px; margin:32px 0;}

.quickmenu-box {pointer-events:none; opacity:0; position:fixed; left:50%; top:0; width:100%; height:100%; max-width:500px; transform:translateX(-50%); background:#fff; z-index:99999; transition:all ease 0.5s;}
.quickmenu-box .box {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column;}
.quickmenu-box .qk-head {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:10px 16px;}
.quickmenu-box .qk-head .close {width:28px; height:28px; font-size:0; background:url('../images/icon_menu_close.svg') no-repeat center / cover;}
.quickmenu-box .qk-body {width:100%; height:100%; padding:16px; display:flex; flex-direction:column; overflow:hidden;}
.quickmenu-box .qk-body .body-top {width:100%; margin:0 0 24px;}
.quickmenu-box .qk-body .body-top:before {display:block; content:""; width:96px; height:96px; margin:0 auto 8px; background:url('../images/logo2.png') no-repeat center / cover;}
.quickmenu-box .qk-body .body-top .body-title {text-align:center; font-size:16px; font-weight:600; color:#717FA5; word-break:keep-all;}
.quickmenu-box .qk-body .body-button {width:100%; margin:0 0 24px;}
.quickmenu-box .qk-body .body-cate {width:100%; height:100%; overflow-y:auto;}
.quickmenu-box .qk-foot {width:100%; padding:24px 16px;}
.quickmenu-box.fixed {pointer-events:inherit; opacity:1;}

/* main-box */
.main-box h2 {font-size:20px; font-weight:bold; word-break:keep-all;}
.main-box h2 b {font-size:20px; font-weight:bold; color:var(--color-active);}

/* main-title */
.main-box .main-title {padding:30px 15px 50px; margin:0 -15px; background:url('../images/bg_main_title.png') no-repeat center top / cover;}
.main-box .main-title img {width:100%; max-width:70%; margin:0 auto; display:block;}
.main-box .main-title .inner {display:flex; flex-wrap:wrap; align-content:center; margin:20px 0 0;}
.main-box .main-title .inner h2 {font-size:20px; font-weight:600; width:100%; text-align:center;}
.main-box .main-title .inner h2 b {display:block; font-size:30px; font-weight:600;}
.main-box .main-title .inner a {transition:all ease 0.5s; margin:15px auto 0; border:1px solid #005CB0; border-radius:8px; height:50px; font-size:16px; font-weight:700; color:#005CB0; padding:0 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-box .main-title .inner a:after {display:block; content:""; width:20px; height:20px; margin:0 0 0 10px; background:url('../images/icon_main_title_more.svg') no-repeat center / cover; filter:invert(17%) sepia(100%) saturate(2522%) hue-rotate(195deg) brightness(99%) contrast(104%);}
.main-box .main-title .inner a:hover {background:#005CB0; color:#fff;}
.main-box .main-title .inner a:hover:after {filter:var(--filter-white);}
.main-box .main-title .tag {width:100%; margin:30px 0 0;}
.main-box .main-title .tag ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px;}
.main-box .main-title .tag ul li {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; background:#4f6496; color:#fff; padding:5px 10px; font-size:15px; font-weight:500;}
.main-box .main-title .qna {margin:50px auto 0; max-width:1000px;}
.main-box .main-title .qna > ul > li {margin:0 0 30px; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;}
.main-box .main-title .qna > ul > li:last-of-type {margin:0;}
.main-box .main-title .qna > ul > li > img {width:100px;}
.main-box .main-title .qna > ul > li > .qna-inner {flex:1; min-width:0; margin:0 0 0 10px;}
.main-box .main-title .qna > ul > li > .qna-inner strong {display:block; font-size:16px; font-weight:700; color:#005CB0; word-break:keep-all; line-height:1.3;}
.main-box .main-title .qna > ul > li > .qna-inner b {display:block; font-size:16px; font-weight:500; line-height:1.3; word-break:keep-all; margin:5px 0 10px;}
.main-box .main-title .qna > ul > li > .qna-inner p {position:relative; font-size:14px; font-weight:500; color:#666; word-break:keep-all; margin:0 0 5px; padding:0 0 0 10px;}
.main-box .main-title .qna > ul > li > .qna-inner p:last-of-type {margin:0;}
.main-box .main-title .qna > ul > li > .qna-inner p small {font-size:13px; color:#666; word-break:keep-all; display:block;}
.main-box .main-title .qna > ul > li > .qna-inner p:before {position:absolute; left:0; top:10px; width:4px; height:1px; background:#666; content:"";}

/* main-point */
.main-box .main-point {background:#F8F8F8; padding:50px 15px; margin:0 -15px;}
.main-box .main-point .container {max-width:1070px;}
.main-box .main-point h2 {margin:0 0 20px;}
.main-box .main-point h3 {font-size:18px; font-weight:600; color:#666; margin:0 0 10px;}
.main-box .main-point h4 {font-size:24px; font-weight:600; text-align:center; word-break:keep-all; color:#1F1F1F;}
.main-box .main-point .inner {background:#fff; border:1px solid #D9D9D9; border-radius:8px; padding:20px 15px; margin:0 auto 20px;}
.main-box .main-point .inner .inner-form {display:flex; flex-wrap:wrap; align-items:center;}
.main-box .main-point .inner .inner-form > div {background:#efefef; border:1px solid #dadada; border-radius:8px; padding:0 10px; flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center;}
.main-box .main-point .inner .inner-form > div input {flex:1; min-width:0; height:50px; font-size:15px; background:none;}
.main-box .main-point .inner .inner-form > div em {font-size:15px; font-weight:600;}
.main-box .main-point .inner .inner-form > a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; border-radius:8px; background:#000; color:#fff; font-size:15px; padding:0 10px; margin:0 0 0 5px;}
.main-box .main-point .inner .inner-total {background:#F9F9F9; border:1px solid #DADADA; border-radius:8px; padding:15px; margin:0 0 20px;}
.main-box .main-point .inner .inner-total > ul > li {border-bottom:1px dashed #dadada; margin:0 0 15px; padding:0 0 15px; display:flex; flex-wrap:wrap; justify-content:space-between;}
.main-box .main-point .inner .inner-total > ul > li:last-of-type {border:0; margin:0; padding:0;}
.main-box .main-point .inner .inner-total > ul > li p {font-size:15px; color:#5B5A5D;}
.main-box .main-point .inner .inner-check > ul {display:flex; flex-wrap:wrap; margin:0 -5px -10px;}
.main-box .main-point .inner .inner-check > ul > li {border:1px solid #D9D9D9; border-radius:8px; padding:15px; width:calc(50% - 10px); margin:0 5px 10px; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.main-box .main-point .inner .inner-check > ul > li:before {display:block; content:""; width:30px; height:30px; margin:0 auto 5px; background-size:cover; background-position:center;}
.main-box .main-point .inner .inner-check > ul > li p {text-align:center; font-size:15px; line-height:1.3; font-weight:500; text-align:center; word-break:keep-all; color:#5B5A5D; width:100%;}
.main-box .main-point .inner .inner-check > ul > li:nth-of-type(1):before {background-image:url('../images/icon_main_point_01.svg');}
.main-box .main-point .inner .inner-check > ul > li:nth-of-type(2):before {background-image:url('../images/icon_main_point_02.svg');}
.main-box .main-point .inner .inner-check > ul > li:nth-of-type(3):before {background-image:url('../images/icon_main_point_03.svg');}
.main-box .main-point .inner .inner-check > ul > li:nth-of-type(4):before {background-image:url('../images/icon_main_point_04.svg');}

/* main-card */
.main-box .main-card {padding:50px 0;}
.main-box .main-card .inner {border:1px solid #D9D9D9; border-radius:10px; padding:30px 15px; display:flex; flex-wrap:wrap; align-items:flex-end;}
.main-box .main-card .inner .list-left {width:100%;}
.main-box .main-card .inner .list-left ul {margin:20px 0 0;}
.main-box .main-card .inner .list-left ul li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:flex-start;}
.main-box .main-card .inner .list-left ul li em {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%; width:24px; height:24px; background:#9A9A9A; color:#fff; font-size:13px; font-weight:500;}
.main-box .main-card .inner .list-left ul li p {flex:1; min-width:0; margin:0 0 0 10px; font-size:15px; font-weight:500; color:#878787;}
.main-box .main-card .inner .list-left ul li p small {display:block; font-size:13px; color:#FF0000; word-break:keep-all;}
.main-box .main-card .inner .list-right {max-width:320px; margin:0 auto;}
.main-box .main-card .inner .list-right img {display:block; margin:0 auto; max-width:70%; width:100%;}
.main-box .main-card .inner .list-center {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-box .main-card .inner .list-center a {transition:all ease 0.5s; margin:15px 0 0; border:1px solid #005CB0; border-radius:8px; height:50px; font-size:16px; font-weight:700; color:#005CB0; padding:0 15px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-box .main-card .inner .list-center a:after {display:block; content:""; width:20px; height:20px; margin:0 0 0 10px; background:url('../images/icon_main_title_more.svg') no-repeat center / cover; filter:invert(17%) sepia(100%) saturate(2522%) hue-rotate(195deg) brightness(99%) contrast(104%);}
.main-box .main-card .inner .list-center a:hover {background:#005CB0; color:#fff;}
.main-box .main-card .inner .list-center a:hover:after {filter:var(--filter-white);}

/* main-step */
.main-box .main-step {margin:0 0 50px;}
.main-box .main-step p {font-size:18px; text-align:center; word-break:keep-all; color:#5B5A5D;}
.main-box .main-step .swiper-container {overflow:hidden; padding:10px; margin:10px 0 0;}
.main-box .main-step ul li {border-radius:15px; padding:15px; margin:0 0 10px; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.main-box .main-step ul li:before {display:block; content:""; width:60px; height:60px; margin:0 auto; background-size:cover; background-position:center;}
.main-box .main-step ul li b {display:block; font-size:13px; color:#5B5A5D; text-align:center;}
.main-box .main-step ul li strong {display:block; font-size:16px; color:#5B5A5D; font-weight:500; text-align:center;}
.main-box .main-step ul li.step01:before {background-image:url('../images/icon_main_step_01.png');}
.main-box .main-step ul li.step02:before {background-image:url('../images/icon_main_step_02.png');}
.main-box .main-step ul li.step03:before {background-image:url('../images/icon_main_step_03.png');}
.main-box .main-step .swiper-pagination {width:100%; margin:15px 0 0; position:static;}
.main-box .main-step .swiper-pagination span {background:#D9D9D9; width:12px; height:12px; opacity:1;}
.main-box .main-step .swiper-pagination span.swiper-pagination-bullet-active {background:#5B5A5D;}

/* main-review */
.main-box .main-review {margin:0 0 50px;}
.main-box .main-review .swiper-container {overflow:hidden; padding:30px 15px 15px;}
.main-box .main-review .swiper-container .swiper-slide {width:200px; display:flex; flex-wrap:wrap; align-content:space-between; height:180px; padding:15px; background:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.main-box .main-review .swiper-container .swiper-slide p {width:100%; font-size:15px; color:#695151; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;}
.main-box .main-review .swiper-container .swiper-slide b {margin:10px 0 0; display:block; font-size:13px; color:#666;}
.main-box .main-review .swiper-pagination {width:100%; margin:15px 0 0; position:static;}
.main-box .main-review .swiper-pagination span {background:#D9D9D9; width:12px; height:12px; opacity:1;}
.main-box .main-review .swiper-pagination span.swiper-pagination-bullet-active {background:#5B5A5D;}


/* main-banner */
.main-box .main-banner {background:url('../images/bg_main_banner.webp') no-repeat center / cover; padding:25px 0 50px; margin:0 -16px;}
.main-box .main-banner h2 {text-align:center; font-size:16px; font-weight:bold; color:#A8D1FF; margin:0 0 20px;}
.main-box .main-banner h2 b {font-size:16px; font-weight:bold; color:#fff;}
.main-box .main-banner .banner-head {margin:0 0 20px;}
.main-box .main-banner .banner-head p {text-align:center; font-size:18px; font-weight:bold; color:#fff;}
.main-box .main-banner .banner-head img {display:block; width:85%; max-width:832px; margin:0 auto;}
.main-box .main-banner .banner-body .body-price {margin:0 0 24px;}
.main-box .main-banner .banner-body .body-price > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 0 5px;}
.main-box .main-banner .banner-body .body-price > div:last-of-type {margin:0;}
.main-box .main-banner .banner-body .body-price > div strong {height:40px; padding:0 20px; font-size:18px; font-weight:bold; color:#019BFF; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#fff; border-radius:50px;}
.main-box .main-banner .banner-body .body-text p {font-size:18px; font-weight:bold; color:#fff; text-align:center; margin:0 0 20px;}
.main-box .main-banner .banner-body .body-text p strong {font-size:25px; font-weight:800; color:#FFF98C; display:block; line-height:1;}
.main-box .main-banner .banner-body .body-text ul {display:flex; flex-wrap:wrap; justify-content:center; margin:20px 0 0; padding:0 15px;}
.main-box .main-banner .banner-body .body-text ul li {flex:1; min-width:0; width:180px; margin:0 5px 0 0; background:#005DC5; border-radius:20px; padding:10px 0 17px;}
.main-box .main-banner .banner-body .body-text ul li:last-of-type {margin:0;}
.main-box .main-banner .banner-body .body-text ul li span {display:block; text-align:center; font-size:13px; font-weight:bold; color:#fff; line-height:1.3;}
.main-box .main-banner .banner-body .body-text ul li img {display:block; margin:0 auto 5px; position:relative; left:-8px; width:50%;}

/* main-service */
.main-box .main-service {background:#F9FAFB; padding:40px 15px;}
.main-box .main-service h2 {text-align:center; margin:0 0 20px; font-size:20px; font-weight:600;}
.main-box .main-service p.txt {font-size:16px; font-weight:600; color:#585858; text-align:center; margin:0 0 25px;}
.main-box .main-service ul {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 auto;}
.main-box .main-service ul li {width:100%;}
.main-box .main-service ul li:after {display:block; transform:rotate(90deg); content:""; width:24px; height:24px; margin:10px auto; background:url('../images/icon_main_service.svg') no-repeat center / cover;}
.main-box .main-service ul li:last-of-type:after {display:none;}
.main-box .main-service ul li > div {display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; width:100%; border-radius:5px; padding:10px;}
.main-box .main-service ul li > div p {width:100%; font-size:18px; font-weight:bold; color:#fff; text-align:center;}
.main-box .main-service ul li > div p small {display:block; text-align:center; font-size:14px; font-weight:bold; color:#fff;}
.main-box .main-service ul li.service01 > div {background:#7AC2E5;}
.main-box .main-service ul li.service02 > div {background:#4988BB;}
.main-box .main-service ul li.service03 > div {background:#2E4C91;}
.main-box .main-service ul li.service04 > div {background:#3A64C3;}

/* main-start */
.main-box .main-start {margin:30px 0;}
.main-box .main-start .container > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-box .main-start .container > div a {flex:1; min-width:0; font-size:20px; font-weight:800; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:60px; border-radius:50px; background:#3C81F1; color:#fff;}
.main-box .main-start .container > div a:after {display:inline-block; content:""; width:24px; height:24px; margin:0 0 0 10px; background:url('../images/icon_main_start.svg') no-repeat center / cover;}
.main-box .main-start .container p {margin:10px 0 0; text-align:center; font-size:14px; font-weight:600; color:#FF623B; word-break:keep-all;}
/* CSS */
/*
#loadingOverlay {
    display: none; !* 처음엔 숨김 *!
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;

    !* 아래 두 줄이 핵심 *!
    !*display: flex;*!
    justify-content: center;
    align-items: center;
}
*/

#loadingOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}


.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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