@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

html,
body {
    width: 100%;
    height: 100% !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    font-family: 'Roboto', sans-serif;
    background: #fff;
    scroll-behavior: smooth;
}

/* Reset */

html,
body {
    width: 100%;
    /*background-color: black;*/
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
address,
ul,
ol,
li,
dl,
dt,
dd,
caption,
form,
fieldset,
legend,
input {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

caption,
th {
    text-align: left;
}

img,
fieldset,
abbr,
acronym {
    border: 0;
}

img {
    -ms-interpolation-mode: bicubic;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

/* Base */

body {
    background-color: #fff;
    font-size: 12px;
    color: #121212;
}

a {
    color: #121212;
    text-decoration: none;
    outline: 0;
}

img {
    vertical-align: middle;
    outline: 0;
}

textarea,
input,
select {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    vertical-align: middle;
    outline: 0;
}

button {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    vertical-align: top;
    cursor: pointer;
}

button:active,
button:focus {
    outline: none;
}

caption,
legend,
hr {
    display: none;
}

input.txt {
    padding: 3px 5px 0;
    border: 1px solid #b7b7b7;
    font-size: 11px;
}

input.cbox {
    width: 13px;
    height: 13px;
    vertical-align: top;
}

label {
    cursor: pointer;
}

div.clear {
    clear: both;
}

iframe {
    border: none;
    width: 100%;
}

article,
aside,
canvas,
details,
embed,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
summary,
datalist,
keygen,
mark,
meter,
progress,
rp,
rt,
ruby,
time,
wbr {
    display: block;
}

.fix:after {
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.blind {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

*,
*:before,
*:after {
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: none;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.slick-track,
.slick-slide {
    outline: 0 !important;
}

/* transition */

.transition_default {
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
}

.transition_fast {
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
}

.transition_vfast {
    transition: all 0.15s ease 0s;
    -moz-transition: all 0.15s ease 0s;
    -webkit-transition: all 0.15s ease 0s;
    -o-transition: all 0.15s ease 0s;
    -ms-transition: all 0.15s ease 0s;
}

.transition_none {
    transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    -ms-transition: all 0s ease 0s;
}

.transition_slow {
    transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -webkit-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    -ms-transition: all 0.7s ease 0s;
}

.transition_very_slow {
    transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
}

.transition_delay_default {
    transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
}

.warp {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bg_layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    z-index: 9998;
}


.hiddenY {
    overflow-y: hidden !important;
}

.header {
    clear: both;
    height: 45px;
    background: #121212;
    z-index: 100;
}

.footer {
    position: relative;
    width: 100%;
    clear: both;
    background: #121212;
    overflow: hidden;
    z-index: 100;

}

.footer a {
    display: inline-block;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
}

.footer a:first-child {
    padding-left: 0;
}

.footer a.f_contact {
    padding: 0 40px 0 20px;
    background: #323232 url(https://3on3.fsgames.com/images/en/ico_footer.png) no-repeat right center;
}

.footer a.f_contact:hover {
    color: #121212;
    background: #faba01 url(https://3on3.fsgames.com/images/en/ico_footer_on.png) no-repeat right center;
}

.footer span {
    color: #828282;
}

.footer .f_box {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    border-top: 4px solid #faba01;
    border-bottom: 1px solid #323232;
}

.main_visual {
    position: relative;
    height: 315px;
    background: #000;
    overflow: hidden;
}

.main_visual .item {
    width: 100%;
    height: 315px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.main_visual .item1 {
    background-image: url(https://3on3.fsgames.com/images/en/bg_main_1.jpg);
}

.main_visual .m_tit {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    text-align: center;
}

.movie_layer {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 110px;
    z-index: 9999;
    overfow: hidden;
}

#bp {
    top: 100%;
}

.movie_layer .item {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 70px;
}

.movie_layer .item div {
    position: relative;
}

.movie_layer .item img {
    display: block;
    width: 100%;
}

.movie_layer .item iframe {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.movie_layer .item .i_close {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
}

.movie_layer .item .i_close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    background-size: cover;
}

.movie_layer .item .i_close:hover span {
    width: 100%;
}


#btn_info {
    position: relative;
    display: inline-block;
    line-height: 50px;
    padding: 0 20px;
    z-index: 2;
    background: #ffa507;
    font-size: 20px;
    color: #fff;
}

#btn_info em {
    position: relative;
    z-index: 1;
}

#btn_info span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    z-index: 0;
    background: #323232;
}

.main_news {
    background: #fff;
}

.main_news .m_slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main_news .m_slider .slidk-list .slick-track div a {
    display: block;
    max-width: 1240px;
    margin: 0 auto;
}

.main_news .m_slider .slidk-list .slick-track div {
    float: left;
    width: 100%;
    margin: 0 auto;
    max-width: 1240px;
    margin: 0 auto;
}

.main_news .m_slider .slick-arrow {
    display: none !important;
}

.main_news a {
    display: block;
    padding: 25px 15px 30px;
    background: url(https://3on3.fsgames.com/images/en/bg_news.png) no-repeat right center;
}

.main_news a:hover {
    background-image: url(https://3on3.fsgames.com/images/en/bg_news_on.png);
}

.main_news em {
    display: inline-block;
    height: 30px;
    line-height: 23px;
    padding: 0 10px 0 8px;
    background: url(https://3on3.fsgames.com/images/en/bg_event.png) no-repeat 0 0;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
}

.main_news strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 90%;
    white-space: nowrap;
}

.main_news span {
    font-size: 14px;
    color: #828282;
    font-family: Verdana;
}

.main_character {
    background: url(https://3on3.fsgames.com/images/en/bg_main_char.jpg) no-repeat center center;
    background-size: cover;
}

.main_character h3 {
    font-size: 0;
    line-height: 0;
}

.main_character .m_more {
    display: inline-block;
    position: relative;
    max-width: 30px;
}

.main_character .m_more span {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/ico_main_more_on.png) 0 0 no-repeat;
    background-size: cover;
}

.main_character h4 a:hover .m_more span {
    width: 100%;
}

.main_media {
    background: url(https://3on3.fsgames.com/images/en/bg_main_media.jpg) no-repeat center center;
    background-size: cover;
}

.main_media .m_more {
    display: inline-block;
    position: relative;
    max-width: 30px;
}

.main_media .m_more span {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/ico_main_more_on.png) 0 0 no-repeat;
    background-size: cover;
}

.main_media h4 a:hover .m_more span {
    width: 100%;
}

.contents {
    min-height: 400px;
    position: relative;
    z-index: 1;
}

.media_list {
    padding-bottom: 100px;
}

.media_list .item_title {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 15px;
}

.news_list .item_title h3 img {
    height: 25px;
}

.news_list {
    padding-bottom: 100px;
}

.news_list .item_title {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 15px;
}

.news_list .item_title h3 img {
    height: 25px;
}

.news_list .item_title .n_tab {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
    text-align: right;
}

.news_list .item_title .n_tab.mobile_on {
    background: #828282;
}

.news_list .item_title .n_tab.mobile_on a,
.news_list .item_title .n_tab.mobile_on a.on {
    display: block;
    margin-left: 0;
}

.news_list .item_title .n_tab a {
    position: relative;
    display: inline-block;
    margin-left: 2px;
    height: 24px;
    overflow: hidden;
    background: #828282;
    text-align: left;
}

.news_list .item_title .n_tab a {
    display: none;
}

.news_list .item_title .n_tab a.on {
    display: inline-block;
    width: 107px;
    padding-right: 24px;
    background: #ffa507;
}

.news_list .item_title .n_tab a.n_tab1 img {
    width: 104px;
}

.news_list .item_title .n_tab a.n_tab2 img {
    width: 93.5px;
}

.news_list .item_title .n_tab a.n_tab3 img {
    width: 49px;
}

.news_list .item_title .n_tab a.n_tab4 img {
    width: 70px;
}

.news_list .item_title .n_tab a.n_tab5 img {
    width: 71px;
}

.news_list .item_title .n_tab a img {
    width: 100%;
    height: 100%;
}

.news_list .item_title .n_tab a.on em {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(https://3on3.fsgames.com/images/en/bg_tab_mob.png) 0 0 no-repeat;
    background-size: auto 52px;
}

.news_list section {
    position: relative;
    margin-bottom: 20px;
    padding-top: 15px;
}

.news_list .item {
    position: relative;
}

.news_list .item:first-child a {
    border-top: 4px solid #121212;
}

.news_list .item a.i_title {
    position: relative;
    display: block;
    max-width: 1240px;
    margin: 0 auto;
    padding: 17px 15px 20px;
    border-bottom: 1px solid #b2b2b2;
    letter-spacing: -0.03em;
}

.news_list .item a.i_title strong {
    display: block;
    padding-right: 30px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2em;
}

.news_list .item a.i_title span {
    font-size: 10px;
    color: #828282;
    font-family: Verdana;
}

.news_list .item a.i_title em {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -12px;
    width: 23px;
    height: 23px;
    background: url(https://3on3.fsgames.com/images/en/ico_more2.png) no-repeat 0 0;
    background-size: 23px auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.news_list .item .i_box {
    display: none;
    max-width: 1240px;
    margin: 0 auto;
    color: #b2b2b2;
}

.news_list .item .i_sns {
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.news_list .item .i_sns a {
    float: left;
    float: left;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #323232;
    text-align: center;
    border-top: 0;
}

.news_list .item .i_sns a img {
    height: 13px;
}

.news_list .item .i_sns a:first-child {
    border-right: 0;
}

.news_list .item .i_contents {
    padding: 15px 15px 60px;
    color: #b2b2b2;
    font-size: 14px;
    font-family: Verdana;
}

.news_list .item .i_contents img {
    max-width: 100%;
    height: auto !important;
}

.news_list .item.on {
    border-top: 4px solid #faba01;
    background: #121212;
}

.news_list .item.on .i_box {
    display: block;
}

.news_list .item.on .i_title {
    color: #fff;
    border-bottom-color: #323232;
}

.news_list .item.on .i_title em {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-image: url(https://3on3.fsgames.com/images/en/ico_more.png);
}

.news_list .item_more {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
}

.news_list .item_more button {
    display: block;
    width: 100%;
    height: 25px;
    background: #b2b2b2;
    color: #fff;
    font-size: 14px;
}

.news_list .item_more button img {
    height: 6px;
    vertical-align: middle;
}

.character_list {
    padding-top: 30px;
    max-width: 1240px;
    margin: 0 auto;
}

.character_list h3 {
    border-bottom: 4px solid #121212;
}

.character_list .item {
    position: relative;
}

.character_list .item a span {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    font-size: 0;
    ilne-height: 0;
}

.character_list .item_more {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
}

.character_list .item_more button {
    display: block;
    width: 100%;
    height: 25px;
    background: #b2b2b2;
    color: #fff;
    font-size: 14px;
}

.character_list .item_more button img {
    height: 6px;
    vertical-align: middle;
}

.character_list .n_tab {
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 10;
    text-align: right;
}

.character_list .n_tab.mobile_on {
    background: #828282;
}

.character_list .n_tab.mobile_on a,
.character_list .n_tab.mobile_on a.on {
    display: block;
    margin-left: 0;
}

.character_list .n_tab a {
    position: relative;
    display: inline-block;
    margin-left: 2px;
    height: 24px;
    overflow: hidden;
    background: #828282;
    text-align: left;
}

.character_list .n_tab a {
    display: none;
}

.character_list .n_tab a.on {
    display: inline-block;
    width: 107px;
    padding-right: 24px;
    background: #ffa507;
}

.character_list .n_tab a.n_tab1 img {
    width: 75px;
}

.character_list .n_tab a.n_tab2 img {
    width: 84px;
}

.character_list .n_tab a.n_tab3 img {
    width: 84px;
}

.character_list .n_tab a.n_tab4 img {
    width: 101px;
}

.character_list .n_tab a.n_tab5 img {
    width: 51px;
}

.character_list .n_tab a img {
    width: 100%;
    height: 100%;
}

.character_list .n_tab a.on em {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(https://3on3.fsgames.com/images/en/bg_tab_mob.png) 0 0 no-repeat;
    background-size: auto 52px;
}

.char_detail {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.char_detail.char_bigdog .c_header,
.char_detail.char_luther .c_header,
.char_detail.char_lee .c_header,
.char_detail.char_christa .c_header {
    background: #b80f0f;
}

.char_detail.char_murdock .c_header,
.char_detail.char_lulu .c_header,
.char_detail.char_clarke .c_header {
    background: #4d62d4;
}

.char_detail.char_joey .c_header,
.char_detail.char_amanda .c_header,
.char_detail.char_william .c_header {
    background: #009eb5;
}

.char_detail.char_kim .c_header,
.char_detail.char_carolina .c_header,
.char_detail.char_fred .c_header,
.char_detail.char_rin .c_header {
    background: #ed7600;
}

.char_detail.char_cindy .c_header,
.char_detail.char_helena .c_header,
.char_detail.char_pedro .c_header,
.char_detail.char_professor .c_header {
    background: #419e12;
}

.char_detail.char_carter .c_header {
    background: #009eb5;
}

.char_detail.char_jason .c_header {
    background: #ed7600;
}

.char_detail.char_max .c_header {
    background: #4d63d3;
}

.char_detail.char_rebecca .c_header {
    background: #009eb4;
}

.char_detail.char_littlefox .c_header {
    background: #419e12;
}

.char_detail.char_jimmy .c_header {
    background: #b80f0f;
}

.char_detail.char_fei .c_header {
    background: #4d62d4;
}

.char_detail.char_walker .c_header {
    background: #e9682c;
}

.char_detail.char_saru .c_header {
    background: #0faab8;
}

.char_detail.char_ginger .c_header {
    background: #419e12;
}

.char_detail.char_bigjoe .c_header {
    background: #b80f0f;
}

.char_detail.char_nadia .c_header {
    background: #e9682c;
}

.char_detail.char_deacon .c_header {
    background: #4d63d3;
}

.char_detail.char_mika .c_header {
    background: #4b9f22;
}




.char_detail .c_header {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.char_detail .c_header .item_wrap {
    max-width: 1240px;
    margin: 0 auto;
    z-index: 1;
}

.char_detail .c_header ul li {
    position: relative;
}

.char_detail .c_header ul strong {
    position: absolute;
    left: 0;
    top: 3px;
    font-weight: 700;
    color: #121212;
}

.char_detail .c_header ul span {
    font-weight: 700;
    color: #fff;
}

.char_detail .c_story {
    width: 100%;
    background: #121212;
    position: absolute;
    bottom: 0px;
}

.char_detail .c_story h4 {
    color: #fff;
    font-weight: 700;
}

.char_detail .c_story p {
    color: #b2b2b2;
}

.slick-dots li {
    cursor: pointer;
}

#btn_top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1;
}

#btn_top.bottom {
    bottom: 214px;
}

.main_media div.m_item {
    width: 100%;
    overflow: hidden;
    margin-left: -8px;
    text-align: center;
}

.main_media div.m_item a {
    display: inline;
}

.main_media div.m_item a span.media_body {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 304px;
    height: 246px;
    margin: 8px 5px 0 0;
}

.main_media div.m_item a p {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 230px;
    height: 54px;
    line-height: 54px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
}

.main_media div.m_item a span.media_body span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/media_over.png) 0 0 no-repeat;
    transition: all 0.15s ease 0.1s;
    -moz-transition: all 0.15s ease 0.1s;
    -webkit-transition: all 0.15s ease 0.1s;
    -o-transition: all 0.15s ease 0.1s;
    -ms-transition: all 0.15s ease 0.1s;
}

.main_media div.m_item a span.media_body span:after {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54px;
    height: 54px;
    transform: scale(0);
    background: url(https://3on3.fsgames.com/images/en/media_over_icon_default.png) 50% 50% no-repeat;
    transition: all 0.05s ease 0s;
    -moz-transition: all 0.05s ease 0s;
    -webkit-transition: all 0.05s ease 0s;
    -o-transition: all 0.05s ease 0s;
    -ms-transition: all 0.05s ease 0s;
}

.main_media div.m_item a span.media_body span.movie:after {
    background: url(https://3on3.fsgames.com/images/en/media_over_icon_movie.png) 50% 50% no-repeat;
}

.main_media div.m_item a span.media_body span.music:after {
    background: url(https://3on3.fsgames.com/images/en/media_over_icon_music.png) 50% 50% no-repeat;
}

.main_media div.m_item a:hover span.media_body span {
    width: 100%;
    transition: all 0.15s ease 0s;
    -moz-transition: all 0.15s ease 0s;
    -webkit-transition: all 0.15s ease 0s;
    -o-transition: all 0.15s ease 0s;
    -ms-transition: all 0.15s ease 0s;
}

.main_media div.m_item a:hover p {
    color: #ffa507;
}

.main_media div.m_item a:hover span.media_body span:after {
    transform: scale(1);
    transition: all 0.15s ease 0.15s;
    -moz-transition: all 0.15s ease 0.15s;
    -webkit-transition: all 0.15s ease 0.15s;
    -o-transition: all 0.15s ease 0.15s;
    -ms-transition: all 0.15s ease 0.15s;
}

.main_media div.m_item a img {
    width: 304px;
}

.media_list {
    overflow: hidden;
    width: 100%;
    padding-bottom: 100px;
}

.media_list .item_title {
    padding: 20px 15px;
}

.media_list .item_title h3 {
    height: 45px;
    border-bottom: 4px solid #121212;
}

.media_list .item_title h3 img {
    height: 25px;
}

.media_list .item_title .n_tab {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
    text-align: right;
}

.media_list .item_title .n_tab.mobile_on {
    background: #828282;
}

.media_list .item_title .n_tab.mobile_on a,
.media_list .item_title .n_tab.mobile_on a.on {
    display: block;
    margin-left: 0;
}

.media_list .item_title .n_tab a {
    position: relative;
    display: inline-block;
    margin-left: 2px;
    height: 24px;
    overflow: hidden;
    background: #828282;
    text-align: left;
}

.media_list .item_title .n_tab a {
    display: none;
}

.media_list .item_title .n_tab a.on {
    display: inline-block;
    width: 92px;
    padding-right: 24px;
    background: #ffa507;
}

.media_list .item_title .n_tab a.n_tab1 img {
    width: 75px;
}

.media_list .item_title .n_tab a.n_tab2 img {
    width: 84px;
}

.media_list .item_title .n_tab a.n_tab3 img {
    width: 84px;
}

.media_list .item_title .n_tab a.n_tab4 img {
    width: 101px;
}

.media_list .item_title .n_tab a.n_tab5 img {
    width: 51px;
}

.media_list .item_title .n_tab a img {
    width: 100%;
    height: 100%;
}

.media_list .item_title .n_tab a.on em {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(https://3on3.fsgames.com/images/en/bg_tab_mob.png) 0 0 no-repeat;
    background-size: auto 52px;
}

#media_con {
    width: 100%;
    min-height: 600px;
    text-align: left;
}

#media_con {

    text-align: center;
    transform: translate3d(0px, 30px, 0px);
    opacity: 0;
    filter: alpha(opacity=0);
}

#media_con a {
    /* display: inline;*/

}

#media_con a span.media_body {

    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 295px;
    height: 265px;
    /*margin: 20px 0 0 17px;*/
}

#media_con a p {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 215px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
}

#media_con a span.media_body span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/media_sub_over.png) 0 0 no-repeat;
    transition: all 0.15s ease 0.1s;
    -moz-transition: all 0.15s ease 0.1s;
    -webkit-transition: all 0.15s ease 0.1s;
    -o-transition: all 0.15s ease 0.1s;
    -ms-transition: all 0.15s ease 0.1s;
}

#media_con a span.media_body span:after {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    transform: scale(0);
    background: url(https://3on3.fsgames.com/images/en/media_over_icon_default.png) 50% 50% no-repeat;
    transition: all 0.05s ease 0s;
    -moz-transition: all 0.05s ease 0s;
    -webkit-transition: all 0.05s ease 0s;
    -o-transition: all 0.05s ease 0s;
    -ms-transition: all 0.05s ease 0s;
}

#media_con a span.media_body span.video:after {
    background: url(https://3on3.fsgames.com/images/en/media_over_icon_movie.png) 50% 50% no-repeat;
}

#media_con a span.media_body span.music:after {
    background: url(https://3on3.fsgames.com/images/en/media_over_icon_music.png) 50% 50% no-repeat;
}

#media_con a:hover span.media_body span {
    width: 100%;
    transition: all 0.15s ease 0s;
    -moz-transition: all 0.15s ease 0s;
    -webkit-transition: all 0.15s ease 0s;
    -o-transition: all 0.15s ease 0s;
    -ms-transition: all 0.15s ease 0s;
}

#media_con a:hover p {
    color: #ffa507;
}

#media_con a:hover span.media_body span:after {
    transform: scale(1);
    transition: all 0.15s ease 0.15s;
    -moz-transition: all 0.15s ease 0.15s;
    -webkit-transition: all 0.15s ease 0.15s;
    -o-transition: all 0.15s ease 0.15s;
    -ms-transition: all 0.15s ease 0.15s;
}

#media_con a img {
    width: 295px;
}

#media_sub_con {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/dim.png) 0 0 repeat;
}

#media_sub_con .swipe_con {
    overflow: hidden;
    position: relative;
    top: 100px;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    box-sizing: border-box;
}

#media_sub_con .swipe_con .dummy_img {
    width: 100%;
}

#media_sub_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

#swipeview_slider > div {
    overflow: hidden;
    position: relative;
}

#swipeview_slider > div .m_img {
    width: 100%;
    max-width: 1200px;
    max-height: 720px;
}

/*#swipeview_slider > div .artwork .m_img{max-width: 532px;}*/

#swipeview_slider > div .artwork {
    width: 100%;
    height: 100%;
}

#swipeview_slider > div .artwork .m_img {
    width: auto;
    height: 100%;
}

#media_sub_wrapper span div.video,
#media_sub_wrapper span div.music {
    width: 100%;
    height: 100%;
    padding: 0 90px;
    box-sizing: border-box;
}

#swipeview_slider > div iframe {
    width: 100%;
    height: 100%;
}

