/* VAR */
:root {

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

/* 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 {

  /* size */
  --background-radius: 10rem;
}
main::before {content: ""; display: block; width: 100vw; height: 41.3rem; background: linear-gradient(to bottom, #fff 0%, #fff4c6 100%); position: absolute; left: 50%; top: -6.25rem; transform: translateX(-50%);
  mask-image:
    conic-gradient(from 180deg at var(--background-radius) calc(100% - var(--background-radius)), #0000 25%, #000 0),
    radial-gradient(#000 69.71%, #0000 71.71%),
    radial-gradient(var(--background-radius) at 0 100%, #0000 99%, #000 101%);
  -webkit-mask-position-x:
    0,
    0,
    100%;
  -webkit-mask-position-y:
    calc(var(--background-radius) * -1),
    calc(100% - var(--background-radius)),
    100%;
  mask-size:
    auto,
    calc(var(--background-radius) * 2) calc(var(--background-radius) * 2),
    var(--background-radius) var(--background-radius);
  mask-repeat: no-repeat;
}
main::after {content: ""; width: 335px; height: 186px; background: url('/static/builder/Templates/G07/image/background_bottom.png'); position: absolute; left: calc(50% - 50vw); bottom: 0;}



@media (max-width: 1280px) {

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

    /* size */
    --background-radius: 5rem;
  }
  main::before {width: calc(100% + 0.6rem); height: 32.85rem; left: 0; top: -0.3rem; transform: unset;}
  main::after {width: 207px; height: 168px; background: url('/static/builder/Templates/G07/image/background_bottom_tablet.png');}
}



@media (max-width: 768px) {

  /* main */
  main {

    /* size */
    --background-radius: 2.5rem;
  }
  main::before{width: 100%; height: 32.15rem; top: 0;}
  main::after {display: none;}
}