@charset "UTF-8";

/* Inter - 영문, 숫자 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url(font/Inter-Light.woff2) format('woff2'),
		url(font/Inter-Light.woff) format('woff'),
		url(font/Inter-Light.otf) format('opentype');
	unicode-range: U+0041-005A,U+0061-007A,U+0030-0039;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url(font/Inter-Regular.woff2) format('woff2'),
		url(font/Inter-Regular.woff) format('woff'),
		url(font/Inter-Regular.otf) format('opentype');
	unicode-range: U+0041-005A,U+0061-007A,U+0030-0039;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url(font/Inter-Medium.woff2) format('woff2'),
		url(font/Inter-Medium.woff) format('woff'),
		url(font/Inter-Medium.otf) format('opentype');
	unicode-range: U+0041-005A,U+0061-007A,U+0030-0039;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url(font/Inter-Bold.woff2) format('woff2'),
		url(font/Inter-Bold.woff) format('woff'),
		url(font/Inter-Bold.otf) format('opentype');
	unicode-range: U+0041-005A,U+0061-007A,U+0030-0039;
}

/* Montserrat Subrayada - 메인 슬로건 */
@font-face {
	font-family: 'Montserrat Subrayada';
	font-style: normal;
	font-weight: 400;
	src: url('font/MontserratSubrayada-Regular.woff2') format('woff2'),
		url('font/MontserratSubrayada-Regular.woff') format('woff'),
	url('font/MontserratSubrayada-Regular.otf') format('opentype');
	font-display: swap;
}


