@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner {	width:92%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }

@media all and (max-width:1280px) {
	body#wrap { font-size: 15px; }
}

/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:976px) {
	body#wrap { font-size: 14px; }
}

@media all and (max-width:568px) {
	body#wrap { font-size: 0.85rem; }
}


#header{width:100%; position:fixed; top:0; left:0; z-index:999; background:#FFF}
#content { padding-top: 190px; }

#logo { text-align: center; padding: 20px 0; font-size: 0;  }


.t-tel { position: absolute; left:10px; top:50%; transform:translateY(-50%); background:url('/images/common/t-tel-icon.png') no-repeat left center}
.t-tel dl { padding-left:50px;}
.t-tel dl dt { padding:1em 0 0.5em; font-size: 0.813em; font-weight: 600; line-height: 1.2em; }
.t-tel dl dd { color:#8c2232; font-size: 1.635em; font-weight: 500; line-height: 1.2em; font-family: 'EliceDigitalBaeum';}
.t-tel a { display: none; }

#topImg { position: absolute; right: 13%; top:17%;}

.topBanner {width: 310px;  overflow: hidden;  max-height: 72px;   }
.topBanner .swiper-container-vertical > .swiper-pagination-bullets{  top:36px;   right:0; }
.topBanner .swiper-pagination-bullet{   width: 8px;  height: 8px;  opacity:1;  background:#FFF;  border-radius:8px;  border:1px solid #9e0809;}
.topBanner .swiper-pagination-bullet-active{  background: #9e0809; }
@media all and (max-width:1199px) {
	#topImg { right:90px;}
	.topBanner {width: 250px; }
	.swiper-container-android .swiper-slide img {width:90%; }
	.topBanner .swiper-container-vertical > .swiper-pagination-bullets{  top:30px;}
}
@media all and (max-width:930px) {
	#topImg {display:none}
}

.topMember { position: absolute; right:0; top:50%; transform:translateY(-50%); }
.topMember li {display:inline-block; border-radius:50px; text-align:center;}
.topMember li a {display:block; padding:0.4em 1em; color:#FFF;  font-size:0.875em }
.topMember li.bg1 {background:#9e0809}
.topMember li.bg2 {background:#b28e66}


.util { position: absolute; left:250px;  top:30%; }
.util li {float: left; margin-left: 5px;  }



#navPC { width:100%; position:relative; background:rgba(92,7,7,0.95); overflow:hidden;  }
#navPC:before{ content:""; width:100%; height:80px; background:#FFF; border-top: 1px solid #ddd; border-bottom:1px solid #ddd;
                        display:block; z-index:0; position:absolute; top:0; left:0; }
#navPC #gnb { width:100%; position:relative; z-index:1;  }
#navPC #gnb li.symbol {width:80px;height:80px; background:#8c2232 url('/images/common/gnb-symbol.png') no-repeat center center; float:left;}

#navPC .depth1 { width:11.6%; float:left; text-align:center; position:relative;   }
#navPC .depth1 .dep1 {font-size:1.125em; line-height:80px; position:relative; color:#212121; font-weight: 500; border-left: 0; }
#navPC .depth1 .dep1 span{cursor:pointer; }
#navPC .depth1 .dep1 a { color:#212121;  }
#navPC .depth1:last-child .dep1 { border-right: 0}
#navPC .depth2 { display:none; padding:1em 0;   box-sizing:border-box; border-left: 0; }
#navPC .depth1:last-child .depth2{ border-right:0; }
#navPC .depth2 li { padding:5px 0; font-size: 0.95em; font-weight:400}
#navPC .depth2 li a { color:#FFF; }
#navPC .depth1:hover .depth2 { }
#navPC .depth1:hover .dep1 { color:#650404; /* background: #335abe;*/ }
#navPC .depth2 li a:hover {color:#FFF; font-weight:400; border-bottom:1px solid #FFF }

#header .headerTop>div.navM_open{display:none; position:absolute; top:50%; transform:translateY(-50%); right:3%; cursor:pointer; z-index:100;}
#header .navM_open span{display:block; width:30px; height:2px; background:#555; position:relative;}
#header .navM_open span.m{margin:6px 0px;}
#header .navM_open:hover span.m{right:0; }

#navMobile{ padding:0.5em; overflow-y:scroll;transform:translateX(100%); transition: all ease 0.8s 0s;  position:fixed; width:300px; z-index:99; right:0; top:0; height:100%; box-sizing:border-box; background:#38070e; }
#navMobile .nav_top { box-sizing:border-box; padding:5em 15px 1em; overflow: hidden; }
#navMobile .nav_top li { float: left; margin-left: 5px; }
#navMobile .nav_top li a { color:#fff; }
#navMobile .depth1{border-bottom:1px solid #rgba(0,0,0,0.1);}
#navMobile .depth1 .dep1{padding:15px 15px; line-height:1em; font-size:1.125em;  font-weight:500; cursor:pointer; display: block; color:#ddd }
#navMobile .depth1 .dep1 a {color:#ddd}
#navMobile .depth2{display:none; padding:0.5em; background:rgba(0,0,0,0.3)}
#navMobile .depth2 li{box-sizing:border-box; padding:5px 25px;border-bottom:1px solid #rgba(0,0,0,0.1);  font-size:1em; }
#navMobile .depth2 li a {color:#FFF}
#navMobile .depth1:hover .dep1 {color:#FFF}
#navMobile .depth2 li:hover>a{font-weight:500; color:#ffd895;}
#navMobile .depth2 li:first-child{border-top:0;}
#navMobile .depth2 li>span{padding:0 0px 10px;box-sizing:border-box; display:block}
#navMobile .depth2 li:hover>span{font-weight:500; color:#FFF; border-bottom:1px solid rgba(255,255,255,0); cursor:pointer;}

#navMobile .topMember.mo { left:2em; top:30px; transform:translateY(0); }

.gnbBG{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10;  display:none; opacity:0; transition: all ease 2s 0s; top:0; left:0;}

body.open,
html.open{overflow:hidden;}




@media all and (max-width:1399px) {
	#navPC .depth1 { width:13.33%; }
}
@media all and (max-width:1199px) {

	#header.open #navMobile{transform:translateX(0%); transition: all ease 0.8s 0s;}
	#header.open .navM_open { }
	#header.open .navM_open span{background:#FFF;}
	#header.open .navM_open span.m{display:none;}
	#header.open .navM_open span.t{transform: rotate(45deg); transition-duration: 300ms;   transition-property: all;   transition-timing-function: ease;}
	#header.open .navM_open span.b{transform: rotate(-45deg); transition-duration: 300ms;   transition-property: all;   transition-timing-function: ease; top:-2px;}
	#header.open .gnbBG{ display:block; opacity:1; transition: all ease 2s 1s;}

	#header { border-bottom:1px solid #dedede; }
    #header .headerTop.s-inner { width: 100%; }
	#header .headerTop #logo { padding: 15px 0; }
	#header .headerTop #logo img{height:59px; vertical-align: middle; }
	#content { padding-top: 90px; }
	#navPC { display: none; }

	.topMember {display:none}
	#navMobile .topMember.mo {display:block;}

	.topImg { right: 3%;}
	.topImg img {width:80%; }


	.t-tel dl { display: none; }
	.t-tel a { display: block; }
	.t-tel a img { height:60px; }

	.headerTop .util { display: none; }

	#header .headerTop>div.navM_open{display:block; }
}
@media all and (max-width:978px) {
		.topImg {display:none}
}

@media all and (max-width:767px) {

   #content { padding-top: 70px; }

	#header .headerTop #logo { padding: 10px 0;}
	#header .headerTop #logo img { height:50px; }
	#navMobile .nav_top { padding:5em 15px 1em; }
	#header .navM_open span { width: 25px; }

	.t-tel a img { height:46px; }

}

@media all and (max-width:586px) {
   #content { padding-top: 60px; }

   #header .headerTop #logo { padding: 13px 0;}
   #header .headerTop #logo img { height:34px; }

   .t-tel a img { height:40px; }

   #header .headerTop>div.navM_open{padding:22px 0;}
   #header.open .headerTop>div.navM_open{padding:24px 0;}

   #navMobile{ width:270px}
   #navMobile .nav_top li a img {width:40px;}
}

@media all and (max-width:480px) {
   #header .headerTop #logo { padding: 13px 0;}
   #header .headerTop #logo img { height:34px; }

	 .t-tel a img { height:32px; }
 }



/*footer*/
#footer {padding:2% 0; position: relative; width: 100%; overflow: hidden; background: #332e2e;  }
#footer .f-link { overflow: hidden; }
#footer .f-link li { padding-right: 40px; float: left; position: relative; }
#footer .f-link li a { color:#777; font-size: 0.938em }

#footer .f-info {padding-top:1.5em}
#footer .f-info div {}
#footer .f-info div p {font-size:0.938em; color:#777;  display:inline-block;  margin-right: 15px; line-height: 1.7em; }
#footer .f-info div p.fc-b5 {color:#b5b5b5}
#footer .f-info div p.copy { padding-top:0.4em; font-size:0.91em; color:#777; clear: both;   font-family: 'Montserrat', sans-serif; font-weight:500}
@media all and (max-width:767px) {
	#footer {padding:2% 0 110px;  }
}
@media all and (max-width:580px) {
	#footer {padding:5% 0 110px; }
	#footer .f-link li { padding-right: 20px;}
}
@media all and (max-width:480px) {
	#footer {padding:5% 0 90px; }
}





/*퀵메뉴*/
#Quick { position: fixed; right:0; top:50%; transform:translateY(-50%); width: 90px; text-align: center; z-index:9999; }
#Quick ul {padding:1.2em 0.5em;  background: #fff; border-radius:100px ;box-shadow: 0 0 7px 0 rgba(0,0,0,0.07) }
#Quick ul li {}
#Quick ul li.f-li {border-bottom:1px solid #efefef; padding-bottom:0.5em; margin-bottom:0.5em}
#Quick ul li a { display: block;  }
#Quick ul li a p { margin-top: 0.3em; color:#3c3c3c; font-size: 0.76em; font-weight:500 }
#Quick .go-top {padding-top:1.5em; display: block; background: #FFF; color:#555;  font-weight:700; font-size: 0.81em;  font-family: 'Montserrat', sans-serif; }

@media all and (max-width:1580px) {
   #Quick { width:70px; }
   #Quick ul li a img { max-width: 70%; }
}
@media all and (max-width:1199px) {
   #Quick {display:none}
}


/*퀵메뉴-mo*/
#Quick-mo {display:none;  position: fixed; left:0; bottom:0; width: 100%; text-align: center; z-index:999; }
#Quick-mo ul {overflow:hidden}
#Quick-mo ul li {width:25%; padding:1em 0.5em;  background: #f2e0a2; border-top-left-radius:20px; border-top-right-radius:20px;  float:left; position:relative;  }
#Quick-mo ul li:before {content:''; width:1px; height:calc(100% - 21px); background:rgba(255,255,255,0.3); position:absolute; left:0; bottom:0}
#Quick-mo ul li a {display:block; width:100%; height:100%; }
#Quick-mo ul li a p {padding-top:0.5em;  color:#725f42;}

#Quick-mo ul li.tel-mo {position:relative;}
#Quick-mo ul li.tel-mo:before {content:''; width:40px; height:40px; background:url('/images/common/quick-mo-icon1.png') no-repeat center top; 
									position:absolute; left:50%; top:1em; margin-left:-20px}
#Quick-mo ul li.tel-mo p {padding-top:47px;}
#Quick-mo ul li.tel-mo.on {position:absolute; left:0; top:0}
#Quick-mo ul li.tel-mo.on:before {content:''; width:40px; height:40px; background:url('/images/common/quick-mo-icon1-red.png') no-repeat center top;  background-size:cover; }
#Quick-mo ul li.tel-mo.on p {color:#9d0809}

@media all and (max-width:767px) {
	#Quick-mo {display:block;}
}
@media all and (max-width:480px) {
	#Quick-mo ul li { border-top-left-radius:10px; border-top-right-radius:10px;  }
	#Quick-mo ul li:before { height:calc(100% - 11px)}
	#Quick-mo ul li img {width:30px}
	#Quick-mo ul li a p {font-size:0.9em}
	#Quick-mo ul li.tel-mo:before,
	#Quick-mo ul li.tel-mo.on:before {width:30px; height:30px;  top:1em; margin-left:-15px; background-size:cover; }
	#Quick-mo ul li.tel-mo p {padding-top:36px;}
}


@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}
.tel-mo.on {
  animation: blink-effect 1s step-end infinite;
  /*
  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
  */
}