/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

:root {
  --black_3 : #333333;
  --black_1f : #1F1F1F;
  --gray_6 : #666666;
  --gray_ef : #EFEFEF;
  --gray_9 : #999999;
  --gray_d9 : #D9D9D9;
  --gray_ba : #BABABA;
  --gray_6e : #6E6E6E;
  --gray_d9 : #D9D9D9;
  --gray_d5 : #D5D5D5;
  --gray_83 : #838383;
  --wt : #FFFFFF;
  --wt_f2 : #F2F2F2;
  --wt_f5 : #F5F5F5;
}

html {scroll-behavior: smooth;}

.gm {font-family: 'GMarketSans' !important;}

/* bg */
.black_3 {background : #333333 !important;}
.black_1f {background : #1F1F1F !important;}
.gray_6 {background : #666666 !important;}
.gray_ef {background : #EFEFEF !important;}
.gray_9 {background : #999999 !important;}
.gray_d9 {background : #D9D9D9 !important;}
.gray_ba {background : #BABABA !important;}
.gray_6e {background : #6E6E6E !important;}
.gray_d9 {background : #D9D9D9 !important;}
.gray_d5 {background : #D5D5D5 !important;}
.gray_83 {background : #838383 !important;}
.wt {background : #FFFFFF !important;}
.wt_f2 {background : #F2F2F2 !important;}
.wt_f5 {background : #F5F5F5 !important;}
.tr {background : transparent !important;}

/* color */
.black_3_c {color : #333333 !important;}
.black_1f_c {color : #1F1F1F !important;}
.gray_6_c {color : #666666 !important;}
.gray_ef_c {color : #EFEFEF !important;}
.gray_9_c {color : #999999 !important;}
.gray_d9_c {color : #D9D9D9 !important;}
.gray_ba_c {color : #BABABA !important;}
.gray_6e_c {color : #6E6E6E !important;}
.gray_d9_c {color : #D9D9D9 !important;}
.gray_d5_c {color : #D5D5D5 !important;}
.gray_83_c {color : #838383 !important;}
.wt_c {color : #FFFFFF !important;}
.wt_f2_c {color : #F2F2F2 !important;}
.wt_f5_c {color : #F5F5F5 !important;}

section {padding: 140px 0;}
.sec2 {padding-bottom: 0 !important;}

/* tit-box3 */
.tit-box3 {margin-bottom: 80px; text-align: center;}
.tit-box3 .tit {font-size: 42px; font-weight: bold; line-height: 1.4; letter-spacing: -1.26px; color: var(--black_3);}

/* tit-box4 */
.tit-box4 {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 80px;}
.tit-box4 .tit {font-size: 42px; font-weight: bold; line-height: 1.4; letter-spacing: -1.26px; color: var(--black_3);}
.tit-box4 .sub {font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: -0.48px; color: var(--black_3);}

/* style */
header.header3 .headerbtns {gap: 6px;}
header .headerbtns .h_btn.wt {border: 1px solid var(--black_3); box-sizing: border-box;}

header nav ul {gap: 60px;}

.sec1_ct {display: flex; justify-content: space-between; gap: 80px;}
.sec1_ct .item {width: calc(100% / 2);}
.sec1_ct .item .item_tit {display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; border-radius: 12px; background: var(--black_3); font-size: 26px; font-weight: bold; line-height: 1.5; letter-spacing: -0.52px; color: var(--wt);}
.sec1_ct .item ul {width: 100%; height: auto;}
.sec1_ct .item ul li {width: 100%; height: auto;}
.sec1_ct .item ul li .child-box {display: flex; gap: 20px; padding: 30px 0; box-sizing: border-box; border-bottom: 1px solid var(--gray_d9);}
.sec1_ct .item ul li .child-box .num {font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: -0.48px; color: var(--gray_9);}
.sec1_ct .item ul li .child-box .txt {}
.sec1_ct .item ul li .child-box .tit {margin-bottom: 10px; font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: -0.48px; color: var(--black_3);}
.sec1_ct .item ul li .child-box .sub {font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.36px; color: var(--gray_6);}

/* line */
.line {width: 1px; height: 119px; margin: 80px auto 40px;}

/* last_txt_box */
.last_txt_box {text-align: center;}
.last_txt_box .arrow_b {width: 760px; height: 180px; flex-grow: 0; object-fit: contain; margin: 100px auto 60px; background-image: linear-gradient(to top, rgba(204, 204, 204, 0.95), var(--wt)); clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}
.last_txt_box .txt-box {margin-bottom: 40px;}
.last_txt_box .txt-box .tit {margin-bottom: 20px; font-size: 42px; font-weight: bold; line-height: 1.4; letter-spacing: -1.26px; color: var(--gray_ba);}
.last_txt_box .txt-box .tit span {color: var(--black_3);}
.last_txt_box .txt-box .sub {margin-bottom: 20px; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.48px; color: var(--black_3);}
.last_txt_box .txt-box .txt {font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.32px; color: var(--gray_6e);}

.last_txt_box .btns {display: flex; align-items: center; justify-content: center; gap: 10px;}
.last_txt_box .btns a {animation: heartbeat 1.5s ease-in-out infinite both; display: flex; align-items: center; justify-content: center; width: 160px; height: 56px; border-radius: 8px; border: 1px solid var(--black_3); font-size: 18px; font-weight: 500; line-height: 1; color: var(--black_3);}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/* banner_box */
.banner_box {width: 100%; height: auto; text-align: center; background: url(./../img2/banner_bg.webp)no-repeat 50% 50%; background-size: cover; padding: 104px 0; border-radius: 40px; overflow: hidden;}
.banner_box .txt {font-size: 50px; font-weight: 800; line-height: 1.1; letter-spacing: 1.5px; color: var(--gray_ba);}
.banner_box .txt b {font-size: 50px; color: var(--wt); letter-spacing: -2.04px; line-height: 1.1;}
.banner_box .txt b span {font-size: 68px;}
.banner_box .sub {margin: 20px 0 40px; font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: -0.48px; color: var(--wt);}
.banner_box .btns {display: flex; align-items: center; justify-content: center; gap: 10px;}
.banner_box .btns a {animation: heartbeat 1.5s ease-in-out infinite both; display: flex; align-items: center; justify-content: center; width: 160px; height: 56px; border-radius: 8px; border: 1px solid var(--wt); font-size: 18px; font-weight: 500; line-height: 1;}

/* sec3 */
.sec3 {padding-bottom: 140px;}

/* sec3_ct */
.sec3_ct {width: 100%; height: auto;}
.sec3_ct ul {display: flex; justify-content: space-between; gap: 80px;}
.sec3_ct ul li {width: calc(100% / 2);}
.sec3_ct ul li .child-box {position: relative; width: 100%; height: auto;}
.sec3_ct ul li .child-box:before {position: absolute; top: 50%; right: -60px; transform: translateY(-50%); content: ''; display: block; width: 40px; height: auto; aspect-ratio: 1/1; background: url(./../img2/arrow_icon.png)no-repeat 50% 50%; background-size: cover;}
.sec3_ct ul li:last-of-type .child-box:before {display: none;}
.sec3_ct ul li .child-box .img-box {margin-bottom: 10px; width: 100%; height: auto;}
.sec3_ct ul li .child-box .img-box img {width: 100%; height: auto; border-radius: 12px;}

.sec3_ct ul li .child-box .txt-list {display: flex; flex-flow: column; gap: 10px; margin-bottom: 31px;}
.sec3_ct ul li .child-box .txt-list p {display: flex; align-items: center; justify-content: center; width: 100%; height: 76px; border-radius: 12px; border: 1px solid var(--gray_d9); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.54px; color: var(--gray_6);}
.sec3_ct ul li:last-child .child-box .txt-list p {font-size: 20px; font-weight: 600;}
.sec3_ct ul li .child-box .txt-list p:first-of-type {font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.72px; color: var(--black_3);}
.sec3_ct ul li .child-box .txt {text-align: center; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.72px; color: var(--gray_6);}

/* rolling-area */
.rolling-area {display: flex; flex-flow: column; gap: 10px; max-width: 500px; width: 100%; height: auto; overflow: hidden;}
.rolling-area ul {display: flex; align-items: center; gap: 10px;}
.rolling-area ul:first-of-type {animation: roll1 10s linear infinite;}
.rolling-area ul:last-of-type {animation: roll2 10s linear infinite;}
/* 롤링 애니메이션 정의 */
@keyframes roll1 {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-100%);
 }
}
@keyframes roll2 {
 0% {
  transform: translateX(-100%);
 }
 100% {
  transform: translateX(0);
 }
}
.rolling-area ul li {}
.rolling-area ul li p {display: flex; align-items: center; justify-content: center; width: 160px; height: 50px; border-radius: 8px; background: var(--gray_ef); font-size: 18px; font-weight: bold; line-height: 1.5; letter-spacing: -0.36px; color: var(--gray_6);}


/* sec4 */
.sec4 {background-image: linear-gradient(to bottom, var(--wt), #f5f5f5 200%);}
/* sec4_ct */
.sec4_ct {width: 100%; height: auto; margin-bottom: 140px;}
.sec4_ct .ct_tit {margin-bottom: 20px; font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -0.48px; color: var(--gray_6);}
.sec4_ct .ct_tit span {font-weight: 800; color: var(--black_3);}

.sec4_ct ul {display: flex; align-items: center; flex-wrap: wrap; gap: 30px 0; margin: 0 -15px;}
.sec4_ct ul li {width: calc(100% / 3); padding: 0 15px; box-sizing: border-box;}
.sec4_ct ul li .child-box {width: 100%; height: auto; padding: 50px 26px; box-sizing: border-box; border: 1px solid var(--gray_d9); border-radius: 30px; background: var(--gray_ef); text-align: center;}
.sec4_ct ul li .child-box .tit {margin-bottom: 0 !important; font-size: 24px; font-weight: bold; line-height: 1.4; letter-spacing: -0.72px; color: var(--black_3);}
.sec4_ct ul li .child-box .tit span {color: var(--gray_ba);}

.sec4_ct ul li .child-box .txt {padding: 15px 0; text-align: left; font-size: 18px; font-weight: bold; line-height: 1.5; letter-spacing: -0.54px; color: var(--gray_9);}
.sec4_ct ul li .child-box .txt span {}

.sec4_ct ul li .child-box .sub {font-size: 20px; font-weight: bold; line-height: 1.4; letter-spacing: -0.6px; color: var(--gray_6); text-align: left;}

/* sec5_ct */
.sec5_ct {display: flex; justify-content: space-between; gap: 80px;}
.sec5_ct .item {width: calc(100% / 2);}
.sec5_ct .item .item_tit {display: flex; align-items: center; justify-content: center; width: 100%; height: 68px; margin-bottom: 40px; border-radius: 60px; background: var(--black_3); font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: -0.48px; color: var(--wt);}

.sec5_ct .item ul {width: 100%; height: auto;}
.sec5_ct .item ul li {width: 100%; height: auto;}
.sec5_ct .item ul li .child-box {width: 100%; height: auto;}
.sec5_ct .item ul li .child-box .img-box {width: 100%; height: auto;}
.sec5_ct .item ul li .child-box .img-box img {width: 100%; height: auto;}

.sec5_ct .item ul li .child-box .txt-box {display: flex; gap: 20px; margin-top: 40px;}
.sec5_ct .item ul li .child-box .txt-box .step {font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: -0.48px; color: var(--gray_9);}
.sec5_ct .item ul li .child-box .txt-box .t_box {display: flex; flex-flow: column; gap: 10px;}
.sec5_ct .item ul li .child-box .txt-box .t_box .tit {font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: -0.48px; color: var(--black_3);}
.sec5_ct .item ul li .child-box .txt-box .t_box .sub {font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -0.36px; color: var(--gray_6);}
.sec5_ct .item ul li .child-box .arrow {width: 40px; margin: 30px auto;}

/* sec6_ct */
.sec6 {padding-top: 0 !important; padding-bottom: 140px;}
.sec6_ct {width: 100%; height: auto; text-align: center;}
.sec6_ct .logo {width: 114px; height: auto; margin: 0 auto 15px;}
.sec6_ct .logo img {width: 100%; height: auto;}

.sec6_ct .txt-box {margin-bottom: 40px;}
.sec6_ct .txt-box .txt {margin-bottom: 20px; font-size: 42px; font-weight: bold; line-height: 1.4; letter-spacing: -1.26px; color: var(--gray_ba);}
.sec6_ct .txt-box .txt span {}

.sec6_ct .txt-box .sub {font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.48px; color: var(--black_3);}

.sec6_ct .btns {margin-bottom: 12px;}
.sec6_ct .btns a {animation: heartbeat 1.5s ease-in-out infinite both; display: flex; align-items: center; justify-content: center; width: 180px; height: 56px; margin: 0 auto; border-radius: 8px; background: var(--black_3); font-size: 18px; font-weight: 500; line-height: 1; color: var(--wt);}

.sec6_ct .description {font-size: 18px; font-weight: 500; line-height: 1; color: var(--gray_9);}


/* footer */
.footer {width: 100%; height: auto; padding: 80px 0; background: var(--black_1f);}
.footer .f-logo {width: 114px; height: auto; margin: 0 auto;}
.footer .f-logo img {width: 100%; height: auto;}

.footer .address {margin: 20px 0; text-align: center;}
.footer .address .txt {font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -0.56px; color: var(--gray_d5);}
.footer .address .txt span {color: rgba(153, 153, 153, 0.5);}

.footer .f_btn {text-align: center;}
.footer .f_btn a {display: flex; align-items: center; justify-content: center; width: 90px; height: 46px; margin: 0 auto; border-radius: 8px; background: var(--black_3); font-size: 14px; font-weight: 500; line-height: 1; color: var(--wt);}

.footer .copyright {margin-top: 40px; text-align: center; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -0.56px; color: var(--gray_83);}