/* 2025 main.css */
@import url(../css/font.css);
/* cursor */
.custom-cursor {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: white;
  transition: transform 350ms ease;
  transform: translate(-50%, -50%) scale(0.3);
  z-index: 1000;
}

.custom-cursor--link {transform: translate(-50%, -50%) scale(1); background-color: transparent; border: 1px solid #fff;}
.custom-cursor--link::after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 2.625rem; height: 2.625rem; background: url(../images/btn_arr_wh.svg) no-repeat center/contain;}
.custom-cursor--scale{transform: translate(-50%, -50%) scale(1);}
/* 터치 디바이스나 hover 미지원 환경에서 커서 숨김 */
@media (hover: none), (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}

body {height: 100%; width: 100vw; overflow-x: hidden; cursor: none;}
#wrap {padding-top: 0 !important;}
a,
a:active,
a:hover {cursor: none;}
button {cursor: none;}
.gradient_sec {background: radial-gradient(64.95% 141.87% at -36.59% 29.24%, rgba(38, 212, 194, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(43.11% 101.84% at 115.86% 69.82%, rgba(38, 212, 194, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%), linear-gradient(0deg, #071F1C 0%, #071F1C 100%), #FFF;}
.logo_sec {position: relative;}
.logo_sec .sticky_logo {width: 500px; margin: 0 auto; transform: translateY(0rem) translateZ(0);  will-change: transform;}
.circle_tit{display: inline-block; color: #fff; font-size: 4rem; font-weight: 800; line-height: 140%; letter-spacing: -0.08rem; position: relative;}
.circle_tit::after{content: ""; display: block; width: 2.125rem; height: 2.125rem; background: linear-gradient(90deg, #00B19F 0%, #2AD7C5 100%); background-blend-mode: exclusion; border-radius: 50%; position: absolute; right: -1rem; top: 0; transform: translate(50%,-50%); opacity: 0.8;}
.gap {width: 100%; height: 15rem;}
@media screen and (max-width: 1200px){
  .inner{max-width: 1000px;}
  .logo_sec .sticky_logo {width: 400px;}
  .circle_tit{font-size: 3.5rem;}
  .circle_tit::after {width: 1.75rem; height: 1.75rem;}
  .gap {width: 100%; height: 13rem;}
}/* lg */
@media screen and (max-width: 1024px){
  .inner{max-width: 850px;}
  .logo_sec .sticky_logo {width: 300px;}
  .circle_tit{font-size: 3rem;}
  .circle_tit::after {width: 1.25rem; height: 1.25rem;}
  .gap {width: 100%; height: 11rem;}
}/* md */
@media screen and (max-width: 767px){
  .logo_sec .sticky_logo {width: 150px;}
  .circle_tit{font-size: 2rem;}
  .circle_tit::after {width: 1rem; height: 1rem;}
  .gap {width: 100%; height: 9rem;}
}/* sm */


/* 1단락--------------------------------------------------------------------------- */
.sec_01 {width: 100%; height: 100dvh; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative;}
.sec_01::before{width: 100%; height: 100vh; content: ""; display: block; background-color: #000; position: absolute; left: 0; top: 0; z-index: -2;}
.sec_01 .bg-video {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1;}
.sec_01 .bg-video__content {height: 100%; width: 100%; object-fit: cover;}

.sec_01 [class^="text_"] {position: relative; display: flex; font-weight: 900; color: #fff; text-align: center; overflow: hidden; font-size: 9.875rem; line-height: 130%;}
.sec_01 [class^="text_"] span {display: block;}
.sec_01 .text_01 {font-size : 18.75rem;}
.sec_01 span.motion{display: inline-block; width: 117px; height: 160px;}
.sec_01 .pc_text{display: flex; align-items: center; flex-direction: column;}
.sec_01 .text_04 {margin-top: 1.875rem; font-size: 1.75rem; line-height: 160%; font-weight: 500;}
.sec_01 .text_04 span {display: inline;}
.sec_01 .word2{margin-top: 0;}
.sec_01 .hide_word {position: absolute; top: 0; left: 0; opacity: 0.3; z-index: 1;}
.sec_01 .show_word {position: relative; z-index: 2;}
.sec_01 .pc_text{margin-top: 1.25rem;}

.sec_01 .letter {opacity: 0; transition: opacity 0.3s ease;}
.sec_01 .letter.on {opacity: 1;}

.sec_01 .show_cont {width: 0; height: 0; opacity: 0;}
.sec_01 .hide_cont.on {transform: translateX(-100%); transition: all 1s linear;}

/* scroll */
.sec_01 .scroll-downs{position: absolute; left: 50%; transform: translateX(-50%); bottom: 8vh; display: flex; justify-content: center;}
.sec_01 .mousey {width: 36px; height: 60px; border: 2px solid #f0f0f0; border-radius: 25px; box-sizing: content-box; position: relative;}
.sec_01 .scroller {position: absolute; left: 50%; transform: translateX(-50%); top: 10px; width: 10px; height: 10px; border-radius: 50%; background-color: #f0f0f0; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
.sec_01 .scroll{color: #fff; font-size: 0.875rem; font-weight: 500; line-height: 140%; letter-spacing: -0.015rem; position: absolute; bottom: -25px;}

@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translate(-50%,0); opacity: 1;}
  100% { transform: translate(-50%,30px); opacity: 0;}
}
@media screen and (max-width: 1450px){
  .sec_01 [class^="text_"]{font-size: 6.875rem;}
  .sec_01 .text_01{font-size: 12.667rem;}
  .sec_01 span.motion{width: 95px;}
  .sec_01 .text_04{font-size: 1.333rem; margin-top: 0; line-height: 150%;}
  .sec_01 .mousey {width: 30px; height: 50px;}
}
@media screen and (max-width: 989px){
  .sec_01 [class^="text_"]{font-size: 5.333rem; line-height: 170%;}
  .sec_01 .text_01{font-size: 10.667rem;}
  .sec_01 span.motion{width: 60px; height: 66px;}
  .sec_01 .text_04{font-size: 1.333rem; margin-top: 0;}
}



/* 2단락--------------------------------------------------------------------------- */
/* 공통 */
.sec_02 {position: relative; height: 100vh;}
.sec_02 .bg-video {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1;}
.sec_02 .bg-video__content {height: 100%; width: 100%; object-fit: cover;}
.sec_02 .panel {position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #111;}
.sec_02 .panel:not(.first) {opacity: 0; visibility: hidden;}
.sec_02 .panel >div {display: flex; justify-content: center; align-items: center; gap: 6.5rem; width: 100%; height: 100%;}
.sec_02 .panel.first h2{line-height: unset;}
.sec_02 .panel h2{ text-align: right; font-size: 9.8125rem; font-weight: 900; line-height: 100%;}
.sec_02 .des{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem;}
.sec_02 .des .bold{font-size: 2.5rem; font-weight: 700; line-height: 140%; letter-spacing: -0.05rem;}
.sec_02 .des p{font-size: 1.75rem; font-weight: 500; line-height: 160%; letter-spacing: -0.035rem;}
.sec_02 .des p strong{font-weight: 700;}
.sec_02 .des .mo{display: none;}

/* typing cursor */
.sec_02 .typing strong::after {content: ''; margin-left: .4rem; animation: cursor .9s infinite steps(2);}
.sec_02 .typing strong.finished::after {content: none;}
@keyframes cursor {
  from { border-right: 3px solid #222; opacity: 0;}
  to { border-right: 3px solid #222; opacity: 1;}
}
/* text 등장 */
.sec_02 .des p{opacity: 0;}
.sec_02 .des.ani p{animation: slideUp .3s forwards ease-in-out;}
@keyframes slideUp {
  0%{transform: translateY(100px); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}
}
/* Try */
.sec_02 .panel.last h2 {line-height: 130%;}

@media screen and (max-width: 1200px){
  .sec_02 .panel h2{font-size: 8.8125rem;}
  .sec_02 .des .bold{font-size: 2rem;}
  .sec_02 .des p{font-size: 1.5rem;}
}
@media screen and (max-width: 989px){
  .sec_02 .panel >div{flex-direction: column; gap: 1.5rem;}
  .sec_02 .panel h2{font-size: 5.333rem; text-align: center;}
  .sec_02 .des{text-align: center; align-items: center; gap: 2rem;}
  .sec_02 .des .bold{font-size: 1.333rem;}
  .sec_02 .des .bold .pc{display: none;}
  .sec_02 .des p{font-size: unset;}
  .sec_02 .typing,
  .sec_02 .typing strong,
  .sec_02 .typing span{font-size: 1rem;}
  .sec_02 .typing .margin{margin-top: 0.667rem;}
  .sec_02 p.margin{margin-top: -17px;}
  .sec_02 .des .mo{display: block;}
}


/* sec.since--------------------------------------------------------------------------- */
.sec_since{position: relative;}
.sec_since h3{display: inline-block; margin-top: 10rem;}
/*flip*/
.sec_since .flip_list_wrapper{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 10rem;}
.sec_since .flip_cards{width: 100%; display: flex; justify-content: space-between; align-items: center;}
.sec_since .flip_card{width: 31%; color: #fff; display: flex; align-items: flex-start; flex-direction: column; gap: 9.5rem; padding: 3rem; flex-shrink: 0; border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.10); background: rgba(110, 110, 110, 0.10); box-shadow: 30px 30px 80px 0 rgba(0, 0, 0, 0.20); backdrop-filter: blur(15px); transform: scaleY(0);}
.sec_since .since{position: relative;}
.sec_since .since>p{font-size: 7.5rem; font-weight: 500; line-height: 100%; letter-spacing: -0.3rem;}
.sec_since p.remark{font-size: 1.5rem; font-weight: 500; line-height: 100%; letter-spacing: -0.03rem; display: flex; padding: 0.75rem 1.125rem; justify-content: center; align-items: center; gap: 8px; border-radius: 300px; background: rgba(17, 17, 17, 0.60); position: absolute; top: 0; right: -65px;}
.sec_since .about{color: #d2d2d2; font-size: 1.5rem; font-weight: 400; line-height: 160%; letter-spacing: -0.03rem;}
.sec_since .about .mo{display: none;}
.sec_since .flip_card.active{animation: scaleAni .35s forwards;}
.sec_since .flip_card.flip_01.active{animation-delay: 0.35s;}
.sec_since .flip_card.flip_02.active{animation-delay: 0.7s;}
.sec_since .flip_card.flip_03.active{animation-delay: 1.05s;}
@keyframes scaleAni {
  0%{transform: scaleY(0);}
  70%{transform: scaleY(1);}
  100%{transform: scaleY(1);}
}

@media screen and (max-width: 1450px) {
  .sec_since .flip_list_wrapper{margin-top: 6rem;}
  .sec_since .flip_card{gap: 6.5rem; padding: 2.5rem;}
  .sec_since .since>p{font-size: 6.5rem;}
  .sec_since p.remark{font-size: 1.2rem;}
  .sec_since .about .pc{display: none;}
  .sec_since .about{height: 160px;}
}
@media screen and (max-width: 1200px){
  .sec_since .flip_card{gap: 5.5rem;}
  .sec_since .since>p{font-size: 4.5rem;}
  .sec_since p.remark{font-size: 1rem; top: -15px; right: -16px;}
  .sec_since .about{font-size: 1.3rem;}
}/* lg */
@media screen and (max-width: 1024px){
  .sec_since .flip_card{gap: 4.5rem;}
  .sec_since .since,
  .sec_since p.remark{position: unset;}
  .sec_since p.remark{width: fit-content;}
  .sec_since .about{font-size: 1rem; height: 95px;}
}/* md */
@media screen and (max-width: 767px){
  .sec_since .flip_list_wrapper{margin-top: 2rem;}
  .sec_since .flip_cards{flex-direction: column; gap: 1.333rem;}
  .sec_since .flip_card{width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 3rem; padding: 2rem;}
  .sec_since .since{display: flex; flex-direction: column; gap: 0.5rem;}
  .sec_since .since>p{font-size: 2.667rem;}
  .sec_since p.remark{font-size: 0.833rem; padding: 0.5rem 1rem;}
  .sec_since .about{font-size: 1rem; height: unset;}
  .sec_since .about .pc{display: block;}
  .sec_since .about_mo .pc{display: none;}
  .sec_since .about_mo .mo{display: block;}
}/* sm */



/* 3단락--------------------------------------------------------------------------- */
.sec_03 {padding: 10rem 0;}
.sec_03 h3{margin-bottom: 7.75rem; display: inline-block;}
/*card*/
.sec_03 .cards li {will-change: transform, opacity;}
.sec_03 .card_wrapper {overflow: hidden; position: sticky; top: 180px; display: flex; width: 100%;  color: #fff; padding: 4rem 4rem 4.125rem 5rem; align-self: stretch; border-radius: 40px; border: 2px solid rgba(255, 255, 255, 0.10); background: radial-gradient(68.93% 55.98% at 50% 122.61%, rgba(38, 212, 194, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%), #242424; box-shadow: 30px 30px 80px 0 rgba(0, 0, 0, 0.20); backdrop-filter: blur(15px);}
.sec_03 .content{width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 13.563rem;}
.sec_03 .content>div{height: 100%; display: flex; flex-direction: column; gap: 4rem; align-items: flex-start; justify-content: flex-start;}
.sec_03 .content figure{width: 330px; height: 330px; overflow: hidden; border-radius: 24px;}
.sec_03 .page .now{font-size: 3.75rem; font-weight: 100; line-height: 160%; letter-spacing: -0.075rem;}
.sec_03 .page .total{color: #666; font-size: 1.5rem; font-weight: 100; line-height: 160%; letter-spacing: -0.03rem;}
.sec_03 .card_txt_wrap{display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; align-self: stretch;}
.sec_03 .card_tit{font-size: 3rem; font-weight: 500; line-height: 120%; letter-spacing: -0.06rem;}
.sec_03 .card_desc{color: #d2d2d2; font-size: 1.5rem; font-weight: 400; line-height: 160%; letter-spacing: -0.03rem;}
.sec_03 .mo{display: none;}

.sec_03 .card_wrapper .trame {position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;  opacity: 0; background-color: #000;}
.sec_03 .card_wrapper.card2 {transform: translateY(2rem);}
.sec_03 .card_wrapper.card3 {transform: translateY(4rem);}
.sec_03 .card_wrapper.card4 {transform: translateY(6rem);}
.sec_03 .card_wrapper.card5 {transform: translateY(8rem);}
.sec_03 .card_wrapper.card6 {transform: translateY(10rem);}
.sec_03 .card_wrapper.card7 {transform: translateY(12rem);}
.sec_03 .card_wrapper.card8 {transform: translateY(14rem);}
@media (max-width: 1200px) {
  .sec_03 .content{gap: 7.563rem;}
  .sec_03 .card_tit{font-size: 2.5rem;}
  .sec_03 .card_wrapper.card4 .content{gap: 2.563rem;}
  .sec_03 .content figure{width: 280px; height: 280px;}
  .sec_03 .pc{display: none;}
  .sec_03 .mo{display: block;}
}
@media (max-width: 1024px) {
  .sec_03 .content>div{gap: 3rem;}
  .sec_03 .page .now{font-size: 3rem;}
  .sec_03 .card_tit{font-size: 2rem;}
  .sec_03 .card_desc{font-size: 1.2rem;}
  .sec_03 .content figure{width: 250px; height: 250px; border-radius: 15px;}
}
@media(max-width: 989px) {
  .sec_03 .card_wrapper.card2 {transform:translateY(1rem);}
  .sec_03 .card_wrapper.card3 {transform:translateY(2rem);}
  .sec_03 .card_wrapper.card4 {transform:translateY(3rem);}
  .sec_03 .card_wrapper.card5 {transform:translateY(4rem);}
  .sec_03 .card_wrapper.card6 {transform:translateY(5rem);}
  .sec_03 .card_wrapper.card7 {transform:translateY(6rem);}
  .sec_03 .card_wrapper.card8 {transform:translateY(7rem);}
}
@media (max-width: 767px) {
  .sec_03 .card_wrapper{padding: 2rem 3rem 2.125rem 3rem; border-radius: 16px;}
  .sec_03 .content{gap: 0.667rem;}
  .sec_03 .content>div{gap: 1.333rem;}
  .sec_03 .page .now{font-size: 1.333rem;}
  .sec_03 .page .total{font-size: 1rem;}
  .sec_03 .card_txt_wrap{gap: 0.667rem;}
  .sec_03 .card_tit{font-size: 1.3rem;}
  .sec_03 .card_desc{font-size: 0.9rem;}
  .sec_03 .content figure{width: 85px; height: 85px; border-radius: 8px;}
}


/* 4단락--------------------------------------------------------------------------- */
.sec_04 {position: relative; height: auto; padding: 1.25rem 0 15rem 0;}
.sec_04 .sec_tit{display: inline-flex; justify-content: space-between; align-items: center; gap: 1rem;}
.sec_04 .sec_tit .cw_logo {width: 7rem;}
/*list*/
.sec_04 .swipe-section{max-width: 1800px; margin: 8.5rem auto 0;}
.sec_04 .work-panel {display:flex; align-items: center; justify-content: center; max-width: 100%;
  /* tilt ani */
  -webkit-perspective: 2400px;
  perspective: 2400px;
  position: relative;
  transform: none;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  isolation: isolate;
}
.sec_04 .work-panel:not(:last-child) {margin-bottom: 18.25rem;}
.sec_04 .tit_wrap{position: absolute; top: -3.25rem; border-radius: 1.25rem; background: rgba(110, 110, 110, 0.4); backdrop-filter: blur(1rem); color: #fff; border: 1px solid rgba(255, 255, 255, 0.20); display: flex; z-index: 2; padding: 4.25rem 2.375rem 2.25rem; gap: 2rem; align-items: flex-end; flex-shrink: 0;isolation: isolate;}
.sec_04 .work-panel:nth-child(odd) .tit_wrap {left: 4rem; }
.sec_04 .work-panel:nth-child(even) .tit_wrap {right: 4rem;}
.sec_04 .tit_wrap::after {content: ""; position: absolute; right: 2.375rem; top: 2.25rem; width: 2rem; height: 2rem; background: url(../images/btn_arr_wh.svg) no-repeat center/100% auto;}
.sec_04 .tit {font-size: 3.75rem; font-weight: 400; line-height: 100%;}
.sec_04 .des{display: flex; gap: 1rem; align-items: flex-end;}
.sec_04 .des p {font-size: 2rem; font-weight: 700; line-height: 100%;}
.sec_04 .des span {display: block; font-size: 1.5rem; font-weight: 500; line-height: 100%;}
.sec_04 .cont_wrap {width: 100%; margin: 0 auto; z-index: 1;}
.sec_04 .cont_wrap figure {overflow: hidden; border-radius: 2.5rem; box-shadow: 30px 30px 80px 0 rgba(0,0,0,0.2);}
.sec_04 .cont_wrap figure img{display: block; width: 100%;}
/*flip button*/
.sec_04 .btn_wrap {position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 7.5rem; transition: transform 1000ms cubic-bezier(0.23, 1, 0.32, 1);}
.sec_04  .btn_flip {position: relative; display: inline-flex;   justify-content: center; align-items: center; width: 22.5rem; height: 7.125rem; line-height: 100%; color: #fff; font-size: 2.625rem; border: 1px solid #fff; border-radius: 6.25rem; font-weight: 800;}
.sec_04  .btn_flip .__label {position: relative; display: block; overflow: hidden; line-height: 135%; color: #fff;}
.sec_04  .btn_flip .__label span {display: flex; transition: transform 300ms; align-items: center; /*height: 1.5em;*/}
.sec_04  .btn_flip .__label i {display: block; width: 2.625rem; height: 2.625rem; background: url(../images/btn_arr_wh.svg) no-repeat center/contain;}
.sec_04  .btn_flip .__label .hide {position: absolute; left: 0; top: 100%;}
.sec_04  .btn_flip:hover .__label span {transform: translateY(-100%);}
@media screen and (max-width: 1200px){
  .sec_04 .work-panel:not(:last-child) {margin-bottom: 12rem;}
  .sec_04 .tit_wrap {gap: 1.5rem; padding: 3.75rem 2rem 2rem;}
  .sec_04 .tit_wrap::after {right: 2rem; top: 1.75rem;}
  .sec_04 .tit {font-size: 2.75rem;}
  .sec_04 .des {gap: 0.75rem;}
  .sec_04 .des p {font-size: 1.625rem;}
  .sec_04 .des span {font-size: 1.25rem;}
}/* lg */

@media screen and (max-width: 1024px){
  .sec_04 {position: relative; height: auto; padding-bottom: 10rem;}
  .sec_04 .swipe-section {margin-top: 3.5rem;}
  .sec_04 .work-panel:not(:last-child) {margin-bottom: 10rem;}
  .sec_04 .tit_wrap {top: auto; bottom: -10%; flex-direction: column; justify-content: flex-start; align-items: baseline; gap: 1rem; padding: 2rem 8rem 2rem 2rem;}
  .sec_04 .work-panel:nth-child(odd) .tit_wrap {left: 0;}
  .sec_04 .work-panel:nth-child(even) .tit_wrap {right: 0;}
  .sec_04 .des {align-items: center;;}
  .sec_04 .des p,
  .sec_04 .des span {font-size: 1.25rem;}
  /*flip button*/
  .sec_04  .btn_flip {width: 18rem; height: 5rem; font-size: 1.75rem;}
  .sec_04  .btn_flip .__label i {display: block; width: 2.625rem; height: 2.625rem;}
}/* md */

@media screen and (max-width: 767px){
  .sec_04 {position: relative; height: auto; padding-bottom: 8.5rem;}
  .sec_04 .swipe-section {margin-top: 1.25rem;}
  .sec_04 .work-panel:not(:last-child) {margin-bottom: 6.88rem;}
  .sec_04 .sec_tit{gap: 0.5rem;}
  .sec_04 .sec_tit .cw_logo {width: 3.5rem;}
  .sec_04 .tit_wrap {width: 100%; padding: 1.33rem 5rem 1.33rem 1.33rem; gap: 0.5rem; border-radius: 0.75rem;}
  .sec_04 .tit_wrap::after {right: 1.33rem; top: 1.33rem; width: 1.33rem; height: 1.33rem;}
  .sec_04 .tit {font-size: 1.66rem;}
  .sec_04 .des p,
  .sec_04 .des span {font-size: 1rem;}
  .sec_04 .cont_wrap figure {border-radius: 0.66rem;}
  /*flip button*/
  .sec_04 .btn_wrap {margin-top: 6.88rem;}
  .sec_04  .btn_flip {width: 14rem; height: 4rem; font-size: 1.5rem;}
  .sec_04  .btn_flip .__label i {width: 1.75rem; height: 1.75rem;}
}/* sm */



/* 5단락--------------------------------------------------------------------------- */
.sec_05 {height: auto;}
.sec_05 h3{display: inline-block;}
.sec_05 .flex_wrap {display: flex; justify-content: space-between; gap: 10rem;}
.sec_05 .cmt_list {display: flex; flex-direction: column; align-items: flex-end; flex: 1; margin-top: 14rem; gap: 5rem;}
.sec_05 .cmt_list li {position: relative; width: 100%; max-width: 900px; padding: 3rem 3rem 3.875rem; border-radius: 2.5rem; background-color: rgba(110, 110, 110, 0.4); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.20); box-shadow: 30px 30px 80px 0px rgba(0, 0, 0, 0.20); color: #fff;}
.sec_05 .cmt_list li:nth-child(even) {transform: translateX(-20%);}
.sec_05 .cmt_list .top {display: flex; justify-content: space-between; width: 100%;}
.sec_05 .cmt_list h4 {margin-bottom: 1.5rem; font-size: 2rem; font-weight: 500; line-height: 140%;}
.sec_05 .cmt_list .company {display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem;}
.sec_05 .cmt_list .company span {display: inline-block; padding: 0.5rem 0.625rem; line-height: 100%; font-size: 1rem; border-radius: 0.25rem;}
.sec_05 .cmt_list .company span:nth-child(1) {background-color: #E2E2E2; color: #111; font-weight: 700;}
.sec_05 .cmt_list .company span:nth-child(2) {background-color: #071F1C; color: #fff; font-weight: 500;}
.sec_05 .cmt_list p {font-size: 1.25rem; color: #D2D2D2; line-height: 160%; word-break: keep-all;}
@media screen and (max-width: 1200px){
  .sec_05 .flex_wrap {gap: 8rem;}
  .sec_05 .cmt_list .top {flex-direction: column; margin-bottom: 1rem;}
  .sec_05 .cmt_list h4 {margin-bottom: 1rem; font-size: 1.75rem;}
  .sec_05 .cmt_list .company {flex-direction: row; justify-content: left; align-items: center;}
}/* lg */

@media screen and (max-width: 1024px){
  .sec_05 .flex_wrap {gap: 5rem;}
  .sec_05 .cmt_list {margin-top: 10rem;}
  .sec_05 .cmt_list li {padding: 2.5rem 2.5rem 2.875rem; max-width: 550px;}
  .sec_05 .cmt_list li:nth-child(even) {transform: translateX(-15%);}
  .sec_05 .cmt_list h4 {font-size: 1.5rem;}
  .sec_05 .cmt_list p {font-size: 1.125rem;}
}/* md */

@media screen and (max-width: 767px){
  .sec_05 .flex_wrap {flex-direction: column; gap: 1.875rem;}
  .sec_05 .sec_tit br {display: none;}
  .sec_05 .cmt_list {margin-top: 0; gap: 2rem;}
  .sec_05 .cmt_list li {padding: 2rem 1.33rem; border-radius: 1rem;}
  .sec_05 .cmt_list li:nth-child(even) {transform: translateX(0);}
  .sec_05 .cmt_list h4 {font-size: 1.33rem;}
  .sec_05 .cmt_list .company span {font-size: 0.875rem;}
  .sec_05 .cmt_list p {font-size: 1rem;}
}/* sm */






/* 6단락--------------------------------------------------------------------------- */
.sec_06 {padding-bottom: 10rem;}
.sec_06 .logo_wrap {display: flex; justify-content: center; margin-bottom: 3.25rem}
.sec_06 .logo_wrap figure {width: 500px; opacity: 0;}
.sec_06 .ct_txt{display: flex; justify-content: space-between; align-items: end; color: #fff; gap: 3.375rem;}
.sec_06 .left{font-size: 3rem; font-weight: 700; line-height: 140%; letter-spacing: -0.06rem; word-break: keep-all; flex: 1;}
.sec_06 .right{text-align: right; flex: 1;}
.sec_06 .right p:nth-child(1){font-size: 7.5rem; font-weight: 900; line-height: 100%; letter-spacing: -0.15rem; white-space: nowrap;}
.sec_06 .right p:nth-child(2){display: flex; justify-content: right; align-items: flex-end; gap: 1.75rem; margin-top: 2rem; font-size: 1.75rem; font-weight: 700; line-height: 160%; letter-spacing: -0.035rem;}
.sec_06 .right p:nth-child(2)::after{width: 4rem; height: 4rem; content: ""; display: block; background: url(../images/mo1.png) no-repeat center/100%; animation: rotate 6s linear infinite;}
/*버튼*/
.sec_06 .ct_dwl {display: flex; justify-content: space-between; margin-top: 2.5rem; gap: 3.375rem;}
.sec_06 .ct_dwl a{display: flex; justify-content: space-between; align-items: center; padding: 2.75rem 3rem; border-radius: 2rem;border: 2px solid rgba(255, 255, 255, 0.10); background: radial-gradient(68.93% 55.98% at 50% 122.61%, rgba(38, 212, 194, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%), #242424; backdrop-filter: blur(30px); flex: 1; text-decoration: none; color: inherit; cursor: pointer;}
.sec_06 .txt {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem;}
.sec_06 .txt p:nth-child(1) {color: #dadada; font-size: 2.5rem; font-weight: 700; line-height: 100%; letter-spacing: -0.06rem;}
.sec_06 .txt p:nth-child(2) {color: #959595; font-size: 1.5rem; font-weight: 500; line-height: 100%; letter-spacing: -0.03rem;}
.sec_06 .btn_dwl {width: 9.375rem; height: 7.188rem;}
.sec_06 .btn_dwl i {background: url(../images/dwl.png) no-repeat center/contain; display: block; width: 100%; height: 100%;}
.sec_06 .btn_dwl p {display: none; text-align: center; color: #111; font-size: 1.25rem; line-height: 140%; letter-spacing: -0.025rem; font-weight: 700; margin-top: 1.25rem;}
/* hover */
.sec_06 .ct_dwl a:hover {border: 2px solid rgba(0, 141, 127, 0.10); background: radial-gradient(30.09% 145.28% at 50% 116.94%, #49E8D7 0%, #00C2AE 100%); backdrop-filter: blur(30px);}
.sec_06 .ct_dwl a:hover .txt p {color: #333;}
.sec_06 .ct_dwl a:hover .btn_dwl i {height: 60%; background: url(../images/download_hover.svg) no-repeat center/contain;}
.sec_06 .ct_dwl a:hover .btn_dwl p {display: block;}
@keyframes rotate{
  100% {
    transform: rotate(360deg);
  }
}
.sec_06 .ct_txt,
.sec_06 .ct_dwl {opacity: 0; transform: translateY(-10px);}
.sec_06 .ct_txt.on,
.sec_06 .ct_dwl.on{animation: fadeUp .5s forwards ease-in-out;}
@keyframes fadeUp {
  0%{transform: translateY(50px); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}
}
.sec_06 .bounce span.ani{animation: bounceIn .3s forwards ease-in-out;}
@keyframes bounceIn {
  0%{opacity: 0; transform: translateY(-10px);}
  100%{opacity: 1; transform: translateY(0);}
}

@media screen and (min-width: 1024.1px){
  .sec_06 .left .bmo {display: none;}
}/* md ~ */


@media screen and (max-width: 1500px){
  .sec_06 .left {font-size: 2.5rem}
  .sec_06 .right p:nth-child(1) {font-size: 6.5rem;}
  /*버튼*/
  .sec_06 .ct_dwl a {padding: 2.5rem 2.75rem;}
  .sec_06 .txt p:nth-child(2) {font-size: 1.25rem;}
}/* xlg */

@media screen and (max-width: 1200px){
  .sec_06{padding-bottom: 7rem;}
  .sec_06 .logo_wrap figure {width: 400px;}
  .sec_06 .left {font-size: 2rem}
  .sec_06 .right p:nth-child(1) {font-size: 5.5rem;}
  /*버튼*/
  .sec_06 .ct_dwl {gap: 2rem;}
  .sec_06 .ct_dwl a {padding: 1.75rem 2rem; border-radius: 1.5rem;}
  .sec_06 .btn_dwl {width: 7rem; height: 5rem}
  .sec_06 .btn_dwl p {font-size: 1rem; margin-top: 1rem;}
  .sec_06 .txt {gap: 0.5rem;}
  .sec_06 .txt p:nth-child(1) {font-size: 2rem;}
  .sec_06 .txt p:nth-child(2) {font-size: 1rem;}
}/* lg */

@media screen and (max-width: 1024px){
  .sec_06{padding-bottom: 5rem;}
  .sec_06 .logo_wrap figure {width: 300px;}
  .sec_06 .ct_txt {flex-direction: column; justify-content: center; align-items: center; gap: 2.75rem; text-align: center;}
  .sec_06 .right {text-align: center;}
  .sec_06 .right p:nth-child(2) {flex-direction: column-reverse; align-items: center; margin-top: 1.5rem; gap: 1.5rem;}
  /*버튼*/
  .sec_06 .ct_dwl {gap: 1rem;}
  .sec_06 .ct_dwl a {padding: 1.75rem;}
  .sec_06 .btn_dwl {width: 5.5rem; height: 3rem}
  .sec_06 .btn_dwl p {margin-top: 0.25rem; font-size: 0.875rem;}
  .sec_06 .txt p:nth-child(1) {font-size: 1.5rem;}
  .sec_06 .txt p:nth-child(2) {font-size: 0.875rem;}
}/* md */

@media screen and (max-width: 767px){
  .sec_06 {padding-top: 6rem;}
  .sec_06 .logo_wrap figure {width: 150px;}
  .sec_06 .left {font-size: 1.33rem; line-height: 160%;}
  .sec_06 .right p:nth-child(1) {font-size: 2.66rem;}
  .sec_06 .right p:nth-child(2) {font-size: 1.33rem; margin-top: 1.33rem; gap: 1.33rem;}
  /*버튼*/
  .sec_06 .ct_dwl {flex-direction: column;}
}/* sm */



/* footer--------------------------------------------------------------------------- */
footer{background: radial-gradient(77.11% 111.69% at 50% 133.79%, #2AD7C5 0%, #111 100%), #FFF; height: auto; position: relative; padding-top: 8.75rem;}
/* f_top */
footer .f_top{display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #4e4e4e; padding-bottom: 3.5rem;}
.f_top .news_txt{color: #fff; font-size: 2rem; line-height: 140%; letter-spacing: -0.04rem;}
.f_top .news_txt strong {font-weight: 700;}
.f_top .news_sub{display: flex; justify-content: space-between; gap: 2.5rem;}
.f_top .sub_left{display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;}
.f_top .input_wrap{width: 37.5rem;}
.f_top input[type="email"]{width: 100%; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; padding: 1.063rem 2rem; border-radius: 8px; border: 2px solid #666; background: #fff; backdrop-filter: blur(30px);}
.f_top input[type="email"]::placeholder{color: #9f9f9f; font-size: 1rem; font-weight: 500; line-height: 100%; letter-spacing: -0.02rem;}
.f_top .sub_right{display: flex; flex-direction: column; gap: 1.25rem; align-items: center;}
/*뉴스레터구독하기 버튼*/
.f_top .mouse_interact{display: inline-flex;}
.f_top .btn_sub{overflow: hidden; position: relative; display: flex; align-items: flex-end; padding: 1.25rem 2.813rem; gap: 0.2157rem; border-radius: 518px; background: linear-gradient(90deg, #2AD7C5 0%, #00B19F 100%); color: #333; font-size: 1.25rem; font-weight: 700; line-height: 100%; letter-spacing: -0.025rem; transition: transform 0.2s ease-in-out;}
.f_top .capsule_tit{position: relative; display: block; overflow: hidden; z-index: 2;}
.f_top .font_tit{display: block; transform-origin: left top; transition: color .2s, transform .4s;}
.f_top .font_tit::after{content: "뉴스레터 구독하기"; display: block; position: absolute; top: 190%; left: 0; transform: skewY(5deg); transform-origin: transform .4s; color: #000;}
.f_top .capsule_ripple{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; transform: translateZ(0); border-radius: inherit;}
.f_top .capsule_ripple span{display: block; width: 105%; height: 105%; transform: translateY(105%); background: #fff; border-radius: 50%; transition: transform .5s cubic-bezier(0.4, 0, 0, 1), border-radius 0.5s cubic-bezier(0.4, 0, 0, 1);}
/*hover*/
.f_top .btn_sub:hover .font_tit{color: #fff; transform: translateY(-150%) skewY(-7deg);}
.f_top .btn_sub:hover .font_tit::after{transform: skewY(7deg);}
.f_top .btn_sub:hover .capsule_ripple span{border-radius: 0; transform: translateY(0); transition-duration: 0s, 0s; animation: ripple_in .5s cubic-bezier(0.4, 0, 0, 1);}
@keyframes ripple_in {
  0%{border-radius: 100%; transform: translateY(-105%) translateZ(0);}
  100%{border-radius: 0%; transform: translateY(0) translateZ(0);}
}

.f_top .ck_wrap{display: flex; justify-content: flex-start; align-items: center; gap: 1.25rem;}
.f_top .ck_wrap >div {display: flex; align-items: center; gap: 1.25rem;}
.f_top .ck_wrap p{color: #f1f1f1; font-size: 1rem; font-weight: 500; line-height: 100%; letter-spacing: -0.02rem; text-indent: -0.5rem;}
.f_top .ck_wrap .terms{color: #9f9f9f; font-size: 1rem; font-weight: 500; line-height: 100%; letter-spacing: -0.02rem; text-decoration: underline; text-underline-position: from-font;}
/* ck custom */
.checkbox-label {display: block; position: relative; margin: auto; font-size: 1.37rem; line-height: 1.5rem; height: 24px; width: 24px; clear: both;}
.checkbox-label input {position: absolute; opacity: 0;}
.checkbox-label .checkbox-custom {position: absolute; top: 0px; left: 0px; height: 24px; width: 24px; background-color: #fff; border-radius: 5px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; border: 2px solid #666;}
.checkbox-label .checkbox-custom:hover{border: 3px solid #666;}
.checkbox-label input:checked ~ .checkbox-custom {background-color: #FFFFFF; border-radius: 5px; -webkit-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity:1; border: 2px solid #666;}
.checkbox-label .checkbox-custom::after {position: absolute; content: ""; left: 12px; top: 12px; height: 0px; width: 0px; border-radius: 5px; border: solid #009BFF; border-width: 0 3px 3px 0; -webkit-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); opacity:1; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;}
.checkbox-label input:checked ~ .checkbox-custom::after {-webkit-transform: rotate(45deg) scale(1);-ms-transform: rotate(45deg) scale(1);transform: rotate(45deg) scale(1);opacity:1;left: 7px;top: 2px;width: 7px;height: 14px;border: solid #009BFF;border-width: 0 3px 3px 0;background-color: transparent; border-radius: 0;}
.checkbox-label .checkbox-custom::before {position: absolute; content: ""; left: 10px; top: 10px; width: 0px; height: 0px; border-radius: 5px; border: 2px solid #FFFFFF; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);}
.checkbox-label input:checked ~ .checkbox-custom::before {left: -3px; top: -3px; width: 24px; height: 24px; border-radius: 5px; -webkit-transform: scale(3); -ms-transform: scale(3); transform: scale(3); opacity:0; z-index: 999; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;}

.f_top .btn_preview a{color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 100%; letter-spacing: -0.025rem; position: relative;}
.f_top .btn_preview a::after{content: ""; display: block; width: 17px; height: 17px; background: url(../images/s_arr.png) no-repeat center/100%; position: absolute; right: -20px; top: 2px;}

/* f_bottom */
footer .f_bot{padding-top: 3.5rem;}
.f_bot .mail_wrap {width: 100%;}
.f_bot .mail_wrap a {display: block; width: 100%; height: 0; padding-top: calc(  (160 / 1791) * 100% ) ; background : url(../images/email_bg.png) no-repeat center/contain;}
.f_bot .bot{display: flex; justify-content: flex-start; gap: 2.25rem;}
.f_bot .txt{display: flex; flex-direction: column;}
.f_bot .txt address{color: #f1f1f1; font-size: 1rem; font-weight: 500; line-height: 160%; letter-spacing: -0.02rem;}
.f_bot .txt .copy{color: #9f9f9f; font-size: 0.75rem; font-weight: 500; line-height: 160%; letter-spacing: -0.015rem;}
.f_bot .btn_blog{display: flex; padding: 0.5rem 3rem 0.5rem 2.5rem; justify-content: center; align-items: center; gap: 0.25rem; border-radius: 37.5rem; border: 1px solid #666; background-color: #3c3c3c;
font-size: 1.25rem; font-weight: 500; line-height: 100%; letter-spacing: -0.025rem; color: #f1f1f1; position: relative; z-index: 1;}
.f_bot .btn_blog::after{content: ""; display: block; background: url(../images/s_arr.png) no-repeat center/100%; width: 1rem; height: 1rem;}

footer .bg_txt{opacity: 0.23; background: linear-gradient(180deg, rgba(28, 154, 140, 0.60) 29.97%, #09342F 86.65%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; mix-blend-mode: multiply;}
footer .bg_txt{width: 100%;}
footer .bg_txt>p{width: 100%; height: 0; padding-bottom: calc(  (322 / 1930) * 100% ); background :  url(../images/f_bg.png) no-repeat bottom/contain;}

@media screen and (min-width: 1024.1px){
  .f_top .news_txt .brm,
  .f_bot .txt address .brm {display: none;}
}/* md ~ */

@media screen and (max-width: 1500px){
  .f_top .news_sub {gap: 1rem;}
  .f_top .input_wrap {width: 23rem;}
  .f_top input[type="email"] {padding: 1rem;}
}/* xlg */

@media screen and (max-width: 1200px){
  footer{padding-top: 7rem;}
  footer .f_top {flex-direction: column; gap: 1.55rem;}
  .f_top .news_txt {text-align: center;}
  .f_top .news_txt .brd {display: none;}
  .f_top .news_txt .brm {display: block;}
}/* lg */

@media screen and (max-width: 1024px){
  footer {padding-top: 3rem;}
  footer form {width: 100%;}
  .f_top .sub_left {flex: 1;}
  .f_top .input_wrap {width: 100%;}
  .f_bot .mail_wrap {margin-bottom: 1.33rem;}

  .f_bot .bot {align-items: flex-end;}
}/* md */
@media screen and (max-width: 767px){
  footer .f_top {border-bottom: none; padding-bottom: 5.66rem;}
  footer .f_bot {padding-top: 0;}
  .f_top .news_txt {font-size: 1.33rem; line-height: 160%;}
  .f_top .news_sub {flex-direction: column; gap: 1.83rem;}
  .f_top .sub_left {gap: 0.75rem;}
  .f_top .ck_wrap {justify-content: space-between; width: 100%;}
  .f_top .btn_sub {font-size: 1rem; padding: 1rem 1.33rem;}
  .f_top .btn_preview a {font-size: 0.83rem; font-weight: 500;}
  .f_top .btn_preview a::after {font-size: 1rem; width: 1rem; height: 1rem; right: -14px; top: 0;}
  .f_bot .bot {justify-content: space-between;}
  .f_bot .txt address {margin-bottom: 0.667rem;}
  .f_bot .txt .copy {font-size: 0.833rem;}
  /* ck custom */
  .checkbox-label {height: 18px; width: 18px;}
  .checkbox-label .checkbox-custom {height: 18px; width: 18px; border-radius: 3px;}
  .checkbox-label input:checked ~ .checkbox-custom::after {left: 4px; top: 0; width: 6px; height: 11px; border-width: 0 2px 2px 0;}
}/* sm */