/* CSS Document */
@import url(commonfooter.css);

*{-webkit-backface-visibility:hidden;}
a:focus,*:focus{outline:none;}

/* ====================================================================
	header
==================================================================== */
header{
position:relative;
box-sizing:border-box;
width:100%;
z-index:5;
background-color:#fff;
}
header .menu{
position:relative;
width:100%;
height:72px;
border-bottom:4px solid #0aa0d2;
}
header .menu h1{
position:absolute;
top:0;
left:50%;
margin-left:-642px;
box-sizing:border-box;
width:290px;
height:72px;
border-left:solid 1px #c8d2d2;
border-right:solid 1px #c8d2d2;
}
header .menu h1 a,
header .menu h1 span{
position:absolute;
top:19px;
left:87px;
display:block;
width:115px;
height:0;
padding-top:36px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/logo_nexon.svg) no-repeat;
overflow:hidden;
}
header .menu ul{
position:absolute;
top:0;
left:50%;
width:994px;
height:72px;
font-size:0;
margin-left:-352px;
padding:0;
}
header .menu ul li{
display:inline-block;
margin:0;
padding:0
}
header .menu ul li a{
display:block;
width:197px;
height:0;
padding-top:72px;
border-right:solid 1px #c8d2d2;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/menu.png) no-repeat;
overflow:hidden;
transition:background .3s ease 0s;
}

header .menu ul li:last-child a{
width:201px;
}
header .menu ul li:first-child a{display:none;}

header .menu ul li:nth-child(2) a{background-position:0 0;}
header .menu ul li:nth-child(3) a{background-position:-198px 0;}
header .menu ul li:nth-child(4) a{background-position:-396px 0;}
header .menu ul li:nth-child(5) a{background-position:-594px 0;}
header .menu ul li:nth-child(6) a{background-position:-792px 0;}

header .menu ul li:nth-child(2) a:hover{background-position:0 -72px;}
header .menu ul li:nth-child(3) a:hover{background-position:-198px -72px;}
header .menu ul li:nth-child(4) a:hover{background-position:-396px -72px;}
header .menu ul li:nth-child(5) a:hover{background-position:-594px -72px;}
header .menu ul li:nth-child(6) a:hover{background-position:-792px -72px;}

header .menu ul li.current:nth-child(2) a{background-position:0 -144px;}
header .menu ul li.current:nth-child(3) a{background-position:-198px -144px;}
header .menu ul li.current:nth-child(4) a{background-position:-396px -144px;}
header .menu ul li.current:nth-child(5) a{background-position:-594px -144px;}
header .menu ul li.current:nth-child(6) a{background-position:-792px -144px;}

