@charset "utf-8";
@import url("./default.css?230817"); 

body{background:#fff;}

#container {width:1300px; margin:0px auto 20px; }
#container:after { content:""; display:block; clear:both; }

#layerBell{width:758px;height:426px;position:fixed; left:calc(50% - 339px); top:calc(50% - 213px);  padding:0px 30px 0px; z-index:999; background:#fff;  box-sizing:border-box; -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);}
#layerBell .lb_titlebox { text-align:center; position:relative; width:100%; height:110px; }
#layerBell .lb_titlebox:before { content:""; display:block; width:178px; height:192px; background:url(../images/layer/layer_bg.png) center top no-repeat; position:absolute; right:0; bottom:0; }
#layerBell .lb_titlebox h3 { font-size:28px; color:#333; font-weight:500; padding:38px 0 6px; }
#layerBell .lb_titlebox p { font-size:14px; color:#666666; }
#layerBell.bellview { display:none; }
#layerBell .close{position:absolute;bottom:5px;right:5px;}
#layerBell ul { height:240px;  overflow-y:scroll; position:relative; box-sizing:border-box; padding:20px; background:#f5f5f5; }
#layerBell ul:before { content:""; display:block; width:1px; height:100%; background:#ccc; position:absolute; left:18px; top:0px; }
#layerBell ul li { line-height:50px; font-size:15px; color:#333; margin-bottom:10px;  }
#layerBell ul li a { display:block; width:100%; height:50px; line-height:50px; position:relative; padding:0 85px 0 55px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#333; box-sizing:border-box; }
#layerBell ul li a span.Blink { display:block; position:absolute; right:15px; top:calc(50% - 13px); width:55px; height:25px; line-height:25px; background:#999; font-size:12px; color:#fff; text-align:center;  transition:all 0.4s; }

#layerBell ul li a:before { content:""; display:block; width:38px; height:38px; position:absolute; left:0; top:6px; background:#eee url(../../../images/member/cal_off.png) 11px center no-repeat; border-radius:50%; transition:all 0.4s; }
#layerBell ul li a:hover { font-weight:500; }
#layerBell ul li a:hover:before { background:#01b093 url(../../../images/member/cal_on.png) 11px center no-repeat; transition:all 0.4s; }

#layerBell ul li a:hover span.Blink { background:#444;  transition:all 0.4s;}
#layerBell .today_close_box { width:100%; position:relative; background:#f5f5f5; margin-top:12px; text-align:right; }
#layerBell .today_close_box span { display:block; width:calc(100% - 172px); cursor:pointer; line-height:45px; font-weight:500; color:#4e4e4e; box-sizing:border-box; padding:0 44px 0 0; }
#layerBell .today_close_box span:before { content:""; display:inline-block; background:url(../images/layer/new_chk_on.png) left top no-repeat; width:18px; height:17px; position:relative; margin:0 12px 0 0; top:3px; }
#layerBell .bell_close {position:absolute; right:0; bottom:0; }
#layerBell .bell_close a { display:block; vertical-align:top; text-align:center; width:172px; height:45px; line-height:45px; text-align:center; font-weight:500; color:#4e4e4e; background:#fae86c;  }
#layerBell .bell_close i { color:#fff !important; }

#layerBell table.cStyle {border-top:2px solid #93a9d7; width:100%; border-left:1px solid #dddddd; font-size:13px; text-align:center; border-collapse:collapse; word-break:break-all; margin:0px 0; background:#fff;}
#layerBell table.cStyle th {background:#f4f6fa; color:#444; line-height:24px; padding:6px 5px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd;}
#layerBell table.cStyle td {color:#555; padding:6px 5px; line-height:20px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; font-size:14px; font-weight:500; }
#layerBell .tablecont {  position:relative;  box-sizing:border-box; padding:20px; background:#f5f5f5;}
#layerBell .layer_table {  overflow-y:scroll; position:relative; box-sizing:border-box; height:203px;}
#layerBell table.cStyle .Blick { display:block; width:68px; height:28px; margin:0 auto; line-height:28px; background:#d95f5f; font-size:13px; color:#fff; text-align:center;  transition:all 0.4s; font-weight:500; border-radius:3px; }
#layerBell table.cStyle .Blick:hover { background:#c31414;  transition:all 0.4s;}
#layerBell .lb_chk { display:inline-block; height:28px; margin:0 auto; line-height:28px; background:#5d86e0; font-size:13px; color:#fff; text-align:center;  transition:all 0.4s; font-weight:500; border-radius:3px; padding:0 10px;}
#layerBell .bell_text { }


/*박스 공통*/
.col_box{float:left;  position:relative; width:30%; box-sizing:border-box; background:#fff;} /* 340 / 1100 = */



/*메인비주얼*/
.visual_wrap { position:relative; max-height:538px; overflow:hidden; }
.visual_wrap:after { content:""; display:block; clear:both; }
#main_visual { width:100%; height:400px;  }
#visualbox .vi_btbox { position:absolute; text-align:center; left:0; bottom:100px; width:100%; background:rgba(0,0,0,0.5); }
#visualbox .vi_btbox li { display:inline-block; color:#fff; }
#visualbox .camera_pag_ul { text-align:center; }
#visualbox .camera_pag_ul li { float:none !important; display:inline-block; vertical-align:top; }

.visual_wrap .slick-dots { text-align:center; height:23px; position:absolute; left:0; bottom:105px; width:100%; }
.visual_wrap .slick-dots li { display:inline-block; vertical-align:top; width:23px; height:23px; box-sizing:border-box; border:1px solid transparent; border-radius:50%; box-sizing:border-box; padding:6px; cursor:pointer; margin:0 6px; }
.visual_wrap .slick-dots li.slick-active { border-color:#395edd; }
.visual_wrap .slick-dots li p { text-indent:-999999px; width:100%; height:9px; border-radius:50%; background:#395edd; }


.visual_txt { position:absolute; right:0; top:168px; z-index:1; text-align:right; width:100%; letter-spacing:-1px;  }
.vitxt_box { display:inline-block; position:relative; margin:0 432px 0 0; opacity:0; }
.vitxt_box.effect { opacity:1; }

.visual01 .vitxt_box.effect,
.visual04 .vitxt_box.effect,
.visual07 .vitxt_box.effect { -webkit-animation: slide-in-elliptic-left-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-left-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

.visual02 .vitxt_box.effect,
.visual05 .vitxt_box.effect,
.visual08 .vitxt_box.effect {-webkit-animation: bounce-in-left 1.1s both;
	        animation: bounce-in-left 1.1s both;
 }


.visual03 .vitxt_box.effect,
.visual06 .vitxt_box.effect,
.visual09 .vitxt_box.effect {-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both; }


.vitxt_box:before { content:""; display:block; width:824px; height:633px; background:url(../images/main/txt_bg.png) left top no-repeat; position:absolute; right:0; top:-190px; right:-210px; }
.visual01 .vitxt_box.effect:before {  }
.vitxt_box .vtxt { position:relative; z-index:1; }

.visual01 .vitxt_box .vtxt.effect {   }
			
.vitxt_box .ef_pic { position:absolute; right:-133px; bottom:-98px; opacity:0; }
.vitxt_box .ef_pic.effect {-webkit-animation: slide-in-right 1.5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 1.5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity:1; }

@-webkit-keyframes slide-in-elliptic-left-fwd {
  0% {
    -webkit-transform: translateX(-800px) rotateY(30deg) scale(0);
            transform: translateX(-800px) rotateY(30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 1800px 50%;
            transform-origin: 1800px 50%;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-left-fwd {
  0% {
    -webkit-transform: translateX(-800px) rotateY(30deg) scale(0);
            transform: translateX(-800px) rotateY(30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 1800px 50%;
            transform-origin: 1800px 50%;
    opacity: 1;
  }
}

@-webkit-keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/*공지사항 type1*/
.noticeGroup{ width:750px; height:363px; margin:0px 0 0;}
.noticeGroup .noti_title { letter-spacing:-1px; position:absolute; left:0; top:0px; color:#222; font-size:25px; font-family: "GmarketSansBold"; font-weight:700; line-height:50px; }
.noticeGroup h3 {float:left; height:50px; font-size:20px; line-height:50px; position:relative; letter-spacing:-0.5px; margin:0 0 0 0px; font-weight:normal; padding:0 21px; }
.noticeGroup h3:before { content:""; display:block; width:1px; height:16px; background:#aaaaaa; position:absolute; left:0; top:18px; }

.noticeGroup h3.btn1 { margin-left:200px; }
.noticeGroup h3.btn1:before { display:none; }
.noticeGroup h3 a {  color:#222;  display:block; position:relative;}
.noticeGroup h3 a:before { content:""; display:block; width:0%; transition:all 0.4s; height:15px; background:#c8ebff; position:absolute; left:0; bottom:11px; }
.noticeGroup h3 a span { display:block; position:relative; z-index:1; }

.noticeGroup .on_check .tabcontent{display:block;}
.noticeGroup .on_check .btn a{ font-weight:bold;  }
.noticeGroup .on_check .btn a:before { width:100%; }
.noticeGroup .on_check .btn a:after { content:""; display:block; width:6px; height:6px; background:#4da8fd; border-radius:50%; position:absolute; right:-10px; top:11px; }

.noticeGroup div.tabcontent {position:absolute;left:0; top:68px; width:100%; display:none;}
.noticeGroup div.tabcontent ul { }
.noticeGroup div.tabcontent ul li { width:100%; }
.noticeGroup div.tabcontent ul li img { display:none !important; }

.noticeGroup div.tabcontent ul li:first-child { height:127px; box-sizing:border-box; position:relative; margin-bottom:11px; }
.noticeGroup div.tabcontent ul li:first-child dl { padding:12px 20px 0 141px; }
.noticeGroup div.tabcontent ul li:first-child dl dt { line-height:22px; height:22px; width:100%; font-size:18px; color:#222; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; margin-bottom:5px;}
.noticeGroup div.tabcontent ul li:first-child dl dd { color:#999; line-height:24px; height:72px; width:100%; overflow:hidden; font-size:16px; /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; }
.noticeGroup div.tabcontent ul li:first-child .date { position:absolute; left:0; top:0; width:111px; height:127px; box-sizing:border-box; border-radius:15px; border:1px solid #ddd; text-align:center; font-size:18px; color:#888; letter-spacing:-1px; padding:70px 0 0 0; }
.noticeGroup div.tabcontent ul li:first-child .date .nday { position:absolute; left:0; top:37px; width:100%; color:#14a354; font-family: "GmarketSansBold"; font-size:27px; }
.noticeGroup div.tabcontent ul li:first-child .date .nday span { display:none; }

.noticeGroup div.tabcontent ul li:first-child:hover dl dd { font-weight:500; }

.noticeGroup div.tabcontent ul li:not(:first-child) { height:52px; box-sizing:border-box; padding:0 0 0 0px; margin-left:21px; width:calc(100% - 21px); position:relative; border-bottom:1px dashed #ddd; }
.noticeGroup div.tabcontent ul li:last-child { border-bottom:0 none; }
.noticeGroup div.tabcontent ul li:not(:first-child):before { content:""; display:block; width:4px; height:4px; position:absolute; left:-21px; top:25px; background:#333333; }

.noticeGroup div.tabcontent ul li:not(:first-child) dl { float:left; width:calc(100% - 135px); }
.noticeGroup div.tabcontent ul li:not(:first-child) dt { position:relative; padding:0 10px 0 0px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:51px; font-size:17px; color:#444; font-weight:500; }
.noticeGroup div.tabcontent ul li:not(:first-child) dd { display:none; }
.noticeGroup div.tabcontent ul li:not(:first-child):hover dt { font-weight:bold; color:#333; }
.noticeGroup div.tabcontent ul li:not(:first-child) .date { float:right; width:118px; text-align:left; line-height:51px; font-size:16px; color:#555;}


/*바로가기*/
.quickbox{ width:530px; height:376px; margin:0px 0 0; float:right; }
.quickbox h3 { color:#222; font-size:25px; font-family: "GmarketSansBold";  line-height:50px; text-transform:uppercase; letter-spacing:-1px; }
.quickbox .main_btn { position:absolute; right:0; top:8px; }
.quickbox .main_btn:after { content:""; display:block; clear:both; }
.quickbox .main_btn li { display:inline-block; vertical-align:top; margin-right:10px; }
.quickbox .main_btn li a { display:block; width:38px; height:38px; text-indent:-99999px; border-radius:50%; box-sizing:border-box; border:1px solid #acacac; }
.quickbox .main_btn li.qbtn01 a { background:#fff url(../images/main/q_bt1.png) center center no-repeat; }
.quickbox .main_btn li.qbtn03 a { background:#fff url(../images/main/q_bt3.png) center center no-repeat; }
.quickbox .main_btn li.qbtn02 a { background:#fff url(../images/main/q_stop.png) center center no-repeat; }
.quickbox .main_btn li.qbtn02.q_stop a { background:#fff url(../images/main/q_play.png) center center no-repeat; }

.quickbox #qcenter1 { width:100%; height:308px; margin-top:18px; }
.quickbox #qcenter1 .slick-slide { border:0 none; }
.quickbox #qcenter1 .slick-slide div { float:left; margin:0 14px 14px 0; width:167px; height:147px; text-align:center; }
.quickbox #qcenter1 .slick-slide div:nth-child(3n+0) { margin:0 0 14px 0; }
.quickbox #qcenter1 .slick-slide div:nth-child(3n+1) { clear:both; }
.quickbox #qcenter1 .slick-slide div a { display:block; width:100%; height:147px; box-sizing:border-box; border:1px solid #ddd; border-radius:14px; overflow:hidden; background:#fff; font-size:15px; color:#444; letter-spacing:-0.5px;line-height: 19px;}
.quickbox #qcenter1 .slick-slide div a span.ic { display:block; width:100%; height:96px; }
.quickbox #qcenter1 .slick-slide div.qi1 a span.ic { background:url(../images/main/q_ic1.png) center 33px no-repeat; }
.quickbox #qcenter1 .slick-slide div.qi2 a span.ic { background:url(../images/main/q_ic2.png) center 44px no-repeat; }
.quickbox #qcenter1 .slick-slide div.qi3 a span.ic { background:url(../images/main/q_ic3.png) center 37px no-repeat; }
.quickbox #qcenter1 .slick-slide div.qi4 a span.ic { background:url(../images/main/q_ic4.png) center 32px no-repeat; }
.quickbox #qcenter1 .slick-slide div.qi5 a span.ic { background:url(../images/main/q_ic5.png) center 36px no-repeat; }
.quickbox #qcenter1 .slick-slide div.qi6 a span.ic { background:url(../images/main/q_ic6.png) center 38px no-repeat; }
.quickbox #qcenter1 .slick-slide div.qi7 a span.ic { background:url(../images/main/q_ic7.png) center 29px no-repeat; height:86px; }
.quickbox #qcenter1 .slick-slide div a:hover { font-weight:500; }

.quickbox #qcenter1 .slick-slide div a:hover span.ic { -webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both; }

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

#main_cont2 { background: rgb(241,253,248);
background: linear-gradient(90deg, rgba(241,253,248,1) 0%, rgba(232,242,252,1) 100%); margin:28px 0; min-height:452px; padding:36px 0 0; box-sizing:border-box; }
#main_cont2 .default_layout:before { content:""; display:block; width:576px; height:31px; background:url(../images/main/gra_txt.png) left top no-repeat; position:absolute; left:-285px; top:326px; }

/*학생학부모바로가기*/
.main_student { position:relative; width:420px; height:304px; background:none; }
.main_student h3 { color:#222; font-size:25px; font-family: "GmarketSansBold";  line-height:60px; text-transform:uppercase; letter-spacing:-1px; }
.main_student dl { position:relative; padding:0 0 0 130px; }
.main_student dt { position:absolute; left:0; top:0; }
.main_student dt.bt1 { top:17px; }
.main_student dt.bt2 { top:71px; }
.main_student dt a {display:block; color:#333333; font-size:17px; height:49px; line-height:49px; box-sizing:border-box; border-bottom:1px solid #d4eae8; width:165px; padding:0 48px 0 25px; border-radius:0; transition:all 0.4s; position:relative;}
.main_student dt a:hover { font-weight:500; }

.main_student dt.on { z-index:2; }
.main_student dt.on a{ border:0 none; background:#5168b6; border-radius:15px; font-size:18px; color:#fff; font-weight:bold;  }
.main_student dt.on a:before { content:""; display:block; width:32px; height:32px; border-radius:50%; background:#fff url(../images/main/tep_arrow.png) center center no-repeat; position:absolute; right:9px; top:9px; }

.main_student dd {  width:100%; left:0%; display:none;  position:relative; background:#fff; height:244px; border-radius:15px; padding:24px 20px 0 55px; box-sizing:border-box; box-shadow:1px 2px 4px rgba(0,0,0,0.07); z-index:1; }
.main_student dd.first { display:block;}

.main_student dd ul {margin:0 auto; width:100%; max-height:198px; overflow:hidden; overflow-y:auto; box-sizing:border-box; }
.main_student dd ul li{  }
.main_student dd ul li a{ display:block; width:100%; height:33px; line-height:33px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; color:#444; padding:0 0 0 13px; box-sizing:border-box; position:relative; }
.main_student dd ul li a:hover{ font-weight:500; }
.main_student dd ul li a:before { content:""; display:block; width:4px; height:4px; position:absolute; left:0px; top:15px; background:#333333; }

/*갤러리 img는 absolute로 날리고 썸네일을 background로 살리면 깨끗하게 쓸수 있습니다 common.js파일에 갤러리img추출 부분을 소스에 맞게 수정해주면됨*/
.galleryGroup{ float:right;  width:860px; background:none; height:auto;  }
.galleryGroup h3 { color:#222; font-size:25px; font-family: "GmarketSansBold";  line-height:60px; text-transform:uppercase; letter-spacing:-1px; }
.galleryGroup h3 a { color:#222; }
.galleryGroup .main_btn { position:absolute; right:0; top:8px; }
.galleryGroup .main_btn:after { content:""; display:block; clear:both; }
.galleryGroup .main_btn li { display:inline-block; vertical-align:top; margin-right:10px; }
.galleryGroup .main_btn li a { display:block; width:38px; height:38px; text-indent:-99999px; border-radius:50%; box-sizing:border-box; border:1px solid #acacac; }
.galleryGroup .main_btn li.gbtn01 a { background:url(../images/main/q_bt1.png) center center no-repeat; }
.galleryGroup .main_btn li.gbtn03 a { background:url(../images/main/q_bt3.png) center center no-repeat; }
.galleryGroup .main_btn li.gbtn02 a { background:url(../images/main/q_stop.png) center center no-repeat; }
.galleryGroup .main_btn li.gbtn02.g_stop a { background:url(../images/main/q_play.png) center center no-repeat; }

.galleryGroup #gallery_scroll { width:100%; height:317px; margin:0px 0 0; }
.galleryGroup .slick-slide { width:273px; height:317px; margin:0 20px 0 0; box-sizing:border-box; padding:0px 0 0 0; }
.galleryGroup .slick-slide .gitem a { display:block; position:relative; height:317px; width:100%; }
.galleryGroup .slick-slide .gitem .pic { width:100%; height:244px; border-radius:20px; box-sizing:border-box; overflow:hidden; position:relative; background-size:cover !important; margin-bottom:10px; }
.galleryGroup .slick-slide .gitem .pic:before { content:""; display:block; width:0%; height:100%; transition:all 0.4s;  background:rgba(0,0,0,0.6); position:absolute; left:0; top:0; }
.galleryGroup .slick-slide .gitem .pic:after { content:""; display:block; width:43px; height:47px; background:url(../images/main/g_more.png) left top no-repeat; position:absolute; left:-50px; top:calc(50% - 23.5px); transition:all 0.5s; }
.galleryGroup .slick-slide .gitem a:hover .pic:after { left:calc(50% - 21.5px); }
.galleryGroup .slick-slide .gitem a:hover .pic:before { width:100%;  }
.galleryGroup .slick-slide .gitem .pic img { position:absolute; left:-999999px; top:0; }

.galleryGroup .slick-slide .gitem .g_sub { height:30px; line-height:30px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; color:#222; font-size:18px; letter-spacing:-0.5px; }
.galleryGroup .slick-slide .gitem a:hover .g_sub { }
.galleryGroup .slick-slide .gitem .g_date { font-weight:500; color:#888; font-size:15px; letter-spacing:-0.5px; }


/*학습자료실, 급식박스*/
.linkbox { width:365px; overflow:hidden; margin-right:20px; }
.linkbox a { display:block; width:100%; height:259px; border-radius:15px; overflow:hidden; box-sizing:border-box; padding:50px 35px 0 35px; }
.docbox a { background:#a39996 url(../images/main/link_bg1.png) right bottom no-repeat; }
.food a { background:#6c80a3 url(../images/main/link_bg2.png) no-repeat; background-position:right 8px bottom; }

.linkbox a dl { line-height:30px; color:#fff; letter-spacing:-0.5px;}
.linkbox a dt {  font-size:25px;  font-family: "GmarketSansMedium"; }
.linkbox a dd { font-size:15px; margin:2px 0 16px;  }
.linkbox a p { font-size:15px; font-family: "GmarketSansMedium"; color:#fff;}
.linkbox a p span { display:inline-block; vertical-align:top; width:6px; height:10px; background:url(../images/main/more.png) left top no-repeat; margin:0 0 0 15px; position:relative; top:7px; transition:all 0.4s; }
.linkbox a:hover p span { margin-left:20px; }


/*팝업*/
.popupZone {overflow:hidden; position:relative; width:529px; height:auto; border-radius:15px; background:#45546b; float:right; padding:18px 15px 19px 40px;}
.popupZone h3 { font-size:22px; line-height:34px; color:#fff; font-family: "GmarketSansBold"; text-transform:uppercase; margin-top:29px; float:left; }
.popupZone h3 span { display:block; }
.popupZone .main_btn { position:absolute; left:39px; top:127px; }
.popupZone .main_btn:after { content:""; display:block; clear:both; }
.popupZone .main_btn li { float:left; display:block; margin:0 6px 6px 0; }
.popupZone .main_btn li a { display:block; width:35px; height:35px; text-indent:-99999px; border-radius:50%; box-sizing:border-box;  }
.popupZone .main_btn li.pbtn02 { clear:both; }
.popupZone .main_btn li.pbtn01 a { background:#fff url(../images/main/q_bt1.png) center center no-repeat; }
.popupZone .main_btn li.pbtn03 a { background:#fff url(../images/main/q_bt3.png) center center no-repeat; }
.popupZone .main_btn li.pbtn02 a { background:#fff url(../images/main/q_stop.png) center center no-repeat; }
.popupZone .main_btn li.pbtn02.p_play a { background:#fff url(../images/main/q_play.png) center center no-repeat; }
.popupZone .main_btn li.more a { background:#fff url(../images/main/more1.png) center center no-repeat; }

.popupZone #popup_scroll { float:right; width:314px; height:222px; background:#fff url(../images/main/pop_bg.png) no-repeat; background-position:right 24px bottom 15px; border-radius:12px; padding:28px 42px 0 35px; box-sizing:border-box; position:relative; }
.popupZone #popup_scroll:before { content:""; display:block; width:0; height:0; border-left:14px solid #45546b; border-top:8px solid transparent; border-bottom:9px solid transparent; position:absolute; left:0; top:calc(50% - 8.5px); }
.popupZone #popup_scroll .slick-slide { height:33px; }
.popupZone #popup_scroll .slick-slide a{ display:block; width:100%; height:33px; line-height:33px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; color:#444; padding:0 0 0 13px; box-sizing:border-box; position:relative; }
.popupZone #popup_scroll .slick-slide a:hover{ font-weight:500; }
.popupZone #popup_scroll .slick-slide a:before { content:""; display:block; width:4px; height:4px; position:absolute; left:0px; top:15px; background:#333333; }


/*배너모음*/
#banner {margin:21px 0 0 0; height:65px;  float:left; position:relative; width:100%; box-sizing:border-box;  }
#banner .btbox { position:absolute; right:0; top:0px; }
#banner .btbox:after { content:""; display:block; clear:both; }
#banner .main_btn { float:left; box-sizing:border-box; width:135px; text-align:center; height:65px; border:1px solid #d2d2d4; background:#fcfafd; }
#banner .main_btn li { display:inline-block; vertical-align:middle; margin-top:24px; }
#banner .main_btn li.bbtn02 { margin:24px 23px 0; }
#banner .main_btn li a { text-indent:-99999px; display:block;  box-sizing:border-box; width:9px; height:16px;  }
#banner .main_btn li.bbtn01 a { background:url(../images/main/b_bt1.png) center center no-repeat; }
#banner .main_btn li.bbtn02 a { background:url(../images/main/b_bt2.png) center center no-repeat; width:8px; }
#banner .main_btn li.bbtn03 a { background:url(../images/main/b_bt3.png) center center no-repeat; }

#banner .btbox .more { float:left; }
#banner .btbox .more a { display:block; width:58px; height:65px; border:1px solid #d2d2d4; border-left:0 none; text-indent:-99999px; background:#fcfafd url(../images/main/b_more.png) center center no-repeat; box-sizing:border-box;} 

div#banner_scroll {position:absolute;left:0px; top:0px; width:1085px; height:65px;overflow:hidden;  }
div#banner_scroll #banner_content { width:100%;}
div#banner_scroll #banner_content .slick-slide { margin:0 9px 0px 0; width:208px; }
div#banner_scroll #banner_content .banitem {float:left; width:100%; height:65px; box-sizing:border-box; border:1px #d2d2d4 solid;}
div#banner_scroll #banner_content .banitem img {float:left;width:100%;height:63px; }









/*/////////////////////////////////////////////////////////////////////////////////반응형/////////////////////////////////////////////////////////////////////////////////*/

@media all and (max-width:1024px) {

/*레이어 알람*/
#layerBell{width:94%; position:fixed; left:3%; padding:0 3%; }
#layerBell .lb_titlebox:before { display:none; }
#layerBell table.cStyle .Blick { display:inline-block; padding:0 5px; height:auto; line-height:24px; width:auto; }
#layerBell .lb_chk { display:inline-block; height:auto; margin:0 auto; line-height:24px;  padding:0 5px;}
#layerBell .today_close_box { width:100%; position:relative; background:#f5f5f5; margin-top:12px; text-align:center; }
#layerBell .today_close_box span { display:block; box-sizing:border-box; padding:0 5px 0 5px; width:calc(100% - 82px); }
#layerBell .today_close_box span:before {  margin:0 8px 0 0; top:3px; }
#layerBell .bell_close {position:absolute; right:0; bottom:0; }
#layerBell .bell_close a { display:block; vertical-align:top; text-align:center; width:82px; height:45px; line-height:45px; text-align:center; font-weight:500; color:#4e4e4e; background:#fae86c;  }
#layerBell .bell_close i { color:#fff !important; }


#container {width:100%; margin:20px auto 0; min-height:100%;}

/*메인비주얼*/
.visual_wrap { position:relative; max-height:536px; overflow:hidden; }
.visual_wrap:after { content:""; display:block; clear:both; }
#main_visual { width:100%; height:auto;  }

.visual_wrap .slick-slide { text-align:center; }
.visual_wrap .slick-slide img { position:relative; width:100%; display:block; margin:0 auto; }
.visual_wrap .slick-dots { text-align:center; height:23px; position:static; left:0; bottom:0px; width:100%; }


.visual_txt { position:absolute; top:50%; transform:translateY(-50%); left:0; z-index:1; text-align:left; width:250px; letter-spacing:-1px;  }
.vitxt_box { background:url(../images/main/txt_bg.png) left center no-repeat;  background-size:cover !important; margin:0 0 0 20px; }
.vitxt_box:before { display:none; }

.visual_txt img { height:auto !important; }

.vitxt_box .vtxt { position:relative; z-index:1; }

.visual01 .vitxt_box .vtxt.effect { -webkit-animation:none; }
			
.vitxt_box .ef_pic { display:none; }
.vitxt_box .ef_pic.effect {-webkit-animation:none; }

/*박스 공통*/
.col_box{float:left; clear:both;  width:94%; margin:0 3% 20px 3% !important;}

/*공지사항 type1*/
.noticeGroup{ height:413px; margin:15px 3% 20px 3% !important;}
.noticeGroup .noti_title { letter-spacing:-1px; position:static;  font-size:20px; line-height:40px; }
.noticeGroup h3 {float:left; width:33.3%; margin:0 0 0 0; box-sizing:border-box; padding:0 10px 0; text-align:center; font-size:18px; }

.noticeGroup h3.btn1 { margin-left:0px; }
.noticeGroup h3.btn3 { width:33.4%; }
.noticeGroup h3.btn1:before { display:none; }

.noticeGroup .on_check .btn a:after { display:none; }

.noticeGroup div.tabcontent {position:absolute;left:0; top:108px; width:100%; display:none;}

.noticeGroup div.tabcontent ul li:first-child { height:127px; box-sizing:border-box; position:relative; margin-bottom:11px; }
.noticeGroup div.tabcontent ul li:first-child dl { padding:12px 20px 0 131px; }


.noticeGroup div.tabcontent ul li:not(:first-child) dl { float:left; width:calc(100% - 90px); }
.noticeGroup div.tabcontent ul li:not(:first-child) dt {   font-size:16px; color:#444; font-weight:500; }
.noticeGroup div.tabcontent ul li:not(:first-child) dd { display:none; }
.noticeGroup div.tabcontent ul li:not(:first-child) .date { float:right; width:88px; text-align:left; line-height:51px; font-size:15px; color:#555;}

/*바로가기*/
.quickbox{ height:auto; }
.quickbox h3 {font-size:20px; line-height:40px;  }
.quickbox .main_btn { position:absolute; right:0; top:8px; }
.quickbox .main_btn li { display:inline-block; vertical-align:top; margin-right:5px; }

.quickbox #qcenter1 { width:100%; height:308px; margin-top:18px; }
.quickbox #qcenter1 .slick-slide { border:0 none; }
.quickbox #qcenter1 .slick-slide div { float:left; margin:0 2% 14px 0; width:32%; height:147px; text-align:center; }
.quickbox #qcenter1 .slick-slide div a { font-size:14px; letter-spacing:-1px; }
.quickbox #qcenter1 .slick-slide div:nth-child(3n+0) { margin:0 0 14px 0; }

#main_cont2 { margin-top:0; }
#main_cont2 .default_layout:before { display:none; }

/*갤러리*/
.galleryGroup { width:97%; margin:0 0 20px 3% !important; }
.galleryGroup .main_btn { position:absolute; right:3%; top:8px; }
.galleryGroup .main_btn li { margin-right:3px; }
.galleryGroup #gallery_scroll { width:100%; height:auto; margin:0px 0 0; }

/*학습자료실, 급식박스*/
.linkbox { width:46%; overflow:hidden; margin-right:0; }
.docbox { margin:0 0 20px 3% !important; }
.food { clear:none; float:right; margin:0 3% 20px 0 !important; }
.linkbox a { display:block;  padding:50px 20px 0 20px; }
.docbox a {  }
.food a {  }

/*팝업*/
.popupZone {overflow:hidden; position:relative; width:94%; height:auto; padding:18px 15px 19px 15px;}
.popupZone h3 { font-size:20px; margin-top:0px; float:left; }
.popupZone h3 span { display:inline-block; }
.popupZone .main_btn { position:static; left:inherit; float:right; margin:0px 0 0; }
.popupZone .main_btn li { float:left; display:block; margin:0 6px 6px 0; }
.popupZone .main_btn li a {}
.popupZone .main_btn li.pbtn02 { clear:none; }

.popupZone #popup_scroll { float:right; width:100%;  padding:28px 20px 0 20px; margin-top:15px; }
.popupZone #popup_scroll:before { display:none; }



/*배너모음*/
#banner {margin:0 0 0; height:auto;  background:#fff; float:left; position:relative; width:100%; box-sizing:border-box; padding:0px 0 0px;  }
#banner .btbox { position:static; }
#banner .btbox:after { content:""; display:block; clear:both; }
#banner .main_btn { float:left; box-sizing:border-box; width:auto; text-align:center; height:45px; margin-left:3%; }
#banner .main_btn li { display:inline-block; vertical-align:middle; margin-top:0px; height:43px; width:40px; }
#banner .main_btn li.bbtn02 { margin:0px 0px 0 !important; }
#banner .main_btn li a { width:100% !important; height:43px; }
#banner .btbox .more { float:left; }
#banner .btbox .more a { display:block; width:48px; height:45px; } 

div#banner_scroll {position:relative; left:inherit; top:inherit; width:94%;height:83px;overflow:hidden; margin:20px 3% 0; }
div#banner_scroll ul#banner_content {position:absolute;left:0;top:0;width:100%;}
div#banner_scroll ul#banner_content li {float:left; margin:0 0 0px 3%; width:22%; height:83px; }


}

@media all and (max-width:740px) {

/*배너모음*/
div#banner_scroll ul#banner_content li {float:left; margin:0 0 0px 3%; width:30%;  }

}

@media all and (max-width:719px) {

.galleryGroup { margin:0 0 0 3% !important; }
.galleryGroup .slick-slide { margin:0 20px 20px 0; }	

}

@media all and (max-width:580px) {
	
/*학습자료실, 급식박스*/
.linkbox { width:94%;  }
.docbox { margin:0 3% 20px 3% !important; }
.food { clear:none; float:right; margin:0 3% 20px 3% !important; }


}

@media all and (max-width:550px) {

.visual_txt { width:200px; letter-spacing:-1px;  }


/*배너모음*/
div#banner_scroll ul#banner_content li {float:left; margin:0 0 0px 3%; width:47%; }

}

@media all and (max-width:500px) {
	
.quickbox #qcenter1 { width:100%; height:auto; margin-top:18px; }
.quickbox #qcenter1 .slick-slide { border:0 none; }
.quickbox #qcenter1 .slick-slide div { float:left; margin:0 0 14px 0 !important; width:49%; height:147px; text-align:center; clear:none !important; }
.quickbox #qcenter1 .slick-slide div:nth-child(odd) { margin:0 2% 14px 0 !important; }

}

@media all and (max-width:420px) {
#layerBell ul:before { display:none; }
#layerBell ul li a {  padding:0 85px 0 0px;  }
#layerBell ul li a:before { display:none !important; }	
	
.visual_txt { width:150px; letter-spacing:-1px;  }
	
	
}

@media all and (max-width:360px) {
.noticeGroup div.tabcontent ul li:first-child .date { position:absolute; left:0; top:0; width:81px; height:127px; padding:70px 0 0 0; }
.noticeGroup div.tabcontent ul li:first-child dl { padding:12px 20px 0 101px; }

#main_cont2 {  padding:15px 0 0; box-sizing:border-box; }

/*학생학부모바로가기*/
.main_student { height:auto; }
.main_student h3 { color:#222; font-size:20px; font-family: "GmarketSansBold";  line-height:40px; }
.main_student dl { position:relative; padding:0 0 0 90px; }
.main_student dt a { width:125px; padding:0 48px 0 15px; }
.main_student dt a:hover { font-weight:500; }


}