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

Copyright C 그누위즈 테마 All rights reserved.
gnuwiz@naver.com & master@gnuwiz.com
본 페이지는 유료콘텐츠 그누위즈 테마 CSS입니다. 불법복제시 법적인 제제를 받으실 수 있습니다.
라이센스를 삭제하지 마세요. 라이센스 삭제시 불법 사용으로 간주될 수 있습니다.

******************************************************************/

/*그누위즈 gw.css------------------------------------------------------------------------------------------------------------------ */
html{overflow-x:hidden;}
html, body {margin: 0;padding: 0;font-family:'Pretendard'; font-weight:500; color: var(--text_gray_black); font-size: calc(100vw / 393); overflow-x: hidden;
	font-variant-numeric: tabular-nums; -moz-font-feature-settings: "tnum"; -webkit-font-feature-settings: "tnum"; }
html.on,body.on{overflow-y:hidden;}
html.on02,body.on02{overflow-y:hidden;}
h1, h2, h3, h4, h5, h6 {font-family:'Pretendard';font-weight: 700;letter-spacing:1.4;}
.container {width:1400px; margin: 0 auto;}
#darkModeToggle{display: none;}


/*다크모드------------------------------------------------------------------------------------------------------------------ */
body {transition: all 0.5s;}
body.dark-mode {background: #111;}
body.dark-mode #container_wr{background: #111;}



/*font------------------------------------------------------------------------------------------------------------------ */
.Neon_R{ font-family: 'NEXON Lv1 Gothic OTF', sans-serif;font-weight: 300;}
.Neon_M{ font-family: 'NEXON Lv1 Gothic OTF', sans-serif;font-weight: 400;}
.Neon_B{ font-family: 'NEXON Lv1 Gothic OTF', sans-serif;font-weight: 700;}

.NotoKr_BK {font-family: "Noto Sans KR", sans-serif; font-weight: 900;}
.NotoKr_B { font-family: "Noto Sans KR", sans-serif; font-weight: 800;}
.NotoKr_DL { font-family: "Noto Sans KR", sans-serif;font-weight: 700;}
.NotoKr_L { font-family: "Noto Sans KR", sans-serif; font-weight: 600;}
.NotoKr_M { font-family: "Noto Sans KR", sans-serif; font-weight: 500;}
.NotoKr_R { font-family: "Noto Sans KR", sans-serif; font-weight: 400;}
.NotoKr_T { font-family: "Noto Sans KR", sans-serif; font-weight: 300;}

.Pretendard_BL{font-family:'Pretendard';font-weight:900;}
.Pretendard_EB{font-family:'Pretendard';font-weight:800;}
.Pretendard_B{font-family:'Pretendard';font-weight:700;}
.Pretendard_SB{font-family:'Pretendard';font-weight:600;}
.Pretendard_M{font-family:'Pretendard';font-weight:500;}
.Pretendard_R{font-family:'Pretendard';font-weight:400;}
.Pretendard_L{font-family:'Pretendard';font-weight:300;}
.Pretendard_EL{font-family:'Pretendard';font-weight:200;}
.Pretendard_T{font-family:'Pretendard';font-weight:100;}

.Outfit_BL {font-family: "Outfit", sans-serif; font-weight: 900;}
.Outfit_EB { font-family: "Outfit", sans-serif; font-weight: 800;}
.Outfit_B { font-family: "Outfit", sans-serif; font-weight: 700;}
.Outfit_SB { font-family: "Outfit", sans-serif; font-weight: 600;}
.Outfit_M { font-family: "Outfit", sans-serif;font-weight: 500;}
.Outfit_R { font-family: "Outfit", sans-serif; font-weight: 400;}
.Outfit_L { font-family: "Outfit", sans-serif; font-weight: 300;}
.Outfit_EL { font-family: "Outfit", sans-serif; font-weight: 200;}
.Outfit_T { font-family: "Outfit", sans-serif; font-weight: 100;}


/*상단메뉴*/
    #tnb{display:none;}

/*폰트사이즈------------------------------------------------------------------------------------------------------------------ */
:root{
	--main-title00: 24rem;
	--main-title01:19rem;
	--main-title02:17rem;
	--main-title03:15rem;
	--main-text01:15rem;
	--main-text02:13rem;
	}	

/*색상------------------------------------------------------------------------------------------------------------------ */
/*:root{--main-color:#1A4399;}*/
/*.main-color{--main-color:#1A4399 !important;}*/


/*배경------------------------------------------------------------------------------------------------------------------ */
/* 색상코드 */
:root{
	/* ===================================================
	   [Figma] Core Base Colors (한눈에 보는 기준 컬러칩)
	   =================================================== */
	--bg01: #222222;
	--black: #000000;
	--white: #FFFFFF;
	--gray: #79828B;
	--purple_gray: #7F808D;
	--teal: #00A38D;
	--green: #299451;
	--lime: #54931B;
	--mochabrown: #9A7B5B;
	--gold: #A88315;
	--yellow: #D19600;
	--saddlebrown: #CC7700;
	--orange: #E45B0C;
	--red: #E44959;
	--hot_pink: #E2407F;
	--pink: #D157B2;
	--orchid: #C05FC7;
	--purple: #9065FA;
	--violet: #727ACF;
	--blue: #6572FF;
	--skyblue: #2E82E2;
	--peacock: #1589BF;

	/* ===================================================
	   [Figma] Gray Scale
	   =================================================== */
	--gray-990: #181A1C;
	--gray-970: #1E2125;
	--gray-950: #22262B;
	--gray-900: #2D3339;
	--gray-850: #323940;
	--gray-800: #373E46;
	--gray-700: #49515B;
	--gray-600: #5E6976;
	--gray-500: var(--gray); /* 상단 기준값 연결 */
	--gray-400: #8F959C;
	--gray-300: #A7ABB0;
	--gray-200: #B3B6BA;
	--gray-100: #C4C8CC;
	--gray-80:  #D5D9DE;
	--gray-60:  #E5E8EB;
	--gray-40:  #F1F2F4;
	--gray-20:  #F6F7F8;
	--gray-10:  #F9FAFB;

	/* ===================================================
	   [Figma] PurpleGray Scale
	   =================================================== */
	--purple_gray-950: #272937;
	--purple_gray-900: #333547;
	--purple_gray-800: #444658;
	--purple_gray-700: #575969;
	--purple_gray-600: #6C6E7C;
	--purple_gray-500: var(--purple_gray);
	--purple_gray-400: #93949F;
	--purple_gray-300: #A9AAB2;
	--purple_gray-200: #BABBC2;
	--purple_gray-100: #CCCCD1;
	--purple_gray-80:  #DDDDE1;
	--purple_gray-60:  #ECECEE;
	--purple_gray-40:  #F9F9FA;

	/* ===================================================
	   [Figma] Chromatic Scales (유색 그룹 스케일)
	   =================================================== */
	
	/* Teal */
	--teal-950: #00302A;
	--teal-900: #003D35;
	--teal-800: #005247;
	--teal-700: #006658;
	--teal-600: #00806E;
	--teal-550: #009E88;
	--teal-500: var(--teal);
	--teal-400: #33B5A4;
	--teal-300: #3FBDAD;
	--teal-200: #70CCC0;
	--teal-100: #93D9D0;
	--teal-100-opacity-40: #93D9D066;
	--teal-80:  #B3E8E1;
	--teal-60:  #D3F2EE;
	--teal-50:  #E4F7F4;
	--teal-40:  #F1FBFA;



	/* Green */
	--green-950: #0D301A;
	--green-900: #143E23;
	--green-800: #19522E;
	--green-700: #1D6738;
	--green-600: #207E42;
	--green-500: var(--green);
	--green-400: #38A862;
	--green-300: #44C171;
	--green-200: #7ECC9C;
	--green-100: #A0D9B5;
	--green-80:  #BEE9CE;
	--green-60:  #D8F3E2;
	--green-40:  #F7FDF9;

	/* Lime */
	--lime-950: #1B3107;
	--lime-900: #253F0D;
	--lime-800: #30530E;
	--lime-700: #3C6A11;
	--lime-600: #487C18;
	--lime-500: var(--lime);
	--lime-400: #59A716;
	--lime-300: #7DBD42;
	--lime-200: #A2D670;
	--lime-100: #B4E08C;
	--lime-80:  #D0EEB4;
	--lime-60:  #E8F8D8;
	--lime-40:  #FAFDF7;

	/* MochaBrown */
	--mochabrown-950: #30271D;
	--mochabrown-900: #423424;
	--mochabrown-800: #574532;
	--mochabrown-700: #6E573F;
	--mochabrown-600: #85694C;
	--mochabrown-500: var(--mochabrown);
	--mochabrown-400: #AF8B64;
	--mochabrown-300: #C1A78B;
	--mochabrown-200: #CFBBA0;
	--mochabrown-100: #DDCAB6;
	--mochabrown-80:  #EBDCCC;
	--mochabrown-60:  #F4EBE1;
	--mochabrown-40:  #FBFAF8;

	/* Gold */
	--gold-950: #352A08;
	--gold-900: #43350A;
	--gold-800: #58460E;
	--gold-700: #6F5816;
	--gold-600: #8B6D13;
	--gold-500: var(--gold);
	--gold-400: #B68E1A;
	--gold-300: #CAAE58;
	--gold-200: #DBC06B;
	--gold-100: #E5CF8F;
	--gold-80:  #F1E0AC;
	--gold-60:  #F8EFD3;
	--gold-40:  #FEFCF6;

	/* Yellow */
	--yellow-950: #402E00;
	--yellow-900: #523A00;
	--yellow-800: #6B4D00;
	--yellow-700: #8A6300;
	--yellow-600: #A87900;
	--yellow-500: var(--yellow);
	--yellow-400: #FAB50C;
	--yellow-300: #FCC231;
	--yellow-200: #FDD05D;
	--yellow-100: #FFDD8A;
	--yellow-80:  #FFE9B2;
	--yellow-60:  #FFF3D4;
	--yellow-40:  #FFFEFA;

	/* SaddleBrown */
	--saddlebrown-950: #3C2401;
	--saddlebrown-900: #4F2F02;
	--saddlebrown-800: #6B3E00;
	--saddlebrown-700: #8A5000;
	--saddlebrown-600: #A86200;
	--saddlebrown-500: var(--saddlebrown);
	--saddlebrown-400: #D97E00;
	--saddlebrown-300: #E5A347;
	--saddlebrown-200: #F1B665;
	--saddlebrown-100: #F7CA8B;
	--saddlebrown-80:  #FFDDAE;
	--saddlebrown-60:  #FFEED6;
	--saddlebrown-40:  #FFFBF5;

	/* Orange */
	--orange-950: #471D05;
	--orange-900: #5E2402;
	--orange-800: #7D2F03;
	--orange-700: #993E0A;
	--orange-600: #C15110;
	--orange-500: var(--orange);
	--orange-450: #EC5F0E;
	--orange-400: #F16E22;
	--orange-300: #F89054;
	--orange-200: #FDA878;
	--orange-100: #FDBC96;
	--orange-80:  #FFD5BD;
	--orange-60:  #FFE5D6;
	--orange-40:  #FFF9F5;

	/* Red */
	--red-950: #540C13;
	--red-900: #661B22;
	--red-800: #812831;
	--red-700: #9D303B;
	--red-600: #C83A49;
	--red-500: var(--red);
	--red-400: #F85D6D;
	--red-300: #FC8894;
	--red-200: #FDA4AD;
	--red-100: #FEBAC1;
	--red-80:  #FFD4D8;
	--red-60:  #FFE5E8;
	--red-40:  #FFFAFA;

	/* Hotpink */
	--hot_pink-950: #560625;
	--hot_pink-900: #661434;
	--hot_pink-800: #80243E;
	--hot_pink-700: #9F284A;
	--hot_pink-600: #CF2667;
	--hot_pink-500: var(--hot_pink);
	--hot_pink-40: #F75997;
	--hot_pink-30: #FC83B2;
	--hot_pink-20: #FDA1C4;
	--hot_pink-10: #FDB9D3;
	--hot_pink-80:  #FFD1E3;
	--hot_pink-60:  #FFE5EF;
	--hot_pink-40:  #FFFAFC;

	/* Pink */
	--pink-950: #46163A;
	--pink-900: #59214B;
	--pink-800: #7A2665;
	--pink-700: #96317C;
	--pink-600: #B54198;
	--pink-500: var(--pink);
	--pink-400: #E167C2;
	--pink-300: #EE87D4;
	--pink-200: #F2A2DE;
	--pink-100: #FEB5EC;
	--pink-80:  #FAD2F0;
	--pink-60:  #FFE5F9;
	--pink-40:  #FCF7FB;

	/* Orchid */
	--orchid-950: #401F42;
	--orchid-900: #4E2852;
	--orchid-800: #67346A;
	--orchid-700: #834488;
	--orchid-600: #A34CA9;
	--orchid-500: var(--orchid);
	--orchid-400: #D371DA;
	--orchid-300: #E390E9;
	--orchid-200: #EBA6F0;
	--orchid-100: #F2BBF6;
	--orchid-80:  #FCD1FF;
	--orchid-60:  #FDE6FF;
	--orchid-40:  #FEF7FF;

	/* Purple */
	--purple-950: #2F2151;
	--purple-900: #3C2A6A;
	--purple-800: #50388B;
	--purple-700: #6446AE;
	--purple-600: #7B56D7;
	--purple-500: var(--purple);
	--purple-400: #A37FFB;
	--purple-300: #B79BFC;
	--purple-200: #C6B0FC;
	--purple-100: #D3C3FD;
	--purple-80:  #E3D8FE;
	--purple-60:  #EFE9FE;
	--purple-40:  #FBF9FF;

	/* Blue */
	--blue-950: #1D2362;
	--blue-900: #252C7F;
	--blue-800: #303AA6;
	--blue-700: #3C49D0;
	--blue-600: #505DEC;
	--blue-500: var(--blue);
	--blue-400: #808AFF;
	--blue-300: #9BA3FF;
	--blue-200: #B0B7FF;
	--blue-100: #C4C9FF;
	--blue-80:  #D8DBFF;
	--blue-60:  #E9EBFF;
	--blue-40:  #F8F9FF;

	/* Violet */
	--violet-950: #212551;
	--violet-900: #2B306A;
	--violet-800: #39408B;
	--violet-700: #4850AE;
	--violet-600: #5C65C7;
	--violet-500: var(--violet);
	--violet-400: #8990D6;
	--violet-300: #A2A7DF;
	--violet-200: #B5B9E6;
	--violet-100: #C7CAEC;
	--violet-80:  #DADCF2;
	--violet-60:  #EBECF8;
	--violet-40:  #F9F9FD;

	/* Skyblue */
	--skyblue-950: #0F2B4A;
	--skyblue-900: #143861;
	--skyblue-800: #19487E;
	--skyblue-700: #205A9E;
	--skyblue-600: #2770C3;
	--skyblue-500: var(--skyblue);
	--skyblue-400: #3C96FD;
	--skyblue-300: #69AEFE;
	--skyblue-200: #8AC0FE;
	--skyblue-100: #A8D0FE;
	--skyblue-80:  #C5E0FE;
	--skyblue-60:  #E0EEFF;
	--skyblue-40:  #F6FAFF;
	
	/* Peacock */
	--peacock-950: #072D3F;
	--peacock-900: #093A51;
	--peacock-800: #0C4C6A;
	--peacock-700: #0E5C80;
	--peacock-600: #1276A4;
	--peacock-500: var(--peacock);
	--peacock-400: #389FCD;
	--peacock-300: #65B4D9;
	--peacock-200: #86C4E1;
	--peacock-100: #A5D3E8;
	--peacock-80:  #C3E2F0;
	--peacock-60:  #DFEFF7;
	--peacock-40:  #F5FAFD;

	/* ===================================================
	   [Figma] Opacity Scales (전부 하이픈[-]으로 통일)
	   =================================================== */
	--black-opacity-01: color-mix(in srgb, var(--black) 15%, transparent);
	--black-opacity-02: color-mix(in srgb, var(--black) 20%, transparent);
	--black-opacity-03: color-mix(in srgb, var(--black) 70%, transparent);
	--black-opacity-04: color-mix(in srgb, var(--black) 30%, transparent);

	--gray-950-opacity-01: color-mix(in srgb, var(--gray-950) 6%, transparent); 
	--gray-950-opacity-02: color-mix(in srgb, var(--gray-950) 9%, transparent); 
	--gray-950-opacity-03: color-mix(in srgb, var(--gray-950) 14%, transparent);
	--gray-950-opacity-04: color-mix(in srgb, var(--gray-950) 24%, transparent);
	--gray-950-opacity-05: color-mix(in srgb, var(--gray-950) 50%, transparent);

	--white-opacity-01: color-mix(in srgb, var(--white) 10%, transparent);
	--white-opacity-02: color-mix(in srgb, var(--white) 20%, transparent);
	--white-opacity-03: color-mix(in srgb, var(--white) 70%, transparent);


	/* ---------------------------------------------
	   [Figma] Text (여기도 하이픈[-]으로 통일)
	   --------------------------------------------- */
    
	--text-gray-black: var(--gray-950);
	--text-gray-black-600: var(--gray-600);;
	--text-gray-700: var(--gray-700);
	
	--box-shadow: box-shadow: 0 4rem 8rem 0 rgba(0, 0, 0, 0.04);
	
}

.tabs { margin-bottom: 32rem; }

/* ===================================================
Line Tab (라인 탭)
=================================================== */
.gw-line-tab-wrap { width: 100%; box-sizing: border-box; } 
.gw-line-tab { display: flex; list-style: none; padding: 0 20rem; margin: 0; height: 50rem; align-items: center; border-bottom: 1rem solid var(--gray-60); width: 100%; box-sizing: border-box; } 
.gw-line-tab .tab-item { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; padding: 14rem 4rem; font-size: var(--main-title02); color: var(--gray-600); font-weight: 500; cursor: pointer; height: 100%; line-height: 1; float: none; background: none; border: none; box-sizing: border-box; } 
.gw-line-tab .tab-item label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; white-space: nowrap; }
.gw-line-tab .tab-item .num-text { font-size: var(--main-title02); color: var(--teal); font-weight: 600; margin-left: 4rem; } 
.gw-line-tab .tab-item.active { color: var(--gray-950); font-weight: 700; } 
.gw-line-tab .tab-item.active .num-text { font-weight: 700; } 
.gw-line-tab .tab-item.active::after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 100%; height: 4rem; background: var(--gray-950); }
.gw-line-tab input[type="radio"] { position: absolute; width: 1rem; height: 1rem; padding: 0; margin: -1rem; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; opacity: 0; }

