@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height: 100vh; min-height: 930px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
.main-visual-con{position: relative; width: 100%; height:100%; z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
     transform: scale(1.05,1.05);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-m-img{
	width:100%; height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
	-webkit-transition:transform 3000ms  ease-in-out ;
    transition:transform 3000ms ease-in-out ;	
}
.main-visual-m-img{display: none;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-inner{padding-top: 90px;}
.main-visual-txt-con .main-visual-txt1,
.main-visual-txt-con .main-visual-txt2,
.main-visual-txt-con .main-visual-txt3,
.main-visual-txt-con .main-visual-txt4,
.main-visual-txt-con .main-visual-date{
	opacity:0; 
}
.main-visual-txt-con .main-visual-txt1{margin-bottom: 5px; font-size:20px; line-height:1.3; font-weight:600; letter-spacing: -0.025em; color: var(--main-color); font-weight:600;}
.main-visual-txt-con .main-visual-txt2{margin-bottom:30px; font-size:20px; line-height: 1.3; letter-spacing:-0.075em; font-weight: 400; color:#000;}
.main-visual-txt-con .main-visual-txt3{margin-bottom:55px; font-size:30px; line-height: 1.3; letter-spacing:-0.075em; font-weight: 500; color:#000;}
.main-visual-txt-con .main-visual-txt4{margin-bottom:65px; font-size:60px; line-height: 1.1; letter-spacing:-0.075em; font-weight: 400; color:#000;}
.main-visual-txt-con .main-visual-txt4 b{margin-bottom: 10px; font-size: 82px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; display: block;}
.main-visual-txt-con .main-visual-date{padding: 35px 50px; border-radius: 25px; position: relative; background: var(--main-color-sub) url('../images/main/main_date_bg.png') left top no-repeat; background-size: auto; text-align: left;}
.main-visual-txt-con .main-visual-date .img{position: absolute; top: 0; left: 0; transform: translate(-30%,-30%); display: block;}
.main-visual-txt-con .main-visual-date dl{display: flex; flex-wrap:wrap; align-items: center;}
.main-visual-txt-con .main-visual-date dl + dl{margin-top: 20px;}
.main-visual-txt-con .main-visual-date dt{width: 95px; font-size: 17px; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: #fff;}
.main-visual-txt-con .main-visual-date dd{width: calc(100% - 95px); font-size: 20px; line-height: 1.3; letter-spacing: -0.035em; font-weight: 500; color: #fff;}
.main-visual-txt-con .main-visual-date dl:nth-child(2) dd{color: #f3e43e;}
/* 메인 비주얼 :: active효과 */
#mainVisual.active .main-visual-m-img,
#mainVisual.active .main-visual-pc-img{
	-webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}
#mainVisual.active .main-visual-txt1,
#mainVisual.active .main-visual-txt2,
#mainVisual.active .main-visual-txt3,
#mainVisual.active .main-visual-txt4,
#mainVisual.active .main-visual-date{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
#mainVisual.active .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt3{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt4{-webkit-animation-delay:0.8s; animation-delay:0.8s;}
#mainVisual.active .main-visual-txt-con .main-visual-date{-webkit-animation-delay:1s; animation-delay:1s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Baketball League) -------- */
#mainLeagueResult{padding: 55px 0 135px;}
.main-league-result-tit{margin-bottom: 50px; font-size: 66px; font-weight: 700; color: #000;}
.main-league-result-tit b{color: #b91818; color: var(--main-color);}

/* 탭 :: 팀순위 & 개별순위 */
.main-league-result-con .tab01{overflow:hidden;;}
.main-league-result-con .tab01 li{float:left; width:50% ; background:#b9b9b9; position:relative; box-sizing:border-box; border-radius: 25px 25px 0 0;}
.main-league-result-con .tab01 li:last-child{border:0;}
.main-league-result-con .tab01 li a{width:100%; height:70px; line-height:70px;  color:rgba(255,255,255,0.9); text-align:left; padding-left:40px; font-size:21.5px; letter-spacing: -0.05em; box-sizing:border-box; display: block;}
.main-league-result-con .tab01 li span{position:absolute; top:50%; right:40px; font-size:18px; font-weight: 700; line-height:1; letter-spacing: 0; transform:translateY(-50%);}
.main-league-result-con .tab01 li.on {background-color: #b91818; background-color: var(--main-color);}
/* 탭 :: 조별 */
.main-league-result-con .tab02{background:#000; height:70px; padding:0 40px;}
.main-league-result-con .tab02 li{margin-left: 30px; display: inline-block;}
.main-league-result-con .tab02 li:first-child{margin-left: 0;}
.main-league-result-con .tab02 li a{line-height:70px; color:#dedede; font-size:20px; font-weight:600; letter-spacing: -0.35px;}
.main-league-result-con .tab02 li i {position: relative; top: 2px; font-size: 20px; margin-right: 10px;}
.main-league-result-con .tab02 li.on a{color:#ffac40;}

.main-league-result-box{display: flex; border:1px solid #cfcfcf; border-top: 0;}
/* 탭 :: 지역별 */
.main-league-result-box .tab03 {width: 200px; height:350px;}
.main-league-result-box .tab03 li{width: 100%; border-top:1px solid #ddd;}
.main-league-result-box .tab03 li:first-child{border-top:0;}
.main-league-result-box .tab03 li a{width:100%; height: 87px; text-align:center; display:block; font-size:20px; color:#333; background:#f7f7f7;  border-right:1px solid #ddd; box-sizing:border-box; display: flex; align-items: center; justify-content: center; text-align: center;}
.main-league-result-box .tab03 li.on a{background:#fff; border-right-color:#fff; color:#d48f34;}

/* 리스트 */
#Southeast{width: calc(100% - 200px); display:block; height:351px; background:#fff; overflow-y: auto;}
#Southeast::-webkit-scrollbar{width: 15px;}
#Southeast ul{padding: 0 7.8%;}
#Southeast li{display:table; table-layout: fixed; width:100%; border-bottom:1px dashed #ddd;}
#Southeast li:last-child{border-bottom: 0;}
#Southeast li p{display:table-cell; vertical-align:middle; padding: 14.5px 0; text-align: center; font-size: 17px; line-height: 1.3; letter-spacing: -0.6px; color: #000;}
#Southeast li .ranking {width: 50px;}
#Southeast li .ranking span {display: inline-block; width: 40px; height: 40px; line-height: 44px; font-size: 13px; letter-spacing: -0.65px; color: #000; text-align: center; -webkit-border-radius: 100%; border-radius: 100%;}
#Southeast li .ranking span.first{background-color: #ffac40;}
#Southeast li .ranking span.second{background-color: #ccc;}
#Southeast li .ranking span.third{background-color: #d8b760;}
#Southeast li .team-logo {width: 110px;}
#Southeast li .team-logo img {max-height: 36px;}
#Southeast li .name {padding: 0 15px; text-align: left;}
#Southeast li .result {width: 130px; text-align:right;}
#Southeast .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: var(--main-color);}


/* ******************  메인 커서 이펙트 ********************** */
#cmMainCursor{width: 140px; height: 140px;position: fixed; top: 0; left: 0; z-index: 99998; pointer-events: none; mix-blend-mode: difference;}
.cm-cursor-inner {display: block; width: 100%; height: 100%; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.cm-cursor-circle {display: block; width: 0; height: 0; position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -90px; overflow: hidden; opacity: 0; border-radius: 50%; z-index: 1;background: #eee no-repeat center center;}
#cmMainCursorTxt{width: 140px; height: 140px;position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;}
#cmMainCursorTxt .cm-cursor-circle{background: transparent;}
#cmMainCursorTxt img{position: absolute; top: 50%; left: 50%; margin-top: -53.5px; margin-left: -53px; width: 106px; height: 107px; animation: spin 10s infinite linear;}