@charset "utf-8";
/* --------------------------------------------
	default
/* ------------------------------------------ */
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,select,input,textarea {margin: 0; padding: 0; border: 0; font-style:normal; font-family:"NanumGothic", "맑은 고딕";font-size:16px;line-height:1.7; color:#222; font-weight: 400; vertical-align: baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}
body { line-height: 1; font-size:1rem;}
ol, ul,a { list-style: none; text-decoration:none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
input[type="submit"],input[type="reset"],input[type="button"],button { text-align: left; background: none; border: 0; color: inherit; cursor: pointer; font: inherit;line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
input::-moz-focus-inner,button::-moz-focus-inner { border: 0; padding: 0;}

@font-face {font-family: 'NanumGothic'; src: url('./NanumGothic-Light.woff') format('woff'); font-weight:100; }
@font-face {font-family: 'NanumGothic'; src: url('./NanumGothic-Regular.woff') format('woff'); font-weight:400; }
@font-face {font-family: 'NanumGothic'; src: url('./NanumGothic-Bold.woff') format('woff'); font-weight:700;}
@font-face {font-family: 'NanumSquare'; src: url('./NanumSquareEB.woff') format('woff'); font-weight:700;}



/* --------------------------------------------
 * Common
/* ------------------------------------------ */

#scale_layer.auto { overflow-y: auto !important;}

#wrap{position:relative; width:1920px; height:1080px;}
#pages { width:1920px; height:1080px;}


/*popup*/
#popup{position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 1000; display: none; }
#popup:before{content:""; position:absolute; top:0; left:50%; background: rgba(0,0,0,0.7); width:30000px; margin-left:-15000px; height: 100%;}
#popup>div{width: auto !important; margin: 0 auto; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 500px; border-radius: 15px;}
/* #popup>div>header{background: #1bace0; padding:10px 58px 10px 26px; border-radius: 15px 15px 0 0;} */
#popup>div>header{background: 0; padding:0; border-radius:0;}
#popup>div>header:after{content: ""; display: block; clear: both; }
#popup>div>header>h4{color: #fff; font-size: 24px; font-weight: 600; float: left; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: calc(100% - 40px); overflow: hidden;}
#popup>div>header>button{background:url(../img/ico_popclose.png) center center no-repeat; width: 22px; height: 22px; float: right; vertical-align: middle; position: absolute; padding:29px; top:58px; right:-32px; border-radius: 0 15px 0 0; text-indent:-9999px; border:none; z-index:6100000;}
#popup>div>section{max-height: 945px; padding: 20px 30px; background: #fff; position: relative; min-width: 1280px; width:100%; border: 2px solid #1bace0; border-top: 0; font-size:24px; color:#666666; line-height: 31px; letter-spacing: -1px; border-radius:15px;}
#popup>div>section>img{width:100%;}

#popup>div.guide>header { height:8px; background: #2d99e0;}
#popup>div.guide>header h4 { position: absolute; left:41px; top:48px; font-size:24px; font-family:"NanumSquare","나눔스퀘어"; color:#222; z-index: 30; line-height: 1;}
#popup>div.guide>header>button {background:url(../img/guide_close.png) center center no-repeat; width:31px; height:31px; float: right; vertical-align: middle; position: absolute; padding:15px 20px; top:27px; right:17px; border-radius: 0 15px 0 0; text-indent:-9999px; border:none;}
#popup>div.guide>section {max-height: 945px; padding: 20px 88px 20px 77px; background: #fff; position: relative; max-width: 1860px; min-width:0; border: 2px solid #1bace0; border-top: 0; font-size:24px; color:#666666; line-height: 31px; letter-spacing: -1px; border-radius: 0; box-sizing:border-box;}
#popup>div.guide> section > div h5 { position:relative; font-size:18px; font-weight:bold; padding-bottom:40px; line-height:1;}
#popup>div.guide> section > div h5:before,
#popup>div.guide> section > div h5:after { content:""; position:absolute; border-radius:50%;}
#popup>div.guide> section > div h5:before { left:-22px; top:3px; width:12px; height:12px; background:#2d99e0;}
#popup>div.guide> section > div h5:after { left:-19px; top:6px; width:6px; height:6px; background:#fff;}
#popup>div.guide> section > div:nth-child(1) > h5 { margin-top:83px; padding-bottom:17px; font-size:18px; font-weight:bold; line-height: 1;}
#popup>div.guide> section > div p { padding:0 0 27px; font-size:18px; line-height: 30px;}
#popup>div.guide> section > div:nth-child(2) > div { margin-bottom:29px;}
#popup>div.guide> section > div:nth-child(2) div > span { display: inline-block; width:75px; vertical-align: top;}
#popup>div.guide> section > div:nth-child(2) div table { display: inline-block; border-radius: 4px; border:1px solid #e5e5e5; box-sizing:border-box; vertical-align: top;}
#popup>div.guide> section > div:nth-child(2) div table thead tr th,
#popup>div.guide> section > div:nth-child(2) div table tbody tr td { border-right:1px solid #e5e5e5; font-size:18px;}
#popup>div.guide> section > div:nth-child(2) div table thead tr th:nth-child(2),
#popup>div.guide> section > div:nth-child(2) div table tbody tr td:nth-child(2) { border-right:none;}
#popup>div.guide> section > div:nth-child(2) div table thead tr { border-bottom:1px solid #e5e5e5;}
#popup>div.guide> section > div:nth-child(2) div table th { width:279px; height:44px; background:#f9f9f9; font-size:18px; text-align: center; line-height:44px;}
#popup>div.guide> section > div:nth-child(2) div table tbody tr { border-bottom:1px solid #e5e5e5;}
#popup>div.guide> section > div:nth-child(2) div table td { height:43px; border-right:none; text-align: center; line-height:43px;}
#popup>div.guide> section > div:nth-child(2) div table tbody td span { display: block; padding:7px 0 13px; font-size:18px; line-height: 1;}
#popup>div.guide> section > div:nth-child(2) div table tbody td p { display:inline-block; padding-bottom:0;}
#popup>div.guide> section > div:nth-child(2) div table tbody tr:last-child { border-bottom:none;}
#popup>div.guide> section .guide_info { margin:31px 0 15px; font-size:16px; color:#2d99e0; letter-spacing:-1px; line-height: 1;}


#popup>div.dialogue>header {background: #1bace0; padding:0; height:8px; border-radius: 0;}
#popup>div.dialogue>header h4 { font-size:0;}
#popup>div.dialogue>header>button{background:#1bace0 url(../img/ico_popclose.png) center center no-repeat; width: 22px; height: 22px; float: right; vertical-align: middle; position: absolute; padding:15px 20px; top:20px; right:10px; border-radius: 0 15px 0 0; text-indent:-9999px; border:none;}
#popup>div.dialogue>section {max-height: 945px; height:201px; padding: 20px 30px; background: #fff; position: relative; max-width: 1860px; min-width:0; border: 2px solid #1bace0; border-top: 0; font-size:18px; color:#222; text-align:center; line-height: 31px; letter-spacing: -1px; border-radius: 0; box-sizing:border-box;}


#popup>div>section>span{display:block; padding:0 40px; text-align: center; font-size: 0; background:#fff;}
#popup>div>section>span>button{width: 49%; display: inline-block; letter-spacing: -.1px; font-size: 24px; line-height: 64px; background: #1bace0; text-align: center; border-radius: 10px; border:1px solid #1bace0; color:#fff; margin-right:1%; margin-top:20px;}
#popup>div>section>span>button:last-child{border-color:#dddddd; background: #eeeeee; color:#333333; margin-right:0;}

#popup div section .track { margin-top:-9px;}


#popup div section .play_btn { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:128px; height:128px; text-indent:-9999px; color:transparent; font-size:1px; background:url(../img/play.png) no-repeat center / 100%; z-index:5000000; box-shadow:0 0 20px rgba(0,0,0,0.5); border-radius:50%;}
#popup div section .play_btn.pause {background:url(../img/stop.png) no-repeat center / 100%;}
#popup div section > em { display:block; position:relative; bottom:-10px; left:0; width:80px; height:40px; border-radius:4px; background:#2d99e0; font-size:15px; font-weight:bold; color:#fff; text-align:center; line-height:40px;}
#popup .player header > h4 { display:none; position:absolute; top:58px; left:43px; width:72px; height:72px; background:#ffa733; border-radius:50%; font-size:25px; color:#fff; text-align:center; line-height:72px; z-index:6500000;}
#popup .player header.must_passed > em { display:none; position:absolute; top:61px; left:49px; font-size:18px; color:#000; z-index:30; letter-spacing:-1px; z-index:6500001;}
#popup .player header.must_passed h4 { top:31px;}
#popup .player header.must_passed button { top:30px;}

#popup>div>footer { position:absolute; bottom:40px; left:50%; transform:translateX(-50%);}
#popup>div>footer button:nth-child(1) { width:160px; height:48px; border-radius:3px; background:#2d99e0; font-size:18px; color:#fff; text-align:center; line-height:48px;}
#popup>div>footer button:nth-child(2) { display:none;}

/* header */

#pages > header { position:relative; width:100%; height:360px; background:url(../img/header.png) no-repeat 0 0;}
#pages > header h2 { position:absolute; top:50%; left:50%; font-size:24px; color:#fff; font-family:"NanumSquare",'나눔스퀘어'; font-weight:100; text-align:center; transform:translate(-50%,-50%); letter-spacing:-2px;}
#pages > header h2 strong {display:block; font-size:56px; font-weight:bold; color:#fff; letter-spacing:-4px;}


/* secton */

#pages > section { position:relative; background:#f9f9f9;}


/* footer */

#pages > footer { position:relative; margin-top:-1px; height:89px; background:#f9f9f9;}
#pages > footer:after { content:""; display:block; clear:both;}
#pages > footer > div { display:inline-block;}
#pages > footer > div:after { content:""; display:block; clear:both;}
#pages > footer > div button:nth-child(1),
#pages > footer > div button:nth-child(2) { position:relative; float:left; padding-left:34px; width:180px; height:64px; background:#7258f5; border-radius:30px; font-size:18px; color:#fff; text-align:center; line-height:64px; box-shadow: 4px 0 8px #eaeaea;}
#pages > footer > div button:nth-child(1) { margin-left:80px;}
#pages > footer > div button:nth-child(2) { margin-left:16px;}
#pages > footer > div button.go_qna:before { background:url(../img/notice.png) no-repeat 0 0;}
#pages > footer > div button.go_report:before { background:url(../img/manage.png) no-repeat 0 0;}
#pages > footer > div button.go_qna:before,
#pages > footer > div button.go_report:before { content:""; position:absolute; left:39px; top:20px; width:24px; height:24px;}
#pages > footer ul { position:absolute; top:0; right:0; font-size:0;}
#pages > footer ul li { display:inline-block; font-size:14px;}
#pages > footer ul li:nth-child(2) { margin:0 23px 0 40px;}
#pages > footer ul li:nth-child(3) { margin-right:79px; padding-top:38px;}
#pages > footer ul li button { position:relative; border:none; background:none; vertical-align: middle; letter-spacing:-1px; font-style:normal;}
#pages > footer ul li:nth-child(2) button,
#pages > footer ul li:nth-child(3) button { padding-top:0;}
#pages > footer ul li:nth-child(2) button:after { content:""; position:absolute; left:5px; top:-50px; width:40px; height:40px; border-radius:50%; background:#aaa;}
#pages > footer ul li:nth-child(2) button:before { content:""; position:absolute; top:-40px; left:16px; width:20px; height:20px; background:url(../img/log_out.png) no-repeat 0 0; z-index:10;}
#pages > footer ul li:nth-child(3) button:after { content:""; position:absolute; top:-50px; width:40px; height:40px; border-radius:50%;  left:10px; background:#afca0b;}
#pages > footer ul li:nth-child(3) button:before { content:""; position:absolute; top:-40px; left:20px; width:20px; height:20px; background:url(../img/info.png) no-repeat 0 0; z-index:10;}
#pages > footer ul li button em { font-style:normal; font-weight:bold; vertical-align: middle;}
#pages > footer ul li .pop_bl:after { background:#2d99e0;}

#pages > footer img { position:absolute; left:50%; top:15px; transform:translate(-50%,0);}

#pages > footer > .f_question { width:100%; background:#e5e5e5;}
#pages > footer > .f_question dl { margin:0 auto; width:441px; height:80px; font-size:0; line-height:80px;}
#pages > footer > .f_question dl dt,
#pages > footer > .f_question dl dd { display:inline-block; vertical-align: middle;}
#pages > footer > .f_question dl dt { position:relative; margin-right:18px; color:#888; font-size:14px;}
#pages > footer > .f_question dl dt:after { content:""; position:absolute; top:3px; right:-10px; width:2px; height:16px; background:#ccc;}
#pages > footer > .f_question dl dd { color:#222; font-size:13px; font-weight:bold;}
#pages > footer > .f_question dl dd:nth-of-type(1) { margin-right:40px;}



#pop_player { display: none;}

/* main */
section #main { position:relative; margin:0 auto; width:1761px; height:552px;}
section #main > p {position:absolute; left:50%; top:-40px; width:628px; height:80px; background:#2d99e0; border-radius:40px; font-size:24px; color:#fff; text-align:center; line-height:80px; transform:translate(-50%,0); z-index: 10;}
section #main > p.complete {  background:#ffc000;}
section #main > p span { font-weight:bold; font-size:40px; color:#fff;}
section #main ol:after { content:""; display:block; clear:both;}
section #main ol { padding-top:80px;}
section #main ol li { position:relative; float:left; margin:0 48px; width:343px; height:364px; z-index: 10;}
section #main ol li:after { content:""; position: absolute; left:0; top:33px; width:100%; height:330px; background:#fff; border-radius:0 0 6px 6px; z-index: -1;}
section #main ol li em { position:relative; font-style:normal;}
section #main ol li:nth-child(1) > em:before,
section #main ol li:nth-child(2) > em:before { content:"필수 이수"; position:absolute; left:41px; top:0; width:72px; height:36px; background:#ffa733; border-radius:3px 3px 0 0; font-size:14px; font-weight:bold; color:#fff; line-height:36px;}
section #main ol li > em { display:block; position:relative; width:40px; height:36px; background:#2d99e0; border-radius:3px 3px 0 0; font-size:20px; color:#fff; text-align:center;}
section #main ol li > em:after { content:""; position:absolute; left:0; bottom:0; width:343px; height:4px; background:#2d99e0;}
section #main ol li div { position:relative; width:100%; height:187px;}
section #main ol li:nth-child(1) div {background:url(../img/thumbnail1.jpg) no-repeat 0 0 / 100% 100%;}
section #main ol li:nth-child(2) div {background:url(../img/thumbnail2.jpg) no-repeat 0 0 / 100% 100%;}
section #main ol li:nth-child(3) div {background:url(../img/thumbnail3.jpg) no-repeat 0 0 / 100% 100%;}
section #main ol li:nth-child(4) div {background:url(../img/thumbnail4.jpg) no-repeat 0 0 / 100% 100%;}
section #main ol li:nth-child(5) div {background:url(../img/thumbnail5.jpg) no-repeat 0 0 / 100% 100%;}

section #main ol li div span { display:block; position:absolute; bottom:0; left:0; width:100%; height:8px; background:rgba(0,0,0,0.5);}
section #main ol li:nth-child(1) div span span,
section #main ol li:nth-child(2) div span span,
section #main ol li:nth-child(3) div span span,
section #main ol li:nth-child(4) div span span,
section #main ol li:nth-child(5) div span span { background:#f54545;}

section #main ol li div p { position:absolute; right:10px; bottom:18px; padding:4px 7px; width:89px; height:21px; background:rgba(0,0,0,0.5); border-radius:3px;color:#fff;text-align:center; line-height:21px;}
section #main ol li div p em { font-size:12px; color:#fff; font-weight:bold;}

section #main ol li h4 { font-size:20px; color:#222;}
section #main ol li:nth-child(2) h4,
section #main ol li:nth-child(5) h4 { padding-top:17px; padding-bottom:25px; line-height:30px;}
section #main ol li h4 { padding:24px 30px 57px 24px; line-height:1; letter-spacing:-1px;}
section #main ol li h5 { padding:0 0 17px 25px; font-size:14px; color:#888; line-height:1;}
section #main ol li h5.passed { position:relative; color:#2d99e0;}
section #main ol li h5.passed:after { content:""; position:absolute; left:85px; top:0; width:18px; height:18px; background:url(../img/activation.png) no-repeat 0 0;}
section #main ol li h5.ing { color:#ff9600;}
section #main ol li button { position:absolute; right:24px; bottom:-16px; width:64px; height:64px; background:url(../img/btn_player.png) no-repeat 0 0 / 100% 100%; border:none; text-indent:-9999px;}



/* login */
section #login { position:relative; height:640px; z-index: 10;}
section #login div { position:absolute; left:50%; top:-40px; width:492px; background:#fff; border-radius:0 0 8px 8px; transform:translate(-50%,0); box-shadow:4px 4px 8px #eaeaea;}
section #login div:before { content:""; display: block; width:100%; height:4px; background:#2d99e0;}
section #login div h3 { padding:76px 0 22px; font-size:32px; font-weight:bold; font-family:"NanumSquare","나눔스퀘어"; text-align:center; color:#222; letter-spacing:-1px;}
section #login div p { margin:0 auto 16px; width:412px; color:#666; text-align:center; line-height:1; letter-spacing:-2px;}
section #login div p span { color:#2d99e0;}
section #login div form { margin:0 auto; width:412px;}
section #login div form input { display:block; margin-bottom:8px; width:100%; height:56px; border:1px solid #e5e5e5; box-sizing:border-box; border-radius:5px; text-indent:16px;}
section #login div form input[type="submit"] { margin-bottom:220px; background:#2d99e0; font-size:20px; color:#fff; text-align:center;}

/* agree */
section .privacy { position:relative; height:700px;}
section #agree { position:absolute; left:50%; top:-40px; width:1280px; background:#fff; border-radius:0 0 8px 8px; transform:translate(-50%,0); box-shadow:4px 4px 8px #eaeaea; z-index: 10;}
section #agree:before { content:""; display: block; width:100%; height:4px; background:#2d99e0;}
section #agree > div  { display:inline-block; vertical-align: top;}
section #agree > div:nth-child(1) { width:805px; margin-left:40px;}
section #agree > div h3 { padding:40px 0 32px; font-size:24px; font-weight:bold; font-family:"NanumSquare","나눔스퀘어"; color:#222; line-height:1; letter-spacing:-1px;}
section #agree > div:nth-child(1) ol { padding:23px 40px 44px 24px; border:1px solid #e5e5e5; border-radius:8px; box-shadow:0 2px 8px #eee inset; overflow-y:scroll; box-sizing: border-box;}
section #agree > div:nth-child(1) ol li h4 { padding-bottom:11px; font-size:14px; font-weight:bold; color:#222; line-height:1;}
section #agree > div:nth-child(1) ol li p { font-size:14px; color:#666; padding-left:15px; }
section #agree > div:nth-child(1) ol li:nth-child(2) h4 { padding:18px 0 0;}
section #agree > div:nth-child(1) ol li:nth-child(3) h4 { line-height:1;}
section #agree > div:nth-child(1) ol li:nth-child(4) h4 { padding:0 0 24px;}
section #agree > div:nth-child(1) ol li:nth-child(1) p { line-height:24px;}
section #agree > div:nth-child(1) ol li:nth-child(2) p,
section #agree > div:nth-child(1) ol li:nth-child(3) p,
section #agree > div:nth-child(1) ol li:nth-child(5) p { padding:15px 0 25px 15px; line-height:1;}
section #agree > div:nth-child(1) ol li:nth-child(5) p { padding-bottom:0;}
section #agree > div:nth-child(1) > p { display: inline-block; padding-top:19px; font-size:18px; color:#222;}
section #agree > div:nth-child(1) input { color:#222;}
section #agree > div:nth-child(1) input[type="radio"] { position:absolute; left:-1000%;}
section #agree > div:nth-child(1) input[type="radio"] + label { position:absolute; left:620px; top:515px;}
section #agree > div:nth-child(1) input[type="radio"]:nth-of-type(2) + label { left:719px;}
section #agree > div:nth-child(1) input[type="radio"] + label:before { content:""; display:inline-block; margin:0 7px 0 0; width:24px; height:24px; background:url(../img/check.png) no-repeat 0 0; position:relative; top:7px; transition:all .5s;}
section #agree > div:nth-child(1) input[type="radio"]:checked + label:before { background:url(../img/check_on.png) no-repeat 0 0;}
section #agree > div:nth-child(1) > #agree_yes { margin-left:206px;}

section #agree > div:nth-child(2) { width:346px; height:574px; margin-left:25px; padding-left:25px; border-left:1px solid #eee;}
section #agree > div:nth-child(2) dl dt { font-size:14px; color:#333; text-align:left; line-height:1;}
section #agree > div:nth-child(2) dl dt:after { content:""; display:block; clear:both;}
section #agree > div:nth-child(2) dl dt span { display: inline-block; float:right; font-size:14px; color:#1bace0; letter-spacing:-2px;}
section #agree > div:nth-child(2) dl dd input { margin:8px 0 16px; width:100%; height:56px; border:1px solid #e5e5e5; border-radius:5px; box-shadow:0 2px 8px #eee inset; box-sizing:border-box;  text-indent:16px;}
section .privacy > .btn_input { margin:0 auto; padding-top:555px; width:612px;}
section .privacy > .btn_input input { width:302px; height:64px; background:#aaa; font-size:20px; color:#fff; text-align:center; line-height:24px; transition:all .5s;}
section .privacy > .btn_input input[type="submit"] { background:#2d99e0;}