/* ============================ footer style start ============================= */
@charset "utf-8";

#footer {padding: 30px 0; background-color: #000; border-top: 1px solid #eeeeee;}
#footer * {text-align: center; color: #fff; font-size: 15px}
#footer p:first-of-type {margin: 30px 0 10px;}
#footer img {width: 100%; max-width: 230px;	}

.footer-gnb{margin: 20px 0;}
.footer-gnb > ul{display:flex; justify-content:center;}
.footer-gnb > ul > li a{display: flex; justify-content: center; align-items: center; width: 150px;  text-align: center;}
.footer-gnb > ul > li a > img{width: 20px !important; margin-right: 10px;}
.footer-gnb > ul > li{margin: 0 10px; padding: 6px 0; border: 1px solid #eee;}

@media screen and (max-width:1200px) {
	#footer {padding: 30px 0 120px;}
}

@media screen and (max-width:1025px){
	#footer img {max-width: 160px;}
	#footer p { white-space: pre-line;}
	#footer p br {display: none;}
}

@media screen and (max-width:769px){
	.footer-gnb > ul > li a{width: 130px;}
}
@media screen and (max-width:425px){
	#footer{padding: 30px 0 90px;}
	#footer img {max-width: 140px;}
	footer *{font-size: 12px !important;}

	.footer-gnb {margin: 10px 0;}
	.footer-gnb > ul {flex-wrap: wrap;}
	.footer-gnb > ul > li {margin: 5px; width: calc(50% - 10px);}
	.footer-gnb > ul > li a {width: 100%;}
}

/* ================================================================= */
/* ========================== quick menu ========================== */
/* ================================================================= */

#top_btn{cursor: pointer;}

.quick{position: fixed; right: 20px; bottom: 20px; z-index: 9999; transition:0.6s; opacity: 1;}
.quick.off{opacity: 0;}
.quick > ul{display:flex; flex-direction: column;}
.quick > ul > li{margin: 5px 0;}
.quick > ul > li > div{position: relative; transition: 0.5s;}
/* .quick > ul > li:hover > div.on::before {position: absolute; content: attr(data-name); left: -120px; top: 50%; transform:translateY(-50%); font-size: 14px; width: 100px; text-align: right; font-weight: 500;} */
.quick > ul > li > div a{display: inline-block; /* filter: contrast(0.7); */ transition:0.5s; border-radius:100%; background-color: #279d51;}
.quick > ul > li > div:hover a{box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; background-color: #f7f7f7;}
.quick > ul > li > div div{transition:0.5s; width: 50px; height: 50px;}

.quick > ul > li:first-child > div div{background: url(../img/quick/quick_01.png) center/cover no-repeat; }
.quick > ul > li:nth-child(2) > div div{background: url(../img/quick/quick_02.png) center/cover no-repeat; }
.quick > ul > li:nth-child(3) > div div{background: url(../img/quick/quick_06.png) center/cover no-repeat; }
.quick > ul > li:nth-child(4) > div div{background: url(../img/quick/quick_03.png) center/cover no-repeat; }
.quick > ul > li:nth-child(5) > div div{background: url(../img/quick/quick_04.png) center/cover no-repeat; }
.quick > ul > li:nth-child(6) > div div{background: url(../img/quick/quick_05.png) center/cover no-repeat; }
.quick > ul > li:nth-child(7) > div div{background: url(../img/quick/quick_08.png) center/cover no-repeat; }

.quick > ul > li:first-child > div.on div{background: url(../img/quick/quick_on_01.png) center/cover no-repeat; }
.quick > ul > li:nth-child(2) > div.on div{background: url(../img/quick/quick_on_02.png) center/cover no-repeat;  transition:0.5s;}
.quick > ul > li:nth-child(3) > div.on div{background: url(../img/quick/quick_on_06.png) center/cover no-repeat;  transition:0.5s;}
.quick > ul > li:nth-child(4) > div.on div{background: url(../img/quick/quick_on_03.png) center/cover no-repeat;  transition:0.5s;}
.quick > ul > li:nth-child(5) > div.on div{background: url(../img/quick/quick_on_04.png) center/cover no-repeat;  transition:0.5s;}
.quick > ul > li:nth-child(6) > div.on div{background: url(../img/quick/quick_on_05.png) center/cover no-repeat;  transition:0.5s;}
.quick > ul > li:nth-child(7) > div.on div{background: url(../img/quick/quick_on_08.png) center/cover no-repeat;  transition:0.5s;}

@media screen and (max-width: 1200px) {
	.quick {right: auto; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0,0.8);}

	.quick > ul {flex-direction: row;}
	.quick > ul > li {flex:1; text-align: center; margin: 10px 0 30px;}
	.quick > ul > li > div::before {position: absolute; content: attr(data-name); left: 50%; top: auto; bottom: -20px; font-size: 14px; width: 100px; color: #fff; transform:translateX(-50%); text-align: center;}
	.quick > ul > li > div.on::before {position: absolute; content: attr(data-name); left: 50%; top: auto; bottom: -20px; font-size: 14px; width: 100px; color: #fff; transform:translateX(-50%); text-align: center;}
	.quick > ul > li:hover > div.on::before {position: absolute; content: attr(data-name); left: 50%; top: auto; bottom: -20px; font-size: 14px; width: 100px; color: #fff; transform:translateX(-50%); text-align: center; font-weight: 500;}
	
}

@media screen and (max-width: 900px) {
	.quick-btn {right: 20px; bottom: 20px;}
} 

@media screen and (max-width: 769px) {
	.quick > ul > li {margin: 10px 0;}
	.quick > ul > li > div::before {display: none;}
}

@media screen and (max-width: 480px) {
	.quick > ul > li > div div {width: 35px; height: 35px;}
}