@charset "utf-8";
/* main */

/* 백그라운드 영상영역 */
#main_banner_container { height: 500px; position: relative; }
/* #main_banner_container .back-area { height: 100%; width: 100%; position: relative; background: url("../img/main/main_bg.png"); background-size: cover; background-position: center; } 대민 메인 이미지를 고정이 아닌, 유저가 수정할 수 있도록 변경함에 따라 CSS 변경*/ 
#main_banner_container .back-area { height: 100%; width: 100%; position: relative;}
#main_banner_container .back-area #video { width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0; top: 0; z-index: 2; }
#main_banner_container .back-area:after { position: absolute; z-index: 3; content: ''; background: url("../img/main/pttn.png"); background-repeat: repeat; top: 0; left: 0; width: 100%; height: 100%; }

/* 경기 스케줄 */
#main_banner_container .main-banner { width: 1200px; height: 320px; margin: 0 auto; position: absolute; left: 50%; margin-left: -600px; top: 65px; z-index: 4; text-align: center; }
#main_banner_container .main-banner .schedule-container { width: 1200px; height: 100%; display: inline-block; position: relative; }
#main_banner_container .main-banner .schedule-container .date-select-wrap { background-color: rgba(0, 0, 0, 0.6); height: 55px; border-radius: 5px; overflow: hidden; position: relative; width: 595px; margin: 0 auto; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date-move-btn { position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 30px; border: none; cursor: pointer; outline: 0; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date-move-btn.pre { border-bottom-left-radius: 5px; border-top-left-radius: 5px; left: 0; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date-move-btn.post { border-bottom-right-radius: 5px; border-top-right-radius: 5px; right: 0; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date-move-btn img { vertical-align: top; width: 24px; opacity: 0.5; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date-move-btn:hover { background-color: rgba(0, 0, 0, 0.8); }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date-move-btn:hover img { opacity: 0.8; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date { color: #fff; line-height: 55px; font-size: 2.5rem; font-weight: 700; display: inline-block; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .date .unit { font-weight: 400; font-size: 1.6rem; vertical-align: top; display: inline-block; margin-left: 3px; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .today-match-btn { background: #0033bf; border: none; height: 26px; line-height: 26px; font-size: 1.3rem; color: #ecf0fb; padding: 0 20px; border-radius: 13px; position: absolute; right: 65px; top: 15px; font-weight: 300; letter-spacing: 0; cursor: pointer; transition: background .25s ease, color .25s ease; }
#main_banner_container .main-banner .schedule-container .date-select-wrap .today-match-btn:hover { color: #fff; background: #0C41EB; }

#main_banner_container .main-banner .schedule-container .match-info-wrap { margin-top: 15px; white-space: nowrap; height: 260px; position: relative; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .no-main-game-schedule { background: #f1f1f1; border-radius: 10px; width: 595px; height: 250px; box-shadow: 0px 8px 20px -5px rgba(0, 0, 0, 0.3); padding-top: 20px; position: relative; z-index: 1; display: inline-block; margin: 0 7px; line-height: 200px; font-size: 1.6rem; font-weight: 600; color: rgba(136, 136, 136, 0.5); }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box { background: #fff; border-radius: 10px; width: 285px; height: 260px; box-shadow: 0px 8px 20px -5px rgba(0, 0, 0, 0.3); padding-top: 20px; position: relative; z-index: 1; display: inline-block; margin: 0 7px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .date-time .date { display: inline-block; font-size: 1.8rem; font-weight: bold; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .date-time .date .unit { font-size: 1.3rem; margin-left: 2px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .date-time .time { display: inline-block; margin-left: 5px; font-size: 1.8rem; font-weight: bold; color: #0084ff; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .league { font-size: 1.2rem; color: #555; padding: 0 20px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .location { font-size: 1.2rem; margin-top: 5px; color: #3F65AC; padding: 0 20px 0 15px; display: inline-block; background: #f2f4f7; border-radius: 20px; height: 20px; line-height: 20px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .location img { display: inline-block; width: 13px; vertical-align: top; margin-top: 4px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap { position: absolute; top: 90px; left: 0; width: 100%; height: 130px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap .team-info { float: left; width: 50%; height: 100%; text-align: center; }

