@charset "utf-8";

.section-hero {position: relative;}
.section-hero video {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: translate(-50%, -50%);}

.btn-scroll {position: absolute; bottom: 40px; left: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 20px; height: 120px; z-index: 50; cursor: pointer;}
.btn-scroll .text {width: 21px; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5em; letter-spacing: 1.4px; transform: rotate(90deg); color: #fff;}
.btn-scroll .arrow {width: 16px; height: 43px; background: url('../img/main/icon-scroll-down.png') no-repeat center center; animation: scroll 1.6s linear infinite;}

@keyframes scroll {
	0% { transform:translateY(0);}
	50% { transform:translateY(10px);}
	100% {transform:translateY(0);}
}

.section-about {background: url('../img/main/section-about-bg.jpg') no-repeat center center / cover;}
#main .section-about .container {max-width: 1690px;}
.section-about .content-wrap {display: flex; justify-content: space-between; align-items: center; gap: 60px; height: 100%;}
.section-about .title {max-width: 685px; width: 100%; padding-left: 97px;}
.section-about .title h2 {font-family: "Speed"; font-size: 44px; font-weight: 400; line-height: 1.3em; letter-spacing: 2.4px; color: #fff; margin-bottom: 6px;}
.section-about .title h2 span {display: block; opacity: 0;}
.section-about .title h2 .color-yellow {font-size: 49px; color: #FFC000;}
.section-about .title h2 .color-white {text-align: right;}
.section-about .title p {font-size: 32px; line-height: 1.6em; color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); text-align: right; opacity: 0;}
.section-about .desc {max-width: 835px; width: 100%; display: flex; flex-direction: column; gap: 24px;}
.section-about .desc p {font-size: 24px; font-weight: 600; line-height: 1.8em; color: #fff; opacity: 0;}
.section-about .desc .font-small {font-size: 22px;}

.on.section-about .title h2 .color-yellow {animation: text-right 1.2s both 0.6s;}
.on.section-about .title h2 .color-white {animation: text-right 1.2s both 0.8s;}
.on.section-about .title p {animation: text-right 1.2s both 1s;}
.on.section-about .desc p:nth-child(1) {animation: text-up 1.2s both 1.6s;}
.on.section-about .desc p:nth-child(2) {animation: text-up 1.2s both 1.8s;}
.on.section-about .desc p:nth-child(3) {animation: text-up 1.2s both 2s}

.section-tech {position: relative; background: #0D0D0D;}
#main .section-tech .container {max-width: 1610px;}
.section-tech .content-wrap {position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; height: 100%;}
.section-tech .bg-text {position: absolute; bottom: 20px;  display: flex; width: max-content; font-family: "Speed"; font-size: 200px; font-weight: 400; line-height: normal; color: #fff; opacity: 0.06; animation: flowText 40s linear infinite; white-space: nowrap;}
.section-tech .items {display: flex; width: 100%;}
.section-tech .item {position: relative; flex: 1; min-height: 600px; transition: all 0.5s; overflow: hidden; opacity: 0;}
.section-tech .inner {height: 100%;}
.section-tech .backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; transition: all 0.6s;}
.section-tech .item:nth-child(1) .backdrop {background-image: url('../img/main/section-tech-item01.jpg');}
.section-tech .item:nth-child(2) .backdrop {background-image: url('../img/main/section-tech-item02.jpg');}
.section-tech .item:nth-child(3) .backdrop {background-image: url('../img/main/section-tech-item03.jpg');}
.section-tech .item:nth-child(4) .backdrop {background-image: url('../img/main/section-tech-item04.jpg');}
.section-tech .text-box {position: relative; z-index: 20; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 30px; transition: all 0.6s;}
.section-tech .item:nth-child(even) .text-box {flex-direction: column-reverse;}
.section-tech .text-box .title {font-family: "Speed"; font-size: 28px; font-weight: 400; line-height: 1.1em; margin-bottom: 13px; transition: all 0.6s;}
.section-tech .text-box .title span {display: block;}
.section-tech .text-box .title .color-white {color: #fff;}
.section-tech .text-box .title .color-yellow {color: #FFC000;}
.section-tech .text-box .keyword {opacity: 1; font-size: 20px; font-weight: 700; line-height: 1.5em; color: #fff; transition: all 0.4s;}
.section-tech .text-box .desc {overflow: hidden; height: 0; opacity: 0; font-size: 18px; line-height: 1.6em; color: #fff; transition: all 0.5s; overflow: hidden;}
.section-tech .text-box .desc b {font-size: 24px; font-weight: 700;}
.section-tech .text-box .watermark {opacity: 0; font-family: "Speed"; font-size: 20px; font-weight: 400; line-height: 1em; color: #fff; text-align: right; transition: all 0.6s;}
.section-tech .item:hover {flex: 1.75;}
.section-tech .item:hover .backdrop {transform: scale(1.1);}
.section-tech .item:hover .text-box {padding: 30px 30px;}
.section-tech .item:hover .text-box .title {font-size: 34px;}
.section-tech .item:hover .text-box .keyword {opacity: 0;}
.section-tech .item:hover .text-box .desc {opacity: 1; transform: translateY(-25px); transition-delay: 0.2s;}
.section-tech .item:hover .text-box .watermark {opacity: 1;}

.on.section-tech .item:nth-child(1) {animation: odd-box-up 1s both 0.8s;}
.on.section-tech .item:nth-child(2) {animation: even-box-up 1s both 0.4s;}
.on.section-tech .item:nth-child(3) {animation: odd-box-up 1s both 1s;}
.on.section-tech .item:nth-child(4) {animation: even-box-up 1s both 0.6s;}
@keyframes odd-box-up {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes even-box-up {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }

    100% {
        transform: translateY(30px);
        opacity: 1;
    }
}
@keyframes flowText {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.section-stats {background: url('../img/main/section-stats-bg.jpg') no-repeat center center/cover;}
.section-stats .content-wrap {display: flex; justify-content: space-between; align-items: center; gap: 60px; height: 100%;}
.section-stats .title {max-width: 778px; width: 100%;}
.section-stats .title h2 {font-family: "Speed"; font-size: 60px; font-weight: 400; line-height: 1em; letter-spacing: 2.4px;  margin-bottom: 32px; text-shadow: 0 4px 21px rgba(0, 0, 0, 0.45);}
.section-stats .title h2 span {display: block; opacity: 0;}
.section-stats .title h2 .color-yellow {font-size: 52px; color: #FFC000; padding-left: 80px;}
.section-stats .title h2 .color-white {color: #FFF9E5;}
.section-stats .title p {font-size: 24px; font-weight: 600; line-height: 1.8em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42); opacity: 0;}
.section-stats .desc {max-width: 385px; width: 100%; display: flex; flex-direction: column; gap: 60px;}
.section-stats .item {opacity: 0;}
.section-stats .item-num {font-family: "Speed"; font-size: 44px; font-weight: 400; line-height: 1em; color: #FFF9E5; text-shadow: 0 4px 21px rgba(0, 0, 0, 0.45); margin-bottom: 7px;}
.section-stats .item-title {font-size: 20px; font-weight: 600; line-height: 1.6em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);}

.on.section-stats .title h2 .color-white {animation: text-right 1.2s both 0.6s;}
.on.section-stats .title h2 .color-yellow {animation: text-right 1.2s both 0.8s;}
.on.section-stats .title p {animation: text-right 1.2s both 1s;}
.on.section-stats .item:nth-child(1) {animation: text-up 1.2s both 1.6s;}
.on.section-stats .item:nth-child(2) {animation: text-up 1.2s both 1.8s;}
.on.section-stats .item:nth-child(3) {animation: text-up 1.2s both 2s;}
.on.section-stats .item:nth-child(4) {animation: text-up 1.2s both 2.2s;}

.section-contact {position: relative; background: #000;}
.section-contact .video-wrap:before {z-index: 1; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0.7) 85%, rgba(0, 0, 0, 1) 100%);}	
.section-contact video {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%);}
.section-contact .inquiry {position: relative; z-index: 10; height: calc(100vh - 137px);}
.section-contact .content-wrap {display: flex; justify-content: space-between; align-items: center; gap: 60px; height: 100%;}
.section-contact .title {max-width: 528px; width: 100%;}
.section-contact .title h2 {font-family: "Speed"; font-size: 60px; font-weight: 400; line-height: 1em; letter-spacing: 2.4px;  margin-bottom: 32px; text-shadow: 0 4px 21px rgba(0, 0, 0, 0.45);}
.section-contact .title h2 span {display: block; opacity: 0;}
.section-contact .title h2 .color-yellow {color: #FFC000; padding-left: 195px;}
.section-contact .title h2 .color-white {color: #fff;}
.section-contact .title p {font-size: 22px; font-weight: 600; line-height: 1.6em; color: #fff; opacity: 0;}
.section-contact .title p:not(:last-child) {margin-bottom: 16px;}
.section-contact .title p .mob-only {display: none;}
.section-contact .desc {max-width: 680px; width: 100%;}
.section-contact .sns-thumb {display: flex; justify-content: center; gap: 80px; margin-bottom: 84px; opacity: 0;}
.section-contact .sns-thumb .sub-title {font-size: 22px; font-weight: 600; line-height: 1.8em; color: #fff;}
.section-contact .sns-thumb h3 {font-size: 40px; font-weight: 700; line-height: 1.7em; color: #fff;}
.section-contact .sns-items {display: flex; justify-content: center; margin: 0 -40px;}
.section-contact .sns-item {position: relative; display: flex; align-items: center; gap: 30px; padding: 0 40px; opacity: 0;}
.section-contact .sns-item:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 31px; background: rgba(255, 255, 255, 0.40);}
.section-contact .sns-item:last-child:after {display: none;}
.section-contact .sns-item .text p {position: relative; font-size: 28px; font-weight: 700; line-height: 1.8em; color: #fff; transition: all 0.4s;}
.section-contact .sns-item .text p:before {position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 2px; background: #aaa; transition: all 0.4s;}
.section-contact .sns-item:hover .text p {color: #aaa;}
.section-contact .sns-item:hover .text p:before {width: 100%;}

.on.section-contact .title h2 .color-white {animation: text-right 1.2s both 0.6s;}
.on.section-contact .title h2 .color-yellow {animation: text-right 1.2s both 0.8s;}
.on.section-contact .title p {animation: text-right 1.2s both 1s;}
.on.section-contact .sns-thumb {animation: text-up 1.2s both 1.9s;}
.on.section-contact .sns-item:nth-child(1) {animation: text-up 1.2s both 2s;}
.on.section-contact .sns-item:nth-child(2) {animation: text-up 1.2s both 2.1s;}
.on.section-contact .sns-item:nth-child(3) {animation: text-up 1.2s both 2.2s;}

#footer {position: relative; z-index: 10; padding: 0 0 34px 0;}
#footer .logo img {width: 172px;}
#footer .info {font-size: 16px; line-height: 1.6em; color: rgba(255, 255, 255, 0.70); margin-bottom: 24px;}
#footer .contact-info {display: flex; flex-wrap: wrap; gap: 0 20px;}
#footer dl {display: flex; flex-wrap: wrap;}
#footer dt {position: relative; padding-right: 10px; margin-right: 10px;}
#footer dt:after {position: absolute; top: 8px; right: 0; content: ''; width: 1px; height: 11px; background: rgba(255, 255, 255, 0.40);}

.quick-menu {opacity: 0; position: fixed; bottom: 40px; right: 40px; z-index: 100; transition: all 0.6s;}
.quick-menu ul {display: flex; flex-direction: column; gap: 16px;}
.quick-menu ul li a {width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; transition: all 0.6s;}
.quick-menu ul li.kakao a {background-image: url('../img/layout/quick-menu-kakao.png');}
.quick-menu ul li.youtube a {background-image: url('../img/layout/quick-menu-youtube.png');}
.quick-menu ul li.insta a {background-image: url('../img/layout/quick-menu-insta.png');}
.quick-menu ul li.blog a {background-image: url('../img/layout/quick-menu-blog.png');}
.quick-menu ul li.kakao a:hover {background-image: url('../img/layout/quick-menu-kakao-active.png');}
.quick-menu ul li.youtube a:hover {background-image: url('../img/layout/quick-menu-youtube-active.png');}
.quick-menu ul li.insta a:hover {background-image: url('../img/layout/quick-menu-insta-active.png');}
.quick-menu ul li.blog a:hover {background-image: url('../img/layout/quick-menu-blog-active.png');}

.fp-viewing-ABOUT .quick-menu,
.fp-viewing-WORKS .quick-menu,
.fp-viewing-STATS .quick-menu,
.fp-viewing-CONTACT .quick-menu {opacity: 1;}

@keyframes text-right {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes text-left {
    0% {
        transform: translateX(40px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes text-up {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}