.important-alert,
.security-alert{
position:relative;
z-index:3;
width:100%;
padding:20px 0;
text-align:center;
}
.important-alert{
background-color:#d20000;
}
.security-alert{
background-color:#ff5500;
}
.important-alert a,
.security-alert a{
width:100%;
font-size:16px;
font-weight:bold;
color:#fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
header .left-open,
header .menu-open,
header .btn.close{
display:none;
}
/* ====================================================================
	breadcrumb
==================================================================== */
nav.breadcrumb{
position:relative;
z-index:3;
width:100%;
padding:10px 0 13px;
background-color:#0aa0d2;
color:#fff;
}
nav.breadcrumb ul{
box-sizing:border-box;
margin:0 auto;
font-size:0;
}
nav.breadcrumb li{
display:inline-block;
font-size:12px;
}
nav.breadcrumb li:not(:first-child)::before{
content:">";
margin:0 9px;

}
nav.breadcrumb a{
color:#fff;
}

/* ====================================================================
	container
==================================================================== */
.main{
position:relative;
z-index:4;
width:100%;
padding:60px 0;
}
.sp-mode .main{
background-color:#d2dae6;
}
.container{
display:flex;
flex-direction:row;
margin:0 auto;
}
.container.single{
display:block;
background-color:#f0f3f6;
}
.container.all{
display:block;
width:100%;
}


/* ====================================================================
	left
==================================================================== */
.left{
align-self:stretch;
box-sizing:border-box;
width:260px;
background-color:#fff;
z-index:2;
padding-bottom:40px;
}

.left .login-area .login-nx{
width:260px;
height:198px;
}
.left .login-area .login-openid,
.left .login-area .regist-id,
.left .pointcharge,
.left .otp{
width:260px;
height:96px;
}

.left .login-area .login-nx a,
.left .login-area .login-openid a,
.left .login-area .regist-id a,
.left .pointcharge a,
.left .otp a{
position:relative;
display:block;
width:100%;
height:100%;
text-indent:110%;
transition: background-color 0.2s ease 0s;
white-space:nowrap;
overflow:hidden;
}
.left .login-area .login-nx a{background-color:#0aa0d2;}
.left .login-area .login-nx a:hover{background-color:#0aaadc;}

.left .login-area .login-openid a{background-color:#f0f0f0;}
.left .login-area .login-openid a:hover{background-color:#fafafa;}

.left .login-area .regist-id a{background-color:#d20000;}
.left .login-area .regist-id a:hover{background-color:#e60a0a;}

.left .pointcharge a{background-color:#0aa0d2;}
.left .pointcharge a:hover{background-color:#0aaadc;}

.left .otp a{background-color:#96be00;}
.left .otp a:hover{background-color:#a0c800;}

.left .login-area .login-nx a::before,
.left .login-area .login-openid a::before,
.left .login-area .regist-id a::before,
.left .pointcharge a::before,
.left .otp a::before{
content:"";
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
}
.left .login-area .login-nx a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_login_nexonid.png) no-repeat center center;
}
.left .login-area .login-openid a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_login_openid_3.png) no-repeat center center;
}
.left .login-area .regist-id a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_regist_nexonid.png) no-repeat center center;
}
.left .pointcharge a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_pointcharge.png) no-repeat center center;
}
.left .otp a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_otp.png) no-repeat center center;
}

.left .login-area .login-nx a::after,
.left .login-area .login-openid a::after,
.left .login-area .regist-id a::after,
.left .pointcharge a::after,
.left .otp a::after{
content:"";
position:absolute;
top:50%;
right:14px;
display:block;
width:9px;
height:13px;
margin-top:-7px;
transition: right 0.2s ease 0s;
}
.left .login-area .login-nx a::after,
.left .login-area .regist-id a::after,
.left .pointcharge a::after,
.left  .otp a::after{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_s_w.png) no-repeat;
}
.left .login-area .login-openid a::after{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_s_b.png) no-repeat;
}
.left .login-area .login-nx a:hover::after,
.left .login-area .login-openid a:hover::after,
.left .login-area .regist-id a:hover::after,
.left .pointcharge a:hover::after,
.left .otp a:hover::after{right:10px;}

.left .user-info .account{
position:relative;
width:260px;
height:130px;
background-color:#14416e;
}

.left .user-info .account .name{
padding-top:32px;
text-align:center;
font-size:13px;
color:#fff;
}
.left .user-info .account .name a{
color:#fff;
}

.left .user-info .account .mypage,
.left .user-info .account .logout{
position:absolute;
top:70px;
width:96px;
height:25px;
}
.left .user-info .account .mypage{left:29px;}
.left .user-info .account .logout{right:29px;}

.left .user-info .account .mypage a,
.left .user-info .account .logout a{
display:block;
width:100%;

height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_account.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.left .user-info .account .mypage a{background-position:0 0;}
.left .user-info .account .logout a{background-position:-96px 0;}
.left .user-info .account .mypage a:hover{background-position:0 -25px;}
.left .user-info .account .logout a:hover{background-position:-96px -25px;}

.left .user-info .balance{
height:164px;
background-color:#fafafa;
} 
.left .user-info .balance dl{
padding-top:22px;
}
.left .user-info .balance dt{
width:184px;
height:25px;
margin:0 auto;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_balance.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
} 
.left .user-info .balance dd{
margin-top:6px;
text-align:center;
font-size:11px;
color:#ff5500;
}
.left .user-info .balance dd.impossible{
color:#1e1e1e;
}

.left .user-info .balance dd:nth-of-type(1){
font-size:13px;
font-weight:bold;
}

.left .balance .pointcharge-s{
width:140px;
height:26px;
margin:5px auto 0;
}
.left .balance .pointcharge-s a{
position:relative;
display:block;
width:100%;
height:100%;
text-indent:110%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_pointcharge_s.png) no-repeat;
white-space:nowrap;
overflow:hidden;
}
.left .balance .pointcharge-s a:hover{background-position:0 100%;}