.media_sub_prev {
    position: absolute;
    top: 50%;
    left: 0;
    width: 47px;
    height: 88px;
    margin-top: -44px;
    background: url(https://3on3.fsgames.com/images/en/media_layer_prev.png) 0 0 no-repeat;
}

.media_sub_prev:hover {
    background: url(https://3on3.fsgames.com/images/en/media_layer_prev.png) 0 100% no-repeat;
}

.media_sub_next {
    position: absolute;
    top: 50%;
    right: 0;
    width: 47px;
    height: 88px;
    margin-top: -44px;
    background: url(https://3on3.fsgames.com/images/en/media_layer_next.png) 0 0 no-repeat;
}

.media_sub_next:hover {
    background: url(https://3on3.fsgames.com/images/en/media_layer_next.png) 0 100% no-repeat;
}

#media_sub_con .swipe_con .i_close {
    display: block;
    position: absolute;
    right: 20px;
    top: 0;
    width: 70px;
    height: 70px;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
}

#media_sub_con .swipe_con .i_close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    background-size: cover;
}

#media_sub_con .swipe_con .i_close:hover span {
    width: 100%;
}

/*케릭터스킬 */

.char_detail .c_skill div.item_list a {
    position: relative;
}

.char_detail .c_skill div.item_list a span {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 16px;
    width: 151px;
    height: 54px;
}

.char_detail .c_skill div.item_list a span em.skill_name {
    display: table-cell;
    width: 151px;
    height: 54px;
    color: #fff;
    font-size: 12px;
    line-height: 19px;
    text-align: left;
    vertical-align: middle;
}

.header .header_wrap p.time {
    position: absolute;
    top: 18px;
    left: 765px;
    width: 330px;
    height: 30px;
    color: #faba01;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    background-color: aqua;
}

.header .header_wrap p.time strong {
    font-size: 20px;
    font-weight: 700;
}

/* add*/

.header .header_wrap a.playbtn {
    position: absolute;
    top: 3px;
    left: 710px;
    width: 274px;
    height: 64px;
    background: url("https://common-cdn-api.joycityglobal.com/3on3/playfreenow/pfn_text.png") no-repeat 0px 0px;
}

.header .header_wrap a.playbtn:hover {
    background: url("https://common-cdn-api.joycityglobal.com/3on3/playfreenow/pfn_text_h.png") no-repeat 0px 0px;
}

/*rank*/
.rank_section_1 {
    height: 850px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section1_bg.jpg') no-repeat center;
}


.rank_section_1 h2 {
    text-align: center;
    margin-bottom: 30px;
}

.rank_section_1 p {
    text-align: center;
}

.rank_section_1 .rank_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.rank_section_2 {
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 35%);
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section2_bg.jpg') no-repeat center;
    height: 200px;
}

.rank_section_2 .sub_navi {
    height: 100%;
}

.rank_section_2 .sub_navi ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.rank_section_2 .sub_navi ul li a {
    display: block;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.rank_section_2 .sub_navi ul li a.off img.on {
    display: none;
}

.rank_section_2 .sub_navi ul li a.off:hover img.on {
    display: block;
}

.rank_section_2 .sub_navi ul li a.off:hover img.off {
    display: none;
}

.rank_section_2 .sub_navi ul li a.on img.off {
    display: none;
}

.rank_section_3 {
    padding: 200px 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_rank_section3_bg.png') no-repeat center bottom;
    height: 1220px;
    background-size: cover;
}

.rank_section_3 .rank_movie {
    position: relative;
}

.rank_section_3 .rank_video_title {
    text-align: center;
    margin-bottom: 30px;
}

.rank_section_3 .rank_video_wrap {
    position: relative;
    text-align: center;
    height: 600px;
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
}

.rank_section_3 .rank_video_wrap .rank_video_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translate(-50%, -50%);
}

.opacity6 {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
}

.rank_section_3 .rank_video_wrap .rank_video_bg > img {
    width: 100%;
    height: auto;
}

.rank_section_3 .rank_video_wrap .rank_video_bg .play_button {
    display: block;
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 191, 0, 0.6);
    text-align: center;
}

.rank_section_3 .rank_video_wrap .rank_video_bg .play_button:hover {
    background: rgba(255, 191, 0, 0.8);
}

.rank_section_3 .rank_video_wrap .rank_video_bg .play_button img {
    margin-left: 10px;
}


.rank_section_4 {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_rank_section4_bg.png') no-repeat center bottom;
    padding: 200px 0;
    height: 990px;
    position: relative;
    background-size: cover;
}

.rank_cha {
    position: absolute;
    bottom: 0;
    left: -100px;
}

.rank_section_4 .rank_rules_title {
    text-align: center;
    margin-bottom: 30px;
}

.rank_section_4 .rank_rules_wrap {
    display: flex;
    justify-content: space-between;

}

.rank_section_4 .rules_box {
    width: 350px;
    height: 350px;
    background: rgba(40, 40, 40, 0.9);
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 1s;
}

.rank_section_4 .rank_rules_text {
    z-index: 1;
}

.rank_section_4 .rules_box .rank_rules_icon_title {
    margin: 10px 0;
}

.rank_section_4 .rules_box p {
    font-size: 18px;
    color: #fff;
    line-height: 26px;
}




.rank_section_5 {
    background: #282828;

    height: 625px;
    position: relative;
}

.rank_section_5_left {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_rank_section5_cha_bg.jpg') left -300px no-repeat;
}

.rank_section_5_right {
    height: 100%;
    float: right;
    width: 50%;
}

.rank_section_5_right:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_rank_section5_text_bg.png') left center no-repeat;
    width: 55%;
    height: 100%;
}

.rank_section_5 .rank_section_5_text_wrap {
    height: 100%;
    float: left;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rank_section_5 .rank_section_5_text_wrap img {
    z-index: 11;
}

.rank_section_5 .rank_section_5_text_wrap p {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    z-index: 10;
}

.rank_section_6 {
    background: #282828;
    height: 625px;
    position: relative;
}

.rank_section_6_right {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_rank_section6_cha_bg.jpg') right -500px no-repeat;
}

.rank_section_6_left {
    height: 100%;
    float: left;
    width: 50%;
}

.rank_section_6_left:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_rank_section6_text_bg.png') center right no-repeat;
    width: 55%;
    height: 100%;
}

.rank_section_6 .rank_section_6_text_wrap {
    height: 100%;
    float: right;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rank_section_6 .rank_section_6_text_wrap img {
    z-index: 11;
}

.rank_section_6 .rank_section_6_text_wrap p {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    z-index: 10;
}


/*3x3*/
.threexthree_section_1 {
    height: 850px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section1_bg.jpg') no-repeat center;
}



.threexthree_section_1 h2 {
    text-align: center;
    margin-bottom: 30px;
}

.threexthree_section_1 p {
    text-align: center;
}

.threexthree_section_1 .threexthree_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.threexthree_section_2 {
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 35%);
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section2_bg.jpg') no-repeat center;
    height: 200px;
}

.threexthree_section_2 .sub_navi {
    height: 100%;
}

.threexthree_section_2 .sub_navi ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.threexthree_section_2 .sub_navi ul li a {
    display: block;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.threexthree_section_2 .sub_navi ul li a.off img.on {
    display: none;

}

.threexthree_section_2 .sub_navi ul li a.off:hover img.on {
    display: block;

}

.threexthree_section_2 .sub_navi ul li a.off:hover img.off {
    display: none;
}

.threexthree_section_2 .sub_navi ul li a.on img.off {
    display: none;
}

.threexthree_section_3 {
    padding: 200px 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_threexthree_section3_bg.png') no-repeat center bottom;
    height: 1220px;
    background-size: cover;
}

.threexthree_section_3 .threexthree_movie {
    position: relative;
}

.threexthree_section_3 .threexthree_video_title {
    text-align: center;
    margin-bottom: 30px;
}

.threexthree_section_3 .threexthree_video_wrap {
    position: relative;
    text-align: center;
    height: 600px;
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
}

.threexthree_section_3 .threexthree_video_wrap .threexthree_video_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translate(-50%, -50%);
}

.opacity6 {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
}

.threexthree_section_3 .threexthree_video_wrap .threexthree_video_bg > img {
    width: 100%;
    height: auto;
}

.threexthree_section_3 .threexthree_video_wrap .threexthree_video_bg .play_button {
    display: block;
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 191, 0, 0.6);
    text-align: center;
}

.threexthree_section_3 .threexthree_video_wrap .threexthree_video_bg .play_button:hover {
    background: rgba(255, 191, 0, 0.8);
}

.threexthree_section_3 .threexthree_video_wrap .threexthree_video_bg .play_button img {
    margin-left: 10px;
}

.threexthree_section_4 {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_threexthree_section4_bg.png') no-repeat center bottom;
    padding: 200px 0;
    height: 990px;
    position: relative;
    background-size: cover;
}

.threexthree_cha {
    position: absolute;
    bottom: 0;
    right: 0;
}

.threexthree_section_4 .threexthree_rules_title {
    text-align: center;
    margin-bottom: 30px;
}

.threexthree_section_4 .threexthree_rules_wrap {
    display: flex;
    justify-content: space-between;

}

.threexthree_section_4 .rules_box {
    width: 350px;
    height: 350px;
    background: rgba(40, 40, 40, 0.9);
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 1s;
}

.threexthree_section_4 .threexthree_rules_text {
    z-index: 1;
}

.threexthree_section_4 .rules_box .threexthree_rules_icon_title {
    margin: 10px 0;
}

.threexthree_section_4 .rules_box p {
    font-size: 18px;
    color: #fff;
    line-height: 26px;
}

.rules_box:hover {
    box-shadow: 350px 0 0 0 rgba(90, 90, 90, 1) inset, -350px 0 0 0 rgba(90, 90, 90, 1) inset;

}

.threexthree_section_5 {
    background: #282828;

    height: 625px;
    position: relative;
}

.threexthree_section_5_left {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_threexthree_section5_cha_bg.jpg') left -300px no-repeat;
}

.threexthree_section_5_right {
    height: 100%;
    float: right;
    width: 50%;
}

.threexthree_section_5_right:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_threexthree_section5_text_bg.png') left center no-repeat;
    width: 55%;
    height: 100%;
}

.threexthree_section_5 .threexthree_section_5_text_wrap {
    height: 100%;
    float: left;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.threexthree_section_5 .threexthree_section_5_text_wrap img {
    z-index: 11;
}

.threexthree_section_5 .threexthree_section_5_text_wrap p {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    z-index: 10;
}

.threexthree_section_6 {
    background: #282828;

    height: 625px;
    position: relative;
}

.threexthree_section_6_right {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_threexthree_section6_cha_bg.jpg') right -200px no-repeat;
}

.threexthree_section_6_left {
    height: 100%;
    float: left;
    width: 50%;
}

.threexthree_section_6_left:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_threexthree_section6_text_bg.png') center right no-repeat;
    width: 55%;
    height: 100%;
}

.threexthree_section_6 .threexthree_section_6_text_wrap {
    height: 100%;
    float: right;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.threexthree_section_6 .threexthree_section_6_text_wrap img {
    z-index: 11;
}

.threexthree_section_6 .threexthree_section_6_text_wrap p {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    z-index: 10;
}




.astro_section_7 .astro_rank_title {
    text-align: center;
    margin-bottom: 50px;
}

.astro_section_7 .astro_rank_wrap_top {
    background: #282828;
    padding: 0 30px;
}



/*astro*/
.astro_section_1 {
    height: 850px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section1_bg.jpg') no-repeat center;
}

.mid_wrap {
    max-width: 1240px;
    margin: 0 auto;
    height: 100%;

}

.mid_wrap_fluid {
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
    max-width: 2000px;
}

.astro_section_1 h2 {
    text-align: center;
    margin-bottom: 30px;
}

.astro_section_1 p {
    text-align: center;
}

.astro_section_1 .astro_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.astro_section_2 {
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 35%);
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section2_bg.jpg') no-repeat center;
    height: 200px;
}

.astro_section_2 .sub_navi {
    height: 100%;
}

.astro_section_2 .sub_navi ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.astro_section_2 .sub_navi ul li a {
    display: block;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.astro_section_2 .sub_navi ul li a.off img.on {
    display: none;
}

.astro_section_2 .sub_navi ul li a.off:hover img.on {
    display: block;
}

.astro_section_2 .sub_navi ul li a.off:hover img.off {
    display: none;
}

.astro_section_2 .sub_navi ul li a.on img.off {
    display: none;
}

.astro_section_3 {
    padding: 200px 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section3_bg.png') no-repeat center bottom;
    height: 1220px;
    background-size: cover;
}

.astro_section_3 .astro_movie {
    position: relative;
}

.astro_section_3 .astro_video_title {
    text-align: center;
    margin-bottom: 30px;
}

.astro_section_3 .astro_video_wrap {
    position: relative;
    text-align: center;
    height: 600px;
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
}

.astro_section_3 .astro_video_wrap .astro_video_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translate(-50%, -50%);
}

.opacity6 {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
}

.astro_section_3 .astro_video_wrap .astro_video_bg > img {
    width: 100%;
    height: auto;
}

.astro_section_3 .astro_video_wrap .astro_video_bg .play_button {
    display: block;
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 191, 0, 0.6);
    text-align: center;
}

.astro_section_3 .astro_video_wrap .astro_video_bg .play_button:hover {
    background: rgba(255, 191, 0, 0.8);
}

.astro_section_3 .astro_video_wrap .astro_video_bg .play_button img {
    margin-left: 10px;
}

.astro_section_4 {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section4_bg.png') no-repeat center bottom;
    padding: 200px 0;
    height: 990px;
    position: relative;
    background-size: cover;
}

.astro_cha {
    position: absolute;
    bottom: 0;
    right: 0;
}

.astro_section_4 .astro_rules_title {
    text-align: center;
    margin-bottom: 30px;
}

.astro_section_4 .astro_rules_wrap {
    display: flex;
    justify-content: space-between;

}

.astro_section_4 .rules_box {
    width: 350px;
    height: 350px;
    background: rgba(40, 40, 40, 0.9);
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 1s;
}

.astro_section_4 .astro_rules_text {
    z-index: 1;
}

.astro_section_4 .rules_box .astro_rules_icon_title {
    margin: 10px 0;
}

.astro_section_4 .rules_box p {
    font-size: 18px;
    color: #fff;
    line-height: 26px;
}

.astro_section_5 {
    background: #282828;

    height: 625px;
    position: relative;
}

.astro_section_5_left {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section5_cha_bg.jpg') -700px -300px no-repeat;
}

.astro_section_5_right {
    height: 100%;
    float: right;
    width: 50%;
}

.astro_section_5_right:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section5_text_bg.png') left center no-repeat;
    width: 55%;
    height: 100%;
}

.astro_section_5 .astro_section_5_text_wrap {
    height: 100%;
    float: left;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.astro_section_5 .astro_section_5_text_wrap img {
    z-index: 11;
}

.astro_section_5 .astro_section_5_text_wrap p {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    z-index: 10;
}

.astro_section_6 {
    background: #282828;

    height: 625px;
    position: relative;
}

.astro_section_6_right {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section6_cha_bg.jpg') right no-repeat;
}

.astro_section_6_left {
    height: 100%;
    float: left;
    width: 50%;
}

.astro_section_6_left:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section6_text_bg.png') center right no-repeat;
    width: 55%;
    height: 100%;
}

.astro_section_6 .astro_section_6_text_wrap {
    height: 100%;
    float: right;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.astro_section_6 .astro_section_6_text_wrap img {
    z-index: 11;
}

.astro_section_6 .astro_section_6_text_wrap p {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    z-index: 10;
}

.astro_section_7 {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section7_bg.jpg') no-repeat center;
    padding: 200px 0;
    height: 1150px;
    position: relative;
    background-size: cover;
}

.astro_section_7 .astro_rank_title {
    text-align: center;
    margin-bottom: 50px;
}

.astro_section_7 .astro_rank_wrap_top {
    background: #282828;
    padding: 0 30px;
}

.astro_section_7 .astro_rank_sss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 250px;
}

.astro_section_7 .astro_rank_sss h2 {
    font-size: 40px;
    color: #fff;
    font-weight: 700;

}

.astro_section_7 .astro_rank_sss h1 {
    font-size: 50px;
    color: #fff;
    font-weight: 900;
}

.astro_section_7 .astro_rank_sss .eu_na_wrap {
    display: flex;
    align-items: center;
    width: 40%;
    justify-content: space-around;
}

.astro_section_7 .astro_rank_sss .rank_eu {
    font-size: 35px;
    color: #fff;
    font-weight: 900;
    text-align: center;
}

.astro_section_7 .astro_rank_sss .rank_eu span {
    color: #ffbf00;
}

.astro_section_7 .astro_rank_sss .rank_na {
    font-size: 35px;
    color: #fff;
    font-weight: 900;
    text-align: center;

}

.astro_section_7 .astro_rank_sss .rank_na span {
    color: #ffbf00;
}

.astro_section_7 .astro_rank_sss .asia_wrap {
    display: flex;
    align-items: center;
    width: 30%;
    justify-content: space-around;
}

.astro_section_7 .astro_rank_sss .rank_asia {
    font-size: 35px;
    color: #fff;
    font-weight: 900;
    text-align: center;
}

.astro_section_7 .astro_rank_sss .rank_asia span {
    color: #ffbf00;
}

.astro_section_7 .astro_rank_wrap_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.astro_section_7 .astro_rank_ss {
    background: #282828;
    height: 190px;
    width: 190px;
    text-align: center;
    padding: 15px;
}

.astro_section_7 .astro_rank_ss p {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
}

.astro_section_7 .astro_rank_s {
    background: #282828;
    height: 190px;
    width: 190px;
    text-align: center;
    padding: 15px;
}

.astro_section_7 .astro_rank_s p {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
}

.astro_section_7 .astro_rank_a {
    background: #282828;
    height: 190px;
    width: 190px;
    text-align: center;
    padding: 15px;
}

.astro_section_7 .astro_rank_a p {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
}

.astro_section_7 .astro_rank_b {
    background: #282828;
    height: 190px;
    width: 190px;
    text-align: center;
    padding: 15px;
}

.astro_section_7 .astro_rank_b p {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
}

.astro_section_7 .astro_rank_c {
    background: #282828;
    height: 190px;
    width: 190px;
    text-align: center;
    padding: 15px;
}

.astro_section_7 .astro_rank_c p {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
}

.astro_section_7 .astro_rank_d {
    background: #282828;
    height: 190px;
    width: 190px;
    text-align: center;
    padding: 15px;
}

.astro_section_7 .astro_rank_d p {
    font-size: 30px;
    color: #fff;
    font-weight: 900;
}

.astro_section_8 {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/overview_astro_section8_bg.jpg') no-repeat center;
    padding: 50px 0;
    height: 350px;
    position: relative;
    background-size: cover;
}

.astro_section_8 .astro_moreinfo_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.astro_section_8 .astro_moreinfo_title {
    text-align: center;
    margin-bottom: 10px;
}

.astro_section_8 .astro_moreinfo_button {
    text-align: center;
}

.astro_section_8 .astro_moreinfo_button a {
    display: inline-block;
    background: #ffbf00;
    border: 5px solid #ffbf00;

}

.astro_section_8 .astro_moreinfo_button a:hover {
    background: #fff;
}



/*left_menu*/

.page-main {
    position: relative;

    z-index: 999;
}

.page-main > aside {
    background-color: #fff;


    top: 200px;
    right: -180px;
    position: fixed;
}

.page-main > aside ul {}

.page-main > aside ul li {
    width: 180px;
    height: 50px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.1);
}

.page-main > aside ul li:last-child {
    border: 0;
}

.page-main > aside ul li a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.page-main > aside ul li:nth-child(1) a span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_dev_note.png') center no-repeat;
    width: 80px;
    height: 14px;
    display: block;
}

.page-main > aside ul li:nth-child(1) a:hover {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(1) a.on {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(1) a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_dev_note_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(1) a.on span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_dev_note_on.png') center no-repeat;
}


.page-main > aside ul li:nth-child(2) a span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_event.png') center no-repeat;
    width: 79px;
    height: 14px;
    display: block;
}

.page-main > aside ul li:nth-child(2) a:hover {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(2) a.on {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(2) a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_event_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(2) a.on span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_event_on.png') center no-repeat;
}




.page-main > aside ul li:nth-child(3) a span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_new_item.png') center no-repeat;
    width: 80px;
    height: 14px;
    display: block;
}

.page-main > aside ul li:nth-child(3) a:hover {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(3) a.on {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(3) a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_new_item_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(3) a.on span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_new_item_on.png') center no-repeat;
}


.page-main > aside ul li:nth-child(4) a span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_notice.png') center no-repeat;
    width: 55px;
    height: 14px;
    display: block;
}

.page-main > aside ul li:nth-child(4) a:hover {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(4) a.on {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(4) a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_notice_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(4) a.on span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_notice_on.png') center no-repeat;
}


.page-main > aside ul li:nth-child(5) a span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_maintenance.png') center no-repeat;
    width: 114px;
    height: 14px;
    display: block;
}

.page-main > aside ul li:nth-child(5) a:hover {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(5) a.on {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(5) a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_maintenance_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(5) a.on span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_maintenance_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(6) a span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_drawrate.png') center no-repeat;
    width: 98px;
    height: 14px;
    display: block;
}

.page-main > aside ul li:nth-child(6) a:hover {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(6) a.on {
    background: #ffbf00;
}

.page-main > aside ul li:nth-child(6) a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_drawrate_on.png') center no-repeat;
}

.page-main > aside ul li:nth-child(6) a.on span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_side_menu_drawrate_on.png') center no-repeat;
}




.page-main > aside button {
    outline: none;
    background-color: #ffbf00;
    display: block;
    position: absolute;
    top: 0;
    right: 180px;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
}


/*battlepass_section2*/
.battlepass_section2 {
    background: #282828;
    height: 930px;
    position: relative;
}

.battlepass_section2_left {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/battlepass_section2_bg.jpg') -600px 50% no-repeat;
}

.battlepass_section2_right {
    height: 100%;
    float: right;
    width: 50%;
}

.battlepass_section2_right:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/battlepass_section2_text_bg.png') left center no-repeat;
    width: 65%;
    height: 100%;
}

.battlepass_section2 .battlepass_section2_value {
    height: 100%;
    float: left;
    padding: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.battlepass_section2 .battlepass_section2_value > img {
    z-index: 11;
}


.battlepass_section2_value_wrap {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;

}

.battlepass_section2_value_wrap a {

    position: relative;
    max-width: 300px;
    width: 48%;
    height: 450px;
    transition: all ease-in-out 0.3s;
    padding: 10px;
    box-shadow: 0 0 0 0px #000 inset;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.battlepass_section2_value_wrap a:hover {
    box-shadow: 0 0 0 20px #ffa507 inset;


}

.battlepass_thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 200px;
    padding: 20px;
    border-radius: 10px 10px 0 0;
}

