@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: 47%;top: 1.5px;z-index: 999;width: 6%;}

.logo img {width: 100%;}


/*.blogo {display: none;}*/
#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.70); border-bottom:1px solid #aeaeae;}
#cssmenu > ul > li {display: inline-block !important; position: relative; vertical-align: top; }
#cssmenu > ul > li > a {display: inline-block;font-size: 14px;line-height: 60px;text-transform: uppercase;color: #3a3a3a;padding: 5px 36px;cursor: pointer;/* font-family: 'Questrial'; */font-family: 'Palanquin Dark', sans-serif; font-weight: 100;}
#cssmenu > ul > li:nth-child(3){/* margin-right:205px; */}

#cssmenu > ul > li > a:hover{color: #6d7f78;transition: all 0.3s ease-in-out;}

.button p{display:none;}


#cssmenu > ul > li:nth-child(1){margin-left:0.8%;}
#cssmenu > ul > li:nth-child(3){margin-right: 145px;}
.mbreser {position: fixed;top: 20px;border-radius: 30px;right: 16.5%;font-weight: 500;z-index: 110;line-height: 20px;text-align: center;/* padding: 5px 0 5px 0; */font-family: 'Pretendard-SemiBold';letter-spacing: -0.03em;display: inline-block;font-size: 20px;transition: all 0.3s ease-in-out;}
.mbreser:hover {color: #7586a5;  transition: all 0.3s ease-in-out;}

.mbreser01{position: fixed;top: 20px;border-radius: 30px;right: 15%;font-weight: 500;z-index: 110;line-height: 20px;text-align: center;/* padding: 5px 0 5px 0; */font-family: 'Pretendard-SemiBold';letter-spacing: -0.03em;display: inline-block;font-size: 21px;transition: all 0.3s ease-in-out;}
.mbreser01 i {font-style:inherit;}
.mbreser01:hover {color: #7586a5;  transition: all 0.3s ease-in-out;}

.mbreser02 {position: fixed;top: 20px;border-radius: 30px;right: 13%;font-weight: 500;z-index: 110;line-height: 20px;text-align: center;/* padding: 5px 0 5px 0; */font-family: 'Pretendard-SemiBold';letter-spacing: -0.03em;display: inline-block;font-size: 20px;transition: all 0.3s ease-in-out;}
.mbreser02:hover {color: #7586a5;  transition: all 0.3s ease-in-out;}

.mbreser03 {position: fixed;top: 21px;border-radius: 30px;right: 11%;font-weight: 500;z-index: 110;line-height: 20px;text-align: center;/* padding: 5px 0 5px 0; */font-family: 'Pretendard-SemiBold';letter-spacing: -0.03em;display: inline-block;font-size: 20px;transition: all 0.3s ease-in-out;}
.mbreser03:hover {color: #7586a5;  transition: all 0.3s ease-in-out;}

.rev_sns{display:block;}
.rev_sns p{display:inline-block; font-size: 11px;}


#cssmenu ul li.active a {color: #000; text-shadow: none;}
#cssmenu ul ul {position: absolute; left: -9999px; background:rgba(255, 255, 255, 0.70); padding: 10px 0; border:1px solid #aeaeae; border-top:none; margin-top:0%;}
#cssmenu li> ul {width: 121px;} #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: -0.8px; color: #000;padding: 0 15px;font-family: 'Pretendard-Regular';}
#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 { padding: 20px 0; border-top:1px solid #CCC; margin-top:3%;}
.container { padding-right: 15px;  padding-left: 15px; margin-right: auto; margin-left: auto; position: relative; width:1500px; text-align:center; color:#3a3a3a;}
.container a{color:#7e7e7e !important;}
.bg-dark { background: #292929;}
.col-md-3 { width: 29%; float:left; margin:2%;}
.widget .title {font-size: 15px; line-height: 24px; font-weight: 400;  text-transform: uppercase; letter-spacing: 2px; font-weight: 700;  margin-bottom: 12px; /* font-family: 'Questrial'; */font-family: 'Pretendard-Light';}
.widget ul li{font-size: 12px; line-height:1.8; letter-spacing:0.2px;}
.rowinfo{display:inline-block; font-size:13px; }
.fottop{  display: block; text-align: center; width: 5%; float:right; font-size:20px;  margin: 1px auto 15px;}  
hr {display: block; height: 1px;  border: 0;  border-top: 1px solid #ccc;  margin: 0.5em 0;padding: 0;}

.simbol {width:19px; display:inline-block; position:relative; /*top:2px;*/}


/* endfooter */

.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:1680px) {
.logo{width: 7%;/* top: 15px; *//* left: 10%; */}

 .mbreser01{right: 14.8%;} .mbreser02{right: 12.5%;}  .mbreser03{right: 10%;}
}

@media(max-width:1600px) {
.mbreser{ } 
#cssmenu > ul > li > a{ padding:5px 40px;}
}

@media(max-width:1440px) {
.mbreser{right: 13.5%;} .mbreser01{right:11.5%;} .mbreser02{right: 9%;} .mbreser03{right: 6.5%;}
#cssmenu > ul > li > a { padding:5px 30px;}
#cssmenu ul ul li a{padding:0 5px; min-width:108px;}
#cssmenu li> ul{width:115px;}
.container{max-width:100%; padding-right:0; padding-left:0;}
.main-main_img_info .line-txt{width:325px !important;}

.logo{width:8%;}
#cssmenu > ul > li:nth-child(1){margin-left:2.8%;}

}

@media(max-width:1366px) {

.widget ul li{font-size:13px;}
}



@media screen and ( max-width:1025px ){
.logo{/* top:20px; */width: 12%; left:0; right:0; margin:auto;}
.mbreser01{right:12%;}
	
/*.mbreser {right: 2%;font-size: 11px; padding: 0 14.7px 0 14.7px; line-height:25px;}*/
#sticky_navs {position: static;}
nav {width: 100%;}
#cssmenu {width: 100%;}
#cssmenu ul {display: none; width: 100%;}
#cssmenu > ul { background:#fff; height:167px;}
#cssmenu > ul > li {width: 100%; float: none; border-top: 1px solid #ebebeb; margin-top:0px;}
#cssmenu > ul > li:last-child {border-bottom: 1px solid #ebebeb; margin-top:0px;}
#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%; margin:0;}
#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: #f1f1f1 !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: 40px; background:#fff;}
#cssmenu > ul > li:nth-child(1){margin-left:0%;} #cssmenu > ul > li:nth-child(3){margin-right:0%;}

.button {position: absolute; top: 10px; left: 15px; z-index: 12399994; width: 30px; height: 60px; color: #000; cursor: pointer;}
.button:after {content: ''; display: block; position: absolute; top: 30px; right: 0px; width: 30px; height: 10px; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000;}
.button:before {content: ''; display: block; position: absolute; top: 17px; right: 0px; width: 30px; height: 1px; background: #000; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease;}
.button.menu-opened:after {top: 27px; width: 30px; height: 1.5px; 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: 30px; background: #000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.button p {display: block; margin-top:55px; font-size:13.5px; font-family:'IBMPlexSansKR-Text'; text-align:center; display:none;}
	
.widget .title{margin:12px auto 0px;font-size: 12px;}
.container{width:100%;}
.col-md-3{width:100%; float:inherit; margin:0%;}
.widget ul li{font-size:11px;}
	
#cssmenu ul ul{border:none;}

.rev_sns p{ display:block; line-height:1.2;} .rev_sns{padding-top:8px;}
}

@media screen and ( max-width:770px ){
.logo {width:17%;} 
 
.mbreser{font-size: 15px;} .mbreser01{font-size:15px;} .mbreser02{font-size:15px;} .mbreser03{font-size:15px;}
.rev_sns p{ font-size:10px;}
}


@media ( max-width: 550px ) {
.logo{width:23%;} .mbreser{right: 14.5%;} .mbreser01 {right: 10%;} .mbreser02 {right: 5%;} .mbreser03 { right:1%;}

.button{top:6px;} .button:after{height:7px;} .button:before{top:22px;}
#cssmenu > ul > li > a{font-size:13px;}
.rowinfo{margin-top:20px;}

.rev_sns p:last-Child{display:none;}

}


@media ( max-width: 450px ) {.logo{width: 28%;top: 5px;} .mbreser{right: 20%;font-size: 16px;top: 30px;} .mbreser01{right: 14%;font-size: 16px;top: 30px;} .mbreser02{right: 7%;font-size: 16px;top: 30px;}   .mbreser03{ font-size: 16px;top: 30px;}   }

@media ( max-width: 375px ) { }

@media ( max-width: 369px ) {	

    #cssmenu > ul > li > a {font-size: 13px;}
	
	#cssmenu ul ul li a {font-size: 11px;}
    #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;} 
	
}

@media ( max-width: 330px ) { .logo {width: 35%;} .rowinfo{ font-size:11px;}}