@charset "utf-8";
/*
	Aoutor : 피터팬 랩(peterpanlab.com) & 네오컴즈 (neocoms.com)
	Published by I-Saac,Kim

*/

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/* Common */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none
}
body, html {
    width: 100%;
    height: 100%;
    min-width: 1200px;
}
body, input, textarea, select, button, table {
    font-family: '나눔고딕', NanumGothic; !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased
}
img, fieldset, button {
    border: 0
}
ul, ol {
    list-style: none
}
em, address {
    font-style: normal
}
a {
    text-decoration: none
}
a:hover, a:active, a:focus {
    text-decoration: none
}
html, body{margin:0; padding:0; background:#fff;}

/* content-container */
div.content-container{position:relative; min-width:1200px; max-width:1920px; margin:77px auto 0px auto; overflow:hidden; z-index:1;}
div.content-body{position:relative; width:1200px; margin:0px auto 0px auto;}
/* header */
div.content-container > header{position:fixed; width:100%; z-index:80; left:calc(50% - 960px); top:0px; width:1920px;}
div.content-container > header > nav.gnb{position:relative; float:left; width:100%; height:77px; overflow:hidden;}
div.content-container > header > nav.gnb > ul{position:relative; float:left; width:50%; height:77px; overflow:hidden; background:#ffd401; margin:0px;}
div.content-container > header > nav.gnb > ul li{position:relative; float:left; overflow:hidden; width:50%; cursor:pointer;}
div.content-container > header > nav.gnb > ul li a{position:relative; float:left; width:100%;}
div.content-container > header > nav.gnb > ul:last-child{background:#959595; padding-right:calc(50% - 600px);}
div.content-container > header > nav.gnb > ul:first-child{padding-left:calc(50% - 600px);}

/* footer */
div.content-container > footer{position:relative; width:100%; float:left; background:#fff; }

nav.fnb{position:relative; width:100%; float:left; overflow:hidden; margin:20px 0px 20px 0px; text-align:center;}
nav.fnb ul{position:relative; display:inline-table;}
nav.fnb ul li{position:relative; float:left; margin:0px 20px 0px 20px;}

nav.snb{position:absolute; right:20px; top:50px; overflow:hidden; display:inline-table;}
nav.snb ul{position:relative; flaot:right; width:150px;}
nav.snb ul li{position:relative; float:left; margin:0px 5px 0px 5px;}

/* event-common */
div.content-wrapper{position:relative; float:left; width:100%; overflow:hidden; z-index:2;}
div.content-wrapper div.content-group{position:relative; float:left; width:100%; overflow:hidden; z-index:3;}

/* event 1 */
div.event-1-header{position:relative; float:left; width:100%; height:1190px; overflow:hidden; background:url(../img/event_1_header.jpg) no-repeat center center;}
div.event-1-footer{position:relative; float:left; width:100%; height:399px; overflow:hidden; background:url(../img/event_1_footer.jpg) no-repeat center center; z-index:12;}

div.event-1-body{position:absolute; bottom:399px; left:0px; width:100%; z-index:10;}
div.event-1-body > div.content-body{width:737px;}
a.handon-mall{position:absolute; right:-250px; top:-150px; z-index:15;}


.swiper-pagination-bullet{width:16px !important; height:16px !important;}

/* evnet-2 */
div.event-2-header{position:relative; float:left; width:100%; height:694px; overflow:hidden; background:url(../img/event_2_header.jpg) no-repeat center center;}
div.event-2-footer{position:relative; float:left; width:100%; height:390px; overflow:hidden; background:url(../img/event_2_footer.jpg) no-repeat center center; z-index:12;}
div.event-2-body{position:relative; float:left; width:100%; height:1520px; overflow:hidden; background:url(../img/event_2_bg.jpg) no-repeat center center;}


/* evnet-3 */
div.event-3-header{position:relative; float:left; width:100%; height:1100px; overflow:hidden; background:url(../img/event_3_header.jpg) no-repeat center center;}
div.event-3-footer{position:relative; float:left; width:100%; height:364px; overflow:hidden; background:url(../img/event_3_footer.jpg) no-repeat center center; z-index:12;}

div.event-3-body{position:relative; float:left; width:100%; overflow:hidden; background:url(../img/event_3_bg.jpg) center center;}

/* event-status-table */
div.event-status-table{position:relative; width:800px; margin:15px 200px 30px 200px; height:355px; border:3px solid #111; overflow:hidden; border-radius:10px;}
div.event-status-table > table.status-header{position:relative; float:left; width:100%; overflow:hidden;}
div.event-status-table > table.status-header tr th{border-bottom:1px solid #111; border-right:1px solid #cdcdcd; background:#f8f8f8; text-align:center !important; font-size:18px; color:#111; font-weight:bold; height:50px; line-height:100%; padding:16px 0px 16px 0px;}
div.event-status-table > table.status-header tr th:last-child{border-right:none !important;}
div.event-status-table > div.status-wrap{position:relative; float:left; width:100%; height:calc(100% - 50px); background:#fff; overflow-y:scroll; overflow-x:hidden;}
div.event-status-table > div.status-wrap table.status-body{position:relative; float:left; width:100%; overflow:hidden;}
div.event-status-table > div.status-wrap table.status-body tr td{text-align:center; padding:10px; font-size:14px; color:#666; border-bottom:1px solid #cdcdcd; border-right:1px solid #e8e8e8;}

div.button-area{position:relative; float:left; width:100%; text-align:center;}
div.button-area > img{cursor:pointer;}

/* modal-container */
div.modal-container{position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:visible; background:rgba(0,0,0,0.6); z-index:81; display:none;}

div.modal-container div.modal-wrapper{position:relative; width:1200px; margin:150px auto 0px auto; border-radius:20px; background:#fff; box-shadow:rgba(0,0,0,0.05) 3px 3px 8px; overflow:hidden; display:none;}

div.modal-container div.modal-wrapper > div.closer{position:absolute; right:20px; top:20px; z-index:82; cursor:pointer;}

div.modal-container div.modal-wrapper div.event-header{position:relative; float:left; width:100%; overflow:hidden;}

div.modal-container div.modal-wrapper div.event-footer{position:relative; float:left; width:100%; padding:40px 0px 40px 0px; text-align:center; border-top:1px solid #ddd; overflow:hidden;}

div.event-2-modal div.event-body{position:relative; float:left; padding:20px 45px 20px 45px; width:100%; overflow:hidden;}

/* quiz-wrapper */
div.quiz-wrapper{position:relative; float:left; width:800px; margin:0px 150px 50px 150px; overflow:hidden;}

div.quiz-wrapper div.quiz-item{position:relative; float:left; width:100%; margin:0px 0px 30px 0px;}

div.quiz-wrapper div.quiz-item > h3{position:relative; float:left; width:100%; margin:0px 0px 20px 0px; overflow:hidden;}
div.quiz-wrapper div.quiz-item > h3 img.icon{position:relative; float:left;}
div.quiz-wrapper div.quiz-item > h3 span{position:relative; float:left; display:block; font-size:24px; font-weight:bold; color:#333; padding:25px 20px 25px 20px; letter-spacing:-0.5px;}

/* check-box */
div.check-box{position:relative; border:3px solid #333; padding:1px; width:28px; height:28px; overflow:hidden; cursor:pointer;}
div.check-box img.checker{float:left; display:none;}

/* quiz-1 */
div.quiz-wrapper div.quiz-item.quiz-1 div.quiz-answer{position:absolute; right:0px; top:15px;}

div.quiz-wrapper div.quiz-item.quiz-1 div.quiz-answer input[type="text"]{position:relative; border:3px solid #333; font-size:16px; color:666; padding:10px; width:120px; float:left; line-height:100%;}
div.quiz-wrapper div.quiz-item.quiz-1 div.quiz-answer span{position:relative; padding:10px; float:left; margin:0px; font-size:20px; padding:10px 10px 10px 15px; line-height:100%; font-weight:bold; color:333; display:block;}

div.quiz-wrapper div.quiz-item.quiz-1 div.quiz-answer-item{position:relative; float:left; width:100%; overflow:hidden;}

/* quiz-2 */
div.quiz-wrapper div.quiz-item.quiz-2 div.quiz-youtube{position:relative; float:left; background:#000; width:444px; height:244px;}

div.quiz-wrapper div.quiz-item.quiz-2 div.quiz-answer{position:relative; float:left; margin-left:40px; overflow:hidden; width:300px;}
div.quiz-wrapper div.quiz-item.quiz-2 div.quiz-answer label{position:relative; float:left; width:100%; overflow:hidden; margin:0px 0px 20px 0px;}
div.quiz-wrapper div.quiz-item.quiz-2 div.quiz-answer label div.check-box{float:left;}
div.quiz-wrapper div.quiz-item.quiz-2 div.quiz-answer label span{float:left; font-size:20px; color:#333; padding-left:10px;}

/* quiz-3 */
div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer{position:relative; float:left; width:100%; margin:0px 0px 40px 0px;}
div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer img.icon{position:relative; float:left; margin:0px 15px 0px 20px;}
div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer > span{position:relative; float:left; font-size:20px;}

div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer div.quiz-ox{position:absolute; right:0px;}
div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer div.quiz-ox div.check-box{float:left; margin-left:10px;}
div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer div.quiz-ox span{float:left; font-size:20px; color:#333; padding:0px 10px 0px 10px;}

div.quiz-wrapper div.quiz-item.quiz-3 div.quiz-answer > span div{float:right; margin:-10px 0px 0px 15px; padding:10px 20px 10px 20px; background:#ffc000; color:#fff; font-weight:bold; cursor:pointer; border-radius:5px;}

/* submit-wrapper */
div.submit-wrapper{position:relative; float:left; margin:30px 0px 30px 0px; padding:0px 150px 0px 150px; overflow:hidden;}

div.submit-wrapper div.submit-header{position:relative; float:left; width:100%; font-size:20px; margin:10px 0px 20px 0px; text-align:center;}

div.submit-wrapper div.form-wrapper{position:relative; float:left; width:100%; padding:20px; background:#e0e0e0; border:1px solid #cdcdcd; border-radius:10px; margin:10px 0px 30px 0px; text-align:center;}

div.submit-wrapper div.form-wrapper div.form-item{position:relative; display:inline-table; margin:0px 10px 0px 10px; overflow:hidden;}
div.submit-wrapper div.form-wrapper div.form-item label{position:relative; float:left; padding:14px 15px 10px 10px; font-size:20px; margin:0px;}
div.submit-wrapper div.form-wrapper div.form-item input[type="text"]{position:relative; float:left; border:3px solid #333; padding:10px; font-size:20px; width:200px;}

div.agree-wrapper{position:relative; float:left; width:100%; margin:10px 0px 10px 0px; overflow:hidden;}
div.agree-wrapper div.agree-header{position:relative; float:left; width:100%; overflow:hidden;}
div.agree-wrapper div.agree-header label{position:relative; float:left; width:100%; overflow:hidden;}
div.agree-wrapper div.agree-header label div.check-box{float:left;}
div.agree-wrapper div.agree-header label h3{position:relative; float:left; font-size:20px; font-weight:bold; margin:3px 0px 0px 10px;}

div.agree-wrapper div.agree-body{position:relative; float:left; padding:15px; width:100%; font-size:12px; color:#666;}
div.agree-wrapper div.agree-body ol li{margin-left:15px; list-style-type:decimal; margin-bottom:7px;}

div.agree-wrapper div.agree-body ul li{margin-left:15px; list-style-type:disc; margin-bottom:7px;}

/* modal-2 */
div.event-3-modal div.event-body{position:relative; float:left; padding:20px 45px 20px 45px; width:100%; overflow:hidden;}
div.event-3-modal div.event-body h2{position:relative; float:left; width:100%; padding:0px; text-align:center;}

/* stroy-wrapper */
div.story-wrapper{position:relative; float:left; padding:20px 150px 30px 150px; width:100%; overflow:hidden;}
div.story-wrapper div.story-header{position:relative; float:left; width:100%; overflow:hidden; margin-bottom:10px;}
div.story-wrapper div.story-header label{position:relative; float:left; display:block;}
div.story-wrapper div.story-header label:nth-child(2){float:right;}
div.story-wrapper div.story-header label span{position:relative; float:left; font-size:20px; color:#333; padding:10px 10px 10px 0px;}
div.story-wrapper div.story-header label input{position:relative; float:left; padding:10px; color:#666; font-size:16px; border:3px solid #333;}

div.story-wrapper div.story-body{position:relative; float:left; margin:10px 0px 10px 0px; overflow:hidden; width:100%;}
div.story-wrapper div.story-body textarea{position:relative; float:left; width:100%; border:3px solid #333; background:#f8f8f8; font-size:20px; height:100px; padding:15px; resize:none;}

.step-box{margin-bottom:30px !important}
.step-box table, td, th {border: 1px solid #ddd;}
.step-box table {border-collapse: collapse;width: 100%;margin:auto;font-size:12px;}
.step-box th, td {text-align: center;padding: 8px !important;}
.step-box tr:nth-child(even){background-color: #f8f8f88a}
.step-box th {background-color: #f2f2f2;color: black;}
#result_modal div.modal-container div.modal-wrapper div.modal-bodys h2{margin: 20px 0px 20px 0px}
.event-999-modal{width:900px !important}
.event-999-modal div.story-wrapper{padding:20px 30px 30px 30px}
#result_modal .modal-header img{max-width:100%;}
#result_modal div.modal-container div.modal-wrapper div.modal-bodys{padding:0px 50px 0px 50px}
#result_modal .modal-title{width:100%;margin-top:20px;}
#result_modal .modal-title img{display:block;margin-left:auto;margin-right:auto;}
#result_modal .modal_button{background-color: #f2f2f2;border: none;color: #3c3c3c;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;width:100%;font-weight:bold;margin-bottom:50px;}