/* layout */
@import "./common.css";
@import "./layout.css";

body{min-width:1650px;}
/* skip navi */
.skip_navi{position:absolute;z-index:500;top:0;left:0;width:100%;}
.skip_navi a{position:absolute;top:-100px;left:0;display:block;width:100%;padding:10px 0 12px;text-align:center;text-decoration:none !important;color:#000;background:#ffde00;font-size:14px;font-weight:bold;line-height:18px;}
.skip_navi a:active, .skip_navi a:focus{top:0}

/* common components */
.sp_ico{display:inline-block;}
.sp_ico, .menu li a::before, .gnb .menu li.mn-pc .ico{background-image:url(../img/sp-main.png);background-repeat:no-repeat}
.sp_ico.arrow-bk{display:inline-block;width:12px;height:12px;vertical-align:middle;background-position:-34px -105px;}
.ico_label{display:inline-block;width:31px;height:17px;vertical-align: middle;}
.ico_label + .ico_label{margin-left:1px;}
.ico_label.new{width:33px;background-position:100% -47px;background:url(../img/icon/icn-new.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.ico_label.update{width:52px;background-position:100% -77px;background:url(../img/icon/icn-update.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.ico_label.hot{background-position:100% -107px;background:url(../img/icon/icn-hot.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.title_wrap{position:relative;padding-bottom:30px;}
.title_wrap::after{display:block;visibility:hidden;clear:both;width:0px;height:0px;content:'';opacity:0;}
.title_wrap .section_title{float:left;}
.title_wrap .link_more{display:block;position:absolute;right:0;top:12px;transition:transform .3s;letter-spacing:-0.27px;color:rgba(0,0,0,.8);font-size:12px;line-height:1.5;}
.title_wrap .link_more i{margin:-2px 0 0 5px;}
.title_wrap .link_more:hover{transform:translateX(5px);}
.section_title{letter-spacing:-0.8px;color:#2f2f2f;font-family:"NotoSansKR_Black";font-size:24px;font-weight:900;line-height:1.17;}

/* layout */
#container{position:relative;padding:0 0 0 240px;}
#content{box-sizing:border-box;width:1398px;min-height:100vh;margin:0 auto;padding:0 30px 110px 30px;text-align:left;}
#content.content_full_bg{width:100%;padding:0;}
/*#content.content_full_bg .content_inner > .section{position:relative;width:1100px;margin:0 auto;}*/
#footerWrap{height:350px;}
#header{position:fixed;z-index:100;top:0;bottom:0;left:0;width:240px;height:100%;min-height:800px;background-color:#fff;box-shadow:22px 0 40px 0 rgba(49, 52, 132, 0.1);}
/* header */
.gnb{box-sizing:border-box;height:100%;padding:70px 25px}
.gnb .logo{display:block;width:158px;height:31px;margin:0 auto 66px;background-position:0 0;background:url(../img/icon/netmarble-ci.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.gnb .logo a{display:block;width:158px;height:31px;}
.gnb .lg_box{margin-bottom:58px;padding:20px 19px;border:1px solid rgba(207,207,207,.3);border-right:0;border-left:0;}
.gnb .lg_box.on{padding:20px 0 20px 4px;}
.gnb .lg_box .link_login{position:relative;display:block;height:25px;margin-bottom:13px;padding-left:38px;letter-spacing:-0.25px;

color:#7e7e7e;font-family:"NotoSansKR_Medium";font-size:12px;

font-weight:500;line-height:25px;}
.gnb .lg_box .link_login .sp_ico{position:absolute;top:0;left:0;width:25px;height:25px;background-position:-58px -47px;background:url(../img/icon/icn-profile.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.gnb .lg_box .lg_btm{overflow:hidden;height:14px;line-height:14px;}
.gnb .lg_box .lg_btm > span{display:inline-block;float:left;}
.gnb .lg_box .lg_btm .split{padding:0 5px;letter-spacing:1px;opacity:0.37;color:#9e9e9e;font-size:10px;}
.gnb .lg_box .lg_btm a{letter-spacing:-0.32px;opacity:.8;color:#7e7e7e;font-size:10px;line-height:1.4;}
.gnb .lg_box .lg_btm .sp_secure strong{color:#1a2bb3;font-size:10px;font-weight:normal;}
.gnb .lg_box .lg_btm .sp_secure.on strong{color:#c53636;}
.gnb .lg_box .info{position:relative;margin-bottom:20px;padding-left:53px;letter-spacing:0px;line-height:1.45;}
.gnb .lg_box .info .img_profile{position:absolute;top:0;left:0;display:block;overflow:hidden;width:38px;height:38px;border-radius:6px;background-position:0 -47px;}
.gnb .lg_box .info .img_profile img{width:100%;height:100%;}
.gnb .lg_box .info .info_name{margin-bottom:5px;font-family:"NotoSansKR_Medium";font-size:11px;font-weight:500;}
.gnb .lg_box .info .info_cash .svc_name{color:rgba(53,53,53,.5);font-size:11px;}
.gnb .lg_box .info .info_cash .svc_cnt{margin-right:3px;color:#353535;}
.gnb .lg_box .info .info_cash .svc_charge{display:inline-block;height:16px;padding:0 6px;color:#fff;border-radius:10px;line-height:16px;background-color:#f3ca71;font-family:"NotoSansKR_Medium";font-size:10px;font-weight:500;}
.gnb .menu{margin-bottom:190px;padding:0 16px;}
.gnb .menu li{position:relative;margin-top:30px;transition:all .3s;}
.gnb .menu li:first-child{margin-top:0;}
.gnb .menu li a{display:block;height:22px;padding-left:40px;letter-spacing:-0.07px;color:rgba(66,66,66,.95);font-family:"NotoSansKR_Medium";font-size:13px;font-weight:500;line-height:22px;}
.gnb .menu li a::before{position:absolute;top:0;left:0;display:block;width:22px;height:22px;content:'';}
.gnb .menu li.mn-customer a::before{background-position:0 -139px;}
.gnb .menu li.mn-pc a::before{background-position:-42px -139px;}
.gnb .menu li.mn-pc .ico{display:inline-block;overflow:hidden;height:12px;vertical-align:middle;text-indent:-999px;}
.gnb .menu li.mn-pc.off .ico{width:27px;background-position:-65px -105px;;background:url(../img/icon/icon-off.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.gnb .menu li.mn-pc.on .ico{width:24px;background-position:-112px -105px;background:url(../img/icon/icon-on.svg) no-repeat 0 0;/*svg icon으로 변경*/}
.gnb .menu li.mn-event a::before{background-position:-84px -139px;}
.gnb .menu li.mn-ch a::before{background-position:-126px -139px;}
.gnb .menu li.mn-store a::before{background-position:-168px -139px;}
.gnb .menu li:hover a::before{background-position-y:-181px;}
.gnb .menu li:hover{transform:translateX(5px);}
.gnb .menu li:hover a{font-weight:600;}
.gnb .banner_rect{position:absolute;bottom:0;left:0;width:240px;height:220px;overflow:hidden;}
.gnb .banner_rect img{max-width:100%;}
.gnb .banner_rect a{display:block;transition:all .3s;}
.gnb .banner_rect a:hover{transform:translateX(5px);}
/*.gnb .banner_rect a::after{position:absolute;top:119px;right:14px;display:block;width:26px;height:26px;content:'';border-radius:100%;background:#f5f7f9 url(../img/sp-main.png) no-repeat -27px -98px;}*/


/* footer */
.footer_wrap{position:relative;background:#171717;}
.footer{position:relative;box-sizing:border-box;min-height:102px;margin:0 auto;padding:64px 64px 94px;text-align:left;color:rgba(255,255,255,.6);font-size:12px;}
.footer:after{display:block;clear:both;content:""}
.footer p{margin:0;padding:0}
.footer a{text-decoration:none;color:rgba(255,255,255,0.6);}
.ft_bx_lt{position:relative;float:left;text-align:left;}
.ft_bx_rt{position:relative;float:right;text-align:right;}
.ft_bx_ct{position:relative;width:100%;text-align:center;}
.ft_bx_ci{margin-bottom:34px;}
.ft_bx_ci .ft_ci{display:inline-block;overflow:hidden;width:120px;height:21px;margin:0 29px 0 0;cursor:pointer;text-align:left;vertical-align:middle;background-position:-178px 0;}
.ft_bx_rt .ft_bx_ci a{margin:0 0 0 29px;}
.ft_bx_ct .ft_bx_ci a{margin:0 14px 0 15px;}
/*.ft_bx_tw{padding-bottom:6px}
.ft_bx_tw .ft_tw_txt{padding:21px 0 12px;}
.ft_bx_tw .ft_tw_age{display:inline-block;width:50px;margin:0 auto;vertical-align:top}*/
.ft_bx_policy{padding-top:50px;font-size:12px;}
.ft_bx_policy span{display:inline-block;padding:0 10px;}
.ft_bx_copy{font-size:11px;}
.ft_bx_copy .ft_copy_add{margin-bottom:13px;color:rgba(255,255,255,.5);line-height:1.82;}
.ft_bx_copy .ft_copy{line-height:1.64;}
.ft_lang{position:absolute;top:0;right:86px;width:180px;height:32px;text-align:left;border-radius:3px;background:#080808;}
.ft_lang_current{cursor:pointer;}
.ft_lang_current span{display:block;padding-left:16px;color:rgba(164,164,164,.6);line-height:32px;}
.ft_lang_current .ft_ic_arrow{position:absolute;top:17px;right:11px;display:none;width:7px;height:4px;}
.ft_lang_list{position:absolute;right:0;bottom:32px;display:none;width:100%;text-align:left;border-radius:3px;background:#080808;}
.ft_lang.on .ft_lang_list{display:block}
.ft_lang_list ul{margin:0;padding:0 8px;list-style:none;}
.ft_lang_list li{border-bottom:1px solid #1D1D1D}
.ft_lang_list a{display:block;padding:10px 7px;cursor:pointer}
.ft_lang_list a:hover{color:rgba(256,256,256,1)}


/*
  Skeleton Page Loader
 */
 /*common*/
.ui_loader_skeleton .ui_loader_img_wrap{position: relative;}
.ui_loader_skeleton .ui_loader_img_wrap .dot{position: absolute;top:50%;left:50%;margin:-3px 0 0 -3px;width:6px;height:6px;border-radius:100%;background-color:#c5c8cc;}
.ui_loader_skeleton .ui_loader_img_wrap .dot::after,
.ui_loader_skeleton .ui_loader_img_wrap .dot::before{content: '';position: absolute;top:0;display: block;width:6px;height:6px;border-radius:100%;background-color:#c5c8cc;}
.ui_loader_skeleton .ui_loader_img_wrap .dot::before{left: -12px;}
.ui_loader_skeleton .ui_loader_img_wrap .dot::after{right: -12px;}

.ui_loader_skeleton .list, .ui_loader_skeleton .data_none,
.top_banner.ui_loader_skeleton .main_slide, .top_banner.ui_loader_skeleton .controls, .top_banner.ui_loader_skeleton .bx-wrapper, .top_banner.ui_loader_skeleton .thumbs_wrap{overflow: hidden;height:0;opacity: 0;transition: opacity .2s;padding:0;}

/*main top banner*/
.top_banner.ui_loader_skeleton .ui_loader_top_banner{position:absolute;top:0;left:0;width:100%;height:430px;background-color:#e4e6e8;}
.top_banner.ui_loader_skeleton .ui_loader_thumbs_wrap{position:absolute;bottom:0;left:0;width:100%;height:64px;background-color: #d9dbdd;}
.top_banner.ui_loader_skeleton .ui_loader_top_banner .dot,
.top_banner.ui_loader_skeleton .ui_loader_top_banner .dot::after,
.top_banner.ui_loader_skeleton .ui_loader_top_banner .dot::before{width:10px;height:10px;}
.top_banner.ui_loader_skeleton .ui_loader_top_banner .dot::before{left:20px;}
.top_banner.ui_loader_skeleton .ui_loader_top_banner .dot::after{right:20px;}

/*main mobile game list*/
.list_mobile.ui_loader_skeleton .ui_loader_ul{margin-left: -24px;}
.list_mobile.ui_loader_skeleton .ui_loader_ul li{float:left;height:354px;margin-left:24px;}
.list_mobile.ui_loader_skeleton .img_wrap.ui_loader_img_wrap{position:relative;display:block;width:202px;height:240px;margin-bottom:17px;border-radius:6px;background-color: #e5e6e8;}
.list_mobile.ui_loader_skeleton .ui_loader_ul .desc_wrap .ico{overflow:hidden;display:inline-block;width:44px;height:44px;margin-right:10px;border-radius:7px;vertical-align:middle;background-color: #e8eaed;}
.list_mobile.ui_loader_skeleton .ui_loader_ul .desc_wrap .title{display:inline-block;vertical-align:middle;}
.list_mobile.ui_loader_skeleton .ui_loader_ul .desc_wrap .title > p{height:13px;height:12px;border-radius:6px;background-color:#f1f1f1;}
.list_mobile.ui_loader_skeleton .ui_loader_ul .desc_wrap .title > p + p{margin-top:8px;}
.list_mobile.ui_loader_skeleton .ui_loader_ul .desc_wrap .ui_loader_p1{width:100px;}
.list_mobile.ui_loader_skeleton .ui_loader_ul .desc_wrap .ui_loader_p2{width:55px;}

/*main pc game list*/
.list_pc.ui_loader_skeleton .ui_loader_ul li{background:none;}
.list_pc.ui_loader_skeleton .ui_loader_ul .ui_loader_img_wrap{border-radius: 6px;background-color: #e5e6e8;}
.list_pc.ui_loader_skeleton .ui_loader_desc_wrap{padding-left:12px;}
.list_pc.ui_loader_skeleton .ui_loader_desc_wrap > p{background-color:#e5e6e8;height:12px;border-radius: 6px;}
.list_pc.ui_loader_skeleton .ui_loader_desc_wrap > p + p{margin-top:10px;}
.list_pc.ui_loader_skeleton .ui_loader_desc_wrap .ui_loader_p1{width:100px;}
.list_pc.ui_loader_skeleton .ui_loader_desc_wrap .ui_loader_p2{width:58px;}

/*sub mobile game list*/
.list_game.ui_loader_skeleton .ui_loader_ul{}
.list_game.ui_loader_skeleton .ui_loader_ul{margin:-34px -24px;}
.list_game.ui_loader_skeleton .ui_loader_ul li{overflow:hidden;position:relative;float:left;width:432px;height:180px;margin:34px 0 0 24px;border-radius:10px;background-color:#f8fafc;}
.list_game.ui_loader_skeleton .ui_loader_ul li > div{box-sizing:border-box;height: 180px;padding: 30px 15px 0 32px;}
.list_game.ui_loader_skeleton .ui_loader_img_wrap{background-color:#e7e8ea;}
.list_game.ui_loader_skeleton .ui_loader_desc_wrap{float:left;width:230px;padding-top:15px;}
.list_game.ui_loader_skeleton .ui_loader_desc_wrap > p{background-color:#e7e8ea;height:12px;border-radius: 6px;}
.list_game.ui_loader_skeleton .ui_loader_desc_wrap > p + p{margin-top:10px;}
.list_game.ui_loader_skeleton .ui_loader_p1{width:160px;}
.list_game.ui_loader_skeleton .ui_loader_p2{width:95px;}

/* common interaction */
.ui_loader_skeleton .shimmer_img, .ui_loader_skeleton .shimmer_p{background-image:linear-gradient(90deg, rgba(244,244,244,.2) 0px, rgba(229, 229, 229, 0.6) 40px, rgba(244,244,244,.2) 80px);background-size:600px;}
.ui_loader_skeleton .shimmer_img{animation: shimmerImg 2s infinite ease-out;}
.ui_loader_skeleton .shimmer_p{animation: shimmerLines 2s infinite ease-out;}
@keyframes shimmerLines{
  0%{
    background-position: -100px
  }
  40%, 100%{
    background-position: 150px
  }
}
@keyframes shimmerImg {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 208px;
  }
}