@charset "UTF-8";


/*인사말*/
.c010100 {border:1px solid #e5e5e5; padding:2.5rem }
.c010100 .desc {padding:9rem; color:#4b4b4b; font-weight:300; line-height:2; word-break:keep-all}
.c010100 .desc strong {display:block; font-size:3.8rem; font-weight:normal; color:#53461d; margin-bottom:6.8rem}
.c010100 .desc strong span {color:#000;}
.c010100 .desc span.txt {display:block; font-size:1.7rem; color:#000; font-weight:normal}

@media screen and (max-width:768px){
	
	.c010100 .desc {padding: 2rem;}
}

/*경영이념*/
.c010200 {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%}
.c010200 .group {border:1px solid #ccc; border-radius:0.5rem; padding:7.5rem 4rem 4rem; width:calc(33.333% - 3.5rem)}
.c010200 .group i {border-radius:100%; display:block; width:16rem; height:16rem; line-height:16rem; margin:0 auto; text-align:center}
.c010200 .group .title {display:block; font-size:2.4rem; font-weight:700; text-align:center; line-height:1.4; margin-top:3.5rem}
.c010200 .group .title small {color:#ddd; display:block; font-size:2rem}
.c010200 .group .desc {border-top:1px solid #ddd; margin-top:4rem; padding-top:1.5rem}
.c010200 .group .desc li {font-size:1.9rem; line-height:1.4}
.c010200 .group .desc li + li {margin-top:1.5rem}
.c010200 .group .desc li strong {color:#333; display:block}
.c010200 .group .desc li span {color:#666; display:block; margin-top:0.5rem; position:relative; padding-left:1rem}
.c010200 .group .desc li span:before {content:''; width:0.5rem; height:1px; background:#666; position:absolute; left:0; top:1.3rem}

.c010200 .group01 i {background-color:#4acb4f}
.c010200 .group01 .title {color:#33a839}
.c010200 .group02 i {background-color:#febc35}
.c010200 .group02 .title {color:#E87209}
.c010200 .group03 i {background-color:#36c5d3}
.c010200 .group03 .title {color:#0da1b0}
@media screen and (max-width:1024px){
	.c010200 .group {padding:4rem 3rem; width:calc(33.333% - 1.5rem)}
	.c010200 .group i {width:12rem; height:12rem; line-height:12rem}
	.c010200 .group .title {margin-top:1.5rem}
	.c010200 .group .desc {margin-top:2rem}
}
@media screen and (max-width:768px){
	.c010200 .group {width:100%; margin-bottom:2rem}
}


/*연혁*/
.history .article > div {display:flex; flex-wrap:wrap; position:relative; justify-content: space-between;}
.history .article > div:last-child {padding-bottom:5rem}
.history .article > div:last-child:after {content:''; background-color:#fff; border-top:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; position:absolute; left:50%; bottom:0; width:1.5rem; height:0.5rem; transform:translateX(-50%); z-index:1}
.history .article .img {padding:3rem 3.5rem 0 0; width:45%}
.history .article .img i {display:inline-block; position:relative}
.history .article .img i:after {content:''; background-color:#f7f7f7; width:100%; height:100%; position:absolute; right:-3.5rem; top:-4rem; z-index:-1}
.history .article .item {padding:0 0 0 5rem; margin-top:4rem; position:relative; width:50%}
.history .article .item:before {content:''; background-color:#febc35; border:0.8rem solid #f5eddf; border-radius:100%; position:absolute; left:-1.5rem; top:-1.5rem; width:3rem; height:3rem; z-index:2}
.history .article .item:after {content:''; width:1px; height:calc(100% + 15rem); background-color:#d4d4d4; position:absolute; left:0; top:0}
.history .article .item > ul {margin-top:-1rem}
.history .article .item ul li {clear:both; display:flex; flex-wrap:wrap; font-size:1.5rem; overflow:hidden; line-height:normal; margin-bottom:.7rem; word-break:keep-all}
.history .article .item ul li strong {display:block; float:left; font-size:2.2rem; width:10rem}
.history .article .item ul li .desc {float:right; width:calc(100% - 10rem); padding:0.5rem 0 0 11rem; position:relative}
.history .article .item ul li .desc span {position:absolute; left:0; color:#333}
.history .article .item ul li .desc p {color:#333; margin-bottom:0.5rem; width:100%}
.history .article .item ul li .desc p small {color:#999; display:block; font-size:1.2rem}

@media (min-width:769px){
	.history .article > div:nth-child(even) {flex-direction:row-reverse; padding-top:10rem}
	.history .article > div:nth-child(even) .data strong {text-align:right}
	.history .article > div:nth-child(even) .data i:after {left:auto; right:-3.5rem}
	.history .article > div:nth-child(even) .item {padding:0 5rem 0 0; text-align:right}
	.history .article > div:nth-child(even) .item:before {left:auto; right:-1.5rem}
	.history .article > div:nth-child(even) .item:after {left:auto; right:-1px}
	.history .article > div:nth-child(even) .item ul li {flex-direction:row-reverse}
	.history .article > div:nth-child(even) .item ul li .desc {float:left}
	.history .article > div:nth-child(even) .item ul li strong {float:right}
	.history .article > div:nth-child(even) .item ul li .desc span {float:right; padding-right:0; padding-left:3rem; text-align:left}
	.history .article > div:nth-child(even) .item ul li .desc p {text-align:right}
}

@media (max-width:820px){
	.history .article > div:last-child {padding-bottom:0}
	.history .article > div:last-child:after {left:2rem}
	.history .article > div > * {width:100% !important}
	.history .article .data {padding:0}
	.history .article .data strong {font-size:5rem}
	.history .article .data i {width:100%; max-height:35rem; overflow:hidden}
	.history .article .data img {display:block; width:100%}
	.history .article .item {margin-left:2rem; padding-left:3rem; padding-right:2rem}
	.history .article .item:after {height:100%}
	.history .article .item > ul > li {margin-bottom:2rem}
	.history .article .item ul li strong {float:none; font-size:2.4rem; margin-bottom:0.5rem}
	.history .article .item ul li .desc {float:none; width:100%}
}