/* =========================================================
   GILDONGSEKKI SUBPAGE HERO V1
========================================================= */

.gs-subhero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;

  min-height:330px;

  background:
    radial-gradient(
      circle at 76% 38%,
      rgba(232,203,137,.24) 0,
      rgba(232,203,137,.10) 18%,
      rgba(232,203,137,0) 42%
    ),
    radial-gradient(
      circle at 92% 5%,
      rgba(118,151,112,.17) 0,
      rgba(118,151,112,0) 34%
    ),
    linear-gradient(
      115deg,
      #eef3e9 0%,
      #f6f2e6 52%,
      #efe7d2 100%
    ) !important;

  border-bottom:
    1px solid
    rgba(119,104,74,.16) !important;
}


/* 기존 내용은 장식보다 위 */

.gs-subhero > *:not(.gs-subhero-visual){
  position:relative;
  z-index:3;
}


/* 아주 옅은 배경 패턴 */

.gs-subhero::before{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-85px;
  top:-150px;

  border:
    1px solid
    rgba(73,103,79,.08);

  border-radius:50%;

  box-shadow:
    0 0 0 45px rgba(73,103,79,.025),
    0 0 0 90px rgba(73,103,79,.018);

  pointer-events:none;

  z-index:0;
}


.gs-subhero::after{
  content:"GILDONGSEKKI";

  position:absolute;

  right:34px;
  bottom:13px;

  color:
    rgba(55,78,62,.055);

  font-family:
    Georgia,
    serif;

  font-size:38px;
  font-weight:700;

  letter-spacing:.19em;

  white-space:nowrap;

  pointer-events:none;

  z-index:0;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.gs-subhero-visual{
  position:absolute;

  right:max(6vw,70px);
  top:50%;

  width:285px;
  height:245px;

  transform:
    translateY(-50%);

  display:flex;

  align-items:center;
  justify-content:center;

  z-index:2;

  pointer-events:none;
}


.gs-subhero-emblem-bg{
  position:absolute;

  left:50%;
  top:50%;

  width:220px;
  height:220px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      rgba(255,255,255,.84) 0%,
      rgba(249,243,222,.58) 46%,
      rgba(219,226,206,.34) 100%
    );

  border:
    1px solid
    rgba(118,104,73,.12);

  box-shadow:
    0 18px 45px
    rgba(64,77,60,.08),
    inset 0 0 30px
    rgba(255,255,255,.48);
}


.gs-subhero-image{
  position:relative;

  display:block;

  width:190px;
  height:190px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 9px 13px
      rgba(67,54,32,.17)
    );

  z-index:2;
}


/* =========================================================
   FLOATING TAGS
========================================================= */

.gs-subhero-tag{
  position:absolute;

  display:inline-flex;

  align-items:center;

  min-height:29px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(67,92,72,.15);

  border-radius:999px;

  background:
    rgba(255,255,255,.68);

  color:#607066;

  font-family:
    Arial,
    "Noto Sans KR",
    sans-serif;

  font-size:8px;
  font-weight:800;

  letter-spacing:.08em;

  box-shadow:
    0 5px 16px
    rgba(52,68,56,.06);

  -webkit-backdrop-filter:
    blur(7px);

  backdrop-filter:
    blur(7px);

  z-index:3;
}


.gs-subhero-tag-one{
  left:-5px;
  bottom:33px;
}


.gs-subhero-tag-two{
  right:-4px;
  top:35px;
}


/* =========================================================
   FARM
   업로드 버튼과 겹치지 않게 조금 왼쪽
========================================================= */

.gs-subhero[data-gs-page="farm"]
.gs-subhero-visual{
  right:22%;
}


.gs-subhero[data-gs-page="farm"]
.farm-photo-upload-button{
  position:relative;

  z-index:5;
}


/* =========================================================
   PAGE-SPECIFIC TINT
========================================================= */

.gs-subhero[data-gs-page="members"]{
  background:
    radial-gradient(
      circle at 77% 40%,
      rgba(224,192,119,.22),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      #edf3e9 0%,
      #f7f3e9 58%,
      #eee5d1 100%
    ) !important;
}


.gs-subhero[data-gs-page="live"]{
  background:
    radial-gradient(
      circle at 77% 40%,
      rgba(218,139,111,.16),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      #edf2e8 0%,
      #f7f1e7 58%,
      #eee4d2 100%
    ) !important;
}


