section.top-banner {height:32.81vw;/* 630px */border-radius: 32px;
    background-image: -webkit-image-set(url('../images/main01.png') 1x, url('../images/main01@2x.png') 2x);
    background-image: image-set(url('../images/main01.png') 1x, url('../images/main01@2x.png') 2x);}
@media (max-width:734px) {
    section.top-banner {height: 121.66vw;/* 438px */
        max-height: calc(100vh - 40px - 32px - 10px - 35px - 24px - 8px);
        /* header - slogan - slogan margin bottom - 'Focus' - 'Focus' margin top - 'Focus' margin bottom */
        background-image: -webkit-image-set(url('../images/main01-s.png') 1x, url('../images/main01-s@2x.png') 2x);
        background-image: image-set(url('../images/main01-s.png') 1x, url('../images/main01-s@2x.png') 2x);}
    .slogan {color:#373737;margin-top: 40px;line-height: 180%;margin-bottom: 10px;}
}

/* article */
section.article {margin:25px 0;padding-top: 15px;}
section.article:last-child {margin-bottom: 0;}
section.article h3.title {font-size: 32px;letter-spacing: -0.64px;color:#de3252;text-align: center;
    font-family: 'Rufina', serif;margin-bottom: 16px;font-weight: 400;}

section.article .wrap-link {--outerRadius:32px;position: relative;display: block;border-radius: var(--outerRadius);flex:1 auto;}
section.article .inner {display: block;border-radius: var(--outerRadius);overflow: hidden;position: relative;}
section.article picture {display: block;}
section.article picture img {width: 100%;display: block;transition: 1s;}

section.article .box-label {position: absolute;left:16px;top:16px;padding:8px 14px 9px;font-size: 15px;letter-spacing: -0.3px;border-radius: var(--outerRadius);backdrop-filter: blur(4.5px);-webkit-backdrop-filter: blur(4.5px);
    font-family: 'Noto Serif KR', serif;font-weight: 700;color:#373737;z-index:1;background: rgba(253, 250, 251, 0.72);}

@media(max-width:1010px) and (min-width:735px) {
    section.article {padding-top:3.96vw}
    section.article h3.title {font-size: 3.16vw;margin-bottom:1.58vw}
    section.article .box-label {left:1.58vw;top:1.58vw;font-size: 1.48vw;padding:0.79vw 1.38vw 0.89vw}
    section.article .wrap-link {--outerRadius:3.16vw}
}

@media (max-width:734px) {
    section.article {padding-top: 5px;margin: 19px 0;}
    section.article h3.title {font-size: 24px;margin-bottom: 8px;letter-spacing: 0;}

    section.article .wrap-link {--outerRadius:16px}
    section.article .box-label {font-size: 12px;letter-spacing: -0.3px;left:8px;top:8px;padding:4px 10px 6px;}
}

section.article > .wrap-flex {--spacing:32px; --gap:24px; align-items: flex-start; gap:var(--gap);}
section#focus > .wrap-flex {--spacing:43px; margin-top: var(--spacing);}
section#inside > .wrap-flex {margin-bottom: var(--spacing);}
section#view > .wrap-flex {--gap:26px;margin-bottom: var(--spacing);}
section#event > .wrap-flex {align-items: flex-end;justify-content: center;}

@media (min-width:735px) {
    section#event .wrap-link:last-child {flex: none;width: 33%;max-width: 490px;}
}

@media (max-width:734px) {
    section#focus > .wrap-flex {--spacing:40px;--gap:22px;}
    section#inside > .wrap-flex {--spacing:22px;--gap:22px;}
    section#view > .wrap-flex {--spacing:22px;--gap:22px;}
}

/* box-title */
section.article .box-title {position: absolute;bottom:32px;left:32px;}
section.article .box-title .tit-inner {margin-bottom:-26px;--radius:32px;--bigRadius:100px}
section.article .box-title .tit-inner:nth-child(1) span {border-radius: var(--bigRadius) var(--bigRadius) var(--bigRadius) 0;}
section.article .box-title .tit-inner:last-child span {border-radius: 0 var(--radius) var(--radius) var(--radius);}
section.article .box-title .tit-inner:last-child {margin-bottom: 0;}
section.article .box-title .tit-inner span {background: #fdfafb;font-size: 32px;line-height: 120%;font-weight: 600;color:#1f1c1d;
    padding:23px 24px;display: inline-block;letter-spacing: -0.5px;position: relative;
    border-radius: 0 var(--bigRadius) var(--bigRadius) 0;}
section.article .box-title .tit-inner span.info {font-size: 16px;color:#989898;font-weight: 600;letter-spacing: 0.32px;}
section.article .box-title span.tit::before {content: "";position: absolute;width:0;left:24px;bottom:23px;height:2px;background-color: #1F1C1D;
    transition: width 0.6s;z-index: 1;}
section.article .tit-inner:nth-child(2) span.tit::before {transition-delay: 0.2s}

section.article .box-title.type01 {bottom:-37px;left:0;}
section.article .box-title.type01 .tit-inner:nth-child(1) span {border-radius: 0 var(--bigRadius) var(--bigRadius) 0;}
section.article .box-title.type01 .tit-inner:nth-child(2) span {border-radius: 0 var(--bigRadius) var(--bigRadius) 0;}
section.article .box-title.type01 .tit-inner:nth-child(3) span {border-radius: 0 var(--radius) var(--radius) var(--radius);}

section.article .box-title.type02 .tit-inner:nth-child(1) span::before {bottom:21px;}
section.article .box-title.type02 .tit-inner:nth-child(2) span::before {bottom:17px;}

@media (min-width:1501px) {
    section.article .box-title.type01 .tit-inner:nth-child(2) span {padding-top: 12px;padding-bottom: 21px;}
    section.article .box-title.type01 .tit-inner:nth-child(3) span {padding-top:20px;}

    section.article .box-title.type02 .tit-inner:nth-child(1) span {padding-bottom: 21px;}
    section.article .box-title.type02 .tit-inner:nth-child(2) {margin-bottom: -20px;}
    section.article .box-title.type02 .tit-inner:nth-child(2) span {padding-top: 16px;padding-bottom:16px;}
    section.article .box-title.type02 span.info {padding-top:22px;}
}

@media(max-width:1500px) and (min-width:735px) {
    section.article .box-title {bottom:2.13vw;left:2.13vw;}
    section.article .box-title .tit-inner {margin-bottom:-1.73vw;}
    section.article .box-title .tit-inner span {font-size: 2.13vw;padding:1.53vw 1.6vw;}
    section.article .box-title .tit-inner span.info {font-size:1.06vw}

    section.article .box-title.type01 .tit-inner:nth-child(2) span {padding-top:0.8vw;padding-bottom:1.4vw;}
    section.article .box-title.type01 .tit-inner:nth-child(3) span {padding-top: 1.33vw;}

    section.article .box-title.type02 .tit-inner:nth-child(1) span {padding-bottom: 1.4vw;}
    section.article .box-title.type02 .tit-inner:nth-child(2) {margin-bottom: -1.33vw;}
    section.article .box-title.type02 .tit-inner:nth-child(2) span {padding-top: 1.06vw;padding-bottom:1.06vw;}
    section.article .box-title.type02 span.info {padding-top:1.46vw;}
}

@media (min-width:735px) {
    section.article .wrap-link:hover img {transform: scale(1.02);}
    section.article .wrap-link:hover span.tit::before {width:calc(100% - 45px)}
}

@media (max-width:734px) {
    section.article .box-title {bottom:8px;left:8px;}
    section.article .box-title .tit-inner {--radius:16px;margin-bottom:-10px;}
    section.article .box-title .tit-inner span {font-size: 18px;padding:9px 14px 8px 12px;font-weight: 600;}
    section.article .box-title .tit-inner span.info {font-size: 14px;font-weight: 500;letter-spacing: 0.28px;}

    section.article .box-title.type01 {bottom:-24px}
    section.article .box-title.type01 .tit-inner:nth-child(2) span {padding-top:6px;}
    section.article .box-title.type01 .tit-inner:nth-child(3) span {padding-top:10px;}

    section.article .box-title.type02 span.info {padding-top:11px;}
}

/* box-title-outer */
section.article .box-title-outer {padding-left: 8px;margin-top: 22px;}
section.article .box-title-outer .tit {font-size: 20px;color:#191a1c;font-weight: 600;line-height: 140%;}
section.article .box-title-outer .tit span {position: relative;}
section.article .box-title-outer .tit span::before {content: "";position: absolute;width:0;left:0;bottom:0;height:2px;background-color: #1F1C1D;
    transition: width 0.6s;z-index: 1;}
section.article .box-title-outer .tit span:nth-child(2)::before {transition-delay: 0.2s}
section.article .box-title-outer .info {font-size: 16px;color:#989898;font-weight: 600;letter-spacing: 0.32px;margin-top: 6px;}

@media(max-width:1500px) and (min-width:735px) {
    section.article .box-title-outer {padding-left: 0.53vw;margin-top: 1.46vw;}
    section.article .box-title-outer .tit {font-size: 1.33vw;}
    section.article .box-title-outer .info {font-size: 1.06vw;margin-top: 0.4vw;}
}

@media (min-width:735px) {
    section.article .wrap-link:hover .tit span::before {width:100%}
}

@media (max-width:734px) {
    section.article .box-title-outer {padding-left: 4px;margin-top: 14px;}
    section.article .box-title-outer .tit {font-size: 16px;}
    section.article .box-title-outer .info {font-size: 14px;letter-spacing: 0.28px;margin-top: 4px;}
}

/* box-event */
section.article .box-event {background: #F4EDD1;border-radius: 32px;padding:70px 32px 32px;position: relative;}
section.article .box-event .main {color:#171717;font-weight: 700;line-height: 120%;}
section.article .box-event .desc {font-size: 16px;font-weight: 500;line-height: 160%;color:#474747;margin-top:6px;}
section.article .box-event .top .main {font-size: 32px;letter-spacing: -0.64px;}
section.article .box-event .bottom {margin-top: 16px;margin-bottom: 23px;}
section.article .box-event .bottom .main {font-size: 20px;letter-spacing: -0.4px;}
section.article .box-event .banner {max-width: 328px;}
section.article .box-event .banner img {transition: none;transform: scale(1);width: auto;}
section.article .box-event .btn {position: absolute;bottom:0;right:0;width: 92px;height: 92px;background: url('../images/event-btn-bg@2x.png') no-repeat center / 100%;z-index: 1;}
section.article .box-event .btn::before {content: '';background: #f5dd88;position: absolute;right:0;bottom:0;border-radius: 100%;z-index: -1;width: 64px;height: 64px;}
section.article .box-event .btn img {position: absolute;right:16px;bottom:16px;transform: scale(1);transition: 0.5s;width: 32px;}

@media(max-width:1500px) and (min-width:735px) {
    section.article .box-event {padding:70px 2.13vw 2.13vw}
    section.article .box-event .desc {font-size: 1.06vw;}
    section.article .box-event .top .main {font-size: 2.13vw;}
    section.article .box-event .bottom .main {font-size: 1.33vw;}
    section.article .box-event .banner {width: 21.86vw;}
    section.article .box-event .btn {width: 6.13vw;height: 6.13vw;}
    section.article .box-event .btn::before {width: 4.26vw;height: 4.26vw;}
    section.article .box-event .btn img {right: 1.06vw;bottom: 1.06vw;width:2.13vw}
}

@media(max-width:1010px) and (min-width:735px) {
    section.article .box-event {padding-top: 6.93vw;}
}

@media (min-width:735px) {
    section.article .wrap-link:hover .btn img {transform: translateX(4px);}
}

@media (max-width:734px) {
    section.article .box-event {padding:55px 16px 16px;border-radius: 16px;}
    section.article .box-event .box-label {top:10px}
    section.article .box-event .desc {font-size: 14px;line-height: 150%;margin-top: 4px;}
    section.article .box-event .top .main {font-size: 20px;letter-spacing: -0.4px;}
    section.article .box-event .bottom {margin-top: 18px;margin-bottom: 18px;}
    section.article .box-event .bottom .main {font-size: 16px;letter-spacing: -0.32px;}
    section.article .box-event .btn {background-image: url('../images/event-btn-bg-s@2x.png');width:81px;height: 86px;}
    section.article .box-event .btn::before {width: 56px;height: 56px;}
    section.article .box-event .btn img {width: 24px;}
}