@charset "utf-8";
/* Styles
-------------------------------------------------------------- */
body, html {width:100%; height:100%; background:#01172a;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; font-size:100%;}
#wrap .btn {cursor: default;}

/* 공통 */
#wrap { position: relative; top: 0; left: 0; margin: 0 auto; width: 100%; min-width: 1280px; overflow: hidden; }

#wrap .innerWrap { position: relative; margin:0 auto; left: 0; top: 0; margin:0 auto; width: 1280px;  }

.tab { z-index: 100; position: absolute; top: 855px; left: 50%; margin-left: -958px; width: 1920px; min-width: 1280px; height: 97px;  }
.tab .list li { position: relative; float: left; width: 600px; height: 100px; cursor: pointer;}
.tab .list li a { position: absolute; top: 0; left: 0; z-index: 10;  display: block; width: 639px; height: 100px; text-indent: -9999px; text-indent: -9999px; background: url(../images/tab_off.png) no-repeat;  }
.tab .list li._01 a { background-position-y: 0px; }
.tab .list li._02 a { background-position-y: -110px; }

.tab .list li a:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 639px; height: 0px; background: url(../images/tab_on.png) 0 0 no-repeat; transition: all 0.3s; }
.tab .list li.on a::after, .tab .list li a:hover::after { width: 100%; height: 100%; transition: all 0.3s; }
.tab .list li._01 a::after { background-position-y: 0px; }
.tab .list li._02 a::after { background-position-y: -110px; }

.header { position: relative; margin: 0 auto; width: 100%; max-width: 1920px; overflow: hidden; height: 950px; background: url(../images/bg_header.jpg) center 0  no-repeat;}
.header .btn.play { z-index: 10; position: absolute; top: 550px; left: 930px; }
.header .btn.play a { transition:.3s ease filter; display: block; width: 230px; height: 230px; text-indent: -9999px; background: url(../images/btn_play.png) no-repeat; }
.header .btn.play a:hover {filter: brightness(1.3);}

.contentsWrap { position: relative; top: 0;  margin-left: -920px; height: 100%; margin: 0 auto; width: 100%; overflow: hidden; }
.contentsWrap .contents { z-index: 0; position: absolute; left: 50%; margin-left: -960px; width: 1920px;  opacity: 0; transition: opacity 1s; }
.contents.active { z-index: 1; opacity: 1; transition: opacity 0.5s; }

#tabContents1 { height: 4345px; background: url(../images/bg_tab_01.jpg) center 0 no-repeat;}
#tabContents1 .innerWrap { height: 4252px; }

#tabContents1 .voice._01 { z-index: 1; position: absolute; top: 103px; left: 151px; }
#tabContents1 .voice._02 { z-index: 1; position: absolute; top: 103px; left: 1070px; }

#tabContents1 .voice._01 button { position: absolute; display: block; width: 60px; height: 60px; background: url(../images/btn_voice1.png) no-repeat; text-indent: -9999px; }
#tabContents1 .voice._02 button { position: absolute; display: block; width: 60px; height: 60px; background: url(../images/btn_voice2.png) no-repeat; text-indent: -9999px; }
#tabContents1 .voice._01 button:hover, #tabContents1 .voice._01.on button { /*background: url(../images/btn_voice1_on.png) no-repeat;*/ background-position-y:-60px; }
#tabContents1 .voice._02 button:hover, #tabContents1 .voice._02.on button { /*background: url(../images/btn_voice2_on.png) no-repeat;*/ background-position-y:-60px; }

#tabContents1 .btn.link { position: absolute; top: 3994px; left: 464px;}
#tabContents1 .btn.link a { display: block; width: 352px; height: 86px; background: url(../images/btn_link.png) no-repeat; text-indent: -9999px; }
#tabContents1 .btn.link a::after { position: absolute; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/btn_link_on.png) no-repeat; opacity: 0; transition: opacity 0.2s; }
#tabContents1 .btn.link a:hover::after { opacity: 1; }

