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

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

/*1단계*/
#wrap {
	background-color:#eeeeee;
	background-image:url(../images/skin02/wrap_bg.png);
	background-position:left top;
	background-repeat:repeat-x;
}

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

/*3단계*/
#contents_group {
	background-image:url(../images/skin02/contents_group_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding-top:31px;
	overflow:hidden;
}

/*4단계(컨텐츠 영역)*/
#contents {
	background-image:url(../images/skin02/.png);
	background-position:left top;
	background-repeat:no-repeat;
	margin-bottom:150px;
}

/*5단계(main or sub 탑.tpl컨텐츠 영역)*/
#contents_box {position:relative; overflow:hidden;}

/*서브(메인과 서브가 다를경우 class 로 수정)*/
.contents_box_sub {background:#fff; padding:10px 30px 120px;  border:1px #d7d7d7 solid; border-radius:5px;}


/* 카피라이트 */
#footer {
	position:relative;
	clear:both;
	background-color:#dddddd;
	background-image:;
	background-position:;
	background-repeat:;
	padding:20px 0px;
}


#footer .f_util li{ background:url(../images/skin02/util_line.png) right 6px no-repeat; padding:0 16px;}
#footer .f_util a {padding-left:30px; line-height:29px;}
#footer .f_util .private { background:url(../images/skin02/util_private.png) left top no-repeat;}
#footer .f_util .copyright { background:url(../images/skin02/util_copyright.png) left top no-repeat;}
#footer .f_util .location { background:url(../images/skin02/util_location.png) left top no-repeat;}

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


/*///////////////////////////////////////////////////////헤더///////////////////////////////////////////////////////////////////*/
#header{
	height:86px; 
	background-color:#1589eb;
	background-image:url(../images/skin02/header_bg.png);
	background-position:center top;
	background-repeat:no-repeat;
}

/*로고*/
#header h1 {text-align:center; font-size:22px; padding-top:16px; font-weight:normal;}
#header h1 a {color:#fff; display:inline-block; }

/*검색*/
#header .top_search {position:absolute; right:0px; top:26px; width:193px; height:27px; background:url(../images/skin02/top_search_bg.png) left top no-repeat;}
#header .top_search li.search_text input{margin:3px 0 0 10px; border:0px;  height:22px; line-height:22px; width:70%;}
#header .top_search li.btn {position:absolute; right:10px; top:6px; width:18px; height:17px;  background:#1589eb  }
#header .top_search li.btn input{border:0px; width:18px; height:17px; background:url(../images/skin02/top_search_btn.png) center top no-repeat;}

