@import url("/knight/assets/css/common.css");

body    {}
 
section#TOP {position:relative; height:550px; background:url('//image.nttgame.com/knight/ver2022/assets/images/main/bg.jpg') no-repeat; background-position:center bottom; background-size:auto;}
    /*Banner*/
    article.banner  {clear:both; position:relative; margin:0 auto; top:-180px; width:1000px; height:375px; z-index:1;}
        article.banner img  {margin-top:-11px;}
    .banner_btns    {clear:both; display:block; position:relative; top:-33px; font-size:1px; text-align:center;}
        .banner_btns > .banner_btn  {display:inline-block; width:20px; height:20px;
                                    background:url('//image.nttgame.com/knight/ver2018/assets/images/main/banner_btn.png') no-repeat; background-position:center 0;}
        .banner_btns > .banner_btn:hover, .banner_btns > .active    {background-position:center -25px;}
    .banner_btns_mobile {display:block; position:relative; top:48%; margin:0 auto; width:95%; height:45px;}
        .banner_btns_mobile a[class^='banner_btn_'] {display:inline-block; width:45px; height:45px; background-position:0 0;}
        .banner_btns_mobile a[class^='banner_btn_']:hover   {background-position:0 -50px;}
        .banner_btns_mobile a.banner_btn_prev    {float:left; background:url('//image.nttgame.com/knight/ver2018/assets/images/main/banner_prev.png') no-repeat;}
        .banner_btns_mobile a.banner_btn_next    {float:right; background:url('//image.nttgame.com/knight/ver2018/assets/images/main/banner_next.png') no-repeat;}

