
/*header*/
.hd{position: fixed;top: 0;left: 0;z-index: 100;width: 100%;margin: 0 auto;transition: 0.8s;padding-bottom: 5px;height: 95px;}

.hd .white-box{height: 400px;background-color: #dad3c8;position: absolute;top: 0;left: -240px;right: 0;z-index: 0;width: 100vw !important;transform: scaleY(0);transition: 0.6s;transition-delay: 0.4s;transform-origin: top;}
.hd.on .white-box{transform: scaleY(1); transition-delay: 0s;}
.hd .white-box.small{height: 280px;}
.hd .logo{display: block;width: 106px;height: 100px;position: relative;float: left;margin-left: 90px;z-index: 5;transition: 0.8s;z-index: 999;}
.hd .logo img{position: absolute;top: 5px;left: 0;width: 100%;transition: 1.2s;display: block;}
.hd .logo img.logo_color{ opacity: 0;}

.hd .menu-preview-img{position: absolute; top: 150px; left: 925px; width: 250px; z-index: 5; opacity: 0; visibility: hidden; transition: 0.8s; pointer-events: none; transition-delay: 0s;}
.hd .menu-preview-img img{position: absolute;top: 0;left: -25px;display: block;width: 100%;opacity: 0;visibility: hidden;transition: 0.8s;}
.hd .menu-preview-img img.on{opacity: 1; visibility: visible;}

.hd.on .menu-preview-img{visibility: visible; opacity: 1 ;  transition-delay: 0.4s;}
.hd.on.fixed .menu-preview-img{transition-delay: 0s;}
.hd.fixed{background-color: #dad3c8;}
.hd.fixed .main-menu-wrap .sub-menu{/* transform: translateY(-50px); */}
.hd.fixed .white-box{/* margin-top: -50px; */}
.hd.fixed .hd-reser-btn{margin-top: -50px;}
.hd.fixed .menu-preview-img{/* transform: translateY(-50px); */}

.hd .main-menu-wrap{position:relative;float:left;margin-left: 50px;padding-top: 25px;z-index:10;}
.hd .main-menu{display:flex;/* align-items:flex-start; */gap: 20px;position:relative;z-index:10;}
.hd .main-menu>li{position:relative;min-width: 145px;text-align: center;}
.hd .main-menu>li>a{display:block;transition:.4s;position:relative;z-index:20;font-size: 15px;font-family: 'Pretendard-Regular';}
.hd .main-menu>li>a .eng{font-weight:600;letter-spacing:2px;}
.hd .main-menu>li>a .ko{margin-top:5px;color: #796957;font-weight: 600;}

.hd .sub-menu{position:absolute;top: 55px;left:0;opacity:0;width: 135px;visibility:hidden;transform:translateY(20px);transition:.45s;z-index:15;}
.hd.on .sub-menu{ opacity:1; visibility:visible;  transform:translateY(0);}
.hd .sub-menu li{  display:block;  margin-bottom:18px;  padding:0;}
.hd .sub-menu li:last-child{ margin-bottom:0;}
.hd .sub-menu li a{display:block;font-size: 13px;color: #877368;transition: 1.3s;line-height: 1.2;letter-spacing: -0.5px;font-family: 'Pretendard-Regular';}
.hd .sub-menu li a:hover{ opacity:1;  color:#998f84; padding-left:10px;}
.hd.on .white-box{ transform:scaleY(1);}

.hd .menu-preview-img{position:absolute;top: 65px;width: 450px;height: 280px;overflow:hidden;opacity:0;visibility:hidden;transition:.5s;z-index:30;}
.hd.on .menu-preview-img{opacity:1;visibility:visible;}
.hd .menu-preview-img img{position:absolute;/* inset:0; */width:100%;/* height:100%; */object-fit:cover;opacity:0;transition:.5s;}
.hd .menu-preview-img img.on{  opacity:1;}

.hd .main-menu>li>a:hover{ color:#998f84;}
.hd .main-menu>li>a:hover .eng{ color:#998f84;}
.hd .main-menu>li>a:hover .ko{ color:#998f84;}
.hd .sub-menu li{opacity:0;  transform:translateY(20px);  transition:.45s;}
.hd.on .sub-menu li{ opacity:1; transform:translateY(0);}

.hd.on .sub-menu li:nth-child(1){transition-delay:.05s;}
.hd.on .sub-menu li:nth-child(2){transition-delay:.10s;}
.hd.on .sub-menu li:nth-child(3){transition-delay:.15s;}
.hd.on .sub-menu li:nth-child(4){transition-delay:.20s;}
.hd.on .sub-menu li:nth-child(5){transition-delay:.25s;}



.hd.fixed .logo img.logo_white {opacity: 0;} .hd.fixed .logo img.logo_color {opacity: 1;}
.hd.fixed .main-menu>li>a .eng{color: #796957;}
.hd.fixed .sub-menu{/* top:120px; */}
.hd.fixed .menu-preview-img{/* top:110px; */}



.hd .sns-wrap{position: absolute;right: 18px;top: 0;z-index: 999;}
.hd .sns-wrap li{float: left;margin-left: 0;position: relative;z-index: 9;text-align: center;margin-left: 6px;line-height: 1.5;border-radius: 5px;font-size: 11px;margin-top: 12.5%;}
.hd .sns-wrap .sns{padding: 9px;border-radius: 10px;}
.hd .sns-wrap .sns_01 {background: #877368;}
.hd .sns-wrap .sns_02 {background: #bf4f49;}
.hd .sns-wrap .sns_03 {background: #4f4a4a;}


.hd.on .logo img.logo_white{visibility: hidden; opacity: 0;}
.hd.on .main-menu-wrap > ul > li > a:hover{color: #5f554b;}
.hd.on .main-menu-wrap > ul > li > a:hover .ico{background-color: #5f554b;}
.hd.on .main-menu-wrap > ul > li > a:hover .ico::after{background-color: #5f554b;}
.hd.on .main-menu-wrap > ul > li > a .ico{background-color: #998f84;}
.hd.on .main-menu-wrap > ul > li > a .ico::after{background-color: #998f84;}
.hd.on .main-menu-wrap > ul > li > a{color: #998f84;}
.hd.on .logo img.logo_color{visibility: visible; opacity: 1;}
	

.hd-btn {  position: unset; }
.eng{display:inline-block;}
.ko {display: none;letter-spacing: -0.2px;line-height: 0;}
.hd-btn:hover .eng { display: none;}
.hd-btn:hover .ko { display:inline-block; font-size:15px;}

.nav_br{display: none;}


/* footer */

footer {padding: 15px 0px 20px 0px;border-top:none !important;background: #f7f7f7;}
.footer_com {max-width: 78%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;position: relative;text-align:center;color:#565656;font-family: 'Pretendard-Light';}
.footer_com a{color:#7e7e7e;}
.bg-dark { background: #292929;}
.col-md-3 { width: 29%; float:left; margin:2% 2% 2.5% 2%;}
.widget .title {font-size: 11px;line-height: 24px;font-weight: 700;text-transform: uppercase;letter-spacing: 5px;margin-bottom: 12px;font-family: 'Pretendard-Regular';color: #8f8f8f;}
.widget ul li{font-size: 13px;line-height: 1.8;letter-spacing: -0.5px;font-family: 'Pretendard-Regular';}
.fottop{  display: block; text-align: center; width: 5%; float:right; font-size:20px;  margin: 1px auto 15px;}  

hr {display: block; height: 1px;  border: 0;  border-top: 1px solid #ccc;  margin: 0.5em 0;padding: 0;}

.info-fot .sub {font-size: 12px;}
.top-btn{width: 4%;text-align:center;position: fixed;right: 0%;bottom: 50px;font-size: 11px;color: #83837F;z-index: 10;cursor:pointer}

.simbol{width: 22px; display: inline-block; position: relative; top: 5px;}
#tm_bt{ width: 6%; /*height: 4%;*/  position: absolute;  right: 1%;  bottom: 118px;   z-index: 10;}


	
.info-fot b:before {content: "";display: inline-block;background-image: url("http://hi-web.co.kr/web/img/hi_web_s.png");vertical-align: middle;width: 20px;height: 20px;background-size: cover;background-position: center;margin: 0 1px 4px 4px;}



/* media */


@media all and (max-width : 1780px){

	.hd .hd_left{left: 45px;}
	.hd .menu-preview-img{top: 83px; width: 350px;}
	
}

@media all and (max-width : 1465px){

	.hd .logo{margin-left: 25px;}
	
	.hd .main-menu{gap : 0;}
	
	.hd .main-menu-wrap{margin-right: auto;}
	.hd .main-menu>li{min-width: 125px;}
	.hd .main-menu-wrap > ul > li > a{font-size: 14px;text-align: justify;}
	.hd .main-menu-wrap .sub-menu a{font-size: 12.5px;}
	.hd .menu-preview-img{left: 650px;}
	
	.hd .hd_left{left: 45px;}
	.hd .sns-wrap .sns{padding: 7px;}
	.footer_com{max-width: 85%;}
	.hd .white-box{left: -180px;}
	.hd .sub-menu{left: -33.33px;}
	
}



@media all and (max-width : 1025px){


	.hd{  padding-top:0;}
	.hd.fixed{ padding-top:0;}
	.hd .white-box{  display:none;}
	.hd .menu-preview-img{ display:none;}
	.hd .main-menu-wrap{ position:fixed;  top:0;left:0; width:100%; height:100vh; background:#f4efe9;  visibility:hidden;  opacity:0;  pointer-events:none;  transition:.4s; margin:0; overflow-y:auto;}
	.hd.click .main-menu-wrap{ visibility:visible;  opacity:1;  pointer-events:auto;}

	.hd .main-menu{ display:block; padding:100px 25px 40px;}
	.hd .main-menu>li{width:100%;margin-bottom: 7px;}
	.hd .main-menu>li>a{display:block;font-size:24px;color:#998f84;padding-bottom: 5px;border-bottom:1px solid rgba(0,0,0,.08);}
	.hd .sub-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;width:100%;margin-top: 0;/* padding-left:20px; */}
	.hd .main-menu>li>.sub-menu{display:block;text-align: left;}
	.hd .sub-menu li{margin-bottom:12px;opacity:1;transform:none;display: inline-block;padding-right: 11px;}
	.hd .sub-menu li a{ font-size:15px;color:#666; padding:6px 0;}


	.hd .logo .logo_color{  display:block; opacity:1;  visibility:visible;}
	.hd.click .logo .logo_color{  display:block; opacity:1;  visibility:visible;}

	.m-menu-btn{ display:block;}
	.hd .m-menu-btn{  position:absolute;  right:20px; top:25px; width:30px; height:30px; cursor:pointer; z-index:999;}

	.hd .m-menu-btn .line{   position:absolute;  left:0;  width:100%; height:2px;  background:#a98c7c; transition:.35s;}
	.hd .m-menu-btn .line1{   top:7px;}
	.hd .m-menu-btn .line2{ top:14px; width:80%;}
	.hd .m-menu-btn .line3{  top:21px;}
	.hd.click .m-menu-btn .line1{   transform:rotate(45deg); top:14px;}
	.hd.click .m-menu-btn .line2{ opacity:0;}
	.hd.click .m-menu-btn .line3{   transform:rotate(-45deg); top:14px;}

	.hd .sns-wrap{right: 70px;}
	
	
	.footer_com{max-width: 95%;}
	.top-btn{display:none !important;}
	.widget .title{margin:12px auto 0px;}
	.footer_com{width:100%;}
	.col-md-3{width:100%; float:inherit; margin:0%;} .rowinfo{margin-top:15px;}
	.widget ul li{font-size:11px;}
	
}



@media all and (max-width : 770px){
	
	.hd .logo img.logo_white{display: 0;}
	.hd .logo img.logo_color{opacity: 1;}
	
	.hd, .hd .inner-con{background: #f5f1ee !important;}
	
	.hd .logo{background-image: url(/web/img/logo.png) !important;}
	.hd .menu-btn .line{background-color: #666;}
	
	.hd .hd_left{display: none;}
	.m_menu_btn{display: block;} 
	.m_menu_btn a {color: #4A4A4A;display: inline-block;margin-left: 15px;font-size: 13px;margin-top: 10px;text-align: center;left: 5px;}
	
	.hd .main-menu-wrap .sub-menu> li:nth-child(1) a{padding-top: 15px;}
	
	
	
}

@media all and (max-width : 565px){
	
	
	.m_menu_btn a{margin-left: 5px;}
	
	.hd .logo{width: 100px;}
	
	
}


@media all and (max-width : 455px){
	
	.hd .logo{margin-left: 15px;}
	
	.nav_br{display: block;}
	
	.hd .sns-wrap .sns i {display: block; text-align: center; margin: auto; margin-bottom: 2.5px;}
	.hd .sns-wrap .sns{display: block; margin-top: 0; line-height: 1.2; font-size: 10px;}
	.hd .sns-wrap li{margin-top: 11.5%;}
	
	.hd .sub-menu li{margin-bottom: 0;}

}