@charset "UTF-8";

/* 기후변화대상 */
.climate_change_info {
    position:relative;
    padding:3rem;
    overflow:hidden;
}
.climate_change_info .info_cont {position:relative;z-index:3}
.climate_change_info .img {position:absolute;top:-12.36rem;right:0;}
.climate_change_info .img img {max-width:100%;height:auto}
.climate_chang_cont {margin-top:4.929rem}
.climate_chang_cont .left {float:left;position:relative;}
.climate_chang_cont .right {float:right;position:relative;width:calc(100% - 37.57rem)} 
.climate_chang_cont dl {width:100%;}
.climate_chang_cont dl dt {float:left;position:relative;width:7.786rem}
.climate_chang_cont dl dt:before {
    display:block;
    content:"";
    position:relative;
    width:7.786rem;
    height:7.786rem;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:0 0;
}
.climate_chang_cont dl dt.ico1:before {background-image:url(../imgs/activity/climate_chang_tit1.png)}
.climate_chang_cont dl dt.ico2:before {background-image:url(../imgs/activity/climate_chang_tit2.png)}
.climate_chang_cont dl dd {float:right;position:relative;width:calc(100% - 9.5rem);}
@media screen and (max-width:960px){
    .climate_change_info {padding:3rem 0}
    .climate_change_info .img {right:-23vw}
    .climate_chang_cont .right {width:calc(100% - 31.57rem);}
}
@media screen and (max-width:854px){ 
    .climate_change_info {padding:2rem}
}
@media screen and (max-width:810px){
    .climate_chang_cont .left {float:none;width:100%}
    .climate_chang_cont .right {float:none;width:100%;margin-top:2rem} 
}
@media screen and (max-width:754px){
    .climate_change_info .img {position:relative;top:inherit;right:inherit;margin-top:2rem;text-align:right}
}
@media screen and (max-width:618px){
    .climate_change_info .block {display:inline}
}

/* 자전거마일리지 */
.bike_info {
    position:relative;
    padding:3rem;
}
.bike_info .info_cont {position:relative;z-index:3}
.bike_info .img {position:absolute;bottom:-0.7143rem;right:0;}
.bike_cont {
    margin-top:5rem;
    margin-bottom:5rem;
}
.bike_mileage {position:relative;padding-right:23.64rem}
.bike_mileag--padr0 {padding-right:0 !important;}
.bike_mileage a {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:20rem;
    background-color:#024a73;
    border-radius:50px;
    line-height:4rem;
    font-size:1.071rem;
    color:#fff;
    text-align:center;
}
@media screen and (max-width:1081px){
    .bike_info .block {display: inline;}
}
@media screen and (max-width:960px){
    .bike_info .img {display:none}
    .bike_cont {
        margin-top:3rem;
        margin-bottom:3rem;
    }
}
@media screen and (max-width:854px){ 
    .bike_info {padding:2rem}
}
@media screen and (max-width:600px){
    .bike_cont .bike_mileage {padding-right:0}
    .bike_cont .bike_mileage a {position:relative;top:inherit;right:inherit;margin-top:2rem}
}

