@charset "UTF-8";

/*hidden*/
.hidden { position:absolute; left:-9999px; font-size:1px; width:1px; height:1px; line-height:0; }

/*스킵메뉴*/
#skip_menu { width:300px; position:absolute; z-index:9999;}
#skip_menu a { position:absolute; top:-100px;}
#skip_menu a:hover,
#skip_menu a:active,
#skip_menu a:focus { position:absolute; top:0; width:300px; height:20px; display:block; background:#333; color:#fff; text-align:center; font-size:16px; font-weight:bold;}


.inner {max-width: var(--inner); margin: 0 auto;}

/* intro */
.intro {position: relative; height: 100vh; overflow: hidden; width:100%}
.intro .volume {position: absolute; left: 2em; top: 2em; z-index: 9; background: var(--color-main); color: #fff; padding: 1em; display: flex; font-weight: 500; gap: 8px; border-radius: 30px; cursor: pointer;transition:1s linear}
.intro .volume img {width: 24px;}
.intro video {position: absolute; width: 100%; height: 100%; object-fit: cover;}
.intro .btn-box {position: absolute; right: 12rem ;bottom: 13rem; z-index: 999;}
.intro .btn-box .btn {border: 1px solid #ddd; transition:1s linear}
.intro.intro--on {

}
.intro .pre-quick { font-family: 'G-Market-Sans'; display: flex; flex-direction: column; align-items: center; justify-content: center;border-radius: 20px 0 0 20px; background: rgba(0,0,0,0.5); height: 100%; transition: 0.2s linear; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;color: #fff; font-family: 'G-Market-Sans'; text-align: center; gap: 8px; opacity: 0;}
.mouse {position: fixed; left: 50%; bottom:3%; transform:translateX(-50%); animation: updown 1.5s linear 0s infinite alternate; transition:opacity .3s ease; z-index: 100;} 
.mouse.is-hidden{opacity:0; pointer-events:none}
@keyframes updown {
   0%   { bottom:3% }
   50%  { bottom:3.5% }
   100% { bottom:3% }
}



/* 메인 컨텐츠 공통 */
.section > .title {font-size: 3em; font-family: 'G-Market-Sans'; text-align: center;}
.section > .title .gra {background: linear-gradient(to right,var(--color-main) 0%,#F78067 80%,#FF8B61 99%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;}
.section > .title > .dec {font-size: 20px; font-family: 'Pretendard'; color: #555; margin-bottom: 1em;}
.section {padding:7em 0;}
.section .cont {max-width: var(--inner);margin: 3em auto 0;}


/* section01 */
.section01 .cont ul {display: flex; justify-content: space-between; gap: 2em;}
.section01 .cont ul li {flex: 1;border: 2px solid var(--color-main); border-radius: 30px; background: var(--color-main);}
.section01 .cont ul li a {}
.section01 .cont ul li a .title-box {padding: 2em 0; text-align: center;}
.section01 .cont ul li a .title-box .dec {color: #fff; font-size: 1.125em; margin-bottom: 8px;}
.section01 .cont ul li a .title-box .title {color: #fff; font-family: 'yg-jalnan'; font-size:1.75em;}
.section01 .cont ul li a .img-box {background-color: #fff; border-radius: 28px; padding: 1.5em 7em; box-sizing: border-box; height: 354px}
.section01 .cont ul li a .img-box .btn-wrap {padding-top: 1em; text-align: center;}
.section01 .cont ul li a .img-box .btn-wrap .btn.btn--border {transition: 0.2s linear;}
.section01 .cont ul li a:hover .btn.btn--border{background: var(--color-main); transition: 0.2s linear; color: #fff !important;}

.section01 .cont ul li:nth-child(2) {border-color: #FE7855; background-color: #FE7855;}
.section01 .cont ul li:nth-child(2) .btn.btn--border{border-color: #FE7855; background-color: #fff; color: #fe7855;}
.section01 .cont ul li:nth-child(2) a:hover .btn.btn--border{background: #FE7855; transition: 0.2s linear; color: #fff !important;}
.section01 .cont ul li:nth-child(3) {border-color: #FF9900; background-color: #FF9900;}
.section01 .cont ul li:nth-child(3) a .img-box {padding:2.5em 2em;}
.section01 .cont ul li:nth-child(3) .btn.btn--border{border-color: #FF9900; background-color: #fff; color: #FF9900;}
.section01 .cont ul li:nth-child(3) a:hover .btn.btn--border{background: #FF9900; transition: 0.2s linear; color: #fff !important;}

/* section02 */
.section02 {background: linear-gradient(to right,rgba(240, 84, 59, 0.2) 0%,rgba(254, 120, 85, 0.15) 100%); position: relative; overflow: hidden;}
.section02::after {position: absolute; right: -200px; bottom: 200px; background: url(../img/landing/main-floating02.svg) no-repeat; content: ''; width: 618px; height: 621px; z-index: 1; display: block; z-index: -1; animation: floating-after 6s ease-in-out infinite;}
.section02::before {position: absolute; left: -200px; top: -200px; background: url(../img/landing/main-floating01.svg) no-repeat; content: ''; width: 657px; height: 659px; z-index: -1; display: block; z-index: -1; animation: floating-before 8s ease-in-out infinite alternate;}
.section02 .video-box {position: relative; aspect-ratio: 16 / 9; border-radius: 20px; border: 8px solid #fff; box-sizing: border-box; overflow: hidden; max-width: 1024px; margin: 0 auto;box-shadow: 2px 2px 20px 5px rgba(0, 0, 0, 0.1);}
.section02 .text-box-wrap {width: 100%; overflow: hidden; position: relative; margin-top: 5em; display: flex; gap: 20px;}
.section02 .text-box-wrap .slick-track {padding:20px 0}
.section02 .text-box-wrap .text-list {width: 100% !important}
.section02 .text-box-wrap .text {white-space: nowrap; display: block;background-color: #fff; border-radius: 12px; padding:3em 2.5em 1.5em; position: relative; box-sizing:border-box; height:160px; position:relative}
.section02 .text-box-wrap .text::after {position: absolute; left: 1em; top: 1em; background: url(../img/landing/quotes01.png); width: 33px; height: 24px; content: ''}
.section02 .text-box-wrap .text::before {position: absolute; right: 1em; top: 1em; background: url(../img/landing/quotes02.png); width: 33px; height: 24px; content: ''}
.section02 .text-box-wrap .text .title {font-size: 20px; font-weight: 500; text-align:center}
.section02 .text-box-wrap .text .title .red {color: var(--color-main);}
.section02 .text-box-wrap .text .author {text-align: right; color: #999; padding-top: 1.5em; font-size: 0.875em; position:absolute; bottom:1.5rem; right:1.5rem}

.text-list .text {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: scale(0.9);
  opacity: 0.6;
}

.text-list .slick-center {
  transform: scale(1.05); /* ✅ 중앙 슬라이드 확대 */
  opacity: 1;
}
/*.text-box-wrap .swiper-slide {
  transition: transform 0.3s ease-in-out;
}

.text-box-wrap .swiper-slide.active-slide {
  transform: scale(1.1);
}*/
/*.section02 .text-box-wrap:hover .text {animation-play-state: paused;}
.section02 .text-box-wrap:hover .text-list {animation-play-state: paused;}*/

/*@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}*/

/* ::after용 화려한 애니메이션 */
@keyframes floating-after {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(-10px, -15px) rotate(5deg) scale(1.05); }
  50%  { transform: translate(10px, -30px) rotate(-5deg) scale(1.1); }
  75%  { transform: translate(-5px, -15px) rotate(3deg) scale(1.05); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* ::before용 화려한 애니메이션 */
@keyframes floating-before {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  20%  { transform: translate(15px, -10px) rotate(-3deg) scale(1.02); }
  40%  { transform: translate(-10px, -20px) rotate(4deg) scale(1.05); }
  60%  { transform: translate(10px, -15px) rotate(-2deg) scale(1.03); }
  80%  { transform: translate(-5px, -25px) rotate(5deg) scale(1.08); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}


@media (min-width: 1024px) {
	.section03 .cont {margin-top: calc(3em - 20px);}
}


@media (max-width:1440px) {
	:root {
    --inner:92%;
	}

	.section > .title {font-size: 2.75em;}
	.section01 .cont ul li a .title-box .title {font-size: 1.5em;}
	.section01 .cont ul li:nth-child(1) .img-box img, .section01 .cont ul li:nth-child(2) .img-box img {max-width: 160px;}
	.section01 .cont ul li:nth-child(3) a .img-box {padding: 1.5em 0;}
	.section01 .cont ul li:nth-child(3) .img-box img {max-width: 300px;}
	.section01 .cont ul li a .img-box {padding: 1.5em; text-align: center; height: 300px;}
	.section01 .cont ul li a .img-box img {width: 100%;}
}
@media (max-width:1024px) {
	body {font-size: 14px;}

	.intro .btn-box {left: 50%; transform: translateX(-50%); right: auto;}

	.section {padding: 5.5em 0;}
	.section > .title {font-size: 2.25em; max-width: 96%; margin: 0 auto;}
	.section > .title > .dec {font-size: 16px;}
	.section .cont {margin-top: 2em;}
	.section01 .cont ul {flex-direction: column;}
	.section01 .cont ul li {flex: none; width: 100%;}
	.section01 .cont ul li a .img-box {height: auto; text-align: center; padding: 1.5em;}
	.section01 .cont ul li:nth-child(1) a .img-box img, .section01 .cont ul li:nth-child(2) a .img-box img {max-width:200px}
	.section01 .cont ul li:nth-child(3) a .img-box img {max-width: 500px;}

	.section02::before {background-size:cover; width:328px; height:329px; left:-100px; top:-100px;}
	.section02::after {background-size:cover; width:262px; height:270px; right:-100px; bottom:100px;}
	.section02 .text-box-wrap .text::after, .section02 .text-box-wrap .text::before{background-size:cover; width:24px;height:17px;}

	.section02 .text-box-wrap {margin-top: 2.5em;}
	.section02 .text-box-wrap .text {height:126px; padding:2em 1em 1em}
	.section02 .text-box-wrap .text .author {right:1em; bottom:1em}
	.section02 .text-box-wrap .text .title {font-size: 16px;}
	.section02 .text-box-wrap .text-list {gap: 10px;}


	
}
@media (max-width:768px) {
.section > .title .m-br {display: block;}
.section01 .cont ul li a .title-box {padding: 1.5em 0;}
}

@media (max-width:480px) {
	.section > .title {font-size: 1.75em;}

.section02 .text-box-wrap {margin-top: 1.5em;} 
	.section02 .text-box-wrap .text {height:116px;}
	.section02 .text-box-wrap .text .title {font-size:15px}
	
	.section {padding: 4.5em 0;}

	.section > .title > .dec {font-size:15px}


}