/* header */
.panel{ display: none;}

header{ position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1000; width: 100%; height: 115px; transition: .3s; }
header .wrap1620{ display: flex; justify-content: space-between; align-items: center;}
header .logo{ width: 107px; height: 63px; transition: .3s; position: relative; overflow: hidden;}
header .logo img{ position: absolute; top: 0; left: 0; width: 100%; object-fit: cover;}
header .logo img.common{ opacity: 1;}
header .logo img.scroll{ opacity: 0;}
header .logo img.hover{ opacity: 0;}
header .gnb{ display: flex; justify-content: flex-end; align-items: center; height: 115px; text-align: center; line-height: 115px; }
header .gnb > ul{ text-align: center; font-size: 0; position: relative; display: block!important; }
header .gnb > ul > li{ position: relative; height: 100%; display: inline-block; box-sizing: border-box; padding: 0 20px; }
header .gnb > ul > li > a{ color: #fff; font-size: 12px; position: relative; transition: .3s; display: inline-block; }
header .gnb > ul > li:last-child{ background-color: #133e6e; width: 94px; height: 34px; border-radius: 17px; line-height: 34px; position: relative; top: 3px; }
header .gnb > ul > li:last-child a.insta-btn{ font-size: 18px; margin-right: 20px; color: #fff!important;}
header .gnb > ul > li:last-child a.reser-btn{ font-size: 16px; position: relative; top: -2px; color: #fff!important;}


header .gnb .subnav{ width: 220px; position: absolute; left: calc(50% - 110px); top: 115px; opacity: 0; pointer-events: none; transition: .3s; z-index: 1000;  font-size: 0;  background-color: #133e6e; }
header .gnb .subnav.active{ opacity: 1; pointer-events: initial; top: 116px; }
header .gnb .subnav li{ width: 100%; text-align: center; padding: 0 20px; line-height: 50px; height: 50px; transition: .3s;}
header .gnb .subnav li a{ display: block; width: 100%; height: 100%; font-size: 12px; transition: .3s; color: #fff; position: relative; border-bottom: 1px solid #345982; }
header .gnb .subnav li:last-child a{ border-bottom: 0;}
header .gnb .subnav li:hover{ background-color: #fff;}
header .gnb .subnav li:hover a{ color: #133e6e; border-bottom: 0;}
header .gnb .subnav li a:hover:after{ width: 100%;}


/* header-hover */
header:hover{ background-color: #fff; box-shadow: 2px 0 6px rgba(0,0,0,.2);}
header:hover .logo img.common{ opacity: 0;}
header:hover .logo img.scroll{ opacity: 0;}
header:hover .logo img.hover{ opacity: 1;}
header:hover .gnb > ul > li > a{ color: #222; }
header:hover .gnb > ul > li > a:hover{ color: #133e6e;}


/* header-scroll */
header.scroll{ z-index: 1000; height: 80px; width: 100%; transition: .3s;  animation-name: headfix; animation-duration: 1.3s; animation-fill-mode:forwards; }
@keyframes headfix {
    0% { top: 0; }
    50%{ top: -100px; background-color: transparent;}
    100% { top: 0; background-color:rgba(255, 255, 255, 1); box-shadow: 2px 0 6px rgba(0,0,0,.2);}
  }
header.scroll .logo{ width: 79px; height: 47px; }
header.scroll .logo img.common{ opacity: 0;}
header.scroll .logo img.scroll{ opacity: 1;}
header.scroll .logo img.hover{ opacity: 0;}
header.scroll .logo img.mo{ opacity: 0;}
header.scroll .gnb{ height: 80px; line-height: 80px;  }
header.scroll .gnb > ul{ height: 80px; }
header.scroll .gnb > ul > li > a{ color: #222; }
header.scroll .gnb .subnav{ top: 100px; }
header.scroll .gnb .subnav.active{ top: 80px; }



/* footer */
footer{width: 100%; text-align: left; overflow: hidden; background-color: #333;}
footer .f-top{ padding: 80px 0; color: #948f8d; }
footer .f-top a{ color: #948f8d;}
footer .f-top .wrap1620{overflow: hidden; position: relative;}
footer .f-top .right ul{ font-size: 0;}
footer .f-top .right li{ display: inline-block; padding: 0 12px; position: relative; font-size: 12px;}
footer .f-top .right li:after{ content:'|'; font-size: 10px; position: absolute; right: 0; top: 0; color: #948f8d;}
footer .f-top .right li:last-child{ padding: 0 0 0 12px;}
footer .f-top .right li:last-child:after{ content: '';}
footer .f-top .right li a{ color: #948f8d;}
footer .f-top .right li a.cf{ color: #fff;}
footer .f-top .left img{ padding-bottom: 60px;}
footer .f-top .left p{ font-size: 12px; line-height: 30px;}
footer .f-top .btn-wrap{ display: inline-block; position: absolute; right: 0; bottom: 0;}
footer .f-top .btn-wrap a{ display: inline-block; padding-left: 20px; color: #fff;}
footer .f-top .btn-wrap a.reser-btn{ font-size: 25px; position: relative; top: -2px;}
footer .f-top .btn-wrap a.insta-btn{ font-size: 28px;}
footer .f-btm{ border-top: 1px solid rgba(255,255,255,.1); text-align: right; padding: 40px 0;}
footer .f-btm p{ opacity: .2; font-size: 12px;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ width: 100%; height: 50px; z-index: 1000; background-color: #fff; padding-top: 0; }
    header .gnb .reser-btn{ width: 75px; height: 25px; display: inline-block; border: 1px solid #333; color: #333; text-align: center; line-height: 23px; transition: .4s; font-size: 11px;}
    header .gnb .reser-btn:hover{ color: #fff;}
    header .logo{ width: 58px; height: 34px; position: fixed; left: 15px;}
    header .logo img.common{ opacity: 0;}
    header .logo img.scroll{ opacity: 0;}
    header .logo img.hover{ opacity: 1;}
    header .gnb > ul{ display: none!important;}

    header .head-btn-wrap{ width: 76px; height: 30px; border-radius: 15px; line-height: 30px; background-color: #133e6e; display: inline-block; position: absolute; right: 55px; padding: 0 15px; transition: .3s;}
    header .head-btn-wrap a{ color: #fff;transition: .3s;}
    header .head-btn-wrap a.insta-btn{ font-size: 16px; margin-right: 9px;}
    header .head-btn-wrap a.reser-btn{ font-size: 15px; position: relative; top: -1px;}
    /* hover */
    header:hover .logo img.common{ opacity: 0;}
    header:hover .logo img.scroll{ opacity: 0;}
    header:hover .logo img.hover{ opacity: 1;}
    /* header scroll */
    header.scroll{ height: 50px; z-index: 1000; background-color: #fff; padding-top: 0; top: 0; animation-name: unset; }
    header.scroll .logo{ width: 58px; height: 34px; margin-top: 0; }
    header.scroll .logo img.common{ opacity: 0;}
    header.scroll .logo img.scroll{ opacity: 0;}
    header.scroll .logo img.hover{ opacity: 1;}

    /* panel */
    .panel{ position: fixed; top: -120%; left: 0; width: 100%; height: calc(100vh - 50px); background-color: #fff; z-index: 999; display: block; transition: .3s; padding: 0 15px;}
    .panel::-webkit-scrollbar {display: none; }
    .panel.active{ top: 50px; box-shadow: 1px 1px 5px rgba(0,0,0,.16); }
    .panel.active + header{ background-color: #133e6e;}
    .panel.active + header .logo img.common{ opacity: 1;}
    .panel.active + header .logo img.hover{ opacity: 0;}
    .panel.active + header .head-btn-wrap{ background-color: #fff; }
    .panel.active + header .head-btn-wrap a{ color: #133e6e;}
    .panel.active + header.scroll{ background-color: #133e6e; padding-top: 0; top: 0; }
    .panel.active + header.scroll .logo{  width: 58px; height: 34px; margin-top: 0; }
    .panel.active + header.scroll .gnb .reser-btn{border: 1px solid #333; color: #333; font-size: 11px;}
    .panel.active + header.scroll .gnb .reser-btn:hover{ color: #fff;}
    .panel.active + header.scroll .logo img.scroll{ opacity: 0;}
    .panel.active + header.scroll .logo img.common{ opacity: 1;}
    .panel.active + header.scroll .logo img.hover{ opacity: 0;}

    .mNav > ul > li{ width: 100%; overflow: hidden; text-align: left; border-bottom: 1px solid #dfdfdf;}
    .mNav > ul > li > a{ display: block; width: 100%; height: 57px; box-sizing: border-box; line-height: 57px; font-size: 25px; transition: .3s; }
    .mNav > ul > li > a.active{ color:#133e6e}
    .mNav .subNav{ padding: 15px; overflow: hidden; background-color: #f8f8f8; }
    .mNav .subNav li a{ display: inline-block; width: fit-content; position: relative; font-size: 12px; height: 30px; line-height: 30px; color: #777; transition: .3s;}
    .mNav > ul > li > a .arrow { transition: .3s; width: 12px; height: 12px; position: relative; top: calc(50% - 6px);}
    .mNav > ul > li > a .arrow .plus-line{ position: absolute; width: 100%; height: 1px; background-color: #222;}
    .mNav > ul > li > a .arrow .plus-line.line1{ left: 0; top: 0; bottom: 0; margin: auto 0; transition: .3s;}
    .mNav > ul > li > a .arrow .plus-line.line2{ width: 1px; height: 100%; top: 0; left: 0; right: 0; margin: 0 auto; transition: .3s;}
    .mNav > ul > li > a.active .arrow{ transform: rotate(90deg);}
    .mNav > ul > li > a.active .arrow .plus-line.line1{ transform: rotate(90deg); transform-origin: center; background-color: #133e6e;}
    .mNav > ul > li > a.active .arrow .plus-line.line2{ background-color: #133e6e;}

    #panelbtn{ width: 26px; height: 18px; margin: 16px 0;  padding: 0; overflow: hidden; top: 0; right: 15px; z-index: 1100;  }
    #panelbtn a{ display: block; width: 100%; height: 100%; position: relative; }
    #panelbtn span{ display: block; width: 23px; height: 2px; border-radius: 1px; background-color: #133e6e; position: absolute; left: 0; transition: 0.3s;} 
    #panelbtn .line01{top: 1px;}
    #panelbtn .line02{top: 8px; left: 3px;}
    #panelbtn .line03{top: 15px;}
    

    /*active클래스 활성화 - x처리*/
    #panelbtn.scroll span{ background-color: #fff;}


    #panelbtn.active span{ background-color: #fff;}
    #panelbtn.active .line02{ transform: scaleX(0); }
    #panelbtn.active .line01{  transform-origin: left top; left: 5px; transform: rotate(45deg); }
    #panelbtn.active .line03{  transform-origin: left bottom; left: 5px; transform: rotate(-45deg); top: 17px; }


    
    /* footer */
    footer .f-top{ padding: 40px 0 60px; }
    footer .f-top .right{ padding-bottom: 50px; float: unset;}
    footer .f-top .right li{ padding: 0 9px 10px; position: relative;}
    footer .f-top .right li:nth-child(1), footer .f-top .right li:nth-child(6){ padding-left: 0;}
    footer .f-top .right li:after{ content:'|'; font-size: 10px; position: absolute; right: 0; top: 0; color: #948f8d;}
    footer .f-top .right li:nth-child(4):after, footer .f-top .right li:last-child:after{ content: '';}
    footer .f-top .right li a{ color: #948f8d;}
    footer .f-top .right li a.cf{ color: #fff;}
    footer .f-top .left{ float: unset;}
    footer .f-top .left img{ padding-bottom: 25px;}
    footer .f-top .left p{ line-height: 24px;}
    footer .f-top .btn-wrap{ display: inline-block; position: relative; width: 100%; text-align: right; padding-top: 50px;}
    footer .f-top .btn-wrap a{ display: inline-block; padding-left: 10px; color: #fff;}
    footer .f-top .btn-wrap a.reser-btn{ font-size: 25px; top: -1px;}
    footer .f-top .btn-wrap a.insta-btn{ font-size: 26px;}
    footer .f-btm{ text-align: right; padding: 30px 0;}
}