@charset 'utf-8';

.main_visual {
    width: 1165px;
    margin: 0 auto;
}

#popup_yt_play {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#popup_yt_play .bg {
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(0, 0, 0, 0.7);
}

#popup_yt_play .bg .inner {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#popup_yt_play .bg .inner p {
    display: inline-block;
    position: relative;
    max-width: 92%;
}

#popup_yt_play .bg .inner p span {
    display: inline-block;
    width: 36px;
    line-height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 30px;
    position: absolute;
    top: -45px;
    right: -45px;
    cursor: pointer;
}

#popup_yt_play .bg .inner iframe {
    width: 1120px;
    height: 630px;
    max-width: 100%;
    max-height: 85%;
}

.middle_link {
    padding-top: 26px;
}

.middle_link.center {
    text-align: center;
}

.middle_link a {
    display: inline-block;
    vertical-align: top;
    width: 486px;
    padding: 16px 0;
    line-height: 24px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: #1cadff;
    border: 1px solid #1c4cb1;
    position: relative;
}

.middle_link a:after {
    display: block;
    content: "";
    width: 6px;
    height: 11px;
    background: url('/images/GOB/main/main_btn_arrow.png') 0 0 no-repeat;
    position: absolute;
    top: 50%;
    right: 22px;
    margin-top: -5px;
}

.middle_link a.right {
    float: right;
}

.common_more {
    clear: both;
    padding-top: 18px;
    text-align: right;
}

.common_more a {
    display: inline-block;
    padding: 0 5px 0 15px;
    font-size: 17px;
    color: #000;
    /*background: url('/images/GOB/main/btn_arrow_white.png') left center no-repeat;*/
}

h2.tit {
    clear: both;
    padding: 60px 0 20px 0;
    line-height: 58px;
    font-size: 50px;
    color: #852905;
    font-weight: bold;
    text-align: center;
}

.news ul {
    border-top: 1px solid #303a4c;
}

.news li {
    border-bottom: 1px solid #303a4c;
}

