@charset "utf-8";

/*
 * File       : main.css
 * Author     : SMART GEO
 * Guideline  : -
 * Update : 2024-06-25
 *
 * Dependency : -
 *
 * SUMMARY:
 * 01) 메인페이지 애니메이션
 * 02) 풀페이지 네비게이션
 * 03) 메인페이지 글로벌
 * 04) SLIDE 1 (청맥은)
 * 05) SLIDE 2 (무엇을)
 * 06) SLIDE 3 (얼마나)
 * 07) SLIDE 4 (어떻게)
 * 08) SLIDE 5 (어디서)
 * 09) SLIDE 6 (footer)
 */


/* **************************************** *
 * 01) 메인페이지 애니메이션
 * **************************************** */
@keyframes bg_animation_1 { 0% { transform:translateY(0px) scale(1); } 100% { transform:translateY(10px) scale(1.35);} }
@keyframes bg_animation_2 { 0% { transform:rotate(0) scale(1); } 100% { transform:rotate(2.5deg) scale(1.35); } }
@keyframes bg_animation_3 { 0% { transform: rotate(0) scale(1.4); } 100% { transform: rotate(-2.5deg) scale(1);} }
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0% { transform: scaleX(1) } 50% { transform: scale3d(1.07, 1.07, 1.07) } to { transform: scaleX(1) } }
@keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0) } to { opacity: 1; transform: translateZ(0) } }
@keyframes lightSpeedInLeft { 0% { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); } 80% { transform: skewX(5deg) } to { transform: translateZ(0); opacity: 1 } }
@keyframes progress_animation { 0% { width: 0; } 100% { width: 100%; } }
@keyframes borderBottomFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* **************************************** *
 * 02) 풀페이지 네비게이션
 * **************************************** */
/* NAV GB */
.fp-sr-only { font-family: 'NanumSquare', 'Noto Sans KR', sans-serif; }
.fp-tableCell { display: inline-block; }
.fp-section.fp-table, .fp-slide.fp-table { display: block; }

/* NAV (PC) */
#fp-nav { left: 0; transition: opacity .3s; }
#fp-nav.transparent { opacity: 0; }
#fp-nav ul li:last-child { display: none; }
#fp-nav ul li a .fp-sr-only { position: relative; display: inline-block; padding: 12px 0 12px 120px; margin: 4px 0; font-size: 23px; color: rgba(255, 255, 255, .6); border-bottom: 2px solid transparent; transition: .5s padding ease-out, .5s margin ease-out, .25s color ease-out; }
#fp-nav ul li a.active .fp-sr-only { margin: 16px 0; font-weight: bold; color: rgba(255, 255, 255, 1); }
#fp-nav ul li a .fp-sr-only::after { content: ''; width: 0; }
#fp-nav ul li a.active .fp-sr-only::after { content: ''; position: absolute; background: url('https://cheongmac.blob.core.windows.net/main/ic_main_nav_arrow.svg') center center/cover no-repeat; width: 200px; height: 10px; bottom: -2px; left: 0; transition: all 0.5s linear; }
#fp-nav ul li:nth-child(1) a.active .fp-sr-only::after, #fp-nav ul li:nth-child(2) a.active .fp-sr-only::after, #fp-nav ul li:nth-child(3) a.active .fp-sr-only::after, #fp-nav ul li:nth-child(4) a.active .fp-sr-only::after { background: url('https://cheongmac.blob.core.windows.net/main/ic_main_nav_arrow_w.svg') center center/cover no-repeat; }
#fp-nav.bk ul li a .fp-sr-only { color: rgba(0, 0, 0, 0.6) }
#fp-nav.bk ul li a.active .fp-sr-only { color: rgba(0, 0, 0, 1);}

/* NAV (MOBILE) */
.fp-slidesNav { top: 70px; background: rgba(65, 65, 68, .04) }
.fp-slidesNav ul li { box-sizing: border-box; display: inline-block; width: 20%; padding: 10px 4px; text-align: center; }
.fp-slidesNav ul li a { position: relative; }
.fp-slidesNav ul li a.active:before { content: ''; position: absolute; bottom: 6px; left: -10px; width: 4px; height: 4px; background: rgba(255, 255, 255, 1); border-radius: 50%; }
.fp-slidesNav ul li a .fp-sr-only { position: relative; font-size: 14px; color: rgba(255, 255, 255, .6); }
.fp-slidesNav ul li a.active .fp-sr-only { font-weight: bold; color: rgba(255, 255, 255, 1); }
.fp-slidesNav.wh { background: rgba(255, 255, 255, .04) }
.fp-slidesNav.wh ul li a .fp-sr-only { color: rgba(0, 0, 0, .6); }
.fp-slidesNav.wh ul li a.active .fp-sr-only { color: rgba(0, 0, 0, 1); }
.fp-slidesNav.wh ul li a.active:before { background: rgba(0, 0, 0, 1); }

/* **************************************** *
 * 03) 메인페이지 글로벌
 * **************************************** */
#fullpage { font-family: 'NanumSquare', 'Noto Sans KR', sans-serif; }
#fullpage .view_pc { display: block; }
#fullpage .view_m { display: none; }
#fullpage .slide { position: relative; }
#fullpage .slide .video_slide { position: relative; display: inline-block; width: 100%; }
#fullpage .slide .video_slide video { width: 102%; height: 100%; object-fit: cover; pointer-events: none; filter: brightness(0.75); }
#fullpage .slide .outer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1320px; height: 67%; text-align: center; }
#fullpage .slide .inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
#fullpage .slide .subject { position: absolute; top: 0; left: 0; width: 100%; text-align: left; }
#fullpage .slide .subject .title { font-family: 'Noto Sans KR', sans-serif; font-size: 58px; line-height: 1.4; margin-bottom: 32px; letter-spacing: -0.02em; }
#fullpage .slide .subject.wh .title { color: #ffffff; }
#fullpage .slide .subject.bk .title { color: #232120; }
#fullpage .slide .subject .hashtag li { display: inline-block; padding: 7px 13px; margin: 0 10px 10px 0; font-family: 'NanumSquare', 'Noto Sans KR', sans-serif; font-size: 20px; letter-spacing: -0.02em; border-radius: 30px; white-space: nowrap; }
#fullpage .slide .subject .hashtag li.mb_0 { margin-bottom: 0; }
#fullpage .slide .subject .hashtag li.wide { letter-spacing: 1px; }
#fullpage .slide .subject.wh .hashtag li { border: 1px solid #ffffff; color: #ffffff; }
#fullpage .slide .subject.bk .hashtag li { border: 1px solid #232120; color: #232120; }
#fullpage .slide .subject .hashtag li.point { background-color: #F8642A; border: 1px solid #F8642A; color: #ffffff; }

#fullpage .slide .subject .row { display: flex; gap: 10px; }

#fullpage strong { font-weight: bold; }
#fullpage .swiper-pointer-events { position: relative; overflow: hidden; }


#fullpage .sct1 .desktopVisibleObject { display: flex; }
#fullpage .sct1 .mobileVisibleObject { display: none; }

/* **************************************** *
 * 04) SLIDE 1 (청맥은)
 * **************************************** */
