﻿@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/elite/main/main_bn.png"); background-size: cover; background-position: center; } 메인 이미지를 사용자가 수정할 수 있도록 변경되어 주석처리함*/
#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/elite/main/pttn.png"); background-repeat: repeat; top: 0; left: 0; width: 100%; height: 100%; }

/* 배너 - 야구협회 리스트 */
#main_banner_container .main-banner { width: 1200px; margin: 0 auto; position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%,-50%);}
.bsa-wrap .bsa-box { position: relative; float: left; width: calc(20% - 12px); min-height: 400px; background: rgba(255,255,255,0.85); padding:20px; border-top: 6px solid; overflow: hidden; transition: background .2s; }
.bsa-wrap .bsa-box:hover { background: #fff; }
.bsa-wrap .bsa-box:not(:last-child) { margin-right: 15px; }
.bsa-wrap .bsa-box:nth-child(2n-1) { border-top-color: #7b52ff; }
.bsa-wrap .bsa-box:nth-child(2n) { border-top-color: #4169ff; }
.bsa-wrap .bsa-box .bsa-title { text-align: center; margin: 10px 0 30px; }
.bsa-wrap .bsa-box .bsa-title h2 { font-size: 1.8rem; color:#000; }
.bsa-wrap .bsa-box .bsa-info { position: relative; z-index: 2; }
.bsa-wrap .bsa-box .bsa-info .group { position: relative; padding-bottom: 20px; font-size: 1.4rem; word-break: keep-all; }
.bsa-wrap .bsa-box .bsa-info .group .tit { position: relative; padding: 0 0 5px 20px; color: #8a8a8a; }
.bsa-wrap .bsa-box .bsa-info .group .txt { line-height: 1.2; font-size: 1.35rem; }
.bsa-wrap .bsa-box .bsa-info .group .tit:before { content: ''; position: absolute; top: 0; left: 0; width: 13px; height: 13px; }
.bsa-wrap .bsa-box:nth-child(2n-1) .bsa-info .group .tit:before { background: url('../../img/elite//main/address_01.png') no-repeat center;}
.bsa-wrap .bsa-box:nth-child(2n) .bsa-info .group .tit:before { background: url('../../img/elite//main/address_02.png') no-repeat center;}
.bsa-wrap .bsa-box:nth-child(2n-1) .bsa-info .group .tit.bsa-icon:before { background: url('../../img/elite//main/baseball_01.png') no-repeat center;}
.bsa-wrap .bsa-box:nth-child(2n) .bsa-info .group .tit.bsa-icon:before { background: url('../../img/elite//main/baseball_02.png') no-repeat center;}
.bsa-wrap .bsa-box .bsa-btn-wrap { position: absolute; bottom: 20px; left: 20px; z-index: 2; }
.bsa-wrap .bsa-box .bsa-btn-wrap button { border: 0; background: #3f3f3f; color:#fff; font-size: 1.3rem; padding: 10px 30px 7px; border-radius: 30px; box-shadow: 0; transition: background .2s, box-shadow .2s;}
.bsa-wrap .bsa-box .bsa-btn-wrap button:hover { box-shadow: 3px 3px 10px rgba(0,0,0,0.4);}
.bsa-wrap .bsa-box:nth-child(2n-1) .bsa-btn-wrap button:hover { background: #7b52ff; }
.bsa-wrap .bsa-box:nth-child(2n) .bsa-btn-wrap button:hover { background: #4169ff; }
.bsa-wrap .bsa-box .bsa-logo { position: absolute; bottom:-20px; right: -20px; z-index: 1; width: 140px; height: 140px; z-index: 1; opacity: .4;}
.bsa-wrap .bsa-box .bsa-logo img { width: 100%; }


/* 메인 광고 영역 */
#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 .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 { position: relative; border-bottom: 1px solid #aaa; padding: 20px 23px 15px; font-size: 1.8rem; }
#main_content_container .main-content .content-box .box-title-area:after { width: 25px; height: 25px; background: url("../../img/elite/common/arrow_right_b.svg"); position: absolute; content: ''; background-size: 25px; opacity: .3; top: 15px; right: 0; cursor: pointer;}
#main_content_container .main-content .content-box .box-title-area:hover:after { opacity: 0.8; }
#main_content_container .main-content .content-box .box-title-area h2 { font-size: 1.8rem; font-weight: 800; }
#main_content_container .main-content .content-box .box-title-area a { font-size: 1.8rem; font-weight: 800; position: relative;}


/* 경기하이라이트 */
.highlight-area .thumbnail-img {position: relative; width: 590px; height: 355px; overflow: hidden; text-align: center; background: url(../../img/elite/common/highlight_background.jpg) no-repeat center; background-size: cover; cursor: pointer;}
.highlight-area .thumbnail-img iframe {width: 590px; height: 355px;}
.highlight-area .thumbnail-img > .video-logo-wrap {position: absolute; top: 0; right: 0; padding: 12px 20px; background: #fff; border-bottom-left-radius: 20px;}
.highlight-area .thumbnail-img > .video-logo-wrap > img {width: 100px; height: 26px;}
.highlight-area .text-wrap {text-align: left; width: 100% ;height: 100%;background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 50px;}
.highlight-area .text-wrap  > p[class^=team-name] {color: #fff; font-size: 2.6rem; font-weight: 600;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.highlight-area .text-wrap  > p.team-name01 {padding-top: 135px;}
.highlight-area .text-wrap span.team-versus  { font-size: 2rem; font-weight:600; color:#9f9f9f; }
.highlight-area .text-wrap > .stadium-info {background:rgba(0,0,0,0.5); display: inline-block; padding: 5px 19px; border-radius: 50px; margin-top: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%;}
.highlight-area .text-wrap > .stadium-info > span {color: #fff; font-size: 1.4rem;}
.highlight-area .text-wrap > .stadium-info .stadium-name > img {width: 12px; height: 12px; position: relative; top: 2px;}
.highlight-area:hover .text-wrap { background: rgba(0,0,0,0.4); }


/* 포토 갤러리 */
#main_content_container .main-content .content-box.gallary-box { background: transparent; }
/*#main_content_container .main-content .content-box.gallary-box .box-title-area { padding: 20px 0 15px; margin-bottom: 15px;} 공간을 최대한 붙이기 위해 margin-bottom 삭제함*/ 
#main_content_container .main-content .content-box.gallary-box .box-title-area { padding: 20px 0 15px;}
.gallary-box .list .box { float: left; width: calc(25% - 23px); margin-bottom: 30px; margin-right: 30px; cursor: pointer; transition: box-shadow .2s ease;}
.gallary-box .list .box:nth-child(4n) { margin-right: 0; }
.gallary-box .list .box .img-area { position: relative; width: 100%; padding-bottom: 59%; overflow: hidden; }
.gallary-box .list .box .img-area img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.0); transition: transform .25s ease; }
.gallary-box .list .box:hover .img-area img { transform: translate(-50%,-50%) scale(1.03); }
.gallary-box .list .box .title-area h3 { font-size: 1.4rem; font-weight: 500; color: #000; padding: 15px 0 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.gallary-box .list .box .title-area p { font-size: 1.2rem; font-weight: 500; color: #717171; }
.gallary-box .list .no-img-box {background-color: white; text-align:center;}
.gallary-box .list span.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 ul li { border-right: 1px solid #edf0f5; 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 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.3rem; 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/elite/common/pin_ico.svg"); background-size: 15px; left: 0; top: 0; }

/* 패밀리 */
#main_content_container .main-content .content-box.family-box {background: transparent;}
#main_content_container .main-content .content-box.family-box .box-title-area { padding: 20px 0 15px; }
#main_content_container .main-content .content-box.family-box .box-content-area { background-color: #fff;}
.family-box .family-list { padding: 20px; text-align: center; }
.family-box .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; } */
