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

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

/*1단계*/
#wrap {
	background-color:#ebecec;
}

/*2단계*/
#container {
}

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

/*4단계(컨텐츠 영역)*/
#contents {
    background-image:url(../images/skin05/contents_box_bg.png);
    background-position:center top;
    background-repeat:no-repeat;
    overflow:hidden;
    top:8px;
    padding-top:75px;
}

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

/* 카피라이트 */
#footer {
	background-image:url(../images/skin05/footer_bg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	padding:213px 0 50px;;
}

#footer .f_util li {padding:0 13px 0 9px; background: url(../images/common/f_util_line01.gif) right 7px no-repeat;}
#footer .f_util li a {font-size:13px; color:#444;}
#footer .f_util li a:hover {color:#000;}
#footer .address {color:#444; font-size:13px; letter-spacing:0px; padding-top:11px;}

.contents_box_sub {background:#fff; padding:10px 30px 120px;  border:1px #d7d7d7 solid; border-radius:0 0 5px 5px;}
/*///////////////////////////////////////////////////////기본레이아웃 구조///////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////헤더///////////////////////////////////////////////////////////////////*/
#header{
	height:113px; 
	background-color:#195389;
	background-image:url(../images/skin05/header_bg.png);
	background-position:center top;
	background-repeat:repeat-x;
	box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.2);
}

/*로고*/
#header h1 {float:left; width:40%; height:105px; overflow:hidden; font-size:30px; line-height:105px; font-weight:normal; padding-left:100px; background:url(../images/skin05/h1_dot.png) 55px 25px no-repeat;}
#header h1 a { display:inline-block; color:#fff; max-width:350px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}


/*검색*/
#header .top_search {position:absolute; right:42px; top:38px; width:199px; height:43px; background-color:#195389; background-image:url(../images/common/white_opacity01.png); border-radius:10px; box-shadow:inset 1px 1px 0 rgba(0, 0, 0, 0.3);}
#header .top_search li.search_text {display:block; margin:4px 50px 0 12px; }
#header .top_search li.search_text input {width:100%; border:0px; height:30px; line-height:30px; background:none; }
#header .top_search li.search_text :-ms-input-placeholder {color:#fff; font-size:14px; letter-spacing:-1px;}
#header .top_search li.search_text ::-webkit-input-placeholder {color:#fff; font-size:14px; letter-spacing:-1px;}
#header .top_search li.search_text ::-moz-placeholder {color:#fff; font-size:14px; letter-spacing:-1px;}
#header .top_search li.btn {position:absolute; right:12px; top:12px; width:20px; height:19px;}
#header .top_search li.btn input{border:0px; cursor:pointer; width:20px; height:19px; background:url(../images/skin05/top_search_btn.png) left top no-repeat;}


