@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-repeat: no-repeat; background-position:center;}


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

/* 2. 750px ~ 1279px : 1280:20 비율 */
@media (min-width: 751px) and (max-width: 1299px) {
  body {
		--font-size: calc(20 * 100vw / 1300 );
  }
}

/* 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:500}
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:1300px; margin:0 auto; position:relative; zoom:1;}

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

/* 팝업레이어 */
#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{--h:12rem; z-index:20;  height:var(--h); position:fixed; top:0; left:0; right:0; background-color: rgba(255,255,255,0); backdrop-filter: blur(0px); transition: all .3s ease;}
#header .wrap{position:relative; display: flex; justify-content: space-between; align-items: center; height:100%;}
#header h1{position:relative; z-index:2; }
#header h1 img{height:5rem; }
#header h1 img[src*='logo.png']{display: none;}
#header h1 img[src*='logo_w.png']{display: block;}

    

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

/*상단메뉴*/
#topMenu{  margin-right:5em;}
#topMenu dl{ display: -webkit-flex; display: flex;justify-content:center}
#topMenu .full_width_bg{position:absolute; top:100%; right:0;  height:0; background:var(--primary); content:""; transition: height 0.2s ease; transition-delay:300ms; }
#topMenu:hover .full_width_bg{ height:6rem;  transition-delay:10ms;  }
#topMenu dd{position:relative; }
#topMenu dd > a{position:relative; text-align:center; z-index:2; display:block; font-size:2rem; font-weight:600;  line-height:var(--h); height:var(--h); padding:0 1em; color: #FFF; font-size: .9em;}
#topMenu dd ul {position: absolute; top: 100%; z-index: 1;height: 0;opacity: 0;left: 50%;white-space: nowrap;overflow: hidden;transform: translateX(-50%);transition: all 0.5s ease;display: -webkit-flex;display: flex;justify-content: center;  font-size: .85em;}
#topMenu dd:first-child ul {transform: translateX(0);left: 0; }
#topMenu dd:nth-child(2) ul {transform: translateX(0);left: 0; }
#topMenu dd:last-child ul {left: auto;right: 0;transform: translateX(0); }
#topMenu dd:hover ul {height: 6rem;opacity: 1;}
#topMenu dd ul a {display: block;padding: 0 1em;text-align: center;color: #FFFFFF; }
#topMenu dd ul li {position: relative;height: 6rem;line-height: 6rem; }
#topMenu dd ul li:before {position: absolute;top: 50%;margin-top: -.5em;height: 1em;width: 1px;left: 0;background: var(--border-primary);content: ""; }
#topMenu dd ul li:first-child:before {display: none; }

#mobileMenu{display:none;}

/*전체메뉴*/
#btnAllmenu{position:absolute; right:0; top:50%; width:4rem; height:4rem; background:none; font-size:2.5rem;  color:var(--text-anti-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;  font-size:.8em; display: grid; place-items: center;}
#allmenu.on{bottom:0;background:var(--primary); }
#allmenu.on .btn_close{position:fixed; right:1em;  top:1em; width:6rem; text-align:center; height:6rem; font-size:4rem;  line-height:6rem; transition: all 0.5s ease; color:var(--text-anti-primary)}
#allmenu.on .btn_close:hover{transform:rotate(180deg);}

#allmenu section{position:relative; margin-top:-5em; opacity:0; transition: all 0.5s ease; }
#allmenu.on section{ margin-top:0; opacity:1; transition-delay:200ms;  }
#allmenu dl{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1em 2em;}
#allmenu dl dd{}
#allmenu dl dd > a{position:relative; display:block;padding-left:10px;font-size:1.5em;  border-bottom:1px solid rgba(255,255,255,.1);  line-height:2em; color:var(--text-anti-primary); font-weight:700}
#allmenu dl dd > ul{}
#allmenu dl dd > ul a{display:block;   padding:0 10px; font-size:.9em;  border-bottom:1px solid rgba(255,255,255,.1); line-height:2.8em; color:var(--text-anti-primary); transition: all .3s ease;}
#allmenu dl dd > ul a:hover{border-bottom-color:var(--border-secondary);  background-color: rgba(255,255,255,.1);}
#allmenu dl dd > ul a:before{width:3px; height:3px; display:inline-block ;vertical-align:middle; background:var(--text-anti-primary); opacity: .5;; content:""; margin-right:8px; }


#header.fixed h1 img[src*='logo.png']{display: block;}
#header.fixed h1 img[src*='logo_w.png']{display: none;}
#header.fixed{background-color: rgba(255,255,255,.6); backdrop-filter: blur(10px);}
#header.fixed #topMenu dd > a{color: var(--text-primary);}
#header.fixed #btnAllmenu{color: var(--text-primary);}


