@charset "utf-8";
/* 
	common.css : 공통 사항 정의
*/

/******************************************************************************
******************************************************************************* 기타 - 추후 쌓아보고 정리 { */

	/* 언어 */
		.font__kor{display:block; font-family:'Hahmlet', dotum, sans-serif;}
		.font__en{font-family:"Tenor Sans", sans-serif;}
		.font__jp{font-family:"Noto Serif JP", serif;}
		.font__cn{font-family:"Noto Serif SC", serif;}



/* } 기타 - 추후 쌓아보고 정리 *****************************************************************************
***************************************************************************************/






/******************************************************************************
******************************************************************************* button { */
	/* 버튼 1 */
		.btn__box__st01{}
		.btn__box__st01 a{font-size:48px; font-weight:400; font-family:'ClashDisplay-Variable'; padding-bottom:10px; color: var(--color__basic); position:relative;}
		.btn__box__st01 a span.tx{vertical-align: middle;}
		.btn__box__st01 a span.underline{position:absolute; bottom:0; left:0; width:100%; height:8px; background:var(--color__main); transform: scaleX(1); transform-origin: left;}
		.btn__box__st01 a span.overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:var(--color__white);}
		@media (pointer: fine) {
			.btn__box__st01 a:hover span.underline{ animation: underlineReset 0.5s ease forwards;}
		}

	/* 버튼 1 */
		.btn__box__st02{}
		.btn__box__st02 a{font-size:48px; font-weight:400; font-family:'ClashDisplay-Variable'; padding-bottom:10px; color: var(--color__white);}
		.btn__box__st02 a span.tx{vertical-align: middle;}
		.btn__box__st02 a span.underline{position:absolute; bottom:0; left:0; width:100%; height:8px; background:var(--color__main);}
		@media (pointer: fine) {
			.btn__box__st02 a:hover span.underline{ animation: underlineReset 0.5s ease forwards;}
		}

		@keyframes underlineReset {
			0% {
				transform: scaleX(1);
				transform-origin: right;
			}
			49% {
				transform: scaleX(0);
				transform-origin: right;
			}
			50% {
				transform: scaleX(0);
				transform-origin: left;
			}
			100% {
				transform: scaleX(1);
				transform-origin: left;
			}
		}



/* } button *****************************************************************************
***************************************************************************************/



/******************************************************************************
******************************************************************************* top btn { */		
	/* 탑버튼 */
		.topbtn__box__st01{}
		.topscr__btn__wr.show{opacity:1; visibility: visible;}
		.topscr__btn__wr{position:fixed; z-index:999; right:40px; bottom:40px; opacity:0; visibility: hidden; transition:0.3s ease-out;}
		.topscr__btn__wr .topscr__icon{display:block;}
		@media screen and (max-width:570px){
			.topscr__btn__wr{right:24px; bottom:30px;}
		}/* 570px */

/* } top btn *****************************************************************************
***************************************************************************************/