html.lock {overflow: hidden;}

/* 인트로 */
#intro {overflow: hidden; position: fixed; z-index: 105; width: 100%; min-height: 100vh; top: 0; left: 0; }
#intro:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ""; width: 14.5rem; height: 14.5rem; background-image: url("/img/main/intro.png"); background-size: cover; background-repeat: no-repeat;}
#intro a {height: 100vh; display: block; position: relative; z-index: 3;}
#intro .flexList {--x-gap:0rem; --y-gap: 0rem;}
#intro .box {background-size: cover; background-position: center bottom; position: relative; overflow: hidden;}
#intro .box.brand {background-image: url("/img/main/brand.jpg");}
#intro .box.franchise {background-image: url("/img/main/franchise.jpg");}
#intro .box:hover .tit {color: #fff !important;}
#intro .box:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); background: rgba(0,0,0,0.6); content: ""; width: 100%; height: 100%; border-radius: 50%; transition: 0.5s;}
#intro .box:hover:after {transform: translate(-50%, -50%) scale(1.5);}
#intro .box .tit {padding-top: 20%;}
#intro .box .line {width: 3.5rem; height: 1px; margin: 1.5rem auto;}
#intro .box.brand .line  {background: var(--pointcolor);}
#intro .box:hover .line {background: #fff !important;}

#intro .box.franchise .line  {background: #fff;}

@media(max-width:1240px) {
    #intro .box .tit {padding-top: 30%;}
}

@media(max-width:1024px) {
    #intro .box .tit {padding-top: 40%;}
}

@media(max-width:768px) {
    #intro .font-60 {font-size: 3.75rem;}
    #intro:after {width: 12rem; height: 12rem;}
    #intro a {height: 50vh;}
    #intro .box:after {transition: none;}
    #intro .box .tit {padding-top: 6.25rem;}
    #intro .box {background-position: center 60%;}
}

@media(max-width:500px) {
    #intro .box .tit {padding-top: 7.5rem;}
    #intro .box:nth-child(1) .tit {padding-top: 5rem;}
    #intro .box {background-position: center 10%;}
}

/* 해더 */
#header {position: sticky; left: 0; top: 0; width: 100%; background: #fff; z-index: 99; box-shadow: 3px 0 6px rgba(100, 100, 100, 0.1);}
#header .wrap {width: 90%; margin: auto;}

#header .hamburger {width: 3.125rem; height: 2.8125rem; position: relative;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);   -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none;}
#header .hamburger span {display: block; position: absolute; height: 4px; width: 100%; background: var(--pointcolor); opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

#header .hamburger span:nth-child(1) {top: 0px;}
#header .hamburger span:nth-child(2),
#header .hamburger span:nth-child(3) {top: 1rem;}
#header .hamburger span:nth-child(4) {top: 2rem;}

#header .hamburger.open span:nth-child(1) {top: 1rem; width: 0%; left: 50%;}
#header .hamburger.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#header .hamburger.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#header .hamburger.open span:nth-child(4) {top: 1rem; width: 0%; left: 50%;}

#sitemap {display: none;}

@media(min-width:1025px) {
    #header .wrap {display: flex; justify-content: center; align-items: center; gap: 3rem; }
    #header .gnb {display: flex; align-items: center; text-align: center; max-width: 56.25rem; width: 100%; justify-content: space-between;}
    #header .gnb li.menu {width: calc(100% / 5); position: relative; padding: 2rem 0; cursor: pointer; filter: drop-shadow(3px 0 6px rgba(100,100,100,0.1));}
    #header .gnb li.menu:after {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 4px; background: var(--pointcolor); content: ""; transition: 0.3s;}
    #header .gnb li.menu:hover:after {width: 7.5rem;}

    #header .lnb {position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 12.5rem;  padding: 2rem 0; border-radius: 1.25rem; opacity: 0; visibility: hidden; transition: 0.3s;}
    #header .lnb:after {position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 7rem); border-radius: 1.25rem; background: #fff; content: "";}
    #header .lnb li {margin-top: 1rem; position: relative; z-index: 1;}
    #header .lnb li:first-child {margin-top: 7rem;}
    #header .lnb li a:hover {color: var(--pointcolor); font-weight: 700;}
    #header li.menu:hover .lnb {opacity: 1; visibility: visible;}
}

