@charset "utf-8";
@import "common.css";
@import "layout.css";

#content.content_nm_main{padding-top:500px;}

/* brand banner */
.top_banner .bx-wrapper, .top_banner .main_slide{position:absolute;top:0;left:0;overflow:hidden;box-sizing:border-box;width:100%;height:430px;/*padding-left:240px;*/background-color:#000;}
.top_banner .bx-wrapper .main_slide{padding-left:0;}
.img_wrap{width:100%;height:430px;background-repeat:no-repeat;background-position:50% 0;}
.top_banner .controls button{position:absolute;z-index:70;top:20px;right:20px;width:31px;height:31px;transition:opacity .2s;opacity:0.6;outline: none;}
.top_banner .controls button:hover{opacity:1;}
.top_banner .controls .btn_play{background-position:0 -223px;}
.top_banner .controls .btn_play.on{background-position:-51px -223px;}
.top_banner .slide{position:relative;}
.main_slide{overflow:hidden;}
.main_slide .slide{width:100% !important;height:430px;}
.main_slide .slide a{position:relative;z-index:1;display:block;width:100%;height:430px;}
.main_slide .bg{position:absolute;top:0;left:0;width:100%;height:430px;transition:transform .3s;background-repeat:no-repeat;background-position:50% 0;}
.main_slide .slide:hover .bg{transform:scale(1.02);}
.main_slide .contents_inner{position:relative;z-index:10;/*box-sizing:border-box;*/width:1338px;height:430px;margin:0 auto;padding:0 0 0 240px;}
.thumbs_wrap{position:absolute;z-index:60;top:366px;left:0;box-sizing:border-box;width:100%;height:64px;padding:0 0 0 240px;transition:opacity .3s;opacity:.6;background-color:rgba(0,0,0,.3);}
.thumbs_wrap:hover{opacity:1;}
.main_thumbs{z-index:20;box-sizing:border-box;width:1410px;height:64px;margin:0 auto;padding:0 44px 0 26px !important;}
.main_thumbs .slide{position:relative;float:left;width:20%;height:100%;

cursor:pointer;
cursor: pointer;text-align: center;text-align: center;letter-spacing:-0.24px;
color:rgba(248,248,248,.6);background:none;font-family:"NotoSansKR_Bold";font-size:14px;}
.main_thumbs .slide.active{color:#f9f9f9;}
.main_thumbs .progress{position:absolute;top:0;left:0;height:100%;transition:opacity .6s;opacity:0;background-color:rgba(255,255,255,.26);}
.main_thumbs .slide.active .progress{opacity:1;}
.main_thumbs .slide.active::after{position:absolute;z-index:1;bottom:0;left:0;display:block;width:100%;height:4px;content:'';background-color:#e13e30;}
.main_thumbs .text{position:relative;z-index:10;width:100%;height:64px;text-align:cnter;vertical-align:middle;line-height: 64px;;}

.section{float:left;}

/* game list */
.list_mobile{width:880px;margin-right:90px;}
.list_mobile .list{margin-left:-24px;}
.list_mobile .list::after{visibility:hidden;clear:both;height:0px;content:'';opacity:0;}
.list_mobile .list .img_wrap{position:relative;overflow:hidden;display:block;width:202px;height:240px;margin-bottom:17px;transition:all .2s;border-radius:6px;box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;}
.list_mobile .list .img_wrap::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;display:block;background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 56%, #000000 93%);}
.list_mobile .list .img_wrap .thumb_wrap{display:block;}
.list_mobile .list .img_wrap .thumb_wrap .img{width:100%;height:100%;}
.list_mobile .list .img_wrap .thumb_wrap .bi{z-index:1;position:absolute;bottom:16px;left:20px;display:block;width:75px;height:44px}
.list_mobile .list .dimmed_wrap{z-index:2;position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;padding-top:74px;transition:all .2s;opacity:0;text-align:center;background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(to bottom, rgba(0, 0, 0, 0) 31%, #000000 73%);}
.list_mobile .list .dimmed_wrap .link_official{z-index:2;position:absolute;top:170px;left:0;display:block;width:100%;height:24px;background:url(../img/btn-official.png) no-repeat 50% 0;}
.list_mobile .list .dimmed_wrap .link_view{display:block;height:88px;}
.list_mobile .list .dimmed_wrap .link_view img{display:inline-block;width:150px;height:88px;}
.list_mobile .list .desc_wrap{position:relative;display:table;}
.list_mobile .list .desc_wrap .ico{overflow:hidden;display:table-cell;width:44px;height:44px;margin-right:10px;vertical-align:top;}
.list_mobile .list .desc_wrap .ico img{width:100%;border-radius:7px;}
.list_mobile .list .desc_wrap .title{display:table-cell;vertical-align:middle;padding-left:12px;}
.list_mobile .list .desc_wrap strong{display:block;margin-bottom:4px;letter-spacing:-0.54px;color:#212121;font-size:15px; font-weight:normal;line-height:1.2;}
.list_mobile .list .desc_wrap i{display:block;text-decoration:none;letter-spacing:-0.2px;opacity:0.4;color:#212121;font-size:12px;font-style:normal;line-height:1.33;}
.list_mobile .list li{float:left;width:202px;height:354px;margin-left:24px;}
.list_mobile .list .img_wrap:hover .dimmed_wrap{opacity:1;}
.list_mobile .list .img_wrap:hover{transform:translateY(-10px);box-shadow:0 26px 23px -6px rgba(140, 142, 166, 0.65);}

.list_pc{width:368px;margin-bottom:124px;}
.list_pc li{position:relative;height:114px;margin-top:20px;transition:all .2s;border-radius:6px;background-color:#f8fafc;}
.list_pc li:first-child{margin-top:0;}
.list_pc .list li:hover{transform:translateY(-11px);box-shadow:0 26px 23px -6px rgba(140, 142, 166, 0.65);}
.list_pc a{display:table;}
.list_pc .img_wrap{display:table-cell;overflow:hidden;width:182px;height:114px;border-radius:6px 0 0 6px;}
.list_pc .desc_wrap{display:table-cell;box-sizing:border-box;width:186px;height:114px;padding:0 30px;vertical-align:middle;}
.list_pc .desc_wrap .title{display:block;letter-spacing:-0.6px;color:#2e2e2e;font-size:17px;line-height:1.65;font-weight:normal;}
.list_pc .desc_wrap .cate{display:block;margin-top:3px;letter-spacing:-0.09px;color:#929292;font-size:14px;font-style:normal;}
.list_pc .ico_label{position:absolute;top:12px;right:12px;}

.bottom_banner{overflow:hidden;width:970px;height:406px;border-radius:6px 0 0 6px;}
.bottom_banner a{display:block;}
.bottom_banner img{transition:transform .3s;}
.bottom_banner a:hover img{transform:scale(1.05)}

.list_pc_all{overflow: hidden;position: relative;box-sizing:border-box;width:368px;height:406px;padding:36px 0 0 45px;border-radius:0 6px 6px 0;background-image:linear-gradient(227deg, rgba(102, 112, 132, 0.8), rgba(34, 30, 42, 0) 33%), linear-gradient(to bottom, #1e2023, #1e2023);}
.list_pc_all::before{content: '';display: block;position: absolute;top:0;left:0;right:0;bottom:0;background-color:#1e2023;}
.list_pc_all .section_title{position: relative;z-index: 1;padding-bottom:45px;letter-spacing:-1px;color:#fff;color:#fff;font-family:"NotoSansCJKkr";font-size:20px;line-height:1.4;}
.list_pc_all ul{position: relative;z-index: 1;width:306px;margin-left:3px}
.list_pc_all li{float:left;width:102px;height:30px}
.list_pc_all li a{letter-spacing:-0.31px;color:#ccc;font-size:12px;line-height:2.29;}
.list_pc_all li a:hover{transition:color .3s;color:#5d8eff;}

.notice_wrap{float:none;clear:both;padding-top:30px;}
.notice_wrap .sp_ico{display:inline-block;width:17px;height:20px;vertical-align:middle;background-position:-104px -47px;}
.notice_wrap .text{display:inline-block;margin-left:10px;}
.notice_wrap .text a{display:block;letter-spacing:-0.34px;opacity:0.6;color:#171717;font-size:12px;line-height:1.83;}