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



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

.white {
	color: #fff !important;
}

.gray-1 {
	color: #646464;
}

.bold {
	font-weight: bold;
}

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

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

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

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

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

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

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

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

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

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

.more-btn.white::after {
	background-image: url(../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: 0;
	height: 0;
}

.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: 0 !important;
}




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

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

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

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

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

/* 背景淺色 */
.swiper-btn-block .pre-btn::before {
	background-image: url(../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: 20px;
	}

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

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

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

}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {
		
	}
  }
  /* ---------------text------------------- */
  .click-insert-block .btn-block-group{
	  display: flex;
	  flex-wrap: wrap;
	  padding-top: 32px;
  }

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

.main-video-block .video-list .img {
	width: 540px;
	height: 405px;
	position: relative;
}

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

.main-video-block .video-list .img a {
	display: block;
	height: 100%;
	position: relative;
	overflow: hidden !important;
	clip-path: content-box;
}

.main-video-block .video-list .img a::after,
.main-video-block .video-list .img a::before {
	top: 0;
	left: 0;
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0 50% 50% 0 !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: 480px;
	margin-left: 60px;
}

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

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

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

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

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

	.main-video-block .video-list .img {
		width: 320px;
		height: 240px;
	}

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

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

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

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

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

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

@media screen and (max-width: 359px) {
	.main-video-block .video-list .img {
		width: 280px;
		height: 210px;
	}
}

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

.main-application-block .application-swiper {
	transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	margin-left: calc((100% - 1080px)/2);
	width: calc(100% - (100% - 1080px)/2);
}

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

/* 寫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: 20px 0 8px;
}

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.mfp-iframe-holder .mfp-close::before{
	background-image: url(../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: 0;
}

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

}

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

}


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

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

}


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

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

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

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

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


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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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


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

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

}

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

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



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

}


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

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

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

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


}

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

}


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








/* Elin start */

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

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

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

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

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

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


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

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

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

  .banner-info {
	width: 100%;

  }


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

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

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



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


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

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

	}


	/* type-b */


.banner-type-B .pattern-block{
	position: absolute;
	top: 0;
	left: 0;
	width: 57.3%;
	height: 100%;
	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: 0;
	right:  0;

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


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

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

}

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

.banner-select{
	min-width: 400px;
	height: 54px;
	border: 0;
	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: 50%;
	transform: translate(0,-50%);
	width: 30px;
	height: 30px;
	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 {
	  /*0609 Elin 32:7的圖伸縮於1200後高度為 262.5 ，在舊型平板中難以渲染出0.5px而出現白邊，故所有tb banner都減少1px，由263->262 */
	  height: 262px;
	  background-position: center;
	}

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

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

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

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

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

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

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

	.banner-select{
		min-width: 320px;
		height: 38px;
	}

	.select-block::after{
		width: 20px;
		height: 20px;
		right: 0;
	}






  }

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



	.banner-mb{
		height: 200px;
	}

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

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

	.banner-type-B .pattern-block{
		position: static;
		width: 100%;
		height: 160px;
		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: 100%;
		height: 280px;
	}

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



	.select-block{
		width: 100%;
	}
	.banner-select{
		width:100%;
		height: 38px;
		margin-left: 0;
		padding-left: 0;
	}

	.select-block::after{
		width: 20px;
		height: 20px;
		right: 0;
	}


  }

@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: 60px 0 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

}

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


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

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


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


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

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

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

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

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

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

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

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

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


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

	}

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

	.blog-pattern::before{
		width: 129px;
		height: 171px;
		top: -110px;
		right: 0;
		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: 60px;
	}

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

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

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


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

.lightbox.display {
	display: block;
}

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

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

}

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

}

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

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

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

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

	opacity: 1;
}


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

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

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


@media screen and (max-width: 767px) {
	.lightbox{
		padding: 0 20px;
	}
	.lightbox .lightbox-container {
		width: 100%;
		margin-top: 120px;
	}




}

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

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

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

	}

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

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


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

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

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

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

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

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

		}
	}

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

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

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



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

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

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

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

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

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

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


	}

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

			@media (max-width: 1199px){

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

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

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

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




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

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

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

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

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

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

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

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

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

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

}

.next-info span{
	position: relative;
}

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

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


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

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

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

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

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

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

	.next-info span::after{
		transform: translateX(0)
	}
}
/* ===================common-swiper-type1====================================== */
.swiper.common-swiper-type1{
    width: calc(100% - (100% - 1080px)/2);
    margin-left: calc((100% - 1080px)/2);
    padding-top: 40px;
}

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

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

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

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

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

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

	.swiper.common-swiper-type1 {
		width: 100%;
		margin-left: 0;
		padding: 24px 40px 0;
	}

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

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

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

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

	}


}

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

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

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

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

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

}

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

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

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


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

.tab-swiper-thumb.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: 40px;
}

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

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

}

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

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

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

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

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

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

}

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

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

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

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

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

	.tab-swiper-thumb-block{

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

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

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

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

	}

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

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


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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

}


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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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


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

}

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

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

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

.click-card .arrow::before{
	background-image: url('../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: 0;
}
.click-card:hover,
.click-insert-card-block .click-card.selected{
	background-color: var(--auo-blue);
}

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

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

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

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

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

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

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

}

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

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

	}

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

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

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

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

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

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

	}

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


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


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

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

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

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

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

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

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

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

	}

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

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

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

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

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

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

}

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

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

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


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

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



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

}

.leader-card-popup .close-btn::before{
    content: '';
    display: block;
    position: absolute;
    background-image: url('../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: 0;
}

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

    }
}


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

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

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

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

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

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

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

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

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

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

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

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

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

.page-pre-btn::before{
	background-image: url(../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: 0;
}

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

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

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

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

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

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

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


}


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

		/* gap: 0 12px; */
	}

    .page{
		height: 28px;
	}

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

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

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

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

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


}


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

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


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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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


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


}

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

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

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

}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

}

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

}

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

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

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

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

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

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

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

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

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

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

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


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

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

}

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

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

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

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

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


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


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

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

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

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

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

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


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

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

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

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

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

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

    .timeline-swiper .swiper-slide{
        width: 64px;
        padding: 0 0 24px 0;
        line-height: 36px;
        text-align: center;
        margin-right: 8px;
    }

    .timeline-swiper .swiper-slide::after{
        border: none;
    }

    .timeline-swiper .swiper-slide-thumb-active{
        font-size: 26px;
        line-height: 36px;
    }

    .timeline-swiper .swiper-slide::before{
        width: 12px;
        height: 12px;
        top: auto;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%) translateY(0%);
    }

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


    .timeline-swiper li{
        display: flex;

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

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

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

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

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

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

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

    .year-content-item .right-img{
        width: 200px;
        margin-right: 40px;
        height: 150px;
    }

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

    .bottom-timeline-block .right-block{
        padding-top: 60px;
        margin: 0 auto;
        width: 608px;
    }

}

@media screen and (max-width: 767px) {
	.bottom-timeline-block .timeline{
        width: calc(100% + 40px);
        margin: 0 -20px;
    }

    .bottom-timeline-block .right-block{
        width: 100%;
    }

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

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

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

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

    .swiper.timeline-swiper{
        width: calc(100% - 20px);
        margin-left: 20px;
        /* margin-right: 20px; */
    }
}

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

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