@charset "utf-8";

#container_wrap,
#header_wrap,
#header,
#body_wrap,
#side_wrap,
#content_wrap,
#bottom_wrap,
#bottom,
#footer_wrap,
#footer {display:block;position:relative;}

#container_wrap:after,
#header_wrap:after,
#header:after,
#body_wrap:after,
#side_wrap:after,
#content_wrap:after,
#bottom_wrap:after,
#bottom:after,
#footer_wrap:after,
#footer:after {display:block;visibility:hidden;clear:both;content:""}


#container_wrap {background:#232626;}

#header_wrap {position: sticky;
    left: 0;
    right: 0;
    top: 0;
    padding: 10px;
    background: #292d2e;
    z-index: 99;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform: translateY(0);
    opacity: 1
    will-change: transform, opacity;
}
#header_wrap.sticky {transform: translateY(0);
    opacity: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}

#header {width:100%;max-width:1240px;margin:0 auto;text-align:center;}
#header #logo {display:block;position: relative;float:left;margin:0 40px 0 0;z-index: 3;}
#header #logo img {margin: 5px 0 0 0;height: 30px;}

#header #nav {float:left;}

#header ul.tnb {float:right;}
#header ul.tnb:after {display:block;visibility:hidden;clear:both;content:""}
#header ul.tnb li {display:block;float:left;margin:0 10px 0 0;}
#header ul.tnb li:last-child {margin:0;}
#header ul.tnb li a {display:block;}
#header ul.tnb li a i {font-size:24px;line-height:40px;}
#header ul.tnb li a.btn {position: relative;color: #b3bec1;font-size: 12px;font-weight: 600;font-family: 'a2', sans-serif;background: #3a4142;z-index: 1;}
#header ul.tnb li a .p {display:block;position:absolute;left:50%;top:40px;}

#header ul.tnb li.pc_none {display:none;}
#header ul.tnb li.mob_none {display:block;}


#nav {float:left;}


