@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400&display=swap');
/* 移動到購物商店首頁的調整版本 */
html, body{
	padding:0;
	margin:0;
	height:100%;
	overflow: hidden;
}




.pageloading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: #000000 url("../images/guest_loading.gif") no-repeat;
	background-position: center center;
}

.shop_forMobile{
	display: none;
}

headerbar{
	width:100%;
	height:auto;
	padding: 1.5rem 2rem;
	position: absolute;
	top:0;
	left:0;
	z-index: 9;
}


headerbar a:link,
headerbar a:visited,
headerbar a:hover,
headerbar a:active{
	text-decoration: none;
	font-family: Georgia;
	font-weight: 400;
	font-size: 11px;
	color:#000;
}

.cntWrap{
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* background: url(https://www.cheerego.com/shop/images/summertrack009/pc_back2.jpg);
	background-position-x: center;
	background-position-y:100px;
	background-size: contain;
	background-repeat: no-repeat; */
}



.landWrap{
	width:100%;
	height:100vh;
	position: absolute;
	display: block;
	/* overflow: hidden; */
}

.landWrap img.homeLand{
	width: 60%;
	height:auto;
	display: none;
	position: absolute;
	left:-10%;
	bottom:0;
}

.landWrap img.dotdot1{
	width: 22%;
	height: auto;
	position: absolute;
	right: 18%;
	top: -10%;
}



.landWrap img.dotdot2{
	width: 23%;
	height: auto;
	position: absolute;
	left: 23%;
	bottom: 5%;
}


#cheerMan{
	   width: 35%;
	   height: auto;
	   position: absolute;
	   right: -24%;
	   bottom: 5%;
	   z-index: 9;
	   display: none;
  }
   
#cheerMan img.cheerMan{
		 width:100%;
		 height:auto;
	 }   

.titleWrap{
	position: absolute;
	top: 39%;
	left: 25%;
	align-items: center;
	z-index: 99;
	display: flex;
}

/* .titleWrap.forDesktop{
	display: flex;
} */



.titleWrap a.titleLink {
	width:auto;
	height:auto;
	display: flex;
	text-decoration: none;
	align-items: center;
	margin-right: 5%;
}

.titleWrap a.titleLink p{
	font-size: 1.5rem;
	color:#fff;
	display: flex;
}

.titleWrap a.titleLink p span.fadeInText{
	font-family: 'Noto Serif TC', 'Noto Serif SC', serif!important;
	font-size: 1rem;
	/* font-size: 1.5rem; */
	transition: all 1.5s ease-in-out;
	opacity: 0;
}

/* .titleWrap a.titleLink p span:nth-child(6){
	opacity: 0!important;
} */

.titleWrap a.titleLink img{
	width:30%;
	height: auto;
	position: relative;
	margin-left:15px;
}


/* ----- */
.titleWrap .titleLink {
	width:auto;
	height:auto;
	display: flex;
	text-decoration: none;
	align-items: center;
	margin-right: 5%;
}

.titleWrap .titleLink p{
	font-size: 1.5rem;
	color:#fff;
	display: flex;
}

.titleWrap .titleLink p span.fadeInText{
	
	font-size: 1rem;
	transition: all 1.5s ease-in-out;
	opacity: 0;
}

/* .titleWrap .titleLink p span:nth-child(6){
	opacity: 0!important;
} */

.titleWrap .titleLink img{
	width:30%;
	height: auto;
	position: relative;
	margin-left:15px;
}

.titleWrap .shoplink{
	margin-left: .2rem;
	transition: all 1.5s ease-in-out;
	display: flex;
}

.titleWrap .shoplink a{
	text-decoration: none;
	display: flex;
	align-items: center;
}

.titleWrap .shoplink p{
	background: #000;
	color: #fff;
	border-radius: .3rem;
	font-size: .8rem;
	padding: .35rem;
	line-height: 1;
}

.titleWrap .shoplink img{
	width:24px;
	margin-left: .5rem;
}

.titleWrap .shoplink.walkimg img{
	width:60px;
	margin-left: 0;
}

