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

#footer {padding: 50px 0 30px; background-color: #2a2727; border-top: 1px solid #eeeeee;}
#footer * {text-align: center; color: #fff; font-size: 15px}
#footer p:first-of-type {margin: 20px 0 0 0;}
.footer-logo 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;}

.lang {margin-top: 20px;}
.lang ul {display: flex; justify-content: center;}
.lang a {display: inline-block; max-width: 45px; width: 100%; margin: 0 5px;}

@media screen and (max-width:1200px){
	#footer p { white-space: pre-line;}
	#footer p br {display: none;}
	#footer{padding: 40px 0}
	.footer-logo img {max-width: 180px;}
}

@media screen and (max-width:769px){
	.footer-gnb > ul {flex-wrap: wrap;}
	.footer-gnb > ul > li {margin: 10px; width: calc(50% - 20px);}
	.footer-gnb > ul > li a{width: 100%;}
}
@media screen and (max-width:480px){
	.footer-gnb{margin: 10px 0;}
	.footer-gnb > ul > li{margin: 5px; width: calc(50% - 10px);}

	.lang {margin-top: 10px;}

	#footer * {font-size: 12px;}
}


/* ================================================================= */
/* ========================== quick menu ========================== */
/* ================================================================= */
#top_btn{cursor: pointer;}

.quick{position: fixed; right: 20px; bottom: 20px; z-index: 999; 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 > div:hover::before {position: absolute; content: attr(data-name); top: 50%; left: -150px; transform: translateY(-50%); width: 120px; padding: 4px 12px; text-align: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 10px;  background: #fff; font-family: 'NanumSquare',san-serif; font-weight: bold;}
.quick > ul > li > div a{display: inline-block; /* filter: contrast(0.7); */ transition: all 0.5s ease-in-out; border-radius:100%; background: #a1a1a1;}
.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;}
.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_03.png) center/cover no-repeat; }
.quick > ul > li:nth-child(4) > div div{background: url(../img/quick/quick_04.png) center/cover no-repeat; }
.quick > ul > li:nth-child(5) > div div{background: url(../img/quick/quick_05.png) center/cover no-repeat; }
.quick > ul > li:nth-child(6) > div div{background: url(../img/quick/quick_06.png) center/cover no-repeat; }
.quick > ul > li:nth-child(7) > div div{background: url(../img/quick/quick_07.png) center/cover no-repeat; }

.quick > ul > li:first-child > div:hover a {background: linear-gradient(45deg, #FEE500 0%, #FFD200 100%);}
.quick > ul > li:nth-child(2) > div:hover a {background: linear-gradient(45deg, #2DB400 0%, #1EC800 100%);}
.quick > ul > li:nth-child(3) > div:hover a {background: linear-gradient(45deg, #2DB400 0%, #1EC800 100%);}
.quick > ul > li:nth-child(4) > div:hover a {background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);}
.quick > ul > li:nth-child(5) > div:hover a {background: linear-gradient(45deg, #007bff 0%, #0056b3 100%);}
.quick > ul > li:nth-child(6) > div:hover a {background: linear-gradient(45deg, #34b3f1 0%, #29a8e0 100%);}
.quick > ul > li:nth-child(7) > div:hover a {background: linear-gradient(45deg, #8B4513 0%, #A52A2A 50%, #800000 100%);}

@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;}
	.quick > ul > li:first-child > div:hover::before {left: 10px; transform: none;}
	.quick > ul > li:last-child > div:hover::before {left: auto; right: 10px; transform: none;}
	.quick > ul > li > div:hover::before {left: 50%; top: -40px; transform:translateX(-50%); font-size: 14px; width: 80px;}
}

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


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