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

* { 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: 16px;}

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;}

:root {
    --color-primary-1: #19255b;
    --hd-height : 3.75rem;
    --ic-wd : 1.625rem;
    --color-line-w : #ddd;
    --color-bl1 : #121212;
    --color-white : #fff;
    --color-gy2 : #9f9f9f;
}

#wrap {padding-top: var(--hd-height);}
header {background: var(--color-primary-1); position: fixed;width: 100%; top: 0; left: 0; z-index: 99;}
.in {max-width: 72.5rem; margin: 0 auto; }
header h1 {color: var(--color-white); display: flex; gap: 0.625rem; font-weight: 600; align-items: center; font-size: 1.125rem;}
header h1 svg {width: 4.5rem;}
header .in {display: flex;  height: var(--hd-height); align-items: center;}
header .in nav {flex: 1; color: var(--color-white); display: flex; align-items: center; justify-content: flex-end; gap: 2rem;}
header .in nav a {opacity: 0.8;}
header .in nav a:hover {opacity: 1;}

main {min-height: calc(100vh - 6.0625rem - var(--hd-height));}

.sitleTop {text-align: center; padding-bottom: 1.625rem;}
h2 { padding: 5.5rem 0 1.25rem 0; font-size: 2.125rem; font-weight: 600; color: var(--color-bl1); text-align: center;}

