/* VAR */
:root {

  /* color : 아래 5개만 사용합니다. 그 이상 넘어갈 경우 디자이너에게 수정 요청해주세요. */
  --colorUtilBackground: #031973;
  --colorUtilText: #fff;
  --colorMenuBackground: #fff;
  --colorMenuText: #111;
  --colorMenuTextActive: #031973;
}



/* header */
header.forTemplate .header-top-search {display: flex; gap: 0.5rem; height: 2.5rem;}
header.forTemplate .header-top-search .insert-group {width: 14.15rem; height: 100%; border: 3px solid #cdd1d5; background-color: #fff;}
header.forTemplate .header-top-search .insert-group select {width: 4rem;}
header.forTemplate .header-top-search .insert-group input {width: calc(100% - 4rem);}
header.forTemplate .header-top-search button {width: 2.5rem; height: 100%; border-radius: 0.25rem; background-color: var(--colorMenuTextActive); font-size: 1rem; color: var(--colorUtilText);}
header.forTemplate .header-top-util button {border-radius: 0.25rem; background-color: var(--colorUtilBackground); color: var(--colorUtilText);}
header.forTemplate .header-bottom {border-top-color: #eeeff1; border-bottom-color: #eeeff1; background-color: var(--colorMenuBackground);}
header.forTemplate .header-bottom-menu .depth-01 > li > a {color: var(--colorMenuText); transition: 0.3s;}
header.forTemplate .header-bottom-menu .depth-01 > li > a span {padding: 0 2px; position: relative; z-index: 0;}
header.forTemplate .header-bottom-menu .depth-01 > li > a span::after {content: ""; display: block; width: 0; height: 0.45em; border-radius: 0.225em; background-color: var(--colorMenuTextActive); opacity: 0.075; position: absolute; right: 0; bottom: 0; z-index: -1; transition: 0.3s;}
/* header : active */
header.forTemplate .header-bottom-menu .depth-01 > li.on > a,
header.forTemplate .header-bottom-menu .depth-01 > li.active > a {color: var(--colorUtilBackground);}
header.forTemplate .header-bottom-menu .depth-01 > li.on > a,
header.forTemplate .header-bottom-menu .depth-01 > li.active > a span::after {width: 100%; left: 0; right: unset;}



/* main */
main {position: relative;}
main::before {content: ''; display: block; width: 100vw; height: 39.6rem; background: linear-gradient(to right, #F4F6FF 100%, #EDF0FF 100%); border-top-left-radius: 7.5rem; position: absolute; bottom: 0; right: 0;}

@media (max-width: 1280px) {

  /* header */
  header.forTemplate .header-util .btn-menu {background-color: var(--colorUtilBackground); color: var(--colorUtilText);}

    /* main */
  main::before {width: 100%; height: calc(var(--columnHeight) * 3.5 + var(--container-gap) * 4); border-top-left-radius: 2.5rem;}
}



@media (max-width: 480px) {

    /* main */
  main::before {height: calc(var(--columnHeight) * 3 + var(--container-gap) * 4);}
}