@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}



html {
	background: url("../images/up.png")top center repeat-y,url("../images/bg_fixed.jpg")top center no-repeat fixed, #05a2ea;
}

header {position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

@media screen and (max-width: 991px) {
 html { background: url("../images/bg_fixed.jpg")top center no-repeat fixed;}

 html:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg_fixed.jpg")center 0 no-repeat;
  background-size: cover;
 }
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }
.banner {padding:0 0 0 0;}

/* 元件調整 */
.quotes ul { margin-bottom: 10px;}
.hightlight li{border-radius: 1em; overflow: hidden; border: 4px solid #1e2535;}
.rectangle_3p li{border-radius: 1em; border: 4px solid #1e2535;}
.hightlight img {object-fit: contain;}




/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }

}






/* =================================================== 通用設定 =================================================== */
/* ------------------  BG  ------------------ */
section {
    max-width: 1240px;
    position: relative;
    z-index: 1;
    margin: -60px auto 40px;
    padding: 40px 0;
    background: #ffda00;
    border-radius: 2em;
}

/* ------------------  Corlor  ------------------ */
.hightlight .font h4{background: #149d00;}
div:nth-child(even)>.hightlight .font h4{background: #ff0000;}
.half ul{background:#ffeddc; border-radius: 1em; border: 4px solid #1e2535;}
.quotes li:nth-child(even){background: #0e6db1;}
.quotes li:nth-child(odd) {background: #ff8002;}

/* ------------------ 架構標 ------------------ */
@font-face {
	font-family: Cubic_11;
	src: url("../fonts/Cubic_11.ttf");
}

.titleC.btt {
    max-width: 100%;
    background: url("../images/btt-B.png")top center no-repeat;
    padding: 190px 0 80px;
	position: relative;
    z-index: 2;
}

.titleC h2 {
	font-family: Cubic_11;
	font-size: 4rem;
	color: #382825;
}

.half ul h3 {
	font-family: Cubic_11;
	background: url("../images/btt_C.png")top center no-repeat;
	padding:20px 0;
	background-size: contain;
}

div:nth-child(even)>.titleC.btt {
	background: url("../images/btt-A.png")top center no-repeat;
}


.arrow {
    animation: floatBounce 1.2s infinite cubic-bezier(.36,.07,.19,.97);
}

@keyframes floatBounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-12px); }
    50%  { transform: translateY(-6px); }
    70%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}


/* more */
span.more {
	display: flex;
	justify-items: center;
	align-items: center;
}

span.more a {
	background: #382825;
	color: #f6f2e6;
	padding: 10px 12px;
	border-radius: 20px;
	margin-left: 20px;
}

span.more a:hover {
	background: #795548;
	color: #f6f2e6;
}


@media screen and (max-width: 991px) {
	section {
		max-width: 100%;
		border-radius: .5em;
		margin: -12vw auto 6vw;
	}

	.titleC.btt, div:nth-child(even)>.titleC.btt {
		max-width: 100%;
		background-size: 140%;
		padding: 26vw 0 5vw;
		box-sizing: border-box;
		display: block;
	}

	.titleC h2 {font-size: 2.2rem;}
	.half ul h3 {width:100%; background-size: 90vw;}
	.arrow {animation: none;} 

	/* more */
	span.more a { margin: 2vw auto 0; padding: 2vw 5vw;}
	}







/* =================================================== 版頭設定 =================================================== */
/* ------------------  版頭動畫  ------------------ */
.kv_title_1 img {
    position: absolute;
    top: 160px;
    right: 185px;
    animation: zoomIn 2s ease-in-out;
}

.kv_title_2 img {
    position: absolute;
    top: 384px;
    right: 296px;
    animation: zoomIn 2s ease-in-out;
}

.kv_sale {
    position: absolute;
    top: 502px;
    right: 85px;
    animation: fadeInRight 3s ease-out ;
}

.kv_people {
    position: absolute;
    top: 422px;
    right: 812px;
    animation: fadeInLeft 3s ease-out;
}

.star_1 {
    position: absolute;
    top: 190px;
    right: 1016px;
}

.star_2 {
    position: absolute;
    top: 75px;
    right: 755px;
}

.star_3 {
    position: absolute;
    top: 95px;
    right: 535px;
}

.star_4 {
    position: absolute;
    top: 138px;
    right: 121px;
}

.money.A {
    position: absolute;
    top: 592px;
    right: 1060px;
    animation: rotate 5s linear infinite;
	animation-direction: alternate;
}
.money.B {
    position: absolute;
    top: 592px;
    right: 1145px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
	animation-delay: .5s;
}
.money.C {
    position: absolute;
    top: 592px;
    right: 1223px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
}
.money.D {
    position: absolute;
    top: 592px;
    right: 1306px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
	animation-delay: .5s;
}
.money.E {
    position: absolute;
    top: 592px;
    right: 1390px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
}

.money.F {
    position: absolute;
    top: 592px;
    left: 1470px;
    animation: rotate 5s linear infinite;
	animation-direction: alternate;
}
.money.G {
    position: absolute;
    top: 592px;
    left: 1145px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
	animation-delay: .5s;
}
.money.H {
    position: absolute;
    top: 592px;
    left: 1223px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
}
.money.I {
    position: absolute;
    top: 592px;
    left: 1306px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
	animation-delay: .5s;
}
.money.J {
    position: absolute;
    top: 592px;
    left: 1390px;
    animation: rotate 5s linear infinite;
    animation-direction: alternate;
}

  .money:hover {
    animation-play-state: paused;
  }

  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }

    100% {
      transform: rotateY(360deg);
    }
  }

