/*header*/
#hd {position: fixed;left: 0;top: 0;right: 0;z-index: 999;transition: 0.5s ease;-webkit-transition: 0.5s ease;height: 215px;background: linear-gradient(rgba(114,114,114,0.45) 15%, rgba(115,115,115,0.25) 83%, rgba(255,255,255,0.0));}
#logo {position: relative;transition: 0.5s ease;-webkit-transition: 0.5s ease;z-index: 8888;height: 120px;text-align: center;padding-top: 10px;}
#hd.down #logo {display:none;}
#logo img {width: 220px;}
#logo_m{display:none;}
#btn-menu {position: absolute;	left: 260px;	bottom: -3px;width: 70px;height: 70px;z-index: 9999;padding: 20px 20px;cursor: pointer;border: none;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
#btn-menu:hover, #btn-menu:focus {outline: none;opacity: 0.8;}
#btn-menu .line {width: 100%;height: 2px;background: #3c3c3c;}
#btn-menu .line.no1, #btn-menu .line.no2 {margin: 5px 0;}
#btn-menu .line.no2 {	width:70%;}
#wrap.sub #btn-menu {display:none;}

.header-wrap {position:fixed;top:0;left:0;right:0;height: 87px;z-index:1600;/*background:rgba(245,240,235,0.1);*/transition: 0.5s;}
.hd_slide{background: rgba(255,255,255,0.86);}