.news li a.faq_jb {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.news li a.faq_jb span {
    display: table-cell;
    vertical-align: middle;
    height: 74px;
}

.news li a.faq_jb span.th {
    width: 150px;
    text-indent: 30px;
    font-size: 16px;
    color: #a7b2c5;
}

.news li a.faq_jb span.td {
    width: 800px;
    padding-right: 50px;
    line-height: 29px;
    font-size: 19px;
    font-weight: bold;
}

.news li a.faq_jb span.td em {
    display: inline-block;
    margin: 10px 0;
    max-width: 730px;
    font-style: normal;
    vertical-align: middle;
}

.news li a.faq_jb span.td strong.new {
    display: inline-block;
    color: #f59c02;
    margin-left: 5px;
    vertical-align: middle;
}

.news li>div {
    background: url('/images/GOB/main/news_arrow_right.png') 970px 30px no-repeat;
}

.news li>div.faq {
    background: url('/images/GOB/main/news_arrow_down.png') 970px 30px no-repeat;
    height: 74px;
    overflow: hidden;
}

.news li>div.faq.on {
    background: url('/images/GOB/main/news_arrow_up.png') 970px 30px no-repeat;
    height: auto;
}

.news li>div.faq .con {
    padding: 15px 65px 15px 150px;
    border-top: 1px solid #222c40;
    line-height: 18px;
    font-size: 14px;
}

.news li>div.faq.on a span.td em.ellipsis {
    text-overflow: ellipsis;
    overflow: visible;
    white-space: normal;
}

.news li>div.faq .con img {
    max-width: 100%;
}

.winners_challenge .desc {
    padding: 25px 0;
    line-height: 34px;
    font-size: 24px;
    color: #000;
    text-align: center;
}

.rank_system .desc {
    padding: 25px 0;
    line-height: 34px;
    font-size: 24px;
    color: #000;
    text-align: center;
}

.rank_system .division li {
    float: left;
    margin-left: 10px;
    position: relative;
}

.rank_system .division li:first-child {
    margin-left: 0;
}

.rank_system .division li span {
    display: block;
    width: 192px;
    text-align: center;
}

.rank_system .division li span em {
    display: inline-block;
    line-height: 54px;
    font-size: 24px;
    color: #fff;
    font-style: normal;
    padding: 0 20px 0 33px;
    position: relative;
}

.rank_system .division li span em:after {
    display: block;
    content: "";
    width: 24px;
    height: 34px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -17px;
}

.rank_system .division li span.platinum em:after {
    background: url('/images/GOB/main/icon_div_p.png') 0 0 no-repeat;
}

.rank_system .division li span.gold em:after {
    background: url('/images/GOB/main/icon_div_g.png') 0 0 no-repeat;
}

.rank_system .division li span.silver em:after {
    background: url('/images/GOB/main/icon_div_s.png') 0 0 no-repeat;
}

.rank_system .division li span.bronze em:after {
    background: url('/images/GOB/main/icon_div_b.png') 0 0 no-repeat;
}

.rank_system .division li span.iron em:after {
    background: url('/images/GOB/main/icon_div_i.png') 0 0 no-repeat;
}

.rank_system .division li a {
    display: none;
}

.rank_system .division li:hover a {
    display: block;
    line-height: 24px;
    font-size: 18px;
    padding: 28px 0;
    text-decoration: underline;
    color: #fff;
    background: #959595;
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    text-align: center;
}

.rank_system .division p {
    clear: both;
    padding-top: 15px;
    text-align: center;
}

.rank_system .division p a {
    display: inline-block;
    line-height: 24px;
    padding: 8px 25px;
    font-size: 18px;
    color: #000;
    border: 1px solid #40484e;
}

.rank_system .division p a em {
    display: inline-block;
    vertical-align: top;
    line-height: 24px;
    font-size: 6px;
    font-style: normal;
}

.ranking .update {
    text-align: right;
    font-size: 17px;
    line-height: 31px;
    color: #000;
}

.ranking10 {
    padding-top: 12px;
}

.related {
    text-align: center;
}

.related ul {
    margin-top: 30px;
}

.related ul li {
    display: inline-block;
    vertical-align: top;
    width: 302px;
    margin-left: 70px;
}

.related ul li:first-child {
    margin-left: 0;
}

.related ul li .box {
    position: relative;
}

.related ul li .box em {
    display: inline-block;
    padding: 0 6px;
    line-height: 22px;
    font-size: 12px;
    font-style: normal;
}

.related ul li .box em.blue {
    background: #153476;
}

.related ul li .box em.yellow {
    background: #ffa200;
}

.related ul li .box em.red {
    background: #95231e;
}

.related ul li .box strong.tit {
    display: block;
    font-size: 20px;
    line-height: 28px;
    padding: 5px 0;
}

.related ul li .box span.txt {
    display: block;
    font-size: 15px;
    line-height: 19px;
    padding: 3px 0;
}

.related ul li .box em,
.related ul li .box strong.tit,
.related ul li .box span.txt {
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    color: #000;
}

.related ul li .box:hover em,
.related ul li .box:hover strong.tit,
.related ul li .box:hover span.txt {
    color: #4bace1;
}

.related ul li .box .thumb {
    display: block;
    width: 302px;
    height: 172px;
    color: #ffffff;
    text-align: left;
    background-color: #000000;
    font-size: 16px;
    position: relative;
    margin-bottom: 25px;
}

.related ul li .box .thumb * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.related ul li .box .thumb img {
    position: relative;
    max-width: 100%;
    vertical-align: top;
}

.related ul li .box .thumb figcaption {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    text-align: center;
}

.related ul li .box .thumb figcaption:before,
.related ul li .box .thumb figcaption:after {
    width: 1px;
    height: 0;
}

.related ul li .box .thumb figcaption:before {
    right: 0;
    top: 0;
}

.related ul li .box .thumb figcaption:after {
    left: 0;
    bottom: 0;
}

.related ul li .box .thumb figcaption p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: -13px;
}

.related ul li .box .thumb figcaption p span {
    display: inline-block;
    line-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
}

