/* CSS Document */

/* ====================================================================
contents
==================================================================== */
article h2.ttl{
height:0;
padding-top:33px;
margin-left:30px;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/ttl_news_pc.png) no-repeat;
overflow:hidden;
}
/* ====================================================================
view
==================================================================== */
article .view{
margin-top:24px;
}
article .view .sttl{
position:relative;
margin:0 30px;
padding:48px 150px 0;
background-color:#fff;
}
article .view .sttl h3{
min-height:46px;
padding:0 140px 13px 0;
font-size:15px;
color:#1e1e1e;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}

article .view .sttl h3 span{
color:#0aa0d2;
}
article .view .sttl h3.important span{
color:#ff5400;
}
article .view .sttl h3.important span::before{
content:"重要";
display:inline-block;
width:41px;
height:20px;
text-align:center;
text-indent:0;
background-color:#ff5500;
color:#fff;
line-height:1.5;
}


article .view .sttl dl{
position:absolute;
top:48px;
right:150px;
width:120px;
font-size:0;
color:#788796;
}

article .view .sttl dt::after{
content:"：";
}
article .view .sttl dt,
article .view .sttl dd{
display:inline-block;
font-size:12px;
line-height:1.8;
}

article .view .text{
margin:0 30px;
padding:27px 150px 60px;
background-color:#fff;
word-break: break-all;
}
article .view .text em,
article .view .text em a{
font-style:normal;
color:#ff5400;
}
article .view .btn.back{
position:relative;
width:126px;
height:0;
padding-top:26px;
margin:30px auto 0;

}
article .view .btn.back a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/btn_back.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
article .view .btn.back a:hover{
background-position:0 100%;
}
/* ====================================================================
list
==================================================================== */
article .sp-tab{
display:none;
}

article .list ul{
margin:0 auto;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}
article .list li{
position:relative;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left top;
padding:17px 90px 14px 17px;
text-indent:-17px;
}
article .list li::before{
content:"・";
color:#1e1e1e;
}
article .list 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;
}

article .list li a{
text-decoration:none;
font-size:12px;
color:#1e1e1e;
line-height:1.8;
}
article .list li time{
position:absolute;
top:50%;
right:2px;
font-size:12px;
color:#788796;
margin-top:-0.7em;
}

article .list.important{
margin-top:39px;
padding:0 30px;
}
article .list.important li span::before{
content:"重要";
display:inline-block;
width:33px;
height:17px;
text-align:center;
text-indent:0;
background-color:#ff5500;
color:#fff;
line-height:1.5;
}

article .list.important li span,
article .list.important li a:hover{
color:#ff5400;
}

article .list.normal li span,
article .list.normal li a:hover{
color:#0aa0d2;
}

article .list.normal{
position:relative;
margin-top:39px;
padding-top:51px;
}

article .list.normal > div{
padding:0 30px;
}
article .list.normal > div.active{}

article .list.normal > div ul{
display:none;
}
article .list.normal > div.active ul{
display:block;
}

article .list.normal div h3{
position:absolute;
top:0;
height:22px;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/tab_news.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
cursor:pointer;
}
article .list.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;
}
article .normal div.newest h3{
width:114px;
left:30px;
background-position:0 0;
}
article .normal div.newest.active h3,
article .normal div.newest h3:hover{
background-position:0 -22px;
}
article .normal div.newest h3:hover::after,
article .normal div.newest.active h3::after{
width:114px;
margin-left:-57px;
}

article .normal div.general h3{
width:44px;
left:155px;
background-position:-125px 0;
}
article .normal div.general.active h3,
article .normal div.general h3:hover{
background-position:-125px -22px;
}
article .normal div.general h3:hover::after,
article .normal div.general.active h3::after{
width:44px;
margin-left:-22px;
}

article .normal div.accounting h3{
width:44px;
left:210px;
background-position:-180px 0;
}
article .normal div.accounting.active h3,
article .normal div.accounting h3:hover{
background-position:-180px -22px;
}
article .normal div.accounting.active h3::after,
article .normal div.accounting h3:hover::after{
width:44px;
margin-left:-22px;
}

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



