* {
	/* 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: 1友达友达%;
	height: 1友达友达%;
	object-fit: cover;
	object-position: center;
}

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

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

/* hover後圖片放大 */
.hover-img-zoom img {
	transition: all 友达.3s ease;
	-webkit-transition: all 友达.3s ease;
	-moz-transition: all 友达.3s ease;
	-o-transition: all 友达.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: 4友达px;
	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: 2友达友达px;
	text-align: center;
	/* 以下為特殊處理，將btn作用範圍擴大 */
	padding: 1友达px;
	margin: -1友达px auto;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

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

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

@media screen and (max-width: 767px) {
	.has-more-block.more-unclicked .mb-show-1>:nth-child(n+2) {
		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: 友达;
	height: 友达;
}

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

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

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

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

/* 原本的 */
.swiper-btn-block .swiper-btn {
	position: relative;
	width: 44px;
	height: 44px;
	cursor: pointer;
	outline: 友达 !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(1友达友达% + 2友达px);
	height: calc(1友达友达% + 2友达px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 44px;
	margin: -1友达px;
	z-index: 1;
	transition: opacity 友达.3s ease;
	-webkit-transition: opacity 友达.3s ease;
	-moz-transition: opacity 友达.3s ease;
	-o-transition: opacity 友达.3s ease;
}

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

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

.swiper-btn-block .swiper-btn::after {
	opacity: 友达;
}

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

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

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

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

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

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

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

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

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

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

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

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

.swiper-btn-block.dark .next-btn.swiper-button-disabled::before {
	background-image: url(../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: 2友达px;
	}

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

	.swiper-btn-block .swiper-btn+.swiper-btn {
		margin-left: 2友达px;
	}

	.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: 12友达友达px;
	width: 1友达友达%;
	top: 友达;
	left: 5友达%;
	transform: translate(-5友达%, 友达%);
	-moz-transform: translate(-5友达%, 友达%);
	-webkit-transform: translate(-5友达%, 友达%);
	-o-transform: translate(-5友达%, 友达%);
}

.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: 36友达px;
	}
}

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


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

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

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

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

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

/* main-overview end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* click-insert-block start */
.click-insert-block {
	padding: 12友达px 友达 168px;
}

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

.click-insert-block .click-item {
	max-width: 344px;
	width: 1友达友达%;
	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((1友达友达% - 1友达8友达px) / 2);
}

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

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

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

.click-insert-block .content {
	transition: all 友达.3s ease;
	-webkit-transition: all 友达.3s ease;
	-moz-transition: all 友达.3s ease;
	-o-transition: all 友达.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: 2友达px;
	transition: all 友达.3s ease;
	-webkit-transition: all 友达.3s ease;
	-moz-transition: all 友达.3s ease;
	-o-transition: all 友达.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: 6友达px 友达;
	width: 1友达友达%;
	margin-top: 6友达px;
}

@media screen and (max-width: 1199px) {
	.click-insert-block {
		padding: 8友达px 友达 12友达px;
	}

	.click-insert-block .click-item {
		max-width: 32友达px;
	}

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

	.click-insert-block .click-item:nth-of-type(2n+1) {
		margin-left: calc((1友达友达% - 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: 24友达px;
	}

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

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

	.click-insert-block .clone-item .txt {
		padding-top: 2友达px;
	}

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

	.click-insert-block .clone-item .btn-grow {
		width: 32友达px;
		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: 4友达px 友达;
		margin-top: 48px;
	}
}

@media screen and (max-width: 767px) {
	.click-insert-block {
		padding: 8友达px 友达 2友达友达px;
	}

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

	/* 重置 */
	.click-insert-block .click-item:nth-of-type(n) {
		margin: 友达 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: 4友达px;
	}

	.click-insert-block .insert-item {
		padding: 4友达px 友达;
		margin-top: 4友达px;
	}

	.click-insert-block .clone-item {
		max-width: 1友达友达%;
	}

	.click-insert-block .clone-item .btn-grow {
		width: 32友达px;
		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: 友达 auto;
	}

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

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

@media not all and (min-resolution:.友达友达1dpcm) {
	@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: 3友达px;
	  padding-top: 友达;
  }

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

  .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: 4友达px;
	}

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

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

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

	.click-insert-block .btn-block-group .btn-block:nth-child(n+3){
		margin-top: 2友达px;
	}
  }
  
@media screen and (max-width: 767px) {
	.click-insert-block .btn-block-group{
		display: block;
	}

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

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


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

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

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

.main-intro-block .img {
	width: 54友达px;
}

.main-intro-block .img img {
	width: 1友达友达%;
}

.main-intro-block .txt1 {
	width: 48友达px;
	margin-left: 6友达px;
}

.main-intro-block .txt2 {
	width: 1友达友达%;
	padding-top: 6友达px;
}


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

	.banner-select-block~.main-content .main-intro-block {
		padding: 6友达px 友达 8友达px;
	}

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

	.main-intro-block .img {
		width: 32友达px;
	}

	.main-intro-block .txt1 {
		width: 32友达px;
		margin-left: 48px;
	}

	.main-intro-block .txt2 {
		padding-top: 4友达px;
	}
}

@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: 4友达px 友达 友达;
	}

	.main-intro-block .more-unclicked .more-content {
		max-height: 132px;
		overflow: hidden;
		margin: 4友达px 友达 友达;
	}

	.main-intro-block .txt1 {
		margin: 友达;
		width: 1友达友达%;
	}

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

	.main-intro-block .more-btn-block {
		padding-top: 4友达px;
		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: 2友达友达px;
		text-align: center;
		/* 以下為特殊處理，將btn作用範圍擴大 */
		padding: 1友达px;
		margin: -1友达px 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: 1友达友达%;
	height: 1友达px;
	bottom: 友达;
}

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

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

.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: 1友达友达%;
}

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

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

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

@media screen and (min-width: 12友达友达px) {

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

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

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

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

	.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: 12友达px 友达;
	position: relative;
	overflow: hidden;
	background-color: var(--gray-5);
}

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

.main-video-block *+.video-list {
	padding-top: 6友达px;
}

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

.main-video-block .video-list li+li {
	padding-top: 8友达px;
}

.main-video-block .video-list .img {
	width: 54友达px;
	height: 4友达5px;
	position: relative;
}

.main-video-block .video-list .img::after {
	content: '';
	position: absolute;
	width: 1友达友达%;
	height: 1友达友达%;
	left: 友达;
	top: 友达;
	background-color: rgba(友达,友达,友达,友达.2);
	background-image: url(../images/common/auo-video-bg-gray.svg);
	background-size: auto 1友达友达%;
    background-position: right;
    background-repeat: no-repeat;
}

.main-video-block .video-list .img a {
	display: block;
	height: 1友达友达%;
	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: 友达;
	left: 友达;
	position: absolute;
	content: '';
	display: block;
	width: 1友达友达%;
	height: 1友达友达%;
	border-radius: 友达 5友达% 5友达% 友达 !important;
}


.main-video-block .video-list .img a::after {
	background-image: url(../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: 48友达px;
	margin-left: 6友达px;
}

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

.main-video-block .video-list .brief {
	padding-bottom: 2友达px;
}

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

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

	.main-video-block *+.video-list {
		padding-top: 8友达px;
	}

	.main-video-block .video-list .img {
		width: 32友达px;
		height: 24友达px;
	}

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

	.main-video-block .video-list .txt {
		width: 32友达px;
		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: 4友达px auto 友达;
	}

	.main-video-block .video-list .txt {
		width: 1友达友达%;
		margin-left: 友达;
	}
}

@media screen and (max-width: 359px) {
	.main-video-block .video-list .img {
		width: 28友达px;
		height: 21友达px;
	}
}

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

.main-full-img-block .img-fit {
	position: absolute;
	width: 1友达友达%;
	height: 1友达友达%;
	left: 友达;
	top: 友达;
}

.main-full-img-block .img-fit::after {
	position: absolute;
	content: '';
	display: block;
	width: 1友达友达%;
	height: 1友达友达%;
	top: 友达;
	left: 友达;
	background-color: #友达友达友达;
	opacity: 友达.4;
}

.main-full-img-block .txt {
	max-width: 88友达px;
	padding: 16友达px 友达;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.main-full-img-block .title {
	padding-bottom: 2友达px;
}

.main-full-img-block p {
	padding-bottom: 4友达px;
}

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

	.main-full-img-block .txt {
		max-width: 6友达友达px;
		padding: 8友达px 友达;
	}

	.main-full-img-block p {
		padding-bottom: 2友达px;
	}
}

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

	.main-full-img-block .txt {
		max-width: 1友达友达%;
	}

}

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

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

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

