@charset "utf-8";

/*---------------- swiper ----------------*/
.swiper {
	max-height: 100vh;
	overflow: hidden;
}

.swiper * {
	max-height: 100vh;
}

.swiper-container, .swiper-container * {
	overflow: visible;
}

.swiper-slide {
	overflow: hidden;
}

.swiper-slide img, .swiper-slide video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}



.swiper-pagination {
	width: 100%;
	height: auto;
	bottom: 6.77vw !important;
	bottom: 3.125vw !important; /* 60 */
	text-align: right;
}

.swiper-pagination.left {
	padding: 0 135px;
	padding: 0 7.0313vw;
	text-align: left;
}

.swiper-pagination-bullet {
	width: 30px;
	width: 1.5625vw;
	height: 2px;
	margin: 0 0 0 8px;
	position: relative;
	background: #7f7f7f;
	border-radius: 0;
	transition: all .35s;
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	-ms-transition: all .35s;
	cursor: pointer;
	opacity: 1;
}

.swiper-pagination-bullet:hover {
	background: #ffffff;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 77px;
	width: 4.0104vw;
	background: #ffffff;
}

/* dot */
.swiper-pagination.dot .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 0 0 6px;
	background: none;
	border: 1px solid #ffffff;
	border-radius: 50%;
	opacity: 1;
}

.swiper-pagination.dot .swiper-pagination-bullet:hover {
	background: #ffffff !important;
}

.swiper-pagination.dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 10px;
	background: #ffffff !important;
}

/* banner info */
.swiper-banner-info * {
	overflow: hidden;
}

/* zoom */
.banner-pic {
	width: 100%;
}

.banner-pic img {
	width: 100%;
	display: block;
}

.swiper.pic-zoom .swiper-slide .banner-pic img {
	transform: scale3d(1.1, 1.1, 1.1);
	-webkit-transform: scale3d(1.1, 1.1, 1.1);
	-ms-transform: scale3d(1.1, 1.1, 1.1);
	-moz-transform: scale3d(1.1, 1.1, 1.1);
	transition: all 6s linear;
	-webkit-transition: all 6s linear;
	-ms-transition: all 6s linear;
	-moz-transition: all 6s linear;
}

.swiper.pic-zoom .swiper-slide.swiper-slide-active img {
	transform: scale3d(1, 1, 1) !important;
	-webkit-transform: scale3d(1, 1, 1) !important;
	-ms-transform: scale3d(1, 1, 1) !important;
	-moz-transform: scale3d(1, 1, 1) !important;
}

/* slide up */
.swiper.text-slide-up .swiper-slide span {
	display: inline-block;
	transform: translate3d(0, 120%, 0);
	-webkit-transform: translate3d(0, 120%, 0);
	-ms-transform: translate3d(0, 120%, 0);
	-moz-transform: translate3d(0, 120%, 0);
	transition: all .6s ease-in-out 0.4s;
	-webkit-transition: all .6s ease-in-out 0.4s;
	-ms-transition: all .6s ease-in-out 0.4s;
	-moz-transition: all .6s ease-in-out 0.4s;
}

.swiper.text-slide-up .swiper-slide-active span {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
}


.swiper.text-slide-up .swiper-slide h3 span {
	transition-delay: 0.4s;
}

.swiper.text-slide-up .swiper-slide p span {
	transition-delay: 0.45s;
}


.text-slide-up span {
	display: inline-block;
	transform: translate3d(0, 120%, 0);
	-webkit-transform: translate3d(0, 120%, 0);
	-ms-transform: translate3d(0, 120%, 0);
	-moz-transform: translate3d(0, 120%, 0);
	transition: all .6s ease-in-out 0.4s;
	-webkit-transition: all .6s ease-in-out 0.4s;
	-ms-transition: all .6s ease-in-out 0.4s;
	-moz-transition: all .6s ease-in-out 0.4s;
}

.text-slide-up.active span {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
}


.text-slide-up.active h3 span {
	transition-delay: 0.4s;
}

.text-slide-up.active p span {
	transition-delay: 0.45s;
}

/* black */
.swiper-pagination.black .swiper-pagination-bullet {
	background: rgba(0, 0, 0, 0.12);
}