.worldWide{
	width:100%;
	height: auto;
	display: flex;
	align-content: center;
	justify-content:center;
	position: absolute;
	top:10%;
}

.worldWrap{
	width:580px;
	height:580px;
	flex-basis:initial;
	display: flex;
	justify-content: center;
	position: relative;
	top:-5%;
}



.worldCircle{
	width:100%;
	height:100%;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

.worldCircle img{
	width:100%;	
	height: auto;
	position: absolute;
}

.worldElem img{
	position: absolute;
}

.worldElem{
	width:100%;
	height:100%;
	position: absolute;
	border-radius: 50%;
	z-index: 5;
	overflow: hidden;
	left:0;
	top:0;
}

img.skybak{
	z-index: 0;
	left:0;
	top:0;
	transition: transform 0.5s ease-in-out; 
}

img.tree{
	z-index: 3;
	left:0;
	top:0;
}

img.grassFall{
	z-index: 5;
	left:0;
	top:0;
}

img#fallimg{
	transition: all 2s ease-in-out;
	opacity: 0;
}


img.flower1{
	z-index: 10;
	width: 35%;
	height: auto;
	left: 30%;
	bottom: -6%;
}

img.flower2{
	z-index: 10;
	width: 80%;
	height: auto;
	right: -10%;
	top: -17%;
}

img.grass1{
	z-index: 9;
	width: 60%;
	height: auto;
	left: -3%;
	top: -5%;
}

img.grass2{
   z-index: 4;
   width: 30%;
   height: auto;
   right: -5%;
   top: 20%;
}

img.grass3{
  z-index: 8;
  width: 50%;
  height: auto;
  right: 0%;
  bottom: -10%;
}

img.grass4{
	z-index: 7;
	width: 20%;
	height: auto;
	left: 0;
	top: 36%;
}

img.starBak{
	/* opacity: 0; */
	z-index: 1;
	width: 75%;
	height: 75%;
	position: absolute;
	top: 20%;
	left: 20%;
	transform: translate(-50%,-50%);
	transition: all .3s ease-in-out;
}

img.birds{
	width: 18%;
	height: auto;
	top: 30%;
	left: 80%;
	z-index: 1;
	opacity: 0;
	transition: all 2s ease-in-out;
}

img.birds.imgMove{
	top: 30%;
	left:65%;
}

img.springElem, img.summerElem, img.fallElem,img.winterElem{
	transition: all 2s ease-in-out;
}

img.summerElem,img.fallElem,img.winterElem{
	opacity: 0;
}

/* .dotWrapper{
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
}

.dotWrapper img.dotdot1{
	width:50%;
	height:auto;
	position: absolute;
	top:0;
	left:45%;
	
} */


.loading-module_loadingSpin__1Ys0m{
	/* width:110px!important;
	height:24px!important; */
	width:0!important;
	height:0!important;
	padding:0!important;
	margin:0!important;
	display: flex!important;
	align-items: center!important;
	/* justify-content: center!important; */
}

.loading-module_loadingSpin__1Ys0m div {
	opacity: 0;
	  transform-origin: 0.2rem 0.2rem!important;
	  animation: loading-module_loadingSpin__1Ys0m 1.2s linear infinite;
}

.loading-module_loadingSpin__1Ys0m div:after {
	content: " ";
	display: none;
	opacity: 0!important;
	position: absolute;
	top: 0rem!important;
	left: 0rem!important;
	width: 0.10rem!important;
	height: 0.2rem!important;
	border-radius: 20%;
	padding:0!important;
	margin:0!important;
}

.loading-module_loadingSpin__1Ys0m div:nth-child(1){
	opacity: 0!important;
}




.shopCarBox{
	display: flex;
	height:60px;
	align-items: flex-end;
}

.shopCarBox img{
	width:auto!important;
	height:100%;
}

