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





/* Button */

.btn, .btn.contact_btn{
	background-color: var(--primary-color);
    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: 18px 24px;
	border-radius: 50%;
    background-color: var(--primary_Green);
    color: var(--base_white);
    cursor: pointer;
    font-size: 24px;
    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(--gray500);
	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;
	}

}


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

:root {

	/* Text- color */
    --primary-color: #0D0E0D; 
    --base_white: #ffffff;
	--gray900: #7E7E7E;
	--gray700: #797878;
	--gray500: #BDBDBD;
	--gray300: #EEEEEE;

	/* general backgroupd- color */
	--primary_Green: #445D51; 
	--beigeBG: #DEE0DF; 

}


.gray900{
	color: var(--gray900);
}

.gray700{
	color: var(--gray700);
}

.gray500{
	color: var(--gray500);
}


.gray300{
	color: var(--gray300);
}

.beigeBG{
	background-color: var(--beigeBG);
}

.purpleBG{
	background-color: var(--purpleBG);
}

.pinkBG{
	background-color: var(--pinkBG);
}

.blueBG{
	background-color: var(--blueBG);
}

.grayBG{
	background-color: var(--grayBG);
}

.yellowBG{
	background-color: var(--yellowBG);
}

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


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



/* works backgroupd- color */

.lightPink{
	background-color: var(--pinkBG);
	transition: all 0.5s ease;
}

.lightPink:hover{
	background-color: #e5cdcd;
}

.lightGreen{
	background-color: var(--greenBG);
	transition: all 0.5s ease;
}

.lightGreen:hover{
	background-color: #bad5c6;
}

.lightYellow{
	background-color: var(--yellowBG);
	transition: all 0.5s ease;
}

.lightYellow:hover{
	background-color: #e9dfad;
}

.lightBlue{
	background-color: var(--blueBG);
	transition: all 0.5s ease;
}

.lightBlue:hover{
	background-color: #c2d3e0;
}

.lightPruple{
	background-color: var(--purpleBG);
	transition: all 0.5s ease;
}

.lightPruple:hover{
	background-color: #d8c6de;
}

.lightGray{
	background-color: var(--grayBG);
	transition: all 0.5s ease;
}

.lightGray:hover{
	background-color: #cbc9c9;
	transition: all 0.5s ease;
}




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


/* background ~~~~~~~~~~~ */
.mv_bg{
    top: 0;
    left: 0;
    margin: 24px 24px 24px 24px;
	min-height: 110vh;
	border-radius: 80px;
	/* overflow: hidden; */
	display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
}

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

@media (max-width: 960px){
	.mv_bg{
		border-radius: 40px;
		margin: 12px;
	}

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

	}

}


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

/* MV */
.hero.section.container{
	display: block;
    position: absolute;
	right: 0;
    bottom: 0;
    left: 0;
	top: 50%;
    transform: translateY(-50%);
    margin: auto;
}


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

.hero_content h2 {
	font-size: 120px;
	margin-bottom: 0px;
}

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

.hero_content h4 {
    position: absolute;
    right: 0px;
	margin-top: 0px;
}

.mv_imgRight{
	position: relative;
	width: 100%;
  }

  .mv_imgRight > img{
    left: 50%;
    transform: translateX(-50%);
    margin-top: 56px;
  }

  img.mv_imgBG{
	position: absolute;
	top: -20%;
  }

@media(max-width: 1440px){
	.hero.section.container {
		padding: 0px 80px;
	}

	.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: center; /* 垂直居中 */
        left: 0px;
        transform: unset;
		position: absolute;
		top: 0;
		padding: 0px 16px;

    }

    .hero_content, .mv_imgRight {
        width: 100%; /* 充满容器宽度，去除原有宽度设置 */
        margin: 0 auto; 
        text-align: center; 
		margin-top: 100px;
    }

	.mv_imgRight{
		margin-top: 40px;
	}

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

    .hero_content .btn.btn--primary {
        position: relative; /* 去除绝对定位，使用相对定位 */
        margin-top: 20px; /* 增加顶部外边距 */
    }

    .mv_imgRight > img:first-child {
        width: 50%; /* 调整第一个图片的宽度 */
		display: block;
    }

	.mv_imgRight > img {
		margin-top: 16px;
	}

}

@media(max-width: 768px){
	.mv_imgRight > img:first-child {
        width: 70%;
    }
}

@media(max-width: 576px){

	.hero.section.container {
        top: 12%;
    }

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

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

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

	.mv_imgRight > img:first-child {
        width: 100%;
    }
}

@media(max-width: 378px){

	
	.hero.section.container {
        top: 10%;
    }

	.hero_content h1 {
        font-size: 70px;
		margin-bottom: 0px;
    }

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

	.mv_imgRight > img {
        margin-top: 0px;
    }


}



/* Top Page Intro */

#top_intro {
    margin: 120px 0px 200px 0px;
	overflow: hidden;
    position: relative;

}

#top_intro .intro_txt {
    width: 800px;
    display: block;
    margin: 0px auto;
}

#top_intro .intro_img {
    display: grid;
    margin: 0 auto;
    margin-top: 80px;
    justify-content: center;
    column-gap: 24px;
    grid-template-columns: repeat(3, 1fr);

}

#top_intro .intro_img img{
	width: 100%;
	aspect-ratio: 8/10;
	object-fit: cover;
}

@media(max-width: 960px){

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

	#top_intro .intro_txt {
		width: 100%;
		padding: 0px 64px;
	}
	
	#top_intro .intro_img {
		column-gap: 12px;
		margin-top: 40px;
		width: 100%;
	}

	#top_intro .intro_img img {
		width: 100%;
		aspect-ratio: 1 / 1;
	}

}

