@charset "utf-8";

.vision h3 {font-size: var(--fs30); color: #000; margin-bottom: 40px; text-align: center; line-height: 1.2;}
.vision h3 span {color: var(--base1);}

.vision .clusterWrap span {display: block; font-size: var(--fs20); font-weight: 700; color: var(--base1); text-align: center; line-height: 1.2; padding-top: 20px;}
.vision .clusterWrap h3 {font-size: var(--fs35); color: #000; text-align: center; margin: 30px 0 40px 0; line-height: 1.2;}
.vision .clusterWrap h3 p {color: var(--base1);}
.vision .clusterWrap .clusterImg {display: grid; grid-template-columns: auto 810px; gap: 30px;}
.vision .clusterWrap .clusterImg .img img {border: 1px solid #ddd;}
.vision .clusterWrap .clusterImg ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 15px;}
.vision .clusterWrap .clusterImg ul li {border: 1px solid #000; display: flex;    flex-direction: column; align-items: center; padding-top: 25px;}
.vision .clusterWrap .clusterImg ul li p {color: #000; font-weight: 600; margin: 20px 0 30px 0; line-height: 1.2; text-align: center;}
.vision .clusterWrap .clusterImg ul li dl {width: 100%; border-top: 1px solid #ddd; padding: 20px 0 20px 30px; box-sizing: border-box;}
.vision .clusterWrap .clusterImg ul li dl dd {font-size: var(--fs16); color: #777; position: relative; padding-left: 13px; line-height: 1.5;}
.vision .clusterWrap .clusterImg ul li dl dd::before {position: absolute; content: ""; width: 3px; height: 3px; border-radius: 100px; background: #777; left: 0; top: 10px;}

.vision .hubWrap {border: 1px solid #ddd; padding: 50px; text-align: center; margin: 50px 0;}

.vision .goalWrap .goalTit {position: relative; font-size: var(--fs20); color: var(--base1); text-align: center; font-weight: 700; margin-bottom: 30px;}
.vision .goalWrap .goalTit::before {content: ""; position: absolute; left: 0; top: 15px; width: 44.5%; height: 1px; background: #000;}
.vision .goalWrap .goalTit::after {content: ""; position: absolute; right: 0; top: 15px; width: 44.5%; height: 1px; background: #000;}

.vision .goalWrap ul {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;}
.vision .goalWrap ul li {border: 1px solid #ddd; padding: 20px;}
.vision .goalWrap ul li p {background: #333; color: #fff; width: 100%; padding: 5px 0; text-align: center;}
.vision .goalWrap ul li span {display: block; text-align: center; margin: 15px 0 5px 0; font-weight: 700; color: #000;}

.vision .goalWrap ul li .deco dl {display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px;}
.vision .goalWrap ul li .deco dl dd {color: var(--base1); font-weight: 600; text-align: center; border-radius: 5px; border: 2px dashed var(--base1); padding: 12px 0; font-size: 16px;}

.vision .goalWrap ul li .glocal dl {grid-template-columns: auto;}
.vision .goalWrap ul li .progrm {display: grid; grid-template-columns: auto auto; gap: 40px; border-top: 1px solid #ddd; padding: 20px 10px 0 10px;}
.vision .goalWrap ul li .progrm center {color: #000; font-weight: 700; text-align: left; font-size: var(--fs20);}
.vision .goalWrap ul li .progrm dl {margin-top: 10px;}
.vision .goalWrap ul li .progrm dl dd {color: #000; line-height: 1.4; position: relative; padding-left: 15px;}
.vision .goalWrap ul li .progrm dl dd::before {content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 100px; background: #aaa;}

.vision .projectWrap {padding: 70px 0; text-align: center; background: #FAFAFA; margin: 50px 0;}

.vision .effectWrap {position: relative; padding-left: 60px; border-left: 6px solid #EDEDED; }
.vision .effectWrap h3 {text-align: left; font-size: var(--fs40);}
.vision .effectWrap ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 15px;}
.vision .effectWrap::before {position: absolute; left: 16px; top: 13px; content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 0px 9px 12px; border-color: transparent transparent transparent var(--base1);}

.vision .effectWrap p {color: var(--base1); font-weight: 700; border-radius: 100px; padding: 10px 60px; border: 2px dashed var(--base1);}
.vision .effectWrap ul li {display: flex; flex-direction: column; align-items: center;}
.vision .effectWrap ul li div {margin-top: 20px; border-top:3px solid #000;}
.vision .effectWrap ul li dl dt {text-align: left; font-weight: 500; color: #000; font-size: var(--fs20); margin: 20px 0 5px 0;}
.vision .effectWrap ul li dl dd {position: relative; font-size: var(--fs16); color: #333; padding-left: 12px;}
.vision .effectWrap ul li dl dd::before {content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 100px; background: #aaa;}



/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px) {
.vision .clusterWrap .clusterImg {grid-template-columns: auto;}
.vision .clusterWrap .clusterImg .img {text-align: center;}
}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {


}

/* ************************ 모바일 이하(~767) ************************ */
@media screen and (max-width: 767px) { 

    .vision .clusterWrap .clusterImg ul li dl {padding: 20px;}
    .vision .clusterWrap .clusterImg ul li p {margin: 10px 0 20px 0;}

    .vision .goalWrap ul {grid-template-columns: repeat(1, 1fr);}
    .vision .projectWrap .img {padding: 30px; padding-bottom: 0;}
    .vision .projectWrap {padding: 40px 0;}
    .vision .goalWrap .goalTit::after {width: 40.5%;}
    .vision .goalWrap .goalTit::before {width: 40.5%;}

    .vision .effectWrap {padding-left: 0; border: 0;}
    
    .vision .effectWrap h3 {margin-bottom: 20px; padding-left: 25px;}
    .vision .effectWrap::before {left: 0; top: 8px;}

    .vision .clusterWrap .clusterImg ul {grid-template-columns: repeat(1,1fr);}
    .vision .goalWrap ul li .deco dl {grid-template-columns: repeat(2,1fr);}
    .vision .effectWrap ul {grid-template-columns: auto}
    .vision .effectWrap ul li div {width: 100%;}

    .vision .goalWrap ul li .progrm {grid-template-columns: auto; gap: 15px;}
    .vision .goalWrap ul li .progrm center {line-height: 1.2;}


}

/* ************************ 모바일 이하(~500) ************************ */
@media screen and (max-width: 500px) { 

    .vision .hubWrap {padding: 0; border: 0;}
    .vision .goalWrap ul li .deco dl {grid-template-columns: repeat(1,1fr);}
    .vision .goalWrap ul li .deco dl dd {padding: 3px 0;}

    .vision h3 {margin-bottom: 20px; text-align: left;}

    .vision .goalWrap .goalTit {margin-bottom: 10px;}
    .vision .goalWrap .goalTit::after {width: 30.5%;top: 12px;}
    .vision .goalWrap .goalTit::before {width: 30.5%;top: 12px;}

    .vision .projectWrap {padding: 0; background: none;}
    .vision .projectWrap .img {padding: 0;}

    .vision .clusterWrap h3 {text-align: left; margin: 20px 0 30px 0;}
    .vision .clusterWrap span {text-align: left;}

    .vision .clusterWrap .clusterImg ul li dl dd {line-height: 1.2;}
    .vision .effectWrap ul li dl dd {line-height: 1.2;}

}