header{ width: 100%; height: 80px; position: fixed; top: 0; left: 0; transition: .5s; z-index: 1000;}
header h1.logo{ display: inline-block; margin-left: 50px; position: relative;}
header h1.logo img{ position: absolute; left: 0; top: 0;}
header h1.logo img.black-show{ opacity: 0; transition: 1s;}
header h1.logo img.show{ opacity: 1;  transition: 1s;}
header #reser-btn{ position: fixed; display: block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; color: #fff; line-height: 36px; text-align: center; top: 19px; right: 90px; z-index: 1001; transition: 0.5s;}

/* panel */
.panel{ position: fixed; top: 0; right: -620px; width: 620px; height: 100vh; background-color: #839e38; z-index: 999; display: block; overflow-y: scroll; transition: .5s; padding-top: 107px; padding-left: 40px; padding-right: 40px;}
.panel::-webkit-scrollbar {display: none; }
.panel.active{ right: 0; }

.panel nav{ padding-bottom: 30px;}
.panel .wrap{ border-top: 2px solid rgba(255,255,255,.5); padding-top: 30px;}
.panel .wrap a{ display: inline-block; color: #fff; font-size: 16px; line-height: 16px; padding-right: 20px;}
.panel .wrap a i{ padding-right: 5px;}
.mNav > ul > li{ width: 100%; overflow: hidden; padding: 25px 0 0; text-align: left; }
.mNav > ul > li > a{ display: block; width: 100%; box-sizing: border-box; line-height: 34px; font-size: 34px;  transition: .5s; color: #fff; }
.mNav > ul > li > a span.m-circle{ display: inline-block; width: 0; height: 6px; border-radius: 50%; background-color: #fff; margin-right: 0; position: relative; top: -5px; opacity: 0; transition: .5s;}
.mNav > ul > li > a.active{ color: #fff;}
.mNav > ul > li > a.active span.m-circle{ width: 6px; opacity: 1; margin-right: 9px;}

.subNav{ width: 100%; overflow: hidden; display: none; padding: 20px 0 0; }
.subNav li{  width: 100%; height: auto; box-sizing: border-box;   }
.subNav li a{ display: block; width: 100%; height: 100%; line-height: 30px; font-size: 16px; box-sizing: border-box; color: rgba(255,255,255,.5); transition: .5s; }
.subNav li a:hover{ color: rgba(255,255,255,1);}


#panelbtn{  width: 25px; height: 25px; padding: 0; overflow: hidden; position: fixed; top: 26px; right: 50px; z-index: 1001; transition: .5s; text-align: right; line-height: 0; }


#panelbtn span{ display: inline-block; height: 2px; background-color: #fff; position: relative; right: 0; transition: 0.5s;} 
#panelbtn span:nth-child(2n-1){width: 80%;}
#panelbtn span:nth-child(2n){width: 100%;}
#panelbtn .line01{top: 0;}
#panelbtn .line02{top: 3px;}
#panelbtn .line03{top: 6px;}
#panelbtn .line04{top: 9px;}



/*active클래스 활성화 - x처리*/
#panelbtn.active span{ background-color: #fff;}
#panelbtn.active .line02, #panelbtn.active .line04{ transform: scaleX(0); }
#panelbtn.active .line01{ width: 100%; transform-origin: left top; left: 7px; top: 2px; transform: rotate(45deg); }
#panelbtn.active .line03{  width: 100%; transform-origin: left bottom; left: 7px; top: 11px; transform: rotate(-45deg); }



/* header active - 서브페이지, 메인스크롤 */
header.active { background-color: #839e38;}


header.addblack #panelbtn span{ background-color: #839e38;}
header.addblack #reser-btn{ border: 2px solid #839e38; color: #839e38; }
header.addblack h1.logo img.black-show{ opacity: 1;}
header.addblack h1.logo img.show{ opacity: 0;}

header.popen #panelbtn span{ background-color: #fff;}
header.popen #reser-btn{ border: 2px solid #fff; color: #fff; }

/* #blackbg */
#blackbg{ position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); display: none; z-index: 50;}

.scrollTop {
	position: fixed;
	right: 46px; bottom: -30px;
	display: inline-block;
	width: 40px; height: 40px;
	border-radius: 100%;
	background: #839e38;
    border: 2px solid #fff;
	text-align: center;
	cursor: pointer;
	z-index: 100;
	transition: all 0.3s;
	opacity:0;
	visibility:hidden;
}
.scrollTop.active {
	bottom:6px;
	display: inline-block;
	opacity:1;
	visibility:visible;
	transition: all 0.3s;
}
.scrollTop i {
	font-size: 18px;
	color: #fff;
	line-height: 38px;
}
.scrollTop:hover {
	background: #839e38;
}


footer{ width: 100%; height: 282px; background-color: #839e38; transition: .7s; position: relative; }
footer.active{ bottom: 0;}
footer .f-top{ overflow: hidden; padding-top: 90px; padding-right: 40px;}
footer .f-top .img-wrap{ width: 310px; padding-left: 50px;}
footer .f-top .img-wrap img{ position: relative; top: -20px;}
footer .f-top .w410{ width: 410px;}
footer .f-top .w518{ width: 518px;}
footer .f-top .fl li{color: #fff; font-size: 14px; padding-bottom: 15px;}
footer .f-top .fl li span{ display: inline-block; width: 75px; font-family: 'paybooc-Bold';}
footer .f-top .fl li a{color: #fff;}
footer .f-top .fr ul{ font-size: 0; padding-top: 26px;}
footer .f-top .fr ul li{ display: inline-block; font-size: 14px; padding: 0 10px; opacity: .5; transition: .5s;}
footer .f-top .fr ul li:hover{ opacity: 1;}

footer .f-bottom{ position: absolute; bottom: 0; left: 0; background-color: #6d6d6d; height: 80px; line-height: 80px; width: 100%; overflow: hidden; padding-left: 310px;}
footer .f-bottom p.noto{ font-size: 12px; opacity: .5; padding-left: 65px;}
footer .f-bottom p.noto span{ padding-right: 19px;}
footer .f-bottom .fl{ display: block; font-size: 0; opacity: .5;}
footer .f-bottom .fl li{ display: inline-block; font-size: 12px; padding: 0 10px; position: relative;}
footer .f-bottom .fl li:after{ content: '|'; font-size: 12px; position: absolute; left: 0; color: #fff;}
footer .f-bottom .fl li:first-child:after{content: '';}
footer .f-bottom .fl li img{ margin: -7px; left: 5px; margin-left: 1px;}

.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{ height: 310px!important; vertical-align: top;}

/* =================== 1023px =================== */
@media (max-width: 1023px) {

    header{ position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #839e38; z-index: 1000;}
    header h1.logo{ display: inline-block; margin-left: 10px; width: 85px; height: 40px; overflow: hidden; margin-top: 5px;}
    header h1.logo img{ width: 100%; object-fit: cover; position: relative; top: -5px;}
    header #reser-btn{ position: fixed; display: block; width: 21px; height: 21px; border-radius: 50%; border: 1px solid #fff; line-height: 19px; top: 15px; right: 34px; font-size: 11px; }

    #panelbtn{ width: 18px; height: 20px; overflow: visible; position: absolute; top: 14px; right: 10px; transition: .5s; pointer-events: unset; }
    #panelbtn .line02{top: 2px;}
    #panelbtn .line03{top: 4px;}
    #panelbtn .line04{top: 6px;}
    #panelbtn.active .line01{ position: absolute; width: 100%; transform-origin: center; left: 0; top: 50%; transform: rotate(45deg); }
    #panelbtn.active .line03{  position: absolute; width: 100%; transform-origin: center; left: 0; top: 50%; transform: rotate(-45deg); }
    
    header.popen #reser-btn{ border: 1px solid #fff; }
    #insta-btn{ position: absolute; right: 55px; top: 22px; width: 30px; text-align: center; height: 30px; line-height: 30px; border-radius: 50%; padding-left: 0; margin-left: 10px; color: #222; background-color: #fff; font-size: 14px; transition: .5s;  box-shadow: 1px 0 2px rgba(51,51,51,.1);}
    #insta-btn i {vertical-align: middle;}


    .panel{ right: -75%; width: 75%; padding-top: 48px; padding-left: 16px; padding-right: 16px;}
    .mNav > ul > li{ padding: 10px 0 0; text-align: left; }
    .mNav > ul > li > a{ line-height: 30px; font-size: 22px;  }
    .subNav{ padding: 5px 0 0; }
    .subNav li a{ line-height: 24px; font-size: 12px; color: #fff; }
    
    .panel nav{ padding-bottom: 10px;}
    .panel .wrap{ border-top: 1px solid rgba(255,255,255,.5); padding-top: 10px;}
    .panel .wrap a{ font-size: 12px; line-height: 14px; padding-right: 5px;}
    .panel .wrap a i{ padding-right: 2px;}

    footer{ height: auto; }
    footer.active{ bottom: 0;}
    footer .f-top{ overflow: hidden; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px;}
    footer .f-top .img-wrap{ position: absolute; width: 105px; height: 40px; padding-left: 10px; bottom: 0; left: 0; z-index: 10; overflow: hidden;}
    footer .f-top .img-wrap img{ width: 85px; object-fit: cover; position: relative; top: -6px;}
    footer .f-top .w410{ width: 100%;}
    footer .f-top .w518{ width: 100;}
    footer .f-top .fl li{color: #fff; font-size: 10px; padding-bottom: 6px;}
    footer .f-top .fl li span{ display: inline-block; width: 75px; font-family: 'paybooc-Bold';}
    footer .f-top .fr{ display: none;}

    footer .f-bottom{ position: relative; bottom: 0; left: 0; background-color: #6d6d6d; height: 40px; line-height: unset; padding-top: 5px; padding-bottom: 5px; width: 100%; overflow: hidden; padding-left: 105px;}
    footer .f-bottom p.noto{ font-size: 10px; opacity: .5; padding-left: 0;}
    footer .f-bottom p.noto span{ padding-right: 10px;}
    footer .f-bottom .fl{ display: block; font-size: 0; opacity: .5; }
    footer .f-bottom .fl li{ display: inline-block; font-size: 10px; padding: 0 5px; position: relative;}
    footer .f-bottom .fl li:after{ content: '|'; font-size: 10px; position: absolute; left: -1px; color: #fff;}
    footer .f-bottom .fl li:first-child:after{content: '';}
    footer .f-bottom .fl li:first-child{ padding: 0 5px 0 0;}
    footer .f-bottom .fl li img{ margin: -1px; width: 10px;}


    .scrollTop{ right: 6px;}
}