/* 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 h1 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 h1 a:before {display:block; content:""; width:32px; height:32px; margin:0 6px 0 0; background:url('../images/logo2.webp') no-repeat center / cover;}
header .header-logo h1 a b {font-size:20px; font-weight:900; color:var(--color-active2); 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 a {display:block; content:""; width:28px; height:28px; font-size:0; background:url('../images/icon_menu.svg') no-repeat center / cover;}
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.webp'); 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.webp') no-repeat center / cover;}
.quickmenu-box .qk-body .body-top h2 {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-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); }
}