* {
	/* outline: 1px solid red !important; */
}



/* 聯絡我們--------------------------------------------------end */

.white {
	color: #fff !important;
}

.gray-1 {
	color: #646464;
}

.bold {
	font-weight: bold;
}

/* 使用img標籤做成遮罩 */
.img-fit {
	overflow: hidden;
}

.img-fit video,
.img-fit img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 使等列項目可以同高 */
.swiper-slide {
	height: auto;
}

/* 切到下一個可以破出安全範圍的swiper */
.swiper.has-margin-left {
	overflow: visible;
}

/* hover後圖片放大 */
.hover-img-zoom img {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.hover-img-zoom:hover img {
	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
}

/* more-btn */
.more-btn-block {
	padding-top: 40px;
	text-align: center;
	margin: auto;
}

.has-more-block:not(.more-unclicked) .more-btn-block {
	/* 表示已點擊過 */
	display: none !important;
}

.more-btn {
	color: #414141;
	position: relative;
	font-weight: bold;
	width: 200px;
	text-align: center;
	/* 以下為特殊處理，將btn作用範圍擴大 */
	padding: 10px;
	margin: -10px auto;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.more-btn::after {
	position: relative;
	background-image: url(/Other/energy/template/images/common/auo-more-icon.svg);
	display: inline-block;
	background-size: 13px;
	background-position: center;
	background-repeat: no-repeat;
	width: 20px;
	height: 25px;
	margin-left: 5px;
	content: "";
}

.more-btn.white::after {
	background-image: url(/Other/energy/template/images/common/auo-more-icon-white.svg);
}

@media screen and (max-width: 767px) {
	.has-more-block.more-unclicked .mb-show-1>:nth-child(n+3) {
		display: none !important;
	}
}

/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* swiper start */
.swiper-btn-block {
	display: flex;
	position: relative;
}

.swiper-btn-block::before,
.swiper-btn-block.dark::before,
.swiper-btn-block::after,
.swiper-btn-block.dark::after {
	/* 用以事先載入圖片，避免disabled時才載入 */
	position: absolute;
	content: '';
	display: block;
	width: 0;
	height: 0;
}

.swiper-btn-block::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre-disable.svg);
}

.swiper-btn-block.dark::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-pre-disable.svg);
}

.swiper-btn-block::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next-disable.svg);
}

.swiper-btn-block.dark::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-next-disable.svg);
}

/* 原本的 */
.swiper-btn-block .swiper-btn {
	position: relative;
	width: 44px;
	height: 44px;
	cursor: pointer;
	outline: 0 !important;
}




/* 原本的 */
.swiper-btn-block .swiper-btn+.swiper-btn {
	margin-left: 24px;
}

.swiper-btn-block .swiper-btn::before,
.swiper-btn-block .swiper-btn::after {
	position: absolute;
	content: '';
	display: block;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 44px;
	margin: -10px;
	z-index: 1;
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
}

.swiper-btn-block .swiper-btn.swiper-button-disabled {
	pointer-events: none;
}

.swiper-btn-block .swiper-btn:hover::before {
	opacity: 0;
}

.swiper-btn-block .swiper-btn::after {
	opacity: 0;
}

.swiper-btn-block .swiper-btn:hover:after {
	opacity: 1;
}

/* 背景淺色 */
.swiper-btn-block .pre-btn::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre.svg);
}

.swiper-btn-block .pre-btn::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre-hover.svg);
}

.swiper-btn-block .pre-btn.swiper-button-disabled::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre-disable.svg);
}

.swiper-btn-block .next-btn::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next.svg);
}

.swiper-btn-block .next-btn::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next-hover.svg);
}

.swiper-btn-block .next-btn.swiper-button-disabled::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next-disable.svg);
}

/* 背景暗色 */
.swiper-btn-block.dark .pre-btn::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-pre.svg);
}

.swiper-btn-block.dark .pre-btn::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-pre-hover.svg);
}

.swiper-btn-block.dark .pre-btn.swiper-button-disabled::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-pre-disable.svg);
}

.swiper-btn-block.dark .next-btn::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-next.svg);
}

.swiper-btn-block.dark .next-btn::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-next-hover.svg);
}

.swiper-btn-block.dark .next-btn.swiper-button-disabled::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-dark-next-disable.svg);
}

@media screen and (max-width: 1199px) {

	.swiper-btn-block .swiper-btn {
		width: 36px;
		height: 36px;
	}

	.swiper-btn-block .swiper-btn+.swiper-btn {
		margin-left: 20px;
	}

	.swiper-btn-block .swiper-btn {
		width: 36px;
		height: 36px;
	}

	.swiper-btn-block .swiper-btn+.swiper-btn {
		margin-left: 20px;
	}

	.swiper-btn-block .swiper-btn::before,
	.swiper-btn-block .swiper-btn::after {
		background-size: 36px;
	}

}

/* swiper end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* fixed-pattern start */
.fixed-pattern-wrap {
	overflow-x: hidden;
}

.fixed-pattern {
	position: relative;
	max-width: 1080px;
	width: 100%;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
}

.fixed-pattern::before {
	content: '';
	display: block;
	background-size: contain;
	background-position: center;
	position: absolute;
	background-repeat: no-repeat;
}

@media screen and (max-width: 1199px) {
	.fixed-pattern {
		max-width: 768px;
	}
}

@media screen and (max-width: 767px) {
	.fixed-pattern {
		max-width: 360px;
	}
}

/* fixed-pattern end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-overview start */
.main-overview {
	background-color: var(--auo-blue);
	position: relative;
	overflow: hidden;
}


.main-overview .fixed-pattern1::before {
	width: 80px;
	height: 80px;
	background-image: url(/Other/energy/template/images/common/auo-main-overview-pattern1.svg);
	top: 252px;
	left: -182px;
}

.main-overview .fixed-pattern2::before {
	width: 424px;
	height: 152px;
	/* 20220224 DT:三裝置用同一張，不另外出圖 */
	background-image: url(/template/images/common/auo-main-overview-pattern2.png);
	bottom: 0px;
	right: -280px;
	background-position: center bottom;
}

@media screen and (max-width: 1199px) {
	.main-overview .fixed-pattern2::before {
		width: 232px;
		height: 120px;
		right: 20px;
	}

	.main-overview .fixed-pattern1::before {
		width: 56px;
		height: 56px;
	}
}

@media screen and (max-width: 767px) {
	.main-overview .fixed-pattern2::before {
		right: 10px;
	}
}

/* main-overview end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* click-insert-block start */
.click-insert-block {
	padding: 120px 0 168px;
}

.click-insert-block ul {
	display: flex;
	flex-wrap: wrap;
}

.click-insert-block .click-item {
	max-width: 344px;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}

.click-insert-block .click-item.blank .content {
	position: relative;
}


.click-insert-block .click-item:not(:nth-of-type(3n)) {
	margin-right: 24px;
}

.click-insert-block .click-item:nth-of-type(3n+1) {
	margin-left: calc((100% - 1080px) / 2);
}

.click-insert-block .click-item:nth-of-type(3n) {
	margin-right: calc((100% - 1080px) / 2);
}

.click-insert-block .click-item:nth-of-type(n+4) {
	margin-top: 80px;
}

.click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+4) {
	margin-top: 60px;
}

.click-insert-block .content {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.click-insert-block.has-selected .content:not(.selected):not(:hover) {
	opacity: .5;
}

.click-insert-block .img {
	height: 266px;
}

.click-insert-block .content .title {
	color: #FFFFFF;
	font-weight: bold;
	padding-top: 20px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.click-insert-block .content.selected .title,
.click-insert-block .click-item:hover .content .title {
	color: #FFE664;
}

.click-insert-block .clone-item .txt {
	padding-top: 24px;
}

.click-insert-block .clone-item .btn-block {
	/* padding-top: 32px; */
}

.click-insert-block .clone-item .btn-grow {
	width: 247.5px;
	padding: 14px 16px;
	height: auto;

}

.en .click-insert-block .clone-item .btn-grow .btn-title {
	line-height: 28px;
}

.click-insert-block .clone-item .btn-grow .btn-title {
	line-height: 26px;
}


.click-insert-block .insert-item {
	background-color: var(--gray-5);
	padding: 60px 0;
	width: 100%;
	margin-top: 60px;
}

@media screen and (max-width: 1199px) {
	.click-insert-block {
		padding: 80px 0 120px;
	}

	.click-insert-block .click-item {
		max-width: 320px;
	}

	/* 重置 */
	.click-insert-block .click-item:nth-of-type(n) {
		margin: 0;
	}

	.click-insert-block .click-item:nth-of-type(2n+1) {
		margin-left: calc((100% - 688px) / 2);
		margin-right: 48px;
	}

	.click-insert-block .click-item:nth-of-type(n+3),
	.click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+3) {
		margin-top: 48px;
	}

	.click-insert-block .img {
		height: 240px;
	}

	.click-insert-block .content .title {
		font-size: 20px;
		line-height: 28px;
		padding-top: 16px;
	}

	.click-insert-block .clone-item {
		max-width: 768px;
		margin: auto;
	}

	.click-insert-block .clone-item .txt {
		padding-top: 20px;
	}

	.click-insert-block .clone-item .btn-block {
		/* padding-top: 40px; */
	}

	.click-insert-block .clone-item .btn-grow {
		width: 320px;
		padding: 13px 16px;
		height: auto;
	}

	.en .click-insert-block .clone-item .btn-grow .btn-title {
		line-height: 22px;
	}

	.click-insert-block .clone-item .btn-grow .btn-title {
		line-height: 22px;
	}

	.click-insert-block .insert-item {
		padding: 40px 0;
		margin-top: 48px;
	}
}

@media screen and (max-width: 767px) {
	.click-insert-block {
		padding: 80px 0 200px;
	}

	.click-insert-block ul {
		display: block;
	}

	/* 重置 */
	.click-insert-block .click-item:nth-of-type(n) {
		margin: 0 auto;
	}

	.click-insert-block .click-item:nth-of-type(n+2),
	.click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+2) {
		margin-top: 40px;
	}

	.click-insert-block .insert-item {
		padding: 40px 0;
		margin-top: 40px;
	}

	.click-insert-block .clone-item {
		max-width: 100%;
	}

	.click-insert-block .clone-item .btn-grow {
		width: 320px;
		padding: 13px 16px;
		height: auto;
	}

	.click-insert-block .clone-item .btn-grow .btn-title {
		line-height: 22px;
	}

	.click-insert-block .clone-item .btn-grow:nth-child(n) {
		margin: 0 auto;
	}

	.click-insert-block .clone-item .btn-block {
		display: block;
	}

}

/* 低版本safari不兼容gap */

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {}
}

/* ---------------text------------------- */
.click-insert-block .btn-block-group {
	display: flex;
	flex-wrap: wrap;
	padding-top: 32px;
}

.click-insert-block .btn-block-group .btn-block {
	margin-right: 30px;
	padding-top: 0;
}

.click-insert-block .btn-block-group .btn-block:nth-child(4n) {
	margin-right: 0;
}

.click-insert-block .btn-block-group .btn-block:nth-child(n+5) {
	margin-top: 24px;
}