#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap .team-info .logo-area { width: 50px; height: 50px; position: relative; overflow: hidden; display: inline-block; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .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%; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .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%); }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap .team-info .team-name { margin-top: 5px; font-size: 1.3rem; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap .team-info .team-name a:hover { color: #0084ff; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap .team-info .score { font-size: 1.8rem; margin-top: 5px; color: #999; font-weight: 600; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .team-info-wrap .team-info .score.red { color: #ff2121; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .versus { position: absolute; font-size: 1.8rem; color: #dddcdc; font-weight: 900; width: 22px; height: 20px; left: 50%; margin-left: -11px; top: 12px; z-index: 2; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .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; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .result-label.red { background-color: #ff2121; color: #fff; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .result-label.green { background-color: #00d228; color: #fff; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .result-label.grey { background-color: #aeaeae; color: #fff; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 40px; border-top: 1px solid #dee3eb; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .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; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a:hover { color: #0084ff; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.highlight { border-right: 1px solid #dee3eb; padding-left: 20px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.highlight:before { position: absolute; content: ''; width: 14px; height: 12px; background: url("../img/main/highlight_ico_b.svg"); background-size: 14px 12px; top: 13px; left: 25px; opacity: 0.8; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.highlight:hover:before { position: absolute; content: ''; width: 14px; height: 12px; background: url("../img/main/highlight_ico_blue.svg"); background-size: 14px 12px; top: 13px; left: 25px; opacity: 1; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.detail-result { padding-left: 20px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.detail-result:before { position: absolute; content: ''; width: 12px; height: 10px; background: url("../img/main/detail_result_ico_b.svg"); background-size: 12px 10px; top: 15px; left: 22px; opacity: 0.8; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.detail-result:hover:before { position: absolute; content: ''; width: 12px; height: 10px; background: url("../img/main/detail_result_ico_blue.svg"); background-size: 12px 10px; top: 15px; left: 22px; opacity: 1; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.disabled { color: rgba(136, 136, 136, 0.5); cursor: not-allowed; background: #f1f1f1; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.disabled.highlight:before { opacity: .2; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.disabled.highlight:hover:before { opacity: .2; background: url("../img/main/highlight_ico_b.svg"); background-size: 14px 12px; top: 13px; left: 25px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.disabled.detail-result:before { opacity: .2; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box .btn-wrap a.disabled.detail-result:hover:before { opacity: .2; background: url("../img/main/detail_result_ico_b.svg"); background-size: 12px 10px; top: 15px; left: 22px; }

#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box-navi { background-color: rgba(0, 0, 0, 0.8); width: 60px; height: 60px; border: none; border-radius: 50%; top: 50%; position: absolute; margin-top: -30px; cursor: pointer; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box-navi.pre { left: -90px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box-navi.post { right: -90px; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box-navi img { width: 25px; opacity: 0.8; vertical-align: top; }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box-navi:hover { background-color: rgba(0, 0, 0, 0.95); }
#main_banner_container .main-banner .schedule-container .match-info-wrap .info-box-navi:hover img { opacity: 1; }

/* 메인 알림판 영역 */
#main_ad_container { height: 100px; overflow: hidden; width: 100%; }
#main_ad_container .slick-slider { height: 100%; display: block; width: 100%; }
/* #main_ad_container .slick-slider a { height: 100%; display: block; width: 100%; }
#main_ad_container .slick-slider a img { width: 1200px; height: 100%; display: block; margin: 0 auto; } */
#main_ad_container .slick-slider .main-banner-one { height:100px; display: block; width: 1200px; margin: 0 auto; text-align: center; color: white; padding-top:38px; }
#main_ad_container .slick-slider .main-banner-one span.banner-text{font-size:16px; font-weight: bold;}

/* 메인 광고배너 영역 */
#main_ad_container-ad { height: 170px; overflow: hidden; width: 100%; margin-top: 30px;}
#main_ad_container-ad .slick-slider { height: 100%; display: block; width: 100%; }
#main_ad_container-ad .slick-slider a { height: 100%; display: block; width: 100%; }
#main_ad_container-ad .slick-slider a img { width: 1200px; height: 170px; display: block; margin: 0 auto; }

