@media screen and (min-width: 1301px) {
	.option, .info, .more{
		font-size: 35px;
	}
	.img-text, .CardText, .list, .profileL
	, .slid-text div:first-child, .more_text{
		font-size: 30px;
	}
	.profile, .more_box{
		font-size: 24px;

	}
	.img-text div:not(:first-child), .profileS, .CardCont, .card .more, .slid-text{
		font-size: 20px;
	}
	.scroll-d{
		bottom: 5%;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1300.9px) {
	.option, .info, .more{
		font-size: 30px;
	}
	.img-text, .CardText, .list, .profileL
	, .slid-text div:first-child, .more_text{
		font-size: 24px;
	}
	.profile, .more_box{
		font-size: 20px;

	}
	.img-text div:not(:first-child), .profileS, .CardCont, .card .more, .slid-text{
		font-size: 18px;
	}
	.scroll-d{
		bottom: 5%;
	}
}
@media screen and (min-width: 1024px) {
	.scroll-d:first-child{
		animation:move 2s infinite;
		-moz-animation:move 2s infinite; /* Firefox */
		-webkit-animation:move 2s infinite; /* Safari and Chrome */
		-o-animation:move 2s infinite; /* Opera */
	}
	.scroll-dot{
		animation:movedot 2s infinite;
		-moz-animation:movedot 2s infinite; /* Firefox */
		-webkit-animation:movedot 2s infinite; /* Safari and Chrome */
		-o-animation:movedot 2s infinite; /* Opera */
	}
	.option, .info, .more{
		margin-right: 5%;
	}
	.option .list, .ProductGAP{
		left: -25%;
		width: 150%;
	}
	.option .list{
		border-radius: 20px;
	}
	.option .list div{
		padding: 2% 0;
	}
	.more{
		border-radius: 20px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1023.9px) {
	.option, .info, .more{
		font-size: 20px;
	}
	.img-text, .CardText, .profileL
	, .slid-text div:first-child, .more_text{
		font-size: 18px;
	}
	.profile, .more_box{
		font-size: 16px;

	}
	.img-text div:not(:first-child), .profileS, .CardCont, .card .more, .slid-text{
		font-size: 15px;
	}
	.scroll-d{
		bottom: 7%;
	}
	.scroll-d:first-child{
		animation:move721 2s infinite;
		-moz-animation:move721 2s infinite; /* Firefox */
		-webkit-animation:move721 2s infinite; /* Safari and Chrome */
		-o-animation:move721 2s infinite; /* Opera */
	}
	.option, .info, .more{
		margin-right: 2%;
	}
	.option .list, .ProductGAP{
		left: -50%;
		width: 200%;
	}
	.option .list{
		border-radius: 10px;
	}
	.option .list div{
		padding: 5% 0;
	}
	.more{
		border-radius: 10px;
	}
}
@media screen and (min-width: 1024px) {
	.scroll-d{
		height: 10%;
	}
	.scroll-d:first-child{
		height: 8%;
	}
}
/*@media screen and (min-width: 1024px) and (min-height: 549.9px){
	.scroll-d{
		height: 7%;
	}
	.scroll-d:first-child{
		height: 5%;
	}
}*/
@media screen and (min-width: 769px) and (max-width: 1023.9px) and (max-height: 550px){
	.scroll-d{
		height: 10%;
	}
	.scroll-d:first-child{
		height: 8%;
	}
	.scroll-dot{
		animation:movedot721 2s infinite;
		-moz-animation:movedot721 2s infinite; /* Firefox */
		-webkit-animation:movedot721 2s infinite; /* Safari and Chrome */
		-o-animation:movedot721 2s infinite; /* Opera */
	}
}
@media screen and (min-width: 769px) and (max-width: 1023.9px) and (min-height: 549.9px){
	.scroll-d{
		height: 7%;
	}
	.scroll-d:first-child{
		height: 5%;
	}
	.scroll-dot{
		animation:movedot721H 2s infinite;
		-moz-animation:movedot721H 2s infinite; /* Firefox */
		-webkit-animation:movedot721H 2s infinite; /* Safari and Chrome */
		-o-animation:movedot721H 2s infinite; /* Opera */
	}
}
@media screen and (min-width: 769px)  and (orientation: landscape){
	#bgR, #bgL{
		height: 600vh;
	}	
	#bgL{
		clip-path: polygon(0% 0%, 55% 0%, -35% 100%, 0% 100%);
		background-color: #F57942;
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
	}
	#bgR{
		clip-path: polygon(115% 0%, 100% 0%, 100% 100%, 25% 100%);
		background-color: #ffbb99;
		/*background-color: #FDA275;*/
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.profile{
		width: 41%;
		height: 90vh;
		right: -45%;
		margin: 5vh 2%;
	}
	.profileIMG{
		width: 55%;
		height: 100vh;
	}
	.scroll-d{
		width: 3%;
		left: 48%;
	}
	.scroll-dot{
		width: 1%;
		padding-top: 1%;
		left: 49%;
	}
	.option{
		width: 40%;
		margin-top: 2%;
	}
	.option,.option a{
		color: #707070;
	}
	.option div{
		display: inline-block;
		padding-left: 2%;
	}
	.more{
		bottom: 5%;
		padding: 1%;
	}
	.img{
		position: absolute;
		top: calc(50vh - 14vw);
		left: 5%;
		width: 50%;
	}
	.img-text{
		position: absolute;
		top: calc(50vh - 14vw);
		left: 60%;
		width: 35%;
		height: 28.125vw;
	}
	.img-text div{
		text-align: right;
		margin-bottom: 5%;
	}
	.bpt{
		margin-top: 20%;
		height: 30%;
	}
	.img-qr{
		width: 40% ;
		padding-bottom: 40%;
		border-radius: 10px;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.slide{
		width: 50%;
	}
	.slide div{
		display: inline-block;
		vertical-align: middle;
	}
	.slide-gif{
		width: 50%;
		height: 90%;
		margin: 3% 5%;
		background-size: 100% auto;
	}
	.slide-text{
		max-height: 70%;
		width: 35%;
		margin-right: 5%;
		overflow-y: scroll;
	}
	.circle div{
		margin-left: 2%;
	}
	.uiText{
		float: right;
		/*color: white;*/
		width: 80%;
	}
	.card .more{
		width: 20%;
	}
	.card{
		width: 42.5%;
		margin: 15vh 0 0 5%;
	}
	#footer{
		margin: 10vh 0 1vh 0;
	}
	.more_box .CardImg{
		width: 25%;
		padding-bottom: 25%;
		margin-left: 5%;

	}
	#nav{
		width: 20%;
		right: 40%;
		bottom: 5%;
	}
}
@media screen and (min-width: 769px)  and (orientation: portrait){
	.profile{
		width: 80%;
    height: 75vh;
    right: -100%;
    margin: 5vh 5%;
    padding: 2vh 5%
	}
}
@media screen and (min-width: 769px) and (min-height: 450px) and (orientation: landscape){
	.Product:active > .ProductGAP,
	.Product:hover > .ProductGAP,
	.Product:active > .list,
	.Product:hover > .list{
		display: block;
	}
}

