@font-face {
	font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    src: local('Spoqa Han Sans Neo Bold'),
    url(../css/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2) format('woff2'),
    url(../css/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2) format('woff'),
    url(../css/SpoqaHanSansNeo/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/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2) format('woff2'),
    url(../css/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff) format('woff'),
    url(../css/SpoqaHanSansNeo/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/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2) format('woff2'),
    url(../css/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff) format('woff'),
    url(../css/SpoqaHanSansNeo/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/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2) format('woff2'),
    url(../css/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff) format('woff'),
    url(../css/SpoqaHanSansNeo/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/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff2) format('woff2'),
    url(../css/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff) format('woff'),
    url(../css/SpoqaHanSansNeo/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*/normal;
}
/* 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: #000; background: #fff; overflow-y: scroll; line-height: 1.875rem;}/* 'Noto Serif KR',  'NotoSans', serif*/
body,input,button,textarea,select { font-size: 1rem; font-weight: 300; font-family:  'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -0.035em;}
/*body,input,button,textarea,select { font-size: 1rem; font-weight: 300; font-family:  'Noto Serif KR',  'NotoSans', 'serif'; letter-spacing: -0.035em;}*/
a, input, button, textarea, select { line-height: 1.5rem;}

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

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

a#topBtn { 
	position: fixed; /* 포지션 고정 */ 
	right: 8vw; /* 오른쪽에서 2% - %도 할수 있음*/ 
	bottom: 5vw; /* 밑에서 5px */ 
	display: none; /* 보여지지 없음 - 기본적으로 안보여지게 */ 
	z-index: 9999; /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */ 
}

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;
}

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 #000; margin-right: .4rem;}

