@charset "utf-8";
@import url("./layout.css"); 

/*///////////////////////////////////////////////////////기본레이아웃 구조///////////////////////////////////////////////////////*/
body {letter-spacing:-0.5px;}

/*1단계*/
#wrap {
	background-color:#cfebf8;
	background-image:url(../images/skin06/wrap_bg.png);
	background-position:center 22px;
	background-repeat:no-repeat;
}

/*2단계*/
#container {
	background-image:url(../images/skin06/container_bg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
}

/*3단계*/
#contents_group {
	margin-top:28px;
	padding-bottom:70px;
}

/*4단계(컨텐츠 영역)*/


/*5단계(main or sub 탑.tpl컨텐츠 영역)*/
#contents_box {
	overflow:hidden;
	top:67px;
	min-height:300px;
	margin-bottom:35px;
}

/* 카피라이트 */
#footer {
	background-color:#00a0e9;
	background-image:url(../images/skin06/footer_bg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	padding:35px 0px;
}
#footer .f_util li {padding:0 19px;}
#footer .f_util li a {font-size:14px; color:#fff;}
#footer .f_util li a:hover {color:#cfebf8;}
#footer .address {font-size:13px; color:#fff; padding-top:10px; letter-spacing:0.5px;}

.contents_box_sub {background:#fff; padding:10px 30px 120px;  border:1px #d7d7d7 solid; border-radius:5px;}

/*///////////////////////////////////////////////////////기본레이아웃 구조///////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////헤더///////////////////////////////////////////////////////////////////*/
#header{
	height:132px; 
	background-color:#0097f4;
	background-image:url(../images/skin06/header_bg.png);
	background-position:left bottom;
	background-repeat:repeat-x;
}

/*로고*/
#header h1 {float:left; width:40%; font-size:26px; line-height:26px; padding:45px 0 55px 85px; background:url(../images/skin06/header_dot.png) left 25px no-repeat;}
#header h1 a {display:inline-block; color:#fff; max-width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:26px;}


/*검색*/
#header .top_search {position:absolute; left:343px; top:41px; width:315px; height:45px; background:#fff; border-radius:50px;}
#header .top_search li {float:left;}
#header .top_search li.search_text {margin:5px 0 0 27px;}
#header .top_search li.search_text input {width:234px; border:0px; height:33px; line-height:33px;}
#header .top_search li.btn {position:absolute; right:0px; top:0px; width:53px; height:45px; border-radius:0 50px 50px 0; border-left:1px #0097f4 solid;
	background-color:#0097f4; 
	background-image:url(../images/common/black_opacity50.png);
}

#header .top_search li.btn input {border:0px; width:53px; height:45px; background:url(../images/skin06/top_search_btn.png) 11px 10px no-repeat;}


