/*-------------------------*/
/* $Catalog 
---------------------------*/
/** 
 * Globel
 * Elements
 * Hero
 * Header
 * About
 * Quote
 * Skill
 * Experience
 * Work
 * Contact
 * Footer
 * Parallax graphic
**/



/*-------------------------*/
/* $Color 
---------------------------*/

:root {

	/* Text- color */
    --primary-black: #0B0B0A; 
    --base_white: #ffffff;
	--gray700: #545454;
	--gray500: #808080;
	--gray300: #9D9D9B;
	--gray100: #C5C5C5;

	/* general backgroupd- color */
	--primary_Green: #616051; 
	--mainBG: #F2F2F2; 
	--lightBG: #E9E8DD;

}


.greenBG{
	background-color: var(--primary_Green);
}


.blackBG{
	background-color: var(--primary-black);
}



/* Button */

.btn, .btn.contact_btn{
	background-color: var(--primary-black);
    COLOR: var(--base_white);
    WIDTH: 100%;
    PADDING: 24PX 0PX;
    BORDER-RADIUS: 16PX;
	border: none;
	display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
	transition: all 0.5s;
}


.btn.btn--primary{

	font-size: 24px;
    white-space: nowrap;
    font-weight: 300;
}

.btn:hover{
	background-color: var(--gray900);
}


.text_btn {
    align-items: center;
    display: inline-flex;
}

.scroll-up-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    padding: 16px 18px;
	border-radius: 50%;
    background-color: var(--primary_Green);
    color: var(--base_white);
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(20, 50, 20, 0.2);
    z-index: 9;
    display: none; /* 初始不顯示，滾動時顯示 */
	transition: all 1s;
}

.scroll-up-btn:hover {
    background-color: var(--gray100);
	color: var(--primary_Green);
}


@media(max-width: 960px){

	.btn{
		width: 100%;
	}

}

@media(max-width: 414px){

	.btn{
		width: 100%;
		padding: 16PX 24px;
	}

	.btn.btn--primary{
		font-size: 16px;
	}

	.scroll-up-btn {
		bottom: 20px;
		right: 20px;
	}


}
  

/* icon */

img.btn_icon {
    width: 32px;
    height: auto;
	margin-left: 24px;
}


@media(max-width: 414px){

	img.btn_icon {
		width: 24px;
	}

}




/*-------------------------*/
/* $Elements
---------------------------*/


/* background ~~~~~~~~~~~ */
.mv_bg{
    top: 0;
    left: 0;
    margin: 0px;
	min-height: 95vh;
	overflow: hidden;
	display: flex;
    justify-content: center;
    align-items: center;
}

.footer_bg{
    top: 0;
    left: 0;
    margin: 0px 24px 24px;
	min-height: 320px;
	border-radius: 40px;
}

@media (max-width: 960px){

	.footer_bg{
		height: 100%;
		margin: 0px 12px 12px 12px;

	}

}


/*-------------------------*/
/* $Hero
---------------------------*/

/* MV */
.hero.section.container{
	display: block;
    position: absolute;
    top: 160px;
	max-width: 100%;
	padding: 0px;
}


.hero_content h1 {
	font-size: 200px;
}

.hero_content h2 {
	font-size: 180px;
	margin-bottom: 56px;
	line-height: 0px;
}

.hero_content h5 {
	font-size: 24px;
	font-weight: 300;
	margin-bottom: 0px;
}

.hero_content{
	width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
	margin-top: 200px;
}


/* 測試 */

.hero.container {
	position: relative;
	width: 100vw;
	height: 100vh;
  }


  .tagcloud {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
  }
  .tagcloud img {
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 16px;
	object-fit: cover;
	left: 0;
	top: 0;
	will-change: transform;
	transition: filter 0.25s ease, opacity 0.25s ease;
  }
  .tagcloud img.blurry {
	filter: blur(3px);
	opacity: 0.55;
	z-index: 0;
  }
  .tagcloud img.front {
	z-index: 1;
  }
  .text {
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    z-index: 2;
	top: 20px;
  }
  .text.show {
	opacity: 1;
	transform: translateY(-10%);
    height: 100%;
    display: inline-block;
  }



@media(max-width: 1440px){

	.hero_content h1 {
        font-size: 120px; /* 调整标题大小 */
    }

	.hero_content h2 {
		font-size: 100px;
	}

}