.left .balance .regist-supportinfo{
width:158px;
height:26px;
margin:5px auto 0;
}
.left .balance .regist-supportinfo a{
position:relative;
display:block;
width:100%;
height:100%;
text-indent:110%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_regist_supportinfo.png) no-repeat;
white-space:nowrap;
overflow:hidden;
}
.left .balance .regist-supportinfo a:hover{background-position:0 100%;}

.left .news{
padding:40px 0 0;
}
.left .news h2{
width:139px;
height:20px;
margin:0 auto;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_news.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.left .news ul{
width:230px;
margin:0 auto;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}
.left .news li{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left top;
padding:17px 0 14px 17px;
text-indent:-17px;
}
.left .news li::before{
content:"・";
color:#1e1e1e;
}
.left .news li.new::after{
content:"";
display:inline-block;
width:17px;
height:17px;
margin-left:5px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_new.png) no-repeat;
vertical-align:middle;
}

.left .news li a{
text-decoration:none;
font-size:12px;
color:#1e1e1e;
line-height:1.8;
}
.left .news .important li a::before{
content:"重要";
display:inline-block;
width:33px;
height:17px;
text-align:center;
text-indent:0;
background-color:#ff5500;
color:#fff;
line-height:1.5;
}

.left .news .important li a span,
.left .news .important li a:hover{
color:#ff5400;
}
.left .news .normal li a span,
.left .news .normal li a:hover{
color:#0aa0d2;
}

.left .news .important{
margin-top:39px;
}
.left .news .normal{
position:relative;
margin-top:39px;
padding-top:42px;
}

.left .news .normal > div{}
.left .news .normal > div.active{}

.left .news .normal > div ul{
display:none;
}
.left .news .normal > div.active ul{
display:block;
}

.left .news .normal div h3{
position:absolute;
top:0;
height:22px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/tab_news.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
cursor:pointer;
}
.left .news .normal div h3::after{
content:"";
position:absolute;
left:50%;
bottom:0px;
width:0px;
height:3px;
margin-left:0;
background-color:#0aa0d2;
transition: all .2s ease-out 0s;
}

.left .news .normal div.general h3{
width:44px;
left:20px;
background-position:-4px 0;
}
.left .news .normal div.general.active h3,
.left .news .normal div.general h3:hover{
background-position:-4px -22px;
}
.left .news .normal div.general h3:hover::after,
.left .news .normal div.general.active h3::after{
width:44px;
margin-left:-22px;
}

.left .news .normal div.accounting h3{
width:44px;
left:75px;
background-position:-59px 0;
}
.left .news .normal div.accounting.active h3,
.left .news .normal div.accounting h3:hover{
background-position:-59px -22px;
}
.left .news .normal div.accounting.active h3::after,
.left .news .normal div.accounting h3:hover::after{
width:44px;
margin-left:-22px;
}

.left .news .normal div.press h3{
width:110px;
left:130px;
background-position:-114px 0;
}
.left .news .normal div.press.active h3,
.left .news .normal div.press h3:hover{
background-position:-114px -22px;
}
.left .news .normal div.press.active h3::after,
.left .news .normal div.press h3:hover::after{
width:110px;
margin-left:-55px;
}


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

.left .banner{
width:230px;
margin:40px auto;
}
.left .banner img{
width:230px;
height:142px;
}
.left .banner .pagination{
margin-top:8px;
text-align:center;
}
.left .banner .swiper-pagination-bullet{
width: 10px;
height: 10px;
margin:0 5px;
display: inline-block;
border-radius: 5px;
background: #d2d2d2;
opacity:1;
transition:width .2s ease 0s;
}
.left .banner .swiper-pagination-bullet-active {
width:20px;
border-radius: 5px;
background: #0aa0d2;
}