/*상단로그인*/
.top_util {float:right; margin:22px 18px 0 0;}
.top_util li {float:left; font-size:13px;}
.top_util li a {display:block; text-align:center; color:#0097f4; width:79px; height:79px; background:url(../images/skin06/top_util_bg.png) no-repeat;}
.top_util li a:hover,
.top_util li a:hover i.fa {color:#004b7a !important;}
.top_util li i.fa {display:block; font-size:28px; padding-top:17px; color:#0097f4;}
/*///////////////////////////////////////////////////////헤더///////////////////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////레프트 영역///////////////////////////////////////////////////////////////////*/
/*메뉴*/
#cafe_menu {
	padding-top:117px; 
	background-color:#0097f4; 
	background-image:url(../images/skin06/nav_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
}
#cafe_menu #nav {background-color:#0097f4;}
#cafe_menu #nav li {background:url(../images/common/white_opacity70.png) left bottom repeat-x; font-size:16px;}
#cafe_menu #nav li a {display:block; color:#fff; padding:12px 0 14px 40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#cafe_menu #nav li a:hover {background:url(../images/skin06/nav_over.png) no-repeat;}
#cafe_menu #nav li:last-child {background:url(../images/skin06/nav_bottom_bg.png) left bottom repeat-x;}

.school_class {background:#fff url(../images/skin06/school_class_bg.png) left bottom no-repeat; padding:15px 9px 53px;}


/*학교가기*/
#cafe_menu .my_school {position:relative; margin-top:10px; height:64px; background-color:#fbcb4d; border-radius:15px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);}
#cafe_menu .my_school:hover .opacity{display:none;}
#cafe_menu .my_school:hover {background:#ffb900;}
#cafe_menu .my_school:hover dl dd {background:#ef8901;}
#cafe_menu .my_school .opacity{position:absolute; width:100%; height:64px; z-index:0; border-radius:15px;}
#cafe_menu .my_school dl {position:relative; z-index:3; padding:10px 0px 11px 65px; color:#fff; background:url(../images/skin10/my_school_bg.png) 20px 14px no-repeat;}
#cafe_menu .my_school dl dt { font-size:14px; font-weight:bold; text-shadow:0 0 3px rgba(0,0,0,0.6);}
#cafe_menu .my_school dl dd {font-size:11px; margin-top:4px; background:#fa9f26; width:85px; height:20px; line-height:20px; text-align:center; border-radius:20px;}
/*#cafe_menu .my_school {position:relative;}
#cafe_menu .my_school a:hover .opacity {display:none;}
#cafe_menu .my_school .opacity {position:absolute; width:160px; height:50px; z-index:3; border-radius:60px; background:url(../images/common/white_opacity30.png) repeat;}
#cafe_menu .my_school dl {position:relative; z-index:0; width:160px; height:50px; color:#fff; background-color:#0097f4; border-radius:60px;}
#cafe_menu .my_school dl dt {font-size:16px; background:url(../images/skin06/my_school_dot.png) 11px 13px no-repeat; padding:14px 0 7px 40px;}
#cafe_menu .my_school dl dd {display:none;}
#cafe_menu .my_school dl dd span {display:none;}*/


/*학급가기*/
#cafe_menu .other_class {position:relative; margin-top:10px;}
#cafe_menu .other_class .opacity {display:none;}
#cafe_menu .other_class dl {position:relative; z-index:3; width:160px; height:37px; color:#fff; padding:13px 0 0 0; background:#0097f4 url(../images/common/white_opacity30.png) repeat; border-radius:60px;}
#cafe_menu .other_class dl dt {display:none;}
#cafe_menu .other_class dl dd {position:relative;}
#cafe_menu .other_class dl dd .search {display:block; margin:0 44px 0 19px; overflow:hidden;}
#cafe_menu .other_class dl dd .search select {font-family:"맑은 고딕",Malgun Gothic, Nanum Gothic,"나눔 고딕"; width:100%; height:24px; line-height:24px; border:0; color:#0097f4; font-size:13px; background:#fff; padding-left:10px;}
#cafe_menu .other_class dl dd .search p {width:100%;}
#cafe_menu .other_class dl dd .btn {position:absolute; top:0; right:11px;}
#cafe_menu .other_class dl dd .btn input {
	width:100%; border:0px; color:#fff; font-size:14px; cursor:pointer; font-weight:bold; width:25px; height:25px; line-height:25px; border-radius:60px; letter-spacing:-1px;
	background-color:#0097f4; 
	background-image:url(../images/common/black_opacity50.png);
}
#cafe_menu .other_class dl dd .btn input:hover {background-image:url(../images/common/black_opacity.png);}
/*///////////////////////////////////////////////////////레프트 영역///////////////////////////////////////////////////////////////////*/




/*/////////////////////////////////////////////////////////메인////////////////////////////////////////////////////////////////////////*/
/*메인비주얼박스*/
#visual_box {position:relative; padding:21px 30px 30px 30px; overflow:hidden; border-radius:50px; border:5px #0097f4 solid; background:#fff; box-shadow:0 4px 2px rgba(170,170,170,0.75);}


/*비주얼영역*/
#visual_box .visual {float:left; position:relative; width:51%; height:245px; margin-top:10px; border-radius:30px; border:1px #ddd solid; background-image:url(../images/common/main_visual_bg2.png); background-position:center 40%; background-repeat:no-repeat;}
#visual_box .visual h3 {display:none;}
#visual_box .visual #main_images {position:relative; border-radius:30px; z-index:0px;}
#visual_box .visual img {width:100%; height:245px; border-radius:30px;}
#visual_box .visual .cycle-pager {position:absolute; bottom:13px; z-index:999 !important; width:100%; text-align:center;}
#visual_box .visual .cycle-pager span {text-align:center; display:inline-block; width:13px; height:13px; text-indent:-999999px !important; background:#fff; margin:0 2px; border-radius:10px; box-shadow: inset 1px 1px 1px 0; cursor:pointer;}
#visual_box .visual .cycle-pager .cycle-pager-active {background:#ffd506;}
#visual_box .visual .btn {display:none;}


/*소개글 영역*/
#visual_box #introduction {padding:8px 0 0 10px; margin-left:400px; height:245px; overflow:hidden; background:url(../images/skin06/introduction_bg.png) left 1px no-repeat;}
#visual_box #introduction h3 {font-size:16px; color:#fff; margin:3px 0 0 0; padding-left:65px; line-height:48px; border-radius:50px; white-space:nowrap; text-overflow:ellipsis; 
	background-image:url(../images/skin06/introduction_bg.png);
	background-color:#0097f4;
	background-position:-11px -10px;
	background-repeat:no-repeat;
}
#visual_box #introduction .class_info {display:none;}
#visual_box #introduction dl {margin-top:30px; font-size:13px; padding:0 0 0 10px; }
#visual_box #introduction dl dt {color:#000;}
#visual_box #introduction dl dd {margin-top:20px; line-height:22px; color:#555; max-height:108px; overflow:hidden; overflow-y:auto;}



/*//////////////////////////////////////////////메인 자동출력 부분 기본정의 //////////////////////////////////////////////*/
#main_area {float:left; width:100%; overflow:hidden; padding-bottom:25px;}
#main_area li.list div.box {background-color:#fff; height:190px; border-radius:30px; padding:20px; box-shadow:0 4px 2px rgba(170,170,170,0.75); overflow:hidden;}
#main_area li.boardLeft div.box {margin:20px 10px 0 0px;}
#main_area li.boardRight div.box {margin:20px 0 0 10px;}

#main_area li.list div.box h3 {position:relative; font-size:16px; line-height:30px; color:#fff;}
#main_area li.list div.box h3 a {display:inline-block; color:#fff; background:#0097f4; padding:0 50px; border-radius:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area li.list div.box h3 .more {position:absolute; right:0; top:0; width:30px; height:30px; border-radius:60px; background-color:#0097f4; background-image:url(../images/skin06/main_more.png); background-position:left top; background-repeat:no-repeat;}
/*//////////////////////////////////////////////메인 자동출력 부분 기본정의 //////////////////////////////////////////////*/




/*알림장*/
#main_area .news {
	background-image:url(../images/skin06/news_bg.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	position:relative;
}
#main_area .news h3 .dot {position:absolute; left:0; top:-1px; width:41px; height:31px; background:url(../images/skin06/news_h3_dot.png) left top no-repeat;}
#main_area .news h3 .more {display:none !important;}
#main_area .news h3 {text-align:left;}

#main_area .news .news_big {position:absolute; top:20px; right:86px; line-height:30px; border-radius:60px; background:#0097f4;}
#main_area .news .news_big span {float:left; padding:0 5px 6px 11px; display:inline-block; width:16px; height:19px; background:url(../images/skin06/news_big_bg.png) 11px 6px no-repeat;}
#main_area .news .news_big a {font-size:13px; color:#fff; opacity:0.8; letter-spacing:-1px; padding:0 13px 0 0;}
#main_area .news .news_big a:hover {opacity:1;}

#main_area .news .btn {position:absolute; right:20px; top:20px; text-indent:-999999px; font-size:0px; width:66px;}
#main_area .news .btn span a {float:left; text-align:center; width:30px; height:30px; background-color:#0097f4; margin-left:3px; border-radius:60px;}
#main_area .news .btn span a:hover {opacity:0.8;}
#main_area .news .btn span.prev a {background-image:url(../images/skin06/news_btn.png); background-position:left top; background-repeat:no-repeat;}
#main_area .news .btn span.next a {background-image:url(../images/skin06/news_btn.png); background-position:right top; background-repeat:no-repeat;}

#main_area .news dl {margin:10px 10px 0; font-size:13px; clear:both; overflow:hidden; color:#fff;}
#main_area .news dl dt {font-weight:bold; font-size:15px;}
#main_area .news dl dt a {color:#0097f4;}
#main_area .news dl dt span {display:none;}
#main_area .news dl dd {color:#555; height:110px; font-size:14px;  line-height:22px; margin-top:9px; overflow:hidden; overflow-y:auto;}


/*일반게시판*/
#main_area .notice {
	background-image:url(../images/skin03/notice_bg.png);
	background-position:95% top;
	background-repeat:no-repeat;
}
#main_area .notice h3 .dot {position:absolute; left:0; top:-4px; width:30px; height:34px; background:url(../images/skin06/notice_h3_dot.png) left top no-repeat;}
#main_area .notice ul {margin:5px 0 0 5px; overflow:hidden; height:160px; }
#main_area .notice ul li {float:left; width:100%; border-top:1px #bbb dashed; color:#333; line-height:32px;}
#main_area .notice ul li:first-child {border-top:0px;}
#main_area .notice ul li a {float:left; width:60%; font-size:14px; padding:0 0 0 15px; color:#333; background:url(../images/skin06/notice_dot.png) left 15px no-repeat; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area .notice ul li a:hover {color:#0097f4;}
#main_area .notice ul li span {float:right; color:#333; font-size:14px;}


/*시간표*/
#main_area .timetable {
	background-image:url(../images/skin06/timetable_bg.png);
	background-position:left bottom;
	background-repeat:repeat-x;
}
#main_area .timetable h3 .dot {position:absolute; left:-5px; top:-2px; width:41px; height:32px; background:url(../images/skin06/timetable_h3_dot.png) left top no-repeat;}
#main_area .timetable h3 .today {position:absolute; right:54px; top:0; font-size:13px; color:#333; letter-spacing:0px !important; font-weight:normal;}
#main_area .timetable ul {height:124px; margin-top:20px; padding:0 15px; overflow:hidden; overflow-y:auto; clear:both;}
#main_area .timetable ul li {float:left; width:50%; color:#333; line-height:25px; margin-bottom:6px; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area .timetable ul li span {display:inline-block; text-align:center; background-color:#4db6f7; color:#fff; font-weight:bold; width:66px; border-radius:60px;}