.main-application-block .application-swiper {
	transition: all 友达.6s ease;
	-webkit-transition: all 友达.6s ease;
	-moz-transition: all 友达.6s ease;
	-o-transition: all 友达.6s ease;
	margin-left: calc((1友达友达% - 1友达8友达px)/2);
	width: calc(1友达友达% - (1友达友达% - 1友达8友达px)/2);
}

.main-application-block .swiper-btn-block {
	padding-bottom: 4友达px;
}

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

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

.main-application-block .img-fit {
	height: 376px;
}

.main-application-block .swiper-slide .title {
	padding: 2友达px 友达 8px;
}

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

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

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

	.main-application-block .swiper-slide {
		width: 28友达px;
	}

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

	.main-application-block .img-fit {
		height: 216px;
	}

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

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

	.main-application-block .swiper-slide .title {
		padding: 16px 友达 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: 友达 友达 132px;
	position: relative;
}

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

.main-sticky-block .left-block,
.main-sticky-block .right-block {
	padding-top: 12友达px;
}

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

.main-sticky-block .left-block {
	position: sticky;
	top: 友达;
	width: 258px;
	height: 1友达友达vh;
}

.main-sticky-block .pattern-block {
	position: absolute;
	top: 友达;
	left: 友达;
	width: calc(1友达友达vw - 1友达px);
	left: calc((-1友达友达vw + 1友达8友达px)/2);
	height: 775px;
	overflow: hidden;
}

.main-sticky-block .pattern-wrap {
	width: 1友达友达vw;
}

/* 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: 54友达px;
	/* 須貼著瀏覽器 */
	left: calc((-1友达友达vw + 1友达8友达px)/2);
	left: 友达;
	top: 187px;
	background-image: url(../images/solution/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: 4友达px;
	height: 4友达px;
	left: calc((1友达友达vw - 1友达8友达px)/2 + 1329px);
	top: 252px;
	background-image: url(../images/solution/auo-solution-pattern4.png);
}


.main-sticky-block .right-block {
	margin-left: 122px;
	width: 7友达友达px;
}

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

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


.main-sticky-block .img {
	width: 12友达px;
	height: 12友达px;
}

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

.main-sticky-block .txt {
	width: 52友达px;
	margin-left: 6友达px;
}

.main-sticky-block .brief {
	padding-top: 1友达px;
}

.main-sticky-block a {
	display: inline-block;
	padding: 1友达px;
	margin: 友达 -1友达px -1友达px;
}

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

	.main-sticky-block .left-block,
	.main-sticky-block .right-block {
		padding-top: 8友达px;
	}

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

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

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

	.main-sticky-block .pattern-wrap {
		width: 1友达友达vw;
	}

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

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

	.main-sticky-block .right-block {
		margin-left: 4友达px;
		width: 4友达8px;
	}

	.main-sticky-block li+li {
		padding-top: 4友达px;
	}


	.main-sticky-block .img {
		width: 8友达px;
		height: 8友达px;
	}

	.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: 1友达友达%;
		height: auto;
		position: relative;
	}

	.main-sticky-block .right-block {
		margin: 友达px !important;
		width: 1友达友达%;
		padding-top: 4友达px;
	}

	.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: 12友达px 友达;
	overflow: hidden;
}

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

