@charset "utf-8";


/* 공통 */

#container_wr { padding-top:71px; }

.flexbox { display:flex; }
.clearfix::after{content:""; display:block; clear:both;}

.list li { float:left; }
.list-02 li {width:50%;}
.list-03 li {width:33.33%;}
.list-04 li {width:25%;}

.title { font-size:16px; font-family:'S-CoreDream-5Medium';}
.banner_title { font-size:50px;  font-family:'S-CoreDream-5Medium';}
.sub_visual_title { font-size:48px; font-family:'S-CoreDream-5Medium'; margin-bottom:10px; line-height:1;}
.sub_visual_txt { font-family: 'S-CoreDream-2ExtraLight'; }
.sub_visual_s_title { font-size:18px; }
.f_size { font-size:12px; color:#666;}
.f_text { color:#999; font-weight:bold; margin-bottom:5px;}

.contents { max-width:1040px; margin:0 auto; }
.v_section { padding:80px 0 160px; }

/* scroll header */

#header.scroll {  border-bottom:1px solid #f7f7f7;}

/* header */

#header { position:fixed; left:0; top:0; width:100%; z-index:9999; background-color:#fff;}
#header .header_inner { padding:18px 0 20px; justify-content:space-between; align-items:center;  }
#header #logo { width:85px; height:33px; }
#header #logo a { display: block; background-image: url(../img/logo.png); /*background-image: url(../img/logo.svg);*/ width: 100%; height: 100%; background-size: cover; text-indent: -9999px; background-repeat:no-repeat; background-position:center;}

#header .nav { display:block; border:0;}
#header .nav:after { display:inline-block; content:""; clear:both; /*width: 0px; height: 0px; border-left: 10px solid transparent; border-right:10px solid transparent; border-top: 14px solid #0b4e2f; margin-left:5px;*/}

.ham { font-size:15px; letter-spacing:0.5px; }
.ham > span { background-image:url(../img/down.png); background-image:url(../img/down.svg); width:15px; height:8px; display:inline-block; background-repeat:no-repeat; background-position:center; margin-bottom:2px;}

#gnb { display:none; position:absolute; top:100%; left:0; border-top: 10px solid #0b4e2f; background:rgba(13,98,59,0.9); z-index:4; width:100%; z-index:3;}
#gnb li { text-align:center; }
#gnb li:after { content:""; clear:both; display:inline-block; width:2px; height:20px; background:#fff; margin-bottom: -4px;}
#gnb li:nth-child(4):after, #gnb li:last-child:after { display:none; }
#gnb li a { color:#fff; display:inline-block; width:calc(100% - 2px); padding:15px 0;}

#header #gnb.on { display:block; }
/*#header.on .nav:after { border-bottom:14px solid #0b4e2f; border-top:0;}*/
#header.on .ham > span { background-image:url(../img/up.png); background-image:url(../img/up.svg);}

.cross { display:none; }

/* main */

.main_inner {background-color:#cee9ed; background-size:contain; transition:1s; text-align:center;}
.main_inner .img_fix { max-width:100%; height:auto; }

#list { padding:80px 0; }
.list_inner ul { margin: 0 -8px -40px;}
.list_inner ul li { padding:0 8px 40px; }
.list_inner ul li > div {background-color:#fff; border-radius:10px; box-shadow: 1px 0px 21px rgba(0,0,0,0.1); transition:0.8s;}

.list_inner ul li .thum { background-repeat:no-repeat; background-position:center; background-size:100%; height:0; border-radius:10px 10px 0 0; padding-bottom: 55%; position: relative; transition:0.8s;}
.list_inner ul li .thum01 { background-image:url(../img/cate01.jpg); }
.list_inner ul li .thum02 { background-image:url(../img/cate02.jpg); }
.list_inner ul li .thum03 { background-image:url(../img/cate03.jpg); }
.list_inner ul li .thum04 { background-image:url(../img/cate04.jpg); }
.list_inner ul li .thum05 { background-image:url(../img/cate05.jpg); }
.list_inner ul li .thum06 { background-image:url(../img/cate06.jpg); }

.list_inner ul li .title { padding:15px 10px; justify-content:space-between; align-items:center;}
.list_inner ul li .title span { display:inline-block; width:48px; height:48px; border-radius:50%; background:#f7f7f7; color:#0d623b; line-height:48px; text-align:center; transition:0.8s;}

/* visual */

.sub_visual.waste { background-color:#b1cafc;}
.sub_visual.carbon { color:#fff; background-color:#5d4ee6;}
.sub_visual.earth { color:#fff; background-color:#2a5866;}
.sub_visual.run { color:#fff; background-color:#9332bc;}
.sub_visual.show { background-color:#3ce6c9;}
.sub_visual.green { background-color:#40caff;}
.sub_visual.event { color:#fff; background-color:#0d623b; }

#waste { background-color:#b1cafc; }
#carbon { background-color:#5d4ee6; }
#earth { background-color:#2a5866; }
#run { background-color:#9332bc; }
#show { background-color:#3ce6c9; }
#green { background-color:#40caff; }
#event { background-color:#0d623b; }
#test { background-color:gold; }


.sub_visual .txt_wrap { padding:90px 0; }
.sub_visual .sub_visual_inner { background-repeat:no-repeat; background-position:right bottom;
    background-size:30%; background-repeat:no-repeat; transition:1s;}

.sub_visual_inner.waste { background-image:url(../img/v_cate01.png); }
.sub_visual_inner.carbon { background-image:url(../img/v_cate02.png); }
.sub_visual_inner.earth { background-image:url(../img/v_cate03.png); }
.sub_visual_inner.run { background-image:url(../img/v_cate04.png); }
.sub_visual_inner.show { background-image:url(../img/v_cate05.png); }
.sub_visual_inner.green { background-image:url(../img/v_cate06.png); }
.sub_visual_inner.event { background-image:url(../img/v_cate07.png); background-size: 22%;}

/* 게시판 */

#bo_gall .bo_tit { word-break:keep-all; }
#bo_v_title .bo_v_tit { display: block; font-size: 30px; word-break: keep-all; font-family: 'S-CoreDream-5Medium';}

#bo_gall { padding:80px 0 160px; }
#bo_gall.write { padding:80px 0; }

#bo_gall #gall_ul { margin:0 -8px -40px; flex-wrap:wrap; }
#bo_gall .gall_li { padding: 0 8px 40px; }
#bo_gall .gall_li > div { background-color:#fff; border-radius:10px; box-shadow: 1px 0px 21px rgba(0,0,0,0.1); transition:0.8s; }

#bo_gall .gall_img {overflow:hidden; border-radius:10px 10px 0 0; transition:0.8s;}
#bo_gall .gall_img img { transition:0.8s; }
.gall_text_href .title { padding:20px 10px; justify-content:space-between; align-items:center;}
.gall_text_href .title span { display:inline-block; width:48px; height:48px; border-radius:50%; background:#f7f7f7; color:#0d623b; line-height:48px; text-align:center; transition:0.8s;}

#bo_gall .bo_tit {display:block; width: calc(100% - 58px); overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }


#bo_v_img::before { content:""; display:block; background-color:rgba(13,98,59,0.4); position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; }
#bo_v_img { width: 100%; overflow: hidden; zoom: 1; height: 0; padding-bottom: 23.08%; position: relative; border-radius: 10px;}

#event #bo_v_img { border-radius:10px 10px 0 0; padding-bottom:0; height:160px;}
#event #bo_v_img::before { background-color:transparent; border-bottom:1px solid #f1f1f1;}

#bo_v_img .view_image { pointer-events:none; }
#bo_v_img img { width: 100%; height: auto; transform: translateY(-50%); }

#bo_v_con { padding:80px 90px 190px; width:100%; word-break:break-all; overflow:hidden;}
#bo_v_title { margin-bottom:40px; }
#event #bo_v_title { padding: 60px 0 0 90px; margin:0; }

#bo_v_con p, #bo_v_con div, #bo_v_con span, #bo_v_con ol, #bo_v_con li ,#bo_v_con ul,#bo_v_con a,#bo_v_con dl,#bo_v_con b  { color: #888; line-height:1.6em; word-break: keep-all; font-family: 'S-CoreDream-4Regular';}
#bo_v_con p:last-child { margin-bottom:0; }
#bo_v_con .g_title { font-size:24px; font-family:'S-CoreDream-5Medium'; color:#373737;}
#bo_v_con img { margin-bottom:-11px; }

#bo_v_con .zero { background-image: url(../img/zero.jpg); background-repeat: no-repeat;background-position: center; background-size: auto 213px; width: 100%; margin: 0 auto; height: 213px; margin-top:100px;}
.bo_v_nb.flexbox { /*justify-content:space-between;*/ align-items:center;}


#banner { background-color:#0d623b; }
.banner_inner { padding:120px 0; background-image:url(../img/main_banner.png); background-position:95% bottom; background-size:34%; background-repeat:no-repeat;}
.banner_inner .txt_wrap { color:#fff; }
.banner_inner .txt_wrap .banner_title { margin-bottom:30px; }
.banner_inner .txt_wrap .txt { line-height:1.8; margin-bottom:30px;}

.btn { width:150px; padding:13px 0; border-radius:26px; background-color:#76c593; color:#fff; font-size:18px; justify-content:space-around; align-items:center; transition:0.8s; border:1px solid transparent; }

.btn_bo_user.flexbox { justify-content:center; align-items:center; margin-top:80px;}
.btn_bo_user .btn_b01 {float:left;width:70px;text-align:center;margin-left:5px;background:#fff; border:1px solid #222; border-radius:5px;}

#bo_v { border-radius:10px; position:relative;  }
#bo_v .date { position:absolute; right:20px; top:20px; z-index:3; color: #fff;}

#event #bo_v .date { color:#8d8d8d; }

#bo_w { margin:80px 0 160px; }

.more_button { background-color:#76c593; border-radius:25px; color:#fff; text-align:center; line-height:50px; margin-top: 80px; cursor:pointer; transition:0.8s; border:1px solid transparent;}

/*.thum_wrap { padding:150px 0 160px; }*/

/* 비밀번호 수정 */


#password { background-color:#76c593; padding:5px;  display:inline-block; position:absolute; right:40px; top:20px; z-index:999;}
.password { width:160px; height:30px; text-align: center; color: #9c9c9c; background: #fff;}
#password button { height:30px; padding: 0 20px; border-radius: 10px; background: #0d623b; color: #fff; }

/* 썸네일 */

.thum_wrap { padding:150px 0; }
.thum_wrap ul.bo_v_nb { margin:0 -10px; transition:0.8s;}
.thum_wrap ul.bo_v_nb li { padding:10px; width: 33.33%;}
.thum_wrap ul.bo_v_nb li:first-child, .thum_wrap ul.bo_v_nb li:last-child { opacity:0.5; }
.thum_wrap ul.bo_v_nb li > div { background-color: #fff; border-radius: 10px; box-shadow: 1px 0px 21px rgb(0 0 0 / 10%); }
.thum_wrap ul.bo_v_nb li > div > a { overflow:hidden; display:block; position:relative; width:100%; height:0; padding-bottom:62.5%; border-radius:10px 10px 0 0; background-position:center top; background-repeat:no-repeat; background-size:cover; }
.thum_wrap ul.bo_v_nb li a img { position:absolute; top:0; left:0; width:100%; height: auto;}

.thum_wrap .title { padding:20px 10px;
    justify-content: space-between;
    align-items: center; }
.thum_wrap .title .bo_tit { width: calc(100% - 58px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.thum_wrap .title span { display:inline-block; width:48px; height: 48px; border-radius: 50%; background: #f7f7f7; color: #0d623b; line-height: 48px;text-align: center; transition: 0.8s; }

#bo_btn_top { margin-bottom:30px; text-align:right; }


/* footer */

#footer { background-color:#f4f4f4; }
#footer .footer_inner { padding:20px 0 30px; }

.f_list { margin-bottom:14px; }
.f_list li:after { display:inline-block; content:""; clear:both; background-color:#666;width:1px; height:10px; margin:0 16px;}
.f_list li:last-child:after { display:none; }
.f_list li a { color:#666; }

.f_info { margin-bottom:10px; }
.f_info p { line-height:1.8; }

.f_logo { width: 96px; height: 20px; margin-bottom:40px;}
.f_logo a { display:block; background-image:url(../img/f_logo.png); width:100%; height:100%; background-repeat:no-repeat; }


/* 유튜브 게시판 */
.ytb-wrap { position:relative; width:100%; height:0; padding-bottom:56.25%; }
.ytb-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

@media screen and (max-width:1040px){

    .contents { padding: 0 10px; }

}


@media screen and (max-width:900px){

    /* 폰트 크기 */

    /*.title { font-size:18px;}*/
    .banner_title { font-size:40px; }

    #comment { flex-direction:column; }
    .bo_vc_w_info { width:100%; margin-bottom:10px; }
    .comment { width:100%; }
    #wr_name { margin-bottom:0; }

}

@media screen and (max-width:800px){

    .contents { padding:0 20px; }

    .main_inner .contents { padding:0 40px; }

    .list_inner ul { margin: 0 -6px -40px; }
    .list_inner ul li { width:50%; padding: 0 6px 40px; }

    .banner_inner { padding:80px 0; background-size:32%;}
    .banner_title { font-size:30px; }
    .banner_inner .txt_wrap .banner_title { margin-bottom:20px; }
    .banner_inner .txt_wrap .txt { margin-bottom:20px; }

    #header #logo { width:84px; height:33px; }

    #header .nav .ham { text-indent:-9999px; overflow:hidden; display:block; width:100%; height:3px; background: #0b4e2f; z-index:4;}

    #header .nav { width:27px; height:36px; z-index:9999;}
    #header .nav::before { display:block; content:""; clear:both; width: 100%;
    height: 3px; background:#0b4e2f; margin-bottom: 4px;}
    #header .nav::after { display:block; content:""; clear:both; border:0; width: 100%;
    height: 3px; background:#0b4e2f; margin-left:0; margin-top: 4px;}

    #header.on .nav .ham { display:none; }
    #header.on .nav:after { border:0; transform: rotate(-45deg) translate(2px,-2px); margin: 0; transition:0.8s; background-color:#fff;}
    #header.on .nav::before { transform:rotate(45deg); margin-bottom:0; transition:0.8s;background-color:#fff;}

    #header.off #gnb { display:none; }
    .cross { display:block; }

    #nav { border-top:1px solid #fff; padding-top:20px;}
    #gnb { top:0; background:#0d623b; border:0; padding:80px 20px 40px; height:100vh;}
    #gnb .contents { padding:0; }
    #gnb li { float:none; width:100%; text-align:left; }
    #gnb li:after { display:none; }

    #gnb li a { font-size:30px; font-family: 'S-CoreDream-5Medium';}
    #gnb .cross { width:40px; height:40px; position: absolute; right: 20px; top: 20px;}
    #gnb .cross::before { display:inline-block; content:""; clear:both; width:100%; height:3px; background:#fff; transform: rotate(-45deg);}
    #gnb .cross::after { display:inline-block; content:""; clear:both; width:100%; height:3px; background:#fff; transform: rotate(45deg) translate(-14px, -14px); }

    /* 게시판 */

    .sub_visual .txt_wrap { padding:60px 0; }
    /*.sub_visual .contents { padding:0 40px; }*/

    /*.sub_visual_txt { font-size:18px; }*/

    #bo_gall .gall_li { width:50%; }
    .event_wrap #bo_gall .gall_li { width:100%; }

    #bo_gall { padding:60px 0 120px; }

    .more_button { margin-top:50px; }
    .sub_visual_title { font-size:38px; }
    .sub_visual .sub_visual_inner { background-size:35%; }

    #bo_v_con { padding:60px 50px 140px; }
    .v_section { padding:60px 0 120px; }

    #bo_v_title .bo_v_tit { font-size:24px; width:80%;}

    #event #bo_v_title { padding:40px 0 0 50px; }
    #event #bo_v_img { height:120px; }

    #bo_vc article .cm_wrap { padding:20px 30px; }

    .bo_vc_w .btn_submit { width:100%; margin-left:0;}
    .bo_vc_w #captcha { margin-bottom:10px; }
    .bo_vc_w .captcha { flex-wrap:wrap; justify-content:flex-start; }

    .thum_wrap .contents { overflow: hidden; }
    .thum_wrap { padding:80px 0; }
    .thum_wrap ul.bo_v_nb { margin:0 -100px; }
    .thum_wrap ul.bo_v_nb li { padding:10px 5px; }

    .thum_wrap .title .bo_tit { width:calc(100% - 25px); }
    .thum_wrap .title span { width:22px; height:22px; line-height:22px; }

    /* 이용약관 */

    #ctt header h1 { padding:40px 0 0 50px; font-size:24px;}
    #ctt_con { padding:60px 50px 140px; }

    #ctt header { height:90px; }



}

@media screen and (max-width:500px){

    body { font-size:15px; }

    .title { font-size:15px; letter-spacing: -0.5px;}
    .list_inner ul li .title span { width:22px; height:22px; line-height:22px;}
    .list_inner ul li .thum { padding-bottom:60%; }

    .banner_title { font-size:24px; }
    .banner_inner { padding:40px 0; background-size:38% }
    .banner_inner .txt_wrap .banner_title { margin-bottom:10px; }
    .banner_inner .txt_wrap .txt { line-height:1.6; }

    .btn { padding:6px 0; width:120px;}
    #gnb li a { font-size:20px; }

    .event .sub_visual_title { font-size:20px; }
    .sub_visual .sub_visual_inner.event { background-size:30%; }
    .sub_visual_title { font-size:28px; }
    .sub_visual .txt_wrap { padding:45px 0; }

    #bo_gall .bo_tit { width:calc(100% - 25px); }
    .gall_text_href .title { padding:15px 10px; }
    .gall_text_href .title span { width:22px; height:22px; line-height:22px; }

    .sub_visual .sub_visual_inner { background-size:41%; }

    #bo_v_con { padding:40px 30px 100px; }

    #bo_v_con p { line-height:1.6;}
	#bo_v_con p sub { line-height:0;}
    #bo_v_con .zero { background-size:auto 153px; height:153px; margin-top:70px;}
    #bo_v .date { top:15px; font-size:14px; }

    #event #bo_v_title { padding:40px 0 0 40px; }

    .bo_vc_w_info .frm_input { width:49%; padding:0 5px; }
    #bo_vc article .cm_wrap { padding:20px; }

    .bo_vc_w textarea { height:100px; }

    /* 이용약관 */

    #ctt header h1 { padding:40px 0 0 40px; }
    #ctt_con { padding:40px 30px 100px; }

    #captcha.m_captcha #captcha_img { width:140px; height:40px; }
    #captcha.m_captcha #captcha_key { height:40px; line-height:40px;}
}

@media screen and (max-width:420px){

    .title { font-size:13px; }

/*    #captcha.m_captcha #captcha_img { width:140px; }
    #captcha.m_captcha #captcha_key { width:95px; }*/

}

/* hover */

.list_inner ul li > div:hover { box-shadow: 1px 0px 21px rgb(0 0 0 / 30%); }
.list_inner ul li > div:hover .thum { background-size:120%; }
.list_inner ul li > div:hover .title span { background:#a1c983; color:#f7f7f7; }

#bo_gall .gall_li > div:hover { box-shadow: 1px 0px 21px rgb(0 0 0 / 30%); }
#bo_gall .gall_li >:hover .gall_img img { transform: scale(1.2); }
#bo_gall .gall_li > div:hover .gall_text_href .title span { background:#a1c983; color:#f7f7f7; }

.more_button:hover { background-color:#fff; color:#76c593; border:1px solid #76c593;}

.btn:hover { color:#0d623b; background-color:#fff; border:1px solid #0d623b; }

/* 게시판 수정 삭제 버튼 */

.delete { justify-content: flex-end;  margin-bottom:10px;}
.delete p { margin-left:5px; }