@media(max-width:1024px) {
    #header {height: 6.875rem; display: flex; align-items: center; justify-content: center;}
    #header .wrap {display: flex; align-items: center; justify-content: space-between;}
    #header .wrap .logo img {width: 12.75rem;}
    #header .gnb.pc {display: none;}

   #sitemap {position: fixed; left: 0; top: -100%; width: 100%; background: var(--pointcolor); padding:  4.5rem 5%;  z-index: 98; height: calc(100vh - 6.875rem); overflow-y: scroll; opacity: 0; visibility: hidden; transition: top 0.8s; display: block;}
   #sitemap.open {opacity: 1; visibility: visible; top: 6.875rem;}
   #sitemap::-webkit-scrollbar {display: none;}
   #sitemap li.menu {border-bottom: 1px solid rgba(255,255,255,0.5);}
   #sitemap li.menu:last-child {border-bottom: none;}
   #sitemap li.menu > a {padding: 1.625rem 0; display: inline-block; position: relative; width: 100%; font-size: 2.8125rem; font-weight: 600; color: #fff;}
   #sitemap li.menu > a:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3.375rem; height: 3.375rem; background: #fff; border-radius: 50%; content: "+"; text-align: center; line-height: 3rem; color: var(--pointcolor); font-family: 'Pretendard';}

   #sitemap li.menu.on > a:after {content: "-";}

   #sitemap .lnb {display: none;}
   #sitemap .lnb li a {font-size: 2.375rem; color: #fff; margin-top: 1rem; display: inline-block;}
   #sitemap .lnb li:first-child a {margin-top: 0;}
   #sitemap .lnb li:last-child a {margin-bottom: 2rem;}

   #sitemap .sns {display: flex; align-items: center; gap: 2.25rem;}
   #sitemap .sns a:nth-child(1) img {width: 3.125rem;}
   #sitemap .sns a:nth-child(2) img {width: 4.375rem;}
   #sitemap .sns a:nth-child(3) img {width: 3.125rem;}

   #header .hamburger {display: block;}
}

/* 푸터 */
footer {background: var(--pointcolor); padding: 80px 0; border-radius: 5rem 5rem 0 0;}
footer .cont {display: flex; justify-content: space-between;}

footer .box.left {width: 55rem;}
footer .box.right {display: flex; justify-content: space-between; flex-direction: column; width: calc(100% - 55rem);}
footer .box.right p {text-align: right;}