section#CNT {background:url('//image.nttgame.com/knight/ver2018/assets/images/main/cnt_bg.jpg') no-repeat center top; padding-top:30px;}
article     {margin-bottom:3em;}
/*Jump Menu*/
article#JumpMenu    {float:left; width:70%;}
    ul.jump_menu    {}
    ul.jump_menu > li {
        display:inline-block; position:relative;
        -moz-calc(33.3% - 12px); width:-webkit-calc(33.3% - 12px); width:-o-calc(33.3% - 12px); width:calc(33.3% - 12px); height:90px;
        border:2px solid #81726c; outline:3px solid #4e433f;
        background-color:#4e433f; background-position:left top; background-repeat:no-repeat;
        text-align:right; cursor:pointer;
    }
    
        ul.jump_menu > li.jump_1    {float:left; margin:4px;
                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_1.png');}
        ul.jump_menu > li.jump_2    {clear:left; float:left; margin:4px;
                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_2.png');}
        ul.jump_menu > li.jump_3    {float:left; height:194px; margin:4px; margin-top:-99px;
                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_3.png');
                                    border:2px solid #5e4f4a; outline:3px solid black; background-color:#1c1715;}
        ul.jump_menu > li.jump_4    {float:right; margin:4px; margin-top:-99px;
                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_4.png');}
        ul.jump_menu > li.jump_5    {float:right; margin:4px;
                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_5.png');}
        ul.jump_menu > li.jump_6    {float:left; margin:0 auto; margin-left:4px; margin-top:4px; padding:5px 100px; height:auto;
                                    -moz-calc(100% - 212px); width:-webkit-calc(100% - 212px); width:-o-calc(100% - 212px); width:calc(100% - 212px);
                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_6.png'); background-position:left center; text-align:center;
                                    border-image:linear-gradient(to right, #a22524, #5c8c26); border-image-slice:1; border-width:2px;
                                    outline:3px solid black; background-color:#1c1715; overflow:hidden;}
        ul.jump_menu > li > span    {display:inline-block; /*margin-left:45%;*/ padding:17px 10px 0 0;
                                    color:#ac9e98; font-size:24px; font-weight:600; letter-spacing:-0.03em;}
        ul.jump_menu > li > em      {display:inline-block; margin-left:45%; padding:3px 10px 0 0;
                                    color:#81726c; font-size:13px; line-height:13px; letter-spacing:-0.03em;}
        ul.jump_menu > li.jump_3 > span {padding-top:10px; color:#ac5c05; font-size:35px;}
        ul.jump_menu > li.jump_3 > em   {color:#c68138;}
        ul.jump_menu > li.jump_6 > span {display:block; margin-left:0; padding:10px 0 0 0; color:#cc9762; font-size:24px;}
        ul.jump_menu > li.jump_6 > em   {display:block; margin-left:0; padding:0 0 14px 0; color:#cc9762; font-size:16px;}
        ul.jump_menu > li:hover {border:2px solid #d0c5c0;}
        ul.jump_menu > li:hover > span, ul.jump_menu > li:hover > em    {color:#d0c5c0;}
            ul.jump_menu > li.jump_3:hover  {border:2px solid #ac5c05;}
            ul.jump_menu > li.jump_3:hover > span, ul.jump_menu > li.jump_3:hover > em  {color:#ef891a;}
            ul.jump_menu > li.jump_6:hover  {border-image: linear-gradient(to right, #c73837, #7aa944); border-image-slice:1; border-width:2px;}
            ul.jump_menu > li.jump_6:hover > span, ul.jump_menu > li.jump_6:hover > em  {color:#ddae7f;}
            ul.jump_menu > li.jump_6 > em.bg_img    {position:absolute; display:block; top:-10px; right:0px; width:200px; height:90px;
                                                    background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/jump_menu_6.png'); background-position:right center;}

        ul.jump_menu > li.member    {float:left; height:192px; margin:4px; text-align:center;}
            ul.jump_menu > li.member:hover  {border:2px solid #81726c;}
            ul.jump_menu > li.member ~ li.jump_3, ul.jump_menu > li.member ~ li.jump_4  {margin-top:3px;}
            ul.jump_menu > li.member ~ li.jump_5  {margin-top:5px;}
            ul.jump_menu > li.member > span     {margin:0; padding:10px 0; display:block; height:auto;}
            ul.jump_menu > li.member > span.user_id {margin:0 10px; font-size:18px; border-bottom:1px solid #5d514d;}
            ul.jump_menu > li.member > span.btns    {padding:10px 5px;}
        .btns a.btn_M   {padding-top:8px; width:95%; height:26px; background:url('//image.nttgame.com/knight/ver2018/assets/images/common/btn_M.png') no-repeat center 0; font-size:14px; line-height:18px; letter-spacing:-0.03em;}
            .btns a.btn_M:before    {float:left; margin-top:-8px; content:''; width:2px; height:32px; background:url('//image.nttgame.com/knight/ver2018/assets/images/common/btn_M.png') left 0;}
            .btns a.btn_M:after     {float:right; margin-top:-8px; content:''; width:2px; height:32px; background:url('//image.nttgame.com/knight/ver2018/assets/images/common/btn_M.png') right 0;}
            .btns a.btn_M:hover:before  {background-position:left -40px;}
            .btns a.btn_M:hover:after   {background-position:right -40px;}
        dl.points   {margin:0 10px; padding:8px 0; display:block; text-align:right; border-bottom:1px solid #5d514d;}
            dl.points dt    {display:inline; width:70px; font-size:14px; font-weight:600; letter-spacing:-0.02em;}
            dl.points dt:after    {content:':'; width:5px;}
            dl.points dd    {display:inline-block; padding-right:5px; color:#ac9e98; font-size:14px;
                            -moz-calc(100% - 80px); width:-webkit-calc(100% - 80px); width:-o-calc(100% - 80px); width:calc(100% - 80px);}

/*Announcement*/
H2  {color:#77655e; font-size:36px; line-height:35px;}
article#Announcement    {width:70%;}
    dl.announce_list:hover   {padding-left:5px;}

/*Server Status*/
article#Server_Status   {float:right; margin-top:-700px; margin-bottom:1em; width:23%; background:#1c1715; border:1px solid #3f332f;} /*-255*/
H2.main {clear:both; padding:6px 0; background:#3f332f; font-size:22px; font-weight:400; line-height:24px; letter-spacing:-0.02em; text-align:center;}
        H2.main > span   {display:block; font-size:11px; line-height:14px; padding:2px 0;}
    dl.servers  {margin:10px 0 0 0; width:100%; zoom:1;}
    dl.servers:after    {content:'.'; clear:both; height:0px; display:block; visibility:hidden;}
        dl.servers dt   {clear:left; float:left; padding:2px 0 0 12px; height:15px; color:#77655e; font-size:11px; line-height:13px;
                        -moz-calc(100% - 135px); width:-webkit-calc(100% - 135px); width:-o-calc(100% - 135px); width:calc(100% - 135px);}
        dl.servers dd   {clear:right; float:left; padding:2px 0; width:110px; height:15px;}
        dl.servers dd > span    {display:block; width:102px; height:9px; border:1px solid #3f332f; background:url('//image.nttgame.com/knight/ver2018/assets/images/main/status_gauge_bg.jpg') no-repeat center;}
        dl.servers dd > span > em   {display:inline-block; float:left; height:7px; border:1px solid #1c1715; background:url('//image.nttgame.com/knight/ver2018/assets/images/main/status_gauge.jpg') no-repeat;}
    #Server_Status > p.note   {margin:10px; padding-top:5px; border-top:1px dashed #3f332f; color:#5d4b45; font-size:12px; text-align:center;}
	
/*Social Networks only Main*/
article#Social_Networks {float:right; margin-bottom:1em; width:23%; background:#1c1715; border:1px solid #3f332f;}
H2.social   {clear:both; padding:6px 0 2px; background:#3f332f; font-size:22px; font-weight:400; line-height:22px; letter-spacing:-0.02em; text-align:center;}
        H2.social > span   {display:block; padding-bottom:4px; font-size:13px; line-height:13px; letter-spacing:0em;}
    ul.main_social  {width:100%; text-align:center; padding:4px 0;}
    ul.main_social li   {display:inline-block; width:35px; height:40px; padding:0 2px;}
        ul.main_social li a {display:inline-block; width:35px; height:40px; background-position:0 0;}
        ul.main_social li a.facebook    {background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/sns_facebook.png');}
        ul.main_social li a.twitter     {background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/sns_twitter.png');}
        ul.main_social li a.instagram   {background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/sns_instagram.png');}
        ul.main_social li a.twitch      {background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/sns_twitch.png');}
        ul.main_social li a.youtube     {background-image:url('//image.nttgame.com/knight/ver2018/assets/images/main/sns_youtube.png');}
        ul.main_social li a:hover   {background-position:0 -40px;}	

/*Ranking*/
article#Ranking   {float:right; width:23%; background:#1c1715; border:1px solid #3f332f;}
div.ranking_class   {font-size:0;}
    div.ranking_class a {float:left; display:inline-block; padding:5px 0; width:25%; background:#3f332f; font-size:14px; text-align:center;}
    div.ranking_class a:hover   {color:#ac9e98; cursor:pointer;}
    div.ranking_class a.active  {background:#2c221e; color:#ac9e98;}
    div.ranking_class .select_server    {position:relative; clear:both; width:100%; padding:5px 0; background:#2c221e; text-align:center;}
    div.ranking_class select    {width:60%; font-size:13px;}
article#Ranking H3.main {clear:both; margin:10px 0 0 15px; font-size:16px; font-weight:600;}
    article#Ranking H3.Karus, article#Ranking ol.Karus li       {color:#42516f;}
    article#Ranking H3.El_Morad, article#Ranking ol.El_Morad li {color:#6f3a3a;}
article#Ranking > hr    {border:none; border-top:1px solid #3f332f;}
article#Ranking ol  {margin:5px 10px 10px 35px;}
    article#Ranking ol li  {list-style-type:none; list-style-position:outside; font-size:13px; font-weight:600;}
    article#Ranking ol li:before    {content:''; display:inline-block; margin:5px 5px 3px -20px; padding-top:3px; width:20px; height:15px;
                                    background:#2c221e; line-height:14px; text-align:center; content:counter(index, decimal); counter-increment:index;}
    article#Ranking ol li:first-child   {counter-reset:index;}

/*footer*/
ul.social   {display: none !important;}
	
@media screen and (max-width:999px) {
section#TOP {height:53.6vw; background-size:200%;}
    article.banner  {position:absolute; top:16.5vw; width:100%; height:40vw;}
        article.banner img  {position:relative; width:100%; margin-top:0px;}
section#CNT {position:relative; zoom:1;}
    section#CNT:after   {content:'.'; clear:both; height:0px; display:block; visibility:hidden;}
/*Jump Menu*/
    article#JumpMenu    {width:100%;}
/*Announcement*/
    article#Announcement    {width:100%;}
/*Server Status*/
    article#Server_Status   {float:left; margin-top:0px; width:230px;}
/*Social Networks only Main*/
    article#Social_Networks {position:absolute; left:0; bottom:5em; float:left; width:230px;}
/*Ranking*/
    article#Ranking   {-moz-calc(100% - 250px); width:-webkit-calc(100% - 250px); width:-o-calc(100% - 250px); width:calc(100% - 250px);}

}

@media screen and (max-width:767px) {
section#TOP {
    height: 49.6vw;
}	
article.banner {top:12.5vw; height: 35.5vw;}
    .banner_btns    {display:none;}
    .banner_btns_mobile {display:block;}
    section#CNT {background-size:30%;}
/*Jump Menu*/
    ul.jump_menu > li {background-position:-2rem top;}
    ul.jump_menu > li > span    {/*margin-left:25%;*/ font-size:22px; text-shadow:-1px 0 #4e433f, 0 1px black;}
    ul.jump_menu > li > em      {margin-left:35%; font-size:11px; letter-spacing:-0.07em; text-shadow:-1px 0 #4e433f, 0 1px black;}
}

@media screen and (min-width:501px) and (max-width:600px) {
    ul.jump_menu > li.member > span.user_id {font-size:14px;}
    dl.points dt    {width:52px; font-size:11px; letter-spacing:-0.05em; }
    dl.points dd    {font-size:12px; letter-spacing:-0.04em; -moz-calc(100% - 62px); width:-webkit-calc(100% - 62px); width:-o-calc(100% - 62px); width:calc(100% - 62px);}
}

@media screen and (max-width:500px) {
/*Jump Menu*/
    ul.jump_menu > li {background-position:-2rem top; /*background-size:95%;*/}
    ul.jump_menu > li.jump_3    {background-size:100%;}  
        ul.jump_menu > li > span    {/*margin-left:5%;*/ font-size:14px; letter-spacing:-0.05em;}
        ul.jump_menu > li > em  {display:none;}
    ul.jump_menu > li.member    {clear:both; -moz-calc(99.5% - 12px); width:-webkit-calc(99.5% - 12px); width:-o-calc(99.5% - 12px); width:calc(99.5% - 12px);}
    ul.jump_menu > li.member ~ li.jump_3    {clear:both; margin-top:5px; text-align:center;
                    -moz-calc(99.5% - 12px); width:-webkit-calc(99.5% - 12px); width:-o-calc(99.5% - 12px); width:calc(99.5% - 12px);
                    height:60px; background-size:25%; background-position:0 -5px;}
    ul.jump_menu > li.member ~ li.jump_4, ul.jump_menu > li.member ~ li.jump_5  {float:left; margin-top:5px; height:50px;
                    -moz-calc(49.5% - 12px); width:-webkit-calc(49.5% - 12px); width:-o-calc(49.5% - 12px); width:calc(49.5% - 12px);
                    background-size:50%; background-position:-0.6rem top;}
    ul.jump_menu > li.jump_6    {padding:5px 70px;
                                -moz-calc(100% - 152px); width:-webkit-calc(100% - 152px); width:-o-calc(100% - 152px); width:calc(100% - 152px);}
    ul.jump_menu > li.member ~ li.jump_6  {height:auto; background-position: middle -100px !important;}
    dl.points dt    {width:65px; font-size:14px;}
/*Server Status*/
    article#Server_Status   {width:100%;}
        dl.servers dt   {width:35%; margin-right:5%; text-align:right;}
        dl.servers dd   {width:45%;}
/*Social Networks only Main*/
    article#Social_Networks {position:relative; bottom:0; display:block; width:100%;}		
/*Ranking*/
    article#Ranking   {width:100%;}
}
/*_____________________________AnimateSlider_________________________*/
.anim-slider{
	background: none !important;
	min-width: 320px;
}

.anim-slide h4	{
	color: #fff;
	font-size: 25px;
}

.anim-slider div.anim-dots {clear:both; display:block; font-size:1px; text-align:center;}
        .anim-slider div.anim-dots > span {display:inline-block; width:20px; height:20px; background:url('//image.nttgame.com/knight/ver2018/assets/images/main/banner_btn.png') no-repeat; background-position:center 0; margin: 0; border-radius: 10px;}
        .anim-slider div.anim-dots > span.anim-dots-this  {background-position:center -25px;}
			
.anim-slider .anim-dots-this:after{
	border-radius: 10px;
}
.anim-slider .anim-dots span.anim-dots-this:after{
	background: none;
}
.anim-slider .hidden{
	display:none;
}
.anim-slider .slidingBannerCharArea{
	
}
.anim-slider .char-L img{
	left: 10%;
	position: absolute;
}
.anim-slider .char-R img{
	right: 10%;
	position: absolute;
}
.anim-slider .char-T img{
	left: 0;
	right: 0;
	top: 10px;		
	position: absolute;
	margin: 0 auto;
}	
.anim-slider .char-B img{
	left: 0;
	right: 0;
	bottom: 10px;		
	position: absolute;
	margin: 0 auto;
}

.anim-slider .slidingBannerTextArea{
	
}

.anim-slider .text-RB{
	position:absolute;
	bottom:10%;  
	right: 10%;  
	text-align:right;
}
.anim-slider .text-RT{
	position:absolute;
	top: 10%; 
	right: 10%; 
	text-align:right;
}
.anim-slider .text-LB{
	position:absolute;
	bottom: 10%; 
	left: 10%; 
	text-align:left;
}
.anim-slider .text-LT{
	position:absolute;
	top: 10%;
	left: 10%;
	text-align:left;						
}

.anim-slider .text-MB{
	top: 65%; right: 42%;
}
.anim-slider .text-MT{
	top: 65%; right: 42%;
}

.anim-slider .gameTitle{
	color: #ff9d00;
	font-size: 2.2em;
	font-weight: 700;
	text-shadow: 3px 3px 10px black;	
		
}	
.anim-slider .headline{

	font-size: 4em;
	font-weight: 800;
	line-height: 1em;
	color: white;
	text-shadow: 3px 3px 10px black;

}	
.anim-slider .bannerBody{
	font-size: 1.5em;
	font-weight: 300;
	color: white;
	text-shadow: 3px 3px 10px black;

}	
.anim-slider .learnMore{
	margin-top: 10px;
	font-size: 0.8em;
}	
.anim-slider .learnMore a{
		
	color: white;
	text-shadow: 3px 3px 10px black;
	font-weight: 700;					
}

.anim-slider .learnMore img.on {
	display: none;
	position: relative;
	top: 10px;
}

.anim-slider .learnMore a:hover img.on {
	display: inline;

}
.anim-slider .learnMore a:hover img.off {
	display: none;
}

.anim-slider .learnMore img.off {
	display: inline;
	position: relative;
	top: 10px;
}

.anim-slider .slidingBannerTextArea .learnMore{
	font-size: 2em;
}

@media screen and (max-width: 1024px) {
}
@media screen and (min-width:768px) and (max-width:1024px) {
	.anim-slider .gameTitle{
		font-size: 1.6em !important;
	}	
	.anim-slider .headline{
		font-size: 3em !important;
	}	
	.anim-slider .bannerBody{
		font-size: 1.3em !important;
		font-weight: 300 !important;
	}	
	.anim-slider .learnMore{
		margin-top: 5px;
		font-size: 0.8em;
	}
	.anim-slider .slidingBannerTextArea .learnMore{
		font-size: 1.8em;
	}
}

@media screen and (max-width:999px) {
	.anim-slider{
		height: 37vw !important;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
	.anim-slider .gameTitle{
		font-size: 1.6em !important;
	}	
	.anim-slider .headline{
		font-size: 2em !important;
	}	
	.anim-slider .bannerBody{
		font-size: 1.3em !important;
		font-weight: 300 !important;
	}	
	.anim-slider .learnMore{
		margin-top: 0px;
		font-size: 0.8em;
	}
	.anim-slider .slidingBannerTextArea .learnMore{
		font-size: 1.6em;
	}
	.anim-slider .games .poster_descLayer .description p {
		font-size: 0.8em;
		line-height:1.4;
	}
}

@media screen and (max-width:768px) {
	.anim-slider div.anim-dots { 
		display: none; 
	}	
}

@media screen and (min-width:0px) and (max-width:480px) {		
	.anim-slider .char-L{
		display:none !important;
	}
	.anim-slider .char-R{
		display:none !important;
	}

	.anim-slider .headline{
		font-size: 1.7em !important;
	}	
	.anim-slider .bannerBody{
		font-size: 1em !important;
		font-weight: 300 !important;
	}	
	.anim-slider .learnMore{
		margin-top: 10px;
		font-size: 0.8em;
	}
	.anim-slider .text-RB{
		bottom:16%;  
	}
	.anim-slider .text-LB{
		bottom: 16%; 
	}
	.anim-slider .slidingBannerTextArea  .learnMore{
		font-size: 1.4em;
	}
	.anim-slider .games .poster_descLayer .description p {
		font-size: 0.8em;
		line-height:1.4;
	}
}

.sub-contents { 
}
	.sub-contents table th{ 
		padding: 5px 0px;
	}
	.sub-contents table td{ 
		padding: 3px 0px;
	}

#prcess-loading {
    display:none; 
	position:fixed; 
	width:100px;	
	top:0; 
	left:50%; 
	margin-left:-50px; 
	padding:20px 10px;	
	text-align:center;
	z-index:100001; 
	background:rgba(0,0,0, 1);
	color:#FFFFFF;
	border-radius: 0 0 5px 5px;
}
.overlayOuter { 
	display:none; position:fixed; background:rgba(146,146,146, 0.7);	
	opacity:0.7; 
	filter:alpha(opacity=70); 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
	-moz-opacity:0.7; 
	-khtml-opacity: 0.7;
	width:100%; height:100%; left:0; top:0; z-index:100000; 
}	
.overlayInner { display:none; position:absolute; top:25%; left:50%; margin-left:-25%; z-index:100001; background:rgba(0,0,0, 1); border:1px solid #3c3c3c; 
}

.gnb-form input[type="text"], .gnb-form input[type="email"], .gnb-form input[type="password"] {
	margin-left: 0;
}

.gnb_user_register input[type="text"], .gnb_user_register input[type="email"], .gnb_user_register input[type="password"]{
	margin-left: 0;
}

.gnb-container span, .gnb-container div {
	font-size: 12px;
}
	
div.pages a.active {
	margin: 0 3px;
}

ul.TMenu > li > a { cursor: default; }
ul.TMenu > li > ul.sub_menu > li > a { width: auto !important } 
		
.banner_btns_mobile { z-index: 100; }
.banner_btns_mobile a.banner_btn_prev, .banner_btns_mobile a.banner_btn_next {
	display:inline-block; width:45px; height:45px; background-position:0 0;
}
.banner_btns_mobile a.banner_btn_prev:hover, .banner_btns_mobile a.banner_btn_next:hover   {
	background-position:0 -50px;
}		

@media screen and (max-width: 1024px) {
	.gnb-wrapper2 { 
		width: 100% !important; 
	}
}

@media screen and (min-width:0px) and (max-width:480px) {
	div#Top_Logo a {
		background-size: 70%;
	}
}