/*메인비주얼*/
#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:94rem;  }
#main_visual .swiper-pagination{position:absolute; z-index:10; bottom:1em; width:100%; }
#main_visual .swiper-pagination-bullet{position:relative; width:.5em; height:.5em;margin:0 .1em;  background:var(--bg-primary); opacity:.5; border-radius:1em; transition: all 0.3s ease; }
#main_visual .swiper-pagination-bullet-active{width:1em; opacity: 1;}
#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;}


#main_visual section{position:absolute;  color:var(--bg-primary); text-align:center; left:0; right:0; bottom:0; top:0; z-index:4; text-shadow: 0 0 .2em rgba(0,0,0,.5); background:rgba(0,0,0,.3)}
#main_visual section h2{position:relative;font-size:8rem; line-height:140%; font-family: 'SBAggro'; font-weight:800; }
#main_visual section h3{position:relative;font-size:4rem; line-height:140%; font-family: 'SBAggro'; font-weight:600; }
#main_visual section p{position:relative;font-size:2rem; line-height:140%; margin-top:.3em;}

/*visual animation */
#main_visual section h2{opacity:0;top:5rem;  transition: all 1s ease; transition-delay:0; }
#main_visual section h3{opacity:0;top:5rem;  transition: all 1s ease; transition-delay:500ms; }
#main_visual section p{opacity:0;top:5rem;  transition: all 1s ease; transition-delay:1000ms; }
#main_visual .swiper-slide-active section h2{letter-spacing:0; top:0; opacity:1}
#main_visual .swiper-slide-active section h3{letter-spacing:0; top:0; opacity:1}
#main_visual .swiper-slide-active section p{letter-spacing:0; top:0; opacity:1}

#ma{padding:6em 0}
#ma dl{display: flex; justify-content: center;}
#ma dl dt{width: 55%; text-align: right;}
#ma dl dd{flex-grow: 1; padding:0 5%; display: flex; justify-content: center; flex-direction: column;}
#ma dl dd h3{text-align: right; font-family: 'Libre Baskerville', sans-serif; font-size: 3.65em; color: var(--primary-light); opacity: .7;}
#ma dl dd h4{font-weight: 600; font-size: 2em;}
#ma dl dd p{margin-top: 2em;  font-size: 1.2em;}
#ma dl dd p strong{font-weight: 600;}

#mb{padding:6em 0;background-color: #F9F7F3;}
#mb h5{ text-align: center; font-size: 1.5em; font-family: 'Libre Baskerville', sans-serif; color: var(--primary); margin-bottom:2em;}
#mb dl{display: flex; justify-content: center; flex-wrap: wrap; gap: 1em; margin-top: 1rem; }
#mb dl dd{position:relative; text-align: center;}
#mb dl dd a{position:absolute; inset: 0; padding:2em; color:var(--text-anti-primary)}
#mb dl dt{position:relative; text-align: left;}
#mb dl dt a{position:absolute; inset: 0; padding:2em; color:var(--text-primary)}
#mb dl h6{text-transform: uppercase; color: #cfbda7; font-family: 'Libre Baskerville', sans-serif;}
#mb dl h4{ font-size:1.65em; margin:1em 0 .4em; font-weight: 600;}
#mb dl p{ font-size: 1.2em;}
#mb dl dd span{position:absolute; left:50%; bottom:2em; transform: translateX(-50%); font-size:1.3em; text-decoration: underline;}
#mb dl dt h6{color: #b8a684; }
#mb dl dt span{position:absolute; right:2em; bottom:2em; font-size:1.3em; text-decoration: underline; color: var(--primary);}

#mc{padding:5em 0; background:url(../img/mc_bg.png) center no-repeat; color: #FFF; text-align: center;}
#mc > h5{ text-transform: uppercase; font-size: 1.5em; font-family: 'Libre Baskerville'; color: var(--primary);}
#mc > h4{ font-size: 2em; font-weight: 600; margin:1em; line-height: 1.3;}
#mc dl{display: flex; justify-content: center; margin-top: 2em;}
#mc dl dd{ position:relative; width: 18.6em; aspect-ratio: 1; border: 1px solid #FFF; border-radius: 50%; display: flex; justify-content: center; flex-direction: column;  margin:0 -1em}
#mc dl dd span{font-size: 1.5em; color: #c5b9ad; font-family: 'Libre Baskerville'; position:absolute; left:0; right:0; top:1em;}
#mc dl dd h4{font-size: 1.65em; font-weight: 600; line-height:1.4}
#mc dl dd p{margin-top: 1em; font-size: 1.2em;}