/* ===================================================
Solid Tab (솔리드 탭) 
=================================================== */
.gw-solid-tab-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 20rem; } 
.gw-solid-tab { display: flex; flex-wrap: wrap; gap: 8rem; list-style: none; padding: 0; margin: 0; } 
.gw-solid-tab .tab-item { display: flex; align-items: center; gap: 4rem; padding: 8rem 16rem; border-radius: 100rem; font-size: var(--main-title03); font-weight: 500; border: none; cursor: pointer; transition: all 0.2s ease; background: var(--gray-60); color: var(--gray-600); } 
.gw-solid-tab .tab-item .num-text { font-size: var(--main-title03); font-weight: 600; color: var(--teal); } 
/* Selected 상태 (활성화) */
.gw-solid-tab .tab-item.active { background: var(--gray-950); color: var(--white); } 
/* 우측 접기/펼치기 버튼 (Tab Expand Button) */
.gw-solid-tab-wrap .btn-expand { background: none; border: none; padding: 0; width: 24rem; height: 24rem; color: var(--black); cursor: pointer; display: flex; align-items: center; justify-content: center; } 
.gw-solid-tab-wrap .btn-expand i { font-size: var(--main-title00); } 

/* ===================================================
Segment Tab (세그먼트 탭) 
=================================================== */
.gw-segment-tab { display: flex; align-items: center; background: var(--gray-60); box-sizing: border-box; width: 100%; } 
.gw-segment-tab .tab-item { flex: 1; display: flex; align-items: center; justify-content: center; border: none; background: none; height: 100%; font-family: 'Pretendard', sans-serif; text-align: center; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; color: var(--gray-600); } 
.gw-segment-tab .tab-item.active { background: var(--white); color: var(--gray-700); box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.04); } 

