@import url('https://cdn.rawgit.com/kattergil/NotoSerifKR-Web/76eb9ebf/stylesheet/NotoSerif-Web.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url('https://fonts.cdnfonts.com/css/dm-serif-display');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
/* CSS RESET - START */
*, :after, :before {box-sizing:border-box}
* {margin:0}
body, html {height:100%}
body {-webkit-font-smoothing:antialiased;line-height:1.5}
canvas, img, picture, svg, video {display:block;max-width:100%}
button, input, select, textarea {font:inherit}
h1, h2, h3, h4, h5, h6, p {overflow-wrap:break-word}
#__next, #root {isolation:isolate}
/* CSS RESET - END */
a {
  text-decoration: none;
}

body, html {
    font-size: .833vw;
    line-height: 1.5; 
    color: #fff;
    font-family: "Noto Serif KR", serif;
    background: #000;
}
.mobile{
    font-size: 16px;
    font-family: "Noto Serif KR", serif;
}
p {
    white-space: pre-wrap;
  }
  .sample-slider{
    margin-top: 6.25rem;
    width: 100vw;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 10px;
    mask-image: linear-gradient(
      to left,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }
  .swiper-wrapper{
    
  }
  .sample-slider .swiper-wrapper{
    transition-timing-function: linear;
  }
  .swiper-slide{
    padding: 0!important;
    margin:0!important;
}

.swiper-slide img{
    padding: 0!important;
    margin:0!important;
    max-width: none !important;
    width: 39rem!important;
    height: auto!important;
    object-fit: cover!important;
    object-position: center!important;
    background-color: red;
}
  /* @media screen and (min-width: 400px) and (max-width: 919px) {
    body, html {font-size: 9px;}
    
  }

  @media screen and (min-width: 920px) and (max-width: 1319px) {
    body, html {font-size: 11px;}    
  }

  @media screen and (min-width: 1320px) and (max-width: 1719px) {
    body, html {font-size: 13px;}    
  }

  @media screen and (min-width: 1720px) and (max-width: 1919px) {
    body, html {font-size: 15px;}
    
  } */
  

.page {
    
    display: flex;
    flex-direction: column;    
    width: 100%;
    overflow: hidden;
    position: relative;    
    flex-shrink: 0;
}

.bottom-pop-fixed{
    position: fixed;
    bottom: 0;
    width: 22.5rem;
    height: 19.9375rem;
    flex-shrink: 0;    
    right: 0;
    z-index: 100;
    color: #fff;
    overflow: hidden;
    background: #990A0A;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-pop-layer{    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    
    background: url('../assets/bottom-fixed-layer.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */

}

.bottom-pop-upper{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    
    
    background: url('../assets/bottom-fixed-layer-upper.png') 50%;
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}

.bottom-pop-title{
    color: #FFF;
    text-align: center;    
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.0375rem;
    margin-top: 2.5rem;
}

.bottom-pop-second-wrap{
    z-index: 3;
    margin-top: 0.63rem;
    height: 4.5rem;
    
    display: flex;
}
.bottom-pop-second{
    overflow: hidden;
    position: relative;
    
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 4.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.09rem;    
}

.bottom-pop-second {
    display: flex;
    overflow: hidden;
    position: relative;    
    color: #FFF;
    text-align: center;
    font-family: Arial, sans-serif;
    width: 6rem; /* 두 자릿수를 모두 포함할 너비 */
    height: 4.5rem; /* 숫자 하나의 높이와 동일하게 설정 */
}
.second-wrapper{
    display: flex;
    flex-direction: column;
    
    width: 3rem; /* 각 wrapper의 너비를 설정 */
}
/* transition: transform 1s ease-out; 부드러운 전환 효과 */
.bottom-pop-second-number{    
    height: 4.5rem; /* 각 숫자의 높이 */
    display: flex;
    font-family: Pretendard;
    justify-content: center;
    align-items: center;
    font-size: 4.5rem; /* 숫자의 폰트 크기 */
}

.bottom-pop-second-sub{    
    color: #FFF;
    display: flex;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.03rem;
    align-items: end;    
}

.bottom-pop-content{
    margin-top: 0.62rem;
    color: #FFF;
    text-align: center;    
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 1.225rem */
    letter-spacing: -0.02625rem;
    z-index: 3;
}

.bottom-pop-button{
    display: flex;
    width: 20rem;
    height: 3rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    background: #FFF;
    color: #000;

    /* Bold */
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    z-index: 3;
    position: absolute;
    bottom: 1.25rem;
    cursor: pointer;
}
.logo-wrap{
    position: absolute;
    top: 0;
    left: 0;
}
.logo{
    margin: 5rem;
    width: 12.25rem;
    height: 4.6875rem;
    flex-shrink: 0;
}

.btn{
    cursor:pointer;
}
.left{
    overflow: hidden;
    position: absolute;    
    left: 0;    
    width: 50%;
    height: 100%;    
}
.right{
    overflow: hidden;
    position: absolute;    
    right: 0;    
    width: 50%;
    height: 100%;    
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-h{
    display: flex;
    justify-content: center;    
}
.center-v{
    display: flex;    
    align-items: center;
}
.page-01{
    
    height: 75rem;
    background: #000;
    flex-grow: 1;
}
.page-01-txt-01{
    z-index: 1;
    margin-top: 25.75rem;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.05rem;
}
.page-01-txt-02{
    z-index: 1;
    margin-top: .6rem;
    height: 12rem;
    color: #FFF;
    text-align: center;
    font-family: "DM Serif Display";
    font-size: 8.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.175rem;
}
.page-01-txt-03{
    z-index: 1;
    margin-top: 1.25rem;
    color: #FFF;
    text-align: center;

    /* Subtitle/Body Large */
    font-family: Pretendard;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.page-01-btn{
    text-align: center;
    margin-top: 6.25rem;
    display: flex;
    width: 26.875rem;
    height: 6rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    background: #990A0A;

    color: #FFF;
    text-align: center;

    /* Title/Header 3 */
    font-family: Pretendard;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 112.5% */
}
.page-01-btn:hover{
    color: #990A0A;
    text-align: center;
    font-family: Pretendard;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 112.5% */
    letter-spacing: -0.04rem;
    border: 2px solid #990A0A;
    background: #FFF;
}
.page-02{
    
    height: 88.5625rem;
    background-image: url('../assets/page-02-bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}

.page-02-img{
    position: absolute;
    bottom: 6rem;    
    width: 96.25rem;
    height: 22.5rem;
    left: 50%;
    transform: translateX(-50%); /* 자신의 너비의 50%만큼 왼쪽으로 이동 */
}
.page-02-right{
    padding-top: 12.5rem;
    padding-left: 6.25rem;
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
}
.bg-primary{
    background-color: #990A0A;
}
.txt-primary{
    color: #990A0A;
}
.page-02-txt-01{
    color: #FFF;
    font-family: Pretendard;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    line-height: 5.375rem; /* 134.375% */
    letter-spacing: -0.08rem;
}
.page-02-txt-02{
    color: #FFF;

    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.08rem;
}
.page-02-txt-03{
    color: rgba(255, 255, 255, 0.90);
    margin-top: 3rem;
    /* Subtitle/Body Large */
    font-family: Pretendard;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.page-03{
    
    height: 50rem;    
}
.page-03 .left{
    padding-top: 11.56rem;
    padding-left: 11.87rem;
}

.page-03-txt-01{
    color: #FFF;

    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.08rem;
}
.page-03-txt-02{
    margin-top: 2.5rem;
    color: #FF6363;

/* Title/Header 3 */
font-family: Pretendard;
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 2.25rem; /* 150% */
letter-spacing: -0.03rem;
}
.page-03-txt-03{
    margin-top: 0.8rem;
    color: #FFF;

/* Subtitle/Body Large */
font-family: Pretendard;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.page-03-txt-04{
    margin-top: 5rem;
    color: rgba(255, 255, 255, 0.60);

/* Body */
font-family: Pretendard;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 1.4rem */
}
.page-03-txt-05{
    color: #FFF;
text-align: right;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
font-family: Pretendard;
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.75rem; /* 140% */
letter-spacing: -0.025rem;
}
.page-03-txt-06{
    color: rgba(255, 255, 255, 0.90);
font-family: Pretendard;
font-size: 1.125rem;
font-style: normal;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0225rem;
}
.page-03-right-txt-wrap{
    position: absolute;
    right: 1.75rem;
    bottom: 1.25rem;    
}
.page-03 .right{
    display: flex;
    flex-direction: column;
}
.page-03-right-top{
    width: 100%;
    height: 100%;
    background-image: url('../assets/img_content_3-1.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}
.page-03-right-bottom{
    width: 100%;
    height: 100%;
    background-image: url('../assets/img_content_3-2.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}
.page-04{
    
    height: 50rem;    
    
}
.page-04 .left{
    
    height: 100%;
    background-image: url('../assets/img_content_3-3.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}
.page-04 .right{
    
    height: 100%;
    padding-top: 10.13rem;
    padding-left: 12.5rem;
}

.flex{
    display: flex;
}
.page-04-txt-01{
    color: #FFF;
    height: 9.5rem;
    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.08rem;
}
.page-04-txt-02{
    height: 4.75rem;
    margin-left: 1.25rem;
    color: #FFF;
    font-family: "Noto Serif KR";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 1.4rem */
}
.page-04-txt-03{
    margin-top: 2.5rem;
    color: #FF6363;

/* Title/Header 3 */
font-family: Pretendard;
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 2.25rem; /* 150% */
letter-spacing: -0.03rem;
}
.page-04-txt-04{
    color: #FFF;

/* Subtitle/Body Large */
font-family: Pretendard;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
    margin-top: 1.88rem;
}
.page-04-txt-05{
    color: rgba(255, 255, 255, 0.60);

/* Body */
font-family: Pretendard;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 1.4rem */
    margin-top: 5rem;
}
.page-05{
    
    height: 50rem;
    background-image: url('../assets/img_content_4.png');  
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */  
}
.page-05-txt-01{
    width: 55rem;
    margin-top: 15.62rem;
    margin-left: 12.56rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 3.15rem */
    letter-spacing: -0.0525rem;
}
.page-05-txt-02{
    width: 46.8125rem;
    margin-top: 2.5rem;
    margin-left: 15.62rem;
    color: #FFF;
text-align: center;
font-family: "Noto Serif KR";
font-size: 1.25rem;
font-style: normal;
font-weight: 900;
line-height: 140%; /* 1.75rem */
letter-spacing: -0.0375rem;
}
.page-06{
    
    height: 17.5rem;
    background-image: url('../assets/page-06-bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}
.page-06-cont{
    
    height: 9.125rem;
    gap: 0.62rem;
}
.page-06-txt-01{
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.035rem;
}
.page-06-txt-02{
    color: #FFF;
text-align: center;
font-family: "Noto Serif KR";
font-size: 1.75rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.035rem;
}
.page-06-txt-03{
    color: #FFF;
text-align: center;
font-family: "Noto Serif KR";
font-size: 2rem;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: -0.04rem;
}
.page-07{
    
    height: 50rem;
    
    
}
.txt-red .flip-card, .txt-red .number{
    color: red!important;    
}
.hide{
    display: none;
}
.hide-animation{

}

.behind-timer{
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    opacity: 0;
}
.hidden {
    display: none;
    opacity: 0;
  }
  
  .appear {
    animation: fade-in 3s;
    animation-fill-mode: forwards;
    display: flex;
  }
  
  .disappear {
    animation: fade-out 1s;
    animation-fill-mode: forwards;
  }
@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fade-out {
    from {
      opacity: 1;
  
    }
    to {
      opacity: 0;
    }
  }
.page-07 .left{
    position: relative;
    overflow: hidden;
    width: 50rem;
    padding-left: 5rem;
    padding-top: 7.5rem;
    
}
.video-wrap{
    
    /* background-image: url('../assets/video2.png'); */
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    /* background-color: red; */
    width: 55rem;
    height: 35rem;
}
.play-btn{        
    position: absolute;
    cursor: pointer;
    width: 8.875rem;
    height: 8.875rem;
    padding: 1rem;
    left: calc(50% + 3.75rem);
    top: calc(50% - 1rem);
    transform: translate(-50%, -50%);
    
}
.page-07-sub{
    height: 13.75rem;
}
.page-07-sub-txt{
    padding-top: 1.5rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem; /* 150% */
    letter-spacing: -0.04rem;
}
.page-07 .left{
    overflow: hidden;
    height: 100%;
    width: 50%;
    background-color: #000;
}
.page-07 .right{
    overflow: hidden;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../assets/page-07-bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}
.page-07-txt-01{
    margin-top: 12.56rem;
    color: #FFF;
text-align: center;
font-family: "DM Serif Display";
font-size: 3.75rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.075rem;
}
.page-07-txt-02{
    margin-top: 3.75rem;
    color: rgba(255, 255, 255, 0.90);
text-align: center;

/* Title/Header 2 */
font-family: Pretendard;
font-size: 2.5rem;
font-style: normal;
font-weight: 700;
line-height: 3.5rem; /* 140% */
letter-spacing: -0.05rem;
}
.page-07-timer-wrap{
    display: flex;
    height: 6.25rem;
    width: 32.8rem;
    margin-top: 2.5rem;
    gap: 0.25rem;
    overflow: hidden;
}
.number-wrap{
    background: #fff;
    border-radius: 0.5rem;
    height: 6.25rem;    
    width: 4.5rem;
}
.number, .second-number{
    width: 4.5rem;
    height: 6.25rem;
    color: #000;
    
    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;

    display: flex;
    justify-content: center;
    align-items: center;
}
.page-07-timer-wrap .number-divider{
    height: 6.25rem;
    width: 2rem;
    color: #FFF;
text-align: center;

/* Title/Header 1 */
font-family: Pretendard;
font-size: 4rem;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: -0.08rem;
}
.page-08{
    
    height: 75rem;
    
    /* background-image: url('../assets/img_content_5_bg.png'); */
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    background-color: #5A0101;
}
.page-08-txt-01{
    margin-top: 10.62rem;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem; /* 114.286% */
    letter-spacing: -0.105rem;
}
.page-08-txt-011{
    margin-top: 1.25rem;
color: #FFF;
text-align: center;
font-family: Pretendard;
font-size: 2.5rem;
font-style: normal;
font-weight: 500;
line-height: 4rem; /* 160% */
letter-spacing: -0.075rem;
}
.page-08-txt-02{
    margin-top: 4.37rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.5rem; /* 155.556% */
    letter-spacing: -0.045rem;
}
.page-08-txt-03{
    margin-top: 2.5rem;
    color: #FFF;
    text-align: center;
    
    /* Body */
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 1.4rem */
}
.page-08-cont-wrap{
    margin-top: 5rem;
    height: 30rem;
    gap: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-08-cont-wrap .item{
    background: #fff;
    width: 26.25rem;
    height: 30rem;
    display: flex;
    flex-direction: column;
    
    align-items: center;
}

.donate-title{
    display: flex;
    width: 15rem;
    height: 3.75rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    
    color: #FFF;
    text-align: center;

    /* Title/Header 3 */
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 150% */
    letter-spacing: -0.03rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}
.donate-title-01{
    border-radius: 0.5rem;
    background: var(--red, #990A0A);

}
.donate-title-02{
    border-radius: 0.5rem;
    background: var(--red, #990A0A);

}
.donate-title-03{
    border-radius: 0.5rem;
    background: var(--red, #990A0A);

}

.donate-btn{
margin-top: 1.37rem;
    display: flex;
    width: 22.5rem;
    height: 5rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    color: #990A0A;
    text-align: center;

    /* Title/Header 3 */
    font-family: Pretendard;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 150% */
    letter-spacing: -0.03rem;
    border: 1px solid #990A0A;
    background: #FFF;
    cursor: pointer;
}
.donate-btn:hover{
    background: #990A0A;
    color: #FFF;
}
.donate-text-01{
    color: #000;
    text-align: center;
    font-family: Pretendard;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.04rem;
}

.donate-wrap{
    margin-top: .63rem;
    color: #000;
    text-align: center;
    font-family: Pretendard;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.75rem; /* 137.5% */
    letter-spacing: -0.04rem;
}
.donate-x img{
    width: 2rem;
    height: 2rem;
}
.kit-wrap{
    display: flex;    
    justify-content: center;
    align-items: center;    
}
.kit-wrap img{
    height: 5rem;
    width: auto;
    
}
.donate-text-02{
    color: #000;
text-align: center;

/* Title/Header 2 */
font-family: Pretendard;
font-size: 2.5rem;
font-style: normal;
font-weight: 700;
line-height: 3.5rem; /* 140% */
letter-spacing: -0.05rem;
}
.donate-text-03{
    
}

.page-09{
    
    height: 62.5rem;
    background-image: url('../assets/img_content_6_bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}
.page-09 .center{
    margin-top: 8.75rem;
    color: #000;
text-align: center;
font-family: Pretendard;
font-size: 2.625rem;
font-style: normal;
font-weight: 700;
line-height: 4rem; /* 152.381% */
letter-spacing: -0.07875rem;
}
.page-10{
    
    height: 50rem;
    background-image: url('../assets/img_content_7_bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}
.page-10-txt-01{
    margin-top: 8.75rem;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 2.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem; /* 152.381% */
    letter-spacing: -0.07875rem;
}
.page-10-txt-02{
    margin-top: 2.5rem;
    color: rgba(255, 255, 255, 0.90);
text-align: center;
font-family: Pretendard;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: 4rem; /* 266.667% */
letter-spacing: -0.045rem;
}
.page-10-cont-wrap{
    margin-top: 3.75rem;
    display: flex;
    gap: 6.25rem;
}
.page-10-cont-wrap .item{

}
.page-10-txt-bottom{
    margin-top: 1.25rem;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.5rem; /* 142.857% */
    letter-spacing: -0.0525rem;
}
.green-circle{
    border-radius: 6.25rem;
    background: #990A0A;
    display: flex;
    width: 12.5rem;
    height: 12.5rem;    
    justify-content: center;
    align-items: center;
}
.green-circle img{
    width: 6.25rem;
    height: 6.25rem;
}
.page-11{
    
    height: 50rem;
    background-image: url('../assets/img_content_8_bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}
.page-11-txt-01{
    margin-top: 8.75rem;
    margin-left: 10rem;
    color: #FFF;
    font-family: Pretendard;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4.5rem; /* 150% */
    letter-spacing: -0.15rem;

}
.page-11-wrap{
    width: 105rem;
    margin-top: 8.75rem;
    display: flex;
    gap: 2.5rem;
    overflow: hidden;
}
.page-11-divider{
    width: 0.0625rem;
    flex-shrink: 0;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.50);
}
.page-11-txt-wrap{

}
.page-11-txt-top{
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 3.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem; /* 106.667% */
    letter-spacing: -0.1125rem;
}
.page-11-txt-bottom{
    margin-top: 1.88rem;
    color: rgba(255, 255, 255, 0.90);
    text-align: justify;
    
    /* Subtitle/Body Large */
    font-family: Pretendard;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.page-12{
    
    height: 75rem;
    background: #DBE9D2;
    
}
.page-12-cont-wrap{
    margin-top: 6.25rem;
    display: flex;
    padding: 0 8.75rem;
    gap: 2.5rem;
}
.people-wrap{
    cursor: pointer;
    width: 23.75rem;
}
.people-wrap img{    
    width: 23.75rem;
}
.page-12-txt-01{
    margin-top: 11.25rem;
    color: #000;
    text-align: center;
    font-family: Pretendard;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4rem; /* 114.286% */
    letter-spacing: -0.105rem;
}
.page-12-txt-02{
    margin-top: 1.25rem;
    color: #44841A;
font-family: Pretendard;
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.06rem;
}
.page-12-txt-03{
    margin-top: 0.62rem;
    color: #1B3709;
font-family: Pretendard;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.0375rem;
}
.page-12-txt-04{
    margin-top: 1.87rem;
    color: #0C1F00;
text-align: justify;
font-family: "Noto Serif KR";
font-size: 1.125rem;
font-style: normal;
font-weight: 400;
line-height: 2rem; /* 177.778% */
letter-spacing: -0.03375rem;
}
.page-12-btn{
    color: #1B3709;
    text-align: justify;

    /* Title/Header 3 */
    font-family: Pretendard;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 150% */
    letter-spacing: -0.03rem;
    position:absolute;
    right: 3.75rem;
    bottom: 3.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.page-12-btn img {
    margin-left: 0.62rem;
    width: 2rem;
    height: 2rem;

}
.page-13{
    
    height: 75rem;
}
.wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;

    overflow-y: scroll;
}
/* iOS only */ 

@supports (-webkit-touch-callout: none) {
    .wrap {
        height: -webkit-fill-available;
    }    
  }
.wrap-inner{
    overflow-y: scroll;
    height: 100%;
}

.page-last-txt{
    margin-top: 5rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.0675rem;
}

.left-wrapper{
    color: #000;
}

.right-wrapper{
    color: #000;
}

.footer{
    height: 16rem;
    background: #141414;
}
.footer-wrap{
    margin-top: 3.12rem;
    margin-left: 20rem;
    display: flex;
}
.footer-logo{
    display: flex;    
    justify-items: center;
}
.footer-logo img{
    margin-top: 1.5rem;
    width: 9.125rem;
    height: 3.5rem;
}
.copyright{
    margin-top: 1.5rem;
    margin-left: 20rem;
    
    color: #FFF;
    font-family: Pretendard;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 166.667% */
}
.footer-divider{
    width: 0.0625rem;
    height: 6.5625rem;
    margin-left: 7.5rem;
    margin-right: 1.12rem;
}
.footer-txt-top, .footer-txt-top a{
    color: #FFF;
    font-family: Pretendard;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

.footer-txt-bottom{
    margin-top: 1.25rem;
    color: #FFF;
    font-family: Pretendard;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}
.video_content{
    width: 100%;
    height: 100%;
}
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: 0.4;
  }
  
  .bg-video__content {
    height: 100%;
    width: 100%;
    object-fit: cover; 
    /* background-size: cover 와 비슷함. (HTML 요소 or 비디오와 작동) */
    
  }


  .flip-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.5rem;
    
    width: 4.5rem;
  }
  
  .top,
  .bottom,
  .flip-card .top-flip,
  .flip-card .bottom-flip {
    height: .75em;
    line-height: 1;
    padding: .25em;
    overflow: hidden;

    font-family: Pretendard;
    font-size: 4rem;
    font-style: normal;
    font-weight: 800;
    width: 4.5rem;

    display: flex;
    justify-content: center;
    
  }


  
  .top,
  .flip-card .top-flip {      
    background-color: white;
    border-top-right-radius: .1em;
    border-top-left-radius: .1em;
  }
  
  .bottom,
  .flip-card .bottom-flip {
    background-color: white;
    display: flex;
    align-items: flex-end;
    border-bottom-right-radius: .1em;
    border-bottom-left-radius: .1em;
  }
  
  .flip-card .top-flip {
    position: absolute;
    width: 100%;
    animation: flip-top 250ms ease-in;
    transform-origin: bottom;
  }
  
  @keyframes flip-top {
    100% {
      transform: rotateX(90deg);
    }
  }
  
  .flip-card .bottom-flip {
    position: absolute;
    bottom: 0;
    width: 100%;
    animation: flip-bottom 250ms ease-out 250ms;
    transform-origin: top;
    transform: rotateX(90deg);
  }
  
  @keyframes flip-bottom {
    100% {
      transform: rotateX(0deg);
    }
  }