/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@300;400;500;700&family=Outfit:wght@300;400;500;600;700&display=swap');
body {
    line-height: 1.5;
    color: #000000;
    font-family: 'Outfit', Helvetica, Arial, sans-serif, "Noto Sans HK", "Heiti TC", "LiHei Pro", "Microsoft JhengHei", "微軟正黑體";
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000000;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 0 0;
	font-family: 'Outfit', Helvetica, Arial, sans-serif, "Noto Sans HK", "Heiti TC", "LiHei Pro", "Microsoft JhengHei", "微軟正黑體" !important;
}
.accessibility {
	height: 0px;
	width: 0px;
	display: inline-block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-indent: -9999px;
	position: absolute;
}
.black {color: #000000 !important;}
.darkBlue {color: #20355B !important;}
.download1 {color: #E79057 !important;}
.download2 {color: #996058 !important;}
.download3 {color: #17ABDF !important;}
.download4 {color: #42B988 !important;}

/* ----------------------------------------------------------------
	Hysan
-----------------------------------------------------------------*/
::selection {background: #f08636;}
body.zh {letter-spacing: 0.125rem;}
a {border-bottom: none !important;}
a:hover .icon-angle-down {color: #4473C7;}
.menu-container .menu-link:last-child {padding-right: 0;}
#logo {margin-right: 3rem;}
#logo img {height: auto !important; width: 100%;}
.tag-title {margin-top: -10rem; margin-right: auto; opacity: 0; visibility: hidden;}
.tag-title.visible {margin-top: 0; opacity: 1;}
.tag-title h1, .tag-title h2 {font-size: 1rem; line-height: 1.25; padding-right: 0.75rem;}
#wrapper {background-color: transparent;}
#photo-slide {
background-image: url('../images/slider-bgL.jpg'), url('../images/slider-bgR.jpg');
background-position: left 130%, right 30%;
background-repeat: no-repeat, no-repeat;
background-size: 28rem; background-color: #fff; /*background-attachment: fixed;*/
}
#content {/*background: url('../images/key-cover.jpg') center top / cover no-repeat fixed transparent; background-size: cover; background-attachment: fixed;*/}
#photo-slide {position: relative; min-height: calc(100vh - 78px); max-height: 1000px;}
#content {position: relative; /*min-height: calc(100vh - 78px); padding-top: 100px; margin-top: -100px; background-color: transparent;*/}
#footer {background-color: #dcdddd;}
#section-sider.page-section {padding: 6.5vh 0; padding-bottom: 5rem;}
#section-download.page-section {padding: 0; padding-bottom: 0px;}
.container-max {max-width: unset; position: relative; height: 100%; background-color: transparent; padding-top: 101px;}
.container-max .container {background-color: transparent; background: transparent; padding: 0;}
.title-container {/*max-width: 75%; padding: 0;*/ z-index: 2;}
.title-container {display: flex; justify-content: center; align-items: center;}
.title-row { }
.title {width: 22vw; max-width: 35rem; height: auto; padding-top: 25%; transition: 0.5s;}
.zh .title {max-width: 20rem;}
.arrow-row {padding-top: 1rem;}
.zh .arrow-row { }
.scroll-arrow {position: relative; font-size: 42px; color: #000000; padding-top: 5rem; margin-left: 0; margin-left: 0;}
.video-arrow { }
.zh .scroll-arrow { }
.title-row:hover .arrow-row, .scroll-arrow:hover, .arrow-row:hover {color: #4473C7;}
.content-wrap {display: block; padding: 0;}
.cover {width: auto; height: 100%; padding: 0rem;}
.cover img {border: 0.5px solid #231916;}

/* Key Visual */
.kv-container {/*width: 100%; height: 100%*/}
.slider-element {max-height: 900px;}
.keyVisual {
    margin: auto;
    position: static;
/*    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)  translateY(-50%);*/
    width: 100% !important;
/*    max-width: 1320px;
    min-width: unset;
    /*height: calc(100vh - 101px) !important;*/
/*    max-height: 100vh !important;
    min-height: 780px;*/
    overflow: hidden;
	margin-top: 60px;
}

/* slider */
.photo-slide .scroll-arrow {padding-top: 0.5rem;}
.photo-slide .arrow-row {padding-top: 0; padding-right: 5%;}
.owl-carousel .item {padding-top: 4%;}
.owl-carousel .item img {padding: 0 3%;}
.owl-carousel {/*display: flex !important; flex-direction: column;*/}
.owl-carousel .owl-nav .owl-next {right: 1.5rem !important;}
.owl-carousel .owl-nav .owl-prev {left: 1.5rem !important;}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {font-size: 2rem; color: #4473C7;}
.owl-carousel .owl-nav [class*=owl-] {opacity: 1; }
.owl-carousel .owl-nav [class*=owl-]:hover {color: #4473C7 !important; background-color: transparent !important;}
.owl-carousel .owl-dots {/*display: inline-flex; justify-content: center; padding: 0.75rem; background-color: red; margin: 0 auto;*/}
.owl-carousel .owl-dots .owl-dot span {display: block; padding-bottom: 0.5rem;}
.owl-carousel .owl-dots .owl-dot {
	width: 44px; height: 10px; 
	margin: 0px 8px; 
	background-color: transparent; 
	margin-top: 0.875rem; padding-top: 1rem !important; 
	position: relative; 
	opacity: 1;}
.owl-carousel .owl-dots .owl-dot:before {
	content: '';
	position: absolute;
	border-bottom: 1px solid #4473C7;
	height: auto; width: 100%;
	transform: translateX(-50%) translateY(-50%);
	transition: .25s;
}
.owl-carousel .owl-dots .owl-dot.active:before,
.owl-carousel .owl-dots .owl-dot:hover:before,
.owl-carousel .owl-dots .owl-dot.active:hover:before {border-width: 3px; opacity: 1;}
.block-title {
	padding: 1.75rem 2rem; z-index: 2; 
	border-left: 10px solid #E79057; 
	position: absolute; right: 0; top: 0; 
	background-size: cover; background-position: center; background-color: #fff;
}
.slide-tag {font-size: 1.375rem; font-weight: 400; line-height: 1.25; color: #4473C7; padding-bottom: 1rem;}
.zh .slide-tag {font-size: 1.5rem;}
.block-title .slide-tag:last-child {padding-top: 0.25rem; padding-bottom: 0;}
.slide-title {font-size: 2.575rem; font-weight: 700; line-height: 1.125;}
.zh .slide-title {letter-spacing: 0.25rem;}
.slide-1 .block-title {border-color: #E79057; background-image: url('../images/block-title-bg1.jpg');}
.slide-2 .block-title {border-color: #996058; background-image: url('../images/block-title-bg2.jpg');}
.slide-3 .block-title {border-color: #17ABDF; background-image: url('../images/block-title-bg3.jpg');}
.slide-4 .block-title {border-color: #42B988; background-image: url('../images/block-title-bg4.jpg');}
.slide-5 .block-title {border-color: #996058; background-image: url('../images/block-title-bg2.jpg');}
.slide-1 .slide-title {color: #E79057;}
.slide-2 .slide-title {color: #996058;}
.slide-3 .slide-title {color: #17ABDF;}
.slide-4 .slide-title {color: #42B988;}
.slide-5 .slide-title {color: #996058;}

.feature-block {background-color: transparent;}
.feature-box {background-color: transparent; margin: 0; margin: 0 0 0 1.5rem; margin-bottom: 1.5rem; padding: 1.5rem 0; position: relative; display: flex; align-items: flex-start; border-color: #4473C7 !important; border-width: 1px;}
.feature-box .underline {border-bottom: 1px solid #f08636;}
.fbox-content {padding: 0; padding-top: 0;}
.fbox-content h2 {font-size: 1.25rem; line-height: 1.25; color: #20355B; text-transform: inherit;}
.fbox-content h3, .fbox-content h4 {font-size: 1.25rem; line-height: 1.25; color: #20355B; text-transform: inherit;}
.fbox-content h4 {font-size: 1rem; line-height: 1.25; color: #000000; text-transform: inherit; margin-bottom: 0;}
.fbox-content p {font-size: 0.85rem; line-height: 1.25; color: #231916; margin-top: 0.25rem;}
.fbox-number h1 {font-size: 4.25rem; line-height: 1; color: #ad7c60; text-transform: inherit; margin: 0;}
.fbox-number {/*-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; max-width: 3.5rem;*/ padding: 0;}
#section-download {
    background: rgb(215, 248, 251);
    background: linear-gradient(90deg, #fff 0%, #fff 78%, rgb(220 246 219) 80%, rgb(220 246 219) 100%);
}
.feature-block {
    background: url('../images/feature-block-bg.jpg') center bottom / cover no-repeat /*fixed*/ transparent;
    background-size: cover; background-position: right;
}

.download-image {
    background: url('../images/key-download.jpg') center bottom / cover no-repeat /*fixed*/ transparent;
    background-size: cover; /* background-attachment: fixed; */
}
.download {padding-left: 2.5rem; padding-right: 1rem;}
.download .feature-box:hover .cover img {border: 0.5px solid #4473C7 !important;}
.download .feature-box:hover h2 {color: #4473C7 !important;}
.download .feature-box:hover .fbox-number img {/*filter: invert(45%) sepia(95%) saturate(386%) hue-rotate(179deg) brightness(81%) contrast(92%);*/}
.download .feature-box:hover .fbox-number img { }
.download .feature-box:hover h4, .video .feature-box h4:hover {color: #20355B !important;}
.download .feature-box:hover p {color: #20355B !important;}
.download .feature-box:hover p.darkBlue {color: #4473C7 !important;}

.download-block {border: 2px solid transparent; border-radius: 20px;}
.download-block:hover {border: 2px solid #aaa;}
.download-block a {height: 100%; display: block;}
.download-block p {line-height: 1.5 !important;}

#video_container {display: none;}
.video-block {cursor: pointer;}
.video-block:hover h3, .video-block:hover .video-arrow {color: #f08636;}

.slider-caption h2,
.slider-element .slider-caption p {color: #fff !important; text-shadow: 2px 2px 8px #787878;}
#copyrights {line-height: 1.5;}
.zh #copyrights {letter-spacing: 0.025rem;}
.copyright-links {text-align: right;}
a:hover, .copyright-links a:hover {color: #4473C7;}
.primary-menu .menu-link:hover > a:after {background-color: #4473C7;}

#gotoTop:hover {background-color: #4473C7 !important;}

@media (max-width: 1023px) {
	.title {width: 40vw; max-width: 40vw; height: auto; padding-top: 30%;}
}
@media (max-width: 992px) {
	#logo {margin-top: 34px; margin-right: 2rem; margin-bottom: 34px;}
	.stretched #gotoTop {bottom: 50px;}
	.header-row {min-height: 100px; align-content: center;}

	#photo-slide .container {max-width: 100%; padding: 0;}
	#photo-slide {background-position: left 110%, right -17%; background-size: 25rem; min-height: unset;}
	.title-row { }
	.scroll-arrow { }
	.zh .scroll-arrow { }
	.zh .arrow-row {margin-top: 0rem;}
	.owl-carousel .item {/*padding-top: 0; height: calc(100vh - 140px); background-size: cover; background-position: center; background-repeat: no-repeat;*/}
	.owl-carousel .owl-nav .owl-next {right: 0.5rem !important;}
	.owl-carousel .owl-nav .owl-prev {left: 0.5rem !important;}
	.owl-carousel .block-title {padding: 2.25rem 3rem;}
	.owl-carousel .slide-tag {font-size: 1.125rem;}
	.zh .owl-carousel .slide-tag {font-size: 1.5rem;}
	.owl-carousel .slide-title {font-size: 2.25rem;}
	.zh .owl-carousel .slide-title {font-size: 2.5rem;}
	.download {padding-left: 2rem; padding-right: 2rem;}
}
@media (max-width: 768px) {
	.header-row {min-height: 78px;}
	#logo {margin-top: 22px; margin-bottom: 22px;}
	.tag-title {margin-right: auto; display: flex; flex-direction: column; flex-wrap: wrap;}
	.container-max {padding-top: 78px;}
	#copyrights {padding: 1rem 0;}

	#photo-slide .page-section {padding: 0;}
	#photo-slide .container {padding-top: 4rem;}
	#photo-slide {background-position: left 100%, right -10%; background-size: 20rem; min-height: calc(100vh - 78px);}
	.owl-carousel .item {height: calc(100vh - 360px); background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 0; margin-top: 7.25rem;}
	.owl-carousel .item img {padding: 0;}
	.owl-carousel .owl-nav [class*=owl-] {top: unset; bottom: 0;}
	.owl-carousel .owl-dots {height: 40px; padding-top: 6px;}
	.owl-carousel .block-title {padding: 2.25rem 2rem;}
	.owl-carousel .slide-1 {background-image: url('../images/slide-1.jpg'); background-position-x: 56%;}
	.owl-carousel .slide-2 {background-image: url('../images/slide-2.jpg'); background-position-x: 45%;}
	.owl-carousel .slide-3 {background-image: url('../images/slide-3.jpg'); background-position-x: 61%;}
	.owl-carousel .slide-4 {background-image: url('../images/slide-4.jpg'); background-position-x: 35%;}
	.owl-carousel .slide-5 {background-image: url('../images/slide-5m.png'); background-size: contain;}
	.zh .owl-carousel .slide-5 {background-image: url('../images/slide-5cm.png'); background-size: contain;}
	.download {padding-left: 2rem; padding-right: 2rem;}

}
@media (max-width: 576px) {
	#logo {margin-right: 1.25rem; max-width: 150px;}
	.tag-title h1, .tag-title h2 {font-size: 0.875rem; padding-right: 0;}

	#slider .container {max-width: 100%; padding: 0;}
	#slider .title-row {}
	#slider .title-container { }
	#slider .arrow-row {/*position: absolute; bottom: 6%; padding: 0 calc(5% + 15px);*/}
	.zh #slider .arrow-row {padding: 0 calc(10% + 15px);}
	#slider .scroll-arrow {margin-left: 0;}

	#photo-slide .container {padding-top: 3rem;}
	.owl-carousel .item {height: calc(100vh - 285px); margin-top: 3rem;}
	.owl-carousel .block-title {padding: 1.25rem 1.25rem;}
	.owl-carousel .slide-tag {font-size: 0.9rem;}
	.owl-carousel .slide-title {font-size: 1.75rem;}

	.slider-caption h2 {font-size: 3rem !important;}
	.title {width: 70vw; max-width: 70vw; height: auto; padding-top: 0%; /*margin-top: -20%;*/}
	.zh .title {max-width: 100%; margin: 0 auto; padding: 12% 10% 0}
	.scroll-arrow {margin-left: 0;}
	.zh .scroll-arrow {margin-left: 0;}
	#content {/*background: none; background-color: #fff;*/}
	.page-section {padding-top: 0; padding-bottom: 0;}
	.feature-block {padding: 1rem 1rem; /*padding-top: 4.5rem;*/}
	.download-block, .download-block:hover {border: none;}
	.copyright, .copyright-links {text-align: center;}
}
@media (max-width: 360px) {
	#logo {margin-right: 1rem; max-width: 120px;}
	.tag-title h1, .tag-title h2 {font-size: 0.7125rem;}

	.feature-block {padding: 2.5rem 1rem;}
	.fbox-content {padding-top: 0%;}
}

.owl-carousel.hysan .owl-item .block-title {animation-duration: 2s; -webkit-animation-duration: 2s; transition: 2s; opacity: 0;}
.owl-carousel.hysan .owl-item.active .block-title {animation: moveInRight 1s 1; -webkit-animation: moveInRight 1s 1; animation-duration: 2s; -webkit-animation-duration: 2s; opacity: 1; }

.owl-carousel.hysan .owl-item .item img { }
.owl-carousel.hysan .owl-item.active .item img { }

@-webkit-keyframes moveInRight {
	from {right: -50%;}
	to {right: 0;}
}
@keyframes moveInRight {
	from {right: -50%;}
	to {right: 0;}
}

@-webkit-keyframes moveInLeft {
	from {left: -50%;}
	to {left: 0;}
}
@keyframes moveInLeft {
	from {left: -50%;}
	to {left: 0;}
}

@-webkit-keyframes upAndDown {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0);
	}
	40% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0);
	}
}
@keyframes upAndDown {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0);
	}
	40% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0);
	}
}
.upAndDown {
	-webkit-animation-name: upAndDown;
	animation-name: upAndDown;
}