@charset "utf-8";

html,
body {
	color: #333;
	position: relative;
	height: 100%;
	background: #ffffff !important;
}

.homebanner {
	height: 100vh;
	overflow: hidden;
}
.swiper-pagination{
	display: none;
}
.bbg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 5s ease;
}

.part {
	width: 100%;
	/*height: auto;*/
}

.bbg.on {
	transform: scale(1.05);
}

.xxcontainer {
	position: absolute;
	width: 28px;
	left: 50%;
	margin-left: -14px;
	height: 10px;
	bottom: 60px;
	z-index: 10;
}

.chevron {
	position: absolute;
	width: 28px;
	height: 10px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
	background: url(../img/chevron.png) center no-repeat;
	background-size: auto 10px;
}

.chevron:first-child {
	animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
}

@keyframes move {
	25% {
		opacity: 1;
	}

	33% {
		opacity: 1;
		transform: translateY(20px);
	}

	67% {
		opacity: 1;
		transform: translateY(30px);
	}

	100% {
		opacity: 0;
		transform: translateY(45px) scale3d(0.5, 0.5, 0.5);
	}
}

.ibox {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.disappear .ibox {
	transform: scale(0.8);
	opacity: 0.5;
	transition: all 0.8s cubic-bezier(0.445, 0.145, 0.355, 1) 0s;
}

.swiper-slide-active .ibox {
	transform: translate(0px, 0px) scale(1);
	opacity: 1;
	transition: all 0.4s cubic-bezier(0.445, 0.145, 0.355, 1) 0s;
}

.banner .swiper-container {
	width: 100%;
	height: 100%;
	background-color: rgb(22, 30, 52);
	transition: 1s background-color 1.3s;
}

.banner .swiper-wrapper {
	transition-delay: 1s;
	transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

.banner .swiper-slide {
	text-align: center;
	font-size: 18px;
}

.title {
	transition-delay: 1s;
	z-index: 10;
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

.title h3 {
	font-weight: 700;
	font-size: calc(55px + 54 * ((53vw + 53vh) - 520px) / 1200);
	letter-spacing: -1px;
	color: rgba(255, 255, 255, 0);
	-webkit-text-stroke: 2px #fff;
}

.banner-more a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 160px;
	height: 60px;
	border-radius: 60px;
	border: 2px solid #205299;
	box-sizing: border-box;
	padding: 0 20px;
	margin-top: 40px;
}

.banner-more a i {
	font-size: 24px;
}

.img-theme-1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0 80px;
	box-sizing: border-box;
}

.img-theme-1 .banner-more a {
	background-color: #205299;
	color: #ffffff;
}

.img-theme-2 {
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-right: 10%;
}

.img-theme-2 .banner-more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.img-theme-2 .banner-more a {
	background-color: none;
	border: 2px solid #09e7c0;
	color: #09e7c0;
	margin-top: 80px;
}

.img-theme-3 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 60%;
}

.img-theme-3 .banner-more a {
	background-color: #07a9f4;
	border: 2px solid #07a9f4;
	color: #ffffff;
	margin-top: 40px;
}

.img-theme-4 {
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	margin-left: 5%;
	padding-bottom: 10%;
	box-sizing: border-box;
}

.img-theme-4 .banner-more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.img-theme-4 .banner-more a {
	background-color: none;
	border: 2px solid #2baf82;
	color: #2baf82;
	margin-top: 50px;
}

.icon-arrow_r {
	animation: fadeRight 1s ease-in infinite;
}

@keyframes fadeRight {
	0% {
		opacity: 0;
		transform: translate3d(-10px, 0, 0);
	}

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

.img-box {
	width: 100%;
	height: 100%;
	transform: scale(0.6, 0.6);
	transition-duration: 1s;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
	opacity: 0.9;
	overflow: hidden;
	display: block;
}

.img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2, 1.2) translateX(0);
	transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
	transition-property: transform;
}

.button-prev,
.button-next {
	transition: 0.5s;
	outline: none;
	position: absolute;
	width: 140px;
	z-index: 10;
	top: 65vh;
	transform: translateY(-34px);
	cursor: pointer;
}

.button-prev {
	left: 4vw;
}

.button-next {
	right: 4vw;
}

.button.disabled {
	opacity: 0.2;
	cursor: default;
}

#arrow-svg-home {
	transform: translateY(353px);
}

