@charset "utf-8";/* CSS Document */ 

.select_box{position:relative;width:100%;color:#FFF;border:1px solid #444;background:#333;padding:4px 3px!important;font-size:16px;font-size:1.6rem}
.select_box:hover{border:1px solid #666}
.input_word{width:98%;color:#FFF;border:1px solid #444;background:#333;height:30px;padding:0 0 0 3px}
.btn_search{height:32px;color:#FFF;border:1px solid #444;background:#93F;text-align:center;padding:3px 0}
.btn_search a{color:#FFF;text-transform:uppercase;display:block;line-height:1.7em}
.btn_search input{ border:none;background:none;color:#FFF;font-size:18px;font-size:1.8rem;line-height:1.5em}

.btn_list{height:32px;color:#FFF;border:1px solid #333;background:#666;text-align:center;padding:3px 0}
.btn_list a{color:#FFF;text-transform:uppercase;display:block;line-height:1.7em}

/**** All ****/
#rk-wrap{background:url(http://img.softnyx.net/1/rk2017/sub/sub-bg.gif) repeat center top;color:#333;line-height:1.5em} 
h2,h3,h4,h5,em{text-transform:uppercase}
#rk-wrap em,#rk-wrap strong{color:#FC0}
.nickname{text-transform:none}
h4{font-size:24px;font-size:2.4rem;line-height:1.2em}
h3{font-size:32px;font-size:3.2rem;line-height:1.2em;color:#FFF;margin:40px 0}
img{vertical-align:-1px}

#rk-wrap h2{font-size:48px;font-size:4.8rem;line-height:1.2em;color:#FFF;text-shadow:5px 5px 5px rgba(0,0,0,0.9);/* For IE 8 */
 -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=100, Color='000')";/* For IE 5.5 - 7 */
 filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='000');filter:DropShadow(Color=#000, OffX=0, OffY=3);zoom:1}
 
#rk-wrap .sub-top{background:url(http://img.softnyx.net/1/rk2017/sub/sub-top-bg.jpg) repeat -50px 0;background-size:auto 100%;min-height:151px;text-align:center;padding-top:300px}
#rk-wrap .contents{background:#131313 url(http://img.softnyx.net/1/rk2017/sub/contents-bg.jpg) no-repeat right top;color:#CCC;margin:50px auto 0;padding:50px 2%}
#rk-wrap .gameinfo{background:#131313 url(http://img.softnyx.net/1/rk2017/sub/contents-bg.jpg) no-repeat right top}

#rk-wrap .about{background:#131313 url(http://img.softnyx.net/1/rk2017/sub/contents-bg3.jpg) no-repeat right top;background-size:100% auto;padding-top:50px}

.start-area{height:120px;background-position:center bottom}
.start-area:hover{background-position:center bottom}
.start-area li{line-height:60px}

/* basic tab */ 
.basic-tab, .small-tab, .white-tab{content:"";display:block;clear:both}
.basic-tab {background:#000;min-height:50px;margin:40px 0 20px} 
.basic-tab li{display:inline-block;zoom:1;*display:inline;width:48%;text-transform:uppercase;line-height:50px;text-align:center;border-top:2px solid #000;min-height:48px}
.basic-tab li:hover,.basic-tab li.on{color:#93F;border-top:2px solid #93F}
.basic-tab li:hover a, .basic-tab li.on a{color:#93F}

.small-tab a{text-transform:uppercase;border:#666 solid 3px;padding:10px 0;text-align:center;display:block !important;margin-bottom:20px}
.small-tab a:hover,.small-tab li.on a{border:#93F solid 3px;background:#93F;color:#FFF}

.white-tab a{text-transform:uppercase;border:#666 solid 3px;padding:10px 0;text-align:center;display:block !important;margin-bottom:20px}
.white-tab a:hover,.white-tab li.on a{border:#FFF solid 3px;background:#FFF;color:#333}
.myinfo li{margin-bottom:10px}
.myinfo-list li{text-transform:uppercase;margin-bottom:10px} 
.myinfo-list h4{font-size:36px;font-size:3.6rem}

.item_list, 
.creature_list{content:"";display:block;clear:both}
.item_list h3, 
.creature_list h3{background:#1e1e1e;border:3px solid #999;margin-top:40px;padding:10px 20px;font-size:24px;font-size:2.4rem}
.item_list h3:after, 
.creature_list h3:after{content:"";display:block;clear:both}
.item_list h4, 
.creature_list h4{margin-bottom:20px}

.item_list li{text-transform:uppercase}
.item_list li .right{text-transform:inherit}
.item_list li:hover a{color:#93F}
.item_list li>p{background:#1e1e1e;border:1px solid #333;text-align:center;padding-bottom:0;text-transform:uppercase;min-height:197px;margin-bottom:40px}
.item_list li a{display:inline-block;zoom:1;*display:inline;text-align:center;line-height:1em;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}
.item_list img{margin:0 auto;padding:30px 15px;display:block}

#itemlist img, #equipmentbook img, #creaturebook img, #accessoriesbook img, #exitem img{width:64px;height:64px}

.creaturebook_item{position:relative;display:inline-block;zoom:1;*display:inline;width:64px;height:64px;margin:29px 15px;z-index:0}
.creaturebook_item img{position:absolute;z-index:0;padding:0}
.creaturebook_item i{position:absolute;display:inline-block;zoom:1;*display:inline;width:64px;height:64px;top:0;left:0;z-index:1}
.creaturebook_item i.attr0{background:url(//img.softnyx.com/UploadFile/Rakion/itemicon/attr_0.png) no-repeat 0 0}
.creaturebook_item i.attr1{background:url(//img.softnyx.com/UploadFile/Rakion/itemicon/attr_1.png) no-repeat 0 0}
.creaturebook_item i.attr2{background:url(//img.softnyx.com/UploadFile/Rakion/itemicon/attr_2.png) no-repeat 0 0}
.creaturebook_item i.attrL1{z-index:2;background:url(//img.softnyx.com/UploadFile/Rakion/itemicon/attrL_1.png) no-repeat 28px 50px}
.creaturebook_item i.attrL2{z-index:2;background:url(//img.softnyx.com/UploadFile/Rakion/itemicon/attrL_2.png) no-repeat 28px 50px}

td>span.creaturebook_item{margin:0 0}
td>span.creaturebook_item i{left:3px}
td>span.creaturebook_item img{left:0}

.creature_list li{text-align:left;margin-bottom:40px;text-transform:uppercase}
.creature_list li span{display:inline-block;zoom:1;*display:inline;border:1px solid #333;width:100%;max-height:210px;overflow:hidden;vertical-align:middle;margin-bottom:10px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
.creature_list li i{display:inline-block;zoom:1;*display:inline;background:url(http://img.softnyx.net/1/rk2017/sub/creature_list-bg.png) no-repeat;background-size:100% 100%}
.creature_list li img{vertical-align:middle;width:100%}

.creature_img{border:1px solid #333;width:100%;max-height:425px;padding:0;margin:0;overflow:hidden}
.creature_img img{width:100%;padding:0;margin:0}
.creature_img iframe{width:100%;min-height:423px;/*max-width:530px*/}

.creature_hover{margin-top:50px}
.creature_hover li{display:inline-block;zoom:1;*display:inline;border:1px solid #333;margin-right:10px;margin-bottom:10px;width:100px;height:87px;overflow:hidden}
.creature_hover img{width:100px;height:auto}

.item_img{position:relative;border:1px solid #333;min-height:500px!important;background:#e2e2e2 url(http://img.softnyx.net/1/rk2017/sub/equipment-bg.jpg) no-repeat center top;display:-webkit-flex;display:flex;height:570px;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
.item_img img{margin:0 auto;padding:0 45px 0 0;display:inherit;max-height:542px}

_:-ms-fullscreen, :root #item_fullImage{padding-right:145px}

.item_img>ul{position:absolute;right:0;top:0;margin:0;padding:5px}
.item_img>ul>li{position:relative;margin:0;padding:5px;border:1px solid #333;margin-bottom:5px;text-align:center;min-height:64px}

.item_img>ul>li>img{padding:0;margin:0}
					
.item_img .helmet{background:#CCC url(http://img.softnyx.net/1/rk2017/item/default_00.png) no-repeat center 5px}
.item_img .armor{background:#CCC url(http://img.softnyx.net/1/rk2017/item/default_01.png) no-repeat center 5px}
.item_img .gauntlet{background:#CCC url(http://img.softnyx.net/1/rk2017/item/default_03.png) no-repeat center 5px}
.item_img .houlder{background:#CCC url(http://img.softnyx.net/1/rk2017/item/default_22.png) no-repeat center 5px}
.item_img .weaponry{background:#CCC url(http://img.softnyx.net/1/rk2017/item/default_24.png) no-repeat center 5px}
.item_img .range{background:#CCC url(http://img.softnyx.net/1/rk2017/item/default_04.png) no-repeat center 5px}
.item_img li>img{background:#CCC}


/* EQUIPMENT set info layer */
.itemset_layer{display:none;position:relative}
.item_img>ul>li:hover .itemset_layer{display:inline-block;zoom:1;*display:inline;position:absolute;z-index:999;left:-200px;top:64px;background:#333;border:3px solid #639;padding:10px;width:280px;height:560px;text-align:left}
.item_img>ul>li:hover .itemset_layer>h4{border:none!important;padding:0!important;margin:10px 0!important}
.item_img>ul>li:hover .itemset_layer>p{border-bottom:1px solid #999!important;padding:0!important;margin:10px 0!important}
.item_img>ul>li:hover .itemset_layer>ul>li{margin:0!important}

.itemset_layer:after, .itemset_layer:before{bottom:100%;right:10%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none}
.itemset_layer:after{border-color:rgba(51, 51, 51, 0);border-bottom-color:#333;border-width:7px;margin-left:-7px}
.itemset_layer:before{border-color:rgba(102, 51, 153, 0);border-bottom-color:#639;border-width:11px;margin-left:-11px}


.item_table .select{padding:5px;margin:0 0.75em;margin:0 0.75rem}

/* myRakion item-layer */
.item_layer .fg .close{right:0;top:0}
.item_layer .fg{overflow-x:hidden;overflow-y:scroll;padding:10px;height:480px;margin-top:-255px}
.item_layer .fg>ul{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #666}
.item_layer .fg>li{margin-bottom:2px!important}
.item_layer .fg h4{color:#93F;margin-bottom:10px}

.creature_layer .fg{height:400px;margin-top:-210px}


.point_list div{background:#;min-height:400px}
.point_list div:last-child{margin-right:0}
.point_list li{padding:1em 2.5em;padding:1rem 2.5rem;margin:0}

.activities h4{margin:80px 0 20px}
.activities h3{margin:40px 0 20px}
.activities ul{border-top:1px solid #333;border-left:1px solid #333}
.activities li{border-bottom:1px solid #333;border-right:1px solid #333;line-height:1.2em;padding:10px 20px}
.activities li:hover{background-color:rgba(225, 225, 225, 0.3);-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}

.activities li>span{float:right}
.activities .title{background:#1e1e1e;padding:20px;color:#999}
.activities .title h3{margin-top:0}
.activities .title .name{font-size:1.5em;line-height:1.2em;margin-bottom:20px;background:none;padding-left:0}
.activities .title p{background:url(http://img.softnyx.net/1/rk2017/sub/icon-crown.png) no-repeat left top;padding-left:50px;margin-bottom:10px}

/* table */
table, th, td{border:none;color:#999}
td, th{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle}
table tr th{text-transform:uppercase;background:#343434;font-weight:normal;font-size:1.125em;color:#FFF}
table{width:100%;display:table}
table.bordered td{border-bottom:1px solid #666}
table.striped > tbody > tr:nth-child(odd){background-color:#202020}
table.highlight > tbody > tr{-webkit-transition:background-color .25s ease;transition:background-color .25s ease}
table.highlight > tbody > tr:hover{background-color:#242424}
table.centered tr th, table.centered tr td{text-align:center}
table td img{margin:0 3px;vertical-align:-8px}
thead{border-bottom:1px solid #d0d0d0}
.name{text-align:left!important}
.img32 img{width:32px;height:32px;vertical-align:-7px;margin-right:10px}

/* Chart */
#chart_d{height:360px;overflow:hidden;text-align:center}
*:first-child+html #chart_d{margin-left:-200px;width:260px} /*ie7 Hack*/
.chart{position:relative;max-width:400px}
.win{position:absolute;line-height:1em;width:260px;height:140px;top:50%;left:50%;padding-top:120px;margin-top:-160px;margin-left:-130px;font-size:36px;font-size:3.6rem;font-weight:bold;text-align:center;background:url(http://img.softnyx.net/1/rk2017/sub/chart_bg.png) no-repeat;color:#93F;z-index:100}
.win0{color:#CCC}

@media \0screen { 
.win{margin-top:-130px;margin-left:-150px}
}



/* Ranking Clan */
.myInfo{background:#111;border:1px solid #444}
.myInfo img{ width:32px;height:32px;vertical-align:-7px;margin-right:5px}
.myInfo p{padding:10px 7px;padding:1rem 0.75rem}

.ranking_top{padding:20px 0}

.ranking_top img{vertical-align:-7px}
.ranking_top li{text-align:center}
.ranking_top li>p{text-align:left;padding:0 2rem}
.ranking_top li>p>a{ font-size:1.25em;line-height:2em}

.ranking_clan_img{position:relative;height:80px}
.ranking_clan_img>img{position:absolute}

/* Proluege */
.small_table{width:50%;float:left}
.small_table th{background:#666;color:#FFF!important;padding:7px 0}
.small_table th, .small_table td{border:#1px solid #999;text-align:center;font-size:12px;font-size:1.2rem;color:#FFF;padding:3px 0;line-height:1.2em}
.small_t img{vertical-align:4px}
.grade0{background-color:rgba(255,48,0,.8)}
.grade1{background-color:rgba(255,126,0,.8)}
.grade2{background-color:rgba(0,216,255,.8)}
.grade3{background-color:rgba(221,255,5,.8)}
.grade4{background-color:rgba(255,186,0,.8)}
.grade10{background-color:rgba(217,188,122,.8)}
.grade16{background-color:rgba(176,207,255,.8)}
.grade26{background-color:rgba(215,204,202,.8)}

/* Clan Ranking, Clan list */
.clan_list{content:"";display:block;clear:both}
.clan_list li{margin:10px 0}
.clan_list div{border:2px solid #666;padding:10px}
.clan_list div>p:nth-child(2){font-size:24px;font-size:2.4rem;line-height:2.5em}

.clan_info li{list-style:square inside;margin-bottom:5px;padding-left:-5px}


/* Gameinfo */
.gameinfo *{line-height:1.75em}
#rk-wrap .gameinfo h2{margin-bottom:80px}
#rk-wrap .gameinfo h3{margin-bottom:50px}
#rk-wrap .gameinfo h4{margin:60px 0 30px;border:#666 solid 3px;padding:10px 20px}
#rk-wrap .gameinfo h5{margin:20px 0 10px;font-size:20px;font-size:2rem}
#rk-wrap .gameinfo p{margin:15px 0 30px}
#rk-wrap .gameinfo dt,#rk-wrap .gameinfo dd{margin:0 0 15px}
#rk-wrap .gameinfo .depth{padding:40px 0}
#rk-wrap .gameinfo .depth>ul>li, #rk-wrap dt, #rk-wrap dd{margin:15px 0 15px 30px}
#rk-wrap .gameinfo .depth>ul>li, #rk-wrap .gameinfo dt, #rk-wrap .gameinfo dd{list-style:disc outside}
#rk-wrap .gameinfo .depth p>img{margin:5px 20px;vertical-align:-15px}


#rk-wrap .row>li{list-style:none!important;margin-left:auto!important}

.exitem li{text-transform:uppercase}
.exitem li:hover a{color:#93F}
.exitem li>p{background:#1e1e1e;border:1px solid #333;text-align:center;padding-bottom:40px;text-transform:uppercase;min-height:186px;margin-bottom:40px}
.exitem li a{display:inline-block;zoom:1;*display:inline;text-align:center;max-height:183px;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}
.exitem img{margin:0 auto;padding:40px 15px;display:block;width:64px;height:64px}


/* Story */
.story_list li{margin:20px 0 40px;text-transform:uppercase;border-bottom:2px solid #666}


/* Download */
.video_list li{text-align:left;margin-bottom:40px;text-transform:uppercase;min-height:220px!important}
.video_list li span{display:inline-block;zoom:1;*display:inline;border:1px solid #333;width:100%;max-height:240px;overflow:hidden;vertical-align:middle;margin-bottom:10px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
.video_list li:hover span{border:1px solid #339;color:#63C}
.video_list li img{vertical-align:middle;width:100%}

.d_video{position:relative}
.d_video iframe{width:100%;height:250px}


/* character */
.sword{background:url(http://img.softnyx.net/1/rk2017/main/slide-img03.jpg) center top}
.archer{background:url(http://img.softnyx.net/1/rk2017/main/slide-img01.jpg) center top}
.blacksmith{background:url(http://img.softnyx.net/1/rk2017/main/slide-img05.jpg) center top}
.mage{background:url(http://img.softnyx.net/1/rk2017/main/slide-img02.jpg) center top}
.ninja{background:url(http://img.softnyx.net/1/rk2017/main/slide-img06.jpg) center top}
.dualist{background:url(http://img.softnyx.net/1/rk2017/main/slide-img04.jpg) center top}
.character_top{position:relative;min-height:250px;padding-top:150px;background-size:auto 100%}

#commentlist{clear:both}
#commentlist li{border-bottom:1px dashed #999;padding:10px 20px}
#commentlist .name{font-size:1em;color:#F63}
#commentlist span.date{font-size:.9em;color:#999}
#commentlist span.del{float:right;display:inline-block;padding:0 3px;cursor:pointer;border:1px solid #999}

#commentlist li>p:last-child{width:100%;display:inline-block;-ms-word-break:break-all;word-break: break-all;word-break: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto}

.re-text{width:100%}
.re-btn{display:block;width:100%;padding:10px 3px;background:#93F;color:#FFF;text-align:center}
.re-btn *{font-size:1.25em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;color:#FFF}

/* bottom_link */
.bottom_link{background:#131313;padding:50px 0;margin-top:100px}
.bottom_link h3{margin:20px 0 10px}
.bottom_link p{margin:0 auto 10px}
.bottom_link i{display:inline-block;zoom:1;*display:inline;background:url(http://img.softnyx.net/1/rk2017/sub/bottom_link.png) no-repeat left top;width:100px;height:93px;opacity:.7;filter:alpha(opacity=70)}
.bottom_link i:hover{opacity:1;filter:alpha(opacity=100)}
.bottom_link i.down{ background-position:-400px 0}
.bottom_link i.event{background-position:-800px 0}

.bottom_link li{border-bottom:solid #333 1px;margin:20px 0}
.bottom_link li:last-child{ border-bottom:none}


@media only screen and (min-width:992px) {
#rk-wrap .about{background-size:100% auto;padding-top:200px}

/* EQUIPMENT set info */
.item_img>ul>li:hover .itemset_layer{left:10px}
.itemset_layer:after, .itemset_layer:before{left:10%}


.start-area{height:90px;background-position:center bottom}
.start-area:hover{background-position:center bottom}
.start-area li{line-height:80px}
 
}

@media only screen and (max-width:992px) {
/* table */
table.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative;/* sort out borders */}
table.responsive-table td:empty:before{content:'\00a0'}
table.responsive-table th, table.responsive-table td{margin:0;vertical-align:top}
table.responsive-table th{text-align:left}
table.responsive-table thead{display:block;float:left}
table.responsive-table thead tr{display:block;padding:0 10px 0 0}
table.responsive-table thead tr th::before{content:"\00a0"}
table.responsive-table tbody{display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap}
table.responsive-table tbody tr{display:inline-block;vertical-align:top}
table.responsive-table th{display:block;text-align:right}
table.responsive-table td{display:block;min-height:1.25em;text-align:left}
table.responsive-table tr{padding:0 10px}
table.responsive-table thead{border:0;border-right:1px solid #d0d0d0}
table.responsive-table.bordered th{border-bottom:0;border-left:0}
table.responsive-table.bordered td{border-left:0;border-right:0;border-bottom:0}
table.responsive-table.bordered tr{border:0}
table.responsive-table.bordered tbody tr{border-right:1px solid #d0d0d0}

}

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

#rk-wrap .sub-top{background-position:center top}
#rk-wrap .contents{min-height:800px;max-width:1060px;margin:100px auto 0;padding:100px 124px}
#rk-wrap .gameinfo, #rk-wrap .about{max-width:1060px;margin:-20px auto 0;margin:0 auto\9}
#rk-wrap .about{ padding-top:600px}
#rk-wrap>.basic-tab{max-width:1308px;margin:100px auto 0}

/* basic tab */
.basic-tab {background:#000;min-height:50px;margin:40px 0 20px} 
.creature_layer .fg{width:620px;height:300px;margin:-160px 0 0 -320px}


.d_video iframe{height:450px}
.rk_gnb li li>a{padding:0px 5px}


/* character */
.character_top{position:relative;min-height:250px;padding-top:450px}
.character_top h2{letter-spacing:0.725em}
.sword{background:url(http://img.softnyx.net/1/rk2017/main/slide-img03.jpg) center -60px}
.archer{background:url(http://img.softnyx.net/1/rk2017/main/slide-img01.jpg) center top}
.blacksmith{background:url(http://img.softnyx.net/1/rk2017/main/slide-img05.jpg) center top}
.mage{background:url(http://img.softnyx.net/1/rk2017/main/slide-img02.jpg) center top}
.ninja{background:url(http://img.softnyx.net/1/rk2017/main/slide-img06.jpg) center top}
.dualist{background:url(http://img.softnyx.net/1/rk2017/main/slide-img04.jpg) center -60px}

.re-text{width:75%;float:left}
.re-btn{display:inline-block;zoom:1;*display:inline;float:right;width:23%;height:50px;padding:36px 0}
.re-btn *{font-size:1.25em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none}


.bottom_link ul{width:100%;max-width:1280px;margin:0 auto}
.bottom_link li{ border-right:solid #333 1px;border-bottom:none }
.bottom_link li:last-child{ border-right:none}


}



/****************************************************** BIG Desktop ******************************************************/
@media all and (min-width:1280px){ 
.creature_list li span{max-height:260px}


}