/* ====================================================================
paging
==================================================================== */
.paging{
display:flex;
justify-content:center;
align-items:center;
margin-top:30px;
}
.paging ul{
font-size:0;
text-align:center;
margin:0 17px;
}
.paging ul li{
display:inline-block;
width:25px;
height:25px;
box-sizing:border-box;
margin:0 2px;
}
.paging ul li.current{
border:solid 1px #0aa0d2;
}
.paging ul li a{
font-size:12px;
color:#788796;
text-decoration:none;
vertical-align: middle;
line-height:25px;
}
.paging ul li.current a,
.paging ul li a:hover{
color:#0aa0d2;
}

.paging .btn-arrow.prev,
.paging .btn-arrow.next{
position:relative;
width:13px;
padding-top:20px;
height:0;
}
.paging .btn-arrow.next{
/*
transform:rotateZ(180deg);
*/
}
.paging .btn-arrow.prev a,
.paging .btn-arrow.next a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_paging_s.png) no-repeat;
}
.paging .btn-arrow.prev a:hover{background-position:0 -20px;}
.paging .btn-arrow.next a:hover{background-position:0 -20px;}

/* ====================================================================
search
==================================================================== */
.search{
margin-top:40px;
padding:0 30px;
}
.search h3{
width:158px;
height:0;
padding-top:19px;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/txt_keyword.png) no-repeat;
overflow:hidden;
}
.search .input{
display:inline-block;
margin-top:20px;
padding:15px;
background-color:#e1e6ea;
}
.search .input select{
box-sizing:border-box;
width:130px;
height:25px;
margin-right:8px;
}
.search .input input{
box-sizing:border-box;
width:340px;
height:25px;
border:none;
margin-right:8px;
padding:0 6px;
}
.search .input .btn.submit{
position:relative;
display:inline-block;
width:80px;
height:0;
padding-top:25px;
vertical-align:middle;
}
.search .input .btn.submit a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/btn_search.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
.search .input .btn.submit a:hover{
background-position:0 100%;
}

.search .popular{
margin-top:18px;
font-size:12px;
color:#788796;
}
.search .popular dl{
display:flex;
}
.search .popular dt{
color:#1e1e1e;
white-space:nowrap;
}
.search .popular a{
color:#788796;
}





/* ====================================================================
Responsive
==================================================================== */

@media screen and (max-width:1147px) and (min-width:808px){
	article .view .sttl{padding:48px 30px 0;}
	article .view .sttl dl{right:30px;}
	article .view .text{padding:27px 30px 60px;}
	article .view .text img{width:100%;}
	.search .input input{width:205px;}
}
@media screen and (max-width:1579px) and (min-width:1148px){
	article .view .sttl{padding:48px 30px 0;}
	article .view .sttl dl{right:30px;}
	article .view .text{padding:27px 30px 60px;}
}
@media screen and (min-width:1580px){


}

@media screen and (max-width:807px){
.right > article{
padding:7.6% 0;
}
article h2.ttl{
width:50.6%;
height:0;
padding-top:7.0%;
margin-left:4.1%;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/ttl_news_sp.png) no-repeat;
background-size:contain;
overflow:hidden;
}

article .view{
margin-top:5%;
}
article .view .sttl{
margin:0 4.1%;
padding:4.1% 4.1% 0;
}
article .view .sttl h3{
padding:0 0 0 0;
font-size:3.3vw;
color:#1e1e1e;
background:none;
}

article .view .sttl dl{
position:static;
width:100%;
padding:2.5% 0;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
text-align:right;
font-size:0;
color:#788796;
}
article .view .sttl dt{
margin-left:2.7%;
}
article .view .sttl dt,
article .view .sttl dd{
font-size:2.5vw;
line-height:1.8;
}

article .view .text{
margin:0 4.1%;
padding:4.1% 4.1% 6.6%;
font-size:3.3vw;
}
article .view .text img{width:100%;}

