@charset "utf-8";

#contents{margin:40px auto; padding-bottom:30px; color:#222; text-align:left; line-height:180%;}
#contents > section{margin-top:20px;}
#contents h3{padding:10px 0 30px; color:#000; font-size:36px;}

#contents .chart section{float:left; position:relative; width:25%; margin-right:12.2%;}
#contents .chart section:last-child{margin-right:0;}
#contents .chart section > p{position:absolute; left:20%; width:7.5rem; border:1px solid #000; padding:0.5rem; text-align:center;}
#contents .chart section > p:nth-child(1){background:#333; color:#fff;}
#contents .chart section > ul{margin-top:30px; border:1px solid #ddd; height:11rem; padding:1.5rem 0 0 5%;}
#contents .chart section > ul > li{text-align:center;border:1px solid #ddd; width:95%; margin-bottom:2px;}
#contents .chart section > ul ul li{}
#contents .chart section > div{margin-top:30px;}
#contents .chart section > div:before{content: ""; width:100%; height:1px; background:#000; padding-bottom:10px;}
#contents .chart .monitoring{margin-top:30px; border:1px solid #ddd; height:11rem; padding:1.5rem 0 0 5%;}
#contents .chart .monitoring ul li{border:1px solid #ddd; margin-bottom:2px; width:80%; padding:0 0 0 10%;}
#contents .chart .monitoring p{background:#f70; width:91%; color:#fff; text-align:center; padding:2px 0 3px;}
.chart{margin-bottom:20px; display: inline-block; background:url(../images/sub01/chart_ar_bg.png) 0 70% no-repeat;}
.chart p{margin-bottom:10px;}
.stateImg div{position: relative; margin-top:20px;}
.stateImg div:before{
    content: '';
    width:100%; height:1px;
    background:#ddd;
    position:absolute; left:0; top:-10px;
}
.chart .linkage li{background:#0075BE; color:#fff; border:0;}
.chart .monitoring{}

#contents .divide1 > ul > li{font-size:0.9rem; font-weight:bold; margin-top:20px;}
#contents .divide1 ul li ul li{position:relative; padding-left:10px; box-sizing:border-box; font-weight:normal;}
#contents .divide1 ul li ul li:before{
    content: '';
    width:5px; height:5px;
    background:#ccc;
    border-radius: 50%;
    position:absolute; left:0; top:12px;
}

#contents .divide2{position:relative; margin-top:70px;}
#contents .divide2:before{
    content: '';
    width:100%; height:1px;
    background:#ddd;
    position:absolute; top:-40px; left:0;
}

#contents .divide2 article{margin-top:40px;}
#contents .divide2 article h4{color:#fff; font-size:1rem;}
#contents .divide2 article .img_tit{position: relative; background:#333333; font-weight:normal; text-align:center;
    border-radius: 48px; width:320px;  height:48px; box-sizing: border-box; padding-top:5px; margin-bottom:10px;}

#contents .divide2 article .ex_img{width:50%; float:left;}
#contents .divide2 article .ex_exp{width:50%; float:left;}
#contents .divide2 article{clear:left;}
#contents .divide2 article ul li{position: relative; padding-left:10px; box-sizing: border-box;}
#contents .divide2 article ul li:before{
    content: '';
    width:5px; height:5px;
    background:#ccc;
    border-radius: 50%;
    position:absolute; left:0; top:12px;
}


