@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&family=Noto+Serif+TC:wght@300..900&display=swap');

html, body {margin: 0; padding: 0; overflow-x:hidden;}

body {
	font-family: "Noto Serif TC", "Noto Sans TC", Serif, Sans;
	font-size: 1em;
	letter-spacing: .2rem;
	background-color:#FFF;
	margin: 0 ;
	width: 100vw;
	max-width:100%; 
}
img {
	margin: auto; 
	display: block;
}
a:link, a:visited {
	color: inherit !important;
	text-decoration: none;
}			
.main {
	width: 100vw;
	max-width: 1800px;
	text-align:center;
	margin: 0 auto;
}

.top-10 {
	top: 10% !important;
}
.top-25 {
	top: 25% !important;
}
.top-68 {
	top: 68% !important;
}
.top-70 {
	top: 70% !important;
}
.top-75 {
	top: 75% !important;
}
.top-80 {
	top: 80% !important;
}
.top-85 {
	top: 85% !important;
}
.start-head-text {
	left: 13% !important;
}
.start-5 {
	left: 5% !important;
}
.start-10 {
	left: 10% !important;
}
.start-20 {
	left: 20% !important;
}
.start-60 {
	left: 60% !important;
}
.start-75 {
	left: 74% !important;
}					
.end-5 {
	right: 5% !important;
}
.end-10 {
	right: 10% !important;
}
.end-20 {
	right: 20% !important;
}
.translate-middle {
	transform: translate(-50%, -80%) !important;
}

.enlarge-img:hover{
	transform:scale(1.2);
}

.red {
	color: #d07150;
}
.en {
	font-family: "Noto Sans TC";
}
.head-sec {
	background-image:
		url('../img/section-1.png') ;
	background-size: 100% 100%;
	background-position: left top;
	background-repeat: no-repeat;
	width: 100%;
	height: 0;
	padding-top: 48.3333%;
}

.s1-1 {
	width: 527.2px;
	padding-bottom: 0.2em;
	border-bottom: 0.1em solid rgba(80, 80, 80, .2);
}
.s1-2 {
	width: 280px;
	padding-bottom: 0.2em;
	border-bottom: 0.1em solid rgba(80, 80, 80, .2);
}
.s1-3 {
	width: 557.8px;
	padding-bottom: 0.2em;
	border-bottom: 0.1em solid rgba(80, 80, 80, .2);
}

.sec-2 {
	background:
		linear-gradient(to bottom, #fde7c3 0%, #fde7c3 50%, #FFFFFF 100%) ;
	/*background-size: contain;
	background-position: left top;
	background-repeat: repeat-x;*/
	
}
.sec-4 {
	background-image:
		url('../img/section-4-bg.png') ;
	background-size: contain;
	background-position: left top;
	background-repeat: repeat-x;
}
.sec-6 {
	background-image:
		url('../img/section-6-bg.png') ;
	background-size: contain;
	background-position: left top;
	background-repeat: repeat-x;
}
.s7-image{
	position: relative;
}
.s7-image a{
	display: block;      
	position: absolute;
}
.footer-bg {
	background-image:
		url('../img/section-8-bg.png') ;
	background-size: contain;
	background-position: left top;
	background-repeat: repeat-y;
	height:4.4em;
}
.fadein {
	opacity:0;
}
.sub-title {
	font-size: 1.85em;
	font-weight: 600;
	letter-spacing: .1rem;
}
.sub-title-sm {
	font-size: 1.7em;
	font-weight: 500;
	letter-spacing: .05rem;
}
.ex-red {
	font-size: 1.7em;
	color: #d07150;
	font-weight: 700;
}
.yt-frame{
	max-width:100%; 
	width:100%;
	height: 675px;
}
.s7-title {
	font-size: 3em;
	color: #555;
	font-weight: 600;
	letter-spacing: .3rem;
}
.s7-step {
	width:33%;
}
.footer-text {
	font-size: 1.5em;
	letter-spacing: 0rem;
	font-weight: 700;
}
#btn-scrap {
	position: fixed;
	bottom: 10%;
	right: 7%;
	display: block;
}
#btn-scrap img {
	width: 220px;
}
#btn-scrap-m {
	display: none;
}

@media (max-width:1919px) and (min-width:1400px ) {
	.main {
		width: 100vw;
		max-width: 1400px;
	}	
	.s1-1 {
		width: 395.4px;
	}
	.s1-2 {
		width: 210px;
	}
	.s1-3 {
		width: 418.4px;
	}	
	.sub-title {
		font-size: 1.5em;
	}
	.sub-title-sm {
		font-size: 1.4em;
		font-weight: 500;
	}	
	.yt-frame{
		height: 525px;
	}
	.s7-title {
		font-size: 2.2em;
	}
	.footer-bg {
		height:4em;
	}	
	.footer-text {
		font-size: 1.3em;
		letter-spacing: 0rem;
	}
	#btn-scrap-m {
		display: none;
	}
}

