/* VAR */
:root {

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

/* header */
header.forTemplate .header-top-search {height: 2.5rem; border-radius: 1.25rem; background-color: #F5F5F5;}
header.forTemplate .header-top-search button {width: 2.5rem; height: 100%; border-radius: 0 1.25rem 1.25rem 0; font-size: 1.1rem; color: #121212; margin-left: 0.5rem;}
header.forTemplate .header-top-util button {border-radius: 1.5rem; background-color: var(--colorUtilBackground); color: var(--colorUtilText);}
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 {position: relative; z-index: 0;}
header.forTemplate .header-bottom-menu .depth-01 > li > a span::before {content: ""; display: block; width: 0; height: 0.45rem; border-radius: 0.225rem; background-color: var(--colorMenuTextActive); position: absolute; right: -0.1rem; bottom: 0; z-index: -1; opacity: 0; 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::before {width: calc(100% + 0.2rem); right: unset; left: -0.1rem; opacity: 0.2;}

/* main */
main {position: relative; z-index: 0;}
main::after { content: ''; display: block; width: 100vw; height: 711px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 60%), url('/static/builder/Templates/T14_B2/image/background_bottom.png') no-repeat; background-size: cover; background-position: center bottom; }

/* section */
#section01 {position: relative; z-index: 0;}
#section01::before {content: ''; display: block; width: 65%; height: 364px; background: url('/static/builder/Templates/T14_B2/image/section_0101.png') right top / contain no-repeat; position: absolute; top: calc(var(--container-gap) * -0.5); left: 0; transform: translateX(-25%); z-index: -1;}
#section01::after {content: ''; display: block; width: 60.5%; height: 360px; background: url('/static/builder/Templates/T14_B2/image/section_0102.png') right bottom / contain no-repeat; position: absolute; bottom: 0; left: 0; transform: translateX(-10%); z-index: 1;}


@media (max-width: 1280px) {

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

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