@charset "utf-8";


/* 시안 확인용 
html,body{width:100%;height:100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,button{font-family:'malgun gothic', '맑은 고딕', '돋움', 'dotum', 'gulim', 'Verdana', 'Arial', 'Tahoma', 'Helvetica', 'sans-serif';font-size:12px;color:#383d41}
body{background-color:#fff;text-align:center;*word-break:break-all;-ms-word-break:break-all}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:middle}
img{vertical-align:top}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0;border:0;}
a{color:#222;text-decoration:none}
a:hover{color:#390;text-decoration:none}
button *{position:relative}
button img{left:-3px;*left:auto}
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
hr{display:none}
legend{*width:0}
input::-ms-clear{display:none}
table{width:100%;border-collapse:collapse;border-spacing:0;empty-cells:show;} */

*, *:before, *:after {}
caption, legend, hr{position:absolute;top:0;left:-9999px;visibility:hidden;overflow:hidden;line-height:0;margin:0;padding:0;}
#sideEvtNav {position: fixed; top:0; right:0; width:180px; height:100%; background:#1b1b1b; z-index:1000; transition:all 0.2s;}
#sideEvtNav .sen-inner {position:relative;}
#sideEvtNav .nav-close {position:absolute; top:0; left:-60px;}
#sideEvtNav .nav-close a {display:block; width:60px; height:60px; background:url(../images/side_nav/side_btns.png) no-repeat -190px 0px; text-indent:-9999em;}
#sideEvtNav.open {right:-174px;}
#sideEvtNav.open .nav-close a {background:url(../images/side_nav/side_btns.png) no-repeat -252px 0px;}

#sideEvtNav .gamestart {position:relative; width:180px; height:119px; margin-bottom:1px;}
#sideEvtNav .gamestart .btn-gs {display:block; width:180px; height:119px; background:url(../images/side_nav/btn_gs.png) no-repeat; text-indent:-9999em; transition:all 0.3s;}
#sideEvtNav .gamestart .btn-gs:hover {background:url(../images/side_nav/btn_gs_over.png) no-repeat; text-indent:-9999em;}
#sideEvtNav .gamestart .problem {position:absolute;left:0;right:0;bottom:0;padding:10px 0 0;height:24px;background:rgba(0,0,0,0.7); text-align:center;font-size:12px;}
#sideEvtNav .gamestart .problem a{color:#fff;}
#sideEvtNav .gamestart .problem a:hover{text-decoration:underline;}
#sideEvtNav .gamestart .problem .p-layer {display:none;position:absolute;left:-233px;top:0;width:228px;height:135px;background:#fff;border:1px solid #d7d7d7;}
#sideEvtNav .gamestart .problem .p-layer:after{content:''; position:absolute;right:-7px;top:11px;width:7px;height:12px;background:url(../images/side_nav/side_btns.png) no-repeat -347px 0px;}
#sideEvtNav .gamestart .problem .p-layer p{margin:0 0 10px;padding:15px 0 0;line-height:1.4;color:#383d41;}

#sideEvtNav .links-btn {margin-bottom:11px;}
#sideEvtNav .links-btn:after {content:""; display:block; clear:both;}
#sideEvtNav .links-btn a {display:block; float:left; width:89px; height:36px;background:url(../images/side_nav/side_btns.png) no-repeat -91px 0px; text-indent:-9999em;}
#sideEvtNav .links-btn a:first-child {width:90px; margin-right:1px;background:url(../images/side_nav/side_btns.png) no-repeat 0px 0px;}

#sideEvtNav .evt-lists {width:162px; margin:0 auto; text-align:center; overflow-y:auto; overflow-x:hidden;}
#sideEvtNav .evt-lists ul li {margin-bottom:10px; display:inline-block; box-sizing:border-box; -webkit-box-sizing:border-box;}
#sideEvtNav .evt-lists ul li a {position:relative; display:block; opacity:0.5; width:150px; height:100px;box-sizing:border-box; -webkit-box-sizing:border-box;}
#sideEvtNav .evt-lists ul li:hover a{opacity:1;}
#sideEvtNav .evt-lists ul li:hover a:before {box-sizing:border-box; -webkit-box-sizing:border-box;}
#sideEvtNav .evt-lists ul li:hover a:after {box-sizing:border-box; -webkit-box-sizing:border-box;}
/* #sideEvtNav .evt-lists ul li:hover a:before {content:""; display:block; width:150px; height:100px; border:2px solid #b6b6b6; position:absolute; top:0; left:0;} */
#sideEvtNav .evt-lists .more-btn {display:inline-block; width:150px; height:31px; background:url(../images/side_nav/side_btns.png) no-repeat 0px -42px; text-indent:-9999em;}

