/* VAR */
:root {

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


                
/* header */
header.forTemplate .header-top-search {height: 2.5rem; border-radius: 1.25rem; background-color: #eef0f2;}
header.forTemplate .header-top-search button {width: 2.5rem; height: 100%; border-radius: 0 1.25rem 1.25rem 0; font-size: 1.1rem; color: var(--colorUtilBackground); margin-left: 0.5rem;}
header.forTemplate .header-top-util button {border-radius: 0.25rem; background-color: var(--colorUtilBackground); color: var(--colorUtilText);}
header.forTemplate .header-bottom {border-top-color: #f6f6f6; 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 {position: relative;}
header.forTemplate .header-bottom-menu .depth-01 > li > a span::after {content: ""; display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; background-color: var(--colorMenuTextActive); position: absolute; right: 0; top: 0.1rem; transform: translate(100%, -100%) scale(0); visibility: hidden; 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::after {transform: translate(100%, -100%) scale(1); visibility: visible;}



/* main */
main {position: relative; z-index: 0; overflow: hidden;}
main::before {content: ""; display: block; width: 100%; height: 27rem; background: url('/static/builder/Templates/T03_B1/image/background_top.png') center / cover no-repeat; position: absolute; left: 0; top: 0; z-index: -1;}
main::after {content: ""; display: block; width: 100%; height: 34.7rem; background: linear-gradient(180deg, #f2f9ff, #fff); position: absolute; left: 0; bottom: -0.65rem; z-index: -1;}



/* section */
#section02 {z-index: 0;}
#section02::before {content: ""; display: block; width: 74px; height: 103px; background: url('/static/builder/Templates/T03_B1/image/background_section02.png'); position: absolute; left: -1.3rem; top: 3.85rem; transform: translate(-100%, -100%); z-index: -1;}
main > .custom-section:last-of-type {z-index: 0;}
main > .custom-section:last-of-type::before {content: ""; display: block; width: 170px; height: 164px; background: url('/static/builder/Templates/T03_B1/image/background_section04.png'); position: absolute; right: -0.25rem; top: 3.75rem; transform: translate(100%, -100%); z-index: -1;}



/* footer */
footer .footer-link-group li a strong {color: var(--colorMenuTextActive);}
footer .footer-info {color: #fff; position: relative; z-index: 0;}
footer .footer-info::before {content: ""; display: block; width: 100%; height: 100%; background-color: #000; position: absolute; left: 0; top: 0; z-index: -2;}
footer .footer-info::after {content: ""; display: block; width: 100%; height: 100%; background-color: var(--colorUtilBackground); position: absolute; left: 0; top: 0; z-index: -1; opacity: 0.6;}
footer .footer-info-address {color: inherit;}
footer .footer-info-group {opacity: 0.8;}
footer .footer-info-copyright {opacity: 0.6;}
footer .footer-info-top::after {background-color: rgba(255, 255, 255, 0.1);}



@media (max-width: 1280px) {

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

  /* main */
  main::before {height: calc(((100vw - (var(--container-gap) / 3 * 4)) * 0.5) + var(--container-gap));}
  main::after {display: none;}

  /* section */
  #section02::before {display: none;}
  main > .custom-section:nth-last-of-type(2) {z-index: 1;}
  main > .custom-section:nth-last-of-type(2)::after {content: ""; display: block; width: 100vw; height: calc(100% + (var(--container-gap) * 1.25)); background: linear-gradient(180deg, #f2f9ff, #f9fcff); position: absolute; left: 0; top: calc(var(--container-gap) * -0.5); z-index: -1;}
  main > .custom-section:last-of-type::before {display: none;}
  main > .custom-section:last-of-type::after {content: ""; display: block; width: 100vw; height: calc(100% + (var(--container-gap) * 1.25)); background: linear-gradient(180deg, #f9fcff, #fff); position: absolute; left: 0; bottom: calc(var(--container-gap) * -1); z-index: -1;}
}



@media (max-width: 768px) {

  /* main */
  main::before {height: calc(((100vw - (var(--container-gap) / 3 * 4)) * 0.4) + var(--container-gap));}
}