/*상단로그인*/
.top_util {float:right;margin:49px 265px 0 0;}
.top_util li {float:left; font-size:15px; padding:0 6px;}
.top_util li a {display:block; color:#fff; letter-spacing:0px;}
.top_util li a:hover {text-decoration:underline;}
.top_util li i.fa {display:none;}
/*///////////////////////////////////////////////////////헤더///////////////////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////레프트 영역///////////////////////////////////////////////////////////////////*/
/*메뉴*/
#cafe_menu {width:172px; padding-top:73px; background:url(../images/skin05/nav_bg.png) no-repeat;}
#cafe_menu #nav {background-color:#195389; box-shadow:0px 2px 5px rgba(0,0,0,0.2);}
#cafe_menu #nav li {background:url(../images/common/white_opacity30.png) left bottom repeat-x; height:45px; font-size:17px; font-weight:bold;}
#cafe_menu #nav li a {display:block; color:#fff; padding:10px 0 16px 20px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
#cafe_menu #nav li a:hover {background:url(../images/skin05/nav_over.gif) no-repeat; color:#000;}
#cafe_menu #nav li:last-child {background:none;}


/*학교가기*/
#cafe_menu .my_school {position:relative; background-color:#fff; padding:17px 7px 4px 7px; box-shadow:0 0 5px rgba(0,0,0,0.2);}
#cafe_menu .my_school a:hover .opacity{display:none;}
#cafe_menu .my_school .opacity {position:absolute; width:159px; height:42px; z-index:3; border-radius:10px; background:url(../images/common/white_opacity01.png) repeat;}
#cafe_menu .my_school dl {position:relative; z-index:0; width:159px; height:42px; color:#fff; background-color:#195389; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.3);}
#cafe_menu .my_school dl dt{ font-size:14px; background:url(../images/skin05/my_school_dot.png) 19px 7px no-repeat; padding:11px 0 10px 54px;}
#cafe_menu .my_school dl dd{display:none;}
#cafe_menu .my_school dl dd span{display:none;}


/*학급가기*/
#cafe_menu .other_class {position:relative; height:46px; background-color:#fff; padding:4px 7px 13px 7px; border-radius:0 0 15px 15px; box-shadow:0 2px 5px rgba(0,0,0,0.2); }
#cafe_menu .other_class .opacity {display:none;}
#cafe_menu .other_class dl {position:relative; z-index:3; width:159px; height:32px; padding-top:10px; color:#fff; background:#195389 url(../images/common/white_opacity01.png) repeat; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.3);}
#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 41px 0 16px; overflow:hidden;}
#cafe_menu .other_class dl dd .search select {font-family:"맑은 고딕",Malgun Gothic, Nanum Gothic,"나눔 고딕"; width:100%; height:20px; border:0px; color:#fff; font-size:14px; background:#195389 url(../images/common/white_opacity01.png) repeat;}
#cafe_menu .other_class dl dd .search p {width:100%;}
#cafe_menu .other_class dl dd .btn {position:absolute; top:-1px; right:9px; width:28px; height:25px;}
#cafe_menu .other_class dl dd .btn input {width:100%; padding:3px 0 7px 0; background-color:#195389; border:0px; color:#fff; font-size:13px; cursor:pointer; font-weight:bold; border-radius:5px;}
#cafe_menu .other_class dl dd .btn input:hover {background-image:url(../images/common/black_opacity.png); color:#fff45f;}
/*///////////////////////////////////////////////////////레프트 영역///////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////메인////////////////////////////////////////////////////////////////////////*/
/*메인비주얼박스*/
#visual_box {position:relative; padding:0 10px 10px 10px; border-radius:0 0 10px 10px; overflow:hidden; background:url(../images/skin05/visual_box_bg.gif) repeat; }

/*비주얼영역*/
#visual_box .visual {float:left; position:relative; width:415px; height:224px; background:#fff; padding:13px 18px; border-radius:3px 0 0 3px; 
    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; z-index:0px; border-radius:10px;}
#visual_box .visual img {width:100%; height:224px; border-radius:10px;}
#visual_box .visual .cycle-pager {position:absolute; bottom:20px; z-index:999 !important; width:100%; text-align:center;}
#visual_box .visual .cycle-pager span {text-align:center; display:inline-block; width:12px; height:12px; text-indent:-999999px !important; background:#fff; margin:0 4px; border-radius:60px; cursor:pointer;}
#visual_box .visual .cycle-pager .cycle-pager-active {background:#2d9659; width:27px;}
#visual_box .visual .btn{display:none;}


/*소개글 영역*/
#visual_box #introduction {float:left; position:relative; width:278px; height:250px; padding:0 20px; overflow:hidden; border-radius:0 3px 3px 0; background:#fff url(../images/skin05/introduction_bg.gif) left 12px no-repeat;}
#visual_box #introduction h3 {font-size:19px; color:#fff; letter-spacing:-1px; text-align:center; margin-top:42px; line-height:45px; background:#fb5656; border-radius:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#visual_box #introduction .class_info {display:none;}
#visual_box #introduction dl {margin:18px 0 0 0;}
#visual_box #introduction dl dt {color:#444; font-size:15px; line-height:15px; font-weight:bold;}
#visual_box #introduction dl dd {margin-top:15px; color:#777; font-size:14px; height:100px; overflow:hidden; overflow-y:auto; line-height:20px;}


