@charset "utf-8";
/* CSS Document */


.winter01 {
    width: 100%;
    position: relative;
    background-color: #030429; /* 로딩 대기 색상 */
    background-image: url("../img/ess/teulopi_back.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


.winter-visual {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.winter-left {
  width: 50%;
}

.winter-right {
  width: 50%;
  position: relative;             /* 파티클 절대좌표 기준 */
  display: flex;
  justify-content: flex-end;      /*오른쪽 끝 정렬 */
  align-items: center;
}

/* 트로피 이미지 */
.teulopi {
  position: relative;  /* 더 이상 absolute X */
  z-index: 2;
  display: block;
  margin-left: auto;   /* 오른쪽 끝으로 밀기 */
  opacity: 0;
  transform: scale(0.7) translateY(10px);  /* 너무 작지 않게 */
  animation: teulopiPop 0.6s ease-out 0.4s forwards;
}

@keyframes teulopiPop {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.particle {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  animation-fill-mode: both;
}

/* 트로피 주변으로 '좌우 + 위아래' 골고루 퍼지게 재배치 */
.p1 { top: 50%;  right: 70%;   animation: particleFloat1 4s ease-in-out 0.8s infinite; }   /* 트로피 바로 위쪽 오른쪽 */
.p2 { top: 45%;  right: 65%;  animation: particleFloat2 5s ease-in-out 1.0s infinite; }   /* 트로피 왼쪽 위 */
.p3 { top: 48%;  right: 6%;   animation: particleFloat3 4.5s ease-in-out 1.2s infinite; } /* 트로피 오른쪽 중간 */
.p4 { top: 38%;  right: 58%;  animation: particleFloat2 5.2s ease-in-out 1.4s infinite; } /* 트로피 왼쪽 중간 */
.p5 { top: 55%;  right: 55%;  animation: particleFloat1 4.3s ease-in-out 1.6s infinite; } /* 트로피 오른쪽 아래 */
.p6 { top: 65%;  right: 30%;  animation: particleFloat3 5.1s ease-in-out 1.8s infinite; } /* 트로피 왼쪽 아래 */
.p7 { top: 20%;  right: -5%;  animation: particleFloat2 4.8s ease-in-out 2.0s infinite; } /* 살짝 화면 밖 오른쪽 */
.p8 { top: 60%;  right: 18%;  animation: particleFloat3 4.6s ease-in-out 2.2s infinite; } /* 트로피 바로 윗부분 */
.p9 { top: 76%;  right: 30%;  animation: particleFloat1 4s ease-in-out 0.8s infinite; }   /* 트로피 바로 위쪽 오른쪽 */

/* 움직임 패턴 */
@keyframes particleFloat1 {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
  10%  { opacity: 1; }
  50%  { transform: translate(-10px, -20px) scale(1); }
  100% { opacity: 0; transform: translate(5px, -10px) scale(0.7); }
}

@keyframes particleFloat2 {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
  10%  { opacity: 1; }
  50%  { transform: translate(15px, -15px) scale(1.05) rotate(5deg); }
  100% { opacity: 0; transform: translate(-5px, 0) scale(0.7) rotate(-5deg); }
}

@keyframes particleFloat3 {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.8); }
  10%  { opacity: 1; }
  50%  { transform: translate(-15px, -10px) scale(1.1) rotate(-5deg); }
  100% { opacity: 0; transform: translate(10px, -5px) scale(0.8) rotate(3deg); }
}



@media screen and (max-width: 768px) {
  .winter01 .winter-visual {
    flex-direction: column;      /* 가로 → 세로 */
    align-items: center;
  }

  .winter01 .winter-left,
  .winter01 .winter-right {
    width: 80%;                 /* 50% → 100% */
  }

  .winter01 .teulopi {
    max-width: 80%;              /* 너무 크면 줄이고 */
    margin: 20px auto 0;         /* 가운데 정렬 */
  }
}

@media screen and (max-width: 768px) {
  .winter01 .particle {
    /* 기존 right 값이 너무 과하면 살짝 안쪽으로 */
    transform: scale(0.8);
  }

  /* 아예 안전하게 하고 싶으면 */
  .winter01 {
    overflow: hidden;    /* 모바일에서 오른쪽 삐져나오는 것 잘라버리기 */
  }
}



/* ================== winter01 텍스트 공통 ================== */

/* 공통: 간격/딜레이만 담당 */
.winter01 .txt {
  display: block;
  opacity: 0;
  margin-bottom: 18px;
}

.winter01 .txt01 {
   margin-bottom: 28px;
}


.winter01 .txt04 {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
.winter01 .txt04 {
  margin-top: 40px;
}
}


/* 순차적 딜레이 (PC/모바일 공통) */
.winter01 .txt01 { animation-delay: 0.15s; }
.winter01 .txt02 { animation-delay: 0.30s; }
.winter01 .txt03 { animation-delay: 0.45s; }
.winter01 .txt04 { animation-delay: 0.60s; }

/* ================== PC (m_none) : 왼쪽 → 오른쪽 가로 슬라이드 ================== */

.winter01 .m_none .txt {
  transform: translate3d(-220px, 0, 0);            /* X축으로 멀리서 출발 */
  animation-name: txtSlideHorizontal;
  animation-duration: 0.45s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes txtSlideHorizontal {
  0% {
    opacity: 0;
    transform: translate3d(-220px, 0, 0);
  }
  80% {
    opacity: 1;
    transform: translate3d(10px, 0, 0);           /* 살짝 지나쳤다가 */
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);              /* 제자리 */
  }
}

/* ================== 모바일 (pc_none) : 아래 → 위 세로 슬라이드 ================== */

.winter01 .pc_none .txt {
  transform: translate3d(0, 60px, 0);             /* Y축 아래에서 출발 */
  animation-name: txtSlideVertical;
  animation-duration: 0.45s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  margin-bottom: 14px;                             /* 모바일은 간격 살짝 줄임 */
}

@keyframes txtSlideVertical {
  0% {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
  }
  80% {
    opacity: 1;
    transform: translate3d(0, -4px, 0);           /* 살짝 위로 오버슈트 */
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);              /* 제자리 */
  }
}




.star {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform-origin: center;
  animation: sparkle 1.8s ease-in-out infinite;
}

.star01 {
  top: -10%;     /* 트로피보다 약간 위 */
  right: 5%;     /* 오른쪽 끝 매우 가깝게 */
  animation-delay: 0.2s;
}

.star02 {
  bottom: 20%;   /* 트로피보다 약간 아래 */
  right: 40%;    /* 트로피 왼쪽으로 이동 */
  animation-delay: 0.8s;  /* 서로 다른 타이밍 */
}

@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0.4); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}


