@charset "utf-8"; 
/**********************************************************************
* Descript : 전체 페이지에 적용되는 레이아웃 스타일 정의
-----------------------------------------------------------------------
* 최초작성일 : 2018.04.04
* 최초작성자 : 더웹 유대경
***********************************************************************/



/**********************************************************************
* Descript : ★★★★★★★★★★★★주의 #wrap .inner 클래스 (전체 페이지에 적용됩며, 모든 하위메뉴의 레이아웃사이즈가 변경될 수 있습니다.)★★★★★★★★★★★★★★★★★★
***********************************************************************/
body{min-width:320px;}
#wrap{position:relative; width:100%; min-height:100%; min-width:320px;}
#main-container{}
#sub-container{}


.wide{position:relative; width:100%; margin:0 auto; box-sizing:border-box;}
.full{position:relative; max-width:1400px; margin:0 auto; box-sizing:border-box;}
.inner{position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box;}
@media (min-width:0) and (max-width:980px){.inner{padding:0 10px;}}
/**********************************************************************/



/**********************************************************************
* Descript : Header 스타일(로고, GNB, 로그인/로그아웃)
***********************************************************************/
#header{position:relative; width:100%; height:100px; z-index:10; background:#fff; text-align:center;}


#header .logo{position:absolute; left:0; top:0; width:320px;}
#header .logo a{display:inline-block; width:300px; height:100px; line-height:100px;}
/*#header .logo.active{position:absolute; left:0; top:0; width:400px; height:475px;  background:url(/assets/img/common/gnb_bg.png) no-repeat center top; background-size:cover;}
#header .logo.active a{position:absolute; left:50px; top:150px; display:inline-block; width:300px; height:100px; line-height:100px;}
*/
#header #gnb{position:absolute; width:50%; left:400px; top:0;}
#header #mobile-gnb{display:none;}

/* 1차 카테고리 */
#header #gnb > ul{}
#header #gnb > ul li.gnb{position:relative; float:left;}
#header #gnb > ul li.gnb:nth-child(1){width:35%;}
#header #gnb > ul li.gnb:nth-child(2){width:16.25%;}
#header #gnb > ul li.gnb:nth-child(3){width:16.25%;}
#header #gnb > ul li.gnb:nth-child(4){width:16.25%;}
#header #gnb > ul li.gnb:nth-child(5){width:16.25%;}
#header #gnb > ul li.gnb > a{position:relative; display:block; width:100%; font-size:1.2em; color:#222; background:#fff; font-weight:700; height:100px; line-height:100px; text-align:center; white-space:nowrap;}

/* 2차 카테고리 */
#header #gnb ul li.gnb a + ul.lnb-wrap{position:absolute; width:100%; height:350px; left:0; top:100px; display:none; background:#fff; z-index:9;}
#header #gnb ul li.gnb a + ul.lnb-wrap::before{position:absolute; display:inline-block; content:''; width:1px; height:100%; background:#f3f3f3; top:0; right:0;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb{}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb a{display:block; font-size:0.9em; color:#555; width:100%; height:35px; line-height:35px;}
#header #gnb ul li.gnb:last-child a + ul.lnb-wrap::before{display:none;}

/* GNB hover 스타일 */
#header #gnb > ul li.gnb:hover > a{background:#173277; color:#fff; text-decoration:none;}
/*#header #gnb:hover::before{position:absolute; display:inline-block; content:''; width:430px; height:413px; left:0; top:0; background:url(/assets/img/common/gnb_bg.png) no-repeat center top; background-size:cover;}*/
#header #gnb:hover ul li.gnb::after{position:absolute; display:inline-block; content:''; width:25px; height:2px; background:#173277; left:50%; bottom:0; transform:translate(-50%, 0);}
#header #gnb:hover ul li.gnb > a::before{position:absolute; display:inline-block; content:''; width:1px; height:100%; background:#f3f3f3; top:0; right:0;}
#header #gnb:hover ul li.gnb:last-child > a::before{display:none;}
#header #gnb ul li.gnb:hover ul{background:#173277 !important;}
#header #gnb ul li.gnb:hover ul li.lnb a{ color:#fff !important;}
#header #gnb ul li.gnb:hover ul.lnb-wrap::before{position:absolute; display:inline-block; content:''; width:1px; height:100%; background:#f3f3f3; top:0; right:0;}

#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb:hover a{background:#1185f2;}

/* 로그인, 로그아웃, 회원가입, 마이페이지 */
#header .header-login{position:absolute; right:0; top:0; width:450px; height:100px;}
#header .header-login a{float:left; height:inherit; line-height:inherit; box-sizing:border-box;}
#header .header-login a:hover{text-decoration:none;}
#header .header-login a i{display:block; margin-bottom:10px;}
#header .header-login a.slogan{line-height:100px;}
#header .header-login a.login{background:#fa6d0f; width:100px; padding-top:25px; font-weight:700; color:#fff;}
#header .header-login a.join{background:#1085f2; width:100px; padding-top:25px; font-weight:700; color:#fff;}

