.laboratoryList .subTitle, .laboratoryList .itemTitleBox, .laboratoryList .Txt p, .videoTitleBox::before, .videoBtn::after, .videoBtn::before, .rdIndexArea .itemTitleBox, .rdIndexArea .subTitle, .rdIndexArea .rightBox p, .areaQuote::before {
		-webkit-transition: all 0.5s ease-out;
		transition: all 0.5s ease-out;
}

.laboratoryList .subTitle, .laboratoryList .itemTitleBox, .laboratoryList .Txt p, .rdIndexArea .itemTitleBox, .rdIndexArea .subTitle, .rdIndexArea .rightBox p {
		opacity: 0;
}

.laboratoryList .subTitle, .laboratoryList .itemTitleBox, .laboratoryList .Txt p, .rdIndexArea .itemTitleBox, .rdIndexArea .subTitle, .rdIndexArea .rightBox p {
		-webkit-transform: translateY(20px);
		        transform: translateY(20px);
}

.laboratoryList > li.show .itemTitleBox, .laboratoryList > li.show .subTitle, .laboratoryList > li.show .Txt p, .rdIndexArea.show .itemTitleBox, .rdIndexArea.show .subTitle, .rdIndexArea.show .rightBox p {
		-webkit-transform: translate(0);
		        transform: translate(0);
		opacity: 1;
}

/*
	Authors: Alvin, Randy, Rex
    Version: 2.0
	Latest Update: 2020/03/13
*/
.mainArea {
		padding-top: 140px;
}
@media (min-width: 1181px) and (max-width: 1400px) {
		.mainArea {
				padding-top: 100px;
		}
}
@media (max-width: 1180px) {
		.mainArea {
				padding-top: 50px;
		}
}

.areaQuote {
		font: 600 39px/1.4 "Cinzel", "Noto Serif TC", serif;
		color: #b5b5b6;
}
@media (min-width: 1181px) and (max-width: 1750px) {
		.areaQuote {
				font-size: 30px;
		}
}
@media (max-width: 1180px) {
		.areaQuote {
				font-size: 22px;
		}
}
.areaQuote::before {
		content: "";
		display: block;
		width: 76px;
		height: 59px;
		margin-left: 5px;
		margin-bottom: 15px;
		background: url("../images/quoteGray.png") 50%/cover no-repeat;
}
@media (max-width: 1750px) {
		.areaQuote::before {
				width: 52px;
				height: 40px;
		}
}

.subTitle {
		margin-bottom: 15px;
		font: 700 20px "Cinzel", "Noto Serif TC", serif;
		color: #9f6420;
}

