@font-face {
	font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    src: local('Spoqa Han Sans Neo Bold'),
    url(../../css/fonts/SpoqaHanSansNeo-Bold.woff2) format('woff2'),
    url(../../css/fonts/SpoqaHanSansNeo-Bold.woff2) format('woff'),
    url(../../css/fonts/SpoqaHanSansNeo-Bold.woff2) format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    src: local('Spoqa Han Sans Neo Medium'),
    url(../../css/fonts/SpoqaHanSansNeo-Medium.woff2) format('woff2'),
    url(../../css/fonts/SpoqaHanSansNeo-Medium.woff) format('woff'),
    url(../../css/fonts/SpoqaHanSansNeo-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    src: local('Spoqa Han Sans Neo Regular'),
    url(../../css/fonts/SpoqaHanSansNeo-Regular.woff2) format('woff2'),
    url(../../css/fonts/SpoqaHanSansNeo-Regular.woff) format('woff'),
    url(../../css/fonts/SpoqaHanSansNeo-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 300;
    src: local('Spoqa Han Sans Neo Light'),
    url(../../css/fonts/SpoqaHanSansNeo-Light.woff2) format('woff2'),
    url(../../css/fonts/SpoqaHanSansNeo-Light.woff) format('woff'),
    url(../../css/fonts/SpoqaHanSansNeo-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 100;
    src: local('Spoqa Han Sans Neo Thin'),
    url(../../css/fonts/SpoqaHanSansNeo-Thin.woff2) format('woff2'),
    url(../../css/fonts/SpoqaHanSansNeo-Thin.woff) format('woff'),
    url(../../css/fonts/SpoqaHanSansNeo-Thin.ttf) format('truetype');
}

@font-face {
	font-family: 'NotoSans';
	font-weight: 700;
	font-style: normal;
	src: /* local("Noto Sans KR Black"), */
		/* url(../../css/fonts/NotoSansKR-Bold.woff2) format('woff2'),
		url(../../css/fonts/NotoSansKR-Bold.woff) format('woff'), */
		url(../../css/fonts/NotoSansKR-Bold.otf) format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'NotoSans';
	font-weight: 400;
	font-style: normal;
	src: /* local("Noto Sans KR Regular"), */
		/* url(../../css/fonts/NotoSansKR-Regular.woff2) format('woff2'),
		url(../../css/fonts/NotoSansKR-Regular.woff) format('woff'), */
		url(../../css/fonts/NotoSansKR-Regular.otf) format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'NotoSerif';
	font-weight: 500;
	font-style: normal;
	src: /* local("Noto Serif KR Medium"), */
		/* url(../../css/fonts/NotoSerifKR-Medium.woff2) format('woff2'),
		url(../../css/fonts/NotoSerifKR-Medium.woff) format('woff'), */
		url(../../css/fonts/NotoSerifKR-Medium.otf) format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'NotoSerif';
	font-weight: 700;
	font-style: normal;
	src: /* local("Noto Serif KR"), */
		/* url(../../css/fonts/NotoSerifKR-Bold.woff2) format('woff2'),
		url(../../css/fonts/NotoSerifKR-Bold.woff) format('woff'), */
		url(../../css/fonts/NotoSerifKR-Bold.otf) format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'NotoSerif';
	font-weight: 900;
	font-style: normal;
	src:/*  local("Noto Serif KR Black"), */
		/* url(../../css/fonts/NotoSerifKR-Black.woff2) format('woff2'),
		url(../../css/fonts/NotoSerifKR-Black.woff) format('woff'), */
		url(../../css/fonts/NotoSerifKR-Black.otf) format('opentype');
	font-display: swap;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  /*word-break: keep-all;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body { width: 100vw; height: 100vh; }

body { color: #333; background: #fff; overflow-y: scroll; line-height: 1.875rem;}
body,input,button,textarea,select 
{ 
	font-size: 1rem; 
	font-weight: 500; 
	/*font-family: "Hiragino Kaku Gothic Pro", 'Spoqa Han Sans Neo', 'sans-serif', "ヒラギノ角ゴ Pro W3", "Osaka", "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;*/
    font-family: "NotoSans", "sans-serif";
	letter-spacing: -0.035em;
}

a, input, button, textarea, select { line-height: 1.5rem;}

i, em, .itlc {
    font-style: italic;
}

h1, h2, h3, h4, h5, h6,
strong, b { font-weight: 700; color: #000;}
hr { border: 0; border-top: 1px solid #dedede; margin-top: 4rem; margin-bottom: 4rem;}

a { color: #333; text-decoration: none; -webkit-transition: 0.2s opacity; transition: 0.2s opacity;}
a:hover, a:focus { text-decoration: none; outline: none; opacity: 0.9;}

button {
  font-size: 1rem;
  padding: 0;
  border: none;
  box-shadow: none;
  background: inherit;
  border-radius: 0;
  -webkit-transition: 0.2s opacity;
  transition: 0.2s opacity;
}

a#topBtn {
    position: fixed;
    right: 8vw;
    bottom: 5vw;
    display: none;
    z-index: 8888;
}

button:hover, button:focus { cursor: pointer; outline: none;}
button:hover { opacity: 0.9;}
button:focus { cursor: pointer; outline: none; opacity: 0.95;}

::-moz-selection { background-color: #000; color: #FFF;}
::selection { background-color: #000; color: #FFF;}

ul, ol { margin: 0; padding: 0; list-style: none;}
ul.arabicList { counter-reset: list-number;}
ul.arabicList > li { counter-increment: list-number;}
ul.arabicList > li::before { content:counter(list-number)". "; font-size: 1rem;}
ul.arabicList > li ul { padding-left: 1rem;}
ul.arabicList.rounded > li::before { content:counter(list-number); font-size: .8rem; display: inline-block; text-align:center; line-height: 1rem;  width: 1rem; height: 1rem; border-radius:50%; border: 1px solid #333; margin-right: .4rem;}

img { height: auto; max-width: 100%;}
.f-left { float: left;}
.f-right { float: right;}
.clearFix:after { content: ""; display: block; clear: both;}
.hide { position: absolute; top: -9999px; overflow: hidden;}
.badge { background-color: #000; color: #fff; font-family: 'NotoSans', sans-serif; font-weight: 700; font-size: .875rem; letter-spacing: -0.04em; padding: 0 .5rem .1rem; display: inline-block;}

.txSans { font-family: 'NotoSans', sans-serif; font-weight: bold; letter-spacing: -1px;}
.txSans.reg { font-weight: 400; letter-spacing: -0.04em;}
.txBold { font-weight: 700;}
.txCenter { text-align: center;}
.sizeX { font-size: 1.25rem; letter-spacing: -0.04em;}
.sizeXX { font-size: 1.875rem;letter-spacing: -0.04em;}
.sizeXXX { font-size: 3.125rem; letter-spacing: -0.04em;}
.sizeM { font-size: .95rem; letter-spacing: -0.03em;}
.sizeS { font-size: .75rem; letter-spacing: -0.04em;}
.sizeR { font-size: .875rem; letter-spacing: -0.04em;}
.txGreen { color: #6EC74F;}
.txBlue { color: #3982e9 !important;}
.bgBlue { background-color: #3982e9 !important;}

/* common componet CSS */
.cntList { margin-top: 2rem; margin-bottom: 2rem;}
.cntList ul.basicList { /*border-top: 1px solid #e6e6e6;*/ border-bottom: 1px solid #e6e6e6;}
.cntList ul.basicList li { border-bottom: 1px solid #e6e6e6; position: relative;}
.cntList ul.basicList li:last-child { border-bottom-color: transparent;}
.cntList ul.basicList .more { position: absolute; top: .5rem; right: 0; width: 3rem; height: 1.5rem; text-align: right; font-size: 0; line-height: 1em; z-index: 999;}
.cntList ul.basicList .more img { width: 30%;}
.cntList ul.basicList a { display: block; position: relative; padding-top: 1rem; padding-bottom: 1rem; padding-right: 1rem; padding-left: 1rem; line-height: 1.7em;}
.cntList ul.basicList a .title { display: block; /*padding-left: 20px;*/ white-space: nowrap; overflow: hidden;}
.cntList ul.basicList a .badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); line-height: 1.4rem;}
.cntList ul.basicList a .badge.bottom { top: auto; transform: none; bottom: 1rem;}
.cntList ul.basicList a .writer,
.cntList ul.basicList a .date { font-size: .9rem;}
.cntList ul.basicList a .date::before { content: '· ';}
.cntList ul.basicList.noLine,
.cntList ul.basicList.noLine li { border: none;}
.cntList .listNav { margin-top: 1rem;}

.cntList .basicList.col-2 { display: flex; flex-wrap: wrap; justify-content: space-between; border-color: transparent;}
.cntList .basicList.col-2 li { width: 49%;}
.cntList .basicList.col-2 li:last-child { border-bottom-color: #333;}
.cntList .basicList.col-2 li:nth-child(1),
.cntList .basicList.col-2 li:nth-child(2) { border-top: 1px solid #333;}

.listHead { padding: 0;}
.listHead .wrapItem { margin: 0;}
.listFoot { clear: both; padding-top: .5;}

/* Form CSS */
/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal{
    display:none;
}
/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    display:none;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="url"], 
input[type="tel"], 
textarea {
	width: 100%;
	background: #fff;
	border: none;
	border-bottom: 1px solid #333;
	padding: .8rem 0;
	font-size: 1rem;
	box-sizing: border-box;
	-webkit-transition: 0.2s border-color;
	transition: 0.2s border-color;
}
label { display: block; text-align: left; font-size: .875rem;}
input::-webkit-input-placeholder { color: #dbdbdb;}
input:-ms-input-placeholder { color: #dbdbdb;}
textarea::-webkit-input-placeholder { color: #dbdbdb;}
textarea:-ms-input-placeholder { color: #dbdbdb;}

.inputWrap { position: relative; height: 3rem;}
.inputWrap input { padding-right: 2rem; height: inherit;}
.inputWrap .btnClear {
display: none;
position: absolute;
top: 0;
right: 0;
width: 1.5rem;
height: inherit;
background: url(../../images/input_reset.png) no-repeat center / 100% auto;
border: none;
outline: none;
cursor: pointer;
}
.inputWrap.active .btnClear { display: block;}

select { 
	padding: .8rem 2.5rem .8rem 0;
	min-width: 3rem;
	font-size: 1rem;
	border: none;
	border-bottom: 1px solid #333;
	width: 100%;
	background: url(../../images/arrow_down.png) no-repeat right .8rem center / auto 1rem;
	-webkit-appearance: none;
	appearance: none;
}
select::-ms-expand { display: none;}
/* 셀렉트는 placeholder가 없어서 비슷하게 구현하는 아래 방식으로 처리합니다. */
/* 02-마이페이지-회원정보-Auth1.html의 셀렉트박스를 확인하세요. */
select:required:invalid {	color: #dbdbdb;}
select option[value=""][disabled] { display: none;}
select option { color: #000;}

.containerChk {
	display: inline-block;
	position: relative;
	padding-left: 2.35rem;
	margin-right: 1rem;
	height: 1.75rem;
	font-size: 1rem;
	cursor: pointer;
	color: #999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.containerChk input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark { position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 1.75rem; width: 1.75rem; border-radius: 50%; background-color: #fff; border: 1px solid transparent; transition: .2s all;}
.containerChk input[type="checkbox"] + .checkmark { background: url(../../images/check_off.png) no-repeat center / 100% auto;}
.checkmark.radio { background: #dedede; border: 1px solid #333;}
.containerChk:hover input ~ .checkmark { background-color: #eee;}
.containerChk input:checked ~ .checkmark { background-image: url(../../images/check_on.png);}
.containerChk input:checked ~ .checkmark.radio { background-image: none;}
.containerChk input:checked ~ i { color: #333;}
.checkmark::after { content: ""; position: absolute; display: none;}
.containerChk input:checked ~ .checkmark:after { display: block;}

.containerChk .checkmark.radio:after {
	width: .75rem;
	height: .75rem;
	background: #000;
	transform: rotate(45deg);
	transform-origin: 10% 150%;
	border-radius: 50%;
}

.wrapItem { margin-top: 1rem; display: flex; justify-content: space-between;}
.wrapItem .colItem { margin-right: 1rem;}
.wrapItem .colItem label { line-height: 1em; margin-bottom: .5rem;}
.wrapItem .colItem input,
.wrapItem .colItem select { padding-top: .5rem; padding-bottom: .5rem;}
.wrapItem .flex1 { flex: 1;}
.wrapItem .flex2 { flex: 2;}
.wrapItem .flex3 { flex: 3;}
.wrapItem .mainBtn.addDel { width: 4.3rem; height: auto; font-size: 2rem; line-height: 1em; border-width: 0;}
.wrapItem .mainBtn + .mainBtn { margin-left: 1rem;}
.wrapItem .mainBtn.searchBtn { width: auto; margin-left: 2rem; padding-left: 2rem; padding-right: 2rem;}

/* button & tabs CSS */
.flexTab { display: flex; justify-content: space-around; border-bottom: 1px solid #333;}
.flexTab.wrapTab { justify-content: flex-start; flex-wrap: wrap;}
.flexTab .tablink { flex: 1; display: block; padding: 1rem; }
.flexTab.wrapTab .tablink { flex: none; padding-left: 2rem; padding-right: 2rem;}
.flexTab .tablink.active { color: #000; border-bottom: .3rem solid #000;}
.tabContent { display: none;}
.tabContent.on{ display: block;}

.mainBtn, 
.outlineBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .3rem .7rem;
	border: 2px solid transparent;
	font-size: 1rem;
	text-align : center;
	-webkit-transition: 0.2s all;
	transition: 0.2s all;
}

.mainBtn { background-color: #000; color: #fff;}
.outlineBtn { background: transparent; border: 1px solid #000;}

.mainBtn:hover, 
.outlineBtn:hover {
	opacity: 0.8;
}

/* pagination */
.pagination { margin-top: 5rem; padding: 0 1rem; text-align: center;}
.pagination li { display: inline-block; padding: .1rem;}
.pagination li a { display: block; padding: .5rem 1rem; background-color: #F2F3F4; transition: all .2s;}
.pagination li.active span { display: block; color: #fff; background: #333; padding: .5rem 1rem;} 
.pagination a:hover,
.pagination a:focus { background-color: #e9ebec !important;}
.pagination .page-nav a { background-color: transparent; }

.cntContainer.intro.cb {/*padding-left: 1rem;*/    font-size: 0.9rem;    text-align: justify;}


.cntContainer .editer {
	font-size: 12pt; 
	text-indent: 2em;
} 

.editer_1
{
	margin-bottom: 45px; padding-bottom: 40px; border-bottom: 10px solid #e3e3e3;
}

.editer_2
{
	margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #e3e3e3;
}

#wrap>.wrap-container {
    margin-top: 20px;
}

#wrap>* {
    transition: .25s;
}

.wrap-container {
    /*padding: 148px calc(50vw - 834px) 150px;*/
    margin: auto;
}

.Heading-01, .Heading-02 {
    font-weight: 600;
    color: #333;
}

.Heading-01 {
    font-size: 56px;
    letter-spacing: -.04em;
    line-height: 88px;
}

.Heading-02 {
    font-size: 40px;
    letter-spacing: -.02em;
    line-height: 60px;
}

.area-head, .layout-01 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.layout-01 .left-menu-area {
    margin-top: 40px;
}

.layout-01 .left-menu-area .Button-03 {
    margin-left: 1px;
}

.Button-03.nuxt-link-active.nuxt-link-exact-active {
    color: #3982E9;
    border-top: 2px solid #3982E9;
    background-color: #fff;
    border-radius: unset;
}

.Button-03.nuxt-link-active {
    color: #000;
    border-top: 2px solid #9C9C9C;
    background-color: #fff;
    border-radius: unset;
}

.Button-03 {
    display: block;
    height: 42px;
    width: 170px;
    background-color: #f2f3f4;
    line-height: 42px;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    border-radius: 10px;
    transition: .25s;
    margin-bottom: 10px;
}

.layout-01 .right-content-area {
    width: 964px;
}

.contest-component {
    /*padding-top: 150px;
    padding-bottom: 150px;*/
	padding-left: 20px;
    /*border-top: 1px solid #e6e6e6;*/
}

.alignleft {
    float: left;
    margin-right: 25px;
    margin-left: 20px;
    text-align: center;
}

.alignright {
    float: right;
    margin-right: 25px;
    margin-left: 20px;
    text-align: center;
}



.a2a_svg {
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    padding: 0;
    pointer-events: none;
    width: 32px;
}

/*
#layout-main {
    position: relative;
    max-width: 1080px;
    min-width: 320px;
    margin: 30px auto 60px;
    overflow-x: hidden;
}
*/

#layout-main {
    position: relative;
    max-width: 1080px;
    min-width: 320px;
    margin: 10px auto 60px;
    overflow-x: hidden;
}

.main-Container__container {
    position: relative;
    margin: 0 auto 10px 0;
}

.main-Container-25x71 .main-Container__main {
    width: 64%;
}

.main-Container__main, .main-Container__side {
    min-height: 100px;
    display: inline-block;
}

.main-Container-25x71 .main-Container__side {
    width: 24%;
    float: left;
}

.main-Container__side figure{
	padding: 4px 0;	margin-top: 48px;	/* margin-left:10px; */
}

.main-Container__side .widget+.widget {
    margin-top: 30px;
}

.widget+.widget {
    margin-top: 40px;
}

.widget:after, .widget__body-item:after {
    content: "";
    display: table;
    clear: both;
    height: 0;
}

*, :after, :before {
    box-sizing: inherit;
}

.cntContent__header, .entry-header {
    /*padding-bottom: 20px;*/
}

.cntContent__title, .entry-title {
    font-size: 26px;
    color: #3982e9;
    letter-spacing: -1px;
    line-height: normal;
}

.cntContent__body {
    border-top: 2px solid #3982e9;
    /* border-bottom: 2px solid #54a3f4; */
    padding: 10px 0 0;
}

.cntContent__body, .cntContent__content, .cntContent__more-wrap, .cntContent__msgbox {
    margin-bottom: 20px;
}

.user-html {
    line-height: 1.7;
    font-size: 15px;
    font-weight: 400;
    color: #353535;
}

.cntContent__cmds {
    padding: 10px 0;
    text-align: right;
    margin-bottom: 10px;
}
.cntContent__cmds {
    padding: 10px 0;
    text-align: right;
    margin-bottom: 10px;
}


.user-html p {
    margin: 0;
    overflow: hidden;
}

li, p, ul {
    margin: 0;
}

.user-html:after {
    content: "";
    display: table;
    clear: both;
    height: 0;
}

.main-Container-25x71 .main-Container__side {
    width: 25%;
    float: left;
}
.main-Container__main, .main-Container__side {
    min-height: 100px;
    display: inline-block;
}

.cntContent__content.user-html {
    text-align: justify;

}