.gnb-dim{display:none; position:absolute; left:0; top:0; width:100%; height:475px; z-index:10;}

@media(max-width:1600px){
	#header #gnb{left:330px;}
	#header .logo.active{width:330px;}
	#header .logo.active a{width:250px; left:35px;}
}

@media(max-width:1400px){
	#header #gnb{width:100%; left:0; top:100px; transform:translate(0, 0); border-top:1px solid #eee;}
	#header .logo.active{position:absolute; left:0; top:0; width:320px; height:415px;  background:#fff; background-size:cover;}
	#header .logo.active a{position:relative; left:0; top:0; display:inline-block; width:300px; height:100px; line-height:100px;}
}


@media (max-width:860px){
	#header #gnb,
	#header .header-login{display:none;}

	
	/* 햄버거 버튼 스타일 및 트랜지션 */
	.hamburger{display:block; position:absolute; top:50%; right:10px; transform:translate(0, -50%); z-index:11; cursor:pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
	.hamburger.active{top:30px; right:20px;}
	.hamburger:hover {opacity: 0.7;}
	.box {width:3em; height:2.2em; display:inline-block; position:relative;}
	.bar {display:block; top:50%;}
	.bar, .bar::before, .bar::after {width:100%; height:2px; background-color:#222; position:absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
	.bar::before, .bar::after {content: ""; display: block; }
	.bar::before{top:-1em; }
	.bar::after{bottom:-1em; }

	.spin .bar {transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	.spin .bar::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
	.spin .bar::after {transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

	.spin.active .bar {transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	.spin.active .bar::before {top:0; opacity:0; transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
	.spin.active .bar::after {bottom:0; transform: rotate(-90deg); transition:bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }



	/* 1차 카테고리 */
	#header #mobile-gnb ul{display:inline-block; width:100%; height:100%; box-sizing:border-box; padding:0 15px; background:#fff; margin-left:0;}
	#header #mobile-gnb ul li.gnb{position:relative; float:none; clear:both; display:block;}
	#header #mobile-gnb ul li.gnb > a{display:inline-block; width:100%; font-size:1.2em; height:4em; line-height:4em; padding:0; color:#222; font-weight:700;text-align:center; white-space:nowrap; border-bottom:1px solid #eee; }
	#header #mobile-gnb ul li.gnb:last-child > a{border-bottom:0;}
	#header #mobile-gnb ul li.gnb.active{}
	#header #mobile-gnb ul li.gnb.active > a{color:#183278}

	/* 2차 카테고리 */
	#header #mobile-gnb ul li.gnb a + ul.lnb-wrap{position:relative; width:100%; margin:0 auto; left:0; top:0; display:none; background:#f7f7f7; text-align:left; box-sizing:border-box; padding:10px 55px;}
	#header #mobile-gnb ul li.gnb:hover ul.lnb-wrap{display:block;}
	#header #mobile-gnb ul li.gnb a + ul.lnb-wrap li.lnb{}
	#header #mobile-gnb ul li.gnb a + ul.lnb-wrap li.lnb a{position:relative; font-size:1em; color:#636363;  height:3em; line-height:3em; font-weight:700;}
	#header #mobile-gnb ul li.gnb a + ul.lnb-wrap li.lnb a::before{position:absolute; display:inline-block; content:''; width:4px; height:4px; left:-15px; top:5px; background:#fd7016;}
	#header #mobile-gnb ul li.gnb a + ul.lnb-wrap li.lnb.active{}
	#header #mobile-gnb ul li.gnb a + ul.lnb-wrap li.lnb.active a{color:#183278;}

	#header #mobile-gnb .gnb-btn{position:relative; left:0; top:0; display:inline-block; display:block;}
	#header #mobile-gnb .gnb-btn > a{float:left; width:25%; max-width:255px; height:60px; line-height:60px; color:#fff; font-weight:700; min-width:120px; font-size:1em;}
	#header #mobile-gnb .gnb-btn > a.login{background:#fa6d0f;}
	#header #mobile-gnb .gnb-btn > a.join{background:#1085f2;}

	.gnb-dim{display:none; position:fixed; z-index:5; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.7);}
}

/**********************************************************************/




/**********************************************************************
* Descript : 페이지 비주얼 스타일(페이지 타이틀, 이전페이지, 다음페이지)
***********************************************************************/
#sub-visual{position:relative; width:100%; background:#ddd;}

#sub-visual[data-menu="부산광역시장배 슈퍼컵 안내"]{background:url(/assets/img/common/visual_bg0101.jpg) no-repeat center center; background-size:cover;} /* #sub-visual의 attr 속성 값으로 스타일 지정 할 경우 사용합니다. */
#sub-visual[data-menu="참가접수"]{background:url(/assets/img/common/visual_bg0102.jpg) no-repeat center center; background-size:cover;}
#sub-visual[data-menu="종목안내"]{background:url(/assets/img/main/visual_slider_bg01.jpg) no-repeat center center; background-size:cover;}
#sub-visual[data-menu="대회결과"]{background:url(/assets/img/common/visual_bg0104.jpg) no-repeat center center; background-size:cover;}
#sub-visual[data-menu="커뮤니티"]{background:url(/assets/img/common/visual_bg0105.jpg) no-repeat center center; background-size:cover;}
#sub-visual[data-menu="로그인"]{background:url(/assets/img/common/visual_bg_login.jpg) no-repeat center center; background-size:cover;}
#sub-visual[data-menu="멤버쉽"]{background:url(/assets/img/common/visual_bg_login.jpg) no-repeat center center; background-size:cover;}
#sub-visual[data-menu="MY TEAM 관리"]{background:url(/assets/img/common/visual_bg_login.jpg) no-repeat center center; background-size:cover;}
#sub-visual .sub-visual-prev, #sub-visual .sub-visual-next{position:absolute; top:50%;}
#sub-visual .sub-visual-prev a, #sub-visual .sub-visual-next a{}
#sub-visual .sub-visual-prev a span, #sub-visual .sub-visual-next a span{}
#sub-visual .sub-visual-prev{ left: 0; transform: translate(0, -50%);}
#sub-visual .sub-visual-next{ right:0; transform: translate(0, -50%);}
#sub-visual h2.tit{position:absolute; top: 70%; left:20px; transform: translate(0, -50%);}
#sub-visual h2.hello{position:absolute; top: 50%; left:0; transform: translate(0, -50%); text-align:center; width:100%;}


@media (max-width:9999px){
	#sub-visual .inner{height:400px;}
}

@media (max-width:1400px){
	#sub-visual .inner{height:300px; margin-top:100px;}
	#sub-visual h2{position:absolute; top:50%; left:20px; transform: translate(0, -50%);}
}

@media (max-width:860px){
	#sub-visual .inner{height:250px; margin-top:0;}
	#sub-visual h2{width:70%; }
}

@media (max-width:480px){
	#sub-visual .inner{height:200px;}
	#sub-visual h2{width:90%; position:absolute; top:50%; left:0;}
	#sub-visual h2.hello{top:80px; width:90%; padding:0 5%;}
}

/**********************************************************************/



/**********************************************************************
* Descript : 페이지 네비게이션(Bread Crumb)
***********************************************************************/
#breadcrumb{position:relative; width:100%; height:50px; z-index:2;}
#breadcrumb a, #breadcrumb button, #breadcrumb i{display:inline-block; vertical-align:middle; color:#969595;}
#breadcrumb b{color:#222;}
#breadcrumb i{font-size:11px; margin:0 10px;}
#breadcrumb a.home{width:15px; height:50px; background:url(/assets/img/common/home.png) no-repeat center center; cursor:pointer; text-align:center; font-size:14px;}

/**********************************************************************/




/**********************************************************************
* Descript : 풋터 스타일
***********************************************************************/
#footer{width:100%; text-align:center;}

#footer .fnb{background:#b7bbc1; text-align:center; padding:15px 0;}
#footer .fnb a{position:relative; display:inline-block; height:inherit; line-height:inherit; margin:0 1em; padding:7px 0; color:#fff; font-size:0.9em; font-weight:700;}


#footer ul.footer-info{background:url(/assets/img/common/f_logo.png) no-repeat left center; text-align:left; padding:25px 0 25px 250px;}
#footer ul.footer-info p{font-size:0.95em; line-height:1.7em; color:#888;}
#footer ul.footer-info p span{display:inline-block; margin-right:25px;}
#footer ul.footer-info p.copyright{margin-top:15px; font-size:0.85em; color:#555;}
#footer ul.footer-info p.copyright a{color:#aaa;}
@media (max-width:640px){
	#footer ul.footer-info{background:url(/assets/img/common/f_logo.png) no-repeat left 25px; text-align:left; padding:80px 0 25px 0;}
	#footer ul.footer-info p{font-size:1em;}
	#footer ul.footer-info p.copyright{font-size:0.7em;}
}

.scroll-top{position:fixed; opacity:0; right:5px; bottom:35px; z-index:8; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.scroll-top img{width:4em;}
.scroll-top a{display:block;}

/**********************************************************************/