@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/

/*common*/
body {background: #101014;}

.all-hidden {overflow:hidden; position:absolute !important; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; border:0; padding:0;}

.wrap {position: relative; display: flex; justify-content: space-between;}
.wrap:after {display: block; content: ''; clear: both;}

.menuWrap {height: 100vh; min-width: 260px; display: block;}
.menuWrap.hide {display: none;}
h1 {}
.menuBtn {position: absolute; top: 0; left: 260px; display: block; width: 80px; height: 80px; text-align: center; padding-top: 25px; cursor: pointer; z-index: 9999;}
.menuBtn.hide {left:0px;}
.menu a li {padding-left:20px; }
.menu a:nth-child(3) li, .menu a:nth-child(5) li {border-bottom: 1px solid #27272E;}
.menu a li {color: #707070;}
.menu a li.active {color:#fff; position: relative;}
.menu a li.active ::before {display: block; content: ''; clear: both; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color:#C73456;}

.menu a li span {display:inline-block;  width:52px; height:52px; background-size:100% !important; padding:16px 0 0 62px; vertical-align: middle; }
.menu a li .home_img {background:url("/etheria_wiki/img/btnIco_home.png") no-repeat center; }
.menu a li.active .home_img {background:url("/etheria_wiki/img/btnIco_home_active.png") no-repeat center;}
.menu a li .cha_img {background:url("/etheria_wiki/img/btnIco_characters.png") no-repeat center;}
.menu a li.active .cha_img {background:url("/etheria_wiki/img/btnIco_characters_active.png") no-repeat center;}
.menu a li .tier_img {background:url("/etheria_wiki/img/btnIco_tier.png") no-repeat center;}
.menu a li.active .tier_img {background:url("/etheria_wiki/img/btnIco_tier_active.png") no-repeat center;}
.menu a li .build_img {background:url("/etheria_wiki/img/btnIco_build.png") no-repeat center;}
.menu a li.active .build_img {background:url("/etheria_wiki/img/btnIco_build_active.png") no-repeat center;}
.menu a li .team_img {background:url("/etheria_wiki/img/btnIco_team.png") no-repeat center;}
.menu a li.active .team_img {background:url("/etheria_wiki/img/btnIco_team_active.png") no-repeat center;}
.menu a li .shell_img {background:url("/etheria_wiki/img/btnIco_shell.png") no-repeat center;}
.menu a li.active .shell_img {background:url("/etheria_wiki/img/btnIco_shell_active.png") no-repeat center;}
.menu a li .metrix_img {background:url("/etheria_wiki/img/btnIco_matrix.png") no-repeat center;}
.menu a li.active .metrix_img {background:url("/etheria_wiki/img/btnIco_matrix_active.png") no-repeat center;}

#section {position:relative; background:#222329; padding:2.4%;}

#sectionWrap {position: relative; width:100%}
#top_menu {height: 80px; display: flex; justify-content: flex-end; padding-top: 14px;}
.screen_change { background: #404044; width: 120px; height: 48px; text-align: center; padding-top: 13px; border-radius: 10px; margin-right:20px;}
.screen_change img {display: inline-block; padding-right: 4px;}
.screen_change:hover {background: #C73456;}

.mb80 {margin-bottom: 80px;}

.sTitle {font-weight: 800; font-size: 1.7em;padding-bottom:20px;}
.sTitle img {vertical-align: middle; padding-right:8px; position: relative; top: -5px;}
.view_detail {border: 1px solid #C73456; border-radius: 10px; font-size: 15px; color: #C73456 ; padding: 4px 28px ;display: inline-block; vertical-align: middle; 
	        margin-left: 12px; position: relative; top: -6px;}
.date {font-size: 15px; }
.bTxt { font-size: 15px; color: #C73456 ; font-weight: 400; padding-left: 10px;}

.notice {display: flex;}
.noticeTitle {width: 13%; padding-top: 1.2%;}
.notice_box {background: #404044; width: 100%; border-radius: 10px; padding: 1.7%;}
.notice_box li {position: relative;}
.notice_box li .date {position: absolute; right: 0;}

.characters {}
.contbox_Wrap {position: relative;}
.cb_cont {display: inline-flex; }
.cbBox {margin-right: 20px; width: 240px; height: 240px; background:#101014; border-radius: 10px; text-align: center;}
.cbBox .ch_bg {border-radius: 10px;}
.cbBox .hover_box {position: absolute; top: 0; left: 0; background:transparent linear-gradient(180deg, #10101400 0%, #000000 100%) 0% 0% no-repeat padding-box;
                	width: 240px; height:100%; border-radius: 10px;}
.cbBox .hover_box span {position: absolute; bottom: 25px; left: 0; right: 0; text-align: center; }
.cbBox .hover_box img {width: 32px; }
.cbBox .hover_box i {padding-left: 10px; vertical-align: middle;} 

.cb_bg2 li.cbBox:first-child {padding-top: 4%;}
.cb_bg2 li.cbBox {padding-top: 3.3%;}
.cb_bg2 li.cbBox h4 {font-size: 1.3em;}
.cb_bg2 li.cbBox p span {display: block; padding-top: 10px;}

.cb_bg2 li.cbBox a p:first-child {font-size: 22px; font-weight: 600;}
.matrix .cb_bg2 li.cbBox a p img {width: 28px; display: inline-block; vertical-align: middle; padding: 0 8px 0 0;}
.matrix .cb_bg2 li.cbBox .category {font-size: 15px; padding-top: 16px;}

.arrow_btn {background:#404044 url("/etheria_wiki/img/arrow.png") no-repeat  14px 9px; position: absolute; right: 0; top:40%;width: 40px; height: 40px; border-radius: 50px; 
           background-size:13px !important}
.arrow_btn:hover {background:#C73456 url("/etheria_wiki/img/arrow_active.png") no-repeat  14px 9px;}



.tierContents {}
.tierIist {display: flex; margin-bottom: 20px;}
.tierIist .img {margin-right: 40px;}
.tierIist dl {}
.tierIist dl dt {font-size: 1.3em; font-weight: 600;}
.tierIist dl dd {}

.box3_hover {display: flex;}
.box3_hover li {margin-right: 16px; position: relative;}
.box3_hover li:last-child {margin-right: 0;}
.box3_hover li img {}
.box3_hover li span {position: absolute; top: 37%; left:0; right: 0; text-align: center; font-weight: 600; color:#C73456 ;}
.box3_hover li a:hover span {color:#FFFFFF ;}

.buildContents {display: flex;}
.buldbox {margin-right: 20px; width: 50%; background: #101014; border:1px solid #707070; padding: 10px; display: flex; border-radius: 10px; position: relative;}
.buldbox:last-child {margin-right: 0;}
.buldbox dl {margin-left: 20px; padding-top:10px;}
.buldbox dl dt {font-weight: 600;}
.buldbox dl dd .date {padding-top: 10px; display: block;}

.link_arrow {position: absolute; right: 20px; top: 37%;}

.character_search {margin-bottom: 40px; border-bottom:1px solid #707070; padding-bottom: 40px;}
.optionBox1 {display: flex; justify-content: space-between;}
.searchBox {}
.searchBox span {position: relative;} 
#searchstring {background:#404044; padding: 12px; width: 595px; position: relative; border-radius: 10px; border: none;	height: 52px;}
.searchBox button {position: absolute; right:0; height: 52px; color:#fff;}
.searchBox img {vertical-align: middle; padding-right:5px;}

.round_btnBox {background:#000; border-radius: 10px; margin-bottom: 6px;}
.round_btnBox ul {display: flex; justify-content: space-between;}
.round_btnBox ul li {padding:8px 12px}
.round_btnBox ul li.active {background:#C73456; font-weight: 600;}
.round_btnBox ul li button {color: #fff;}
.round_btnBox ul li button img {vertical-align: middle; padding-right: 10px;}
.round_btnBox ul li.round_active {border-radius: 10px; margin:6px 0; padding:2px 12px;}

.rating {margin:0 6px 6px;}


.chat_tag {}
.chat_tag ul {display: block; position: relative;}
.chat_tag ul:after {display: block; content: ''; clear: both;}
.chat_tag ul li {float: left;}

.reset_box {}
.reset_box img {vertical-align: middle; margin-right: 4px;}
.reset_box button {color:#fff;}
.reset_box .btn_reset {color:#fff;}
.reset_box span {}
.reset_box span i {border-radius: 10px; border:1px solid #C73456; color:#C73456; padding:2px 8px; font-size: 15px;}
.reset_box span button {padding:0; margin-left: 2px;}


.character_box {position: relative;margin-bottom: 40px;}
.character_box:after {display: block; content: ''; clear: both;}

.charBox {float: left;  display: flex; justify-content: flex-start; width: 49.2%; border-radius: 10px; background-color: #000; margin-bottom: 1.6%; height: 240px; }
.charBox:nth-child(2n) {margin-left: 1.6%;}
.charBox .charImg {width: 240px;}
.charBox .charTxt {padding: 20px 20px; width: 75%;}
.charBox .charTxt h4 {font-size: 22px; font-weight: 800;}
.charBox .charTxt ul {display: flex; justify-content: flex-start; margin: 11px 0 10px;}
.charBox .charTxt ul li {width: 120px; padding: 10px; text-align: center; background: #404044; margin-right: 5px;}
.charBox .charTxt ul li.class_r {background: #078DFE;}
.charBox .charTxt dl {border: 1px solid #707070; position: relative;}
.charBox .charTxt dl:after {display: block; content: ''; clear:both;}
.charBox .charTxt dl dt,
.charBox .charTxt dl dd {float: left; width: 16.65%; text-align: center; height:40px; border-right: 1px solid #707070; border-bottom:  1px solid #707070; }

.charBox .charTxt dl dd:nth-child(3n) {border-right: 0;}

.charBox .charTxt dl dt {font-size: 15px; padding: 9px 4px;}
.charBox .charTxt dl dd {color: #000; font-weight: 600; padding: 8px 4px;}
.charBox .charTxt dl dd.t0_5 {background: #FFBE7C;}
.charBox .charTxt dl dd.t1 {background: #EC6563;}
.charBox .charTxt dl dd.t2 {background: #FFA967;}
.charBox .charTxt dl dd.t5 {background: #9DF89D;} 

.moreBox {background: transparent linear-gradient(180deg, #23242A00 0%, #000000 100%) 0% 0% no-repeat padding-box; 
	      position: absolute; bottom: 0; left: 0; right: 0; height: 50%; text-align: center;}
.moreBox span {position: absolute; bottom: 40px;}
.moreBox span img {vertical-align: middle; margin-right: 6px;}



#footer {display: flex; justify-content: space-between; border-top: 1px solid #707070; padding: 40px 0;}
.foot_log {}
#footer ul {display: flex;justify-content: space-evenly; font-size: 14px;}
#footer li {padding-left: 20px; position: relative;}
#footer li:after {content: "|"; display: block; clear: both; position: absolute; right:-10px; top: 0;} 
#footer li:last-child:after {display: none;}



@media all and (min-width:768px) {

}

@media all and (min-width:1200px) {




}



/**/

 

/*mainvisual*/