/* CSS Document */

/* ====================================================================
right
==================================================================== */

.right .banner{
position:relative;
overflow:hidden;
}
.right .banner a{
position:relative;
display:block;
}
.right .banner img{
position:absolute;
}
.newgame{
width:1020px;
padding-bottom:40px;
background-color:#f0f3f6;
}
.gamelist{
width:1020px;
padding-bottom:20px;
background-color:#e1e6eb;
}
@media screen and (max-width:807px){
	.newgame,
	.gamelist,
	.movielist{
	width:100%;
	}
	.right .banner{
	width:100%;
	}
	.right .banner a{
	width:100%;
	height:0;
	padding-top:73.6%;
	}
	.right .banner img{
	width:141.6%;
	top:0;
	left:0;
	}

}
@media screen and (max-width:1147px) and (min-width:808px){
	.newgame,
	.gamelist,
	.movielist{
	width:530px;
	}

	.right .banner{
	width:530px;
	height:390px;
	}
	.right .banner a{
	width:530px;
	height:390px;
	}
	.right .banner img{
	width:752px;
	top:0;
	left:0;
	}
}

@media screen and (max-width:1579px) and (min-width:1148px){
	.newgame,
	.gamelist,
	.movielist{
	width:775px;
	}
	.right .banner{
	width:775px;
	height:294px;
	}
	.right .banner a{
	width:775px;
	height:294px;
	}
	.right .banner img{
	width:775px;
	top:-405px;
	left:0;
	}
}
@media screen and (min-width:1580px){
	.newgame,
	.gamelist,
	.movielist{
	width:1020px;
	}
	.right .banner{
	width:1020px;
	height:390px;
	}
	.right .banner a{
	width:1020px;
	height:390px;
	}
	.right .banner img{
	top:-530px;
	left:0;
	}
}


/* ====================================================================
		banner
==================================================================== */
.right .banner{}

.right .banner .pagination{
position:absolute;
bottom:10px;
z-index:3;
width:100%;
text-align:center;
}
.right .banner .swiper-pagination-bullet{
width: 10px;
height: 10px;
margin:0 5px;
display: inline-block;
border-radius: 5px;
background: #fff;
opacity:0.5;
transition: all .2s ease 0s;
}
.right .banner .swiper-pagination-bullet-active {
width:20px;
opacity:1;
background: #fff;
}

.right .banner .arrow-l,
.right .banner .arrow-r{
position:absolute;
top:50%;
z-index:2;
width:40px;
height:40px;
margin-top:-20px;
border-radius:50%;
background-color:#fff;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
cursor:pointer;
transition:background .1s linear 0s;
}
.right .banner .arrow-l{left:15px;}
.right .banner .arrow-r{right:15px;}

.right .banner .arrow-l:hover,
.right .banner .arrow-r:hover{
background-color:#0aa0d2;
}
.right .banner .arrow-l::before,
.right .banner .arrow-r::before,
.right .banner .arrow-l::after,
.right .banner .arrow-r::after{
content:"";
position:absolute;
top:35%;
z-index:2;
display:block;
width:35%;
height:35%;
transform:rotateZ(45deg);
transition:background .1s linear 0s;
}
.right .banner .arrow-l::before{left:35%;}
.right .banner .arrow-r::before{right:35%;}

.right .banner .arrow-l::before,
.right .banner .arrow-r::before{
border-radius:2px;
background-color:#0aa0d2;
}
.right .banner .arrow-l:hover::before,
.right .banner .arrow-r:hover::before{
background-color:#fff;
}
.right .banner .arrow-l::after{left:55%;}
.right .banner .arrow-r::after{right:55%;}

.right .banner .arrow-l::after,
.right .banner .arrow-r::after{
border-radius:1px;
background-color:#fff;
}
.right .banner .arrow-l:hover::after,
.right .banner .arrow-r:hover::after{
background-color:#0aa0d2;
}


