@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');

/* 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 */
select::-ms-expand { display: none; }
a {
  text-decoration: none;
}
a:link{color:red;text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:underline;}
button  {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
:root {
    --green: #44841A;
    --max-width: 80rem;
}
html {
    font-size: 2.563vw;
    line-height: 1.5; color: #fff;
    font-family: "Noto Serif KR";
    background: #000;
}

.mobile{
    padding-bottom: 7rem;
}
/* @media (min-width: 320px) {
    html {
        font-size: 50%;
        font-size: calc(50% * .83vw);
    }
  }
  @media (min-width: 350px) {
    html {
        font-size: 56.25%;
        font-size: calc(56.25% * .83vw);
    }
  }
  @media (min-width: 390px) {
    html {
        font-size: 62.5%;
        font-size: calc(62.5% * .83vw);
    }
  } */
  
body {
    /* 1.6 * 10px = 16px */
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}

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

.flex{
    display: flex;
}

  /* 아래 모바일 */

  .bottom-fixed{
    /* width: 35.8rem; */
    width: 100%;
    height: 7rem;
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #990A0A;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.2rem;
    
  }

  .bottom-fixed-btn{
    display: flex;
    height: 4rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    color: #000;
    font-family: Pretendard;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 4px;
    background: #FFF;

    margin-left: 1.3rem;
  }

  .bottom-fixed p{
    color: #FFF;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.45px;
  }

  .bottom-fixed strong{
    font-size: 2rem;
    font-family: "Noto Serif KR";
  }

  .logo-wrap{
    position: absolute;
    top: 0;
    left: 0;
}
.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;
}
.logo{
    margin: 2.4rem 1.6rem;
    width: 8.9rem;
    height: 3.4rem;
    flex-shrink: 0;
}
.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 비디오와 작동) */
    
  }
.page-01{
    height: 52rem;
}  
.page-01-txt-01{
    z-index: 1;
    margin-top: 16.5rem;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.028rem;
}
.page-01-txt-02{
    z-index: 1;    
    height: 8rem;
    color: #FFF;
    text-align: center;
    font-family: "DM Serif Display";
    font-size: 5.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.1rem;

}
.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;
}
.bg-primary{
    background-color: #990A0A;
}
.txt-primary{
    color: #990A0A;
}
.page-01-btn{
    text-align: center;
    margin-top: 5.6rem;
    
    display: flex;
    width: 20rem;
    height: 4rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;

    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.6rem; /* 257.143% */
    letter-spacing: -0.028rem;
    background: #990A0A;
}
.page-01-btn:hover{
    background: #FFF;
    color: #000;
}