@keyframes move
{
	from {bottom: 7%;}
	to {bottom: 5%;}
}
@keyframes move721
{
	from {bottom: 9%;}
	to {bottom: 7%;}
}
@keyframes movedot
{
	from {opacity:1;bottom: 11%;}
	to {opacity:0;bottom: 9%;}
}
@keyframes movedot721
{
	from {opacity:1;bottom: 13%;}
	to {opacity:0;bottom: 11%;}
}
@keyframes movedot721H
{
	from {opacity:1;bottom: 12%;}
	to {opacity:0;bottom: 10%;}
}
@keyframes movedot720
{
	from {opacity:1;bottom: 10%;}
	to {opacity:0;bottom: 8%;}
}

@media screen and (orientation: portrait) {
	#bgL{
		clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 70%);
		background-color: #F57942;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;
	}
	#bg1, #bg2, #bg3, #bg4{
		background-color: #ffbb99;
		/*background-color: #FDA275;*/
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
	}
	#bg1{
		clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
		top: 120vh;
	}
	#bg2{
		clip-path: polygon(0% 0%, 100% 20%, 100% 80%, 0% 100%);
		top: 300vh;
	}
	#bg3{
		clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
		top: 480vh;
	}
	#bg4{
		clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);
		height: 50vh;
		bottom: 0;
	}
	.profileIMG{
		height: 70vh;
	}
	.option{
		font-size: 35px;
	}
	.info, .more{
		font-size: 20px;
	}
	.img-text, .CardText, .profileL, .more_text{
		font-size: 18px;
	}
	.profile, .more_box{
		font-size: 16px;

	}
	.img-text div:not(:first-child), .profileS, .CardCont, .card .more{
		font-size: 15px;
	}
	.option, .info, .more{
		margin-right: 4%;
	}
	.option .list, .ProductGAP{
		left: -50%;
		width: 200%;
	}
	.option .list{
		border-radius: 10px;
	}
	.option .list div{
		padding: 5% 0;
	}
	.more{
		border-radius: 15px;
	}
	.scroll-d{
		height: 7%;
		bottom: 5%;
		width: 5%;
		left: 47%;
	
	}
	.scroll-d:first-child{
		height: 5%;
		animation:move 2s infinite;
		-moz-animation:move 2s infinite; /* Firefox */
		-webkit-animation:move 2s infinite; /* Safari and Chrome */
		-o-animation:move 2s infinite; /* Opera */
	}
	.scroll-dot{
		width: 2%;
		padding-top: 2%;
		left: 48.5%;
		animation:movedot720 2s infinite;
		-moz-animation:movedot720 2s infinite; /* Firefox */
		-webkit-animation:movedot720 2s infinite; /* Safari and Chrome */
		-o-animation:movedot720 2s infinite; /* Opera */
	}
	.option{
		margin-top: 2%;
	}
	.option div,.option a{
		padding: 2% 0;
		color: white;
	}
	.more{
		bottom: 3%;
		padding: 2%;
	}
	.img,
	.img-text{
		width: 70%;
		margin: 0 15%
	}
	.slide{
		width: 80%;
		vertical-align: top;
	}
	.slide-gif{
		width: 90%;
		height: 50%;
		margin: 5%;
		background-size: auto 100%;
	}
	.slide-text{
		height: 40%;
		width: 90%;
		margin: 5%;
		margin-top: 0;
		overflow-y: scroll;
	}
	.circle div{
		margin-right: 2%;
	}
	.bpt{
		padding-bottom: 23%;
	}
	.img{
		margin-top: 5vh;
	}
	.img,
	.img-text div{
		margin-bottom: 3vh;
	}
	.img-qr{
		width: 50%;
		padding-bottom: 50%;
	}
	.card .more{
		width: 40%;
	}
	.card{
		width: 70%;
		margin: 10vh 0 0 15%;
	}
	#footer{
		font-size: 10px;
		margin: 5vh 0 1vh 0;
	}
	.more_box .CardImg{
		width: 41.5%;
		padding-bottom: 41.5%;
		margin-left: 5%;

	}
	#nav{
		width: 30%;
		right: 35%;
		bottom: 3.5%;
	}
}
@media screen and (max-width: 768.9px) {
	#bgL{
		clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 70%);
		background-color: #F57942;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;
	}
	#bg1, #bg2, #bg3, #bg4{
		background-color: #ffbb99;
		/*background-color: #FDA275;*/
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
	}
	#bg1{
		clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
		top: 120vh;
	}
	#bg2{
		clip-path: polygon(0% 0%, 100% 20%, 100% 80%, 0% 100%);
		top: 300vh;
	}
	#bg3{
		clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
		top: 480vh;
	}
	#bg4{
		clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);
		height: 50vh;
		bottom: 0;
	}
	.profile{
		width: 80%;
		height: 75vh;
		right: -100%;
		margin: 5vh 5%;
		padding: 2vh 5%;
	}
	.profileIMG{
		height: 70vh;
	}
	.option{
		font-size: 35px;
	}
	.info, .more{
		font-size: 20px;
	}
	.img-text, .CardText, .profileL, .more_text{
		font-size: 18px;
	}
	.profile, .more_box{
		font-size: 16px;

	}
	.img-text div:not(:first-child), .profileS, .CardCont, .card .more{
		font-size: 15px;
	}
	.option, .info, .more{
		margin-right: 4%;
	}
	.option .list, .ProductGAP{
		left: -50%;
		width: 200%;
	}
	.option .list{
		border-radius: 10px;
	}
	.option .list div{
		padding: 5% 0;
	}
	.more{
		border-radius: 15px;
	}
	.scroll-d{
		height: 7%;
		bottom: 5%;
		width: 5%;
		left: 47%;
	
	}
	.scroll-d:first-child{
		height: 5%;
		animation:move 2s infinite;
		-moz-animation:move 2s infinite; /* Firefox */
		-webkit-animation:move 2s infinite; /* Safari and Chrome */
		-o-animation:move 2s infinite; /* Opera */
	}
	.scroll-dot{
		width: 2%;
		padding-top: 2%;
		left: 48.5%;
		animation:movedot720 2s infinite;
		-moz-animation:movedot720 2s infinite; /* Firefox */
		-webkit-animation:movedot720 2s infinite; /* Safari and Chrome */
		-o-animation:movedot720 2s infinite; /* Opera */
	}
	.option{
		margin-top: 2%;
	}
	.option div,.option a{
		padding: 2% 0;
		color: white;
	}
	.more{
		bottom: 3%;
		padding: 2%;
	}
	.img,
	.img-text{
		width: 70%;
		margin: 0 15%
	}
	.slide{
		width: 80%;
		vertical-align: top;
	}
	.slide-gif{
		width: 90%;
		height: 50%;
		margin: 5%;
		background-size: auto 100%;
	}
	.slide-text{
		height: 40%;
		width: 90%;
		margin: 5%;
		margin-top: 0;
		overflow-y: scroll;
	}
	.circle div{
		margin-right: 2%;
	}
	.bpt{
		padding-bottom: 23%;
	}
	.img{
		margin-top: 5vh;
	}
	.img,
	.img-text div{
		margin-bottom: 3vh;
	}
	.img-qr{
		width: 50%;
		padding-bottom: 50%;
	}
	.card .more{
		width: 40%;
	}
	.card{
		width: 70%;
		margin: 10vh 0 0 15%;
	}
	#footer{
		font-size: 10px;
		margin: 5vh 0 1vh 0;
	}
}
.slid-text-title{
	display: none;
}
@media screen and (max-width: 400px) and (max-height: 700px){
	.slid-text-title{
		display: block;
	}
	.slid-text-title img{
		height: 20px;
		position: absolute;
		right: 10%;
		z-index: 2;
		transition: 0.3s;
	}
	.slid-text-cont{
		height: 0%;
		background-color: white;
		position: absolute;
		top: 0;
		left: 0;
		padding: 5% 10%;
		overflow: hidden;
		transition: 0.3s;
		z-index: 1;
	}
}

