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

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

.fontf__inter{font-family:'Inter', dotum, sans-serif}
.fontf__clash{font-family:'ClashDisplay-Variable'}
/* } 기타 - 추후 쌓아보고 정리 *****************************************************************************
***************************************************************************************/






/******************************************************************************
******************************************************************************* 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: underlineFadeThenDraw .6s ease forwards;}
		}

		.btn__box__st01 a img {
			width: 36px;
			height: 36px;
		}

		@keyframes underlineFadeThenDraw {
			0% {
				opacity: 1;
				transform: scaleX(1);
				transform-origin: left;
			}
			35% {
				opacity: 0;
				transform: scaleX(1);
				transform-origin: left;
			}
			36% {
				opacity: 1;
				transform: scaleX(0);
				transform-origin: left;
			}
			100% {
				opacity: 1;
				transform: scaleX(1);
				transform-origin: left;
			}
		}

	/* 버튼 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;
			}
		}

		/* 버튼 모바일 */
		@media screen and (max-width:820px){
			.btn__box__st01 a,
			.btn__box__st02 a{
				font-size:32px;
			}

			.btn__box__st01 a img,
			.btn__box__st02 a img{
				width:32px;
				height:32px;
				object-fit:contain;
				vertical-align:middle;
			}

			.btn__box__st01 a span.underline,
			.btn__box__st02 a span.underline{
				height:6px;
			}
		}

		/* 버튼 모바일 */
		@media screen and (max-width:570px){
			.btn__box__st01 a,
			.btn__box__st02 a{
				font-size:24px;
			}

			.btn__box__st01 a img,
			.btn__box__st02 a img{
				width:24px;
				height:24px;
				object-fit:contain;
				vertical-align:middle;
			}

			.btn__box__st01 a span.underline,
			.btn__box__st02 a span.underline{
				height:4px;
			}
		}



/* } 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 *****************************************************************************
***************************************************************************************/