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


/* Button */

.btn, .btn.contact_btn{
    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{
	background-color: var(--primary-color);
	font-size: 24px;
    white-space: nowrap;
    font-weight: 300;
}

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


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

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

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


@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: #ffff;
	--gray900: #636363;
	--gray700: #7E7E7E;
	--gray500: #D4D4D4;
	--gray300: #EEEEEE;

	/* general backgroupd- color */
	--primary_LightGreen: #B3D0C0; 
	--primary_LightYellow: #E7DB82; 
	--beigeBG: #F6F5EF; 
	--purpleBG: #F7E4FE; 
	--redGrayBG:#f8e0e0;
	--pinkBG: #e8d7df; 
	--blueBG: #E3EEFF;
	--greenBG: #E3FEEF;
	--grayBG: #F0F0F0;
	--grayBG2: #FBFBFB;
	--yellowBG: #FFF8D5;
	

    --font-size: 16px;
}


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


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

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

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

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


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

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

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

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

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

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



/* works backgroupd- color */

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

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

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

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

.redGrayBG:hover{
	background-color: #d5b0b0;
	transition: all 0.5s ease;
}

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

.lightGray2:hover{
	background-color: #E0E0E0;
	transition: all 0.5s ease;
}




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


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

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

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

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

	}

	.footer_content.container{
        flex-direction: column;
    }
   
}


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

/* MV */
.hero.section.container{
	display: flex;
	position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 100%;
}


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

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

.hero_content{
	width: 40%;
	margin-right: 160px;
	margin-top: 50px;
	z-index: 5;
}


h4.hero__heading {
    margin-bottom: 80px;
}

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

  .mv_imgRight > img{
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
  }
  .mv_imgRight > img:first-child{
	z-index: 2;
	bottom: -80px;

  }

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

  img.mv_img {
    width: 100%;
}

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


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

    }

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

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

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

    .hero_content h4 {
        text-align: center; /* 描述居中 */
		margin-bottom: 40px;
    }

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

    img.mv_imgBG {
        width: 100%; /* 调整宽度适应屏幕 */
        top: 0; /* 顶部对齐 */
        position: relative; /* 去除绝对定位 */
    }

    .mv_imgRight > img:first-child {
        width: 70%; /* 调整第一个图片的宽度 */
        position: relative; /* 去除绝对定位 */
        bottom: auto; /* 移除底部定位 */
		display: block;
    }
}


@media(max-width: 480px){

	.hero.section.container {
        padding: 0px 16px;
		top: 20%;
    }

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

	.hero_content h2 {
		font-size: 32px;
		margin-top: 12px;
    	margin-bottom: 12px;
	}

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

	.hero_content .btn.btn--primary {
        margin-top: 0px;
    }

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

}

@media(max-width: 375px){
	.mv_imgRight > img:first-child{
		margin-top: 0px;
	
	  }

}


/* Top Page Work */

#top_work.work {
    margin: 0px 0px 160px 0px;
	padding-top: 160px;
}


.subtitle.top_subtitle{
	margin-bottom: 140px;
}

.work_list{
	display: flex;
	flex-wrap: wrap; /* Allows wrapping if the screen is too small */
    justify-content: space-between; /* Distributes space around items */
	margin-bottom: 56px;
	column-gap: 40px;
    row-gap: 40px;
}

.works_12col {
	padding: 80px;
    border-radius: 40px;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.works_6col{
	border-radius: 40px;
	overflow: hidden;
    flex: 0 0 48%;
	box-sizing: border-box; /* Includes padding and border in the element's total width */
}



/* Base state of the spans */
.text_btn span {
    transition: transform 0.3s ease;
}

/* Hover state for the <a> tag affecting the spans */
a.work_col:hover .text_btn span {
    transform: translateX(10px);
}

.work_img img{
	transition: transform 0.5s ease;
}

a.work_col:hover .work_img img {
    transform: translateY(-20px);
}

.works_12col .work_title {
    width: 30%;
}

.works_6col .work_title {
    width: 100%;
	height: 100%;
	padding: 40px;

}

.work_imgRight {
	width: 70%;
	position: absolute;
	height: 100%;
	right: -12%;
	top: -5%;
}

img.diagonalRight{
    width: 100%;
	position: absolute;
	top: 0px;
}

img.diagonalRight.OKTech{
    width: 70%;
	top: 160px;
}


img.strightlRight {
    width: 55%;
	position: absolute;
    right: 0px;
    top: -210px;
}

img.strightlRight.VVgallery {
    top: 210px;
    right: 120px;
}


.work_title h3 {
	line-height: 140%;
    margin-bottom: 24px;
	z-index: 2;
}

.work_title h4 {
	line-height: 140%;
    margin-bottom: 180px;
	z-index: 2;
}

@media(max-width: 1440px){
	#top_work.work {
		margin: 0px 72px 160px 72px;
	}
}

@media(max-width: 1031px){
	#top_work.work{
		margin: 0px 8px;
		padding-top: 80px;
	}

	.subtitle.top_subtitle {
		margin-bottom: 40px;
	}

	.works_12col {
		padding: 40px 24px;
	}

	.works_12col .work_title {
		width: 40%;
	}

	.work_title h4 {
		line-height: 120%;
		margin-bottom: 32px;
		font-size: 16px;
		margin-top: 16px;
	}

	.works_6col .work_title {
		padding: 24px 24px 40px 24px;
	}

	.work_list {
		column-gap: 32px;
	}

	img.strightlRight {
		top: -80px;
	}

}

@media (max-width: 768px) {

	#top_work.work{
		padding-top: 40px;
	}

    .work {
        margin-bottom: 40px;
    }

	.work_list {
        column-gap: 40px;
        row-gap: 40px;
		margin-bottom: 40px;
    }

	.works_6col{
		flex: 0 0 100%;
		padding: 40px 24px;
		width: 40%;
	}

	.works_6col .work_title {
        padding: 0px;
        width: 40%;
    }

	.work_title h3 {
		line-height: 120%;
		font-size: 20px;
	}

	img.strightlRight {
        top: -120px;
    }

	img.diagonalRight.OKTech {
    top: 90px;
    right: 70px;
	}

	img.strightlRight.VVgallery {
    top: 50px;
    right: 80px;
	}

}

@media (max-width: 480px){

	#top_work.work{
		margin: 0px 0px;
	}
	
	#top_work.work h2 {
        font-size: 32px;
    }

	.work_list {
		margin-bottom: 24px;
    }

	.work_list {
        column-gap: 24px;
        row-gap: 24px;
    }

	/* works_12col */

	.works_12col .work_title {
        width: 80%;
    }

	.work_imgRight {
		width: 70%;
		right: -20%;
		top: 20%;
	}

	img.diagonalRight {
        top: 30%;
        right: 12%;
    }

	img.diagonalRight.VVgallery {
        top: 60px;
        right: 24%;
    }

	img.diagonalRight {
		top: 30%;
	}

	/* works_6scol */
	
	.works_6col .work_title {
        width: 80%;
    }

	img.strightlRight {
		top: -80px;
		right: -40px;
		width: 60%;
    }

}