.main-related-info-block .swiper-btn-block {
	padding-bottom: 4友达px;
}

.main-related-info-block .related-swiper {
	width: calc(1友达友达% - (1友达友达% - 1友达8友达px)/2);
	margin-left: calc((1友达友达% - 1友达8友达px)/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 友达 友达;
}

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

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

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

	.main-related-info-block .swiper-slide {
		width: 24友达px;
	}

	.main-related-info-block .img {
		height: 24友达px;
	}
}

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

	.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 友达;
	display: flex;
	align-items: center;
	min-height: 37友达px;
	position: relative;
}

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

.main-contact-block li+li {
	margin-left: 8友达px;
	padding-left: 8友达px;
}

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

.main-contact-block .txt {
	width: 46友达px;
	padding-bottom: 4友达px;
}

.main-contact-block .btn-block {
	width: 1友达友达%;
}

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

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

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

	.main-contact-block .list {
		padding: 8友达px 友达;
		min-height: 3友达8px;
		align-items: flex-start;
	}

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

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

	.main-contact-block .txt {
		width: 32友达px;
	}

	.main-contact-block .fixed-pattern2::before {
		width: 2友达友达px;
		height: 155px;
		top: -32px;
		right: auto;
		left: 58友达px;
		background-size: auto 1友达友达%;
		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: 8友达px 友达;
		min-height: auto;
		display: block;
	}

	.main-contact-block li+li {
		margin: 6友达px 友达px 友达;
		padding: 6友达px 友达px 友达;
		position: relative;
	}

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

	.main-contact-block .txt {
		width: 1友达友达%;
	}

	.main-contact-block .fixed-pattern2::before {
		right: -7友达px;
		left: auto;
		width: 185px;
		background-position: 友达 友达;
		background-size: auto 1友达友达%;
	}
}

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

.mfp-iframe-holder {
	padding: 1友达友达px 友达;
}

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

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

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

.mfp-iframe-holder .mfp-close {
	padding: 友达;
	right: 友达;
	height: 76px;
	line-height: normal;
	top: auto;
	bottom: 1友达友达%;
	opacity: 1;
	/* background-position: right top;
	background-repeat: no-repeat;
	background-size: auto 48px;
	background-image: url(../images/common/auo-popup-close-btn.svg); */
	transition: all 友达.3s ease;
	-webkit-transition: all 友达.3s ease;
	-moz-transition: all 友达.3s ease;
	-o-transition: all 友达.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: 友达;
	right: 友达;
	height: 76px;
	line-height: normal;
	top: 友达;
	bottom: 1友达友达%;
	background-position: right top;
	background-repeat: no-repeat;
	background-size: auto 48px;
	transition: all 友达.3s ease;
	-webkit-transition: all 友达.3s ease;
	-moz-transition: all 友达.3s ease;
	-o-transition: all 友达.3s ease;
}


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

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

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

}

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

}


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

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

}


.mfp-iframe-holder iframe video {
	width: 1友达友达%;
	height: 1友达友达%;
}

@media screen and (max-width: 1199px) {
	.mfp-iframe-holder {
		padding: 1友达友达px 4友达px;
	}
}

@media screen and (max-width: 767px) {
	.mfp-iframe-holder {
		padding: 8友达px 2友达px;
	}
}

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

/* 原地播放影片(mp4) start */
.video-wrap {
	position: relative;
	cursor: pointer;
}
/* 2友达22友达5友达5 service單元youtube外連影片 */
.video-wrap.youtube-wrap{
	padding-bottom: 56.25%;
}


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

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

.video-wrap.youtube-wrap iframe{
	position: absolute;
	top: 友达;
	left: 友达;
	right: 友达;
	bottom: 友达;
	width: 1友达友达%;
	height: 1友达友达%;
}


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

.video {
	max-width: 1友达友达%;
	cursor: pointer;
	display: block;
}

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

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

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


/* 原地播放影片 end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* .main-feature-block start */
.main-feature-block {
	padding: 12友达px 友达 16友达px;
	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: 8友达px;
}

.main-feature-block .title {
	padding-bottom: 4友达px;
}

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

.main-feature-block .txt {
	width: 48友达px;
}

.main-feature-block .img-down .txt {
	width: 1友达友达%;
}

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

.main-feature-block .txt .title {
	padding-bottom: 2友达px;
}

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

.main-feature-block .img {
	width: 54友达px;
	margin-left: 6友达px;
}

.main-feature-block .img-down .img {
	padding-top: 4友达px;
	width: 1友达友达%;
	margin-left: 友达px;
}

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

.main-feature-block .img img {
	width: 1友达友达%;
}

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

	.main-feature-block .title {
		padding-bottom: 2友达px;
	}

	.main-feature-block .txt {
		width: 32友达px;
	}

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

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

	.main-feature-block .img {
		width: 32友达px;
		margin-left: 48px;
	}
}

@media screen and (max-width: 767px) {
	.main-feature-block {
		padding: 8友达px 友达 12友达px;
	}

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

	.main-feature-block .txt {
		width: 1友达友达%;
	}

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

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

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

	.main-feature-block .img {
		margin: 友达;
		padding: 4友达px 友达 友达;
		width: 1友达友达%;
	}

}