.left .sns{
margin-bottom:40px;
}
.left .sns ul{
text-align:center;
font-size:0;
}
.left .sns li{
position:relative;
display:inline-block;
width:37px;
height:37px;
margin:0 5px;
}
.left .sns li a{
position:relative;
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_sns_2.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.left .sns li:nth-child(1) a{background-position:-1px 0;}
.left .sns li:nth-child(2) a{background-position:-40px 0;}
.left .sns li:nth-child(3) a{background-position:-79px 0;}
.left .sns li:nth-child(4) a{background-position:-118px 0;}
.left .sns li:nth-child(5) a{background-position:-157px 0;}

.left .sns li::after{
content:"";
display:block;
position:absolute;
top:-29px;
left:50%;
width:0;
height:0;
margin-left:-75px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_sns.png) no-repeat;
opacity:0.2;
transition: top .2s ease 0s, opacity .2s ease 0s;
}
.left .sns li:nth-child(1)::after{background-position:0 0;}
.left .sns li:nth-child(2)::after{background-position:0 -38px;}
.left .sns li:nth-child(3)::after{background-position:0 -76px;}
.left .sns li:nth-child(4)::after{background-position:0 -114px;}
.left .sns li:nth-child(5)::after{background-position:0 -152px;}

.left .sns li:hover::after{
width:150px;
height:38px;
top:-34px;
opacity:1;
}

.left .association{
position:relative;
height:90px;
}
.left .association .joga,
.left .association .sslseal{
position:absolute;
top:0;
}
.left .association .joga{left:19px}
.left .association .sslseal{left:140px;}

.left .association .joga img{width:100px;height:50px;}

.left .recaptcha{
padding-bottom:20px;
background-color:#fff;
}
.left .recaptcha p{
width:230px;
margin:0 auto;
}
.left .recaptcha p a{
color:#0aa0d2;
}

.left .license{}
.left .license div{
width:230px;
height:50px;
margin:0 auto;
}
.left .license div a{
display:block;
width:100%;
height:100%;
background:#003461 url(https://static.nexon.co.jp/nexon/ver2017/common/txt_license.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
transition: all .2s ease-out 0s;
}
.left .license div a:hover{
background-color:#004f94;
}

.device-switch{
display:none;
}
/* ====================================================================
	right
==================================================================== */
.right{
align-self:stretch;
box-sizing:border-box;
z-index:1;
}

/* ====================================================================
	base
==================================================================== */
.base{
position:fixed;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
}

.sp-mode .base{background:none !important;}