.swiper-pagination.black .swiper-pagination-bullet {
	background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination.black .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #000000;
}

.slide-pic {
	width: 100%;
	display: block;
}


/*---------------- banner ----------------*/
.banner {
	background: no-repeat center center;
	background-size: cover;
	color: #d0bfad;
}

.banner img {
	width: 100%;
	display: block;
}

.banner-mask {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: no-repeat 0 0 / 100% 100%;
}

.banner-title {
	width: 100%;
	height: auto;
	padding: 0 6%;
	position: absolute;
	left: 0;
	bottom: 250px;
	bottom: 13.0208vw;
	font-size: 72px;
	font-size: 3.75vw;
	font-weight: bold;
	line-height: 120%;
	opacity: 0;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
}

.banner-info {
	width: 100%;
	height: auto;
	padding: 0 6%;
	position: absolute;
	left: 0;
	bottom: 188px;
	bottom: 9.7917vw;
	font-size: 18px;
	font-size: 0.9375vw;
	line-height: 120%;
	opacity: 0;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
}

.banner-more {
	padding: 10px 0;
	padding: 0.5208vw 0;
	border-bottom: 1px solid #d0bfad;
	position: absolute;
	right: 6%;
	bottom: 177px;
	bottom: 9.2188vw;
	color: #d0bfad;
	font-size: 18px;
	font-size: 0.9375vw;
	line-height: 120%;
	opacity: 0;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
}

.banner-block {
	width: 100%;
	height: 85px;
}


/*---------------- sbanner ----------------*/
.sbanner {
	width: 100%;
	height: auto;
	max-height: 100vh;
	position: relative;
	overflow: hidden;
}

.sbanner img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}


/*---------------- swiper-mask-info ----------------*/
.swiper-mask-info {
	width: 100%;
	height: 5.9375vw; /* 114 */
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(0, 0, 0, 0.5);
	transform: translate3d(0, 100%, 0);
	-webkit-transform: translate3d(0, 100%, 0);
	-moz-transform: translate3d(0, 100%, 0);
	-ms-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
}

.swiper-mask-info.lg {
	display: flex;
}

*:has(> .swiper-mask-info):hover .swiper-mask-info {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
}

.swiper-mask-info p {
	color: #ffffff;
	font-size: 0.8854vw; /* 17 */
	line-height: 1.5625vw; /* 30 */
}

.swiper-mask-info p span {
	font-size: 1.1458vw; /* 22 */
	font-weight: bold;
	line-height: 1.6667vw; /* 32 */
}

/* slide-mask */
.slide-mask {
	width: 5.75%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
	background: #ffffff;
	display: none;
}

.slide-mask.move {
	animation: slide-mask-move 0.75s linear;
	-webkit-animation: slide-mask-move 0.75s linear;
	-moz-animation: slide-mask-move 0.75s linear;
	-ms-animation: slide-mask-move 0.75s linear;
}

@-webkit-keyframes slide-mask-move {
	0% {
		-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
		transform: translate3d(0, 0, 0) scale(1, 1);
	}
	50% {
		-webkit-transform: translate3d(-50vw, 0, 0) scale(2, 2);
		transform: translate3d(-50vw, 0, 0) scale(2, 2);
	}
	100% {
		-webkit-transform: translate3d(-100vw, 0, 0) scale(1, 1);
		transform: translate3d(-100vw, 0, 0) scale(1, 1);
	}
}

@keyframes slide-mask-move {
	0% {
		-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
		transform: translate3d(0, 0, 0) scale(1, 1);
	}
	50% {
		-webkit-transform: translate3d(-50vw, 0, 0) scale(2, 2);
		transform: translate3d(-50vw, 0, 0) scale(2, 2);
	}
	100% {
		-webkit-transform: translate3d(-100vw, 0, 0) scale(1, 1);
		transform: translate3d(-100vw, 0, 0) scale(1, 1);
	}
}

/*---------------- public ----------------*/
.base-info {
	overflow: visible;
}

.base-info h2, h2.base-info, .base-info h4, h4.base-info, .base-info p, p.base-info {
	width: 100%;
	height: auto;
	float: left;
}

