@import url('https://fonts.googleapis.com/css?family=Open+Sans:light&v1');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1');


/*Top Banner*/
.slides-control {position:relative; width:100%; height:610px;}
    #slides .slides-container   { display:none;}
    #slides .scrollable {position:relative; top:0; left:0; -webkit-overflow-scrolling: touch; *zoom:1;}
    #slides .scrollable:after   {content:'.'; clear:both; height:0px; display:block; visibility:hidden;}
.slides-pagination  {position:relative; bottom:30px; z-index:3; width:100%; text-align:center;}
    .slides-pagination a    {display:inline-block; display:-moz-inline-stack; *display:inline;
                            margin:0 5px; width:100px; height:7px; overflow:hidden;
                            background-image:url("//image.nttgame.com/portal/assets/images/main/banner_bar.png"); box-shadow:1px 1px rgba(0, 0, 0, 0.4);
                            vertical-align:middle; *vertical-align:auto; text-indent:-100%; zoom:1;}
    .slides-pagination a.current    {background: #c2000a;}

div[class^="game_banner_"]  {position:relative; width:100%; height:610px; background-repeat:no-repeat; background-position:-80px top;}
div[class^="game_banner_"] video    {position:absolute; top:0; /*left:-220px;*/ width:2000px; height:800px; z-index:1;}
    div.game_details    {position:absolute; top:70px; left:200px;/*position:relative; margin:70px 0 0 200px;*/ z-index:2;}
    div.game_details > span {display:block; max-width:650px;}
    span.game_logo  {padding-bottom:20px;}
    span.game_txt1  {padding-bottom:10px;
                    -webkit-text-stroke-width:1px black; text-shadow:3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
                    color:white; font-family:"Open Sans Condensed"; font-size:55px; font-weight:600; line-height:56px; letter-spacing:-0.03em;}
    span.game_txt2 > em {display:inline-block; background:black; padding:3px 5px 5px; box-shadow:1px 1px 1px rgba(0, 0, 0, 0.4);
                        color:white; font-family:"Open Sans Condensed"; font-size:30px; line-height:25px; font-style:normal;}
    span.btn_explore    {clear:both; padding-top:30px;}
        span.btn_explore > a    {display:inline-block; padding:25px 20px; border:1px solid #a8262c; box-shadow:1px 1px rgba(0, 0, 0, 0.4); background:#831016; color:white; font-size:16px;}


/*Games*/
section.games_area  {float:left; margin:1% 2% 5%; width:63%;}
    /*Columns2*/
    .columns2 > .game_preview    {-moz-calc(50% - 12px); width:-webkit-calc(50% - 12px); width:-o-calc(50% - 12px); width:calc(50% - 12px); margin-left:10px;}
    .columns2 > .game_preview:nth-of-type(2n+1) {clear:both; margin-left:0;}
    /*Columns3*/
    .columns3 > .game_preview    {-moz-calc(33.33% - 12px); width:-webkit-calc(33.33% - 12px); width:-o-calc(33.33% - 12px); width:calc(33.33% - 12px); margin-left:10px;}
    .columns3 > .game_preview:nth-of-type(3n+1) {clear:both; margin-left:0;}
	/*Columns4*/
    .columns4 > .game_preview    {-moz-calc(25.00% - 12px); width:-webkit-calc(25.00% - 12px); width:-o-calc(25.00% - 12px); width:calc(25.00% - 12px); margin-left:10px;}
    .columns4 > .game_preview:nth-of-type(4n+1) {clear:both; margin-left:0;}
    /*Columns5*/
    .columns5 > .game_preview:nth-of-type(1),
    .columns5 > .game_preview:nth-of-type(2)    {-moz-calc(50% - 12px); width:-webkit-calc(50% - 12px); width:-o-calc(50% - 12px); width:calc(50% - 12px); margin-left:10px;}
    .columns5 > .game_preview:nth-of-type(3),
    .columns5 > .game_preview:nth-of-type(4),
    .columns5 > .game_preview:nth-of-type(5)    {-moz-calc(33.33% - 12px); width:-webkit-calc(33.33% - 12px); width:-o-calc(33.33% - 12px); width:calc(33.33% - 12px); margin-left:10px;}
    .columns5 > .game_preview:nth-of-type(3)    {margin-left:0;}
    /*Columns - Common*/
    .games_area > .game_preview:nth-of-type(1)  {margin-left:0;}
article.game_preview    {float:left; position:relative; margin-bottom:10px; min-height:400px; border:1px solid #444; background-position:center top; background-repeat:no-repeat;}
dl.game_info    {position:relative; top:0; left:0; margin:310px 0 0; padding:15px 15px 5px; background:#141414; color:white; font-family:"Open Sans";
                /**-moz-calc(100% - 30px); width:-webkit-calc(100% - 30px); width:-o-calc(100% - 30px); width:calc(100% - 30px);**/ 
                -moz-calc(100% - 0px); width:-webkit-calc(100% - 0px); width:-o-calc(100% - 0px); width:calc(100% - 0px);
                z-index:1; zoom:1;}
dl.game_info:after {content:'.'; clear:both; height:0px; display:block; visibility:hidden;}
    dl.game_info dt {font-size:28px; font-weight:600; line-height:1em; letter-spacing:-0.04em;}
    dl.game_info dd {margin:10px 0 0;}
    dl.game_info dd.details {height:75px; font-size:14px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
div.game_go_btns    {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
                    background:url('//image.nttgame.com/portal/assets/images//main/game_btns_bg.png'); text-align:center;}
    div.game_go_btns > img.logo {display:block; margin:0 auto; padding:20px 0; width:auto; /*height:85px;*/ height:125px;}
    div.game_go_btns > a[class^="btn_game_"]    {clear:both; display:inline-block; margin:5px 0; padding:10px 0; min-width:70%; max-width:95%; color:white;}

dl.game_coming {margin:0; padding:0; background:#141414; min-height:478px; text-align:center;}
dl.game_coming dt   {padding:150px 0 20px 0; color:#666; font-size:45px; letter-spacing:-0.05em;}
dl.game_coming dd   {margin:0; padding:0 10px; color:#666;}



/*NEWS*/
section.news_area   {float:right; margin:1% 2% 5% 0; width:31%;}
article.news_list   {padding:14px 20px; background:#141414; border-bottom:1px solid #222; zoom:1;}
article.news_list:after {content:'.'; clear:both; height:0px; display:block; visibility:hidden;}
article.news_list:nth-of-type(1)    {border-top:1px solid #222}
    article.news_list:hover > dl.news {transform:scale(1.04); padding-left:1.5%; color:white;}
    article.news_list:hover > span.news_thumb > img {padding-top:16px; width:100%}
span.news_thumb {float:left; display:inline-block; width:100px; height:80px; background:black; text-align:center;}
    span.news_thumb > img   {padding-top:18px; width:85%;}
.news_list > dl.news    {float:left; margin:0 0 0 10px; color:#999;
                        -moz-calc(100% - 150px); width:-webkit-calc(100% - 150px); width:-o-calc(100% - 150px); width:calc(100% - 150px);
						cursor: pointer;}
    .news_list > dl.news > dt   {padding-bottom:2px; font-size:24px; font-weight:400; line-height:30px; letter-spacing:-0.03em;
                                display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
    .news_list > dl.news > dd   {margin:0; font-size:14px;}
    .news_list > dl.news > dd.news_detail   {max-height:40px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
.news_list > dl.news > dd.news_date   {padding-top:8px; color:#666; font-size:12px;}



@media screen and (max-width:1280px) {
/*Top Banner*/
    .slides-control, div[class^="game_banner_"]  {height:45vw; background-size:140%; background-position:-130px top;}
    div[class^="game_banner_"] video    {width:auto; height:55vw;}
    div.game_details    {top:40px; left:0; width:100%; height:40vw;}
        div.game_details > span {clear:both; position:absolute; width:100%; max-width:100%; text-align:center;}
        span.game_txt1  {bottom:100px; font-size:50px; line-height:50px; font-weight:600;}
        span.game_txt2  {bottom:100px; display:none !important;}
        span.btn_explore    {padding-top:10px; bottom:40px;}
        span.btn_explore > a{padding:15px 30px;}
/*Games*/
    section.games_area, section.news_area   {float:left; margin:0 2% 30px 2%; width:96%;}
        .columns2 > .game_preview:nth-of-type(2n+1)    {float:left;}
        .columns2 > .game_preview:nth-of-type(2n+2)    {float:right;}
/*NEWS*/
    section.news_area   {float:left; margin:0 2% 30px 2%; width:96%;}
        .news_list > dl.news > dd.news_detail   {max-height:20px; -webkit-line-clamp:1; }
}

@media screen and (max-width:999px) {
/*Top Banner*/
    .slides-control, div[class^="game_banner_"] {height:55vw; background-position:-100px top;}
    div[class^="game_banner_"] video    {height:58vw;left:-180px}
    div.game_details    {top:20px; height:50vw;}
    span.game_logo  {top:20px;}
    span.game_txt1  {margin:0 15%; width:70% !important; font-size:45px; line-height:46px;}
/*Games*/
    dl.game_info dt {font-size:26px;}
}

@media screen and (max-width:768px) {
/*Top Banner*/
    .slides-control, div[class^="game_banner_"] {background-size:165%; background-position:-140px top;}
    .slides-pagination a    {margin:0 4px; width:80px;}
    div.game_details    {top:20px;}
    span.game_logo > img    {width:auto; height:95px;}
    span.game_txt1  {bottom:50px; font-size:40px; line-height:40px;}
    span.btn_explore    {padding-top:0px; bottom:15px;}
    span.btn_explore > a    {padding:5px 20px; font-size:14px;}
/*Games*/
    .columns3 > .game_preview:nth-of-type(3n+1) {-moz-calc(100% - 2px); width:-webkit-calc(100% - 2px); width:-o-calc(100% - 2px); width:calc(100% - 2px);}
    .columns3 > .game_preview:nth-of-type(3n+2)    {float:left; width:49%; margin-left:0; margin-right:0;}
    .columns3 > .game_preview:nth-of-type(3n+3)    {float:right; width:49%; margin-left:0; margin-right:0;}
	
	.columns4 > .game_preview:nth-of-type(4n+1) {-moz-calc(100% - 10px); width:-webkit-calc(100% - 10px); width:-o-calc(100% - 10px); width:calc(100% - 10px);}
	.columns4 > .game_preview:nth-of-type(4n+2) {float:left; width:49%; margin-left:0; margin-right:0;}
	.columns4 > .game_preview:nth-of-type(4n+3) {float:left; width:49%; margin-left:0; margin-right:0; margin-left:3px;}
	.columns4 > .game_preview:nth-of-type(4n+4) {-moz-calc(100% - 10px); width:-webkit-calc(100% - 10px); width:-o-calc(100% - 10px); width:calc(100% - 10px); margin-left:0px;}
    dl.game_info dd.details {height:auto;}
}

@media screen and (max-width:600px) {
/*Top Banner*/
    .slides-control, div[class^="game_banner_"] {height:65vw; background-size:180%; background-position:-150px top;}
    div[class^="game_banner_"] video    {height:65vw;}
    .slides-pagination a    {margin:0 3px; width:30px;}
    div.game_details    {height:58vw;}
    span.game_logo  {top:10px;}
    span.game_logo > img    {width:auto; height:70px;}
    span.game_txt1  {bottom:40px; margin:0 10%; width:80% !important; font-size:33px; line-height:36px;}
/*Games*/
    .games_area > .game_preview   {float:left !important; width:99% !important; margin-left:0 !important; background-size:150%;}
    article.game_preview    {min-height:auto; background-size:100%;}
    dl.game_info    {margin:60vw 0 0;}
/*NEWS*/
    section.news_area   {width:96%;}
        .news_list > dl.news > dt   {-webkit-line-clamp:2;}
        .news_list > dl.news > dd.news_detail   {max-height:40px; -webkit-line-clamp:2;}
}



@media screen and (max-width:400px) {
/*Top Banner*/
    div.container   {min-width:300px;}
    .slides-control, div[class^="game_banner_"], div.game_details {min-width:300px; min-height:220px; background-position:-100px top;}
    span.game_txt1  {bottom:55px; margin:0 5%; width:90% !important; font-size:20px; line-height:26px;}
    span.btn_explore    {bottom:35px;}
    span.btn_explore > a    {padding:3px 15px; font-size:12px;}
}