@charset "utf-8";


body{width:100%; overflow-x:hidden;}

/* 공통 스타일 지정 */
.full{max-width:1200px; margin:0 auto;}
.inner{max-width:1200px; margin:0 auto;}

@media(max-width:1280px){
	.inner{max-width:100%; margin:0 10px;}
}

mark{color:#5987d3;} /* 대표색상 */

select{background:#fff url(/startup/assets/img/common/icon_select_arrow.png) no-repeat right center;}

input.datepicker{background:url(/startup/assets/img/common/icon_calendar.png) no-repeat 10px center; padding:0 10px 0 35px;}


.caution{margin-top:10px; font-size:14px; color:#5987d3; line-height:1.35;}



#skip{position:relative; height:0; z-index:999;}
#skip a{position:absolute; opacity:0; width:100%; height:50px; line-height:50px; left:0; top:-50px; text-align:center; font-size:15px; color:#fff; z-index:999;}
#skip a:focus{opacity:1; top:0;}
#skip a:nth-child(1){background:#4379d4;}
#skip a:nth-child(2){background:#e5005c;}



.no_data{margin-top:10px; padding:150px 0 50px 0; border-top:2px solid #000; text-align:center; border-bottom:1px solid #ddd; font-size:19px; font-weight:700; background:url(/startup/assets/img/main/no_data.png) no-repeat center 40px;}




/* 공통 버튼 */
.btn-group{}
.btn-group a,
.btn-group button{display:inline-block; height:50px; border-radius:3px; padding:0 20px; margin:2px 4px 2px 0; background-color:#f3f3f3; font-size:14px; color:#111;}

.btn-group a{line-height:50px;}

@media(max-width:768px){
	.btn-group a,
	.btn-group button{height:45px; padding:0 15px; font-size:13px;}
	
	.btn-group a{line-height:45px;}
}

.btn-group a:last-child,
.btn-group button:last-child{margin-right:0;}




.btn-group .btn{}
.btn-group .btn span{padding-right:20px; background-repeat:no-repeat; background-position:99% center;}

.btn-group .btn.btn-active{background:#5987d3; color:#fff;}
.btn-group .btn.btn-confirm{background:#3fa8ac; color:#fff;}

.btn-group .btn.btn-id{background:#6b81e1; color:#fff;}
.btn-group .btn.btn-password{background:#3fa8ac; color:#fff;}
.btn-group .btn.btn-join{background:#757a85; color:#fff;}

.btn-group .btn.btn-download{background:#3f4652; color:#fff;}
.btn-group .btn.btn-download span{padding-right:30px; background-image:url(/startup/assets/img/common/icon_download.png);}






/* 해더 */
#header{position:relative; text-align:center; height:90px; border-bottom:1px solid #d9dadc; z-index:10;}
#header .full{position:relative;}

#header .logo{position:absolute; width:400px; height:inherit; left:0; top:0; margin:0; z-index:11; transition:all 0.2s ease;}
#header .logo::before{
	opacity:0; top:-9999px; left:-9999px;
  	content: url(/startup/assets/img/common/m_logo.png);
}

#header .logo h1{height:inherit;}
#header .logo a{display:block; width:100%; height:inherit; background:url(/startup/assets/img/common/logo.png) no-repeat center;}

#header .func{position:absolute; right:70px; top:0; line-height:90px; z-index:11; opacity:1; visibility:visible; transition:all 0.2s ease;}
#header .func a{margin-right:30px; height:55px; line-height:55px; border-radius:5px; font-size:16px; color:#5a606b; vertical-align:middle !important;}

#header .func a.saha{width:125px; margin-right:0; font-weight:700; border:1px solid #6b77c8; color:#384287; line-height:53px;}
#header .func a.saha span{padding-left:25px; background:url(/startup/assets/img/common/simbol_saha.png) no-repeat left center;}

@media(max-width:1400px){
	#header .func a:nth-child(2){margin-right:0;}
	#header .func a.saha{display:none;}
}



#header .dim{opacity:0; visibility:hidden; position:absolute; width:100%; height:300px; left:0; top:100px; background:#fff url(/startup/assets/img/common/gnb_bg.png) no-repeat 10% top; z-index:9; border-bottom:2px solid #5987d3; transition:all 0.25s ease;}
#header .dim.on{opacity:1; visibility:visible; top:90px;}


#header .mnb{display:none;} /* 1024 이상의 해상도에서 모바일 메뉴 숨김처리 */

#header .gnb{position:relative; display:inline-block; height:inherit; opacity:1; visibility:visible; transition:all 0.2s ease; z-index:10;}
#header .gnb > ul{display:inline-block; vertical-align:top;}
#header .gnb > ul > li{float:left;}
#header .gnb > ul > li > a{display:block; height:90px; padding:0 35px; font-size:20px; font-weight:700; color:#232b39; line-height:90px; transition:all 0.2s ease; overflow:hidden;}
#header .gnb > ul > li > a > span{}

#header .gnb > ul > li > a + ul{visibility:hidden; opacity:0; position:absolute; width:1280px; left:50%; top:100px; margin-left:-640px; padding:30px 0 30px 375px; text-align:left; font-size:0; transition:all 0.35s ease;}

#header .gnb > ul > li > a + ul::before{display:inline-block; font-size:27px; font-weight:700; left:0; top:30px;}
/* #header .gnb > ul > li > a + ul::after{display:inline-block; content:'스마트창업 청년들의 창업과\A일자리를 지원합니다.'; left:0; top:80px; padding-top:20px; font-size:14px; color:#9f9f9f; line-height:1.35; white-space: pre; background:url(/startup/assets/img/common/gnb_bar.png) no-repeat left top;} */

#header .gnb > ul > li:hover > a + ul,
#header .gnb > ul > li.on > a + ul{visibility:visible; opacity:1; top:90px;}




#header .gnb > ul > li > a + ul > li{display:inline-block; vertical-align:top; margin-right:35px;}
#header .gnb > ul > li > a + ul > li:nth-child(4n + 4){margin-right:0;}
#header .gnb > ul > li > a + ul > li:nth-child(n + 5){margin-top:20px;}

#header .gnb > ul > li > a + ul > li > a{position:relative; display:block; width:200px; height:45px; line-height:43px; padding:0 20px; border-radius:5px; border:1px solid #ddd; font-size:15px; font-weight:700; color:#232b39; text-align:left; background:#fff; transition:all 0.15s ease;}
#header .gnb > ul > li > a + ul > li > a::after{display:inline-block; width:0; height:0; right:15px; top:50%; margin-top:-4px; border:4px solid transparent; border-left:4px solid #ddd;}
#header .gnb > ul > li > a + ul > li > a > span{}

#header .gnb > ul > li > a + ul > li > a:hover{border:1px solid #4379d4; color:#4379d4;}
#header .gnb > ul > li > a + ul > li > a::after{border-left:4px solid #4379d4;}


#header .gnb > ul > li:nth-child(1) > a + ul::before{content:'센터소개';}
#header .gnb > ul > li:nth-child(2) > a + ul::before{content:'창업지원';}
#header .gnb > ul > li:nth-child(3) > a + ul::before{content:'청년지원';}
#header .gnb > ul > li:nth-child(4) > a + ul::before{content:'채용정보';}
#header .gnb > ul > li:nth-child(5) > a + ul::before{content:'시제품 제작실';}
#header .gnb > ul > li:nth-child(6) > a + ul::before{content:'청년소통';}
#header .gnb > ul > li:nth-child(7) > a + ul::before{content:'청신호';}


/* 마우스 오버 이팩트 */
#header .gnb > ul > li:hover > a + ul {perspective: 1000px;}
#header .gnb > ul > li:hover > a + ul li {transform-origin: top center; opacity: 0; animation-name:fadeUpGnb; animation-duration: 200ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
#header .gnb > ul > li:hover > a + ul li:nth-child(1) {animation-delay:300ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(2) {animation-delay:400ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(3) {animation-delay:500ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(4) {animation-delay:600ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(5) {animation-delay:700ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(6) {animation-delay:800ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(7) {animation-delay:900ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(8) {animation-delay:1000ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(9) {animation-delay:1100ms;}
#header .gnb > ul > li:hover > a + ul li:nth-child(10) {animation-delay:1200ms;}

@keyframes fadeUpGnb {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}



/* 모바일 햄버거 버튼 */
.hamburger{position:absolute; right:0; top:0; width:80px; height:80px; line-height:80px; text-align:center; z-index:99; transition:all 0.2s ease;}


@media(min-width:1024px){                
    .hamburger{display:none;}
}

@media(max-width:1024px){                
    .hamburger{display:block;}
}

.hamburger .bar, .hamburger .bar::before, .hamburger .bar::after {position:absolute; width:30px; height:3px; border-radius:3px; background-color:#4379d4;}

.hamburger .bar{left:50%; top:50%; margin:-1.5px 0 0 -15px;}
.hamburger .bar::before, .hamburger .bar::after {display:inline-block; left:50%; margin-left:-15px;}
.hamburger .bar::before{top:-10px;}
.hamburger .bar::after{top:10px;}

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

.hamburger.active .bar,
.hamburger.active .bar::before,
.hamburger.active .bar::after{background-color:#fff;}

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

@media(max-width:640px){                
    .hamburger{width:70px; height:70px;}
}








@media(max-width:1600px){
	#header{height:80px;}
	
	#header .logo{width:280px;}
	/* #header .logo a{background-size:280px;} */
	
	#header .func{right:10px;}
	#header .func a{height:48px; line-height:48px; font-size:15px;}
	#header .func a.saha{line-height:46px;}
	
	#header .func,
	#header .gnb > ul > li > a{line-height:79px;}
	
	
	
	
	#header .dim,
	#header .dim.on{top:80px;}

	#header .gnb > ul > li > a + ul{top:110px;}
	
	/* #header .gnb > ul > li > a + ul > li{margin-bottom:20px;}
	#header .gnb > ul > li > a + ul > li:nth-child(4n + 4){margin-right:35px;}
	#header .gnb > ul > li > a + ul > li:nth-child(n + 5){margin-top:0;} */
	
	
}






@media(max-width:1400px){
	#header .gnb > ul{margin-left:80px;}
	#header .gnb > ul > li > a{padding:0 30px; font-size:19px;}
}

@media(max-width:1280px){
	#header .gnb{display:block;}
	
	#header .gnb > ul > li > a{padding:0 20px; font-size:17px;}
	
	#header .gnb > ul > li > a + ul{width:100%; left:0; margin-left:0; padding-left:20vw;}
	#header .gnb > ul > li > a + ul::before,
	#header .gnb > ul > li > a + ul::after{left:10px;}
}

@media(max-width:1180px){
	#header .gnb > ul > li > a{padding:0 15px; font-size:16px;}
	
	
	#header .gnb > ul > li > a + ul > li{margin-right:15px;}
	#header .gnb > ul > li > a + ul > li:nth-child(n + 5){margin-top:15px;}
	
	#header .gnb > ul > li > a + ul > li > a{width:190px;}
}


@media(max-width:1024px){
	#header .func{right:-20px; opacity:0; visibility:hidden;}
	#header .gnb{visibility:hidden; opacity:0;}
	
	#header .logo{left:50%; margin-left:-140px}
	
	
	
	
	


	
	
	
	
	
	
	
	
	
	/* 모바일 메뉴 */
	#header .mnb{display:block; opacity:0; visibility:hidden; position:fixed; left:0; top:0; width:100%; height:100%; z-index:11; overflow-y:auto; background:rgba(0,0,0,0.85); text-align:right; font-size:0; transition:all 0.35s ease;}
	#header .mnb.on{opacity:1; visibility:visible;}
	
	.mnb::before{opacity:0; visibility:hidden; position:fixed; display:inline-block; width:100%; height:100vh; max-width:300px; right:-50px; top:0; background:#5987d3; transition:all 0.35s ease 0.2s;}
	.mnb.on::before{right:0; opacity:1; visibility:visible;}
	
	.mnb .member{position:relative; width:100%; z-index:1; font-size:0;}
	
	.mnb .member > a{display:block; margin-top:15px; font-size:13px; color:#fff; text-align:center;}
	.mnb .member ul{display:inline-block; width:100%; vertical-align:top;}
	.mnb .member ul li{float:left; width:50%;}
	.mnb .member ul li a{display:block; line-height:50px; font-size:15px; color:#fff; text-align:center;}
	.mnb .member ul li:nth-child(1) a{background:#4dc0bf;}
	.mnb .member ul li:nth-child(2) a{background:#00479d;}
	
	
	.mnb .inner{opacity:0; visibility:hidden; margin:0 -50px 0 0; position:relative; display:inline-block; width:300px; z-index:1; padding:80px 0; transition:all 0.35s ease 0.2s;}
	.mnb.on .inner{margin-right:0; opacity:1; visibility:visible;}
	
	.mnb .inner > ul{}
	.mnb .inner > ul > li{border-top:1px solid #426db5;}
	.mnb .inner > ul > li:first-child{border-top:0;}
	.mnb .inner > ul > li > a{position:relative; display:block; height:50px; line-height:50px; padding:0 20px; color:#fff; font-size:15px; text-align:left;}
	.mnb .inner > ul > li > a > span{}
	
	.mnb .inner > ul > li > a::before{display:inline-block; width:24px; height:24px; border-radius:7px; right:15px; top:50%; margin-top:-12px; background:#f6f6f6;}
	.mnb .inner > ul > li > a::after{display:inline-block; width:0; height:0; right:23px; top:50%; margin-top:-2px; border:4px solid transparent; border-top:4px solid #5987d3;}
	.mnb .inner > ul > li.on > a::after{border-top:0; border-bottom:4px solid #5987d3;}
	
	
	.mnb .inner > ul > li > a + ul{display:none;}
	.mnb .inner > ul > li > a + ul > li{}
	.mnb .inner > ul > li > a + ul > li a{display:block; padding:0 30px; line-height:45px; font-size:13px; color:#fff; text-align:left; background:#4b78c4; border-top:1px solid #426db5;}
	.mnb .inner > ul > li > a + ul > li a span{}

	
}

@media(max-width:640px){
	#header{height:70px;}
	#header .logo{width:200px; margin-left:-100px;}
	#header .logo a{background:url(/startup/assets/img/common/m_logo.png) no-repeat center; background-size:120px;}
}




/* 로케이션 */
.breadcrumbs{display:inline-block; width:100%; height:60px; vertical-align:top; border-bottom:1px solid #ebeced; line-height:60px;}
.breadcrumbs .full{position:relative; height:inherit;}
.breadcrumbs .full > ul{}
.breadcrumbs .full > ul > li{position:relative; float:left;}
.breadcrumbs .full > ul > li::after{display:inline-block; width:5px; height:100%; right:-5px; top:0; background:url(/startup/assets/img/common/icon_breadcrumbs_arrow.png) no-repeat center;}
.breadcrumbs .full > ul > li:last-child::after{display:none;}
.breadcrumbs .full > ul > li.home{}
.breadcrumbs .full > ul > li.home a{display:block; width:60px; height:59px; background:url(/startup/assets/img/common/icon_home.png) no-repeat center;}
.breadcrumbs .full > ul > li > button{position:relative; display:block; width:100%; min-width:200px; padding:0 20px; height:59px; text-align:left; font-size:15px;}
.breadcrumbs .full > ul > li > button::before{display:inline-block; width:24px; height:24px; border-radius:7px; right:15px; top:50%; margin-top:-12px; background:#f6f6f6;}
.breadcrumbs .full > ul > li > button::after{display:inline-block; width:0; height:0; right:23px; top:50%; margin-top:-2px; border:4px solid transparent; border-top:4px solid #a8a8a8;}
.breadcrumbs .full > ul > li > button:focus::after{border-bottom:4px solid #a8a8a8; border-top:0;}

.breadcrumbs .full > ul > li:last-child > button{color:#3f4652; font-weight:400;}
.breadcrumbs .full > ul > li:last-child > button::before{background:#5987d3;}
.breadcrumbs .full > ul > li:last-child > button::after{border-top:4px solid #fff;}
.breadcrumbs .full > ul > li:last-child > button:focus::after{border-bottom:4px solid #fff; border-top:0;}


.breadcrumbs .full > ul > li > button + ul{opacity:0; visibility:hidden; position:absolute; width:100%; left:0; top:70px; background:#fff; z-index:10; border:1px solid #ebeced; border-top:0;  transition:all 0.25s ease;}
.breadcrumbs .full > ul > li > button:focus + ul,
.breadcrumbs .full > ul > li.on > button + ul{visibility:visible; opacity:1; top:60px;}
.breadcrumbs .full > ul > li > button + ul li{border-bottom:1px solid #ebeced;}
.breadcrumbs .full > ul > li > button + ul li:last-child{border-bottom:0;}
.breadcrumbs .full > ul > li > button + ul li a{position:relative; display:block; line-height:40px; padding:0 20px; font-size:14px; color:#9A9A9A;}
.breadcrumbs .full > ul > li > button + ul li a::after{display:inline-block; width:0; height:0; right:20px; top:50%; margin-top:-2px; border:4px solid transparent; border-left:4px solid #a8a8a8;}
.breadcrumbs .full > ul > li > button + ul li a span{}
.breadcrumbs .full > ul > li > button + ul li a:hover{background:#5987d3; color:#fff;}
.breadcrumbs .full > ul > li > button + ul li a:hover::before{display:inline-block; width:100%; height:100%; left:-1px; top:-1px; border:1px solid #5987d3; box-sizing:content-box; z-index:1;}
.breadcrumbs .full > ul > li > button + ul li a:hover::after{border-left:4px solid #fff;}





.breadcrumbs .share{position:absolute; right:0; top:50%; margin-top:-17.5px; opacity:1; transition:all 0.2s ease;}
.breadcrumbs .share::before{
	opacity:0; top:-9999px; left:-9999px;
  	content: url(/startup/assets/img/common/icon_print_on.png)
  			 url(/startup/assets/img/common/icon_sns_on.png);
}

.breadcrumbs .share > ul{}
.breadcrumbs .share > ul > li{float:left; margin-right:5px;}
.breadcrumbs .share > ul > li:last-child{margin-right:0;}

.breadcrumbs .share > ul > li > button + ul{opacity:0; visibility:hidden; position:absolute; left:0; top:45px; transition:all 0.25s ease;}

.breadcrumbs .share > ul > li > button:focus + ul,
.breadcrumbs .share > ul > li.on > button + ul{opacity:1; visibility:visible; top:35px; z-index:9;}

.breadcrumbs .share > ul > li > button + ul li{margin-top:5px;}
.breadcrumbs .share > ul > li > button + ul li a{}

.breadcrumbs .share button,
.breadcrumbs .share a{display:block; width:35px; height:35px; border-radius:5px; background-color:#f6f6f6; background-repeat:no-repeat; background-position:center; transition:all 0.25s ease;}

.breadcrumbs .share button.print{background-image:url(/startup/assets/img/common/icon_print.png);}
.breadcrumbs .share button.sns-share{background-image:url(/startup/assets/img/common/icon_sns.png);}

.breadcrumbs .share > ul > li:hover button.print{background-color:#777; background-image:url(/startup/assets/img/common/icon_print_on.png);}
.breadcrumbs .share > ul > li:hover button.sns-share{background-color:#777; background-image:url(/startup/assets/img/common/icon_sns_on.png);}

.breadcrumbs .share a#snsFacebook{background-color:#3a5895; background-image:url(/startup/assets/img/common/icon_facebook.png);}
.breadcrumbs .share a#snsTwitter{background-color:#29a4da; background-image:url(/startup/assets/img/common/icon_twitter.png);}

@media(max-width:1280px){
	.breadcrumbs .share{right:10px;}
}

@media(max-width:1024px){
	.breadcrumbs .share{right:-20px; opacity:0;}
}

@media(max-width:768px){
	.breadcrumbs{height:50px;}
	.breadcrumbs .full > ul > li:nth-child(n + 2){width:calc(50% - 30px);}
	.breadcrumbs .full > ul > li.home a{height:50px; line-height:49px;}
	.breadcrumbs .full > ul > li > button{min-width:auto; height:50px;}
	
	.breadcrumbs .full > ul > li > button:focus + ul{top:50px;}
}

@media(max-width:400px){
	.breadcrumbs .full > ul > li > button{font-size:14px;}
}






#container .inner{position:relative; padding:70px 0 70px 250px; transition:all 0.2s ease;}
#container[data-title="청년정책검색"] .inner{max-width:1280px; padding:0;}
#container[data-title="청년정책검색"] .contents{padding:0 !important;}

#container #snb{position:absolute; width:250px; left:0; top:70px; opacity:1; transition:all 0.2s ease;}
#container #snb h2{line-height:130px; background:#5987d3 url(/startup/assets/img/common/h2_bg.png) no-repeat center; background-size:cover; text-align:center; border-radius:0 25px 0 0;}
#container #snb h2 span{display:inline-block; line-height:1; font-size:25px; font-weight:700; color:#fff;}

#container #snb>ul{border-left:1px solid #bbb; border-right:1px solid #bbb;}
#container #snb>ul>li{border-bottom:1px solid #bbb;}
#container #snb>ul li a{position:relative; display:block; height:55px; line-height:55px; padding:0 25px; font-size:16px; color:#46495c; background-color:#fff;}
#container #snb>ul li a:hover{background-color:#f3f3f3;}
#container #snb>ul li a::after{display:inline-block; width:55px; height:100%; right:0; top:0; background-image:url(/startup/assets/img/common/icon_snb_arrow.png); background-repeat:no-repeat; background-position:center;}
#container #snb>ul li a span{}

#container #snb>ul>li.current a{background:#3f4652; color:#fff;}
#container #snb>ul>li.current a::before{display:inline-block; width:100%; height:100%; left:-1px; top:-1px; border:1px solid #3f4652; box-sizing:content-box;}
#container #snb>ul>li.current a::after{background-image:url(/startup/assets/img/common/icon_snb_arrow_on.png);}

#container #snb>ul>li.current ul li a{background:#ddd; color:#3f4652;}
#container #snb>ul>li.current ul li a.current { color: #000; font-weight: bold; }
#container #snb>ul>li.current ul li{border-top:1px solid #bbb;}
#container #snb>ul>li.current ul li:first-child {border-top: none; }
#container #snb>ul>li.current ul li a::before {border: none;}
#container #snb>ul>li.current ul li a::after{background-image:url(/startup/assets/img/common/icon_snb_arrow_on2.png);}

@media(max-width:1024px){
	#container .inner{padding:70px 0;}
	#container #snb{left:-250px; opacity:0;}
}

@media(max-width:768px){
	#container .inner{padding:50px 0 100px 0;}
}




#container .contents{padding-left:70px; transition:all 0.2s ease;}
#container .contents h3{margin-bottom:60px; font-size:35px; font-weight:700; color:#000; letter-spacing:-1.5px;}

@media(max-width:1024px){
	#container .contents{padding-left:0;}
	
	#container .contents h3{margin-bottom:40px; font-size:31px; text-align:center;}
}



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

/* 게시판 리스트 검색 */
.board-search{position:relative;}

.board-search select,
.board-search input[type="text"],
.board-search button{font-size:15px; height:48px;}

.board-search select{margin-right:5px;}
.board-search input[type="text"]{width:200px; border-right:0;}
.board-search button{width:48px; border:1px solid #D8D8D8; border-left:0; background:url(/startup/assets/img/common/icon_search.png) no-repeat center;}


.board-search dl{font-size:0;}
.board-search dl dt,
.board-search dl dd{position:relative; display:inline-block; vertcial-align:top; line-height:48px; font-size:15px;}

.board-search dl dd:nth-child(2)::after{display:inline-block; width:1px; height:12px; right:-1px; top:50%; margin-top:-6px; background:#d9d9d9;}

.board-search dl dt{margin-right:8px;}

.board-search ul{}
.board-search ul li{width:50%;}



@media(max-width:768px){
	.board-search select{width:100px;}
	.board-search input[type="text"]{min-width:auto; width:calc(100% - 155px);}
	.board-search button{width:50px;}

	.board-search .board-total{position:relative; margin-top:10px;}
	
	.board-search ul li{width:100%;}
}


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


/* 게시판 페이지, 페이징 */
.guide .board-pagination{}
.guide .board-pagination button,
.guide .board-pagination a,
.guide .board-pagination em{display:inline-block; width:40px; height:40px; border-radius:40px; font-size:15px;}

.guide .board-pagination a{line-height:40px;}
.guide .board-pagination em{background:#5987d3; color:#fff; line-height:40px;}


.guide .board-pagination button{border:1px solid #cecece; background-repeat:no-repeat; background-position:center;}

.guide .board-pagination button.first{background-image:url(/startup/assets/img/common/icon_first.png);}
.guide .board-pagination button.prev{margin:0 5px; background-image:url(/startup/assets/img/common/icon_prev.png);}
.guide .board-pagination button.next{margin:0 5px; background-image:url(/startup/assets/img/common/icon_next.png);}
.guide .board-pagination button.last{background-image:url(/startup/assets/img/common/icon_last.png);}


@media(max-width:768px){
	.guide .board-pagination button,
	.guide .board-pagination a,
	.guide .board-pagination em{width:30px; height:30px; font-size:13px;}

	.guide .board-pagination a{line-height:30px;}
	.guide .board-pagination em{line-height:26px;}
}

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



/* 기본 테이블 */
.guide table{width:100%; border-top:2px solid #000; font-size:15px;}
.guide table.fixed{table-layout:fixed;}

.guide table th,
.guide table td{height:50px; padding:10px; vertical-align:middle; background:#fff;}

.guide table th{font-weight:700;}

.guide table thead{}
.guide table thead th,
.guide table thead td{height:60px; border-bottom:1px solid #aaa;}


.guide table tbody th,
.guide table tbody td{border-bottom:1px solid #d7d7d7;}

.guide table tbody th{background:#fafafa; border-right:1px solid #d7d7d7;}
.guide table tbody td.br{border-right:1px solid #d7d7d7;}

.guide table:nth(.calendar) tbody tr:hover th,
.guide table:nth(.calendar) tbody tr:hover td{background:#fafafa;}

.guide table tfoot th,
.guide table tfoot td{}

.guide table tfoot th{background:#eee;}
.guide table tfoot td{background:#fafafa;}



.guide table tbody td > *:not(ul):not(ol):not(img):not(a):not(p):not(u):not(button){display:inline-block; vertical-align:top; height:34px; line-height:34px;}
.guide table tbody td button.reserve{height:34px; border-radius:34px; padding:0 20px; background:#1081ba; color:#fff; font-weight:700;}
.guide table tbody td button.reserve:disabled{}

.guide table tbody td.init{font-size:0;}


.guide table tbody td button.state{min-width:90px; padding:0 15px; background:#5987d3; color:#fff; font-weight:700;}


.guide table tbody td mark.notice{padding:0 15px; border-radius:40px; background:#5987d3; color:#fff; font-weight:700;}


@media(max-width:768px){
	.guide table[data-table-type="notice"]{}
}


.guide table.border{}

.guide table.border th:first-child{border-left:1px solid #d7d7d7;}
.guide table.border th { background-color: #f6f6f6; }
.guide table.border th,
.guide table.border td{border-right:1px solid #d7d7d7;}



.guide table td span.state{display:inline-block; width:80px; height:35px; line-height:35px; border-radius:3px; text-align:center; font-size:15px;}
.guide table td span.state[data-type="대기"]{background:#fff; border:1px solid #5987d3; color:#5987d3; line-height:33px;}
.guide table td span.state[data-type="승인"]{background:#5987d3; color:#fff;}
.guide table td span.state[data-type="취소"]{background:#eee; border:1px solid #ddd; line-height:33px;}





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

/* 게시판 리스트 */
.board-list{margin-top:10px; border-top:2px solid #000; font-size:15px;}
.board-list ul{display:inline-block; width:100%; vertical-align:top; white-space:nowrap; border-bottom:1px solid #ddd;}
.board-list ul li{float:left; padding:0 10px; min-height:60px; line-height:60px;}
.board-list ul:hover{background:#fafafa;}
.board-list ul:hover a{color:#5987d3; font-weight:700;}



.board-list ul li img{vertical-align:middle;}

.board-list ul li mark.notice{display:inline-block; width:60px; height:35px; line-height:35px; border-radius:40px; background:#5987d3; color:#fff; font-size:14px;}

.board-list ul li span.state{display:inline-block; width:80px; height:40px; line-height:40px; border-radius:3px; text-align:center; font-size:15px;}
.board-list ul li span.state[data-state="답변완료"]{background:#3f4652; color:#fff;}
.board-list ul li span.state[data-state="답변대기"]{background:#f3f3f3; color:#999;}


.board-list ul li span.state[data-type="대기"]{background:#eee; border:1px solid #ddd;}
.board-list ul li span.state[data-type="신청"]{}
.board-list ul li span.state[data-type="취소"]{}


.board-list[data-table-type="일반"] ul li:nth-child(1){width:100px;}
.board-list[data-table-type="일반"] ul li:nth-child(2){width:calc(100% - 600px);}
.board-list[data-table-type="일반"] ul li:nth-child(3){width:200px;}
.board-list[data-table-type="일반"] ul li:nth-child(4){width:120px;}
.board-list[data-table-type="일반"] ul li:nth-child(5){width:80px;}
.board-list[data-table-type="일반"] ul li:nth-child(6){width:100px;}


.board-list[data-table-type="Q&A"] ul li:nth-child(1){width:100px;}
.board-list[data-table-type="Q&A"] ul li:nth-child(2){width:calc(100% - 580px);}
.board-list[data-table-type="Q&A"] ul li:nth-child(3){width:100px;}
.board-list[data-table-type="Q&A"] ul li:nth-child(4){width:120px;}
.board-list[data-table-type="Q&A"] ul li:nth-child(5){width:80px;}
.board-list[data-table-type="Q&A"] ul li:nth-child(6){width:100px;}
.board-list[data-table-type="Q&A"] ul li:nth-child(7){width:80px;}



.board-list[data-table-type="센터일정"] ul li:nth-child(1){width:50px;}
.board-list[data-table-type="센터일정"] ul li:nth-child(2){width:calc(100% - 450px);}
.board-list[data-table-type="센터일정"] ul li:nth-child(2) button{display:inline-block; width:100%; color:#000; text-align:left; line-height:1.25;}
.board-list[data-table-type="센터일정"] ul li:nth-child(3){width:150px;}
.board-list[data-table-type="센터일정"] ul li:nth-child(4){width:250px;}




@media(max-width:768px){
	.board-list[data-table-type="일반"] ul li:nth-child(2){width:calc(100% - 420px);}
	.board-list[data-table-type="일반"] ul li:nth-child(6),
	.board-list[data-table-type="일반"] ul li:nth-child(5){display:none;}
	
	.board-list[data-table-type="Q&A"] ul li:nth-child(2){width:calc(100% - 300px);}
	.board-list[data-table-type="Q&A"] ul li:nth-child(4),
	.board-list[data-table-type="Q&A"] ul li:nth-child(5),
	.board-list[data-table-type="Q&A"] ul li:nth-child(7){display:none;}
	
	.board-list[data-table-type="센터일정"] ul li:nth-child(1){display:none;}
	.board-list[data-table-type="센터일정"] ul li:nth-child(2){width:calc(100% - 350px);}
}

@media(max-width:640px){
	.board-list[data-table-type="일반"] ul li:nth-child(2){width:calc(100% - 220px);}
	.board-list[data-table-type="일반"] ul li:nth-child(3){display:none;}
	
	.board-list[data-table-type="Q&A"] ul li:nth-child(2){width:calc(100% - 200px);}
	.board-list[data-table-type="Q&A"] ul li:nth-child(1){display:none;}
	
	
	.board-list[data-table-type="센터일정"] ul li:nth-child(2){width:calc(100% - 150px);}
	.board-list[data-table-type="센터일정"] ul li:nth-child(3){display:none;}
	.board-list[data-table-type="센터일정"] ul li:nth-child(4){width:150px; font-size:13px;}
}

@media(max-width:480px){
	.board-list[data-table-type="일반"] ul li:nth-child(2){width:calc(100% - 120px);}
	.board-list[data-table-type="일반"] ul li:nth-child(1){display:none;}
	
	.board-list[data-table-type="Q&A"] ul li:nth-child(2){width:calc(100% - 100px);}
	.board-list[data-table-type="Q&A"] ul li:nth-child(3){display:none;}
}

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


/* 게시판 뷰(반응형) */
.board-view{border-top:2px solid #000; font-size:15px;}
.board-view strong{display:block; padding:20px 10px; text-align:center; font-size:23px; line-height:1.5; border-bottom:1px solid #ddd;}
.board-view dl{display:inline-block; width:100%; vertical-align:top; border-bottom:1px solid #ddd;}
.board-view dl dt,
.board-view dl dd{float:left; padding:0 10px; line-height:50px;}
.board-view dl dt{width:250px; text-align:center; background:#fafafa; font-weight:700;}
.board-view dl dt:nth-child(n + 2){border-left:1px solid #ddd;}
.board-view dl dt:nth-child(n + 1){border-right:1px solid #ddd;}
.board-view dl dd{width:calc(100% - 250px);}
.board-view dl dd a{}

.board-view dl:nth-last-child(-n + 2) dt{background:#eee;}

.board-view strong + dl dt,
.board-view strong + dl dd{width:25%;}

.board-view-contents{padding:25px; border-bottom:1px solid #ddd; line-height:1.5;}


@media(max-width:768px){
	.board-view{font-size:14px;}
	.board-view strong{font-size:19px;}
	.board-view strong + dl dt,
	.board-view strong + dl dd{padding:0 15px; width:auto; line-height:35px; font-size:12px;}

	.board-view dl dt{width:100px;}
	.board-view dl dd{width:calc(100% - 100px);}
}

@media(max-width:380px){
	.board-view strong + dl dt,
	.board-view strong + dl dd{padding:0 10px;}
	.board-view strong + dl dd{font-size:11px;}
	
	.board-view-contents{padding:25px 0;}
}

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


/* 게시판 리스트 비밀번호 팝업 */
.passwordPop{position:fixed; left:50%; top:50%; width:420px; margin:-100px 0 0 -210px; border:5px solid #3f4652; background:#fff; border-top:0; border-radius:5px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.35); z-index:99;}
.passwordPop label{display:block; padding:0 25px; background:#3f4652; color:#fff; line-height:60px; font-size:20px; font-weight:700;}
.passwordPop input[type="password"],
.passwordPop input[type="password"] + button{height:45px;}

.passwordPop input[type="password"]{padding:0 10px 0 35px; background:url(/startup/assets/img/common/icon_lock.png) no-repeat 10px center;}
.passwordPop input[type="password"] + button{width:85px; background:#5987d3; border-radius:3px; font-size:15px; color:#fff; font-weight:700;}

.passwordPop button.passwordClose{position:absolute; right:0; top:0; width:60px; height:60px; background:url(/startup/assets/img/common/icon_close.png) no-repeat center;}

@media(max-width:480px){
	.passwordPop{width:300px; margin:-100px 0 0 -150px;}
}



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


/* 폼 */
.form{border-top:2px solid #000;}
.form .field{position:relative; min-height:54px; line-height:34px; padding:10px 10px 10px 210px; border-bottom:1px solid #ddd; font-size:0;}
.form .field > label{position:absolute; width:200px; height:100%; line-height:54px; left:0; top:0; background:#f3f3f3; text-align:center; font-size:15px;}
.form .field > label em{position:relative; display:inline-block; line-height:1.35;}
.form .field > label.require em::after{display:inline-block; width:6px; height:6px; border-radius:6px; right:-10px; top:0; background:#f00021;}





/* 시설현황 및 신청 폼 */

.form[data-form="장비이용신청"] .field > span{display:inline-block; vertical-align:top; margin-left:10px; font-size:15px; letter-spacing:2px; font-weight:700;}








/* 회원가입 */
.form[data-form="회원가입"] .field > label{padding:0 15px; text-align:left;}
.form[data-form="회원가입"] .field button{height:34px; margin-left:5px; background:#757a85; color:#fff; border-radius:3px; font-size:15px;}


.form[data-form="회원가입"] .field[data-type="휴대전화번호"] select{width:80px;}
.form[data-form="회원가입"] .field[data-type="휴대전화번호"] input{width:calc(50% - 60px); max-width:100px;}
.form[data-form="회원가입"] .field[data-type="휴대전화번호"] span{display:inline-block; vertical-align:top; width:20px; text-align:center; font-size:15px;}


.form[data-form="회원가입"] .field[data-type="이메일주소"] select{width:135px; margin-left:5px;}
.form[data-form="회원가입"] .field[data-type="이메일주소"] input{width:calc(50% - 80px);}
.form[data-form="회원가입"] .field[data-type="이메일주소"] span{display:inline-block; vertical-align:top; width:20px; text-align:center; font-size:15px;}

@media(max-width:640px){
	.form[data-form="회원가입"] .field:not([data-type="아이디"]):not([data-type="주소"]):not([data-type="휴대전화번호"]):not([data-type="이메일주소"]) input{width:100%;}
	
	.form[data-form="회원가입"] .field[data-type="아이디"] input,
	.form[data-form="회원가입"] .field[data-type="아이디"] select{width:calc(100% - 90px);}
	
	
	.form[data-form="회원가입"] .field[data-type="휴대전화번호"] input{max-width:100%;}
	
	.form[data-form="회원가입"] .field[data-type="이메일주소"] input#emailId{width:calc(100% - 20px);}
	.form[data-form="회원가입"] .field[data-type="이메일주소"] input#emailDomain{width:calc(100% - 140px); margin-top:5px;}
	.form[data-form="회원가입"] .field[data-type="이메일주소"] select{margin-top:5px;}
}



/* 입주신청서 작성 */
.form[data-form="입주신청"] .field > label{padding:0 15px; text-align:left;}
.form[data-form="입주신청"] .field > p{display:inline-block; font-size:15px; line-height:1.35; vertical-align:middle;}

@media(max-width:640px){
	.form[data-form="입주신청"] .field input[type="text"]{width:100%;}
}



/* 아이디 및 비밀번호 찾기 */
.form[data-form="계정찾기"] .field > label{padding:0 15px; text-align:left;}
.form[data-form="계정찾기"] .field > p{display:inline-block; font-size:15px; line-height:1.35; vertical-align:middle;}

@media(max-width:640px){
	.form[data-form="계정찾기"] .field input[type="text"]{width:100%;}
}




/* 운영프로그램 */
.form[data-form="운영프로그램"] .field > label{padding:0 15px; text-align:left;}
.form[data-form="운영프로그램"] .field > p{display:inline-block; font-size:15px; line-height:1.35; vertical-align:middle;}

@media(max-width:640px){
	.form[data-form="운영프로그램"] .field input[type="text"]{width:100%;}
}

/* 어학시험 응시료지원 */
.form[data-form="어학시험응시료 지원"] .field > label{padding:0 15px; text-align:left;}
.form[data-form="어학시험응시료 지원"] .field > span{display:inline-block; line-height:34px; font-size:15px; width:20px; text-align:center;}
.form[data-form="어학시험응시료 지원"] .field a{font-size:15px;}
.form[data-form="어학시험응시료 지원"] .field a + button.fileTrash{width:34px; height:34px; background:url(/startup/assets/img/common/icon_trash.png) no-repeat center;}
.form[data-form="어학시험응시료 지원"] .field button:not(.fileTrash){height:34px; padding:0 20px; border-radius:3px; background:#3f4652; color:#fff; font-size:13px;}


.form[data-form="어학시험응시료 지원"] .field[data-type="휴대전화번호"] select{width:80px;}
.form[data-form="어학시험응시료 지원"] .field[data-type="휴대전화번호"] input{width:calc(50% - 60px); max-width:80px;}

.form[data-form="어학시험응시료 지원"] .field[data-type="이메일주소"] select{width:155px; margin-left:5px;}
.form[data-form="어학시험응시료 지원"] .field[data-type="이메일주소"] input{width:calc(50% - 90px);}

@media(max-width:640px){
	.form[data-form="어학시험응시료 지원"] .field[data-type="이메일주소"] select{width:100%; margin-top:5px; margin-left:0;}
	.form[data-form="어학시험응시료 지원"] .field[data-type="이메일주소"] input{width:calc(50% - 10px);}
}

.form[data-form="어학시험응시료 지원"] .field dl{}
.form[data-form="어학시험응시료 지원"] .field dl dt,
.form[data-form="어학시험응시료 지원"] .field dl dd{float:left; font-size:15px; color:#555;}

.form[data-form="어학시험응시료 지원"] .field dl dt{width:80px; padding:0 10px;}
.form[data-form="어학시험응시료 지원"] .field dl dd{width:calc(50% - 80px);}
.form[data-form="어학시험응시료 지원"] .field dl dd input{width:100%;}
.form[data-form="어학시험응시료 지원"] .field dl:nth-child(3){margin-top:5px;}
.form[data-form="어학시험응시료 지원"] .field dl:nth-child(3) dd{width:calc(100% - 80px);}

@media(max-width:640px){
	.form .field > label{width:100%;}
	.form .field > label em br{display:none;}
	.form[data-form="어학시험응시료 지원"] .field > label{padding:0;}
	
	.form[data-form="어학시험응시료 지원"] .field dl:nth-child(2) dt,
	.form[data-form="어학시험응시료 지원"] .field dl:nth-child(2) dd{margin-top:5px;}
	.form[data-form="어학시험응시료 지원"] .field dl dd{width:calc(100% - 80px);}
}




.form[data-form="장비이용신청"] .field:not(.clear) .input{width:calc(33.333333333% - 6px); margin-right:6px;}
.form[data-form="장비이용신청"] .field:not(.clear) .input input[type="checkbox"]{display:none;}
.form[data-form="장비이용신청"] .field:not(.clear) .input:nth-child(n + 5){margin-top:6px;}
.form[data-form="장비이용신청"] .field:not(.clear) .input:nth-child(4),
.form[data-form="장비이용신청"] .field:not(.clear) .input:nth-child(7),
.form[data-form="장비이용신청"] .field:not(.clear) .input:nth-child(10){margin-right:0;}

.form[data-form="장비이용신청"] .field:not(.clear) .input label{display:block; height:39px; line-height:37px; background:#eaeaea; border:1px solid #bbb; text-align:center;}
.form[data-form="장비이용신청"] .field:not(.clear) .input label span{margin-left:0; font-size:15px; color:#888;}
.form[data-form="장비이용신청"] .field:not(.clear) .input label span::before{display:none; margin-right:0;}

.form[data-form="장비이용신청"] .field:not(.clear) .input input:checked + label{background:#3fa8ac; border:1px solid #3fa8ac; color:#fff;}
.form[data-form="장비이용신청"] .field:not(.clear) .input input:checked + label span{color:#fff;}

.form[data-form="장비이용신청"] .field:not(.clear) .input input:disabled + label{opacity:0.35; cursor:not-allowed;}



@media(max-width:400px){
	.form[data-form="장비이용신청"] .field:not(.clear) .input label span{font-size:13px;}
}



.form .field input[type="password"]{min-width:214px; padding:0 10px 0 35px; background:url(/startup/assets/img/common/icon_lock.png) no-repeat 10px center;}

.form .field .func{position:absolute; left:450px; top:50%; margin-top:-10px;}
.form .field .func span.text{width:100px; }

.form .field .func button{
	width:23px; height:23px; margin-right:3px; background-repeat:no-repeat; background-position:center; border-radius:3px; background-color:#808080;
}


.form .field .func button:last-child{margin-right:0;}

.form .field .func button.fileAdd{background-image:url(/startup/assets/img/common/icon_add_white.png);}
.form .field .func button.fileRemove{background-image:url(/startup/assets/img/common/icon_remove_white.png);}
.form .field .func button.fileTrash{background-color:#fff; border:0; background-image:url(/startup/assets/img/common/icon_trash.png);}

@media(max-width:640px){
	.form{border-top:0;}
	.form .field{margin-bottom:10px; padding:15px; border:1px solid #ccc; border-radius:5px; overflow:hidden;}
	.form .field > label{position:relative; display:block; margin-bottom:10px; line-height:1; padding:0 !important; background:none; text-align:left;}
	
	.form .field .func{left:240px; margin-top:3px;}
}


.form .field .file{margin-top:10px; line-height:23px;}
.form .field .file span{padding-right:10px; font-size:12px; color:#555; line-height:23px;}
.form .field .file button{width:23px; height:23px; margin-right:3px; background-repeat:no-repeat; background-position:center; border-radius:3px; background-color:#808080;}
.form .field .file button.fileTrash{background-color:#fff; border:0; background-image:url(/startup/assets/img/common/icon_trash.png);}


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

/* 파일업로드 스타일 */
.file-wrap{}
.file-wrap label{position:relative; width:160px; height:34px; line-height:34px;  background:#f3f3f3; font-size:13px; cursor:pointer;}
.file-wrap label::before{display:inline-block; width:100%; padding:0 10px; left:0; top:0; content:attr(data-file-name); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-wrap label span{position:absolute; width:75px; height:inherit; right:-75px; top:0; background:#5987d3; color:#fff; text-align:center; font-weight:700;}
.file-wrap input[type="file"]{display:none;}



/* 체크박스, 라디오버튼 스타일 */
.input{display:inline-block; margin-right:10px; line-height:1; font-size:13px; vertical-align:middle;}
.input:last-child{margin-right:0;}

.input input[type="checkbox"],
.input input[type="radio"]{display:inline-block; width:0; height:0; opacity:0;}

.input input[type="checkbox"]:focus,
.input input[type="radio"]:focus{outline:1px solid #333;}

.input input[type="checkbox"] + label,
.input input[type="radio"] + label{display:inline-block; height:17px; line-height:15px; box-sizing:border-box; vertical-align:middle; cursor:pointer;}

.input input[type="checkbox"] + label span,
.input input[type="radio"] + label span{display:none; margin-left:5px; line-height:inherit; font-size:15px; color:#7f7f7f;}

.input input[type="checkbox"] + label span::before,
.input input[type="radio"] + label span::before{position:relative; display:block; float:left; width:17px; height:17px; border-radius:2px; border:1px solid #ddd; box-sizing:border-box; background:#fff;}

.input input[type="checkbox"]:checked  + label span::before,
.input input[type="radio"]:checked  + label span::before{background:url(/startup/assets/img/common/icon_chk.png) no-repeat center;}

.input  input[type="radio"] + label span::before{border-radius:17px;}


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






/* 게시글 댓글(리플) */
.board-reply{border-bottom:1px solid #ddd;}
.board-reply dl{padding:20px 15px; border-bottom:1px dashed #ccc;}
.board-reply dl:last-child{border-bottom:0; background:#f9f9f9;}
.board-reply dl dt{margin-bottom:15px;}
.board-reply dl dt em{}
.board-reply dl dt sub{font-size:12px; color:#999; letter-spacing:1px;}
.board-reply dl dd{font-size:14px; line-height:1.5; text-align:justify;}

.board-reply dl dd.init{font-size:0;}
.board-reply dl dd textarea,
.board-reply dl dd button{display:inline-block; height:100px; vertical-align:top;}

.board-reply dl dd textarea{width:calc(100% - 100px); padding:10px; border-right:0; resize: none;}
.board-reply dl dd button{width:100px; background:#1081ba; font-size:14px; font-weight:700; color:#fff;}

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


/* 갤러리형 게시판 */
.board-gallery{margin-top:15px; padding:35px 0; border-top:2px solid #000; border-bottom:1px solid #ddd;}
.board-gallery ul{}
.board-gallery ul li{float:left;}

.board-gallery ul li a{display:block;}
.board-gallery ul li a span.thumb{position:relative; display:block; height:171px; border-radius:10px; background-repeat:no-repeat; background-position:center; background-size:cover;}
.board-gallery ul li a span.thumb::before{display:inline-block; width:100%; height:100%; left:0; top:0; border-radius:10px; background:#f3f3f3 url(/startup/assets/img/common/logo.png) no-repeat center; background-size:150px; z-index:-1;}
.board-gallery ul li a em{margin:15px 0 10px 0; font-size:15px; line-height:1.5;}
.board-gallery ul li a sub{font-size:13px; color:#888;}

@media(min-width:768px){
	.board-gallery ul li{width:calc(33.3333333333% - 20px); margin-right:30px;}
	.board-gallery ul li:nth-child(3n + 3){margin-right:0;}
	.board-gallery ul li:nth-child(n + 4){margin-top:30px;}
}

@media(max-width:768px){
	.board-gallery ul li{width:calc(50% - 15px); margin-right:30px;}
	.board-gallery ul li:nth-child(2n + 2){margin-right:0;}
	.board-gallery ul li:nth-child(n + 3){margin-top:30px;}
	
	.board-gallery ul li a span.thumb{height:35vw;}
}

@media(max-width:480px){
	.board-gallery ul li{width:100%; margin-right:0;}
	.board-gallery ul li:nth-child(n + 2){margin-top:30px;}
	
	.board-gallery ul li a span.thumb{height:80vw;}
}

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



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

/* 달력 게시판 */

.calendar-head{position:relative; margin-bottom:25px;}


.calendar-head .func{position:absolute; height:41px; left:0; top:0; border:1px solid #bbb; border-radius:3px; background:#f5f5f5;}
.calendar-head .func a{position:relative; width:75px; font-size:15px; font-weight:700; color:#555; line-height:39px;}
.calendar-head .func a span{position:relative; z-index:1;}
.calendar-head .func a.active{color:#fff;}
.calendar-head .func a.active::before{display:inline-block; width:100%; height:100%; left:-1px; top:-1px; background:#5987d3; box-sizing:content-box; border:1px solid #5987d3; border-radius:3px;}


.calendar-head .date{position:relative; display:inline-block; height:41px; line-height:41px; padding:0 70px;}

.calendar-head .date button{position:absolute; top:0; width:50px; height:100%; background-repeat:no-repeat; background-position:center;}
.calendar-head .date button.prev{left:0; background-image:url(/startup/assets/img/common/icon_calendar_prev.png);}
.calendar-head .date button.next{right:0; background-image:url(/startup/assets/img/common/icon_calendar_next.png);}

.calendar-head .date em{display:inline-block; font-size:30px; letter-spacing:-1px;}


.calendar-head button.refresh{position:absolute; right:0; top:0; width:41px; height:41px; border-radius:41px; border:1px solid #bbb; background:url(/startup/assets/img/common/icon_refresh.png) no-repeat center;}

table.calendar{width:100%; table-layout:fixed; border-collapse:initial; border-top:2px solid #000;}

table.calendar th,
table.calendar td{border-right:1px solid #d7d7d7; padding:10px;}

table.calendar thead th{height:60px; border-bottom:1px solid #aaa; color:#5a606b; font-size:16px; font-weight:700; vertical-align:middle; text-align:left;}
table.calendar thead th:first-child{border-left:1px solid #d7d7d7; color:#f76771;}
table.calendar tbody td{height:125px; box-sizing:border-box; vertical-align:top; border-bottom:1px solid #d7d7d7; overflow:hidden;}
table.calendar tbody td:first-child{border-left:1px solid #d7d7d7;}

table.calendar tbody td a{display:block; width:100%; margin-top:5px; color:#555; font-size:12px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 


table.calendar tbody td:nth-child(1),
table.calendar tbody td:nth-child(7){color:#bbb;}


table.calendar tbody td.holiday{background:#fafafa;}
table.calendar tbody td.holiday em{color:#b2b2b2;}

@media(max-width:768px){
	.calendar-head .func{position:relative; width:152px; margin:10px auto 0 auto;}
	.calendar-head button.refresh{display:none;}
	
	table.calendar th,
	table.calendar td{padding:5px;}
	
	table.calendar thead th{height:50px; font-size:13px;}
	table.calendar tbody td{height:95px; font-size:12px;}
}

@media(max-width:640px){
	
	table.calendar thead th{height:45px; font-size:12px;}
	table.calendar tbody td{height:85px; font-size:11px;}
	table.calendar tbody td button{font-size:11px;}
}


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

/* 달력 게시판 팝업 */

#pop{position:fixed; left:50%; top:50%; width:640px; margin:-100px 0 0 -320px; border:3px solid #3f4652; background:#3f4652; border-top:0; border-radius:10px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.35); z-index:99;}
#pop strong{display:block; padding:20px 50px 20px 20px; color:#fff; line-height:1.25; font-size:20px; font-weight:700;}
#pop .el{background:#fff;}

#pop dl{display:inline-block; width:100%; vertical-align:top; margin-bottom:5px; font-size:15px; line-height:1.5;}
#pop dl:last-child{margin-bottom:0;}
#pop dl dt,
#pop dl dd{float:left;}

#pop dl dt{position:relative; width:50px; padding-left:10px; color:#232b39;}
#pop dl dt::before{display:inline-block; width:2px; height:2px; left:0; top:10px; background:#777;}
#pop dl dd{width:calc(100% - 50px); color:#777;}

#pop button.popClose{position:absolute; right:0; top:0; width:60px; height:60px; background:url(/startup/assets/img/common/icon_close.png) no-repeat center;}

@media(max-width:768px){
	#pop strong{font-size:17px;}
	#pop{width:calc(100% - 20px); left:10px; margin:-100px 0 0 0;}
}

@media(max-width:480px){
	#pop dl{font-size:13px;}
	#pop strong{font-size:15px;}
	#pop{width:calc(100% - 20px); left:10px; margin:-100px 0 0 0;}
	
	#pop dl dt::before{top:9px;}
}

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




/* 풋터 */
#footer{padding:50px 0; border-top:1px solid #ddd;}
#footer .inner{position:relative;}
#footer p{}
#footer p span,
#footer p a{margin-right:25px; font-size:14px; color:#a8acb3; line-height:1.5;}
#footer p br{display:none;}

#footer p span:last-child,
#footer p a:last-child{margin-right:0;}

#footer p.copyright{margin-top:10px; color:#a8acb3; font-size:14px;}


#footer .fnb{margin-top:50px;}
#footer .fnb ul{}
#footer .fnb ul li{margin-right:50px;}
#footer .fnb ul li:last-child{margin-right:0;}
#footer .fnb ul li a{font-size:14px; color:#a8acb3;}
#footer .fnb ul li a span{}

#footer #top,
#footer .family{position:absolute; top:0; height:55px; border-radius:8px;}

#footer #top{width:55px; right:0; background:#000 url(/startup/assets/img/common/icon_top.png) no-repeat center; z-index:10;}

#footer .family{right:65px;}
#footer .family button{position:relative; display:block; width:220px; height:inherit; padding:0 20px; text-align:left; border-radius:inherit; border:1px solid #ddd; background:#fff; font-size:18px; color:#232b39; z-index:3;}
#footer .family button::after{display:inline-block; width:55px; height:100%; right:0; top:0; background:url(/startup/assets/img/common/icon_family_arrow.png) no-repeat center; transform:rotate(180deg);}
#footer .family button.on::after{transform:rotate(0deg);}

#footer .family ul{display:none; position:absolute; width:100%; left:0; bottom:45px; padding-bottom:10px; border:1px solid #ddd; border-bottom:0; border-radius:8px; background:#fafafa; z-index:2;}
#footer .family ul li{}
#footer .family ul li a{display:block; padding:0 20px; border-bottom:1px solid #ddd; line-height:45px; font-size:15px;}
#footer .family ul li:last-child a{border-bottom:0;}


@media(max-width:1024px){
	#footer{padding:50px 0 100px 0; text-align:center;}
	
	#footer .family{top:auto; right:auto; bottom:-80px; left:50%; text-align:left; transform:translate(-50%, 0);}
	#footer #top{right:auto; top:-78px; left:50%; margin-left:-27.5px;}
}


@media(max-width:768px){
	#footer p span,
	#footer p a{display:block; margin:0; font-size:13px;}
	
	#footer p.copyright{font-size:13px;}
	
	#footer .family button{height:45px; font-size:15px;}
	#footer .family button::after{background-size:13px;}
	
	
	#footer .fnb ul li{margin-right:20px;}
	#footer .fnb ul li a{font-size:13px;}
	
}



@media(max-width:400px){
	#footer p.copyright{font-size:12px;}
	
	#footer p br{display:block;}
	
	#footer .fnb ul li{margin-right:15px;}
	#footer .fnb ul li a{font-size:12px;}
	
}





/* 파일첨부 */
.attachment{}
.attachment ul{counter-reset:counter;}
.attachment ul li{position:relative; padding-left:200px; border-bottom:1px solid #ddd; font-size:15px;}
.attachment ul li div{display:none;}
.attachment ul li::before{counter-increment:counter; display:inline-block; width:200px; height:100%; left:0; top:0; background:#fafafa; border-right:1px solid #ddd; font-weight:700; line-height:50px; content:'첨부파일 'counter(counter); text-align:center;}

.attachment ul li a{display:block; padding-left:30px; line-height:50px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:url(/startup/assets/img/common/icon_save.png) no-repeat 10px center;}
.attachment ul li a:hover{text-decoration:underline;}

@media(max-width:768px){
	.attachment ul li{padding-left:100px; font-size:13px;}
	.attachment ul li::before{width:100px;}
}



/* 게시판 페스워드 입력(팝업 아님) */

/* 게시판 리스트 비밀번호 팝업 */
.board-password{width:100%; margin-top:15px; border:5px solid #3f4652; background:#fff; border-top:0; border-radius:5px;}

.board-password p{padding:0 25px; background:#3f4652; color:#fff; line-height:60px; font-size:17px; font-weight:700;}

.board-password .el{padding:25px;}

.board-password input[type="password"]{height:45px;}

.board-password input[type="password"]{width:100%; padding:0 10px 0 35px; background:url(/startup/assets/img/common/icon_lock.png) no-repeat 10px center;}

.board-password button.passwordClose{position:absolute; right:0; top:0; width:60px; height:60px; background:url(/startup/assets/img/common/icon_close.png) no-repeat center;}

@media(max-width:640px){
	.board-password p{padding:0 15px; font-size:15px;}
	.board-password .el{padding:15px;}
}

@media(max-width:400px){
	.board-password p{padding:0 10px; font-size:13px;}
	.board-password .el{padding:15px 10px;}
}





/* 준비중 페이지 */

/* 에러 및 점검 페이지 */
.underconstruction{text-align:center;}
.underconstruction .gear{position:relative; width:225px; height:200px; margin:0 auto;}
.underconstruction .gear .gear-l,
.underconstruction .gear .gear-m,
.underconstruction .gear .gear-s,
.underconstruction .gear .cone{position:absolute; background-repeat:no-repeat; background-position:center;}


.underconstruction .gear .gear-l{width:142px; height:142px; left:0; bottom:20px; background-image:url(/startup/assets/img/common/icon_gear_large.png); animation: barrelRoll 5s linear infinite;}
.underconstruction .gear .gear-m{width:92px; height:92px; right:0; bottom:0; background-image:url(/startup/assets/img/common/icon_gear_middle.png); animation: revertBarrelRoll 5s linear infinite;}
.underconstruction .gear .gear-s{width:32px; height:32px; right:0; top:0; background-image:url(/startup/assets/img/common/icon_gear_small.png); animation: revertBarrelRoll 2.5s linear infinite;}
.underconstruction .gear .cone{width:57px; height:72px; left:50%; bottom:0; margin-left:-28.5px; background-image:url(/startup/assets/img/common/icon_cone.png);}


.underconstruction p{margin:50px 0 15px 0; font-size:31px; font-weight:100; letter-spacing:-2.5px; line-height:1.35;}
.underconstruction p em{}
.underconstruction > span{display:block; margin-bottom:50px; font-size:17px; letter-spacing:-1px; line-height:1.5;}


.underconstruction a{display: inline-block; width:220px; height:62px; border: 1px solid #d4d4d4; border-radius:4px; line-height: 60px;}
.underconstruction sub{display:block; height:50px; margin-top:110px; color: #b0b2b8; font-size:13px; letter-spacing:-0.5px;}



@media(min-width:640px){
	.underconstruction br{display:none;}
}



.no-data{position:relative; width:100%; padding-top:80px; margin:0 auto; background:url(/startup/assets/img/main/no_data.png) no-repeat center top; text-align:center;}


.no-data p{margin-top:25px; font-size:23px; font-weight:100; letter-spacing:-2.5px;}

.no-data.gallery{margin-top:100px;}
.no-data.gallery p{color:#fff;}

@media(max-width:580px){
	.no-data.gallery{margin:35px 0;}
}





@-webkit-keyframes barrelRoll {
	0% {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(1turn)
	}
}

@-webkit-keyframes revertBarrelRoll {
	0% {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(-1turn)
	}
}




/* GNB 에니메이션 */
.splitting .word,
.splitting .char {
  display: inline-block;
}

.splitting .char {
  position: relative;
}

.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}


.splitting {
  --word-center: calc((var(--word-total) - 1) / 2);
  --char-center: calc((var(--char-total) - 1) / 2);
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  --word-percent: calc(var(--word-index) / var(--word-total));
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  --char-percent: calc(var(--char-index) / var(--char-total));
  --char-offset: calc(var(--char-index) - var(--char-center));
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );

  --distance-sine: calc(var(--char-offset) / var(--char-center));
  --distance-percent: calc((var(--distance) / var(--char-center)));
}

.gnb a{position:relative;}
.gnb a .char {
	 overflow: hidden;
	 color: transparent;
}
 .gnb a .char:before, .gnb a .char:after {
	 display: inline-block;
	 visibility: visible;
	 font-size:20px; font-weight:700;
	 color: #000;
	 transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
	 transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}
 .gnb a .char:before {
	 display: inline-block;
	 color: #5987d3;
	 transition-delay: calc(0.02s * ( var(--char-index)));
}
 .gnb > ul > li:hover a .char:before {
	 transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}
.gnb > ul > li:hover a .char:after {
	 transition-delay: calc(0.02s * ( var(--char-index)));
}
 .gnb a .char:before {
	 transform: translateX(110%);
}
.gnb > ul > li:hover a .char:before {
	 transform: translateX(0%);
}
.gnb > ul > li:hover a .char:after {
	 transform: translateX(-110%);
}
 




/* reveal 이팩트 */

.reveal{position:relative; overflow:hidden;}
.reveal::after {display:inline-block; left:0; top:0; width:100%; height:100%; background:#f0f2f6; transform:translateX(-100%); animation:revealIn 0.6s 0s, revealOut 0.6s 0.6s; animation-fill-mode:both;}


@keyframes revealIn {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes revealOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}