html{
	scroll-behavior: smooth;
}
body{
	width: 100%;
	margin: 0;
	position: relative;
	overflow-x: hidden;
	font-family: 'Noto Sans TC' , 'Open Sans', Arial, 'sans-serif';
	height: 600vh;
	overscroll-behavior-y: contain;
}
body ::-webkit-scrollbar {
  width: 10px;
}
body ::-webkit-scrollbar-thumb {
    background: #F57942;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
body ::-webkit-scrollbar-thumb:hover {
  background: #FDA275;
  background-clip: padding-box; 
}
a{
	color: #F57942;
	font-weight: bold;
}
.profileS{
	color: #70707070;
	font-weight: bold;
}
.option, .info, .more, .img-text, .CardText, .profile, .CardCont,
ß .slid-text, .slide-text, .more_box, #nav a{
	color: #707070;
	font-weight: bold;
}
.img-text .uiText, .slid-text, .slide-text,.CardCont{
	text-align: justify;
}
.home, .profile, .BgBlur{
	transition: 0.5s;
}
.img-text .img-qr{
	margin: auto;
}
.img-text .circle div{
	margin-bottom: 0;
}
/*#bgC{
	clip-path: polygon(55% 0%, 115% 0%, 25% 100%, -35% 100%)
	background-color: #FDA275;
	height: 100%;
}*/
#content{
	position: absolute;
	top: 0;
	left: 0;
}
.vh{
	/*width: 100%;*/
	height: 100vh;
	/*border-bottom: red solid 1px;*/
	position: relative;
	overflow: hidden;
}
.vhmore{
	height: auto;
}
.profileIMG{
	background-image: url("photo/profile.jpg");
	background-size: cover;
	background-position: right;
	position: relative;
}
.home{
	opacity: 1;
	/*visibility: visible;*/
}
.scroll-d{
	position: absolute;
	z-index: 1;
	border-radius: 40px;
}
.scroll-d, .more, #nav{
	border: 1px solid #70707024;
	background-color: rgba(237, 231, 231, 0.5);
	backdrop-filter: saturate(100%) blur(10px);
	-webkit-backdrop-filter: saturate(100%) blur(10px);
	
}
.scroll-d:first-child{
	-webkit-filter:none;
	/*border: none;*/
	clip-path: circle(50% at 50% 50%);
	background: #FDA275;
	}
