.dimmed {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* 사파리 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 90;
  pointer-events: none;
}

.dimmed.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* 팝업 오버레이 */
.popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 팝업 오버레이 활성화 시 */
.popup_overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* common */
.main_tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.002em;
}

.main_tit i{
  font-weight: 700;
}

.main_tit.l{
  align-items: flex-start;
}

.main-tit-small-txt {
  text-transform: uppercase;
  color: var(--color-main-orange);
  letter-spacing: 0.06em;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  font-family: "Paperlogy";
  letter-spacing: 2px;
}
.main-tit-small-txt.wh-01{
  color: rgb(255, 255, 255,1);
}
.main-tit-small-txt i.wh-01{
  color: rgb(255, 255, 255,1);
}
.main-tit-small-txt.wh{
  color: rgb(255, 255, 255,0.6);
}
.main-tit-small-txt i.wh{
  color: rgb(255, 255, 255,0.6);
}
.main_tit .wh-grey-opacity{
  color: rgb(255, 255, 255,0.1);
}
.main_tit .line b {
  color: rgb(9, 44, 76,0.1);
}
.main_tit .copy b{
  color: #092C4C;
}
.main_tit b .copy.first,
.main_tit b .copy.second i:last-child {
  color: #282828;
}

.main_tit b .copy.wh-sub{
  color: #F8F8F8;
  opacity: 0.8;
  font-weight: 300;
}

.main_tit b .copy.second i:first-child {
  color: #092C4C;
}

.main_tit b .copy.second i:first-child.wh{
  color: #fff;
}

.main_tit .f-start{
  display: flex;
  flex-direction: column;
}

/* h2 ani css */
.copy_e {
  position: relative;
  display: inline-block;
}

.copy_e .line {
  position: relative;
  display: block;
  line-height: 1.3em;
}
.copy_e .line.first{
  font-weight: 400;
  color: rgba(0, 0, 0, 0.1);
}
.copy_e .line.second{
  font-weight: 700;
  color: rgb(9, 44, 76, 0.1);
}
.copy_e .line.second em{
  font-weight: 400;
}
.copy_e .line.wh{
  font-weight: 700;
  color: rgb(255, 255, 255, 0.1);
}
.copy_e .copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  transition: width 1s ease-in-out;
}

.copy_e.active .copy {
  width: 100%;
}

.copy_e br {
  display: none;
}

.copy_e .copy br {
  display: none;
}

.split {
  display: inline-block;
  opacity: 1;
}

.split .char {
  display: inline-block;
  opacity: 0;
}

/* h2 ani css */ 
.copy_e{
  position: relative;
  white-space: nowrap;
  display: inline-block;    
  line-height: 1.3em;
}
.copy_e .copy{
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.3em;
  /* color: #222; */
  opacity: 0.2;
  overflow: hidden;
  white-space: nowrap;
  transition: width 1s ease-in-out ;
}
.copy_e.active .copy{width: 100%;opacity: 1;}
.copy_e br{
  display: none;
}
.copy_e .copy br{
  display: none;
}
.main_tit .animate_me{
  display: flex;
}
.main_tit .animate_me.column{
  flex-direction: column;
}
/* 기본 상태 (공통 트랜지션) */
.fade-up,
.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.8s ease-in-out;
}

/* 위에서 fade-up */
.fade-up {
  transform: translateY(60px);
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 왼쪽에서 fade-left */
.fade-left {
  transform: translateX(-60px);
}
.fade-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 오른쪽에서 fade-right */
.fade-right {
  transform: translateX(60px);
}
.fade-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* hover round ripple effect */
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: width 0.45s ease, height 0.45s ease;
}



/* view-more component */
.view-more {
  /* font-family: 'Marcellus'!important; */
  width: fit-content;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 200px;
  color: #fff;
  font-family: "Marcellus";
  background: rgba(237, 212, 194, 0.20);
  z-index: 1;
  transition: 
  background 0.4s ease,
  border-color 0.4s ease;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
.view-more.nv{
  color: var(--color-logo-dark-blue);
  background: rgba(255, 255, 255, 0.2);
}
.view-more a{
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-more::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 200px;
  padding: 1px;
  background: linear-gradient(
  90deg,
  #FF6A00,
  #fc832c,
  #faa568,
  #fbcba9,
  #fae5d5,
  #FF6A00
  );
  background-size: 300% 100%;
  animation: gradientMove 5s linear infinite;
  -webkit-mask:
  linear-gradient(#fff 0 0) content-box,
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.view-more.nv::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 200px;
  padding: 1px;

  background: linear-gradient(
    90deg,
    #002F57,
    #004B8A,
    #0A6FC2,
    #4FA3E3,
    #0A6FC2,
    #004B8A,
    #002F57
  );

  background-size: 300% 100%;
  animation: gradientMove 6s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes gradientMove {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}
.view-more p{
  line-height: 1;
}
.view-more .hover-plus{
  width: 10px;
  height: 10px;
}
.view-more:hover {
  background: #FF6A00;
}
.view-more.nv:hover{
  background: var(--color-logo-dark-blue);
  color: #fff;
}
.view-more.nv .hover-plus img{
  transition: filter 0.3s ease;
}
.view-more.nv:hover .hover-plus img{
  filter: brightness(0) invert(1);
}
.hover-plus {
  display: inline-flex;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
/* hover 시 회전 */
.view-more:hover .hover-plus {
  transform: rotate(360deg);
}

/* text animation */
.text-clip {
  overflow: hidden;
  line-height: 1.2;
}
.text-clip-inner {
  display: block;
  /* transform: translateY(120%); */
  will-change: transform;
}