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

header{ position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1000; width: 100%; height: 130px; transition: .5s; padding: 0 60px; }
header .logo{ width: 224px; height: 44px; margin-top: 33px; transition: .5s; position: relative;}
header .logo img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
header .logo img.common{ opacity: 1;}
header .logo img.scroll{ opacity: 0;}
header .gnb{ width: calc(100% - 224px); height: 130px; text-align: center; line-height: 130px; }
header .gnb .reser-btn{ width: 64px; height: 64px; border-radius: 50%; background-color: transparent; display: inline-block; line-height: 64px; margin-top: 25px; border: 2px solid #fff; color: #fff; transition: .4s; font-size: 24px; margin-left: 21px;}
header .gnb .reser-btn:hover{ background-color: #e93463; border: 2px solid #e93463;}
header .gnb > ul{ width: auto; height: 130px; 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 21px; }
header .gnb > ul > li > a{ color: #fff; font-size: 12px; position: relative; transition: .5s; display: inline-block; }
header .gnb .subnav{ width: 160px; position: absolute; right: calc(50% - 80px); top: 120px; opacity: 0; pointer-events: none; transition: .5s; z-index: 1000;  font-size: 0; }
header .gnb .subnav.active{ top: 100px; opacity: 1; pointer-events: initial;}
header .gnb .subnav li{ width: 100%; text-align: left; height: 40px; line-height: 40px; }
header .gnb .subnav li a{ font-family: 'GmarketSansLight'; font-weight: normal; display: inline-block; width: 100%; height: 100%; font-size: 12px; line-height: 40px; background-color: #fff; transition: .3s;  padding-left: 23px; color: #e93463; }
header .gnb .subnav li a:hover{ font-family: 'GmarketSansBold'; background-color: #f2f2f2; }
header .gnb .subnav h3{ width: 100%; text-align: left; height: 40px; line-height: 40px; font-size: 12px; background-color: #fff; transition: .3s;  padding-left: 23px; color: #e93463; }

/* header-scroll */
header.scroll{ z-index: 1000;  height: 100px; width: 100%; transition: .5s; background-color: rgba(255, 255, 255, 1);}
header.scroll .logo{ width: 224px; height: 44px; margin-top: 23px;}
header.scroll .logo img.common{ opacity: 0;}
header.scroll .logo img.scroll{ opacity: 1;}
header.scroll .gnb{ height: 100px; line-height: 100px;  }
header.scroll .gnb > ul{ height: 100px; }
header.scroll .gnb > ul > li > a{ color: #e93463; }
header.scroll .gnb .reser-btn{ background-color: #e93463; border: 2px solid #e93463; margin-top: 18px; }
header.scroll .gnb .subnav{ top: 120px; }
header.scroll .gnb .subnav.active{ top: 99px; }



/* footer */
footer{width: 100%; text-align: left; overflow: hidden; background-color: #737070; padding: 60px 160px;}
footer .wrap{overflow: hidden;}
footer .logo{ padding-top: 13px;}
footer .pl35{ padding-left: 35px;}
footer p{ font-size: 14px; line-height: 28px; }
footer p.copy{ font-size: 12px; line-height: 12px;}
footer ul{font-size: 0;}
footer ul li{ display: inline-block; position: relative; font-size: 12px; padding-right: 6px; padding-left: 5px;}
footer ul li:nth-child(1){padding-left: 0;}
footer ul li:after{ content: '|'; font-size: 10px; position: absolute; color: #fff; right: 0; top: 2px;}
footer ul li:last-child:after{ content: '';}
footer ul li a{ font-size: 12px; color: #fff;}


#to-top{  display: block; position: fixed; bottom: 60px; right: 60px; z-index: 100; }
#to-top > a{ display: block; text-align: center; width: 64px; height: 64px;  border-radius: 50%; background-color: #fff; border: 2px solid #e93463; transition: .3s;}
#to-top > a i{ font-size: 26px;line-height: 56px; transition: .3s;}
#to-top .to-top:hover{ background-color: #e93463; }
#to-top .to-top:hover i{ color: #fff;}
#to-top a{opacity: 0; pointer-events: none; transition: .3s;}
#to-top a.show{ opacity: 1; pointer-events: inherit;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ width: 100%; height: 40px; z-index: 1000; background: #fff; padding-top: 0; padding: 0 15px;}
    header .reser-btn{ width: 22px; height: 22px; border-radius: 50%; background-color: #fff; display: inline-block; border: 1px solid #e93463; color: #e93463; text-align: center; line-height: 22px; transition: .4s; font-size: 10px; position: absolute; top: 9px; right: 43px;}
    header .logo{ width: 112px; height: 22px; margin-top: 9px; }
    header .logo img.common{ opacity: 0;}
    header .logo img.scroll{ opacity: 1;}
    /* header scroll */
    header.scroll{ height: 40px; z-index: 1000; background-color: #fff; padding-top: 0; top: 0; }
    header.scroll .logo{ width: 112px; height: 22px; margin-top: 9px; }
    header.scroll .logo img.common{ opacity: 0;}
    header.scroll .logo img.scroll{ opacity: 1;}

    /* panel */
    .panel{ position: fixed; top: -130%; left: 0; width: 100%; height: auto; background-color: #fff; z-index: 999; display: block; transition: .5s; }
    .panel::-webkit-scrollbar {display: none; }
    .panel.active{ top: 40px; }

    
    .mNav > ul > li{ width: 100%; overflow: hidden; text-align: left; }
    .mNav > ul > li > a{ display: block; width: 100%; height: 40px; box-sizing: border-box; line-height: 40px; font-size: 12px;  transition: .3s; color: #e93463; padding: 0 15px; }
    .mNav > ul > li > a.active{ font-family: 'GmarketSansBold';  background-color: #f2f2f2;}
    .mNav > ul > li > a div.plus-minus{display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #e93463; text-align: right; margin-top: 11px; position: relative;}
    .mNav > ul > li > a div.plus-minus span{position: absolute; background-color: #e93463; transition: .5s;}
    .mNav > ul > li > a.active div.plus-minus span{ background-color: #e93463;}
    .mNav > ul > li > a div.plus-minus span.plus-span01{ width: 60%; height: 1px; left: 3px; top: 7px;}
    .mNav > ul > li > a div.plus-minus span.plus-span02{ width: 1px; height: 60%; left: 7px; top: 3px;}
    .mNav > ul > li > a div.plus-minus.active span.plus-span02{ transform: rotate(90deg); left: 8px; }

    .mNav .subNav{ padding: 0 15px 25px; background-color: #fff; overflow: hidden; }
    .mNav .subNav li{ width: 50%; float: left; }
    .mNav .subNav li a{ display: inline-block; width: 100%; font-size: 12px; height: 25px; line-height: 25px; color: #e93463;}


    .mNav .dong-wrap{ width: 50%; float: left;}
    .mNav .dong-wrap h3{ font-size: 12px; line-height: 24px; color: #e93463; font-weight: 700; }
    .mNav .dong-wrap li{ width: 100%;} 


    #panelbtn{  width: 22px; height: 24px; margin: 9px 0;  padding: 0; overflow: hidden; position: fixed; top: 0; right: 15px; z-index: 1100; }
    #panelbtn a{ display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e93463; position: relative; }
    
    #panelbtn span{ display: block; width: 2px; height: 2px; background-color: #e93463; position: absolute; left: 0; top: 9px; transition: 0.3s;} 
    
    #panelbtn .line01{ left: 5px;}
    #panelbtn .line02{ left: 9px;}
    #panelbtn .line03{ left: 13px;}
    

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


    #panelbtn.active span{ background-color: #e93463; width: 12px; height: 1px;}
    #panelbtn.active .line02{ opacity: 0;; }
    #panelbtn.active .line01{  transform-origin: left top; left: 6px; top: 6px; transform: rotate(45deg); }
    #panelbtn.active .line03{  transform-origin: left bottom; left: 6px; transform: rotate(-45deg); top: 14px; }


    
    /* footer */
    footer{ width: 100%; text-align: left; padding: 20px 15px;}
    footer .top{ overflow: hidden; position: relative; font-weight: 100%; margin-bottom: 15px;}
    footer .top > .fl p, footer p.copy{ font-size: 12px; line-height: 18px; }
    footer .btm{ width: 100%; font-size: 12px; position: relative; }
    footer ul{ margin-bottom: 5px;}
    footer .logo{ position: absolute; right: 0; bottom: 5px; width: 112px; height: 22px; padding-top: 0;}
    footer .logo img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

    #to-top{  display: block; position: fixed; bottom: 15px; right: 15px; z-index: 100; }
    #to-top > a{ width: 40px; height: 40px;  border: 1px solid #e93463; margin-bottom: 5px;}
    #to-top > a i{ font-size: 16px;line-height: 38px;}
    #to-top a{opacity: 0; pointer-events: none; transition: .3s;}
    #to-top a.show{ opacity: 1; pointer-events: inherit;}

}