@charset "UTF-8";
/* customize */

/* variables */
:root {
	/* 배경 색상 */
	--bgc-0: #ffffff;
	--bgc-1: white;
	--bgc-2: white;
	--bgc-3: white;
	
	/* 폰트 색상 */
	--fc-0: #000000;
	--fc-1: black;
	--fc-2: black;
	--fc-3: black;
	
	/* 테두리 색상 */
	--bdc-0: #969696;
	--bdc-1: black;
	--bdc-2: black;
	--bdc-3: black;
}

/* font */
html { font-family: "Noto Sans KR", sans-serif; font-size:var(--fs); --fs:14px; }

/* cascade */
body { overflow:hidden; 
	--bgc: var(--bgc-0);
	--bdc: var(--bdc-0);
	--fc: var(--fc-0);
	--frame: 100%;
	--cv-vertical: calc( ( 50 * var(--fvh) ) - ( 50 * var(--vh) ) ); 
}
body.mobile { --cv-vertical: calc( 50vh - ( 50 * var(--vh) ) ); }

/* popup */
.popup.center .popup-body { margin-top:calc(-1 * var(--cv-vertical)); }

/* customize */


/* init setting */

/* animation */
@keyframes fadeinL {
      from {
         left:100%;
      }
      to {
         left:0;
      }
   }

   @keyframes fadeinR {
      from {
         left:-100%;
      }
      to {
         left:0;
      }
   }

   @keyframes fadeoutL {
      from {
         left:0;
      }
      to {
         left:-100%;
      }
   }

   @keyframes fadeoutR {
      from {
         left:0;
      }
      to {
         left:100%;
      }
   }
/* animation */

/* init end */

/* common */
@keyframes slideIn {
    from {
        margin-left: 50px;
    }

    to {
        margin-left: 0;
    }
}

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

.material-symbols-outlined.spinner, 
.material-symbols-rounded.spinner 
{
	animation: anime-rotate 2s infinite linear;
}	

/* init setting */


/* component */

/* button */
/* .btn { --bgc:var(--secondary); --bdc:var(--secondary); --fc:#333333; } */

/* input */
/* 
.form-control { --bgc:var(--secondary); --bdc:var(--secondary); --fc:#333333; }
.form-control::placeholder { --fc:gray; }
 */

/* checkbox */

label.checkbox .span { --bdc:gray; }
label.checkbox > [type=checkbox]:checked + span { --bgc:var(--primary); }
label.checkbox > [type=radio]:checked + span { --bgc:var(--primary); }

/* radio button */
label.radio > span { --bgc:transparent; --bdc:gray; }
label.radio > [type=checkbox]:checked + span::before { --bgc:var(--primary); }
label.radio > [type=radio]:checked + span::before { --bgc:var(--primary); }

/* component */