.rdIndexArea {
		position: relative;
		padding-bottom: 150px;
}
@media (max-width: 1180px) {
		.rdIndexArea {
				padding-bottom: 50px;
		}
}
.rdIndexArea.show .subTitle {
		-webkit-transition-delay: 0.3s;
		        transition-delay: 0.3s;
}
.rdIndexArea.show .rightBox p {
		-webkit-transition-delay: 0.7s;
		        transition-delay: 0.7s;
}
.rdIndexArea::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: calc(50% - 35px);
		height: 355px;
		background-color: #f1e8de;
}
.rdIndexArea .wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		max-width: 1260px;
}
@media (max-width: 960px) {
		.rdIndexArea .wrap {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
		}
}
.rdIndexArea .ImgBox {
		padding-top: 45px;
}
.rdIndexArea .ImgBox img {
		display: block;
		max-width: 100%;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
}
@media (max-width: 960px) {
		.rdIndexArea .Img img {
				margin-left: auto;
		}
}
.rdIndexArea .subImg {
		position: absolute;
		z-index: 1;
}
@media (min-width: 961px) {
		.rdIndexArea .subImg {
				top: -30px;
				left: 65px;
		}
}
@media (max-width: 960px) {
		.rdIndexArea .subImg {
				top: -20px;
				left: 10px;
				width: 38.5416666667%;
		}
}
.rdIndexArea .subImg::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 1;
		width: 100%;
		height: calc(100% - 20px);
		border: 1px solid #fff;
		pointer-events: none;
}
@media (max-width: 960px) {
		.rdIndexArea .subImg::before {
				top: 5px;
				left: 5px;
				height: calc(100% - 10px);
		}
}
@media (min-width: 961px) {
		.rdIndexArea .leftBox {
				width: 55.9523809524%;
				padding-left: 30px;
		}
}
.rdIndexArea .areaQuote {
		margin-top: 20px;
}
@media (min-width: 961px) {
		.rdIndexArea .rightBox {
				width: 44.0476190476%;
				padding-left: 30px;
		}
}
.rdIndexArea .rightBox p {
		line-height: 1.8;
}
@media (min-width: 961px) {
		.rdIndexArea .rightBox p {
				max-width: 415px;
		}
}
@media (max-width: 960px) {
		.rdIndexArea .itemTitleBox {
				max-width: 300px;
				margin-top: 40px;
				margin-left: auto;
				margin-right: auto;
		}
}
.rdIndexArea .itemTitleBox::before {
		right: 0;
		background-position: 0 0, 0 100%, 100% 0, 0 0, 0 100%;
}
@media (min-width: 961px) {
		.rdIndexArea .itemTitleBox::after {
				content: "";
				position: absolute;
				left: -135px;
				bottom: -7px;
				z-index: 1;
				width: 215px;
				height: 2px;
				background-color: #9f6420;
		}
}

.globalArea {
		padding-top: 40px;
		padding-bottom: 40px;
}
.globalArea .wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.globalArea .itemTitleBox {
		margin-bottom: 60px;
		padding-top: 75px;
		padding-bottom: 75px;
		text-align: center;
}
@media (max-width: 1180px) {
		.globalArea .itemTitleBox {
				padding-top: 40px;
				padding-bottom: 40px;
		}
}
.globalArea .itemTitleBox::before {
		content: "";
		left: 50%;
		width: 130px;
		height: 100%;
		margin-left: -65px;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#9f6420), to(#9f6420)), -webkit-gradient(linear, left top, left bottom, from(#9f6420), to(#9f6420)), -webkit-gradient(linear, left top, left bottom, from(#9f6420), to(#9f6420)), -webkit-gradient(linear, left top, left bottom, from(#9f6420), to(#9f6420)), -webkit-gradient(linear, left top, left bottom, from(#9f6420), to(#9f6420)), -webkit-gradient(linear, left top, left bottom, from(#9f6420), to(#9f6420));
		background-image: linear-gradient(to bottom, #9f6420, #9f6420), linear-gradient(to bottom, #9f6420, #9f6420), linear-gradient(to bottom, #9f6420, #9f6420), linear-gradient(to bottom, #9f6420, #9f6420), linear-gradient(to bottom, #9f6420, #9f6420), linear-gradient(to bottom, #9f6420, #9f6420);
		background-size: 100% 7px, 100% 7px, 7px 40px, 7px 40px, 7px 40px, 7px 40px;
		background-position: 0 0, 0 100%, 0 0, 100% 0, 0 100%, 100% 100%;
		background-repeat: no-repeat;
}
@media (max-width: 1180px) {
		.globalArea .itemTitleBox::before {
				background-size: 100% 7px, 100% 7px, 7px 30px, 7px 30px, 7px 30px, 7px 30px;
		}
}
.globalArea .Img {
		position: relative;
		-webkit-transform: scale(0);
		        transform: scale(0);
		-webkit-transition: all 1.4s cubic-bezier(0.16, 1.08, 0.38, 0.98);
		transition: all 1.4s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
.globalArea .Img.show {
		-webkit-transform: scale(1);
		        transform: scale(1);
}
.globalArea .Img .mapImgText {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
}
.globalArea img {
		display: block;
		max-width: 100%;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
}
@media (max-width: 1180px) {
		.globalArea .mapImgText {
				display: none;
		}
}
.globalArea .textEditor {
		margin-top: 30px;
}

.videoArea {
		position: relative;
		margin-bottom: 100px;
		padding-top: 35px;
		padding-bottom: 50px;
}
@media (max-width: 1180px) {
		.videoArea {
				margin-bottom: 30px;
		}
}
.videoArea.playing img {
		opacity: 0;
}
.videoArea::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
		width: 75%;
		height: 280px;
		background-color: #f1e8de;
}
.videoArea .Img {
		position: relative;
}
.videoArea .Img img {
		display: block;
		max-width: 100%;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
}
@media (max-width: 768px) {
		.videoArea .Img img {
				height: 300px;
				-o-object-fit: cover;
				   object-fit: cover;
		}
}
.videoArea .mb_YTPBar {
		visibility: hidden;
}

.videoBtn {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 80px;
		height: 80px;
		margin-top: -40px;
		margin-left: -40px;
		border-radius: 50%;
		border: 1px dashed #fff;
		cursor: pointer;
		background-color: transparent;
}
.videoBtn.playing::after {
		content: "\f04c";
}
.videoBtn:hover::before {
		-webkit-transform: scale(0.7);
		        transform: scale(0.7);
		border-color: #fff;
}
.videoBtn:hover::after {
		opacity: 0.5;
}
.videoBtn::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 1;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.7);
}
.videoBtn::after {
		content: "\f04b";
		z-index: 1;
		font-size: 18px;
		font-family: FontAwesome;
		color: #fff;
}

