/*******************

HEADER

*******************/

#main-header { position: relative; z-index: 99998; background-color: #fff; } 

#main-header.fixed { position: fixed; top: 0; animation: fixed 1s forwards; }

@keyframes fixed {
  0% { transform: translate(0, -20px); }
  100% { transform: translate(0, 0px); }
}


/* gnb */
.gnb nav > ul > li > a { font-family: 'Paperlogy' !important; transition: all .3s; } 
.gnb nav > ul > li > a > span { display: none !important; } 

.gnb nav > ul > li > a~ul { width: 95% !important; border: 1px solid #ddd !important; transform: translate(0px, 35px); } 
.gnb nav > ul > li > a~ul li a { border-left: none !important; justify-content: center; font-size: 1.6rem; font-family: 'Paperlogy' !important; } 
.gnb nav > ul > li > a~ul li a:hover { background-color: var(--main-color); } 


/* tnb */
.h-tnb { display: flex; gap: 8px; } 
.h-tnb a { display: block; padding: 10px 20px; border-radius: 20px; font-size: 1.6rem; line-height: 1.5rem; transition: all .3s; } 

.logInOut { position: relative; } 
.logIn, .logOut { border: 1px solid #e6e6e6; color: #333; } 
.logOut { position: absolute; left: 0; top: 0; display: none !important; } 
.join { color: #fff; background-color: var(--main-color); } 

/* hover event */
.logIn:hover, .logOut:hover, .join:hover { color: #fff; background-color: #222; } 

/* m-gnb */
.m-gnb { display: none; } 

.global-m { position: fixed; right: -100rem; top: 9rem; width: 60vw; height: calc(100vh - 9rem); padding: 2rem; background-color: #fff; transition: all .3s; } 
.global-btn-wrap { display: flex; flex-direction: column; align-items: end; gap: 0.5rem; } 
.global-btn-wrap span { display: block; width: 3rem; height: 0.3rem; background-color: #000; transition: all .3s; } 
.global-btn-wrap span:first-child { width: 2rem; } 
.global-btn-wrap.on span:first-child { width: 3rem; } 
.global-btn-wrap.on span:last-child { transform: translate(-1px, -2px) rotate(-45deg); } 
.global-btn-wrap.on span:first-child { transform: translate(0px, 6px) rotate(45deg); } 
.global-btn-wrap.on~.global-m { right: 0; top: 9rem; } 

.depth1-wrap { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } 
.depth1 ul { display: none; padding: 1rem 2rem; background-color: #f2f2f2; } 
.depth1-wrap p { font-size: 2rem; font-weight: 600; } 
.global-m ul li a { display: block; padding: 0.5rem 0; font-size: 1.6rem; } 

@media screen and (max-width: 1680px){
 .gnb nav > ul > li > a { padding-left: 30px !important; padding-right: 30px !important; } 
 }

@media screen and (max-width: 1480px){
 .gnb nav > ul > li > a { padding-left: 20px !important; padding-right: 20px !important; } 
 }

@media screen and (max-width: 1400px){
 #main-header { padding: 10px; } 
 #main-header .e-con-inner { flex-wrap: wrap; } 
 .header-logo { width: 100%; } 
 }

@media screen and (max-width: 768px){
  #main-header { height: 11rem; }
 #main-header .e-con-inner { flex-wrap: nowrap; } 
 .header-logo { width: auto; } 
 .gnb { display: none; } 

 /* m-gnb */
 .m-gnb { display: block; } 
 .global-m { top: 11rem; }
 }

@media screen and (max-width: 600px){
 #main-header .e-con-inner { flex-wrap: wrap; } 
 .header-logo { width: 100%; } 
 .header-logo img { width: 200px; } 
 .global-btn-wrap.on~.global-m { top: 11rem; }
 .global-m { width: 80vw; }
 .h-tnb a { padding: 5px 17px; } 
 .visual-txt-wrap .vis-star {
  display: none;
}
 }

/*******************

FOOTER

*******************/
.footer { background-color: var(--bg-color); } 
.footer .footer-bg { padding: 60px 0; border-radius: 0 200px 0 0; color: #fff; background-color: #1f1d1d; } 
.f-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } 
.f-menu { display: flex; gap: 52px; } 
.f-menu li { position: relative; font-size: 1.8rem; } 
.f-menu li a { color: #fff; transition: all .3s; } 
.f-menu li:after { content: ""; position: absolute; right: -28px; top: 7px; display: block; width: 4px; height: 4px; border-radius: 100%; background-color: #fff; } 
.f-menu li:last-child:after { display: none; } 
.f-menu li:hover a { opacity: 0.5; } 

.f-bottom { display: flex; justify-content: space-between; align-items: end; } 
.f-bottom-left { width: 55%; } 
.f-bottom-left ul { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } 
.f-bottom-left ul li p { display: flex; gap: 5px; font-size: 1.6rem; } 
.f-copy { font-size: 1.6rem; } 

.f-bottom-right { position: relative; } 
.f-bottom-right ul { position: absolute; left: 0; bottom: 0; } 
.f-famsite { cursor: pointer; } 
.f-famsite .f-famsite-name { display: flex; align-items: center; gap: 50px; font-size: 1.8rem; padding: 16px 29px; border-radius: 10px; border: 1px solid #ddd; } 
.f-famsite img { transition: all .3s; } 
.f-famsite.on img { transform: rotate(180deg); } 
.f-famsite-line { display: flex; } 
.f-bottom-right ul { overflow: hidden; position: absolute; left: 0; bottom: 52px; z-index: 10000; width: 100%; height: 0; border-radius: 10px; background-color: #fff; transition: all .3s; } 
.f-famsite.on~ul { height: 592px; } 
.f-bottom-right ul li { border: 1px solid #ddd; font-size: 1.6rem; } 
.f-bottom-right ul li:first-child { border-radius: 10px 10px 0 0; } 
.f-bottom-right ul li:last-child { border-radius: 0 0 10px 10px; border-bottom: none; } 
.f-bottom-right ul li a { display: flex; justify-content: center; align-items: center; height: 35px; transition: all .3s; } 
.f-bottom-right ul li a:hover { background-color: #f2f2f2; } 


@media screen and (max-width: 1400px){
 .footer .footer-bg { border-radius: 0; } 
}

@media screen and (max-width: 1024px){
 .f-bottom-left { width: 100%; } 
 .f-bottom { flex-direction: column; justify-content: unset; } 
 .f-bottom-left ul { justify-content: center; } 
 .f-menu li a { font-size: 1.6rem; } 

 .f-copy { text-align: center; } 
 .f-bottom-right { margin: 3rem auto 0 auto; } 

 .f-top {
    flex-direction: column;
    gap: 2rem;
  }
}

@media screen and (max-width: 500px) {
  .f-menu { gap: 2rem; }
  .f-menu li:after { right: -13px; }
  .f-bottom-left ul { gap: 1rem; }
  .f-bottom-left ul li p { justify-content: center; font-size: 1.5rem; }
  .f-bottom-left ul li p span {
    text-align: center;
    line-height: 2rem;
  }
  .f-menu li a {
    font-size: 1.5rem;
  }
  .f-famsite-name p {
    font-size: 1.6rem;
  }
}

/* topBtn, telBox */

.tel-box,
.top-btn { display: none; position: fixed; bottom: 100px; right: 100px; z-index: 999999; cursor: pointer; }

.top-btn-wrap,
.tel-box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 50px; height: 50px; border-radius: 5px; color: #fff; background-color: #e86b11; }

.tel-box { display: none; right: 5px; bottom: 5px; }

@media screen and (max-width: 1400px) {
  .top-btn { right: 5px; bottom: 5px; cursor: pointer; }
  .tel-box i { font-size: 22px; }
}


@media screen and (max-width: 768px) {
  .tel-box { display: flex; bottom: 60px; }
}