@charset "UTF-8";

/*-------------------------------------------------
title       :김치자원은행 소개
Create date :2023-01-27
-------------------------------------------------*/

.c010000 .top-visual:after { background:url('/bkri/img/sub/sub01/c010000-bg.jpg') no-repeat center top}
.c010000 .flexBox > * > * {border:none}
.c010000 .flexBox > * > * .desc {line-height:2; word-break:keep-all; word-wrap:break-word; text-align:justify}

@media screen and (max-width:768px) {
	
	.top-visual .txt {font-size:2rem}
	.c010000 .flexBox > * > * {margin:0; padding:0}
	.c010000 .flexBox > * > * .desc {word-break:break-all}
}

/* 연혁 */
.history{width:100%; position:relative}
.history:before {content:''; background-color:#ddd; width:2rem; height:1px; position:absolute; left:50%; top:0; transform:translateX(-50%)}
.history:after {content:''; background-color:#ddd; width:2rem; height:1px; position:absolute; left:50%; bottom:0; transform:translateX(-50%)}
.history .item {display:flex; width:100%; padding-top:13rem; position:relative}
.history .item:before {content:''; background-color:#ddd; width:1px; height:100%; position:absolute; left:50%; top:0;}
.history .item:first-child {padding-top:6rem}
.history .item > * {flex:1 1; width:50%}
.history .item .img {text-align:right; padding-right:10rem; margin-top:2rem}
.history .item .group {padding-left:10rem}
.history .item .when {font-size:6rem; font-weight:900; line-height:normal}
.history .item .con {margin-top:4.5rem}
.history .item .con .year {display:block; font-size:2.8rem; font-weight:800; position:relative; margin-bottom:1rem}
.history .item .con .year:before {content:''; background-color:#2149a6; border:4px solid #fff; border-radius:100%; width:1.8rem; height:1.8rem; position:absolute; left:-10.9rem; top:1.4rem; z-index:1}
.history .item .con .list li {display:flex; margin-bottom:0.7rem}
.history .item .con .list .month {color:#888; width:10.5rem; font-weight:800}
.history .item .con .list strong{font-weight:normal; width:calc(100% - 5.5rem); line-height:1.4; word-break:keep-all}

@media screen and (min-width:640px){
	.history .item:nth-child(even) {flex-direction:row-reverse}
	.history .item:nth-child(even) .img {padding:0 0 0 10rem; text-align:left}
	.history .item:nth-child(even) .group {padding:0 10rem 0 0; text-align:right}
	.history .item:nth-child(even) .con .year:before {left:auto; right: -10.9rem;}
	.history .item:nth-child(even) .con .list li {flex-direction:row-reverse}
}

@media screen and (max-width:768px){
	
	.history .item .img {padding-right:3rem}
	.history .item .group {padding-left:3rem}
	.history .item .when {font-size:5rem}
	.history .item .con .year:before {left:-3.9rem}
	.history .item:nth-child(even) .img {padding: 0 0 0 3rem}
	.history .item:nth-child(even) .group {padding: 0 3rem 0 0}
	.history .item:nth-child(even) .con .year:before {right:-4rem}		
	
}

@media screen and (max-width:640px){
	
	.history:before {left:2rem}
	.history .item:before {left:2rem}
	.history .item {flex-direction:column-reverse; padding-left:5rem}		
	.history .item:first-child {padding-top:2rem}
	.history .item > * {width:100%}
	.history .item .group {padding-left:0}
	.history .item .img {padding:0 !important}
	
}