@charset "utf-8";
@import url("/css/common/font.css");
@import url("/css/common/icon.css");
@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
/*-------------------------------------------------
Author : PARK SEOJIN
Create date : 2017. 11.16
-------------------------------------------------*/

body {margin:0; padding: 0; font-size:16px; font-family: 'Noto', sans-serif; color:#444;}
ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; list-style: none;}
a {color:#555; text-decoration: none; margin:0; padding:0; vertical-align:baseline;}
a:hover{}
img {border: 0;	vertical-align:top; outline:0; margin:0; padding:0;}
table{border-collapse:separate; border-spacing:0; width:100%;}
caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
select, input, textarea {color: #454545; font-size: 1em;}
select, input {vertical-align: middle;}
input[type="submit"] {-webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
address,em{font-style:normal;}
button{border:0;background:none; cursor:pointer;}
*,*:before,*:after{box-sizing:border-box;}
::selection{background:#2277f2;color:#fefefe}
hr{margin: 0; border: none; padding: 0; display:block;}
figure, figcaption{padding:0; margin:0;}
fieldset{border: none; padding: 0; margin: 0;}
legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hidden {overflow:hidden; width:100%; height:0; margin:0; padding:0; font-size:0; line-height:0;}


/* Skip to content */
.skip-to {position:absolute; top:-99px; left:0; background:#333; color:#fff; width:100%; padding:10px 0; text-align:center; text-decoration:none; z-index:999;}
.skip-to:hover,
.skip-to:focus,
.skip-to:active {display:block; top:0;}

.clearfix{position:relative;}
.clearfix:after{content:""; display:block; clear:both;}
.left-zone{float:left !important; margin-bottom: 30px;}
.right-zone{float:right !important;}

.text-center{text-align:center !important;}
.text-left{text-align:left !important;}
.text-right{text-align:right !important;}

/* ...생성 */
.substring{position:relative; padding-right:15px;    font-weight: 400;}
/*.substring:after{position:absolute; bottom:0; right:0; content:"..."; font-size:14px; }*/

/* 반응형 아이프레임, 오브젝트, 엠베디드 */
.embed-container { position: relative; padding-bottom:40%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.img-responsive{max-width: 100%; display: block; margin: 0 auto;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.fp-auto-height.fp-section,.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell{height: auto !important}
.fp-tableCell {position:relative; display:block; vertical-align: middle; width: 100%; height: 100%;}

.fade-out {opacity:0}

.font {font-family:'Nanum Myeongjo', serif}
.robo {font-family:'Roboto', sans-serif}
.color01 {color:#2277f2 !important}
.color02 {color:#91dc44 !important}
.mT30 {margin-top:30px}


.depth3-title {position:relative; padding-bottom:39px; margin-bottom:52px; font-size:2.5em; color:#222; text-align:center; font-weight:400}
.depth3-title span {display:block; font-size:0.4em; color:#777; font-family: 'Roboto', sans-serif; letter-spacing:0.08em}
.depth3-title:after {position:absolute; left:50%; bottom:-10px; transform:translateY(-50%); width:2px; height:20px; background:#222; content:''}
.intro {padding-bottom:34px; margin-bottom:50px; border-bottom:1px solid #e2e2e2; text-align:center; color:#333; font-size:1.250em; font-weight:600}
.intro2 {margin-bottom:24px; font-size:1.4em; font-weight:600}
.intro3 {font-family:'Noto', sans-serif; font-size:0.8em; font-weight:400}
.intro.intro3 {font-size:1em}
.intro span {display:block; color:#222; font-size:1.5em; font-weight:600}
.section {margin-top:60px}
.section:after {display:block; clear:both; content:''}


.title01 {position:relative; padding-top:20px; margin:60px 0 34px; font-size:1.875em; color:#222; text-align:center; font-weight:600}
.title01:before {position:absolute; left:50%; top:0; transform:translateX(-50%); width:22px; height:4px; background:#2277f2; content:''}
.title01.left {display:inline-block; float:left; width:16%; margin:0 60px 0 0; text-align:left; white-space: nowrap;}
.title01.left:before {transform:translateX(0); left:0}
.section .content {display:inline-block; float:left; width:74%;}
.title02 {margin:30px 0 20px; font-size:1.375em; color:#26315c}
.title03 {margin:22px 0 12px; font-size:1.125em; color:#2277f2}
.first {margin-top:0}

.table-style {overflow:hidden; overflow-x:scroll; -ms-overflow-style: none; }
.table-style::-webkit-scrollbar {display:none}
.table-style table {margin-left:-1px;  min-width:900px}
.table-style thead th {padding:12px 0; border-top:1px solid #444; border-bottom:1px solid #444; background:#f9f9fb; color:#333;}
.table-style tbody th {border-bottom:1px solid #e2e2e2}
.table-style tbody td {padding:12px 10px; border-left:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; text-align:center; font-family:'Roboto', sans-serif;}

.bbs-search {margin-bottom: -40px;}
.bbs-search:after {display:block; content:''; clear:both}
.bbs-search p {float:left; line-height:40px}
.bbs-search .search {float:right}
.bbs-search .search > * {vertical-align:middle}
.bbs-search .search select {padding:0 11px 0 14px; height:40px; line-height:40px; border:1px solid #c6c6c6; background:#f9f9fb; vertical-align:bottom}
.bbs-search .search input[type="text"] {height:40px; line-height:40px; border:1px solid #c6c6c6}
.bbs-search .search button {margin-left:-1px; height:40px; line-height:40px; width:40px; border:1px solid #c6c6c6; background:#f9f9fb;}
.bbs-search .search button i {font-size:1.2em; color:#525252}

.board-list {border-top:1px solid #444}
.board-list td {padding:18px 16px; border-bottom:1px solid #e2e2e2; text-align:center; color:#444;}
.board-list td a {color:#333; font-weight:600}
.board-list tbody td.file a {padding-right:24px; background:url('/images/korean/contents/file.png') right center no-repeat}


.bbs-search p {float:left; line-height:40px;}
.bbs-search .right-zone select {padding:0 11px 0 14px; height:40px; line-height:40px; border:1px solid #c6c6c6; background:#f9f9fb; vertical-align:bottom}
.bbs-search .right-zone input[type="text"] {height:40px; line-height:40px; border:1px solid #c6c6c6; padding:0 10px; margin-left: 3px;}
.bbs-search .right-zone button {position:relative; margin-left:-2px; height:40px; line-height:40px; width:40px; border:1px solid #c6c6c6; background:#f9f9fb;}
.bbs-search .right-zone button:before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-family:'icon'; content:'\e920'; font-size:1.2em}

table.bbs {border-top:1px solid #444}
table.bbs th {background:#f9f9fb; padding:18px 16px; border-bottom:1px solid #444}
table.bbs td {padding:18px 16px; border-bottom:1px solid #e2e2e2; text-align:center; color:#444;}
table.bbs td a {color:#333; font-weight:600}
table.bbs td.story {text-align:left !important}
table.bbs td.file a {padding-right:24px; background:url('/images/korean/contents/file.png') right center no-repeat}
table.bbs tr:hover {background:#f9f9fb}

.gallery-list {position:relative; padding-top:40px; border-top:1px solid #444; border-bottom:1px solid #e2e2e2}
/*.gallery-list:before {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:1px; background: #e2e2e2; content:''}*/
.gallery-list ul {overflow:hidden}
.gallery-list li {position:relative; float:left; width:32%; margin:2.6% 0 2.6% 2%}
/* .gallery-list li:after {position:absolute; left:0; bottom:-10.6%; width:106%; height:1px; background:#e2e2e2; content:''}*/
.gallery-list li:nth-child(3n+1) {margin-left:0}
.gallery-list li:nth-child(-n+3) {margin-top:0}
.gallery-list a {display:block; font-weight:900}
.gallery-list span {display:block;}
.gallery-list .img, .video .img {position:relative; margin-bottom:18px; width:100%}

.gallery-list .img img {max-width:100%}
.video-list .img:before, .new-video-list .img::before {position:absolute; left:50%; top:47%; transform:rotate(-45deg) translate(-50%, -50%); width:0; height:0; border-left:17px solid transparent; border-bottom:17px solid #fff; content:''; z-index:1}
.video-list .img:after, .new-video-list .img:after {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:50px; height:50px; border-radius:50%; background:rgba(0,0,0,.6); content:''}
.gallery-list .txt {}
.gallery-list .title {display:inline-block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; font-size:1.250em; color:#333; transition:color .4s}
.gallery-list .date {font-size:0.875em; color:#777; font-family:'Roboto', sans-serif;}
.gallery-list a:hover .title {color:#b83176}

.view {border-bottom:1px solid #e2e2e2}
.view-title {overflow:hidden; padding:20px 20px 21px; border-top:1px solid #444; border-bottom:1px solid #e2e2e2; background:#f9f9fb;}
.view-title strong {float:left; font-size:1.250em}
.view-title .date {float:right; color:#444}
.view-content {margin:40px;}
.view-content .text-center {text-align:inherit !important}
.view-content .text-center iframe {
  width: 100%;
  height: 700px;
}
.view-content span {font-family:'Noto', sans-serif !important; font-size:1em !important; text-align:left !important}
.view-content img {max-width:100%}
.attach-file {border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2}
.attach-file strong {font-size:14px; color:#777; background:#f9f9fb; font-weight:600}
.attach-file p {display:inline-block}


.board-article.bottom-content-line {padding:40px 20px; margin-bottom:40px; border-bottom:1px solid #e2e2e2}
.board .view-page {border-top:1px solid #444;}
.board .view-page thead th {padding:20px 20px 21px; background:#f9f9fb;  border-bottom:1px solid #444}
.board .view-list th, .board .view-list td {padding:20px 20px 21px; border-bottom:1px solid #e2e2e2}
.board .inner-contents {margin:40px; border-bottom:1px solid #e2e2e2}
.board-button-wrap {text-align:center}
.board-button a {display:inline-block; border:1px solid #26315c; padding:11px 31px 11px 32px;}

.new-video-list {margin-top:40px; border-top:1px solid #444; border-bottom:1px solid #e2e2e2}
.new-video-list {position:relative; padding:24px 0 30px}
.new-video-list strong {display:block; padding-bottom:20px; font-size:1.250em}
.new-video-list span {display:block}
.new-video-list .img {position:relative;}
.new-video-list .txt {margin-top:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#444}
.new-video-list .bx-controls-direction {position:absolute; right:0; top:26px;}
.new-video-list .bx-controls-direction a {display:inline-block;}
.new-video-list .bx-controls-direction a:before {font-family:'xeicon'; font-size:1.2em}
.new-video-list .bx-prev:before {content:'\e93b'}
.new-video-list .bx-next:before {content:'\e93e'}
.new-video-list .bx-wrapper {max-width:100% !important}

.list-btn {display:block; margin-top:33px; text-align:center}
.list-btn a {display:inline-block; padding:11px 31px 11px 32px; border:1px solid #26315c; font-size:0.938em; color:#26315c; transition:all .4s ease-in-out}
.list-btn a:hover {background:#26315c; color:#fff}

.publication {padding-top:40px; border-top:1px solid #444; border-bottom:1px solid #e2e2e2}
.publication ul {overflow:hidden}
.publication li {position:relative; float:left; width:24%; margin:2.6% 0 0 1.3%}
.publication li:nth-child(4n+1) {margin-left:0}
.publication li:nth-child(-n+4) {margin-top:0}
.publication a {display:block;}
.publication span {display:block;}
.publication .img {position:relative; margin-bottom:18px; padding:34px; width:100%; height:310px; border:1px solid #e2e2e2}
.publication .img span {position:absolute; right:0; bottom:0; width:46px; height:46px; background:#e2e2e2; transition:background .2s}
.publication .img span:after {position:absolute; left:22%; top:50%; transform:rotate(90deg) translate(-50%, -50%); font-family:'icon'; content:'\e912'}
.publication a:hover .img span {background:#26315c}
.publication a:hover .img span:after {color:#fff}
.publication .img img {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:50%; height:80%}
.publication .title {display:block; text-align:center; font-size:1.125em; color:#333; transition:color .4s; min-height: 55px;}
.publication .date {font-size:0.875em; color:#777}
.publication a:hover .title {color:#b83176}

.paging {margin:30px 0; text-align:center}
.paging div {overflow:hidden; display:inline-block;}
.paging div a {display:inline-block; color:#979797}
.paging div > a {background:#fff; border:1px solid #b7b7b7; width:30px; padding:2px 0; vertical-align:middle}
.paging div span a {position:relative; padding:0 4px 7px 4px; margin:0 6px; color:#444}
.paging div span a:after {position:absolute; left:0; bottom:0; width:0; height:2px; background:#b83176; content:''; transition:width .4s}
.paging div span a:hover, .paging div span a.active {color:#b83176}
.paging div span a:hover:after,.paging div span a.active:after {width:100%}
.paging div > a.first i:after {content:'\e93c'; margin-left:-10px}
.paging div > a.last i:after {content:'\e93f'; margin-left:-10px}
.paging div > a.prev {margin:0 18px 0 0;}
.paging div > a.next {margin:0 0 0 18px}

.pagenation {margin:30px 0; text-align:center}
.pagenation div {overflow:hidden; display:inline-block;}
.pagenation div a {display:inline-block; color:#979797}
.pagenation div > a {background:#fff; border:1px solid #b7b7b7; width:30px; padding:2px 0; margin:0 18px; vertical-align:middle}
.pagenation div span a {position:relative; padding:0 4px 7px 4px; margin:0 6px; color:#444}
.pagenation div span a:after {position:absolute; left:0; bottom:0; width:0; height:2px; background:#b83176; content:''; transition:width .4s}
.pagenation div span a:hover, .paging div span a.active {color:#b83176}
.pagenation div span a:hover:after,.paging div span a.active:after {width:100%}

.xi-new { color: #126fb4; font-size: 1.1rem; display: inline-block; vertical-align: middle; margin-left: .4rem; }

.btnWrap {text-align:center}
.btn i {margin-right:7px; transform:rotate(90deg)}
.btn01 {display:inline-block;}
.btn01 a {overflow:hidden; display:inline-block; width:100%; color:#fff; text-align:center}
.btn01 a > * {display:block; padding:15px 0; float:left; }
.btn01 span {width:238px; background:#26315c}
.btn01 em,
.btn01 b {position:relative; padding-left:33px; width:172px; background:#1b2549}
.btn01 em:before,
.btn01 b:before {position:absolute;  left:30px; top:18px; font-family:'icon'; content:'\e912'; transform:rotate(90deg);}
.btn01 em.pdf_down,
.btn01 b.pdf_down {padding-left:0;width: 45px;}
.btn01 em.pdf_down::before,
.btn01 b.pdf_down::before {display:inline-block;position:relative;left:auto;right:auto;top:auto;bottom:auto;transform: rotate(180deg);margin-right: 0rem;}
.btn01.bg02 span {background:#26315c}
.btn01.bg02 em {background:#1b2549}
.btn01.bg03 span {background:#2c7155}
.btn01.bg03 em {background:#1f6046}
.btn.btn01 i:before {color:#fff}
.btn.btn02 i:before {color:#26315c}
.btn02 {position:relative; display:inline-block; padding:10px 20px 10px 50px; margin-left:6px; background:#fff; border:1px solid #26315c; color:#26315c; transition:all .4s}
.btn02:first-child {margin-left:0}
.btn02:before {position:absolute;  left:30px; top:12px; font-family:'icon'; content:'\e912'; transform:rotate(90deg); font-size:1.2em}
.btn02.pdf:before {font-family:'xeicon'; content:'\ea84'; transform:rotate(0);}
.btn02:hover {background:#26315c; color:#fff}
.btn.btn02:hover i:before {color:#fff !important}
.btn03 {display:inline-block; padding:10px 25px; background:#444; border:1px solid #444; color:#fff; font-size:0.938em; font-weight:600; border-radius:4px; transition:all .4s}
.btn03:hover {background:#fff; color:#444}


ul.bul > li {position:relative; padding-left:10px; color:#444; line-height:2em}
ul.bul > li:before {position:absolute; left:0; top:14px; width:4px; height:4px; background:#26315c; border-radius:50%; content:''}
ul.bul.dot2 > li {padding-left:9px; font-size:0.938em; line-height:1.8em}
ul.bul.dot2 > li:before {top:12px; width:3px; height:3px; background:#2277f2;}

ul.bul.dot3 > li {padding-right:10px; color:#444; line-height:2em; text-align:right}
ul.bul.dot3 > li:before {background:#2277f2; left:inherit; right:0}

ul.num > li {position:relative; padding-left:25px; counter-increment:number}
ul.num > li:before {position:absolute; left:0; top:0; color:#2277f2; content:counter(number,decimal) }

ul.num.korean > li {
    padding-left: 36px;
}
ul.num.korean > li:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    content: '하나';
}

ul.bul-kor > li {position:relative; padding-left:25px; counter-increment:kor}
ul.bul-kor > li:before {position:absolute; left:0; top:0; content:counter(kor,hangul)'.' }

.tab {text-align:center; margin-bottom:30px}
.tab li {display:inline-block; margin-left:25px; margin-left: 60px; width:128px; vertical-align:top}
.tab li:first-child {margin-left:0}
.tab li a {display:inline-block; font-size:1.125em; color:#777; transition:color .4s; white-space: nowrap;}
.tab li i {position:relative; display:block; margin:0 auto 14px; width:90px; height:90px; border-radius:50%; background:#eee; color:#888; font-size:3em; transition:all .4s}
.tab li i:before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.tab li.active i {background:#042E7D; color:#fff}
.tab li.active a {color:#042E7D}
.tab li i.eco:before {font-size:1.2em}

.progress {
	font-size:14px;
	padding-top:30px;
	color:#888;
	position: absolute;
    top: 40%;
    left: 45%;
}
.progress i {
	font-size:94px;
}

/* gallery */
div#board-gallery {overflow:hidden}
.gallery-list .img a {height:280px}
.gallery-list .img img {width:100%; height:100%}

div#board-gallery p.no-data {margin:0; padding:30px 0; font-size:12px; color:#676767; font-weight:bold; text-align:center;}

.gallery-total {
	position: absolute;
    top: 10px;
}

.board-article img {max-width: 100%;}



@media(max-width:1025px){
 .gallery-list .img a {height:180px}
}


.web {display:block;}
.mobile {display:none}

.margin0 {margin-bottom:0}

@media (max-width:1400px){
	.container{width:100%;}
}
@media (max-width:1025px){
  /* tab */
  .tab li{width:19%; margin: 0 2%;}

  .title01.left {display:inline-block; float:none; width:100%; text-align:center}
  .title01.left:before {transform:translateX(-50%); left:50%}
  .section .content {float:none; width:100%}

  .publication li {width:49%}
  .publication li:after {bottom:-4.6%}
  .publication li:nth-child(-n+4) {margin-top:2.6%}
  .publication li:nth-child(4n+1) {margin-left:2%}
  .publication li:nth-child(odd)  {margin-left:0}
  .publication .img {height:400px}
	
  table.bbs th:nth-child(n+3), table.bbs td:nth-child(n+3) {display:none} 
  .web {display:none}
  .mobile {display:block}
}
@media (max-width:767px){
  body {font-size:14px}

  .gallery-list li {width:49%}
  .gallery-list li:after {bottom:-4.6%}
  .gallery-list li:nth-child(-n+3) {margin-top:2.6%}
  .gallery-list li:nth-child(3n+1) {margin-left:2%}
  .gallery-list li:nth-child(odd)  {margin-left:0}

  .publication .img {height:280px}
  .tab li a {white-space: normal;}
}

@media (max-width:600px){
	.left-zone.gallery-total {display: contents;}
}

@media (max-width:425px){
	body {font-size:12px}
  .btn01 span {width:60%}
  .btn01 em {width:40%}
  .publication .img img {width:80%}
  .paging div span a {margin:0 2px}
  .paging div > a.prev {margin:0 2px 0 0}
  .paging div > a.next {margin:0 0 0 2px}
  /*.tab li {width:25%;}
  .tab li:nth-child(-n+3) {margin-bottom:10px}*/
  .tab li i {width:60px; height:60px}

}


.publication .gallery-total span{display: inline-block;}
.publication span.gallery-total {display: inline-block;}

/* dart */
.dart {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.dart table.bbs {
    border-spacing: 0 10px;
}
.dart table.bbs th {
    background: #333;
    color: #fff;
    font-weight: 300;
    padding: 12px 16px;
}
.dart table.bbs tbody {
    position: relative;
    top: -10px;
}
.dart table.bbs tbody tr td {
    border-top: 1px solid #e2e2e2;
}
.dart table.bbs tbody tr td:first-child {
    border-left: 1px solid #e2e2e2;
}
.dart table.bbs tbody tr td:last-child {
    border-right: 1px solid #e2e2e2;
}
.dart table.bbs tbody tr td:nth-child(2) {
    text-align: left;
}
.dart table.bbs tr td {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.dart table.bbs tr:hover td {
    background: #2277f2;
    border-color: #2277f2;
    color: #fff;
}
.dart table.bbs tr:hover td a {
    color: #fff;
}

@media (max-width: 1025px) {
    .dart table.bbs th:nth-child(2), .dart table.bbs td:nth-child(2) {
        border-right: 1px solid #e2e2e2;
    }
}

/* //dart */

/* 211012 윤리경영 하단 버튼 스타일 추가 */
/* .btn01 a {
  width: auto;
  vertical-align: top;
}
.btn01 em {
  display: inline-block;
  vertical-align: top;
  padding: 15px 0;
  color: #fff;
}
.btn01 em:before {
  display: inline-block;
  position: relative;
  left: inherit;
  top: inherit;
  vertical-align: middle;
  margin-right: 0.4rem;
} */
/* //211012 윤리경영 하단 버튼 스타일 추가 */

.tab li i[class*="sc"]::before {width:100%;height:100%;content:"";}
.tab li i.scc::before{background: url("/ecoprobm/images/common/scc_gray.png") no-repeat center center;}
.tab li.active i.scc::before{background: url("/ecoprobm/images/common/scc_white.png") no-repeat center center;}
.tab li i.scp::before{background: url("/ecoprobm/images/common/scp_gray.png") no-repeat center center;}
.tab li.active i.scp::before{background: url("/ecoprobm/images/common/scp_white.png") no-repeat center center;}


.tab li i.elec::before{width:100%;height:100%;content:"";background: url("/images/korean/common/icon_battery_gray.svg") no-repeat center center;}
.tab li.active i.elec::before{background: url("/images/korean/common/icon_battery_white.svg") no-repeat center center;}

.tab li i.human::before{width:100%;height:100%;content:"";background: url("/ecoprobm/images/common/human_gray.png") no-repeat center center;}
.tab li.active i.human::before{background: url("/ecoprobm/images/common/human_white.png") no-repeat center center;}