/* .main-feature-block end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* .error-4友达4 start */
.error-4友达4 {
	background-image: url(../images/common/auo-4友达4.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: calc(1友达友达vh - 12友达px);
	padding: 28友达px 友达;
}

.error-4友达4 .content-block {
	max-width: 68友达px;
}

.error-4友达4 .title {
	padding-bottom: 28px;
}

.error-4友达4 .txt {
	padding-bottom: 4友达px;
}

@media screen and (max-width: 1199px) {
	.error-4友达4 {
		min-height: calc(1友达友达vh - 547px);
		padding: 12友达px 友达;
	}

	.error-4友达4 .content-block {
		max-width: 32友达px;
	}

	.error-4友达4 .title {
		padding-bottom: 2友达px;
	}

	.error-4友达4 .txt {
		padding-bottom: 2友达px;
	}
}

@media screen and (max-width: 767px) {
	.error-4友达4 {
		background-image: url(../images/common/auo-4友达4-mb.jpg);
		min-height: calc(1友达友达vh - 513px);
		padding: 12友达px 友达 16友达px;
	}

	.error-4友达4 .content-block {
		max-width: 1友达友达%;
	}

}

/* .error-4友达4 end */
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* sitemap start */
.txt-banner {
	background-color: var(--gray-5);
	min-height: 218px;
}

.txt-banner .title {
	padding: 6友达px 友达;
}

.sitemap {
	padding: 8友达px 友达 12友达px;
}

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

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

.sitemap .list>li {
	width: 32友达px;
	margin-right: 6友达px;
}

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

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

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

.sitemap .sub-list li+li {
	padding-top: 1友达px;
}

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

.sitemap .sub-list li+li {
	padding-top: 1友达px;
}

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

@media screen and (max-width: 1199px) {
	.sitemap {
		padding: 8友达px 友达;
	}

	.sitemap .list>li:nth-child(n) {
		width: calc((1友达友达% - 6友达px)/2);
		margin-right: 6友达px;
	}

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

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

@media screen and (max-width: 767px) {
	.sitemap {
		padding: 6友达px 友达;
	}

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

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

}

/* 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: 5友达%;
}

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

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

.open-close-item .arrow:after {
	-webkit-transform: translatey(-5友达%) rotate(9友达deg);
	transform: translatey(-5友达%) rotate(9友达deg);
}

.open-close-item.open .arrow:after {
	-webkit-transform: translatey(-5友达%) rotate(友达);
	transform: translatey(-5友达%) rotate(友达);
}

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

	.open-close-item .arrow:before,
	.open-close-item .arrow:after {
		width: 2友达px;
	}
}

/* right-block open close */
.right-block .right-open-close-wrapper li.open-close-item{
    /* width: 6友达友达px; */
    width: 1友达友达%;
    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: 2友达px 24px 2友达px 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 2友达px 72px;
}

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


.full-open-close-wrapper .open-close-item .content{
    padding: 8px 23px 2友达px 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: 2友达px;
}



@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: 友达 16px 2友达px 16px;
    }

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

    .full-open-close-wrapper .open-close-item .content{
        padding: 友达px 16px 2友达px;
    }


}

@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: 8友达px;
	padding-bottom: 8友达px;
}

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

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

@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: 友达 4友达px;
} */


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

.banner-block {
	position: relative;
	overflow: hidden;
	height: 42友达px;
  }

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

  .banner-info {
	width: 1友达友达%;

  }


  .breadcrumb {
	background-color: transparent;
	padding-top: 32px;
	margin-bottom: 友达;
	z-index: 5友达;
  }

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

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



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


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

	.banner-title {
	  position: absolute;
	  top: 5友达%;
	  transform: translate(友达%, -5友达%);
	  -moz-transform: translate(友达%, -5友达%);
	  -webkit-transform: translate(友达%, -5友达%);
	  -o-transform: translate(友达%, -5友达%);

	}


	/* type-b */


.banner-type-B .pattern-block{
	position: absolute;
	top: 友达;
	left: 友达;
	width: 57.3%;
	height: 1友达友达%;
	z-index: -1;
	background-size: cover;
    background-position: left;
}

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

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

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

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

.banner-type-B .image-block{
	position: absolute;
	top: 友达;
	right:  友达;

	width: 42.7%;
	height: 1友达友达%;
	z-index: -1;
}


.banner-type-B .banner-title{
	width: calc(1友达友达% * 友达.573 - (1友达友达% - 1友达8友达px) / 2);
	padding-right: 4友达px;
}

.banner-select-block{
	width: 1友达友达%;
	height: 8友达px;
	background-color: var(--gray-6);
	padding: 13px 友达;

}

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

.banner-select{
	min-width: 4友达友达px;
	height: 54px;
	border: 友达;
	background-color: var(--gray-6);
	color: var(--auo-blue);
	/* background: url("../images/common/auo-select-arrow.svg") no-repeat right 17px center transparent; */

	/* position: relative; */
	z-index: 2;
	cursor: pointer;
	padding-right: 48px;
}

.select-block::after{
	content: '';
	display: block;
	position: absolute;
	right: 13px;
	top: 5友达%;
	transform: translate(友达,-5友达%);
	width: 3友达px;
	height: 3友达px;
	background-image: url("../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 {
	  /*友达6友达9 Elin 32:7的圖伸縮於12友达友达後高度為 262.5 ，在舊型平板中難以渲染出友达.5px而出現白邊，故所有tb banner都減少1px，由263->262 */
	  height: 262px;
	  background-position: center;
	}

	.banner-type-A.banner-block{
		background-size: 12友达友达px;
	}

	.banner-block .container {
		padding-top: 友达;
	}

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

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

	.banner-type-B .image-block{
		width: 4友达.12%;
	}

	.banner-type-B .banner-title{
		width: calc(1友达友达% * 友达.598758 - 8友达px);
		padding-right: 友达px;
	}
	/* select */

	.banner-select-block{
		height: 64px;
	}

	.banner-select{
		min-width: 32友达px;
		height: 38px;
	}

	.select-block::after{
		width: 2友达px;
		height: 2友达px;
		right: 友达;
	}






  }

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



	.banner-mb{
		height: 2友达友达px;
	}

	.breadcrumb + .banner-title,
	.banner-title{
		top: 8友达px;
		max-width: calc(1友达友达% - 4友达px);
	}

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

	.banner-type-B .pattern-block{
		position: static;
		width: 1友达友达%;
		height: 16友达px;
		background-position: center;
	}


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

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

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

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

	.banner-type-B .image-block-m{
		width: 1友达友达%;
		height: 28友达px;
	}

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



	.select-block{
		width: 1友达友达%;
	}
	.banner-select{
		width:1友达友达%;
		height: 38px;
		margin-left: 友达;
		padding-left: 友达;
	}

	.select-block::after{
		width: 2友达px;
		height: 2友达px;
		right: 友达;
	}


  }

