@charset "UTF-8";
/* CSS Document */
.align-left { text-align: left!important; }

.table-01 { }
.table-01 dt, .table-01 dd { display: flex; justify-content: space-between; padding: 15px 0; margin-bottom: 0; }
.table-01 dt { border-top: solid 1px #e1e1e1; border-bottom: solid 2px #1C2747; font-weight: 600; }
.table-01 dd { border-bottom: solid 1px #e1e1e1; }
.table-01 dt div, .table-01 dd div { text-align: center; display: inline-block; }

.table-02 { width: 100%; border-top: solid 1px #1C2747; }
.table-02 th, .table-02 td { margin-bottom: 0; text-align: center; }
.table-02 th { border-bottom: solid 1px #1C2747; font-weight: 600; }
.table-02 td { border-bottom: solid 1px #1C2747; }
.table-02 td a { width: 100%; height: 100%; display: block; padding: 10px 0; }
.table-02 td a:hover { background-color: #E7B74A; }
.table-02 td a.active { background-color: #FFE8B5; }

.table-03 { width: 100%; border-top: solid 1px #1C2747; }
.table-03 th, .table-03 td { margin-bottom: 0; text-align: center; padding: 10px 0; }
.table-03 th { border-bottom: solid 1px #e1e1e1; font-weight: 600; }
.table-03 td { border-bottom: solid 1px #e1e1e1; }


.page_area { text-align:center;  /*border:1px solid #d3d3d3;*/ padding:21px 0; clear: both; }
.page_area a { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; border:1px solid #d3d3d3; text-decoration:none; margin:0 5px;
color:#6a6a6a; border-radius: 5px; }
.page_area span.now_page { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; border:1px solid #1C2747; text-decoration:none;
	margin:0 5px; color:#fff; background-color:#1C2747; border-radius: 5px; }
.page_area a img{ vertical-align:top; }
.page_area a.btn { width:38px; }
.page_area a.on, .page_area a:hover { background-color:#1C2747; color:#fff; border:1px solid #1C2747; }

.title-bar { padding: 30px 50px; border-radius: 10px; color: #fff; font-size: 24px; margin-bottom: 50px; background: #0A73DE url("../img/ball_icon.png") no-repeat; background-position: 96% -57px;  }
.title-bar span { display: block; font-size: 34px; font-weight: 700; }
.info-text { margin: 30px 0; }
.info-text span { font-size: 21px; font-weight: 500; }

.board-view .title { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.board-view .meta { display: flex; }
.board-view .meta .date { color: #666; margin-right: 10px; }
.board-view .meta .date::after, .board-view .meta .name::after { content: "ㅣ"; padding-left: 10px; color: #e1e1e1; }
.board-view .meta .name { color: #BB8C32; margin-right: 10px; }
.board-view .file-box { padding: 10px 0; margin: 10px 0 30px; border-top: solid 2px #1C2747; border-bottom: solid 1px #e1e1e1; display: flex; flex-direction: column; }
.board-view .file-box span em { color: #BB8C32; }
.board-view .file-box a { text-decoration: underline; padding-left: 30px; background: url(../img/file_download.svg) no-repeat; }
.board-view .content p { margin-bottom: 6px; }
.board-view .content p:last-child { margin-bottom: 0; }
.board-view .prenext { margin: 30px 0; border-top: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; padding: 30px 0; }
.board-view .prenext .nexttext { margin-right: 30px; color: #666; }
.board-view .reply-box { margin-top: 50px; border-top: solid 2px #1C2747; padding-top: 20px; }

.game-summery-box { border: solid 1px #e1e1e1; padding: 50px; border-radius: 10px; }
.game-table { display: flex; justify-content: space-between; flex-wrap: wrap; }
.game-table div { width: 48%; margin-bottom: 30px; }
.game-table div.full { width: 100%; }

.table-wr { }
.table-wr dl { display: flex; justify-content: space-between; flex-wrap: wrap; }
.table-wr dl dd { width: 50%; }
.table-wr dl dd.full { width: 100%; }
.table-wr dl dd { border-bottom: solid 1px #E1E1E1; padding-bottom: 10px; }
.table-wr dl dd .tit { font-size: 24px; font-weight: 700; }
.table-wr dl dd .stit { font-size: 14px; }
.table-wr dl dd .text { font-size: 18px; font-weight: 700; }

.list-check { width: 18px; height: 18px; border: solid 1px #e1e1e1; border-radius: 5px; }

.item-list { width: 100%; }
.item-list li { width: 100%; margin-bottom: 20px; padding: 30px 50px; background-color: #F0F7FD; border-radius: 10px; }
.item-list li:last-child { margin-bottom: 0; }
.item-list li .dot-text { position: relative; color: #0A73DE; }
.item-list li .dot-text::before { content: "●"; position: absolute; left: -20px; }
.item-list li .team-name { text-align: center; }
.item-list li .team-name .thumb { width: 100px; height: 80px; overflow: hidden; position: relative; margin-bottom: 10px; }
.item-list li .team-name .thumb img { position: absolute; left: 0; top: 0; width: 100%; border-radius: 10px; }
.item-list li .score-wr { font-size: 34px; font-weight: 700; }

.help-box { width: 100%; padding: 20px 0 12px; }
.help-box ul { display: flex; }
.help-box li { line-height: 12px; text-align: center; border: 0; }
.help-box li a { display: block; margin-right: 8px; padding-right: 8px; border-right: 1px solid #e1e1e1; }
.help-box li:last-child a { border-right: 0; }
.help-box a.active { color: #4261B5; font-weight: 600; }

.ranking-list { border-top: solid 1px #e1e1e1; }
.ranking-list .item { border-bottom: solid 1px #e1e1e1; padding: 15px 0; }
.ranking-list .item .text01 { margin-bottom: 10px; font-weight: 700; }
.ranking-list .item .text01 span { font-size: 21px; margin-right: 20px; }
.ranking-list .item .table li { display: flex; justify-content: space-between; }
.ranking-list .item .table li p span { display: block; }
.ranking-list .item .table li p span.title { font-size: 14px; color: #666; }
.ranking-list .item .table li p span.num { font-size: 21px; font-weight: 700; color: #4261B5; }

.ply-list { margin-bottom: 30px; }
.ply-list ul { border-top: solid 1px #e1e1e1; }
.ply-list ul li { border-bottom: solid 1px #e1e1e1; padding: 10px; }
.ply-list ul li .box01 { width: 20%; }
.ply-list ul li .box01 img { border-radius: 10px; }
.ply-list ul li .box02 { width: 60%; }
.ply-list ul li .box02 .text01 { font-size: 18px; font-weight: 700; }
.ply-list ul li .box02 .text02 { }
.ply-list ul li .box02 .text03, .ply-list ul li .box02 .text04, .ply-list ul li .box02 .text05 { color: #666; font-size: 14px; }
.ply-list ul li .round-tip { width: 20%; text-align: right; }
.ply-list ul li .round-tip span { display: block; }
.ply-list ul li .round-tip .round-text { display: inline-block; border: solid 3px #0A73DE; color: #0A73DE; padding: 5px 20px; border-radius: 30px; }
.ply-list ul li .round-tip .score { font-size: 24px; padding-right: 20px; margin-top: 20px; }

.table-scroll-wrap { margin-top: 30px; width: 100%; overflow-x: scroll; }
.table-scroll-wrap .scroll-inner { width: 900px; padding: 0 0 30px 0; }
.table-line { width: 100%; }
.table-line th, .table-line td { height: 50px; padding: 0 4px; vertical-align: middle; text-align: center; border-bottom: 1px solid #f1f1f1; }
.table-line td { padding: 5px 0; }
.table-line td.left { text-align: left; }
.table-line th { border-bottom: 2px solid #333; }
.align-btn { position: relative; display: inline-block; vertical-align: middle; cursor: pointer; width: 10px; height: 12px; }
.align-btn:before, .align-btn:after { display: block; clear: both; content: ''; width: 5px; height: 1.5px; background: #333; position: absolute; top: 5px; }
.align-btn:before { transform: rotate(-45deg); left: 1px; }
.align-btn:after { left: 4px; transform: rotate(45deg); }
.align-btn.active { transform: rotate(180deg); }

/* Chart Styles */
.chart-box { display: flex; }
.chart-box .center { width: 20%; text-align: center; }
.chart-box .left, .chart-box .right { width: 40%; }
.chart-wrap { margin: 30px auto; }
.chart-wrap .chart-title { margin-bottom: 10px; font-size: 18px; text-align: center; }
.chart-wrap .row { position: relative; margin-bottom: 10px; }
.chart-wrap .bar-wrap { position: relative; background: #e5e5e5; width: 100%; height: 20px; overflow: hidden; border-radius: 20px; }
.chart-wrap .bar-wrap .bar { position: absolute; top: 0; height: 100%; background: #4261B5; }
.chart-wrap .bar-wrap.first .bar { transform: translateX(100%); right: 0; }
.chart-wrap .bar-wrap.second .bar { transform: translateX(-100%); left: 0; }
.chart-wrap .bar-wrap.second .bar { background: #F46969; }
.chart-wrap .bar-wrap.second .bar.in { transform: translateX(0%); }
.chart-wrap .bar-wrap.first .bar.in { transform: translateX(0%); }
.chart-wrap .chart-box .chart .row .bar-wrap .bar { transition: 1s 400ms; }
.chart-wrap .label { display: block; margin-bottom: 4px; font-size: 14px; line-height: 1.6; z-index: 10; font-weight: 600; }
.chart-wrap .number { position: absolute; top: 0; right: 0; width: 30px; padding-right: 10px; font-size: 14px; line-height: 20px; font-weight: bold; text-align: right; z-index: 10; color: #fff; }
.chart-wrap .sort { margin-bottom: 20px; text-align: center; }
.chart-wrap .sort p { display: inline-block; margin-right: 6px; }
.chart-wrap .sort .square { display: inline-block; width: 16px; height: 8px; border-radius: 8px; }
.chart-wrap .sort .first { background: #4261B5; }
.chart-wrap .sort .second { background: #F46969; }