#fullpage .sct1 .main_popup_slide_wrap { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 110px; text-align: center; transition: all .3s; }
#fullpage .sct1 .main_popup_slide_wrap::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 90px; background-color: #ffffff; }
#fullpage .sct1 .main_popup_slide_wrap.hide { opacity: 0; }
#fullpage .sct1 .main_popup_slide_wrap .popup_close_btn { position: absolute; top: 44px; right: 0; padding: 10px 32px; border-radius: 40px; font-size: 18px; color: #ffffff; background: #C4C4C4; z-index: 100; }
#fullpage .sct1 .main_popup_slide_wrap .popup_close_btn i { position: relative; top: 2px; }
#fullpage .sct1 .main_popup_slide_wrap .popup_close_btn span { display: inline-block; margin-right: 6px; }
#fullpage .sct1 .main_popup_slide_wrap .popup_close_btn:hover { background: #999999; }
#fullpage .sct1 .main_popup_slide_container { position: relative; display: inline-block; max-width: 1320px; width: 100%; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list { position: relative; display: flex; align-items: center; max-width: 1320px; width: 100%; margin-top: 21px; height: 90px; padding-left: 76px; background-color: #ffffff; letter-spacing: -0.02em; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .type { position: relative; width: 150px; font-size: 22px; font-weight: bold; color: #232120; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .type:after { content: ''; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); width: 1px; height: 22px; background-color: #a0a0a0; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc { flex-grow: 1; text-align: left; padding-left: 24px; font-size: 22px; color: #727272; opacity: 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc .column { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc .column .point { font-weight: bold; color: #F8642A; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc .column .subSubject { margin-top: 10px; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list img { position: relative; bottom: 8px; height: 104px; opacity: 0; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide-active .popup_list .desc { opacity: 1; }
#fullpage .sct1 .main_popup_slide_container .swiper-slide-active .popup_list img { opacity: 1; }
#fullpage .sct1 .main_popup_slide_container .swiper-button-prev, #fullpage .sct1 .swiper-button-next { right: unset; left: 7px; transform: rotate(90deg); }
#fullpage .sct1 .main_popup_slide_container .swiper-button-prev { top: 40px; }
#fullpage .sct1 .main_popup_slide_container .swiper-button-next { top: unset; bottom: -2px; }
#fullpage .sct1 .main_popup_slide_container .swiper-button-next:after, #fullpage .sct1 .swiper-button-prev:after { font-size: 22px; color: #b6b6b6; }
#fullpage .sct1 .main_popup_slide_container .swiper-button-next:hover:after, #fullpage .sct1 .swiper-button-prev:hover:after { color: #414144; }
#fullpage .sct1 .main_popup_slide_container .swiper-pagination-fraction { width: auto; bottom: 33px; font-size: 20px; color: #232120; }
#fullpage .sct1 .main_popup_slide_container .swiper-pagination-fraction .swiper-pagination-current { font-weight: bold; }
#fullpage .sct1 .video_slide video { filter: brightness(90%); }
#fullpage .sct1 .inner .pc_slogan { display: inline-block; position: relative; color: #ffffff; font-size: 28px; margin: 112px 0 100px; opacity: 0; }
#fullpage .sct1.active .inner .pc_slogan::before { content: ''; position: absolute; top: 150%; left: 0; width: 100%; height: 2px; background: #FFFFFF; opacity: 0; animation: borderBottomFadeIn .5s ease-in-out forwards; animation-delay: 3s; }
#fullpage .sct1.active .inner .pc_slogan span { display: inline-block; opacity: 0; }
#fullpage .sct1 .inner .m_slogan { display: none; }
#fullpage .sct1 .inner { text-align: left; }
#fullpage .sct1 .inner .btn_list { display: flex; align-items: center; gap: 12px; }
#fullpage .sct1 .inner .btn_list button { position: relative; font-size: 23px; font-family: inherit; font-weight: bold; border-radius: 80px; padding: 0 24px; height: 54px; display: flex; justify-content: space-between; align-items: center; }
#fullpage .sct1 .inner .btn_list button:first-child { background-color: #ffffff; border: 2px solid #ffffff; color: #F8642A; margin-right: 16px; }
#fullpage .sct1 .inner .btn_list button:nth-of-type(2) { background-color: transparent; border: 2px solid #ffffff; color: #ffffff;  }
#fullpage .sct1 .inner .btn_list button:last-child { display: none; background-color: transparent; border: 2px solid #ffffff; color: #ffffff;  }
#fullpage .sct1 .inner .btn_list button i { position: relative; padding-left: 28px; }
#fullpage .sct1 .inner .btn_list button:hover { background: rgba(0, 0, 0, .4); border: 2px solid transparent; color: #ffffff; }
#fullpage .sct1 .inner .main_title { text-align: left; }
#fullpage .sct1 .inner .main_title h1 { white-space: pre-line; font-size: 60px; line-height: 1.25; letter-spacing: -0.02em; font-family: 'Noto Sans KR', sans-serif; color: #ffffff; margin-bottom: 80px; }
#fullpage .sct1 .inner .main_title h1 strong { font-size: 72px; }
#fullpage .sct1 .video_content { position: absolute; width: 800px; border: 1px solid #dddddd; visibility: hidden; padding: 20px; opacity: 0; transition: .3s ease; top: calc(50vh - 45vh); left: calc(50vw - 400px); background-color: #ffffff; z-index: 99999; }
#fullpage .sct1 .video_content.show { visibility: visible; opacity: 1; top: calc(50vh - 300px); border-radius: 15px; }
#fullpage .sct1 .video_content iframe { width: 100%; }
#fullpage .sct1 .video_content .video_close_btn { position: absolute; right: 0; top: -55px; font-size: 40px; font-weight: 100; line-height: 40px; cursor: pointer; }
#fullpage .sct1 .video_content_bg { visibility: hidden; opacity: 0; position: fixed; width: 100%; height: 100%; left: 0; bottom: 0; background: rgba(0, 0, 0, .9); z-index: 9999; }
#fullpage .sct1 .video_content_bg.show { visibility: visible;  opacity: 1; }
#fullpage .sct1.active .inner .pc_slogan { opacity: 1; }
#fullpage .sct1.active .inner .pc_slogan span { animation: lightSpeedInLeft 1s ease-in-out forwards; }
#fullpage .sct1.active .inner .pc_slogan span:nth-child(1) { animation-delay: 0.7s; }
#fullpage .sct1.active .inner .pc_slogan span:nth-child(2) { animation-delay: 1.4s; }
#fullpage .sct1.active .inner .pc_slogan span:nth-child(3) { animation-delay: 2.0s; }
#fullpage .sct1 .pc{
    display: block;
}
#fullpage .sct1 .sub_popup_wrap {
    position: absolute;
    z-index: 1;
    right: 210px;
    bottom: 150px;
    width: 270px;
    height: auto;
    cursor: pointer;
    display: none;
}
#fullpage .sct1 .sub_popup_wrap .sub_title{
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #FFFFFF;
    margin-bottom: 12px;
}
#fullpage .sct1 .sub_popup_wrap .sub_title .white_bold{
    font-weight: 600;
    font-size: 20px;
}
#fullpage .sct1 .sub_popup_wrap .sub_title:before{
    content: '';
    background: url('https://cheongmac.blob.core.windows.net/popup/ic_main1_subpopup_20220412.png') center center/cover no-repeat;
    width: 26px;
    height: 22px;
    display: inline-block;
    position: relative;
    top: 4px;
    left: -6px;
}

#fullpage .sct1 .sub_popup_wrap .sub_title:after{
    content: '';
    background: url('https://cheongmac.blob.core.windows.net/popup/ic_main1_subpopup_20220412.png') center center/cover no-repeat;
    width: 26px;
    height: 22px;
    display: inline-block;
    position: relative;
    top: 4px;
    left: 6px;
}

#fullpage .sct1 .pc.sub_img{
    max-width: 80%;
}
#fullpage .sct1 .mobile{
    display: none;
}

