@charset "utf-8";

:root {

	/* 기본 */

	--min-width: 360px;
	--100vw: clamp(var(--min-width), 100vw, 100vw);
	--inner-padding: 30px;
	--inner-padding2: clamp(var(--inner-padding), 3.5%, 30px);
	--inner-width: 1400px;
	--inner: calc(var(--inner-width) + (var(--inner-padding) * 2));
	--scroll-bar-width: 5px;
	--scroll-bar-width-body: 8px;
	--scroll-bar-height: 5px;


	/* 색상 */

	--Raven: #343840;
	--Primary: #24498D;
	--Primary10: rgba(36, 73, 141, 10%);
	--Secondary: #2F5DF4;
	--Secondary50: rgba(47, 93, 244, 50%);
	--Tertiary: #C79C41;
	--Look: #FF7B7B;
	--BG: #EEF4FF;
	--Night: #17181A;
	--Raven: #343840;
	--Ebony: #5E6370;
	--Charcoal: #6E7686;
	--Ash: #909BAC;
	--Silver: #B5BDCD;
	--Mist: #CFD5E5;
	--Cloud: #E4E6F2;
	--Phantom: #ECEDF4;
	--Ghost: #F7F8FB;
	--Snow: #FFFFFF;
	--Snow50: rgba(255, 255, 255, 50%);
	--Snow20: rgba(255, 255, 255, 20%);
	--Input: #F9F9F9;

	/*============================================================== */

	/* FONT SIZE */
	--font-size: 1px;
	--font-size-14: clamp(12rem, 0.25vw + 11rem, 14rem);
	--font-size-16: clamp(14rem, 0.25vw + 13rem, 16rem);
	--font-size-18: clamp(16rem, 0.25vw + 14rem, 18rem);
	--font-size-20: clamp(17rem, 0.25vw + 16rem, 20rem);
	--font-size-22: clamp(19rem, 0.3vw + 18rem, 22rem);
	--font-size-24: clamp(21rem, 0.35vw + 20rem, 24rem);
	--font-size-26: clamp(23rem, 0.4vw + 22rem, 26rem);
	--font-size-28: clamp(25rem, 0.45vw + 24rem, 28rem);
	--font-size-30: clamp(26rem, 0.5vw + 25rem, 30rem);
	--font-size-32: clamp(27rem, 0.55vw + 26rem, 32rem);
	--font-size-40: clamp(28rem, 0.7vw + 26rem, 40rem);

	/* PADDING */
	--padding-8:  clamp(6rem,  calc(6rem  + 2 * ((100vw - 360px) / 1560)), 8rem);
	--padding-12: clamp(8rem,  calc(8rem  + 4 * ((100vw - 360px) / 1560)), 12rem);
	--padding-16: clamp(12rem, calc(12rem + 4 * ((100vw - 360px) / 1560)), 16rem);
	--padding-20: clamp(16rem, calc(18rem + 6 * ((100vw - 360px) / 1560)), 20rem);
	--padding-24: clamp(16rem, calc(16rem + 8 * ((100vw - 360px) / 1560)), 24rem);
	--padding-32: clamp(20rem, calc(20rem + 12 * ((100vw - 360px) / 1560)), 32rem);
	--padding-36: clamp(24rem, calc(24rem + 12 * ((100vw - 360px) / 1560)), 36rem);
	--padding-40: clamp(28rem, calc(28rem + 12 * ((100vw - 360px) / 1560)), 40rem);

	/* GAP */
	--gap-8:  clamp(6rem,  calc(5rem  + 0.10vw), 8rem);
	--gap-10: clamp(8rem,  calc(7rem  + 0.12vw), 10rem);
	--gap-12: clamp(10rem, calc(8rem  + 0.15vw), 12rem);
	--gap-14: clamp(12rem, calc(10rem + 0.18vw), 14rem);
	--gap-16: clamp(14rem, calc(11rem + 0.20vw), 16rem);
	--gap-18: clamp(16rem, calc(13rem + 0.22vw), 18rem);
	--gap-20: clamp(18rem, calc(14rem + 0.25vw), 20rem);
	--gap-24: clamp(20rem, calc(16rem + 0.30vw), 24rem);
	--gap-28: clamp(24rem, calc(18rem + 0.35vw), 28rem);
	--gap-32: clamp(28rem, calc(22rem + 0.40vw), 32rem);
	--gap-36: clamp(32rem, calc(26rem + 0.45vw), 36rem);
	--gap-40: clamp(36rem, calc(30rem + 0.50vw), 40rem);

	/* BORDER RADIUS */
	--border-radius-12: clamp(10rem, calc(8rem  + 0.15vw), 12rem);
	--border-radius-14: clamp(12rem, calc(10rem + 0.18vw), 14rem);
	--border-radius-16: clamp(14rem, calc(11rem + 0.20vw), 16rem);
	--border-radius-20: clamp(16rem, calc(13rem + 0.25vw), 20rem);
	--border-radius-24: clamp(18rem, calc(15rem + 0.25vw), 24rem);

	/* ICON */
	--icon-xsmall: 14rem;
	--icon-small:  clamp(12rem, calc(10rem + 0.30vw), 16rem);
	--icon-medium: clamp(16rem, calc(14rem + 0.40vw), 20rem);
	--icon-large:  clamp(20rem, calc(16rem + 0.50vw), 24rem);
	--icon-large:  clamp(22rem, calc(18rem + 0.60vw), 28rem);
	--icon-xxlarge:  clamp(24rem, calc(20rem + 0.70vw), 32rem);
}

