@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2020.04.06 | 김소화 | 최초 등록
 * 2020.04.09 | 김소화 | 요구반영. 결함개선. 고도화.
 * </pre>
 * @author 디자인팀 김소화
 * @since 2020.04.02
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */


/* html,
body,
#container, #wrap, #body,
.container{
	height:100%;
} */

/* 배치.메인 20200407 */

#head_s1{border-bottom:1px solid #ddd;}

#head_3s{display:none}

#wrap{}
	#wrap>.container{
		width:auto; /* ☆ */
		max-width:none;
		margin:auto;
	}
	#body{
		/* z-index:0; ☆ z ( #go1mainbody > #foot ) */
		position:relative;
		margin:auto;
		padding:0;
		line-height:1.375;
		background: url(../../img/main/main_bg1.gif) no-repeat 50% 115px;
	}
		/* #body>.container{} 없음. mainbody 있으므로 */
			[id^='mainbody']{
				position:relative;
				background:url() no-repeat center top;
				background-size:cover;
			}
			[id^='mainbody']>.container{padding:30px 0}

					/* [class*='mainwrap']{} */

#wing{}


/* ◇◆ 공통 조정 ◇◆ */
/* none  */


/* ☆감춤 20200407 */
/* none ★☆ToEdit) 나중에 작업할거 ☆  */


/* ☆공용 20200407 */
/* none */
.init img{max-width:100%;} /* ☆ */

.h1{font-weight:normal;}
[id^='mainbody'] .hg1 .h1{letter-spacing:0;font-family: 'SANJUGotgam'; }
[id^='mainbody'] .hg1 .t1{letter-spacing:-1px;}

#mainbody1 .hg1{text-align:center;margin-bottom:30px;}
#mainbody1 .hg1 .h1{color:#333;font-size:30px;font-weight:400;}
/* #mainbody1 .hg1 .h1 span{color:#20ace4} */
#mainbody1 .hg1 .t1{font-size:42px;color:#e93658;font-family: 'SANJUGotgam'; }
#mainbody1 .hg1 .t1 span{color:#20ace4;font-family: 'SANJUGotgam'; }

@media all and (max-width:839px){
	#body{background:none;}	
	#mainbody1 .hg1{margin-bottom:30px;}
}
@media all and (max-width:767px){
	#mainbody1 .hg1 .h1{font-size:20px}
	#mainbody1 .hg1 .t1{font-size:30px;}
}

#pr1{position:relative;float:left;width:530px;}
#pr1 .datalist{font-size:0;border-radius:20px;overflow:hidden;}
#pr1 .menu{margin-top:20px;text-align:center;}
#pr1 .menu *{display:inline-block;vertical-align:middle;}
#pr1 .menu button{border:0;background:transparent;font-size:0;}
#pr1 .mNum button{width:10px;height:10px;background:#000;border-radius:100%;margin:0 5px}
#pr1 .mNum li.slick-active button{width:30px;height:30px;border:8px solid #eee}
#pr1 .mControl1 .m{position:absolute;top:50%;
	border:0;padding:0;margin:-30px 0 0;
	background:#fff;
	border-radius:100%;
	box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.3);
	width:60px;height:60px;
}
#pr1 .mControl1 .m:before{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	margin:-15px;
	width:30px;height:30px;
	background:url(../../img/main/main_sprite.png) no-repeat 0 0 / 500px 500px
}
#pr1 .mControl1 .prev{left:-30px}
#pr1 .mControl1 .next{right:-30px}
#pr1 .mControl1 .m.next:before{background-position:-30px 0}
#pr1 .mControl2 .m{position:relative;width:30px;height:30px;}
#pr1 .mControl2 .m:before{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	width:20px;height:20px;
	margin:-10px;
	background:url(../../img/main/main_sprite.png) no-repeat 0 0 / 500px 500px
}
#pr1 .mControl2 .stop:before{background-position:-60px 0}
#pr1 .mControl2 .play:before{background-position:-80px 0}
@media all and (max-width:999px){
	#pr1{width:400px}
	#pr1 .mControl1{display:none !important}
}
@media all and (max-width:839px){
	#pr1{float:none;width:auto;max-width:530px;margin:0 auto}
}


