/* default */
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, menu, nav, section, article, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {margin:0; padding:0;}
ul, ol, li {list-style:none;}
a {color:inherit; text-decoration:none; outline:none;}
input, button, select, fieldset, textarea {border-radius: 0; appearance: none; border: 0; font-family: inherit;}
input:focus, select:focus {outline: 0;}
button:focus, a:focus, button, a {outline: none;}
h1, h2, h3, h4, strong, th {font-weight:normal; font-family:inherit; color:inherit;}
em {font-style: normal;}
body,body * {box-sizing:border-box;}
html, body {font-family: "var(--body-inter)", "var(--body-noto)", sans-serif; font-weight: 400; font-optical-sizing: auto; padding: 0; margin: 0; word-break: keep-all; -webkit-text-size-adjust: 100%;
::-webkit-scrollbar {width: 5px; height:5px;}
::-webkit-scrollbar-thumb {background-color: var(--point-color-1);}
::-webkit-scrollbar-track {background-color: #fff;}
}
html.not-scroll, html.not-scroll body {overflow-y: hidden;}
html {color: #222;}
.skip, legend {overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(1px, 1px, 1px, 1px);}
* {box-sizing: border-box; word-break: keep-all;}

a:focus, button:focus, input:focus, select:focus {outline: 1px dashed #ddd;}
button {cursor: pointer; background-color: transparent;}
br {font-size: 0;}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 공통적용 */


/* header 헤더 */
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: rgb(255, 255, 255, 0.7); transition: all 0.5s; z-index: 10000; display: none;}
.header .header-inner {height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.header .header-logo {width: 100%; max-width: 140px; margin-left: 50px;}
.header .header-logo a {width: 100%; height: 100vh; max-height: 100px; display: flex; align-items: center;}
.header .header-logo img {display: block; width: 100%;}
.header .header-gnb {display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.header .header-gnb .gnb-depth-1 {display: flex; text-align: center;}
.header .header-gnb .depth-1 {position: relative;}
.header .header-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; height: 100px; padding: 0 65px; font-size: 20px; font-weight: 500; outline: none;}
.header .header-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .header-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: -8px; width: 0; height: 1px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: var(--black-color-1);}
.header .header-gnb .depth-1.current > a > span::before {content: ""; display: block; width:calc(100% + 4px);}
.header .header-gnb .depth-1 .depth-item {background-color: #313341; position: absolute; top: 100%; left: 0; width: 100%; height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: all 0.3s;}
.header .header-gnb .depth-1.current .depth-item {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-1 .depth-item .gnb-depth-2 {padding: 10px 0; visibility: hidden; opacity: 0; transition: all 0.3s; background: rgba(255, 255, 255, 0.5);}
.header .header-gnb .depth-1.current .depth-item .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-2 > .depth-2-link {display: block; padding: 8px 0; font-size: 17px; color: var(--black-color-1); transition: color 0.1s;}
.header .header-gnb .depth-2 > .depth-2-link:hover,
.header .header-gnb .depth-2 > .depth-2-link:focus {color: var(--point-color-1); font-weight: 500;}

.header .mobile-gnb {display: none;}
.header .mobile-gnb .sidebar-btn {position: relative; width: 80px; height: 80px; z-index: 1; outline: none;}
.header .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 28px; width: 25px; height: 2px; background-color: #222;}
.header .mobile-gnb .sidebar-btn span:nth-child(1) {top: 29px;}
.header .mobile-gnb .sidebar-btn span:nth-child(2) {top: 39px; transition: opacity 0s 0.15s;}
.header .mobile-gnb .sidebar-btn span:nth-child(3) {top: 49px;}
.header .mobile-gnb .sidebar-btn span:nth-child(1), .header .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1), .header .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 39px; width: 30px; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 25px; transform: rotate(45deg);}
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 25px; transform: rotate(-45deg);}
.header .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: calc(100vh - 80px); top: 80px; left: 0; background-color: rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1;}
.header .mobile-gnb .sidebar-wrap .sidebar {position: absolute; top: 0; right: 0; width: 100%; max-width: 375px; height: 100%; background-color: rgb(255, 255, 255, 0.7); transform: translateX(100%); transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto; padding: 0;}
.header .mobile-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 18px; font-weight: 400;}
.header .mobile-gnb .depth-1 > .depth-1-link:not(:only-child)::before {content: "+"; display: block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); font-size: 18px;}
.header .mobile-gnb .depth-1.open > .depth-1-link:not(:only-child)::before {content: '-';}
.header .mobile-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .mobile-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: -8px; width: 0; height: 2px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: var(--black-color-1);}
.header .mobile-gnb .depth-1.open > .depth-1-link > span::before {width:calc(100% + 4px);}
.header .mobile-gnb .gnb-depth-2 {max-height: 0; overflow: hidden; padding: 0; background-color: rgb(255, 255, 255, 0.5); text-align: left; box-sizing: content-box; transition: all 0.35s ease-in-out;}
.header .mobile-gnb .depth-1.open .gnb-depth-2 {padding: 10px 0;}
.header .mobile-gnb .depth-2 > .depth-2-link {display: block; visibility: hidden; opacity: 0; padding: 10px 25px; font-size: 16px; font-weight: 500; color: var(--black-color-1); transition: all 0.35s;}
.header .mobile-gnb .depth-2 > .depth-2-link.active {color: var(--point-color-1); font-weight: bold;} /* 현재 페이지 활성화 되어있음을 알리는 active 클래스 */
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}

