@charset "utf-8";
.wrap-header .head-logo{width: 26%;}

/*센터소개 상단*/
.majorIntroNoImgWrap .introTitle > div:nth-child(1){font-size: 30px;}
.majorIntroNoImgWrap .introTitle > div:nth-child(2){font-size: 32px;}
.majorIntroNoImgWrap .introTitle{padding-top: 160px; padding-bottom: 180px;}

@media only screen and (max-width:1024px){
  .rowBox_2 > li{width: 100%;}
}

/*ESG센터소개 주요업무*/
.main.rowBox_2 > li{text-align: center;}
@media only screen and (max-width: 1024px){
  .main.rowBox_2 > li{width: calc(33% - 10px);margin-bottom:10px;}
}
@media only screen and (max-width: 768px){
    .main.rowBox_2 > li{width: 100%;}
}

/*조직도*/
.org-top {position: relative; padding-bottom: 45px;}
.org-top::before {content: ""; position: absolute; width: 2px; height: 100%; z-index: -1; background: #BBBBBB; left: 50%; margin-left: -1px; top: 0;}
.org-top p {width: 200px; font-size: 20px; line-height: 55px; letter-spacing: -0.5px; color: #fff; font-family: "Noto Medium"; text-align: center; background: url("/sites/ESG/images/sub/org_root_1.png") no-repeat center; margin: 0 auto;}

.org-mid {position: relative; margin-top: -17.5%; padding-bottom: 100px;}
.org-mid::before {content: ""; position: absolute; width: 2px; height: 100%; z-index: -1; background: #BBBBBB; left: 50%; margin-left: -1px; top: 0;}
.org-mid > div {position: relative; float: left; width: 50%;}
.org-mid > div::before {content: ""; position: absolute; width: 80%; height: 2px; z-index: -1; background: #BBBBBB; top: 125px;}
.org-mid > div.org-mid-left {right: 0;}
.org-mid > div.org-mid-right {left: -1px;}
.org-mid > div ul {background: #F5FAFB;}
.org-mid > div li {display: inline-block; vertical-align: top; text-align: center; width: 100%; background: #F5FAFB; border: 1px solid #1D3E8F; line-height: 21px; font-size: 14px; letter-spacing: -0.5px; color: #2d5a9e; font-family: "Noto Medium"; margin: 0 0.3% 5px; padding: 10px 0;}
.org-mid-left {padding-right: 20%; text-align: right;}
.org-mid-right {padding-left: 20%; text-align: left;}
.org-mid .org-root-box-content li{width: 45%;}
.org-mid .org-root-box-title p{color: #000; font-family: 'Noto Medium'; text-align: center; font-size: 16px;}


.org-bottom-inner {position: relative; padding-bottom: 24px;}
.org-bottom-inner::before {content: ""; position: absolute; width: 2px; height: 100%; z-index: -1; background: #BBBBBB; left: 50%; margin-left: -1px; top: 0;}
.org-bottom p {width: 200px; font-size: 18px; line-height: 55px; letter-spacing: -0.5px; color: #fff; font-family: "Noto Medium"; text-align: center; background: url("/sites/ESG/images/sub/org_root_3.png") no-repeat center; margin: 0 auto;}

.org-content {margin-top: -24px;}
.org-content-inner {position: relative; padding-top: 48px;}
.org-content-inner::before {content: ""; position: absolute; width: 2px; height: 100%; z-index: -1; background: #BBBBBB; left: 50%; margin-left: -1px; top: 0;}

.org-root-content{position: relative;}
.org-root-content::before{content:""; display: block; position: absolute; top: 0; width: 72%; height: 2px; background-color: #bbbbbb; left: 14%;}
.org-root-content > ul::after{content:""; display: table; clear: both;}
.org-root-content > ul > li{float: left; width: 28.5%; margin-right: 7.25%; border-radius: 5px; padding-top: 45px; position: relative;}
.org-root-content > ul > li::before{content:""; display: block; position: absolute; width: 2px; height: 100%; background-color: #bbbbbb; left: 50%; top: 0; z-index: -1;}
.org-root-content > ul > li:last-child{margin-right: 0; margin-bottom: 0;}
.org-root-box-title{border-radius: 5px; padding: 8px 0;}
.org-root-content > ul > li:nth-child(1) .org-root-box-title{background: url(/sites/ESG/images/sub/org_root_2.png); background-size: cover;}
.org-root-content > ul > li:nth-child(2) .org-root-box-title{background: url(/sites/ESG/images/sub/org_root_4.png); background-size: cover;}
.org-root-content > ul > li:nth-child(3) .org-root-box-title{background: url(/sites/ESG/images/sub/org_root_5.png); background-size: cover;}
.org-root-content .org-root-box-title p{color: #fff; font-family: 'Noto Medium'; text-align: center;}
.org-root-box-content{padding: 15px 20px; min-height: 125px; background-color: #F5FAFB;}

.org-root-box-content li{position: relative; padding-left: 15px; color: #333333; margin-bottom: 7px;  }
.org-root-box-content li:last-child{margin-bottom: 0;}
.org-root-box-content li::before{content:""; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: 0; top: 9px;}
.org-root-content > ul > li:nth-child(1) .org-root-box-content li::before{background-color: #ff9000}
.org-root-content > ul > li:nth-child(2) .org-root-box-content li::before{background-color: #66a32e}
.org-root-content > ul > li:nth-child(3) .org-root-box-content li::before{background-color: #767171;}

@media all and (max-width: 1305px){
  .org-mid .org-root-box-content li{width: 100%;}
}

@media all and (max-width: 768px){
  .org-mid{margin-top: 0; padding-bottom: 10px;}
  .org-mid > div {float: none;; width: 100%; text-align: center;}
  .org-mid > div li {display: block; width: 100%; max-width: 400px; margin: 0 auto;; margin-bottom: 10px;}
  .org-mid-left {padding-right: 0; text-align: right;}
  .org-mid-right {padding-left: 0; text-align: left;}
  .org-mid > div ul {background: transparent;}
  .org-mid > div::before {display: none;}
  .org-root-content > ul > li{width: 100%; float: none; margin-right: 0; margin-bottom: 0; padding-top: 20px;}
  .org-root-content > ul > li::before{margin-left: -1px;}
  .org-root-content > ul > li:nth-child(1) .org-root-box-title{background-size: cover;}
  .org-root-content > ul > li:nth-child(2) .org-root-box-title{background-size: cover;}
  .org-root-content > ul > li:nth-child(3) .org-root-box-title{background-size: cover;}
  .org-root-content::before{display: none;}
  .org-root-box-content{min-height: auto;}
}

/* 운영방법 */
.social-inner::after{content:""; display: table; clear: both;}
.social-inner > div{float: left;}
.social-inner .social-box{width: calc(20% - 60px); border-radius: 5px; box-shadow: 1.5px 1.5px 4px rgba(0,0,0,0.2); background-color: #f6f6f6;}
.social-box .social-header{text-align: center; border-radius: 5px; background: url(/sites/styleguide/images/common/pattern_4.png) center;}
.social-box .social-header h1{font-size: 18px; color: white; font-family: 'Roboto', 'Noto Regular'; font-weight: 400; padding: 7px 0;}
.social-box .social-content{height: 90px; width: 100%; display: table;}
.social-box .social-content .social-textbox{display: table-cell; vertical-align: middle; text-align: center; width: 100%; padding: 10px 0;}
.social-textbox h1{font-family: 'Noto Regular'; font-size: 20px; color: #333333; margin-bottom: 5px;}
.social-textbox p{font-size: 16px; color: #333333; line-height: 20px;}
.social-box.non-textbox{height: 140px; position: relative; box-shadow: none; background-color: transparent;}
.social-box.non-textbox .social-header{position: absolute; top: 50%; margin-top: -25px; width: 100%;}
.social-box:last-child .social-header{margin-top: -35px;}
.social-inner .social-arrow{width: 27px; margin: 0 24px; margin-top: 54px;}

@media all and (max-width: 1023px) {
  .social-inner .social-box{width: calc(20% - 28px);}
  .social-inner .social-arrow{width: 15px; margin: 0 10px; margin-top: 54px;}
  .social-textbox h1{font-size: 18px;}
  .social-textbox p{font-size: 16px;}
}

@media all and (max-width: 768px) {
  .social-inner > div{float: none;}
  .social-inner .social-box{width: 100%;}
  .social-box .social-header{background-size: cover;}
  .social-box .social-content{height: auto; padding: 20px 0; display: block;}
  .social-box .social-content .social-textbox{display: block; padding: 0;}
  .social-inner .social-arrow{margin: 10px auto; transform: rotate(90deg);}
  .social-box.non-textbox{height: auto;}
  .social-box.non-textbox .social-header{position: static; margin-top: 0;}
}

/*전공봉사 이미지*/
.img-box-wrap {display: flex; justify-content: space-around;}
.img-box {padding: 10px}
@media all and (max-width: 768px){
  .img-box-wrap{display: block;}
  .img-box {width: 80%; margin: 10px auto;}
}