@charset "utf-8"; 
html.fixed { overflow: hidden !important; padding-right:17px; }
@media screen and (max-width: 1280px)  {
html.fixed { padding-right:0px; }
} 
* {
  word-break: keep-all;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
} 
@media screen and (max-width: 1280px) and (min-width: 769px) and (orientation: landscape) {
  html {
      font-size: 9px;
  }
} 
@media screen and (orientation: portrait) {
  html {
    font-size: calc(0.8vh + 0.2vw);
  }
  html.fixed {  right:0; }
}
@media screen and (max-width: 400px) and (orientation: portrait) {
  html {
    font-size: 8px;
  }
} 
html {
  overflow-y: auto;
  height: auto;
} 
@media screen and (max-width: 768px) and (orientation: landscape){ 
  html.window-popup { font-size:10px; }
} 
.inline-block-always {
  display: inline-block !important;
}
.align-center {
  text-align: center;
}
.m-hide {
  display: block;
}
.m-only {
  display: none;
}
input:-internal-autofill-selected {
  background-color: #ffffff !important;
}
.basis0 {
  flex-basis: 0 !important;
}
b {
  font-weight: 600;
}
.boldcell {
  font-weight: 600;
}
.money-unit {
  line-height: 2rem;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.7rem;
  font-weight: 400;
  font-size: 1.6rem;
  color: #454038;
}
legend {
  display: none;
} 
.row {
  /* --bs-gutter-x: 1.6rem;
  --bs-gutter-y: 1.6rem; */
  display: flex;
  flex-wrap: wrap;
  margin-top: -1.6rem;
  margin-right: -0.8rem;
  margin-left: -0.8rem;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0.8rem;
  padding-left: 0.8rem;
  margin-top: 1.6rem;
}
.row > .col-50 {
  flex: 0 0 auto;
  width: 50%;
}
.align-middle {
  vertical-align: middle !important;
}
.space-between {
  display: flex;
  justify-content: space-between !important;
  align-items: center;
}
.portrait-only {
  display: none;
}
.text-left {
  text-align: left !important;
}
table.text-left td {
  text-align: left !important;
}
.d-inline-block {
  display: inline-block !important;
}
.smaller {
  font-size: 1.6rem;
  opacity: 0.95;
  font-weight: 400;
}
header.page-header {
  z-index: 2;
  padding-top: 13rem;
  min-height: 5rem;
}
.content-body {
  min-height: 100vh; 
  overflow: visible;
  height: auto;
  position: relative;
  min-width: 300px;
}
.page-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 12rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-1 {
  margin-top: 1rem;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-3 {
  margin-bottom: 3rem !important;
}
.weight-500 {
  font-weight: 500;
}
.gold-button,
.red-button {
  background-color: rgba(168, 132, 74, 0.8);
  color: #ffffff;
  padding: 0.7em 1.4em;
  font-size: 1.8rem;
  border-radius: 3rem;
  border: none;
  cursor: pointer;
  vertical-align: top;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
}
.red-button {
  background-color: transparent;
  border: 1px solid rgba(168, 132, 74, 0.5);
  border-radius: 1rem;
  color: rgb(168, 132, 74);
}
.gold-button:hover {
  background-color: rgba(168, 132, 74, 0.9);
  text-decoration: none;
}
.content-body .inner-body {
  max-width: 144rem;
  width: 90%;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: space-between;
}

.page-header .breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0.9;
  align-items: flex-start;
  font-weight: 500;
  height: 3rem;
  top:8rem;
}
.page-header .breadcrumbs a {
  height: 100%;
}
.page-header .breadcrumbs i.icon-home,
.breadcrumbs li::after,
i.icon-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13.5' viewBox='0 0 12 13.5'%3E%3Cpath id='home_FILL1_wght400_GRAD0_opsz48' d='M8,19.5v-9L14,6l6,4.5v9H15.5V14.25h-3V19.5Z' transform='translate(-8 -6)' fill='rgba(51,31,0,0.7)'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 1.2rem auto;
  background-position: center center;
  width: 2.4rem;
  height: 100%;
  display: block;
}


.page-header .breadcrumbs li {
  display: -webkit-box;
  display: -ms-flexbox;
  height: 3rem;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.5rem;
  line-height: 30px;
}
.page-header .breadcrumbs li::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.4' height='12' viewBox='0 0 7.4 12'%3E%3Cpath id='_Color' data-name=' ↳Color' d='M1.408,0,0,1.41,4.574,6,0,10.59,1.408,12,6.654,6.747,7.4,6Z' fill='rgba(51,31,0,0.7)'/%3E%3C/svg%3E%0A");
  content: "";
  background-size: auto 40%;
  background-repeat: no-repeat;
  opacity:0.8;
  margin-top:2px;
}

.page-header .breadcrumbs li:last-child::after {
  display: none;
}
.page-header h2,
.gold-copy {
  font-size: 3.8rem;
  color: var(--h2-gold);
  text-align: center;
  margin-bottom: 2em;
  margin-top: 0;
  font-weight: 700;
}
.gold-copy {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 3rem;
}
.gold-color {  color: var(--sub-gold) !important;}
.gold-copy span.block {
  font-size: 1.55rem;
}
.page-header p.main-copy,
.main-copy {
  font-size: 2rem;
  color: var(--sub-gold);
  text-align: center;
  font-weight: 600;
}

.swiper-button-prev, .swiper-button-next {
  width:2.4rem; height:4rem; margin-top:-2rem; background-size:contain
}
.content-body .page-header.no-bg h2,
.content-body .page-header.no-bg p.main-copy {
  text-align: center !important;
  width: 100% !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

#company1 {
  background-image: url(../images/cloud.png);
  background-position-y: bottom;
  background-size: cover;
  background-color: #b8e0ff;
}
#company1::before {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffffff),
    color-stop(50%, transparent)
  );
  background: -o-linear-gradient(left, #ffffff 0%, transparent 50%);
  background: linear-gradient(to right, #ffffff 0%, transparent 50%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
}
#company1 .inner-body::after {
  background-image: url(../images/building.png);
  content: "";
  bottom: 0;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: bottom;
  left: 50%;
  top:28rem;
  right: 0; 
  opacity: 0.8;
}
ul.left-h4 {
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 10;
  margin-top: 4rem;
  padding-left: 0.2rem;
  justify-content: center;
  flex-grow: 1;
  margin-left: 0;
}
ul.left-h4 li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
ul.left-h4 li h4, ul.left-h4 li h3{
  color: var(--h3-gold);
  font-weight: 500;
  width: 11rem;
  font-size:1em;
  margin-bottom: 0;
  margin-top:0 !important;
}
ul.left-h4 li p {
  color: #252525;
}
footer {
  z-index: 10;
  border-top: 1px solid hsl(40, 10%, 90%);
  background-color: hsla(34, 10%, 90%, 0.5);
  background-color: hsl(34, 40%, 98%);
  width: 100%;
}
footer:after {
  display: none;
} 
/* header.header-sticky.side-menu + { } */
.main-copy span.break {
  display: inline-block;
}
.main-copy span.break.br {
  display: inline;
  white-space: pre-line;
}
.main-copy span.break.br::after {
  display: block;
  content: "";
}
.main-copy p.break.br {
  display: block; 
  margin-bottom:0;
}
.next-prev-control {
  border-top: 1px solid hsl(40, 10%, 90%);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
  display: block;
  position: relative;
  width: 100%;
  z-index:2;
  margin-top: -5.1rem;
}
.next-prev-control ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 5rem;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 165rem;
  width: 91%;
  margin-left: auto;
  margin-right: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.next-prev-control ul li:first-child {
  border-right: 1px solid hsl(40, 10%, 90%);
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.next-prev-control ul li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;

  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.next-prev-control ul li a {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--body-brown);
  font-weight: 600;
  line-height: 2.4rem;
  text-decoration: none;
}
.next-prev-control ul li a:hover {
  color: var(--hover-red);
}
.next-prev-control ul li i {
  width: 2.4rem;
  height: 1em;
  display: inline-block;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.4' height='12' viewBox='0 0 7.4 12'%3E%3Cpath id='right' d='M1.408,0,0,1.41,4.574,6,0,10.59,1.408,12,7.4,6Z' fill='rgba(51,31,0,0.7)'/%3E%3C/svg%3E%0A");
}
.next-prev-control ul li a:hover i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.4' height='12' viewBox='0 0 7.4 12'%3E%3Cpath id='right' d='M1.408,0,0,1.41,4.574,6,0,10.59,1.408,12,7.4,6Z' fill='%23ea002c'/%3E%3C/svg%3E%0A");
}
i.arrow-prev {
  transform: rotate(180deg);
}

a:hover i.arrow-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.4' height='12' viewBox='0 0 7.4 12'%3E%3Cpath id='right' d='M1.408,0,0,1.41,4.574,6,0,10.59,1.408,12,7.4,6Z' fill='rgba(51,31,0,0.7)'/%3E%3C/svg%3E%0A");
}

footer div.inner {
  padding-right: 0;
}
.content-body#ceo {
  background-image: url(../images/bg_ceo.png);
  background-position-x: left;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
.content-body#ceo .page-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 0;
}
.content-body#ceo .ceo-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-preferred-size: 55%;
  flex-basis: 55%;
  font-size: 1.6rem;
  font-weight: 500;
}
 
.content-body#ceo::after {
  content: "";
  background-image: url(../images/wall_bg.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
  width: 44%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-box-shadow: 4px 0 8px 0 #feeedf inset;
  box-shadow: 4px 0 8px 0 #feeedf inset;
  opacity: 0.9;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  transition:all 0.3s;
}



.content-body#ceo::before {
  content: "";
  background-image: url(../images/wall_bg_right.png);
  background-size: 100% 100%;
  background-repeat: repeat-x;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position-x: right;
  width: 10%;
}
.ceo-text {
  color: rgba(0, 0, 0, 0.8);
}
.content-body#ceo .page-header h2 {
  text-align: left;
}
.gold {
  color: var(--text-gold) !important;
  font-weight: 500;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  margin-bottom: 0.3em;
  line-height: 3rem;
}
.orange {
  color: var(--orange-text);
}
.red {
  color: var(--hover-red);
}
.td-h{color:#c1272d; background-color: hsl(355, 90%, 95%);}
.td-u{color:#00a99d; background-color:hsl(152, 80%, 93%);}
.td-m{color:#806d3c; background-color:hsl(42, 90%, 95%);}
.td-a{color:#0071bc; background-color:hsl(205, 90%, 95%);}
.td-n{color:#9e005d; background-color:hsl(323, 90%, 95%);}
.color-h{color:#c1272d; font-weight: bold; font-size:1.2em;}
.color-u{color:#00a99d; font-weight: bold; font-size:1.2em;}
.color-m{color:#806d3c; font-weight: bold; font-size:1.2em;}
.color-a{color:#0071bc; font-weight: bold; font-size:1.2em;}
.color-n{color:#9e005d; font-weight: bold; font-size:1.2em;}
.bg-h{ background-color: hsl(355, 100%, 98%);}
.bg-u{ background-color:hsl(152, 100%, 98%);}
.bg-m{ background-color:hsl(42, 100%, 98%);}
.bg-a{ background-color:hsl(205, 100%, 98%);}
.bg-n{ background-color:hsl(323, 100%, 98%);}
.black {
  color: rgba(0, 0, 0, 0.9);
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
.ceo-text .flex-row img {
  margin-left:1rem;
  height:6rem;
  width: auto;
}
#timeline {
  position: relative;
  height: 100%;
  margin-left: auto;
  margin-right: 0;
  margin-top: 50vh;
  margin-bottom: 20rem;
  width: calc(40% + 8.5rem);
  padding-top: 1rem;
}
#timeline div:after {
  content: "";
  width: 1px;
  position: absolute;
  top: 0.5rem;
  bottom: 0rem;
  left: 12rem;
  z-index: 1;
  background: rgba(216, 202, 178, 0.5);
}
#timeline h3 {
  color: #b0a89d;
  margin: 0;
  font-size: 2.4rem;
  font-weight: 500; 
  width: 5rem;
  text-align: right; 
  transition: all 1s;
  position: absolute; 
  height: 6rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat';

}
#timeline section.year {
  position: relative;
  scroll-snap-align: start;
  opacity: 0.5;
  padding-top: 1rem;
  padding-bottom: 20rem;
}
#timeline section.year:first-child {
  padding-bottom:26rem;
}
#timeline section.year.active {
  opacity: 1;
}
#timeline section.year section {
  position: relative; 
}
#timeline section.year section h4 {
  position: absolute;
  bottom: 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0;
  padding: 0 0 0 89px;
  color: #c5c5c5;
}
#timeline section.year section ul {
  list-style-type: none;
  padding: 0 0 0 14rem;
  font-size: 1.7rem;
  transform:translateX(0rem) scale(0.9);
  transition:all 0.5s;
    opacity:0.2; 
    transform-origin:left top;
}
#timeline section.year.active section ul {
transform:translateX(0.5rem) scale(1);
transition:all 0.5s;
transform-origin:left top;
opacity:1;
}
#timeline section.year section ul:last-child {
  margin-bottom: 0;
}

#timeline section.year section ul li {
  margin-left:4rem; 
}

#timeline section.year section ul li:not(:first-child) {
  margin-top: 0.4rem;
}
#timeline section.year section ul li dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  padding-left: 2.5em;
  justify-content: flex-start; 
} 
#timeline section.year section ul li dl dt {
  position: absolute;
  left: 0;
  width: 6rem;
  text-align: left;  
  font-size:2.2rem; 
  font-family:'Noto Sans KR';
  line-height:3rem;
  color: var(--text-gold);
  padding-top:0.3rem; 
  padding-bottom:0.3rem; 
}

#timeline section.year section ul li dl dd {
  -webkit-box-flex: 1;
  font-size: 1.8rem;
  transform-origin: left; 
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
  line-height:3rem; 
  padding-bottom:0.3rem; 
  padding-top:0.3rem; 
}

#timeline section.year.active h3 {
  color: hsl(37, 40%, 45%); 
  transform: scale(1.8); 
  transition: transform 0.5s; 
  transform-origin:right center;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center; 
}
#timeline section.year.active section ul li dl dt {
  color: hsl(37, 40%, 45%); 
  font-weight: 500; 
}
 
.bullet i.outer {
  width: 1.3rem;
  height: 1.3rem;
  background-color: rgba(255, 255, 255, 0);
  display: inline-flex;
  content: "";
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: width 0.4s, height 0.4s;
}
.active .bullet i.outer {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 1px solid rgba(207, 167, 102, 0.8);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 1px 2px hsla(36, 10%, 30%, 0.05) inset;
  transition: width 0.4s, height 0.4s;
}

.bullet i.inner {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  background: #c5bcaf;
  border: 1px solid #99876b;
  border-radius: 100%;
  z-index: 1; 
}
.active .bullet i.inner {
  background: #eccd9a;
  border: 1px solid rgba(169, 132, 73, 0.7);
  box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.2);
}
.bullet {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  background-color: transparent;
  position: absolute;
  border: none;
  left: 9.2rem;
  z-index: 5;
}
#timeline section.year section .bullet {
  left: 10rem;
}
#timeline section.year section i.point {
  position: absolute;
  left: 7.6rem;
  top: 6px;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#timeline section.year section i.point::before,
#timeline section.year section i.point::after {
  content: "";
  z-index: 3;
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  border-radius: 2rem;
  display: inline-block;
  background-color: #c5bcaf;
  border: 1px solid #99876b;
}
#timeline section.year section i.point::after {
  display: none;
}
#timeline section.year.active section i.point::after {
  -webkit-box-shadow: 0 0 1px 2px hsl(37, 30%, 70%);
  box-shadow: 0 0 1px 2px hsl(37, 30%, 70%);
  background-color: #ffffff;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  border: none;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  border-radius: 100%;
  display: block;
}
#timeline section.year.active section i.point::before {
  border: 1px solid #99773D;
  background: #eccd9a;
  z-index: 100;
}

#timeline section.year.active section ul li dl dd {
  color: #454545;
  font-weight: 500;  
  padding-right: 0;
}

.content-body#history {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(70%, transparent),
    to(rgba(161, 212, 255, 0.6))
  );
  background: -o-linear-gradient(
    transparent 70%,
    rgba(161, 212, 255, 0.6) 100%
  );
  background: linear-gradient(transparent 70%, rgba(161, 212, 255, 0.6) 100%);
  background-attachment: fixed;
}
.content-body#history .history-title { 
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-content: flex-start;
  margin-top:4rem;
  margin-bottom: 4rem;
}
 
.content-body#history .history-title h2 { margin:0; margin-right:3rem; }
.content-body#history .history-title p.main-copy { 
  margin:0; margin-top:2rem;
}
section#history.content-body .trophy {
  margin-bottom: 0;
  position: fixed;
  bottom: -2px;
  top:6rem; 
  left: 2%;
  right: 0; 
  background-size: contain;
  background-image: url(../images/trophy.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  max-width: 165rem;
  margin-right: auto;
  width: 40%;
}
section#history.content-body .inner-body .page-header {
  position: fixed;
  bottom: 68rem;
  top: 0;
  left: 0;
  right: 0;
  max-width: 134rem;
  margin-left: auto;
  margin-right: auto;
  width:90%;
}
section#history.content-body .inner-body .page-header h2,
section#history.content-body .inner-body .page-header .main-copy {
  text-align: left;
  z-index: 1;
}
.content-body#ceo .ceo-pic {
  background: url(../images/ceo.png) no-repeat right bottom;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-size: contain;
  position: absolute;
  right: 0;
  left: 0;
  top:20rem;
  bottom: 0;
  margin-bottom: 0rem;
  pointer-events: none;
}
.ceo-text span.gold {
  font-size: 1.85rem;
  font-weight: bold;
  color:var(--text-gold);
}
.page-content h3 {
  color: var(--h3-gold);
  font-weight: 600;
  margin-bottom: 0.8em;
  font-size: 2rem;
}


.page-content h3.gold { 
  width:100%;
}
 
.page-content h4 {
  font-weight: 500;
}
.logo-box {
  border: 0.8rem solid #d9d3cc;
  padding: 4rem 3rem;

  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-top: 2rem;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-bottom: 4rem;
  padding-right: 25rem;
  position: relative;
}
.logo-box img {
  height: 4rem;
  max-width: 100%;
}

.btn-download {
  background-color: #896E3E;
  border: none;
  line-height: 3rem;
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  border-radius:5rem;
}
.btn-download:hover {
  background-color: hsla(36, 70%, 30%, 0.9);
  color: #ffffff;
  border:none;
}
.btn-download i {
  border-radius: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14.958' viewBox='0 0 12 14.958'%3E%3Crect id='r' width='12' height='2' transform='translate(0 12.958)' fill='%23957b57'/%3E%3Cpath id='p' d='M5,0V5.957H1l5,5,5-5H7V0Z' transform='translate(0 0)' fill='%23856a3c'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  background-size:40%;
  background-position: center center;
  display: inline-block;
  margin-left: 2rem;
  background-color: #ffffff;
}
.btn-download:hover i { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14.958' viewBox='0 0 12 14.958'%3E%3Crect id='r' width='12' height='2' transform='translate(0 12.958)' fill='%23957b57'/%3E%3Cpath id='p' d='M5,0V5.957H1l5,5,5-5H7V0Z' transform='translate(0 0)' fill='%23745623'/%3E%3C/svg%3E%0A");
}
ul.color-system {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row; 
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin-top: 2rem;
}
ul.color-system h4 {
  color: #ffffff;
  padding: 1rem;
  text-align: center;
  width: 100%;
  font-size: 1.8rem;
  position: relative;
  height: 5rem;
  margin-top: 0 !important;
}
ul.color-system h4 span {
  color: #ffffff;
  z-index: 1000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 5rem;
}
ul.color-system li h4::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: 0;
}
ul.color-system li:first-of-type h4::after {
  background-color: #d60027;
}
ul.color-system li:first-of-type dl {
  color: #d60027;
}
ul.color-system li:nth-of-type(2) {
  margin-left: 3rem;
  margin-right: 3rem;
}
ul.color-system li:nth-of-type(2) h4::after {
  background-color: #da5e0b;
}
ul.color-system li:nth-of-type(2) dl {
  color: #da5e0b;
}
ul.color-system li:nth-of-type(3) h4::after {
  background-color: rgba(0, 0, 0, 0.9);
}
ul.color-system li:nth-of-type(3) dl {
  color: rgba(0, 0, 0, 0.9);
}

ul.color-system li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border: 1px solid #d9d3cc;
  border-top: none;

  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
}
ul.color-system li dl {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  min-width: 13em;
}
ul.color-system li dl dt {
  display: inline-block;
  width: 50%;
  text-align: left;
  line-height: 2rem;
  font-size: 1.6rem;
}
ul.color-system li dl dd {
  display: inline;
  white-space: pre-line;
  font-weight: bold;
  line-height: 2rem;
}
ul.color-system li dl dd::after {
  content: "";
  display: block;
}

ul.ban {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -3rem;
  margin-bottom: 0;
  margin-top: -3rem;
}
ul.ban li {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  padding-top: 3rem;
  padding-right: 3rem;
}
ul.ban li h4 {
  font-weight: 400;
  margin-top: 0.4em;
  font-size: 1.6rem;
}

ul.ban li p {
  height: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #d9d3cc;
  position: relative;
}
ul.ban li img {
  max-width: 100%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

ul.ban li p::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='red' /> </svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
  content: "";
  opacity: 0.4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

ul.ban li:last-child p {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 0, 0, 1)),
    color-stop(10%, rgba(255, 154, 0, 1)),
    color-stop(20%, rgba(208, 222, 33, 1)),
    color-stop(30%, rgba(79, 220, 74, 1)),
    color-stop(40%, rgba(63, 218, 216, 1)),
    color-stop(50%, rgba(47, 201, 226, 1)),
    color-stop(60%, rgba(28, 127, 238, 1)),
    color-stop(70%, rgba(95, 21, 242, 1)),
    color-stop(80%, rgba(186, 12, 248, 1)),
    color-stop(90%, rgba(251, 7, 217, 1)),
    to(rgba(255, 0, 0, 1))
  );
  background: -o-linear-gradient(
    left,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
}

.content-body#ci .page-content > div {
  margin-top: 5rem;
  margin-bottom: 0rem;
  width:100%;
}

.content-body#history.footer-start .inner-body {
  max-width: none;
}

#hire .page-content h3 {
text-align: center;
}
@media all and (min-aspect-ratio: 5/3) {
  header.side-menu + .content-body .inner-body {
    padding-top: 2rem;
  }
 
  /* .sticky-bar { min-height:7rem; }
  p.view_gnb a { width:7rem; height:7rem; }
  div#header_wrap h1, #sitemap .header h1.logo a, .header-right, ul#gnb>li>a {    
      height: 7rem; 
  } */
}
@media all and (max-aspect-ratio: 5/3), (max-width: 1023px)  {
  
  section#history.content-body::after {
    background-position-x: 0;
    width: 36%;
    margin-left: 0;
  }
  ul.left-h4 {
    margin-bottom: 5rem;
  }

  .content-body#ceo .ceo-text {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    font-size: 1.7rem;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 5rem;
  }
  .logo-box {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .btn-download {
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end;
    min-height:4rem !important;
  }
  ul.ban li {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }
 
 
.content-body#ceo .ceo-pic {
  background-size: contain;
  left:40%;
  top:25rem;
}
}

@media all and (max-aspect-ratio: 4/3), (max-width: 1023px)  {
.m-hide {
  display: none !important;
}
.m-only {
  display: block !important;
}
}
@media all and (min-aspect-ratio: 1/1)  {
  section#history.content-body.footer-start .trophy {
    position: absolute;
    height: 95rem;
    top: auto;
    bottom: 0;
  }
  section#history.content-body.footer-start .inner-body .page-header {
    bottom: 68rem;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
  }
 
}
.content-body .inner-body.red-tap header.page-header h2,
.content-body .inner-body header.page-header h2 {
  margin-bottom: 4rem;
  margin-top: 4rem;
}

@media all and (max-aspect-ratio: 1/1), (max-width:1024px){
  .page-content h3 {
    font-size: 2rem;
    margin-bottom:1.6rem;
    width: 100%;
  }
  .content-body#ci .page-content > div {
  margin-top: 0;
  }
  #company1 header h2 { justify-content: flex-start;}
  #company1 .main-copy {
    margin-left: 0;
    margin-bottom: 3rem;
  }
  #timeline section.year,#timeline section.year:first-child {
    padding-bottom: 16rem;
  }
  .page-content > h5 {
    margin-top: 5%;
  }

  .content-body .page-header.no-bg {
    padding-top: 5%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding-bottom: 2%;
  }
  .content-body .inner-body.red-tap header.page-header h2,
  .content-body .inner-body header.page-header h2 {
    margin-top: 8rem;
    margin-bottom: 3rem;
  }

  .content-body#ceo .page-header,
  .content-body#ci .page-header,
  .content-body#history .page-header {
    justify-content: flex-end;
  }
  .content-body#ceo .page-header h2,
  .content-body#ci .page-header h2,
  .content-body#history .page-header h2 {
    justify-content: flex-start;
  }
  .content-body#organ .page-header.no-bg {
    border-bottom: 1px solid hsla(38, 50%, 90%, 0.7) !important;
  }
  .content-body .inner-body header.page-header {
    padding-left: 5%;
    padding-right: 5%; 
  }
  .content-body .inner-body header.page-header.no-h2 {
    padding-top: 7rem;
    padding-bottom: 0;
    background-color: transparent;
    border-bottom: none;
  }
  .content-body .red-tap .page-header.no-bg h2 {
    margin-top: 0;
    margin-bottom: 0;
  }

  #company1 {
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: transparent;
  }
  .content-body .inner-body {
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    width: 100%;
    padding-top: 0;
  }
  .logo-box {
    padding-bottom: 6rem;
    padding-right: 4rem;
  }
  #company1::after {
    opacity: 0.4;
  }
  .content-body .page-header.no-bg {
    background-color: hsl(37, 50%, 98%);
  }
  .page-header.no-bg {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  header.page-header,
  section#history.content-body .inner-body .page-header {
    width: 100%;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;

    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-bottom: 1px solid hsla(38, 40%, 80%, 0.7);
    bottom: auto;
    top: 0;
    -ms-flex-preferred-size: 50rem;
    flex-basis: 50rem;
    margin-top: 0;
  }
 
  .page-header .breadcrumbs {
    bottom: auto;
    opacity: 0.7;
    top: 8rem;
  }
  .page-header .breadcrumbs {
    position: absolute;
    bottom: auto;
    right: 5% !important;
    font-size: 1.4rem;
  }
  .page-header h2 {
    justify-content: center;
    font-size: 3.6rem;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-box-align: end;
    align-items: flex-end;
  }

  ul.left-h4 {
    position: relative;
    bottom: auto;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  ul.left-h4 li h4 {
    width: 6em;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .content-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .page-header p.main-copy,
  .main-copy {
    font-size: 1.8rem;
    text-align: left;
    margin-top: 0rem;
    margin-bottom: 2rem;
  }
  .double-line-box .main-copy {
    width: 100%;
  }
  #company1 .inner-body::after {
    display: none;
  }
  #company1 .page-header::after {
    background-image: url(../images/building.png);
    content: "";
    right:5%;
    bottom: 0;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    left: 30%;
    z-index: 1;
    opacity: 0.8;
    top: 5rem;
    bottom: 0;
  }
  .page-content {
    background-color: #ffffff;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 5%;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 12rem;
  }
  #video .page-content {
    padding-top: 0%;
  }
  .page-content > *,
  .page-content > .table,
  div.paging {
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  .page-content > *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #privacy .pale-box .flex-row {
    flex-direction: column;
  }
  #privacy .pale-box .flex-row li {
    width: 100%;
    margin-bottom: 5%;
  }
  .page-content > .pale-box:last-child {
    border: none;
  }
  .page-content h3 {
    margin-left: 0;
  }
  #esg-direction .level-1 {margin-left:auto; }
  #privacy .page-content > p {
    margin-left: 0;
    font-size: 1.7rem;
  }
  ol.list-group-numbered {
    margin-top: 0.4em;
  }
  #hire .page-content h3 {
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 5%;
    font-weight: 600;
  }
  .page-content > .tab-normal {
    width: 100%;
  }
  div.paging > button {
    margin-right: 0;
  }
  .content-body#ceo {
    background-size: auto 45rem;
  }
  #company1::before {
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(255, 255, 255, 0.8)),
      color-stop(80%, hsla(206, 100%, 76%, 0.4))
    );
    background: -o-linear-gradient(
      left,
      rgba(255, 255, 255, 0.8) 0%,
      hsla(206, 100%, 76%, 0.4) 80%
    );
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.8) 0%,
      hsla(206, 100%, 76%, 0.4) 80%
    );
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: 0;
    z-index: 0;
    height: 54rem;
  }
  .content-body#ceo .page-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .content-body#ceo .page-content .ceo-text {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 1.8rem;
    margin-top: 0;
    flex-basis: auto;
    padding-bottom: 5%;
    text-align: left;
    margin-left:0;
  }
  .content-body#ceo .page-content .ceo-text .flex-row {
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    line-height: 2.2;
  }
  .content-body#ceo .page-content .ceo-pic {
    display: none;
  }
  .content-body#ceo .page-header::after {
    content: "";
    background-image: url(../images/ceo.png);
    left: 40%;
    right: -5rem;
    top: 8rem;
    bottom: 0;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
  }
  .content-body#ceo::after {
    height: 60rem;
    width: 55%;
  }
 
  #timeline section.year section ul li dl dd {
    font-size: 1.85rem;
  }
  .content-body#ceo::before {
    background-size: 100% 50%;
  }
  .content-body .page-header h2 {
    width: 100%;
    line-height: 1.6;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 2rem;
    z-index: 2;
  }
  .content-body#history {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  #timeline section.year h3 {
    width:10rem; left:1.6rem; 
  }
  #timeline section.year.active h3 {
    color: hsl(38, 43%, 38%);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    font-weight: 500;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
  #timeline section.year.active section ul li dl dt {
    color: var(--text-gold); 
    font-weight: 500; 
  }

  #timeline {
    margin-top: 0rem;
    width: 100%;
    margin-right: auto;
    margin-bottom: 4rem;
  }
  section#history.content-body::after {
    display: none;
  }
  .content-body#history .trophy {
    display: none;
  }
  section#history.content-body .inner-body .page-header::after {
    content: "";
    background-size: auto 100%;
    background-image: url(../images/trophy_m.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 1%;
    top: 6rem;
    bottom: 0;
  }
  section#history.content-body .inner-body .page-header::before {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(30%, transparent),
      to(rgba(161, 212, 255, 0.6))
    );
    background: -o-linear-gradient(
      transparent 30%,
      rgba(161, 212, 255, 0.6) 100%
    );
    background: linear-gradient(transparent 30%, rgba(161, 212, 255, 0.6) 100%);
    margin-left: -5%;
    margin-right: -5%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .logo-box img {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    margin-bottom: 4rem;
  }
  .logo-box img:last-child {
    margin-bottom: 0;
  }
  .logo-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  ul.color-system {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 2rem;
  }
  ul.color-system li:nth-of-type(2) {
    margin-left: 0;
    margin-right: 0;
  }
  ul.color-system li {
    margin-bottom: 2rem;
  }
  ul.color-system li:last-child {
    margin-bottom: 0rem;
  }
  ul.ban li {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }
  .content-body#company1 .inner-body header.page-header {
    height: 30rem;
    padding-left: 5%;
    padding-right: 5%;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .content-body#ci .inner-body header.page-header {
    height: 30rem;
    padding-left: 5%;
    padding-right: 5%;
    background: url(../images/ci_bg.png) left center;
    background-size: cover;
  }

}

@media all and (max-aspect-ratio: 1/1), (max-width: 1023px)  {

  #company1 .page-header::before {
    background: linear-gradient( to top, rgba(200, 230, 255, 0.6) 30%, rgba(255, 255, 255, 0) 100% ); 
 
    content: "";
    position: absolute;
    left: 0;
    right:0;
    bottom: 0;
    height:20rem;
    z-index: 2;
  }
}
@media all and (max-aspect-ratio: 2/3), (max-width: 1023px)  {
    .main-copy span.break,
  span.break {
    display: block;
  }
    .ceo-text span.break {
    display: block;
    word-break: keep-all;
    line-height: 1.8;
  }
  .page-header .breadcrumbs {
    display: none;
  }

  #company1 .page-header {
    overflow: hidden;
  }

  #company1 .page-header::after {
    background-size: cover;
    background-position-y: top;
    right: -5%;
    background-position-x: left;
    left: 35%;
  }
  .content-body#ceo {
    background-size: auto 40rem;
  }
  .content-body#ceo .page-header::after {
    background-position: center bottom;
    background-size: contain;
    top: 8rem;
    z-index: 1;
  }
  .content-body#ceo .page-header h2 { 
    width: 13rem;
    line-height: 1.4;
  }
.content-body#ceo .page-content .ceo-text {
  margin-left:0;
}
  .ceo-text span.break {
    display: block;
  }
  .content-body#ceo::after {
    width: 56%;
    background-size: 100% 100%;
    opacity: 0.9;
  }
  .content-body .inner-body {
    padding-top: 0;
  }
  .content-body#ceo .page-content .ceo-text {
    padding-top: 2rem;
    padding-bottom: 5%;
  }
  section#history.content-body .inner-body .page-header::after {
    content: "";
    background-position: right bottom;
    top: 5rem;
    right: 0;
  }
  #timeline {
    padding-left: 0rem;
  }
  #timeline section.year section ul {
    padding-left: 0;
  }
  #timeline div:after {
    left: 2rem;
  }
  .bullet {
    left: 0 !important;
    top: 0;
  }
  #timeline section.year section ul li {
    margin-left: 1.5rem;
  }
  #timeline section.year section {
    padding-top: 7rem;
    padding-left: 5.5rem;
  }
  #timeline section.year h3 {
    padding-left: 2rem;
    transform-origin: left center;
  }
  #timeline section.year.active h3 {
 
    transform-origin: left center;
  }
 
}

@media all and (max-aspect-ratio: 2/3), (max-width: 1023px)  {
  .page-header.no-bg p.main-copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 1.6;
  }
  header.page-header,
  section#history.content-body .inner-body .page-header {
    -ms-flex-preferred-size: 50rem;
    flex-basis: 50rem;
  }
}
@media all and (min-width: 1500px) {
  .page-header h2,
  .gold-copy {
    font-family: "Noto Sans KR";
  }
  .gold-copy {
    font-weight: 600;
    margin-top: 0;
  }
}
#organ .page-content {
  max-width: 165rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 6rem 5% 5rem;
  margin-top: 4rem;
  margin-bottom: 10rem;
  background-color: hsl(40, 80%, 97%);
  border-radius: 1.5rem;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direbtn-orangection: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; 
  --line-color:hsla(20, 10%, 70%);
}
.rectangle {
  position: relative;
  padding: 0.6em 1.2em;
  color: #ffffff;
  z-index: 1;
  text-align: center;
  border-radius: 0.1rem;
}
/* LEVEL-1 STYLES */
div.h1-wrapper {
  margin-bottom: 3.5rem;
  text-align: center;
  position: relative;
}
.level-1 {
  width: 18rem;
  background: #d60027;
  font-size: 2.1rem;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  height: 7rem;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.level-2 {
  font-size: 1.7rem;
}
.level-1::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left:50%;
  width: 1px;
  height: 4rem;
  background: var(--line-color);
  margin-left: 1px;
}
.h1-wrapper .level-3-wrapper {
  position: absolute;
  left: calc(50% + 13rem);
  top: 1.5rem;
  padding-top: 0;
}
.h1-wrapper .level-3-wrapper::before {
  left: -10rem;
  height: 1px;
  width: 10rem;
  top: 2.5rem;
}
/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  display: -ms-flexbox;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  display: grid;
  -ms-grid-columns: 1.5fr 6rem 2fr 6rem 1.5fr 6rem 1fr;
  grid-template-columns: 2fr 2fr 3fr 1fr;
  -webkit-column-gap: 6rem;
  -moz-column-gap: 6rem;
  column-gap: 6rem;
  padding-left: 20px;
  padding-right: 0;
  font-size: 1.6rem;
}
.organ-safe .level-2-wrapper {
  padding-right: 5%;
}

.level-2-wrapper > li {
  padding-top: 2rem;
  padding-bottom: 10%;
}

.level-2-wrapper > li:nth-of-type(1) {
  flex: 1.5 1 auto;
}
.level-2-wrapper > li:nth-of-type(2) {
  flex: 2 1 auto;
}
.level-2-wrapper > li:nth-of-type(3) {
  flex: 1.5 1 auto;
}
.level-2-wrapper > li:nth-of-type(4) {
  flex: 1 1 auto; 
}