.videoTitleBox {
		margin-bottom: 25px;
		text-align: center;
		color: #b5b5b6;
		font: 700 37px "Cinzel", "Noto Serif TC", serif;
}
@media (min-width: 641px) and (max-width: 1440px) {
		.videoTitleBox {
				font-size: 24px;
		}
}
@media (max-width: 640px) {
		.videoTitleBox {
				font-size: 18px;
		}
}
.videoTitleBox::before {
		content: "";
		display: block;
		width: 76px;
		height: 59px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
		background: url("../images/quoteGray.png") 50%/cover no-repeat;
}
@media (max-width: 1750px) {
		.videoTitleBox::before {
				width: 52px;
				height: 40px;
		}
}
.videoTitleBox h3::before {
		content: "";
		display: block;
		width: 200px;
		height: 2px;
		margin: 15px auto 10px;
		background-color: #b5b5b6;
}

.laboratoryArea {
		padding-top: 115px;
		padding-bottom: 130px;
		overflow: hidden;
}
@media (max-width: 1180px) {
		.laboratoryArea {
				padding-top: 50px;
				padding-bottom: 50px;
		}
}

@media (min-width: 1181px) {
		.laboratoryList > li:nth-child(odd) .ImgBox::before {
				right: -25px;
		}
}
@media (min-width: 1181px) {
		.laboratoryList > li:nth-child(odd) .slickRectDots {
				left: 0;
		}
}
@media (min-width: 1181px) {
		.laboratoryList > li:nth-child(odd) .itemTitleBox::before {
				right: -65px;
				background-position: 0 0, 0 100%, 100% 0, 0 0, 0 100%;
		}
		.laboratoryList > li:nth-child(odd) .itemTitleBox::after {
				left: -150px;
		}
}
@media (min-width: 1641px) {
		.laboratoryList > li:nth-child(odd) .areaQuote {
				left: calc((-100vw + 1200px) / 2);
		}
}
@media (min-width: 1181px) {
		.laboratoryList > li:nth-child(even) .ImgBox::before {
				left: -25px;
		}
}
.laboratoryList > li:nth-child(even) .slickRectDots {
		right: 0;
}
@media (min-width: 1181px) {
		.laboratoryList > li:nth-child(even) .Txt {
				-webkit-box-ordinal-group: 0;
				    -ms-flex-order: -1;
				        order: -1;
		}
}
@media (min-width: 1181px) {
		.laboratoryList > li:nth-child(even) .itemTitleBox::before {
				left: -65px;
				background-position: 0 0, 0 100%, 0 0, 100% 0, 100% 100%;
		}
}
.laboratoryList > li:nth-child(even) .itemTitleBox::after {
		right: -150px;
}
@media (min-width: 1641px) {
		.laboratoryList > li:nth-child(even) .areaQuote {
				right: calc((-100vw + 1200px) / 2);
		}
}
@media (min-width: 1641px) {
		.laboratoryList > li + li {
				margin-top: 240px;
		}
}
@media (min-width: 1181px) and (max-width: 1640px) {
		.laboratoryList > li + li {
				margin-top: 150px;
		}
}
@media (max-width: 1180px) {
		.laboratoryList > li + li {
				margin-top: 50px;
		}
}
.laboratoryList > li.show .subTitle {
		-webkit-transition-delay: 0.3s;
		        transition-delay: 0.3s;
}
.laboratoryList > li.show .Txt p {
		-webkit-transition-delay: 0.7s;
		        transition-delay: 0.7s;
}
.laboratoryList .item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
}
@media (max-width: 1240px) {
		.laboratoryList .item {
				padding-left: 20px;
				padding-right: 20px;
		}
}
@media (max-width: 1180px) {
		.laboratoryList .item {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
		}
}
.laboratoryList .ImgBox {
		position: relative;
}
@media (min-width: 1181px) {
		.laboratoryList .ImgBox {
				width: 56.25%;
		}
}
@media (max-width: 1180px) {
		.laboratoryList .ImgBox {
				width: 100%;
		}
}
.laboratoryList .ImgBox::before {
		content: "";
		position: absolute;
		bottom: -35px;
		z-index: -1;
		width: 180px;
		height: 290px;
		background-color: #f1e8de;
}
@media (max-width: 1180px) {
		.laboratoryList .ImgBox::before {
				left: 0;
		}
}
.laboratoryList .slickRectDots {
		position: absolute;
		top: 100%;
		z-index: 1;
}
@media (max-width: 1180px) {
		.laboratoryList .slickRectDots {
				right: 0;
		}
}
.laboratoryList .areaQuote {
		padding-left: 60px;
		padding-right: 20px;
}
@media (max-width: 1820px) {
		.laboratoryList .areaQuote {
				padding-left: 20px;
		}
}
@media (min-width: 1641px) {
		.laboratoryList .areaQuote {
				position: absolute;
				top: 0;
				z-index: 2;
				width: calc((100vw - 1200px) / 2 + 15px);
				height: 100%;
				padding-top: 90px;
				border: 1px solid #dcdddd;
		}
}
@media (max-width: 1640px) {
		.laboratoryList .areaQuote {
				padding-left: 0;
				padding-bottom: 20px;
		}
}
@media (min-width: 1181px) {
		.laboratoryList .Txt {
				width: 43.75%;
				padding-left: 60px;
				padding-right: 60px;
		}
}
@media (max-width: 1180px) {
		.laboratoryList .Txt {
				width: 100%;
				margin-top: 50px;
		}
}
.laboratoryList .Txt p {
		line-height: 1.8;
}
@media (min-width: 1181px) {
		.laboratoryList .itemTitleBox::after {
				content: "";
				position: absolute;
				bottom: -10px;
				width: 215px;
				height: 2px;
				background-color: #9f6420;
		}
}
@media (max-width: 1180px) {
		.laboratoryList .itemTitleBox {
				max-width: 280px;
				padding-left: 20px;
		}
		.laboratoryList .itemTitleBox::before {
				left: 0;
				background-position: 0 0, 0 100%, 0 0, 100% 0, 100% 100%;
		}
}
.laboratoryImgList img {
		display: block;
		max-width: 100%;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
}