@charset "utf-8";

  

/* 비디오 영역 */
.content-wrap .main-content .basic-content .content-box .video-area {width:100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.content-wrap .main-content .basic-content .content-box .video-area iframe {width: 100%; height:auto;}
.content-wrap .main-content .basic-content .content-box .video-area ul {width:100%; padding: 15px 10px; border:1px solid #d7dade; border-top:0; } 
.content-wrap .main-content .basic-content .content-box .video-area ul.top li {position:relative;float:left; font-size:12px; padding-right:15px; color: #999; letter-spacing: -0.25px; }
.content-wrap .main-content .basic-content .content-box .video-area ul.top li.title {width:100%; font-size:14px; font-weight: 700; padding-bottom:3px; color: #333;}
.content-wrap .main-content .basic-content .content-box .video-area ul.top li.team {font-size:12px; color: #0084ff;}
.content-wrap .main-content .basic-content .content-box .video-area ul.top li:before { position: absolute; top:4px; right:7px; content:''; width:1px; height:10px; background:#d7dade;}

.content-wrap .main-content .basic-content .content-box .video-area ul.bottom {position:relative; font-size:12px; background:#f8f8f8; padding: 10px; } 
.content-wrap .main-content .basic-content .content-box .video-area ul.bottom li {float:left;width:80%;}
.content-wrap .main-content .basic-content .content-box .video-area ul.bottom .score {font-weight: 700; padding:0 10px; display: inline-block; line-height: 30px; } 
.content-wrap .main-content .basic-content .content-box .video-area ul.bottom li:nth-child(1) .score{position:relative;}
.content-wrap .main-content .basic-content .content-box .video-area ul.bottom li.more {width:18%; height:20px; line-height: 20px; position:absolute; top:17px; right:10px; background: #0084ff; border-radius: 3px; color:#fff; text-align: center; margin:0;}
.content-wrap .main-content .basic-content .content-box .video-area ul.bottom p {font-size:13px; display: inline-block; padding-left:6px; line-height: 30px; }
.content-wrap .main-content .basic-content .content-box .video-area ul.bottom .team-logo { display: inline-block; width:30px; height:30px; border-radius: 50%; background: url("../../../img/common/teamlogo/02.png"); background-size:cover; position:relative; }

.content-wrap .main-content .basic-content .content-box .related-video-area .title {width:100%; padding:10px; margin-top:10px; border: 1px solid #d7dade; border-top:1px solid #0084ff;}
.content-wrap .main-content .basic-content .content-box .related-video-area .title p {font-size:13px;}
.content-wrap .main-content .basic-content .content-box .related-video-area .video-list {width:100%; padding:10px; border:1px solid #d7dade; border-top:0; background: #f8f8f8;}
.content-wrap .main-content .basic-content .content-box .related-video-area .video-list .video-box {float:left; width:48%; background:#fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border: 1px solid #d7dade;}
.content-wrap .main-content .basic-content .content-box .related-video-area .video-list .video-box:nth-child(odd) {margin-right:4%; }
.content-wrap .main-content .basic-content .content-box .related-video-area .video-list .video-box .tit {font-size:12px; padding:5px;}
.content-wrap .main-content .basic-content .content-box .related-video-area .video-list .video-box .view {font-size:11px; color:#999; padding:0 5px 5px;}
.content-wrap .main-content .basic-content .content-box .monthly-video { display: none; width:100%; }
.content-wrap .main-content .basic-content .content-box .monthly-video.show { display: block; }
.content-wrap .main-content .basic-content .content-box .monthly-video .title { position:relative; width:100%; height:50px; margin-bottom: 15px; }
.content-wrap .main-content .basic-content .content-box .monthly-video p { position:absolute; top: 12.5px; left:50%; margin-left:-41px; font-size:17px; font-weight: bold; letter-spacing: -0.5px;}
.content-wrap .main-content .basic-content .content-box .monthly-video button {position:absolute; top:15px; border:0; background:0; opacity: 0.5;}
.content-wrap .main-content .basic-content .content-box .monthly-video button.prev-btn {left: 10px; }
.content-wrap .main-content .basic-content .content-box .monthly-video button.next-btn {right: 10px;}




/* 검색 */
.content-wrap .main-content .basic-content .content-box .search-area {border-bottom:2px solid #0084ff;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-text {width:80%;}
.content-wrap .main-content .basic-content .content-box .search-area select { width:100%; height:100%; border:1px solid #d7dade; padding-left: 7px; padding-right: 20px; background: url("../../../img/sub/join/down_b_ico.svg") no-repeat 99% 50%; background-size: 15px 15px; font-size: 13px;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-btn button {width:100%; height:100%; border:1px solid #27292D; background:#27292D;color:#fff; font-size: 13px;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-date input {height:100%; background: url("../../../img/sub/calc_ico.svg") no-repeat 95% 50%; background-size:20px 20px; background-color:#eee; border:0; border-radius: 5px; padding : 0 30px 0 10px;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-date input:nth-child(1) {float: left; width:45%;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-date input:nth-child(2) {float: right; width:45%;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-date .unti {margin-left: 11px;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-view-count {float:left; width:40%; height:35px; clear:both; margin:0;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-view-count select {width:100%; height:100%; font-size:13px; border:1px solid #d7dade; background: url("../../../img/common/arrow_d_black.svg") no-repeat 95% 50%; background-size: 10px 10px; }
.content-wrap .main-content .basic-content .content-box .search-area .srch-edit-btn { float:right; width:20%; height:35px;}
.content-wrap .main-content .basic-content .content-box .search-area .srch-edit-btn button { width:100%; height: 100%; background:#0084ff; color:#fff; border:0; font-size:13px;}
.content-wrap .main-content .basic-content .content-box .search-area .all-video { clear:both; width:100%; height:auto;padding-top: 10px;}
.content-wrap .main-content .basic-content .content-box .search-area .all-video p {font-size:12px; font-weight: bold;}
.content-wrap .main-content .basic-content .content-box .search-area .all-video p span {font-weight:normal;}

/* 포토갤러리 목록 */
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap {padding:10px 0; border-bottom:1px solid #d7dade;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap > div {float:left;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .thumbnail-img {position: relative; width: 140px; height: 0; padding-bottom: 90px; overflow: hidden; text-align: center; background: url(../../../img/common/highlight_background.jpg) no-repeat center; background-size: cover;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .thumbnail-img > .video-logo-wrap  {position: absolute; top: 0; right: 0; padding: 0 7px; background: #fff; border-bottom-left-radius: 5px; height: 20px;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .thumbnail-img > .video-logo-wrap > img {width: 40px; height: 10px; position: relative; top: 5px;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap {text-align: left; width: 100% ;background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding:5px;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap  > p[class^=team-name] {color: #fff; font-size: 12px; font-weight: 600;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap  > p.team-name01 {padding-top: 20px;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap span.team-versus  {font-weight:600; color:#858585; }
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap > .stadium-info {background:rgba(0,0,0,0.5); display: inline-block; padding: 0 9px; border-radius: 20px; margin-top: 2px; max-width: 100%; line-height: 20px; }
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap > .stadium-info:after { content: ''; display: block; clear: both;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap > .stadium-info > span {color: #fff; font-size: 10px; float:left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block;}
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap > .stadium-info .stadium-date { width: 53px;  }
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap > .stadium-info .stadium-name { width: calc(100% - 53px); }
.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .text-wrap > .stadium-info .stadium-name > img {width: 12px; height: 12px; position: relative; top: 4px;}



.content-wrap .main-content .basic-content .content-box .board-list .list-wrap .info-list {width: calc(100% - 140px); padding-left:10px;}
.content-wrap .main-content .basic-content .content-box .board-list .info span:nth-child(1) {padding-left:0; width:100%; color:#0084ff;}

.content-wrap .main-content .basic-content .content-box .tab-wrap {margin-bottom:15px;}
.content-wrap .main-content .basic-content .content-box .tab-wrap ul {background:#eee;}
.content-wrap .main-content .basic-content .content-box .tab-wrap ul li { float:left; width:50%; height:30px; line-height:30px; background:#f8f8f8; text-align: center; font-size:13px; border:1px solid #d7dade; }
.content-wrap .main-content .basic-content .content-box .tab-wrap ul li span {font-size:11px;}
.content-wrap .main-content .basic-content .content-box .tab-wrap ul li a {display: block; width:100%; height:100%;}
.content-wrap .main-content .basic-content .content-box .tab-wrap ul li.select {background:#0084ff; border-color:#0084ff; }
.content-wrap .main-content .basic-content .content-box .tab-wrap ul li.select a {color: #fff;}

.content-wrap .main-content .basic-content .content-box .board-list .info span.date {padding-left:0;}

.video-box .thumbnail-img {position: relative; width: 100%; height: 0; padding-bottom: 90px; overflow: hidden; text-align: center; background: url(../../../img/common/highlight_background.jpg) no-repeat center; background-size: cover;}
.video-box .thumbnail-img > .video-logo-wrap {position: absolute; top: 0; right: 0; padding: 0 7px; background: #fff; border-bottom-left-radius: 5px; height: 20px;}
.video-box .thumbnail-img > .video-logo-wrap > img {width: 40px; height: 10px; position: relative; top: 5px;}
.video-box .text-wrap {text-align: left; width: 100% ;height: 90px;background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding:10px;}
.video-box .text-wrap  > p[class^=team-name] {color: #fff; font-size: 12px; font-weight: 600;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.video-box .text-wrap  > p.team-name01 {padding-top: 10px;}
.video-box .text-wrap span.team-versus  {font-weight:600; color:#858585; }

.video-box .text-wrap > .stadium-info {background:rgba(0,0,0,0.5); display: inline-block; padding: 0 9px; border-radius: 20px; margin-top: 2px; max-width: 100%; line-height: 20px; }
.video-box .text-wrap > .stadium-info:after { content: ''; display: block; clear: both;}
.video-box .text-wrap > .stadium-info > span {color: #fff; font-size: 10px; float:left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block;}
.video-box .text-wrap > .stadium-info .stadium-date { width: 53px;  }
.video-box .text-wrap > .stadium-info .stadium-name { width: calc(100% - 53px); }
.video-box .text-wrap > .stadium-info .stadium-name > img {width: 12px; height: 12px; position: relative; top: 4px;}