@charset "utf-8";

@font-face { font-family: 'Cafe24Simplehae'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Simplehae.woff') format('woff'); font-weight: normal; font-style: normal; }
.nanumsquare { font-family: 'NanumSquare', sans-serif !important; }

/* 초기화 */
html, body{
    overflow-x: hidden;
    overflow-y: auto;
    backface-visibility: hidden;
    margin: 0;
    padding: 0;
}
html {/*overflow-y:scroll;*/ margin:0;padding:0;}
body {margin:0;padding:0;font-size:0.75em;}
body, h1, h2, h3, h4, h5, h6, input, button, textarea, select {font-family:'Noto Sans KR', "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", "나눔 고딕", sans-serif; letter-spacing: 0;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6, textarea, select {font-size:1.3em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul,dl,dt,dd,li {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}



/* header */
.navbar {position: fixed; z-index: 999; width: 100%;}

.mnlogo {display: block; position: absolute; top: 0; left: 40px; z-index: 20; width: 219px; height: 57px; transition: all 0.5s;}
.logo {position: fixed;left: 15%;top:5px;z-index: 999;}
.logo img {width: 180px;top: -5px;position: relative;}
/*.blogo {display: none;}*/
.mbreserB {position: fixed;top: 15px;right: 16%;font-weight: 500;z-index: 110;font-family: 'RIDIBatang';font-size: 12px;line-height: 26px;text-align: center;letter-spacing: 0.025em;color: #FFF !important; ;padding:5px 6px 5px 6px;  background-color: #ec4a59 !important; ; border: 1px solid #ec4a59 !important; ; border-radius:5px;}
.mbreser01B {position: fixed; top: 15px; right: 10%; font-weight: 500;z-index: 110; font-size: 12px;font-family: 'RIDIBatang'; line-height: 26px; text-align: center; letter-spacing: 0.025em; color: #000 !important; ; padding:5px 10px 5px 10px; border:1px solid #000 v;  border-radius:5px;}
.mbreserB:hover {color: #fff; background-color: #a23d46 !important; ; border: 1px solid #a23d46 !important; ; transition: all 0.3s ease-in-out;}
.mbreser01B:hover {color: #fff; background-color: #ec4a59 !important; ; border: 1px solid #ec4a59 !important; ; transition: all 0.3s ease-in-out;}

.mbreser {position: fixed;top: 15px;right: 16%;font-weight: 500;z-index: 110;font-family: 'RIDIBatang';font-size: 12px;line-height: 26px;text-align: center;letter-spacing: 0.025em;color: #676767; padding:5px 6px 5px 6px;  border-radius:5px;background-color: #f8dc5e; border: 1px solid #f8dc5e;}
.mbreser01 {position: fixed; top: 15px; right: 10%; font-weight: 500;z-index: 110; font-size: 12px;font-family: 'RIDIBatang'; line-height: 26px; text-align: center; letter-spacing: 0.025em; color: #000; padding:5px 10px 5px 10px; border:1px solid #000;  border-radius:5px;}
.mbreser:hover {color: #FFF; background-color: #eec922; border: 1px solid #eec922; transition: all 0.3s ease-in-out;}
.mbreser01:hover {color: #676767; background-color: #eec922; border: 1px solid #eec922; transition: all 0.3s ease-in-out;}




#sticky_navs {display: block; position: fixed; /*top: -70px;*/ top: 0; z-index: 100; width: 100%; transition: all .5s ease;}
.mlogo,
.mreser {display: none;}
.mopen {position: fixed; z-index: 110; top: 0px; right: 200px; line-height: 70px; color: #fff; font-size: 15px; font-weight: bold;}
#cssmenu {position: relative; width: 100%; background: transparent !important; margin: 0 auto;}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 0;}
#cssmenu:after,
#cssmenu > ul:after {content: "."; display: block; clear: both; height: 0; visibility: hidden; line-height: 0;}
#cssmenu #head-mobile {display: none;}
#cssmenu {background: #333;}
#cssmenu > ul {text-align: center; background:rgba(255, 255, 255, 0.8);}
#cssmenu > ul > li {display: inline-block !important; position: relative; vertical-align: top;}
#cssmenu > ul > li > a {display: inline-block; font-size: 15px;  line-height: 60px; text-transform: uppercase; /*letter-spacing: 0.1em;*/ color: #000; padding: 5px 45px; cursor: pointer; font-family:'RIDIBatang';}
.has-sub:nth-child(3){/* margin-right:170px; */}

#cssmenu ul li.active a {color: #000; text-shadow: none;}
#cssmenu ul ul {position: absolute; left: -9999px; background:rgba(255, 255, 255, 0.8); padding: 10px 0;}
#cssmenu li> ul {width: 145px;} #cssmenu li .cafe{width:120px;} #cssmenu li .me {width: 150px;}
#cssmenu ul ul li {height: 0; -webkit-transition: all .50s ease; -ms-transition: all .50s ease; transition: all .50s ease;}
#cssmenu ul ul li:hover {}
#cssmenu li:hover > ul {left: auto;}
#cssmenu li:hover > ul > li {height: 30px;}
#cssmenu ul ul li a {display: inline-block; min-width: 120px; font-size: 13px; font-weight: normal; line-height: 30px; text-transform: uppercase; letter-spacing: -1.67px; color: #000; padding: 0 20px; font-family:'RIDIBatang';}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {border-bottom: 0;}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {text-decoration: underline;}

/* footer */
#footer { position:relative; width:96%; max-width:1500px; margin:0 auto; padding:40px 0px 20px; font-size:1.2em; line-height:1.5em; color:#0c0c0c;}
#footer:after {clear: both;content: "";display: block;}
.footer_logo { float:left;  width:200px; }
.footer_logo a {display:inline-block font-size:16px; line-height:1.2em; color:#0c0c0c; text-transform:uppercase;}
.footer_copy { float:left; width:calc(100% - 200px);}
.footer_01, .footer_02 {float:left;  margin-left:12%;}
.f_nav {margin-top:5em;font-size:0.9em;text-align:center;border-top: solid 1px #a9a9a9;line-height: 5;}
#footer .to_top { position:absolute; display:inline-block; right:0; text-align:center;}


.scrollDown {position: absolute;bottom: 4%; right: 0; left: 0;margin: auto;width: 66px; height: 66px;background: url(/web/img/scrollDown.png) center center no-repeat;}

@media(max-width:1600px) {
.logo{left:10%;} .mbreser01{right:9%;}
}


@media(max-width:1440px) {
#cssmenu > ul > li > a {padding:5px 40px;}
#cssmenu ul ul li a{padding:0 5px;}
#cssmenu li> ul{width:120px;}
.logo{left:6%;} .mbreser{right:14%;} .mbreser01{right:6%;}
}

@media(max-width:1366px) {
#cssmenu > ul > li > a {padding:5px 35px;}
#cssmenu ul ul li a{padding:0 3px;}
 #ft .ft-info-phone{   font-size: 20px; }
 #ft, #ft a{   font-size: 14px; }
}



@media screen and ( max-width:1025px ){

	#sticky_navs {position: static;}
    #cssmenu {width: 100%;}
    #cssmenu ul {display: none; width: 100%;}
	#cssmenu > ul {position: absolute; top: 60px; z-index: 999; padding: 0;}
    #cssmenu > ul > li {width: 100%; float: none; border-top: 1px solid #ebebeb;}
    #cssmenu > ul > li:last-child {border-bottom: 1px solid #ebebeb;}
    #cssmenu > ul > li:hover,
	#cssmenu ul li.active:hover,
	#cssmenu ul li.active {}
    #cssmenu > ul > li > a {font-size: 15px; font-weight: normal; line-height: 250%; background: #fff; color: #000 !important; text-shadow: none !important; padding: 0 25px;}
    #cssmenu ul li a {}
    #cssmenu ul li a,
	#cssmenu ul ul li a {width: 100%;}
	#cssmenu > ul > li:hover > a,
    #cssmenu ul li.active a {}
	#cssmenu li > ul {width: 100% !important;}
	#cssmenu li:hover > ul {left: auto !important;}
    #cssmenu ul ul li,
	#cssmenu li:hover > ul > li {height: auto; text-align: center;}
	#cssmenu ul ul,
    #cssmenu > ul > ul > li {background: #f1eee9 !important;}
    #cssmenu ul ul li:hover {}
    #cssmenu ul ul li a {color: #000; }
    #cssmenu ul ul li:hover > a,
	#cssmenu ul ul li.active > a {color: #fff;}
    #cssmenu ul ul {position: relative; left: 0; width: 100%; text-align: left; padding: 0px 0; margin: 0;}
    #cssmenu #head-mobile {display: block; font-size: 12px; font-weight: 700; color: #ddd; padding: 30px; background:#fff;}
	
	.mbreser{right:18%;}

    .button {position: absolute; top: 0; left: 15px; z-index: 12399994; width: 25px; height: 60px; color: #000; cursor: pointer;}
    .button:after {content: ''; display: block; position: absolute; top: 27px; right: 0px; width: 25px; height: 12px; border-top: 3px solid #000; border-bottom: 3px solid #000;}
    .button:before {content: ''; display: block; position: absolute; top: 17px; right: 0px; width: 25px; height: 3px; background: #000; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease;}
    .button.menu-opened:after {top: 27px; width: 25px; height: 3px; background: #000; border: 0; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
    .button.menu-opened:before {top: 27px; width: 25px; background: #000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}


	#footer { font-size:0.8em; padding:10px 0;}
	.footer_logo { width:160px; }
	.footer_copy { float:left; width:calc(100% - 160px);}
	.footer_logo a { font-size:13px;}
	.footer_01, .footer_02 { margin-left:3%;}
	#footer .to_top { position:absolute; right:0;}
	#footer .to_top img { width:6px;}

}


@media (max-width:860px){
	.logo{left: 9%;}

	
#footer { font-size:1em;  line-height:1.8;}
.footer_logo { width:160px; }
.footer_logo a { font-size:13px;}
.footer_01, .footer_02 { float:none; margin-left:3%;}
#footer .to_top { position:absolute; right:0;}
}


@media ( max-width: 770px ) {
    .mreser {top: 10px;}
    #cssmenu > ul > li > a {font-size: 13px;}
	#cssmenu ul ul li a {font-size: 13px;}
    #cssmenu ul ul li:hover > a,
	#cssmenu ul ul li.active > a {text-decoration: none;}
	#ft, #ft a{   font-size: 12px;}
	.scrollDown{display:none;}
	#ft .ft-info-phone a{font-size:20px;}
	#ft{ height:206px;} 


	.mbreser{right:20%;} #cssmenu #head-mobile{padding:36px;}
	

.footer_logo { float:none; width:100%; margin-bottom:0.3em;}
.footer_copy { float:none; width:100%;}
.footer_logo a { font-size:13px;}
.footer_01, .footer_02 { margin-left:0;}
.f_nav { margin-top:0; font-size:0.9em; }
#footer .to_top { position:absolute; right:0; top:10px;}
}
@media (max-width:550px){
.mbreser{right:27%;}
}

@media (max-width:450px){
	
#cssmenu > ul > li > a {font-size: 11px;} #cssmenu ul ul li a {font-size: 11px;}

.logo img {width: 130px;top: 5px;/* left: 30px; */position: relative;}  .logo{left:15%; top:3px;}
.mbreser01{font-size:10px;padding:3px 10px 3px 10px;line-height:19px;right: 2%;}
.mbreser{font-size:10px;padding:3px 5px 3px 5px;line-height:19px;right: 26%;} 
#cssmenu #head-mobile{padding:30px;}
}

@media (max-width:450px){
	
.logo img {width: 110px;}  
	
}