@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,700&display=swap&subset=korean');
/*font-family: 'Noto Sans KR', sans-serif;*/
/* reset */
html {font-size: 20px; margin: 0 auto;}
body,  h1, h2, h3, h4, h5, p, ul, address, th, td, button {margin: 0; padding: 0}
body {font-size: inherit; font-family: NanumBarunG, 'NanumGothic', '나눔고딕', 'Gulim', '굴림'; font-weight: 400; color: #686868; line-height: 1.2;}
h1, h2, h3, h4, h5 {font-weight: inherit; font-size: inherit;}
ul {list-style: none}
a:hover, a:link, a:visited, a:active {text-decoration: none; color: inherit}
input[type="text"] {border: 1px solid #aaa}
input, button{font-family: inherit;font-size: inherit;color: inherit}
button {cursor: pointer; background: none; border: none}
table {border-collapse: collapse; border-spacing: 0; font-weight: inherit}
address {font-style: normal}
img {vertical-align: top; border: none; max-width: 100%; height: auto}
header, nav, section, article, footer {display: block}
figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
ol{list-style: none; padding:0; margin:0;}
strong {font-weight: normal;}
p {font-size: 0.9rem;}
br {font-family: initial;}

/* 공통클래스 */
.blind {font-size: 0; line-height: 0; width: 1px; height: 1px; line-height: 1px; text-align: -9999px; overflow: hidden; position: absolute; top: 0; left: -9999px}
.clear:after {content: ""; display: block; clear: both}
.p_r {position: relative}
.p_a {position: absolute}
.f_l {float: left}
.f_r {float: right}
.area {width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
article .subtit {font-size: 0.7rem; color: #fff; text-align: center; line-height: 40px; font-weight: 200; letter-spacing: 11px}
.wrap{min-width:1280px; margin: 0 auto; position: relative;}

/* skip */
#skip a {position: absolute; top: 0; left: -9999px; z-index: 100}
#skip a:focus {display: block; top: 0; left: 0;  width: 100%; padding: 10px 0; background: #fff; color: #000; font-weight: 300; text-align: center;}


.h1{font: 2.4rem/1.4 NanumBarunG,sans-serif;}
.h2{font: 2rem/1.4 NanumBarunG,sans-serif;}
.h3{font: 1.8rem/1.4 NanumBarunG,sans-serif;}
.h4{font: 1.5rem/1.4 NanumBarunG,sans-serif;}
.f20{font: 1rem/1.4 NanumBarunG,sans-serif;}
.f18{font: 0.9rem/1.4 NanumBarunG,sans-serif;}

.mb1{margin-bottom: 12px;}
.mb2{margin-bottom: 24px;}
.mb3{margin-bottom: 36px;}
.mb4{margin-bottom: 48px;}
.mb5{margin-bottom: 60px;}
.mb6{margin-bottom: 90px;}
.mb8{margin-bottom: 120px;}
.mb130{margin-bottom: 140px;}
.mb220{margin-bottom: 220px;}

.lh16 {line-height: 1.6;}


.tc{text-align: center;}
.udl{position: relative; display: inline-block;font-style: normal;}
.udl:after{content:''; position: absolute; width: 100%; background: #fff; height: 2px; left:0; bottom:3px;}
.normal{font-weight: normal; font-style:normal;}
.c_white{color: #fff;}
.c_gray{color: #929292;}
.c_black{color: #2d2d2d;}
.c1{color: #7491d9;}

.row{display: flex; flex-wrap:wrap; position: relative;}


#content {position: relative}
.subtit {padding-bottom: 80px;}

.logo{/*width: 202px; height: 30px;*/ /*background: url(../images/logo.png)center center /100% no-repeat;*/ margin:.6em 0 0}
.logo a{width: 100%; height: 100%; font-size: 2rem;  display: block; /*text-indent: -9999em;*/ color: var(--www-reoneskin-com-white, var(--color-white-solid, #FFF)); font-family: var(--font-family-Font-1, NanumBarunGothic); font-size: var(--font-size-40, 40px); font-style: normal; font-weight: var(--font-weight-400, 400); line-height: var(--line-height-48, 48px); }
/*#header, #header .logo, #header #gnb ul li, #cnt5 .program ul li a {transition: 0.3s all}*/
#cnt1 ul li a {transition: 0.1s all}


/* 헤더 전체 뼈대 */
#header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    min-width: 1200px; 
    margin: 0 auto; 
    transition: 0.5s all; 
    z-index: 100; 
    background: #fff;
}
#header.main-header {
    color: #fff; 
    background: transparent;
}
#header.on {
    background: rgba(150, 170, 198, 0.83); 
    margin-top: 0; 
    color: #fff; 
    top: -4rem;
}

/* 상단 영역 (.head-top) */
.head-top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bababa;
    padding: 1em 3.5em;
    position: relative; 
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease; 
}
.head-top .head-rt { width: 228px; }
.head-top .head-lf { width: 263px; position: relative; }
.head-top h1.logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; }

.head-top .header-right { 
    display: flex; 
    flex-direction: row; 
    gap: 32px; 
    align-items: center; 
    justify-content: flex-end;
}
.head-top .header-right .login { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 12px; 
    justify-content: flex-end; 
    cursor: pointer; 
    color: var(--www-reoneskin-com-white, var(--color-white-solid, #FFF)); 
    text-align: center; 
    font-family: var(--font-family-Font-1, NanumBarunGothic); 
    font-size: 16px; 
    font-style: normal; 
    font-weight: var(--font-weight-400, 400); 
    line-height: var(--line-height-21_6, 21.6px); 
}

/* 가상 요소를 이용한 로그인/회원가입 가운데 구분선(바) */
.head-top .header-right .login > *:first-child::after { 
    content: ''; 
    display: inline-block; 
    width: 1px; 
    height: 12px; 
    background-color: #fff; 
    margin-left: 12px; 
    vertical-align: middle;
}
.head-top .header-right .login a:hover, 
.head-top .header-right .login a:focus {
    font-weight: 500; 
    text-shadow: 0 0 .65px currentColor, 0 0 .65px currentColor; 
    transition: all 0.3s ease;
}

/* 애니메이션 닷 스타일 */
.head-lf .dot-ani > div { position: absolute; top: -10px; width: 3px; height: 3px; background: #aaa; border-radius: 50%; opacity: 0; }
#header.main-header .head-lf .dot-ani > div { background: #fff; }
.head-lf .dot-ani > div:nth-child(1) { left: 139px; }
.head-lf .dot-ani > div:nth-child(2) { left: 153px; }
.head-lf .dot-ani > div:nth-child(3) { left: 168px; }
.head-lf .dot-ani > div:nth-child(4) { left: 204px; }
.head-lf .dot-ani > div:nth-child(5) { left: 218px; }

/* GNB 영역 */
#header #gnb {text-align: center; transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease; }
#header #gnb > ul > li { display: inline-block; padding: .8em 0; margin: 0 2em; }
#header #gnb > ul > li > a { display: block; color: var(--www-reoneskin-com-white, var(--color-white-solid, #FFF));text-align: center;font-family: var(--font-family-Font-1, NanumBarunGothic); font-size: var(--font-size-18, 18px); font-style: normal; font-weight: var(--font-weight-400, 400); line-height: var(--line-height-21_6, 21.6px); transition: color 0.3s ease, transform 0.3s ease; letter-spacing: -0.01em; }
#header #gnb ul li a:hover, 
#header #gnb ul li a:find,
#header #gnb ul li a:focus {font-weight: 500; text-shadow: 0 0 .65px currentColor, 0 0 .65px currentColor; transition: all 0.3s ease;}

#header:hover .head-top,
#header:hover #gnb,
.head-top.is-hovered,
#header #gnb.is-hovered { background: rgba(150, 170, 198, 0.83); }
/*
#header.on .logo {transform: scale(0.8);}
#header.on #gnb ul li {color: #fff}
*/

main.main.on{margin:0 0 0}
main.on{margin:100px 0 0}
#menu > li {position: relative;}
.submenu{
	position: absolute;
	top: 2.5rem;
	left: 0;
	display: none;
	z-index: 3;
	text-align: left;
}
.submenu > li{display: inline-block; padding: 15px 30px 15px 0; line-height: 1.4; vertical-align: top;}
.submenu > li a{color: #222; font-size: 0.8rem;}
.submenu.idx_1{width: 28em;}
.submenu.idx_2{width: 16em;}
.submenu.idx_3{width: 20em;}
.submenu.idx_4{left: -420%; width: 54em;}
.submenu.idx_5{width: 20em;}
.submenu.idx_6{width: 12em;}

.submenu_bg {
	position: absolute;
    top: 100%;
    left: 0;
	width: 100%;
	height: 2.7em;
	background: #eee;
	z-index: 2;
	margin-top: -1px;
}


/* ---------footer---------- */
#footer{
    background:#99aac6;
	color: #fff;
	padding: 1.8rem 0;
	font-size: 0.8rem;
}
#footer .area {display: flex; height: 100%; justify-content: space-between; align-items: center;}
#footer .area > div {line-height: 1.8;}

#footer .copy {font-size: 0.6rem; font-weight: 300;}

#footer p {font-size: 0.8rem;}



/* movetop */
#top-btn {position: fixed; bottom: 1.5em; right: 2em; z-index: 1010; display: none;}
#top-btn.on {display: block;}



/* xe */
.xm .signin {margin: 200px auto;}

.board, .board button, .board input, .board label, .board select, .board table, .board textarea {font-size: 14px;}
.bd p {font-size: 14px;}
.rd_body {margin-bottom: 80px;}