@media screen and (max-width: 1199px) {
	.click-insert-block .btn-block-group {
		padding-top: 40px;
	}

	.click-insert-block .btn-block-group .btn-block {
		margin-right: 24px;
	}


	.click-insert-block .btn-block-group .btn-block:nth-child(2n) {
		margin-right: 0;
	}

	.click-insert-block .btn-block-group .btn-block:nth-child(n+5) {
		margin-top: 0px;
	}

	.click-insert-block .btn-block-group .btn-block:nth-child(n+3) {
		margin-top: 20px;
	}
}

@media screen and (max-width: 767px) {
	.click-insert-block .btn-block-group {
		display: block;
	}

	.click-insert-block .btn-block-group .btn-block {
		margin-right: 0px;
	}

	.click-insert-block .btn-block-group .btn-block:nth-child(n+1) {
		margin-top: 20px;
	}
}


/* click-insert-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-intro-block start */
.main-intro-block {
	padding: 120px 0;
	position: relative;
	z-index: 1;
}

.main-intro-block .title {
	font-weight: bold;
	text-align: center;
	padding-bottom: 60px;
}

.main-intro-block .intro-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
}

.main-intro-block .img {
	width: 540px;
}

.main-intro-block .img img {
	width: 100%;
}

.main-intro-block .txt1 {
	width: 480px;
	margin-left: 60px;
}

.main-intro-block .txt2 {
	width: 100%;
	padding-top: 60px;
}


@media screen and (max-width: 1199px) {
	.main-intro-block {
		padding: 80px 0;
	}

	.banner-select-block~.main-content .main-intro-block {
		padding: 60px 0 80px;
	}

	.main-intro-block .title {
		padding-bottom: 40px;
		font-size: 26px;
		line-height: 36px;
	}

	.main-intro-block .img {
		width: 320px;
	}

	.main-intro-block .txt1 {
		width: 320px;
		margin-left: 48px;
	}

	.main-intro-block .txt2 {
		padding-top: 40px;
	}
}

