@charset "utf-8";

/* 레이아웃 공통 */
html, body{position:relative; width:100%;}
body{color:#000;font-size:16px; line-height:1.6;font-family:'Paperozi' ,"Apple SD Gothic Neo","Noto Sans", "Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;word-break:break-all;letter-spacing:-0.5px;max-width:100%;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;}
.inner{max-width:1640px;position:relative;margin:0 auto;padding:0 20px;}


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

#header{position:fixed;z-index:2000;top:0;max-width:100%;margin:0 auto;width:100%;transition:all .3s .1s ease-out;top:0;background:#fff;font-family: 'Paperozi';}

#header .header-wrap{position:relative; margin:0 auto; display:flex; align-items:center; justify-content:space-between; transition:all .2s; max-width: 100%; padding: 0 80px;}
#header.active .header-wrap{background:#fff;}
#header h1{position: relative;z-index:1;}
#header h1 img{display:block; width:385px;}
#header.fixed{top: 0px;}
#header.down.fixed{top: -137px;}
#header .nav-bx{display:flex;justify-content:flex-end;}
#header .nav-bx .close{display: none;}
#header nav{width:100%; display: flex; align-items: center;}
#header .nav-bx .Hdepth01{display:flex;align-items:center;width:100%; justify-content: flex-end;}
#header .nav-bx .Hdepth01 li{position: relative;}
#header .nav-bx .Hdepth01 li + li{margin-top: 5px;}
#header .nav-bx .Hdepth01 li .Htlv03{padding-left: 16px;}
#header .nav-bx .Hdepth01 li .Htlv03 a{font-size: 15px; position: relative; padding: 5px;}
#header .nav-bx .Hdepth01 li .Htlv03 a:hover{color: #fff; transition: all .4s;}
#header .nav-bx .Hdepth01 li .Htlv03 a::after{content: ''; width: 0%; height: 100%; opacity: 0; background: #000; position: absolute; left: 0; top: 0; z-index: -1; transition: all .4s;}
#header .nav-bx .Hdepth01 li .Htlv03 a:hover::after{content: ''; opacity: 1; width: 100%; transition: all .3s;}
#header .nav-bx .Htlv01 a{display:flex; position:relative; align-items:center; justify-content:center; height: 137px; padding: 0 47px; font-size:24px; font-weight:700; transition:all .4s; text-align: center; word-break: keep-all; line-height: 1.3; color: #010101; position: relative; z-index:5;}
#header .nav-bx .Htlv01 a:before{content:''; display:block; background: url(/page/bomnae/images/main/header_bg.png)no-repeat; width: 18px; height: 18px; position:absolute; top:30px; left:50%; margin-left:-5px; transition:all .2s; opacity:0; transform:translateY(-50%);}
#header .nav-bx .Htlv01.active a:before{opacity:1;transform:translateY(0%);}
#header .nav-bx .Htlv01.active a:after{left:15px;right:15px;}
#header nav .logout-btn{display: flex;}
#header nav .logout-btn img{width: 30px;}

#header .nav-bx .Hdepth02{opacity: 0; min-width: 160px; transform-origin: center center; transform: rotateY(180deg); margin-left: -80px; backface-visibility: hidden; perspective: 900px; display: none;  box-shadow: 2px 1px 8px rgba(0, 0, 0, .5); backface-visibility: hidden; perspective: 900px;
position:absolute;align-items:flex-start; left: 50%; top: 112px; z-index: 10; padding:23px 5px; border: 1px solid #000; border-radius: 24px; background: #fff;}
#header.pc-mode .Hdepth01 > li .Hdepth02.flip-open{opacity: 1; display: block !important; animation: gnbFlip180 .55s ease-out forwards;}
#header .nav-bx .Htlv02{position:relative;}
#header .nav-bx .Htlv02 a{display:flex; align-items:center; height:47px; font-size:17px;font-weight:500;color:#333;justify-content:center;}
#header .nav-bx .Htlv02 a:hover{text-decoration: underline; text-underline-offset: 5px; font-weight: 700;}

#header .btn-bx{display:none;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:1;}
#header .btn-bx a img{height:22px;display:block;}

@media (max-width:1740px) {
  #header .header-wrap{padding:0 20px;}
  #header .nav-bx .Htlv02 a{font-size:15px;}
}

@media (max-width:1540px) {
  #header{height:68px;}
  #header.fixed{top:-68px;}
  #header h1 img{width: 200px;}
  #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{width:100%;border:5px solid #ffdf35;border-width:0px 0px 5px 5px;max-width:400px;z-index:25;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/bomnae/images/common/allmenu_bg.png) no-repeat right 0 bottom 20px /340px 248px;border-bottom-left-radius: 40px}
  #header .nav-bx.active{transform:translate(0, 0);}
  #header .nav-bx nav{ padding: 0 15px;}
  #header .nav-bx nav .Hdepth01{display:block !important;border-top:1px solid #ddd;height: calc(var(--vh) - 100px);overflow-y:auto;}
  #header .nav-bx nav .Hdepth01 .Htlv01.active a{color: #ffdf35;}
  #header .nav-bx nav .Hdepth01 > li{width:100%;border-bottom:1px solid #ddd;max-width:initial;}
  #header .nav-bx .Htlv01 a{height:58px;color:#000;justify-content:space-between;padding:0 20px;font-size:18px;}
  #header .nav-bx nav .Htlv01 a:after{content:'';display:block;width:6px;height:3.5px;background:url(/page/bomnae/images/common/allmenu_arrow.png) no-repeat center center /cover;transition:all .2s;}
  #header .nav-bx .Htlv01 a:before{display: none;}
  #header.pc-mode .Hdepth01 > li .Hdepth02.flip-open{animation: none;}
  #header .nav-bx .close{display: block; position: absolute; right: 15px; top: 25px;}
  #header .nav-bx .close img{display: block; height: 22px;}
  #header nav .logout-btn{display: none;}
  

  #header .nav-bx nav .Htlv01.active a:after{transform:rotate(180deg);}
  #header .nav-bx nav .Hdepth02{display:none;  position:relative; top:auto; left:auto; transform: none !important; opacity: 1 !important; border: none; padding: 0px 0 10px 25px; margin:0; width:100%; background: transparent; box-shadow:none;  backface-visibility: visible; perspective: none; animation: none !important;}
  #header .nav-bx nav .Hdepth02 a{justify-content:flex-start;}
  #header .nav-bx nav .Hdepth02:after{display:none;}
  #header .nav-bx nav .Hdepth02 > li{width:100%;margin-top:0px;animation:none !important;}
  #header .nav-bx nav .Hdepth03{padding: 0px 0 0 20px;margin-bottom:5px;display:block !important;}
  #header .nav-bx nav .Htlv02 a{font-size:14px;height: 38px;}
  #header .nav-bx nav .Htlv03 a{font-size:13px;display:flex;align-items:center;font-weight:500;padding: 4px 0;}

  #header .btn-bx{gap:0 20px;display:flex;}
  #header .btn-bx a img{height:18px;}
  #header.active .btn-bx a.menu-btn img{display:none;}
  #header.active .btn-bx a.menu-btn img:last-child{display:block;}

} 

@media (max-width:760px) {
    #header .header-wrap{padding:0 15px;}
    #header h1 img{width: 160px;}
    #header .btn-bx{gap: 0 15px;}
}

@keyframes gnbFlip180 {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }
  40% {
    transform: rotateY(120deg);
    opacity: 0.1;
  }
  70% {
    transform: rotateY(45deg);
    opacity: 0.6;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

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

@keyframes cycle1{ 
  0%{transform:scale(1);}
  100%{transform:scale(.5);} 
}

#footer{position:relative;z-index:100;background:#fff;}
#footer .inner{display: flex; position: relative;}
#footer .footer-logo{position: relative; padding:40px 28px 50px 0; width: 113px;}  
#footer .footer-logo::before{content: '';width: 600px; height: 100%; border-top-right-radius: 50px; background: #f5f5f5; position: absolute; left: -500px; top: 0; z-index: -1;}
#footer .footer-logo img{display: block; width: 82px;}
#footer .footer_info{padding: 38px 0 55px 80px; position: relative; flex: 1; margin-left: -16px;}
#footer .footer_info::before{content: ''; width: 1900px; height: 100%; border-top-left-radius: 50px; background: #e8e8e8; position: absolute; left: 0; top: 0; z-index: -1;}
#footer .footer_wrap{display: flex; align-items: center;}

#footer .info-bx{display:flex;align-items:center;}
#footer .info-bx a{font-weight:500; position:relative; padding-right:21px; margin-right:21px; font-size: 18px; display:flex; align-items:center; color: #333;}
#footer .info-bx a:not(:last-child):after{content:'';display:block; width:6px; height:6px; background:#b1b1b1; border-radius: 50%; position:absolute;right:0;}
#footer .info-bx a:last-child{padding-right: 0; margin-right: 0;}
#footer .family-bx{display:flex; align-items: center; flex: 1; justify-content:flex-end;  }
#footer .family-bx .logo-bx{display: flex !important; gap:0 38px; padding-right: 41px;}
#footer .family-bx a img{display:block; height: 33px;}
#footer .family-bx .item{position:relative; z-index: 1;}
#footer .family-bx .item + .item{margin-left:25px;}
#footer .family-bx .item button{display:flex; align-items:center; justify-content:space-between; width:267px; padding: 0 20px; color:#666; font-weight: 400; font-size:18px; height:50px; border: 1px solid #fff; background: #fff url(/page/bomnae/images/main/plus3.png)no-repeat 92% 50%; background-size: 28px 28px; border-radius: 33px;}
#footer .family-bx .item .view-btn.active{background: #fff url(/page/bomnae/images/main/minus1.png)no-repeat 92% 50%; background-size: 28px 28px; border-radius: 33px;}
#footer .family-bx .item button img{width:11px;display:block;transition:all .2s;}
#footer .family-bx .item button.active img{transform:rotate(180deg);}
#footer .family-bx .item .view-bx{position:absolute; bottom:32px; left:0; right:0; z-index: -1; display: none; border-radius: 12px 12px 0 0; background:#fff;  background:#fff; padding:15px 0;}
#footer .family-bx .item .view-bx a{display:flex;align-items:center;padding:3px 10px 3px 20px;font-size:14px;}

#footer .address-family-bx{display:flex;justify-content:space-between; padding-top: 34px; position: relative;}
#footer .address-bx p{font-weight:300; display:flex; gap: 0 12px; color: #666;}
#footer .address-bx p strong{font-weight: 500; }
#footer .address-bx > span{display:block; color: #666; font-size: 14px; font-weight: 300;}
#footer .sns-link{display: flex; gap: 17px; position: absolute; right: 0; top: 19px;}
#footer .sns-link a{position: relative; display: inline-block;}
#footer .sns-link a img{display: block; transition: opacity .3s;}
#footer .sns-link a img.hover{position: absolute; left: 0; top: 0; opacity: 0;}
#footer .sns-link a:hover img.hover{opacity: 1;}
#footer .sns-link a:hover img:not(.hover) {opacity: 0;}

@media (max-width:1440px) {
 #footer .footer-logo{width: 150px;}
 #footer .footer-logo::before{width: 170px; left: -20px;}
 #footer .footer_info{padding: 38px 0 55px 30px;}
 #footer .family-bx .logo-bx{gap: 0 15px;}
 #footer .family-bx .item button{width: 150px;}
 #footer .family-bx a img{height: 25px;}
 
} 

@media (max-width:991px) {
    #footer .footer_wrap{flex-direction: column;}
    #footer .footer-logo{width: 120px;}
    #footer .footer-logo img{width: 60px;}
    #footer .footer-logo::before{width: 150px;}
    #footer .footer_info{padding: 30px 0 30px 30px;}

    #footer .family-bx{padding-top: 25px;}
    #footer .sns-link{position: relative; right: auto; top: auto; gap: 10px;}
    #footer .sns-link a img{width: 50px;}
    #footer .address-bx p{font-size: 13px; gap: 0 5px;}
}

@media (max-width:760px) {
    #footer .inner{flex-direction: column;}
    #footer .footer-logo{width: 100%; padding: 15px; display: flex;  justify-content: center; position: absolute; left: 50%; top: 0; z-index: 10; transform: translateX(-50%);}
    #footer .footer-logo::before{width: 600px; left: 50%; transform: translateX(-50%); background: transparent;}
    #footer .footer-logo img{width: 55px;}
    #footer .info-bx{flex-wrap: wrap; justify-content: center; width: 100%; flex-direction: column;}
    #footer .info-bx a{font-size: 13px; flex: 1 33%; justify-content: center; padding-right: 0; margin-right: 0;}
    #footer .info-bx a + a{margin-top: 5px;}
    #footer .info-bx a:not(:last-child):after{display: none;}

    #footer .family-bx{flex-direction: column;}
    #footer .family-bx .item{margin-top: 30px; width: 100%;}
    #footer .family-bx .item button{width : 100%; height: 40px; background-size: 20px 20px;}
    #footer .family-bx .item .view-bx{bottom: 24px;}
    #footer .family-bx .item .view-btn.active{background-size: 20px 20px;}
    #footer .family-bx .logo-bx{padding-right: 0;}
    #footer .footer_info{padding: 140px 0 30px 0; width: 100%; margin-left: 0;}
    #footer .footer_info::before{border-radius: 0; left: -20px;}
    #footer .address-family-bx{flex-direction: column; align-items: center;}
    #footer .address-family-bx .address-bx{order: 2;}
    #footer .sns-link{order: 1; padding-bottom: 20px;}
    #footer .sns-link a img{width: 45px;}
    #footer .address-bx p{word-break: keep-all; text-align: center;}
    #footer .address-bx p:nth-child(2){flex-direction: column; align-items: center; padding-top: 5px;}
    #footer .address-bx > span{text-align: center; padding-top: 5px; font-size: 13px;}
    #footer .family-bx .item button{background-position: 95% 50%; font-size: 14px;}
    #footer .family-bx .item .view-btn.active{background-position: 95% 50%;}
}

#btn-top{width:70px;height:70px;display:block; opacity: 1; font-size: 0; background: url(/page/bomnae/images/main/top.png) no-repeat; background-size: cover; transition:all .3s;position:fixed; top: 680px; right:36px;z-index:200;}
#btn-top.active{opacity: 1;}

@media (max-width:1440px) {
 #btn-top{width:60px;height:60px;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));}
}

@media (max-width:760px) {
  #btn-top{width: 40px; height: 40px;}
}