@font-face{
  font-family:'nbg';
  font-style:normal;
  font-weight:normal;
  src: url('../font/NanumBarunGothic.eot');
  src: local('.'), url('../font/NanumBarunGothic.woff') format('woff'), url('../font/NanumBarunGothic.ttf') format('truetype'); 
}

@font-face{
  font-family:'nbgb';
  font-style:normal;
  font-weight:normal;
  src: url('../font/NanumBarunGothicBold.eot'); 	
  src: local('.'), url('../font/NanumBarunGothicBold.woff') format('woff'), url('../font/NanumBarunGothicBold.ttf') format('truetype'); 
}

html, body {padding:0; margin:0; font-family:'Roboto','nbg',sans-serif; font-size:14px; color:#333;}
div, ul, li {position:relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding:0; margin:0; list-style:none;}
a {text-decoration:none; color:#333;}

h1, h2, h3, h4, h5, p, small {margin:0; line-height:1.5; font-weight:normal;}
h1 {font-size:36px;}
h2 {font-size:28px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:16px;}
p {font-size:14px;}
small {font-size:12px;}
table {border-spacing:0;}

#wrap {width:100%; position:relative;}
#wrap .inner {width:1240px; margin:0 auto; padding:0 20px;}

.fc_red,
.fc_must {color:#ff2c2c;}
.fc_blue {color:#0072ff;}
.fc_green {color:#becd00;}
.fc_brown {color:#816d53;}

.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt40 {margin-top:40px !important;}

#login {width:100%; border-bottom:1px solid #eee; background:#fafafa; text-align:right;}
#login ul {display:inline-block; /*border-left:1px solid #eee;*/}
#login ul li {display:inline-block; /*border-right:1px solid #eee;*/ float:left;}
#login a {line-height:30px; color:#777; font-size:13px; padding:0 10px;}
#login a:hover {text-decoration:underline;}

#top {width:100%; height:100px; background:#fff; border-bottom:1px solid #ddd;}
#top .logo {float:left; line-height:100px;}
#top ul.nav {text-align:center; height:100px; float:right; font-size:18px; font-weight:bold;}
#top ul.nav li {cursor:pointer; float:left; line-height:100px; position:relative;}
#top ul.nav li a {display:inline-block; width:100%; height:100px; padding:0 30px;}
#top ul.nav li:hover > ul.subnav {display:block;}
#top ul.subnav {display:none; position:absolute; top:100px; left:30px; width:100%; z-index:999; background:rgba(0,0,0,0.7); text-align:center; padding:10px 0;}
#top ul.subnav li {width:100%; padding:0;  font-weight:normal; line-height:35px !important; height:35px !important;}
#top ul.subnav li a {color:#fff; font-size:15px; display:inline-block; z-index:10000; line-height:35px !important; padding:0; height:35px !important;}
#top ul.subnav li a:hover {color:#becd00;}


#cont {width:100%; min-height:1000px;}

#trail {width:100%; height:120px; background:#555; border-top:1px solid #515151; color:#ddd; padding:22px 0 20px; margin-top:70px;}
#trail a.top {position:absolute; top:18px; right:20px; width:40px; text-align:center; background:rgba(0,0,0,0.2);}
#trail a.top i {line-height:20px; color:#aaa;}
#trail a.top p {color:#aaa; font-size:10px; line-height:20px;}
#trail span.bar:before {content:'|'; margin:0 7px; color:#888;}
#trail .copy {margin-top:10px; font-size:13px; color:#aaa; text-transform:uppercase;}
#trail .copy a {color:#ddd;}
#trail i.admin {padding:2px 5px; color:#999;}

#quick {display:none; width:150px; height:250px; z-index:10000; position:absolute; right:0; top:600px; background:rgba(0,0,0,0.5); padding:10px; text-align:center; color:#fff;}



#main_slide .slide li {width:100%; height:800px; background-position:center center; background-size:cover;}
#main_slide .next,
#main_slide .prev {position:absolute; z-index:998; top:362px; cursor:pointer; opacity:0.5;}
#main_slide .next:hover,
#main_slide .prev:hover {opacity:1;}
#main_slide .next {right:50px;}
#main_slide .prev {left:50px;}
#main_slide .pager {z-index:997; position:absolute; left:0; bottom:0; width:100%;}
#main_slide .pager li a {width:20%; height:6px; background:#333; display:inline-block; float:left;}
#main_slide .pager li a.active {background:#becd00; height:6px;}
#main_slide .txt {position:absolute; bottom:340px; z-index:996; text-align:center; color:#fff; padding:20px 0; width:40%; left:30%;}
#main_slide .txt h1 {font-size:60px; font-weight:700; text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);}
#main_slide .txt h4 {background:rgba(0,0,0,0.5);}

#main .tit {margin-bottom:30px;}
#main .tit h3, #main .tit p {display:inline-block;}
#main .tit h3:before {content:''; width:20px; height:2px; background:#becd00; display:inline-block; margin-top:-10px; position:absolute;}
#main .tit p {color:#777; margin-left:10px;}

#main .links {text-align:center; margin-top:30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 0;}
#main .links a {padding:0 30px; font-size:16px; text-transform:uppercase; line-height:40px;}
#main .links a i {margin-right:10px;}
#main .links a:hover i {color:#816d53;}
#main .links a.center {border-left:1px solid #ddd; border-right:1px solid #ddd;}

#main .service {padding:15px 0 0; margin-top:30px;}
#main .service_slide li {height:350px; background-position:center center; background-size:cover;}
#main .service_slide .cont {width:100%; height:80px; background:rgba(255,255,255,0.6); position:absolute; bottom:0; padding:0 40px;}
#main .service_slide .cont h2 {display:inline-block; line-height:80px;}
#main .service_slide .cont p {display:inline-block; line-height:80px; margin-left:10px;}
#main .service_slide .cont a {text-align:center; font-size:13px; background:#333; color:#fff; line-height:40px; width:100px; position:absolute; bottom:20px; right:30px; display:none;}
#main .service_slide .cont a:hover {background:#222;}
#main .service_pager {position:absolute; bottom:0; right:0; z-index:994; width:140px; height:350px;}
#main .service_pager li {float:left; width:100%;}
#main .service_pager li a {width:100%; height:80px; margin-bottom:10px; background-position:center center; background-size:cover; display:inline-block;}
#main .service_pager li a h5:hover {color:#becd00;}
#main .service_pager li a h5 {line-height:80px; text-align:center; background:rgba(0,0,0,0.8); color:#fff;}
#main .service_pager li a.active h5 {background:#becd00; color:#333;}
#main .service_pager li a.active h5:hover {color:#333;}

#main .info {padding:15px 0; margin-top:50px;}
#main .info ul {height:300px;}
#main .info li {float:left; height:100%; background-position:center center; background-size:cover;}
/*#main .info li.img {width:320px; color:#fff;}*/ /*20181211*/
#main .info li.img {width:659px; color:#fff;}
/*#main .info li.txt {width:200px; text-align:center; padding:30px; border:1px solid #ddd; border-left:none;}*/ /*20181211*/
#main .info li.txt {width:400px; text-align:center; padding:30px; border:1px solid #ddd; border-left:none;}
#main .info li.txt :before {content:''; width: 0; height: 0; border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent #fff transparent transparent; position:absolute; top:50%; left:-10px; margin-top:-8px;}
#main .info li.txt  p {margin-top:20px; color:#777;}
#main .info li.txt  a {background:#816d53; line-height:40px; display:inline-block; position:absolute; bottom:20px; left:10%; width:80%; color:#fff;}
#main .info li.txt  a:hover {background:#735f46;}
#main .info li.btns {width:120px; margin:0; padding:0;}
#main .info li.btns a {width:100%; height:90px; border:1px solid #ddd; display:inline-block; line-height:15px; margin-left:20px; font-size:14px; color:#777; text-align:center; margin-bottom:12px;}
#main .info li.btns a:hover i {color:#735f46;}
#main .info li.btns a i {display:block; line-height:65px; font-size:32px; color:#816d53;}
#main .info li.btns a.last {margin-bottom:0;}
#main .info li.btns a.last img {display:block; margin:0 auto 5px;}

#main .travel {padding:15px 0; margin-top:50px; position:relative;}
#main .travel_slide_wrap {width:1200px; margin:0 auto;}
#main .travel_slide li {height:250px; text-align:center;}
#main .travel_slide li .img {background-position:center center; background-size:cover; width:100%; height:190px;}
#main .travel_slide li .btn {width:100%; border:1px solid #ddd; background:#fff; position:absolute; bottom:0; left:0;}
#main .travel_slide li .btn a {width:100%; line-height:60px; font-size:16px; display:inline-block;}
#main .travel_next,
#main .travel_prev {position:absolute; z-index:993; bottom:120px; cursor:pointer; opacity:0.7;}
#main .travel_next:hover,
#main .travel_prev:hover {opacity:1;}
#main .travel_next i,
#main .travel_prev i {line-height:40px;}
#main .travel_prev {left:-50px;}
#main .travel_next {right:-50px;}




#page_visual {width:100%; height:200px; background-position:center center;}

#page .tit {margin:40px 0 60px; text-transform:uppercase; text-align:center;}
#page .tit h1 {margin-top:10px; font-weight:normal; color:#333;}
#page .tit h1:before {display:none;}
#page .tit small {color:#becd00; letter-spacing:5px;}
#page .submenu {border-right:1px solid #ddd; display:inline-block; margin-top:30px;}
#page .submenu li {display:inline-block; border:1px solid #ddd; border-right:none; float:left;}
#page .submenu li a {padding:0 45px; line-height:38px;}
#page .submenu li.on {background:#816d53; border-color:#816d53;}
#page .submenu li.on:after {content:''; width: 0; height: 0; border-style: solid; border-width: 10px 6px 0 6px; border-color: #816d53 transparent transparent transparent; position:absolute; bottom:-10px; left:50%; margin-left:-6px;}
#page .submenu li.on a {color:#fff;}
#page h1 {font-weight:700; text-transform:uppercase;}
#page h1:before {content:''; width:30px; height:3px; background:#becd00; display:inline-block; margin-top:-5px; position:absolute;}
#page h3 {padding-left:10px; position:relative;}
#page h3:before {content:''; width:3px; height:20px; background:#816d53; display:inline-block; top:8px; left:0; position:absolute;}
#page h5 {margin:10px 0;}
#page ul.list {margin-top: 20px;}
#page ul.list li:before {content: ''; display: inline-block; width: 3px; height: 3px; background: #816d53; margin-right: 10px; position: absolute; bottom: 10px; left: 0px;}
#page ul.list li {padding-left:15px; line-height:24px;}
#page table {border-top:2px solid #aaa; width:100%; text-align:center;}
#page table th,
#page table td {border-bottom:1px solid #ddd; padding:15px 0; border-right:1px solid #ddd;}
#page table .last {border-right:0;}
#page table th {background:#f4f4f4;}
#page .btns {text-align:center; padding:0; margin:20px 0 0 0;}
#page .btns a {display:inline-block; padding:0 20px; line-height:40px; margin:0 5px; font-size:13px;}
#page .btns a.type01 {color:#777; border:1px solid #ddd;}
#page .btns a.type01:hover {background:#f4f4f4;}
#page .btns a.type02 {color:#fff; border:1px solid #816d53; background:#816d53;}
#page .btns a.type02:hover {background:#6e593e;}

#page .greeting {display:block;}
#page .greeting .img {display:inline-block; width:45%;}
#page .greeting .img img {width:100%;}
#page .greeting .txt {width:50%; text-align:justify; float:right;}
#page .greeting .txt h2 {color:#816d53; margin-bottom:30px;}
#page .greeting .txt p {font-size:15px;}
#page .greeting .txt .admin {text-align:right; margin-top:30px;}
#page .greeting .txt .admin span {margin-left:10px; font-size:18px;}

#page .location {display:block;}

#page .room .map img {width:100%;}
#page .room .map span {position:absolute; z-index:996; width:100px; background:#333; text-align:center; border-top:2px solid #becd00;}
#page .room .map span a {color:#fff; width:100%; display:inline-block; line-height:30px;}
#page .room .map span:after {content:''; width: 0; height: 0; border-style: solid; border-width: 10px 6px 0 6px; border-color: #333 transparent transparent transparent; position:absolute; bottom:-10px; left:50%; margin-left:-6px;}
#page .room .map span.room1 {top:230px; left:450px;}
#page .room .map span.room2 {top:370px; left:420px;}
#page .room .map span.room3 {top:230px; left:660px;}
#page .room .map span.room4 {top:340px; left:760px;}
#page .page_slide .slide li {width:100%; height:600px; background-position:center center; background-size:cover;}
#page .page_slide .next,
#page .page_slide .prev {position:absolute; z-index:998; cursor:pointer; opacity:0.5; background:rgba(0,0,0,0.7); width:50px; height:50px; text-align:center;}
#page .page_slide .next img,
#page .page_slide .prev img {height:30px; margin:10px 0;}
#page .page_slide .next:hover,
#page .page_slide .prev:hover {opacity:1;}
#page .page_slide .next {bottom:6px; right:0;}
#page .page_slide .prev {bottom:56px; right:0;}
#page .page_slide .pager {z-index:997; position:absolute; left:0; bottom:0; width:100%;}
#page .page_slide .pager li a {width:12.5%; height:6px; background:#333; display:inline-block; float:left;}
#page .page_slide .pager li a.active {background:#becd00;}

.landscape .page_slide .pager li a {width:10% !important;}


#page .travel {display:inline-block;}
#page .travel .tabmenu {margin-bottom:50px; display:inline-block; width:100%;}
#page .travel .tabmenu li {float:left; width:12.1%; margin:0 0.2%; line-height:40px; color:#777; border:1px solid #ddd; text-align:center;}
#page .travel .tabmenu li.menu_on {background:#f4f4f4;}
#page .travel .img {display:inline-block; width:40%;}
#page .travel .img img {width:100%;}
#page .travel .txt {width:55%; text-align:justify; float:right;}
#page .travel .txt h1 {color:#816d53; font-weight:normal;}
#page .travel .txt h1:before {display:none;}
#page .travel .txt h4 {margin:10px 0 40px;}

#page .food {text-align:center; font-size:16px; color:#aaa;}
#page .food i {margin:30px 0; color:#ddd;}






/*login*/
#page .login .idpw {margin:50px auto 20px; display:block; border:1px solid #ddd; border-radius:5px; padding:10px 20px; line-height:40px; width:50%;}
#page .login .idpw p {line-height:40px;}
#page .login .idpw p i {color:#816d53;}
#page .login .idpw input {width:100%; padding:5px 10px; margin:5px 0;  border:1px solid #dadada; background-color:#f8f8f8; font-size:13px; font-weight:bold;}
#page .login .idpw input[type="submit"] {background:#becd00; border:1px solid #becd00; border-image: none; display: block; line-height:30px; width:100%; border-radius:3px; cursor:pointer; margin-top:30px;}

#page .login .info {font-size:14px; width:50%; margin:0 auto; text-align:center; padding:10px 20px;}
#page .login .info a {background:#777; border-radius:3px; width:48%; display:inline-block; float:left; line-height:40px; color:#fff; margin:0 1% 10px;}
#page .login .info a:hover {background:#666;}


.input_text { border:1px solid #dadada; background-color:#f8f8f8; margin:10px; width:95%; height:20px;}
.input_text2 { border:1px solid #dadada; background-color:#f8f8f8; margin:10px; width:95%; height:500px; }
.input_text3 { border:1px solid #dadada; background-color:#f8f8f8; width:30%; height:25px; text-align:left;}

.join_table {width:100%; margin:0 auto; border-top:1px solid #444444;}
.join_table th {background-color:#f3f3f3; padding:15px 20px; width:18%; border-bottom:1px solid #dadada; text-align:center;}
.join_table td {text-align:left; border-bottom:1px solid #dadada; font-size:12px;  color:#606060; padding:8px !important; border-right:none !important;}
.join_table td .input_text3 {margin:5px 0;}
.join_table td a.address_btn {border:1px solid #666; background:#666; color:#fff; border-image: none; display: inline-block; line-height:24px; width:80px; cursor:pointer; font-size:12px; text-align:center; border-radius:3px;}

.join_btn {text-align:center;}
.join_btn input[type="submit"] {background:#becd00; border:1px solid #becd00;border-image: none; display: block; line-height:30px; width:200px; border-radius:3px; cursor:pointer; margin:30px auto 0; font-size:13px; font-weight:bold;}



.subnav_wrap{
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    -o-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}