@charset "UTF-8";
/*-------------------------------------------------------------------
    파일정의 : 메인스타일
-------------------------------------------------------------------*/
/* 메인 비쥬얼 */
.visual {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 64rem;
  background: url("../img_en/main/main_banner.png") no-repeat center;
  background-size: cover; }
  @media (max-width: 767px) {
    .visual {
      background: linear-gradient(120deg, #112B48, #0A4A23 150%);
      height: 48rem; } }
  .visual .visual-txt {
    line-height: 1.2;
    font-size: 4rem;
    color: #FFFFFF;
    text-align: center;
    font-weight: 800;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
    @media (max-width: 767px) {
      .visual .visual-txt {
        font-size: 2.4rem;
        width: 100%; } }

.back_icon01 {
  padding: 5rem 40rem 10rem 0;
  background: url("../img_en/main/back_icon01.png") no-repeat right bottom; }
  @media (max-width: 767px) {
    .back_icon01 {
      padding: 24rem 0 0 0;
      background-size: 18rem auto;
      background-position: top center; } }
  .back_icon01 + .cont-wrap {
    margin-top: 0; }

.back_icon02 {
  padding-right: 40rem;
  background: url("../img_en/main/back_icon02.png") no-repeat right bottom; }
  @media (max-width: 767px) {
    .back_icon02 {
      padding: 21rem 0 0 0;
      background-size: 25rem auto;
      background-position: top center; } }
  .back_icon02 + .cont-wrap {
    margin-top: 0; }

.who {
  width: 100%;
  padding: 13rem 0;
  margin: 0 auto;
  background-color: #F8FAFF; }
  @media (max-width: 767px) {
    .who {
      padding: 6rem 0; } }
  .who .tab-btn-wrap {
    margin-top: 6rem; }
  .who .tit-wrap + * {
    margin-top: 2.4rem; }
  .who .txt-normal + .txt-normal {
    margin-top: 1.6rem; }
  .who .cont-wrap + .cont-wrap {
    margin-top: 8rem; }
    @media (max-width: 767px) {
      .who .cont-wrap + .cont-wrap {
        margin-top: 4rem; } }
  .who .box-wh {
    padding: 3.6rem 4rem;
    background-color: #fff;
    border-radius: 16px; }
    @media (max-width: 767px) {
      .who .box-wh {
        padding: 2rem; } }
    .who .box-wh .box-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.6rem 4rem; }
      @media (max-width: 767px) {
        .who .box-wh .box-inner {
          flex-direction: column; } }
    .who .box-wh .txt-sub {
      margin-left: 4.6rem;
      margin-top: 1rem; }
    .who .box-wh + .box-wh {
      margin-top: 2.4rem; }
  .who .archive-list ul {
    display: flex; }
    @media (max-width: 767px) {
      .who .archive-list ul {
        flex-direction: column; } }
  .who .history-spy {
    margin-top: 2.5rem;
    display: flex;
    align-items: flex-start; }
    @media (max-width: 767px) {
      .who .history-spy {
        flex-direction: column; } }
    .who .history-spy .tab-btn-wrap {
      margin-top: 6rem; }
    .who .history-spy ul {
      position: relative;
      width: 50%; }
      @media (max-width: 767px) {
        .who .history-spy ul {
          width: 100%; } }
      .who .history-spy ul::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0.6rem;
        width: 0.1rem;
        background: #a5a1a1;
        z-index: 0; }
      .who .history-spy ul li {
        position: relative; }
        .who .history-spy ul li .circle {
          width: 1.3rem;
          height: 1.3rem;
          border-radius: 50%;
          position: absolute;
          top: 1.5rem;
          left: 0;
          background-color: var(--navy-color);
          z-index: 0; }
        .who .history-spy ul li .time-panel {
          padding: 0.8rem 3rem 2rem;
          position: relative; }
          .who .history-spy ul li .time-panel .date {
            color: #222222;
            font-size: 2rem;
            font-weight: 500; }
          .who .history-spy ul li .time-panel .matter {
            color: #444444;
            font-size: 1.6rem;
            padding-top: 0.6rem; }
          .who .history-spy ul li .time-panel .font-green-small {
            display: block;
            color: #24a18f;
            font-size: 1.5rem;
            font-weight: 300;
            padding-top: 0.9rem; }

.operation {
  padding: 13rem 0;
  background-color: #fff; }
  @media (max-width: 767px) {
    .operation {
      padding: 6rem 0; } }
  .operation .tab-btn-wrap {
    margin-top: 6rem; }
  .operation .tit-wrap + * {
    margin-top: 1.6rem; }
  .operation .txt-normal + .txt-normal {
    margin-top: 0.8rem; }
  .operation .cont-wrap + .cont-wrap {
    margin-top: 3.2rem; }
  .operation .tit-wrap + .tap-wrap {
    margin-top: 6rem; }
  .operation .tab-btn-wrap + .tab-content {
    margin-top: 6rem; }
  .operation .txt-list li {
    margin-top: 1rem; }
    .operation .txt-list li:first-of-type {
      margin-top: 0; }

.guage-box {
  margin-top: 2.5rem; }
  .guage-box + .cont-wrap {
    margin-top: 2.6rem; }
  .guage-box .top-txt {
    font-size: 1.8rem;
    text-align: center; }
  .guage-box .guage-cont {
    position: relative;
    min-width: 120rem;
    padding-bottom: 2rem; }
    .guage-box .guage-cont::before {
      content: '';
      position: absolute;
      top: -0.7rem;
      left: 9.9rem;
      width: 0.1rem;
      height: 100%;
      background: #222222; }
    .guage-box .guage-cont > li {
      display: flex;
      align-items: center;
      height: 4.1rem;
      margin-top: 3.8rem; }
      .guage-box .guage-cont > li .year {
        font-size: 1.8rem;
        color: #222222;
        font-weight: 500;
        width: 10rem;
        padding-left: 3.8rem; }
      .guage-box .guage-cont > li .guage-bar {
        width: 102rem;
        position: relative;
        height: 100%;
        background: #efefef;
        border-radius: 0 2rem 2rem 0; }
        .guage-box .guage-cont > li .guage-bar .inner {
          position: absolute;
          height: 100%;
          width: 100%; }
          .guage-box .guage-cont > li .guage-bar .inner .detail,
          .guage-box .guage-cont > li .guage-bar .inner .bar {
            display: inline-block;
            vertical-align: middle; }
          .guage-box .guage-cont > li .guage-bar .inner .detail {
            font-size: 1.8rem;
            font-weight: 500;
            padding-left: 2rem; }
          .guage-box .guage-cont > li .guage-bar .inner .bar {
            height: 100%;
            border-radius: 0 2rem 2rem 0; }
  .guage-box.green-style .top-txt {
    color: var(--navy-color); }
  .guage-box.green-style .detail {
    color: var(--navy-color); }
  .guage-box.green-style .guage-cont li:nth-child(1) .bar {
    background: #00CFD8; }
  .guage-box.green-style .guage-cont li:nth-child(2) .bar {
    background: #00A0D4; }
  .guage-box.green-style .guage-cont li:nth-child(3) .bar {
    background: #0096C7; }
  .guage-box.blue-style .top-txt {
    color: #4974a9; }
  .guage-box.blue-style .detail {
    color: #4974a9; }
  .guage-box.blue-style .guage-cont li:nth-child(1) .bar {
    background: #b5c5d9; }
  .guage-box.blue-style .guage-cont li:nth-child(2) .bar {
    background: #7f98ba; }
  .guage-box.blue-style .guage-cont li:nth-child(3) .bar {
    background: #4974a9; }

.program {
  background-color: #F8F8F8;
  padding: 13rem 0; }
  @media (max-width: 767px) {
    .program {
      padding: 6rem 0; } }
  .program .tab-btn-wrap {
    margin-top: 6rem; }
  .program .tit-wrap + * {
    margin-top: 1.6rem; }
  .program .txt-normal + .txt-normal {
    margin-top: 0.8rem; }
  .program .cont-wrap + .cont-wrap {
    margin-top: 3.2rem; }
  .program .tit-wrap + .tap-wrap {
    margin-top: 6rem; }
  .program .tab-btn-wrap + .tab-content {
    margin-top: 6rem; }

.environments {
  padding: 13rem 0;
  background-color: #fff; }
  @media (max-width: 767px) {
    .environments {
      padding: 6rem 0; } }
  .environments .tab-btn-wrap {
    margin-top: 6rem; }
  .environments .tit-wrap + * {
    margin-top: 1.6rem; }
  .environments .txt-normal + .txt-normal {
    margin-top: 0.8rem; }
  .environments .cont-wrap + .cont-wrap {
    margin-top: 3.2rem; }
  .environments .tit-wrap + .tap-wrap {
    margin-top: 6rem; }
  .environments .tab-btn-wrap + .tab-content {
    margin-top: 6rem; }

.smes {
  padding: 13rem 0;
  background-color: #F8F8F8; }
  @media (max-width: 767px) {
    .smes {
      padding: 6rem 0; } }
  .smes .tab-btn-wrap {
    margin-top: 6rem; }
  .smes .tit-wrap + * {
    margin-top: 1.6rem; }
  .smes .txt-normal + .txt-normal {
    margin-top: 0.8rem; }
  .smes .cont-wrap + .cont-wrap {
    margin-top: 3.2rem; }
  .smes .tit-wrap + .tap-wrap {
    margin-top: 6rem; }
  .smes .tab-btn-wrap + .tab-content {
    margin-top: 6rem; }
  .smes .tab-btn-wrap {
    flex-wrap: wrap;
    justify-content: center; }

.dongi_Bani {
  padding: 9.6rem 0;
  background: #F8FAFF; }
  @media (max-width: 767px) {
    .dongi_Bani {
      padding: 0 0 6rem 0; } }
  .dongi_Bani .inner {
    padding: 0 30rem 0 0;
    background: url("../img_en/main/dongi_bani.png") no-repeat right bottom;
    background-size: 26rem auto; }
    @media (max-width: 767px) {
      .dongi_Bani .inner {
        padding: 6rem 0 0 0;
        background-position: right top 2.5rem;
        background-size: 12rem auto; } }
  .dongi_Bani .tit {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    color: #1D1D1D; }
    @media (max-width: 767px) {
      .dongi_Bani .tit {
        font-size: 2.6rem;
        padding-right: 14rem;
        line-height: 1.2; } }
  .dongi_Bani .txt {
    font-size: 2rem;
    color: #606060;
    line-height: 1.4;
    margin-top: 3.6rem; }
    @media (max-width: 767px) {
      .dongi_Bani .txt {
        font-size: 1.6rem; } }

.qr_area {
  padding: 7rem 0; }
  @media (max-width: 767px) {
    .qr_area {
      padding: 5rem 0; } }
  .qr_area .qr-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto; }
    @media (max-width: 767px) {
      .qr_area .qr-wrap {
        gap: 1rem; } }
    .qr_area .qr-wrap a {
      width: 45%;
      max-width: 33rem; }
      @media (max-width: 767px) {
        .qr_area .qr-wrap a {
          width: 50%; } }
      .qr_area .qr-wrap a img {
        width: 100%;
        height: auto; }
  .qr_area .txt {
    font-size: 2rem;
    color: #606060;
    margin-top: 5.3rem;
    text-align: center; }
    @media (max-width: 767px) {
      .qr_area .txt {
        font-size: 1.6rem;
        margin-top: 3.6rem; } }