@charset "utf-8";

#subVisual .wrapper{
	background:url(/img/subVisual/sub_04_bg.png) no-repeat;
	background-position:right bottom;
	background-size: 40%;
}

#banner{
	display:block;
}

.switch .wrapper{
	flex-direction: row-reverse;
}

.disease{
	position:relative;
}

.disease:before{
	position:absolute;
	content:'';
	width:100%;
	left:0;
	bottom:0;
	background-color:var(--blue03);
	display:block;
	z-index:-1;
}

.disease01:before{
	height:48%;
}

.disease02:before{
	height:42%;
}

.disease03:before{
	height:54%;
}

.disease04:before{
	height:50%;
}

.disease05:before{
	height:45%;
}

.disease06:before{
	height:40%;
}

.disease07:before{
	height:50%;
}

.disease08:before{
	height:55%;
}

.disease .wrapper{
	display:flex;
	justify-content: space-between;
}

.disease .dis_img{
	width:32%;
	margin:auto 0;
}

.disease .dis_img img{
	width:95%;
	height:auto;
}

.disease .dis_text{
	width:65%;
}

.disease .dis_info{
	font-size:1.125rem;
	line-height:1.5;
	color:var(--gray01);
	word-break:keep-all;
}

.disease .dis_cause h3{
	font-size:1.25rem;
	position:relative;
	padding-bottom:20px;
	margin-bottom:20px;
	font-weight:600;
	color:var(--blue01);
	display:flex;
	align-items:center;
}

.disease .dis_cause h3 span{
	width:20px;
	height:20px;
	display:flex;
	justify-content:center;
	color:var(--white);
	font-size:0.875rem;
	font-weight:600;
	background-color:var(--blue01);
	border-radius:50%;
	align-items:center;
	margin-right:10px;
}

.disease .dis_cause h3:after{
	position:absolute;
	content:'';
	width:100%;
	height:1px;
	left:0;
	bottom:0;
	background-color:var(--gray01);
	display:block;
}

.disease .dis_cause p{
	color:var(--gray01);
	font-size:1.125rem;
	word-break:keep-all;
	line-height:1.5;
	margin-bottom:10px;
}

.disease .dis_cause p.mg_b_none{
	margin-bottom:0;
}

.disease .dis_cause li{
	font-size: 1.125rem;
    line-height: 1.5;
    color: var(--gray01);
    word-break: keep-all;
}

.symptom .symptom_info{
	display:flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

.symptom .symptom_info li{
	background-color:var(--blue03);
	padding:20px 20px 50px 20px;
	border-radius:10px;
	width:calc((100% - 80px) / 5);
}

.symptom .symptom_info li .info_img{
	width:70px;
	height:70px;
	border-radius:50%;
	background-color:var(--white);
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
}

.symptom .symptom_info li h4{
	color: var(--blue01);
	font-size:0.75rem;
	font-weight:700;
	padding-bottom:20px;
	margin-bottom:20px;
	position:relative;
	font-family: 'GmarketSansMedium';
}

.symptom .symptom_info li h4::before{
	display:block;
	position:absolute;
	width:100%;
	height:1px;
	background-color:var(--blue01);
	bottom:0;
	left:0;
	content:'';
}

.symptom .symptom_info li p{
	font-size:1.25rem;
	font-weight:600;
	word-break:keep-all;
}

.symptom .symptom_info li p.info_sub_txt{
	font-size: 1rem;
    color: var(--gray01);
	font-weight:400;
	margin-top:10px;
	line-height:1.5;
}

.disease05 .dis_img{
	width:24%;
}

.disease07 .dis_img{
	width:18%;
}

.disease08 .dis_img{
	width:26%;
}

@media screen and (max-width:1300px){
	.symptom .symptom_info li h4{
		font-size:0.78rem;
	}

	.disease .dis_info br{
		display: none;
	}

	.disease .dis_cause br{
		display: none;
	}

	.disease .dis_cause br.br_block{
		display:block;
	}

	.disease01:before{
		height:43%;
	}

	.disease02:before{
		height:42%;
	}

	.disease03:before{
		height:55%;
	}

	.disease06:before{
		height:37%;
	}

	.disease07:before{
		height:48%;
	}

	.symptom .symptom_info li p br{
		display:none;
	}
}

@media screen and (max-width:1064px){
	.symptom .symptom_info li .info_img{
		width: 60px;
		height: 60px;
	}

	.symptom .symptom_info li h4{
		padding-bottom:15px;
		margin-bottom:15px;
	}

	.symptom .symptom_info li p{
		font-size:1.125rem;
	}

}

@media screen and (max-width:969px){
	#subVisual .wrapper{
		background-size:60%;
	}
	
	.symptom .symptom_info{
		justify-content: flex-start;
	}

	.symptom .symptom_info li{
		width: calc((100% - 60px) / 4);
	}

	 .disease:before {
        height: 60%;
    }

	.disease .wrapper{
		flex-direction: column;
	}

	.disease .dis_img{
		width:40%;
		margin:0 auto;
	}

	.disease05 .dis_img{
		width:35%;
	}

	.disease07 .dis_img{
		width:22%;
	}

	.disease08 .dis_img{
		width:29%;
	}

	.disease .dis_text{
		width:100%;
		margin-top: 30px;
	}

	.disease .dis_info{
		font-size:1rem;
	}

	.disease .dis_cause p{
		font-size:1rem;
	}

}

@media screen and (max-width:767px){
	 .symptom .symptom_info li {
        width: calc((100% - 40px) / 3);
    }
}

@media screen and (max-width:640px){
	#subVisual .wrapper{
		background-size:70%;
	}

	.symptom .symptom_info {
        justify-content: space-between;
		gap:0;
    }

	.symptom .symptom_info li{
		width:48%;
		margin-bottom:20px;
	}

	.symptom .symptom_info li:nth-child(9),
	.symptom .symptom_info li:nth-child(10){
		margin-bottom:0;
	}

	.disease .dis_cause h3{
		font-size:1.125rem;
		padding-bottom:10px;
		margin-bottom:10px;
	}

	.disease .dis_cause h3 span{
		width:18px;
		height:18px;
		font-size:0.7rem;
	}

	.disease .dis_img{
		width:60%;
	}

	.disease05 .dis_img{
		width:45%;
	}

	.disease07 .dis_img{
		width:27%;
	}

	.disease08 .dis_img{
		width:40%;
	}

	 .disease:before {
        height: 70%;
    }

	.symptom .symptom_info li p.info_sub_txt{
		font-size:0.875rem;
	}

	.disease .dis_info{
		font-size:0.933rem;
	}

	.disease .dis_cause p{
		font-size:0.933rem;
	}

	.symptom .symptom_info li{
		padding:20px;
	}

	.symptom .symptom_info li p {
        font-size: 1rem;
    }

}

@media screen and (max-width:460px){
	#subVisual .wrapper{
		background-size:85%;
	}

	.disease08:before{
		height:74%;
	}

	.disease08 .dis_img{
		width:47%;
	}
}