@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

:root {
  --site_width:1440px;
  --color_primary: #00A598;
  --color_second: #f8f8f8;
}

* { margin: 0; padding: 0; box-sizing: border-box;}
a { color: inherit; text-decoration: inherit; }
a:hover, a:focus, a:active { text-decoration: none; }
ul li {list-style: none;}
img { vertical-align: middle; border: none; }
#sham_ico {cursor: pointer;}
#ham_close {cursor: pointer;}
.mobile_only {display: none;}
header {background: #302f2f; margin: 0 auto; }
.header_wrap {max-width: var(--site_width); margin: 0 auto; padding: 20px 0; display: flex; align-items: center; justify-content: center;}
#pano {width: 100%; height: 100%;}
.trans100 {-webkit-transition:all 100ms;-moz-transition:all 100ms;-o-transition:all 100ms;-ms-transition:all 100ms;transition:all 100ms;}
.trans200 {-webkit-transition:all 200ms;-moz-transition:all 200ms;-o-transition:all 200ms;-ms-transition:all 200ms;transition:all 200ms;}
.trans300 {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;transition:all 300ms;}
.trans400 {-webkit-transition:all 400ms;-moz-transition:all 400ms;-o-transition:all 400ms;-ms-transition:all 400ms;transition:all 400ms;}
.trans500 {-webkit-transition:all 500ms;-moz-transition:all 500ms;-o-transition:all 500ms;-ms-transition:all 500ms;transition:all 500ms;}
.trans600 {-webkit-transition:all 600ms;-moz-transition:all 600ms;-o-transition:all 600ms;-ms-transition:all 600ms;transition:all 600ms;}

#pano {position: relative; width: 100%}
#img_cafe {position: absolute; top: 20px;; right:20px; background-image: url("/images/naver_cafe.png"); width: 80px; height: 101px; background-size: cover; background-position: center; background-repeat: no-repeat;  bottom: 20px; right: 20px; z-index: 9999999999; cursor: pointer;}

#headerInner h3{position:relative; max-width:var(--site_width);padding-top:20px;margin:0 auto;font-family:'Tangerine', 'Great Vibes', cursive, 'Poppins', 'Noto Sans KR';font-size:45px;letter-spacing:3px;}
#headerInner h3:hover{color: goldenrod;}
#headerInner .logo_b:hover{color: goldenrod;}
#headerInner .logo_b{position:relative; max-width:var(--site_width);padding-top:0px;margin:0 auto;font-family:'Tangerine', 'Great Vibes', cursive, 'Poppins', 'Noto Sans KR';font-size:15px;letter-spacing:3px;}
.nav_line {height: 0.5px; background: #9f9f9f; margin: 0px 0px 30px 0px;}
header .logo {margin: auto;width: 200px;height: 50px;color: white;display: flex;align-items: center;justify-content: center;font-size: 24px; }
header .logo_b {margin: auto;width: 200px;height: 50px;color: white;display: flex;align-items: center;justify-content: center;font-size: 24px; }
.nav ul .submenu {display: none;position: absolute;background: rgba(226, 178, 21, 0.7);color: #222;min-width: 140px;box-shadow: 0 2px 8px rgba(0,0,0,0.08);padding: 8px 0;z-index: 10;border-radius: 8px;margin-top: 4px;}
.nav ul li {position: relative;}
.nav ul li:hover > .submenu {display: block;}
.nav ul .submenu li {padding: 8px 20px;white-space: nowrap;cursor: pointer;}
.nav ul .submenu li:hover {background: #f5f5f5;}
.nav > ul > li {cursor: pointer;}
#nav > ul > li span:hover {color: goldenrod;}
#nav {max-width: var(--site_width); margin: 0 auto;}
#nav > ul {display: flex; justify-content: center; padding: 0px 0px 20px 0px; gap:80px; }
#nav > ul > li span {color: rgb(191, 191, 191); font-size: 18px; font-weight: 500;}


/* index */
.info {background: #302f2f;}
.info .info_box{max-width: var(--site_width); margin: 0 auto;}
.info .info_box > ul {background: #302f2f; display: flex; justify-content: space-between; padding: 0px; }
.info .info_box > ul li {border-radius: 8px;}
.info .info_box > ul li ul {display: flex; border: 1px solid rgba(255, 255, 255, 0.1); flex-direction: column; justify-content: center; align-items: center;}
.info .info_box > ul li ul {padding: 50px 0px 50px 0px;}
.info .info_box > ul li ul li:nth-child(2) {font-size: 20px; padding-top: 30px;}
.info .info_box > ul li ul li:nth-child(3) {font-size: 14px; font-weight: 400; text-align: center; padding: 10px 20px 10px 20px}
.info_box ul li:hover {background: #454444;}
.info_box ul li:hover > ul {background: #454444;border-radius: 8px;    }
.info_box ul li:hover > ul li span {color: goldenrod;}
.info_box ul li:hover > ul li .material-icons {color: goldenrod;}
.info .info_box .big-icon {font-size: 48px;display: flex;justify-content: center;align-items: center;width: 100%;}

/* footer */
footer {background: #302f2f;color: #fff;padding: 20px 0;text-align: center;padding-top: 30px;}
footer .footer_wrap > ul {display: flex; justify-content: center; align-items: center; gap: 20px; padding: 0px;}
footer .footer_wrap > ul > li span{font-size: 14px; color: rgb(165, 165, 165);}
footer .footer_wrap .copy {font-size: 14px; margin-top: 30px;  color: rgb(165, 165, 165);}

/* 햄버거 메뉴 */
.ham_ico {display: none; margin-right:0px; background-image: url('/images/ham_ico.png');width: 44px; height: 44px; background-size: cover; background-position: center; background-repeat: no-repeat;}
.hambuger_wrap {display: none; z-index: 1000;}
.hambuger_wrap {position: absolute; max-width: var(--site_width); top:0px; width: 60%; background: goldenrod; height: 100%; z-index: 999999991;}
.hambuger_wrap .inner {padding-left: 10px; padding-right: 10px;}
.hambuger_wrap .hambuger .top {margin-top: 30px; text-align: center;}
.hambuger_wrap .hambuger .top > ul {display: flex; justify-content: space-between; align-items: center;}
.hambuger_wrap .hambuger .top:after {content: ""; height: 1px; width: 100%; display: block; background: #e9dddd; margin-top: 10px;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(1) {font-size: 20px; font-weight: 700; color:#fff;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(2) {background-image: url("/images/hambuger_close.png"); width:40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hambuger_wrap .hambuger .menu {margin-top: 15px;}
/* .hambuger_wrap .hambuger .menu > ul {display: flex; justify-content: start; align-items: left; gap: 0px; flex-direction: column; color:#fff; font-size: 18px; font-weight: 600;} */
/* .hambuger_wrap .hambuger .menu > ul  li {height:  50px; align-items: center; padding-left: 6px;} */
.hambuger_wrap .hambuger .menu > ul  li span {line-height: 50px; font-size:16px;}
/* .hambuger_wrap .hambuger .menu > ul  li:hover { color:#494948;} */
.hambuger_wrap .hambuger .menu > ul > li ul:nth-of-type(1)  {height: 50px;}
/* .hambuger_wrap .hambuger .menu > ul > li ul:nth-of-type(2)  {height: 150px;} */
#ham_close {background-image: url("/images/hambuger_close.png"); width:40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.submenu.accordion-content > li { padding: 10px;}
.accordion-item {cursor: pointer;}
.accordion-item ul  li:hover {color:#302f2f}


/* company */
.company {background: #302f2f; padding-top: 100px; padding-bottom: 100px;} 
.company_info {background: #302f2f; max-width: var(--site_width); margin: auto; text-align: center;}
.company_info h3 {font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 10px; color: goldenrod;}
.company_info p {font-size: 16px; color: #fff; margin-bottom: 30px;}
.company_info .txt span {display: inline; padding: 0px; margin-top: 30px; font-size: 16px; }
.company_info .txt{padding: 20px; border: 1px solid #fff; display: inline-block;}
.company_info .title {color: goldenrod; font-family:'Tangerine', 'Great Vibes', cursive, 'Poppins', 'Noto Sans KR';font-size:45px;letter-spacing:3px;}

/* map */
.map {background: #302f2f; padding-top: 100px; padding-bottom: 100px;} 
.map_info {background: #302f2f; max-width: var(--site_width); margin: auto; text-align: center;}
.map_info h3 {font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 10px; color: goldenrod;}
.map_info p {font-size: 16px; color: #fff; margin-bottom: 30px;}

#daumRoughmapContainer1755653579758 {width: 1440px;}
.mapinfo {background: #302f2f;}
.mapinfo .mapinfo_box{max-width: var(--site_width); margin: 0 auto;}
.mapinfo .mapinfo_box > ul {background: #302f2f; display: flex; justify-content: center; padding: 20px; }
.mapinfo .mapinfo_box > ul li {border-radius: 8px; width: 380px;}
.mapinfo .mapinfo_box > ul li ul {display: flex; border: 1px solid rgba(255, 255, 255, 0.1); flex-direction: column; justify-content: center; align-items: center;}
.mapinfo .mapinfo_box > ul li ul {padding: 50px 0px 50px 0px;}
.mapinfo .mapinfo_box > ul li ul li:nth-child(2) {font-size: 20px; padding: 30px;}
.mapinfo .mapinfo_box > ul li ul li:nth-child(3) {font-size: 14px; font-weight: 400; text-align: center; padding: 10px 20px 10px 20px}
.mapinfo_box ul li:hover {background: #454444;}
.mapinfo_box ul li:hover > ul {background: #454444;border-radius: 8px;    }
.mapinfo_box ul li:hover > ul li span {color: goldenrod;}
.mapinfo_box ul li:hover > ul li .material-icons {color: goldenrod;}
.mapinfo .mapinfo_box .big-icon {font-size: 48px;display: flex;justify-content: center;align-items: center;width: 100%;}

/* party */

.party {background: #302f2f; padding-top: 100px; padding-bottom: 100px;}
.party_info {background: #302f2f; max-width: var(--site_width); margin: auto; text-align: center;}
.party_info h3 {font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 10px; color: goldenrod;}
.party_info p {font-size: 16px; color: #fff; margin-bottom: 30px;}
.party_info .txt span {display: inline; padding: 0px; margin-top: 30px; font-size: 16px; }
.party_info .txt{padding: 20px; border: 1px solid #fff; display: inline-block;}
.party_info .title {color: goldenrod; font-family:'Tangerine', 'Great Vibes', cursive, 'Poppins', 'Noto Sans KR';font-size:45px;letter-spacing:3px;}


@media (max-width: 768px) {

.mobile_only {display: block;}
.info .info_box > ul {flex-wrap: wrap;}
.mapinfo .mapinfo_box > ul {flex-wrap: wrap;}
footer .footer_wrap > ul {flex-direction: column; gap:10px;}
.nav_line {display: none;}
#nav {display: none;}
#headerInner > ul {width: 100%;display: flex;justify-content: space-between;align-items: center;}
#headerInner h3{padding-top:10px; font-size:30px;}
#headerInner {text-align: left;}
.header_wrap .logo_b {display: none; width: 200px;height: 0px;color: white;display: flex;align-items: center;justify-content: center;font-size: 14px; }
.header_wrap {justify-content: flex-start;text-align: left;padding-left: 16px; z-index: 1000;} 
.header_wrap .logo,
.header_wrap .logo_b {justify-content: flex-start;text-align: left;margin-left: 0;}
#headerInner .logo_b{font-size:13px; display: none;}
.header_wrap {padding: 0px 10px; padding-bottom: 0px;}
#headerInner> ul > li:nth-of-type(2) {height: 70px; display: flex; align-items: center; }
#headerInner> ul > li:nth-of-type(1) {height: 70px; display: flex; align-items: center; }
#sham_ico {font-size: 36px;}
.contact_form_wrap {width: 360px;}

.company_info h3 {font-size: 24px; font-weight: 600; }
.company {background: #302f2f; padding-top: 50px; padding-bottom: 100px;} 
.company_info p {font-size: 14px; padding-left: 10px;padding-right: 10px;} 

.map {padding-top: 50px;} 
.map_info h3 {font-size: 24px; font-weight: 600;}
.map_info p {font-size: 14px; padding-left: 10px;padding-right: 10px;}
.map_info h4 {font-size: 14px; padding-left: 10px;padding-right: 10px;}
/* .root_daum_roughmap root_daum_roughmap_landing {width: 370px;} */
#daumRoughmapContainer1755653579758 {width: 100%;}


.party {background: #302f2f; padding-top: 50px; padding-bottom: 100px;}
/* .party_info {background: #302f2f; max-width: var(--site_width); margin: auto; text-align: center;} */
.party_info h3 {font-size: 24px; font-weight: 600;}
.party_info p {font-size: 14px; padding-left: 10px;padding-right: 10px;}

#pano {width: 100% !important; height: 450px !important;}

}