@media screen and (min-width: 768px) {
	.main-intro-block .more-btn-block {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	.main-intro-block .intro-block {
		display: block;
	}

	.main-intro-block .img {
		margin: auto;
	}

	.main-intro-block .more-content {
		margin: 40px 0 0;
	}

	.main-intro-block .more-unclicked .more-content {
		max-height: 132px;
		overflow: hidden;
		margin: 40px 0 0;
	}

	.main-intro-block .txt1 {
		margin: 0;
		width: 100%;
	}

	.main-intro-block .txt2 {
		width: 100%;
		padding-top: 22px;
	}

	.main-intro-block .more-btn-block {
		padding-top: 40px;
		text-align: center;
		margin: auto;
	}

	.main-intro-block .has-more-block:not(.more-unclicked) .more-btn-block {
		/* 表示已點擊過 */
		display: none !important;
	}

	.main-intro-block .more-btn {
		color: #414141;
		position: relative;
		font-weight: bold;
		width: 200px;
		text-align: center;
		/* 以下為特殊處理，將btn作用範圍擴大 */
		padding: 10px;
		margin: -10px auto;
		cursor: pointer;
	}
}

/* main-intro-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-tab-swiper-block start */
.main-tab-swiper-block {
	position: relative;
	overflow: hidden;
}

.main-tab-swiper-block::before {
	position: absolute;
	content: '';
	display: block;
	background-color: var(--gray-4);
	width: 100%;
	height: 10px;
	bottom: 0;
}

.main-tab-swiper .swiper-wrapper {
	align-items: flex-end;
}

.main-tab-swiper .swiper-slide {
	flex: 1;
	height: 100%;
}

.main-tab-swiper .swiper-slide+.swiper-slide {
	margin-left: 24px;
}

.main-tab-swiper a {
	display: flex;
	/* position: relative; */
	font-weight: bold;
	text-align: center;
	color: var(--gray-2);
	justify-content: center;
	flex-wrap: wrap;
}

.main-tab-swiper .active a {
	color: var(--auo-blue);
}

.main-tab-swiper a .txt {
	width: 100%;
}

.main-tab-swiper a::after {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	height: 16px;
	margin-top: 16px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.main-tab-swiper .active a::after {
	background-color: #64DCF0;
}

.main-tab-swiper .tab-indicator {
	position: absolute;
	height: 16px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	background-color: #64DCF0;
	width: 0px;
	bottom: 0;
	pointer-events: none;
}

@media screen and (min-width: 1200px) {

	/* 1200以上才需要hover效果 */
	.main-tab-swiper a:hover {
		color: var(--auo-blue);
	}

	.main-tab-swiper .hover-active .tab-indicator {
		width: 100%;
		opacity: 1;
	}
}

@media screen and (max-width: 1199px) {
	.main-tab-swiper-block::before {
		height: 8px;
	}

	.main-tab-swiper .swiper-slide {
		flex: unset;
		width: 200px !important;
		min-width: 200px;
	}

	.main-tab-swiper .swiper-slide+.swiper-slide {
		margin-left: 12px;
	}

	.main-tab-swiper a {
		font-size: 18px;
		line-height: 26px;
	}

	.main-tab-swiper a::after {
		height: 12px;
		margin-top: 8px;
	}
}


/* main-tab-swiper-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-video-block start */

.main-video-block {
	padding: 120px 0;
	position: relative;
	overflow: hidden;
	background-color: var(--gray-5);
}

.main-video-block .title {
	padding-bottom: 40px;
	text-align: center;
}

.main-video-block *+.video-list {
	padding-top: 60px;
}

.main-video-block .video-list li {
	display: flex;
	align-items: center;
}

.main-video-block .video-list li+li {
	padding-top: 80px;
}

/* 20220718 修改 vedio圖片尺寸 */
.main-video-block .video-list .img {

	width: 540px;
	/* height: 480px; */
	height: 405px;
}

/* 20220718 修改 由於尺寸修改後不是用border-radius完成 改用clip path計算圓形該使起點 */
.main-video-block .video-list .img a {
	display: block;
	height: 100%;
	border-radius: 0 205px 205px 0 !important;
	position: relative;
	overflow: hidden !important;
	clip-path: content-box;
}

.main-video-block .video-list .img a::after,
.main-video-block .video-list .img a::before {
	top: 0;
	left: 0;
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0 205px 205px 0 !important;
}

.main-video-block .video-list .img a::before {
	background-color: #000;
	opacity: 0.2;
	z-index: 1;
}


.main-video-block .video-list .img a::after {
	background-image: url(/Other/energy/template/images/common/auo-icon-video-play.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 88px;
	z-index: 2;
}

.main-video-block .video-list .txt {
	width: 480px;
	margin-left: 60px;
}

.main-video-block .video-list .title {
	padding-bottom: 20px;
	text-align: left;
}

.main-video-block .video-list .brief {
	padding-bottom: 20px;
}

@media screen and (max-width: 1199px) {
	.main-video-block {
		padding: 80px 0;
	}

	.main-video-block .title {
		font-size: 26px;
		line-height: 36px;
		padding-bottom: 20px;
	}

	.main-video-block *+.video-list {
		padding-top: 80px;
	}

	/* 20220718 修改 vedio圖片尺寸 */
	.main-video-block .video-list .img {
		width: 320px;
		/* height: 284px; */
		height: 240px;
	}

	.main-video-block .video-list .img a {
		border-radius: 0 120px 120px 0 !important;
	}

	.main-video-block .video-list .img a::after,
	.main-video-block .video-list .img a::before {
		border-radius: 0 120px 120px 0 !important;
	}

	.main-video-block .video-list .img a::after {
		background-size: 60px;
	}

	.main-video-block .video-list .txt {
		width: 320px;
		margin-left: 48px;
	}

	.main-video-block .video-list .title {
		font-size: 22px;
		line-height: 28px;
	}
}

@media screen and (max-width: 767px) {
	.main-video-block .video-list li {
		flex-wrap: wrap;
	}

	.main-video-block .video-list .img {
		order: 1;
		margin: 40px auto 0;
	}

	.main-video-block .video-list .txt {
		width: 100%;
		margin-left: 0;
	}
}

/* main-video-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-full-img-block start */
.main-full-img-block {
	position: relative;
	min-height: 640px;
}

.main-full-img-block .img-fit {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.main-full-img-block .img-fit::after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.4;
}

.main-full-img-block .txt {
	max-width: 880px;
	padding: 160px 0;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.main-full-img-block .title {
	padding-bottom: 20px;
}

.main-full-img-block p {
	padding-bottom: 40px;
}

@media screen and (max-width: 1199px) {
	.main-full-img-block {
		min-height: 420px;
	}

	.main-full-img-block .txt {
		max-width: 600px;
		padding: 80px 0;
	}

	.main-full-img-block p {
		padding-bottom: 20px;
	}
}

@media screen and (max-width: 767px) {

	.main-full-img-block .txt {
		max-width: 100%;
	}

}

/* main-full-img-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-application-block start */
.main-application-block {
	background-color: var(--auo-blue);
	padding: 80px 0 0;
	overflow: hidden;
}

.main-application-block .title {
	padding-bottom: 20px;
}

.main-application-block .intro {
	padding-bottom: 24px;
}

.main-application-block .txt1 {
	padding-bottom: 40px;
}

.main-application-block .title a {
	display: inline-block;
	margin-left: 40px;
}

.main-application-block .application-swiper {
	transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	max-width: 1080px;
}

.main-application-block .swiper-btn-block {
	padding-bottom: 40px;
}

/* 寫margin-left在swiper切換時會無法與上方標題切齊 */
/* 最後一則須留間隔拿掉:not(:last-child) */
/* products-swiper */
.main-application-block .swiper-slide {
	margin-right: 0px;
}

.main-application-block .swiper-slide {
	width: 1080px;
}

.main-application-block .img-fit {
	height: 100%;
}

.main-application-block .swiper-slide .title {
	padding: 20px 0 8px;
}

@media screen and (max-width: 1199px) {
	.main-application-block {
		padding: 80px 0;
	}

	.main-application-block .swiper-btn-block {
		padding-bottom: 24px;
	}

	/* .main-application-block .application-swiper {
		width: calc(100% - (100% - 688px)/2);
		margin-left: calc((100% - 688px)/2);
	} */

	.main-application-block .application-swiper {
		max-width: 688px;
	}

	.main-application-block .swiper-slide {
		width: 688px;
	}

	.main-application-block .swiper-slide .title {
		padding: 16px 0 6px;
	}

	.main-application-block .img-fit {
		height: 100%;
	}

	/* 寫margin-left在swiper切換時會無法與上方標題切齊 */
	/* .main-application-block .swiper-slide{
		margin-right: 20px;
	} */
}

@media screen and (max-width: 767px) {
	.main-application-block .application-swiper {
		width: calc(100% - 20px);
		margin-left: 20px;
	}

	.main-application-block .swiper-slide .title {
		padding: 16px 0 8px;
	}

	.main-application-block .btn-block {
		padding-top: 36px;
	}

}

/* main-application-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-sticky-block start */
.main-sticky-block {
	background-color: var(--auo-blue);
	padding: 0 0 132px;
	position: relative;
}

.main-sticky-block .container {
	position: relative;
	display: flex;
}

.main-sticky-block .left-block,
.main-sticky-block .right-block {
	padding-top: 120px;
}

.main-application-block+.main-sticky-block .left-block,
.main-application-block+.main-sticky-block .right-block {
	margin-top: -120px;
}

.main-sticky-block .left-block {
	position: sticky;
	top: 0;
	width: 258px;
	height: 100vh;
}

.main-sticky-block .pattern-block {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100vw - 10px);
	left: calc((-100vw + 1080px)/2);
	height: 775px;
	overflow: hidden;
}

.main-sticky-block .pattern-wrap {
	width: 100vw;
}

/* pattern若非定位在left-block上，會跟著捲動 */
.main-sticky-block .pattern-wrap::before {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 332px;
	height: 540px;
	/* 須貼著瀏覽器 */
	left: calc((-100vw + 1080px)/2);
	left: 0;
	top: 187px;
	background-image: url(/template/images/solutions/auo-solution-pattern3.png);
}

.main-sticky-block .pattern-wrap::after {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 40px;
	height: 40px;
	left: calc((100vw - 1080px)/2 + 1329px);
	top: 252px;
	background-image: url(/template/images/solutions/auo-solution-pattern4.png);
}


.main-sticky-block .right-block {
	margin-left: 122px;
	width: 700px;
}

.main-sticky-block li {
	display: flex;
}

.main-sticky-block li+li {
	padding-top: 72px;
}


.main-sticky-block .img {
	width: 120px;
	height: 120px;
}

.main-sticky-block .img img {
	object-fit: contain;
}

.main-sticky-block .txt {
	width: 520px;
	margin-left: 60px;
}

.main-sticky-block .brief {
	padding-top: 10px;
}

.main-sticky-block a {
	display: inline-block;
	padding: 10px;
	margin: 0 -10px -10px;
}

@media screen and (max-width: 1199px) {
	.main-sticky-block {
		padding: 0 0 80px;
		position: relative;
	}

	.main-sticky-block .left-block,
	.main-sticky-block .right-block {
		padding-top: 80px;
	}

	.main-application-block+.main-sticky-block .left-block,
	.main-application-block+.main-sticky-block .right-block {
		margin-top: -80px;
	}

	.main-sticky-block .left-block {
		width: 248px;
	}

	.main-sticky-block .pattern-block {
		width: calc(100vw - 10px);
		left: calc((-100vw + 768px)/2 - 100px);
		height: 775px;
	}

	.main-sticky-block .pattern-wrap {
		width: 100vw;
	}

	/* pattern若非定位在left-block上，會跟著捲動 */
	.main-sticky-block .pattern-wrap::before {
		width: 280px;
		height: 320px;
		top: 57px;
	}

	.main-sticky-block .pattern-wrap::after {
		/* 因sticky無法同時設定overflow-hidden，平板與手機會超出裝置寬 */
		display: none;
	}

	.main-sticky-block .right-block {
		margin-left: 40px;
		width: 408px;
	}

	.main-sticky-block li+li {
		padding-top: 40px;
	}


	.main-sticky-block .img {
		width: 80px;
		height: 80px;
	}

	.main-sticky-block .txt {
		width: 312px;
		margin-left: 16px;
	}

	.main-sticky-block .brief,
	.main-sticky-block a {
		padding-top: 8px;
	}
}

@media screen and (max-width: 767px) {
	.main-sticky-block .container {
		display: block;
	}

	.main-sticky-block .left-block {
		width: 100%;
		height: auto;
		position: relative;
	}

	.main-sticky-block .right-block {
		margin: 0px !important;
		width: 100%;
		padding-top: 40px;
	}

	.main-sticky-block .txt {
		width: auto;
		flex: 1;
	}
}

/* main-sticky-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-related-info-block start */
.main-related-info-block {
	background-color: var(--energetic-yellow);
	padding: 120px 0;
	overflow: hidden;
}

.main-related-info-block .title {
	padding-bottom: 24px;
}

.main-related-info-block .swiper-btn-block {
	padding-bottom: 40px;
}

.main-related-info-block .related-swiper {
	width: calc(100% - (100% - 1080px)/2);
	margin-left: calc((100% - 1080px)/2);
}

.main-related-info-block .swiper-slide {
	width: 344px;
}

/* 寫margin-left在swiper切換時會無法與上方標題切齊 */
/* 拿掉:not(:last-child) */
.main-related-info-block .swiper-slide {
	margin-right: 24px;
}

.main-related-info-block .img {
	height: 344px;
}

.main-related-info-block .tag {
	padding-top: 12px;
}

.main-related-info-block .related-swiper .title {
	padding: 8px 0 0;
}

@media screen and (max-width:1199px) {
	.main-related-info-block {
		padding: 80px 0 127px;
	}

	.main-related-info-block .swiper-btn-block {
		padding-bottom: 24px;
	}

	.main-related-info-block .related-swiper {
		width: calc(100% - (100% - 688px)/2);
		margin-left: calc((100% - 688px)/2);
	}

	.main-related-info-block .swiper-slide {
		width: 240px;
	}

	.main-related-info-block .img {
		height: 240px;
	}
}

@media screen and (max-width: 767px) {
	.main-related-info-block .related-swiper {
		width: calc(100% - 20px);
		margin-left: 20px;
	}

	.main-related-info-block .tag {
		padding-top: 16px;
	}
}

/* main-related-info-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* main-contact-block start */
.main-contact-block {
	background-color: var(--sustainable-green);
	background-clip: content-box;
	overflow: hidden;
	/* 為了讓pattern可以完整顯示，因無法單純使用overflow達成 */
	padding-top: 45px;
	margin-top: -45px;
}

.main-contact-block .list {
	padding: 95px 0;
	display: flex;
	align-items: center;
	min-height: 370px;
	position: relative;
}

.main-contact-block li {
	display: flex;
	flex-wrap: wrap;
}

.main-contact-block li+li {
	margin-left: 80px;
	padding-left: 80px;
}

/* 有兩塊才需要白線，白線高度要依整個區塊高度 */
.main-contact-block li+li::before {
	position: absolute;
	content: '';
	display: block;
	width: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.4);
	height: calc(100% - 160px);
}

.main-contact-block .txt {
	width: 460px;
	padding-bottom: 40px;
}

.main-contact-block .btn-block {
	width: 100%;
}

.main-contact-block .fixed-pattern1::before {
	width: 40px;
	height: 40px;
	background-image: url(/template/images/common/auo-contact-block-pattern1.png);
	top: 187px;
	left: -143px;
}

.main-contact-block .fixed-pattern2::before {
	width: 360px;
	height: 324px;
	background-image: url(/template/images/common/auo-contact-block-pattern2.png);
	top: -45px;
	right: -200px;
}

@media screen and (max-width:1199px) {
	.main-contact-block {
		/* 為了讓pattern可以完整顯示，因無法單純使用overflow達成 */
		padding-top: 32px;
		margin-top: -32px;
	}

	.main-contact-block .list {
		padding: 80px 0;
		min-height: 308px;
		align-items: flex-start;
	}

	.main-contact-block li+li {
		margin-left: 24px;
		padding-left: 24px;
	}

	/* 有兩塊才需要白線，白線高度要依整個區塊高度 */
	.main-contact-block li+li::before {
		height: calc(100% - 120px);
	}

	.main-contact-block .txt {
		width: 320px;
	}

	.main-contact-block .fixed-pattern2::before {
		width: 200px;
		height: 155px;
		top: -32px;
		right: auto;
		left: 580px;
		background-size: auto 100%;
		background-position: left center;
	}

	.main-contact-block .fixed-pattern1::before {
		width: 28px;
		height: 28px;
	}
}

@media screen and (max-width: 767px) {

	.main-contact-block .list {
		padding: 80px 0;
		min-height: auto;
		display: block;
	}

	.main-contact-block li+li {
		margin: 60px 0px 0;
		padding: 60px 0px 0;
		position: relative;
	}

	/* 有兩塊才需要白線，白線高度要依整個區塊高度 */
	.main-contact-block li+li::before {
		width: 100%;
		height: 2px;
		top: 0;
		left: 0;
		transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-webkit-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
	}

	.main-contact-block .txt {
		width: 100%;
	}

	.main-contact-block .fixed-pattern2::before {
		right: -70px;
		left: auto;
		width: 185px;
		background-position: 0 0;
		background-size: auto 100%;
	}
}

/* main-contact-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* 影片popup start */
.mfp-bg {
	background-color: #003C65;
}

.mfp-iframe-holder {
	padding: 100px 0;
}

.mfp-iframe-holder .mfp-content {
	max-width: 768px;
}

.mfp-iframe-holder .mfp-content::after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: black;
	top: 0;
	left: 0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	pointer-events: none;
}

.mfp-iframe-holder .mfp-content.load::after {
	opacity: 0;
}

.mfp-iframe-holder .mfp-close {
	padding: 0;
	right: 0;
	height: 76px;
	line-height: normal;
	top: auto;
	bottom: 100%;
	opacity: 1;
	/* background-position: right top;
	background-repeat: no-repeat;
	background-size: auto 48px;
	background-image: url(/Other/energy/template/images/common/auo-popup-close-btn.svg); */
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	/* position: relative; */
}

.mfp-iframe-holder .mfp-close::before,
.mfp-iframe-holder .mfp-close::after {
	content: '';
	display: block;
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	right: 0;
	height: 76px;
	line-height: normal;
	top: 0;
	bottom: 100%;
	background-position: right top;
	background-repeat: no-repeat;
	background-size: auto 48px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}


.mfp-iframe-holder .mfp-close::before {
	background-image: url(/Other/energy/template/images/common/auo-popup-close-btn.svg);
	opacity: 1;
}

.mfp-iframe-holder .mfp-close::after {
	background-image: url(/Other/energy/template/images/common/auo-popup-close-hover.svg);
	opacity: 0;
}

.mfp-iframe-holder .mfp-close:hover::after {
	opacity: 1;

}

.mfp-iframe-holder .mfp-close:hover::before {
	opacity: 0;

}


/* .mfp-iframe-holder .mfp-close:hover {
	background-image: url(/Other/energy/template/images/common/auo-popup-close-hover.svg);
} */

.mfp-iframe-holder iframe {
	background-color: black;

}


.mfp-iframe-holder iframe video {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1199px) {
	.mfp-iframe-holder {
		padding: 100px 40px;
	}
}

@media screen and (max-width: 767px) {
	.mfp-iframe-holder {
		padding: 80px 20px;
	}
}

/* 影片popup end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */

/* 原地播放影片(mp4) start */
.video-wrap {
	position: relative;
	cursor: pointer;
}

/* 20220505 service單元youtube外連影片 */
.video-wrap.youtube-wrap {
	padding-bottom: 56.25%;
}


.video-wrap::after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/Other/energy/template/images/common/auo-icon-video-play.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 108px;
	background-color: rgba(0, 0, 0, .2);
	left: 0;
	top: 0;
	pointer-events: none;
}

.video-wrap.youtube-wrap::after {
	background-color: transparent;
	background-image: none;
}

.video-wrap.youtube-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}


.video-wrap.play::after {
	display: none;
}

.video {
	max-width: 100%;
	cursor: pointer;
	display: block;
}

.video::-webkit-media-controls {
	opacity: 0;
	pointer-events: none;
}

.play .video::-webkit-media-controls {
	opacity: 1;
	pointer-events: all;
}

@media screen and (max-width: 1199px) {
	.video-wrap::after {
		background-size: 60px;
	}
}


/* 原地播放影片 end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* .main-feature-block start */
.main-feature-block {
	padding: 120px 0 160px;
	background-color: var(--gray-5);
}

.main-feature-block li {
	display: flex;
}

.main-feature-block li.img-down {
	flex-wrap: wrap;
}