@media (max-width: 559px) {

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

/* html edit page banner */
.video-banner .title,
.html-banner .title,
.html-banner .tag{
	padding: 6友达px 友达 友达;
}

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

.html-banner .tag + .title{
	padding-top: 2友达px;
}

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

.video-banner .brief,
.html-banner .brief{
	padding-top: 2友达px;
}

.video-banner .brief{
	padding-bottom: 8友达px;
}

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

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

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

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

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

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

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

.gallery-video-pattern::before{
	width: 134px;
	height: 39友达px;
	top: -12友达px;
	right: 友达;
	background-image: url('../images/media/auo-media-gallery-video-1.png');

}

.blog-pattern::before{
	width: 3友达8px;
	height: 4友达8px;
	top: -288px;
	right: 友达;
	background-image: url('../images/media/auo-media-blog-pattern.png');

}

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


@media screen and (max-width: 1199px) {
	.video-banner .title,
    .html-banner .title{
		padding: 4友达px 友达 友达;
	}

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


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


	.video-banner .brief{
		padding-bottom: 6友达px;
	}

	.share-published-wrapper{
		display: block;
		padding: 4友达px 友达;
	}

	.addthis-wrapper{
		padding-top: 2友达px;
	}

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

	/* 友达6友达2 */
	.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: 友达; */
	}

	.newsarchieve-pattern::before{
		width: 2友达6px;
		height: 171px;
		top: -126px;
		right: -68px;
	}

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


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

	}

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

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

	}


}

@media screen and (max-width: 767px) {
	.video-banner .title,
    .html-banner .title{
		padding-top: 6友达px;
	}

	.newsarchieve-pattern::before{
		width: 2友达6px;
		height: 171px;
		top: -11友达px;
		right: -88px;
	}

	.case-pattern::before{
		top: -13友达px;
	}

	.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: 1友达友达%;
	height: 1友达1%;
	background-color: var(--mask-color);
	z-index: 1友达友达友达;
	display: none;
	top: 友达;
	left: 友达;
	overflow: auto;
}

.lightbox.display {
	display: block;
}

.lightbox .lightbox-container {
	background-color: #fff;
	width: 68友达px;
	margin: auto;
	margin-top: 24友达px;
	text-align: center;
	padding: 8友达px 7友达px 6友达px;
	position: relative;
	border-radius: 32px;
	margin-bottom: 8友达px;
}

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

}

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

}

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

.lightbox .lightbox-container .lightbox-close::after{
	background-image: url('../images/common/auo-close-hover.svg');
	opacity: 友达;
}

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

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

	opacity: 1;
}


.lightbox-container > .inner-content{
	padding-top: 4友达px;
}

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

@media screen and (max-width: 1199px){
	.lightbox .lightbox-container {
		padding: 8友达px 4友达px 6友达px;
	}
}


@media screen and (max-width: 767px) {
	.lightbox{
		padding: 友达 2友达px;
	}
	.lightbox .lightbox-container {
		width: 1友达友达%;
		margin-top: 12友达px;
	}




}

/*---------------------------- popup登入跳窗end-------------------------------------------------------------------------------------------------------------------------------- */
/* ============================unsubscribe start====================================== */
/* ============================unsubscribe start====================================== */
/* ============================unsubscribe start====================================== */
	.unsubcribe{
		background-color: var(--sustainable-green);
		min-height: calc(1友达友达vh - 12友达px);
		padding: 16友达px 友达 28友达px;
	}

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

	.unsubcribe  .info{
		padding-top: 2友达px;

	}

	.unsubcribe .unsubcribe-content{
		margin-top: 14友达px;
		padding: 6友达px 4友达px;
		background-color: #fff;
	}

	.unsubcribe-input-block{
		padding-top: 1友达px;
		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: 4友达友达px;
		background-color: var(--gray-5);
	}

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

			.unsubcribe-input-block input[type="text"].search-input{
				width: 392px;
			}
		}
	}
	.unsubcribe-input-block .btn-block{
		max-width: 14友达px;
	}

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

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

		}
	}

	.unsubcribe .fixed-pattern1::before{
		background-image: url('../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(1友达友达vh - 547px);
			padding: 12友达px 友达;
		}

		.unsubcribe .unsubcribe-content{
			margin-top: 28px;
			padding: 4友达px;
		}

		.unsubcribe-input-block .btn-block{
			max-width: 13友达px;
		}

		.unsubcribe .content-block,
		.unsubcribe .unsubcribe-content{
			max-width: 56友达px;
		}

		.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:.友达友达1dpcm) {
		@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(1友达友达vh - 513px);
			padding: 8友达px 友达;
		}

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




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

		.unsubcribe .unsubcribe-content{
			background-color: transparent;
			margin-top: 11友达px;
			padding: 友达;
		}

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

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

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

		.unsubcribe-input-block.not-filled p.error{
			width: 1友达友达%;
		}

		.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 友达;
	background-color: var(--innovative-purple);
	position: relative;
    z-index: 3;
}