#sideEvtNav .button span{display:inline-block;background:#fff;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;line-height:1.2;}
#sideEvtNav .button.btnInstall span{margin:0 auto;padding:10px 5px 0;width:160px;height:30px;background:#f65f18;font-weight:bold;font-size:13px;color:#fff;text-indent:0 !important;}
#sideEvtNav .button.btnX span{position:absolute;right:11px;top:11px;width:11px;height:11px;background:url(../images/side_nav/side_btns.png) no-repeat -320px 0px;text-indent:-1000em;}

#sideEvtNav ::-webkit-scrollbar{width:4px;}
#sideEvtNav ::-webkit-scrollbar-track {background-color:#343434; border-radius:10px;}
#sideEvtNav ::-webkit-scrollbar-thumb {background-color:#30b4b6; border-radius:10px;}
#sideEvtNav ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {height:0px;background:#343434;} 




/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/


/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }

.mCustomScrollBox{ /* contains plugin's markup */
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}

.mCSB_container{ /* contains the original content */
    overflow: hidden;
    width: auto;
    height: auto;
}



/* 
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR 
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_inside > .mCSB_container{ margin-right:0px; }

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */

.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
    margin-right: 0;
    margin-left: 30px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
    position: absolute;
    width: 5px;
    height: auto;
    left: auto;
    top: 0;
    right: 0;
    bottom: 0;
}

.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
    right: auto;
    left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; 
    height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

.mCSB_scrollTools .mCSB_draggerRail{
    width: 5px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
    cursor: pointer;
    width: 100%;
    height: 30px; /* minimum dragger height */
    z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
    position: relative;
    width: 4px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
    text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
    display: block;
    position: absolute;
    height: 20px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR 
x-axis
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_horizontal.mCSB_inside > .mCSB_container{
    margin-right: 0;
    margin-bottom: 30px;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

.mCSB_scrollTools.mCSB_scrollTools_horizontal{
    width: auto;
    height: 16px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    width: 100%;
    height: 2px;
    margin: 7px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
    width: 30px; /* minimum dragger width */
    height: 100%;
    left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
    height: 4px;
    margin: 6px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
    height: 12px; /* auto-expanded scrollbar */
    margin: 2px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
    height: 8px; /* auto-expanded scrollbar */
    margin: 4px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
    display: block;
    position: absolute;
    width: 20px;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS 
yx-axis 
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_container_wrapper{
    position: absolute;
    height: auto;
    width: auto;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-right: 30px;
    margin-bottom: 30px;
}

.mCSB_container_wrapper > .mCSB_container{
    padding-right: 30px;
    padding-bottom: 30px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }

/* non-visible horizontal scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }

/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }

/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }

/* non-visible scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
    margin-right: 0;
    margin-left: 30px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
    margin-right: 0; /* non-visible scrollbar */
    margin-left: 0;
}

/* non-visible horizontal scrollbar */
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS  
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_scrollTools, 
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
    -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
    -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
                margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
                margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
                opacity .2s ease-in-out, background-color .2s ease-in-out; 
    -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
                margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
                margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
                opacity .2s ease-in-out, background-color .2s ease-in-out; 
    -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
                margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
                margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
                opacity .2s ease-in-out, background-color .2s ease-in-out; 
    transition: width .2s ease-out .2s, height .2s ease-out .2s, 
                margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
                margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
                opacity .2s ease-in-out, background-color .2s ease-in-out; 
}



/* 
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
------------------------------------------------------------------------------------------------------------------------
*/

/* 
----------------------------------------
6.1 THEMES 
----------------------------------------
*/

/* default theme ("light") */

.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }

.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

.mCSB_scrollTools .mCSB_draggerRail{
    background-color: #000; background-color: rgba(52,52,52,1);
    filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #fff; background-color: rgba(48,180,182,1);
    filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
    background-color: #fff; background-color: rgba(48,180,182,1);
    filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
    background-color: #fff; background-color: rgba(48,180,182,1);
    filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
    background-image: url(mCSB_buttons.png); /* css sprites */
    background-repeat: no-repeat;
    opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
}

.mCSB_scrollTools .mCSB_buttonUp{
    background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown{
    background-position: 0 -20px;
}

.mCSB_scrollTools .mCSB_buttonLeft{
    background-position: 0 -40px;
}

.mCSB_scrollTools .mCSB_buttonRight{
    background-position: 0 -56px;
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }