@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');
body,div,ul,li,h1,h2,h3,h6 {margin: 0;padding: 0; font-family: 'Noto Sans KR', sans-serif;}
ul {list-style: none;}
img {display: block;width:100%}
/*CSS 초기화 끝 */   

.contents > li {margin: 0 12.42vw;}
.contents > ul, li{display: flex;flex-direction: column;}
.first {background-image: url("../img/back01.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;height: 100vh;position: relative;}
.first .motion-layer{position: absolute;inset: 0;pointer-events: none;z-index: 3;}
.first .motion-layer2{position: absolute;inset: 0;pointer-events: none;z-index: 1;}
.first .motion-layer h6 {position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.12)); animation: floatY 5.5s ease-in-out infinite;width: 6.25vw;} 
.first .motion-layer2 h6{position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.12)); animation: floatY 5.5s ease-in-out infinite;width: 6.25vw;}    
.first .card01 { top: 45%; left: 29%; animation-delay: .2s; }
.first .card02 { top: 60%; left: 60%; animation-delay: .4s; }
.first .card03 { top: 20%; left: 25%; animation-delay: .10s; }
.first .card04 { top: 30%; left: 32%; animation-delay: .8s; }
.first .card05 { top: 40%; left: 68%; animation-delay: .4s; }

.second {background-image: url("../img/back02.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;height: 100vh;position: relative;}
.second .motion-layer{position: absolute;inset: 0;pointer-events: none;z-index: 2;}
.second .motion-layer h6{position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.12)); animation: floatY 5.5s ease-in-out infinite;width: 6.25vw;}    
.second .appicon1 { top: 50%; left: 8%; animation-delay: .2s; }  /* 왼쪽 카드 옆 */

.third  {background-image: url("../img/back03.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;height: 100vh;position: relative;}
.third .motion-layer{position: absolute;inset: 0;pointer-events: none;z-index: 2;}
.third .motion-layer h6{position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.12)); animation: floatY 5.5s ease-in-out infinite;width: 5vw;}    
.third .icon1 { top: 35%; left: 25%; animation-delay: .2s; }  /* 왼쪽 카드 옆 */
.third .icon2 { top: 40%; left: 70%; animation-delay: .4s; }  /* 오른쪽 카드 상단 좌측 */
.third .icon3 { top: 60%; left: 55%; animation-delay: .8s; }  /* 가운데 폰 우하단 */

.fourth {background-image: url("../img/back04.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;height: 100vh;position: relative;}
.fourth .motion-layer{position: absolute;inset: 0;pointer-events: none;z-index: 2;}
.fourth .motion-layer h6{position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.12)); animation: floatY 5.5s ease-in-out infinite;width: 6.25vw;}    
.fourth .appicon1 { top: 50%; left: 8%; animation-delay: .2s; }  /* 왼쪽 카드 옆 */

.footer {background-color: #2E2E2E;background-size: cover;min-height: 10vh;display:flex;align-items: center;justify-content: center; gap: 1vw; flex-direction: column;position: relative;overflow: hidden;}
.footer::before{content:"";position:absolute; inset:0;background:#fff;transform: scaleX(1);transform-origin: center;transition: transform 1.5s ease-out;}
.footer > *{position: relative;z-index: 1;}
.footer.reveal::before{transform: scaleX(0);}

.footer > .contact {display: flex; gap:5vw;color: #FFFFFF;}
.footer > .contact > p {margin: 0;color: #FFFFFF;}
    
.title-box{width:100%;text-align:center;margin-top: 3.125vw;}
.title-box h1{font-size: 1.04vw; color:#2888FC;margin-bottom: 0.21vw;letter-spacing: -0.06px;font-weight: 600;line-height: 1.6;}
.title-box h2{font-size: 1.67vw; color:#101010;margin-bottom: 0.73vw;letter-spacing: -0.01px;font-weight: 800;line-height: 1.6;}
.title-box h3{font-size: 1.20vw; color:#555555;margin-bottom: 2vw;letter-spacing: -0.07px;font-weight: 400;line-height: 1.6;}

.item{display: flex;justify-content: space-between;align-self: center;gap:5vw;flex-direction: row;align-items: center;}
.toon-box{display: flex;align-items: flex-end;padding-bottom: 2vw;}

/* 떠다니는 효과 */
@keyframes floatY {0%{ transform: translateY(0) } 50%  { transform: translateY(-14px) } 100% { transform: translateY(0) }}

.fade-in {opacity: 0;transform: translateY(60px);transition: opacity 1s ease-out, transform 1s ease-out;}
.fade-in.show {opacity: 1;transform: translateY(0);}

.slide-in-left,.slide-in-right {opacity: 0;transition: opacity .8s ease-out, transform .8s ease-out;will-change: transform, opacity;}
.slide-in-left  { transform: translateX(-80px); }
.slide-in-right { transform: translateX( 80px); }
.slide-in-left.show,.slide-in-right.show {opacity: 1;transform: translateX(0);}

.fade-in.show.tracking-in-expand {animation: tracking-in-expand .7s cubic-bezier(.215,.61,.355,1.000) both;}
  
@keyframes tracking-in-expand {0% { letter-spacing: -.5em; opacity: 0; } 40%  { opacity: .6; }100% { letter-spacing: normal; opacity: 1; }}

.title-box > h1.fade-in { transition-delay: 0s; }
.title-box > h2.fade-in { transition-delay: .2s; }
.title-box > h3.fade-in { transition-delay: .4s; }