html {overflow-x: hidden; overflow-y: scroll;}
body {overflow: hidden; }

::-webkit-scrollbar-thumb {background: var(--gray); }

#header {width: 100%; height: 110px; position: fixed; top: 0; z-index: 21; transition: background-color .6s ease, top .6s ease;}
#header .header {width: 100%;}

#header.scroll {background-color: #fff; top: -110px;}
#header.scroll #gnb {color: #1a1a1a;}

#logo {padding: 0;}
.logo img {max-width: 9.5rem;}
#gnb {color: #fff; background: transparent;}
#gnb .gnb {display: flex; gap: 2.250rem; width: 100%; justify-content: space-between;}
#gnb .gnb .menu {position: relative; cursor: pointer; letter-spacing: 0; padding: calc(3.4375rem - .85rem) 0;}

#gnb .gnb .menu::after {content: ''; position: absolute; width: 0%; height: 2px; background-color: var(--pointcolor);  bottom: calc(3.4375rem - 1.25rem);; left: 50%; transform: translateX(-50%); transform-origin: center; transition: .4s ease;}
#gnb .gnb .menu.h::after {width: 100%;}

#gnb .gnb .submenu_wrap {position: absolute; width: 250%; left: 50%; transform: translate(-50%, -5px); opacity: 0; pointer-events: none; transition: .3s; top: calc((110px + 6rem) / 2); background-color: #fff; max-width: 200px; min-width: 180px;  z-index: 2;}
#header .gnb .menu.h .submenu_wrap {opacity: 1; pointer-events: auto; transform: translate(-50%,0);}

#gnb .gnb .submenu {display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; padding: 0.9375rem 0;}  
#gnb .gnb .submenu li { width: 100%; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0.9375rem 0;}
#gnb .gnb .menu.on li:hover a,
#gnb .gnb .menu.h li:hover a {color: var(--pointcolor); font-weight: 600;}

#header.scroll #gnb .gnb .submenu_wrap {opacity: 0;}

#q_contact {background-color: var(--pointcolor); width: 110px; height: 110px; border-radius: 50%; position: fixed; z-index: 10; bottom: 5rem; right: 3.75rem; cursor: pointer;}
#q_contact::after {content: ''; width: 95px; height: 95px; background-image: url(/img/renewal/rotate.png); background-repeat: no-repeat; background-size: cover;  top: 50%; left: 50%; position: absolute; animation: rotate-img 6s linear infinite;} 

@keyframes rotate-img {
  0% {
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform:translate(-50%,-50%) rotate(360deg);
  } 
}

@media (max-width: 1240px) {
  #header {height: 80px;} 

  #gnb .gnb .submenu_wrap {top: calc((80px + 6rem) / 2);}
}
@media (max-width: 990px) {
  .logo img {max-width: 11.25rem;}

  #header.scroll {top: 0;}
  #header.on {background-color: #fff;}

  #header.scroll #burger .burger,
  #header.scroll #burger .burger::before,
  #header.scroll #burger .burger::after {background: #1a1a1a; }
  #header.scroll #burger.on .burger {background: transparent;}

  #burger {display: block;width: 30px;height: 22px; cursor: pointer;transition: all .2s ease-in-out; }
  #burger .burger {width: 100%;height: 0.375rem;background: #fff;transition: all .2s ease-in-out;top: 50%;transform: translateY(-50%);	border-radius: 0.5rem;	position: relative;}	
  #burger .burger::before,
  #burger .burger::after {content: ''; position: absolute; width: 100%; height: 0.375rem;background: #fff; transition: all .2s ease-in-out; border-radius: 0.5rem;}	
  #burger .burger::before {transform: translateY(-9px);}	
  #burger .burger::after {transform: translateY(9px); width: 75%; right: 0;}	
  #burger.on .burger {transform: translateX(-50px);background: transparent;}	
  #burger.on .burger::before,
  #burger.on .burger::after {background: #1a1a1a; }
  #burger.on .burger::before {transform: rotate(45deg) translate(35px, -35px); }	
  #burger.on .burger::after {transform: rotate(-45deg) translate(35px, 35px); width: 100%; }  
  #burger:hover .burger::after {width: 100%;}

  #gnb_m {display: block;height: calc(100% - 80px); width: 100%;position: fixed; left: 0; top: 0; opacity: 0; transition: .5s; pointer-events: none; top: 80px; background-color: #fff; z-index: 1;}
  #gnb_m.on { opacity: 1; pointer-events: auto; }   
  #gnb_m .gnb_wrap {position: relative; height: calc(100% - (3.125rem * 2 + 2.25rem));  -ms-overflow-style: none; scrollbar-width: none;  overflow: scroll; width: 80%;}
  #gnb_m .gnb_wrap::-webkit-scrollbar {display: none;} 
  #gnb_m .inner {margin: 0 auto; border: 0; position: relative;}    
  #gnb_m.on .inner::before, #gnb_m.on .inner::after  {width: 90%;} 
  #gnb_m .gnb .menu {cursor: auto;}
  #gnb_m .gnb>.menu>span { padding: 2.5rem 0; display: flex; position: relative; cursor: pointer; transition: all .3s ease;  font-weight: 700;}
  #gnb_m .gnb>.menu.sp>span::after {content: '＋'; font-size: 24px;  color: var(--dark-gray); text-align: center; transition: .3s;}
  #gnb_m .gnb>.menu.sp>span.active::after {content: '－';}
  #gnb_m .gnb>.menu>.submenu_wrap {padding: 2.5rem 0 2.5rem 10%; display: none; }
  #gnb_m .gnb>.menu>.submenu_wrap li {padding: 2.5rem 0;}
  #gnb_m .gnb>.menu>.submenu_wrap li:nth-child(1) {padding-top: 0;}
  #gnb_m .gnb>.menu>.submenu_wrap li:last-child {padding-bottom: 0;}

  #q_contact {width: 8.25rem; height: 8.25rem; bottom: 4.6875rem; right: 2.500rem;}
  #q_contact::after {width: 7rem; height: 7rem;}
  #q_contact .font-16 {font-size: 1.2rem;}

}
@media (max-width: 500px) {
  #gnb_m .gnb_wrap {width: 85%;}
}