#bbs1{float:right;position:relative;
	width:750px;height:425px;
	border-radius:20px;
	padding:30px;
	border:1px solid #ddd;	
	box-sizing:border-box;
	margin-bottom:30px;
	background:#fff;
}
#bbs1:before{content:'';
	position:absolute;left:50%;top:-141px;
	width:359px;height:188px;
	background:url(../../img/main/pink_character1.png)
}
#bbs1 .h1{
	font-family: 'SANJUGotgam';
	color:#000;
	font-size:30px;
	border-bottom:1px solid #000;
	padding:0 0 10px;
	margin:0 0 10px;
}
#bbs1 li a{display:block;
	position:relative;
	padding:25px 0;
	border-top:1px solid #ddd;
}
#bbs1 li a .date{display:none;
	position:absolute;left:0;top:50%;
	transform:translateY(-50%);
	font-size:14px;color:#4f70bf;
	text-align:center;
	padding:45px 0 0;
}
#bbs1 li a .date em{position:absolute;left:0;top:0;font-size:40px;color:#4f70bf;font-weight:800}
#bbs1 li a .t1{
	color:#000;
	font-size:18px;
	font-weight:500;
	margin-bottom:5px;
	white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
#bbs1 li a .t2{color:#777;
	white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
#bbs1 li:first-child a{border-top:0}
#bbs1 li:nth-child(4){display:none}
#bbs1 a.more{position:absolute;right:30px;top:35px;
	color:#777;
}
#bbs1 a.more:after{content:'';
	display:inline-block;
	width:20px;height:20px;
	background:url(../../img/main/main_sprite.png) no-repeat -140px 0 / 500px 500px;
	opacity:0.5;
	vertical-align:middle;
	margin:0 0 0 5px;
}
@media all and (max-width:1359px){
	#bbs1{width:calc(100% - 590px);margin-left:60px}
}
@media all and (max-width:1259px){
	#bbs1{height:540px;margin-bottom:70px;}
	#bbs1 li:nth-child(4){display:block}
}
@media all and (max-width:999px){
	#bbs1{width:calc(100% - 430px);height:410px;margin:0 0 40px 30px}
	#bbs1 li:nth-child(4){display:none}
	#bbs1:before{width:180px;height:94px;background-size:contain;
		left:auto;right:0;top:-71px
	}
}
@media all and (max-width:839px){
	#bbs1{float:none;width:100%;height:auto;margin:50px 0 30px;}
}
@media all and (max-width:479px){
	#bbs1 li a{padding:25px 0}
	#bbs1 li a .date{position:static;padding:0;text-align:left;}
	#bbs1 li a .date em{position:static;font-size:14px;font-weight:400}
	#bbs1 li a .date em:before{content:'.';}
}

#menu1{float:right;width:750px;overflow:hidden;}
#menu1 li{float:left;width:25%;}
#menu1 li a{display:block;
	position:relative;
	height:80px;
	box-sizing:border-box;
	padding:30px 0 0 85px;
	font-size:17px;
	color:#000;
	font-weight:500;
}
#menu1 li a .ic1{display:block;
	position:absolute;left:0;top:0;
	width:80px;height:80px;
	background:#eceff6;
	border-radius:100%;
	transition:.2s ease-out
}
#menu1 li a .ic1:before{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	width:35px;height:35px;
	margin:-17.5px;
	background:url(../../img/main/main_sprite.png) no-repeat 0 0 / 500px 500px;
}
#menu1 li:nth-child(1) a .ic1:before{background-position:0 -30px}
#menu1 li:nth-child(2) a .ic1:before{background-position:-35px -30px}
#menu1 li:nth-child(3) a .ic1:before{background-position:-70px -30px}
#menu1 li:nth-child(4) a .ic1:before{background-position:-105px -30px}
#menu1 li a:hover .ic1{background:#918dfb}
@media all and (max-width:1359px){
	#menu1{width:calc(100% - 590px);margin-left:60px}
}
@media all and (max-width:1259px){
	#menu1{clear:both;float:none;width:100%;margin:0}
	#menu1 li a{color:#fff;}
}
@media all and (max-width:999px){
	#menu1 li a{color:#000;}
}
@media all and (max-width:767px){
	#menu1 li a{padding:0;height:auto;text-align:center;}
	#menu1 li a .ic1{position:relative;left:auto;top:auto;
		margin:0 auto 10px;
		width:70px;height:70px;
	}
}