/* ====================================================================
	modal
==================================================================== */
.modal-important{}
.modal-important > div{
padding:16px 20px 14px;

}
.modal-important h2{
padding-bottom:23px;
text-align:center;
font-size:20px;
font-weight:bold;
color:#d20000;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}
.modal-important p{
margin-top:27px;
text-align:left;
font-size:12px;
color:#1e1e1e;
line-height:1.8;
}
.modal-important p a{
color:#1e1e1e;
}
.modal-important p strong,
.modal-important p strong a{
color:#d20000;
}

/* ====================================================================
	container resize
==================================================================== */
@media screen and (max-width:807px){
	nav.breadcrumb ul{width:100%;}
	.container{width:100%;}
	.right{width:100%;}
	.main{padding:0;}
	.base{display:none;}
}
@media screen and (max-width:1147px) and (min-width:808px){
	nav.breadcrumb ul{width:790px;}
	.container{width:790px;}
	.right{width:530px;}
	.base{background-size:1148px auto;}
	
	header .menu h1{margin-left:-394px;width:180px;}
	header .menu h1 a,
	header .menu h1 span{left:31px;}
	header .menu ul{width:614px;margin-left:-214px;}
	header .menu ul li a{width:121px;}
	header .menu ul li:last-child a{width:125px;}

	header .menu ul li:nth-child(2) a{background-position:-37px 0;}
	header .menu ul li:nth-child(3) a{background-position:-235px 0;}
	header .menu ul li:nth-child(4) a{background-position:-433px 0;}
	header .menu ul li:nth-child(5) a{background-position:-631px 0;}
	header .menu ul li:nth-child(6) a{background-position:-829px 0;}

	header .menu ul li:nth-child(2) a:hover{background-position:-37px -72px;}
	header .menu ul li:nth-child(3) a:hover{background-position:-235px -72px;}
	header .menu ul li:nth-child(4) a:hover{background-position:-433px -72px;}
	header .menu ul li:nth-child(5) a:hover{background-position:-631px -72px;}
	header .menu ul li:nth-child(6) a:hover{background-position:-829px -72px;}

	header .menu ul li.current:nth-child(2) a{background-position:-37px -144px;}
	header .menu ul li.current:nth-child(3) a{background-position:-235px -144px;}
	header .menu ul li.current:nth-child(4) a{background-position:-433px -144px;}
	header .menu ul li.current:nth-child(5) a{background-position:-631px -144px;}
	header .menu ul li.current:nth-child(6) a{background-position:-829px -144px;}
}
@media screen and (max-width:1579px) and (min-width:1148px){
	nav.breadcrumb ul{width:1035px;}
	.container{width:1035px;}
	.right{width:775px;}
	.base{background-size:1580px auto;}
	
	header .menu h1{margin-left:-519px;width:235px;}
	header .menu h1 a,
	header .menu h1 span{left:60px;}
	header .menu ul{width:804px;margin-left:-284px;}
	header .menu ul li a{width:159px;}
	header .menu ul li:last-child a{width:163px;}

	header .menu ul li:nth-child(2) a{background-position:-17px 0;}
	header .menu ul li:nth-child(3) a{background-position:-215px 0;}
	header .menu ul li:nth-child(4) a{background-position:-413px 0;}
	header .menu ul li:nth-child(5) a{background-position:-611px 0;}
	header .menu ul li:nth-child(6) a{background-position:-809px 0;}

	header .menu ul li:nth-child(2) a:hover{background-position:-17px -72px;}
	header .menu ul li:nth-child(3) a:hover{background-position:-215px -72px;}
	header .menu ul li:nth-child(4) a:hover{background-position:-413px -72px;}
	header .menu ul li:nth-child(5) a:hover{background-position:-611px -72px;}
	header .menu ul li:nth-child(6) a:hover{background-position:-809px -72px;}

	header .menu ul li.current:nth-child(2) a{background-position:-17px -144px;}
	header .menu ul li.current:nth-child(3) a{background-position:-215px -144px;}
	header .menu ul li.current:nth-child(4) a{background-position:-413px -144px;}
	header .menu ul li.current:nth-child(5) a{background-position:-611px -144px;}
	header .menu ul li.current:nth-child(6) a{background-position:-809px -144px;}

}
@media screen and (min-width:1580px){
	nav.breadcrumb ul{width:1280px;}
	.container{width:1280px;}
	.right{width:1020px;}
	.base{background-size:cover;}
}

/* ====================================================================
	sp
==================================================================== */
@media screen and (max-width:807px){
body{
padding-top:15.6%;
}

.important-alert a,
.security-alert a{
display:block;
font-size:3.3vw;
}

/* header -------------------------- */
header{
position:fixed;
top:0;
z-index:100;
background-color:#fff;
}
header .menu{
padding-top:15.2%;
height:auto;
}


header .menu h1{
z-index:1;
left:0;
margin-left:0;
padding-top:4.1%;
width:100%;
border:none;
}
header .menu h1 a,
header .menu h1 span{
position:static;
width:24.8%;
padding-top:7.6%;
margin:0 auto;
background-size:contain;
overflow:hidden;
}

header .menu .left-open{
display:block;
position:absolute;
top:0;
left:0;
z-index:4;
width:15.2%;
padding-top:15.2%;
height:0;
overflow:hidden;
}
header .menu .left-open a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
header .menu .left-open a::after{
content:"";
position:absolute;
top:27%;
left:27.5%;
display:block;
width:53.3%;
height:48.1%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_prof.png) no-repeat;
background-size:100%;
}

header .menu .left-open.open a::after{
content:"";
position:absolute;
top:29%;
left:29.5%;
display:block;
width:42.5%;
height:42.5%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_close_b.png) no-repeat;
background-size:100%;
}

