@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/**
	* @file Common.css
	* @author WonnyJ
	* @date 2025.08.20
*/

/* Reset Styles */
:root {
	/*color*/
    --color-primary-1: #7163BA;
    --color-primary-1-li: #8675dd;
    --color-primary-1-dk: #413b67;
    --color-primary-1-hover: #675aa9;
	--color-sp-1 : #216af14a;
    --color-bg-1 : #f0ebf96b;
    --color-bg-2 : #f8f9fc;
    --color-bg-3 : #f8f9fa;
    --color-line-w: #e9ecef;
    --color-line-d: #ffffff34;
	--color-main1 : #19255B;
	--color-white: #fff;
	--color-bl1 : #111;
	--color-bl2 : #3f3f3f;
	--color-gy1 : #5f5f5f;
	--color-gy2 : #9f9f9f;
	--color-gy3 : #ababab;
	--color-red : #ff3310;
	--color-yellow : #f7b009;
	--color-blue : #0773f5;
	--color-green : #02b314;
	--product-biz1 : #cbd4fd;
	--product-biz2 : #ffe18f;
	--product-biz3 : #b2f5ae;
	--product-biz4 : #dfccff;	
	--data-type1 : #0D9488;	
	--data-type3 : #2C88F7;
	--data-type4 : #f94f19;

	--step-def : #efefef;
	--step-ing : #10ac18;	
	--step-true : #1e6ac7;
	--step-false : #ff3310;

	--box-shadow1 : 3px 3px 3px 0 rgb(123 119 119 / 5%);
	--status--st1: #271b01;
    --status--st2: #38dcfc;
    --status--st3: #ff5342;
    
    --font-small : 14px;
    --font-medium : 16px;
    --font-large : 18px;
	--gnb-height : 6.25rem;
	--content-size : 90rem;
	--gird-margin: 2.5rem;

}

* { margin: 0; padding: 0; font: inherit; color: inherit; }
*, :after, :before { box-sizing: border-box; flex-shrink: 0; }
:root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: break-word; -moz-tab-size: 4; tab-size: 4; font-size: var(--font-medium);}
:root.font-small { font-size: var(--font-small); }
:root.font-medium { font-size: var(--font-medium); }
:root.font-large { font-size: var(--font-large); }
html, body { height: 100%; line-height: 1; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -0.025em; -webkit-font-smoothing: antialiased;  scroll-behavior: smooth;}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
video { box-sizing: border-box; }
input { box-sizing: border-box; background: transparent; }
button { background: none; border: 0; cursor: pointer; box-sizing: border-box; background: transparent;  transition: 0.3s; }
a { text-decoration: none; transition: 0.3s; }
table { border-collapse: collapse; border-spacing: 0; }
ul, ol, li { list-style: none; }
pre { var(--color-white)-space: pre-wrap; }
input[type=text], input[type=number], input[type=email], input[type=password], button, textarea, select, input[type=button], input[type=submit], input[type=reset], input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, input:-internal-autofill-selected  { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border: 0;}
input[type=text], input[type=number], input[type=email], input[type=password] { color: var(--color-primary-1); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus  { -webkit-box-shadow: 0 0 0 30px white inset;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; appearance: none; margin: 0;}
input[type="number"] {-moz-appearance: textfield; appearance: textfield; }
input[type="radio"],
input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 1.125rem; height: 1.125rem; border: 1px solid var(--color-line-w); border-radius: 50%; position: relative; cursor: pointer; outline: none; transition: all 0.3s ease; }
label {display: flex; align-items: center; gap: 0.5rem;}
input[type="radio"]:hover,
input[type="checkbox"]:hover { border-color: var(--color-primary-1-li); }
input[type="radio"]:checked,
input[type="checkbox"]:checked { background-color: var(--color-primary-1-li); border-color: var(--color-primary-1-li); }
input[type="radio"]:checked::after,
input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 0.75rem; font-weight: 600; }
select { background: transparent url("/application/views/Client/safety/Images/common/ic_sel_arrow.svg") no-repeat calc(100% - 1.18rem) 50%; }
select,
select:focus,
select:active,
input, input:focus { outline: none; }
fieldset {all: unset; box-sizing: border-box; padding: 0; border: 0; margin: 0;}

legend,
.sr-only,
.skip-link {display: none !important; height: 0; width: 0; visibility: hidden; opacity: 0; overflow: hidden;}

br.mobBr {display: none;}

/*common*/
.inner {width: 100%; max-width: var(--content-size); margin: 0 auto; }
main { min-height: calc(100vh - 28.430625rem);}
main.join.Login {position: relative;}

.subLayout:not(.full) {display: grid; grid-template-columns: 16.25rem calc(100% - 3.875rem - 16.25rem); gap:3.875rem; padding: 4rem 0 6.25rem 0;  }