@media screen and (max-width: 480px) {
	:root {
		--inner-padding: 20px;
	}
}
@keyframes fade_in {0% {opacity: 0;}}
@keyframes fade_out {0% {opacity: 1;}}
@keyframes fade_up {0% {transform: translateY(20px); opacity: 0;}}
@keyframes fade_up100 {0% {transform: translateY(100%); opacity: 0;}}
@keyframes fade_down {0% {transform: translateY(-20px); opacity: 0;}}
@keyframes fade_down2 {0% {transform: translateY(-10px); opacity: 0;}}
@keyframes fade_left {0% {transform: translateX(20px); opacity: 0;}}
@keyframes fade_left100 {0% {transform: translateX(100%); opacity: 0;}}
@keyframes fade_right {0% {transform: translateX(-20px); opacity: 0;}}
@keyframes fade_scale {0% {transform: scale(.8); opacity: 0;}}
@keyframes fade_scale_zoom {0% {transform: scale(1.1);}}
@keyframes flip_up {0% {transform: rotateX(90deg); opacity: 0;}}

@keyframes clip_path_height {0% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height_up {0% {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_width {0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_width_reverse {0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_circle_center {0% {clip-path: circle(0.0% at 50% 100%);} 100% {clip-path: circle(150% at 50% 100%);}}

@keyframes text_letter_up {10% {transform: translateY(-3px);} 25%, 100% {transform: none}}


/* 아이콘 */
i.icon {display: block; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; transition: .5s ease;}
.icon.xsmall {width: var(--icon-xsmall); height: var(--icon-xsmall);}
.icon.small {width: var(--icon-small); height: var(--icon-small);}
.icon.medium {width: var(--icon-medium); height: var(--icon-medium);}
.icon.large {width: var(--icon-large); height: var(--icon-large);}
.icon.xlarge {width: var(--icon-xlarge); height: var(--icon-xlarge);}
.icon.xxlarge {width: var(--icon-xxlarge); height: var(--icon-xxlarge);}
.icon.look {background-color: var(--Look);}
.icon.snow {background-color: var(--snow);}
.icon.ico-login {-webkit-mask-image: url(../images/ico_login.svg); mask-image: url(../images/ico_login.svg); background-color: var(--Raven);}
.icon.ico-account-circle {-webkit-mask-image: url(../images/ico_account_circle.svg); mask-image: url(../images/ico_account_circle.svg); background-color: var(--Raven);}
.icon.ico-logout {-webkit-mask-image: url(../images/ico_logout.svg); mask-image: url(../images/ico_logout.svg); background-color: var(--Raven);}
.icon.ico-id-card {-webkit-mask-image: url(../images/ico_id_card.svg); mask-image: url(../images/ico_id_card.svg); background-color: var(--Raven);}
.icon.ico-dehaze {-webkit-mask-image: url(../images/ico_dehaze.svg); mask-image: url(../images/ico_dehaze.svg); background-color: var(--Raven);}
.icon.ico-close {-webkit-mask-image: url(../images/ico_close.svg); mask-image: url(../images/ico_close.svg); background-color: var(--Raven);}
.icon.ico-youtube {-webkit-mask-image: url(../images/ico_youtube.svg); mask-image: url(../images/ico_youtube.svg); background-color: var(--Raven);}
.icon.ico-instagram {-webkit-mask-image: url(../images/ico_instagram.svg); mask-image: url(../images/ico_instagram.svg); background-color: var(--Raven);}
.icon.ico-facebook {-webkit-mask-image: url(../images/ico_facebook.svg); mask-image: url(../images/ico_facebook.svg); background-color: var(--Raven);}
.icon.ico-home {-webkit-mask-image: url(../images/ico_home.svg); mask-image: url(../images/ico_home.svg); background-color: var(--Raven);}
.icon.ico-add {-webkit-mask-image: url(../images/ico_add.svg); mask-image: url(../images/ico_add.svg); background-color: var(--Raven);}
.icon.ico-add2 {-webkit-mask-image: url(../images/ico_add_2.svg); mask-image: url(../images/ico_add_2.svg); background-color: var(--Raven);}
.icon.ico-close2 {-webkit-mask-image: url(../images/ico_close2.svg); mask-image: url(../images/ico_close2.svg); background-color: var(--Raven);}
.icon.ico-article-shortcut {-webkit-mask-image: url(../images/ico_article_shortcut.svg); mask-image: url(../images/ico_article_shortcut.svg); background-color: var(--Raven)}
.icon.ico-business-center {-webkit-mask-image: url(../images/ico_business_center.svg); mask-image: url(../images/ico_business_center.svg); background-color: var(--Raven)}
.icon.ico-corporate-fare {-webkit-mask-image: url(../images/ico_corporate_fare.svg); mask-image: url(../images/ico_corporate_fare.svg); background-color: var(--Raven)}
.icon.ico-home-work {-webkit-mask-image: url(../images/ico_home_work.svg); mask-image: url(../images/ico_home_work.svg); background-color: var(--Raven)}
.icon.ico-inbox-text {-webkit-mask-image: url(../images/ico_inbox_text.svg); mask-image: url(../images/ico_inbox_text.svg); background-color: var(--Raven)}
.icon.ico-developer-guide {-webkit-mask-image: url(../images/ico_developer_guide.svg); mask-image: url(../images/ico_developer_guide.svg); background-color: var(--Raven)}
.icon.ico-play {-webkit-mask-image: url(../images/ico_play.svg); mask-image: url(../images/ico_play.svg); background-color: var(--Raven)}
.icon.ico-pause {-webkit-mask-image: url(../images/ico_pause.svg); mask-image: url(../images/ico_pause.svg); background-color: var(--Raven)}
.icon.ico-chevron-backward {-webkit-mask-image: url(../images/ico_chevron_backward.svg); mask-image: url(../images/ico_chevron_backward.svg); background-color: var(--Raven)}
.icon.ico-chevron-forward {-webkit-mask-image: url(../images/ico_chevron_forward.svg); mask-image: url(../images/ico_chevron_forward.svg); background-color: var(--Raven)}
.icon.ico-arrow-right-alt {-webkit-mask-image: url(../images/ico_arrow_right_alt.svg); mask-image: url(../images/ico_arrow_right_alt.svg); background-color: var(--Raven)}


/* 버튼 */
.btn, .btn * {transition: .5s ease;}
.btn:has(.icon) {display: flex; align-items: center; gap: 4px;}
.btn:has(.icon) .icon {flex: none;}
.btn:not(.text) {border-radius: 8px; width: fit-content;}
.btn.text, .btn.icon {position: relative;}
.btn.text:before, .btn.icon:before {--size: calc(100% + 6px); content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: var(--size); height: var(--size); background: var(--BG); left: -2px; opacity: 0; z-index: -1; border-radius: 4px; transition: .5s ease;}
.btn.small {padding: 0 var(--padding-8); height: 28rem; font-size: 12px; font-weight: 600;}
.btn.medium {height: 48rem; width: clamp(100rem, 5vw, 120rem); display: flex; align-items: center; justify-content: center; padding: 0 var(--padding-12);}
.btn.ash {background: var(--Ash); color: #fff;}
.btn.primary {background: var(--Primary); color: #fff;}
.btn.primary .icon {background-color: var(--Snow);}
.btn.secondary {color: var(--Secondary); border: 1px solid var(--Secondary);}
.btn.secondary-bg {background: var(--Secondary); color: #fff;}
.btn.secondary-bg .icon {background-color: var(--Snow);}
.btn.tertiary {color: var(--Ash); border: 1px solid var(--Ash);}
.btn-box {display: flex; gap: 8rem; align-content: center; justify-content: center;}


/* 색상 */
.ash {color: var(--Ash);}
.tertiary {color: var(--Tertiary);}
.silver {color: var(--Silver);}
.primary {color: var(--Primary);}
.secondary {color: var(--Secondary);}

/* 폰트 */
.font-12 {font-size: 12px;}
.font-14 {font-size: var(--font-size-14);}
.font-16 {font-size: var(--font-size-16);}
.font-18 {font-size: var(--font-size-18);}
.font-20 {font-size: var(--font-size-20);}
.font-22 {font-size: var(--font-size-22);}
.font-24 {font-size: var(--font-size-24);}
.font-26 {font-size: var(--font-size-26);}

@media screen and (min-width: 1025px) {
	.btn.text:hover {color: var(--Secondary);}
	.btn.text:hover .icon {background-color: var(--Secondary);}
	.btn.text:hover:before {opacity: 1;}

	.btn.icon:hover .icon {background-color: var(--Secondary);}
	.btn.icon:hover:before {opacity: 1;}

	.btn:not(.text):not(.icon).secondary-bg:hover {background: #0539e3;}
	.btn:not(.text):not(.icon).primary:hover {background: #003087;}
	.btn:not(.text):not(.icon).ash:hover {background: #6b7585;}
	.btn:not(.text):not(.icon).tertiary:hover {background: #f2f2f2;}
	.btn:not(.text):not(.icon).secondary:hover {background: #2f5df41a;}
}