@charset "utf-8";

a {
  text-decoration: none;
}

.sidebar {
  min-width: 314px;
  line-height: 19.2px;
  box-sizing: border-box;
  min-height: 100%;
  position: fixed;
  /* bottom: 0px; */
  z-index: 500;
}

.menu-text {
  font-family: "AppleSDGothicNeoL00";
  font-size: 14px;
  color: #c4c4c4;
}

.menu-text.active {
  color: #13e08b;
  font-family: "AppleSDGothicNeoM00";
}

.page-active {
  border-left: 5px solid #13e08b !important;
  color: #13e08b;
  background: #303140;
  box-sizing: border-box;
}

.page-active > span.menu-text {
  color: #13e08b;
  font-family: "AppleSDGothicNeoM00";
}

.page-active > img {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.page-active > .arrow-up {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
  transform: rotate(0deg);
}

.arrow-up.active {
  background: url("/static/img/icn_arrow-green.svg");
  filter: none;
  transform: rotate(0deg);
}

.sub-group {
  font-size: 14px;
}
.inner-shadow {
  box-shadow: inset 0px 4px 10px rgba(25, 26, 45, 0.72);
}

.link-none:hover {
  color: #fff;
}

#menu-list > a.active {
  border-left: 5px solid #13e08b;
  background: #303140;
  box-sizing: border-box;
}

.side-header > h1 {
  font-size: 0px !important;
}

.sm {
  font-size: 0.85em;
}

.menu-bar {
  box-sizing: border-box;
  /* height: 535px; */
}

.side-p {
  padding-right: 49px;
  padding-left: 40px;
}

.list-p {
  padding-top: 21px;
  padding-bottom: 21px;
  border-radius: 0px;
}

.list-p:hover {
  background: #303140;
}

.sub-link-self.active {
  color: #13e08b;
  font-family: "AppleSDGothicNeoM00";
}

.side-header {
  margin-top: 50px;
  margin-bottom: 50px;
}

.list-none {
  list-style: none;
}

.icon-sp {
  margin-right: 14px;
}

.icon-sp.active {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.btn-check:focus + .btn,
.btn:focus {
  box-shadow: none;
}

.sub-menu {
  /* padding-left: 43.33px;
  margin-bottom: 10px; */
}

.sub-wrap {
  /* padding-bottom: 10px; */
}

.sub-menu-padding {
  padding-left: 43.33px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.sub-menu:nth-child(1) {
  /* padding-top: 22px; */
}

.sub-menu:nth-child(3) {
  /* padding-bottom: 20px; */
}

.sub-menu:last-child {
  /* margin-bottom: 0px; */
}

.sub-menu > a {
  line-height: 26px;
  font-size: 14px;
  letter-spacing: -5%;
  display: block;
  font-family: "AppleSDGothicNeoL00";
}

.sub-menu > a.link {
  color: #ffffff;
}

.sub-menu > a:hover {
  color: #ffffff;
}

.arrow-up {
  background: url(../img/icn_arrow.svg) no-repeat;
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.sub-link::before {
  background: url(../img/icn_arrowRight02.svg) no-repeat;
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-size: cover;
  margin-right: 12px;
}

.sub-link.active::before {
  background: url(../img/icn_arrowRight02_green.svg) no-repeat;
  background-position-y: 50%;
}

.sub-link.active {
  color: #13e08b;
  font-family: "AppleSDGothicNeoM00";
}

.sub-link.active:hover {
  color: #13e08b;
}

.story-bar {
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #303140;
  box-sizing: border-box;
}

.story-tit {
  padding-left: 43px;
}

.story-list {
  margin-top: 32.5px;
  margin-bottom: 16px;
  font-family: "AppleSDGothicNeoL00";
}

.story-list > li {
  padding-left: 51px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.story-list > li:last-child {
  margin-bottom: 0px;
}

.story-list > li > a:hover {
  color: #fff;
}

.story-list > li > a {
  color: #c4c4c4;
}

.story-list > li.last-margin {
  margin-bottom: 45px;
}

.arrow-left {
  width: 12px;
  height: 12px;
  background: url(../img/icn_arrow_sm.svg) no-repeat;
  margin-right: 15px;
}

/* 설문조사 링크 팝업 */

#esg-poll .modal-dialog {
  max-width: 660px;
}

#esg-poll .modal-content {
  min-height: 664px;
  position: relative;
}

#esg-poll .modal-body {
  padding-top: 66px;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

.back {
  max-height: 100%;
}

.pollicon {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  top: -59px;
}

.gray-bg {
  width: 86px;
  height: 86px;
  border-radius: 50%;
}

.polllist-tit {
  font-size: 20px;
  font-family: "AppleSDGothicNeoB00";
  text-align: center;
  margin-bottom: 14px;
}

.tit-sub {
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  letter-spacing: -0.05em;
  font-family: "AppleSDGothicNeoL00";
  margin-bottom: 40px;
  display: block;
}

.poll-box {
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 20px;
  margin-bottom: 20px;
}

.no-active {
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  color: #c4c4c4;
}

label.I-esg::before {
  display: none !important;
}

label.E-esg::before {
  display: none !important;
}

input#I-esg:checked ~ label.I-esg > .no-active {
  border: 1px solid #252636;
  color: #252636;
}

input#E-esg:checked ~ label.E-esg > .no-active {
  border: 1px solid #252636;
  color: #252636;
}

