@charset "utf-8";

/* 레이아웃 공통 */
html, body{position:relative; width:100%;}
body{color:#707070; font-size:16px; line-height:1.6; font-family:'NanumSquareRound', 'Noto Sans KR', sans-serif; word-break:break-all;letter-spacing:-0.6px;}
main{display:block;}
.confirmIframe body{overflow:hidden;}
#progressScroll{display:none;}
.page-wrap{overflow:hidden;}

/* 본문바로가기 */
.skipnav{position:absolute;z-index:2999;top:-100px;width:100%;padding:0;list-style:none;font-size:14px;}
.skipnav li{position:relative;top:0;left:0;width:100%}
.skipnav li a{display:block;position:absolute;top:0;width:100%;padding:15px 0;background:#000;color:#fff;text-align:center;text-decoration:none}
.skipnav li a:focus,.skipnav li a:active{top:100px}

/* slick 플러그인 */
.slick-slider .slick-list{display:block; overflow-x:hidden; overflow-y:hidden; position:relative}
.slick-slider .slick-list.dragging{cursor:pointer}
.slick-slider .slick-list .slick-track{display:block; position:relative; top:0; left:0}
.slick-slider .slick-list .slick-track:before, .slick-slider .slick-list .slick-track:after{display:table; content:''}
.slick-slider .slick-list .slick-track:after{clear:both}
.slick-slider .slick-list.slick-loading .slick-track{visibility:hidden}
.slick-slider .slick-list .slick-track .slick-slide{display:none; float:left}
.slick-slider[dir='rtl'] .slick-list .slick-track .slick-slide{float:right}
.slick-slider .slick-list .slick-track .slick-slide img{display:block;width:100%;}
.slick-slider .slick-list .slick-track .slick-slide.slick-loading img{display:none}
.slick-slider.slick-initialized .slick-list .slick-track .slick-slide{display:block}
.slick-slider .slick-list .slick-track.slick-loading .slick-slide{visibility:hidden}
.slick-slider .slick-arrow.slick-hidden{display:none}

/* 공통 */
.inner{max-width:1280px;position:relative;margin:0 auto;padding:0 20px;}

@media (max-width:760px) {
 .inner{padding:0 15px;}
}


#header{position:fixed;z-index:2000;width:100%;top:0;}
#gnb h1{position:absolute;width:165px;bottom:27px;left:55px;z-index:20;transition:all .25s;}
#gnb h1 a,
#gnb h1 img{display:block;width:100%;image-rendering: pixelated;transition:all .25s;max-width:165px;}

#gnb .log-bx{background:#194db0;padding-right:35px;display:flex;justify-content:flex-end;transition:all .25s;overflow:hidden;height:44px;}
#gnb .log-bx a{height:44px;line-height:44px;padding:0 15px;color:#fff;font-size:14px;font-weight:300;border-right:1px solid #8ca6d8;transition:all .25s;}
#gnb .log-bx a.edu{background:#11367b;}
#gnb .log-bx a:hover{background:#0a1f46}
/*
.mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:-2;display:none;animation:show1 .1s both ease;}
*/
@keyframes show1{ 
  0%{opacity:0;}
  100%{opacity:1;} 
}

#gnb{opacity:0;}

.pc-mode #gnb{position:relative;width:100%;background:#fff;box-shadow:0px 3px 10px 0px rgba(0,0,0,.15);opacity:1;}
.mobile-mode #gnb{opacity:1;}
.pc-mode #gnb:after{content:'';display:block;position:absolute;bottom:0;left:0;right:0;height:2px;background:#194db0}
.pc-mode #gnb nav{padding:0 250px 0 360px;position:relative;z-index:10;}
.pc-mode #gnb .depth_01{display:flex;justify-content:center;}
.pc-mode #gnb h2 a{display:block;height:130px;line-height:130px;position:relative;font-size:22px;font-weight:400;color:#1b1b1b;font-family: 'KoreanYNSJG';width:210px;text-align:center;transition:all .25s;}
.pc-mode #gnb li:not(:first-child) h2 a:after{content:'';display:block;width:1px;height:20px;background:#b8b8b8;position:absolute;left:0;top:50%;margin-top:-10px;}
.pc-mode #gnb h2.active a{color:#194db0;}

.pc-mode .depth_01 > li{position:relative;}
.pc-mode .depth_02{position:absolute;top:130px;padding:30px 10px 35px;width:100%;display:none;transition:all .25s;}
.pc-mode .depth_02 li + li{margin-top:9px;}
.pc-mode .depth_02 h3 a{text-align:center;display:block;transition:all .25s;height:42px;line-height:42px;background:#e5e5e5;border-radius:5px;color:#393939;font-size:16px;transition:all .15s;}
.pc-mode .depth_02 h3 a:hover{background:#194db0;color:#fff;font-weight:500;}
.pc-mode .bg_pc{display:none;background:#fff;width:100%;position:absolute;top:170px;z-index:-1;animation:show2 .5s both ease;transition:all .25s;box-shadow: 0px 3px 5px 0px rgba(0,0,0,.2);}

@keyframes show2{ 
  0%{opacity:1;transform:translateY(-100%);}
  100%{opacity:1;transform:translateY(0%);} 
}

.pc-mode .depth_02 > li h3 a{animation:show3 .3s 0s ease 1 both;}
.pc-mode .depth_02 > li:nth-child(2) h3 a{animation-delay:.1s;}
.pc-mode .depth_02 > li:nth-child(3) h3 a{animation-delay:.2s;}
.pc-mode .depth_02 > li:nth-child(4) h3 a{animation-delay:.3s;}
.pc-mode .depth_02 > li:nth-child(5) h3 a{animation-delay:.4s;}
.pc-mode .depth_02 > li:nth-child(6) h3 a{animation-delay:.5s;}
.pc-mode .depth_02 > li:nth-child(7) h3 a{animation-delay:.6s;}
.pc-mode .depth_02 > li:nth-child(8) h3 a{animation-delay:.7s;}

@keyframes show3{ 
  0%{transform:translateY(-50%);opacity:0;}
  100%{transform:translateY(0%);opacity:1;}
}

.pc-mode .cycle{display:block;position:absolute;width:110px;height:6px;left:0;bottom:0px;image-rendering:-webkit-optimize-contrast;opacity:0;transition:opacity .5s;background:#194db0}
.pc-mode.active .cycle{opacity:1;}

.fixed.pc-mode #gnb .log-bx{height:0;}
.fixed.pc-mode #gnb h2 a{height:60px;line-height:60px;font-size:18px;}
.fixed.pc-mode .depth_02{top:60px;}
.fixed.pc-mode .bg_pc{top:60px;}
.fixed.pc-mode #gnb h1{width:110px;bottom:8px;}

.mobile-off{display:none;z-index:50;}
.mobile-on{display:none;}

@media (max-width:1600px) {
  .pc-mode #gnb nav{padding:0 10px 0 210px;}
  .pc-mode #gnb h2 a{width:170px;font-size:18px;}
  #gnb h1{width:110px;left:20px;bottom:45px}
}

@media (max-width:1199px) {
  .cycle{display:none;}
  #gnb{position:fixed;width:345px;top:0;height:100vh;background:#fff;right:-345px;box-shadow:0 -5px 10px 0px rgba(0,0,0,.25);transition:all .3s ease-out;z-index:30;}
  .active #gnb{right:0;}
  #gnb h1{width:100%;left:auto;bottom:auto;position:relative;}
  #gnb h1 a{width:120px;padding:10px;}

  #gnb .log-bx{padding-right:0px;height:40px;box-shadow:0px 3px 5px 0px rgba(0,0,0,.15);}
  #gnb .log-bx a{height:40px;line-height:40px;padding:0 12px;font-size:13px;flex:1;text-align:center;}
  #gnb .log-bx a.edu{flex:0;flex-basis:185px;}

  .mobile-off{display:block;position:absolute;top:23px;right:13px;background:url(/site/portal/eroom/images/common/icon01.png) no-repeat center center;background-size:cover;transition:all .1s;width:14px;height:14px;font-size:0;}
  .mobile-off:active{transform:scale(.8);}

  #gnb nav{padding:0 10px 30px;overflow-y:auto;height:calc(100vh - 100px)}

  #gnb h2 a{display:block;height:60px;line-height:1.2;position:relative;font-size:18px;font-weight:500;color:#1b1b1b;font-family: 'KoreanYNSJG';transition:all .25s;padding:25px 20px 0 20px;border-bottom:1px solid #cdcdcd;}
  #gnb h2.active a{color:#194db0;}
  #gnb h2 a:after{content:'';display:block;position:absolute;right:0;bottom:13px;width:20px;height:20px;background:url(/site/portal/eroom/images/common/icon02.png) no-repeat center center;background-size:cover;}
  #gnb h2.active a:after{background-image:url(/site/portal/eroom/images/common/icon03.png);}

  #gnb .depth_02{padding:7px 0;border-bottom:1px solid #cdcdcd;display:none;}
  #gnb .depth_02 li + li{margin-top:6px;} 
  #gnb h3 a{height:36px;line-height:36px;border-radius:5px;display:block;background:#e5e5e5;text-align:center;font-size:15px;color:#393939;}
  #gnb h3.active a{background:#194db0;color:#fff;font-weight:500;} 
  #gnb h2.active + .depth_02{display:block;}

  .depth_02 > li h3 a{animation:show4 .2s 0s ease 1 both;}
  .depth_02 > li:nth-child(2) h3 a{animation-delay:.05s;}
  .depth_02 > li:nth-child(3) h3 a{animation-delay:.1s;}
  .depth_02 > li:nth-child(4) h3 a{animation-delay:.15s;}
  .depth_02 > li:nth-child(5) h3 a{animation-delay:.2s;}
  .depth_02 > li:nth-child(6) h3 a{animation-delay:.25s;}
  .depth_02 > li:nth-child(7) h3 a{animation-delay:.3s;}
  .depth_02 > li:nth-child(8) h3 a{animation-delay:.35s;}

  .mobile-on{position:fixed;display:block;top:10px;right:10px;transition:all .15s;width:46px;height:46px;border-radius:5px;font-size:0;box-shadow:0px 0px 7px 0px rgba(0,0,0,.4);background:#194db0 url(/site/portal/eroom/images/common/sp_eroom.png) 4px 2px no-repeat;background-size:520px 520px;}
  .fixed .mobile-on{top:0;right:0;border-radius:0 0 0 5px;}

}

@keyframes show4{ 
  0%{opacity:0;height:0;}
  100%{opacity:1;height:36px}
}

#footer{background:#292929;z-index:30;position:relative;padding-bottom:50px;color:#959595;font-weight:400;}
#footer .link{border-bottom:1px solid #3e3e3e;}
#footer .link a{display:inline-block;vertical-align:top;height:60px;line-height:62px;font-size:16px;color:#959595;margin-right:30px;}
#footer .address{padding-top:20px;}
#footer .address p{line-height:1.4;margin-top:5px;}
#footer .banner{background:#343434;}
#footer .banner .inner{padding-left:90px;}
#footer .slide{height:72px;line-height:72px;padding:0 20px;position:relative;color:#fff;}
#footer .slide:after{content:'';display:block;height:14px;width:1px;background:#fff;position:absolute;top:50%;margin-top:-7px;right:0px;}
#footer .control{position:absolute;left:20px;top:50%;margin-top:-9px;height:18px;font-size:0;z-index:10;}
#footer .control a{display:inline-block;vertical-align:top;width:18px;height:18px;background:url(/site/portal/eroom/images/common/sp_eroom.png) -223px -10px no-repeat;background-size:520px 520px;margin: left -1px;}
#footer .control a.next{background-position-x:-261px;}
#footer .control a.play{background-position-x:-280px;display:none;}
#footer .control a.pause{background-position-x:-242px;}
#footer .family{position:absolute;right:20px;top:10px;height:40px;z-index:10;}
#footer .family > div{height:40px;display:inline-block;position:relative;margin-left:15px;z-index:3;}
#footer .family .open{padding:0 65px 0 25px;position:relative;height:40px;line-height:40px;border:1px solid #666;border-radius:20px;display:inline-block;font-size:15px;color:#fff;z-index:3;background:#292929;}
#footer .family .open:after{content:'+';position:absolute;color:#666;position:absolute;right:15px;top:15px;font-size:20px;height:10px;line-height:10px;}
#footer .family .open.active:after{content:'-'}
#footer .family .view{position:absolute;bottom:20px;background:#fff;border:1px solid #666;width:100%;padding:15px 0 25px;display:none;}
#footer .family .view a{display:block;font-size:13px;padding:5px 5px 5px 15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width:1199px) {
  #footer{padding-bottom:20px;}
  #footer .link{padding:5px 0;}
  #footer .link a{display:block;height:28px;line-height:30px;font-size:13px;margin-right:0px;text-align:center;}
  #footer .address{padding-top:10px;}
  #footer .address p{line-height:1.4;margin-top:5px;text-align:center;font-size:13px;}
  #footer .address p span{display:block;margin-top:2px;}
  #footer .address p em{display:none;}
  #footer .banner .inner{padding:0 0 0 0px;}
  #footer .slide{height:50px;line-height:50px;padding:0 15px;font-size:14px;}
  #footer .slide:after{height:10px;margin-top:-5px;}
  #footer .control{display:none;}
  #footer .family{position:relative;right:auto;top:auto;height:auto;margin-top:15px;}
  #footer .family > div{height:34px;display:block;margin:7px auto 0;max-width:240px;}
  #footer .family .open{padding:0 35px 0 15px;height:34px;line-height:32px;display:block;font-size:13px;}
  #footer .family .open:after{right:10px;top:12px;font-size:16px;}
  #footer .family .view{padding:12px 0 20px;display:none;}
}


#btn_top{position:absolute;top:750px;left:50%;margin-left:680px;box-shadow:0px 0px 10px 0px rgba(0,0,0,.15);display:block;z-index:1101;transition:opacity .1s;opacity:0;font-size:0;border-radius:50%;background:#384c9c url(/site/portal/eroom/images/common/sp_eroom.png) -350px 12px no-repeat;background-size:520px 520px;width:60px;height:60px;image-rendering:-webkit-optimize-contrast;}
#btn_top:hover{transform:scale(1.03);}
#btn_top:active{transform:scale(.97);}


@media (max-width:1699px) {
  #btn_top{position:fixed;left:auto;margin-left:0;right:20px;bottom:20px !important;top:auto !important;width:50px;height:50px;background-position:-354px 4px;}
}

@media (max-width:760px) {
  #btn_top{right:5px;bottom:5px !important;width:40px;height:40px;background-position:-360px 0px;}
}