/* VAR */
:root {

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



/* header */
header.forGoverment .header-top-search {display: flex; width: 25rem; height: 3rem; border-radius: 1.5rem; border-width: 2px; border-style: solid; border-top-color: var(--colorUtilBackground); border-right-color: var(--colorUtilBackground); border-bottom-color: var(--colorUtilBackground); border-left-color: var(--colorUtilBackground); padding: 0.3rem; padding-left: 1.5rem;}
header.forGoverment .header-top-search input {flex: 1;}
header.forGoverment .header-top-search button {flex-shrink: 0; width: 2.3rem; height: 100%; font-size: 1.2rem; color: var(--colorUtilBackground);}
header.forGoverment .header-bottom {background-color: var(--colorMenuBackground);}
header.forGoverment .header-bottom-menu .depth-01 > li > a {color: var(--colorMenuText); transition: 0.3s;}
header.forGoverment .btn-fullMenu-open {background-color: var(--colorMenuTextActive);}

/* header : active */
header.forGoverment .header-bottom-menu .depth-01 > li.on > a,
header.forGoverment .header-bottom-menu .depth-01 > li.active > a {color: var(--colorMenuTextActive); font-weight: 700;}



/* main */
main::before {content: ""; display: block; width: 24.75rem; height: 24.75rem; background: url('/static/builder/Templates/G11/image/background_circle.png') center / contain no-repeat; position: absolute; left: -6.35rem; top: -8.75rem; z-index: -1; transition: 0.3s;}
main::after {content: ""; display: block; width: 96.875%; height: calc((var(--columnHeight) * 0.5) + var(--container-gap)); border-top-left-radius: 9.5rem; background: linear-gradient(to right, #e8f4ea, #e0f8f6); position: absolute; right: 0; bottom: 0; z-index: -1; transition: 0.3s;}



/* section */
#section02 {position: relative; z-index: 0;}
#section02::before {content: ""; display: block; width: 100vw; height: calc((100% + var(--container-gap)) / 2); background: linear-gradient(to right, #fff6e9 41%, #ffe9df 86%, #ffe5dd 98%); position: absolute; left: calc(50% - 50vw); bottom: calc(var(--container-gap) * -0.5); z-index: -1; transition: 0.3s;}



@media (max-width: 1280px) {

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

  /* main */
  main::before {width: 22rem; height: 22rem; left: -8.3rem; top: -7.6rem;}
  main::after {width: 100%; border-top-left-radius: 4rem;}

  /* section */
  #section02::before {height: 56%; bottom: 0;}
}



@media (max-width: 768px) {

  /* main */
  main::before {display: none;}
  main::after {height: 6.8rem;}

  /* section */
  #section02::before {height: calc((100% + var(--container-gap)) / 2); bottom: calc(var(--container-gap) * -0.5);}
}