@charset "utf-8";

/* mobile gnb ani */
@-webkit-keyframes fade {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fade {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

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

#wrap { position: relative; width: 100%;  /* overflow-x: hidden; */ font-size: 1.6rem; }

/* 타블렛 가로 */
@media all and (max-width:1599px) {
	.inner {	width: 90%;}
}
@media all and (max-width:1280px) {

}
@media all and (max-width:976px) {
  html { font-size:55% !important; }
}
@media all and (max-width:768px) {
  html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
  html { font-size: 2.0vw !important; }
}







#quick {position:fixed; left:0; bottom:3%; z-index:99; width:100%}
#quick ul {display:flex; gap:10px;; justify-content:center; }
#quick ul li a {display:block;  padding:25px 30px; font-size:3.0rem;font-family: 'ONE-Mobile-Title', sans-serif; font-weight: 400; color:#FFF; background: #031d26; box-shadow:0 0 10px rgba(255,255,255,0.15);  border-radius:100px; }
#quick ul li a span::before{content: '바로가기';}
#quick ul li.ver2 a {background:#1fac55}
#quick ul li a i {padding-right:10px}

/* #quick a:hover {background:#f77636} */
#quick ul li.ver2 a:hover { color:#FFF000}

#quick ul li:nth-child(1) a { animation: blink 1s steps(1, end) infinite; }

@keyframes blink{
  0% {
    color:#FFFF00
  }
  50% {
	color: #2eea76
  }
   100% {
	color: #FFFF00
  }
 
}

@media all and (max-width:767px){
	#quick {; bottom:10px;}
	#quick ul  {width: 96%; margin: 0 auto;}
/*	#quick ul  {displaY:block; }*/
	#quick ul li {margin:0 auto;  margin-bottom:5px; }
	#quick ul li:nth-child(1){width: 62%;}
	#quick ul li:nth-child(2){width: 38%;}
	#quick ul li:nth-child(1) a{}
	#quick ul li a{ font-size:4.5vw; line-height:70px; padding:0 6vw; display: flex; justify-content: center; align-items: center;}
	#quick ul li a span{font-family: 'Pretendard-Bold'; font-weight: 700;}
	#quick ul li a span::before{content: '↗'; margin-left: 3px; font-size: 0.875em; position: relative; top: -2px;}
}
@media all and (max-width:480px){
	#quick ul{gap:8px;}
/*	#quick ul li {width:65vw; }*/
	#quick ul li a{line-height:15vw;}
	#quick ul li a i {padding-right:2vw}
}


/* footer */
#footer {padding:45px 0 145px; background:#fefdf8}
#footer .inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items: center;}
#footer .f-info {  margin-bottom:1em; display:flex; flex-wrap:wrap; transform: rotate(-0.03deg);}
#footer .f-info .t1 {font-size:1.5rem; color:#8e9698; margin-right:1.3em}
#footer .f-info .t1 span {color:#264049; padding-right:8px; }
#footer .copy {font-size:1.4rem; color:#656b6d; transform: rotate(-0.03deg); }

@media all and (max-width:976px){
}
@media all and (max-width:740px){
}








.overlay { background-color: rgba(0, 0, 0, 0.7); display: none; bottom: 0; left: 0; opacity: 0; position: fixed; right: 0; top: 0;cursor: default; visibility: hidden; z-index: 999991; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;}
.overlay:target {visibility: visible; opacity: 1; display: block;}
.popup {background-color: #fff;  left: 50%; opacity: 0; padding: 0; position: fixed; top: -100%;  z-index: 999999; 
			-webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  
			-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%,-50%); transform: translate(-50%, -50%); 
			-webkit-transition: opacity .8s, top .8s; -moz-transition: opacity .8s, top .8s; 
			-ms-transition: opacity .8s, top .8s;-o-transition: opacity .8s, top .8s; transition: opacity .8s, top .8s;}
.overlay:target+.popup { top: 50%; opacity: 1; visibility: visible;}
.popup .close { background-color:#caa28e ; width: 60px; height: 60px; line-height: 80px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0;}
.popup .close:before { color: #fff; content: ''; background: url('/images/common/menu_on_close.webp') no-repeat center center;  width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.popup .close:hover { background-color:#404447;}

.popup { padding: 50px; width:90%; max-width:1110px; height: 620px; display:flex; flex-wrap:wrap}


@media all and (max-width:1280px) {
	.popup { height: 600px}
}
@media all and (max-width:1024px) {
	.popup { height:500px}

}
@media all and (max-width:920px) {
	.popup .close { width: 40px; height: 40px; line-height: 40px; background-size:cover }
	.popup .close:before {width: 20px; height: 20px;  background-size:cover}
	.popup {padding:20px 30px;  height: auto}
}