@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500);
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.sub-banner-text {
  font-family: 'GmarketSansMedium', sans-serif;
  font-size: 28px;
  text-align: center;
  margin-top: 20px;
}




	*, *:before, *:after { box-sizing: inherit; }
 html { box-sizing: border-box; }
  body {margin:0 auto;  list-style-type: none; }
          a{ text-decoration: none; }
		img{border-style:none;}



/*  헤더박스  */
#Top_box {background-color:#fff; z-index:1;}



#Top_MenuLine{position:fixed; width:100%; z-index:9999; }

.logo_box{ height:100px; text-align:center; z-index:10; }
.img_box{display:table; margin:0 auto; text-align:center; }
.logo_box .img_box >li{display:table-cell; text-align:center; vertical-align:middle; width:180px; height:100px; }
.logo_box .img_box > li> a> img{ width:200px; height:auto;}


 .container1 {height:100px;  margin: auto; float:left;  z-index:10;}
.box3 {float:left;  height:100px; /*background: #FFF;*/ z-index:10;}

nav{border-bottom:1px solid #dcdcdc;}





/* 1201픽셀 부터 full까지 */
@media screen and (min-width:944px) {
.logo_box { width:15%; float:left; }
.img_box {width:135px; /*background-color: #fff;*/}
.container1 { width: 75%; margin-left:5%;}
.box3 {width: 5%;}
.div0 {width:100%; height:100px;}
}


/* 0px픽셀 ~ 800픽셀  (핸드폰 가로 / 테블릿PC) */
@media screen and (max-width: 943px) {
.logo_box {margin-left:10%; width:80%; float:left;}
.img_box {width:100%; text-align:center;}
.container1 {width: 0%; display:none;}
.box3 {width:10%;}


.div0 {margin:0 auto; width:100%; height:100px;  background: #FFF;  z-index:-1; clear:both;}

}








.container1 ul li a {font-family:'Noto Sans KR', sans-serif; font-weight: 700;}
.a-1{padding-top:35px;}

        h1 { text-align:center; margin-top:150px;}

        /* Navigation Styles */
        nav ul { font-size: 0; margin: 0; padding: 0; }
        nav ul li {display: inline-block;  position: relative;width: 135px;}

        nav ul li a {
            color:#111; /* 메뉴 전체글씨 컬러 */
			font-weight:600;  display: block;
            font-size: 18px;  padding: 15px 14px;  transition: 0.3s linear;
			text-align:center;
        }

        nav ul li:hover {color:#838383;}  /* 메인메뉴 오버시 */
		nav ul>li:hover a {color:#184459; font-size:17px;}

        nav ul li ul {
            /*border-bottom: 5px solid #7db248;  서브메뉴 오버시 라인컬러 */
            display: none;  position: absolute;  width: 150px;
        }

        nav ul li ul li { /*border-top: 1px solid #444;*/  display: block;  }
        nav ul li ul li:first-child { border-top: none; }
        nav ul li>ul li a {
            background: #FFF; /*서브 메뉴 처음 */
            display: block;  padding: 8px 14px; font-size: 13px;
        }

 nav ul li ul li a:hover { background: #e8e7e6; }  /*서브 메뉴 오버시 */
 nav .fa.fa-angle-down { margin-left: 6px; }
.menu2_box{width:100%;} 
.menu2_box > ul{height:40px;}










/***************   헤더 메뉴 *****************/
#icon {display: none; }


#icon+label {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	cursor: pointer; /* 커서를 올려놓을 때 모양이 바뀐다. */
	z-index: 5;      /* Z-INDEX 를 사용해서 삼지창 모양이 계속 떠있게 해준다. */
}







#icon+label>span {
	position: absolute;
	display: block;
	width: 100%;
	height: 5px;
	border-radius: 30px;
	transition: all 0.35s; /* 진행되는 과정들을 천천히 보여주는 역할 */ 
}







#icon+label>span:nth-child(1) {
	top: 0px; 
			background:#0e6ca5;  /*(햄버거 아아콘 1)*/
}



#icon+label>span:nth-child(2) {
	top: 50%; 		
	-ms-transform: translateY(-50%);
    -mos-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	/* 엘리먼트를 변형할 때 쓴다. 비틀거나 구부리거나 돌릴 때 . 여러가지로 모양을 바꿀 때 */
		background:#126e88;  /*(햄버거 아아콘2)*/
}

#icon+label>span:nth-child(3) {
	bottom: 0px; 
	background:#12887a;  /*(햄버거 아아콘3)*/
}

#icon:checked+label>span:nth-child(1) {
	top: 50%; 
	-ms-transform: translateY(-50%) rotate(45deg);
	-mos-transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
				background:green;  /*(X아아콘1)*/
}

#icon:checked+label>span:nth-child(2) {
	opacity: 0;
}

#icon:checked+label>span:nth-child(3) {
	bottom: 50%;
	-ms-transform: translateY(50%) rotate(-45deg);
	-mos-transform: translateY(50%) rotate(-45deg);
	-webkit-transform: translateY(50%) rotate(-45deg);
	-o-transform: translateY(50%) rotate(-45deg);
				background:blue;  /*(X아아콘2)*/
}


#icon+label+#header {
	position: fixed; /* 스크롤을 내리더라도 같은 위치에서 붙어다닌다. */
	background: #EEE;
	top: 100px;
	padding: 20px 25px 25px 25px;
	box-sizing: border-box;
	
	transition: all 0.35s;
}

#icon:checked+label+#header {
	right: 0px;
}

#icon:checked+label+#header>ul>li>a {
	color: #111;
}



/* 햄버거 메뉴 안 카테고리 css */
#headerMenu {
	background:#FFF;

	font-size: xx-large;
	margin-top: 10px;
   float:left;

}

#Menuhotel {
width:100%;	
	padding: 20px;
	list-style: none;
	 position: relative;    

}



#Menuhotel:hover .graa{position: absolute; display:block;   width:150px;height:200px;
                                                background:#EEE; left:60px; top:50px; z-index:3;}
#Menuhotel>li{ width:150px; height:45px; border:1px solid #d6d6d6; padding-top:10px; cursor:pointer;}


 .graa #categryfont{ font-size:12pt;}

.graa {display:none;  width:150px;height:200px;}