@charset "UTF-8";

@import url(./font.css);

:root {
    --p_color : #1B6338;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #1B6338; }
::-webkit-scrollbar-track {display: none;}

html {font-size: 1px; scroll-behavior:smooth;}
body {font-family: 'Gowun Batang', serif; font-weight: normal; font-size: 16rem; background-color: #FFF6ED; color: #262626; line-height: 1.6; letter-spacing: -0.25rem;}
a, a:visited {color: inherit;}
h2, h3, h4, h5 {line-height: 1.3;}

.wrap {width: calc(100% - 80rem); max-width: 1600px; margin: 0 auto;}
@media all and (max-width: 1024px) {
    html {font-size: 0.95px;}
    .wrap {width: calc(100% - 60rem);}
}
@media all and (max-width: 768px) {
    html {font-size: 0.9px;}
    .wrap {width: calc(100% - 40rem);}
}

header {position: fixed; top: 0; left: 0; width: 100%; height: 80rem; background: #FFF6ED; z-index: 300;}
header > .wrap {display: flex; justify-content: space-between;}
header .logo {width: 160rem; line-height: 80rem; background: url('../img/logo.png') no-repeat left center/contain; text-indent: -999999rem;}
header .gnb {display: flex; justify-content: space-between; flex-wrap: wrap; width: 50%; max-width: 680rem;}
.pc_nav .depth1 {display: flex; justify-content: space-between;}
.pc_nav .depth1 a {font-size: 20rem; font-weight: bold; line-height: 80rem; padding: 0 30rem;}
#cafeLink {position: relative; margin-top: 15rem;}
#cafeLink a {display: flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; text-indent: -999999rem; border: 1px solid var(--p_color); background: #5D9F00;background: linear-gradient(135deg, rgba(93, 159, 0, 1), rgba(27, 99, 56, 1), rgba(27, 99, 56, 1), rgba(93, 159, 0, 1)); background-size: 400% 100%; border-radius: 50%; animation: gradient 6s ease infinite;}
#cafeLink a span {display: block; width: 24rem; height: 24rem; background:url('../img/banner.png') no-repeat left center/300%; margin: auto;}
#cafeLink .sub {display: block; width: max-content; position: absolute; text-align: center; font-size: 14rem; font-weight: bold; border-radius: 60rem; background: #fff; padding: 4rem 20rem; color: var(--p_color); right: 0; transform: translateY(-50%); bottom: -25rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); animation: balloon 1.2s infinite; transition: 0.1s;}
#cafeLink .sub::before {content: ''; width: 0; height: 0; border-style: solid; border-width: 0px 6px 12px 6px; border-color: transparent transparent #fff transparent; position: absolute; top:-10px; right: 19rem;}
@keyframes balloon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6rem);
  }
  100% {
    transform: translateY(0);
  }
}
#m_nav_open {position: relative; display: flex; justify-content: center; align-items: flex-end; width: 80rem; height: 80rem; padding-top: 40rem; font-size: 14rem; text-align: center; color: var(--p_color); font-weight: bold;}
#m_nav_open::before, #m_nav_open::after { content: ''; position: absolute; left: 50%; top: 24rem; width: 25rem; height: 4rem; border-radius: 2rem; background: var(--p_color); transform: translateX(-50%);}
#m_nav_open::after { top: 32rem; }
.m_nav .link_list li > a {font-weight: bold;}
@media all and (min-width: 451px) {
    #m_nav_open {display: none;}
}
@media all and (max-width: 1420px) {
    header .gnb {max-width: none; width: 57%;}
    .pc_nav .depth1 a {padding: 0 24rem;}
}
@media all and (max-width: 965px) {
  .pc_nav .depth1 a {padding: 0 18rem; font-size: 18rem;}
}
@media all and (max-width: 865px) {
  .pc_nav {display: none;}
  #m_nav_open {display: block;}
  header .gnb {justify-content: flex-end;  width: calc(100% - 280rem);}
}
@media all and (max-width: 768px) {
    header .logo {width: 120rem;}
    header .gnb {width: calc(100% - 220rem);}
}
@media all and (max-width: 360px) {
  #cafeLink .sub {width: calc(100vw - 40rem); right: -90rem;}
  #cafeLink .sub::before {right: 110rem;}
}

footer {background-color: #4A7347; color: #ffffff; padding-top: 120rem; margin-top: 120rem;}
footer h2 {font-size: 24rem; color: #ffffff; margin-bottom: 28rem;}
footer h3 {font-size: 18rem; margin-top: 40rem; margin-bottom: 25rem; display: flex;}
footer h3::before {content: ''; display: block; width: 24rem; height: 24rem; background: url('../img/address.png') no-repeat 66.66% 0/400%; margin-right: 4rem;}
footer h3:nth-of-type(2):before {background-position-x: 100%;}
footer h3 + ul {padding-left: 14rem;}
footer h3 + ul li {display: flex; margin: 10rem 0;}
footer h3 + ul li::before {content: ''; display: block; width: 4px; height: 4px; background: #97BC94; border-radius: 50%; margin-right: 10rem; margin-top: 10rem;}
footer .wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .info {width: 385rem;}
footer address {padding: 1px; border-radius: 10rem; position: relative; z-index: 0;}
footer address::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; border-radius: 10rem; z-index: -1; top: 0; left: 0; background: #D8E134; background: linear-gradient(135deg,rgba(216, 225, 52, 1), rgba(27, 99, 56, 1), rgba(27, 99, 56, 1), rgba(216, 225, 52, 1)); background-size: 400% 100%; background-position: 0% 50%; transition: all 0.4s;}
footer address:hover::before {background-position: 100% 50%;}
footer address > ul {width: 100%; height: 100%; padding: 15rem; background-color: #3E6D3A; border-radius: 10rem;}
footer address li {margin: 10rem 0;}
footer address li span {display: inline-block; width: 24rem; height: 24rem; text-indent: -999999rem; background: url('../img/address.png') no-repeat 0 0/400%; margin-right: 10rem;}
footer address li:nth-of-type(2) span {background-position-x: 33.33%;}
footer a.loadView {display:block; margin-left:10rem; background:#3E6D3A url('../img/loadView.png') no-repeat 10rem center; padding:1rem 10rem 3rem 28rem; color:#fff; font-weight:400; z-index:10; border-radius:5rem;}
footer .location_map {width: calc(100% - 405rem); max-width: 1060rem; border-radius: 10rem; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);}
footer .location_map .root_daum_roughmap .cont {display: none;}
footer .btn_wrap {width: 100%; padding: 35rem 0;}
footer .btn_wrap a {display: inline-block; width: 50rem; height: 50rem; background: #3E6D3A url('../img/footerbtn.png') no-repeat 0 0/200%; border-radius: 50%; text-indent: -999999rem; margin-right: 10rem;}
footer .btn_wrap a.youtube {background-position-x: 100%;}
footer .copyright {text-align: center; padding: 58rem 0; border-top: 1px solid #97BC94; width: 100%; font-size: 15rem; font-weight: bold; color: #97BC94;}
@media all and (max-width: 980px) {
    footer .info, footer .location_map {width: 100%;}
    footer .info {margin-bottom: 50rem;}
    footer .root_daum_roughmap .wrap_map {height: 250rem !important;}
}
@media all and (max-width: 768px) {
    footer {padding-top: 100rem; margin-top: 100rem;}
}