/*//////////////////////////////////////////////메인 자동출력 부분 기본정의 //////////////////////////////////////////////*/
#main_area {float:left; width:100%; overflow:hidden; margin-top:11px; margin-bottom:25px;}
#main_area li.list div.box {position:relative; background-color:#fff3bd; height:200px; width:356px; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,0.2);}
#main_area li.boardLeft div.box {float:left; margin:15px 23px 5px 16px;}
#main_area li.boardRight div.box {float:right; margin:15px 16px 5px 23px;}

#main_area li.list div.box h3 {position:absolute; left:-16px; top:14px; width:291px; padding:0 0 15px 96px; font-size:17px; line-height:32px; color:#fff;}
#main_area li.list div.box h3 a {display:block; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area li.list div.box h3 .more {position:absolute; right:42px; top:8px; width:23px; height:23px; background-image:url(../images/skin05/main_more.png); background-position:left top; background-repeat:no-repeat;}
/*//////////////////////////////////////////////메인 자동출력 부분 기본정의 //////////////////////////////////////////////*/



/*일반게시판*/
#main_area .notice h3 {
	background-image:url(../images/skin05/notice_tit_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
}
#main_area .notice h3 .dot {position:absolute; left:43px; top:-6px; width:32px; height:50px; background:url(../images/skin05/notice_h3_dot.png) left top no-repeat; }
#main_area .notice ul {float:left; width:295px; margin:67px 0 0 30px; height:138px; overflow:hidden;}
#main_area .notice ul li {color:#444; line-height:23px; }
#main_area .notice ul li a {float:left; width:60%; font-size:14px; padding:0 0 0 20px; color:#444; background:url(../images/skin05/notice_dot.png) left 8px no-repeat; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area .notice ul li a:hover {color:#df494a;}
#main_area .notice ul li span {float:right; color:#777; font-size:14px; letter-spacing:0px;}


/*알림장*/
#main_area .news h3 {
	background-image:url(../images/skin05/news_tit_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding-left:107px !important; width:280px; !important;
	}
#main_area .news h3 .dot {position:absolute; left:47px; top:-4px; width:50px; height:48px; background:url(../images/skin05/news_h3_dot.png) left top no-repeat; }
#main_area .news h3 .more {display:none !important;}
#main_area .news h3 a {margin-top:2px;}
#main_area .news .news_big {position:absolute; top:22px; right:80px;}
#main_area .news .news_big span {float:left; margin-right:5px; display:inline-block; width:23px; height:23px; background-image:url(../images/skin05/news_big_bg.png); background-position:left top; background-repeat:no-repeat;}
#main_area .news .news_big a {font-size:13px; font-weight:bold; color:#fff;}

#main_area .news .btn {position:absolute; right:21px; top:22px; text-indent:-999999px;  font-size:0px; width:52px;}
#main_area .news .btn span a {float:left; text-align:center; width:23px; height:23px; background-color:#1589eb; margin-left:3px; background-position:left top; background-repeat:no-repeat; }
#main_area .news .btn span.prev a {background:url(../images/skin05/news_btn.png) left top no-repeat;}
#main_area .news .btn span.next a {background:url(../images/skin05/news_btn.png) right top no-repeat;}

#main_area .news dl {padding:70px 20px 0 40px; font-size:14px; clear:both; overflow:hidden; color:#444;}
#main_area .news dl dt {font-weight:bold; font-size:15px; margin-bottom:6px;}
#main_area .news dl dt a {color:#444;}
#main_area .news dl dt a:hover {color:#000;}
#main_area .news dl dt span {display:none;}
#main_area .news dl dd {height:88px; font-size:14px; line-height:22px; overflow:hidden; overflow-y:auto; }
#main_area .news dl dd.not_index {font-size:12px !important;}



