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

header{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100px; background-color: rgba(102,102,102,0); border-bottom: 1px solid rgba(255,255,255,0.2); font-size: 0; transition: .5s; }
header h1.logo{ position: relative; display: inline-block; width: 199px; height: 99px; top: 0; left: 0; z-index: 10;}
header h1.logo a{ display: block; width: 100%; height: 100%;}
header h1.logo .mo-scroll{ display: none;}
header .reser-wrap{ position: absolute; top: 0; right: 0; width: 260px; height: 100%; line-height: 100px; border-left: 1px solid rgba(255,255,255,0.2); text-align: center; transition: .5s;}
header .reser-wrap a.pc-reser-btn{ display: inline-block; width: 200px; height: 46px; line-height: 46px; transition: .5s; background-color: #EDDD5E; color: #404A3D; font-size: 15px; text-align: center; border-radius: 25px;}
header .reser-wrap a.pc-reser-btn:hover{ background-color: #5B8C51; color: #fff; }

header a.swim-btn{ display: inline-block; width: 200px; height: 46px; line-height: 46px; transition: .5s; background-color: #EDDD5E; color: #404A3D; font-size: 15px; text-align: center; border-radius: 25px; position: absolute; top: 22px; right: 290px; }
header a.swim-btn:hover{ background-color: #5B8C51; color: #fff; }



header .gnb{ display: inline-block; width: auto; height: 100%; text-align: center; line-height: 100px; padding-left: 60px; transition: unset; }
header .gnb > ul{ width: 100%; height: 100%; text-align: center; font-size: 0; position: relative; display: inline-block!important; margin-top: 0; }
header .gnb > ul > li{  position: relative; height: 100%; display: inline-block; box-sizing: border-box; padding: 0 42px;}
header .gnb > ul > li > a{ color: #fff; font-size: 16px; position: relative; transition: .5s; display: block; height: 100%; }
header .gnb > ul > li > a.active{ color: #EDDD5E;}
header .gnb > ul > li > a:after{ content: ''; display: block; position: absolute; bottom: 35px; left: 0; width: 100%; height: 1px; background-color: #EDDD5E; transform: scaleX(0); transition: .5s;}
header .gnb > ul > li > a.active:after{ transform: scaleX(1);}


header .gnb .subnav{ line-height: 43px; width: 200px; position: absolute; left: 40px; top: 140px; opacity:0; pointer-events: none; transition: .5s; z-index: 1000; }
header .gnb .subnav.active{ top: 100px; opacity: 1; pointer-events: initial;}
header .gnb .subnav li{ width: 100%; text-align: left; height: 43px; }
header .gnb .subnav li a{ display: inline-block; width: 100%; height: 100%; font-size: 14px; line-height: 43px;  background-color: #fff; color: #999; border-bottom: 1px solid #eee; transition: .3s; padding-left: 20px; }
header .gnb .subnav li a:hover{ background-color: #EDDD5E; color: #404A3D; }

/* header-scroll */
header.scroll{ z-index: 1000; height: 68px; background-color: #404A3D; }
header.scroll h1.logo{ display: none;}
header.scroll .reser-wrap{ line-height: 77px; border-left: 1px solid rgba(255,255,255,0); }
header.scroll a.swim-btn{ top: 10px; }

header.scroll .gnb{ line-height: 68px; padding-left: 259px; transition: unset; }
header.scroll .gnb > ul > li > a:after{ bottom: 15px; }
header.scroll .gnb .subnav{ top: 108px; }
header.scroll .gnb .subnav.active{ top: 68px; }




/* footer */
footer{ position: relative; background-color: #394336; width: 100%; padding-top: 40px; text-align: center; overflow: hidden;}
footer img.fo-bg{ position: absolute; height: 100%; object-fit: cover; right: 0; top: 0;}
footer .wrap1400 img.fo-logo{ position: absolute; left: 0; top: 0;}
footer .wrap900{ width: 900px; position: relative; margin: 0 auto; box-sizing: border-box; }
footer .f-top{ text-align: left;}
footer .f-top p{ display: inline-block; font-size: 12px; line-height: 18px; padding-top: 5px;}
footer .f-top h3{ display: inline-block; font-size: 20px; line-height: 35px; padding-right: 20px; }
footer .f-top ul{ padding-bottom: 40px; font-size: 0; height: auto; display: block; font-size: 0;}
footer .f-top ul li{ display: inline-block; height: 100%; position: relative; vertical-align: top; font-size: 12px; padding: 0 10px; overflow: hidden;}

footer .f-bottom{ padding: 11px 0 11px; border-top: 1px solid rgba(255,255,255,0.2); text-align: left;}
footer .f-bottom ul li{ display: inline-block; position: relative; font-size: 11px; padding: 0 10px;}
footer .f-bottom ul li a{ font-size: 11px;}
footer .f-bottom ul li:last-child img{ padding-left: 5px; position: relative; top: 5px;}



.scrollTop {
	position: fixed;
	right: 6px; bottom: -30px;
	display: inline-block;
	width: 40px; height: 40px;
	border-radius: 100%;
	background: rgba(32,32,32,0.8);
	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: 40px;
}
.scrollTop:hover {
	background: rgba(32,32,32,0.6);
	
}

.fixedPhone {
	position: fixed;
	right: 6px;
	bottom: 6px;
	display: inline-block;
	width: 40px; height: 40px;
	border-radius: 100%;
	background: rgba(255,255,255,0.8);
	box-shadow: 0.5px 0.9px 5px 0 rgba(36, 36, 36, 0.2);
    border: solid 1px #c6c6c6;
	text-align: center;
	cursor: pointer;
	z-index: 100;
	transition: all 0.3s;
	color: #333;
	opacity:0;
	/*visibility:hidden;*/
}

.fixedSwim {
	position: fixed;
	right: 6px;
	bottom: 54px;
	display: inline-block;
	width: 88px; height: 32px; line-height: 32px;
	border-radius: 25px;
	background-color: #EDDD5E; 
	text-align: center;
	cursor: pointer;
	z-index: 100;
	transition: all 0.3s;
	color: #404A3D;
	opacity:0;
    font-size: 12px;
	/*visibility:hidden;*/
}

.fixedSwim i{ font-size: 14px;}

.fixedSwim.active {
	bottom: 102px;
	transition: all 0.3s;
}


.fixedSwim:hover {
	/*
	background: rgba(32,32,32,0.8);
	color:#fff;
	*/
}


.fixedPhone.active {
	bottom: 54px;
	transition: all 0.3s;
}


.fixedPhone:hover {
	/*
	background: rgba(32,32,32,0.8);
	color:#fff;
	*/
}

.fixedPhone i {
	font-size: 18px;
	line-height: 40px;
}



/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ height: 60px; z-index: 1000; }
    header .gnb{ display: none; }

    header .reser-wrap{ position: absolute; top: 0; right: 56px; width: auto; height: 100%; line-height: 70px; border-left: 0; text-align: center;}
    header .reser-wrap a.pc-reser-btn{ display: none;}
    header .reser-wrap a.mo-reser-btn{ display: inline-block; width: 120px; height: 32px; border-radius: 25px; line-height: 32px; text-align: center; background-color: #EDDD5E; color: #404A3D; font-size: 12px;}
    header a.swim-btn{ display: none; }


    header h1.logo { width: 120px; height:60px; box-sizing: border-box; left: 0; right: unset; top: 0; overflow: hidden; }
    header h1.logo img{ width: 100%; object-fit: cover;}

    /* header scroll */
    header.scroll{ height: 48px; z-index: 1000; background-color: #404A3D; padding-top: 0; top: 0; border-bottom: 0; }
    header.scroll h1.logo{ display: inline-block; width: 60px; height:38px; left: 10px; top: 5px;}
    header.scroll h1.logo img.scroll-none{ display: none;}
    header.scroll h1.logo img.mo-scroll{ display: block;}
    header.scroll .reser-wrap{ line-height: 56px; }
    header.scroll #panelbtn{ margin: 15px 0;}

    /* header panelopen */
    header.panelopen{ height: 60px; z-index: 1000; background-color: #ECEEEF; padding-top: 0;}
    header.panelopen h1.logo{ display: none;}

    /* panel */
    .panel{ position: fixed; top: -300%; left: 0; width: 100%; height: calc(100% - 60px); background-color: #ECEEEF; z-index: 999; display: block; transition: .5s; padding: 0 10px; overflow-y: scroll; }
    .panel::-webkit-scrollbar {display: none; }
    .panel.active{ top: 60px; }

    .mNav > ul{ border-bottom: 1px solid #fff;}
    .mNav > ul > li{ width: 100%; overflow: hidden; text-align: left; }
    .mNav > ul > li > a{ display: block; width: 100%; height: 60px; box-sizing: border-box; line-height: 60px; font-size: 18px;  transition: .3s; color: #404A3D; padding: 0 20px; }
    .mNav > ul > li > a.active{ color: #5B8C51;}
    .mNav > ul > li > a div.plus-minus{display: inline-block; width: 13px; height: 14px; text-align: left; margin-top: 21px; position: relative;}
    .mNav > ul > li > a div.plus-minus span{position: absolute; background-color: #404A3D; transition: .3s;}
    .mNav > ul > li > a div.plus-minus span.plus-span01{ width: 61%; height: 2px; left: 0; top: 6px; transform: rotate(45deg);}
    .mNav > ul > li > a div.plus-minus span.plus-span02{ width: 61%; height: 2px; right: 0; top: 6px; transform: rotate(-45deg);}
    .mNav > ul > li > a div.plus-minus.active span{background-color: #5B8C51;}
    .mNav > ul > li > a div.plus-minus.active span.plus-span01{transform: rotate(-45deg);}
    .mNav > ul > li > a div.plus-minus.active span.plus-span02{ transform: rotate(45deg);}


    .mNav > ul > li a.btn160{ width: 100%; height: 40px; line-height: 40px; background: #061138; border-radius: 4px; color: #fff;}
    .mNav > ul > li a.btn160 img{ position: relative; top: 2px; padding-right: 2px;}

    .mNav .subNav{ padding: 14px 0; overflow: hidden;}
    .mNav .subNav li{ float: left; width: 50%; padding-left: 30px;}
    .mNav .subNav li.col-1{ width: 100%;}
    .mNav .subNav li a{ display: inline-block; font-size: 14px; width: 100%; height: 30px; line-height: 30px; color: #999;}


    .panel .text-wrap{ padding-top: 34px; padding-left: 20px;}
    .panel .text-wrap a, .panel .text-wrap p{ display: block; padding-bottom: 13px; font-size: 14px;}
    #panelbtn{  width: 22px; height: 24px; margin: 20px 0;  padding: 0; overflow: hidden; position: fixed; top: 0; right: 15px; z-index: 1100; }
    #panelbtn a{ display: block; width: 100%; height: 100%; position: relative; }
    
    #panelbtn span{ display: block; width: 22px; height: 3px; background-color: #fff; position: absolute; left: 0; transition: 0.3s;} 
    
    #panelbtn .line01{top: 1px;}
    #panelbtn .line02{top: 8px;}
    #panelbtn .line03{top: 15px;}
    

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


    
    /* footer */
    footer{ width: 100%; padding-top: 20px; text-align: center;}
    footer img.fo-bg{ position: absolute; width: 100%; height: unset; object-fit: cover; right: 0; top: unset; bottom: 0;}
    footer .wrap1400 img.fo-logo{ display: none;}
    footer .wrap900{ width: 100%;}
    footer .f-top{ text-align: left;}
    footer .f-top p{ font-size: 10px; line-height: 18px;}
    footer .f-top h3{ width: 128px; font-size: 18px; padding-bottom: 8px;}
    footer .f-top ul{ padding-bottom: 6px; font-size: 0; height: auto; display: block;}
    footer .f-top ul li{ display: block; height: 100%; position: relative; font-size: 10px; padding: 0 10px; margin-bottom: 14px;}
    footer .f-top ul li:nth-child(2){ padding-right: 0;}

    footer .f-bottom{ padding: 8px 0 10px; border-top: 1px solid rgba(255,255,255,0.2);}
    footer .f-bottom ul li{ display: inline-block; position: relative; font-size: 10px; padding: 0 3px;}
    footer .f-bottom ul li a{ font-size: 10px;}
    footer .f-bottom ul li:last-child img{ padding-left: 5px; position: relative; top: 5px;}


    .fixedPhone, .fixedSwim {
		opacity:1;
	}

}