#tabContents2 { height: 1070px; background: url(../images/bg_tab_02.jpg) center 0 no-repeat;}
#tabContents2  > .innerWrap { height: 3507px; }
#tabContents2  > div { position: relative;  }
#tabContents2 .event1 { height: 870px; }
#tabContents2 .event2 { height: 970px; }
#tabContents2 .event2 .missionInfo { position: absolute; top: 422px; left: 32px;  }
#tabContents2 .event2 .missionInfo .parsing { width: 200px; text-align: center; }
#tabContents2 .event2 .missionInfo .parsing img { margin: 0 3px }
#tabContents2 .popList { position: absolute; top: 500px; left: 34px; }
#tabContents2 .popList button { display: block; width: 185px; height: 47px; background: url(../images/btn_popList.png) no-repeat;  text-indent: -9999px; }
#tabContents2 .popList button::after { position: absolute; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/btn_popList_on.png) no-repeat; opacity: 0; transition: opacity 0.2s; }
#tabContents2 .popList button:hover::after { opacity: 1; }

#tabContents2 .event2 .getArea { position: absolute; top: 336px; left: 259px; width: 1100px;  }
#tabContents2 .event2 .getArea li { position: relative; float: left; margin: 149px 2px 0 0;}
#tabContents2 .event2 .getArea li.type7,
#tabContents2 .event2 .getArea li.type8,
#tabContents2 .event2 .getArea li.type9,
#tabContents2 .event2 .getArea li.type10,
#tabContents2 .event2 .getArea li.type11,
#tabContents2 .event2 .getArea li.type12 { margin: 164px 2px 0 0; }
#tabContents2 .event2 .getArea li .btn { position: relative; }
#tabContents2 .event2 .getArea li .btn button { display: block; width: 169px; height: 41px; background: url(../images/btn_getItem_on.png) no-repeat;  text-indent: -9999px; }
#tabContents2 .event2 .getArea li .btn.noneGet button { background: url(../images/btn_getItem_off.png) no-repeat; }
#tabContents2 .event2 .getArea li .btn.get button::after { position: absolute; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/btn_getItem_over.png) no-repeat; opacity: 0; transition: opacity 0.2s; }
#tabContents2 .event2 .getArea li .btn.get button:hover::after { opacity: 1; }
#tabContents2 .event2 .getArea li .detail { position: absolute; top: -152px; left: 133px;}
#tabContents2 .event2 .getArea li.type11 .detail a,
#tabContents2 .event2 .getArea li.type12 .detail a { display: block; width: 36px; height: 36px; background: url(../images/btn_detail.png) no-repeat; text-indent: -9999px; }

#tabContents2 .event3 { height: 725px; color: #fff;}
#tabContents2 .event3 .applyInfo { position: absolute; top: 396px; left: 65px;  }
#tabContents2 .event3 .applyInfo .parsing { width: 70px; text-align: center; }
#tabContents2 .event3 .applyDoneInfo { position: absolute; top: 396px; left: 165px; }
#tabContents2 .event3 .applyDoneInfo .parsing { width: 70px; text-align: center; }
#tabContents2 .event3 .parsing img { margin: 0px 2px; }
#tabContents2 .event3 .btn { position: absolute; top: 365px; left: 290px;}
#tabContents2 .event3 .btn button { display: block; width: 235px; height: 71px; background: url(../images/btn_send.png) no-repeat; text-indent: -9999px; }
#tabContents2 .event3 .btn button::after { position: absolute; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/btn_send_on.png) no-repeat; opacity: 0; transition: opacity 0.2s; }
#tabContents2 .event3 .btn button:hover::after { opacity: 1; }

#tabContents2 .event4 { height: 942px; }
#tabContents2 .event4 .btn { position: absolute; top: 674px; }
#tabContents2 .event4 .new {  left: 218px;  }
#tabContents2 .event4 .return { left: 828px;  }
#tabContents2 .event4 .btn a {  display: block; width: 235px; height: 67px; text-indent: -9999px;}

