@charset "utf-8";

@import "base.css";
@import "layout.css";

/* 공통 */
article[class*="Wrap"] {margin:auto;padding:6.5rem 1.5rem;}
article[class*="Wrap"] a {display:block;}
.a_head {text-align:center;}
.a_head h2.tit2 {font-size:2.375rem;line-height:1.8;color:#333;}
.a_head h2+p {font-size:1.125rem;margin-bottom:3.75rem; font-weight: 300}

/* 메인 */
#hero {position:relative; padding:12rem 2rem 8rem;overflow:hidden;}
#hero::before {content:'';position:absolute;top:0;bottom:0;left:0;right:0;background:#010312 url(../images/main/main_bg01.png) no-repeat center/cover;z-index:-1;animation:sizefit ease-in-out 1s;transform:all ease;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.heroWrap .a_head {padding:2rem 1rem;text-align:center;}
.heroWrap .a_head h2 {font-size:3.5rem; color:#fff;}
.heroWrap .a_head h2 span {font-weight:300;}
.heroWrap .a_head p {font-size:1.063rem;font-weight:300;color:#bfc6d9; margin-bottom:0;}

.seachBox {max-width:1360px;margin:auto;padding:2.25rem 3rem 3rem;border:1px solid rgba(0,0,0,.6); border-radius:2px;background:rgba(0,0,0,.4);}
.seachBox .total {display:block;font-size:1.375rem;color:#fff;text-align:center;margin-bottom:8px;}
.seachBox .total span{font-size:2.25rem;color:#d7df1f}
.seachBox .btn_reset {float:right;margin:-2.8rem 10px 0 0; padding-left:20px;background:url(../images/main/i_reset.png) no-repeat 0 5px;color:#fff;}
.formBox {max-width:1090px;margin:auto;}
.formBox input, .formBox select {height:50px;line-height:48px;}
.formBox .seachList {float:left;width:calc(100% - 130px);margin-right:10px;}
.formBox .seachList .line1 {padding:4px;background-color:#d7df1f;margin-bottom:12px;height:58px;}
.formBox .seachList .line1 .form1 {float:left; width:calc(100% - 50px);border:none;}
.formBox .seachList .line1 .seachGo {width:50px;height:50px;line-height:520px;overflow:hidden;background:#fff url(../images/main/i_search.png) no-repeat center;}
.formBox .line3 {padding:60px;background:#fff;border-radius:3px;}
.formBox .advGo {width:120px;height:58px;font-size:1.125rem;background-color:#8cc227;color:#fff;}
.formBox .advGo span {display:inline-block; padding-left:30px;background:url(../images/main/i_search_more.png) no-repeat 0 6px;}
.formBox .searchPlus {padding-top:10px;}
.formBox .searchPlus dl:not(:last-child) {margin-bottom:20px;}
.formBox .searchPlus dt {display:block; float:left;margin-right:30px; text-align:center;color:#fff; font-weight:500;}
.formBox .searchPlus dt span {display:inline-block; min-width:150px; padding:7px 5px;border:1px solid #c1d351;border-radius:3px;}
.formBox .searchPlus dl:first-of-type dt span {margin-top:21px;}
.formBox .searchPlus dd {display:block; float:left; width:calc(100% - 180px);border-bottom:1px solid #2c3438;}
.formBox .searchPlus li {display:inline-block;margin-right:24px;}
.formBox .searchPlus li:last-child {margin-right:0;}
.formBox .searchPlus li label {color:#e0e0e0; font-weight:100;}
.formBox .searchPlus li input {height:43px;line-height:43px;margin-right:7px;border-color:#eee;}

/* 20220630 수정 */
@media screen and (max-width:985px) {.formBox .searchPlus dl:nth-of-type(4) dt span {margin-top:22px;}}
@media screen and (max-width:881px) {.formBox .searchPlus dl:nth-of-type(3) dt span {margin-top:22px;}}
@media screen and (max-width:867px) {.formBox .searchPlus dl:nth-of-type(1) dt span {margin-top:42px;}}
@media screen and (max-width:707px) {.formBox .searchPlus dl:nth-of-type(2) dt span {margin-top:22px;}}
@media screen and (max-width:640px) {.formBox .searchPlus dl dt span {margin-top:0 !important;}}

/* animation */
.heroWrap .a_head h2, .heroWrap .a_head p,
.a_head.GOact h2, #contents .a_head.GOact p {animation:DropShow ease 1s;}
.a_head.GOact h2 {-webkit-animation-delay:.2s;animation-delay:.2s;}
.seachBox,
.a_head.GOact + .wRap {animation:UpShow ease 1s;}


/* 장비리스트 */
.eqWrap {position:relative;}
.eqWrap .eqList {overflow:hidden;}
.eqWrap .eqList .slidearea {width:3000vw;}
.eqWrap .eqList .item {float:left; width:329px; margin-right:27px;}
.eqWrap .eqList .item a {position:relative; background-color:#f7f7f7;border:1px solid #ebebeb;text-align:center;min-height:420px;z-index:2;}
.eqWrap .eqList .item img {position:relative; width:auto; max-width:100%; height:245px; margin:auto; background-color:#fff;z-index:2;}
.eqWrap .eqList .item figcaption {position:relative; padding:1.688rem;text-align:left;}
.eqWrap .eqList .item figcaption::after {content:'';position:absolute;left:0;right:0;height:245px;bottom:100%;background-color:#fff;z-index:0;}
.eqWrap .eqList .item strong {display:block;font-size:1.35rem;margin-bottom:4px;color:#333;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all;}
.eqWrap .eqList .item p {display:block;font-size:1rem;line-height:1.5em;color:#666; height:3em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all; font-weight: 300;}
.eqWrap .eqList .item em {display:inline-block;margin:-3px auto 1.688rem;padding:5px 19px 5px 25px;border:1px solid #dadada;border-radius:30px;background-color:#fff;}
.eqWrap .eqList .item em span {display:inline-block;padding-right:32px;font-size:.875rem;color:#666;background:url(../images/main/i_arr.png) no-repeat right 1px;}
.eqWrap .eqList .item.active a,.eqWrap .eqList .item a:hover ,.eqWrap .eqList .item a:focus {background:#004a8f;}
.eqWrap .eqList .item.active a strong, .eqWrap .eqList .item.active a p,
.eqWrap .eqList .item a:hover strong, .eqWrap .eqList .item a:hover p,
.eqWrap .eqList .item a:focus strong, .eqWrap .eqList .item a:focus p {color:#fdfdfd;}
.eqWrap .ctrl li a {position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;margin-top:80px;background:rgba(255,255,255,.7) url(../images/main/i_pre.png) no-repeat center center/contain;}
.eqWrap .ctrl .pre a {left:50%;margin-left:-760px;}
.eqWrap .ctrl .next a {right:50%;margin-right:-760px;background-image:url(../images/main/i_next.png);}
.eqWrap .ctrl li a:hover {background-color:rgba(255,255,255,1);border:1px solid #ebebeb;}

/* 알림마당 */
.infoWrap {background:url(../images/main/section_bg.jpg) no-repeat center 0/cover;}
.infoWrap .infoBox, 
.infoWrap .boardBox {border-radius:12px;background:#fff;overflow:hidden;}
.infoWrap .boardBox {float:left;width:calc(100% - 470px);}

.infoWrap .notiHeader {margin-bottom: 13px;}
.infoWrap .notiHeader .title {float:left;font-size:1.625rem; color:#333;font-weight:700;}
.infoWrap .notiHeader a.fr {position:relative;width:40px;height:40px;line-height:400px;overflow:hidden;}
.infoWrap .notiHeader a.fr::before {content:'\E946';position:absolute;left:0;right:0;top:0;line-height:40px;text-align:center;font-family:'dbfont';transform:rotate(45deg);font-weight:bold;}
.infoWrap .boardList {padding:35px 48px 20px 48px;}
.infoWrap .boardList .bbsNone {border-top: 2px dashed #eee; padding:40px; text-align:center; min-height:357px;}
.infoWrap .notiBox {margin-bottom:15px;}
.infoWrap .notiBox .notiDate {float:left;width:95px;margin-right:25px;text-align:center;font-size:2.5rem;font-weight:700;line-height:1;padding:7px 0;color:#000;border:5px solid #f0f0f0;letter-spacing:0;}
.infoWrap .notiBox .notiDate small {display:block;font-size:1rem;color:#7b7b7b;margin-top:5px;font-weight:300;}
.infoWrap .notiBox a {font-size:1.5rem;line-height:32px;padding-top:13px;color:#222;font-weight:500; height:77px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
.infoWrap .notiList {min-height:257px;}
.infoWrap .notiList li {padding:11px 5px 13px;border-top:1px solid #ececec;}
.infoWrap .notiList span {color:#7b7b7b;}
.infoWrap .notiList a {font-size:1.25rem;color:#7b7b7b;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

.infoWrap .infoBox {float:right;width:440px;height:470px;}
.infoWrap .infoList {height:396px;overflow:hidden;}
.infoWrap .infoBox .infoList img {width:100%;}
.infoWrap .ctrl {text-align:center;padding:1.6rem 1rem .8rem;}
.infoWrap .ctrl li,
.infoWrap .ctrl button {display:inline-block;margin:0 5px;line-height:200px;overflow:hidden;}
.infoWrap .ctrl li a {width:20px;height:20px;background-color:#c8cad5;border:3px solid #fff;border-radius:20px;}
.infoWrap .ctrl li.on a, .infoWrap .ctrl li a:hover, .infoWrap .ctrl li a:focus {background-color:#004a8f;border:none;}
.infoWrap .ctrl button {float:right;margin-top:-26px;width:20px;height:20px;background:url(../images/main/ctrl_stop.png) no-repeat center;}
.infoWrap .ctrl button.play {background-image:url(../images/main/ctrl_play.png);}

/* 탄소소식 - 진흥원 */
.boardWrap {background:#f7faff;border-top:1px solid #ebebeb;}
.boardWrap .a_head {position:absolute;text-align:left;z-index:2;}
.boardWrap h3.tit3 {margin-bottom:12px;}
.boardWrap .boardTab {margin-left:15px;}
.boardWrap .boardTab li {float:left;padding-right:7%}
/*.boardWrap .boardTab li:nth-of-type(2) {padding:0 9%;}*/
.boardWrap .boardTab a {position:relative;font-size:1.25rem;padding:.23em 0 2px 0;}
.boardWrap h3.tit3,
.boardWrap .boardTab .on a {font-size:1.5rem;font-weight:700;color:#004b8f;}
#contents .boardWrap .boardTab .on a {transition:none !important;}
.boardWrap .boardTab .on a {padding-top:0;}
.boardWrap .boardTab .on a::after {content:'';display:inline-block;vertical-align:top;margin-left:3px;width:8px;height:8px;border-radius:8px;background:#8cc128;}
.boardWrap .letterBox {float:left; width:25%; position:relative; margin-top:224px;}
.boardWrap .letterBox::before {content:'';position:absolute;top:-151px; width:100%;height:100%;background:url(../images/main/k_bg.png) no-repeat calc(100% - 40px) 0;z-index:1;}
.boardWrap .letterBox a {position:relative;padding:2em 2.5em;margin-right:9.5%;border-radius:12px;background:#2978d4;z-index:1;}
.boardWrap .letterBox a:hover,
.boardWrap .letterBox a:focus {box-shadow:3px 3px 20px #999;}
.boardWrap .letterBox .tit3 {color:#fff;}
.boardWrap .letterBox a p {color:#f7f7f7;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
.boardWrap .letterBox a span {display:block; color:#e4e4e4; font-size:.938rem; letter-spacing:0;margin-top:8px;}

.boardWrap .boardBox {float:left; width:50%;}
.boardWrap .boardList li {float:left; width:50%;}
.boardWrap .boardList li a {margin:10px;padding:35px;background:#fff;border:1px solid #ededed;border-radius:12px;}
.boardWrap .boardList li a:hover,
.boardWrap .boardList li a:focus {box-shadow:3px 3px 20px #ccc;}
.boardWrap .boardList li a em {display:block;font-size:1.188rem; line-height:1.5em;height:3em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
.boardWrap .boardList li a span {display:block;font-size:1rem; color:#777; letter-spacing:0;margin-top:1.4em;}

.boardWrap .bizBox {float:left; width:25%;}
.boardWrap .bizBox .bizWrap {overflow:hidden;margin-left:9.5%;}
.boardWrap .bizWrap .tit3 {float:left;}
.boardWrap .bizWrap .ctrl {float:right;line-height:40px;font-family:Play,sans-serif;}
.boardWrap .bizWrap .ctrl a {display:inline-block;width:40px;height:40px;line-height:400px;overflow:hidden;}
.boardWrap .bizWrap .ctrl a {position:relative;width:40px;height:40px;line-height:400px;overflow:hidden;}
.boardWrap .bizWrap .ctrl a::after {content:'\E906';position:absolute;left:0;right:0;top:0;line-height:40px;text-align:center;font-family:'dbfont';}
.boardWrap .bizWrap .ctrl a:last-child:after {content:'\E908';}
.boardWrap .bizWrap .ctrl b {font-weight:bold;color:#000;}
.boardWrap .bizList .item:not(.active) {display:none;}
.boardWrap .bizList .item {padding:35px;background:#fff;border:1.7px solid #ededed;border-radius:12px;border-top:none;border-left:none;}
.boardWrap .bizList .cate1 {display:inline-block;font-size:.875em; line-height:1.4;letter-spacing:0; padding:0 14px;color:#004b8f;border:1px solid #004b8f;border-radius:20px;}
.boardWrap .bizList strong {display:block;margin:1em 0 34px 2px; font-size:1.25em;line-height:1.5em;height:3em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
.boardWrap .bizList .cate2 {display:block;;margin-bottom:7px;width:4.6em;text-align:center;font-size:.875em; background:#f2f5f7;color:#424b5a;}
.boardWrap .bizList .period>span {display:block;color:#777;letter-spacing:0;}
.boardWrap .bizList .item a {display:block;color:#fff;background:#004b8f;text-align:center;padding:10px 20px;margin-top:30px;}


@media screen and (max-width:1580px) {
    .eqWrap .eqList {width:calc(100% - 140px); padding:0;}
    .eqWrap .eqList::before {content:'';position:absolute;width:15%; right:-5%;height:100%;background:rgba(0,0,0,.3); background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.25) 75%);}
    .eqWrap .ctrl .pre a {margin-left:calc(-50% + 20px);}
    .eqWrap .ctrl .next a {right:50%;margin-right:calc(-50% + 20px);}

}

@media screen and (max-width:1180px) {
    .boardWrap .letterBox {width:100%;margin:10rem 0 2rem;}
    .boardWrap .letterBox::before {background-position:99% 1em;}
    .boardWrap .letterBox a {margin-right:0;}
    .boardWrap .boardBox  {width:65%;}
    .boardWrap .bizBox {width:35%;}

}

@media screen and (max-width:1000px) {
    article[class*="Wrap"] {padding:5rem 1.5rem;}
    article[class*="Wrap"] .wRap {padding:0;}
    .a_head h2+p {margin-bottom:2.25rem;}

    .seachBox .btn_reset {margin-right:6px;}

    .infoWrap .boardBox {width:100%;margin-bottom:2.5rem;}
    .infoWrap .boardList .bbsNone {min-height:auto;}
    .infoWrap .infoBox {float:none;margin:auto;}

	.boardWrap .boardTab li {padding-right:3%}

}

@media screen and (max-width:840px) {
    .eqWrap .eqList {width:calc(100% - 60px);}
    .eqWrap .eqList .item {float:none; display:inline-block; width:290px; margin:auto;}
    .eqWrap .eqList .item:not(:first-child) {margin:0 0 0 30px;}
    .eqWrap .eqList .item a {min-height:initial;}
    .eqWrap .eqList .item img {height:216px;}
    .eqWrap .eqList .item figcaption::after {height:216px;}
    .eqWrap .ctrl li a {width:50px;height:50px;}
    .eqWrap .ctrl .pre a {margin-left:-50%;}
    .eqWrap .ctrl .next a {margin-right:-50%;}

    .infoWrap .boardList {padding:25px 30px 10px 30px;}
    .infoWrap .notiBox a {font-size:1.25rem;}
    .infoWrap .notiList a {font-size:1.125rem;}

}

@media screen and (max-width:768px) {
    article[class*="Wrap"] {padding:4.5rem 1.5rem;}
    .a_head h2.tit2 {font-size:2rem;}
    .a_head h2+p {font-size:1rem;margin-bottom:1.5rem}

    #hero {padding:7rem 1.5rem 4rem;}
    .heroWrap .a_head {padding-bottom:1.5rem;}
    .heroWrap .a_head h2 {font-size:2.5rem;}
    .heroWrap .a_head p {font-size:1rem;}

    .seachBox {padding:2rem;}
    .seachBox .total {font-size:1.25rem;}
    .seachBox .total span {font-size:1.75rem;}
    .formBox .seachList {float:none;margin:0;width:100%;}
    .formBox .seachList .line1 {height:50px;margin-bottom:10px;}
    .formBox .seachList .line1 .seachGo {width:42px;height:42px;background-position:center -6px;}
    .formBox .seachList .line1 .form1 {width:calc(100% - 42px);}
    .formBox input, .formBox select {height:42px;line-height:40px;}
    .formBox .advGo {width:100%;height:auto;margin-bottom:10px;}
    .formBox .advGo span {display:inline-block;padding:7px 0 9px 28px;background-position:0 center;font-size:1.125rem;}

    .boardWrap .boardBox  {width:100%;}
    .boardWrap .bizBox {width:100%;}
    .boardWrap .bizBox .bizWrap {margin:10px auto 0 auto;padding:10px;}

}

@media screen and (max-width:640px) {
    .formBox .advGo span {font-size:1.063rem;}
    input, select, textarea {font-size:15px;}
    input::placeholder {text-indent:-4.6em;}
    input::-webkit-input-placeholder {text-indent:-4.6em;}

    .a_head h2.tit2 {font-size:1.75rem;}
    .a_head h2+p {margin-bottom:1.4rem;}
    .infoWrap .notiHeader .title {font-size:1.5rem;}

    #hero {padding: 6rem 1.5rem 4rem;}
    .heroWrap .a_head {padding:1.6rem 1rem 1.9rem;}
    .heroWrap .a_head * {word-break:keep-all;}
    .heroWrap .a_head h2 {font-size:2rem;}
    .heroWrap .a_head p br {display:none;}

    .seachBox {padding:1.35rem 1.5rem 1.5rem;}
    .seachBox .btn_reset {margin:-6px 0 9px 0;text-align:right;}
    .formBox .seachList::before {content:'';display:block;clear:both;}
    .formBox .seachList .line2 select {display:block; width:100%; margin:12px 0 !important;}
    .formBox .searchPlus {padding-top:0;}
    .formBox .searchPlus dt,
    .formBox .searchPlus dd {float:none;width:100%;}
    .formBox .searchPlus dt span {min-width:100%;background:url(../images/main/i_select_green.png) no-repeat calc(100% - 10px) center;border-radius:0;border-color:#cce830;cursor:pointer;}
    .formBox .searchPlus dt.view span {background-color:#2978d4;border-color:#2978d4;color:#fff;}
    .formBox .searchPlus dd:not(.view) {display:none;}
    .formBox .searchPlus dl:not(:last-child) {margin-bottom: 10px;}
    .formBox .searchPlus ul {display:block;margin:10px;}
    .formBox .searchPlus li {display:block;margin:0 !important;}

    .eqWrap .eqList .item strong {font-size:1.125rem;}
    .eqWrap .eqList .item p {font-size:.938rem;}

}

@media screen and (max-width:545px) {
    article[class*="Wrap"] {padding:3.5rem 1.5rem 3rem;}

    .infoWrap .infoBox {width:100%;height:auto;}
    .infoWrap .infoList {height:auto;}
    .infoWrap .infoBox a img {width:calc(100vw - 3rem); height:auto;}

    .boardWrap .boardTab a,
    .boardWrap .bizList strong {font-size:1.125rem;}
    .boardWrap h3.tit3, .boardWrap .boardTab .on a {font-size:1.313rem;}
    .boardWrap .letterBox a {padding:1.5rem 1.7rem;}
    .boardWrap .boardTab {margin-bottom:10px;}
    /*.boardWrap .boardTab li:nth-of-type(2) {padding:0 7%;}*/
    .boardWrap .boardList li {width:100%;}
    .boardWrap .boardList li a,
    .boardWrap .bizList .item {margin:0 auto 20px; padding:1.5rem;}

}

@media screen and (max-width:480px) {
    .eqWrap {padding-bottom:calc(3rem + 50px) !important;}
    .eqWrap .eqList {width:100%;}
    .eqWrap .eqList .item {width:calc(100vw - 3rem);}
    .eqWrap .ctrl li a {top:auto;bottom:15px;}
    .eqWrap .ctrl .pre a {margin-left:-25%;}
    .eqWrap .ctrl .next a {margin-right:-25%;}

    .infoWrap .boardList {padding:20px 20px 10px;}
    .infoWrap .notiBox .notiDate {float:none;width:auto;border:none;text-align:left;font-size:1rem;padding-bottom:0;}
    .infoWrap .notiBox .notiDate small {display:inline-block;margin-left:8px;}
}

@media screen and (max-width:430px) {
    div,ul,li,ol,dl,dd,dt,p,input,select,button { font-size:15px;}
    .heroWrap .a_head h2 {line-height:1.4;margin-bottom:.75rem;}
    .heroWrap .a_head p {display:none;}

    .boardWrap .letterBox::before {top:-62%;background-size:80vw auto;}

}

@media screen and (max-width:360px) {
    div,ul,li,ol,dl,dd,dt,p,input,select,button { font-size:14px;}
    .seachBox .total {font-size:1.125rem;letter-spacing:0;}
    .seachBox .total span {font-size:1.5rem; display:inline-block;}
    .heroWrap .a_head p {display:none;}

    .boardWrap .boardTab .on a {font-size:1.25rem;}

}