@charset "utf-8";


.subvisual{
    width: 100%;
    height: 560px;
    position: relative;    
}
.about{
    background: url(/img/about_subvisual.jpg) no-repeat center /cover;
}
.recruit{
    background: url(/img/recruit_subvisual.jpg) no-repeat center /cover;
}
.subvisual_estimate{
    background: url(/img/estimate_subvisual.jpg) no-repeat center /cover;
}
.subvisual_news{
    background: url(/img/news_subvisual.jpg) no-repeat center /cover;
}
.subvisual_data_room{
    background: url(/img/data_room_subvisual.jpg) no-repeat center /cover;
}
.subvisual_product{
    background: url(/img/product_subvisual.jpg) no-repeat center /cover;
}
.subvisual::after{ 
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.45);
    position: relative;
    content: '';
    display: block;
    left: 0;
    top: 0;
    z-index: 0;

}
.sub_tit{
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%,-50%);
    z-index: 3;
}
 .sub_tit h2{
    font-size: 60px;
    color: var(--white);
    font-weight: 700;
    
}
.subnav{
    width: 100%;
    background: #f5f5f5;
	position: relative;
	z-index: 2;
	margin-top: -1px;
}
.subnav .wrapper{
    display: flex;
}
.subnav .wrapper .home{
    width: 85px;
    background: #1e2d6e;
   
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav_depth{
    position: relative;
    width:235px;
    cursor: pointer;
 
}
.nav_depth span{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 500;

}
.depth01 span{
 
    padding:22px 40px;
}

.depth02 span{
    font-weight: 700;
    color: #1e2d6e;
  padding:22px 20px;
}

.nav_depth span .arrow{
    width: 15px;
    height: 19px;
    background: url(/img/arrow.png) no-repeat center;
    transition: all 0.5s;
   
}
.nav_depth.rotate .arrow{
    transform: rotate(180deg);

}
.depth01 ul, .depth02 ul{
    position: absolute;
    width: 100%;
    padding: 17px 0  ;
    background: #f5f5f5;
    left: 0;
    display: none;
	top:90%;
	z-index:30;

}


.nav_depth ul li a{
    display: block;
    padding: 13px 20px;
	font-size:16px;
	font-weight:500;
	transition:all 0.3s;
	color:var(--gray01);
	line-height:1;
}
.depth01 ul li a{
    padding: 13px 40px;
}
.nav_depth ul li a.on{
   font-weight:700;
   color:var(--navy);
}
.nav_depth ul li a:hover{
   /* font-weight:700; */
   color:var(--navy);
}

@media screen and (max-width: 1400px){
	.subnav .wrapper{ width: 100%; }
}

@media screen and (max-width: 1024px){
 .subvisual{
        height: 460px;
    }
.subnav{
height: 65px;
}
.nav_depth span{
 padding: 17px 25px ;
}
.subnav .wrapper .home{
    width:70px;
    height: 100%;
   
}
}

@media screen and (max-width: 900px){
	.sub_tit{
		top: 55%;
	}

	.subvisual{
		height: 400px;
	}
	

	.sub_tit h2{
		font-size: 50px;
	}

	.subnav{
		height: 60px;
	}
	.subnav .wrapper{
		width: 100%;
	}
	.nav_depth{
		width: 205px;
	}
	.nav_depth span {
        padding: 16px 25px;
		font-size: 16px;
    }
	.depth01 ul li a {
		padding: 13px 30px;
	}
}


@media screen and (max-width: 767px){
	.subvisual{
		height: 350px;
	}

	.sub_tit h2{
		font-size: 45px;
	}
}

@media screen and (max-width: 500px){
    .subvisual{
        height: 270px;
    }
    .subvisual .sub_tit h2{
        font-size: 35px;
    }
.subnav .wrapper{
	width: 100%;
		  padding-left: 0% !important;
		  padding-right: 0% !important;
	}
	.subnav{
	height: 50px;
	}
	.subnav .wrapper .home{
		width: 55px;
		height: 100%;
	   
	}

	.subnav .wrapper .home img{
		width: 22px;
	}
	.nav_depth span{
	padding: 15px ;
	font-size: 14px;
	}
	.nav_depth{
	width: calc((100% - 55px) / 2);

	margin-left: 0;
	}

	.depth01 ul, .depth02 ul{
		padding: 10px 0;
	}

	.nav_depth ul li a{
	font-size:13px;
	padding: 10px 20px;
	}

	.subvisual .sub_tit h2{
		font-size: 35px;
	}

	.nav_depth span .arrow{
		width: 13px;
		height: 7px;
	}
}
@media screen and (max-width: 340px){
.subnav{
display: none;
}
}