.battlepass_thumbnail img {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 600px;
    height: auto;

}

.battlepass_text {
    position: relative;
    background: #424242;
    height: calc(100% - 200px);
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

.battlepass_text h5 {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.battlepass_text p {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #fff;
    height: 130px;
}

.battlepass_text span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #ccc;
    position: absolute;
    bottom: 20px;
    left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

}

/*battlepass_section3*/

.battlepass_section3 {
    background: #282828;
    height: 930px;
    position: relative;
    background: url('../../images/battlepass/20250512/battlepass_section1_bg.jpg') center no-repeat;
    background-size: cover;
}

.battlepass_section3 > .day {
    position: absolute;
    top: 80px;
    right: 20px;
}

.battlepass_section3 > .day img {
    width: 100%;
}

.battlepass_section3_left {
    height: 100%;
    width: 100%;
    position: relative;
}




.battlepass_section3 .battlepass_section3_value {
    height: 100%;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.battlepass_section3 .battlepass_section3_value > img {
    z-index: 11;
}

.battlepass_section3 .battlepass_section3_value > img.left_text {
    display: block
}

.battlepass_section3 .battlepass_section3_value > img.center_text {
    display: none;
}

.battlepass_section3_value_wrap {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;

}

.battlepass_section3_value_wrap a {

    position: relative;
    max-width: 300px;
    width: 48%;
    height: 450px;
    transition: all ease-in-out 0.3s;
    padding: 10px;
    box-shadow: 0 0 0 0px #000 inset;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.battlepass_section3_value_wrap a:hover {
    box-shadow: 0 0 0 20px #ffa507 inset;


}

.battlepass_thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 200px;
    padding: 20px;
    border-radius: 10px 10px 0 0;
}

.battlepass_thumbnail img {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 100%;
    height: auto;

}

.battlepass_text {
    position: relative;
    background: #424242;
    height: calc(100% - 200px);
    padding: 20px;
    border-radius: 0 0 10px 10px;
    width:100%;
}

.battlepass_text h5 {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width:100%;
}

.battlepass_text p {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #fff;
    height: 130px;
    width:100%;
}

.battlepass_text span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #ccc;
    position: absolute;
    bottom: 20px;
    left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

}




/*news*/
.newsmain_section_1 {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_main_section1_bg.png') center no-repeat;
    height: 850px;
}

.newsmain_title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

}

.newsmain_title h2 {
    z-index: 10;
    text-align: center;
}


.newsmain_section_2 {
    background: #121212;
    padding: 50px 0;
}

.newsmain_section_2 ul {
    display: flex;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.newsmain_section_2 ul li a {
    display: block;
}

.newsmain_section_2 ul li a img {
    display: none;
}

.newsmain_section_2 ul li a img.news_on {
    display: block;
}

.newsmain_section_2 ul li a:hover img.news_on {
    display: none;
}

.newsmain_section_2 ul li a:hover img.news_hover {
    display: block;
}

.newsmain_section_3 {
    background: #121212;
    padding: 50px 0;
}

.newsmain_dev_note_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsmain_dev_note_title a img {
    display: none;
}

.newsmain_dev_note_title a img.on {
    display: block;
}

.newsmain_dev_note_title a:hover img.on {
    display: none;
}

.newsmain_dev_note_title a:hover img.hover {
    display: block;
}

.newsmain_dev_note_board {
    margin-top: 30px;
}

.newsmain_dev_note_board_wrap {
    height: 350px;
    width: 100%;
    display: inline-block;
}

.newsmain_dev_note_board_wrap > div.dev_note_box {
    float: left;

}

.newsmain_dev_note_board_wrap > div.dev_note_box:nth-of-type(1) {
    width: 50%;
    background: #282828;
    position: relative;

    height: 100%;

}

.newsmain_dev_note_board_wrap > div.dev_note_box:nth-of-type(2) {
    width: 23.5%;
    background: #282828;
    height: 100%;
    position: relative;
    margin-left: 1.5%;

}

.newsmain_dev_note_board_wrap > div.dev_note_box:nth-of-type(3) {
    width: 24%;
    background: #282828;
    height: 48%;
    position: relative;
    margin-left: 1%;
    margin-bottom: 0.75%;
}

.newsmain_dev_note_board_wrap > div.dev_note_box:nth-of-type(4) {
    width: 24%;
    background: #282828;
    position: relative;
    margin-left: 1%;
    height: 48%;
    margin-top: 0.75%;
}

.dev_note_box_img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}

.dev_note_box a {
    display: block;
    text-align: center;

}

.dev_note_box a img {
    position: absolute;
    width: 600px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.dev_note_box_text {
    position: absolute;
    background: rgba(40, 40, 40, 0.8);
    bottom: 0;
    width: 100%;
    height: 100px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dev_note_box_text h3 {
    font-size: 24px;
    color: #fff;
    line-height: 36px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}




.dev_note_box_text span {
    font-size: 14px;
    font-weight: 400;
    color: #ffbf00;
    display: block;
}

.dev_note_box_text p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 30px;
}




.newsmain_section_4 {
    background: #121212;
    padding: 50px 0;
}

.newsmain_event_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsmain_event_title a img {
    display: none;
}

.newsmain_event_title a img.on {
    display: block;
}

.newsmain_event_title a:hover img.on {
    display: none;
}

.newsmain_event_title a:hover img.hover {
    display: block;
}

.newsmain_event_board {
    margin-top: 30px;
}

.newsmain_event_board_wrap {
    height: 350px;
    width: 100%;
    display: inline-block;
}

.newsmain_event_board_wrap > div.event_box {
    float: left;

}

.newsmain_event_board_wrap > div.event_box {
    width: 23.5%;
    background: #282828;
    position: relative;
    margin-right: 2%;
    height: 100%;

}

.newsmain_event_board_wrap > div.event_box:nth-of-type(4) {
    width: 23.5%;
    background: #282828;
    position: relative;
    margin-right: 0;
    height: 100%;

}

.event_box_img {
    width: 100%;
    height: 65%;
    overflow: hidden;
    position: relative;
}

.event_box a {
    display: block;
    text-align: center
}

.event_box a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: auto;
}

.event_box_text {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 35%;
}

.event_box_text h3 {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.event_box_text span {
    font-size: 14px;
    font-weight: 400;
    color: #ffbf00;
    display: block;
}

.event_box_text p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 30px;
}


.newsmain_section_5 {
    background: #121212;
    padding: 50px 0;
}

.newsmain_new_item_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsmain_new_item_title a img {
    display: none;
}

.newsmain_new_item_title a img.on {
    display: block;
}

.newsmain_new_item_title a:hover img.on {
    display: none;
}

.newsmain_new_item_title a:hover img.hover {
    display: block;
}

.newsmain_new_item_board {
    margin-top: 30px;
}

.newsmain_new_item_board_wrap {
    height: 350px;
    width: 100%;
    display: inline-block;
}

.newsmain_new_item_board_wrap > div.new_item_box {
    float: left;

}

.newsmain_new_item_board_wrap > div.new_item_box {
    width: 23.5%;
    background: #282828;
    position: relative;
    margin-right: 2%;
    height: 100%;

}

.newsmain_new_item_board_wrap > div.new_item_box:nth-of-type(4) {
    width: 23.5%;
    background: #282828;
    position: relative;
    margin-right: 0;
    height: 100%;

}

.new_item_box_img {
    width: 100%;
    height: 65%;
    overflow: hidden;
    position: relative;

}

.new_item_box a {
    display: block;
    text-align: center
}

.new_item_box a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: auto;
}

.new_item_box_text {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 35%;
}

.new_item_box_text h3 {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

.new_item_box_text span {
    font-size: 14px;
    font-weight: 400;
    color: #ffbf00;
    display: block;
}

.new_item_box_text p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 30px;
}




.newsmain_section_6 {
    background: #121212;
    padding: 50px 0;
}

.newsmain_notice_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsmain_notice_title a img {
    display: none;
}

.newsmain_notice_title a img.on {
    display: block;
}

.newsmain_notice_title a:hover img.on {
    display: none;
}

.newsmain_notice_title a:hover img.hover {
    display: block;
}

.newsmain_notice_board {
    margin-top: 30px;
}

.notice_box {
    margin-bottom: 20px;
}

.notice_box a {
    display: block;
    width: 100%;
    padding: 20px;
    background: #282828;
}

.notice_box h3 {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.notice_box span {
    font-size: 14px;
    font-weight: 400;
    color: #ffbf00;
    display: block;
}



.newsmain_section_7 {
    background: #121212;
    padding: 50px 0 100px 0;

}

.newsmain_maintenance_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsmain_maintenance_title a img {
    display: none;
}

.newsmain_maintenance_title a img.on {
    display: block;
}

.newsmain_maintenance_title a:hover img.on {
    display: none;
}

.newsmain_maintenance_title a:hover img.hover {
    display: block;
}

.newsmain_maintenance_board {
    margin-top: 30px;
}

.maintenance_box {
    margin-bottom: 20px;
}

.maintenance_box a {
    display: block;
    width: 100%;
    padding: 20px;
    background: #282828;
}

.maintenance_box h3 {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.maintenance_box span {
    font-size: 14px;
    font-weight: 400;
    color: #ffbf00;
    display: block;
}

.newsmain_section_8 {
    background: #121212;
    padding: 50px 0 100px 0;

}

.newsmain_drawrate_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsmain_drawrate_title a img {
    display: none;
}

.newsmain_drawrate_title a img.on {
    display: block;
}

.newsmain_drawrate_title a:hover img.on {
    display: none;
}

.newsmain_drawrate_title a:hover img.hover {
    display: block;
}

.newsmain_drawrate_board {
    margin-top: 30px;
}

.drawrate_box {
    margin-bottom: 20px;
}

.drawrate_box a {
    display: block;
    width: 100%;
    padding: 20px;
    background: #282828;
}

.drawrate_box h3 {
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.drawrate_box span {
    font-size: 14px;
    font-weight: 400;
    color: #ffbf00;
    display: block;
}


/*dev_note*/
.news_dev_note_section_1 {
    height: 500px;
    background: #121212;

    position: relative;
}

.news_dev_note_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.news_dev_note_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.news_dev_note_section_2 {
    padding: 100px 0;
    background: #121212;
}

.news_dev_note_list {
    display: flex;
    flex-wrap: wrap;

}

.news_dev_note_wrap {
    width: 30%;
    margin-left: calc(3.3% / 2);
    margin-right: calc(3.3% / 2);
    margin-top: 3.3%;
    background: #282828;

}




.dev_note_thumbnail {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 380px;
}

.dev_note_thumbnail a {
    display: block;
}

.dev_note_thumbnail a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: auto;
}

.dev_note_text_top {
    padding: 20px;
}

.dev_note_text_top span {
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 24px;

}

.dev_note_text_top h3 {
    font-size: 24px;
    color: #fff;
    line-height: 36px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.dev_note_text_top p {
    font-size: 16px;
    color: #828282;
    line-height: 24px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dev_note_text_top:hover p {
    color: #fff;
}

.dev_note_text_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px;
}

.dev_note_text_bottom ul {
    display: flex;

}

.dev_note_text_bottom ul li a {
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 20px;
}

.dev_note_text_bottom ul li:nth-child(1) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_facebook.png') center no-repeat;
}

.dev_note_text_bottom ul li:nth-child(2) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_twitter.png') center no-repeat;
}

.dev_note_text_bottom ul li:nth-child(3) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_link.png') center no-repeat;
}

.dev_note_text_bottom ul li:nth-child(1) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_facebook_hover.png') center no-repeat;
}

.dev_note_text_bottom ul li:nth-child(2) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_twitter_hover.png') center no-repeat;
}

.dev_note_text_bottom ul li:nth-child(3) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_link_hover.png') center no-repeat;
}



/*event*/

.news_event_section_1 {
    height: 500px;
    background: #121212;

    position: relative;
}

.news_event_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.news_event_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.news_event_section_2 {
    padding: 100px 0;
    background: #121212;
}

.news_event_list {
    display: flex;
    flex-wrap: wrap;

}

.news_event_wrap {
    width: 30%;
    margin-left: calc(3.3% / 2);
    margin-right: calc(3.3% / 2);
    margin-top: 3.3%;
    background: #282828;

}


.event_thumbnail {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 380px;
}

.event_thumbnail a {
    display: block;
}

.event_thumbnail a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: auto;
}

.event_text_top {
    padding: 20px;
}

.event_text_top span {
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 24px;

}

.event_text_top h3 {
    font-size: 24px;
    color: #fff;
    line-height: 36px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.event_text_top p {
    font-size: 16px;
    color: #828282;
    line-height: 24px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.event_text_top:hover p {
    color: #fff;
}

.event_text_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px;
}

.event_text_bottom ul {
    display: flex;

}

.event_text_bottom ul li a {
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 20px;
}

.event_text_bottom ul li:nth-child(1) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_facebook.png') center no-repeat;
}

.event_text_bottom ul li:nth-child(2) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_twitter.png') center no-repeat;
}

.event_text_bottom ul li:nth-child(3) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_link.png') center no-repeat;
}

.event_text_bottom ul li:nth-child(1) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_facebook_hover.png') center no-repeat;
}

.event_text_bottom ul li:nth-child(2) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_twitter_hover.png') center no-repeat;
}

.event_text_bottom ul li:nth-child(3) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_link_hover.png') center no-repeat;
}








/*new_item*/


.news_new_item_section_1 {
    height: 500px;
    background: #121212;

    position: relative;
}

.news_new_item_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.news_new_item_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.news_new_item_section_2 {
    padding: 100px 0;
    background: #121212;
}

.news_new_item_list {
    display: flex;
    flex-wrap: wrap;

}

.news_new_item_wrap {
    width: 30%;
    margin-left: calc(3.3% / 2);
    margin-right: calc(3.3% / 2);
    margin-top: 3.3%;
    background: #282828;

}


.new_item_thumbnail {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 380px;
}

.new_item_thumbnail a {
    display: block;
}

.new_item_thumbnail a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: auto;
}

.new_item_text_top {
    padding: 20px;
}

.new_item_text_top span {
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 24px;

}

.new_item_text_top h3 {
    font-size: 24px;
    color: #fff;
    line-height: 36px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.new_item_text_top p {
    font-size: 16px;
    color: #828282;
    line-height: 24px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.new_item_text_top:hover p {
    color: #fff;
}

.new_item_text_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px;
}

.new_item_text_bottom ul {
    display: flex;

}

.new_item_text_bottom ul li a {
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 20px;
}

.new_item_text_bottom ul li:nth-child(1) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_facebook.png') center no-repeat;
}

.new_item_text_bottom ul li:nth-child(2) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_twitter.png') center no-repeat;
}

.new_item_text_bottom ul li:nth-child(3) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_link.png') center no-repeat;
}

.new_item_text_bottom ul li:nth-child(1) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_facebook_hover.png') center no-repeat;
}

.new_item_text_bottom ul li:nth-child(2) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_twitter_hover.png') center no-repeat;
}

.new_item_text_bottom ul li:nth-child(3) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/dev_note_link_hover.png') center no-repeat;
}





/*notice*/
.news_notice_section_1 {
    height: 500px;
    background: #121212;

    position: relative;
}

.news_notice_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.news_notice_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.news_notice_section_2 {
    padding: 100px 0;
    background: #121212;
}

.notice_wrap {
    background: #282828;
    margin-bottom: 30px;
    box-shadow: 2px 2px 2px 1px rgba(35, 35, 35, 0.3)
}

.notice_top {
    padding: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333333;
}

.platform_wrap {
    width: 70%;
}

.platform_wrap img {
    margin-right: 10px;
}

.sns_wrap {
    width: 30%;
    height: 100%;
}

.sns_wrap ul {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.sns_wrap ul li a.sns_facebook {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_facebook.png') center no-repeat;
    width: 11px;
    height: 17px;
    padding: 0 20px;
}

.sns_wrap ul li a.sns_facebook:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_facebook_hover.png') center no-repeat;
}

.sns_wrap ul li a.sns_twitter {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_twitter.png') center no-repeat;
    width: 16px;
    height: 17px;
    padding: 0 20px;
}

.sns_wrap ul li a.sns_twitter:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_twitter_hover.png') center no-repeat;
}

.sns_wrap ul li a.sns_link {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_link.png') center no-repeat;
    width: 15px;
    height: 17px;
    padding: 0 20px;
}

.sns_wrap ul li a.sns_link:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_link_hover.png') center no-repeat;
}

.notice_bottom a {
    padding: 30px;
    display: flex;

}

.notice_thumbnail {
    margin-right: 2%;
}

.notice_thumbnail_wrap {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #121212;
    border: 1px solid #121212;
    position: relative;
}

.notice_thumbnail_wrap > img {
    width: 200px;
    height: auto;
    opacity: 0.6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.notice_thumbnail_wrap span {
    display: block;
    width: 100%;
    height: 100%;
}

.notice_thumbnail_wrap span img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.notice_text_wrap {
    width: 79%;

    color: #fff;
}

.notice_text_wrap span {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.notice_text_wrap h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.notice_text_wrap p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #828282;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.notice_bottom:hover .notice_text_wrap p {
    color: #eee;
}

.notice_more_button {
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice_more_button a {
    display: block;
    border: 5px solid #fff;
    padding: 20px 50px;
}

.notice_more_button a span {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/notice_more_button.png') center no-repeat;
    width: 152px;
    height: 23px;

}

.notice_more_button a:hover {
    background: #fff;
}

.notice_more_button a:hover span {

    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/notice_more_button_hover.png') center no-repeat;
}






/*maintenance*/
.news_maintenance_section_1 {
    height: 500px;
    background: #121212;

    position: relative;
}

.news_maintenance_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.news_maintenance_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.news_maintenance_section_2 {
    padding: 100px 0;
    background: #121212;
}

.maintenance_wrap {
    background: #282828;
    margin-bottom: 30px;
    box-shadow: 2px 2px 2px 1px rgba(35, 35, 35, 0.3)
}

.maintenance_top {
    padding: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333333;
}

.platform_wrap {
    width: 70%;
}

.platform_wrap img {
    margin-right: 10px;
}

.sns_wrap {
    width: 30%;
    height: 100%;
}

.sns_wrap ul {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.sns_wrap ul li a.sns_facebook {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_facebook.png') center no-repeat;
    width: 11px;
    height: 17px;
    padding: 0 20px;
}

.sns_wrap ul li a.sns_facebook:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_facebook_hover.png') center no-repeat;
}

.sns_wrap ul li a.sns_twitter {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_twitter.png') center no-repeat;
    width: 16px;
    height: 17px;
    padding: 0 20px;
}

.sns_wrap ul li a.sns_twitter:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_twitter_hover.png') center no-repeat;
}

.sns_wrap ul li a.sns_link {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_link.png') center no-repeat;
    width: 15px;
    height: 17px;
    padding: 0 20px;
}

.sns_wrap ul li a.sns_link:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/sns_icon_link_hover.png') center no-repeat;
}

.maintenance_bottom a {
    padding: 30px;
    display: flex;

}

.maintenance_thumbnail {
    margin-right: 2%;
}

.maintenance_thumbnail_wrap {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #121212;
    border: 1px solid #121212;
    position: relative;
}

.maintenance_thumbnail_wrap > img {
    width: 200px;
    height: auto;
    opacity: 0.6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.maintenance_thumbnail_wrap span {
    display: block;
    width: 100%;
    height: 100%;
}

.maintenance_thumbnail_wrap span img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.maintenance_text_wrap {
    width: 79%;

    color: #fff;
}

.maintenance_text_wrap span {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.maintenance_text_wrap h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.maintenance_text_wrap p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #828282;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.maintenance_bottom:hover .maintenance_text_wrap p {
    color: #eee;
}

.maintenance_more_button {
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.maintenance_more_button a {
    display: block;
    border: 5px solid #fff;
    padding: 20px 50px;
}

.maintenance_more_button a span {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/notice_more_button.png') center no-repeat;
    width: 152px;
    height: 23px;

}

.maintenance_more_button a:hover {
    background: #fff;
}

.maintenance_more_button a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/notice_more_button_hover.png') center no-repeat;
}

/*search*/
.news_search_section_1 {
    height: 500px;
    background: #121212;

    position: relative;
}

.news_search_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/news_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.news_search_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.news_search_section_2 {
    padding: 100px 0;
    background: #121212;
    min-height:800px;
}
.search_area{
    width:100%;
    padding-bottom:100px;
    display: flex;
}
.search_sel_cat {
    width: 250px;
    height: 70px;
    background: #202020;
    margin-right: 20px;
    position: relative;
    
}

.search_sel_cat:last-child {
    margin-right: 0;
}

.search_sel_cat h6 {
    font-size: 18px;
    color: #ccc;
    height: 100%;
    padding: 20px;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;

}

.search_sel_cat h6::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ccc;
}

.search_sel_cat h6.selected::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #faba01;
        border-top:0;
}

.search_sel_cat > div {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 9999;
    position: inherit;
    
}

.search_sel_cat ul li {
    background: #202020;
}

.search_sel_cat ul li:hover {
    background: #faba01;

}

.search_sel_cat ul li a {
    color: #ccc;
    padding: 15px 0;
    margin: 0 15px;
    font-size: 16px;
    display: block;
    height: 100%;
    position: relative;
    z-index: 9999;
    
}

.search_sel_cat ul li a:hover {
    color: #fff;

}

.search_sel_cat ul li:last-child a::after {
    content: none;
}

.search_sel_cat ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
}
.search_bar_wrap{
    display: flex;
    width:100%;
}

.search_bar{
    background:#000;
    border:0;
    height:70px;
    padding:20px;
    width:100%;
    color:#fff;
    font-size:18px;
    font-weight: 600;
    
    
}
.search_btn{
    height:70px;
    background: #232323;
        width:20%;
    font-weight:600;
    font-size: 16px;
    color: #fff;
}
.search_btn:hover{
    color:#ffbf00;
    background:#323232;
}
.search_list_wrap {
    background: #282828;
    margin-bottom: 30px;
    box-shadow: 2px 2px 2px 1px rgba(35, 35, 35, 0.3)
}



.search_list a {
    padding: 30px;
    display: flex;
    

}

.search_thumbnail {
    margin-right: 2%;
}

.search_thumbnail_wrap {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #121212;
    border: 1px solid #121212;
    position: relative;
}

