@charset "utf-8";
#skipnavigation { display: none }
#skipnavigation a { position: absolute; left: -3000% }
#skipnavigation a:focus { display: block; left: 0; top: 0; z-index: 10000; width: 100%; height: 30px; line-height: 30px; background: #039; color: #fff; text-align: center }
#skip-navigation { display: none }
#header { position: relative; z-index: 1; width: 100%; margin: 0 auto; background: #2d2d2d; }
#head { position: relative; width: 1100px; height: 70px; margin: 0 auto }
#head .head_L { float: left; width: 57% }
#head .head_R { float: right; width: 38% }
#head .txtTitle { position: absolute; width: 100%; text-align: center; margin-top: 20px; font-size: 20px; color: #ccc }
#head .txtTitle > span { color: #a5cd39; font-size: 24px; }
#head .txtTitle > span > em { color: #66a2ec }
#logo { width: 240px; float: left; padding-top: 12px; margin-left: 3px; }
#logo>a { float: left }
#logo>img { float: left }
#logo>span { float: left; display: inline-block; position: relative; top: 12px; margin-left: 8px; padding-left: 8px; font-size: 16px; color: #66b7c7; line-height: 120%; }
#logo>span >em { color: #fff }
/*헤더추가메뉴*/
#head ul.menu { float: right; text-align: center; margin-top: 18px; }
#head ul.menu li { display: inline; float: none; margin: 0 0 0 16px }
#head ul.menu li:first-child { margin: 0 }
#head ul.menu li>a:link { display: inline-block; color: #999; text-align: center; text-decoration: none; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
#head ul.menu li>a:visited { color: #999 }
#head ul.menu li>a:active { color: #999 }
#head ul.menu li>a:hover { color: #66b7c7; text-decoration: none; cursor: pointer }
#head ul.menu li>a>i { display: block; font-size: 26px }
#head ul.menu li>a.on { color: #66b7c7; text-decoration: none; cursor: pointer }
#head ul.menu li span { position: relative; display: inline-block; font-size: 14px }
#head ul.menu li span > em.new { position: absolute; display: inline-block; top: -30px; right: -4px; width: 18px; height: 18px; text-align: center; background: #e06857; color: #fff; font-size: 11px; border-radius: 100%; }
/*메뉴*/
#gnb { float: right; position: relative; top: 38px; right: 0; font-size: 12px }
#gnb li { float: left; margin-left: 3px; }
#gnb li select { height: 22px; }
#gnb li.person { position: relative; font-size: 12px; color: #999; margin-right: 10px; display: inline-block }
#gnb li.person>span { position: relative; font-size: 14px; color: #ccc; margin-right: 2px; display: inline-block }
#gnb li>div a.outlink { margin: 0; display: block; padding: 2px 10px; border-radius: 3px; background: #00d1a0; font-size: 12px; cursor: pointer; color: #fff !important }
#gnb li>div a.outlink:hover { margin: 0; display: block; padding: 2px 10px; border-radius: 3px; background: #1a1a1a; font-size: 12px; cursor: pointer; color: #fff !important }
#gnb li>div { display: inline-block; margin: 0; padding: 0; border-radius: 3px; background: #666; font-size: 12px; cursor: pointer }
#gnb li>div a { border-radius: 3px; display: block; padding: 2px 10px; color: #eee !important }
#gnb li>div a:hover { border-radius: 3px; background: #333; color: #fff !important }
#gnb li>div a.board { border-radius: 3px; display: block; padding: 2px 10px; color: #333 !important; border: 1px solid #ccc; background: #eee }
#gnb li>div a.board:hover { border-radius: 3px; background: #fff; color: #000 !important }
#nav { width: 100%; height: 50px; background: #ef800a }
/* 메뉴하나 */ 
#mnb li:first-child:nth-last-child(1) { width: 100%; }
/* 메뉴두개 */
#mnb li:first-child:nth-last-child(2), #mnb li:first-child:nth-last-child(2) ~ li { width: 50%; }
/* 메뉴세개 */
#mnb li:first-child:nth-last-child(3), #mnb li:first-child:nth-last-child(3) ~ li { width: 33.3333% }
/* 메뉴네개*/ 
#mnb li:first-child:nth-last-child(4), #mnb li:first-child:nth-last-child(4) ~ li { width: 25%; }
/* 메뉴다섯개*/ 
#mnb li:first-child:nth-last-child(5), #mnb li:first-child:nth-last-child(5) ~ li { width: 20%; }
#mnb { margin: 0 auto }
#mnb li { float: left; background: url(../../images/web_a/common/mnb_bar.gif) left top no-repeat; line-height: 140% }
#mnb li:first-child { background: none }
#mnb li a { display: block; height: 50px; padding-top: 17px; font-size: 16px; color: #fff; text-align: center; text-decoration: none; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
#mnb li.on { display: block; background: #e51937; color: #fff; text-align: center; text-decoration: none; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
#mnb li:hover { display: block; background: #e51937; color: #fff; text-align: center; text-decoration: none; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
/*메인버튼리스트*/
.mBtnList { width: 395px; margin: 8vh auto 0 }
.mBtnList .title { width: 395px; height: 70px; margin-bottom: 30px; }
.mBtnList .title > span { display: inline-block; width: 100%; text-align: center; font-size: 20px; color: #636b73; text-shadow: 0 0 6px rgba(255,255,255,1) }
.mBtnList .title > span >em { font-size: 30px; color: #3759c1; font-weight: 600 }
.mBtnList .title > span:nth-child(2) { font-size: 22px; color: #4b4184; text-shadow: 0 0 10px rgba(255,255,255,1) }
.mBtnList ul.mBList { }
.mBtnList ul.mBList li { width: 100%; height: 116px; }
.mBtnList ul.mBList li.f01 { background: #3759c1; border: 1px solid rgba(0,0,0,.2) }
.mBtnList ul.mBList li.f02 { background: #ff7a00; border: 1px solid rgba(0,0,0,.2) }
.mBtnList ul.mBList li.f03 { background: #4b4184; border: 1px solid rgba(0,0,0,.2) }
.mBtnList ul.mBList li.f04 { background: #00a5a3; border: 1px solid rgba(0,0,0,.2) }
.mBtnList ul.mBList a { display: inline-block; width: 100%; height: 116px; margin-bottom: 14px; box-shadow: 0 0 6px rgba(0,0,0,0.3) }
.mBtnList ul.mBList li > div { position: relative; width: 100%; height: 116px; padding: 32px 0 24px 130px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.mBtnList ul.mBList li.f01 > div { background: url("../../images/web_a/main/ico_01.png") 55px 34px no-repeat }
.mBtnList ul.mBList li.f02 > div { background: url("../../images/web_a/main/ico_02.png") 55px 34px no-repeat }
.mBtnList ul.mBList li.f03 > div { background: url("../../images/web_a/main/ico_03.png") 55px 34px no-repeat }
.mBtnList ul.mBList li.f04 > div { background: url("../../images/web_a/main/ico_04.png") 55px 34px no-repeat }
.mBtnList ul.mBList a:hover { display: inline-block; width: 100%; height: 116px; margin-bottom: 14px; box-shadow: 2px 2px 3px rgba(0,0,0,0.20) inset }
.mBtnList ul.mBList a:hover div { box-shadow: 2px 2px 3px rgba(0,0,0,0.20) inset }
.mBtnList ul.mBList a:hover li.f01 > div { background: url("../../images/web_a/main/ico_01.png") 56px 35px no-repeat }
.mBtnList ul.mBList a:hover li.f02 > div { background: url("../../images/web_a/main/ico_02.png") 56px 35px no-repeat }
.mBtnList ul.mBList a:hover li.f03 > div { background: url("../../images/web_a/main/ico_03.png") 56px 35px no-repeat }
.mBtnList ul.mBList a:hover li.f04 > div { background: url("../../images/web_a/main/ico_04.png") 56px 35px no-repeat }
.mBtnList ul.mBList li span { position: relative; display: block; font-size: 13px; line-height: 140%; color: rgba(255,255,255,0.5) }
.mBtnList ul.mBList li span:first-child { font-size: 24px; color: rgba(255,255,255,0.8) }
.mBtnList ul.mBList a:hover li > div span { top: 1px; left: 1px; color: rgba(255,255,255,0.8) }
.mBtnList ul.mBList a:hover li > div span:first-child { font-size: 24px; color: rgba(255,255,255,1) }
.bg { background: url("../../images/web_a/main/bg.png") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg #contents { background: none; }
.bg #wrapper::before { background: none; }
/* ****************** 탭메뉴 ********************** */
/*탭*/
.tab_wrap { float: left; width: 100%; position: relative }
.tab_wrap ul.tab { height: 40px; border-bottom: 1px solid #e5e5e5 }
.tab_wrap ul.tab li { float: left; width: 196px; height: 39px; border-top-right-radius: 5px; border-top-left-radius: 5px; background-color: #f8f8f8; border: 1px solid #e5e5e5; margin-left: -1px }
.tab_wrap ul.tab li a { display: block; width: 100%; text-align: center; font-size: 18px; color: #666; padding: 8px 0 0 0; }
.tab_wrap ul.tab li:hover a { display: block; width: 100%; height: 39px; text-align: center; font-size: 18px; background-color: #06c; color: #fff; padding: 8px 0 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.tab_wrap ul.tab li:hover { background-color: #06c; border-bottom: 1px solid #06c; border-top: 1px solid #c86700; border-left: 1px solid #c86700; border-right: 1px solid #c86700; color: #fff; }
.tab_wrap ul.tab li.on { background-color: #06c; border-bottom: 1px solid #06c; border-top: 1px solid #c86700; border-right: 1px solid #c86700; border-left: 1px solid #c86700; }
.tab_wrap ul.tab li.on a { color: #fff }
.tab_wrap ul.tab li em.new { position: relative; display: inline-block; top: -3px; right: -6px; width: 18px; height: 18px; text-align: center; background: #e0002a; color: #fff; font-size: 11px; border-radius: 100%; }
* html #container { height: 100% }
#wrapper { position: relative; width: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
/*
#wrapper::before {    left: 0;    right: 50%;    margin-right: 360px;    background: url(../../images/web_a/common/pattern_1.png) right 0 repeat;}
#wrapper::after {    left: 50%;    margin-left: -360px;    right: 0%;    background: url(../../images/web_a/common/pattern_4.png) 0 0 repeat;}
*/
#container { position: relative; padding: 0; width: 100%; min-height: 100%; height: 100%; }
#contents { width: 1200px; height: 100%; min-height: 990px; margin: 0 auto; padding: 30px 0 60px; background: #fff }
#sub_contents { width: 100% }
#sub_contents .ptitle { padding: 10px 30px; background: url(../../images/web_a/common/arrow02.gif) 10px 50% no-repeat; font-weight: bold; font-size: 18px; color: #333 }
#sub_contents .stitle { margin-bottom: 20px; font-weight: bold; font-size: 15px }
.title_wrap { float: left; width: 100%; margin: 0 0 10px }
.mtitle_wrap { display: none }
h2 { font-size: 28px; color: #232323; letter-spacing: -2px }
h2 p { display: inline-block; *display:inline;
font-size: 19px; letter-spacing: -1px }
h2 .grey_text { padding-left: 6px; font-size: 13px; color: #808080 }
.onMouseOut { background: #fff }
.onMouseOver { background: #eaf2fb }
.sfont { font-size: 11px }
div.reserv { width: 100%; margin-bottom: 50px }
.seatReserv { width: 100%; margin-bottom: 50px; background: #fff; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_shArea { float: right; position: absolute; right: 0; top: 10px; width: 244px; z-index: 999 }
.btn_shArea li { float: left; width: 100%; margin-left: 4px }
.btn_shArea li:first-child { margin-left: 0px }
.btn_hide { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none }
.btn_show { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none }
.btn_userBox { padding: 12px 0 !important; font-size: 14px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_shArea.en .btn_userBox { font-size: 11px; letter-spacing: -1px; }
.btn_mapHS { }
.btn_mapShow { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none }
.btn_mapHide { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none }
.btn_mapHS { }
.btn_mapHS.one { width: 100% }
/* 예약버튼 */
.btn_reserv { float: left; width: 100%; padding: 10px 20px 14px; background: #333; font-size: 17px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_reserv:hover { float: left; width: 100%; padding: 10px 20px 14px; background: #06c; font-size: 17px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_reserv:active { float: left; width: 100%; padding: 10px 20px 14px; background: #06c; font-size: 17px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_reserv i { font-size: 13px }
/* 퇴실하기 */
.btn_out { float: left; width: 100%; padding: 8px 20px 8px; border-radius: 3px; margin-right: 4px; background: #999; border: 1px solid #888; font-size: 14px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_out:hover { float: left; width: 100%; padding: 8px 20px 8px; margin-right: 4px; background: #06c; color: #fff; border: 1px solid rgba(0,0,0,.1); text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_out:active { float: left; width: 100%; padding: 8px 20px 8px; margin-right: 4px; background: #06c; color: #fff; border: 1px solid rgba(0,0,0,.1); text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_outside { float: left; width: 120px; padding: 8px 20px 8px; border-radius: 3px; margin-right: 4px; background: #999; border: 1px solid #888; font-size: 14px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_outside:hover { float: left; width: 120px; padding: 8px 20px 8px; margin-right: 4px; background: #06c; border: 1px solid rgba(0,0,0,.1); color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_outside:active { float: left; width: 120px; padding: 8px 20px 8px; margin-right: 4px; background: #06c; border: 1px solid rgba(0,0,0,.1); color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_meeting { float: left; width: 120px; padding: 8px 20px 8px; border-radius: 3px; background: #999; border: 1px solid #888; font-size: 14px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_meeting:hover { float: left; width: 120px; padding: 8px 20px 8px; background: #06c; border: 1px solid rgba(0,0,0,.1); color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_meeting:active { float: left; width: 120px; padding: 8px 20px 8px; background: #06c; border: 1px solid rgba(0,0,0,.1); color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_Inner { float: left; width: 100%; padding: 8px 20px 8px; border-radius: 3px; background: #999; border: 1px solid #888; font-size: 14px; color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_Inner:hover { float: left; width: 100%; padding: 8px 20px 8px; background: #06c; border: 1px solid rgba(0,0,0,.1); color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.btn_Inner:active { float: left; width: 100%; padding: 8px 20px 8px; background: #06c; border: 1px solid rgba(0,0,0,.1); color: #fff; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.navDisplay { position: fixed; top: 0; z-index: 1000; -webkit-animation: ani-header02 .5s forwards; animation: ani-header02 .5s forwards }
.navFixed { position: fixed; top: 0; z-index: 1000; -webkit-animation: ani-header .5s forwards; animation: ani-header .5s forwards }
/*로그인*/
.loginWrap { width: 100%; height: 100%; background: #f4f4f2; }
.loginArea { position: relative; top: 0; width: 700px; height: 320px; background: #fff; overflow: hidden; margin: 0 auto; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); }
#login { position: relative; z-index: 5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.logtitle { position: relative; float: left; width: 210px; height: 320px; background: #222 }
.logtitle > p { position: absolute; top: 50px; left: 0px; width: 210px; height: 196px; background: url("../../images/web_a/common/logTitle01.png") center bottom no-repeat; text-indent: -9999px }
.loginForm { position: absolute; width: 390px; left: 264px; top: 42px; float: left; }
.loginForm > p { margin-bottom: 50px }
.loginForm .titl01 { display: inline-block; font-size: 24px; color: #d70051; letter-spacing: -1px }
.loginForm .titl02 { position: relative; top: 0px; left: 0; font-size: 12px; display: inline-block; color: #999 }
.loginForm .titl03 { display: inline-block; font-size: 26px; color: #333; margin: 30px 0 16px 0 }
.loginForm ul { float: left; margin: 0 }
.loginForm ul li { float: left; margin: 0 4px 6px 0 }
.loginForm .login_btn { display: block; width: 78px; height: 46px; background: url("../../images/web_a/common/btn_login.png") left top no-repeat; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.loginForm .login_btn:hover { background: url("../../images/web_a/common/btn_login_.png") left top no-repeat; }
.loginForm .input_login { width: 230px; height: 46px; border: 1px solid #b1b1b1; background-color: #b1b1b1; color: #fff; line-height: 120%; font-size: 16px; letter-spacing: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.loginForm .input_login:focus { background: #999; color: #fff }
.loginForm .input_login::placeholder {
color:#fff
}
.loginForm .remember { float: left; width: 100%; margin-top: 8px; font-size: 14px }
.logComt { margin: 20px auto; width: 365px; }
.loginForm .login_btn { display: block; width: 384px; height: 46px; font-size: 18px; padding-top: 10px; text-align: center; background: #66b7c7; color: #fff; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.loginForm .login_btn:hover { background: #589fad }
.loginForm .login_btn:active { }
.loginForm .login_btn > i { font-size: 14px; position: relative; top: -1px; left: -1px }
.loginForm .input_login { width: 190px; height: 46px; border: 1px solid #b1b1b1; background-color: #b1b1b1; color: #fff; line-height: 120%; font-size: 16px; letter-spacing: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.loginForm .input_login:focus { background: #999; color: #fff }
.loginForm .input_login::placeholder {
color:#fff
}
.loginForm .remember { float: left; width: 100%; font-size: 14px }
.logComt { margin: 20px auto; width: 540px; padding-left: 80px }
.logComt > a { color: #4462d3 }
.logComt > a:hover { color: #6c52ff }
.logComt > span { color: #ea002c }
.reg {float:right; margin-right:10px}
/* 셀랙트박스 */
.select_office { font-size: 25px; color: #333; height: auto; padding: 4px 26px 4px 10px; border: none; background-color: #fff; cursor: pointer }
.select_office:focus { outline: none; background-color: #fff }