/* nav */
ul.nav {}
ul.nav:after {display:block;visibility:hidden;clear:both;content:""}
ul.nav li {display:block;float:left;position:relative;margin:0 36px 0 0;}
ul.nav li:last-child {margin:0;}
ul.nav li a {display:block;position:relative;font-size:13px;text-align:center;font-weight:600;line-height:40px;text-decoration:none !important;}
ul.nav li a:after {content:'';position:absolute;left:50%;bottom:0;width:1px;height:4px;background:#21ee88;opacity:0;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
ul.nav li a:hover,
ul.nav li a.active {color:#fff;}
ul.nav li a:hover:after,
ul.nav li a.active:after {left:0;width:100%;border-radius:4px;opacity:1;}
ul.nav li .arrow {display:none;position:absolute;right:0;top:50%;width:20px;height:30px;margin:-15px 0 0 0;text-align:center;line-height:30px;}
ul.nav li .arrow i {color:#999;font-size:12px;}

ul.nav li ul {display:none;position:absolute;left:50%;top:45px;width:160px;margin:0 0 0 -80px;border: solid 1px #3a4041;background:#323738;border-radius: 6px;z-index:9;}
ul.nav li ul:after {display:block;visibility:hidden;clear:both;content:""}
ul.nav li ul li {display:block;float:none;width:100%;margin:0;padding:0;border-bottom: solid 1px #3c4244;}
ul.nav li ul li:last-child {border-right:none;border-bottom: none;}
ul.nav li ul li a {display:block;padding:0 10px;font-size:12px;font-weight:600;line-height:40px;text-align:center;}
ul.nav li ul li a:hover {color:#46ed82;}
ul.nav li ul li a:after {display:none;}
ul.nav li ul li ul {display:block;position:absolute;left:160px;top:0;margin:0;padding:10px;}
ul.nav li ul li ul li a {display:block;height:30px;font-size:13px;line-height:30px;text-align:left;border:none;}

.panel_overlay {display:none;position:fixed;left:0;right:0;top:0;width:100%;height:100vh;background:rgba(34,34,34,0.6);z-index: 3;}
#panel {display:none;position:absolute;left:0;right:0;top:60px;z-index: 3;}

/* nav */
#panel nav {padding: 10px 5px;background: #232626;border-bottom: solid 1px #414646;border-top: solid 1px #414646;}
#panel nav ul:after {display:block;visibility:hidden;clear:both;content:""}
#panel nav ul li {display:block;float:left;width:49.5%;margin:0 1% 5px 0;}
#panel nav ul li:nth-child(3), #panel nav ul li:nth-child(7n) {margin: 0;}
#panel nav ul li a {display: block;font-size: 12px;font-weight: 600;line-height: 40px;color:#eee;border-radius: 6px;text-align: center;letter-spacing: -1px;background: #323738;border: solid 1px #414646;}
#panel nav ul li a:hover {background: #21ee89;color: #000;font-weight: 600;}
#panel nav ul li a.active {color:#fff;border: solid #21ee89;font-weight: 600;}

#panel nav ul li ul {display:block;position:relative;margin:4px 0 0 0;}
#panel nav ul li ul li {float:left;width:32.5%;margin:0 1.2% 4px 0;}

#panel nav ul li ul li a {font-size:11px;line-height:30px;font-weight: 400;color:#cbcbcb;}
#panel nav ul li ul li ul {margin:4px 0 0 0;}
#panel nav ul li ul li ul li {float:none;width:100%;margin:0 0 2px 0;}
#panel nav ul li ul li ul li:nth-child(2n) {margin:0 0 2px 0;}
#panel nav ul li ul li ul li:nth-child(3n) {margin:0 0 2px 0;}
#panel nav ul li ul li ul li a {font-size:12px;line-height:30px;background:#444;}

#panel nav ul li:first-child, #panel nav ul li:nth-child(4), #panel nav ul li:nth-child(5) {width: 100%;margin: 0 0 5px 0;}

#panel nav ul li ul li:nth-child(1), #panel nav ul li ul li:nth-child(2) {width: 32.5%;margin: 0 1.2% 0px 0;}
#panel nav ul li ul li:nth-child(3), #panel nav ul li ul li:nth-child(6) {margin: 0;}
#panel nav ul li:nth-child(4), #panel nav ul li:nth-child(5) {width: 100%;}
#panel nav ul li:nth-child(4) ul li:nth-child(1), #panel nav ul li:nth-child(4) ul li:nth-child(2) {margin: 0 1.2% 5px 0;}
#panel nav ul li:nth-child(4) ul li:nth-child(3) {margin: 0 0 5px 0;}
#panel nav ul li ul li:nth-child(4), #panel nav ul li ul li:nth-child(5) {width: 33.25%;margin: 0 0.5% 0 0;}
#panel nav ul li:nth-child(5) ul li:nth-child(1), #panel nav ul li:nth-child(4) ul li:nth-child(2) {margin: 0 1.2% 5px 0;}
#panel nav ul li:nth-child(5) ul li:nth-child(3) {margin: 0 0 5px 0;}
#panel nav ul li:nth-child(7n) {margin: 0;}
#panel nav ul li:nth-child(4) ul li:nth-child(1), #panel nav ul li:nth-child(4) ul li:nth-child(2), #panel nav ul li:nth-child(5) ul li:nth-child(1), #panel nav ul li:nth-child(5) ul li:nth-child(2) {margin: 0 0.5% 5px 0;width: 33.25%;
}

#panel_user {display:none;position:absolute;right:calc(50% - 620px);top:60px;width:480px;z-index:9;}
#panel_user .panel_user_nav {background: #292d2e;padding: 5px 5px;}
.panel_user_header {margin:0 0 5px 0;padding:10px 15px;font-weight: 600;font-size: 12px;line-height:40px;background: #323738;border: solid 1px #414646;border-radius:4px;transition: 0.5s;}
.panel_user_header .lv_icon img {width: 28px;}
.panel_user_header:hover, .panel_user_lv:hover, #panel_user ul li a:hover  {border: solid 1px #21ee89;transition: 0.5s;color: #21ee89;}
.panel_user_header:after {display:block;visibility:hidden;clear:both;content:""}
.panel_user_btn {float:right;}
.panel_user_btn:after {display:block;visibility:hidden;clear:both;content:""}
.panel_user_btn a.btn {color: #bbb;background: #3c4345;border: solid 1px #434d4d;font-size: 11px;font-weight: 600;}

.panel_user_lv {margin:0 0 5px 0;background: #323738;border: solid 1px #414646;border-radius:4px;transition: 0.5s;}
.panel_user_lv:after {display:block;visibility:hidden;clear:both;content:""}
.panel_user_lv a {display:block;position:relative;padding:10px 15px;font-weight: 600;font-size: 12px;line-height: 30px;}
.panel_user_lv a:hover {color: #21ee89;}
.panel_user_lv strong {display:block;position:absolute;right:15px;top:10px;color: #46ed82;font-size: 11px;font-weight: 600;}

#panel_user ul {}
#panel_user ul:after {display:block;visibility:hidden;clear:both;content:""}
#panel_user ul li {display:block;float:left;width:49.5%;margin:0 1% 4px 0;}
#panel_user ul li:nth-child(2n) {margin:0 0 4px 0;}
#panel_user ul li a {display:block;position:relative;padding:10px 15px;font-weight: 600;font-size: 12px;line-height: 30px;background: #323738;border: solid 1px #414646;border-radius:4px;}
#panel_user ul li a strong {display:block;position: absolute;right:15px;top:10px;color: #46ed82;font-size: 11px;font-weight: 600;}


#header button.btn_panel {display:none;position: absolute;float:left;width:40px;height:40px;color:#ccc;font-size:16px;text-align:center;line-height:40px;background:#3a4142;border:solid 1px #3a4142;border-radius:4px;transition: 0.5s;z-index: 3;}
#header button.btn_panel i {}
#header button.btn_panel.active {transition: 0.5s;border: solid 1px #00ef8a;color: #00ef8a;}


#bottom_wrap {padding:20px 10px;background:#1f2121;border-top:solid 1px #313535;}
#bottom {width:100%;max-width:1240px;margin:0 auto;}
#bottom #logo {display:block;float:left;width:30%;font-size:24px;}
#bottom p {display: block;width: 100%;text-align: center;font-weight: 400;line-height: 120%;font-size: 11px;font-family: 'a2', sans-serif;background: linear-gradient(to right top, #a6a6a6, #6d8b77);color: transparent;-webkit-background-clip: text;}

#footer_wrap {padding:40px 10px;background:#1d1f1f;border-top:solid 1px #313535;}
#footer {width:100%;max-width:1240px;margin:0 auto;}

#footer_info {float:left;}

#footer #logo {display:block;margin:0 0 15px 0;}
#footer #logo img {width:auto;height:30px;}

#footer ul.info {}
#footer ul.info:after {display:block;visibility:hidden;clear:both;content:""}
#footer ul.info li {display:block;float:left;margin:0 0 4px 0;font-size:12px;line-height:160%;color:#999;}
#footer ul.info li:last-child {margin:0;}
#footer ul.info li strong {font-weight:400;}
#footer ul.info li.var {position:relative;margin:0 12px 0 0;padding:0 12px 0 0;}
#footer ul.info li.var:after {content:'';display:block;position:absolute;right:0;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#313535;}
#footer ul.info li.infotxt {margin:0 0 10px 0;}
#footer ul.info li.copy {}

#footer ul.sitemap {float:right;}
#footer ul.sitemap:after {display:block;visibility:hidden;clear:both;content:""}
#footer ul.sitemap li {display:block;float:left;margin:0 40px 0 0;}
#footer ul.sitemap li:last-child {margin:0;}
#footer ul.sitemap li a {display:block;margin:0 0 8px 0;color:#999;font-size:12px;line-height:140%;}
#footer ul.sitemap li a:first-child {color: #eee;font-weight: 600;}
#footer ul.sitemap li a:last-child {margin:0;}

#nav_mob {display:none;position:fixed;left:0;right:0;bottom:0;background: #292d2e;border-top: solid 1px #414646;}
#nav_mob:after {display:block;visibility:hidden;clear:both;content:""}
#nav_mob a {display:block;position:relative;float:left;width:25%;padding:10px 0;color:#aaa;text-align:center;}
#nav_mob a:after {content:'';position:absolute;left:50%;bottom:0px;width:2px;height:1px;background:#21ee89;opacity:0;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#nav_mob a.active,
#nav_mob a:hover {color:#21ee89}
#nav_mob a:hover:after {left:0;width:100%;border-radius:4px;opacity:1;}
#nav_mob a i {margin:0 0 4px 0;font-size:16px;}
#nav_mob a p {font-size:10px;font-weight: 600;}


#body_wrap {width:100%;max-width:1240px;margin:0 auto;padding:10px 0;}

#side_wrap {float:left;width:30%;margin:0 10px 0 0;}

#content_wrap {float:left;width:calc(70% - 10px);}

.sec {display: block;position: relative;margin: 0 0 10px 0;border-radius: 6px;padding:15px;background: #292d2e;}
.sec_2x.margin h2 {display: block;position: relative;font-weight: 600;font-size: 14px;font-family: 'a2', sans-serif;}
.sec_2x.margin span {display: block;margin: 10px 0;font-size: 12px;font-weight: 600;background: linear-gradient(to right top, #46ed82, #ffffff);color: transparent;-webkit-background-clip: text;}
.sec.sec_2x.margin p {text-align: justify;padding:0;font-size: 12px;line-height: 180%;font-weight: 600;color: #cbcbcb;}

.sec.sec_2x h2 {display: block;position: relative;font-weight: 600;font-size: 13px;font-family: 'a2', sans-serif;background: linear-gradient(to right top, #2aaec7, #ffffff);;color: transparent;-webkit-background-clip: text;}
.sec.sec_2x p {text-align: justify;padding: 10px 0;font-size: 12px;line-height: 180%;font-weight: 600;color: #cbcbcb;}
.sec.sec_2x ul li h3 {font-size: 13px;font-weight: 600;font-family: 'a2', sans-serif;background: linear-gradient(to right top, #2ac558, #e9ffe2);color: transparent;-webkit-background-clip: text;}
.sec.sec_2x ul li p {background: #323738;padding: 8px 10px;border-radius: 6px;margin: 10px 0;}

.sec.sec_3x h2 {display: block;position: relative;font-weight: 600;font-size: 13px;}
.sec.sec_3x p {text-align: justify;padding: 10px 0;font-size: 12px;line-height: 180%;font-weight: 600;color: #cbcbcb;}
.sec.sec_3x ul li span {font-size: 12px;font-weight: 600;color: #46ed82;}

.sec.sec_4x h2 {display: block;
    position: relative;
    font-weight: 600;
    font-size: 13px;font-family: 'a2', sans-serif;
    background: linear-gradient(to right top, #2aaec7, #ffffff);
    color: transparent;
    -webkit-background-clip: text;}
.sec.sec_4x p {text-align: justify;padding: 10px 0;font-size: 12px;line-height: 180%;font-weight: 600;color: #cbcbcb;}
.sec.sec_4x ul li span {    font-size: 13px;
    font-weight: 600;
    font-family: 'a2', sans-serif;
    background: linear-gradient(to right top, #2ac558, #e9ffe2);
    color: transparent;
    -webkit-background-clip: text;}
.sec.sec_4x ul li {float: left;text-align: center;width: 49.5%;background: #232626;padding: 10px 10px 5px 10px;margin: 0 1% 10px 0;}
.sec.sec_4x ul li:nth-child(2n) {margin: 0 0 10px 0;}
.sec.sec_4x ul li p {text-align: center;}
.sec.sec_4x ul:after {display: block;visibility: hidden;clear: both;content: "";}
#side_wrap .sec b {font-size: 13px;display: inline-block;position: relative;font-family: 'a2', sans-serif;font-weight: 600;margin: 0 0 10px 0;border-bottom: double 4px #46ed82;}
.sec_rank ul li {background: #323738;padding: 10px;float: left;border-radius: 6px;width: 49.5%;margin: 0 1% 10px 0;}
.sec_rank ul li:nth-child(2n) {margin: 0 0 10px 0;}
.sec_rank ul:after {display: block;visibility: hidden;clear: both;content: "";}
.sec_rank h2 {display: block;position: relative;font-weight: 600;font-size: 14px;font-family: 'a2', sans-serif;background: linear-gradient(to right top, #2aaec7, #ffffff);color: transparent;-webkit-background-clip: text;}
.sec_rank p {text-align: justify;padding: 10px 0;font-size: 12px;line-height: 180%;font-weight: 600;color: #cbcbcb;}
.sec_rank ul li h3 {margin: 0 0 5px 0px;font-size: 13px;font-weight: 600;font-family: 'a2', sans-serif;background: linear-gradient(to right top, #2ac558, #e9ffe2);color: transparent;-webkit-background-clip: text;}
.sec_rank ul li span {float: left;display: inline-block;margin: 0 10px 0 0px;    padding: 20px 30px;font-size: 28px;font-weight: 600;color: #8cffdb;background: linear-gradient(130deg, rgb(51 53 54) 0%, rgb(2 14 3) 100%);border-radius: 10%;-webkit-box-shadow: 0 -4px 12px rgb(43 86 86);}
.sec_rank ul li p {line-height: 150%;text-align: justify;padding: 0;font-size: 12px;font-weight: 600;color: #ddd;}
.banner_slide {margin:0 0 20px 0;border-radius:10px;overflow:hidden;background: #292d2e;transition: all 0.5s;}
.banner_slide .swiper-slide img {width:100%;height:auto;}
.banner_slide:hover {transform: scale(1.02);box-shadow: 0 0 20px rgba(0,255,255,0.5);}
.banner_slide::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(0deg, transparent, transparent 30%, rgba(0, 255, 255, 0.3));transform: rotate(-45deg);transition: all 0.5s;opacity: 0;}
.banner_slide:hover::before {opacity: 1;transform: rotate(-45deg) translateY(100%);}
@keyframes animated-gradient{
  to{
    background-position: 200%;
  }
}
.banner {margin:0 0 10px 0;}
.banner:after {display:block;visibility:hidden;clear:both;content:""}
.banner ul {}
.banner ul:after {display:block;visibility:hidden;clear:both;content:""}
.banner ul li {display:block;float:left;width:calc(33.33% - 6.66px);margin:0 10px 10px 0;}
.banner ul li:nth-child(3n) {margin:0 0 10px 0;}
.banner ul li img {width:100%;height:auto;border-radius:10px;box-shadow:2px 2px 6px rgba(0,0,0,0.2);}

.banner_top {margin:0 0 20px 0;border-radius:10px;overflow:hidden;box-shadow:2px 2px 6px rgba(0,0,0,0.1);}
.banner_top ul li {display:block;margin:0 0 5px 0;}
.banner_top ul li:last-child {margin:0;}
.banner_top img {width:100%;height:auto;}

h1#container_title {display:block;position:relative;margin:0 0 10px 0;padding:10px 20px;font-size:13px;font-family: 'a2', sans-serif;font-weight:600;line-height:30px;background:#292d2e;border-radius:6px;}

.ttip {display:inline-block;position:relative;}
.ttip span {display: block;position: absolute;left: 50%;bottom: -28px;max-width: 200px;padding: 3px 5px;color: #21ee89;font-family: 'DOSIyagiMedium';font-weight: 400;text-align: center;line-height: normal;background: rgb(33 37 38);border: solid 1px #00ef8a;border-radius: 3px;z-index:9;
-webkit-transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
transform:translate(-50%,0);
}
.ttip span:after {content:'';display:block;position:absolute;top:-5px;left:50%;width:0;height:0;margin-left:-5px;border: 5px dashed rgb(33 238 137);;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}

#snb_wrap {height:0;overflow:hidden;}
#snb {padding:5px 20px;background:#323738;}
#snb .swiper-slide {width:auto}
#snb {white-space:nowrap;overflow:hidden}
#snb ul:after {display:block;visibility:hidden;clear:both;content:""}
#snb li {display:inline-block;}
#snb a {display:block;position:relative;color:#eee;font-weight:600;font-size: 12px;line-height:30px;letter-spacing:-0.3px;}
#snb a.active {color: #21ee89;}
#snb a.active:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:#21ee89;}

#ssnb {padding:5px 20px;background:#3a4042;}
#ssnb .swiper-slide {width:auto}
#ssnb {white-space:nowrap;overflow:hidden}
#ssnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#ssnb li {display:inline-block;}
#ssnb a {display:block;position:relative;line-height:30px;font-size: 12px;font-weight: 600;letter-spacing:-0.5px;}
#ssnb a.active {color:#21ee89;}
#ssnb a.active:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:#21ee89;}


ul.tab_mbrank {position:absolute;right:20px;top:10px;}
ul.tab_mbrank:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_mbrank li {display:block;float:left;position:relative;text-align:center;font-weight:400;cursor:pointer;}
ul.tab_mbrank li:first-child {margin:0 8px 0 0;padding:0 8px 0 0;}
ul.tab_mbrank li:first-child:after {display:block;content:'';position:absolute;right:0px;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#313535}
ul.tab_mbrank li a {text-align:center;line-height:30px;cursor:pointer;font-size: 11px;font-weight: 600;color:#bbb;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
ul.tab_mbrank li a.active {color:#46ed82;}

dl.point_mbrank {}
dl.point_mbrank dd {display:block;position:relative;margin:0 0 2px 0;padding:5px 10px;font-weight: 600;font-size: 13px;color: #cbcbcb;background:#323738;line-height:30px;border-radius:4px;}
dl.point_mbrank dd:after {display:block;visibility:hidden;clear:both;content:""}
dl.point_mbrank dd:last-child {margin:0;}
dl.point_mbrank dd .num {display:inline-block;width:20px;margin:0 2px 0 0;color:#fff;font-size:12px;font-weight:400;text-align:center;line-height:20px;background:#999;border-radius:50%;vertical-align:middle;}
dl.point_mbrank dd .num.bg_rank1 {background:#f00001}
dl.point_mbrank dd .num.bg_rank2 {background:#336ebe}
dl.point_mbrank dd .num.bg_rank3 {background:#06a41e}
dl.point_mbrank dd .point {display:block;float:right;color:#21ee89;font-size: 14px;font-family: 'DOSIyagiMedium';font-weight: 400;}
dl.point_mbrank dd .level {display:block;float:right;color:#21ee89;font-weight:400;}
dl.point_mbrank dd .lv_icon img {width:24px;height:auto;border-radius:50%;}
dl.point_mbrank dd .profile_icon img {width:18px;height:auto;border-radius:50%;}


ul.tab_ppl {position:absolute;right:20px;top:10px;}
ul.tab_ppl:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_ppl li {display:block;float:left;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#222;text-align:center;font-weight:400;line-height:30px;cursor:pointer;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
ul.tab_ppl li:after {display:block;content:'';position:absolute;right:0px;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#444}
ul.tab_ppl li:last-child {margin:0;padding:0;}
ul.tab_ppl li:last-child:after {display:none;}
ul.tab_ppl li.active {color:#21ee89;}


#tab_ppl {}
#tab_ppl .tab_cont {}
#tab_ppl .tab_cont ul {}
#tab_ppl .tab_cont ul:after {display:block;visibility:hidden;clear:both;content:""}
#tab_ppl .tab_cont ul li {display:block;position:relative;border-bottom:solid 1px #eee;}
#tab_ppl .tab_cont ul li a {display:block;position:relative;min-height:40px;padding:10px 50px 10px 50px;;}
#tab_ppl .tab_cont ul li a .profile_img {display:block;position:absolute;left:0px;top:10px;width:40px;}
#tab_ppl .tab_cont ul li a .profile_img img {width:100%;height:auto;border-radius:50%;}
#tab_ppl .tab_cont ul li a .profile_icon {display:inline-block;width:18px;}
#tab_ppl .tab_cont ul li a .profile_icon img {width:100%;height:auto;border-radius:50%;}
#tab_ppl .tab_cont ul li a strong {display:block;font-weight:400;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}

#tab_ppl .tab_cont ul li .comment {display:block;position:absolute;right:5px;top:50%;padding:6px 8px;color:#999;font-size:12px;text-align:center;line-height:16px;background:#f6f6f6;border-radius:5px;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
transform:translate(0,-50%);
}
#tab_ppl .tab_cont ul li .comment strong {display:block;color:#21ee89;font-size:12px;font-weight:500;}


ul.tab_recent {position:absolute;right:20px;top:10px;}
ul.tab_recent:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_recent li {display:block;float:left;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#222;text-align:center;font-weight:400;line-height:30px;cursor:pointer;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
ul.tab_recent li:after {display:block;content:'';position:absolute;right:0px;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#444}
ul.tab_recent li:last-child {margin:0;padding:0;}
ul.tab_recent li:last-child:after {display:none;}
ul.tab_recent li.active {color:#21ee89;}


ul.tab_warr {position:absolute;right:20px;top:10px;}
ul.tab_warr:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_warr li {display:block;float:left;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#222;text-align:center;font-weight:400;line-height:30px;cursor:pointer;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
ul.tab_warr li:after {display:block;content:'';position:absolute;right:0px;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#444}
ul.tab_warr li:last-child {margin:0;padding:0;}
ul.tab_warr li:last-child:after {display:none;}
ul.tab_warr li.active {color:#21ee89;}


ul.tab_cate {position:absolute;right:20px;top:10px;}
ul.tab_cate:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab_cate li {display:block;float:left;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#222;text-align:center;font-weight:400;line-height:30px;cursor:pointer;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
ul.tab_cate li:after {display:block;content:'';position:absolute;right:0px;top:50%;width:1px;height:12px;margin:-6px 0 0 0;background:#444}
ul.tab_cate li:last-child {margin:0;padding:0;}
ul.tab_cate li:last-child:after {display:none;}
ul.tab_cate li.active {color:#21ee89;}
.sec.sec_2x ul li h3 span {
  position: relative;
  top: 1px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-family: 'DOSIyagiMedium';
  font-size: 13px;
  color: #a2dcb2;
  text-shadow: 0 1px 0 #437752,
               0 2px 0 #437752,
               0 3px 0 #437752,
               0 4px 0 #437752,
               0 5px 0 #46ed82,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}

.sec.sec_2x ul li h3 span:nth-child(2) { animation-delay: .1s; }
.sec.sec_2x ul li h3 span:nth-child(3) { animation-delay: .2s; }
.sec.sec_2x ul li h3 span:nth-child(4) { animation-delay: .3s; }
.sec.sec_2x ul li h3 span:nth-child(5) { animation-delay: .4s; }
.sec.sec_2x ul li h3 span:nth-child(6) { animation-delay: .5s; }
.sec.sec_2x ul li h3 span:nth-child(7) { animation-delay: .6s; }
.sec.sec_2x ul li h3 span:nth-child(8) { animation-delay: .7s; }


@media screen and (max-width:1240px) {
ul.nav li {margin:0 24px 0 0;}

#panel_user {right:0;}

#footer ul.sitemap {display:none;}
}




@media screen and (max-width:980px) {
#header #logo {display:inline-block;float:none;margin:0;}

#header ul.tnb li.pc_none {display:block;}
#header ul.tnb li.mob_none {}

#nav {display:none;}
#panel_user .panel_user_nav {padding:10px 5px;background: #232626;border-bottom: solid 1px #414646;border-top: solid 1px #414646;}
#header button.btn_panel {display:block;}

#panel_user {width:100%;height: 100vh;background: rgb(0 0 0 / 60%);}

#bottom #logo {float:none;margin:0 0 18px 0;width:auto;font-size:18px;}
#bottom p {float:none;width:auto;}

#footer_wrap {padding:40px 10px 100px 10px;}

#footer ul.info li.var {
 margin:0 18px 0 0;padding:0;}
#footer ul.info li.var:after {display:none;}

#nav_mob {display:block;}

#body_wrap {padding:5px 0;}

#side_wrap {display:none;}

#content_wrap {float:none;width:auto;margin:0 5px;}
.sec {padding:10px;}

.banner_slide {margin:0 10px 20px 10px;}
.sec_rank ul li {width:100%;margin: 0 0 10px 0;}
.sec.sec_4x ul li {width:100%;margin: 0 0 10px 0;}
.banner {margin:0 10px 10px 10px;}

h1#container_title {padding:10px 10px;border-radius:0;}

#snb_wrap {height:auto;}
}




@media screen and (max-width:768px) {
.banner ul li {width:calc(50% - 5px);margin:0 10px 10px 0;}
.banner ul li:nth-child(3n) {margin:0 10px 10px 0;}
.banner ul li:nth-child(2n) {margin:0 0 10px 0;}
}




@media screen and (max-width:480px) {
}