.search_thumbnail_wrap > img {
    width: 200px;
    height: auto;
    opacity: 0.6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.search_thumbnail_wrap span {
    display: block;
    width: 100%;
    height: 100%;
}

.search_thumbnail_wrap span img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.search_text_wrap {
    width: 79%;

    color: #ddd;
    max-height:200px;
    overflow: hidden;
}

.search_text_wrap span {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color:#faba01;
    
}

.search_text_wrap h3 {
    font-size: 30px;
    font-weight: 400;
    line-height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.search_text_wrap > p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #828282;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top:10px;
    margin-bottom:20px;
    }
.search_text_wrap .search_word_line p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #828282;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top:5px;
}
.search_list:hover .search_text_wrap h3 {
    color: #eee;
}
.search_list:hover .search_text_wrap p {
    color: #eee;
}

.search_more_button {
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_more_button a {
    display: block;
    border: 5px solid #fff;
    padding: 20px 50px;
}

.search_more_button a span {
    display: block;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/notice_more_button.png') center no-repeat;
    width: 152px;
    height: 23px;

}

.search_more_button a:hover {
    background: #fff;
}

.search_more_button a:hover span {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/notice_more_button_hover.png') center no-repeat;
}
.search_word{
    font-weight: 700;
    color:#fff;
}


/*board_detail*/
.news_board_detail_section_2 {
    padding: 100px 0;
    background: #121212;
}

.board_detail_wrap {
    display: flex;
    position: relative;
}

.detail_main {
    width: calc(100% - 350px);


}

.detail_text_wrap {
    background: #282828;
    padding: 50px 30px;
}

.detail_main h2 {
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    line-height: 55px;
}

.detail_main span {
    font-size: 16px;
    font-weight: 400;
    color: #ffbf00;
    text-transform: uppercase;
}

.detail_main img {
    max-width: 100%;
    height: auto;
    margin: 50px 0;
}

.detail_main p {
    font-size: 16px;
    color: 400;
    line-height: 24px;
    color: #fff;
}

.detail_sns_wrap {
    display: flex;

    background: #282828;
    padding: 50px 30px;
}

.detail_sns_wrap h4 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

.detail_sns_wrap ul {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.detail_sns_wrap ul li a {
    width: 15px;
    height: 17px;
    display: block;
    margin-right: 10px;
}

.detail_sns_wrap ul li:nth-child(1) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_facebook.png') center no-repeat;

}

.detail_sns_wrap ul li:nth-child(1) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_facebook_hover.png') center no-repeat;
}

.detail_sns_wrap ul li:nth-child(2) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_twitter.png') center no-repeat;

}

.detail_sns_wrap ul li:nth-child(2) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_twitter_hover.png') center no-repeat;
}

.detail_sns_wrap ul li:nth-child(3) a {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_link.png') center no-repeat;

}

.detail_sns_wrap ul li:nth-child(3) a:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_link_hover.png') center no-repeat;
}



.detail_link_wrap {
    display: flex;
    margin-top: 50px;
}

.detail_next_link {
    display: block;
    margin-left: auto;
    width: 57px;
    height: 12px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_next_link.png') center no-repeat;
}

.detail_next_link:hover {
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_next_link_hover.png') center no-repeat;
}

.detail_prev_link {
    display: block;
    margin-right: auto;
    width: 92px;
    height: 12px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_prev_link.png') center no-repeat;
}

.detail_prev_link:hover {

    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/detail_prev_link_hover.png') center no-repeat;
}

.detail_sidebar {
    margin-left: 50px;
    width: 300px;
    height: 100%;
    position: sticky;
    top: 0;
    right: 0;
}

.detail_sidebar_head {
    padding: 20px;
    background: #282828;
    margin-bottom: 20px;
}



.detail_sidebar_list ul li a {
    display: flex;
    padding: 20px;
    background: #282828;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.detail_sidebar_list ul li a:hover {
    box-sizing: border-box;
    border: 1px solid #fff;
}

.detail_sidebar_wrap {
    display: flex;
}

.detail_sidebar_thubnail {
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
}

.detail_sidebar_thubnail img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: auto;
}

.detail_sidebar_text {
    margin-left: 20px;
    width: 190px;
}

.detail_sidebar_text h5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #fff;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.detail_sidebar_text span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #d6d6d6;


}

/*ranking main*/
.ranking_main_section_1 {
    height: 350px;
    background: #121212;

    position: relative;

}

.rankingmain_title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

}

.rankingmain_title h2 {
    z-index: 10;
    text-align: center;
}

.ranking_main_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/ranking_title_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.ranking_main_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.ranking_main_section_1 .rankingmain_sub_menu {
    position: absolute;
    bottom: 0;
    width: 1240px;
    height: 60px;
}

.ranking_main_section_1 .rankingmain_sub_menu ul {
    display: flex;
    width: 100%;
    height: 100%;
}

.ranking_main_section_1 .rankingmain_sub_menu ul li.on {
    background: #faba01;
}

.ranking_main_section_1 .rankingmain_sub_menu ul li {
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: #282828;
}

.ranking_main_section_1 .rankingmain_sub_menu ul li a {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ranking_main_section_1 .rankingmain_sub_menu ul li:hover {
    background: #faba01;
}

.ranking_main_section_1 .rankingmain_sub_menu ul li:nth-child(1) {
    border-right: 1px solid #232323;
}

.ranking_main_section_2 {
    padding: 100px 0;
    background: #121212;
    min-height: 500px;
}

.helper_advice {
    padding: 20px 0 40px;
    text-align: left;
    color: #eee;
    font-size: 20px;
    text-align: center;
    font-weight: 600;

}

.helper_advice span {
    color: #ccc;
    font-size: 16px;
    font-weight: 400;
}

.rankmain_sel_cat_wrap {
    width: 100%;
    display: flex;
    color: #444;
}

.rankmain_sel_cat_wrap .sel_cat {
    width: 25%;
    height: 70px;
    background: #282828;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;

}

.rankmain_sel_cat_wrap .sel_cat:hover {
    cursor: pointer;
}

.rankmain_sel_cat_wrap .sel_cat > div {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 100;
    position: inherit;
}

.rankmain_sel_cat_wrap .sel_cat:last-child {
    border: none;
}


.rankmain_sel_cat_wrap .sel_cat h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    position: relative;
    display: flex;
    align-items: center;
}

.rankmain_sel_cat_wrap .sel_cat h3::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 16px;
    height: 9px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/ranking_cat_arrow_b.png') center no-repeat;
    right: 30px;
}

.rankmain_sel_cat_wrap .sel_cat h3.selected::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 16px;
    height: 9px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/ranking_cat_arrow_t.png') center no-repeat;
    right: 30px;
}

.rankmain_sel_cat_wrap .sel_cat ul li {
    background: #282828;
}

.rankmain_sel_cat_wrap .sel_cat ul li:hover {
    background: #faba01;
}

.rankmain_sel_cat_wrap .sel_cat ul li:hover a {
    color: #fff;
}

.rankmain_sel_cat_wrap .sel_cat ul li a {
    color: #aaa;
    padding: 15px 0;
    margin: 0 30px;
    font-size: 14px;
    display: block;

    height: 100%;
    position: relative;
}

.rankmain_sel_cat_wrap .sel_cat ul li:last-child a::after {
    content: none;
}

.rankmain_sel_cat_wrap .sel_cat ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;

}

.rankmain_r_list_wrap {
    margin-top: 50px;
    border-top: 10px solid #faba01;
}

.rankmain_r_list_wrap .rhead {
    font-size: 20px;
    color: #fff;
    font-weight: 600;

}

.rankmain_r_list_wrap .rhead .tr {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    align-items: center;
}

.rankmain_r_list_wrap .rhead .tr .th {
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-bottom: 2px solid #faba01;
}

.rankmain_r_list_wrap .rhead .tr .th.rank_no {
    width: 10%;
}

.rankmain_r_list_wrap .rhead .tr .th.rank_lv {
    width: 10%;
}

.rankmain_r_list_wrap .rhead .tr .th.rank_name {
    width: 35%;
}

.rankmain_r_list_wrap .rhead .tr .th.rank_name.com {
    width: 30%;
}

.rankmain_r_list_wrap .rhead .tr .th.rank_rank.com {
    width: 10%
}

.rankmain_r_list_wrap .rhead .tr .th.rank_country {
    width: 30%
}

.rankmain_r_list_wrap .rhead .tr .th.rank_country.com {
    width: 25%
}

.rankmain_r_list_wrap .rhead .tr .th.rank_win {
    margin-right: 0;
    width: 15%;
}

.rankmain_r_list_wrap .rhead .tr .th.rank_score {
    margin-right: 0;
    width: 15%;
}


.rankmain_r_list_wrap .rbody {
    font-size: 18px;
    color: #eee;

}

.rankmain_r_list_wrap .rbody .tr {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    align-items: center;
}

.rankmain_r_list_wrap .rbody .tr:hover {
    background: #000;
}

