@charset "utf-8";

#subVisual{
	width:100%;
	height:500px;
	border-radius: 0 0 100px 100px;
	background-color:var(--blue03);
	position:relative;
	overflow:hidden;
}

#subVisual::after{
	display:block;
	content:'';
	width:664px;
	height:332px;
	background-color:#59a0fb;
	border-top-radius:50%;
	position:absolute;
	left:10%;
	top:50%;
	filter: blur(100px);
	opacity: 0.3;
}

#subVisual .wrapper{
	position:relative;
}

#subVisual .tit-box{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}

#subVisual .tit-box .tit strong{
	font-size:2.8125rem;
}

#subVisual .tit-box .tit{
	margin-top:40px;
}

.sub_nav{
	margin-top:-40px;
	position:relative;
}

.sub_nav .wrapper>ul{
	display:flex;
	width:100%;
	border-radius:40px;
	height:80px;
	border:1px solid var(--blue02);
	background-color:var(--white);
}

.sub_nav .wrapper .home{
	width:7%;
	background-color:var(--blue03);
	display:flex;
	justify-content:center;
	align-items: center;
	border-radius: 40px 0 0 40px;
}

.sub_nav .wrapper .home i{
	color:var(--blue01);
	font-size:1.125rem;
	
}

.sub_nav .breadcrumb  > li{
	position: relative;
	height: 100%;
}

.sub_nav .breadcrumb > li span{
	font-size: 1rem;
	cursor: pointer;
	color:#666;
	display: flex;
    gap: 80px;
    align-items: center;
    height: 100%;
    padding-left: 20px;
}

.sub_nav .breadcrumb .menu-list{
	position: absolute;
    top: 78px;
    width: 100%;
    border: 1px solid var(--blue03);
    background-color: var(--white);
    z-index: 1;
	display:none;
}

.sub_nav .breadcrumb .menu-list li a{
	display: block;
    padding: 20px 20px;
    border-bottom: 1px solid var(--blue03);
	font-size:1rem;
	color:#666;
}

.sub_nav .breadcrumb .menu-list li a:hover{
	color:var(--blue01);
	background-color: var(--blue03);
	font-weight:600;
}

.sub_nav .open_list em{
	transform: rotate(90deg);
    transition: 0.3s;
}

.bg{
	background-color:var(--blue03);
}

.blue{
	color:var(--blue01) !important;
}

@media screen and (max-width:1100px){
	#subVisual{
		height:450px;
		border-radius:0 0 80px 80px;
	}

	.sub_nav{
		margin-top:-35px;
	}
	
	.sub_nav .wrapper>ul{
		height:70px;
	}

	#subVisual .tit-box .tit strong{
		font-size:2.5rem;
	}

	#subVisual::after{
		width:400px;
		height:200px;
		top:58%;
	}
}

@media screen and (max-width:767px){
	#subVisual{
		height: 400px;
        border-radius: 0 0 50px 50px;
	}

	#subVisual .wrapper{
		background-position:right 70%;
		background-size:auto 70%;
	}

	.sub_nav .wrapper .home{
		width:12%;
	}

	.sub_nav .breadcrumb > li span{
		gap:60px;
	}

	#subVisual .tit-box .tit strong{
		font-size:1.875rem;
	}
	
}

@media screen and (max-width:640px){
	#subVisual {
        height: 350px;
        border-radius: 0 0 30px 30px;
    }

	#subVisual .wrapper {
        background-position: right 60%;
        background-size: auto 50%;
    }

	.sub_nav .breadcrumb .menu-list{
		top:58px;
	}

	.sub_nav .breadcrumb .menu-list li a{
		padding:15px 10px;
		font-size: 0.75rem;
	}

	.sub_nav .breadcrumb > li span{
		gap:25px;
	}

	 .sub_nav .wrapper .home {
        width: 18%;
    }

	.sub_nav .wrapper>ul {
        height: 60px;
    }

	.sub_nav{
		margin-top:-30px;
	}

}

@media screen and (max-width:460px){
	.sub_nav .breadcrumb > li span {
        gap: 15px;
    }
}

.tit h3{
	font-size:2.8125rem;
	font-weight:600;
	
	word-break: keep-all;
}

.tit h3 strong{
	font-size:inherit;
	font-weight:400;
	color:var(--gray01);
}

.tit .sub_tit{
	font-size:1.125rem;
	color:var(--gray01);
	line-height:1.5;
	margin-top:30px;
	word-break:keep-all;
}

.red{
	color:#df0202;
	font-size:1rem;
	word-break: keep-all;
}

.bg_line{
	border-bottom:1px solid var(--blue05);
}

@media screen and (max-width:1300px){
	.tit h3{
		font-size:2.5rem;
	}

	.tit .sub_tit{
		font-size:1rem;
	}
}

@media screen and (max-width:969px){
	.tit .sub_tit{
		margin-top:20px;
	}
}

@media screen and (max-width:767px){
	.tit h3{
		font-size:1.875rem;
	}

	#subVisual::after{
		display:none;
	}
}

@media screen and (max-width:640px){
	.red{
		font-size:0.85rem;
	}

	.sub_nav .breadcrumb > li span{
		font-size:0.875rem;
	}

	.tit .sub_tit br{
		display:none;
		word-break:keep-all;
	}
}

.tit_center{
	text-align:center;
}

@media screen and (max-width:320px){
	.tit h3 {
        font-size: 1.714rem;
    }
}