.base-info h2, .base-info h2 *, h2.base-info, h2.base-info * {
	color: #0d0d0d;
	font-size: 1.1458vw; /* 22 */
	font-size: clamp(14px, 1.1458vw, 22px);
	font-weight: bold;
	line-height: 1.6667vw; /* 32 */
	overflow: visible;
}

.base-info h4, h4.base-info, .base-info h4 *, h4.base-info * {
	color: #0d0d0d;
	font-size: 1.1458vw; /* 22 */
	font-size: clamp(14px, 1.1458vw, 22px);
	line-height: 1.6667vw; /* 32 */
	overflow: visible;
}

.base-info p, p.base-info {
	color: #0d0d0d;
	font-size: 0.8854vw; /* 17 */
	font-size: clamp(12px, 0.8854vw, 17px);
	line-height: 1.5625vw; /* 30 */
	overflow: visible;
}

.base-info h2.gap {
	margin-bottom: 1.5625vw; /* 30 */
}

.base-info p.gap {
	margin-top: 1.5625vw; /* 30 */
}

.system-title {
	color: #515151;
	font-size: 4.1667vw; /* 80 */
	text-align: right;
}
/*
.cursor {
	cursor: none;
}

.cursor a {
	cursor: none;
}
*/
.br {
	width: 100%;
}

.letter, .letter * {
	overflow: visible;
	flex-wrap: wrap;
}

.letter span {
	display: inline-block;
	float: left;
}

.letter.center {
	display: flex;
	justify-content: center;
}

.letter.rows-center * {
	display: flex;
	justify-content: center;
}

.letter.rows-center .xs {
	display: none !important;
}

.letter.rows-center .lg {
	display: flex !important;
}

.letter.rows-center .btn-more {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.letter.rows-center h2, .letter.rows-center h3, .letter.rows-center h4, .letter.rows-center p {
	width: 100%;
	height: auto;
	float: left;
}

.letter.rows-right * {
	display: flex;
	justify-content: flex-end;
}

.letter.rows-right .xs {
	display: none !important;
}

.letter.rows-right .lg {
	display: flex !important;
}

.letter.rows-right h2, .letter.rows-right h3, .letter.rows-right h4, .letter.rows-right p {
	width: 100%;
	height: auto;
	float: left;
}

.clip-box {
	width: 100%;
	height: auto;
	clip-path: inset(50% 50%);
}

.clip-box img {
	width: 100%;
	display: block;
}


.subclass {
	margin: 4.1667vw 0 0 0; /* 80  */
}

.subclass a {
	float: left;
	display: block;
	margin-right: 2.1875vw; /* 42 */
	padding-bottom: 0.625vw; /* 12 */
	color: #000000;
	font-size: 1.1458vw; /* 22 */
	line-height: 1.6667vw; /* 32 */
}

.subclass a.active {
	font-weight: bold;
}

.tab-title {
	padding: 2.0833vw 0 4.1667vw 0;/* 40 80 */
	font-size: 1.1458vw; /* 22 */
	line-height: 1.6667vw; /* 32 */
	text-align: center;
}

.tab-title a {
	margin: 0 2.3438vw; /* 45 */
	padding-bottom: 0.625vw; /* 12 */
	color: #0d0d0d;
	font-size: 1.1458vw; /* 22 */
	line-height: 1.6667vw; /* 32 */
}

.tab-content {
	display: none;
	opacity: 0;
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
}

.tab-content.active {
	display: block;
	opacity: 1;
}

.line {
	width: 100%;
	height: 1px;
	float: left;
}

.line::after {
	content: " ";
	width: 100%;
	height: 1px;
	display: block;
	background: #000000;
}


/*---------------- message ----------------*/
#oc-message-box{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    display: none;
}

#oc-message{
    width: auto;
    max-width: 440px;
    height: auto;
    padding: 12px 30px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .75);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    line-height: 150%;
}


