@charset "UTF-8";

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
    font-weight: 900;
    font-display: swap;
}

html {font-size:1px; line-height:1.5; word-break:keep-all; word-wrap:break-word;}
body {font-family:'NanumSquareNeo', '맑은 고딕', sans-serif; font-weight:400; font-size:17rem; color:#323232; letter-spacing:-0.5px;}
h1, h2, h3, h4, h5 {font-size:17rem; font-weight:400; line-height:1.3;}
a {color:#323232;}
b {font-weight:600;}

.board .show > div:not(:first-child) {display:none;}
.wrap {width:100%; max-width:1400rem; margin:0 auto;}

body {padding:60rem 0; background:#F9F0E2 url('/design/contest/img/bg.jpg') no-repeat center top;}

h1 {width:320rem; height:50rem; display:block; background:url('/design/ko/img/layout/logo_2026.png') no-repeat 0 0/contain; text-indent:-9999rem; margin:0 auto;}
h2 {font-weight:600; text-align:center; margin:30rem 0 40rem;}
h2 span {display:block;}
h2 span.small {font-size:44rem; font-weight:600; margin-bottom:5rem;}
h2 span.big {font-size:60rem; font-weight:900; color:#432904;}

.target {display:flex; justify-content:center; align-items:center; }
.target a {display:flex; justify-content:center; align-items:center; line-height:1; border:2px solid #432904; color:#432904;  font-weight:600; border-radius:100rem; font-size:24rem; padding:15rem 60rem; margin:5rem; display:block;}
.target a.on {background:#432904; color:#fff; font-weight:800;}

.board .show {margin-top:40rem;}
.board .show .list {display:flex; margin:-15rem; flex-wrap:wrap;}
.board .show .list > li {width:calc(25% - 30rem); margin:15rem; display:flex; flex-direction:column;}
.board .show .list > li > a {background:#fff; padding:20rem; display:block; border-radius:12rem; height:100%; position:relative;}
.board .show .list .img {position:relative;}
.board .show .list .img::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); border-radius:9rem; opacity:0; transition:all 0.5s;}
.board .show .list .img::after {content:'+'; position:absolute; top:50%; left:50%;  color:#fff; font-size:70rem; transform:translate(-50%, -50%); font-weight:100; opacity:0; transition:all 0.5s;}
.board .show .list .img img {border-radius:9rem; /*height:280rem;*/ width:100%; object-fit:cover;}
.board .show .list .img:hover::before {opacity:0.9;}
.board .show .list .img:hover::after {opacity:1;}
.board .show .list .tit,
.board .show .list .source,
.board .show .list .notice {padding:0 5rem;}
.board .show .list .tit {margin:20rem 0 15rem; font-size:24rem; font-weight:900; line-height:1.4;}
.board .show .list .source li {display:flex; font-size:15rem; color:#575757; margin:6rem 0; letter-spacing:-0.5rem;}
.board .show .list .source li b {width:70rem; flex-shrink:0; flex-grow:0;}
.board .show .list .source div p:last-child {margin-top:7rem;}
.board .show .list .notice {font-size:13rem; margin-top:20rem; color:#894a1c; line-height:1.6;}

.type {background:#d12424; font-size:15rem; padding:6rem 7rem; color:#fff; position:absolute; top:35rem; right:35rem; z-index:100; line-height:1;}
.type.silla {background:#2429d1;}

.copy {position:absolute; right:20rem; bottom:15rem; padding:3rem 5rem;}
.copy::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.4; backdrop-filter: blur(500px);}
.copy i {font-size:11rem; color:#fff;  font-style:normal; position:relative; z-index:1; display:block; line-height:1.5; opacity:0.9}

.picture {margin-top:5rem; padding-right:5rem; text-align:right; font-size:13rem; color:#333;}
.picture i {font-style:normal;}

footer small {text-align:center; display:block; font-size:13rem; letter-spacing:0.3rem; margin-top:100rem; color:#3c2d14; line-height:1.9; padding:0 20rem; }


@media all and (max-width:1440px){
    .wrap {max-width:calc(100% - 60rem);}
}
@media all and (max-width:1280px){
    html {font-size:0.9px;}
    
    h1 {width:240rem; height:38rem;}
    h2 {margin:30rem 0;}
    h2 span.small {font-size:30rem}
    h2 span.big {font-size:50rem;}
    .target a {font-size:20rem; padding:12rem 40rem;}
    
    .board .show .list {margin:-7rem;}
    .board .show .list > li {width:calc(33.333% - 14rem); margin:7rem;}
}
@media all and (max-width:768px){
    html {font-size:0.8px;}
    .wrap {max-width:calc(100% - 40rem);} 
    .board .show .list {margin:-7rem;}
    .board .show .list > li {width:calc(50% - 14rem); margin:7rem;}
    .board .show .list .source li {flex-wrap:wrap; margin:0 0 15rem 0;;}
    .board .show .list .source li b {width:100%; margin-bottom:5rem;}
}
@media all and (max-width:599px){
    body {padding:40rem 0;}
    h2 span.small {font-size:24rem}
    h2 span.big {font-size:34rem;}
    .target a {font-size:18rem; padding:12rem 40rem;}
}
@media all and (max-width:376px){
    .board .show .list {margin:0;}
    .board .show .list > li {width:100%; margin:0 0 14rem 0;}
}