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

/*common*/
body {background: #000000;}
body.no-scroll {overflow: hidden;}

.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;}

.mb80 {margin-bottom: 80px;}
.txtEnter {display: block; line-height: 1;}
.flt_clear {position: relative;}
.flt_clear:after {clear: both; display: block; content: '';}

.topMenu {height: 80px;}
.menu_logo {text-align: center; padding-top:12px}
.menu_logo img {max-width:230px;}
.wiki_guide {display: none;}

.topArea {display: none;}
.topArea.active {display: block; position: absolute; top: 0; left: 0; right: 10px; width: 100%; height: 80px; background: #141414; z-index: 999;}
.hamburger {height: 24px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; position: absolute; top: 28px; left: 20px; z-index: 1000;}
.hamburger span { display: block; height: 2px; width: 32px; background: #3E9F88; border-radius: 3px; transition: 0.3s; }

/* X자 변환 */
.hamburger.active {top:28px}
.hamburger.active span:nth-child(1) {transform: translateY(10px) rotate(45deg); margin-top:2px;}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: translateY(-10px) rotate(-45deg);}


/* 사이드 메뉴 */
.wiki_guide_mobile {margin-top: 10px;}
.wiki_guide_mobile span {border: 1px solid #3E9F88; color: #3E9F88; padding: 10px 20px; border-radius: 50px;}
.side-menu {position: fixed; z-index:100; top: 0; left: -100vw; width: 100vw; height: 100vh; background: #141414; color: #fff; padding: 80px 20px; transition: 0.3s; overflow:auto;}
.side-menu.active {left: 0;}
.side-menu .menu_section {border-bottom: 1px solid #707070; padding-bottom: 20px; margin-bottom: 20px;}
.side-menu h3 {font-size: 1.2em; font-weight: 600; padding-bottom:10px ;}
.side-menu ul li {padding: 10px;}

.mainBg {position: relative; text-align: center;}
.mainBg .pc_img {display: none;}
.mainBg .banner {position: absolute; bottom: -30px; text-align: center; width: 100%;}
.mainBg .banner p img {max-width: 60%;}
.mainBg .banner p.none {display: none;}

.cnt_width {padding: 80px 20px;}
#md-content {border-top: 1px solid #424242;}
.bg_gry {background: #141414;}
.h3_p {position: relative; margin-bottom:20px;}
.h3_p h3 {font-size: 1.5em; font-weight: 600; display: inline-block; margin-right: 10px;}
.h3_p a {border: 1px solid #3E9F88; color: #3E9F88; padding: 6px 10px; border-radius: 50px; font-size: 0.9em; position: absolute;}

.btnCom_cnt {position: absolute; right: 20px; bottom: 55px; z-index: 100;}
.btnCom_cnt a {position: relative; display: inline-block;}
.btnCom_cnt a::after {display: block; content: ''; clear: both; width: 40px; height: 40px; border-radius: 100px; }
.btnCom_cnt .arrow_prv::after {background:#141414 url(../img/arrow_gry.png) no-repeat 9px 5px; background-size: 18px;}
.btnCom_cnt .arrow_next::after {background:#141414 url(../img/arrow_gry.png) no-repeat 9px 5px; transform: scale(-1, 1); background-size: 18px;}
.btnCom_cnt .arrow_prv.active::after {background:#141414 url(../img/arrow_clr.png) no-repeat 9px 5px;  background-size: 18px;}
.btnCom_cnt .arrow_next.active::after {background:#141414 url(../img/arrow_clr.png) no-repeat 9px 5px; transform: scale(-1, 1); background-size: 18px;}


.character {padding-top: 80px; overflow: hidden; position:relative}
.character_wrap {position: relative;}
.character_box {display: inline-flex;}
.crt {width: 180px; position: relative; margin-right:10px}
.crt .ct_name {position: absolute; top: 10px; left: 10px;}
.crt .ct_name i {font-size: 0.9em; margin-right: 5px;}
.crt .ct_name img {max-width: 15%; display: inline-block; margin-right: 5px; vertical-align: middle;}
.crt .ct_name span {font-size: 1.2em;}
.crt .ct_img {background:#141414; border-radius: 20px;}
.crt .ct_img img {border-radius: 20px;}


.guide_half .db_btn {display: flex;}
.guide_half .db_btn li {width: 100px; padding: 8px; background: #000; border-radius: 50px; text-align: center; margin-right: 6px;}
.guide_half .db_btn li.active {border: 2px solid #3E9F88; color: #3E9F88; font-weight: 600;}

.guide_half .db_cnt li {float: left; width: 46%; margin: 2%; text-align: center;}
.guide_half .db_cnt li .img {background: transparent radial-gradient(closest-side at 50% 50%, #264D44 0%, #000000 100%) 0% 0% no-repeat padding-box; border-radius: 20px; max-width: 310px; max-height: 310px; width: 100%; height: 100%; padding: 30px 0;}
.guide_half .db_cnt li .img img {max-width: 60%;}
.guide_half .db_cnt li .txt {font-weight: 600; font-size: 1.2em;padding-top:10px}
.guide_half .db_cnt li .txt span {color: #3E9F88; position: relative; font-weight: 400; font-size: 0.9em;padding-right: 10px; margin-right: 6px;}
.guide_half .db_cnt li .txt span:after {display: block; clear: both; content: '|'; color:#3E9F88; position: absolute; right: 0; top: 0;}

.vof_box{position: relative;}
.alliance .allianTxt {margin-bottom: 20px;}
.alliance .allianTxt h2 {font-size: 2.5em; font-weight: 600; color: #3E9F88;}

.alliance .allianTxt ul li {position: relative; padding-left: 20px;}
.alliance .allianTxt ul li::before {display: block; content: ''; clear: both; background: url(../img/dot.png) no-repeat; background-size: 100%; width: 14px; height: 10px; position: absolute; left: 0; top: 6px;}


.arrowBtn_box .arrow_bg {position: absolute; }
.arrowBtn_box .arr_prev {top: 66%; left: 0;}
.arrowBtn_box .arr_next {top: 66%; right: 0;}
.arrowBtn_box .arrow_bg::after {display: block; content: ''; clear: both; width: 40px; height: 40px; border-radius: 100px; }
.arrowBtn_box .arr_prev::after {background: url(../img/arrow_gry.png) no-repeat 9px 5px; background-size: 18px;}
.arrowBtn_box .arr_next::after {background: url(../img/arrow_gry.png) no-repeat 9px 5px; transform: scale(-1, 1); background-size: 18px;}
.arrowBtn_box .arr_prev.active::after {background: url(../img/arrow_clr.png) no-repeat 9px 5px;  background-size: 18px;}
.arrowBtn_box .arr_next.active::after {background: url(../img/arrow_clr.png) no-repeat 9px 5px; transform: scale(-1, 1); background-size: 18px;}



.sponsor .sponsor_txt {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #424242;}
.sponsor .sponsor_txt .sps_btn {position: relative; display: block; background: #3E9F88 ; padding: 10px; width: 70%; border-radius: 10px; margin-top: 10px;}
.sponsor .sponsor_txt .sps_btn::before {display: block; content: ''; clear: both; background: url(../img/arrow_wh.png) no-repeat; width: 14px; height: 28px; transform: scale(-1, 1);
										position: absolute; right: 10px; top:10px; background-size: 100%;}

.sponsor .sps_apply dl {margin-bottom: 20px;}
.sponsor .sps_apply dl dt {border: 1px solid #3E9F88; border-radius: 10px; padding:6px ; width: 100px; text-align: center; color:#3E9F88; margin-bottom: 10px;}


.footer {text-align: center; padding: 40px 20px;}
.footer img {max-width: 100px;}
.footer p {font-size: 0.8em; padding: 6px 0;}

/*서브*/
.sub_width {padding: 40px 20px;}
h2 {font-size: 1.5em; font-weight: 600; padding-bottom: 20px;}

.search_filter {background:#141414; border-radius: 10px;}
.search_filter .search {padding: 10px; display: flex;}
.search_filter .search .filter_tab {font-size: 1.2em; width: 40%; position: relative;}
.search_filter .search .filter_tab  .btn_detail {height: auto; transform: rotate(-90deg); position: absolute; top: -5px; right:-10px;	}
.search_filter .search .filter_tab  .btn_detail img {max-width: 40%;}
#search_form {position: relative; width: 60%;}
#search_form input {background: none; border:1px solid #3E9F88; border-radius: 50px;}
#search_form .searchString {position: absolute; top: 7px ; right: 2px;} 
.detail_filter {border-bottom: 1px solid #4B4B4B; margin: 10px;}
.detail_filter:last-child{border-bottom: 0;}
.detail_filter li {float: left; width: 33.3%;}
.detail_filter li.w60 {width: 60%;} 
.detail_filter img {max-width: 24px; vertical-align: sub; display: inline-block; margin-right: 5px;}

.character_intro {padding-top: 40px; margin-top: 40px; border-top: 1px solid #707070;}
.intro_info {background:#141414; padding: 10px;}
.ch_name {display: flex;justify-content:space-between; padding: 20px 0;}
.ch_name h3 {font-size: 1.7em; font-weight: 800; }
.ch_name img {max-width: 32px; margin-right: 8px; vertical-align: top;}

.tier {display: flex;}
.tier li {background: transparent radial-gradient(closest-side at 50% 50%, #264D44 0%, #000000 100%) 0% 0% no-repeat padding-box;
         border:1px solid #3E9F88; border-radius: 10px; width: 40px; height: 40px; border-radius: 10px; margin-left: 10px; padding: 6px;}
.tier li img {max-width: 28px;}
.table table {border-bottom: 1px solid #000; background:none; width: 100%; margin-bottom: 10px;}
.table table tr th {background-color: #141414;}
.table table tr th,
.table table tr td {padding: 10px 0; text-align: center;  color: #fff; width: 33.3%;}
.table table tr.tclr,
.table table tr.tclr th {background:#192321; }
.review textarea {height: 42px; background-color: #000; color: #fff; border-radius: 10px; border: 0;}
.character_img {margin-top: 20px;}

.tabnav {display: flex; border-radius: 20px; background-color: #000; margin-bottom: 20px;}
.tabnav li {width: 25%; text-align: center;}
.tabnav li a {display: inline-block; padding: 20px 0; text-align: center; width: 100%;}
.tabnav li.active a {background-color: #3E9F88; font-weight: 600;}
.tabnav li:first-child.active a {border-radius: 20px 0px 0px 20px;}
.tabnav li:last-child.active a {border-radius: 0 20px 20px 0;}

.border_radi {border:1px solid #424242; border-radius: 20px;}

.skill_title {border-bottom: 1px solid #424242; display: flex; position: relative;}
.skill_title span {display: inline-block; background-color: #000; border-radius: 20px 0 0 ; text-align: center;
				width: 20%; padding: 10px;}
.skill_title span img {max-width: 100%;}
h5 {font-size: 1.2em; font-weight: 600;}
.skill_title  h5 {padding: 20px;}

.btn_folding {transform: rotate(-90deg); position: absolute; right: 0; top: 14px; width: 40px;}
.possessed_skills ul {}
.possessed_skills ul li {border-bottom: 1px solid #424242; padding: 10px; display: flex;}
.possessed_skills ul li:last-child {border-bottom: 0;}
.possessed_skills ul li span {width: 30%;}
.possessed_skills ul li span  i.fa-star {color:#424242}
.possessed_skills ul li span.txt {width: 70%;}


.recommend_skill {margin-top: 40px;}
/*토글버튼*/
.toggle {padding-bottom: 10px;}
.toggleSwitch {width: 48px; height: 20px; display: block; position: relative; border-radius: 30px;  background-color: #fff;
  box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);  cursor: pointer;  border:1px solid #fff;  display: inline-block;
  margin-right:6px;}
.toggleSwitch .toggleButton { width: 17px; height: 17px;  position: absolute;  top: 50%;  left: 1px; right: auto; transform: translateY(-50%);
  border-radius: 50%;  background: #3E9F88;}
#toggle:checked ~ .toggleSwitch { background: #3E9F88;}
#toggle:checked ~ .toggleSwitch .toggleButton { width: 16px; height: 16px; left: calc(100% - 18px); background: #fff;}
.toggleSwitch, .toggleButton { transition: all 0.2s ease-in; }
.recomm_skill dl {float: left; width: 50%; text-align: center; border-bottom: 1px solid #424242;} 
.recomm_skill dl dt {border-bottom: 1px solid #424242; padding: 10px; text-align: center;}
.recomm_skill dl dd {padding: 10px; border-bottom: 1px solid #424242;}
.recomm_skill dl:nth-child(odd) {border-right: 1px solid #424242;}
.recomm_skill dl:last-child,
.recomm_skill dl:nth-child(9),
.recomm_skill dl dd:last-child,
.recomm_skill dl dd:nth-child(9)  {border-bottom: 0;}
.recomm_skill dl dd a {}
.recomm_skill dl dd img {max-width:60px}

.recomm_cnt {border: 1px solid #424242; border-radius: 20px; margin:40px 0;}
.recomm_cnt h3 {border-bottom: 1px solid #424242; font-size: 1.2em; font-weight: 600;}
.recomm_cnt img {max-width: 60px;}
.recomm_cnt span {padding: 20px; display: inline-block;}
.recomm_cnt .note { border-bottom: 1px solid #424242;}
.recomm_cnt .note p {padding: 10px;}
.recomm_cnt .note ul {display: flex;border-top: 1px solid #424242; }
.recomm_cnt .note ul li {width: 50%; text-align: center; padding: 10px;}
.recomm_cnt .note ul li:first-child {border-right: 1px solid #424242;}
.recomm_cnt .note ul li img {max-width: 25px; display: inline-block; margin-right: 4px;}
.recomm_cnt .img_tbl {display: flex;}
.recomm_cnt .img_tbl p {width: 50%; padding: 10px; text-align: center;}
.recomm_cnt .img_tbl img {max-width: 100px;}
.recomm_cnt .img_tbl .st_tbl {width: 50%;}
.recomm_cnt .img_tbl .st_tbl dl {border-bottom: 1px solid #424242; border-left: 1px solid #424242; display: flex;}
.recomm_cnt .img_tbl .st_tbl dl dt { width: 40%; }
.recomm_cnt .img_tbl .st_tbl dl dd {width: 20%;}

.recomm_cnt .img_tbl .st_tbl dl dt,
.recomm_cnt .img_tbl .st_tbl dl dd {padding: 18px 0; border-right: 1px solid #424242; text-align: center;}

.recomm_cnt .img_tbl .st_tbl dl:last-child,
.recomm_cnt .img_tbl .st_tbl dl dd:last-child {border-right: 0; border-bottom:0;}

.normal_setting  h5 {padding: 20px;}
.normal_setting  .tbl_set dl {float: left; width: 50%; border-top: 1px solid #424242; text-align: center;}
.normal_setting  .tbl_set dl dt {background-color: #192321; padding: 10px;}
.normal_setting  .tbl_set dl dd {}
.normal_setting  .tbl_set dl dd img {max-width: 60px;}
.normal_setting  .tbl_set dl dd p {padding: 4px;}
.normal_setting  .tbl_set dl:nth-child(odd) {border-right: 1px solid #424242;}
.normal_setting .buff {border-top: 1px solid #424242; padding: 10px;}


.comment {margin:10px 0 20px; background-color: #000; position: relative;}
.comment input {border: 0; background-color: #000; color: #fff; margin: 10px; padding:0;}
.comment .ab_btn {position: absolute; right: 6px; bottom: 6px; width: 30%; text-align: right;}
.form-group {padding: 10px;}
.comment .ab_btn .ico button {padding: 10px 10px 0;}
.comment .ab_btn .ico button img {max-width: 20px;}
.comment .ab_btn .btn_submit {border:1px solid #3E9F88; color;#3E9F88; border-radius: 10px; font-size: 0.8em;}

.comment_list  {}
.comment_list h5 {}
.comment_list ul {margin-top: 20px;}
.comment_list ul li {border-bottom: 1px solid #424242; padding-bottom: 20px; margin-bottom: 20px;}
.comment_list ul li .name {font-size: 1.2em; font-weight: 600;}
.comment_list ul li .txt {position: relative; margin-bottom: 10px;}
.comment_list ul li .txt .date {position: absolute; right: 0; bottom: 0 ;}
.comment_list ul li .commnet_btn {border-bottom: 1px solid #424242;padding-top:10px; padding-bottom: 10px; margin-bottom: 10px; }
.comment_list ul li .commnet_btn img {max-width: 24px;}
.comment_list ul li .comment_rereply {padding-left: 40px; position: relative;}
.comment_list ul li .comment_rereply::before {display: block; clear: both; content:''; width: 20px; height: 23px;
                                    background:url(../img/comm_reply.png) no-repeat; background-size: contain; position: absolute; left: 0 ;}
.comment_list ul li .comment_rereply .name {font-size: 1em;}
.comment_list ul li .comment_rereply .txt {position: relative;}
.comment_list ul li .comment_rereply .txt .date {position: absolute; right: 0; bottom: 0 ;}



.engraving {}
.engraving h5 {padding: 20px; border-bottom: 1px solid #424242;}
.eng_cnt {}
.eng_cnt .eng_img {padding: 10px;}
.eng_cnt .eng_img img {max-width: 80px;}
.eng_cnt .eng_img span {display: inline-block; padding-top: 24px;}
.eng_cnt .eng_img span img {max-width: 30px;}
.eng_cnt p {border-top: 1px solid #424242; padding: 10px;}


/*장비가이드*/
.guide_tab_nav {margin-bottom: 40px;}
.guide_tab_nav li {float: left; width: 50%;}
.guide_tab_nav li a {border: 2px solid #3E9F88; border-radius: 10px; padding: 10px; display: block;
                    margin:2px; text-align: center;}
.guide_tab_nav li a.active{font-weight: 600; color: #fff; background: #3E9F88;}


.guide_cnt {}
h6 {font-size: 1.2em; margin-bottom: 20px; font-weight: 600;}
h6 span {font-size: 0.8em; font-weight: 400;}
.max_tab {background: #141414; border-radius: 10px; padding: 10px; margin-bottom: 20px;}
.max_tab li {float: left; width: 16%; text-align: center;}
.max_tab li a {color: #9F9F9F; display: block;}
.max_tab li a.active {color: #fff; font-weight: 600;}
.max_tab li.max {position: absolute; top: 0; right: 0; font-size: 0.8em; border-radius: 10px; border: 2px solid #3E9F88; margin-bottom: 2px;}
.max_tab li.max a { color:#3E9F88;} 

.max_cnt {}
.max_cnt div {margin-bottom: 10px;}
.max_cnt div .img {padding: 10px; text-align: center; display: block; border-bottom: 1px solid #424242;}
.max_cnt div .img img {max-width: 30%;}
.max_cnt div dl {padding: 10px; }
.max_cnt div dl dt {font-size: 1.2em; font-weight: 600;}
.max_cnt div dl dd {}
.max_cnt div dl dd.max_chat {}
.max_cnt div dl dd.max_chat img {max-width: 40px;}


.pick_cnt {}
.pick_cnt div {margin-bottom: 10px;}
.pick_cnt div .img {float: left; width: 40%; border-right: 1px solid #424242; padding: 20px 10px;}
.pick_cnt div dl {float: left; width: 60%; padding: 10px;}
.pick_cnt div dl dt {font-size:1.2em ; font-weight: 600 ;}
.pick_cnt div dl dd {}
.pick_cnt div .banner {padding: 10px;  border-top: 1px solid #424242; float: none; display: inline-block;
                      text-align: center; width: 100%;}
.pick_cnt div .banner img {}


@media all and (min-width:600px) {
.btnCom_cnt {bottom: 0; top: 80px;}

.guide_tab_nav li {width: 33.3%;}
.max_tab li.max {padding: 6px; top: 4px; right:4px;}

.max_tab li {width: 12%;}
.max_tab li.max {width: 16%;}

.max_cnt div {display: flex;}
.max_cnt div .img {padding: 50px 20px; border-bottom: 0; border-right: 1px solid #424242; width: 80%;}
.max_cnt div .img img {max-width: 100%;}
.max_cnt div dl {padding: 0;}
.max_cnt div dl dt {border-bottom: 1px solid #424242;}
.max_cnt div dl dt,
.max_cnt div dl dd { padding: 10px;}

.pick_cnt div {float: left; width: 46%; margin: 10px;}


}



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

.guide_half {display: flex;}
.guide_half .db_btn {display: block; width: 10%;}
.guide_half .db_btn li {margin-bottom: 10px;}
.guide_half .db_cnt {margin-left:2%; width: 90%;}
.guide_half .db_cnt li {width: 23%; margin: 1%;}

.sponsor .sponsor_txt .sps_btn {max-width: 360px;}

.detail_filter li,
.detail_filter li.w60 {width: 20%;}



.search_filter .search .filter_tab {width: 20%;}
#search_form {width: 80%;}
#search_form input {width: 100%;}

.character_intro {display: flex;}
.intro_info, .character_img {width: 50%;}
.skill_title span {width: 10%;}
.skill_title h5 {padding: 22px 20px;}

.possessed_skills ul li span {width: 14%;}
.possessed_skills ul li span.txt {width: 86%;}

.recomm_skill dl {width: 20%; border-right: 1px solid #424242;border-bottom:0;}
.recomm_skill dl:nth-child(5),
.recomm_skill dl:nth-child(10) {border-right: 0;}

.recomm_cnt .note {display: flex;}
.recomm_cnt .note ul {border-top: 0; border-left: 1px solid #424242;}

.normal_setting .tbl_set dl {width: 33.3%; border-right:1px solid #424242;} 
.normal_setting .tbl_set dl:nth-child(3),
.normal_setting .tbl_set dl:nth-child(6),
.normal_setting .tbl_set dl:nth-child(9) {border-right: 0;}

.eng_cnt {display: flex;}
.eng_cnt .eng_img {width: 30%;}
.eng_cnt .eng_img img {width:40%;}
.eng_cnt .eng_img span img {max-width: 20px;}
.eng_cnt p {width: 70%;}
	
}



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

.cnt_width {padding: 120px 40px;}
.character {padding-top: 120px;}
.btnCom_cnt {top:120px}


.mainBg .banner {padding: 0 80px; display: flex;}
.mainBg .banner p {margin:0 2%}
.mainBg .banner p img {max-width: 100%;}
.mainBg .banner p.none {display: block;}
.crt {max-width: 100%; width: 328px;}
.crt .ct_name i {font-size: 1.2em;}
.crt .ct_name span {font-size: 1.5em;}

.vof_box {padding: 0 10%;}
.arrowBtn_box .arr_prev,.arrowBtn_box .arr_next {top: 45%;}
.arrowBtn_box .arrow_bg::after {height: 60px;}
.arrowBtn_box .arr_prev::after,
.arrowBtn_box .arr_next::after,
.arrowBtn_box .arr_prevactive::after,
.arrowBtn_box .arr_next.active::after  {background-size: 80%;}

.sps_apply {display: flex;}
.sponsor .sps_apply dl {margin-right: 10%;}


.detail_filter li,
.detail_filter li.w60 {width: 15%;} 

.tabnav {margin-bottom: 40px;}
.recomm_cnt {display: flex;}
.recomm_cnt .img_cnt {border-right: 1px solid #424242; }
.recomm_cnt .img_cnt,
.recomm_cnt .img_tbl {width: 50%;}

.recomm_cnt .note {border-bottom: 0;}
.recomm_cnt .note ul {display: block; border-top: 0; border-left:1px solid #424242; width: 40%;}
.recomm_cnt .note ul li {width: 100%; height: 50%; padding: 16px 0;}
.recomm_cnt .note ul li:first-child {border-bottom: 1px solid #424242; border-right: 0;}

.comment .ab_btn {width: 10%;}
.comment_list ul li .commnet_btn img {max-width: 18px; padding-top: 2px;}

.recomm_cnt .img_tbl img {max-width: 164px;}
.recomm_cnt .img_tbl .st_tbl dl dt, .recomm_cnt .img_tbl .st_tbl dl dd {padding: 34px 0;}

.guide_tab_nav  {margin-bottom: 60px;}
.guide_tab_nav li {width: 16.5%;}
.guide_tab_nav li a {margin: 4px; padding: 10px 0;}

.guide_tab_nav.pick_tab03 li {width: 33.3%;}



.max_tab {margin-bottom: 40px;}
.max_tab li.max {width: 12%; font-size: 1em;}

.max_cnt div .img {width: 30%;}
.max_cnt div .img img {max-width: 50%;}

.pick_cnt div {width: 22.9%;}
.pick_cnt div .img {padding: 26px 10px;}


}



@media all and (min-width:1200px) {
.topMenu {height: 120px;}
.hamburger {top: 40px;}
.hamburger.active {top: 40px;}
.menu_logo {padding-top: 30px;}

h2 {font-size: 2em;}
.h3_p {margin-bottom: 40px;}
h5 {font-size: 1.5em;}

.wiki_guide_mobile {display: none;}
.side-menu .menu_section {display: flex;}
.side-menu h3 {font-size: 1.7em; width: 20%;}
.side-menu ul  {width: 80%;}
.side-menu ul li {float: left; width: 33%; font-size: 1.2em;}

.wiki_guide {display: inline-block; position: absolute; right: 20px; top: 40px; border: 2px solid #3E9F88; color: #3E9F88; padding: 6px 10px; border-radius: 10px;}

.mb_img {display: none;}
.mainBg .pc_img {display: block; padding: 0 20px;}
.mainBg .banner {padding:0 20%;}

.h3_p h3 {font-size: 2em;}
.h3_p a {font-size: 1em; margin-top: 5px; margin-left:10px}

.sub_width {padding: 100px 40px;}

.search_filter .search .filter_tab {font-size: 1.5em; padding-top: 16px;}
#search_form input {padding: 32px 20px;}
.search_filter .search .filter_tab .btn_detail {top:12px;}
.detail_filter li, .detail_filter li.w60 {width: 11%;}
#search_form .searchString {top: 22px; right: 20px}

.detail_filter {margin: 20px 0; padding-bottom: 20px;}
.detail_filter:last-child {padding-bottom: 0; margin-bottom: 0;}


.crt .ct_name img,.crt .ct_name i {margin-right: 10px;}

.alliance {display: flex;}
.alliance .allianTxt {padding-top: 6%;}
.alliance .allianTxt h2 {padding-bottom: 20px;}
.alliance .allianTxt ul li {margin-bottom: 10px;}
.arrowBtn_box .arr_prev, .arrowBtn_box .arr_next {top: 36%;}

.sponsor {display: flex;}
.sponsor .sponsor_txt {padding-bottom: 0; margin-bottom: 0; padding-right: 20px; margin-right: 40px; width: 48%; border-bottom: 0; border-right: 1px solid #424242;}
.sps_apply {width: 52%; display: block;}
.sponsor .sps_apply dl dt {padding: 14px 16px;}
.sponsor .sps_apply dl dd {padding-bottom: 6px;}

.skill_title span {width: 6%;}
.possessed_skills ul li span {width: 10%;}
.possessed_skills ul li span.txt {width: 90%;}
.possessed_skills ul li span i.fa-star {font-size: 1.2em;}

.recomm_skill dl {width: 10%;}
.recomm_skill dl dd img {max-width: 40px;}


.normal_setting .tbl_set dl {width: 11.1%;}
.eng_cnt p {border-top: 0;}
.eng_cnt .eng_img {width: 20%;}

.review textarea {height: 80px;}
.ch_name h3 {font-size: 2em;}
.ch_name img {vertical-align: middle;}
.tabnav li a {font-size: 1.2em;}

.search_filter {border-radius: 20px; padding: 20px;}
.character_intro {padding-top: 80px; margin-top: 80px;}
.intro_info {padding: 20px;}
.table table {margin-bottom: 20px;}

.tabnav {margin-bottom: 50px;}

.recomm_skill dl:nth-child(5) {border-right: 1px solid #424242;}
.recomm_cnt h3 {padding: 10px;}
.recomm_cnt span {padding: 16px 10px 0;}

.recomm_cnt .note ul li {padding-top: 10%;}
.form-group {height: 100px;}
.comment .ab_btn {right: 14px; bottom: 14px;}

.table table tr th, .table table tr td {font-size: 1.2em;}
.normal_setting .tbl_set dl:nth-child(3), 
.normal_setting .tbl_set dl:nth-child(6) {border-right: 1px solid #424242;}
.normal_setting .tbl_set dl dt {font-size: 1.2em;}
.normal_setting .tbl_set dl dd {padding: 10px;}
.normal_setting .buff {padding: 20px;}

h6 {font-size: 1.5em;}
h6 span {font-size: 0.7em; margin-left :10px}
h6 span.ml_none {margin-left: 0;}
.guide_tab_nav li a {font-size: 1.2em; padding: 14px 0;}


.max_tab li {font-size: 1.2em; }
.max_tab li.max {font-size: 1.2em; width: 14%; margin: auto; padding: 6px; right: 8px;}
.max_cnt div {float: left; width: 46%; margin: 20px;}

.max_cnt div .img {width: 80%;}
.max_cnt div .img img {max-width: 100%;}

}



@media all and (min-width:1600px) {
.hamburger {height: 40px;}
.hamburger span {width: 60px;}
.hamburger.active span:nth-child(1) {margin-top: 16px;}
.side-menu {padding: 120px;}
.side-menu .menu_section {padding-bottom: 60px; margin-bottom: 60px;}
.side-menu h3,.side-menu ul li {font-size: 2em;}
.side-menu h3 {width: 24%; padding-top: 8px;}


.menu_logo img {max-width: 280px;}
.wiki_guide {padding: 12px 14px; font-size: 1.2em; top: 32px;} 
.h3_p h3 {font-size: 2.5em; padding-top: 8px;}
.h3_p a {margin-top: 18px;}

h2 {font-size: 2.5em;}
.search_filter .search .filter_tab {font-size: 1.8em;}

.character {padding-top: 160px;}
.btnCom_cnt {top: 160px;}

.btnCom_cnt a::after {width: 68px; height: 68px;}
.btnCom_cnt .arrow_prv::after, .btnCom_cnt .arrow_next::after,
.btnCom_cnt .arrow_prv.active::after, .btnCom_cnt .arrow_next.active::after {background-size: 24px; 
background-position-x: 19px; background-position-y: 15px;}

.cnt_width,.sub_width {max-width: 1720px; margin: 0 auto;}
.crt {width: 428px; margin-right: 2%;}
.alliance .allianTxt h2 {font-size: 3.5em;}

.guide_half .db_btn li {margin-bottom: 20px; font-size: 1.5em; border-radius: 20px; width: 100%;}
.guide_half .db_cnt li .img {padding: 60px 0; max-width: 330px; max-height: 330px;}
.guide_half .db_cnt li .txt span {font-size: 1em; padding-right:20px; margin-right: 10px;}
.guide_half .db_cnt li .txt {font-size: 1.7em;}

.alliance .allianTxt ul li,.sponsor .sponsor_txt p {font-size: 1.3em;}
.sponsor .sponsor_txt .sps_btn {padding: 20px; font-size: 1.3em; margin-top: 60px; }
.sponsor .sponsor_txt .sps_btn::before {width: 18px; right: 20px; top: 20px;}

.sponsor .sponsor_txt p {line-height: 1.7;}
.sponsor .sps_apply dl {position: relative; margin-bottom: 60px;}
.sponsor .sps_apply dl:after {display: block; content: ''; clear: both;}
.sponsor .sps_apply dl dt {float: left; margin-right: 6%; }


.skill_title span {width: 5%;}
.recomm_cnt .note {height: 200px;}
.recomm_cnt .note ul {width: 20%;}
.recomm_cnt .note ul li {padding-top: 36%;}

.recomm_cnt .img_tbl .st_tbl dl {height: 140px;}
.recomm_cnt .img_tbl .st_tbl dl dt, .recomm_cnt .img_tbl .st_tbl dl dd {padding-top: 16%;}

.max_cnt div {width: 47%;}
.max_tab li.max {font-size: 1em; width: 8%; top: 4px;}
.max_cnt div dl dt {font-size: 1.3em;}
.max_cnt div dl dt, .max_cnt div dl dd {padding: 20px;}
.max_cnt div dl dd.max_chat {padding: 0 20px;}

.max_cnt div .img {width: 80%; padding: 7% 0 0 ;}
.max_cnt div .img img {max-width: 60%;}
.max_cnt div dl dd.max_chat {padding: 0 20px 20px;}

.pick_cnt div .img,
.pick_cnt div dl {padding: 20px;}

}