@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');

@font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('../font/woff2/Pretendard-Black.woff2') format('woff2'), url('../font/woff/Pretendard-Black.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('../font/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('../font/woff/Pretendard-ExtraBold.woff') format('woff');}
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('../font/woff2/Pretendard-Bold.woff2') format('woff2'), url('../font/woff/Pretendard-Bold.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('../font/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('../font/woff/Pretendard-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('../font/woff2/Pretendard-Medium.woff2') format('woff2'), url('../font/woff/Pretendard-Medium.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('../font/woff2/Pretendard-Regular.woff2') format('woff2'), url('../font/woff/Pretendard-Regular.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('../font/woff2/Pretendard-Light.woff2') format('woff2'), url('../font/woff/Pretendard-Light.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('../font/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('../font/woff/Pretendard-ExtraLight.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('../font/woff2/Pretendard-Thin.woff2') format('woff2'), url('../font/woff/Pretendard-Thin.woff') format('woff'); }

:root {
	--main_color: #3CB4E5;
	--sub_color: #96BCEB;
	--black: #000;
	--black90: rgba(0,0,0,.9);
	--black80: rgba(0,0,0,.8);
	--black70: rgba(0,0,0,.7);
	--black60: rgba(0,0,0,.6);
	--black50: rgba(0,0,0,.5);
	--black40: rgba(0,0,0,.4);
	--black30: rgba(0,0,0,.3);
	--black20: rgba(0,0,0,.2);
	--black10: rgba(0,0,0,.1);
	--white: #fff;
	--white90: rgba(255,255,255,.9);
	--white80: rgba(255,255,255,.8);
	--white70: rgba(255,255,255,.7);
	--white60: rgba(255,255,255,.6);
	--white50: rgba(255,255,255,.5);
	--white40: rgba(255,255,255,.4);
	--white30: rgba(255,255,255,.3);
	--white20: rgba(255,255,255,.2);
	--white10: rgba(255,255,255,.1);
	--gray4: #666666;
	--gray3: #C5C5C5;
	--gray2: #EAEAEA;
	--gray1: #F5F5F5;
	--red: #f03d3e;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Rubik', 'Pretendard', 'Noto Sans SC', sans-serif;
	letter-spacing: normal;
	word-break: keep-all;
	font-weight: normal;
	font-style: normal;
	font-size: 1.6rem;
	line-height: 1;
	color: #000;
}

html,
body {
	width: 100vw;
	width: 100%;
	font-size: 62.5%;
	scroll-behavior: smooth;
}

header,
footer,
aside,
main,
section,
article,
nav {
	display: block;
}

ul,
li {
	margin: 0;
	list-style: none;
}

a,
a:hover,
a:focus,
button {
	text-decoration: none;
}
picture {
	display: block;
	width: 100%;
	height: 100%;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

span,
strong,
b,
em {
	color: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
    font-family: inherit;
}

button,
textarea,
input,
select,
a {
	outline: none;
	border: none;
	border-radius: 0;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}
button,
select {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	background: none;
}

select::-ms-expand,
input::-ms-clear,
input::-ms-reveal,
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 100px #fff inset;
	-moz-box-shadow: 0 0 0 100px #fff inset;
	box-shadow: 0 0 0 100px #fff inset;
}

::selection {
	color: #fff;
	background: rgba(0, 0, 0, 0.99);
}

*:focus,
a:hover,
button:hover,
input:hover {
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}
legend {
	display: block;
	border: none;
	padding: 0;
}
fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
iframe {
	border: none;
	width: 100%;
	height: 100%;
}
font {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
}
body:not(:-moz-handler-blocked) fieldset {
	display: table-cell;
}

@supports (-webkit-touch-callout: none) {
	#header #sidebar .inner,
	.main_popup {
		height: -webkit-fill-available;
	}
}

@media (max-width: 1800px) {
	html, body { font-size: 58%; }
}
@media (max-width: 1680px) {
	html, body { font-size: 56%; }
}
@media (max-width: 1440px) {
	html, body { font-size: 54%; }
}
@media (max-width: 1280px) {
	html, body { font-size: 45%; }
}
@media (max-width: 1024px) {
	html, body { font-size: 51%; }
}
@media (max-width: 989px) {
	html, body { font-size: 50%; }
}
@media (max-width: 768px) {
	html, body { font-size: 65%; }
}
@media (max-width: 425px) {
	html, body { font-size: 62.5%; }
}
@media (max-width: 360px) {
	html, body { font-size: 58%; }
}

/* @media (min-width: 1681px) and (max-width: 1800px) {
    html,
    body { font-size: 58%; }
}
@media (min-width: 1441px) and (max-width: 1680px) {
    html,
    body { font-size: 56%; }
}
@media (min-width: 1281px) and (max-width: 1440px) {
    html,
    body { font-size: 54%; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    html,
    body { font-size: 51.5%; }
}
@media (min-width: 990px) and (max-width: 1024px) {
    html,
    body { font-size: 51%; }
    .br_dn { word-break: keep-all; }
    .br_dn br { display: none; }
}
@media (min-width: 768px) and (max-width: 989px) {
    html,
    body { font-size: 50%; }
    .br_dn { word-break: keep-all; }
    .br_dn br { display: none; }
}
@media (min-width: 501px) and (max-width: 767px) {
    html,
    body { font-size: 65%; }
    .br_dn { word-break: keep-all; }
    .br_dn br:not(.mo) { display: none; }
}
@media (min-width: 351px) and (max-width: 500px) {
    html,
    body { font-size: 62.5%; }
    .br_dn { word-break: keep-all; }
    .br_dn br:not(.mo) { display: none; }
}
@media (max-width: 350px) {
    html,
    body { font-size: 58%; }
    .br_dn { word-break: keep-all; }
    .br_dn br:not(.mo) { display: none; }
} */