/*시간표*/
#main_area .timetable h3 {
	background-image:url(../images/skin05/timetable_tit_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding-left:114px !important; width:273px !important;
}
#main_area .timetable h3 .dot {position:absolute; left:58px; top:-9px; width:32px; height:56px; background:url(../images/skin05/timetable_h3_dot.png) left top no-repeat;}
#main_area .timetable h3 .today {font-size:13px; color:#fff; padding-left:34px; letter-spacing:0 !important; font-weight:normal;}
#main_area .timetable ul {height:108px; margin-top:79px; margin-right:15px; padding:0 0 0 20px; overflow:hidden; overflow-y:auto; clear:both;}
#main_area .timetable ul li {float:left; width:50%; color:#444; line-height:21px; margin-bottom:6px; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#main_area .timetable ul li span {display:inline-block; color:#fff; text-align:center; background:url(../images/skin05/timetable_class_bg.gif) repeat-x; color:#fff; font-weight:bold; width:77px; margin-right:10px; border-radius:60px; box-shadow:0 2px 2px rgba(0,0,0,0.3);}
#main_area .timetable ul li.not_index {font-size:12px !important;}



/*갤러리*/
#main_area .gallery h3 {
	background-image:url(../images/skin05/gallery_tit_bg.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding-left:114px !important; width:273px !important;
}
#main_area .gallery h3 .dot {position:absolute; left:26px; top:-5px; width:77px; height:52px; background:url(../images/skin05/gallery_h3_dot.png) left top no-repeat; }
#main_area .gallery ul {margin:67px 5px 0 5px; position:relative; z-index:3 !important;}
#main_area .gallery ul li.slider .g_box_content {position:relative; margin:0 4px; overflow:hidden; background-color:#fff; border-radius:10px;}
#main_area .gallery ul li.slider img {width:100%; height:116px;}


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

#main_area .gallery ul div.info {position:absolute; left:0; bottom:0; width:100%; height:31px; line-height:31px; padding:0px 15px; font-size:14px !important; background:url(../images/common/black_opacity50.png) repeat; }
#main_area .gallery ul div.info span {float:left;}
#main_area .gallery ul div.info .visit {color:#fff; margin-right:10px;}
#main_area .gallery ul div.info .visit i.fa {margin-right:5px; display:inline-block; vertical-align:middle; font-size:0px; width:17px; height:15px; background:url(../images/skin05/gallery_visit_bg.png) center top no-repeat;}
#main_area .gallery ul div.info .subject {float:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:65%;}
#main_area .gallery ul div.info .subject {color:#fff;}
#main_area .gallery ul div.info .content {display:none;}
#main_area .gallery ul div.info .date {display:none;}
#main_area .gallery ul li.slider .g_box_content:hover .subject {color:#fe8182;}

#main_area .gallery .not_index {font-size:12px !important; padding-top:65px !important;}

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

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



/*메인퀵*/
#main_quick {clear:both; padding:11px 0; border-radius:10px; background:url(../images/skin05/main_quick_bg.gif) repeat;}
#main_quick .cycle-carousel-wrap li.cycle-slide span {top:0px !important; left:10px !important; width:34px; height:34px; background:url(../images/common/main_quick_over_icon.png) center top no-repeat; }
#main_quick .btn span a {width:18px; height:29px;}
#main_quick .btn #q_prev {left:15px; background:url(../images/skin05/main_quick_btn.png) left top no-repeat;}
#main_quick .btn #q_next {right:15px; background:url(../images/skin05/main_quick_btn.png) right top no-repeat;}

#main_quick ul {width:766px; margin:0 10px; padding:10px 2px 0 2px; background:#fff; border-radius:3px;}
#main_quick ul li {margin-top:11px;}
#main_quick li a {font-size:14px; color:#444; font-weight:normal;}
#main_quick li:hover a {color:#000;}

#main_quick .cycle-carousel-wrap li.cycle-slide span {position:absolute; width:39px; height:39px; display:none;}


