/* header */
@media screen and (max-width: 1700px){
	header h1 img{ height: 37px; }
}

@media screen and (max-width: 1280px){
	header h1 img{ height: 33px; }
}


/* footer */
footer{ background: #171717; padding: 100px 0 70px; }
footer *{ color: #FFF; }
footer .flex-box{ display: flex; justify-content: space-between; }
footer .clone{ display: none; }
footer .copyright{ font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.6); }

footer .line02{ margin-top: 40px; }
footer .line02 .flex-box{ align-items: flex-end; }

footer address{ margin: 60px 0; }
footer address p{ font-size: 20px; font-weight: 200; color: #FFF; letter-spacing: -0.03em; }
footer address p:not(:last-of-type){ margin-bottom: 10px; }

footer nav span, 
footer nav .esg-box{ display: none; }
footer nav .w1720{ all: unset }
footer nav a{ min-width: 140px; display: block; line-height: 1.3; letter-spacing: -0.03em; }
footer nav .depth01{ display: flex; margin-top: -10px; }
footer nav .depth01 > li:last-of-type{ display: none; }
footer nav .depth01 > li:not(:first-of-type){ margin-left: 40px; }
footer nav .depth01 > li > a{ font-size: 20px; font-weight: 400; color: #FFF; padding: 10px 0; }
footer nav .depth02 > li > a{ font-size: 17px; font-weight: 200; color: rgba(255, 255, 255, 0.6); padding: 5px 0; }
footer nav .depth02 > li > div{ display: none; }

footer .link{ display: flex; align-items: center; }
footer .link > *:not(:last-child){ margin-right: 10px; }
footer .link > a,
footer .link button{ height: 60px; display: inline-flex; align-items: center; font-size: 18px; font-weight: 300; color: #FFF; letter-spacing: -0.03em; padding: 10px 30px; }
footer .link > a{ position: relative; z-index: 10; overflow: hidden; }
footer .link > a::before{ content: ""; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: inherit; position: absolute; top: 0; left: 0; z-index: -1; box-sizing: border-box; }
footer .link > a::after{ content: ""; width: 100%; padding-bottom: 100%; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scaleX(0); transform-origin: left; z-index: -1; transition: transform 0.4s; }

footer .lang{ position: relative; z-index: 10; }
footer .lang button{ background: #171717; border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.4s, border-color 0.4s; }
footer .lang button::after{ content: ""; flex-shrink: 0; width: 20px; height: 20px; background: url("/kr/img/common/icon_lang_arrow.svg") no-repeat center center / contain; margin-left: 10px; opacity: 0.2; position: relative; top: 0; transform: rotate(0); transition: opacity 0.4s, top 0.4s, transform 0.4s; }
footer .lang button i{ flex-shrink: 0; display: inline-block; width: 20px; height: 20px; background: url("/kr/img/common/icon_footer_lang.svg") no-repeat center center / contain; margin-right: 10px; }
footer .lang ul{ width: 100%; background: #000; padding: 15px 0 45px; position: absolute; bottom: 50%; left: 0; z-index: -1; display: none; }
footer .lang ul li a{ display: block; font-size: 18px; font-weight: 300; color: #FFF; letter-spacing: -0.03em; line-height: 1.3; padding: 5px 30px; }

footer .lang.on button{ background: var(--mainColor); border-color: var(--mainColor); }
footer .lang.on button::after{ opacity: 1; top: -1px; transform: rotate(-180deg); }


/* top */
#top{ width: 80px; height: 80px; background: transparent; border: none; border-radius: 50%; font-family: var(--engFont2); font-size: 18px; font-weight: 500; color: #FFF; padding: 0; position: relative; overflow: hidden; outline: none; }
#top::before{ content: ""; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; position: absolute; top: 0; left: 0; box-sizing: border-box; }
#top::after{ content: ""; width: 100%; height: 100%; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 0; transform: scale(0); transition: transform 0.4s; }
#top span{ display: block; position: relative; z-index: 10; transform: translateY(0); opacity: 1; transition: transform 0.4s, opacity 0.4s; }
#top i{ height: 22px; background: url("/kr/img/common/icon_top.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; right: 0; z-index: 10; transform: translateY(calc(50% + 20px) * -1); opacity: 0; transition: transform 0.4s, opacity 0.4s; }


@media screen and (hover: hover) and (pointer: fine){
	footer .link > a:hover::after{ transform: translate(-50%, -50%) scaleX(1); }

	/* top */
	#top:hover::after{ transform: scale(1); }
	#top:hover span{ transform: translateY(-20px); opacity: 0; }
	#top:hover i{ transform: translateY(-50%); opacity: 1; }
}

@media screen and (max-width: 1700px){
	footer{ padding: 70px 0 40px; }
	footer .copyright{ font-size: 17px; }
	
	footer address{ margin: 40px 0; }
	footer address p{ font-size: 19px; }
	
	footer nav .depth01 > li:not(:first-of-type){ margin-left: 30px; }
	footer nav .depth01 > li > a{ font-size: 19px; }
	
	footer .link > a,
	footer .link button{ height: 55px; padding-inline: 25px; }
	footer .lang ul li a{ padding-inline: 25px; }
}

@media screen and (max-width: 1600px){
	footer nav .depth01 > li:not(:first-of-type){ margin-left: 20px; }
}

@media screen and (max-width: 1550px){
	footer nav .depth01 > li:not(:first-of-type){ margin-left: 10px; }
}

@media screen and (max-width: 1500px){
	footer{ padding: 40px 0 30px; position: relative; }
	footer .copyright{ font-size: 16px; }
	
	footer .link{ display: none; }
	footer .clone{ display: block; margin-bottom: 20px; }
	footer .clone .link{ display: flex; }
	
	footer .line02{ margin-top: 0; }
	
	footer address{ margin-bottom: 20px; }
	
	footer nav{ display: none; }
	
	/* top */
	#top{ position: absolute; bottom: 30px; right: 20px; }
	#top i{ height: 20px; }
}

@media screen and (max-width: 1280px){
	footer address p{ font-size: 18px; }

	footer .link > a,
	footer .link button{ height: 50px; font-size: 17px; padding-inline: 20px; }
	footer .lang button i{ width: 18px; height: 18px; }	
	footer .lang ul li a{ padding-inline: 20px; }

	/* top */
	#top{ width: 70px; height: 70px; font-size: 17px; }
}

@media screen and (max-width: 650px){
	/* top */
	#top{ top: 35px; bottom: unset; }
}