.poll-kinds {
  font-family: "AppleSDGothicNeoM00";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.05em;
}

.poll-ex {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.05em;
}

.checkimg {
  position: relative;
  min-width: 50px;
  min-height: 50px;
}

.checkimg > img {
  position: absolute;
  top: 0;
}

.check_img {
  display: none;
}

input#I-esg:checked ~ label.I-esg > .no-active > .checkimg > .check_img {
  display: inline;
}

input#E-esg:checked ~ label.E-esg > .no-active > .checkimg > .check_img {
  display: inline;
}

.btn-g {
  height: 102px;
}

.btn-g > button {
  width: 50%;
  height: 100%;
}

.modal-content {
  border: none;
  border-radius: none;
}
/* 공급망 설문 모달 */
#esg-supply .modal-dialog {
  max-width: 660px;
}

#esg-supply .modal-content {
  min-height: 664px;
  position: relative;
}

#esg-supply .modal-body {
  padding-top: 66px;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

input#supply-I-esg:checked ~ label.supply-I-esg > .no-active {
  border: 1px solid #252636;
  color: #252636;
}

input#supply-E-esg:checked ~ label.supply-E-esg > .no-active {
  border: 1px solid #252636;
  color: #252636;
}

input#supply-I-esg:checked ~ label.supply-I-esg > .no-active > .checkimg > .check_img {
  display: inline;
}

input#supply-E-esg:checked ~ label.supply-E-esg > .no-active > .checkimg > .check_img {
  display: inline;
}

#self_syn {
  color: #13e08b;
}

.self-dashboard.active .arrow-left {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.self-dashboard.active .link-none {
  color: #13e08b;
}

.self-result.active .arrow-left {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.self-result.active .link-none {
  color: #13e08b;
}

.impor-dashboard.active .arrow-left {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.impor-dashboard.active .link-none {
  color: #13e08b;
}

.impor-result.active .arrow-left {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.impor-result.active .link-none {
  color: #13e08b;
}

.supply-dashboard.active .arrow-left {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.supply-dashboard.active .link-none {
  color: #13e08b;
}

.supply-result.active .arrow-left {
  filter: invert(69%) sepia(18%) saturate(7443%) hue-rotate(108deg) brightness(108%) contrast(85%);
}

.supply-result.active .link-none {
  color: #13e08b;
}

.stroy-bor {
  height: 219px;
}