footer .logo {width: 17rem;}
footer .adm {display: flex; gap: 1.5rem;}
footer .adm a {color: #fff;}
footer .infor {display: flex; flex-wrap: wrap; column-gap: 1.5rem;}
footer .infor li {display: flex; gap: .25rem; position: relative;}
footer .infor li:after {position: absolute; right: -.4rem; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; content: "ㅣ";}
footer .infor li:nth-child(3):after,
footer .infor li:nth-child(7):after {display: none;}

footer .sns {display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem;}
footer .sns a:nth-child(1) img {width: 2rem;}
footer .sns a:nth-child(2) img {width: 2.875rem;}
footer .sns a:nth-child(3) img {width: 2rem;}


@media(max-width:1240px) {
    footer .box.left {width: 45rem;}
    footer .box.right {width: calc(100% - 45rem);}
    footer .infor li:nth-child(3):after {display: block;}
    footer .infor li:nth-child(2):after,
    footer .infor li:nth-child(4):after {display: none;}
}

@media(max-width:990px) {
    footer {padding: 60px 0 100px;}
    footer .font-16 {font-size: 1.5rem;}
    footer .cont {flex-direction: column;}
    footer .box {width: 100% !important;}

    footer .logo {margin: auto;}
    footer .adm {justify-content: center;}
    footer .box.right p {text-align: center;}
    footer .sns {order: 2; justify-content: center; margin-top: 3.75rem; gap: 2.25rem;}
    footer .sns a:nth-child(1) img {width: 3.125rem;}
    footer .sns a:nth-child(2) img {width: 4.375rem;}
    footer .sns a:nth-child(3) img {width: 3.125rem;}

    footer .infor {max-width: 33rem; width: 100%; margin: 3.75rem auto;}
    footer .infor li:nth-child(3),
    footer .infor li:nth-child(4),
    footer .infor li:nth-child(5) {width: 100%;}

    footer .infor li:nth-child(3):after,
    footer .infor li:nth-child(5):after {display: none;}
}

@media(max-width:360px) {
    footer .font-16 {font-size: 1.375rem;}
}

/* 퀵 */
#quick {position: fixed; right: 2.5%; bottom: 4rem;  z-index: 90; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}

#quick a {display: block;}

#quick .quick01 {width: calc(5rem + 6px); background: linear-gradient(-131deg, #ffd0a4, #f79d00); color: #fff; display: block; padding: 1.5rem 0 1.5rem; border-radius: 100px; position: relative; animation: bounce 0.6s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate; z-index: 0;}
#quick .quick01:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5rem; height: calc(100% - 6px); content: "";  background: #eb3b23; border-radius: 100px; z-index: -1;}
#quick .quick01 img {width: 2rem;}

#quick .wrap a {margin-top: .625rem;}
#quick .wrap a.quick02,
#quick .wrap a.quick03 {background: #fff; display: block; width: 3.75rem; padding: 1rem 0 1rem; border-radius: 100px; color: var(--pointcolor); border: 1px solid var(--pointcolor);}
#quick .wrap a.quick04,
#quick .wrap a.quick05 {width: 3.75rem; height: 3.75rem; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%;}
#quick .wrap a.quick04 {background: #fff; border: 1px solid var(--pointcolor);}
#quick .wrap a.quick05 {background: #000;}
#quick .wrap a img {width: 1.875rem;}

@media(max-width:768px) {
    #quick .font-16 {font-size: 2rem;}
    #quick .font-28 {font-size: 2.5rem;}

    #quick {top: auto; bottom: 0; right: 0; width: 100%;}
    #quick .wrap {width: 100%; display: flex;}
    #quick .wrap a {width: calc(100% / 4) !important; margin-top: 0; border-radius: 1.25rem 1.25rem 0.5rem 0.5rem !important; height: 100% !important; padding: 1.5rem 0 !important; border: 1px solid var(--pointcolor); color: var(--pointcolor);}
    #quick .wrap a.quick05 {background: var(--pointcolor); color: #fff;}
    #quick .wrap p {margin-top: .625rem;}
    #quick .wrap p br {display: none;}
    #quick .wrap a img {width: 2.625rem;}

    #quick .quick01 {position: absolute; right: 5%; bottom: 9rem;  padding: 2rem 0; width: calc(6.875rem + 6px);}
    #quick .quick01:after {width: 6.875rem; transform: translate(-50%, -50%);}
    #quick .quick01 img {width: 2.75rem;}
}

@media(max-width:500px) {
    #quick .font-16 {font-size: 1.875rem;}
    #quick .wrap a img {width: 2.25rem;}
}

@keyframes bounce{
    to{
        transform: translateY(-1.5rem);
    }
}

/* 가맹문의 */
#contact {position: fixed; right: calc(2.5% + 6rem); bottom: 7rem; z-index: 90; background: var(--subcolor); border-radius: 1.25rem; padding: 2.5rem;width: 25rem; filter: drop-shadow(3px 0 6px rgba(100,100,100,0.1)); opacity: 0; visibility: hidden;}
#contact.active {opacity: 1; visibility: visible;}
#contact h2 {display: flex; align-items: center; justify-content: center; gap: .5rem;}
#contact h2 img {width: 1.5625rem;}
#contact input[type=text],
#contact input[type=tel],
#contact input[type=email],
#contact select,
#contact textarea {width: 100%; border: 1px solid var(--pointcolor); padding: .625rem 1rem; margin-top: .625rem; border-radius: .5rem; background: #fff;}
#contact input[type=text]:focus,
#contact input[type=tel]:focus,
#contact input[type=email]:focus,
#contact select:focus,
#contact textarea:focus {box-shadow: none; border: 1px solid var(--pointcolor) !important;}

#contact label {display: flex; gap: .625rem;}
#contact select {background: #fff; -webkit-appearance: none; -moz-appearance: none; background-image: url("/img/main/select.svg"); background-position: 96% center; background-repeat: no-repeat; color: #000;}
#contact select:nth-child(1) {width: 45%;}
#contact select:nth-child(2) {width: 55%;}
#contact input::placeholder {color: #797979;}
#contact button {width: 100%; padding: .625rem; text-align: center; background: var(--pointcolor); color: #fff; border-radius: .5rem; margin-top: 1rem;}

#contact .close {width: 2rem; height: 2rem; position: absolute; right: 1.5rem; top: 1rem; cursor: pointer;}
#contact .close span {display: block; position: absolute; height: 3px; width: 100%; background: var(--pointcolor); opacity: 1; left: 0;}
#contact .close span:nth-child(1) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1rem;}
#contact .close span:nth-child(2) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 1rem;}

@media(max-width:768px) {
    #contact .font-16 {font-size: 1.875rem;}
    #contact .font-25 {font-size: 2.75rem;}
    #contact .font-18 {font-size: 2rem;}

    #contact {left: 50%; right: auto; bottom: auto; top: 10%; transform: translateX(-50%); max-width: 42rem; width: 90%; z-index: 100;}
    #contact .close {width: 3rem; height: 3rem; top: 2rem; right: 2rem;}
    #contact h2 img {width: 2.5rem;}
    #contact input[type=text],
    #contact input[type=tel],
    #contact input[type=email],
    #contact select,
    #contact textarea  {padding: 1rem 1.5rem; margin-top: 1.25rem;}
    #contact button {padding: 1.25rem;}
    #contact label  {gap: 1rem;}
    
}