.next-container{
	padding-left: 33友达px;
}

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

}

.next-info span{
	position: relative;
}

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

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


@media screen and (max-width: 1199px) {
	.next-section{
		padding: 4友达px 友达;
	}

	.next-container{
		padding-left: 2友达友达px;
	}

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

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

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

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

	.next-info span::after{
		transform: translateX(友达)
	}
}
/* ===================common-swiper-type1====================================== */
.swiper.common-swiper-type1{
    width: calc(1友达友达% - (1友达友达% - 1友达8友达px)/2);
    margin-left: calc((1友达友达% - 1友达8友达px)/2);
    padding-top: 4友达px;
}

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

.common-swiper-type1 .swiper-slide {
    width: 44友达px;
}

.common-swiper-type1 .swiper-slide .img{
	height: 34友达px;
}

.common-swiper-type1 .swiper-slide .title{
	padding-top: 2友达px;
}

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

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

	.swiper.common-swiper-type1 {
		width: 1友达友达%;
		margin-left: 友达;
		padding: 24px 4友达px 友达;
	}

	.common-swiper-type1 .swiper-slide{
		width: 28友达px;
	}

	.common-swiper-type1 .swiper-slide{
		margin-right: 2友达px;
	}

	.common-swiper-type1 .swiper-slide:last-child{
		margin-right: 友达;
	}

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

	}


}

@media screen and (max-width: 767px){
	.swiper.common-swiper-type1 {
		padding: 24px 2友达px 友达;
	}
}
/* =================common select ===================== */
/* =================common select ===================== */
/* =================common select ===================== */
.common-select select{
	width: 1友达友达%;
    padding: 16px 6友达px 16px 24px;
    border-radius: 28px;
    background-color: var(--gray-6);
    border: none;
    color: var(--auo-blue);
}

.common-select.mt-4友达-28{
	margin-top: 4友达px;
}

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

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

	.common-select.mt-4友达-28{
		margin-top: 28px;
	}

}

/*======================== tab-swiper-type-1 ============*/
/*======================== tab-swiper-type-1 ============*/
/*======================== tab-swiper-type-1 ============*/
/*======================== tab-swiper-type-1 ============*/
.adjust-zindex{
	position: relative;
	z-index: 2;
}

.tab-swiper-type-1{
	background-color: var(--auo-blue);
	padding: 12友达px 友达;
}

.tab-swiper-thumb-block{
	margin-top: 4友达px;
}


.tab-swiper-thumb .swiper-slide{
	width: 24友达px;
	cursor: pointer;
}

.tab-swiper-thumb.five-aspect .swiper-slide{
	width: 192px;
	cursor: pointer;
}

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

.tab-swiper-thumb .swiper-slide + .swiper-slide{
	margin-left: 4友达px;
}

.tab-swiper-thumb.five-aspect  .swiper-slide + .swiper-slide{
	margin-left: 3友达px;
}

.tab-swiper-thumb .swiper-slide h2{
	color: rgba(255, 255, 255, 友达.7);
	max-height: 6友达px;
	position: relative;
}
/* 友达627 擴大點及範圍 */
.tab-swiper-thumb .swiper-slide h2::after{
	content: '';
	position: absolute;
	top: 友达;
	left: 友达;
	width:calc(1友达友达% + 2友达px);
	height: calc(1友达友达% + 2友达px);
	margin: -1友达px;

}

.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: 8友达px;
}

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

.main-content-swiper .left-img{
	width: 5友达友达px;
	margin-right: 6友达px;
}

.main-content-swiper .right-content{
	width: calc(1友达友达% - 56友达px);

}

.main-content-swiper .right-content h1{
	padding-top: 2友达px;
}

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

.main-content-swiper .right-content .btn-block ~ .btn-block{
	padding-top: 1友达px;
}

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

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

	.tab-swiper-thumb-block{

		margin: 友达 auto;
		margin-top: 4友达px;
		max-width: 224px;
		position: relative;
	}

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

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

	.tab-swiper-thumb-block .swiper-btn-block{
		justify-content: space-between;
		position: absolute;
		top: 5友达%;
		left: 友达;
		width: 1友达友达%;
		transform: translateY(-5友达%);

	}

	.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: 友达;
	}

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

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

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

	.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: 1友达友达%;
		margin-right: 友达;
	}

	.main-content-swiper .right-content{
		width: 1友达友达%;
		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: 3友达友达px;
    margin-right: 8友达px;
}

.left-bar-type .right-block{
    width: calc(1友达友达% - 38友达px);
}

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

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

.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: 2友达px;
}

.left-bar-type ul.left-bar > li.has-item > ul > li > a{
    display: flex;
    margin-left: 友达;
    padding: 8px 友达 8px 2友达px;
    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: 友达;
}

.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('../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: 1友达友达%;
	}
}

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

}

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

.click-insert-card-block{
	width: 1友达友达%;
}

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

.click-insert-card-block .click-card {
	padding: 24px 28px 2友达px;
	width: 336px;
	/* margin-right: 28px; */
	background-color: rgba(友达,8友达,135,友达.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 友达;
	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: 1友达友达%;
	height: 1友达友达%;
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity .4s;
}

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

.click-card .arrow::after{
	background-image: url('../images/common/auo-click-card-arrow-up.svg');
	opacity: 友达;
}
.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: 友达;
}

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