/* ----------------------------------------------
 * Generated by Animista on 2022-11-29 17:4:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/* ------------------  攻略  ------------------ */
.block_00 ul {
    width: 1200px;
	padding: 0 0 0 0;
    margin: 40px auto;
    display: flex;
    justify-content: space-evenly;
}

.a1 {animation: scale_A 3s; animation-delay: 0s; animation-iteration-count: infinite; animation-fill-mode: backwards;}
.a2 {animation: scale_A 3s; animation-delay:.5s; animation-iteration-count: infinite; animation-fill-mode: backwards;}
.a3 {animation: scale_A 3s; animation-delay: 1s; animation-iteration-count: infinite; animation-fill-mode: backwards;}
.a4 {animation: scale_A 3s; animation-delay: 1.5s;animation-iteration-count: infinite; animation-fill-mode: backwards;}


@keyframes scale_A {
	0% { transform: scale(0.93);}
	50% {transform: scale(0.99);}	
	100% {transform: scale(0.93);}			
}



@media screen and ( max-width: 991px ){
	.block_00 ul { width:100%;display: flex; flex-wrap: wrap;padding: 0 0 0 0; margin: 5vw auto 2vw; justify-content: center;}
	.block_00 ul li { margin:1vw;}
    .block_00 img {display: block; width:46vw;}

	}










/* =================================================== 統一設定 =================================================== */
/* ------------------ 錨點微調 ------------------ */
.target-fix {position: relative;top: 0px;display: block;height: 0;overflow: hidden;}
@media screen and ( max-width: 991px ) {
.target-fix {top:-50px;}
	}








/*--  nav 選單 固定側邊--*/
@media only screen and (min-width: 992px) {
	.menustyle2 {
		width: 160px;
		display: flex;
		flex-wrap: wrap;
		background: #382825;
		z-index: 999;
		height: auto;
		position: fixed;
		top: 200px;
		right: 10px;
		border-radius: 10px;
		height: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.menustyle2 ul {
		width: 160px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		padding: 5px;
		flex-wrap: wrap;
	}

	.menustyle2 ul li {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px dotted #fff;
	}

	.menustyle2 ul li a span {
		display: block;
	}

	.menustyle2 ul li:last-child {
		border-bottom: none;
	}

	.menustyle2 ul li a {
		text-align: center;
		margin: 0 auto;
		text-decoration: none;
		font-size: 16px;
		color: #fff;
		font-family: Cubic_11;
		letter-spacing: 1px;
		font-weight: 500;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 11px 0px;
		flex-wrap: wrap;
		line-height: 1.2;
	}

	.menustyle2 ul li:hover,
	#TopMenu2 ul li a:hover {
		background: #f7ede7;
		transform: scale(1);
		color: #382825 !important;
	}

	.menustyle2 ul .active {
		color: #382825 !important;
		background: #f7ede7;
		width: 100%;
		height: 100%;
	}
}


