html,
body {
  font-family: 'Noto Sans KR', 'Sans-serif';
}

/* hd S */

#gnb > ul > li:nth-of-type(4) > a {
  font-weight: 500;

  border-bottom: 1px solid #fff;
}

#hd.on > #gnb > ul > li:nth-of-type(4) > a {
  border-bottom: 1px solid var(--dark);
}

/* hd E */

/* banner S */

.banner {
  position: relative;

  width: 100%;

  height: 100vh;

  background-image: url(/images/partners/partnersbg.jpg);

  background-size: cover;

  background-position: center;
}

.banner::after {
  /* filter: brightness(.6); */

  display: block;

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.15);
}

.banner .banner_cover {
  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 0;
}

.banner .container {
  position: relative;

  height: 100%;
}

.banner .container h2 {
  position: absolute;

  bottom: 10%;

  left: 50%;

  transform: translateX(-50%);

  color: #fff;

  z-index: 2;
}

/* banner E */

/* common S*/

.main_itr {
  margin-bottom: 48px;
}

.main_itr h2 {
  margin-bottom: 24px;
}

.tit_line {
  width: 65px;

  height: 6px;

  background: var(--gray_dark);

  margin-bottom: 24px;
}

.main_itr h5 {
  font-weight: 500;

  color: #4b4b57;
}

/* common S*/

/* partner S */

.logos {
  width: 100%;
}

.logos ul {
  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  width: 100%;
}

.logos ul li {
  position: relative;

  width: calc(100% / 4);

  height: 130px;
}

