@charset "utf-8";

/* ============================================
    공통
============================================ */

.sub-contents{
    & .sec{
        position: relative; overflow: hidden; padding: 120px 0;

        @media (width <= 1280px){
            padding: 80px 0;
        }
        @media (width <= 640px){
            padding: 50px 0;
        }

        & .sec-tit{
            text-align: center; margin: 0 0 80px;
            & h3{
                font-size: clamp(70px,6vw,100px); font-weight: var(--fwb); font-family: var(--font-eng); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
                &.special{
                    font-size: 120px; display: flex; flex-direction: column; line-height: 1.17;
                    & span{
                        display: block;
                        &:nth-child(odd){text-align: left;}
                        &:nth-child(even){text-align: right;}

                        & .hnm-mask{
                            display: inline-block; vertical-align: middle; margin: -0.3em 0 0 0; width: 225px; height: auto; aspect-ratio: 225 / 114; background: transparent; background-repeat: no-repeat; background-position: center; background-size: 100% auto;
                            &.bean{background-image: url("/assets/site/img/contents/hnm-mask-bean.png");}
                            &.cream{background-image: url("/assets/site/img/contents/hnm-mask-cream.png");}
                        }
                    }
                    & .subscript{display: block; margin: 10px 0 0; font-size: 20px; font-weight: var(--fwr); font-family: 'Noto Sans KR'; letter-spacing: 0; color: rgba(255,255,255,0.6); text-align: right; line-height: 1.4;}
                }
                &.size-sm{
                    font-size: 76px;
                }
            }

            &.alignLeft{text-align: left;}
            &:has(h3.size-sm){
                margin: 0 0 50px;
            }

            @media (width <= 1500px){
                margin: 0 0 4.5%;
                & h3{
                    font-size: clamp(50px,6.3vw,90px);
                    &.special{
                        font-size: 100px;
                        & span{
                            & .hnm-mask{width: 180px;}
                        }
                    }
                    &.size-sm{
                        font-size: 5vw;
                    }
                }
                &:has(h3.size-sm){
                    margin: 0 0 4.5%;
                }
            }
            @media (width <= 1280px){
                margin: 0 0 40px;
                & h3{
                    font-size: 64px;
                    &.special{
                        font-size: 85px;
                        & span{
                            & .hnm-mask{width: 140px;}
                        }
                        & .subscript{font-size: 18px;}
                    }
                    &.size-sm{
                        font-size: 60px;
                    }
                }
                &:has(h3.size-sm){
                    margin: 0 0 40px;
                }
            }
            @media (width <= 1024px){
                & h3{
                    &.special{
                        font-size: 70px;
                        & span{
                            & .hnm-mask{width: 120px;}
                        }
                    }
                }
            }
            @media (width <= 860px){
                margin: 0 0 4%;
                & h3{
                    font-size: 40px;
                    &.special{
                        font-size: clamp(50px,7vw,58px);
                        & span{
                            & .hnm-mask{width: 12vw;}

                            &:nth-child(odd){text-align: center;}
                            &:nth-child(even){text-align: center;}
                        }
                        & .subscript{text-align: center;}
                    }
                    &.size-sm{
                        font-size: 40px;
                    }
                }
                &:has(h3.size-sm){
                    margin: 0 0 4%;
                }
            }
            @media (width <= 640px){
                margin: 0 0 30px;
                & h3{
                    font-size: 28px;
                    &.special{
                        font-size: 34px; width: calc(100% + 40px); margin: 0 0 0 -20px;
                        & span{
                            & .hnm-mask{width: 55px;}
                        }

                        & .subscript{font-size: 15px;}
                    }
                    &.size-sm{
                        font-size: 28px;
                    }
                }
                &:has(h3.size-sm){
                    margin: 0 0 30px;
                }
            }
        }
        & .sec-cont{
            
        }
    }

    & .subsec{
        & .subsec-tit{
            text-align: center; letter-spacing: -0.02em;
            & h4{font-size: 40px; font-weight: var(--fweb); line-height: 1.4; color: var(--theme-green); text-wrap: balance;}
            & .des{
                font-size: 20px; padding: 31px 0 0;

                &.size-sm{font-size: 18px; line-height: 1.77;}
            }
            & .view-more{margin-top: 70px;}

            &.alignLeft{text-align: left;}
            

            @media (width <= 1500px){
                & h4{font-size: 36px;}
            }
            @media (width <= 1280px){
                & h4{font-size: 30px;}
                & .des{
                    font-size: 18px; padding: 1.5% 0 0;
                    &.size-sm{font-size: 18px; padding: 1.5% 0 0;}
                }
            }
            @media (width <= 860px){
                & h4{font-size: 24px;}
                & .des{
                    font-size: 16px;
                    & br{}
                    &.size-sm{font-size: 16px;}
                }
            }
            @media (width <= 640px){
                & h4{font-size: 20px;}
                & .des{
                    font-size: 14px; padding: 5px 0 0; text-wrap: balance;
                    &.size-sm{font-size: 14px; padding: 5px 0 0; text-wrap: balance;}
                }
            }
        }
        & .subsec-cont{
            padding: 80px 0 0;
            
            @media (width <= 1280px){
                padding: 50px 0 0;
            }
            @media (width <= 860px){
                padding: 40px 0 0;
            }
            @media (width <= 640px){
                padding: 20px 0 0;
            }
        }
    }
    & .subsec + .subsec{
        padding: 200px 0 0;

        @media (width <= 1280px){
            padding: 140px 0 0;
        }
        @media (width <= 640px){
            padding: 80px 0 0;
        }
    }
    
    & .full-width{
        width: calc( 100 );
    }
    

    @media (width <= 1280px){
        --subpage-sec-gap: 60px;
        --sec-tit-heading-bottom: 20px;
        --sec-cont-pad-top: 40px;
        --sec-cont-pad-bot: 60px;
        
    }
    @media (width <= 640px){
        --subpage-sec-gap: 40px;
        --sec-tit-heading-bottom: 20px;
        --sec-cont-pad-top: 30px;
        --sec-cont-pad-bot: 64px;
    }
}