.menustyle2:before {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    z-index: 1;
    background-image: url("../images/menu.png");
    width: 152px;
    height: 65px;
    top: 0;
    right: 3px;
    -webkit-transform: translateY(-75%);
    transform: translateY(-75%);
}


@media screen and (max-width: 991px) {
	.menustyle2::-webkit-scrollbar {
		display: none;
	}

	.menustyle2 {
		width: 100%;
		z-index: 998;
		padding: 1vw 1vw;
		display: block;
		background: #382825;
		flex-direction: column;
		flex-wrap: wrap;
		position: absolute;
		overflow-x: auto;
		justify-content: center;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		height: auto;
	}

	.menustyle2:before {display: none;}

	.menustyle2 ul {
		flex-wrap: nowrap;
		display: flex;
	}

	.menustyle2 ul li {
		width: auto;
		font-size: 20px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: .5px solid #ffffff;
		box-sizing: border-box;
	}

	.menustyle2 ul li a {
		font-size: 1.1rem;
		letter-spacing: 0px;
		font-weight: 500;
		color: #ffffff;
		font-family: Cubic_11;
		box-sizing: border-box;
		padding: 5px 10px;
	}

	.menustyle2 ul .active {
		color: #382825 !important;
		background: #f7ede7;
		width: 100%;
		justify-content: center;
		align-items: center;
		text-align: center
	}

	.menustyle2 ul li a:hover {
		color: #382825 !important;
		width: 100%;
		justify-content: center;
		align-items: center;
		text-align: center;
		background: #f7ede7;
	}

	.sticky {
		position: fixed;
		top: 0;
	}
}
/*--  nav 選單 固定側邊--*/
	
	/**--  下拉選單  --**/
	#TopMenu {transition: background-color 1s, opacity 1s, visibility 1s;opacity: 1;visibility:visible;z-index: 998;position: relative;}
	#TopMenu.show{opacity: 1;visibility: visible;position: fixed;top: 0;} 
	
	/*手機版選單下滑出現*/
	@media screen and (max-width: 991px) {
	  #TopMenu2 {
		transition: background-color 1s, opacity 1s, visibility 1s;
		opacity: 0;
		visibility: hidden;
		z-index: 999;
		position: absolute;
		top: 0;
	  }
	  #TopMenu2.show {
		opacity: 1;
		visibility: visible;
		position: fixed;
		top: 0;
	  }
	}
	
	
	 /*--goto top--*/          
	 #gotop {display: inline-block;background-color: #000; width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
	 #gotop::after {position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/top.png") center no-repeat;background-size: 50%;background-position: 85% 35%;}         
	 #gotop:hover {cursor: pointer;background-color: #666;}          
	 #gotop:active {background-color: #ccc;}          
	 #gotop.show {opacity: 0.4;visibility: visible;}          
	 @media screen and ( max-width: 991px ){          
	 #gotop {bottom: 70px;right: 0;margin: 2vw;}
	 }         
	 /* share url */          
	 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
	 #share::after{position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/share.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}
	 #share:hover{cursor: pointer;background-color: #666;}
	 #share:active{background-color: #666;}
	 @media screen and ( max-width: 991px ){
	 #share{bottom:115px;right: 0;margin: 2vw;}
	 }                    
	 @media screen and ( max-width: 991px ){          
	 html{padding-bottom: 80px;}          
	 }