@charset "UTF-8";
@import url("../font.css?v=2501016000");
@import url("../animation.css?v=2501016000");
/*
 *  File Name : /event/resources/css/responsive/common.css
 *  Description : 전체 공통 스타일
 */

/* common */
:root {
	--ft-family_Poppins-100: 'Poppins-Thin';
	--ft-family_Poppins-200: 'Poppins-ExtraLight';
	--ft-family_Poppins-300: 'Poppins-Light';
	--ft-family_Poppins-400: 'Poppins-Regular';
	--ft-family_Poppins-500: 'Poppins-Medium';
	--ft-family_Poppins-600: 'Poppins-SemiBold';
	--ft-family_Poppins-700: 'Poppins-Bold';
	--ft-family_Poppins-800: 'Poppins-ExtraBold';
	--ft-family_Poppins-900: 'Poppins-Black';

	--ft-family_Poppins-italic-100: 'Poppins-ThinItalic';
	--ft-family_Poppins-italic-200: 'Poppins-ExtraLightItalic';
	--ft-family_Poppins-italic-300: 'Poppins-LightItalic';
	--ft-family_Poppins-italic-400: 'Poppins-Italic';
	--ft-family_Poppins-italic-500: 'Poppins-MediumItalic';
	--ft-family_Poppins-italic-600: 'Poppins-SemiBoldItalic';
	--ft-family_Poppins-italic-700: 'Poppins-BoldItalic';
	--ft-family_Poppins-italic-800: 'Poppins-ExtraBoldItalic';
	--ft-family_Poppins-italic-900: 'Poppins-BlackItalic';

    --ft-family_default: 'Poppins-Regular';
}
body {position: relative;}
body * {letter-spacing: 0;}
button {padding: 0; background: none; border: 0; cursor: pointer;}
a {display: inline-block; text-decoration: none;}
img {vertical-align: top;}
.blind {overflow: hidden; position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0);}
.dis-none {display: none;}
.dis-block {display: block;}
.dis-flex {display: flex;}
.flex-column {display: flex; flex-direction: column !important;}
.flex-row {display: flex; flex-direction: row !important;}
.flex-align-side {display: flex; justify-content: space-between;}
.flex-align-center {display: flex; align-items: center;}
.over-hidden {overflow: hidden !important;}
.over-visible {overflow: visible !important;}
.animate-none {animation: none !important;}
.inner {position: relative; padding: var(--inner-padding);}

/* 숨김 상태 */
.status-hidden {opacity: 0; transform: translateY(10px); pointer-events: none; will-change: opacity, transform; transition: opacity 420ms cubic-bezier(.22,.61,.36,1), transform 420ms cubic-bezier(.22,.61,.36,1);}

/* width, height */
.w-full {width: 100%;}
.h-full {height: 100%;}

/* padding */
.p-0 {padding: 0 !important;}
.pl-0 {padding-left: 0 !important;}
.pr-0 {padding-right: 0 !important;}
.pt-0 {padding-top: 0 !important;}
.pb-0 {padding-bottom: 0 !important;} 

/* margin */
.mr-0 {margin-right: 0 !important;}
.mt-0 {margin-top: 0 !important;}
.mb-0 {margin-bottom: 0 !important;}

/* align */
.al-l {text-align: left !important;}
.al-r {text-align: right !important;}
.al-c {text-align: center !important;}

/* background */
.bg-none {background: none !important;}

