@charset "utf-8";


*{box-sizing:border-box;}


/*°øÅë ·¹À̾ƿô*/
#wrap{width:100%; margin:0 auto; position: relative;}
.inner{width:1360px; margin:0 auto; max-width:100%; }

#contents_box h2{position:relative; display:inline-block; font-size:24px; font-weight:700; position:relative; margin-bottom:15px;}
#contents_box 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;}
#contents_box h3{font-size:22px; font-weight:600; color:#21676d; margin-bottom:15px; letter-spacing:-1px;}

.mask1{position:fixed; inset:0px; z-index:5; background-color:#000; opacity:0.8; display:none;}

/* Çì´õ */
header{height:70px; margin:0 auto;}
#header_top{width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #808080; position: relative;}
#header_top .inner{display:flex; flex-wrap:wrap; justify-content:space-between;  align-items:center;}

#header_top .logo{display:inline-block; vertical-align: middle; }
#header_top .logo h1{display:inline-block; vertical-align: middle; margin-top: 5px; width:145px;}
#header_top .logo .m_logo{display:none;}

#header_top .top_right{position:relative; display:inline-block; width:calc(100% - 145px); text-align:right;}

#header_top .top_right .u_till{display:inline-block; vertical-align:middle; margin-left:10px; font-size:0;}
#header_top .top_right .u_till li, #header_top .top_right .u_till li img, #header_top .top_right .u_till li span{display:inline-block; vertical-align:middle;}
#header_top .top_right .u_till li{overflow:hidden; border:1px solid #00929f; border-radius:0 7px 7px 0;}
#header_top .top_right .u_till li:first-child{border-radius:7px 0 0 7px;}
#header_top .top_right .u_till li a{position:relative; display:inline-block; padding:5px 8px 6px 8px; font-weight:600; transition:0.3s all ease; font-size:17px; color:#006f79;}
#header_top .top_right .u_till li a:hover{background-color:#edfeff;}
#header_top .top_right .u_till li a img{margin-right:2px;}

#header_top .top_right .u_till li.join{border:1px solid #006d39; border-left:none;}
#header_top .top_right .u_till li.join a{color:#006d39;}
#header_top .top_right .u_till li.join a:hover{background-color:#ecfff6;}

#header_top .top_right .u_till li.logout{border:1px solid #e54c66; border-left:none;}
#header_top .top_right .u_till li.logout a{color:#e54c66;}
#header_top .top_right .u_till li.logout a:hover{background-color:#fff5f7;}


/*Çȼ¿±¸ÀÔ, ¼Öµå¾Æ¿ô*/
.c_buy_btn{position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); border: 2px solid #5fe9c1; padding: 4px; background: #3b3e43; box-shadow: 1px 1px 4px #54edc1; z-index:1;}
.c_buy_btn:before{position:absolute; content:""; display:block; width:66px; height:39px; background:url(/images/common/tagbtn_bg.png) no-repeat; top:-10px; right:-30px; z-index: -1;}
.c_buy_btn:after{position:absolute; content:""; width:100%; height:100%; background:#3b3e43; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index: -1;}
.c_buy_btn a{position:relative; display:inline-block; padding:1.5px 10px 2px 10px; width:100px; border:1px solid #5fe9c1; color:#5fe9c1; font-weight:600; text-align:center; font-size: 17px;}
.c_buy_btn a:before{position:absolute; content:""; width:50px; height:50px; border:3px solid #5fe9c1; border-radius:50%; top:52%; left:50%; transform:translateX(-50%) translateY(-50%); z-index: -2; box-shadow: 1px 1px 9px #54edc1;}
.c_buy_btn a:hover{background:#5fe9c1; color:#222; font-weight:700;}

.sold_out{position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%) rotate(-8deg); border: 2px solid #ff3548; padding: 4px; background: #3b3e43; box-shadow: 1px 1px 4px #ff3548;}
.sold_out:after{position:absolute; content:""; width:100%; height:100%; background:#3b3e43; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index: -1;}
.sold_out span{position:relative; display:inline-block; padding:1.5px 10px 2px 10px; width:100px; border:1px solid #ff3548; color:#ff3548; font-weight:600; text-align:center; font-size: 18px; letter-spacing: -1.5px;}
.sold_out span:before{position:absolute; content:""; width:50px; height:50px; border:3px solid #ff3548; border-radius:50%; top:52%; left:50%; transform:translateX(-50%) translateY(-50%); z-index: -2; box-shadow: 1px 1px 9px #ff3548;}


.mobile_menu{display:none;}


#container{padding:45px 0 90px 0; min-height:calc(100vh - 241.14px);}
.sub_top{position:relative;}

/*³×ºñ°ÔÀ̼Ç*/
#sub_nav{position:absolute; display:inline-block; width:180px; top:10px; z-index:5;}
#sub_nav button{position:relative; display:inline-block; padding:10px 10px 10px 15px; background-color:#2a2a2a; font-size:18px; font-weight:500; color:#fff; width:100%; font-family:'Pretendard', sans-serif; border-radius: 0 5px 5px 5px;}
#sub_nav button:before{position:absolute; display:block; content:""; width:9px; height:5px; background:url(/images/common/nav_arr.png)no-repeat; top:50%; right:15px; transform:translateY(-50%);}
#sub_nav button:hover{color:#60f2ff;}
#sub_nav button span{position:relative; display:inline-block; width:100%; padding-left: 28px; text-align:left;}
#sub_nav button span:before{position:absolute; display:block; content:""; width:18px; height:18px; background:url(/images/common/nav01.png)no-repeat; top:50%; left:0; transform:translateY(-50%);}

#sub_nav ul.snav_box{position:relative; display:inline-block; width:100%; border-top:1px solid #fff; background-color:#2a2a2a; border-radius:5px 5px 5px 0; text-align:center; padding:5px 0;}
#sub_nav ul.snav_box li a{position:relative; display:inline-block; width:100%; padding:8px 8px 8px 15px; color:#fff;}
#sub_nav ul.snav_box li a:before{position:absolute; display:block; content:"";  top:50%; left:15px; transform:translateY(-50%);}
#sub_nav ul.snav_box li a.n_join:before{width:17px; height:20px; background:url(/images/common/nav06.png)no-repeat;}
#sub_nav ul.snav_box li a.n_login:before{width:18px; height:17px; background:url(/images/common/nav05.png)no-repeat;}
#sub_nav ul.snav_box li a.n_tag:before{width:18px; height:18px; background:url(/images/common/nav01.png)no-repeat;}
#sub_nav ul.snav_box li a.n_faq:before{width:18px; height:18px; background:url(/images/common/nav02.png)no-repeat;}
#sub_nav ul.snav_box li a.n_qna:before{width:18px; height:18px; background:url(/images/common/nav03.png)no-repeat;}
#sub_nav ul.snav_box li a.n_my:before{width:18px; height:19px; background:url(/images/common/nav04.png)no-repeat;}
#sub_nav ul.snav_box li a.n_info:before{width:18px; height:18px; background:url(/images/common/nav07.png)no-repeat;}
#sub_nav ul.snav_box li a:hover{color:#60f2ff;}
#sub_nav ul.snav_box li a span{padding-left: 10px;}


/*¼­ºêŸÀÌƲ*/
.cont_tit{position:relative; text-align:center;}
.cont_tit h2{position:relative; display:inline-block; font-size:35px; font-weight:700; margin:0 auto 25px auto;}
.cont_tit h2:before{position:absolute; display:block; content:""; width:calc(100% + 26px); height:15px; background-color:#9bedff; border-left:3px solid #3b3e43; border-right:3px solid #3b3e43; bottom:-1px; left:-17px; transform:skew(-25deg); z-index:-1;}


/*µµ¿ò¸» º¸±â ¹öÆ°*/
.info_layer_btn{position:fixed; display:inline-block; vertical-align:middle; right:10px; bottom:62px; z-index:100;}
.info_layer_btn a{display:inline-block; width:45px; height:45px; border-radius:0 10px 0 7px; color:#fff; background-color:#0e0e0e; text-align:center; line-height:45px; font-size:23px; font-weight:700; box-sizing:border-box; border:1px solid #26d9a6;}
.info_layer_btn a:hover{background:linear-gradient(135deg, #00b7d9, #00e1af);}


/*¼³¸í ·¹À̾î*/
#info_layer{position:fixed; width:92%; max-width:750px; padding:25px 30px; background:#fff; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); border:1px solid #777; border-radius:20px; z-index:20; overflow: hidden;}
#info_layer h2{position:relative; display:inline-block; font-size:23px; font-weight:700; position:relative; margin-bottom:15px;}
#info_layer 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;}
#info_layer h3{font-size:20px; font-weight:600; color:#007c87; margin-bottom:10px; letter-spacing:-1px;}

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

#info_layer .info_con{max-height:350px; height:auto; overflow-y:auto; position: relative; padding-right:10px;}
#info_layer .info_con::-webkit-scrollbar{width:7px; height:7px; background-color:#6a6a6a; border-radius:5px;}
#info_layer .info_con::-webkit-scrollbar-thumb{border-radius:5px; background-color:#62c5af; }

#info_layer .cont_list > li{position:relative; font-size:17px; margin-bottom:4px; word-break:keep-all; line-height:1.4em; padding-left: 22px;}
#info_layer .cont_list > li:before{position: absolute; display:block; content:""; width: 12px; height:12px; background:url(/images/contents/cont_list1.png)no-repeat; border-right:0; box-sizing: border-box; left:0; top:5px;}
#info_layer .cont_list > li:last-child{margin-bottom:0;}

#info_layer .cont_list2{margin-top:6px;}
#info_layer .cont_list2 > li{position:relative; font-size:17px; margin-bottom:2px; word-break:keep-all; line-height:1.4em; padding-left: 16px;}
#info_layer .cont_list2 > li:before{display: block; content: ""; position: absolute; left: 0; top: 7px; width: 0; height: 0; background: none; border-left: 7px solid #333; border-top: 5px solid transparent; border-bottom: 5px solid transparent;}
#info_layer .cont_list2 > li:last-child{margin-bottom:0;}

#info_layer .cont_list3{margin-top:5px;}
#info_layer .cont_list3 > li{font-size:16px; font-weight:400; margin-bottom:5px; position:relative; line-height:1.3em; padding-left:15px;}
#info_layer .cont_list3 > li::before{display: block; content: ""; position: absolute; width: 4px; height: 4px; background-color: #8c8c8c; left: 0; top: 10px;}


/* À§·Î°¡±â ¹öÆ° */
.top_go{position:fixed; right:10px; bottom:10px; z-index:100; width: 46px; height:46px; background:#0e0e0e; border:1px solid #86f0f5; border-radius:0 10px 0 7px;}
.top_go a{display:block; width:100%; height:100%; text-align:center; color:#fff; font-family: 'Pretendard'; position:absolute; }
.top_go a span{width:100%; height: 45px; color: #86f0f5; font-family: 'Pretendard'; font-weight: 600; display:block; box-sizing: border-box; position:relative; line-height: 53px;}
.top_go a span:before{display:block; position:absolute; content:""; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width:10px; height:7px; background-color:#86f0f5; top:7px; left:50%; transform:translateX(-50%);}
.top_go:hover{background:#86f0f5;}
.top_go:hover a span{color:#0e0e0e;}
.top_go:hover a span:before{background-color:#0e0e0e;}


/* ǪÅÍ */
footer{position:relative; width:100%; background-color:#222222;padding: 0 0 20px 0 ;}
footer .footer_in{position:relative; text-align:center; }
footer #ft_menu{display:inline-block; background-color:#131313; width:100%; padding:13px 0 16px 0; font-size:23px; font-weight:700; text-align:center;}
footer #ft_menu ul{display:inline-block; margin:0 auto;}
footer #ft_menu ul li{position:relative; display:inline-block; font-size:20px; font-weight:600; color:#fff; margin-left:35px;}
footer #ft_menu ul li a img{margin:-1px 8px 0 0;}
footer #ft_menu ul li:first-child{margin-left:0; color:#60f2ff; padding-left:25px;}
footer #ft_menu ul li:first-child:before{position:absolute; display:block; content:""; width:20px; height:20px; background:url(/images/common/m_icon1.png)no-repeat; left:0; top:50%; transform:translateY(-50%);}
footer #ft_menu ul li a:hover{color:#2cc0cf;}
footer #ft_menu ul li a:hover img{filter:invert(49%) sepia(24%) saturate(2239%) hue-rotate(150deg) brightness(130%) contrast(120%);}

footer .f_menu{display:inline-block; margin:14px auto; }
footer .f_menu ul li{display:inline-block;  font-size:17px; font-weight:600; color:#d4d4d4; margin-right:25px;}
footer .f_menu ul li:last-child{margin-right:0px;}
footer .f_menu ul li:hover{color:#2cc0cf;}


footer .f_info{color:#d4d4d4; font-size:16px; padding-left:10px;}
footer p.copyright{color:#d4d4d4; font-size:16px; text-align:center; margin-top:6px;}


/*¸ð¹ÙÀϸ޴º*/
#left_menu_mobile_wrap{width:300px; height:100%; background:#1a1a1a; position:absolute; top:0px; bottom:0px; z-index: 3000; right: 0;} /*·Îµù ½Ã, ¼û±â±âÀ§ÇØ right:-300px; ÁöÁ¤ by anji */

#left_menu_mobile_total{width:100%;position:relative; background:#0b0f1b;}
#left_menu_mobile_totaltext{height:60px; position:relative; padding:16px; }
#left_menu_mobile_totaltext span.logo{display:inline-block; width:135px;}
#left_menu_mobile_totaltext span.logo img{width:100%;}

#left_menu_mobile_closebutton{position:absolute; right: 0px; top: 15px; width: 30px; height:30px;background: #000000;}
.cssicon{transition:all .5s ease;display:inline-block; height: 30px; width: 22px; font-size:24px;}
.cssicon:focus{outline:none;}
.cssicon > span, .cssicon > span:before, .cssicon > span:after{border: 0em solid #fff;background-color: #fff;height:.1em;display:block;transition:all .3s ease;transition-property:top,bottom,left,right,transform,border-radius;}
.cssicon > span{top: 50%;left: 50%;width: 100%;position: relative;background: transparent;transform: translate(-50%, -50%);}
.cssicon > span:after, .cssicon span:before{content:"";position:absolute;width:100%;}
.hamburger > span{background-color:#000;}
.close > span:before{transform:rotate(45deg);}
.close > span:after{transform:rotate(-45deg);}
.cssicon > span span.alt{width:0; height:0; display:inline-block; overflow:hidden; position:absolute;}

.mobile_login{display:block; border-bottom: 1px solid #808080; margin-bottom:10px; background:#0b0f1b; padding:2px 8px 0 8px;}
.mobile_login ul{font-size:0;}
.mobile_login ul li{display:inline-block; vertical-align:middle; width:50%; text-align:center; position:relative; padding:5px 5px 18px 5px;}
.mobile_login ul li a{position:relative; font-size:17px; padding:8px 10px; display:block; border-radius:0 10px 0 5px; color:#60f2ff; font-weight:600; transition:0.3s all ease;}

.mobile_login ul li.join a{border:1px solid #60ffb2; color:#60ffb2;}
.mobile_login ul li.login a{border:1px solid #60f2ff;}
.mobile_login ul li.adm a{border:1px solid #60f2ff;}
.mobile_login ul li.mypage a{border:1px solid #60f2ff;}
.mobile_login ul li.logout a{border:1px solid #e74c65; color:#e74c65;}
.mobile_login ul li a:hover{background:#60f2ff; color:#0b0f1b;}
.mobile_login ul li.join a:hover{background:#60ffb2; color:#0b0f1b;}
.mobile_login ul li.logout a:hover{background:#e74c65; color:#0b0f1b;}

.mb_menu{width:100%;}
.left_menu_mobile_one{width:100%; height:48px; cursor: pointer; position:relative;}
.left_menu_mobile_one_text{font-size:18px;  color:#fff; font-weight:600; padding-right:20px; line-height:48px; width:100%; position:relative; letter-spacing:-1px; font-family: 'Pretendard'; padding-left: 20px;}
.left_menu_mobile_one_text:before{position:absolute; display:block; content:""; width:7px; height:1.5px; background-color:#fff; transform:rotate(45deg); top:26px; right:20px;}
.left_menu_mobile_one_text:after{position:absolute; display:block; content:""; width:7px; height:1.5px; background-color:#fff; transform:rotate(135deg); top:26px; right:15px;}

.left_menu_mobile_one_text span a{position:relative; padding-left:30px;}
.mm_buy:before{position:absolute; display:block; content:""; width:18px; height:18px; background:url(/images/common/nav01.png)no-repeat; top:50%; left:0; transform:translateY(-50%);}
.mm_faq:before{position:absolute; display:block; content:""; width:18px; height:18px; background:url(/images/common/nav02.png)no-repeat; top:50%; left:0; transform:translateY(-50%);}
.mm_qna:before{position:absolute; display:block; content:""; width:18px; height:18px; background:url(/images/common/nav03.png)no-repeat; top:50%; left:0; transform:translateY(-50%);}
.mm_info:before{position:absolute; display:block; content:""; width:18px; height:18px; background:url(/images/common/nav07.png)no-repeat; top:50%; left:0; transform:translateY(-50%);}

/*¸ð¹ÙÀϸ޴º 1Â÷¸Þ´º¸¸ ÀÖÀ» ¶§*/
#left_menu_mobile01:before{display:none;}
#left_menu_mobile01:after{display:none;}
#left_menu_mobile01 span a:hover{color: #60f2ff;}



@media  screen and (max-width:1360px)
{
/*°øÅë ·¹À̾ƿô*/
.inner{width:calc(100% - 20px); margin:0 auto;}
}

@media  screen and (max-width:760px)
{
header{height: 65px; position: relative;}
#header_top .top_right .u_till{display:none;}
.c_buy_btn{display:none;}
.sold_out{display:none;}
#header_top .top_right .u_till{display:none;}

.mobile_menu{display:inline-block; margin-left:12px;}
.mobile_menu a:first-child{display:inline-block; margin-right:6px;}

/*µµ¿ò¸» º¸±â ¹öÆ°*/
.info_layer_btn{bottom:58px;}
.info_layer_btn a{width: 40px; height:40px; line-height: 40px; font-size: 20px;}


/* À§·Î°¡±â ¹öÆ° */
.top_go{width: 40px; height:40px;}
.top_go a{line-height:40px;}
.top_go a span{height: 40px; font-size: 16px;}
}


@media  screen and (max-width:650px)
{
/*°øÅë ·¹À̾ƿô*/
#container{padding: 25px 0 90px 0;}
.cont_tit h2{font-size: 33px;}

.sub_top{padding-bottom: 55px;}
#sub_nav{top: 60px;}
}

@media  screen and (max-width:500px)
{
/*°øÅë ·¹À̾ƿô*/
.cont_tit h2{font-size: 31px;}

/*Çì´õ*/
#header_top .top_right .u_till{margin-left: 5px;}
#header_top .top_right .u_till li a{padding: 7px 6px 7px 25px; font-size: 16px;}
#header_top .top_right .info_layer a{width: 25px; height: 25px; font-size: 16px; line-height: 25px;}
#header_top .top_right .info_layer a:hover{line-height:23px;}

/*³×ºñ°ÔÀ̼Ç*/
#sub_nav button{font-size: 17px;}
#sub_nav ul.snav_box li a{font-size: 17px;}

/* ǪÅÍ */
footer #ft_menu ul li{font-size:18px;}
footer .f_menu{display:inline-block; margin:14px auto;}
footer .f_menu ul li{display:inline-block;  font-size:16px; font-weight:600; color:#d4d4d4;}

footer .f_info{font-size:15px; padding-left:8px;}
footer p.copyright{font-size:15px;}
}

@media  screen and (max-width:460px)
{
/*°øÅë ·¹À̾ƿô*/
.cont_tit h2{font-size: 29px;}
}