@charset "utf-8";

html{scroll-behavior: smooth;}



/* 레이아웃 공통 */
html, body{position:relative; width:100%;}
body{color:#000;font-size:16px; line-height:1.6;font-family:'Pretendard',"Apple SD Gothic Neo","Noto Sans", "Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;word-break:break-all;letter-spacing:-0.7px;max-width:1920px;margin:0 auto;}
main{display:block;}
.confirmIframe body{overflow:hidden;}
#progressScroll{display:none;}
#wrapper{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}
.slick-dots{display:flex;justify-content:center;align-items:center;}
.slick-dots li a{display:block;width:70px;height:70px;}
.slick-dots img{display:block;width:100%;height:100%;object-fit:cover;}


/* 공통 */
#main{position:relative;z-index:10; background:#fff;}
.inner{max-width:1440px;position:relative;margin:0 auto;padding:0 20px;}


@media (max-width:716px) {
  .inner{padding:0 15px;}
}

#header{position:fixed; z-index:2000; top:0; left:0px; right:0px; transition:top .3s;}
#header.fixed{ background: rgba(0, 0, 0, 0.2);   backdrop-filter: blur(10px); width: 100%; height: 100px;}
#header .header-wrap{max-width:1720px; position:relative; margin:0 auto;}
#header h1{position:absolute; left:0; bottom:35px; z-index:100;}
#header h1 img{display:block; width: 166px;}

#header .nav-bx{width:100%; display:flex; height:100px;}
#header nav{width:100%; position:relative; z-index:3; transition:all .35s;}
#header nav .Hdepth01{display:flex; justify-content:flex-end}
#header nav .Hdepth01 > li{position:relative;}
#header nav .Htlv01 a{height:100px; color:#fff; display:flex; position:relative; align-items:center; font-size:22px; font-weight:600; justify-content:center; padding:0 28px;}
#header nav .Htlv01 a span{display:inline-block; position:relative; line-height:1.2; word-break:keep-all; text-align:center;}
#header nav .Htlv01 a span::after{content: '';  height: 2px; background: #fff; transition: all .25s; position: absolute; left: 51%; right: 51%; bottom: -5px; z-index: 1;}
#header nav .Htlv01 a:hover span::after{left: 0%; right: 0%;}
#header .menu,
#header .close{display: none;}
@media (min-width:1401px) {
  #header .nav-bx.active nav{position:fixed;top:0;left:0;right:0;z-index:15;padding:150px 0 0;justify-content:center;display:flex;}
  #header.fixed .nav-bx.active nav{padding-top:90px}
  #header .nav-bx.active .Hdepth01{width:100%;justify-content:center;padding:20px 140px 100px;border-top:1px solid #f2f2f2;}
  #header .nav-bx.active .Hdepth01 > li{flex:1;width:auto;margin:0 30px;}
  #header .nav-bx.active .Htlv01 a{font-size:26px;font-weight:800;padding:0;height:50px;}
  #header .nav-bx.active nav .Hdepth02{display:flex !important;position:relative;top:0;width:100%;box-shadow:none;left:0;margin-left:0;background:transparent;}
  #header .nav-bx.active nav .Hdepth02:after{display:none;}
  #header .nav-bx.active nav .Htlv02 a{background:#f1f1f1;border-radius:10px;height:54px;margin-bottom:10px;font-size:16px;}
  #header .nav-bx.active nav:before{background:#fff url(/page/childcare/images/common/allmenu_bg.png) no-repeat right -150px bottom -150px;top:0;left:0;right:0;bottom:0;border-radius:0;transition:all 0s ease-in-out}
}

@media (max-width:1800px) {
  #header{padding: 0 20px;}
  #header h1{left:0; bottom: 30px;}
  #header.fixed{height: 60px;}
  #header.fixed h1{bottom: 22px;}

}

@media (max-width:1440px) {
  #header{height:68px;}
  #header h1 img{width: 120px;}
  #header .Fsite{display:none;}
  #header .header-wrap{height:100%;}
  #header .header-btn-bx{height:68px;right:10px;transition:all .25s;top:0;}
  #header.fixed .header-btn-bx{top:68px;transition:all .25s;}
  #header .header-btn-bx a{width:50px;}
  #header .header-btn-bx .sitemap-btn.active img{height:22px;}
  #header .nav-bx .close{position: absolute; top: 21px; right: 21px;}
  #header .nav-bx a img{display: block; width: 20px;}
  #header .nav-bx{width:100%;border:5px solid #0c0c0d; border-width:0px 0px 5px 5px;max-width:400px;z-index:3000;position:fixed;right:0;transition:all .5s;padding-top:70px;transform:translate(100%, -50%);transform-origin:100% 50%;overflow:hidden;top:0px;height: calc(var(--vh) - 10px);background:#fff  url(/page/childcare/images/common/allmenu_bg.png) no-repeat right -30px bottom -20px /340px 248px;border-bottom-left-radius: 40px}
  #header .nav-bx.active{transform:translate(0, 0);}
  #header nav{padding-right:0;}
  #header .menu, #header .close{display: block;}
  #header .menu{display: block; position: absolute; right: 0; top: 19px; height: 22px;}
  #header .menu img{width: 30px;}
  #header nav .Hdepth01{display:block;border-top:1px solid #ddd;height: calc(var(--vh) - 100px);overflow-y:auto;}
  #header nav .Hdepth01 > li{width:100%;border-bottom:1px solid #ddd;max-width:initial;}
  #header nav .Htlv01 a{height:58px;color:#000;justify-content:space-between;padding:0 20px;font-size:20px;font-weight:900;}
  #header nav .Htlv01 a:after{content:'';display:block;width:6px;height:3.5px;background:url(/page/childcare/images/common/allmenu_arrow.png) no-repeat center center /cover;transition:all .2s;}
  #header nav .Htlv01.active a:after{transform:rotate(180deg);}
  main{transition:filter .25s;}
} 

@media (max-width:760px) {
  #header.fixed{height: 60px;}
  #header h1{left:0; bottom: 25px;}
  #header.fixed h1{bottom: 17px;}
}

@keyframes gnb1{ 
  0%{transform:perspective(300px) rotateY(-90deg);}
  100%{transform:perspective(300px) rotateY(0deg);} 
}


@keyframes cycle1{ 
  0%{transform:scale(1);}
  100%{transform:scale(.5);} 
}



#footer{position:relative;z-index:100;background:#0c0c0d;color:#fff;}
#footer .address-home-bx{padding:40px 0;}
#footer .address-home-bx .inner{display:flex;justify-content:space-between;align-items:flex-end; max-width: 1740px;}
#footer .address-bx .dq{font-size:14px; display:flex; }
#footer .address{display: flex;}
#footer .address-bx .dq .phone{display: flex;}
#footer .address-bx .dq strong{font-weight:600; padding-right: 8px; margin-right: 8px; color: #dcdcdc; position: relative;}
#footer .address-bx .dq strong::after{content: ''; width: 5px; height: 5px; background: #dcdcdc; position: absolute; right: -3px; top: 8px; border-radius: 50%;}
#footer .address-bx .dq span{display:flex;align-items:center;gap:0 8px; font-weight: 300; color: #b7b6b6; padding-right: 10px; margin-right: 10px; position: relative;}
#footer .address-bx .dq .phone span::after,
#footer .address-bx .dq .address span::after{content: ''; width: 1px; height: 12px; background: #4b4b4c; position: absolute; right: 0;}
#footer .address-bx .dq .phone span:last-child::after{display: none;}
#footer .address-bx .dq.seoul span::after{display: none;}
#footer .address-bx .dq + .dq{margin-top:7px;}
#footer .copy-bx{font-size: 14px; color: #b7b6b6;}

@media (max-width:1400px) {
  #footer .address-home-bx .inner{gap:20px 0}
  #footer .address-bx p{font-size:13px;align-items:center;}
} 

@media (max-width:991px) {
  #footer .address-home-bx .inner{align-items:center;flex-direction:column;gap:15px 0}
  #footer .address-home-bx{padding: 20px 0;}
  #footer .address-bx .dq .phone{flex-direction: column;}
  #footer .address-bx .dq span{justify-content: center;}
  #footer .address-bx .dq.seoul{flex-direction: row;}
  #footer .address-bx .dq{flex-direction: column;}
  #footer .address-bx .dq span::after{display: none;}
  #footer .address-bx .dq span{padding-right: 0; margin-right: 0;}
} 

@media (max-width:760px) {
  #footer .address-bx .dq,
  #footer .copy-bx{font-size: 13px;}
}

#btn-top{width:60px;height:60px;display:block; box-shadow: 1px 1px 8px rgba(0,0,0,.3); border-radius: 50%; transition:all .3s;position:fixed; top: calc(70% + 210px); right:55px;z-index:200;}
#btn-top img{display:block;width:100%;filter: hue-rotate(145deg);}
#btn-top.active{opacity:1;}
#btn-top:active{transform:scale(.97);}

@media (max-width:1180px) {
 #btn-top{width:34px;height:34px;right:10px !important;bottom:20px !important;top:auto !important;position:fixed;}
 #btn-top img{filter:drop-shadow(0px 0px 2px rgba(0,0,0,.3)) hue-rotate(145deg);}
}