.level-2-wrapper::after {
  display: none;
}
.level-2-wrapper > li {
  position: relative;
  text-align: center;
}
.level-2-wrapper > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 4rem;
  background: var(--line-color);
}
.level-2-wrapper > li:nth-child(2)::before {
    left: calc(50% + 2px);
}

.level-2-wrapper > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-color);
}
.level-2-wrapper > li:nth-child(2)::after {
  right: -6rem;
}
.level-2-wrapper > li:first-child::after {
  left: 50%;
  width: calc(6rem + 50%);
  right: auto;
}
.level-2-wrapper > li:last-child::after {
  right: 50%;
  width: calc(6rem + 50%);
  left: auto;
}
.level-2-wrapper > li .level-2 {
  margin: 0 auto;
  background: #D14600;
  font-weight: 500;
  width: 17rem;
}

.level-2::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  height: 2px;
  background: var(--line-color);
}

.column-2 {
  position: relative;
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  justify-content: space-between;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-columns: -webkit-min-content;
  grid-auto-columns: 1fr 1fr;
  column-gap: 2rem;
  margin: 0 auto;
  grid-auto-flow: row dense;
}

.column-2 > li {
  text-align: right;
  flex-basis: calc(50% - 2rem);
  position: relative;
}
.column-2 > li:nth-of-type(2n) {
  text-align: left;
}
.level-3-wrapper {
  padding-top: 2.5rem;
  position: relative;
}
.level-3-wrapper li:last-child h3 {
  margin-bottom: 0;
}
.level-3-wrapper.column-2 {
  justify-content: space-between;
  flex-wrap: wrap;
  flex-basis: 100%;
  margin-left: -2rem;
  margin-right: -2rem;
  column-gap: 2.5rem;
}
.level-3-wrapper.column-2 > li {
  flex-basis: 15rem;
  flex-basis: calc(50% - 5rem);
}
.level-3-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  bottom: 0;
  height: 100%;
  background: var(--line-color);
}

/* .level-3-wrapper.no-before li::before,
.level-3-wrapper.no-before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  bottom: 0;
  background: var(--line-color);
} */
.level-3-wrapper.column-2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  height: 1px;
  bottom: 0;
  background: var(--line-color);
  z-index: 0;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.level-3-wrapper > li > h3.left-support::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 2.5rem;
  height: 1px;
  background: var(--line-color);
  z-index: 0;
}
h3.level-3 { 
  background: hsl(37, 45%, 40%);
  font-size: 1.6rem;
  color: #ffffff;
  font-weight: 500;
  display: inline-block;
  width: 100%;
  max-width: 17rem;
  z-index: 5;
}
.left-support {
  margin-right: 50%;
  height: 7.5rem;
  margin-left: -50%;
  position: relative;
}
.left-support::before,
.right-support::before {
  content: "";
  position: absolute;
  background: var(--line-color);
  top: 2.5rem;
  height: 1px;
  width: 4rem;
}
.left-support::before {
  right: 0;
  left: auto;
}
.right-support::before {
  left: 0;
  right: auto;
}
.left-support h3.level-3 {
  position: absolute;
  right: 2.5rem;
}
.right-support {
  margin-left: 50%;
  height: 7.5rem;
  margin-right: -50%;
  position: relative;
}
.right-support h3.level-3 {
  position: absolute;
  left: 2.5rem;
  min-width: 15rem;
  width: 30vw;
}
/* LEVEL-4 STYLES  */
.level-4-wrapper {
  position: relative;
  margin-top: -2rem;
}
.level-4-wrapper li {
  padding-top: 2rem;
  position:relative;
}
.level-4-wrapper.column-2 {
  justify-content: space-around;
  flex-basis: 100%;
  -ms-flex-wrap: wrap;
  margin-top: 0;
}
h4.level-3 {
  font-weight: normal;
  background: hsl(30, 15%, 50%);
  font-weight: 500;
  font-size: 1.5rem;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
}
.level-4-wrapper.column-2 li:first-child h4::before {
  content: "";
  position: absolute;
  background: var(--line-color);
  top: -2rem;
  height: 1px;
  left: 50%;
  width: calc(50% + 1.1rem);
}
.level-4-wrapper.column-2 li:nth-of-type(2) h4::before {
  content: "";
  position: absolute;
  background: var(--line-color);
  top: -2rem;
  height: 1px;
  right: 50%;
  width: calc(50% + 1rem);
}
.level-4-wrapper.column-2 li:nth-of-type(2)::after {
  left: auto;
  right: 50%;
}
.level-4-wrapper li::before {
  content: "";
  position: absolute;
  background: var(--line-color);
  top: 0;
  height: 2.5rem;
  width: 1px;
  left: 50%;
}
@media all and (max-aspect-ratio: 7/5), (max-width:1345px )   {
  #organ .page-content {
    padding: 6rem 5% 2rem;
  }
  .level-2-wrapper {
    -ms-grid-columns: minmax(240px, 1fr) 0rem minmax(240px, 1fr);
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -webkit-column-gap: 0rem;
    -moz-column-gap: 0rem;
    column-gap: 0rem;
    position: relative;
  }

  .level-2-wrapper > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;

  }

  .level-2-wrapper > li {
    flex-basis: 45% !important;
  }
  .level-2-wrapper > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  h4.level-3,
  h3.level-3 {
    display: inline-block;
    min-width: 15rem;
  }
  .level-2-wrapper > li {
    flex-basis: 45% !important;
  }
  .level-2-wrapper > li:nth-of-type(1),
  .level-2-wrapper > li:nth-of-type(2),
  .level-2-wrapper > li:nth-of-type(3),
  .level-2-wrapper > li:nth-of-type(4) {
    flex: 1 1 50%;
    padding-left: 0;
  }

  #organ .level-2-wrapper > li:nth-of-type(2)::after {
    right: 50%;
  }
  #organ .level-2-wrapper > li:nth-of-type(3)::after {
    left: 50%;
  }
  #organ .level-2-wrapper > li:nth-of-type(2) {
    border-left: 1px solid #99773D;
  }
  .level-4-wrapper li::before {
    display: none;
  }
  .level-4-wrapper.column-2 li:first-child h4::before {
    height: 1.9rem;
    background:none;
    border-top:1px solid var(--line-color);
    border-left:1px solid var(--line-color);
  }
  .level-4-wrapper.column-2 li:nth-of-type(2) h4::before {
    height: 1.9rem;
    background:none;
    border-top:1px solid var(--line-color);
    border-right:1px solid var(--line-color);
  }
}



@media all and (max-aspect-ratio: 1/1), (max-width:1024px){
  #esg-direction.esg-system .white-box { padding:5%;}
  .page-header .breadcrumbs i.icon-home,
  .breadcrumbs li::after {
    width: 1.7rem;
  }
  #organ .page-content {
    padding: 5rem 5% 8rem;
    border-left: none;
    background: transparent;
    border-right: none;
    border-radius: 0;
    margin-bottom: 0;
    margin-top: 0;
    border-top: none;
    width: 100%;
  }
  #organ div.h1-wrapper {
    padding-bottom: 6rem;
    margin-bottom: 0;
  }
  .level-1::before { 
    height:6.5rem; 
  } 
  .h1-wrapper .level-3-wrapper {
    top: 10.5rem;
    left: 50%;
  }
  .h1-wrapper .level-3-wrapper::before {
    width: 2.5rem;
    left: 0;
  }
  .h1-wrapper .level-3-wrapper li {
    padding-left: 0rem;
  }
  .level-1 {
    width: 17rem;
  }
#esg-direction .level-1::before {
  height:5rem !important;
}
  /* .h1-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    bottom: -1.2rem;
    background: var(--line-color);
  } */
  .level-2-wrapper {
    -ms-grid-columns: minmax(240px, 1fr);
    grid-template-columns: minmax(240px, 1fr);
    width: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -webkit-column-gap: 0rem;
    -moz-column-gap: 0rem;
    column-gap: 0rem;
    position: relative;
    padding: 0;
    display: -ms-flexbox;
    flex-wrap: wrap;
  }
  .level-4-wrapper li::before {display:None;} 
  .level-2-wrapper > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  h4.level-3,
  h3.level-3 {
    display: inline-block;
    width: 15rem;
  }
  .level-2-wrapper > li {
    padding-top: 0;
    flex-basis: 100% !important;
  }
  #organ .level-2-wrapper > li:nth-of-type(2) {
    border-left: none;
  }
  #organ .level-2-wrapper > li:nth-of-type(3)::after {
    left: 50%;
    left: 0;
    top: 2.5rem;
  }

  #organ .level-2-wrapper > li::after {
    right: 50%;
    left: 0;
    top: 2.5rem;
  }
  #organ .level-2-wrapper > li:first-child::after {
    left: 0;
    right: 50%;
    width: auto;
    top: 2.5rem;
  }
  #organ .level-2-wrapper > li:last-child::after {
    right: 50%;
    width: auto;
    left: 0;
  }
  #organ .level-2-wrapper > li::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -3rem;
    top: 2.5rem;
    width: 1px;
    height: auto;
    background: var(--line-color);
  }
 
  #organ .level-2-wrapper > li:nth-of-type(3)::after {
    left: 0;
  }
  #organ .level-2-wrapper > li:last-child::before {
    display: none;
  }
  #organ .level-3-wrapper.column-2 {
    grid-column-gap: 4rem;
  }
  #organ .left-support {
    margin-left: 50%;
    height: 7.5rem;
    margin-right: -50%;
  }
  #organ .left-support h3.level-3 {
    position: absolute;
    left: 2.5rem;
    min-width: 15rem;
    max-width: 30vw;
  }
  #organ .left-support::before {
    content: "";
    position: absolute;
    background: var(--line-color);
    top: 2.5rem;
    height: 1px;
    width: 4rem;
    left: 0;
    right: auto;
  }

  #organ .left-support {
    margin-left: 50%;
    height: 7.5rem;
    margin-right: -50%;
  }
  #organ .level-3-wrapper.column-2::after {
    margin-left: -2.5rem;
    margin-right: -2.5rem;
  }
  #organ .level-3-wrapper.column-2 {
    position: relative;
    display: grid;
    display: flex;
    -ms-flex-direction: row;
    -ms-grid-rows: 5rem 2.5rem 5rem;
    grid-template-columns: 50% 50%;
    grid-auto-flow: column dense;
    grid-column-gap: 0;
    padding-left: 0rem;
    padding-right: 0rem;
    justify-content: center;
    flex-wrap: nowrap;
  }
  #organ .level-3-wrapper.column-2 li {
    text-align: left;
    grid-column-start: 2;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  #organ .level-3-wrapper.column-2 li:first-child {
    grid-column-start: 1;
    text-align: right;
  }
  #organ .level-3-wrapper.column-2 li h3 {
    padding-left: 0;
    max-width: 30vw;
    width: 100%;
    padding-right: 0;
  }
  #organ .level-2-wrapper > li .level-2,
  #organ h4.level-3,
  #organ h3.level-3 {
    width: 50%;
    max-width:30rem;
    min-width: 14rem;
  }
  #organ .right-support h3.level-3 {
    max-width: 30vw;
    min-width: 17rem;
    max-width: 30rem;
    width: auto;
  }
}
.address {
  margin-top: 0;
}
.address h4, #mobile .address h3{
  color: var(--text-gold);
  font-size: 1.8rem;
  font-weight: 600;
  -ms-flex-preferred-size: 19rem;
  flex-basis: 19rem;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
#location .page-content > div > h3 {
  font-weight: 700;
  color: hsl(37, 50%, 30%);
  flex-basis: 20rem;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 2.2rem;
  text-align: left;
}

#location ul.address li h4 {
  font-weight: 500;
  font-size: 1.8rem !important;
}

.center > h3,
.headquarter > h3 {
  margin-bottom: 1.5rem;
}
.headquarter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
}
#location .headquarter .page-content ol {
  -ms-flex-preferred-size: 42%;
  flex-basis: 42%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
#location .page-content ol li,
.address > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 2rem;
}
#mobile #tab1 .address > li,
#cable #tab1 .address > li,
#marketing #tab1 .address > li {
  margin-bottom: 0;
}

#location .page-content ol li h4,
.address li h5 {
  color: var(--orange-text);
  -webkit-box-flex: 0;
  -ms-flex: 0 0 12rem;
  flex: 0 0 12rem;
  font-size: 1.7rem;
  border:none;
  font-weight: 500;
}
#location .page-content .headquarter ol {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 1;
  flex-basis: 45%;
  margin-right: 3rem;
  margin-top: 0.5em;
  flex-shrink: 0;
}
#location .center .tab-header ul {
  margin-bottom: 4rem;
}
.address li ol {
  flex: 1 1 auto;
  margin-bottom: 0em;
}
.address ol li {
  margin-bottom: 0.5rem !important;
  display: flex;
  align-items: flex-start;
  margin-top: 0.5rem;
}
.address ol li:last-child {
  margin-bottom: 0;
}
.headquarter #map_div {
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: 1px solid #e6e6e6;
  box-sizing: content-box;
  width: 50%;
}
.tab-header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: -0.8rem;
  margin-right: -0.8rem;
}
.tab-header > ul > li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.tab-header > ul > li a {
  text-align: center; 
  height: 4.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 500; 
  background: #ede6de;
  color: #7c633c;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#location .page-content .tab-body h4{
  color: var(--text-gold);
  margin-top: 0.3rem;
  font-weight:600;
}
#location .tab-header > ul > li a {
  border: 1px solid #eee6dd;
}
.tab-body > ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 3rem;
}
#location #tab0 .flex-row {
  align-items: flex-start;
  border-bottom: 1px solid #eee;
  margin-bottom: 3rem;
}
#location #tab0 .flex-row:nth-of-type(3) {
  border-bottom: none;
  margin-bottom:0;
}
#location #tab0 .flex-row h2, #location #tab0 .flex-row .h2{
  font-weight: bold;
  font-size: 1.9rem;
  color: var(--sub-gold);
  width: 20rem;
}
#location #tab0 .flex-row ul.address {
  flex: 1 1 auto;
}
.custom-select-wrap {
  position: relative;
  height: 4rem;
  border: 1px solid #d9d4ce;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
}
.custom-select-wrap select + svg,
.custom-select-wrap select ~ svg {
  position: absolute;
  display: inline-block;
  width: 3.8rem;
  height: 3.8rem;
  right: 0.2rem;
  top: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.58' height='8.887' viewBox='0 0 15.58 8.887'%3E%3Cpath id='select' d='M3886.877,524.493l6.5,6.473,6.253-6.473' transform='translate(-3885.463 -523.079)' fill='none' stroke='%23b3afa8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffffff;
  background-size: 1.6rem auto;
  pointer-events: none;
}
.custom-select-wrap select {
  width: 100%;
  height: 100%;
  padding: 8px 12px;
  font-size: 1.7rem;
  background-color: transparent;
  border: none;
  color: hsl(38, 30%, 30%);
  border: none;
  text-align: left;
  font-weight: 400;
  font-family: "Noto Sans KR";
}
.tab-item.active a {
  background-color: var(--orange-text);
  color: #ffffff;
}
.break-lg {
  display: block;
}
.red-tap .page-header { 
  box-sizing: border-box;
  position: relative;
  border-bottom: none;
  background-color:transparent !important;
}
.red-tap .page-header .breadcrumbs,
.content-body .inner-body header.page-header .breadcrumbs {
  position: absolute;
  right: 0;
}

.red-tap .page-content {
  position: relative;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 0;
  padding-bottom: 0;
  padding:0;
}
.sub-tab.hide-tab-header #sub-tab0 {
  display: none;
}
#location .page-content {
  margin-top: 4rem;
}
#location .center {
  margin-top: 4rem;
  width: 100%;
}
@media all and (max-aspect-ratio: 1/1), (max-width: 1023px)  {
  #location #tab0 .flex-row {
    flex-direction: column;
  }
  #location .page-content {
    margin-top: 1rem;
  }
  #location #tab0 .flex-row ul.address {
    width: 100%;
  }
  .tab-body ul.address > li {
    flex-direction: column;
  }
  #location .page-content .tab-body h4 {
    flex-basis: auto;
  }
  .red-tap .page-header .breadcrumbs,
  .content-body .inner-body header.page-header .breadcrumbs {
    display:none;
    /* right: 5%;
    top: 0;
    height: 8rem;
    align-items: center; */
  }

  .break-lg {
    display: inline-block;
    margin-right: 1rem;
  }
  .page-content .headquarter {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 6rem;
    width: 100%;
  }
  .tab-body > ul > li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .tab-body ul.address ol li {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-bottom: 2rem;
  }
  #location .page-content .headquarter h3 {
    -ms-flex-preferred-size: 5rem;
    flex-basis: auto;
  }
  #location .page-content .headquarter ol {
    margin-right: 0;
    margin-bottom: 1.6rem;
  }
  #location .page-content h3,
  .address h3 {
    -ms-flex-preferred-size: 5rem;
    margin-bottom: 0.8em;
    flex-basis: auto;
  }
  #location .page-content .headquarter ol {
    flex-basis: auto;
  }
  #location .center {
    width: 100%;
    margin-top: 0;
  }
  #location .address h5 {
    flex-basis: auto;
  }
   .address h4 {
    flex-basis: auto;
  }
  #location .page-content ol li {
    flex-direction: column;
  }
  #location .page-content ol li h4 {
    flex-basis: auto;
  }
  .sub-tab.tab-wrap .tab-body {
    flex: 1 1 auto;
  }

  .sub-tab .tab-header > ul > li {
    margin-top: 2rem;
    margin-bottom: 4rem;
  }
  ul.pic {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 5rem;
  }
  #location .center .tab-header ul {
    margin-bottom: 2rem;
  }
  .tab-body ul.address > li {
    margin-bottom: 0;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
  #mobile .tab-body ul.address > li {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }
  .address {
    margin-top: 0;
    margin-bottom: 0.5em;
  }
  #location .page-content ol li,
  .address > li {
    margin-bottom: 1em;
  }

  .custom-select-wrap {
    display: block;
    height: 5rem;
    margin-bottom: 2rem;
  }
  .tab-header ul {
    display: none;
  }
  .tab-header.red-tap-header ul,
  .sub-tab .tab-header ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .level-2-wrapper > li {
    flex-basis: 100% !important;
  }
  .custom-select-wrap + ul {
    display: none !important;
  }
}
@media all and (max-aspect-ratio: 2/3), (max-width: 1023px)  {
  .sub-tab.hide-tab-header #sub-tab0 {
    display: flex !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
  }
  .content-item {
    padding-bottom: 0;
  }
  .sub-tab.hide-tab-header #sub-tab0 > * {
    display: flex !important;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  .sub-tab.hide-tab-header #sub-tab0 > div:first-child {
    margin-top: 1rem;
  }
  .sub-tab.hide-tab-header .tab-header {
    display: none;
  }
  .address li h5 {
    flex-basis: auto;
    margin-top: 0.4em;
    margin-bottom: 0.2em;
}

  .sub-tab.hide-tab-header .content-item {
    display: none !important;
  }
}

.table {
  width: 100%;
  border-collapse: separate;
  border-top: 2px solid var(--h3-gold);
  border-collapse: collapse;
}
.table th,
.table td {
  word-break: keep-all;
  padding: 0.8em 1em;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid hsl(37, 5%, 90%);
  line-height: 1.5;
}
.table td.left {
  text-align: left;
}
.table th {
  font-weight: 400;
}
.table td,
.table tbody th {
  letter-spacing: 0.5px;
}
.table thead tr:last-child th {
  border-bottom-color: hsl(37, 5%, 90%);
}
.border-bottom-none > * {
  border-bottom: none;
}
.table tr.border-bottom-none > * {
  border-bottom: none;
}
/*가로형*/
.table thead th {
  font-weight: 600;
  color: hsla(37, 100%, 20%, 0.8);
  border-bottom: 1px solid hsl(37, 5%, 90%);
}

.table.striped tbody tr:nth-of-type(odd) *,
.pale-bg {
  background-color: hsla(37, 60%, 98%, 70%);
}
.table tr.darker td,
.table tr.darker th {
  background-color: hsl(37, 50%, 98%);
}
.table tr:last-child.darker td,
.table tr:last-child.darker th {
  background-color: hsl(37, 60%, 97%) !important;
  border-bottom-color: #d9d4ce;
  border-top: 1px solid #d9d4ce;
}
.layout-fixed {
  table-layout: fixed !important;
}
.table tbody tr td,
.table thead tr th,
#esg-activity.table tbody tr td:first-child {
  border-left: 1px solid hsl(37, 5%, 90%);
}
.table thead tr th:first-child,
.table tbody tr td:first-child {
  border-left: none;
}

.annotation {
  font-size: 2.2rem;
  margin-top: 0.3em;
  color: #888888;
  margin-bottom: 0.3em;
  font-weight: 400;
  line-height: 1.6;
}
.annotation:first-child {
  margin-top: 1em;
}
i.badge {
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-shadow: 0 0 0.1rem 0.1rem hsla(37, 100%, 20%, 0.5), 0 0 0.1rem 0.1rem hsla(37, 100%, 20%, 0.5) inset;
  box-shadow: 0 0 0.15rem 0.15rem hsla(37, 100%, 20%, 0.5), 0 0 0.15rem 0.15rem hsla(37, 100%, 20%, 0.5) inset;
  border: 0.6rem solid #fff;
  margin-right: 0.5em;
  position: relative;
  align-self: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #eccd9a;
  flex: 0 0 auto;
  margin-left: 1px;
  margin-top: 0.35em;
}

#financial tr td:nth-of-type(1),
#financial tr td:nth-of-type(2) {
  text-align: right;
  padding-right: 4rem;
  padding-left: 4rem;
}
@media all and (max-aspect-ratio: 1/1), (max-width: 1023px)  {
  #financial tr td:nth-of-type(1),
  #financial tr td:nth-of-type(2) {
    text-align: right;
    padding-right: 4%;
    padding-left: 4%;
  }
  .tab-body > ul > li h4 .inline-block {
    display: block !important;
    font-weight: 400;
  }
  #faq .table td, #qna .table td {
    font-size: 1.7rem;
    padding: 1rem; 
  }
  #qna .table thead { display:none;}
  #location #tab0 .flex-row h2, #location #tab0 .flex-row .h2{
    width: 100%; 
    font-size: 2.4rem;
    margin-bottom: 2%;
    margin-top: 4%;
  }
 
}
.red-tap-header {
  border-bottom: 1px solid #e8e5e1;
  flex-grow: 0;
  flex-shrink: 0;
  background-color: #ffffff;
  z-index: 1;
}
.red-tap-header.tab-header ul {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.red-tap-header.tab-header > ul > li {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  margin-right: 3rem;
  margin-left: 0;
  padding: 0;
}
.red-tap-header.tab-header > ul > li a {
  background-color: transparent;
  color: var(--off-text);
  font-size: 2.1rem;
  border-bottom: 3px solid transparent;
  padding-bottom: 0.3em;
}
.red-tap-header.tab-header > ul > li.active a {
  color: var(--hover-red);
  font-weight: bold;
  border-color: var(--hover-red);
}
.content-body .inner-body.red-tap,
.width100 {
  width: 100% !important;
  max-width: none !important;
}
.width30 {
  max-width: 36rem;
  width: 100%;
}
.box-container {
  max-width: 134rem;
  width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
}
.box-container > div {
  width: 100%;
}
.tab-wrap {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height:60rem;
}
.page-content > div.tab-wrap,
.page-content > div.tab-wrap > div.tab-body {
  margin-bottom: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.image50-img::after,
.image50-img::before,
.before-bg::before {
  content: "";
  right: 0;
  left: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
#benefits .image50-img::after,
#benefits .image50-img::before {
  display: none;
}
.image50 {
  position: relative;
}
.image50.relative-mobile {
  display: flex;
  z-index: 1;
  flex-wrap: wrap;
  flex-grow: 1;
}
.image50-img,
.content-img {
  background-size: 1px 1rem;
  background-repeat: repeat;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  left: calc(50% - 1px);
  bottom: 0;
}
.relative-mobile .content-img {
  top: 0;
}
.content-img > img {
  width: 100%;
}
.relative-mobile .image50-img .img-box.width-100 {
  justify-content: flex-end;
}
.relative-mobile .image50-img .img-box.width-100 img {
  width: 100%;
  height: auto;
}
.relative-mobile .image50-img .img-box.width-100.center {
  justify-content: center;
  align-items: flex-end;
}

#mobile .image50-img {
  background-image: url(../images/blind.png);
  background-color: #fff4ec;
}
#mobile .image50-img::after {
  background-image: url(../images/business_mobile_logo.png);

}
#mobile .image50-img::before {
  background-image: url(../images/business_mobile_model.png);
}
.image50-img::after {
  background-repeat: no-repeat;
  background-position: left bottom;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background-size: auto 75vh; 
}

.image50-img::before {
  background-position: right bottom;
  background-size: auto 95%;
  z-index: 3;
  background-repeat: no-repeat;
  max-height: 75vh;
  bottom: 0;
  top: auto;
  height: 100%;
}
.content-item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.content-item .center {
  margin-bottom: 6rem;
}
.content-item .center:last-child {
  margin-bottom: 0;
}
.content-item .box-container,
.red-tap .page-content > .box-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4rem;
  padding-bottom: 10rem;
  flex-grow: 1;
  z-index: 1; 
}
.red-tap .box-container .black-copy {
  font-size: 2rem;
  color: #454038;
  font-weight: 600;
  margin-bottom: 3rem;
  margin-top: 1.6rem;
}
#balance .red-tap .image50 p.black-copy {
  font-size: 1.8rem;
}

.red-tap .tab-body .box-container .tab-body > ul li {
  margin-top: 1.6rem;
}
.red-tap .tab-body .box-container .tab-header ul li {
  margin-bottom: 0;
  margin-top: 0;
}
.page-content .gold-copy {
  font-family: "Noto Sans KR";
  font-size:2.6rem;
  text-align:left;
}
.gold-copy + .black-copy {
  font-size: 1.9rem !important;
}
.gold-copy.portrait-only + .black-copy {
  font-size: 2rem !important;
}
.image50 ul li {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 2rem;
}
.image50 ul li h4 {
  line-height: 1.7;
  color:var(--h4-gold);
}

.box-container h4 {
  font-size: 1.9rem;
  margin-bottom: 0.5em;
}
.sub-tab {
  display: flex;
}
.sub-tab .tab-item a {
  background-color: var(--sub-tap-bg-off);
  border: 1px solid var(--sub-tap-border-off);
  color: var(--text-gold);
  line-height: 1.4;
  height: 5rem;
  font-size: 1.75rem;
  text-decoration: none;
}
.sub-tab .tab-item.active a {
  background-color: var(--sub-tap-bg);
  color: #ffffff;
  border: none;
  text-decoration: none;
}
ul.pic {
  justify-content: space-between;
  display: grid;
  display: -ms-flexbox;
  justify-content: space-between;
  -ms-grid-columns: 1fr 1.6rem 1fr 1.6rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  max-height: 34rem;
  grid-auto-columns: 1fr;
  grid-auto-rows: -webkit-max-content;
  grid-auto-flow: row dense;
  margin-right: -1.4rem;
  overflow: hidden;
  margin-right: -1.6rem;
  margin-top: 2rem;
}
ul.pic li {
  overflow: hidden;
  margin-bottom: 0rem;
  margin-right: 1.6rem;
  flex-basis: calc(100% / 3 - 1.6rem);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

ul.pic li img {
  width: 100%;
  height: auto;
}
.sub-tab .tab-header {
  align-items: flex-start;
  margin-bottom: 0rem;
  margin-top: 0rem;
}

.sub-tab .tab-header {
  flex-grow: 0;
  margin-bottom: 4rem;
}
.sub-tab .tab-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.sub-tab .tab-body .content-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
 
#cable .image50-img {
  background-image: url(../images/blind.png);
  background-color: #f8f2ff;
}
#cable .image50-img::after {
  background-image: url(../images/business_cable_logo.png);
}
#cable .image50-img::before {
  background-image: url(../images/business_cable_model.png);
}

#marketing .image50-img {
  background-image: url(../images/blind.png);
  background-color: #fff2f8;
}
#marketing .image50-img::after {
  background-image: url(../images/business_marketing_logo.png);
}
#marketing .image50-img::before {
  background-image: url(../images/business_marketing_model.png);
}

#organizational .image50-img {
  background-image: url(../images/culture_bg.png);
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}
#organizational .image50-img::after {
  background-image: url(../images/culture_bg_right_top.png);
  background-position: right top;
  background-size: contain;
  right: 0;
  top: 0;
  width: 50%;
  height: 70%;
  left: auto;
  bottom: auto;
  border: none;
  pointer-events: none;
  z-index: 10;
}
#organizational .image50-img::before {
  background-image: url(../images/culture_bg_right_bottom.png);
  background-position: right bottom;
  background-size: auto 30%;
  pointer-events: none;
  z-index: 1000;
  left: auto;
  height: 30%;
  top: auto;
  width: 60%;
  background-size: contain;
  z-index: 10;
}

#organizational #tab1 .image50-img::before {
  width: 80%;
  height: 45%;
  background-size: contain;
  background-image: url(../images/communication_bg_right_bottom.png);
}
#organizational .image50-img {
  left: calc(38% - 1px);
}
#organizational .tab-body > ul > li {
  margin-bottom: 1rem;
}
#organizational .image50 .box-container > * {
  width: 30%;
}

#culture {
  z-index: 4;
  height: 100%;
}
.culture-pagination {
  padding-bottom: 3rem;
}
.culture-pagination .swiper-pagination-bullet {
  width: 100%;
  height: auto;
  display: flex;
  border-radius: 100%;
  background: none;
  opacity: 0.7;
}
.culture-pagination li {
  margin-bottom: 1rem !important;
}
.culture-pagination .gold i.badge {
  margin-top: 0.3em;
}
.culture-pagination .swiper-pagination-bullet h4 {
  font-size: 1.7rem;
  color: #99876b !important;
}
.culture-pagination .swiper-pagination-bullet i.badge {
  border: 0.6rem solid #ffffff;
  box-shadow: none;
  background-color: #99876b;
}
.culture-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.culture-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active
  i.badge {
  flex-basis: 2rem;
  height: 2rem;
  border: 0.6rem solid #fff;
  -webkit-box-shadow: 0 0 1px 1px var(--line-color), 0 0 1px 1px var(--line-color) inset;
  box-shadow: 0 0 1px 1px var(--line-color), 0 0 1px 1px var(--line-color) inset;
  background-color: #eccd9a;
}
.culture-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active
  h4 {
  font-size: 1.9rem;
  color: var(--text-gold) !important;
}

.image50-img .swiper-container,
.image50-img .swiper-container .swiper-slide,
.image50-img .img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  width: 100% !important;
}

.image50-img .img-box {
  justify-content: flex-start;
}
#organizational .image50-img .img-box {
  justify-content: center;
  align-items: center;
}
.relative-mobile .image50-img .img-box {
  overflow: hidden;
}
.image50-img .img-box img {
  width: auto;
  height: 100%;
}
.image50-img .img-box {
  align-items: flex-end;
}
.swiper-button-prev,
.swiper-button-next {
  background-size: contain;
 
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23837649'%2F%3E%3C%2Fsvg%3E");
  left: 2rem;
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23837649'%2F%3E%3C%2Fsvg%3E");
  right: 2rem;
  left: auto;
}
.image50-img .swiper-container .swiper-slide img,
#organizational .image50-img .img-box img {
  border: 5px solid #ffffff;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2);
  max-height: 70%;
  max-width: 80%;
  width: auto;
  height: auto;
  opacity: 0.95;
}
.image50-img .swiper-container .swiper-slide span {
  margin-top: 0.6em;
}
#organizational .image50-img .img-box,
.image50-img .img-box {
  height: 100%;
}
#organizational .image50-img .img-box img {
  height: auto;
  margin-bottom: 3rem;
  max-width: none;
  width: auto;
}

.img-radius {
  border-radius: 50%;
  border: 2px solid #fff;
}
.benefit-list .row > * {
  width: 50%;
  flex: 0 0 auto;
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;
}
.benefit-list .row > li.width100 {
  margin-top: 1.6rem !important;
}
.m-r-15 {
  margin-right: 2rem;
}
.img-40 {
  width: 40px;
  display: inline-block;
}
.benefit-list {
  background-color: hsl(36, 20%, 97%);
  border-top: 1px solid #d9d4ce;
  padding-top: 0.5em;
  padding-bottom: 9rem;
  padding-top: 4rem;
}
.benefit-list ul.box-container {
  flex-direction: row;
}
.benefit-list ul li div.flex-row {
  background-color: #ffffff;
  border: 1px solid #e8e3dd;
  border-radius: 1.6rem;
  padding: 2.4rem 2rem;
}

.benefit-list ul li h5 {
  color: #392a13b3 !important;
  margin-bottom: 0.3em; 
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.text-muted {
  color: hsl(36, 10%, 40%);
  font-weight: 400;
}
.benefit-list ul li h5 span {
  display: inline-block;
  font-size: 1.6rem;
}
.benefit-list ul li h5 span.block,
.benefit-list ul li h5 span.inline-block {
  display: block;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 500;
}
.benefit-list ul li h5 span.inline-block {
  display: inline-block;
}
.benefit-list ul li p {
  line-height: 1.6;
  margin-top: 0.2em;
  margin-bottom: 0;
  font-size: 1.6rem;
}
.benefit-list ul li p span {
  display: block;
}
.benefit-list .d-inline-block {
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.benefit-img {
  background: url(../images/present.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-x: 70%;
  background-position-y: center;
  height: 100%;
  border-radius: 0.2rem;
  background-color:#d5e0ff;
}
.benefit-img img {
  width: auto;
  height: 85%;
  position: absolute;
  right: 2%;
  bottom: 0;
}
.image50 p.black-copy,
.image50 p.gold-copy,
.image50 ul,
.image50.relative-mobile > p,
.image50.relative-mobile > dl {
  width: 40%;
}
.image50.left-35 > div > p.gold-copy {
  width: 100%;
}
.image50.relative-mobile > p.gold-copy {
  text-align: left;
  margin-bottom: 0.6em;
  margin-top: 0.5em;
  line-height: 1.5;
}
#benefits .content-item .box-container {
  position: relative;
  flex-wrap: wrap;
}

#benefits .content-item .box-container .row {
  width: auto;
}
#benefits .content-item .box-container li {
  flex-direction: column;
}
.content-img {
  width: auto !important;
  top: 4rem;
  bottom: 4rem;
}
.content-img {
  left: 44%;
}
#benefits .image50 .box-container > .black-copy,
#benefits .image50 .box-container > ul {
  width: 40%;
}
#benefits .flex-row {
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
#benefits .flex-row img {
  width: 6.5rem;
  height: 6.5rem;
}
.width50 {
  width: 50% !important;
}
.left-35 .image50-img {
  left: 40rem;
}
.image50.left-35 p.black-copy,
.image50.left-35 ul,
.image50.relative-mobile.left-35 > p,
.image50.relative-mobile.left-35 > dl {
  width: 37rem;
}
dl.prize {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 1.4;
  margin-top: 5rem;
  font-size: 1.7rem;
}
dl.prize dt {
  flex: 0 1 auto;
  width: 6em;
  font-weight: 500;
  color: var(--orange-text);
}
dl.prize dd {
  flex: 1 1 auto;
  width: calc(100% - 6em);
  color: var(--h5-gold);
  margin-bottom: 0.8em;
}

@media all and (min-aspect-ratio: 2/1) and (min-width: 1980px) {
  #organizational .image50-img {
    left: 50%;
  }
}

