@charset "utf-8";

.ywl-wrap{
    width:100%;
    position:relative;
}

.ywl-hero{
    position:relative;
    width:100%;
    min-height:clamp(360px, 56vw, 860px);
    overflow:hidden;
    background-color:#d7d7cf;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:24px;
    isolation:isolate;
}

.ywl-hero__bg{
    position:absolute;
    inset:-25px;
    background:inherit;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    filter:blur(24px) saturate(.85);
    transform:scale(1.12);
    z-index:0;
}

.ywl-hero__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(229,236,238,.58) 0%, rgba(231,223,193,.72) 48%, rgba(218,196,145,.68) 100%);
    z-index:1;
}

.ywl-hero__art{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}

.ywl-sun{
    position:absolute;
    right:12%;
    top:48%;
    width:clamp(120px, 14vw, 260px);
    height:clamp(120px, 14vw, 260px);
    border-radius:50%;
    background:rgba(255,247,213,.55);
    filter:blur(2px);
    transform:translateY(-50%);
}

.ywl-cross{
    position:absolute;
    right:6%;
    top:50%;
    width:clamp(62px, 4.5vw, 92px);
    height:clamp(220px, 28vw, 370px);
    transform:translateY(-18%);
    border-radius:8px;
    background:rgba(109, 44, 101, .55);
}

.ywl-cross:before{
    content:"";
    position:absolute;
    left:50%;
    top:26%;
    width:clamp(150px, 9vw, 220px);
    height:clamp(24px, 1.9vw, 42px);
    transform:translateX(-50%);
    border-radius:8px;
    background:rgba(109, 44, 101, .55);
}

.ywl-orb{
    position:absolute;
    bottom:-7%;
    border-radius:50%;
    background:rgba(72, 76, 86, .22);
    filter:blur(2px);
}

.ywl-orb--1{
    left:-6%;
    width:clamp(180px, 24vw, 430px);
    height:clamp(180px, 24vw, 430px);
}

.ywl-orb--2{
    left:16%;
    width:clamp(180px, 24vw, 430px);
    height:clamp(180px, 24vw, 430px);
}

.ywl-orb--3{
    left:40%;
    width:clamp(180px, 24vw, 430px);
    height:clamp(180px, 24vw, 430px);
}

.ywl-orb--4{
    right:8%;
    width:clamp(220px, 28vw, 500px);
    height:clamp(220px, 28vw, 500px);
}

.ywl-hero__head{
    position:absolute;
    top:26px;
    left:28px;
    right:28px;
    z-index:3;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.ywl-hero__en,
.ywl-hero__date{
    color:#13294c;
    font-size:clamp(13px, 1.2vw, 20px);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.25;
}

.ywl-hero__date{
    text-align:right;
}

.ywl-hero__body{
    position:relative;
    z-index:3;
    min-height:clamp(360px, 56vw, 860px);
    padding:clamp(90px, 9vw, 140px) clamp(22px, 3vw, 36px) clamp(36px, 5vw, 52px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
}

.ywl-hero__eyebrow{
    margin-bottom:14px;
    color:#13294c;
    font-size:clamp(18px, 2.2vw, 42px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-0.03em;
}

.ywl-hero__title{
    margin:0;
    max-width:1200px;
    font-size:clamp(42px, 9vw, 120px);
    font-weight:900;
    line-height:.98;
    letter-spacing:-0.06em;
    word-break:keep-all;
}

.ywl-hero__title a{
    color:#13294c;
    text-decoration:none;
}

.ywl-hero__title a:hover{
    opacity:.9;
}

.ywl-hero__play{
    margin-top:26px;
    width:clamp(68px, 7vw, 108px);
    height:clamp(68px, 7vw, 108px);
    border-radius:50%;
    background:rgba(51, 46, 38, .58);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:all .25s ease;
}

.ywl-hero__play:hover{
    transform:translateY(-2px);
    background:rgba(41, 37, 31, .75);
}

.ywl-hero__play-icon{
    display:block;
    width:0;
    height:0;
    margin-left:6px;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-left:24px solid #fff;
}

.ywl-hero__meta{
    margin-top:28px;
    max-width:90%;
    color:#13294c;
    font-size:clamp(18px, 2.3vw, 34px);
    font-weight:700;
    line-height:1.35;
    letter-spacing:-0.04em;
    word-break:keep-all;
}

.ywl-empty{
    padding:30px 20px;
    background:#f6f6f6;
    border:1px solid #e8e8e8;
    border-radius:18px;
    color:#666;
    text-align:center;
    font-size:15px;
}

@media (max-width:1024px){
    .ywl-hero{
        border-radius:20px;
    }

    .ywl-cross{
        right:4%;
        top:55%;
    }
}

@media (max-width:768px){
    .ywl-hero{
        min-height:520px;
        border-radius:18px;
    }

    .ywl-hero__head{
        top:18px;
        left:18px;
        right:18px;
        gap:10px;
    }

    .ywl-hero__body{
        min-height:520px;
        padding:82px 18px 34px;
    }

    .ywl-hero__title{
        font-size:clamp(34px, 12vw, 68px);
        line-height:1.02;
    }

    .ywl-hero__eyebrow{
        margin-bottom:10px;
        font-size:clamp(16px, 4vw, 24px);
    }

    .ywl-hero__meta{
        margin-top:22px;
        max-width:100%;
        font-size:clamp(16px, 4.2vw, 24px);
    }

    .ywl-hero__play{
        margin-top:20px;
    }

    .ywl-hero__play-icon{
        border-top:11px solid transparent;
        border-bottom:11px solid transparent;
        border-left:18px solid #fff;
        margin-left:4px;
    }

    .ywl-cross{
        right:4%;
        top:58%;
        width:54px;
        height:220px;
    }

    .ywl-cross:before{
        width:120px;
        height:24px;
    }

    .ywl-sun{
        right:10%;
        top:56%;
        width:120px;
        height:120px;
    }
}

@media (max-width:480px){
    .ywl-hero{
        min-height:480px;
        border-radius:16px;
    }

    .ywl-hero__body{
        min-height:480px;
        padding:78px 16px 28px;
    }

    .ywl-hero__en,
    .ywl-hero__date{
        font-size:12px;
    }

    .ywl-cross{
        opacity:.7;
    }

    .ywl-orb{
        opacity:.9;
    }
}