/* [Large] 높이 54rem 지정 / 반경 17px / 패딩 2px 완벽 수정 */
.gw-segment-tab.size-lg { height: 54rem; border-radius: 17rem; padding: 2rem; } 
.gw-segment-tab.size-lg .tab-item { font-size: var(--main-title02); font-weight: 500; border-radius: 15rem; } 
.gw-segment-tab.size-lg .tab-item.active { font-weight: 600; } 

/* [Medium] 높이 46px / 반경 14px / 패딩 3px */
.gw-segment-tab.size-md { height: 46rem; border-radius: 14rem; padding: 3rem; } 
.gw-segment-tab.size-md .tab-item { font-size: var(--main-title02); font-weight: 500; border-radius: 11rem; } 
.gw-segment-tab.size-md .tab-item.active { font-weight: 600; } 

/* [Small] 높이 32px / 반경 8px / 패딩 2px */
.gw-segment-tab.size-sm { height: 32rem; border-radius: 8rem; padding: 2rem; } 
.gw-segment-tab.size-sm .tab-item { font-size: var(--main-title03); font-weight: 500; border-radius: 6rem; } 
.gw-segment-tab.size-sm .tab-item.active { font-weight: 600; }


/* 박스 기본셋팅 */
.btn_list_wrap{display:flex; flex-direction:column; gap:13rem;}
.type-single {width:100%; }
.card-list-out {background:var(--white); border-radius:16rem; overflow:hidden; padding:24rem 20rem; }
/* ===================================================
 [Figma] 버튼 컨테이너 레이아웃 (오직 구조 배정만 수행)
 =================================================== */
.gw-btn-container { display: flex; width: 100%; box-sizing: border-box; } 
/* 컨테이너 내부에 배치되는 모든 피그마 버튼은 지정된 슬롯 너비에 100% 꽉 차도록 자동 확장 */
.gw-btn-container .btn { width: 100%; } 
/* 1. Segment 1 (단일 버튼 풀 너비) */
.gw-btn-container.type-single { /* 기본 flex 구조로 내부 버튼이 알아서 .gw-btn0102 꽉 찹니다 */}
/* 2. Segment 2 (5:5 균등 반반 분할) */
.gw-btn-container.type-55 { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; /* 버튼 사이 간격 */}
/* 3. Segment 2 (3:7 비대칭 분할) */
.gw-btn-container.type-37 { display: grid; grid-template-columns: 3fr 7fr; gap: 8rem; } 
/* 4. Segment 2 (Vertical 세로형 정렬) */
.gw-btn-container.type-vertical { flex-direction: column; align-items: center; gap: 12rem; /* 상하 버튼 간격 */}
/* 세로형 하단에 배치되는 텍스트 버튼 전용 밑줄 처리 (시안 매칭) */
.gw-btn-container.type-vertical .btn-txt { text-decoration: underline; width: auto; /* 텍스트 버튼은 100% 채우지 않고 글자 크기만큼만 잡히도록 초기화 */}