/* Pretendard - 한글, 영여 */
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	src: 
		url('font/Pretendard-Light.woff2') format('woff2'), 
		url('font/Pretendard-Light.woff') format('woff'),
		url('font/Pretendard-Light.otf') format('opentype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src:
		url('font/Pretendard-Regular.woff2') format('woff2'), 
		url('font/Pretendard-Regular.woff') format('woff'),
		url('font/Pretendard-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src:
		url('font/Pretendard-Medium.woff2') format('woff2'), 
		url('font/Pretendard-Medium.woff') format('woff'),
		url('font/Pretendard-Medium.otf') format('opentype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src:
		url('font/Pretendard-Bold.woff2') format('woff2'), 
		url('font/Pretendard-Bold.woff') format('woff'),
		url('font/Pretendard-Bold.otf') format('opentype');
}

/* NotoSansKR - 중문 */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(font/NotoSansKR-Light.woff2) format('woff2'),
		url(font/NotoSansKR-Light.woff) format('woff'),
		url(font/NotoSansKR-Light.otf) format('opentype');
	unicode-range: 4E00 - 9FEA, U+3400 - U+4DB5, F900 - FA6D;
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(font/NotoSansKR-Regular.woff2) format('woff2'),
		url(font/NotoSansKR-Regular.woff) format('woff'),
		url(font/NotoSansKR-Regular.otf) format('opentype');
	unicode-range: 4E00 - 9FEA, U+3400 - U+4DB5, F900 - FA6D;
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(font/NotoSansKR-Medium.woff2) format('woff2'),
		url(font/NotoSansKR-Medium.woff) format('woff'),
		url(font/NotoSansKR-Medium.otf) format('opentype');
	unicode-range: 4E00 - 9FEA, U+3400 - U+4DB5, F900 - FA6D;
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(font/NotoSansKR-Bold.woff2) format('woff2'),
		url(font/NotoSansKR-Bold.woff) format('woff'),
		url(font/NotoSansKR-Bold.otf) format('opentype');
	unicode-range: 4E00 - 9FEA, U+3400 - U+4DB5, F900 - FA6D;
}

@font-face {
	font-family:"NanumSquare";
	src: url("font/NanumSquareL.ttf") format("truetype");
	font-weight: 100;
}

@font-face {
	font-family:"NanumSquare";
	src: url("font/NanumSquareR.ttf") format("truetype");
	font-weight: 300;
}

@font-face {
	font-family:"NanumSquare";
	src: url("font/NanumSquareB.ttf") format("truetype");
	font-weight: 500;
}

@font-face {
	font-family:"NanumSquare";
	src: url("font/NanumSquareEB.ttf") format("truetype");
	font-weight: 700;
}

@font-face {
	font-family:"NanumSquareNeo";
	src: url("font/NanumSquareNeo-aLt.ttf") format("truetype");
	font-weight: 100;
}

@font-face {
	font-family:"NanumSquareNeo";
	src: url("font/NanumSquareNeo-bRg.ttf") format("truetype");
	font-weight: 300;
}

@font-face {
	font-family:"NanumSquareNeo";
	src: url("font/NanumSquareNeo-cBd.ttf") format("truetype");
	font-weight: 500;
}

@font-face {
	font-family:"NanumSquareNeo";
	src: url("font/NanumSquareNeo-dEb.ttf") format("truetype");
	font-weight: 700;
}


* {
	font-family		:Pretendard;
	font-weight		:300;
	margin			:0;
	padding			:0;
	border			:0;
	letter-spacing	:-0.01rem;
	text-align		:left;
	box-sizing		:border-box;
	-moz-box-sizing	:border-box;
	-webkit-box-sizing	:border-box;
	line-height:130%;
}

html { font-size:10px; }

@media screen and (min-width:400px) {
	html { font-size:12px; }
}
@media screen and (min-width:700px) {
	html { font-size:14px; }
}
@media screen and (min-width:1000px) {
	html { font-size:18px; }
}

body
{
	display			:flex;
	flex-direction	:column;
	height			:100%;
	width			:100%;
	margin			:0;
}

a.link {
	display: inline;
	position: fixed;
	right: 2rem;
	top: 1.7rem;
	padding: 0.5rem;
	border: 2px solid #0013DE;
	color: #0013DE;
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
	text-decoration: none;
}

a.link:hover {
	border: 2px solid white;
	color: white;
	background: #0013DE;
}

.header_box {
	display			:flex;
	justify-content	:center;
	border-bottom	:1px solid #121212;
	padding			:2rem;
}

@media screen and (max-width:800px) {
	.header_box {
		padding-top			:1rem;
	}
	
	a.link { 
		width: fit-content;
		display: block;
		align-self: end;
		margin: 1rem 1rem 0 -1px;
		position: relative;
		top:0;
		right:0; 
	}
}

.header_box > img {
	height			:2rem;
}

.body_box {
	display			:flex;
	flex-direction	:column;
	width			:100%;
	overflow-y		:scroll;
}

.comment_box {
	display			:flex;
	padding-top		:2rem;
	padding-left	:4rem;	
	padding-right	:2rem;
	gap				:1rem;
}

.comment_box > img {
	width:	1.95rem;
	height:	1.95rem;
}

.comment_box > .comment {
	font-size		:1.5rem;
	font-weight		:500;
	word-break		:keep-all;
}

@media screen and (max-width:800px) {
	.comment_box {
		padding-left	:2rem;
	}	
}

.content {
	display			:flex;
	padding			:2rem;
	flex-flow		:wrap;
	width			:100%;
	justify-content	:center;
	gap				:3rem;
	flex-basis		:0;
}

.notice_box {
	width: 20rem;
    border: 1px solid #ACACAC;
	padding:1.5rem;
	cursor: pointer;
}

@media screen and (max-width:700px) {
	.content {
		padding			:2rem;
		gap				:2rem;
	}	
	
	.notice_box {
		padding:1rem;
	}
}

@media screen and (max-width:570px) {
	.notice_box {
		width:100%;
	}
}

.notice_box .tag {
	padding-bottom: 1rem;
	vertical-align: middle;
}

.notice_box .badge {
	padding: 0.3rem 0.5rem;
	border-radius: 0.5rem;
	color: white;
	font-weight: 500;
	font-size:0.8rem;
	background: #999;
}

.brown .badge {
	background: #CD841D;
}

.green .badge {
	background: #008000;
}

.sky .badge {
	background: #4595CF;
}

.purple .badge {
	background: #8878BC;
}

.lemon .badge {
	background: #C7D540;
}

.orange .badge {
	background: #F3982F;
}




.notice_box > .title {
	font-size: 1.5rem;
	font-family: Pretendard;
	padding-bottom: 0.5rem;
	font-weight: 500;
	word-break: keep-all;
}

.notice_box > .date {
	font-size: 0.9rem;
	color: #333;
}

.notice_box > .body {
	padding-top: 0.5rem;
}

.notice_box > .body > table {
	width:100%;
	table-layout: fixed;
}

.notice_box > .body > table > tbody > tr > td {
	font-size: 0.9rem;
	padding: 0.1rem;
	font-family: Pretendard;
}

.notice_box > .body > table > tbody > tr > td.label {
	font-weight: 500;
}

.notice_box > .body > table > tbody > tr > td.label:before {
	content:'·';
}

.notice_box > .body > table > tbody > tr > td.descript {
	color: #333;
}

.notice_box:hover > .body > table > tbody > tr > td.descript {
	color: white;
}


.notice_box:hover {
	border:1px solid rgba(0,0,0,0);
	background: #999;
}

.notice_box.brown:hover {
	background: #CD841D;
}

.notice_box.green:hover {
	background: #008000;
}

.notice_box.sky:hover {
	background: #4595CF;
}

.notice_box.purple:hover {
	background: #8878BC;
}

.notice_box.lemon:hover {
	background: #C7D540;
}

.notice_box.orange:hover {
	background: #F3982F;
}

.notice_box:hover * {
	color:white;
}

.notice_box:hover .badge {
	background:white;
	color: #999;
}


.notice_box.brown:hover .badge {
	color: #CD841D;
}

.notice_box.green:hover .badge {
	color: #008000;
}

.notice_box.sky:hover .badge {
	color: #4595CF;
}

.notice_box.purple:hover .badge {
	color: #8878BC;
}

.notice_box.lemon:hover .badge {
	color: #C7D540;
}

.notice_box.orange:hover .badge {
	color: #F3982F;
}