/* S -- 2023.06.26 Add */
#fullpage .sct1 #mainPageEventPopup { position: absolute; bottom: 130px; right: 40px; display: flex; gap: 40px; z-index: 10; }
#fullpage .sct1 #mainPageEventPopup a { position: relative; top: 0; left: 0; width: 380px; aspect-ratio: 1 / 1.4125; display: flex; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
/*#fullpage .sct1 #mainPageEventPopup a.active { z-index: 11; transform: scale(1.04); }*/
#fullpage .sct1 #mainPageEventPopup a:hover { transform: scale(0.98); opacity: 0.7; }
/*#fullpage .sct1 #mainPageEventPopup a.active:hover { transform: scale(1.02); }*/
#fullpage .sct1 #mainPageEventPopup img { width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 1920px) {
    #fullpage .sct1 #mainPageEventPopup a { width: 300px; }
}
@media screen and (max-width: 1600px) {
    #fullpage .sct1 #mainPageEventPopup { bottom: 122px; right: 32px; gap: 32px; }
    #fullpage .sct1 #mainPageEventPopup a { width: 240px; }
}
@media screen and (max-width: 1440px) {
    #fullpage .sct1 #mainPageEventPopup a { width: 220px; }
}
@media screen and (max-width: 1280px) {
    #fullpage .sct1 #mainPageEventPopup a { width: 172px; }
}
@media screen and (max-width: 1140px) {
    #fullpage .sct1 .desktopVisibleObject { display: none; }
    #fullpage .sct1 .mobileVisibleObject { display: flex; }

    /* type 1. 크기 조절 */
    #fullpage .sct1 #mainPageEventPopup { right: 12px; bottom: 132px; justify-content: flex-end; gap: 12px; }
    #fullpage .sct1 #mainPageEventPopup a { width: 134px; }
    #fullpage .sct1 #mainPageEventPopup a:last-child { display: none; }
    #fullpage .sct1 #mainPageEventPopup a.active { transform: unset; }
    #fullpage .sct1 #mainPageEventPopup a:hover { transform: unset; opacity: unset; }

    #fullpage .sct1 .inner .btn_list button { width: 176px; }
    #fullpage .sct1 .inner .btn_list button:first-child { display: flex; justify-content: space-between; background-color: #F8642A; border: 2px solid #F8642A; color: #FFFFFF; }
    #fullpage .sct1 .inner .btn_list button:nth-of-type(2) { display: none; }
    #fullpage .sct1 .inner .btn_list button:last-child { display: flex; justify-content: space-between; background-color: #FFFFFF; border: 2px solid #FFFFFF; color: #F8642A; }

    /* type 2. 겹쳐둘 때 */
    /*
    #fullpage .sct1 #mainPageEventPopup { right: 12px; bottom: 132px; width: 128px; aspect-ratio: 1 / 1.4125; }
    #fullpage .sct1 #mainPageEventPopup a { position: absolute; width: 100%; }
    #fullpage .sct1 #mainPageEventPopup a.active { transform: scale(1.02) translateY(-6%) translateX(-7%); }
    #fullpage .sct1 #mainPageEventPopup a:hover { transform: unset; opacity: unset; }
     */
}
@media screen and (max-width: 380px) {
    /*#fullpage .sct1 #mainPageEventPopup { width: 230px; }*/
}
@media screen and (max-width: 280px) {
    /*#fullpage .sct1 #mainPageEventPopup { width: 212px; }*/
}
/* E -- 2023.06.26 Add */

@media screen and (max-width: 1140px){
    #fullpage .sct1 .sub_popup_wrap .sub_popup_close{
        width: 0;
        height: 0;
        display: inline-block;
    }
    #fullpage .sct1 .sub_popup_wrap .sub_popup_close::before{
        content: '\0058';
        font-size: 12px;
        line-height: 22px;
        text-align: center;
        position: relative;
        display: inline-block;
        width: 22px;
        height: 22px;
        top: 46px;
        right: -82px;
        border-radius: 50%;
        background: #000000;
        color: #ffffff;
    }
    #fullpage .sct1 .mobile{
        display: block;
    }

}
/* **************************************** *
 * 05) SLIDE 2 (무엇을)
 * **************************************** */
#fullpage .sct2 .subject { position: unset; width: unset; }
#fullpage .sct2 .subject .hashtag li { margin: 0; }
#fullpage .sct2 .outer { display: flex; gap: 80px; }
#fullpage .sct2 .outer .view_pc { display: flex; flex-direction: column; gap: 10px; }
#fullpage .sct2 .inner { position: absolute; width: 100%; }
#fullpage .sct2 .inner .content { width: 100%; display: flex; flex-direction: column; gap: 72px; height: 100%; }
#fullpage .sct2 .inner .content .contentGroup { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px; }
#fullpage .sct2 .inner .content .contentGroup .treatment { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 20px; overflow: hidden; transition: all .3s; }
#fullpage .sct2 .inner .content .contentGroup .treatment::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 33.3%; background: linear-gradient(to top, #000000 20%, transparent 100%); z-index: 1 }
#fullpage .sct2 .inner .content .contentGroup:nth-of-type(1) .treatment:nth-of-type(1) { grid-column: 2 / 3; grid-row: 1 / 2; }
#fullpage .sct2 .inner .content .contentGroup:nth-of-type(1) .treatment:nth-of-type(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
#fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) .treatment:nth-of-type(1) { grid-column: 2 / 3; grid-row: 1 / 2; }
#fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) .treatment:nth-of-type(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
/*#fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) .treatment:nth-of-type(3) { grid-column: 3 / 4; grid-row: 1 / 2; }*/
#fullpage .sct2 .inner .content .contentGroup .treatment .imgArea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#fullpage .sct2 .inner .content .contentGroup .treatment .imgArea img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
#fullpage .sct2 .inner .content .contentGroup .treatment .txtArea { position: relative; padding: 2vh; display: flex; justify-content: space-between; align-items: center; gap: 12px; line-height: 1; color: #FFFFFF; z-index: 2; }
#fullpage .sct2 .inner .content .contentGroup .treatment .txtArea h1 { font-size: 24px; font-weight: bold; }
#fullpage .sct2 .inner .content .contentGroup .treatment .txtArea span { font-size: 16px; }
#fullpage .sct2 .inner .content .contentGroup .treatment .txtArea svg { width: 18px; aspect-ratio: 1 / 0.6111111111; fill: none; }
#fullpage .sct2 .inner .content .contentGroup .treatment .txtArea svg path { stroke-linecap: round; stroke-linejoin: round; stroke: #FFFFFF; }
#fullpage .sct2 .inner .content .contentGroup .treatment .txtArea .moreButton { display: flex; align-items: center; gap: 0.8vh; }
#fullpage .sct2 .inner .content .contentGroup .treatment:hover { box-shadow: 0 7px 14px rgba(0, 0, 0, .35); }
#fullpage .sct2 .inner .content .contentGroup .treatment:hover .imgArea img { transform: scale(1.03); }
#fullpage .sct2 .inner .content .contentGroup .treatment:hover .txtArea { color: #F8642A; }
#fullpage .sct2 .inner .content .contentGroup .treatment:hover .moreButton { color: #F8642A; }
#fullpage .sct2 .inner .content .contentGroup .treatment:hover svg path { stroke: #F8642A; }

/* **************************************** *
 * 06) SLIDE 3 (얼마나)
 * **************************************** */
