/* 코딩페이지 추가건 2025-07-15 */

.padding-top-200 {
    padding-top: 200px;
}

.padding-top-240{padding-top:240px;}
.padding-top-140{padding-top:140px;}
.margin-top-150 { margin-top:150px;}
.margin-top-50 { margin-top:50px;}

.kcpa_bg01 {
	 width: 100%;
    position: relative;
    background-color: #d1ecfe;
    z-index: 9;
    background-image: url("../image/kcpa/kcpa_back.png");
    background-repeat: no-repeat;
    background-position: right -30px top 100px; /* ★ 상단 기준 + 자연스러운 오프셋 */
    background-size: auto;
    overflow: visible;
}

.kcpa_bg01 .container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.kcpa-visual {
	display: flex;
    align-items: center;      /* 세로 가운데 정렬 */
    justify-content: center;  /* 전체를 가운데로 */
    position: relative;
}

.kcpa-title{
	color: #456af8;
    font-size: 60px;
	font-weight: 600;
}

.kcpa_bubble {
    margin-top: 20px; /* 숫자만 조정하면 됨 */
	margin-left:30px;
}

.kcpa-desc{
	color: #456af8;
	font-size: 18px;	
	margin-top: 30px;
	margin-bottom: 30px;
}
.kcpa-left {
	flex: 0 0 420px;      /* 텍스트 영역 넓이 (대략) */
    position: relative;
    z-index: 5;
    margin-right: -80px;  /* ★ 사람 쪽으로 겹치게 밀어넣기 */
    text-align: left;
}

.kcpa-right {
   flex: 0 0 895px;   /* ★ 여자+파란원 이미지 실제 너비 */
    position: relative;
    text-align: right;
    z-index: 3;
    flex-shrink: 0;    /* 크기 줄어들지 않게 */
}

/* 사람 이미지 (기본 사진) */
.kcpa_girl {
    display: block;
    width: 895px;      /* 원본 사이즈 유지 */
    max-width: none;   /* bootstrap 영향 제거 */
    height: auto;
    margin-left: auto; /* 오른쪽 끝으로 붙이기 */
}

.kcpa-btn {
    border-radius: 50px!important;
	padding-left: 20px;
	padding-right: 20px;
    border: 0;
    background-color: #456af8;
    font-size: 20px;
    color: #ffffff;
}

 .kcpa-btn:hover {
        background-color: #ffffff;
		color: #f8786b;
      }

/* 모든 데코 이미지 공통 */
.kcpa_deco {
  position: absolute;
  z-index: 20;  /* 사람 이미지보다 위 */
  pointer-events: none;
	
	 width: auto;      /* 강제 크기 제거 */
    height: auto;     /* 원본 유지 */
    max-width: none;  /* Bootstrap 영향 제거 */
}

/* 학사모 */
.kcpa_03 {
	top: -100px;
	right: 150px;
	opacity: 0;  /* 처음에는 안 보이게 */
  animation: hatDrop 1.2s ease-out 0.8s forwards; 
  /* 1.2초 동안, 0.8초 뒤에 시작, 한 번만 실행(forwards로 마지막 상태 유지) */
}

/* 흰별 */
.kcpa_06 {
	top: -140px;
	right: 160px;
	opacity: 0;  /* 처음에는 안 보이게 */
  animation: starBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 반짝임 */
}

@keyframes hatDrop {
  0% {
    opacity: 0;
    transform: translateY(-60px); /* 더 위에서 시작 */
  }
  60% {
    opacity: 1;
    transform: translateY(10px);  /* 살짝 튕기는 느낌 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 전구 */
.kcpa_04 {
    top: 120px;
    left: 860px;
    position: absolute;  /* 절대 위치 설정 */
    animation: bulbBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 깜빡이는 애니메이션 */
}

/* 크기 변화 애니메이션 (작아졌다가 커지는 모션) */
@keyframes bulbBlink {
    0%   { transform: scale(1); }     /* 원래 크기 */
    50%  { transform: scale(0.9); }   /* 살짝 작아짐 */
    100% { transform: scale(1); }     /* 원래 크기로 돌아옴 */
}

.kcpa-plane-orbit {
    position: absolute;
    top: 500px;   /* ★ 아이 중앙에 맞춰 조정해야 하는 값 */
    left: 500px;  /* ★ 이것도 맞춰줘야 함 */
    width: 0;
    height: 0;

       /* 회전 + 투명도 애니메이션 동시 적용 */
    animation: planeOrbit 12s linear infinite,
               planeFadeInOut 12s ease-in-out infinite;
}



/* 비행기 */
.kcpa_05 {	
	transform-origin: center center;
    transform: translateX(420px) rotate(0deg);
    /* 160px = 궤도 반지름 (비행기와 아이 사이 거리) */
}

@keyframes planeOrbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* 서서히 나타났다 → 있다가 → 서서히 사라지는 패턴 */
@keyframes planeFadeInOut {
    0% {
        opacity: 0;     /* 완전 투명 */
    }
    20% {
        opacity: 1;     /* 서서히 나타나서 100% */
    }
    70% {
        opacity: 1;     /* 한동안 완전히 보이는 상태 유지 */
    }
    100% {
        opacity: 0;     /* 다시 서서히 사라짐 → 다음 사이클 준비 */
    }
}

/* 별(손가락) */
.kcpa_07 {
	top: 8px;
	right: 670px;
	animation: starFloat 2s ease-in-out infinite,
             starBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 반짝임 */
}

/* 반짝일 때 크기 변화와 투명도 */
@keyframes starBlink {
  0%   { opacity: 0.4; transform: scale(0.5); } /* 작게 시작 */
  50%  { opacity: 1; transform: scale(1); } /* 크게 확대 */
  100% { opacity: 0.4; transform: scale(0.5); } /* 다시 작아짐 */
}

/* 둥둥 떠다니는 효과 */
@keyframes starFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); } /* 위로 6px 부드럽게 */
  100% { transform: translateY(0); }
}