.main-feature-block li+li {
	padding-top: 80px;
}

.main-feature-block .title {
	padding-bottom: 40px;
}

.main-feature-block li:not(.img-down) .txt {
	padding-top: 28px;
}

.main-feature-block .txt {
	width: 480px;
}

.main-feature-block .img-down .txt {
	width: 100%;
}

.main-feature-block .img-left .txt {
	margin-left: 60px;
	order: 1;
}

.main-feature-block .txt .title {
	padding-bottom: 20px;
}

.main-feature-block .img-down .title {
	text-align: center;
	padding-bottom: 40px;
}

.main-feature-block .img {
	width: 540px;
	margin-left: 60px;
}

.main-feature-block .img-down .img {
	padding-top: 40px;
	width: 100%;
	margin-left: 0px;
}

.main-feature-block .img-left .img {
	margin-left: 0px;
}

.main-feature-block .img img {
	width: 100%;
}

@media screen and (max-width: 1199px) {
	.main-feature-block {
		padding: 80px 0;
	}

	.main-feature-block .title {
		padding-bottom: 20px;
	}

	.main-feature-block .txt {
		width: 320px;
	}

	.main-feature-block li:not(.img-down) .txt {
		padding-top: 20px;
	}

	.main-feature-block .img-left .txt {
		margin-left: 48px;
	}

	.main-feature-block .img {
		width: 320px;
		margin-left: 48px;
	}

}

@media screen and (max-width: 767px) {
	.main-feature-block {
		padding: 80px 0 120px;
	}

	.main-feature-block li {
		flex-wrap: wrap;
	}

	.main-feature-block .txt {
		width: 100%;
	}

	.main-feature-block .img-down .title {
		text-align: left;
		padding-bottom: 20px;
	}

	.main-feature-block li:not(.img-down) .txt {
		padding-top: 0px;
	}

	.main-feature-block .txt:nth-child(n) {
		margin: 0;
		order: 0;
	}

	.main-feature-block .img {
		margin: 0;
		padding: 40px 0 0;
		width: 100%;
	}

}

/* .main-feature-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* .error-404 start */
.error-404 {
	background-image: url("/template/images/common/auo-404.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: calc(100vh - 120px);
	padding: 280px 0 436px 0;
}

.error-404 .content-block {
	max-width: 680px;
}

.error-404 .title {
	padding-bottom: 28px;
}

.error-404 .txt {
	padding-bottom: 40px;
	max-width: 460px;
}

.error-page .fixed-pattern {
	max-width: none;
}

.error-page .fixed-pattern1.show-pc::before {
	background-image: url("/template/images/common/auo-404-pattern-1.png");
	height: 229px;
	width: 256px;
	left: 0px;
	bottom: 0px;
}

.error-page .fixed-pattern2.show-pc::before {
	background-image: url("/template/images/common/auo-404-pattern-2.png");
	height: 105px;
	width: 130px;
	left: 163px;
	bottom: 239px;
}

@media screen and (max-width: 1199px) {
	.error-404 {
		background-image: none;
		background-color: var(--sustainable-green);
		min-height: calc(100vh - 547px);
		padding: 120px 0;
	}

	.error-404 .content-block {
		max-width: none;
	}

	.error-404 .title {
		padding-bottom: 20px;
	}

	.error-404 .txt {
		padding-bottom: 20px;
		max-width: none;
	}

	.error-page .fixed-pattern2.hidden-pc::before {
		background-image: url("/template/images/common/auo-404-pattern-3.png");
		height: 227px;
		width: 192px;
		right: 0px;
		bottom: -1px;
	}
}

@media screen and (max-width: 767px) {
	.error-404 {
		/* background-image: url(/template/images/common/auo-404-mb.jpg); */
		min-height: calc(100vh - 513px);
		padding: 120px 0 160px;
	}

	.error-404 .content-block {
		max-width: 100%;
	}

	.error-page .fixed-pattern2.hidden-pc::before {
		height: 221px;
		width: 180px;
		bottom: -5px;
	}

}

/* .error-404 end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* sitemap start */
.txt-banner {
	background-color: var(--gray-5);
	min-height: 218px;
	display: flex;
	align-items: center;
}

.txt-banner .title {
	padding: 60px 0;
}

.sitemap {
	padding: 80px 0 120px;
}

.sitemap .fixed-pattern1::before {
	position: absolute;
	content: '';
	display: block;
	width: 106px;
	height: 114px;
	background-image: url(/template/images/common/auo-sitemap-pattern.png);
	top: -110px;
	right: -159px;
}

.sitemap .list {
	display: flex;
	flex-wrap: wrap;
}

.sitemap .list>li {
	width: 320px;
	margin-right: 60px;
}

.sitemap .list>li:nth-child(3n) {
	margin-right: 0;
}

.sitemap .list>li:nth-child(n+4) {
	padding-top: 80px;
}

.sitemap .list .title {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gray-5);
}

.sitemap .sub-list li+li {
	padding-top: 10px;
}

.sitemap .sub-list a {
	color: var(--gray-1);
	display: inline-block;
	padding: 0px 10px;
	margin: 0px -10px;
	line-height: 24px;
}

.sitemap .sub-list li+li {
	padding-top: 10px;
}

.sitemap .sub-list a:hover {
	color: var(--smart-blue);
}

@media screen and (max-width: 1199px) {
	.sitemap {
		padding: 80px 0;
	}

	.sitemap .list>li:nth-child(n) {
		width: calc((100% - 60px)/2);
		margin-right: 60px;
	}

	.sitemap .list>li:nth-child(2n) {
		margin-right: 0;
	}

	.sitemap .list>li:nth-child(n+3) {
		padding-top: 80px;
	}
}

@media screen and (max-width: 767px) {
	.sitemap {
		padding: 60px 0;
	}

	.sitemap .list>li:nth-child(n) {
		width: 100%;
		margin-right: 0px;
	}

	.sitemap .list>li:nth-child(n+2) {
		padding-top: 60px;
	}

}

/* sitemap end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */

/* open-close-list start */
.open-close-item>.title {
	position: relative;
	transition: all .5s;
	cursor: pointer;
}

.open-close-item .content {
	display: none;
}

.open-close-item .arrow {
	position: absolute;
	left: 24px;
	/* top: 35px; */
	top: 50%;
}

.open-close-item .arrow:before,
.open-close-item .arrow:after {
	content: "";
	display: block;
	background-color: var(--smart-blue);
	position: absolute;
	top: 50%;
	left: 0px;
	-webkit-transition: .35s;
	transition: .35s;
	width: 24px;
	height: 4px;
}

.open-close-item .arrow:before {
	-webkit-transform: translatey(-50%);
	transform: translatey(-50%);
}

.open-close-item .arrow:after {
	-webkit-transform: translatey(-50%) rotate(90deg);
	transform: translatey(-50%) rotate(90deg);
}

.open-close-item.open .arrow:after {
	-webkit-transform: translatey(-50%) rotate(0);
	transform: translatey(-50%) rotate(0);
}

@media screen and (max-width: 1199px) {
	.open-close-item .arrow {
		left: 16px;
		top: 30px;
	}

	.open-close-item .arrow:before,
	.open-close-item .arrow:after {
		width: 20px;
	}
}

/* right-block open close */
.right-block .right-open-close-wrapper li.open-close-item {
	/* width: 600px; */
	width: 100%;
	border-bottom: 1px solid var(--gray-5);
}

.right-block .right-open-close-wrapper .open-close-list li:first-child {
	border-top: 1px solid var(--gray-5);

}

.right-block .right-open-close-wrapper li .title {
	padding: 20px 24px 20px 72px;
}

.right-block .right-open-close-wrapper .open-close-item .content .html-edit li {
	border-top: none;
	border-bottom: none;
}

.right-block .right-open-close-wrapper .open-close-item .content {
	padding: 8px 24px 20px 72px;
}

/* full page open close */
.full-open-close-wrapper .open-close-item .title {
	padding: 20px 23px 20px 72px;
}


.full-open-close-wrapper .open-close-item .content {
	padding: 8px 23px 20px 72px;
}

.full-open-close-wrapper .open-close-list .open-close-item {
	border-bottom: 1px solid var(--gray-5);

}

.full-open-close-wrapper .open-close-list .open-close-item:first-child {
	border-top: 1px solid var(--gray-5);
}

.full-open-close-wrapper .open-close-item .btn-block {
	padding-top: 20px;
}



@media screen and (max-width: 1199px) {}


@media screen and (max-width: 1199px) {
	.right-block .right-open-close-wrapper li .title {
		padding: 16px 16px 16px 52px;
	}

	.right-block .right-open-close-wrapper .open-close-item .content {
		padding: 0 16px 20px 16px;
	}

	.full-open-close-wrapper .open-close-item .title {
		padding: 16px 23px 16px 52px;
	}

	.full-open-close-wrapper .open-close-item .content {
		padding: 0px 16px 20px;
	}


}

@media screen and (max-width: 767px) {}


/* open-close-list end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */








/* Elin start */

