@charset "utf-8";

@media (max-width: 1600px) {
	#header nav ul {gap: 40px;}
	#header nav ul li a {font-size: 18px;}

	.btn-scroll {left: 15px;}

	.section-about .title {max-width: 585px; padding-left: 0;}
	.section-about .desc p .pc-only {display: none;}

	.section-stats .desc {max-width: 340px;}

	.section-contact .sns-items {margin: 0 -30px;}
	.section-contact .sns-item {gap: 20px; padding: 0 30px;}

	.quick-menu {right: 15px;}
}

@media (max-width: 1200px) {
	#header nav ul {gap: 30px;}
	#header nav ul li a {font-size: 16px;}

	.section-about .content-wrap {flex-direction: column; justify-content: center;}

	.section-stats .content-wrap {flex-direction: column; justify-content: center;}
	.section-stats .title {max-width: 835px;}
	.section-stats .desc {max-width: 835px; flex-direction: row; flex-wrap: wrap;}
	.section-stats .desc .item {width: calc(50% - 30px);}

	.section-contact .content-wrap {flex-direction: column; justify-content: center; gap: 80px;}
	.section-contact .title {max-width: none; text-align: center;}
	.section-contact .title p .pc-only {display: none;}
	.section-contact .sns-thumb {margin-bottom: 40px; gap: 60px;}
}

@media (max-width: 1024px) {
	#header {height: 80px;}
	#header .logo img {width: 70px;}
	#header nav {display:none;}

	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell, .fp-scrollable {height: auto !important;}

	.fp-section.fp-table.section-hero {height: 100vh !important;}

	.section-about {padding: 150px 0 120px;}
	.section-about .title h2 {font-size: 44px; margin-bottom: 2px;}
	.section-about .title h2 .color-yellow {font-size: 49px;}
	.section-about .title p {font-size: 26px;}
	.section-about .desc {max-width: 835px;gap: 24px;}
	.section-about .desc p {font-size: 20px;}
	.section-about .desc .font-small {font-size: 18px;}

	.section-tech {padding: 120px 0;}
	.section-tech .bg-text {font-size: 112px;}
	.section-tech .items {flex-direction: column;}
	.section-tech .item {min-height: auto;}
	.section-tech .backdrop {background-size: cover;}
	.section-tech .text-box {padding: 44px 30px; gap: 50px;}
	.section-tech .text-box .title {font-size: 24px;}
	.section-tech .text-box .keyword {display: none;}
	.section-tech .text-box .desc {height: auto; opacity: 1; font-size: 16px;}
	.section-tech .text-box .desc b {font-size: 20px;}
	.section-tech .text-box .watermark {opacity: 1; font-size: 16px;}
	.section-tech .item:hover {flex: 1;}
	.section-tech .item:hover .backdrop {transform: scale(1.05);}
	.section-tech .item:hover .text-box {padding: 44px 30px;}
	.section-tech .item:hover .text-box .title {font-size: 24px;}
	.section-tech .item:hover .text-box .keyword {opacity: 0;}
	.section-tech .item:hover .text-box .desc {opacity: 1; transform: translateY(0);}
	.section-tech .item:hover .text-box .watermark {opacity: 1;}

	.on.section-tech .item:nth-child(1) {animation: odd-box-up 1s both 0.4s;}
	.on.section-tech .item:nth-child(2) {animation: odd-box-up 1s both 0.6s;}
	.on.section-tech .item:nth-child(3) {animation: odd-box-up 1s both 0.8s;}
	.on.section-tech .item:nth-child(4) {animation: odd-box-up 1s both 1s;}

	.section-stats {padding: 120px 0;}
	.section-stats .title h2 {font-size: 50px; margin-bottom: 25px;}
	.section-stats .title h2 .color-yellow {font-size: 45px; padding-left: 80px;}
	.section-stats .title p {font-size: 20px;}
	.section-stats .title p .pc-only {display: none;}
	.section-stats .desc {gap: 40px;}
	.section-stats .item-num {font-size: 40px; margin-bottom: 7px;}
	.section-stats .item-title {font-size: 16px;}
	
	.section-contact .video-wrap:before {top: -1px; height: calc(100% + 5px);}
	.section-contact .inquiry {height: auto; padding: 150px 0 120px;}
	.section-contact .title h2 {font-size: 50px; margin-bottom: 25px;}
	.section-contact .title h2 .color-yellow {padding-left: 195px;}
	.section-contact .title p {font-size: 18px;}
	.section-contact .sns-thumb {gap: 40px; margin-bottom: 40px;}
	.section-contact .sns-thumb .sub-title {font-size: 18px;}
	.section-contact .sns-thumb h3 {font-size: 30px;}
	.section-contact .sns-item:after {height: 28px;}
	.section-contact .sns-item .btn img {width: 44px;}
	.section-contact .sns-item .text p {font-size: 24px;}

	#footer .info {font-size: 15px;}
	#footer .logo img {width: 150px;}
}

