@charset "UTF-8";
@import url(./fonts.css);


* {margin: 0; padding: 0; letter-spacing: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact;  word-break: keep-all; overflow-wrap: break-word;}
html {width: 100%; height: 100%; font-size: 0.052vw;}
body {position: relative; font-family: "Pretendard-Regular", sans-serif; font-weight:normal; font-size: 16rem; letter-spacing: 0; color: var(--Color-Gray-900); line-height: 130%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; overflow-x: hidden;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {margin: 0; padding: 0; font-weight: normal;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top;}
legend, caption {overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
textarea, button {vertical-align: middle;}
option {padding: 10px;}
input[type="radio"], input[type="checkbox"] {border: 0; padding: 0;  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
select {padding: 5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea {padding: 20rem; vertical-align: middle; background: #fff; border: 1px solid #E0E0E0; font-family: "Pretendard-Regular", sans-serif; color: var(--Color-Gray-900);; letter-spacing: -.04rem; font-size: max(16rem, 12px); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; resize: vertical;}
a {text-decoration: none; color: #000;}
a:hover, a:focus, a:active {text-decoration: none;}
table {border-collapse: collapse; width: 100%;}
button {background: none; border: none; padding: 0; margin: 0; cursor: pointer; overflow: visible; white-space: nowrap; font-size: max(16rem, 12px); font-family: "Pretendard-Regular", sans-serif; color:#000;}
button:active {outline: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
strong, b {font-family: "Pretendard-Regular", sans-serif;}
th {font-family: "Pretendard-Regular", sans-serif;}
input:focus, select:focus, option:focus, button:focus{outline: none;}
textarea:focus {outline: 1px solid #00AD1D;}
textarea::placeholder {color: #919593;}
.swiper-button-prev:after, .swiper-button-next:after{display:none;}

/* input reset */
button, select {cursor: pointer;}
input:disabled, textarea:disabled, button:disabled, select:disabled {cursor: default;}
input:read-only, textarea:read-only {cursor: default;}

textarea {appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-box-shadow: none; padding: 0; box-shadow: none; border-radius: 0; resize: none;}

input {appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; -webkit-box-shadow: none; box-shadow: none;}
input::-ms-clear {display: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}
input[type="password"]::-ms-reveal {display: none;}

select {appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; font-family: "Inter-Regular", "NotoSansKR-Regular", sans-serif; font-weight: 400;}
select::-ms-expand {display: none;}

select {background: transparent; border: none;}
input {padding: 0; margin: 0; border: none;}

input:focus, input:active {outline: none;}
select:focus, select:active {outline: none;}
option:focus, option:active {outline: none;}
textarea:focus, textarea:active {outline: none;}

/* 읽기전용 */
input[type="text"][readonly], input[type="text"]:-moz-read-only,
input[type="password"][readonly], input[type="password"]:-moz-read-only,
input[type="tel"][readonly], input[type="tel"]:-moz-read-only,
input[type="number"][readonly], input[type="number"]:-moz-read-only {}

/* placeholder */
input[type="text"]::placeholder, input[type="text"]::-webkit-input-placeholder, input[type="text"]::-moz-placeholder, input[type="text"]::-ms-input-placeholder,
input[type="password"]::placeholder, input[type="password"]::-webkit-input-placeholder, input[type="password"]::-moz-placeholder, input[type="password"]::-ms-input-placeholder,
input[type="tel"]::placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="tel"]::-moz-placeholder, input[type="tel"]::-ms-input-placeholder,
input[type="number"]::placeholder, input[type="number"]::-webkit-input-placeholder, input[type="number"]::-moz-placeholder, input[type="number"]::-ms-input-placeholder {}

/* disabled */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
select:disabled {}

/* disabled - placeholer */
input[type="text"]:disabled::placeholder, input[type="text"]:disabled::-webkit-input-placeholder, input[type="text"]:disabled::-moz-placeholder, input[type="text"]:disabled::-ms-input-placeholder,
input[type="password"]:disabled::placeholder, input[type="password"]:disabled::-webkit-input-placeholder, input[type="password"]:disabled::-moz-placeholder, input[type="password"]:disabled::-ms-input-placeholder,
input[type="tel"]:disabled::placeholder, input[type="tel"]:disabled::-webkit-input-placeholder, input[type="tel"]:disabled::-moz-placeholder, input[type="tel"]:disabled::-ms-input-placeholder,
input[type="number"]:disabled::placeholder, input[type="number"]:disabled::-webkit-input-placeholder, input[type="number"]:disabled::-moz-placeholder, input[type="number"]:disabled::-ms-input-placeholder {}


a {text-decoration: none; color: var(--Color-Gray-90);}
a:hover, a:focus, a:active {text-decoration: none;}
table {width: 100%; border-collapse: collapse;}
button {background: none; border: none; padding: 0; margin: 0; font-family: "NotoSansKR-Regular", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; cursor: pointer; overflow: visible; white-space: nowrap; color: var(--Color-Gray-90);}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}


/* --------------------------------------------- Common START --------------------------------------------- */
:root {
  /* color */
  --Color-Gray-900: #1A1A1A;
  --Color-Gray-800: #4D4D4D;
  --Color-Gray-700: #666;
  --Color-Gray-500: #999;
  --Color-Gray-400: #CCC;
  --Color-Gray-300: #D9D9D9;
  --Color-Gray-200: #E5E5E5;
  --Color-Gray-100: #F0F0F0;
  --Color-Gray-50: #F5F5F5;
  --Color-Gray-White: #FFF;
  --Color-Gray-Black: #000;

  --Color-Green-Primary: #008233;
  --Color-Blue-Primary: #003087;
  --Color-Blue-Light:#F1F4F8;
  
  --Color-Red: #EC0808;
  --Color-Orange: #C25400;

  --Color-Blue-900: #001023;
  --Color-Blue-500: #002554;

  --Color-Green-500: #00AD1D;
  --Color-Green-Eco: #00E600;

  /* border-radius */
  --border-radius-xs: 4rem;
  --border-radius-sm: 8rem;
  --border-radius-md: 12rem;
  --border-radius-lg: 24rem;
  --border-radius-full: 50%;

  /* transition */
  --transition-icon: all 0.4s ease;
  --transition-default: all 1s ease;
}

.stop-scroll{overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
.inner {width: 1220rem; margin: 0 auto;}
/* @ 브라우저 높이보다 컨텐츠양이 적을때 경우 대비 min-height추가 */
#contents{/*overflow:hidden;*/ padding:260rem 0 200rem; width:100%; min-height: calc(100dvh - 270rem)/* footer height 270 */;}

#wrap{overflow:hidden;position:relative;}

.only-mo {display: none !important;}
.only-pc {display: block !important;}

.no-pb{padding-bottom:0 !important;}
.no-pt{padding-top:0 !important;}
.no-ptb{padding-top:0 !important; padding-bottom: 0 !important;}

.sub-tit-area .f-d2{margin-bottom:80rem;}
.sub-tit-area:has(.bg-tab-menu){margin-bottom:120rem;}
.sub-tit-area:has(.bg-tab-menu) .f-d2{margin-bottom:60rem;}
.sub-tit-area .border-tab-menu{margin-top:24rem;}

.cont-area:not(:first-child){margin-top:240rem;}
.cont-area.mt-140 {margin-top: 140rem;}
.cont-sec:not(:first-child){margin-top:160rem;}
.cont-sec.blue-bg{position: relative; padding:160rem 0;}
.cont-sec.blue-bg:after{display:block; content:""; position:absolute; top:0; left:50%; transform: translateX(-50%); width:100vw; height:100%; background:var(--Color-Blue-Light); z-index:-1;}
.sub-tit-area + .cont-sec{margin-top:0 !important;}
.cont-box:not(:first-child){margin-top:100rem;}
.cont-div:not(:first-child){margin-top:80rem;}
.article-area .cont-div:not(:first-child){margin-top:60rem;}
.sub-tit-area + .cont-sec{transition-delay: 0.3s !important;}
.sub-tit-area + .cont-sec .cont-div:first-child{transition-delay: 0.3s !important;}
.sub-tit-area:has(.border-tab-menu) + .cont-sec{transition-delay: 0.45s !important;}
.sub-tit-area:has(.border-tab-menu) + .cont-sec .cont-div:first-child{transition-delay: 0.45s !important;}

.align-right{justify-content: flex-end !important;}
.align-center{justify-content: center !important;}
.align-left{justify-content: flex-start !important;}
.align-space-between{justify-content: space-between !important;}

.f-black {color: var(--Color-Gray-900);}
.f-gray {color: var(--Color-Gray-800);}

@media screen and (max-width: 1024px) {
  :root {
    --border-radius-lg: 16rem;
  }

  html {font-size: .130vw;}

  #wrap{overflow:hidden;}

  #contents{padding:150rem 0 120rem;}

  .inner {width: calc(100% - 32rem);}

  .only-mo {display: block !important;}
  .only-pc {display: none !important;}

  /* .sub-tit-area .f-d2{margin-bottom:60rem;} */
  .sub-tit-area:has(.bg-tab-menu){margin-bottom:80rem;}
  .sub-tit-area:has(.bg-tab-menu) .f-d2{margin-bottom:32rem;}
  .sub-tit-area .border-tab-menu{margin-top: 20rem;}

  .cont-area:not(:first-child){margin-top:120rem;}
  .cont-sec:not(:first-child){margin-top:120rem;}
  .cont-sec.blue-bg{padding:120rem 0;}
  .cont-box:not(:first-child){margin-top:80rem;}
}

@media screen and (max-width: 600px) {
  html {font-size: .28vw;}
}
/* --------------------------------------------- Common End --------------------------------------------- */





/* --------------------------------------------- ScrollMotion Start --------------------------------------------- */
/* scroll-motion */
/* @ 기본 모션 */
.scroll-motion:not(.each) {position: relative; opacity: 0; top: 80rem; transition: top 1s ease, opacity 1s ease;}
.scroll-motion.active:not(.each) {opacity: 1; top: 0;}

/* scroll-motion each */
/* @ scroll-motion.each 바로 아래 컨텐츠들이 각각 딜레이로 모션 */
.scroll-motion.each > * {position: relative; opacity: 0; top: 80rem; transition: top 1s ease, opacity 1s ease;}
.scroll-motion.active > * {opacity: 1; top: 0;}
.scroll-motion.each > *:nth-child(2) {transition-delay: .15s;}
.scroll-motion.each > *:nth-child(3) {transition-delay: .3s;}
.scroll-motion.each > *:nth-child(4) {transition-delay: .45s;}
.scroll-motion.each > *:nth-child(5) {transition-delay: .6s;}

/* scroll-motion list 3단 */
/* @ 3단 item 부모에 scroll-scrol클래스 추가하고, item에 scroll-motion클래스 추가 : 아이템들이 각각 딜레이로 모션 */
.scroll-3col .scroll-motion:nth-child(3n-1) {transition-delay: .15s;}
.scroll-3col .scroll-motion:nth-child(3n) {transition-delay: .3s;}
@media all and (max-width: 1024px) {
  .scroll-3col .scroll-motion:nth-child(3n-1) {transition-delay: 0s;}
  .scroll-3col .scroll-motion:nth-child(3n) {transition-delay: 0s;}
  .scroll-3col .scroll-motion:nth-child(2n-1) {transition-delay: .15s;}
  .scroll-3col .scroll-motion:nth-child(2n) {transition-delay: .3s;}
}
@media all and (max-width: 600px) {
  .scroll-3col .scroll-motion:nth-child(2n-1) {transition-delay: 0s;}
  .scroll-3col .scroll-motion:nth-child(2n) {transition-delay: 0s;}
}

/* scroll-motion list 2단 */
/* @ 2단 item 부모에 scroll-scrol클래스 추가하고, item에 scroll-motion클래스 추가 : 아이템들이 각각 딜레이로 모션 */
.scroll-2col .scroll-motion:nth-child(2n) {transition-delay: .15s;}
@media all and (max-width: 600px) {
  .scroll-2col .scroll-motion:nth-child(2n) {transition-delay: 0s;}
}
/* --------------------------------------------- ScrollMotion End --------------------------------------------- */





/* ----------------------------------------- Skip Start ----------------------------------------- */
#skipNavi {position: fixed; top: -9999px; left: 0; right: 0; z-index: 9999; width: 100%; padding: 10rem 20rem; text-align: center; background-color: #000;}
#skipNavi a {color: #fff; font-size: 12rem;}
#skipNavi:has(a:focus) {top: 0;}
/* ----------------------------------------- Skip End ----------------------------------------- */





/* ----------------------------------------- Header Start ----------------------------------------- */
/* [ Header Font ] */
#header nav .menu-list > li .one-dept {font-size: 18rem; font-family: "Pretendard-Bold"; color: var(--Color-Gray-900); line-height: 110%; letter-spacing: -0.36rem; transition: color .2s ease;}
#header nav .menu-list > li .two-menu-list > li .two-dept {font-size: 16rem; font-family: "Pretendard-Bold"; color: var(--Color-Gray-900); line-height: 160%; letter-spacing: -0.32rem; transition: color .2s ease, background .2s ease;}
#header nav .menu-list > li .two-menu-list > li .thr-menu-list > li .thr-dept {font-size: 16rem; font-family: "Pretendard-Medium"; color: var(--Color-Gray-800); line-height: 160%; letter-spacing: -0.32rem; transition: color .2s ease, background .2s ease;}

/* [ Header ] */
/* @ font motion 0.2s, header motion 0.3s */
#header {position: fixed; top: 0; left: 0; right: 0; z-index: 999; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100rem; padding: 0 80rem; border-bottom: 1px solid rgba(0, 0, 0, 0); background-color: #fff; transition: top .3s ease, background .3s ease, border .3s ease;}
#header .logo a {display: block; width: 183rem; height: 28rem; background: url("/common/kr/images/icon-logo.svg") no-repeat center center / 100% auto;}
#header nav {height: 100%;}
#header nav .menu-list > li .depth-btn {display: none;}
#header nav .menu-list {display: flex; align-items: center; height: 100%;}
#header nav .menu-list > li {position: relative; height: 100%;}
#header nav .menu-list > li .one-dept {display: flex; align-items: center; height: 100%; padding: 0 24rem;}
#header nav .menu-list > li .two-menu-wrap {display: none; position: absolute; top: 100%; left: 0; z-index: 1; padding: 24rem; border: 1px solid var(--Color-Gray-200); border-top: none; border-radius: 0 0 16rem 16rem; background-color: var(--Color-Gray-White); overflow: hidden;}
#header nav .menu-list > li .two-menu-wrap:before{display:block; content:""; position:absolute; top:-1px; left:0; width:100%; height:1px; background:var(--Color-Gray-White);}
#header nav .menu-list > li .two-menu-list {position: relative; display: inline-block; min-width: 128rem;}
#header nav .menu-list > li .two-menu-list::before {opacity: 0; content: ""; position: absolute; top: 0; right: -24rem  /* padding 24rem */; width: 1px; height: 100%; background-color: var(--Color-Gray-200); transition: opacity .3s ease;}
#header nav .menu-list > li .two-menu-list:has( > li.on .thr-menu-list)::before {opacity: 1;}
#header nav .menu-list > li .two-menu-list > li .two-dept {position: relative; display: block; padding: 14rem 16rem; width: max-content; min-width: 100%; border-radius: var(--border-radius-sm);}
#header nav .menu-list > li .two-menu-list > li:has(.thr-menu-list) .two-dept {padding-right: 40rem;}
#header nav .menu-list > li .two-menu-list > li:has(.thr-menu-list) .two-dept::after {content: ""; position: absolute; top: 18rem; right: 16rem; width: 16rem; height: 16rem; background: url("/common/kr/images/icon-txt-btn-arrow-black.svg") no-repeat center center / 100% auto; transition: background .2s ease;}
#header nav .menu-list > li .two-menu-list > li:has(.thr-menu-list) .two-dept::before {content: ""; position: absolute; right: -24rem; top: 0; bottom: 0; width: 24rem; height: 100%;}
#header nav .menu-list > li .two-menu-list > li .thr-menu-list {display: none; position: absolute; top: -24rem  /* padding 24rem */; left: calc(100% + 24rem); transform: translateX(-40rem); width: auto; height: calc(100% + 24rem + 24rem); padding: 24rem; transition: transform .4s ease;}
#header nav .menu-list > li .two-menu-list > li.on .thr-menu-list {transform: translateX(0);}
#header nav .menu-list > li .two-menu-list > li .thr-menu-list > li {min-width: 120rem; width: max-content;}
#header nav .menu-list > li .two-menu-list > li .thr-menu-list > li .thr-dept {display: block; width: 100%; padding: 14rem 16rem; border-radius: var(--border-radius-sm);}
#header .util {display: flex; gap: 24rem; align-items: center;}
#header .util .lang-wrap {position: relative;}
#header .util .lang-wrap .lang-btn {position: relative; padding-right: 25rem;}
#header .util .lang-wrap .lang-btn::before {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20rem; height: 20rem; background: url("/common/kr/images/icon-select20.svg") no-repeat center center / 100% auto; transition: transform .2s ease;}
#header .util .lang-wrap .lang-btn.on::before {transform: translateY(-50%) rotate(180deg);}
#header .util .lang-wrap .lang-box {display: none; position: absolute; top: calc(100% + 16rem); left: 50%; transform: translateX(-50%); min-width: 80rem; padding: 16rem 20rem 14rem 20rem; border: 1px solid var(--Color-Gray-200); border-radius: var(--border-radius-md); background-color: var(--Color-Gray-White);}
#header .util .lang-wrap .lang-box::before {content: ""; position: absolute; bottom: 100%; left: 0; right: 0; z-index: -1; width: 100%; height: 17rem;}
#header .util .lang-wrap .lang-box .lang {display: block; width: 100%;}
#header .util .lang-wrap .lang-box .lang:not(:first-child) {margin-top: 8rem;}
#header .util .lang-wrap .lang-box .lang.on {font-family: "Pretendard-Bold";}
#header .allmenu-wrap {display: none;}

/* [ Header Hide ] */
#header.hide {top: -110rem;}

/* [ Header Border ] */
#header.bdr {border-bottom: 1px solid var(--Color-Gray-200);}

/* [ Header White ] */
#header.wht:not(.on, .active) {background-color: rgba(0, 0, 0, 0); border-bottom: 1px solid rgba(0, 0, 0, 0);}
#header.wht:not(.on, .active) .logo a {background-image: url("/common/kr/images/icon-logo-wht.svg");}
#header.wht:not(.on, .active) nav .menu-list > li .one-dept {color: #fff;}
#header.wht:not(.on, .active) .util .lang-wrap .lang-btn {color: #fff;}
#header.wht:not(.on, .active) .util .lang-wrap .lang-btn::before {background-image: url("/common/kr/images/icon-select20-wht.svg");}
#header.wht:not(.on, .active) .util .family-wrap .family-btn {color: #fff; background-image: url("/common/kr/images/icon-family-site-plus-wht.svg");}
#header.wht:not(.on, .active) .allmenu-wrap .allmenu-btn {background-image: url("/common/kr/images/icon-ham-wht.svg");}

/* [ Header Hover ] */
#header :is(.logo, nav, .util) {padding-top: 12rem; transition: padding .3s ease;}
#header.active {background-color: var(--Color-Gray-White); border-bottom: 1px solid var(--Color-Gray-200);}
#header.active :is(.logo, nav, .util) {padding: 0;}

@media screen and (min-width: 1025px) {
  /* [ Header Li ON ] */
  #header nav .menu-list > li.on .one-dept {color: var(--Color-Green-Primary);}
  #header nav .menu-list > li .two-menu-list > li.on .two-dept {color: var(--Color-Green-Primary); background-color: var(--Color-Blue-Light);}
  #header nav .menu-list > li .two-menu-list > li.on:has(.thr-menu-list) .two-dept::after {background-image: url("/common/kr/images/icon-txt-btn-arrow-green.svg");}
  #header nav .menu-list > li .two-menu-list > li .thr-menu-list > li .thr-dept:hover {color: var(--Color-Green-Primary); background-color: var(--Color-Blue-Light);}
}

@media screen and (max-width: 1024px) {
  /* [ Header Font ] */
  #header nav .menu-list > li .one-dept {line-height: 150%;}
  #header nav .menu-list > li .two-menu-list > li .two-dept {line-height: 110%;}
  #header nav .menu-list > li .two-menu-list > li .thr-menu-list > li .thr-dept {font-size: 15rem; font-family: "Pretendard-Regular"; color: var(--Color-Gray-900);}

  /* [ Header ] */
  #header {height: 70rem; padding: 0 16rem;}
  #header.on .util {display: flex;}
  #header .logo {position: relative; z-index: 1;}
  #header .logo a {width: 161rem; height: 24rem;}
  #header nav {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding-top: 70rem !important; padding-bottom: 64rem; background-color: var(--Color-Gray-White);}
  #header nav .menu-list {display: block; overflow-y: auto; height: 100%; padding-top: 40rem;}
  #header nav .menu-list > li {position: relative; height: auto; overflow: hidden;}
  #header nav .menu-list > li .depth-btn {position: absolute; display: block;}
  #header nav .menu-list > li > .depth-btn {top: 2rem; right: 16rem; width: 48rem; height: 48rem;}
  #header nav .menu-list > li > .depth-btn::before {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 16rem; height: 16rem; background: url("/common/kr/images/icon-accor-arrow.svg") no-repeat right center / 100% auto; transition: transform .2s ease;}
  #header nav .menu-list > li.on > .depth-btn::before {transform: translateY(-50%) rotate(180deg);}
  #header nav .menu-list > li .two-menu-list > li  .depth-btn {top: 0; right: 0; width: 48rem; height: 48rem; background: url("/common/kr/images/icon-accor-arrow-20.svg") no-repeat center center / 20rem auto; transition: transform .2s ease;}
  #header nav .menu-list > li .two-menu-list > li.on  .depth-btn {transform: rotate(180deg);}
  #header nav .menu-list > li .one-dept {display: block; min-height: 52rem; height: auto; padding: 13rem 72rem 13rem 16rem;}
  #header nav .menu-list > li .two-menu-wrap {padding: 24rem 16rem; position: unset; border: none; border-radius: 0; background-color: var(--Color-Gray-50);}
  #header nav .menu-list > li .two-menu-list {display: block; min-width: unset;}
  #header nav .menu-list > li .two-menu-list::before {display: none;}
  #header nav .menu-list > li .two-menu-list > li .two-dept {padding: 15rem 16rem; width: 100%; min-width: unset; border-radius: 0;}
  #header nav .menu-list > li .two-menu-list > li {position: relative;}
  #header nav .menu-list > li .two-menu-list > li:has(.thr-menu-list) .two-dept {min-height: 48rem; padding-right: 48rem;}
  #header nav .menu-list > li .two-menu-list > li:has(.thr-menu-list) .two-dept::after {display: none;}
  #header nav .menu-list > li .two-menu-list > li:has(.thr-menu-list) .two-dept::before {display: none;}
  #header nav .menu-list > li .two-menu-list > li .thr-menu-list {position: unset; transform: unset; width: 100%; height: auto; padding: 16rem; border-top: 1px solid var(--Color-Gray-200); border-bottom: 1px solid var(--Color-Gray-200);}
  #header nav .menu-list > li .two-menu-list > li .thr-menu-list > li {min-width: unset; width: 100%;}
  #header nav .menu-list > li .two-menu-list > li .thr-menu-list > li .thr-dept {padding: 12rem 16rem; border-radius: 0;}
  #header .util {display: none; position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-between; height: 64rem; padding: 0 16rem; border-top: 1px solid var(--Color-Gray-200);}
  #header .util .lang-wrap .lang-box {top: unset; left: 0; bottom: calc(100% + 13rem); padding: 16rem 20rem; transform: none;}
  #header .util .lang-wrap .lang-box::before {display: none;}
  #header .util .lang-wrap .lang-box .lang {font-size: 15rem;}
  #header .allmenu-wrap {display: block; position: relative; z-index: 1;}
  #header .allmenu-wrap :is(.allmenu-btn, .close-btn) {width: 48rem; height: 48rem; background: url("") no-repeat right center / 24rem auto;}
  #header .allmenu-wrap .allmenu-btn {display: block; background-image: url("/common/kr/images/icon-ham.svg");}
  #header .allmenu-wrap .close-btn {display: none; background-image: url("/common/kr/images/icon-close-btn-24.svg");}
  #header.on .allmenu-wrap .allmenu-btn {display: none;;}
  #header.on .allmenu-wrap .close-btn {display: block;}

  /* [ Header Hide ] */
  #header.hide {top: -80rem;}

  /* [ Header Hover ] */
  #header :is(.logo, nav, .util) {padding-top: 0;}
}

/* [ Header Family ] */
.family-menu {display: flex; flex-direction: column; gap: 8rem;}
.family-menu > li {border: 1px solid var(--Color-Gray-300); border-radius: var(--border-radius-md); overflow: hidden;}
.family-menu > li .one-dept {position: relative; display: block; padding: 25rem 72rem 25rem 40rem; font-family:"Pretendard-Bold"; font-size: 20rem; line-height: 150%;}
.family-menu > li .one-dept::after {content: ""; position: absolute; top: 32rem; right: 40rem; width: 16rem; height: 16rem; background: url("") no-repeat center center / 100% auto;}
.family-menu > li:has(.two-menu-wrap) .one-dept::after {background-image: url("/common/kr/images/icon-accor-arrow.svg"); transition: transform .2s ease;}
.family-menu > li.on:has(.two-menu-wrap) .one-dept::after {transform: rotate(180deg);}
.family-menu > li:not(:has(.two-menu-wrap)) {background-color: var(--Color-Blue-500);}
.family-menu > li:not(:has(.two-menu-wrap)) .one-dept {color: var(--Color-Gray-White);}
.family-menu > li:not(:has(.two-menu-wrap)) .one-dept::after {background-image: url("/common/kr/images/icon-link-arrow-wht.svg");}
.family-menu > li .two-menu-wrap {display: none; padding: 40rem; border-top: 1px solid var(--Color-Gray-300);}
.family-menu > li .two-menu-wrap .two-menu-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem 60rem;}
.family-menu > li .two-menu-wrap .two-menu-list > li .two-dept {display: block; width: 100%; padding-right: 32rem; font-family:"Pretendard-Medium"; font-size: 18rem; line-height: 160%; background: url("/common/kr/images/icon-link-arrow.svg") no-repeat right top 5rem / 16rem 16rem;}

@media screen and (max-width: 1024px) {
  /* [ Header Family ] */
  .family-menu {gap: 8rem;}
  .family-menu > li .one-dept {padding: 22rem 56rem 22rem 24rem; font-size: 18rem;}
  .family-menu > li .one-dept::after {top: 28rem; right: 24rem;}
  .family-menu > li .two-menu-wrap {padding: 24rem;}
  .family-menu > li .two-menu-wrap .two-menu-list {grid-template-columns: repeat(1, 1fr); gap: 0;}
  .family-menu > li .two-menu-wrap .two-menu-list > li .two-dept {padding: 9rem 32rem 9rem 0; font-size: 16rem; background-position: right top 14rem;}
}
/* ----------------------------------------- Header End ----------------------------------------- */





/* ----------------------------------------- Footer Start ----------------------------------------- */
footer{border-top:1px solid var(--Color-Gray-200);}
footer .inner{display:flex; justify-content: space-between; margin:0 auto; padding:60rem 0; width:1760rem;}
footer .inner .left{display:flex; flex-direction: column; gap:80rem;}
footer .inner .left .link-wrap{display:flex; gap:24rem;}
footer .inner .left .link-wrap .f-d1-b{color:var(--Color-Gray-900);}
footer .inner .left .link-wrap .f-d1-r{color:var(--Color-Gray-800);}
footer .inner .left .info .f-d1-r{color:var(--Color-Gray-800);}
footer .inner .left .info .f-d1-r .only-pc{display:inline !important;}
.family-btn{padding-right:28rem; background:url("/common/kr/images/icon-family-site-plus.svg") no-repeat right center / 20rem auto;}

@media screen and (max-width: 1024px) {
  footer .inner{flex-direction: column; gap:40rem; justify-content: flex-start; width:calc(100% - 32rem);}
  footer .inner .left{gap:60rem;}
  footer .inner .left .link-wrap{flex-direction: column; gap:16rem;}
  footer .inner .left .info .f-d1-r .only-pc{display:none !important;}
}
/* ----------------------------------------- Footer End ----------------------------------------- */





/* ----------------------------------------- Font Start ----------------------------------------- */
/* font align */
.ta-left{text-align: left !important;}
.ta-center{text-align: center !important;}
.ta-right{text-align: right !important;}

/* info text */
.icon-info-txt{padding-left:20rem; background:url("/common/kr/images/icon-info-black.svg") no-repeat left top/16rem auto;}
.icon-info-txt.white{background:url("/common/kr/images/icon-info-white.svg") no-repeat left top/16rem auto;}
.icon-info-txt.f-d1-r{background-position:left top 3rem;}
.icon-info-txt.f-d2-r{background-position:left top 1rem;}

@media screen and (max-width: 1024px) {
  .icon-info-txt.f-d1-r{background-position:left top 2rem;}
}

/* -- HD HYUNDAI -- */
/* Display */
.f-hd-d1{font-size:64rem; font-family:"HDfont-Bold"; line-height:130%; letter-spacing: -1px;}
.f-hd-d2{font-size:56rem; font-family:"HDfont-Bold"; line-height:130%; letter-spacing: -1px;}
/* Title */
.f-hd-t1{font-size:44rem; font-family:"HDfont-Bold"; line-height:130%; letter-spacing: -1px;}
.f-hd-t2{font-size:36rem; font-family:"HDfont-Bold"; line-height:140%; letter-spacing: -1px;}

/* -- Pretendard -- */
/* Display */
.f-d1{font-size:96rem; font-family:"Pretendard-Bold"; line-height:130%; letter-spacing: -1px;}
.f-d2{font-size:64rem; font-family:"Pretendard-Bold"; line-height:130%; letter-spacing: -1px;}
.f-d3{font-size:56rem; font-family:"Pretendard-Bold"; line-height:130%; letter-spacing: -1px;}
/* Title */
.f-t1{font-size:44rem; font-family:"Pretendard-Bold"; line-height:140%; letter-spacing: -1px;}
.f-t2{font-size:36rem; font-family:"Pretendard-Bold"; line-height:140%; letter-spacing: -1px;}
.f-t3{font-size:32rem; font-family:"Pretendard-Bold"; line-height:150%; letter-spacing: -1px;}
/* Head */
.f-h1{font-size:28rem; font-family:"Pretendard-Bold"; line-height:150%; letter-spacing: -1px;}
.f-h2{font-size:24rem; font-family:"Pretendard-Bold"; line-height:150%; letter-spacing: -1px;}
.f-h3{font-size:20rem; font-family:"Pretendard-Bold"; line-height:150%; letter-spacing: -1px;}
/* Body */
.f-b1-r{font-size:24rem; font-family:"Pretendard-Regular"; line-height:150%; letter-spacing: -1px;}
.f-b2-r{font-size:20rem; font-family:"Pretendard-Regular"; line-height:160%; letter-spacing: -1px;}
.f-b3-b{font-size:18rem; font-family:"Pretendard-Bold"; line-height:160%; letter-spacing: -0.5px;}
.f-b3-m{font-size:18rem; font-family:"Pretendard-Medium"; line-height:160%; letter-spacing: -0.5px;}
.f-b3-r{font-size:18rem; font-family:"Pretendard-Regular"; line-height:160%; letter-spacing: -0.5px;}
.f-b4-b{font-size:16rem; font-family:"Pretendard-Bold"; line-height:160%; letter-spacing: -0.5px;}
.f-b4-m{font-size:16rem; font-family:"Pretendard-Medium"; line-height:160%; letter-spacing: -0.5px;}
.f-b4-r{font-size:16rem; font-family:"Pretendard-Regular"; line-height:160%; letter-spacing: -0.5px;}
/* Description */
.f-d1-b{font-size:14rem; font-family:"Pretendard-Bold"; line-height:160%; letter-spacing: -0.5px;}
.f-d1-m{font-size:14rem; font-family:"Pretendard-Medium"; line-height:160%; letter-spacing: -0.5px;}
.f-d1-r{font-size:14rem; font-family:"Pretendard-Regular"; line-height:160%; letter-spacing: -0.5px;}
.f-d2-b{font-size:12rem; font-family:"Pretendard-Bold"; line-height:160%; letter-spacing: -0.5px;}
.f-d2-r{font-size:12rem; font-family:"Pretendard-Regular"; line-height:160%; letter-spacing: -0.5px;}

.f-hd{font-family:"HDfont-Bold" !important;}

@media screen and (max-width: 1024px){
  /* -- HD HYUNDAI -- */
  /* Display */
  .f-hd-d1{font-size:32rem;}
  .f-hd-d2{font-size:28rem;}
  /* Title */
  .f-hd-t1{font-size:24rem;}
  .f-hd-t2{font-size:24rem;}

  /* -- Pretendard -- */
  /* Display */
  .f-d1{font-size:48rem;}
  .f-d2{font-size:32rem;}
  .f-d3{font-size:28rem;}
  /* Title */
  .f-t1{font-size:24rem;}
  .f-t2{font-size:20rem;}
  .f-t3{font-size:18rem;}
  /* Head */
  .f-h1{font-size:24rem;}
  .f-h2{font-size:20rem;}
  .f-h3{font-size:18rem;}
  /* Body */
  .f-b1-r{font-size:20rem;}
  .f-b2-r{font-size:18rem;}
  .f-b3-b{font-size:16rem;}
  .f-b3-m{font-size:16rem;}
  .f-b3-r{font-size:16rem;}
  .f-b4-b{font-size:15rem;}
  .f-b4-r{font-size:15rem;}
  /* Description */
  .f-d1-b{font-size:13rem;}
  .f-d1-m{font-size:13rem;}
  .f-d1-r{font-size:13rem;}
  .f-d2-b{font-size:12rem;}
  .f-d2-r{font-size:12rem;}
}
/* ----------------------------------------- Font End ----------------------------------------- */





/* ----------------------------------------- Button Start ----------------------------------------- */
.btn-wrap{display:flex; justify-content: center; gap: 8rem; margin-top:80rem;}

@media screen and (max-width: 1024px){
  .btn-wrap{margin-top:60rem;}
}

/* color button */
.color-btn{display:inline-flex; align-items: center; justify-content: center; padding:0 32rem; min-width:120rem; height: 56rem; border-radius:28rem; transition:background 0.4s ease;}
.color-btn span{color:var(--Color-Gray-White); font-size:16rem; line-height:110%; letter-spacing: -0.5px; font-family:"Pretendard-Medium";}
.color-btn.blue{background:var(--Color-Blue-Primary)}
.color-btn.blue:hover{background:#33599F;}
.color-btn.blue:active{background:#002260;}
.color-btn.green{background:var(--Color-Green-Primary)}
.color-btn.green:hover{background:#339B5C;}
.color-btn.green:active{background:#005C24;}
.color-btn.disabled{background:var(--Color-Gray-500) !important; cursor:auto;}
.color-btn.disabled:hover{background:var(--Color-Gray-500) !important}
.color-btn.disabled:active{background:var(--Color-Gray-500) !important}
.color-btn.arrow span{padding-right:24rem; background:url("/common/kr/images/icon-btn-arrow-white.svg") no-repeat right center/20rem auto;}

@media all and (max-width: 1024px) {
  .color-btn span{font-size:15rem;}
}


/* border button */
.border-btn{display:inline-flex; align-items: center; justify-content: center; padding:18rem 32rem; min-width:120rem; border-radius:28rem; transition:background 0.4s ease; border:1px solid var(--Color-Gray-300); background:var(--Color-Gray-White)}
.border-btn span{color:var(--Color-Gray-900); font-size:16rem; line-height:110%; letter-spacing: -0.5px; font-family:"Pretendard-Medium";}
.border-btn:hover{background:var(--Color-Gray-50)}
.border-btn:active{background:var(--Color-Gray-100) !important;}
.border-btn.disabled{background:var(--Color-Gray-50) !important; cursor:auto;}
.border-btn.disabled:active{background:var(--Color-Gray-100) !important;}
.border-btn.disabled span{color:var(--Color-Gray-500) !important;}
.border-btn.arrow span{padding-right:24rem; background:url("/common/kr/images/icon-btn-arrow-black.svg") no-repeat right center/20rem auto;}
.border-btn.download span{padding-right:24rem; background:url("/common/kr/images/icon-file-download.svg") no-repeat right center/20rem auto;}
.border-btn.disabled.arrow span{background:url("/common/kr/images/icon-btn-arrow-disabled.svg") no-repeat right center/20rem auto !important;}
.border-btn.file span {padding-right:24rem; background:url("/common/kr/images/icon-btn-file-black.svg") no-repeat right center/20rem auto;}
.border-btn.plus span{padding-right:24rem; background:url("/common/kr/images/icon-btn-plus-black.svg") no-repeat right center/20rem auto;}
.border-btn.white {border: 1px solid var(--Color-Gray-White); background-color: transparent;}
.border-btn.white span {color: var(--Color-Gray-White); transition: color 0.4s ease, background 0.4s ease;}
.border-btn.white:hover {background-color: var(--Color-Gray-White);}
.border-btn.white:hover span {color: var(--Color-Gray-900);}
.border-btn.white:active {border: 1px solid var(--Color-Gray-100);}
.border-btn.white:active span {color: var(--Color-Gray-900);}
.border-btn.white.arrow span{background-image: url("/common/kr/images/icon-btn-arrow-white.svg");}
.border-btn.white.arrow:hover span{background-image: url("/common/kr/images/icon-btn-arrow-black.svg");}
.border-btn.white.plus span{background-image: url("/common/kr/images/icon-btn-plus-white.svg");}
.border-btn.white.plus:hover span{background-image: url("/common/kr/images/icon-btn-plus-black.svg");}
.border-btn.white.disabled {border: 1px solid var(--Color-Gray-50);}
.border-btn.black {border: 1px solid var(--Color-Gray-900);}
.border-btn.black.link span {padding-right:24rem; background:url("/common/kr/images/icon-btn-link-black.svg") no-repeat right center/20rem auto;}
.border-btn.black.disabled {border:1px solid var(--Color-Gray-300);}

@media all and (max-width: 1024px) {
  .border-btn span {font-size: 15rem;}
}

/* square color button */
.square-btn{display:inline-flex; align-items: center; justify-content: center; min-width:80rem; min-height: 56rem; padding:0 20rem; border-radius:4rem; transition:background 0.4s ease;}
.square-btn span{color:var(--Color-Gray-White); font-size:16rem; line-height:110%; letter-spacing: -0.5px; font-family:"Pretendard-Medium";}
.square-btn.blue{background:var(--Color-Blue-Primary)}
.square-btn.blue:hover{background:#33599F;}
.square-btn.blue:active{background:#002260;}
.square-btn.green{background:var(--Color-Green-Primary)}
.square-btn.green:hover{background:#339B5C;}
.square-btn.green:active{background:#005C24;}
.square-btn.black{background:var(--Color-Gray-900)}
.square-btn.black:hover{background:var(--Color-Gray-700)}
.square-btn.black:active{background:var(--Color-Gray-800);}
.square-btn.light-blue{background:#E6EAF3}
.square-btn.light-blue:hover{background:var(--Color-Blue-Light);}
.square-btn.light-blue:active{background:#B0BFDA;}
.square-btn.light-blue span{color:var(--Color-Blue-500)}
.square-btn.light-green{background:#E6F3EB}
.square-btn.light-green:hover{background:#F1F8F4;}
.square-btn.light-green:active{background:#B0D8C0;}
.square-btn.light-green span{color:#005C24}
.square-btn.small{padding:14rem 16rem; min-height:48rem;}
.square-btn.light-disabled{background:var(--Color-Gray-100) !important; cursor:default;}
.square-btn.light-disabled span{color:var(--Color-Gray-500) !important;}
.square-btn.disabled{background:var(--Color-Gray-500); cursor:default;}
.square-btn:disabled {background:var(--Color-Gray-500) !important; cursor: default;}

@media all and (max-width: 1024px) {
  .square-btn{height: 48rem; min-height: 48rem; padding:0 16rem;}
  .square-btn span{font-size:15rem;}
}

/* square border button */
.square-border-btn{display:inline-flex; align-items: center; justify-content: center; min-width:80rem; padding:18rem 20rem; border-radius:4rem; transition:background 0.4s ease; border:1px solid var(--Color-Gray-300); background:var(--Color-Gray-White)}
.square-border-btn span{color:var(--Color-Gray-900); font-size:16rem; line-height:110%; letter-spacing: -0.5px; font-family:"Pretendard-Medium";}
.square-border-btn:hover{background:var(--Color-Gray-50)}
.square-border-btn:active{background:var(--Color-Gray-100)}
.square-border-btn.black{border:1px solid var(--Color-Gray-Black)}
.square-border-btn.disabled{background:var(--Color-Gray-50); cursor:auto;}
.square-border-btn.disabled span{color:var(--Color-Gray-500)}
.square-border-btn.small{padding:14rem 16rem;}
.square-border-btn.note span{padding-right:28rem; background:url("/common/kr/images/icon-note.svg") no-repeat right center/20rem auto;}
.square-border-btn.download span{padding-right:28rem; background:url("/common/kr/images/icon-file-download.svg") no-repeat right center/20rem auto;}
.square-border-btn.down span{padding-right:28rem; background:url("/common/kr/images/icon-file-download-20.svg") no-repeat right center/20rem auto;}
.square-border-btn.file span {padding-right:24rem; background:url("/common/kr/images/icon-btn-file-black.svg") no-repeat right center/20rem auto;}
.square-border-btn.link span {padding-right:24rem; background:url("/common/kr/images/icon-btn-link-black.svg") no-repeat right center/20rem auto;}
@media all and (max-width: 1024px) {
  .square-border-btn span {font-size: 15rem;}
}



/* text button */
.txt-btn{display: inline-flex; transition:background 0.4s ease;}
.txt-btn:hover{background:var(--Color-Gray-100)}
.txt-btn.arrow span{background:url("/common/kr/images/icon-txt-btn-arrow-black.svg") no-repeat center center / 16rem auto;}
.txt-btn.arrow.wht span { background-image: url("/common/kr/images/icon-txt-btn-arrow-wht.svg");}
.txt-btn.wht:hover {background: rgba(255, 255, 255, .2);}
.txt-btn.wht span {color: var(--Color-Gray-White)}
.txt-btn.left span{padding-left:18rem; background-position:left center;}
.txt-btn.right span{padding-right:18rem; background-position:right center;}
.txt-btn.large span{font-size:16rem;}
.txt-btn.medium span{font-size:14rem;}
.txt-btn.small span{font-size:12rem;}
.txt-btn span{font-family:"Pretendard-Medium";}
@media all and (max-width: 1024px) {
  .txt-btn.large span{font-size:15rem;}
}

/* paging */
.paging{display:flex; justify-content: center; gap:8rem; margin-top:80rem;}
.paging .prev-btn{width:40rem; height:40rem; border-radius:4rem; border:1px solid var(--Color-Gray-White); background:url("/common/kr/images/icon-paging-prev.svg") no-repeat center center/20rem auto var(--Color-Gray-White); transition:var(--transition-icon)}
.paging .prev-btn:hover{border:1px solid var(--Color-Gray-400); background:url("/common/kr/images/icon-paging-prev.svg") no-repeat center center/20rem auto var(--Color-Gray-50);}
.paging .prev-btn:active{border:1px solid var(--Color-Gray-400); background:url("/common/kr/images/icon-paging-prev.svg") no-repeat center center/20rem auto var(--Color-Gray-100);}
.paging .prev-btn.disabled{cursor:auto; background:url("/common/kr/images/icon-paging-prev-disabled.svg") no-repeat center center/20rem auto;}
.paging .prev-btn.disabled:hover{border:1px solid var(--Color-Gray-White); background:url("/common/kr/images/icon-paging-prev-disabled.svg") no-repeat center center/20rem auto;}
.paging .prev-btn.disabled:active{border:1px solid var(--Color-Gray-White); background:url("/common/kr/images/icon-paging-prev-disabled.svg") no-repeat center center/20rem auto;}
.paging .next-btn{width:40rem; height:40rem; border-radius:4rem; border:1px solid var(--Color-Gray-White); background:url("/common/kr/images/icon-paging-next.svg") no-repeat center center/20rem auto var(--Color-Gray-White); transition:var(--transition-icon)}
.paging .next-btn:hover{border:1px solid var(--Color-Gray-400); background:url("/common/kr/images/icon-paging-next.svg") no-repeat center center/20rem auto var(--Color-Gray-50);}
.paging .next-btn:active{border:1px solid var(--Color-Gray-400); background:url("/common/kr/images/icon-paging-next.svg") no-repeat center center/20rem auto var(--Color-Gray-100);}
.paging .next-btn.disabled{cursor:auto; background:url("/common/kr/images/icon-paging-next-disabled.svg") no-repeat center center/20rem auto;}
.paging .next-btn.disabled:hover{border:1px solid var(--Color-Gray-White); background:url("/common/kr/images/icon-paging-next-disabled.svg") no-repeat center center/20rem auto;}
.paging .next-btn.disabled:active{border:1px solid var(--Color-Gray-White); background:url("/common/kr/images/icon-paging-next-disabled.svg") no-repeat center center/20rem auto;}
.paging .num{display:flex; align-items: center; justify-content: center; width:40rem; height:40rem; border-radius:4rem; border:1px solid var(--Color-Gray-400); background:var(--Color-Gray-White); transition:background 0.4s ease;}
.paging .num span{font-size:16rem; line-height:110%; letter-spacing: -0.5px; font-family:"Pretendard-Medium"; color:var(--Color-Gray-700)}
.paging .num:has(span:empty){border:0; background:url("/common/kr/images/icon-paging-dot.svg") no-repeat center center / 20rem auto var(--Color-Gray-White); cursor: default;}
.paging .num.disabled{cursor:default; background:var(--Color-Gray-50); border:1px solid var(--Color-Gray-200)}
.paging .num.disabled span{color:var(--Color-Gray-500);}
.paging .num.on{border:1px solid var(--Color-Blue-Primary); background:var(--Color-Blue-Primary);}
.paging .num.on span{color:var(--Color-Gray-White);}
.paging .num:hover{background:var(--Color-Gray-50)}
.paging .num:active{background:var(--Color-Gray-100)}
.paging .num.on:hover{background:var(--Color-Blue-Primary);}
.paging .num.on:active{background:var(--Color-Blue-Primary);}

@media all and (max-width: 1024px) {
  .paging{gap:6rem; margin-top:60rem;}
}

/* top btn */
.btn-top{display:none; position:fixed; bottom:40rem; right:40rem; width:56rem; height:56rem; background:url("/common/kr/images/icon-btn-top.svg") no-repeat center center/56rem auto; transition:background 0.4s ease; cursor:pointer; z-index:10;}
.btn-top:hover{background:url("/common/kr/images/icon-btn-top-on.svg") no-repeat center center/56rem auto;}

@media all and (max-width: 1024px) {
  .btn-top{bottom:16rem; right:16rem; width:48rem; height:48rem; background:url("/common/kr/images/icon-btn-top.svg") no-repeat center center/48rem auto; transition: none;}
  .btn-top:hover{background-image: url("/common/kr/images/icon-btn-top.svg"); background-size:48rem auto;}
}
/* --------------------------------------------- Button End --------------------------------------------- */





/* --------------------------------------------- Tab START --------------------------------------------- */
/* 배경형 탭 */
.bg-tab-menu .swiper-slide{display:flex; align-items: center; justify-content: center; margin-right:2rem; padding:13rem; min-width:160rem; width:auto; background:var(--Color-Blue-Light);}
.bg-tab-menu .swiper-slide:last-child{margin-right:0;}
.bg-tab-menu .swiper-slide span{color:var(--Color-Blue-500)}
.bg-tab-menu .swiper-slide.on{background:var(--Color-Blue-500)}
.bg-tab-menu .swiper-slide.on span{color:var(--Color-Gray-White)}

@media all and (max-width: 1024px) {
  .bg-tab-menu .swiper-slide{min-width:120rem; padding:11rem;}
}


/* 보더형 탭 */
.border-tab-menu .swiper-slide{padding:6rem 4rem; margin-right:24rem; width:auto;}
.border-tab-menu .swiper-slide:last-child{margin-right:0;}
.border-tab-menu .swiper-slide span{color:var(--Color-Gray-500)}
.border-tab-menu .swiper-slide.on{border-bottom:2px solid var(--Color-Blue-500)}
.border-tab-menu .swiper-slide.on span{color:var(--Color-Blue-500)}

/* 남색 배경, 초록 글씨 형태 탭 */
.navy-bg-tab-menu{position:relative; height:80rem;}
.navy-bg-tab-menu:after{display:block; content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; background:var(--Color-Blue-500)}
.navy-bg-tab-menu .swiper-slide{display:flex; align-items: center; position:relative; margin-right:32rem; width:auto;}
.navy-bg-tab-menu .swiper-slide:last-child{margin-right:0;}
.navy-bg-tab-menu .swiper-slide:after{display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--Color-Green-Eco); opacity:0; transition:opacity 0.4s ease;}
.navy-bg-tab-menu .swiper-slide span{color:var(--Color-Gray-White); transition:var(--transition-icon)}
.navy-bg-tab-menu .swiper-slide.on:after{opacity:1;}
.navy-bg-tab-menu .swiper-slide.on span{color:var(--Color-Green-Eco); transition:var(--transition-icon)}

@media all and (max-width: 1024px) {
  .navy-bg-tab-menu .swiper-slide{margin-right:16rem;}
}

/* fixed tab */
.fixed-tab-wrap {height: 80rem;}
.fixed-tab-wrap .fixed-tab {background: var(--Color-Blue-500);}
.fixed-tab-wrap .fixed-tab .tab-btn-area {width: 1220rem; margin: 0 auto;}
.fixed-tab-wrap.fix .fixed-tab {position: fixed; top: 100rem; left: 0; right: 0; z-index: 11; transition: top .3s ease;}
.fixed-tab-wrap.fix .fixed-tab::before {content: ""; position: absolute; left: 0; right: 0; bottom: 80rem; width: 100%; height: 100rem; background-color: var(--Color-Blue-500);}
#wrap:has(#header.hide) .fixed-tab-wrap.fix .fixed-tab {top: 0;}

@media all and (max-width: 1024px) {
  .fixed-tab-wrap .fixed-tab .tab-btn-area {width: 100%;}
  .fixed-tab-wrap.fix .fixed-tab {top: 70rem; padding: 0 16rem;}
  .fixed-tab-wrap.fix .fixed-tab::before {height: 70rem;}
}
/* --------------------------------------------- Tab End --------------------------------------------- */





/* --------------------------------------------- Form START --------------------------------------------- */
textarea {border: none; background-color: transparent;}
input {background-color: transparent;}
select:disabled {opacity: 1;}

/* input - formArea */
.form-area {position: relative;}
.form-area .form-tit {margin-bottom: 8rem; font-family: "Pretendard-Medium"; font-size: 16rem; line-height: 160%;}
.form-area .form-tit .essential {color: #E90C0C;}
.form-area .noti {margin-top:8rem; font-size:14rem; line-height:160%; color: var(--Color-Gray-700);}

@media all and (max-width: 1024px) {
  .form-area .form-tit {font-size: 15rem;}
  .form-area .noti {font-size:13rem;}
}

/* input - formWrap */
.form-wrap{display:flex; gap:8rem;}
.form-wrap .form-select{width:160rem;}

/* [ font ] */
.form-input input,
.form-textarea textarea,
.form-select select {font-family: "Pretendard-Regular"; font-size: 16rem; line-height: 150%; color: var(--Color-Gray-900);}
.form-checkbox input + label span,
.form-radio input + label span {display: block; font-size: 16rem; line-height: 160%; color: var(--Color-Gray-70);}
.form-textarea textarea::placeholder,
.form-input input::placeholder {font-size: 16rem; line-height: 150%; color: var(--Color-Gray-500);}

@media all and (max-width: 1024px) {
  .form-input input,
  .form-textarea textarea,
  .form-select select {font-size: 15rem; line-height: 160%;}
  .form-textarea textarea::placeholder,
  .form-input input::placeholder {font-size: 15rem; line-height: 160%;}
  .form-wrap .form-textarea textarea::placeholder,
  .form-wrap  .form-input input::placeholder {font-size: 14rem; line-height: 160%;}
}

/* [ Hover ] */
.form-input:has(input:hover),
.form-textarea:has(textarea:hover),
.form-select.active {border: 1px solid var(--Color-Gray-400) !important;}
.form-input.err:has(input:hover),
.form-textarea.err:has(textarea:hover){border:1px solid #E90C0C !important}

/* [ focus ] */
.form-input:has(input:focus),
.form-textarea:has(textarea:focus),
.form-select:has(select:focus) {border: 1px solid #000 !important;}
.form-input.err:has(input:focus),
.form-textarea.err:has(textarea:focus),
.form-select.err:has(select:focus) {border:1px solid #E90C0C !important}

/* [ disabled & readonly ] */
.form-input:has(input:read-only),
.form-textarea:has(textarea:read-only),
.form-select:has(select.readyonly) {background-color: var(--Color-Gray-100); border: 1px solid transparent !important;}

.form-input:has(input:disabled),
.form-textarea:has(textarea:disabled),
.form-select:has(select:disabled) {background-color: var(--Color-Gray-100); }

.form-input:has(input:disabled) input,
.form-textarea:has(textarea:disabled) textarea,
.form-select:has(select:disabled) select {color: var(--Color-Gray-500);}

select.readyonly {pointer-events: none;}

.form-checkbox:has(input:disabled) input + label span {color: var(--Color-Gray-500);}
.form-checkbox input:disabled {cursor: default;}
.form-radio input:disabled {cursor: default;}
.form-checkbox input:disabled + label {background-image: url("/common/kr/images/icon-checked-disabled.svg"); cursor: default;}
.form-checkbox input:checked:disabled + label {background-image: url("/common/kr/images/icon-checked-on-disabled.svg"); cursor: default;}
.form-radio input:disabled + label {background-image: url("/common/kr/images/icon-radio-disabled.svg"); cursor: default;}

/* [ error ] */
.form-area:has(.err) .noti {color: var(--Color-Red-400);}
.form-input.err,
.form-textarea.err,
.form-select.err {border: 1px solid #E90C0C;}

/* input - text */
.form-input {position: relative; height: 56rem; padding: 0 16rem; border: 1px solid var(--Color-Gray-300); border-radius: 4rem; overflow: hidden; background-color: var(--Color-Gray-White);}
.form-input input {width: 100%; height: 100%;}
.form-input:has(.input-btn-wrap) {padding-right: 48rem;}
.form-input .input-btn-wrap {position: absolute; right: 16rem; top: 50%; transform: translateY(-50%);}
.form-input .input-btn-wrap .delete-btn {display: none; width: 24rem; height: 24rem; background: url("/common/kr/images/icon-delete-btn-gray-bg.svg") no-repeat center center / 100% auto;}
.form-input.small{height:48rem;}
.form-input.small .input-btn-wrap{right:14rem;}
.form-input.small .input-btn-wrap .delete-btn {width: 20rem; height: 20rem; background: url("/common/kr/images/icon-delete-btn-gray-bg.svg") no-repeat center center / 100% auto;}
.form-input.search{padding-right:84rem;}
.form-input.search .srch-btn{position:absolute; top:50%; right:16rem; transform: translateY(-50%); width:24rem; height:24rem; background:url("/common/kr/images/icon-search-black.svg") no-repeat center center / 100% auto;}
.form-input.search .input-btn-wrap{right:48rem;}

@media all and (max-width: 1024px) {
  .form-input{height:48rem;}
  .form-input .input-btn-wrap .delete-btn {width: 20rem; height: 20rem;}
  .form-input.search{padding-right:64rem;}
  .form-input.search .srch-btn{right:12rem; width:20rem; height:20rem;}
  .form-input.search .input-btn-wrap{right:38rem;}
}

/* input - checkbox */
.form-checkbox {display: inline-block; position: relative;}
.form-checkbox input {position: absolute; top: 0; left: 0; width: 24rem; height: 24rem; opacity: 0.001; cursor: pointer;}
.form-checkbox input + label {display: block; min-height: 24rem; padding-left: 32rem; color:var(--Color-Gray-70); background: url("/common/kr/images/icon-checked.svg") no-repeat left top / 24rem auto; cursor: pointer;}
.form-checkbox input + label:not(:has(*)) {padding-left: 24rem;}
.form-checkbox input:checked + label {background-image: url("/common/kr/images/icon-checked-on.svg");}
.form-checkbox.no-label input + label{padding-left:24rem;}

/* input - radio */
.form-radio {display: inline-block; position: relative;}
.form-radio input {position: absolute; top: 0; left: 0; width: 24rem; height: 24rem; opacity: 0.001; cursor: pointer;}
.form-radio input + label {display: block; min-height: 24rem; padding-left: 32rem; background: url("/common/kr/images/icon-radio.svg") no-repeat top left / 24rem auto; cursor: pointer;}
.form-radio input + label:not(:has(*)) {padding-left: 24rem;}
.form-radio input:checked + label {background-image: url("/common/kr/images/icon-radio-on.svg");}

/* input - select */
.form-select {position: relative; z-index: 1; display: flex; /* width: 300rem; */ height: 56rem; border:1px solid var(--Color-Gray-300); border-radius: 4rem; overflow: hidden; background-color: var(--Color-Gray-White);}
.form-select select {overflow: hidden; width: 100%; height: 100%; padding: 0 36rem 0 16rem; text-overflow: ellipsis; white-space: nowrap; -webkit-appearance: none; appearance: none;}
.form-select:before {content: ""; display: inline-block; position: absolute; top: 50%; right: 16rem; z-index: -1; transform: translateY(-50%) rotate(0); width: 20rem; height: 20rem; background: url("/common/kr/images/icon-select.svg") no-repeat center center / 100%; transition: transform .2s ease;}
.form-select.active:before {transform: translateY(-50%) rotate(180deg);}
.form-select.err{border:1px solid #E90C0C;}
.form-select.err select{color:#E90C0C;}

@media all and (max-width: 1024px) {
  .form-select{height:48rem;}
}

/* input - textarea */
.form-textarea {position: relative; /* width: 480rem; */ height: 160rem; border: 1px solid var(--Color-Gray-300); border-radius: 4rem; overflow: hidden; background-color: var(--Color-Gray-White);}
.form-textarea textarea {width: 100%; height: 100%; padding: 16rem;}
.form-textarea textarea::-webkit-scrollbar {width: 6rem; height: 6rem ; background: var(--Color-Gray-100);}
.form-textarea textarea::-webkit-scrollbar-thumb {background: var(--Color-Gray-500);}

/* agree */
.agree-area .form-agree {height: 280rem; padding: 16rem; border: 1px solid var(--Color-Gray-300); border-radius: var(--border-radius-xs); overflow: auto; background-color: var(--Color-Gray-White);}
.agree-area .form-agree::-webkit-scrollbar {width: 6rem; background: var(--Color-Gray-100);}
.agree-area .form-agree::-webkit-scrollbar-thumb {background: var(--Color-Gray-500);}
.agree-area .form-agree .agree-div + .agree-div {margin-top: 30rem;}
.agree-area .form-agree .agree-div .txt-wrap {padding-left: 22rem; margin-top: 16rem;}
.agree-area .form-agree .agree-div p {color: var(--Color-Gray-800);}
.agree-area .form-agree .agree-div p:not(:first-child) {margin-top: 16rem;}
.agree-area .form-agree .agree-div .txt-wrap p:not(:first-child) {margin-top: 8rem;}
.agree-area .form-agree .agree-div .tit {color: var(--Color-Blue-900);}
.agree-area .form-agree .agree-div .num {display: flex; gap: 8rem;}
.agree-area .form-agree .agree-div .num span {flex-shrink: 0; color: var(--Color-Gray-900);}
.agree-area .form-checkbox {margin-top: 16rem;}

/* form - file */
.form-file {display: flex; gap:8rem;}
.form-file .form-input:has(input:read-only) {flex: 1; background-color: var(--Color-Gray-White) !important; border: 1px solid var(--Color-Gray-300) !important;}
.form-file:not(:has(input[type=file]:disabled)) .form-input:has(input:focus) {border: 1px solid #000 !important;}
.form-file .form-input input {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.form-file .btns {flex-shrink: 0; position: relative;}
.form-file .btns input[type=file] {display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; overflow: hidden; cursor: pointer;}
.form-file .btns input[type=file]::-webkit-file-upload-button {cursor: pointer;}
.form-file:has(input[type=file]:disabled) .form-input {background-color: var(--Color-Gray-100) !important; border: 1px solid transparent !important;}
.form-file:has(input[type=file]:disabled) .form-input .delete-btn {display: none !important;}

/* * + button form */
.form-btn{display:flex; gap:8rem;}

/* table */
.form-table .need-scroll{overflow-x: auto; padding-bottom: 8rem;}
.form-table .need-scroll .basic-table {table-layout: fixed;}
.form-table .need-scroll::-webkit-scrollbar {width: 4px; height: 4px; background: transparent;}
.form-table .need-scroll::-webkit-scrollbar-track {display: none;}
.form-table .need-scroll::-webkit-scrollbar-thumb {background-color: var(--Color-Gray-300); border-radius: var(--border-radius-xs);}
.form-table .need-scroll table{min-width:1100rem;}
.form-table .table-wrap table{position:relative;}
.form-table .table-wrap table:before{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:var(--Color-Gray-Black)}
.form-table .bdr{border-right:1px solid var(--Color-Gray-200) !important;}
.form-table .bdb{border-bottom:1px solid var(--Color-Gray-200) !important;}
.form-table .no-bdr{border-right:0 !important;}
.form-table thead{background:var(--Color-Blue-Light);}
.form-table thead tr{ border-bottom:1px solid var(--Color-Gray-200);}
.form-table thead th{padding:18rem 20rem; color: var(--Color-Gray-Black); border-right:1px solid var(--Color-Gray-200)}
.form-table thead th:last-child{border-right:0}
.form-table tbody tr{border-bottom:1px solid var(--Color-Gray-200);}
.form-table tbody th{color:var(--Color-Gray-800); border-right:1px solid var(--Color-Gray-200)}
.form-table tbody td{padding:18rem 20rem; text-align: center; color: var(--Color-Gray-800); word-wrap: break-word; word-break: break-word; border-right:1px solid var(--Color-Gray-200)}
.form-table tbody td:last-child{border-right:0}
.form-table tbody:has(th) td{color:var(--Color-Gray-700)}
.form-table .no-data-area{height:284rem; border:0;}

.form-table.no-border .table-wrap table{border-top:0;}
.form-table.no-border table{table-layout: fixed;}
.form-table.no-border .table-wrap table:before{display:none;}
.form-table.no-border thead{border-bottom:0;}
.form-table.no-border thead tr{border-bottom:0;}
.form-table.no-border thead th{border-right:0;}
.form-table.no-border thead th:first-child{padding-left:40rem;}
.form-table.no-border thead th:last-child{padding-right:40rem;}
.form-table.no-border tbody td{border-right:0;}
.form-table.no-border tbody td{padding:40rem 20rem}
.form-table.no-border:has(.need-scroll) tbody td{padding:18rem 20rem;}
.form-table.no-border tbody td:first-child{padding-left:40rem;}
.form-table.no-border tbody td:last-child{padding-right:40rem;}
.form-table.no-border .f-h3{color:var(--Color-Gray-900)}
.form-table.no-border:has(:not(.link)) .f-h3{overflow:hidden; text-overflow: ellipsis; white-space: nowrap; width:100%; max-width:100%;}
.form-table.no-border .f-h3 + .f-b4-r{margin-top:8rem; color:var(--Color-Gray-700)}
.form-table.no-border .table-list{display:flex; align-items: center; justify-content: space-between; gap: 40rem; width:100%;}
.form-table.no-border .table-list.link .f-h3{width:90%; text-align: left;}
.form-table.no-border .table-list.link .f-b4-r{margin-top:0; width:10%; text-align: center; color: var(--Color-Gray-700);}

@media all and (max-width: 1024px) {
  .form-table .table-wrap{width:calc(100% + 20rem); padding-right:20rem;}
  .form-table .table-wrap table:before{background:var(--Color-Gray-400)}
  /* .form-table.no-border:not(:has(.need-scroll)) table{table-layout: auto;} */
  .form-table.no-border .table-wrap table:before{background:var(--Color-Gray-Black);}
  .form-table.no-border thead{display:none;}
  .form-table.no-border tbody td{padding:24rem 16rem;}
  .form-table.no-border:has(.need-scroll) tbody td{padding:18rem 20rem;}
  .form-table.no-border tbody td:first-child{padding-left:16rem;}
  .form-table.no-border tbody td:last-child{padding-right:16rem;}
  .form-table.no-border:has(.need-scroll) tbody td:first-child{padding-left:40rem;}
  .form-table.no-border:has(.need-scroll) tbody td:last-child{padding-right:40rem;}
  .form-table.no-border .table-wrap table:before{display:block;}
  .form-table.no-border .table-list{flex-direction: column; gap:8rem;}
  .form-table.no-border .table-list.link .f-h3{width:100%;}
  .form-table.no-border .table-list.link .f-b4-r{width:100%; text-align: left;}
  .form-table.no-border:has(.need-scroll) thead{display:table-header-group;}
  .form-table.no-border:has(.need-scroll) .table-wrap table:before{display:none;}
}

/* --------------------------------------------- Form END --------------------------------------------- */





/* --------------------------------------------- Swiper START --------------------------------------------- */
/* swiper btn */
.swiper-control {display: flex; align-items: center;}
.swiper-control :is(.swiper-button-next, .swiper-button-prev) {flex-shrink: 0; position: unset; margin: unset; background: url("") no-repeat center center / 100% auto; transition: var(--transition-icon);}
.swiper-control .swiper-button-next {order: 2;}
.swiper-control .swiper-button-prev {order: 1;}
.swiper-control .swiper-pagination {order: 2; position: unset;}
/* circle wht */
.swiper-control.circle-wht {gap: 8rem;}
.swiper-control.circle-wht :is(.swiper-button-next, .swiper-button-prev) {width: 56rem; height: 56rem;}
.swiper-control.circle-wht .swiper-button-next {background-image: url("/common/kr/images/icon-swiper-btn-next.svg");}
.swiper-control.circle-wht .swiper-button-prev {background-image: url("/common/kr/images/icon-swiper-btn-prev.svg");}
.swiper-control.circle-wht .swiper-button-next:hover {background-image: url("/common/kr/images/icon-swiper-btn-next-hover.svg");}
.swiper-control.circle-wht .swiper-button-prev:hover {background-image: url("/common/kr/images/icon-swiper-btn-prev-hover.svg");}
/* circle black */
.swiper-control.circle-black {gap: 8rem;}
.swiper-control.circle-black :is(.swiper-button-next, .swiper-button-prev) {width: 56rem; height: 56rem;}
.swiper-control.circle-black .swiper-button-next {background-image: url("/common/kr/images/icon-swiper-btn-next-black.svg");}
.swiper-control.circle-black .swiper-button-prev {background-image: url("/common/kr/images/icon-swiper-btn-prev-black.svg");}
.swiper-control.circle-black .swiper-button-next:hover {background-image: url("/common/kr/images/icon-swiper-btn-next-black-hover.svg");}
.swiper-control.circle-black .swiper-button-prev:hover {background-image: url("/common/kr/images/icon-swiper-btn-prev-black-hover.svg");}
/* wht arrow 16 */
.swiper-control.wht-arrow :is(.swiper-button-next, .swiper-button-prev) {width: 16rem; height: 16rem;}
.swiper-control.wht-arrow .swiper-button-next {background-image: url("/common/kr/images/icon-swiper-btn-next-arrow.svg");}
.swiper-control.wht-arrow .swiper-button-prev {background-image: url("/common/kr/images/icon-swiper-btn-prev-arrow.svg");}
/* wht arrow 20 */
.swiper-control.arrow :is(.swiper-button-next, .swiper-button-prev) {width: 20rem; height: 20rem;}
.swiper-control.arrow .swiper-button-prev {background-image: url("/common/kr/images/icon-prev-wht.svg");}
.swiper-control.arrow .swiper-button-next {background-image: url("/common/kr/images/icon-next-wht.svg");}


/* gray border swiper */
.gray-border-swiper .swiper-slide{margin-right:8rem; width:auto;}
.gray-border-swiper .swiper-slide:last-child{margin-right:0;}

@media all and (max-width: 1024px) {
  .swiper-control.circle-wht :is(.swiper-button-next, .swiper-button-prev) {width: 48rem; height: 48rem;}
  /* ios 기기 background transition issue */
  .swiper-control .swiper-button-next {transition: none !important;}
  .swiper-control .swiper-button-prev {transition: none !important;}
  .swiper-control.circle-wht .swiper-button-next:hover {background-image: url("/common/kr/images/icon-swiper-btn-next.svg");}
  .swiper-control.circle-wht .swiper-button-prev:hover {background-image: url("/common/kr/images/icon-swiper-btn-prev.svg");}
}
/* --------------------------------------------- Swiper END --------------------------------------------- */





/* --------------------------------------------- Layout Start --------------------------------------------- */
/* 폼 필드 */
/* @ 폼 페이지는 form-field 한번 감싸기 */
.form-field .btn-wrap {margin-top: 100rem;}

@media all and (max-width: 1024px) {
  /* 폼 필드 */
  .form-field .btn-wrap {margin-top: 60rem;}
}

/* half layout */
.half-layout {display: flex; justify-content: space-between; gap: 100rem;}
.half-layout .half-tit .txts {margin-top: 24rem; color: var(--Color-Gray-800);}
.half-layout .half-tit .disc {margin-top: 16rem; color: var(--Color-Gray-800);}
.half-layout .half-tit .ir-contact {margin-top: 48rem;}
.half-layout .half-tit .btns {margin-top: 40rem;}
.half-layout .half-cont {flex-shrink: 0; width: 600rem;}
.half-layout .half-cont .blue-bg-info {padding: 60rem; justify-content: space-between; align-items: flex-end; gap: 20rem;}
.half-layout .half-cont .blue-bg-info .date {display: flex; flex-direction: column; gap: 8rem; margin-top: 16rem;}

.input-wrap {display: flex; flex-direction: column; gap: 48rem;}

@media all and (max-width: 1024px) {
  /* half layout */
  .half-layout {display: block;}
  .half-layout .half-tit {margin-bottom: 40rem;}
  .half-layout .half-tit:has(.ir-contact, .btns) {margin-bottom: 60rem;}
  .half-layout .half-tit .txts {margin-top: 8rem;}
  .half-layout .half-tit .btns {margin-top: 32rem;}
  .half-layout .half-cont {width: 100%;}
  .half-layout .half-cont .blue-bg-info {padding: 24rem; gap: 10rem;}

  .input-wrap {gap: 32rem;}
}

/* card list */
.card-list {display: grid; grid-template-columns: repeat(3, 1fr);}
.card-list + .card-list{margin-top:16rem;}
.card-list .item {display: flex; flex-direction: column; overflow: hidden;}
.card-list .item .img-wrap {flex-shrink: 0; overflow: hidden;}
.card-list .item .img-wrap:not(:has(img)) { background: url("/common/kr/images/icon-logo-noimg.svg") no-repeat center center / 54% auto #f7f7f7;}
.card-list .item .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: var(--transition-icon);}
.card-list .item:hover .img-wrap img {transform: scale(104%);}
.card-list .item .txt-wrap {display: flex; flex-direction: column; justify-content: space-between; flex: 1; overflow: hidden;}
.card-list .item .txt-wrap .tit {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.card-list .item .txt-wrap .date {color: var(--Color-Gray-700);}

.news-sec .card-list {gap: 40rem 20rem;}
.news-sec .card-list .item .img-wrap {height: 262rem; border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;}
.news-sec .card-list .item .txt-wrap {padding: 24rem 24rem 32rem; border: 1px solid var(--Color-Gray-200); border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); border-top: none;}
.news-sec .card-list .item .txt-wrap .date {margin-top: 12rem;}

.card-list:has(.download, .link){gap:16rem;}
.card-list:has(.download, .link) .item{height:280rem;}
.card-list .item.download{background:url("/common/kr/images/icon-gray-circle-download.svg") no-repeat right 32rem bottom 32rem/48rem auto;}
.card-list .item.link{background:url("/common/kr/images/icon-gray-circle-link.svg") no-repeat right 32rem bottom 32rem/48rem auto;}
.card-list:has(.download, .link) .item .txt-wrap{display:block; padding:32rem; border-radius: var(--border-radius-md); border:1px solid var(--Color-Gray-300); transition:var(--transition-icon)}
.card-list:has(.download, .link) .item .txt-wrap:hover{border:1px solid var(--Color-Blue-500); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);}
.card-list:has(.download, .link) .item .txt-wrap .tit{margin-top:16rem; -webkit-line-clamp: 1;}
.card-list:has(.download) .item .txt-wrap:not(:has(.date)) .tit {-webkit-line-clamp: 2; margin-top:0;}

.card-list:has(.annual){grid-template-columns: repeat(2, 1fr); gap:20rem;}
.card-list:has(.annual) .item{flex-direction: row; gap:24rem; padding:32rem; min-height:248rem;}
.card-list:has(.annual) .item:after{display:block; content:""; position:absolute; top:0; left:0; width:calc(100% - 2px); height:calc(100% - 2px); border:1px solid var(--Color-Gray-300); border-radius: var(--border-radius-md); z-index:-1; transition:var(--transition-icon)}
.card-list:has(.annual) .item:hover:after {border: 1px solid var(--Color-Blue-500); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);}
.card-list:has(.annual) .item .img-wrap{width:180rem; height:auto;}
.card-list:has(.annual) .item .img-wrap:not(:has(img)) {background: none;}
.card-list:has(.annual) .item .img-wrap img{max-width:180rem;}
.card-list:has(.annual) .item .txt-wrap{display:block; position:relative;}
.card-list:has(.annual) .item .txt-wrap .tit{margin-top:16rem; -webkit-line-clamp: 1; color:var(--Color-Blue-Primary)}
.card-list:has(.annual) .item .txt-wrap .f-h3{overflow:hidden; margin-top:8rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.card-list:has(.annual) .item .txt-wrap .btns{display: flex; gap: 16rem; align-items: center; position:absolute; bottom:0; left:0; width: 100%;}
.card-list:has(.annual) .item .txt-wrap .btns .download-icon{flex-shrink: 0; width:48rem; height:48rem;background:url("/common/kr/images/icon-gray-circle-download.svg") no-repeat center center/48rem auto;}
.card-list:has(.annual) .item .txt-wrap .btns .f-d1-r{overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; width:calc(100% - 56rem); color: var(--Color-Gray-800);}

/* 뉴스룸 */
.card-list.news {grid-template-columns: repeat(2, 1fr); gap: 80rem;}
.card-list.news .item .img-wrap {height: 321rem; border-radius: var(--border-radius-md);}
.card-list.news .item a {display: block;}
.card-list.news .item .file {position: absolute; top: calc(321rem + 24rem); right: 0; width: 40rem; height: 40rem; border: 1px solid var(--Color-Gray-300); border-radius: var(--border-radius-xs); background: url("/common/kr/images/icon-file-download-clip.svg") no-repeat center center / 20rem 20rem;}
.card-list.news .item:has(.file) .txt-wrap {padding-right: 56rem;}
.card-list.news .item .txt-wrap {margin-top: 24rem;}
.card-list.news .item .txt-wrap .date {margin-top: 8rem;}

@media all and (max-width: 1024px) {
  .card-list{grid-template-columns: repeat(2, 1fr);}
  .card-list + .card-list{margin-top:12rem;}

  .news-sec .card-list {gap: 24rem;}
  .news-sec .card-list .item .img-wrap {height: 218rem;}
  
  .card-list:has(.download, .link){gap:12rem;}
  .card-list:has(.download, .link) .item{height:242rem;}
  .card-list:has(.download, .link) .item .txt-wrap .date {margin-bottom: 12rem;}
  .card-list:has(.download, .link) .item .txt-wrap .tit {margin-top: 0;}
  .card-list:has(.annual){gap: 16rem;}
  .card-list:has(.annual) .item{flex-direction: column; padding:24rem; min-height:0;}
  .card-list:has(.annual) .item:not(:has(img)){gap:0;}
  .card-list:has(.annual) .item .img-wrap{width:100%; text-align: center;}
  .card-list:has(.annual) .item .img-wrap img{width:auto; max-width:100%;}
  .card-list:has(.annual) .item .txt-wrap .tit{margin-top:0;}
  .card-list:has(.annual) .item .txt-wrap .btns{justify-content: flex-start; gap:16rem; position:static; margin-top:24rem;}
}

@media screen and (max-width: 600px) {
  .card-list{grid-template-columns: repeat(1, 1fr);}

  .card-list:has(.annual){grid-template-columns: repeat(1, 1fr);}
}

/* list table */
.list-table {display: flex; flex-direction: column; gap: 8rem;}
.list-table .tr {display: flex; gap: 40rem;}
.list-table .tr .th {flex-shrink: 0; width: 100rem;}
.list-table .tr .td {flex: 1;}

@media all and (max-width: 1024px) {
  .list-table .tr{gap:16rem;}
  .list-table .tr .th{width:80rem;}
}

/* 파란색 배경 정보 디자인 */
.blue-bg-info {display:flex; align-items: center; justify-content: center; padding: 40rem; background: var(--Color-Blue-Light); border-radius: var(--border-radius-md);}
.blue-bg-info .info-line {display:flex; align-items: center; gap:16rem;}
.blue-bg-info .info-line ~ .info-line {margin-top: 16rem;}
.blue-bg-info .info-line .th {flex-shrink: 0; width: 100rem; text-align: left;}
.blue-bg-info .info-line .td {color:var(--Color-Gray-800);}

@media all and (max-width: 1024px) {
  .blue-bg-info .line-wrap {width: 100%;}
  .blue-bg-info .info-line{flex-direction: column; align-items: flex-start; gap:8rem;}
  .blue-bg-info .info-line .th {width: 100%;}
}

/* 회색 보더 정보 디자인 */
.gray-border-info {display:flex; flex-direction: column; gap:16rem; padding: 40rem; border: 1px solid var(--Color-Gray-300); border-radius: var(--border-radius-md);}
.gray-border-info .f-b4-r {color:var(--Color-Gray-800);}

@media all and (max-width: 1024px) {
  .gray-border-info{padding:24rem;}
}

/* indent text */
.indent-txt{display:flex; align-items: flex-start; gap:10rem;}
.indent-txt > span{color:var(--Color-Gray-900); white-space: nowrap;}

/* 서브 공통 비주얼 */
.in-txt-visual{position:relative; top:0 !important; left:-352rem; width:calc(100vw + 1px); height:300vh; opacity:1 !important;}
.in-txt-visual .bottom-fixed{position:relative; width:100%;}
.in-txt-visual .fixed-visual{position:relative; width:100%; height:100vh;}
.in-txt-visual .fixed-visual.fixed{transform:translate(0,0) !important}
.in-txt-visual .fixed-visual.fixed .motion-visual{position:fixed; top:0; left:0; transform:translate(0,0)}
.in-txt-visual .motion-visual{overflow:hidden; position:absolute; top:0; left:50%; transform:translate(-50%, 0); width:1220rem; height:60vh; border-radius:var(--border-radius-lg);}
.in-txt-visual .bottom-fixed::after{display:block; content:""; position:absolute; top:0; right:0; width:100%; height:100%; background:var(--Color-Gray-White); transition:width 0.7s ease; z-index:3;}
.in-txt-visual .motion-visual:after{display:block; content:""; position:absolute; top:0; right:0; width:100%; height:100%; background:var(--Color-Blue-500); transition:width 0.8s ease;}
.in-txt-visual.active .bottom-fixed::after{width:0; transition-delay:0.45s;}
.in-txt-visual.active .motion-visual:after{width:0; transition-delay:0.8s;}
/* .in-txt-visual.active .motion-visual:before{width:0; transition-delay:0.3s;} */
/* .in-txt-visual.active .motion-visual:after{width:0; transition-delay:0.65s;} */
/* .in-txt-visual.active .motion-visual:before{width:0; transition-delay:0.45s;} */
.in-txt-visual .motion-visual .img{width:100%; height:100%;}
.in-txt-visual .motion-visual .img img,
.in-txt-visual .motion-visual .img video{position:relative; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.in-txt-visual .motion-visual .img-dimd{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0;}
.in-txt-visual .motion-visual .txt-div{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1220rem;}
.in-txt-visual .motion-visual .txt-div > *{color:#fff;}
.in-txt-visual .motion-visual .txt-div .f-h2{position:relative; top:80rem; opacity:0; transition:var(--transition-default)}
.in-txt-visual .motion-visual .txt-div .f-d3{position:relative; top:80rem; margin-top:64rem; opacity:0; transition:var(--transition-default)}
.in-txt-visual .motion-visual .txt-div .f-b3-r{position:relative; top:80rem; margin-top:24rem; opacity:0; transition:var(--transition-default)}
.in-txt-visual .motion-visual .txt-div .btns{position:relative; top:80rem; margin-top:64rem; opacity:0; transition:var(--transition-default)}
.in-txt-visual .motion-visual .txt-div.active > *{top:0; opacity:1;}
.in-txt-visual .motion-visual .txt-div.active > *:nth-child(2){transition-delay:0.15s}
.in-txt-visual .motion-visual .txt-div.active > *:nth-child(3){transition-delay:0.3s}
.in-txt-visual .motion-visual .txt-div.active > *:nth-child(4){transition-delay:0.45s}
.in-txt-visual .motion-visual .txt-div.active.hide > *{top:-70rem; opacity:0;}

@media all and (max-width: 1024px) {
  .in-txt-visual{left:-16rem; width:100vw;}
  .in-txt-visual .motion-visual{width:calc(100% - 32rem); height:80vh;}
  .in-txt-visual .motion-visual .txt-div{width:calc(100% - 32rem);}
  .in-txt-visual .motion-visual .txt-div .f-d3{margin-top:32rem;}
  .in-txt-visual .motion-visual .txt-div .btns{margin-top: 40rem;}
}

/* Tab */
.tab-func-area .tab-con-area .tab-con{display:none;}
.tab-func-area .tab-con-area .tab-con.on{display:block;}

/* 사각형 이미지 + 텍스트 구조 - half, center, right 3 Type */
/* half인 경우 txt-wrap내에 left, right 존재, center인 경우 txt-wrap내에 center 존재, right인 경우 txt-wrap내에 right 존재 */
.square-img-wrap .img{overflow:hidden; width:1220rem; height:320rem; border-radius: var(--border-radius-md);}
.square-img-wrap .img img{width:100%; height:100%; object-fit: cover;}
.square-img-wrap .txt-wrap{display:flex; justify-content: flex-end; margin-top:80rem;}
.square-img-wrap .txt-wrap:has(.left){justify-content: space-between;}
.square-img-wrap .txt-wrap:has(.center){justify-content:center;}
.square-img-wrap .txt-wrap .left{width:445rem;}
.square-img-wrap .txt-wrap .left .f-b3-r{margin-top:40rem;}
.square-img-wrap .txt-wrap .right{width:600rem;}
.square-img-wrap .txt-wrap .dots .dot:not(:first-child) {margin-top: 12rem;}
.square-img-wrap .txt-wrap .dots .dot {padding-left: 16rem;}
.square-img-wrap .txt-wrap .dots .dot::before {top: 10rem; width: 4rem; height: 4rem;}

@media all and (max-width: 1024px) {
  .square-img-wrap .img{width:100%; height:437rem;}
  .square-img-wrap .txt-wrap{flex-direction: column; gap:40rem; margin-top:40rem;}
  .square-img-wrap .txt-wrap .left{width:100%;}
  .square-img-wrap .txt-wrap .left .f-b3-r{margin-top:20rem;}
  .square-img-wrap .txt-wrap .right{width:100%;}
}
/* --------------------------------------------- Layout END --------------------------------------------- */





/* --------------------------------------------- Popup - START --------------------------------------------- */
/* common */
.layer-popup {display: none; z-index: 9999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.layer-popup .pop-area {display: flex; flex-direction: column; width: 50%;}
.layer-popup .pop-area .pop-wrap {display: flex; flex-direction: column; overflow: hidden; padding-bottom: 40rem; background-color: var(--Color-Gray-White); border-radius: var(--border-radius-md);}
.layer-popup .pop-area .pop-wrap .pop-fixed {flex-shrink: 0; padding: 20rem 96rem 20rem 40rem;}
.layer-popup .pop-area .pop-wrap .scroll-area {overflow: auto; height: 100%; padding: 0 40rem; margin-right: 2px;}
.layer-popup .pop-area .pop-btn-wrap {position: absolute; top: 19rem; right: 40rem;}
.layer-popup .pop-area .pop-btn-wrap .btn-close {width: 32rem; height: 32rem; background:url("/common/kr/images/icon-close-btn.svg") no-repeat center center / 100% auto;}

@media all and (max-width: 1024px) {
  .layer-popup .pop-area .pop-wrap{border-radius:0;}
  .layer-popup .pop-area .pop-wrap .pop-fixed{padding:22rem 64rem 22rem 16rem;}
  .layer-popup .pop-area .pop-wrap .scroll-area{padding:0 16rem; margin-right:0;}
  .layer-popup .pop-area .pop-btn-wrap{top:11rem; right:16rem;}
  .layer-popup .pop-area .pop-btn-wrap .btn-close{width:48rem; height:48rem; background-size: 24rem auto; background-position: right center;}
}

/* center */
.layer-popup.center-pop .pop-area {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; min-height: 400px;}
.layer-popup.center-pop .pop-area .pop-wrap {max-height: 880px;}

@media all and (max-width: 1024px) {
  .layer-popup.center-pop .pop-area{width:100%; max-width:100%; max-height:100%; height:100%;}
  .layer-popup.center-pop .pop-area .pop-wrap{max-height:100%; height:100%;}
}

/* right */
.layer-popup.right-pop.on .pop-area {right: 0;}
.layer-popup.right-pop .pop-area {position: absolute; right: -700rem; top: 0; bottom: 0; width: 700rem; height: 100%; transition: right .4s ease;}
.layer-popup.right-pop .pop-area .pop-wrap {height: 100%; padding: 40rem 0; border-radius: 0;}
.layer-popup.right-pop .pop-area .pop-wrap .pop-fixed {height: auto; padding: 0 124rem 0 60rem; margin-bottom: 40rem;}
.layer-popup.right-pop .pop-area .pop-wrap .scroll-area {padding: 0 60rem;}
.layer-popup.right-pop .pop-area .pop-btn-wrap {top: 50rem; right: 50rem;}

@media all and (max-width: 1024px) {
  .layer-popup.right-pop .pop-area {right: -100%; width: 100%;}
  .layer-popup.right-pop .pop-area .pop-wrap {padding: 0 0 60rem;}
  .layer-popup.right-pop .pop-area .pop-wrap .pop-fixed {padding: 0 16rem; margin-bottom: 16rem;}
  .layer-popup.right-pop .pop-area .pop-wrap .pop-fixed .pop-head {display: flex; align-items: center; height: 70rem;}
  .layer-popup.right-pop .pop-area .pop-wrap .scroll-area {padding: 0 16rem;}
  .layer-popup.right-pop .pop-area .pop-btn-wrap {top: 11rem; right: 16rem;}
}

/* main & broswer */
.layer-popup:is(.browser-pop, .main-pop) .pop-area .pop-wrap .pop-fixed {display: flex; align-items: center; justify-content: flex-end; height: 70rem; background: var(--Color-Gray-50); border-bottom: 1px solid var(--Color-Gray-200);}

@media all and (max-width: 1024px) {
  .layer-popup:is(.browser-pop) .pop-area .pop-wrap .pop-fixed{justify-content: flex-start;}
}

/* main popup */
.layer-popup.main-pop .pop-area {width: 720rem; height: auto; min-height: unset; max-height: calc(90% - 88rem);}
.layer-popup.main-pop .pop-area .pop-wrap { max-height: unset; padding-bottom: 0;}
.layer-popup.main-pop .pop-area .pop-wrap .pop-cont {height: 430rem;}
.layer-popup.main-pop .pop-area .pop-wrap .pop-cont .main-swiper {height: 100%;}
.layer-popup.main-pop .main-swiper .swiper-slide {overflow-y: auto; width: 100%; height: 100%;}
.layer-popup.main-pop .main-swiper .swiper-slide::-webkit-scrollbar {width: 6rem; background: var(--Color-Gray-100); border-radius: 999rem;}
.layer-popup.main-pop .main-swiper .swiper-slide::-webkit-scrollbar-thumb {background: var(--Color-Gray-500); border-radius: 999rem;}
.layer-popup.main-pop .main-swiper .swiper-slide > a:not([class]) {display: block; width: 100%; min-height: 100%;}
.layer-popup.main-pop .main-swiper .swiper-slide img {width: 100%; min-height: 100%; object-fit: cover;} 
.layer-popup.main-pop .main-swiper .swiper-slide .html {padding: 80rem;}
.layer-popup.main-pop .main-swiper .swiper-slide .html p {word-break: keep-all; overflow-wrap: break-word}
.layer-popup.main-pop .main-swiper .swiper-slide .html .tit {margin-bottom: 20rem;}
.layer-popup.main-pop .main-swiper .swiper-slide .html .txt-wrap {}
.layer-popup.main-pop .main-swiper .swiper-slide .html a {margin-top: 40rem;}
.layer-popup.main-pop .swiper-control {gap: 16rem; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 24rem);}
.layer-popup.main-pop .swiper-control .swiper-button-next {order: 3;}
.layer-popup.main-pop .swiper-control .swiper-button-prev {order: 1;}
.layer-popup.main-pop .swiper-control .swiper-pagination {order: 2; font-family:"Pretendard-Medium"; font-size: 16rem; color: var(--Color-Gray-White);}
.layer-popup.main-pop .swiper-control .swiper-pagination :is(.swiper-pagination-current, .swiper-pagination-total) {display: inline-block; width: 10rem;}
.layer-popup.main-pop .swiper-control .swiper-pagination .swiper-pagination-current {margin-right: 4rem;}
.layer-popup.main-pop .swiper-control .swiper-pagination .swiper-pagination-total {margin-left: 4rem;}

@media all and (max-width: 1024px) {
  .layer-popup.main-pop .pop-area {width: 80%;}
  .layer-popup.main-pop .pop-area .pop-wrap {border-radius: var(--border-radius-md);}
  .layer-popup.main-pop .pop-area .pop-wrap .pop-fixed {padding-right: 76rem;}
  .layer-popup.main-pop .pop-area .pop-btn-wrap {right: 20rem;}
  .layer-popup.main-pop .pop-area .pop-btn-wrap .btn-close {background-size: 32rem auto;}
  .layer-popup.main-pop .main-swiper .swiper-slide .html {padding: 40rem;}
  .layer-popup.main-pop .swiper-control .swiper-pagination {font-size: 15rem;}
  /* .layer-popup.main-pop .swiper-control .swiper-pagination :is(.swiper-pagination-current, .swiper-pagination-total) {width: 10rem;} */
}

@media all and (max-width: 600px) {
  .layer-popup.main-pop .pop-area {width: 328rem;}
}
/* --------------------------------------------- Popup - END --------------------------------------------- */





/* --------------------------------------------- Loading START --------------------------------------------- */
.loading-area {position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 999; background: rgba(0,0,0,.5);}
.loading-area .loading-wrap {text-align: center; color: var(--Color-Gray-White);}
.loading-area .loading-wrap .loading-div {display: flex; align-items: center; justify-content: center; width: 100rem; height: 100rem; margin: 0 auto 40rem;}
.loading-area .loading-wrap .loading-div .loading {display: inline-block; width: 56rem; height: 56rem; border: 5rem solid var(--Color-Gray-White); border-bottom-color: transparent; border-radius: 50%; animation: rotation 1s linear infinite;}
@keyframes rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
/* --------------------------------------------- Loading END --------------------------------------------- */





/* --------------------------------------------- Vertical START --------------------------------------------- */
/* scroll area */
/* @ 스크롤 필요 시, 컨텐츠 부모에 scroll-area를 감싸기 */
.only-vertical-view .scroll-area {overflow-y: auto; height: 100%;}
.only-vertical-view .scroll-area::-webkit-scrollbar {width: 6px; height: 6px; background: var(--Color-Gray-100);}
.only-vertical-view .scroll-area::-webkit-scrollbar-track {display: none;}
.only-vertical-view .scroll-area::-webkit-scrollbar-thumb {background-color: var(--Color-Gray-500);}

/* 세로모드 최적화 */
.only-vertical-view {display: none;}
/* .only-vertical-view.on {display: block;} */
.only-vertical-view {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9999; background-color: var(--Color-Gray-White);}
.only-vertical-view .scroll-area .vertical-wrap {display: flex; flex-direction: column; gap: 24rem; align-items: center; justify-content: center; min-height: 100%; padding: 15rem;}
.only-vertical-view .scroll-area .vertical-wrap .icon {padding: 30rem 50rem; border-radius: var(--border-radius-md); background-color: var(--Color-Blue-Light);}
.only-vertical-view .scroll-area .vertical-wrap .logo {width: 161rem;}
.only-vertical-view .scroll-area .vertical-wrap .logo img {width: 100%;}
.only-vertical-view .scroll-area .vertical-wrap .txt {text-align: center; color: var(--Color-Gray-800);}
.only-vertical-view .scroll-area .vertical-wrap .txt span {color: var(--Color-Gray-900);}

/* @media (orientation: landscape) and (pointer: coarse) {
  @media (max-height: 414px) and (max-width: 1023px) {
    body.vertical {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
  }
} */
/* --------------------------------------------- Vertical END --------------------------------------------- */





/* --------------------------------------------- Txt START --------------------------------------------- */
/* dot */
.dots .dot {}
.dot {position: relative; padding-left: 11rem;}
.dot:before {content: ""; position: absolute; top: 11rem; left: 0; width: 3rem; height: 3rem; background: var(--Color-Gray-500); border-radius: 50%;}
/* --------------------------------------------- Txt END --------------------------------------------- */





/* --------------------------------------------- Layout START --------------------------------------------- */
/* 컨텐츠 타이틀 */
.cont-tit-wrap {position: relative; margin-bottom: 40rem;}
.cont-tit-wrap:has(.cont-txt) {display: flex; justify-content: space-between;}
.cont-tit-wrap .cont-tit .btns {margin-top: 16rem;}
.cont-tit-wrap .btns {display: flex; gap: 8rem;}
.cont-tit-wrap .f-b3-r{margin-top:24rem; color:var(--Color-Gray-800);}
.cont-tit-wrap:has(.f-d1-r){align-items: flex-end;}
.cont-tit-wrap .f-d1-r{color: var(--Color-Gray-700);}
.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) {margin-bottom: 60rem;}
.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-tit {width: 405rem;}
.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt {width: 755rem;}
.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .txt {margin-top: 0; color: var(--Color-Gray-900);}
.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .btns {margin-top: 24rem;}

.sec-tit-wrap{display:flex; align-items:flex-end; justify-content: space-between; position: relative; margin-bottom: 20rem;}
.sec-tit-wrap:has(.total-num){align-items: center;}
.sec-tit-wrap .f-d1-r{color:var(--Color-Gray-700);}
.sec-tit-wrap .form-select{width:160rem;}
.sec-tit-wrap .sec-tit .tit + .txt {margin-top: 16rem;}

@media all and (max-width: 1024px) {
  .cont-tit-wrap{margin-bottom:20rem;}
  .cont-tit-wrap:has(.cont-txt) {display: block;}

  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-tit {width: auto;}
  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt {width: auto;}
  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .txt {margin-top: 20rem;}
  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .btns {flex-direction: column; align-items: flex-start;}

  .sec-tit-wrap{flex-wrap: wrap; gap:16rem;}
  .sec-tit-wrap:not(:has(.form-wrap)) .form-select{width:100%;}
}

@media all and (max-width: 600px) {
  .sec-tit-wrap .f-d1-r{width:100%;}
  .sec-tit-wrap:has(.sec-tit .txt) .f-d1-r{margin-top:-8rem;}
}


/* 총 n건 */
.total-num{color:var(--Color-Gray-700);}
.total-num .num{margin:0 4rem; color:var(--Color-Gray-900);}

/* no-data */
.no-data-area{display:flex; align-items:center; justify-content:center; height:440rem; border:1px solid var(--Color-Gray-300); border-radius:var(--border-radius-md);}
.no-data-area .f-b4-r{padding-top:60rem; background:url("/common/kr/images/icon-no-data.svg") no-repeat center top/40rem auto;}

@media all and (max-width: 1024px) {
  .no-data-area{height:320rem;}
}

/* 상세페이지 */
.view-detail-con{position:relative; padding:100rem 0 60rem; border-bottom:1px solid var(--Color-Gray-300)}
.view-detail-con .detail-tit {position: relative; padding: 40rem 0;}
.view-detail-con .detail-tit:after{content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100vw; height:1px; background:var(--Color-Gray-200);}
.view-detail-con .detail-tit .tit-wrap {width: 910rem; margin: 0 auto; text-align: center;}
.view-detail-con .detail-tit .tit-wrap .f-b4-r{margin-top:20rem; color: var(--Color-Gray-700);}
.view-detail-con .detail-tit .prev-btn{position:absolute; top:50%; left:0; transform:translateY(-50%); width:40rem; height:40rem; background:url("/common/kr/images/icon-detail-prev.svg") no-repeat center center / 100% auto;}
.view-detail-con .detail-con {padding-top: 60rem;}
.view-detail-con .detail-con img{max-width:100% !important; text-align: center;}
.view-detail-con .detail-file{display:flex; gap:40rem; padding:24rem 40rem; margin-top:60rem; background:var(--Color-Gray-50); border-radius: var(--border-radius-xs);}
.view-detail-con .detail-file .f-b4-m{padding-left:32rem; background:url("/common/kr/images/icon-file-download.svg") no-repeat left top/24rem auto;}
.view-detail-con .detail-file .file:not(:first-child){margin-top:8rem;}
.view-detail-con .detail-file .file a{color:var(--Color-Gray-800)}

@media all and (max-width: 1024px) {
  .view-detail-con{padding:70rem  0 40rem;}
  .view-detail-con .detail-tit {display: flex; align-items: center; gap: 24rem; padding: 40rem 24rem 40rem 0;}
  .view-detail-con .detail-tit .tit-wrap {width: 100%;}
  .view-detail-con .detail-tit .prev-btn {position: unset; transform: unset;}
  .view-detail-con .detail-con {padding-top: 24rem;}
  .view-detail-con .detail-file{display: block; padding:24rem;}
  .view-detail-con .detail-file .f-b4-m{margin-bottom: 24rem;}
}

/* 상세페이지 이전글, 다음글 */
.page-move{padding-top:40rem;}
.page-move .page-move-btn{display:flex; align-items: center; gap:60rem; position:relative; padding:20rem 40rem;}
.page-move .page-move-btn:has(.f-d1-r:empty){cursor: default;}
.page-move .page-move-btn .f-d1-b{position:relative; padding-left:32rem;}
.page-move .page-move-btn .f-d1-b:before{display:block; content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:16rem; height:16rem; background:url("/common/kr/images/icon-page-prev-arrow.svg") no-repeat center center / 16rem auto;}
.page-move .page-move-btn.next .f-d1-b:before{transform:translateY(-50%) rotate(180deg);}
.page-move .page-move-btn .f-b4-r{overflow:hidden; width:864rem; text-overflow: ellipsis; white-space: nowrap; color:var(--Color-Gray-800);}
.page-move .page-move-btn .f-d1-r{position:absolute; top:50%; right:40rem; transform:translateY(-50%); color:var(--Color-Gray-800)}

@media all and (max-width: 1024px) {
  .page-move .page-move-btn{display: grid; grid-template-columns: 47rem 1fr; gap:6rem 24rem; align-items: flex-start; padding:16rem 0;}
  .page-move .page-move-btn .f-d1-b{padding-left:24rem; grid-row: 1 / span 2;  margin-top: 2rem;}
  .page-move .page-move-btn .f-b4-r{width:auto;}
  .page-move .page-move-btn .f-d1-r{position:unset; transform:translateY(0); padding-left:0;}
}
@media all and (max-width: 1024px) {
  .page-move .page-move-btn .f-d1-b {margin-top: 1rem;}
}

/* table 위 당구장 표시 info 텍스트 */
.info-txt-wrap{display:flex; flex-direction: column; gap:8rem; margin-bottom:60rem;}
.info-txt-wrap:last-child{margin:20rem 0 0;}
.info-txt-wrap .info-txt{position:relative; padding-left:12rem; color: var(--Color-Gray-700);}
.info-txt-wrap .info-txt:before{display:block; content:"※"; position:absolute; top:0; left:0;}

/* 아코디언 */
.accordion-wrap {display: flex; flex-direction: column; gap: 32rem; margin-top: 40rem;}
.accordion-wrap .accordion-item .accor-tit button {position: relative; width: 100%; padding-bottom: 32rem; text-align: left; border-bottom: 1px solid #000;}
.accordion-wrap .accordion-item .accor-tit button::before {content: ""; position: absolute; top: 0; right: 0; width: 40rem; height: 40rem; background: url("/common/kr/images/icon-plus.svg") no-repeat center center / 100% auto; transition: background .1s ease;}
.accordion-wrap .accordion-item.on .accor-tit button::before {background-image: url("/common/kr/images/icon-minus.svg");}
.accordion-wrap .accordion-item .accor-cont {display: none;}
.accordion-wrap .accordion-item .accor-cont .txt-list .item {padding: 32rem 0 24rem; border-bottom: 1px solid var(--Color-Gray-300);}
.accordion-wrap .accordion-item .accor-cont .txt-list .item .txt {color: var(--Color-Gray-800);}
.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts {margin-top: 24rem;}
.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts .txt + .txt {margin-top: 6rem;}
.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts .txt:has(.num) {display: flex; gap: 6rem;}
.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts .txt:has(.num) span {flex-shrink: 0; color: var(--Color-Gray-900);}
@media all and (max-width: 1024px) {
  .accordion-wrap {gap: 24rem;}
  .accordion-wrap .accordion-item .accor-tit button {padding-bottom: 24rem;}
  .accordion-wrap .accordion-item .accor-tit button::before {top: 3rem; width: 24rem; height: 24rem;}
  .accordion-wrap .accordion-item .accor-cont .txt-list .item {padding: 24rem 0;}
}

/* 100% 이미지 */
.img-box img {width: 100%;}

.blue-img-wrap {padding: 100rem 100rem 130rem 100rem; border-radius: var(--border-radius-lg); background-color: var(--Color-Blue-Light);}
.blue-img-wrap .img {width: 600rem; margin: 0 auto; overflow: hidden; border-radius: var(--border-radius-md); background-color: var(--Color-Gray-White); box-shadow: 0 30rem 25rem 0rem rgba(0, 48, 135, .15);}
.blue-img-wrap .img img {width: 100%;}
@media all and (max-width: 1024px) {
  .img-box:has(.scroll-area) {overflow-x: auto; width: calc(100% + 16rem); padding-bottom: 8rem; padding-right: 16rem;}
  .img-box:has(.scroll-area) .scroll-area {width: 1240rem;}
  .img-box:has(.scroll-area)::-webkit-scrollbar {width: 6px; height: 6px; background: var(--Color-Gray-100);}
  .img-box:has(.scroll-area)::-webkit-scrollbar-thumb {background-color: var(--Color-Gray-500); border-radius: 999rem;}

  .blue-img-wrap {padding: 32rem 32rem 45rem 32rem;}
  .blue-img-wrap .img {width: 262rem; box-shadow: 0 15rem 25rem 0rem rgba(0, 48, 135, .15);}
}
/* --------------------------------------------- Layout END --------------------------------------------- */