@media all and (min-aspect-ratio: 2/3) {
  .image50-img::before {
    background-position: left 30% bottom;
  }
  .gold-copy .inline-block {
    display: block;
    text-align: center;
  }
  .image50 .gold-copy .inline-block {
 
    text-align: left;
  }
  .block {
    display: block;
  }
}
@media all and (max-aspect-ratio: 5/3), (max-width: 1023px)  {
  .swiper-button-prev,
  .swiper-button-next {
    background-color: transparent;
    border-radius: 100%;
    width: 4rem;
    height: 4rem;
    background-size: auto 50%;
    box-shadow: 0 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
    background-position: center center;
  }
  #benefits .image50::before {
    display: none;
  }
  .image50::before {
    background-size: cover;
    height: 90%;
    top: auto;
    background-position: center bottom;
  }
  .image50 .box-container::before {
    background-position: left top;
    background-size: auto 80%;
    height: 80%;
  }

  .image50-img::before {
    background-position: left 60% bottom;
    background-size: auto 90%; 
  }

  #mobile .image50-img::after,
  #cable .image50-img::after
   {
height:75vh; top: 0; bottom:auto;max-height: 100%;;
  }


  #mobile .image50-img::before,
  #cable .image50-img::before
   { height:75vh; top: auto; bottom:0; max-height: 100%; min-height: 40rem; }
  .image50-img::after {
    background-position: left center;
    background-size: auto 100%;
  }
  #marketing .image50-img::before {
    background-position: right 20% bottom;
  }
  .red-tap .page-content {
    flex-basis: auto;
  }
  /* .content-item .image50-img .img-box img,
  .relative-mobile .image50-img .img-box.width-100 img { min-width:100%;} */

  .left-36 {
    left: calc(45% - 1px);
  }
  .image50-img .img-box.width-100 {
    align-items: center;
  }
}
@media all and (max-aspect-ratio: 4/3), (max-width: 1023px)  {
  .gold-copy {
    font-size: 2.6rem;
  }
  .black-copy.center-mobile span.block {
    display: inline;
  }
  #culture {
    z-index: 4;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  #organizational .image50 .box-container::before {
    display: none;
  }
  #organizational .image50 {
    padding-top: 80rem;
  }
  #organizational .image50-img {
    z-index: 1;
    position: absolute;
    right: 0;
    left: 0;
    bottom: auto;
    left: 0;
    height: 0;
    padding-top: 80rem;
    bottom: 0;
    border-bottom: 1px solid #e8e5e1;
    background-position: left center;
    background-size: cover;
    background-image: url(../images/culture_bg_m.png);
  }
  .content-item .image50-img .img-box img,
  .relative-mobile .image50-img .img-box.width-100 img {
    height: 100%;
    width: auto;
  }
  #organizational .image50 .box-container > * {
    width: 100%;
  }

  .image50-img .swiper-container .swiper-slide span {
    position: absolute;
    bottom: 1em;
  }
  #organizational .red-tap .box-container .black-copy .inline-block {
    display: block;
  }
  #organizational .image50-img .img-box,
  .image50-img .img-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .benefit-list {
    padding-top: 5%;
    padding-bottom: 9rem !important;
  }
  .benefit-list .row > * {
    width: 50%;
  }
  .benefit-list ul li p span {
    display: inline-block;
  }
  #benefits .benefit-img {
    background-position-x: 75%;
  }
  #benefits .benefit-img img {
    right: 0;
  }
}
@media all and (max-aspect-ratio: 1/1), (max-width: 1023px)  {
  .sub-tab .tab-header {
    margin-bottom: 2rem;
  }
  .width30 {
    max-width: 100%;
  }
  .sub-tab {
    padding-bottom: 5rem;
  }
  .portrait-only {
    display: block;
  }
  .gold-copy.portrait-only {
    margin-top: 5%;
    margin-bottom: 3%;
  }
  .portrait-only.gold-copy + .gold-copy {
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 500;
    margin-bottom: 1.6rem;
    margin-top: 0;
  }

  .portrait-only.gold-copy + .gold-copy span.smaller {
    font-size: 1.9rem !important;
  }
  .portrait-center {
    text-align: center !important;
  }
  #sub-tab0 .gold-copy.text-left {
    text-align: center !important;
  }
  .red-tap .page-header {
    margin-top: 0;
    padding-left: 8% !important;
    padding-right: 8% !important;
  }
  .red-tap .box-container .black-copy {
    margin-top: 1rem;
    margin-bottom: 5%;
  }
  .red-tap .box-container.image50 .black-copy {
    margin-top: 5%;
  }
  #balance .red-tap .box-container .black-copy {
    margin-top: 0;
    margin-bottom: 5%;
  }
  .red-tap .box-container .image50 .black-copy {
    margin-top: 0;
  }
  .culture-pagination {
    padding-bottom: 0;
  }
  ul.pic li img {
    height: 100%;
    width: auto;
  }

  .black-copy.center-mobile span.block {
    display: inline-block;
  }
  .image50.relative-mobile > p.gold-copy {
    text-align: center;
  }
  .image50,
  #benefits #tab0.content-item > .box-container,
  .content-item .box-container.image50 {
    padding-top: 50rem;
  }
  .image50 ul li:last-child {
    padding-bottom: 0;
  }
  .image50 ul li h4 {
    margin-bottom: 0;
  }
  .image50 ul li h4 + p {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
  .center-mobile {
    text-align: center;
  }
  .center-mobile span.block {
    display: inline-block;
  }
  /* .culture-pagination  { display:none;} */
  .image50-img .swiper-container .swiper-slide span {
    color: rgba(0, 0, 0, 0.8);
  }
  .content-body .red-tap .page-header.no-bg {
    background-color: transparent;
  }
  .image50 p.black-copy,
  .image50 ul {
    width: 100%;
  }
  .content-item .box-container.image50 {
    padding-top: 50rem;
  }
  .image50 .box-container > * {
    padding-right: 0;
    width: 100%;
  }
  .content-body .red-tap .page-content {
    border-top: none;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0rem;
  }
  .red-tap-header.tab-header ul {
    justify-content: space-around;
    width: 100%;
    border-top: 1px solid #f8f4ee;
  }
  .red-tap-header.tab-header > ul > li {
    margin-right: 0;
    flex: 1 0 auto;
    border-right: 1px solid #f8f4ee;
    width: 50%;
  }
  .red-tap-header.tab-header > ul > li:last-child {
    border-right: none;
  }
  .image50-img,
  .content-img {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    bottom: auto;
    left: 0;
    height: 0;
    padding-top: 50rem;
    bottom: 0;
    border-bottom: 1px solid #e8e5e1;
  }

  dl.prize {
    margin-top: 3rem;
  }
  .content-img {
    border-bottom: none;
  }
  .red-tap-header.tab-header > ul > li a {
    font-size: 1.8rem;
    padding-bottom: 0;
  }
  .image50-img::before {
    background-position: right bottom;
    background-size: auto 85%;
  }
  .image50-img::after {
    background-position: right 20% center;
  }
  #marketing .image50-img::before {
    background-size: auto 100%;
  }
  .mobile01 .box-container::before {
    background-position: left 5% top;
    background-size: contain;
  }
  ul.pic {
    -ms-grid-columns: 1fr;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(32rem, 1fr);
    overflow-x: scroll;
    display: -ms-flexbox;
    white-space: no-wrap;
    grid-auto-rows: 32rem;
    margin-right: 0;
    grid-auto-rows: auto;
    height: 30rem;
  }

  ul.pic li {
    width: auto;
    margin-bottom: 1.6rem;
    flex-shrink: 0;
    flex-grow: 1;
    display: -ms-flexbox;
    flex-basis: 30rem;
  }

  div.center + div.center {
    margin-top: 5%;
  }
  #sub-tab0 div.center + div.center {
    margin-top: 5%;
  }
  .red-tap .page-header,
  .content-body .inner-body header.page-header,
  .content-body header.page-header {
    padding-top: 5%;
  }
  .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23837649'%2F%3E%3C%2Fsvg%3E");
    left: 3rem;
  }
  .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23837649'%2F%3E%3C%2Fsvg%3E");
    right: 3rem;
  }
  #organizational .image50-img {
    padding-top: 50rem;
    left: 0;
  }
  #organizational .image50 {
    padding-top: 50rem;
  }
  #organizational .image50-img .swiper-container .swiper-slide img,
  #organizational .image50-img .img-box img,
  .image50-img .img-box img {
    width: auto;
    max-height: 70%;
    max-width: 90%;
    height: auto;
  }
  #culture {
    left: 0rem;
    right: 0rem;
  }
  .image50-img .swiper-container .swiper-slide span {
    left: 5%;
  }
  .benefit-list .row > * {
    width: 100% !important;
  }
  #benefits #tab0.content-item > .box-container {
    padding-top: 50rem;
    padding-bottom: 1rem;
  }

  .benefit-img {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin-left: -6%;
    margin-right: -6%;
    border-bottom: 1px solid #e8e5e1;
    background-position-y: bottom;
    background-position-x: left;
  }
  .box-container .image50-img {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: auto;
    left: 0;
    height: 0;
    padding-top: 50rem;
    bottom: 0;
    border-bottom: 1px solid #e8e5e1;
  }
  .image50.relative-mobile {
    padding-top: 0rem;
  }
  .image50.relative-mobile {
    display: block;
  }
  .image50.relative-mobile .image50-img {
    position: relative;
    padding-top: 50%;
    border-bottom: none;
    overflow: hidden;
    margin-top: 2.4rem;
    flex: 1 1 auto;
  }
  .image50.relative-mobile .image50-img .img-box img {
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
  }
  #benefits .benefit-img {
    background-position-x: 65%;
    border-bottom: 1px solid #e8e5e1;
    background-size: auto 160%;
    background-position-y: center;
  }
  #benefits .benefit-img img {
    left: 65%;
    right: auto;
    height: 95%;
  }
  .benefit-list ul li h5 span.block {
    display: inline-block;
  }
  .box-container .sub-tab {
    padding-bottom: 0;
  }
  .content-item .sub-tab div.tab-header ul {
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: -0.8rem;
    margin-right: -0.8rem;
    align-items: stretch;
  }
  .content-item .sub-tab div.tab-header li.tab-item {
    flex: 1 1 auto;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    margin: 0;
    line-height: 1.4;
  }
  .sub-tab .tab-item a {
    line-height: 1.4;
    height: 100%;
    padding: 0.5em;
  }
  .gold-copy {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 5%;
  }
  .image50 p.black-copy,
  .image50 p.gold-copy,
  .image50 ul,
  .image50.relative-mobile > p,
  .image50.relative-mobile > dl {
    width: 100%;
  }
  .padding-top-57 {
    padding-top: 57% !important;
  }
  .padding-top-66 {
    padding-top: 66% !important;
  }
  .image50.left-35 p.black-copy,
  .image50.left-35 ul,
  .image50.relative-mobile.left-35 > p,
  .image50.relative-mobile.left-35 > dl {
    width: 100%;
  }
  .tab-body #sub-tab0 ul.address > li {
    margin-bottom: 0;
  }
  .tab-body #sub-tab0 ul.pic {
    margin-top: 0;
  }
  .red-tap .page-content > .box-container.image50 {
    padding-top: 50rem;
    padding-bottom: 5%;
  }
  #field .red-tap .page-content > .box-container.image50 {
    padding-bottom: 9rem;
  }
}
@media all and (max-aspect-ratio: 2/3), (max-width: 1023px) {
  .content-item .box-container,
  .red-tap .page-content > .box-container {
    padding-top: 5%;
  }
  #balance .content-item .image50 .box-container {
    padding-bottom: 5%;
  }
  .tab-header > ul > li a {
    height: 5.5rem;
  }
  .inline-block {
    display: inline;
  }
  .black-copy.center-mobile span.block {
    display: inline;
  }
  .gold-copy {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    margin-bottom: 5%;
    margin-top: 0.5rem;
  }
  .inline-block {
    display: inline !important;
  }
  .gold-copy + .black-copy {
    margin-left: auto;
    margin-right: auto;
  }
  .red-tap .box-container .gold-copy + .black-copy {
    margin-bottom: 1em;
  }
  #location .page-content h3,
  .address h3 {
    flex-basis: 1em;
    margin-bottom: 0.2em;
    font-size: 2.1rem;
  }
  #location .page-content .center > h3 {
    margin-bottom: 0.6em;
  }
  #location ul.address li h3 {
    font-weight: 500;
    font-size: 1.8rem !important;
  }
  
  .red-tap .page-content > .box-container.image50 {
    padding-top: 41rem;
    padding-bottom: 5%;
  }
  .mobile01::before {
    background-size: cover;
    right: -10%;
    left: auto;
  }
  .mobile01 .box-container::before {
    background-position: left top;
  }
  #location .page-content ol li,
  .address > li {
    flex-direction: column;
  }
  #location .page-content ol li h4,
  .address li h4 {
    flex-basis: auto;
  }
  .tab-body ul.address ol li {
    flex-direction: column;
  }
  .benefit-list .row > * {
    width: 100% !important;
  }
  .benefit-list {
    padding-top: 5%;
  }
  .image50,
  #benefits #tab0.content-item > .box-container,
  .content-item .box-container.image50 {
    padding-top: 40rem;
  }
  .image50-img,
  .content-img {
    padding-top: 40rem;
  }
}
ul.menu-4 li {
  width: 25%;
}
ul.menu-5 li {
  width: 20%;
}
#balance .red-tap .image50-img {
  top: 0;
  text-align: center;
}
#balance .red-tap .image50-img img {
  height: 100%;
  display: inline;
  width: auto;
}
#balance .red-tap .image50-img::after {
  border-left: none;
}
#balance .red-tap .image50 p.black-copy,
#balance .red-tap .image50 ul {
  width: 45%;
}
#balance .red-tap #tab0 > .image50::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  background-image: url(../images/office_bg.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto 100%;
  z-index: 0;
}
ul.orange-grid {
  width: 80% !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
ul.orange-grid li h4 {
  margin-bottom: 0.3em;
}
#balance .red-tap #sub-tab1 .image50 ul li,
ul.orange-grid li {
  flex: 1 0 30%;
  padding-right: 5%;
  height: 30%;
  max-width: 60%;
  margin-bottom: 3rem;
}
#balance .red-tap #sub-tab1::after,
#balance .red-tap #sub-tab2::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url(../images/office_bg2.png);
  background-repeat: no-repeat;
  content: "";
  background-position: top right;
  background-size: auto 100%;
  pointer-events: none;
}
#balance .red-tap #sub-tab2::after {
  background-image: url(../images/grass.png);
  background-size: 50% auto;
  background-position: right bottom;
}

#balance #tab1.content-item .box-container {
  max-width: none;
  width: 100%;
}
#balance #tab1.content-item .box-container > * {
  max-width: 134rem;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
#balance .red-tap #sub-tab1 {
  display: block;
}
#balance .red-tap .image-box .pregnent,
.parent .image-box img {
  top: auto;
  left: auto;
  right: 8%;
  width: auto;
  bottom: -2%;
  position: absolute;
  z-index: 1;
  max-height: 75%;
}
.parent .image-box img {
  max-height: 42%;
  right: 5%;
  bottom: 5%;
  max-width: 38%;
  height: auto;
}
#balance .red-tap .page-content > .tab-body > .content-item {
  position: relative;
}
.flex-column.parent ul {
  padding-bottom: 10rem;
}
ul.orange-grid li.basis25 {
  flex-basis: 25%;
}
ul.flex-row-3 {
  display: flex;
  flex-direction: row;
  margin-left: -1.6rem;
  margin-right: -1.6rem;
  width: auto;
}
ul.flex-row-3 > li {
  flex: 1 0 auto;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  width: 33.3%;
}
ul.flex-row-3 > li > .pic-box {
  overflow: hidden;
  height: 0;
  padding-top: 75%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

ul.flex-row-3 > li > .pic-box > img {
  width: 100%;
  height: auto;
}
ul.flex-row-3 > li > .txt-box {
  margin-top: 1em;
}
@media all and (max-width: 1023px){
  ul.orange-grid li {
    flex: 0 0 40%;
    padding-right: 3%;
    height: 20%;
  }
  #balance .red-tap .image-box .pregnent {
    right: 2%;
    max-height: 65%;
  }
  .parent .image-box img {
    right: 5%;
    max-height: none;
    max-width: none;
    width: 36%;
    height: auto;
    bottom: 2%;
  }
  ul.orange-grid {
    width: 80% !important;
  }
  ul.orange-grid.width100 {
    width: auto !important;
    margin-right: -5%;
  }
  ul.orange-grid.width100 li {
    flex: 1 0 33%;
    padding-right: 5%;
    height: 20%;
    max-width: 66%;
  }
  .flex-column.parent ul {
    padding-bottom: 15%;
  }
}
@media all and (max-aspect-ratio: 1/1), (max-width: 1023px)  {
  #balance #sub-tab0 .flex-column {
    margin-bottom: 6rem;
  }
  #balance .red-tap .image50-img {
    bottom: 0;
    background-image: url(../images/office_bg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto 100%;
    z-index: 0;
  }
  .content-item .center {
    margin-bottom: 5%;
  }
  #balance .red-tap .image-box .pregnent {
    right: 15%;
    max-height: 90%;
  }
  #balance .red-tap #tab0 > .image50::after {
    display: none;
  }
  #balance .red-tap .image50 p.black-copy,
  #balance .red-tap .image50 ul {
    width: 100%;
  }
  ul.orange-grid {
    width: auto !important;
    margin-right: -5%;
  }
  ul.orange-grid li {
    flex: 0 0 50%;
    padding-right: 5%;
    height: auto;
  }
  #balance .red-tap #sub-tab1::after {
    display: none;
  }
  #balance .red-tap .image50-img img {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
  }
  #balance .red-tap #sub-tab1 {
    display: flex;
    flex-direction: column;
  }
  .image-box {
    position: relative;
    flex: 1 1 40%;
    padding-top: 60%;
    background-image: url(../images/office_bg2.png);
    background-size: cover;
    margin-left: -8rem;
    margin-right: -8rem;
    margin-top: -20rem;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: calc(-5rem - 5%);
  }
  #balance .flex-column.parent ul.orange-grid.width100 li {
    max-width: 100%;
  }
  #balance .red-tap #sub-tab2::after {
    display: none;
  }
  #balance .image-box .pregnent {
    max-height: 90%;
    right: 20%;
  }
  .parent .image-box img {
    right: 8%;
    max-height: none;
    width: 60%;
    height: auto;
  }
  .flex-column.parent ul {
    padding-bottom: 0;
  }
  #balance #sub-tab0 .flex-column.parent {
    padding-bottom: 40rem;
  }
  #balance .parent .image-box {
    background-image: url(../images/grass.png);
    background-size: 100% auto;
    background-position: bottom right;
    background-repeat: no-repeat;
  }
  #balance .red-tap #sub-tab1 .image50 ul li,
  ul.orange-grid li,
  #balance .flex-column.parent ul.orange-grid.width100 li {
    flex: 0 0 50%;
    padding-right: 5%;
    height: 20%;
    margin-bottom: 5%;
  }
  #balance .content-item .box-container.image50 {
    padding-top: 0;
  }
  #balance .content-item .box-container.image50 > p {
    position: absolute;
    left: 0;
    top: 5%;
    width: 40%;
  }
  #balance .content-item .box-container.image50 ul {
    padding-top: 53rem;
  }

  ul.flex-row-3 {
    flex-direction: column;
  }
  ul.flex-row-3 > li {
    width: 100%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  ul.flex-row-3 > li > .pic-box {
    padding-top: 50%;
    overflow: hidden;
    position: relative;
    max-width: none;
    width: 100%;
  }
  ul.flex-row-3 > li > .pic-box > img {
    position: absolute;
    top: 0;
    bottom: 0;
  }
  ul.flex-row-3 > li > .txt-box {
    margin-left: 2rem;
    min-width: 15rem;
    flex: 1 0 34%;
    margin-top: 0;
  }

  .tab-header > ul > li a {
    height: 6rem;
    background-color: #ffffff;
  }
  .next-prev-control {
    margin-top: -6rem;
  }
  .next-prev-control ul {
    height: 6rem;
  }
}

@media all and (max-aspect-ratio: 2/3), (max-width: 1023px)  {
  .red-tap .box-container .gold-copy + .black-copy {
    margin-bottom: 0.8em;
  }
  #balance .content-item .box-container.image50 {
    padding-top: 40rem;
  }
  #balance .content-item .box-container.image50 > p {
    position: relative;
    width: 100%;
  }
  #balance .content-item .box-container.image50 ul {
    padding-top: 0;
  }
  #balance .red-tap #sub-tab1 .image50 ul li,
  ul.orange-grid li,
  #balance .flex-column.parent ul.orange-grid.width100 li {
    flex-basis: 100%;
    max-width: 100%;
  }
  #balance .red-tap #sub-tab1 .image50 ul.orange-grid li {
    max-width: 100%;
  }
  .parent .image-box img {
    right: 10%;
    max-height: none;
    width: 70%;
    height: auto;
  }
  #balance #sub-tab0 .flex-column {
    margin-bottom: 5%;
  }
  #balance #sub-tab0 .flex-column.parent {
    padding-bottom: 0;
    padding-top: 8%;
  }
  #balance #sub-tab0 .flex-column.parent .image-box {
    background-color: #f0f7ff;
  }
  .image-box {
    margin-top: 0;
  }
  ul.flex-row-3 {
    flex-direction: column;
  }
  ul.flex-row-3 > li {
    width: 100%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
  }
  ul.flex-row-3 > li:last-child {
    margin-bottom: 0;
  }
  ul.flex-row-3 > li > .pic-box {
    flex: 0 0 0;
    padding-top: 60%;
  }
  ul.flex-row-3 > li > .txt-box {
    margin-left: 0;
  }
  .gold-copy.portrait-only {
    margin-bottom: 1em;
    margin-top: 0;
    font-size: 2.6rem;
    margin-left: 0;
  }

  #edu .portrait-only.gold-copy + .gold-copy,
  #edu .gold-copy.portrait-only {
    text-align: center;
    margin-right: auto;
    margin-left: auto;

  }

  #balance #sub-tab0 .image-box {
    margin-left: 0;
    margin-right: 0;
    border: 1px solid #eee;
    overflow: hidden;
    background-color: #fffcf7;
    margin-bottom: 0;
  }
  ul.flex-row-3 > li > .txt-box {
    margin-top: 1em;
  }
  #balance .red-tap .image50-img {
    top: 0;
  }
}
#edu #tab0 .image50-img {
  background-image: url(../images/top_edu.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
ul.flex-row-3.course-card {
  flex-wrap: wrap;
  margin-top: 2rem;
}
ul.flex-row-3.course-card > li {
  width: 25%;
}
ul.flex-row-3.course-card > li > div {
  padding-top: 4.5rem;
  padding-bottom: 4rem;
  background-color: #fffdfa;
  border: 1px solid var(--line-color);
  border-radius: 1em;
  height: 100%;
  padding-left: 12%;
  padding-right: 12%;
  width: 100%;
}
ul.flex-row-3.course-card > li > div h4 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.2em;
}
ul.flex-row-3.course-card > li > div ul li,
ul.simple-dot li,
ul.simple-dash li {
  padding-left: 0.7em;
  position: relative;
  margin-bottom: 0.4em;
  line-height: 1.6;
}
ul.simple-dot li ul.simple-dash {
  margin-bottom:1rem;
}
.simple-dot li,
ul.simple-dash li:last-child {
  margin-bottom: 0;
}
ul.flex-row-3.course-card > li > div ul li:before,
ul.simple-dot > li:before,
ul.simple-dash > li:before {
  content: "·";
  font-weight: 900;
  position: absolute;
  left: 0;
  line-height: 1.6;
  top: 0;
}
h4 + ul.simple-dot {
  margin-left: 1em;
}
ul.simple-dash > li {
  font-weight: 400;
}
ul.simple-dash > li:before {
  content: "- ";
  font-weight: normal;
}
.image50 ul li p.black-copy {
  width: 100%;
}
#edu .relative-mobile .image50-img .img-box.width-100.center {
  border: 1px solid #eeeeee;
  background: url(../images/smartleaning.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
@media all and (max-aspect-ratio: 4/3), (max-width: 1023px) {
  ul.flex-row-3.course-card > li {
    width: 50%;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
}
@media all and (max-aspect-ratio: 1/1), (max-width: 1023px) {
  ul.flex-row-3.course-card {
    flex-direction: row;
    padding: 0 3%;
    margin-top:0;
  }
  ul.flex-row-3.course-card > li {
    width: 50%;
    padding: 2%;
    margin-bottom: 0;
  }
  ul.flex-row-3.course-card > li > div {
    padding: 5%;
    text-align: center;
  }
  ul.flex-row-3.course-card > li > div h4 {
    margin-bottom: 5%;
    margin-top: 2%;
  }
  ul.flex-row-3.course-card > li > div > ul {
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: center;
  }
  #edu .portrait-only.gold-copy + .gold-copy, #edu .gold-copy.portrait-only {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
} 
  .red-tap .box-container .gold-copy + .black-copy {
    margin-top: 0.8em;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2.4em;
  }
}
@media all and (max-aspect-ratio: 2/3), (max-width: 1023px) {
  ul.flex-row-3.course-card > li {
    width: 100%;
  }
  ul.flex-row-3.course-card > li > div h4 {
    margin-top: 0;
  }
  .image50 ul li h4 { 
    line-height: 3rem;
    margin-bottom: 0.3em;
  }
 
  .red-tap .box-container .gold-copy + .black-copy {
    margin-top: 0.8em;
    text-align: center;
    font-size: 2.1rem;
    margin-bottom: 1.6em;
  }
  #balance .red-tap #sub-tab1 .image50 ul li,
  ul.orange-grid li,
  #balance .flex-column.parent ul.orange-grid.width100 li {
    margin-bottom: 2%;
    margin-top: 1%;
  }
}
#talent .page-content {
  background-image: url(../images/ideal_talent.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

#talent .page-content::before {
  content: "";
  margin: 6.5rem auto;
  left: 0;
  right: 0;
  position: absolute;
  width: 37rem;
  height: 30rem;
  background-size: contain;
  background-image: url(../images/happywing.png);
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.7;
}
#talent .page-content::after {
  position: absolute;
  content: "";
  bottom: 0;
  top: 0;
  right: 0;
  left: auto;
  background-image: url(../images/butterfly.png);
  background-position: bottom left;
  background-size: cover;
  width: 50%;
  background-repeat: no-repeat;
}
#talent .page-content .box-container {
  z-index: 1;
}
#talent .page-content .box-container .gold-copy.black { 
  margin-bottom: 3rem;
  width: 90%;
  height: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 500;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  color:#000000ee;
  text-align: center;
}
#talent .page-content .box-container .gold-copy.black span.inline-block {
  display: inline-block;
}
#talent .page-content .box-container ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#talent .page-content .box-container ul li {
  flex-basis: 33%;
  text-align: center;
}
#talent .page-content .box-container ul li:nth-of-type(2) {
  padding-top: 6%;
}
#talent .page-content .box-container ul li h4 {
  padding: 1.2rem 4rem;
  color: #ffffff;
  border-radius: 10rem;
  margin-bottom: 2.4rem;
  display: inline-block;
}
#talent .page-content .box-container ul li h4 span {
  margin-top: 0.2rem;
  display: inline-block;
}
#talent .page-content .box-container ul li p {
  padding: 0 10%;
  color: #331f00;
  font-size: 2rem;
  font-weight: 500;
}
.red-bg {
  background-color: rgba(234, 0, 44, 0.6);
}
.orange-bg {
  background-color: rgba(238, 100, 0, 0.6);
}
.darkblue-bg {
  background-color: rgba(32, 50, 109, 0.7);
}

@media all and (max-aspect-ratio: 5/3), (max-width: 1023px) {
  #talent .page-content {
    background-size: cover;
  }
}
@media all and (max-aspect-ratio: 1/1), (max-width: 1023px) {
  #talent .page-content .box-container ul {
    flex-direction: column;
  }
  #talent .page-content .box-container ul li {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
  }
  #talent .page-content .box-container ul li h4 {
    min-width: 40%;
    font-family: "Noto Sans KR";
  }
}
@media all and (max-aspect-ratio: 2/3), (max-width: 1023px) {
  #talent .page-content .box-container ul {
    margin-bottom: 5%;
  }
  #talent .page-content .box-container ul li h4 {
    margin-bottom: 5%;
    padding-left: 2em;
    padding-right: 2em;
  }
  #talent .page-content .box-container ul li h4 span {
    margin-bottom: 0.2em;
  }
}
.image50 ul ul {
  width: 100%;
}
li.flex-row {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start;
  color: #331f00;
}
li.flex-row h5 {
  margin-right: 2em;
  font-weight: 500;
  font-size: 1.8rem;
  margin-top: 0;
}
#field .gold-copy {
  margin-bottom: 2.4rem;
}
#field .gold-copy + .black-copy {
  padding-bottom: 1rem;
  margin-top: 0;
}
#field .page-content {
  background-color: #f8f8ff;
  border-top: #e8e5e1 1px solid;
}
#field .image50-img::after {
  border-left: none;
}
#field .image50 .gold-copy {
  text-align: left;
}
#field .page-content .box-container {
  padding-top: 3.5rem;
}
#field .image50-img {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#field .image50-img img {
  width: auto;
  height: 90%;
  transform: rotate(10deg);
}
@media (max-aspect-ratio: 4 / 3), (max-width: 1023px) {
  #field .image50-img {
    left: 45%;
    justify-content: center;
  }
  #field .image50-img img {
    position: absolute;
    top: 5%;
    bottom: 5%;
    height: auto;
    width: 100%;
  }
 
  li.flex-row h5 {
    margin-bottom: 0.3em;
  }
  ul.simple-dash li {
    margin-bottom: 0.2rem;
  }
}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  #field .image50-img {
    justify-content: center;
    left: 0;
    border-bottom: none;
  }
  #field .image50-img img {
    position: absolute;
    top: 5%;
    bottom: 5%;
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
  }
  #field .page-content .box-container {
    padding-top: 50rem;
  }
  #field .red-tap .box-container .gold-copy + .black-copy {
    text-align: left;
    width: 100% !important;
  }
  #field .image50-img {
    padding-top: 50rem;
    width: 100%;
  }
  #field .image50-img img {
    bottom: 0;
    top: 2rem;
  }
  .image50 ul ul {
    width: auto;
  }
}
@media (max-aspect-ratio: 2/3), (max-width: 1023px) {
  #field .image50-img {
    justify-content: center;
    padding-top: 100%;
  }
  #field .image50-img img {
    position: absolute;
    top: 2rem;
    bottom: 0;
  }
  #field .page-content .box-container {
    padding-top: 100%;
  }
}
 h3 {
  color: var(--h5-gold); 
  font-weight: 600;
}
 h3 p {
  font-size: 1.7rem;
  margin-top: 1em; 
  font-weight: 400;
}
 .location-tab {
  display: flex;
  color: #635f5a;
  margin-bottom: 0.8em;
  margin-left: 0;
  margin-right: auto;
  font-size: 1.7rem;
  margin-top: 2em;
  flex-wrap: wrap;
}
 ul.location-tab li::after {
  content: "｜";
  width: 3rem;
  text-align: center;
  color: hsl(36, 5%, 80%);
  display: inline-block;
  line-height: 2;
  font-size: 1.3rem;
  vertical-align: middle;
}
 ul.location-tab li:last-child::after {
  display: none;
}
 ul.location-tab a.on {
  color: var(--orange-text);
  font-weight: 500;
}
 ul.hire-list {
  margin-bottom: 3rem;
  width:100%;
}
 .paging {
  text-align: center;
  margin-bottom: 4rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto; 
}
.paging a,.paging .btn {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;

}
.paging a img {
  max-width:100%; 
  height: auto;
}
.paging a i {
  display: inline-block;
  width: 4.1rem;
  height: 4.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -10rem;
  overflow: hidden;
}
.paging a.last-total {
  pointer-events: none;
  cursor:default;
  opacity:0.3;
}
.paging .btn {
  border:none;
  opacity:0.7;
  color:transparent;font-size:0;text-indent: -100px;
  background-repeat: no-repeat;
  background-position:center center;
  background-size: auto 1.7rem;
}
.paging .btn:hover {
  opacity:1;
  background-color:transparent;
}
.paging .btn.disable { 
  opacity:0.3;
  cursor:default;
  pointer-events: none;
}
.disable-btn {
  cursor:default;
  pointer-events: none;	
  background-color:#F2F2F0;
  border:#d9d4ce 1px solid;
}

.paging .btn.disable:hover {
  opacity:0.3;
}
.paging .first-pg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.414' height='18.828' viewBox='0 0 18.414 18.828'%3E%3Cg id='first' transform='translate(-684.5 -928.086)'%3E%3Cpath id='l' d='M2810.2,5757.5l-8,8,8,8' transform='translate(-2108.699 -4828)' fill='none' stroke='%234d3a19' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='l-2' data-name='l' d='M2810.2,5757.5l-8,8,8,8' transform='translate(-2116.699 -4828)' fill='none' stroke='%234d3a19' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.paging .prev-pg, .paging .prev-one-pg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.414' height='18.828' viewBox='0 0 10.414 18.828'%3E%3Cpath id='l' d='M2810.2,5757.5l-8,8,8,8' transform='translate(-2801.199 -5756.086)' fill='none' stroke='%234d3a19' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.paging .prev-one-pg {
  display:none;
}
.paging .next-pg, .paging .next-one-pg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.414' height='18.828' viewBox='0 0 10.414 18.828'%3E%3Cpath id='r' d='M2810.2,5757.5l-8,8,8,8' transform='translate(2811.613 5774.914) rotate(180)' fill='none' stroke='%234d3a19' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.paging .next-one-pg  { display:none;}
.paging .last-pg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.414' height='18.828' viewBox='0 0 18.414 18.828'%3E%3Cg id='last' transform='translate(-1207.5 -945.086)'%3E%3Cpath id='r' d='M8,0,0,8l8,8' transform='translate(1224.914 962.5) rotate(180)' fill='none' stroke='%234d3a19' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='r-2' data-name='r' d='M8,0,0,8l8,8' transform='translate(1216.914 962.5) rotate(180)' fill='none' stroke='%234d3a19' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}
div.paging > a.vertical:before {
  content: "|";
  color: #d2cdc6;
  font-size: 1.6rem;
  width: 2.6rem;
  display: inline-block;
  vertical-align: top;
  margin-top: 0.3em;
}
div.paging > a.vertical:after {
  content: "|";
  color: #d2cdc6;
  font-size: 1.6rem;
  width: 2.6rem;
  display: inline-block;
  vertical-align: top;
  margin-top: 0.3em;
}
.paging {
  display: flex;
  align-items: center;
  justify-content: center;
}
.paging .paging_num {
  flex-direction: row;
  display: flex;
  margin-left: 0.5em;
  margin-right: 0.5em;
  justify-content: space-around;

}
.paging .paging_num a {
  width: 4.2rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500; 
  line-height: 1;
}
 
div.paging > a:last-child:after {
  display: none;
}


.btn-white {
  width: auto; 
  padding: 0 2rem;
  display: inline-flex;
  color: var(--body-brown);
  border: 1px solid #d9d4ce;;
  border-radius: 0.4rem;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;
  min-height:4.5rem; 
}
.btn-white:hover { 
  background-color: hsl(36, 50%, 99%) !important; 
  border:1px solid #73552680 !important;
  text-decoration: none;
}
.paging .paging_num .on {
  border: 1px solid rgba(240, 112, 0, 0.5);
  color: var(--orange-text); 
  border-radius: 0.4rem;
  background-color: #ffffff; 
  margin-left:0.5rem; 
  margin-right:0.5rem; 
  font-weight: bold;
}
.paging .paging_num .on:hover {
  background-color: #fff5e5; 
}
.paging .paging_num a {
  font-family:'Montserrat';
  font-weight: 500;
  color: var(--body-brown);
}

#hire {
  padding-top: 0 !important;
}
#hire header.detail-header {
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 3rem;
  justify-content: center;
}
#hire header.detail-header .date {
  opacity: 0.7;
}
.btn-write,
button.btn.btn-write {
  position: absolute;
  right: 0;
  border-radius: 0.4rem; 
  width: auto;
  top: 0;
  margin-right: 0;
}
 
.btn-write i {
  display: inline-block;
  width: 2.1rem;
  height:2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.076' height='17.097' viewBox='0 0 17.076 17.097'%3E%3Cpath id='edit_square_FILL0_wght400_GRAD0_opsz48' d='M121.237,232.1A1.269,1.269,0,0,1,120,230.86V218.485a1.269,1.269,0,0,1,1.237-1.237h8.353l-1.237,1.237h-7.115V230.86h12.374v-7.177l1.237-1.237v8.414a1.269,1.269,0,0,1-1.237,1.237ZM127.424,224.672Zm3.754-7.26.887.866-5.878,5.857v1.774h1.753l5.9-5.9.866.866-6.249,6.27H124.95v-3.506Zm3.527,3.465-3.527-3.465,2.062-2.062a1.245,1.245,0,0,1,1.753.021l1.732,1.753a1.233,1.233,0,0,1,.351.876,1.135,1.135,0,0,1-.371.856Z' transform='translate(-120 -215)' fill='%23f17000'/%3E%3C/svg%3E%0A"); 
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.detail-txt {
  font-weight: 500;
  font-size: 1.85rem;
}
@media (max-aspect-ratio: 1/1), (max-width: 1023px)  {
   ul.hire-list {
    width: 100%;
  }
  div.paging > a.vertical:before,
  div.paging > a.vertical:after {
    display: none;
  }
   .location-tab {
    display: none;
  }
}

.accodion-list {
  margin-bottom: 4rem;
  border-top: 2px solid var(--h3-gold);
  width: 100%;
}
.accodion-list li {
  border-bottom: 1px solid #E6E0D6;
  width: 100%;
}
.accodion-list li:last-child {
  border-bottom: 1px solid hsl(33, 13%, 75%);
}
.accodion-list .accordion {
  background-color: #ffffff;
  font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
  cursor: pointer;
  min-height: 6rem; 
  padding-top: 1em;
  padding-left:0.5em;
  padding-bottom: 1em;
  width: 100%;
  text-align: left;
  border: none;
  font-size: 1.8rem;
  position: relative;
  padding-right: 6rem;
  color: #454038;
  line-height: 1.6;
  font-weight: 500;
}
#faq .accodion-list .accordion {
  padding-left: 3.5rem;
}
i.badge-new {
  width: 2.5rem;
  height: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.356' height='15.298' viewBox='0 0 13.356 15.298'%3E%3Cpath id='new' d='M3.129-15.3a3.012,3.012,0,0,1,.388.021A.992.992,0,0,1,3.8-15.2a.946.946,0,0,1,.241.163,2.76,2.76,0,0,1,.263.283l7.266,9.188q-.042-.441-.063-.856T11.487-7.2v-8.1h3.129V0H12.768a1.7,1.7,0,0,1-.693-.126,1.483,1.483,0,0,1-.546-.462L4.316-9.7q.031.4.052.782t.021.719V0H1.26V-15.3Z' transform='translate(-1.26 15.298)' fill='%23ED6E00'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  color: transparent;
  background-position: center center;
  padding: 0;
  text-indent: -100px;
  overflow: hidden;
  display: inline-block;
  background-size: 1rem;
  margin-right: 0.5rem;
  vertical-align: top;
}
.accodion-list .newPic {
  flex: 0 1 auto;
  padding-right: 2.4rem;
  max-width:20rem;
}
.accodion-list .newPic img {
  width: 100%;
  height:auto;
}