@media (max-width: 768px) {
	#header {height: 80px;}
	#header .logo img {width: 74px;}

	.section-about {padding: 100px 0 80px;}
	.section-about .title {max-width: 420px;}
	.section-about .title h2 {font-size: 30px;}
	.section-about .title h2 .color-yellow {font-size: 34px;}
	.section-about .title p {font-size: 20px;}
	.section-about .desc {gap: 15px;}
	.section-about .desc p {font-size: 16px;}
	.section-about .desc .font-small {font-size: 15px;}

	.section-tech {padding: 80px 0;}
	.section-tech .bg-text {bottom: 0; font-size: 85px;}
	.section-tech .text-box {padding: 44px 20px; gap: 50px;}
	.section-tech .text-box .title {font-size: 20px;}
	.section-tech .text-box .desc {font-size: 15px;}
	.section-tech .text-box .desc b {font-size: 16px;}
	.section-tech .text-box .watermark {font-size: 15px;}
	.section-tech .item:hover .text-box {padding: 44px 20px;}
	.section-tech .item:hover .text-box .title {font-size: 20px;}

	.section-stats {padding: 100px 0;}
	.section-stats .title h2 {font-size: 30px; margin-bottom: 25px;}
	.section-stats .title h2 .color-yellow {font-size: 34px; padding-left: 0;}
	.section-stats .title p {font-size: 16px;}
	.section-stats .desc {gap: 30px;}
	.section-stats .item-num {font-size: 30px; margin-bottom: 7px;}
	.section-stats .item-title {font-size: 15px;}
	
	.section-contact .inquiry {padding: 100px 0 80px;}
	.section-contact .title h2 {font-size: 34px;}
	.section-contact .title h2 .color-yellow {padding-left: 0;}
	.section-contact .title p {font-size: 15px;}
	.section-contact .sns-thumb {gap: 30px; margin-bottom: 40px;}
	.section-contact .sns-thumb .sub-title {font-size: 15px;}
	.section-contact .sns-thumb h3 {font-size: 24px;}
	.section-contact .sns-thumb .btn img {width: 64px;}
	.section-contact .sns-items {margin: 0 -20px;}
	.section-contact .sns-item {padding: 0 20px;}
	.section-contact .sns-item .btn img {width: 36px;}
	.section-contact .sns-item .text p {font-size: 18px;}
}

@media (max-width: 480px) {
	.section-about .title {max-width: none;}

	.section-stats .desc .item {width: 100%;}

	.section-contact .title p .mob-only {display: block;}
	.section-contact .sns-items {margin: 0 -10px;}
	.section-contact .sns-item {padding: 0 10px;}
	.section-contact .sns-item .btn img {width: 40px;}
	.section-contact .sns-item:after {display: none;}
	.section-contact .sns-item .text {display: none;}
}