@charset "UTF-8";
/* CSS reset*/

@import url(base.css);

.c-media-object__section {
    font-size: 1rem !important;
    font: inherit;
    line-height: normal;
    font-weight: normal;
    font-family: "Microsoft JhengHei", "微軟正黑體", serif !important;
}

.TIU_wrap {
	font-size: 1rem;
	line-height: 1.5;
	font-family: "Microsoft JhengHei", "微軟正黑體", serif ;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	line-height: normal;
	font-weight: normal;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	color: #000;
	text-align: center;
}
.TIU_wrap h1,
.TIU_wrap h2,
.TIU_wrap h3,
.TIU_wrap h4,
.TIU_wrap h5,
.TIU_wrap h6 {
	font-family: "Microsoft JhengHei", "微軟正黑體", serif ;
}
.TIU_wrap ol,
.TIU_wrap ul {
  	list-style: none;
}
.TIU_wrap blockquote,
.TIU_wrap q {
  	quotes: none;
}
.TIU_wrap blockquote:before,
.TIU_wrap blockquote:after,
.TIU_wrap q:before,
.TIU_wrap q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.TIU_wrap a,
.TIU_wrap a:hover,
.TIU_wrap a:focus,
.TIU_wrap a:active {
  	text-decoration: none;
}
input:focus,
a:focus,
a:active {
  	outline: none;
}
img {
  	max-width: 100%;
  	vertical-align: middle;
}
svg {
  	width: 100%;
}