.accodion-list .active,
.accodion-list .accordion:hover {
  background-color: #ffffff;
}
.accodion-list .accordion i.ico-qustion {
  vertical-align: top;
  margin-right: 1.6rem;
  position: absolute; 
  left: 0;
  height: auto;
  width: 3.4rem; 
  color:transparent;
  text-indent: -10rem;
  overflow: hidden;
}
.question-txt {
  font-weight: 500;
}
.accodion-list .accordion .num {
  font-weight: 500;
}
.accodion-list .accordion .day {
  font-size: 1.4rem;
  display: inline-block;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 1em;
}
/* Style the accordion panel. Note: hidden by default */
.accodion-list li div.panel {
  padding: 0 3rem;
  background-color: #fcfbfa;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  box-shadow: 0px 1px 2px hsl(34, 10%, 90%) inset;
}
.accodion-list li .accordion.active + div.panel {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  max-height: none !important;
  display: flex;
}
.accordion:after {
  content: ""; /* Unicode character for "plus" sign (+) */
  width: 6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath id='arrow' d='M1630.228,6628.664h10a.5.5,0,0,1,.354.854l-5,5a.5.5,0,0,1-.707,0l-5-5a.5.5,0,0,1,.354-.854Z' transform='translate(-1629.728 -6628.664)' fill='%236f614c'/%3E%3C/svg%3E%0A")
    no-repeat center;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: 20% auto;
}
.active:after {
  content: ""; /* Unicode character for "minus" sign (-) */
  transform: rotate(180deg);
  transition: transform 0.2s;
}
.recruit-message a i.ico {
  width: 2.4rem;
  height: 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  background-size: 2.4rem 2.4rem;
}
i.ico-qustion {
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.314' height='16.652' viewBox='0 0 16.314 16.652'%3E%3Cpath id='q' d='M14.663-2.2l2.625,3.394h-3.4L12.555-.527A7.541,7.541,0,0,1,8.869.379,7.5,7.5,0,0,1,3.223-1.964,7.785,7.785,0,0,1,.974-7.547,7.8,7.8,0,0,1,2.021-11.52,7.8,7.8,0,0,1,4.9-14.4a7.69,7.69,0,0,1,3.935-1.066,7.5,7.5,0,0,1,5.515,2.317,7.712,7.712,0,0,1,2.3,5.65A7.672,7.672,0,0,1,14.663-2.2ZM12.869-4.523a5.239,5.239,0,0,0,.913-2.994,5.042,5.042,0,0,0-1.447-3.64,4.69,4.69,0,0,0-3.5-1.5A4.759,4.759,0,0,0,5.292-11.2,5.07,5.07,0,0,0,3.866-7.5a4.823,4.823,0,0,0,1.8,3.958A4.942,4.942,0,0,0,8.857-2.4a4.709,4.709,0,0,0,1.931-.4l-2.7-3.475h3.425Z' transform='translate(-0.974 15.463)' fill='%23ED6E00'/%3E%3C/svg%3E%0A")
    no-repeat center;
  display: inline-block;
  background-size: 50% auto;
}
i.ico-lock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.022' height='17.711' viewBox='0 0 13.022 17.711'%3E%3Cpath id='lock' d='M161.6,153.711a1.289,1.289,0,0,1-1.286-1.286v-9.012a1.289,1.289,0,0,1,1.286-1.286h1.19v-2.057a4.071,4.071,0,1,1,8.143,0v2.057h1.118a1.289,1.289,0,0,1,1.286,1.286v9.012a1.289,1.289,0,0,1-1.286,1.286Zm5.265-4a1.6,1.6,0,0,0,1.164-.472,1.532,1.532,0,0,0,.482-1.135,1.68,1.68,0,0,0-.486-1.168,1.557,1.557,0,0,0-2.332,0,1.7,1.7,0,0,0-.482,1.179,1.514,1.514,0,0,0,.486,1.125A1.617,1.617,0,0,0,166.861,149.714Zm-2.789-7.586h5.571v-2.057a2.786,2.786,0,1,0-5.571,0Z' transform='translate(-160.31 -136)' fill='%23b3a48f'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 0.5rem;
  width: 1em;
  height: 1em;
  display: inline-block;
  background-position: center center; 
  color:transparent;
  overflow:hidden;
  text-indent: -10rem;
}
#faq #tab1 table.table tbody td:nth-child(3) {
  text-align: left;
  padding-left: 2.4rem;
}
.recruit-message { 
  display: inline-flex;
  font-size: 1.6rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.recruit-message span {
  font-weight: 500;
  background: url(../images/ico_mail.gif) no-repeat left center;
  padding-left: 5rem;
  background-size: auto 3rem;
  margin-right: 0.3em;
}
.recruit-message a {
  color: var(--text-gold);
  font-weight: 500;
  margin-left: 0.3em;
  margin-right: 0.3em;
}
.recruit-message a:hover {
  text-decoration: underline;
  background-color: #ffffdd;
}
.list-footer {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.no-recruiting {
  opacity: 0.9;
  text-align: center;
  height:8rem;
  line-height:8rem;
}
ul.hire-list li.no-recruiting a:hover {
  background-color: transparent;
}
 
.search {
  display: flex;
  height: 4.5rem;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  margin-bottom: 3rem;
}
.search + .btn-write {
  max-width: 68rem;
}
#search_form {
  display: flex;
}
#faq #search_form, #notice #search_form {
  flex-wrap: nowrap;
}
.search * {
  border-radius: 0.4rem;
  font-family: "Noto Sans KR";
  font-weight: 400;
}
.search button.btn {
  font-weight: 500;
  border: none;
  height: 100%;
  border-radius: 0; 
  border-radius: 0.4rem;
  border: 1px solid #d9d4ce;;
  background-color: #ffffff;
  font-size: 1.5rem;
}
.search > * {
  font-size: 1.5rem;
  width: 100%;
}
.search .select-box {
  width: 18rem;
  flex-grow: 0;
}
.input-group-button {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}
.input-group-button input[type="text"] {
  flex: 1 1 auto;
  padding-left: 1.4rem;
  border: 1px solid #d9d4ce;;
  background-color: #fcfbfa; 
  font-size: 1.5rem; 
  border-radius: 0.4rem;
  padding-right:8rem;
}
.input-group-button input::placeholder {
  opacity: 0.8;
}
.input-group-append {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
  right: 0;
  bottom: 0px;
  right: 0;
  top: 0px;
}
.input-group-button .input-group-append .btn { 
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0;
  max-height: none;
  border: 1px solid #d9d4cc; 
  z-index:2
}
.input-group-button .input-group-append .btn:hover,
.input-group-button .input-group-append .btn:focus {
  border-color: hsl(37, 20%, 70%) !important;
}
.select-box {
  width: 25rem;
  flex: 1 1 auto;
  height: 4.5rem;
  margin-right: 1.6rem;
  float:left;
}
.select-box select,
.inline-select-box select,
.ui-widget select {
  display: block;
  width: 100%;
  height: 100%;
  color:#454038;
  font-size: 1.5rem;
  -moz-padding-start: calc(1rem - 3px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.828' height='10.414' viewBox='0 0 18.828 10.414'%3E%3Cpath id='expand' d='M-3244.038-9441.8l8,8,8-8' transform='translate(3245.452 9443.219)' fill='none' stroke='%2371634d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A");
  background-color: #fcfbfa;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.6rem 1.6rem;
  border: 1px solid #d9d4ce;;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 1.4rem;
  border-radius: 0.4rem;
  font-family: "Noto Sans KR";
  font-weight: 400;
  padding-right: 3.6rem;
  box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.1) inset;
  border-radius: 0.4rem; 
}
.select-box select:hover,
.inline-select-box select:hover,
.select-box select:focus,
.inline-select-box select:focus {
  border-color: hsl(37, 20%, 70%) !important;
}
@media (max-aspect-ratio: 1/1), (max-width: 1023px)  {
  .btn.btn-write,
  button.btn.btn-write {
    position: relative;
    display: flex;
    width: 100%; 
  }
  .btn.btn-write + p.recruit-message { margin-top: 3rem;}

  .paging .num a {
    margin-left: 0;
    margin-right: 0;
  } 
}

@media (max-aspect-ratio: 4 / 5), (max-width: 1023px)  {
  #faq .paging {
    padding-top: 0;
  }
  .accodion-list li .accordion.active + div.panel {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
    max-height: none !important;
    display: flex;
  }
  .select-box {
    width: 100%;
    height:auto;
  }
   .paging {
    position: relative;
    flex-wrap: wrap;
    margin-left: 0;
  }
  #faq .paging,
  #notice .paging {
    margin-left: auto;
  }
   .paging.no-write-btn {
    padding-top: 0;
  }
  .btn-write {
    width: 100%;
    top: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 14rem;
  }
  .accodion-list li div.panel > .left-pic {
    margin-bottom: 5%;
  }
  .accodion-list li div.panel {
    padding: 0 3% !important;
    flex-direction: column;
  }
  #qna #tab1 table.table tr > * {
    padding-left: 0.4em;
    padding-right: 0.4em;
  }
 
 
  #qna #tab1 table.table tr > *:nth-child(1), #qna #tab1 table.table tr > *:nth-child(2), #qna #tab1 table.table col:nth-child(1), #qna #tab1 table.table col:nth-child(2){
    border-left: none;
    display: none;
  }
  #qna #tab1 table.table tr > *:nth-child(3) { border-left:none;}
  .accodion-list .accordion .day {
    margin-left: 1em;
    float: none;
  }
 
}

@media (max-aspect-ratio:1/1), (max-width: 1023px)  {
  .paging a:first-child { 
    border-radius: 0.4rem 0 0 0.4rem;
  }
 
  .paging a:last-child {
    border-radius: 0 0.4rem 0.4rem 0;
  } 
  .paging a, .paging > .btn { 
    flex: 1 1 auto;
    border-left: none;
  }
  .paging a img {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    max-height:3.8rem;
  }
 
  #search_form {
    max-width: none;
    flex-wrap: wrap;
  }

  #qna #search_form .select-box {
    width: 45%;
    flex-grow: 1;
    margin-right:0;
  }
  .padding-right-5 {
    padding-right: 1.6rem !important;
  }
  #search_form > * {
    margin-bottom: 1em; 
  }

  #search_form {
    max-width: none;
  }
  .paging .paging_num a {
    margin-left: 0;
    margin-right: 0;
  }
 
   .paging {
    margin-left: auto;
    margin-right: auto; 
    justify-content: space-between;
    align-items: center;
    max-width: none;
    max-width:68rem; 
  }
  .search { 
    height: auto;
  }
  #hire header.detail-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 0;
  }

}


@media (max-aspect-ratio: 2 / 3), (max-width: 1023px)  {
  .search { margin-bottom:5%; }
  .paging a img {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    max-height: 4rem;
  }
  .select-box,
  .search .select-box {
    margin-right: 0;
    width: 100%;
    margin-bottom: 5%;
  }
  #faq .search .select-box,   #notice .search .select-box {
    margin-right: 1.6rem;
    width: 18rem;
  }

  .search {
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    height: auto;
  }
  .search > * {
    padding: 0;
    box-sizing: border-box; 
  }
  .search select,
  .search input {
    height: 4.5rem;
  }




}
 header.detail-header {
  padding: 2rem;
  margin-bottom: 0;
  border-top: 2px solid var(--h3-gold);
  border-bottom: 1px solid #d9d4ce;
  display: flex;
  align-items: center;
  width:100%;
}
 header.detail-header h2.title {
  flex-grow: 1;
  font-size: 2.1rem;
  font-weight: 500;
}
.detail-content,
.detail-answer,
header.detail-header {
  padding: 2rem 2rem;
  width:100%;
  box-sizing:border-box;
}
.detail-content .gold-copy {
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.detail-content .info {
  margin-bottom: 2rem;
  position: relative;
  font-size: 1.6rem;
  margin-top: -0.4em;
}
.detail-content .info dl dt {
  display: inline-block;
  line-height: 1;
  color: hsl(37, 10%, 30%);

}
.detail-content .info dl dd {
  display: inline-block;
  line-height: 1;
  color: hsl(37, 10%, 30%);
}
.info dl dd {
  margin-right: 7px;
  padding-right: 10px;
  border-right: 1px solid #d9d4ce;
}
.info dl dd:last-child {
  border-right: none;
}

.detail-content .notice-edit {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 
.detail-content .notice-edit .btn {
  background-color: transparent;
}
.detail-content .notice-edit p {
  text-align: right;
  flex: 1 1 auto;
}
.detail-content .notice-edit p .btn {
  margin-left: 0.8em;
}
.detail-answer {
  border-top: 1px solid #d9d4ce;
  background-color: #fcfbfa;
  position: relative;
  padding-left: 4rem;
}
.detail-answer::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--h5-gold);
  border-width: 0 0 1px 1px;
  margin: 0 9px 0 2px;
  vertical-align: 2px;
  position: absolute;
  left: 2rem;
  top: 3rem;
}
.btn-list-box {
  padding-top: 2rem;
  text-align: right;
  font-size: 1.7rem;
  border-top: 1px solid #d9d4ce;
  margin-bottom: 4rem;
}

.btn-list-box .btn-list {
  padding-left: 3em;
  padding-right: 3em;
  background-color: #ffffff;
  color: var(--h5-gold);
  border-radius: 0.3em;
  border: 1px solid #d9d4ce;;
}
.btn-list-box .btn-list:hover,
.detail-content .notice-edit .btn:hover {
  background-color: #fcfbfa;
}

.question-list table {
  margin-top: 0;
  margin-bottom: 4rem;
}
 
.detail-content .result {
  text-align: center;
  padding-top: 6rem;
  padding-bottom: 4rem;
}
.strong {
  font-weight: 600;
  font-size: 1.9rem;
}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
   header.detail-header h2.title {
    margin-bottom:1em;
  }
  .question-list table td {
    font-size: 1.8rem;
  }
  .question-list table {
    margin-bottom: 5%;
    table-layout: fixed;
  }
 
  .recruit-message span {
    background: none;
    padding: 0;
  }
   header.detail-header,
  .detail-content,
  .detail-answer {
    padding: 2rem 2px;
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-answer {
    padding-left: 4rem;
    padding-right: 5%;
  }
}

.small-btn-delete {
  display: inline-flex;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  width: 1.5em;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  height: 1.5em;
  font-weight: bold;
  margin-left: 0.3em;
  background-color: transparent;
  margin-top: -0.2em;
}
.small-btn-delete:hover,
.question-detail .small-btn-delete:hover {
  background-color: #ffffff !important;
}
.content-body #story.swiper-slide-active #story-slide .white-wall {
  max-width:106rem;
  width:80%;
}
@media (max-aspect-ratio: 5 / 3), (max-width: 1023px)  {
.content-body #story.swiper-slide-active #story-slide .white-wall {
  width:100%;
    max-width:100%;
}
}
ul.flex-table {
  display: flex;
  flex-direction: row;
  border-top: 2px solid var(--h3-gold);
  overflow: hidden;
  align-items: stretch;
}
ul.flex-table.direction-column {
  flex-direction: column;
  border-top: 2px solid var(--h3-gold);
  overflow: hidden;
}

ul.flex-table > li {
  flex: 1 1 auto; 
  position: relative;
  align-items: stretch;
  display: Flex;
  flex-direction: column;
  border-bottom: 1px solid #d9d4ce;
  max-width:100%;
}
ul.flex-table > li:last-child::after,
ul.flex-table.direction-column li:after { display:none;}
 
ul.flex-table.direction-column > li {
  flex-direction: row;
}
ul.flex-table > li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: #d9d4ce;
  z-index: 1;
}

.flex-table h4, #recruiting .table thead th {
  background-color: #faf9f5;
  border-bottom: #d9d4ce 1px solid;
  color: #331f00;
  font-weight: 500;
  padding: 0.5em;
  text-align: center;
  font-size: 1.6rem; 
}
.tbody-th {
  background-color: #fefefb; 
  color: #331f00;
  font-weight: 500 !important; 
  text-align: center;
  font-size: 1.6rem; 
}

ul.flex-table.direction-column > li > h4 {
  flex: 0 0 auto;
  width: 20%;
  max-width: 35rem;
  min-width: 20rem;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center; 
  border-right:1px solid #d9d4ce;
  line-height:1.6;
}
ul.flex-table > li > div {
  padding: 0.6em 1.5em;
  flex: 1 1 auto;
  line-height: 1.6; 
}
ul.flex-table > li > div > pre {
  font-family: 'Noto Sans KR';
  line-height: 1.6;
  white-space: pre-wrap; 
}
ul.flex-table > li > div:nth-last-child(2) {
  flex: 0 0 auto;
  width: 25%;
}
ul.flex-table > li > div + div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 65%;
  border-left: 1px solid hsl(33, 15%, 87%);
}
.flex-table div > ul > li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.3em;
  margin-top: 0.3em;
}
.flex-table div > ul > li:before {
  content: "-";
  font-weight: 900;
  position: absolute;
  left: 0;
  line-height: 1.6;
}
.flex-basis-100 {
  flex-basis: 100% !important;
  text-align: center;
  padding: 0.5em 0.5em 0.7em;
  border-bottom: 1px solid #d9d4ce;
  background-color: hsl(43, 10%, 99%);
  line-height: 1.6;
}

.detail-content h3 {
  margin-top: 4rem;
}
.td-center,
ul.flex-table.td-center > li > div {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-footer {
  border-top: 1px solid #d9d4ce;
  padding-top: 2rem;
  margin-bottom: 6rem;
}
#hire .detail-content {
  padding-bottom: 0;
}
#hire .detail-content h3 {
  margin-bottom: 1rem;
  margin-top: 3rem;
}
#hire[role="result"] .detail-content {
  padding-bottom: 4rem;
  width: 100%;
}
.detail-footer .right > .btn {
  margin-left: 1.4rem;
  margin-right: 0;
}
.detail-footer > .btn {
  background-color: transparent;
  margin-right: 1.6rem;
  flex: 0 0 auto;
}
.detail-footer > .right {
  flex-grow: 1;
  text-align: right;
}
.detail-footer {
  width: 100%;
  margin-bottom: 6rem;
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
}
.detail-footer p a {
  margin-left: 1.6rem;
  margin-right: 0;
}
.mobile-paging { display:None;}

@media (max-aspect-ratio: 4 / 3), (max-width: 1023px) {
  .t-direction-column {
    flex-direction: column !important;
  }
  ul.flex-table.t-direction-column > li {
    flex-direction: row;
    width: 101%;
  }
  .flex-table.t-direction-column .td-center {
    justify-content: flex-start;
  }
  ul.flex-table.t-direction-column > li > h4 {
    flex: 0 0 auto;
    width: 20%;
    max-width: 35rem;
    min-width: 20rem;
    border-bottom: none;
    border-right:1px solid #d9d4ce;
  }
}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  ul.flex-table > li > div { 
    word-break: break-all;
  }
  #esg-direction .red-tap .page-content > .box-container {
    padding-top: 0;
  }
  .m-direction-column {
    flex-direction: column !important;
  }
  ul.flex-table > li > div {
    padding: 0.6em 0.8em;
  }
  ul.flex-table.m-direction-column > li {
    flex-direction: row;
    width: 101%;
  }
  ul.flex-table.m-direction-column > li:after,
  ul.flex-table.t-direction-column > li:after {
    display:none;
  }
  ul.flex-table.direction-column > li > h4 {
    min-width: 13rem;
  }
  ul.flex-table.m-direction-column > li > h4,
  ul.flex-table.t-direction-column > li > h4 {
    flex: 0 0 auto;
    width: 20%;
    max-width: 35rem;
    min-width: 13rem;
    border-bottom: none;
    border-right: 1px solid #d9d4ce;
  }
  .flex-table.m-direction-column .td-center {
    justify-content: flex-start;
  }
  table.m-fixed-table {
    table-layout: fixed;
  }
  table.m-fixed-table td {
    word-break: break-all;
  }
  #oa > .flex-row {
    flex-direction: row;
  }
}
.btn.prev-one-paging,.btn.next-one-paging {display:none;}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .paging .paging_num a { display: none; }
   .paging { width:100%; }
  .mobile-paging {display:inline-flex; font-size:1.2em; flex-grow:2; align-items: center; justify-content: center;}
  .paging .first-pg { border-left:none !important;}
  .mobile-paging .slash { display:inline-block; color:#d5d2cc; font-size:0.9em;} 
  .mobile-paging .current { color:var(--orange-text); font-weight: bold;  }
  .mobile-paging .total { color:var(--body-brown); font-size: 0.95em; vertical-align: bottom; line-height: 1; }
  .paging .next-one-pg,.paging .prev-one-pg { display:inline-flex; border:1px solid #d9d4ce; border-radius:0.4rem; flex-grow:0;}
  .paging .btn {    background-size: auto 2rem;  }
  .btn.first-pg,.btn.prev-pg,.btn.next-pg,.btn.last-pg { display:none;} 
  .detail-footer {
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: flex-start;
  }
  
  #hire .detail-footer .btn { 
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1.6rem;
    border:None;
    padding:0;
    font-size: 1.7rem;
  }
  .detail-footer .btn-txt ,  .detail-footer .slash{
    display:none;
  }
  .detail-footer .btn-orange:hover, .detail-footer .btn-write:hover { background-color:transparent !important; border:none !important;}
  
  #hire .detail-footer .right > .btn,
  #recruiting .detail-footer .right > .btn{ 
    margin-right: 0 !important;
    margin-left: 0;
    /* border: none !important;  */
    padding: 0 2.4rem;
    position:relative
  }
  #hire .detail-footer .right > .btn:nth-of-type(2),
  #recruiting .detail-footer .right > .btn:nth-of-type(2){
    padding-left: 2.4rem;
  }
  #hire .detail-footer .right > .btn:nth-of-type(2)::after,
  #recruiting .detail-footer .right > .btn:nth-of-type(2)::after {
    content:"|";
    position:absolute;
    left:0;  
    top:50%;
    margin-top:-0.55em;
    opacity:0.5;
  }
  .detail-footer .right > .btn.btn-orange-fill {
    padding-left:2.4rem;
    padding-right:2.4rem;  
  }
  #qna #tab1 table.table col:nth-child(1),
  #qna #tab1 table.table col:nth-child(2) {
    visibility: collapse;
    width: 0px !important;
  }
  #qna #tab1 table.table td:nth-child(1),
  #qna #tab1 table.table td:nth-child(2),
  #qna #tab1 table.table td:nth-child(4),
  #qna #tab1 table.table th:nth-child(1),
  #qna #tab1 table.table th:nth-child(2),
  #qna #tab1 table.table th:nth-child(4),
  #qna #tab1 table.table col:nth-child(1),
  #qna #tab1 table.table col:nth-child(2),
  #qna #tab1 table.table col:nth-child(4) {
    visibility: collapse;
    width: 0px !important;
    overflow: hidden;
    height: 1rem;
    display: inline-block;
  }
  #qna #tab1 table.table td:nth-child(3),
  #qna #tab1 table.table th:nth-child(3) {
    width: 100% !important;
    font-size:1.8rem;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  #qna #tab1 table.table tr > * {
    border-left: none !important;
  }
  #faq #tab1 table.table tbody td:nth-child(3) {
    padding-left: 0;
  }
  ul.flex-table.td-center > li > div {
    justify-content: flex-start;
  }
  ul.flex-table.t-direction-column > li > h4,
  ul.flex-table.m-direction-column > li > h4,
  ul.flex-table.direction-column > li > h4 {
    width: 12rem;
    min-width: 12rem;
  }
}

#esg-direction {
  background-image: url(../images/sky_esg.jpg);
  background-size: cover;
}
#esg-direction .page-content {
  background-position: center;
  background-color: transparent;
}
#esg-direction .gold-copy {
  text-align: left;
  font-size: 2.1rem;
  font-weight: 500;
}
#esg-direction .red-tap .box-container .black-copy {
  margin-bottom: 5rem;
  margin-top: 2rem;
  font-size:2.1rem;
}
#esg-direction .white-box {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 1.5rem;
  border: 1px solid #e9e8e8;
  padding: 4rem;
  margin-top: 0;
}
#esg-direction .white-box ol {
  -ms-grid-columns: 1fr 6rem 1fr 6rem 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  display: -ms-flexbox;
  padding-left: 0;
}
#esg-direction .white-box ol > li {
  flex: 1 1 auto;
  padding: 4rem 2rem 0rem;
}
#esg-direction .level-1 {
  width: 26rem;
  border-radius: 10rem;
  height: auto;
  max-width: 100%;
  line-height: 1.4;
  color:#ffffff;
}
#esg-direction .level-1::before {
  height: 3.5rem;
}
#esg-direction .white-box ol > li > div {
  border-radius: 1.6rem;
  padding: 2.5rem 3rem;
  border-radius: 1.6rem;
  border: 1px solid #00c88b;
  background-color: #f5fffc;
  height: 100%; 
}
#esg-direction .white-box ol > li > div > h4 {
  color: #008f3d;
  margin-bottom: 0.8em;
  font-weight: 600;
}


#esg-direction .white-box ol > li > div > h4 > i {
  width: 10rem;
  height: 5rem;
  background: url(../images/icon_e.png) no-repeat center;
  background-size: contain;
  display: inline-block;
}
#esg-direction .white-box ol > li.s > div > h4 > i {
 
  background: url(../images/icon_s.png) no-repeat center;
 
}
 

#esg-direction .white-box ol > li.g > div > h4 > i { 
  background: url(../images/icon_g.png) no-repeat center; 
}
#esg-direction .white-box ol > li > div > ul.dash li {
  text-align: left;
  padding-left: 1em;
  position: relative;
  line-height: 1.4;
  margin-bottom: 0.3em;
}
#esg-direction .white-box ol > li > div > ul.dash li::before {
  content: " - ";
  position: absolute;
  left: 0;
}
.chinese {
  font-weight: 600;
  font-family: "malgun-gothic";
}

#esg-direction .white-box ol > li.s > div {
  border-color: hsl(25, 100%, 73%);
  background-color: hsl(25, 100%, 98%);
}
#esg-direction .white-box ol > li.s > div > h4 {
  color: #ed0039;
}
#esg-direction .white-box ol > li.s > div > h4 > i {
  background-image: url(../images/icon_s.png);
}
#esg-direction .white-box.board-box ol > li > div {
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size:auto 40%;
}
#esg-direction .white-box.board-box ol > li.g > div {
  border-color: #bfd379;
  background-color: #fdfff7;
  background-image: url(../images/esg/bg_g.png); 
}


#esg-direction .white-box.board-box ol > li.g > div > h4 {
  color: #3d39b5;
}
#esg-direction .white-box.board-box ol > li.g > div > h4 > i {
  background-image: url(../images/icon_g.png);
}
#esg-direction .gold-copy {
  text-align: center;
}

#esg-direction .white-box ol > li::after,
#esg-direction .level-2-wrapper > li::before,
#esg-direction .level-1::before {
  background-color: #d9d4ce;
}
#esg-direction .level-2-wrapper > li:nth-of-type(3)::after {
  left: auto;
}
#esg-direction .level-2-wrapper > li:nth-of-type(2) {
  border-left: none;
}
#esg-direction .level-2-wrapper > li:nth-of-type(2)::after {
  right: -3rem;
}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  #esg-direction .white-box ol {
    -ms-grid-columns: minmax(240px, 1fr);
    grid-template-columns: minmax(240px, 1fr);
    width: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -webkit-column-gap: 0rem;
    -moz-column-gap: 0rem;
    column-gap: 0rem;
    position: relative;
    padding: 0;
    display: -ms-flexbox;
  }
  #esg-direction .white-box ol > li {
    padding: 0;
  }
  #esg-direction .white-box ol > li:last-child {
    padding-bottom: 0;
  }
  #esg-direction .white-box ol > li > div > ul.dash {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  #esg-direction div.h1-wrapper {
    padding-bottom: 5rem;
    margin-bottom: 0;
  }
  #esg-direction.esg-validation div.h1-wrapper {
    padding-bottom: 5%;
    margin-bottom: 0;
  }
  #esg-direction .h1-wrapper::before {
    background-color: #d9d4ce;
  }
  #esg-direction .level-2-wrapper > li:nth-of-type(2)::after {
    display: none;
  }
  #esg-direction .white-box ol > li::after,
  #esg-direction .level-2-wrapper > li::before  {
    display: None;
  }
  #esg-direction .page-content {
    padding-top: 0;
  }
  #esg-direction .white-box ol > li > div {
    padding: 5%; height:auto;
  }
  #esg-direction .page-content {
    background-color: transparent;
  }
  #esg-direction .white-box ol {
    padding: 0;
  }
  #esg-direction .red-tap .box-container .human-box2 .black-copy {
    font-size:2.4rem !important;
  }
  #esg-direction .red-tap .box-container .human-box2  .black-copy.title {
    font-size:2.4rem !important;
    padding:0 5%;
  }

  #esg-direction .level-2-wrapper {
    font-size: 1.7rem;
  }
  
}

#esg-activity .table tbody tr td:first-child {
  border-left: none !important;
}
#esg-activity .table.last-year3 tbody tr td:nth-last-child(-n+3) {
  text-align: right;
}
#esg-activity .table.last-year3 tbody tr td:last-child, #esg-activity .table.last-year3 thead tr th:last-child {
  background-color: #fff4dc33 !important;
}
#esg-activity .table.last-year3 thead tr th:last-child {
  background-color: #ffe7b4ce !important;
}
#esg-activity .tab-header ul {
  flex-wrap: wrap;
}
#esg-activity .tab-header ul li {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  margin: 0;
}

#esg-activity .content-item > div {
  margin-top: 3rem;
  overflow: hidden;
}
#esg-activity .content-item > div.table-box {
  margin-top:2rem !important;
}
#esg-activitytable 
#esg-activity .content-item > div + table td span {
  word-break: keep-all;
}

#esg-activity .content-item > div:first-child,
#esg-activity .content-item > div:first-child > *:first-child {
  margin-top: 0;
}
#esg-activity .content-item > div > table.table {
  margin-left: -1px;
  flex-grow: 1;
  margin-top: 1em;
  margin-bottom: 0;
}
 div.table-box > table.table {
  margin-top:0 !important;
 }
#esg-activity .content-item > div table.table.m-hide {
  display:table;
}
#esg-activity  table.table {
  margin-top:2rem ; margin-bottom:0.6rem; 
}
.content-item > div > h4.gold-copy {
  text-align: left;
  font-size: 2.4rem;
  margin-left: 0;
  font-family: "Noto Sans KR";
  font-weight: 600;
}
#esg-activity .content-item > div > p + p {
  margin-top: 0.25em;
}
#esg-activity .content-item > div > h5 {
  margin-top: 1em;
}

.pale-box {
  padding: 4rem;
  background-color: hsl(37, 15%, 99%);
  border: 1px solid #eceae7;
  margin-top: 1rem;
  margin-bottom: 1rem; 
  overflow: hidden;
  font-size: 1.6rem;
}
.pale-box h5 {
  font-size: 1.8rem;
  margin-bottom: 0.2em;
  margin-top: 0; 
}
.pale-box * + h5 {
  margin-top: 3rem;
}
h5 + .pale-box,
h5 + .table-box > table.table {
  margin-top: 0 !important;
}
.table-box + .detail-footer {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.pale-box > div:first-child,
.pale-box > p:first-child {
  margin-top: 0;
  padding-top: 0;
}
.mt-0 {
  margin-top: 0 !important;
}
.pt-0 {
  padding-top:0 !important;
}
.identity_verification {
  margin-top:3rem;
}
.pale-box > p {
  margin-bottom: 0.3em;
  font-weight: 400;
  font-size: 1.7rem;
}
.pale-box > p.gold-copy {
  font-size: 1.85rem;
}
.pale-box > table.table {
  margin-bottom: 0;
  background-color: #ffffff;
  margin-top: 0;
}
.pale-box .box-body table.table {
  margin-top: 0;
  height: 100%;
  margin-bottom: 0;
}
.pale-box > ul > li {
  margin-bottom: 0.3em;
}
.pale-box > ul > li h5 {
  margin-top: 2em;
}
.pale-box > ul:first-child > li:first-child h5 {
  margin-top: 0;
}
.pale-box > ul.li-tr > li {
  margin-top: 0;
  margin-bottom: 0;
}
.pale-box > ul > li > ul {
  margin-left: 1em;
}
.pale-box > ul > li > ul > li {
  font-weight: normal;
}
.pale-box > ul > li > ul > li > ul {
  margin-left: 1em;
}
.pale-box h6 {
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 0.2em;
  margin-top: 0.8em;
}
.pale-box .double-line-box { 
  background-color:#ffffff; 
  margin-top:6rem;
  margin-bottom: 3rem !important;
}
.double-line-box {
  border: 1px solid #bfb29f;
  position: relative;
  padding: 4.5rem;
  font-size: 1.7rem;
  margin-bottom: 6rem !important;
  margin-top: -1rem;
  max-width: 1024px;
  margin: 0 auto;
}
.double-line-box.full-box {
  max-width:100%; 
}

.double-line-box::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  border: 2px solid #bfb29f;
  pointer-events: none;
}
.service-top-content-logo {
  width: 19rem;
  height: 4rem;
  background: url(../images/common/header_logo_xs.png) no-repeat left;
  background-size: 110px auto;
  color: transparent;
}
ol.list-group-numbered {
  list-style-type: auto;
  padding-left: 1.2em;
  width: 100%;
  position: relative;
  margin-top:1rem;
  margin-bottom:1rem;
}


ol.list-group-numbered li.n4::marker {
  content: "4. ";
}

ol.list-group-numbered > li {
  margin-bottom: 0.2em;
}
li .table-box {
  margin-bottom: 0;
}
.double-line-box .gold-copy {
  margin-top: 1rem;
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
}
.double-line-box .main-copy {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1.75rem;
}
.double-line-box .pale-box {
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 4rem;
  color: hsl(36, 5%, 30%);
}
.double-line-box > p {
  text-align: center;
}
.double-line-box p.logo-bg {
  height: 2.6rem;
}
.double-line-box .main-copy .inline-block {
  display: block;
}
.double-line-box .smaller {
  font-size: 1.55rem;
  opacity: 0.8;
  border-top: 1px solid #dfdcd7;
  margin-top: 2em;
  padding-top: 2rem;
}
.sign {
  font-size: 1.85rem;
  font-weight: 600;
  margin-top: 0.2em !important;
  letter-spacing: 0.2rem;
}
.flex-row-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  line-height: 1.4;
  margin-left: -1rem;
  margin-right: -1rem;
}
.flex-row-box > * {
  flex: 1 1 auto;
  margin-right: 1rem;
  margin-left: 1rem;
  width: 50%;
  display: flex;
  flex-direction: column;
}
.flex-row-box > dt {
  margin-right: 2rem;
  background-color: #b3a48f;
  color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  font-weight: 500;
  font-size: 1.8rem;
}
.flex-row-box > dd {
  border: 1px solid #ccc5bc;
  text-align: center;
  padding: 0.8em;
}
.flex-row-box > dd > p {
  font-weight: 500;
  margin-bottom: 0.3em;
  font-size: 1.8rem;
}
.flex-row-box > dd + dd {
  margin-left: 2rem;
}
.white-box {
  background-color: #ffffff;
  padding: 2rem;
  border: 1px solid #ccc5bc;
  margin-top: 4rem;
  line-height: 1.7;
}
.white-box h5 {
  text-align: center;
  font-size: 1.85rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.9rem;
  margin-top: 0;
}
.arrow-down {
  position: relative;
}
.arrow-down::before {
  content: "";
  left: 50%;
  bottom: -2rem;
  height: 2rem;
  width: 1px;
  position: absolute;
  background-color: #ccc5bc;
  z-index: 1;
}
.arrow-down::after {
  content: "";
  left: calc(50% - 0.87rem);
  bottom: -2.5rem;
  height: 0;
  width: 0;
  position: absolute;
  border-top: 1rem solid #ccc5bc;
}
.arrow-down::after {
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .double-line-box .gold-copy {
    margin-top: 8%;
    margin-bottom: 8%;
    font-size: 2.4rem;
  }
  .double-line-box {
    padding: 8%;
    margin-bottom: 5% !important;
  }
  .double-line-box .pale-box {
    padding: 4%;
  }
  .double-line-box .main-copy .inline-block {
    display: inline;
  }
}
.and {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
ul.li-tr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.7;
  align-items: stretch;
  flex: 1 1 auto;
}
ul.li-tr > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  flex: 1 1 auto;
  margin: 0.5em;
}