.custom-select-box { position: relative; display: inline-block; width: 18.5rem; font-size: 0.875rem; }
.custom-select-box .select-trigger { width: 100%; padding: 0.875rem 1rem; background-color: #fff; border: 1px solid #ddd; text-align: left;   cursor: pointer; position: relative; color: #333; appearance: none; -webkit-appearance: none; outline: none;  border-radius: 0.25rem;}
.custom-select-box .select-trigger::after { content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); border-top: 6px solid #666; /* 화살표 색상 */ border-left: 5px solid transparent; border-right: 5px solid transparent; transition: 0.3s; }
.custom-select-box .select-options { display: none; position: absolute; top: 100%;left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-top: none; z-index: 100; list-style: none; padding: 0; margin: 0; }
.custom-select-box .select-options li a { display: block; padding: 0.875rem 1rem; text-align: left; color: #666; border-bottom: 1px solid #eee; transition: 0.2s; }
.termsContents .custom-select-box .select-options li {padding-left: 0;}
.custom-select-box .select-options li:last-child a { border-bottom: none; }
.custom-select-box .select-options li a:hover { background-color: #f5f5f5; color: #000; }
.custom-select-box.active .select-options { display: block; }
.custom-select-box.active .select-trigger::after { transform: translateY(-50%) rotate(180deg); }

footer {background: #232323; margin-top: 5rem; }
footer .in {padding: 1.5rem 0 2rem 0; display: flex; flex-direction: column; gap: 0.875rem;}
footer .in nav {display: flex; gap: 1rem; justify-content: center;}
footer .in nav a {font-size: 0.875rem; color: #fff; font-weight: 500; opacity: 0.9;}
footer .in nav a:first-child {opacity: 0.6;}
footer .in nav a:last-child {opacity: 0.6;}
footer .in p {opacity: 0.5; color: #fff; font-weight: 300; font-size: 0.8125rem; text-align: center;}


#positionNav.odd {position: relative; padding-top: 0; top: 0; background: transparent; z-index: 0;}
#positionNav.odd .in {justify-content: center;}
#positionNav {position: sticky; top: var(--hd-height); background: #fff; z-index: 99; padding: 1rem 0; transition: 0.3s;} 
#positionNav.sticky {border-bottom: 1px solid #ddd; transition: all 0.3s;}
#positionNav .in {display: flex; flex-wrap: wrap; gap: 0.625rem 0.5rem; transition: 0.3s;}
#positionNav a {background: #f6f6f8; display: inline-flex; padding: 0.875rem 1.25rem ; letter-spacing: -0.025em; border-radius: 100rem; color: #5f5f5f; transition: 0.3s;}
#positionNav a.has {background: var(--color-primary-1); color: #fff;}

#common-oddTerms-btn::after {content: '이노솔루션 온라인교육센터 이용 약관';}
#innobee-oddTerms-btn::after {content: '이노비 안전보건교육센터 이용 약관';}
#direct-oddTerms-btn::after {content: '법정교육 이노 다이렉트 이용 약관';}
#aams-oddTerms-btn::after {content: 'INNO AAMS 솔루션 서비스 이용 약관';}


#common-oddPrivacy-btn::after {content: '이노솔루션 온라인교육센터 개인정보 처리방침';}
#innobee-oddPrivacy-btn::after {content: '이노비 안전보건교육센터 개인정보 처리방침';}
#aams-oddPrivacy-btn::after {content: 'INNO AAMS 솔루션 서비스 개인정보 처리방침';}


#common-terms-btn::after {content: '이노솔루션 서비스 공통 이용 약관';}
#innobee-terms-btn::after {content: '이노비 안전보건교육센터 이용 특약';}
#admin-terms-btn::after {content: '기업회원(관리자) 이용 특약';}
#direct-terms-btn::after {content: '법정교육 이노 다이렉트 이용 특약';}
#flex-terms-btn::after {content: 'FLEX 브랜드 구독형 서비스 이용 특약';}
#aams-terms-btn::after {content: 'INNO AAMS 솔루션 서비스 이용 특약';}

#positionNav.sticky .in {justify-content: center;}
#positionNav.sticky .in a {font-size: 0.9375rem; padding: 0.625rem 1.25rem;}
#positionNav.sticky #common-terms-btn::after {content: '공통 약관';}
#positionNav.sticky #innobee-terms-btn::after {content: '이노비 안전보건교육센터 특약';}
#positionNav.sticky #admin-terms-btn::after {content: '기업(관리자) 특약';}
#positionNav.sticky #direct-terms-btn::after {content: '법정교육 이노 다이렉트 특약';}
#positionNav.sticky #flex-terms-btn::after {content: 'FLEX 특약';}
#positionNav.sticky #aams-terms-btn::after {content: 'INNO AAMS 특약';}


/* 서비스 */
.termsContents {display: flex; flex-direction: column; gap: 1.25rem;}
.termsContents h3 { border-bottom: 2px solid #222; padding: 0 0 1.25rem 0; font-size: 1.375rem; font-weight: 800; color: #121212; margin-bottom: 1rem;}
.termsContents.odd section {display: none;}
.termsContents.odd section.has {display: block;}

.termsContents section  {padding: 2rem 0; }
.termsContents section > .typo1 {display: block; padding: 2rem 0 0 0; font-size: 1.375rem; font-weight: 600; color: #121212; border-top: 1px solid #ddd; margin-top: 1.375rem;}
.termsContents section > .typo1:first-of-type {border-top: 0; margin-top: 0; padding-top: 1rem;}
.termsContents section > .typo2 {display: block; padding: 1.625rem 0 0.5rem 0; font-weight: 600; color: #121212;}
.termsContents section > .typo1::before {padding-right: 0.5rem;}
.termsContents section > .typo2::before {padding-right: 0.625rem;}
.termsContents .supplementary > strong {display: block; padding: 2rem 0 0 0; font-size: 1.375rem; font-weight: 600; color: #121212; padding-bottom: 1.25rem;}
.termsContents section > .typo2 + p.class1 {padding-top: 0.25rem;}

.termsContents ul,
.termsContents ol {display: flex; flex-direction: column; padding: 0.25rem 0;}
.termsContents p {color: #343434; line-height: 165%; letter-spacing: -0.01em; font-weight: 300;}
.termsContents b {color: #121212; font-weight: 500;}
.termsContents section > ul,
.termsContents section > ol { gap: 0.5rem;}

.termsContents ul > li {position: relative; padding-left: 1rem;}
.termsContents ul > li > p::before {content: '•'; position: absolute; top: 0; left: 0;}
.termsContents ol > li { position: relative; padding-left: 1rem;}

.termsContents ol.class1 > li { padding-left: 1.25rem;}
.termsContents ol.class1 > li > p::before {position: absolute; left: 0; top: 0;}
.termsContents ol.class2 > li { padding-left: 1.25rem;}
.termsContents ol.class2 > li > p::before {position: absolute; left: 0; top: 0;}

.termsContents section > .typo1:nth-of-type(1)::before {content: '제1장';}
.termsContents section > .typo1:nth-of-type(2)::before {content: '제2장';}
.termsContents section > .typo1:nth-of-type(3)::before {content: '제3장';}
.termsContents section > .typo1:nth-of-type(4)::before {content: '제4장';}
.termsContents section > .typo1:nth-of-type(5)::before {content: '제5장';}
.termsContents section > .typo1:nth-of-type(6)::before {content: '제6장';}
.termsContents section > .typo1:nth-of-type(7)::before {content: '제7장';}
.termsContents section > .typo1:nth-of-type(8)::before {content: '제8장';}
.termsContents section > .typo1:nth-of-type(9)::before {content: '제9장';}
.termsContents section > .typo1:nth-of-type(10)::before {content: '제10장';}

#idx1 > b::before,
.termsContents section > .typo2:nth-of-type(1)::before {content: '제1조';}
#idx2 > b::before,
.termsContents section > .typo2:nth-of-type(2)::before {content: '제2조';}
#idx3 > b::before,
.termsContents section > .typo2:nth-of-type(3)::before {content: '제3조';}
#idx4 > b::before,
.termsContents section > .typo2:nth-of-type(4)::before {content: '제4조';}
#idx5 > b::before,
.termsContents section > .typo2:nth-of-type(5)::before {content: '제5조';}
#idx6 > b::before,
.termsContents section > .typo2:nth-of-type(6)::before {content: '제6조';}
#idx7 > b::before,
.termsContents section > .typo2:nth-of-type(7)::before {content: '제7조';}
#idx8 > b::before,
.termsContents section > .typo2:nth-of-type(8)::before {content: '제8조';}
#idx9 > b::before,
.termsContents section > .typo2:nth-of-type(9)::before {content: '제9조';}
#idx10 > b::before,
.termsContents section > .typo2:nth-of-type(10)::before {content: '제10조';}
#idx11 > b::before,
.termsContents section > .typo2:nth-of-type(11)::before {content: '제11조';}
#idx12 > b::before,
.termsContents section > .typo2:nth-of-type(12)::before {content: '제12조';}
#idx13 > b::before,
.termsContents section > .typo2:nth-of-type(13)::before {content: '제13조';}
#idx14 > b::before,
.termsContents section > .typo2:nth-of-type(14)::before {content: '제14조';}
.termsContents section > .typo2:nth-of-type(15)::before {content: '제15조';}
.termsContents section > .typo2:nth-of-type(16)::before {content: '제16조';}
.termsContents section > .typo2:nth-of-type(17)::before {content: '제17조';}
.termsContents section > .typo2:nth-of-type(18)::before {content: '제18조';}
.termsContents section > .typo2:nth-of-type(19)::before {content: '제19조';}
.termsContents section > .typo2:nth-of-type(20)::before {content: '제20조';}
.termsContents section > .typo2:nth-of-type(21)::before {content: '제21조';}
.termsContents section > .typo2:nth-of-type(22)::before {content: '제22조';}
.termsContents section > .typo2:nth-of-type(23)::before {content: '제23조';}
.termsContents section > .typo2:nth-of-type(24)::before {content: '제24조';}

ol.class1 > li:nth-of-type(1) > p::before {content: '1.';}
ol.class1 > li:nth-of-type(2) > p::before {content: '2.';}
ol.class1 > li:nth-of-type(3) > p::before {content: '3.';}
ol.class1 > li:nth-of-type(4) > p::before {content: '4.';}
ol.class1 > li:nth-of-type(5) > p::before {content: '5.';}
ol.class1 > li:nth-of-type(6) > p::before {content: '6.';}
ol.class1 > li:nth-of-type(7) > p::before {content: '7.';}
ol.class1 > li:nth-of-type(8) > p::before {content: '8.';}
ol.class1 > li:nth-of-type(9) > p::before {content: '9.';}
ol.class1 > li:nth-of-type(10) > p::before {content: '10.';}

ol.class2 > li:nth-of-type(1) > p::before {content: '①';}
ol.class2 > li:nth-of-type(2) > p::before {content: '②';}
ol.class2 > li:nth-of-type(3) > p::before {content: '③';}
ol.class2 > li:nth-of-type(4) > p::before {content: '④';}
ol.class2 > li:nth-of-type(5) > p::before {content: '⑤';}
ol.class2 > li:nth-of-type(6) > p::before {content: '⑥';}
ol.class2 > li:nth-of-type(7) > p::before {content: '⑦';}
ol.class2 > li:nth-of-type(8) > p::before {content: '⑧';}
ol.class2 > li:nth-of-type(9) > p::before {content: '⑨';}
ol.class2 > li:nth-of-type(10) > p::before {content: '⑩';}


#innobee-oddTerms .supplementary  {border-top: 1px solid var(--color-line-w); margin-top: 1.375rem;} 
#innobee-oddTerms .supplementary b { padding: 1rem 0 0.625rem 0; display: block;}
#innobee-oddTerms .supplementary ol li span {color: #343434; display: block; font-weight: 300; padding-top: 2px; }

/* 개인정보 */
.privacy section {padding: 0;}
.termsContents .privacyInfo {padding: 0; display: flex; flex-direction: column; gap: 0.625rem;}
#tabIdx { border: 1px solid #ddd; border-radius: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; padding: 1rem; gap: 1rem;}
.termsContents.odd #tabIdx {margin: 1rem 0; gap: 0.5rem; padding: 1rem 2rem;}
.termsContents.odd #tabIdx a {padding: 0;}
.termsContents section article {padding: 1rem 0;}
.termsContents.odd section article > b  {font-size: 1.25rem; display: block; line-height: 138%; padding-bottom: 0.25rem;}
.termsContents.odd section article span {color: #343434; line-height: 135%;font-weight: 500; padding-top: 0.25rem; display: block;}
.termsContents.odd section article p + div {color: #343434; font-weight: 300; line-height: 168%;}
.privacyInfo nav > a,
article .hd {display: flex; gap: 0.625rem; align-items: center; padding-bottom: 0.625rem; width: 100%;}
article .hd b {font-size: 1.25rem; flex: 1; line-height: 138%;}
article .hd b::before {padding-right: 0.625rem;}
.bulIc {display: inline-flex; align-items: center; width: var(--ic-wd); height: var(--ic-wd); }
.bulIc.col3 {width: calc(var(--ic-wd) * 3);}
.bulIc img {width: 100%; }
.bulIc.col3 img {width: calc(100% / 3);}

.privacyTable { width: 100%; border-top: 2px solid #19255b; border-bottom: 1px solid #ddd; margin: 0.625rem; font-size: 0.9375rem; }
.privacyTable th { background: #f8f9fa; color: #333; font-weight: 600; padding: 12px; border-bottom: 1px solid #ddd; text-align: center; word-break: keep-all; }
.privacyTable td { padding: 12px; border-bottom: 1px solid #ddd; color: #555; line-height: 1.5; vertical-align: middle; text-align: center;}

.privacyTable td ul li { padding-left: 0; margin-bottom: 4px; }
.danggu { color: #666; font-size: 0.875rem; background: #f4f4f4; padding: 1rem; border-radius: 0.5rem; margin-bottom: 0.625rem; }
.danggu > p {padding-left: 1rem; position: relative;}
.danggu > p::before {content: '※'; position: absolute; top:0; left: 0;}

.privacyTable .alLeft {text-align: left;}

/* 모바일 대응 */
@media (max-width: 1260px ){
    .in {width: calc(100% - 3rem);}
    h2 {padding:4rem 0 1.5rem 0;}
    #positionNav .in {justify-content: center;}
    #positionNav.sticky #common-terms-btn::after,
    #common-terms-btn::after {content: '공통 약관';}
    #positionNav.sticky #innobee-terms-btn::after,
    #innobee-terms-btn::after {content: '이노비 특약';}
    #positionNav.sticky #admin-terms-btn::after,
    #admin-terms-btn::after {content: '기업 관리자 특약';}
    #positionNav.sticky #direct-terms-btn::after,
    #direct-terms-btn::after {content: '법이다 특약';}
    #positionNav.sticky #flex-terms-btn::after,
    #flex-terms-btn::after {content: 'FLEX 특약';}
    #positionNav.sticky #aams-terms-btn::after,
    #aams-terms-btn::after {content: 'AAMS 특약';}
}

@media (max-width: 768px) { 
    header h1 > span {display: none;}
    header .in nav {gap: 1rem; font-size: 0.9375rem; }
    .privacyTable { display: block; overflow-x: auto; white-space: nowrap; }
    .privacyTable th, .privacyTable td { white-space: normal; min-width: 120px; }
}


@media (max-width: 380px ){
    :root {font-size: 15px;}
    h2 { font-size: 2rem;} 
    .termsContents section > .typo1 {font-size: 1.25rem; padding-top: 1.25rem;}
    .termsContents section > .typo2 {padding-top: 1rem;}
    .termsContents p {line-height: 148%;}
    .termsContents ol.class2 > li,
    .termsContents ol.class1 > li{ padding-left: 1rem;}
    .termsContents ul > li {padding-left: 0.625rem;}
}



/*board*/
.boardTop { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
form[name="boardSearch"] fieldset {display: flex; border: 1px solid var(--color-line-w); padding: 0.625rem 1.5rem; border-radius: 0.5rem;  gap:0.5rem;}
form[name="boardSearch"] select {background-position: 100% 50%; padding: 0.25rem 2rem 0.25rem 0.25rem; font-size:0.875rem ; color: var(--color-gy1); font-weight: 500;}
form[name="boardSearch"] input{ padding-left: 0.875rem; width: 12rem;  font-size:0.875rem ; border-left: 1px solid var(--color-line-w);}
form[name="boardSearch"] select:active,
form[name="boardSearch"] select:focus {outline: none;} 
form[name="boardSearch"] input:active,
form[name="boardSearch"] input:focus {color: var(--color-primary-1);}
form[name="boardSearch"] button[type="submit"] {font-size: 0.875rem;}
form[name="boardSearch"] button[type="submit"]:hover {color: var(--color-primary-1);}

.subLayout main .boardTop h2 { flex: 1; margin-bottom: 0; padding-bottom: 0;}
.boardList {display: flex; flex-direction: column;}
.boardRow.noList,
.boardList > a.boardRow:first-of-type {border-top: 3px solid var(--color-bl1);}
.boardRow {display: flex; border-bottom: 1px solid #ddd; padding: 2rem 1rem; align-content: center; align-items: center; gap:0.5rem; }
.boardRow.noList {justify-content: center; color: var(--color-gy1); font-weight: 500;}
.boardNotice.boardRow {padding: 1.6875rem 1rem; transition: 0.3s;}
.boardNotice.boardRow .li-tit .li-tit-inner::before {content: '공지';  display: inline-flex; justify-content: center; background: var(--color-primary-1); color: var(--color-white); border-radius: 100rem; padding: 0.4375rem 1rem; font-size: 0.875rem; margin-right: 0.5rem;}

.boardRow[data-sec="Y"] .li-tit::before {content: '\f023'; font:var(--fa-font-solid);  opacity: 0.8; margin-right: 0.5rem; font-size: 1rem; }
.boardRow[data-reply="Y"] .li-tit {padding-left: 1.25rem;}
.boardRow[data-reply="Y"] .li-tit::before {content: '\f148'; font:var(--fa-font-solid); transform: rotate(90deg); opacity: 0.8; margin-right: 0.675rem; font-size: 1rem; }

.li-tit { min-width: 0; flex: 1; font-weight: 700; display: flex; align-items: center;  display: flex; font-size: 1.125rem; color: var(--color-bl1); letter-spacing: -0.025em;}
.li-tit-inner {  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%;  } 
.li-writer,
.li-date {width: 4.5rem; display: flex ;  align-items: center; justify-content: center; color: var(--color-gy2); font-weight: 500;}
.li-date {width: 6.5rem; }

.boardBtm {display: flex; width: 100%; flex-wrap: wrap; padding-top: 1rem;}
.boardList .boardBtm .boardBtnWrap {display: flex; width: 100%; justify-content: flex-end;}
.boardView {padding-bottom: 5rem;}
.boardView .boardBtm {justify-content: center; align-items: center;}
.goListBtn { color: var(--color-bl2); display: flex; justify-content: center; align-items: center; width: 100%; max-width: 11rem; gap:0.5rem; height: 3.1875rem; border-radius: 0.5rem;; font-weight: 500; border: 1px solid #ccc; font-weight: 600; }
.writeBtn { background: var(--color-primary-1); color: var(--color-white); padding: 0.625rem 1.25rem 0.625rem 1rem; border-radius: 0.5rem;; font-weight: 500; }
.writeBtn::before {content: '\f303'; font: var(--fa-font-solid); padding-right: 0.375rem; font-size: 0.875rem;  }
.goListBtn::before { content: '\f0c9';  font: var(--fa-font-solid); font-size: 0.875rem;  }
.boardPager {display: flex; justify-content: center ; font-size: 0; padding: 1rem 0; gap:0.25rem; width: 100%;} 
.boardPager > a,
.boardPager > span > a::before {display: flex; justify-content: center; align-content: center; align-items: center; width: 2.85rem; height: 2.85rem; border-radius: 50%; font-size: 0.875rem; color: var(--color-gy2); transition: 0.3s;}
.boardPager > span > a {display: flex;}
.boardPager > a {font-size: 1rem; color: var(--color-gy2); position: relative;} 
.next > a::before { content: '\f105'; font: var(--fa-font-solid) ; }
.nextEnd > a::before { content: '\f101'; font: var(--fa-font-solid);}
.prev > a::before {content: '\f104'; font: var(--fa-font-solid) ;}
.prevEnd > a::before { content: '\f100'; font: var(--fa-font-solid);}

.boardPager > a > strong {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary-1); color: var(--color-white); display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 1rem; }

.boardWrite form[name="boardForm"] fieldset{ display: flex; width: 100%; border-top: 2px solid var(--color-bl1);}
.boardWrite form[name="boardForm"] fieldset .formCon {width: 100%;}
.Board.Write .formCon {border-top: 0.1875rem solid var(--color-bl1);}
.Board.Write .formRow > .formGrup {padding-left: 0;}

/*view*/
.boardViewTop {display: flex; align-items: flex-start; flex-direction: column; position: relative; padding: 1rem 0 2rem 0; border-bottom: 3px solid var(--color-bl1);}
.boardViewTop > span { display:inline-flex;  font-size: 1rem; background: var(--color-primary-1); color: var(--color-white); padding: 0.5rem 1rem; border-radius: 100rem;}
.boardViewTop > div {display: flex; width: 100%; gap: 0 0.5rem;}
.boardViewTop > div > p {font-size: 1rem; flex: 1; display: flex; align-items: center; color: var(--color-gy2);}
.boardViewTop > div > p > span {color: var(--color-gy2);}
.infoWriter {display: inline-flex; align-items: center;}
.infoWriter::after {content: ''; display: inline-block; padding: 0; margin: 0 0.5rem; width: 1px; height: 0.625rem; background: #ddd; font-weight: 100; }

.subLayout main .boardViewTop > h2 {padding-top: 1.625rem; margin-bottom: 0; }
.boardCon {border-bottom: 1px solid #ddd; padding: 2rem 0 3rem 0; width: 100%;}
.boardCon > iframe {min-height: 30vh;}
.boardFile {display: flex; flex-direction: column; gap:0.5rem; align-items: flex-start; }
.boardFile > a {border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.625rem 1.25rem; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--color-gy1); font-size: 0.9375rem; font-weight: 500;}
.boardFile > a::before {content: ''; display: inline-block; width: 1.25rem; height: 1.25rem; background-size: 100%;  background: url('../Images/common/ic_download.svg') no-repeat center center; }

#mobEditBtn {display: none; width: 2rem; height: 2rem; border-radius: 50%;  background: #eff0f2; color: var(--color-bl1); font-weight: 500; transition: 0.3s;  justify-content: center; align-content: center; align-items: center;}
#mobEditBtn i {color: var(--color-gy1); font-size: 0.8125rem; }
.boardModiBtn div:first-of-type {display: flex; gap: 0.25rem}
.boardModiBtn div:first-of-type > a,
.boardModiBtn div:first-of-type > button {all: unset; cursor: pointer; display: flex; width: 5rem; height: 2rem;  justify-content: center; align-content: center; align-items: center; border-radius: 0.25rem; font-size: 0.875rem; border: transparent; background: #eff0f2; color: var(--color-bl1); font-weight: 500; transition: 0.3s;}
.boardModiBtn div:first-of-type > a.deletBtn {background: #ffe6dc; color: var(--color-red);}
.boardModiBtn div:first-of-type > a:hover,
.boardModiBtn div:first-of-type > button:hover {opacity: 0.75;}
.isMobile .boardModiBtn div:first-of-type > a,
.isMobile .boardModiBtn div:first-of-type > button {display: none;}
.isMobile .boardModiBtn #mobEditBtn {display: flex; }
.boardModiBtn.active {position: relative;}
.boardModiBtn.active div:first-of-type,
.boardModiBtn.active div:first-of-type, 
.isMobile .boardModiBtn.active div:first-of-type,
.isMobile .boardModiBtn.active div:first-of-type { position: absolute; display: flex; flex-direction: column; background: var(--color-white); border-radius: 0.625rem ; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); top: 2.25rem; right: 0;  min-width: 5rem; padding: 0.25rem; overflow: hidden;  opacity: 1; visibility: visible; transition: all 0.4s ease; gap: 0.25rem;}
.boardModiBtn.active div:first-of-type > a,
.boardModiBtn.active div:first-of-type > button, 
.isMobile .boardModiBtn.active div:first-of-type > a,
.isMobile .boardModiBtn.active div:first-of-type > button {display: flex;}
.boardModiBtn.active div:first-of-type > a.deletBtn {order: 5;}

.boardFrame {width: 100%;  border: 0; background: var(--color-white);}
.iframeContent {border: 0; margin:0; padding: 0;
    --color-primary-1: #216af1;
    --color-primary-1-li: #007bff;
    --color-primary-1-dk: #2F5BC1;
    --color-primary-1-hover: #1954c0;
	--color-main1 : #19255B;
	--color-white: #fff;
	--color-bl1 : #111;
	--color-bl2 : #3f3f3f;
	--color-gy1 : #5f5f5f;
	--color-gy2 : #9f9f9f;
	--color-gy3 : #ababab;
}
.iframeContent * { max-width: 100% !important; box-sizing: border-box !important; }
.iframeContent body { overflow-x: hidden; margin: 15px; padding: 0; font-size: 1rem; line-height: 1.6; 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; }
.iframeContent div,
.iframeContent span {color:  var(--color-gy1); }
.iframeContent p { margin: 0.25rem 0; word-break: keep-all; line-height: 168%; color: var(--color-gy1); letter-spacing: -0.025em;}
.iframeContent img { max-width: 100% !important; height: auto !important; }
.iframeContent table { width: 100% !important; table-layout: fixed !important; }
.iframeContent a { color: var(--color-primary-1-li); text-decoration: underline;  transition: 0.3s;}
.iframeContent strong, 
.iframeContent b { font-weight: bold; }
.iframeContent em, .iframeContent i { font-style: italic; }
.iframeContent u { text-decoration: underline; }

@media (min-width: 991px) {    
    .boardRow:hover { background: var(--color-bg-1);}
    .boardRow:hover .li-tit {color: var(--color-primary-1);}
    .boardPager > a:hover,
    .next > a:hover::before,
    .nextEnd > a:hover::before,
    .prev > a:hover::before,
    .prevEnd > a:hover::before {background: #216af14a; color: var(--color-bl2);}
    .boardFile > a:hover {color: var(--color-primary-1); background: var(--color-bg-1); border-color: #dee5f3;}
    .boardFile > a:hover::before {  display: inline-block; width: 1.25rem; height: 1.25rem; background-size: 100%; background: url('../Images/common/ic_download_hover.svg') no-repeat center center;}
    .writeBtn:hover {background: var(--color-primary-1-dk); }
    .goListBtn:hover {background: var(--color-primary-1); color: var(--color-white); border-color: transparent;}
    .iframeContent a:hover { text-decoration: none; color: var(--color-primary-1-hover); }

}

@media (max-width: 990px) {
    .boardTop {flex-direction: column; align-items: flex-start; gap: 2rem;}
    .boardRow {flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    .boardNotice.boardRow .li-tit .li-tit-inner::before { padding: 0.375rem 0.875rem; margin-right: 0.25rem;}

    .boardModiBtn div:first-of-type > a,
    .boardModiBtn div:first-of-type > button {display: none;}
    .boardModiBtn #mobEditBtn {display: flex; }
    .boardViewTop > div > p {flex-wrap: wrap;}
}
@media (max-width: 768px) {
    .boardTop {flex-direction: column; align-items: flex-start; gap: 2rem;}
    .li-date {width: auto;}
    .boardNotice.boardRow,
    .boardRow {padding: 1.25rem 0; gap: 1rem 0;}
    .li-tit {width: 100%; gap:0.375rem; font-weight: 600;}
    .li-tit-inner {white-space:wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 138%;}
    .li-writer, .li-date {font-size: 0.875rem;}
    .boardNotice.boardRow .li-tit .li-tit-inner::before {display: none;}
    .boardNotice.boardRow .li-tit {flex-direction: column; align-items: flex-start; justify-content: flex-start;}
    .boardNotice.boardRow .li-tit::before {content: '공지';  display: inline-flex; justify-content: center; background: var(--color-primary-1); color: var(--color-white); border-radius: 100rem; padding: 0.4375rem 1rem; font-size: 0.875rem; font-size:0.8125rem; padding: 0.375rem 0.875rem; line-height: 1;}    
    .boardTop { margin-bottom: 1rem;}
    form[name="boardSearch"] {width: 100%; display: block;}
    form[name="boardSearch"] fieldset {padding: 0.625rem 1rem; } 
    form[name="boardSearch"] input {width: calc(100% - 3.125rem - 1.125rem - 1.25rem); padding-right: 0; font-size: 0.9375rem;}
    form[name="boardSearch"] select {padding-right: 1.25rem; font-size: 0.9375rem;}
    .boardPager {order: -1; padding: 0.85rem 0;}
    .boardList .boardBtm .boardBtnWrap {padding-top: 1.5rem;}
    .boardView .boardBtm > .goListBtn,
    .boardList .boardBtm .boardBtnWrap > a.writeBtn {width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; height: 4rem; gap:0.625rem; }
    .goListBtn {max-width: 100%;}
    .goListBtn::before,
    .writeBtn::before {font-size: 1.125rem; padding: 0;  }
        
    .boardViewTop {padding: 1rem 0 1.125rem 0;}
    .boardViewTop > span {font-size: 0.875rem; border-radius: 0.5rem;}
    .subLayout main .boardViewTop > h2 { padding:1rem  0 0.5rem 0; }
    .boardViewTop > div > p {font-size: 0.875rem; }
    .boardFile {padding-top: 2rem;}
    .boardFile > a {font-size: 1rem; line-height: 130%; padding: 0.625rem 0.875rem; gap: 0.675rem; }
    .boardFile > a::before {width: 1rem; height: 1rem;}
}
@media (max-width: 420px) {
    .boardPager {gap:0; padding: 0.5rem 0;}
    .boardPager > a, 
    .boardPager > span > a::before {width: 1.875rem; height: 1.875rem; font-size: 0.8125rem; }
    .boardPager > a > strong {font-size: 0.8125rem;}
    .boardView .boardBtm > .goListBtn,
    .boardList .boardBtm .boardBtnWrap > a.writeBtn {font-size: 1rem; height: 3.25rem; gap:0.5rem; padding: 0; }
    .goListBtn::before,
    .writeBtn::before {font-size: 1rem;  }

    .boardList .boardBtm .boardBtnWrap {padding-top: 0;}
    .boardList .boardBtm .boardBtnWrap > a.writeBtn {height: 2.85rem;}

    .iframeContent p {margin: 0; font-size: 0.875rem;}
    .boardFile {padding-top: 1rem;}
    .boardFile > a {font-size: 0.8125rem; padding: 0.625rem 0.875rem; gap: 0.875rem; }
    .boardFile > a::before {width: 0.875rem; height: 0.875rem;}

}


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

/* (구) 이노비 개인정보 처리방침 */
#innobee-oddPrivacy .policyInfo {padding-bottom: 0.875rem; padding-top: 1rem;}
#innobee-oddPrivacy .policyInfo .mb {margin-bottom: 1rem;}

#innobee-oddPrivacy .infoTabTitle {width: 100% ; background: var(--color-bg-1); text-align: center; color: var(--color-gl1); font-weight: 600;  padding: 0.5rem 0; border: 1px solid #ddd; border-bottom: 0;}	
#innobee-oddPrivacy .infoTab {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; margin-bottom: 4rem; gap: 0;}
#innobee-oddPrivacy .infoTab li {border-right: 1px solid #ddd; padding-left: 0;}
#innobee-oddPrivacy .infoTab li:nth-of-type(1) {grid-column: 1/3 span;} 
#innobee-oddPrivacy .infoTab li:nth-of-type(1),
#innobee-oddPrivacy .infoTab li:nth-of-type(5) {border-left: 1px solid #ddd;}
#innobee-oddPrivacy .infoTab li:nth-of-type(n-5) {border-top: 1px solid #ddd;} 
#innobee-oddPrivacy .infoTab li:nth-of-type(n+5) {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}

#innobee-oddPrivacy .infoTab li a {display: flex; align-items: center; justify-content: center; text-align: center; line-height: 130%; flex-wrap: wrap; padding: 1rem; gap: 0.625rem 0;}
#innobee-oddPrivacy .infoTab li a img {max-width: 3.25rem;}
#innobee-oddPrivacy .infoTab li a span {width: 100%; }
#innobee-oddPrivacy .infoTab li a:hover {background: #f0ebf92e;}
#innobee-oddPrivacy .infoTab li a:hover  span { color: var(--color-bl1);;}
#innobee-oddPrivacy .article {padding-bottom: 2rem; letter-spacing: -0.025em;}
#innobee-oddPrivacy .article > strong,
#innobee-oddPrivacy .article > strong { font-weight: 500; color: #121212; font-size: 1.25rem; line-height 138%;; display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.875rem;}
#innobee-oddPrivacy .article > strong i { width: 1.625rem; height: 1.625rem; display: inline-flex;  } 
#innobee-oddPrivacy .article > strong i img { width: 100%;}
#innobee-oddPrivacy #policy2.article > strong i {width: 3.25rem;; }
#innobee-oddPrivacy #policy2.article > strong i img {width: 50%;}

#innobee-oddPrivacy .article .row.th {margin-top: 0.875rem;}
#innobee-oddPrivacy .article .row.th span {text-align: center; background: var(--color-bg-2); border-top: 1px solid #ddd; font-size: 0.875rem; font-weight: 600; color: var(--color-bl2); padding: 0.625rem 1rem;}
#innobee-oddPrivacy .article .row.col-4 {display: grid; grid-template-columns:1fr 1fr 1fr 1fr;}
#innobee-oddPrivacy .article .row.col-2 {display: grid; grid-template-columns:1fr 2fr;}
#innobee-oddPrivacy  #policy2.article .row.col-4 { grid-template-columns: 12rem 1fr 1fr 10rem;}
#innobee-oddPrivacy .article .row span:first-of-type {border-left: 1px solid #ddd;}
#innobee-oddPrivacy .article .row span {border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 1rem; display: flex; flex-direction: column;  font-size: 0.9375rem; gap: 0.625rem 0;}
#innobee-oddPrivacy .article .row span:first-of-type  {justify-content: center;  align-items: center; text-align: center; gap: 0.25rem;}
#innobee-oddPrivacy .article .row span:last-of-type {justify-content: center; align-items: center; text-align: center;} 
#innobee-oddPrivacy .article .row span b {font-weight: 600; color: var(--color-bl1);}
#innobee-oddPrivacy .article .row span em,
#innobee-oddPrivacy .article .row span p {line-height: 133%;}
#innobee-oddPrivacy .article .row:last-of-type {margin-bottom: 0.875rem;}

#innobee-oddPrivacy .article > p {padding-top:0.375rem; padding-bottom: 0.25rem; line-height: 148%;}
#innobee-oddPrivacy .article > p b {color: var(--color-bl1); font-weight: 700;}
#innobee-oddPrivacy .article ol li > .txt-d1.mb:last-of-type,
#innobee-oddPrivacy .article .mb {margin-bottom: 0.625em;}
#innobee-oddPrivacy .article ol li > .txt-d1:first-of-type {margin-top: 0.25rem;}
#innobee-oddPrivacy .article ol li > .txt-d1:last-of-type {margin-bottom: 0.25rem;}
#innobee-oddPrivacy .article .txt-d1 {position: relative; }
#innobee-oddPrivacy .article .dot {padding-left: 1.125rem;}
#innobee-oddPrivacy .article .dot::before {content: '•'; position: absolute; left: 0.25rem; top: 0;}

#innobee-oddPrivacy .article .txt-d1.danggu {padding-left: 1.875rem;}
#innobee-oddPrivacy .article .txt-d1.danggu::before {content: '※'; position: absolute; left: 1rem; top: 1rem;}
#innobee-oddPrivacy .article .txt-d2 {display: block; position: relative; margin-bottom: 0; }
#innobee-oddPrivacy .article .txt-d2.dash::before {top: 0;}
#innobee-oddPrivacy .article .txt-d3 {display: block; position: relative; padding-left: 2rem;}
#innobee-oddPrivacy .article .txt-d3.dash::before {top: 0; left: 1.125rem;}

#innobee-oddPrivacy .div-notice { background: #f4f4f4; padding: 1rem 1.5rem; border-radius: 0.25rem; margin-top: 0.5rem;}
#innobee-oddPrivacy .div-notice b {font-weight: 700; color: var(--color-bl1);}

#innobee-oddPrivacy .article > b {font-size: 1.125rem; font-weight: 600; color: var(--color-bl1); padding-top: 2rem; padding-bottom: 0.5rem; display: block;}
#innobee-oddPrivacy .article > b:first-of-type {padding-top: 0;} 
#innobee-oddPrivacy .article > strong  {padding-bottom: 0.25rem;}

#innobee-oddPrivacy .article > ol li {padding-left: 1.625rem; position: relative; margin: 2px 0; color: #333; font-weight: 300; line-height: 168%;}
#innobee-oddPrivacy .article:first-of-type {padding-top: 1.5rem;}
#innobee-oddPrivacy .article > ol li::before { position: absolute; left: 0.5rem; top: 0;}
#innobee-oddPrivacy .article > ol li > b {display: block; font-weight: 700; color: var(--color-bl1);}
#innobee-oddPrivacy .article > ol li > b:first-of-type {padding-top: 0.625rem;}
#innobee-oddPrivacy .article > ol li:nth-of-type(1)::before {content: '1.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(2)::before {content: '2.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(3)::before {content: '3.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(4)::before {content: '4.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(5)::before {content: '5.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(6)::before {content: '6.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(7)::before {content: '7.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(8)::before {content: '8.';}
#innobee-oddPrivacy .article > ol li:nth-of-type(9)::before {content: '9.';}

#innobee-oddPrivacy .article > ol li > .order-d2 {position: relative; padding-left: 1.25rem;}
#innobee-oddPrivacy .article > ol li > .order-d2:first-of-type {margin-top: 0.25rem;}
#innobee-oddPrivacy .article > ol li > .order-d2::before {position: absolute; left: 0rem; top: 0rem;}
#innobee-oddPrivacy .article > ol li > .order-d2:nth-of-type(1)::before {content: '①';}
#innobee-oddPrivacy .article > ol li > .order-d2:nth-of-type(2)::before {content: '②';}
#innobee-oddPrivacy .article > ol li > .order-d2:nth-of-type(3)::before {content: '③';}
#innobee-oddPrivacy .article > ol li > .order-d2:nth-of-type(4)::before {content: '④';}
#innobee-oddPrivacy .article > ol li > .order-d2:nth-of-type(5)::before {content: '⑤';}
#innobee-oddPrivacy .article > ol li > .order-d2:nth-of-type(6)::before {content: '⑥';}

#innobee-oddPrivacy .marketing .article {padding-bottom: 2rem;}
#innobee-oddPrivacy .marketing .article > b,
#innobee-oddPrivacy .refund .article > b, 
#innobee-oddPrivacy .marketing .article > b:first-of-type, 
#innobee-oddPrivacy .refund .article > b:first-of-type {padding-bottom: 0;}
#innobee-oddPrivacy .refund .article > p > span {padding-top: 0.25rem; padding-bottom: 0.25rem;}
#innobee-oddPrivacy .refund .article > p > .txt-d2.dash::before {top: 0.25rem;}
#innobee-oddPrivacy .refund .article > p  .red {color: var(--color-red);}
#innobee-oddPrivacy .refund .article > strong, 
#innobee-oddPrivacy .subLayout main  .textCon .refund .article > strong {padding-bottom: 0.5rem;}