#tabContents2 .event4 .return a { background: url(../images/btn_return.png) no-repeat; }
#tabContents2 .event4 .return a::after { position: absolute; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/btn_return_on.png) no-repeat; opacity: 0; transition: opacity 0.2s; }
#tabContents2 .event4 .new a { background: url(../images/btn_new.png) no-repeat; }
#tabContents2 .event4 .new a::after { position: absolute; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/btn_new_on.png) no-repeat; opacity: 0; transition: opacity 0.2s; }
#tabContents2 .event4 a:hover::after { opacity: 1; }

/*  레이어 팝업 */
.overlay {z-index: 1999; position:fixed; left: 0;top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter:alpha(opacity = 50); display:none;}
.layerPop {z-index:3000; position: fixed; top: 50%; left: 50%;  }
.layerPop .close {position: absolute; right: 0px; top: 0px; }
.layerPop .close button {display: block; text-indent: -9999px; width: 49px;height: 49px; background-color: transparent; }
.layerPop .confirm {position: absolute; bottom: 24px; left: 191px; }
.layerPop .confirm button {display: block; text-indent: -9999px; width: 128px;height: 41px; }

.customSelect {position: absolute; left: 54px; top: 165px; width: 404px; height: 30px; }
.customSelect .txt {padding-bottom:0; width:100%; height:100%; line-height:31px; background:none; text-indent:10px; position:absolute; left:0; top:0; _display:none; color:#172d55; font-size:13px; text-align:left; }
.customSelect select{width:100%; height:100%; cursor:pointer; position:relative; opacity:0; filter:alpha(opacity=0); }

#choiceChar {margin:-196px 0 0 -255px; width: 511px;height: 391px; background:url(../images/popChoiceChar.png) no-repeat; }
#itemClear {margin:-196px 0 0 -255px; width: 511px;height: 391px; background:url(../images/popClear.png) no-repeat; }

#winList {margin:-255px 0 0 -265px; width: 531px;height: 511px;  background: url(../images/img_winList.png) no-repeat;}
#winList .tableArea {padding:0 0 0 1px; margin: 146px 0 0 42px; width: 450px; max-height: 250px; overflow-y: scroll;overflow-x: hidden; }
#winList .tableArea table {width: 435px; border-collapse: collapse; }
#winList .tableArea table .noList {text-align: center;}
#winList .tableArea table tr { border: 1px solid #a2abba; }
#winList .tableArea table td {padding: 0 5px; height: 49px; color: #061c2e;  text-align: left; font-size:12px;  }
#winList .tableArea table .date {padding:0;color:#061c2e; text-align: center; font-weight: normal;}
#winList .tableArea table .nick {padding:0; color:#061c2e; text-align: center; }
#winList .confirm { display: none; }

#popMovie {position: absolute; top: 100px; left: 50%; margin:0 0 0 -640px; width: 1282px;height: 778px; background-image: url(../images/bg_movie.png); background-repeat:  no-repeat;}
#popMovie .youtubeArea {position: absolute; top: 57px; left: 1px; width: 1280px; height: 720px;background:#000; cursor: pointer; }
#popMovie .close { left: 1232px; display: block; width: 50px; height: 50px;}
#popMovie .close button {position:absolute; top: 0px; right: 0; display: block; width: 50px; height: 50px;}
#popMovie .btnArea { position: relative; top: 0; left: 0px; }
#popMovie .btnArea .btn { float: left; }
#popMovie .btnArea .btn button { display: block; width: 241px; height: 65px; text-indent: -9999px;  background:url(../images/bg_link.png) no-repeat;}

#popDetail_1 { margin: -157px 0 0 -248px; width: 496px; height: 314px; background:url(../images/pop_detail_1.png) no-repeat;}
#popDetail_2 { margin: -157px 0 0 -378px; width: 756px; height: 314px; background:url(../images/pop_detail_2.png) no-repeat;}
#popDetail_1 .close,
#popDetail_2 .close { right: 2px; }