/*테이블스타일*/
.tbStyle{border-top:3px solid #417DB4; width:100%; border-collapse:collapse;}
.tbStyle caption{display:none;}
.tbStyle th{border-bottom:1px solid #ddd; border-right:1px solid #ddd; text-align:center; background:#f6f6f6; padding:10px 0; color:#222;}
.tbStyle th:last-child{border-right:none;}
.tbStyle td{border-bottom:1px solid #ddd; padding:7px; border-right:1px solid #ddd;text-align:center;}
.tbStyle td:nth-child(3){text-align:left;}
.tbStyle td:last-child{border-right:none;}
.tbStyle .input_txt{border:1px solid #ddd; width:80%; padding:5px 0 9px 3px; font-size:14px;}
.tbStyle .input10{width:10%;}
.tbStyle .input20{width:20%;}
.tbStyle .input30{width:30%;}
.tbStyle .input40{width:40%;}
.tbStyle .input50{width:50%;}
.tbStyle .input60{width:60%;}
.tbStyle .input70{width:70%;}
.tbStyle .input80{width:80%;}
.tbStyle .input90{width:90%;}
.tbStyle select{border:1px solid #ddd; padding:3px;}
.tbStyle .exp{color:#888;}
.tbStyle .btn{background:#333; color:#fff; border:1px #333; padding:3px 10px; cursor:pointer;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#dfdfdf,direction=0, strength=5);
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

/*.gall_con{position:relative; display: flex;margin-top:3em; padding-top:3em;}
.gall_con:before{
    content: '';
    position:absolute;
    top:0;
    width:100%;
    height:1px;
    background:#ddd;
}
.gall_con .img{width:30%; margin-right:20px;}
.gall_con .img img{width:100%; height:186px;}
.gall_con .con{width:70%; font-size:0.9rem;}
.gall_con p strong{display:block; font-size:1rem; color:#066BB7; margin-bottom:10px;}
.gall_con .con ul{}
.gall_con .con ul li{position: relative; font-size:0.85rem; width:100%; padding-left:0.8em;}
.gall_con .con ul li:before{
    content: '';
    width:4px; height:4px; background:#333;
    position:absolute; top:13px; left:0;
    border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;
}
.gall_con .con span{display:block; margin-top:15px; color:#888; font-size:0.7rem;}*/

.gallery{position:relative;}
.gallery ul{display:flex; justify-content: space-between; flex-wrap:wrap; width:100%;}
.gallery li{width:23%; margin-top:10px;}
.gallery li img{width:100%;}
.gallery li span{display:inline-block; width:100%; text-align:center; vertical-align:top;}

.movie{position:relative;}
.movie ul{display:flex; flex-wrap:wrap; justify-content: space-around; width:100%;}
.movie li{width:32%; margin:30px 0;}
.movie li iframe{width:100%;}
.movie li:nth-child(4n){margin-right:0;}
.movie li span{display:inline-block; width:100%; text-align:center; vertical-align:top;}

/**************** 소개 *******************/
.insa{display: flex; justify-content: space-between;}
.insa p strong{font-size:32px; font-weight:bold; color:#2AA15F;}
.insa p span{font-size:23px; font-weight:bold;}

.purpo{display: flex; justify-content: space-between;}
.purpo div{}
.purpo p{margin-left:50px; box-sizing: border-box;}

.history ul{position: relative; margin-top:50px;box-sizing: border-box;}
.history ul:before{
    content: '';
    width:1px; height:100%;
    background:#ddd;
    position:absolute; top:0; left:150px;
}
.history ul li{margin:50px 0 100px;}
.history ul li span strong{color:#2AA15F;}
.history .h2019{position:relative;}
.history .h2019:before,
.history .h2020:before{
    border:1px solid #2AA15F;
    padding:0 20px 3px;
    font-size:36px;
    position:absolute; top:0; left:0;
    color:#2AA15F;
}
.history .h2020{position:relative;}
.history .h2019:before{content: '2019';}
.history .h2020:before{content: '2020';}

.history .h2019 span,
.history .h2020 span{position:relative; display:inline-block; margin:50px 0 0 150px; padding-left:30px; width:calc(100% - 200px);}
.history .h2019 span:before,
.history .h2020 span:before{
    content: '';
    width:7px; height:7px;
    background:#2AA15F;
    border-radius: 50%;
    position:absolute; left:-3px; top:12px;}
}

.comm .exp{border:1px solid #3791d0; border-top:3px solid #3791d0; padding:40px 20px; box-sizing: border-box;}
.comm .list{margin-top:50px;}
.comm .list > ul > li{margin-top:30px; color:#3791d0;}
.comm .list ul ul{margin-top:20px;}
.comm .list ul ul li{position:relative; padding:5px 0 5px 10px;}
.comm .list ul ul li:after{
    content: '';
    width:3px; height:3px; background:#222;
    position:absolute; top:50%; left:0;
    border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;
}

.jogic{text-align:center;}

.articles ul{}
.articles ul > li{margin-top:30px;font-size:18px;}
.articles p{margin-top:30px;}
.articles ul>li strong{color:#417DB4; display:block;font-size:18px;}
.articles ul>li span{color:#417DB4; font-weight:bold;font-size:18px;}
.articles ul>li>ul>li{margin:7px 0; font-size:0.9rem;}
.articles ul>li>ul>li>ul{margin-left:20px;}
.articles ul>li>ul>li>ul>li{font-size:0.85rem; color:#666;}
.articles ul>li>ul>li{margin:5px 0;}
.articles p:nth-child(1){text-align:right;}

.map_add{padding:20px; border:1px solid #ddd; box-sizing: border-box;}

/* mediaQuery */
@media screen and (min-width:1240px){
    #contents{width:1200px;}
    .row{padding:0 15px;}
    .mobiNav{display:none;}
}
@media screen and (max-width:1239px){
    #contents{width:96%;}
    .map a img{width:100%;}
    .simbol li{width:30%; float:left; margin:0 20px;}

    .gallery{position:relative;}
    .gallery ul{display:flex; justify-content: space-between; flex-wrap:wrap; width:100%;}
    .gallery li{width:23%;}
    .gallery li:nth-child(4n){margin-right:0;}
    .gallery li img{width:100%;}
    .gallery li span{display:inline-block; width:100%; text-align:center; vertical-align:top;}
}
@media screen and (max-width:1024px){
    .outline > ul >li{width:47%; margin-bottom:30px;}
    .simbol{display:inline-block;}
    .simbol li{width:100%; float:none; border-bottom:1px dotted #ccc; margin:0; padding:20px 0;}
    .simbol01{background:url(../images/sub04/pyojang01.gif) 50% 20px no-repeat;}
    .simbol02{background:url(../images/sub04/pyojang02.gif) 50% 20px no-repeat;}
    .simbol03{background:url(../images/sub04/pyojang03.gif) 50% 20px no-repeat;}

    .purpo div{width:55%;}
    .purpo div img{width:100%;}
    .purpo p{ width:45%; }
    .jogic .jogicdo img{width:100%;}
}
@media screen and (max-width:960px){
    .outline > div{background:none;}
    .outline > div p{width:100%;}
    .ideo01{background:none; background-color:#f6f6f6; width:100%;}
    .ideo01 p{width:96%; padding:20px 2%;}

    .insa{display: flex; justify-content: space-between;}
    .insa div{width:35%;}
    .insa div img{width:100%;}
    .insa p{width:65%; margin-left:30px; box-sizing: border-box;}
    .insa p strong{font-size:28px; font-weight:bold; color:#2AA15F;}
    .insa p span{font-size:18px; font-weight:bold;}
}
@media screen and (max-width:640px){
    .s_tit{padding:5px 15px;}
    .outline > ul >li{width:100%; margin-bottom:30px;}
    .ideo p:first-child{width:100%;}
    .ideo .kor{float:none; width:100%; margin-right:0;}
    .ideo .par{float:none; width:100%;}

    .purpo{flex-wrap: wrap;}
    .purpo div{width:100%;}
    .purpo div img{width:100%;}
    .purpo p{margin-left:0; border-box; width:100%;}

    .insa p strong{font-size:24px; font-weight:bold; color:#2AA15F;}
}
@media screen and (max-width:480px){
    .insa{display: flex; flex-wrap: wrap;}
    .insa div{width:100%; text-align:center;}
    .insa div img{width:70%;}
    .insa p{width:100%; margin:30px 0 0 0; text-align:center;}
}
@media screen and (max-width:320px){

}