@charset "UTF-8";

/*-------------------------------------------------
title       :유전체 정보
Create date :2023-03-24
-------------------------------------------------*/
#visual .desc .txt {display:none}

/*분양*/
.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 {font-size: 1.6rem; border-radius:100%; border:2px solid #17bcc0; display:block; text-align:center; padding:7rem 1rem 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}
.micro.board-list td[aria-label="species"] a,.board-list td[aria-label="organism"] a {font-style:italic;}
@media screen and (max-width:1300px) {
	
	.circle-step .step {padding-bottom:3rem}
}


/*분양개요*/
.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}
.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}
	
}
/*생물자원은행 개요*/
.c0801000000 .card-img {position:relative}
.c0801000000 .list { margin-top:3rem; text-align: center; }
.c0801000000 .list img { display: inline-block; max-width:49%; min-height: 100%; }
.c0801000000 .thumb {position: relative; padding:5rem}
.c0801000000 .thumb li { padding-right: 1rem; }
.c0801000000 .thumb li a { display: block; overflow: hidden; position: relative; height:11.8rem; border: 2px solid #fff; background-color: #000; transition: all 0.2s; }
.c0801000000 .thumb li a img { opacity: 0.7; transition: all 0.2s; }
.c0801000000 .thumb .active a { border-color: #555; }
.c0801000000 .thumb .active a img { opacity: 1; }
.c0801000000 .thumb img { transition: all 0.2s; }

.c0801000000 .nav{width:50%; margin:2rem auto 0}
.c0801000000 .nav .img {background-color:#000;}
.c0801000000 .nav .slick-slide { padding:0 .5rem}
.c0801000000 .nav .slick-current img {opacity:0.5}
.c0801000000 .title,
.c0801000000 .info {padding-right:20rem}
.c0801000000 .btnbox {position:absolute; right:2rem; top:3rem}

.c0801000000 .control_box {text-align:center; margin-bottom:5rem}
.c0801000000 .control_box .paging {border-radius:10rem; background-color:#eee; padding:.7rem 2rem 0.5rem; height:auto}
.c0801000000 .controller .control {display:none}
.c0801000000 .controller .slick-arrow {border:1px solid #333; width:6rem; height:6rem; line-height:3; position:absolute}
.c0801000000 .controller .slick-arrow:hover {border:1px solid #368aff}
.c0801000000 .controller .slick-disabled {border:1px solid #ddd !important}
.c0801000000 .controller .slick-disabled:before {color:#ddd}
.c0801000000 .controller .prev {top:40%; left:0}
.c0801000000 .controller .next {top:40%; right:0}

/* ENG Board Custom */
.board_info .form .btn .btn-write {width:19rem}


@media ( max-width: 1024px ){
	
}

@media screen and (max-width:768px){
}