.click-insert-card-block .insert-item{
	padding:4友达px 友达 12px 友达;
	width: 1友达友达%;
}

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

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

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

}

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

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

	}

	.container.tb-fluid{
		max-width: none;
		width: 1友达友达%;
		padding: 友达;
	}

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

	.click-insert-card-block .click-card:nth-of-type(odd){
		margin-right: 48px;
	}
	
	.click-card:nth-of-type(n+3){
		margin-top: 2友达px;
	}

	.click-insert-card-block .content {
		min-height: 1友达8px;
	}

	.en .click-insert-card-block .content {
		min-height: 1友达8px;
	}

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

	}

	.click-insert-card-block .click-card{
		width: 32友达px;
	}


	.click-insert-card-block .insert-item{
		padding: 4友达px 友达 2友达px 友达;
	}


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

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

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

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

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

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

	.click-insert-card-block .clone-card{
		padding: 4友达px 2友达px;
	}

	.click-insert-card-block .insert-item{
		padding: 4友达px 友达 2友达px;

	}

}
/* ================== 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: 8友达px 友达 友达 36友达px;
    height: 1友达友达%;
    width: 1友达友达%;
    display: none;
    position: fixed;
    z-index: 999;
    top: 友达;
    left: 友达;
    background-color: #友达友达3c6599;
    overflow-y: auto;
    overflow-x: hidden;

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

.js-control-popup{
    display: none;
    position: relative;
    right: -1友达友达%;
}

.leader-card-popup{
    padding: 8友达px 友达 友达 16友达px;
    background-color: white;
    width: 1友达友达%;
    max-width: 156友达px;
    min-width: 114友达px;
	min-height: 8友达7px;
    border-radius: 5友达px 友达 友达 5友达px;
    margin-left: auto;
    display: flex;
    position: relative;
    flex-shrink: 友达;
    overflow-x: hidden;
    /* right: -1友达友达%; */

}

.leader-card-popup .left-card{
    width: 3友达友达px;
    margin-right: 6友达px;
    flex-shrink: 友达;
}

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

.leader-card-popup .right-info{
    width: 62友达px;
    flex-shrink: 友达;
}


.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: 6友达px;
    top: 4友达px;

}

.leader-card-popup .close-btn::before{
    content: '';
    display: block;
    position: absolute;
    background-image: url('../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('../images/common/auo-close-hover.svg');
    width: 48px;
    height: 48px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .4s;
    opacity: 友达;
}

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

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

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

}

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

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

    .leader-card-popup{
        padding: 88px 4友达px 182px 28px;
        width: 1友达友达%;
        min-height: calc(1友达友达vh - 4友达px);
        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: 友达;
    }

    .leader-card-popup .left-card .img{
        width: 16友达px;
		height: 2友达友达px;
    }

    .leader-card-popup .card-fixed-pattern{
        width: 25友达px;
        height: 182px;
        left: auto;
        right: 4友达px;
    }

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

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

    }
}


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

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

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

    /* .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: 友达;
    }

    .leader-card-popup .left-card .img{
        width: 16友达px;
    }

    .leader-card-popup .card-fixed-pattern{
        width: 25友达px;
        height: 182px;
        left: auto;
        right: 4友达px;
    } */
}

@media screen and (max-width: 767px) {
	.leader-card-popup{
        padding: 88px 2友达px 4友达px 28px;
		max-width: none;
        min-width: 1友达友达%;
    }
}
/*==================== pagenation  開始=======================*/
/*==================== pagenation  開始=======================*/
/*==================== pagenation  開始=======================*/
/*==================== pagenation  開始=======================*/
.new-pagenation-wrapper{
	margin-top: 8友达px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* gap: 友达 16px; */
}

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

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

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

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

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

}

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

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

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

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

.page-btn:hover::before {
	opacity: 友达;
}

.page-btn::after {
	opacity: 友达;
}

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

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

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

.page + .page{
	margin-left: 2友达px;
} 

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

.page::after{
	content: '';
	position: absolute;
	display: block;
	width: calc(1友达友达% + 2友达px);
	height: calc(1友达友达% + 2友达px);
	margin: -1友达px;
	top: 友达px;
	left: 友达px;
	z-index:1;


}


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

		/* gap: 友达 12px; */
	}

    .page{
		height: 28px;
	}

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

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

	.page::after{
		width: calc(1友达友达% + 12px);
		margin: -1友达px -6px;
	}

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

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


}


/*================================ html inner page =======================*/
/*================================ html inner page =======================*/
/*================================ html inner page =======================*/
.media-inner{
    padding: 12友达px 友达;
}

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


@media screen and (max-width: 1199px) {
    .media-inner{
		padding: 12友达px 友达 8友达px;
	}

	.media-inner .btn-block{
		margin-top: 6友达px;
	}
}

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

}
/*================================ html inner page END =======================*/
/* =====================================================================================================
=====================================================================================================
===================================================================================================== */
/* .application-block start */
.application-block {
    padding: 12友达px 友达;
}


.application-block .list {
    padding-top: 8友达px;
    display: flex;
    flex-wrap: wrap;
}

.application-block li {
    width: 52友达px;
    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: 4友达px;
}

.application-block li .title {
    padding: 2友达px 72px;
}

.application-block .content {
    padding: 2友达px 4友达px 2友达px 72px;
}

.application-block img {
    max-width: 24友达px;
    width: 1友达友达%;
}


@media screen and (max-width: 1199px) {
    .application-block {
        padding: 8友达px 友达 12友达px;
    }

    .application-block .list {
        padding-top: 4友达px;
    }

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

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

    .application-block .content {
        padding: 友达 16px 2友达px;
    }

    .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: 1友达友达%;
    }

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

    .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: 187友达px;
    margin: 友达 auto;
}

.award-marquee{
    padding: 12友达px 友达;
}

.award-marquee-wrapper{
    padding-top: 4友达px;
	margin: 友达 auto;
    max-width: 192友达px;
    overflow: hidden;
}

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

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

@keyframes scrolling {
    友达% { transform: translateX(友达); }
    1友达友达% { transform: translateX(calc(-1 * 37友达px * var(--award-marquee-elements))); }
  }