@media(max-width: 960px){
    .hero.section.container {
        display: flex;
        flex-direction: column;
        align-items: center; /* 居中子元素 */
        justify-content: flex-end; /* 垂直居中 */
		position: absolute;
		transform: translateY(-50%);

    }

    .hero_content h4 {
        text-align: center; /* 描述居中 */
		position: unset;
		margin-bottom: 0px;
		font-size: 20px;
		right: 0px;
		margin-top: 0px;
    }

}


@media(max-width: 576px){

	.hero.section.container {
        top: 100px;
    }

	.tagcloud {
		top: 500px;
	}

	.hero_content h1 {
        font-size: 80px;
    }

	.hero_content h2 {
		font-size: 60px;
	}

	.hero_content h4 {
		font-size: 16px;
    }
}

@media(max-width: 378px){
	.hero_content h1 {
        font-size: 70px;
		margin-bottom: 0px;
    }

	.hero_content h2 {
		font-size: 40px;
		margin-top: 0px;
	}

}



/* Top Page Intro */

.main_title h5{
	font-size: 40px;
    font-weight: 200;
	line-height: 160%;
	margin-bottom: 80px;

}

.main_title.top_intro h5{
	margin-bottom: 24px;

}

#top_intro {
    margin: 0px 0px 260px 0px;
	padding-top: 200px;
	overflow: hidden;
}

#top_intro .container {
    padding: 0px;
	max-width: 100%;
}

#top_intro .intro_wrap {
    width: 80%;
    display: inline-flex;
    padding: 40px 160px 40px 280px;
    float: left;
    background-color: var(--lightBG);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    column-gap: 0px;
	transition: 0.5s all;
}


#top_intro .intro_wrap:hover{
	background-color: #e0dece;

}

#top_intro .intro_wrap p {
	margin-bottom: 24px;
 }

#top_intro .intro_link {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    top: 100px;
	left: 80px;
    height: 80px;
	font-size: 14px;
	transition: 0.5s all;
}

#top_intro .intro_link::before {
    content: "";
    width: 0.5px;
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-black);
    bottom: 100px;
}

#top_intro .intro_wrap:hover .intro_link{
    top: 120px;
}

@media(max-width: 1280px){
	
	#top_intro .intro_wrap {
		width: 80%;
    	padding: 40px 160px 40px 220px;
	}
}

@media(max-width: 960px){

	#top_intro {
		margin: 0px 0px 80px 0px;
		padding-top: 80px;
	}

	#top_intro .intro_wrap {
        width: 80%;
        padding: 40px 120px 40px 40px;
    }

	.main_title h5{
		font-size: 32px;
		line-height: 140%;
		margin-bottom: 24px;
	}
	

}


@media(max-width: 576px){

	.main_title h5{
		font-size: 24px;
		line-height: 120%;
	}

	#top_intro .intro_wrap {
		width: 90%;
        padding: 40px 24px 80px 24px;
		display: flex;
        flex-wrap: wrap;
		row-gap: 40px;
    }
	#top_intro .intro_link {
		writing-mode: unset;
		text-orientation: unset;
		left: 100px;
		height: 0px;
		top: 0px;
	}
	
	#top_intro .intro_link::before {
		content: "";
		width: 120px;
		height: 0.5px;
		position: absolute;
		right: 0px;
		left: unset;
		transform: translateX(-50%);
		background-color: var(--primary-black);
		top: 8px;
		margin-right: 12px;
	}

	#top_intro .intro_wrap:hover .intro_link{
		top: 0px;
		left: 120px;

	}


}



@media(max-width: 378px){
	#top_intro {
        padding-top: 40px;
    }

}


/* Top Page New Arrival */

.top_new {
    margin-bottom: 260px;
}

#top_new .container{
	max-width: calc(80% - 200px);
	padding: 0px;
}

.new_row, .product_row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 100%;
    column-gap: 32px;
	grid-template-rows: auto;
    row-gap: 32px;
}

.new_row{
	margin-top: 80px;

}

.new_img .img_label, .product_img .img_label{
    position: absolute;
    top: 24px;
    bottom: 0;
    text-align: right;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    height: fit-content;
    right: 24px;
    width: auto;
    padding: 12px 16px;
    vertical-align: middle;
    color: white;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
}


.img_wrap{
	width: 25%;
	transition: all 1s ease-in-out;
	
}

.new_row .img_wrap, .work_row .img_wrap{
	flex: 1 1 auto; /* 使項目寬度自動調整，不固定為四個項目 */
	box-sizing: border-box;
	margin-bottom: 16px; /* 項目之間的間隔 */
	text-decoration: none;
}

.new_row .img_wrap{
	width: 100%;
}



.new_img{
	display: flex;
}