#fullpage .sct3 #slide3_content_bg { width: 100%; height: 100%; }
#fullpage .sct3 #slide3_content_bg img { max-width: unset; width: 100%; height: 100%; object-fit: cover; }
#fullpage .sct3 .inner .title  { position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); font-size: 52px; color: #ffffff; line-height: 1.2; white-space: nowrap; user-select: none; opacity: 0; transition: opacity 1s; transition-delay: 2.5s; }
#fullpage .sct3 .inner svg { opacity: 0; }
#fullpage .sct3 .inner .countbox { position: absolute; display: inline-block; width: 30px; height: 30px; border-radius: 50%; text-align: center; color: #ffffff; letter-spacing: -0.03em; transition: all 1s ease; }
#fullpage .sct3 .inner .countbox .content { opacity: 0; transition: opacity .5s; transition-delay: 1.2s; }
#fullpage .sct3 .inner .countbox.mint { top: 47%; left: 54%; background: linear-gradient(190deg, rgba(42, 191, 254, 1) 5.97%, rgba(35, 169, 134, 1) 90.89%); animation: bg_animation_1 5s linear infinite alternate; transform:translateY(0px) scale(1); }
#fullpage .sct3 .inner .countbox.skyblue { bottom: 48%; left: 52%; background: linear-gradient(199.08deg, rgba(0, 122, 235, 1) 8.84%, rgba(40, 190, 208, 1) 86.11%); animation: bg_animation_2 5s linear infinite alternate; animation-delay: 4s; transform:rotate(0) scale(1); }
#fullpage .sct3 .inner .countbox.red { bottom: 45%; right: 43%; background: linear-gradient(180deg, rgba(252, 119, 61, 1) 0%, rgba(211, 41, 59, 1) 100%); animation: bg_animation_3 5s linear infinite alternate; animation-delay: 2s; transform: rotate(0) scale(1.4); }
#fullpage .sct3 .inner.active #homangle { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: dash 20s ease-out forwards; animation-delay: 1.5s; }
#fullpage .sct3 .inner.active .title { opacity: 1; }
#fullpage .sct3 .inner.active svg { opacity: 1; }
#fullpage .sct3 .inner.active .countbox { width: 180px; height: 180px; }
#fullpage .sct3 .inner.active .countbox .content { opacity: 1; }
#fullpage .sct3 .inner.active .countbox.mint { top: 2%; left: 50%; transform: translateX(-50%); }
#fullpage .sct3 .inner.active .countbox.skyblue { bottom: 0; left: 0; }
#fullpage .sct3 .inner.active .countbox.red { bottom: 15%; right: 0; }
#fullpage .sct3 .inner.active .countbox .icon { display: inline-block; width: 42px; height: 42px; margin: 22px 0 20px; }
#fullpage .sct3 .inner.active .countbox.mint .icon { background: url("https://cheongmac.blob.core.windows.net/main/ic_main_slide3_icon1.svg") center center/cover no-repeat; }
#fullpage .sct3 .inner.active .countbox.skyblue .icon { background: url("https://cheongmac.blob.core.windows.net/main/ic_main_slide3_icon2.svg") center center/cover no-repeat; }
#fullpage .sct3 .inner.active .countbox.red .icon { background: url("https://cheongmac.blob.core.windows.net/main/ic_main_slide3_icon3.svg") center center/cover no-repeat; }
#fullpage .sct3 .inner.active .countbox .cnt { font-size: 24px; }
#fullpage .sct3 .inner.active .countbox .cnt .num { font-size: 42px; font-weight: bold; letter-spacing: -1px; margin-right: 4px; }
#fullpage .sct3 .inner.active .countbox .desc { font-size: 18px; letter-spacing: -0.08em; margin-top: 14px;}

/* **************************************** *
 * 07) SLIDE 4 (어떻게)
 * **************************************** */
