/* Base */
@media (max-width: 1400px) {
    /* header */
    .header {padding: 24px 50px;}
    .header ul {gap: 0; justify-content: space-between;}
    .header ul a {font-size: 26px;}
    .header ul a.webLogo {display: none;}
    .header ul a.mobileLogo {display: inline-block;}

    /* wreath */
    .wreath {width: 100%; padding: 60px 10px;}
    .wreath .title {width: 100%; background-size: contain;}

    /* self */
    .self {padding: 60px 10px;}
    .self .selfTitle {font-size: 40px;}

    /* allDayBanner */
    .allDayBanner {padding: 60px 10px;}
    .allDayBanner .allDayItem.callWrap .callNumber {white-space: nowrap;}

    /* review */
    .review {padding: 85px 10px;}
    .review .reviewTitle {width: 100%; background-size: 100% 100%;}
    .review .reviewTitle .reviewTitleText {font-size: 40px;}

    /* promise */
    .promise {padding: 85px 10px;}
    .promise .promiseTitle {width: 100%; background-size: 100% 100%;}
    .promise .promiseTitle .promiseTitleText {font-size: 40px;}

    /* checkPoint */
    .checkPoint {padding: 60px 10px;}

    /* online */
    .online {padding: 58px 10px;}

    /* faq */
    .faq {padding: 58px 20px;}
    
    /* floating */
    .floatingLink {transform: scale(0.75); bottom: 10px; right: 10px;}

    /* footer */
    .footer {padding: 50px 10px;}
    .footer .footerWrap {width: 100%;}
}