.shopCarBox img.cart{
	height: 45%;
	position: relative;
	bottom: 5px;
}

 .index-module_root__2v3u6{
	 display: none!important;
 }
 .index-module_root__2h-p9{
	 padding:2px 6px!important;
	 margin-left:0!important;
	 width:100%!important;
	 display: flex!important;
	 align-items: center!important;
	 width:160px!important;
 }
 
 .index-module_root__2h-p9 div:first-child{
	 background: transparent!important;
	 padding: 0px!important;
	 font-size: .9rem!important;
	 border-radius: 3px!important;
 }
 
 .index-module_fixWidth__3jFHi{
	   width:auto!important;
   }
   
 .index-module_container__1FQM2{
	 padding:0!important;
	 margin:0!important;
 }	
 
 .sl-buybutton-1693714869808{
	 display: flex;
 }
 
 
 /* back line */
.bgw{
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
}

.menb_left,.menb_right{
	/* opacity: 0; */
}

.menb_left{
	width:32px;
	height:32px;
	position: absolute;
	top:43%;
	left:15%;
}

.menb_right{
	width:32px;
	height:32px;
	position: absolute;
	top:40%;
	right:15%;
}

.menb_left img, .menb_right img{
	width:70%;
	height:auto;
	position: absolute;
	opacity: 0;
	transition: all 3s ease-in-out;
}


.menb_left img.active, .menb_right img.active{
	opacity: 1;
}




img.menb1{
	top:55%;
	left:20px;
}

img.menb1.active{
	top:8%;
}

img.menb2{
	top:65%;
	left:-50px;
}

img.menb2.active{
	top:15%;
}

img.menb3{
	top:75%;
	left:200%;
}

img.menb3.active{
	top:5%;
}

img.menb4{
	top:68%;
	right:20px;
}

img.menb4.active{
	top:8%;
}

img.menb5{
	top:155%;
	right:-50px;
}

img.menb5.active{
	top:95%;
}

img.menb6{
	top:175%;
	right:220%;
}

img.menb6.active{
	top:85%;
}