.header-wrap.on { height:450px; background:rgba(0,0,0,0.7); color:#fff;  }
.header-wrap.on:after,
.header-wrap.fixed:after { opacity:1; background:#fff; opacity:0.2; }
.header-wrap.on .side-nav .gnb > ul > li > a,
.header-wrap.fixed .side-nav .gnb > ul > li > a { color:#fff; }
.header-wrap.on .side-nav .gnb .gnb-sub { display:block; }

#gnb_1dul:before {content: '';width: 100%;height: 1px;background-color: #fff;position: absolute;top: -14px; left: 50%;transform: translateX(-50%);}
#gnb > ul > li {float: left;position: relative;}
#gnb > ul > li > a {font-size: 14px;	font-weight: 600;letter-spacing: 2.5px;	padding: 10px 30px;color: #fff; font-family: 'Ubuntu', sans-serif;}
#gnb > ul > li > ul {position: absolute;left: 0;top: 40px;opacity: 0.7; font-size: 12px;line-height: 1.67;letter-spacing: -0.48px;}
#gnb > ul > li > ul ul {opacity:0.7;}footer  a 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;}
#gnb > ul > li > a:hover{color:#000;}

.side-nav {left:-100%;top:0;bottom:0;z-index:3000;transition:0.6s;border-top: 1px solid #fff;max-width: 55%;margin: auto;}
.side-nav.on { left:0; }
.side-nav .gnb > ul {text-align:center;margin-top: 20px;}
.side-nav .gnb > ul > li { display:inline-block; }
.side-nav .gnb > ul > li > a {position:relative;display:block;width: 145px;font-size: 16px;color:#fff;font-weight: 100;transition:transform 0.3s;letter-spacing:1px; font-family: 'Jua', sans-serif; }

.side-nav .gnb .gnb-sub {position:absolute; z-index:100;display:none;min-width: 140px;margin-top: 25px;text-align:center;}
.side-nav .gnb .gnb-sub li {line-height: 1; /*border-bottom:1px solid #9a9892;*/}
.side-nav .gnb .gnb-sub li a {display: block;line-height: 30px;font-size:13px;color: #ffffff;/*background: #ffffff;*/}
.side-nav .gnb .gnb-sub li a:hover, .side-nav .gnb .gnb-sub li a.current, .side-nav .gnb .gnb-sub li a.current strong {color:#fbc23e; }
.side-nav .gnb .gnb-sub ul li ul li a { font-size:12px }
.side-nav .gnb .gnb-sub .room-gnb { border-top:1px solid #9a9892; }
.side-nav .gnb .gnb-sub .room-gnb li a { background:#d3d3d3; }
.side-nav .gnb .gnb-sub .room-gnb li { border:0; }

#gnblogo {position: absolute;top: 40px;left: 260px;transform: translateY(-50%);transition: 0.5s ease;-webkit-transition: 0.5s ease;opacity: 1;}
#gnblogo img {/* opacity:0; */display: none;}


#gnbicon {position: absolute;right: 50px;transform: translateY(-50%);transition: 0.5s ease;-webkit-transition: 0.5s ease;opacity: 1;z-index:9999;}
#gnbicon a {padding: 0 10px;border: 1px solid #fff; font-size:14px; padding:5px 20px; color: #fff;border-radius: 40px;}
#gnbicon a:hover{ background:#fff; color:#000;}
#gnbicon01 {position: absolute;right: 200px;transform: translateY(-50%);transition: 0.5s ease;-webkit-transition: 0.5s ease;opacity: 1;z-index:9999;}
#gnbicon01 a {padding: 0 10px;border: 1px solid #fff; font-size:14px; padding:5px 20px; color: #fff;border-radius: 40px;}
#gnbicon01 a:hover{ background:#fff; color:#000;}

#gnbicon img {height: 18px;}


#wrap.main #hd {top:-395px;}
#wrap.main #hd.down, #hd.down {top:0px;background: #fff !important;box-shadow:2px 2px 7px rgba(0,0,0,0.20);opacity:0.86; height:85px;}
#wrap.sub #hd.down {top:-170px;}
#wrap.main #hd.on {	top:0;}
#wrap.sub #hd #gnblogo, #wrap.sub #hd #gnbicon {opacity: 0;top:-50%;}
#wrap.sub #hd.down #gnblogo, #wrap.sub #hd.down #gnbicon {opacity: 1;top:50%; }
#wrap.main #hd #gnblogo {top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
#wrap.main #hd.on  #gnblogo {opacity:0;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
#wrap.main #hd.on #btn-menu {opacity:0;	pointer-events:none;}
#wrap.main #gnb_1dul {opacity:0;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
#wrap.main #hd.on #gnb_1dul {	opacity:1;transition: 0.5s ease; -webkit-transition: 0.5s ease;}

.btn-gnb { display:none; position:absolute; left:20px; top:50px; z-index:5400; }
.btn-gnb span { position:relative; display:inline-block; width:37px; height:17px; margin:0 auto; vertical-align:middle;}
.btn-gnb span:before { content:''; position:absolute; top:0; left:0; right:0; display:block; height:1px; background:#333; -webkit-transition:0.7s; -ms-transition:0.7s; transition:0.7s;}
.btn-gnb span:after { content:''; position:absolute; top:8px;; left:0; right:0; opacity:1; display:block; height:1px; background:#333; -webkit-transition:0.7s; -ms-transition:0.7s; transition:0.7s;}
.btn-gnb span em { position:absolute; bottom:0; left:0; right:0; display:block; height:1px; background:#333; -webkit-transition:0.7s; -ms-transition:0.7s; transition:0.7s; }
.btn-gnb.on {   }
.btn-gnb.on span:before { width:30px; top:8px; left:-5px; background:#333; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }
.btn-gnb.on span:after { opacity:0; }
.btn-gnb.on span em { width:30px; bottom:8px; left:-5px; background:#333; -webkit-transform:rotate(-46deg); -ms-transform:rotate(-46deg); transform:rotate(-46deg); }
.btn-gnb i { display:inline-block; display:none; margin-right:10px; font-family:'Lato'; font-size:20px; color:#333; vertical-align:middle; }

.btn-close { position:absolute; right:20px; top:20px; display:block; width:32px; height:32px; background:url('../img/common/btn_close.png') 0 0 no-repeat; }

#hd.down .header-wrap.on{ height:350px; background:#fff; box-shadow:2px 2px 7px rgba(0,0,0,0.2);}
#hd.down .side-nav .gnb > ul{margin-top:30px;}
#hd.down .side-nav .gnb > ul > li > a { color:#333333;}
#hd.down .side-nav .gnb .gnb-sub li a{color:#333;}
#hd.down .side-nav .gnb .gnb-sub li a:hover{ color:#fbc23e;}
#hd.down #gnblogo img {height: 70px;display: block;}
#hd.down  #gnbicon, #hd.down  #gnbicon01 {top: 38px;}
#hd.down  #gnbicon a, #hd.down  #gnbicon01 a {border:1px solid #b5b5b5; color:#777777; transition:0.5s;}
#hd.down  #gnbicon a:hover {border:1px solid #fbc23e; color:#fff; background:#fbc23e; transition:0.5s;}
#hd.down  #gnbicon01 a:hover {border:1px solid #a7a09d; color:#fff; background:#a7a09d; transition:0.5s;}
#hd.down #gnb > ul > li > a{color:#333333;}
#hd.down #gnb > ul > li > a:hover{color:#a7a09d;}


/*foot*/
.foot-reserve {display:table;width:100%;height:640px; background:url('/web/img/view/bak_img.jpg') center center no-repeat; background-size:cover;}
.foot-reserve .rev-box{text-align: right;color:#757575;margin-right: 12%;}
.foot-reserve .rev-box h1{font-size: 40px;color: #ffffff;padding-top: 3.5%;line-height:0;margin: 3.67em auto 0;font-family: 'Recipekorea';}
.foot-reserve .rev-box p img {width: 13%;margin-bottom: 25px;}
.foot-reserve .rev-box .rev_txt_ {color: #ffffff;font-size: 14px;font-family: 'Arita-dotum-Medium';}
.foot-reserve .rev-box small{font-size: 13px;line-height: 5;}
.foot-reserve .rev_box{ margin:1.5% auto;}
.foot-reserve .rev_box{display: block;border: 1px solid #ffffff;line-height: 36px;width: 205px;text-align: center;color: #FFFFFF;font-size: 13px;margin-right: 0%;border-radius: 40px;font-family: 'Arita-dotum-Medium';}
.foot-reserve .rev_box:hover{color: #505050;background-color: #fbc23e;border: 1px solid #fbc23e;transition: all 0.3s ease-in-out;}

.col-sm-6 .sub a 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;}



footer { padding: 20px 0;}
.footer_com { margin-right: auto; margin-left: auto; position: relative; max-width:80%; text-align:center; color:#8c8c8c;}
.footer_com a{color:#7e7e7e !important;}
.footer_com hr { margin-bottom:20px;}
.bg-dark { background: #292929;}
.col-md-3 {width: 29%;float:left;margin:2%; }
.widget .title {font-size: 12px; line-height: 24px; font-weight: 400;  text-transform: uppercase; letter-spacing: 2px; font-weight: 700;  margin-bottom: 12px; }
.widget ul li{font-size:14px;line-height:1.8; font-family:'Pretendard-Regular'; font-weight:400;}
.rowinfo{display:inline-block; font-size:13px; }
.fottop{  display: block; text-align: center; width: 5%; float:right; font-size:20px;  margin: 1px auto 15px;}  



@media(max-width:1680px) {
#hd.down #gnblogo img{height:62px;}	
#gnblogo{left:200px;}
}

@media(max-width:1600px) {
.side-nav .gnb > ul > li > a{width:135px; font-size:15px;} #gnbicon a, #gnbicon01 a{padding:5px 15px;}
.side-nav{ max-width:60%;}
}

@media(max-width:1440px) {
#gnblogo{left:145px;} #gnblogo01{right: 168px;}	
	
.side-nav .gnb > ul > li > a{ width:120px;}
.side-nav .gnb .gnb-sub{min-width:120px; margin-top:20px;}
#gnbicon a , #gnbicon01 a{font-size:12px; }

}

@media(max-width: 1366px) {
#gnblogo{left:135px; top:33px;}
#gnbicon01{right: 154px;/* top:33px; */}


 #hd.down .header-wrap.on{height:320px;}
#logo img{width:190px;} #logo {padding-top:10px; height:125px;}
.side-nav .gnb > ul > li > a{width:120px;} .side-nav .gnb > ul{ margin-top:15px;}
.side-nav .gnb .gnb-sub{margin-top:11px;} .side-nav .gnb .gnb-sub li a{line-height:27px;}
#hd.down #gnbicon, #hd.down #gnbicon01{top:30px;}
#wrap.main #hd.down, #hd.down{height:70px;} #hd.down .side-nav .gnb > ul{margin-top:20px;}

.foot-reserve{height:590px;}

}

@media(max-width: 1280px) {
#logo{height:105px;}	
.side-nav .gnb > ul > li > a{width:105px;}  .side-nav .gnb .gnb-sub{min-width:100px;}
.side-nav .gnb > ul > li > a{font-size:14px;}
}
 

@media(max-width: 1025px) {
#hd {height: 90px; background:#fff;}
#gnb_1dul{width:90%;}
#gnblogo {left:30px;} #gnblogo01 {left:30px;} 

.footer_com{width:100%; padding:0; max-width:95%;} 
.col-md-3{width:100%; float:inherit; margin:0%;} .rowinfo{margin-top:15px;}
.widget ul li{font-size:11px; margin-bottom:15px;}

.btn-gnb {display:block;font-size:14px; top:35px;}
.btn-gnb i { font-size:14px; }
.side-nav { position:fixed; top:85px; width:100%; z-index:3000; margin:0; padding:40px 20px; text-align:center; background:#fff; transition:0.5s; }
.side-nav .gnb { overflow:hidden; }
.side-nav .gnb > ul > li { float:left; width:33%; min-width:auto; margin:0; height:auto; margin-bottom:15px; line-height:1.5; }	
.side-nav .gnb > ul > li > a { width:auto; line-height:1.5; font-size:18px; color:#333; }

.side-nav .gnb .gnb-sub { display:block; position:static; min-width:auto; margin-top:5px; background:none; box-shadow:none; }
.side-nav .gnb .gnb-sub li { margin:0; line-height:1.5; width:auto; display:inline-block;} .side-nav{max-width:100%; padding-top:0; border-top:1px solid #9a9892}
.side-nav .gnb .gnb-sub li a { font-size:12px; color:#333; background:#fff; margin:0 5px;}
#hd.down .side-nav{margin-top:0;}

#gnbicon a, #gnbicon01 a  { color:#666; border:1px solid #666;} 
#hd.down #gnblogo img{display:none;}
#hd.down #gnb_1dul {top:50%;}  #hd.down #gnbicon, #hd.down #gnbicon01{top:50%;} #hd.down #gnbicon a, #hd.down #gnbicon01 a{ border: 1px solid #565656; color:#565656;}

#btn-menu {left: 0;	bottom:-5px;	width:40px;height:40px;padding:0 7px;}
#logo_m {height: 75px;padding-top: 5px; display:block; text-align:center;} #logo{display:none;}
#gnb {height: 40px; position:initial;} #gnb_1dul {width: 100%;max-width: 95%;width: 62%; top:80%;}
#gnb_1dul:before {display:none;}
#gnb > ul > li > a {padding: 9px 6px;font-size: 12px;letter-spacing: 0.05em;color:#666;}
#gnb_1dul:before {	top:-8px;}
#gnbicon {top: 26px;}
#gnbicon01 {top: 72%; right:50px;}

#wrap.main #hd #gnblogo {top:46%;}
#wrap.sub #hd #gnblogo { display:none;}
#gnblogo img {height:40px;}
#wrap.main #hd.down, #hd.down {top:0px; opacity:1; height:90px;}
#wrap.main #hd.on {top:0;}
#hd.down .side-nav .gnb > ul{margin-top:15px;}

.slide-tit { top:40%; }
.slide-tit strong { font-size:30px; }
.slide-tit p { font-size:12px; }
.slide-btn { bottom:20px; }
	
.side-nav .gnb > ul > li{width:100%;}	

.header-wrap.on .side-nav .gnb > ul > li > a, .header-wrap.fixed .side-nav .gnb > ul > li > a{color:#333;}


#logo_m img{width:160px;}

.foot-reserve{ height:500px;} .foot-reserve .rev-box h1{margin-top:2.5em;}
}

@media(max-width: 800px) {
.side-nav .gnb .gnb-sub li a{line-height:30px;} 
.side-nav .gnb > ul > li > a{font-size:20px;} .side-nav .gnb .gnb-sub li a{font-size:18px;}
.side-nav .gnb > ul > li{margin-bottom:33px;}
.header-wrap.on, #hd.down .header-wrap.on{height:0;}

.foot-reserve{height:375px;}
.foot-reserve .rev-box p img{width:20%;} .foot-reserve .rev-box h1{margin-top:1.5em;}
}


@media(max-width: 650px) {
#gnbicon{ right:30px; width:20%;}
#gnbicon01{ right:30px; width:20%;}
.foot-reserve .rev-box p img{width:35%;}
.side-nav .gnb .gnb-sub li a{font-size:14px;} .side-nav .gnb > ul > li{ margin-bottom:20px;} .side-nav .gnb .gnb-sub{margin-top:0;}
}

@media(max-width: 550px) {
#gnbicon{width:auto; right:10px;} #gnbicon a{padding:5px 10px; font-size:11px;}
#gnbicon01{width:auto;right:10px;} #gnbicon01 a{padding: 5px 11px;font-size:11px;}
}

@media(max-width: 450px) {
.side-nav .gnb > ul > li > a{font-size:17px;} .side-nav .gnb .gnb-sub li a{font-size:12px;}
 
.foot-reserve{height:280px;} .foot-reserve .rev-box h1{margin-top:1em;}
.foot-reserve .rev-box .rev_txt_{font-size:11px;} .foot-reserve .rev-box small{font-size:10px; line-height:4;} .foot-reserve .rev-box h1{font-size:25px;} .foot-reserve .rev_box{line-height:30px; width:150px; font-size:12px;}
	 
}


@media(max-width: 380px) {

}

@media(max-width: 365px) {
}

@media all and (max-width: 330px){
.side-nav .gnb > ul > li{margin-bottom:10px;}	 .side-nav .gnb > ul > li > a{font-size:15px;} .side-nav .gnb .gnb-sub li a{font-size:10px;}
#logo_m img{width:117px;} #logo_m{padding-top:10px;} #gnbicon a{ font-size:10px;}
}