/* VAR */
:root {

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



/* header */
header.forTemplate .header-top-search {height: 2.5rem; border-radius: 1.25rem; border: 3px solid #cdd1d5; padding: 5px 4px 5px 0;}
header.forTemplate .header-top-search .insert-group {flex: 1;}
header.forTemplate .header-top-search button {width: 1.7rem; height: 1.7rem; border-radius: 50%; background-color: var(--colorUtilBackground); font-size: 0.75rem; color: var(--colorUtilText);}
header.forTemplate .header-top-util button {background-color: var(--colorUtilBackground); color: var(--colorUtilText);}
header.forTemplate .header-bottom {border-top-color: var(--colorMenuBackground); border-bottom-color: var(--colorMenuBackground); 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::before {content: ""; display: block; width: 0%; height: 0.45rem; border-radius: 0.225rem; background-color: rgba(255, 255, 255, 0.5); position: absolute; left: 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::before {width: 100%;}



/* section */
#section04 {z-index: 0;}
#section04::before {content: ""; width: 100vw; height: 100%; background-color: #f8f8f8; position: absolute; left: calc(50% - 50vw); top: 0; z-index: -2;}
#section04::after {content: "";  width: 75vw; height: 54%; border-top-left-radius: 5rem; background: linear-gradient(to right, #fccb24, #ffca9f); position: absolute; right: calc(50% - 50vw); bottom: 0; z-index: -1;}



@media (max-width: 1280px) {

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



@media (max-width: 768px) {

  /* column */
  #column07 .gallery_T01_B1 {padding-top: 1.5rem; padding-bottom: 1rem;}
}