@media (max-width:1399px) and (min-width:992px ) {
	.main {
			width: 100vw;
			max-width: 1200px;
	}
	.s1-1 {
		width: 329.5px;
	}
	.s1-2 {
		width: 175px;
	}
	.s1-3 {
		width: 348.7px;
	}		
	.sub-title {
		font-size: 1.3em;
	}
	.sub-title-sm {
		font-size: 1.1em;
	}
	.yt-frame{
		height: 450px;
	}
	.s7-title {
		font-size: 1.8em;
	}
	.footer-bg {
		height:3.6em;
	}	
	.footer-text {
		font-size: 0.9em;
		letter-spacing: 0rem;
	}
	#btn-scrap img {
		width: 200px;
	}
	#btn-scrap-m {
		display: none;
	}	
}

@media (max-width:991px) and (min-width:576px ) {
	.main {
		width: 100vw;
		max-width: 800px;
	}	
	body {
		letter-spacing: .1rem;	
	}
	.start-head-text {
		left: 10% !important;
	}	
	.head-sec {
		background-image:
			url('../img/mobile/section-1-bg-mb.png') ;
		background-size: contain;
		background-position: left top;
		background-repeat: no-repeat;
		width: 100%;
		height: 0;
		padding-top: 107.625%;
	}
	.s1-1 {
		width: 307.2px;
	}
	.s1-2 {
		width: 117.6px;
	}
	.s1-3 {
		width: 307.2px;
	}		
	.sub-title {
		font-size: 1.7em;
	}
	.sub-title-sm {
		font-size: 1.2em;
	}
	.yt-frame{
		height: 337.5px;
	}	
	.s7-step {
		width: 50%;
	}
	.ex-red {
		font-size: 1.4em;
	}	
	.s7-title {
		font-size: 1.7em;
		letter-spacing: .1rem;
	}
	#btn-scrap {
		display: none;
	}	
	#btn-scrap-m img {
		width: 200px;
	}
	#btn-scrap-m {
		position: fixed;
		right: 5%;
		bottom:5%;
		display: block;
	}

}
@media (max-width:575px) and (min-width:381px ) {
	.head-sec {
		background-image:
			url('../img/mobile/section-1-bg-mb.png') ;
		background-size: contain;
		background-position: left top;
		background-repeat: no-repeat;
		width: 100%;
		height: 0;
		padding-top: 107.625%;
	}
	.s1-1 {
		width: 192px;
	}
	.s1-2 {
		width: 73.5px;
	}
	.s1-3 {
		width: 192px;
	}	
	.start-head-text {
		left: 5% !important;
	}
	.sub-title {
		font-size: 1.6em;
	}
	.sub-title-sm {
		font-size: 1em;
	}
	.yt-frame{
		height: 242px;
	}	
	.s7-step {
		width: 50%;
	}
	.ex-red {
		font-size: 1.4em;
	}	
	.s7-title {
		font-size: 1.6em;
		letter-spacing: .1rem;
	}
	#btn-scrap {
		display: none;
	}	
	#btn-scrap-m img {
		width: 175px;
	}
	#btn-scrap-m {
		position: fixed;
		right: 6%;
		bottom:5%;
		display: block;
	}
}
@media (max-width:380px) {
	.head-sec {
		background-image:
			url('../img/mobile/section-1-bg-mb.png') ;
		background-size: contain;
		background-position: left top;
		background-repeat: no-repeat;
		width: 100%;
		height: 0;
		padding-top: 107.625%;
		letter-spacing: 0rem;
	}
	.start-head-text {
		left: 2% !important;
	}
	.s1-1 {
		width: 192px;
	}
	.s1-2 {
		width: 73.5px;
	}
	.s1-3 {
		width: 192px;
	}		
	.sub-title {
		font-size: 1.4em;
		letter-spacing: 0rem;
	}
	.sub-title-sm {
		font-size: 1em;
		letter-spacing: 0rem;
	}
	.yt-frame{
		height: 320px;
	}	
	.s7-step {
		width: 50%;
	}
	.ex-red {
		font-size: 1.4em;
	}	
	.s7-title {
		font-size: 1.4em;
		letter-spacing: 0rem;
	}		
	#btn-scrap {
		display: none;
	}	
	#btn-scrap-m img {
		width: 156px;
	}
	#btn-scrap-m {
		position: fixed;
		right: 5%;
		bottom:5%;
		display: block;
	}	
}