#mainbody2 .hg1{text-align:center;margin-bottom:20px}
#mainbody2 .hg1 .h1{color:#fff;font-size:40px}
#mainbody2 .hg1 .t1{font-size:17px;color:#fff}
@media all and (max-width:1259px){
	#mainbody2 .hg1{margin-top:-50px;}
}
@media all and (max-width:999px){
	#mainbody2 .hg1{margin-top:0;}
}
@media all and (max-width:999px){
	#mainbody2{background:#4767b4}
}
@media all and (max-width:767px){
	#mainbody2 .hg1 .h1{font-size:32px;}
	#mainbody2 .hg1 .t1{font-size:16px;}
}


#program1{
	width:100%;
	min-height:620px;
	background:#eceff6;
	border-radius:20px;
	padding:20px;
	overflow:hidden;
	box-sizing:border-box;
}
#program1 .w1{position:relative;
	background:#fff;
	height:100%;
	padding:30px;
	box-sizing:border-box;
}
#program1 .w1 .h1{color:#000;
	font-family: 'SANJUGotgam';
	font-size:30px;
	margin-bottom:20px;
}

#program1 #calendar1{float:left;
	border-radius:20px 0 0 20px;
	width:620px;
}
#program1 #calendar1 .month .h1{display:inline-block;vertical-align:top}
#program1 #calendar1 .month  .mControl{display:inline-block;vertical-align:top;margin: 3px 0 0 10px;}
#program1 #calendar1 .month  .mControl .m{
	position:relative;
	width:32px;height:32px;
	background:#000;
	border-radius:100%;
	border:0;
}
#program1 #calendar1 .month  .mControl .m:before{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	width:20px;height:20px;
	margin:-10px;
	background:url(../../img/main/main_sprite.png) no-repeat 0 0 / 500px 500px;
}
#program1 #calendar1 .month  .mControl .m.prev:before{background-position:-100px 0}
#program1 #calendar1 .month  .mControl .m.next:before{background-position:-120px 0}
#program1 #calendar1 .b1{display:inline-block;
	font-size:12px;
	padding:4px 5px;
	border-radius:20px;
	line-height:100%;
	margin:2px;
	color:#fff;
	white-space:nowrap;
}
#program1 #calendar1 .category{position:absolute;right:30px;top:35px;}
#program1 #calendar1 .category .b1{padding:5px;font-size:13px;}
#program1 #calendar1 .b1[data-event='센터행사']{background-color:#2193ca;}
#program1 #calendar1 .b1[data-event='일반대관']{background-color:#1d907a;}
#program1 #calendar1 .b1[data-event='동아리대관']{background-color:#ec008c;}
#program1 #calendar1 .b1[data-event='휴관']{background-color:#f6332a;}
#program1 #calendar1 table{
	border-collapse:collapse;border-spacing:0;
	width:100%;
	border:0;
}
#program1 #calendar1 table th,
#program1 #calendar1 table td{width:14.286%;border:0;padding:0;text-align:center}
#program1 #calendar1 table thead th{background:#14266e;color:#fff;
	padding:10px 0;
	font-size:15px;
	font-weight:500;
	letter-spacing:0;
}
#program1 #calendar1 table thead th:first-child{border-radius:20px 0 0 20px}
#program1 #calendar1 table thead th:last-child{border-radius:0 20px 20px 0}
#program1 #calendar1 table tbody td{color:#000;border-bottom: 1px solid #eee;vertical-align: top;}
#program1 #calendar1 table tbody td .cell{padding:5px;height:73px;}
#program1 #calendar1 table tbody td .date{font-weight:600;}
#program1 #calendar1 table .sun{color:#f04b42 !important}
#program1 #calendar1 table .sat{color:#589bff !important;}