/*갤러리*/
#main_area .gallery {
	background-image:url(../images/skin06/gallery_bg.png);
	background-position:center bottom;
	background-repeat:repeat-x;
}
#main_area .gallery h3 .dot {position:absolute; left:0; top:-8px; width:36px; height:38px; background:url(../images/skin06/gallery_h3_dot.png) left top no-repeat;}
#main_area .gallery ul {margin:19px 8px; position:relative; z-index:3 !important;}
#main_area .gallery ul li.slider .g_box_content {margin:0 10px;}
#main_area .gallery ul li.slider img {width:100%; height:109px; border-radius:10px; border:2px #0097f4 solid;}
#main_area .gallery ul li.slider .g_box_content:hover .subject {color:#0097f4;}

.gallery .cycle-carousel-wrap {font-size:0px; z-index:3 !important}
.gallery .cycle-carousel-wrap li {font-size:12px;}

#main_area .gallery ul div.info {height:22px; line-height:22px; padding:0;  font-size:13px !important;}
#main_area .gallery ul div.info span {float:left;}
#main_area .gallery ul div.info .visit {color:#333; margin-right:10px;}
#main_area .gallery ul div.info .visit i.fa {margin-right:10px; display:inline-block; vertical-align:middle; font-size:0px; width:15px; height:15px; background:url(../images/skin06/gallery_visit_bg.png) no-repeat; }
#main_area .gallery ul div.info .subject {float:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:60%;}
#main_area .gallery ul div.info .subject a {color:#333;}
#main_area .gallery ul div.info .content {display:none;}
#main_area .gallery ul div.info .date {display:none;}

