/* VAR */
:root {

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


/* header */
header.forTemplate .header-top-search {height: 2.5rem; border-radius: 0; background-color: #F0F0F0;}
header.forTemplate .header-top-search button {display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 0; font-size: 0.8rem; background-color: var(--colorUtilBackground); border-radius: 50%; color: var(--colorUtilText); margin-left: 0.5rem; margin-right: 0.3rem;}
header.forTemplate .header-top-util button {border-radius: 0.25rem; 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;}



/* section */
#section01,
#section02 {position: relative;}
#section01::before {content: ''; display: block; width: 100%; height: 30rem; background-color: #FFF1DD; position: absolute; top: calc(var(--container-gap) * -1); right: calc(60.6% - var(--container-gap)); z-index: -1;}
#section02::before {content: ''; display: block; width: 300%; height: 29.1rem; background-color: #F0E9DB; position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); z-index: -1;}

@media (max-width: 1280px) {
  
  /* section */
  #section01::before {display: none;}
  #section02::before {height: 23.5rem; top: unset; bottom: -0.75rem;}

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

@media (max-width: 768px) {
  
  /* section */
  #section02::before {display: none;}
  #section02 [data-gjs-type="column-wrap"] {position: relative;}
  #section02 [data-gjs-type="column-wrap"]::before {content: ""; display: block; width: 100vw; height: calc(100% + var(--container-gap)); background-color: #e6f4f2; position: absolute; left: calc(50% - 50vw); top: calc(var(--container-gap) * -0.5); z-index: -1;}
}