/*광고영역*/
.main-content .ad-banner .ad-list { position: relative; width: 100%; margin-bottom: 30px; }
.main-content .ad-banner .slick-list { overflow: hidden; }
.main-content .ad-banner .ad-list .item { display: inline-block; text-align: center;}
.main-content .ad-banner .ad-list .item a { display: block;}
.main-content .ad-banner .ad-list .item a img {height: 170px;}
.main-content .ad-banner .ad-list .slick-dots { text-align: center; margin-top: 10px;}
.main-content .ad-banner .ad-list .slick-dots li { display: inline-block; margin: 0 5px; opacity: .4; }
.main-content .ad-banner .ad-list .slick-dots button { border: 0; color: transparent; width: 10px; height: 10px; background: #000; border-radius: 20px; }
.main-content .ad-banner .ad-list .slick-dots li.slick-active { opacity: .7;}
.main-content .ad-banner .ad-arrow { background-color: rgba(0, 0, 0, 0.4); width: 40px; height: 40px; border: none; border-radius: 50%; top: 50%; position: absolute; margin-top: -35px; cursor: pointer; z-index: 1; }
.main-content .ad-banner .ad-arrow.prev { left: -50px; }
.main-content .ad-banner .ad-arrow.next { right: -50px; }
.main-content .ad-banner .ad-arrow img { width: 25px; opacity: 0.8; vertical-align: top; }
.img-align-center {width: 100%; height: 170px; object-fit: cover; /* 이미지가 컨테이너를 덮도록 크기 조정 */}



/* 컨텐츠 영역 */
#main_content_container { background: #f1f3f5; padding: 30px 0; }
#main_content_container .main-content { width: 1200px; margin: 0 auto; }
#main_content_container .main-content .content-box { background: #fff; margin-bottom: 15px; }
#main_content_container .main-content .half-box-wrap .content-box { width: calc(50% - 10px); }
#main_content_container .main-content .half-box-wrap .content-box.left { float: left; }
#main_content_container .main-content .half-box-wrap .content-box.right { float: right; }
#main_content_container .main-content .content-box .box-title-area { border-bottom: 1px solid #dee3eb; height: 60px; padding: 0 23px; font-size: 1.8rem; line-height: 59px; }
#main_content_container .main-content .content-box .box-title-area h2 { font-size: 1.8rem; font-weight: 800; line-height: 59px; }
#main_content_container .main-content .content-box .box-title-area a { font-size: 1.8rem; font-weight: 800; position: relative; line-height: 59px; }
#main_content_container .main-content .content-box .box-title-area a:after { width: 25px; height: 25px; background: url("../img/common/arrow_right_b.svg"); position: absolute; content: ''; background-size: 25px; opacity: .3; top: 1px; right: -35px; }
#main_content_container .main-content .content-box .box-title-area a:hover:after { opacity: 0.5; }

#main_content_container .main-content .content-box .box-filter-area { /* border-bottom: 1px solid #dee3eb; */ height: 45px; padding: 0 23px; }
#main_content_container .main-content .content-box .box-filter-area.community-slider {overflow-x:hidden; }
/* #main_content_container .main-content .content-box .box-filter-area .menu-list { float: left; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; cursor: pointer; max-width: 100%; } */
#main_content_container .main-content .content-box .box-filter-area .menu-list { float: left;white-space: nowrap; -ms-overflow-style: none; cursor: pointer; max-width: 100%; scrollbar-width: none;}
#main_content_container .main-content .content-box .box-filter-area .menu-list.draggable {overflow:scroll;}
#main_content_container .main-content .content-box .box-filter-area .menu-list::-webkit-scrollbar { display:none; }
#main_content_container .main-content .content-box .box-filter-area .menu-list li { display: inline-block; margin-right: 15px; }
#main_content_container .main-content .content-box .box-filter-area .menu-list li:last-child { margin-right: 0; }
#main_content_container .main-content .content-box .box-filter-area .menu-list li a { font-size: 1.5rem; color: #999; font-weight: 400; line-height: 44px; display: block; height: 100%; }
#main_content_container .main-content .content-box .box-filter-area .menu-list li a:hover { color: #555; }
#main_content_container .main-content .content-box .box-filter-area .menu-list li.select a { color: #0084ff; position: relative; font-weight: 500; }
#main_content_container .main-content .content-box .box-filter-area .menu-list li.select a:after { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 2px; background: #0084ff; }

#main_content_container .main-content .content-box .box-filter-area .select-list { float: left; margin-top: 8px; }
#main_content_container .main-content .content-box .box-filter-area .select-list li { float: left; border: 1px solid #dee3eb; }

/* 경기하이라이트 */
.highlight .no-list { height: 200px; text-align: center; line-height: 200px; font-size: 1.6rem; font-weight: 600; color: rgba(136, 136, 136, 0.5); }
.highlight-list { padding: 23px; }
.highlight-list li { width: 220px; height: 195px; float: left; margin-right: 13.5px; }
.highlight-list li:last-child { margin-right: 0; }
.highlight-list li a { display: block; height: 100%; }
.highlight-list li a .img-area { width: 100%; height: 125px; overflow: hidden; position: relative; margin-bottom: 10px; }
.highlight-list li a .img-area .thumbnail-img {position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; text-align: center; background: url(../img/common/highlight_background.jpg) no-repeat center; background-size: cover;}
.highlight-list li a .img-area .thumbnail-img > .video-logo-wrap {position: absolute; top: 0; right: 0; padding: 2px 12px; background: #fff; border-bottom-left-radius: 5px;}
.highlight-list li a .img-area .thumbnail-img > .video-logo-wrap > img {width: 49px; height: 12px;}
.highlight-list li a .img-area .text-wrap {text-align: left; width: 100% ;height: 125px;background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 10px;}
.highlight-list li a .img-area .text-wrap  > p[class^=team-name] {color: #fff; font-size: 1.5rem; font-weight: 600;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.highlight-list li a .img-area .text-wrap  > p.team-name01 {padding-top: 30px;}
.highlight-list li a .img-area .text-wrap span.team-versus  {font-weight:600; color:#858585; }
.highlight-list li a .img-area .text-wrap > .stadium-info {background:rgba(0,0,0,0.5); display: inline-block; padding: 2px 9px 5px; border-radius: 20px; margin-top: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%;}
.highlight-list li a .img-area .text-wrap > .stadium-info > span {color: #fff; font-size: 1.1rem;}
.highlight-list li a .img-area .text-wrap > .stadium-info .stadium-name > img {width: 12px; height: 12px; position: relative; top: 2px;}

/*
.highlight-list li a .img-area .thumb { 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%; z-index: 1; }
.highlight-list li a .img-area .thumb img { position: absolute; top: 0; left: 0; width:100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; min-height: 100%; min-width: 100%; }
.highlight-list li:hover a .img-area .thumb img {  -webkit-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }
*/

.highlight-list li a .txt-area .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; height: 38px; margin-bottom: 10px; }
.highlight-list li a .txt-area .etc .date { float: left; font-size: 1.3rem; letter-spacing: 0; font-weight: 500; color: #666; line-height: 13px; }
.highlight-list li a .txt-area .etc .view { font-size: 1.1rem; float: right; line-height: 13px; color: #666; }
.highlight-list li a .txt-area .etc .view .raj { letter-spacing: 0; font-weight: 500; margin-left: 3px; }

/* 프로야구 뉴스 */
.news-list .main-news { padding: 23px; border-bottom: 1px solid #edf0f5; }
.news-list .main-news .img-area { float: left; width: 200px; height: 150px; position: relative; overflow: hidden; border-radius: 5px; }
.news-list .main-news .img-area .thumb { 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%; z-index: 1; }
.news-list .main-news .img-area .thumb img { position: absolute; top: 0; left: 0; width:100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; min-height: 100%; min-width: 100%; }
.news-list .main-news:hover .img-area .thumb img {  -webkit-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }

.news-list .main-news .txt-area { float: right; width: 330px; }
.news-list .main-news .txt-area .title { font-size: 1.6rem; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px; line-height: 24px; max-height: 48px; }
.news-list .main-news:hover .txt-area .title { text-decoration: underline; }
.news-list .main-news .txt-area .preview-text { font-size: 1.2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 54px; }

.news-list ul li { float: left; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; width: 50%; height: 60px; }
.news-list ul li:nth-child(2n) { border-right: none; }
.news-list ul li a { padding: 10px 23px; height: 100%; display: block; }
.news-list ul li a:hover { background: #F2F5F7 }
.news-list ul li a .img-area { width: 40px; height: 40px; border-radius: 5px; overflow: hidden; position: relative; display: inline-block; }
.news-list ul li a .img-area .thumb { 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%; z-index: 1; }
.news-list ul li a .img-area .thumb img { position: absolute; top: 0; left: 0; width:100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; min-height: 100%; min-width: 100%; }
.news-list ul li a .title { display: inline-block; width: calc(100% - 55px); line-height: 40px; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 10px; font-weight: 500; }
.news-list ul li a:hover .title { text-decoration: underline; }

/* 순위 */
.record-table table { width: 100%; table-layout: fixed; font-size: 1.3rem; }
.record-table table thead { background: #f8f8f8; }
.record-table table thead tr th { height: 40px; font-weight: 500; color: #555; text-align: center; }
.record-table table thead tr th:first-child { padding-left: 23px; }
.record-table table thead tr th:last-child { padding-right: 23px; }

.record-table table tbody tr td { padding: 3px 5px; line-height: 30px; color: #999; text-align: center; }
.record-table table tbody tr td:first-child { padding-left: 23px; }
.record-table table tbody tr td:last-child { padding-right: 23px; }
.record-table table tbody tr td .rank-ico { width: 20px; margin-top: 8px; display: inline-block; vertical-align: top; }
.record-table table tbody tr td .logo-area { width: 22px; height: 22px; display: inline-block; vertical-align: top; margin-top: 4px; margin-right: 5px; }
.record-table table tbody tr td.team { text-align: left; padding-left: 15px; }
.record-table table tbody tr td.team a { display: block; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-weight: 500; }
.record-table table tbody tr td.team a:hover { text-decoration: underline; color: #222; }
.record-table table tbody tr td.player a { display: block; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-weight: 500; }
.record-table table tbody tr td.player a:hover { text-decoration: underline; color: #222; }

/* 게시판 */
.board-list ul li {border-bottom: 1px solid #edf0f5;height: 60px; }
.board-list ul li.no-list { line-height: 150px; text-align: center; font-size: 1.6rem; font-weight: 600; height: 150px; color: rgba(136, 136, 136, 0.5); }
.board-list.notice-list ul li.no-list { line-height: 195px; height: 195px; }
.board-list ul li:nth-child(2n) { border-right: none; }
.board-list ul li a { padding: 10px 23px; height: 100%; display: block; }
.board-list ul li a:hover { background: #F2F5F7 }
.board-list ul li a .img-area { width: 40px; height: 40px; border-radius: 5px; overflow: hidden; position: relative; display: inline-block; }
.board-list ul li a .img-area .thumb { 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%; z-index: 1; }
.board-list ul li a .img-area .thumb img { position: absolute; top: 0; left: 0; width:100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; min-height: 100%; min-width: 100%; }
.board-list ul li.img-board a .img-area { display: inline-block; vertical-align: top; }
.board-list ul li.img-board a .txt-area { display: inline-block; vertical-align: top; width: 500px; }
.board-list ul li a .txt-area { padding: 4px 0; height: 40px; }
.board-list ul li.img-board a .txt-area { padding: 4px 0 5px 13px; }
.board-list ul li a .txt-area .title { display: inline-block; line-height: 16px; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: 1.5rem; max-width: 100%; }
.board-list ul li a:hover .txt-area .title { text-decoration: underline; }
.board-list ul li a .txt-area .etc { height: 15px; }
.board-list ul li a .txt-area .etc p { display: inline-block; color: #666; }
.board-list ul li a .txt-area .etc p.editer { font-size: 1.1rem; font-weight: 400; line-height: 15px; vertical-align: top; display: inline-block; }
.board-list ul li a .txt-area .etc p.date { font-size: 1.2rem; font-weight: 500; letter-spacing: 0; line-height: 17px; vertical-align: top; margin-left: 15px; position: relative; display: inline-block; }
.board-list ul li a .txt-area .etc p.date:before { width: 1px; height: 10px; position: absolute; content: ''; background: #DDDDDD; left: -9px; top: 3px; }

.board-list ul li.pinned a { background-color: #f3f7ff; }
.board-list ul li.pinned a .txt-area .title { color: #0084ff; font-weight: 600; padding-left: 23px; position: relative; }
.board-list ul li.pinned a .txt-area .title:before { position: absolute; content: ''; width: 15px; height: 15px; background: url("../img/common/pin_ico.svg"); background-size: 15px; left: 0; top: 0; }

/* 패밀리 */
.family-list { padding: 20px; text-align: center; }
.family-list li { display: inline-block; margin: 3px; }

/*광고영역*/
/* .main-content .ad-banner { width: 100%; margin-bottom: 30px; }
.main-content .ad-banner a { display: block; width: 100%; }
.main-content .ad-banner a img { width: 100%; height: auto; } */

/* 선수 랭킹 */
.rank-list { position: relative; width: 100%; padding: 20px; }
.rank-list .tab-menu { position: relative; width: 100%; border-bottom: 1px solid #222; }
.rank-list .tab-menu .tab { float: left; width: 50%; cursor: pointer; color: #222; text-align: center; padding: 7px 0; font-size: 1.5rem; font-weight: 500;}
.rank-list .tab-menu .tab.tab-select { background: #222; color: #fff; }
.rank-list .rank-wrap { position: relative; text-align: center; }
.rank-list .rank-wrap .box { float: left; width: 33.33%; position: relative; }
.rank-list .rank-wrap .box h2.tit { display: inline-block; font-size: 1.5rem; font-weight: 600; position: relative; left: 10px; margin: 10px 0 20px;}
.rank-list .rank-wrap .box h2.tit:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #222;}
.rank-list .rank-wrap .box ul li { width: 100%; position: relative; padding: 10px 5px 10px 30px; border-bottom: 1px solid #dee3eb;}
.rank-list .rank-wrap .box ul li:last-child { border-bottom: 0; }
.rank-list .rank-wrap .box ul li .rank-ico { position: absolute; bottom: 30px; left: 0; width: 20px; }
.rank-list .rank-wrap .box ul li .name { font-size: 1.5rem; font-weight: 400; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;}
.rank-list .rank-wrap .box ul li .record { font-size: 1.5rem; font-weight: 600; }
.rank-list .rank-wrap .box ul li.top { padding-top: 0; }
.rank-list .rank-wrap .box ul li.top .player-img { display: inline-block; width: 70px; height: 70px; overflow: hidden; border-radius: 50%; border: 4px solid #b0c3e5; margin-bottom: 5px; cursor: pointer;}
.rank-list .rank-wrap .box ul li.top .player-img img { width: 100%; height: 100%; object-fit: cover; }
#main_content_container .main-content .content-box .rank-list .box-filter-area { border-bottom:0; padding:0;}
#main_content_container .main-content .content-box .rank-list .box-filter-area .select-list { width: 100%; }
#main_content_container .main-content .content-box .rank-list .box-filter-area .select-list li { border:1px solid #dee3eb; border-right:0; width: 33.3%;}
#main_content_container .main-content .content-box .rank-list .box-filter-area .select-list li:last-child { border-right:1px solid #dee3eb; }
#main_content_container .main-content .content-box .rank-list .box-filter-area .select-list li select { width:100%;}

.rank-list .weekly-date { font-size: 13px; color:#8d8d8d; text-align: right; margin: 5px 0;}
.rank-list .weekly-date img.calendar { width:15px; position: relative; top: 3px;}
.rank-list .none-data { max-height: 340px; line-height: 290px; text-align: center;}
.rank-list .none-data p { font-size: 14px; color: #aaa;}