#program1 #list1{float:right;
	border-radius:0 20px 20px 0;
	width:calc(100% - 640px);
	height:100%;
	margin-left:20px;
}
#program1 #list1 .scroll{height:460px;overflow:hidden;overflow-y:auto;}
#program1 #list1 .program1list1 .wrap1{position:relative;margin-right:15px;padding:20px 100px 20px 0;border-bottom:1px dashed #ddd}
#program1 #list1 .program1list1 li:first-child .wrap1{padding-top:0}
#program1 #list1 .program1list1 .wrap1 .cate{display:inline-block;
	font-size:14px;
	color:#fff;
	background:#4378e2;
	padding:4px 10px;
	border-radius:20px;
	margin-bottom:15px
}
#program1 #list1 .program1list1 li:nth-child(even) .wrap1 .cate{background:#00a859}
#program1 #list1 .program1list1 .wrap1 .t1{color:#000;font-size:20px;font-weight:500}
#program1 #list1 .program1list1 .wrap1 .t2{color:#777;margin:3px 0 0}
#program1 #list1 .program1list1 .wrap1 .a1{display:block;
	position:absolute;right:0;top:50%;
	transform:translateY(-40%);
	background:#000;
	text-align:center;
	color:#fff;
	width:90px;height:90px;
	border-radius:100%;
	box-sizing:border-box;
}
#program1 #list1 .program1list1 .wrap1 .a1[data-reserve="예약하기"]{line-height:90px;}
#program1 #list1 .program1list1 .wrap1 .a1[data-reserve="홍보중"]{line-height:90px;}
#program1 #list1 .program1list1 .wrap1 .a1[data-reserve="대기자접수중"]{padding:23px 0 0;}
#program1 #list1 .program1list1 .wrap1 .a1[data-reserve="정원마감"]{line-height:90px;background:#aaa}
@media all and (max-width:999px){
	#program1{height:auto;}
	#program1 #calendar1{float:none;width:100%;border-radius:20px}
	#program1 #list1{float:none;width:100%;margin:20px 0  0;border-radius:20px}
	#program1 #list1 .scroll{max-height:460px;height:auto}
}
@media all and (max-width:767px){
	#program1{padding:0;background:none;}
}
@media all and (max-width:639px){
	#program1 #calendar1{padding:30px 15px}
	#program1 #calendar1 .month{text-align:center;}
	#program1 #calendar1 .category{position:static;text-align:center;margin:0 0 10px;}
	#program1 #calendar1 table .b1{overflow:hidden;white-space:normal;margin:0;font-size:11px;border-radius:5px;}
	#program1 #calendar1 table .b1 i{display:none}
	#program1 #calendar1 table thead th{font-size:14px;}
	#program1 #calendar1 table tbody td .cell{padding:5px 0;height:auto}


	#program1 #list1{padding:30px 15px}
}
@media all and (max-width:479px){
	#program1 .w1 .h1{margin:0 0 10px;font-size:24px}

	#program1 #calendar1 .month .h1{font-size:24px;}
	#program1 #calendar1 .category .b1{line-height:100%}
	#program1 #calendar1 .b1{padding: 4px 1px;max-height: 12px;line-height: 135%;}
	#program1 #calendar1 table .b1[data-event='동아리대관']{padding:4px 7px;max-width:31px;}

	#program1 #list1 .program1list1 .wrap1{padding:20px 0;margin:0}
	#program1 #list1 .program1list1 .wrap1 .a1{display:block;
		width:100% !important;height:auto;
		position:static;
		border-radius:20px;
		padding:10px 0 !important;
		line-height:100% !important;
		transform:none;
		margin:10px 0 0
	}
	#program1 #list1 .program1list1 .wrap1 .a1 br{display:none}
	#program1 #list1 .program1list1 .wrap1 .t1{font-size:18px;}
	#program1 #list1 .program1list1 .wrap1 .t2{font-size:15px;}
}

#mainbody3{background:url(../../img/main/mainbody3_bg1.png) no-repeat 50% 100%}


