@charset "utf-8";
@import url(http://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.3rem; 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; }
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; }
input::-ms-input-placeholder { color: #ccc; }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }
.custom-check { display: none; }

/*숨김처리*/
.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; }
#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; }

/*버튼효과*/
.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-wrap { background: #1b2637; min-width: 1200px }
#footer-wrap .footer-navi-wrap { border-bottom: 1px solid #445267; height: 60px; }
#footer-wrap .footer-navi-wrap .footer-navi { width: 1200px; margin: 0 auto; overflow: hidden; height: 60px; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-l { float: left; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-r { float: right; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-l ul li { margin-right: 30px; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-r ul li { margin-left: 30px; }
#footer-wrap .footer-navi-wrap .footer-navi ul { display: inline-block; }
#footer-wrap .footer-navi-wrap .footer-navi ul li { display: inline-block; line-height: 60px; }
#footer-wrap .footer-navi-wrap .footer-navi ul li a { color: #8996aa; font-size: 13px; font-family: 'Noto Sans KR'; font-weight: 500; transition: color 0.2s ease; letter-spacing: 0; }
#footer-wrap .footer-navi-wrap .footer-navi ul li a:hover { color: #A1ACBC; }
#footer-wrap .info { width: 1200px; margin: 0 auto; padding: 35px 0; color: #8996aa; font-size: 13px; font-family: 'Noto Sans KR'; font-weight: 300;  }
#footer-wrap .info>.box { display: inline-block; margin-right: 30px; }
#footer-wrap .info>.box span,
#footer-wrap .info>.box a { color: #8996aa; letter-spacing: 0; }
#footer-wrap .info>.box .head { display: inline-block; margin-right: 15px; position: relative; }
#footer-wrap .info>.box .head:after { position: absolute; content: ''; width: 1px; height: 11px; background: #8996aa; right: -10px; top: 5px; z-index: 1; }
#footer-wrap .info>.contact { display: block; margin-top: 10px; letter-spacing: 0; }
#footer-wrap .info>.contact address { margin-right: 30px; display: inline-block; }
#footer-wrap .info>.contact .tel { color: #8996aa; display: inline-block; position: relative; padding-left: 20px; }
#footer-wrap .info>.contact .tel:before { position: absolute; content: ''; width: 13px; height: 10px; background: url(../../img/common/tel_ico.png); left: 0; top: 5px; z-index: 1; }
#footer-wrap .copyright-wrap { background: #121b28; height: 42px; }
#footer-wrap .copyright-wrap .copyright { height: 42px; font-size: 12px; color: #48576b; letter-spacing: 0; font-family: 'Noto Sans KR'; font-weight: 300; width: 1200px; margin: 0 auto; line-height: 42px; }

/* 라벨 */
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; }
.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; }
.page-contents .page-contents-container .page-contents-area .paging ul li a:hover img { opacity: 0.7; }

/* 팀 페이지 common */
.sub-bg-area { height: 320px; background: url(../../img/team-page/sub_bg_02.png) no-repeat; background-size: cover; background-position: center; min-width: 1200px; position: relative; }
.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; }
.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 { 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; letter-spacing: 300; }
.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; }
.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.4rem; font-weight: bold; }

/* 헤더 시흥시야구협회 바로가기 */
.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; }