@import url("common.css");


/*Visual asset*/
article.visual_asset    {clear:both; float:left; width:720px; margin-top:40px; background:#101c28; border:5px solid #101c28; line-height:1px; zoom:1;}
article.visual_asset:after  {content:"."; clear:both; display:block; height:0; visibility:hidden;}
    ul.asset_list   {float:left;}
        ul.asset_list li    {width:600px; height:338px;}
        ul.asset_list li img{width:600px; height:338px;}
    a.asset_btn {float:right; display:inline-block; width:110px; height:38px;}
        a.asset_prev    {background:url('//images.nttgameonline.com/knight/assets/images/main/btn_asset.png') no-repeat top center;}
        a.asset_next    {background:url('//images.nttgameonline.com/knight/assets/images/main/btn_asset.png') no-repeat bottom center;}
    ul.asset_thumb    {float:right;}
        .asset_thumb > li {padding-left:4px; margin-bottom:3px; text-align:right;}
        .asset_thumb > li img     {border:1px solid #101c28; width:110px; height:80px;}
        .asset_thumb > li.active  {border:1px solid #101c28; background:url('//images.nttgameonline.com/knight/assets/images/main/asset_thumb_active.png') no-repeat left 50%;}
        .asset_thumb > li.active img    {border:1px solid white;}

/*Steam button*/
article.steam_btn   {float:right; width:200px; margin-top:40px; background:#101c28; border:10px solid #101c28; line-height:1px; text-align:center; zoom:1;}
article.steam_btn:after  {content:"."; clear:both; display:block; height:0; visibility:hidden;}
    article.steam_btn > a {display:block; width:98%; box-shadow:0 0 0 3px #264e71; border:2px solid #5caddc; background:#386186; font-size:0.65em; padding:2px 0; line-height:1.5em; text-align:center; color:white;}
    article.steam_btn > a:hover {box-shadow:0 0 0 2px white; border:2px solid #15a9ff;}
    article.steam_btn > a.signin {padding:0 0 47% 0; background:#386186 url('//images.nttgameonline.com/knight/assets/images/main/freetoplay_steam.png') no-repeat;}
    article.steam_btn > a.before_sign    {font-size:1.1em; padding-top:20%; font-weight:700; background-position:center 90%;}
    article.steam_btn > a.before_sign > em {display:block; font-size:1.8em; font-weight:700; color:white;}
    article.steam_btn > a.after_sign    {padding:10% 0 40% 0;  background-position:center 95%;}
    article.steam_btn > a.after_sign > img  {display:block; margin:0 auto; margin-bottom:5px; width:64px; height:64px;}
    article.steam_btn > a.after_sign > em   {display:block; text-align:center; font-size:1.2em; color:white;}
    article.steam_btn > a.btn_steam {margin-top:10px; font-size:1em; font-weight:600; padding:8% 0;}
    article.steam_btn > a.sign1_sp  {font-size:1em; line-height:1.2em; padding:8% 0 30% 0; background-size:60%;}
    article.steam_btn > a.sign1_sp > em {font-size:1.4em;}
    article.steam_btn > a.sign2_sp      {background-image:none;padding:8% 0 9% 0;}
    article.steam_btn > a.btn_wikia     {clear:both; font-size:1em; line-height:1.75em; font-weight:600; margin:6% 0 3% 0; padding:8% 0 6%;}
    article.steam_btn > a.btn_wikia > em    {display:inline-block; width:80px; height:22px; vertical-align:top;  background:url('//images.nttgameonline.com/knight/assets/images/main/logo_wikia.png') no-repeat;}

H1  {color:white; height:22px; font-size:1.2em; font-weight:600; margin-bottom:8px;}
a.more_list  {display:block; height:20px; margin-top:-20px; text-align:right;
                    font-size:0.7em; font-weight:700; color:#386186;}
a.more_list:hover   {color:white; font-weight:600;}

/*News*/
article.news   {clear:both; float:left; margin-top:40px; width:730px; height:auto;}
    dl.news_list {float:left; width:97%; padding:1.5% 1.5% 1% 1.5%; background:#101c28; margin:0 1px 1px 0;}
    dl.news_list:after  {content:""; clear:both; display:block; height:0; visibility:hidden;}
    dl.news_list:hover  {cursor:pointer; background:#0d1722;}
    dl.news_list:hover li.title, dl.news_list:hover li.read_more  {color:white;}
        .news_list > dt.date  {float:left; width:60px; height:70px; background:#3a6287; box-shadow:0 0 0 2px #3a6287; border:1px solid #101c28; text-align:center;}
        .news_list > dt.date > span {display:block; margin:0 auto; width:90%; color:#101c28; letter-spacing:-0.05em; text-transform:uppercase; margin-top:1px;}
        .news_list > dt.date > span.day     {font-size:3.1em; line-height:1em; border-bottom:1px solid #101c28;}
        .news_list > dt.date > span.month   {font-size:0.6em; font-weight:600; margin-top:2px;}
        .news_list > dd.news_content    {float:left; width:630px; margin-left:10px;}
        .news_list > dd.news_content > ul > li  {color:#5caddc; line-height:1em; margin-bottom:5px;}
        .news_list > dd.news_content > ul > li.title    {white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:1.2em;}
        .news_list > dd.news_content > ul > li.article  {color:#3b6388; height:2.4em; font-size:0.9em;  text-overflow:ellipsis; overflow:hidden; line-height:1.2em;}
        .news_list > dd.news_content > ul > li.read_more{font-size:0.6em; font-weight:700;}


/*Server Status*/
article.server_status   {float:right; width:220px; margin-top:40px;}
H1 span.server_time     {float:right; display:inline-block; font-size:11px; font-weight:700; padding:9px 5px 0 0; color:#386186;}
    dl.servers  {margin-top:5px; width:220px; zoom:1;}
    dl.servers:after    {content:"."; clear:both; display:block; height:0; visibility:hidden;}
        dl.servers dt   {float:left; margin:0; padding:4px 5px 3px 8px; width:95px; height:14px; font-size:11px; line-height:12px; color:#5caddc; text-align:left; background:#101c28; margin-bottom:1px;}
        dl.servers dd   {float:left; margin:0; padding:4px 0 3px; width:110px; height:14px; background:#101c28; margin-bottom:1px;}
        dl.servers dt:nth-of-type(odd), dl.servers dd:nth-of-type(odd)  {background:#0e1823;}
        dl.servers dd > span    {display:block; width:100px; height:5px; background:#0b151f; margin-top:2px; overflow:hidden; border:1px solid #172431; padding:1px;}
        dl.servers dd > span > em   {display:inline-block; float:left; height:5px; background:url('//images.nttgameonline.com/knight/assets/images/main/status_gauge.jpg') no-repeat;}

/*Social Network*/
article.social_media    {float:right; width:210px; margin-top:40px; box-shadow:0 0 0 3px #303f4b; border:2px solid #386186; background:#1d242f;}
article.social_media H1 {margin-bottom:0; padding:7px 0; height:auto; background:#101c28; color:#9cc8e2; text-align:center; line-height:1em;}
    H1 span.on_sns      {display:block; color:#9cc8e2; font-size:14px; font-weight:400; line-height:1.1em;}
    ul.sns  {position:relative; margin:0 auto; padding:10px 0; background:#0e1823; border-top:1px solid #1d242f; font-size:1px; line-height:1px; text-align:center;}
        ul.sns li   {display:inline-block; padding-left:3px;}
        ul.sns li a {display:block; width:38px; height:35px; background:url('//images.nttgameonline.com/knight/assets/images/common/sns_icons.png') no-repeat left top;}
        ul.sns li a.facebook{background-position:0 0;}
        ul.sns li a.facebook:hover  {background-position:0 -50px;}
        ul.sns li a.twitter {background-position:-45px 0;}
        ul.sns li a.twitter:hover   {background-position:-45px -50px;}
        ul.sns li a.youtube {background-position:-90px 0;}
        ul.sns li a.youtube:hover   {background-position:-90px -50px;}
        ul.sns li a.twitch  {background-position:-135px 0;}
        ul.sns li a.twitch:hover    {background-position:-135px -50px;}
        ul.sns li a.discord {background-position:-180px 0;}
        ul.sns li a.discord:hover   {background-position:-180px -50px;}

/*event*/
article.event   {float:right; margin-top:40px; width:36.5%;}
    div.ent_area    {width:98%; padding:1%; background:#101c28; line-height:1px; text-align:center;}


footer  {margin-top:50px;}


@media screen and (max-width:800px) {
/*Visual asset*/
article.visual_asset    {float:left; width:65%; margin-top:5%;}
    ul.asset_list   {clear:both; width:100%; margin:0 1px 1px 0;}
        ul.asset_list li    {width:100%; height:auto;}
        ul.asset_list li img   {width:100%; height:auto;}
    a.asset_btn {display:inline-block; width:7%; height:38px; margin-top:7%;}
        a.asset_prev    {float:left; background-position:left center;}
        a.asset_next    {float:right; background-position:right center;}
    ul.asset_thumb    {float:left; width:85%;}
        .asset_thumb > li {float:left; width:31%; padding:4px 0 0 0; margin:5px 1% 3px 1%;}
        .asset_thumb > li img     {width:100%; height:auto; border:1px solid #101c28;}
        .asset_thumb > li.active  {border:1px solid #101c28; background:url('//images.nttgameonline.com/knight/assets/images/main/asset_thumb_active.png') no-repeat top center;}
/*Steam button*/
article.steam_btn   {float:right; width:28%; margin-top:5%;}
    article.steam_btn > a {letter-spacing:-0.03em;}
    article.steam_btn > a:hover {box-shadow:0 0 0 2px white; border:2px solid #15a9ff;}
    article.steam_btn > a.signin  {font-size:1.1em; background-size:90%;}
    article.steam_btn > a.before_sign > em  {font-size:1.4em; line-height:0.6em;}
    article.steam_btn > a.after_sign > em   {font-size:0.75em; line-height:0.6em;}
    article.steam_btn > a.btn_steam     {font-size:0.9em; font-weight:600; padding:8% 0;}
    article.steam_btn > a.sign1_sp   {line-height:1.5em; padding:12% 0 40% 0; background-size:80%;}
    article.steam_btn > a.sign1_sp > em {font-size:1.4em;}
/*News*/
article.news   {clear:both; width:100%; margin-top:5%;}
    dl.news_list {width:96%; padding:2%;}
        .news_list > dd.news_content    {width:75%;}
/*Server Status*/
article.server_status   {float:left; -moz-calc(50% - 10px); width:-webkit-calc(50% - 10px); width:-o-calc(50% - 10px); width:calc(50% - 10px);}
    dl.servers  {width:100%;}
        dl.servers dt   {width:28%; padding:4px 1% 3px 1%;}
        dl.servers dd   {width:70%; padding:4px 0 3px;}
        dl.servers dd > span    {width:100px;}
/*Social Network*/
article.social_media    {-moz-calc(50% - 10px); width:-webkit-calc(50% - 10px); width:-o-calc(50% - 10px); width:calc(50% - 10px);}
    H1 span.on_sns      {display:inline-block; padding-left:10px;}


/*event*/
article.event   {clear:both; float:left; width:100%;}
    div.ent_area img    {width:100%;}
}

@media screen and (max-width:550px) {
/*Visual asset*/
article.visual_asset    {float:left; width:98%;}
    .asset_thumb > li {width:30%;}
/*Steam button*/
article.steam_btn   {float:left; width:96%;}
    article.steam_btn > a.signin  {float:left; width:47%; padding:6% 0 18% 0; background-size:85%;}
    article.steam_btn > a.after_sign  {padding:6% 0; background-image:none;}
    article.steam_btn > a.after_sign > em   {font-size:0.75em;}
    article.steam_btn > a.btn_steam     {float:right; width:47%; margin-top:0; margin-bottom:3%; padding:5% 0;}
    article.steam_btn > a.sign1_sp   {width:99%; font-size:0.9em; padding:5% 0 3%; margin-bottom:10px; background-image:none;}
    article.steam_btn > a.sign1_sp > em {font-size:1.4em;}
    article.steam_btn > a.sign2_sp   {width:99%; padding:3% 0; margin-bottom:3%;}
    /*article.steam_btn > a.btn_steam:nth-of-type(odd) {float:left;}
    article.steam_btn > a.btn_steam:nth-of-type(even) {float:right;}*/
    article.steam_btn > a.btn_wikia {width:99%; margin:1% 0 3% 0; padding:3% 0 2%;}
/*News*/
    .news_list > dt.date  {width:94%; height:auto; margin:3%;}
    .news_list > dt.date > span {display:inline-block; text-align:left; width:auto;}
    .news_list > dt.date > span.day     {float:left; font-size:1.5em; font-weight:600; padding-left:3px;border-bottom:none;}
    .news_list > dt.date > span.month   {float:left; font-size:1em; margin-left:5px;}
/*Server Status*/
/*Server Status*/
article.server_status   {float:left; width:100%;}
        dl.servers dt   {width:48%; padding:4px 1% 3px 1%;}
        dl.servers dd   {width:50%; padding:4px 0 3px;}
/*Social Network*/
article.social_media    {-moz-calc(100% - 10px); width:-webkit-calc(100% - 10px); width:-o-calc(100% - 10px); width:calc(100% - 10px);}
}