header .menu .menu-open{
display:block;
position:absolute;
top:0;
right:0;
z-index:2;
width:15.2%;
padding-top:15.2%;
height:0;
overflow:hidden;
}
header .menu .menu-open a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
header .menu .menu-open a::after{
content:"";
position:absolute;
top:30%;
left:37.5%;
display:block;
width:27.2%;
height:41.8%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_b.png) no-repeat;
background-size:100%;
transform:rotateZ(90deg);
}
header .menu .menu-open a:hover{}
header .menu nav{
position:absolute;
top:0;
left:0;
z-index:3;
width:100%;
display:none;
}
header .menu nav.open{
display:block;
}
header .menu ul{
left:0;
width:100%;
height:auto;
font-size:0;
margin:0;
padding:15.2% 0 0;
}
header .menu ul li{
position:relative;
display:inline-block;
width:33.3%;
margin:0;
padding:30% 0 0;
}
header .menu ul li:first-child a{display:block;}
header .menu ul li a{
position:absolute;
top:0;
left:0;
display:block;
width:100% !important;
height:100%;
padding-top:0;
background:none;
background-color:#0aa0d2;
overflow:hidden;
}
header .menu ul li a:hover{
background-color:#0aaadc;
}
header .menu ul li a::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/menu_sp.png) no-repeat;
background-size:300% 200%;
}
header .menu ul li:nth-child(1) a::after{background-position:0 0}
header .menu ul li:nth-child(2) a::after{background-position:50% 0}
header .menu ul li:nth-child(3) a::after{background-position:100% 0}
header .menu ul li:nth-child(4) a::after{background-position:0 100%}
header .menu ul li:nth-child(5) a::after{background-position:50% 100%}
header .menu ul li:nth-child(6) a::after{background-position:100% 100%}

header .menu .btn.close{
display:block;
position:absolute;
top:0;
right:0;
width:15.2%;
padding-top:15.2%;
}
header .menu .btn.close a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background-color:#0aa0d2;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
header .menu .btn.close a:hover{
background-color:#0aaadc;
}
header .menu .btn.close a::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_close_w.png) no-repeat center center;
background-size:42%;
}

/* breadcrumb -------------------------- */
nav.breadcrumb{
padding:4.1% 0;
}
nav.breadcrumb ul{
margin:0;
padding:0 4.1%;
font-size:0;
}
nav.breadcrumb li{
display:inline-block;
white-space:nowrap;
font-size:3.3vw;
}
nav.breadcrumb li:not(:first-child)::before{
content:">";
margin:0 1.25vw;
}
nav.breadcrumb a{
color:#fff;
}

/* left -------------------------- */
.left{
position:fixed;
top:0;
left:-100%;
align-self:stretch;
box-sizing:border-box;
width:100%;
height:100%;
background-color:rgba(0,0,0,0);
z-index:7;
padding:15.2% 0 0;
overflow:auto;
transition:background .15s linear 0s;
}

.left.open{
left:0;
background-color:rgba(0,0,0,.6);
}
.left.close{
left:0;
background-color:rgba(0,0,0,0);
}

.left .login-area,
.left .user-info,
.left .banner,
.left .sns,
.left .association,
.left .recaptcha,
.left .license{
position:relative;
width:84.7%;
left:-100%;
}

.left .login-area,
.left .user-info,
.left .banner,
.left .sns,
.left .association,
.left .recaptcha,
.left .license{
transition:left 0.3s ease-out 0s;
}
.left.open .login-area,
.left.open .user-info,
.left.open .banner,
.left.open .sns,
.left.open .association,
.left.open .recaptcha,
.left.open .license{
left:0%;
}
.left .otp{
position:relative;
width:100%;
height:0;
padding-top:18%;
}

.left .login-area .login-nx{
position:relative;
width:100%;
height:0;
padding-top:42.6%;
}
.left .login-area .login-openid,
.left .login-area .regist-id,
.left .pointcharge{
position:relative;
width:100%;
height:0;
padding-top:21.3%;
}

