@charset "utf-8";
/* 퍼오고나서 지우기 ===== */
.sec { height: 100vh; background: lightcoral;}
.sec:nth-child(2) { background: #f7f7f7;}
.sec:nth-child(3) { background: #fff;}
/* 퍼오고나서 지우기 ===== */
:root {
  --primary-color: #000;
  --white-color: #fff;
  --secondary-color: #666;
  --accent-color: #1F2288;
  --accent-color2: rgba(31, 34, 136, 0.04);
  --bg-sub-color: #F7F7F8;
  --border-color: #ddd;
}
.wrap { position: relative;}
.inner { max-width: 1520px; margin: 0 auto; width: 90%; }
.inner.large { max-width: 1610px;}
.inner-left { padding-left: calc(max((100vw - 1500px) / 2, 5vw)) !important;}
.inner-right { padding-right: calc(max((100vw - 1500px) / 2, 5vw)) !important;}
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.hide { position: absolute; left: -9999%; font-size: 0; height: 0; line-height: 0; text-indent: -9999px;}
h1 { font-size: 80px; font-weight: bold; line-height: normal; }
h2 { font-size: 50px; font-weight: bold;}
h3 { font-size: 40px; font-weight: bold;}
h4 { font-size: 32px; font-weight: bold;}
h5 { font-size: 24px; font-weight: bold;}
.mo { display: none;}
.li-dot { position: relative; padding-left: 10px;}
.li-dot::before { content: ''; display: block; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; border-radius: 50%; background: var(--secondary-color);}
:lang(en) .li-dot::before{top:7px;}
.sub-heading { font-size: 20px; font-weight: 500; color: #666; margin-bottom: 5px;}
.w-100 { width: 100%; }
.h-fit { height: fit-content !important;}
.p-0 { padding: 0 !important;}
.pb-0 { padding-bottom: 0 !important;}
.m-0 { margin: 0 !important;}
.tac { text-align: center !important;}
.tal { text-align: left !important;}
.tar { text-align: right !important;}
.accent { vertical-align: baseline; color: var(--accent-color); display: inline;}
.grid-box { display: grid; }
.flex-box { display: flex; }
.sticky { position: sticky; top: 0;}
figure { position: relative; width: 100%; height: 0; padding-bottom: 50%; overflow: hidden; }
figure img,
figure video,
figure iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.img-box img,
figure img { display: block;}
.view { font-weight: 700; }
.view-more { width: 28px; height: 28px; background: url(/images/view-more-basic.png) no-repeat center/auto 100%; margin-left: 14px;}
.view-more.black { background: url(/images/view-more.png) no-repeat center/auto 100%;}
.view-more.white { background: url(/images/view-more-white.png) no-repeat center/auto 100%;}
.heading-sub { font-size: 20px; color: var(--accent-color); margin-bottom: 20px;}
.sec-wrap { display: flex; flex-direction: column; min-height: 100vh;}
.sec-group { position: relative;}
.dot { width: 5px; height: 5px; border-radius: 50%; background: #151515;}
.swiper-btns { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-bottom: 28px;}
.swiper-btns .swiper-button-prev,
.swiper-btns .swiper-button-next { position: static; margin: 0; width: 70px; height: 70px; background: url(/images/swiper-arrow.png) no-repeat center/auto 100%;}
.swiper-btns .swiper-button-prev { transform: scaleX(-1);}
.swiper-button-next:after, .swiper-button-prev:after { display: none;}
.btns-group { display: flex; align-items: center;}
.down-btn { display: flex; align-items: center;}
.content-top .text { font-size: 20px; color: #333;}
.read-more { padding: 5px 24px; height: 47px; display: flex; align-items: center; gap: 10px; border-radius: 35px; border: 1px solid #E8E8E8; font-size: 16px; font-weight: 600; backdrop-filter: blur(20px); background: rgba(255,255,255,.6); width: fit-content; color: initial; font-family:'RobotoCondensed';  overflow:hidden; transition:all ease .6s; }
.read-more .dot{position:relative;  z-index:-1;}
.read-more:hover {color: #fff; gap:0; text-indent:5px;}
.read-more:hover .dot{transform:scale(50); transition:all ease .6s; }
.heading-desc { font-size: 22px; font-weight: 500; margin-top: 30px;}
.desc { color: var(--secondary-color);}
.swiper-button-next, .swiper-button-prev { background: url(/images/slide-arrow.png) no-repeat center/cover; width: 50px; height: 50px;}
.swiper-button-next { right: 0; margin-right: -25px;}
.swiper-button-prev { transform: scaleX(-1); left: 0; margin-left: -25px;}
@media screen and (max-width:1024px) {
  h1 { font-size: 60px;}
  h2 { font-size: 40px;}
  h3 { font-size: 32px;}
  h4 { font-size: 24px;}
  h5 { font-size: 20px;}
}
@media screen and (max-width:767px) {
  h1 { font-size: 24px;}
  h2 { font-size: 22px;}
  h3 { font-size: 22px;}
  h4 { font-size: 18px;}
  h5 { font-size: 18px;}
  .pc { display: none;}
  .mo { display: block;}
  .heading-sub { font-size: 16px; margin-bottom: 10px;}
  .heading-desc { font-size: 16px; margin-top: 10px;}
  .dot { width: 3px; height: 3px;}
  .swiper-btns { gap: 10px; margin-bottom: 10px;}
  .swiper-btns .swiper-button-prev, .swiper-btns .swiper-button-next { width: 30px; height: 30px;}
  .view-more { width: 18px; height: 18px; margin-left: 5px;}
  .swiper-button-next, .swiper-button-prev { width: 30px; height: 30px;}
  .swiper-button-prev { margin-left: -10px;}
  .swiper-button-next { margin-right: -10px;}
  .read-more { height: 40px; font-size: 14px; padding: 5px 20px;}
}
/* ico */
.ico-scroll-down { width: 14px; height: 14px; background: url(/images/ico-scroll-down.svg) no-repeat center/ contain; display: inline-block;}
.ico-brank { width: 17px; height: 17px; background: url(/images/ico-brank.png) no-repeat center/ contain; display: inline-block;}
.ico-arrow-light { width: 14px; height: 8px; background: url(/images/ico-arrow-light.svg) no-repeat center/ contain; display: inline-block;}
.ico-down { width: 14px; height: 14px; background: url(/images/ico-down.svg) no-repeat center/ contain; display: inline-block;}
.ico-mail-accent { width: 20px; height: 20px; background: url(/images/ico-mail-accent.png) no-repeat center/ contain; display: inline-block;}
.ico-phone-accent { width: 20px; height: 20px; background: url(/images/ico-phone-accent.png) no-repeat center/ contain; display: inline-block;}
.ico-fax-accent { width: 20px; height: 20px; background: url(/images/ico-fax-accent.png) no-repeat center/ contain; display: inline-block;}
.ico-pin-accent { width: 20px; height: 20px; background: url(/images/ico-pin-accent.png) no-repeat center/ contain; display: inline-block;}
@media screen and (max-width: 768px) {
  .ico-down-green { width: 30px; height: 30px; margin-left: 10px;}
}

/* header */
.header { position: fixed; width: 100%; height: 100px; background: transparent; z-index: 10;}
.header .header-inner { max-width: 1800px; width: 95%; height: 100%; margin: 0 auto; position: relative;}
.header .logo { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 200px; height: 34px; background: url(/images/logo-hd.svg) no-repeat center center/ contain; z-index: 3;}
.header .gnb { position: absolute; top: 0; display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden; z-index: 2; transition: background 0.5s, right 0.3s;}
/* .header .gnb::before { content:''; display: none; position: absolute; top: 100px; left: 0; width: 100%; height: 1px; background: #ddd;} */
.header .gnb .depth1 { display: flex;}
.header .gnb .depth1 > li { width: 9rem; transition: width 0.3s;}
.header .gnb a { padding: 10px 30px; font-weight: 500; display: flex;}
/* .header .gnb .depth1 > li { width: 10.2em;} */
.header .gnb .depth1 > li > a { padding: 15px 30px; position: relative; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; white-space: nowrap; pointer-events: none;}
.header .gnb .depth1 > li > a::after { content: ''; display: block; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0px; height: 2px; background: var(--accent-color); transition: 0.2s;}
.header .gnb .depth1 > li > a::before { content: ''; display: none; width: 20px; height: 20px; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); background: url(/images/ico-arrow.png) no-repeat center/cover; filter: invert(1);}
.header .gnb .depth2{ position: relative; padding:30px 0 60px;}
.header .gnb .depth2 > li { overflow: hidden;}
.header .gnb .depth2 > li > a { display: block; text-align: center; font-size: 17px; font-weight: 500; padding: 10px 0;  }
.header .gnb .depth2 > li > a:has(+ ul)::after { content: ''; display: inline-block; width: 13px; height: 7px; background: url(/images/ico-arrow-light.svg) no-repeat center / auto 100%; filter: invert(1); margin-left: 5px; vertical-align:middle; margin-top: -2px;}
.header .gnb .depth2 > li > a[aria-expanded="true"]{color: var(--accent-color);}
.header .gnb .depth2 > li > a[aria-expanded="true"]::after { transform: scaleY(-1);}
.header .gnb .depth2 ul { opacity: 0; visibility: hidden; max-height: 0;}
.header .gnb .depth2 ul a { text-align: center; justify-content: center; padding: 5px; font-size: 16px; color: #666; font-weight: 400;}
.header .gnb .close { display: none; position: fixed; top: 30px; right: 2.5%; width: 40px; height: 40px; }
.header .gnb .close a { display: block; width: 100%; height: 100%; }
.header .gnb .close .circle::before, .header .gnb .close .circle::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 26px; height: 2px; background: #fff; }
.header .gnb .close .circle::before { transform: rotate(45deg); }
.header .gnb .close .circle::after { transform: rotate(-45deg); }
/* 임시로 안보이게 */
.header-right { position: absolute; top: 50%; right: 5%; transform: translateY(-50%); display: flex; gap: 20px; z-index: 9; align-items:center;}
.header-right .header-language ul { display: flex; gap: 25px; position: relative; }
.header-right .header-language ul::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin-top: -6px; width: 1px; height: 12px; background: rgba(255,255,255,.5); z-index: -1;}
.header-right .header-language ul li{display:flex; align-items:center;}
.header-right .header-language ul li a { font-size: 16px; color: #fff; opacity: .5; vertical-align:middle;}
.header-right .header-language ul li a.active { opacity: 1;}
.header .external-btn{display: inline-flex;gap: 10px;align-items: center; border:1px solid rgba(255,255,255,0.4); color: #fff; padding:11px 19px !important; font-size: 14px; border-radius:50px; font-weight: 500;}
.header .external-btn .ico-brank{width: 15px; height: 15px; }
.header .header-right .external-btn .ico-brank{ filter: brightness(0) invert(1);}
.header .nav .external-btn{display:none; margin-top: 30px; }
.header-contact { z-index: 2; position: absolute; top: 50%; right: calc(5% + 70px); transform: translateY(-50%); }
.header-contact a { background: rgba(0,0,0,.7); color: #fff; font-size: 14px; font-weight: 500; width: 110px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 35px;}
.header .hamburger { display: none; width: 25px; height: 20px; z-index: 9;}
.header .hamburger a { overflow: hidden; display: block; position: relative; width: 100%; height: 100%; background: url(/images/ico-menu.png) no-repeat center/auto 100%;}
.hamburger span:not(.hide) { display: block; width: 100%; height: 2px; background: #000; position: absolute; left: 0; transition: all 0.3s ease; }
.hamburger span:nth-child(1) { top: 0px; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0px;}
.header[data-header-type='white'] .hamburger span:not(.hide) { background: #fff;}
.header[data-header-type='white'] .logo { background-image: url(/images/logo-hd-light.svg);}
.header[data-header-type='white'] .gnb .depth1 > li > a { color: #fff;}
.header[data-header-type='white'] { background: transparent;}
.header[data-header-type='white'] .header-search { background-image: url(../images/hd-search-light.png);}
.header[data-header-type='white'] .logo-bobcat .logo-img { background-image: url(../images/logo-bobcat-light.png); }
.header[data-header-gnb='opened'] .gnb{position:relative;}
.header[data-header-gnb='opened'] .gnb:before{content:''; width:100%; height:1px; position:absolute; left:0; top:100px; border-bottom:1px solid #e8e8e8;}
.header[data-header-gnb='opened'] .gnb { background: #fff;}
.header[data-header-gnb='opened'] .gnb .depth1 > li { width: 11rem;}
.header[data-header-gnb='opened'] .gnb .depth1 > li > a,
.header[data-hamburger='opened'] .gnb .depth1 > li > a { color: var(--primary-color);}
.header[data-header-gnb='opened'] .header-language ul::before { background: rgba(0,0,0,.5);}
.header[data-header-gnb='opened'] .header-language ul li a { color: rgba(0,0,0,.5);}
.header[data-header-gnb='opened'] .header-language ul li a.active { color: #000;}
.header[data-header-gnb='opened'] .header-right .external-btn{border-color:#ddd; color:#333;} 
.header[data-header-gnb='opened'] .header-right .external-btn .ico-brank{filter:none;}
.header[data-header-gnb='opened'] .logo,
.header[data-hamburger='opened'] .logo { background-image: url(/images/logo-hd.svg);}
.header[data-header-gnb='opened'] .header-search,
.header[data-hamburger='opened'] .header-search { background-image: url(../images/hd-search.png);}
.header[data-header-gnb='opened'] .logo-bobcat .logo-img,
.header[data-hamburger='opened'] .logo-bobcat .logo-img { background-image: url(../images/logo-bobcat.png); }
.header[data-header-sticky='true'] { background: #fff; border-bottom:1px solid #e8e8e8;}
.header[data-header-sticky='true'] .header-language ul::before { background: rgba(0,0,0,.5);}
.header[data-header-sticky='true'] .header-language ul li a { color: rgba(0,0,0,.5);}
.header[data-header-sticky='true'] .header-language ul li a.active { color: #000;}
.header[data-header-sticky='true'] .gnb { background: #fff;}
.header[data-header-sticky='true'] .gnb .depth1 > li > a { color: var(--primary-color);}
.header[data-header-sticky='true'] .logo { background-image: url(/images/logo-hd.svg);}
.header[data-header-sticky='true'] .header-search { background-image: url(../images/hd-search.png);}
.header[data-header-sticky='true'] .logo-bobcat .logo-img { background-image: url(../images/logo-bobcat.png); }
.header[data-header-sticky='true'] .hamburger span:not(.hide) { background: #000;}
.header[data-header-sticky='true'] .header-right .external-btn{border-color:#ddd; color:#333;}
.header[data-header-sticky='true'] .header-right .external-btn .ico-brank{filter:none;}
.header[data-hamburger='opened'] .hamburger span { background: #000 !important;}
.header[data-hamburger='opened'] .hamburger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.header[data-hamburger='opened'] .hamburger span:nth-child(2) { opacity: 0; }
.header[data-hamburger='opened'] .hamburger span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
.header[data-hamburger='opened'] .gnb { right: 0;}
.header[data-hamburger='opened'] .header-language ul::before { background: rgba(0,0,0,.5);}
.header[data-hamburger='opened'] .header-language ul li a { color: rgba(0,0,0,.5);}
.header[data-hamburger='opened'] .header-language ul li a.active { color: #000;}
.header[data-hamburger='opened'] .external-btn{border-color:#ddd; color:#333;} 
.header[data-hamburger='opened'] .header-right .external-btn .ico-brank{filter:none;}

.wrap::before{content:''; width:100%; height:100%; position:fixed; top:0; left:0; background: rgba(0,0,0,0.5); z-index:2; opacity:0; visibility:hidden;}
.wrap:has(.header[data-header-gnb='opened']):before{opacity:1; visibility:visible;  transition: all 0.3s ease; }


/* .header[data-hamburger='opened'] .gnb::before { content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -1; position: absolute; top: 0; left: 0;} */
@media (hover: hover) and (pointer: fine) and (min-width: 1240px) {
    .header-nav .lists > li:hover .link { color: #097CD3; }
    .header-nav .lists > li:hover .sub-lists { background: #F9F9F9; }
    .header-nav .sub-lists .sub-link:hover,
    .header-nav .child-lists .child-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
    .header .gnb .depth1 > li:hover > a{ color: var(--accent-color);}
    .header .gnb .depth1 > li:hover > a::after { width: 70px; }
    .header .gnb .depth2 > li a:hover { color: var(--accent-color); font-weight: 500;} 
    .header-contact a:hover { background: #000;} 
}
@media screen and (max-width: 1400px) {
  /* .header .gnb .depth1 > li { width: 9em;} */
  .header .gnb .depth1 > li > a { padding: 15px 25px;}
  .header .gnb .depth1 > li > a { white-space: nowrap;}
}
@media screen and (max-width: 1200px) {
  .header .gnb { background: #fff;}
  .header .gnb a { padding: 20px 0%;}
  .header .gnb .nav { width: 90%; margin: 0 auto;}
  .header .hamburger { right: 5%; display: block;}
  .header-language { right: calc(5% + 50px);}
  .header-contact { right: calc(5% + 110px);}
  .header .gnb { position: fixed; top: 0; right: -100%; width: 100%; height: 100svh; justify-content: flex-end;}
  .header .gnb a { position: relative; }
  .header .gnb .nav { margin-top: 92px; overflow-y: auto; width: 100%; padding: 0 5%;}
  .header .gnb .depth1 { flex-direction: column; overflow-y: auto;}
  .header .gnb .depth1 > li { width: 100%; }
  .header .gnb .depth1 > li > a { text-align: left; padding: 10px 0; height: fit-content; font-size: 22px; justify-content: flex-start; pointer-events: auto;}
  .header .gnb .depth2 { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; padding: 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
  .header .gnb .depth2 > li > a { text-align: left; padding:6px 0; font-size: 20px;}
  .header .gnb .depth1 > li > a:after { content: ''; display: block; width: 14px; height: 8px; background: url(/images/ico-arrow-light.svg) no-repeat center/auto 100%; position: absolute; left:auto; right: 0; top: 50%; transform: translateY(-50%); filter: invert(1);}
  .header .gnb .depth1 > li > a[aria-expanded="true"]:after{ transform: translateY(-50%) scaleY(-1); margin-top: -1px;}
  .header .gnb .depth2 > li > a[aria-expanded="true"]:after { transform: translateY(-50%) scaleY(-1); margin-top: 3px;}
  .header .gnb .depth2 > li > a[aria-expanded="true"]{color: var(--accent-color);}
  .header .gnb .depth2 li:first-child > a { padding-top: 20px;}
  .header .gnb .depth2 li:last-child > a { padding-bottom: 20px;}
  .header .gnb .depth2 ul{background: #f7f7f8; padding-left: 20px; padding-right: 20px;}
  .header .gnb .depth2 ul a{justify-content:flex-start; font-size: 16px;} 
  .header-language { right: calc(2.5% + 60px);}
  .header .hamburger { display: block;}
}
@media screen and (max-width: 768px) {
  .header { height: 80px;}
  .header .logo { width: 142px; height: 24px; left: 5%;}
  .header .hamburger { right: 5%;}
  .header-language { right: calc(5% + 50px);}
  .header .gnb .depth1 > li > a { font-size: 20px;}
  .header .gnb .depth2 > li > a { font-size: 18px; padding: 6px 0 6px 10px;}
  .header-contact { display: none;}
  .header-right .header-language ul li a{font-size: 14px;}
  .header-right .external-btn{display:none;}
  .header .nav .external-btn{display:inline-flex;}
}


/* footer */
footer { padding: 70px 0; background: #151515; color: #fff; margin-top: auto; }
footer .inner { display: flex; flex-direction: column; }
footer a { color: #fff; }
footer .content-top { display: flex; justify-content: space-between; align-items:center; gap: 50px; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.15);}
footer .content-bottom { padding-top: 50px;}
footer .company-name { font-size: 20px; font-weight: 600; margin-bottom: 20px; flex: 0 0 100%;}
footer .info-row { display: flex; flex-wrap: wrap; gap: 10px 20px; width: auto;}
footer .info-item { display: flex; gap: 3px; font-size: 16px;}
footer .info-item dd { color: #aaa;}
footer .info-item dd a { color: inherit;}
footer .info-item:first-child { flex: 0 0 100%;}
footer .footer-info { display: flex; justify-content: space-between; align-items: flex-end;}
footer .footer-links { display: flex; justify-content: space-between; }
footer .footer-links .link-list { display: flex; gap: 30px;}
footer .footer-links .link-list a,
footer .footer-links .link-list button { color: rgba(255,255,255,.5); font-size: 16px;  }
footer .footer-links .link-list li:nth-child(2) a,
footer .footer-links .link-list li:nth-child(2) button { color: #fff; font-weight: 600;}
footer .footer-links .copyright { font-size: 16px; color: rgba(255,255,255,.5);}
footer .site-wrap { position: relative; width: 280px; cursor: pointer; padding: 17px 30px; display: flex; align-items: center; margin-left: auto; border-radius: 35px; background: #000;}
footer .site-wrap .btn-site { color: #fff; font-weight: 500; font-size: 16px; }
footer .site-wrap .ico { margin-left: auto; transform: rotate(180deg);}
footer .site-wrap .familyLink { width: 100%; position: absolute;  display: none; bottom: 100%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(160, 160, 160, 0.2); background: #333; padding:20px 10px; border-radius:10px;}
footer .site-wrap .familyLink li a { font-size: 16px; line-height: 25px; letter-spacing: 0; color: #aaa;  padding: 5px 20px; display: block;}
footer .site-wrap.open .icon_box { border-top: 0; border-bottom: 10px solid #5285a2}
footer .site-wrap.active .familyLink { display: block;}
footer .site-wrap.active .ico { transform: rotate(0deg);}
footer .copyright { font-size: 14px; color: rgba(255,255,255,.5); margin-top: 60px; }
@media (pointer: fine) {
  footer dd a:hover { text-decoration: underline; text-underline-offset: 5px;}
  footer .footer-link li a:hover { text-decoration: underline; text-underline-offset: 5px;}
  footer .footer-sns li a:hover .icon { opacity: 1;}
  footer .site-wrap:hover { border-color: #fff;}
  footer .site-wrap .familyLink li a:hover { color: #fff;}
}
@media screen and (max-width: 1240px) {
  footer .sitemap { display: none;}
}
@media screen and (max-width: 1024px) {
  .main-foot .grid-box { gap: 10px; margin-top: 0;}
  .main-foot .grid-box article { padding: 52px 20px;}
  .main-foot > .inner { justify-content: center;}
}
@media screen and (max-width: 768px) {
  footer { padding: 30px 0 35px; }
  footer .content-top { margin-bottom: 15px; gap:25px; padding-bottom: 15px;}
  .main-foot > .inner { padding-top: 92px; padding-bottom: 30px; justify-content: center; flex-grow: 1;}
  .main-foot .grid-box { grid-template-columns: repeat(1, 1fr); margin-top: 0;}
  .main-foot .grid-box article { padding: 20px 30px;}
  .main-foot .grid-box article .title { font-size: 20px; margin-bottom: 5px;}
  .main-foot .grid-box article .desc { margin-bottom: 10px;}
  .main-foot .grid-box article .img-box img { width: 8%;}
  .main-foot .grid-box article::after { width: 17px; height: 11px;}
  footer .phone a { pointer-events: auto; font-size: 20px;}
  footer .phone { margin-bottom: 10px;}
  footer .footer-link { margin-bottom: 10px; display: flex; gap: 10px;}
  footer .footer-link li a { font-size: 14px;}
  footer .content-bottom { flex-wrap: wrap;} 
  footer .site-wrap .btn-site { font-size: 14px;}
  footer .logo-box { order:2;}
  footer .logo-box img { width: 70%;}
  footer .copyright { order:3; margin-left: auto; margin-top: 20px;}
  footer .site-wrap { margin-top: 20px; width: 100%;  padding: 14px 20px;}
  footer .site-wrap .familyLink { padding: 20px 0;}
  footer .site-wrap .familyLink li a { padding: 4px 20px; font-size: 14px;}
  .is-ios footer .inner {position: relative; bottom: 6%;}
  .is-ios footer .site-wrap {padding: 14px 20px;}
  footer .footer-links .link-list { gap: 10px  ; flex-wrap: wrap;}
  footer .content-bottom { padding-top: 20px;}
  footer .footer-info { flex-wrap: wrap;}
  footer .info-item dt { font-size: 14px;}
  footer .info-item dd { font-size: 14px;} 
  footer .footer-links .link-list a,
  footer .footer-links .link-list button { font-size: 13px;  }
  footer .info-row{gap:5px 20px;}
}

/* Floating */
.floating-container { display: none; z-index: 10; position: fixed; bottom: 50px; right: 50px; }
.floating-container.active { display: block; }
.floating-container .scroll-to a { display: block; margin: auto; width: 50px; height: 50px; background: url("../img/icon-top.png") no-repeat center / auto 100%; border-radius: 50%; transition: ease .6s; margin-top: 5px; background: blue;;}
.floating-container .scroll-to a.btn-kakao { background: url("../img/icon-kakao.png") no-repeat center / auto 100%;}
@media screen and (max-width: 768px) {
  .floating-container { right: 5%; bottom: 24px;}
  .floating-container .scroll-to a { margin-top: 10px;}
}

/* dragwrap */
.dragwrap { position: absolute;   width: 120px; aspect-ratio: 1; background: rgba(0, 1, 37, 0.2); backdrop-filter: blur(20px); color: #fff; text-align: center; place-content: center; border-radius: 50%; overflow: hidden; z-index: 1; animation: dragBounce 2s ease-in-out infinite; pointer-events: none;  transform: translate(-50%, -50%);  }
.dragwrap .drag { font-family: 'SUIT'; letter-spacing: 0; font-size: 16px; font-weight: 700;}
.dragwrap .drag span{margin:0 5px;}
@font-face {
  font-family: 'SUIT';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@keyframes dragBounce {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

.swiper-pagination-progressbar { position: static; margin-top: 80px; background: #E8E8E8;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--accent-color);}
.progress-track { width: 100%; height: 4px; background-color: #E8E8E8; border-radius: 2px; overflow: hidden; margin-top: 20px; display: block;}
.progress-track .progress-bar { height: 100%; background-color: var(--accent-color); border-radius: 2px; transition: width 0.3s ease; width: 0%; }
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {
  /* .progress-track { display: block;} */
  .dragwrap { width: 100px;}
  .dragwrap .drag { font-size: 14px;}
  .swiper-pagination-progressbar{margin-top: 40px;}
}