/*/////////////////////////////////////////////////////////메인////////////////////////////////////////////////////////////////////////*/
.title_style {color:#195389;}

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

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


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

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

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


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

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

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


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

#header {background-image:none; box-shadow:none;}
#header h1 {background:none; height:70px; width:80%;}
#header h1 a {height:70px; width:50%;  max-width:inherit;}
#footer {padding-top:150px;}

.mobile_show_btn i.fa {color:#195389;}

#cafe_menu #nav li {height:48px;}

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


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


/*메인비주얼박스*/
#visual_box {position:relative; overflow:hidden; margin-top:20px; background:none; border-radius:10px !important; padding:0;}

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


/*소개글 영역*/
#visual_box #introduction {height:auto; background-image:none; padding:0 0 20px 0;}
#visual_box #introduction h3 {font-size:16px; margin:20px 10px; line-height:35px }
#visual_box #introduction dl {padding:0 20px; margin:10px 0 0 0;}
#visual_box #introduction dl dd {margin-top:10px; height:auto;}

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

/*#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; border:0;}
#main_area li.list div.box {background-color:#fff; height:200px; border-radius:0px; padding:0px; box-shadow:none; width:100%;}
#main_area li.boardLeft div.box,
#main_area li.boardRight div.box {margin:15px 0 0 0;}

#main_area li.list div.box h3 {position:relative; left:0; top:0; width:100%; padding:0; margin:0; font-size:16px; line-height:50px; background:#dc555f; border-radius:10px 10px 0 0;}
#main_area .notice h3 .dot {float:left; position:relative; margin:3px 5px 0 12px; width:32px; height:50px; background-size:27px; left:0; top:0;}
#main_area li.list div.box h3 .more {margin:12px 21px 0 0;}


/*일반게시판*/
#main_area .notice ul {width:94%; margin:15px 3% 0 3%; height:130px; overflow:hidden;}
#main_area .notice ul li span {margin-right:0;}


/*알림장*/
#main_area .news h3 {position:relative; left:0; top:0; background:#ffba01 !important; padding:0 !important; width:100% !important;}
#main_area .news h3 .dot {float:left; position:relative; margin:5px 5px 0 10px; width:40px; height:48px; background-size:40px; left:0; top:0;}
#main_area .news .btn {position:absolute; top:15px; left:150px; font-size:12px; }
#main_area .news .news_big {right:15px; top:15px;}
#main_area .news dl {padding:15px 10px;}
#main_area .news dl dd {height:90px;}
#main_area .not_index {line-height:90px !important;}


/*갤러리*/
#main_area .gallery h3 {position:relative; left:0; top:0; background:#368360 !important; padding:0 !important; width:100% !important;}
#main_area .news h3 a {margin-top:0;}
#main_area .gallery h3 .dot {float:left; position:relative; margin:5px 3px 0 10px; width:60px; height:52px; background-size:55px; left:0; top:0;}
#main_area .gallery ul div.info .subject {width:50%;}
#main_area .gallery ul {margin:15px 5px;}


/*시간표*/
#main_area .timetable h3 {position:relative; left:0; top:0; background:#f1402d !important; padding:0 !important; width:100% !important;}
#main_area .timetable h3 .dot {float:left; position:relative; margin:3px 3px 0 10px; width:32px; height:56px; background-size:25px; left:0; top:0;}
#main_area .timetable ul {margin:15px 15px; padding:0;}


#cafe_menu {width:70%;}

/*학교가기*/
#cafe_menu .my_school {position:relative; margin:0; padding:0; width:100%; height:auto; background-color:#fff; border-radius:0px; box-shadow:none;}
#cafe_menu .my_school .opacity{display:none;}
#cafe_menu .my_school dl {width:65%; background:none; border-radius:0; box-shadow:none; width:67%; padding-left:23% !important; padding-right:5% !important;}
#cafe_menu .my_school dl dt {color:#195389}
#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; width:100%; border-radius:0px; box-shadow:none;}
#cafe_menu .other_class dl dd .btn {height:25px; right:0px; width:43px;}
#cafe_menu .other_class dl dd .btn input {height:25px; background-color:#195389; font-weight:normal; font-size:12px; border:0; border-radius:0;}
#cafe_menu .other_class dl dd .search select {font-size:13px; color:#195389;}
}



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

#main_quick ul {width:96%; margin:0 2%;}

#footer {padding-top:200px;}

}

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