#menu2{position:relative;
	border-radius:20px;
	padding:40px 30px 40px 430px;
	margin-bottom:50px;
	background: linear-gradient(135deg, rgba(125,161,221,1) 0%, rgba(125,161,221,1) 1%, rgba(82,96,185,1) 51%, rgba(133,66,206,1) 100%);
}
#menu2:before{content:'';
	display:block;
	position:absolute;left:-66px;bottom:-26px;
	width:486px;height:284px;
	background:url(../../img/main/menu2_bg1.png) no-repeat
}
#menu2:after{content:'';clear:both;display:table;}
#menu2 .hg1{float:left;width:200px;}
#menu2 .hg1 .h1{color:#fff;font-size:26px;}
#menu2 .hg1 .t1{color:#fff;font-size:17px;}
#menu2 ul{float:left;width:calc(100% - 200px);overflow:hidden;}
#menu2 ul li{float:left;width:33.333%;}
#menu2 ul li a{display:block;
	position:relative;
	height:100px;
	box-sizing:border-box;
}
#menu2 ul li a .t1{
	position:absolute;left:105px;top:50%;
	transform:translateY(-50%);
	font-size:17px;
	color:#fff;
	font-weight:500;
}
#menu2 ul li a .ic1{display:block;position:relative;
	width:100px;height:100px;
	background:rgba(0,0,0,0.25);
	border-radius:100%;
	transition:.2s ease-out;
}
#menu2 ul li a .ic1:before{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	width:70px;height:70px;
	margin:-35px;
	background:url(../../img/main/main_sprite.png) no-repeat 0 0 / 500px 500px;
}
#menu2 ul li:nth-child(1) a .ic1:before{background-position:0 -65px}
#menu2 ul li:nth-child(2) a .ic1:before{background-position:-70px -65px}
#menu2 ul li:nth-child(3) a .ic1:before{background-position:-140px -65px}
#menu2 ul li a:hover .ic1{background:rgba(0,0,0,0.5);}
@media all and (max-width:1259px){
	#menu2{padding:40px}
	#menu2:before{display:none;}
	#menu2 .hg1{width:250px}
	#menu2 ul{width:calc(100% - 250px)}
}
@media all and (max-width:899px){
	#menu2 .hg1{float:none;width:auto;text-align:center;margin:0 0 20px}
	#menu2 br{display:none;}
	#menu2 ul{width:100%}
}
@media all and (max-width:639px){
	#menu2 ul li a{height:auto;text-align:center}
	#menu2 ul li a .ic1{display:block;width:70px;height:70px;margin:0 auto 10px;}
	#menu2 ul li a .ic1:before{width:35px;height:35px;margin:-17.5px;background-size:250px 250px;}
	#menu2 ul li:nth-child(1) a .ic1:before{background-position:0 -32px}
	#menu2 ul li:nth-child(2) a .ic1:before{background-position:-35px -32px}
	#menu2 ul li:nth-child(3) a .ic1:before{background-position:-70px -32px}
	#menu2 ul li a .t1{position:static;transform:none;}
}


#facility1{position:relative;padding-left:550px;}
#facility1:before{content:'';
	z-index:100;
	position:absolute;right:-180px;bottom:-55px;
	width:153px;height:244px;
	background:url(../../img/main/blue_character1.png) no-repeat 0 0;
}
#facility1 .hg1{position:absolute;left:0;top:65px;}
#facility1 .hg1 .h1{color:#000;font-size:40px;}
#facility1 .hg1 .t1{color:#000;font-size:17px;}
#facility1 .menu{position:absolute;left:0;top:220px;}
#facility1 .mNum ul{overflow:hidden;margin:0 -5px 20px;}
#facility1 .mNum li{float:left;width:calc(33.333% - 10px);margin:5px;}
#facility1 .mNum li button{
	width:100%;
	text-align:center;
	border:0;
	background:#f7f7f7;
	border-radius:30px;
	color:#555
}
#facility1 .mNum li.slick-active button{
	background:#4767b4;
	color:#fff;
}
#facility1 .menu .m{position:relative;
	border:0;
	width:54px;height:54px;
	background:#000;
	border-radius:100%;
}
#facility1 .menu .m:before{content:'';
	display:block;
	position:absolute;
	left:50%;top:50%;
	width:40px;height:40px;
	margin:-20px;
	background:url(../../img/main/main_sprite.png) no-repeat 0 0;
}`
#facility1 .menu .m.prev:before{background-position:-200px 0}
#facility1 .menu .m.next:before{background-position:-240px 0}
#facility1 .menu .pro-bar{display:inline-block;
	position:relative;
	margin:10px 10px 0;
	width:230px;height:3px;
	background:#eee;
}
#facility1 .menu .pro-bar.pro-ani:before{content:'';
	position:absolute;left:0;top:0;
	height:3px;
	background:#000;
	animation: proBar 5s 1;
}
@keyframes proBar{
	0%{width:0;}
    100%{width:100%;}
}
#facility1 .datalist .item a{display:block;background:#eee;height:460px;border-radius:20px;overflow:hidden;}
#facility1 .datalist .item a img{display:block;width:auto;height:100%}
@media all and (max-width:1135px){
	#facility1 .datalist{border-radius:20px;font-size:0}
	#facility1 .datalist .item a{height:auto;}
	#facility1 .datalist .item a img{display:block;width:100%;height:auto}
	#facility1 .hg1{top:0;}
	#facility1 .menu{top:120px;}
}
@media all and (max-width:999px){
	#facility1{padding:0;}
	#facility1 .hg1{position:static;text-align:center;}
	#facility1 .menu{position:static;text-align:center;margin:20px 0;}
	#facility1 .menu .pro-bar{display:none}
	#facility1 .menu .m{display:none}
}
@media all and (max-width:767px){
	#facility1 .hg1 .h1{font-size:32px;}
	#facility1 .hg1 .t1{font-size:16px;}
}