@import url('https://fonts.cdnfonts.com/css/avantgarde-bk-bt-2');
body{background: #F8F2EF}

.l_logo{position: fixed;z-index: 99;top: 50%;transform: translateY(-50%);left: 30px;}
.quick{position: fixed;z-index: 99;bottom: 30px;right: 30px;display: flex;flex-direction: column;align-items: flex-end;gap: 33.33px}
.quick ul{display: flex;gap: 10px;}
.quick ul li a{display: flex;width: 200px;height: 60px;box-sizing: border-box;border-radius: 30px;}
.quick ul li a.phone{display: flex;align-items: center;border: 1px solid #FEB56D70;border-radius: 30px;padding-left: 10px;gap: 14px;    font-family: 'AvantGarde Bk BT', sans-serif;background:#fff;backdrop-filter: blur(20px)}
.quick ul li a.phone span{font-size: 17px;color: #4A3E25;}
.quick ul li a.contact{border-radius: 30px;overflow: hidden;position: relative}
.quick ul li a.contact:before{content: '';display: block;width: 200%;height: 100%;background: linear-gradient(to left, #FF9900, #E7420E, #FF9900);position: absolute;right: 0;top: 0;transition: 0.4s}
.quick ul li:hover a.contact:before{transform: translateX(50%)}
.quick ul li a.contact div{height: 100%;display: flex;width: 100%;align-items: center;padding: 0 30px;gap: 14px;justify-content: space-between;position: relative;z-index: 2}
.quick ul li a.contact div strong{font-size: 20px;color: #FFFFFF;    font-family: 'AvantGarde Bk BT', sans-serif;font-weight: 400}
.quick ul li a.contact div{height: 100%;display: flex;align-items: center;width: 100%;align-items: center;border-radius: 30px;padding: 0 30px}
.btn_top{ position: fixed; right: 30px; bottom: 210px; z-index: 99; display: none; }
.btn_top button{width: 40px;height: 40px;position: relative}
.btn_top button .bg{display: block;width: 50px;height: 50px;border-radius: 50%;border: 1px solid #C6BAB0;padding: 5px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: 0.7s}
.btn_top button:hover .bg{width: 58px;height: 58px;}
.btn_top button .bg i{display: block;width: 100%;height: 100%;background: #FFFFFF;border-radius: 50%;box-shadow: 0 0 20px rgba(81,52,27,0.25)}
.btn_top button > div{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 5}
.btn_top button > div > div{display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;transition: 0.7s}
.btn_top button:hover > div > div{transform: translateY(-100%)}
#scroll{position: fixed;height: 4px;width: 100%; bottom: 0;left: 0;z-index: 99;background: #E4E4E4}
#scroll i{position: absolute;top: 0;left: 0;position: absolute;top: 0;left: 0;width: 0%;height: 100%;background: linear-gradient(to right, #FFB300, #E7420E)}
#scroll span{position: absolute;bottom: 20px;left: 72.4px;font-size: 40px;color: #51341B;    font-family: "amandine", sans-serif;}
#main .gl_wrap{position: absolute}
#main .gl_wrap .gl_in{display: flex}
#main .gl_wrap .gl_in .gl{animation: bar 3s infinite linear}
#main .gl_wrap .gl_in .gl02{animation-delay: 0.2s}
#main .gl_wrap .gl_in .gl03{animation-delay: 0.3s}
#main .gl_wrap .gl_in .gl05{animation-delay: 0.4s}
#main .gl_wrap .gl_in .gl06{animation-delay: 0.9s}
#main .gl_wrap .gl_in .gl07{animation-delay: 0.6s}
#main .gl_wrap .gl_in .gl08{animation-delay: 0.4s}
@keyframes bar{
    0%{transform: scaleY(1)}
    50%{transform: scaleY(0.8)}
    100%{transform: scaleY(1)}
}
#main .gl_wrap .gl_in .gl i{display: block;backdrop-filter:blur(20px);width:  50px;height: 200px;border-radius: 6px;background: linear-gradient(to left,rgba(255,255,255,0),#ffffff);border: 1px solid #fff}


@media (max-width: 1750px) {
    #footer .ft02 > div.f02{padding-left: 40px;}
    #footer .ft02 > div.f02 ul:before{left: -40px;}
}
@media (max-width: 1550px) {
    #footer .ft02 > div.f02 ul li p{font-size: 14px;}
    #footer .ft02 > div.f02 ul li span{font-size: 23px;}
    #footer .ft02 > div.f02 ul:after{margin-left: -40px;}
    #footer .ft02 > div.f02{padding-bottom: 40px;}
}
@media (max-width: 1260px) {
    #footer .ft02 > div{width: 100%}
    #footer .ft02 > div{padding-bottom: 40px;margin-bottom: 40px;}
    #footer .ft02 > div.f01:after{width: 100%}
    #footer .ft02 > div.f02 .tag{display: none}
    #footer .ft02 > div.f02:after{width: 100%}
    #footer .ft03 .f02, #footer .ft03 .f01{padding-top: 0}

    
}
@media (max-width: 1160px) {
	#header .hd_inner #gnb{display: none}
    #footer .ft02{flex-direction: column}
	#header .hd_inner{height: 80px;align-items: center}
}
@media (max-width: 980px) {
	
	#header .hd_inner{padding: 0 20px}
    #footer .ft02 > div.f02{padding-left: 0}
    #footer .ft02 > div.f02 ul:before{display: none}
    #footer{padding: 20px;}
	#header .hd_inner .open_btn i{width: 40px;}
	#header .hd_inner, #header{height: 65px;}
	#header #menu_open .close{right: 20px;top: 20px;width: 45px;height: 45px;}
	#header #menu_open .close span{width: 16px;height: 16px;}
	#header #menu_open > ul > li > a{font-size: 45px}
	#header #menu_open > ul > li ul li a{font-size: 15px;}
	.l_logo{left: 20px}
	.l_logo svg{width: 14px;height: auto}
	#scroll span{left: 20px;font-size: 18px}
	.quick ul li a.phone span{font-size: 13px;}
	.quick ul li a.contact div strong{font-size: 13px;}
	.quick ul li a.phone svg{width: 25px}
	.quick ul li a.phone{gap: 7px;}
	.quick ul li a{width: 144px;height: 40px;padding-left: 8px;}
	.quick ul li a.phone svg{display: block}
	.quick ul li a.contact a{width: auto}
	.quick ul li a.contact div svg{width: 10px;display: block}
	.quick ul li a.contact div{padding: 0 20px;}
	.quick ul li a.contact{padding-left: 0}
	.quick .chat img{width: 50px;}
	.btn_top button .bg{width: 40px;height: 40px;}
	.btn_top button svg{width: 10px;height: auto}
	.quick{right: 20px;gap: 15px;bottom: 20px}
    #footer .ft03 .f02 address{font-size: 10px}
    #footer .ft03 .f01 .map_in{height: 200px;border-radius: 8px;}
	
	.btn_top{ right: 20px; bottom: 120px; }
}

@media (max-width: 660px) {
    #footer .ft03{flex-direction: row;gap: 20px;flex-wrap: wrap;padding-bottom: 60px;}
    #footer .ft03 > div{width: 100%}
}
@media (max-width: 560px) {
	#sub.esg .con03 .swiper{width: 100%}
	#header #menu_open > ul > li ul{gap: 0 15px}
    #footer .ft02 > div.f02 ul li span{font-size: 12px;}
    #footer .ft02 > div.f02 ul li p{font-size: 11px;line-height: 1.5}
	#header #logo svg{width: 85px;;height: auto}
	#header .hd_inner .open_btn button{gap: 5px;}
    #footer .ft02 > div.f02 ul{gap: 25px 0;}
	#header #menu_open > ul > li > a{font-size: 36px;}
    #footer .ft02 > div.f02 ul:after{margin-left: -15px}
    #footer .ft02 > div.f02, #footer .ft02 > div{margin-bottom: 20px;padding-bottom: 20px;}
    #footer .ft01{gap: 10px;margin-bottom: 15px;}
}

@media (max-width: 500px) {
    #footer .ft01 strong{font-size: 35px;}
    #footer .ft01 p{font-size: 11px;}
}