/*상단로그인*/
.top_util {float:left;margin:22px 0 0 0; clear:both;}
.top_util li{float:left; padding:0 10px 0 10px; font-size:12px; background:url(../images/skin02/top_util_line.jpg) right 5px no-repeat; }
.top_util li.last{background:none; }
.top_util li a{display:block;color:#333333;}
.top_util li i.fa{display:none;}
/*///////////////////////////////////////////////////////헤더///////////////////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////레프트 영역///////////////////////////////////////////////////////////////////*/
/*메뉴*/
#cafe_menu #nav {padding:0px 0px 11px; border-bottom:1px #b5b5b5 dashed;  }
#cafe_menu #nav li{line-height:33px; border:1px #d7d7d7 solid; margin-bottom:5px; border-radius:2px;  font-size:14px; font-weight:bold;}
#cafe_menu #nav li a{display:block; color:#000000; padding-left:13px; background:#fff url(../images/skin02/nav_off.png) 95% 10px no-repeat;}
#cafe_menu #nav li a:hover{background-color:#1589eb; background-image:url(../images/skin02/nav_on.png); background-position:95% 10px; background-repeat:no-repeat; color:#fff;}


.school_class {margin-top:15px; background:#fff url(../images/skin02/school_class_bg.png) 62% bottom no-repeat; border:1px #d7d7d7 solid; border-radius:2px; padding:14px; }
.school_class .opacity{display:none; }

/*학교가기*/
#cafe_menu .my_school {border:3px #aaaaaa solid; }
#cafe_menu .my_school:hover {border:3px #1589eb solid;   }
#cafe_menu .my_school:hover dl dt{color:#1589eb;   }
#cafe_menu .my_school dl{height:30px; background:url(../images/skin02/my_school_bg.png) left top repeat-x; }
#cafe_menu .my_school dl dt{color:#000000; padding-left:10px; font-size:12px; line-height:30px; background:url(../images/skin02/my_school_www_bg.png) 95% 5px no-repeat;}
#cafe_menu .my_school dl dd{display:none;}


/*학급가기*/
#cafe_menu .other_class {position:relative; background:#fff;  margin:7px 0 25px 0; height:25px;  }
#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-right:28px; overflow:hidden;}
#cafe_menu .other_class dl dd .search select{width:100%; height:25px;border:1px #bbbbbb solid;  color:#1589eb; font-weight:bold; font-size:12px;}

#cafe_menu .other_class dl dd .btn {position:absolute; top:0px; right:0px; width:25px; height:25px;}
#cafe_menu .other_class dl dd .btn input{width:100%; height:25px; background-color:#464646; border:0px; color:#fff; font-size:12px; cursor:pointer;}
#cafe_menu .other_class dl dd .btn input:hover{background-image:url(../images/common/white01_opacity.png); }
/*///////////////////////////////////////////////////////레프트 영역///////////////////////////////////////////////////////////////////*/


/*/////////////////////////////////////////////////////////메인////////////////////////////////////////////////////////////////////////*/
/*메인비주얼박스*/
#visual_box {position:relative; border:1px #d7d7d7 solid; border-radius:5px; height:250px; background:#fff;}

/*비주얼영역*/
#visual_box .visual{float:left; position:relative;  z-index:9; width:460px; height:250px; background-color:#1589eb; border-radius:5px 0px 0px 5px;}
#visual_box .visual h3{display:none;}
#visual_box .visual #main_images {position:relative; z-index:0px; }
#visual_box .visual img {width:100%; height:250px; border-radius:5px 0px 0px 5px;}
#visual_box .visual .cycle-pager {display:none;}
#visual_box .visual .btn{position:absolute; top:45%; z-index:999999 !important; width:100%;}
#visual_box .visual .btn span{position:absolute; }
#visual_box .visual .btn span a{display:block;width:36px; height:36px; text-indent:-999999px;}
#visual_box .visual .btn #c_prev{left:20px; background:url(../images/skin02/main_visual_btn.png) left top no-repeat;}
#visual_box .visual .btn #c_next{right:20px; background:url(../images/skin02/main_visual_btn.png) right top no-repeat;}


/*소개글 영역*/
#visual_box #introduction{position:relative; z-index:99; margin-left:460px; padding:29px; background:url(../images/skin02/introduction_bg.png) right top no-repeat;}
#visual_box #introduction h3{position:absolute; left:-33px; top:20px; height:58px; width:90%; font-size:16px; color:#000000;  background:url(../images/skin02/home_name_bg.png) left top no-repeat;  line-height:58px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;}
#visual_box #introduction h3 .home_name{}
#visual_box #introduction .class_info{display:none; }
#visual_box #introduction dl {margin-top:70px; font-size:14px; }
#visual_box #introduction dl dt{color:#000000;}
#visual_box #introduction dl dd{margin-top:10px; font-size:12px; color:#555555; max-height:108px;  overflow:hidden; overflow-y:auto;}




/*//////////////////////////////////////////////메인 자동출력 부분 기본정의 //////////////////////////////////////////////*/
#main_area {float:left; width:100%; margin-bottom:25px; }
#main_area li.list{margin-top:25px; width:49%; }
#main_area li.boardRight {margin-left:2%;}
#main_area li.list div.box{height:210px; border-radius:3px; background-color:#fff; border:1px #d7d7d7 solid; }

#main_area li.list div.box h3{ font-size:15px; color:#000000;}
#main_area li.list div.box h3 a{display:block; color:#000000; }
#main_area li.list div.box h3 .more{display:inline-block;  float:right; width:26px; height:26px; background-image:url(../images/skin02/notice_more_off.png);}
#main_area li.list div.box h3 .more:hover{background-color:#1589eb;  background-image:url(../images/skin02/notice_more_on.png);}

/*//////////////////////////////////////////////메인 자동출력 부분 기본정의 //////////////////////////////////////////////*/




/*알림장*/
#main_area .news {
	border:0px !important;
	padding:21px 21px 21px 39px !important;
	background-color:none;
	background-image:url(../images/skin02/news_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
	position:relative;
}

#main_area .news .arrow_bg{display:block; width:21px; height:43px; position:absolute; top:-3px; right:12px;  background:url(../images/skin02/news_arrow.png) left top no-repeat;}
#main_area .news h3 {border-bottom:1px #bfbfbf dashed; padding-bottom:15px}
#main_area .news h3 .more {display:none !important;}

#main_area .news .news_big {position:absolute; top:18px; right:40px; text-indent:-9999999px;  background-color:#1589eb; border-radius:2px;}
#main_area .news .news_big a{display:block; width:22px; height:22px; background-image:url(../images/skin02/news_btn03.png);}

#main_area .news .btn{position:absolute; right:65px; top:18px; text-indent:-999999px;  font-size:0px; width:50px;}
#main_area .news .btn span a{float:left; text-align:center; width:22px; height:22px; background-color:#1589eb; margin-left:3px; background-position:left top; background-repeat:no-repeat; }
#main_area .news .btn span.prev a{background-image:url(../images/skin02/news_btn01.png);}
#main_area .news .btn span.next a{background-image:url(../images/skin02/news_btn02.png);}

#main_area .news dl {margin-top:10px; font-size:13px;}
#main_area .news dl dt{color:#333333;font-weight:bold; margin-bottom:10px; padding-left:18px; background:url(../images/skin02/news_dl_dt_bg.jpg) left 4px no-repeat;}
#main_area .news dl dt span{display:none;}
#main_area .news dl dd {height:115px;; font-size:12px; line-height:22px;  padding:10px 50px 10px 10px; overflow:hidden; overflow-y:auto; color:#555555; border:2px #d7d7d7 solid; background:#f9f9f9 url(../images/skin02/news_dl_dd_bg.png) 90% bottom no-repeat;;}




/*일반게시판*/
#main_area .notice {
	background-image:url(../images/skin02/notice_bg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	padding:20px 0px;
}
#main_area .notice h3 .more{margin-right:20px}
#main_area .notice h3 {border-bottom:1px #dddddd solid; padding:0 0 15px 20px;}
#main_area .notice ul {margin-top:15px; font-size:13px; height:130px; overflow:hidden; padding:0px 20px 0px 20px;}
#main_area .notice ul li{color:#555555; line-height:26px; }
#main_area .notice ul li a{float:left; width:60%; font-size:12px; padding:0 0 0 15px;color:#555555; background:url(../images/skin02/notice_dot.jpg) left 9px no-repeat; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area .notice ul li a:hover{color:#21a38b;}
#main_area .notice ul li span{float:right; color:#999999}



/*시간표*/
#main_area .timetable {
	background-image:url(../images/skin02/timetable_bg.png);
	background-position:68% 23px;
	background-repeat:no-repeat;
	padding:20px;
}
#main_area .timetable h3 .today{font-size:13px; color:#999; letter-spacing:0.5px !important; font-weight:normal; }
#main_area .timetable div {border:2px #d7d7d7 solid;  margin-top:28px; }
#main_area .timetable ul{margin:5px;padding-top:5px; background:url(../images/skin02/timetable_box_bg.png) left top repeat-y; border:1px #d7d7d7 solid;  height:137px; overflow:hidden; overflow-y:auto;clear:both;}
#main_area .timetable ul li{float:left; width:47%;  color:#444444; line-height:20px; padding-left:3%; line-height:27px; font-size:13px; }
#main_area .timetable ul li span{color:#1589eb; font-weight:bold;}


/*갤러리*/
#main_area .gallery {padding:20px;}
#main_area .gallery h3{background:url(../images/skin02/gallery_bg.png) left top no-repeat; padding-left:25px;}
#main_area .gallery ul{margin-top:20px; position:relative; z-index:3 !important;}
#main_area .gallery ul li.slider .g_box_content{margin:0px 4px;}
#main_area .gallery ul li.slider img{width:100%; height:106px; border:1px #bfbfbf solid;}


.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{width:100%;  font-size:12px;}
#main_area .gallery ul div.info span{float:left; width:93%;  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#main_area .gallery ul div.info .visit{display:none; }
#main_area .gallery ul div.info .subject{font-weight:bold; color:#333333; margin-top:5px}
#main_area .gallery ul div.info .content{color:#555555; }
#main_area .gallery ul div.info .date{color:#999999;}

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

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




/*메인퀵*/
#main_quick {background:url(../images/skin02/main_quick_bg.png) repeat;  border:3px #c7c7c7 solid; border-radius:5px; margin-top:25px;}
#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:34px; height:34px;}
#main_quick .btn #q_prev{background:url(../images/skin02/main_quick_btn.png) left top no-repeat;}
#main_quick .btn #q_next{background:url(../images/skin02/main_quick_btn.png) right top no-repeat;}
/*/////////////////////////////////////////////////////////메인////////////////////////////////////////////////////////////////////////*/



.title_style {color:#1589eb;}


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

/*멤버 공통모달*/
.member_modal_box {background:#1589eb}


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

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


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


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

/*3단계*/
#contents_group {padding-top:0;}

/*4단계(컨텐츠 영역)*/
#contents {overflow:hidden;}


/*서브(메인과 서브가 다를경우 class 로 수정)*/
.contents_box_sub {background:#eee;}

#header {background-color:#1589eb;}


.mobile_show_btn i.fa {color:#1589eb;}



/*상단로그인*/
.top_util {float:none; margin:0; clear:both;}
.top_util li{float:left; padding:0px; font-size:12px; background:#1589eb; }
.top_util li.last{background:#1589eb; }
.top_util li a{display:block;color:#333333;}
.top_util li i.fa{display:none;}




/*메인비주얼박스*/
#visual_box {border:0px; border-radius:0px;background:#fff;}

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

/*소개글 영역*/
#visual_box #introduction{padding:10px 10px 20px; background:url(../images/skin02/introduction_bg.png) right top no-repeat; border:1px #ddd solid; border-top:0px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;  box-sizing:border-box;}
#visual_box #introduction h3{position:relative; left:0px; top:0px; height:58px; text-align:left; padding:0 20px 0 20px;}
#visual_box #introduction h3 .home_name{margin-left:0px;}
#visual_box #introduction dl {margin-top:20px;  }
#visual_box #introduction dl dd{margin-top:10px;max-height:auto;}

#main_area li.list {border:0px;}
#main_area li.list div.box{height:210px; border-radius:0px; background-color:#fff; }
#main_area li.boardRight {margin-left:0%;}


/*알림장*/
#main_area .news {padding:15px !important;background-image:none; border:1px #d7d7d7 solid !important;}

/*일반게시판*/
#main_area .notice {padding:0px;}
#main_area .notice h3 .more{margin-right:0px}
#main_area .notice ul {padding:0px;}

/*시간표*/
#main_area .timetable {padding:0;}

/*갤러리*/
#main_area .gallery {padding:0;}


.school_class {margin-top:0; background:none; border:0px; border-radius:0; padding:0; }
.school_class .opacity{display:none; }


#cafe_menu .my_school {border:0px; }
#cafe_menu .my_school:hover {border:0px;   }
#cafe_menu .my_school:hover dl dt{color:#1589eb;   }
#cafe_menu .my_school dl{height:30px; background:none; }
#cafe_menu .my_school dl dt{color:#1589eb; font-size:12px; line-height:30px; background:none; display:inline-block;}
#cafe_menu .my_school dl dd{display:inline-block ;}


/*학급가기*/
#cafe_menu .other_class {position:relative; background:#fff;  margin:0; height:auto;  }

}



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

/*소개글 영역*/
#visual_box #introduction{padding:29px;}

#main_area li.list{ width:48.5% !important;}
#main_area li.boardRight{float:right !important;}

/*메인퀵*/
#main_quick {display:block; margin:10px;}



}