/*********************************************
	header
*********************************************/
/* 상단 배너 */
#noticeBanner { background: #ffeaa7; display: none; }
#noticeBanner.on {display: block; }
#noticeBanner > .inner { display: flex; padding: 0.5rem 0;}
.noticeCon { color: #856404; font-size: 0.875rem; width:calc(100% - 1.875rem); display: flex; align-items: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.noticeCon::before { content: '공지';  background: #dc3545; color: var(--color-white); padding: 0.25rem 0.5rem; border-radius: 0.1875rem; font-size: 0.75rem; margin-right: 0.375rem; display: inline-flex;}
.noticeClose { color: #856404; cursor: pointer; font-size: 0.625rem; opacity: 0.8; transition: 0.3s; padding: 0.3125rem;}

.toNav { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 0.5rem 0; font-size: 0.8125rem; }
.toNav .inner { display: flex; justify-content: space-between; align-items: center; height: 1.875rem;}
.toNav .inner > div {display: flex; gap: 0.375rem;}
.toNav a { color:var(--color-gy1); text-decoration: none; padding: 0.3125rem 0.5rem; border-radius: 0.1875rem; transition: all 0.2s; }


.fontControl {position: relative; display: flex; ; gap: 0.125rem; align-items: center;}
.fontControl > span {padding-right: 0.25rem;}
.fontSizeBtn { padding: 0.375rem 0.375rem; border: 1px solid var(--color-line-w); background: var(--color-white); font-size: 0.6875rem; cursor: pointer; border-radius: 2px; transition: all 0.2s; }
header {width: 100%; background: var(--color-white); box-shadow: 0 2px 4px rgb(0 0 0 / 5%); top: 0; z-index: 1000; position: relative;}
header h1, 
header h1 > a {width: 7.25rem;} 

header > .inner > div:nth-of-type(1){ display: flex; align-items: center; justify-content: space-between; height: var(--gnb-height); }

/* 검색영역 */
.searchForm { flex: 1; max-width: 50rem; margin: 0 2.5rem; position: relative; }
.search-box { width: 100%; padding: 0.75rem 50px 0.75rem 10.3125rem; border: 1px solid var(--color-line-w); border-radius: 20.3125rem; font-size: 0.875rem; outline: none; }
.search-btn { position: absolute; right: 0.3125rem; top: 50%; transform: translateY(-50%); background: var(--color-primary-1); color: var(--color-white); border: none; padding: 0.5rem 10.3125rem; border-radius: 1.25rem; cursor: pointer; font-size: 0.875rem; }

/* 우측 유틸리티 */
.memberArea { display: flex; align-items: center; gap: 0.625rem; }
.userLogin {display: flex;}
.outLogin  {flex-direction: row; }
.outLogin > a ,
.outLogin > button { display: flex; flex-direction: column; justify-content: center; align-items: center;  align-content: center; gap: 0.375rem;  transition: 0.3s; padding: 0 0.75rem;}
.outLogin > a::before,
.outLogin > button::before {content: ''; width: 1.625rem; height: 1.625rem; display: block;  }
.outLogin > .viewLogin::before { background: transparent url('/application/views/Client/safety/Images/common/ic_login.svg') no-repeat center center; background-size: 100%; transition: 0.3s;}
.outLogin > a:nth-of-type(2):before { background: transparent url('/application/views/Client/safety/Images/common/ic_join.svg') no-repeat center center; background-size: 100%; transition: 0.3s;}
.outLogin > a > span,
.outLogin > button > span{ font-size: 0.8125rem; font-weight: 600; color: #232323; transition: 0.3s;}

#managerBtn {display: flex; align-items: center; justify-content: center; background: var(--color-primary-1-dk); color: var(--color-white);  padding: 0 1rem; border-radius: 0.375rem; margin-right: 0.375rem; font-size: 0.875rem; border: 1px solid var(--color-line-w); font-weight: 500;}
#managerBtn:hover {background: var(--color-primary-1);}

#viewMemberMenu {display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-line-w); border-radius: 0.375rem; padding: 0.5rem  0.625rem 0.5rem 1rem; gap:0.375rem; }
#viewMemberMenu > em {font-weight: 500; color: var(--color-primary-1); }
#viewMemberMenu > em::after {content: '님'; font-size: 0.875rem ; padding-left: 2px; color: var(--color-gy1);}
#viewMemberMenu > i {font-size: 0.625rem; width: 1.25rem; height:  1.25rem;  border-radius: 50%;  position: relative;  transition: 0.3s;}
#viewMemberMenu > i::before {content: '\f078'; font: var(--fa-font-solid);  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  transition: 0.3s; color: #676767;}
#viewMemberMenu > span {display: flex; justify-content: center; align-items: center; background: #f1f1f1; border: 1px solid var(--color-line-w); width: 2.125rem; height: 2.125rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; color: #5f5f5f;  transition: 0.3s; display: none;}
.active #viewMemberMenu > span {color: #121212; border-color: #ccc; background: #dce0e4;}
.active #viewMemberMenu > i {background: #dce0e4; }
.active #viewMemberMenu > i::before {transform: translate(-50%, -50%) rotate(180deg); color: #121212; }
.active #viewMemberMenu > em::after { color: var(--color-primary-1);}

.memberMenu {position: absolute; display: flex; z-index: 1001; flex-direction: column; background: var(--color-white); border-radius: 0.625rem ; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); bottom: 0; right: 0; transform: translateY(100%); min-width: 20rem; padding: 1.25rem 1.125rem 1.125rem 1.125rem; overflow: hidden;  opacity: 0; visibility: hidden; transition: all 0.4s ease; gap: 0.5rem;}
.active .memberMenu { opacity: 1; visibility: visible; transform: translateY(105%);}
.memberMenu > strong {font-size: 0.875rem; font-weight: 600; color: var(--color-gy2);}
.memberMenu > div {padding: 1rem 0.875rem; display: flex; flex-direction: column; background: #f1f1f1; border-radius: 0.375rem; gap: 0.4375rem; margin: 0. 0.3125rem 0;}
.memberMenu > div > span {font-size: 0.9375rem; font-weight: 500; color: var(--color-gy1); }
.memberMenu > div > span.memberName {padding-bottom: 0.25rem;}
.memberMenu > div > span.memberName b {font-size: 1.25rem; font-weight: 600;}
.memberMenu > div > span.memberID {font-size: 1rem;}
.memberMenu > div > span.memberType::before {content: '계정 : '; font-size: 0.8125rem ; }
.memberMenu > div > span.memberID::before {content: 'ID : '; font-size: 0.8125rem ; }
.memberMenu > div > span.memberCpName::before {content: '소속 : '; font-size: 0.875rem ; }
.memberMenu > a {font-weight: 500; padding: 0.3125rem 0; font-size: 1rem; color: var(--color-bl2);}

/* 네비게이션 */
#navMenu { display: flex; background: var(--color-white); border-top: 1px solid #e9ecef; padding: 0 1.25rem; justify-content: center; }
#navMenu > li { position: relative; width: calc(100% / 5); max-width: 13.5rem; }
#navMenu > li > a { display: block; padding: 22px 0; color: #464646; font-weight: 700; font-size: 1.125rem; transition: all 0.3s ease; width: 100%; text-align: center; }
#navMenu > li > a > i {font-size: 1rem;}
#navMenu > li.active > a { color: var(--color-primary-1); background: #f8f9fa; border-bottom: 2px solid var(--color-primary-1); }
#mobMenu {display: none;}	

/* 메가 드롭다운 */
#fullMenu { position: absolute; top: 100%; left: 0; right: 0; width: 100%;  background: var(--color-white); border-top: 1px solid #e9ecef; box-shadow: 0 5px 5px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(-0.625rem); transition: all 0.3s ease; z-index: 1000; }
#fullMenu.active {opacity: 1; visibility: visible; transform: translateY(0);}
.fullMenuContent{ max-width: var(--content-size); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1.875rem; padding: 1.25rem 1.25rem 1.875rem 1.25rem; z-index: 9999;}
.mega-column { display: flex; flex-direction: column; gap: 0.625rem;}
.mega-column > ul {display: flex; flex-direction: column; gap: 0.5rem;}
.mega-column li a { display: block; padding: 0.5rem 0; color: var(--color-bl2); text-decoration: none; font-size: 1.125rem; transition: all 0.2s ease; }
/* .mega-column .highlight { background: #f9f0fb; padding: 0.75rem 0.5rem; border-radius: 0.3125rem;} */
.mega-column li a i {font-size: 0.875rem; transform: translateY(-2px);}
.mega-column .highlight { padding: 0 0 0.625rem; border-bottom: 1px solid #ddd;}
.mega-column .highlight a { color: var(--color-bl1); font-weight: 600; padding: 0; font-size: 1.25rem;}

/* 모바일 햄버거 메뉴 */
.mobHam { display: none; background: none; border: none; font-size: 1.5rem; color: #333; cursor: pointer; padding: 0.3125rem; transition: 0.3s;}
.mobHam i {transition: 0.3s;}


.subLayout main .textCon {border: 2px solid var(--color-primary-1); padding: 1.75rem; border-radius: 1.25rem; color: var(--color-gy1); line-height: 172%; letter-spacing: -0.025em; margin-top: 1rem;}
.subLayout main .textCon .txt_tit01 {font-weight: 600; color: var(--color-primary-1); font-size: 1.25rem; line-height: 220%;}
.subLayout main .textCon .txt_tit02 {font-weight: 600; color: var(--color-bl1); font-size: 1.125rem; }
.subLayout main .textCon  strong {font-weight: 600; color: var(--color-bl1);}
h2 + .titleDesc { font-size: 1em; color: var(--color-gy1); line-height: 152%; letter-spacing: -0.025em;}
.callMOdalBtn::before {content: '내용확인';}

@media (max-width: 1480px) {
    :root {
        --gird-margin : 2rem;
    }
	
	.inner, 
	.subLayout,
	.subLayout:not(.full) { width: 100%; }
	.subLayout:not(.full) { grid-template-columns: 16.25rem calc(100% - 16.25rem - 2rem); gap: 2rem;}
	header .inner,
	footer .inner,
	.Main .inner,
	.manager .inner,
	.subLayout,
	.subLayout:not(.full)  {padding-left: var(--gird-margin); padding-right: var(--gird-margin);}
	#navMenu {padding: 0;}
	.toNav .inner {padding-left: var(--gird-margin);}
}
@media (min-width:1281px) {
	.subLayout:not(.full) aside nav > div:first-of-type > a {display: none;}

	/* .subLayout:not(.full) aside nav {position: sticky; top: 1.5rem;} */
	.subLayout:not(.full) aside nav > div:first-of-type {background: var(--color-primary-1-dk); color: var(--color-white); display: flex; justify-content: center; align-content: center;  align-items: center; height: 7.5em; border-radius: 0.75rem 0.75rem 0 0 ;}
	.subLayout:not(.full) aside nav > div:first-of-type strong {font-size: 1.5rem; font-weight: 600;}
	.subLayout:not(.full) aside nav > ul li { border-bottom: 1px solid #dcdcdc; border: 1px solid #dcdcdc; border-top: 0;}
	.subLayout:not(.full) aside nav > ul li.active { background: var(--color-primary-1); border-color: var(--color-primary-1); transition: 0s;}
	.subLayout:not(.full) aside nav > ul li.active a {color: var(--color-white); transition: 0s;} 
	.subLayout:not(.full) aside nav > ul li a { padding: 1.25rem ; display: block; font-size: 1.125rem; font-weight: 600; color: var(--color-bl2);}
	.subLayout:not(.full) aside nav > ul li a i {font-size: 0.875rem; transform: translateY(-1px);}
	.subLayout:not(.full) aside nav > ul li:last-of-type { border-radius: 0 0 0.75rem 0.75rem ; }
}
@media (max-width: 1280px) {
	/* .subLayout:not(.full) { grid-template-columns: 13rem calc(100% - 13rem - 2rem); gap: 2rem;}
	.subLayout:not(.full) aside nav > div:first-of-type {  height: 6rem; }
    .subLayout:not(.full) aside nav > div:first-of-type strong {font-size: 1.25rem;}
    .subLayout:not(.full) aside nav > ul li a { padding: 1rem ; font-size: 1rem; } */
	.subLayout:not(.full) {display: flex; flex-direction: column; padding-top:4rem;}
	.subLayout:not(.full) nav {display: flex; flex-direction: row; justify-content: flex-end;}
	aside.lnb > nav > div:first-of-type {display: flex;}
	aside.lnb > nav > div:first-of-type > a.home {order : -1; font-weight: 900; color: var(--color-gy2); font-size: 0.875rem;}
	aside.lnb > nav > div:first-of-type > strong {color: var(--color-gy2); font-weight: 500;}
	aside.lnb > nav > div:first-of-type > a:not(.home) {display: none;}
	aside.lnb > nav .lnbMenu > li:not(.active){display: none;}
	aside.lnb > nav .lnbMenu > li.active {font-weight: 600; color: var(--color-bl1); letter-spacing: -0.05em;}
	aside.lnb > nav > div:first-of-type > a.home:after,
	aside.lnb > nav > div:first-of-type > strong::after { content: '\f054'; font: var(--fa-font-solid); padding: 0 0.5rem; color: var(--color-gy3); font-size:0.625rem; top: -1px; position: relative; }
	
}
@media (min-width: 991px){
	.isDesktop .header > .inner{position:relative; z-index:30;}
	.isDesktop #navMenu > li{position:static;}
	.isDesktop #navMenu > li:hover ~ #fullMenu { opacity:1; visibility:visible; transform:translateY(0); }
}
@media (max-width: 990px) {
	:root {
		--gnb-height : 4.375rem;
		--content-size : 100%;
		--gird-margin : 1.875rem;
	}
	
	h1 {max-width: 35vw;}
	
    /* aside.lnb, */
	.toNav { display: none; }	
	header { position: sticky;}
	header > .inner { position: relative; }
	header > .inner > div:nth-of-type(1) { width: 100%;  height: var(--gnb-height ); }
	.subLayout main h2 {font-size: 1.625rem;}

	.subLayout:not(.full) {display: flex; flex-direction: column; width: 100%; padding-top: 4rem;} 

	/* .subLayout:not(.full) aside nav {display: flex; flex-direction: row; width: 100%;;} */
	/* .subLayout:not(.full) aside ul {display: flex; } */
	
	.searchForm { order: 3; max-width: 100%; margin: 0; }
	.header-utils { order: 2; gap: 0.625rem; }
	.mobHam { display: block; }
	#navMenu { position: fixed; top: var(--gnb-height); left: 0; right: 0; background: var(--color-white); flex-direction: column; box-shadow: none; padding: 0; justify-content: flex-start; transform: translateX(100%); min-height:calc(100vh - var(--gnb-height)); transition:0.4s; }
	#navMenu.active { max-width: 100vw; overflow-y: auto; padding: 0.625rem 0;  transform: translateX(0);}
	
	/*모바일 Nav (s)*/
	.mobMenu { font-size: 1.2rem; padding: 1rem var(--gird-margin); }
	.mobMenu > .member-logout {display: flex; flex-direction: column;}
	.mobMenu > .member-logout strong {font-weight: 800; font-size: 1.375rem; color: var(--color-bl2); letter-spacing: -0.025em; line-height: 130%; padding-bottom: 1.5rem; }
	.mobMenu > .member-logout .loginBtn {display: flex; gap: 0.5rem; }
	.mobMenu > .member-logout .loginBtn a {flex: 1; border-radius: 0.25rem; font-size: 1rem; display: flex; justify-content: center; align-items: center; color: var(--color-white); font-weight: 500; padding: 1rem 0;}
	.mobMenu > .member-logout .loginBtn a:first-of-type {background-color: var(--color-primary-1-dk);}
	.mobMenu > .member-logout .loginBtn a:last-of-type {background-color: var(--color-primary-1);}
	
	.mobMenu .qMenu {display: flex; justify-content: center; gap: 0.5rem;  padding: 1rem 0;}
	.mobMenu .qMenu a {display: flex; justify-content: center; gap: 1rem; align-items: center; background: #F2F4FC; border-radius: 0.625rem; padding: 0.625rem 1rem; flex: 1;}
	.mobMenu .qMenu a .objBox {max-width: 4rem; background: var(--color-white); border-radius: 50%; padding: 0.5rem;}
	.mobMenu .qMenu a .objBox img { width: 100%;}
	.mobMenu .qMenu a span {font-weight: 600; font-size: 1.25rem; line-height: 135%;}

	/*모바일 Nav (e)*/

	#navMenu > li { border-bottom: 1px solid #f0f0f0; width: 100%; max-width: 100%; }
	#navMenu > li:last-child { border-bottom: none; }
	#navMenu > li > a { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; padding: 1.125rem var(--gird-margin); text-align: left; }
	#navMenu > li > a::after {content: '\f107'; font: var(--fa-font-solid); width: 1.5rem; height: 1.5rem; display: flex; justify-content: center; align-items: center; transition: 0.3s;}
	#navMenu > li.dropdown-active > a::after {transform: rotate(180deg);}

	#fullMenu { display: none; }
	.mobile-dropdown { position: static; background: var(--color-bg-1); opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
	.dropdown-active .mobile-dropdown { max-height: 18.75rem; padding: 0; }
	.mobile-dropdown ul { list-style: none; padding: 0 var(--gird-margin); }
	.mobile-dropdown li a { display: block; padding: 1rem 0; font-size: 1rem; color: var(--color-primary-1); font-weight: 600; border-bottom: 1px solid #e9ecef;  }
	.mobile-dropdown li:last-child a { border-bottom: none; }
	.search-box { padding: 0.625rem 40px 0.625rem 0.75rem; }
	.search-btn { padding: 0.375rem 0.75rem; }

	#managerBtn,
	#viewMemberMenu {border: none; padding: 0; display: none;}
	#viewMemberMenu > em {display: none;}
	body #viewMemberMenu > span {display: flex;}
	.outLogin > a {display: none;}
	.outLogin > a,
	.outLogin > button {gap:2px; padding : 0;}
	.outLogin > a > span,
	.outLogin > button > span {display: none;}

	#navMenu > li .member-login > div:first-of-type {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem;}
	#navMenu > li .member-login > div:first-of-type strong {font-size: 1rem;  display: block; font-weight: 600; color: var(--color-gy1); flex: 1;}
	#navMenu > li .member-login > div:first-of-type strong > b {font-size: 1.25rem; font-weight: 700; color: var(--color-bl1); padding-right: 0.125rem;}
	#navMenu > li .member-login > div:first-of-type > a {font-size: 0.875rem; font-weight: 600 ; color: var(--color-gy2); text-decoration: underline;  text-underline-offset : 0.25rem;  }
	#navMenu > li .member-login .memberMenu {position: relative; width: 100%; right: 0; left:0; top: 0; bottom: 0; min-width: 0; box-shadow: none; border-radius: 0; border: 0; transform: translate(0, 0); padding: 0;}	
	#navMenu > li .member-login .memberMenu > div {border-radius: 0.5rem;}
	#navMenu > li .member-login .memberMenu > div > span {display: flex;}
	#navMenu > li .member-login .memberMenu > div > span::before {min-width: 2.25rem;}
	.member-login .loginBtn {display: flex; flex-wrap: wrap; padding-top: 0.625rem; }
	#navMenu > li.mobMenu .mobManagerBtn {width: 100%; background: var(--color-primary-1-dk); color: var(--color-white);  border-radius: 0.5rem; text-align: center; padding: 0.9125rem 0; font-size: 0.875rem; justify-content: center; margin-bottom: 1rem;}
	#navMenu > li.mobMenu .logoutBtn {border: 1px solid var(--color-line-w); border-radius: 0.5rem; text-align: center; padding: 0.875rem 0; font-size: 0.875rem; justify-content: center; max-width: 10rem; margin: 0 auto;}
	#navMenu > li.mobMenu .logoutBtn::after,
	#navMenu > li.mobMenu .mobManagerBtn::after {display: none;}

	.memberMenu { width: calc(100vw - var(--gird-margin)*2); transform: translate(50%, 98%); right: 50%;}
	.active .memberMenu { transform: translate(50%, 100%);}
}
@media (max-width:768px) {
	:root {
		--gnb-height : 4rem;
	}
	header h1,
	header h1 > a {max-width: 5.25rem;}
	.subLayout:not(.full) {padding-top: 2rem;}
	.subLayout main h2::after,
	.subLayout:not(.full) aside {display: none;}
	br.mobBr {display: block;}
	.mobHidden {display: none;}

	.mobMenu > .member-logout .loginBtn a { padding: 0.875rem 0; font-size: 0.875rem;}
	.mobMenu .qMenu {padding-bottom: 0;}
	.mobMenu .qMenu a { flex-direction: column; background: transparent; gap: 0; padding: 0;}
	.mobMenu .qMenu a .objBox {max-width: 55%; padding: 0;}
	.mobMenu .qMenu a span {font-size: 0.875rem; color: var(--color-gy1); }
}

@media (max-width: 480px) {
	:root {
		--gird-margin : 1.375rem; 
	}
	.mobMenu > .member-logout strong {padding-bottom: 1.125rem; font-size: 1.125rem;}
	.mobMenu > .member-logout .loginBtn {gap: 0.25rem;}
	.mobMenu > .member-logout .loginBtn a {padding: 0.625rem 0;}
	.memberArea {gap:0.5rem;}
	.logo-text { font-size: 22px; }
	.logo-sub { display: none; }
	.content { padding: 40px 10.3125rem; }
	.content h1 { font-size: 24px; }
	.content p { font-size: 0.875rem; }
	.header-utils { flex-direction: column; width: 100%; }
	.searchForm { order: 2; }
	.login-btn, .mobHam { order: 3; }
    .subLayout:not(.full) {padding-bottom: 3.5rem;}
}

@media (max-width: 385px) {
	:root {
		--gird-margin : 1.25rem; 
	}
    .subLayout main h2 {font-size: 1.375rem;} 
}

/*********************************************
	modal
*********************************************/

.commonModalWrap,
.modalWrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 9999;}
.modalCon,
.commonModal.noClose .modalHd .closeModal,
.commonModal.noClose .modalBtm {display: none;}

.commonModalWrap.active,
.modalWrap.active {display: flex;}
.modalContent {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 94%; border-radius: 0.625rem; background: var(--color-white);}
#loginModal .modalContent {max-width: 45rem;}
.modalContent #modal-textm, 
.modalContent .modalCon {background: #fff; padding: 1.125rem; max-height: 86vh; overflow-y: auto;}
.modalHd {font-size: 1.375rem; font-weight: 700; padding: 0.625rem 0 1.625rem 0; display: block;}

.commonModalWrap .modalContent,
.commonModal .modalContent {padding: 2.25rem 1.5rem 1.5rem 1.5rem; max-width: 46rem;}

.commonModal .modalHd { padding: 0 0 0 0.75rem; display: flex; align-items: flex-start;}

.commonModal .modalHd h2 { font-size: 1.375rem; margin-bottom: 1.25rem; flex: 1;}
.modalHd .modalTitleDesc {font-size: 1rem; color: var(--color-gy1); line-height: 138%; font-weight: 400; font-size: 1.125rem;}
.modalHd .moadlNotice {background: var(--color-bg-1); font-size: 1rem; line-height: 148%; padding: 1rem; border-radius: 0.625rem; margin-top:
0.5rem; font-weight: 500; color: var(--color-primary-1);} 

.commonModal .modalHd .closeModal {position: relative; cursor: pointer; font-size: 1rem; color: #000; opacity: 0.6; transition: 0.4s;}
.commonModal #modalBody {background: #fff; max-height: 75vh; overflow-y: auto; color: var(--color-gy1); line-height: 172%; letter-spacing: -0.025em; padding: 0 0.75rem;}
.commonModal #modalBody::-webkit-scrollbar {width: 0.3125rem; }
.commonModal #modalBody::-webkit-scrollbar-thumb  {background: var(--color-primary-1);  border-radius: 1rem;}
.commonModal #modalBody::-webkit-scrollbar-track  {background: #f1f1f1; border-radius: 1rem;}
.commonModal #modalBody .notice {background: var(--color-bg-1); color: var(--color-bl1); padding: 0.875rem 1.5rem; border-radius: 0.625rem; margin-bottom: 0.625rem;}
.commonModal #modalBody .txt_tit01 {font-weight: 600; color: var(--color-primary-1); font-size: 1.125rem; line-height: 220%;}
.commonModal #modalBody .txt_tit02 {font-weight: 600; color: var(--color-bl1); font-size: 1.125rem; }
.commonModal #modalBody .serchArea  {display: flex; background: var(--color-bg-1); padding: 0.625rem 1.5rem; border-radius: 0.5rem;  gap:0.5rem; margin-bottom: 1rem;}
.commonModal #modalBody .serchArea input[name="sh_cpNm"] {flex: 1;}
.commonModal #modalBody .serchArea #btnCpSearch {font-size: 0.875rem; color: var(--color-bl1);}
#cpList {min-height: 5rem; display: flex; flex-direction: column; gap: 0.5rem;}
#cpList .th {border: 1px solid var(--color-line-w); border-radius: 0.5rem; padding: 1rem; cursor: text; text-align: center; color: var(--color-gy1);}
#cpList .row {border: 1px solid var(--color-line-w); border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: 0.3s;}
#cpList .row strong {color: var(--color-bl1); font-weight: 600; display: inline-block; }
#cpList .row strong::before {content: '기업명 : '; padding-right: 3px; color: var(--color-gy1); font-size: 1rem; font-weight: 400;}
#cpList .row span.spNo::before {content: '사업자번호 :'; padding-right: 3px; color: var(--color-gy1); font-size: 1rem; font-weight: 400;}
#cpList .row strong::after {content: '/'; padding: 0 0.5rem; font-weight: 400; color: #ccc;}
#cpList .row.noList span {text-align: center; line-height:1; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.875rem;}
#cpList .row.noList.userType2 {cursor: text;}

#cpList .row.setSelf {text-align: center; align-items: center; color: var(--color-bl1); font-weight: 600;}
#cpList .row.noList span b {font-weight: 500; color: var(--color-bl2); text-decoration: underline;}
#cpList .row:not(.userType2):hover {border-color:var(--color-primary-1) ; color: var(--color-primary-1);}
#cpList .row:not(.userType2):hover strong {color: var(--color-primary-1)}
#cpList .row:not(.userType2).noList:hover span b {color: var(--color-bl1);}
#cpList .row:not(.userType2).setSelf:hover {background: var(--color-primary-1); color: var(--color-white); border-color: transparent;}

.commonModalWrap .modalBtm,
.commonModal .modalBtm  {display: flex;  justify-content: center; align-items: center; gap: 0.3125rem; padding-top: 1rem;}
.commonModalWrap .modalBtm button,
.commonModal .modalBtm button { display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-gy3); font-size: 1rem; padding: 0.875rem 5rem; border-radius: 0.375rem; transition: 0.3s;}
.commonModalWrap .modalBtm button.ok,
.commonModal .modalBtm button.ok {border-color: transparent; background: var(--color-primary-1); color: var(--color-white);}
.commonModal .modalBtm .ok::before {content: '확인';}
.commonModal .modalBtm .no::before {content: '취소';}

.modalWrap.commonModal.alert.active {background: none;}
.modalWrap.commonModal.alert .modalContent {box-shadow: 2px  2px 8px rgba(0, 0, 0, 0.1); max-height: 50vh;}
.modalWrap.commonModal.confirm.active .modalContent, 
.modalWrap.commonModal.alert.active,
.modalWrap.commonModal.alert .modalContent  {max-width: 42rem; height: auto;}
.modalWrap.commonModal.alert.active {  top: 50%; left: 50%;transform: translate(-50%, -50%);}

.modalWrap.commonModal.alertModal .modalContent,
.modalWrap.commonModal.validateMdoal .modalContent  {max-width: 28rem; height: auto;}
.modalWrap.commonModal.alertModal .modalContent .alertModalText,
.modalWrap.commonModal.validateMdoal .modalContent .validateText {font-size: 1.375rem; line-height: 138%; font-weight: 600; padding-bottom: 1rem; display: block;}
.modalWrap.commonModal.alertModal .modalContent .modalBtm,
.modalWrap.commonModal.validateMdoal .modalContent .modalBtm {width: 100%;}
.modalWrap.commonModal.alertModal .modalContent .modalBtm .ok,
.modalWrap.commonModal.validateMdoal .modalContent .modalBtm .ok{width: 100%; flex: 1; padding: 0.875rem 0; font-size: 1rem; font-weight: 600;}


.commonModalWrap.alert .modalContent {max-width: 44rem; height: auto; padding: 1.5rem;}
.commonModalWrap .modalHd h2 { font-size: 1.5rem; margin-bottom: 1.25rem; flex: 1;}

.commonModalWrap.alert.mdPassChk .modalContent {max-width: 34rem;}
.commonModalWrap.alert.mdPassChk .modalContent .modalHd {padding-bottom: 0.625rem;}
.commonModalWrap.alert.mdPassChk .modalContent .modalHd h2 {margin-bottom: 0.625rem}
.commonModalWrap.alert.mdPassChk .modalContent .modalHd .modalTitleDesc {padding-bottom: 0.875rem;}

.commonModalWrap  .modalBd fieldset {display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.commonModalWrap  .modalBd fieldset input {width: 100%;  font-size: 1.125rem; font-weight: 500; padding: 1.1875rem 1.875rem; border: none; border: 1px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; outline: none; color: #121212; transition: 0.3s;}
.commonModalWrap  .modalBd fieldset input[type=password].error:focus,
.commonModalWrap  .modalBd fieldset input[type=password].error:active,
.commonModalWrap  .modalBd fieldset input[type=password].error:hover,
.commonModalWrap  .modalBd fieldset input[type=password].error {border-color: var(--color-red); color: var(--color-red);}

.commonModalWrap  .modalBd fieldset input[type='button'],
.commonModalWrap  .modalBd fieldset button[type='submit'] { width: 100%; font-size: 1.125rem; font-weight: 500; padding: 1.1875rem 1.875rem; border: none; border: 1px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; outline: none; color: #121212; transition: 0.3s; background: var(--color-primary-1); color: var(--color-white); font-weight: 600; border-color: transparent}

.commonModalWrap .modalBd fieldset input:not([type='submit']):focus, 
.commonModalWrap .modalBd fieldset:not([type='submit']):active {border-color: var(--color-primary-1); color: var(--color-primary-1); font-weight: 500;}
.commonModalWrap .modalBd fieldset .passForm-error { display: none; color: var(--color-red); padding: 0.5rem 1.1875rem; width: 100%; text-align: left;} 

.commonModalWrap .modalBd.TnC {overflow-y: auto; max-height: 60vh; line-height: 168%; color: var(--color-gy1);}
.commonModalWrap .modalBd.TnC::-webkit-scrollbar {width: 0.3125rem; }
.commonModalWrap .modalBd.TnC::-webkit-scrollbar-thumb  {background: var(--color-primary-1);  border-radius: 1rem;}
.commonModalWrap .modalBd.TnC::-webkit-scrollbar-track  {background: #f1f1f1; border-radius: 1rem;}
.commonModalWrap .modalBd.TnC .txt_tit01 {font-weight: 600; color: var(--color-primary-1); font-size: 1.125rem; }
.commonModalWrap  #PolicyForm label {font-weight: 500; color:var(--color-bl2); cursor: pointer;}
.commonModalWrap  #PolicyForm {flex-direction: column; gap: 1rem;}

.sdLogList.commonModalWrap .modalHd h2 {margin-bottom: 0;}  
.sdLogList .row { display: flex; align-items: center; gap: 0.5rem;}
.sdLogList .row span {padding: 0.875rem 0; color: var(--color-gy1); text-align: center; font-size: 0.875rem;}
.sdLogList .row.th { display: flex; background: var(--color-primary-1-dk);  border-radius: 0.25rem 0.25rem 0 0;}
.sdLogList .row.th span {text-align: center; color: var(--color-white); font-weight: 400; font-size: 0.9375rem ; opacity: 0.85;}
.sdLogList .row.td {border: 1px solid var(--color-line-w); border-top: 0;}
.sdLogList .row.td span { line-height: 138%; letter-spacing: -0.025em; }

.sdLogList .modalBd {max-height: 66vh; overflow-y: auto;}

.sdLogidx {width: 3rem}
.sdLogDate {width: 10rem;}
.sdLogCommnet {flex: 1;}
.sdLogList .row.td .sdLogCommnet {text-align: left; }
.sdLogList.commonModalWrap .modalBtm {flex-direction: column; gap: 1rem;}  
.sdLogList.commonModalWrap .modalBtm label {cursor: pointer;}

.sdLogList .modalBd::-webkit-scrollbar {width: 0.3125rem; }
.sdLogList .modalBd::-webkit-scrollbar-thumb  {background: var(--color-primary-1);  border-radius: 1rem;}
.sdLogList .modalBd::-webkit-scrollbar-track  {background: #f1f1f1; border-radius: 1rem;}

@media (max-width: 786px) {
	.commonModal .modalContent {padding: 2rem 1rem 1rem 1rem;}
	#cpList {min-height: 0;}
	#cpList .row strong::before,
	#cpList .row span.spNo::before {display: none;}
	.commonModal .modalHd,
	.commonModal #modalBody {padding: 0;}
	.commonModal .modalBtm a,
	.commonModal .modalBtm button {flex: 1;}
	#corporateInfo #returnBtn {margin-bottom: 0;}
}


/* login */
#loginModal .modalHd {text-align: center; padding-top: 2.375rem; padding-bottom: 0;}
#loginModal .modalHd h2 {font-size: 2rem;}
#loginModal .modalContent {max-width: 32.5rem; overflow: visible;}
#outLogin {max-width: 34rem; margin: 5rem auto 5rem; padding: 1rem 0; /*padding: 2rem 2.85rem 1.5rem 2.85rem; */ border: 2px solid var(--color-primary-1); border-radius: 1.25rem;}
#outLogin h2 {text-align: center;}
#outLogin h2::after {display: none;}
#outLogin fieldset {display: flex; flex-direction: column; align-items: center; padding: 1.125rem 1.25rem 1.875rem 1.25rem; gap: 0.625rem; }
#outLogin fieldset > div:first-of-type  {display: flex; width: 100%; padding-bottom: 0.25rem;}
#outLogin fieldset > div:first-of-type > label { cursor: pointer;  border: 1px solid var(--color-line-w); width: 50%; height: 3rem; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-gy2);}
#outLogin fieldset > div:first-of-type > label:first-of-type {border-radius: 0.5rem 0 0 0.5rem;}
#outLogin fieldset > div:first-of-type > label:last-of-type {border-radius: 0 0.5rem 0.5rem 0; }
#outLogin fieldset > div:first-of-type input[type="radio"] {display: none;}
#outLogin fieldset > div:first-of-type input[type="radio"]:checked + label {border-color: var(--color-primary-1); color: var(--color-primary-1); font-weight: 600;}
#outLogin fieldset > a,
#outLogin input {width: 100%; max-width: 28.125rem; font-size: 1.125rem; font-weight: 500; padding: 1.1875rem 1.875rem; border: none; border: 1px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; outline: none; color: #121212; transition: 0.3s;}
#outLogin fieldset > a {border-color: #5f5f5f; display: flex; justify-content: center; height: 3.5rem; transition: 0.3s; }

#pwChangeModal input[type='button'],
#outLogin button[type='submit'] { width: 100%; max-width: 28.125rem; font-size: 1.125rem; font-weight: 500; padding: 1.1875rem 1.875rem; border: none; border: 1px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; outline: none; color: #121212; transition: 0.3s; background: var(--color-primary-1); color: var(--color-white); font-weight: 600; border-color: transparent}

#outLogin input:not([type='submit']):focus, 
#outLogin input:not([type='submit']):active {border-color: var(--color-primary-1); color: var(--color-primary-1); font-weight: 500;}
#outLogin fieldset > div {padding-top: 0.625rem; display: flex;  width: 100%; max-width: 28.125rem; margin: 0 auto;}
#outLogin fieldset > div > a {font-size: 1rem; color: #5f5f5f;font-weight: 500; transition: 0.3s; border-bottom: 2px solid #efefef; line-height: 160%;}

#loginModal .closeModal {position: absolute ; top: -0.625rem; right: 50%; transform: translate(50%, -100%); color: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; font-size: 0.875rem; font-weight: 800; background: transparent; border: 2px solid #ffffff9c; opacity: 1; width: 2.0625rem; height: 2.0625rem; padding: 0; border-radius: 50%; transition: 0.3s;}

#logininfoModal { display: none; position: fixed; width: 100vw; height: 100vh; justify-content: center; align-items: center; background: #000000de; z-index: 99999; top: 0; left: 0;}  
#logininfoModal.active {display: flex;}
.logininfoList {display: flex; flex-direction: column; width: 100%; gap: 0.5rem; max-width: 34rem; width: calc(100% - var(--gird-margin)*2); color: var(--color-white);}
.logininfoList h2 {font-size: 2rem; font-weight: 600; }
.logininfoList h2 + span { opacity: 0.7; padding: 0 0 0.85rem 0; font-size: 1rem;}

.logininfoList > div {display: flex; flex-direction: column; width: 100%; gap: 0.5rem; overflow-y: auto; max-height: calc(100vh - 11.25rem);}
.logininfoList > div > a,
.logininfoList > div > button {width: 100%; padding: 1rem; border-radius: 0.5rem; text-align: left; background: var(--color-primary-1-dk); color: var(--color-white); transition: 0.3s;}
.logininfoList > div > a:hover,
.logininfoList > div > button:hover {background: var(--color-primary-1-li);}
.logininfoList > div > button[data-gcid="SM"]::before,
.logininfoList > div > button[data-gcid="SU"]::before {content: '기업회원'; }
.logininfoList > div > button[data-gcid="SM"]:hover:before,
.logininfoList > div > button[data-gcid="SU"]:hover::before {background: var(--color-primary-1-dk);}

.logininfoList > div > a::before,
.logininfoList > div > button::before {background: var(--color-primary-1-li); border-radius: 0.25rem ; font-size: 0.875rem; margin-right: 0.5rem; padding: 0.375rem 0.875rem; }
.logininfoList > div > a::before,
.logininfoList > div > button[data-gcid="U"]::before {content: '개인회원'; background: var(--color-white); color: var(--color-bl1); opacity: 0.9;}

.logininfoList > .goJoinBtn {display: flex; flex-direction: column; text-align: center;  padding-top: 1rem; gap: 0.875rem; opacity: 0.9 ; }
.logininfoList > .goJoinBtn span {font-size: 1rem; opacity: 0.8;}
.logininfoList > .goJoinBtn b { font-size: 1rem; text-decoration: underline; color: var(--color-white); text-align: center; text-decoration-color: #ffffff91; text-underline-offset : 0.5rem;  font-size: 1rem; font-weight: 600;} 
.logininfoList > .goJoinBtn:hover {opacity: 1; }
.logininfoList > .goJoinBtn:hover b { text-decoration-color: #fff; opacity: 1;}

.logininfoList > button.closeLogininfoModal {background: #fff; text-align: center; opacity: 0.6; color: var(--color-bl1); font-weight: 500; width: 100%; padding: 1rem; border-radius: 0.5rem; }
.logininfoList > button.closeLogininfoModal:hover {opacity: 0.9;}


.logininfoList > div::-webkit-scrollbar {width: 0.3125rem; }
.logininfoList > div::-webkit-scrollbar-thumb  {background: var(--color-primary-1);  border-radius: 1rem;}
.logininfoList > div::-webkit-scrollbar-track  {background: #f1f1f1; border-radius: 1rem;}

#lodingSpinner,
#outLogin fieldset > div#loginSpinner,
#loginSpinner { display: none; position: fixed; top: 50%; left: 50%; transform:  translate(-50%, -50%); z-index: 9999; background: #ffffffde; width: 100vw; height: 100vh; max-width: 100%;} 

#lodingSpinner > .spinner,
#loginSpinner > .spinner {display: block; width:3rem; height:3rem; border:0.375rem solid var(--color-gy2); border-top:0.375rem solid var(--color-primary-1); border-radius:50%; animation:loginSpin 1s linear infinite; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);z-index: 999;}

#lodingSpinner > span:last-of-type,
#loginSpinner > span:last-of-type {  position:fixed; top:50%; left:50%; transform:translate(-50%, calc(-50% + 3.125rem)); font-weight: 700; color: var(--color-gy1);} 

/* 아이디/패스워드 찾기 */
#FindResultForm {max-width: 38rem; margin: 5rem auto 5rem; padding: 1rem 0; /*padding: 2rem 2.85rem 1.5rem 2.85rem; */ border: 2px solid var(--color-primary-1); border-radius: 1.25rem;}
#FindResultForm fieldset {display: flex; flex-direction: column; align-items: center; padding: 1.5rem 3rem;}
#FindResultForm fieldset .btnWrap {display: flex; flex-direction: column; gap: 0.625rem; width: 100%; }
#FindResultForm fieldset .btnWrap > input {width: 100%; font-size: 1.125rem; font-weight: 500; padding: 1.1875rem 1.875rem; border: none; border: 1px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; outline: none; color: #121212; transition: 0.3s;}
#FindResultForm fieldset .btnWrap > button[type="submit"]  { width: 100%; font-size: 1.125rem; font-weight: 500; padding: 1.1875rem 1.875rem; border: none; border: 1px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; outline: none; color: #121212; transition: 0.3s; background: var(--color-primary-1); color: var(--color-white); font-weight: 600; border-color: transparent}
#FindResultForm fieldset .btnWrap > button[type="submit"]:hover {background: var(--color-primary-1-li);}

.memberList { display: flex; flex-direction: column; width: 100%; margin-bottom: 1.1875rem; border-top:  3px solid var(--color-bl1);}
.memberList .row {display: flex; flex-direction: column;  padding: 1.1875rem 0.5rem; border-bottom: 1px solid var(--color-line-w); gap: 1rem;}
.memberList .row > div { display: flex; }
.memberList .row > div > strong {width: 4.5rem; font-weight: 600; color: var(--color-gy2); font-size: 0.9375rem;}
.memberList .row > div > span { flex: 1; display: flex; flex-direction: column; gap: 0.5rem;  }
.memberList .row > div:first-of-type > span {color: var(--color-bl1); font-weight: 700; padding-left: 0.25rem;}
.memberList .row > div > span  > p { color: var(--color-primary-1); font-weight: 500; font-size: 1rem;}
.memberList .row > div > span  > p.dooted {padding-left: 0.6125rem;}

@keyframes loginSpin {
	0% {transform:translate(-50%,-50%) rotate(0deg);} 
	100% {transform:translate(-50%,-50%) rotate(360deg);}
}


@media (max-width:786px) {
	#outLogin {gap: 0.375rem;}
}
@media (max-width:550px) {
	#outLogin {margin: 4rem auto;}
	#outLogin h2 {font-size: 1.675rem;}
	#outLogin,
	#outLogin fieldset {border: 0; padding: 0;}
	#outLogin fieldset {gap: 0.5rem;}
	#outLogin fieldset > a, 
	#outLogin input,
	#pwChangeModal input[type='button'], 
	#outLogin button[type='submit'] {border-radius: 0.5rem; padding: 1rem 1.5rem; font-size: 1rem;}
	#outLogin button[type='submit'],
	#outLogin fieldset > a {height: auto; }
	#outLogin fieldset > div:first-of-type {text-align: center; justify-content: center; }
	.logininfoList {text-align: center;}
	.logininfoList h2 {font-size: 1.625rem;}
	.logininfoList h2 + span {font-size: 0.875rem;}
	.logininfoList > div > a::before, 
	.logininfoList > div > button[data-gcid="SM"]::before, 
	.logininfoList > div > button[data-gcid="SU"]::before,
	.logininfoList > div > button[data-gcid="U"]::before,
	.logininfoList > div > button[data-gcid="SM"]:hover:before, 
	.logininfoList > div > button[data-gcid="SU"]:hover::before {display: none;}
	.logininfoList > div > a, .logininfoList > div > button {font-size: 0.9375rem; padding: 0.875rem 1rem; }
	.logininfoList > button.closeLogininfoModal {padding: 0.875rem;}
}

/*********************************************
	footer
*********************************************/
.footLogoWrap { border-top: 1px solid var(--color-line-w); width: 100%; margin-top: 5rem;} 

/* 991px 이상: 그리드로 고정 */
.fLogoWrap.is-grid .swiper-wrapper{ display:grid;grid-template-columns:repeat(6,minmax(1rem,1fr)); gap:1.25rem; align-items:center;}
.fLogoWrap.is-grid .swiper-slide{width:auto}
.fLogoWrap.is-grid .swiperWrap{overflow:visible}

.fLogoWrap.is-swiper .swiper-wrapper{display:flex}
.fLogoWrap.is-swiper .swiperWrap{overflow:hidden}

.fLogoWrap.is-grid .swiper-button-prev,
.fLogoWrap.is-grid .swiper-button-next,
.fLogoWrap.is-grid .swiper-pagination{display:none}


footer { width: 100%; padding: 0.5rem 0 3.5rem 0; position: relative; z-index: 9; border-top: 1px solid var(--color-line-w); background: var(--color-bg-2) ; } 
footer > .inner > nav {display: flex; gap: 1.125rem; grid-column: 1/3; align-items: center;}
footer > .inner > nav a { color: var(--color-bl2); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; opacity: 0.5; } 
footer > .inner > nav a:first-of-type {font-weight: 600; opacity: 0.7;}
footer > .inner > strong {display: flex; justify-content: flex-end; font-weight: 700; font-size: 1.125em; color: var(--color-gy2);}
footer > .inner > strong::before {content: '\f098'; font: var(--fa-font-solid); padding-right: 0.25rem;}
footer > .inner > img { order: 2; filter: brightness(1) invert(0) grayscale(1); opacity: 0.5; grid-row: span 2; max-width: 7.25rem;}
footer > .inner > div {order: 4;  grid-row: span 2; display: flex; justify-content: flex-end; }
footer > .inner > div select {  width: 100%; height: 2.5rem; font-size: 0.875rem; padding: 0 0.875rem;  color: var(--color-gy1); border: 1px solid #e4e7e9;  border-radius: 0.25rem; }
footer > .inner > div select:focus,
footer > .inner > div select:active {outline: none;}
footer > .inner > p { line-height: 152%; }
footer > .inner > p > span[itemprop="address"]::before {content: '주소 : ';}
footer > .inner > p > span[itemprop="founder"]::before {content: '대표자 : ';}
footer > .inner > p > span[itemprop="taxID"]::before {content: '사업자등록번호  : ';}
footer > .inner > p > span[itemprop="faxNumber"]::before {content: 'FAX  : ';}
footer > .inner > p > a[itemprop="email"]::before {content: 'Email  : ';}
footer > .inner > p > span,
footer > .inner > p > a {color:var(--color-gy1); opacity: 0.7; font-weight: 400; }
footer > .inner > p:nth-of-type(2) { font-size: 0.875rem; color:var(--color-gy1); opacity: 0.6; }
footer > .inner > p > span::after {content: 'I'; opacity: 0.4; padding: 0.35rem; font-weight: 200; } 

@media (min-width:991px) {
    footer > .inner { display: grid; grid-template-columns: 9.25em 1fr 11.25rem; width: 100%;} 
    footer > .inner > nav,
    footer > .inner > strong {order: 1;  padding: 1.5rem 0; border-bottom: 1px solid #e4e7e9; }
    footer > .inner > div,
    footer > .inner > img,
    footer > .inner > p:nth-of-type(1) {padding-top: 1.5rem;}
    footer > .inner > p:nth-of-type(1) {order:3; } 
    footer > .inner > p:nth-of-type(2) {order:5; font-size: 0.875rem; }
    footer > .inner > nav a:hover {opacity: 1;}
    footer > .inner > p > span[itemprop="taxID"]::after {display: none;}
}
@media (max-width:990px) {
	.footLogoWrap {margin-top: 0;}
    footer > .inner {display: flex; flex-wrap: wrap; justify-content: center; padding-top: 2.5rem;}
    footer > .inner > img {order: -3; max-width: 5rem;}
    footer > .inner > nav {width: 100%; justify-content: center; margin: 1.5rem 0;}
    footer > .inner > strong {width: 100%; justify-content: center; order: -2; padding-top: 1rem; font-size: 1.5rem;}
    footer > .inner > p {width: 100%; text-align: center;}
    footer > .inner > p:first-of-type {padding-bottom: 0.5rem;}
    footer > .inner > p > br {display: none;}
    footer > .inner > div {order: -1; padding-top:1rem}
}
@media (max-width:420px) {
    footer > .inner > img {max-width: 5rem;}
    footer > .inner > strong {font-size: 1.125rem;}
    footer > .inner > div {width: 90%;}
    footer > .inner > nav {display: flex; width: 90%;}
    footer > .inner > nav > a:last-of-type {display: none;}
}
@media (max-width:380px) {
    footer > .inner > nav {gap: 0.875rem; }
    footer > .inner > nav  a {font-size: 0.875rem;}
    footer > .inner > p:first-of-type {padding-bottom: 0.5rem; font-size:0.8125rem ;}
    footer > .inner > p:nth-of-type(2) {font-size:0.8125rem ;}
}

/*********************************************
	form
*********************************************/
.formContainer { border-bottom: 1px solid var(--color-line-w); display: grid; grid-template-columns: 12.5rem 1fr; padding: 3rem 0;}
.bt3,
.formContainer.bt3 { border-top: 0.1875rem solid var(--color-bl1); }
.formContainer h3 {font-size: 1.25rem; font-weight: 700; line-height: 160%; padding-top: 0.875rem; letter-spacing: -0.05em;}
.formContainer h4 {font-size: 1.25rem; font-weight: 700; line-height: 160%; letter-spacing: -0.05em;}
.formRow {display: flex; line-height: 1.5rem; letter-spacing: -0.025em; padding: 1.125rem 0; border-bottom: 1px solid var(--color-line-w);}

.formRow.pt0 {padding-top: 0;}

.formRow > span:first-of-type {width: 8.5rem; letter-spacing: -0.025em; font-weight: 400; color: var(--color-bl2); padding: 0.25rem 0;}
.essen .formRow > span:first-of-type::after { content: '*';  color: #ff6600; padding-left:0.25rem;}

.formRow > .formGrup {padding-left: 2.5rem; flex: 1; flex-wrap: wrap; display: flex;}
.formRow > .formGrup > strong {font-weight: 700; color: var(--color-bl1); padding: 0.25rem 0;}
.formRow > .formGrup > input[type="number"],
.formRow > .formGrup > input[type="text"],
.formRow > .formGrup > input[type="password"] {font-weight: 700; color: var(--color-primary-1); display: flex; align-items: center; padding: 0.25rem 0;}
.formRow > .formGrup > input[type="text"],
.formRow > .formGrup > input[type="password"] { width: 100%; border-bottom: 1px solid transparent;}
.formRow > .formGrup > input.error {color: var(--color-red); border-color: var(--color-red);}
.formRow.call > .formGrup {align-items: center;}
.formRow.call > .formGrup > input {width: 3.75rem;}
.formRow.call > .formGrup > .dash {padding: 0 0.875rem;}
.formRow.call > .formGrup > .dash::before {display: none;}
.formRow > .formGrup > input[type=number]::placeholder,
.formRow > .formGrup > input[type=text]::placeholder,
.formRow > .formGrup > input[type=password]::placeholder {font-weight: 400; color: var(--color-gy1); font-size: 0.875rem;} 
.formRow > .formGrup > input[type=number].error::placeholder,
.formRow > .formGrup > input[type=text].error::placeholder,
.formRow > .formGrup > input[type=password].error::placeholder { color: var(--color-red); } 
.formRow > .formGrup .desc {font-size: 0.875rem; color: var(--color-gy2);}
.formRow > .formGrup .desc.error-message {color: var(--color-red);}
.formRow > .formGrup .desc.success-message {color: var(--color-green);}
.formRow > .formGrup textarea {width: calc(100% - 2px); min-height: 26rem; }
.formGrup.rowCol-2-select input[type="text"]{flex: 1;}
.formGrup.rowCol-2-select select {position: relative; padding: 0 1rem; font-size: 0.875rem; min-width: 6.875rem;}

.formRow.fcArea {background: var(--color-bg-1); padding: 1rem; border-bottom:0; }
.formRow.fcArea > button {font-weight: 800;}

.formRow.file .formGrup {flex-direction: column; gap:0.5rem;}

.formRow.file .formGrup > div > label {padding: 0.25rem 0;}
.formRow.file .formGrup > div > input[type="file"] ~ label > input[type="checkbox"] {display: none;}
.formRow.file .formGrup > div > input[type="file"] ~ label > span {display: flex; align-items: center; align-content: center;color: var(--color-gy1); flex-wrap: wrap;  width: 100%;}
.formRow.file .formGrup > div > input[type="file"] ~ label > span::before {content: '\f2ed'; font: var(--fa-font-solid); color: var(--color-gy1); padding-right: 0.3125rem; font-size: 0.75rem;}

.formRow.file .formGrup > div > input[type="file"] ~ label > input[type="checkbox"]:checked ~ span,
.formRow.file .formGrup > div > input[type="file"] ~ label > input[type="checkbox"]:checked ~ span::before {color: var(--color-primary-1);} 
.formRow.file .formGrup > div > input[type="file"] ~ label > input[type="checkbox"]:checked ~ span::after {content: '(삭제 파일 선택)'; padding-left: 0.3125rem;}

.formRow > .formGrup input[type=file] {font-size: 0.875rem; border: 1px solid #ccc; padding: 0.5rem; border-radius: 0.5em; width: 100%;}
.formRow > .formGrup .desc b {font-weight: 600; color: var(--color-primary-1);}
.formRow > .formGrup > input[type=number]:focus,
.formRow > .formGrup > input[type=text]:not([name=mdAddress1]):focus ,
.formRow > .formGrup > input[type=password]:focus,
.formRow > .formGrup > input[type=number]:active,
.formRow > .formGrup > input[type=text]:not([name=mdAddress1]):active ,
.formRow > .formGrup > input[type=password]:active,
.formRow > .formGrup > input[type=number]:hover,
.formRow > .formGrup > input[type=text]:not([name=mdAddress1]):hover ,
.formRow > .formGrup > input[type=password]:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);}

.formRow > .formGrup.address {display: flex; flex-direction: column; gap: 1rem;}
.formRow > .formGrup.address input[type="text"] {font-weight: 700; color: var(--color-bl1); display: flex; align-items: center; padding: 0.375rem 0; border-bottom: 1px solid var(--color-line-w); flex: 1;}
.formRow > .formGrup.address input[type="text"]::placeholder {font-weight: 400; color: var(--color-gy1); font-size: 0.875rem;} 
.formRow > .formGrup.address > div {width: 100%; max-width: 20rem; display: flex;}
.formRow > .formGrup.address > div:first-of-type { gap: 1rem; }
.formRow > .formGrup.address > div:first-of-type > button { background: var(--color-primary-1-dk); color: var(--color-white); display: flex; align-items: center; justify-content: center; padding: 0.1875rem 1rem; font-size: 0.9375rem ; border-radius: 0.25rem; gap: 0.375rem; transition: 0.3s; }
.formRow > .formGrup.address > div:first-of-type > button i {font-size: 0.875rem;}

.formContainer.agreement  {align-items: center;}
.formContainer.agreement > h3 {padding-top: 0; }
.formContainer.agreement .formCon {display: flex;}
.formContainer.agreement .formCon > p {flex: 1; font-weight: 700; color: var(--color-bl1); line-height: 134%;}
.formContainer.agreement .formCon > div {display: flex; gap: 0.875rem;}
.formContainer.agreement .formCon label {cursor: pointer; display: flex; align-items: center; gap: 0.25rem;}
.formContainer.agreement .formCon label input[type=radio] {border-color: var(--color-line-w);}
.formContainer.agreement .formCon label input:checked + span {color: var(--color-primary-1); font-weight: 600;}
.formRow.address > .formGrup {gap:0.625rem 0.375rem}
.formRow.address > .formGrup > input:nth-of-type(1) {width: 5rem;}
.formRow.address > .formGrup > button {background: var(--color-main1); color: var(--color-white); border-radius: 0.25rem; font-size: 0.875rem; padding-left:1rem; padding-right: 1rem;}
.formRow.address > .formGrup > button:hover {opacity: 0.8;}
.payment .btnWrap,
.formStyle .btnWrap {display: flex; justify-content: center; gap:0.25rem;  padding: 2.125rem 0; } 
.payment .btnWrap > a,
.formStyle .btnWrap > a,
.payment .btnWrap > button,
.formStyle .btnWrap > button {all:unset; cursor: pointer; font-size: 1rem;  padding: 0.875rem 2.5rem ; border:1px solid var(--color-line-w);border-radius: 0.5rem; font-weight: 500; transition: 0.3s;}
.payment .btnWrap > a:hover,
.formStyle .btnWrap > a:hover,
.payment .btnWrap > button:hover,
.formStyle .btnWrap > button:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);}
.payment .btnWrap > button[ type="submit"],
.formStyle .btnWrap > button[ type="submit"] {background: var(--color-primary-1); color: var(--color-white); border-color: transparent;}
.payment .btnWrap > button[ type="submit"]:hover,
.formStyle .btnWrap > button[ type="submit"]:hover {background: var(--color-primary-1-hover);}

.agreeWrap {display: flex; flex-direction: column; gap: 0.375rem; padding-bottom: 1.25rem;}
.agreeRow {display: flex; gap:0.5rem;}
.agreeRow label {cursor: pointer; flex: 1;line-height: 160%;}
.agreeRow.all label {margin-bottom: 0.25rem;}
.agreeRow label span {color: var(--color-bl1);}
.agreeRow:not(.all) label > span::before {content: '(선택)'; padding-right: 0.25rem;}
.agreeRow.essen:not(.all) label > span::before {content: '(필수)';}
.agreeRow.all label > span {font-weight: 700; font-size: 1.125rem;}
.agreeRow label > span {font-size: 1rem; color: var(--color-bl1);}
.agreeRow .callMOdalBtn {border: 1px solid var(--color-line-w); font-size: 0.8125rem; padding: 0.25rem 0.875rem; color: var(--color-gy1); font-weight: 500; letter-spacing: -0.05em; border-radius: 0.1875rem; transition: 0.3s; }
.agreeRow .callMOdalBtn:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);}
.agreeRow label.error span {color: var(--color-red);}
.agreeRow label span.error-message {color: var(--color-red);}

@media (max-width: 1280px) {
    .formContainer {grid-template-columns: 1fr 3fr;}
    .formContainer h3 {font-size: 1.125rem;}
}

@media (max-width: 990px) { 
	.formContainer {display: flex; flex-direction: column;}
    .formContainer h3 {font-size: 1.125rem; padding-bottom: 1rem;}
    .subLayout main.join .formContainer h4 {font-size: 1.25rem;}
    .subLayout main.join section {max-width: auto; padding: 0; border: 0; border-radius: 0;}
	.subLayout .paymentTable {gap: 0.5rem;}	
	.subLayout .paymentTable .row.th, 
	.subLayout .payment .row.th {display: none;}
	.subLayout .paymentTable .row.td {border: 1px solid var(--color-line-w); flex-wrap: wrap; padding: 1.5rem 1.25rem; border-radius: 0.5rem;}
	.subLayout .paymentTable .row.tf {padding-top: 0.5rem;}
}

@media (max-width: 786px) { 
	.formStyle,
	.formStyle > fieldset {width: 100%;}
    .formContainer {display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0; border-bottom: 0;}
    .formContainer:first-of-type {padding-top: 2.5rem;}
    .formContainer.essen h4 {color:  var(--color-primary-1);}
    .formRow {flex-direction: column; padding: 0.875rem 0 0 0; border-bottom: 0;}
    .formRow > .formGrup {padding-left: 0; width: 100%;}
    .formRow > span:first-of-type {padding: 0; width: 100%; font-size: 0.875rem; font-weight: 500; color: var(--color-gy2);}
    .formRow.address > .formGrup {gap: 0.375rem;}
    .formRow > .formGrup .desc {padding-bottom: 0.875rem ;}
    .formRow > .formGrup > input[type="number"], 
    .formRow > .formGrup > input[type="text"], 
    .formRow > .formGrup > input[type="password"],
    .formRow > .formGrup > input {border-bottom: 1px solid var(--color-line-w); padding: 0.5rem 0; }
    .formRow.address > .formGrup > input:nth-of-type(1) {width:calc(100% - 6.25rem - 0.375rem); }
    .formRow.call > .formGrup > input {width: calc(100% / 3 - 1rem); text-align: center;}
    .formRow.call > .formGrup > .dash {padding: 0; width: 1.5rem; text-align: center;}
    .formRow.address > .formGrup > button {padding-left: 0; padding-right: 0; width: 6.25rem;}
    .formContainer.agreement { align-items: flex-start; border-bottom: 1px solid var(--color-line-w); }
    .formContainer.agreement .formCon { flex-direction: column; width: 100%; }
    .formContainer.agreement .formCon > p {font-weight: 500; color: var(--color-gy1);}
    .formContainer.agreement .formCon > div {width: 100%; justify-content: flex-end; padding-top: 0.5rem;}
    .formRow > .formGrup > input[type=number]::placeholder,
    .formRow > .formGrup > input[type=text]::placeholder,
    .formRow > .formGrup > input[type=password]::placeholder {font-weight: 500; color: #9ec9f5; font-size: 1rem;}
    .subLayout main.join .formStyle .btnWrap > button[type="submit"] {max-width: 100%;}
	.formGrup.rowCol-2-select {gap:0.5rem;}
	.formGrup.rowCol-2-select select {min-width: 4rem; padding-left: 0; background-position: 100% 50%;}
	.formStyle .btnWrap a, 
	.formStyle .btnWrap button {flex: 1; text-align: center;}
	.agreeRow label {gap: 0.375rem;}
	.agreeRow label > span {font-size: 0.875rem;}
}

/* 에러처리 */
.inputContainer { position: relative; float: left; }
.formError { position: absolute; top: 300px; left: 300px; display: block; z-index: 115000; cursor: pointer; }
.ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none }
.formError .formErrorContent { left:-50px; width: 100%; background: #304D8B; position:relative; z-index:115001; color: #fff; width: 190px; font-family: tahoma; font-size: 11px; border: 2px solid var(--color-line-w); box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; padding: 4px 10px 4px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.greenPopup .formErrorContent { background: #33be40; }
.blackPopup .formErrorContent { background: #393939; color: #FFF; }
.formError .formErrorArrow { width: 15px; margin: -2px 0 0 150px; position:relative; z-index: 115006; display:none;}
.formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0px 0 0 12px; top:2px; }
.formError .formErrorArrow div { border-left: 2px solid var(--color-line-w); border-right: 2px solid var(--color-line-w); box-shadow: 0 2px 3px #444; -moz-box-shadow: 0 2px 3px #444; -webkit-box-shadow: 0 2px 3px #444; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.greenPopup .formErrorArrow div { background: #33be40; }
.blackPopup .formErrorArrow div { background: #393939; color: #FFF; }
.formError .formErrorArrow .line10 { width: 15px; border: none; }
.formError .formErrorArrow .line9 { width: 13px; border: none; }
.formError .formErrorArrow .line8 { width: 11px; }
.formError .formErrorArrow .line7 { width: 9px; }
.formError .formErrorArrow .line6 { width: 7px; }
.formError .formErrorArrow .line5 { width: 5px; }
.formError .formErrorArrow .line4 { width: 3px; }
.formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid var(--color-line-w); border-right: 2px solid var(--color-line-w); border-bottom: 0 solid var(--color-line-w); }
.formError .formErrorArrow .line2 { width: 3px; border: none; background: var(--color-line-w); }
.formError .formErrorArrow .line1 { width: 1px; border: none; background: var(--color-line-w); }

/* //에러처리*/

@media (min-width:991px) {

	.login {position: relative;}
	.mobile-dropdown ul {display: none;}
	.isMobile .mobHam,
	.isTablet .mobHam { display: block; }
	.isDesktop .mobHam { display: none; }
	.active #viewMemberMenu,
	#viewMemberMenu:hover {border-color:#aaa;}
	.active #viewMemberMenu > span,
	#viewMemberMenu:hover > span {color: #121212; border-color: #ccc; background: #dce0e4;}
	.active #viewMemberMenu > i,
	#viewMemberMenu:hover > i {background: #dce0e4; }
	.active #viewMemberMenu {border-color:#ccc;}
	.active #viewMemberMenu > i::before,
	#viewMemberMenu:hover > i::before { color: #121212; }
	#viewMemberMenu:hover > em::after { color: var(--color-primary-1);}
	.active #viewMemberMenu > i::before {transform: translate(-50%, -50%) rotate(180deg);}

	.memberMenu > a:hover {color:var(--color-primary-1); }
	#navMenu > li.mobMenu {display: none;}
	#navMenu > li > a:hover { color: var(--color-primary-1); background: #f8f9fa; }
	.mega-column li a:hover { color: var(--color-primary-1); padding-left: 0.75rem; }

	.noticeClose:hover {opacity: 1;}
	.toNav a:hover { background: #e9ecef; color: var(--color-bl1); }
	.fontSizeBtn:hover { background: var(--color-primary-1); color: var(--color-white); }
	.search-btn:hover { background: var(--color-primary-1); }
	.commonModal .modalHd .closeModal:hover,
	.closeModal:hover {opacity: 1;}
	#loginModal .closeModal:hover {background: var(--color-primary-1); color: var(--color-white); border-color: transparent;}
	#outLogin fieldset > a:hover { border-color: var(--color-primary-1); color: var(--color-primary-1); font-weight: 600;}
	#outLogin button[type="submit"]:hover {background: var(--color-primary-1-hover);}
	#outLogin fieldset > div a:hover { color: #000; border-color: #5f5f5f;}
	
	.outLogin > a:nth-of-type(2):hover::before { background: transparent url('/application/views/Client/safety/Images/common/ic_join_hover.svg') no-repeat center bottom; background-size: 100%;} 
	.outLogin > a.viewLogin:hover::before { background: transparent url('/application/views/Client/safety/Images/common/ic_login_hover.svg') no-repeat center bottom; background-size: 100%;} 
	.outLogin > a:hover > span,
	.outLogin > button:hover > span {color: var(--color-primary-1);}
	.subLayout:not(.full) aside nav > ul li:not(.active):hover a {color: var(--color-primary-1);}

	.commonModal .modalBtm button:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);}
	.commonModal .modalBtm button.ok:hover {background: var(--color-primary-1-dk);}
}


/* 캘린더 설정 */
.Main .calendarSection {padding: 4rem 0;}
.subLayout .calendarSection h2::after{display: none;}
#calendar.fc .fc-toolbar.fc-header-toolbar {margin-bottom: 1rem;}
#calendar.fc .fc-button,
#calendar.fc .fc-button-group button {font-size: 0.9375rem;}
#calendar.fc .fc-button:active,
#calendar.fc .fc-button:focus,
#calendar.fc .fc-button-group button:active,
#calendar.fc .fc-button-group button:focus {outline: none; box-shadow: none;}
#calendar.fc .fc-button .fc-icon {font-size: 1rem;}
#calendar.fc-theme-standard .fc-scrollgrid {border: none;}
#calendar.fc td, 
#calendar.fc th  {border: 1px solid var(--color-line-w);}

.fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start {margin: 2px 0.3125rem; }
#calendar.fc .fc-daygrid-day-number {color: var(--color-gy1); font-size: 0.875rem; padding: 0.3125rem;}
#calendar.fc .past-date .fc-daygrid-day-number { opacity: 0.5; }
#calendar.fc a.fc-daygrid-event {cursor: pointer; transition: 0.3s;  text-align: center;}
#calendar.fc a.fc-daygrid-event:hover {opacity: 0.7;}
#calendar.fc .fc-daygrid-block-event .fc-event-time, 
#calendar.fc .fc-daygrid-block-event .fc-event-title {padding: 0.1875rem; }
#calendar .fc-h-event .fc-event-title {font-size: 0.8125rem; font-weight: 500;}
#calendar .available-date {transition: 0.3s; }
#calendar.fc .available-date:not(.fc-day-today):hover {background: transparent;}
#calendar.fc .available-date:hover .fc-daygrid-day-number {color: var(--color-primary-1);}
#calendar.fc .fc-daygrid-day-top { justify-content: center;}
.available-date { cursor: pointer; }
#calendar.fc .fc-more-popover .fc-popover-body {background: #fff;}

#calendar.fc-theme-standard th {border-bottom: none;}
#calendar.fc-theme-standard .fc-popover-header {background: #f1f1f1;}
#calendar.fc .fc-col-header-cell-cushion {padding:0.625rem 0.25rem 0.25rem 0.25rem; font-size: 0.8125rem;}
.past-date { color: #ccc; background: transparent; cursor: not-allowed; }
#calendar.fc .fc-day.sunday .fc-daygrid-day-number { color: #e74c3c; }
#calendar.fc .fc-day.saturday .fc-daygrid-day-number { color: #3498db ; }
.fc-day.sunday { background-color: rgba(255, 157, 146, 0.05) ; }
.fc-day.saturday { background-color: rgba(106, 192, 249, 0.05) ; }
#calendar.fc .fc-button-primary {background-color: var(--color-primary-1); border-color: var(--color-primary-1); opacity: 0.8;}
#calendar.fc .fc-button-primary:hover,
#calendar.fc .fc-button-primary.fc-button-active {opacity: 1;}
#calendar.fc .fc-col-header-cell.fc-day-sun { color: #e74c3c ; background-color: rgba(255, 157, 146, 0.05);}
#calendar.fc .fc-col-header-cell.fc-day-sat { color: #3498db ; background-color: rgba(106, 192, 249, 0.05);}

/* SSindustry 업종별 색상 클래스 */

#calendar .fc-event.industry-1.status-waiting .fc-event-main,
#calendar .fc-event.industry-2.status-waiting .fc-event-main,
#calendar .fc-event.industry-3.status-waiting .fc-event-main  {background-color: #f1f1f1; border-color: #f1f1f1; }
#calendar .fc-event.industry-1 {background-color: var(--product-biz1); border-color: var(--product-biz1); color: var(--color-bl2);}
#calendar .fc-event.industry-1 .fc-event-main {color: var(--color-bl2);} 
#calendar .fc-event.industry-2 {background-color:  var(--product-biz2) ; border-color:  var(--product-biz2); color: var(--color-bl2);}
#calendar .fc-event.industry-2 .fc-event-main {color: var(--color-bl2);}
#calendar .fc-event.industry-3 {background-color:  var(--product-biz3) ; border-color:  var(--product-biz3) ; color: var(--color-bl2);}
#calendar .fc-event.industry-3 .fc-event-main {color: var(--color-bl2);}
/* #calendar .fc-event.industry-4 {background-color: #f1ccf9 ; border-color: #f1ccf9 ; color: var(--color-bl2);}
#calendar .fc-event.industry-4 .fc-event-main {color: var(--color-bl2);} 
#calendar .fc-event.industry-5 {background-color: #fbd9ac ; border-color: #fbd9ac ; color: var(--color-bl2);}
#calendar .fc-event.industry-5 .fc-event-main {color: var(--color-bl2);} */
#calendar .fc-event.industry-4,
#calendar .fc-event.industry-5,
#calendar .fc-event.industry-9 {background-color:  var(--product-biz4) ; border-color:  var(--product-biz4) ; color: var(--color-bl2);}
#calendar .fc-event.industry-4 .fc-event-main,
#calendar .fc-event.industry-5 .fc-event-main,
#calendar .fc-event.industry-9 .fc-event-main { color: var(--color-bl2);} 

/* 과거 이벤트 공통 스타일 */
#calendar .fc-event.industry-1.status-ended,
#calendar .fc-event.industry-2.status-ended,
#calendar .fc-event.industry-3.status-ended,
#calendar .fc-event.industry-4.status-ended,
#calendar .fc-event.industry-5.status-ended,
#calendar .fc-event.industry-9.status-ended,
#calendar .fc-event.industry-1.status-closed,
#calendar .fc-event.industry-2.status-closed,
#calendar .fc-event.industry-3.status-closed,
#calendar .fc-event.industry-4.status-closed,
#calendar .fc-event.industry-5.status-closed,
#calendar .fc-event.industry-9.status-closed { background-color: #d5d4d4 ; border-color: #d5d4d4 ; color: var(--color-bl2); opacity: 0.7 ; }
#calendar .fc-event.industry-1.status-ended,
#calendar .fc-event.industry-2.status-ended,
#calendar .fc-event.industry-3.status-ended,
#calendar .fc-event.industry-4.status-ended,
#calendar .fc-event.industry-5.status-ended,
#calendar .fc-event.industry-9.status-ended {opacity: 0.5;}

#calendar .fc-event.industry-1.status-waiting,
#calendar .fc-event.industry-2.status-waiting,
#calendar .fc-event.industry-3.status-waiting,
#calendar .fc-event.industry-4.status-waiting,
#calendar .fc-event.industry-5.status-waiting,
#calendar .fc-event.industry-9.status-waiting { opacity: 1; }

/* .fc-event.status-ended .fc-event-title::before { content: '[종료] '; } */
.fc-event.status-waiting .fc-event-title::before { content: '[대기예약] '; }
.fc-event.status-closed .fc-event-title::before { content: '[마감] '; }

.custom-tooltip-container { position: absolute; z-index: 10000; pointer-events: none;animation: tooltipFadeIn 0.2s ease-out;}
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.custom-tooltip { background: #333; color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); overflow: hidden; min-width: 200px;  max-width: 280px; }
.tooltip-header {background: var(--color-primary-1); padding: 12px 16px; font-weight: 600; font-size: 14px; text-align: center;  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.tooltip-body { padding: 12px 16px; }
.tooltip-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.tooltip-row:last-child { margin-bottom: 0; }
.tooltip-label { color: #bbb; font-weight: 500; }
.tooltip-value { color: var(--color-white); font-weight: 600; }
.tooltip-row.status-recruiting .tooltip-value {color: #4caf50; }
.tooltip-row.status-waiting .tooltip-value {color: #ff9800;}
.tooltip-row.status-closed .tooltip-value { color: #ff6c61; }
.custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

@media (min-width:991px) {
    #calendar.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {min-height: 3.625rem;}
}
@media (max-width:991px) {
    #calendar.fc .fc-daygrid-day-number {font-size: 0.6875rem;}
	#calendar.fc .fc-toolbar.fc-header-toolbar {margin-bottom: 0.5rem;}
	#calendar.fc .fc-toolbar-title {padding: 0; font-size: 1.25rem;}
	#calendar.fc .fc-button {padding: 0.25rem 0.5rem; }
	#calendar.fc .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:first-of-type {order: 9;}
	#calendar.fc .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:last-of-type,
	#calendar.fc .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:first-of-type > button {display: none;}
	#calendar.fc .fc-button, #calendar.fc .fc-button-group button,
	#calendar.fc .fc-button .fc-icon {font-size: 0.875rem;}
}