@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Nanum+Gothic:wght@400;700;800&family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/*
 * 비로오토파크(https://www.biroautopark.kr, 캠핑나라 제작) 홈페이지의 css/common.css + foot.php <style> 이식.
 * - 헤더/푸터 규칙은 nowgo 예약페이지 CSS(reserv2/css/style.css 의 .header / .footer 등)에 덮이지 않도록
 *   #header / #footer 하위로 한정한다. 값은 원본과 동일하게 유지한다.
 * - 원본 .container(1620px) 는 헤더/푸터가 쓰지 않고 예약페이지 .container 와 충돌하므로 제외.
 */

/*reset*/
*{margin:0;padding:0;box-sizing:border-box}
li{list-style:none}
img{border:0;max-width:100%}
/* 원본: body, td, p, input, button, textarea, select, a { font-family:'Nanum Gothic'; color:#000 } / p { line-height:1.6 }
   — 예약페이지 본문(reserv/css/reset.css 의 Pretendard)까지 덮지 않도록 헤더/푸터로 한정.
   (헤더/푸터 안의 링크 색은 아래 .lnb / .btn_reser / .footer-links 규칙이 모두 명시하므로 color:#000 은 불필요) */
#header, #header *, #footer, #footer *{font-family:'Nanum Gothic',sans-serif}
h1,h2,h3,h4,h5,h6,strong,th,b,dt,em{/*font-weight:600*/}
em,i{font-style:normal}
a,a:hover,a:active,a:focus{text-decoration:none}


.clear:after{display:block;content:'';clear:both}

.fontM{font-family:'Nanum Myeongjo'}
.fontD{font-family:'Dancing Script'}


.control .scroll{animation: uniqueScrollUpDown 1.5s ease-in-out infinite;}
        @keyframes uniqueScrollUpDown {
            0%, 100% { transform: translate(0, -20px); opacity: 0.0; }
            50% { transform: translate(0, -10px); opacity: 1; }
        }

.s_table .more_table{
    animation: uniqueScrollLeftRight 1.5s ease-in-out infinite;
}

@keyframes uniqueScrollLeftRight {
    0%, 100% { transform: translate(-20px, 0); opacity: 0.0; }
    50% { transform: translate(-10px, 0); opacity: 1; }
}


/*pc*/

 #header .header{position:fixed;z-index:100;left:0;top:0;width:100%;padding:30px 80px;transition:0.5s;background:none;box-shadow:none}
      #header .header .bg{position:absolute;left:0;top:0;width:100%;height:80px;background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);;opacity:0;transition:0.5s}
      #header .header .inner{position:relative;display:flex;gap:30px;align-items:center;height:80px;justify-content: space-between;margin:0 auto;}

      #header .header .logo{}
      #header .header .logo .black{display:none}

      #header .header .toggle{display:flex;flex-direction: column;justify-content:space-between; width:30px;height:18px;cursor:pointer}
      #header .header .toggle span{width:100%;height:2px;background:#fff;transition:0.5s}
      #header .header .toggle span:nth-child(2){width:60%}
      #header .header .toggle:hover span{width:100%}

      #header .header .lnb{height:80px;margin:0 auto;visibility: hidden;opacity:0;transition:0.5s}
      #header .header .lnb ul{display:flex;gap:80px;height:80px;line-height:80px;overflow:hidden;padding:0 50px;transition:0.5s;}
      #header .header .lnb li{position:relative}
      #header .header .lnb li a{font-size:14px;color:#333;}
      #header .header .lnb li:hover > a{color:#000}
      #header .header .lnb .sub{position:absolute;width:110px;left:50%;transform:translateX(-50%);text-align:center;}
      #header .header .lnb .sub dd{margin:6px 0;line-height:1.3}
      #header .header .lnb .sub a{color:#555;}
      #header .header .lnb .sub a:hover{color:#000}

      #header .header .lnb:hover ul{height:300px}
      #header .header:has(.lnb:hover) .bg{height:300px}


      #header .header .right_con{display:flex;gap:30px;align-items:center}
      #header .header .right_con .toggle{/*display:none*/;align-items:flex-end}
      #header .header .right_con .btn_reser{line-height:30px;border:1px solid #fff;border-radius:30px;padding:0 16px;color:#fff;font-size:14px;transition:0.5s}
      #header .header .right_con .btn_reser:hover{border:1px solid #000;background:#000;}

      /*on*/
      #header .header.on {padding:0 50px}
      #header .header.on .bg{opacity:1;visibility: visible;}
      #header .header.on .logo .white{display:none}
      #header .header.on .logo .black{display:block}

      #header .header.on .toggle span{background:#000}
      #header .header.on .toggle span:nth-child(1){transform:translateY(8px)rotate(45deg)}
      #header .header.on .toggle span:nth-child(2){opacity:0}
      #header .header.on .toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

      #header .header.on .lnb{visibility:visible;opacity:1}
      #header .header.on .lnb:hover{}
      #header .header.on .btn_reser{border:1px solid #555;color:#000}
      #header .header.on .btn_reser:hover{color:#fff}

      #header .header.black .logo .white{display:none}
      #header .header.black .logo .black{display:block}
      #header .header.black .toggle span{background:#000}
      #header .header.black .btn_reser{border:1px solid #555;color:#000}
      #header .header.black .btn_reser:hover{color:#fff}


