@charset "utf-8";
/* ------------------------------------------------------------ common */
body{ min-width: 1200px; font-family: 'Noto-Sans-KR-Regular'; }
main{ padding: 95px 0 0; }
#wrapper{ position: relative; }

.l-inner{ width: 1200px; margin: 0 auto; }

.jost{ font-family: 'Jost', sans-serif; }
.jose{ font-family: "josefin-sans", sans-serif; font-weight: 400; font-style: normal; }

.ec-logo{ margin: 50px 0 0; padding: 60px 0 0; border-top: 1px solid #DEDEDE; }
.ec-h4{ padding: 0 0 50px; font-size: 20px; font-family: 'Noto-Sans-KR-Bold'; text-align: center; }
.ec-list{ display: flex; align-items: center; justify-content: center; gap: 155px; }

.c-link{ display: flex; align-items: center; gap: 3px; }
.c-link a{ transition: all 0.8s; width: calc(100% / 3 - 3px); height: 35px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #DEDEDE; border-radius: 100px; }
.c-link a:hover{ border-width: 4px; background: #F9F9F9; }


/* ------------------------------------------------------------ header */
header{ min-width: 1200px; transition: 0.5s; position: fixed; top: 0; left: 0; right: 0; padding: 20px 3%; z-index: 100; background: #000; }
header .flex{ display: flex; justify-content: space-between; align-items: center; }
header .ec-h4{ padding: 0 0 20px; }
header .ec-list{ gap: 50px; }

.h-btn{ position: relative; width: 220px; }
.h-btn a{ height: 55px; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid #B98601; border-radius: 100px; color: #B98601; background: #fff; }

.nav{ display: flex; align-items: center; flex-direction: row-reverse; width: 900px; }
.nav h1{ width: 230px; }
.nav nav{ width: calc(100% - 230px); }
.nav nav ul{ display: flex; align-items: center; justify-content: flex-end; padding: 0 35px 0 0; }
.nav nav li{ padding: 0 30px; }
.nav nav li a{ color: #fff; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: bold;}

.burger_btn{ display: none; }


/* ------------------------------------------------------------ footer */
footer{ padding: 60px 0 40px; }
footer ul{ display: flex; align-items: center; justify-content: center; padding: 0 0 30px; }
footer li{ padding: 0 30px; }
footer li a{ font-size: 16px; }
footer p{ padding: 0 0 70px; text-align: center; }
footer small{ display: block; text-align: center; font-size: 12px; }

.footer_nav{ padding: 0 0 125px; }
.footer_logo{ padding: 0 0 50px; width: 160px; margin: 0 auto; }

.f-bnr{ padding: 50px 0; text-align: center; background: #F6F3E3; }
.f-bnr a{ transition: all 0.8s; display: block; width: 800px; margin: 0 auto 30px; }
.f-bnr a:last-of-type{ margin-bottom: 0; }
.f-bnr a:hover{ opacity: 0.8; }


/* ------------------------------------------------------------ aside */
aside{ display: none; position: fixed; z-index: 50; right: 8%; bottom: 200px; }




/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

/* ------------------------------------------------------------ common */
	body{ min-width: 100%; }
	main{ padding: 57px 0 0; }

	.ec-logo{ margin: 60px 0; padding: 30px 0 0; }
	.ec-h4{ padding: 0 0 35px; font-size: 18px; font-family: 'Noto-Sans-KR-Bold'; }
	.ec-list{ gap: 15%; padding: 0 5%; }

	.c-link{ flex-wrap: wrap; }
	.c-link a{ width: calc(100% / 2 - 3px); height: 30px; }


/* ------------------------------------------------------------ header */
	header{ min-width: 100%; padding: 10px 3%; }
	header .logo{ width: 100px; }
	header .logo img{ width: 100%; height: auto; }
	header .ec-list{ gap: 20px; padding: 0; }
	header .ec-list a{ width: 33% }
	header .ec-list a.kurly{ width: 27%; }
	
	.h-btn{ width: 130px; }
	.h-btn a{ height: 30px; font-size: 13px; }
	
	.burger_btn{ z-index: 600; position: relative; display: block; width: 30px; height: 20px; }
	.burger_btn span{ transition: all .8s; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; }
	.burger_btn span:first-of-type{ top: 0; }
	.burger_btn span:nth-of-type(2){ top: 7px; }
	.burger_btn span:last-of-type{ top: 14px; }
	
	.nav{ opacity: 0; visibility: hidden; transition: all .8s; z-index: 500; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; padding: 100px 0; background: #000; }
	.nav h1{ width: 130px; padding: 0 0 20px; }
	.nav h1 img{ width: 100%; height: auto; }
	.nav nav{ flex-direction: column; width: 90%; margin: 0 auto; }
	.nav nav ul{ flex-direction: column; padding: 20px 0 0; }
	.nav nav li{ padding: 0 0 35px; font-size: 18px; }
	
	
	/* active */
	.burger_btn.active span{ transition: all .8s; }
	.burger_btn.active span:first-of-type{ top: 10px; transform: rotate(45deg); }
	.burger_btn.active span:nth-of-type(2){ opacity: 0; }
	.burger_btn.active span:last-of-type{ top: 10px; transform: rotate(-45deg); }
	
	.nav.active{ opacity: 1; visibility: visible; transition: all .8s; }
	
	
/* ------------------------------------------------------------ footer */
	footer{ padding: 25px 0 50px; border-width: 5px; }
	footer ul{ flex-direction: column; width: 90%; margin: 0 auto; padding: 0 0 10px; }
	footer li{ width: 100%; padding: 0; }
	footer li a{ position: relative; display: block; padding: 25px 0; border-bottom: 1px solid #DEDEDE; font-weight: 400; font-size: 14px; }
	footer li a:after{ position: absolute; transform: rotate(45deg); right: 0; content: ""; width: 10px; height: 10px; border-top: 1px solid #B98503; border-right: 1px solid #B98503; }
	footer small{ font-size: 10px; }
	.footer_nav{ padding: 0 0 55px; }

	.f-bnr{ padding: 30px 0; }
	.f-bnr a{ width: 100%; }
	.footer_logo{ padding: 0 0 20px; width: 150px; }


/* ------------------------------------------------------------ aside */
	aside{ width: 60px; height: 60px; right: 2%; }



}