.img_wrap img{
	width: 100%; /* 確保圖片填滿容器 */
  	min-height: 336px;
	border-radius: 24px;
	transition: all 0.5s ease-in-out;
	object-fit: cover;
}

.img_overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: heirate;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	opacity: 0;
	transition: .6s ease;
	
}

.img_wrap:hover .img_overlay{
	opacity: 0.9;

}

.img_overlay span {
    z-index: 10;
    display: flex;
    justify-content: center;
    font-size: 24px;
	font-weight: 300;
    top: 50%;
    transform: translateY(-50%);
	color: var(--gray700);
}



.new_row .img_wrap h5, .product_row .img_wrap .price_detail h5{
	margin-top: 4px;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 8px;
}

.new_row .img_wrap h5 span, .product_row .img_wrap h5 span{
	font-size: 18px;
    color: var(--primary-color);
    font-family: emoji;
    font-weight: 400;
}

.new_row h6.img_des, .product_row .product_txt h6.product_name{
	margin-top: 12px;
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 140%;
	font-weight: 400 !important;
}

.new_row .img_txt span, .product_row .product_txt span{
	color: var(--gray700);
	font-weight: 400;
	font-size: 12px;
}

.img_overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: heirate;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	border-radius: 24px;
	opacity: 0;
	transition: .6s ease;
	
}

.img_wrap:hover .img_overlay{
	opacity: 0.9;

}

.img_overlay span {
    z-index: 10;
    display: block;
    font-size: 24px;
	font-weight: 300;
    top: 50%;
    transform: translateY(-50%);
	color: var(--gray300);
    white-space: normal;
    margin: 0px 24px;
    text-align: center;
    line-height: 40px;
}



@media(max-width: 960px){

	#top_new .container {
		max-width: calc(100% - 80px);
	}

	.top_new {
		margin-bottom: 160px;
	}

	.new_row {
		margin-top: 0px;
	}

	.img_wrap h5 {
		margin-bottom: 4px;
		font-size: 16px;
	}

	h6.img_des {
		font-size: 14px;
	}

	.img_txt span {
		font-size: 14px;
	}

	.work_row .img_wrap {
        max-width: calc(33% - 32px);
    }

	.img_wrap img{
		height: 100%;
		object-fit: cover;
	}

	.product_img .img_label, .new_img .img_label{
        top: 12px;
        right: 12px;
        font-size: 12px;
    }


}

@media(max-width: 780px){

	#top_new .container {
        max-width: calc(100% - 40px);
    }

	.top_new {
		margin-bottom: 120px;
	}

	.new_row, .product_row {
        display: block;
        width: 100%;
    }

	.img_wrap img{
		height: 380px;
		object-fit: cover;
	}


	.img_wrap{
		height: fit-content;
	}

	.new_img {
		width: 100%;
		height: 80%;
	}

	.new_row.new_row1 {
		margin-bottom: 40px;
	}


}

@media(max-width: 576px){


	.top_new {
		margin-bottom: 80px;
	}

	.img_wrap img{
		height: 320px;
	}


	.img_wrap h5 {
		margin-top: 12px;
	}

	.new_row.new_row1 .img_txt, .new_row.new_row2 .img_txt {
		margin-bottom: 48px;
	}


}

@media(max-width: 378px){

	.img_wrap img{
		height: 240px;
	}
	
}


/* Top Page Review */

#top_stores {
    margin-bottom: 160px;
}

#top_stores .container{
	padding: 0px 24px;
}


.stores_banner {
    position: relative;
    left: 50%;
    background-color: var(--lightBG);
    padding: 80px 80px;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 40px;
}

.main_title.top_stores h5{
	margin-bottom: 24px;
	margin-top: 0px;

}

.store_buttons {
    margin-top: 40px;
	display: flex;
    justify-content: center;
    column-gap: 24px;
	row-gap: 16px;
	flex-wrap: wrap;
}

.store_buttons a {
    display: inline-flex;
    background-color: var(--mainBG);
    padding: 12px 24px;
    border-radius: 8px;
	transition: all 0.5s;
	border: 1px solid #e0dece;
}

.store_buttons a:hover {
    background-color: #e0dece;
}

.store_buttons a img{
	width: 100px;
}

  

@media(max-width: 960px){
	#top_stores .container {
		padding: 0px 12px;
	}
}

@media(max-width: 480px){

	.store_buttons{
		display: flex;
		flex-direction: column;
	}

	.store_buttons a {
		display: inline-flex;
		justify-content: center;
	}

	.stores_banner {
		padding: 40px 16px;
	}

}