@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); font-size: 62.5%; }
html, body { width:100%; height:100%; color:#222; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 1.5rem; color:#2d2d2d; letter-spacing: -0.5px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { text-decoration:none; color:#2d2d2d; }
::selection {background:#D00025; color:#FFF; text-shadow:none;}
::-moz-selection {background:#D00025; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#D00025; color:#FFF; text-shadow:none;}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 13px; color:#2d2d2d; letter-spacing:-1px; outline: 0; }
input[type=text],input[type=password],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { font-family: 'Noto Sans KR','Sans-serif'; font-size: 13px; color:#2d2d2d; letter-spacing: -1px; width: 150px; height: 30px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-color: #dcdcdc; padding-left: 5px; padding-right: 5px; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: inherit; }
input::-ms-input-placeholder { color: #ccc; }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }
.custom-check { display: none; }
.pre-wrap { white-space: pre-wrap; }
button { cursor: pointer; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*노스크롤*/
.no-scroll { overflow: hidden; }

/* 헤더 */
#header-wrap { height: 90px; background: rgba(0,0,0,0.5); position: fixed; width: 100%; top: 30px; left: 0; z-index: 10; transition: height 0.25s ease; transition: background .25s ease; }
#header-wrap .header { width: 1200px; margin: 0 auto; height: 100%; position: relative; }

#header-wrap .header .team-logo { width: auto; height: 90px; position: absolute; left: 0; top: 0; cursor: pointer; }
#header-wrap .header .team-logo img { width: auto; height: 100%; }

#header-wrap .header .gnb { display: inline-block; height: 100%; vertical-align: top; width: 100%; text-align: center; }
#header-wrap .header .gnb ul { overflow: hidden; display: inline-block; }
#header-wrap .header .gnb ul li { display: inline-block; float: left; margin: 0 10px; }
#header-wrap .header .gnb ul li a { font-size: 1.6rem; color: #fff; font-family: 'Noto Sans KR'; font-weight: 500; padding: 0 20px; line-height: 90px; height: 100%; display: block; transition: line-height .25s ease; position: relative; }
#header-wrap .header .gnb ul li a:hover { color: #D00025; font-weight: 800; }
#header-wrap .header .gnb ul li.select a{ color: #D00025; font-weight: 800; }
#header-wrap .header .gnb ul li.select a:before { position: absolute; content: ''; height: 3px; background: #D00025; width: 100%; left: 0; bottom: 0; }

#header-wrap .header .user-tool { position: absolute; top: 50%; right: 0; margin-top: -10px; }
#header-wrap .header .user-tool ul li { display: inline-block; margin-right: 20px; }
#header-wrap .header .user-tool ul li:last-child { margin-right: 0; }
#header-wrap .header .user-tool ul li a { color: #fff; font-size: 1.4rem; font-family: 'Noto Sans KR'; font-weight: 400; }

/* 헤더 시흥시야구협회 바로가기 */
.shleague-url {display: block; width: 100%; line-height:30px; position: fixed; top: 0; left: 0; font-size: 12px; font-weight: 100; color: #e2e2e2; z-index: 10; background:#313131; text-align: right;}
.shleague-url a { color: #e2e2e2; display: block; width: 1200px; margin: 0 auto;}
.shleague-url a:hover { color: #cacaca; }

/*버튼효과*/
.bttn-fill { padding: 0; border-width: 0; border-color: transparent; background: transparent; font-weight: 400; cursor: pointer; position: relative; font-family: inherit; z-index: 0; border: none; background-color: #fff; color: #1d89ff; -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); font-family: 'Noto Sans KR'; font-weight: 400; }
.bttn-fill { font-size: 15px; height: 47px; display: block; width: 160px; line-height: 45px; border-width: 1px; border-style: solid; border-color: #fff; color: #fff; text-align: center; background-color: transparent; border-radius: 23.5px; overflow: hidden; margin: 15px auto 0; }
.bttn-fill:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #2932cb; content: ''; opacity: 0; -webkit-transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; z-index: -1; -webkit-transform: scaleX(0); transform: scaleX(0); }
.bttn-fill:hover,
.bttn-fill:focus { color: #fff; -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); border-color: #2932cb; }
.bttn-fill:hover:before,
.bttn-fill:focus:before { opacity: 1; -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; -webkit-transform: scaleX(1); transform: scaleX(1); }

.trs-btn { border-color: #2d2d2d; color: #fff; background-color: transparent; color: #2d2d2d; }
.trs-btn:hover { border-color: #2932cb; background-color: #2932cb; }
.trs-btn:before { background-color: #2932cb; }
.trs-btn:hover:after { background: url(../../img/common/detail_arrow_ico.png); }

/* 푸터 */
#footer_container { background: #fff; border-top: 1px solid #dee3eb; }
#footer_container .footer-gnb-container { border-bottom: 1px solid #dee3eb; height: 60px; }
#footer_container .footer-gnb-container .footer-gnb { width: 1200px; margin: 0 auto; height: 100%; }
#footer_container .footer-gnb-container .footer-gnb ul { height: 100%; }
#footer_container .footer-gnb-container .footer-gnb ul li { float: left; height: 100%; margin-right: 30px; }
#footer_container .footer-gnb-container .footer-gnb ul li a { display: block; height: 100%; line-height: 59px; font-size: 1.2rem; color: #999; font-weight: 500; }
#footer_container .footer-gnb-container .footer-gnb ul li a:hover { color: #555; }
#footer_container .footer { width: 1200px; margin: 0 auto;  padding: 20px 0 50px; }
#footer_container .footer .info-wrap { margin-bottom: 10px; }
#footer_container .footer .info-wrap .info { display: inline-block; margin-right: 30px; margin-bottom: 8px; }
#footer_container .footer .info-wrap .info p { font-size: 1.2rem; color: #999;  }
#footer_container .footer .info-wrap .info p.department { margin-right: 18px; position: relative; display: inline-block; }
#footer_container .footer .info-wrap .info p.content { display: inline-block; }
#footer_container .footer .info-wrap .info p.department:after { height: 10px; width: 1px; background: #dcdcdc; position: absolute; content: ''; right: -10px; top: 5px; }
#footer_container .footer p { font-size: 1.2rem; color: #999; }
#footer_container .footer p.copy { letter-spacing: 0; }

/* 라벨 */
span.label-new { background-color: #e79b23; font-size: 10px; color: #FFFFFF; font-weight: bold; font-style: italic; padding: 1px 6px 1px 4px; border-radius: 2px; }

/* 셀렉트 커스텀 */
.selectbox { position: relative; border-style: none;  z-index: 1; display: inline-block; border: 1px solid #e5e5e5; height: 40px; width: 370px; border-radius: 3px; vertical-align: middle; transition: background .25s ease; }
.selectbox:hover { background: #f8f8f8; }
.selectbox:before { content: "";  position: absolute; top: 50%; margin-top: -10px; right: 8px; background: url(../../img/team-page/down_b_ico.svg) no-repeat; width: 20px; height: 20px; opacity: 0.5; }
.selectbox label { position: absolute; top: 0; left: 0; color: #222;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 1.4rem; line-height: 38px; text-align: left; width: 90%; padding-left: 10px; padding-right: 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; }
.selectbox select { width: 100%; line-height: normal;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 38px; cursor: pointer; }
.selectbox select option { font-size: 1.4rem; }

/* 페이징 */
.page-contents .page-contents-container .page-contents-area .paging { margin-top: 30px; }
.page-contents .page-contents-container .page-contents-area .paging ul { text-align: right; }
.page-contents .page-contents-container .page-contents-area .paging ul li { display: inline-block; }
.page-contents .page-contents-container .page-contents-area .paging ul li a { display: block; padding: 7px 15px; font-size: 1.5rem; }
.page-contents .page-contents-container .page-contents-area .paging ul li.select a,
.page-contents .page-contents-container .page-contents-area .paging ul li.select a:hover { background: #BC0020; color: #fff; }
.page-contents .page-contents-container .page-contents-area .paging ul li a:hover { background: #f8f8f8; }
.page-contents .page-contents-container .page-contents-area .paging ul li.prev-btn a,
.page-contents .page-contents-container .page-contents-area .paging ul li.next-btn a { padding: 7px; }
.page-contents .page-contents-container .page-contents-area .paging ul li a img { opacity: 0.3; vertical-align: text-top; }
.page-contents .page-contents-container .page-contents-area .paging ul li a:hover img { opacity: 0.7; }

/* 팀 페이지 common */
.sub-bg-area { height: 320px; background-repeat: no-repeat; background-size: cover; background-position: center; min-width: 1200px; position: relative; }
.sub-bg-area.default-banner-01 { background-image: url(../../img/team-page/sub_bg.png); }
.sub-bg-area.default-banner-02 { background-image: url(../../img/team-page/sub_bg_02.png); }
.sub-bg-area.default-banner-03 { background-image: url(../../img/team-page/sub_bg_03.png); }
.sub-bg-area .mask { background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); height: 100%; width: 100%; }
.sub-bg-area .pttn { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/team-page/main_banner_pttn.png) repeat; }
.sub-bg-area .title-container-wrap { height: 70px; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; overflow: hidden; }
.sub-bg-area .title-container-wrap .title-container { width: 1200px; margin: 0 auto; color: #fff; display: block; }
.sub-bg-area .title-container-wrap .title-container h2 { font-size: 2.2rem; display: inline-block; height: 100%; line-height: 70px; background: rgba(208,0,37,0.85); padding-right: 30px; position: relative; margin: 0; }
.sub-bg-area .title-container-wrap .title-container h2:before { background: rgba(208,0,37,0.85); position: absolute; content: ''; left: -10000%; top: 0; height: 100%; width: 10000%; }
.sub-bg-area .title-container-wrap .title-container h2:after { position: absolute; content: ''; right: -60px; top: 0; height: 100%; border-left: 30px solid rgba(208,0,37,0.85); border-bottom: 35px solid rgba(208,0,37,0.85); border-top: 35px solid transparent; border-right: 30px solid transparent; }

/* 템프1 */
.sub-bg-area .sub-banner-txt { width: 1200px; position: absolute; color: #fff; top: 55%; left: 50%; margin-left: -600px; z-index: 2; }
.sub-bg-area .sub-banner-txt h3 { font-size: 4.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.2); font-weight: 600; letter-spacing: -1.5px; font-family: 'Noto Sans KR'; }
.sub-bg-area .sub-banner-txt h3 .team-name { font-size: 4.5rem; background: rgba(208,0,37,1); padding: 0 15px; }

/* 템프2 */
.sub-bg-area .match-info { width: 1200px; position: absolute; top: 170px; left: 50%; margin-left: -600px; z-index: 2; }
.sub-bg-area .match-info .team-match { background: rgba(30,30,30,0.90); width: 28%; float: left; margin-right: 8%; }
.sub-bg-area .match-info .team-match:last-child { margin-right: 0; }
.sub-bg-area .match-info .team-match .date-area { padding: 10px 15px; background: rgba(0,0,0,0.4); }
.sub-bg-area .match-info .team-match .date-area .date { background: rgba(60,60,60,0.5); color: #fff; font-size: 1.3rem; letter-spacing: 0; text-align: center; height: 30px; line-height: 30px; }
.sub-bg-area .match-info .team-match .team-info { background: rgba(0,0,0,0.2); overflow: hidden; border-top: 1px solid rgba(255,255,255,0.05); }
.sub-bg-area .match-info .team-match .team-info .l-team { width: 50%; height: 100%; float: left; border-right: 1px solid rgba(255,255,255,0.05); }
.sub-bg-area .match-info .team-match .team-info .r-team { width: 50%; height: 100%; float: right; }
.sub-bg-area .match-info .team-match .team-info .thumbnali { width: 100%; height: 150px; position: relative; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sub-bg-area .match-info .team-match .team-info .thumbnali img { width: auto;  height: 50%; margin-top: 20%; }
.sub-bg-area .match-info .team-match .team-info .thumbnali .label { position: absolute; z-index: 2; width: 30px; height: 20px; line-height: 18px; font-size: 1.1rem; font-family: 'Malgun Gothic'; }
.sub-bg-area .match-info .team-match .team-info .l-team .thumbnali .label { top: 0; left: 0; background: #D31F22; color: #fff; }
.sub-bg-area .match-info .team-match .team-info .r-team .thumbnali .label { top: 0; right: 0; background: #1F4FD3; color: #fff; }
.sub-bg-area .match-info .team-match .team-info .thumbnali .point { width: 40px; height: 40px; display: block; position: absolute; bottom: 0; line-height: 40px; font-size: 1.5rem; color: #fff; font-weight: 100; background: rgba(0,0,0,0.4); }
.sub-bg-area .match-info .team-match .team-info .l-team .thumbnali .point { right: 0; }
.sub-bg-area .match-info .team-match .team-info .r-team .thumbnali .point { left: 0; }
.sub-bg-area .match-info .team-match .team-info .team-name { height: 30px; background: rgba(0,0,0,0.4); color: #fff; text-align: center; line-height: 30px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-bg-area .match-info .team-match .stadium-info { padding: 10px; text-align: center; }
.sub-bg-area .match-info .team-match .stadium-info .league { color: rgba(255,255,255,0.8); letter-spacing: 0; display: block; font-weight: 300; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-bg-area .match-info .team-match .stadium-info .place { color: #00A2FF; font-weight: 400; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-bg-area .match-info .team-match .stadium-info .go-btn { background: #A30002; color: #fff; height: 30px; display: inline-block; line-height: 28px; padding: 0 15px; border-radius: 5px; margin-top: 10px; font-size: 1.2rem; }
.sub-bg-area .match-info .team-match .stadium-info .go-btn:hover { background: #BC0020; }

/* 템프3 */
.sub-bg-area .team-intro-info { width: 1200px; position: absolute; top: 220px; left: 50%; margin-left: -600px; z-index: 2; }
.sub-bg-area .team-intro-info .box { background: rgba(30,30,30,0.90); width: 550px; height: 250px; border-radius: 5px; }
.sub-bg-area .team-intro-info .box.logo { float: left; }
.sub-bg-area .team-intro-info .box.coach { float: right; }
.sub-bg-area .team-intro-info .box .logo-area,
.sub-bg-area .team-intro-info .box .img-area { width: 250px; text-align: center; height: 250px; padding-top: 32px; border-right: 1px solid rgba(255,255,255,0.1); float: left; }
.sub-bg-area .team-intro-info .box .logo-area img,
.sub-bg-area .team-intro-info .box .img-area img { width: 185px; height: 185px; }
.sub-bg-area .team-intro-info .box.coach .img-area img { border-radius: 50%; }
.sub-bg-area .team-intro-info .box .txt-area { float: right; height: 250px; width: 300px; padding: 40px 40px; }
.sub-bg-area .team-intro-info .box .txt-area .recent-rank { color: #fff; font-size: 22px; font-style: italic; margin-bottom: 15px; font-weight: 700; }
.sub-bg-area .team-intro-info .box .txt-area .recent-rank b { font-size: 28px; margin: 0 3px; text-decoration: underline; color: #FF002C; }
.sub-bg-area .team-intro-info .box .txt-area .info { color: #C7C7C7; font-size: 15px; letter-spacing: 0; font-weight: 300; margin-bottom: 5px; }

.sub-bg-area .team-intro-info .box.coach .txt-area .ddaom_ico { width: 25px; height: auto; margin-bottom: 10px; opacity: 0.3; }
/*.sub-bg-area .team-intro-info .box.coach .txt-area .info { font-size: 17px; white-space: pre-wrap; } 감독의 한마디가 길어질 경우 div를 벗어나므로 수정함*/
.sub-bg-area .team-intro-info .box.coach .txt-area .info { font-size: 17px; width: 245px; height: 83%; overflow-y: auto; }
.sub-bg-area .team-intro-info .box.coach .txt-area .coach-name { font-size: 18px; color: #D7D7D7; font-weight: 500; }

.contents { min-height: 500px; background: #f2f4f7; }
.contents .team-page-sub-header-container-wrap { height: 60px; background: #fff; box-shadow: 0 1px 8px 0 rgba(0,0,0,0.1); }
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container { width: 1200px; margin: 0 auto; height: 100%; position: relative; }
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container .sub-menu-list li { display: inline-block; height: 100%; margin-right: 40px; }
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container .sub-menu-list li a { height: 100%; line-height: 60px; font-size: 1.6rem; font-weight: 500; display: block; cursor: pointer; color: #222; position: relative; }
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container .sub-menu-list li a:hover { color: #D00025; }
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container .sub-menu-list li a.active { color: #D00025; font-weight: 600; }
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container .sub-menu-list li a.active:after,
.contents .team-page-sub-header-container-wrap .team-page-sub-header-container .sub-menu-list li a:hover:after { position: absolute; z-index: 1; left: 0; bottom: 0; height: 3px; width: 100%; background: #D00025; content: ''; }

.main-contents,
.page-contents { width: 1200px; margin: 0 auto; padding: 20px 0 100px; }
.page-contents .page-contents-container { overflow: hidden; }
.page-contents .page-contents-container .page-contents-area { min-height: 500px; }
.page-contents .page-contents-container .page-contents-area .info-box { background: #fff; box-shadow: 0 10px 15px -5px rgba(0,0,0,0.05); padding: 60px 15px 15px; position: relative; margin-bottom: 20px; }
.page-contents .page-contents-container .page-contents-area .info-box .box-title { position: absolute; top: 0; left: 0; width: 100%; height: 45px; border-bottom: 1px solid #eee; z-index: 1; padding: 0 15px; line-height: 45px; font-size: 1.5rem; font-weight: bold; }

.btn-type-04 { display: block; text-align: center; color: #e7eef6; background-color: #324662; font-size: 15px; font-weight: bold; padding: 7px 0; border-radius: 2px; }
.btn-type-05 { border-radius: 3px; padding: 4px 15px; font-size: 12px; color: #FFF; background-color: #324661; margin-left: 5px; border: 1px solid #324661; }
.btn-type-06 { border-radius: 3px; padding: 4px 15px; font-size: 12px; color: #FFF; background-color: #969696; margin-left: 5px; border: 1px solid #969696; }
.btn-type-07 { background-color: #426e97; color: #FFFFFF; padding: 5px 10px 7px 10px; border-radius: 3px; font-family: 'Noto Sans KR',Nanum; }
.btn-type-08 { background-color: #f5f5f5; border: 1px solid #dcdcdc; color: #595959; border-radius: 1px; padding: 2px 10px; }
.btn-type-09 { font-weight: bold;font-size: 11px;color: #fff;border: 1px solid #076ab5;background-color: #076ab5;border-radius: 3px;padding: 5px 10px;margin-left:5px;}

span.recent-label {background: red;padding: 0px 5px 0px 4px;border-radius: 50%;color: #fff;font-size: 0.7rem;margin-left: 5px;} 0.7rem;margin-left: 5px;}

/* 로딩창 */
.loading-pop-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.2);
}
/*loading-pop-wrap을 이미지 업로드 팝업과 게시판 파일 업로드 동시에 쓰기위해 min-width를 분리*/
.loading-pop-wrap.width-960 {
  min-width: 960px;
}
.loading-pop-wrap .loading-pop-area {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 도넛 */
.loading-pop-wrap .loading-pop-area > .loading {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 50%;
  margin-left: -22.5px;
  top: 50%;
  margin-top: -22.5px;
}
.loading-pop-wrap .loading-pop-area > .loading .loading-bar {
  border-top: 6px solid transparent;
  border-bottom: 6px solid #2ea7e0;
  border-left: 6px solid #2ea7e0;
  border-right: 6px solid transparent;
  animation: loading 0.8s cubic-bezier(0.4, 0.18, 0.63, 0.86) 0.2s infinite;
  border-radius: 80px;
  width: 45px;
  height: 45px;
  display: block;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 코멘트 */
div.page-contents-container div.page-contents-area div.board-detail-box div.reply-edit-area div.comment-input-area.disabled { padding: 0;}
div.page-contents-container div.page-contents-area div.board-detail-box div.reply-edit-area div.comment-input-area.disabled .comment-disabled-area { width: 100%; position: relative; left: 0; top: 0px; z-index: 1; background: rgb(240 240 240 / 20%); text-align: center; font-size: 13px; font-weight: 500; color: #363636; padding: 30px 0; letter-spacing: 0.5px; }
div.page-contents-container div.page-contents-area div.board-detail-box div.reply-edit-area div.comment-input-area.disabled .comment-disabled-area a {  color: #f41414; font-weight: 600; padding: 0 4px 0 4px; text-decoration: underline; }