/* =====================================search-page start=============================*/
/* =====================================search-page start=============================*/
/* =====================================search-page start=============================*/
.search-page.container {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* .search-page .search-input + .btn-block{
	padding-top: 0;
} */

.search-form.search-page {
	display: flex;
	justify-content: center;
	padding-top: 0;
}

@media screen and (max-width: 767px) {
	.search-form.search-page {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

/* =====================================search-page end=============================*/
/* =====================================search-page end=============================*/
/* =====================================search-page end=============================*/

/* ========================== Banner ======================= */
/* ========================== Banner ======================= */
/* ========================== Banner ======================= */
/* ========================== Banner ======================= */
/* .banner-select-block > .container,
.banner-block > .container{
	padding: 0 40px;
} */


.bg-cover {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.banner-block {
	position: relative;
	overflow: hidden;
	height: 420px;
}

.banner-line {
	background-color: #fff;
	height: 1px;
	width: 100%;
	margin: 18px 0;
}

.banner-info {
	width: 100%;

}


.breadcrumb {
	background-color: transparent;
	padding-top: 32px;
	margin-bottom: 0;
	z-index: 50;
}

.breadcrumb-type-b *,
.breadcrumb * {
	color: var(--auo-blue);
}

.breadcrumb-type-b span,
.breadcrumb span {
	padding: 0 5px;
}



.banner-block:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	z-index: -1;
}


.breadcrumb+.banner-title {
	top: 160px;
	transform: translate(0%, 0%);
	-moz-transform: translate(0%, 0%);
	-webkit-transform: translate(0%, 0%);
	-o-transform: translate(0%, 0%);
}

.banner-title {
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
	-moz-transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);

}


/* type-b */


.banner-type .pattern-block {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	background-size: cover;
	background-position: left;
}

.banner-type .pattern-block.product {
	background-image: url('/template/images/banner/auo-product-pattern-banner.jpg');
}

.banner-type .pattern-block.solution {
	background-image: url('/template/images/banner/auo-solution-pattern-banner.jpg');
}

.banner-type .pattern-block.support {
	background-image: url('/template/images/banner/auo-support-pattern-banner.jpg');
}

.banner-type .pattern-block.about {
	background-image: url('/template/images/banner/auo-about-pattern-banner.jpg');
}

.banner-type .pattern-block.news {
	background-image: url('/template/images/banner/auo-news-pattern-banner.jpg');
}

.banner-type .pattern-block.experience {
	background-image: url('/template/images/banner/auo-experience-pattern-banner.jpg');
}

/* 20220823_Jared更新banner pattern圖 */
.banner-type .pattern-block.core {
	background-image: url('/template/images/banner/auo-core-competencies-pattern-banner.jpg');
}

.banner-type .image-block {
	position: absolute;
	top: 0;
	right: 0;

	width: 50%;
	height: 100%;
	z-index: -1;
}


.banner-type .banner-title {
	width: calc(100% * 0.5 - (100% - 1080px) / 2);
	padding-right: 40px;
}

.banner-select-block {
	width: 100%;
	height: 80px;
	background-color: var(--gray-6);
	padding: 13px 0;

}

.select-block {
	position: relative;
	width: auto;
	display: inline-block;
}

.banner-select {
	min-width: 360px;
	height: 54px;
	border: 0;
	background-color: var(--white);
	color: var(--auo-blue);
	/* background: url("/Other/energy/template/images/common/auo-select-arrow.svg") no-repeat right 17px center transparent; */

	/* position: relative; */
	z-index: 2;
	cursor: pointer;
	padding-right: 48px;
	padding-left: 24px;
	border-radius: 28px;
}

.select-block::after {
	content: '';
	display: block;
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translate(0, -50%);
	width: 30px;
	height: 30px;
	background-image: url("/Other/energy/template/images/common/auo-select-arrow.svg");
	background-repeat: no-repeat;
	background-size: cover;
	/* background-position:; */
	z-index: 1;
	pointer-events: none;
	background-position: center;
}





@media (max-width: 1199px) {
	.breadcrumb {
		padding-top: 24px;

	}

	.banner-block {
		/*0609 Elin 32:7的圖伸縮於1200後高度為 262.5 ，在舊型平板中難以渲染出0.5px而出現白邊，故所有tb banner都減少1px，由263->262 */
		height: 262px;
		background-position: center;
	}

	.banner-type-A.banner-block {
		background-size: 1200px;
	}

	.banner-block .container {
		padding-top: 0;
	}

	.breadcrumb+.banner-title,
	.banner-title {
		top: 90px;
		transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-webkit-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
	}

	.banner-type .pattern-block {
		width: 50%;
	}

	.banner-type .image-block {
		width: 50%;
	}

	.banner-type .banner-title {
		width: calc(100% * 0.5 - 80px);
		padding-right: 0px;
	}

	/* select */

	.banner-select-block {
		height: 72px;
		padding: 12px 0;
	}

	.banner-select {
		min-width: 320px;
		height: 48px;
		padding-left: 16px;
		padding-right: 46px;
	}

	.select-block::after {
		width: 22px;
		height: 22px;
		right: 16px;
	}






}

@media (max-width: 767px) {
	.banner-block {
		height: 200px;
		background-image: none !important;
	}



	.banner-mb {
		height: 200px;
	}

	.breadcrumb+.banner-title,
	.banner-title {
		top: 80px;
		max-width: calc(100% - 40px);
	}

	.banner-type.banner-block {
		height: auto;
	}

	.banner-type .pattern-block {
		position: static;
		width: 100%;
		height: 160px;
		background-position: center;
	}


	.banner-type .pattern-block.product {
		background-image: url('/template/images/banner/auo-product-pattern-banner-m.jpg');
	}

	.banner-type .pattern-block.solution {
		background-image: url('/template/images/banner/auo-solution-pattern-banner-m.jpg');
	}

	.banner-type .pattern-block.support {
		background-image: url('/template/images/banner/auo-support-pattern-banner-m.jpg');
	}

	.banner-type .pattern-block.about {
		background-image: url('/template/images/banner/auo-about-pattern-banner-m.jpg');
	}

	.banner-type .pattern-block.news {
		background-image: url('/template/images/banner/auo-news-pattern-banner-m.jpg');
	}

	.banner-type .pattern-block.experience {
		background-image: url('/template/images/banner/auo-experience-pattern-banner-m.jpg');
	}

	/* 20220823_Jared更新banner pattern圖 */
	.banner-type .pattern-block.core {
		background-image: url('/template/images/banner/auo-core-competencies-pattern-banner-m.jpg');
	}

	.banner-type .image-block-m {
		width: 100%;
		height: 280px;
	}

	.banner-type .breadcrumb+.banner-title,
	.banner-type .banner-title {
		top: 48px;
		width: auto;
	}



	.select-block {
		width: 100%;
	}

	.banner-select {
		width: 100%;
		margin-left: 0;
	}



}

@media (max-width: 559px) {

	.banner-type .image-block-m {
		height: auto;
		aspect-ratio: 2 / 1;
	}
}

/* html edit page banner */
.video-banner .title,
.html-banner .title,
.html-banner .tag {
	padding: 60px 0 0;
}

.html-banner .tag {
	font-size: 20px;
	/* tbc */
	line-height: 24px;
}

.html-banner .tag+.title {
	padding-top: 20px;
}

.html-banner .container {
	position: relative;
	z-index: 1;
}

.video-banner .brief,
.html-banner .brief {
	padding-top: 20px;
}

.video-banner .brief {
	padding-bottom: 80px;
}

.share-published-wrapper {
	display: flex;
	justify-content: space-between;
	padding-top: 36px;
	padding-bottom: 60px;
}

.share-published-wrapper p {
	align-self: flex-end;
}

/* 0602 */
.addthis-wrapper .at-share-btn-elements a {
	/* background-color: transparent!important; */
	/* padding: 0; */
	/* margin: 0 0 0 16px; */
}

.addthis-wrapper .img {
	width: 176px;
	height: 48px;
}

.video-banner .fixed-pattern1,
.html-banner .fixed-pattern1 {
	max-width: none;
	z-index: 0;
}

.newsarchieve-pattern::before {
	width: 380px;
	height: 315px;
	/* 1200container */
	/* top: -244px;
	right: -556px; */
	top: -244px;
	right: -96px;
	background-image: url('/template/images/media/auo-media-newsarchive-pattern.png');
}

.media-event-pattern::before {
	background-image: url('/template/images/media/auo-media-event-pattern.png');
	top: -266px;
	right: 0;
	width: 292px;
	height: 324px;
}

.gallery-video-pattern::before {
	width: 134px;
	height: 390px;
	top: -120px;
	right: 0;
	background-image: url('/template/images/media/auo-media-gallery-video-1.png');

}

.blog-pattern::before {
	width: 308px;
	height: 408px;
	top: -288px;
	right: 0;
	background-image: url('/template/images/media/auo-media-blog-pattern.png');

}

.case-pattern::before {
	width: 323px;
	height: 368px;
	right: 0;
	top: -308px;
	background-image: url('/template/images/media/auo-media-casestudy-banner-pattern.png');
}


@media screen and (max-width: 1199px) {

	.video-banner .title,
	.html-banner .title {
		padding: 40px 0 0;
	}

	.html-banner .tag+.title {
		padding-top: 16px;
	}


	.video-banner .brief,
	.html-banner .brief {
		padding-top: 8px;
	}


	.video-banner .brief {
		padding-bottom: 60px;
	}

	.share-published-wrapper {
		display: block;
		padding: 40px 0;
	}

	.addthis-wrapper {
		padding-top: 20px;
	}

	.addthis-wrapper .at-share-btn-elements a:first-child {
		margin-left: 0;
	}

	/* 0602 */
	.addthis-wrapper .img {
		width: 128px;
		height: 32px;
	}


	.addthis-wrapper .at-icon-wrapper,
	.addthis-wrapper .at-icon-wrapper>svg {
		/* width: 32px!important; */
		/* height: 32px!important; */
		/* line-height: 32px!important; */
	}

	.addthis-wrapper .at-resp-share-element.at-mobile .at-share-btn {
		/* margin-right: 0; */
	}

	.newsarchieve-pattern::before {
		width: 206px;
		height: 171px;
		top: -126px;
		right: -68px;
	}

	.media-event-pattern::before {
		background-image: url('/template/images/media/auo-media-event-pattern-tb.png');
		top: -110px;
		right: 0;
		width: 154px;
		height: 171px;
	}


	.gallery-video-pattern::before {
		width: 67px;
		height: 195px;
		top: -52px;
		right: 0;
		background-image: url('/template/images/media/auo-media-gallery-video-1.png');

	}

	.case-pattern::before {
		width: 150px;
		height: 171px;
		right: 0;
		top: -126px;
		background-image: url('/template/images/media/auo-media-casestudy-banner-pattern.png');
	}

	.blog-pattern::before {
		width: 129px;
		height: 171px;
		top: -110px;
		right: 0;
		background-image: url('/template/images/media/auo-media-blog-pattern-tb.png');

	}


}

@media screen and (max-width: 767px) {

	.video-banner .title,
	.html-banner .title {
		padding-top: 60px;
	}

	.newsarchieve-pattern::before {
		width: 206px;
		height: 171px;
		top: -110px;
		right: -88px;
	}

	.case-pattern::before {
		top: -130px;
	}

	.html-banner .tag+.title {
		padding-top: 8px;
	}
}


/* html edit page banner */
/* ========================== Banner END ======================= */
/* ========================== Banner END ======================= */
/* ========================== Banner END ======================= */
/* ========================== Banner END ======================= */
/* ========================== Banner END ======================= */
/*----------------------popup 登入跳窗start---------------------------------------------------------------- */
.lightbox {
	position: fixed;
	width: 100%;
	height: 101%;
	background-color: var(--mask-color);
	z-index: 1000;
	display: none;
	top: 0;
	left: 0;
	overflow: auto;
}

.lightbox.display {
	display: block;
}

.lightbox .lightbox-container {
	background-color: #fff;
	width: 680px;
	margin: auto;
	margin-top: 240px;
	text-align: center;
	padding: 80px 70px 60px;
	position: relative;
	border-radius: 32px;
	margin-bottom: 80px;
}

.lightbox .lightbox-container .lightbox-close {
	width: 48px;
	height: 48px;
	position: absolute;
	right: 24px;
	top: 24px;
	cursor: pointer;
	font-size: 0;
	line-height: 0;

}

.lightbox .lightbox-container .lightbox-close::before,
.lightbox .lightbox-container .lightbox-close::after {
	content: '';
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;

}

.lightbox .lightbox-container .lightbox-close::before {
	background-image: url('/Other/energy/template/images/common/auo-close.svg');
	opacity: 1;
}

.lightbox .lightbox-container .lightbox-close::after {
	background-image: url('/Other/energy/template/images/common/auo-close-hover.svg');
	opacity: 0;
}

.lightbox .lightbox-container .lightbox-close:hover::before {
	opacity: 0;
}

.lightbox .lightbox-container .lightbox-close:hover::after {

	opacity: 1;
}


.lightbox-container>.inner-content {
	padding-top: 40px;
}

.lightbox-container>.btn-block {
	padding-top: 40px;
	justify-content: center;
}

@media screen and (max-width: 1199px) {
	.lightbox .lightbox-container {
		padding: 80px 40px 60px;
	}
}


@media screen and (max-width: 767px) {
	.lightbox {
		padding: 0 20px;
	}

	.lightbox .lightbox-container {
		width: 100%;
		margin-top: 120px;
	}




}

/*---------------------------- popup登入跳窗end-------------------------------------------------------------------------------------------------------------------------------- */
/* ============================unsubscribe start====================================== */
/* ============================unsubscribe start====================================== */
/* ============================unsubscribe start====================================== */
.unsubcribe {
	background-color: var(--sustainable-green);
	min-height: calc(100vh - 120px);
	padding: 160px 0 280px;
}

.unsubcribe .content-block {
	max-width: 628px;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}

.unsubcribe .info {
	padding-top: 20px;

}

.unsubcribe .unsubcribe-content {
	margin-top: 60px;
	padding: 60px 40px;
	background-color: #fff;
}

.unsubcribe-input-block {
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	display: -webkit-flex;
	/* Safari */
	-webkit-flex-wrap: wrap;
	/* Safari 6.1+ */
}


.unsubcribe-input-block .btn-block:before,
.unsubcribe-input-block .btn-block::after,
.unsubcribe-input-block input[type="text"].search-input:before,
.unsubcribe-input-block input[type="text"].search-input:after,
.unsubcribe-input-block:before,
.unsubcribe-input-block:after {
	display: none;
	/* IE doesn't support `initial` */
}

.unsubcribe-input-block input[type="text"].search-input {
	width: 400px;
	background-color: var(--gray-5);
}

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {

		.unsubcribe-input-block input[type="text"].search-input {
			width: 392px;
		}
	}
}

.unsubcribe-input-block .btn-block {
	max-width: 140px;
}

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {

		.unsubcribe-input-block .btn-block {
			max-width: 148px;
		}

	}
}