/* ============================================
    intro
============================================ */
#sub-intro{
    & .sec{
        padding: 150px 0 0;

        &.intro-we{
            background: url("/assets/site/img/contents/intro-we-bg.png") no-repeat right bottom; background-size: 100% auto;
            height: 100svh;

            @media (width <= 1024px){
                height: auto !important; padding-bottom: 25vh;
            }
            @media (width <= 640px){
                padding-bottom: 80px;
            }
        }
        &.intro-everyday{
            background: url("/assets/site/img/contents/intro-everyday-bg.png") no-repeat right bottom;  background-size: auto 100%;
            height: 100svh;

            @media (width <= 1500px){
                background-size: 60% auto;
            }
            @media (width <= 1280px){
                background-size: 80% auto;
            }
            @media (width <= 1024px){
                height: auto !important; padding-bottom: 25vh; background-position: right -10vw bottom;
            }
            @media (width <= 640px){
                padding-bottom: 80px; background-position: right -15vw bottom; background-size: 100% auto;
                & .sec-cont{
                    & .subsec{
                        & .subsec-tit{
                            & .view-more{width: 100%;}
                        }
                    }
                }
            }
        }
        &.intro-space{
            
        }
        &.intro-monsterday{
            & .sec-cont{
                & .subsec{
                    & > .wrap{
                        display: flex; flex-wrap: wrap;
                        & .subsec-cont{
                            margin: -200px 0 0 auto;
                        }
                    }
                }
            }

            @media (width <= 1600px){
                & .sec-cont{
                    & .subsec{
                        & > .wrap{
                            & .subsec-cont{
                                margin: -80px 0 0 auto;
                            }
                        }
                    }
                }
            }
            @media (width <= 1280px){
                & .sec-cont{
                    & .subsec{
                        & > .wrap{
                            & .subsec-cont{
                                margin: -50px 0 0 auto;
                            }
                        }
                    }
                }
            }
            @media (width <= 860px){
                & .sec-cont{
                    & .subsec{
                        & > .wrap{
                            flex-direction: column;
                            & .subsec-cont{
                                margin: 0;
                            }
                            & .subsec-tit{
                                /* padding: 4% 0 0; */
                                & .view-more{margin-top: 30px; width: 100%;}
                            }
                        }
                    }
                }
            }
            @media (width <= 640px){
                & .sec-cont{
                    & .subsec{
                        & > .wrap{
                            & .subsec-tit{
                                /* padding: 30px 0 0; */
                            }
                        }
                    }
                }
            }
        }
    }

    @media (width <= 1280px){
        & .sec{padding: 12vw 0 0;}
    }
    @media (width <= 860px){
        & .sec{padding: 13vw 0 0;}
    }
    @media (width <= 640px){
        & .sec{padding: 80px 0 0;}
    }
}