.rankmain_r_list_wrap .rbody .tr .td {
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.rankmain_r_list_wrap .rbody .tr .td.rank_no {
    width: 10%;
    flex-direction: column;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_no .rating {
    display: flex;
    font-size: 12px;
    color: #666;
    align-items: center;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_no .rating span.up {

    display: block;
    width: 9px;
    height: 5px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/rating_up.png') center no-repeat;
    margin-right: 5px;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_no .rating span.down {

    display: block;
    width: 9px;
    height: 5px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/rating_down.png') center no-repeat;
    margin-right: 5px;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_lv {
    width: 10%;

}

.rankmain_r_list_wrap .rbody .tr .td.rank_name {
    width: 35%;
    justify-content: flex-start;
    padding: 0 30px;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_name.com {
    width: 30%;

}

.rankmain_r_list_wrap .rbody .tr .td.rank_name:hover {
    cursor: pointer;
    text-decoration: underline;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_name img {
    margin-right: 10px;
    width: 31px;
    height: auto;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_rank {
    width: 10%;
    justify-content: center;
    padding: 0 30px;
}
.rankmain_r_list_wrap .rbody .tr .td.rank_rank img{
    width: 60px;
    height: auto;
}
.rankmain_r_list_wrap .rbody .tr .td.rank_country {
    width: 30%;
    justify-content: flex-start;
    padding: 0 30px;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_country.com {
    width: 25%;

}

.rankmain_r_list_wrap .rbody .tr .td.rank_country img {
    margin-right: 10px;
    width: 28px;
    height: auto;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_win {
    margin-right: 0;
    width: 15%;
}

.rankmain_r_list_wrap .rbody .tr .td.rank_score {
    margin-right: 0;
    width: 15%;
}

.ranking_main_section_2 .pagination {
    padding: 80px 0 40px;
}


.ranking_main_section_2 .pagination .pagination_wrap {
    display: flex;
    justify-content: center;
}

.ranking_main_section_2 .pagination_wrap .ic_first {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/ranking_btn_first.png') center no-repeat;
    width: 14px;
    height: 13px;
}

.ranking_main_section_2 .pagination_wrap .ic_prev {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/ranking_btn_prev.png') center no-repeat;
    width: 8px;
    height: 13px;
}

.ranking_main_section_2 .pagination_wrap .ic_next {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/ranking_btn_next.png') center no-repeat;
    width: 8px;
    height: 13px;
}

.ranking_main_section_2 .pagination_wrap .ic_last {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/ranking_btn_last.png') center no-repeat;
    width: 14px;
    height: 13px;
}

.ranking_main_section_2 .pagination_wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #333333;
    width: 70px;
    height: 70px;
    background: #000;
    font-size: 16px;
    color: #aaa;
    text-align: center;
    box-sizing: border-box;
}

.ranking_main_section_2 .pagination_wrap ul {
    display: flex;
}

.ranking_main_section_2 .pagination_wrap ul li.active a {
    background: #faba01;
    color: #232323;
}

/*ranking detail page*/
.ranking_detail_section_1 {
    height: 230px;
    background: #121212;
    position: relative;

}

.rankin_detail_ch_title {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
}

.rankingmain_title h2 {
    z-index: 100;
    text-align: center;
}

.ranking_detail_section_1:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/ranking_detail_title_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.ranking_detail_section_1 .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/image/bg_main_pattern.png') left top repeat;
}

.rankin_detail_ch_title .user_info {
    padding-left: 160px;
}

.rankin_detail_ch_title .user_info .user_ch_thumb {
    width: 135px;
    height: 135px;
    border: 5px solid #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.rankin_detail_ch_title .user_info .name {
    font-size: 50px;
    font-weight: 900;
    color: #fff;
}

.rankin_detail_ch_title .user_info .simple_info {
    display: flex;
}

.rankin_detail_ch_title .user_info .simple_info .lv {
    font-size: 24px;
    color: #faba01;
    font-weight: 700;
    margin-right: 15px;
}

.rankin_detail_ch_title .user_info .simple_info .country {
    font-size: 24px;
    color: #faba01;
    font-weight: 700;

}

.rankin_detail_ch_title .back_list_btn a {

    height: 40px;
    background: #faba01;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    padding: 20px 40px 20px 20px;


}

.rankin_detail_ch_title .back_list_btn a::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 15px;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/2022_new/ranking/back_btn.png');
    right: 20px;

}

.ranking_detail_section_2 {
    height: 70px;
    width: 100%;
    background: #000000;
}

.ranking_detail_section_2 ul {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.ranking_detail_section_2 ul li a {
    display: flex;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    color: #666;
    font-size: 18px;
    margin-right: 10px;
}

.ranking_detail_section_2 ul li a.on {
    background: #faba01;
    color: #fff;
}

.ranking_detail_section_3 {
    min-height: 500px;
    background: #121212;
    padding: 50px 0;
}

.season_result_btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.season_result_btn span {
    color: #ccc;
    background: #666;
    text-align: center;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.season_result_btn span.on {
    color: #fff;
    background: #ea9621;
}

.season_result_btn span:hover {
    color: #fff;
    background: #ea9621;
}
.ranking_detail_section_3 .ch_no_data{
    display: flex;
    justify-content: center;
    position: relative;
    min-height: 400px;
    align-items: center;
}
.ranking_detail_section_3 .ch_no_data span::before{
    content: "";
    display: flex;
    width:120px;
    height:120px;
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/image/no_data_caution_ic.png') center no-repeat;
    margin-bottom:20px;
    
}
.ranking_detail_section_3 .ch_no_data span{
    font-size:20px;
    color:#666;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ranking_detail_section_3 .ch_detail_wrap {
    display: flex;
}

.ranking_detail_section_3 .ch_detail_wrap .side_overview {
    margin-right: 50px;
    width: 330px;
    background: #282828;
    height: 100%;
    border-radius: 5px;
}

.ranking_detail_section_3 .ch_detail_wrap .side_overview .h_overview {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    height: 70px;
    display: flex;
    align-items: center;

}

.ranking_detail_section_3 .ch_detail_wrap .side_overview .h_overview img {
    width: auto;
    height: 30px
}

.ranking_detail_section_3 .ch_detail_wrap .side_overview .h_overview p {
    color: #faba01;
    font-size:
}

.ranking_detail_section_3 .ch_detail_wrap .side_overview .l_overview ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: space-between;
}

.ranking_detail_section_3 .ch_detail_wrap .side_overview .l_overview ul li {
    width: 40%;
    color: #999;
    font-size: 16px;
    margin-bottom: 30px;
}

.ranking_detail_section_3 .ch_detail_wrap .side_overview .l_overview ul li span {
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    margin-top: 5px;
    display: block;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history {
    width: calc(100% - 380px);


}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    background: #282828;
    border-radius: 5px 5px 0 0;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history > img {
    height: 30px;
    width: auto;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap {
    display: flex;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat {
    width: 170px;
    height: 40px;
    background: #202020;
    margin-right: 10px;
    position: relative;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat:last-child {
    margin-right: 0;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat h6 {
    font-size: 14px;
    color: #ccc;
    height: 100%;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat h6::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 9px;
    height: 5px;
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/history_cat_arrow_b.png') center no-repeat;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat h6.selected::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 9px;
    height: 5px;
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/history_cat_arrow_t.png') center no-repeat;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat > div {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 9999;
    position: inherit;
    
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat ul li {
    background: #202020;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat ul li:hover {
    background: #faba01;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat ul li a {
    color: #ccc;
    padding: 10px 0;
    margin: 0 10px;
    font-size: 12px;
    display: block;
    height: 100%;
    position: relative;
    z-index: 9999;
    
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat ul li a:hover {
    color: #fff;


}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat ul li:last-child a::after {
    content: none;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .h_match_history .match_history_cat_wrap .history_sel_cat ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history {
    padding: 40px 20px;
    display: flex;
    align-items: center;
    background: #282828;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .most_ch {
    width: 60%;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .most_played_title {
    margin-right: 20px;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .most_played_thumb img {
    width: 85px;
    height: auto;
    margin-right: 10px;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .highest_rank_wrap {
    width: 40%;
    display: flex;
    align-items: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .highest_rank_img{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .highest_rank_img span {
    font-size: 16px;
    color: #fff;
    text-align: center;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .m_match_history .highest_rank_img img {
    width: 120px;
    height: auto;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result {
    background: #282828;
    padding: 20px 30px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 20px;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.win::before {
    content: "";
    position: absolute;
    background: #1b71ff;
    height: 100%;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.win::after {
    content: "";
    position: absolute;
    background: #1b71ff;
    height: 100%;
    width: 10px;
    height: 100%;
    right: 0;
    top: 0;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.lose::before {
    content: "";
    position: absolute;
    background: #d32727;
    height: 100%;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.lose::after {
    content: "";
    position: absolute;
    background: #d32727;
    height: 100%;
    width: 10px;
    height: 100%;
    right: 0;
    top: 0;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.draw::before {
    content: "";
    position: absolute;
    background: #ccc;
    height: 100%;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.draw::after {
    content: "";
    position: absolute;
    background: #ccc;
    height: 100%;
    width: 10px;
    height: 100%;
    right: 0;
    top: 0;

}



.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result p {
    width: 95px;
    height: 35px;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.win p {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/match_result_win.png') center no-repeat;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.lose p {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/match_result_lose.png') center no-repeat;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result.draw p {
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2022_new/ranking/match_result_draw.png') center no-repeat;

}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap {
    display: flex;
    margin: 0 40px;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .home_wrap {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 600;
    color: #ccc;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .home_wrap.win span {
    color: #1b71ff;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .home_wrap.lose span {
    color: #d32727;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .home_wrap span {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .home_wrap span::after {
    content: ':';
    font-size: 40px;
    font-weight: 900;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .away_wrap.win span {
    color: #1b71ff;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .away_wrap.lose span {
    color: #d32727;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .away_wrap span {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_score_wrap .away_wrap {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 600;
    color: #ccc;
    text-align: center;
    padding: 0 8px;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap {
    display: flex;


}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .score {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .score span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .rebound {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .rebound span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .block {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .block span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .steal {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .steal span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .assist {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .assist span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .looseball {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history .l_match_history .match_result .match_detail_wrap .looseball span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.match_more_list_btn {
    background: #282828;
    margin-top: 20px;
    border-radius: 5px;
    padding: 10px;
    color: #ccc;
    text-align: center;
    font-size: 16px;
    cursor: pointer;

}


.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history_season {
    width: 100%;


}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history_season .s_match_history_t {
    padding: 10px 20px;
    display: flex;
    height:70px;
    align-items: center;
    justify-content: space-between;
    background: #282828;
    border-radius: 5px 5px 0 0;
}

.ranking_detail_section_3 .ch_detail_wrap .ch_detail_history_season .s_match_history_t .season_title p {
    font-size: 30px;
    font-weight: 900;
    color: #faba01;
    text-transform: capitalize;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap {
    margin-bottom: 20px;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .most_ch_thumb img {
    width: 60px;
    height: auto;
    margin-left: 10px;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #282828;
    
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_rank_wrap {
    display: flex;
    align-items: center;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_rank_wrap img {
    width: 140px;
    height: auto;
}
.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result > p{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size:16px;
    font-weight: 900;
    color: #fff;
    }
.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result > p strong{
 color:#faba01;
    font-size:30px;
    font-weight: 900;
}
.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_wrap {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    position: relative;
    justify-content: flex-start;
    border-radius: 5px;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_count {
    color: #fff;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 900;

}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_count span {
    margin-left: 5px;

}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_graph {
    display: flex;
    width: 170px;
    height: 25px;
    position: relative;
    align-items: center;


}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_graph .win {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #1b71ff;
    z-index: 1;
    border-radius: 4px 0 0 4px;

}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_graph .win span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    font-size: 11px;
    color: #fff;
    padding-left: 3px;
    width: 20%;
    display: flex;
    align-items: center;
    z-index: 999;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_graph .win.only_win {
    border-radius: 4px;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_graph .lose {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #d32727;
    border-radius: 4px;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_b .match_result .s_match_score_graph .lose span {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    font-size: 12px;
    padding-right: 3px;
    color: #fff;
    white-space: nowrap;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    z-index: 999;

}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap {
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #282828;
    border-radius:0 0 5px 5px;
    border-top:1px solid rgba(255,255,255,0.2);
}
.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .ranking {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 20px 0 0;
    width:14.28%;
    text-align: center;
    border-right:1px solid rgba(255,255,255,0.2);
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .ranking span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}
.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .score {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 20px;
    width:14.28%;
    text-align: center;
    border-right:1px solid rgba(255,255,255,0.2);
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .score span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .rebound {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 20px;
    width:14.28%;
    text-align: center;
      border-right:1px solid rgba(255,255,255,0.2);
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .rebound span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .block {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 20px;
    width:14.28%;
    text-align: center;
      border-right:1px solid rgba(255,255,255,0.2);
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .block span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .steal {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 20px;
    width:14.28%;
    text-align: center;
      border-right:1px solid rgba(255,255,255,0.2);
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .steal span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .assist {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 20px;
    width:14.28%;
    text-align: center;
      border-right:1px solid rgba(255,255,255,0.2);
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .assist span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .looseball {
    color: #999;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:0 0 0 20px;
    width:14.28%;
    text-align: center;
      }

.ranking_detail_section_3 .ch_detail_history_season .ch_detail_history_season_wrap .s_match_history_l .match_detail_wrap .looseball span {
    color: #ddd;
    font-size: 30px;
    font-weight: 900;
}

.gameinfo {
    height: auto !important;
}

/* mobile header only */
/*1200보다 작을때때*/
@media screen and (max-width: 1200px) {



    .item4 .i_wrap .i_txt {
        margin-left: 0px;
        text-align: right;
    }


    .n_l {
        position: relative;
        margin-left: -130px;
        text-align: left;
        margin-top: -58px;
    }

    .n_l a {
        width: 100px;
        height: 36px;

    }

    .n_l a img {
        width: 100px;
        height: 36px;
    }


    #btn_top {
        display: none;
    }

    .header {
        position: relative;
        height: 45px;
        z-index: 2000;
    }

    .header .header_wrap h1 {
        position: relative;
        z-index: 10;
    }

    .header .header_wrap button.h_hamburger {
        z-index: 10;
    }

    .header .header_wrap a.time {
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        line-height: 45px;

    }

    /*add */
    .header .header_wrap a.playbtn {
        top: 10px;
        left: 50%;
        width: 200px;
        height: 45px;
        transform: translateX(-50%);
        background: url("https://common-cdn-api.joycityglobal.com/3on3/playfreenow/pfn_text_m.png") no-repeat 0px 0px;
    }

    .header .header_wrap a.playbtn:hover {
        background: url("https://common-cdn-api.joycityglobal.com/3on3/playfreenow/pfn_text_m_h.png") no-repeat 0px 0px;
    }

    .header .h_hamburger {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 45px;
        overflow: hidden;
    }

    .header .h_hamburger img {
        width: 45px;
    }

    .header h1 a {
        display: block;
        height: 45px;
        padding-left: 15px;
        line-height: 42px;
        cursor: auto;
    }

    .header h1 img {
        width: 25px;
    }

    .header .nav {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 45px;
        bottom: 0;
        background: #121212;
        z-index: 10;
        border-top: 2px solid #faba01;
    }

    .header .nav ul li.on .n_sub {
        display: block !important;
    }

    .header .nav ul li.on .n_item {
        color: #faba01 !important;
    }

    .header .nav ul .n_item {
        display: block;
        padding: 0 15px;
        line-height: 55px;
        font-size: 21px;
        color: #fff;
        border-bottom: 1px solid #323232;
    }

    .header .nav ul .n_sub {
        display: none;
        background: #323232;
        z-index: 10;
        border-top: none;
    }

    .header .nav ul .n_sub a {
        text-transform: uppercase;
        display: block;
        line-height: 39px;
        padding: 0 15px;
        font-size: 13px;
        border-bottom: 1px solid #121212;
        color: #b2b2b2;
    }

    .header .nav ul .n_sub a:first-child {
        border-top: 0;
    }

    .header .nav ul .n_item.n_has_sub {
        background: url(https://3on3.fsgames.com/images/en/bg_nav_mob.png) no-repeat right 0;
        background-size: auto 110px;
    }

    .header .nav ul li.on .n_item.n_has_sub {
        background: url(https://3on3.fsgames.com/images/en/bg_nav_mob.png) no-repeat right bottom;
        background-size: auto 110px;
    }

    .header .h_language {
        display: none;
        position: fixed;
        left: 0px;
        right: 0;
        bottom: 0;
        z-index: 20;
    }

    .header .h_language h4 {
        line-height: 47px;
        padding-left: 15px;
        background: #000;
        cursor: pointer;
        color: #fff;
        font-size: 15px;
    }

    .header .h_language h4 img {
        width: 27px;
    }

    .header .h_language div {
        display: none;
        position: fixed;
        left: 0;
        bottom: 47px;
        right: 0;
        background: #121212;
        background: #323232;
        z-index: 21;
    }

    .header .h_language div a. {
        display: block;
        padding-left: 15px;
        line-height: 40px;
        color: #b2b2b2;
    }

    .header .h_language div img {
        width: 27px;
    }

    .play_now {
        /*display:none;*/
        position: fixed;
    }


    .header .h_sns {
        display: none;
        position: fixed;
        left: 15px;
        bottom: 20px;
        font-size: 0;
        line-height: 0;
        z-index: 20;
    }

    .header .h_sns img {
        height: 25px;
    }

    .header .h_sns a {
        display: inline-block;
        margin-right: 15px;
    }

    .header.on .nav,
    .header.on .h_language,
    .header.on .h_sns {
        display: block;
    }

    .header.on .header_wrap {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 10;
        background: #121212;
    }

    .header.on .h_hamburger {
        width: 48px;
        background: url(https://3on3.fsgames.com/images/en/btn_nav_close.png) no-repeat 0 0;
        background-size: cover;
    }

    .header.on .h_hamburger img {
        display: none;
    }

    .footer {
        position: relative;
        height: 160px;
        text-align: center;
        letter-spacing: -0.03em;
    }

    .footer .f_box {
        width: 100%;
        position: static;
    }

    .footer a {
        display: inline-block;
        padding: 0 3px;
        color: #fff;
        font-size: 10px;
        line-height: 35px;
    }

    .footer a.f_contact {
        position: absolute;
        left: 15px;
        top: 43px;
        padding: 0 30px 0 10px;
        line-height: 25px;
        background: #323232 url(https://3on3.fsgames.com/images/en/ico_footer.png) no-repeat right center;
        background-size: auto 7px;
    }

    .footer a.f_contact:hover {
        color: #121212;
        background: #faba01 url(https://3on3.fsgames.com/images/en/ico_footer_on.png) no-repeat right center;
        background-size: auto 7px;
    }

    .footer span {
        position: absolute;
        right: 15px;
        top: 70px;
        font-size: 7px;
    }

    .footer .f_joycity {
        position: absolute;
        right: 15px;
        top: 50px;
        width: 70px;
    }

    .footer .f_ps4 {
        position: absolute;
        right: 15px;
        top: 100px;
        width: 100px;
    }

    .news_list .n_tab {
        position: absolute;
        right: 15px;
        top: 23px;
        width: 131px;
        padding-top: 27px;
        z-index: 10;
    }

    .news_list .n_tab a {
        display: none;
        width: 131px;
        height: 26px;
        overflow: hidden;
        background: #828282;
    }

    .news_list .n_tab a em {
        display: none;
        float: right;
        width: 26px;
        height: 26px;
        background: url(https://3on3.fsgames.com/images/en/bg_tab_mob.png) no-repeat 0 0;
        background-size: auto 52px;
    }

    /*.news_list .n_tab a img {display:none}
.news_list .n_tab a.n_tab1 {background:url(/images/en/tab_news1_mob.png) no-repeat 0 bottom; background-size:auto 52px;}
.news_list .n_tab a.n_tab2 {background:url(/images/en/tab_news2_mob.png) no-repeat 0 bottom; background-size:auto 52px;}
.news_list .n_tab a.n_tab3 {background:url(/images/en/tab_news3_mob.png) no-repeat 0 bottom; background-size:auto 52px;}*/
    .news_list .n_tab a.on {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        background-position: 0 0;
        border-color: #ffa507;
    }

    .news_list .n_tab a.on em {
        display: block;
    }

    .news_list .n_tab.on a.on em {
        display: block;
        background-position: 0 bottom;
    }

    .news_list .n_tab a.n_tab3 {
        border-bottom: 0;
    }

    .news_list .n_tab.on a {
        display: block !important;
    }

    .main_visual .item {}

    .main_visual .slick-arrow {
        display: none !important;
    }

    .main_visual .m_tit {
        width: 170px;
        margin-left: -85px;
    }

    .main_visual .m_tit h3 {
        padding: 35px 0 7px;
    }

    .main_visual .m_tit h3 img {
        width: 170px;
    }

    .main_visual .m_tit button {
        width: 55px;
    }

    .main_visual .m_tit button:hover {
        transform: scale(1.05);
    }

    .main_visual .m_tit button img {
        width: 100%;
    }

    .main_news strong {
        padding-bottom: 4px;
        font-size: 20px;
        line-height: 20px;
    }

    .main_character {
        width: 100%;
        padding: 40px 0 0;
    }

    .main_character h4 {
        padding-left: 15px;
        height: 38px;
    }

    .main_character h4 img {
        height: 17px;
        margin-right: 5px;
        vertical-align: bottom;
    }

    .main_character h4 a img {
        height: 15px;
    }

    .main_character .m_slide {
        width: 100%;
        overflow: hidden;
    }

    .main_character .m_char_box {}

    .main_character .item {
        margin-bottom: 80px;
    }

    .main_character .item img {
        display: block;
        width: 94%;
    }

    .main_character .slick-dots {
        position: absolute;
        left: 0;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }

    .main_character .slick-dots:after {
        content: '15';
        font-size: 15px;
        color: #828282;
        font-weight: bold;
        padding-left: 2px;
    }

    .main_character .slick-dots li {
        display: none;
    }

    .main_character .slick-dots li.slick-active {
        display: inline-block;
    }

    .main_character .slick-dots li.slick-active button {
        font-size: 21px;
        margin-top: -10px;
        color: #323232;
        font-weight: bold;
    }

    .main_character .slick-dots li.slick-active button:after {
        padding-left: 2px;
        content: '/';
        font-size: 17px;
        color: #828282;
        padding-top: 10px;
    }

    .main_character .slick-arrow {
        position: absolute;
        bottom: 40px;
        z-index: 5;
        width: 26px;
        height: 26px;
        font-size: 0;
        line-height: 0;
        text-indent: -999px;
        background-size: cover;
    }

    .main_character .slick-prev {
        left: 30px;
        background: url(https://3on3.fsgames.com/images/en/btn_main_prev2.png) no-repeat 0 0;
        background-size: cover;
    }

    .main_character .slick-next {
        right: 30px;
        background: url(https://3on3.fsgames.com/images/en/btn_main_next2.png) no-repeat 0 0;
        background-size: cover;
    }

    .main_news a {
        background: url(https://3on3.fsgames.com/images/en/bg_news_mob.png) no-repeat right center;
        background-size: auto 20px;
    }

    .main_news a strong {
        height: 20px;
    }

    .main_news a em {
        line-height: 16px;
        height: 20px;
        font-size: 9px;
        background-size: auto 20px;
        padding: 0 4px;
    }

    .main_news a span {
        font-size: 9px;
    }

    .main_news a:hover {
        background: url(https://3on3.fsgames.com/images/en/bg_news_mob.png) no-repeat right center;
        background-size: auto 20px;
    }

    .main_info {
        position: relative;
        background: #fff;
        width: 100%;
    }

    .main_info .m_info {
        position: relative;
        padding: 40px 15px;
    }

    .main_info h4 img {
        width: 281px;
    }

    .main_info p {
        padding: 15px 0 20px;
        font-size: 14px;
        color: #828282;
    }

    .main_info .item_img {
        display: none;
    }

    .movie_layer .item {
        padding: 0 35px;
    }

    .movie_layer .item .i_close {
        width: 35px;
        height: 35px;
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
        background-size: 35px 35px;
    }

    .movie_layer .item .i_close:hover {
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
        background-size: 35px 35px;
    }



    #media_sub_con .swipe_con {
        overflow: visible;
        padding: 0;
    }

    #media_sub_wrapper span div.video,
    #media_sub_wrapper span div.music {
        padding: 0;
    }

    #swipeview_slider > div .artwork {
        width: 100%;
        height: 100%;
    }

    #swipeview_slider > div .artwork .m_img {
        width: auto;
        height: 100%;
    }

    #media_sub_con .swipe_con .i_close {
        display: block;
        position: absolute;
        right: 0;
        top: -35px;
        width: 35px;
        height: 35px;
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
        background-size: cover;
    }

    #media_sub_con .swipe_con .i_close span {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
        background-size: cover;
    }

    #media_sub_con .swipe_con .i_close:hover span {
        width: 100%;
    }

    .media_sub_prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: 24px;
        height: 44px;
        margin-top: -22px;
        background: url(https://3on3.fsgames.com/images/en/media_layer_prev.png) 0 0 no-repeat;
        background-size: cover;
    }

    .media_sub_prev:hover {
        background: url(https://3on3.fsgames.com/images/en/media_layer_prev.png) 0 100% no-repeat;
        background-size: cover;
    }

    .media_sub_next {
        position: absolute;
        top: 50%;
        right: 0;
        width: 24px;
        height: 44px;
        margin-top: -22px;
        background: url(https://3on3.fsgames.com/images/en/media_layer_next.png) 0 0 no-repeat;
        background-size: cover;
    }

    .media_sub_next:hover {
        background: url(https://3on3.fsgames.com/images/en/media_layer_next.png) 0 100% no-repeat;
        background-size: cover;
    }

    #btn_info {
        line-height: 35px;
        padding: 0 20px;
        z-index: 2;
        background: #ffa507;
        font-size: 15px;
        color: #fff;
    }

    #btn_info img {
        height: 15px;
    }

    .main_media {
        padding: 40px 7px;
    }

    .main_media h4 {
        height: 38px;
    }

    .main_media h4 img {
        height: 17px;
        margin-right: 5px;
        vertical-align: bottom;
    }

    .main_media h4 a img {
        height: 15px;
    }

    .character_list {
        padding: 30px 0 100px;
        overflow: hidden;
    }

    .character_list h3 {
        height: 45px;
        margin-bottom: 20px;
        padding: 0 15px;
        border-bottom: 2px solid #121212;
    }

    .character_list h3 img {
        height: 25px;
    }

    .character_list .item_wrap {
        padding: 15px;
        text-align: center;
    }

    .character_list .item {
        width: 98%;
        max-width: 300px;
        padding: 0 0 5%;
        display: inline-block;
    }

    .character_list .item img {
        width: 100%;
    }

    .char_detail .item_char {
        height: 253px;
        border-top: 2px solid #121212;
        border-bottom: 2px solid #121212;
        background-size: auto 100%;
    }

    .char_detail.char_christa .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/christa/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_professor .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/professor/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_luther .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/luther/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_bigdog .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/bigdog/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_lee .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/lee/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_clarke .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/clarke/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_murdock .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/murdock/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_lulu .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/lulu/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_amanda .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/amanda/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_joey .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/joey/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_william .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/william/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_helena .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/helena/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_cindy .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/cindy/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_pedro .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/pedro/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_kim .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/kim/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_carolina .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/carolina/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_fred .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/fred/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_rin .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/rin/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_carter .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/carter/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_jason .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/jason/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_max .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/max/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_rebecca .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/rebecca/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_littlefox .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/littlefox/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_jimmy .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/jimmy/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_fei .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/fei/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_walker .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/walker/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_saru .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/saru/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_ginger .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/ginger/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_bigjoe .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/bigjoe/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_nadia .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/nadia/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_deacon .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/deacon/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail.char_mika .item_char {
        background: url(http://3on3.fsgames.com/images/en/char/mika/char_mob.jpg) no-repeat center bottom;
        background-size: auto 100%;
    }

    .char_detail .c_header {
        padding-top: 66px;
    }

    .char_detail .c_header .i_back {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 66px;
        background: #fff url(https://3on3.fsgames.com/images/en/char/btn_back2.png) no-repeat 0 0;
        background-size: auto 66px;
    }

    .char_detail .c_header .i_back img {
        display: none;
    }

    .char_detail .c_header h3 {
        padding: 24px 15px;
    }

    .char_detail .c_header h3 img {
        height: 46px;
    }

    .char_detail .c_header ul.i_info {
        padding: 0 15px;
        margin-bottom: 25px;
    }

    .char_detail .c_header ul.i_info li {
        padding: 0 0 6px 80px;
        font-size: 12px;
    }

    .char_detail .c_header ul.i_info strong {
        font-weight: 700;
        top: 0;
    }

    .char_detail .c_header ul.i_info span {
        font-weight: 700;
    }

    .char_detail .c_header .thumbs {
        position: relative;
        overflow: hidden;
    }

    /*

.char_detail .c_header .thumbs .slick-list  div {position:relative; float:left; width:312px; font-size:0; line-height:0;}
.char_detail .c_header .thumbs .item .i_img {width:306px; height:194px; border:3px solid #fff;}
.char_detail .c_header .thumbs .item .i_btn {position:absolute; right:3px; bottom:3px;}
*/
    .char_detail .c_header .thumbs .item {
        width: 100%;
        overflow: hidden;
    }

    .char_detail .c_header .thumbs .slick-list {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .char_detail .c_header .thumbs .slick-list div {
        position: relative;
        float: left;
        font-size: 0;
    }

    .char_detail .c_header .thumbs .slick-list .i_img {
        display: block;
        width: 92%;
        margin: 0 auto 80px;
        border: 3px solid #fff;
        box-sizing: border-box;
    }

    .char_detail .c_header .thumbs .item .i_btn {
        position: absolute;
        right: 4%;
        bottom: 83px;
        margin-right: 3px;
    }

    .char_detail .c_header .thumbs .item .i_btn img {
        width: 36px;
        height: 36px;
    }

    .char_detail .c_header .thumbs .slick-prev {
        left: 15px;
        background: url(https://3on3.fsgames.com/images/en/char/btn_prev2.png) no-repeat 0 0;
        background-size: cover;
    }

    .char_detail .c_header .thumbs .slick-next {
        right: 15px;
        background: url(https://3on3.fsgames.com/images/en/char/btn_next2.png) no-repeat 0 0;
        background-size: cover;
    }

    .char_detail .c_header .thumbs .slick-arrow {
        position: absolute;
        bottom: 40px;
        width: 26px;
        height: 26px;
        font-size: 0;
        line-height: 0;
        text-indent: -8999px;
        z-index: 2;
    }

    .char_detail .c_header .thumbs .item_paging {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40px;
        text-align: center;
        z-index: 1;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        vertical-align: middle;
    }

    .char_detail .c_header .thumbs .item_paging span {
        font-size: 22px;
    }

    .char_detail .c_header .thumbs .item_paging em {
        font-size: 18px;
    }

    .char_detail .c_story .item_wrap {
        padding: 25px 0 70px;
        text-align: left;
    }

    .char_detail .c_story h4 {
        padding: 0 15px;
        height: 25px;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
    }

    .char_detail .c_story p {
        padding: 0 15px 30px;
        font-size: 12px;
        border-bottom: 1px solid #2c2c2c;
    }

    .char_detail .c_story div {
        padding-top: 30px;
        border-top: 1px solid #000;
        text-align: center;
    }

    .char_detail .c_story div img {
        max-width: 250px;
    }

    .char_detail .c_skill {
        padding: 30px 15px;
        overflow: hidden;
    }

    .char_detail .c_skill div.item_list {
        margin-left: -1%;
        overflow: hidden;
        text-align: center;
    }

    .char_detail .c_skill div.item_list a {
        display: inline-block;
        float: none;
        max-width: 232px;
        width: 232px;
        margin: 1%;
    }

    .char_detail .c_skill div.item_list a img {
        width: 100%;
    }

    .char_detail .c_skill h4 {
        height: 37px;
    }

    .char_detail .c_skill h4 img {
        height: 19px;
    }

    .coupon img.complete {
        width: 100%;
        max-width: 1240px;
    }

    .coupon .item_title {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        padding: 20px 0 !important;
    }

    .coupon .item_title h3 {
        height: 45px;
        padding: 0 15px;
        border-bottom: 2px solid #121212;
    }

    .coupon .item_title h3 img {
        height: 25px;
    }

    .coupon .item_wrap {
        text-align: center;
    }

    .coupon .item_wrap .coupon_sub_title {
        padding: 40px 0 30px;
    }

    .coupon .item_wrap .coupon_sub_title img {
        width: 66.12903%;
        max-width: 820px;
    }

    .coupon .item_wrap .psn_login button {
        display: inline-block;
        width: 175px;
        height: 49px;
        margin: 0 auto;
        font-size: 19px;
        color: #fff;
        background: #fff;
    }

    .coupon .item_wrap .psn_login button strong {
        font-weight: 600;
    }

    .coupon .item_wrap .psn_login button.already_btn {
        background: #ffa507;
    }

    .coupon .item_wrap .input_con {
        position: relative;
        width: 76%;
        max-width: 932px;
        margin: 0 auto;
        padding: 0 145px 20px 0;
        box-sizing: border-box;
    }

    .coupon .item_wrap .input_con input {
        width: 100%;
        height: 44px;
        margin-top: 25px;
        padding-left: 12px;
        border: 1px solid #323232;
        font-size: 14px;
        color: #828282;
        line-height: 44px;
        background: #fff;
        box-sizing: border-box;
    }

    .coupon .item_wrap .input_con button {
        position: absolute;
        top: 25px;
        right: 0;
        width: 140px;
        height: 44px;
        font-size: 19px;
        font-weight: 600;
        color: #fff;
        background: #121212;
    }

    .coupon .item_wrap .input_con .warning_txt {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 6px;
        font-size: 12px;
        color: #c71010;
        text-align: left;
    }

    .coupon .item_wrap dl.caption {
        position: relative;
        width: 100%;
        max-width: 1240px;
        margin: 40px auto;
        padding: 20px;
        background: #e2e2e2;
        box-sizing: border-box;
    }

    .coupon .item_wrap dl.caption dt {
        margin-bottom: 10px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 14px;
        color: #323232;
        text-align: left;
    }

    .coupon .item_wrap dl.caption dd {
        margin-top: 10px;
        font-family: Verdana;
        font-size: 12px;
        color: #323232;
        text-align: left;
    }

    .gameinfo .item_title {
        padding: 20px 0 !important;
    }

    .gameinfo .item_title h3 {
        padding-left: 15px;
    }

    .gameinfo .item_title h3 img {
        height: 23px;
    }

    .gameinfo .n_tab {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 10;
        text-align: right;
    }

    .gameinfo .n_tab.mobile_on {
        background: #828282;
    }

    .gameinfo .n_tab.mobile_on a,
    .gameinfo .n_tab.mobile_on a.on {
        display: block;
        margin-left: 0;
    }

    .gameinfo .n_tab a {
        position: relative;
        display: inline-block;
        margin-left: 2px;
        height: 24px;
        overflow: hidden;
        background: #828282;
        text-align: left;
    }

    .gameinfo .n_tab a {
        display: none;
    }

    .gameinfo .n_tab a.on {
        display: inline-block;
        width: 107px;
        padding-right: 24px;
        background: #ffa507;
    }

    .gameinfo .n_tab a.n_tab1 img {
        width: 75px;
    }

    .gameinfo .n_tab a.n_tab2 img {
        width: 84px;
    }

    .gameinfo .n_tab a.n_tab3 img {
        width: 84px;
    }

    .gameinfo .n_tab a.n_tab4 img {
        width: 101px;
    }

    .gameinfo .n_tab a.n_tab5 img {
        width: 51px;
    }

    .gameinfo .n_tab a img {
        width: 100%;
        height: 100%;
    }

    .gameinfo .n_tab a.on em {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: url(https://3on3.fsgames.com/images/en/bg_tab_mob.png) 0 0 no-repeat;
        background-size: auto 52px;
    }

    .gameinfo .item1 {
        overflow: hidden;
        position: relative;
        height: 500px;
        border-top: 4px solid #121212;
        background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/gameinfo_mainbackground.jpg) no-repeat center center;
        background-size: cover;
    }

    .gameinfo .item1 .i_txt {
        padding-top: 47px;
        margin-top: 200px;
        text-align: center;
    }

    .gameinfo .item1 .i_txt img {
        width: 300px;

    }

    .gameinfo .item2 {
        height: 177px;
        background: #121212;
    }

    .gameinfo .item2 .i_txt {
        width: 100%;
        height: 177px;
        background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/txt_info2_mo.png) no-repeat center center;
        background-size: auto 100px;
    }

    .gameinfo .item3 {
        position: relative;
        padding: 40px 0;
        background: url(http://3on3.fsgames.com/images/en/guide/bg_info3.jpg) no-repeat 0 center;
        background-size: cover;
    }

    .gameinfo .item3 .i_txt {
        padding: 0 5%;
    }

    .gameinfo .item3 .i_txt img {
        max-width: 547px;
        width: 94%;
    }

    .gameinfo .item4 {
        position: relative;
        padding: 40px 0;
        border-top: 4px solid #121212;
        background: url(http://3on3.fsgames.com/images/en/guide/bg_info4.jpg) no-repeat right center;
        background-size: cover;
    }

    .gameinfo .item4 .i_txt {
        padding: 0 5%;
    }

    .gameinfo .item4 .i_txt img {
        max-width: 535px;
        width: 92%;
    }

    #btn_top {
        right: 15px;
        bottom: 15px;
    }

    #btn_top.bottom {
        bottom: 175px;
    }

    #btn_top img {
        width: 27px;
    }

    /*
.char_detail .c_skill {max-width:1240px; margin:0 auto; padding:60px 0; overflow:hidden;}
.char_detail .c_skill div.item_list  {margin-left:-20px; overflow:hidden;}
.char_detail .c_skill div.item_list  a {display:block; float:left; width:232px; margin:0 0 20px 20px;}
.char_detail .c_skill h4 {height:66px;}
*/



}

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


    .inview {
        padding-top: 0;
        -webkit-transition: all 0.5s ease;
    }

    .inview.inviewActive {
        padding-top: 0;
        opacity: 1;
    }

    .main {
        width: 100%;
        overflow: hidden;
    }

    .header {
        position: relative;
        height: 70px;
        border-bottom: 3px solid #b2b2b2;
    }

    /*.main .header {border-bottom-color:#121212}*/
    .header .header_wrap {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        height:100%;
    }

    .header .h_hamburger {
        display: none;
    }

    .header h1 {
        float: left;
        width: 50px;
    }

    .header h1 a {
        line-height: 66px;
        cursor: auto;
    }

    .header .nav {
        float: left;
        text-transform: uppercase;
    }

    .header .nav ul {
        width: 1190px;
        height: 70px;
    }

    .header .nav ul li {
        position: relative;
        float: left;

    }

    .header .nav ul .menu_right {
        position: relative;
        float: right;

    }
    .header .nav ul li.menu_serach{
        width:70px;
        height:100%;

    }
    .header .nav ul li.menu_serach a{
                display: flex;
    background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2024_new/image/search_icon.png') center no-repeat;
    justify-content: center;
        align-items: center;
        width:100%;
        height:100%;
    }
    .header .nav ul li.menu_serach a:hover{
        background: url('https://common-cdn-api.s3.ap-northeast-1.amazonaws.com/3on3/2024_new/image/search_icon_hover.png') center no-repeat;
    }
    .header .nav ul li span {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 0;
        background: #faba01;
        z-index: 0;
        -webkit-transition: all 0.1s ease-out 0.2s;
        -moz-transition: all 0.1s ease-out 0.2s;
        -o-transition: all 0.1s ease-out 0.2s;
        -ms-transition: all 0.1s ease-out 0.2s;
        transition: all 0.1s ease-out 0.2s;
    }

    .header .nav ul li:hover .n_item {
        color: #121212 !important;
        font-weight: 600;
        font-size: 14px !important;
    }

    .header .nav ul li:hover span {
        height: 71px;
        -webkit-transition: all 0.1s ease-in 0s;
        -moz-transition: all 0.1s ease-in 0s;
        -o-transition: all 0.1s ease-in 0s;
        -ms-transition: all 0.1s ease-in 0s;
        transition: all 0.1s ease-in 0s;
    }

    .header .nav ul li:hover .n_sub {
        max-height: 320px;
        -webkit-transition: all 0.2s ease-out 0.1s;
        -moz-transition: all 0.2s ease-out 0.1s;
        -o-transition: all 0.2s ease-out 0.1s;
        -ms-transition: all 0.2s ease-out 0.1s;
        transition: all 0.2s ease-out 0.1s;
    }

    .header .nav ul .n_item {
        position: relative;
        display: block;
        height: 70px;
        line-height: 70px;
        font-size: 14px !important;
        color: #fff;
        z-index: 1;
        text-align: center;
        font-weight: 500;
    }

    .header .nav ul .n_item.n_1 {
        width: 95px
    }

    .header .nav ul .n_item.n_2 {
        width: 105px;
    }

    .header .nav ul .n_item.n_3 {
        width: 110px;
    }

    .header .nav ul .n_item.n_4 {
        width: 75px;
    }

    .header .nav ul .n_item.n_5 {
        width: 70px;
    }

    .header .nav ul .n_item.n_6 {
        width: 90px;
    }

    .header .nav ul .n_item.n_7 {
        width: 95px;
    }

    .header .nav ul .n_item.n_8 {
        width: 115px;
    }

    .header .nav ul .n_sub {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 70px;
        width: 200px;
        max-height: 0;
        z-index: 10;
        -webkit-transition: all 0.2s ease-in 0s;
        -moz-transition: all 0.2s ease-in 0s;
        -o-transition: all 0.2s ease-in 0s;
        -ms-transition: all 0.2s ease-in 0s;
        transition: all 0.2s ease-in 0s;
    }

    .header .nav ul .n_sub a {
        display: block;
        width: 220px;
        height: 42px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        border-top: 1px solid #323232;
        color: #b2b2b2;
        background: #121212 url(https://3on3.fsgames.com/images/en/bg_gnb.png) no-repeat right bottom;
    }

    .header .nav ul .n_sub a:first-child {
        border-top: 3px solid #faba01;
    }

    .header .nav ul .n_sub a:hover {
        color: #faba01;
        background-position: right 0;
    }

    .header .nav ul li.on span {
        height: 71px !important;
    }

    .header .nav ul li.on .n_item {
        color: #121212 !important;
        font-weight: 700;
    }

    .header .h_language {
        position: absolute;
        right: 144px;
        top: 0;
        width: 180px;
        z-index: 10;
    }

    .header .h_language img {
        margin-right: 3px;
    }

    .header .h_language h4 {
        float: right;
        height: 70px;
        width: 120px;
        line-height: 70px;
        color: #faba01;
        cursor: pointer;
        background: url(https://3on3.fsgames.com/images/en/bg_lang.png) no-repeat right 32px;
        font-size: 14px;
    }

    .header .h_language h4 img {
        width: 17px;
        margin-top: -1px;
        margin-left: 8px;
    }

    .header .h_language div {
        clear: both;
        display: none;
        margin-left: 48px;
        width: 180px;
        border-top: 2px solid #828282;
        background: #121212;
    }

    .header .h_language div a {
        display: block;
        padding-left: 20px;
        line-height: 34px;
        border-top: 1px solid #323232;
        color: #b2b2b2;
    }

    .header .h_language div a:hover {
        background: #323232;
        color: #e2e2e2;
    }

    .header .h_language div img {
        width: 17px;
    }

    .header .h_language:hover div {
        display: block;
    }

    .header .h_language:hover h4 {
        background-image: url(https://3on3.fsgames.com/images/en/bg_lang2.png);
    }

    .header .h_sns {
        position: absolute;
        right: 0;
        top: 15px;
        font-size: 0;
        line-height: 0;
        text-align: right;
    }

    .header .h_sns img {
        height: 18px;
    }

    .header .h_sns a {
        display: inline-block;
        margin-left: 5px;
        padding: 10px;
    }

    .header .h_sns a:first-child {
        margin-left: 0;
    }

    .contents {
        padding-top: 30px;
        min-height: 600px;
        opacity: 1;
    }

    .char_contents {
        padding-top: 0 !important;
    }

    .footer {
        min-height: 180px;
    }

    .footer a {
        line-height: 50px;
    }

    .footer span {
        position: absolute;
        right: 0;
        line-height: 50px;
        top: 0;
    }

    .footer .f_joycity {
        position: absolute;
        right: 0;
        top: 70px;
    }

    .footer .f_ps4 {
        position: absolute;
        left: 0;
        top: 70px;
    }

    .main_visual {
        position: relative;
        width: 100%;
        height: 710px;
        margin-top: -3px;
    }

    .main_visual .slick-arrow {
        position: absolute;
        top: 50%;
        margin-top: -37px;
        z-index: 5;
        width: 60px;
        height: 74px;
        font-size: 0;
        line-height: 0;
        text-indent: -999px;
    }

    .main_visual .slick-prev {
        left: 0;
        background: url(https://3on3.fsgames.com/images/en/btn_main_prev.png) no-repeat 0 0;
    }

    .main_visual .slick-prev:hover {
        background: url(https://3on3.fsgames.com/images/en/btn_main_prev_on.png) no-repeat 0 0;
    }

    .main_visual .slick-next {
        right: 0;
        background: url(https://3on3.fsgames.com/images/en/btn_main_next.png) no-repeat 0 0;
    }

    .main_visual .slick-next:hover {
        background: url(https://3on3.fsgames.com/images/en/btn_main_next_on.png) no-repeat 0 0;
    }

    .main_visual .item {
        height: 710px;
    }

    .main_visual .m_tit {
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 1;
        margin-left: -185px;
        text-align: center;
    }

    .main_visual .m_tit h3 {
        padding: 60px 0 70px;
    }

    .main_visual .m_tit button {
        width: 112px;
        height: 112px;
    }

    .main_visual .m_tit button:hover {
        transform: scale(1.05);
    }

    .main_visual .m_tit button img {
        width: 100%;
    }

    .main_news div {}

    .main_news a {
        display: block;
        padding: 42px 0 48px;
        max-width: 1240px;
        margin: 0 auto;
    }

    .main_news em {
        display: inline-block;
        height: 30px;
        line-height: 23px;
        padding: 0 10px 0 8px;
        background: url(https://3on3.fsgames.com/images/en/bg_event.png) no-repeat 0 0;
        font-size: 12px;
        font-weight: 300;
        color: #fff;
    }

    .main_news strong {
        height: 48px;
        font-size: 40px;
    }

    .main_character {
        width: 100%;
        padding: 80px 0 130px;
        height: auto;
    }

    .main_character h4 {
        max-width: 1240px;
        margin: 0 auto;
        height: 76px;
    }

    .main_character h4 img {
        margin-right: 13px;
    }

    .main_character .m_slide {
        max-width: 1240px;
        margin: 0 auto;
        overflow: hidden;
    }

    .main_character .m_char_box {}

    .main_character .item {}

    .main_character .item a {
        position: relative;
    }

    .main_character .item a,
    .main_character .item img {
        display: block;
        width: 93.23671%;
        max-width: 386px;
    }

    .main_character .item a span {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        width: 93.23671%;
        max-width: 386px;
    }

    .main_character .m_slide button {
        display: none !important;
    }

    .main_character a:hover .m_more {
        background: #323232;
    }

    .main_character .slick-dots {
        clear: both;
        width: 100%;
        padding-top: 30px;
        text-align: center;
    }

    .main_character .slick-dots li {
        display: inline-block;
        width: 24px;
        height: 26px;
        margin: 0 10px;
        font-size: 0;
        line-height: 0;
        text-indent: -999px;
        background: url(https://3on3.fsgames.com/images/en/bg_dot.png) no-repeat 0 0;
        background-size: cover;
    }

    .main_character .slick-dots li.slick-active {
        background: url(https://3on3.fsgames.com/images/en/bg_dot_on.png) no-repeat 0 0;
        background-size: cover;
    }

    .main_info {
        position: relative;
        background: #fff;
        width: 100%;
    }

    .main_info .m_info {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        padding: 80px 0;
    }

    .main_info p {
        width: 520px;
        padding: 12px 0 25px;
        font-size: 15px;
        color: #828282;
    }

    .main_info .item_img {
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: -130px;
        width: 838px;
        height: 476px;
        background: url(https://3on3.fsgames.com/images/en/img_info.png) no-repeat 0 0;
    }

    .main_media {
        padding: 80px 0 100px;
    }

    .main_media .m_media {
        max-width: 1240px;
        margin: 0 auto;
    }

    .main_media h4 a:hover .m_more {
        background: #323232;
    }

    .main_media h4 {
        height: 68px;
    }

    .main_media h4 img {
        margin-right: 13px;
    }

    .media_list {
        overflow: hidden;
        width: 1240px;
        margin: 0 auto;
        padding-bottom: 200px;
    }

    .media_list .item_title {
        padding: 60px 0 20px;
    }

    .media_list .item_title h3 {
        height: 85px;
        border-bottom: 4px solid #121212;
    }

    .media_list .item_title h3 img {
        height: auto;
    }

    .media_list .item_title .n_tab {
        position: absolute;
        right: 0;
        top: 60px;
        text-align: right;
    }

    .media_list .item_title .n_tab a {
        position: relative;
        display: inline-block;
        margin-left: 2px;
        height: 48px;
        overflow: hidden;
        background: #828282;
        box-sizing: border-box;
    }

    .media_list .item_title .n_tab a.n_tab1,
    .media_list .item_title .n_tab a.n_tab1 img {
        width: 150px;
    }

    .media_list .item_title .n_tab a.n_tab2,
    .media_list .item_title .n_tab a.n_tab2 img {
        width: 168px;
    }

    .media_list .item_title .n_tab a.n_tab3,
    .media_list .item_title .n_tab a.n_tab3 img {
        width: 168px;
    }

    .media_list .item_title .n_tab a.n_tab4,
    .media_list .item_title .n_tab a.n_tab4 img {
        width: 199px;
    }

    .media_list .item_title .n_tab a.n_tab5,
    .media_list .item_title .n_tab a.n_tab5 img {
        width: 98px;
    }

    .media_list .item_title .n_tab a img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .media_list .item_title .n_tab a em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 48px;
        background: #ffa507;
    }

    .media_list .item_title .n_tab a.on em,
    .media_list .item_title .n_tab a:hover em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #ffa507;
    }

    #media_con {
        width: 1260px;
        margin-left: -17px;
        text-align: left;
    }

    .news_list {
        padding-bottom: 200px;
    }

    .news_list .item_title {
        padding: 60px 0 0 0 !important;
    }

    .news_list .item_title h3 {
        height: 85px;
    }

    .news_list .item_title h3 img {
        height: auto;
    }

    .news_list .item_title .n_tab {
        position: absolute;
        right: 0;
        top: 60px;
        text-align: right;
    }

    .news_list .item_title .n_tab a {
        position: relative;
        display: inline-block;
        margin-left: 2px;
        height: 48px;
        overflow: hidden;
        background: #828282;
        box-sizing: border-box;
    }

    .news_list .item_title .n_tab a.n_tab1,
    .news_list .item_title .n_tab a.n_tab1 img {
        width: 208px;
    }

    .news_list .item_title .n_tab a.n_tab2,
    .news_list .item_title .n_tab a.n_tab2 img {
        width: 187px;
    }

    .news_list .item_title .n_tab a.n_tab3,
    .news_list .item_title .n_tab a.n_tab3 img {
        width: 98px;
    }

    .news_list .item_title .n_tab a.n_tab4,
    .news_list .item_title .n_tab a.n_tab4 img {
        width: 140px;
    }

    .news_list .item_title .n_tab a.n_tab5,
    .news_list .item_title .n_tab a.n_tab5 img {
        width: 142px;
    }

    .news_list .item_title .n_tab a img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .news_list .item_title .n_tab a em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 48px;
        background: #ffa507;
    }

    .news_list .item_title .n_tab a.on em,
    .news_list .item_title .n_tab a:hover em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #ffa507;
    }

    .news_list section {
        position: relative;
        margin-bottom: 50px;
        padding-top: 30px;
    }

    .news_list .item {
        position: relative;
    }

    .news_list .item:first-child a {
        border-top: 4px solid #121212;
    }

    .news_list .item a.i_title {
        padding: 27px 0px 40px;
    }

    .news_list .item a.i_title strong {
        font-size: 40px;
        padding-right: 120px;
        font-weight: 700;
    }

    .news_list .item a.i_title span {
        font-size: 14px;
    }

    .news_list .item a.i_title em {
        right: 15px;
        top: 50%;
        margin-top: -21px;
        width: 42px;
        height: 42px;
        background: url(https://3on3.fsgames.com/images/en/ico_more2.png) no-repeat 0 0;
        background-size: 36px auto;
    }

    .news_list .item .i_sns {
        padding-left: 0;
    }

    .news_list .item .i_sns a {
        width: 42px;
        height: 42px;
        line-height: 42px;
    }

    .news_list .item .i_sns a img {
        height: 21px;
    }

    .news_list .item .i_sns a:first-child {
        border-right: 0;
    }

    .news_list .item .i_contents {
        padding: 30px 0 60px !important;
        color: #b2b2b2;
        font-size: 14px;
        font-family: Verdana;
    }

    .news_list .item.on {
        border-top: 4px solid #faba01;
        background: #121212;
    }

    .news_list .item.on .i_box {
        display: block;
    }

    .news_list .item.on .i_title {
        color: #fff;
        border-bottom-color: #323232;
    }

    .news_list .item_more {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0;
    }

    .news_list .item_more button {
        height: 50px;
        font-size: 22px;
    }

    .news_list .item_more button img {
        height: auto;
    }

















    .character_list {
        position: relative;
        clear: both;
        padding: 60px 0 100px;
        overflow: hidden;
    }

    .character_list h3 {
        height: 90px;
        margin-bottom: 3.5%;
    }

    .character_list .item {
        position: relative;
        float: left;
        width: 31%;
        margin-left: 3.5%;
        margin-bottom: 3.5%;
        font-size: 0;
        ilne-height: 0;
    }

    .character_list .item a {
        position: relative;
        display: block;
        font-size: 0;
        ilne-height: 0;
    }

    .character_list .item.first {
        margin-left: 0;
    }

    .character_list .item img {
        display: block;
        width: 100%;
    }

    .character_list .item_more {
        clear: both;
        max-width: 1240px;
        margin: 0 auto;
        padding: 40px 0 0;
    }

    .character_list .item_more button {
        height: 50px;
        font-size: 22px;
    }

    .character_list .item_more button img {
        height: auto;
    }

    .character_list .n_tab {
        position: absolute;
        right: 0;
        top: 60px;
        text-align: right;
    }

    .character_list .n_tab a {
        position: relative;
        display: inline-block;
        margin-left: 2px;
        height: 48px;
        overflow: hidden;
        background: #828282;
        box-sizing: border-box;
    }

    .character_list .n_tab a.n_tab1,
    .character_list .n_tab a.n_tab1 img {
        width: 150px;
    }

    .character_list .n_tab a.n_tab2,
    .character_list .n_tab a.n_tab2 img {
        width: 168px;
    }

    .character_list .n_tab a.n_tab3,
    .character_list .n_tab a.n_tab3 img {
        width: 168px;
    }

    .character_list .n_tab a.n_tab4,
    .character_list .n_tab a.n_tab4 img {
        width: 199px;
    }

    .character_list .n_tab a.n_tab5,
    .character_list .n_tab a.n_tab5 img {
        width: 98px;
    }

    .character_list .n_tab a img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .character_list .n_tab a em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 48px;
        background: #ffa507;
    }

    .character_list .n_tab a.on em,
    .character_list .n_tab a:hover em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #ffa507;
    }

    .char_detail {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .char_detail .item_char {
        padding-left: 30px;
        -webkit-animation: char-slide 0.5s forwards;
        animation: char-slide 0.5s forwards;
    }

    .char_detail.char_christa .item_char {
        left: 50%;
        width: 710px;
        height: 832px;
        margin-left: -20px;
        background: url(http://3on3.fsgames.com/images/en/char/christa/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_professor .item_char {
        left: 50%;
        width: 890px;
        height: 812px;
        margin-left: -145px;
        background: url(http://3on3.fsgames.com/images/en/char/professor/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_luther .item_char {
        left: 50%;
        width: 659px;
        height: 843px;
        margin-left: -55px;
        background: url(http://3on3.fsgames.com/images/en/char/luther/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_bigdog .item_char {
        left: 50%;
        width: 812px;
        height: 842px;
        margin-left: -150px;
        background: url(http://3on3.fsgames.com/images/en/char/bigdog/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_lee .item_char {
        left: 50%;
        width: 1087px;
        height: 849px;
        margin-left: -300px;
        background: url(http://3on3.fsgames.com/images/en/char/lee/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_clarke .item_char {
        left: 50%;
        width: 693px;
        height: 837px;
        margin-left: -36px;
        background: url(http://3on3.fsgames.com/images/en/char/clarke/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_murdock .item_char {
        left: 50%;
        width: 986px;
        height: 872px;
        margin-left: -100px;
        background: url(http://3on3.fsgames.com/images/en/char/murdock/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_lulu .item_char {
        left: 50%;
        width: 765px;
        height: 872px;
        margin-left: -115px;
        background: url(http://3on3.fsgames.com/images/en/char/lulu/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_amanda .item_char {
        left: 50%;
        width: 531px;
        height: 816px;
        margin-left: 7px;
        background: url(http://3on3.fsgames.com/images/en/char/amanda/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_joey .item_char {
        left: 50%;
        width: 1152px;
        height: 872px;
        margin-left: -228px;
        background: url(http://3on3.fsgames.com/images/en/char/joey/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_william .item_char {
        left: 50%;
        width: 664px;
        height: 841px;
        margin-left: -56px;
        background: url(http://3on3.fsgames.com/images/en/char/william/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_helena .item_char {
        left: 50%;
        width: 709px;
        height: 852px;
        margin-left: -106px;
        background: url(http://3on3.fsgames.com/images/en/char/helena/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_cindy .item_char {
        left: 50%;
        width: 513px;
        height: 843px;
        margin-left: -9px;
        background: url(http://3on3.fsgames.com/images/en/char/cindy/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_pedro .item_char {
        left: 50%;
        width: 917px;
        height: 824px;
        margin-left: -220px;
        background: url(http://3on3.fsgames.com/images/en/char/pedro/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_kim .item_char {
        left: 50%;
        width: 1014px;
        height: 821px;
        margin-left: -223px;
        background: url(http://3on3.fsgames.com/images/en/char/kim/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_carolina .item_char {
        left: 50%;
        width: 860px;
        height: 831px;
        margin-left: -108px;
        background: url(http://3on3.fsgames.com/images/en/char/carolina/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_fred .item_char {
        left: 50%;
        width: 1010px;
        height: 832px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/fred/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_rin .item_char {
        left: 50%;
        width: 1010px;
        height: 832px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/rin/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_carter .item_char {
        left: 50%;
        width: 1010px;
        height: 829px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/carter/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_jason .item_char {
        left: 50%;
        width: 1010px;
        height: 824px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/jason/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_max .item_char {
        left: 50%;
        width: 1010px;
        height: 824px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/max/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_rebecca .item_char {
        left: 50%;
        width: 1010px;
        height: 824px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/rebecca/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_littlefox .item_char {
        left: 50%;
        width: 1085px;
        height: 807px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/littlefox/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_jimmy .item_char {
        left: 50%;
        width: 1085px;
        height: 807px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/jimmy/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_fei .item_char {
        left: 50%;
        width: 1085px;
        height: 807px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/fei/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_walker .item_char {
        left: 50%;
        width: 1085px;
        height: 807px;
        margin-left: -296px;
        background: url(http://3on3.fsgames.com/images/en/char/walker/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_saru .item_char {
        left: 50%;
        width: 1020px;
        height: 826px;
        margin-left: -446px;
        background: url(http://3on3.fsgames.com/images/en/char/saru/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_ginger .item_char {
        left: 50%;
        width: 1020px;
        height: 826px;
        margin-left: -446px;
        background: url(http://3on3.fsgames.com/images/en/char/ginger/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_bigjoe .item_char {
        left: 50%;
        width: 1019px;
        height: 805px;
        margin-left: -369px;
        background: url(http://3on3.fsgames.com/images/en/char/bigjoe/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_nadia .item_char {
        left: 50%;
        width: 1019px;
        height: 805px;
        margin-left: -369px;
        background: url(http://3on3.fsgames.com/images/en/char/nadia/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_deacon .item_char {
        left: 50%;
        width: 1019px;
        height: 805px;
        margin-left: -369px;
        background: url(http://3on3.fsgames.com/images/en/char/deacon/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    .char_detail.char_mika .item_char {
        left: 50%;
        width: 1019px;
        height: 805px;
        margin-left: -369px;
        background: url(http://3on3.fsgames.com/images/en/char/mika/char.jpg) no-repeat right 0;
        z-index: 0;
    }

    @-webkit-keyframes char-slide {
        100% {
            padding-left: 0;
        }
    }

    @keyframes char-slide {
        100% {
            padding-left: 0;
        }
    }

    .char_detail .item_char {
        position: absolute;
        bottom: 0;
        z-index: 0;
    }

    .char_detail .c_header {
        position: relative;
        width: 100%;
        height: 872px;
        overflow: hidden;
    }

    .char_detail .c_header .item_wrap {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        padding-top: 80px;
        z-index: 1;
    }

    .char_detail .c_header h3 {
        padding: 40px 0 50px;
    }

    .char_detail .c_header .i_back {}

    .char_detail .c_header h3 {}

    .char_detail .c_header ul.i_info {
        width: 440px;
        height: 245px;
    }

    .char_detail .c_header ul.i_info li {
        position: relative;
        padding-bottom: 20px;
        font-size: 16px;
        padding-left: 105px;
    }

    .char_detail .c_header ul.i_info strong {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 3px;
        font-weight: 700;
        color: #121212;
    }

    .char_detail .c_header ul.i_info span {
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
    }

    .char_detail .c_header .thumbs {
        position: relative;
        width: 420px;
        overflow: hidden;
    }

    .char_detail .c_header .thumbs .slick-slide {
        cursor: pointer;
    }

    .char_detail .c_header .thumbs .item {
        width: 420px;
        height: 200px;
        overflow: hidden;
    }

    .char_detail .c_header .thumbs .slick-list {
        width: 312px;
        height: 200px;
        margin: 0 auto;
        overflow: hidden;
    }

    .char_detail .c_header .thumbs .slick-list div {
        position: relative;
        float: left;
        width: 312px;
        font-size: 0;
        line-height: 0;
    }

    .char_detail .c_header .thumbs .item .i_img {
        width: 306px;
        height: 194px;
        border: 3px solid #fff;
    }

    .char_detail .c_header .thumbs .item .i_btn {
        position: absolute;
        right: 3px;
        bottom: 3px;
    }

    .char_detail .c_header .thumbs .slick-prev {
        left: 0;
        background: url(https://3on3.fsgames.com/images/en/char/btn_prev.png) no-repeat 0 0;
    }

    .char_detail .c_header .thumbs .slick-prev:hover {
        background: url(https://3on3.fsgames.com/images/en/char/btn_prev_on.png) no-repeat 0 0;
    }

    .char_detail .c_header .thumbs .slick-next {
        right: 0;
        background: url(https://3on3.fsgames.com/images/en/char/btn_next.png) no-repeat 0 0;
    }

    .char_detail .c_header .thumbs .slick-next:hover {
        background: url(https://3on3.fsgames.com/images/en/char/btn_next_on.png) no-repeat 0 0;
    }

    .char_detail .c_header .thumbs .slick-arrow {
        position: absolute;
        top: 80px;
        width: 24px;
        height: 40px;
        font-size: 0;
        line-height: 0;
        text-indent: -8999px;
    }

    .char_detail .c_header .thumbs .item_paging {
        padding-top: 3px;
        text-align: center;
        z-index: 1;
        color: #fff;
        font-size: 22px;
        font-weight: 700;
    }

    .char_detail .c_story {
        clear: both;
        width: 100%;
        background: #121212;
    }

    .char_detail .c_story .item_wrap {
        position: relative;
        width: 100%;
        max-width: 1240px;
        padding: 70px 0 70px;
        margin: 0 auto;
        background: url(https://3on3.fsgames.com/images/en/char/bg_story.png) repeat-y right 0;
    }

    .char_detail .c_story h4 {
        height: 40px;
        color: #fff;
        font-weight: 700;
        font-size: 22px;
    }

    .char_detail .c_story p {
        color: #b2b2b2;
        font-size: 14px;
        padding-right: 415px;
    }

    .char_detail .c_story div {
        position: absolute;
        right: 0;
        padding-right: 30px;
        top: 50%;
        margin-top: -100px;
    }

    .char_detail .c_skill {
        max-width: 1240px;
        margin: 0 auto;
        padding: 60px 0;
        overflow: hidden;
    }

    .char_detail .c_skill div.item_list {
        margin-left: -20px;
        overflow: hidden;
    }

    .char_detail .c_skill div.item_list a {
        display: block;
        float: left;
        width: 232px;
        margin: 0 0 20px 20px;
    }

    .char_detail .c_skill h4 {
        height: 66px;
    }

    .char_layer {
        position: absolute;
        left: 0;
        right: 0;
        top: 153px;
        z-index: 9999;
        text-align: center;
    }

    .char_layer .i_img {
        position: relative;
        margin: 0 auto;
        max-width: 1410px;
    }

    .char_layer .i_arrow {
        display: block;
        position: absolute;
        top: 50%;
        width: 47px;
        height: 88px;
        margin-top: -44px;
    }

    .char_layer .i_prev {
        left: 0;
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_prev.png) no-repeat 0 0;
    }

    .char_layer .i_prev:hover {
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_prev_on.png) no-repeat 0 0;
    }

    .char_layer .i_next {
        right: 0;
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_next.png) no-repeat 0 0;
    }

    .char_layer .i_next:hover {
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_next_on.png) no-repeat 0 0;
    }

    .char_layer .i_close {
        display: block;
        position: absolute;
        left: 94%;
        top: 0;
        width: 70px;
        height: 70px;
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
    }

    .char_layer .i_close:hover {
        background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    }

    .char_layer .i_img .img {
        width: 88%;
    }

    .coupon .item_title {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        padding: 60px 0 40px !important;
    }

    .coupon .item_title h3 {
        height: 90px;
        border-bottom: 4px solid #121212;
    }

    .coupon .item_wrap {
        text-align: center;
    }

    .coupon .item_wrap .coupon_sub_title {
        padding: 80px 0 60px;
    }

    .coupon .item_wrap .psn_login button {
        display: inline-block;
        width: 350px;
        height: 98px;
        margin: 0 auto;
        font-size: 38px;
        color: #fff;
        background: #fff;
    }

    .coupon .item_wrap .psn_login button strong {
        font-weight: 600;
    }

    .coupon .item_wrap .psn_login button.already_btn {
        background: #ffa507;
    }

    .coupon .item_wrap .input_con {
        position: relative;
        width: 76%;
        max-width: 932px;
        margin: 0 auto;
        padding-right: 290px;
        box-sizing: border-box;
    }

    .coupon .item_wrap .input_con input {
        width: 100%;
        height: 88px;
        margin-top: 50px;
        padding-left: 25px;
        border: 3px solid #323232;
        font-size: 28px;
        color: #828282;
        line-height: 88px;
        background: #fff;
        box-sizing: border-box;
    }

    .coupon .item_wrap .input_con button {
        position: absolute;
        top: 50px;
        right: 0;
        width: 280px;
        height: 88px;
        font-size: 38px;
        font-weight: 600;
        color: #fff;
        background: #121212;
    }

    .coupon .item_wrap .warning_txt {
        margin-top: 10px;
        font-size: 18px;
        color: #c71010;
        text-align: left;
    }

    .coupon .item_wrap dl.caption {
        position: relative;
        width: 100%;
        max-width: 1240px;
        margin: 80px auto;
        padding: 45px 45px 45px 210px;
        background: #e2e2e2;
        box-sizing: border-box;
    }

    .coupon .item_wrap dl.caption dt {
        position: absolute;
        top: 45px;
        left: 45px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 28px;
        color: #323232;
        text-align: left;
    }

    .coupon .item_wrap dl.caption dd {
        margin-top: 20px;
        font-family: Verdana;
        font-size: 16px;
        color: #323232;
        text-align: left;
    }

    .gameinfo .item_title {
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        padding: 60px 0 40px !important;
    }

    .gameinfo .item_title h3 img {
        height: auto;
    }

    .gameinfo .n_tab {
        position: absolute;
        right: 0;
        top: 60px;
        text-align: right;
    }

    .gameinfo .n_tab a {
        position: relative;
        display: inline-block;
        margin-left: 2px;
        height: 48px;
        overflow: hidden;
        background: #828282;
        box-sizing: border-box;
    }

    .gameinfo .n_tab a.n_tab1,
    .gameinfo .n_tab a.n_tab1 img {
        width: 150px;
    }

    .gameinfo .n_tab a.n_tab2,
    .gameinfo .n_tab a.n_tab2 img {
        width: 168px;
    }

    .gameinfo .n_tab a.n_tab3,
    .gameinfo .n_tab a.n_tab3 img {
        width: 168px;
    }

    .gameinfo .n_tab a.n_tab4,
    .gameinfo .n_tab a.n_tab4 img {
        width: 199px;
    }

    .gameinfo .n_tab a.n_tab5,
    .gameinfo .n_tab a.n_tab5 img {
        width: 98px;
    }

    .gameinfo .n_tab a img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .gameinfo .n_tab a em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 48px;
        background: #ffa507;
    }

    .gameinfo .n_tab a.on em,
    .gameinfo .n_tab a:hover em {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #ffa507;
    }

    .gameinfo .i_wrap {
        max-width: 1240px;
        margin: 0 auto;
    }

    .gameinfo .item1 {
        overflow: hidden;
        position: relative;
        height: 1000px;
        border-top: 4px solid #121212;
        background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/gameinfo_mainbackground.jpg) no-repeat center center;
        background-size: cover;
    }

    .gameinfo .item1 .i_txt {
        padding-top: 154px;
        text-align: center;
        margin-top: 200px;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .gameinfo .item1 .i_char1 {
        position: absolute;
        right: 50%;
        bottom: 0;
        margin-right: 430px;
        display: block;
        width: 732px;
        height: 713px;
        background: url(https://3on3.fsgames.com/images/en/guide/char_info1.png) no-repeat 0 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .gameinfo .item1 .i_char2 {
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: 330px;
        display: block;
        width: 832px;
        height: 633px;
        background: url(http://3on3.fsgames.com/images/en/guide/char_info1_1.png) no-repeat 0 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .gameinfo .item2 {
        height: 260px;
        background: url(http://3on3.fsgames.com/images/en/guide/bg_info2.jpg) repeat-x center center;
    }

    .gameinfo .item2 .i_txt {
        height: 260px;
        background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/txt_info2.png) no-repeat center center;
    }

    .gameinfo .item3 {
        overflow: hidden;
        position: relative;
        height: 756px;
        background: url(http://3on3.fsgames.com/images/en/guide/bg_info3.jpg) no-repeat center center;
        background-size: cover;
    }

    .gameinfo .item3 .i_txt {
        padding-top: 100px;
    }

    .gameinfo .item3 .i_char {
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: 105px;
        display: block;
        width: 982px;
        height: 702px;
        background: url(http://3on3.fsgames.com/images/en/guide/char_info3.png) no-repeat 0 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .gameinfo .item4 {
        overflow: hidden;
        position: relative;
        height: 756px;
        border-top: 4px solid #121212;
        background: url(http://3on3.fsgames.com/images/en/guide/bg_info4.jpg) no-repeat center center;
        background-size: cover;
    }

    .gameinfo .item4 .i_txt {
        width: 100%;
        padding-top: 134px;
        text-align: right;
        margin-left: 200px;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .gameinfo .item4 .i_char {
        position: absolute;
        right: 50%;
        bottom: 0;
        margin-right: 85px;
        display: block;
        width: 1009px;
        height: 711px;
        background: url(http://3on3.fsgames.com/images/en/guide/char_info4.png) no-repeat 0 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }
}

/*add20210205*/

.n_l {
    position: absolute;
    left: 350px;
    top: 60px;
    text-align: left;
}


.n_l a:hover {
    background: #f8a50b;
}

.n_l a.on {
    background: #f8a50b;
}

.n_l a {
    position: relative;
    display: inline-block;
    top: 12px;
    height: 36px;
    overflow: hidden;
    background: #828282;
    box-sizing: border-box;
    transition: all ease-in-out 0.2s;
}


.item1 .bg_pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/bg_main_pattern.png') left top repeat;
}

.section_guide {
    overflow: hidden;
    position: relative;
    /* top: 86px; */
    height: 0;
    display: flex;
    padding-bottom: 56.26%;
    justify-content: center;
    align-items: center;
}

.section_guide .text_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
}

.section_guide .text_wrap ul li {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: #252628;


}

.section_guide .bg_pattern {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/bg_main_pattern.png') left top repeat;
}




* {
    box-sizing: border-box;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#vidtop-content {
    top: 0;
    color: #fff;
}

.section_guide .text_wrap .title img {
    width: 100%;
}


.section_guide .area {
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 100;
}

.section_guide .area a {
    width: 100%;

}

.section_guide .area a img {
    width: 100%;
    transition: all ease-in-out 0.3s;
    box-shadow: 0 0 0 6px #000 inset;
}

.section_guide .area a img:hover {
    background-color: #ffbf00;
    box-shadow: 0 0 0 12px #fff inset;
}


.section_guide .area .ocean {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.section_guide .area .ocean .wave {
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/wave.png) repeat-x;
    position: absolute;
    top: -150px;
    width: 6400px;
    height: 198px;
    animation: wave 2s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
    z-index: -1;
}

.section_guide .area .ocean .wave:nth-of-type(2) {
    top: -150px;
    animation: wave 1.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}

.bg_layer {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.9;
    z-index: 10;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.movie_layer {
    display: none;
    z-index: 10;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 12;
    width: 80%;
    padding-bottom: 45.05%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}



.movie_layer .video {
    position: absolute;
    width: 100%;
    height: 100%;
}

.movie_layer .i_close {
    display: block;
    position: absolute;
    right: -70px;
    top: 0;
    width: 70px;
    height: 70px;
    background: url(http://joycityimg.joycity.com/fs2_console/3on3/en/char/btn_thumb_close.png) no-repeat 0 0;
}

.movie_layer .i_close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(http://joycityimg.joycity.com/fs2_console/3on3/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    background-size: cover;
}

.movie_layer .i_close:hover span {
    width: 100%;
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -25px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}



@media (min-aspect-ratio: 16/9) {
    .video-foreground {
        height: 300%;
        top: -100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    .video-foreground {
        width: 300%;
        left: -100%;
    }
}

/* 900px 이하일 때 */
@media all and (max-width:900px) {
    .section_guide .area {
        overflow: hidden;
        position: relative;
        width: 100px;
        height: 100px;
        z-index: 100;
    }

    .section_guide .text_wrap ul li {
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #252628;
    }

    .section_guide .text_wrap .title img {
        width: 90%;
    }

    .n_l {
        position: relative;
        left: 14px;
        top: 0px;
        margin-left: 0px;
        margin-top: 0px;
        text-align: left;
    }

    .n_l a {
        width: 60px;
        height: 22px;
    }

    .n_l a img {
        width: 60px;
        height: 22px;
    }

    .movie_layer .i_close {
        background-size: 36px;
    }

    .movie_layer .i_close span {
        background-size: 36px;
    }
}


/*add end*/


/*1240보다 클때*/
@media screen and (min-width: 1240px) {

    .main_character .item a,
    .main_character .item img,
    .main_character .item a span,
    .character_list .item a,
    .character_list .item img,
    .character_list .item a span {
        width: 386px;
    }

    .main_media div.m_item {
        width: 1248px;
    }
}


/*케릭터페이지*/
.section_new {
    overflow: hidden;
    position: relative;
    /* top: 86px; */
    height: 0;
    display: flex;
    padding-bottom: 56.26%;
    justify-content: center;
    align-items: center;
}

.section_new .text_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 5;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
}

.section_new .text_wrap .title img {
    width: 100%;
    height: auto;
    padding: 20px;
}

.section_new .text_wrap .btn_movie_play img {
    width: 100%;
    height: auto;
    padding: 20px;
}

.section_new .text_wrap .sub_title img {
    width: 100%;
    height: auto;
    padding: 20px;
}

.section_new .bg_pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/bg_main_pattern.png') left top repeat;
}


.section_new .text_wrap .btn_movie_play:hover img {
    transform: scale(1.05);
}

.section_new .text_wrap .sub_title {}


.gameinfo .item2_ch {
    overflow: hidden;
    position: relative;
    height: 480px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/chlist_bg.jpg) no-repeat center center;
    justify-content: center;
    align-items: center;
    background-size: cover;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 5;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    box-sizing: border-box;


}

.gameinfo .item2_ch .bgimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 480px;
}


.gameinfo .item2_ch .i_txt {
    margin-top: 30px;
    width: 100%;
    max-width: 664px;
}

.gameinfo .item2_ch .i_txt img {
    width: 100%;
}

.gameinfo .c_story {
    clear: both;
    width: 100%;
    background: #121212;
}

.gameinfo .c_story .item_wrap {
    position: relative;
    width: 100%;
    max-width: 1240px;
    padding: 30px 0 30px !important;
    margin: 0 auto;
    height: 300px;
}

.gameinfo .c_story h4 {
    height: 40px;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
}

.gameinfo .c_story p {
    color: #b2b2b2;
    font-size: 14px;
    padding-right: 415px;
    height: 77px;
}

.gameinfo .c_story div {
    position: absolute;
    right: 0;
    padding-right: 30px;
    top: 50%;
    margin-top: -120px;
}


/*스와이퍼*/
.swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.chr-view {
    border: 0;
    padding: 0;
    width: 100%;
    height: 707px;
}


.chr-view .swiper-wrapper .swiper-slide {
    overflow: hidden;
}

.gallery-thumbs {
    height: 350px;
    box-sizing: border-box;
    padding: 10px 0;
    max-width: 1080px;
    margin-top: 20px;


}

.gallery-thumbs .swiper-slide {
    width: 240px !important;
    height: 240px;
    opacity: 1;
    box-shadow: 0 0 0 0px #000 inset;
    transition: all ease-in-out 0.3s;
    /*overflow: visible;*/
}

.gallery-thumbs .swiper-slide p {
    color: #fff;
    font-size: 27px;
    font-weight: bold;
    margin-top: 255px;
}



.gallery-thumbs .swiper-slide:hover {
    box-shadow: 0 0 0 6px #ffa507 inset;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    box-shadow: 0 0 0 9px #ffa507 inset;
}

.swiper-button-prev,
.swiper-button-next {
    top: 57% !important;
}


.arrow_width .prev_btn {
    outline: none;
    cursor: pointer;
    width: 24px;
    height: 40px;
    position: absolute;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_prev.png) no-repeat 0 0;
    transition: all ease-in 0.1s;
}

.arrow_width .next_btn {
    outline: none;
    border: 0;
    cursor: pointer;
    width: 24px;
    height: 40px;
    position: absolute;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_next.png) no-repeat 0 0;
    transition: all ease-in 0.1s;
}

.arrow_width .prev_btn:hover {
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_prev_on.png) no-repeat 0 0;
}

.arrow_width .next_btn:hover {
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_next_on.png) no-repeat 0 0;
}




.item2_ch .arrow_width {
    width: 100%;
    height: 300px;
    max-width: 1220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;


}

.pg {
    background-color: #55a02d;
}

.pf {
    background-color: #5460d2;
}

.sg {
    background-color: #e9692c;
}

.c {
    background-color: #b90f0f;
}

.sf {
    background-color: #38aab8;
}

.arrowbtn {
    width: 1280px;
}

.gameinfo .video {
    overflow: hidden;
    position: relative;
    height: 720px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/video_bg.jpg) no-repeat center center;
    background-size: cover;
}

.gameinfo .video .i_txt {
    padding-top: 47px;
    text-align: center;


}

.gameinfo .video .i_txt img {
    width: 143px;

}

.video .bg_pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/homepage/gameinfo/bg_main_pattern.png') left top repeat;
}



.video .bg_pattern button {
    text-align: center;
}

.video .bg_pattern button:hover {}

.videos_list {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    z-index: 0;
    top: 290px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
}

.videos_list a {
    cursor: pointer;
    padding: 10px;
    box-shadow: 0 0 0 0px #000 inset;
    transition: all ease-in-out 0.3s;

}

.videos_list a img {
    width: 100%;
}

.videos_list a:hover {
    box-shadow: 0 0 0 24px #ffa507 inset;
}

.wrap_ch {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
    position: relative;
    max-width: 1280px;
    width: 100%;
    z-index: 0;
    top: 222px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;

}

.wrap_ch .character_bimg {
    float: left;
}

.wrap_ch .info_wrap {
    width: 670px;
    display: block;
}



.media_wrap {
    overflow: hidden;
    position: relative;
    height: 720px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/screenshot_bg.png) no-repeat center center;
    background-size: cover;
}

.media_wrap .i_txt {
    padding-top: 47px;
    text-align: center;
    padding-bottom: 100px;
}

.media_wrap .i_txt img {
    max-width: 562px;
    padding: 0 20px;
    width: 100%;
}


.screenshot_list {
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    height: 300px;
    max-width: 1240px;
    top: 50px;
}

.screenshot_list .swiper-slide {
    left: 17px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}


.screenshot_list .swiper-slide {
    width: 295px !important;
    height: 265px;
    opacity: 1;
}



#media_con {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    left: -17px;
    /*transition: all ease-in 0.1s;*/

}

#media_con a {
    padding: 0;
    margin: 0;
    /*width:295px;*/
    height: 265px;

    /*margin-right: 10px;*/
}

.media_wrap .arrow_width {
    width: 100%;
    height: 300px;
    max-width: 1330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 350px;
    position: absolute;
    width: 100%;
    z-index: 0;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
}

.arrow_width .screen_btn_prev {
    outline: none;
    cursor: pointer;
    width: 24px;
    height: 40px;
    position: absolute;
    right: 98%;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_prev.png) no-repeat 0 0;
    transition: all ease-in 0.1s;
}

.arrow_width .screen_btn_next {
    outline: none;
    cursor: pointer;
    width: 24px;
    height: 40px;
    position: absolute;
    left: 98%;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_next.png) no-repeat 0 0;
    transition: all ease-in 0.1s;
}

.arrow_width .screen_btn_prev:hover {
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_prev_on.png) no-repeat 0 0;
}

.arrow_width .screen_btn_next:hover {
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/characters/arrow_next_on.png) no-repeat 0 0;
}


/*스킬*/


.skill_layer {
    display: none;
    z-index: 10000;
    position: absolute;
    /*top:-1200px;*/
}


.skill_layer .u_video {
    position: relative;
    z-index: 100;
    /*max-width: 1280px;*/
    /*width: 80%;*/
    width: 956px;
    height: 537px;
    left: 50%;
    padding-bottom: 45.05%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.skill_layer .item {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 70px;
}

.skill_layer .item div {
    position: relative;
}

.skill_layer .item img {
    display: block;
    width: 100%;
}

.skill_layer .item iframe {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.skill_layer .item .i_close {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
}

.skill_layer .item .i_close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    background-size: cover;
}

.skill_layer .item .i_close:hover span {
    width: 100%;
}


.skill_layer .video {
    position: absolute;
    width: 100%;
    height: 100%;
}

.skill_layer .i_close {
    display: block;
    position: absolute;
    right: -70px;
    top: 0;
    width: 70px;
    height: 70px;
    background: url(http://joycityimg.joycity.com/fs2_console/3on3/en/char/btn_thumb_close.png) no-repeat 0 0;
}

.skill_layer .i_close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(http://joycityimg.joycity.com/fs2_console/3on3/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    background-size: cover;
}

.skill_layer .i_close:hover span {
    width: 100%;
}


.skill_layer .c_skill {
    position: relative;
    max-width: 970px;
    margin: 0 auto;
    overflow: hidden;
    top: -260px;
    left: -3px;
}

.skill_layer .c_skill div.item_list {
    margin-left: 0px;
    overflow: hidden;
}

.skill_layer .c_skill div.item_list a {
    display: block;
    float: left;
    width: 151px;
    margin: 0 0 10px 10px;
}

.skill_layer .c_skill div.item_list a {
    position: relative;
}

.skill_layer .c_skill div.item_list img {
    width: 100%;
}

.skill_layer .c_skill div.item_list a span {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 150px;
    height: 54px;
    top: 108px;
}

.skill_layer .c_skill div.item_list a span em.skill_name {
    display: table-cell;
    width: 110px;
    height: 54px;
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: left;
    vertical-align: middle;
}


.info_wrap .btn_skill_play {
    padding: 10px;
    transition: all ease-in-out 0.3s;
    box-shadow: 0 0 0 0px #000 inset;
}


.info_wrap .btn_skill_play:hover {
    box-shadow: 0 0 0 12px #ffa507 inset;
}


.screen_modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.bg_sclayer {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0.8;
    background-color: #000;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.screen_modal .gallery-screen {
    position: relative;
    z-index: 10000;
    width: 100%;
    height: 100%;
}


.screen_modal .gallery-screen .swiper-wrapper {
    /*	width: 100%;
    max-width: 1200px;
    max-height: 720px;*/

}

.screen_modal .gallery-screen .i_close {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    z-index: 1000;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close.png) no-repeat 0 0;
}

.screen_modal .gallery-screen .i_close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(https://3on3.fsgames.com/images/en/char/btn_thumb_close_on.png) no-repeat 0 0;
    background-size: cover;
}

.screen_modal .gallery-screen .i_close:hover span {
    width: 100%;
}



.screen_modal .gallery-screen .swiper-wrapper .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 85%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}


.screen_modal .gallery-screen .swiper-wrapper .swiper-slide .v_wrap {
    position: relative;
    height: 100vh;

}


.screen_modal .gallery-screen .swiper-wrapper .swiper-slide .v_wrap .center {
    position: absolute;
    max-width: 1280px;
    max-height: 720px;
    left: 0;
    top: 90px;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    display: inline-block;
    padding: 0 60px 0;
}

.screen_modal .gallery-screen .swiper-wrapper .swiper-slide .v_wrap .center .countsort {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.screen_modal .gallery-screen .swiper-wrapper .swiper-slide .v_wrap .center .countsort .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.screen_modal .gallery-screen .swiper-wrapper .swiper-slide .v_wrap .center .countsort .music {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*media*/

@media screen and (max-width:1380px) {
    .screenshot_list {
        width: 925px;
    }

    #media_con {
        margin-left: 0px;
    }

    .media_wrap .arrow_width {
        width: 1000px;
    }
}

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


    .gallery-thumbs {
        height: 350px;
        box-sizing: border-box;
        padding: 10px 0;
        max-width: 800px;
    }

    .item2_ch .arrow_width {
        max-width: 980px;
    }

    /*케릭터소식 문구 하단*/
    .swiper-slide .c_story .item_wrap {
        padding: 25px 0 70px;
        text-align: left;
    }

    .swiper-slide .c_story h4 {
        padding: 0 15px;
        height: 25px;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
    }

    .swiper-slide .c_story p {
        padding: 0 15px 30px;
        font-size: 13px;
        border-bottom: 1px solid #2c2c2c;
        height: 152px;
    }

    .swiper-slide .c_story div {
        padding-top: 150px;
        border-top: 0px solid #000;
        text-align: center;
        height: 330px;
    }

    .swiper-slide .c_story div img {
        max-width: 250px;
    }

    .swiper-slide .c_story {
        width: 100%;
        background: #121212;
    }

    .swiper-slide .c_story div {
        position: relative;
        right: 0;
        padding-right: 30px;
        top: 50%;
        margin-top: -100px;
    }

    .chr-view {
        height: auto;
    }

    .gameinfo .c_story .item_wrap {
        height: auto;
    }

}

.scBtn {
    top: 50% !important;
}


/*drag*/
.m_wrapper {
    width: 100%;
    height: 100vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    filter: alpha(opacity=1);
}


.guide {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 100%;
    background-color: #000;
    top: -80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.guide p {
    width: 80%;
    color: white;
    font-family: sans-serif;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 15px;
}

.mouse {
    width: 40px;
    height: 40px;
    transform-origin: center bottom;
    animation-name: swinging;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

.mouse-click,
.mouse-large-click,
.mouse-small-click {
    opacity: 0;
    transform-origin: center center;
    animation-name: click;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: forward;
    animation-play-state: running;
}

@keyframes swinging {
    0% {
        transform: rotate(-10deg) translate3d(-15px, 0, 0)
    }

    100% {
        transform: rotate(10deg) translate3d(15px, 0, 0)
    }
}

@keyframes click {
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

/*drag end*/

/*배틀패스*/

.section_bp {
    overflow: hidden;
    position: relative;
    /* top: 86px; */
    height: 0;
    display: flex;
    padding-bottom: 56.26%;
    justify-content: center;
    align-items: center;
}

.section_bp .text_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 5;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
}

.section_bp .text_wrap .day {
    position: absolute;
    top: 80px;
    right: 20px;
}

.section_bp .text_wrap .day img {
    width: 90%;
}


.section_bp .text_wrap .title img {
    width: 100%;
    height: auto;
    padding: 20px;
}

.section_bp .text_wrap .btn_movie_play img {
    width: 100%;
    height: auto;
    padding: 20px;
}

.section_bp .bg_pattern_dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/bg_main_pattern.png') left top repeat;
}

.section_bp .text_wrap .btn_movie_play:hover img {
    transform: scale(1.05);
}


/*vh*/
.gameinfo .sec2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;

    /* padding: 40px 0;*/
    background-color: #fecd07;
    background-size: cover;
    text-align: right;
}





.gameinfo .sec2 .rightBox {
    position: absolute;
    right: 0;
    width: 897px;
    height: 100%;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s2_right_bg.png) no-repeat 0 0;
    background-size: cover;
}

.gameinfo .sec2 .i_txt {
    position: absolute;
    width: 100%;
    top: 50%;
    right: 5%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 100;
}

.gameinfo .sec2 .i_txt img {
    max-width: 603px;
    width: 100%;
}


.gameinfo .sec2 .i_char_joy {
    position: absolute;
    right: 62%;
    bottom: 0;
    display: block;
    width: 750px;
    height: 626px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s2_joy.png) no-repeat 0 0;
    opacity: 1;
    filter: alpha(opacity=0);
}

.gameinfo .sec2 .i_char_nadia {
    z-index: 90;
    position: absolute;
    top: 5%;
    right: 10%;
    bottom: 0;
    display: block;
    width: 700px;
    height: 1300px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s2_nadia.png) no-repeat 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.gameinfo .sec2 .i_char_nadia_s {
    position: absolute;
    top: 5%;
    right: 13%;
    bottom: 0;
    display: block;
    width: 700px;
    height: 1300px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s2_nadia_s.png) no-repeat 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

/*sec2 end*/

/*sec3*/
.gameinfo .sec3 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /* padding: 40px 0;*/
    background-color: #fecd07;
    background-size: cover;
    text-align: left;
}

.gameinfo .sec3 .leftBox {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s3_leftbg.png) no-repeat 0 0;
    background-size: contain;
}

.gameinfo .sec3 .i_txt {
    position: absolute;
    top: 59%;
    max-width: 535px;
    width: 100%;
    opacity: 0;
    left: 5%;
    filter: alpha(opacity=0);
}

.gameinfo .sec3 .i_txt img {
    width: 100%;
}


.gameinfo .sec3 .i_char_littleFox {
    position: absolute;
    left: 10%;
    top: 20%;
    display: block;
    width: 1196px;
    height: 1095px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s3_littlefox.png) no-repeat 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.gameinfo .sec3 .i_char_littleFox_s {
    position: absolute;
    left: 9%;
    top: 20%;
    display: block;
    width: 1196px;
    height: 1095px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s3_littlefox_s.png) no-repeat 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.gameinfo .sec3 .i_char_pei {
    position: absolute;
    top: 5%;
    right: 3%;
    bottom: 0;
    display: block;
    width: 581px;
    height: 955px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s3_pei.png) no-repeat 0 0;
    opacity: 1;
    filter: alpha(opacity=0);
}

/*sec3 end*/






.pointBack {
    overflow: hidden;
    position: relative;
    /* top: 86px; */
    height: 100vh;
    display: flex;
    padding-bottom: 56.26%;
    justify-content: center;
    align-items: center;
}

.pointBack .text_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 5;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
}

.pointBack .text_wrap .pc img {
    width: 100%;
    height: auto;
    padding: 20px;
}

.pointBack .text_wrap .mo img {
    display: none;
    width: 100%;
    height: auto;
    padding: 20px;
}

.background-pvideo.pvideo.absolute,
.pvideo.pvideo.absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.background-pvideo.pvideo,
.pvideo.pvideo {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    background-size: cover;
}



.pointbg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200%;
    height: 200%;
    /*background: url(https://cdn2.unrealengine.com/pattern-437x213-579684426.png) 0px 0px / 250px repeat;*/
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/p_p.png) 0px 0px / 3840px repeat;
    animation-duration: 100s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: pani;
}

@keyframes pani {
    0% {
        transform: translate3d(0%, 0%, 1px);
    }

    50% {
        transform: translate3d(-50%, -50%, 1px);
    }

    100% {
        transform: translate3d(0%, 0%, 1px);
    }
}


.bp_reward {
    overflow: hidden;
    position: relative;
    height: 1494px;
    /* border-top: 4px solid #121212;*/
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/bp_rewardbg.jpg) no-repeat center center;
    background-size: cover;

    justify-content: center;
    align-items: center;
    background-size: cover;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 5;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    box-sizing: border-box;


}

.bp_reward .i_txt1 {
    margin-top: -150px;
    padding: 0 40px 0;
    text-align: center;
}

.bp_reward .i_txt1 img {
    max-width: 765px;
    width: 100%;

}

.bp_reward .i_txt2 {
    padding: 80px 40px 0;
    text-align: center;
}

.bp_reward .i_txt2 img {
    max-width: 560px;
    width: 100%;

}

.bp_reward .bp50 {
    height: 548px;
    box-sizing: border-box;
    width: 1237px;
    margin-top: 20px;
    background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/listBg.png) no-repeat 0 0;
}

.bp_reward .bp50 .arrow_width {
    width: 100%;
    max-width: 1360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100%;*/
    position: absolute;
    width: 100%;
    z-index: 100;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
}

.bp_reward .bp50 .swiper50 {
    left: 105px;
    width: 1028px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.bp_reward .bp50 .swiper50 .swiper-slide {
    width: 192px !important;
    height: 478px;
    opacity: 1;
    /*overflow: visible;*/
}

.bp_reward .bp50 .swiper50 .dot {
    margin-left: -100px;
}


.bp_reward .reward_list {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    z-index: 0;
    top: 160px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
}

.bp_reward .reward_list p img {
    width: 100%;
}

.swiper-pagination-bullet {

    width: 20px !important;
    height: 20px !important;
    text-align: center;
    line-height: 20px;
    font-size: 0px;
    color: #fff !important;
    opacity: 1;
    background: rgba(255, 255, 255, 0.3) !important;
}

.swiper-pagination-bullet-active {
    color: #fff !important;
    background: #fff !important;
}

/*1930보다 클때*/
@media screen and (min-width:1930px) {

    .pointbg {
        /*background: url(https://cdn2.unrealengine.com/pattern-437x213-579684426.png) 0px 0px / 250px repeat;*/
        background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/p_p.png) 0px 0px / 7680px repeat;
    }


    .gameinfo .sec2 .rightBox {
        width: 50%;
    }
}

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

    .bp_reward .bp50 {
        width: 1028px;
    }

    .bp_reward .bp50 .swiper50 {
        width: 819px;
    }

    .bp_reward .bp50 .arrow_width {
        width: 96%;

    }
}

@media screen and (max-width:1360px) {
    .gameinfo .sec3 .i_char_littleFox {
        left: -10%;
    }

    .gameinfo .sec3 .i_char_littleFox_s {
        left: -10%;
    }

    .gameinfo .sec2 .i_char_nadia {
        right: 10%;
    }

    .gameinfo .sec2 .i_char_nadia_s {
        right: 13%;
    }
}



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

    .bp_reward .bp50 {
        width: 819px;
    }

    .bp_reward .bp50 .swiper50 {
        width: 610px;
    }

    .gameinfo .sec2 .i_char_nadia {
        right: -30%;
    }

    .gameinfo .sec2 .i_char_nadia_s {
        right: -33%;
    }

}




@media screen and (max-width:1146px) {
    .wrap_ch .character_bimg img {
        margin-left: 25%;
    }

    .wrap_ch .info_wrap {
        margin-right: 25%;
    }

    .skill_layer .u_video {
        width: 794px;
        height: 444px;
        top: -190px;
    }

    .skill_layer .c_skill {
        width: 839px;
        top: -400px;
        left: 12px;
    }

    .section_bp {
        height: 700px;
    }


    .section_bp .text_wrap .day {
        position: relative;
        top: 20px;
        right: 0;
    }


}




@media screen and (max-width: 1060px) {
    .screenshot_list {
        width: 610px;
    }

    #media_con {
        margin-left: 0px;
    }

    .media_wrap .arrow_width {
        width: 695px;
    }

    .gameinfo .sec2 .i_txt {
        padding: 0 40px;
    }



    .gameinfo .sec3 .i_char_littleFox {
        left: -50%;
    }

    .gameinfo .sec3 .i_char_littleFox_s {
        left: -50%;
    }


    .gameinfo .sec3 .leftBox {
        width: 100%;
        background: url(https://common-cdn-api.joycityglobal.com/3on3/homepage/battlePass/s3_leftbg.png) no-repeat 0 0;
        background-size: cover;
    }

}

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


    .skill_layer .u_video {
        width: 634px;
        height: 354px;
        top: -300px;
    }

    .skill_layer .c_skill {
        width: 688px;
        top: -460px;
        left: 16px;
    }


    .bp_reward .bp50 {
        width: 610px;
    }

    .bp_reward .bp50 .swiper50 {
        width: 401px;
    }

    .bp_reward .bp50 .swiper50 .dot {
        display: none;
    }

    .pointBack .text_wrap .pc img {
        display: none;
    }


    .pointBack .text_wrap .mo img {
        display: block;
    }

    .gameinfo .sec2 .i_char_nadia {
        right: -60%;
    }

    .gameinfo .sec2 .i_char_nadia_s {
        right: -63%;
    }



}


@media screen and (max-width: 935px) {
    .gallery-thumbs {
        height: 350px;
        box-sizing: border-box;
        padding: 10px 0;
        max-width: 520px;
    }

    .item2_ch .arrow_width {
        max-width: 640px;
    }

    .section_new {
        height: 580px;
    }
}



@media screen and (max-width: 810px) {
    .skill_layer .u_video {
        width: 474px;
        height: 270px;
        top: -350px;
    }

    .skill_layer .c_skill {
        width: 537px;
        top: -480px;
        left: 22px;
    }

    .swiper-slide .c_story p {
        padding: 0 15px 30px;
        font-size: 13px;
        border-bottom: 1px solid #2c2c2c;
        height: 162px;
    }

    .wrap_ch .info_wrap {
        position: absolute;
        top: 160px;
        max-width: 480px;
        width: 100%;
        height: 200px;
        display: block;
        padding: 10px;
    }

    .wrap_ch .character_bimg {
        top: 425px;
        position: absolute;
    }

    .wrap_ch {
        width: 100%;
        height: 735px;
    }

    .info_wrap .btn_skill_play img {
        padding: 10px;
        width: 100%;
        height: auto;
    }

    .info_wrap p img {
        width: 100%;
        height: auto;
    }

    .wrap_ch .character_bimg img {
        margin-left: 0;
    }

    .wrap_ch .info_wrap {
        margin-right: 0;
    }

    .info_wrap .btn_skill_play {
        margin-top: -30px;
    }


}






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

    .bp_reward .bp50 {
        width: 401px;
    }

    .bp_reward .bp50 .swiper50 {
        width: 192px;
    }
}

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

    .screenshot_list {
        width: 295px;
    }

    #media_con {
        margin-left: 0px;
    }

    .media_wrap .arrow_width {
        width: 100%;
        max-width: 330px;
    }

    .videos_list {
        display: block;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 340px;
        z-index: 0;
        top: 43%;
        left: 47%;
        transform: translate(-50%, -50%);
        text-align: center;
        box-sizing: border-box;
        padding: 50px;
    }

    .videos_list a img {
        padding: 10px;

    }

    .gallery-thumbs {
        height: 350px;
        box-sizing: border-box;
        padding: 10px 0;
        max-width: 240px;
    }

    .item2_ch .arrow_width {
        max-width: 400px;
        width: 100%;
    }

    .info_wrap .btn_skill_play {
        margin-top: 0px;
    }

    .skill_layer .u_video {
        width: 314px;
        height: 176px;
        top: -220px;
    }

    .skill_layer .c_skill {
        width: 386px;
        top: -300px;
        left: 26px;
    }

    .skill_layer .u_video .i_close {
        top: -70px;
        right: 0px;
    }

    .gameinfo .sec3 .i_char_littleFox {
        left: -90%;
    }

    .gameinfo .sec3 .i_char_littleFox_s {
        left: -90%;
    }


}

@media screen and (max-width: 630px) {
    .gameinfo .sec2 .i_char_nadia {
        right: -100%;
    }

    .gameinfo .sec3 .i_txt {
        left: 0%;
    }

    .gameinfo .sec3 .i_char_littleFox {
        position: absolute;
        left: -700px;
        top: 10px;
    }

    .gameinfo .sec3 .i_char_littleFox_s {
        left: -700px;
    }


}

@media screen and (max-width: 520px) {
    .mid_wrap {
        max-width: 520px;
    }

    .bp_reward .i_txt1 {
        margin-top: 0px;
    }

    .bp_reward .bp50 .arrow_width {
        top: 50%;
    }

    .bp_reward .reward_list {
        position: relative;
        padding: 40px;
        width: 100%;
        top: 240px;
        display: block;

    }

    .bp_reward .reward_list p img {

        width: 80%;
    }

    .section_bp {
        height: 500px;
    }

    .pointBack {
        overflow: hidden;
        position: relative;
        /* top: 86px; */
        height: 60vh;
        display: flex;
        padding-bottom: 56.26%;
        justify-content: center;
        align-items: center;
    }

    .gameinfo .sec2 .i_char_nadia {
        right: -160%;
    }


}