:root {
    --main-color: #F37021;
    --sub-color: #624D4E;
    --bg-color: #F9F9F9;
    --black-color: #333333;
    --sub-txt-color: #777777;
    --border-color: #D9D9D9;
    --kakao-color: #FFDC42;
  }

@media screen and (max-width: 859px) {
    .wrap {
        padding: 0 8px;
    }
    .wrap-lg {
        padding: 0 8px;
    }
}
@media screen and (max-width: 767px) {
    /*floating*/
    .floating {
        top: unset;
        bottom: 64px;
        right: 4px;
        transform: unset;
    }
    .floating a:first-child {
        display: none;
    }
    .floating a:nth-child(2) {
        display: none;
    }
    /*팝업*/
    .popup-area {
        width: calc(100vw - 32px);
        top: 16px !important;
        left: 16px !important;
    }
    /*header*/
    .header-wrap {
        padding: 8px 0;
    }
    .header-wrap .h-naver {
        max-width: 250px;
    }
    .header-wrap .logo {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-wrap .logo img {
        height: 48px;
    }
    .header-wrap .logo .logo-expl {
        font-size: 16px;
        display: none;
    }
    /*footer*/
    .footer-wrap {
        padding-bottom: 61px;
    }
    .mobile-footer {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
    }
    .mobile-footer .box a .img-box img {
        height: 20px;
    }
    .mobile-footer .box a div span:first-child {
        letter-spacing: -1px;
    }
    .mobile-footer .box a div span:nth-child(2) {
        font-size: 13px;
    }

    /*메인*/
    .banner-area .content {
        padding: 0 8px;
    }
    .banner-area .content .main-tit {
        font-size: 58px;;
    }
    .banner-area .content .sm-tit {
        font-size: 14px;
    }
    .quick-box {
        align-items: center;
    }
    .quick-box .kq a {
        gap: 8px;
        padding: 8px;
        max-width: 350px;
        height: 55px;
    }
    .quick-box .kq a .right p:nth-child(2) {
        font-size: 14px;
    }
    .quick-box .kq a img {
        height: 20px;
    }
    .quick-box > a {
        max-width: max-content;
        height: 45px;
        font-size: 12px;
        gap: 8px;
    }
    .quick-box > a img {
        height: 20px;
    }
    .scroll-down > img {
        width: 60px;
    }
    .scroll-down .scroll-arrow {
        padding-top: 60px;
    }
    .section-tit p:first-child {
        font-size: 24px;
        text-align: center;
        word-break: keep-all
    }
    .section-tit p:nth-child(2) {
        font-size: 14px;
        text-align: center;
        word-break: keep-all;
    }
    .live-header li {
        font-size: 14px;
    }
    .live-slider .content {
        padding: 8px 0;
    }
    .live-slider .content span {
        font-size: 12px;
        word-break: keep-all;
        line-height: 1.2;
    }
    .live-slider .content span.web-price {
        display: none;
    }
    .live-slider .content span.mobile-price {
        display: block;
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-grid .item .sm-tit {
        font-size: 14px;
    }
    .section-tit.items-start {
        align-items: center;
    }
    .step-grid {
        gap: 12px;
    }
    .step-grid .item .content > p {
        font-size: 16px;
    }
    .step-grid .item .content .sub > p {
        font-size: 14px;
    }
    .gift-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 8px;
    }
    .gift-grid .item .img-box {
        margin-bottom: 12px;
    }
    .gift-grid .item .expl {
        font-size: 12px;
        min-height: 32px;
    }
    .gift-grid .item .name {
        font-size: 14px;
        letter-spacing: -1px;
    }
    .kakao-area .warning {
        height: 48px;
    }
}
@media screen and (max-width: 480px) {
    /*footer*/
    .footer-wrap > .wrap-lg {
        flex-direction: column;
        gap: 24px;
    }
    .footer-wrap .info {
        gap: 16px;
    }
    .footer-wrap .info .item span {
        font-size: 14px;
    }
    .footer-wrap .copy .wrap-lg {
        font-size: 14px;
        justify-content: center;
    }


    /*메인*/
    .banner-area .content .main-tit {
        font-size: 48px;
    }
    .quick-box .kq {
        flex-direction: column;
    }
    .live-slider .content span {
        font-size: 11px;
    }
    .section-tit p:first-child {
        font-size: 18px;
    }
    .why-grid {
        gap: 12px;
    }
    .why-grid .item {
        padding: 24px 8px;
    }
    .why-grid .item .img-box img {
        width: 36px;
    }
    .why-grid .item .tit {
        font-size: 16px;
        text-align: center;
    }
    .why-grid .item .sm-tit {
        text-align: center;
    }
    .step-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .step-grid .item .img-box {
        aspect-ratio: 16 / 9;
    }
    .gift-grid .item .img-box img {
        max-width: 250px;
    }
    .kakao-area .step-img {
        flex-direction: column;
        gap: 24px;
    }
    .kakao-area .expl {
        flex-direction: column;
        padding: 0;
    }
    .kakao-area .expl span {
        padding: 16px;
    }
    .kakao-area .expl span:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    }

}