/* button - common : square */
[class^=btn-square-] {position: relative; width: 100%; height: 138px;}
[class^=btn-square-] .bg-back,
[class^=btn-square-] .bg-front {position: absolute; left: 0; width: 100%; border-radius: 10px;}
[class^=btn-square-] .bg-back {z-index: 0; top: 26px; height: 112px; box-shadow: 0 7px 5px 0 rgba(0, 0, 0, 0.30);}
[class^=btn-square-] .bg-front {z-index: 1; top: 0; height: 128px;}
[class^=btn-square-] .front-inner {z-index: 2; position: absolute; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 10px;}
[class^=btn-square-] .front-inner::before,
[class^=btn-square-] .front-inner::after {content: ""; opacity: 0.3; display: block; z-index: 3; position: absolute; left: 8px; width: calc(100% - 16px); height: 37px; border-radius: 6px;}
[class^=btn-square-] .front-inner::before {top: 4px;}
[class^=btn-square-] .front-inner::after {bottom: 4px;}
[class^=btn-square-] .txt-area {z-index: 10; position: relative; display: flex; justify-content: center; align-items: center; height: 100%;}
[class^=btn-square-] .txt-area .txt {letter-spacing: 0; color: #FFFAF0; font-family: var(--ft-family_Poppins-700); font-size: 36px; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65); line-height: 1;}

/* button - common : square & disabled */
[class^=btn-square-]:disabled .bg-back {background: linear-gradient(to bottom, #3A3A3A 91.28%, #8B8B8B 122.67%) !important;}
[class^=btn-square-]:disabled .bg-front {background: linear-gradient(to bottom, #C9C9C9 0%, #666565 100%) !important;}
[class^=btn-square-]:disabled .front-inner {background: linear-gradient(to bottom, #A2A2A2 0%, #505050 100%) !important;}
[class^=btn-square-]:disabled .front-inner::before {background: linear-gradient(to bottom, rgba(215, 215, 215, 0.40) 38.5% , rgba(255, 255, 255, 0.00) 100%) !important;}
[class^=btn-square-]:disabled .front-inner::after {background: linear-gradient(to bottom, rgba(145, 145, 145, 0.00) 0%, rgba(65, 65, 65, 0.60) 100%) !important;}
[class^=btn-square-]:disabled .txt-area .txt {color: rgba(255, 250, 240, 0.35) !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.40) !important;}

/* button - common : square & disabled & darkgray */
[class^=btn-square-].dark:disabled .bg-back {background: linear-gradient(to bottom, #3D3D3D 91.28%, #969696 122.67%) !important;}
[class^=btn-square-].dark:disabled .bg-front {background: linear-gradient(to bottom, #7C7C7C 0%, #636363 100%) !important;}
[class^=btn-square-].dark:disabled .front-inner {background: linear-gradient(to bottom, #6B6B6B 0%, #424242 100%) !important;}
[class^=btn-square-].dark:disabled .front-inner::before {background: linear-gradient(to bottom, rgba(153, 153, 153, 0.50) 38.5% , rgba(255, 255, 255, 0.00) 100%) !important;}
[class^=btn-square-].dark:disabled .front-inner::after {background: #595959 !important;}
[class^=btn-square-].dark:disabled .txt-area .txt {color: #FFFAF0 !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.40) !important;}

/* button - common : square & green */
.btn-square-green .bg-back {background: linear-gradient(to bottom, #004814 91.28%, #00B232 122.67%);}
.btn-square-green .bg-front {background: linear-gradient(to bottom, #7FFF03 0%, #38AF1A 100%);}
.btn-square-green .front-inner {background: linear-gradient(to bottom, #77E000 0%, #008626 100%);}
.btn-square-green .front-inner::before {background: linear-gradient(to bottom, #C3FF9D 38.5% , rgba(255, 255, 255, 0.00) 100%);}
.btn-square-green .front-inner::after {background: linear-gradient(to bottom, rgba(50, 172, 22, 0.00) 0%, #015C1A 100%);}

/* button - common : square & orange */
.btn-square-orange .bg-back {background: linear-gradient(to bottom, #6B2003 91.28%, #D44624 122.67%);}
.btn-square-orange .bg-front {background: linear-gradient(to bottom, #FFA742 0%, #F46416 92.19%);}
.btn-square-orange .front-inner {background: linear-gradient(to bottom, #FF8000 0%, #C43711 92.19%);}
.btn-square-orange .front-inner::before {background: linear-gradient(to bottom, #FFFF9D 38.5%, rgba(255, 255, 255, 0.00) 100%);}
.btn-square-orange .front-inner::after {background: linear-gradient(to bottom, rgba(255, 136, 0, 0.00) 0%, #931D00 100%);}

/* button - common : square & skyblue */
.btn-square-skyblue .bg-back {background: linear-gradient(to bottom, #094099 91.28%, #0E60E5 122.67%);}
.btn-square-skyblue .bg-front {background: linear-gradient(to bottom, #7DFBFF 0%, #00AAE3 92.19%);}
.btn-square-skyblue .front-inner {background: linear-gradient(to bottom, #00C9FF 0%, #0079EA 92.19%);}
.btn-square-skyblue .front-inner::before {background: linear-gradient(to bottom, #F3F9FF 38.5%, rgba(255, 255, 255, 0.00) 100%);}
.btn-square-skyblue .front-inner::after {background: linear-gradient(to bottom, rgba(0, 157, 247, 0.00) 0%, #0033D9 100%);}

/* 
 *  [해상도 481px ~ 768px] *
 *  1. 481px ~ 768px
 *  - 모바일 가로모드
 *  - 태블릿 세로모드 *
 *  2. 768 기준 / DPR 1 / 7.68
 */
@media all and (max-width:768px) {
	/* button - common : square */
	[class^=btn-square-] {height: 17.969vw;}
	[class^=btn-square-] .bg-back,
	[class^=btn-square-] .bg-front {border-radius: 1.302vw;}
	[class^=btn-square-] .bg-back {top: 3.385vw; height: 14.583vw; box-shadow: 0 0.911vw 0.651vw 0 rgba(0, 0, 0, 0.30);}
	[class^=btn-square-] .bg-front {height: 16.667vw;}
	[class^=btn-square-] .front-inner {left: 0.521vw; top: 0.521vw; width: calc(100% - 1.042vw); height: calc(100% - 1.042vw); border-radius: 1.302vw;}
	[class^=btn-square-] .front-inner::before,
	[class^=btn-square-] .front-inner::after {left: 1.042vw; width: calc(100% - 2.083vw); height: 4.818vw; border-radius: 0.781vw;}
	[class^=btn-square-] .front-inner::before {top: 0.521vw;}
	[class^=btn-square-] .front-inner::after {bottom: 0.521vw;}
	[class^=btn-square-] .txt-area .txt {font-size: 4.6875vw; text-shadow: 0 0.26vw 0.651vw rgba(0, 0, 0, 0.65);}

	/* button - common : square & disabled */
	[class^=btn-square-]:disabled .txt-area .txt {text-shadow: 0 0.26vw 0.651vw rgba(0, 0, 0, 0.40) !important;}

}