/* ============================================
    history
============================================ */
#sub-history{
    
}


/* ============================================
    beans
============================================ */
#sub-beans{
    & .sec{
        &.beans-brazil{
            background: url("/assets/site/img/contents/beans-bg.png") no-repeat center bottom; background-size: 100% auto;
            padding-bottom: 230px;
        }
    }

    @media (width <= 1280px){
        & .sec{
            &.beans-brazil{
                padding-bottom: 120px;
            }
        }
    }
    @media (width <= 640px){
        & .sec{
            &.beans-brazil{
                padding-bottom: 50px; background-size: 200% auto;
            }
        }
    }
}


/* ============================================
    sub-f-inquiry
============================================ */
#sub-f-inquiry{
    --fm-sec-pad: 180px;
    & .franchise-main{
        padding: 0 0 0; color: #fff;
        & .fm-sec{
            padding: var(--fm-sec-pad) 0;
            /* 배경색별 섹션 */
            &.lightgray{background-color: #f5f5f5; color: #000;}
            &.darkgray{background-color: #333132;}
            &.white{background-color: #fff; color: #000;}

            & .fm-tit{
                text-align: center; 
                & .sup{
                    padding: 0 0 10px;
                    &:has(.sup-logo){padding: 0 0 36px;}

                    & .sup-logo{}
                }
                & .title{
                    font-size: 60px; font-weight: var(--fwb); letter-spacing: -0.02em; line-height: 1.3;
                    &.alignLeft{text-align: left;}
                    &.hasShadow{text-shadow: 0 0 3px rgba(255,255,255,0.3);}

                    & .big{font-size: 80px;}
                }
                & .sub{
                    font-size: 20px; letter-spacing: -0.03em; padding: 40px 0 0;
                    &.hasShadow{text-shadow: 0 0 3px rgba(255,255,255,0.3);}
                }

                @media (width <= 1500px){
                    & .title{
                        font-size: clamp(40px,4.2vw,60px);
                        & .big{font-size: 5.2vw;}
                    }
                }
                @media (width <= 1280px){
                    & .title{
                        font-size: clamp(36px,4.5vw,48px);
                        & .big{font-size: 5.2vw;}
                    }
                    & .sub{font-size: 18px; padding: 3vw 0 0;}
                }
                @media (width <= 1024px){
                    & .sub{font-size: 16px;}
                }
                @media (width <= 640px){
                    & .title{
                        font-size: 27px;
                        & .big{font-size: 26px; letter-spacing: -0.03em;}
                    }
                    & .sub{font-size: 14px; padding: 16px 0 0;}
                    & .sup{
                        &:has(.sup-logo){padding: 0 0 20px;}
                        & .sup-logo{height: 18px;}
                    }
                }
            }
            & .fm-cont{
                padding: 75px 0 0;

                &:has(.fm-sub-sec){
                    padding: 0;
                }

                & .fm-sub-sec{
                    padding: var(--fm-sec-pad) 0 0;
                    & .fm-sub-tit{
                        text-align: center; letter-spacing: -0.02em; color: #333132;
                        & .super{
                            font-size: 20px; font-weight: var(--fwm); line-height: 1; color: var(--theme-green); padding: 0 0 9px;
                            &.ff-eng{font-weight: var(--fwb);}
                        }
                        & .title{font-size: 40px; font-weight: var(--fweb); line-height: 1.4;}
                        & .desc{font-size: 20px; font-weight: var(--fwr); line-height: 1.6; padding: 32px 0 0;}
                    }
                    & .fm-sub-con{
                        padding: 60px 0 0;
                    }
                }
                /* & .fm-sub-sec + .fm-sub-sec{padding: 180px 0 0;} */

                @media (width <= 1280px){
                    

                    & .fm-sub-sec{
                        & .fm-sub-tit{
                            & .super{font-size: 18px;}
                            & .title{font-size: 34px;}
                            & .desc{font-size: 18px;}
                        }
                    }
                }
                @media (width <= 860px){
                    

                    & .fm-sub-sec{
                        & .fm-sub-tit{
                            & .super{font-size: 15px;}
                            & .title{font-size: 30px;}
                            & .desc{font-size: 15px;}
                        }
                    }
                }
                @media (width <= 640px){
                    padding: 40px 0 0;

                    & .fm-sub-sec{
                        & .fm-sub-tit{
                            & .super{font-size: 14px; padding: 0 0 5px;}
                            & .title{font-size: 24px; text-wrap: balance;}
                            & .desc{font-size: 14px; padding: 14px 0 0; text-wrap: balance;}
                        }
                    }
                }
            }

            /* 섹션별 처리 */
            &.pagetop{
                position: relative; aspect-ratio: 1920 / 2043; padding: 300px 0 0;
                & .fm-cont{
                    position: absolute; inset: 0; padding: 0;
                    & .fm-vis{
                        width: 100%; height: 100%;
                        & img{width: calc(100% + 1px); height: calc(100% + 1px); object-fit: cover;}
                    }
                }
                & .fm-tit{
                    position: relative; z-index: 1; color: #000;
                }
                @media (width <= 1600px){
                    padding: 250px 0 0;
                }
                @media (width <= 640px){
                    padding: 140px 0 0;
                }
            }
            &.stats{
                background: #1e1d23;
                & .fm-cont{}
            }
            &.copytext{
                background: linear-gradient(180deg, #1E1D23 0%, #333132 100%);
                @media (width <= 640px){
                    padding-bottom: 0;
                }
            }
            &.operate{

            }
            &.growth{

            }
            &.continue{
                & .fm-tit{
                    & .title{
                        & .ref{display: inline; font-size: 20px; font-weight: var(--fwr); color: rgba(255,255,255,0.5); letter-spacing: -0.02em; padding: 0;}
                    }
                }
                @media (width <= 1280px){
                    & .fm-tit{
                        & .title{
                            & .ref{font-size: 16px;}
                        }
                    }
                }
                @media (width <= 860px){
                    & .fm-tit{
                        & .title{
                            & .ref{display: block; padding: 10px 0 0;}
                        }
                    }
                }
                @media (width <= 640px){
                    & .fm-tit{
                        & .title{
                            & .ref{font-size: 12px;}
                        }
                    }
                }
            }
            &.why{
                
            }
            &.reselection{
                
            }
            &.cost{

            }
            &.setting{
                & .fm-cont{
                    & .terior-wrap{
                        margin-top: calc(var(--fm-sec-pad) * 0.5);
                    }
                }
            }
            &.process{
                
            }
            &.curriculum{
                
            }
            &.faq{
                
            }
            &.f-contact{
                --form-max-width: 362px;

                & > .wrap:nth-child(1){background-color: #f5f5f5; border-radius: 10px; padding-top: calc(var(--fm-sec-pad) * 0.5); padding-bottom: calc(var(--fm-sec-pad) * 0.5);}

                & .fm-cont{
                    & .form-wrap{
                        max-width: 925px; margin: 0 auto;
                        & .form-top{
                            gap: 10px; align-items: center;
                            & .title{flex: 0 0 auto; font-size: 22px; font-weight: var(--fwb); color: #292e41;}
                            & .form-must{margin: 0; padding: 0.2em 0 0;}
                        }
                    }
                    & .form-list{
                        & .form-row{
                            & .form-input{
                                & input{width: var(--form-max-width);}
                            }
                            & .form-select{
                                & select{width: var(--form-max-width);}
                            }
                            & .form-btn-radio-group{
                                width: var(--form-max-width); max-width: 100%;
                            }
                        }

                        & .form-agree{
                            padding: 30px 0;
                        }
                    }

                    & .form-list + .btn-wrap{
                        padding: 40px 0 0;
                    }
                }
            }
        }
    }

    @media (width <= 640px){
        --fm-sec-pad: 60px;
    }
}



/* ============================================
    sub-inquiry
============================================ */
#sub-inquiry{
    & .inquiry{
        display: flex; flex-wrap: wrap; gap: 70px;

        @media (width <= 1500px){
            gap: 50px;
        }
        @media (width <= 1280px){
            gap: 30px;
        }
        @media (width <= 1024px){
            flex-direction: column; flex-wrap: initial; gap: 6vw;
        }
        @media (width <= 860px){
            
        }
        @media (width <= 640px){
            gap: 50px;
        }
    }
}


/* ============================================
    sub-store
============================================ */
#sub-store{

}
.sub-container:has(#sub-store) ~ #floater{
    @media (width <= 860px){
        display: none !important;
    }
}