#main_area .gallery .not{margin-top:15px; font-size: 13px; }

#main_area .gallery .btn{display:none;}


/*메인퀵*/
#main_quick {clear:both; background:#fff; border:5px #0097f4 solid; border-radius:30px; box-shadow:0 4px 2px rgba(170,170,170,0.75);}
#main_quick .cycle-carousel-wrap li.cycle-slide span {top:0px !important; left:10px !important; width:39px; height:39px; background:url(../images/common/main_quick_over_icon.png) center top no-repeat; }
#main_quick .btn span a {width:35px; height:24px;}
#main_quick .btn #q_prev {background:url(../images/skin06/main_quick_btn.png) left top no-repeat;}
#main_quick .btn #q_next {background:url(../images/skin06/main_quick_btn.png) right top no-repeat;}
#main_quick li a {color:#0c4660; font-size:13px; font-weight:normal;}
#main_quick li a:hover {color:#0097f4;}
/*/////////////////////////////////////////////////////////메인////////////////////////////////////////////////////////////////////////*/


.title_style {color:#0097f4;}

/*로그인관련*/
#board_login_box .title .first i.fa{color:#0097f4;}
#board_login_box div p.btn input{background:#0097f4; }

/*멤버 공통모달*/
.member_modal_box {background:#0097f4}


/*시간표테이블*/
.time_table_view table th {color:#0097f4;}

/*북마크 링크 아이콘*/
.board_bookmark ul li dl dd i.fa{ color:#0097f4;}

/*//////////////////////////////////////////////////////공통 반응///////////////////////////////////////////////////////////////////*/


/*기본정의*/
@media all and (max-width:1024px) { 

/*3단계*/
#contents_group {margin-top:0px;padding-bottom:10px;}


/*4단계(컨텐츠 영역)*/
#contents {background-image:none;}


/*5단계(main or sub 탑.tpl컨텐츠 영역)*/
#contents_box {
	top:0px;
	border-radius:0px;
	padding:10px;
	border:0px;
	border-top:0px;
	box-shadow:0px 0px 0px 0px #e0dddd;
	min-height:auto;
}

#header {background-color:#0097f4;}

.mobile_show_btn i.fa {color:#0097f4;}

#header h1 {background:none; width:80%; height:70px;}
#header h1 a { width:50%;  max-width:inherit; height:70px; }
#footer {padding:20px 0;}

#footer .f_util li {padding:0 10px;}

.contents_box_sub {padding-bottom:0px !important; margin-bottom:30px !important;}

.title_style {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}


/*상단로그인*/
.top_util {float:none;margin:0; }
.top_util li{float:left;  margin-right:0px;   height:40px;  font-size:12px; }
.top_util li a{ width:auto; height:auto; border-radius:0px; background:#0097f4;   box-shadow:none;}
.top_util li a:hover,
.top_util li a:hover i.fa {color:#0097f4;}
.top_util li i.fa{display:none; }


/*메인비주얼박스*/
#visual_box {position:relative; overflow:hidden; padding:0; box-shadow:none;}
#visual_box .visual {margin-top:0;}


/*비주얼영역*/
#visual_box {border:0px #0097f4 solid;}
#visual_box .visual {width:100%; height:auto; border:0px #ddd solid; border-radius:0px;}
#visual_box .visual #main_images {border-radius:0px;}
#visual_box .visual img {width:100%; height:auto; border-radius:10px 10px 0 0;}


/*소개글 영역*/
#visual_box #introduction {height:auto; padding:0 0 20px; background: url(../images/skin06/introduction_bg.png) 10px 5px no-repeat;}
#visual_box #introduction h3 {font-size:16px; margin:20px 10px 20px 21px; line-height:35px; 
	background-image:url(../images/skin06/introduction_bg.png);
	background-color:#0097f4;
	background-position: -11px -15px;
	background-repeat: no-repeat;
	}
#visual_box #introduction dl {padding:0 20px;}
#visual_box #introduction dl dd {margin-top:10px;}


#main_area {margin-top:20px; border-top:0px; clear:both; padding-bottom:0;}

/*#main_area li.list{margin-bottom:20px;}
#main_area li.list div.box{background-position:90% 15px !important;}
*/

#main_area li.list {margin-bottom:20px}
#main_area li.list div.box {background-color:#fff; height:180px; border-radius:0px; padding:20px 15px; box-shadow:none;}
#main_area li.list div.box h3 a {padding:0 25px 0 50px;}
#main_area li.boardLeft div.box,
#main_area li.boardRight div.box {margin:20px 0 0 0;}


/*일반게시판*/
#main_area .notice {  }
#main_area .notice ul li span {margin-right:0;}


/*알림장*/
#main_area .news .btn {position:absolute; top:20px; right:10px; font-size:12px;}
#main_area .news .news_big {top:20px; right:75px;}
#main_area .news dl dd {height:90px;}


/*갤러리*/
#main_area .gallery ul div.info .subject {width:50%;}
#main_area .gallery ul {margin:15px 0 0 0;}
#main_area .gallery ul li.slider .g_box_content {margin:0 5px;}


/*시간표*/
#main_area .timetable ul {padding:0;}
#main_area .timetable h3 .today {right:40px;}


.school_class {padding:0;}


/*학교가기*/
#cafe_menu .my_school {position:relative; margin:0; height:auto; background-color:#fff; border-radius:0px; box-shadow:none;}
#cafe_menu .my_school .opacity{display:none;}
#cafe_menu .my_school dl {padding:0px; background:none; border-radius:0px; width:67%; padding-left:23% !important; padding-right:5% !important;}
#cafe_menu .my_school dl dt {color:#0097f4}
#cafe_menu .my_school dl dd {font-weight:normal; color:#555;}
#cafe_menu .my_school dl dd span{display:inline-block;}


/*학급가기*/
#cafe_menu .other_class {position:relative; margin-top:0px; height:auto; background-color:#fff;  border-radius:0; box-shadow:none; }
#cafe_menu .other_class .opacity {display:none;}
#cafe_menu .other_class dl {background:none !important; width:100%;}
#cafe_menu .other_class dl dd .btn {right:0px; height:25px; width:43px;}
#cafe_menu .other_class dl dd .btn input {width:43px; font-weight:normal; height:25px; background-image:none; background-color:#0097f4; font-size:12px; border:0; border-radius:0;}
#cafe_menu .other_class dl dd .search {margin-right:53px;}
#cafe_menu .other_class dl dd .search select {font-size:13px; color:#0097f4;}

}



/*모바일*/
@media all and (min-width:768px) and (max-width:1024px)  {


}

/*//////////////////////////////////////////////////////공통 반응///////////////////////////////////////////////////////////////////*/