/* 시민햇빛발전소 */
.sunshine_plant_info {
    position:relative;
    padding:3rem;
}
.sunshine_plant_info .info_cont {position:relative;z-index:3}
.sunshine_plant_info .img {position:absolute;bottom:0rem;right:0;}
.sunshine_plant_cont {
    margin-top:5rem;
    margin-bottom:5rem;
}
.plant_condition_list {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    margin:-0.3571rem
}
.plant_condition_list .plant {    
    position:relative;
    width:calc(50% - 0.3571rem - 0.3571rem);
    margin:0.3571rem;
    border:3px solid #ddd;
}
.plant_condition_list .plant .plant_inner {
    padding:2.5rem 2.143rem;    
    background-color:#fff;
}
.plant_condition_list .plant h4 {font-size:1.286rem;line-height:1.286rem;color:#017398;font-weight:500}
.plant_condition_list .plant ul {margin-top:0.9286rem}
.plant_condition_list .plant ul li {position:relative;margin-bottom:0.3rem}
.plant_condition_list .plant ul li {font-size:1.071rem;line-height:1.786rem;color:#333}
.plant_condition_list .plant ul li p {line-height:1.429rem}
.plant_condition_list .plant ul li strong {
    display:block;
    position:relative;
    float:left;
    width:9rem;
    padding-left:1rem;
    font-weight:400;
}
.plant_condition_list .plant ul li strong:before,
.plant_condition_list .plant ul li strong:after{
    display:block;
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.plant_condition_list .plant ul li strong:before {left:0;width:0.3571rem;height:0.3571rem;background-color:#aaa}
.plant_condition_list .plant ul li strong:after {right:0;content:":";font-size:1.071rem;color:#333}
.plant_condition_list .plant ul li p {
    display:block;
    position:relative;
    float:right;
    width:calc(100% - 10rem);
}
@media screen and (max-width:960px){    
    .sunshine_plant_info .img {display:none}
    .sunshine_plant_cont {
        margin-top:3rem;
        margin-bottom:3rem;
    }
}
@media screen and (max-width:854px){ 
    .sunshine_plant_info {padding:2rem}
}
@media screen and (max-width:800px){
    .plant_condition_list .plant {width:100%}
    .plant_condition_list .plant .plant_inner {height:auto !important}
}

@media screen and (max-width:640px){
    .plant_condition_list .plant ul li strong:after,
    .plant_condition_list .plant ul li {font-size:1.12rem}
}

.scorching_heat_info {
    position:relative;
    padding:3rem;
}

.re100_info {
    position:relative;
    padding:3rem;
}

.planinfo {
    position:relative;
    padding:3rem;
    background-color:#f1f1f1;
}
.planinfo__content {
    position:relative;
    z-index:3;
}
@media screen and (max-width:960px) {
    .planinfo {padding:2rem;}
}
.planinfo-desc {
    position:relative;
    margin:5rem 0;
}

.planinfo-img {
    position:relative;
    margin-top:3rem;
}
.planinfo-img--mt14 {
    margin-top:1rem;
}
.planinfo-img__col {
    width:100%;
}
.planinfo-img__col img {
    max-width:100%;
    height:auto;
}
.planinfo-cont {
    margin-top:5rem;
    margin-bottom:5rem;
}
@media screen and (max-width:960px) {
    .planinfo-img {margin-top:2rem;}
    .planinfo-cont {
        margin-top:3rem;
        margin-bottom:3rem;
    }
    .planinfo-img--mt14 {
        margin-top:1rem;
    }
}

.planinfo-linkbox {position:relative;padding-right:23.64rem}
.planinfo-linkbox--padr0 {padding-right:0 !important;}
.planinfo-linkbox a {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:20rem;
    background-color:#024a73;
    border-radius:50px;
    line-height:4rem;
    font-size:1.071rem;
    color:#fff;
    text-align:center;
}
@media screen and (max-width:600px){
    .planinfo-linkbox {padding-right:0}
    .planinfo-linkbox a {position:relative;top:inherit;right:inherit;margin-top:2rem}
}


/* earthday */
.earthday_info {
    position:relative;
    padding:3rem;
}
.earthday_info .info_img {margin-top:3.286rem}
.earthday_info .info_img .left {}
.earthday_info .info_img .right {float:right;position:relative;width:calc(100% - 56rem);text-align:right}
.earthday_cont {
    margin-top:5rem;
    margin-bottom:5rem;
}
@media screen and (max-width:960px){
    .earthday_info .info_img {margin-top:2rem}
    .earthday_info .info_img .right {display:none}
    .earthday_info .info_img .left {width:100%}
    .earthday_cont {
        margin-top:3rem;
        margin-bottom:3rem;
    }
}
@media screen and (max-width:854px){ 
    .earthday_info {padding:2rem}
}

/* carday */
.carday_info {padding:3rem}
.carday_info .info_img {margin-top:2.071rem}
.carday_info .info_img .left {float:left;position:relative;width:56rem}
.carday_info .info_img .right {float:right;position:relative;width:calc(100% - 56rem);text-align:right}
.carday_cont {margin-top:4.714rem}
@media screen and (max-width:960px){
    .carday_info .info_img {margin-top:2rem}
    .carday_info .info_img .right {display:none}
    .carday_info .info_img .left {width:100%}
    .carday_cont {margin-top:3rem}
}
@media screen and (max-width:854px){ 
    .carday_info {padding:2rem}
}

/* forum */
.forum_info {padding:3rem;margin-bottom:5rem;}
.forum_info .info_img {margin-top:4.143rem}
.forum_info .info_img .left {float:left;position:relative;width:56rem}
.forum_info .info_img .right {float:right;position:relative;width:calc(100% - 56rem);text-align:right}
.forum_cont {margin-top:4.714rem}
@media screen and (max-width:960px){
    .forum_info {margin-bottom:3rem;}
    .forum_info .info_img {margin-top:2rem}
    .forum_info .info_img .right {display:none}
    .forum_info .info_img .left {width:100%}
    .forum_cont {margin-top:3rem}
}
@media screen and (max-width:854px){ 
    .forum_info {padding:2rem}
}
@media screen and (max-width:776px){
    .forum_info .block {display:inline}
}


/* 분과사업 */
.project {border-top:1px solid #ddd;}
.project__item {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    align-items:flex-start;
    width:100%;
    padding:1.7rem;
    border-bottom:1px solid #ddd;
}
@media screen and (max-width:639px) {
    .project__item {padding:1.7rem 0 1.7rem;}
}
.project__year {
    position:relative;
    width:5.071rem;
}
.project__content {    
    width:calc(100% - 5.071rem);
    padding-left:4rem;
}
.project__subject {
    font-size:1.286rem;
    font-weight:500;
    color:#222;
    margin-bottom:0.5rem;
}
.project__detail {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
    width:100%;
}
.project__detail + .project__detail  {margin-top:2rem;}
.project__detail-year {
    font-size:1.2rem;
    color:#024a73;
    font-weight:500;
}
.project__detail-content {
    width:calc(100% - 12rem);
    padding-left:2rem;
    font-size:1rem;
}


.project dl dt {display:table-cell;width:5.071rem;vertical-align:middle}
.project dl dd {display:table-cell;padding-left:2.429rem;vertical-align:middle}
.project dl dd > ul > li {margin-bottom:0.7143rem}
.project dl dd > ul > li:last-child {margin-bottom:0}
.project dl dd > ul > li > strong {display:block;float:left;font-size:1.286rem;font-weight:500;color:#024a73}
.project dl dd > ul > li > p {display:block;float:right;width:calc(100% - 12rem);font-size:1.143rem;color:#333}
.project dl dd > ul > li > strong,
.project dl dd > ul > li > p {line-height:1.8rem}
.project .cr {
    display:inline-flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    position:relative;
    width:5.429rem;
    height:5.429rem;
    padding:3px;
    border-radius:100%;
}
.project .cr {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#025fc8+0,129ebc+100 */
    background: rgb(2,95,200); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(2,95,200,1) 0%, rgba(18,158,188,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(2,95,200,1) 0%,rgba(18,158,188,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(2,95,200,1) 0%,rgba(18,158,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#025fc8', endColorstr='#129ebc',GradientType=1 ); /* IE6-9 */
}
.project .cr em {    
    display:inline-flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    position:relative;
    width:100%;
    height:100%;
    background-color:#fff;
    border-radius:100%;
    font-size:1.429rem;
    color:#024a73;
    font-weight:500;
}
@media screen and (max-width:600px){
    .project__item {
        flex-direction:column;
    }
    .project dl,    
    .project dl dt,
    .project dl dd {display:block;width:100%;}
    .project dl:after {display:block;content:"";clear:both;}
    .project dl dd {margin-top:1.5rem;padding-left:0}
    .project .cr {border-radius:50px;width:100%;height:3rem}
    .project__content {padding-left:0;}
    .project__year {
        width:100%;
        margin-bottom:1.2rem;
    }
    .project .cr em {border-radius:50px;}
    .project__detail {
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
    }
    .project__content {width:100%;}
    .project__detail-content {
        width:100%;
        padding-left:0;
    }
}