.scroll-dot{
	position: absolute;
	z-index: 2;
	border: 1px solid #333;
	border-radius: 40px;
	background-color: white;
}
.scroll-t{
	position: absolute;
	bottom: 1%;
	width: 100%;
	text-align: center;
}
.option, .info, .more{
	position: absolute;
	right: 0;
	text-align: right;
}
.Product{
	position: relative;
}
.option a, #nav a{
	text-decoration:none;
}
.option .list, .option .ProductGAP{
	padding: 0;
	position: absolute;
	text-align: center;
	background-color: white;
	z-index: 2; 
}
 .option .ProductGAP{
	top: 100%;
	height: 30%;
	display: none;
}
.option .list{
	top: 130%;
	display: none;
	border: 3px solid #FDA275;
}
.list div{
	width: 100%;
	border-bottom: 3px solid #FDA275;
}
.list div:last-child{
	border-bottom: none;
}
.info{
	bottom: 20%;
}
.info div:not(:first-child){
	font-size: 20px;
	padding: 2% 0%;
}
.profile, .more_box{
	position: absolute;
	background-color: white;
	overflow-y: scroll;
	overflow-x: hidden;
	/*padding-bottom: 0;*/
}
.profile div{
	padding-bottom: 2%;
}
.img{
	border-radius: 10px;
	overflow: hidden;
	/*-webkit-filter:drop-shadow(5px 5px 5px #333);*/
}
.img div{
	padding-bottom: 56.25%;
	background-size: cover;
	background-position: center;
}
.img-text div{
	background-size: cover;
	background-position: center;
}
.RWD{
	text-align: center;
}
.slid-text{
	/*height: 20vh;*/
	padding: 5% 10%;
	background-color: white;

}
.slid{
	overflow-y: hidden;
	overflow-x: scroll;
	white-space: nowrap;
	height: 50vh;
	margin: 5vh;
	margin-right: 0;
}
.slide{
	height: 95%;
	background-color: white;
	border: 5px solid #70707024;
	margin-right: 5%;
	display: inline-block;
	border-radius: 15px;	
}
.slide-gif{
	background-position: center;
	background-repeat: no-repeat;
}
.slide-text{
	white-space: pre-wrap;
}
.circle div{
	width: 10%;
	padding-top: 10%;
	display: inline-block;
	border: 1px solid #333;
	border-radius: 40px;
}
.card{
	display: inline-block;
	position: relative;
	vertical-align: top;
}
.CardImg{
	padding-bottom: 56%;
	margin-bottom: 5%;
/* 	border: 1px solid #333; */
	border: 5px solid #70707024;
	border-radius: 10px;
	background-color: #70707024;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.CardText, .CardIcon{
	display: inline-block;
}
.CardText{
	width: 50%;
	margin: 1% 0;
}
.CardIcon{
	width: 10%;
	padding-top: 10%;
	background-size: cover;
	background-position: center;
	float: right;
	display: inline-block;
	margin-left: 2%;
}
.CardCont{
	margin-top: 5%;
}
.card .more{
	position: relative;
	text-align: center;
	margin: 0;
	margin-top: 5%;
	bottom: 0;
	float: right;
}
.BgBlur, .moreBgBlur{
	visibility: hidden;
	opacity: 0;
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100VH;
	background-color: rgb(157, 92, 43, .5);
  backdrop-filter: saturate(100%) blur(40px);
  -webkit-backdrop-filter: saturate(100%) blur(40px);
    
}
.fullvideo{
	position: absolute;
	top: calc(50vh - 22.5vw);
	left: 10%;
	width: 80%;
	padding-bottom: 45vw;
	border-radius: 20px;
	overflow: hidden;
}
#YTvideo{
	border-radius: 20px;
	position: absolute;
	width: 100%;
	height: 100%;
}
#footer{
	color: white;
	text-align: center;
	font-weight: bold;
}
.vhHi{
	height: auto;
}
.more_box{
	width: 80%;
	height: 86vh;
	margin: 7vh 10%;
}
.more_text{
	padding: 5% 0 3% 5%;
	display: inline-block;
}
.more_tex:nth-child(add){
	color: #FDA275;
}
.more_list{
/* 	height: 55%; */
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	margin: 0 5%;
}
.more_list:last-child{
	margin-bottom: 5%;
}
.more_box .CardImg{
	display: inline-block;
	background-size: contain;
}
.more_list .CardImg{
	margin: 0;
	margin-right: 5%;
}
.more_box .CardImg:last-child{
	margin-right: 0;
}
#nav{
	position: fixed;
	text-align: center;
	border-radius: 50px;
	display: none;
	z-index: 2;
}
#nav a{
	display: inline-block;
	white-space:nowrap;
	padding: 2.5% 4%;
}
#nav a:hover{
	background-color: #F57942;
	color: white;
	border-radius: 50px;
}
#nav .navnon{
	display: none;
}
#nav .active{
	display: inline-block;
}