@charset "utf-8";

/*@import url(//cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);*/

@font-face {font-family:"NanumSquare"; src:url('/event/assets/font/NanumSquareL.eot'); src:url('/event/assets/font/NanumSquareL.eot#iefix') format('embedded-opentype'), url('/event/assets/font/NanumSquareL.woff') format('woff'), url('/event/assets/font/NanumSquareL.ttf') format('truetype'); font-weight:300; font-style:normal;}
@font-face {font-family:"NanumSquare"; src:url('/event/assets/font/NanumSquareR.eot'); src:url('/event/assets/font/NanumSquareR.eot#iefix') format('embedded-opentype'), url('/event/assets/font/NanumSquareR.woff') format('woff'), url('/event/assets/font/NanumSquareR.ttf') format('truetype'); font-weight:400; font-style:normal;}
@font-face {font-family:"NanumSquare"; src:url('/event/assets/font/NanumSquareB.eot'); src:url('/event/assets/font/NanumSquareB.eot#iefix') format('embedded-opentype'), url('/event/assets/font/NanumSquareB.woff') format('woff'), url('/event/assets/font/NanumSquareB.ttf') format('truetype'); font-weight:700; font-style:normal;}
@font-face {font-family:"NanumSquare"; src:url('/event/assets/font/NanumSquareEB.eot'); src:url('/event/assets/font/NanumSquareEB.eot#iefix') format('embedded-opentype'), url('/event/assets/font/NanumSquareEB.woff') format('woff'), url('/event/assets/font/NanumSquareEB.ttf') format('truetype'); font-weight:800; font-style:normal;}