@media (max-width: 1100px) {
    /* wreath */
    .wreath .title .titleText {font-size: 35px;}
    .wreath .wreathWrapper {width: 100%; flex-wrap: wrap;}
    .wreath .wreathWrapper .wreathWrap {width: calc(100% / 2 - 10px);}
    .wreath .wreathLink {font-size: 30px; line-height: 65px;}
    .wreath .title .web {display: none;}
    .wreath .title .mobile {display: inline-block;}

    /* subBanner */
    .subBanner {background-position: 70% center;}

    /* self */
    .self .selfLink {font-size: 35px; line-height: 65px;}

    /* allDayBanner */
    .allDayBanner .allDayWrap {flex-wrap: wrap; width: 100%; justify-content: center;}
    .allDayBanner .allDayItem {width: 100%;}
    .allDayBanner .allDayItem.callWrap {gap: 5px;}
    .allDayBanner .allDayItem.callWrap .call {box-shadow: none;}
    .allDayBanner .allDayItem.callWrap {background-color: #FF6900;}
    .allDayBanner .allDayItem.callWrap .allDayTitle {color: #fff;}
    .allDayBanner .allDayItem.callWrap .allDayTitle .allDayTitleSub {background-color: #fff; color: #FF6900;}
    .allDayBanner .allDayItem.callWrap .callNumber {font-size: 45px;  white-space: nowrap;}
    .allDayBanner .allDayItem .allDayLinkWrap {width: unset;}
    .allDayBanner .allDayItem.callWrap .allDayLinkWrap .allDayLink .linkText {border: none;}
    .allDayBanner .allDayItem .allDayTitle {font-size: 33px;}
    .allDayBanner .allDayItem.chatWrap .allDayTitle span {background-color: #FF6900; color: #fff; padding: 0 5px;}
    .allDayBanner .allDayItem .allDayLinkWrap .allDayLink {width: unset; height: unset;}
    .allDayBanner .allDayItem .allDayLinkWrap {flex-wrap: wrap; align-items: center; justify-content: center;}

    /* review */
    .review .reviewItemWrap {flex-wrap: wrap;}
    .review .reviewItem {width: calc(50% - 19px); height: 360px;}

    /* promise */
    .promise .promiseWrap {width: 100%; flex-wrap: wrap; justify-content: center; gap: 10px;}
    .promise .promiseWrap .promiseItem {width:calc((100% - 20px - 40px) / 5);}
    .promise .promiseWrap .promiseItem img {width: 100%;}
    .promise .promiseWrap .promiseItem .promiseDesc {bottom: 1vh; font-size: 3.5vw;}

    /* checkPoint */
    .checkPointText img {width: 100%;}

    .checkPoint4 .web {display: none;}
    .checkPoint4 .mobile {display: inline-block;}

    /* online */
    .online .callContentWrap {width: 100%;}
    .online .callBoxWrap {padding: 30px 40px; display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; width: 100%;}
    .online .callBoxWrap .callTextWrap .callText {font-size: 35px;}
    .online .callBoxWrap .callNumWrap .callNumLink {font-size: 55px; text-align: center;}
    .online .callBoxWrap .callBoxDescWrap {font-size: 25px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: center;}

    /* faq */
    .faq .faqListWrap .faqList {align-items: center;}
    .faq .faqListWrap .faqList.on {align-items: flex-start;}
    .faq .faqListWrap .faqList.on .faqContent .title {min-height: 70px;}
    .faq .faqListWrap .faqList:before {width:25px; height:70px; font-size:26px;}
    .faq .faqListWrap .faqList:after {width:25px; height:70px; font-size:36px;}

    /* floating */
    .floatingLink {transform: scale(0.5); transform-origin: bottom right; }
}

@media (max-width: 860px) {
    main {margin: 65px auto 0 auto;}

    /* header */
    .header {padding: 12px;}
    .header ul a {font-size: 28px;}
    .header ul li:nth-of-type(2),
    .header ul li:nth-of-type(3),
    .header ul li:nth-of-type(4) {display: none;}
    .header ul li .mobileMenuBtn {display: inline-block;}
    .header ul li .mobileMenuBtn img {width: 60%; transform-origin: center;}
    .header nav#mobileMenu {position: fixed; top: 75px; right: 20px; z-index: 100; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; border-radius: 8px; padding: 20px; background-color: #043330; transform: translateX(120%); transition: all 0.3s ease-out;}
    .header nav#mobileMenu.on {transform: translateX(0); transition: all 0.3s ease-out;}

    /* mainBanner */
    .mainBanner {position: relative; background: url(../images/main_banner_m.png) no-repeat; width: 100%; height: 670px; overflow: hidden; background-size: cover; background-position: center top;}
    .mainBanner::after {position: absolute; background-image: url(../images/main_banner_sub_m.png); background-size: 100% auto; background-repeat: no-repeat; background-position: center; content: ""; top: 15%; left: 50%; transform: translateX(-50%); height: 82px; width: 80vw;}
    .mainBannerText {top: 40%;}
    .mainBannerText .bannerTopText {font-size: 40px; line-height: 1;}
    .mainBannerText .bannerBgText {font-size: 40px; line-height: 1;}
    .mainBannerText .bannerSubText {font-size: 30px; line-height: 1;}

    /* wreath */
    .wreath .title .titleText {font-size: 28px;}
    .wreath .title::before {height: 6px;}
    .wreath .wreathWrapper .wreathPriceWrap {padding: 15px 10px;}
    .wreath .wreathWrapper .wreathPriceWrap .wreathPrice {font-size: 18px;}
    .wreath .wreathWrapper .wreathPriceWrap .wreathDesc {font-size: 16px;}
    .wreath .wreathLink {font-size: 22px; line-height: 50px;}
    .wreath .wreathLink::before {background-image: url(../images/wreath_link_icon_m.png); width: 70px; height: 82px; right: 20px;}

    /* subBanner */
    .subBanner {background: url(../images/sub_banner_m.png) no-repeat; width: 100%; background-size: contain; height: 450px; background-position: center;}

    /* self */
    .self .selfTitle {font-size: 28px;}
    .self .selfImg .web {width: 100%;}
    .self .selfImg .selfDesc {font-size: 3vw; bottom: 1vh;}
    .self .selfLink {font-size: 24px; line-height: 48px;}
    .self .selfLink::before {background-image: url(../images/wreath_link_icon_m.png); width: 70px; height: 82px; right: 20px;}

    /* allDayBanner */
    .allDayBanner .allDayTitle {font-size: 50px;}
    .allDayBanner .allDayItem.callWrap .callNumber {font-size: 30px;}

    /* review */
    .review {gap: 100px;}
    .review .reviewTitle .reviewTitleText {padding: 15px 25px; background-color: #FF6900; border-radius: 16px; white-space: nowrap; font-size: 35px;}
    .review .reviewTitle img {display: none;}
    .review .reviewItem .reviewId {flex-direction: column; gap: 10px;}
    .review .reviewItem {height: unset;}
    .review .reviewImg img {width: 100%;}
    .review .reviewItem .reviewDesc {font-size: 15px;}

    /* promise */
    .promise {gap: 100px;}
    .promise .promiseTitle .promiseTitleText {padding: 15px 25px; background-color: #043330; border-radius: 16px; white-space: nowrap; font-size: 35px;}
    .promise .promiseTitle img {display: none;}
    .promise .promiseComment .commentText {font-size: 26px;}
    .promise .promiseComment .commentImg img {width: 46px; height: 48px;}

    .promise .promiseWrap .promiseItem {width:calc((100% - 20px - 20px) / 3);}
    .promise .promiseWrap .promiseItem .promiseDesc {bottom: 1.5vh; font-size: 5vw;}
    .promise .promiseWrap {gap: 30px 10px;}

    /* checkPoint */
    .checkPoint .checkTitle {font-size: 25px;}
    .checkPoint1 .checkPointText .checkPointTop {font-size: 20px;}
    .checkPoint1 .checkPointText .checkPointMid {font-size: 40px;}
    .checkPoint1 .checkPointText .checkPointBottom {font-size: 30px;}
    .checkPoint1 .checkPointText .checkPointInfo {font-size: 23px;}
    .checkPoint1 .checkPointText {width: 100%;}

    .checkPoint2 .checkPointText .checkPointTop .checkPointTopText {font-size: 42px;}
    .checkPoint2 .checkPointText .checkPointBottom {font-size: 30px;}

    .checkPoint3 .checkPointText .checkPointTop .checkPointTopText {font-size: 33px;}
    .checkPoint3 .checkPointText .checkPointBottom {font-size: 22px;}

    .checkPoint4 .checkPointText .checkPointTop .checkPointTopText {font-size: 25px;}
    .checkPoint4 .checkPointText .checkPointBottom .checkPointBottomText {font-size: 42px;}
    .checkPoint4 .checkPointText .checkPointBottom {font-size: 42px;}

    .checkPoint5 .checkPointText .checkPointTop .checkPointTopText {font-size: 42px;}
    .checkPoint5 .checkPointText .checkPointMid {font-size: 28px;}
    .checkPoint5 .checkPointText .checkPointBottom {font-size: 28px;}

    .checkPointText img {width: 100%;}

    /* online */
    .online .onlineTitle {font-size: 40px;}
    .online .callBoxWrap .callTextWrap .callText {font-size: 30px;}
    .online .callBoxWrap .callNumWrap .callNumLink {font-size: 45px; text-align: center;}
    .online .callBoxWrap .callBoxDescWrap {font-size: 20px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: center;}
    .online .callTextWrap img {width: 100%;}
    .online .callBoxWrap {padding: 15px 40px;}
    .online .callBoxWrap .callTextWrap {gap: 15px; justify-content: center;}
    .online .callTextWrap > span:first-of-type {width: 40px; height: 37px;}
    .online .callDescText {font-size: 18px;}
    .online .callDescWrap {width: 100%;}

    /* faq */
    .faq .cl_sectionTitle .mainText {font-size: 27px;}
    .faq .faqListWrap .faqList .faqContent .title > button {font-size: 20px;}
    .faq .faqListWrap .faqList {padding: 0 20px; gap: 20px;}
    .faq .faqListWrap .faqList.on .faqContent .title {min-height: 45px;}
    .faq .faqListWrap .faqList:before {width:20px; height:45px; font-size:15px;}
    .faq .faqListWrap .faqList:after {width:20px; height:45px; font-size:18px;}
    .faq .faqListWrap .faqList .faqContent .desc {font-size: 20px;}
    .faq .faqListWrap .faqList .faqContent .desc table {
        font-size: 14px;
        margin: 20px 0;
    }

    .faq .faqListWrap .faqList .faqContent .desc table th,
    .faq .faqListWrap .faqList .faqContent .desc table td {
        padding: 12px 7px;
        word-break: break-word;
    }


    /* footer */
    .footer .footerWrap .web {display: none;}
    .footer .footerWrap .mobile {display: inline-block;}
    .footer .footerWrap .descTitle {display: none;}
    .footer .footerWrap .footerDescWrapper {flex-direction: column; gap: 42px;}
    .footer .footerWrap .footerLine {display: none;}
    .footer .footerWrap .footerLineMobile {display: inline-block;}
    .footer .footerWrap .mobile {transform: scale(0.75); transform-origin: center left;}
    .footer .footerWrap .descSubTitleMain {font-size: 27px;}
    .footer .footerWrap .descSubTitleP {font-size: 18px;}
}

@media (max-width: 485px) {
    /* wreath */
    .wreath .title .mobile {width: 50%; min-width: 280px;}
    .wreath .wreathWrapper .wreathPriceWrap {padding: 15px 6px;}
    .wreath .wreathWrapper .wreathPriceWrap .wreathPrice {font-size: 14px;}
    .wreath .wreathWrapper .wreathPriceWrap .wreathDesc {font-size: 12px;}
    .wreath .wreathLink {font-size: 18px; line-height: 45px;}
    .wreath .wreathLink::before {right: 6px; width: 50px; height: 59px; background-size: contain;}
    
    /* self */
    .self .selfTitle {font-size: 20px;}
    .self .selfLink {font-size: 16px; line-height: 30px;}
    .self .selfLink::before {right: 6px; width: 50px; height: 59px; background-size: contain;}
    .self .selfImg .selfDesc {font-size: 2.5vw; bottom: 1vh;}


    /* allDayBanner */
    .allDayBanner .allDayTitle {font-size: 36px; white-space: nowrap;}
    .allDayBanner .allDayItem .allDayTitle {font-size: 26px;}
    .allDayBanner .allDayItem.callWrap .callNumber {font-size: 26px;}
    .allDayBanner .allDayItem.callWrap .call {gap: 10px; padding: 20px;}
    .allDayBanner .allDayItem .allDayLinkWrap {gap: 20px; width: 100%;}
    .allDayBanner .allDayItem.chatWrap .allDayLinkWrap .allDayLink img {width: 100%;}
    .allDayBanner .allDayItem .allDayLinkWrap .allDayLink .linkText {font-size: 23px;}
    .allDayBanner .allDayItem .call {padding: 27px 20px;}
    .allDayBanner .allDayItem .naver {padding: 27px 20px;}
    .allDayBanner .allDayItem .kakao {padding: 27px 20px;}

    /* review */
    .review .reviewTitle .reviewTitleText {font-size: 20px;}
    .review .reviewItem .reviewDesc {font-size: 14px;}

    /* promise */
    .promise .promiseTitle .promiseTitleText {font-size: 20px;}
    .promise .promiseComment .commentText {font-size: 20px;}
    .promise .promiseComment .commentImg img {width: 30px; height: 30px;}
    .promise .promiseWrap .promiseItem .num {font-size: 3vw; top: -1vh;}
    .promise .promiseWrap .promiseItem .promiseDesc {bottom: 1vh;}
    .promise .promiseWrap {gap: 20px 10px;}
    
    /* checkPoint */
    .checkPoint .checkTitle {font-size: 20px;}
    .checkPoint1 .checkPointText .checkPointTop {font-size: 16px;}
    .checkPoint1 .checkPointText .checkPointMid {font-size: 26px; gap: 50px;}
    .checkPoint1 .checkPointText .checkPointBottom {font-size: 20px; gap: 10px;}
    .checkPoint1 .checkPointText .checkPointInfo {font-size: 16px;}

    .checkPoint2 .checkPointText .checkPointTop .checkPointTopText {font-size: 32px; white-space: nowrap;}
    .checkPoint2 .checkPointText .checkPointBottom {font-size: 23px;}

    .checkPoint3 .checkPointText .checkPointTop .checkPointTopText {font-size: 22px;}
    .checkPoint3 .checkPointText .checkPointBottom {font-size: 14px;}

    .checkPoint4 .checkPointText .checkPointTop .checkPointTopText {font-size: 20px;}
    .checkPoint4 .checkPointText .checkPointBottom .checkPointBottomText {font-size: 20px;}
    .checkPoint4 .checkPointText .checkPointBottom {font-size: 30px;}

    .checkPoint5 .checkPointText .checkPointTop .checkPointTopText {font-size: 30px;}
    .checkPoint5 .checkPointText .checkPointMid {font-size: 20px;}
    .checkPoint5 .checkPointText .checkPointBottom {font-size: 18px;}

    /* online */
    .online .onlineTitle {font-size: 30px;}
    .online .callBoxWrap .callTextWrap .callText {font-size: 20px;}
    .online .callBoxWrap .callNumWrap .callNumLink {font-size: 30px; text-align: center;}
    .online .callBoxWrap .callBoxDescWrap {font-size: 12px;}
    .online .callBoxWrap {padding: 15px;}
    .online .callDescText {font-size: 12px;}
    .online .callDesc {gap: 10px;}
    .online .callDescIcon {width: 30px; height: 30px;}
    .online .callDescIcon img {width: 100%;}

    /* faq */
    .faq .cl_sectionTitle .mainText {font-size: 20px;}
    .faq .faqListWrap .faqList .faqContent .title > button {font-size: 13px;}
    .faq .faqListWrap .faqList {padding: 0 10px; gap: 10px;}
    .faq .faqListWrap .faqList .faqContent .desc {font-size: 12px;}
    .faq .faqListWrap .faqList .faqContent .desc table {
        font-size: 13px;
        margin: 20px 0;
    }

    .faq .faqListWrap .faqList .faqContent .desc table th,
    .faq .faqListWrap .faqList .faqContent .desc table td {
        padding: 12px 7px;
        word-break: break-word;
    }


    /* floating */
    .floatingLink {transform: scale(0.3);}


    /* footer */
    .footer {padding: 20px 10px;}
    .footer .footerWrap {gap: 20px;}
    .footer .footerWrap .descSubTitleMain {font-size: 25px;}
    .footer .footerWrap .descSubTitleStrong {font-size: 17px;}
    .footer .footerWrap .mobile {transform: scale(0.5); transform-origin: center left;}
    .footer .footerWrap .footerDescWrapper {gap: 20px;}
    .footer .footerWrap .descSubTitleP {font-size: 12px; word-break: keep-all;}

}