/* 돋보기 */
.kcpa_08 {
	top: 500px;
	left: 700px;
	width: auto;
  height: auto;
animation: drawOnlyReverse 5.5s ease-in-out infinite;
  transform-origin: center center;
	
}


/* 아래에서 위로 그려지고 → 멈춘 후 반복 */
@keyframes drawOnlyReverse {

  /* 시작: 완전 감춤 (아래에서 위로 그릴 준비) */
  0% {
    clip-path: inset(0 0 100% 0); /* 아래 빼고 다 가림 */
    transform: translateX(0) rotate(0deg);
  }

  /* 그려지는 중간 구간 (아래 → 중간) */
  20% {
    clip-path: inset(0 0 75% 0);
    transform: translateX(1px) rotate(1deg);
  }

  40% {
    clip-path: inset(0 0 40% 0);
    transform: translateX(-1px) rotate(-1deg);
  }

  /* 완성 */
  60% { 
    clip-path: inset(0 0 0 0);
    transform: translateX(0.5px) rotate(0.5deg);
  }

  /* 완성된 상태 유지 (멈추는 구간) */
  80% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0) rotate(0deg);
  }

  /* 다시 아래에서부터 시작하는 상태로 리셋 */
  100% {
    clip-path: inset(0 0 100% 0);
    transform: translateX(0) rotate(0deg);
  }
}


/* 연필+구름 */
.kcpa_11 {
	top: 800px;
	left: 180px;}



/* 말풍선+별 */
.kcpa_12 {
	top: 180px;
	left: -420px;
	animation: bubbleFloat 1.8s ease-in-out infinite;
    transform-origin: center center;
}

/* 둥둥 움직임 (위아래로 천천히 떠다님) */
@keyframes bubbleFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); } /* 위로 8px 떠오르기 */
    100% { transform: translateY(0); }    /* 다시 원래 위치로 돌아옴 */
}


/* 흰전구 */
.kcpa_13 {
    top: 650px;
    left: 90px;
    position: absolute; /* 이미지의 위치를 절대적으로 설정 */
    animation: bulbBlink1 2.5s ease-in-out infinite; /* 애니메이션 설정 */
    z-index: 1;  /* 다른 요소들보다 위에 표시되도록 */
}

/* 색깔 변환 애니메이션 */
@keyframes bulbBlink1 {
    0%   { filter: brightness(1) sepia(0) saturate(1) hue-rotate(0deg); }   /* 흰색 */
    50%  { filter: brightness(1) sepia(1) saturate(30) hue-rotate(0deg); }  /* 노란색 */
    100% { filter: brightness(1) sepia(0) saturate(1) hue-rotate(0deg); }   /* 흰색 */
}

/* 얼굴 해 */
.kcpa_14 {
	top: 180px;
	left: 520px;
}

@keyframes spin-reverse-fade {
  0% {
    transform: rotate(0deg);
    opacity: 0.4;
  }
  25% {
    transform: rotate(-90deg); /* 시계 반대 방향 */
    opacity: 1;
  }
  50% {
    transform: rotate(-180deg);
    opacity: 0.6;
  }
  75% {
    transform: rotate(-270deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-360deg);
    opacity: 0.4;
  }
}

.spin-reverse-fade {
  animation: spin-reverse-fade 8s linear infinite;
  animation-delay: 1.2s;  /* kcpa_05와 시간차 */
  transform-origin: center center; 
}


/* 손가락 옆 책 */
.kcpa_16 {
	top: -30px;
	left: -90px;
	/* 3가지 애니메이션 동시 실행 */
   animation: floatY 1.0s ease-in-out infinite,
               floatX 2.0s ease-in-out infinite,/* 좌우 흔들림을 더 빠르게 */
               tiltRotate 1.0s ease-in-out infinite;
    transform-origin: center center;
}

/* 위아래 크게 떠다니기 */
@keyframes floatY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-250px); }  /* 떠오르는 높이 */
    100% { transform: translateY(0); }
}

/* 좌우로 부드럽게 흔들리기 */
@keyframes floatX {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(50px); }  /* 좌우 흔들림 폭 */
    100% { transform: translateX(0); }
}

/* 살짝 회전(tilt) */
@keyframes tiltRotate {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(8deg); }  /* 살짝 기울어짐 */
    100% { transform: rotate(0deg); }
}




@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
	.img-fluid {
    max-width: 100%;
    height: auto;
}
	
}