@charset "UTF-8";

/*광주학체험센터 안내*/
.c020101 .graph {margin:-1rem -1rem 4rem; padding-top:1rem}
.c020101 .graph p {background-color:#2d3885; border-radius:100%; width:26.5rem; height:26.5rem; color:#fff; font-size:2rem; text-align:center; padding:5rem 3rem 3rem; position:relative; line-height:1.2; margin:0 auto 3rem; word-break:keep-all}
.c020101 .graph p:before {content:''; border-left:1px solid #ddd; width:1px; height:4rem; position:absolute; left:50%; bottom:-4rem}
.c020101 .graph p i {display:block; margin:0 auto 2rem; text-align:center; width:6rem}
.c020101 .graph ul {border-spacing:1rem; display:table; width:100%; table-layout:fixed; padding-top:4rem}
.c020101 .graph li {background-color:#f3f4f8; color:#333; display:table-cell; line-height:1.4; padding:3rem; position:relative; text-align:center; word-break:keep-all}
.c020101 .graph li:before {content:''; border-top:1px solid #ddd; border-left:1px solid #ddd; width:103%; height:4rem; position:absolute; top:-4rem; left:50%}
.c020101 .graph li:last-child:before {border-top:0}

.c020101 .oper-program {border:1px solid #ccc; display:table; table-layout:fixed; width:100%; margin-top:-1px}
.c020101 .oper-program .box {border:0; display:table-cell; vertical-align:top}
.c020101 .oper-program .box:nth-child(2) {border-left:1px solid #ccc}
.c020101 .oper-program .box .btnbox {margin:2rem auto 1rem; text-align:center}

/*광주수학체험센터 안내 > 소개 > 상징*/
.c02010102 .box {background:url('/main/img/sub/sub01/010700-bg.gif') repeat; padding:6rem 3rem; text-align:center}
.c02010102 .box li {display:inline-block; margin-right:10rem}
.c02010102 .box li:last-child {margin-right:0}
.c02010102 .box li span {display:block; background:#000; border-radius:100px; color:#fff; width:75px; height:25px; margin:2.5rem auto 0}
.c02010102 .txt {color:#333; font-weight:400}
.c02010102 .explain > li > span {display:inline-block; vertical-align:middle; width:4rem; height:2.5rem; margin-right:2px}
.c02010102 .color {clear:both; overflow:hidden}
.c02010102 .color li {color:#fff; float:left; font-size:1.5rem; width:20%; padding:2.5rem 3rem; height:17rem}

.c02010102 .bg-w {background-color:#fff; border:1px solid #ddd; color:#666 !important}
.c02010102 .bg-b {background-color:#212322}
.c02010102 .bg-g {background-color:#5bc500}
.c02010102 .bg-lb {background-color:#00a9e0}
.c02010102 .bg-r {background-color:#ff6900}


/*광주수학교육*/
.c020400 .step-list02 > div {padding:1.5rem 6rem}
.c020400 .group {position:relative}
.c020400 .group .title {background-color:#2d3885; border-radius:100%; width:26.5rem; height:26.5rem; color:#fff; display:block; font-size:2rem; text-align:center; padding:5rem 3rem 3rem; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); line-height:1.2; word-break:keep-all; z-index:1}
.c020400 .group .title i {display:block; margin:0 auto 2rem; text-align:center; width:6rem}
.c020400 .group .list {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%}
.c020400 .group .item {background-color:#f3f4f8; padding:4rem 4.5rem; width:46rem}
.c020400 .group .item01 {border-radius:0 5rem 0 5rem; margin-bottom:2.5rem}
.c020400 .group .item02 {background-color:#f3f8f3; border-radius:5rem 0 5rem 0; margin-bottom:2.5rem}
.c020400 .group .item03 {background-color:#f8f8f3; border-radius:5rem 0 5rem 0; margin-top:2.5rem}
.c020400 .group .item04 {background-color:#f8f3f4; border-radius:0 5rem 0 5rem; margin-top:2.5rem}
.c020400 .group .item .tt {color:#2d3885; display:block; font-size:1.8rem; margin-bottom:2rem}
.c020400 .group .item li {margin-top:0}


/*체험프로그램

.type_blog .thum {width:15rem}
.gallery_list li .thum {height:auto}
.gallery_list li .txt {position:relative}
.gallery_list .thumbPopup li .txt a {position:absolute; top:50%; right:3rem; transform: translateY(-50%); margin-top:0}
.type_blog .txt {width:calc(100% - 16rem)}*/


@media (max-width:1290px) {
	.c02010102 .box li {margin-right:4rem}
	.c02010102 .box li img {max-width:80%}
}

@media (max-width:999px) {
	.c02010102 .box li {margin-right:0}
	.c02010102 .color li {width:100%; height:auto}
	.c02010102 .color li:last-child {padding-bottom:3rem}
}

@media (max-width:767px) {
	.c020101 .graph ul {padding-top:0}
	.c020101 .graph li {display:block; margin-bottom:1rem}
	.c020101 .graph li:before {display:none}

        .gallery_list .thumbPopup li .txt a {position:inherit; top:0; right:0; transform:translateY(0); margin-top:2rem}

}

@media (max-width:710px) {
	.c02010102 .box li {display:block; margin-bottom:4rem}
}

@media (max-width:1490px) {
	.c020400 .group .item {padding:4rem 4rem; width:40rem}
}

@media (max-width:1360px) {
	.c020400 .group .title {border-radius:3rem; width:100%; height:auto; padding:2rem 2rem 3rem; margin-bottom:1rem; position:relative; left:auto; top:auto; transform:inherit}
	.c020400 .group .title i {width:4rem}
	.c020400 .group .item {width:calc(50% - 0.5rem)}
	.c020400 .group .item01 {margin-right:0.5rem; margin-bottom:0.5rem}
	.c020400 .group .item02 {margin-bottom:0.5rem}
	.c020400 .group .item03 {margin-right:0.5rem; margin-top:0.5rem}
	.c020400 .group .item04 {margin-top:0.5rem}
}

@media (max-width:640px) {
	.c020400 .mission .con {position:relative; top:0; transform:translateY(0); padding-top:2rem}

	.c020400 .group .title {border-radius:1rem}
	.c020400 .group .item {width:100%; border-radius:1rem !important; margin-right:0 !important; padding:3rem 4rem}
}