	
	
	.home-banner img {
		width: 100%;
	}
	.home-banner .swiper-slide a {
		display: block;
	}
	.home-banner .swiper-pagination{
		bottom: 20px !important;
	}
	.home-banner .navigation-btn {
		opacity: 0;
	}
	.home-banner:hover .navigation-btn {
		opacity: 1;
	}
	.home-banner .banner-content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.home-banner .banner-text.text-light {
		--text-color: #fff;
	}
	.home-banner .banner-text.text-light .btn:hover{
		background: rgba(255,255,255,0.15);
	}
	.home-banner .banner-text {
		--text-color: var(--theme-color);
		color: var(--text-color);
		position: absolute;
		bottom: 4.167vw;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		line-height: 1.3;
	}
	.home-banner .banner-text .title {
		line-height: 1;
		margin-bottom: .625vw;
		font-weight:700;
	}
	.home-banner .banner-text .subtitle{
		font-size:18px;
		font-weight:600;
		margin-bottom:24px;
	}
	
	.home-banner .learn-more {
		border-color: var(--text-color);
	}
	.home-banner .content-left-bottom .banner-text {
		left: 6.25vw;
		transform: translateX(0);
		text-align: left;
	}
	.home-banner .content-left-center .banner-text {
		bottom: auto;
		top: 50%;
		left: 6.25vw;
		transform: translate(0, -50%);
		text-align: left;
	}
	.home-banner .banner-text .title,
	.home-banner .banner-text .subtitle,
	.home-banner .banner-text .learn-more {
		opacity: 0;
		transform: translateY(-60px);
	}
	.home-banner .swiper-slide-active .banner-text .title,
	.home-banner .swiper-slide-active .banner-text .subtitle,
	.home-banner .swiper-slide-active .banner-text .learn-more {
		opacity: 1;
		transform: translateY(0);
	}
	.home-banner .swiper-slide-active .banner-text .title {
		transition: opacity 0.6s linear, transform 0.6s cubic-bezier(.215,.61,.355,1);
	}
	.home-banner .swiper-slide-active .banner-text .subtitle {
		transition: opacity 0.6s linear .1s, transform 0.6s cubic-bezier(.215,.61,.355,1) .1s;
	}
	.home-banner .swiper-slide-active .banner-text .learn-more {
		transition: opacity 0.6s linear .2s, transform 0.6s cubic-bezier(.215,.61,.355,1) .2s;
	}
	.watch-video-btn{
		cursor: pointer;
	}
	.video-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #1D1D1F;
		z-index: 9999;
	}
	.video-modal video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 1200px;
		height: auto;
		max-height: 100%;
	}
	.video-modal .modal-close {
		position: absolute;
		top: 24px;
		right: 24px;
		color: #fff;
		font-size: 24px;
		cursor: pointer;
	}

	.floor2-container {
		width: var(--floor-width);
		margin:0 auto;
		padding-top:var(--floor-padding);
	}
	.floor2-container .title {
		font-weight: 700;
	}
	
	.floor2-container .image-zoom{
		margin:6.25vw 0 0 5.2083vw;
	}
	.floor2-video{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: end;
		margin-top: 1.771vw;
	}
	.floor2-video video{
		width: 100%;
    height: auto;
		margin-top: 1.042vw;
	}
	.floor3-container {
		padding-top:var(--floor-padding);
		padding-bottom: 6.25vw;
		padding-left:13.5416vw;
	}
	.floor3-flex{
		display:flex;
		justify-content: space-between;
	}
	.floor3-text{
		width: 30.0833vw;
	}
	.floor3-flex .btn{
		margin-top:3.125vw;
	}
	.floor3-flex .description{
		margin-top:1.0416vw;

	}
	.floor3-container .title {
		font-size: 8.333vw;
		font-weight: 800;
		margin-bottom:2.0833vw;
	}
	
	.floor3-container .image-zoom{
		width: 50vw;
		height: auto;
	}
	.floor4-container{
		width: 100%;
		margin: 0 auto;
		display: flex;
		padding-bottom:var(--floor-padding);
	}
	.floor4-container .image-zoom{
		width: 50vw;
		height: auto;
	}
	.floor4-text{
     width: 27.083vw;
		 height: auto;
		 margin: 1.042vw 0 0 4.167vw;
	}
	.floor4-text .floor4-btn{
		 margin-top: 3.125vw;
	}
	.image-zoom img{
		height: 100%;
		object-fit: cover;
	}
	.layer1{
		position: relative;
		z-index: 1;
	}
	.layer3{
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;;
		flex-direction: column;
		text-align: center;
		transition: all .6s ease-in;
	}
	.element {
		aspect-ratio: 290 / 126;
		-webkit-mask-size: auto 100%;
        mask-size: auto 100%;
		-webkit-mask-image: url('/static/images/web/logo_mask.svg');
		mask-image: url('/static/images/web/logo_mask.svg');
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-transition: all .6s ease-in;
		transition: all .6s ease-in;
		-webkit-transform:rotate(-20deg);
		transform:rotate(-20deg);
	}
	.elbox{
		aspect-ratio: 290 / 126;
		position: absolute;
		width: auto;
		height: 6.5625vw;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%) ;
		transform: translate(-50%,-50%) ;
		z-index: 2;
		-webkit-transition: all .6s ease-in;
		transition: all .6s ease-in;
	}
	.element img{
		width:100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		-webkit-transition: all .6s ease-in;
		transition: all .6s ease-in;
	}
	
	.active .elbox{
        width: auto;
        height: 115%;
        top: 50% !important;
        left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
    }
	.active .element {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	.active .element img {
		width: 100vw;
		height: 100vh;
	} 
	.active .layer3{
		transform:translateY(7vh)
	}
	.mobile {
		display: none;
	}
	.home-about{
		width: 100%;
		height:120vh;
		position: relative;
		background: #f8f8f8;
	}
	.home-about .sticky{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.home-about .bigtitle{
		font-size:18.75vw;
		font-weight:700;
		text-align:center;
		line-height: 1;
		display: table;
		margin:0 auto 3.125vw auto;
		padding-right:2.5vw;
	}
	.home-about .btn{
		margin-top:3.125vw;
	}
	
	
    @media (max-width: 1200px) {
		.home-banner .banner-text .subtitle{
			font-size:16px;
			margin-bottom:18px;
		}
		.floor2-container .image-zoom{
			margin:7.8125vw 0 0 0;
		}
		.floor3-container .title{
			font-size:11.7187vw;
		}
		.home-about .bigtitle{
			margin-bottom:3.9062vw;
		}
		.floor3-container{
			padding-left:6.0546vw;
		}
		.floor3-text{
			width: 41.0156vw;
		}
		.floor3-container .image-zoom{
			width: 50.7812vw;
		}
		.floor3-flex .description{
			margin-top:.9765vw;
		}
		.home-about .bigtitle{
			margin-bottom:3.9062vw;
		}
		.home-about .btn{
			margin-top:3.9062vw;
		}
    }
  @media (max-width: 1023px) {
	
	.home-banner .banner-text .subtitle{
		font-size:14px;
	}
	.home-banner .banner-text{
		top:auto !important;
		bottom:12.0772vw !important;
		left: 6.25vw !important;
		right: 6.25vw !important;
		transform: translateX(0) !important;
		text-align: left !important;
	}
	.home-banner .banner-text .title {
		margin-bottom:2.4154vw;
	}
	.floor2-container .image-zoom{
		margin:14.4927vw 0 0 0;
	}
	.floor2-video{
		margin-top: 7.246vw;
		align-items: start;
	}
	.floor2-video video{
		margin-top: 9.66vw;
		min-height: 48.3vw;
		object-fit: cover;
	}
	.floor2-container .image-zoom img{
			transform: scale(1.35);
			-webkit-transform: scale(1.35);
			transform-origin: left bottom;
	}
	.image-zoom img{
     min-height: 44.44vw;
		 object-fit: cover;
	}
	.floor2-container .image-zoom img:hover {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
	.floor3-container{
		width: var(--floor-width);
		padding-left: 0;
		margin: 0 auto;
		padding-bottom: var(--floor-padding);
	}
	.floor3-container .image-zoom, .floor4-container .image-zoom{
		height: auto;
	}
	.floor3-container .title{
		font-size:14.4927vw;
	}
	.floor3-flex{
		flex-direction: column;
	}
	.floor4-container{
		width: var(--floor-width);
		flex-direction: column-reverse;
	}
	.floor4-text{
    width: 100%;
		margin-left: 0;
	}
	.floor4-text .floor4-btn{
		margin-top:7.2463vw;
	}
	.floor3-text{
		width: 100%;
	}
	.floor3-flex .btn{
		margin-top:7.2463vw;
	}
	.floor3-container .image-zoom{
		width: 100%;
		margin:14.4927vw 0 0 0;
	}
	.floor4-container .image-zoom{
		 margin-top: 14.4927vw;
		 width: 100%;
	}
	.home-about .bigtitle{
		margin-bottom:7.2463vw;
	}
	.home-about .btn{
		margin-top:7.2463vw;
	}
	.active .layer3{
		transform:translateY(24vh)
	}
  }
 
