/* VAR */
:root {

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



/* header */
header.forTemplate .header-top-search {height: 2.5rem;}
header.forTemplate .header-top-search .insert-group {border-radius: 1.25rem; border: 3px solid #cdd1d5;}
header.forTemplate .header-top-search button {width: 2.5rem; height: 100%; border-radius: 50%; background-color: var(--colorUtilBackground); font-size: 1rem; color: var(--colorUtilText); margin-left: 0.5rem;}
header.forTemplate .header-top-util button {background-color: var(--colorUtilBackground); color: var(--colorUtilText);}
header.forTemplate .header-bottom {background-color: var(--colorMenuBackground);}
header.forTemplate .header-bottom-menu .depth-01 > li > a {color: var(--colorMenuText);}
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::before {content: ""; display: block; width: 0%; height: 0.45em; border-radius: 0.225em; background-color: var(--colorMenuTextActive); position: absolute; left: 0; bottom: 0; z-index: -1; opacity: 0.3; 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 span::before {width: 100%;}



/* main */
main {background: url('/static/builder/Templates/T02_D1/image/background_bottom_pc.png') center bottom / contain no-repeat; padding-bottom: var(--container-gap); position: relative; z-index: 0;}
main::before {content: ""; display: block; width: 479px; height: 334px; background: url('/static/builder/Templates/T02_D1/image/background_left.png'); position: absolute; left: 0; top: 375px; z-index: -1;}
main::after {content: ""; display: block; width: 206px; height: 288px; background: url('/static/builder/Templates/T02_D1/image/background_right.png'); position: absolute; right: 0; top: 400px; z-index: -1;}
main .custom-section:last-child {margin-bottom: 0;}



/* footer */
footer {border-top: 1px solid #f1f1f1;}



@media (max-width: 1280px) {

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

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