.logo_wrap {
  position: absolute;

  top: 0;

  left: 0;

  width: calc(100% - 9px);

  height: calc(100% - 9px);

  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

.logo_wrap > h4 {
  word-break: keep-all;
}

:lang(en) .logo_wrap > h4 {
  line-height: 20px;
}

.logo_company {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transition: all 0.3s;
}

.logo_01 {
  background-image: url(/images/partners/logo_Bugs.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 35%;
}

.logo_02 {
  background-image: url(/images/partners/logo_kt.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 35%;
}

.logo_03 {
  background-image: url(/images/partners/logo_hancomfrontis.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 55%;
}

.logo_04 {
  background-image: url(/images/partners/logo_mvirtual.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_05 {
  background-image: url(/images/partners/logo_skiyaki.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_06 {
  background-image: url(/images/partners/logo_mij.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_07 {
  background-image: url(/images/partners/logo_chorokbaem.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 50%;
}

.logo_08 {
  background-image: url(/images/partners/logo_funnel.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 45%;
}

.logo_09 {
  background-image: url(/images/partners/logo_riak.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_10 {
  background-image: url(/images/partners/logo_mindventures.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_11 {
  background-image: url(/images/partners/logo_worldstar.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 45%;
}

.logo_12 {
  background-image: url(/images/partners/logo_creatory.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_13 {
  background-image: url(/images/partners/logo_wips.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 45%;
}

.logo_14 {
  background-image: url(/images/partners/logo_obs.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 45%;
}

.logo_15 {
  background-image: url(/images/partners/logo_k-diaspora.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_16 {
  background-image: url(/images/partners/logo_ssu.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_17 {
  background-image: url(/images/partners/logo_HNU.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_18 {
  background-image: url(/images/partners/logo_chosun.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 50%;
}

.logo_19 {
  background-image: url(/images/partners/logo_publish.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 60%;
}

.logo_20 {
  background-image: url(/images/partners/logo_blockchaintoday.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_21 {
  background-image: url(/images/partners/logo_etnews.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_22 {
  background-image: url(/images/partners/logo_KIPJA.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 70%;
}

.logo_23 {
  background-image: url(/images/partners/logo_neopin.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_24 {
  background-image: url(/images/partners/logo_ZETTAVENTURES.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 50%;
}

.logo_25 {
  background-image: url(/images/partners/logo_captains.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_26 {
  background-image: url(/images/partners/logo_snk.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 55%;
}

.logo_27 {
  background-image: url(/images/partners/logo_aegisecu.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 55%;
}

.logo_28 {
  background-image: url(/images/partners/logo_saeraon.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 50%;
}

.logo_29 {
  background-image: url(/images/partners/logo_nowonarts.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 55%;
}

.logo_30 {
  background-image: url(/images/partners/logo_gacf.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_31 {
  background-image: url(/images/partners/logo_KPWA.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_32 {
  background-image: url(/images/partners/logo_DainLeaders.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_33 {
  background-image: url(/images/partners/logo_metaplanet.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 50%;
}

.logo_34 {
  background-image: url(/images/partners/logo_metatao.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_35 {
  background-image: url(/images/partners/logo_DAEK.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_36 {
  background-image: url(/images/partners/logo_Rollinghall.png);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 65%;
}

.logo_wrap h4 {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.4);

  color: var(--white);

  text-align: center;

  padding-top: 45px;

  transition: all 0.3s;

  opacity: 0;

  cursor: pointer;

  font-size: var(--font_size_pc_h6);
}

:lang(en) .logo_wrap h4,
:lang(zh-CN) .logo_wrap h4 {
  line-height: 20px;
}

.logo_txt_line {
  width: 35px;

  border-top: var(--white) 3px solid;

  margin: auto;

  margin-bottom: 5px;
}

.non_visiable {
  opacity: 0;
}

.non_visiable h4 {
  cursor: default;
}

@media screen and (min-width: 768px) {
  .logos li:hover .logo_company {
    filter: blur(5px);
  }

  .logos li:hover .logo_wrap h4 {
    opacity: 1;
  }
}

/* partner E */

/* sourcing S */

.wrap_sourcing {
  position: relative;

  height: 200vh;

  width: 100%;

  background-color: var(--white);
}

.wrap_sourcing h5 {
  font-weight: 500;
}

.sourcing_contents {
  position: relative;

  height: 100vh;

  width: 100%;

  overflow: hidden;
}

.wrap_sourcing .global_graph {
  position: absolute;

  top: 30px;

  right: 0;

  height: 85%;

  width: 70%;

  max-width: 1400px;
}

.wrap_sourcing .global_graph img:nth-child(1) {
  position: absolute;

  bottom: 0;

  right: 0;

  width: 100%;
}

.wrap_sourcing .global_graph img:nth-child(2) {
  position: absolute;

  bottom: 10px;

  right: 24%;

  width: 47.5%;

  opacity: 0;

  transform: translateY(100px);

  transition: all 1s;
}

.wrap_sourcing .container {
  position: relative;

  height: 264px;

  padding-bottom: 0;
}

:lang(ko).wrap_sourcing .global_graph {
  position: absolute;

  top: 30px;

  right: 0;

  height: 85%;

  width: 50%;
}

.wrap_graph {
  overflow: hidden;
}

.graph_tit {
  position: absolute;

  top: 180px;

  left: 0;

  transition: all 0.5s;
}

.wrap_graph {
  position: sticky;

  top: 0;

  left: 0;

  height: 50%;

  overflow-y: hidden;
}

.graph_bg {
  position: absolute;

  top: 0;

  right: -250px;

  width: 100%;

  height: 100%;
}

.wrap_graph > .container {
  height: 100%;

  color: var(--black);
}

.graph {
  position: absolute;

  bottom: 0;

  right: 0;

  width: 50%;

  height: 900px;

  margin-bottom: 50px;

  display: flex;

  align-items: flex-end;

  justify-content: flex-end;

  opacity: 0;

  transition: all 0.5s;

  transform: translateY(100px);
}

.graph_txt {
  min-height: 50%;

  width: 30%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;
}

.graph_txt > div {
  margin-bottom: 20px;

  position: relative;

  border-top: 1px solid var(--black);

  font-size: var(--font_size_pc_body1);

  font-weight: 500;

  line-height: var(--line_height_pc_body1);

  letter-spacing: var(--letter_spacing_pc_body1);
}

:lang(zh-CN) .graph_txt > div p {
  word-break: break-all;
}

.graph_txt > div p:nth-child(2) {
  font-size: var(--font_size_pc_body2);

  font-weight: 500;

  line-height: var(--line_height_pc_body2);

  letter-spacing: var(--letter_spacing_pc_body2);

  color: var(--gray_dark);
}

.graph_txt_01::after {
  content: '';

  position: absolute;

  top: -20px;

  right: 0;

  width: 0.5px;

  height: calc(100% + 20px);

  background: var(--black);
}

.graph_txt_02 {
  height: 150px;

  margin-top: 50px;
}

.graph_txt_02::after {
  content: '';

  position: absolute;

  top: -30px;

  right: 0;

  width: 0.5px;

  height: calc(100% + 50px);

  background: var(--black);
}

.graph_percent {
  height: 100%;

  width: 70%;

  display: flex;

  justify-content: flex-end;

  align-items: flex-end;
}

.graph_percent > div {
  width: 50%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;
}

.graph_percent_2021 {
  position: relative;

  height: 50%;
}

.graph_percent_2021::before {
  content: '2022';

  position: absolute;

  top: -30px;

  left: 0;

  width: 100%;

  text-align: center;
}

.graph_percent_2021::after {
  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  height: 100%;

  width: 70px;

  background: linear-gradient(180deg, #b5befc 0%, rgba(255, 255, 255, 0) 100%);

  z-index: -1;
}

.graph_percent_2021 span {
  width: 70px;

  margin: auto;

  border-bottom: dotted 1px #fff;

  word-wrap: normal;

  overflow: visible;
}

.graph_percent_2021 span p {
  transform: translateX(30px);

  width: 100px;
}

.graph_percent_2021 span:nth-child(1) {
  padding-top: 30%;

  height: 31%;
}

.graph_percent_2021 span:nth-child(2) {
  padding-top: 20%;

  height: 20%;
}

.graph_percent_2021 span:nth-child(3) {
  padding-top: 17%;

  height: 17%;
}

.graph_percent_2021 span:nth-child(4) {
  padding-top: 16%;

  height: 16%;
}

.graph_percent_2021 span:nth-child(5) {
  padding-top: 16%;

  height: 16%;
}

.graph_percent_2022 {
  position: relative;

  height: 70%;
}

.graph_percent_2022::before {
  content: '2023';

  position: absolute;

  top: -30px;

  left: 0;

  width: 100%;

  text-align: center;
}

.graph_percent_2022::after {
  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  height: 100%;

  width: 70px;

  background: linear-gradient(
    180deg,
    #2136b9 0%,

    rgba(255, 255, 255, 0.1) 100%
  );

  z-index: -1;
}

.graph_percent_2022 span {
  width: 70px;

  margin: auto;

  border-bottom: dotted 1px #fff;

  word-wrap: normal;

  overflow: visible;
}

.graph_percent_2022 span p {
  width: 100px;

  transform: translateX(35px);
}

.graph_percent_2022 span:nth-child(1) {
  padding-top: 55%;

  height: 37%;
}

.graph_percent_2022 span:nth-child(2) {
  padding-top: 23%;

  height: 17%;
}

.graph_percent_2022 span:nth-child(3) {
  padding-top: 15%;

  height: 13%;
}

.graph_percent_2022 span:nth-child(4) {
  padding-top: 13%;

  height: 11%;
}

.graph_percent_2022 span:nth-child(5) {
  padding-top: 22%;

  height: 22%;
}

.wrap_sourcing .container .global_txt {
  position: absolute;

  top: 120px;

  left: 0;

  width: 100%;

  height: 144px;

  color: #fff;
}

.global_txt_01 {
  opacity: 1;

  transition: all 1s;
}

.global_txt_02 {
  opacity: 0;

  transition: all 1s;
}

.wrap_sourcing .container .global_txt h2 {
  margin-bottom: 24px;
}

.wrap_sourcing .container .global_txt h5 {
  font-weight: 500;
}

/* sourcing E */

/* strategy S */

.sec_strategy > .container {
  padding-bottom: 0;
}

/* cards S */

.wrap_cards {
  display: flex;
}

.wrap_cards > div {
  position: relative;

  width: 34%;

  height: 570px;

  overflow: hidden;
}

.wrap_cards > div > img {
  min-width: 100%;

  min-height: 100%;
}

.wrap_cards > div > .card_cover {
  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);
}

.wrap_cards > div > .card_txt {
  width: 100%;

  color: #fff;

  text-align: center;

  transition: all 1s;

  transform: translate(-50%, 60%);

  opacity: 0;
}

.wrap_cards > div > .card_txt h2 {
  margin-bottom: 48px;
}

.wrap_cards > div > .card_txt p {
  font-size: var(--font_size_pc_body1);

  line-height: var(--line_height_pc_body1);

  letter-spacing: var(--letter_spacing_pc_body1);
}

/* cards E */

/* strategy E */