@charset "utf-8";


*{box-sizing:border-box;}


/*°øÅë ·¹À̾ƿô*/
#wrap{background-color:#2c2d31;}
.inner{display:flex; flex-wrap:wrap; width:98.542vw; margin:0 auto; max-width:100%;}
#container .inner{justify-content:center;}

/* Çì´õ */
header{position: fixed; top: 0;left: 50%; transform: translateX(-50%); z-index:5; background-color:#2c2d31; width: 100%;}
#header_top{ border-bottom:0;}

#header_top .logo .m_logo{display:inline-block;}
#header_top .logo .s_logo{display:none;}

#header_top .top_right{width:auto; }
#header_top .top_right .ui_select{display:none;}
#header_top .top_right .info_layer_btn a{color:#3d3d3d; background-color:#fff; border:2px solid #fff;text-align:center; line-height:25px; vertical-align:middle;}
#header_top .top_right .info_layer_btn a:hover{background:linear-gradient(135deg, #33dfff, #55ffd8); border:none; line-height:28px;}

#header_top .top_right .u_till li{border:1px solid #5bffde;}
#header_top .top_right .u_till li a{color:#60f2ff; font-weight:500;}
#header_top .top_right .u_till li a:hover{background-color:#60f2ff; color:#154b50;}
#header_top .top_right .u_till li a:hover img{filter: brightness(0) saturate(80%) invert(0%) sepia(8%) saturate(10%) hue-rotate(256deg) contrast(100%);}

#header_top .top_right .u_till li.join{border:1px solid #60ffb2; border-left:none;}
#header_top .top_right .u_till li.join a{color:#60ffb2;}
#header_top .top_right .u_till li.join a:hover{background-color:#60ffb2; color:#154b50;}

#header_top .top_right .u_till li.logout{border:1px solid #ff7c7c;}
#header_top .top_right .u_till li.logout a{color:#ff7c7c;}
#header_top .top_right .u_till li.logout a:hover{background-color:#ff7c7c; color:#292323; font-weight:600;}


#container{padding:70px 0 2.3438vw 0; min-height:auto;}


.mobile_menu{display:none;}
.c_red{color:#f3245f;}

/*±¤°í¿µ¿ª*/
#web_index{display:block;}
#mobile_index{display:block; width: 100%;}
.ad_area{position:relative; margin:0 auto; border:0.05245vw solid #808080; width:100%; overflow:hidden;}
.ad_area img{width:100%;}


/*Æ˾÷ ·¹À̾î*/
.popup{position:fixed; width:92%; max-width:500px; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:10; background-color:#ffe345; border-radius:10px;}
.popup:before{position:absolute; content:""; width:20%; height:15px; background-color:#5d3121; top:-33px; left:50%; transform:translateX(-50%); z-index:10; border-radius: 4px;}
.popup:after{position:absolute; content:""; width:20%; height:24px; border-left:4px solid #777777; border-right:4px solid #777777; top:-25px; left:50%; transform:translateX(-50%); z-index:10;}

.popup .popup_top{position:relative; padding:25px 30px; background: url(/images/main/popup_bg.png); border-radius: 10px;}
.popup h2{position:relative; font-size:23px; font-weight:700; margin-bottom:15px; padding-right: 27px;}
.popup .popup_top:before{position:absolute; content:""; background: url(/images/main/popup_bg2.png); width:49px; height:49px; top:12px; right:5px;}
.popup .popup_top:after{position:absolute; content:""; background: url(/images/main/popup_bg3.png); width:179px; height:119px; bottom:5px; left:3px;}
.popup .popup_txt{position:relative; background-color:#fff; padding:20px 25px 80px 25px; border:1px solid #ddd; min-height:150px; font-size:17px; font-weight: 400;  z-index:1; line-height:1.5em;}

.popup .popup_txt .popgo_btn{display:block; position:absolute; left:50%; transform:translateX(-50%); bottom:15px; width:145px; height:45px; padding:12px 10px 10px 10px; text-align:center; font-size:17px; font-weight:600; background-color:#cecfff; border-radius:50px;}
.popup .popup_txt .popgo_btn:hover{background-color:#323372; color:#fff;}

.popup .popup_bot{position:relative; background-color:#fff; padding:5px 15px; font-size: 17px;}
.popup .popup_bot input{margin-top: -2px;}

.popup .close{position: absolute; display:inline-block; width:20px; height:20px; bottom: 4px; right: 15px;}
.popup .close:before{position:absolute; display:block; content:""; width:20px; height:2px; background-color:#333; transform:rotate(45deg); top:8px; right:0; transition:0.3s all ease; }
.popup .close:after{position:absolute; display:block; content:""; width:20px; height:2px; background-color:#333; transform:rotate(135deg); top:8px; right:0; transition:0.3s all ease;}
.popup .close span.alt{font-size:0;}
.popup .close > span{position:relative; display:inline-block;}


/*Àü´ÜÁö ·¹À̾î*/
.pamphlet{position:fixed; width:90%; max-width:550px; top:50%; left:50%; transform:translateX(-50%) translateY(-50%) scale(1); transform-origin: center center; z-index:9;}
.pamphlet .pam_img{overflow-y:auto; max-height:75vh;}
.pamphlet .pam_img::-webkit-scrollbar{width:7px; height:7px; background-color:#6a6a6a; border-radius:5px;}
.pamphlet .pam_img::-webkit-scrollbar-thumb{border-radius:5px; background-color:#29ffce; border:1px solid #6a6a6a;}
.pamphlet img{width:100%;}

.pamphlet .close{text-align: center; display:inline-block; background: #ffffff; width: 100%; padding: 5px 0 6px 0; transition:0.3s ease all;}
.pamphlet .close > span{position:relative; display:inline-block; font-size:17px; font-weight:500;}
.pamphlet .close:hover{background-color:#1a1a1a; color:#fff;}


/*ÇÑÁÙ¼Ò°³ ·¹À̾î*/
.oneline{position:fixed; width:93%; max-width:650px; padding:20px 25px; top:50%; left:50%; transform:translateX(-51.3%) translateY(-50%) scale(1); transform-origin: center center; z-index:9; background-color:#fff; border-radius:20px 20px 0 20px; text-align:center; box-shadow: 0 0 25px 0px #abffec;}
.oneline h2{position:relative; display:inline-block; font-size:23px; font-weight:700; position:relative; margin-bottom:13px;}
.oneline h2:before{position:absolute; content:""; width:25px; height:25px; background:url(/images/contents/h2_icon.png)no-repeat; top:-5px; right:-21px; z-index:-1;}
.oneline .ol_txt{background:linear-gradient(135deg, #ecf9f6, #f3f9ec); padding:15px; line-height: 1.35em; font-size: 20px; font-weight: 500; border-radius: 25px;}

.oneline .close{position: absolute; display:inline-block; width:20px; height:20px; top: 22px; right: 15px;}
.oneline .close:before{position:absolute; display:block; content:""; width:20px; height:2px; background-color:#333; transform:rotate(45deg); top:8px; right:0; transition:0.3s all ease; }
.oneline .close:after{position:absolute; display:block; content:""; width:20px; height:2px; background-color:#333; transform:rotate(135deg); top:8px; right:0; transition:0.3s all ease;}
.oneline .close span.alt{font-size:0;}
.oneline .close > span{position:relative; display:inline-block;}

/*ÀÌ¿ë¾È³» ·¹À̾î*/
.info_con.mobile{display:none;}
.info_con.mobile img.color{-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); width: 20px; margin-top: -3px;}

.ui_info{display:none;}

/*1À§ ·¹À̾î*/
.no1_layer{position:fixed; width:95%;; max-width:500px; min-height:480px; padding: 45px; top:50vh; left:50vw; transform:translateX(-50%) translateY(-50%); z-index:8; overflow: hidden; background:url(/images/main/1st_bg01.jpg) center no-repeat; background-size:cover; }

.no1_layer .close{position: absolute; display:inline-block; width: 25px; height: 25px;top: 16px; right: 15px;}
.no1_layer .close:before{position:absolute; display:block; content:""; width:25px; height:2px; background-color:#fff; transform:rotate(45deg); top:11px; right:0; transition:0.3s all ease; }
.no1_layer .close:after{position:absolute; display:block; content:""; width:25px; height:2px; background-color:#fff; transform:rotate(135deg); top:11px; right:0; transition:0.3s all ease;}
.no1_layer .close > span{position:relative; display:inline-block;}
.no1_layer .close > span span.alt{position:absolute; display:inline-block; width:0; height:0; overflow:hidden;}

.no1_layer .no1_con_wrap{position:relative; width:100%; border:1px solid #f3ea9c; border-radius:20px; background-color:rgba(37,37,37,0.29); text-align:center; padding-bottom:45px;}
.no1_layer .no1_con_wrap:before{position:absolute; content:""; display:block; width:100%; height:100%; background:url(/images/main/1st_bg02.png)top left no-repeat; background-size:100%; top:30px;}
/*.no1_layer .no1_con_wrap:after{position:absolute;content:"";display:block;width: 23.6%;height: 22.1%;background:url(/images/main/reco_ad.png)top left no-repeat;background-size:100%;top: -15px;left: -5px;}*/


.no1_layer .no1_con_wrap .tit_area{margin-top: 30px;position: relative;font-size: 28px;font-family: 'DungGeunMo';color: #1b1b21;word-break:break-word;margin-bottom:15px;background: #282731;display: inline-block;padding: 12px 11px;border-bottom: 2px solid #ebd782;text-shadow: -2px 0 #f2e088, 0 2px #f2e088, 2px 0 #f2e088, 0 -2px #f2e088;}
.no1_layer .no1_con_wrap .tag_area{position:relative;  display:flex; align-items: center; justify-content: center; margin:0 auto;width:223px; height: 209px; margin-top:25px; background:url(/images/main/1st_tbg.png)no-repeat; background-size: 100%;}
.no1_layer .no1_con_wrap .tag_area img{max-width:105px; max-height:105px;}
.no1_layer .no1_con_wrap .txt_area{width:100%; margin-top:30px; padding: 0 15px;}
.no1_layer .no1_con_wrap .txt_area .tit{font-size: 28px; font-family: 'DungGeunMo'; color:#f2e088; word-break:break-word; margin-bottom:15px;}
.no1_layer .no1_con_wrap .txt_area .mo_info{font-size:18px; font-family: 'DungGeunMo'; color:#fff;}




/*À̺¥Æ® ´ç÷ ·¹À̾î*/
#prize{width:450px; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); max-width:90%; z-index:20; background:linear-gradient(308deg, #ffd04a, #ffe5a7, #ffd04a); overflow:hidden; border-radius:20px; text-align:center; padding:20px;}

#prize .close{position: absolute; display:inline-block; width: 23px; height: 23px; top: 15px; right: 15px;}
#prize .close:before{position:absolute; display:block; content:""; width:23px; height:3px; background-color:#000; transform:rotate(45deg); top:8px; right:0; transition:0.3s all ease; border-radius:10px;}
#prize .close:after{position:absolute; display:block; content:""; width:23px; height:3px; background-color:#000; transform:rotate(135deg); top:8px; right:0; transition:0.3s all ease; border-radius:10px;}
#prize .close > span{position:relative; display:inline-block;}
#prize .close > span span.alt{position:absolute; display:inline-block; width:0; height:0; overflow:hidden;}

#prize h5{font-size:28px; font-weight:700; margin-bottom:10px;}
#prize .tit{font-size:19px; font-weight:600; position:relative; padding:0 5px; z-index:1; display:inline-block; margin-bottom:12px;}
#prize .tit:before{display:block; position:absolute; content:""; width:100%; height:16px; background-color:#f6ffd9; left:0; bottom:-3px; z-index:-1;}
#prize .noti{font-size:17px; line-height:1.3em; font-weight:500;}
#prize .apply{background:#fff url(/images/common/event_prize.png) no-repeat; background-position:center top 25px; border-radius:20px; padding:145px 15px 15px 15px; margin:10px auto; width:350px; max-width:100%;}
#prize .apply input[type='text']{border:2px solid #6107ff; padding:5px 10px; font-size:17px; font-family:'Pretendard'; width:175px; text-align:center; height:43px; margin:10px auto; font-weight: 600; color:#000;}
#prize .apply input[type='text']::placeholder{font-size:16px; font-family:'Pretendard'; font-weight:600; color:#555; letter-spacing:-1.5px;}
#prize .apply .agree{font-size:15px; letter-spacing:-1.5px; line-height:1.3em;}
#prize .apply .agree label{display:block;}
#prize .check{font-size:15px; letter-spacing:-1.5px; line-height:1.3em; text-align:left; margin: 0 auto; width: 370px; max-width: 100%;}
#prize .check span{font-weight:600; font-size:16px; color:#ff0000;}
#prize button{margin-top:15px; width:150px; font-size:17px; font-weight:600; color:#fff; background-color:#000; border-radius:50px; height:40px; letter-spacing:-1.5px; line-height:1em;}
#prize button:hover{color:#ffd163;}



@media  screen and (max-width:1600px)
{
.inner{width:98.5%;}
}


@media  screen and (max-width:1110px)
{
#header_top .top_right .info_layer a{font-size:16px;}
#header_top .top_right .u_till li a{font-size:16px;}
}


@media  screen and (max-width:760px)
{
#wrap{background-color: #2a2b2d;}
#container{padding-top:0;}
.inner{width:97%; height:100%;}

header{position: relative; border-bottom:0;}
#header_top .top_right .ui_select{display:inline-block; position:relative;}
#header_top .top_right .ui_select a.ui_wrap{position:relative; display:inline-block; width:52px; height:30px; border:1px solid #d9d9d9; border-radius:20px; vertical-align:middle;}
#header_top .top_right .ui_select a.ui_wrap.air_ui{text-align:left;}
#header_top .top_right .ui_select a.ui_wrap span.ui_icon{position:absolute; content:""; top:0; left:0; display:inline-block; width:30px; height:30px; border-radius:50%; margin-top:-1px; transition:ease 0.3s;}
#header_top .top_right .ui_select a.ui_wrap.air_ui span.ui_icon{border:2px solid #26d9a6; margin-left:-1px; background:#4a4a4a url(/images/main/ui_s01.png)center no-repeat;}
#header_top .top_right .ui_select a.ui_wrap.tag_ui{display:none;}

#header_top .top_right .ui_select a.ui_wrap:hover span.ui_icon{left:calc(100% - 28px);}
#header_top .top_right .ui_select a.ui_wrap.air_ui:hover span.ui_icon{border:2px solid #60f2ff; margin-right:-1px; background:#4a4a4a url(/images/main/ui_s02.png)center no-repeat;}

#header_top .top_right .ui_select #look{display: inline-block; position: absolute; padding: 5px 8px 5px 10px; line-height: 1em; font-size: 13px; color: #fff; border-radius: 50px; border: 2px solid #26d9a6; right: 0; bottom: -32px; width: 125px; text-align: center; background: #000; transition:0.5s all ease;}
#header_top .top_right .ui_select #look:before{display:block; position: absolute; content:""; background:#000; width:9px; height:8px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); right:31px; top:-7px; transition:0.5s all ease;}
#header_top .top_right .ui_select #look:after{display:block; position: absolute; content:""; background:#26d9a6; width:13px; height:10px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); right:29px; top:-11px; z-index:-1; transition:0.5s all ease;}
#header_top .top_right .ui_select #look .close{display:inline-block; vertical-align:top; cursor:pointer; margin-left:5px; font-size:15px; line-height:1em; margin-top:-1px;}

#header_top .top_right .ui_select:hover #look.on:before{right:9px;}
#header_top .top_right .ui_select:hover #look.on:after{right:7px; background:#60f2ff;}
#header_top .top_right .ui_select:hover #look.on{border: 2px solid #60f2ff;}

#header_top .top_right .u_till{display:none;}
.mobile_menu{display:inline-block; margin-left:8px;}

/*ÀÌ¿ë¾È³» ·¹À̾î*/
.ui_info{display:inline-block;}
.ui_info .uiin_icon{display:inline-block; width:22px; height:22px; border:1px solid #26d9a6; border-radius:50%; background:#4a4a4a url(/images/main/ui_s01.png)center no-repeat; vertical-align:middle; background-size:12px; margin-top:-2px;}
}


@media  screen and (max-width:500px)
{
/*À̺¥Æ® ´ç÷ ·¹À̾î*/
#prize{padding:15px;}

#prize h5{font-size:25px;}
#prize .tit{font-size:18px;}
#prize .noti{font-size:15px;}


}

@media  screen and (max-width:460px)
{
/*1À§ ·¹À̾î*/
.no1_layer {padding: 50px 15px;}
.no1_layer .no1_con_wrap .tag_area{width:210px; height: 193px; margin-top:15px; background:url(/images/main/1st_tbg.png)no-repeat; background-size: 100%;}
.no1_layer .no1_con_wrap .tag_area img{max-width:100px; max-height:100px;}
.no1_layer .no1_con_wrap .txt_area{margin-top: 25px; padding: 0 12px;}
.no1_layer .no1_con_wrap .txt_area .tit{font-size: 29px; margin-bottom:12px;}
.no1_layer .no1_con_wrap .txt_area .mo_info{font-size:17px;}

}