@charset "UTF-8";
@import url(https://font.imbc.com/mbcnew/mbcnew.css);
@import url(https://font.imbc.com/pretendard/pretendard.css);

:root {
    --primary: #4F29E5;
    --blue: #3385FF;
    --green: #1ED45A;
    --pink: #FA73E3;
    --orange: #FFA938;
    --red: #FF6363;
    --purple: #D478FF;
    --gray: #646D76;
}

main *, footer * { box-sizing: border-box; line-height: 1.25; letter-spacing: -2.5%; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #495057; font-family: 'mbcnew-medium'; letter-spacing: -2.5%; font-size: 16px; line-height: 1.25; vertical-align: middle; }
#wrap { background: #fff; }
.wrp { display: block; max-width: 1248px; width: 100%; min-width: 0; margin: 0 auto; padding: 0 16px; }
li { list-style: none; }
* a { color: inherit; text-decoration: none; }
section { margin: 0; }
section h1, section h2, section h3, section h4, section h5, section strong, section b { font-weight: inherit; border: 0; line-height: 1.25; }
section button, section button:focus, section button:active { color: inherit; font-family: inherit; background: none; border: 0; }

.btn { display: inline-flex; justify-content: center; align-items: center; padding: 10px 24px; border-radius: 999px; background: #F8F9FA; color: var(--gray); line-height: 1.25; border: 1px solid #DEE2E6; white-space: nowrap; }
.btn span { font-size: 18px; }
.btn .icon { display: inline-block; width: 16px; height: 16px; margin-left: 8px; }
.btn .icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.btn.blk { background: #000; color: #fff; border: 1px solid #000; }
.btn.on { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.btn.bolder { background: inherit; color: #fff; border: 1px solid #fff; }

.mbc-wrp { display: inline-block; min-width: 2.5em; height: 0.8em; vertical-align: -0.1em; aspect-ratio: 7 / 2; }
.mbc-wrp img { display: block; height: 100%; width: auto; }

.tit-wrp { margin-bottom: 32px; letter-spacing: 0; }
.tit-wrp .sub-tit { font-size: 12px; color: var(--gray); font-family: 'mbcnew-sbold'; }
.tit-wrp .tit { font-size: 28px; color: #171A1D; font-family: 'mbcnew-bold'; margin: 0.8rem 0; }
.tit-wrp p { font-size: 18px; }

.sec-visual { position: relative; display: block; background: url(https://img.imbc.com/broad/tv/sports/2026asian/images/bg-tit.jpg) no-repeat center center / cover; padding: 0 0 106px; }
.sec-visual::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%); pointer-events: none; }
.sec-visual .wrp { position: relative; z-index: 1; display: flex; align-items: flex-end; height: unset; min-width: 0; padding-top: 64px; }
.sec-visual .wrp .desc-wrp { margin-right: 1.5em; }
.sec-visual .wrp .desc { font-size: 18px; line-height: 1.56; margin: 16px 0 32px; }
.sec-visual .wrp .sub-tit { font-size: 16px; margin-bottom: 8px; color: #000; }
.sec-visual .wrp h1 { font-size: 60px; color: #101212; font-family: 'mbcnew-bold'; word-break: keep-all; line-height: 80px; white-space: nowrap; }
.sec-visual .wrp h1 .mbc-wrp img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sec-visual .wrp h1 em { color: var(--primary); }
.sec-visual .btn { font-size: 18px; line-height: 28px; padding: 10px; min-width: 185px; font-family: 'mbcnew-sbold'; }
.sec-visual .img-wrp { display: inline-block; max-width: 480px; height: 430px; margin-left: auto; }
.sec-visual .img-wrp img { display: block; width: 100%; height: 100%; object-fit: contain; }

.pc-hidden { display: none; }
.mo-hidden { display: inline-block; }

.rank-wrp { margin-top: 64px; }
.rank-wrp .tabs { display: flex; }
.rank-wrp .tab { width: calc((100% - 48px) / 4); padding: 10px 16px; font-size: 18px; line-height: 28px; margin-right: 16px; }
.rank-wrp .tab:last-child { margin: 0; }
.rank { padding: 22px; border: 1px solid #DEE2E6; border-radius: 20px; margin-top: 16px; width: 100%; }
.rank-table { width: 100%; border-collapse: collapse; table-layout: auto; vertical-align: middle; }
.rank-table thead th { padding: 0 16px 8px; font-size: 16px; font-family: 'mbcnew-medium'; font-weight: inherit; color: inherit; text-align: left; border: 0; white-space: nowrap; }
.rank-table tbody { font-size: 18px; }
.rank-table tbody tr { border-top: 1px solid #ececf4; }
.rank-table tbody tr.mine { background: #FBFAFF; }
.rank-table tbody td { padding: 14px 16px; min-height: 56px; vertical-align: middle; border: 0; text-align: right; }
.rank-table tbody td.num { width: 1%; white-space: nowrap; text-align: center; }
.rank-table tbody td.num .icon-wrp { display: inline-block; width: 40px; height: 28px; }
.rank-table tbody td.num .icon-wrp img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rank-table tbody td.name { width: 100%; font-family: 'mbcnew-sbold'; }
.rank-table tbody td.score { color: var(--gray); }
.rank-table .name { display: flex; align-items: center; overflow: hidden; }
.rank-table .name-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-table .my-tag { display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; width: 50px; height: 28px; border-radius: 999px; background: #F0ECFE; font-size: 12px; font-family: 'mbcnew-sbold'; color: var(--primary); line-height: 1; margin-left: 40px; }
.score { width: 1%; white-space: nowrap; text-align: left; font-family: 'mbcnew-sbold'; }
.empty { margin: 0; padding: 48px 20px; text-align: center; word-break: keep-all; }
.empty[hidden], .rank-table[hidden] { display: none; }
.rank a.btn { width: 100%; padding: 0 16px; min-height: 60px; border-radius: 16px; font-size: 18px; line-height: 28px; margin-top: 16px; }
.rank a.btn .icon { flex: 0 0 16px; height: 16px; }

.homepage-wrp { display: flex; align-items: center; width: 100%; padding: 32px 54px; min-height: 120px; border-radius: 20px; overflow: hidden; margin-top: 72px; color: #fff; background-image: linear-gradient(90deg,rgba(42, 17, 179, 1) 38%, rgba(42, 17, 179, 0) 66%), url(https://img.imbc.com/broad/tv/sports/2026asian/images/banner-pc.png); background-repeat: no-repeat; background-position: center right; background-size: cover; }
.homepage-wrp .desc { margin-right: 24px; word-break: keep-all; }
.homepage-wrp p { display: block; font-size: 14px; margin-bottom: 5px; }
.homepage-wrp strong { display: block; font-size: 24px; font-family: 'mbcnew-sbold'; }
.homepage-wrp .btn { margin-left: auto; padding: 16px 28px; align-items: center; }

.sec-game { margin-top: 64px; background: #F8F9FA; }
.sec-game .wrp { padding-top: 40px; padding-bottom: 100px; }
.ranking-games, .free-games { background: inherit; }
.ranking-games .sub-tit, .free-games .sub-tit { display: flex; align-items: center; margin-bottom: 24px; }
.ico-wrp { display: flex; justify-content: center; align-items: center; width: 76px; height: 56px; }
.ico-wrp img { display: block; width: 48px; height: 48px; object-fit: contain; }
.sub-tit-wrp h3 { display: block; font-size: 24px; color: #171A1D; font-family: 'mbcnew-sbold'; }
.sub-tit-wrp p { display: block; font-family: 'mbcnew-light'; line-height: 1.5; margin: 0; }
.sub-tit .badge { display: inline-block; padding: 4px 16px; color: var(--gray); background: #E9ECEF; border-radius: 20px; overflow: hidden; font-size: 12px; line-height: 2; font-family: 'mbcnew-medium'; margin-left: auto; white-space: nowrap; }

.flex-box { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.game-wrp { margin: 0 24px 0 0; padding: 0; list-style: none; flex-shrink: 0; }
.ranking-games .game-wrp { width: calc((100% - 72px) / 4); }
.ranking-games .game-wrp:nth-child(4n) { margin-right: 0; }
.free-games { margin-top: 48px; }
.free-games .game-wrp { width: calc((100% - 24px) / 2); }
.free-games .game-wrp:nth-child(2n) { margin-right: 0; }

.game { position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid #DEE2E6; border-radius: 20px; background: #fff; }
.game .img-wrp { display: flex; height: 180px; justify-content: center; align-items: center; padding: 24px; }
.game .img-wrp img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; align-self: center; flex: 0 1 auto; }
.free-games .img-wrp { height: 225px; }
.blue .img-wrp { background: #EAF2FE; }
.green .img-wrp { background: #D9FFE6; }
.pink .img-wrp { background: #FEECFB; }
.orange .img-wrp { background: #FEF4E6; }
.red .img-wrp { background: #FEECEC; }
.purple .img-wrp { background: #F9EDFF; }

.copy { display: flex; flex-direction: column; flex: 1; padding: 24px 32px; }
.copy .cate { font-size: 11px; line-height: 1.5; letter-spacing: 2.5%; }
.copy strong { display: block; font-size: 20px; font-family: 'mbcnew-sbold'; color: #171A1D; word-break: keep-all; line-height: 1.8; }
.copy p { margin: 0; line-height: 1.65; margin-top: 16px; padding-bottom: 32px; font-family: 'mbcnew-light'; }
.copy .start { display: flex; align-items: center; font-family: 'mbcnew-sbold'; margin-top: auto; }
.copy .icon { display: flex; justify-content: center; align-items: center; font-size: 16px; width: 28px; height: 28px; padding: 4px; border-radius: 100px; overflow: hidden; margin-left: auto; }
.copy .icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.blue .start { color: var(--blue); }
.blue .icon { background: var(--blue); }
.green .start { color: var(--green); }
.green .icon { background: var(--green); }
.pink .start { color: var(--pink); }
.pink .icon { background: var(--pink); }
.orange .start { color: var(--orange); }
.orange .icon { background: var(--orange); }
.red .start { color: var(--red); }
.red .icon { background: var(--red); }
.purple .start { color: var(--purple); }
.purple .icon { background: var(--purple); }

.sec-credit { background: #495057; padding: 32px 0; }
.sec-credit .wrp { display: flex; align-items: center; }
.sec-credit .desc { display: flex; color: #F8F9FA; word-break: keep-all; }
.sec-credit .desc .mbc-wrp { height: 13px; vertical-align: -1.5px; margin-left: 4px; }
.sec-credit .desc p { line-height: 1.5; }
.sec-credit .desc p:first-child { position: relative; padding-right: 32px; }
.sec-credit .desc p:first-child::after { content: ""; position: absolute; display: inline-block; width: 1px; height: 14px; background: #F8F9FA; right: 16px; top: 50%; transform: translateY(-50%); }
.sec-credit .bolder { margin-left: auto; }
.sec-credit .bolder .icon { width: 16px; height: 16px; margin-left: 8px; }

footer { display: flex; justify-content: center; align-items: center; padding: 60px 0 !important; }
footer p { display: block; font-family: 'pretend-regular'; font-size: 16px; color: #CED4DA; text-align: center; }

@media (max-width: 1247px) {
    .sec-visual { padding: 6rem 0 60px; }
    .sec-visual .wrp { padding-top: 32px; }
}

@media (max-width: 980px) {
    .sec-visual { padding: 6rem 0 40px; }
    .sec-visual .wrp { flex-direction: column; align-items: stretch; padding-top: 24px; }
    .sec-visual .wrp .sub-tit { margin-bottom: 12px; }
    .sec-visual .wrp h1 { font-size: 8.4vw; line-height: 1.325; white-space: normal; }
    .sec-visual .img-wrp { max-width: 320px; width: 100%; height: auto; margin: 0 auto 76px; padding: 0 24px; }
    .sec-visual .wrp .desc { margin: 10px 0 28px; }

    .sec-visual .btn { position: absolute; width: calc(100% - 32px); left: 50%; bottom: 0; border-radius: 12px; transform: translateX(-50%); height: 50px; font-size: 16px; }

    .homepage-wrp { padding: 20px 36px; margin-top: 32px; }

    .ranking-games .game-wrp,
    .free-games .game-wrp { width: calc((100% - 16px) / 2); }
    .ranking-games .game-wrp:nth-child(2n-1),
    .free-games .game-wrp:nth-child(2n-1) { margin-right: 16px; }
    .ranking-games .game-wrp:nth-child(2n),
    .free-games .game-wrp:nth-child(2n) { margin-right: 0; }
    .ranking-games .game-wrp:nth-child(-n+2) { margin-bottom: 16px; }
    .game .img-wrp, .free-games .img-wrp { height: 200px; }

    .sec-credit .desc { font-size: 18px; line-height: 1.3; }
}

@media (max-width: 767px) {

    .sec-visual { background-position: right 10% center; }

    .tit-wrp { margin-bottom: 20px; }
    .tit-wrp .sub-tit { font-size: 10px; }
    .tit-wrp .tit { font-size: 20px; }
    .tit-wrp p { font-size: 14px; }

    .rank-wrp { margin-top: 32px; }
    .board { border-radius: 23px; }
    .rank-wrp .tabs { overflow-x: auto; scroll-snap-type: x proximity; }
    .rank-wrp .tab { width: calc((100% - 36px) / 4); flex: 0 0 auto; min-width: 180px; padding: 8px 16px; scroll-snap-align: start; font-size: 16px; margin-right: 12px; }
    .rank { padding: 8px; }
    .rank-table thead th,
    .rank-table td { padding: 14px 12px; }
    .rank-table tbody td.name, .rank-table tbody td.score { font-size: 16px; }
    .rank-table .my-tag { width: 36px; height: 20px; font-size: 11px; margin-left: 20px; }
    .rank a.btn { min-height: 50px; margin-top: 18px; font-size: 16px; }

    .homepage-wrp strong { font-size: 20px; }
    .homepage-wrp .btn { padding: 12px 24px; }

    .sec-game { margin-top: 32px; }
    .sec-game .wrp { padding-top: 32px; padding-bottom: 64px; }
    .ranking-games > .sub-tit, .free-games > .sub-tit { margin-bottom: 12px; }
    .ico-wrp { flex: 0 0 56px; height: 56px; }
    .ico-wrp img { width: 32px; height: 32px; }
    .sub-tit-wrp h3 { font-size: 16px; }
    .sub-tit-wrp p { font-size: 12px; }
    .sub-tit .badge { font-size: 10px; padding: 4px 14px; }
    .free-games { margin-top: 28px; }

    .copy { padding: 16px 24px; }

    .sec-credit .desc { display: block; font-size: 16px; }
    .sec-credit .desc p:first-child { padding-right: 0; }
    .sec-credit .desc p:first-child::after { display: none; }

    .ag-main-page .sec-ad .ad { min-width: 0; min-height: 70px; padding: 10px 0; }
    .ag-ad-mo { display: block !important; width: 320px; min-width: 320px; max-width: 100%; height: 50px; min-height: 50px; }
    .ag-ad-pc { display: none !important; width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
    .ag-ad-mo iframe,
    .ag-ad-mo img { width: 320px !important; height: 50px !important; max-width: none !important; }
}

@media (max-width: 580px) {

    .sec-visual::after { height: 20%; }

    .pc-hidden { display: inline-block; }
    .mo-hidden { display: none; }

    .rank-wrp .tab { font-size: 13px; padding: 6px 16px; min-width: 160px; min-height: 35px; margin-right: 8px; line-height: 24px; }
    .rank-wrp .tab:last-child { margin: 0; }
    .rank { display: inline-block; background: linear-gradient(180deg, rgba(243, 237, 249, 0.3) 0%, rgba(255, 255, 255, 0) 100%); padding: 12px 8px 8px; border: 0; }
    .rank-table { padding: 8px; }
    .rank-table thead th { padding: 0 8px 8px; font-size: 14px; color: #868E96; }
    .rank-table tbody { background: #fff; }
    .rank-table tbody td { padding: 3px 8px; min-height: 48px; }
    .rank-table tbody td.num { padding-left: 0; padding-right: 0; }
    .rank-table tbody td.name, .rank-table tbody td.score { font-size: 14px; }
    .num .icon-wrp { width: 28px; height: 20px; }
    .rank-table .my-tag { width: 30px; height: 18px; font-size: 10px; margin-left: 8px; }

    .homepage-wrp { background-image: linear-gradient(90deg,rgba(42, 17, 179, 1) 24.53%, rgba(42, 17, 179, 0) 61.31%), url(https://img.imbc.com/broad/tv/sports/2026asian/images/banner-mo.png); background-repeat: no-repeat; display: block; padding: 16px; border-radius: 12px; }
    .homepage-wrp p { font-size: 12px; color: #CED4DA; }
    .homepage-wrp strong { font-size: 16px; }
    .homepage-wrp .btn { margin: 16px 0 0; background: rgba(0, 0, 0, .4); border-radius: 11px; padding: 11px 16px; border-color: transparent; }

    .sec-game .wrp { padding-top: 20px; padding-bottom: 50px; }
    .sub-tit .badge { display: none; }
    .ranking-games .game-wrp,
    .free-games .game-wrp { width: calc((100% - 8px) / 2); }
    .ranking-games .game-wrp:nth-child(2n-1),
    .free-games .game-wrp:nth-child(2n-1) { margin-right: 8px; }
    .ranking-games .game-wrp:nth-child(-n+2) { margin-bottom: 8px; }
    .game { border-radius: 10px; }
    .game .img-wrp, .free-games .img-wrp { height: 108px; padding: 9px; }
    .game .img-wrp img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
    .copy { padding: 12px 8px; }
    .copy .cate { font-size: 8px; margin-bottom: 4px; }
    .copy strong { font-size: 15px; line-height: 1.53; }
    .copy p, .copy .start { font-size: 13px; line-height: 20px; }
    .copy p { padding-bottom: 25px; }
    .copy .start { padding: 10px 0; justify-content: center; text-align: center; background: var(--primary) !important; color: #fff !important; border-radius: 15px; }
    .copy .icon { display: none; }
    .empty { font-size: 13px; }

    .sec-credit { padding: 16px 0; }
    .sec-credit .desc { font-size: 14px; padding-right: 16px; }
    .sec-credit .bolder { font-size: 14px; padding: 8px 18px; }

    footer { min-height: 100px; padding: 30px 0 !important; }
    footer p { font-size: 13px; }
}

@media (max-width: 440px) {
    .sec-visual .wrp { padding-top: 20px; }
    .sec-visual .wrp .sub-tit { font-size: 12px; }
    .sec-visual .wrp .desc-wrp { font-size: 14px; margin-right: 0; }
    .sec-visual .wrp .desc { margin: 6px 0 28px; }
    .sec-visual .img-wrp { max-width: 256px; margin-bottom: 70px; }
    .sec-visual .btn { max-height: 40px; }

    .rank a.btn { flex-wrap: wrap; min-height: 45px; }
    .homepage-wrp .btn { font-size: 14px; }

    .rank-table .my-tag { min-width: 30px; height: 18px; }
}

@media (max-width: 360px) {

    .rank-wrp .tab { padding: 6px 16px; min-width: 136px; }

    .sec-visual { padding: 6rem 0 28px; }
    .sec-visual .wrp { padding-top: 16px; }
    .homepage-wrp { margin-top: 20px; }

    .sec-visual .wrp h1 { font-size: 30px; }
    .sec-visual .wrp .desc { font-size: 14px; }
    .sec-credit .bolder { font-size: 14px; padding: 6px 12px; }
}

@media (max-width: 320px) {
    .flex-box { display: block; }
    .rank { display: block; width: 100%; max-width: 100%; padding: 12px 4px 4px; overflow: visible; }
    .rank-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; padding: 0; }
    .rank-table thead,
    .rank-table tbody { display: table; width: 274px; min-width: 274px; }
    .rank-table tbody td { min-height: 44px; }
    .rank a.btn { width: 100%; max-width: 100%; }
    .ranking-games .game-wrp,
    .free-games .game-wrp { width: 100%; margin-bottom: 16px; }
    .ranking-games .game-wrp:nth-child(2n-1),
    .free-games .game-wrp:nth-child(2n-1) { margin-right: 0; }
    .ranking-games .game-wrp:nth-child(-n+2) { margin-bottom: 16px; }
    .ranking-games .game-wrp:last-child,
    .free-games .game-wrp:last-child { margin: 0; }
    .sec-credit .bolder { font-size: 13px; }
}

@media (max-width: 290px) {
    .sec-visual .wrp h1 { font-size: 26px;}
    .sec-visual .wrp .desc { font-size: 13px; }
}

.ag-has-ad { min-height: 100%; height: auto; overflow-x: auto !important; overflow-y: auto !important; }
.sec-ad .ad { position: relative; z-index: 2; display: flex; width: 100%; min-width: 0; min-height: 110px; align-items: center; justify-content: center; overflow: visible; padding: 16px 0; background: #fff; }
.sec-ad .wrp { display: flex; justify-content: center; overflow-x: auto; }
.ag-ad-pc,
.ag-ad-mo { display: none; flex: 0 0 auto; overflow: visible; background: #f7f7f9; }
.sec-ad iframe,
.sec-ad img,
.sec-ad ins { max-width: none; vertical-align: top; }

@media (min-width: 768px) {
    .ag-ad-pc { display: block !important; width: 728px; min-width: 728px; height: 90px; min-height: 90px; }
    .ag-ad-mo { display: none !important; }
    .ag-ad-pc iframe,
    .ag-ad-pc img { width: 728px !important; height: 90px !important; max-width: none !important; }
}

@media (max-width: 339px) { .sec-ad .ad { justify-content: flex-start; } }