@charset "UTF-8";

/*-------------------------------------------------
title       :김치 유산균
Create date :2023-01-27
-------------------------------------------------*/

/*BKRI 자원 인용 논문정보*/
.c02030202 .flexBox > * > * {border:none; display:flex; padding:0}
.c02030202 .flexBox > * > * .img {padding-top:27.225%; position:relative; width:calc(100% - 54rem); max-width:54rem}
.c02030202 .flexBox > * > * .img img {position:absolute; left:0; top:0; width:100%; height:100%}
.c02030202 .flexBox > * > * .desc {background-color:#f1f1f1; text-align:center; width:100%}
.c02030202 .flexBox > * > * .desc .con {position:relative; top:50%; width:90%; margin:0 auto; transform:translateY(-50%)}
.c02030202 .flexBox > * > * .desc .con small {color:#3669b5; font-size:1.8rem; display:block; margin:2rem 0 0 0}

@media screen and (max-width:1024px) {
	
	.c02030202 .flexBox > * > * {display:block}
	.c02030202 .flexBox > * > * .img {max-width:none; width:100%; padding-top:70%}
	.c02030202 .flexBox > * > * .desc .con {transform:translateY(0); padding:5rem 0 0}
}



/*분양개요*/
.c02050600 .intro-step .step {display:flex; position:relative}
.c02050600 .intro-step .step:after {content:''; background-color:#ccc; width:70%; height:1px; position:absolute; left:50%; top:40%; transform:translateX(-50%); z-index:-1}
.c02050600 .intro-step .step > li {flex:1 1}
.c02050600 .intro-step .step > li > div {border-radius: 100%; border: 2px solid #17bcc0; background-color:#fff; display:block; position:relative; width:40rem; height:40rem; margin:0 auto}
.c02050600 .intro-step .step > li:first-child div {border:2px solid #3047a4;}
.c02050600 .intro-step .step > li > div strong {display: block; font-size: 2.6rem; font-weight: 800; position: absolute; top: 45%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; line-height:1.1}
.c02050600 .intro-step .step > li .num {color:#17bcc0;font-weight:800;font-size:2.8rem;position:absolute;top: 4rem;left: 50%;transform: translateX(-50%);}
.c02050600 .intro-step .step > li .icon {position: absolute; left: 50%; top: 11rem; transform: translateX(-50%);}
.c02050600 .intro-step .step > li:first-child .num {color:#3047a4;}
.c02050600 .intro-step .step > li .button {width: 35%;margin: 0 auto;position: absolute;left: 50%;top: 27rem;transform: translateX(-50%);text-align:center}
.c02050600 .intro-step .step > li .button a {background-color:#ddd; border:1px solid #ddd; border-radius:50rem; font-size:1.6rem; font-weight:600; color:#333}
.c02050600 .intro-step .step > li .button a:hover {background-color:#2149a6; color:#fff}
@media screen and (max-width:800px) {
	
	.c02050600 .intro-step .step:after {background:0}
	.c02050600 .intro-step .step {display: block}
	.c02050600 .intro-step .step > li {margin-bottom:2rem}
	.c02050600 .intro-step .step > li > div {width:35rem; height:35rem}
	.c02050600 .intro-step .step > li > div strong {font-size:2.4rem; top:55%}
}
@media screen and (max-width:370px) {

	.c02050600 .intro-step .step > li > div {width:28rem; height:28rem}
	.c02050600 .intro-step .step > li > div strong {font-size:2rem}
	.c02050600 .intro-step .step > li .num {top:3rem}
	.c02050600 .intro-step .step > li .icon {top:7rem}
	.c02050600 .intro-step .step > li .button {top:19rem}
	.c02050600 .intro-step .step > li .button i {display:none}
	
}



/*분양 > 미생물 재분양*/

.c02030203 .flexBox > * {border:none; margin:5rem 0}
.c02030203 .flexBox > * > * i {text-align:center; margin-bottom:3rem}
.c02030203 .flexBox > * > * .desc {text-align:center}

.circle-step {overflow:hidden; overflow-x:auto}
.circle-step .step {background:none; display:flex; padding:0; position:relative; min-width:130rem}
.circle-step .step:after {content:''; background-color:#ccc; width:80%; height:1px; position:absolute; left:50%; top:40%; transform:translateX(-50%); z-index:-1}
.circle-step .step > li {flex:1 1; padding:0; margin:0}
.circle-step .step > li > div {background-color:#fff; display:block; position:relative; margin:0px 21%; padding-top:58.147%}
.circle-step .step > li > div strong {border-radius:100%; border:2px solid #17bcc0; display:block; text-align:center; padding:7rem 2rem 0; position:absolute; top: 0; right: 0; bottom: 0; left: 0; line-height:1.2; work-break:keep-all}
.circle-step .step > li .num {color:#17bcc0; font-weight:900; font-size:2rem; position:absolute; top:3rem; left:50%; transform:translateX(-50%)}
.circle-step .step > li .txt {color:#666; font-size:1.6rem; display:block; text-align:center; padding:2rem 10% 0; word-break:keep-all; position:relative; line-height:1.4}
.circle-step .step > li .txt:before {content:''; border-radius:100%;  background-color:#17bcc0; width:1rem; height:1rem; position:absolute; top:-.5rem; left:50%; transform:translateX(-50%)}

.circle-step::-webkit-scrollbar {position:relative; height:3px;}
.circle-step::-webkit-scrollbar-thumb {background-color:#333; border:3px solid #333; border-radius:6px}
.circle-step::-webkit-scrollbar-track {background-color:#e5e5e5}

.board_info .form .btn .btn-write {width: 19rem;}

@media screen and (max-width:1300px) {
	
	.circle-step .step {padding-bottom:3rem}
}
/*자원검색*/
.flexBox02{display:flex;}
.flexBox02 a {padding:2rem;border:1px solid #ddd;text-align: center;}
.flexBox02 a img {width: 100%;}
.flexBox02 p{margin-left:4rem; width:100%;}
.flexBox02.no-pic p{margin-left:0;width: 100%;}
@media screen and (max-width:768px) {
	.flexBox02 {flex-direction:column;}
	.flexBox02 a img {width: 25rem;}
	.flexBox02 p{margin-left:0;margin-top:2rem}
}
.c0203010000 i > img {display:inline-block; max-width:59.7rem; margin-bottom: 1rem;}
.c0203010000 .desc{min-height: 7.5rem;}
.c0203010000.step-box.type2 .step > li strong{min-height:9.7rem; line-height: 1.2; font-size: 1.5rem;}

.micro.board-list td[aria-label="species"] a,.board-list td[aria-label="organism"] a {font-style:italic;}


@media screen and (max-width:1500px){
	.step-box .step {flex-wrap:wrap;}
}
@media screen and (max-width:1280px) {
	.c0203010000.step-box.type2 .step > li {width:calc(20% - 2rem); flex:0 auto;}
	.c0203010000.step-box.type2 .step > li:nth-child(n+6)  {margin-top:2rem}
	.c0203010000.step-box.type2 .step > li strong {min-height:5.5rem}
}
@media screen and (max-width:1024px) {
	.c0203010000 i > img{width:100%;}
}
@media screen and (max-width:768px) {
	.c0203010000.step-box.type2 .step > li strong {min-height:11.5rem}
	
}
@media screen and (max-width:767px) {
	.c0203010000.step-box.type2 .step > li strong {min-height:auto}
	.c0203010000.step-box.type2 .step > li{width:100%}
	
}