.header-language {position: relative; margin-right: 50px; background: var(--point-color-1); border-radius: 17px; padding: 1px 1px}
.header-language .lang-btn {display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--white-color-1); padding: 6px 10px; border-radius: 16px; letter-spacing: 0.05em; line-height: 1;}
.header-language .lang-btn img {width: 20px; flex-shrink: 0;}
.header-language .lang-btn span {font-size: 14px; font-weight: 300;}
.header-language .lang-popup {display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--white-color-1); border: 1px solid #e0e0e0; border-radius: 4px; min-width: 68px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100;}
.header-language .lang-popup.open {display: block;}
.header-language .lang-popup ul {padding: 4px 0;}
.header-language .lang-popup li a {display: block; padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--black-color-1); text-align: center; transition: background .12s;}
.header-language .lang-popup li a:hover {background: #f5f5f5; color: #222;}
.header-language .lang-popup li.lang-active a {color: var(--point-color-1); font-weight: 700;}

.mheader-language {margin-top: 30px; display: flex; justify-content: center; align-items: center;}
.mheader-language .mlang-inner {display: flex; align-items: center; overflow-x: auto; max-width: 100%;}
.mheader-language .mlang-btn {flex-shrink: 0; background: var(--point-color-1); padding: 10px 16px; border-radius: 20px; display: flex; justify-content: center; align-items: center; gap: 5px;}
.mheader-language .mlang-btn img {width: 20px; flex-shrink: 0;}
.mheader-language .mlang-btn span {font-size: 15px; font-weight: 500; color: var(--white-color-1);}
.mheader-language .mlang-slide {display: flex; align-items: center; max-width: 0; overflow: hidden; transition: max-width 0.35s ease;}
.mheader-language .mlang-slide.open {max-width: 600px;}
.mheader-language .mlang-slide a {flex-shrink: 0; display: flex; align-items: center; padding: 8px 16px; font-size: 15px; font-weight: 600; color: var(--point-color-1); white-space: nowrap;}

@media (max-width:1240px) {
  .header .header-gnb .depth-1 > .depth-1-link {padding: 0 45px;}
  .header .header-gnb .depth-1 > .depth-1-link {font-size: 18px;}
  .header .header-gnb .depth-2 > .depth-2-link {font-size: 16px;}
}
@media (max-width:1024px) {
  .header {position: fixed; width: 100%; height: 80px; overflow: visible;}
  .header .header-inner {text-align: right;}
  .header .header-logo {margin-left: 20px;}
  .header .header-logo a {height: 80px;}
  .header .header-logo img {width: 100%; max-width: 120px;}
  .header .header-gnb {display: none;}
  .header .mobile-gnb {display: block;}
}
@media (max-width:500px) {
  html.not-scroll .header .header-logo {opacity: 0;}
  .header .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
}
/* header End */

/* footer css */
.footer {background: var(--point-color-1); color: var(--white-color-1); padding: 80px 50px;}
.footer .footer-inner {width: 100%; margin: 0; display: flex; gap: 40px; justify-content: space-between;}
.footer .footer-inner img {width: 100%; max-width: 200px; filter: brightness(0) invert(1);}
.footer .footer-inner p {margin: 0; font-size: 16px; line-height: 180%;}
.footer .foot_tel {display: flex; flex-direction: column; gap: 4px; text-align: right; justify-content: center;}
.footer .foot_tel b {font-size: 20px; font-weight: 400;}
.footer .foot_tel a {font-size: 30px; font-weight: 700;}
.footer .foot_tel a:hover {color: #e0e0e0;}

@media (max-width:1024px) {
    .footer {padding: 60px 20px;}
    .footer .footer-inner {gap: 20px; align-items: center; flex-direction: column-reverse;}
    .footer .footer-inner img {max-width: 120px;}
    .footer .footer-inner p {margin: 0; font-size: 16px; line-height: 180%; text-align: center;}
    .footer .foot_tel {text-align: center;}
}

/* popup css */
.mpopup_wp {position: absolute; top: 140px; left: 50%; transform: translate(-50%, 0); z-index: 10000; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%;}
.mpopup_inner {display: flex; flex-direction: column; width: 100%; max-width: 400px; min-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,.1);}
.mpopup_inner .mpopup_img {width: 100%; height: 520px; overflow: hidden; position: relative;}
.mpopup_inner .mpopup_img img {width: 100%; height: 100%; object-fit: cover;}
.mpopup_inner .mpopup_img .pop_bt {position: absolute; top: 50%; z-index: 10; background: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 30px; height: 30px; background-color: #404040; display: flex; justify-content: center; align-items: center;}
.mpopup_inner .mpopup_img .pop_bt:hover {background: rgba(0, 0, 0, 0.3);}
.pop_prev {left: 10px; transform: translateY(-50%);}
.pop_next {right: 10px; transform: translateY(-50%);}

.mpopup_inner .mpopup_img .mpopup_title {max-width: 340px; position: absolute; top: 10px; left: 50%; transform: translateX(-50%) translateY(calc(100% - 20px)); z-index: 10; font-size: 14px; line-height: 120%; text-align: center; color: #a6a6a6; background: rgba(0, 0, 0, 0.5); padding: 12px 20px; border-radius: 20px; word-break: break-all; opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease;}
.mpopup_inner .mpopup_img:hover .mpopup_title {transform: translateX(-50%) translateY(0); opacity: 1;}
.mpopup_inner .mpopup_bt {width: 100%; display: flex; justify-content: center; align-items: center; gap: 1px;}
.mpopup_inner .mpopup_bt .pop_bt {width: 100%; height: 60px; background-color: #262626; color: #a6a6a6; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 400;}
.mpopup_inner .mpopup_bt .pop_bt:hover {background-color: #2e2e2e; color: #bbbbbb;}

/* popup slider */
.mpop-slides {display:flex; height:100%; width:100%; transition:transform 0.5s ease;}
.mpop-slide {min-width:100%; height:100%; flex-shrink:0;}
.mpop-slide a {display:block; width:100%; height:100%;}
.mpop-slide img {width:100%; height:100%; object-fit:cover;}


/* site design start */
/* main css */
.sm_con_wp {width: 100%; background: url(/layout/kr/images/sm_st_bg01.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;}

@keyframes quick1-expand {
    from {transform: translate(-50%, 0) scaleX(0); opacity: 0;}
    to   {transform: translate(-50%, 0) scaleX(1); opacity: 1;}
}
.sm_quick1 {position: fixed; top: 20px; left: 50%; transform: translate(-50%, 0); z-index: 10; background: rgba(0, 0, 0, 0.3); border-radius: 50px; display: flex; justify-content: center; align-items: center; transform-origin: center; animation: quick1-expand 0.8s ease forwards;}
.sm_quick1 a {height: 80px; padding: 0 40px; transition: background 0.3s ease; border-radius: 50px; display: flex; justify-content: center; align-items: center;}
.sm_quick1 a:hover {background: var(--point-color-1); border-radius: 50px;}
.qk_on {background: var(--point-color-2);}
.ps_logo0 {height: 40px;}
.ps_logo1 {height: 30px;}
.ps_logo2 {height: 40px;}

.sm_step01 {width: 100%; height: 100vh; max-height: 1080px; position: relative; border-radius: 0 0 100px 100px; overflow: hidden; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);}
.sm_step01 .sm_st_txt {width: 100%; position: absolute; left: 0; top: 50%; z-index: 5; translate(-50%, 0); color: var(--white-color-1); text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25); padding: 0 140px;}
.sm_step01 .sm_st_txt b {font-family: var(--body-noto); font-size: 42px; font-weight: 700; display: block; padding: 0;}
.sm_step01 .sm_st_txt span {font-family: var(--body-noto); font-size: 32px; font-weight: 500;}
.sm_step01 .sm_st_num {position: absolute; left: 140px; bottom: 80px; z-index: 5; display: flex; justify-content: flex-start; align-items: center; gap: 50px;}
.sm_step01 .sm_st_num .sm_st_number {font-family: var(--body-inter); font-size: 52px; font-weight: 100; color: #fff; letter-spacing: -1px; opacity: 0.5;}
.nbon {width: 200px; opacity: 1!important;}

.sm_bg01 {background: url(/layout/kr/images/sm_bg01.jpg) no-repeat center center; background-size: cover;}
.sm_bg02 {background: url(/layout/kr/images/sm_bg02.jpg) no-repeat center center; background-size: cover;}
.sm_bg03 {background: url(/layout/kr/images/sm_bg03.jpg) no-repeat center center; background-size: cover;}
.sm_bg04 {background: url(/layout/kr/images/sm_bg04.jpg) no-repeat center center; background-size: cover;}
.sm_bg05 {background: url(/layout/kr/images/sm_bg05.jpg) no-repeat center center; background-size: cover;}
.sm_bg06 {background: url(/layout/kr/images/sm_bg06.jpg) no-repeat center center; background-size: cover;}

/* 텍스트 등장 애니메이션 (오른쪽 → 왼쪽) */
@keyframes txt-slide-in {
    from {opacity: 0; transform: translateX(60px);}
    to   {opacity: 1; transform: translateX(0);}
}
.sm_st_txt b,
.sm_st_txt span {opacity: 0;}
.sm_st_txt.txt-enter b    {animation: txt-slide-in 0.8s ease forwards;}
.sm_st_txt.txt-enter span {animation: txt-slide-in 0.8s ease 0.2s forwards;}

/* 배경 크로스페이드 레이어 */
.sm_bg-layers {position: absolute; inset: 0; z-index: 0;}
.sm_bg-layer {position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;}
.sm_bg-layer.is-active {opacity: 1;}

/* 번호 밑줄 진행 애니메이션 */
.sm_st_number {position: relative; transition: opacity 0.5s ease, width 0.5s ease;}
.nb-line {display: block; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: #fff;}
.sm_st_number.nbon .nb-line {animation: nb-progress 5s linear forwards;}
@keyframes nb-progress {from {width: 0;} to {width: 100%;}}

/* sm_tit1 등장 애니메이션 */
@keyframes tit-slide-up {
    from {opacity: 0; transform: translateY(30px);}
    to   {opacity: 1; transform: translateY(0);}
}
.sm_tit1 p, .sm_tit1 span {opacity: 0;}
.sm_tit1.tit-enter p    {animation: tit-slide-up 0.7s ease forwards;}
.sm_tit1.tit-enter span {animation: tit-slide-up 0.7s ease 0.2s forwards;}

.sm_tit1 {width: 100%; padding: 100px 40px 50px 40px; text-align: center;}
.sm_tit1 p {font-family: var(--body-glut); font-size: 60px; font-weight: 500; color: var(--point-color-1); line-height: 100%;}
.sm_tit1 span {font-size: 20px; font-weight: 400; color: var(--black-color-1); line-height: 140%; margin-top: 20px; display: block;}
.sm_tl {text-align: left;}
.sm_tr {text-align: right;}

.sm_step02 {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 80px; padding: 100px 0 150px 0;}
.sm_step02 .sm_st02_bx {width: 100%; height: 564px; position: relative; cursor: pointer;}
.sm_step02 .sm_st02_bx::before {content: ''; position: absolute; inset: 0; background-size: 100%; background-position: center center; background-repeat: no-repeat; transition: background-size 1s ease; z-index: 0;}
.sm_step02 .sm_st02_bx:hover::before {background-size: 120%;}
.sm_sbx_logo {position: absolute; left: 50%; top: -50px; transform: translate(-50%, 0); z-index: 5;}
.sm_step02 .sm_st02_bx:hover .sm_sbx_logo {animation: logo-bounce 0.6s ease infinite;}
@keyframes logo-bounce {
    0%   {transform: translate(-50%, 0);}
    30%  {transform: translate(-50%, -18px);}
    50%  {transform: translate(-50%, 0);}
    65%  {transform: translate(-50%, -8px);}
    80%  {transform: translate(-50%, 0);}
    90%  {transform: translate(-50%, -3px);}
    100% {transform: translate(-50%, 0);}
}
.rdos1::before {background-image: url(/layout/kr/images/sm_st_bg03.jpg); border-radius: 0 282px 282px 0;}
.rdos2::before {background-image: url(/layout/kr/images/sm_st_bg02.jpg); border-radius: 282px 0 0 282px;}

.site_bt01 {background-color: var(--point-color-1); padding: 10px 30px; color: var(--white-color-1); font-size: 18px; font-weight: 300; text-align: center; border: 0; display: inline-block; margin-top: 20px; border-radius: 30px; transition: background 0.3s ease;}
.site_bt01:hover {background: var(--point-color-3);}

@media (max-width:1080px) {
  .sm_step01 .sm_st_txt {padding: 0 100px;}
  .sm_step01 .sm_st_num {left: 100px;}
  .sm_step01 .sm_st_num .sm_st_number {font-size: 32px;}
  .nbon {width: 100px;}
  .sm_step02 {padding: 0; gap: 20px;}
  .sm_sbx_logo {top: 30px;}
}
@media (max-width:700px) {
  .sm_step01 .sm_st_txt {padding: 0 40px;}
  .sm_step01 .sm_st_num {left: 40px; gap: 30px;}
  .sm_step02 {flex-direction: column; gap: 0;}
  .ps_logo0 {height: 30px;}
  .ps_logo1 {height: 22px;}
  .ps_logo2 {height: 30px;}
  .sm_quick1 a {height: 60px; padding: 0 20px;}
  .nbon {width: 80px;}
}

/* sub css */
.ss_con_wp {width: 100%; background: #fff;}

.side_quick {position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; align-items: flex-end; flex-direction: column; gap: 10px;}
.side_quick .sd_qkbt {width: 70px; height: 70px; background: var(--point-color-1); display: flex; justify-content: center; align-items: center; border-radius: 35px 0 0 35px; transition: width 0.3s ease; overflow: hidden;}
.side_quick .sd_qkbt img {width: 36px; margin-left: 10px; flex-shrink: 0;}
.side_quick .sd_qkbt b {font-size: 18px; color: var(--white-color-1); font-weight: 400; padding-left: 8px; display: inline-block; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.3s ease, opacity 0.2s ease 0.15s;}
.side_quick .sd_qkbt:hover {width: 150px;}
.side_quick .sd_qkbt:hover b {max-width: 120px; opacity: 1;}

.side-info-overlay {position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 25; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;}
.side-info-overlay.is-active {opacity: 1; pointer-events: auto;}

.side_info_wp {position: fixed; right: 0; top: 50%; transform: translateY(-50%) translateX(100%); z-index: 26; width: 100%; max-width: 900px; max-height: 90vh; padding: 60px; border-radius: 100px 0 0 100px; background-color: var(--white-color-1); display: flex; flex-direction: column; gap: 20px; overflow-y: auto; transition: transform 0.4s ease;}
.side_info_wp.is-open {transform: translateY(-50%) translateX(0);}
.side_info_wp .side-info-close {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: rgba(0,0,0,0.4); border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;}
.side_info_wp .side-info-close:hover {background: rgba(0,0,0,0.7);}
.side_info_wp .side-info-close img {width: 18px;}
.side_info_wp .side_info_bt {background-color: #D5D5D5; border-radius: 35px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: fit-content;}
.side_info_con > div {display: none;}
.side_info_con > div.is-active {display: block; white-space: pre-wrap; max-height: 800px; overflow-y: auto; font-size: 18px; font-weight: 400; color: var(--black-color-1); line-height: 180%;}
.sd_bt {background-color: #D5D5D5; border-radius: 35px; padding: 15px 40px; border: none; cursor: pointer; font-size: 18px; font-weight: 400; color: var(--black-color-1); transition: background 0.3s ease, color 0.3s ease;}
.sd_bt:hover {background-color: var(--point-color-2); color: var(--white-color-1);} 
.sd_bt.is-active {background-color: var(--point-color-1); color: var(--white-color-1);}

.ss_table1 {width: 100%; border-collapse: collapse; color: var(--black-color-1);}
.ss_table1 th, .ss_table1 td {padding: 10px; text-align: left; border: 1px solid #afafaf;}
.ss_table1 th {background-color: #dedede;}
.ss_table1 td:first-child {background-color: #f7f7f7;}

@media (max-width: 768px) {
  .side_info_wp {padding: 50px 20px 30px; border-radius: 30px 0 0 30px; max-height: 85vh;}
}
@media (max-width: 700px) {
  .sd_bt {padding: 10px 20px;}
}

.ss_r1_step01 {width: 100%; height: 100vh; max-height: 1080px; position: relative;}
.ss_r1_bg-layers {position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 574px 0; z-index: 0;}
.ss_r1_bg-layer {position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;}
.ss_r1_bg-layer.is-active {opacity: 1;}
.ss_r1_nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border-radius: 50%; transition: background 0.3s ease;}
.ss_r1_nav:hover {background: rgba(0,0,0,0.5);}
.ss_r1_nav img {width: 20px; height: 20px;}
.ss_r1_prev {left: 30px;}
.ss_r1_next {right: 30px;}
.ss_r1_step01 .ss_r1_txt {position: absolute; right: 0; bottom: 30px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 174px 0 0 174px; padding: 88px 50px 88px 100px;}
.ss_r1_step01 .ss_r1_txt img {height: 50px;}
.ss_r1_step01 .ss_r1_txt p {font-size: 28px; font-weight: 400; line-height: 140%; text-align: right;}

/* ss_r1_txt 등장 애니메이션 */
@keyframes ss_r1_txt_enter {
    from {opacity: 0; transform: translateX(60px);}
    to   {opacity: 1; transform: translateX(0);}
}
.ss_r1_step01 .ss_r1_txt {opacity: 0;}
.ss_r1_step01 .ss_r1_txt.txt-enter {animation: ss_r1_txt_enter 1s ease forwards;}

.ss_r1_bg01 {background: url(/layout/kr/images/ss_r1_img01.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg02 {background: url(/layout/kr/images/ss_r1_img02.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg03 {background: url(/layout/kr/images/ss_r1_img03.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg04 {background: url(/layout/kr/images/ss_r1_img04.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg05 {background: url(/layout/kr/images/ss_r1_img05.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg06 {background: url(/layout/kr/images/ss_r1_img06.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg07 {background: url(/layout/kr/images/ss_r1_img07.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg08 {background: url(/layout/kr/images/ss_r1_img08.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg09 {background: url(/layout/kr/images/ss_r1_img09.jpg) no-repeat center center; background-size: cover;}
.ss_r1_bg10 {background: url(/layout/kr/images/ss_r1_img10.jpg) no-repeat center center; background-size: cover;}

.ss_r2_bg01 {background: url(/layout/kr/images/ss_r2_img01.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg02 {background: url(/layout/kr/images/ss_r2_img02.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg03 {background: url(/layout/kr/images/ss_r2_img03.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg04 {background: url(/layout/kr/images/ss_r2_img04.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg05 {background: url(/layout/kr/images/ss_r2_img05.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg06 {background: url(/layout/kr/images/ss_r2_img06.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg07 {background: url(/layout/kr/images/ss_r2_img07.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg08 {background: url(/layout/kr/images/ss_r2_img08.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg09 {background: url(/layout/kr/images/ss_r2_img09.jpg) no-repeat center center; background-size: cover;}
.ss_r2_bg10 {background: url(/layout/kr/images/ss_r2_img10.jpg) no-repeat center center; background-size: cover;}

.ss_r1_step02 {width: 100%; display: flex; justify-content: space-between; gap: 20px;}
.ss_r1_step02 .ss_r1_spbx1 {width: 100%; max-width: 1080px; height: 720px; background: url(/layout/kr/images/ss_r1_bg01.jpg) no-repeat center center; background-size: cover; border-radius: 0;}
.ss_r1_step02 .ss_r2_spbx1 {width: 100%; max-width: 1080px; height: 720px; background: url(/layout/kr/images/ss_r2_bg01.jpg) no-repeat center center; background-size: cover; border-radius: 0;}
@keyframes spbx1-radius {from {border-radius: 0;} to {border-radius: 0 0 540px 0;}}
.ss_r1_step02 .ss_r1_spbx1.radius-enter, .ss_r1_step02 .ss_r2_spbx1.radius-enter {animation: spbx1-radius 2s ease forwards;}
.ss_r1_step02 .ss_r1_spbx2 {width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px;}

.ss_r1_step03 {width: 100%; display: flex; justify-content: center; align-items: center; padding: 100px 40px;}
.ss_r1_step03 .ss_r1_spbx {width: 100%; max-width: 1080px; height: 100vh; max-height: 720px; border-radius: 80px; overflow: hidden; position: relative;}
.ss_r1_step03 .ss_r1_sp_slide {position: absolute; inset: 0; will-change: transform;}
.ss_r1_step03 .ss_r1_sp_slide img {width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none;}
.ss_r1_step03 .ss_r1_spbx {cursor: grab;}
.ss_r1_step03 .ss_r1_spbx:active {cursor: grabbing;}
.ss_r1_step03 .ss_r1_sp_prev,
.ss_r1_step03 .ss_r1_sp_next {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 50px; height: 50px; background: rgba(255,255,255,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s;}
.ss_r1_step03 .ss_r1_sp_prev:hover, .ss_r1_step03 .ss_r1_sp_next:hover {background: rgba(255,255,255,0.9);}
.ss_r1_step03 .ss_r1_sp_prev img, .ss_r1_step03 .ss_r1_sp_next img {width: 20px; height: 20px; filter: brightness(0);}
.ss_r1_step03 .ss_r1_sp_prev {left: 20px;}
.ss_r1_step03 .ss_r1_sp_next {right: 20px;}
.ss_r1_step03 .ss_r1_spbx .ss_r1_sptxt {position: absolute; left: 60px; bottom: 60px; z-index: 5; border-radius: 30px; padding: 10px 30px; background: var(--point-color-1); color: var(--white-color-1); font-size: 18px; font-weight: 400;}
@keyframes sptxt-expand {from {clip-path: inset(0 100% 0 0);} to {clip-path: inset(0 0% 0 0);}}
.ss_r1_step03 .ss_r1_sptxt.sptxt-reveal {animation: sptxt-expand 0.5s ease forwards;}

.ss_r1_step04 {width: 100%; height: 850px; background: url(/layout/kr/images/ss_r1_bg02.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; padding-left: 200px;}
.ss_r2_step04 {width: 100%; height: 850px; background: url(/layout/kr/images/ss_r2_bg02.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; padding-left: 200px;}

.ss_r1_step05 {width: 100%; max-width: 1360px; margin: 0 auto; padding: 50px 40px 200px 40px;}
.ss_r1_step05 .ss_r1_spbx05 {display: flex; justify-content: center; align-items: center; gap: 80px; flex-wrap: wrap; margin-top: 60px;}
.ss_r1_step05 .ss_r1_spbx05 .ss_r1_spbx05in {width: 100%; max-width: 600px; height: 400px; position: relative; border-radius: 50px; overflow: hidden; opacity: 0;}
@keyframes spbx05-rise {from {opacity: 0; transform: translateY(40px);} to {opacity: 1; transform: translateY(0);}}
.ss_r1_step05 .ss_r1_spbx05 .ss_r1_spbx05in.rise-enter {animation: spbx05-rise 0.6s ease forwards;}
.ss_r1_step05 .ss_r1_spbx05 .ss_r1_spbx05in img {width: 100%;}
.ss_r1_step05 .ss_r1_spbx05 .ss_r1_spbx05in .ss_r1_sb5txt {position: absolute; left: 30px; bottom: 30px; z-index: 5; padding: 10px 30px; border-radius: 30px; background: var(--point-color-1); color: var(--white-color-1); font-size: 18px; font-weight: 400;}

.ss_r1_sp_fac01 {background: url(/layout/kr/images/ss_r1_fac01.jpg) no-repeat center center; background-size: cover;}
.ss_r1_sp_fac02 {background: url(/layout/kr/images/ss_r1_fac02.jpg) no-repeat center center; background-size: cover;}
.ss_r1_sp_fac03 {background: url(/layout/kr/images/ss_r1_fac03.jpg) no-repeat center center; background-size: cover;}
.ss_r1_sp_fac04 {background: url(/layout/kr/images/ss_r1_fac04.jpg) no-repeat center center; background-size: cover;}

.ss_r2_sp_fac01 {background: url(/layout/kr/images/ss_r2_fac01.jpg) no-repeat center center; background-size: cover;}
.ss_r2_sp_fac02 {background: url(/layout/kr/images/ss_r2_fac02.jpg) no-repeat center center; background-size: cover;}
.ss_r2_sp_fac03 {background: url(/layout/kr/images/ss_r2_fac03.jpg) no-repeat center center; background-size: cover;}
.ss_r2_sp_fac04 {background: url(/layout/kr/images/ss_r2_fac04.jpg) no-repeat center center; background-size: cover;}

@media (max-width:1080px) {
  .ss_r1_step02 {flex-direction: column-reverse;}
  .ss_r1_step04 {padding-left: 10%;}
}
@media (max-width:600px) {
  .ss_r1_step03 .ss_r1_spbx {max-height: 400px; border-radius: 40px;}
  .ss_r1_step03 .ss_r1_spbx .ss_r1_sptxt {left: 30px; bottom: 30px;}
  .ss_r1_step04 {padding-left: 0;}
  .ss_r1_step05 .ss_r1_spbx05 {gap: 30px;}
}

/* 공통 라이트박스 */
.site-lb {position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;}
.site-lb-overlay {position: absolute; inset: 0; background: #000; opacity: 0.5;}
.site-lb-body {position: relative; z-index: 1; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;}
.site-lb-slides {position: relative; width: 90vw; height: 85vh; cursor: grab;}
.site-lb-slides:active {cursor: grabbing;}
.site-lb-slide {position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.site-lb-slide.is-active {opacity: 1; pointer-events: auto;}
.site-lb-slide img {max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none;}
.site-lb-close {position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: rgba(255,255,255,0.1); font-size: 22px; line-height: 1; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s;}
.site-lb-close img {width: 25px;}
.site-lb-close:hover {background: #000000;}
.site-lb-prev, .site-lb-next {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s;}
.site-lb-prev:hover, .site-lb-next:hover {background: rgba(0,0,0,0.5);}
.site-lb-prev img, .site-lb-next img {width: 20px; height: 20px;}
.site-lb-prev {left: 20px;}
.site-lb-next {right: 20px;}