@charset "utf-8";

@media (max-width: 1600px) {
	.sec1 .tit {padding-right: 100px;}
	.sec1 .more-btn a {left: 15px;}
	
	.sec2 .panel .item.rev a {padding-left: 50px;}
	.sec2 .slide-wrap {margin-left: 15px;}
	.sec2 .slide-wrap .controls {left: 0px; justify-content: center;}
	
	.sec4 .vyond {margin-left: 15px;}
	
	.sec4 .marquee p {font-size: 120px;}
}

@media (max-width: 1400px) {
	.sec1 .more-btn a {left: 170px; top: -230px; transform: rotate(-90deg);}
	
	.sec2 .panel .item .img {max-width: 750px; width: 100%;}
	.sec2 .panel .item a {padding-right: 170px; font-size: 28px;}
	.sec2 .panel .item.rev a {padding-left: 0;}
	.sec2 .panel .item a::after {width: 150px; background-size: 150px auto;}
	
	.sec3 .soma-wrap .soma-nav {display: none;}
	
	.sec4 .vyond {padding: 0 15px; margin-left: 0; border: 0;}
	.sec4 .vyond .inner {min-height: auto; border-bottom: 1px solid #9b7970; border-top: 1px solid #9b7970;}
}

@media (max-width: 1200px) {
	.sec1 .tit {padding-right: 0px;}
	
	.sec2 .panel .item .img {max-width: 600px;}
	.sec2 .slide-wrap {padding-right: 0; margin-right: 15px;}
	
	.sec4 .marquee p {font-size: 80px;}
}

@media (max-width: 1024px) {
	.sec1 .tit h2 {font-size: 50px;}
	.sec1 .tit h2 > strong {font-size: 70px;}
	.sec1 .tit span {font-size: 24px; text-align: left;}
	
	.section-header h2 {font-size: 80px;}
	
	.sec4 .vyond .inner {gap: 30px;}
}

@media (max-width: 768px) {
	.sec1 {padding-top: 300px;}
	.sec1 .tit h2 {font-size: 40px;}
	.sec1 .tit h2 > strong {display: block; font-size: 60px;}
	.sec1 .more-btn a {font-size: 28px;}
	
	.section-header h2 {font-size: 60px;}
	.section-header p {font-size: 20px;}
	
	.sec2 .panel {margin-top: 60px;}
	.sec2 .panel .item {gap: 30px; flex-wrap: wrap;}
	.sec2 .panel .item ~ .item {margin-top: 60px;}
	.sec2 .panel .item .img {max-width: 100%;}
	.sec2 .panel .item a {margin:0 auto; font-size: 24px;}
	
	.sec2 .slide-wrap {margin-top: 100px;}
	.sec2 .slide-wrap .controls .panel-paging {font-size: 18px;}
	.sec2 .slide-wrap .controls .line {max-width: 280px;}
	
	.sec2 .slide-wrap .panel-slide .swiper-slide .over p {font-size: 18px;}
	
	.sec3 {padding-top: 200px;}
	.sec3 .soma-wrap .soma-paging {margin-top: 30px;}
	.sec3 .soma-wrap .soma-paging > span {width: 15px; height: 15px;}
	.sec3 .soma-wrap .soma-paging {gap: 15px;}
	
	.sec3 .video {margin-top: 120px;}
	.sec3 .video::before {padding-bottom: 55.67%;}
	
	.sec4 {padding-top: 120px;}
	.sec4 .section-header {padding-right: 0;}
	.sec4 .vyond {margin-top: 60px;}
	.sec4 .vyond .inner {gap: 15px;}
	
	.sec4 .marquee {padding: 120px 0;}
	.sec4 .marquee p {font-size: 55px;}
	.sec4 .marquee p ~ p {margin-top: 15px;}
}

@media (max-width: 480px) {
	.sec1 {padding-top: 200px;}
	.sec1 .tit span {font-size: 20px;}
	.sec1 .tit h2 {font-size: 32px; margin-top: 10px;}
	.sec1 .tit h2 > strong {font-size: 50px;}
	
	.section-header h2 {font-size: 45px;}
	.section-header p {font-size: 18px;}
	.sec2 .slide-wrap .controls .line {max-width: 150px;}
	.sec2 .slide-wrap .controls .panel-paging {margin-right: 10px;}
	
	.sec4 .marquee p {font-size: 40px;}
}