/* CSS Document */
/* ====================================================================
right
==================================================================== */
.right{
background-color:#f0f3f6;
color:#1e1e1e;
}
.right > article,
.container.single > article{
padding:40px 0;
}
.container.single.login > article{
padding:30px 0;
}

.left .submenu{
padding:20px 0;
background-color:#f0f3f6;
}

.left .submenu dt{
margin:0 15px;
padding-bottom:20px;
border-bottom:2px solid #65696a;
}
.left .submenu dd{
margin:0 15px;
}
.left .submenu ul{

}
.left .submenu ul li{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}
.left .submenu ul li a{
position:relative;
display:block;
box-sizing:border-box;
height:45px;
padding-top:12px;
text-decoration:none;
font-size:14px;
font-weight:bold;
color:#1e1e1e;
}
.left .submenu ul li a span{
font-size:12px;
}
.left .submenu ul li.m2l a{
height:62px;
}
.left .submenu ul li.active a,
.left .submenu ul li a:hover{
color:#0aa0d2;
}
.left .submenu ul li a::after{
content:"";
position:absolute;
top:50%;
right:0;
margin-top:-6px;
display:block;
width:8px;
height:12px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_submenu.png) no-repeat 0 0;
}
.left .submenu ul li.blank a::after{
content:"";
position:absolute;
top:50%;
right:0;
margin-top:-6px;
display:block;
width:16px;
height:12px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_window_submenu.svg) no-repeat 0 0;
}

.left .submenu ul li.active a::after,
.left .submenu ul li a:hover::after{
background-position:0 -12px;
}

.paging{

}

.paging ul{
text-align:center;
}
.paging li{
display:inline-block;
width:25px;
height:25px;
box-sizing:border-box;
vertical-align:middle;
}
.paging li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
text-align:center;
color:#788796;
white-space:nowrap;
line-height:25px;
vertical-align:middle;
}
.paging li a:hover{
color:#0aa0d2;
}
.paging li.now{
color:#0aa0d2;
border:solid 1px #0aa0d2;
text-align:center;
line-height:23px;
vertical-align:middle;
}
.paging .prev,
.paging .next{
width:13px;
height:20px;
margin:0 15px;
}
.paging .prev a,
.paging .next a{
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_paging_s.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.paging .next a{transform:rotate(180deg);}

.paging .prev a:hover,
.paging .next a:hover{background-position:0 100%;}

.btn.return{display:none;}

/* ====================================================================
	container resize
==================================================================== */

@media screen and (max-width:807px){
	.right article{width:100%;}
	.container.single > article,
	.right > article{padding:5.5% 0;}
}
@media screen and (max-width:1147px) and (min-width:808px){
	.right article{width:530px;}
}
@media screen and (max-width:1579px) and (min-width:1148px){
	.right article{width:775px;}
}
@media screen and (min-width:1580px){
	.right article{width:1020px;}
}



/* ====================================================================
	sp
==================================================================== */
@media screen and (max-width:807px){

.left .submenu{
display:none;
position:relative;
width:84.7%;
left:-100%;
}
.left .submenu{
transition:left 0.3s ease-out 0s;
}
.left.open .submenu{
left:0%;
}

.paging{}
.paging:last-child{
padding-bottom:5.5vw;
}

.paging ul{
text-align:center;
font-size:0;
}
.paging li{
display:inline-block;
width:5.5vw;
height:5.5vw;
box-sizing:border-box;
vertical-align:middle;
}
.paging li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
text-align:center;
font-size:2.5vw;
color:#788796;
white-space:nowrap;
line-height:5.5vw;
vertical-align:middle;
}
.paging li a:hover{
color:#0aa0d2;
}
.paging li.now{
color:#0aa0d2;
border:solid 1px #0aa0d2;
text-align:center;
font-size:2.5vw;
line-height:5.5vw;
vertical-align:middle;
}
.paging .prev,
.paging .next{
width:2.7vw;
height:4.1vw;
margin:0;
}
.paging .prev{margin-right:4.1%;}
.paging .next{margin-left:4.1%;}

.paging .prev a,
.paging .next a{
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_paging_s.png) no-repeat;
background-size:100% 200%;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.paging .next a{transform:rotate(180deg);}

.paging .prev a:hover,
.paging .next a:hover{background-position:0 100%;}


.btn.return{
position:relative;
display:block;
width:35%;
padding-top:35%;
border:5px solid #f0f3f6;
border-radius:50%;
overflow:hidden;
}
.btn.return a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
display:block;
background-color:#0aa0d2;
color:#fff;
}



}