/* VAR */
:root {

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



/* header */
header.forTemplate .header-top-search {gap: 0.5rem; height: 2.5rem;}
header.forTemplate .header-top-search .insert-group {width: 14.15rem; height: 100%; border-radius: 1.25rem; background-color: #ededed;}
header.forTemplate .header-top-search .insert-group select {width: 4rem; border-radius: 1.25rem 0 0 1.25rem;}
header.forTemplate .header-top-search .insert-group input {width: calc(100% - 4rem); border-radius: 0 1.25rem 1.25rem 0;}
header.forTemplate .header-top-search button {width: 2.5rem; height: 100%; border-radius: 50%; background-color: var(--colorUtilBackground); font-size: 1rem; 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.2); 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%;}



/* main */
main {position: relative;}
main::before {content: ""; display: block; width: calc(50% + 45.15rem); height: 44.35rem; border-top-right-radius: 22.175rem; background-color: #fff6cf; position: absolute; left: 0; bottom: 0; z-index: -2;}
main::after {content: ""; display: block; width: 198px; height: 293px; background: url('/static/builder/Templates/T07_B1/image/background_icn01.png') center bottom / contain no-repeat; position: absolute; left: calc(50% - 46.1rem); bottom: 40.4rem; z-index: -1;}
main > .custom-section {z-index: 0;}
main > .custom-section:last-child::after {content: ""; display: block; width: 226px; height: 204px; background: url('/static/builder/Templates/T07_B1/image/background_icn02.png') center bottom / contain no-repeat; position: absolute; right: calc(var(--container-gap) - 12.1rem); bottom: calc((var(--container-gap) * -1) + 0.25rem); z-index: -1;}



/* section */
#section01 {z-index: 1;}
#section02 {position: relative;}
#section02::before {content: ""; display: block; width: 26.8rem; height: 26.8rem; border-radius: 50%; border: 6rem solid rgba(235, 238, 255, 0.5); position: absolute; left: var(--container-gap); top: 0; transform: translate(-60.26%, -58.4%); z-index: -1;}
#section02::after {content: ""; display: block; width: 19.7rem; height: 19.7rem; border-radius: 50%; border: 5rem solid rgba(253, 234, 184, 0.3); position: absolute; right: var(--container-gap); bottom: 0; transform: translate(75.38%, 17.51%); z-index: -1;}
#section03::after {content: ""; display: block; width: 129px; height: 216px; background: url('/static/builder/Templates/T07_B1/image/background_icn03.png') center / contain no-repeat; position: absolute; right: calc(var(--container-gap) - 10.75rem); top: -1.45rem; z-index: -1;}



@media (max-width: 1280px) {

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

  /* main */
  main::before,
  main::after,
  main > .custom-section:last-child::after {display: none;}

  /* section */
  #section02::before,
  #section02::after {display: none;}
  #section03::before {content: ""; width: 100vw; height: calc(((100% - var(--container-gap)) / 4) + var(--container-gap)); background-color: #fff6cf; position: absolute; left: calc(50% - 50vw); bottom: calc(var(--container-gap) * -1); z-index: -1;}
  #section03::after {display: none;}
  #section03 ~ .custom-section {position: relative;}
  #section03 ~ .custom-section::before {content: ""; width: 100vw; height: calc(100% + var(--container-gap)); background-color: #fff6cf; position: absolute; left: calc(50% - 50vw); bottom: calc(var(--container-gap) * -1); z-index: -1;}
}