.unsubcribe .fixed-pattern1::before {
	background-image: url('/template/images/index/auo-index-pattern-2.png');
	top: -188px;
	left: 57px;
	width: 378px;
	height: 387px;
	transform: scaleX(-1);
}

.unsubcribe-input-block p.error {
	display: none;
}

.unsubcribe-input-block.not-filled p.error {
	display: block;
	order: 1;
}



@media screen and (max-width: 1199px) {
	.unsubcribe {
		min-height: calc(100vh - 547px);
		padding: 120px 0;
	}

	.unsubcribe .unsubcribe-content {
		margin-top: 28px;
		padding: 40px;
	}

	.unsubcribe-input-block .btn-block {
		max-width: 130px;
	}

	.unsubcribe .content-block,
	.unsubcribe .unsubcribe-content {
		max-width: 560px;
	}

	.unsubcribe-input-block input[type="text"].search-input {
		width: 342px;
		margin-right: 8px;
	}

	.unsubcribe .fixed-pattern1::before {
		width: 218px;
		height: 224px;
		top: -89px;
		left: -89px;
	}

	.unsubcribe-input-block {
		padding-top: 16px;
	}


}

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {

		@media (max-width: 1199px) {

			.unsubcribe-input-block .btn-block {
				max-width: 138px;
			}

			.unsubcribe-input-block input[type="text"].search-input {
				width: 336px;
				margin-right: 8px;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.unsubcribe {
		min-height: calc(100vh - 513px);
		padding: 80px 0;
	}

	.unsubcribe-input-block .btn-block {
		padding-top: 20px;
		order: 1;
		max-width: none;
	}




	.unsubcribe .content-block,
	.unsubcribe .unsubcribe-content {
		max-width: none;
	}

	.unsubcribe .unsubcribe-content {
		background-color: transparent;
		margin-top: 40px;
		padding: 0;
	}

	.unsubcribe-input-block input[type="text"].search-input {
		width: 100%;
		margin-right: 0;
		background-color: #fff;
	}

	.unsubcribe-input-block {
		flex-wrap: wrap;
	}

	.unsubcribe .fixed-pattern1 {
		max-width: none;
	}

	.unsubcribe-input-block.not-filled p.error {
		width: 100%;
	}

	.unsubcribe-input-block.not-filled p.error+.btn-block {
		padding-top: 12px;
	}

}

/* ============================unsubscribe end====================================== */
/* ============================unsubscribe end====================================== */
/* ============================unsubscribe end====================================== */
/* =====================next section ======================= */
.next-section {
	display: block;
	padding: 72px 0;
	background-color: var(--energetic-yellow);
	position: relative;
	z-index: 3;
}

.next-container {
	padding-left: 330px;
}

.next-info {
	margin-top: 8px;
	display: flex;

}

.next-info span {
	position: relative;
}

.next-info span::after {
	content: "";
	display: block;
	width: 56px;
	height: 100%;
	background-image: url("/Other/energy/template/images/common/auo-btn-line-blue.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: all 0.4s ease;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(100%);
}

.next-fixed-pattern1::before {
	width: 80px;
	height: 80px;
	top: -92px;
	left: 140px;
	background-image: url('/template/images/index/auo-index-pattern-7.png');
}


@media screen and (max-width: 1199px) {
	.next-section {
		padding: 40px 0;
	}

	.next-container {
		padding-left: 200px;
	}

	.next-info span::after {
		width: 36px;
	}

	.next-fixed-pattern1::before {
		width: 56px;
		height: 56px;
		top: -53px;
		left: auto;
		right: 40px;
	}
}

@media screen and (max-width: 767px) {
	.next-container {
		padding-left: 20px;
	}

	.next-info span {
		display: block;
		position: relative;
		width: 100%;
		padding-right: 56px;
	}

	.next-info span::after {
		transform: translateX(0)
	}
}

/* ===================common-swiper-type1====================================== */
.swiper.common-swiper-type1 {
	width: calc(100% - (100% - 1080px)/2);
	margin-left: calc((100% - 1080px)/2);
	padding-top: 40px;
}

.common-swiper-type1 .swiper-slide {
	margin-right: 24px;
}

.common-swiper-type1 .swiper-slide {
	width: 440px;
}

.common-swiper-type1 .swiper-slide .img {
	height: 340px;
}

.common-swiper-type1 .swiper-slide .title {
	padding-top: 20px;
}

.common-swiper-type1 .swiper-slide p {
	padding-top: 8px;
}

@media screen and (max-width: 1199px) {
	.common-swiper-type1 .swiper-slide .img {
		height: 216px;
	}

	.common-swiper-type1 {
		width: calc(100% - (100% - 688px)/2);
		margin-left: calc((100% - 688px)/2);
		padding-top: 24px;
	}

	.common-swiper-type1 .swiper-slide {
		width: 280px;
	}

	.common-swiper-type1 .swiper-slide {
		margin-right: 20px;
	}

	.common-swiper-type1 .swiper-slide .title {
		padding-top: 16px;

	}


}

@media screen and (max-width: 767px) {
	.common-swiper-type1 {
		width: calc(100% - 20px);
		margin-left: 20px;
	}
}

/* =================common select ===================== */
/* =================common select ===================== */
/* =================common select ===================== */
.common-select select {
	width: 100%;
	padding: 16px 60px 16px 24px;
	border-radius: 28px;
	background-color: var(--gray-6);
	border: none;
	color: var(--auo-blue);
}

.common-select.mt-40-28 {
	margin-top: 40px;
}

@media screen and (max-width: 1199px) {
	.common-select select {
		padding: 13px 46px 13px 16px;
	}

	.common-select::after {
		right: 16px;
	}

	.common-select.mt-40-28 {
		margin-top: 28px;
	}

}

/*======================== tab-swiper-type-1 ============*/
/*======================== tab-swiper-type-1 ============*/
/*======================== tab-swiper-type-1 ============*/
/*======================== tab-swiper-type-1 ============*/
.tab-swiper-type-1 {
	background-color: var(--auo-blue);
	padding: 120px 0;
}

.tab-swiper-thumb-block {
	margin-top: 40px;
}

.tab-swiper-thumb .swiper-slide {
	width: 240px;
	cursor: pointer;

}

.tab-swiper-thumb .swiper-wrapper {
	align-items: center;
}

.tab-swiper-thumb .swiper-slide+.swiper-slide {
	margin-left: 40px;
}

.tab-swiper-thumb .swiper-slide h2 {
	color: rgba(255, 255, 255, 0.7);
	max-height: 60px;
	position: relative;
}

/* 0627 擴大點及範圍 */
.tab-swiper-thumb .swiper-slide h2::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	margin: -10px;

}

.tab-swiper-thumb .swiper-slide:hover h2 {
	font-weight: bold;
}

.tab-swiper-thumb .swiper-slide-thumb-active h2 {
	color: var(--energetic-yellow);
	font-weight: bold;
}

.main-content-swiper-block {
	padding-top: 80px;
}

.main-content-swiper .swiper-slide {
	display: flex;
}

.main-content-swiper .left-img {
	width: 500px;
	margin-right: 60px;
}

.main-content-swiper .right-content {
	width: calc(100% - 560px);

}

.main-content-swiper .right-content h1 {
	padding-top: 20px;
}

.main-content-swiper .right-content p,
.main-content-swiper .right-content .btn-block {
	padding-top: 20px;
}


@media screen and (max-width: 1199px) {
	.tab-swiper-type-1 {
		padding: 80px 0;
	}

	.tab-swiper-thumb .swiper-slide h2 {
		/* line-height: 36px; */
		max-height: 52px;
	}

	.tab-swiper-thumb-block {

		margin: 0 auto;
		margin-top: 40px;
		max-width: 224px;
		position: relative;
	}

	.tab-swiper-thumb-block .swiper-slide {
		width: 224px;
	}

	.tab-swiper-thumb .swiper-slide+.swiper-slide {
		margin-left: 0;
	}

	.tab-swiper-thumb-block .swiper-btn-block {
		justify-content: space-between;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		transform: translateY(-50%);

	}

	.tab-swiper-thumb-block .pre-btn {
		margin-left: -48px;
	}

	.tab-swiper-thumb-block .next-btn {
		margin-right: -48px;
	}


	.tab-swiper-thumb-block .swiper-btn-block .swiper-btn+.swiper-btn {
		margin-left: 0;
	}

	.main-content-swiper .left-img {
		width: 320px;
		margin-right: 48px;
	}

	.main-content-swiper .right-content {
		width: calc(100% - 368px);
	}

	.main-content-swiper .right-content h1 {
		padding-top: 0;
	}

	.main-content-swiper-block {
		padding-top: 44px;
	}
}

@media screen and (max-width: 767px) {
	.main-content-swiper .swiper-slide {
		display: block;
	}

	.main-content-swiper-block {
		padding-top: 28px;
	}

	.main-content-swiper .left-img {
		width: 100%;
		margin-right: 0;
	}

	.main-content-swiper .right-content {
		width: 100%;
		padding-top: 24px;
	}

	.main-content-swiper .right-content .btn-block {
		padding-top: 24px;
	}

}

/* left-right-open-close  */
/* aside left nav */
.left-bar-type .left-block {
	width: 300px;
	margin-right: 80px;
}

.left-bar-type .right-block {
	width: calc(100% - 380px);
}

.left-bar-type ul.left-bar>li>a {
	display: block;
	margin-left: -40px;
	padding: 20px 0 16px 40px;
	font-size: 22px;
	line-height: 30px;
	font-weight: bold;
	color: var(--gray-2);
}

.left-bar-type .left-block ul>li:first-child>a {
	margin-top: -20px;
}

.left-bar-type ul.left-bar>li.active>a {
	color: var(--auo-blue);
}

.left-bar-type ul.left-bar>li:hover>a {
	color: var(--auo-blue);

}


.left-bar-type ul.left-bar>li.has-item>ul>li:first-child>a {
	padding-top: 4px;
}

.left-bar-type ul.left-bar>li.has-item>ul {
	padding-bottom: 20px;
}

.left-bar-type ul.left-bar>li.has-item>ul>li>a {
	display: flex;
	margin-left: 0;
	padding: 8px 0 8px 20px;
	color: var(--gray-1);
	font-weight: normal;
	align-items: center;
}

.left-bar-type ul.left-bar>li.has-item>ul>li:hover a {
	color: var(--smart-blue);
}

.left-bar-type ul.left-bar>li.has-item>ul>li:first-child>a {
	margin-top: 0;
}

.left-bar-type ul.left-bar>li.has-item>ul>li.active>a {
	color: var(--smart-blue);
}

.left-bar-type ul.left-bar>li.has-item>ul>li.active>a::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-image: url('/Other/energy/template/images/common/auo-leftbar-arrow.svg');
	margin-left: 48px;
}

.left-bar-type ul.left-bar>li.has-item>ul {
	display: none;
}

@media screen and (max-width: 1199px) {
	.left-bar-type .right-block {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {}

/* click-insert-card-block */
.clone-close-wrapper {
	margin-top: 40px;
}

.click-insert-card-block {
	width: 100%;
}

.click-insert-card-block>ul {
	display: flex;
	flex-wrap: wrap;
	/* gap: 28px; */
}

.click-insert-card-block .click-card {
	padding: 24px 28px 20px;
	width: 336px;
	/* margin-right: 28px; */
	background-color: rgba(0, 80, 135, 0.4);
	cursor: pointer;
	transition: all .4s;
}

.click-insert-card-block .click-card:nth-of-type(odd) {
	margin-right: 28px;
}

.click-card:nth-of-type(n+3) {
	margin-top: 28px;
}


.click-card:hover .jop-title {
	transition: all .4s;

}

.click-card .name {
	padding: 16px 0;
	transition: all .4s;
}

.click-card .arrow {
	width: 28px;
	height: 28px;
	margin-top: auto;
	position: relative;
}

.click-card .arrow::before,
.click-card .arrow::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity .4s;
}

.click-card .arrow::before {
	background-image: url('/Other/energy/template/images/common/auo-click-card-arrow-down.svg');
	opacity: 1;
}

.click-card .arrow::after {
	background-image: url('/Other/energy/template/images/common/auo-click-card-arrow-up.svg');
	opacity: 0;
}

.click-card:hover,
.click-insert-card-block .click-card.selected {
	background-color: var(--auo-blue);
}

.click-card:hover .jop-title,
.click-card:hover .name,
.click-card.selected .jop-title,
.click-card.selected .name {
	color: var(--energetic-yellow);
}

.click-card.selected .arrow::before {
	opacity: 0;
}

.click-card.selected .arrow::after {
	opacity: 1;
}

.click-insert-card-block .insert-item {
	padding: 40px 0 12px 0;
	width: 100%;
}

.click-insert-card-block .clone-card {
	padding: 40px;
	background-color: var(--gray-5);
}

.en .click-insert-card-block .content {
	min-height: 118px;
}

.click-insert-card-block .content {
	min-height: 116px;
	height: 100%;
	display: flex;
	flex-direction: column;

}

.click-insert-card-block>ul .insert-item:last-child {
	padding-bottom: 0;
}

@media screen and (max-width: 1199px) {
	.abjust-tb-mr {
		margin-left: calc((100% - 688px) / 2);

	}

	.container.tb-fluid {
		max-width: none;
		width: 100%;
		padding: 0;
	}

	.click-insert-card-block>ul {
		/* gap: 20px 48px; */
	}

	.click-insert-card-block .click-card:nth-of-type(odd) {
		margin-right: 48px;
	}

	.click-card:nth-of-type(n+3) {
		margin-top: 20px;
	}

	.click-insert-card-block .content {
		min-height: 108px;
	}

	.en .click-insert-card-block .content {
		min-height: 108px;
	}

	.click-insert-card-block .click-card:nth-of-type(2n+1) {
		margin-left: calc((100% - 688px) / 2);

	}

	.click-insert-card-block .click-card {
		width: 320px;
	}


	.click-insert-card-block .insert-item {
		padding: 40px 0 20px 0;
	}


	.clone-card-html-wrapper {
		max-width: 688px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.abjust-tb-mr {
		margin-right: 0;
		margin-left: 0;
		padding: 0 20px;
	}

	.abjust-tb-mr.common-select::after {
		right: 36px;
	}

	.click-insert-card-block>ul {
		display: block;
	}

	.click-insert-card-block .click-card {
		margin-right: 0;
	}

	.click-insert-card-block .click-card:nth-of-type(n) {
		margin: 0 auto;
		margin-top: 20px;
	}

	.click-insert-card-block .clone-card {
		padding: 40px 20px;
	}

	.click-insert-card-block .insert-item {
		padding: 40px 0 20px;

	}

}

/* ================== popup card for leader and auoers====================================== */
/* ================== popup card for leader and auoers====================================== */
/* ================== popup card for leader and auoers====================================== */
.js-pop-card-noscroll-html {
	overflow: hidden !important;
}

.js-pop-card-noscroll-body {
	overflow: hidden !important;
	scrollbar-gutter: stable;
}

.leader-card-popup-wrapper {
	padding: 80px 0 0 360px;
	height: 100%;
	width: 100%;
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	background-color: #003c6599;
	overflow-y: auto;
	overflow-x: hidden;

	/* display: flex;
    align-items: flex-start; */
}

.js-control-popup {
	display: none;
	position: relative;
	right: -100%;
}

.leader-card-popup {
	padding: 80px 0 0 160px;
	background-color: white;
	width: 100%;
	max-width: 1560px;
	min-width: 1140px;
	min-height: 807px;
	border-radius: 50px 0 0 50px;
	margin-left: auto;
	display: flex;
	position: relative;
	flex-shrink: 0;
	overflow-x: hidden;
	/* right: -100%; */

}

.leader-card-popup .left-card {
	width: 300px;
	margin-right: 60px;
	flex-shrink: 0;
}

.leader-card-popup .left-card .img {
	height: 363px;
}

.leader-card-popup .right-info {
	width: 620px;
	flex-shrink: 0;
}


.leader-card-popup .name {
	padding-top: 16px;
}

.leader-card-popup .info {
	padding-top: 8px;
}



.leader-card-popup .close-btn {
	cursor: pointer;
	width: 48px;
	height: 48px;
	position: absolute;
	left: 60px;
	top: 40px;

}

.leader-card-popup .close-btn::before {
	content: '';
	display: block;
	position: absolute;
	background-image: url('/Other/energy/template/images/common/auo-close.svg');
	width: 48px;
	height: 48px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	transition: .4s;
	opacity: 1;
}

.leader-card-popup .close-btn::after {
	content: '';
	display: block;
	position: absolute;
	background-image: url('/Other/energy/template/images/common/auo-close-hover.svg');
	width: 48px;
	height: 48px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: .4s;
	opacity: 0;
}

.leader-card-popup .close-btn:hover::before {
	opacity: 0;
}

.leader-card-popup .close-btn:hover::after {
	opacity: 1;
}

.leader-card-popup .card-fixed-pattern {
	flex-shrink: 0;

}

.leader-card-popup .card-fixed-pattern {
	position: absolute;
	background-image: url('/template/images/about/auo-about-leader-ship-card-pattern1.png');
	width: 371px;
	height: 270px;
	bottom: 0;
	left: 1140px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media screen and (max-width: 1639px) {
	.leader-card-popup-wrapper {
		padding: 40px 0 0 40px;
	}

	.leader-card-popup {
		padding: 88px 40px 182px 28px;
		width: 100%;
		min-height: calc(100vh - 40px);
		display: block;
		max-width: 728px;
		min-width: 728px;
	}

	.leader-card-popup .close-btn {
		width: 36px;
		height: 36px;
		top: 28px;
		left: 28px;
	}

	.leader-card-popup .close-btn::before,
	.leader-card-popup .close-btn::after {
		width: 36px;
		height: 36px;
	}

	.leader-card-popup .right-info,
	.leader-card-popup .left-card {
		width: auto;
	}

	.leader-card-popup .right-info {
		padding-top: 28px;
	}

	.leader-card-popup .left-card {
		margin-right: 0;
	}

	.leader-card-popup .left-card .img {
		width: 160px;
		height: 200px;
	}

	.leader-card-popup .card-fixed-pattern {
		width: 250px;
		height: 182px;
		left: auto;
		right: 40px;
	}

	.leader-card-popup .name {
		padding-top: 8px;
	}

	.leader-card-popup .info {
		padding-top: 0px;

	}
}


@media screen and (max-width: 1199px) {
	.leader-card-popup-wrapper {
		padding: 40px 0 0 40px;
	}

	.leader-card-popup .info {
		font-size: 16px;
		line-height: 24px;
	}

	.leader-card-popup {
		/* padding: 88px 40px 182px 28px;
        width: 100%;
        min-height: calc(100vh - 40px); */
		/* display: block; */
		/* max-width: none;
        min-width: 100%; */
	}

	/* .leader-card-popup .close-btn{
        width: 36px;
        height: 36px;
        top: 28px;
        left: 28px;
    }

    .leader-card-popup .close-btn::before,
    .leader-card-popup .close-btn::after{
        width: 36px;
        height: 36px;
    }

    .leader-card-popup .right-info,
    .leader-card-popup .left-card{
        width: auto;
    }

    .leader-card-popup .right-info{
        padding-top: 28px;
    }

    .leader-card-popup .left-card{
        margin-right: 0;
    }

    .leader-card-popup .left-card .img{
        width: 160px;
    }

    .leader-card-popup .card-fixed-pattern{
        width: 250px;
        height: 182px;
        left: auto;
        right: 40px;
    } */
}

@media screen and (max-width: 767px) {
	.leader-card-popup {
		padding: 88px 20px 40px 28px;
		max-width: none;
		min-width: 100%;
	}
}

/*==================== pagenation  開始=======================*/
/*==================== pagenation  開始=======================*/
/*==================== pagenation  開始=======================*/
/*==================== pagenation  開始=======================*/
.new-pagenation-wrapper {
	margin-top: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* gap: 0 16px; */
}

.page-btn {
	display: block;
	position: relative;
	width: 44px;
	height: 44px;
}

.page-btn::before,
.page-btn::after {
	position: absolute;
	content: '';
	display: block;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 44px;
	margin: -10px;
	/* z-index: 1; */
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
}

.page-pre-btn::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre.svg);
}

.page-pre-btn::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre-hover.svg);
}

