@import url('./pretendardvariable-gov.css');
@import url('./normarlize.css');

:root {
  --bg-color-body: #fff;

  --color-korail-blue: #0569F8;
  --color-korail-blue-hover: #3085FA;
  --color-text-navy: #183B56;
  --color-text-gray: #818181;
  --color-bg-blue: #1565D8;

  --content-max-width: 1182px;
  --content-max-width-padding: 24px;
  --content-min-height: 667px;

  --breakpoint-mobile: 1179px;

  --header-height: 100px;
  --header-logo-height: 34px;

  --size-font-head: 28px;
  --size-font-body: 20px;

  --leading-font-body: 28px;

  --grid-gap: 42px;

  --card-border-radius: 15px;
  --card-content-gap: 25px;
  --card-padding: 35px 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Pretendard GOV Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: var(--bg-color-body);
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/************
 * HUB MAIN
 ************/
.hub-main {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column nowrap;
  height: 100vh;
  min-height: var(--content-min-height);
  min-width: 320px;
}

/*******************
 * HUB MAIN HEADER
 *******************/
.hub-main-header {
  width: 100%;
  max-width: var(--content-max-width);
  padding: 0 var(--content-max-width-padding);
  flex: 0 0 var(--header-height);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hub-main-header .logo {
  display: inline-flex;
}

.hub-main-header .logo img {
  height: var(--header-logo-height);
  display: block;
}

/********************
 * HUB MAIN CONTENT
 ********************/
.hub-main-content {
  max-width: var(--content-max-width);
  padding: 0 var(--content-max-width-padding);
  margin-top: 235px;
  margin-bottom: auto;
}

/******************
 * HUB ITEM GROUP
 ******************/
.hub-item-group {
  display: grid;
  grid-template-columns: repeat(3, 350px);
  gap: var(--grid-gap);

}

.hub-item-group .hub-item {
  background: white;
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #E5EAF4;
}

.hub-item-group .hub-item-img > img {
  height: 64px;
  margin-bottom: var(--card-content-gap);
}

.hub-item-group .hub-item h2 {
  font-size: var(--size-font-head);
  color: var(--color-text-navy);
  margin: 0;
  margin-bottom: var(--card-content-gap);

}

.hub-item-group .hub-item span {
  font-size: var(--size-font-body);
  color: var(--color-text-gray);
  line-height: var(--leading-font-body);
  margin-bottom: var(--card-content-gap);
}

.hub-item-group .hub-item span strong {
  color: var(--color-korail-blue);
}

.hub-item-group .hub-item a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: var(--color-korail-blue);
  font-size: var(--size-font-body);
  line-height: normal;
  padding: 13px 13px 11px;
  width: 155px;
  height: 48px;
  border-radius: 8px;
}

.hub-item-group .hub-item a:hover {
  background: var(--color-korail-blue-hover);
}

/**********************
 * HUB ITEM 
 **********************/
.hub-item-img {
  position: relative;
}

.hub-item-badge-new {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -4px;
  margin-right: -3px;
}

.hub-item-badge-new img {
  max-width: 100%;
}

/*****************
 * HUB MAIN DECO
 *****************/
.hub-main-deco-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.hub-main-deco-bg > img {
  object-fit: contain;
  object-position: top center;
}

.hub-main-deco-bg .__desktop {
  display: block;
}

.hub-main-deco-bg .__mobile {
  display: none;
}

/* 20241030 변경 */

.hub-item-group .hub-item-gy {
  background: #F1F6FD;

}
.hub-item-badge-beta {
  display: inline-block;
}
.hub-item-badge-beta img {
  vertical-align: bottom;
}

/* 20241104 변경 */
.hub-item-group .hub-item .hub-item-bn a {width: 145px;}
.hub-item-group .hub-item .hub-item-bn a:first-child {background-color: #F1F6FD;border: 1px solid #0569F8;color: #0569F8;}
.hub-item-group .hub-item .hub-item-bn a:first-child:hover{background-color: #d9e4f7;}

/* 20241218 대수송 배너 추가 */
.hub_bn .__desktop {
  display: block;
}

.hub_bn .__mobile {
  display: none;
}
.hub_bn img {
  width: 100%;
  margin-bottom: 35px;
}
.hub-main-content {
  margin-top: 100px;
}


/***************
 * MEDIA QUERY
 ***************/
@media screen and (max-width: 1179px) {
  :root {
    --bg-color-body: #0D4AA2;

    --grid-gap: 13px;

    --card-padding: 13px 7px;
    --card-content-gap: 18px;

    --size-font-head: 20px;
    --size-font-body: 16px;

    --leading-font-body: normal;

    --header-height: 64px;
    --header-logo-height: 21px;

    --content-max-width: 360px;
    --content-max-width-padding: 16px;
    --content-min-height: 0;
  }

  .hub-main-content {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 64px;
  }

  .hub-item-group {
    grid-template-columns: repeat(1, minmax(0, 325px));
  }

  .hub-item-group .hub-item-img > img {
    height: 40px;
    margin-bottom: 10px;
  }

  .hub-item-badge-new {
    width: 24px;
  }

  .hub-item-group .hub-item a {
    max-width: 140px;
    height: 40px;
  }

  .hub-main-deco-bg .__desktop {
    display: none;
  }

  .hub-main-deco-bg .__mobile {
    display: block;
  }

  /* 20241218 대수송 배너 추가 */
  .hub_bn .__desktop {
    display: none;
  }
  
  .hub_bn .__mobile {
    display: block;
  }
  .hub_bn img {
    margin-bottom: 10px;
  }
}