ul.li-tr > li > h6 {
  margin-top: 0;
  flex: 1 1 20%;
  margin-left: 0;
  color: hsl(35, 25%, 40%);
  border: 1px solid #ccc5bc;
  background-color: hsl(35, 19%, 90%);
  text-align: center;
  padding: 0.7em;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 0;
}
ul.li-tr > li > ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  flex: 0 0 80%;
  justify-content: space-between;
  align-items: stretch;
  margin-left: 0;
}
ul.li-tr > li > ul > li {
  border: 1px solid #ccc5bc;
  text-align: center;
  padding: 0.7em;
  flex: 1 1 auto;
  margin-left: 1em;
  background: hsl(37, 20%, 98%);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
ul.li-tr > li > ul.flex-wrap-50 > li:nth-of-type(-n + 2) {
  margin-bottom: 1em;
}
.flex-wrap-50 {
  flex-wrap: wrap;
}
.flex-wrap-50 li {
  flex: 0 0 calc(50% - 1em) !important;
}

.level-2-wrapper.item-3 {
  -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2rem;
}
.box-header {
  border-bottom: 1px solid #eceae7;
}
.box-header h5,
.pale-box > h5.chart-title {
  margin-top: 0;
  text-align: center;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 1.9rem;
}
.pale-box > h5.chart-title {
  margin-top: -1rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
  color: hsl(36, 5%, 30%);
}
.pale-box > h5.chart-title span {
  font-weight: 400;
  font-size: 1.6rem;
}
.box-body {
  padding: 3rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #ffffff;
  align-items: stretch;
  height: 100%;
}
.organ-safe div.h1-wrapper {
  margin: 2rem;
}
.organ-safe {
  padding-top: 5rem !important;
}
.organ-safe .level-1 {
  background: #3d437a;
  border-radius: 1rem;
  font-size: 1.8rem;
  height: 5.5rem;
  margin-bottom: 1rem;
}
.padding0 {
  padding: 0 !important;
}
.organ-safe .h2-wrapper .level-1 {
  border: 1px solid var(--orange-text);
  color: rgba(0, 0, 0, 0.9);
  background: #ffffff;
}
.organ-safe .level-1::before,
.esg-organ .level-1::before,
.organ-safe .level-2-wrapper > li::after,
.esg-organ .level-2-wrapper > li::after,
.esg-organ .level-2-wrapper > li::before,
.organ-safe .level-2-wrapper > li::before {
  background: var(--line-color);
}
.organ-safe .round-box {
  border-radius: 1rem;
  border: 1px solid #eceae7;
  margin: 0 auto;
  background-color: #ffffff;
  position: relative;
}
.organ-safe .round-box::before {
  content: "Control Tower";
  color: var(--orange-text);
  font-size: 1.6rem;
  position: absolute;
  top: -3rem;
  left: 0;
  right: 0;
  text-align: center;
}
.organ-safe .round-box ul.simple-dot {
  display: inline-flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  margin-top: 1rem;
}
.organ-safe .round-box ul.simple-dot li,
ul.simple-dot li {
  text-align: left;
}
.organ-safe .round-box:nth-child(2) {
  margin-top: 1rem;
  width: 100%;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  text-align: center;
}
.organ-safe .round-box:nth-child(2)::before {
  text-align: left;
  content: "관리 조직";
}

.organ-safe .level-1::before {
  height: 5rem;
}
.organ-safe h4 {
  background-color: #645f58;
  color: #ffffff;
  padding: 1.6rem 1rem;
  border-radius: 1rem;
  font-size: 1.8rem;
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}
.organ-safe .level-2-wrapper > li::before {
  height: 2rem;
}
.pale-box > ul.li-tr li.arrow-down {
  background-color: #ffffff;
}
.pale-box .table-box .table {
  margin-top: 0;
  margin-bottom: 0;
}

table.table + h5 {
  margin-top: 3rem;
}
@media (max-aspect-ratio: 5 / 4), (max-width: 1023px)  {
  #esg-activity .table th,
  #esg-activity .table td {
    padding: 0.6em;
    font-size:1em;
  }
  
  table.table.hide-thead.make-m *[data-level="1"] { padding:0 !important;}
  .pale-box {
    padding: 3rem;
    background-color: #ffffff;
  }
  .double-line-box .pale-box {
    background-color: hsl(37, 20%, 98%);
    border: 1px solid #eceae7;
  }
  .box-header h5,
  .pale-box > h5.chart-title {
    margin-top: 3%;
  }
  .pale-box > table.table {
    background-color: #ffffff;
  }
  .pale-box > ul.li-tr {
    padding-top: 3%;
    padding-bottom: 3%;
  }
  .pale-box ul.li-tr > li {
    margin-top: 5%;
    margin-bottom: 0;
  }
  .pale-box ul.li-tr > li:first-child {
    margin-top: 0;
  }
  .box-header {
    border-bottom: none;
  }
  .box-body {
    padding-top: 0;
    padding: 3%;
  }
  .flex-row-box {
    flex-wrap: wrap;
  }
  .flex-row-box > * {
    width: 100%;
  }
  .pale-box ul {
    padding-left: 0;
  }
  ul.li-tr > li {
    flex-direction: column;
  }
  ul.li-tr > li > ul {
    padding-left: 0;
    flex: 1 1 auto;
    margin-left: -1em;
  }
  .pale-box ul.li-tr > li > h6 {
    margin-bottom: 2%;
    padding: 0.6em;
    flex-basis: auto;
  }
  .pale-box > h5.chart-title {
    padding-bottom: 3%;
  }

  .white-box {
    padding: 4%;
  }
}
.li-tr ul li.left {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  align-items: flex-start;
  padding: 5%;
}
.left {
  text-align: left;
}
.li-tr ul li.left h6 {
  margin-bottom: 0.5em;
  display: block;
  font-weight: 500;
  font-size: 1.8rem;
}

.box-body ul.li-tr > li > h6 {
  color: hsl(35, 25%, 40%);
  border: 1px solid #ccc5bc;
  background-color: hsl(35, 19%, 90%);
  font-size: 1.7rem;
}
.left-align-all,
.left-align-all * {
  text-align: left !important;
}
.left-align-td td {
  text-align: left !important;
}

@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  #esg-activity .content-item > div {
    margin-top: 5%;
    margin-bottom: 0;
  }

  #esg-activity .content-item > div:last-child {
    margin-bottom: 0 !important;
  }

  .level-2-wrapper.item-3 {
    grid-template-columns: 1fr;
  }
  .level-2-wrapper.item-3 li {
    padding-bottom: 0;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%;
    line-height: 1.4;
  }
  .organ-safe .h1-wrapper::before {
    bottom: -15%;
  }
  .organ-safe .level-2-wrapper > li::after {
    left: 50%;
    right: 50%;
    width: 1px;
    top: -3rem;
    height: 5rem;
    background-color: #d9d4ce;
    z-index: 0;
  }
  .organ-safe .level-2-wrapper > li::before {
    display: none;
  }
  .box-body {
    padding: 0;
  }
  table.table + h5 {
    margin-top: 1rem;
  }
}

ul.flow-diagram {
  display: flex;

  flex-direction: column;
  text-align: center;
}

ul.flow-diagram li {
  position: relative;
  padding-bottom: 3rem;
  padding-right: 40%;
}
ul.flow-diagram li:last-child {
  padding-bottom: 0;
}
ul.flow-diagram li > div.diamond + div > p,
ul.flow-diagram li > div {
  background-color: #ffffff;
  color: hsl(36, 5%, 30%);
  border: 1px solid #ccc5bc;
  padding: 0.8em;
  border-radius: 1.2rem;
  z-index: 1;
  position: relative;
}

ul.flow-diagram li > div + div {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
}
ul.flow-diagram li > div.diamond + div {
  top: auto;
  height: 34.5rem;
  bottom: 7.8rem;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  padding: 0;
  padding-left: 55%;
  width: 0;
  right: auto;
  left: 30%;
  z-index: 0;
  border: 1px solid #ccc5bc;
  border-left: none;
}
.diamond-txt::after {
  content: "YES";
  color: #0000ff;
  position: absolute;
  bottom: -2rem;
  margin-left: 7rem;
  font-weight: 400;
}
.diamond-txt::before {
  content: "No";
  color: #ff0000;
  position: absolute;
  right: 0;
  top: 2rem;
  font-weight: 400;
}

ul.flow-diagram li.dark > div,
ul.flow-diagram li > div.dark p {
  background-color: #645f58 !important;
  border: none;
  color: #ffffff !important;
  min-height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.flow-diagram li.dark {
  height: 8rem;
}
ul.flow-diagram li.dark .arrow-down::after {
  bottom: -2rem;
  border-top: 1rem solid #d9d4ce !important;
}

ul.flow-diagram li.dark .arrow-down::before {
  background-color: #d9d4ce !important;
}
.arrow-right-to {
  position: relative;
}
.arrow-right-to::after {
  content: "";
  left: 60%;
  top: 1.9rem;
  height: 0;
  width: 0;
  position: absolute;
  border-right: 1rem solid #ccc5bc;
}
.arrow-right-to::after {
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
}
.arrow-right-to::after {
  right: -2rem;
}
.arrow-right-to::before {
  background-color: #d9d4ce !important;
}
ul.flow-diagram li > div.diamond {
  border: none;
  background-color: transparent;
  padding: 0;
  margin-left: -1px;
}

.diamond-bg {
  position: relative;
  height: 10rem;
  width: 10rem;
  line-height: 10rem;
  text-align: center;
  margin: 0 auto !important;
  transform: scaleX(2);
  border: none !important;
  padding: 0;
  background-color: transparent !important;
  z-index: 1;
}
.diamond-bg:before {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transform: rotateX(45deg) rotateZ(45deg);
  border: 1px solid #ccc5bc;
  margin-left: -1px;
  background-color: #ffffff;
}

.diamond-txt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0 !important;
  z-index: 1;
}

ul.flow-diagram li > div.diamond + div > p {
  left: 75%;
  position: absolute;
  right: -25%;
}
ul.flow-diagram li div.left-line {
  background-color: #b3a48f;
  border: none;
  color: #ffffff;
  z-index: 0;
}
ul.flow-diagram li div.left-line::after {
  content: "";
  height: 1px;
  position: absolute;
  right: 100%;
  width: 50%;
  background-color: #ccc5bc;
  top: 2.6rem;
}

@media (max-aspect-ratio: 3/ 5), (max-width: 1023px)  {
  .diamond-bg {
    transform: scaleX(1.6);
  }
}

ul.triangle-diagram {
  width: 41rem;
  max-width: 100%;
  height: 37rem;
  margin: 0 auto;
  position: relative;
  background: url(../images/esg/tri-arrow.png) center bottom 6.5rem no-repeat;
  background-size: 45% auto;
  margin-bottom: 2rem;
}

ul.triangle-diagram li p.circle {
  border: 1px solid #ccc5bc;
  background-color: #ffffff;
  font-size: 1.85rem;
  width: 15rem;
  height: 15rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  padding-left: 10%;
  padding-right: 10%;
  position: absolute;
  color: #331f00;
  font-weight: bold;
}
ul.triangle-diagram li.step1 p.circle,
ul.triangle-diagram li.step1 p.circle-txt {
  right: 0;
  bottom: 0;
}
ul.triangle-diagram li.step2 p.circle {
  left: 0;
  bottom: 0;
}
ul.triangle-diagram li.step3 p.circle {
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}
ul.triangle-diagram li .circle-txt {
  color: var(--orange-text);
  width: 15rem;
  position: absolute;
  font-size: 1.6rem;
  line-height: 1.4;
}

ul.triangle-diagram li.step1 p.circle-txt {
  bottom: -2rem;
  left: 0;
  text-align: center;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
ul.triangle-diagram li.step2 p.circle-txt {
  top: 10rem;
  width: 15rem;
  left: -3rem;
}
ul.triangle-diagram li.step3 p.circle-txt {
  top: 7rem;
  width: 15rem;
  right: -5rem;
  left: auto;
}
.bigger {
  font-size: 2.2rem !important;
}
.disaster-process-diagram,
.disaster-process-diagram li ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 0 !important;
}
.disaster-process-diagram {
  position: relative;
  flex-wrap: wrap;
  margin-left: -3rem !important;
  margin-right: -3rem !important;
}
.disaster-process-diagram > li::after {
  content: "";
  height: 1px;
  left: 6rem;
  bottom: 7rem;
  right: 6rem;
  border-top: 1px dotted #ccc5bc;
  position: absolute;
  z-index: 0;
}
.disaster-process-diagram li ul li > div {
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: top 1.2rem center;
  background-size: 50% auto;
  border: 1px solid #ccc5bc;
  width: 12rem;
  height: 12rem;
  border-radius: 100%;
  text-align: center;
  margin-right: 1rem;
  margin-left: 1rem;
  box-sizing: content-box;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.disaster-process-diagram li ul li div p {
  position: absolute;
  bottom: 0rem;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1.4;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0;
  font-size: 1.6rem;
}
.disaster-process-diagram li.step1 {
  padding-right: 2rem;
}
.disaster-process-diagram li.step1 ul li:nth-of-type(1) div {
  background-image: url(../images/esg/process/process_a.jpg);
}
.disaster-process-diagram li.step1 ul li:nth-of-type(2) div {
  background-image: url(../images/esg/process/process_b.jpg);
}
.disaster-process-diagram li.step1 ul li:nth-of-type(3) div {
  background-image: url(../images/esg/process/process_c.jpg);
}
.disaster-process-diagram li.step1 ul li:nth-of-type(4) div {
  background-image: url(../images/esg/process/process_d.jpg);
}
.disaster-process-diagram li.step1 ul li:nth-of-type(5) div {
  background-image: url(../images/esg/process/process_e.jpg);
}
.disaster-process-diagram li.step1 ul li:nth-of-type(6) div {
  background-image: url(../images/esg/process/process_f.jpg);
}
.disaster-process-diagram li.step2 ul li:nth-of-type(1) div {
  background-image: url(../images/esg/process/process_g.jpg);
}
.disaster-process-diagram li.step2 ul li:nth-of-type(2) div {
  background-image: url(../images/esg/process/process_h.jpg);
}
.disaster-process-diagram li.step2 ul li:nth-of-type(3) div {
  background-image: url(../images/esg/process/process_i.jpg);
}
.disaster-process-diagram li h6 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}
.disaster-process-diagram li ul {
  position: relative;
  flex-wrap: wrap;
}
.disaster-process-diagram li ul::before {
  position: absolute;
  top: -1.6rem;
  height: 2rem;
  left: 8.5rem;
  right: 7.5rem;
  border: 1px solid #ccc5bc;
  content: "";
  border-bottom: none;
}

@media (max-aspect-ratio: 2/ 3), (max-width: 1023px)  {
  ul.triangle-diagram {
    background: url(../images/esg/tri-arrow.png) center top 15rem no-repeat;
    background-size: 40%;
  }
  ul.triangle-diagram li p.circle {
    width: 13rem;
    height: 13rem;
  }

  ul.triangle-diagram li.step3 p.circle-txt {
    top: 10rem;
    width: 15rem;
    right: 1rem;
    left: auto;
    text-align: right;
  }
  ul.triangle-diagram li.step2 p.circle-txt {
    top: 10rem;
    width: 10rem;
    left: 1rem;
  }
}

ul.indust-process-diagram {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid #d8d2cc;
  margin-top: 1em;
}
ul.indust-process-diagram li {
  position: relative;
  padding-top: 2.5rem;
}
ul.indust-process-diagram li p {
  height: 100%;
  padding: 0.5em 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #dbd6d0;
  border-radius: 1.2rem;
  line-height: 1.4;
  background-color: #ffffff;
}
ul.indust-process-diagram li i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: -1rem auto 0;
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  ul.indust-process-diagram {
    flex-direction: column;
    border-top: none;
    border-left: 1px solid #d8d2cc;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  ul.indust-process-diagram li {
    padding-top: 0;
    padding-left: 10%;
  }
  ul.indust-process-diagram li i {
    left: 0;
    right: auto;
    bottom: 0;
    top: calc(50% - 1rem);
    margin-left: -1rem;
  }
}

.mt-4 {
  margin-top: 4rem !important;
}
.pale-box .table td,
.pale-box .table tbody th {
  font-size: 1.6rem;
  background-color: #ffffff;
}
.pale-box .flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: -1%;
  margin-right: -1%;
}
.pale-box .flex-row > * {
  flex: 1 1 auto;
  padding: 0;
  width: 49%;
  display: flex;
  flex-direction: column;
  padding-left: 1%;
  padding-right: 1%;
}
.table-box {
  width: 100%;
  margin-bottom: 2rem;
  margin-top: 1.6rem;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  -ms-overflow-style: -ms-autohiding-scrollbar !important;
  position: relative;
}
#privacy .page-content .list-group-numbered .simple-dash .table-box {
  width: 100%;
}
.table-box table.table {
  margin-left: -1px;
}
.table-box table.table thead {
  background-color: hsl(37, 70%, 97%);
}
.table-box h5 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0;
}
.flex-row-box li.pale-box div.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;

}
.flex-row-box li.pale-box div.table-box table.table {
  background-color: #ffffff;
}
.flex-row-box li.pale-box div.table-box h5 {
  font-weight: normal;
  font-size: 1.6rem;
  color: hsl(36, 5%, 30%);
  flex-grow: 0;
}
sup {
  vertical-align: top;
  font-size: 0.8em;
}
.pale-box .table td h6 {
  margin-bottom: 0.5em;
}
.pale-box .table th span {
  display: block;
  font-size: 1.6rem;
  margin-top: 0.3em;
}
.pale-box .table-box .table {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-aspect-ratio: 3/ 5), (max-width: 1023px)  {
  .mt-4 {
    margin-top: 4% !important;
  }
  .pale-box {
    padding: 0; 
    background-color: transparent;
    border: none;
    margin-bottom: 0;
    margin-top: 0;
  }

  .double-line-box .pale-box {
    background-color: hsl(37, 20%, 98%);
    border: 1px solid #eceae7;
  }
}
@media (max-aspect-ratio: 5/ 4), (max-width: 1023px)  {
  .pale-box > h5.chart-title {
    margin-top: 3rem;
    margin-left: 0;
    margin-right: 0;
  }
  .pale-box > ul {
    margin-bottom: 4rem !important;
  }
  .pale-box > ul:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .disaster-process-diagram li::after {
    display: none;
  }
}
h5 {
  font-size: 2rem;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: #454038;
}
h6 {
  font-size: 1.8rem;
  font-weight: 600;
  color: hsla(36, 50%, 20%, 0.8);
}
.ml-1 {
  margin-left: 1rem !important;
}
.ml-5 {
  margin-left: 5rem !important;
}
[rowspan] + td {
  border-left: none !important;
}
[rowspan] {
  border-right: 1px solid #e7e6e4;
}
td[rowspan]:last-child {
  border-right: none;
}
.sub-para {
  margin-top: 0 !important;
}
#esg-activity .content-item > div > .simple-dash li {
  margin-bottom: 0.5em;
}
ul.pic.two-pic {
  -ms-grid-columns: 1fr 1.6rem 1fr;
  grid-template-columns: repeat(2, 1fr);
}
ul.pic.two-pic li {
  flex-basis: calc(100% / 2 - 1.6rem);
  border-radius: 0.5rem;
}
table > thead > tr {
  background-color: hsl(37, 100%, 97%);
}
.pale-box.smaller-box {
  margin: 4.6rem 3rem;
  position: relative;
  margin: 4.6rem 3rem;
  position: relative;
  padding: 1rem;
  background: transparent;
  border: none;
  overflow: visible !important;
  margin-bottom: 8rem !important;
}
.pale-box.smaller-box::after {
  content: "";
  border: 1px solid #eceae7;
  border-radius: 1rem;
  position: absolute;
  top: -3rem;
  bottom: -3rem;
  left: -3rem;
  right: -3rem;
  border-radius: 1rem;
}
.pale-box.smaller-box ul.pic {
  max-height: 30rem;
  display: flex;
  margin-top: 0;
  margin-right: -1.6rem;
}
@media (max-aspect-ratio: 5/ 4), (max-width: 1023px)  {
  .pale-box ul.pic li {
    margin-bottom: 0;
  }
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .pale-box.smaller-box ul.pic {
    max-height: 50%;
    margin-bottom: 0;
    flex-direction: column;
  }
  .pale-box.smaller-box ul.pic.two-pic li {
    flex-basis: 100%;
  }
  .pale-box.smaller-box {
    margin-top: 3rem;
  }
}

.organ-safe.infosec {
  padding-top: 3% !important;
}
.organ-safe.infosec .round-box:nth-child(2)::before {
  display: none;
}
.organ-safe.infosec .round-box {
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 0;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}
.organ-safe.infosec .round-box.cyan-box {
  border: #9ff1ff 1px solid;
  background-color: #f5feff;
}
.organ-safe.infosec .h1-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.organ-safe.infosec .level-1 {
  margin-bottom: 0;
  width: 28%;
  flex: 1 1 auto;
  margin-left: 1rem;
  margin-right: 1rem;
  line-height: 1.2;
  flex-wrap: wrap;
  padding: 0;
  display: flex;
  align-items: center;
  justify-self: center;
}
.organ-safe.infosec .level-2-wrapper {
  font-size: 1.7rem;
}
.organ-safe.infosec .level-2-wrapper ul {
  margin-top: 1em;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.organ-safe.infosec .left-support::before {
  right: -2.5rem;
  width: 2.5rem;
  height: 1px;
  background-color: #3d437a;
}
.organ-safe.infosec .right-support::before {
  left: -2.5rem;
  width: 2.5rem;
  height: 1px;
  background-color: #3d437a;
}
.organ-safe.infosec .right-support span {
  margin-left: 0.5em;
}
.organ-safe.infosec .h1-wrapper::before {
  display: none;
}

.organ-safe.infosec .level-2-wrapper > li {
  padding-bottom: 0;
}

.organ-safe .level-2-wrapper > li:first-child::after {
  display: block;
}
@media (max-aspect-ratio: 5/ 4), (max-width: 1023px)  {
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .pale-box.smaller-box::after {
    top: -1rem;
    bottom: -1rem;
    left: -1rem;
    right: -1rem;
  }
  .pale-box > ul {
    margin-bottom: 5% !important;
  }

  .organ-safe.infosec .h1-wrapper {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .organ-safe.infosec .h1-wrapper h1 {
    max-width: 30rem;
    width: 100%;
  }
  .organ-safe.infosec .h1-wrapper h1:nth-of-type(2) {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
  }
  .organ-safe .level-2-wrapper > li::after {
    display: None;
  }
  .organ-safe.infosec .level-2-wrapper {
    margin-bottom: 0;
  }
  .organ-safe.infosec .level-2-wrapper ul {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  .pale-box > h5.chart-title {
    margin-top: 5%;
  }
}
.center-btn-box {
  margin: 2rem auto 3rem;
}
.center-btn-box a {
  background-color: hsla(37, 30%, 40%, 0.05);
  border: 1px solid hsla(37, 30%, 40%, 0.1);
  padding: 1rem 2rem;
  font-weight: 500;
}
.center-btn-box a:hover {
  background-color: hsla(37, 30%, 40%, 0.2);
  transition: background-color 0.5s;
}

.flex-pic,
.pale-box > .flex-pic {
  display: flex;
  flex-direction: row;

  overflow-x: auto;
  margin: -1rem !important;
}
.flex-pic > * {
  flex: 1 1 auto;
  margin: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 28rem;
}
.flex-pic > li {
  height: 28rem;
  margin: 1rem !important;
  background-position: center center;
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .flex-pic,
  .pale-box > .flex-pic {
    flex-direction: column;
  }
  .flex-pic > * {
    height: auto;
    max-height: none;
  }
  .flex-pic > li {
    padding-top: 60%;
  }
  .overflow-x-auto {
    overflow-x: auto;
    overflow-y: visible;
  }
}

table caption {
  overflow: hidden;
  position: relative;
  line-height: 1px;
  font-size: 1px;
  text-indent: -30000px;
}

table + h6 {
  margin-top: 3rem;
}
h6 + table * {
  font-size: 1.6rem !important;
}
 
.annota {
  font-size: 1.6rem;
}
#esg-activity table + .annota {
  margin-top:0.5em;
}
#esg-activity table td span { word-break: keep-all;}
.mobile-title,
.mobile-thead {
  display: none;
}
table.table.make-m td[data-level="1"] {
  width: 12%;
}
table.table col.unit {
  border-left: 1px dotted #ccc;
  border-right: 1px dotted #ccc;
  color: #888888;
  background-color: hsl(37, 70%, 99%);
  width: 80px;
  word-break: keep-all;
}
.validation table > thead > tr {
    background-color: hsl(37, 50%, 98%);
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .mobile-title,
  .mobile-thead {
    display: table-row;
  }

  .mobile-thead th {
    padding: 0.6em 0  !important;
  }  
  .mobile-title th {
    padding: 1.2em 0 0.6em !important;
  }
  table.table.make-m tr.mobile-title th {
    font-size: 1.75rem;
    font-weight: 500;
    padding-bottom: 0.5em;
  }
  .validation table.table.make-m tr.mobile-title th span:first-child{
    display: none;
  }
  table.table.hide-thead.make-m col:first-child,
  table.table.hide-thead.make-m *[data-level="1"] {
    overflow: hidden;
    width: 0!important;
    max-width: 0!important;
    padding: 0!important;
    border-width: 0!important;
    font-size: 0!important;
    min-width: 0 !important;
  }
  #esg-direction table.table.hide-thead.make-m colgroup col:first-child { width:0px;} 
  #esg-direction table.table.hide-thead.make-m *[data-level="1"] {
    display: none;
  }
  #esg-direction table.table.hide-thead.make-m td:last-child { width:65% !important;}
  table.table.hide-thead.make-m *[data-level="1"] span {
    display:None;
  }
  table.table.hide-thead thead {
    display: none;
  }
  table.table.make-m tr.mobile-title th {
    background-color: transparent;
    text-align: left;
    font-size:2rem;
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-left: 0;
    border-left: none !important;
  }
  table.table.make-m td[data-level="2"] {
    border-left: none;
  }
  table.table.make-m td[data-level="1"] {
    overflow: hidden;
    width: 0!important;
    max-width: 0!important;
    padding: 0!important;
    border-width: 0!important;
    font-size: 0!important;
    min-width: 0 !important;
  }
  table.table.make-m {
    border-top: none;
  }
  table.table.make-m td[data-level="2"] {
    font-weight: 400;
    padding-left: 6px;
    padding-right: 6px;
  }
  .mobile-thead {
    background-color: hsl(37, 60%, 94%);
    border-bottom: 1px solid #d9d4ce;
  }
  .validation .mobile-thead {
    background-color: transparent;
    border-bottom: 1px solid #d9d4ce;
    font-size:0.9em;
  }

  .mobile-title th {
    border-bottom: 1px solid hsl(37, 30%, 50%);
  }
}
.sign {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sign img {
  width:9rem;
  margin-left: 1rem;
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .sign {
    flex-direction: column;
  }
  .esg-organ .level-2-wrapper ul {
    margin-bottom: 3rem;
  }
}
@media (max-aspect-ratio: 3/ 5), (max-width: 1023px)  {
  h5 + .pale-box {
    margin-top: 0;
    padding-top: 0;
  }
  .m-left {
    text-align: left;
  }
}
.esg-organ h1 {
  padding: 1rem;
  width: 30%;
  background-color: #ffffff;
  border: 1px solid var(--orange-text);
  border-radius: 1.6rem;
  color: rgba(0, 0, 0, 0.95);
  min-width: 260px;
}
.esg-organ .level-2-wrapper h4 {
  background-color: #645f58;
  color: #ffffff;
  z-index: 2;
  padding: 0.7em;
  position: relative;
  border-radius: 1.6rem;
}
.esg-organ .h1-wrapper::before {
  bottom: -4rem;
  background: #d9d4ce;
}
.esg-organ .level-1::before {
  height: 3.5rem;
  margin-top: 1px;
}
.esg-organ .level-2-wrapper ul {
  margin-top: 1.6rem;
}

table td span {
  word-break: break-all;
}
.pale-box > p.gold-copy.m-left {
  font-size: 2rem;
  width: 100%;
  margin-bottom: 0;
}

li::marker {
  font-size: 1em;
}
.list-circle-num {
  list-style-type: auto;
  padding-left: 1em;
  color: #252525;
  padding-top: 0.2rem;
  padding-bottom: 0.6rem;
}
ol.list-circle-num > li:nth-child(1)::marker,
ol.list-circle-num > li.n1::marker {
  content: "① ";
}
ol.list-circle-num > li:nth-child(2)::marker,
ol.list-circle-num > li.n2::marker {
  content: "② ";
}
ol.list-circle-num > li:nth-child(3)::marker,
ol.list-circle-num > li.n3::marker {
  content: "③ ";
}
ol.list-circle-num > li:nth-child(4)::marker,
ol.list-circle-num > li.n4::marker {
  content: "④ ";
}
ol.list-circle-num > li:nth-child(5)::marker,
ol.list-circle-num > li.n5::marker {
  content: "⑤ ";
}
ol.list-circle-num > li:nth-child(6)::marker,
ol.list-circle-num > li.n6::marker {
  content: "⑥ ";
}
ol.list-circle-num > li:nth-child(7)::marker,
ol.list-circle-num > li.n7::marker {
  content: "⑦ ";
}
ol.list-circle-num > li:nth-child(8)::marker,
ol.list-circle-num > li.n8::marker {
  content: "⑧ ";
}
ol.list-circle-num > li:nth-child(9)::marker,
ol.list-circle-num > li.n9::marker {
  content: "⑨ ";
}
ol.list-circle-num > li:nth-child(10)::marker,
ol.list-circle-num > li.n10::marker {
  content: "⑩ ";
}
ol.list-circle-num > li:nth-child(11)::marker,
ol.list-circle-num > li.n11::marker {
  content: "⑪ ";
}
ol.list-circle-num > li:nth-child(12)::marker,
ol.list-circle-num > li.n12::marker {
  content: "⑫ ";
}
ol.list-circle-num > li:nth-child(13)::marker,
ol.list-circle-num > li.n13::marker {
  content: "⑬ ";
}
ol.list-circle-num > li:nth-child(14)::marker,
ol.list-circle-num > li.n14::marker {
  content: "⑭ ";
}

.list-group-numbered {
  list-style-type: auto;
  padding-left: 1.6em;
}
.list-group-numbered .list-ko-txt {
  padding-left: 1.6em;
  padding-top: 0rem;
  padding-bottom: 0.5rem;
  max-width: 100%;
  font-size: 1.6rem;
}
.list-ko-txt > li {
  padding-top: 0.5rem;
  margin-left: 3rem;
}

ol.list-ko-txt > li:nth-child(1)::marker,
ol.list-ko-txt > li.n1::marker {
  content: "가. ";
}
ol.list-ko-txt > li:nth-child(2)::marker,
ol.list-ko-txt > li.n2::marker {
  content: "나. ";
}
ol.list-ko-txt > li:nth-child(3)::marker,
ol.list-ko-txt > li.n3::marker {
  content: "다. ";
}
ol.list-ko-txt > li:nth-child(4)::marker,
ol.list-ko-txt > li.n4::marker {
  content: "라. ";
}
ol.list-ko-txt > li:nth-child(5)::marker,
ol.list-ko-txt > li.n5::marker {
  content: "마. ";
}
ol.list-ko-txt > li:nth-child(6)::marker,
ol.list-ko-txt > li.n6::marker {
  content: "바. ";
}
ol.list-ko-txt > li:nth-child(7)::marker,
ol.list-ko-txt > li.n7::marker {
  content: "사. ";
}
ol.list-ko-txt > li:nth-child(8)::marker,
ol.list-ko-txt > li.n8::marker {
  content: "아. ";
}
ol.list-ko-txt > li:nth-child(9)::marker,
ol.list-ko-txt > li.n9::marker {
  content: "자. ";
}
ol.list-ko-txt > li:nth-child(10)::marker,
ol.list-ko-txt > li.n10::marker {
  content: "차. ";
}
ol.list-ko-txt > li:nth-child(11)::marker,
ol.list-ko-txt > li.n11::marker {
  content: "카. ";
}
ol.list-ko-txt > li:nth-child(12)::marker,
ol.list-ko-txt > li.n12::marker {
  content: "타. ";
}
ol.list-ko-txt > li:nth-child(13)::marker,
ol.list-ko-txt > li.n13::marker {
  content: "파. ";
}
ol.list-ko-txt > li:nth-child(14)::marker,
ol.list-ko-txt > li.n14::marker {
  content: "하. ";
}
ol.list-ko-txt > li:nth-child(15)::marker,
ol.list-ko-txt > li.n14::marker {
  content: "거. ";
}

.list-law-num {
  padding-left: 2em;
  padding-top: 0rem;
  padding-bottom: 0.5rem;
  max-width: 100%;
  font-size: 1.7rem;
}
.list-law-num  > li {
  padding-top: 1rem;
  padding-bottom:1rem;
  margin-left: 1.4em;
  padding-left: 2rem;
}
ol.list-law-num  > li::marker {
  font-weight: 500;
}
ol.list-law-num  > li:nth-child(1)::marker,
ol.list-law-num  > li.n1::marker {
  content: "제 1 조";
}
ol.list-law-num  > li:nth-child(2)::marker,
ol.list-law-num  > li.n2::marker {
  content: "제 2 조";
}
ol.list-law-num  > li:nth-child(3)::marker,
ol.list-law-num  > li.n3::marker {
  content: "제 3 조";
}
ol.list-law-num  > li:nth-child(4)::marker,
ol.list-law-num  > li.n4::marker {
  content: "제 4 조";
}
ol.list-law-num  > li:nth-child(5)::marker,
ol.list-law-num  > li.n5::marker {
  content: "제 5 조";
}
ol.list-law-num  > li:nth-child(6)::marker,
ol.list-law-num  > li.n6::marker {
  content: "제 6 조";
}

#privacy h3 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
#privacy h3 {
  margin-top: 3rem;
}
#privacy li .table {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.6rem;
}
#privacy .table tr td,
#privacy .table tr th {
  font-size: 1.5rem;
  padding: 0.6em;
}
#privacy .table tr th {
  padding: 0.6em;
  font-size: 1.5rem;
}
#privacy h4 {
  margin-bottom: 0.4em;
  font-size: 1em;
  margin-top: 0.2em;
}
.dt {
  font-weight: 500;
}
#privacy td ul.simple-dash li {
  margin-bottom: 0.2em;
}
#privacy ul.simple-dash {
  margin-top: 0.3em;
}
#privacy ul.simple-dash li a {
  font-weight: 400;
}
#privacy h5 {
  font-size: 1em;
  font-weight: 500;
}
.prev-version {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-right: 0;
}
.prev-version h4 {
  text-align: right;
}
.prev-version ul {
  float: right;
  font-size:1.5rem;
}
#privacy .list-group-numbered .list-ko-txt {
  padding-left: 0;
}
.spectrum {
  text-align: center;
  border: 1px solid #d9d4ce;
  overflow: hidden;
  background-color: #ffffe4;
}
.spectrum > div {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  padding: 7rem 6rem 2rem 2rem;
  position: relative;
  margin-top: 5rem;
  margin-bottom: -5%;
}
.spectrum > div::after,
.spectrum > div > div::after,
.spectrum > div > div > div::after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #ffe9c5;
  border-radius: 100%;
  position: absolute;
  z-index: 0;
  transform: rotate(-15deg);
  transform-origin: center;
}
.spectrum > div > p {
  z-index: 1;
  font-size: 2rem;
  font-weight: 600;
  text-align: right;
  color: var(--body-brown);
  padding-right: 10rem;
}

