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

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

.floating-container {
  position: relative;
  width: 1200px;
  height: 477px;
  margin: auto;
}

.floating-img {
  position: absolute;
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes float1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float3 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float4 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float5 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(0deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}


.float1 {
  animation-name: float1;
  animation-duration: 3.2s;
  animation-delay: 0.1s;
}
.float2 {
  animation-name: float2;
  animation-duration: 4.1s;
  animation-delay: 0.5s;
}
.float3 {
  animation-name: float3;
  animation-duration: 2.8s;
  animation-delay: 0.2s;
}
.float4 {
  animation-name: float4;
  animation-duration: 3.7s;
  animation-delay: 0.4s;
}
.float5 {
  animation-name: float5;
  animation-duration: 5.2s;
  animation-delay: 0.6s;
}


@media (max-width: 768px) {
  .floating-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
	
	 .float1 {
    display: none !important;
  }
	
}

.short_bg01 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
	background-color: #20214b;
	background-size: cover;
}

.short_bg02 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
    background: url("../image/short/top_back.png?v=20250715") no-repeat top #503ebc;
	background-size: cover;
}

@media (max-width: 768px) {
	
.floating-container {
  position: relative;
  width: 100%;
  height: 500px;
  background: url("../image/short/top_back_m.png") no-repeat top #503ebc;
  background-size: cover;
}

	
}

.short_bg03 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
	background-color: #3f47e1;
	background-size: cover;
}

.short_bg04 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
	background-color: #20214b;
	background-size: cover;
}

.short_bg05 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
	background-color: #e7e8ff;
	background-size: cover;
}

.short_bg06 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
    background: url("../image/short/img_05_back.png") no-repeat top #20214b;
	background-size: cover;
}

.short_bg07 {
    width: 100%;
    height: auto;    
    /*padding: 0 0 11% 0;*/
    position: relative;
	background-color: #000000;
	background-size: cover;
}

.mini_popup_quick {
    position: fixed;
    right: 1%;
    top: 30%;
	z-index: 1000;}

.close_mini_quick {
    cursor: pointer;
    position: absolute;
    top: -15px;
    right: 0%;
    padding: 0 0 4px 8px;
    /* border: 1px solid red; */
    font-size: 24px;
    color: #ffffff;
    /* font-weight: bold;*/
	transform: translate(0%, -50%);}

@media all and (max-width: 420px) {
      .mobile-hide {
        display: none;
      }

	
	.mini_popup_quick {
        position: fixed;
        right: -6%;
        top: 70%;
        z-index: 1000;
    }
	
 .mini_popup_quick img {
        width: 70%;
    }
	
	.close_mini_quick {
    cursor: pointer;
    position: absolute;
    top: -10px;
    right: 30%;
    padding: 0 0 4px 8px;
    /* border: 1px solid red; */
    font-size: 22px;
    color: #000000;
    /* font-weight: bold;*/
	transform: translate(0%, -50%);}
	
}

.d_flex{
	
display: flex;	
}

.vertical-box {
  display: flex;
  flex-direction: column; /* 세로로 나열 */
}