/*---------------- mobile ----------------*/
@media (min-width: 1px) and (max-width: 768px){

	/*---------------- base ----------------*/
	.sticky-scroll-x-box {
		padding: 0 3.6vw;
	}

	/*---------------- swiper ----------------*/
	
	.swiper-pagination {
		bottom: 10vw !important; /* 75 */
		text-align: center;
	}

	.swiper-pagination.left {
		padding: 0 135px;
		padding: 0 7.0313vw;
		text-align: left;
	}

	.swiper-pagination-bullet {
		width: 2.8vw; /* 21 */
		margin: 0 0 0 5px;
	}


	.swiper-pagination-bullet.swiper-pagination-bullet-active {
		width: 6.4vw; /* 48 */
	}

	/* dot */
	.swiper-pagination.dot .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 3px;
	}

	.swiper-pagination.dot .swiper-pagination-bullet:hover {
		background: #ffffff !important;
	}

	.swiper-pagination.dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
		width: 8px;
		background: #ffffff !important;
	}

	/* banner info */
	.swiper-banner-info * {
		overflow: hidden;
	}

	/* zoom */
	.swiper.pic-zoom .swiper-slide .banner-pic img {
		transform: scale3d(1.1, 1.1, 1.1);
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		-ms-transform: scale3d(1.1, 1.1, 1.1);
		-moz-transform: scale3d(1.1, 1.1, 1.1);
		transition: all 6s linear;
		-webkit-transition: all 6s linear;
		-ms-transition: all 6s linear;
		-moz-transition: all 6s linear;
	}

	.swiper.pic-zoom .swiper-slide.swiper-slide-active img {
		transform: scale3d(1, 1, 1) !important;
		-webkit-transform: scale3d(1, 1, 1) !important;
		-ms-transform: scale3d(1, 1, 1) !important;
		-moz-transform: scale3d(1, 1, 1) !important;
	}

	/* slide up */
	.swiper.text-slide-up .swiper-slide span {
		display: inline-block;
		transform: translate3d(0, 120%, 0);
		-webkit-transform: translate3d(0, 120%, 0);
		-ms-transform: translate3d(0, 120%, 0);
		-moz-transform: translate3d(0, 120%, 0);
		transition: all .6s ease-in-out 0.4s;
		-webkit-transition: all .6s ease-in-out 0.4s;
		-ms-transition: all .6s ease-in-out 0.4s;
		-moz-transition: all .6s ease-in-out 0.4s;
	}

	.swiper.text-slide-up .swiper-slide-active span {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
	}


	.swiper.text-slide-up .swiper-slide h3 span {
		transition-delay: 0.4s;
	}

	.swiper.text-slide-up .swiper-slide p span {
		transition-delay: 0.45s;
	}


	.text-slide-up span {
		display: inline-block;
		transform: translate3d(0, 120%, 0);
		-webkit-transform: translate3d(0, 120%, 0);
		-ms-transform: translate3d(0, 120%, 0);
		-moz-transform: translate3d(0, 120%, 0);
		transition: all .6s ease-in-out 0.4s;
		-webkit-transition: all .6s ease-in-out 0.4s;
		-ms-transition: all .6s ease-in-out 0.4s;
		-moz-transition: all .6s ease-in-out 0.4s;
	}

	.text-slide-up.active span {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
	}


	.text-slide-up.active h3 span {
		transition-delay: 0.4s;
	}

	.text-slide-up.active p span {
		transition-delay: 0.45s;
	}

	/* black */
	.swiper-pagination.black .swiper-pagination-bullet {
		background: rgba(0, 0, 0, 0.12);
	}

	.swiper-pagination.black .swiper-pagination-bullet {
		background: rgba(0, 0, 0, 0.2);
	}

	.swiper-pagination.black .swiper-pagination-bullet.swiper-pagination-bullet-active {
		background: #000000;
	}

	.slide-pic {
		width: 100%;
		display: block;
	}

	/*---------------- swiper mask info ----------------*/
	.swiper-mask-info {
		height: auto;
		position: relative;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: none;
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
	}
	
	.swiper-mask-info p {
		margin: 4vw 0 2.8vw 0; /* 30 21 */
		color: #0d0d0d;
		font-size: 2.9333vw; /* 22 */
		line-height: 4.2667vw; /* 32 */
		text-align: center;
	}
	
	.swiper-mask-info p span {
		font-size: 3.4667vw; /* 26 */
		line-height: 6.1333vw; /* 46 */
	}
	
	.swiper-mask-info .btn-more.white {
		margin: 0 auto;
		border: 1px solid #202633;
		color: #191919;
	}
	
	/*---------------- public ----------------*/
	.base-info h2, .base-info h2 *, h2.base-info, h2.base-info * {
		font-size: 4.5333vw; /* 34 */
		line-height: 6.4vw; /* 48 */
	}

	.base-info h4, h4.base-info, .base-info h4 *, h4.base-info * {
		font-size: 2.9333vw; /* 22 */
		line-height: 4.2667vw; /* 32 */
	}

	.base-info p, p.base-info {
		font-size: 3.4667vw; /* 26 */
		line-height: 6.1333vw; /* 46 */
	}

	.base-info h2.gap {
		margin-bottom: 6.4vw; /* 48 */
	}

	.base-info p.gap {
		margin-top: 6.4vw; /* 48 */
	}

	.xs-info h2, .xs-info h2 *, h2.xs-info, h2.xs-info * {
		font-size: 4vw; /* 30 */
		font-weight: bold;
		line-height: 6.1333vw; /* 46 */
	}

	.xs-info h4, h4.xs-info, .xs-info h4 *, h4.xs-info * {
		font-size: 2.9333vw; /* 22 */
		line-height: 4.2667vw; /* 32 */
	}

	.xs-info p, p.xs-info {
		font-size: 3.2vw; /* 24 */
		line-height: 6.1333vw; /* 46 */
	}

	.xs-info h2.gap {
		margin-bottom: 5.6vw; /* 42 */
	}

	.xs-info p.gap {
		margin-top: 5.6vw; /* 42 */
	}

	.system-title {
		font-size: 6.6667vw; /* 50 */
		line-height: 120%;
	}
	/*
	.cursor {
		cursor: none;
	}

	.cursor a {
		cursor: none;
	}
	*/
	.letter, .letter * {
		overflow: visible;
	}

	.letter span {
		display: inline-block;
		float: left;
	}

	.letter.center, .letter.xs-center {
		display: flex;
		justify-content: center;
	}

	.letter.rows-center *, .letter.xs-rows-center * {
		display: flex;
		justify-content: center;
	}

	.letter.xs-rows-center .btn-more {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	.letter.rows-center .xs {
		display: flex !important;
	}

	.letter.rows-center .lg {
		display: none !important;
	}

	.letter.rows-center h2, .letter.rows-center h3, .letter.rows-center h4, .letter.rows-center p {
		width: 100%;
		height: auto;
		float: left;
	}

	.letter.rows-right * {
		display: flex;
		justify-content: flex-end;
	}

	.letter.rows-right .xs {
		display: flex !important;
	}

	.letter.rows-right .lg {
		display: none !important;
	}

	.letter.rows-right h2, .letter.rows-right h3, .letter.rows-right h4, .letter.rows-right p {
		width: 100%;
		height: auto;
		float: left;
	}

	.clip-box {
		width: 100%;
		height: auto;
		clip-path: inset(50% 50%);
	}

	.clip-box img {
		width: 100%;
		display: block;
	}

	.subclass {
		margin: 4.8vw 0 0 0; /* 36 */
		display: flex;
		justify-content: center;
	}

	.subclass a {
		margin: 0 2.4vw; /* 18 */
		margin: 0 1.6vw; /* 12 */
		padding-bottom: 1.3333vw; /* 10 */
		font-size: 2.9333vw; /* 22 */
	}

	.tab-title {
		padding: 3.6vw 0 11.2vw 0;/* 27 84 */
		font-size: 2.9333vw; /* 22 */
		line-height: 4.2667vw; /* 32 */
	}

	.tab-title a {
		margin: 0 3.6vw; /* 27 */
		font-size: 2.9333vw; /* 22 */
		line-height: 4.2667vw; /* 32 */
	}

	

	.series-tab-container .tab-content {
		float: left;
		opacity: 1;
		display: block;
	}

	/*---------------- message ----------------*/
	#oc-message{
		max-width: 80%;
		padding: 8px 20px;
		font-size: 12px;
	}
}