/*_pc*/
      @media all and (min-width:1025px) {
        ._mo{display:none !important}
      }


      @media (max-width:1280px){
         #header .header .bg{height:100vh !important;visibility: hidden;}
         #header .header .lnb{position:absolute;left:0;top:80px;width:100%;}
         #header .header .lnb ul{height:auto;gap:0;flex-wrap:wrap;text-align:center;padding:0}
         #header .header .lnb ul li{width:33.33%}
         #header .header .lnb .sub{all:unset;position:relative;}

         #header .header .right_con{margin-left:auto}

         #header .header .lnb:hover ul{height:auto}
      }

      @media (max-width:1024px){
         ._pc{display:none !important}

         #header .header{padding:0 10px !important}
         /* 원본 60px → 44px: 시스템 글자 확대 시 "실시간 예약" 버튼이 두 줄로 꺾이던 문제 — 버튼 크기는 두고 로고를 줄인다
            (2026-09-18 사용자·디자이너 결정). 버튼은 줄바꿈 금지 */
         #header .header .logo img{max-height:44px}
         #header .header .right_con .btn_reser{white-space:nowrap}

         #header .header .inner > .toggle{display:none}
         #header .header .right_con{gap:10px}
         #header .header .right_con .toggle{display:flex}
      }


/*footer (foot.php <style>)*/

    #footer .footer {
      background: #10473c;
      color: #fff;
      padding: 56px 20px 40px;
      text-align: center;
    }

    #footer .footer-logo {
      font-family: "Montserrat", sans-serif;
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 0.18em;
      line-height: 1;
      margin-bottom: 4px;
    }

    #footer .footer-sub {
      font-family: "Montserrat", sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.88);
      margin-bottom: 42px;
    }

    #footer .footer-tel {
      font-family: "Georgia", serif;
      font-size: 30px;
      color: #ffffff;
      margin-bottom: 22px;
      line-height: 1.2;
    }

    /* .num1ms span 등 하위 요소가 위 `#footer *` Nanum Gothic 규칙에 덮이지 않도록 폰트만 상속 강제
       (font-size 는 주지 않는다 — 모바일 16px 미디어 규칙이 div 에만 걸리므로) */
    #footer .footer-tel * {
      font-family: "Georgia", serif;
    }

    #footer .footer-info {
      font-size: 14px;
      line-height: 2;
      color: rgba(255,255,255,0.95);
      word-break: keep-all;
    }

    #footer .footer-links {
      margin-top: 26px;
      font-size: 14px;
      color: rgba(255,255,255,0.95);
    }

    #footer .footer-links a { color:#fff;
      margin: 0 12px;
    }

    #footer .footer-copy {
      margin-top: 18px;
      font-size: 13px;
      color: #f0a63a;
      line-height: 1.7;
    }



    @media (max-width: 768px) {

      #footer .footer {
        padding: 42px 18px 30px;
      }

      #footer .footer-logo {
        font-size: 30px;
      }

      #footer .footer-tel {
        font-size: 16px;
      }

      #footer .footer-info,
      #footer .footer-links,
      #footer .footer-copy {
        font-size: 13px;
      }
    }


/*마진*/

.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}
.mt60{margin-top:60px}
.mt70{margin-top:70px}
.mt80{margin-top:80px}
.mt90{margin-top:90px}
.mt100{margin-top:100px}

.mb4{margin-bottom:4px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}
.mb60{margin-bottom:60px}
.mb70{margin-bottom:70px}
.mb80{margin-bottom:80px}
.mb90{margin-bottom:90px}
.mb100{margin-bottom:100px}


.ml30{margin-left:30px}
.ml40{margin-left:40px}

/*마진*/

.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}
.pt60{padding-top:60px}
.pt70{padding-top:70px}
.pt80{padding-top:80px}
.pt90{padding-top:90px}
.pt100{padding-top:100px}

.pb4{padding-bottom:4px}
.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}
.pb60{padding-bottom:60px}
.pb70{padding-bottom:70px}
.pb80{padding-bottom:80px}
.pb90{padding-bottom:90px}
.pb100{padding-bottom:100px}


.pl30{padding-left:30px}
.pl40{padding-left:40px}