/* 공통 */
:root{
	--headerHeight:95px;
	--yello:#e2f157;
	--purple:#4754D2;
}
html{
	word-break: keep-all;
	font-family: 'Pretendard';
}
small,strong,a,button{display: block;}
button{display: block; border: none; background-color: transparent; padding: 0; margin: 0;}

.wrap{position: relative; margin: 0 auto; width: 95%;}
.wrap[max='1640']{max-width: 1640px;}
.wrap[max='1440']{max-width: 1440px;}
.wrap[max='1300']{max-width: 1300px;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.wrap{width: 90%;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}




/* header */
header{
	width: 100%;
	position: fixed; z-index: 999; left: 0; top: 0;
	height: var(--headerHeight);
}
header .wrap{
	display: flex; align-items: flex-end; justify-content: space-between;
	height: 100%; z-index: 1;
}
header h1{}
header h1 a{}
header h1 a svg{
	height: 50px;
}
header h1 a svg polygon,
header h1 a svg path,
header h1 a svg rect{fill:#000}
header h1 a svg circle{fill:#ffbc00}
header nav{
	position: absolute;
	left: 50%; transform: translateX(-50%);
}
header nav ul{
	display: flex; align-items: center; justify-content: center;
	height: 55px;
	font-size: 18px; letter-spacing: -0.025em; position: relative;
}
header nav ul::before {
	content:''; display: block; background-color: #eee; opacity: 0.8;
	position: absolute; width: 100%; height: 100%;
	border-radius: max(calc(10/18*1em),4px);
}
header nav ul li{height: 100%; position: relative;}
header nav ul li:not(:last-child)::after {
	content:''; display: block; width: 2px; height: calc(12/18*1em);
	background-color: #000; position: absolute; right: 0;
	top: 50%; transform: translateY(-50%); opacity: 0.4;
}
header nav ul li a{
	padding: 0 45px; font-family: 'DM Sans'; font-weight: 600;
	box-sizing: border-box; height: 100%;
	display: flex; align-items: center; justify-content: center;
	transition: color 0.1s; white-space: nowrap;
}
html.pc header nav ul li a:hover{
	color: var(--purple);
}


/* 오른쪽 버튼 */
header .lnb{
	display: flex; align-items: center; justify-content: center;
	gap: 5px; transition: opacity 0.8s,transform 0.8s;
}
header .lnb a{
	font-size: 1px; border-radius: 9em;
	width: 160em; height: 55em; gap: 15em;
	position: relative; display: flex; align-items: center; justify-content: center;
	box-sizing: border-box; font-weight: 700; overflow: hidden;
}
header .lnb .contact svg{width: 23em;}
header .lnb .download svg{width: 22em;}

header .lnb a p{font-size: 18em; letter-spacing: -0.025em;}

header .lnb .contact{transition: .4s; background-color: var(--purple); font-family: 'DM Sans'; color: #fff;}
header .lnb .contact path{transition: .4s; fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
header .lnb .contact circle{transition: .4s; fill: #fff;}

header.color .lnb .contact{background-color: var(--yello); color: #000;}
header.color .lnb .contact path{stroke:#000;}
header.color .lnb .contact circle{fill: #000;}

header .lnb .download{transition: .4s; border: 1px solid #000; box-sizing: border-box; color: #000; background-color: #fff;}
header .lnb .download svg{transition: .4s; fill: #000;}

header.color .lnb .download{border-color: #fff; color: #fff; background-color: #000;}
header.color .lnb .download svg{fill: #fff;}

/* 호버 */
header .lnb a{transition: background-color 0.1s,color 0.1s,border-color 0.1s;}
header .lnb .contact:hover path{transition: stroke 0.1s;}
header .lnb .contact:hover circle{transition: fill 0.1s;}
header .lnb .download:hover svg{transition: fill 0.1s;}

html.pc header .lnb a:hover{background-color: #000; color: #fff;}
html.pc header .lnb .contact:hover path{stroke: #fff;}
html.pc header .lnb .contact:hover circle{fill: #fff;}
html.pc header .lnb .download:hover svg{fill: #fff;}

html.pc header.color .lnb a:hover{background-color: #fff; color: #000;}
html.pc header.color .lnb .contact:hover path{stroke: #000;}
html.pc header.color .lnb .contact:hover circle{fill: #000;}
html.pc header.color .lnb .download:hover svg{fill: #000;}



/* 색변경되는 애니메이션 */
@keyframes lnbColorChange1 {
	0%   { background-color: var(--yello); color: var(--purple); }
	20%  { background-color: var(--purple); color: var(--yello); }
	50%  { background-color: var(--purple); color: var(--yello); }
	70%  { background-color: var(--yello); color: var(--purple); }
	100% { background-color: var(--yello); color: var(--purple); }
}

@keyframes lnbColorChange2 {
	0%   { background-color: var(--purple); color: var(--yello); }
	20%  { background-color: var(--yello); color: var(--purple); }
	50%  { background-color: var(--yello); color: var(--purple); }
	70%  { background-color: var(--purple); color: var(--yello); }
	100% { background-color: var(--purple); color: var(--yello); }
}


/* 메뉴 아이콘 */
header .menuIco{
	display: none;
	align-items: center; justify-content: center; position: relative;
	width: 40px; height: 22px;
}
header .menuIco::before {
	content:''; display: block; position: absolute;
	width: 100%; height: 100%; padding: 20px;
}
header .menuIco div{
	width: 100%; height: 3px; background-color: #000;
	position: absolute; border-radius: 10px;
	transition: transform 0.5s,opacity 0.5s,top 0.5s, bottom 0.5s,background-color 0.5s;
	transform: rotate(0deg);
}
header .menuIco div:nth-child(1){top: 0px;}
header .menuIco div:nth-child(2){}
header .menuIco div:nth-child(3){bottom: 0px;}


/* 헤더색변경 */
header h1 a svg *{transition: fill 0.1s;}
header.color h1 a svg *{fill: #fff;}
header.logo_color h1 a svg *{fill: #fff;}
header.color .menuIco div{background-color: #fff;}



/* 메뉴 영역 */
header .menuArea{
	background-color: var(--purple);
	position: absolute; top: 0; left: 0; width: 100%;
	height: 100vh; overflow: auto;
	opacity: 0; pointer-events: none;
	transform: translateX(100%);
	transition: opacity 0.8s,transform 0.8s;
}

header .menuArea > div{
	display: flex; min-height: 100%; padding-top: 60px; padding-bottom: 80px; box-sizing: border-box;
	align-items: center; justify-content: center; flex-direction: column;
}
header .menuArea{}
header .menuArea .moNav{
	margin-bottom: 60px;
}
header .menuArea .moNav li{}
header .menuArea .moNav li a{
	font-size: 50px; font-weight: 500; color: #fff;
	text-align: center;
	padding: calc(20/50*1em) 0;
}
header .menuArea .moLnb{
	display: flex;
}

header .menuArea .moLnb{
	display: flex; align-items: center; justify-content: center;
	gap: 10px;
}
header .menuArea .moLnb a{
	font-size: 1px; border-radius: 60px;
	width: 150em; height: 60em; gap: 10em;
	position: relative; display: flex; align-items: center; justify-content: center;
	box-sizing: border-box; font-weight: 700; overflow: hidden;
}
header .menuArea .moLnb a img{min-width: 22em; width: 22em;}
header .menuArea .moLnb a svg{min-width: 23em; width: 23em; fill: var(--purple);}
header .menuArea .moLnb a img,
header .menuArea .moLnb a svg{}

header .menuArea .moLnb a p{
	font-size: 18em; letter-spacing: -0.025em;
}

header .menuArea .moLnb .contact{background-color: var(--yello); font-family: 'DM Sans'; color: var(--purple);}
header .menuArea .moLnb .contact path{
	fill: none;
    stroke: var(--purple);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;}
header .menuArea .moLnb .contact circle{}
header .menuArea .moLnb .download{background-color: var(--purple); color: var(--yello); border: 2px solid var(--yello);}
header .menuArea .moLnb .download svg{fill: var(--yello);}



/* 메뉴 열릴때 */
header.menuOn .menuArea{
	opacity: 1; pointer-events: auto;
	transform: translateX(0%);
}

header.menuOn h1 a svg polygon,
header.menuOn h1 a svg path,
header.menuOn h1 a svg rect{fill:#fff}
header.menuOn h1 a svg circle{fill:#ffbc00}

header.menuOn .menuIco div{background-color: #fff;}
header.menuOn .lnb{opacity: 0; pointer-events: none; transform: translateY(-80px);}


header.menuOn .menuIco div:nth-child(1){transform: rotate(45deg); top: 9.5px;}
header.menuOn .menuIco div:nth-child(2){transform: translateX(40px); opacity: 0;}
header.menuOn .menuIco div:nth-child(3){transform: rotate(-45deg); bottom: 9.5px;}
@media screen and (max-width:500px) {
	header.menuOn .menuIco div:nth-child(1){top: 8px;}
	header.menuOn .menuIco div:nth-child(3){bottom: 8px;}
}
@media screen and (max-width:320px) {}







@media screen and (max-width:1600px) {
	:root{--headerHeight: 70px;}
	header .wrap{align-items: center;}
	header nav{display: none;}
	header .lnb{position: absolute; right: 70px;}
	header .lnb a{font-size: 0.7px;}
	header .menuIco{display: flex;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {

	header h1 a svg{height: 42px;}
}
@media screen and (max-width:1024px) {
	header .lnb{position: absolute; right: 60px;}
	header .lnb a{font-size: 0.6px;}
}
@media screen and (max-width:820px) {
	/* 모바일 메뉴 */
	header .menuArea .moNav li a{font-size: max(calc(50/820*100vw),30px);}
	header .menuArea .moLnb a{font-size: max(calc(1/820*100vw),0.7px);}
}
@media screen and (max-width:500px) {
	:root{--headerHeight: 50px;}
	header h1 a svg{height: 34px;}

	header .lnb{display: none;}
	header .menuIco{width: 30px; height: 18px;}
	header .menuIco::before{padding: 10px;}
	header .menuIco div{height: 2px;}
}
@media screen and (max-width:320px) {}






/* footer */
footer{
	color: #fff; background-color: #000; padding-top: 50px; padding-bottom: 30px;
	overflow: hidden;
}
footer .wrap{}
footer .top{
	display: flex; align-items: flex-start; justify-content: space-between;
	margin-bottom: 60px;
}
footer .left{}
footer .left strong{
	font-size: 36px; font-weight: 600; line-height: 1.555; letter-spacing: -0.025em;
	margin-bottom: calc(50/36*1em);
}
footer .left ul{}
footer .left ul li{
	font-size: 18px; letter-spacing: -0.025em; line-height: 1.3;
	display: flex; align-items: flex-start; justify-content: flex-start;
}
footer .left ul li:not(:last-child){margin-bottom: 10px;}
footer .left ul li b{font-weight: 600; min-width: calc(97/18*1em);}
footer .left ul li p{color: #7c7c7c; font-weight: 500;}

footer .right{
	font-family: 'DM Sans'; font-size: 24px; font-weight: 600;
	display: flex; align-items: flex-start; justify-content: flex-start;
	gap: 80px;
}
footer .right li{}
footer .right li a{transition: color .2s;}
html.pc footer .right li a:hover{color: var(--purple);}

footer .right .kakao{
	/* width: 50px; height: 50px; border-radius: 10px; border: 1px solid #fff; box-sizing: border-box; */
	display: flex; align-items: center; justify-content: center; width: 26px;
	margin-left: auto; margin-top: 30px;
}
footer .right .kakao img{

}

footer .bottom{
	font-weight: 600; position: relative;
}
footer .bottom .privacy{cursor: pointer;}
footer .bottom .copy{
	font-family: 'DM Sans';
	color: #7c7c7c;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}
footer .bottom .topBtn{
	font-size: 120px;
	width: 1em; height: 1em; display: flex; align-items: center; justify-content: center;
	background-color: var(--yello); border-radius: 50%;
	position: absolute; right: 0; bottom: 0;
	transition: background-color .4s; animation: floating20 infinite 3s; cursor: pointer;
}
footer .bottom .topBtn svg{
	width: calc(43/120*1em); transition: fill .4s;
}
html.pc footer .bottom .topBtn:hover{background-color: var(--purple);}
html.pc footer .bottom .topBtn:hover svg{fill: #fff;}
footer .marquee{
	font-size: 220px; font-weight: 600; font-family: 'DM Sans';
	display: flex; align-items: flex-start; justify-content: flex-start;
	white-space: nowrap;
}
footer .marquee p{
	animation: marquee forwards infinite linear 20s;
}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	footer .top{flex-direction: column-reverse; gap: 60px;}
	footer .right{margin-left: auto; flex-wrap: wrap; row-gap: 10px; column-gap: 10px;}
	footer .right li a{padding: 6px 16px; border: 1px solid #fff; box-sizing: border-box; border-radius: 100px;}

	footer .marquee{font-size: max(calc(220/1440*100vw),70px);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	footer .right{font-size: 20px; justify-content: flex-end; max-width: 460px;}
	footer .left{margin-left: auto;}
	footer .left strong{text-align: right;}
	footer .left ul li{justify-content: flex-end; flex-wrap: wrap; text-align: right;  flex-direction: column; align-items: flex-end;}
	footer .left ul li b{min-width: auto;}
	footer .left ul li p{margin-left: 0.8em;}

	footer .top{margin-bottom: 40px;}

	footer .bottom{display: flex; flex-direction: column; align-items: flex-end;}
	footer .bottom > div:nth-child(2){display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; row-gap: 10px; column-gap: 20px;}
	footer .bottom .topBtn{position: unset; margin: 40px 0;}
	footer .bottom .copy{position: unset; transform: unset;}
}
@media screen and (max-width:500px) {
	footer .right{font-size: 16px;}
	footer .left strong{font-size: calc(36/500*100vw);}
	footer .left ul li{font-size: 16px;}
	footer .bottom{margin-bottom: 14px; font-size: 14px;}
	footer .bottom .topBtn{font-size: 80px; margin: 24px 0;}
}
@media screen and (max-width:380px) {
	footer .left ul li{flex-direction: column; align-items: flex-end; gap: 2px;}
}




/* 퀵메뉴 */
._quick{
	display: block;
	position: fixed; z-index: 99; right: 30px; bottom: 30px;
	width: 56px; height: 56px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 24px;
    background-color: var(--yello);
	opacity: 0; transform: translateX(40px); pointer-events: none;
	transition: opacity 0.5s,transform 0.5s,box-shadow 0.5s,background-color 0.5s,color 0.5s;
}
html.pc ._quick:hover{
	transform: scale(1.1);
}
._quick.on{
	opacity: 1; transform: translateX(0px); pointer-events: auto;
}
._quick svg{width: 30px; fill: #000; transition: fill 0.5s;}

._quick.color{background-color: var(--purple);}
._quick.color svg{fill: #fff;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._quick{width: 40px; height: 40px; right: 12px; bottom: 12px; border-radius: 6px;}
	._quick svg{width: 20px;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}





/* max-width */
@media screen and (max-width:1600px) {
	.max-1600{display: block;}
	.min-1601{display: none;}
	.max-1600-none{display: none;}
}
@media screen and (max-width:1440px) {
	.max-1440{display: block;}
	.min-1441{display: none;}
	.max-1440-none{display: none;}
}
@media screen and (max-width:1280px) {
	.max-1280{display: block;}
	.min-1281{display: none;}
	.max-1280-none{display: none;}
}
@media screen and (max-width:1024px) {
	.max-1024{display: block;}
	.min-1025{display: none;}
	.max-1024-none{display: none;}
}
@media screen and (max-width:820px) {
	.max-820{display: block;}
	.min-821{display: none;}
	.max-820-none{display: none;}
}
@media screen and (max-width:500px) {
	.max-500{display: block;}
	.min-501{display: none;}
	.max-500-none{display: none;}
}
@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


/* min-width */
@media screen and (min-width:1601px) {
	.min-1601{display: block;}
	.max-1600{display: none;}
	.min-1601-none{display: none;}
}
@media screen and (min-width:1441px) {
	.min-1441{display: block;}
	.max-1440{display: none;}
	.min-1441-none{display: none;}
}
@media screen and (min-width:1281px) {
	.min-1281{display: block;}
	.max-1280{display: none;}
	.min-1281-none{display: none;}
}
@media screen and (min-width:1025px) {
	.min-1025{display: block;}
	.max-1024{display: none;}
	.min-1025-none{display: none;}
}
@media screen and (min-width:821px) {
	.min-821{display: block;}
	.max-820{display: none;}
	.min-821-none{display: none;}
}
@media screen and (min-width:501px) {
	.min-501{display: block;}
	.max-500{display: none;}
	.min-501-none{display: none;}
}
@media screen and (min-width:321px) {
	.min-321{display: block;}
	.max-320{display: none;}
	.min-321-none{display: none;}
}


@keyframes opacity {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes opacity20 {
	0% { opacity: 1; }
	50% { opacity: 0.2; }
	100% { opacity: 1; }
}

@keyframes opacity50 {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotate2 {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotate3 {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(90deg); }
	50% { transform: rotate(180deg); }
	75% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotate4 {
	0% { transform: rotate(0deg); }
	12.5% { transform: rotate(45deg); }
	25% { transform: rotate(90deg); }
	37.5% { transform: rotate(135deg); }
	50% { transform: rotate(180deg); }
	62.5% { transform: rotate(225deg); }
	75% { transform: rotate(270deg); }
	87.5% { transform: rotate(315deg); }
	100% { transform: rotate(360deg); }
}


@keyframes scale50 {
	0% { transform: scale(1); }
	50% { transform: scale(0.5); }
	100% { transform: scale(1); }
}

@keyframes scale80 {
	0% { transform: scale(1); }
	50% { transform: scale(0.8); }
	100% { transform: scale(1); }
}

@keyframes scale110 {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes scale120 {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

@keyframes scale130 {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

@keyframes scale140 {
	0% { transform: scale(1); }
	50% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

@keyframes floating10 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

@keyframes floating20 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
}

@keyframes floating30 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-30px); }
	100% { transform: translateY(0px); }
}

@keyframes floating40 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-40px); }
	100% { transform: translateY(0px); }
}

@keyframes floating60 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-60px); }
	100% { transform: translateY(0px); }
}

@keyframes floating80 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-80px); }
	100% { transform: translateY(0px); }
}

@keyframes floating80 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-80px); }
	100% { transform: translateY(0px); }
}

@keyframes marquee {
	from{transform:translateX(0%)}
	to{transform:translateX(-100%)}
}


/* 개인정보처리방침 팝업 */
.popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99999;  transition: opacity .4s, visibility .4s; opacity: 0; visibility: hidden; line-height: 1.4; }
.popup.on {opacity: 1; visibility: visible;}
.popup .bg{width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.popup .inn{ width: 95%; max-width: 1280px; height: 60vh; margin: 0 auto; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px; box-sizing: border-box; padding: 25px 0;}
.popup .inn .cont{ width: 100%; height: 100%; position: relative; }
.popup .inn .cont .close{ position: absolute; bottom: calc(100% + 40px); left: 50%; transform: translateX(-50%); z-index: 99999; cursor: pointer; color: #fff; font-size: 32px; }
.popup .inn .cont .privacy{height: 100%; line-height: 1.3; overflow: auto; padding: 0 25px; box-sizing: border-box; }
.popup .inn .cont .privacy .conBx{
    margin: 0 0 25px;
    padding: 0 0 25px;
    border-bottom: 1px solid rgb(223, 223, 223);
    letter-spacing: -.48px;
    background-color: rgb(255, 255, 255);
}

.popup .inn .cont .privacy .p01 {
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    margin-bottom: 20px;
}
.popup .inn .cont .privacy .p03 {
    font-size: 16px;
    line-height: 25px;
    color: rgb(51, 51, 51);
}

@media screen and (max-width: 450px){
    .popup .inn .cont .privacy .p01{ font-size: 16px; }
    .popup .inn .cont .privacy .p03{font-size: 14px;}
    /* .popup .inn{ padding-right: 0; } */
}


main {
    width: 100%;
    overflow: hidden;
}