@charset "UTF-8";
@import url("../../font.css?v=25032100");
@import url("../../animation.css?v=25061600");
/*
 *  File Name : /ui_resource/css/responsive/common/common.css
 *  Description : 전체 공통 스타일 (웹상점 제외, 웹상점은 오프캔버스 리뉴얼 2차 모바일 작업 시 합칠 예정)
 *  참고사항 : --min-width 같은 경우는 태블릿, 모바일 맞추게 되면 제거해도 될 것 같음 (현재는 웹상점만 PC/태블릿/모바일 다 적용되어서 store에서만 없앤 상태)
 */

/* common */
:root {
	--ft-family_NotoSans-400: 'NotoSans-Regular';
	--ft-family_NotoSans-500: 'NotoSans-Medium';
	--ft-family_NotoSans-600: 'NotoSans-SemiBold';
	--ft-family_NotoSans-700: 'NotoSans-Bold';
	--ft-family_NotoSans-800: 'NotoSans-ExtraBold';
	--ft-family_NotoSans-900: 'NotoSans-Black';
	
	--ft-family_NotoSansKR-400: 'NotoSansKR-Regular';
	--ft-family_NotoSansKR-500: 'NotoSansKR-Medium';
	--ft-family_NotoSansKR-600: 'NotoSansKR-SemiBold';
	--ft-family_NotoSansKR-700: 'NotoSansKR-Bold';
	--ft-family_NotoSansKR-800: 'NotoSansKR-ExtraBold';
	--ft-family_NotoSansKR-900: 'NotoSansKR-Black';

	--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_MPLUSRounded1c-100: 'MPLUSRounded1c-Thin';
	--ft-family_MPLUSRounded1c-300: 'MPLUSRounded1c-Light';
	--ft-family_MPLUSRounded1c-400: 'MPLUSRounded1c-Regular';
	--ft-family_MPLUSRounded1c-500: 'MPLUSRounded1c-Medium';
	--ft-family_MPLUSRounded1c-700: 'MPLUSRounded1c-Bold';
	--ft-family_MPLUSRounded1c-800: 'MPLUSRounded1c-ExtraBold';
	--ft-family_MPLUSRounded1c-900: 'MPLUSRounded1c-Black';

	--ft-family_default: 'Poppins-Regular';

	--header-height: 80px;
	--lnb-height: 60px;
	--navi-height: 0px;
	--header-wrap-height: calc(var(--header-height) + var(--navi-height));
	--footbtm-height: 60px;

	--old-footer-top-height: 80px;
	--old-footer-btm-height: 50px;
	--old-footer-maxheight: calc(var(--old-footer-top-height) + var(--old-footer-btm-height));

	--main-intro-count-height: 140px;

	--min-width: 1600px;
	--inner-padding: 0 50px;
	--img-path_sp-icon-size: 175px;
}
body {position: relative; min-width: var(--min-width); background: #fff;}
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;}
.over-hidden {overflow: hidden !important;}
.over-visible {overflow: visible !important;}
.animate-none {animation: none !important;}
.inner {position: relative; padding: var(--inner-padding);}
.layout-inner {position: relative; width: 1400px; height: 100%; padding: 0; margin: 0 auto; box-sizing: border-box;}

/* pc, mobile */
.mode-pc {display: block;}
.mode-mobile {display: none !important;}

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

/* animation */
.animate-fadeInEffect {animation: fadeInEffect 3s linear forwards;}
.scroll-animation {opacity: 0;transition: all 1s;}
.scroll-animation.show-element {opacity: 1 !important;transform: translate(0, 0) !important;}
.scroll-animation.type-top {transform: translate(0, -3vw);}
.scroll-animation.type-bottom {transform: translate(0, 3vw);}
.scroll-animation.type-left {transform: translate(-3vw, 0);}
.scroll-animation.type-right {transform: translate(3vw, 0);}
.cookiebanner-ani-fadein {animation: fadeInEffect 0.5s ease-in 0.2s forwards;}
.cookiebanner-ani-fadeout {animation: fadeOutEffect 0.5s ease-in 0.2s forwards;}

