@charset "UTF-8";

/* 소개 */
.network_info {position:relative;padding:6.357rem 0 5.929rem}
.network_info:before {
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#f1f1f1;
}
.network_info .img {position:absolute;bottom:-17.5rem;right:0;width:100%;max-width:46rem}
.network_info .img img {max-width:100%;height:auto}
.network_info .info_cont {position:relative;z-index:3;}
.network_info_content {position:relative;margin-top:8.071rem}
@media screen and (max-width:1087px){
    .network_info .img {max-width:39rem}
}
@media screen and (max-width:960px){
    .network_info {padding:3rem 0 5rem}
}
@media screen and (max-width:870px){
    .network_info .info_cont .block {display:inline}
    .network_info .info_cont br {display:none}
    .network_info .img {max-width:29rem}
    .network_info .img {bottom:-20rem}
}

/* 비젼 */
.network_vision {display:table;width:100%;border-spacing:0.9286rem;margin:0 -0.9286rem}
.network_vision .col_5 {display:table-cell;width:50%;height:6.5rem;padding:1rem 2.714rem;background-color:#079cc1;vertical-align:middle;color:#fff}
.network_vision .in_box {display:table;width:100%;}
.network_vision .in_box .tit {display:table-cell;width:9.071rem;font-size:1.643rem;font-weight:500;vertical-align:middle}
.network_vision .in_box .tit span {display:inline-block;position:relative;padding-left:6.214rem}
.network_vision .in_box .tit span:before {
    display:block;
    content:"";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    background-repeat:no-repeat;
    background-position:0 0;
}
.network_vision .in_box .tit span.ico1:before{
    width:3.357rem;
    height:4.357rem;
    background-image:url(../imgs/network/vision_ico1.png);
    background-size:3.357rem 4.357rem;
}
.network_vision .in_box .tit span.ico2:before{
    width:3.571rem;
    height:3rem;
    background-image:url(../imgs/network/vision_ico2.png);
    background-size:3.571rem 3rem;
}
.network_vision .in_box p {display:table-cell;padding-left:1.571rem;font-size:1.143rem;vertical-align:middle}
@media screen and (max-width:1175px){
    .network_vision .in_box p br {display:none}
}
@media screen and (max-width:960px){
    .network_vision .col_5 {padding:1rem 1.3rem}
}
@media screen and (max-width:760px){
    .network_vision .in_box .tit span {padding-left:4.3rem}
    .network_vision {display:block;border-spacing:0;margin:0}    
    .network_vision .col_5 {display:block;width:100%;margin:0.9286rem 0;height:auto;padding:2rem 2rem}
    .network_vision .in_box p {padding-left:1rem}
    .network_vision .in_box .tit {width:8rem;}
}
@media screen and (max-width:400px){
    .network_vision .in_box {display:block}
    .network_vision .in_box .tit {display:block;}
    .network_vision .in_box p {display:block;padding-left:4.3rem}
}
.network_vision_list {margin-top:4.286rem}
.network_vision_list .list_container {margin:-1rem;text-align:center}
.network_vision_list .list_container .list {display:inline-block;position:relative;padding:1rem;margin-left:-4px}
.network_vision_list .list_container .list .list_inner {display:block;position:relative;width:20.93rem;border-radius:100%;padding:0.5rem}
.network_vision_list .list_container .list .list_inner {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0770c1+0,2ecbd5+100 */
    background: rgb(7,112,193); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(7,112,193,1) 0%, rgba(46,203,213,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(7,112,193,1) 0%,rgba(46,203,213,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(7,112,193,1) 0%,rgba(46,203,213,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0770c1', endColorstr='#2ecbd5',GradientType=1 ); /* IE6-9 */
}
.network_vision_list .list_container .list .list_inner .in_box {position:relative;padding-top:100%;background-color:#fff;border-radius:100%;}
.network_vision_list .list_container .list .list_inner .in_box .in_box_cont {position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%);letter-spacing:-0.1rem}
.network_vision_list .tit {display:block;position:relative;font-size:1.429rem;line-height:1.929rem;font-weight:500;color:#0873c2}
.network_vision_list .tit:before {
    display:block;
    content:"";
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.9286rem;
    background-repeat:no-repeat;
    background-position:0 0; 
}
.network_vision_list .tit.ico1:before {
    width:4.286rem;
    height:4.786rem;
    background-image:url(../imgs/network/vision_list_ico1.png);
    background-size:4.286rem 4.071rem;
    background-position:0 100%; 
}
.network_vision_list .tit.ico2:before {
    width:4.643rem;
    height:4.786rem;
    background-image:url(../imgs/network/vision_list_ico2.png);
    background-size:4.643rem 4.286rem;
    background-position:0 50%; 
}
.network_vision_list .tit.ico3:before {
    width:4.571rem;
    height:4.786rem;
    background-image:url(../imgs/network/vision_list_ico3.png);
    background-size:4.571rem 3.429rem;
    background-position:0 50%; 
}
.network_vision_list .txt {margin-top:0.6429rem;font-size:1.071rem;line-height:1.429rem;color:#999;font-weight:500}
@media screen and (max-width:640px){
    .network_vision_list .txt {font-size:1.12rem}
}

/* 관련사이트 */
.network_site {display:table;width:100%;margin:0 -1.429rem;border-spacing:1.429rem}
.network_site .site_list {position:relative;display:table-cell;width:20%;height:27.29rem;padding:2.929rem 0.7rem 6.786rem;vertical-align:top;border:2px solid #dddddd;text-align:center}
.network_site .site_list dt {display:block;position:relative;color:#024a73;font-size:1.429rem;line-height:1.786rem;font-weight:500}
.network_site .site_list dd {margin-top:1.071rem;font-size:1.071rem;color:#999;line-height:1.429rem;}
.network_site .site_list dd.btn_box {position:absolute;bottom:3.5rem;left:0;margin-top:0;line-height:normal;width:100%;text-align:center}
.network_site .site_list dd.btn_box .link {display:inline-block;width:6.214rem;line-height:1.929rem;font-size:1.071rem;color:#fff;background-color:#024a73;border-radius:50px}
.network_site .site_list dt:before {
    display:block;
    content:"";
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:6.143rem;
    height:6.143rem;
    margin-bottom:0.9286rem;
    background-repeat:no-repeat;
    background-position:50% 50%;
}
.network_site .site_list dt.ico1:before{
    background-size:5.714rem 5.071rem;
    background-image:url(../imgs/network/site_ico1.png);
    background-position:50% 100%;
}
.network_site .site_list dt.ico2:before{
    background-size:5.714rem 5.714rem;
    background-image:url(../imgs/network/site_ico2.png);
    background-position:50% 0%;
}
.network_site .site_list dt.ico3:before{
    background-size:5.786rem 5.714rem;
    background-image:url(../imgs/network/site_ico3.png);
    background-position:50% 0%;
}
.network_site .site_list dt.ico4:before{
    background-size:5.571rem 4.643rem;
    background-image:url(../imgs/network/site_ico4.png);
}
.network_site .site_list dt.ico5:before{
    background-size:4.929rem 5.429rem;
    background-image:url(../imgs/network/site_ico5.png);
    background-position:50% 50%;
}
@media screen and (max-width:850px){
    .network_site {display:block;width:100%;margin:-0.7143rem;border-spacing:0}
    .network_site:after {display:block;content:"";clear:both}
    .network_site .site_list {display:block;float:left;width:33.33333333%;padding:0.7143rem;height:auto;border:0}
    .network_site .site_list dl {width:100%;min-height:26rem;padding:2.929rem 0.7rem 6.786rem;vertical-align:top;border:2px solid #dddddd;text-align:center}
}
@media screen and (max-width:719px){
    .network_site .site_list dl {min-height:28rem}
}
@media screen and (max-width:600px){
    .network_site .site_list {width:50%}
    .network_site .site_list dl {min-height:28rem}
}
@media screen and (max-width:640px){
    .network_site .site_list dd.btn_box .link,
    .network_site .site_list dd {font-size:1.12rem}
}
@media screen and (max-width:373px){
    .network_site .site_list dl {min-height:30rem}
}

/* 그린교육 */
.greenedu_info {width:100%;padding:6.01rem 0 6.01rem;overflow:hidden;background-image:url(../imgs/network/green_info_img.jpg);background-repeat:no-repeat;background-position:49vw 0}
.greenedu_info .info_cont {position:relative;z-index:3;}
.greenedu_cont {margin-top:4.929rem}
.greenedu_curriculum {position:relative;}
.greenedu_curriculum .curriculum_list {display:table;width:100%;margin:-2.071rem;border-spacing:2.071rem}
.greenedu_curriculum dl {display:table-cell;width:33.333333333%;height:8.857rem;padding:1.857rem 1rem;background-color:#777777;text-align:center}
.greenedu_curriculum dt {font-size:1.286rem;color:#d2f91b;line-height:1.286rem;font-weight:500}
.greenedu_curriculum dd {margin-top:0.4rem;font-size:1.071rem;color:#fff;line-height:1.429rem;}
.greenedu_after {margin-top:5rem}
.greenedu_after .greenedu_after_list {width:100%;}
.greenedu_after .greenedu_after_list .list {padding:1.214rem 1.786rem;border-bottom:1px solid #ddd;}
.greenedu_after .greenedu_after_list .list .eimg {float:left;position:relative;width:14.93rem}
.greenedu_after .greenedu_after_list .list dl {float:right;position:relative;width:calc(100% - 17rem);padding-top:1.214rem}
.greenedu_after .greenedu_after_list .list.last {border-bottom:0;padding-bottom:0}
@media screen and (max-width:1157px){
    .greenedu_info {background-position:58vw 0}
}
@media screen and (max-width:960px){
    .greenedu_info {padding:3rem 0}
}
@media screen and (max-width:854px){
    .greenedu_curriculum dd br {display:none;}
}
@media screen and (max-width:720px){
    .greenedu_after .greenedu_after_list .list .eimg {width:12rem}
    .greenedu_after .greenedu_after_list .list dl {width:calc(100% - 13rem);padding-top:0rem}
}
@media screen and (max-width:640px){
    .greenedu_curriculum dd {font-size:1.12rem}
}
@media screen and (max-width:600px){
    .greenedu_info .block {display:inline;}
    .greenedu_info {background-position:58vw -33%}
    .greenedu_curriculum .curriculum_list {display:block;width:100%;margin:0rem;border-spacing:0}
    .greenedu_curriculum dl {display:block;width:100%;margin:1rem 0;height:auto}
    .greenedu_after .greenedu_after_list .list .eimg {width:100%}
    .greenedu_after .greenedu_after_list .list dl {width:100%;padding-top:1rem}
    .greenedu_after .greenedu_after_list .list {padding-left:0;padding-right:0}
}

/* 저탄소 */
.low_carbon {display:table;width:100%;border-spacing:2.071rem;margin:0 -2.071rem}
.low_carbon .carbon_list {display:table-cell;width:25%;padding:3.214rem 0.9rem 2.857rem;border:2px solid #ddd}
.low_carbon .carbon_list .img {text-align:center;margin-bottom:0.7857rem}
.low_carbon .carbon_list h3,
.low_carbon .carbon_list p.sub_txt15_2 {letter-spacing:-0.12rem}
.carbon_ul {position:relative;margin-top:1.1rem;padding-left:0.9rem}
.carbon_ul li {margin-bottom:0.3rem;line-height:1.571rem;border-spacing:0;font-size:1.071rem;}
.carbon_ul li:last-child {margin-bottom:0}
.carbon_ul strong {display:block;position:relative;float:left;padding-left:0.8571rem;font-size:1.071rem;color:#333333;font-weight:500}
.carbon_ul strong:before {
    display:block;
    content:"";
    position:absolute;
    top:0.6429rem;
    left:0;
    width:0.2857rem;
    height:0.2857rem;
    background-color:#024a73;
}
.carbon_ul p {float:right;position:relative;width:calc(100% - 5.357rem)}
@media screen and (max-width:1200px){
    .low_carbon .carbon_list br {display:none}
    .low_carbon .carbon_list p.sub_txt15_2 {letter-spacing:-0.05em;}
}
@media screen and (max-width:1000px){
    .low_carbon {display:block;margin:-1.3rem}
    .low_carbon:after {display:block;content:"";clear:both}
    .low_carbon .carbon_list {display:block;float:left;width:50%;padding:1.3rem;border:0}
    .low_carbon .carbon_list .list_cont {min-height:36rem;padding:3rem 0.9rem 2rem;border:2px solid #ddd}
}
@media screen and (max-width:640px){
    .low_carbon .carbon_list {width:100%;min-height:auto}
    .low_carbon .carbon_list .list_cont {min-height:auto}
    .carbon_ul li,
    .carbon_ul strong {font-size:1.12rem}
}


/* 기후변화교육센터 */
.weather_edu_info {position:relative;}
.weather_edu_info .cont {float:left;position:relative;padding:5.857rem 0 5.286rem;width:51rem}
.weather_edu_info .img {float:right;position:relative;width:calc(100% - 54rem)}
.weather_edu_info .img img {max-width:100%;height:auto}
.weather_edu_cont {margin-top:5rem}
.weather_edu_curriculum .left,
.weather_edu_curriculum .right {float:left;width:50%;position:relative;}
.weather_edu_curriculum .right {padding-right:3rem}
.weather_edu_curriculum dl {position:relative;padding-left:11.29rem}
.weather_edu_curriculum dl:before {
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:8.214rem;
    height:8.214rem;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:0 0;
}
.weather_edu_curriculum dl.ico1:before {
    background-image:url(../imgs/network/weather_img_01.png)
}
.weather_edu_curriculum dl.ico2:before {
    background-image:url(../imgs/network/weather_img_02.png)
}
.weather_edu_curriculum dl dt {float:left;position:relative;line-height:1.929rem !important;}
.weather_edu_curriculum dl dd {float:right;position:relative;width:calc(100% - 6.786rem);font-size:1.071rem;line-height:1.929rem;color:#333}
@media screen and (max-width:1297px){
    .weather_edu_info .cont {padding:3.857rem 0 4.286rem}
}
@media screen and (max-width:1200px){
    .weather_edu_info .cont {width:60%}
    .weather_edu_info .img {position:relative;width:calc(100% - 60%)}
}
@media screen and (max-width:1144px){
    .weather_edu_info .cont .block {display:inline;}
}
@media screen and (max-width:1069px){
    .weather_edu_info .cont {width:70%}
    .weather_edu_info .img {position:relative;width:calc(100% - 70%)}
    .weather_edu_info .img {position:absolute;bottom:0;right:0}
}
@media screen and (max-width:1112px){
    .weather_edu_curriculum dl dt {float:none;}
    .weather_edu_curriculum dl dd {float:none;width:100%}
    .weather_edu_curriculum dl {padding-left:8rem}
    .weather_edu_curriculum dl:before {width:6rem;height:6rem}
}
@media screen and (max-width:1000px){
    .weather_edu_info .cont {float:none;width:100%}
    .weather_edu_info .img {float:none;width:100%;text-align:right}
    .weather_edu_info .img {display:inline-block;position:relative;;bottom:0;right:0;}
}
@media screen and (max-width:960px){
    .weather_edu_info .cont {padding:3rem 0 3rem}
}
@media screen and (max-width:720px){
    .weather_edu_curriculum .left,
    .weather_edu_curriculum .right {float:none;width:100%;}
    .weather_edu_curriculum .right {padding-right:0;padding-top:3rem}
}
@media screen and (max-width:640px){
    .weather_edu_curriculum dl dd {font-size:1.12rem}
}

/* 어린이 기후학교 */
.child_school_info {position:relative;padding:5.286rem 0;background-image:url(../imgs/network/child_info_bg.jpg);background-size:auto;background-position:61vw 100%;background-repeat:no-repeat;}
.child_school_cont {margin-top:7.429rem}
.child_scholl_active .top {position:relative}
.child_scholl_active .top .img {float:left;position:relative;max-width:38.71rem}
.child_scholl_active .cont {float:right;position:relative;width:calc(100% - 38.71rem)}
.child_scholl_active .cont h3 {font-weight:800;line-height:5.714rem}
.child_scholl_active .cont h3 .color_grey {display:block;margin-bottom:0.3rem;font-size:3.643rem;line-height:3.643rem;color:#888888}
.child_scholl_active .cont h3 .color_cy,
.child_scholl_active .cont h3 .color_green {font-size:5.714rem;}
.child_scholl_active .cont h3 .color_cy {color:#09916f}
.child_scholl_active .cont h3 .color_green {color:#73a316}
.child_scholl_active .cont .info_box {margin-top:1rem;padding:2.857rem 2.357rem;background-color:#f1f1f1}
@media screen and (max-width:960px){
    .child_school_info {padding:3rem 0}
    .child_scholl_active .top .img {float:none}
    .child_scholl_active .cont {float:none;width:100%;margin-top:3rem}
    .child_scholl_active .cont h3 {line-height:4rem;}
    .child_scholl_active .cont h3 .color_cy,
    .child_scholl_active .cont h3 .color_green,
    .child_scholl_active .cont h3 .color_grey {display:inline-block;vertical-align:middle}
    .child_scholl_active .cont h3 .color_grey {margin-right:1rem}
    .child_scholl_active .cont h3 .color_cy,
    .child_scholl_active .cont h3 .color_green {font-size:4rem;}
    .child_scholl_active .cont h3 .color_grey {font-size:2rem}
}


/* 찾아가는 기후교실 */
.weather_classroom_info {position:relative;padding:4.857rem 0 6.286rem 0 }
.weather_classroom_info:before {
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#f1f1f1;
}
.weather_classroom_info .cont {position:relative;z-index:3;padding-right:20.07rem}
.weather_classroom_info .img {position:absolute;top:-2.5rem;right:0;width:20.07rem}
.weather_classroom_info .img img {max-width:100%}

.weather_classroom_cont {position:relative;z-index:3;margin-top:4.929rem}
.classroom {position:relative;}
.classroom .img {float:left;position:relative;max-width:53%;width:100%}
.classroom .img img {max-width:100%;height:auto}
.classroom .cont {float:right;position:relative;width:calc(100% - 56%)}
.classroom.img_right .img {float:right;}
.classroom.img_right .cont {float:left;padding-left:1.571rem}
.classroom .cont {padding-top:2.571rem}
.classroom .cont .tit {font-size:1.643rem;line-height:1.643rem;color:#024a73;font-weight:500}
.classroom .cont ul {margin-top:1.429rem}
.classroom .cont ul li {font-size:1.143rem;margin-bottom:0.5rem;line-height:1.429rem;color:#333}
.classroom .cont ul li strong {display:block;float:left;position:relative;padding-left:0.8571rem;font-weight:500;color:#024a73}
.classroom .cont ul li strong:before {
    display:block;
    content:"";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:0.2857rem;
    height:0.2857rem;
    background-color:#024a73;    
}
.classroom .cont ul li p {float:right;position:relative;width:calc(100% - 7.143rem)}
@media screen and (max-width:1199px){
    .classroom .cont {padding-top:0rem}
}
@media screen and (max-width:1097px){
    .classroom .img,
    .classroom .cont,
    .classroom.img_right .img,
    .classroom.img_right .cont {float:none;width:100%;padding-left:0;max-width:100%}
    .classroom .cont {margin-top:2rem}
}
@media screen and (max-width:960px){
    .weather_classroom_info {padding:3rem 0}
    .weather_classroom_info .img {width:17.0rem}   
}
@media screen and (max-width:724px){
    .weather_classroom_info .cont {padding-right:18rem}
    .weather_classroom_info .cont .block {display:inline}
}
@media screen and (max-width:660px){
    .weather_classroom_info {margin-bottom:20vw;}
    .weather_classroom_info .cont {padding-right:0}
    .weather_classroom_info .img {top:inherit;bottom:-20vw;}
    .weather_classroom_info .img {width:10rem} 
}
@media screen and (max-width:468px){
    .weather_classroom_info .img {top:inherit;bottom:-27vw;}
}
.greenreader_info {padding:3.786rem 0 4.429rem;margin-bottom:5rem;background-size:auto;background-position:68vw 100%;background-repeat:no-repeat}
.greenreader_info.bg1 {background-image:url(../imgs/network/greenreader_bg1.jpg);background-position:45vw 100%;}
.greenreader_info.bg2 {background-image:url(../imgs/network/greenreader_bg2.jpg);background-position:68vw 100%;}
.greenreader_info.bg3 {background-image:url(../imgs/network/greenreader_bg3.jpg);background-position:42vw 100%;}
@media screen and (max-width:960px){
    .greenreader_info
    .greenreader_info {padding:3rem 0}
}
@media screen and (max-width:760px){
    .greenreader_info .block {display:inline}
}

.sdgs-img {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    margin:-5px;
    padding-top:2.143rem;
}
.sdgs-img__item {
    position:relative;
    width:calc(100% / 6);
    padding:5px;
}
.sdgs-img__item .earthday {
    display:block;
    position:relative;
    padding-left:1rem;
}
.sdgs-img__item--grid29 {
    width:30.22%;
}
@media screen and (max-width:639px) {
    .sdgs-img__item {width:calc(100% / 4);}
    .sdgs-img__item--grid29 {
        width:50%;
    }
    .sdgs-img__item .earthday {        
        padding-left:0;
    }
}
.sdgs-img__item img {max-width:100%;}
.sdgs-movie {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.26%;
    margin-top:3.571rem;
}
.sdgs-movie iframe {
    position:absolute;
    width:100%;
    height:100%;
}
.ksdgs-data {
    margin-top:3.571rem;
    padding-top:3.571rem;
    text-align:center;
    border-top:1px solid #ddd;
}