/* =======================
   기본 레이아웃 설정
   ======================= */
.winter02 {
  width: 100%;
  position: relative;
  background-color: #FFFFFF;
}

.winter02 .newpaper-wrap {
  position: relative;
  max-width: 100%;  /* 모바일에서 100% 크기 */
  margin: 0 auto;
}

.winter02 .paper-base {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;  /* 바닥 신문 이미지 */
}

.winter02 .paper-layer {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;  /* 기본 상태는 숨김 */
  z-index: 2;
}

/* =======================
   PC 버전 - 애니메이션: 좌/우 슬라이드
   ======================= */
.winter02 .m_none .news01 { top: 280px; left: -50px; }
.winter02 .m_none .news02 { top: 380px; left: 390px; }
.winter02 .m_none .news03 { top: 470px; left: 150px; }
.winter02 .m_none .news04 { top: 590px; left: 580px; }
.winter02 .m_none .news05 { top: 690px; left: 300px; }

/* PC 모션 */
.winter02.animate .m_none .news01 { animation: slideFromLeft 0.6s ease-out 0.2s forwards; }
.winter02.animate .m_none .news02 { animation: slideFromRight 0.6s ease-out 0.4s forwards; }
.winter02.animate .m_none .news03 { animation: slideFromRight 0.6s ease-out 0.6s forwards; }
.winter02.animate .m_none .news04 { animation: slideFromRight 0.6s ease-out 0.8s forwards; }
.winter02.animate .m_none .news05 { animation: slideFromLeft 0.6s ease-out 1.0s forwards; }

