:root {
	--color: #7192f3;
	--poppins: "Poppins";
}

.wrap{
	width: 95%;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
}
.wrap[max="1780"] {
	max-width: 1780px;
}
.wrap[max="1600"] {
	max-width: 1600px;
}
.wrap[max="1440"] {
	max-width: 1440px;
}
.wrap[max="1280"] {
	max-width: 1280px;
}
@media screen and (max-width:820px) {
	.wrap{width: 90%;}
}


@keyframes wave {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes wave2 {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100%);
	}
}

html,
body {
	font-family: "Pretendard";
}

*[data-count] {
	font-variant-numeric: tabular-nums;
}

#intro {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999;
}

#intro svg {
	position: relative;
	z-index: 2;
	width: 50% !important;
	max-width: 359px;
}

#intro .particle {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#intro .particle div {
	height: 100%;
	background: #fff;
}

._header {
	width: 100%;
	font-size: 18px;
	letter-spacing: -0.05em;
	font-family: var(--poppins), 'Pretendard';
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9999;
	transition: background 0.4s,backdrop-filter 0.4s;
	backdrop-filter: blur(0px);
}
._header.scroll{
	backdrop-filter: blur(10px);
}

._header .wrap{
	gap: 35px; display: flex; align-items: center; justify-content: space-between;
	padding: 24px 0; box-sizing: border-box;
}

._header .wrap h1{}
._header .wrap h1 a{display: flex; align-items: center;}
._header .wrap h1 a img{width: 138px;}

._header .right{
	display: flex; justify-content: center;
}
._header .right nav{
	display: flex; align-items: center; justify-content: center; gap: 34px;
}

._header a {
	transition: font-weight 0.4s;
}

._header .menu{ display: flex; justify-content: flex-end; height: 100%; }
._header .menu > li{ height: 100%; position: relative; }
._header .menu li > a{ padding: 0 15px; display: flex; align-items: center; justify-content: center;}
._header .menu > li > a{ height: 100%;}

._header .menu li .submenu{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 180px; padding: 10px 0; background-color: #fff; border-radius: 0 0 16px 16px; display: none; }
._header .menu li .submenu.mob{ opacity: 0; pointer-events: none; }
._header .menu li .submenu li > a{ padding: 7px 0; }


._header .right .langWrap{ position: relative; z-index: 99999; }
._header .right .langWrap > ul{ min-width: 70px; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; background-color: #fff; border-radius: 10px; display: none; padding: 10px 0; font-size: 16px; }
._header .right .langWrap > ul li > a{ display: block; padding: 7px 10px; box-sizing: border-box; text-align: center; }

._header .lang {
	border-radius: 10px;
	font-size: 24px;
	width: calc(48 / 24 * 1em);
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.4s;
}

._header .lang i {
	transition: color 0.4s;
	color: var(--color);
}

._header .right .hamwrap{ display: flex; align-items: center; }

@media screen and (min-width: 821px) {
    ._header .right nav .bg {
        display: none;
    }
	._header .lang:hover {
        background: #7292f3;
    }
    
    ._header .lang:hover i {
        color: #fff;
    }
    
    ._header a:hover {
        font-weight: bold;
    }
    
    ._header:hover {
        background: #fff;
    }
}


.m_menu {
	position: relative;
	z-index: 9999;
	width: 25px;
	height: 16px;
	cursor: pointer;
	display: none;
}
.m_menu::before {
	content:''; display: block; position: absolute;
	top: 50%; transform: translateY(-50%); left: -4px;
	height: 45px; width: 120px;
}

.m_menu span {
	position: absolute;
	transform: translateY(-50%);
	width: 100%;
	height: 3px;
	background: #000;
}

.m_menu span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%);
}

.m_menu span:nth-child(2) {
	top: 100%;
	transform: translateY(-50%);
}

