/* ============================================================================================================================== */
/* ======================================================= custom common 코드 ==================================================== */
/* ============================================================================================================================== */

.zoom-wrap {overflow: hidden; position: relative;}
.zoom {transform: scale(1.12); transition: transform 0.8s ease-in-out; width: 100%;}
.zoom.active {transform: scale(1); transition: transform 2.4s ease-in-out;}
.bg-animation {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.progress-ring-circle {transition: 2.4s stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%;}

.pc-layout {display: block;}
.mobile-layout {display: none;}

.fade {opacity: 1; transition: opacity 0.5s;}
.fade.out {opacity: 0.6; transition: opacity 3s; /* 페이드 효과 시간 조정 */}

.btn-hover {position: relative; transition: all 0.5s ease-in-out; overflow: hidden;}
.btn-hover::before {position: absolute; content: ''; left: 0; top: 0; width: 0; height: 100%; transition: all 0.5s ease-in-out; z-index: -1;}
.btn-hover:hover::before {width: 100%;}

.point {position: relative; overflow: hidden; padding: 2px 6px; font-weight: bold; transition: color 0.7s cubic-bezier(0.88, 0.01, 0.18, 1.12); z-index: 1; text-shadow: none;}
.point::before {content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #009eb7; /* 배경 색상 */ transition: width 0.7s cubic-bezier(0.88, 0.01, 0.18, 1.12); z-index: -1;}
.point.active {color: #fff;}
.point.active::before {width: 100%;}

.underline {position: relative; overflow: hidden;}
.underline::after {content: ''; position: absolute; width: 0; height: 2px; background-color: black; bottom: -6px; left: 0; transition: width 0.8s cubic-bezier(0.88, 0.01, 0.18, 1.12);}
.underline.visible::after {width: 100%;}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {

}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {

}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.underline::after {height: 1px; bottom: -3px;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width: 480px) {
.pc-layout {display: none !important;}
.mobile-layout {display: block !important;}
}


/* ============================================================================================================================== */
/* ======================================================= custom common 코드 ==================================================== */
/* ============================================================================================================================== */