.page-pre-btn.disabled::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-pre-disable.svg);

}

.page-next-btn::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next.svg);
}

.page-next-btn::after {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next-hover.svg);
}

.page-next-btn.disabled::before {
	background-image: url(/Other/energy/template/images/common/auo-swiper-btn-next-disable.svg);
}

.page-btn.disabled {
	pointer-events: none;
}

.page-btn:hover::before {
	opacity: 0;
}

.page-btn::after {
	opacity: 0;
}

.page-btn:hover:after {
	opacity: 1;
}

.page-block {
	display: flex;
	/* gap: 20px; */
	margin-left: 16px;
	margin-right: 16px;
}

.page {
	display: block;
	text-align: center;
	font-weight: bold;
	min-width: 32px;
	height: 32px;
	position: relative;
	color: rgba(0, 80, 135, 0.5);
	transition: .4s ease;
}

.page+.page {
	margin-left: 20px;
}

.page.active,
.page:hover {
	color: var(--auo-blue);
}

.page::after {
	content: '';
	position: absolute;
	display: block;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	margin: -10px;
	top: 0px;
	left: 0px;
	z-index: 1;


}


@media screen and (max-width: 1199px) {
	.new-pagenation-wrapper {
		margin-top: 60px;

		/* gap: 0 12px; */
	}

	.page {
		height: 28px;
	}

	.page-block {
		/* gap: 16px; */
		margin-left: 12px;
		margin-right: 12px;
	}

	.page+.page {
		margin-left: 16px;
	}


	.page::after {
		width: calc(100% + 12px);
		margin: -10px -6px;
	}

	.page-btn {
		width: 36px;
		height: 36px;
	}

	.page-btn::before,
	.page-btn::after {
		background-size: 36px;
		width: calc(100% + 12px);
		margin: -10px -6px;
	}


}