@media screen and (max-width:1600px) {
	._header{font-size: 16px;}
	._header .wrap {padding: 15px 0;}
	._header .wrap h1 a img{width: 120px;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
    ._header .menu > li > a{ padding: 0 10px; }
}
@media screen and (max-width:1024px) {
    ._header .right{ gap: 5px; }
    ._header .right nav{ gap: 14px; }
}
@media screen and (max-width:820px) {
    ._header .menu{ flex-direction: column; justify-content: center; align-items: center; width: 100%; }
    ._header .menu > li{ height: unset; }
    ._header .menu li > a{ height: unset; padding: 15px 10px; }
    ._header .menu li .submenu{ position: static; background-color: unset; transform: translateY(0); }
    ._header .menu li .submenu li > a{ padding: 5px 10px; font-size: 20px; color: #222; letter-spacing: -0.03em;}
    ._header .menu li .submenu.mob{ opacity: 1; pointer-events: unset; }

    ._header .wrap h1 {position: relative; z-index: 3;}
    
    ._header .lang {position: relative; z-index: 3;}
    ._header .right nav {overflow: hidden; gap: calc(40/60*1em); }
    ._header .right nav .bg {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: blur(70px); -webkit-filter: blur(70px);}
    ._header .right nav .bg .obj {width: 100%; position: absolute; border-radius: 50%;}
    ._header .right nav .bg .obj:nth-child(1) {animation: bg_gradient 10s linear infinite; left: 0; top: 0; transform: skew(10deg) translate(-50%, -50%); background: linear-gradient(to right, #5caad8 0%, #98ddf0 100%);}
    ._header .right nav .bg .obj:nth-child(2) {animation: bg_gradient2 8s linear infinite; right: 0; top: 100%; transform: skew(10deg) translate(50%, -50%); background: linear-gradient(to right, #5caad8 0%, #c6a7ff 100%);}
    ._header .right nav .bg .obj:before {content: ''; display: block; padding-top: 100%;}
    @keyframes bg_gradient {
        0% {
            transform: skew(10deg) translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: skew(10deg) translate(-50%, -50%) rotate(360deg);
        }
    }
    @keyframes bg_gradient2 {
        0% {
            transform: skew(10deg) translate(50%, -50%) rotate(0deg);
        }
        100% {
            transform: skew(10deg) translate(50%, -50%) rotate(360deg);
        }
    }
    ._header .right nav > *:not(.bg) {position: relative; z-index: 2;}
    ._header {font-size: clamp(36px, 60/820*100vw, 60px);}
	._header .wrap{gap: 0; padding: 0;}
	._header .right{gap: 4px;}
	._header .right nav {font-weight: 500; flex-direction: column; align-items: flex-start; justify-content: center; position: absolute; width: 100vw; height: 100vh; background: #fff; top: 0; left: 50%; transform: translate(-50%, -100%); z-index: 1; transition: .6s;}
    ._header .right nav.active {transform: translate(-50%, 0%);}
	.m_menu{display: block;}
    .m_menu span {transition: .4s;}
    ._header:has(.right nav.active) .m_menu span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
    ._header:has(.right nav.active) .m_menu span:nth-child(2) {top: 50%; transform: translateY(-50%) rotate(-45deg);}
    ._header:has(.right nav.active) .m_menu span:nth-child(3) {opacity: 0;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}





._footer {
    position: relative; z-index: 1;
	background: #f8f8f8;
	padding: 43px 0 60px;
}

._footer .flx{ display: flex; align-items: flex-end; justify-content: flex-start; }

._footer .flx .toggle{ position: relative; margin-left: 10px; margin-bottom: -3px; }
._footer .flx .toggle span{ 
    background: rgba(255, 255, 255, 0.52);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    letter-spacing: -0.05em;
    padding: 0 15px;
    height: calc(30 / 16 * 1em);
    box-sizing: border-box;
    border-radius: 1000px;
    border: 1px solid #c9c9c9;
    transition: background 0.4s, color 0.4s;
    cursor: pointer;
}
._footer .flx .toggle span:last-of-type{ display: none; }

._footer.en .flx .toggle span{ display: none; }
._footer.en .flx .toggle span:last-of-type{ display: flex; }

@media screen and (min-width: 821px){
    ._footer .flx .toggle span:hover{
        border: 1px solid transparent;
        background: #0076ff;
        color: #fff;
    }
}

._footer .box {
	margin-top: 38px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

._footer .address {
	display: flex;
	flex-direction: column;
	gap: 14px;
	word-break: keep-all;
    width: 40%;
}

._footer .address.eng{ display: none; }
._footer.en .address{ display: none; }
._footer.en .address.eng{ display: flex; }

._footer .address .col {
	display: grid;
	grid-template-columns: 0.8fr 3fr;
}

._footer .address .col span br {
	display: none;
}

._footer .nav {
	display: flex;
	gap: 60px;
}

._footer .nav li {
	display: flex;
	flex-direction: column;
    /* align-items: center; */
	gap: 14px;
	font-family: var(--poppins);
}

._footer .nav li p {
	font-size: 22px;
	font-size: 18px;
	color: #6f6f6f;
	font-weight: 600;
	letter-spacing: -0.045em;
}

._footer .nav li a {
	font-weight: 300;
	font-size: 17px;
	letter-spacing: -0.045em;
}

._footer .sns-box {
	display: flex;
	justify-content: space-between;
	margin-top: 70px;
	padding-top: 17px;
	border-top: 1px solid rgba(48, 48, 48, 0.1);
}

._footer .sns-box .infor .links {
	font-size: 14px;
	letter-spacing: -0.05em;
	display: flex;
	gap: 8px;
}

._footer .sns-box .infor p {
	font-size: 14px;
	color: #5d5d5d;
	margin-top: 10px;
}

._footer .sns-box .sns {
	display: flex;
	gap: 6px;
}

._footer .sns-box .sns a {
	aspect-ratio: 1/1;
	background: #414141;
	background: #6f6f6f;
	border-radius: 10px;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--poppins);
	font-size: 22px;
	letter-spacing: -0.05em;
	color: #fff;
}

._footer .sns-box .sns a i {
	font-size: 20px;
}
@media screen and (max-width: 1680px) {
    ._footer .box {
		flex-direction: column;
		justify-content: flex-start;
		gap: 50px;
	}
    ._footer .nav {
		justify-content: space-between;
	}
    ._footer .address{ width: 100%; }
    ._footer .address .col {
        display: grid;
        grid-template-columns: 150px 3fr;
    }

}
@media screen and (max-width: 1280px) {
    ._footer .nav {
		gap: 45px;
	}
}
@media screen and (max-width: 1024px) {
	._footer .nav {
		gap: 0px;
	}
}

@media screen and (min-width: 821px) {
	._footer .address .col span {
		line-height: 1.5;
	}
}

@media screen and (max-width: 820px) {
	._footer {
		text-align: left;
		padding: 60px 0 45px;
	}

    ._footer .flx .toggle span{
        font-size: 14px;
    }

	._footer .box {
		margin-top: 0;
	}

	._footer .address {
		font-size: 16px;
		margin-top: 30px;
		letter-spacing: -0.03em;
	}

	._footer .address .col {
		display: flex;
		gap: 15px;
		font-size: 14px;
	}

	._footer .address .col p {
		width: 135px;
		flex: 0 0 auto;
		white-space: nowrap;
	}

	._footer .address .col span {
		line-height: 1.3;
		text-align: left;
	}

	._footer .nav {
		display: none;
	}

	._footer .sns-box {
		padding-top: 35px;
		margin-top: 40px;
		flex-direction: column;
		gap: 30px;
		align-items: flex-start;
	}

	._footer .sns-box .infor a {
		font-size: 14px;
		font-weight: 300;
		letter-spacing: -0.05em;
	}

	._footer .sns-box .infor p {
		letter-spacing: -0.05em;
	}
}

@media screen and (min-width: 481px) {
	._footer .address .col span br {
		display: none;
	}
}

@media screen and (max-width: 480px) {
    ._footer .flx{ justify-content: space-between; }
    
	._footer .address .col p {
		width: 82px;
	}

	._footer .address .col span br {
		display: block;
	}
}

@media screen and (max-width: 320px) {
	._footer .address .col {
		flex-direction: column;
	}
}



.quick-menu {
	display: flex;
	flex-direction: column;
	gap: 5px;
	position: fixed;
	right: 40px;
	bottom: 20px;
	z-index: 999999;
	transition: opacity 0.5s,transform 0.5s;
}
.quick-menu.hide{opacity: 0; transform: translateX(60px); pointer-events: none;}
.quick-menu button {
	aspect-ratio: 1;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 1000px;
}

.quick-menu .ellipsis-box {
	position: relative;
}

.quick-menu .ellipsis-box .nav {
	position: absolute; bottom: 100%; right: 0; margin-bottom: 10px;
	font-family: var(--poppins);
	font-weight: 500; letter-spacing: -0.045em;
	pointer-events: none;
}

.quick-menu .ellipsis-box nav {
	display: flex; flex-direction: column; gap: 6px;
}

.quick-menu .ellipsis-box nav a {
	display: flex; align-items: center; justify-content: center;
	width: 130px; height: 44px;
	border-radius: 100px;
	/* border: 1px solid #eeeeee; */
	line-height: 0.8;
	position: relative; transition: color 0.1s;
	opacity: 0; transform: translateX(60px);
	transition: opacity 0.4s,transform 0.4s;
}
.quick-menu .ellipsis-box nav a::before{
	content:''; display: block; width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; border-radius: 100px; border: 1px solid #eee; box-sizing: border-box;
	transition: opacity 0.1s; background-color: #fff;
}
.quick-menu .ellipsis-box nav a::after {
	opacity: 0; transition: opacity 0.1s;
	content:''; display: block; position: absolute;
	/* left: -1px; top: -1px; */
	/* width: calc(100% + 2px); height: calc(100% + 2px); */
	left: 0; top: 0;
	width: 100%; height: 100%; border-radius: 100px;
	background: linear-gradient(90deg,rgba(114, 146, 243, 1) 0%, rgba(84, 203, 245, 1) 100%);
}
.quick-menu .ellipsis-box nav a:hover{color: #fff;}
.quick-menu .ellipsis-box nav a:hover::before{opacity: 0;}
.quick-menu .ellipsis-box nav a:hover::after{opacity: 1;}
.quick-menu .ellipsis-box nav a p{position: relative; z-index: 2;}

.quick-menu .ellipsis-box.active nav{pointer-events: auto;}
.quick-menu .ellipsis-box.active nav a{opacity: 1; transform: translateX(0);}
.quick-menu .ellipsis-box.active nav a:nth-child(1){}
.quick-menu .ellipsis-box.active nav a:nth-child(2){transition-delay: 0.1s;}
.quick-menu .ellipsis-box.active nav a:nth-child(3){transition-delay: 0.2s;}

.quick-menu .ellipsis-box.active .ellipsis {background: #000;}
.quick-menu .ellipsis-box.active .ellipsis img:nth-child(1) {display: none;}
.quick-menu .ellipsis-box.active .ellipsis img:nth-child(2) {display: block;}
.quick-menu .ellipsis {
	border: 1px solid #000000;
	background: #ffffff;
	transition: background 0.4s;
	position: relative;
}

.quick-menu .ellipsis img {width: 50%;margin: 0 auto;}
.quick-menu .ellipsis img:nth-child(1) {display: block;}
.quick-menu .ellipsis img:nth-child(2) {display: none; width: 30%;}
.quick-menu .chat-bot {
	background: #7293f3;
	transition: background 0.4s;
}
.quick-menu .chat-bot img{width: 62%;}
.quick-menu .chat-bot:hover {
	background-color: #00e1b4;
	background-color: #444;
}
@media screen and (max-width:1600px) {
	.quick-menu {right: 20px; bottom: 20px;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.quick-menu .ellipsis-box .nav{right: 0; margin-right: 0; bottom: 100%; margin-bottom: 10px;}
	.quick-menu .ellipsis-box nav a{width: 100px; height: 34px; font-size: 14px;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.quick-menu {right: 10px;}
	.quick-menu button{width: 40px;}
	.quick-menu .ellipsis-box nav a{width: 80px; height: 30px; font-size: 12px;}
}
@media screen and (max-width:320px) {}




/* 개인정보취급방침 */
.paragraph{ padding: 150px 0; line-height: 1.4; font-size: 18px; letter-spacing: -0.045em; }
.paragraph strong{ font-size: 24px; font-weight: 700; letter-spacing: -0.045em; }

@media screen and (max-width: 820px){
    .paragraph{ padding: 100px 0; font-size: 14px; }
    .paragraph strong{ font-size: 20px; }
}


.privlayer{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; word-break: keep-all; display: none; }
.privlayer .inn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; padding: 45px 60px; box-sizing: border-box; z-index: 1; background-color: #fff; width: 90%; max-width: 640px; max-height: 90vh; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; overflow: auto; }
.privlayer .bg{ background-color: rgba(0,0,0,0.8); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }

.privlayer .closein{ font-size: 26px; display: block; padding: 10px; box-sizing: border-box; color: #222; font-weight: 600; cursor: pointer; position: absolute; right: 15px; top: 15px; }
.privlayer .inn .scroll{ height: 100%; overflow: auto; }
.privlayer .paragraph{ padding: 0; }

@media screen and (max-width: 1280px){
    .privlayer .inn{ padding: 45px 20px; }
    .privlayer .closein{ padding: 0; }
}