#md{position:relative; background:url(../img/md_bg.jpg) center no-repeat; overflow: hidden;}
#md article{padding:5em 0; position:relative}
#md article h6{color: var(--primary); font-family: 'Libre Baskerville'; }
#md article h4{font-size:2em;font-weight: 500; margin:.6em 0;}
#md article ul{font-size: 1.15em; color: var(--text-tertiary); height: 10em;}
#md article ul li{padding-left: 1em; position: relative;}
#md article ul li::before{position: absolute; left: 0; content:"·"; font-weight: 700; color: var(--primary);}
#md article dl{display: flex; gap: 1em;}
#md article figure{position:absolute; right:0; bottom:0; transform: translateX(35%);}
#md .controll{position:absolute; top:50%; z-index:3; padding:0;height:0; left:0; right:0; }
#md .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)}
#md .controll .swiper_prev{left:0; transform:rotateY(180deg)}
#md .controll .swiper_next{right:0;}

#md .controll{position:absolute; top:19em; left:50%; z-index:3; display: flex; gap: 1em;}
#md .controll a{position:relative; text-align: center; line-height: 6em; width: 6em; height:6em; border-radius: 50%; cursor: pointer; font-size: .6em; background-color: var(--info); color: var(--primary); }
#md .controll a i{display: block;}
#md .controll a.visit-prev i{transform: scaleX(-1);}
#md .controll a.visit-prev{left:0;}
#md .controll a.visit-next{right:0}
#md .controll a.swiper-button-disabled{background-color: var(--bg-tertiary); color: var(--text-anti-primary); }



#me .full_width_bg{background:url(../img/me_bg.jpg) center no-repeat;}
#me dl{display: flex; justify-content: space-between; }
#me dl dt{}
#me dl dd{text-align: right; display: flex; flex-direction: column; justify-content: center; color: var(--text-anti-primary);order:2;}
#me dl dd h6{font-family: 'Libre Baskerville';}
#me dl dd h4{ font-size: 2.35em; font-weight: 600;; margin:.6em 0;}
#me dl dd p{font-size: 1.2em; }

#mf{padding:5em 0; text-align: center;}
#mf > h6{font-family: 'Libre Baskerville'; color: var(--primary); text-transform: uppercase;}
#mf > h4{font-size: 2em; margin:1em; font-weight: 600;}
#mf .root_daum_roughmap{width: 100%; height:78rem; }
#mf .root_daum_roughmap .wrap_map{width: 100%; height:100%; }
#mf .location{text-align: left; margin-top: 2em;}
#mf .location dl{display: flex; flex-wrap: wrap;}
#mf .location dl dt{width: 100%; border-bottom:1px solid var(--primary); padding-bottom: 1em; margin-bottom: 1em; display: flex; flex-wrap: wrap; padding:2em}
#mf .location dl h5{font-size: 1.65em; font-weight: 600; color: #c9bea9; width: 100%; margin-bottom:.5em;}
#mf .location dl h5 i{margin-right:.5em}
#mf .location dl dt article{ flex-grow: 1;}
#mf .location dl dt article ul{ font-size: 1.1em; }
#mf .location dl dt article ul li{margin:.5em 0; display: flex;}
#mf .location dl dt article ul li label{font-weight: 600; width: 5em;}
#mf .location dl dt article h6{color: var(--primary); font-size: 1.1em; margin:.5em 0; font-weight: 600;}
#mf .location dl dt article p{font-size: .9em; margin:.4em 0}
#mf .location dl dd{margin:2em; flex-grow: 1;}
#mf .location dl dd h6{font-size: 1.1; font-weight: 600;}
#mf .location dl dd b{font-size: 2.3em; font-family: 'Libre Baskerville'; font-weight: 400;}


#footer{position:relative; padding:3rem 0; background-color:var(--bg-secondary); }
#footer dl{max-width: 1300px; margin:0 auto; display: flex; justify-content: space-between;}
#footer dl dt{order:2}
#footer dl dt img{height:5rem; }

#footer dl dd .tail_links {position:relative;  display: -webkit-flex; display: flex;}
#footer dl dd .tail_links a{position:relative; margin-right:2em;}
#footer dl dd .tail_links a:before{position:absolute; top:50%; margin-top:-.5em; height:1em; width:1px; left:-1em; background:var(--border-primary); content:"";}
#footer dl dd .tail_links a:first-child:before{display:none;}

#footer dl dd address{font-size:.9em; margin-top:1em;}
#footer dl dd p{font-size:.9em; }
#footer dl dd span{white-space: nowrap; padding-right:10px}


#quickMenu{position:fixed; top: 50%; right:1em; transform: translateY(-50%); z-index:9999; box-shadow: .1em .1em .4em var(--shadow); width:10rem; text-align: center;}
#quickMenu dl{background-color: var(--bg-primary); border-radius: 1em; overflow: hidden;}
#quickMenu dl dd + dd{border-top: 1px solid #EEE;}
#quickMenu dl a{display: block; padding:.5em 0}
#quickMenu dl a img{width: 4em;}
#quickMenu dl a p{font-size: .8em;}