/* VAR */
:root {

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



/* header */
header.forTemplate .header-top-search {height: 2.5rem; padding-right: 0.2rem; position: relative;}
header.forTemplate .header-top-search::before {content: ""; display: block; width: 100%; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0; z-index: -2;}
header.forTemplate .header-top-search::after {content: ""; display: block; width: 100%; height: 100%; background-color: var(--colorUtilBackground); opacity: 0.05; position: absolute; left: 0; top: 0; z-index: -1;}
header.forTemplate .header-top-search button {width: 1.7rem; height: 1.7rem; border-radius: 0.15rem; background-color: var(--colorUtilBackground); font-size: 0.75rem; color: var(--colorUtilText); margin-left: 0.5rem;}
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.2; 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(--colorMenuTextActive);}
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::before {content: ""; display: block; width: 100vw; height: 17.15rem; border-top-left-radius: 2.5rem; background-color: #f8f8f8; position: absolute; left: calc(50% - 6.8rem); bottom: 0; z-index: -1;}



/* section */
#section01 {z-index: 0;}
#section01::before {content: ""; display: block; width: 9.45rem; height: 11.55rem; background: url('/static/builder/Templates/T08_C1/image/background_left.png') center / contain no-repeat; position: absolute; left: calc(50% - 48rem + 0.8rem); top: 18.4rem; z-index: -1;}
#section01::after {content: ""; display: block; width: 10.1rem; height: 12.6rem; background: url('/static/builder/Templates/T08_C1/image/background_right.png') center / contain no-repeat; position: absolute; right: calc(50% - max(48rem, 50vw)); top: 23rem; z-index: -1;}



@media (max-width: 1280px) {

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

  /* main */
  main::before {width: 36vw; height: calc(var(--columnHeight) + var(--container-gap) + 0.5rem); left: unset; right: 0;}
}



@media (max-width: 768px) {

  /* main */
  main::before {display: none;}

  /* section */
  .custom-section:last-child .custom-column:last-child {position: relative; z-index: 0;}
  .custom-section:last-child .custom-column:last-child::before {content: ""; display: block; width: 70vw; height: calc(100% + (var(--container-gap) * 1.5)); border-top-left-radius: 2.5rem; background-color: #f8f8f8; position: absolute; right: calc(50% - 50vw); bottom: calc(var(--container-gap) * -1); z-index: -1;}
}