#fullpage .sct4 { overflow: hidden; }
#fullpage .sct4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 47%; background: linear-gradient( 0deg , rgba(0, 0, 0, 0.7), transparent); }
#fullpage .sct4 .thumbnail_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; background-color: #bfb7b3; }
#fullpage .sct4 .thumbnail_bg .thumbnail_bg_wrap { width: 100%; height: 0; opacity: 0; transition: 1s opacity ease; background-position: center; background-size: cover; }
#fullpage .sct4 .thumbnail_bg .thumbnail_bg_wrap.current { opacity: 1; height: 100%; }
#fullpage .sct4 .thumbnail_bg .thumbnail_bg_wrap img { max-width: unset; width: 100%; height: 100%; object-fit: cover; }
#fullpage .sct4 .outer { z-index: 2; }
#fullpage .sct4 .inner .content { width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; }
#fullpage .sct4 .inner .thumbnail_slide { position: relative; overflow: hidden; width: 50%; height: 412px; text-align: right; padding-bottom: 24px; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide { width: 40%; height: 82%; padding: 20px 16px 0; border-radius: 24px; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active { padding: 0 16px; transition: padding .3s; cursor: pointer; }
/*#fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active:before { content: ''; position: absolute; bottom: -8px; right: 8px; width: 60px; height: 60px; background: url("..https://cheongmac.blob.core.windows.net/main/slide4_slide_thumbnail_more_btn.svg") no-repeat center center/cover; z-index: 1; }*/
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail { position: relative; width: 100%; height: 100%; filter: brightness(.6); overflow: hidden; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active .thumbnail { border: 3px solid #ffffff; filter: brightness(1); }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail img { max-width: unset; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title { position: absolute; bottom: 30px; left: 0; text-align: left; padding: 0 22px; width: 100%; color: #ffffff; opacity: .5; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active .thumbnail .title { opacity: 1; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title span { font-size: 18px; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title p { font-size: 22px; margin-top: 8px; white-space: pre-line; line-height: 1.3 }
#fullpage .sct4 .inner .thumbnail_slide .swiper-pagination { left: unset; bottom: 17px; right: 232px; width: auto; background: #ffffff; border-radius: 10px; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-pagination-bullet { margin: 0; width: 60px; margin-left: -1px; background: unset; border-radius: 10px; display: none; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-pagination-bullet-active { background: #FF6F1E; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-count { /* display: inline-block; */ position: absolute; bottom: 9px; right: 148px; letter-spacing: 2px; font-size: 24px; color: #ffffff; display: none; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-count span { opacity: 0.8; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-count #now { font-weight: bold; opacity: 1; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress { position: absolute; left: 0; bottom: 20px; display: flex; justify-content: space-between; align-items: center; padding-left: 16px; width: 100%; z-index: 1; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar { display: flex; width: 95%; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item { display: none; width: 100%; height: 3px; border-radius: 3px; text-align: left; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item span { position: relative; display: inline-block; width: 19.2%; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .5); margin-right: 1%; cursor: pointer; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item span:last-child { margin-right: 0; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item span:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, 1); }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item span.full { background: rgba(255, 255, 255, 1); }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item.active { display: flex; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item.active span.now:before { animation: progress_animation 5s linear forwards; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item.active span.now.pause:before { animation-play-state: paused; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .progressbar .item.active span.now.restart:before { animation: unset; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .playing_status { position: relative; right: 1px; cursor: pointer; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .playing_status .btn_stop { display: block; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .playing_status .btn_start { display: none; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .playing_status.pause .btn_stop { display: none; }
#fullpage .sct4 .inner .thumbnail_slide .slide_progress .playing_status.pause .btn_start { display: block; }
#fullpage .sct4 .inner .episode { width: 100%; text-align: left; white-space: pre-line; color: #ffffff; line-height: 1; margin-top: -132px; }
#fullpage .sct4 .inner .episode h2 { padding: 0; font-size: 24px; margin-bottom: 4px; width: auto; opacity: 0; }
#fullpage .sct4 .inner .episode h1 { font-size: 38px; font-weight: bold; display: inline-block; width: auto; margin-bottom: 36px; opacity: 0; }
#fullpage .sct4 .inner .episode p { font-size: 24px; line-height: 1.5; opacity: 0; display: inline-block; margin-bottom: 16px; }
#fullpage .sct4 .inner .episode div { font-size: 22px; display: inline-block; cursor: pointer; color: #ffffff; opacity: 0; }
#fullpage .sct4 .inner .episode div:hover { opacity: .8; }
#fullpage .sct4 .inner .episode div span { display: inline-block; width: 22px; height: 22px; background: url("https://cheongmac.blob.core.windows.net/main/btn_main_slide4_slide_title_more_btn.svg") no-repeat center center/cover; position: relative; top: 4px; left: 10px; }
#fullpage .sct4.active .inner .episode.current h2 { animation: fadeInUp .5s ease-in-out forwards; animation-delay: .25s; }
#fullpage .sct4.active .inner .episode.current h1 { animation: fadeInUp .5s ease-in-out forwards; animation-delay: .5s; }
#fullpage .sct4.active .inner .episode.current p { animation: fadeInUp .5s ease-in-out forwards; animation-delay: .75s; }
#fullpage .sct4.active .inner .episode.current div { animation: fadeInUp .5s ease-in-out forwards; animation-delay: 1s; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-button-next, #fullpage .sct4 .inner .thumbnail_slide .swiper-button-prev { top: 94%; color: #ffffff; outline: unset !important; display: none; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-button-next { right: 0; }
#fullpage .sct4 .inner .thumbnail_slide .swiper-button-prev { left: unset; right: 80px; }

/* **************************************** *
 * 08) SLIDE 5 (어디서)
 * **************************************** */
#fullpage .sct5 { background-color: #f5f5f5; overflow: hidden; }
#fullpage .sct5 .outer { display: flex; flex-direction: column; }
#fullpage .sct5 .outer .subject { position: relative; left: 0; display: flex; margin-bottom: 48px; }
#fullpage .sct5 .outer .subject .title { margin-right: 120px; }
#fullpage .sct5 .outer .subject .hashtag { flex-grow: 1; }
#fullpage .sct5 .outer .subject .hashtag .view_pc li { white-space: nowrap; margin-right: 32px; }
#fullpage .sct5 .outer .subject .hashtag .view_pc li.letter_spacing { letter-spacing: 3px; }
#fullpage .sct5 .outer .subject .hashtag p { word-break: break-all; white-space: pre-line; color: #222222; font-size: 20px; line-height: 1.7; letter-spacing: -0.02em; }
#fullpage .sct5 .outer .view_pc { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 32px; }
#fullpage .sct5 .outer .view_pc.mb_0 { margin-bottom: 0; }
#fullpage .sct5 .outer .view_pc span.subway, #fullpage .sct5 .view_pc span.car { position: relative; top: 6px; display: inline-block; width: 24px; height: 24px; margin-right: 6px; }
#fullpage .sct5 .outer .view_pc span.subway { background: url("https://cheongmac.blob.core.windows.net/main/btn_main_slide5_location_btn_subway.svg") no-repeat center center/cover }
#fullpage .sct5 .outer .view_pc span.car { background: url("https://cheongmac.blob.core.windows.net/main/btn_main_slide5_location_btn_car.svg") no-repeat center center/cover }
#fullpage .sct5 .outer .view_pc div { flex-grow: 1; letter-spacing: 1px; }
#fullpage .sct5 .outer .view_pc div p.type { letter-spacing: 0.5px; }
#fullpage .sct5 .outer .view_pc div strong { margin-right: 24px; }
#fullpage .sct5 .outer .view_pc div strong.letter_spacing { letter-spacing: 1.1px; }
#fullpage .sct5 .outer .view_pc div strong.sat { color: #525DAB; }
#fullpage .sct5 .outer .view_pc div strong.sun { color: #F84F2A; }
#fullpage .sct5 .inner #content_map { position: absolute !important; width: 100%; height: 160%; }
#fullpage .sct5 .inner .mobile_content { display: none; }

/* **************************************** *
 * 09) SLIDE 6 (footer)
 * **************************************** */
#fullpage .sct6 { display: inline-block; height: 300px !important; padding: 64px 100px; border-top: 1px solid #eeeeee; }
#fullpage .sct6 .fp-tableCell { display: inline-block; text-align: center; }
#fullpage .sct6 .footer_outer { display: inline-block; max-width: 1320px; width: 100%; }
#fullpage .sct6 .footer_inner { display: flex; flex-direction: column; flex-wrap: nowrap; }
#fullpage .sct6 .footer_inner ul li { display: inline-block; }
#fullpage .sct6 .footer_inner .item { text-align: left; margin-bottom: 18px; font-size: 18px; }
#fullpage .sct6 .footer_inner .item.nav { display: flex; justify-content: space-between; }
#fullpage .sct6 .footer_inner .item.nav .menu li { position: relative; color: #444444; margin-right: 50px; font-weight: bold; }
#fullpage .sct6 .footer_inner .item.nav .menu li:last-child { margin-right: 0; }
#fullpage .sct6 .footer_inner .item.nav .menu li:after { content: ""; position: absolute; top: 2px; right: -25px; width: 1px; height: 18px; background-color: #D9D9D9; }
#fullpage .sct6 .footer_inner .item.nav .menu li:last-child:after { content: unset; }
#fullpage .sct6 .footer_inner .item.nav .menu li a { color: inherit; }
#fullpage .sct6 .footer_inner .item.nav .sns { display: flex; align-items: center; gap: 20px; }
#fullpage .sct6 .footer_inner .item.nav .sns a { display: inline-block; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; }
#fullpage .sct6 .footer_inner .item.nav .sns a.instagram { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_instagram.svg") no-repeat center center/cover; }
#fullpage .sct6 .footer_inner .item.nav .sns a.naver { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_naver.svg") no-repeat center center/cover; }
#fullpage .sct6 .footer_inner .item.nav .sns a.youtube { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_youtube.svg") no-repeat center center/cover; }
#fullpage .sct6 .footer_inner .item.nav .sns a.talktalk { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_talktalk.svg") no-repeat center center/cover; }
#fullpage .sct6 .footer_inner .item.info { display: flex; color: #868686; }
#fullpage .sct6 .footer_inner .item.info .name { margin-right: 32px; font-weight: bold; }
#fullpage .sct6 .footer_inner .item.info .content div { margin-bottom: 8px; }
#fullpage .sct6 .footer_inner .item.info .content div li { position: relative; margin-right: 24px; }
#fullpage .sct6 .footer_inner .item.info .content div li:after { content: ""; position: absolute; top: 2px; right: -15px; width: 1px; height: 18px; background-color: #D9D9D9; }
#fullpage .sct6 .footer_inner .item.info .content div li:last-child:after { content: unset; }
#fullpage .sct6 .footer_inner .item.info .content div.copyright { margin-top: 16px; font-size: 16px; color: #A3A3A3; }

@media screen and (max-width: 1920px) {
    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .inner .pc_slogan { margin: 60px 0; }
    #fullpage .sct1.active .inner .pc_slogan::before { top: 138%; }
}

@media screen and (max-width: 1800px) {
    /* **************************************** *
     * 02) 풀페이지 네비게이션
     * **************************************** */
    /* NAV (PC) */
    #fp-nav ul li a .fp-sr-only {  padding: 12px 0 12px 80px; margin: 2px 0; font-size: 20px; }
    #fp-nav ul li a.active .fp-sr-only { margin: 12px 0; }
    #fp-nav ul li a.active .fp-sr-only::after { bottom: 0; left: -44px;}
}

@media screen and (max-width: 1640px) {
    /* **************************************** *
     * 02) 풀페이지 네비게이션
     * **************************************** */
    /* NAV (PC) */
    #fp-nav { display: none; }
    #fp-nav ul li a .fp-sr-only {  padding: 10px 0 10px 60px; margin: 0; font-size: 18px; }
    #fp-nav ul li a.active .fp-sr-only { margin: 8px 0; }

    /* **************************************** *
     * 03) 메인페이지 글로벌
     * **************************************** */
    #fullpage .slide .outer { width: 100%; padding: 0 160px; }
    #fullpage .slide .subject { left: 160px; }
    #fullpage .slide .subject .title { font-size: 52px; margin-bottom: 24px; }
    #fullpage .slide .subject .hashtag li { padding: 5px 12px; margin: 0 4px 8px 0; font-size: 18px; }
    #fullpage .slide .subject .row { gap: 4px; }

    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .inner .pc_slogan { margin: 28px 0 60px; font-size: 22px; }
    #fullpage .sct1 .inner .main_title h1 { font-size: 46px; }
    #fullpage .sct1 .inner .main_title h1 strong { font-size: 52px; }
    #fullpage .sct1 .inner .btn_list button { height: 46px; font-size: 22px; }

    /* **************************************** *
     * 05) SLIDE 2 (무엇을)
     * **************************************** */
    #fullpage .sct2 .outer .view_pc { gap: 8px; }
    #fullpage .sct2 .subject .hashtag li { margin: 0; }
    #fullpage .sct2 .inner { width: calc(100% - 320px); }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea h1 { font-size: 18px; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea span { font-size: 14px; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea svg { width: 17px; }

    /* **************************************** *
     * 06) SLIDE 3 (얼마나)
     * **************************************** */
    #fullpage .sct3 .inner .title { top: 55%; left: 51%; font-size: 42px; }
    #fullpage .sct3 .inner.active .countbox { width: 152px; height: 152px; }
    #fullpage .sct3 .inner.active .countbox .icon { width: 32px; height: 32px; margin: 18px 0 16px; }
    #fullpage .sct3 .inner.active .countbox .cnt { font-size: 20px; margin-bottom: 4px; }
    #fullpage .sct3 .inner.active .countbox .cnt .num { font-size: 36px; }
    #fullpage .sct3 .inner.active .countbox .desc { font-size: 17px; }

    /* **************************************** *
     * 07) SLIDE 4 (어떻게)
     * **************************************** */
    #fullpage .sct4 .inner .thumbnail_slide { margin-top: 32px; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title p { font-size: 20px; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title span { font-size: 17px; }
    #fullpage .sct4 .inner .episode h2 { font-size: 20px; }
    #fullpage .sct4 .inner .episode h1 { font-size: 34px; }
    #fullpage .sct4 .inner .episode p { font-size: 21px; }
    #fullpage .sct4 .inner .episode div { font-size: 20px; }
}

@media screen and (max-width: 1320px) {
    /* **************************************** *
     * 03) 메인페이지 글로벌
     * **************************************** */
    #fullpage .slide .outer { width: 100%; padding: 0 100px; }
    #fullpage .slide .subject { left: 100px; transform: scale(0.85); transform-origin: top left; }

    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .main_popup_slide_wrap { padding: 0 24px; }
    #fullpage .sct1 .inner .pc_slogan { font-size: 20px; }
    #fullpage .sct1.active .inner .pc_slogan::before { top: 124%; }
    #fullpage .sct1 .inner .btn_list button { height: 42px; font-size: 20px; padding: 0px 20px; }
    #fullpage .sct1 .inner .main_title h1 { font-size: 40px; margin-bottom: 56px; }
    #fullpage .sct1 .inner .main_title h1 strong { font-size: 44px; }

    /* **************************************** *
     * 05) SLIDE 2 (무엇을)
     * **************************************** */
    #fullpage .sct2 .inner { width: calc(100% - 200px); }

    /* **************************************** *
     * 09) SLIDE 6 (footer)
     * **************************************** */
    #fullpage .sct6 { padding: 64px 60px; }
}

@media screen and (max-width: 1140px) {
    /* **************************************** *
     * 03) 메인페이지 글로벌
     * **************************************** */
    #fullpage .slide .outer { padding: 124px 24px 100px; width: 100%; height: 100%; display: flex; flex-direction: column; }
    #fullpage .view_pc { display: none !important; }
    #fullpage .view_m { display: block !important; }
    #fullpage .slide .subject { position: relative; left: unset; margin-bottom: 20px; transform: unset; }
    #fullpage .slide .subject .title { font-size: 46px; margin-bottom: 0; }
    #fullpage .slide .subject .hashtag { position: absolute; right: 0; top: 38px; text-align: right; }
    #fullpage .slide .subject .hashtag li { font-size: 17px; }

    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .main_popup_slide_wrap { bottom: 60px; height: 80px; }
    #fullpage .sct1 .main_popup_slide_wrap::before { height: 60px; }
    #fullpage .sct1 .main_popup_slide_wrap .popup_close_btn { top: -10px; left: -20px; padding: 0;  width: 48px; height: 30px; font-size: 16px; color: #ffffff; background: rgba(255, 255, 255, .2); border-radius: 2px 2px 0 0; }
    #fullpage .sct1 .main_popup_slide_wrap .popup_close_btn i { top: 0; }
    #fullpage .sct1 .main_popup_slide_wrap .popup_close_btn span { display: none; }
    #fullpage .sct1 .main_popup_slide_wrap .popup_close_btn:hover { background: rgba(0, 0, 0, .3); }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .type { display: none; width: 120px; font-size: 18px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc { padding-left: 28px; font-size: 18px; flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap; gap: 2px;}
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc .column { flex-direction: row; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc .column .subSubject { margin-top: 0; margin-left: 4px; }
    #fullpage .sct1 .swiper-button-prev, #fullpage .sct1 .swiper-button-next { display: none; }
    #fullpage .sct1 .main_popup_slide_container .swiper-pagination-fraction { font-size: 16px; bottom: 17px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list { padding-left: 44px; height: 60px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide-active .popup_list img { height: 80px; }
    #fullpage .sct1 .inner .pc_slogan { display: none; }
    #fullpage .sct1 .inner .m_slogan { position: relative; display: block; padding: 0 5.5%; color: #ffffff; opacity: 0; }
    #fullpage .sct1.active .inner .m_slogan::before { content: ''; position: absolute; top: 110%; left: 0; width: 100%; height: 1px; background: #FFFFFF; opacity: 0; animation: borderBottomFadeIn .5s ease-in-out forwards; animation-delay: 3s; }
    #fullpage .sct1 .inner .m_slogan span { opacity: 0; }
    #fullpage .sct1.active .inner .m_slogan { opacity: 1; }
    #fullpage .sct1.active .inner .m_slogan span { animation: lightSpeedInLeft 1s ease-in-out forwards; }
    #fullpage .sct1.active .inner .m_slogan span:nth-child(1) { animation-delay: 0.7s; }
    #fullpage .sct1.active .inner .m_slogan span:nth-child(2) { animation-delay: 1.4s; }
    #fullpage .sct1.active .inner .m_slogan span:nth-child(3) { animation-delay: 2.0s; }
    #fullpage .sct1 .inner .btn_list { flex-direction: column; align-items: flex-start; }
    #fullpage .sct1 .inner .btn_list button { padding: 0px 16px; height: 36px; font-size: 16px; }
    #fullpage .sct1 .inner .btn_list button i { padding-left: 20px; }
    #fullpage .sct1 .inner .main_title { margin-top: 60px; }
    #fullpage .sct1 .inner .main_title h1 { line-height: 145%; font-size: 6.5vw; margin-bottom: 36px; }
    #fullpage .sct1 .inner .main_title h1 strong { font-size: 7.2vw; }
    #fullpage .sct1 .pc{ display: none; }
    #fullpage .sct1 .sub_popup_wrap { position: absolute; z-index: 1; right: 40px; bottom: 145px; width: 84px; height: auto; }

    /* **************************************** *
     * 05) SLIDE 2 (무엇을)
     * **************************************** */
    #fullpage .sct2 .outer { gap: unset; }
    #fullpage .sct2 .outer .view_pc { gap: 8px; }
    #fullpage .sct2 .inner { position: relative; width: 100%; }
    #fullpage .sct2 .inner .content { flex-direction: row; gap: 20px; }
    #fullpage .sct2 .inner .content .contentGroup { grid-template-columns: unset; grid-template-rows: repeat(2, 1fr); gap: 20px; }
    #fullpage .sct2 .inner .content .contentGroup:nth-of-type(1) { grid-template-rows: repeat(2, 1fr); }
    #fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) { grid-template-rows: repeat(2, 1fr); }
    #fullpage .sct2 .inner .content .contentGroup:nth-of-type(1) .treatment:nth-of-type(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
    #fullpage .sct2 .inner .content .contentGroup:nth-of-type(1) .treatment:nth-of-type(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
    #fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) .treatment:nth-of-type(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
    #fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) .treatment:nth-of-type(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
    /*#fullpage .sct2 .inner .content .contentGroup:nth-of-type(2) .treatment:nth-of-type(3) { grid-column: 1 / 2; grid-row: 3 / 4; }*/
    #fullpage .sct2 .inner .content .contentGroup .treatment { border-radius: 10px; }
    #fullpage .sct2 .inner .content .contentGroup .treatment::before { height: 46%; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea { padding: 1.4vh; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea h1 { font-size: 15px; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea span { display: none; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea .moreButton { padding: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea svg { width: 10px; aspect-ratio: 1 / 0.75; }
    #fullpage .sct2 .inner .content .contentGroup .treatment .txtArea svg path { stroke: #333333; }

    /* **************************************** *
     * 06) SLIDE 3 (얼마나)
     * **************************************** */
    #fullpage .sct3 .inner { width: 94%; height: 85%; left: 50%; transform: translateX(-51%); }
    #fullpage .sct3 .inner .title { top: 53%; left: 50%; font-size: 36px; }
    #fullpage .sct3 .inner.active .countbox { width: 140px; height: 140px; }
    #fullpage .sct3 .inner.active .countbox.mint { left: 48%; }
    #fullpage .sct3 .inner.active .countbox.skyblue { bottom: 4%; }
    #fullpage .sct3 .inner.active .countbox.red { bottom: 16%; }
    #fullpage .sct3 .inner.active .countbox .icon { width: 28px; height: 28px; }
    #fullpage .sct3 .inner.active .countbox .cnt { font-size: 17px; margin-bottom: 0; }
    #fullpage .sct3 .inner.active .countbox .cnt .num { font-size: 32px; }
    #fullpage .sct3 .inner.active .countbox .desc { font-size: 15px; margin-top: 2px;}

    /* **************************************** *
     * 06) SLIDE 4 (어떻게)
     * **************************************** */
    #fullpage .sct4 .thumbnail_bg { filter: blur(0); }
    #fullpage .sct4 .inner .content { align-items: center; }
    #fullpage .sct4 .inner .thumbnail_slide { margin-top: 0; padding: 0; width: 100%; height: 100%; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide { height: 92%; padding: 0 44px; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active { }
    /*#fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active:before { content: unset; }*/
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide-active .thumbnail { border: none; }
    /*#fullpage .sct4 .inner .thumbnail_slide .swiper-count { display: none; }*/
    #fullpage .sct4 .inner .episode { display: none; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-button-next, #fullpage .sct4 .inner .thumbnail_slide .swiper-button-prev { top: 50%; display: block; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-button-prev { left: 0; right: unset; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-button-next { left: unset; right: 0; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-pagination { bottom: 0; left: 0; background: unset; width: 100%; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-pagination-bullet { width: 8px; margin: 0 10px; background: rgba(255, 255, 255, .8); display: inline-block; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-pagination-bullet-active { width: 60px; background: rgba(255, 255, 255, 1); }
    #fullpage .sct4 .inner .thumbnail_slide .slide_progress { display: none; }

    /* **************************************** *
     * 08) SLIDE 5 (어디서)
     * **************************************** */
    #fullpage .sct5 .outer .subject { margin-bottom: 20px; }
    #fullpage .sct5 .outer .subject .title { margin-right: 0; }
    #fullpage .sct5 .inner #content_map { position: relative !important; width: 100%; height: 66%; margin-bottom: 2%; }
    #fullpage .sct5 .inner .mobile_content { width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; align-items: center; white-space: pre-line; text-align: left; line-height: 1.3; }
    #fullpage .sct5 .inner .mobile_content h1 { font-size: 17px; color: #111111; font-weight: bold; }
    #fullpage .sct5 .inner .mobile_content h2 { padding: 0; font-size: 15px; color: #222222; }
    #fullpage .sct5 .inner .mobile_content span { font-size: 14px; color: #444444; }
    #fullpage .sct5 .inner .mobile_content .m_info { line-height: 1; }
    #fullpage .sct5 .inner .mobile_content .m_info p { padding: 8px 16px; border: 1px solid #e2e2e2; border-radius: 30px; background-color: #ffffff; color: #222222; font-size: 14px; }
    #fullpage .sct5 .inner .mobile_content .m_info p span { display: inline-block; width: 12px; height: 12px; top: 2px; margin-right: 4px; position: relative; }
    #fullpage .sct5 .inner .mobile_content .m_info p.naver span { background: url("https://cheongmac.blob.core.windows.net/main/btn_main_slide5_m_btn_naver.svg") no-repeat center center/cover; }
    #fullpage .sct5 .inner .mobile_content .m_info p.location span { background: url("https://cheongmac.blob.core.windows.net/main/btn_main_slide5_m_btn_location.svg") no-repeat center center/cover; }
    #fullpage .sct5 .inner .mobile_content .m_info p.time span { background: url("https://cheongmac.blob.core.windows.net/main/btn_main_slide5_m_btn_time.svg") no-repeat center center/cover; }

    /* **************************************** *
     * 09) SLIDE 6 (footer)
     * **************************************** */
    #fullpage .sct6 { display: none; }
}

@media screen and (max-width: 960px) {
    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .type { display: none; }
    #fullpage .sct1 .video_content { width: 100%; }
    #fullpage .sct1 .video_content.show { top: 30%; width: 90%; left: 50%; transform: translateX(-50%); }
}

@media screen and (max-width: 768px) {
    /* **************************************** *
     * 03) 메인페이지 글로벌
     * **************************************** */
    #fullpage .slide .subject .title { font-size: 28px; }
    #fullpage .slide .subject .hashtag { top: 17px; }
    #fullpage .slide .subject .hashtag li { padding: 0 8px; margin: 0 0 8px 0; font-size: 11px; }

    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .main_popup_slide_wrap { padding: 0 12px 0 20px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-pagination-fraction { font-size: 16px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc { padding-left: 8px; font-size: 16px; line-height: 1.6; }
    #fullpage .sct1 .inner .m_slogan { padding: 0 4.5%; }
    #fullpage .sct1 .inner .main_title { margin-top: 32px; }

    /* **************************************** *
     * 06) SLIDE 3 (얼마나)
     * **************************************** */
    #fullpage .sct3 .inner { margin-top: 24px; width: 84%; height: 64%; }
    #fullpage .sct3 .inner .title { font-size: 24px; margin-top: -7px; }
    #fullpage .sct3 .inner.active .countbox { width: 84px; height: 84px; }
    #fullpage .sct3 .inner.active .countbox.mint { top: 2%; left: 50%; }
    #fullpage .sct3 .inner.active .countbox.skyblue { bottom: 3%; left: -1%; }
    #fullpage .sct3 .inner.active .countbox.red { bottom: 18%; right: 0; }
    #fullpage .sct3 .inner.active .countbox .icon { width: 18px; height: 18px; margin: 12px 0 2px; }
    #fullpage .sct3 .inner.active .countbox .cnt { font-size: 10px; margin-bottom: -7px; }
    #fullpage .sct3 .inner.active .countbox .cnt .num { font-size: 15px; margin-right: 3px; }
    #fullpage .sct3 .inner.active .countbox .desc { font-size: 10px; }
}

@media screen and (max-width: 540px) {
    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .main_popup_slide_container .swiper-pagination-fraction { font-size: 12px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list { padding-left: 36px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc { font-size: 12px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide-active .popup_list img { height: 72px; }
    #fullpage .sct1 .inner .m_slogan { padding: 0 1%; }
    #fullpage .sct1 .inner .btn_list button i { padding-left: 10px; transform: scale(1.15); }
    #fullpage .sct1 .inner .main_title h1 { margin-bottom: 24px; }

    /* **************************************** *
     * 05) SLIDE 2 (무엇을)
     * **************************************** */
    #fullpage .sct2 .inner .content .item img { position: absolute; bottom: 0; right: 0; width: 52%; height: 52%; }
    #fullpage .sct2 .inner .content .item .shadow { display: block; position: absolute; bottom: 0; right: 0; width: 52%; height: 52%; box-shadow: inset 32px 32px 32px 0 #fff; }
    #fullpage .sct2 .inner .content .item .contentContainer { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; height: 100%; }
    #fullpage .sct2 .inner .content .item .badgeTitle { display: flex; justify-content: center; align-items: center; width: 88px; height: 24px; border-radius: 50px; color: #fff; font-size: 12px; font-weight: 700; }
    #fullpage .sct2 .inner .content .item .badgeTitle._1 { background: linear-gradient(to right, #FA7D4C 0%, #FCD593 100%); }
    #fullpage .sct2 .inner .content .item .badgeTitle._2 { background: linear-gradient(to right, #5EBFC8 0%, #73DDA7 100%); }
    #fullpage .sct2 .inner .content .item .title { font-size: 24px; font-weight: 900; padding: 16px 0; }
    #fullpage .sct2 .inner .content .item .desc { font-size: 16px; line-height: 1.4; }
    #fullpage .sct2 .inner .content .item .showMore { position: relative; font-size: 16px; color: #333333; }
    #fullpage .sct2 .inner .content .item .showMore:after { content: ""; position: absolute; top: 4px; left: 82px; width: 22px; height: 12px; background:url("../../images/main/ic_arrow_right.svg") no-repeat center center/cover; }

    /* **************************************** *
     * 06) SLIDE 3 (얼마나)
     * **************************************** */
    #fullpage .sct3 .inner .title { font-size: 19px; }
    #fullpage .sct3 .inner.active .countbox.mint { top: -3%; left: 40%; }
    #fullpage .sct3 .inner.active .countbox.skyblue { bottom: -1%; left: -7%; }
    #fullpage .sct3 .inner.active .countbox.red { bottom: 9%; right: -11%; }

    /* **************************************** *
     * 06) SLIDE 4 (어떻게)
     * **************************************** */
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail { border-radius: 24px; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title span { font-size: 16px; }
    #fullpage .sct4 .inner .thumbnail_slide .swiper-slide .thumbnail .title p { font-size: 20px; }
}

@media screen and (max-width: 400px) {
    /* **************************************** *
     * 03) 메인페이지 글로벌
     * **************************************** */
    #fullpage .slide .subject .hashtag li { padding: 0 4px; margin: 0 0 6px 0; font-size: 10px; }

    /* **************************************** *
     * 04) SLIDE 1 (청맥은)
     * **************************************** */
    #fullpage .sct1 .main_popup_slide_container .swiper-pagination-fraction { font-size: 10px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list { padding-left: 28px; }
    #fullpage .sct1 .main_popup_slide_container .swiper-slide .popup_list .desc { font-size: 10px; }
    #fullpage .sct1 .inner .m_slogan { padding: 0; }

    /* **************************************** *
     * 08) SLIDE 5 (어디서)
     * **************************************** */
    #fullpage .sct5 .inner .mobile_content h1 { font-size: 14px; }
    #fullpage .sct5 .inner .mobile_content h2 { font-size: 12px; }
    #fullpage .sct5 .inner .mobile_content span { font-size: 11px; }
    #fullpage .sct5 .inner .mobile_content .m_info p { padding: 6px 14px; font-size: 12px; }
}

@media screen and (max-width: 340px) {
    /* **************************************** *
     * 02) 풀페이지 네비게이션
     * **************************************** */
    /* NAV (MOBILE) */
    .fp-slidesNav ul li a.active:before { content: unset; }

    /* **************************************** *
     * 03) 메인페이지 글로벌
     * **************************************** */
    #fullpage .slide .subject .hashtag { top: 8px; }
    #fullpage .slide .subject .hashtag li { display: none; }

    /* **************************************** *
     * 06) SLIDE 3 (얼마나)
     * **************************************** */
    #fullpage .sct3 .inner { height: 58%; }
    #fullpage .sct3 .inner .title { font-size: 15px; margin-top: -4px; }
    #fullpage .sct3 .inner.active .countbox.mint { top: -13%; left: 37%; }
    #fullpage .sct3 .inner.active .countbox.skyblue { bottom: -6%; left: -12%; }
    #fullpage .sct3 .inner.active .countbox.red { bottom: 2%; right: -11%; }
    #fullpage .sct3 .inner.active .countbox .icon { width: 18px; height: 18px; margin: 12px 0 2px; }
    #fullpage .sct3 .inner.active .countbox .cnt { font-size: 10px; margin-bottom: -7px; }
    #fullpage .sct3 .inner.active .countbox .cnt .num { font-size: 15px; margin-right: 3px; }
    #fullpage .sct3 .inner.active .countbox .desc { font-size: 10px; }

    /* **************************************** *
     * 08) SLIDE 5 (어디서)
     * **************************************** */
    #fullpage .sct5 .inner #content_map { margin-bottom: 0; }
    #fullpage .sct5 .inner .mobile_content { line-height: 1.2; }
    #fullpage .sct5 .inner .mobile_content h1 { font-size: 13px; }
    #fullpage .sct5 .inner .mobile_content h2 { font-size: 11px; }
    #fullpage .sct5 .inner .mobile_content span { font-size: 10px; }
    #fullpage .sct5 .inner .mobile_content .m_info { line-height: 0.8; }
    #fullpage .sct5 .inner .mobile_content .m_info p { position: relative; padding: 8px 14px 8px 28px; font-size: 11px; }
    #fullpage .sct5 .inner .mobile_content .m_info p span { position: absolute; top: 6px; left: 13px; margin-right: unset; }
}

@media screen and (max-width: 300px) {
    /* **************************************** *
     * 06) SLIDE 3 (얼마나)
     * **************************************** */
    #fullpage .slide .subject .hashtag { display: none; }
}