@media(max-width: 780px){

	#top_intro {
		margin: 120px 0px 120px 0px;
		
	}

	#top_intro .intro_txt {
		width: 100%;
		padding: 0px;
	}

	#top_intro .intro_img {
        width: 100%;
    }
}

@media(max-width: 576px){

	#top_intro {
		margin: 0px 0px 80px 0px;
		
	}

	#top_intro .intro_txt {
        padding: 0px;
    }

	#top_intro .intro_img {
        width: 100%;
    }
}



@media(max-width: 378px){


}


/* Top Page New Arrival */

.top_new {
    margin-bottom: 200px;
}

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

.new_row, .work_row{
    display: grid;
	grid-template-columns: repeat(4, 1fr);
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0px auto;
    margin-top: 80px;
	margin-bottom: 80px;
	
}

.new_row{
	justify-content: flex-start;
    gap: 32px;
	
}

.work_row{
    gap: 48px; /* 調整項目之間的間隔 */
	
}

.new_row:last-child{
	margin-bottom: 0px;
}

.new_row a:last-child {
    margin-right: -32px;
}

.img_wrap{
	width: 100%;
	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{
	max-width: 100%; /* 每行最多顯示四個項目，並保留間隔 */
}

.work_row .img_wrap{
	max-width: 100%; /* 每行最多顯示四個項目，並保留間隔 */
}

.new_img{
	display: flex;
}

.img_wrap img{
	width: 100%; /* 確保圖片填滿容器 */
  	height: auto;
	transition: all 0.5s ease-in-out;
}

.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);
}



.img_wrap h5{
	margin-top: 16px;
	font-weight: 500;
	margin-bottom: 12px;
}

h6.img_des{
	margin-top: 0px;
	margin-bottom: 4px;
	font-weight: 400 !important;
}

.img_txt span{
	color: var(--gray700);
	font-weight: 300;
}



@media(max-width: 960px){

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

	.new_row:last-child {
		margin-bottom: 80px;
	}

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


	.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:100%;
    }


}

@media(max-width: 780px){

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

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

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

	.img_txt {
		margin-bottom: 48px;
	}

	.img_wrap{
		height: fit-content;
	}

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

}



/* Top Page Review */

.top_review{
	overflow: hidden;
}
.review_card {
	position: relative;
	left: 50%;
    transform: translateX(-50%);
    width: 50%;
    background: rgb(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    z-index: 1;
	border-radius: 40px;
	margin-bottom: -380px;
}

.review_card img {
    position: absolute;
	top: 0;
    display: flex;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    opacity: 0.2;
    justify-content: center;
}

.review_card .border_bg{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    z-index: -1;
    border: 1px solid transparent;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0)70%, rgba(68, 93, 81, 1)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

img.review_bg{
	width: 100%;
	display: flex;
}

.review_card_content{
	padding: 40px 40px 24px 40px;
	margin-bottom: 80px;
}

.review_card_content h3{
	text-align: center;
	margin-bottom: 32px;
}

.review_card_content p {
    font-size: 24px;
    font-weight: 300;
    line-height: 40px;
    text-align: center;
	margin-bottom: 24px;
}

.review_txt{
	height: auto;
}

.review_txt p::before {
	content: "";
    margin-right: 12px;
    opacity: 0.5;
    background-image: url(../img/icons/comma_24_1.svg);
    background-size: 20px 24px;
    display: inline-block;
    width: 20px;
    height: 22px;
    background-repeat: repeat-y;
  }
  
.review_txt p::after {
	content: "";
    margin-left: 12px;
    opacity: 0.5;
    background-image: url(../img/icons/comma_24_2.svg);
    background-size: 20px 24px;
    display: inline-block;
    width: 20px;
    height: 22px;
    background-repeat: repeat-y;
  }

.review_txt span{
	text-align: center;
	display: grid;
	margin-bottom: 12px;
}

.review_txt .review_name{
	font-size: 20px;
	color: var(--gray700);
	font-weight: 300;
}

.review_dots {
	text-align: center;
	margin-top: 10px;
  }
  
  .dot {
	cursor: pointer;
	height: 8px;
	width:8px;
	margin: 0 4px;
	background-color: var(--primary_Green);
	opacity: 0.2;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
  }
  
.review_dots .active, .dot:hover {
	background-color: var(--primary_Green);
	opacity: 1;
  }
  

  @media (max-width: 960px){

	.review_card {
		width: 80%;
	}

	.review_card_content {
		padding: 40px 40px 24px 40px;
	}


	.top_new {
		margin-bottom: 80px;
	}

	.review_card {
		margin-bottom: -200px;
	}

  }


  @media (max-width: 768px){
	.top_review {
		overflow: hidden;
		padding: 200px 0px 0px 0px;
	}

	.review_card {
        width: 100%;
		top: -80px;
    }

	.top_review {
        overflow: hidden;
        padding: 80px 0px 0px 0px;
    }

	.top_new {
		margin-bottom: 0px;
	}

  }

  @media (max-width: 576px){

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

	.review_card_content p {
		font-size: 16px;
		line-height: 22px;
	}

	.review_txt .review_name{
		font-size: 14px;
	}

	.review_card_content {
        padding: 40px 16px 24px 16px;
    }

	.top_review {
        overflow: hidden;
        padding: 0px 0px 0px 0px;
    }

	.review_card {
        top: 0px;
		margin-bottom: 0px;
    }

	.review_card_content {
		margin-bottom: 0px;
	}

  }


  @media (max-width: 378px) {
    #top_new .container {
        max-width: calc(100% - 24px);
    }

	.review_card_content {
        padding: 40px 16px 16px 16px;
    }

	.review_card_content p {
		font-size: 16px;
	}

	.review_txt .review_name {
		font-size: 14px;
	}

	
}