.bg-container {
	position: absolute;
	top: 40%;
	left: 0;
	width: 100%;
	height: 162px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.bg {
	position: absolute;
	width: 200%; /* 設置為兩倍寬度、以便兩葛背景圖層無縫連接 */
	height: 100%;
	background-image: url('../images/summertrack009/aniline1.png?v=3.1'); 
	background-size: auto 30%;
	background-repeat: repeat-x;
	background-position-y: 40px;
	animation: slideBg 800s linear infinite; /* 調整動畫時間和速度 */
	animation-delay: -5s;
}

.bg2 {
	position: absolute;
	width: 200%; /* 設置為兩倍寬度、以便兩葛背景圖層無縫連接 */
	height: 100%;
	background-image: url('../images/summertrack009/aniline2.png?v=3.2'); 
	background-size: auto 30%;
	background-repeat: repeat-x;
	background-position-y: 30px;
	animation: slideBg2 140s linear infinite; /* 調整動畫時間和速度 */ 
	animation-delay: -3s;
	opacity: .6;
}

.bg3 {
	position: absolute;
	width: 200%; /* 設置為兩倍寬度、以便兩葛背景圖層無縫連接 */
	height: 100%;
	background-image: url('../images/summertrack009/aniline3.png?v=3.2'); 
	background-size: auto 30%;
	background-repeat: repeat-x;
	animation: slideBg3 420s linear infinite; /* 調整動畫時間和速度 */ 
	animation-delay: -6s;
	top:50px;
	opacity: .2;
}

@keyframes slideBg {
	0% {
		background-position-x:-14%;
		transform: translateY(0%) skewX(0deg) scale(1);
	}
	50% {
		background-position-x:55%;
		transform: translateY(40%) skewX(10deg) scale(2);
	}
	100% {
		background-position-x:100%;
		transform: translateY(0%) skewX(0deg) scale(1);
	}
}

@keyframes slideBg2 {
	0% {
		background-position-x:44%;
		
		transform: translateY(0%) skewX(0deg) scale(1);
		/* transform: translateX(0%); */
	}
	50% {
		background-position-x:-35%;
		transform: translateY(10%) skewX(-10deg) scale(1.3);
	}
	100% {
		background-position-x:-120%;
		
		transform: translateY(0%) skewX(0deg) scale(1);
	}
}	 

@keyframes slideBg3 {
	0% {
		background-position-x:44%;
		
		transform: translateY(0%) skewX(0deg) scale(1);
		/* transform: translateX(0%); */
	}
	50% {
		background-position-x:-35%;
		transform: translateY(10%) skewX(20deg) scale(1.5);
	}
	100% {
		background-position-x:-120%;
		
		transform: translateY(0%) skewX(0deg) scale(1);
	}
}	
 
@media only screen and (max-width: 1068px) and (max-width: 1068px){
	.worldWrap{
		width:320px;
		height:320px;
		flex-basis:initial;
		display: flex;
		justify-content: center;
		position: relative;
		top:-5%;
	}
	
	.titleWrap a.titleLink p{
		font-family: 'Noto Serif TC', 'Noto Serif SC', serif!important;
		line-height: 1.2rem!important;
		font-size: 1.4rem!important;
	}
	
	/* .titleWrap a.titleLink p span.fadeInText {
		font-family: 'Noto Serif TC', 'Noto Serif SC', serif!important;
		line-height: 1.2rem!important;
		font-size: 1rem;
	} */
	
	/* .titleWrap .titleLink p span.fadeInText {
		font-size: .25rem;
	} */
	
	.titleWrap {
		top: 40%;
		left: 5%;
	}
	
	.titleWrap .shoplink.walkimg img {
		width: 40px;
	}
	
	.menb_left img, .menb_right img {
		width: 40%;
	}
	
	.landWrap img.dotdot1 {
		top: -20%;
	}
}


/* for 手機裝置(螢幕尺寸<768px) */
@media screen and (max-width:767px){
	
	#Content {
		padding-top: 0px!important;
	}
	
	.pageloading {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background: #000000 url("../images/guest_loading.gif") no-repeat;
		background-size: 30%;
		background-position: center center;
	}
	
	.landWrap {
		   width: 60%;
		   height: 100vh;
		   position: relative;
		   z-index: 8;
		   display: block;
	   }
	
	.cntWrap{
		   width:100%;	
		   height: 100%;
		   display: flex;
		   align-items: center;
		   justify-content: flex-start;
		   flex-direction: column-reverse;
	   }
	
	.worldWide{
		top:0px;
		height: 100%;
		z-index: 10;
	}
	
	.forDesktop{
		display: none!important;
	}
	
	.shop_forMobile{
		width:auto;
		padding: .5rem!important;
		height:auto;
		display: flex;
		flex-direction:column;
		position: absolute;
		background: #fff!important;
		z-index: 99;
		padding:0;
		top:25%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align: center;
	}
	
	
	.titleWrap {
		width:30px;
		height:auto;
		display: flex;
		flex-direction:column;
		position: absolute;
		background: #fff!important;
		z-index: 99;
		padding:0;
		top:5%;
		left:50%;
		transform:translate(-50%,-50%);
	} 
	
	
	.titleWrap.title_m a.titleLink p{
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		margin:0;
		align-items: center;
	}
	
	.titleWrap a.titleLink{
		justify-content: center;
		margin-right:0;
	}
	
	.titleWrap a.titleLink p{
		color: #000;
		font-size: 1.6rem;
	}
	
	
	.titleWrap.title_m .titleLink p{
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		margin:0;
		align-items: center;
	}
	
	.titleWrap .titleLink{
		justify-content: center;
		margin-right:0;
	}
	
	.titleWrap .titleLink p{
		color: #000;
		font-size: 1.6rem;
	}
	
	.titleWrap .shoplink a{
		flex-direction: column;
	}
	
   .titleWrap .shoplink button{
	   flex-direction: column;
   }
   
   /* loading spin */
   .loading-module_loadingSpin__1Ys0m{
	   /* width:30px!important;
	   height:62px!important; */
	   width:0!important;
	   height:0!important;
	   padding:0!important;
	   margin:0!important;
	   display: flex!important;
	   align-items: center!important;
	   /* justify-content: center!important; */
   }
   
   .loading-module_loadingSpin__1Ys0m div {
	 transform-origin: 0.2rem 0.2rem!important;
	 animation: loading-module_loadingSpin__1Ys0m 1.2s linear infinite;
   }
   
   .loading-module_loadingSpin__1Ys0m div:after {
	   content: " ";
	   display: none;
	   opacity: 0!important;
	   position: absolute;
	   top: 0rem!important;
	   left: 0rem!important;
	   width: 0.10rem!important;
	   height: 0.2rem!important;
	   border-radius: 20%;
	   padding:0!important;
	   margin:0!important;
   }
   
   .loading-module_loadingSpin__1Ys0m div:nth-child(1){
	   opacity: 0!important;
   }   
   
   
   .worldWrap{
	   width:100%;
	   height: auto;
	   flex:0;
	   top: 23%;
	   position: absolute;
   }
   
   .titleWrap .shoplink{
	   display: block;
	   margin-left:0;
	   /* margin-top:.5rem; */
	   opacity: 0;
	   height: 0;
	   transition: all 1s ease-in-out;
	   position: relative;
	   top:50px;
   }
   
   .titleWrap .shoplink img{
	   margin-left:0;
	   margin-top:.5rem;
	   width:20px;
   }
   
   .titleWrap .shoplink.walkimg_m img{
	   margin-left:0;
	   margin-top:7.5rem;
	   width:50px;
   }
   
   .titleWrap .shoplink p{
	   -webkit-writing-mode: vertical-lr;
	   writing-mode: vertical-lr;
	   border-radius: 0;
	   line-height: 1.4;
	   font-size: .9rem;
   }
   
   
   
   /* .titleWrap a.titleLink p span.fadeInText{
	   font-size: .8rem;
	   padding:.03rem 0;
	   display: block;
   } */
   
   .titleWrap a.titleLink p span.fadeInText{
		  font-size: 1.3rem;
		  padding:.1rem 0;
		  display: block;
	  }
   
   .titleWrap a.titleLink p span.fadeInText:nth-child(12){
	   transform: rotate(90deg);
	   margin-left: 3px;
   }
   
   .titleWrap .titleLink p span.fadeInText{
		  font-size: .8rem;
		  padding:.03rem 0;
		  display: block;
	  }
	  
	  .titleWrap .titleLink p span.fadeInText:nth-child(12){
		  transform: rotate(90deg);
		  margin-left: 3px;
	  }
   
   .worldCircle{
		  width:360px;
		  height:360px;
		  border-radius: 50%;
		  position: relative;
		  overflow: hidden;
	  }
   
   .landWrap{
	   width:100%;	
	   height: 40%;
	   position: absolute;
	   bottom:0;
	   display: block;
	   /* overflow: hidden; */
   }
   
   .landWrap img {
	   width: 100%;
	   height: auto;
   }
   
   .landWrap img.homeLand {
	   width: 100%;
	   height: auto;
	   display: block;
	   position: absolute;
	   left: -25%;
	   bottom: 0;
	   z-index: 9;
   }
   
   
   #cheerMan{
	   width: 25%;
	   position: absolute;
	   right: 0%;
	   bottom: 20%;
	   z-index: 98;
	   display: none;
   }
   
   #cheerMan img.cheerMan{
	   width:100%;
	   height:auto;
   }
   
   .landWrap img.dotdot1 {
	   width: 45%;
	   height: auto;
	   display: block;
	   position: fixed;
	   right: 0;
	   top: 0;
   }
   
   .landWrap img.dotdot2{
	   width: 50%;
	   height: auto;
	   position: absolute;
	   left: 3%;
	   bottom: 5%;
   }
   
   #shopline-section-footer{
	   display: none!important;
   }
   
   .index-module_root__2h-p9 div{
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;	 
	 }
	 
	 .index-module_root__2h-p9{
		  padding:0px 4px!important;
		  width:50px!important;
		  border-radius:0!important;
		  height: auto!important;
		  display: flex!important;
		  align-items: center;
		  justify-content: center;
	  }
	  
	  .index-module_root__2h-p9 div:first-child{
		   background: transparent!important;
		   padding: 0px!important;
		   font-size: .9rem!important;
		   border-radius: 0px!important;
	   }
   
}