.button-next #arrow-svg-home {
	transform: translateY(353px) rotateY(180deg);
	transform-origin: 80px 0px 0px;
}

svg {
	transition: 0.5s;
}

.cls-1 {
	transition: 0.5s;
	/* opacity: 0.4; */
	transform-origin: -20px 40px;
	opacity: 1;
}

.cls-4 {
	transition: 0.5s;
	stroke-width: 2px;
	stroke: #fff;
	fill: none;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 1;
	transform-origin: 0px 0px 0px;
}

#arrow-trg {
	transition: 0.5s;
	fill: #fff;
	transform: rotateY(180deg) translate(-53px, 39px);
}

#line {
	transition: 0.5s;
	stroke: #fff;
	transform: translate(50px, 42px);
}

.button-prev:not(.disabled):hover svg {
	transform: translateX(-25px);
}

.button-next:not(.disabled):hover svg {
	transform: translateX(25px);
}

.button:not(.disabled):hover .cls-1 {
	transform: scale(1.1);
}

.button:not(.disabled):hover .cls-4 {
	stroke-dasharray: 2px;
	stroke-dashoffset: 2px;
	opacity: 1;
}

.button:not(.disabled):hover #arrow-trg {
	transform: rotateY(180deg) translate(-37px, 39px);
}

.button:not(.disabled):hover #line {
	transform: translate(35px, 42px) scaleX(0.33);
}

.ibox-info {
	position: relative;
	width: 86%;
	margin: 0 auto;
	max-width: 1600px;
	padding: 100px 0;
	box-sizing: border-box;
	/* left: 50%;
	top: 0px; */
	/* transform: translate(-50%, 0);
	z-index: 8; */
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ibox-info .btn-more{
	display: none;
}
.ibox-info .info-left .btn-more,.profile-info .btn-more{
	display: block;
}
.profile {}

.profile-info {}

.profile-info p.profile-txt {
	color: #E8E8E8;
	font-size: 18px;
	line-height: 30px;
	width: 540px;
	margin-top: 40px;
}

.com-title h1 {
	font-size: 48px;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 32px;
}

.com-title .line-green .long {
	display: inline-block;
	width: 52px;
	height: 5px;
	background: #6db132;
	float: left;
}

.com-title .line-green .short {
	display: inline-block;
	width: 5px;
	height: 5px;
	background: #6db132;
	float: left;
	margin-left: 3px;
}

.com-tab {}

.com-tab li {
	margin: 25px 0;
}

.com-tab li a {
	display: inline-block;
	padding: 6px 0;
}

.com-tab li.active a {
	color: #205299;
	font-weight: bold;
	border-bottom: 3px solid #205299;
}

.btn-more {
	margin-top: 46px;
	position: relative;
	z-index: 2;
	display: inline-flex;
	/* justify-content: center; */
	align-items: center;
	border-radius: 30px;
	transition: all .4s;
	cursor: pointer;
	width: 160px;
}

.btn-more::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: #ffffff;
	transition: all .4s
}

.btn-more:hover::before {
	width: 160px;
}

.btn-more .ico-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #205299;
}

.btn-more:hover .ico-more {
	display: none;
}

.btn-more .ico-more span {
	font-size: 18px;
	color: #205299;
}

.btn-more a {
	display: none;
	height: 60px;
	align-items: center;
	width: 100%;
}

.btn-more:hover a {
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	color: #205299;
	box-sizing: border-box;
}

.btn-more:hover a i {
	font-size: 24px;
}

.data {
	width: 540px;
	margin-top: 20px;
}

.data-list {
	width: 50%;
	float: left;
	margin-top: 40px;
}

.data-list .list-num {
	display: flex;
	align-items: flex-end;
	color: #ffffff;
}