/* 슬라이드 애니메이션 */
@keyframes slideFromLeft {
  0%   { opacity: 0; transform: translateX(-200px); }
  80%  { opacity: 1; transform: translateX(10px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromRight {
  0%   { opacity: 0; transform: translateX(200px); }
  80%  { opacity: 1; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* =======================
   모바일 버전 - "팡!" 하고 나타나는 모션
   ======================= */
@media screen and (max-width: 768px) {
  .newpaper-wrap {
    position: relative;
    max-width: 100%;  /* 모바일 크기에 맞게 */
    margin: 0 auto;
  }

  .newpaper-wrap .paper-base {
    display: block;
    width: 90%;
	  margin: auto;
    height: auto;
    position: relative;
    z-index: 1;  /* 바닥 신문 이미지 */
  }

  .newpaper-wrap .paper-layer {
    position: absolute;
    top: 20%;  /* 시작 위치: 화면 밖 위로 */
    left: 0;
    opacity: 1;  /* 기본 상태는 숨김 */
    z-index: 2;  /* 기사 이미지 */
  }

  /* 애니메이션: 위에서 아래로 내려오는 모션 */
  @keyframes slideFromTop {
    0% {
      opacity: 0;
      transform: translateY(-100%);  /* 화면 위로 시작 */
    }
    100% {
      opacity: 1;
      transform: translateY(0);  /* 제자리로 내려오기 */
    }
  }

  /* 모션 적용 */
  .newpaper-wrap.animate .paper-layer {
    animation: slideFromTop 1s ease-out forwards;  /* 위에서 아래로 내려오는 애니메이션 */
  }

  /* 기사 이미지 위치 조정 */
  .newpaper-wrap .news01_m {
    top: 38%; /* 시작 위치 */
  }
}


.text-content {
  color: #1a1a1a;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 55px;
  text-align: center;
  font-family: 'Pretendard';
}

.text-content span {
  color: #672eb2; /* 특정 텍스트 색상 변경 (예: "겨울방학 학습 공백") */
}


.im_all {
  display: flex;
  gap: 20px; /* 이미지들 간의 간격 */
  justify-content: center;
  align-items: center;
}

.im_all img {
  max-width: 100%;  /* 이미지 크기를 자동으로 맞추는 설정 */
  transition: transform 0.3s ease-out;
}

@media screen and (max-width: 768px) {

  .text-content {
    font-size: 20px;
    line-height: 25px;
  }

  .text-content span {
    color: #672eb2; /* 특정 텍스트 색상 변경 */
  }

  /* 이미지들 세로 정렬 */
  .im_all {
    display: flex;
    flex-direction: column;  /* 세로 정렬 */
    gap: 20px; /* 이미지들 간의 간격 */
    justify-content: center;  /* 세로 중앙 정렬 */
    align-items: center;      /* 가로 중앙 정렬 */
  }

  .im_all img {
    max-width: 90%;  /* 이미지 크기를 자동으로 맞추는 설정 */
    transition: transform 0.3s ease-out;
  }

  /* 각 이미지 AOS 모션을 아래에서 위로 순차적으로 나오도록 설정 */
  .im01 {
    animation-delay: 0.2s;
  }

  .im02 {
    animation-delay: 0.4s;
  }

  .im03 {
    animation-delay: 0.6s;
  }
}




.winter03 {
  width: 100%;
  position: relative;
  background-color: #f3f0fd;
}



/* 팝업 비디오 관련 스타일 */
.pop_vod {
  width: 100%;                  /* 전체 폭 */
  max-width: 800px;             /* 최대 폭 설정 */
  position: fixed;              /* 화면 고정 */
  top: 10%;                     /* 화면 상단에서 10% */
  left: 50%;                    /* 화면 중앙 정렬 */
  margin-left: -500px;          /* 중앙 맞추기 */
  background: #fff;             /* 배경 흰색 */
  z-index: 9999;                /* 화면 위에 뜨도록 */
  display: none;                /* 기본적으로 숨김 */
}

/* 레이어 배경 (검은색 반투명) */
#glayLayer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.6;
  z-index: 995;                /* 비디오 팝업보다 아래 */
  display: none;                /* 기본적으로 숨김 */
}

/* 팝업 닫기 버튼 (PC버전) */
.pClose, .pop_vod .pClose {
  position: absolute;
  top: -10%;
  right: 1%;
  font-size: 50px;
  color: #707070;
  cursor: pointer;
}

/* 팝업 닫기 버튼 (모바일버전) */
.pClose_m, .pClose_m1, .pClose_m2, .pClose_m3, .pClose_m4 {
  position: absolute;
  top: -14%;
  right: 0;
  font-size: 30px;
  color: #707070;
  cursor: pointer;
}

/* 팝업 영상 인풋 크기 조정 */
.pop_in_m, .pop_in_m1, .pop_in_m2, .pop_in_m3, .pop_in_m4 {
  display: block;
  left: 0;
  margin-left: 0;
  width: 100%;
  max-width: 400px;             /* 최대 너비 400px */
  display: none;                /* 기본적으로 숨김 */
}

/* 팝업 비디오 레이어 */
.cf_vod {
  position: relative;
  margin-top: 7%;               /* 영상 위 여백 */
}

/* 팝업 비디오 표시 (PC버전) */
.onAir {
  position: absolute;
  top: -13%;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  display: block;
}

.onAir img {
  width: 100%;
}

/* 반응형 디자인: 1000px 이하 화면 */
@media only screen and (max-width: 1000px) {
  .pop_vod {
    width: 96%;                 /* 모바일에서는 96%로 설정 */
    left: 2%;
    margin-left: 0;
  }

  .pClose, .pop_vod .pClose {
    top: -10%;
    right: 1%;
    font-size: 4rem;            /* 닫기 버튼 크기 */
  }
}

/* 반응형 디자인: 800px 이하 화면 */
@media only screen and (max-width: 800px) {
  .onAir {
    width: 150px;
    margin-left: -75px;
    top: -6%;
  }

  .pClose, .pop_vod .pClose {
    top: -12%;
    right: 5px;
    font-size: 4rem;            /* 닫기 버튼 크기 */
  }
}

/* 반응형 디자인: 480px 이하 화면 */
@media only screen and (max-width: 480px) {
  .copyright-section {
    padding: 20px 0 80px;
  }

  .pClose1, .pClose2, .pClose3, .pClose4, .pClose, .pop_vod .pClose {
    top: -20%;
    right: 2%;
    font-size: 40px;
  }

  .onAir {
    width: 100px;
    margin-left: -50px;
    top: -15%;
  }
}

.swiper-slide{
	background-color: #f3f0fd!important;
	
}


#owl-demo .item {
  margin: 15px!important;
}
	
/* ================== 공통 (PC 기본) ================== */
#c_box01 {
  display: flex;
  flex-wrap: wrap;
  width: 1100px;
  gap: 20px;
}

#c_box01 .c_box {
  padding-top: 30px;
  padding-bottom: 20px;
  background-color: rgba(31, 28, 59, 0.8); /* 기본 색에 투명도 0.8 */
  border-radius: 20px !important;
  flex: 1 1 auto;
  width: 450px;
  height: 200px;
  text-align: center;
}

/* 숫자 텍스트 공통 스타일 (이미 사용 중인 클래스 활용) */
.text-white {
  color: #ffffff;
}

/* 제목 숫자(년 / 만+ / %) 크기 */
.typo-h0 {
  font-size: 60px;
  line-height: 88px;
  font-weight: 700;
}



.winter04 {
  width: 100%;
  position: relative;
  background-color: #ffffff;
}

.counter-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	height: 800px;
}

