@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
* {
	margin: 0; 
	padding: 0; 
}

section{
    display: block;
    width: 100%;
	position: relative;
	
}


img{ 
	 max-width: 100%;
     height: auto;
	 display: block;
}

.block {
	display: block;
}

.clear {
	clear: both;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans TC', sans-serif;
}

.language{
	padding: 1em;
	background: #db5a78;
	color: #fff;
	display: inline-block;
	font-size: 100%;
	position: absolute;
	right: 2%;
	top: 2%;
	border-radius: 10px;
	text-decoration: none;
	transition: 0.5s;
}
.language:hover{
	opacity: 0.7;
}


.wrap{
	max-width: 1920px;
	margin:  0 auto;
	
}

.content{
	position: relative;
	margin: 0 auto;
	max-width: 900px;
	text-align: center;
	display: flex;
	justify-content: center;  
}

.content-text{
	background: #000;
	color:#fff;
	border-radius: 4px;
	opacity: 0;
	transition: 0.3s;
	position: absolute;
	bottom: 3%;
	left: 7%;
	z-index: 10;
	padding: 10px;
}

.content-hover:hover  + .content-text{
	opacity: 1;
}

.content-ph{
	display:none;
	
}

.bg{
    background-size: cover;
	margin: 0 auto;
	position: relative;
    
}

.center{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);	
   
}

.allbtn{

	border: 2px solid transparent;
	position: relative;
	overflow: hidden;
	display: inline-block;
	cursor: pointer;
}

/* �剹�桃�睲撮閬�蝝� */
.allbtn::before{
	content: "";
	animation: allbtn 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
	background-color: #fff;
	width: 140%;
	height: 100%;
	transform: skewX(-45deg);
	top: 0;
	left: -160%;
	opacity: 0.5;
	position: absolute;
}
/* �剹�桀�𨰻�� */
@keyframes allbtn{
	0% {
	  left: -160%;
	  opacity: 0;
	}
	70% {
	  left: -160%;
	  opacity: 0.5;
	}
	71% {
	  left: -160%;
	  opacity: 1;
	}
	100% {
	  left: -20%;
	  opacity: 0;
	}
}
.bg01 img{
	width: 100%;
}

.bg02{
    background: url(../images/index01_02.jpg) top center no-repeat;  
}
.bg02-btn{
	position: absolute;
	bottom: 2%;
	display: flex;
	justify-content: center;
	width: 100%;
}
.bg03{
    background: url(../images/index01_03.gif) top center no-repeat;   
}
.bg04{
    background: url(../images/index02_01.jpg) top center no-repeat;   
}
.bg05{
    background: url(../images/index02_02.jpg) top center no-repeat;   
}
.bg06{
    background: url(../images/index02_03.jpg) top center no-repeat;   
}
.bg07{
    background: url(../images/index03_01.jpg) top center no-repeat;   
}
.bg08{
    background: url(../images/index03_02.jpg) top center no-repeat;   
}
.bg09{
    background: url(../images/index03_03.jpg) top center no-repeat;   
	
}
.bg10{
    background: url(../images/index03_04.jpg) top center no-repeat;

	 
}
.bg10-btn{
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;

}


.bg11 img{
    width:100%;   
}
.bg12{
    background: url(../images/index03_06.jpg) top center no-repeat;   
}
.bg12-btn{
	position: absolute;
	bottom: 2%;
	width: 70%;
	left: 50%;
	transform: translateX(-50%);
}
.bg13 img{
    width:100%;  
}
.bg14{
    background: url(../images/index04.jpg) top center no-repeat;   
	
}
.mv {
	position: absolute;
	top: 7%;
	left: 25%;
	width: 50%;
}
.iframe-wrap{
	position: relative;	
	padding-bottom: 56.25%;	
	padding-top: 30px;	
	height: 0;	
	overflow: hidden;
}
.iframe-container iframe, .iframe-container object, .iframe-container embed {
	position: absolute;
	top: 0;
	left: 0;	
	width: 100%;	
	height: 100%;
}

@media screen and (max-width: 900px) {
	.mv {
		left: 6%;
		width: 90%;
	}
}
.bg15{
    background: url(../images/offer_01.jpg) top center no-repeat;   
}
.bg16{
    background: url(../images/offer_02.gif) top center no-repeat;

}
.bg16-btn{
	position: absolute;
	bottom: 6%;
	width: 70%;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	

}
.bg16-btn2{
	position: absolute;
	bottom: 0%;
	width: 50%;
	
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	
}

.bg17{
    background: url(../images/offer_03.gif) top center no-repeat;
	
}
.bg17-btn{
	position: absolute;
	bottom: 7%;
	width: 50%;

	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	
}
.bg17-btn2{
	position: absolute;
	bottom: 0%;
	width: 50%;
	text-align: center;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	
}
.bg18{
    background: url(../images/offer_04.gif) top center no-repeat;
	  
}
.bg18-btn{
	position: absolute;
	bottom: 9%;
	width: 50%;
	left:50%;
	display: flex;
	justify-content: center;
}
.bg18-btn2{
	position: absolute;
	bottom: 2%;
	width: 50%;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.bg19{
    background: url(../images/offer_05.jpg) top center no-repeat;   
}
.bg20{
    background: url(../images/offer_06.jpg) top center no-repeat;  
	margin-top:-2em;
}


.bg20-fb  {
	position: absolute;
	top: 35%;
	left: 41%;
	

	
}
.bg20-fb  img{
	width: 70%;
}


@media screen and (max-width: 900px) {	
	.content {
		margin: auto 0;
		width:100%;
	}
	.content-pc{
		display:none;
	}
	.content-ph{
		display:block;	
	}
	.bg04{
		background-image: none ;
	}
	.bg05{
		background-image: none ;
	}
	.bg06{
		background-image: none ;
	}
	.up{
		margin-top: -5px;
	}
	.bg{
		background-image: none ;
	}
    
}



/* ig */
.slide {
	position: absolute;
	top: 60%;
	left: 10%;
	width: 80%;
}

.slide02 {
	position: absolute;
	top: 58%;
	left: 17%;
	width:  65%;
	z-index: 10000;
	
}

.slide img , .silde02 img {
	border: none;
	width: 100%;
    height: auto;
    vertical-align: bottom;
}
/* ��见�� */


  
.panel , .panel2 {
	display: none;
	
}


/* ��见�� END */

@media screen and (max-width: 576px){

	.slide02{
		width: 70%;
	}

}

@media screen and (max-width: 415px){

	.slide02{
		width: 75%;
	}

}