/* 글꼴
------------------------------------------------------------------------------- */
h2, h3, h4, h5, h6 {color:#333;}
h3 {font-size:20px;}
h4, h5 {font-size:18px;}
h6 {font-size:16px;}
#contents > h1 {margin-bottom:56px; font-size:60px; color:#333; font-weight:700; text-align:center;}
.course #contents > h1 {margin-bottom:0; font-size:40px; line-height:46px; font-weight:800; letter-spacing:0;}
#contents > h2, div.bg:not(.tabArea) > h2, dl.detail > dt h2 {margin-bottom:39px; font-size:32px; line-height:40px;}
#contents > h2, div.bg:not(.tabArea) > h2:not(:first-child) {margin-top:70px;}
#contents > h2:before, div.bg:not(.tabArea) > h2:before, dl.detail > dt h2:before {width:30px; height:2px; margin-bottom:16px; background:#333; display:block; content:"";}

.subtxt {text-align:center;}
h1 + .subtxt {margin-top:9px;}
.subtxt + .tabmenu, .subtxt + .tabArea {margin-top:24px;}

p.result {margin:57px 0 12px 0;}
p.result strong {font-weight:700; color:#6c7594;}
p.error {margin:5px 0 -7px 0; font-size:14px; font-weight:400; color:#e07b46; text-align:left;}

* {margin:0; padding:0; border:0 none transparent; box-sizing:border-box;}
:before, :after {box-sizing:border-box;}
html, body, pre {font-family:"NanumSquare", sans-serif; font-size:12px; line-height:18px; color:#666; letter-spacing:-0.03em; font-weight:400; /*-webkit-text-size-adjust:100%;*/}
form, fieldset, p, figure {word-break:normal; word-wrap:break-word;}
legend, caption, figcaption {display:none;}
img, fieldset {/*'transparent' for Opera7*/}
menu, ol, ul, li, dl, dt, dd {list-style:none;}
menu, ol, ul, dl, dt {display:block;}
table {width:100%; border-collapse:collapse;}
table th, table td {color:#666; vertical-align:top; word-break:normal; word-wrap:break-word;}
input, select, textarea, button {font-family:"NanumSquare"; font-size:12px; color:#333; font-weight:400; vertical-align:middle;}
textarea {resize:none;}
button, label {cursor:pointer;}
button::-moz-focus-inner {padding:0; border:0;}
a {text-decoration:none; cursor:pointer; transition:color 0.1s linear 0s, background-color 0.1s linear 0s, opacity 0.1s linear 0s !important;}
a:link, a:visited {color:#666;}
a:hover, a:active {color:#333;}
h1, h2, h3, h4, h5, h6 {line-height:1; word-break:normal; word-wrap:break-word;}
h1, h2, h3, h4, h5, h6, strong, th {font-weight:800;}
address, em, i {font-style:normal;}
hr {border-top:1px solid #e5e9ec;}
figure > span {line-height:0; display:block;}
sub {vertical-align:0;}

.fl {float:left !important;}
.fr {float:right !important;}
.fn {float:none !important;}
.clr {clear:both;}

.tl {text-align:left !important;}
.tr {text-align:right !important;}
.tc {text-align:center !important;}

.vt {vertical-align:top;}
.vb {vertical-align:bottom;}
.vm, .btns {vertical-align:middle;}

.nobg {background:none !important;}
.nobd {border:0 none !important;}
.nobl {border-left:0 none !important;}
.nomg {margin:0 !important;}
.nomt {margin-top:0 !important;}
.noml {margin-left:0 !important;}
.nopdt {padding-top:0 !important;}
.nopd {padding:0 !important;}
.nopb {padding-bottom:0 !important;}
.nopl {padding-left:0 !important;}
.nodp {display:none;}
.blind, .hide {position:absolute !important; width:0 !important; height:0 !important; font-size:0; line-height:0; visibility:hidden; overflow:hidden;}

.btnL {margin-top:40px; text-align:left;}
.btnL > *:not(:last-child) {margin-right:3px;}
.btnR {margin-top:40px; text-align:right;}
.btnR > *:not(:first-child) {margin-left:3px;}
.btnC {margin-top:40px; text-align:center;}
.btnC > *:not(:first-child):not(:last-child) {margin:0 3px;}

.btnTop {margin-bottom:8px;}
.btnMid {margin-top:20px; margin-bottom:60px;}
.btnBtm {margin-top:30px !important;}

.tblTop {margin-bottom:20px;}
.tblMid {margin-bottom:40px;}
.tblBtm {margin-top:10px;}

.tabBtm {margin-top:40px;}

.pgMid {margin-top:30px; margin-bottom:30px;}
.pgBtm {margin-top:50px;}

.autoImg {overflow:hidden;}

::-webkit-input-placeholder {color:#aaa;} 
:-moz-placeholder {color:#aaa; opacity:1;}
::-moz-placeholder {color:#aaa; opacity:1;}
:-ms-input-placeholder {color:#aaa !important;}
::-ms-input-placeholder {color:#aaa;}
.placeholder {color:#aaa !important;}


.btn {color:#fff; font-weight:700; vertical-align:middle; display:inline-block;}
.btn.st01 {width:150px; height:50px; font-size:18px; background:#333;}
.btn.st02 {position:relative; height:40px; padding:0 20px; font-size:12px; text-align:left; background:#017c48;}
.btn.st02:before, .btn.st02:after {position:absolute; top:19px; right:20px; width:15px; height:1px; background:#fff; display:block; content:""}
.btn.st02:after {top:12px; right:27px; width:1px; height:15px;}
.btn.st03 {height:40px; padding:0 20px; font-size:12px; text-align:center; background:#017c48;}

.ico {font-size:0; background:none; background-position:50% 50%; background-repeat:no-repeat; vertical-align:middle; display:inline-block;}
button.ico {overflow:hidden;}

.table {margin-top:20px; border-top:2px solid #017c48;}
.table td {padding:8px 0; text-align:center; border-bottom:1px solid #ddd;}
.table td:nth-of-type(2) {text-align:left;}
.table td.none {padding:150px 0; vertical-align: middle;}

footer {padding:20px;background:#333;}
footer p {color:#fff;}
footer p a {color:#fcaf15!important;}
footer .st02 {width:100%; overflow: hidden;margin:auto;}

.checkArea {padding:15px 5px 15px 20px; background:#017c48;}
input[type="checkbox"] {width:17px !important; height:17px !important; margin-right:-19px !important; line-height:0; border:0; vertical-align:middle; display:inline-block; opacity:0;}
input[type="checkbox"]:focus + label {/*outline:1px dotted #666;*/}
input[type="checkbox"] + label {position:relative; padding-left:35px; margin-right:15px; line-height:22px; text-align:left !important; vertical-align:middle; display:inline-block; transition:border 0.2s linear 0s, color 0.2s linear 0s;}
input[type="checkbox"] + label:last-child {margin-right:0;}
input[type="checkbox"]:checked + label {color:#333;}
input[type="checkbox"] + label:before, input[type="checkbox"] + label:after {vertical-align:middle; display:inline-block; content:""; transition:border 0.2s linear 0s, color 0.2s linear 0s;}

input[type="checkbox"] + label {font-size:12px;}
input[type="checkbox"] + label:before {position:absolute; left:0; top:40%; width:24px; height:24px; margin:-8.5px 7px 0 0; background-image:url(/m/event/images/check_off.png); background-repeat: no-repeat; background-size:100%;}
input[type="checkbox"] + label.st01 {padding-left:17px; text-indent:-9999px;}
input[type="checkbox"]:checked + label:before { background-image:url(/m/event/images/check_on.png); background-repeat: no-repeat;  background-size:100%;}
input[type="checkbox"]:checked + label:after {color:#fff;}
input[type="checkbox"] + label.em01 { color:#fff;}

select {width:100%; height:40px; padding:0 50px 0 20px; border:1px solid #ddd; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url("/images/common/arr_select01.png") calc(100% - 20px) 50% no-repeat; background-size:14px 8.5px;} 
select::-ms-expand {display:none;}
select:focus {background-image:url("/images/common/arr_select02.png");}

/*paging*/
.paging{ text-align:center; font-size:0;margin:20px 0 0px 0}
.paging *{vertical-align:top}
.paging a{ display:inline-block;border:1px solid #e3e3e3; width:30px; height:30px; line-height:30px; font-size:12px; text-decoration:none;}
.paging a:hover,
.paging a:focus{ border:1px solid #008547;}
.paging a.on{ border:1px solid #e3e3e3;background:#008547; color:#ffffff;;}
.paging > a.btn.first{ background:url("/images/common/btn_paging_first.gif") no-repeat center center;}
.paging > a.btn.last{ background:url("/images/common/btn_paging_last.gif") no-repeat center center;}
.paging > a.btn.prev{ background:url("/images/common/btn_paging_prev.gif") no-repeat center center; margin-left:3px;}
.paging > a.btn.next{ background:url("/images/common/btn_paging_next.gif") no-repeat center center; margin-right:3px;}
.paging > .number{ display:inline-block;padding:0 3px}
.paging > .number > a{margin:0 3px}

/* 팝업 */
.mask {background:#000; opacity:0.60; z-index:300;}
.iframe_layer {position:absolute; border:none; background-color:transparent; z-index:300;}
.popup {position:fixed; top:0; left:0; width:100%; height:100vh; display:none; overflow:hidden; z-index:350;}
.popup .ico.close {position:absolute; top:15px; right:15px; width:13px; height:13px; background-image:url("/images/common/btn_close.png"); background-size:100%;}
.popup .popCont {width:100%; height:100%; padding:45px 15px; background:#fff;}

/* 당첨자발표 */
#popPrize .scroll {height:calc(100vh - 195px); margin:20px -15px 0 -15px; padding:0 15px; overflow-y:auto;}
#popPrize .scroll .table {margin-top:0;}


/* page
------------------------------------------------------------------------------- */
.wrapper {min-height:1500px;background-image:url(/m/event/images/event_bg_190731.jpg); background-repeat: repeat-x; background-position:top center;}
body.noScroll, #wrapper.noScroll {height:100vh; overflow-y:hidden;}
.eventVisual {width:100%; margin:auto;}
.eventVisual img {width:100%;}
.contents {width:100%; }
.contents > .st01 {padding:1px 0 50px 0;background:#f8f8f8;}
.contents > .st02 {padding:10px 0 50px 0;}
.contents > .st03 {padding:1px 0 50px 0;background:#02854b;}
.contents .step01,.contents .step02,.contents .step03,.contents .step04,.contents .step05 {width:320px; margin:auto;}
.contents h2 {position:relative; padding:3px 0 0 35px; margin:50px 0 20px 0; font-size:22px; font-weight:600; color:#333;}
.contents h2.st01 {color:#ffdb00; font-size:28px; }
.contents h2 span {color:#017c48;}
.contents h2:before {position:absolute; left:0px; top:0px; width:25px; height:25px; padding-top:3px; background-image:url(/m/event/images/bul_type01.png); background-repeat:no-repeat; background-size:100%; content:""; display:block;}
.contents h2.st01:before { left:0px; top:2px; width:30px; height:26px; background-image:url(/m/event/images/bul_type02.png); }


.contents .title {margin:20px 0 10px 0; padding:25px 0; font-size:18px; text-align:center; color:#333; font-weight:600; background:#ffdb00;}
.contents .answer {padding:25px 30px; width:100%; font-size:14px; color:#333; border:2px solid #eee;}
.contents .num {color:#333; font-weight: 600}
.contents .step02 .regi {margin-top:30px; padding:15px 0;border-top:1px solid #ccc; border-bottom:1px solid #ccc; overflow:hidden;}
.contents .step02 .regi input {padding:15px;}
.contents .step02 .regi dt,.contents .step02 .regi dd {position:relative; float:left;}
.contents .step02 .regi dt {width:20%;padding: 10px 0 0 10px; font-weight: 600;}
.contents .step02 .regi dd {width:80%;}
.contents .step02 .regi dd input {width:100%;}
.contents .step02 .regi dt:nth-of-type(2) {margin-top:10px;}
.contents .step02 .regi dd:nth-of-type(2) {margin-top:10px;text-align:right;}
.contents .step02 .regi dd:nth-of-type(2) input {width:30%;}
.contents .step02 .regi dd:nth-of-type(2) span {width:5%; text-align:center; display:inline-block;}
.contents .step02 .regi dt:before {position:absolute; left:0px; top:15px; width:5px; height:5px; background-image:url(/m/event/images/bul_type03.png); background-repeat:no-repeat; background-size:100%; content:""; display:block;}

.contents .step02 .regist {margin-top:30px; padding:10px 0 0 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; overflow:hidden;}
.contents .step02 .regist input {padding:10px;}
.contents .step02 .regist dt, .contents .step02 .regist dd {position:relative; margin-bottom:10px;}
.contents .step02 .regist dt {clear:both; float:left; width:20%; height:34px; padding-left:10px; font-weight:600; align-items:center; display:flex;}
.contents .step02 .regist dt:before {position:absolute; left:0px; top:50%; width:5px; height:5px; margin-top:-2.5px; background-image:url(/m/event/images/bul_type03.png); background-repeat:no-repeat; background-size:100%; content:""; display:block;}
.contents .step02 .regist dd {height:auto; overflow:hidden;}
.contents .step02 .regist dd input {width:100%; height:34px;}
.contents .step02 .regist dd:nth-of-type(2) {text-align:right;}
.contents .step02 .regist dd:nth-of-type(2) input {width:30%;}
.contents .step02 .regist dd:nth-of-type(2) span {width:5%; text-align:center; display:inline-block;}
.contents .step02 .regist dd.fl.address {width:calc(80% - 62px);}
.contents .step02 .regist dd.btns .btn.st03 {width:62px; height:34px; padding:0 10px;}
.contents .step02 .regist dd.btns + dd {margin-left:20%;}

.contents .step03 .privacy {padding:20px; background:#fff;}
.contents .step03 .privacy p {position:relative; padding-left:15px; font-size:12px!important;}
.contents .step03 .privacy p:before {position:absolute; left:0px; top:0px; width:10px; height:10px; content:"-"; display:inline-block;}
.contents .step03 .privacy h3:first-child {padding-top:0px;}
.contents .step03 .privacy h3 {padding:25px 0 5px 0; font-weight: 400; font-size:12px!important; }
.contents .step03 > p {padding-top:10px;}
.contents .table02 {margin-top:10px; width:100%; border-top:2px solid #333;  border-bottom:2px solid #eee;}
.contents .table02 th,.contents .table02 td { padding:10px 0 10px 10px; border-top:1px solid #eee;}
.contents .table02 tr:first-child td {border-top:1px solid #eee;}
.contents .table02 tbody th {padding-left:0px; background:#eee; border-top:1px solid #fff; font-weight:700; text-align:center; vertical-align: middle;}

.contents .step04 h2 {margin:20px 0 0 0;}
.contents .step04 .all {float:right; margin-top:-16px;}
.contents .step04 .all span {color:#017c48;}
.contents .step04 .btn.st02 {width:100%;}
.contents .step05  li:first-child {padding-top:0px;}
.contents .step05  li {position:relative; padding:5px 15px 5px 15px; color:#fff;}
.contents .step05  li:before {position:absolute; left:0px; top:4px; width:10px; height:10px; content:"-"; display:inline-block;}
.contents .step05  li:last-child:before{display:none;}