.related ul li .box a {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

.related ul li .box .thumb:before,
.related ul li .box .thumb:after,
.related ul li .box .thumb figcaption:before,
.related ul li .box .thumb figcaption:after {
    position: absolute;
    content: '';
    background-color: #ffffff;
    z-index: 1;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    opacity: 0.8;
}

.related ul li .box .thumb:before,
.related ul li .box .thumb:after {
    height: 1px;
    width: 0%;
}

.related ul li .box .thumb:before {
    top: 0;
    left: 0;
}

.related ul li .box .thumb:after {
    bottom: 0;
    right: 0;
}

.related ul li .box:hover img {
    opacity: 0.4;
}

.related ul li .box:hover figcaption {
    opacity: 1;
}

.related ul li .box:hover figcaption:before,
.related ul li .box:hover figcaption:after {
    height: 100%;
}

.related ul li .box:hover .thumb:before,
.related ul li .box:hover .thumb:after {
    width: 100%;
}

.related ul li .box:hover .thumb:before,
.related ul li .box:hover .thumb:after,
.related ul li .box:hover figcaption:before,
.related ul li .box:hover figcaption:after {
    opacity: 0.1;
}

.sponsor ul {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin-top: 20px;
    font-size: 0;
    line-height: 0;
    letter-spacing: -5px;
}

.sponsor ul li {
    display: inline-block;
    *display: inline;
    vertical-align: top;
    width: 238px;
    margin: 0 0 13px 13px;
    letter-spacing: 0;
    border: 1px solid #40484e;
}

.sponsor ul li:nth-of-type(4n+1) {
    margin-left: 0;
}

.sponsor ul li img {
    width: 238px;
}


/* _모바일 ---------------------------------------------------------------------------------- */

@media all and (max-width:768px) {
    .main_visual {
        width: 100%;
        margin: 0 auto;
    }
    #popup_yt_play .bg .inner p {
        width: 92%;
    }
    #popup_yt_play .bg .inner p span {
        top: -36px;
        right: 0;
        width: 28px;
        line-height: 28px;
    }
    #popup_yt_play .bg .inner iframe {
        width: 100%;
        height: 400px;
    }
    .middle_link {
        padding-top: 12px;
    }
    .middle_link a {
        width: 100%;
        margin: 3px 0;
        padding: 10px 0;
        line-height: 20px;
        font-size: 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .middle_link a.right {
        float: none;
    }
    .common_more {
        clear: both;
        padding-top: 10px;
        text-align: center;
    }
    .common_more a {
        display: block;
        padding: 7px 0;
        line-height: 18px;
        font-size: 14px;
        background-position: 96% 11px;
        background-size: auto 9px;
        border: 1px solid #4b5870;
    }
    h2.tit {
        clear: both;
        padding: 45px 0 10px 0;
        line-height: 40px;
        font-size: 24px;
    }
    .news ul {
        border-top: 1px solid #303a4c;
    }
    .news li {
        border-bottom: 1px solid #303a4c;
    }
    .news li a.faq_jb {
        display: block;
        width: auto;
        padding: 7px 7% 7px 7px;
    }
    .news li a.faq_jb span {
        display: block;
        height: auto;
    }
    .news li a.faq_jb span.th {
        width: 100%;
        text-indent: 0;
        font-size: 12px;
    }
    .news li a.faq_jb span.td {
        width: 100%;
        padding: 4px 0 0 0;
        line-height: 22px;
        font-size: 16px;
        font-weight: normal;
    }
    .news li a.faq_jb span.td em {
        max-width: 80%;
        margin: 5px 0;
    }
    .news li>div {
        background-position: 96% 19px;
        background-size: auto 9px;
    }
    .news li>div.faq {
        height: 62px;
        background-position: 96% 19px;
        background-size: auto 9px;
    }
    .news li>div.faq.on {
        height: auto;
        background-position: 96% 19px;
        background-size: auto 9px;
    }
    .news li>div.faq .con {
        padding: 10px 7px;
        line-height: 17px;
        font-size: 13px;
    }
    .winners_challenge .desc {
        padding: 5px 0 15px 0;
        line-height: 24px;
        font-size: 16px;
    }
    .winners_challenge .division li {
        float: left;
        width: 31.33%;
        margin: 1%;
    }
    .winners_challenge .division li:first-child {
        margin-left: 1%;
    }
    .winners_challenge .division li span {
        width: 100%;
    }
    .winners_challenge .division li span em {
        line-height: 31px;
        font-size: 15px;
        padding: 0 7px 0 23px;
        background-size: auto 10px;
    }
    .winners_challenge .division li span em:after {
        width: 20px;
        height: 24px;
        margin-top: -12px;
    }
    .winners_challenge .division li span.platinum em:after,
    .winners_challenge .division li span.gold em:after,
    .winners_challenge .division li span.silver em:after,
    .winners_challenge .division li span.bronze em:after,
    .winners_challenge .division li span.iron em:after {
        background-size: auto 100%;
    }
    .winners_challenge .division li:hover a {
        display: block;
        line-height: 18px;
        font-size: 15px;
        padding: 15px 0;
        position: absolute;
        top: 31px;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 99;
    }
    .winners_challenge .division p {
        padding-top: 25px;
    }
    .winners_challenge .division p a {
        line-height: 18px;
        padding: 6px 20px;
        font-size: 14px;
    }
    .winners_challenge .division p a em {
        line-height: 18px;
        font-size: 4px;
    }
    .rank_system .desc {
        padding: 5px 0 15px 0;
        line-height: 24px;
        font-size: 16px;
    }
    .rank_system .division li {
        float: left;
        width: 31.33%;
        margin: 1%;
    }
    .rank_system .division li:first-child {
        margin-left: 1%;
    }
    .rank_system .division li span {
        width: 100%;
    }
    .rank_system .division li span em {
        line-height: 31px;
        font-size: 15px;
        padding: 0 7px 0 23px;
        background-size: auto 10px;
    }
    .rank_system .division li span em:after {
        width: 20px;
        height: 24px;
        margin-top: -12px;
    }
    .rank_system .division li span.platinum em:after,
    .rank_system .division li span.gold em:after,
    .rank_system .division li span.silver em:after,
    .rank_system .division li span.bronze em:after,
    .rank_system .division li span.iron em:after {
        background-size: auto 100%;
    }
    .rank_system .division li:hover a {
        display: block;
        line-height: 18px;
        font-size: 15px;
        padding: 15px 0;
        position: absolute;
        top: 31px;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 99;
    }
    .rank_system .division p {
        padding-top: 10px;
    }
    .rank_system .division p a {
        line-height: 18px;
        padding: 6px 20px;
        font-size: 14px;
    }
    .rank_system .division p a em {
        line-height: 18px;
        font-size: 4px;
    }
    .ranking .update {
        font-size: 13px;
        line-height: 25px;
    }
    .ranking10 {
        padding-top: 8px;
    }
    .related ul {
        width: 130%;
        margin-top: 10px;
        text-align: left;
    }
    .related ul li {
        width: 48%;
        margin-left: 3%;
    }
    .related ul li:first-child {
        margin-left: 0;
    }
    .related ul li .box em {
        padding: 0 4px;
        line-height: 20px;
        font-size: 11px;
    }
    .related ul li .box strong.tit {
        font-size: 16px;
        line-height: 20px;
        padding: 4px 0;
    }
    .related ul li .box span.txt {
        font-size: 13px;
        line-height: 17px;
        padding: 3px 0;
    }
    .related ul li .box .thumb {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }
    .related ul li .box .thumb figcaption p {
        margin-top: -11px;
    }
    .related ul li .box .thumb figcaption p span {
        line-height: 20px;
        padding: 0 7px;
    }
    .sponsor ul {
        margin-top: 10px;
    }
    .sponsor ul li {
        width: 100%;
        margin: 0 0 2%;
    }
    .sponsor ul li img {
        width: 100%;
    }
    .sponsor ul li:nth-of-type(4n+1) {
        margin-left: 0;
    }
}

/* 20231115  */
.sp_display {
    display: none;
}
@media all and (max-width:768px) {
	.sp_display {
	    display: block;
	}
}