.data-list .list-num .num {
	font-size: 72px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.data-list .list-num .unit {
	font-weight: bold;
	padding-bottom: 10px;
	margin-left: 4px;
}

.data-list p {
	color: #a7cbff;
	margin-top: 6px;
}

.product .com-title {
	padding: 80px 0 30px;
}

.product .com-title h1 {
	color: #000000;
	text-align: center;
}

.product .com-title .line-green {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-info {
	height: 900px;
	padding: 20px 33px;
	margin-top: 0px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin-bottom: 20px;
}
.product-info  .btn-more{
	margin-top: 0;
}
.product-info .product-left {
	flex: 1;
	padding: 12px 0;
	height: 100%;
	box-sizing: border-box;
}

.product-info .product-1 {
	height: 100%;
	margin: 0 12px;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: 10px;
	background: url("../img/product1.jpg") no-repeat center;
	background-size: cover;
	overflow: hidden;
}
.product-info .product-1 h1{
	padding: 0 20px;
}
.product-info .product-more {
	flex: 2.2;
	height: 100%;
	margin: 12px 0;
}

.product-list {
	display: flex;
	align-items: center;
	height: 50%;
	padding: 12px 0;
}

.product-list .list-item-pro {
	margin: 0 12px;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
}

.product-list .pro-img {
	position: absolute;
	right: 10px;
	bottom: 16px;
	height: 60%;
}

.product-list .pro-img img {
	height: 100%;
}
.product-list .product-5 .pro-img{
	right: 40px;
}
.product-list .pro-txt {
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	margin-right:0;
	padding-right: 30px;
	padding-left: 30px;
	width: 100%;
}

.product-list .pro-txt ul {
	flex: 1;
	margin-top: 30px;
	padding: 0 0 0 20px;
	width: 40%;
}
@media screen and (max-width:1919px) {
	.product-list .pro-txt ul {
		/*padding-right: 40%;*/
	}
}
.product-list .pro-txt ul li {
	position: relative;
}

.product-list .pro-txt ul li::before {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background-color: #6db132;
	left: -20px;
	top: 7px;
}

.product-list .product-2 {
	flex: 1.5;
	background: url("../img/product2.jpg") no-repeat center;
	background-size: cover;
	position: relative;
}

.product-list .product-2 .pro-img {
	left: -46px;
	bottom: 6px;
	height: 80%;
}

.product-list .product-2 .pro-txt {
	margin-left: 32%;
	padding-left: 70px;
	padding-right: 20px;
	margin-right: 0;
}

.product-list .product-2 .pro-txt ul {
	flex: 1;
	margin-top: 30px;
	padding: 0 0px 0 20px;
	width: 100%;
}

.product-list .product-3 {
	flex: 1;
	background: url("../img/product3.jpg") no-repeat center;
	background-size: cover;
	position: relative;
}

.product-list .product-4 {
	flex: 1;
	background: url("../img/product4.jpg") no-repeat center;
	background-size: cover;
	position: relative;
}

.product-list .product-5 {
	flex: 1;
	background: url("../img/product5.jpg") no-repeat center;
	background-size: cover;
	position: relative;
}

.product-info h1 {
	font-size: 30px;
	color: #000000;
	margin-top: 40px;
	line-height: 1.3;
}
.product-info h1 span{
	display: inline-block;
	width: 28px;
	position: relative;
}
 .product-info h1 span::after{
	position: absolute;
	content: "®";
	 top: -32px;
	 left: 2px;
	 font-size: 22px;
 }

.product-info ul li {
	color: #737373;
	font-size: 16px;
	line-height: 1.5;
}

.product-info .btn-more {
	visibility: visible;
}

.product-info .btn-more::before {
	background: #205299;
	border: 2px solid #205299;
	width: 60px;
	margin-top: 0px;
	visibility: visible;
	box-sizing: border-box;
}

.product-info .btn-more:hover::before {
	width: 160px;
}

.product-info .btn-more span {
	color: #ffffff;
}

.product-info .btn-more:hover a {
	color: #ffffff;
}

.product-info .product-1 .btn-more {
	visibility: visible;
	width: auto;
	margin-top: 50px;
	transform-origin: 50% 50%;
	transition: all .5s ease;
}

.product-info .product-1 .btn-more:hover {
	width: 160px;
}

.product-info .product-1 {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.product-info .product-1 ul {
	margin-top: 30px;
}

.product-info .product-1 .pro-btn {
	margin: 14px auto;
}

.product-info .product-1 .pro-img {
	margin-top: 30px;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 30%;
}

.product-info .product-1 .pro-img img {
	height: unset;
	width: 90%;
}

.product-info .pro-img img {
	height: 100%;
	transform-origin: 50% 50%;
	transition: transform .5s ease;
}

.product-info .list-item-pro:hover img,
.product-info .product-1:hover img {
	transform: scale(1.1);
}

.honor-info,
.news-info,
.partner-info,
.innovation-info {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.honor {
	padding: 100px 0;
}

.honor-info {
	height: auto;
	padding: 0 0;
}

.honor-info .info-left,
.news-info .info-left,
.partner-info .info-left,
.innovation-info .info-left {
	height: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}

.honor-info .info-left {
	height: 600px;
}

.honor-info .com-title h1,
.news-info .com-title h1,
.partner-info .com-title h1 {
	color: #000000;
}

.honor-info .btn-more a,
.news-info .btn-more a {
	background-color: #205299;
}

.honor-info .btn-more a span,
.news-info .btn-more a span {
	color: #ffffff;
}

.honor-info .info-right {
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70%;
}

.honor-info .info-right ul {
	height: 100%;
}

.honor-info .info-right ul li {
	float: left;
	width: calc(33.3% - 16px);
	margin: 8px;
}

.honor-info .info-right ul li img {
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	transition: transform .5s ease;
}

.honor-info .info-right ul li:hover img {
	transform: scale(1.1);
}

.innovation-info {
	height: 800px;
	padding: 60px 0;
}

.innovation-info .info-left {
	height: 90%;
}

.innovation-info .com-tab li a {
	color: rgba(255, 255, 255, 0.7);
}

.innovation-info .com-tab li:hover a {
	color: #ffffff;
}

.innovation-info .com-tab li.active a {
	color: #ffffff;
	border-bottom: 3px solid #ffffff;
}

.innovation-info .info-right {
	width: 70%;
	height: 95%;
}

.innovation-info .info-right .tab-con {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.innovation-info .info-right .tab-con h1 {
	font-size: 48px;
	color: #ffffff;
	font-weight: bold;
	text-align: right;
}

.innovation-info .info-right .tab-con ul.tab-con-desc {
	padding: 20px 30px;
	background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%);
	border-radius: 20px;
	margin-top: 40px;
}

.innovation-info .info-right .tab-con ul.tab-con-desc li {
	text-align: right;
	color: #ffffff;
	position: relative;
	padding-right: 20px;
	margin: 10px 0;
}

.innovation-info .info-right .tab-con ul.tab-con-desc li:before {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background-color: #6db132;
	right: 0;
	top: 10px;
}

.innovation-info .info-right .tab-con ul.tab-con-desc li p {
	font-size: 20px;
	line-height: 1.5;
}

.innovation-info .info-right .img-scroll {
	flex: 1;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.img-scroll ul {
	height: 90%;
	width: 100000px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.img-scroll ul li {
	display: block;
	float: left;
	margin: 0 5px;
	height: 100%;
	border-radius: 5px;
	position: relative;
}

.img-scroll ul li a {
	display: inline-block;
	height: 100%;
}

.img-scroll ul li img {
	border-radius: 5px;
	display: block;
	height: auto;
	width: 210px;
}

.img-scroll ul li a span {
	height: 0;
	border-radius: 5px;
	display: block;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	bottom: 0;
	color: #fff;
	font-size: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-scroll ul li a:hover span {
	height: 100%;
	font-size: 40px;
	transition: all 0.1s;
}
.imgbox-phone{
	display: none;
}
.news-info .info-left {
	height: 600px;
}

.news-info .info-right {
	width: 70%;
	height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-info .info-right .tab-info {
	height: 100%;
}

.news-info .news-list {
	background: #ffffff;
	border-radius: 10px;
	float: left;
	width: calc(50% - 20px);
	margin: 10px;
	height: calc(33.3% - 20px);
	padding: 0px 40px;

	overflow: hidden;
	cursor: pointer;
}
.news-info .news-list a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
.news-info .news-list:first-child {
	height: calc(66.6% - 21px);
	justify-content: initial;
	padding: 0;
}
.news-info .news-list:first-child a{
	flex-direction: column;

}
.news-info .news-list .news-img {
	width: 100%;
	height: calc(50% + 10px);
}

.news-info .news-list .news-img img {
	height: 100%;
	width: 100%;
	transform-origin: 50% 50%;
	transition: transform .5s ease;
}

.news-info .news-list .news-img:hover img {
	transform: scale(1.1);
}

.news-info .news-list .news-txt {
	display: flex;
	align-items: flex-start;
}

.news-info .news-list .news-con {
	flex: 1;
	padding: 0px 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.news-info .news-list .news-txt .txt-date {
	font-family: Arial, Helvetica, sans-serif;
}

.news-info .news-list .news-txt .txt-date .date-time {
	font-size: 30px;
	color: #000000;
}

.news-info .news-list .news-txt .txt-date .date-year {
	font-size: 14px;
	color: #999999;
	margin-top: 5px;
}

.news-info .news-list .news-txt .txt-date .news-line {
	width: 70px;
	height: 3px;
	background-color: #e1e1e1;
	margin-top: 40px;
}

.news-info .news-list .news-txt .txt-info {
	margin-left: 30px;
}

.news-info .news-list .news-txt .txt-info h3 {
	color: #000000;
	font-size: 20px;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
	height: 56px;
}

.news-info .news-list .news-txt .txt-info p {
	color: #999999;
	font-size: 16px;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5;
	margin-top: 15px;
	height: 50px;
}

.news-info .news-list:hover h3,
.news-info .news-list:hover .date-time,
.news-info .news-list:hover .date-year {
	color: #205299 !important;
}

.news-info .btn-more::before,
.honor-info .btn-more::before {
	background: #205299;
}

.news-info .btn-more .ico-more span,
.honor-info .btn-more .ico-more span {
	color: #ffffff;
}

.news-info .btn-more a,
.honor-info .btn-more a {
	background: none;
	color: #ffffff;
}

.partner-info {
	flex-direction: column;
	padding: 100px 0;
}
.partner-info h1{
	text-align: center;
}
.partner-info .line-green {
	display: flex;
	align-items: center;
	justify-content: center;
}

.partner-info .info-right {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
}

.partner-info .info-left {
	min-width: 200px;
}

.partner-info .partner-logo {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* transform: translate3d(3000px, 0, 0); */
}

.partner-info .partner-logo span {
	display: inline-flex;
	width: calc(20% - 20px);
	margin: 10px;
	float: left;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
	overflow: hidden;
	background-color: #ffffff;
	justify-content: center;
}




.slide-left-1 {
	animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards;
	-webkit-animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards;
	/*Safari and Chrome*/
}

.slide-left-2 {
	animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s 1 alternate forwards;
	-webkit-animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s 1 alternate forwards;
	/*Safari and Chrome*/
}

.slide-left-3 {
	animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s 1 alternate forwards;
	-webkit-animation: bounceInLeft 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s 1 alternate forwards;
	/*Safari and Chrome*/
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translate3d(3000px, 0, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(-25px, 0, 0);
	}

	75% {
		transform: translate3d(10px, 0, 0);
	}

	90% {
		transform: translate3d(-5px, 0, 0);
	}

	100% {
		transform: none;
	}
}

.bigimg {
	width: 600px;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: none;
	z-index: 9999;
	border: 10px solid #fff;
}

.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	opacity: 0.5;
	filter: Alpha(opacity=50);
	z-index: 98;
	transition: all 1s;
	display: none
}

.bigbox {}

.bigbox>.imgbox {}

.bigbox>.imgbox>img {
	width: 100%;
}

.imgbox:hover {
	cursor: zoom-in
}

.mask:hover {
	cursor: zoom-out
}

.mask>img {
	position: fixed;
	right: 10px;
	top: 10px;
	width: 60px;
}

.mask>img:hover {
	cursor: pointer
}

:root {
  --color-text: navy;
  --color-bg: #ffffff;
  --color-bg-accent: #ffffff;
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 60s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: papayawhip;
    --color-bg: navy;
    --color-bg-accent: #2626a0;
  }
}

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.marquee {
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  gap: 14px;
  -webkit-mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
          mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 14px;
  min-width: 100px;
  -webkit-animation: scroll-x var(--duration) linear infinite;
          animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
}

.marquee--vertical {
  --mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  -webkit-animation-name: scroll-y;
          animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}

@-webkit-keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

@-webkit-keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

/* Element styles */
.marquee span {
  display: grid;
  place-items: center;
  width: 100%;
  fill: var(--color-text);
  background: var(--color-bg-accent);
  aspect-ratio: 2/1;
  /* padding: calc(var(--size) / 100); */
  border-radius: 14px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  margin:20px 10px;
  overflow: hidden;
}
.marquee span img{
	width: 260px;
	height: 120px;
}
.marquee--vertical span {
  aspect-ratio: 1;
  width: calc(var(--size) / 1.5);
  padding: calc(var(--size) / 6);
}

/* Parent wrapper */
.wrapper {
  display: flex;
  flex-direction: column;
  /* gap: var(--gap); */
  margin: auto;
  max-width: 95%;
}

@-webkit-keyframes fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}