/* ===================================================
 [Figma] 1. 버튼 공통 구조 (Base)
 =================================================== */
.btn-box{display:flex; gap:5rem; align-items:center; justify-content:center;}
.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: 500; border: 1rem solid transparent; background-color: transparent; cursor: pointer; 
	white-space: nowrap;box-sizing: border-box; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; gap: 4rem; text-decoration: none; } 

/* 비활성화 상태 공통 (button과 a 태그 둘 다 대응) */
.btn:disabled,
a.btn[disabled] { cursor: not-allowed; pointer-events: none; } 

/* ===================================================
 [Figma] 2 & 3. 형태 및 크기/여백 통합 (Shape & Measurement)
 =================================================== */
/* 3-1. Box 타입 (수정하신 수치 100% 반영) */
.btn-box.btn-lg { height: 56rem; padding: 0 16rem; font-size: 17rem; border-radius: 12rem; } 
.btn-box.btn-md { height: 50rem; padding: 0 16rem; font-size: 17rem; border-radius: 12rem; } 
.btn-box.btn-sm { height: 42rem; padding: 0 16rem; font-size: 17rem; border-radius: 10rem; } 
.btn-box.btn-xs { height: 32rem; padding: 0 12rem; font-size: 15rem; border-radius: 8rem; } 
.btn-box.btn-tn { height: 26rem; padding: 0 10rem; font-size: 13rem; border-radius: 8rem; } 

/* 3-2. Round 타입 */
.btn-round { border-radius: 9999rem; } 
.btn-round.btn-lg { height: 56rem; padding: 0 24rem; font-size: 16rem; } 
.btn-round.btn-md { height: 50rem; padding: 0 24rem; font-size: 15rem; } 
.btn-round.btn-sm { height: 42rem; padding: 0 24rem; font-size: 14rem; } 
.btn-round.btn-xs { height: 32rem; padding: 0 16rem; font-size: 13rem; } 

/* ===================================================
 [Figma] 4. 위계별 스타일 및 상태 제어 (Hierarchy & States)
 =================================================== */
/* 4-1) Primary (기본 버튼 - reset.css 완벽 정조준 오버라이드) */
.btn-pri, 
a.btn-pri:link, 
a.btn-pri:visited { background-color: var(--teal); color: var(--white); } 
.btn-pri:hover, a.btn-pri:hover { background: var(--teal-600); } 
.btn-pri:browse:active, a.btn-pri:active {  background: var(--teal-800); } 
.btn-pri:disabled, a.btn-pri[disabled] { background-color: var(--gray-60); color: var(--gray-200); } 

/* 4-2) Secondary (보조 버튼) */
.btn-sec, 
a.btn-sec:link, 
a.btn-sec:visited { background-color: var(--teal-40); color: var(--teal); } 
.btn-sec:hover, a.btn-sec:hover { background-color: var(--teal-60); } 
.btn-sec:active, a.btn-sec:active { background-color: var(--teal-80); } 
.btn-sec:disabled, a.btn-sec[disabled] { background-color: var(--gray-60); color: var(--gray-200); } 

/* 4-3) Tertiary_Solid (부가 - sld) */
.btn-ter-sld, 
a.btn-ter-sld:link, 
a.btn-ter-sld:visited { background-color: var(--gray-40); color: var(--gray-600); } 
.btn-ter-sld:hover, a.btn-ter-sld:hover { background-color: var(--gray-60); color: var(--gray-950); } 
.btn-ter-sld:active, a.btn-ter-sld:active { background-color: var(--gray-80); } 
.btn-ter-sld:disabled, a.btn-ter-sld[disabled] { background-color: var(--gray-60); color: var(--gray-200); } 

/* 4-4) Tertiary_Opacity (부가 - opc) */
.btn-ter-opc, 
a.btn-ter-opc:link, 
a.btn-ter-opc:visited { background-color: var(--black-opacity-01); color: var(--gray-950); } 
.btn-ter-opc:hover, a.btn-ter-opc:hover { background-color: var(--black-opacity-02); } 
.btn-ter-opc:active, a.btn-ter-opc:active { background-color: var(--black-opacity-04); } 
.btn-ter-opc:disabled, a.btn-ter-opc[disabled] { background-color: var(--black-opacity-01); color: var(--gray-200); opacity: 0.5; } 

/* 4-5) Outline_Teal (외곽선 테일 - otl) */
.btn-otl-teal, 
a.btn-otl-teal:link, 
a.btn-otl-teal:visited { border: 1rem solid var(--teal-200); color: var(--teal); background-color: var(--white); } 
.btn-otl-teal:hover, a.btn-otl-teal:hover { background-color: var(--teal-40); border-color: var(--teal); } 
.btn-otl-teal:active, a.btn-otl-teal:active { background-color: var(--teal-60); } 
.btn-otl-teal:disabled, a.btn-otl-teal[disabled] { border-color: var(--gray-60); color: var(--gray-200); background-color: var(--white); } 