.spectrum > div > div {
  position: relative;
  font-size: 1.7rem;
  display: inline-flex;
  flex-direction: row-reverse;
  padding: 12rem 10rem 3rem 3rem;
  border-radius: 50%;
}
.spectrum > div > div::after {
  background-color: #fcf7ef;
  z-index: 2;
}
.spectrum > div > div > ul {
  width: 25rem;
  margin-left: 5%;
  z-index: 3;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 500;
}
.spectrum > div > div > ul > li {
  margin-bottom: 0.3em;
}
.spectrum > div > div > div {
  font-weight: 600;
  display: inline-flex;
  flex-direction: column;
  padding: 5rem;
  border-radius: 50%;
  width: 36rem;
  z-index: 3;
  position: relative;
}
.spectrum > div > div > div::after {
  background-color: #ffffff;
  z-index: 3;
}
.spectrum > div > div > div > p {
  font-size: 1.85rem;
  margin-bottom: 0.3em;
}
.spectrum > div > div > div > p,
.spectrum > div > div > div > ul {
  z-index: 4;
}
.spectrum > div > div > div > ul > li {
  text-align: left;
  margin-bottom: 0.4em;
}
.spectrum > div > div > p {
  text-align: center;
}
.spectrum > div > div > ul > li span.txt {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  order: 1;
}

.spectrum > div > div > div > ul > li .txt {
  font-weight: 400;
  font-size: 1.6rem;
}

.spectrum > div > div > div > ul > li .circle {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  background-color: rgba(89, 88, 85, 0.8);
  border-radius: 100%;
  color: #ffffff;
  justify-content: center;
  margin-right: 0.2em;
}
.spectrum h5 {
  width: 90%;
  margin: 4rem auto 0;
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  #privacy .table tr td,
  #privacy .table tr th {
    padding: 0.4em;
  }
  .list-ko-txt > li {
    margin-left: 2rem;
  }
  .spectrum h5 {
    width: 90%;
    margin: 7% auto 0;
    font-size: 2rem;
    font-weight: 600;
  }
  .spectrum > div::after,
  .spectrum > div > div::after,
  .spectrum > div > div > div::after {
    transform: rotate(0deg);
    transform-origin: center;
  }
  .spectrum > div {
    flex-direction: column;
    min-width: 90%;
    padding: 0;
    padding-top: 5%;
    margin-top: 5%;
  }

  .spectrum > div > div {
    flex-direction: column;
    padding: 5%;
    align-items: center;
  }
  .spectrum > div > p {
    text-align: center;
    padding: 5% 0;
  }

  .spectrum > div > div > ul {
    margin-left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .spectrum > div > div > div > p,
  .spectrum > div > div > div > ul {
    display: inline-flex;
    flex-direction: column;
  }
  .spectrum > div > div > ul > li {
    text-align: center;
  }
  .spectrum > div > div > div {
    padding: 5%;
    padding-top: 5rem;
    width: auto;
  }
  .spectrum > div::after,
  .spectrum > div > div::after,
  .spectrum > div > div > div::after {
    right: -150%;
    left: -150%;
    bottom: -150%;
  }
}

.td-red > td,
.td-red > td *,
td.td-red {
  color: var(--orange-text);
  font-weight: 500;
}
.table.make-m tbody th {
  font-weight: 500;
}
p.logo {
  width: 100%;
  background: url(../images/ncsi_logo.png) no-repeat center center;
  background-size: 50% auto;
  padding-top: 50%;
}
.ncsi {
  background-image: url(../images/ncsi_logo.png);
}
p.logo.kcsi {
  background-image: url(../images/ksci_logo.png);
}
p.logo.kssqi {
  background-image: url(../images/ks-sqi.gif);
}

.flex-pic.item-4 {
  flex-wrap: wrap;
}
.flex-pic.item-4 li {
  width: 50%;
  margin: 0 !important;
  max-height: 40rem;
  padding-top: 30%;
  background-position: center center;
}

.pale-box .flex-pic.item-4 li {
  border: 5px solid hsl(37, 20%, 98%);
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .flex-pic.item-4 li {
    width: 100%;
    padding-top: 60%;
    border-color: #ffffff;
  }
}
ul.flex-row.esg-list {
  flex-wrap: wrap;
  padding-right: 40%;
  position: relative;
  align-items: flex-start;
}
ul.flex-row.esg-list::after {
  content: "";
  top: 0;
  right: 0;
  position: absolute;
  width: 35%;
  background: url(../images/esg/handshaking.png) no-repeat right;
  bottom: 0;
  background-size: cover;
  border-radius: 1rem;
}

ul.flex-row.esg-list > li {
  width: 50%;
  display: flex;
}
ul.flex-row.esg-list > li:nth-of-type(1),
ul.flex-row.esg-list > li:nth-of-type(2) {
  margin-bottom: 3rem;
}

ul.flex-row.esg-list li .esg-logo {
  z-index: 2;
  width: 15rem;
  height: 10rem;
  border: 1px solid #eceae7;
  overflow: hidden;
  flex: 0 0 10rem;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 1rem;
}
ul.flex-row.esg-list li .esg-logo img {
  width: 90%;
  max-width: 100%;
}
ul.flex-row.esg-list > li > div {
  margin-right: 3rem;
  z-index: 2;
  padding-left: 2rem;
}
ul.flex-row.esg-list > li > div > h6 {
  color: #39407f;
  line-height: 1.7;
  margin-bottom: 0.4em;
  font-size: 1.8rem;
}
ul.flex-row.esg-list > li > div > ul > li {
  margin-bottom: 0.3em;
}
.pale-box.border-radius-1 {
  border-radius: 1rem;
  background-color: #ffffff;
  padding: 3rem;
  margin-top: 6rem;
}
.mobile-remote {
  margin: 3rem auto 1rem;
  text-align: center;
}
#location .mobile-remote {
  margin-top: 3rem;
}

.mobile-remote .btn {
  color: hsl(37, 10%, 20%);
  background-color: hsl(37, 10%, 99%);
  border: 1px solid #d9d4ce;
  padding: 1em 3em;
  border-radius:5rem;
}
.mobile-remote .btn:hover {
  border: 1px solid hsl(37, 16%, 70%)
}
@media (max-aspect-ratio: 5/ 4), (max-width: 1023px)  {
  ul.flex-row.esg-list > li {
    width: 100%;
  }
  ul.flex-row.esg-list > li {
    margin-bottom: 5%;
  }
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  ul.flex-row.esg-list > li {
    width: 100%;
    display: flex;
    margin-bottom: 3rem;
  }
  ul.flex-row.esg-list {
    padding-right: 0;
    padding-top: 55%;
    padding-left: 0;
  }
  ul.flex-row.esg-list::after {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    height: 0;
    padding-top: 50%;
    width: 100%;
    border: 1px solid #eceae7;
  }
  ul.flex-row.esg-list li .esg-logo,
  ul.flex-row.esg-list > li > div {
    margin-right: 5%;
  }
  ul.flex-row.esg-list::before {
    content: "";
    width: 40%;
    height: 3rem;
    background: url(../images/logo/ci_kor.png);
    position: absolute;
    left: 5%;
    top: 6%;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .mt-4 {
    margin-top: 5%;
  }
  #esg-activity .content-item > div:last-child,
  #esg-activity .content-item > div:last-child > *:last-child {
    padding-bottom: 0;
  }

  .mobile-remote {
    margin: 5% auto ;
  }
  .btn-next i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.887' height='15.58' viewBox='0 0 8.887 15.58'%3E%3Cpath id='select' d='M3886.877,524.493l6.5,6.473,6.253-6.473' transform='translate(-523.079 3901.043) rotate(-90)' fill='none' stroke='%23b3afa8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
    width: 1.5em;
    height: 1em;
    background-position: center center;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (max-aspect-ratio: 3/ 5), (max-width: 1023px)  {
  ul.flex-row.esg-list li .esg-logo {
    width: 10rem;
  }
  .pale-box.border-radius-1 {
    padding: 0;
    margin-top: 5%;
  }
}

.interview {
  display: flex;
}
.interview-pic {
  flex: 1 1 auto;
  width: 30%;
}

.interview-pic .profile {
  width: 85%;
  text-align: center;
}
.interview-pic .profile h3 {
  margin-top: 0.5em;
  margin-bottom: 0;
  font-family: "Lato";
  font-size: 4rem;
  color: var(--sub-tap-bg);
}
.interview-pic .profile p {
  color: var(--body-brown);
}
.interview-pic .pic-box img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

.interview-txt {
  flex: 1 1 auto;
  width: 70%;
  margin-top: 5%;
}
.interview-txt h4 {
  font-family: "Noto Sans KR";
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 0.3em;
  text-align: left;
  color: var(--sub-tap-bg);
}
@media (max-aspect-ratio: 1/ 1), (max-width: 1023px)  {
  .interview {
    flex-direction: column;
    margin-bottom: 5%;
  }
  .interview-pic {
    width: 100%;
  }
  .pic-box {
    width:25rem;
    max-width: 40%;
  }
  .txt-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-left: 5%;
  }
  .interview-txt {
    width: 100%;
    margin-top: 0;
  }
  .interview-pic .profile {
    margin: 0 auto;
    display: flex;
    width: 100%;
  }
}
.page-content #story {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}
.page-content
  section.swiper-slide-active
  .story-swiper
  .swiper-wrapper
  .swiper-slide {
  padding-top: 27rem;
  padding-bottom: 15rem;
}
.page-content .white-wall header.page-header {
  margin-top: 0rem;
  pointer-events: none;
}
.page-content .white-wall .swiper-button-next {
  right: 3rem;
  top: auto;
  bottom: 7rem;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0;
}
.page-content .white-wall .swiper-button-prev {
  left: 3rem;
  top: auto;
  bottom: 7rem;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0;
}
.page-content #story-slide {
  top: 10rem;
}
.story-swiper .bottom-pagenation {
  bottom: 12rem;
}
.swiper-slide-active > #story-slide dl dd {
  padding-left: calc(2% + 6rem);
  padding-right: calc(2% + 6rem);
}
 
.page-content .swiper-slide-active #story-slide .main-text h2 {
  margin-top: 2rem;
}
#video header.page-header {
  pointer-events: none;
  border-bottom: none;
  max-width: 96rem;
  margin-top: 12rem;
}

#video + footer .inner .footer-box {
  padding-bottom:4rem;
}
@media (max-aspect-ratio: 5 / 3), (max-width: 1023px)  {
  .page-content .swiper-slide-active #story-slide .main-text h2 {
    margin-top: 1vh;
  }
  .swiper-slide-active #story-slide .main-text {
    margin-top:10vh !important;
  }
  #video .page-content {
    padding-top: 0%;
  }
  .white-wall .main-copy {
    text-align: center;
  }
  .story-swiper .bottom-pagenation {
    bottom: 12rem;
  }
  .page-content .white-wall .swiper-button-prev,
  .page-content .white-wall .swiper-button-next {
    bottom: 8rem;
    box-shadow: none;
    background-size: 50%;
  }
  .swiper-slide-active > #story-slide dl dd {
    padding-left: 0;
    padding-right: 0;
  }
}
.left-pic {
  float: left;
  margin-right: 3rem;
  margin-bottom: 3rem;
}
.left-pic img {
  padding: 9px;
  border: 1px solid #ddd;
  width: 240px;
  height: 153px;
  background: #fff;
}
.passBox {
  position: absolute;
  width: 45rem;
  height: 15rem;
  border-radius: 0.4rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc5bc;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2);
  z-index: 1000;
  left: calc(50% - 22.5rem);
  top: 15rem;
  display: none;
}
.passBox .box-header {
  height: 5.5rem;
  border-bottom: 1px solid #eae8e5;
  position: relative;
  flex: 1 1 auto;
}
.passBox .box-header label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.passBox .box-header .passBoxClose a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.001' height='16' viewBox='0 0 16.001 16'%3E%3Cpath id='close_16' d='M9151.688,19418.688l-7,7-1-1,7-7-7-7,1-1,7,7,7-7,1,1-7,7,7,7-1,1Z' transform='translate(-9143.688 -19409.688)' fill='%23666564'/%3E%3C/svg%3E%0A");
  width: 5.5rem;
  height: 100%;
  background-size: 1.6rem 1.6rem;
  background-position: center center;
  border-left: #f4f3f2 1px solid;
  position: absolute;
  right: 0;
  text-indent: -100px;
  overflow: hidden;
  color: transparent;
  top: 0;
  background-repeat: no-repeat;
}
.passBox .box-content {
  padding: 2.6rem;
  display: flex;
  justify-content: stretch;
  align-items: center;
  flex-direction: row;
  flex: 1 1 auto;
}
.passBox .box-content input[type="password"] {
  background: #fcfbfa;
  border: 1px solid #d9d4ce;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
  height: 4.4rem;
  margin-right: 1.6rem;
  border-radius: 0.4rem;
  padding-left: 0.6em;
  padding-right: 0.6em;
  flex: 1 1 auto;
  width: 60%;
}
.passBox .box-content button {
  border-radius: 0.4rem;
  border: 1px solid var(--orange-text);
  color: var(--orange-text);
  background-color: #fff1e5;
  width: auto;
  height: 4.4rem;
  flex: 0 1 auto;
}

input:hover,
input:focus {
  border-color: hsl(37, 20%, 70%) !important;
}

@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .passBox {
    position: absolute;
    width: 90%;
    left: 5%;
    height: 15rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.width-4em {
  width: 4em !important;
  float:left;
}
.width-6em {
  width: 35%;
  min-width: 6rem;
  float:left;
}


.flex-width-18, .application-form label.flex-width-18, 
.application-form fieldset > legend.flex-width-18 {
  width: 18rem;
  display: flex;
  height: 4.2rem;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
  font-weight: 600; 
  color:#454038;
  font-size:1.7rem;
  align-items: center;
  margin-right:0;
  float:left;
}
 
.align-center { 
  align-items: center !important;
  align-self: center !important;
}
.flex-width-10 {
  width: 10rem;
  display: flex;
  height: 4.2rem;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
}

.application-form h4 {
  font-weight: 600;
}
.application-form h5 {
  margin-top: 0;
  font-size: 1.6rem;
  margin-bottom: 0;
  font-weight: 500;
}
.application-form input {
  border: 1px solid #d9d4ce;
  border-radius: 0.4rem;
  padding-left: 1em;
  padding-right: 1em;
  margin-right: 2rem;
}
.align-start {
  align-items: flex-start;
}
.application-form h3.gold {
  line-height: 3rem;
  margin-bottom: 0;
}
.application-form .select-box {
  max-width: 20rem;
}

.radio-custom {
  position: relative;
  padding: 0 0 0 0;
  margin-bottom: 0.7rem;
  margin-top: 0;
}
.radio-custom.radio-inline {
  display: inline-flex;
  margin-left: 1.8em;
  align-items: center;
  margin-bottom: 0;
}

.form-group .radio-custom.radio-inline {
  margin-top: 0.7rem;
  padding-top: 0;
}

.radio-custom:last-child,
.radio-custom:last-of-type {
  margin-bottom: 0;
}

.radio-custom input[type="radio"] {
  opacity: 0;
  top: 50%;
  left: 3px;
  margin: -.6rem 0 0 0;
  z-index: 2;
  cursor: pointer;
}

.radio-custom input[type="radio"]:checked + label:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -.9rem;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  border-radius: 5rem;
  box-sizing: border-box;
  border: 0.6rem solid #FFFFFF;
  background: hsl(37, 68%, 50%);  
  border-radius: 5rem; 
  box-shadow: 0px 0px 1px 1px var(--line-color) inset, 0px 0px 1px 1px hsl(37, 40%, 47%),0px 0px 1px 2px hsla(37, 40%, 47%, 0.1);
}

.radio-custom input[type="radio"]:disabled {
  cursor: not-allowed;
}

.radio-custom input[type="radio"]:disabled:checked + label:after {
  color: #999;
}

.radio-custom input[type="radio"]:disabled + label {
  cursor: not-allowed;
}

.radio-custom input[type="radio"]:disabled + label:before {
  background-color: #eee;
}

.radio-custom > label {
  cursor: pointer;
  margin-bottom: 0;
  text-align: left; 
  margin-left: -1.4rem;
  color: var(--body-brown);
  padding-left: 3rem;
  position: relative;
}

.radio-custom > label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -.9rem;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  border-radius: 5rem;
  box-sizing: border-box;
  border: 1px solid hsl(35, 20%, 60%);
  background: transparent;
  z-index: 1;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); /* 구형 브라우저를 위해 사용 */
  clip-path: polygon(0 0, 0 0, 0 0); /* inset(50%) 와 동일한 표현 */
  border: 0;
}

input[type="radio"]:focus + label:before {
  outline:2px solid hsl(35, 20%, 60%);  
}

ul.write-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--h3-gold);
  margin-bottom: 2.4rem;
}
ul.write-list li {
  display: flex;
  flex-direction: row;
  border-bottom: #f1eeea solid 1px;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  flex: 1 1 auto;
}
ul.write-list li:last-child {
  border-bottom: #d9d4ce solid 1px;
}
ul.write-list li > * {
  flex: 1 1 auto;
}
ul.write-list li > h4 {
  width: 18rem;
  flex-grow: 0;
  font-size: 1.7rem;
  margin-bottom: 0.3em;
  height: 4rem;
  align-items: center;
  display: flex;
  flex-shrink: 0;
}
.btn-box {
  flex-direction: row;
  display: flex;
  justify-content: flex-end; 
  margin-top: 0;
}
 
.btn-box > * { margin-left:2rem; }
.sub-txt {
  font-size: 1.6rem;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  font-weight: 400;
}
.sub-txt b {
  font-weight: 500;
}
input[type="text"],
textarea,
input[type="password"],
.read-only-text {
  border: 1px solid #dfdcd7;
  font-size: 1.6rem;
  background-color: #fcfbfa;
  border-radius: 0.4rem;
  font-family: "Noto Sans KR";
  min-height: 4.2rem;
  display: inline-flex;
  align-items: center;
  padding-left:0.7em;
  padding-right:0.7em;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.07) inset;
  min-width: 20rem;
}
textarea {
  padding: 0.5em;
  width: 100%;
  height: 100%;
}

.inline-select-box {
  color: var(--body-brown);
  font-size: 1.5rem;
  min-height: 4.2rem;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.inline-select-box select {
  height: 4.2rem;
  min-width: 20rem;
}



#hp1,
#hp2,
#hp3 {
  min-width: 10rem !important;
  box-sizing: border-box;
  width: 20%;
  max-width: 15rem;
}
#hp3 + p {
  font-size: 1.6rem;
}
#qna .dash,
span.dash {
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-weight: bold;
}

@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  ul.write-list li {
    flex-direction: column;
    padding-top: 3%;
    padding-bottom: 3%;
  }
  ul.write-list li > h4 {
    height: auto;
  }
  input[type="text"],
  textarea,
  input[type="password"] {
    width: 100%;
    min-width: 20rem;
  }
  span.dash {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    color: #454038;
  }

}

@media (max-aspect-ratio: 2/3), (max-width: 1023px)  {
  input[type="text"],
  textarea,
  input[type="password"] {
    width: 100%;
    min-width: auto;
  }
  .btn-box {
    flex-direction: column;
    width: 100%;
    margin-right:0;
  }
  .btn-box > * {
    margin-bottom: 1.6rem;
    width: 100%; 
    margin-left: 0;
  }
}

.scroll-box {
  padding: 3rem;
  border: 1px solid #d9d4ce;;
  background-color: #fcfbfa; 
  overflow-y: auto;
  margin-top: 0.5em;
  box-shadow: 0 0 1rem 0 #faf8f5 inset;
  font-size: 1.5rem;
}
.scroll-box h4 {
  margin-bottom: 0.5em;
  font-weight: 500;
  font-size: 1.7rem;
}
.scroll-box h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: #454038;
}
.scroll-box h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: #454038;
}
.scroll-box .list-ko-txt > li {
  margin-left: 2.6rem;
}
.scroll-box .list-group-numbered .list-ko-txt {
  padding-left: 0;
}
.scroll-box li::marker {
  font-size: 1em;
}
.scroll-box .simple-dash {
  margin-top: 0.1em;
}
.scroll-box .simple-dash li {
  margin-bottom: 0;
}
.box-footer {
  padding: 3rem;
  border: 1px solid #d9d4ce;;
  border-top: none;
  background: #ffffff;
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.box-footer > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.box-footer > div:first-child {
  margin-right: 3rem;
}

@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {

  input[type="text"],
  input[type="password"],
  select,
  .search button.btn,
  .btn,
  .paging a {
    min-height: 4.5rem;
    min-width: 4.5rem;
    padding-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
  }
  .btn.small-btn-delete {
    min-width: 2.4rem;
    min-height: 2.4rem;
  }
   h3 {
    margin-bottom: 0.8em;
    margin-top: 0.8em;
  }
  .box-footer {
    flex-direction: column;
    padding: 5%;
    text-align: center;
  }
  .box-footer > div {
    margin-bottom: 0;
  }
  .box-footer > div:first-child {
    margin-bottom:0.5em;
  }
  .box-footer > div .radio-custom.radio-inline {
    margin: 0.5em 1em;
  }
  .scroll-box {
    padding: 5%;
    max-height:none;
  }
  .scroll-box h5 {
    margin-top: 2% !important;
  }
}
.story-book-banner .myeongjo {
  font-family: "Nanum Myeongjo", serif;
}
.story-book-banner {
  border: 1px solid #eae8e5;
  border-radius: 1rem;
  padding: 2rem 14rem 3rem 2.4rem;
  background: url(../images/flower.png) right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  background-color: #ffffff;
}
.story-book-banner:hover {
  cursor: pointer;
  background-color: #fff9f5;
}
.story-book-banner h4 {
  font-size: 1.9rem;
  margin-top: 0.5rem;
  color: var(--body-brown);
  line-height: 1.5 !important;
}
.story-book-banner .btn-ebook {
  color: var(--orange-text);
  background-color: #fff0e6;
  width: 9rem;
  height: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 2.4rem;
  top: calc(50% - 4.5rem);
  bottom: auto;
  border-radius: 100%;
  text-align: center;
  line-height: 1.4;
  font-weight: bold;
  font-size: 1.55rem;
  padding-top: 0.5em;
}
.story-book-banner:hover .btn-ebook {
  background-color: #ffdfc8;
}
.story-book-banner .red {
  color: var(--orange-text);
  font-weight: 500;
}
.story-book-banner .red.color-half {
  color: var(--orange-text);
  opacity: 0.6;
  font-size: 1.6rem;
}

.story-book-banner > .red {
  font-size: 1.6rem;
}
#event {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
  padding-bottom: 12rem;
  padding-top: 8rem;
  position: relative;
  background-color: #f9f9f6;
  border-top: 1px solid #e6e6e1;
  box-sizing: border-box;
}
#event .swiper-slide {
  width: 75rem;
}
#event .swiper-slide img {
  width: 94%;
  margin-left: 3%;
  margin-right: 3%;
  opacity: 0.3;
}
#event .swiper-slide p {
  display: None;
}
#event .swiper-slide.swiper-slide-active p {
  text-align: center;
  margin-top: 2rem;
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: center;
}
#event .swiper-slide.swiper-slide-active img {
  opacity: 1;
}

.upper {
  font-size: 0.6em;
  vertical-align: text-top;
  margin-top: 3px;
}
#together .main-copy {
  color: var(--body-brown);
  font-size: 1.9rem;
  font-weight: 500;
  text-align: center;
}
#together .main-copy {
  padding-left: 5%;
  padding-right: 5%;
}
#together .main-copy h3 {
  font-size: 2.8rem;
}
#together .page-content {
  border-top: 1px solid #e8ddd1;
  padding-top: 5rem;
}
.orange-circle {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  max-width: 144rem;
  margin: 5rem auto;
}
.orange-circle li {
  text-align: center;
}
.orange-circle li h4 {
  font-size: 3.4rem;
  color: var(--orange-text);
  background-color: #ffffff;
  border-radius: 100%;
  width: 16.6rem;
  height: 16.6rem;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  border: #ffead0 2rem solid;
  box-shadow: 0 0 0 1.4rem #ffd6b2;
  margin-bottom: 3.8rem;
}
.orange-circle li p {
  color: var(--body-brown);
  font-size: 1.7rem;
  font-weight: 500;
}
.orange-circle li:nth-of-type(2) {
  margin-top: 6rem;
}
 

@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  #together .page-content {
    padding-top: 8%;
  }
  .orange-circle {
    flex-direction: column;
  }
  .orange-circle li:nth-of-type(2) {
    margin-bottom: 6rem;
  }
  #event {
    padding-top: 5%;
    padding-bottom: 9rem;
  }
  #event .swiper-slide img {
    margin: 0;
    width: 100%;
  }
  #event .swiper-slide {
    width: 100%;
  }
  #event .swiper-button-prev {
    bottom: 9rem;
    top: auto;
    left: 5%;
  }
  #event .swiper-button-next {
    bottom: 9rem;
    top: auto;
    right: 5%;
  }
  .orange-circle li h4 {
    font-size: 2.7rem;
    width: 10rem;
    height: 10rem;
    border-width: 1rem;
    margin-bottom: 3rem;
    box-shadow: 0 0 0 1rem #ffd6b2;
  }
}
.small-block {
  display: inline-block;
}
@media (min-aspect-ratio: 1 / 2) {
  .small-block {
    display: block;
  }
}
@media (max-aspect-ratio: 2 / 5), (max-width: 1023px)  {
  .small-block {
    display: inline;
  }
}
.certification {
  background-color: #f9f9f6;
  border-top: 1px solid #f0f0ed;
  padding: 1rem 0 3rem;
}
.certification .box-container {
  align-items: center;
}
.certification h3 {
  text-align: center;
  font-size:2.1rem;
}
.certification .box-container > ul {
  max-width: 110rem;
  width: 100%;
}
.certification .box-container > ul > li {
  flex-direction: row;
  display: flex;
  margin-top: 4rem;
  align-items: flex-start;
}
.certification .box-container > ul > li > img {
  margin-right: 4rem;
  flex: 0 0 auto;
  width: 16rem;
  max-width: 100%;
}

.certification .box-container > ul > li h4 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.4em;
}

.certification ul.simple-dash {
  margin-top: 0.4rem;
}

@media (max-aspect-ratio: 2/3), (max-width: 1023px)  {
  .certification .box-container > ul > li {
    flex-direction: column;
  }
  .certification .box-container > ul > li:nth-of-type(2) {
    margin-top: 10%;
  }
  .certification .box-container > ul > li > img {
    margin: 0 auto;
  }
  .certification .box-container > ul > li h4 {
    margin-top: 1rem;
  }
}
.benefit-list .scroll-tap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}
.benefit-list .scroll-tap:first-child {
  margin-top: 0;
}
.benefit-list .scroll-tap a {
  border: 1px solid #e6dace;
  background: #f2ece6;
  color: var(--text-gold);
  flex: 1 1 auto;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-list .scroll-tap a:nth-of-type(2) {
  margin-left: 1.6rem;
  margin-right: 1.6rem;
}
.benefit-list .scroll-tap a.on {
  border: none;
  background: #8D7044;
  color: #ffffff;
}

.application-form h3 {
  border-bottom: 2px solid var(--h3-gold);
  padding-bottom: 1rem;
}
.photo-register {
  margin-right: 4rem;
  flex: 0 0 auto;
}
.photo-register .photo {
  position: relative;
  overflow: hidden;
}
.photo-register .photo .registered-photo-wrap {
  width: 14rem;
  padding-top: 127%;
  overflow: hidden;
  background-color: #faf8f5;
  border: 1px solid #ded7cd;
}
.photo-register .photo .registered-photo-wrap img {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}
.photo-register .photo .photo-size {
  font-size: 1.4rem;
  position: absolute;
  top: 85%;
  margin-top: -0.8em;
  left: 0;
  right: 0;
  text-align: center;
}
.btn-fill {
  color: #ffffff;
  background-color: hsla(36, 20%, 30%, 0.7);
}
.btn-fill:hover {
  background-color: var(--body-brown);
}
.btn-line {
  color: #454038;
  background-color: #ffffff;
  border: 1px solid #d5d2cc;
}
.btn-line:hover {
  background-color: #fcfbfa;
}
.photo-btn a {
  width: 100%;
  margin-top: 1rem;
  font-size: 1.4rem;
  height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
} 
.flex-16rem {
  width: 16rem;
}
.sign-serif {
  font-family: serif;
  font-weight: bold !important;
  font-size: 2rem !important;
}
.pale-box p.sign-serif { margin-top:0.7em; }
.application-form h5,
.application-form label,
.application-form fieldset > legend.gold {
  font-size: 1.6rem;
  width: auto;
  color: var(--text-gold);
  font-weight: 500;
  margin-right: 2rem;
  display:block;
}
legend.gold {float:left;}
.application-form label.width-5 {
  margin-right: 0 !important;
  flex-shrink: 0;
}

input[type="radio"] + label {
  font-size: 1.8rem !important;
  margin-right: 0;
}
.hidden { 
  color:transparent; text-indent: -10rem; overflow:hidden; width: 0; display: inline-block; height:0;
}
.width20 {
  width: 20rem;
}
.application-form .flex-row {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #eae8e5;
}
.application-form > .flex-row {
  align-items: flex-start;
}
.application-form .flex-row.single-line ul.flex-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
}
.application-form .flex-row.single-line ul.flex-column li {
  align-items: center;
  display: flex;
}
.application-form .flex-row.single-line ul.flex-column li.flex-row:first-child {
  padding-top:0;
}
.application-form .flex-row.single-line ul.flex-column li.flex-row:last-child {
  padding-bottom:0;
  border-bottom:none;
}

.application-form .flex-row.single-line ul li div {
  flex-direction: row;
  display: flex;
  align-items: center;
}

div.flex-grow-1 > input {
  flex-grow: 1;
  max-width: none !important;
}
.application-form .flex-row > .flex-column > .flex-row:first-child {
  padding-top: 0;
}
.application-form .flex-row > .flex-column > .flex-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.application-form input[type="text"].width10 {
  max-width: 10rem;
  min-width: auto;
}
.application-form input[type="text"] {
  max-width: 20rem; 
  height: 4.5rem;
  flex: 1 1 auto;
  min-width: auto;
  width: 100%;
  min-height: 4.5rem;
  margin-right: 2rem;
}

.application-form input[type="text"]:read-only, input[type="text"].darker {
  background-color: #edeceb;
}
.mr-1 {
  margin-right: 1rem;
}
.mr-2 {
  margin-right: 2rem;
}
.ml-3 {
  margin-left: 3rem;
}
.mr-3 {
  margin-right: 3rem;
}
.mr-4 {
  margin-right: 4rem;
}
.mr-6 {
  margin-right: 6rem;
}
.ml-minus-2 {
  margin-left: -1rem;
}
.ml-minus-1 {
  margin-left: -1rem;
  margin-right: 1rem;
}
.radio-custom.radio-inline {
  margin-left: 0;
  margin-right: 2rem;
}
.ml-4 {
  margin-left: 4rem;
}
.flex-width-60 {
  width: 60rem;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.flex-width-12 {
  max-width: 12rem !important;
  min-width: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}
.flex-width-auto {
  flex: 1 1 auto !important;
  min-width: auto !important;
  max-width: none !important;
}

.flex-width-5em {
  flex: 1 1 auto !important;
  min-width: 5em !important;
  max-width: 5em !important;
}
.flex-center {
  display: flex;
  align-items: center;
}

.fix-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  padding-top: 2rem;
  margin-top: 0rem;
  border-top: 2px solid var(--h3-gold);
  border-bottom: 1px solid #d9d4ce;
  width:100%;
}
.fix-head .title {
  color: rgba(0, 0, 0, 0.95);
  font-weight: 500;
  font-size: 2.4rem;
}
h3.gold {
  margin-top: 3rem;
  font-size: 2.1rem;
}
.top-fix-submit {
  flex-direction: row;
  display: flex;
}
.width-5 {
  width: 5em !important;
  float:left;
}
legend.width-5.gold { margin-right:0 !important;}
.width-8 {
  width: 8rem;
  max-width: 8rem;
}
.width-10 {
  width: 10rem !important;
}
.width-20 {
  max-width: 20rem;
}
#career .width-8 {
  max-width: 8rem;
}
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.input-group > input[type="text"] {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-right: 0;
  border-radius: 0.4rem 0 0 0.4rem;
}

.input-group > input[type="text"]:focus {
  z-index: 5;
}

.input-group .btn {
  position: relative;
  z-index: 2;
  border-radius: 0 0.4rem 0.4rem 0;
  margin-left: -1px;
}

.input-group .btn:focus {
  z-index: 5;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.btn-search {
  background-color: #fdfefd;
  border: 1px solid #dfdcd7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath id='search' d='M16.467,18h0l-5.146-5.134v-.813l-.278-.288a6.7,6.7,0,1,1,.721-.721l.288.278h.813L18,16.467,16.468,18ZM6.689,2.058a4.631,4.631,0,1,0,4.631,4.631A4.637,4.637,0,0,0,6.689,2.058Z' transform='translate(0 0)' fill='%23331f00'/%3E%3C/svg%3E%0A");
  background-size: 1.8rem 1.8rem;
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-position: center center;
  width:3rem;
  overflow:hidden;
  text-indent:-15rem;
  height: 4.5rem;
}
.btn-search:hover,
.btn-search:focus {
  background-color: #fcfbfa;
  border: 1px solid #c1b9ae;
  box-shadow:0 0 2px 1px var(--h3-gold);
}
.application-form {
  margin-bottom: 9rem;
}
.application-form .radio-custom {
  height: 4.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.application-form .radio-custom.radio-inline {
  display: inline-flex;
}
.flex-grow-1 {
  flex: 1 1 auto !important;
  max-width: auto !important;
  max-width: none !important;
}
.flex-grow-1 > input {
  width: 100%;
  max-width: none !important;
}

input[type="text"].flex-grow-1 {
  margin-right: 0;
}
.ml-2 {
  margin-left: 2rem;
}
.read-only-text {
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.application-form .radio-custom > label {
  color: var(--body-brown) !important;
}
.application-form #route .radio-custom > label {
  width: 18rem;
  min-height: 4.2rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.application-form #route .flex-row {
  padding-bottom: 0;
  border-bottom: none;
}

.application-form .flex-table ul.flex-row li {
  flex: 0 0 auto;
  text-align: center;
  width: 22rem;
  padding: 1em;
  border-right: 1px solid #f2f0ec;
  align-self: stretch;
  position: relative;
}
.input-box {
  position: relative;
}
.input-box > input {
  padding-right: 3rem;
}
.ui-datepicker-trigger {
  position: absolute;
  right: 2rem;
  top: 50%;
  margin-top: -1rem;
  height: 2rem;
  width: auto;
}
.application-form .flex-table ul.flex-row li:last-child {
  border-right: none;
}
.application-form .flex-table .flex-row {
  padding: 0;
}

.application-form .flex-table ul.flex-row li input[type="text"] {
  width: 100%;
  min-width: auto !important;
}
.application-form .flex-table ul.flex-row li input[type="text"],
.application-form .flex-table ul.flex-row li .select-box {
  margin-right: 0;
  width: 100%;
}
.application-form .flex-table ul.flex-row li > span {
  line-height: 4.2rem;
}
.application-form .flex-table ul.flex-row li input + span {
  margin-left: 0.4rem;
  margin-right: 1rem;
}
#education.flex-table ul.flex-row li:nth-of-type(1) {
  width: 10rem;
  flex-grow: 0;
}
#education.flex-table ul.flex-row li:nth-of-type(4) {
  width: 30rem;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
#education
  ul.flex-row
  li:nth-of-type(4)
  .application-form
  .flex-table
  .flex-row.flex-table-header {
  padding: 0;
  text-align: center;
}
.application-form .flex-table ul.flex-row.flex-table-header li {
  line-height: 1.8;
  padding: 0.5em;
  background-color: #fcfaf5;
  color: #331f00;
  font-size: 1.6rem;
  font-weight: 500;
}
.application-form .flex-table .flex-table-header li:last-child {
  border-right: none;
}

.flex-table > ul.flex-row > li {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

.application-form #career ul.flex-row li:nth-of-type(1),
.application-form #career ul.flex-row li:nth-of-type(2) {
  flex-grow: 1;
  min-width: 20rem;
}
.application-form #career.flex-table ul.flex-row li {
  width: 18rem;
}
.application-form .btn-white {
  height: 4.5rem;
}