.color-text {
	background: -webkit-linear-gradient(
		left,
		#bf886e 0%,
		#bf886e 24%,
		#e8c7a8 36%,
		#bf886e 46%,
		#bf886e 52%,
		#e8c7a8 58%,
		#bf886e 67%,
		#bf886e 100%
	);
	background-size: 400% 400%;
	background-clip: text;
	-webkit-background-clip: -webkit-text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	animation-name: colorText;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.color-text2 {
	background: -webkit-linear-gradient(
		left,
		#000 0%,
		#000 24%,
		#805e4c 36%,
		#000 46%,
		#000 52%,
		#805e4c 58%,
		#000 67%,
		#000 100%
	);
	background-size: 400% 400%;
	background-clip: text;
	-webkit-background-clip: -webkit-text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	animation-name: colorText;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
@keyframes colorText {
	0% {
		background-position: 0 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}


.TIU_wrap .h2 {
  	font-size: 44px !important;
}
.TIU_wrap .h3 {
  	font-size: 32px !important;
}
.TIU_wrap .h4 {
  	font-size: 28px !important;
}
.TIU_wrap .h5 {
	font-size: 24px !important;
}
.font-xxl {font-size: 78px;}
.font-xl {font-size: 64px;}
.font-r {font-size: 20px;}
.font-xs, p {
	font-size: 18px;
	/* text-align: justify; */
  	/* text-justify: inter-ideograph; */
}
small {font-size: 12px;}
sup {
	font-size: 60% !important;
	position: initial;
	vertical-align: super;
}
@media (max-width: 1280px) {
	.TIU_wrap .h2 {
		font-size: 3.4vw !important;
	}
	.TIU_wrap .h3 {
		font-size: 2.5vw !important;
	}
	.TIU_wrap .h4 {
		font-size: 2.1vw !important;
	}
	.TIU_wrap .h5 {
		font-size: 1.875vw !important;
	}
	.font-xxl {font-size: 6vw;}
	.font-xl {font-size: 5vw;}
	.font-r {font-size: 1.5625vw;}
	.font-xs, p {font-size: 1.4vw;}
	small {font-size: 0.9vw;}
}
@media (max-width: 810px) {
	.TIU_wrap .h2 {
		font-size: 7.7vw !important;
	}
	.TIU_wrap .h3 {
		font-size: 5vw !important;
	}
	.TIU_wrap .h4 {
		font-size: 5vw !important;
	}
	.TIU_wrap .h5 {
		font-size: 4.2vw !important;
	}
	.font-xxl {font-size: 13.3vw;}
	.font-xl {font-size: 11vw;}
	.font-r {font-size: 3.7vw;}
	.font-xs, p {font-size: 3.7vw;}
	small {font-size: 2.6vw;}
}

.line-height-lg {
  	line-height: 1.7;
}
.line-height-s {
  	line-height: 1.4;
}
.line-height-xs {
  	line-height: 1.2;
}


.TIU_wrap .btn-wrap a, .TIU_wrap .btn-wrap button {
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.TIU_wrap .btn-wrap a:nth-of-type(1), .TIU_wrap .btn-wrap button:nth-of-type(1) {
  	margin-right: 0.5em;
}
.TIU_wrap .btn-wrap a, .TIU_wrap .btn-wrap button {
	width: fit-content;
	display: inline-block;
	text-align: center;
	padding: 7.5px 30px;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: #fff;
	background-color: #000;
	border: 1px solid #000;
	-webkit-box-shadow: 0 0 10px #fff;
	box-shadow: 0 0 10px #fff;
	-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out,
	  border-color 0.25s ease-out;
	-o-transition: background-color 0.25s ease-out, color 0.25s ease-out,
	  border-color 0.25s ease-out;
	transition: background-color 0.25s ease-out, color 0.25s ease-out,
	  border-color 0.25s ease-out;
	cursor: pointer;
}

.TIU_wrap .btn-wrap a::before, .TIU_wrap .btn-wrap button::before {
  content: "";
  background: url(../images/shine_light.png) no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 200%;
  height: 200%;
  margin-top: -20%;
  display: block;
  pointer-events: none;
  animation: btn-shine 4s ease 1s infinite;
}
@keyframes btn-shine {
	0% {
		transform: translateX(-150%);
	}
	70% {
		transform: translateX(120%);
	}
	100% {
		transform: translateX(120%);
	}
}
.TIU_wrap .btn-wrap a:hover, .TIU_wrap .btn-wrap button:hover {
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  background: #fff;
  border: 1px solid #000;
  color: #000;
  
}
.TIU_wrap .adjust {
	position: absolute;
	z-index: 1;
	display: block;
	width: 100px;
	top: -135px;
}
@media (max-width: 810px) {
	.TIU_wrap .adjust {
		top: 10px;
	}
	.TIU_wrap .btn-wrap a, .TIU_wrap .btn-wrap button {
		padding: 2vw 8vw;
		height: auto;
		width: fit-content;
		font-size: 3.5vw;
	}
}


  
.TIU_wrap .note {
	position: absolute;
	margin: auto;
	left: 0; right: 0; bottom: 2em;
	padding: 0 5%;
	color: #676767;
}

.TIU_wrap .TIU-content {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.TIU_wrap .sec-title {
	position: relative;
	top: 50px; left: 0; right: 0;
	margin: 0 auto;
}
.TIU_wrap .sec-title h2, .TIU_wrap .sec-title h3 {
	letter-spacing: .05em;
	width: fit-content;
	margin: 0 auto;
}
.TIU_wrap .sec-title h3 .MillerDisplay {
	font-size: 1.1em;
}
@media (max-width: 1280px) {
	.TIU_wrap .sec-title {
		top: 3.9vw; left: 0; right: 0;
	}
}
@media (max-width: 810px) {
	.TIU_wrap {
		max-width: 750px;
	}
	.TIU_wrap .sec-title {
		top: 8vw; left: 0; right: 0;
	}
	.TIU_wrap .sec-title .h2, .TIU_wrap .sec-title .h3 {
		letter-spacing: .02em;
	}
	.TIU_wrap .sec-title .h3 {
		margin-top: 2.4vw;
	}
}



/**********************section-1- KV**************************/
.TIU_wrap .section-kv {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.TIU_wrap .section-kv .TIU-content {
	width: 50%;
	left: 0; right: auto; top: 80%;
}
@media (max-width: 810px) {
	.TIU_wrap .section-kv .TIU-content {
		width: 100%;
		top: 140vw;
	}
	.TIU_wrap .section-kv .kv-pd {
		top: 0;
		pointer-events: none;
	}
}


/**********************section-VIDEO**************************/

.TIU_wrap .section-video-wrap {
	width: 100%;
	position: relative;
	text-align: center;
	overflow: hidden;
}
.TIU_wrap .section-video-wrap .TIU-content .bottom {
	width: 90%;
	position: relative;
	margin: 5% auto;
	text-align: center;
}
.TIU_wrap .section-video-wrap .TIU-content .bottom img {
	width: 100%;
}
.TIU_wrap .section-video-wrap .TIU-content .bottom a {
	width: 11%;
	position: absolute;
	top: 40%; left: 0; right: 0;
	margin: 0 auto; 
	display: block;
	z-index: 1;
}
.TIU_wrap .section-video-wrap .TIU-content .bottom a img {
	width: 100%;
	display: block;
	filter: drop-shadow(10px 10px 30px rgba(255, 255, 255, 1));
	transition: 0.2s;
	animation: circle-jump 0.5s linear infinite alternate;
}
@keyframes circle-jump {
	0% {
		transform: scale(0.85);
	}
	100% {
		transform: scale(1);
	}
}

.TIU_wrap .section-video-wrap .TIU-content .bottom.video_play {
  cursor: pointer;
}
@media (max-width: 810px){
	.TIU_wrap .section-video-wrap .TIU-content .bottom a {
		width: 25%;
		top: 38%;
	}
}

/* section 2 - 選單 */
.navSwiper {
	width: fit-content;
	position: absolute;
	top: 24px;
}
.navSwiper .swiper-slide {
	width: fit-content;
}
.navSwiper .swiper-slide a {
	padding: 0 32px;
	border-right: 1px solid #000;
}
.navSwiper .swiper-slide:last-child a {
	border: 0;
}
@media (max-width: 1280px) {
	.navSwiper .swiper-slide a {
		padding: 0 2.5vw;
	}
}
@media (max-width: 810px) {
	.navSwiper .swiper-slide a {
		padding: 0 5.3vw;
	}
}
/* section 2 */
.TIU_wrap .section-2 .TIU-content {
	width: 100%; height: 100%;
	top: 0; right: 0; left: 0;
}
.TIU_wrap .section-2 .TIU-content .sec-title {
	top: 0;
}
.section-2 .upgrade-wrap {
}
.section-2 .upgrade-box {
	width: fit-content;
	padding: 10px 32px;
	position: absolute;
}
.section-2 .upgrade-box::before ,
.section-2 .upgrade-box::after {
	content: "";
	display: block;
	width: 12px;
	height: 100%;
	border-color: #999;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	position: absolute;
	left: 0;
	top: 0;
}
.section-2 .upgrade-box::after {
	border-width: 1px 1px 1px 0;
	left: auto;
	right: 0;
	top: 0;
}
.section-2 .upgrade-box:nth-child(1) {
	right: 6%;
	bottom: 10%;
}
.section-2 .upgrade-box:nth-child(2) {
	right: 18%;
	top: 48%;
}
.section-2 .upgrade-box:nth-child(3) {
	left: 10%;
	bottom: 15%;
}
.section-2 .upgrade-box:nth-child(3) .h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #999;
	position: absolute;
	right: -100%;
	top: 50%;
}
	.section-2 .upgrade-box .h3 {
		margin-bottom: .25em;
	}
	.section-2 .upgrade-box .h5 {
		margin-bottom: 0;
	}


@media (max-width: 1280px) {

	.section-2 .upgrade-box {
		margin: 0 auto 1.875vw;
		padding: 0 2.5vw;
	}
}
@media (max-width: 810px) {
	.TIU_wrap .section-2 .TIU-content .sec-title {
		top: 6%;
	}
	.section-2 .upgrade-wrap {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-top: 38%;
		margin-left: auto;
		margin-right: 3.6vw;
	}
	.section-2 .upgrade-box {
		position: relative;
		width: 100%;
		padding: 0 3.6vw;
	}
	.section-2 .upgrade-box::before ,
	.section-2 .upgrade-box::after {
		width: 8px;
	}
	.section-2 .upgrade-box:nth-child(1) {
		right: 0;
		bottom: 0;
	}
	.section-2 .upgrade-box:nth-child(2) {
		right: 0;
		top: 0;
	}
	.section-2 .upgrade-box:nth-child(3) {
		left: 0;
		bottom: 0;
	}
	.section-2 .upgrade-box:nth-child(3) .h3::after {
		right: auto;
		left: -20%;
		width: 20%;
	}
	.TIU_wrap .section-2 .upgrade-box .h5 {
		font-size: 3.6vw !important;
	}
}



/* section 4 */

.section-4 .color_wrap {
	position: absolute;
	top: 15%;
	width: 100%;
	padding: 0 80px;
	display: flex;
	justify-content: space-between;
}
.color_pd_wrap {
	width: 40%;
	align-self: flex-end;
	padding-bottom: 5%;
}
.pdSwiper .swiper-slide img {
	width: 80%;
}
.color_watch_wrap {
	width: 55%;
}
.section-4 .color_pd_wrap .h4 {
	margin-bottom: 10%;
	margin-top: 5%;
}
.section-4 .color_pd_wrap .h4 .label_new {
	border: 1px solid #000;
	padding: 0 4px;
	margin-right: 4px;
	display: inline-block;
}
.pdSwiper .font-r {
	margin-bottom: 40px;
}
.section-4 .btn-wrap {
	margin-bottom: 16px;
}
.section-4 .btn-wrap button {
	border-radius: 0;
	margin: 0 auto;
}
.section-4 .color_watch_wrap {
	position: relative;
}
.color_watch_wrap-inner {
	position: absolute;
	height: 62%;
	width: 75%;
	bottom: 3%;
	left: 18%;
}
.section-4 .color_watch_wrap a {
	position: absolute;
	width: 28%;
}
.section-4 .color_watch_wrap a span {
	display: block;
	text-align: center;
	margin-top: -.5em;
}
.section-4 .color_watch_wrap .color-01 {
	left: 33%;
	top: 33%;
}
.section-4 .color_watch_wrap .color-100 {
	left: 0;
	top: 33%;
}
.section-4 .color_watch_wrap .color-110 {
	left: 0;
	top: 0;
}
.section-4 .color_watch_wrap .color-210 {
	left: 66%;
	top: 33%;
}
.section-4 .color_watch_wrap .color-250 {
	left: 33%;
	top: 66%;
}
.section-4 .color_watch_wrap .color-310 {
	left: 66%;
	top: 66%;
}

@media (max-width: 1280px) {
	.section-4 .color_wrap {
		position: absolute;
		top: 12vw;
		width: 100%;
		padding: 0 3.9vw 0 10.5vw;
		display: flex;
		justify-content: space-between;
	}
	.color_pd_wrap {
		width: 35%;
	}
	.color_watch_wrap {
		width: 55%;
	}
	.pdSwiper .font-r {
		margin-bottom: 3.1vw;
	}
	.section-4 .btn-wrap {
		margin-bottom: 1.25vw;
	}
}
@media (max-width: 810px) {
	.section-4 .sec-title .text-primary {
		margin-top: 3vw;
	}
	.TIU_wrap .section-4 .sec-title .h2 {
		font-size: 7vw !important;
	}

	.section-4 .color_wrap {
		padding: 0;
		top: 18vw;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.section-4 .color_pd_wrap .h4 {
		margin-top: 2%;
		margin-bottom: 4%;
	}
	.color_pd_wrap {
		width: 100%;
		margin-top: 4vw;
	}
	.color_watch_wrap {
		width: 100%;
	}
	.pdSwiper .swiper-slide img {
		width: 60%;
	}
	.color_watch_wrap-inner {
		left: 20%;
	}
	.section-4 .color_watch_wrap a {
	}
}

/* section 5 */
.section-5 .TIU-content {
	width: 47.6%;
	right: 9.3%; left: auto;
	color: #fff;
	padding-top: 48px;
}
.section-5 .sec-title {
	top: 0;
	margin-bottom: 24px;
}
.section-5 .sec-title span {
	border: 1px solid #fff;
	padding: 0 4px;
	margin-right: 4px;
	font-size: 90%;
}
.section-5 p {
	text-align: center;
	margin-bottom: 28px;
}
.section-5 small {
	display: block;
	margin: 16px 0 24px;
}
@media (max-width: 1280px){
	.section-5 .TIU-content {
		padding-top: 3.2vw;
		width: 50%;
	}
	.section-5 .sec-title {
		margin-bottom: 1.875vw;
	}
	.section-5 p {
		margin-bottom: 2.1vw;
	}
	.section-5 .qrcode {
		width: 7.8vw;
	}
	.section-5 small {
		margin: 1.25vw 0 1.875vw;
	}
}
@media (max-width: 810px){
	.section-5 .TIU-content {
		padding-top: 0;
		width: 90%;
		top: 62%; left: 0; right: 0;
	}
	.section-5 .sec-title {
		margin-bottom: 5.3vw;
	}
	.section-5 p {
		text-align: left;
		line-height: 1.5;
		margin-bottom: 7.2vw;
	}
}

/* section 6 */
.TIU_wrap .section-6 .sec-title {
	position: absolute;
	width: 38%;
	top: 13.9%; right: 6.25%; left: auto;
}
.TIU_wrap .section-6 .sec-title .h4 {
	margin: 32px 0 40px;
}
.TIU_wrap .section-6 .sec06_detail {
	position: absolute;
	top: 52%; left: 0; right: 0;
	text-align: left;
	width: 85%;
	margin: 0 auto;
	justify-content: space-between;
}
.TIU_wrap .section-6 .sec06_detail .h4 {
	margin-bottom: 16px;
}
.TIU_wrap .section-6 .sec06_detail p, .TIU_wrap .section-6 .sec06_detail span {
	line-height: 1.4;
}
.TIU_wrap .section-6 .sec06_detail .detail_left {
	width: 50%;
}
.TIU_wrap .section-6 .sec06_detail .detail_left li {
	display: flex;
	margin-bottom: 14px;
}
.TIU_wrap .section-6 .sec06_detail .detail_left li span {
	flex: 0 0 48px;
}
.TIU_wrap .section-6 .sec06_detail .detail_right {
	width: 44%;
}
.TIU_wrap .section-6 .sec06_detail .detail_right ul {
	margin-bottom: 32px;
}
.TIU_wrap .section-6 .sec06_detail .detail_right li {
	margin-bottom: 8px;
}
.TIU_wrap .section-6 .sec06_detail .detail_right p.contact {
	line-height: 1.8;
}
@media (max-width: 1280px) {
	.TIU_wrap .section-6 .sec-title .h4 {
		margin: 2.5vw 0 3.125vw;
	}
	.TIU_wrap .section-6 .sec06_detail .h4 {
		margin-bottom: 1.25vw;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_left li {
		margin-bottom: 1vw;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_left li span {
		flex: 0 0 5.4vw;
		transform: translateY(-0.3vw);
	}
	.TIU_wrap .section-6 .sec06_detail .detail_right ul {
		margin-bottom: 2.5vw;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_right li {
		margin-bottom: 0.625vw;
	}
}
@media (max-width: 810px) {
	.TIU_wrap .section-6 .sec-title {
		width: 100%;
		top: 10vw; right: 0; left: 0;
		text-align: center;
	}
	.TIU_wrap .section-6 .sec-title .h4 {
		margin: 4.8vw auto;
	}
	.TIU_wrap .section-6 .sec06_detail {
		flex-wrap: wrap;
		top: 44%;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_left {
		width: 100%;
		margin-bottom: 2.4vw;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_left li {
		margin-bottom: 1.6vw;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_left li span {
		flex: 0 0 12vw;
		transform: translateY(-0.3vw);
	}
	.TIU_wrap .section-6 .sec06_detail .detail_right {
		width: 100%;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_right ul {
		margin-bottom: 4vw;
	}
	.TIU_wrap .section-6 .sec06_detail .detail_right li {
		margin-bottom: 1.6vw;
	}
}

/** section-7 family **/
.TIU_wrap .section-7 {
	position: relative;
	width: 100%;
}
.TIU_wrap .section-7 .sec07_pd {
	position: absolute;
	width: fit-content;
	text-align: center;
}
.TIU_wrap .section-7 .sec07_pd .h4 {
	margin-bottom: 4px;
}
.TIU_wrap .section-7 .sec07_pd .h5 {
	margin-bottom: 16px;
}
.TIU_wrap .section-7 .pd01 {
	top: 36%; left: 21.1%;
}
.TIU_wrap .section-7 .pd02 {
	top: 20.4%; left: 41%;
}
.TIU_wrap .section-7 .pd03 {
	top: 48.5%; left: 56.5%;
}
@media (max-width: 1280px) {
	.TIU_wrap .section-7 .sec07_pd .h4 {
		margin-bottom: 0.3vw;
	}
	.TIU_wrap .section-7 .sec07_pd .h5 {
		margin-bottom: 1.25vw;
	}
	.TIU_wrap .section-7 .pd01 {
		top: 35%; left: 21.1%;
	}
	.TIU_wrap .section-7 .pd02 {
		top: 19.4%; left: 41%;
	}
	.TIU_wrap .section-7 .pd03 {
		top: 47.5%; left: 56.5%;
	}
}
@media (max-width: 810px) {
	.TIU_wrap .section-7 .sec07_pd .h4 {
		margin-bottom: 2vw;
	}
	.TIU_wrap .section-7 .sec07_pd .h5 {
		margin-bottom: 3vw;
	}
	.TIU_wrap .section-7 .pd01 {
		top: 75%; left: 9%;
		color: #fff;
	}
	.TIU_wrap .section-7 .pd02 {
		top: 16.5%; left: 30%;
	}
	.TIU_wrap .section-7 .pd03 {
		top: 75%; left: 56.5%;
		color: #fff;
	}
}