@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; overflow: hidden; border-bottom: 1px solid #dee3eb; transition: height 0.25s ease; }
.header-wrap .gnb ul { white-space: nowrap; height: 80px; 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: 14.5px; 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: #d10026; }

@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: #d10026; 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 #a20622; background: #d10026; 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; }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .login-btn .user-img { width: 45px; height: 45px; 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%; opacity: 0.7; }
.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 .register-btn,
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .team-page-btn,
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .mypage-btn { height: 55px; padding: 0 20px; display: block; line-height: 53px; font-size: 14px; color: rgba(255,255,255,0.8); text-align: center;  float:left; width:50%;border-top: 1px solid #a03347; position: relative;}
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .register-btn:after {position: absolute; top:20px; right:0; width:1px; height:15px; content: ''; display: block; background: #a03347;}
.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: #a20622; padding: 6px 15px; color: rgba(255,255,255,0.4); font-size: 11px; text-align: left; }
.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: 14px; color: rgba(255,255,255,0.8); display: block; line-height: 50px; border-bottom: 1px solid #a20622; background: #d10026; white-space: nowrap; overflow: hidden; }
.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 #a20622; }
.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: rgba(0,0,0,0.2); }
.header-wrap .header-top .slide-menu-area-wrap .slide-menu-area .slide-menu .scroll-wrap .no-login {overflow: hidden; background:#880018;}
.header-wrap.scroll .header-top { background: #d10026; }
.header-wrap.scroll .header-top .logo img.w-logo { display: block; }
.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; }

/* 푸터 */
.footer-wrap { margin-top: 50px; }
.footer-wrap .info { background: #a20622; padding: 15px 10px; text-align: center; }
.footer-wrap .info .box { font-size: 12px; color: #ce959f; font-weight: 300; }
.footer-wrap .info .contact { font-size: 12px; color: #ce959f; font-weight: 300; margin-top: 2px; }
.footer-wrap .copyright { background: #630617; text-align: center; padding: 10px; font-size: 11px; color: #ad7881; }



.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: #d10026; }
.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: #d10026; }
.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: #d10026; }
.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; }







/* 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 .my-box {overflow: hidden;}



/* 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;}