.container_max {max-width: 1800px; margin: auto;}

@media (max-width:1550px) {
  .container_max {width:90%;margin:auto;padding: 0;} 
}

#footer {background-color: #030303;}
#footer #btn_top {width: 3.750rem;  height: 3.750rem; border-radius: 50%; background-color: #fff; cursor: pointer;}
#footer #btn_top p {letter-spacing: 0;}

#footer .info p {line-height: 1;}
#footer .info .tel p {text-wrap: nowrap;}

#footer .flexList {--y-gap: 1.625rem; max-width: 1300px; padding-right: 1rem;}
#footer .flexList > .box {width: calc((70% - 4.5rem) / 3);}
#footer .flexList > .box:nth-child(2),
#footer .flexList > .box:nth-child(6) {width: 17.5%;}
#footer .flexList > .box:nth-child(4) {width: 32.5%;}

#footer .flexList > .box p {letter-spacing: -.3px;}
#footer .flexList > .box p a {color: #fff !important;}

#footer .btn_link {border-top: 1px solid rgba(255,255,255,.2); width: 100%;}
#footer .btn_link ul li {position: relative;}
#footer .btn_link ul li::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 1rem; background-color: rgba(255,255,255,.2);}
#footer .btn_link ul li:last-child::after {display: none;}

.sns_wrap { position: absolute;  right: calc(3.750rem * 2 - 3.750rem / 3);  gap: 1.5rem; top: 52.5%;  transform: translateY(-50%);}
.sns_wrap li {width: 1.875rem;}
.sns_wrap li:nth-child(1) {width: 1.5625rem;}


@media (max-width:1240px) {
  #footer .info {align-items: flex-start;}
  #footer .flexList {padding-right: 0;}
}

@media (max-width:990px) {
  #footer .logo img {max-width: 14.3125rem;}
  #footer #btn_top {width: 5.25rem; height: 5.25rem; z-index: 5; position: fixed; bottom: calc(4.6875rem + 8.25rem + 1.5rem); right: calc(2.500rem + 8.25rem / 2 - 5.25rem / 2);}
  #footer #btn_top p {font-size: 1.225rem;}

  #footer .flexList {max-width: 750px;}
  #footer .flexList > .box {width: 100% !important;}
  #footer .flexList > .box p:nth-child(1) {width: 50%;}
  #footer .flexList > .box p:nth-child(2) {width: 50%;}
  #footer .flexList > .box:nth-child(4) p {line-height: 1.5;}

  #footer .info .tel  {align-items: flex-start;}
  #footer .info .tel .pb-10 {padding-bottom: 1rem;}

  #footer .sns_wrap {display: none;}

  .sns_wrap { position: fixed;  right: auto; left: 50%; bottom: 0;  gap: 1.5rem; top: auto; transform: translateX(-50%); padding: 3.125rem 0 ; width: 82.5%; justify-content: space-between; align-items: center; background-color: #fff; height: calc(3.125rem * 2 + 2rem);}
  .sns_wrap li  {width: 3.125rem;}
  .sns_wrap li:nth-child(1) {width: 2.75rem;}

}

@media (max-width:480px) {
  #footer .logo img {max-width: 11.25rem;}
  #footer #btn_top {width: 3.750rem; height: 3.750rem; bottom: calc(4.6875rem + 8.25rem + 1.5rem); right: calc(2.500rem + 8.25rem / 2 - 3.750rem / 2);}
  #footer #btn_top p {font-size: 0.875rem;}
  #footer #btn_top img {width: 1rem; height: auto;}
}

/* SubTop (241031) */
.subTop { position: relative; width: 100%; height: 56.25rem; top: 0; left: 0; overflow: hidden; z-index: 1; }
.subTop .subTopBg { position: absolute; top: 0; left: 0; right: 0; width: inherit; height: inherit; }
.subTop .subTopText { z-index: 5; }
.subTop .subTopText .Tit { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 1px; }

/* @media(max-width:768px) {
  .subTop {height: 56.25rem;}
} */