.left .login-area .login-nx a,
.left .login-area .login-openid a,
.left .login-area .regist-id a,
.left .pointcharge a,
.left .otp a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
transition: background-color 0.2s ease 0s;
white-space:nowrap;
overflow:hidden;
}
.left .login-area .login-nx a{background-color:#0aa0d2;}
.left .login-area .login-nx a:hover{background-color:#0aaadc;}

.left .login-area .login-openid a{background-color:#f0f0f0;}
.left .login-area .login-openid a:hover{background-color:#fafafa;}

.left .login-area .regist-id a{background-color:#d20000;}
.left .login-area .regist-id a:hover{background-color:#e60a0a;}

.left .pointcharge a{background-color:#0aa0d2;}
.left .pointcharge a:hover{background-color:#0aaadc;}

.left .otp a{background-color:#96be00;}
.left .otp a:hover{background-color:#a0c800;}

.left .login-area .login-nx a::before,
.left .login-area .login-openid a::before,
.left .login-area .regist-id a::before,
.left .pointcharge a::before,
.left .otp a::before{
content:"";
position:absolute;
display:block;
}
.left .login-area .login-nx a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_login_nexonid.png) no-repeat center center;
background-size:54.7% auto;
}
.left .login-area .login-openid a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_login_openid_sp_3.png) no-repeat center center;
background-size:45.8% auto;
}
.left .login-area .regist-id a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_regist_nexonid.png) no-repeat center center;
background-size:42.9% auto;
}
.left .pointcharge a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_pointcharge.png) no-repeat center center;
background-size:46.5% auto;
}
.left .otp a::before{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_otp_sp.png) no-repeat center center;
background-size:57.3% auto;
}

.left .login-area .login-nx a::after,
.left .login-area .login-openid a::after,
.left .login-area .regist-id a::after,
.left .pointcharge a::after,
.left .otp a::after{
content:"";
position:absolute;
top:50%;
right:6.5%;
display:block;
width:3.4%;
height:0;
padding-top:5.2%;
margin-top:-7px;
transition: right 0.2s ease 0s;
}
.left .login-area .login-nx a::after,
.left .login-area .regist-id a::after,
.left .pointcharge a::after,
.left .otp a::after{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_w.png) no-repeat;
background-size:100%;
}
.left .login-area .login-openid a::after{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_b.png) no-repeat;
background-size:100%;
}
.left .login-area .login-nx a:hover::after,
.left .login-area .login-openid a:hover::after,
.left .login-area .regist-id a:hover::after,
.left .pointcharge a:hover::after,
.left .otp a:hover::after{right:6.5%;}

.left .user-info .account{
width:100%;
height:auto;
}

.left .user-info .account .name{
padding-top:9.8%;
padding-bottom:26.2%;
font-size:4.4vw;
}
.left .user-info .account .name a{
color:#fff;
}

.left .user-info .account .mypage,
.left .user-info .account .logout{
position:absolute;
top:20vw;
width:36%;
height:0;
padding-top:9.8%;
}
.left .user-info .account .mypage{left:12.2%;}
.left .user-info .account .logout{right:12.2%;}

.left .user-info .account .mypage a,
.left .user-info .account .logout a{
position:absolute;
top:0;
left:0;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_account_sp.png) no-repeat;
background-size:200%;
}
.left .user-info .account .mypage a{background-position:0 0;}
.left .user-info .account .logout a{background-position:100% 0;}
.left .user-info .account .mypage a:hover{background-position:0 100%}
.left .user-info .account .logout a:hover{background-position:100% 100%}

.left .user-info .balance{
height:auto;
padding-bottom:6.5%;
} 
.left .user-info .balance dl{
padding-top:3.0%;
}
.left .user-info .balance dt{
width:61%;
height:0;
padding-top:8.0%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/txt_balance_sp.png) no-repeat;
background-size:100%;
} 
.left .user-info .balance dd{
margin-top:0.8%;
text-align:center;
font-size:3.0vw;
color:#ff5500;
}
.left .user-info .balance dd.impossible{
color:#1e1e1e;
}
.left .user-info .balance dd br{
display:none;
}
.left .user-info .balance dd.impossible br{
display:inline;
}