.ico-trash {
  height: 4.2rem;
  padding: 0;
  width: 4.2rem;
}
.ico-trash i,
i.ico-trash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.222' height='16' viewBox='0 0 14.222 16'%3E%3Cpath id='delete_ico' d='M162.667-824a1.712,1.712,0,0,1-1.256-.522,1.712,1.712,0,0,1-.522-1.256v-11.556H160v-1.778h4.444V-840h5.333v.889h4.444v1.778h-.889v11.556a1.712,1.712,0,0,1-.522,1.256,1.712,1.712,0,0,1-1.256.522Zm1.778-3.556h1.778v-8h-1.778Zm3.556,0h1.778v-8H168Z' transform='translate(-160 840)' fill='%2371634d'/%3E%3C/svg%3E%0A");
  background-size: 0.8em auto;
  background-repeat: no-repeat;
  background-position: left center;
  width: 3rem;
  height: 4.2rem;
  display: inline-block;
}
.ico-trash i {
  background-position-x: center;
}
.btn-white.ico-trash {
  margin-left: 0;
  margin-right: 0;
}
i.ico-trash {
  width: 0.8em;
  margin-right: 0.4em;
}
.ico-trash span {
  display: None;
}
.ico-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath id='ico_add' d='M206.857-750.857H200v-2.286h6.857V-760h2.286v6.857H216v2.286h-6.857V-744h-2.286Z' transform='translate(-200 760)' fill='%23ED6E00'/%3E%3C/svg%3E%0A");
  background-size: 1.4rem auto;
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  width: 2.2rem;
  height: 4.2rem;
}
.ico-upload {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17'%3E%3Cpath id='upload' d='M9,16h6V10h4L12,3,5,10H9ZM5,18H19v2H5Z' transform='translate(-5 -3)' fill='%23ED6E00'/%3E%3C/svg%3E%0A");
  background-size: 0.9em auto;
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  width: 3rem;
  height: 4.2rem;
} 
.application-form .single-line.flex-row li.flex-row li.flex-row:last-child { border-bottom:none; }
.single-line.flex-row > div > div,
.single-line.flex-row > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-end {
  justify-content: flex-end;
  align-items: flex-end;
  align-self: flex-end;
}
.flex-end > *:last-child {
  margin-right: 0;
}

#certified > .flex-row > li:nth-of-type(1) {
  max-width: none !important;
  flex-grow: 1.5;
}
#certified > .flex-row > li:nth-of-type(1) input[type="text"] {
  max-width: none;
}
#certified > .flex-row > li:nth-of-type(4) {
  max-width: none !important;
  flex-grow: 1;
}
#certified > .flex-row > li:nth-of-type(4) input[type="text"] {
  max-width: none !important;
}
.tip {
  font-size: 1.6rem;
  opacity: 0.8;
}
/* #oa { padding-top:2rem;} */
#oa ul.flex-row > li {
  flex: 1 1 auto;
  width: 25%;
  flex-direction: column;
}
#oa ul.flex-row > li label {
  color:#331f00;
}
#oa ul.flex-row > li > div {
  padding: 1em;
  border-radius: 0.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15%;
}
#oa ul.flex-row > li > div.input-box {
  background-color:transparent;
  border-color:transparent;
  box-shadow: none;
}
.application-form .pale-box {
  text-align: center;
  padding: 2rem 5%;
  margin-top: 3rem;
  margin-bottom: 0;
  border-radius: 0.5rem;
}
.application-form .pale-box p.gold {
  display: block;
  font-weight: 400;
}
.application-form .pale-box p img {
  margin: 2rem auto 0;
  width: 22rem;
}
.break-all {
  word-break: break-all;
}
.self-introduce h4 {
  margin-top: 1em;
  margin-bottom: 0.4em;
}
.btn-txt {
  border: none;
  background-color: transparent;
  font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
  align-self: center;
  color: var(--body-brown);
}
.btn-txt:hover {
  cursor: pointer;
}
.slash {
  color: #ccc5bc;
  margin: 0 1.4rem;
  align-self: center;
}
div.application-form .detail-footer {
  margin-bottom: 0;
}
.detail-footer .right {
  text-align: right;
  flex: 1 1 auto;
}
.radio-detail {
  display: none;
}

.radio-custom input[type="radio"]:checked + label + .radio-detail {
  display: flex;
  align-items: center;
}


.flex-row-always {
  flex-direction: row;
  display: flex;
  align-items: center;
}
 
#birthDate {
  max-width: 25rem !important;
}
#birthSex {
  max-width: 4em !important;
  text-align: center;
  margin-right: 0.5rem;
  padding: 0;
}
#birthSex + span {
  letter-spacing: 0.5rem;
  margin-left: 0.5rem;
  padding-top: 0.7rem;
}
.mobile-label {
  display: none !important;
}
.width100-3-5 {
  margin-left: 5rem;
}

div.application-form textarea {
  background-color: #ffffff;
}
.d-column-4-3,.d-column-1-1 {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-right: 4rem; }
.application-form .flex-table#oa input#rating { 
  margin-left:1em; margin-right:1em; 
}
@media (max-aspect-ratio: 4 / 3), (max-width: 1023px) {
  .d-column-4-3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
  }
  .d-column-4-3 > label, .d-column-4-3 > label.gold{
    color: rgba(92, 80, 61, 0.7);
  }
  .d-column-4-3 > div {
    flex: 1 1 auto;
  } 


  #career .width-8 {
    max-width: none !important;
  }
  .ico-trash {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 5rem;
  }
  .ico-trash span {
    display: inline-block;
  }
 
  .application-form .flex-table#oa {
    padding-top: 2rem;
  }
  .application-form .flex-table#oa input[type="text"] { background-color:#ffffff; max-width:10rem !important;  }

  .flex-table {
    flex-wrap: wrap;
    flex-direction: row;
  }
  div.application-form > div.flex-row > div.flex-column > div.flex-row {
    flex-direction: column;
    align-items: flex-start;
  }
  div.application-form > div.flex-row > div.flex-column > div.flex-row > * {
    width: 100%;
  }
  .application-form #route .radio-custom {
    height: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  .application-form .flex-table {
    margin-right: -5%;
    width: auto;
    margin-top:1rem; 
  }
  .application-form .flex-table ul.flex-row {
    flex-direction: column;
    width: 33%;
    border-bottom: none;
    padding-right: 5%;
  }
  .application-form .flex-table#certified ul.flex-row {
    flex-direction: row;
    width: 100%;
    border-bottom: none;
    padding-right: 5%;
    flex-wrap: wrap;
  }
  .application-form .flex-table#certified ul.flex-row > li {
    flex-grow: 0 !important;
    flex-wrap: wrap;
  }
  .application-form .flex-table#certified ul.flex-row > li > input {
    flex-grow: 1 !important;
    margin-right: 1rem;
    width: 100%;
  }
 

  .application-form .flex-table ul.flex-row li {
    width: 100% !important;
    border-right: none;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }
  .application-form .flex-table ul.flex-row li input[type="text"],
  .application-form .select-box {
    max-width: 100%;
  }
  .application-form #certified.flex-table ul.flex-row {
    width: 100%;
  }

  .application-form #certified.flex-table ul.flex-row li:nth-of-type(2) {
    width: 50% !important;
    padding-right: 2rem;
  }
  .application-form #certified.flex-table ul.flex-row li:nth-of-type(3) {
    width: 50% !important;
  }
  .application-form #certified.flex-table ul.flex-row li:nth-of-type(4) {
    max-width: 40rem;
    margin-right: 0;
    width: 33% !important;
    flex: 1 1 auto !important;
  }
  .flex-row-always > label.width-5 {
    margin-right: 0 !important;
    flex-shrink: 0;
  }
  #education.flex-table ul.flex-row li:nth-of-type(1) {
    font-weight: 600;
    font-size: 1.85rem;
    padding-top: 1em;
    padding-bottom: 0.5em;
  }
  .radio-custom.width-20 {
    width: 100% !important;
  }
  .flex-table-header {
    display: none;
  }
  #education.flex-table ul.flex-row li:nth-of-type(1) {
    width: 100%;
  }
  #education.flex-table ul.flex-row li:nth-of-type(4) {
    justify-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .mobile-label {
    display: block !important;
    width: 100%;
    text-align: left;
    font-size: 1.6rem !important;
    margin-bottom: 0.2rem;
  }
  .application-form label {
    font-size: 1.6rem !important;
  }
  .application-form label.hidden {
    text-indent: 0;
    padding-left: 0;
    margin-bottom: 0;
  }
  .mobile-label + .flex-row-always,
  label + .flex-row-always {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
  }
  #oa > ul > li {
    flex-direction: column;
    display: flex;
  }
  #oa > ul > li > div, #oa ul.flex-row > li > div.input-box {
    border: 1px solid #dfdcd7;
    outline: none;
    font-size: 1.6rem;
    background-color: #fcfbfa;
    height: 7rem;
  }
 
  .application-form #oa.flex-table ul.flex-row {
    width: 100%;
  }
}
.max-width-25 {
  max-width: 25rem !important;
}

@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .fix-head {
    margin-top: 5%;
  }
  .align-center {align-self: flex-start !important; }
  .flex-row-always {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .application-form h3.gold {
    font-size: 2rem;
    font-weight: 600;
  }
  .application-form h4, .application-form fieldset > legend.flex-width-18 {
    font-size: 1.8rem;
  }
  .application-form .flex-table ul.flex-row li .flex-row-always input + span {
    margin-left: 0;
  }
  .application-form .flex-row {
    flex-wrap: wrap;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .application-form .flex-row > .flex-row-always:last-child {
    margin-bottom: 0;
  }
  .application-form .flex-table ul.flex-row {
    flex-direction: column;
    width: 100%;
    min-width: 30rem;
    padding-right: 5%;
  }
  .application-form #oa.flex-table ul.flex-row {
    width: 100%;
  }
  .flex-row-always {
    flex-direction: row !important;
    display: flex !important;
    align-items: center !important;
    width: 100%;
  }
  .flex-row-always .ml-minus-1 {
    margin-left: -1rem !important;
    margin-right: 1rem !important;
  }

  .flex-row-always > * {
    margin-right: 1em !important;
  }
  .flex-row-always > span {
    margin-right: 2em !important;
  }
  .flex-row-always > *:last-child {
    margin-right: 0 !important;
  }
  .photo-register {
    margin-bottom: 5%;
  }

  .application-form {
    padding-left: 5%;
    padding-right: 5%;
  }
  .application-form h5 {
    font-size: 1.7rem;
    margin-top: 5px;
  }
  .application-form .select-box {
    width: 100%;
    margin-bottom: 0;
  }
  .application-form > .flex-row > .flex-column > .flex-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .application-form > .flex-row > .flex-column > .flex-row > div.mr-3 {
    margin-right: 0;
  }
  .application-form > .flex-row > .flex-column > .flex-row > div {
    width: 100%;
    margin-bottom: 1.6rem;
  }
  .application-form > .flex-row > .flex-column > .flex-row > div:last-child {
    margin-bottom: 0;
  }
  .application-form #route .radio-custom {
    height: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
  .flex-width-12 {
    max-width: 20rem !important;
  }
  .application-form .flex-row-always .radio-custom {
    width: auto;
    margin-right: 4rem !important;
  }

  .application-form
    > .flex-row
    > .flex-column
    > .flex-row
    > .flex-column
    > .flex-row {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    padding-bottom: 0;
  }
  div.application-form div.flex-row > input[type="text"] {
    width: 100%;
    max-width: none !important;
    margin-bottom: 0rem;
  } 
  .radio-custom input[type="radio"]:checked + label + .radio-detail {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 3.8rem;
  }
  .radio-detail > h5 {
    margin-top: 0.5rem;
    margin-bottom: 0.2em;
  }
  .radio-detail > * {
    margin-bottom: 1rem;
  }

  .application-form .flex-width-18,
  .application-form .flex-width-48 {
    width: 100% !important;
  }
  .application-form .flex-width-48.mr-3 {
    margin-right: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .application-form input {
    margin-right: 0;
 
  }
  .application-form input[type="text"] {
    margin-right: 0;
    max-width: 100%;
  }
  .application-form input + .ml-minus-1 {
    margin-left: 0em;
  }

  .flex-row-always .ml-minus-1 {
    margin-left: -1rem;
  }

  .flex-row-always.mr-0-1-1 {
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-top: 0rem;
  }
  .single-line.flex-row > div {
    flex-direction: column; 
    min-width: 30rem;
  }
  .single-line.flex-row > div {
    flex-direction: column;
    margin-right: 0;
  }
  .single-line.flex-row > div .select-box {
    margin-right: 0;
  }
  .single-line.flex-row > div {
    width: 100%;
    margin-right: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .single-line.flex-row.fix-num > div {
    width: 100%;
  }
  .single-line.flex-row > div > div {
    padding-top: 1em;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
  }
  .single-line.flex-row > div > div:first-child {
    padding-top: 0em;
  }

  .single-line.flex-row div .btn-white {
    margin-left: 0;
    width: 100%;
  }

  #certified > ul.flex-row {
    padding-top: 2rem;
  }
  #certified > ul.flex-row > li {
    flex-grow: 0 !important;
  }

  .application-form .flex-row.single-line ul.flex-column li.flex-row > div { width: 100%; padding-top: 1em; margin-right: 0; flex-direction: column; align-items: flex-start; }
    .application-form .flex-row.single-line ul.flex-column li.flex-row > div > label { }
    .application-form .flex-row.single-line ul.flex-column li.flex-row > div > div.select-box { margin-right:0;}
}
@media (max-aspect-ratio: 2/3), (max-width: 1023px)  {
  .application-form .btn-white,
  .application-form .btn, .application-form .btn-orange {
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1); 
    height: 6rem;
  }
  .application-form .btn-cancel { display:none; }
  .inline-select-box select,
  .application-form input[type="text"],
  .application-form .select-box,
  .application-form .read-only-text {
    height: 6rem;
  }

  .flex-row-always > * {
    margin-right: 1.2rem !important;
  }
  .single-line.flex-row {
    width: 100%;
    padding-right: 0;
  }
  .application-form .flex-row .flex-width-18 + div {
    width: 100%;
  }
  .d-column-4-3 {
    margin-bottom: 1rem;
  }
  .mr-0-1-1 {
    margin-right: 0 !important;
  }
  .flex-row-always.mr-0-1-1 {
    margin-bottom: 2rem;
  }
  .application-form input {
    max-width: none !important;
  }

  input.width-8 {
    max-width: 12rem !important;
  }
  .flex-wrap-3-5 {
    flex-wrap: wrap;
  }
  .width100-3-5 {
    width: 100%;
    margin-left: 0;
  }
  .application-form .flex-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .application-form .select-box {
    width: 100%;
    max-width: none !important;
  }
  .flex-row-always {
    flex-direction: row !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  .flex-row-always .ml-minus-1 {
    margin-left: 0rem !important;
    margin-right: 1rem !important;
  }
  .application-form .flex-table ul.flex-row {
    flex-direction: column;
    width: 100%;
    min-width: 30rem;
  }

  .flex-row-always > * {
    margin-right: 2rem;
  }
  .flex-row-always > *:last-child {
    margin-right: 0 !important;
  }

  .application-form .flex-row > .flex-column > .flex-row:first-child {
    margin-top: 1rem;
  }
  .photo-register {
    flex-direction: row;
    display: flex;
    width: 100%;
    align-items: flex-end;
  }
  .photo-btn {
    width: 14rem;
    flex: 1 1 auto;
    margin-left: 5%;
  }
  .photo-btn a {
    margin-top: 5%;
    height: 5.5rem;
  }
  .application-form input[type="text"] {
    max-width: 100%;
  }
  .application-form input.flex-width-5em {
    max-width: 8em !important;
  }
  .application-form #career.flex-table ul.flex-row li:last-child {
    border-bottom: 1px solid #eae8e5;
  }
}
 
#certificate .detail-footer {
  margin-top: 0;
  border-top: none;
}
#certificate #certificate_email {
  max-width: 50rem;
}
#certificate .flex-width-60,
#certificate .flex-width-60 .flex-row-always {
  width: 100%;
  min-height:4rem;
}

.scroll-box .list-group-numbered > li p {
  font-size: 0.9em;
}
.right-btn {
  text-align: right;
  margin-bottom: 4rem;
  margin-top: -2rem;
}
span.right-btn { 
  margin-top: -1rem;
  flex-grow: 1;
  margin-bottom:0;
}

.line-btn {
  border: 1px solid hsl(35, 20%, 60%);
  color: hsl(36, 50%, 30%);
  background-color: transparent;
}
.line-btn:hover {
  color: hsl(36, 50%, 20%);
  background-color: hsla(35, 50%, 70%, 0.1);
  border: 1px solid hsl(35, 20%, 50%); 
}

.not-robot > .flex-column {
  margin-left: 1.6rem;
}
.write-list li div.flex-column > * {
  margin-bottom: 1.6rem;
}

.not-robot > .flex-column > .flex-row > * {
  margin-right: 2rem;
}

.tip {
  margin-top: 0.5rem;
  font-size: 0.9em;
  color: var(--orange-text);
}
.ml-0 {
  margin-left: 0 !important;
}
.mt-2 {
  margin-top: 2rem;
}

input.error {
  border: 1px dashed red;
}
label.error {
  margin-left: -20rem;
  display: inline;
  color: red;
}
#captcha {
  width: 23rem;
  height: 8rem;
  border: 3px dotted #a3c552;
  text-align: center;
  padding: 0.5rem;
}
#captcha img {
  width:auto; 
  height:100%;
  margin-left:auto;
  margin-right:auto;

}
.ui-widget {
  font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
}
.ui-widget-content {
  border: 2px solid var(--h3-gold);
}
.ui-datepicker {
  padding: 0;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.4rem;
}
.ui-datepicker .ui-datepicker-header {
  background-color: #fcf5e3;
  border: none;
  padding: 0.6em;
  border-radius: 0;
}
.ui-widget select {
  width: 100%;
  font-family: "Noto Sans KR";
  padding-left: 1em;
  height: 4.5rem;
}
.ui-datepicker table {
  margin-bottom: 0;
  font-size: 1.5rem;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background-color: #ffffff;
  border-color: #E6E0D6;
  color: #331F00;
  font-size:1.7rem; 
}
.ui-state-default:hover { 
  background-color: #ffffff;
  font-weight: 500;
  cursor: pointer;
}
section.popup {
  max-width: 768px;
  width: 90%;
  margin: 0 auto;
}
section.popup h3 {
  border-bottom: 2px solid #99773D;
  padding-bottom: 0.8rem;
  margin-bottom: 0;
}
input#file-upload-button,
#uploadFile1 {
  font-family: "Noto Sans KR", sans-serif !important;
}
section.popup .flex-row {
  height: 8rem;
}
section.popup .flex-row > h4 {
  padding-left: 0.3rem;
  height: 100%;
}
section.popup .btn-box {
  border-top: 1px solid #e7e5e1;
}

section.popup .btn-orange {
  margin-right: 0;
}

@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .not-robot .flex-column .flex-row {
    flex-wrap: wrap;
  }
  #captchaInput { margin-bottom:1.6rem;}
  #captchaInput + button { margin-right:1.6rem;}
  .flex-row.not-robot {
    flex-direction: column;
  }
  .flex-row.not-robot .image {
    margin-bottom:5%;
    margin-top:5%;
  }
  .not-robot > .flex-column > .flex-row > * { margin-right:0;}
  .not-robot > .flex-column { margin-left:0;}
}
.prev-version { position:relative; margin-left:auto;}
.prev-version div.select { width:30rem; top:0; bottom:auto; height:6rem;}
.prev-version div.select.active .text { border-top:1px solid #f1f1f1; border-top-left-radius: 0; border-top-right-radius: 0;}

.prev-version div.select.active .option-list {
  max-height:30rem; overflow-y:auto; background-color:hsl(37, 30%, 99% )
} 
.btn-orange, .btn-write {
  color: var(--orange-text) !important;
  border: 1px solid rgba(237, 110, 0, 0.5) !important;
  border-radius: 0.4rem;
  background-color: #ffffff !important;
  display:inline-flex;
  align-items: center;
  justify-content: center;
  min-height:4.5rem;
  padding-left:2rem;
  padding-right:2rem;
} 
.btn-orange:hover, .btn-write:hover {
  background-color: #fff5e5 !important;
  border: 1px solid #EB6D00 !important;
  color: #e54d00 !important;
} 
.btn-orange-fill {
  border: 1px solid var(--orange-text) !important; 
  border-radius: 0.4rem;
  color: #ffffff !important;
  background-color: var(--orange-text) !important;
  padding-left:5rem; 
  padding-right:5rem; 
} 
.btn-orange-fill:hover {
  background-color: #CC4B00 !important;
  color: #ffffff !important;
  border:1px solid #CC4B00 !important;
  box-shadow:0 0 10px 2px #e5540055;
}
.btn-orange-fill.disable-btn {
  background-color: hsl(37, 15%, 90%) !important;
  color: hsl(37, 10%, 40%) !important; 
  border: hsl(37, 10%, 70%) 1px solid !important;
}
.input-label-box label, .radio-detail div label  {
  color:rgba(92, 80, 61, 0.8);
  font-size:1.5rem;
}
.input-label-box + span {
  margin-top:2.4rem; 
}
.flex-column.input-label-box.width-15 {
  width:15rem; margin-right:2rem; 
}
.flex-column.input-label-box.width-20 {
  width:20rem; margin-right:2rem; 
}
.flex-column.input-label-box.width-30 {
  width:30rem; margin-right:2rem; 
}
.month-picker {
  box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.1);
}
.month-picker td { vertical-align: middle;}
.month-picker-invalid-message {
  line-height: 1 !important; 
  font-size: 1.4rem;
  width: auto;
  margin-top:0rem; 
  position:absolute;
  bottom:-3rem; background-color:#ffffffee;
  border:1px solid #b0a89d;
  border-radius:0.4rem;
  right:0;
  color:#e54d00;
  padding:0.5rem;
  box-shadow:0 0 3px 0px rgba(0,0,0,0.1);
}
.month-picker-year-table .ui-button { width:auto; min-width:1.5em; height:auto; }
.ui-widget-header {
  border: 1px solid #E6E0D6;
    background: #FCFAF5;
    color: #454038;
    font-weight: bold;
    font-size:1.8rem; 
}
.ui-widget-header a {
  color: #454038;
}
.month-picker-open-button  {
  width:3rem; height:3rem; 
  position:absolute; right:0; top:50%; margin-top:-1.5rem; 
  background-color:transparent;
  background-repeat: no-repeat;
  border:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.921' height='21.023' viewBox='0 0 18.921 21.023'%3E%3Cpath id='ico_calendar' d='M122.1-858.977a2.024,2.024,0,0,1-1.485-.618,2.024,2.024,0,0,1-.618-1.485V-875.8a2.024,2.024,0,0,1,.618-1.485,2.024,2.024,0,0,1,1.485-.618h1.051V-880h2.1v2.1h8.409V-880h2.1v2.1h1.051a2.024,2.024,0,0,1,1.485.618,2.024,2.024,0,0,1,.618,1.485v14.716a2.024,2.024,0,0,1-.618,1.485,2.024,2.024,0,0,1-1.485.618Zm0-2.1h14.716v-10.511H122.1Z' transform='translate(-120 880)' fill='%2371634d'/%3E%3C/svg%3E%0A");
  margin-right:0.7rem !; 
  background-position:center center;
  background-size:auto 1.8rem;
}
.month-picker-open-button:hover {
  border:1px solid #E6E0D6;
}
.month-picker-open-button .ui-icon { background:none; width: 100%; height: 100%; }
.month-picker-year-table .month-picker-title {
  vertical-align: middle;
} 
.ui-button-text-only {width:100%;} 

.month-input-box {
  border: 1px solid #dfdcd7;
  font-size: 1.6rem;
  background-color: #fcfbfa;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.07) inset;
  padding-left: 0;
  padding-right:0;
  border-radius: 0.4rem;
  min-height: 4.2rem;
  width:100%;
  position:relative;
}
.month-input-box + span {
  margin-left:0.2em; margin-right:0.2em; 
}
.month-input-box > input, .month-input-box > input:hover, .month-input-box > input:focus {
  box-shadow:none; border:none  !important; background:none !important; outline:none;
}
.month-picker-open-button .ui-button-text {
  text-indent: -100rem; overflow:hidden; display:inline-block;
}
.month-picker table { width:100%; }
.month-picker-year-table .month-picker-title .ui-button { height: auto; }
.month-picker-month-table tbody tr td a.ui-state-default {
  margin: 0;
  width: 5em;
  display: inline-block;
  height: 2.5em;
  line-height: 2.4em; 
}
.ui-widget-header .ui-icon { width:1.5em; height:1.5em;}
.ui-widget-header .ui-icon.ui-icon-circle-triangle-w {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.965' height='13.102' viewBox='0 0 7.965 13.102'%3E%3Cpath id='left' d='M-16059-7655.675l-5.844,5.844,5.844,5.844' transform='translate(16066.258 7656.382)' fill='none' stroke='%2371634d' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-position: center center;
  cursor: pointer;
}
.ui-widget-header .ui-icon.ui-icon-circle-triangle-e {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.965' height='13.102' viewBox='0 0 7.965 13.102'%3E%3Cpath id='right' d='M-16059-7655.675l-5.844,5.844,5.844,5.844' transform='translate(-16058.293 -7643.28) rotate(180)' fill='none' stroke='%2371634d' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-position: center center;
  cursor: pointer;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  background-color:#FFFFF2;
  color:#805F26;
  font-weight: 500;
}
.month-picker-year-table .ui-state-hover {
 border:1px solid #E6E0D6;
 background-color:#ffffff;
}

.month-picker-year-table .month-picker-title .ui-button-text {
  padding: 0.2em 1em; font-weight: 500; cursor: pointer;
}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .input-box { 
      min-height: 4.5rem;
  }
}

.esg-appendix {
  background-color: #d1e1d2;
  border:1px solid #cbcbcb;
  background-image: url(../images/esg/appendix-bg.jpg);
  background-repeat: no-repeat;
  background-position: right 1rem bottom;
  border-radius: 0.5rem; 
  padding:4rem 5.5rem 6rem;
  margin-bottom: 4rem;
  background-size: 36rem auto; 
}

.esg-appendix .banner-title {
  color:#6b7a74;
  font-size:1.6rem;
  font-weight: 500;
}

.esg-appendix .banner-title span {
  font-size:3.6rem;
  font-weight: 700;
}

.esg-appendix .btn {
  margin-top: 2rem;
  background-color: #ffffffcc;
  padding: 1rem 1rem 1rem 2.4rem;
  border-radius: 10rem;
  border: none;
  color:#537362;
  font-size:1.8rem;
  font-weight: 600;
  display: inline-flex;
  line-height: 1;
  align-items: center;
  box-shadow: 0 0 0.5rem 0.1rem rgba(0,0,0,0.01);
    transition: box-shadow 0.3s;
}
.esg-appendix .btn:hover {
  box-shadow: 0 0 0.5rem 0.1rem rgba(0,0,0,0.2);
  background-color: #ffffff;
  transition: box-shadow 0.3s;
}
 
.esg-appendix .btn i.ico {
  background-color:#c8e0ca;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  width:3.7rem;
  height:3.7rem;
  margin-left: 2rem;
  border-radius: 100%;
  background-size: 45%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16px' height='20px'%3E%3Cpath fill-rule='evenodd' fill='rgb(83, 115, 98)' d='M14.420,19.064 L1.807,19.064 C1.032,19.064 0.403,18.433 0.403,17.654 C0.403,16.875 1.032,16.244 1.807,16.244 L14.420,16.244 C15.195,16.244 15.823,16.875 15.823,17.654 C15.823,18.433 15.195,19.064 14.420,19.064 ZM9.039,13.586 C9.035,13.590 9.031,13.594 9.028,13.598 C9.018,13.607 9.009,13.617 8.999,13.626 C8.996,13.630 8.992,13.634 8.988,13.638 C8.981,13.644 8.974,13.650 8.967,13.656 C8.956,13.666 8.945,13.676 8.934,13.685 C8.925,13.694 8.914,13.702 8.905,13.709 C8.892,13.719 8.880,13.728 8.868,13.738 C8.856,13.746 8.846,13.754 8.834,13.762 C8.824,13.769 8.814,13.776 8.803,13.782 C8.789,13.791 8.775,13.800 8.761,13.808 C8.750,13.815 8.740,13.822 8.729,13.828 C8.718,13.834 8.707,13.839 8.696,13.845 C8.680,13.853 8.665,13.860 8.649,13.868 C8.639,13.872 8.629,13.878 8.619,13.882 C8.607,13.887 8.594,13.892 8.582,13.897 C8.566,13.903 8.550,13.909 8.534,13.915 C8.524,13.918 8.514,13.922 8.504,13.926 C8.491,13.930 8.477,13.933 8.464,13.937 C8.448,13.942 8.432,13.946 8.415,13.950 C8.405,13.952 8.394,13.955 8.384,13.958 C8.371,13.961 8.357,13.963 8.344,13.965 C8.327,13.968 8.311,13.971 8.295,13.973 C8.283,13.975 8.272,13.977 8.260,13.978 C8.247,13.980 8.234,13.981 8.220,13.982 C8.205,13.983 8.190,13.984 8.174,13.985 C8.160,13.985 8.146,13.986 8.132,13.986 C8.126,13.986 8.120,13.987 8.113,13.987 C8.107,13.987 8.101,13.986 8.095,13.986 C8.081,13.986 8.067,13.985 8.053,13.985 C8.037,13.984 8.022,13.983 8.006,13.982 C7.993,13.981 7.980,13.980 7.967,13.978 C7.955,13.977 7.944,13.975 7.932,13.973 C7.916,13.971 7.899,13.968 7.883,13.965 C7.870,13.963 7.856,13.961 7.843,13.958 C7.833,13.955 7.822,13.952 7.811,13.950 C7.795,13.946 7.779,13.942 7.763,13.937 C7.750,13.933 7.736,13.930 7.723,13.926 C7.713,13.922 7.703,13.918 7.693,13.915 C7.677,13.909 7.661,13.903 7.645,13.897 C7.633,13.892 7.620,13.887 7.608,13.882 C7.598,13.878 7.588,13.872 7.577,13.868 C7.562,13.860 7.547,13.853 7.531,13.845 C7.520,13.839 7.509,13.834 7.498,13.828 C7.487,13.822 7.477,13.815 7.466,13.808 C7.452,13.800 7.438,13.791 7.424,13.782 C7.413,13.776 7.403,13.769 7.393,13.762 C7.381,13.754 7.371,13.746 7.359,13.738 C7.347,13.729 7.335,13.719 7.323,13.710 C7.313,13.702 7.302,13.694 7.293,13.685 C7.282,13.676 7.271,13.666 7.260,13.656 C7.253,13.650 7.246,13.644 7.239,13.638 C7.235,13.634 7.231,13.630 7.227,13.626 C7.218,13.617 7.209,13.607 7.199,13.598 C7.196,13.594 7.191,13.590 7.188,13.586 L2.056,8.130 C1.573,7.616 1.596,6.806 2.107,6.320 C2.618,5.835 3.424,5.858 3.908,6.371 L6.840,9.489 L6.840,2.120 C6.840,1.413 7.410,0.840 8.113,0.840 C8.817,0.840 9.387,1.413 9.387,2.120 L9.387,9.489 L12.319,6.371 C12.803,5.858 13.609,5.835 14.120,6.320 C14.631,6.806 14.654,7.616 14.171,8.130 L9.039,13.586 Z'/%3E%3C/svg%3E");
}
.esg-system .white-box .h1-wrapper h3 { 
  display: flex;
  align-items: center;
  justify-content: center;
}

.esg-system ol.human-wrapper {
  display: flex;
 align-items: center;
background-size:100% auto;
background-position:top center;
background-repeat: no-repeat; 
}
 
.esg-system ol.human-wrapper li.h {
  padding-top:1rem !important;
}
.esg-system ol.human-wrapper li h4 > p {
  line-height: 1.5;
  font-weight: bold;
  display:flex;
  height:4em;
  justify-content: center;
  align-items: center;
  font-size:2.1rem;
}
.esg-system ol.human-wrapper li.h  h4 > p {
  color:#c1272d;
}

.esg-system ol.human-wrapper li.u {
  padding-top:5.5% !important;
}
.esg-system ol.human-wrapper li.m {
  padding-top:7% !important;
}
.esg-system ol.human-wrapper li.a {
  padding-top:5.5% !important;
}
.esg-system ol.human-wrapper li.n {
  padding-top:1rem !important;
}
.esg-system ol.human-wrapper > li > div {
  background-color: transparent !important;
  border: None !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
      justify-content: stretch;
}
.esg-system ol.human-wrapper > li > div > p {
  flex-grow: 1;
  font-weight: 500;
    line-height: 1.6;
}
.esg-system ol.human-wrapper > li > div > ul {
 color: #686662;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  margin-top:8rem;
  height: 3em;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
.esg-system ol.human-wrapper > li > div > ul > li {
  padding-top:0 !important;
}
.esg-system .black-copy.title {
  font-size:3.6rem !important;
  font-weight: bold;
  font-style: italic;
  color:#454038;
}
.esg-system .human-box div.h1-wrapper {
  margin-bottom: 0;
}
.esg-system .level-2-wrapper {
  font-size:1.7rem;
  line-height: 1.8;
}
#esg-direction.esg-system .white-box {
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
  
}
#esg-direction .white-box ol.human-wrapper > li > div > h4 > i {
  width:8.5rem;
  height: 8.5rem;
  border-radius: 100%;
  background-color:#fff2f3;
  border:1px solid #c1272d;
  background-repeat: no-repeat;
  background-size: auto 52%;
  background-position: center center;
}
#esg-direction .white-box ol.human-wrapper > li.h > div > h4 > i {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_H' data-name='H' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.35 34.08'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23c1272d; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='20.33 0 20.33 15.02 5.02 15.02 5.02 0 0 0 0 34.08 5.02 34.08 5.02 19.57 20.33 19.57 20.33 34.08 25.35 34.08 25.35 0 20.33 0'/%3E%3C/svg%3E"); 
  border:1px solid #c1272d;
}
#esg-direction .white-box ol.human-wrapper > li.u > div > h4 > i {
  background-color:#f2fff9;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_u' data-name='u' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.15 34.43'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2300a99d; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M5.77,32.94c-1.88-.99-3.31-2.44-4.29-4.34s-1.48-4.18-1.48-6.86V0h5.02v21.91c0,2.48.66,4.41,1.97,5.77,1.31,1.36,3.17,2.04,5.56,2.04s4.28-.68,5.6-2.04c1.32-1.36,1.98-3.28,1.98-5.77V0h5.02v21.75c0,2.67-.49,4.96-1.48,6.86s-2.42,3.34-4.31,4.34c-1.89.99-4.16,1.49-6.82,1.49s-4.9-.5-6.78-1.49Z'/%3E%3C/svg%3E");
  border:1px solid #00a99d;
    background-position: 50% 53%;
}
.esg-system ol.human-wrapper li.u h4 > p { color:#00a99d;}

#esg-direction .white-box ol.human-wrapper > li.m > div > h4 > i {
  background-color:#fffbf2;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_m' data-name='m' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.42 34.08'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23806d3c; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M25.72,0h4.7v34.08h-4.9V8.55l.25,1.5-8.81,19.29h-3.49L4.65,10.52l.25-1.97v25.52H0V0h4.7l10.51,22.5L25.72,0Z'/%3E%3C/svg%3E");
  border:1px solid #806d3c;
    background-position: 51% 50%;
}
.esg-system ol.human-wrapper li.m h4 > p { color:#806d3c;}
#esg-direction .white-box ol.human-wrapper > li.a > div > h4 > i {
  background-color:#f3faff;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_a' data-name='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.66 34.08'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230071bc; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M25.25,34.08h5.41L17.47,0h-4.28L0,34.08h5.41l2.7-7.48h14.44l2.7,7.48ZM9.75,22.05l5.58-15.47,5.58,15.47h-11.16Z'/%3E%3C/svg%3E");
  border:1px solid #0071bc;
    background-position: 50% 50%;
}
.esg-system ol.human-wrapper li.a h4 > p { color:#0071bc;}
#esg-direction .white-box ol.human-wrapper > li.n > div > h4 > i {
  background-color:#fff2fa;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_n' data-name='n' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.43 34.05'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %239e005d; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M0,0h4.55l17.5,26.34-.59.61V0h4.97v34.05h-4.6L4.38,8.11l.59-.61v26.55H0V0Z'/%3E%3C/svg%3E");
  border:1px solid #9e005d;
    background-position: 48% 50%;
}
.esg-system ol.human-wrapper li.n h4 > p { color:#9e005d;}
.esg-system .white-box {
  margin-bottom: 4rem;
}
.esg-system .white-box:first-child {margin-bottom:10rem;}
.esg-system .white-box > h3 {
  font-size:1.8rem;
  font-weight: 600;
  color:#454038;
  text-align: center;
  position: absolute;
  left:0; right:0; top:100%; padding-top:1rem; margin-top:0.3rem;
}
.esg-system .white-box.board-box .black-bg {
  background-color: #000000;
}
.gray-bg {
  display: flex;
  flex-direction: column;
  background-color: #ede8e2;
  border:1px solid #000000;
  color:#000000 !important;
}
.esg-system .ceo-text {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='ceo' data-name='ceo' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.8 23.19'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.88,6.21c.3-.63.73-1.11,1.29-1.44s1.24-.49,2.05-.49c.61,0,1.17.14,1.66.42.49.28.92.69,1.27,1.22.35.53.61,1.17.77,1.92h4.44c-.28-1.66-.79-3.07-1.52-4.24s-1.66-2.06-2.79-2.68c-1.12-.61-2.4-.92-3.83-.92-1.73,0-3.21.33-4.44,1-1.23.67-2.17,1.63-2.81,2.9-.65,1.27-.97,2.79-.97,4.59v6.23c0,1.79.32,3.32.97,4.59.65,1.27,1.58,2.23,2.81,2.89,1.23.66,2.71.99,4.44.99,1.43,0,2.7-.31,3.82-.92,1.12-.61,2.05-1.51,2.78-2.68s1.25-2.59,1.54-4.24h-4.44c-.16.76-.41,1.41-.75,1.94s-.77.94-1.27,1.21c-.5.28-1.06.41-1.69.41-.8,0-1.48-.16-2.05-.49s-.99-.8-1.29-1.43-.45-1.38-.45-2.27v-6.23c0-.88.15-1.64.45-2.27Z'/%3E%3Cpolygon class='cls-1' points='22.3 .23 20.75 .23 20.75 22.95 22.3 22.95 25.03 22.95 35.97 22.95 35.97 18.83 25.03 18.83 25.03 13.73 34.25 13.73 34.25 9.61 25.03 9.61 25.03 4.36 35.97 4.36 35.97 .23 25.03 .23 22.3 .23'/%3E%3Cpath class='cls-1' d='M55.77,3.98c-.69-1.27-1.66-2.24-2.91-2.94-1.25-.69-2.71-1.04-4.35-1.04s-3.1.35-4.35,1.04c-1.25.69-2.23,1.67-2.91,2.94s-1.03,2.73-1.03,4.4v6.44c0,1.67.34,3.13,1.03,4.4s1.66,2.25,2.91,2.94c1.25.69,2.71,1.04,4.35,1.04s3.1-.35,4.35-1.04c1.25-.69,2.23-1.67,2.91-2.94s1.03-2.73,1.03-4.4v-6.44c0-1.67-.34-3.13-1.03-4.4ZM52.37,14.92c0,.79-.16,1.49-.48,2.09-.32.6-.77,1.07-1.35,1.4s-1.26.49-2.03.49-1.45-.16-2.03-.49-1.03-.79-1.35-1.4c-.32-.6-.48-1.3-.48-2.09v-6.66c0-.79.16-1.49.48-2.09.32-.6.77-1.07,1.35-1.4s1.26-.49,2.03-.49,1.45.16,2.03.49,1.03.79,1.35,1.4c.32.6.48,1.3.48,2.09v6.66Z'/%3E%3C/svg%3E");
  color:transparent;
  font-size: 1.6rem;
  letter-spacing: 2rem;
  background-size:contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top:1rem;
  margin-bottom:1rem;
}
#esg-direction .level-2-wrapper.gray-box {
    margin-bottom: 3rem;
}
#esg-direction .level-2-wrapper.gray-box > li::after {
  display: none;
} 

