@charset "utf-8";
/******************************************************common******************************************************/
/*new*/
.YaS0jR{
    border-radius:5px;
}
#b_login{
    background-image: url("../img/gif1.gif");
}
.wrapper img{
  width: 100%;  /* Ajusta el tamaño del vídeo según tus necesidades */
  height: 100%; /* Mantén la proporción cuadrada */
  border: 5px solid #000;  /* Define el grosor y color del borde */
  border-radius: 15px; /* Redondea las esquinas */
}
/* base-font 16px 24px 32px 48px */
body{
    background-image: url("../img/background.gif");
    background-repeat:repeat;
}
#rk-wrap{background:url("../img/background.gif") repeat center top;color:#333;} 
#rk-wrap section{width:98%;padding:50px 1%} 

/* Main Carousel*/
.slide-txt{width:98%;background:#333 url(http://img.softnyx.com/3/rk2017/main/event-notice.gif);color:#FFF;padding:2%}
.slide-txt h2{font-size:32px;font-size:3.2rem;line-height:1em;margin-bottom:20px}
.slide-txt h3{font-size:24px;font-size:2.4rem;line-height:1em;margin-bottom:20px}
.slide-txt p{font-size:16px;font-size:1.6rem;line-height:1em}

/* video-area */
#video_area{position:relative;z-index:1;overflow:hidden;color:#EEE;background:#000 url(http://img.softnyx.com/3/rk2017/main/slide-img0.jpg) no-repeat center -80px;background-size:100% 100%} 
.dotBg{position:absolute;background:url(http://img.softnyx.com/3/rk/dot.png) center top;width:60%;height:50%;z-index:0;-ms-filter:		"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/* IE 8 */
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);/* IE 7 and olders */
opacity:.6}
*:first-child+html .dotBg{display:none}/*ie7 HACK*/
		
#video_area .mvBG{width:100%;height:auto;z-index:0;background:#000}
		
#video_area a{position:absolute;top:50%;left:50%;z-index:9;opacity:0.6;filter:alpha(opacity=60) /* For IE8 and earlier */}
#video_area a:hover{opacity:1;filter:alpha(opacity=100)}
#video_area .btn_video a{width:153px;height:107px;margin-left:-75px;margin-top:-50px;top:50%;}
#video_area .btn_down a{width:75px;height:30px;margin-left:-37px;margin-top:-15px;top:95%;}

/* event-area */
.event-l, 
.event-slide{width:98%;padding:0 1%} 

.event-area h3{font-size:32px;font-size:3.2rem;line-height:1.2em;margin-bottom:20px;border-top:3px solid #333;padding:20px 10px 5px}
.event-area h3:hover{border-top:3px solid #63C}

.event-area p{line-height:1.2em;margin-bottom:20px;padding:5px 10px}
.event-l{width:98%;padding:0 1%}
.event-l>div{background:#333 url(http://img.softnyx.com/3/rk2017/main/event-notice.gif);margin-bottom:10px;min-height:223px;color:#FFF}

.event-slide{text-align:center}
.event-slide li{padding:0; max-width:530px} 
.event-l>div.event-title,.event-l>div.update{background:none;color:#333} 
.event-l>div.notice{background:#333 url(http://img.softnyx.com/3/rk2017/main/event-area03.jpg) repeat-x center top}
.event-l>div.notice h3{padding-top:50px}
.event-l>div.notice ul{list-style:disc;background:#333 url(http://img.softnyx.com/3/rk2017/main/event-notice.gif)}
.event-l>div.notice li{list-style:inside;padding:9px 10px;color:#CCC;}
.event-l>div.notice li a{display:inline-block;zoom:1;*display:inline;width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1em}
.event-l>div.notice li.first{color:#FFF}

.social p{ padding:24px 0; text-align:center}
.social p a{display:inline-block;zoom:1;*display:inline;width:205px;height:45px;margin:0 auto;opacity:.6;filter:alpha(opacity=60) }
.social p a:hover{opacity:1;filter:alpha(opacity=100) }
.social p.facebook a{background:url(http://img.softnyx.com/3/rk2017/main/icon-social.png) repeat-x 0 0}
.social p.youtube a{background:url(http://img.softnyx.com/3/rk2017/main/icon-social.png) repeat-x 0 -127px}

.event-area:after{content:"";display:block;clear:both} 

/* creature-area */
.creature-area{ color:#CCC}
.creature-area>div{background:url(http://img.softnyx.com/3/rk2017/main/creature-bg02.jpg) repeat right bottom} 
.creature-area>div.txt, .video-area>div.txt{padding:40px 0}
.creature-area>div.txt h3, .video-area>div.txt h3{font-size:32px;font-size:3.2rem;line-height:1.2em;padding:20px 10px 5px}
.creature-area>div.txt p, .video-area>div.txt p{line-height:1.2em;margin-bottom:20px;padding:5px 10px}
.creature-area>div.txt li{display:inline-block;zoom:1;*display:inline;padding:10px; width:90px}

.video-area>div{background:url(http://img.softnyx.com/3/rk2017/main/character-bg02.jpg) no-repeat left top;position:relative}
.video-area>div.txt{background:url(http://img.softnyx.com/3/rk2017/main/character-bg01.jpg) repeat right top;color:#CCC}
.video-area .btn-play{display:inline-block;zoom:1;*display:inline;background:#60F;color:#CCC;padding:10px 20px} 
.video-area div.character a{position:absolute;display:inline-block;zoom:1;*display:inline;z-index:2;top:30%;left:30%}


/* etc-area */
.etc-area{background:url(http://img.softnyx.com/3/rk2017/main/etc-bg.jpg) repeat center top; color:#CCC}
#rk-wrap .etc-area>div{padding-top:0;padding-bottom:40px}

.category li{display:block;border-right:2px solid #333;border-bottom:2px solid #333;font-size:18px;font-size:1.8rem; margin:0 auto 20px; max-width:530px}
.category li.coupon{ background:url(http://img.softnyx.com/3/rk2017/main/etc-img01.jpg) no-repeat left top;background-size:100% 100%; }
.category li.install{ background:url(http://img.softnyx.com/3/rk2017/main/etc-img02.jpg) no-repeat left top;background-size:100% 100%;}
.category li a{display:block;color:#FFF;text-align:right;padding:75px 80px;line-height:1.5em}
.category em{display:block;text-transform:uppercase;font-size:24px;font-size:2.4rem;line-height:1.5em}

.etc-area div.rank{overflow:hidden;margin-top:50px;padding:0;background:url(http://img.softnyx.com/3/rk2017/main/etc-ranking-bg.png) no-repeat left top;background-size:100% 100%;border-right:2px solid #333;border-bottom:2px solid #333;max-width:530px; margin:0 auto 20px;}
.etc-area div.rank .cont{overflow:hidden;position:relative;margin:0.3rem}
.etc-area div.rank ol{overflow:hidden;position:absolute}
.etc-area div.rank ol li{float:left}
.etc-area div.rank ol li a{float:left;padding:14px 35px;background:#000;line-height:1.0}
.etc-area div.rank ol li.on a{background:#93F;color:#FFF}
.etc-area div.rank .btn-server{font-size:0}
.etc-area div.rank .btn-server a{display:inline-block;position:absolute}
.etc-area div.rank .btn-server a.prev{left:0}
.etc-area div.rank .btn-server a.next{right:0}
.etc-area div.rank .btn-server a img{background:#000}

.etc-area div.rank h3{padding:68px 20px 10px;font-size:32px;font-size:3.2rem;text-transform:uppercase;line-height:1.5em}
.etc-area div.rank ul{padding:0 0.75rem}
.etc-area div.rank ul li{padding:13px 18px;line-height:1.2em;height:20px; border-top:1px solid #333}
.etc-area div.rank ul li:nth-child(1), .etc-area div.rank ul li:nth-child(1) a{color:#FC0}
.etc-area div.rank ul li:nth-child(2), .etc-area div.rank ul li:nth-child(2) a{color:#CCC}
.etc-area div.rank ul li:nth-child(3), .etc-area div.rank ul li:nth-child(3) a{color:#C63}

.etc-area div.rank span{display:inline-block;zoom:1;*display:inline;width:12%;text-align:center}
.etc-area div.rank span.name{text-align:left;width:75%}
.etc-area div.rank span.win, .etc-area div.rank span.master, .etc-area div.rank span.level{width:28%;display:none}



/****************************************************** mobile & tablet ******************************************************/
@media all and (min-width:600px) and (max-width:1023px){

/* event-area */
.event-area{max-width:560px;margin:0 auto}
.event-l{width:98%;padding:0 1%}
.event-l>div{width:50%;float:left;margin:0}

.creature-area>div.txt li{width:90px}


}
/****************************************************** Desktop ******************************************************/
@media all and (min-width:1023px){ 

#video_area{height:740px\0/IE9;max-height:740px;background:url(http://img.softnyx.com/3/rk2017/main/slide-img0.jpg) no-repeat center -80px}
#video_area .mvBG{margin-top:-60px;}
#rk-wrap section>div{max-width:1060px;min-height:500px;margin:0 auto;padding-top:100px} 
 
/* Main Slide */
.slide-txt{position:absolute;top:40%;left:90%;width:300px;height:240px;background:rgba(0, 0, 0, 0.5);color:#FFF;padding:20px;margin-left:-450px}
.slide-txt h2{font-size:48px;font-size:4.8rem;line-height:1em;margin-bottom:20px}
.slide-txt h3{font-size:32px;font-size:3.2rem;line-height:1em;margin-bottom:20px;opacity:.5;filter:alpha(opacity=50)}
.slide-txt p{line-height:1.4em;opacity:.8;filter:alpha(opacity=80)}


/* event-area */
.event-l{float:left;width:23%;padding:0}
.event-slide{float:left;width:50%;margin:0 2%;padding:0} 

/* creature-area */
.creature-area>div{position:relative;float:left;width:54.4%;min-height:641px;overflow:hidden} 
.creature-area>div{background:url(http://img.softnyx.com/3/rk2017/main/creature-bg01.jpg) no-repeat right bottom} 
.creature-area>div .img_creature{position:absolute;right:0;bottom:0;display:inline-block;zoom:1;*display:inline;width:1040px;height:auto} 

.creature-area>div.txt{width:45.6%;background:url(http://img.softnyx.com/3/rk2017/main/creature-bg02.jpg) no-repeat left bottom; }
.creature-area>div.txt h3, .video-area>div.txt h3{margin-top:100px}
.creature-area>div.txt p,  .video-area>div.txt p{max-width:450px} 
.creature-area>div.txt ul{margin-top:200px}
.creature-area>div.txt li{width:120px}
 
.video-area{ background:#333}
.video-area>div{position:relative;width:54.4%;float:left;min-height:641px;background-position:left bottom}
.video-area>div.txt{width:45.6%;background:url(http://img.softnyx.com/3/rk2017/main/character-bg01.jpg) no-repeat right bottom;text-align:right}
.video-area>div.txt p{float:right;clear:both}

.video-area>div.img_character{float:right}
.video-area div.character{position:relative;width:970px;height:auto}
.video-area div.character>img{position:absolute;display:inline-block;zoom:1;*display:inline;top:-77px;z-index:1}
.video-area div.character a{position:absolute;left:30%;top:200px;display:inline-block;zoom:1;*display:inline;width:79px;height:78px;z-index:2}
.creature-area>div.txt, .video-area>div.txt{padding:0}

.creature-area:after, .video-area:after{content:"";display:block;clear:both} 


/* etc-area */
#rk-wrap .etc-area>div{padding-bottom:56px}

.category{height:200px}
.category li{display:inline-block;zoom:1;*display:inline;width:49%!important;margin-right:1%}
.etc-area div.rank{display:inline-block;zoom:1;*display:inline;width:49%!important;margin-right:1%;margin-top:50px}
.etc-area div.rank span.name{text-align:left;width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.etc-area div.rank span.win, .etc-area div.rank span.master, .etc-area div.rank span.level{display:inline-block;zoom:1;*display:inline;width:26%}


}