.page-02{
    height: 91rem;
    background-image: url('../assets/m-02-bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}

.page-02-img{
    position: absolute;
    bottom: 4rem;    
    width: 35.8rem;
    height: 8rem;
    left: 50%;
    transform: translateX(-50%); /* 자신의 너비의 50%만큼 왼쪽으로 이동 */
}
.page-02-right{
    padding-top: 31.3rem;
    padding-left: 2.4rem;
    
}

.page-02-txt-01{
    color: #FFF;
    font-family: Pretendard;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 800;
    line-height: 4rem; /* 142.857% */
    letter-spacing: -0.056rem;
}
.page-02-txt-02{
    color: #FFF;

    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 2.8rem;
    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: 1.6rem;
    /* Subtitle/Body Large */
    font-family: Pretendard;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.page-03{
    
}

.page-03 .left{

}
.page-03-txt-01{
    padding: 6rem 0 0 1.6rem ;
    color: #FFF;
    font-family: Pretendard;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.56px;
}
.page-03-txt-02{
    padding-left: 1.6rem;
    margin-top: 1.6rem;
    margin-bottom: 3rem;
    color: #FF6363;
    font-family: Pretendard;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.32px;
}
.page-03-txt-03{
    padding-left: 1.6rem;
    color: #FFF;
    font-family: Pretendard;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.page-03-txt-04{
    padding-left: 1.6rem;
    margin: 4rem 0;
    color: rgba(255, 255, 255, 0.60);
    font-family: Pretendard;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.page-03-right-top{
    background-image: url('../assets/m-3-1.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    height: 39rem;
    width: 100%;
}
.page-03-right-bottom{
    background-image: url('../assets/m-3-2.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    height: 19.5rem;
}
.page-03-right-txt-wrap{
    padding: 1rem 1.6rem;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}
.page-03-txt-05{
    color: #FFF;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-family: Pretendard;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 16.5px */
    letter-spacing: -0.22px;
}
.page-03-txt-06{
    color: rgba(255, 255, 255, 0.90);
    font-family: Pretendard;
    font-size: .9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.18px;
}

.page-04-bottom{
    background-image: url('../assets/m-4-1.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    width: 100%;
    height: 39rem;
}

.page-04-top{
    padding: 6rem 1.6rem 4rem 1.6rem;
}

.page-04-txt-01{
    color: #FFF;
    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.08rem;
}
.page-04-txt-02{
    margin-top: 1.6rem;
    color: #FFF;
    font-family: "Noto Serif KR";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 1.4rem */
}
.page-04-txt-03{
    margin-top: 2rem;
    color: #FF6363;

/* Title/Header 3 */
font-family: Pretendard;
font-size: 1.6rem;
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.4rem;
font-style: normal;
font-weight: 500;
line-height: normal;
    margin-top: 3rem;
}
.page-04-txt-05{
    color: rgba(255, 255, 255, 0.60);

/* Body */
font-family: Pretendard;
font-size: 1.1rem;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 1.4rem */
    margin-top: 4rem;
}

.page-05{
    background-image: url('../assets/m-5-1.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    width: 100%;
    height: 54.3rem;
}

.page-05-txt-01{
    padding: 6.5rem 1.6rem 2rem 1.6rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 23.4px */
    letter-spacing: -0.39px;
}

.page-05-txt-02{
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 900;
    line-height: 140%; /* 15.4px */
    letter-spacing: -0.033rem;
}

.page-06{
    background-image: url('../assets/m-5-2.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    width: 100%;
    height: 12rem;
}
.page-06-cont{
    padding-top: 2.4rem;
    padding-bottom: 1.6rem;
}
.page-06-txt-01, .page-06-txt-02{
    color: #FFF;
    text-align: center;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.24px;
}

.page-06-txt-03{
    margin-top: .8rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: -0.26px;
}

.page-07 .page-07-top{
    position: relative;
    overflow: hidden;
    padding: 2rem 1.6rem;    
}
.video-wrap{
    /* background-image: url('../assets/video2.png'); */
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}
.play-btn{        
    position: absolute;
    cursor: pointer;
    width: 6rem;
    height: 6rem;
    left: calc(50% );
    top: calc(50% );
    transform: translate(-50%, -50%);
    
}
.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-sub{
    
    height: 10rem;
    padding: 1rem 1.6rem;
}
.page-07-sub-txt{
    padding-top: 1rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem; /* 150% */
    letter-spacing: -0.04rem;
}

.page-07 .page-07-bottom{
    overflow: hidden;
    height: 28rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../assets/m-07-bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}

.page-07-txt-01{
    margin-top: 4rem;
    color: #FFF;
    height: 4.9rem;
    text-align: center;
    font-family: "DM Serif Display";
    font-size: 3.6rem;
    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 3 */
    font-family: Pretendard;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 150% */
    letter-spacing: -0.03rem;
    }
.page-07-timer-wrap{
    display: flex;
    height: 4rem;
    width: 32.8rem;
    margin-top: 2.5rem;
    gap: 0.4rem;
    overflow: hidden;
}
.number-wrap{
    background: #fff;
    border-radius: 0.5rem;
    height: 4rem;    
    width: 2.8rem;
}
.number, .second-number{
    width: 2.8rem;
    height: 4rem;
    color: #000;
    
    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;

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

    /* Title/Header 1 */
    font-family: Pretendard;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.08rem;
}

.flip-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.5rem;
    /* height: 4rem; */
    width: 2.8rem;
    color: #000;
  }
  
  .top,
  .bottom,
  .flip-card .top-flip,
  .flip-card .bottom-flip {
    height: .75em;
    /* height: 2rem; */
    /* padding: .75rem; */
    line-height: 1;
    padding: .25em;
    overflow: hidden;
    
    font-family: Pretendard;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 800;
    width: 2.8rem;

    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);
    }
  }


  .page-08{
    background: #5A0101;
   
}
.page-08-txt-01{
    margin-top: 6.5rem;

    background: #5A0101;
  color: #FFF;
text-align: center;
font-family: Pretendard;
font-size: 2.2rem;
font-style: normal;
font-weight: 700;
line-height: 3rem; /* 136.364% */
letter-spacing: -0.066rem;
}
.page-08-txt-011{
    margin-top: 1.4rem;
color: #FFF;
text-align: center;
font-family: Pretendard;
font-size: 1.6rem;
font-style: normal;
font-weight: 500;
line-height: 2.4rem; /* 150% */
letter-spacing: -0.048rem;
margin-bottom: 6.3rem;
}
.page-08-txt-02{
    margin-top: 4rem;
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif KR";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.7rem; /* 155.556% */
    letter-spacing: -0.045rem;
}
.page-08-txt-03{
    margin-top: 2rem;
    color: #FFF;
    text-align: center;
    
    /* Body */
    font-family: Pretendard;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 1.4rem */
    padding-bottom: 6rem;
}
.page-08-cont-wrap{
    flex-direction: column;
    gap: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4.6rem;
}
.page-08-cont-wrap .item{
    background: #fff;
    width: 100%;
    height: 26.5rem;
    display: flex;
    flex-direction: column;
    
    align-items: center;
}

.donate-title{
    display: flex;
    width: 13rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 0.5rem;
    
    color: #FFF;
    text-align: center;

    /* Title/Header 3 */
    font-family: Pretendard;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 150% */
    letter-spacing: -0.03rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.donate-title-01{
    border-radius: 0.5rem;
    background: #990A0A;
}
.donate-title-02{
    border-radius: 0.5rem;
    background: #990A0A;
}
.donate-title-03{
    border-radius: 0.5rem;
    background: #990A0A;
}
.kit{
    width: 4.8rem;
    height: 4.8rem;    
}
.donate-btn{
margin-top: 1.37rem;
    display: flex;
    width: 26.6rem;
    height: 4.9rem;
    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.6rem;
    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{    
    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;

}
.donate-text-02{
    color: #000;
text-align: center;

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

.page-09{
    
    height: 44.2rem;
    background-image: url('../assets/m-09-bg.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    
}
.page-09 .center{
    margin-top: 6rem;
    color: #000;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.4rem; /* 133.333% */
    letter-spacing: -0.054rem;
}
.swiper-slide{
    width: 100%!important;
    padding: 0!important;
    margin:0!important;
}

.swiper-slide img{
    padding: 0!important;
    margin:0!important;
    max-width: none !important;
    width: 100%!important;
    height: auto!important;
    object-fit: cover!important;
    object-position: center!important;
}
.swiper-container .swiper-zoom-container>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.slider-wrap, .slider-wrap-01, .slider-wrap-02{
    margin-top: 3.5rem;
    padding: 0 2.4rem 0 2.4rem;
    overflow: hidden;
    position: relative;
}
.sample-slider, .sample-slider-01, .sample-slider-02{
    position: relative;
    overflow: hidden;
    width: 34.2rem;
    height: 20rem;
}

.swiper-button-next-02, .swiper-button-next-01 {
    position: absolute;
    width: 4.8rem!important;
    height: 4.8rem!important;
    background-image: url('../assets/circle-right.png');    
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
  }
  
  .swiper-button-prev-02, .swiper-button-prev-01 {
    position: absolute;
    width: 4.8rem!important;
    height: 4.8rem!important;
    background-image: url('../assets/circle-left.png');    
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
  }
  .w-full{
    width: 100%;
  }
  .swiper-button-next::after, .swiper-button-next-01::after,
  .swiper-button-prev::after, .swiper-button-prev-01::after {
    display: none;
  }



.swiper-pagination-wrap{
    display: flex;
    gap: .8rem!important;
    margin-top: 2rem!important;
    position: relative; 
}
  .swiper-pagination {
    padding: 0!important;
    margin: 0!important;
  }
  .swiper-pagination span{
    width: .8rem!important;
    height: .8rem!important;
    margin: .4rem!important;
  }
  .swiper-pagination-bullet {
    background-color: #fff!important;
    opacity: 1!important;
  }
  .swiper-pagination-bullet-active {
    background-color: #990A0A !important;
    }

    .page-10{
        
        height: 84.8rem;
       background-color: #222;
        
    }
    .page-10-txt-01{
        margin-top: 2rem;
        color: #FFF;
        text-align: center;
        font-family: Pretendard;
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2.4rem; /* 152.381% */
        letter-spacing: -0.07875rem;
    }
    .page-10-txt-02{
        margin-top: 4rem;
        color: rgba(255, 255, 255, 0.90);
        text-align: center;
        font-family: Pretendard;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.6rem; /* 266.667% */
        letter-spacing: -0.045rem;
    }
    .page-10-cont-wrap{
        margin-top: 2rem;
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
    }
    .page-10-cont-wrap .item{
        margin: 1rem 2rem;
    }
    .page-10-txt-bottom{
        margin-top: 1rem;
        color: #FFF;
        text-align: center;
        font-family: Pretendard;
        font-size: 1.6rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2rem; /* 142.857% */
        letter-spacing: -0.0525rem;
    }
    .green-circle{
        border-radius: 50%;
        background: #fff;
        display: flex;
        width: 12rem;
        height: 12rem;
        justify-content: center;
        align-items: center;
    }    

    .green-circle img{
        width: 12rem;
        height: 12rem;
    }

    .page-11{
        height: 75.9rem;
        background-color: #44841A;
        padding: 6rem 3.2rem;
        background-image: url('../assets/m-11-bg.png');
        background-size: contain;
        background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
        background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    }

    .page-11-txt-01{
        color: #FFF;
        font-family: Pretendard;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 3.2rem; /* 160% */
        letter-spacing: -0.06rem;
    }
    .page-11-wrap{
        margin-top: 4rem;
        width: 100%;
    }
    .page-11-txt-wrap{

    }
    .page-11-txt-top{
        color: #FFF;
        font-family: Pretendard;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 3.6rem; /* 180% */
        letter-spacing: -0.06rem;
    }
    .page-11-txt-bottom{
        color: rgba(255, 255, 255, 0.90);
        font-family: Pretendard;
        margin-top: 1rem;
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    .page-11-divider{
        height: 1px;
        align-self: stretch;
        background: rgba(255, 255, 255, 0.50);
        margin: 3rem 0;
    }

    .page-12{
        background: #DBE9D2;
        padding: 6rem 3.2rem;
    }

    .page-12-txt-01{
        text-align: center;
        color: #000;
        font-family: Pretendard;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 3.2rem; /* 160% */
        letter-spacing: -0.06rem;
    }

    .people-wrap{
        margin-top: 4rem;
    }

    .people-wrap img{
        width: 100%;
    }

    .page-12-txt-02{
        margin-top: 2rem;
        color: #44841A;
        font-family: Pretendard;
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.054rem;
    }
    .page-12-txt-03{
        margin-top: 1rem;
        color: #1B3709;
        font-family: Pretendard;
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -0.042rem;
    }
    .page-12-txt-04{
        margin-top: 2rem;
        color: #0C1F00;
        text-align: justify;
        font-family: "Noto Serif KR";
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.0rem; /* 166.667% */
        letter-spacing: -0.036rem;
    }

    .page-14{
        height: 32.7rem;
        padding: 4rem 2.4rem;
        background: #141414;
        
    }
    .page-last-txt{
        color: #FFF;
        text-align: center;
        font-family: "Noto Serif KR";
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.042rem;
        line-height: 4rem;
        height: 4rem;
        margin-top: 4.7rem;
        margin-bottom: 4rem;
        text-align: center;
        padding: 0 2rem;
        
    }

    .footer-wrap{
        display: flex;
    }
    .footer-logo{
        display: flex;
        align-items: center;
        
    }
    .footer-logo img{
        width: 6.2rem;
        height: 2.4rem;
        
    }
    .footer-txt{
        margin-left: 2.4rem;
    }
    .footer-txt-top{
        color: #FFF;
        font-family: Pretendard;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2rem; /* 166.667% */
    }
        .footer-txt-top a{
        color: #FFF;
        font-family: Pretendard;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2rem; /* 166.667% */
    }

    .footer-txt-bottom{
        margin-top: 2rem;
        color: #FFF;
        font-family: Pretendard;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.92rem;
    }

    .copyright{
        margin-top: 2rem;
        color: rgba(255, 255, 255, 0.60);
        font-family: Pretendard;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem; /* 166.667% */
    }

    .txt-red .flip-card, .txt-red .top, .txt-red .bottom, .txt-red .number{
    color: red!important;    
}



.bottom-pop-second-wrap{
    z-index: 3;
    height: 3rem;
    display: flex;
}
.bottom-pop-second{
    overflow: hidden;
    position: relative;
    color: #FFF;
    line-height: 1;
    text-align: center;
    font-family: Pretendard;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.09rem;    
    width: 2.4rem; /* 두 자릿수를 모두 포함할 너비 */
    height: 3rem; /* 숫자 하나의 높이와 동일하게 설정 */
    position: relative;    
    display: flex;
    
}


.second-wrapper{
    display: flex;
    flex-direction: column;
    height: 3rem;
    width: 2.4rem; /* 각 wrapper의 너비를 설정 */
}
/* transition: transform 1s ease-out; 부드러운 전환 효과 */
.bottom-pop-second-number{    
    height: 3rem; /* 각 숫자의 높이 */
    min-height: 3rem;
    display: flex;
font-family: "DM Serif Display";
    justify-content: center;
    align-items: center;
    font-size: 2rem; /* 숫자의 폰트 크기 */
}

.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;    
    margin-bottom: .3rem;
}

.page-10-img{
    height: 23rem;
    background-image: url('../assets/m-10-01.png');
    background-size: contain;
    background-position: center; /* 이미지가 요소 중앙에 위치하도록 설정 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}