/* 4-6) Outline_Gray (외곽선 그레이 - otl) */
.btn-otl-gray, 
a.btn-otl-gray:link, 
a.btn-otl-gray:visited { border:1px solid var(--gray-200); color: var(--gray-950); background-color: #fff;; } 
.btn-otl-gray:hover, a.btn-otl-gray:hover { background-color: var(--gray-40); border-color: var(--gray-400); } 
.btn-otl-gray:active, a.btn-otl-gray:active { background-color: var(--gray-60); } 
.btn-otl-gray:disabled, a.btn-otl-gray[disabled] { border-color: var(--gray-60); color: var(--gray-200); background-color: var(--white); } 

/* ===================================================
 [Figma] 5. 독립형 버튼 제어 (Type: Text & Floating)
 =================================================== */
/* 5-1. Text 버튼 (txt) */
.btn-txt, a.btn-txt { padding: 0; height: auto; background: none; border: none; } 
.btn-txt.txt-black, a.btn-txt.txt-black:link, a.btn-txt.txt-black:visited { color: var(--gray-950); } 
.btn-txt.txt-gray, a.btn-txt.txt-gray:link, a.btn-txt.txt-gray:visited { color: var(--gray-600); } 
.btn-txt.txt-teal, a.btn-txt.txt-teal:link, a.btn-txt.txt-teal:visited { color: var(--teal); } 

/* 밑줄 (udl) */
.btn-txt.udl, a.btn-txt.udl { text-decoration: underline; text-underline-offset: 3rem; } 

/* 5-2. Floating 버튼 (flt) */
.btn-floating, a.btn-floating { width: 48rem; height: 48rem; padding: 0; border-radius: 9999rem; background-color: var(--white-opacity-01); backdrop-filter: blur(15rem); -webkit-backdrop-filter: blur(15rem); 
	box-shadow: 0 4rem 8rem color-mix(in srgb, var(--black) 10%, transparent); } 
.btn-floating:hover, a.btn-floating:hover { background-color: var(--white-opacity-02); } 

/* 기능형 확장 Floating (fnc) */
.btn-floating.fnc, a.btn-floating.fnc { width: auto; padding: 0 16rem; } 

/* ===================================================
 [Figma] 6. 컴포넌트 조합 레이아웃 (Button Group -> grp)
 =================================================== */
.btn-grp { display: flex; gap: 8rem; width: 100%; box-sizing: border-box; } 

/* 5:5 비율 정렬 (splt) */
.btn-grp.splt-55 > .btn { flex: 1; } 

/* 3:7 비율 정렬 (splt) */
.btn-grp.splt-37 > .btn:first-child { flex: 3; } 
.btn-grp.splt-37 > .btn:last-child { flex: 7; } 

/* 세로 적층 레이아웃 (v-stk) */
.btn-grp.v-stk { flex-direction: column; align-items: center; gap: 12rem; } 
.btn-grp.v-stk > .btn:not(.btn-txt) { width: 100%; } 

/* 하단 화면 고정형 (btm-fxd) */
.btn-grp-btm-fxd { position: fixed; bottom: 0; left: 0; width: 100%; padding: 16rem; background: var(--white); box-shadow: 0 -8rem 24rem color-mix(in srgb, var(--black) 5%, transparent); z-index: 9999; } 

/* 팝업창 내부 정렬용 (pop) */
.btn-grp-pop { padding: 16rem 0 0 0; } 

.gw-bg-fff{background: #fff;}
.gw-bg-f8{background: #f8f8f8;}

.close_btn {color: var(--text-gray-black); border: 0; vertical-align: top; font-size: 24rem;}

/* ===================================================
 [UI Component] 슬라이더 공통 컨트롤러 디자인
 =================================================== */
.gw-slider-controls-wrapper { display: flex; justify-content: center; align-items: center; gap: 8rem; width: 100%; height: 24rem;margin-top:12rem; } 
.gw-slider-fraction-pills { display: flex; align-items: center; background: var(--gray-950-opacity-01); border-radius: 20rem; padding: 0 8rem; height: 24rem; width: 98rem; box-sizing: border-box; } 
.gw-slider-fraction-pills .gw-slider-m-text { font-size: 13rem; font-weight: 500; color: var(--text-gray-black-600); display: flex; align-items: center; width: 50rem; height: 21rem; } 
.gw-slider-fraction-pills .gw-slider-m-text span { display: flex; justify-content: center; align-items: center; height: 21rem; } 
.gw-slider-fraction-pills .gw-slider-m-curr { color: var(--text-gray-black); width: 20rem; } 
.gw-slider-fraction-pills .gw-slider-m-total { width: 20rem; } 
.gw-slider-fraction-pills .gw-slider-m-div { color: var(--text-gray-black-600); width: 10rem; } 
.gw-slider-fraction-pills button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } 
.gw-slider-fraction-pills button i { font-size: 16rem; color: var(--text-gray-black-600); width: 16rem; height: 16rem; } 
.gw-slider-autoplay { width: 24rem; height: 24rem; background: var(--gray-950-opacity-01); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; } 
.gw-slider-autoplay i { font-size: 12rem; color: var(--text-gray-black-600); } 

/* ===================================================
 [Design Tokens] 카드형 UI 디자인 시스템 (글씨 & 레이아웃 통합)
 =================================================== */
.s_num { font-size: var(--main-text01); color: var(--gray-600); letter-spacing: -0.02em; font-weight: 400; } /* 서브 가이드 텍스트 (연회색 작은 글씨) */
.sct_txt { font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: var(--main-title02); line-height: 1.4; color: var(--gray-950); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* 메인 타이틀 (대형 볼드 헤드라인) */
.sct_dict_rate { padding: 0; color: var(--main-color); font-weight: 700; font-size:var(--main-text01);} /* 할인율 (메인 브랜드 포인트 컬러) */
.sct_dict_wrap{display: flex; flex-direction:row-reverse; justify-content:space-between; }
.sct_dict { display: inline-block; color: var(--gray-400); text-decoration: line-through; font-weight: 400; font-size:var(--main-text01);} /* 기존 정가 (취소선 회색 글씨) */
.sct_price { font-size: var(--main-title02); font-weight: 700; display: block; } /* 최종 판매가 (가장 강조되는 금액 볼드) */
.sct_txt_box { display: flex; flex-direction: column; gap: 4rem; } /* 텍스트 세로 나열 상자 (타이틀, 설명 등 정렬 및 4rem 간격 조절) */
.sct_info_box { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap:4rem; } /* 텍스트 세로 나열 상자 (타이틀, 설명 등 정렬 및 4rem 간격 조절) */
.sct_box { display: flex; justify-content: space-between; } /* 콘텐츠 수평 분할 상자 (이미지와 정보 상자를 양옆 양끝으로 찢어서 정렬) */

/* ==========================================================================
 조합형 Labels 컴포넌트 시스템 (디자인 가이드 반영)
 ========================================================================== */

/* 기본 베이스 속성 */
.gw-label, .gw-label span, .gw-label div { display: inline-flex; align-items: center; justify-content: center; gap:4rem; box-sizing: border-box; white-space: nowrap; font-weight: 500; } 
.gw-label.round { height: 22rem; padding: 0 6rem; font-size: 13rem; border-radius: 100rem ; }
.gw-label.square { height: 24rem; padding: 0 6rem; font-size: 13rem; border-radius: 5rem; }
.gw-label.type-line { background: transparent; border: 1rem solid var(--teal); color: var(--teal); } 
.gw-label.type-fill { background: var(--teal); color: #fff; } 
.gw-label.type-tint { background: var(--teal-100-opacity-40); color: var(--teal); } 
.gw-label.leading-icon i{display: inline-flex; align-items: center;} 


/* 판매중지 */
.gw-label.type-line.color-red {border-color: var(--red); color: var(--red); }

/*input-----------------------------------------------------------------------------------------------------------------
input::placeholder{opacity:1; color: #666; transition:0.3s;}
input:focus{border:1px solid #000;}
textarea{font-family:'Pretendard';font-weight:400;border-radius:0}
button{ overflow:visible; white-space: nowrap; font-family:'Pretendard';font-weight:400;}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; 
	-webkit-text-fill-color: var(--gray-950) !important;}
/*input - text*/
input[type="text"], input[type="password"], input[type="email"], .file-name { position: relative; display: flex; align-items:center; background: #fff;border: 1rem solid var(--gray-100); border-radius: 12rem; padding: 0 16rem ; width: 100%;height: 60rem;
	font-weight:500; transition: 0.3s;box-sizing: border-box; cursor: pointer; font-size:var(--main-title01); color:var(--gray-950);}

/*input  - password */
input[type="password"]:not(:placeholder-shown) {font-size: 26rem; letter-spacing: 4rem;}


.radio_box{display:flex; flex-direction:column; gap:12rem;}
.radio-item { display: flex; align-items: center; cursor: pointer; gap: 8rem; font-size: 17rem; font-weight: 600; color: var(--gray-950); } 
.radio-item input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0; width: 22rem; height: 22rem; border: 2rem solid var(--gray-300); border-radius: 50%; background-color: #fff; cursor: pointer; /* flex 아이템 중앙 정렬을 위해 position relative 추가 */
 position: relative; } 

/* 체크되었을 때 테두리 색상 변경 */
.radio-item input[type="radio"]:checked { border-color: var(--teal); } 

/* 체크 표시 원 추가 */
.radio-item input[type="radio"]:checked::after { content: ''; position: absolute; /* 절대 위치로 변경 */
 top: 50%; left: 50%; /* 중심 위치 */
 transform: translate(-50%, -50%); /* 중앙 정렬 */
 width: 14rem; height: 14rem; background-color: var(--teal); border-radius: 50%; } 

/* 비활성화 상태 스타일 */
.radio-item input[type="radio"]:disabled { border-color: var(--gray-200); background-color: var(--gray-100); cursor: not-allowed; } 

/* ==========================================
 0. 기본 체크박스 공통 설정 (숨김 및 정렬)
 ========================================== */
input[type="checkbox"].checkbox { opacity: 0; position: absolute; width: 0; height: 0; } 
input[type="checkbox"].checkbox + .check-label { display: inline-flex; align-items: center; cursor: pointer; transition: all 0.2s ease; } 
input[type="checkbox"].checkbox + .check-label:before { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; } 


/* ==========================================
 [Type 1] 테두리 사각형 박스 버전 (Large / Small)
 ========================================== */

/* ── ① 킹사이즈 박스 (is-large) ── */
.check-label.is-large { font-size: var(--main-title02); /* 17rem */
 color: var(--gray-950); } 
.check-label.is-large:before { content: ''; width: 20rem; height: 20rem; background: #fff; border: 1.5rem solid var(--gray-100); border-radius: 4rem; margin-right: 8rem; } 
/* 킹사이즈 체크되었을 때 (볼드 변경 + 박스 채우기) */
input[type="checkbox"].checkbox:checked + .check-label.is-large { font-weight: 600; } 
input[type="checkbox"].checkbox:checked + .check-label.is-large:before { content: "\e928"; font-family: "xeicon"; font-size: 12rem; border-color: var(--main-color); background: var(--main-color); color: #fff; } 

/* ── ② 미니사이즈 박스 (is-small) ── */
.check-label.is-small { font-size: var(--main-title03); /* 15rem */
 color: var(--gray-950); } 
.check-label.is-small:before { content: ''; width: 14.66rem; height: 14.66rem; background: #fff; border: 1.5rem solid var(--gray-100); border-radius: 3rem; margin-right: 6rem; } 
/* 미니사이즈 체크되었을 때 */
input[type="checkbox"].checkbox:checked + .check-label.is-small { font-weight: 600; } 
input[type="checkbox"].checkbox:checked + .check-label.is-small:before { content: "\e928"; font-family: "xeicon"; font-size: 10rem; border-color: var(--main-color); background: var(--main-color); color: #fff; } 


/* ==========================================
 [Type 2] ✨ 맨몸 체크마크 버전 (박스 없음 / 토큰 스펙)
 ========================================== */

/* ── ③ 박스 없는 순정 체크형 (is-pure) ── */
.check-label.is-pure { font-size: var(--main-title03); /* 15rem */
 color: var(--gray-600); /* 명세서 기준 T_Gray_600 고정 */
 font-weight: 400; /* 명세서 기준 Regular 고정 */}
.check-label.is-pure:before { content: "\e928"; /* 처음부터 맨몸 체크 아이콘 노출 */
 font-family: "xeicon"; font-size: 14rem; color: var(--gray-300); /* Unchecked 일 때는 흐린 회색 체크 */
 margin-right: 6rem; background: transparent !important; border: none !important; /* 테두리 박스 완전 제거 */}
/* 맨몸 체크형 체크되었을 때 (글자 변화 없이 아이콘 색상만 변경) */
input[type="checkbox"].checkbox:checked + .check-label.is-pure { font-weight: 400; /* 두꺼워지지 않음 */
 color: var(--gray-600); /* 색상 유지 */}
input[type="checkbox"].checkbox:checked + .check-label.is-pure:before { color: var(--main-color); /* 아이콘만 선명한 브랜드 컬러로 변경 */}


/* ==========================================
 [공통 State] 비활성화 (Disabled) 제어
 ========================================== */
input[type="checkbox"].checkbox:disabled + .check-label { color: var(--gray-400) !important; cursor: not-allowed; } 
input[type="checkbox"].checkbox:disabled + .check-label:before { opacity: 0.5; cursor: not-allowed; } 

/*input - select*/
:where(.gw-input-wrap) select{height:3rem; line-height:1;padding:0.8rem;  font-family:'Pretendard';font-weight:400; padding-right:3rem; border:1px solid #ddd; -webkit-border-radius:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#FDFDFD url("/fro_end_kor/img/sel-arrow.svg") center no-repeat; background-size:auto 30%;background-position-x:90%;}

select { position: relative; display: flex; align-items:center; background: #fff;border: 1rem solid var(--gray-100); border-radius: 12rem; padding: 0 16rem ; width: 100%;height: 60rem;
	font-weight:500; transition: 0.3s;box-sizing: border-box; cursor: pointer; font-size:var(--main-title01); color:var(--gray-950); }

/*input - file*/
input[type="file"] {display: none;}
.gw-file-input-container {position: relative;display: inline-block;width: 100%;}
.gw-file-input-button {all:unset;display:block;text-align: center;background: #888;width: 100%;height:55px;color: #fff;display: block;cursor:pointer;border-radius: 5px;line-height: 55px;position: absolute;right: 0;top: 0;}


/*textarea---------------------------------------------------------------------------------------------------------------*/
textarea:focus { outline: none; } 
/* ── Text Area 기본 구조 (기존 input 테두리/라운딩 스펙 완벽 동기화) ── */
textarea { position: relative; display: block; width: 100%; height: 140rem; padding: 16rem 24rem 16rem 16rem; background: #FFFFFF; border: 1rem solid #C4C8CC; border-radius: 12rem;  box-sizing: border-box; transition: all 0.2s ease; 
    font-family: 'Pretendard', sans-serif; font-size: 19rem; font-weight: 500; line-height: 1.4; color: var(--gray-950); resize: vertical; cursor: pointer; } 
/* ── ① Focused / Active 상태 (입력 중) ── */
textarea:focus { border: 1rem solid var(--teal); box-shadow: inset 0 0 0 1rem var(--teal); cursor: text; } 
/* ── ② 플레이스홀더 스타일 ── */
textarea::placeholder { opacity: 1; color: #A0AAB5; font-size: 19rem; font-weight: 500; transition: 0.2s; } 
/* ── ③ Disabled 상태 (비활성화) ── */
textarea:disabled { background: #F5F5F5 !important; border-color: #E2E5E8 !important; color: #A0AAB5 !important; cursor: not-allowed; resize: none; } 
/* ── ④ Error 상태 (📍 포커스시 테두리 두께/색상 꼬임 방지를 위해 단축 속성으로 변경) ── */
textarea.is-error { border: 2rem solid var(--red-500) !important; }

/* ── ⑤ 한 줄 확장형/메시지형 구조 (글씨 크기 파편화 해결 버전) ── */
textarea.type-inline { height: 59rem; padding: 16rem 24rem 16rem 16rem; border: 1rem solid var(--gray-100); border-radius: 12rem; font-family: 'Pretendard', sans-serif; font-size: var(--main-title01); 
	font-weight: 500; line-height: 1.4; resize: none; cursor: pointer; overflow: hidden;} 
textarea.type-inline:focus, textarea.type-inline:not(:placeholder-shown) { height: 59rem; border: 1rem solid var(--main-color); box-shadow: inset 0 0 0 1rem var(--teal);} 
/* 플레이스홀더 스타일 */
textarea.type-inline::placeholder { color: #A0AAB5; /* 📍 플레이스홀더 글씨 크기도 인풋창 시스템 변수와 동일하게 동기화 */
 font-size: var(--main-title01); font-weight: 500; } 

/*select*/
/*
.sel-wrap{position: relative;}
.sel-wrap:after{font-family:xeicon;content:"\e941";position:absolute;top:50%;right: 17px;transform:translateY(-50%);display:block;z-index:0;color: #666;}
.sel-wrap > select{display:block;background:#fff;border: 2px solid #ddd;border-radius:5px;padding:12px 17px;width: 100%;height: 55px;font-family:'Pretendard';font-weight:400;transition:0.3s;box-sizing: border-box;line-height: 30px;cursor: pointer;}
.sel-wrap > select:focus{border: 2px solid #000;transition: all .3s ease;}
.sel-wrap > select:active{border: 2px solid #000;}
.sel-wrap.focus:after {color: #000; transform:translateY(-50%) rotate(-180deg);transform-origin:center;}
*/


/*검색창 select*/
.sel-wrap01{position: relative;}
.sel-wrap01:after{font-family:xeicon;content:"\e941";position:absolute;top:50%;right: 0;transform:translateY(-50%);display:block;z-index:0;}
.sel-wrap01 > select{display:block;background:#fff;border-bottom: 2px solid #000;padding:12px 0;width: 100%;height: 45px;font-family:'Pretendard';font-weight:400;transition:0.3s;box-sizing: border-box;}
.sel-wrap01 > select:focus{border-bottom: 2px solid #000;}
.sel-wrap01 > select:active{border-bottom: 2px solid #000;}


/*캡챠-----------------------------------------------------------------------------------------------------------------*/
/*
#captcha {display: inline-block;position: relative;width: 100%;}
#captcha #captcha_info {display: block;font-size: 14px;margin-top: 10px;color: var(--main-color);}
#captcha #captcha_img {height: 45px;vertical-align: middle;padding: 0;margin: 0}
#captcha #captcha_key {width: 20%;height: 55px;border: 2px solid #ddd;background: #fff;font-family: "Outfit", sans-serif; font-weight: 600;text-align: center;border-radius: 5px;vertical-align: middle;margin-top: 0;}
#captcha #captcha_mp3 {margin: 0;padding: 0;width: 50px;height: 50px;border: 0;background: transparent;vertical-align: middle;overflow: hidden;cursor: pointer;background: #888 url('../../../img/captcha2.png') no-repeat;text-indent: -999px;border-radius: 5px;}
#captcha #captcha_reload {margin: 0;padding: 0;width: 50px;height: 50px;border: 0;vertical-align: middle;overflow: hidden;cursor: pointer;background: #888 url('../../../img/captcha2.png') no-repeat 0 -50px;text-indent: -999px;border-radius: 5px;}
*/

/* 테이블 기본 레이아웃 */
.gw-table { width: 100%; border-collapse: collapse; border-top: 1rem solid var(--gray-100); border-bottom: 1rem solid var(--gray-100);}
.gw-table tr { border-bottom: 1rem solid var(--gray-60);}
.gw-table th{text-align:left;}
.gw-table th, .gw-table td { padding: 8rem 0; vertical-align: middle; text-align: center; font-family: 'Pretendard', sans-serif; letter-spacing: -0.01em; line-height: 1.4; } 

/* [Medium 사이즈 노드] */
.gw-table.size-md th { font-size: var(--main-title02); font-weight: 500; color: var(--gray-600); background: var(--gray-20); border-right:1rem solid var(--gray-60); }
.gw-table.size-md td { font-size: var(--main-title02); font-weight: 400; color: var(--gray-700); background: var(--white);}
.gw-table.size-md th, .gw-table.size-md td{height:48rem;}
/* [Small 사이즈 노드] */
.gw-table.size-sm th { font-size: var(--main-title03); font-weight: 500; color: var(--gray-600); background: var(--gray-20); }
.gw-table.size-sm td { font-size: var(--main-title03); font-weight: 400; color: var(--gray-700); background: var(--white); } 
.gw-table.size-sm th, .gw-table.size-sm td{height:37rem;}
/* [비율 설정 클래스] */
.w-30 { width: 30%; } 
.w-70 { width: 70%; } 
.w-50 { width: 50%; } 
.w-33 { width: 33.33%; } 


/*main table------------------------------------------------------------------------------------------------------------------ */
.gw-table01{border-top:2px solid #000;}
.gw-table01 caption{display: none;}
.gw-table01 th {position:relative;padding: 17px 0;border-top: 2px solid #000;border-bottom: 2px solid #ddd;text-align: center;font-size: 15px;}
.gw-table01 th:not(:last-child):after {content: "";width: 1px;height: 15px;background: #ddd;display: block;position: absolute;top: 50%;transform: translateY(-50%);right: 0;}
.gw-table01 td{position:relative;padding: 19px 0;text-align: center;border-bottom: 1px solid #ddd;}

.gw-table02{border-top:2px solid #000;}
.gw-table02 th {padding: 17px 30px;position: relative;text-align: left;border-bottom: 1px solid #ddd;background: #f8f8f8;word-break: keep-all;vertical-align: middle;}
.gw-table02 td {padding: 17px 30px;vertical-align: middle;border-bottom: 1px solid #ddd;}

/*sub table------------------------------------------------------------------------------------------------------------------ */
.gw-scroll-drag-container{display: none;}
.gw-sub-table-wrap {overflow: hidden;border-radius: 30px 30px 0 0;}
.gw-sub-table-wrap .gw-sub-table01 {width: 100%;}
.gw-sub-table-wrap .gw-sub-table01 thead tr th {padding: 20px;border-right: 1px solid rgba(221, 221, 221, 0.3);background: #333;color: #fff;font-size: var(--main-title04);font-family: "NotoKr_B", sans-serif;text-align: center;}
.gw-sub-table-wrap .gw-sub-table01 tbody tr td {padding: 20px;background: #fff;line-height: 1.5;color: #555;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.gw-sub-table-wrap .gw-sub-table01 tbody tr td:last-child {border-right: none;}
.gw-sub-table-wrap .gw-sub-table01 .gw-title {font-family: 'Pretendard';font-weight:700;color: #222;}
.gw-sub-table-wrap .gw-sub-table01 .gw-text {color: #555;}
.gw-sub-table-wrap .gw-sub-table01 .bg-gray {background: #f3f3f3;}


/*공통 스타일-----------------------------------------------------------------------------------------------------------------*/
/*  */
i{ display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; /* -webkit-text-stroke: 0.02em var(--white); */}
i.i-side{width: 1.25em; height: 1.25em; font-size: 1.15em;}

/* 콘텐츠 */
#wrapper{width:100%;}
#container{position:relative;/* padding-bottom:170px; min-height:500px;*/margin:0 auto;width:100%;height:auto !important;background: var(--gray-40);}
#container_wr{background: #f8f8f8;}
/* #container > [id*="sub-"]{padding-bottom:170px;} 
.gw-skin-box{margin-top: 40px !important;}
#wrapper_title{padding-top:70px;margin-bottom:50px;font-size: var(--main-title01);font-family:'Pretendard';font-weight:700;text-align: center;}*/

/*서브*/
.gw-sub-container{padding-top: 150px;}
.gw-sub-title {font-size: var(--main-title02);text-transform: uppercase;}
.gw-sub-title02{color: var(--main-color);font-size: var(--main-title04);font-family:"Outfit", sans-serif; font-weight: 700;}
.gw-sub-title-line{position: relative;}
.gw-sub-title-line:after{display:block; content:""; width:1px; height:30px; background:#ddd; margin:40px auto 0;}
.gw-sub-text{color: #666;line-height: 1.5;font-size:var(--main-text01);}
.gw-sub-con-1400{position:relative;margin:0 auto;width: 100%;}
[class*="gw-sub-con"]:not(:last-child){margin-bottom: 158px;}

.gw-none{display: none;}

/*box*/
.gw-box01 {border: 2px solid #ddd;border-radius: 5px;padding: 12px 17px;}
.gw-box02 {border-radius: 5px; background: #F3F3F3;padding: 20px;}

/* 버튼 */
/*
.gw-btn-wrap{place-content: center;}
.small-btn {position:relative;width: 50px;height: 50px;border:1px solid #ddd;overflow: hidden;border-radius: 100%;}
.small-btn:before{content:"";width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;background: #fff;border-radius: 100%;}
.small-btn:after{content:"";background: #000;width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition:all .3s .1s;transform-origin: center center;transform: scale(0);border-radius: 100%;}
.small-btn:hover:after{transform: scale(1.0);}
.small-btn > i{color:#000;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index: 100;transition: all .3s;}
.small-btn:hover > i{color: #fff;}
.gw-btn01{all:unset;display:inline-block;text-align: center;border: 1px solid var(--main-color);background:var(--main-color);width: 100%;height:55px;line-height:55px;color: #fff !important;cursor:pointer;text-transform:uppercase;transition:all .3s;font-family:'Pretendard';font-weight:700;border-radius:10px;}
.gw-btn0102{all:unset;margin:0 auto;display:block;text-align: center;border: 2px solid #000;background: #000;width: 100%;height:55px;line-height:55px;color: #fff;display: block;cursor:pointer;text-transform:uppercase;transition:all .3s;font-family:'Pretendard';font-weight:700;border-radius: 10px;}
.gw-btn02{all:unset;display:block;text-align: center;border:1px solid var(--main-color);width: 100%;height:55px;line-height:55px;color: var(--main-color) !important;display: block;cursor:pointer;border-radius: 10px;font-family:'Pretendard';font-weight:700;}
.gw-btn03{padding:8px;display:block;text-align: center;border: 1px solid #ddd;background:#f3f3f3; width:auto;color: #666 !important;display: inline-block;cursor:pointer; font-size: 14px;}
.gw-btn04{all:unset;cursor:pointer;text-transform:uppercase;font-family:"Outfit", sans-serif; font-weight: 600;display:inline-block;position:relative;font-size: 14px;}
.gw-btn04:before {content: "";display: block;height: 2px;background: #ddd;position: absolute;bottom: -2px;right: 0;width: 100%;transition: all .3s;}
.gw-btn04:after {content: "";display: block;height: 2px;background: var(--main-color);position: absolute;bottom: -2px;left: 0;width: 0;transition: all .3s;}
*/


/* 탭 */
.gw-tabs {display: flex;place-content:center;gap:10px;}
.gw-tabs > li {text-align:center;cursor: pointer;}
.gw-tabs > li >a{display:block;padding:13px 42px;font-family:"Outfit", sans-serif; font-weight: 700;border:1px solid #eaeaea;background: #fff;border-radius:30px;color:#999;}
.gw-tabs > li >a.active {color: #fff;border-color:#111;background:#111;}
.gw-tab-content {display: none;}
#tab1{display: block;}

/* 스크롤바 */
.gw-scrollbar {width: 100%;height: 100%;overflow-y: scroll;}
.gw-scrollbar::-webkit-scrollbar {width: 0.5rem;}
.gw-scrollbar::-webkit-scrollbar-thumb {height: 10%;background: rgba(0,0,0,0.4); border-radius: 3rem;}
.gw-scrollbar::-webkit-scrollbar-track {background: rgba(0,0,0,0.15);border-radius: 3rem;}

/*모달창*/
.modal {display: none; position: fixed; top: 50%;left: 50%; transform: translate(-50%, -50%); background: #fff;z-index: 1200; width: 100%; height:100%; }
.modal-top{position:relative; background: var(--white); padding:0 20rem;  }
.modal-top .close_btn{position: absolute; right: 20rem; top: 50%; transform: translateY(-50%);}
.modal-title{color: var(--text-gray-black); font-size: 17rem; height: 56rem; display: flex; justify-content: center;align-items: center; }
.overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);z-index: 1100;}
.modal-content-wrap{padding:24rem 20rem; height: calc(100% - 56rem); display: flex;flex-direction: column;gap: 16rem;}
.modal-content.gw-scrollbar {height: 100%; overflow-y: auto; display: flex;flex-direction: column;justify-content: space-between;}
.modal-content {padding: 24rem 20rem; background: var(--gray-20); line-height: 1.4;height: 100%; border-radius: 12rem;}
:where(.modal) .small-btn{position: absolute;right: 40px;top: 40px;color: #000;}
.modal-content > h2{font-size: var(--main-title04);}



/*말풍선*/
.sv_wrap {position:relative; text-align: left;}
.sv_wrap > a{color: #666;}
.sv_wrap .sv {z-index:100;display:none;margin:5px 0 0;background:#fff;border:1px solid #ddd;box-shadow: 70px 70px 130px rgb(39 49 108 / 20%);}
.sv_wrap .sv:before {content:"";position:absolute;top:-7px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #ddd transparent}
.sv_wrap .sv:after {content:"";position:absolute;top:-5px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #fff transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:2.5px 10px;line-height:30px;width:120px;color:#666 !important;border-bottom: 1px solid #f1f1f1;}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* ckeditor 단축키 */
.cke_sc{text-align: right;margin-bottom: 10px;}
.btn_cke_sc {all:unset;padding:8px;display:block;text-align: center;border: 1px solid #ddd;background:#f3f3f3; width:auto;color: #666;display: inline-block;cursor:pointer;}
.cke_sc_def {padding: 20px;border: 1px solid #ddd;background: #fff;text-align:center;background: #fff;border-radius: 5px;margin-top: 10px;}
.cke_sc_def dl {margin-bottom:10px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #ddd}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* 리스트 */
.gw-list01{position: relative;}
.gw-list01 > li {padding-left: 16rem; position: relative; line-height: 1.5; color:var(--gray-500); flex-direction: column;align-items: flex-start; gap:4rem; font-size:var(--main-text02);}
.gw-list01 > li:before {content: '';display: block;width: 4rem;height: 4rem;position: absolute;left: 0;top: 10rem;background: var(--main-color);border-radius: 50%;}
.gw-list01 > li:not(:last-child) {margin-bottom: 5rem;}

.gw-list02 {list-style: none;counter-reset: my-counter;}
.gw-list02 > li {padding-left:35px;display:flex;align-items:center;flex-wrap:wrap;position: relative;counter-increment: my-counter;line-height: 1.75;}
.gw-list02 > li:before {content: counter(my-counter);display: inline-block;position:absolute;top:0;left:0;width: 24px;height: 24px;text-align: center;background: #BFBFBF;color: #fff;line-height: 25px;font-family: "Outfit", sans-serif; font-weight: 600;font-size:12px;}
.gw-list02 > li:not(:last-child) {margin-bottom: 5px;}

/* 팝업창 */
#gw-win-title {position:relative;font-size: var(--main-title03);padding: 20px;border-bottom: 1px solid #ddd;text-align: center;}

/*기타*/
.dot {width: 5rem;height: 5rem;background: var(--gray-100);display: inline-block;border-radius: 50%; vertical-align: middle;transition: all .3s;}
.sticky01 {display: inline-block;font-size: 14px;padding: 5px;background: #000;color: #fff;font-family: 'Pretendard';font-weight:500;min-width: 60px;text-align: center;}
.sticky02 {display: inline-block;font-size: 14px;padding: 5px;border: 1px solid var(--main-color);color: var(--main-color);font-family: 'Pretendard';font-weight:500;min-width: 60px;text-align: center;}
[class*="sticky03"]{ margin-right: 11px;padding: 4px 11px;border-radius: 30px;color: #fff;font-style: normal;display: inline-block;vertical-align: middle;font-size: 14px;}
[class*="img"] > img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.gw-line {padding-bottom: 1px;border-bottom: 1px solid #ddd;}

/* 검색결과 색상 */
.sch_word {color:#fff;background:var(--main-color);padding:5px;}

/*게시물복사------------------------------------------------------------------------------------------------------------------ */
#gw-copymove .gw-table01 tbody td{display:inline-block;width: auto !important;background: #fff;border: none;}
#gw-copymove .gw-table01 tbody .copymove_currentbg td {background: transparent;}


/*

@media (min-width: 540px) {
  html {
    font-size: 1.374px; 
  }
  
  body {
    width: 540px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }
}

@media (min-width: 540px) {
  html {
    font-size: 1px; 
  }
  
  body {
    width: 393px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }
}

*/