@charset "utf-8";
@import url(../fonts/Roboto/style.css);
@import url(../fonts/scoredream/style.css);
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
 i.fa{font-style:normal !important;}

mark {background-color:var(--bg-primary); font-style:italic;font-weight:bold;}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
hr {display:block;height:0; border:0;border-top:0; margin:0;padding:0;}
input, select {vertical-align:middle;resize:none}
caption, th, td {font-weight:normal}
table caption {visibility:hidden;width:0;height:0;overflow:hidden}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal}
img {border:0;vertical-align:middle; max-width:100%}
legend {display:none}

.gratxt{ background-image:-webkit-linear-gradient(0deg,var(--primary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.full_width_bg{position:absolute; top:0; bottom: 0; z-index:-1; left:50%; background-position: center; background-repeat: no-repeat;}


/* 4. html 루트 크기는 10px 고정 */
html {
  font-size: 10px;
}
/* 1. CSS 사용자 지정 속성(변수) 선언 */
body{
  /* 기본값(1200px 이상) */
  --font-size: 2.2rem; /* 20px */
}

/* 2. 750px ~ 1279px : 1600:20 비율 */
@media (min-width: 751px) and (max-width: 1199px) {
  body {
		--font-size: calc(22 * 92vw / 1200 );
  }
}

/* 3. 749px 이하 : 375:13 비율 */
@media (max-width: 750px) {
  body { 
		--font-size: calc(13 * 100vw / 375 ); /* 13 ÷ 375 */
  }
}


body, select,input,textarea,button {font-size:var(--font-size);  line-height:1.5; font-family: "Pretendard","맑은 고딕","Nanum Gothic","Microsoft Yahei","Gulim", "dotum",Helvetica, sans-serif; color:var(--text-primary); letter-spacing:-.06em; }
 input, button, select, textarea, input::placeholder, .iconfont{font-size:inherit; outline: none;}
iframe#hiddenframe {display:none;width:0;height:0}
button{cursor:pointer; border:0}
strong{font-weight:700}
b{font-weight:800}
a{color:var(--text-primary); text-decoration:none}
a:hover, a:focus{color:var(--primary);text-decoration:none}



*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus { 
border: 1px solid var(--border-secondary) !important;
}
.placeholdersjs { color: #aaa !important; }

@media (min-width:751px){
.nop{display:none; position:absolute; width:0; height:0; overflow:hidden;}
}
.clear{display:block; float:none; clear:both; border:0; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
.wrap{width:1200px; margin:0 auto; position:relative; zoom:1;}

@media (max-width:1200px){
.wrap{width:auto; margin:0 4vw; }
}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;left:0; right:0; height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:fixed; background:#fff; border-radius:1rem; overflow:hidden; box-shadow:.1em .1em .5em rgba(0,0,0,.3)}
.hd_pops.mobile {display:none;}
.hd_pops_con {}
.hd_pops_footer {padding:.5em;background:#000;background:var(--primary);color:#fff;display:flex; justify-content:space-between}
.hd_pops_footer button {margin-right:0;padding:0 1em;border:0;background:none;color:#fff; font-size:.9em;}



/*헤더*/
#header{position:sticky; top: 0; z-index:20; background-color: var(--bg-primary);}
#header .wrap{position:relative;  height:5em;  display: flex; justify-content: space-between; align-items: center;}
#header h1{position:relative; z-index:2; order:2}
#header h1 img{height:9rem; }
#btnCall{line-height: 1.3;}
#btnCall i{width: 1em;display: inline-block;}
#btnCall span{ color: var(--primary);}
#btnCall strong{display: block; font-size: 1.13;}

#header #btnLinks{display: flex; position: relative; order:3; gap: .5em;}

#btnMobileCall{display:none;}
#btnMobileMenu{display:none}

/*상단메뉴*/
#topMenu{position:sticky; top: 5em; border-top: 1px solid #777777; z-index:20; background-color: var(--bg-primary);}
#topMenu dl{ display: -webkit-flex; display: flex;justify-content:center}
#topMenu dd{position:relative; }
#topMenu dd + dd:before{position:absolute; left:0; top: 50%; margin-top: -.5em; height:1em; width: 1px; background-color: #777; content:"";}
#topMenu dd > a{position:relative; text-align:center; z-index:2; display:block; font-size:.8em; line-height:2.75em; height:2.75em; padding:0 3em;}
#topMenu dd:hover > a{color:var(--primary)}


#mobileMenu{display:none;}

/*전체메뉴*/
#btnAllmenu{position:absolute; right:0; top:50%; width:4rem; height:4rem; background:none; font-size:2.5rem;  color:var(--primary); margin-top:-2rem; padding:0; line-height:4rem; border:0}
#allmenu{position:fixed;  left:0; top:0; right:0; bottom:100%; background:rgba(0,0,0,0); z-index:99; overflow:hidden; transition: background 0.5s ease;}
#allmenu.on{bottom:0; background:rgba(0,0,0,.5); }
#allmenu .btn_close{position:absolute; right:0;  top:0px; width:6rem; text-align:center; height:6rem; font-size:4rem;  line-height:6rem; transition: all 0.5s ease;}
#allmenu .btn_close:hover{transform:rotate(180deg);}

#allmenu section{position:absolute; opacity:0; right:0; top:0;padding: 50px; box-sizing:border-box; left:0; background:var(--bg-primary); transition: all 0.5s ease; }
#allmenu.on section{top:110px; opacity:1; transition-delay:200ms;  }


#allmenu dl{ display: -webkit-flex; display: flex; flex-wrap:wrap; }
#allmenu dl dd{width:18%; margin: 1%; }
#allmenu dl dd > a{position:relative; display:block;padding-left:10px;     font-size:1.2em;  border-bottom:1px solid var(--border-secondary); line-height:45px; }
#allmenu dl dd > ul{}
#allmenu dl dd > ul a{display:block;   padding:10px; font-size:.9em;  border-bottom:1px solid var(--border-primary); line-height:20px;}
#allmenu dl dd > ul a:hover{border-bottom-color:var(--border-secondary);  }
#allmenu dl dd > ul a:before{width:3px; height:3px; display:inline-block ;vertical-align:middle; background:var(--primary); content:""; margin-right:8px; }

/*메인비주얼*/
#main_visual{position:relative; z-index:1;  overflow:hidden; }
#main_visual ul{position:relative; z-index:1;}
#main_visual li{position:relative;background-position:center center;  width:100%;  background-repeat:no-repeat; height:85rem;  }
#main_visual .swiper-pagination{position:absolute; z-index:10; bottom:1em; width:100%; }
#main_visual .swiper-pagination-bullet{position:relative; width:.75em; height:.75em;margin:0 .2em;  border:.1em solid var(--bg-primary); opacity:1; border-radius:1em; transition: all 0.3s ease; background-color: transparent}
#main_visual .swiper-pagination-bullet-active{background-color: var(--bg-primary);}
#main_visual .controll{position:absolute; top:50%; z-index:3; padding:0;height:0; left:0; right:0;  display:none}
#main_visual .controll a{position:absolute; top:-1em; width:2em; height:2em; line-height:2em; text-align:center; font-size:2em; padding:0; margin:0; background:rgba(0,0,0,.6); border:0; cursor:pointer; color:var(--bg-primary); border-radius:2em; text-shadow: 0 0 .2em rgba(0,0,0,.5)}
#main_visual .controll .swiper_prev{left:0; transform:rotateY(180deg)}
#main_visual .controll .swiper_next{right:0;}

#container{position: relative;}
#container .cfM{color: var(--primary);}
#container .fw100{font-weight:100}
#container .fw300{font-weight:300}
#container .fw350{font-weight:350}
#container .fw400{font-weight:400}
#container .fw500{font-weight:500}
#container .fw600{font-weight:600}
#container .fw700{font-weight:700}
#container .fw800{font-weight:800}
#container .fw900{font-weight:900}

#container h3{font-size: 3em;}
#container h4{font-size: 2em;}
#container h5{font-size: 1.333em;}
#container h6{font-size: 1.167em;}
#container .title::before{display: block; height: 1em; background:url(../img/logo.png) center no-repeat; background-size: contain; content:""; margin-bottom: .3em;}
#container .title{margin-bottom: .3em;}
#container > section{position: relative;}

#ma{padding-top: 10em; }
#ma dl{display: grid; grid-template-columns: 12.66em 1fr;}
#ma dl dt h4{line-height: 1em; }
#ma dl dt h3{line-height: 1.3em; }
#ma dl dt p{margin-top:.5em;}
#ma dl dd{display: flex; justify-content: space-between; gap: .6em;}
#ma dl dd figure{flex-grow: 1;}
#ma dl dd figure img{width: 100%; }
#ma .bgtext{position: absolute; right:0; top:1em; font-size: 4.6em; color: hsl(from var(--primary) h s l / .25); font-family: "Noto Serif", serif;}

#mb{margin-top: 5em; text-align: center;}
#mb dl{display: flex; justify-content: space-between; margin-top: 3em;}
#mb dl dt{width: 32em;}
#mb dl:nth-of-type(2n) dt{order:2;}
#mb dl dd{display: flex; justify-content: center; flex-direction: column; text-align: left; padding-left: var(--s-margin); width: calc(100% - 32em);}
#mb dl dd label{display: block; width:5em; background-color: var(--primary); color: var(--text-anti-primary); text-align: center; border-radius: 1em;}
#mb dl dd p{margin-top: 1em;}

#mc{margin-top: 5em; text-align: center;}
#mc > dl{display: flex; justify-content: space-between; margin:var(--s-margin); position: relative;}
#mc > dl > dd{ text-align: left; display: flex; justify-content: end; flex-direction: column;}
#mc > dl > dd figure{display: none;}
#mc > dl > dd h5{font-size: 1.533em;}
#mc > dl > dd h4 big{font-size: 1.333em; }
#mc > dl > dd p{}
#mc > dl > dt{width: 28em;}
#mc > dl > dt dl{display: flex; justify-content: center; flex-wrap: wrap; margin-top:-5em}
#mc > dl > dt dl dd{position:relative; margin:0 -.5em}
#mc > dl > dt dl dd img{width: 10.166666666666666em;}
#mc .bgtext{position: absolute; right:0; top:3.2em; font-size: 5.3em; opacity: .08; font-family: "Noto Serif", serif; font-weight: 300; z-index: -1;}

#md{ padding:4em 0; text-align: center;}
#md dl{display: flex; justify-content: center; flex-wrap: wrap; gap: 19px; margin-top: 3em; width: 36.43333333333333em; margin:3em auto 0}
#md dl article{position: relative; overflow: hidden; border-radius: 1.3em; box-shadow: 0 0 .3em rgba(0,0,0,.4); background-color: var(--bg-primary);}
#md dl article h5{display: block; width: fit-content; margin:0 auto; border-bottom: 1px solid #B5B5B5; padding:.3em 2em}
#md dl article h6{font-weight: 900; padding:.5em 0 1em}
#md dl i{display: block; margin:.5em;}
#md dl p{font-size: 1.16em; line-height: 1.4em; height:3.8em; display: flex; justify-content: center; flex-direction: column;}
#md dl dt{width: 100%;}
#md dl dd{width: 40%; flex-grow: 1;}

#me{ margin-top: 5em; text-align: center;}
#me h4{font-size: 1.666em;}
#me dl{display:flex; justify-content: space-between; margin:var(--s-margin); margin-bottom: 0;}
#me dl dd{border: 1px solid #889A9B; width: 14.8em;}
#me dl dd h5{background-color: #889A9B; padding:.5em; color:#FFF;}
#me dl dd p{padding:1em;}

#mf{text-align: center; margin-top: 5em; }
#mf article{margin:0 var(--s-margin); background-color: var(--bg-primary); position: relative; padding:3em; border-radius:1.666em 0 0 0 ;
  box-shadow: 0 0 1.1em rgba(0,0,0,.4);
}
#mf article::before{position: absolute; inset: -1em; background-color: var(--primary); content:""; z-index: -1;}
#mf article figure{text-align: left; margin-top: 2em;}
#mf article p{text-align: right;}

#mg{text-align: center; margin-top: 5em;}
#mg .mg_setps{ position: relative; margin-top: 2em;}
#mg .mg_setps dl{display: flex; justify-content: space-between; }
#mg .mg_setps dl dt{text-align: left; color: #FFF; padding-left: var(--s-margin); display: flex; justify-content: center; flex-direction: column; text-shadow: .1em .1em .4em rgba(0,0,0,.4);}
#mg .mg_setps dl dt .cfM{color: #A1F5FC;}
#mg .mg_setps dl dd{}
#mg .mg_setps dl dd ol{display: flex; gap: 2px;}
#mg .mg_setps dl dd ol li{position:relative; width: 9em;height: 28em; color: #FFF; background-color: hsl(from var(--primary) h s l / .4); padding:4.5em 0; display: flex; justify-content: space-between; flex-direction: column; transition: all .3s ease;}
#mg .mg_setps dl dd ol li:hover{background-color: hsl(from var(--primary) h s l / .8); font-weight: 700;}
#mg .mg_setps dl dd ol li + li:before{position: absolute; top: 50%; left:0; width:4em; height:4em;z-index: 2; transform: translate(-50%,-50%); background:url(../img/icon_arr.png) center no-repeat; background-size: contain; content:""}

#mh{text-align: center; margin-top: 5em;}
#mh dl{display: grid; grid-template-columns: 21em 1fr; margin-top: 1em; border:1px solid #B5B5B5; position: relative; overflow: hidden;}
#mh dl dt{ }
#mh dl dd{display: flex; justify-content: center; flex-direction: column; text-align: left; padding-left: var(--s-margin); padding-right:5rem}
#mh dl dd h6{position: relative; font-size: 1.333em; margin-top: 2em; margin-bottom: .5em;}
#mh dl dd h6 strong{display: inline-block; padding-right: 1em; background-color: var(--bg-primary); position: relative;}
#mh dl dd h6::before{position: absolute; left:0; right: -5rem; top: 50%; height:1px; background-color: var(--primary); content: "";}
#mh dl dd p{font-size: .9em;}
#mh dl dd ul{font-weight:700;}
#mh dl dd ul li{position: relative; padding-left:1em;}
#mh dl dd ul li::before{ position:absolute; left:0; content:"• "}
#mh .foot{margin-top: 1em; padding:1em 0; border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary);}

#mi{margin-top:5em; }
#mi .midl{margin-top: 6em; position: relative; display: flex; box-shadow: 0 0 .4em rgba(0,0,0,.4); text-align: center; background-color: #FFF; }
#mi .midl > h4{background-color: var(--primary); color: var(--text-anti-primary); position: absolute; left:50%; top: -2em; line-height: 2em; transform: translateX(-50%); border-radius: .7em .7em 0 0; padding:0 2em; font-weight: 800; font-size: 1.8em; width: 80rem; z-index:-1;}
#mi .midl > dt{position:relative; overflow:hidden; width: 24.766666666666666em; overflow: hidden;}
#mi .midl.dtr > dt{order:2; }
#mi .midl > dt img{ width: 100%; height:100%; object-fit:cover;}
#mi .midl > dd{width: calc(100% - 24.766666666666666em); padding:1.2em}
#mi .midl > dd div{font-size: 1.1667em;}
#mi .midl > dd .s1{display: flex; gap: .5em; margin-top:1.5em;}
#mi .midl > dd .s1 dd{flex-grow: 1; border-top: 2px solid #EEEEEE; padding:.6em 0;;}
#mi .midl > dd .s2{display: flex;  }
#mi .midl > dd .s2 dd{flex-grow: 1; border: 1px solid var(--primary); padding:1em 0 .5em; width: 0;  margin-right: -1px;}
#mi .midl > dd .s2 dd i img{width: 2.6666666666666665em;}
#mi .midl > dd .s2 dd p{font-size: .9em; font-weight: 700; line-height: 1.3;}
#mi .foot{font-size: 1.5em; text-align: center; margin-top: 2em;}

#mi .mids{position:relative; display: grid; grid-template-columns: repeat(2,1fr); background-color: #E4E4E4; gap: 2px; margin-top:4em;}
#mi .mids dd{background-color: var(--bg-primary); text-align: center; padding:1em}
#mi .mids dd:nth-of-type(1){padding-bottom: 3em;}
#mi .mids dd:nth-of-type(2){padding-bottom: 3em;}
#mi .mids dd:nth-of-type(3){padding-top: 3em;}
#mi .mids dd:nth-of-type(4){padding-top: 3em;}

#mi .mids dd h5{font-size: 1.5em; color: var(--primary);}
#mi .mids dd h4{font-size: 1.667em; font-weight: 800;}
#mi .mids dd p{font-size: 1.1667em; margin-top: 1em; }
#mi .mids dt{position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); z-index:2}
#mi .mids dt img{height:10rem; width: auto;}

#mj{margin-top:5em; text-align: center;}
#mj dl{display: flex; justify-content:space-between; margin-top:3em;}
#mj dl dd{width: 17.166666666666668em; border: 1px solid var(--primary);}
#mj dl dd header{padding:.5em 0 .5em 1em; background-color: var(--primary); color: var(--text-anti-primary); text-align: left;}
#mj dl dd header p{font-weight: 300; font-size: 1.08em; display: block;}
#mj dl dd header b{font-size:1.2em}
#mj dl dd article{padding:1em 0}
#mj dl dd article h5{ font-weight: 800;}
#mj dl dd article p{ font-size:.8667; line-height: 1.4; margin-top:.6em}

#mk{margin-top:5em; text-align: center;}
#mkSlide{margin-top:3em; position: relative;  padding:0 var(--s-margin)}
#mkSlide dd{positin:relative; overflow:hidden;}
#mkSlide dd img{width: 100%; }
#mkSlide dt{position:relative;  margin-top:.6em}
#mkSlide dt article{position:relative; overflow:hidden; }
#mkSlide dt .controll{position: left:0; right: 0; top: 50%;}
#mkSlide dt .controll button{position:absolute; border:0; background:var(--primary); width: 2em; height:2em; top:50%; margin-top: -1em; color: var(--text-anti-primary);}
#mkSlide dt .controll button.swiper_prev{left:-2.5em; transform:rotateY(180deg)}
#mkSlide dt .controll button.swiper_next{right:-2.5em;}

#ml{margin-top:5em; text-align: center;}
#ml dl.info{display: flex; justify-content: space-between; margin-top:3em;}
#ml dl.info dt{width: 28.92em;}
#ml dl.info dt a{display: block; margin-top: .3em;}
#ml dl.info dd{flex-grow: 1; text-align: left; padding-left:5em; display: flex; justify-content: space-between; flex-direction: column; position: relative; overflow: hidden;}
#ml dl.info dd h4{position:relative; }
#ml dl.info dd h4 i{position:absolute; right:100%; width: 1.4em; margin-right:.7em;}
#ml dl.info dd h4:before{position:absolute; top:50%; margin-right:.3em; margin-top:-.5em; right:100%; width: .2em; height:1em; background-color: var(--primary); content:""}
#ml dl.info dd b{font-size: 2.47em}
#ml dl.info dd ul{margin-top:.6em}
#ml dl.info dd ul li{display: flex; font-size: 1.5em; line-height: 1.2; margin-bottom: .8em;}
#ml dl.info dd ul li label{width: 3em; display: flex; justify-content: space-between; margin-right:1em;}
#ml dl.info dd ul li span small{font-size:.7em; line-height: 1;}
#ml dl.info dd p{padding-left:6em}
#ml .times{margin-top:3em; text-align: center;}
#ml .times p{width: fit-content; border-bottom:1px solid #777777; padding:.3em 0; margin:0 auto; letter-spacing: 1em; padding-left:1em}
#ml .times h3{font-size: 2.667em; margin-top: .3em;}

#ml .reservation{margin-top:2em; margin-bottom: 5em; display: flex; justify-content: space-between;}
#ml .reservation dd{width: 48%;}

#mm{ text-align: center;}
#mm header{background-color: #000; color: var(--text-anti-primary); padding:.5em;}
#mm header h4{font-size: 1.6667em;}
#mm .root_daum_roughmap{width: 100%; height:85rem;}
#mm .root_daum_roughmap .wrap_map{width: 100%; height:100%}


#footer{position:relative; padding:4rem 0; background-color:#313131; color: #FFF; text-align: center; margin-top:3em}
#footer dl dt img{height:9rem; }
#footer dl dd address{font-size:.8em; margin-top:1em;}
#footer dl dd p{font-size:.8em; }
#footer dl dd span{white-space: nowrap; padding-right:10px}
 

.jpMenu{position: relative; top:-15rem;  }