@charset 'utf-8';

/* reset */
html {-webkit-text-size-adjust: none; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {margin: 0;}
main {display: block;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table, blockquote {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
a img {border: none;}
img {vertical-align: middle;}
li {list-style: none;}
address, em, i, cite {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0;}
i.fas, i.far, i.fab {vertical-align: middle; display: inline-block;}
i.fas span, i.far span, i.fab span {position: absolute; left: -9999px;}
.mobile {display: none !important;}
br.only-m {content: '';}
br.only-m:after {content: '\00a0';}
div.hidden {position: absolute; left: -9999px;}


/* common (include, layout) */
body {font-family: 'NotoSansKR', '나눔고딕', 'NanumGothic', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #333333 ; background: #ffffff;}
#wrapper {overflow: hidden; min-width: 1024px;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; min-width: 1200px; height: 60px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000;}
#header h1 {position: absolute; left: 0; top: 0; width: 220px; height: 100%; background: rgba(255, 255, 255, 0.2); transition: width 0.3s;}
#header h1 a.logo {position: absolute; left: 25px; top: 50%; transform: translate(0, -50%); width: 120px; height: 40px; transition: all 0.3s;}
#header h1 a.logo img {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); max-width: 100%; max-height: 100%; transition: opacity 0.3s;}
#header h1 a.logo img.normal {opacity: 1;}
#header h1 a.logo img.square {opacity: 0;}
#header h1 a.logo span {position: absolute; right: 0; bottom: -3px; width: 77px; line-height: 18px; font-size: 10px; color: #ffffff; line-height: 1.3;}
#header h1 a.open {position: absolute; width: 22px; height: 22px; border-radius: 3px; right: 15px; top: 50%; transform: translate(0, -50%); font-size: 13px; color: rgba(255, 255, 255, 0.5); transition: all 0.3s;}
#header h1 a.open i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.3s;}
#header h1 a.open:hover {color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1);}
#header div.user {position: absolute; left: 250px; top: 50%; transform: translate(0, -50%); transition: left 0.3s;}
#header div.user a {display: block;}
#header div.user a span.face {display: inline-block; width: 36px; height: 36px; border-radius: 100px; overflow: hidden; position: relative; vertical-align: middle; margin-right: 10px; background: #ffffff url(../img/common/icon_face.png) center center no-repeat; background-size: cover; text-indent: -9999px;}
#header div.user a em.name {color: #ffffff; font-size: 13px;}
#header.close h1 {width: 80px;}
#header.close h1 a.logo {left: 10px; width: 40px; height: 40px; overflow: hidden; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.4);}
#header.close h1 a.logo img.normal {opacity: 0;}
#header.close h1 a.logo img.square {opacity: 1;}
#header.close h1 a.logo span {display: none;}
#header.close h1 a.open {right: 5px;}
#header.close h1 a.open i {transform: translate(-50%, -50%) rotate(180deg);}
#header.close div.user {left: 110px;}

#top-menu {position: absolute; right: 25px; top: 50%; transform: translate(0, -50%);}
#top-menu > li {float: left; position: relative;}
#top-menu > li + li {margin-left: 8px;}
#top-menu > li > a {display: block; width: 36px; height: 36px; color: #ffffff; font-size: 18px; position: relative; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease-in-out 0s;}
#top-menu > li > a:hover {background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.95);}
#top-menu > li > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#gnb {position: fixed; left: 0; top: 60px; width: 220px; height: calc(100vh - 60px); padding: 25px 15px; box-sizing: border-box; background: #ffffff; z-index: 1000; color: #8da0aa; font-size: 12px; transition: width 0.3s;}
#gnb > nav {padding-bottom: 80px;}
#gnb > nav h3 {font-size: 13px; color: #000000; margin-bottom: 10px;}
#gnb > nav h3.on {color: #1c82e1;}
#gnb ul.nav {margin-bottom: 15px;}
#gnb ul.nav > li {position: relative;}
#gnb ul.nav > li > a {position: relative; display: block; line-height: 30px; border: 1px solid transparent; border-radius: 3px; transition: all 0.3s; overflow: hidden; padding: 0 20px 0 30px; 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#gnb ul.nav > li + li {margin-top: 3px;}
#gnb ul.nav > li > a > i:first-child {position: absolute; left: 5px; top: 50%; transform: translate(0, -50%); color: #0093d9; opacity: 0.6;}
#gnb ul.nav > li > a > i:last-child {position: absolute; right: 8px; top: 50%; transform: translate(0, -50%); opacity: 0.6; transition: all 0.3s;}
#gnb ul.nav > li > a:hover {color: #1c82e1; border-color: #d1d9dd; text-decoration: underline;}
#gnb ul.nav > li > a:hover > i:first-child {animation: gnb-icon 0.8s ease-in 0s 1 normal forwards; transition: all 0.3s;}
#gnb ul.nav > li.on > a {color: #1c82e1; border-color: #d1d9dd;}
#gnb ul.nav > li.open > a {color: #1c82e1; border-color: #d1d9dd;}
#gnb ul.nav > li.open > a > i:last-child {transform: translate(0, -50%) rotate(90deg);}
#gnb ul.nav > li > ul {overflow: hidden; height: 0; transition: height 0.3s;}
#gnb ul.nav > li > ul > li {border: 1px solid #f8f9fa;}
#gnb ul.nav > li > ul > li:first-child {border-top-left-radius: 3px; border-top-right-radius: 3px; margin-top: 5px;}
#gnb ul.nav > li > ul > li:last-child {border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin-bottom: 5px;}
#gnb ul.nav > li > ul > li + li {border-top: none;}
#gnb ul.nav > li > ul > li > a {position: relative; display: block; line-height: 28px; padding: 0 10px 0 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
#gnb ul.nav > li > ul > li > a:before {content: ''; position: absolute; width: 6px; height: 6px; left: 12px; top: 50%; transform: translate(0, -50%); border-radius: 10px; background: #333333; opacity: 0.3; transition: all 0.3s;}
#gnb ul.nav > li > ul > li.on > a {color: #1c82e1; background: #fcfdfe;}
#gnb ul.nav > li > ul > li > a:hover {color: #1c82e1; background: #fcfdfe; text-decoration: underline;}
#gnb ul.nav > li > ul > li.on > a:before,
#gnb ul.nav > li > ul > li > a:hover:before {background: #1c82e1;}
@keyframes gnb-icon {
    0% {transform: rotate(0) translate(0, -50%);}
    20% {transform: rotate(15deg) translate(0, -50%);}
    40% {transform: rotate(-12deg) translate(0, -50%);}
    60% {transform: rotate(9deg) translate(0, -50%);}
    80% {transform: rotate(-6deg) translate(0, -50%);}
    100% {transform: rotate(3deg) translate(0, -50%);}
}

#gnb.close {width: 80px; padding: 0;}
#gnb.close h3 {display: none;}
#gnb.close ul.nav {margin-bottom: 3px;}
#gnb.close ul.nav > li > a {height: 40px; text-align: center;}
#gnb.close ul.nav > li > a > i:first-child {font-size: 20px; left: 20px; color: #0093d9; opacity: 0.6;}
#gnb.close ul.nav > li > a span {display: none;}
#gnb.close ul.nav > li > ul {position: absolute; left: 85px; top: 50%; transform: translate(0, -50%); background: #ffffff; width: 200px; border-radius: 3px; z-index: 100; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);}
#gnb.close ul.nav > li > ul > li {margin: 0;}

#footer {position: relative; line-height: 30px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); color: #ffffff; margin-left: 220px; text-align: center; font-size: 11px;}


/* login(main) */
body.main {height: 100vh; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%);}
body.main ul.background li {position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none;}
body.main ul.background li.show {display: block; animation: main-bg-show 2s ease-out 0s 1 normal forwards;}
body.main ul.background li.hide {display: block; animation: main-bg-hide 2s ease-out 0s 1 normal forwards;}
body.main ul.background li img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;}
body.main ul.background:after {content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}

@keyframes main-bg-show {
    0% {opacity: 0; transform: rotate(-3deg) scale(0.9);}
    100% {opacity: 1; transform: rotate(0) scale(1);}
}
@keyframes main-bg-hide {
    0% {opacity: 1; transform: rotate(0) scale(1);}
    100% {opacity: 0; transform: rotate(3deg) scale(1.1);}
}

body.main #login-box {position: fixed; width: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 3px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.8); box-sizing: border-box; background: #ffffff;}
body.main #login-box > div.left {position: absolute; left: 0; top: 0; width: 150px; height: 100%; box-sizing: border-box; background: #00bca4; color: #ffffff;}
body.main #login-box h1 {position: absolute; left: 20px; top: 40px; width: 100px;}
body.main #login-box h1 img {width: 80px;}
body.main #login-box h1 span {display: block; font-size: 13px; font-weight: 400; margin-top: 10px;}
body.main #login-box > div.right {padding: 35px 50px; margin-left: 150px;}
body.main #login-box > div.right h2 {font-size: 28px; font-weight: 400; text-align: center; margin-bottom: 20px;}
body.main #login-box ul.form-box li + li {margin-top: 8px;}
body.main #login-box ul.form-box li input[type=checkbox] {margin-right: 5px;}
body.main #login-box ul.form-box li.button {text-align: center; margin-top: 15px;}
body.main #login-box ul.form-box div.input-group input.text {height: 34px; width: calc(100% - 34px); font-size: 14px;}
body.main #login-box ul.form-box div.input-group i {width: 34px; height: 34px; line-height: 34px; font-size: 14px;}



/* sub (common) */
body.sub {background: #fafcfe;}
body.sub #main {min-height: calc(100vh - 90px); margin: 60px 0 0 220px; padding: 25px 25px 100px 25px; background: #fafcfe; box-sizing: border-box; transition: margin-left 0.3s;}
body.sub #main.close {margin-left: 80px;}
body.sub #main h2 {font-size: 28px; font-weight: 400;}
body.sub #main h2 + p {font-size: 13px; margin-top: 5px; opacity: 0.6; margin-bottom: 20px;}



/* 신청안내 */
div.introduction {border: 2px solid #d1d9dd; max-width: 800px; padding: 30px; margin: 0 auto; font-size: 18px; line-height: 1.8em;}
div.introduction .title {font-size: 24px; font-weight: bold; text-align: center; background-color: #8da0aa; color: #ffffff; padding: 12px 0; margin-bottom: 50px;}
div.introduction * + p {margin-top: 30px;}
div.introduction em {color: #ff0000;}
div.introduction p.author {text-align: right; margin-top: 80px;}
div.introduction p.author > span {display: block;}
div.introduction ul {margin: 30px 0;}


/* 출력용 디자인 */
@media print {
  #skip-nav {display: none;}
  #header {display: none;}
  #gnb {display: none;}
  body.sub #main {margin: 0;}
  div.input-guide {display: none;}
  a.btn {display: none;}
}








/*
animation 축약 표현
animation: main-bg-animation 3s ease-out 0.1s 1 normal forwards running;
animation: name duration timing-function delay iteration-count direction fill-mode play-state
duration: 0(default), time, initial, inherit
timing-function: ease(default), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit
deley: 0s(default), time, initial, inherit
direction: normal(default), reverse, alternate, alternate-reverse, initial, inherit
iteration-count: 1(default), number, infinite, initial, inherit
fill-mode: none(default), forwards, backwards, both, initial, inherit
play-state: running(default), paused, initial, inherit  (IE에서는 축약표현에 포함시 동작하지 않음, 별도로 사용)

[최종 사용 예시]
animation: main-bg-animation 3s ease-out 0s 1 normal forwards;
animation-play-state: running;

@keyframes main-bg-animation {
    0% {opacity: 1; transform: rotate(0) scale(1);}
    100% {opacity: 0; transform: rotate(-3deg) scale(1.2);}
}
*/