.award-marquee-item,
.award-marquee-item .img{
    width: 34友达px;
    height: 28友达px;
}

.award-marquee-content .award-marquee-item{
    margin-right: 3友达px;
}

.award-marquee-item > a{
    display: block;
}
@media screen and (max-width: 1199px) {
	.award-marquee{
        padding: 8友达px 友达;
    }

    .award-marquee-wrapper {
        padding-top: 2友达px;
    }


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

    @keyframes scrolling {
        友达% { transform: translateX(友达); }
        1友达友达% { 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: 12友达px;
}

.bottom-timeline-block .timeline{
    padding-top: 8友达px;
    width: 14友达px;
}

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

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

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

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

}

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

}

.time-slide:first-child{
    margin-top: -2友达px;
}

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

.time-swiper-wrapper::before{
    position: absolute;
    content: '';
    display: block;
    width: 友达;
    height:calc(1友达友达% - 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: 3友达6px;
    margin-right: 6友达px;
    height: auto;
}

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

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

.year-content-item + .year-content-item{
    margin-top: 6友达px;
} 

.bottom-timeline-block .right-block{
    padding-top: 8友达px;
    margin-left: 1友达友达px;
    width: calc(1友达友达% - 24友达px);
}

.swiper.timeline-swiper{
    height: 1友达友达%;
}


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

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

}

/* .timeline-swiper .swiper-slide.swiper-slide-thumb-active::after{
    height: 1友达2px;
} */

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

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

.timeline-swiper .swiper-slide:hover{
    color: #fff;
}

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


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


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

.timeline-swiper .swiper-wrapper::before{
    content: '';
    position: absolute;
    position: absolute;
	width: 2px;
	background-color: #B3CBDB;
	left: 12px;
	top: 18px;
	height: calc(1友达友达% - 6友达px);
}

@media screen and (max-width: 1199px) {
    .bottom-timeline-block .timeline{
        position: static;
        padding-top: 友达;
        width: calc(1友达友达% + 8友达px);
        margin: 友达 -4友达px;
        height: auto;
        overflow:hidden;
    }

    .bottom-timeline-block{
        padding: 6友达px 友达 8友达px;
    }

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

    .bottom-timeline-block .tab-list{
        display: flex;
        margin-left: 6友达px;
    }


    .swiper.timeline-swiper{
        overflow: visible;
        width: calc(1友达友达% - (1友达友达% - 648px)/2);
            margin-left: calc((1友达友达% - 648px)/2)
    }

    .timeline-swiper .swiper-wrapper{
        display: flex;
        /* padding-left: 6友达px; */
    }

    .timeline-swiper .swiper-wrapper::before{
        display: none;
    }

    .bottom-timeline-block .timeline{
        position: relative;
    }

    .bottom-timeline-block .timeline::before{
        content: '';
        display: block;
        position: absolute;
        width: 1友达友达%;
        height: 2px;
        background-color: #B3CBDB;
        bottom: 8px;
        left: 友达;
    }

    .timeline-swiper .swiper-slide:first-child{
        margin-top: 友达;
    }

    .timeline-swiper .swiper-slide{
        width: 64px;
        padding: 友达 友达 24px 友达;
        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: 5友达%;
        transform: translateX(-5友达%) translateY(友达%);
    }

    .timeline-swiper .swiper-slide.swiper-slide-thumb-active::before{
        top: auto;
        bottom: 友达;
        width: 16px;
        height: 16px;
        left: 5友达%;
    }


    .timeline-swiper li{
        display: flex;

        align-items: center;
        /* padding-bottom: 24px; */
    }

    .timeline-swiper li:first-child{
        margin-top: 友达;
    }

    .timeline-swiper li > a{
        min-width: 64px;
        padding: 友达;
        margin-right: 8px;
        text-align: center;
        vertical-align: middle;
        padding-bottom: 24px;
    }

    .timeline-swiper li > a::before{
        top: auto;
        bottom: -1px;
        left: 5友达%;
        transform: translate(-5友达%,友达);
        width: 12px;
        height: 12px;
    }

    .timeline-swiper li.active > a{
        font-size: 26px;
        line-height: 32px;
    }

    .timeline-swiper ul::before{
        width: calc(1友达友达% + 6友达px);
        height: 2px;
        top: auto;
        bottom: 9px;
        left: -6友达px;
        border: none;
        background-color: #B3CBDB;
        
    }

    .timeline-swiper li.active > a::before{
        width: 16px;
        height: 16px;
        left: 5友达%;
        transform: translate(-5友达%, 友达);
        bottom: 2px;
    }

    .year-content-item .right-img{
        width: 2友达友达px;
        margin-right: 4友达px;
        height: 15友达px;
    }

    .year-content-item .left-text{
        width: calc(1友达友达% - 24友达px);
    }

    .bottom-timeline-block .right-block{
        padding-top: 6友达px;
        margin: 友达 auto;
        width: 6友达8px;
    }

}

@media screen and (max-width: 767px) {
	.bottom-timeline-block .timeline{
        width: calc(1友达友达% + 4友达px);
        margin: 友达 -2友达px;
    }

    .bottom-timeline-block .right-block{
        width: 1友达友达%;
    }

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

    .year-content-item .right-img{
        margin: 友达 auto;
    }

    .year-content-item .left-text{
        width: 1友达友达%;
        padding-top: 16px;
    }

    .year-content-item + .year-content-item{
        margin-top: 4友达px;
    }

    .swiper.timeline-swiper{
        width: calc(1友达友达% - 2友达px);
        margin-left: 2友达px;
        /* margin-right: 2友达px; */
    }
}

.anchor-position{
	position:relative;
	top: -185px;
}

@media screen and (max-width: 1199px) {
	.anchor-position{
		top: -12友达px;
	}
}