@charset "utf-8";

/* 모바일 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; vertical-align: top; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility!important; -webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; vertical-align: top; min-width: 300px; }
html, body { width:100%; height:100%; }
a:active { background-color:transparent; }
body .container-wrap .container { position: relative; }
.raj {font-family: 'Rajdhani','Noto Sans KR','Sans-serif';}

/* 폰트*/
body { font-family: 'Noto Sans KR','애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo','맑은 고딕','Malgun Gothic','HelveticaNeue', sans-serif; color: #2d2d2d; background-color: #f2f4f7; }
a { text-decoration:none; color: #2d2d2d; }

/*폼 요소*/
input,textarea,option,button,select { font-family:  'Noto Sans KR','애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo','맑은 고딕','Malgun Gothic','HelveticaNeue', sans-serif; font-size:15px; color:#2d2d2d; outline: 0; -webkit-border-radius:0; -webkit-appearance:none; }
table { border-spacing: 0; border-collapse: separate; }

/* 클리어픽스 */
.clearfix:after {display: block; content:''; clear: both;}

table { border-spacing: 0; border-collapse: separate; }

/* select 화살표 삭제 */
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}

/* placeholder 글씨색 */
::-webkit-input-placeholder {color: #8c8c8c;}
:-moz-placeholder {color: #8c8c8c;}
::-moz-placeholder {color: #8c8c8c;}
:-ms-input-placeholder {color: #8c8c8c;}


/*헤더*/
.header-wrap { height: 110px; background: #fff; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 98; transition: height .25s ease; }
.header-wrap .header-top { height: 70px; text-align: center; position: relative; transition: background .25s ease; }
.header-wrap .header-top .logo {margin:0;margin-top: 5px; }
.header-wrap .header-top .logo img { width: auto; height: 65px; padding:5px 0; }
.header-wrap .header-top .logo img.w-logo { display: none; }
.header-wrap .header-top .menu-title { line-height: 55px; font-weight: bold; color: #2932CB; transition: color .25s ease; }
.header-wrap .header-top .toggle-menu-btn { width: 26px; height: 26px; display: block; position: absolute; z-index: 2; top: 20px; left: 10px; text-align: center; padding: 3px; transition: background .25s ease; border-radius: 3px; }
.header-wrap .header-top .toggle-menu-btn img { width: 100%; }
.header-wrap .header-top .toggle-menu-btn img.w-ico { display: none; }
.header-wrap .header-top .toggle-menu-btn:hover { background: rgba(0,0,0,0.2); }
.header-wrap .gnb { width: 100%; height: 40px; border-bottom: 1px solid #dee3eb; transition: height 0.25s ease; }
.header-wrap .gnb ul { white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; }
.header-wrap .gnb ul::-webkit-scrollbar { display:none; }
.header-wrap .gnb ul li { display: inline-block; height: 40px; }
.header-wrap .gnb ul>li a { display: block; height: 100%; font-size: 14px; padding: 0 15px; line-height: 38px; cursor: pointer; font-weight: 400; color: #333; letter-spacing: -0.5px; }
.header-wrap .gnb>ul>li.select a { color: #000ca2; }

@media all and (min-width : 375px )
{
	.header-wrap .gnb { text-align: center; }
}

.header-wrap .header-top .slide-menu-area-wrap { position: fixed; top: 0; left: -100%; width: 0; bottom: 0; right: 0; z-index: -1; background: rgba(0,0,0,0.8); opacity: 0; transition: opacity .5s ease; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area { position: fixed; top: 0; bottom: 0; left: -310px; width: 0; height: 100%; background: #eff0f5; transition: left .5s ease; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu { width: 100%; height: 100%; position: relative; }
.header-wrap .header-top #toggle_menu:checked ~ .slide-menu-area-wrap { z-index: 99; opacity: 1; left: 0; width: 100%; }
.header-wrap .header-top #toggle_menu:checked ~ .slide-menu-area-wrap .slide-menu-area { left: 0; width: 280px; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .home-btn { width: 100%; height: 70px; text-align: center; border-bottom: 2px solid #131967; background: #00075d; padding: 0 15px; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .home-btn a {width:auto; height:40px; margin-top:15px; display:inline-block; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .home-btn a img { width:auto; height:100%; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .close-btn { position: absolute; top: 13px; right: -30px; width: 18px; height: 18px; background: none; border: none; opacity: 0.8; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login-btn { padding: 17px 15px 5px; display: block; line-height: 43px; font-size: 14px; color: rgba(255,255,255,0.8); text-align: left;  text-align: center; padding-top:40px; border-bottom:1px solid #262a5b; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login-btn .user-img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; display: block; margin: 0 auto; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login-btn .user-img img { width: 100%; height: 100%; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login .user-info { height: 80px; padding: 17px 15px; display: block; line-height: 43px; font-size: 17px; color: rgba(255,255,255,0.8); text-align: left; position: relative; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login .user-info .user-img { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; display: inline-block; margin-right: 8px; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login .user-info img { width: 100%; height: 100%; opacity: 1; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login .user-info .user-name { font-weight: bold; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login .user-info .logout-btn { color: #fff; font-size: 11px; right: 15px; position: absolute; height: 25px; padding: 0 12px; border: 1px solid #fff; border-radius: 20px; line-height: 23px; background: none; top: 50%; margin-top: -12px; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login-btn .arrow-ico { float: right; width: 8px; margin-top: 15px; opacity: 0.3; }

.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .gnb-list .category:last-child { margin-bottom: 0; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .gnb-list .category h2.title-menu { height:28px; background: #ffffff; padding: 6px 15px; color: #2d2d2d; font-size: 11px; text-align: left; border-bottom:1px solid #e9e9f1;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .gnb-list .category:after { clear: both; height: 0; display: block; content: ''; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .gnb-list .category a { float: left; width: 50%; padding: 0 15px; text-align: left; font-size: 13px; color: #2d2d2d; display: block; line-height: 50px; border-bottom: 1px solid #e8e8ec; background: #eff0f5; white-space: nowrap; overflow: hidden; letter-spacing: -0.05px;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .gnb-list .category a:nth-of-type(2n-1) { border-right: 1px solid #dddde8; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .gnb-list .category a .arrow-ico { float: right; width: 7px; margin-top: 19px; opacity: 0.3; }

.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .scroll-wrap { width: 310px; padding-right: 0; height: calc(100% - 30px); overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; }
.header-wrap .header-top #toggle_menu:checked ~ .slide-menu-area-wrap .slide-menu-area .slide-menu .scroll-wrap { padding-right: 30px; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .scroll-wrap::-webkit-scrollbar { display:none; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .slide-menu-foot { color: rgba(255,255,255,0.4); height: 30px; line-height: 30px; font-size: 11px; background: #00053e; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .scroll-wrap .team-logo {overflow: hidden; background:#00053e;}
.header-wrap.scroll .header-top { background: #00075d; }
.header-wrap.scroll .header-top .logo img.w-logo { display: block; margin: 0 auto;}
.header-wrap.scroll .header-top .logo img.b-logo { display: none; }
.header-wrap.scroll .header-top .toggle-menu-btn img.w-ico { display: block; }
.header-wrap.scroll .header-top .toggle-menu-btn img.b-ico { display: none; }
.header-wrap.scroll { height: 45px; }
.header-wrap.scroll .gnb { border-bottom: none; height: 0; overflow: hidden; }
.header-wrap.scroll .header-top .menu-title { color: #fff; }
.header-wrap.scroll + .content-wrap { padding-top: 45px; }

/* depth02 */
.header-wrap .gnb .depth02 {width:100%; height:40px; line-height: 40px; background:#131967;}
.header-wrap .gnb .depth02 li {display: inline-block; width:auto; height:100%; font-size:13px; letter-spacing: -0.5px; text-align: center;}
.header-wrap .gnb .depth02 li.select {background:#00053e;}
.header-wrap .gnb .depth02 li a {color:#fff; display: inline-block; width:100%; height:100%;}
.header-wrap.scroll .header-top {background:#131967;}

/* 푸터 */
.footer-wrap { margin-top: 50px; }
.footer-wrap .info { background: #131967; padding: 15px 10px; text-align: center; }
.footer-wrap .info .box { font-size: 12px; color: #8185b7; font-weight: 300; }
.footer-wrap .info .contact { font-size: 12px; color: #8185b7; font-weight: 300; margin-top: 2px; }
.footer-wrap .copyright { background: #00053e; text-align: center; padding: 10px; font-size: 11px; color: #555f71; }



.match-info .info-box { text-align: center; background: #fff; width: 100%; height: 250px; padding-top: 20px; position: relative; z-index: 1; margin-bottom:10px; border-top:1px solid #dee3eb; border-bottom:1px solid #dee3eb;}
.match-info .info-box .date-time .date { display: inline-block; font-size: 1.1rem; font-weight: bold; }
.match-info .info-box .date-time .date .unit { font-size: 0.9rem; vertical-align: baseline;}
.match-info .info-box .date-time .time { display: inline-block; margin-left: 5px; font-size: 1.1rem; font-weight: bold; color: #00075d; }
.match-info .info-box .league { font-size: 0.8rem; color: #555; padding: 0 20px; }
.match-info .info-box .team-info-wrap { position: absolute; top: 80px; left: 0; width: 100%; height: 130px; }
.match-info .info-box .team-info-wrap .team-info { float: left; width: 50%; height: 100%; text-align: center; }
.match-info .info-box .team-info-wrap .team-info .logo-area { width: 50px; height: 50px; position: relative; overflow: hidden; display: inline-block; }
.match-info .info-box .team-info-wrap .team-info .logo-area .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: 100%; }
.match-info .info-box .team-info-wrap .team-info .logo-area .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.match-info .info-box .team-info-wrap .team-info .team-name { margin-top: 5px; font-size: 0.8rem; font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; }
.match-info .info-box .team-info-wrap .team-info .team-name a:hover { color: #00075d; }
.match-info .info-box .team-info-wrap .team-info .score { font-size: 1.3rem; margin-top: 5px; color: #999; font-weight: 600; }
.match-info .info-box .team-info-wrap .team-info .score.red { color: #ff2121; }
.match-info .info-box .versus { position: absolute; font-size: 1rem; color: #dddcdc; font-weight: 900; width: 22px; height: 20px; left: 50%; margin-left: -11px; top: 30px; z-index: 2; }
.match-info .info-box .result-label { position: absolute; height: 20px; width: 62px; text-align: center; font-size: 1.1rem; line-height: 20px; border-radius: 10px; font-weight: 300; left: 50%; margin-left: -31px; z-index: 2; bottom: 25px; }
.match-info .info-box .result-label.red { background-color: #ff2121; color: #fff; font-size: 0.7rem }
.match-info .info-box .result-label.grey { background-color: #aeaeae; color: #fff;font-size: 0.7rem; }
.match-info .info-box .btn-wrap { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 40px; border-top: 1px solid #dee3eb; overflow: hidden; }
.match-info .info-box .btn-wrap a { height: 100%; line-height: 39px; font-size: 1.2rem; font-weight: 500; color: #555; display: block; float: left; width: 50%; position: relative; }
.match-info .info-box .btn-wrap a:hover { color: #00075d; }
.match-info .info-box .btn-wrap a.highlight { border-right: 1px solid #dee3eb; font-size:0.8rem; }
.match-info .info-box .btn-wrap a.detail-result {  font-size:0.8rem;}
.match-info .info-box .btn-wrap.disabled a { color: rgba(136, 136, 136, 0.5); cursor: not-allowed; background: #f1f1f1; }
.match-info .info-box .btn-wrap.disabled a.highlight:before { opacity: .2; }
.match-info .info-box .btn-wrap.disabled a.detail-result:before { opacity: .2; }


/* 컨텐츠 박스 공통 */
.content-wrap {padding-top:110px;}
.content-wrap .main-content .basic-content .content-title {width: 100%; height:40px; line-height: 40px; background:#d10026; color: #fff; font-size:14.5px; letter-spacing: -0.5px; text-align: center; }
.content-wrap .main-content .basic-content .content-box { position: relative; margin-top:10px; border-top:1px solid #d7dade; background:#fff; padding: 15px 10px;  border-bottom:1px solid #d7dade;}
.content-wrap .main-content .basic-content .content-box:nth-child(1) {margin-top:50px;}
.content-wrap .main-content .basic-content .content-box > .title {position:relative;font-size: 15px; line-height: 15px; font-weight: bold; margin-bottom:10px; padding-left: 10px;}
.content-wrap .main-content .basic-content .content-box > .title:after {content:'';display:block; position:absolute; top:5px; left:0; width:4px; height:4px; background:#2932CB;}
.content-wrap .main-content .basic-content .content-box > .title p {font-size: 12px; font-weight: 400; padding-top:10px; color:#767676;}

/* table style*/
.content-wrap .main-content .basic-content .content-box .list-wrap > div {float:left;}
.content-wrap .main-content .basic-content .content-box .list-wrap .list-table {width:calc(100% - 150px); white-space:nowrap; -ms-white-space:nowrap; -ms-overflow-style: none; overflow-x: auto; background:#fff;}
.content-wrap .main-content .basic-content .content-box .list-wrap .list-table::-webkit-scrollbar {display:none;}
.content-wrap .main-content .basic-content .content-box .list-wrap table {width:100%; font-size:13px; letter-spacing: -0.5px; text-align: center;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr th {border-top:2px solid #2932CB; border-bottom:1px solid #d7dade; text-align: center; padding:10px 15px; background:#f8f8f8;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td {padding:0 20px; height: 40px; vertical-align: middle; border-bottom:1px solid #d7dade; background:#fff;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td img.player-th {width: 20px;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr.light-red-bg td {background: #FFF1F1;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td span.green {color: #00984F; font-weight: 500;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td.team-name {font-weight:bold;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td.team-name span {display: inline-block; padding:0 3px;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td.team-name span.left-team {color: #131967;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td.team-name span.right-team {color: #2932CB;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr td .btn {font-size:12.5px; background:#27292D; border-radius: 5px; color:#fff; padding:5px 10px;}
.content-wrap .main-content .basic-content .content-box .list-wrap table tr.my-list td {background:#fdf2f4;}
.content-wrap .main-content .basic-content .content-box .list-wrap .list-table-fixed, 
.content-wrap .main-content .basic-content .content-box .list-wrap .list-table-fixed02 {position:relative; z-index:1; width:150px; background:#fff; box-shadow:5px 0px 5px rgba(0, 0, 0, 0.1);}

/* 버튼 스타일 */
.normal-btn{height: 30px; line-height: 28px; font-size: 12px; background: #fff; display: block; width: 100px; border-radius: 3px; color: #00053e; border: 1px solid #00053e;; }
.red-btn{height: 30px; line-height: 28px; font-size: 12px; background: #fff; display: block; width: 100px; border-radius: 3px; color: #00053e; border: 1px solid #00053e;; }
.upload-btn {margin: 15px auto; width: calc(100% - 20px); height: 40px; line-height: 38px; font-size: 13px; background: #2932cb; display: block; border-radius: 3px; color: #fff; border: none;}
.del-btn {background: #d70003; height: 25px; line-height: 23px; padding: 0 15px; font-size: 11px; border:0; border-radius: 3px; color:#fff;}
.blue-btn {background: #2932cb; height: 25px; line-height: 23px; padding: 0 15px; font-size: 11px; border:0; border-radius: 3px; color:#fff;}
.white-btn {background: #f8f8f8; height: 25px; line-height: 23px; padding: 0 15px; font-size: 11px; border:0; border-radius: 3px; color:#555; border:1px solid #e5e5e5}

/* 이전 다음 버튼 */
.content-wrap .main-content .basic-content .content-box .list-button {margin-top:15px; border-radius: 3px; overflow: hidden;}
.content-wrap .main-content .basic-content .content-box .list-button button {float:left; width:50%; height:35px; border:0; font-size: 14px;}
.content-wrap .main-content .basic-content .content-box .list-button .next {background:#2932cb; color:#fff;}

/* 필수 표시 */
.imp {margin-left:3px; color: #ff1212;}

/* select, textarea*/
textarea { height: 150px; border: 1px solid #dee3eb; font-size: 13px; width: 100%; padding: 10px; resize: none; }
select { border: 0; width: 100%; height: 30px; border: 1px solid #d7dade; padding: 0 7px; background: url(../../../img/sub/join/down_b_ico.svg) no-repeat 99% 50%; background-size: 15px 15px; font-size: 13px; border-radius: 3px;}
input[type="text"] {width:100%; border: 1px solid #dee3eb; font-size: 13px; width: 100%; padding: 10px;}

/* left nav logout*/
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .log-box {position: relative; width:250px; height:38px; line-height: 38px; border-radius: 50px; background:rgba(255,255,255,.2); font-size:13px; margin: 0 auto 20px;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .log-box.mg-top20 {margin-top:20px;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .log-box a {color:#fff;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .log-box a.login,
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .log-box a.join { position: relative;display: inline-block; width:49%; color:#fff;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .log-box a.login:nth-child(1):after {content: ''; display: block; position: absolute; width:1px; height:15px;right:0; top:13px; background:#ab5464;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .team-master-btn { position: relative; width:250px; height: 38px; line-height: 36px; border-radius: 50px; background: rgba(255,255,255,.15); font-size: 13px; margin: 20px auto; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .team-master-btn a {color:#fff;}

/* 커스텀 체크 */
.custom-check { display: none; }
.custom-check-label { padding-left: 20px; width: 15px; height: 15px; position: relative; }
.custom-check-label:before { position: absolute; content: ''; width: 15px; height: 15px; left: 0; top: 50%; margin-top: -7px; background: url("../../img/common/check.png"); background-size: 15px 30px; background-position: 0 0; }
.custom-check:checked + .custom-check-label:before { background-position: 0 -15px; }

/* 커스텀 라디오 */
.custom-radio { display: none; }
.custom-radio-label { padding-left: 20px; width: 15px; height: 15px; position: relative; }
.custom-radio-label:before { position: absolute; content: ''; width: 15px; height: 15px; left: 0; top: 50%; margin-top: -7px;  background: url(../../img/common/radio.png); background-size: 15px 30px; background-position: 0 0; }
.custom-radio:checked + .custom-radio-label:before { background-position: 0 -15px; }


/* text-align */
.txt-center {text-align: center;}
.txt-left {text-align:left;}
.txt-right {text-align: right;}
.txt-red {color:#dc4f4f;}
.txt-org {color:#e7a824;}
.mg-bottom {margin-bottom:10px;}