/* cookiebanner */
.cookiebanner {opacity: 0; z-index: 9999; display: none; position: fixed; left: 0; bottom: 0; width: 100%; padding: 25px 50px; background-color: rgba(0, 0, 0, 0.9); border-top: 1px solid #777777; box-sizing: border-box;}
.cookiebanner * {font-family: var(--ft-family_Poppins-300); font-size: 16px;}
.cookiebanner button:not(:disabled) {cursor: pointer;}
.cookiebanner .cookie-inner {display: flex; align-items: center; color: #ffffff; line-height: 1.5;}
.cookiebanner .button-area {display: flex; margin-left: 20px;}
.cookiebanner .button-area > .btn {display: inline-block; padding: 0 10px; margin-right: 10px; background-color: transparent; border: 1px solid transparent; border-radius: 4px; color: #fff; box-sizing: border-box; text-align: center; line-height: 2.8; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; font-size: 14px; white-space: nowrap;}
.cookiebanner .button-area > .btn:last-child {margin-right: 0 !important;}
.cookiebanner .button-area .btn-secondary {background-color: #6c757d; border-color: #6c757d;}
.cookiebanner .button-area .btn-secondary:hover {background-color: #5a6268; border-color: #545b62;}
.cookiebanner .button-area .btn-success {background-color: #1398FF; border-color: #1398FF;}
.cookiebanner .button-area .btn-success:hover {background-color: #2190f0; border-color: #2190f0;}
.cookiebanner .button-cookie-close {position: absolute; right: 10px; top: -15px; width: 30px; height: 30px; background: #fff; border-radius: 50%; border: 1px solid #1398FF;}
.cookiebanner .button-cookie-close::before,
.cookiebanner .button-cookie-close::after {content: ""; display: inline-block; position: absolute; left: 50%; top: 50%; width: 3px; height: 15px; background: #1398FF;}
.cookiebanner .button-cookie-close::before {transform: translate(-50%, -50%) rotate(45deg);}
.cookiebanner .button-cookie-close::after {transform: translate(-50%, -50%) rotate(-45deg);}

/* floating-banner-comm */
.floating-banner-comm {z-index: 100; position: fixed; right: 60px; bottom: 120px;}
.floating-banner-comm .floating-lsit {display: flex; flex-direction: column;}
.floating-banner-comm .floating-lsit > li {display: flex; justify-content: center; margin-bottom: 40px;}
.floating-banner-comm .floating-lsit > li:last-child {margin-bottom: 0;}
.floating-banner-comm .btn-top-comm {position: sticky; right: auto; top: auto;}

/* button - top */
.btn-top-comm {display: none; /* display: flex; */ justify-content: center; align-items: center; flex-direction: column; z-index: 100; position: fixed; right: 60px; bottom: 80px; width: 80px; height: 80px; border-radius: 50%;}
.btn-top-comm::before, 
.btn-top-comm::after {content: ""; display: inline-block; position: absolute; width: 100%; height: 100%; border-radius: 50%;}
.btn-top-comm::before {bottom: -5px; background: #1398FF;}
.btn-top-comm::after {bottom: 0; background: #3EB5FE;}
.btn-top-comm .txt {display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; position: relative; width: 100%; height: 100%; color: #fff; font-family: var(--ft-family_NotoSansKR-600); font-size: 24px; line-height: 1;}
.btn-top-comm .txt::before {content: ""; display: inline-block; width: 24px; height: 14px; margin-bottom: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14' fill='none'%3E%3Cpath d='M22 11.6388L12 1.68819L2 11.6388' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: cover;}

/* button - sns */
.sns-btns-comm {display: flex;}
.sns-btns-comm [class*=btn-item] {width: 30px; height: 30px; margin: 0 15px; background-size: cover;}
.sns-btns-comm .btn-item-facebook {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cg clip-path='url(%23clip0_1_650)'%3E%3Cpath d='M20 0C8.9544 0 0 8.9544 0 20C0 29.3792 6.4576 37.2496 15.1688 39.4112V26.112H11.0448V20H15.1688V17.3664C15.1688 10.5592 18.2496 7.404 24.9328 7.404C26.2 7.404 28.3864 7.6528 29.2808 7.9008V13.4408C28.8088 13.3912 27.9888 13.3664 26.9704 13.3664C23.6912 13.3664 22.424 14.6088 22.424 17.8384V20H28.9568L27.8344 26.112H22.424V39.8536C32.3272 38.6576 40.0008 30.2256 40.0008 20C40 8.9544 31.0456 0 20 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_650'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-youtube {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M39.6016 12C39.6016 12 39.2109 9.24219 38.0078 8.03125C36.4844 6.4375 34.7812 6.42969 34 6.33594C28.4063 5.92969 20.0078 5.92969 20.0078 5.92969H19.9922C19.9922 5.92969 11.5938 5.92969 6 6.33594C5.21875 6.42969 3.51562 6.4375 1.99219 8.03125C0.789063 9.24219 0.40625 12 0.40625 12C0.40625 12 0 15.2422 0 18.4766V21.5078C0 24.7422 0.398437 27.9844 0.398437 27.9844C0.398437 27.9844 0.789062 30.7422 1.98437 31.9531C3.50781 33.5469 5.50781 33.4922 6.39844 33.6641C9.60156 33.9688 20 34.0625 20 34.0625C20 34.0625 28.4063 34.0469 34 33.6484C34.7812 33.5547 36.4844 33.5469 38.0078 31.9531C39.2109 30.7422 39.6016 27.9844 39.6016 27.9844C39.6016 27.9844 40 24.75 40 21.5078V18.4766C40 15.2422 39.6016 12 39.6016 12ZM15.8672 25.1875V13.9453L26.6719 19.5859L15.8672 25.1875Z' fill='white'/%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-instagram {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cg clip-path='url(%23clip0_1_652)'%3E%3Cpath d='M20 3.60156C25.3438 3.60156 25.9766 3.625 28.0781 3.71875C30.0313 3.80469 31.0859 4.13281 31.7891 4.40625C32.7188 4.76563 33.3906 5.20313 34.0859 5.89844C34.7891 6.60156 35.2188 7.26563 35.5781 8.19531C35.8516 8.89844 36.1797 9.96094 36.2656 11.9062C36.3594 14.0156 36.3828 14.6484 36.3828 19.9844C36.3828 25.3281 36.3594 25.9609 36.2656 28.0625C36.1797 30.0156 35.8516 31.0703 35.5781 31.7734C35.2188 32.7031 34.7813 33.375 34.0859 34.0703C33.3828 34.7734 32.7188 35.2031 31.7891 35.5625C31.0859 35.8359 30.0234 36.1641 28.0781 36.25C25.9688 36.3438 25.3359 36.3672 20 36.3672C14.6563 36.3672 14.0234 36.3438 11.9219 36.25C9.96875 36.1641 8.91406 35.8359 8.21094 35.5625C7.28125 35.2031 6.60938 34.7656 5.91406 34.0703C5.21094 33.3672 4.78125 32.7031 4.42188 31.7734C4.14844 31.0703 3.82031 30.0078 3.73438 28.0625C3.64063 25.9531 3.61719 25.3203 3.61719 19.9844C3.61719 14.6406 3.64063 14.0078 3.73438 11.9062C3.82031 9.95312 4.14844 8.89844 4.42188 8.19531C4.78125 7.26563 5.21875 6.59375 5.91406 5.89844C6.61719 5.19531 7.28125 4.76563 8.21094 4.40625C8.91406 4.13281 9.97656 3.80469 11.9219 3.71875C14.0234 3.625 14.6563 3.60156 20 3.60156ZM20 0C14.5703 0 13.8906 0.0234375 11.7578 0.117188C9.63281 0.210938 8.17188 0.554687 6.90625 1.04688C5.58594 1.5625 4.46875 2.24219 3.35938 3.35938C2.24219 4.46875 1.5625 5.58594 1.04688 6.89844C0.554688 8.17188 0.210938 9.625 0.117188 11.75C0.0234375 13.8906 0 14.5703 0 20C0 25.4297 0.0234375 26.1094 0.117188 28.2422C0.210938 30.3672 0.554688 31.8281 1.04688 33.0938C1.5625 34.4141 2.24219 35.5312 3.35938 36.6406C4.46875 37.75 5.58594 38.4375 6.89844 38.9453C8.17188 39.4375 9.625 39.7812 11.75 39.875C13.8828 39.9688 14.5625 39.9922 19.9922 39.9922C25.4219 39.9922 26.1016 39.9688 28.2344 39.875C30.3594 39.7812 31.8203 39.4375 33.0859 38.9453C34.3984 38.4375 35.5156 37.75 36.625 36.6406C37.7344 35.5312 38.4219 34.4141 38.9297 33.1016C39.4219 31.8281 39.7656 30.375 39.8594 28.25C39.9531 26.1172 39.9766 25.4375 39.9766 20.0078C39.9766 14.5781 39.9531 13.8984 39.8594 11.7656C39.7656 9.64063 39.4219 8.17969 38.9297 6.91406C38.4375 5.58594 37.7578 4.46875 36.6406 3.35938C35.5313 2.25 34.4141 1.5625 33.1016 1.05469C31.8281 0.5625 30.375 0.21875 28.25 0.125C26.1094 0.0234375 25.4297 0 20 0Z' fill='white'/%3E%3Cpath d='M20 9.72656C14.3281 9.72656 9.72656 14.3281 9.72656 20C9.72656 25.6719 14.3281 30.2734 20 30.2734C25.6719 30.2734 30.2734 25.6719 30.2734 20C30.2734 14.3281 25.6719 9.72656 20 9.72656ZM20 26.6641C16.3203 26.6641 13.3359 23.6797 13.3359 20C13.3359 16.3203 16.3203 13.3359 20 13.3359C23.6797 13.3359 26.6641 16.3203 26.6641 20C26.6641 23.6797 23.6797 26.6641 20 26.6641Z' fill='white'/%3E%3Cpath d='M33.0781 9.32032C33.0781 10.6484 32 11.7188 30.6797 11.7188C29.3516 11.7188 28.2812 10.6406 28.2812 9.32032C28.2812 7.99219 29.3594 6.92188 30.6797 6.92188C32 6.92188 33.0781 8 33.0781 9.32032Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_652'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-x {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M30.5438 3.1731H36.1662L23.8828 17.2122L38.3333 36.3164H27.0187L18.1567 24.7298L8.01654 36.3164H2.39068L15.529 21.2999L1.66663 3.1731H13.2685L21.2789 13.7636L30.5438 3.1731ZM28.5705 32.9511H31.6859L11.5756 6.36165H8.23239L28.5705 32.9511Z' fill='white'/%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-facebook:not(.no-hoevr):hover {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cg clip-path='url(%23clip0_1_591)'%3E%3Cpath d='M20 0C8.9544 0 0 8.9544 0 20C0 29.3792 6.4576 37.2496 15.1688 39.4112V26.112H11.0448V20H15.1688V17.3664C15.1688 10.5592 18.2496 7.404 24.9328 7.404C26.2 7.404 28.3864 7.6528 29.2808 7.9008V13.4408C28.8088 13.3912 27.9888 13.3664 26.9704 13.3664C23.6912 13.3664 22.424 14.6088 22.424 17.8384V20H28.9568L27.8344 26.112H22.424V39.8536C32.3272 38.6576 40.0008 30.2256 40.0008 20C40 8.9544 31.0456 0 20 0Z' fill='%231398FF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_591'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-youtube:not(.no-hoevr):hover {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M39.6016 12C39.6016 12 39.2109 9.24219 38.0078 8.03125C36.4844 6.4375 34.7812 6.42969 34 6.33594C28.4063 5.92969 20.0078 5.92969 20.0078 5.92969H19.9922C19.9922 5.92969 11.5938 5.92969 6 6.33594C5.21875 6.42969 3.51562 6.4375 1.99219 8.03125C0.789063 9.24219 0.40625 12 0.40625 12C0.40625 12 0 15.2422 0 18.4766V21.5078C0 24.7422 0.398437 27.9844 0.398437 27.9844C0.398437 27.9844 0.789062 30.7422 1.98437 31.9531C3.50781 33.5469 5.50781 33.4922 6.39844 33.6641C9.60156 33.9688 20 34.0625 20 34.0625C20 34.0625 28.4063 34.0469 34 33.6484C34.7812 33.5547 36.4844 33.5469 38.0078 31.9531C39.2109 30.7422 39.6016 27.9844 39.6016 27.9844C39.6016 27.9844 40 24.75 40 21.5078V18.4766C40 15.2422 39.6016 12 39.6016 12ZM15.8672 25.1875V13.9453L26.6719 19.5859L15.8672 25.1875Z' fill='%231398FF'/%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-instagram:not(.no-hoevr):hover {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cg clip-path='url(%23clip0_1_593)'%3E%3Cpath d='M20 3.60156C25.3438 3.60156 25.9766 3.625 28.0781 3.71875C30.0313 3.80469 31.0859 4.13281 31.7891 4.40625C32.7188 4.76563 33.3906 5.20313 34.0859 5.89844C34.7891 6.60156 35.2188 7.26563 35.5781 8.19531C35.8516 8.89844 36.1797 9.96094 36.2656 11.9062C36.3594 14.0156 36.3828 14.6484 36.3828 19.9844C36.3828 25.3281 36.3594 25.9609 36.2656 28.0625C36.1797 30.0156 35.8516 31.0703 35.5781 31.7734C35.2188 32.7031 34.7813 33.375 34.0859 34.0703C33.3828 34.7734 32.7188 35.2031 31.7891 35.5625C31.0859 35.8359 30.0234 36.1641 28.0781 36.25C25.9688 36.3438 25.3359 36.3672 20 36.3672C14.6563 36.3672 14.0234 36.3438 11.9219 36.25C9.96875 36.1641 8.91406 35.8359 8.21094 35.5625C7.28125 35.2031 6.60938 34.7656 5.91406 34.0703C5.21094 33.3672 4.78125 32.7031 4.42188 31.7734C4.14844 31.0703 3.82031 30.0078 3.73438 28.0625C3.64063 25.9531 3.61719 25.3203 3.61719 19.9844C3.61719 14.6406 3.64063 14.0078 3.73438 11.9062C3.82031 9.95312 4.14844 8.89844 4.42188 8.19531C4.78125 7.26563 5.21875 6.59375 5.91406 5.89844C6.61719 5.19531 7.28125 4.76563 8.21094 4.40625C8.91406 4.13281 9.97656 3.80469 11.9219 3.71875C14.0234 3.625 14.6563 3.60156 20 3.60156ZM20 0C14.5703 0 13.8906 0.0234375 11.7578 0.117188C9.63281 0.210938 8.17188 0.554687 6.90625 1.04688C5.58594 1.5625 4.46875 2.24219 3.35938 3.35938C2.24219 4.46875 1.5625 5.58594 1.04688 6.89844C0.554688 8.17188 0.210938 9.625 0.117188 11.75C0.0234375 13.8906 0 14.5703 0 20C0 25.4297 0.0234375 26.1094 0.117188 28.2422C0.210938 30.3672 0.554688 31.8281 1.04688 33.0938C1.5625 34.4141 2.24219 35.5312 3.35938 36.6406C4.46875 37.75 5.58594 38.4375 6.89844 38.9453C8.17188 39.4375 9.625 39.7812 11.75 39.875C13.8828 39.9688 14.5625 39.9922 19.9922 39.9922C25.4219 39.9922 26.1016 39.9688 28.2344 39.875C30.3594 39.7812 31.8203 39.4375 33.0859 38.9453C34.3984 38.4375 35.5156 37.75 36.625 36.6406C37.7344 35.5312 38.4219 34.4141 38.9297 33.1016C39.4219 31.8281 39.7656 30.375 39.8594 28.25C39.9531 26.1172 39.9766 25.4375 39.9766 20.0078C39.9766 14.5781 39.9531 13.8984 39.8594 11.7656C39.7656 9.64063 39.4219 8.17969 38.9297 6.91406C38.4375 5.58594 37.7578 4.46875 36.6406 3.35938C35.5313 2.25 34.4141 1.5625 33.1016 1.05469C31.8281 0.5625 30.375 0.21875 28.25 0.125C26.1094 0.0234375 25.4297 0 20 0Z' fill='%231398FF'/%3E%3Cpath d='M20 9.72656C14.3281 9.72656 9.72656 14.3281 9.72656 20C9.72656 25.6719 14.3281 30.2734 20 30.2734C25.6719 30.2734 30.2734 25.6719 30.2734 20C30.2734 14.3281 25.6719 9.72656 20 9.72656ZM20 26.6641C16.3203 26.6641 13.3359 23.6797 13.3359 20C13.3359 16.3203 16.3203 13.3359 20 13.3359C23.6797 13.3359 26.6641 16.3203 26.6641 20C26.6641 23.6797 23.6797 26.6641 20 26.6641Z' fill='%231398FF'/%3E%3Cpath d='M33.0781 9.32032C33.0781 10.6484 32 11.7188 30.6797 11.7188C29.3516 11.7188 28.2812 10.6406 28.2812 9.32032C28.2812 7.99219 29.3594 6.92188 30.6797 6.92188C32 6.92188 33.0781 8 33.0781 9.32032Z' fill='%231398FF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_593'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}
.sns-btns-comm .btn-item-x:not(.no-hoevr):hover {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M30.5439 3.1731H36.1664L23.8829 17.2122L38.3334 36.3164H27.0188L18.1568 24.7298L8.01666 36.3164H2.3908L15.5291 21.2999L1.66675 3.1731H13.2686L21.2791 13.7636L30.5439 3.1731ZM28.5706 32.9511H31.6861L11.5757 6.36165H8.23252L28.5706 32.9511Z' fill='%231398FF'/%3E%3C/svg%3E");}

/* button - play */
.btn-play-comm {width: 440px; height: 120px;}
.btn-play-comm::before {content: ""; display: block; width: 100%; height: 100%; background: url(../../../images/common/btn_play.png?ver=2502170001) 0 0 no-repeat;}
.btn-play-comm:hover::before {background-position-y: -130px;}

/* icons */
.sp-icon-bef:before,
.sp-icon-aft:after {content: ""; display: inline-block; width: 100%; height: 100%; background: url(../../../images/common/sp_icon_common.png?v=24030000) 0 0 no-repeat; background-size: var(--img-path_sp-icon-size);}

/* icon level */
.icon-level-comm {display: inline-block; position: relative; width: 114px; height: 114px;}
.icon-level-comm::before {content: ""; display: inline-block; width: 100%; height: 100%; background: url(../../../images/common/icons/bg_icon_level.png) center no-repeat; background-size: contain;}
.icon-level-comm .num {position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 0.1vw), calc(-50% + 0.1vw)); width: 100%; line-height: 114px; background-image: linear-gradient(160deg, #b84908 0%, #6a2604 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--ft-family_Poppins-italic-700); font-size: 42px; text-align: center;}

/* point-area-comm */
.point-area-comm {display: flex; flex-direction: column; align-items: center; padding: 15px 0; background: #eaeaea;}
.point-area-comm > * {margin-bottom: 5px;}
.point-area-comm > *:last-child {margin-bottom: 0 !important;}
.point-area-comm .point-title {display: flex; align-items: center; margin-bottom: 5px;}
.point-area-comm .point-title > * {margin-right: 4px;}
.point-area-comm .point-title > *:last-child {margin-right: 0 !important;}
.point-area-comm .point-title .title {font-family: var(--ft-family_Poppins-700); font-size: 23px;}
.point-area-comm .point-title .button-point-info {display: inline-block; position: relative; top: -2px; width: 26px; height: 26px; background: url(../../../images/common/icons/icon_info.png) 0 0 no-repeat; background-size: contain;}
.point-area-comm .point-level {display: flex; flex-direction: column; align-items: center;}
.point-area-comm .point-level > * {margin-bottom: 5px;}
.point-area-comm .point-level > *:last-child {margin-bottom: 0 !important;}
.point-area-comm .point-level .level-info {font-family: var(--ft-family_Poppins-700); color: #1398ff; font-size: 30px;}
.point-area-comm .point-level .point-info * {font-family: var(--ft-family_Poppins-500); font-size: 12px;}
.point-area-comm .point-level .point-info .point-value {display: inline-block; position: relative; padding: 2px 7px 2px 15px; background: #fff; border-radius: 30px;}
.point-area-comm .point-level .point-info .point-value::before {content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 22px; height: 24px; background: url(../../../images/common/point_gauge/icon_point.png) 0 0 no-repeat; background-size: cover;}
.point-area-comm .point-level .point-info .value {color: #f47521;}
.point-area-comm .point-level .point-info .bar {font-family: var(--ft-family_Poppins-400); color: #ababab;}
.point-area-comm .point-level .point-info .total {color: #201a86;}

/* point-area-comm : 풀페이지 팝업 - [only mobile] */
.layerpopup-full-common .point-area-comm {padding: 6.667vw 0;}
.layerpopup-full-common .point-area-comm > * {margin-bottom: 2vw;}
.layerpopup-full-common .point-area-comm .point-title {margin-bottom: 1.5vw;}
.layerpopup-full-common .point-area-comm .point-title > * {margin-right: 1vw;}
.layerpopup-full-common .point-area-comm .point-title .title {font-size: 6.133vw;}
.layerpopup-full-common .point-area-comm .point-title .button-point-info {top: -.5vw; width: 6.933vw; height: 6.933vw;}
.layerpopup-full-common .point-area-comm .point-level > * {margin-bottom: 1.5vw;}
.layerpopup-full-common .point-area-comm .point-level .level-info {font-size: 8vw;}
.layerpopup-full-common .point-area-comm .point-level .point-info * {font-size: 3.2vw;}
.layerpopup-full-common .point-area-comm .point-level .point-info .point-value {padding: .7vw 2vw .5vw 4vw; border-radius: 8vw;}
.layerpopup-full-common .point-area-comm .point-level .point-info .point-value::before {left: -2.935vw; width: 5.867vw; height: 6.533vw;}

/* point-progress-comm */
.point-progress-comm {display: flex; justify-content: center; align-items: center; width: 168px; height: 168px; background: url(../../../images/common/point_gauge/bg_point_gauge.png) 0 0 no-repeat; background-size: cover;}
.point-progress-comm .progress-wrap {position: relative; top: -.75px; width: 150px; height: 150px;}
.point-progress-comm .progress-wrap .gauge-inner {position: absolute; left: 0; top: 0; transform: rotate(123deg);}
.point-progress-comm .progress-wrap circle:nth-of-type(1) {fill: none; stroke: url(#GaugeGradientColor); stroke-width: 18px; stroke-dasharray: 90vw; stroke-dashoffset: 90vw; animation: progressCircleGauge 1.8s ease-in-out forwards;}
.point-progress-comm .progress-wrap circle:nth-of-type(2) {stroke-width: .2vw; animation: progressCircleGauge 1.8s ease-in-out forwards;}
.point-progress-comm .progress-wrap .icon-point {z-index: 10; position: absolute; left: 2vw; bottom: 3vw; animation: progressCircleGauge 1.8s ease-in-out forwards;}
.point-progress-comm .progress-wrap .icon-level-comm {position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 39px; height: 39px;}
.point-progress-comm .progress-wrap .icon-level-comm .num {line-height: 39px; font-size: 17px;}
.point-progress-comm .progress-wrap .reward-cnt {display: inline-block; position: absolute; right: 30px; top: 45px; width: 20px; height: 20px; background: url(../../../images/common/icons/icon_dot_red.png) 0 0 no-repeat; background-size: cover; color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 12px; line-height: 20px; text-align: center;}

/* point-area-comm : size-fixed 적용된 부분은 고정 - [only mobile] */
.point-progress-comm.size-fixed {width: 44.8vw; height: 44.667vw;}
.point-progress-comm.size-fixed .progress-wrap {top: -.2vw; width: 40.067vw; height: 40.067vw;}
.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(1) {stroke-width: 4.8vw; stroke-dasharray: 110vw; stroke-dashoffset: 110vw;}
.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(2) {stroke-width: .2vw;}
.point-progress-comm.size-fixed .progress-wrap .icon-point {left: 2vw; bottom: 3vw;}
.point-progress-comm.size-fixed .progress-wrap .icon-level-comm {bottom: -1vw; width: 10.4vw; height: 10.4vw;}
.point-progress-comm.size-fixed .progress-wrap .icon-level-comm .num {line-height: 10.4vw; font-size: 4.533vw;}
.point-progress-comm.size-fixed .progress-wrap .reward-cnt {right: 8vw; top: 12vw; width: 5.5vw; height: 5.5vw; font-size: 3vw; line-height: 5.5vw;} 

@media (orientation: landscape) {
	.point-progress-comm.size-fixed {width: 44.8vh; height: 44.667vh;}
	.point-progress-comm.size-fixed .progress-wrap {top: -.2vh; width: 40.067vh; height: 40.067vh;}
	.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(1) {stroke-width: 4.8vh; stroke-dasharray: 110vh; stroke-dashoffset: 110vh;}
	.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(2) {stroke-width: .2vh;}
	.point-progress-comm.size-fixed .progress-wrap .icon-point {left: 2vh; bottom: 3vh;}
	.point-progress-comm.size-fixed .progress-wrap .icon-level-comm {bottom: -1vh; width: 10.4vh; height: 10.4vh;}
	.point-progress-comm.size-fixed .progress-wrap .icon-level-comm .num {line-height: 10.4vh; font-size: 4.533vh;}
	.point-progress-comm.size-fixed .progress-wrap .reward-cnt {right: 8vh; top: 12vh; width: 5.5vh; height: 5.5vh; font-size: 3vh; line-height: 5.5vh;} 
}


/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) { 
    /* common */
    :root {
        --old-footer-top-height: 7.8vw;
        --old-footer-btm-height: 4.8vw;
    }

}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {
    /* common */
    :root {
        --old-footer-top-height: 9vw;
        --old-footer-btm-height: 6vw;
		--img-path_sp-icon-size: 46.667vw;
    }
    .mode-pc {display: none !important;}
    .mode-mobile {display: block !important;}

	/* icon level */
	.icon-level-comm {width: 22.8vw; height: 22.8vw;}
	.icon-level-comm .num {line-height: 22.8vw; font-size: 8.5vw;}

	/* point-area-comm */
	.point-area-comm {padding: 6.667vw 0;}
	.point-area-comm > * {margin-bottom: 2vw;}
	.point-area-comm .point-title {margin-bottom: 1.5vw;}
	.point-area-comm .point-title > * {margin-right: 1vw;}
	.point-area-comm .point-title .title {font-size: 6.133vw;}
	.point-area-comm .point-title .button-point-info {top: -.5vw; width: 6.933vw; height: 6.933vw;}
	.point-area-comm .point-level > * {margin-bottom: 1.5vw;}
	.point-area-comm .point-level .level-info {font-size: 8vw;}
	.point-area-comm .point-level .point-info * {font-size: 3.2vw;}
	.point-area-comm .point-level .point-info .point-value {padding: .7vw 2vw .5vw 4vw; border-radius: 8vw;}
	.point-area-comm .point-level .point-info .point-value::before {left: -2.935vw; width: 5.867vw; height: 6.533vw;}

	/* point-area-comm > progress-wrap */
	.point-progress-comm,
	.point-progress-comm.size-fixed {width: 44.8vw; height: 44.667vw;}
	.point-progress-comm .progress-wrap ,
	.point-progress-comm.size-fixed .progress-wrap {top: -.2vw; width: 40.067vw; height: 40.067vw;}
	.point-progress-comm .progress-wrap circle:nth-of-type(1),
	.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(1) {stroke-width: 4.8vw; stroke-dasharray: 110vw; stroke-dashoffset: 110vw;}
	.point-progress-comm .progress-wrap .icon-level-comm,
	.point-progress-comm.size-fixed .progress-wrap .icon-level-comm {bottom: -1vw; width: 10.4vw; height: 10.4vw;}
	.point-progress-comm .progress-wrap .icon-level-comm .num,
	.point-progress-comm.size-fixed .progress-wrap .icon-level-comm .num {line-height: 10.4vw; font-size: 4.533vw;}
	.point-progress-comm .progress-wrap .reward-cnt,
	.point-progress-comm.size-fixed .progress-wrap .reward-cnt {right: 8vw; top: 12vw; width: 5.5vw; height: 5.5vw; font-size: 3vw; line-height: 5.5vw;}

	/* 가로모드 */
    @media (orientation: landscape) {
        /* point-area-comm : size-fixed 적용된 부분은 고정 - [only mobile] */
		.point-progress-comm,
		.point-progress-comm.size-fixed {width: 44.8vh; height: 44.667vh;}
		.point-progress-comm .progress-wrap,
		.point-progress-comm.size-fixed .progress-wrap {top: -.2vh; width: 40.067vh; height: 40.067vh;}
		.point-progress-comm .progress-wrap circle:nth-of-type(1),
		.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(1) {stroke-width: 4.8vh; stroke-dasharray: 110vh; stroke-dashoffset: 110vh;}
		.point-progress-comm .progress-wrap circle:nth-of-type(2),
		.point-progress-comm.size-fixed .progress-wrap circle:nth-of-type(2) {stroke-width: .2vh;}
		.point-progress-comm .progress-wrap .icon-point,
		.point-progress-comm.size-fixed .progress-wrap .icon-point {left: 2vh; bottom: 3vh;}
		.point-progress-comm .progress-wrap .icon-level-comm,
		.point-progress-comm.size-fixed .progress-wrap .icon-level-comm {bottom: -1vh; width: 10.4vh; height: 10.4vh;}
		.point-progress-comm .progress-wrap .icon-level-comm .num,
		.point-progress-comm.size-fixed .progress-wrap .icon-level-comm .num {line-height: 10.4vh; font-size: 4.533vh;}
		.point-progress-comm .progress-wrap .reward-cnt,
		.point-progress-comm.size-fixed .progress-wrap .reward-cnt {right: 8vh; top: 12vh; width: 5.5vh; height: 5.5vh; font-size: 3vh; line-height: 5.5vh;}
    }
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* common */
    :root {
        --old-footer-top-height: auto;
        --old-footer-btm-height: 10vw;
    }
}