/* ====================================================================
		newgame
==================================================================== */
.right .newgame{
position:relative;
}

.newgame .sttl{
padding:32px 0 0 30px;
}
.newgame .sttl h2{
width:357px;
height:50px;
margin:0;
padding:0;
background:url(https://static.nexon.co.jp/nexon/ver2017/index/sttl_newgame.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}

.newgame .list{
position:relative;
padding:0 10px 0 30px;
}
.newgame .list ul{
white-space:nowrap;
font-size:0;
overflow:hidden;
}
.newgame .list li{
position:relative;
display:inline-block;
vertical-align:top;
width:225px;
padding-top:10px;
margin-right:20px;
}
.newgame .list li::after{
position:absolute;
top:2px;
left:207px;
z-index:2;
display:block;
width:36px;
height:36px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_gamelist_badge.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.newgame .list li.new::after{content:"新作";background-position:0 0;}
.newgame .list li.obt::after{content:"OBT";background-position:0 -36px;}
.newgame .list li.cbt::after{content:"CBT";background-position:0 -72px;}
.newgame .list li.br::after{content:"事前登録";background-position:0 -108px;}

.newgame .list .visual{
width:225px;
height:190px;
margin:0 auto;
}
.newgame .list .visual a{
display:block;
width:100%;
height:100%;
}

.newgame dl{
position:relative;
width:205px;
margin:17px auto 0;
padding-top:24px;
color:#1e1e1e;
}
.newgame dl dt{
margin-bottom:11px;
font-size:16px;
font-weight:bold;
white-space:normal;
}
.newgame dl dd{
height:85px;
line-height:1.8;
font-size:12px;
white-space:normal;
}
.newgame dl .genre{
position:absolute;
top:0;
height:16px;
padding-left:24px;
font-size:10px;
color:#6e6e6e
}
.newgame dl .genre.pc{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_pc_g.png) no-repeat;
}
.newgame dl .genre.sp{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_sp_g.png) no-repeat;
}

.newgame .btn.official{
width:126px;
height:25px;
margin:20px auto 0;
}
.newgame .btn.official a{
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_official_site_g.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.newgame .btn.official a:hover{background-position:0 -25px;}

/* ====================================================================
		gamelist
==================================================================== */
.gamelist .sttl{
padding:40px 0 0 30px;
}
.gamelist .sttl h2{
width:348px;
height:50px;
margin:0;
padding:0;
background:url(https://static.nexon.co.jp/nexon/ver2017/index/sttl_gamelist.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}

.gamelist .list{}
.gamelist .list ul{
display:flex;
flex-wrap:wrap;
padding-top:19px;
padding-left:20px;
}
.gamelist .list li{
position:relative;
width:225px;
height:142px;
z-index:1;
margin:0 10px 19px;
background-color:#fff;
transition:all .2s ease-out 0s;
}
.gamelist .list li.hold,
.gamelist .list li.open{
margin-bottom:418px;
}
.gamelist .list li.open{z-index:2;}

.gamelist .list li::after{
position:absolute;
top:-8px;
left:197px;
z-index:2;
display:block;
width:36px;
height:36px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_gamelist_badge.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.gamelist .list li.new::after{content:"新作";background-position:0 0;}
.gamelist .list li.obt::after{content:"OBT";background-position:0 -36px;}
.gamelist .list li.cbt::after{content:"CBT";background-position:0 -72px;}
.gamelist .list li.br::after{content:"事前登録";background-position:0 -108px;}

.gamelist .list li a{
display:block;
position:relative;
z-index:1;
width:100%;
height:100%;
}

.gamelist .list li a .image{
position:absolute;
top:-19px;
left:10px;
width:205px;
height:134px;
overflow:hidden;
}
.gamelist .list li a div.title{
position:absolute;
top:120px;
left:10px;
width:205px;
height:13px;
}
.gamelist .list li a div.other{
position:absolute;
top:85px;
left:10px;
width:205px;
height:30px;
}

.gamelist .list li a div.image span{
position:relative;
top:10px;
display:block;
width:205px;
height:135px;
background-position:0 -260px !important;
transition:all .2s ease-out 0s;
}
.gamelist .list li a div.title span{
display:block;
width:100%;
height:0;
padding-top:25px;
overflow:hidden;
background-position:-410px -260px !important;
}
.gamelist .list li a div.other span{
display:block;
width:100%;
height:0;
padding-top:30px;
overflow:hidden;
background-position:-205px -365px !important;
}

.gamelist .list li a:hover div.image{}
.gamelist .list li a:hover div.image span{
transform:translate3d(0,-10px,0);
}

.gamelist .list li a.btn.official{
position:absolute;
top:121px;
right:11px;
width:14px;
height:14px;
background:url(https://static.nexon.co.jp/nexon/ver2017/index/btn_list_official_site.png) no-repeat right top;
text-indent: 110%;
white-space: nowrap;
overflow: hidden;
z-index: 5;
}
.gamelist .list li a.btn.official:hover{
width:54px;
background-position:right bottom;
}

.gamelist .list li .bg{
position:absolute;
top:10px;
left:10px;
width:205px;
height:105px;
}
.gamelist .list li div.bg span{
display:block;
width:100%;
height:100%;
background-position:-205px -260px;
}

@keyframes thumbAnime{
0%{transform:translateY(0);}
100%{transform:translateY(-10px)}
}

.gamelist .list ul::after{}
.gamelist .list li .detail{
position:absolute;
top:162px;
display:block;
height:0;
transition:height .2s ease-out 0s;
}
.gamelist .list li.open .detail,
.gamelist .list li.hold .detail{
display:block;
height:398px;
}
.gamelist .list li .detail > div{
position:relative;
width:100%;
height:0;
background-color:#0aa0d2;
transition:height .2s ease-out 0s;
overflow:hidden;
}
.gamelist .list li.open .detail > div,
.gamelist .list li.hold .detail > div{
box-sizing:border-box;
height:378px;
}
.gamelist .list li.open .detail::after{
content:"";
position:absolute;
top:-11px;
left:0;
display:block;
width:21px;
height:21px;
background-color:#0aa0d2;
transform:rotateZ(45deg);
}

@media screen and (max-width:1147px) and (min-width:808px){
.gamelist .list li .detail{width:530px;}

.gamelist .list li:nth-child(2n+1) .detail{left:-30px;}
.gamelist .list li:nth-child(2n) .detail{left:-275px;}

.gamelist .list li:nth-child(2n+1) .detail::after{left:131px;}
.gamelist .list li:nth-child(2n) .detail::after{left:376px;}
}

@media screen and (max-width:1579px) and (min-width:1148px){
.gamelist .list li .detail{width:775px;}

.gamelist .list li:nth-child(3n+1) .detail{left:-30px;}
.gamelist .list li:nth-child(3n+2) .detail{left:-275px;}
.gamelist .list li:nth-child(3n) .detail{left:-520px;}

.gamelist .list li:nth-child(3n+1) .detail::after{left:131px;}
.gamelist .list li:nth-child(3n+2) .detail::after{left:376px;}
.gamelist .list li:nth-child(3n) .detail::after{left:621px;}
}
@media screen and (min-width:1580px){
.gamelist .list li .detail{width:1020px;}

.gamelist .list li:nth-child(4n+1) .detail{left:-30px;}
.gamelist .list li:nth-child(4n+2) .detail{left:-275px;}
.gamelist .list li:nth-child(4n+3) .detail{left:-520px;}
.gamelist .list li:nth-child(4n) .detail{left:-765px;}

.gamelist .list li:nth-child(4n+1) .detail::after{left:131px;}
.gamelist .list li:nth-child(4n+2) .detail::after{left:376px;}
.gamelist .list li:nth-child(4n+3) .detail::after{left:621px;}
.gamelist .list li:nth-child(4n) .detail::after{left:866px;}
}

.gamelist .list li .detail .preview{
position:absolute;
top:40px;
left:50%;
width:300px;
margin-left:-310px;
}

.gamelist .list li .detail .preview a{
position:relative;
display:block;
width:286px;
height:256px;
border:solid 7px #fff;
overflow:hidden;
}
.gamelist .list li .detail .preview .swiper-slide.movie a::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:60px;
height:60px;
margin-top:-30px;
margin-left:-30px;
background-color:#fff;
border-radius:50%;
overflow:hidden;
transition:background-color .2s linear 0s;
}
.gamelist .list li .detail .preview .swiper-slide.movie a::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:60px;
height:60px;
margin-top:-30px;
margin-left:-30px;
background:url(https://static.nexon.co.jp/nexon/ver2017/index/btn_movielist_play_s.png) no-repeat;
background-size:100% 200%;
}
.gamelist .list li .detail .preview .swiper-slide.movie a:hover::before{
background-color:#d20000;
}
.gamelist .list li .detail .preview .swiper-slide.movie a:hover::after{
background-position:0 100%;
}
.gamelist .list li .detail .preview .swiper-slide.movie a img{
height:256px;
margin-left:-100px;
}

.gamelist .list li .detail .preview .pagination{
margin-top:8px;
text-align:center;
}
.gamelist .list li .detail .preview .swiper-pagination-bullet{
width: 10px;
height: 10px;
margin:0 5px;
display: inline-block;
border-radius: 5px;
background: #fff;
opacity:0.5;
transition: all .2s ease 0s;
}
.gamelist .list li .detail .preview .swiper-pagination-bullet-active {
width:20px;
opacity:1;
background: #fff;
}

.gamelist .list li .detail dl{
position:relative;
width:300px;
left:50%;
padding-top:74px;
margin-left:10px;
color:#fff;
}

.gamelist .list li .detail dl dt{
font-size:16px;
font-weight:bold;
}
.gamelist .list li .detail dl dd{}

.gamelist .list li .detail dl dd.genre{
position:absolute;
top:50px;
left:0;
height:16px;
padding-left:23px;
font-size:11px;
}
.gamelist .pcgame .list li .detail dl dd.genre{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_pc_w.png) no-repeat;
}
.gamelist .spgame .list li .detail dl dd.genre{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_sp_w.png) no-repeat;
}


.gamelist .list li .detail dl dd.text{margin-top:11px;}

.gamelist .list li .detail dl dd.official{
margin-top:20px;
}
.gamelist .list li .detail dl dd.official a{
display:block;
width:126px;
height:25px;
margin:0 auto;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_official_site_w.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.gamelist .list li .detail dl dd.official a:hover{
background-position:0 -25px;
}

.gamelist .list li .detail .arrow-l,
.gamelist .list li .detail .arrow-r{
position:absolute;
top:169px;
z-index:2;
display:none;
width:40px;
height:40px;
/*margin-top:-20px;*/
border:solid 1px #fff;
border-radius:50%;
background-color:#0aa0d2;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
cursor:pointer;
transition:background .1s linear 0s;
}
.gamelist .list li.open .detail .arrow-l,
.gamelist .list li.open .detail .arrow-r,
.gamelist .list li.hold .detail .arrow-l,
.gamelist .list li.hold .detail .arrow-r{
display:block;
}
.gamelist .list li .detail .arrow-l{left:15px;}
.gamelist .list li .detail .arrow-r{right:15px;}

.gamelist .list li .detail .arrow-l:hover,
.gamelist .list li .detail .arrow-r:hover{
background-color:#fff;
}
.gamelist .list li .detail .arrow-l::before,
.gamelist .list li .detail .arrow-r::before,
.gamelist .list li .detail .arrow-l::after,
.gamelist .list li .detail .arrow-r::after{
content:"";
position:absolute;
top:35%;
z-index:2;
display:block;
width:35%;
height:35%;
transform:rotateZ(45deg);
transition:background .1s linear 0s;
}
.gamelist .list li .detail .arrow-l::before{left:35%;}
.gamelist .list li .detail .arrow-r::before{right:35%;}

.gamelist .list li .detail .arrow-l::before,
.gamelist .list li .detail .arrow-r::before{
border-radius:2px;
background-color:#fff;
}
.gamelist .list li .detail .arrow-l:hover::before,
.gamelist .list li .detail .arrow-r:hover::before{
background-color:#0aa0d2;
}
.gamelist .list li .detail .arrow-l::after{left:55%;}
.gamelist .list li .detail .arrow-r::after{right:55%;}

.gamelist .list li .detail .arrow-l::after,
.gamelist .list li .detail .arrow-r::after{
border-radius:1px;
background-color:#0aa0d2;
}
.gamelist .list li .detail .arrow-l:hover::after,
.gamelist .list li .detail .arrow-r:hover::after{
background-color:#fff;
}

.gamelist .list li .detail .btn.close{
position:absolute;
top:10px;
right:10px;
width:14px;
height:14px;
}
.gamelist .list li .detail .btn.close a{
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_close_s.png);
background-size:100%;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
transition:transform .2s ease 0s;
}

.gamelist .list li .detail .btn.close a:hover{
transform:rotateZ(90deg);
}

@media screen and (max-width:1147px){
.gamelist .list li .detail .preview{display:none;}
.gamelist .list li .detail dl{margin-left:-150px;}
}

.gamelist .pcgame{}
.gamelist .pcgame .category{
padding:0 30px;
}
.gamelist .pcgame .category h3{
width:auto;
height:40px;
margin:0;
padding:0;
background:#fff url(https://static.nexon.co.jp/nexon/ver2017/index/sttl_gamelist_pc.png) no-repeat 20px 0;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}

.gamelist .spgame{}
.gamelist .spgame .category{
padding:0 30px;
}
.gamelist .spgame .category h3{
width:auto;
height:40px;
margin:0;
padding:0;
background:#fff url(https://static.nexon.co.jp/nexon/ver2017/index/sttl_gamelist_sp.png) no-repeat 20px 0;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}

/* ====================================================================
		movielist
==================================================================== */
.movielist{
box-sizing:border-box;
padding:40px 0 20px 30px;
background-color:#f0f3f6;
}
.movielist .sttl{
width:377px;
height:29px;
background:url(https://static.nexon.co.jp/nexon/ver2017/index/sttl_movielist.png) no-repeat left top;
}
.movielist .sttl h2{display:none;}

.movielist .list{margin-top:30px;}

.movielist .list ul{
display:flex;
flex-wrap:wrap;
}
.movielist .list li{
position:relative;
width:102px;
height:102px;
margin:0 20px 20px 0;
}
.movielist .list li.new::after{
content:"";
position:absolute;
top:5px;
right:5px;
z-index:2;
display:block;
width:17px;
height:17px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_new.png) no-repeat;
}

.movielist .list li a{
position:relative;
z-index:1;
display:block;
width:100%;
height:100%;
border-radius:50%;
overflow:hidden;
}
.movielist .list li a img{
position:relative;
left:-37.5%;
z-index:1;
height:100%;
}

.movielist .list li.align-left a img{
left:0;
}
.movielist .list li.align-right a img{
left:-76%;
}

.movielist .list li a:hover::before{
content:"";
position:absolute;
top:0;
left:0;
z-index:3;
width:102px;
height:102px;
background:url(https://static.nexon.co.jp/nexon/ver2017/index/btn_movielist_play.png) no-repeat;
}
.movielist .list li a::after{
content:"";
position:absolute;
z-index:2;
top:-52px;
left:-52px;
width:104px;
height:104px;
border:solid 51px #d20000;
border-radius:50%;
transition:all .2s ease 0s;
}
.movielist .list li a:hover::after{
top:0;
left:0;
width:0;
height:0;
}



/* ====================================================================
		hidden item
==================================================================== */
.tab-contents .sp-tab,
.tab-contents .sp-tab{
display:none;
}


/* CSS Document */
@media screen and (max-width:807px){
.container{
display:block;
margin:0;
box-shadow:none;
}

.right .banner{
background-color:#f5f5f5;
}

.right .banner .pagination{
position:relative;
bottom:auto;
padding:4.1% 0;
text-align:center;
}
.right .banner .swiper-pagination-bullet{
width: 2.7vw;
height: 2.7vw;
margin:0 1.4vw;
display: inline-block;
border-radius: 1.4vw;
background: #d2d2d2;
opacity:1;
transition: all .2s ease 0s;
}
.right .banner .swiper-pagination-bullet-active {
width:5.4vw;
background: #0aa0d2;
}
.right .banner .arrow-l,
.right .banner .arrow-r{
display:none;
}

.tab-contents{
background-color:#e1e6eb;
}

.tab-contents .sp-tab{
display:block;
padding:6.25% 0;
background-color:#fff;
}
.tab-contents .sp-tab ul{
margin-left:4.1%;
font-size:0;
}
.tab-contents .sp-tab ul li{
position:relative;
display:inline-block;
padding:0 2.7%;
}
.tab-contents .sp-tab ul li+li::before{
content:"";
position:absolute;
top:1vw;
left:0;
display:block;
width:1px;
height:4vw;
background-color:#b4b4b4;
}
.tab-contents .sp-tab ul li a{
font-size:3.8vw;
color:#b4b4b4;
}
.tab-contents .sp-tab ul li.current a{
text-decoration:none;
color:#1e1e1e;
}

.tab-contents section.pcgame,
.tab-contents section.spgame,
.tab-contents section.movielist{
display:none;
}
.tab-contents section.pcgame.active,
.tab-contents section.spgame.active,
.tab-contents section.movielist.active{
display:block;
}


.gamelist{
padding-bottom:0;
background-color:#e1e6eb;
}
.gamelist .list{
padding:4.1% 0;
}
.gamelist .list ul{
display:block;
padding:0;
}
.gamelist .list li{
position:relative;
width:91.6%;
height:auto;
margin:0 auto;
padding:3% 0;
background-color:#fff;
}
.gamelist .list li.hold,
.gamelist .list li.open{
margin-bottom:0;
}

.gamelist .list li+li{
margin-top:4.1%;
}
.gamelist .list li::after{
position:absolute;
top:0;
left:88.9%;
z-index:2;
display:block;
width:13.9%;
height:0;
padding-top:13.9%;
margin-top:-2.2%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_gamelist_badge_sp.png) no-repeat;
background-size:cover;
overflow:hidden;
}
.gamelist .list li.new::after{content:"新作";background-position:0 0;}
.gamelist .list li.obt::after{content:"OBT";background-position:0 33.3%;}
.gamelist .list li.cbt::after{content:"CBT";background-position:0 66.6%;}
.gamelist .list li.br::after{content:"事前登録";background-position:0 100%;}


.gamelist .list li > a{
display:none;
}

.gamelist .list li .bg{
position:relative;
top:auto;
left:auto;
width:93.9%;
height:0;
padding-top:39.3%;
margin:0 auto;
}
.gamelist .list li div.bg span{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background-position:0 0;
background-size:100%;
}

.gamelist .list li .detail{
position:static;
top:auto;
display:block;
width:100%;
height:auto;
}
.gamelist .list li.open .detail{
height:auto;
}

.gamelist .list li .detail > div{
position:relative;
width:100%;
height:auto;
background-color:#fff;
}
.gamelist .list li.open .detail > div{
height:auto;
}
.gamelist .list li.open .detail::after{
display:none;
}


.gamelist .list li .detail dl{
position:relative;
width:93.9%;
left:auto;
padding-top:4.1%;
margin:4.2% auto 0;
color:#1e1e1e;
}
.gamelist .list li .detail dl dt{
padding-bottom:0;
background:none;
font-size:4.4vw;
font-weight:bold;
}
.gamelist .list li .detail dl dd{
font-size:3.3vw;
line-height:1.5;
}

.gamelist .list li .detail dl dd.genre{
position:absolute;
top:0;
left:0;
height:3.0vw;
margin-bottom:0.8%;
padding-left:5.1%;
font-size:2.5vw;
color:#6e6e6e;

}
.gamelist .pcgame .list li .detail dl dd.genre{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_pc_g.png) no-repeat;
background-size:auto 100%;
}
.gamelist .spgame .list li .detail dl dd.genre{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_sp_g.png) no-repeat;
background-size:auto 100%;
}

.gamelist .list li .detail dl dd.text{margin-top:0;}

.gamelist .list li .detail dl dd.official{
	margin-top:4.0%;
}
.gamelist .list li .detail dl dd.official a{
position:relative;
display:block;
width:100%;
height:auto;
margin:0 auto;
padding:3.0% 0;
background:none;
background-color:#0aa0d2;
text-indent:0;
text-decoration:none;
text-align:center;
font-size:4.4vw;
font-weight:bold;
color:#fff;
}
.gamelist .list li .detail dl dd.official a:hover{
background-color:#0aaadc;
}
.gamelist .list li .detail dl dd.official a::after{
content:"";
position:absolute;
top:50%;
right:6.4%;
display:block;
width:3.2%;
height:0;
margin-top:-2.0%;
padding-top:4.3%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_w.png) no-repeat;
background-size:contain;
}

.movielist{
box-sizing:border-box;
padding:0;
background-color:#e1e6eb;
}
.movielist .list{
margin:0;
padding:4.1% 0;
}
.movielist .list ul{
display:block;
width:91.6%;
margin:0 auto;
}
.movielist .list ul li{
box-sizing:border-box;
width:100%;
height:auto;
margin:0;
padding:3%;
background-color:#fff;
}
.movielist .list li+li{
margin-top:4.1%;
}

.movielist .list li.new::after{
content:"";
position:absolute;
top:0;
left:88.9%;
z-index:2;
display:block;
width:13.9%;
height:0;
padding-top:13.9%;
margin-top:-2.2%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_new_sp.png) no-repeat;
background-size:cover;
overflow:hidden;
}


.movielist .list ul li a{
position:relative;
z-index:1;
display:block;
width:100%;
height:0;
padding-top:53.0%;
border-radius:0;
overflow:hidden;
}
.movielist .list li a img{
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;
height:auto;
}
.movielist .list ul li a:hover img{
opacity:0.8
}
.movielist .list li.align-left a img{left:0;}
.movielist .list li.align-right a img{left:0;}

.movielist .list li a::after{
content:"";
position:absolute;
z-index:2;
top:50%;
left:50%;
width:15.4%;
height:0;
padding-top:15.4%;
border:none;
border-radius:50%;
background:#fff url(https://static.nexon.co.jp/nexon/ver2017/index/btn_movielist_play_sp.png) no-repeat;
background-size:100% 200%;
background-position:0 0;
margin-left:-7.7%;
margin-top:-7.7%;
transition:none;
}
.movielist .list li a:hover::after{
top:50%;
left:50%;
width:15.4%;
height:0;
padding-top:15.4%;
background-color:#d91226;
background-position:0 100%;
}

.movielist .list li a:hover::before{
display:none;
}

/* ====================================================================
	hidden
==================================================================== */

.right .gamelist .sttl,
.right .gamelist .category,
.right .gamelist .preview,
.right .gamelist .arrow-l,
.right .gamelist .arrow-r,
.right .gamelist .btn.close,
.right .movielist .sttl,
.right .newgame{
display:none !important;
}

}