header{ position: fixed; top: 0; left: 0; width: 100%; height: 140px; z-index: 999; background-color: rgba(255,255,255,0);}
header .header-mid{ position: relative; width: 1920px; height: 100%; margin: 0 auto; }

header .wrap1550{ width: 1550px; margin: 0 auto; overflow: hidden; text-align: center; position: absolute; right: 0; }

header h1.logo{ display: block; width: 165px; height:89px; margin-top: 34px; position:relative; z-index: 999;}
header h1.logo img{width: 100%; object-fit: cover;}
header h1.logo img.scroll{ display: none;}

header .gnb > ul{ font-size: 0;}
header .gnb > ul > li{ display: inline-block; width: 130px; padding-top: 65px; font-size: 13px; vertical-align: top;}
header .gnb > ul > li > a{display: block; width: 100%; height: 100%; padding-bottom: 20px; position: relative; }
header .gnb > ul > li > a > p{ transition: .3s; text-shadow: 0 1px 2px rgba(51,51,51,.5); }
header .gnb > ul > li:hover > a > p{ color: #a3cc01;}
header .gnb > ul > li > a::after{ content: ''; position: absolute; width: 100%; height: 3px; background-color: #a3cc01; bottom: 0; left: 0; right: 0; margin: 0 auto; transform: scaleX(0); transition: .3s; }
header .gnb > ul > li:hover > a::after{ transform: scaleX(1);}

header .subnav{ position: relative; background-color: #fff; height: 260px; top: -50px; transition: .5s; opacity: 0; box-shadow: 0 4px 4px rgba(51,51,51,0.3); overflow: visible; z-index: 2;}
header .subnav.active{ top: 0; opacity: 1; z-index: 2; }
header .subnav li a{ display: block; background-color: #fff; width: 100%; height: 40px; line-height: 40px; transition: .3s; z-index: 2; }
header .subnav li:hover a{ color: #373737;}


header .nav-wrap .reser-btnarea { position: relative; top: 50px; right: 30px; padding-left: 70px; transition: .3s;}
header .nav-wrap .reser-btnarea ul{ font-size: 0;}
header .nav-wrap .reser-btnarea li{ display: inline-block; padding-left: 10px;}
header .nav-wrap .reser-btnarea li:nth-child(1) a{ background-color: #263a4f; transition: .3s;}
header .nav-wrap .reser-btnarea li:nth-child(1):hover a{ background-color: #a3cc01;}
header .nav-wrap .reser-btnarea li:nth-child(2) a{ width: 100px; background-color: #01c73c;}
header .nav-wrap .reser-btnarea li:nth-child(2) a img{ position: relative; top: 4px; padding-right: 5px; }


/* =================== 1920px =================== */
@media (max-width: 1920px) {
    header .header-mid{ position: relative; width: 100%; height: 100%; margin: 0 auto; }
}

/* =================== 1550px =================== */
@media (max-width: 1550px) {
    header .wrap1550{ width: 100%; float: unset; padding-left: 30px;}
   
}

/* =================== 1165px =================== */
@media (max-width: 1175px) {
    header .wrap1550{ width: 100%; float: unset; padding-left: 15px;}
    header .nav-wrap .reser-btnarea { position: relative; top: 50px; right: 15px; padding-left: 30px;}
}


/* header-scroll */
header.scroll{ position: fixed; background-color: rgba(255,255,255,1); top: 0; box-shadow: 0 0 5px rgba(51,51,51,.3); transition: .5s;}
header.scroll h1.logo img{ display: none;}
header.scroll h1.logo img.scroll{ display: block;}
header.scroll .gnb > ul > li > a > p{ color: #373737; text-shadow: none;}
header.scroll .gnb > ul > li:hover > a > p{ color: #a3cc01;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ position: fixed!important; height: 75px; background-color: rgba(255,255,255,1)!important; box-shadow: 0 0 5px rgba(51,51,51,.3);}
    header .wrap1550{ width: 100%; height: 100%; float: unset; padding-left: 15px; padding-right: 15px;}

    header h1.logo{ display: block; width: 105px; height: 32.5px; margin-top: 10px; }
    header h1.logo img{width: 100%; object-fit: cover; display: none;}
    header h1.logo img.scroll{ display: block;}
    header h1.logo.hide{ opacity: 0; pointer-events: none;}

    header .nav-wrap .reser-btnarea { position: relative; top: 22.5px; right: 0; padding-left: 0; transition: .3s;}

    header .nav-wrap .reser-btnarea ul{ font-size: 0;}
    header .nav-wrap .reser-btnarea li{ display: inline-block; padding-left: 5px; vertical-align: top;}
    header .nav-wrap .reser-btnarea li a{ width: 32.5px!important; height: 32.5px!important;}
    header .nav-wrap .reser-btnarea li a img{ width: 100%!important; height: 100%!important;}
    header .nav-wrap .reser-btnarea li:nth-child(2) a img{ position: relative; top: 0; padding-right: 0; }
    header .nav-wrap .reser-btnarea li.none-pc{ display: inline-block!important;}
    header .nav-wrap .reser-btnarea li a.m-span-wrap{ display: block; background-color: #263a4f;}
    
    header .nav-wrap .reser-btnarea li a.m-span-wrap i{ line-height: 32.5px; color:#fff; font-size: 17.5px;}
    header .nav-wrap .reser-btnarea li a.m-span-wrap i.close{display: none;}

    header .nav-wrap .reser-btnarea .menu.active a.m-span-wrap i.close{ display: inline-block;}
    header .nav-wrap .reser-btnarea .menu.active a.m-span-wrap i.open{ display: none;}


    /* panel */
    #panel{ position: fixed; display: none; width: 100%; height: calc(100% - 75px); top: 75px; left: 100%; padding-top: 50px; background-color: #fff; transition: .3s; z-index: 1000; text-align: center; }
    #panel::after{ content: ''; position:absolute; top: 0; left: 0; width: calc(100% - 30px); height: 1px; background-color: #263a4f; opacity: 0.1; left: 0; right: 0; margin: 0 auto;}
    #panel.active{ display: block; left: 0;}

    #panel .snav{display: none; width: 100%; background-color: #fff; height: auto; }
    #panel .snav a{line-height: 30px; font-size: 14px; color: #263a4f; opacity: .7; transition: .3s;}
    #panel .snav a:hover{color: #a3cc01; opacity: 1;}

    #panel > ul{ width: 100%; padding-left: 50px; padding-right: 50px; text-align: left;}
    #panel .mnav{ width:100%; height: auto; padding-left: 0; transition: .3s;}
    #panel .mnav p{ display: block; width: 100%; font-size: 20px; line-height: 40px; cursor: pointer;  transition: .3s;}
    #panel .mnav i{ font-size: 20px; transition: .3s; line-height: 40px; font-weight: 800;}

    #panel .mnav.active p{color: #a3cc01;}
    #panel .mnav.active i{ transform: rotate(180deg); color: #a3cc01;}
    #panel .mnav.active .snav{ display: block;}

    #panel .copy{ position: absolute; width: 100%; bottom: 25px;}

}




/* footer */
footer{ padding-top: 80px; padding-bottom: 80px; background-color: #fff; z-index: 3;}
footer .ftop{ overflow: hidden; border-bottom: 1px solid rgba(38,58,79,0.4); padding-bottom: 30px;}
footer .ftop ul{ overflow: hidden;}
footer .ftop .logo{ width: 183px; height: 56px; margin-right: 20px;}
footer .ftop .logo img{ width: 100%; object-fit: cover;}
footer .ftop .pad{ padding-left: 100px; }
footer .ftop .pad .kob{ color: #596f85; padding-bottom: 20px; line-height: 20px; font-size: 11px; }
footer .ftop .pad .kob a{color: #596f85; padding: 0 5px; }
footer .ftop .pad .kob a.first{ padding-left: 0;}
footer .ftop .pad .kob span{font-size: 15px; padding-bottom: 10px; color: #263a4f;}

footer .fbtm{ padding-top: 55px; overflow: hidden;}
footer .fbtm .copy p, footer .fbtm .copy img{ display: inline-block; color:#596f85; }
footer .fbtm .copy img{ width: 33px; height: 31px;}
footer .fbtm .copy p{ position: relative; top: -10px; font-size: 13px;}
footer .fbtm .copy p.enb{color: #263a4f;}

footer .fbtm .fr ul{ font-size: 0;}
footer .fbtm .fr li{ display: inline-block; font-size: 13px; }
footer .fbtm .fr li a{  color: #596f85; line-height: 31px; padding: 0 5px;}
footer .fbtm .fr li:last-child a{ padding-right: 0;}

/* =================== 820px =================== */
@media (max-width: 1024px) {
    footer{ padding-top: 20px; padding-bottom: 20px; height: 307.5px; overflow: hidden;}
    footer .ftop{ width: 200%; padding-bottom: 25px; position: relative; transform: scale(.5); left: -50%; top: -70px;}
    footer .ftop .pad{ width: 50%; padding-left: 15px; }
    footer .ftop .pad .kob{ padding-bottom: 24px; line-height: 24px; font-size: 14px; }
    footer .ftop .pad .kob span{font-size: 20px; padding-bottom: 20px; }

    footer .fbtm{ padding-top: 7.5px; overflow: hidden; top: -130px; position: relative;}
    footer .fbtm .fl, footer .fbtm .fr{ float: unset; text-align: center;}
    footer .fbtm .copy p, footer .fbtm .copy img{ display: inline-block;}
    footer img.none-pc{ width: 91.5px; height: 28px; left: 0; right: 0; margin: 0 auto;}

    footer .fbtm .copy, footer .fbtm .fr ul{ position: relative; width: 200%; transform: scale(.5); left: -50%; }
    footer .fbtm .fr ul{ top: -10px; padding-bottom: 25px;}
    footer .fbtm .fr li a{ line-height: 15.5px; padding: 0 5px;}

    footer .lastpad{ float: none; clear: both; width: 100%!important;}
}