/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:#333;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
    display:block;
}

button{
    font-family:inherit;
}

a{
    text-decoration:none;
    color:inherit;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.coffee-about{

    position:relative;

    width:100%;

    padding:
        90px 0
        95px;

    background:#fff;

    overflow:hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.coffee-about-inner{

    position:relative;

    width:calc(100% - 80px);

    max-width:1160px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        43%
        57%;

    align-items:center;

    gap:40px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.coffee-about-content{

    position:relative;

    padding:
        5px 0 0 0;

    z-index:2;

}


/* =========================================================
   LABEL
========================================================= */

.coffee-about-label{

    display:block;

    margin-bottom:18px;

    color:#9b7258;

    font-size:11px;

    line-height:1;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =========================================================
   TITLE
========================================================= */

.coffee-about-title{

    margin:0;

    color:#252525;

    font-size:32px;

    line-height:1.48;

    letter-spacing:-1.4px;

    font-weight:700;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.coffee-about-description{

    width:370px;

    max-width:100%;

    margin-top:23px;

    color:#777;

    font-size:17px;

    line-height:1.85;

    letter-spacing:-.25px;

}


/* =========================================================
   FEATURE LIST
========================================================= */

.coffee-feature-list{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    width:710px;

    max-width:100%;

    margin-top:34px;

}


/* =========================================================
   FEATURE ITEM
========================================================= */

.coffee-feature{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    min-width:0;

    cursor:pointer;

    transition:
        transform .35s ease;

}


.coffee-feature:hover{

    transform:
        translateY(-5px);

}


/* =========================================================
   ICON BOX
========================================================= */

.coffee-feature-icon{

    position:relative;

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:9px;

    color:#6f6259;

    transition:
        color .3s ease,
        transform .3s ease;

}


.coffee-feature:hover
.coffee-feature-icon{

    color:#8c6349;

    transform:
        translateY(-2px);

}


/* =========================================================
   SVG ICON
========================================================= */

.coffee-feature-icon svg{

    width:35px;

    height:35px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.45;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* =========================================================
   FEATURE TITLE
========================================================= */

.coffee-feature-title{

    width:100%;

    color:#555;

    font-size:11px;

    line-height:1.3;

    text-align:center;

    white-space:nowrap;

    letter-spacing:-.35px;

}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.coffee-about-media{

    position:relative;

    width:88%;

    height:372px;

    overflow:hidden;

    background:#eee;

}


/* =========================================================
   IMAGE
========================================================= */

.coffee-about-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.015);

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1);

}


.coffee-about-media:hover
.coffee-about-image{

    transform:scale(1.05);

}


/* =========================================================
   IMAGE DARK OVERLAY
========================================================= */

.coffee-about-media::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 20%,
            rgba(0,0,0,.30) 100%
        );

    pointer-events:none;

}


/* =========================================================
   VIDEO BUTTON
========================================================= */

.coffee-video-button{

    position:absolute;

    left:18px;

    bottom:48px;

    z-index:5;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    border-radius:50%;

    background:#fff;

    color:#6e5544;

    cursor:pointer;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.15);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.coffee-video-button:hover{

    transform:
        scale(1.1);

    background:#8a6045;

    color:#fff;

}


/* =========================================================
   PLAY TRIANGLE
========================================================= */

.coffee-play-icon{

    width:0;

    height:0;

    margin-left:3px;

    border-top:
        7px solid transparent;

    border-bottom:
        7px solid transparent;

    border-left:
        10px solid currentColor;

}


/* =========================================================
   MEDIA LABEL
========================================================= */

.coffee-media-label{

    position:absolute;

    left:18px;

    bottom:16px;

    z-index:5;

    color:#fff;

    font-size:14px;

    line-height:1.4;

    font-weight:500;

    letter-spacing:.1px;

    text-transform:uppercase;

}


/* =========================================================
   MEDIA LABEL SMALL
========================================================= */

.coffee-media-label span{

    display:block;

    margin-top:1px;

    color:rgba(255,255,255,.72);

    font-size:6.5px;

    letter-spacing:.6px;

}


/* =========================================================
   DECORATIVE TOP LINE
========================================================= */

.coffee-about-media::before{

    content:"";

    position:absolute;

    top:-8px;

    left:0;

    width:55%;

    height:1px;

    z-index:10;

    background:#f0efed;

}


/* =========================================================
   VIDEO MODAL
========================================================= */

.coffee-video-modal{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:
        rgba(20,15,12,.88);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


.coffee-video-modal.active{

    opacity:1;

    visibility:visible;

}


/* =========================================================
   MODAL CONTENT
========================================================= */

.coffee-video-modal-content{

    position:relative;

    width:900px;

    max-width:100%;

    aspect-ratio:16 / 9;

    background:#000;

    transform:
        scale(.94);

    transition:
        transform .4s ease;

}


.coffee-video-modal.active
.coffee-video-modal-content{

    transform:
        scale(1);

}


/* =========================================================
   VIDEO
========================================================= */

.coffee-video-modal iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}


/* =========================================================
   CLOSE
========================================================= */

.coffee-video-close{

    position:absolute;

    right:-45px;

    top:-45px;

    width:38px;

    height:38px;

    border:0;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:24px;

    line-height:1;

    cursor:pointer;

    transition:
        background .3s ease,
        transform .3s ease;

}


.coffee-video-close:hover{

    background:#fff;

    color:#333;

    transform:
        rotate(90deg);

}


/* =========================================================
   FADE ANIMATION
========================================================= */

.coffee-about-content,
.coffee-about-media{

    opacity:0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(.2,.7,.2,1);

}


.coffee-about.visible
.coffee-about-content{

    opacity:1;

    transform:
        translateY(0);

}


.coffee-about.visible
.coffee-about-media{

    opacity:1;

    transform:
        translateY(0);

    transition-delay:.15s;

}


/* =========================================================
   FEATURE DELAY
========================================================= */

.coffee-feature{

    opacity:0;

    transform:
        translateY(15px);

}


.coffee-about.visible
.coffee-feature{

    opacity:1;

    transform:
        translateY(0);

    transition:
        opacity .5s ease,
        transform .5s ease;

}


.coffee-about.visible
.coffee-feature:nth-child(1){

    transition-delay:.25s;

}


.coffee-about.visible
.coffee-feature:nth-child(2){

    transition-delay:.35s;

}


.coffee-about.visible
.coffee-feature:nth-child(3){

    transition-delay:.45s;

}


.coffee-about.visible
.coffee-feature:nth-child(4){

    transition-delay:.55s;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .coffee-about{

        padding:
            75px 0
            80px;

    }


    .coffee-about-inner{

        width:calc(100% - 60px);

        grid-template-columns:
            1fr 1fr;

        gap:30px;

    }


    .coffee-about-title{

        font-size:23px;

    }


    .coffee-about-description{

        font-size:18px !important;

    }


    .coffee-feature-list{

        width:100%;

        margin-top:28px;

    }


    .coffee-feature-title{

        font-size:7px;

    }


    .coffee-about-media{

        height:300px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

    .coffee-about{

        padding:
            65px 0
            70px;

    }


    .coffee-about-inner{

        width:calc(100% - 40px);

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:40px;

    }


    .coffee-about-content{

        width:100%;

    }


    .coffee-about-label{

        margin-bottom:15px;

        font-size:10px;

    }


    .coffee-about-title{

        font-size:24px;

        line-height:1.45;

    }


    .coffee-about-description{

        width:100%;

        margin-top:18px;

        font-size:18px !important;

        line-height:1.8;

    }


    .coffee-feature-list{

        width:100%;

        margin-top:30px;

    }


    .coffee-feature-icon{

        width:40px;

        height:40px;

    }


    .coffee-feature-icon svg{

        width:31px;

        height:31px;

    }


    .coffee-feature-title{

        font-size:11px;

    }


    .coffee-about-media{

        width:100%;

        height:auto;

        aspect-ratio:
            1.75 / 1;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:430px){

    .coffee-about-inner{

        width:calc(100% - 30px);

    }


    .coffee-about-title{

        font-size:21px;

    }


    .coffee-about-description{

        font-size:17px;

    }


    .coffee-feature-list{

        gap:3px;

    }


    .coffee-feature-title{

        font-size:7px;

    }


    .coffee-video-button{

        left:14px;

        bottom:43px;

        width:40px;

        height:40px;

    }


    .coffee-media-label{

        left:14px;

        bottom:13px;

    }


    .coffee-video-close{

        right:0;

        top:-50px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}