.gs-subhero[data-gs-page="farm"]{
  background:
    radial-gradient(
      circle at 69% 40%,
      rgba(126,161,103,.20),
      transparent 37%
    ),
    linear-gradient(
      115deg,
      #eaf2e6 0%,
      #f6f2e5 58%,
      #eee5d2 100%
    ) !important;
}


.gs-subhero[data-gs-page="play"]{
  background:
    radial-gradient(
      circle at 77% 40%,
      rgba(222,178,94,.19),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      #edf2e7 0%,
      #f7f1e4 57%,
      #ede2ca 100%
    ) !important;
}


.gs-subhero[data-gs-page="community"]{
  background:
    radial-gradient(
      circle at 77% 40%,
      rgba(171,141,97,.18),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      #edf2e8 0%,
      #f7f2e8 58%,
      #eee4d1 100%
    ) !important;
}


/* =========================================================
   DESKTOP 125% MODE 대응
========================================================= */

@media(min-width:1200px){

  .gs-subhero{
    min-height:325px;
  }


  .gs-subhero-visual{
    width:270px;
    height:230px;
  }


  .gs-subhero-emblem-bg{
    width:205px;
    height:205px;
  }


  .gs-subhero-image{
    width:178px;
    height:178px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

  .gs-subhero-visual{
    right:35px;

    width:220px;
    height:210px;
  }


  .gs-subhero-emblem-bg{
    width:178px;
    height:178px;
  }


  .gs-subhero-image{
    width:155px;
    height:155px;
  }


  .gs-subhero[data-gs-page="farm"]
  .gs-subhero-visual{
    right:180px;
  }


  .gs-subhero::after{
    font-size:26px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .gs-subhero{
    min-height:auto;

    padding-top:45px !important;
    padding-bottom:42px !important;
  }


  .gs-subhero-visual{
    right:-25px;
    top:50%;

    width:150px;
    height:150px;

    opacity:.20;
  }


  .gs-subhero[data-gs-page="farm"]
  .gs-subhero-visual{
    right:-25px;
  }


  .gs-subhero-emblem-bg{
    width:140px;
    height:140px;
  }


  .gs-subhero-image{
    width:125px;
    height:125px;
  }


  .gs-subhero-tag{
    display:none;
  }


  .gs-subhero::after{
    display:none;
  }


  .gs-subhero::before{
    width:250px;
    height:250px;

    right:-120px;
    top:-100px;
  }

}








/* =========================================================
   SUBPAGE HERO COMPACT FINAL V6
========================================================= */

.functional-page-hero.gs-subhero{
  box-sizing:border-box !important;

  height:112px !important;
  min-height:112px !important;
  max-height:112px !important;

  padding:12px 0 !important;
  margin:0 !important;

  overflow:hidden !important;
}

.functional-page-hero.gs-subhero .functional-wrap{
  height:100% !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.functional-page-hero.gs-subhero small{
  margin:0 0 4px !important;

  font-size:8px !important;
  line-height:1 !important;
}

.functional-page-hero.gs-subhero h1{
  margin:0 0 5px !important;

  font-size:31px !important;
  line-height:1 !important;
}

.functional-page-hero.gs-subhero p{
  margin:0 !important;

  font-size:10px !important;
  line-height:1.3 !important;
}

.functional-page-hero.gs-subhero .gs-subhero-visual{
  width:98px !important;
  height:98px !important;

  right:max(5vw,42px) !important;

  top:50% !important;
  transform:translateY(-50%) !important;
}

.functional-page-hero.gs-subhero .gs-subhero-emblem-bg{
  width:88px !important;
  height:88px !important;
}

.functional-page-hero.gs-subhero .gs-subhero-image{
  width:72px !important;
  height:72px !important;
}

.functional-page-hero.gs-subhero .gs-subhero-tag{
  display:none !important;
}

.functional-page-hero.gs-subhero::before{
  width:165px !important;
  height:165px !important;

  right:-35px !important;
  top:-65px !important;
}

.functional-page-hero.gs-subhero::after{
  display:none !important;
}

@media(max-width:700px){

  .functional-page-hero.gs-subhero{
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;

    padding:9px 0 !important;
  }

  .functional-page-hero.gs-subhero h1{
    font-size:24px !important;
  }

  .functional-page-hero.gs-subhero .gs-subhero-visual{
    width:76px !important;
    height:76px !important;

    right:8px !important;
  }

  .functional-page-hero.gs-subhero .gs-subhero-emblem-bg{
    width:68px !important;
    height:68px !important;
  }

  .functional-page-hero.gs-subhero .gs-subhero-image{
    width:56px !important;
    height:56px !important;
  }
}

/* /SUBPAGE HERO COMPACT FINAL V6 */