﻿/* 알림장 */
.ann_tablet{ display:none; }

/* slick slide common */
.slick-slider { -webkit-transition: all ease-in-out .3s; transition: all ease-in-out .3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-slide { display: none; height: 100%; min-height: 1px; vertical-align: middle; }
.slick-list { overflow: hidden; }
.slick-list.dragging { cursor: pointer; }
.slick-initialized .slick-slide { display: inline-block; }
.slick-arrow.slick-hidden { display: none; }
.slick-current { opacity: 1; display: block; }
.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }
/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display: inline-block; }

h2.heading{font-size: 1rem; color: #111; font-weight: 600; margin-bottom: 0.5rem; overflow: hidden; white-space: nowrap; margin-right: 1.5rem;}
.btn_more{position: absolute; top: 0; right: 0; font-size: 1.2rem; line-height: 1.2; color: #111; }
.btn_more i{transition: transform 0.3s; -webkit-transition: transform 0.3s;}
.btn_more:hover i, .btn_more:focus i{transform: rotate(180deg); -webkit-transform: rotate(180deg);}

/* 메인비주얼 */
.MVisual00411 {position: relative; overflow: hidden; height: 100%;}
.MVisual00411 .item{overflow:hidden; line-height:0; }
.MVisual00411 .item img{position:relative; width:auto; height:100%; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.MVisual00411 .control{position:absolute; left: 50%; margin-left: -30rem; bottom: 3rem; z-index: 1;}
.MVisual00411 .control > a{display:inline-block; width:2rem; height:2rem; line-height:2rem; background:rgb(255, 255, 255, 0.8); color:#333; text-align: center; border-radius:50%; -webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }
.MVisual00411 .control > a.play{display:none;}
.MVisual00411 .control > a:hover,
.MVisual00411 .control > a:focus{ background:rgba(245, 224, 184, 0.9);}

/* 게시판 */
.notice00411 { position:relative; height:100%; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.notice00411 .titTab{ background: #cfc3f9;}
.notice00411 .titTab ul{font-size:0; margin-right: 5rem;}
.notice00411 .titTab li { position: relative; display:inline-block; max-width:calc(33% - 0.3rem); vertical-align: top; }
.notice00411 .titTab li a {position:relative; display:block; font-size: 1rem;font-weight: 600; padding: 0 1.4rem; height: 3.75rem; line-height: 3.75rem; border: 1px solid transparent; color: #674ccd;} 
.notice00411 .titTab li a::before{content: "\e938"; font-family: 'xeicon'; position: absolute; right: 1.3rem; top: calc(50% - 0.5rem); color: #fff; font-size: 1rem; line-height: 1; opacity: 0;}
.notice00411 .titTab li a span{position: relative; display:block; overflow:hidden; white-space:nowrap;}
.notice00411 .tabWrap { height: calc(100% - 3.75rem); background: #fff; padding: 1.65rem 2rem; overflow: hidden; }
.notice00411 .list_box { display:none; width:100%; }
.notice00411 .list_box .topList { display: block; }
.notice00411 .list_box .topList dl{ width: 44%; float: left; position: relative; display: block; padding-right: 1.9rem; }
.notice00411 .list_box .topList dl.no_data { width: 100%; padding-right: 0; }
.notice00411 .list_box .topList dl dt{font-size: 0.8rem; color: #222; height: 2.4rem; line-height: 1.2rem; overflow: hidden; margin-bottom: 0.7rem; }
.notice00411 .list_box .topList dl.new dt::before{content: ''; display: inline-block; background: url('/images/sch/web/gnkkumkium-m/main/00411_notice_new.png') no-repeat center / cover; width: 0.85rem; height: 0.85rem; margin-right: 0.1rem; vertical-align: middle; } 
.notice00411 .list_box .topList dl dd p{font-size: 0.75rem; color: #444; padding-top: 0.7rem; margin: 0.7rem 0 0.6rem; border-top: 1px dotted #b9b9b9; height: 3.1rem; line-height: 1.2rem; overflow: hidden;}
.notice00411 .list_box .topList span{font-size: 0.75rem; color: #686868; font-weight: 400; }
.notice00411 .list_box ul { overflow:hidden; width: 56%; float: right; display: inline-block; padding-left: 1.4rem; border-left: 2px dotted #ccc; }
.notice00411 .list_box li:nth-of-type(n+6){display: none;}
.notice00411 .list_box li a { position:relative; display:block; line-height:1.6rem; padding:0 4.5rem 0 1rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size: 0.8rem; color:#111; }
.notice00411 .list_box li a.new::before{content: ''; display: inline-block; background: url('/images/sch/web/gnkkumkium-m/main/00411_notice_new.png') no-repeat center / cover; width: 0.85rem; height: 0.85rem; margin-right: 0.1rem; vertical-align: middle; } 
.notice00411 .list_box li a:after{content:""; position:absolute; left:0; top:0.7rem; width: 0.3rem; height: 0.3rem; background: #7c5df0;}
.notice00411 .list_box li a span { position:absolute; right:0; top:0; color:#555; font-size: 0.75rem; font-weight: 400; }
.notice00411 .list_box li.no_data{text-align:center; line-height:8rem;}
.notice00411 .btn_more{position: absolute; top: 1.4rem; right: 1.5rem; font-weight: 400; font-size: 0.8rem;}
.notice00411 .btn_more i{font-size: 1.2rem; vertical-align: sub; margin-left: 0.25rem;}
/* 게시판 : active */
.notice00411 .titTab li a:hover,
.notice00411 .titTab li a:focus,
.notice00411 .titTab li a.current { background: #7c5df0; color: #fff;}
.notice00411 .titTab li a.current { padding: 0 2.5rem 0 1.4rem; }
.notice00411 .titTab li a.current::before{opacity: 1;}
.notice00411 .list_box.on { display: block; }
.notice00411 .list_box .topList:hover dl dt{text-decoration: underline;}
.notice00411 .list_box li a:hover,
.notice00411 .list_box li a:focus { text-decoration: underline; }
.notice00411 .titTab li a,
.notice00411 .list_box li a{-webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }

/* 팝업존 */
.pop00411 { position:relative; width:100%; height:100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.pop00411 h2 {line-height: 3.75rem; padding: 0 1rem; background: #ff8d12; margin-right: 0; margin-bottom: 0;}
.pop00411 h2 span{ overflow:hidden; white-space:nowrap; color: #fff;  display: block; margin-right: 6.5rem;}
.pop00411 .control{ position: absolute; top: 0; right: 1rem; line-height: 3.75rem; color: #fff; letter-spacing: 1.2px;}
.pop00411 .control p { display: inline-block; font-size:.8rem; margin-right: 0.4rem; }
.pop00411 .control p strong{position: relative; color: #fffc00; font-size:1rem; font-weight: 600;}
.pop00411 .control a {display: inline-block; color: #fff; overflow: hidden; text-align:center; font-size:1rem; vertical-align: middle; transition: all .15s; -webkit-transition: all .15s;}
.pop00411 .control .play {display: none;}
.pop00411 .control .stop img { vertical-align:middle; margin-top:-.2rem;}
.pop00411 .pop_img { position:relative; width: 100%; height:11.25rem; overflow: hidden; text-align:center; text-align:center; background:#e9f1f8; }
.pop00411 .pop_img .slick-list {width:100%; max-width:17.5rem; margin:0 auto;}
.pop00411 .pop_img div,
.pop00411 .pop_img .item {height:100%;}
.pop00411 .pop_img .item a { display: block; height:100%; line-height:0; overflow:hidden; text-align: center;}
.pop00411 .pop_img .item img { position:relative; display:block; max-width:100%; width:auto; height:100%; margin:auto; }
/* 팝업존 : active */
.pop00411 .control a:hover { color: #fffc00; }

/* 캘린더 */
.pop_schedule00411 { position:relative; height:100%; }
.pop_schedule00411 .sche_wrap{background: #fff; height: calc(100% - 2rem); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 1.2rem; }
.pop_schedule00411 .sche_list { position:relative; background: #ff848c; line-height: 2rem; text-align: center; color: #fff; border-radius: 1rem; margin-bottom: 0.75rem;}
.pop_schedule00411 .sche_list > a{ display: inline-block; line-height: 2rem; }
.pop_schedule00411 .sche_list > a img { display: block; line-height: 2rem; vertical-align: middle; }
.pop_schedule00411 .month{font-size:1rem; display: inline-block; margin: 0 1.3rem;}
.pop_schedule00411 .month span { font-weight: 400; } 
.pop_schedule00411 .month span em { position:relative; display:inline-block; font-weight: 600; color: #fff; }
.pop_schedule00411 .lst ul { height: 5.7rem; overflow-y:auto; font-size: 0; }
.pop_schedule00411 .lst li + li { margin-top: 0.4rem; }
.pop_schedule00411 .lst li a { position:relative; padding-left: 3.4rem; display:block; line-height:1.1rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:0.75rem; font-weight:400; color:#000;}
.pop_schedule00411 .lst li a span{ position:absolute; left:0; top:0; width:2.6rem; height:1.1rem; line-height:1.1rem; border-radius:1rem; font-size: 0.75rem; text-align:center; color:#ff848c; background:#fff2f3;}
.pop_schedule00411 .lst .no_data { width: 100%; padding-left:0; line-height:5.7rem; font-size: 0.8rem; text-align:center; }
/** 캘린더 : active **/
.pop_schedule00411 .sche_list .prev:hover,
.pop_schedule00411 .sche_list .prev:focus{ transform: translateX(-4px);-webkit-transform: translateX(-4px); }
.pop_schedule00411 .sche_list .next:hover,
.pop_schedule00411 .sche_list .next:focus{ transform: translateX(4px); -webkit-transform: translateX(4px);}
.pop_schedule00411 .lst li a:hover,
.pop_schedule00411 .lst li a:focus { text-decoration:underline; }
.pop_schedule00411 a,
.pop_schedule00411 a span,
.pop_schedule00411 .sche_list > a:before,
.pop_schedule00411 .sche_list .prev,
.pop_schedule00411 .sche_list .next{-webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }

/* 식단 */
.meal_menu00411 { position:relative; height:100%; }
.meal_menu00411 .inner { position:relative; height: calc(100% - 2rem); background: #fff; padding: 1rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);} 
.meal_menu00411 .inner ul { position: relative; overflow-y:auto; height:8.6rem; z-index: 1; }
.meal_menu00411 .inner li { min-height: 8.6rem; }
.meal_menu00411 .inner li + li { margin-top:1.2rem; }
.meal_menu00411 .inner .no_data { line-height: 8.6rem; text-align:center; font-size: 0.8rem;}
.meal_menu00411 .inner dl { position:relative; height: auto; }
.meal_menu00411 .inner dt {position: relative; display:block; line-height: 2rem; background: #36c3d4; font-weight: 600; border-radius: 1rem; color: #fff; font-size: 0.9rem; text-align: center;}
.meal_menu00411 .inner dt span{font-weight: 400;}
.meal_menu00411 .inner dd {position: relative; color:#222; font-size:0.75rem; margin-top: 0.5rem; word-break:keep-all; line-height: 1.25rem; padding-right: 4rem;}
.meal_menu00411 img{position:absolute; right: 1.4rem; bottom: 1rem; max-width: 6.5rem;}
/* 식단:active */

/* 갤러리 */
.gallery00411 { position:relative; height: 100%;}
.gallery00411 .list_box{ margin-top: 0.25rem; overflow: hidden;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.gallery00411 .list_box li:nth-of-type(n+2){display: none;}
.gallery00411 .list_box li.no_data{ width:100%; display:flex; align-items:center; justify-content:center; font-size:.8rem; background: #fff; height: 10.5rem;}
.gallery00411 .list_box a {display: block; height: 10.5rem; background: #fff; overflow: hidden; font-size: 0; }
.gallery00411 .list_box a .img{ width: 14.75rem; height: 100%; display: inline-block; overflow:hidden; background:#eee; vertical-align: middle; }
.gallery00411 .list_box a .img img { position:relative; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:auto; }
.gallery00411 .list_box a div{width: calc(100% - 14.75rem); height: 100%; display: inline-block; padding: 1.5rem 1rem; vertical-align: middle;}
.gallery00411 .list_box a .tit{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 0.8rem;  color: #111;}
.gallery00411 .list_box a .txt{overflow: hidden; font-size: 0.7rem; height: 1.9rem; overflow: hidden; margin: 1rem 0 2.25rem; color: #444;}
.gallery00411 .list_box a span{font-size: 0.75rem; color: #868686; }
/** 갤러리 : active **/
.gallery00411 .list_box a:hover .tit,
.gallery00411 .list_box a:focus .tit{color: #0073d0;}
.gallery00411 .list_box a:hover .img img,
.gallery00411 .list_box a:focus .img img{transform:translate(-50%, -50%) scale(1.1) ; -webkit-transform: translate(-50%, -50%) scale(1.1);}
.gallery00411 .list_box a .tit,
.gallery00411 .list_box a .img img{transition: all 0.2s; -webkit-transition: all 0.2s;}

/* 바로가기1 */
.M_link00411 { position:relative; height:100%; }
.M_link00411 ul { font-size: 0; margin-top: -0.65rem; }
.M_link00411 li { position:relative; display:inline-block; width: calc(100% / 4); vertical-align:top; z-index:1; margin: 0.65rem 0; }
.M_link00411 li a { display:flex; flex-direction: row; position:relative; width:100%; word-break: keep-all; align-items: center; }
.M_link00411 li a .img { position: relative; display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #fff; margin: 0 auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border: 2px dotted transparent; transition: border 0.3s; -webkit-transition: border 0.3s;}
.M_link00411 li a .img img{position: relative; width: 2.6rem; height: 2.35rem; }
.M_link00411 li a .txt {position: relative; width: calc(100% - 4rem); line-height:1rem; max-height:2rem; text-align: left; overflow:hidden; color: #222; font-size: 0.8rem; padding: 0 0.7rem; word-break: break-all;}
/** 바로가기1 : active **/
.M_link00411 li a:hover .txt,
.M_link00411 li a:focus .txt { font-weight: 600;}
.M_link00411 li a:hover .img,
.M_link00411 li a:focus .img {border: 2px dotted #674ccc;}

/* 우리반 홈페이지*/
.class00411 { position: relative; height: 100%; background: #5c8ae0; padding: 0.9rem 1.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.class00411 h2 { width: 100%; color: #fff; margin-bottom: 1rem; font-size: 1rem; text-align: center; }
.class00411 h2 em { color: #ffef7f; }
.class00411 h2 span { position: relative; padding-left: 1.8rem; }
.class00411 h2 span::before { position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.35rem; background: url('/images/sch/web/gnkkumkium-m/main/00411_class_icon.png') no-repeat center / cover; content: ""; }
.class00411 .class_box { position: relative; z-index: 1; font-size: 0.8rem; color: #333; font-size: 0; }
.class00411 .class_box select { width: 49%; display: inline-block; height: 2.05rem; appearance: none; background: #fff url('/images/sch/web/gnkkumkium-m/main/00411_class_arraw.png') no-repeat center right 0.7rem;  border: 1px solid #ccc; padding: 0 1.5rem 0 0.7rem; color: #555; font-size: 0.75rem; }
.class00411 .class_box select + select { margin-left: 2%; }
.class00411 .class_box .class_btn { position: relative; display: block; width: 6.9rem; height: 2.25rem; line-height: 2.25rem; padding: 0 2rem 0 1.5rem; text-align: left; border-radius: 0.5rem; background: #004396; border: 1px solid #005fd4; color: #fff; font-size: 0.8rem; font-weight: 600; margin: 0.7rem auto 0; }
.class00411 .class_box .class_btn i { position: absolute; top: calc(50% - 0.5rem); right: 1.1rem; }

/* 배너존 */
.banner_zone{ position:relative; width:100%; background:#fff; padding:0 10px; border-top:1px solid #d2d2d2;}
.banner_zone .inner{ position:relative; width:100%; height:76px; max-width:1200px; margin:0 auto; overflow:hidden;}
.banner_zone .inner h2{ position:absolute; top:25px; left:0; font-size:18px; color:#000; font-family:'NotoM';}
.banner_zone .inner .btn{ position:absolute; left:80px; top:calc(50% - 14px); border-right:1px solid #ddd;}
.banner_zone .inner .btn a{ float:left; width:28px; height:28px; line-height:28px; text-align:center; border:1px solid #ddd; border-right:0; vertical-align:top; background:#fff;}
.banner_zone .inner ul{ height:47px; margin-top:15px; margin-left:200px; overflow:hidden;}
.banner_zone .inner ul li{ width:18%; float:left; margin-left:2%;}
.banner_zone .inner ul li a{ display:block; border:1px solid #ddd; text-align:center;}
.banner_zone .inner ul li a img{ max-width:100%; height:45px;}
.banner_zone a{ transition:all .2s; -webkit-transition:all .2s; -ms-transition:all .2s;}
/* active */
.banner_zone .inner ul li a:hover,
.banner_zone .inner ul li a:focus{ border-color:#aaa;}
.banner_zone .inner .btn a:hover,
.banner_zone .inner .btn a:focus{ background:#dfeeff;}


@media (max-width:1240px){
    .MVisual00411 .control { margin-left: 0; left: 1rem; }

    /* 갤러리 */
    .gallery00411 .list_box a .img { width: 12.75rem; }
    .gallery00411 .list_box a div { width: calc(100% - 12.75rem); }
}

@media (max-width: 1140px) {
    /* 메인비주얼 */
    .MVisual00411 .item img { width: 180%; height: auto; }

    /* 바로가기 */
    .M_link00411 ul { margin-top: 0.65rem; }
    .M_link00411 li { margin: 0; }
    .M_link00411 li a { display: block; }
    .M_link00411 li a .txt { width: 100%; margin: 0.5rem 0 1rem; text-align: center; }

    /* 우리반 홈페이지 */
    .class00411 { padding: 1.5rem; }
    .class00411 .class_box select { width: 100%; display: block; }
    .class00411 .class_box select + select { margin-top: 0.5rem; margin-left: 0; }
}

@media (max-width: 1024px) {
    
    /* 게시판 */
    .notice00411 .titTab li a { padding: 0 0.8rem; }
    .notice00411 .titTab li a::before { right: 0.8rem; }
    .notice00411 .titTab li a.current { padding: 0 2.4rem 0 0.8rem; }
    .notice00411 .tabWrap { padding: 1.5rem 1.2rem; }
    .notice00411 .list_box .topList dl { padding-right: 1.2rem; }
    .notice00411 .list_box ul { padding-left: 1.2rem; }

	/* 배너존 */
	.banner_zone h2{ display:none;}
	.banner_zone .inner .btn{ left:0;}
	.banner_zone .inner ul{ margin-left:120px;}
	.banner_zone .inner ul li{ width:23%; margin-left:2%;}
}

@media (max-width:960px){

    /* 팝업존 */    
    .pop00411 .pop_img{ height:auto; text-align:center; }
    .pop00411 .pop_img .item img { top:auto; left:auto; max-height:15rem; transform: none; -ms-transform: none;}

    /* 게시판 */
    .notice00411 .titTab ul { margin-right: 4.5rem;}
    .notice00411 .titTab li a::before { right: 0.5rem; }
    .notice00411 .titTab li a.current { padding: 0 1.7rem 0 0.5rem; }
    .notice00411 .btn_more { right: 0.8rem; }

    /* 갤러리 */
    .gallery00411 .list_box a .img { width: 14.75rem; }
    .gallery00411 .list_box a div { width: calc(100% - 14.75rem); }
}

@media (max-width:860px){
    /* 바로가기 */
    .M_link00411 li a .img { width: 3.4rem; height: 3.4rem; }
    .M_link00411 li a .img img { width: 2rem; height: auto; }
	

	/* 배너존 */
	.banner_zone .inner ul li{ width:31%}
}

@media (max-width:768px){ 
    /* 게시판 */
    .notice00411 .tabWrap { padding: 1.2rem;}
    .notice00411 .list_box .topList dl { width: 100%; float: none; padding-right: 0; }
    .notice00411 .list_box ul { width: 100%; float: none; margin-top: 1rem; padding-left: 0; border-left: none; border-top: 2px dotted #ccc; padding-top: 1rem; }

    /* 캘린더 */
    .pop_schedule00411 .sche_wrap{ padding: 1rem; }
    .pop_schedule00411 .lst li { width: calc(100% / 2); display: inline-block; }

    /* 바로가기 */
    .M_link00411 ul { margin-top: 0; }

    /* 우리반 홈페이지 */
    .class00411 .class_box select { width: 49%; display: inline-block; }
    .class00411 .class_box select + select { margin-top: 0; margin-left: 2%; }
}

@media (max-width:540px){ 	
    /* 게시판 */
    .notice00411 .titTab li { max-width: 100%; }
    .notice00411 .titTab li a { height: 2.5rem;line-height: 2.5rem; } 
    .notice00411 .btn_more { top:.75rem; }

    /*  갤러리 */
    .gallery00411 .list_box a { height: auto; }
    .gallery00411 .list_box a .img { width: 100%; height: 10.5rem; }   
    .gallery00411 .list_box a div { width: 100%; padding: 1rem; }
    .gallery00411 .list_box a .txt { margin: 0.5rem 0 0.2rem; white-space: nowrap; height: auto; text-overflow: ellipsis; }

	/* 메인비주얼 */
	.MVisual00411 .control { left: auto; right:1rem; bottom:2.2rem; }
	.MVisual00411 .control > a{ width:1.5rem; height:1.5rem; line-height:1.5rem; font-size:.8rem;}

	
	/* 배너존 */
	.banner_zone .inner ul li{ width:48%; }
}   

@media (max-width:480px){
    /* 캘린더 */
    .pop_schedule00411 .lst li { width: 100%; display: block; }

    /* 바로가기 */
    .M_link00411 li { width: calc(100% / 2); margin: 0; }
    .M_link00411 li + li { margin-top: 0.5rem; }
    .M_link00411 li:nth-child(2) { margin-top: 0; }
    .M_link00411 li a { display: flex; }
    .M_link00411 li a .txt { width: calc(100% - 3.4rem); margin: 0; text-align: left; padding: 0 0.5rem; }
}

@media (max-width:380px){

    /* 바로가기 */
    .M_link00411 li a .img { width: 2.8rem; height: 2.8rem; }
    .M_link00411 li a .img img { width: 1.6rem; }
    .M_link00411 li a .txt { width: calc(100% - 2.8rem); }

	/*배너존*/
	.banner_zone .inner ul li{ width:98%;}
}

@media (max-width:340px){
    .M_link00411 li { width: calc(100% / 3); }
    .M_link00411 li:nth-child(3) { margin-top: 0; }
    .M_link00411 li a { display: block; }
    .M_link00411 li a .txt { width: 100%; text-align: center; margin: 0.5rem 0 0; }

    /* 학급홈페이지 */
    .class00411 h2 span {font-size: 0.85rem;}
}
@media (max-width:270px){
    /* 학급홈페이지 */
    .class00411 h2 span{padding-left: 0;}
    .class00411 h2 span::before{display: none;}
}