article .view .btn.back{
width:30.5%;
padding-top:8.3%;
margin:5.5% auto 0;
}
article .view .btn.back a{
background:url(https://static.nexon.co.jp/nexon/ver2017/news/btn_back_sp.png) no-repeat;
background-size:100% 200%;
}

/* ====================================================================
list
==================================================================== */
article .sp-tab{
display:block;
margin-top:5.5%;
background-color:#fff;
}

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

article .list ul{
margin:0 auto;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}
article .list li{
position:relative;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left top;
padding:4.1% 0 8.3% 4.1%;
text-indent:-2.8%;
}
article .list li::before{
content:"・";
color:#1e1e1e;
}
article .list li.new::after{
content:"";
display:inline-block;
width:3.4vw;
height:3.4vw;
margin-left:1.3%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_new.png) no-repeat;
background-size:contain;
vertical-align:middle;
}

article .list li a{
text-decoration:underline;
font-size:3.3vw;
color:#1e1e1e;
line-height:1.8;
}
article .list li span{
font-size:3.3vw;
}

article .list li time{
position:absolute;
top:auto;
bottom:1.4vw;
right:0;
font-size:2.5vw;
color:#788796;
margin-top:0em;
}

article .list.important{
margin-top:5%;
padding:0 4.1%;
}
article .list.important li span::before{
content:"重要";
display:inline-block;
width:10.4%;
height:auto;
font-size:3.3vw;
text-align:center;
text-indent:0;
background-color:#ff5500;
color:#fff;
line-height:1.5;
}

article .list.normal{
position:relative;
margin-top:5.5%;
padding-top:0;
}

article .list.normal > div{
padding:0 4.1%;
}
article .list.normal > div.active{}

article .list.normal > div ul{
display:none;
}
article .list.normal > div.active ul{
display:block;
}
article .list.normal div h3{
display:none;
}

/* ====================================================================
paging
==================================================================== */
.paging{
margin-top:8.3%;
}
.paging ul{
font-size:0;
text-align:center;
margin:0 17px;
}
.paging ul li{
width:5.5vw;
height:5.5vw;
margin:0;
}
.paging ul li.current{
border:solid 1px #0aa0d2;
}
.paging ul li a{
font-size:2.7vw;
line-height:5.5vw;
}
.paging .btn-arrow.prev,
.paging .btn-arrow.next{
position:relative;
width:2.7%;
padding-top:4.1%;
height:0;
}
.paging .btn-arrow.next{
/*
transform:rotateZ(180deg);
*/
}
.paging .btn-arrow.prev a,
.paging .btn-arrow.next a{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_paging_m.png) no-repeat;
background-size:100% 200%;
}
.paging .btn-arrow.prev a:hover{background-position:0 100%;}
.paging .btn-arrow.next a:hover{background-position:0 100%;}

/* ====================================================================
search
==================================================================== */
.search{
margin-top:8.3%;
padding:0 4.1%;
}
.search h3{
width:100%;
padding-top:4.0%;
background:url(https://static.nexon.co.jp/nexon/ver2017/news/txt_keyword_sp.png) no-repeat;
background-size:auto 100%;
}
.search .input{
display:flex;
width:100%;
margin-top:2.7%;
padding:0;
}
.search .input form{
display:flex;
justify-content: space-between;
box-sizing:border-box;
width:100%;
padding:2.7%;
}
.search .input select{
width:25.6%;
height:5.2vw;
margin-right:0;
font-size:2.7vw;
}
.search .input input{
width:52.9%;
height:5.2vw;
margin-right:0;
font-size:2.7vw;
}
.search .input .btn.submit{
width:16.6%;
padding-top:5.2vw;
}
.search .input .btn.submit a{
background:url(https://static.nexon.co.jp/nexon/ver2017/news/btn_search_sp.png) no-repeat;
background-size:100% 200%;
}
.search .popular{
margin-top:4.1%;
font-size:2.7vw;
}

}