/* =============== common style ============== */

@charset "utf-8";

@font-face { font-family: 'BMDOHYEON'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'Cafe24Oneprettynight';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');font-weight: normal;font-style: normal;}

html {font-family: sans-serif; color: #2e80c2;}
body {font-size: 17px; font-family: 'NanumSquare', sans-serif; color: #333; word-break:keep-all; letter-spacing:-1px; line-height: 1.5; font-weight: 500;-ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;}
.mb2 {margin-bottom: 2%;}

.inner {width: 100%; max-width:1100px; margin:0 auto; position: relative;}
.content {position: relative; margin-top: 60px;}
.blue {color: #2756b5 !important;}
.deepblue {color: #001e55 !important;}
.yellow {color: #fff76f !important;}
.white {color: #fff !important;}
.green {color: #1a7758 !important;}
.red {color: #f00;}
.orange {color: #f98700;}
.bg-gray {background-color: #f7f7f7 !important;}
.bg-blue {background-color: #cbe0ed; padding: 60px 0;}
.bg-deepblue {background-color: #559cd9; padding: 60px 0;}
.bg-skyblue {background-color: #6592ef; color: #fff;}
.bg-green {background-color: #1a7758c9; color: #fff;}
.responsive-image {text-align: center;}
.responsive-image img {width: auto;}
.italic {font-style: italic;}

.deep-blue {background-color: #001e55; color: #fff; text-align: center;}

h1 {font-size: 50px; white-space: pre-line;}
h2 {font-size: 45px; white-space: pre-line;}
h3 {font-size: 40px; font-weight: 800;}
h4 {font-size: 35px; font-weight: 800;}
h5 {font-size: 30px; font-weight: 800;}
h6 {font-size: 22px; font-weight: 700;}
p {font-size: 18px; font-weight: 600;}
b {font-weight: 800;}
a {color: #222;}
img {vertical-align: top;}

/* SEO: 화면에서는 숨기고 검색엔진·스크린리더에는 읽히는 텍스트 */
.sound_only {position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;}

@media screen and (max-width:1500px){

}

@media screen and (min-width:1201px){
	.m_img{display: none;}
	.pc_img{display: block; width: 100%; text-align: center;}
}

@media screen and (max-width:1200px){
	#quick_menu {display: none;}
	.inner {padding: 0 10px; width: 100%;}
	.m_img{display: none;}
	.pc_img{display: block; width: 100%; text-align: center;}
}

@media screen and (max-width:1024px){
	h1 {font-size: 45px;}
	h2 {font-size: 40px;}
	h3 {font-size: 35px;}
	h4 {font-size: 30px;}
	h5 {font-size: 25px;}
	h6 {font-size: 20px;}
	p {font-size: 16px;}
	.pc_img{display: none;}
	.m_img{display: block; text-align: center; margin: 0 auto; width: 100%;}
	.m_img img{width: 100%; height: auto;}

	img {width: 100%;}

	.responsive-image img {width: 100%;}
}

@media screen and (max-width:768px){
	.content {margin-top: 30px;}
	h1 {font-size: 40px;}
	h2 {font-size: 35px;}
	h3 {font-size: 30px;}
	h4 {font-size: 25px;}
	h5 {font-size: 20px;}
	h6 {font-size: 18px;}
	p {font-size: 15px;}
}

@media screen and (max-width:425px){
	h1 {font-size: 35px;}
	h2 {font-size: 30px;}
	h3 {font-size: 25px;}
	h4 {font-size: 20px;}
	h5 {font-size: 18px;}
	h6 {font-size: 16px;}
	p {font-size: 15px;}
}