img { height: auto; max-width: 100%;}
.f-left { float: left;}
.f-right { float: right;}
main .cntList.weekly .f-right {color: #3982e9;}
.clearFix {/*margin-bottom: 2em;*/}
.clearFix:after { content: ""; display: block; clear: both;}
.hide { position: absolute; top: -9999px; overflow: hidden;}
.badge { background-color: #000; color: #fff; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; font-weight: 700; font-size: .875rem; letter-spacing: -0.04em; padding: 0 .5rem; display: inline-block;}
/*.badge { background-color: #000; color: #fff; font-family: 'NotoSans', sans-serif, 'sans-serif'; font-weight: 700; font-size: .875rem; letter-spacing: -0.04em; padding: 0 .5rem; display: inline-block;}*/

.txSans { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; font-weight: 500; letter-spacing: 0;}
/*.txSans { font-family: 'NotoSans', 'sans-serif'; font-weight: 500; letter-spacing: 0;}*/
.txSans.reg { font-weight: 400; letter-spacing: -0.04em; text-align: right;}

.menuContainer .clearFix .txSans.reg {
    font-weight: 400;
    letter-spacing: -0.04em;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
}

.menuContainer .clearFix .logintext {display: none;}

.txBold { font-weight: 700;}
.txCenter { text-align: center;}
.sizeX { font-size: 1.5rem; letter-spacing: -0.04em;font-weight: 500;color: #333;}
.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;}

.txSans .hanja {font-size: 14pt;}
.txSans .editor_email {font-size: 12pt;}

/* common componet CSS */

.colS.cbCnt .cntList ul.basicList li {  position: relative; margin-top: -8px;     height: auto;}

.cntList { margin-top: 2rem; margin-bottom: 2rem;font-size: 1.125rem;}
.cntList ul.basicList { border-top: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5;}
.cntList ul.basicList li { border-bottom: 1px solid #b5b5b5; position: relative; margin-top: -8px;     height: 85px;}
.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; line-height: 1.7em;}
.cntList ul.basicList a .title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cntList ul.basicList a .badge { position: absolute; right: 15px;  top: 70%; transform: translateY(-50%); line-height: normal;}
.cntList ul.basicList a .badge.bottom { top: auto; transform: none; bottom: 1rem;}
.cntList ul.basicList a .writer,
.cntList ul.basicList a .date { font-size: 1rem;}
.cntList ul.basicList a .date::before { content: '· ';}
.cntList ul.basicList.noLine,
.cntList ul.basicList.noLine li { border: none;}
.cntList .listNav { margin-top: 1rem;}

.cntList ul.basicList .writera a::after {
    content: '· ';
}

.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: #b5b5b5;}
.cntList .basicList.col-2 li:nth-child(1),
.cntList .basicList.col-2 li:nth-child(2) { border-top: 1px solid #b5b5b5;}

.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 #000;
	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; padding-left: 10px;}
.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 #000;
	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 #000;}
.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: #000;}
.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%;
}

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

.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 #000;}
.flexTab.wrapTab { justify-content: flex-start; flex-wrap: wrap;}
.flexTab .tablink { flex: 1; display: block; padding: 0.8rem; text-align: center;}
.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: #000; padding: .5rem 1rem;} 
.pagination a:hover,
.pagination a:focus { background-color: #e9ebec !important;}
.pagination .page-nav a { background-color: transparent; }

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

.spkr01 {
    font-weight: bold;
}

.cbCnt .cntContainer .footnote-link {
    color: blue;
    font-size: 0.7em;
    vertical-align: top;
}

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

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

.history-visual {
    height: 616px;
    background: url(/MCManAttachment/GetAttachmentImage?id=6154) no-repeat 50%;
    background-size: cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-row-gap: 10px;
    row-gap: 10px;
    margin-top: 0px;
}

.about-visual {
    height: 616px;
    background: url(/MCManAttachment/GetAttachmentImage?id=6155) no-repeat 50%;
    background-size: cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-row-gap: 10px;
    row-gap: 10px;
    margin-top: 0px;
}

.talk-visual {
    height: 616px;
    background: url(/MCManAttachment/GetAttachmentImage?id=6156) no-repeat 50%;
    background-size: cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-row-gap: 10px;
    row-gap: 10px;
    margin-top: 0px;
}

.cbCnt .cntContainer .history-visual .Heading-02{
    font-size: 28px;
    letter-spacing: -.02em;
    /*line-height: 60px;*/
    margin-bottom: 0rem;
    color:#fff;
}

.cbCnt .cntContainer .about-visual .Heading-02 {
    font-size: 28px;
    letter-spacing: -.02em;
    color:#000;
    margin-bottom: 0rem;
}

.cbCnt .talk-visual .Heading-02 {
    font-size: 28px;
    letter-spacing: -.02em;
    color:#000;
    margin-bottom: 15rem;
    font-weight: 600;
}


.cbCnt .cntContainer .history-visual .Heading-01, .history-visual .Heading-02{
    font-weight: 600;
    color:#fff;
}

.cbCnt .cntContainer .about-visual .Heading-01, .about-visual .Heading-02{
    font-weight: 600;
    color:#000;
}



.cbCnt .cntContainer .history-visual .Bigtext-400, .history-visual .Bigtext-400 {
    font-weight: 400;
}

.cbCnt .cntContainer .history-visual .Bigtext-400, .history-visual .Bigtext-600{
    font-size: 16px;
    letter-spacing: -.01em;
    line-height: normal;
    color: #fff;
}

.cbCnt .cntContainer .about-visual .Bigtext-400, .about-visual .Bigtext-600 {
    font-size: 16px;
    letter-spacing: -.01em;
    line-height: normal;
    color: #000;
}

.cbCnt .bookCnt .cntContainer .wp-caption.alignnone img {
    width: calc(1000px - 300px);
}



#popup {
    position: absolute;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;
    border: solid 1px #00000059;
    width: auto;
    height: auto;
    background: #efefef;
    top: 50%;
    left: 50%;
    transform: translate(-10%, -50%);
    box-shadow: 7px 7px 5px rgb(173 173 173 / 63%); /*x y 번짐 색상*/
    z-index: 1;
}


#popup > h2 > label {
    float: right;
    margin-right: 10px;
    cursor: pointer;
}

#popup > img {
    vertical-align: middle;
}