.counter-wrapper {
  font-size: 72px;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.count-text {
  position: absolute;
  top: 40%; /* 수치 위로 텍스트 위치 이동 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  font-weight: 500;
  color: #1d1d1d;
  z-index: 3; /* 텍스트가 이미지 위에 오도록 */
}

.counter-number {
  font-family: 'Roboto';
  color: #efefef;
  font-size: 700px;
  font-weight: bold;
  position: relative;
  z-index: 1; /* 수치가 텍스트와 이미지 위로 오도록 */
}

.counter-image {
  position: absolute;
  top:  47%; /* 이미지가 수치 위로 위치하도록 */
  left: 50%;
  transform: translateX(-50%);
  max-width: 701px;
  z-index: 2; /* 이미지가 텍스트와 수치보다 아래로 가도록 */
}

.counter-plus {
  position: absolute;
  top: 20%; /* 수치 위로 + 기호 위치 조정 */
  left: 105%;  /* 수치의 오른쪽에 위치 */
  font-size: 160px;
  color: #efefef; /* 색상은 필요에 맞게 조정 */
  font-weight: 800;
  transform: translateX(-50%);
  z-index: 4; /* + 기호가 수치보다 위에 오도록 */
}


.winter05 {
    width: 100%;
    position: relative;
    background: url("../img/ess/count_back.png") 
                center center / cover no-repeat;
}
@media only screen and (max-width: 480px) {
	
	.winter05 {
    background: url("../img/ess/count_back_m.png") 
                center center / cover no-repeat;
}
	
}


.gradient-text {
    background: linear-gradient(315deg, #8e85ff 40%, #f9a3cd 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ================== 테블릿 / 폴더폰 (481px ~ 767px) ================== */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  #c_box01 {
    width: 90%;
    margin-left: 40px;
  }

  #c_box01 .c_box {
    border-radius: 10px !important;
    width: 50%;
    height: 160px;
  }

  .text-white {
    font-size: 20px;
  }

  .typo-h0 {
    font-size: 40px;
    line-height: 68px;
  }
}

/* ================== 모바일 (480px 이하) ================== */
@media only screen and (max-width: 480px) {
  #c_box01 {
    width: 90%;
    margin-left: 20px;
  }

  #c_box01 .c_box {
    border-radius: 10px !important;
    width: 50%;
    height: 150px;
  }

  .text-white {
    font-size: 20px;
  }

  .typo-h0 {
    font-size: 40px;
    line-height: 68px;
  }
}



.winter06 {
  width: 100%;
  position: relative;
  background-color: #FFFFFF;
    }

    .video-container {
        position: relative;
        width: 100%;
        max-width: 800px;  /* PC에서 최대 가로 800px */
        height: 450px;
        background: #000;
		margin: auto;
    }

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;  /* 가로는 부모 요소에 맞게 크기 조정 */
        height: 100%; /* 세로는 부모 요소의 크기에 맞게 자동 조정 */
    }

    /* 모바일에서 비율 조정 */
    @media (max-width: 768px) {
        .video-container {
            max-width: 90%;  /* 모바일에서는 100%로 가로 크기 설정 */
             height: 230px;
        }
}