/*================================ html inner page =======================*/
/*================================ html inner page =======================*/
/*================================ html inner page =======================*/
.media-inner {
	padding: 120px 0;
}

.media-inner .btn-block {
	margin-top: 80px;
	justify-content: center;
}


@media screen and (max-width: 1199px) {
	.media-inner {
		padding: 120px 0 80px;
	}

	.media-inner .btn-block {
		margin-top: 60px;
	}
}

@media screen and (max-width: 767px) {}

/*================================ html inner page END =======================*/
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* .application-block start */
.application-block {
	padding: 120px 0;
}


.application-block .list {
	padding-top: 80px;
	display: flex;
	flex-wrap: wrap;
}

.application-block li {
	width: 520px;
	border-bottom: 1px solid var(--gray-5);
}

.application-block li:nth-child(-n+2) {
	border-top: 1px solid var(--gray-5);
}

.application-block li:nth-child(2n) {
	margin-left: 40px;
}

.application-block li .title {
	padding: 20px 72px;
}

.application-block .content {
	padding: 20px 40px 20px 72px;
}

.application-block img {
	max-width: 240px;
	width: 100%;
}


@media screen and (max-width: 1199px) {
	.application-block {
		padding: 80px 0 120px;
	}

	.application-block .list {
		padding-top: 40px;
	}

	.application-block li {
		width: calc((100% - 48px)/2);
	}

	.application-block li:nth-child(2n) {
		margin-left: 48px;
	}

	.application-block .content {
		padding: 0 16px 20px;
	}

	.application-block li .title {
		padding: 16px;
		padding-left: 52px;
	}


	.application-block img {
		max-width: 288px;
	}


}

@media screen and (max-width: 767px) {
	.application-block li {
		width: 100%;
	}

	.application-block li:nth-child(2n) {
		margin-left: 0px;
	}

	.application-block li:nth-child(n+2) {
		border-top: none;
	}

}

/* .application-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* ===================award marquee start================================= */
/* ===================award marquee start================================= */
/* ===================award marquee start================================= */
.award-marquee-wrapper {
	max-width: 1870px;
	margin: 0 auto;
}

.award-marquee {
	padding: 120px 0;
}

.award-marquee-wrapper {
	padding-top: 40px;
	margin: 0 auto;
	max-width: 1920px;
	overflow: hidden;
}

.award-marquee-content {
	width: 1870px;
	display: flex;
	flex-wrap: nowrap;
	animation: scrolling var(--award-marquee-animation-duration) linear infinite;
}

.award-marquee-content:hover {
	animation-play-state: paused;
}

@keyframes scrolling {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-1 * 370px * var(--award-marquee-elements)));
	}
}

.award-marquee-item,
.award-marquee-item .img {
	width: 340px;
	height: 280px;
}

.award-marquee-content .award-marquee-item {
	margin-right: 30px;
}

.award-marquee-item>a {
	display: block;
}

@media screen and (max-width: 1199px) {
	.award-marquee {
		padding: 80px 0;
	}

	.award-marquee-wrapper {
		padding-top: 20px;
	}


	.award-marquee-content {
		width: 714px;
	}

	@keyframes scrolling {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(calc(-1 * 182px * var(--award-marquee-elements)));
		}
	}

	.award-marquee-item,
	.award-marquee-item .img {
		width: 168px;
		height: 138px;
	}

	.award-marquee-content .award-marquee-item {
		margin-right: 14px;
	}
}

@media screen and (max-width: 767px) {}

/* time line sticky */
.bottom-timeline-block {
	padding-bottom: 120px;
}

.bottom-timeline-block .timeline {
	padding-top: 80px;
	width: 140px;
}

/* 0627 Elin 若JS未計算到高度時 由CSS給予預設最小值 */
.bottom-timeline-block .left-block {
	height: 768px;
}

.time-slide a {
	margin: 0;
	display: block;
	padding: 20px 0 20px 36px;
	color: #B3CBDB;
	position: relative;
}

.time-slide a::before {
	content: '';
	position: absolute;
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--auo-blue);
	border: 2px solid #B3CBDB;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
}

.time-slide.active>a {
	color: #fff;
	font-size: 40px;
	line-height: 56px;

}

.time-slide.active>a::before {
	width: 24px;
	height: 24px;
	border: none;
	background-color: var(--smart-blue);
	left: 0px;

}

.time-slide:first-child {
	margin-top: -20px;
}

.time-swiper-wrapper {
	position: relative;
}

.time-swiper-wrapper::before {
	position: absolute;
	content: '';
	display: block;
	width: 0;
	height: calc(100% - 68px);
	border-right: 2px solid #B3CBDB;
	left: 11px;
	top: 28px;
}

.time-slide:hover a {
	color: #fff;
}

.year-content-item {
	display: flex;
}

.year-content-item .right-img {
	width: 306px;
	margin-right: 60px;
	height: auto;
}

.year-content-item .left-text {
	width: calc(100% - 366px);
}

.year-content-item .left-text p {
	padding-top: 8px;
}

.year-content-item+.year-content-item {
	margin-top: 60px;
}

.bottom-timeline-block .right-block {
	padding-top: 80px;
	margin-left: 100px;
	width: calc(100% - 240px);
}

.swiper.timeline-swiper {
	height: 100%;
}


.timeline-swiper .swiper-slide {
	color: #B3CBDB;
	padding: 20px 0 20px 36px;
	cursor: pointer;
	transition: .4s;
}

.timeline-swiper .swiper-slide-thumb-active {
	color: #fff;
	font-size: 40px;
	line-height: 56px;
	transition: .4s;

}

/* .timeline-swiper .swiper-slide.swiper-slide-thumb-active::after{
    height: 102px;
} */

.timeline-swiper .swiper-slide:first-child {
	margin-top: -20px;
}

/* 
.timeline-swiper .swiper-slide:first-child::after{
    height: 36px;
    top: auto;
    bottom: 0;
} */

.timeline-swiper .swiper-slide:last-child::after {
	height: 36px;

}

/* 20220901 Amy */
.timeline-swiper .swiper-slide:hover {
	color: var(--auo-blue);
}

.timeline-swiper .swiper-slide::before {
	content: '';
	position: absolute;
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--auo-blue);
	border: 2px solid #B3CBDB;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
	z-index: 1;
}


.timeline-swiper .swiper-slide.swiper-slide-thumb-active::before {
	background-color: var(--smart-blue);
	border: none;
	left: 0;
	width: 24px;
	height: 24px;
}


.timeline-swiper .swiper-wrapper {
	height: auto;
}

/* 20220901 Amy */
.timeline-swiper .swiper-wrapper::before {
	content: '';
	position: absolute;
	position: absolute;
	width: 2px;
	background-color: #B3CBDB;
	left: 11px;
	top: 18px;
	height: calc(100% - 60px);
}

@media screen and (max-width: 1199px) {
	.bottom-timeline-block .timeline {
		position: static;
		padding-top: 0;
		width: calc(100% + 80px);
		margin: 0 -40px;
		height: auto;
	}

	.bottom-timeline-block {
		padding: 60px 0 80px;
	}

	.bottom-timeline-block .container {
		display: block;
	}

	.bottom-timeline-block .tab-list {
		display: flex;
		margin-left: 60px;
	}


	.swiper.timeline-swiper {
		overflow: visible;
		width: calc(100% - (100% - 648px)/2);
		margin-left: calc((100% - 648px)/2)
	}

	.timeline-swiper .swiper-wrapper {
		display: flex;
		/* padding-left: 60px; */
	}

	.timeline-swiper .swiper-wrapper::before {
		display: none;
	}

	.bottom-timeline-block .timeline {
		position: relative;
	}

	.bottom-timeline-block .timeline::before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #B3CBDB;
		bottom: 7px;
		left: 0;
	}

	.timeline-swiper .swiper-slide:first-child {
		margin-top: 0;
	}

	.timeline-swiper .swiper-slide {
		width: 64px;
		padding: 0 0 24px 0;
		line-height: 36px;
		text-align: center;
		margin-right: 8px;
	}

	.timeline-swiper .swiper-slide::after {
		border: none;
	}

	.timeline-swiper .swiper-slide-thumb-active {
		font-size: 26px;
		line-height: 36px;
	}

	.timeline-swiper .swiper-slide::before {
		width: 12px;
		height: 12px;
		top: auto;
		bottom: 2px;
		left: 50%;
		transform: translateX(-50%) translateY(0%);
	}

	.timeline-swiper .swiper-slide.swiper-slide-thumb-active::before {
		top: auto;
		bottom: 0;
		width: 16px;
		height: 16px;
		left: 50%;
	}


	.timeline-swiper li {
		display: flex;

		align-items: center;
		/* padding-bottom: 24px; */
	}

	.timeline-swiper li:first-child {
		margin-top: 0;
	}

	.timeline-swiper li>a {
		min-width: 64px;
		padding: 0;
		margin-right: 8px;
		text-align: center;
		vertical-align: middle;
		padding-bottom: 24px;
	}

	.timeline-swiper li>a::before {
		top: auto;
		bottom: -1px;
		left: 50%;
		transform: translate(-50%, 0);
		width: 12px;
		height: 12px;
	}

	.timeline-swiper li.active>a {
		font-size: 26px;
		line-height: 32px;
	}

	.timeline-swiper ul::before {
		width: calc(100% + 60px);
		height: 2px;
		top: auto;
		bottom: 9px;
		left: -60px;
		border: none;
		background-color: #B3CBDB;

	}

	.timeline-swiper li.active>a::before {
		width: 16px;
		height: 16px;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 2px;
	}

	.year-content-item .right-img {
		width: 200px;
		margin-right: 40px;
		height: 150px;
	}

	.year-content-item .left-text {
		width: calc(100% - 240px);
	}

	.bottom-timeline-block .right-block {
		padding-top: 60px;
		margin: 0 auto;
		width: 608px;
	}

}

@media screen and (max-width: 767px) {
	.bottom-timeline-block .timeline {
		width: calc(100% + 40px);
		margin: 0 -20px;
	}

	.bottom-timeline-block .right-block {
		width: 100%;
	}

	.year-content-item {
		display: block;
	}

	.year-content-item .right-img {
		margin: 0 auto;
	}

	.year-content-item .left-text {
		width: 100%;
		padding-top: 16px;
	}

	.year-content-item+.year-content-item {
		margin-top: 40px;
	}

	.swiper.timeline-swiper {
		width: calc(100% - 20px);
		margin-left: 20px;
		/* margin-right: 20px; */
	}
}