#esg-direction .white-box ol.gray-box > li > div {
  border:1px solid #bfb0a3;
  background-color: #ffffff;
  display: flex; 
  align-items: center;
  justify-content: center;
  min-height: 6em;
  margin-bottom: 5%;
  font-size:1.6rem;
  line-height:1.8;
  padding-top:2.5rem !important;
  padding-bottom:2.5rem !important;
}
#esg-direction .white-box ol.gray-box > li > div > ul > li {
  display:inline-block;
}
#esg-direction .white-box ol.gray-box > li > div > ul > li::after {
  content:" · ";
  font-weight: bold; 
}
#esg-direction .white-box ol.gray-box > li > div > ul > li:last-child::after {
  display:none;
}
#esg-direction.esg-system .white-box ol > li {
  display:flex;
  flex-direction: column;
  width:100%;
}
 
#esg-direction.esg-system .white-box ol > li > ol {
    display: flex;
    padding-top: 3rem;
    position: relative;
}
#esg-direction.esg-system .white-box ol > li > ol > li {
  padding:0;
}
#esg-direction .white-box ol.gray-box > li::before {
  content:'';
  left:50%;
  right:auto;
  top:0;
  height:3rem;
  width:1px;
  background-color: #d9d4ce;
  position: absolute;
}
#esg-direction.esg-system .white-box ol.level-2-wrapper > li > div > ul {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
#esg-direction.esg-system .white-box ol.level-2-wrapper > li > div > ul > li {
  line-height: 1.4; margin-bottom: 0.8rem;
}
  .esg-system ol.human-wrapper > li > div > p > span.title {
    display:none;
  }
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
#esg-direction .red-tap .box-container .black-copy {
  font-size:1.8rem;
}

  .esg-system ol.human-wrapper,.h1-wrapper::before {
    background:none;
  }
  #esg-direction.esg-system .human-box .h1-wrapper::before {
    display: none;
  }
  .esg-system ol.human-wrapper {
    display:flex;
    flex-direction: column;
    margin-top: 2rem;
  }
  .esg-system ol.human-wrapper > li > div {
    flex-direction: row;
    align-items: center;
    position: relative;
  }
  .esg-system ol.human-wrapper li h4 > p {
    line-height: 1.4;
  }
  .esg-system ol.human-wrapper > li > div > ul {
    margin-top: 0;
    flex-direction: row; 
  }
  .esg-system ol.human-wrapper > li > div > ul > li {
    padding-right:1.6rem;
  }
    .esg-system ol.human-wrapper > li > div > ul > li:last-child::after {
      display: none;
    }
 
  #esg-direction.esg-system .white-box ol.human-wrapper > li > div > h4 {
    margin-right: 2rem;
    width:8rem;
    flex: 0 0 auto; margin-bottom:0;
    position:absolute; left:0;
    top:0;
  }
  #esg-direction.esg-system .white-box ol.human-wrapper > li {
    padding:1rem 0 1rem  !important;
    flex:1 1 auto !important;
    justify-content: center;
    width:100%;
  }
  .esg-system ol.human-wrapper > li > div > p {
    text-align: left;
 
    flex-wrap: wrap;
    gap: 0 0.5em;
    padding-bottom:0.5rem;
  }
  .esg-system ol.human-wrapper > li > div > p > span.title {
    display:block; width:100%; font-size:1.1em;
  }
  .esg-system ol.human-wrapper > li.h > div > p > span.title {
    color:#c1272d;
  }
  .esg-system ol.human-wrapper > li.u > div > p > span.title {
    color:#00a99d;
  }
  .esg-system ol.human-wrapper > li.m > div > p > span.title {
    color:#806d3c;
  }
  .esg-system ol.human-wrapper > li.a > div > p > span.title {
    color:#0071bc;
  }
  .esg-system ol.human-wrapper > li.n > div > p > span.title {
    color:#9e005d;
  }
  .esg-system ol.human-wrapper li h4 > p {
    display:none;
  }
  .esg-system ol.human-wrapper > li > div > ul {
    margin-bottom: 0; height:2em;
  }
 
  #esg-direction.esg-system .white-box ol.human-wrapper > li > div {
 
    flex-direction: column; 
    align-items: flex-start;
    width:100%;
    justify-content: center;
  }
  .esg-appendix {
    padding:5%;
    padding-bottom: 26rem; 
        background-position: right 1rem bottom;
  }
  .esg-appendix .banner-title span {
    line-height:1.4; margin-top: 1rem; display: block;
  }
  .esg-appendix .btn {
    margin:4rem 0 0;
  }
}

@media (max-aspect-ratio: 2 / 3), (max-width: 1023px)  {
  .esg-appendix {
    padding: 3rem 5% 30rem; 
    background-position: 70% bottom;
    text-align: center;
  }
  .esg-appendix .btn {
    margin:3rem auto;
  }
}
.esg-system .white-box.human-box2 ol.human-wrapper {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_c' data-name='c' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 227.26 717.33'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23c4baab; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M.23,716.83h1.44c134.68-72.07,225.08-205.33,225.08-357.81S135.71,72.33.23.44'/%3E%3C/svg%3E");
background-size:auto 100%;
background-position:left;
gap:3.5rem;
  align-items: flex-start;
  justify-content: center;
  background-repeat: no-repeat;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li {
 padding-top:0 !important;
 min-height:8.5rem;
}

.human-box2 ol.human-wrapper li h4 p {
  display: none;
}
.esg-system .human-box2 ol.human-wrapper {
  flex-direction: column;
}
#esg-direction .white-box.human-box2 {
  display: flex;
  align-items: center; 
  padding-bottom: 7rem;
  justify-content: center;
  flex-wrap: wrap;
  gap:5%;
}
#esg-direction .white-box.human-box2 .human-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap:5% 0;
}
.esg-system .human-box2 ol.human-wrapper > li > div {
  flex-direction: row; align-items: center;
}
.esg-system .white-box.human-box2 .h1-wrapper h3 {
  margin-right:-6rem;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > p > span.title {
  display: block; color:#ffffff; font-weight: bold; font-size:1.1em;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > p > span {
  color:#ffffff;
  text-shadow:0 0 0.1em #000000aa;
}
.esg-system ol.human-wrapper li.h > div > p {
  background-image: linear-gradient(#f0545b, #c1272d 70%, #b84046);
}
.esg-system ol.human-wrapper li.u > div > p {
  background-image: linear-gradient(#54f0e3, #21a398 70%, #40b8ae);
}
.esg-system ol.human-wrapper li.m > div > p {
  background-image: linear-gradient(#f0c154, #a37c21 70%, #b89440);
}
.esg-system ol.human-wrapper li.a > div > p {
  background-image: linear-gradient(#54b4f0, #2171a3 70%, #408ab8);
}
.esg-system ol.human-wrapper li.n > div > p {
  background-image: linear-gradient(#ff8cd3, #991f6a 70%, #b8408a);
}
.esg-system ol.human-wrapper > li > div > p {
  text-align: left;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > ul {
  margin-top: 0;
  color:#22443a;
  font-weight: 500;
  list-style-type: disc;
  margin-left:1.6rem;
  margin-bottom:0;
  align-items: flex-start; 
}
#esg-direction .white-box.human-box2 ol > li > div {
  width:90%;
  position: relative;
}
#esg-direction .white-box.human-box2 ol > li > div > h4 {
  margin-bottom: 0; 
  position:absolute;
  top:0; left:0;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > p {
  margin-left:4.25rem;
  height: 100%;
  background-color: #eee;
  border-radius: 1.5rem;
  padding-left: 6rem;
  max-width: 65rem;
  padding-top: 1.2rem;
  margin-right: 3rem;
  min-height: 8.5rem; 
  padding-bottom: 1.2rem;
  padding-right: 2rem;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li.u,
.esg-system .white-box.human-box2 ol.human-wrapper > li.a {
  margin-left:8rem;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li.m {
  margin-left: 11rem;
}

#esg-direction .white-box.board-box ol > li > div > h4 {
position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width:70%;
    max-width: 26rem;
    text-align: center;
    margin: auto;
    padding: 1.4rem;
    top: 1.6rem;
    border-radius: 4rem;
    color:#ffffff;
}
#esg-direction .white-box.board-box ol > li.e > div > h4 {
    background-color: #008563;
}
#esg-direction .white-box.board-box ol > li.e > div {
  background-image: url(../images/esg/bg_e.png);
}

#esg-direction .white-box.board-box ol > li.s > div {
  background-image: url(../images/esg/bg_s.png);
}


#esg-direction .white-box.board-box ol > li.s > div > h4 {
    background: #DF6C20;
}
#esg-direction .white-box.board-box ol > li.g > div > h4 {
    background: #74990F;
    color:#ffffff; 
}
#esg-direction .white-box.board-box ol > li > div {
  padding-top:6rem;
}
.validation .table-box table.table tr td[data-level="2"] {text-align: left; font-weight: 500;}
.validation table.table.make-m td { border-bottom-color:hsl(37, 5%, 90%);}
.darker-bc { border-bottom-color: hsl(37, 5%, 70%) !important; }
.validation table.table.make-m td[data-level="1"]{ width:8% !important;}
.validation table.table.make-m .smaller {font-size:0.9em; line-height: 1.3; margin-top: 2px;}
@media (max-aspect-ratio: 1 / 1), (max-width: 1023px) {
  .validation table.table.make-m td[data-level="1"], .validation table.table.make-m th[data-level="1"] { width:0 !important;} 
  .esg-system .white-box.human-box2 ol.human-wrapper {
    background-image: none;
  }
#esg-direction .white-box.board-box ol > li > div > h4 {
  top:-2.8rem;
  z-index: 1000;
}
#esg-direction .white-box ol.level-2-wrapper {
    margin-top: 2.5rem;
}
#esg-direction .human-box2 div.h1-wrapper {
  padding-bottom:0;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li {
  margin-left:0 !important;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > p {
  height:auto;
  min-height: 8.5rem;
  padding:2rem;
  padding-left:7rem;
  width:100%;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > ul {
  margin-top:2rem; gap:1rem 3rem;          margin-left: 6rem; flex-wrap: wrap; justify-content: flex-start;
}
.esg-system .white-box.human-box2 ol.human-wrapper > li > div > p {
  width:calc(100% - 4.25rem)  !important; 
}
    .esg-system .white-box.human-box2 ol.human-wrapper > li > div > p {
        width: auto;
        flex-grow: 1;
        margin-right: 0;
    }
 #esg-direction .white-box ol.gray-box > li > div {
  margin-bottom:10%;
 }
 .validation .table-box table.table tr td:last-child {
  word-break: break-all; width: 2rem !important;
}
.validation .table-box table.table tr td[data-level="2"] { 
  word-break: break-all;
  vertical-align: text-top;
  padding-left:1rem;
}
.validation .table-box table.table tr td p.smaller {
  font-size:0.85em;
}
}

.validation .table-box table.table tr td ul {
    text-align: left; line-height: 1.8;
}
/* .validation .table-box table.table tr td ul li:after {
  content:'/';
  margin-left:0.8rem;
  margin-right:0.8rem;
  opacity: 0.5;
}
.validation .table-box table.table tr td ul li:last-child:after {
  display: none;
} */
.validation .table-box table.table tr td ul li {
   line-height: 1.5; display: inline-block; min-width:12em; padding-right:2.4rem; position:relative; padding-left:1.4em; 
}
.validation .table-box table.table tr td ul li::before {
  margin-right: 0.2rem;
  position:absolute;
  left:0;
}
.validation .table-box table.table tr td ul li:nth-child(1)::before {
  content:"① "; 
}
.validation .table-box table.table tr td ul li:nth-child(2)::before {
  content:"② "; 
}
.validation .table-box table.table tr td ul li:nth-child(3)::before {
  content:"③ "; 
}
.validation .table-box table.table tr td ul li:nth-child(4)::before {
  content:"④ "; 
}
.validation .table-box table.table tr td ul li:nth-child(5)::before {
  content:"⑤ "; 
}
.validation .table-box table.table tr td ul li:nth-child(6)::before {
  content:"⑥ "; 
}
.validation .table-box table.table tr td ul li:nth-child(7)::before {
  content:"⑦ "; 
}
.validation .table-box table.table tr td ul li:nth-child(8)::before {
  content:"⑧ "; 
}
.validation .table-box table.table tr td ul li:nth-child(9)::before {
  content:"⑨ "; 
}
.validation .table-box table.table tr td ul li:nth-child(10)::before {
  content:"⑩ "; 
}

.list-num { min-width:1em; font-weight: normal; display: inline-block; font-size:0.9em; } 

#esg-direction.esg-validation {
  background-image: none;
}
.esg-validation .white-box .h1-wrapper h3 { 
  display: flex;
  align-items: center;
  justify-content: center;
}

.esg-validation ol.human-wrapper {
  display: flex;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_c' data-name='c' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1189.23 113.15'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23d9d4ce; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M.19,8.57c159.91,65.1,363.31,104.08,584.74,104.08S1026.34,70.42,1189.04.46'/%3E%3C/svg%3E");
background-size:100% auto;
background-position:top center;
background-repeat: no-repeat;
    margin-top: -6rem;
}
.esg-validation ol.human-wrapper li { 
      flex: 1 1 20% !important;
}
.esg-validation ol.human-wrapper li.h {
  padding-top:1rem !important;
}
.esg-validation ol.human-wrapper li h4 > p {
  line-height: 1.5;
  font-weight: bold;
  display:flex;
  height:4em;
  justify-content: center;
  align-items: center;
  font-size:2.1rem;
}
.esg-validation ol.human-wrapper li.h  h4 > p {
  color:#c1272d;
}

.esg-validation ol.human-wrapper li.u {
  padding-top:5.5% !important;
}
.esg-validation ol.human-wrapper li.m {
  padding-top:7% !important;
}
.esg-validation ol.human-wrapper li.a {
  padding-top:5.5% !important;
}
.esg-validation ol.human-wrapper li.n {
  padding-top:1rem !important;
}
.esg-validation ol.human-wrapper > li > div {
  background-color: transparent !important;
  border: None !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
      justify-content: stretch;
}
.esg-validation ol.human-wrapper > li > div > p {
  flex-grow: 1;
  font-weight: 500;
    line-height: 1.6;
}
.esg-validation ol.human-wrapper > li > div > ul {
 color: #686662;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  margin-top:8rem;
  height: 3em;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
.esg-validation ol.human-wrapper > li > div > ul > li {
  padding-top:0 !important;
}
.esg-validation .black-copy.title {
  font-size:2.6rem !important;
  font-weight: bold;
  font-style: italic;
}
.esg-validation .human-box div.h1-wrapper {
  margin-bottom: 0;
}
.esg-validation .level-2-wrapper {
  font-size:1.7rem;
  line-height: 1.8;
}
#esg-validation .white-box {
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
 
.esg-validation ol.human-wrapper li.u h4 > p { color:#00a99d;}
 
.esg-validation ol.human-wrapper li.m h4 > p { color:#806d3c;} 
.esg-validation ol.human-wrapper li.a h4 > p { color:#0071bc;}
 
.esg-validation ol.human-wrapper li.n h4 > p { color:#9e005d;}
 
.esg-validation .white-box.human-box {margin-bottom:10rem;}
.esg-validation .white-box > h3 {
  font-size:1.8rem;
  font-weight: 600;
  color:#454038;
  text-align: center;
  position: absolute;
  left:0; right:0; top:100%; padding-top:1rem; margin-top:0.3rem;
}
.esg-validation .white-box.board-box .black-bg {
  background-color: #000000;
}
 
 
#esg-validation .white-box ol > li > ol {
    display: flex;
    padding-top: 3rem;
    position: relative;
}
#esg-validation .white-box ol > li > ol > li {
  padding:0;
}
 
#esg-validation .white-box ol.level-2-wrapper > li > div > ul {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.esg-validation ol.human-wrapper > li > div > p > span.title {
  display:none;
}
#esg-direction.esg-validation .white-box.validation {
  padding:0; border:none;
}
.table-box-header {
  display: flex;
  justify-content: space-between; 
  align-items: baseline;
  flex-wrap: wrap; 
  gap: 1.6rem; 
}
.page-content .table-box-header h3 {
  flex:10 1 auto;
  width:auto;
}
.mobile-only {
  display: none;
}
.arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.5' height='26' viewBox='0 0 24.5 26'%3E%3Cpath id='합치기_2' data-name='합치기 2' d='M-73.5-1114.789l8.506-8.8a1.993,1.993,0,0,0,.307-.411H-87v-2h22.313a1.993,1.993,0,0,0-.307-.411l-8.506-8.8V-1138a3.824,3.824,0,0,1,.317.293l9.554,9.883A4.035,4.035,0,0,1-62.5-1125a4.037,4.037,0,0,1-1.129,2.824l-9.554,9.882a4.07,4.07,0,0,1-.317.294Z' transform='translate(87 1138)' fill='%23785923'/%3E%3C/svg%3E%0A");
  width:3rem; height: 2.6rem; display: inline-block; background-repeat: no-repeat; margin-left: 1rem; background-size: contain; background-position: right center;
}
.btn-gold-border { 
  color:#785923;
  font-size:1.6rem;   
  border-radius: 5rem;
  background-color: #FFF9EF;
  border:1px solid var(--h3-gold); 
  margin-bottom: 1.6rem;
  flex:0 1 auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
}
.btn-gold-border:hover {
  border:1px solid var(--h3-gold);
  background-color: #FFF1D9;
}
.btn-gold-border span { display:block; }
.ico-checklist {
  width:3rem; height: 2rem; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg id='g_973' data-name='g 973' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='23.074' height='20' viewBox='0 0 23.074 20'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='r_381' data-name='r 381' width='23.074' height='20' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='g_971' data-name='g 971' clip-path='url(%23clip-path)'%3E%3Cpath id='p_90' data-name='p 90' d='M19.551,10l0,2.175c.009,1.3,0,2.6,0,3.893a5.186,5.186,0,0,1-.6,3.24c-1.38,2.076-2.938,1.789-5.89,1.789H5.411a6.2,6.2,0,0,1-3.372-.477A3.741,3.741,0,0,1,.276,18.55C-.137,17.367.05,12.67.05,11.062.05,9.252-.2,5.14.414,3.78A3.882,3.882,0,0,1,2.367,1.908a9.14,9.14,0,0,1,3.486-.313c2.537,0,5.092-.029,7.647,0l-.012,1.79c-3.139.051-6.393-.055-9.477,0a2.046,2.046,0,0,0-1.981,1.2c-.327.719-.2,5.06-.185,6.176.029,2.086-.027,4.223,0,6.33C1.876,19.737,4.336,19.3,6,19.3h9.5A2.121,2.121,0,0,0,17.551,18.2c.381-.727.213-4.864.211-6.022l.01-2.88-.005-.745,1.786,0Z' transform='translate(0 -1.109)' fill='%23785923' fill-rule='evenodd'/%3E%3Cpath id='p_91' data-name='p 91' d='M17.712,10.049a.388.388,0,0,1-.126-.141,1.512,1.512,0,0,1-.122-.231,6.781,6.781,0,0,0-2.027-2.928c-1.52-1.156-3.661.295-4.163,1.088A8.992,8.992,0,0,1,14.3,10.855a19.008,19.008,0,0,1,1.89,3.932l2.778-1.62c.955-.523,1.178-1.279,1.979-2.383A49.945,49.945,0,0,1,31,0c-5.381,0-9.227,5.4-12.461,9.064a11.016,11.016,0,0,1-.826.986' transform='translate(-7.924 0)' fill='%23785923' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left center; background-size: contain;
}
@media screen and (orientation: portrait) {
  .btn-gold-border {flex-grow: 1;}
  .table-box-header {margin-bottom: 0rem;}
  table.table.make-m tr.mobile-title:first-child th {margin-top: 0; padding-top: 0 !important;}
  .mobile-only { display: inline-block; font-weight: 500; font-size:1.8rem;} 
  .mobile-only b{
    font-weight: bold; font-size:1.1em;
  }
  .validation .table-box table.table colgroup col:nth-child(2){ width: 35% !important;}
  .validation .table-box table.table colgroup col:nth-child(5){ width:4rem !important;}
  .validation .table-box table.table tr td ul {
    flex-direction: column;
    gap:0.6rem;
  }
  .validation .table-box {  margin-bottom: 0;}
  .validation .table-box table.table tr td ul li:after {
    display: none;
  } 
 
.esg-validation .human-box3 .black-copy.title { 
  margin-top: 0 !important;
}
#esg-direction .white-box ol.human-wrapper > li > div > h4 > i {
  width:6rem; height: 6rem;
}
  .esg-validation ol.human-wrapper,.h1-wrapper::before {
    background:none;
  }
  #esg-validation .human-box .h1-wrapper::before {
    display: none;
  }
  .esg-validation ol.human-wrapper {
    display:flex;
    flex-direction: column;
    margin-top: 2rem;
    gap:1rem;
  }
  .esg-validation ol.human-wrapper > li > div {
    flex-direction: row;
    align-items: center;
    position: relative;
    gap:5%;
    align-items: flex-start;
  }
  .esg-validation ol.human-wrapper li h4 > p {
    line-height: 1.4;
  }
  .esg-validation ol.human-wrapper > li > div > ul {
    margin-top: 0;
    flex-direction: row; 
  }
  .esg-validation ol.human-wrapper > li > div > ul > li {
    padding-right:1.6rem;
  }
    .esg-validation ol.human-wrapper > li > div > ul > li:last-child::after {
      display: none;
    }
    .esg-validation ol.human-wrapper > li > div > ul > li::after {
      content:" · ";
      display:inline-block;
      position:absolute;
      width:1.6rem;
    }
  #esg-validation .white-box ol.human-wrapper > li > div > h4 {
    margin-right: 2rem;
    width:8rem;
    flex: 0 0 auto; margin-bottom:0;
    position:absolute; left:0;
    top:0;
  }
  #esg-validation .white-box ol.human-wrapper > li {
    padding:1rem 0 1rem  !important;
    height: 16rem;
    justify-content: center;
  }
  .esg-validation ol.human-wrapper > li > div > p {
    text-align: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5em;
    padding-bottom:0.5rem;
  }
  .esg-validation ol.human-wrapper > li > div > p > span.title {
    display:block; width:100%; margin-bottom: 0.6rem; font-size:1.2em; font-weight: bold;
  }
  .esg-validation ol.human-wrapper > li.h > div > p > span.title {
    color:#c1272d;
  }
  .esg-validation ol.human-wrapper > li.u > div > p > span.title {
    color:#00a99d;
  }
  .esg-validation ol.human-wrapper > li.m > div > p > span.title {
    color:#806d3c;
  }
  .esg-validation ol.human-wrapper > li.a > div > p > span.title {
    color:#0071bc;
  }
  .esg-validation ol.human-wrapper > li.n > div > p > span.title {
    color:#9e005d;
  }
  .esg-validation ol.human-wrapper li h4 > p {
    display:none;
  }
  .esg-validation ol.human-wrapper > li > div > ul {
    margin-bottom: 0; height:2em;
  }
 
  #esg-validation .white-box ol.human-wrapper > li > div {
    padding-left: 10.6rem !important; 
    flex-direction: column; 
    align-items: flex-start;
    flex: 1 1 7rem;
    justify-content: center;
  }

} 
.latest-version { text-align: right; }
.latest-version a {
  display: flex; align-items: center; justify-content: flex-end; gap:0.4em;
}
.ico-home {
  display: inline-block;
  width:2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512.133' height='511.95' viewBox='0 0 512.133 511.95'%3E%3Cpath id='house-regular-full' d='M304,70.1a23.888,23.888,0,0,1,32,0l232,208a24,24,0,0,1-32.1,35.7l-8-7.2V511.9a64.059,64.059,0,0,1-64,64h-288a64.059,64.059,0,0,1-64-64V306.6l-8,7.2a24,24,0,1,1-32.1-35.7Zm16,50.1L160,263.7V512a16.047,16.047,0,0,0,16,16h48V424a71.955,71.955,0,0,1,72-72h48a71.955,71.955,0,0,1,72,72V528h48a16.047,16.047,0,0,0,16-16V263.7L320,120.3ZM272,528h96V424a23.942,23.942,0,0,0-24-24H296a23.942,23.942,0,0,0-24,24Z' transform='translate(-63.851 -63.95)'/%3E%3C/svg%3E%0A");
  background-size:contain;
} 
.banner-popup { 
  display: flex; 
  padding:2.4rem 2.4rem;
  background-color: #f5faff;
  border:1px solid #d3d5de;
  border-radius: 1rem;
  background-image: url(../images/iso_bg.png);
  background-position: top right -1rem;
  background-size:auto 100%;
  background-repeat: no-repeat;
  margin-bottom: 1.6rem;
  margin-left:3px; 
  margin-right:3px;
} 
.banner-popup.security { 
  background-color: #f5fffb;
  border:1px solid #d3ded9;
  background-image: url(../images/shiled_bg.png);
}
.banner-popup.security span.btn {
      background-color: #5e7a6e;
}
.banner-popup div {
  display: flex;
  align-items: center;
  gap:1.6rem;
  font-weight: bold;
  justify-content: space-between;
  width:100%;
} 
.banner-popup p {
  display: flex;
  align-items: center;
  gap:0.6rem;
  font-weight: bold;
  justify-content: space-between;
  font-size: 1.8rem;
  line-height: 1.5;;
} 
.banner-popup i { 
width:4.2rem;
height:3.6rem;
background-repeat: no-repeat;
display: inline-block;
background-size: contain;
background-position: center center;
}
.banner-popup i.ico-iso {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='_iso' data-name='iso' viewBox='0 0 871.74 713.06'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %231458a3; %7D %3C/style%3E%3C/defs%3E%3Cg id='logo-iso'%3E%3Cg id='logo-shape'%3E%3Cpath id='globe-bottom' class='cls-1' d='M705.37,547.99c-16.42,23.43-35.72,44.67-57.41,63.2-33.31-9.3-70.92-16.36-110.85-20.91,4.46-13.37,8.52-27.54,12.14-42.29h-21.89c-3.67,14.26-7.68,27.69-12,40.07-28.31-2.54-57.53-3.88-87.05-3.88s-56,1.18-82.79,3.43c-4.27-12.25-8.22-25.53-11.83-39.62h-21.9c3.59,14.54,7.56,28.52,11.98,41.71-40.04,4.36-77.7,11.27-111.76,20.57-21.27-18.31-40.19-39.25-56.34-62.28h-25.8c63.59,99.18,174.6,165.07,300.65,165.07s237.07-65.88,300.66-165.07h-25.81ZM233.58,626.92c30-7.28,63.17-12.83,98-16.45,13.12,33.6,30.35,61.22,47.38,78.56-53.04-8.57-103.72-31.49-145.38-62.11ZM430.51,693.23c-26.96,0-54.88-31.85-76.8-84.77,24.37-1.93,49.39-2.94,74.6-2.94,26.72,0,53.18,1.15,78.87,3.28-21.92,52.71-49.74,84.43-76.67,84.43h0ZM482.08,689.03c16.97-17.28,34.13-44.75,47.21-78.13,34.55,3.75,67.35,9.41,97.05,16.83-41.41,30.17-91.69,52.79-144.26,61.3Z'/%3E%3Cpath id='O' class='cls-1' d='M702.48,195.71c-98.73,0-169.29,57.41-169.29,160.18s70.55,160.2,169.29,160.2,169.26-57.41,169.26-160.2-70.57-160.18-169.26-160.18ZM701.61,443.3c-39.02,0-63.8-24.85-63.8-87.41s24.77-87.39,63.8-87.39,63.76,24.87,63.76,87.39-24.77,87.41-63.76,87.41Z'/%3E%3Cpath id='S' class='cls-1' d='M362,449.53c38.75,0,54.49-8.77,54.49-24.53,0-51.17-197.09,8.45-197.09-128.34,0-69.52,58.87-100.96,144.79-100.96,20.86,0,41.68,2.19,69.11,5.47h74.58v92.93h-74.58v-19.77c-10.97-5.84-36.92-12.08-63.98-12.08-34.76,0-48.28,10.26-48.28,23.42,0,54.48,198.91-8.05,198.91,128.02,0,56.31-37.67,102.38-150.64,102.38-20.86,0-45.7-2.17-73.13-5.49h-74.6v-92.89h74.6v19.76c10.97,5.85,36.56,12.07,65.81,12.07'/%3E%3Cpolygon id='I' class='cls-1' points='0 434.45 50.09 434.45 50.09 278.64 0 278.64 0 201.81 199.27 201.81 199.27 278.64 149.17 278.64 149.17 434.45 199.27 434.45 199.27 511.23 0 511.23 0 434.45'/%3E%3Cpath id='globe-top' class='cls-1' d='M430.51,0C304.46,0,193.45,65.87,129.86,165.06h25.8c16.42-23.39,35.72-44.64,57.4-63.2,33.34,9.31,70.94,16.36,110.87,20.93-4.47,13.38-8.54,27.52-12.15,42.27h21.9c3.66-14.26,7.66-27.69,12.01-40.06,28.28,2.54,57.52,3.89,87.04,3.89s55.99-1.19,82.79-3.45c4.25,12.25,8.2,25.53,11.81,39.62h21.91c-3.59-14.51-7.55-28.52-11.96-41.68,40.03-4.37,77.67-11.29,111.72-20.59,21.28,18.31,40.21,39.25,56.36,62.27h25.8C667.57,65.87,556.56,0,430.5,0h.01ZM331.74,102.15c-34.56-3.75-67.34-9.41-97.06-16.81,41.42-30.2,91.7-52.81,144.28-61.32-16.97,17.28-34.14,44.77-47.22,78.13ZM432.72,107.53c-26.73,0-53.18-1.15-78.88-3.27,21.92-52.71,49.74-84.43,76.66-84.43s54.89,31.85,76.82,84.77c-24.38,1.92-49.4,2.91-74.6,2.93ZM529.46,102.58c-13.14-33.58-30.35-61.19-47.4-78.58,53.03,8.59,103.72,31.51,145.38,62.14-30,7.28-63.15,12.83-97.98,16.44Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.banner-popup i.ico-shield {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='_shield' version='1.1' viewBox='0 0 149 157.2'%3E%3C!-- Generator: Adobe Illustrator 30.2.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 105) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %2315a064; stroke-miterlimit: 10; stroke-width: 10px; %7D .st1 %7B fill: %2315a064; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M74.5,7.5c1.3,0,2.6.3,3.7.8l52.6,22.3c6.1,2.6,10.7,8.7,10.7,16-.1,27.7-11.5,78.4-59.6,101.4-4.7,2.2-10.1,2.2-14.7,0C19,124.9,7.6,74.3,7.5,46.6c0-7.3,4.6-13.4,10.7-16l52.6-22.3c1.2-.5,2.4-.8,3.7-.8Z'/%3E%3Cpath class='st1' d='M70.6,107.9c-1.9,0-3.8-.8-5.1-2.2l-18-18.4c-2.7-2.8-2.5-7.2.3-9.9,2.8-2.7,7.2-2.5,9.9.3l12.3,12.4,29.6-38.2c2.4-3.1,6.8-3.6,9.8-1.3s3.6,6.8,1.3,9.8l-34.6,44.7c-1.2,1.6-3.2,2.6-5.2,2.7h-.4Z'/%3E%3C/svg%3E");
}
.banner-popup span.btn {
  background-color: #8897b4;
  color:#ffffff;
  font-size:1.3rem;
  border-radius: 3rem;
  padding:0.6rem 2rem;
  line-height: 1.2;
  flex: 0 0 auto;
}
.esg-popup {display:none;}  
html.fixed .esg-popup { z-index: 100001; position:fixed; left:0; top:0; right:0; bottom:0; align-items: center; justify-content: center; } 
html.fixed .esg-popup div{ display: inline-block; z-index: 100001; position: relative; background-color: #ffffff; border:2px solid var(--sub-tap-bg);  }
html.fixed .esg-popup::after {     
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background-color: #00000055;
  content: "";
  z-index: 100000;
  pointer-events: unset;
}
html.fixed .esg-popup button.btn {
  position:absolute;
  right:1px;
  top:1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='19px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M19.408,17.236 L17.736,18.908 L10.000,11.173 L2.264,18.908 L0.592,17.236 L8.327,9.500 L0.592,1.764 L2.264,0.092 L10.000,7.827 L17.736,0.092 L19.408,1.764 L11.673,9.500 L19.408,17.236 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width:2rem;
  height:2rem;
  background-position: center center;
  border:none;
  text-indent:-50rem;
  overflow: hidden;
  color:transparent;
  left: auto;
  background-color:rgb(136, 102, 53);
  border-radius: 0;
  z-index: 1;
}
html.fixed .esg-popup div {
  width: 600px;
  height:840px;
  overflow: hidden;
  max-width: 90%;
  max-height:  95vh;
}
html.fixed .esg-popup div p{
  width:100%; height:100%; overflow: auto; display: flex;
}
html.fixed .esg-popup div img {
  max-width:600px; width:100%; height: auto; margin:auto; max-height: 836px; 
}
@media screen and (max-width: 440px) and (orientation: portrait) {
  html.fixed .banner-popup div {
    flex-direction: column;
    align-items: flex-start;
  }
  html.fixed .esg-popup div { max-width:90%; }
  html.fixed .esg-popup div img { max-width:100%; } 
  .banner-popup p i {display: none; }
  html.fixed .esg-popup div {
 
  max-height:  calc(100vw *1.3);
}
}