.left .user-info .balance dd:nth-of-type(1){
font-size:4.4vw;
font-weight:bold;
}

.left .balance .pointcharge-s{
position:relative;
width:41.6%;
height:0;
padding-top:8.3%;
margin:0.8% auto 0;
}
.left .balance .pointcharge-s a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_pointcharge_s_sp.png) no-repeat;
background-size:100% 200%;
white-space:nowrap;
overflow:hidden;
}
.left .balance .pointcharge-s a:hover{background-position:0 100%;}

.left .balance .regist-supportinfo{
position:relative;
width:48.6%;
height:0;
padding-top:8.3%;
margin:0.8% auto 0;
}
.left .balance .regist-supportinfo a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_regist_supportinfo_sp.png) no-repeat;
background-size:100% 200%;
white-space:nowrap;
overflow:hidden;
}
.left .balance .regist-supportinfo a:hover{background-position:0 100%;}

.left .news{display:none;}

.left .banner{
background-color:#fff;
margin:0;
padding-top:9.8%;
padding-bottom:9.5%;
}
.left .banner img{
width:100%;
height:auto;
}
.left .banner .swiper-container{
margin:0 6.5%;
}
.left .banner .pagination{
margin-top:3.2%;
}
.left .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:width .2s ease 0s;
}
.left .banner .swiper-pagination-bullet-active {
width:5.4vw;
background: #0aa0d2;
}

.left .sns{
margin-bottom:0;
padding-bottom:9.5%;
background-color:#fff;
}
.left .sns ul{
text-align:center;
font-size:0;
}
.left .sns li{
position:relative;
display:inline-block;
width:15%;
height:0;
padding-top:15%;
margin:0 1.6%;
}
.left .sns li a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_sns_sp_2.png) no-repeat;
background-size: 500% 100%;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.left .sns li:nth-child(1) a{background-position:0 0;}
.left .sns li:nth-child(2) a{background-position:25% 0;}
.left .sns li:nth-child(3) a{background-position:50% 0;}
.left .sns li:nth-child(4) a{background-position:75% 0;}
.left .sns li:nth-child(5) a{background-position:100% 0;}

.left .sns li::after{display:none;}

.left .association{
position:relative;
height:auto;
padding-bottom:9.5%;
background-color:#fff;
text-align:center;
}
.left .association .joga,
.left .association .sslseal{
position:relative;
display:inline-block;
margin:0 1.6%;
}
.left .association .joga{left:auto;width:38%;}
.left .association .sslseal{left:auto}
.left .association .joga img{width:100%;height:auto;}

.left .recaptcha{
position:relative;
height:auto;
padding-bottom:9.5%;
background-color:#fff;
}
.left .recaptcha p{
width:auto;
margin:0 6.5%;
}


.left .license{
position:relative;
height:auto;
padding-bottom:9.5%;
background-color:#fff;
}
.left .license div{
position:relative;
width:41.6%;
height:0;
padding-top:8.3%;
margin:0 auto;
}
.left .license div a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
background:#003461 url(https://static.nexon.co.jp/nexon/ver2017/common/txt_license.png) no-repeat center center;
background-size:cover;
white-space:nowrap;
overflow:hidden;
}
.left .license div a:hover{background-color:#004f94;}


.right{
position:relative;
z-index:1;
}

.device-switch{
position:relative;
z-index:6;
display:block;
background:#fff url(https://static.nexon.co.jp/nexon/ver2017/common/bg_mode_select.png) no-repeat center center;
background-size:100%;
}
.device-switch dl{
margin-left:6.9%;
padding:6% 0;
font-size:0;
}
.device-switch dl dt,
.device-switch dl dd{
position:relative;
display:inline-block;
font-size:3.8vw;
color:#b4b4b4;
}
.device-switch dl dd{
padding:0 2.7vw;
}
.device-switch dl dd.current{
color:#1e1e1e;
}
.device-switch dl dd a{
color:#b4b4b4;
}
.device-switch dl dd+dd::before{
content:"";
position:absolute;
top:1vw;
left:0;
display:block;
width:1px;
height:4vw;
background-color:#b4b4b4;
}

}