@charset "utf-8";

@font-face {
    font-family: 'Paperlogy-1Thin';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-2ExtraLight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-3Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-4Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-5Medium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-6SemiBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-7Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-8ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-9Black';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'DepartureMono-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2409-1@1.0/DepartureMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HakgyoansimPuzzleTTF-Outline';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimPuzzleTTF-Outline.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JalnanGothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ghanachoco';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ghanachoco.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Giants-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'LaundryGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicR.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'LaundryGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

body{top:0 !important;}
.skiptranslate iframe{display:none  !important;}

.inner{width:1200px; margin:0 auto;}
.cf::after{content:""; display:block; clear:both;}

#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr{width:auto;}

/*header*/
.header{background:#fff;  position:fixed; width:100%; z-index:10; position:relative; }
.header > .logo{position:absolute; top:50%; left:0; transform:translate(0, -50%); padding:14px;}
.header > .logo > a{display:block;}
.header > .logo > a > img{max-height:45px;;}
.header > .gnb{display:flex; justify-content:center; align-items:center; height:96px;}
.header > .gnb > li{position:relative; width:calc(100% / 7); height:100%; align-content:center;}
.header > .gnb > li > a{display:block; /*padding:0 55px;*/ padding:0; font-size:17px; line-height:25px; color:#333; font-weight:700; text-align:center;}
.header > .gnb > li > a > span{display:block; font-size:10px; font-weight:300; line-height:12px;}
.header > .gnb > li > ul{display:none; position:absolute; left:0; top:100px; width:100%; line-height:normal; text-align:center; z-index:2;}
.header > .gnb > li > ul > li > a{display:block; padding:10px 0; font-size:16px;}
.header > .util{position:absolute; top:50%; right:0; transform:translate(0, -50%); padding:14px;}
.header > .util > ul{display:flex;}
.header > .util > ul > li{background:#767676; border-radius:5px; margin-right:5px;}
.header > .util > ul > li:nth-child(2){background:#2185d0; }
/* .header > .util > ul > li:last-child{background:#333; margin-right:0;} */
.header > .util > ul > li > a{display:block; padding:14px 27px; font-size:18px; font-weight:700; color:#fff;}

.header > .menuBg{display:none; width:100%; height:320px; background:rgba(255,255,255,.9); border-top:1px solid #ddd; position:absolute; left:0; top:96px;}

.header > .gnb > li > ul > li > a:hover{font-weight:bold;}

/*구글번역*/
.header_wrap { position:relative; }
.util { position:absolute; top:50%; right:0; transform:translate(0, -50%); padding:14px; z-index:9999; }
.util > ul{display:flex;}
.util > ul > li{background:#767676; border-radius:5px; margin-right:5px;}
.util > ul > li:nth-child(2){background:#2185d0; }
.util > ul > li > a{display:block; padding:14px 27px; font-size:18px; font-weight:700; color:#fff;}

.util > ul li:first-child { height:49px; background-color:#2185D0; color:#FFF; margin-right:20px; }
.util > ul li.translate { background-color:#FFF; }
.util > ul li.translate .goog-te-gadget { width:100px; background-color:#FFF; }
.goog-te-gadget .goog-te-combo { padding: 8px 8px 8px 12px; border: 1px solid #333; border-radius: 30px; width:100%; }


.inner {margin-bottom:80px;}
.header .inner {margin-bottom:0;}
.sponsorBn .inner {margin-bottom:0;}
/*footer*/
.footer{background:#171717; padding:30px 0; text-align:center; /* margin-top:100px; */}
.footer > ul > li{display:inline-block; margin-right:30px; color:#fff; font-size:16px; line-height:30px; font-weight:300;}
.footer > ul > li:last-child{margin-right:0;}
.footer > ul a {color:#FFF;}
.footer > ul a img {width:15px;}
.footer > p{color:#fff; font-size:16px; line-height:30px; font-weight:300;}
.footer > p > a{color:#fff; margin-left:10px;}
.footer > p > a:last-child{font-weight:700;}

.footer > ul.fBtn{margin-bottom:20px;}
.footer > ul.fBtn > li > a{color:#fff;  font-size:16px; font-weight:700;}

/*kakao*/
.kakao{position:fixed; right:3%; bottom:6%; z-index:9;}
.kakao > a{display:block; margin-top:20px; box-shadow:0 0 5px 2px rgba(0,0,0,.15); border-radius:50%;}
.kakao > a:first-child{margin-top:0;}
.kakao > a > img{height:100px;}
/* .kakao {display:none;} */

/*popup*/
.finish{display:none; background:#fff; position:fixed; width:500px; left:50%; top:50%; transform:translate(-50%, -50%); z-index:9999; padding:20px; border-radius:20px; text-align:center;}
.finish > .img{border:1px solid #cdcdcd; border-radius:10px; overflow:hidden;}
.finish > a{display:block; padding-top:20px; font-size:20px; font-weight:700;}
.finishBg{display:none; width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0,0,0,.3); z-index:9998;}

.medalBtn{cursor:pointer;}
.medal{display:none; background:#fff; position:fixed; width:76%; left:50%; top:50%; transform:translate(-50%, -50%); z-index:9999; padding:20px; border-radius:20px; text-align:center;}
.medal > .img{border:1px solid #cdcdcd; border-radius:10px; overflow:hidden;}
.medal > a{display:block; padding-top:20px; font-size:20px; font-weight:700;}
.medalBg{display:none; width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0,0,0,.3); z-index:9998;}

/*sponsorBn*/
.sponsorBn{position:relative; background:#fff; padding:20px 0; overflow:hidden; border-top:1px solid #ddd;}
.sponsorBn > div > ul{display:flex;}
.sponsorBn > div > ul > li{width:fit-content;}
.sponsorBn > div > ul > li > a{display:block;}
.sponsorBn > div > ul > li > a > img{height:40px;}
.sponsorBn > .arrow{position:absolute; top:50%; transform:translate(0, -50%);}
.sponsorBn > .arrow.prev{left:50%; margin-left:-700px;}
.sponsorBn > .arrow.next{right:50%; margin-right:-700px;}
.sponsorBn > .arrow > a{display:block;}
.sponsorBn > .arrow > a > img{height:40px; filter: invert(33%) sepia(69%) saturate(1438%) hue-rotate(210deg) brightness(82%) contrast(102%); opacity:.5;}
.sponsorBn > .arrow.next > a > img{transform:rotate(180deg);}

.sponsorBn > .arrow > a:hover > img{opacity:1;}

.popup{position:relative; z-index:2;}

.headerM, .popupM{display:none;}

@media (max-width:1720px) {
	.header > .logo > a > img{max-height:34px;;}
	.header > .gnb{max-width:960px;}
	.header > .gnb > li > a{font-size:17px; line-height:21px;}
	.header > .gnb > li > a > span{font-size:12px;}
	.header > .util > ul{align-items: flex-start;}
	.header > .util > ul > li > a{font-size:16px; padding:10px 18px;}

	.goog-te-gadget .goog-te-combo{margin:0;}
}
@media (max-width:1460px) {
	.header > .logo > a > img{height:32px;}
	.header > .gnb{max-width:800px;}
	.header > .gnb > li > a{font-size:16px;}
	.header > .gnb > li > a > span{font-size:10px; line-height:normal;}
	.header > .util > ul li:first-child{margin-right:10px;}
	.header > .util > ul > li > a{font-size:15px; padding:8px 16px;}
}

@media (max-width:1200px) {
	.header,.popup{display:none;}

	.headerM, .popupM{display:block;}

	.inner{width:100%; margin:0 auto;}

	/*header*/
	.headerM > .top{position:relative; padding:16px 3%;}
	.headerM > .top > h1{text-align:center;}
	.headerM > .top > h1 > a{display:inline-block;}
	.headerM > .top > h1 > a > img{height:40px;}
	.headerM > .top > .panel{position:absolute; right:5%; top:50%; margin-top:-10px;}
	.headerM > .top > .panel::before{content:""; display:block; width:20px; height:2px; border-top:3px solid #333;}
	.headerM > .top > .panel::after{content:""; display:block; width:20px; height:2px; border-top:3px solid #333;}
	.headerM > .top > .panel > a{display:block; width:16px; height:2px; border-top:3px solid #333; margin:5px 0; text-indent:-9999px;}
	.headerM > .top > .utilBox{position:absolute; left:2%; top:50%; transform:translate(0,-50%);}
	.headerM > .top > .utilBox > a{display:block; background:#ff8100; border-radius:5px; padding:8px 10px; color:#fff; font-weight:700;}

	.headerM .util{position:absolute; top:30px; left:10px; transform:translate(0, -50%); padding:14px;}
	.headerM .util > ul{display:flex; /* align-items:center; */}
	.headerM .util > ul > li{/* background:#767676; */ border-radius:5px; margin-right:8px; /* margin-top:8px; */ }
	.headerM .util > ul li:first-child { height:35px; margin-top:5px; }
	.headerM .util > ul > li{display:flex; align-items:center;}
	/* .headerM .util > ul > li:nth-child(2){background:#2185d0; } */
	.headerM .util > ul > li:last-child{ margin-right:0;}
	.headerM .util > ul > li > a{display:block; padding:8px 12px; font-size:1rem; font-weight:700; color:#fff;}
	
	/*구글번역모바일*/
	
	

	.headerM > .menu{display:none; background:#fff; width:80%; height:100vh; position:fixed; right:-80%; top:0; z-index:10; padding:100px 0 0;}
	.headerM > .menu > .close{position:absolute; right:5%; top:20px; display:flex; z-index:99999;}
	.headerM > .menu > .close > a{display:block; text-indent:-9999px;}
	.headerM > .menu > .close::after{content:""; display:block; width:16px; height:16px; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(225deg);}
	.headerM > .menu > .close::before{content:""; display:block; width:16px; height:16px; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(45deg); margin-right:2px;}
	.headerM > .menu > .gnbM > li{width:90%; margin:0 auto;}
	.headerM > .menu > .gnbM > li > a{position:relative; display:block; padding:16px 10px; border-bottom:1px solid #cdcdcd; font-size:1.2rem; font-weight:500;}
	.headerM > .menu > .gnbM > li > a::after{content:""; display:block; width:8px; height:8px; border-top:2px solid #777; border-right:2px solid #777; transform:rotate(135deg); position:absolute; right:3%; top:50%; margin-top:-4px;}
	.headerM > .menu > .gnbM > li > ul{display:none; background:#f5f5f5; padding:8px 16px; border-radius:0 0 10px 10px;}
	.headerM > .menu > .gnbM > li > ul > li > a{display:block; padding:10px 0; font-size:1rem; font-weight:300;}
	
	.headerM > .menu > .gnbM > li > a.on::after{transform:rotate(315deg); border-color:#333;}

	/*footer*/
	.footer > ul > li{margin-right:10px; font-size:.9rem;}
	.footer > p{font-size:.9rem;}
	
	.footer > ul.fBtn{margin-bottom:10px;}
	.footer > ul.fBtn > li > a{font-size:.9rem;}


	/*kakao*/
	.kakao > a{margin-top:10px;}
	.kakao > a > img{height:86px;}

	.finish{width:80%;}

	.medal{width:80%;}
	
	.sponsorBn > div > ul > li > a > img{height:32px;}
	.sponsorBn > .arrow{display:none;}
		
}