/*Common*/ .subLayout .secTop { /*border-bottom: 0.1875rem solid var(--color-bl1);*/ margin-bottom: 1.25rem;} .subLayout h2 {position: relative; z-index: 1; font-size: 2.5rem; font-weight: 700; width: 100%; line-height: 138%; padding: 0.75rem 0; color: var(--color-bl1); } .subLayout h2::after {content: ''; width: 0.5rem; height: 0.5rem; background: var(--color-primary-1); display: inline-block; transform: translate(0, -290%); border-radius: 50%; z-index: 2; margin-left: 0.375rem; } .subLayout h3 {font-size: 1.75rem; letter-spacing: -0.025em; color: var(--color-bl2); font-weight:700; padding-bottom: 0.875rem; padding-top: 4.25rem;} .subLayout .h3Desc {padding-bottom: 1.75rem; display: flex; color: var(--color-gy2); font-size: 1rem;} .subLayout h2.bb3 {border-bottom: 3px solid var(--color-bl1);} @media (max-width:1280px) { .subLayout h3 { padding-top: 3rem;} } @media (max-width:768px) { .subLayout h3 {font-size: 1.25rem;} } /* 회원가입 */ main.join section:first-of-type {max-width: 46rem; margin: 3rem auto 0; } main.join .joinStepInfo {border: 1px solid var(--color-line-w); border-radius: 1.25rem; display: flex; justify-content: center; align-items: center; padding: 1.875rem 1rem;} main.join .joinStepInfo > div {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 2rem; position: relative; } main.join .joinStepInfo > div::before { content: ''; width: 100%; height: 1px; position: absolute; background: var(--color-line-w); bottom: 2.5rem; right: 0; transform: translateX(50%); z-index: 2;} main.join .joinStepInfo > div:last-of-type::before {display: none;} main.join .joinStepInfo > div > b {font-size: 1rem; color: var(--color-gy2);} main.join .joinStepInfo > div > strong {font-size: 1.125rem; color: var(--color-gy1); font-weight: 600; padding: 0.25rem 0;} main.join .joinStepInfo > div > span {display: flex; width: 5rem; height: 5rem; background: #F9F7FC; justify-content: center; align-items: center; border-radius: 50%; font-size: 1.5rem; color: var(--color-gy3); margin-top: 0.5rem; position: relative; z-index: 9; } main.join .joinStepInfo > div.has {opacity: 1;} main.join .joinStepInfo > div.has > b { color: var(--color-primary-1-li);} main.join .joinStepInfo > div.has > strong {color: var(--color-bl1);} main.join .joinStepInfo > div.has > span {background: var(--color-primary-1); color: var(--color-white); } .choiceWrap {display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;} .choiceWrap > label {border: 2px solid var(--color-line-w); border-radius: 0.625rem; cursor: pointer; padding-bottom: 73%; position: relative; overflow: hidden; transition: 0.3s;} .choiceWrap > input[type="radio"] {display: none;} .choiceWrap > input[type="radio"]:checked + label {border-color: var(--color-primary-1); background: var(--color-bg-1);} .choiceWrap > label > span {position: absolute; top: 1.5rem ; left: 1.25rem; font-size: 1.125rem; font-weight: 700; color: var(--color-gy1); display: flex; align-items: center; gap: 0.375rem;} .choiceWrap > label > span::before {content: '✓'; font-size: 0.875rem; color: var(--color-gy3); width: 1.125rem; height: 1.125rem; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%;} .choiceWrap > input[type="radio"]:checked + label > span::before { background: var(--color-primary-1); border-color: var(--color-primary-1); color: var(--color-white);} .choiceWrap > label > img {position: absolute; right: 1.25rem; bottom: 0; width: 70%;} .choiceWrap > button[type="submit"] {width: 100%; background: var(--color-primary-1); color: var(--color-white); border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; height: 3rem; font-weight: 600; } .choiceWrap > button[type="submit"]:disabled { cursor: not-allowed; background: #efefef; color: var(--color-gy1); font-weight: 500; } #choicUser {padding: 1rem 0 0 0; display: none;} #choicUser.has {display: flex; } #choicUser > strong {font-weight: 700; color: var(--color-primary-1); padding-bottom: 0.625rem;} #choicUser > div {display: flex; flex-wrap: wrap; } #choicUser > div > label {display: flex; height: 3rem; justify-content: center; align-items: center; border: 1px solid var(--color-line-w); width: 50%; cursor: pointer; transition: 0.3s; text-align: center; } #choicUser > div > label::before {content: '✓'; font-size: 0.875rem; width: 1.125rem; color: var(--color-gy3); height: 1.125rem; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%;} #choicUser > div > label:first-of-type {border-radius: 0.625rem 0 0 0.625rem; border-right: 0;} #choicUser > div > label:last-of-type {border-radius: 0 0.625rem 0.625rem 0;} #choicUser > div input[type="radio"] {display: none; } #choicUser > div input[type="radio"]:checked + label {background: var(--color-primary-1); color: var(--color-white); font-weight: 600;} #choicUser > div input[type="radio"]:checked + label::before { background: var(--color-white); border-color: transparent; color: var(--color-primary-1-dk);} #companySearchBtn {width: 100%; border: 1px solid var(--color-primary-1); color: var(--color-primary-1); border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; height: 0; font-weight: 600; opacity: 1; height: 3rem; transition: 0.3s; margin: 0.5rem 0; } #companySearchBtn.on{visibility: visible; } #newCorporateInfo.hidden, #newCorporateInfo, #corporateInfo, #corporateInfo.hidden {flex-direction: column; display: none;} #newCorporateInfo.visible, #corporateInfo.visible {display: flex;} #newCorporateInfo > div, #corporateInfo > div {display: flex; flex-direction: row; border-bottom: 1px solid var(--color-line-w); align-items: center; padding: 0.5rem 0;} #newCorporateInfo > div:last-of-type, #corporateInfo > div:last-of-type {border: 0;} #newCorporateInfo > div > span, #corporateInfo > div > span {width: 8rem; letter-spacing: -0.025em; font-weight: 400; color: var(--color-bl2); padding: 0.25rem 0;} #newCorporateInfo > div > div, #corporateInfo > div > div {display: flex; flex-wrap: wrap; flex: 1; gap:0.25rem 0.5rem;} #newCorporateInfo > div > div > button[type="button"], #corporateInfo > div > div > button[type="button"] {border: 1px solid var(--color-gy1); font-size: 0.875rem; font-weight: 600 ; display: block ; height: 1.875rem; width: 5rem; border-radius: 100rem; transition: 0.3s;} #newCorporateInfo > div > div > button[type="button"]:hover, #corporateInfo > div > div > button[type="button"]:hover {background: var(--color-primary-1); color: var(--color-white); border-color: var(--color-primary-1);} #newCorporateInfo > div > div > p.error-message, #corporateInfo > div > div > p.error-message { width: 100%; font-size: 0.875rem; color: var(--color-red);} #newCorporateInfo > div > div > input[type="text"], #corporateInfo > div > div > input[type="text"] {flex: 1; padding: 0.375rem 0; font-weight: 600; color: var(--color-primary-1);} #newCorporateInfo > div > div > input[type="text"]::placeholder, #corporateInfo > div > div > input[type="text"]::placeholder {font-weight: 400; color: var(--color-gy2); font-size: 0.875rem;} #newCorporateInfo > div > div > input[type="text"]:disabled, #corporateInfo > div > div > input[type="text"]:disabled {font-weight: 600; color: var(--color-primary-1);} /* #corporateInfo > div > div > input[type="text"]:disabled {background: #f1f1f1; padding-left: 1rem; padding-right: 1rem;} #corporateInfo > div > div > input[type="text"]:disabled.result {color: var(--color-bl1); padding: 0; background: transparent; padding-left: 0; padding-right: 0;}*/ #newCorporateInfo > div > div > input[type="text"]:disabled:hover, #newCorporateInfo > div > div > input[type="text"]:disabled:hover {color: var(--color-bl1);} #newCorporateInfo > div > div > input[type="text"]:focus, #newCorporateInfo > div > div > input[type="text"]:active, #newCorporateInfo > div > div > input[type="text"]:hover #corporateInfo > div > div > input[type="text"]:focus, #corporateInfo > div > div > input[type="text"]:active, #corporateInfo > div > div > input[type="text"]:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);} #returnBtn {display: none; width: 100%; background: transparent; color: var(--color-gy1); border-radius: 0.625rem;justify-content: center; align-items: center; height: 3rem; font-weight: 500; border: 1px solid var(--color-line-w); margin-bottom: 0.5rem; gap: 0.5rem;} #returnBtn.visible { display: flex; } #returnBtn i {font-size: 0.875rem;} #returnBtn:hover {border-color: var(--color-bl2); color: var(--color-bl2);} .choiceWrap > p, .choiceWrap > div, .choiceWrap > button[type="submit"] {grid-column: 1 / span 2;} #choicDesc {background: #F5F2FF ; padding: 1rem; border-radius: 0.625rem; color: #9e99b1; } #choicDesc > p {line-height: 1.4; padding-left: 0.625rem; position: relative; color: var(--color-primary-1-dk); font-weight: 500;} #choicDesc > p::before { content: '·'; position: absolute; left: 0; top: 0;} .choiceWrap > div {display: flex; flex-direction: column;} .certifiedWrap {width: 100%; text-align: center;} .certifiedBox { display: flex; flex-direction: column; width: 100%; padding: 1.5rem 0 2rem 0; gap : 0.5rem; text-align: left;} .certifiedBox > strong { color: var(--color-primary-1); font-weight: 600; font-size: 1.25rem;} .certifiedBox > span { color: var(--color-gy1); padding: 0.25rem 0 0 0;} .certifiedBox > button {width: 100%; color: var(--color-white); border-radius: 0.375rem; height: 3.25rem; display: flex; gap:0.5rem; justify-content: center; align-items: center; font-size: 1.125rem; margin: 1rem 0 0.25rem 0; transition: 0.3s;} .certifiedBox > button:hover {opacity: 0.75;} .certifiedBox.tel > button {background: #f83042 ;} .certifiedBox.tel > button::before { content: "\f3cd"; font: var(--fa-font-solid); font-size: 0.9375rem;} .certifiedBox.ipin > button {background: #6680DC; } .certifiedBox.ipin > button::before { content: "\f129"; font: var(--fa-font-solid); font-size: 0.9375rem;} .certifiedBox > em { color: #4073c9;} /* .certifiedBox:first-of-type {border-bottom: 1px solid var(--color-line-w);} */ .certifiedWrap > a { all: unset; cursor: pointer; color: var(--color-gy2); border-bottom: 2px solid #ccc; display: inline-block; margin: 2rem auto 1rem; line-height: 150%; font-weight: 600; transition: 0.3s; } .certifiedWrap > a:hover {color: var(--color-bl2); border-color: #8a8a8a; } .certifiedWrap .notice {background: var(--color-bg-1); padding: 1rem; border-radius: 0.625rem; } .certifiedWrap .notice p {text-align: left; color: var(--color-gy1); line-height: 130%; padding-top: 0.25rem; padding-bottom: 0.25rem;} main.join .fullConWrap {max-width: 46rem; margin: 2rem auto 5rem; padding: 2rem 2.85rem 1.5rem 2.85rem; border: 2px solid var(--color-primary-1); border-radius: 1.25rem;} main.join .fullConWrap h3 {display: flex; justify-content: space-between; font-size: 2rem; font-weight: 700; width: 100%; line-height: 138%; padding: 0.75rem 0; color: var(--color-bl1); margin-bottom: 0; } main.join .fullConWrap h3::after {content: ''; display: inline-flex; background: url('../Images/common/inno.svg') no-repeat center center; background-size: 100%; width: 3rem;} main.join .fullConWrap .titleDesc {padding-bottom: 2rem; line-height: 1.35; color: var(--color-bl2);} main.join .formContainer {display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0; padding-bottom: 2rem; border-bottom: 0;} main.join .formContainer h3 {font-size: 1.25rem;} main.join .formContainer.essen h3 {color: var(--color-primary-1);} main.join .formStyle .btnWrap {display: flex; flex-direction: column; justify-content: center; align-content: center; text-align: center; gap: 2.5rem;} main.join .formStyle .btnWrap > button[type="submit"] {width: 100%; max-width: 17.5rem; text-align: center; margin: 0 auto; padding: 1rem 0;} main.join .formStyle .btnWrap > button[type="submit"]:disabled {background: #ddd; color: #7f7f7f;} main.join .formStyle .btnWrap > button[type="submit"]::before {content: '회원 가입';} main.join .formStyle .btnWrap > button[type="submit"]:disabled::before {content: '필수 정보를 입력해주세요.';} main.join .formStyle .btnWrap > a { all: unset; cursor: pointer; color: var(--color-gy1); border-bottom: 2px solid #aaa; display: inline; margin: 0 auto; line-height: 150%; font-weight: 600; transition: 0.3s;} main.join .formStyle .btnWrap > a:hover {color: var(--color-bl2); border-color: #8a8a8a;} @media (max-width: 990px) { main.join .fullConWrap h3 {font-size: 1.625rem;} } @media (max-width: 786px) { .subLayout main.join > section:first-of-type h2 {margin-bottom: 0;} main.join .joinStepInfo {padding: 1.25rem;} main.join .joinStepInfo > div {flex: 1; padding: 0;} main.join .joinStepInfo > div::before {bottom: 2rem;} main.join .joinStepInfo > div > b {font-size: 0.75rem;} main.join .joinStepInfo > div > strong {font-size: 0.9375rem;} main.join .joinStepInfo > div > span {width: 4rem; height: 4rem; font-size: 1.25rem;} .certifiedBox > button {font-size: 1rem; height: 2.85rem;} .choiceWrap {display: flex; flex-direction: column;} .choiceWrap > label {padding-bottom: 28%;} .choiceWrap > label > span {top: 50%; transform: translateY(-50%);} .choiceWrap > label > img {width: 30%;} #corporateInfo {padding: 0;} #corporateInfo > div {flex-direction: column; align-items: flex-start; padding: 0.675rem 0; } #corporateInfo > div > span {padding: 0; width: 100%; font-size: 0.875rem; font-weight: 500; color: var(--color-gy2); padding-bottom: 0.5rem;} #corporateInfo > div > div {width: 100%;} #corporateInfo > div > div input[type="text"] {padding: 0.5rem 0;} #corporateInfo > div > div > input[type="text"]:disabled.result {padding: 0.5rem 0;} #corporateInfo > div > div input[type="text"]:disabled::placeholder {color: var(--color-bl2);} #corporateInfo > div > div input[type="text"]::placeholder {font-weight: 500; color: #9ec9f5; font-size: 1rem; } #newCorporateInfo {padding: 0;} #newCorporateInfo > div {flex-direction: column; align-items: flex-start; padding: 0.675rem 0; } #newCorporateInfo > div > span {padding: 0; width: 100%; font-size: 0.875rem; font-weight: 500; color: var(--color-gy2); padding-bottom: 0.5rem;} #newCorporateInfo > div > div {width: 100%;} #newCorporateInfo > div > div input[type="text"] {padding: 0.5rem 0;} #newCorporateInfo > div > div > input[type="text"]:disabled.result {padding: 0.5rem 0;} #newCorporateInfo > div > div input[type="text"]:disabled::placeholder {color: var(--color-bl2);} #newCorporateInfo > div > div input[type="text"]::placeholder {font-weight: 500; color: #9ec9f5; font-size: 1rem; } main.join .formStyle .btnWrap {padding-top: 1rem;} } @media (max-width: 410px) { main.join .joinStepInfo {padding: 1.25rem 0.875rem;} main.join .joinStepInfo > div::before {bottom: 1.5rem;} main.join .joinStepInfo > div > span {width: 3rem; height: 3rem; font-size: 1rem;} .choiceWrap > label > span {font-size: 1rem; top: 50%; transform: translateY(-50%);} .choiceWrap > label > span::before {width: 1rem; height: 1rem;} } @media (max-width: 365px) { main.join .fullConWrap h3 { font-size: 1.375rem; } #choicDesc > p {font-size: 0.875rem;} } /*board*/ .boardTop { display: flex; align-items: flex-end; 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 .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%;} .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;} .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 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;} } /****************************** MyStudy ******************************/ /* item List Style*/ .itemList {display: flex; flex-direction: column; gap: 1rem; max-width: 50rem; width: 100%; } .itemList .itemBox-studyEnd , .itemList .itemBox-payment .itemCard, .itemList .itemBox-course {border: 1px solid var(--color-line-w); display: flex; flex-wrap: wrap; padding: 1.5rem 2rem 0 2rem; border-radius: 0.5rem; box-shadow: 3px 3px 3px 0 rgb(123 119 119 / 5%);} .itemList .itemBox-course {align-items: flex-start;} .itemList .itemBox-studyEnd.noneItem, .itemList .itemBox-payment.noneItem {padding-top: 0;} .itemList .itemBox-studyEnd.noneItem, .itemList .itemBox-payment.noneItem .itemCard, .itemList .itemBox-course.noneItem {min-height: 25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor:default; padding-top: 0;} .itemList .itemBox-studyEnd.noneItem strong , .itemList .itemBox-payment.noneItem .itemCard strong, .itemList .itemBox-course.noneItem strong {font-weight: 700; padding: 0 0 0.875rem 0 ; font-size: 1.5rem;} .itemList .itemBox-payment.noneItem .itemCard strong::before {content: ''; border: 1px solid var(--color-line-w); background: var(--color-bg-1) url('/application/views/Client/safety/Images/sub/innobi_question.png') no-repeat bottom center; background-size: 100%; width: 4rem; height: 4rem; display: block; border-radius: 50%; margin:0 auto 1.5rem;} .itemList .itemBox-course.noneItem strong::before {content: ''; border: 1px solid var(--color-line-w); background: var(--color-bg-1) url('/application/views/Client/safety/Images/sub/innobi_study.png') no-repeat bottom center; background-size: 100%; width: 4rem; height: 4rem; display: block; border-radius: 50%; margin:0 auto 1.5rem;} .itemList .itemBox-studyEnd.noneItem strong::before {content: ''; border: 1px solid var(--color-line-w); background: var(--color-bg-1) url('/application/views/Client/safety/Images/sub/innobi_studyend.png') no-repeat bottom center; background-size: 100%; width: 4rem; height: 4rem; display: block; border-radius: 50%; margin:0 auto 1.5rem;} #notSelect {min-height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor:default; padding-top: 0; border: 2px dotted var(--color-line-w); border-radius: 0.625rem; margin-top: 1.5rem; background: var(--color-bg-3);} #notSelect::before {content: ''; border: 1px solid var(--color-line-w); background: var(--color-white) url('/application/views/Client/safety/Images/sub/innobi_study.png') no-repeat bottom center; background-size: 100%; width: 4rem; height: 4rem; display: block; border-radius: 50%; margin:0 auto 1.5rem;} #notSelect strong {font-weight: 700; padding: 0 0 0.875rem 0 ; font-size: 1.5rem;} #notSelect span {font-size: 1rem; letter-spacing: -0.025em; color: var(--color-gy1); padding-bottom: 1.5rem;} .itemList .itemBox-studyEnd.noneItem span, .itemList .itemBox-payment.noneItem .itemCard span, .itemList .itemBox-course.noneItem span {font-size: 1rem; letter-spacing: -0.025em; color: var(--color-gy1); padding-bottom: 1.5rem;} .itemList .itemBox-studyEnd.noneItem .goBtn, .itemList .itemBox-payment.noneItem .itemCard .goBtn, .itemList .itemBox-course.noneItem .goBtn {font-size: 0.875rem; font-weight: 500; border: 1px solid var(--color-line-w); color: var(--color-gy1); border-radius: 0.25rem; padding: 0.625rem 1.25rem;} .itemList .itemBox-studyEnd.noneItem .goBtn:hover, .itemList .itemBox-payment.noneItem .itemCard .goBtn:hover, .itemList .itemBox-course.noneItem .goBtn:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);} .stStep1 .stStep::after, .stStep2 .stStep::after {color: var(--color-gy2);} .stStep3 .stStep::after {color: var(--color-green); } .stStep4 .stStep::after, .stStep5 .stStep::after {color: var(--color-blue);} .stStep-5 .stStep::after, .stStep-1 .stStep::after {color: var(--color-red); } [data-step="1"] .step::after, .stStep1 .stStep::after {content: '인증대기'; } [data-step="2"] .step::after, .stStep2 .stStep::after {content: '수강대기'; } [data-step="3"] .step::after, .stStep3 .stStep::after {content: '수강중'; } [data-step="4"] .step::after, .stStep4 .stStep::after {content: '수료대기'; } [data-step="5"] .step::after, .stStep5 .stStep::after {content: '수료완료'; } [data-step="-5"] .step::after, .stStep-5 .stStep::after {content: '미수료'; } [data-step="-1"] .step::after, .stStep-1 .stStep::after {content: '취소상태'; } /* 수강중인 과정 */ .courseTap {display: flex; padding-bottom: 2rem; gap: 0.375rem;} .courseTap > button, .courseTap > a {all: unset; cursor: pointer; display: inline-flex; padding: 0 1.625rem; height: 2.25rem; align-items: center; border-radius: 100rem; font-size: 0.9375rem; color: var(--color-gy1); background: #e3e2e2; font-weight: 500; opacity: 0.75; transition: 0.3s;} .courseTap > button.active, .courseTap > a.active { background: var(--color-primary-1); color: var(--color-white); border-color: transparent; opacity: 1; } .itemBox-course .step, .itemBox-course .couseType {display: inline-flex; justify-content: center; align-items: center; padding: 0.375rem 1rem; border-radius: 100rem; font-size: 0.875rem; font-weight: 500; } .itemBox-course[data-type="3"] .couseType {border: 1px solid var(--data-type3); color: var(--data-type3);} .itemBox-course[data-type="1"] .couseType {border: 1px solid var(--data-type1); color: var(--data-type1);} .itemBox-course[data-type="4"] .couseType {border: 1px solid var(--data-type4); color: var(--data-type4);} .itemBox-course .step {border: 1px solid #dedfdf; color:#6b6e76; padding: 0.4375rem 1rem; gap: 0.25rem;} .itemBox-course .step::before {content: ''; display: inline-flex; width: 0.3125rem; height: 0.3125rem; background: #8f8f8f; border-radius: 50%; opacity: 0.9; } .itemBox-course[data-step="3"] .step {border-color: #98bf95; color: #14970d; background: #f3f9ef; } .itemBox-course[data-step="5"] .step {border-color: #869af3; color: #1239e7; background-color: #f4f9ff; } .itemBox-course[data-step="-1"] .step, .itemBox-course[data-step="-5"] .step {border-color: #ff9696; color: #f91414; background: #ff96961c;} .itemBox-course[data-step="3"] .step::before {background: #14970d; } .itemBox-course[data-step="5"] .step::before {background: #1239e7; } .itemBox-course[data-step="-1"] .step::before, .itemBox-course[data-step="-5"] .step::before {background: #f91414; } .itemBox-course .courseTitle {display: flex; align-items: flex-start; flex-direction: column; gap: 0.625rem; width: 100%; flex: 1;} .itemBox-course .courseTitle > strong, .itemBox-course .courseTitle > a, .itemBox-course strong {font-weight: 700; font-size: 1.675rem; padding-bottom: 0.625rem; letter-spacing: -0.025em; } .itemBox-course .courseTitle > a:hover {color: var(--color-primary-1);} .itemBox-course .cpName {font-weight: 600; letter-spacing: -0.025em; color: var(--color-primary-1);} .itemBox-course .cpName::before {content: '회사명 :'; padding-right: 0.25rem; color: var(--color-gy2);} .itemBox-course .courseProgressWrap {width: 100%; display: flex; gap:0.5rem; padding: 0.5rem 0;} .itemBox-course .courseProgressWrap::before {content: '진도율 :'; padding-right: 0.25rem;} .itemBox-course .courseProgressWrap > progress {flex: 1; background: #f1f1f1; border: 0; height: 0.25rem; border-radius: 100rem; } .itemBox-course .courseProgressWrap > progress::-webkit-progress-bar {background-color: #f1f1f1; border-radius: 100rem;} .itemBox-course .courseProgressWrap > progress::-webkit-progress-value{background-color: var(--color-primary-1); border-radius: 100rem;} .itemBox-course .btnWrap {width: 100%; display: flex; justify-content: flex-end; margin-top: 0.25rem; } .itemBox-course .btnWrap > a {background: #d3cdf1; border: 1px solid #b7b1d5; color: var(--color-primary-1-dk); display: inline-flex; padding: 0.5rem 1.25rem; border-radius: 0.25rem; font-size: 0.9375rem; gap: 0.5rem; font-weight: 500;} .itemBox-course .btnWrap > a.goLearnView {padding-left: 1rem;} .itemBox-course .courseInfo {gap: 0.5rem; color: var(--color-gy2); border-top: 1px solid var(--color-line-w); margin-top: 1rem; width: 100%; display: flex; align-items: center;} .itemBox-course .courseInfo > div:first-of-type {flex: 1; display: flex; padding: 0.875rem 0;} .itemBox-course .courseInfo > div:first-of-type span {font-size: 0.875rem; color: #9389b1; font-weight: 500; } .itemBox-course .courseInfo > div:first-of-type span::before {padding-right: 2px; font-size: 0.75rem ;} .itemBox-course .courseInfo > div:first-of-type span::after {content: 'I'; padding: 0 0.375rem; font-weight: 100; opacity: 0.4;} .itemBox-course .courseInfo > div:first-of-type span:last-of-type:after {display: none;} .itemBox-course .courseInfo .courseDate::before { content: '\f073'; font: var(--fa-font-regular);} .itemBox-course .courseInfo .csAdmitTime::before { content: '\f1da'; font: var(--fa-font-solid);} .itemBox-course .courseInfo > div:first-of-type span.couseType::before {font-size: 0.875rem;} .itemBox-course .proofWrap {padding: 0.625rem 0;} .itemBox-course .proofWrap > a, .itemBox-course .proofWrap > button, .LearnList .itemBox-course .proofWrap > .goVeiw {all: unset; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; font-size: 0.875rem; background: #ded9f7; color: #5f4db1; font-weight: 500; border-radius: 0.25rem; height: 2.125rem; padding: 0 1em; gap: 0.375rem; transition: 0.3s; } .itemBox-course .proofWrap > a:hover, .itemBox-course .proofWrap > button:hover {background: var(--color-primary-1); color: var(--color-white);} .LearnList .itemBox-course .proofWrap > .goVeiw::before {content: '\f144'; font: var(--fa-font-solid); font-size: 0.75rem;transition: 0.3s; position: relative; top: 1px; opacity: 0.9; transition: 0.3s; } .LearnList .itemBox-course .proofWrap > .goVeiw:hover {background: var(--color-primary-1-li); color: var(--color-white);} .LearnList .itemBox-course .proofWrap > .goVeiw:hover::before {color: var(--color-white);} .LearnList .itemBox-course[data-type="3"] .proofWrap > .downFile { background: #c7d5f5; color:#3659ab; font-weight:600; transition: 0.3s; } .LearnList .itemBox-course[data-type="3"] .proofWrap > .downFile::before {content: '\f019'; font: var(--fa-font-solid); font-size: 0.75rem; transition: 0.3s; position: relative; top: 1px; opacity: 0.9; transition: 0.3s; } .LearnList .itemBox-course[data-type="3"] .proofWrap > .downFile:hover {background: #4476eb; color: var(--color-white);} .LearnList .itemBox-course[data-type="3"] .proofWrap > .downFile:hover::before {color: var(--color-white);} /* 결제 내역 */ .itemBox-payment {display: flex; flex-direction: column; padding-top: 2rem;} .itemBox-payment:first-of-type {padding-top:0;} .itemBox-payment .itemTop {display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.625rem; } .itemBox-payment .itemTop > strong {font-size: 1.125rem; font-weight: 700; color: var(--color-bl1);} .itemBox-payment .itemTop > a { font-size: 0.9375rem; color: var(--color-gy2); display: flex; align-items: center; gap: 0.375rem;} .itemBox-payment .itemTop > a::after {content: '\f054'; font:var(--fa-font-solid); font-size: 0.6875rem; opacity: 0.8; position: relative; transform: translateY(-1px);} .itemBox-payment .itemTop > a:hover { color: var(--color-primary-1);} .itemBox-payment .itemCardTop {display: flex; flex-direction: column;} .itemBox-payment .itemCard .state {font-weight: 600;} .completed .state::after, .itemBox-payment.completed .itemCard .state::after { content: '결제 완료'; color: var(--color-blue);} .cancel .state::after, .itemBox-payment.cancel .itemCard .state::after { content: '취소 완료'; color: var(--color-red); } .partial .state::after, .itemBox-payment.partial .itemCard .state::after { content: '부분 취소'; color: var(--color-red); } .waiting .state::after, .itemBox-payment.waiting .itemCard .state::after { content: '입금 대기'; color: var(--color-yellow);} .itemBox-payment .itemCard .itemCardTop strong{ font-size: 1.675rem; font-weight: 700; padding: 0.625rem 0 0.875rem; letter-spacing: -0.025em; transition: 0.3s;} .itemBox-payment .itemCard .itemCardTop strong:hover {color: var(--color-primary-1);} .itemBox-payment .itemCardInfo {display: flex; align-items: flex-end; } .itemBox-payment .itemCardInfo .amount {font-size: 1.125rem; font-weight: 700;} .itemBox-payment .itemCardInfo .amount::after {content: '원'; font-size: 0.9375rem; padding-left: 0.125rem; font-weight: 400;} .itemBox-payment .itemCardInfo .size {font-size: 0.9375rem; padding-left: 0.25rem; font-weight: 400; color: var(--color-gy1);} .itemBox-payment .itemCardInfo .size::before {content: '/'; padding: 0 0.25rem ; color: #ddd;} .itemBox-payment .itemCardInfo .size::after {content: '명'; } .itemBox-payment .itemCardInfo .orderNoBtn {font-size: 0.9375rem; color: var(--color-gy2); display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500;} .itemBox-payment .itemCardInfo .orderNoBtn::before {content: '주문번호 :'; padding: 0 2px 0 0.875rem;} /* .itemBox-payment .itemCardInfo .orderNoBtn::after {content: '\f24d'; font: var(--fa-font-solid); color:#d4cbd7; font-size: 0.75rem; font-weight: normal; } */ .itemBox-payment .itemCardInfo .orderNoBtn:hover {color: var(--color-primary-1);} .itemBox-payment .itemCardInfo .orderNoBtn:hover::after {color: var(--color-primary-1);} .itemBox-payment .itemCard {display: flex; flex-direction: column;} .itemBox-payment .itemCardBtn {display: flex; gap: 0 0.25rem; padding: 1.85rem 0 1.25rem 0; justify-content: flex-end;} .itemBox-payment .itemCardBtn button {font-size: 0.875rem; font-weight: 500; background: #edf0f3; color: #747d87; border-radius: 0.25rem; padding: 0.625rem 1.25rem;} .itemBox-payment .itemCardBtn button:hover {background: var(--color-primary-1-dk); color: var(--color-white);} @media (min-width: 991px) { .courseTap > button:hover, .courseTap > a:hover {opacity: 1;} } @media (max-width: 786px) { .itemList .itemBox-course {position: relative; padding-bottom: 1.5rem; } .itemList .itemBox-course .courseTitle {gap: 0;} .itemList .itemBox-course .courseInfo {display: flex; flex-direction: column; gap: 0; border-top: 0; padding: 0; margin-top: 0;} .itemList .itemBox-course .step {position: absolute; top: 1.5rem; right: 2rem; } .itemList .itemBox-course .courseInfo > div:first-of-type {display: flex; width: 100%; padding: 0; } .itemList .itemBox-course .proofWrap {display: flex; width: 100%; justify-content: center; padding-bottom: 0; gap: 0.5rem; padding-top: 1.5rem;} .itemList .itemBox-course .proofWrap > a, .itemList .itemBox-course .proofWrap > button, .itemList .itemBox-course .proofWrap > .goVeiw {flex: 1; height: 2.5rem;} } @media (max-width: 550px) { .itemBox-payment .itemCard .itemCardTop strong, .itemList .itemBox-course .courseTitle > strong, .itemList .itemBox-course .courseTitle > a, .itemList .itemBox-course strong {font-size: 1.25rem; line-height: 130%; padding: 0.625rem 0;} .itemBox-course .cpName {padding-bottom: 1rem;} .itemList .itemBox-course .proofWrap { gap: 0.1875rem; display: flex; flex-direction: column;} .itemList .itemBox-course .step, .itemList .itemBox-course .couseType {font-size:0.8125rem; padding: 0.375rem 1rem;} .itemList .itemBox-course .courseInfo > div:first-of-type span {font-size:0.8125rem; } .itemList .itemBox-course .courseInfo > div:first-of-type span::before {font-size:0.6875rem ;} .itemList .itemBox-course .proofWrap > a, .itemList .itemBox-course .proofWrap > button, .itemList .itemBox-course .proofWrap > .goVeiw {flex: 0 0 auto; height: 2.5rem;} .itemList .itemBox-course .proofWrap > .goVeiw {order: -1;} } @media (max-width: 410px) { .itemList .itemBox-course {padding-left: 1rem; padding-right: 1rem;} } /****************************** MyStudy Detail ******************************/ .details h3 {font-weight: 700; letter-spacing: -0.05em; font-size: 1.25rem; padding: 0; color: var(--color-bl1);} .detailInfo {border-bottom: 3px dashed var(--color-line-w); padding: 3em 0 2rem 0; display: flex; flex-direction: column; } .detailInfo > div.info-tit {width: 100%; display: flex; justify-content: space-between; align-items: flex-start;} .detailInfo > div.info-tit > div {display: flex; flex-direction: column; gap: 0.875rem;} .detailInfo > div.info-tit > div.title {flex: 1;} .detailInfo > div.info-tit > div .state {font-weight: 600;} .detailInfo > div.info-tit > div > strong { font-size: 1.875rem; color: var(--color-bl1); font-weight: 700; color: var(--color-bl2); letter-spacing: -0.025em; } /* .detailInfo .feeWrap {width: 50%; padding-left: 0.5rem;} */ /* .detailInfo .feeWrap b {color: var(--color-gy1); font-weight: 500;} */ .detailInfo .feeWrap strong.cancelFee, .detailInfo .feeWrap strong.totalFee {font-size: 1rem;} .detailInfo .feeWrap strong.cancelFee b, .detailInfo .feeWrap strong.totalFee b { color:#ff6600; font-weight: 900; font-size:1.375rem; text-decoration: underline; text-decoration-thickness:2px; padding-right: 0.25rem;} .detailInfo .feeWrap strong.cancelFee b {color: var(--color-red);} .detailInfo .feeWrap strong.cancelFee::after, .detailInfo .feeWrap strong.totalFee::after {content: '원'; font-size: 1rem; font-weight: 700; } .detailInfo .feeWrap .cancelFee {display: none;} .partial .detailInfo .feeWrap strong.totalFee, .cancel .detailInfo .feeWrap strong.totalFee {padding-bottom: 1rem;} .partial .detailInfo .feeWrap strong.totalFee b, .cancel .detailInfo .feeWrap strong.totalFee b { color: var(--color-bl1); font-weight: 700;font-size: 1.25rem; text-decoration: none;} .cancel .detailInfo .feeWrap strong.totalFee { color: var(--color-gy2);} .cancel .detailInfo .feeWrap strong.totalFee b { text-decoration:line-through; color: var(--color-gy2);} .cancel .detailInfo .feeWrap .cancelFee, .partial .detailInfo .feeWrap .cancelFee {display: inline-block; } .detailInfo > div.info-payment {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; width: 100%; border-top: 1px solid var(--color-line-w); padding-top: 1.875rem; margin-top: 1.875rem;} .detailInfo > div.info-company .col, .detailInfo > div.info-payment .col {display: flex; flex-direction: column; gap: 0.5rem;} .detailInfo > div.info-company .col > b, .detailInfo > div.info-payment .col > b {font-size: 0.9375rem; color: var(--color-gy2);} .detailInfo > div.info-company .col > span, .detailInfo > div.info-payment .col > span {color: var(--color-bl1); font-weight: 600; line-height: 138%; color: var(--color-bl2);} .detailInfo > div.info-payment .col > span.date {display: flex; flex-direction: column;} .detailInfo > div.info-payment .col > span.date em::before {color: var(--color-gy2); font-weight: 500; padding-right: 0.5rem; font-size: 0.9375rem;} .cancelDate {display: none;} .cancel .cancelDate, .partial .cancelDate {display: inline-block;} .appliDate::before{content: '신청일';} .paymetDate::before{content: '결제일';} .cancel .cancelDate::before, .partial .cancelDate::before{content: '환불일';} .detailInfo > div.info-company {width: 100%; padding:1.5rem 0 0 0; margin-top: 1.5rem; border-top: 1px solid var(--color-line-w); display: grid; grid-template-columns: 20rem 1fr 2fr; gap: 1rem; } .detailInfo > div.info-company > span {grid-column: 1/ 4 span;} .detailInfo > div.info-company > .companyInfo > strong {font-size: 1.25rem; font-weight: 600; padding-bottom: 0.25rem;} .detailInfo > div.info-company > .companyInfo > div > b {color: var(--color-gy2); padding-right: 0.25rem;} .detailInfo > div.info-company > .companyInfo > div > span {font-weight: 600; color: var(--color-bl2);} .details .btnWrap {width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 1rem ;} @media (max-width:991px) { .detailInfo {padding-bottom: 0;} .details h3 {margin-bottom: 1rem;} .detailInfo > div.info-payment {display: flex; flex-direction: column; padding-top: 0; gap: 0;} .detailInfo > div.info-company .col, .detailInfo > div.info-payment .col {flex-direction: row; line-height: 1.5rem; letter-spacing: -0.025em; padding: 1.125rem 0; border-bottom: 1px solid var(--color-line-w); align-items: center;} .detailInfo > div.info-payment .col:last-of-type {border-bottom: 0;} .detailInfo > div.info-company .col > b, .detailInfo > div.info-payment .col > b{width: 8.5rem; letter-spacing: -0.025em; font-weight: 400; color: var(--color-bl2); padding: 0.25rem 0; margin-right: 2.5rem ; gap: 0;} .detailInfo > div.info-company .col > span, .detailInfo > div.info-payment .col > span {font-weight: 700; color: var(--color-bl1);} .detailInfo .feeWrap strong.cancelFee b, .detailInfo .feeWrap strong.totalFee b {font-size: 1.25rem;} } @media (max-width:786px) { .detailInfo > div.info-company .col, .detailInfo > div.info-payment .col {flex-direction: column; padding: 0.875rem 0 0 0; border-bottom: 0; display: flex; align-items: flex-start; gap: 0;} .detailInfo > div.info-payment .col:last-of-type {padding-bottom: 0.875rem;} .detailInfo > div.info-company .col > b, .detailInfo > div.info-payment .col > b {padding: 0; width: 100%; font-size: 0.875rem; font-weight: 500; color: var(--color-gy2); margin-right: 0;} .detailInfo > div.info-company .col > span, .detailInfo > div.info-payment .col > span { padding: 0.25rem 0;} } /*상세*/ .courseViewSection {display: flex; width: 100%; flex-direction: column; } .courseViewSection .courseViewCon {display: grid; grid-template-columns: auto 21rem; gap:0 3.25rem; align-items: start;} [data-type="3"] .couseType::before, .item-Zoom .couseType::before, .courseViewSection.item-Zoom .couseType::before {content: '비대면 ZOOM교육';} [data-type="1"] .couseType::before, .item-Online .couseType::before, .courseViewSection.item-Online .couseType::before {content: '온라인교육'; } [data-type="4"] .couseType::before, .item-Book .couseType::before, .courseViewSection.item-Book .couseType::before {content: '우편교육';} .courseViewSection.item-Zoom .period > span::after {content: '일'} .period > span::after {content: ' 기간'} .courseViewSection.biz-sSindustry1 .couseBiz::after {content: '제조업';} .courseViewSection.biz-sSindustry2 .couseBiz::after {content: '건설업';} .courseViewSection.biz-sSindustry3 .couseBiz::after {content: '보건업';} .courseViewSection .couseBiz::after {content: '기타업';} /* .courseViewSection .courseViewInfo .couseType {color: var(--product-type4);} */ .courseViewSection.item-Zoom .courseViewInfo .couseType {color: var(--data-type3);} .courseViewSection.item-Online .courseViewInfo .couseType {color: var(--data-type1);} .courseViewSection.item-Book .courseViewInfo .couseType {color: var(--data-type4);} .courseViewSection.biz-sSindustry1 .couseBiz { color: #516ef3; border-color: #5e76e494; } .courseViewSection.biz-sSindustry2 .couseBiz { color: #d57f10; border-color: #d57f1061;} .courseViewSection.biz-sSindustry3 .couseBiz { color: #1c9715; border-color: #1c971594;} .courseViewSection .couseBiz { color: var(--color-primary-1); border-color: #5d4a7d85;} .courseViewSection.biz-sSindustry1 .couseBiz > b {background: #cbd4fdbd url("/application/views/Client/safety/Images/sub/innobi_1.png") no-repeat center bottom; background-size: cover;} .courseViewSection.biz-sSindustry2 .couseBiz > b {background: #ffe18fc9 url("/application/views/Client/safety/Images/sub/innobi_2.png") no-repeat center bottom; background-size: cover; } .courseViewSection.biz-sSindustry3 .couseBiz > b {background:#9ee38d82 url("/application/views/Client/safety/Images/sub/innobi_3.png") no-repeat center bottom; background-size: cover; } .couseBiz > b {background: #dfccff8c url("/application/views/Client/safety/Images/sub/innobi_4.png") no-repeat center bottom; background-size: cover; } .courseTitle h2 {padding: 0.625rem 0 1.875rem 0;} /*.cateWrap*/ .couseBiz { border-radius: 100rem; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.125em; line-height: 0; font-size: 0.9375rem; font-weight: 500; border: 1px solid #ccc; padding-right: 1.375rem; font-weight: 600; color: var(--color-bl2) ; } /*.cateWrap*/ .couseBiz > b {width: 2.125rem; height: 2.125rem; border-radius: 50%; color: var(--color-white); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transform: translateX(-1px);} /* .courseViewSection.item-Zoom .infoRow > span::after {content: '일'} */ .courseViewSection .courseTitle .couseType { border-radius: 100rem; display: inline-flex; align-items: center; height: 2.125rem; padding: 0 2rem; line-height: 0; font-size: 0.9375rem; font-weight: 500;} .courseViewSection.item-Zoom .courseTitle .couseType {border: 1px solid var(--data-type3);} .courseViewSection.item-Zoom .courseTitle .couseType::before {color: var(--data-type3);} .courseViewSection.item-Online .courseTitle .couseType {border: 1px solid var(--data-type1);} .courseViewSection.item-Online .courseTitle .couseType::before {color: var(--data-type1);} .courseViewSection.item-Book .courseTitle .couseType {border: 1px solid var(--data-type4);} .courseViewSection.item-Book .courseTitle .couseType::before {color: var(--data-type4);} .thumbWrap {width: 100%; padding-bottom: 53%; position: relative; overflow: hidden; border-radius: 0.625rem; border: 1px solid var(--color-line-w);} .thumbWrap > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; } .courseViewInfo { display: flex; flex-direction: column; gap: 1.25rem 0; border: 1px solid #ddd; padding: 1.25rem 1.5rem; width: 100%; margin-top: 1.875rem; border-radius: 0.625rem;} .courseViewInfo .infoRow {display: flex; align-items: center; } .courseViewInfo .infoRow > span {width: 7rem; color: var(--color-gy2);} .courseViewInfo .infoRow > b {font-weight: 500;} .courseViewInfo .infoRow .couseBiz {height: 1.875rem;} .courseViewInfo .infoRow .couseBiz > b { width: 1.875rem; height: 1.875rem;} .courseViewInfo .infoRow.period > b.zoomDate {display: none;} .courseViewSection.item-Zoom .courseViewInfo .infoRow.period > b.zoomDate {display: flex;} .courseViewSection.item-Book .courseViewInfo .infoRow.zoomAppliDateWrap, .courseViewSection.item-Online .courseViewInfo .infoRow.zoomAppliDateWrap, .courseViewSection.item-Zoom .courseViewInfo .infoRow.period > b.esleDate {display: none;} .courseViewSection.item-Zoom .courseViewInfo .infoRow > b.zoomAppliDate .dDay, .courseViewSection.item-Zoom .courseViewInfo .infoRow.period > b.zoomDate .dDay {color: tomato; font-weight: 700; padding-left: 0.25rem;} .courseViewInfo .infoRow.remainingSeats {display: none;} .courseViewSection.item-Zoom .courseViewInfo .infoRow.remainingSeats {display: flex;} .courseViewInfo .infoRow.remainingSeats .bookingStock::after {content: '명';} .courseViewInfo .infoRow.remainingSeats .bookingStock.waiting::after {display: none;} .courseViewInfo .infoRow > b.expense {display: flex; color: var(--color-gy1); font-weight: 500;} .courseViewInfo .infoRow > b.expense .fixedFee > b {text-decoration: line-through; text-decoration-color: var(--color-gy1);} .courseViewInfo .infoRow > b.expense .discountFee > b { color: tomato; font-weight: 700;} .courseViewInfo .infoRow > b.expense > i {color: var(--color-primary-1-li); opacity: 0.6; margin: 0 0.375rem;} .fixedFee::before { content: '정가'; padding-right: 0.375rem;} .discountFee::before {content: '할인가'; padding-right: 0.375rem;} .courseViewInfo .infoRow > b.expense > span::after, .fixedFee::after, .discountFee::after {content: '원'; padding-left: 2px;} .fixedFee::after, .discountFee::after, .fixedFee::before, .discountFee::before {font-weight: 400; font-size: 0.9375rem; color: var(--color-gy1);} .courseViewInfo form button {max-width: 20rem;} .courseViewSection.item-Online .courseViewInfo > .appEndDate, .courseViewSection.item-Book .courseViewInfo > .appEndDate, .courseViewSection.item-Zoom .courseViewInfo > form {display: none;} .csNotice {padding-top: 1rem; width: 100%; display: flex;} .csNotice > div {background: var(--color-bg-1); ; padding: 1.25rem 1.5rem; border-radius: 0.625rem; line-height: 148%; width: 100%;} .courseDetail {width: 100%; padding-bottom: 3rem;} .item-Zoom .courseDetail > nav, .item-Book .courseDetail > nav, .item-Online .courseDetail > nav, .item-Zoom .courseDetail > .detailRow:not(#item1-5), .item-Book .courseDetail > .detailRow:not(#item1-5), .item-Online .courseDetail > .detailRow:not(#item1-5), .item-Online .courseDetail > .detailRow.orderList > div {display: none;} .item-Zoom .courseDetail > nav.zoomNav, .item-Book .courseDetail > nav.bookNav, .item-Online .courseDetail > nav.onlineNav, .item-Zoom .courseDetail > .detailRow.detail-Zoom:not(#item1-5) , .item-Book .courseDetail > .detailRow.detail-Book:not(#item1-5), .item-Online .courseDetail > .detailRow.detail-Online:not(#item1-5), .item-Online.biz-sSindustry1 .courseDetail > .detailRow.orderList > div.biz-sSindustry1, .item-Online.biz-sSindustry2 .courseDetail > .detailRow.orderList > div.biz-sSindustry2, .item-Online.biz-sSindustry3 .courseDetail > .detailRow.orderList > div.biz-sSindustry3, .item-Online.biz- .courseDetail > .detailRow.orderList > div.biz-sSindustry5 {display: flex;} .courseDetail > nav {position: sticky; top: 0; display: flex; justify-content: flex-start; gap:0.625rem; width: 100%; background: var(--color-white); padding: 1rem 0 0 0; border-bottom: 1px solid var(--color-line-w); margin-top: 2rem; z-index: 50;} .courseDetail > nav > a {padding: 0 1rem 0.875rem 1rem; color: var(--color-gy1); border: 0; border-bottom-width: 0.1875rem; border-color: transparent; border-style: solid;} .courseDetail > nav > a.has {border-color: var(--color-primary-1); color: var(--color-primary-1); font-weight: 600;} .detailRow {display: flex; flex-direction: column; padding: 5rem 0 0 0; gap:0.875rem;} .detailRow.pt0 {padding-top: 2.5rem;} .detailRow h3 {font-size: 1.25rem; color: var(--color-primary-1); font-weight: 700; letter-spacing: -0.025em; padding: 0; width: 100%; line-height: 168%; } .detailRow > div { color: var(--color-gy1); letter-spacing: -0.025em; flex: 1;} .detailRow > div > p {color: var(--color-bl2); line-height: 1.3; padding-top: 0.25rem; padding-bottom: 0.25rem; letter-spacing: -0.015em; } .detailRow > div > p.mb {margin-bottom: 1.5rem;} .detailRow > div > p.dash {margin-left: 0.675rem;} .detailRow > div > p > b {font-weight: 500; color: var(--color-blue);} .detailRow > div > p > b.red { color: var(--color-red);} .detailRow > div > b {font-weight: 700; line-height: 1.6; color: var(--color-bl1); display: block; padding-bottom: 0.25rem;} .detailRow > div .dosic {display: flex; gap: 0.5rem; position: relative; padding-top: 0.5rem;} .detailRow > div .dosic > div {flex: 1; padding: 1rem 2.5rem; border: 1px solid var(--color-line-w); background: #f5f6f9; border-radius: 0.375rem;} .detailRow > div .dosic::before {content: '\f055'; font: var(--fa-font-solid); color: var(--color-primary-1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem;} .detailRow > div .dosic > div > p {padding: 0.25rem 0; color: var(--color-bl2); font-weight: 500;} .detailRow > div .dosic > div > p > b {color: var(--color-primary-1); padding-right: 0.375rem;} .item-Online .courseDetail > .detailRow.orderList > div {flex-direction: column;} .detailRow > div.em {background: var(--color-bg-1); border-radius: 0.375rem; padding-left: 1.375rem; padding: 1.25rem 1.25rem; } .detailRow > div.em > .zoom, .detailRow > div.em > .book, .detailRow > div.em > .online { display: none;} .csNotice > div > div > strong, .detailRow > div.em > div strong { color: var(--color-primary-1); font-weight: 700; display: block; padding: 0.5rem 0;} .csNotice > div > div > p , .detailRow > div.em > div p {color: var(--color-gy1); position: relative; padding-top: 2px; padding-bottom: 2px; line-height: 168%;} .dooted {padding-left: 1rem; position: relative;} .dooted::before { content: '•'; position: absolute; top: 50%; transform: translateY(-50%); left: 0;} .doot {padding-left: 1.5rem; position: relative;} .doot::before { content: '·'; position: absolute; top: 2px; left: 0.75rem;} .dash {padding-left: 0.875rem; position: relative;} .dash::before { content: '-'; position: absolute; top: 0.25rem; left: 0;} .star {padding-left: 1.375rem;} .star::before { content: '*'; position: absolute; top: 3px; left: 0.625rem;} .circle {padding-left: 1.25rem; position: relative;} .circle::before { content: '◎'; position: absolute; top: 2px; left: 0; font-size: 0.8125rem;} .order {position: relative; padding-left: 2rem;} .order::before { position: absolute; top: 0.25rem; left: 0; color: var(--color-primary-1); font-weight: 500;} .order:nth-of-type(1)::before {content: '01';} .order:nth-of-type(2)::before {content: '02';} .order:nth-of-type(3)::before {content: '03';} .order:nth-of-type(4)::before {content: '04';} .order:nth-of-type(5)::before {content: '05';} .order:nth-of-type(6)::before {content: '06';} .order:nth-of-type(7)::before {content: '07';} .order:nth-of-type(8)::before {content: '08';} .order:nth-of-type(9)::before {content: '09';} .order:nth-of-type(10)::before {content: '10';} .csNotice > div > div {display: none;} .csNotice > div > div > .fnRed, .detailRow > div.em > div > .fnRed {padding-top: 1rem; color:var(--color-red); } .courseViewSection.item-Online .csNotice > div > .online, .courseViewSection.item-Book .csNotice > div > .book, .courseViewSection.item-Zoom .csNotice > div > .zoom, .courseViewSection.item-Online .courseDetail .detailRow > div.em > .online, .courseViewSection.item-Book .courseDetail .detailRow > div.em > .book, .courseViewSection.item-Zoom .courseDetail .detailRow > div.em > .zoom {display: block;} .csNotice > div > div.ldNotice.visible {display: block;} .csNotice > div > div.ldNotice.hidden {display: none;} .csNotice > div > div.ldNotice {display: none; padding-bottom: 1rem;} .csNotice > div > div.ldNotice > strong { color:var(--color-red);} .csNotice > div > div.ldNotice div p {color: var(--color-gy1); position: relative; padding-top: 2px; padding-bottom: 2px; line-height: 168%;} .csNotice > div > div.ldNotice div p:not(.dash) {padding-left: 0.5rem;} .csNotice > div > div.ldNotice div p::before {top: 0;} .csNotice p.dash::before {top: 2px;} /* .detailRow:first-of-type > h3 {padding-top: 0;} */ /* .courseViewSection .itemSide {display: none;} */ .subLayout .courseViewSection h2::after {display: none;} .courseViewSection .itemSide > div > .booking {border: 1px solid #ddd; display: flex; flex-direction: column; border-radius: 0.625rem; padding: 1rem 1rem; padding-top: 1rem;} #courseViewCalendar.fc .fc-toolbar.fc-header-toolbar {margin-bottom: 0.625rem; padding-top: 0.875rem;} #courseViewCalendar.fc .fc-toolbar-title, #courseViewCalendar .subLayout main h2 {font-size: 1.125rem; padding: 0;} #courseViewCalendar.fc .fc-button .fc-icon {} #courseViewCalendar.fc .fc-prev-button, #courseViewCalendar.fc .fc-next-button { color: #121212; background-color: transparent; border: 0; border-radius: 50%; padding: 0; font-weight: 700; font-size: 0.875rem;} #courseViewCalendar.fc .fc-scrollgrid, #courseViewCalendar.fc table, .fc-theme-standard td, .fc-theme-standard th{border: 0;} #courseViewCalendar.fc table > thead > tr > th, #courseViewCalendar.fc table > thead > tr > td {border-radius: 100rem; padding: 4px; font-size: 0.8125rem; background: #F9F7FC; color: #9188c3; font-weight: 500;} #courseViewCalendar.fc .fc-prev-button:hover, #courseViewCalendar.fc .fc-next-button:hover { background:var(--color-bg-1); border-color:#ccc; } /* .fc-daygrid-day.cv-selectable-day .fc-daygrid-day-number{font-weight:700;color:#111; cursor: pointer;} .fc-daygrid-day.cv-waiting-day .fc-daygrid-day-number{text-decoration:underline dashed;} */ #courseViewCalendar .fc-daygrid-day.cv-unselectable-day .fc-daygrid-day-number{opacity:0.4;} .fc .fc-daygrid-day.fc-day-today {background: transparent;} #courseViewCalendar.fc .fc-daygrid-day-top {justify-content: center; align-items: center; } #courseViewCalendar .fc-daygrid-day-events, #courseViewCalendar .fc-daygrid-day-bg{display:none;} #courseViewCalendar .fc-daygrid-day .fc-daygrid-day-number { width: 1.625rem; height: 1.625rem; font-size:0.875rem;padding: 0; display: flex; justify-content: center; align-items: center; margin: 4px; border-radius: 100rem;} #courseViewCalendar .fc-daygrid-day.cv-selected-day .fc-daygrid-day-number{background: var(--color-primary-1); color:#fff; } .item-Zoom #reservationStatus {padding: 1rem 0 0 0 ; } #reservationStatus {flex-direction: column;} #reservationStatus.noneOption #opResult .opldendDate, #reservationStatus.noneOption #opResult .productOpFee, #reservationStatus.noneOption .feeInfo .opTotalInfo {display: none;} #reservationStatus > .bookingInfo {display: flex; flex-direction: column; background: #F8FAFB; padding: 1.125rem 0.875rem; color: var(--color-primary-1); border-radius: 0.375rem; } #reservationStatus > .bookingInfo .bookCate { font-size: 0.875rem; font-weight: 500; padding-bottom: 0.75rem; } #reservationStatus > .bookingInfo .bookingDate {display: flex; align-items: flex-start; } .stockWrap {padding: 0.375rem 0 0 0;} .item-Zoom #bookItemDate {font-size: 1rem; padding-bottom: 0;} .item-Book #bookItemDate, .item-Online #bookItemDate {font-size: 1.125rem; font-weight: 600;} .item-Book .stockWrap span, .item-Online .stockWrap span {font-size: 0.875rem; padding-left: 0.25rem; font-weight: 600;} .item-Book .personnelWrap > #productFee, .item-Online .personnelWrap > #productFee {display: none;} .bookingInfo .bookingStock {color: #073aff; font-size: 0.875rem; font-weight: 500; padding-left: 0.25rem;} .bookingStock::after{content: '명';} .stockWrap.waiting > .waiting {padding-left: 0;} .stockWrap.waiting > strong {display: none;} .bookingStock.waiting::after {display: none;} .stockWrap.waiting > .waiting, .bookingStock.waiting {color: #ff8f00;} #bookItemDate {font-size: 0.875rem; font-weight: 500; color: var(--color-bl1); flex:1; letter-spacing: -0.05em; padding-bottom: 0.5rem;} #opResult .opDeletBtn, .bookingDate #deletBtn {font-size: 0.75rem; color: var(--color-bl2); opacity: 0.7; } #opResult .opDeletBtn:hover, .bookingDate #deletBtn:hover {opacity: 1;} #selectBookItemBtn, #selectOpBtn {width: 100%; display: flex; padding: 0.75rem 1rem; color: var(--color-gy1); font-size: 0.875rem;} #selectBookItemBtn::after, #selectOpBtn::after {content: '\f107'; font: var(--fa-font-solid); font-size: 0.8125rem; color: var(--color-bl2);} #mobBookiItem, .optionalWrap {background: var(--color-white); border: 1px solid var(--color-line-w); border-radius: 0.25rem; display: flex; flex-direction: column; margin-top: 0.625rem;} #selectBookItemBtn {justify-content: space-between;} #selectOpBtn > b {flex: 1; text-align: left; color: var(--color-primary-1); padding-left: 0.25rem;} .bookItemSelList, .optionalWrap .opList { display: flex; overflow: hidden; max-height: 0; visibility: hidden; opacity: 0; transition: max-height 0.3s ease-in-out;} #mobBookiItem.active .bookItemSelList, .optionalWrap.active .opList { overflow: visible; max-height: 100rem; visibility: visible; opacity: 1; transition : max-height 0.3s ease-in-out; } .bookItemSelList, .optionalWrap .opList {display: flex; flex-direction: column; width: 100%;} .bookItemSelList button, .optionalWrap .opList button {width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 0.75rem 1rem; color: var(--color-bl1); font-size: 0.875rem; width: 100%; border-top: 1px solid var(--color-line-w); color: var(--color-gy2); } .bookItemSelList button {gap: 0.5rem;} .bookItemSelList button > b {color: var(--color-bl2); font-weight: 600;} .bookItemSelList button > span {color: var(--color-primary-1);} .optionalWrap .opList button > b {font-size: 0.875rem; font-weight: 500; color: var(--color-bl1); padding: 0.375rem 0 0.375rem 0; transition: 0.3s;} .optionalWrap .opList button > span {color: var(--color-primary-1); font-size: 1rem; font-weight: 600; transition: 0.3s; display: flex; align-items: center; } .optionalWrap .opList button > span::before { content: '+'; font-size: 0.8125rem; width: 0.875rem; height: 0.875rem; font-weight: 700;line-height: 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--color-primary-1); color: var(--color-white); padding: 0; transition: 0.3s; margin-right: 0.25rem;} .optionalWrap .opList button > span::after { content: '원'; padding-left: 0.125em; font-size: 0.875rem; transition: 0.3s;} .optionalWrap .opList button:hover, /* .optionalWrap .opList button:hover > span::before, */ .optionalWrap .opList button:hover > b { color: var(--color-primary-1);} .optionalWrap .opList button[data-option-type='book'] {order:-1; /*background: #ffeaca42;*/} .optionalWrap .opList button[data-option-type='book']::before {content: '빠른 수료 가능'; font-size: 0.75rem; background: var(--color-primary-1-li); color: var(--color-white); padding: 0.375rem 0.75rem; border-radius: 4px; } .noItem.hidden, #reservationStatus.hidden, #opResult, #opResult.hidden, .optionalWrap.hidden {display: none;} .noItem.visible, #reservationStatus.visible, .optionalWrap.visible, #opResult.visible {display: flex;} #opResult { border-top: 1px solid #ddd; flex-direction: column; width: 100%; align-items: flex-start; padding-top: 1rem; margin-top: 1rem;} #opResult > div {display: flex; justify-content: space-between; width: 100%; } #opResult > div:first-of-type {padding-bottom: 0.75rem;} #opResult > div:first-of-type > span {color: var(--color-primary-1); font-size: 0.875rem; font-weight: 500; } /* #opResult > div > span { font-size: 0.875rem; color: var(--color-gy2); font-weight: 500; } */ #opResult > .opItemName {font-size: 0.875rem; font-weight: 500; color: var(--color-bl1); flex:1; letter-spacing: -0.05em; } #opResult > .opItemName > b {font-size: 0.875rem; font-weight: 500;} /* #opResult > .opItemName b::before {content: '(선택인원 : '; padding-left: 0.25rem; } #opResult > .opItemName b::after {content: '명)';} */ #opResult.no-option .opItemName > b, #opResult.no-option .opldendDate, #opResult.no-option > div:last-of-type {display: none;} .selectPerson {display: flex; justify-content: space-between; padding: 1rem 0;} .totalFeeWrap { padding-top: 1rem; display: flex; border-top: 1px solid var(--color-line-w);} .totalFeeWrap > span {font-weight: 600;} #totalFee {flex: 1; text-align: right; font-weight: 600; font-size: 1.125rem; color: tomato;} #totalFee::after {content: '원'; font-size: 1rem; padding-left: 0.25rem;} .unauthorized, .noItem {padding: 1rem; border: 1px solid var(--color-line-w); margin-top: 1rem; text-align: center; align-items: center; justify-content: center; align-content: center; color: var(--color-gy1); font-weight: 500; border-radius: 0.25rem;} /* .opFee::before {content: '단가'; padding-right: 0.25rem; } */ /* .opFee::after {content: '원';} */ .opldendDate {color: var(--color-bl2); font-size: 0.875rem; font-weight: 400; padding: 0.375rem 0 0 0;} .opldendDate::before {content: '교육기간 : '; } #opResult > .productOpFee, .productOpFee, .productFee {display: flex; justify-content: flex-end;} .productOpFee > span, .productFee > span, .opTotalFee {font-size: 1rem; font-weight: 600;} .productOpFee > span::after, .productFee > span::after, .opTotalFee::after {content: '원'; padding-left: 1px; font-size: 0.875rem; font-weight: 400; } .bookingInfo > div { display: flex; align-items: center;} .bookingInfo > div > strong {font-size: 0.875rem; font-weight: 500; color: var(--color-gy2); } .feeInfo {display: flex; flex-direction: column; gap:0.875rem; padding: 1rem 0;} .feeInfo .personnelWrap {align-items: center;} .feeInfo > .producInfo, .feeInfo > .opTotalInfo {display: flex; align-items: flex-end;} .feeInfo > .producInfo > b, .feeInfo > .opTotalInfo > b {flex: 1;} .feeInfo > .producInfo > span, .feeInfo > .opTotalInfo > span {width: 6.5rem; text-align: right; font-weight: 600;} .feeInfo > .producInfo > span::after, .feeInfo > .opTotalInfo > span::after {content: '원'; padding-left: 1px; font-size: 0.875rem; font-weight: 400; } .feeInfo > div b {color: var(--color-gy1); font-size: 0.875rem; } .personnelWrap {display: flex; justify-content: space-between; align-items: flex-end; width: 100% ; gap: 1rem;} .personnelWrap > .btnWrap {display: flex; flex-direction: row; align-items: center;} .personnelWrap > .btnWrap button {display: flex; background: var(--color-white); border: 1px solid #ccc; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; font-size: 0.875rem; align-items: center; justify-self: center; } .personnelWrap > .btnWrap button:disabled {background: #f1f1f1; } .personnelWrap > .btnWrap button:first-child {border-right: 0; border-radius: 0.25rem 0 0 0.25rem; background: var(--color-bg-1);} .personnelWrap > .btnWrap button:last-child {border-left: 0; border-radius: 0 0.25rem 0.25rem 0; background: var(--color-bg-1);} .personnelWrap > .btnWrap button:hover i {color:#000; } .personnelWrap > .btnWrap input[type="number"] {width: 1.5rem; height: 1.5rem; border:1px solid #ccc; background: #fff; text-align: center; font-size: 0.8125rem; color: var(--color-black);} .personnelWrap > .btnWrap input[type="number"]::-webkit-outer-spin-button, .personnelWrap > .btnWrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .personnelWrap > #productFee {flex: 1; text-align: right; } .personnelWrap > #productFee {color: var(--color-primary-1); font-size: 1rem;} .personnelWrap > #productFee::after {content: '원'; padding-left: 0.25rem; font-size: 0.875rem; font-weight: 400; } .itemSideInfo.hidden {display: none;} .itemSideInfo {display: flex; flex-direction: column; gap: 0.5rem;} .itemSideInfo > button {display: flex; justify-content: center; align-items: center; width: 100%; font-size: 1rem ; color: #fff; height: 3rem; border-radius: 0.375rem; color: #fff; font-weight: 500; } .itemSideInfo .estimateBtn {color: var(--color-primary-1); border: 1px solid var(--color-primary-1-li);} .itemSideNotice {display: flex; justify-content: center; align-items: center; width: 100%; font-size: 1rem ; height: 3.5rem; border-radius: 0.375rem; color: var(--color-gy1); font-weight: 400; border: 1px solid #ddd;} .itemSideInfo > button.submitBtn[data-status="1"]{background:var(--color-primary-1) ;} .itemSideInfo > button.submitBtn[data-status="1"]::after{content:"신청하기";} .itemSideInfo > button.submitBtn[data-status="2"]{background:#ff9800;} .itemSideInfo > button.submitBtn[data-status="2"]::after{content:"대기신청";} .itemSideInfo > button.submitBtn[data-status="3"]{background:#9e9e9e;} .itemSideInfo > button.submitBtn[data-status="3"]::after{content:"모집마감";} .itemSideInfo > button.submitBtn[disabled]{opacity:.6;cursor:not-allowed;} .itemSideInfo > button.submitBtn[data-status="3"] + .estimateBtn, .itemSideInfo > button.submitBtn[data-status="2"] + .estimateBtn {display: none;} #courseViewCalendar.fc .fc-day-disabled { background: transparent;} /* 마감 날짜 */ #courseViewCalendar .fc-daygrid-day.cv-closed-day .fc-daygrid-day-number { color: #111; font-weight: 600; opacity: 1;} /* 대기 인원 있는 날짜 */ #courseViewCalendar .fc-daygrid-day.cv-waiting-day.cv-selectable-day .fc-daygrid-day-number { color: #ff9800; font-weight: 600;} /* 선택된 날짜 강조 */ #courseViewCalendar .fc-daygrid-day.cv-selectable-day {cursor: pointer;} #courseViewCalendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {border: 1px solid var(--color-primary-1);} #courseViewCalendar.fc .fc-day-other.fc-daygrid-day.cv-selectable-day.is-selected .fc-daygrid-day-number , #courseViewCalendar .fc-daygrid-day.cv-selectable-day.is-selected .fc-daygrid-day-number { background-color:var(--color-primary-1); border-radius: 50%; opacity: 1; color: var(--color-white);} #courseViewCalendar.fc .fc-day-other.fc-daygrid-day.cv-selectable-day .fc-daygrid-day-top, #courseViewCalendar .fc-daygrid-day.cv-selectable-day .fc-daygrid-day-number {color: #073aff; opacity: 1; font-weight: 600;} /* #courseViewCalendar.fc .fc-day-disabled {background: transparent; opacity: 1;} */ /*과정신청*/ .couseListWrap > h3:first-of-type {padding-top: 1.5rem;} .couseListContent {visibility: hidden; opacity: 0; overflow: hidden; max-height: 0; transition: 0.4s; } .couseListContent.active {visibility: visible; opacity: 1; overflow: visible; max-height: 2000rem;} .couseListWrap .courseItemList .cardBox.item-Online, .couseListWrap .courseItemList .cardBox.item-Book, .couseListWrap .courseItemList .cardBox.item-Zoom {display: none;} .couseListWrap[data-cate="SSindustry1"] .courseItemList .cardBox[data-biz="SSindustry1"] {display: flex; order: -1;} .couseListWrap[data-cate="SSindustry1"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry1"] {order: -3 ;} .couseListWrap[data-cate="SSindustry1"] .courseItemList .cardBox.item-Book[data-biz="SSindustry1"] {order: -2 ;} .couseListWrap[data-cate="SSindustry2"] .courseItemList .cardBox[data-biz="SSindustry2"] {display: flex; order: -1;} .couseListWrap[data-cate="SSindustry2"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry2"] {order: -3 ;} .couseListWrap[data-cate="SSindustry2"] .courseItemList .cardBox.item-Book[data-biz="SSindustry2"] {order: -2 ;} .couseListWrap[data-cate="SSindustry3"] .courseItemList .cardBox[data-biz="SSindustry3"] {display: flex; order: -1;} .couseListWrap[data-cate="SSindustry3"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry3"] {order: -3 ;} .couseListWrap[data-cate="SSindustry3"] .courseItemList .cardBox.item-Book[data-biz="SSindustry3"] {order: -2 ;} .couseListWrap[data-cate="SSindustry5"] .courseItemList .cardBox[data-biz="SSindustry5"], .couseListWrap[data-cate="SSindustry5"] .courseItemList .cardBox[data-biz="SSindustry5"], .couseListWrap[data-cate="SSindustry5"] .courseItemList .cardBox[data-biz="SSindustry5"], .couseListWrap[data-cate="SSindustry5"] .courseItemList .cardBox[data-biz="SSindustry5"] {display: flex; order: -1;} .couseListWrap[data-cate="SSindustry4"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry4"] {order: -3 ;} .couseListWrap[data-cate="SSindustry4"] .courseItemList .cardBox.item-Book[data-biz="SSindustry4"] {order: -2 ;} .couseListWrap[data-cate="SSindustry5"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry5"] {order: -3 ;} .couseListWrap[data-cate="SSindustry5"] .courseItemList .cardBox.item-Book[data-biz="SSindustry5"] {order: -2 ;} .couseListWrap[data-cate="SSindustry6"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry6"] {order: -3 ;} .couseListWrap[data-cate="SSindustry6"] .courseItemList .cardBox.item-Book[data-biz="SSindustry6"] {order: -2 ;} .couseListWrap[data-cate="SSindustry9"] .courseItemList .cardBox.item-Zoom[data-biz="SSindustry9"] {order: -3 ;} .couseListWrap[data-cate="SSindustry9"] .courseItemList .cardBox.item-Book[data-biz="SSindustry9"] {order: -2 ;} .cateWrap { display: flex; gap: 0.5rem;} .cateWrap > button { display: flex; align-items: center; background: var(--color-bg-1); border-radius: 0.625rem; flex: 1; padding: 0.625rem 1.625rem; gap: 1rem; border: 2px solid transparent; transition: 0.3s;} .cateWrap > button > span { font-weight: 600; font-size: 1.25rem; color: var(--color-bl1);} .cateWrap > button > .thum {width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; position: relative; border: 1px solid var(--color-line-w); transition: 0.3s; background: var(--color-white);} .cateWrap > button > .thum > img {position: absolute; left:50%; bottom: 0; width: 90%; height: 90%; transform: translateX(-50%); object-fit: cover; transition: 0.3s; } .cateWrap > button.active, .cateWrap > button:hover {border-color: var(--color-primary-1); background: #f0ebf9;} /* .cateWrap > button.active > .thum, .cateWrap > button:hover > .thum {background: var(--color-primary-1);} */ .courseItemList {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem 1rem;} .courseItemList .cardBox {display: flex; flex-direction: column; border: 1px solid var(--color-line-w); border-radius: 1rem; padding: 1rem; box-shadow: var(--box-shadow1);} .courseItemList .cardBox .thum {width: 100%; padding-bottom: 56.4%; position: relative; border-radius: 0 1.375rem 0 1.375rem ; overflow: hidden; background: #fff; } .courseItemList .cardBox .thum::after {content: '교육신청'; z-index: 9; position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; width: 6.85rem ; height: 2.125rem; color: var(--color-white); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 0.25rem; opacity: 0; transition: 0.3s ; font-weight: 500;} .courseItemList .cardBox.item-Zoom .thum::after { background: var(--data-type3);} .courseItemList .cardBox.item-Book .thum::after { background: var(--data-type4);} .courseItemList .cardBox.item-Online .thum::after { background: var(--data-type1);} .courseItemList .cardBox .thum > img {width: 100%; height: 100%; position: absolute; object-fit: cover; z-index: 1; transition: 0.4s;} .itemType {position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; border-radius: 100rem; padding: 0.4375rem 0; font-size: 0.875rem; } .item-Book .itemType {background: var(--data-type4);; color: var(--color-white); width: 5.5rem; } .item-Online .itemType {background: var(--data-type1);; color: var(--color-white); width: 5.5rem; } .item-Zoom .itemType {background: var(--data-type3); color: var(--color-white); width: 5.5rem; } .item-Zoom .itemType::before { content: 'Zoom교육';} .item-Book .itemType::before { content: '우편교육';} .item-Online .itemType::before { content: '온라인교육';} .itemOut {position: absolute; top: 0; left: 0 ; z-index: 2; height: 2.5rem; background: var(--color-white); border-radius: 0 0 1.375rem 0;} .item-Book .itemOut {width: 6rem;} .item-Zoom .itemOut {width: 6rem;} .item-Online .itemOut {width: 6rem;} .item-Book .itemOut::before {left: 6rem;} .item-Zoom .itemOut::before {left: 6rem;} .item-Online .itemOut::before {left: 6rem;} .itemOut::after, .itemOut::before {content:""; position:absolute; background: var(--color-white); clip-path:url(#triangleCut); z-index: 3; width:3rem; height:3rem; top: 0; left: 0rem;} .itemOut::before { transform: translate(-0.5px, 0) rotate(180deg); background: var(--color-white);} .itemOut::after { width: 3rem; height: 3rem; transform: translate(-0.5px, 83%) rotate(180deg);} .cardOut { position: absolute; bottom: 0; right: 0; width: 3rem; height: 3rem; background: var(--color-white); border-radius: 1.375rem 0 0 0; z-index: 2;} .cardOut::after, .cardOut::before {content:""; position:absolute; background: var(--color-white); clip-path:url(#triangleCut); z-index: 3; width:3rem; height:3rem; bottom: 0; right: 0;} .cardOut::before { transform: translate(0.5px, calc(-100% + 0.5px));} .cardOut::after { transform: translate(calc(-100% + 0.5px), 0.5px);} /* .cardOut::before {width:2rem; height:2rem; bottom:0; right:5rem;} */ .cardBtn { position: absolute; bottom: 0.125rem; right: 0.125rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875rem; z-index: 4; overflow: hidden; border: 1px solid var(--color-line-w); transition: 0.3s;} .cardBox[data-biz="SSindustry1"] .cardBtn {background: url("/application/views/Client/safety/Images/sub/innobi_1.png") no-repeat center bottom; background-size: cover; } .cardBox[data-biz="SSindustry2"] .cardBtn {background: url("/application/views/Client/safety/Images/sub/innobi_2.png") no-repeat center bottom; background-size: cover; } .cardBox[data-biz="SSindustry3"] .cardBtn {background: url("/application/views/Client/safety/Images/sub/innobi_3.png") no-repeat center bottom; background-size: cover; } .cardBox[data-biz="SSindustry4"] .cardBtn, .cardBox[data-biz="SSindustry5"] .cardBtn, .cardBox[data-biz="SSindustry6"] .cardBtn .cardBox[data-biz="SSindustry9"] .cardBtn {background: url("/application/views/Client/safety/Images/sub/innobi_4.png") no-repeat center bottom; background-size: cover; } /* .cardBtn > img {width: 100%; } */ .cardInfo {display: flex; flex-direction: column; } .cardInfo > strong {font-weight: 600; font-size: 1.25rem; margin: 1rem 0 0.5rem 0; color: var(--color-bl1); line-height: 135%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cardInfo > .fee {color: #ff6600; display: flex; align-items: flex-end; justify-content: flex-end; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.025em;} .cardInfo > .fee::after {content: '원'; color: var(--color-gy1); font-size: 1rem; margin-left: 0.125rem;} @media (min-width:991px) { .courseViewSection .itemSide { grid-column: 2 / 3; grid-row: 1 / 5; position: sticky; top: 1rem; align-self: start; height: calc(100vh - 2.5rem); display: flex; flex-direction: column; } .courseViewSection .itemSide > div { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; } .courseItemList .cardBox:hover .cardBtn {background-color: var(--color-bg-1); border-color: var(--color-primary-1-li);} .courseItemList .cardBox:hover .cardInfo > strong {color: var(--color-primary-1);} .courseItemList .cardBox:hover .thum::after {opacity: 0.85;} .courseItemList .cardBox:hover .thum > img { filter : brightness(95%) grayscale(20%) contrast(88%) saturate(185%); transform: rotate(2deg) scale(1.05);} #mobBookiItem { display: none; } } @media (max-width:1280px) { .SafetyCourse.View .subLayout:not(.full) {gap: 0;} .courseViewSection .courseViewCon {gap: 0 2rem; grid-template-columns: auto 20rem;} .cateWrap > button {padding: 0.5rem 1.25rem; gap: 0.875rem;} .cateWrap > button > span {font-size: 1.125rem;} .cateWrap > button > .thum {width: 3rem; height: 3rem;} .courseItemList {gap: 2rem 1rem;} .itemType { font-size: 0.75rem; padding :0.35rem 0; } .item-Book .itemType, .item-Online .itemType, .item-Zoom .itemType { width: 5rem; } .itemOut {height: 2rem;} .cardOut::after, .cardOut::before, .itemOut::after, .itemOut::before {width: 2.5rem; height: 2.5rem; } .itemOut::after {transform: translate(-0.5px, 80%) rotate(180deg); } .item-Book .itemOut {width: 5.5rem;} .item-Zoom .itemOut {width: 5.5rem;} .item-Online .itemOut {width: 5.5rem;} .item-Book .itemOut::before {left: 5.5rem;} .item-Zoom .itemOut::before {left: 5.5rem;} .item-Online .itemOut::before {left: 5.5rem;} .cardBtn {width: 2rem; height: 2rem; bottom: 0; right: 0;} .cardOut {width: 2.25rem; height: 2.25rem;} .cardOut::after {transform: translate(calc(-91% + 0.5px), 0.5px);} .cardOut::before {transform: translate(0.5px, calc(-91% + 0.5px));} .cardInfo > strong {font-size: 1.125rem;} } @media (max-width:990px) { #courseViewCalendar { display: none; } #mobBookiItem { display: flex; } .courseViewSection .courseViewCon {gap: 0; display: flex; flex-direction: column;} .courseViewInfo {margin-top: 1rem;} .courseViewSection .thumbWrap {order: -3;} .courseViewSection .courseViewInfo {order: -2;} .courseViewSection.item-Zoom .courseViewInfo .infoRow.period, .courseViewSection.item-Zoom .courseViewInfo .infoRow.remainingSeats{display: none;} .courseViewSection .itemSide {order: -1; position: relative; padding: 0; gap: 0; width: 100%; margin-top: 1rem;} .courseViewSection .itemSide > div .booking {border-radius: 0.375rem 0.375rem 0 0 ; padding: 1rem;} .itemSideInfo .submitBtn {border-radius: 0 0 0.375rem 0.375rem;} .cardInfo > strong {font-size: 1.25rem; margin-bottom: 0;} .courseItemList .cardBox .thum {border-radius: 0 0.75rem 0 0.75rem;} .subLayout:not(.full) .courseDetail nav, .courseDetail > nav:not(.visilbe) {display: none;} .detailRow > div .dosic {flex-direction: column;} .detailRow > div .dosic > div { padding: 1rem 1.5rem;} .bookItemSelList button[data-status="1"] > span {color: var(--color-blue);} .bookItemSelList button[data-status="2"] {background: #fcfcfc;} .bookItemSelList button[data-status="2"] > b {color: var(--color-gy2);} .bookItemSelList button[data-status="2"] > span {color: var(--color-yellow);} } @media (max-width:768px) { .cateWrap {gap: 0.25rem;} .cateWrap > button {padding: 0.5rem 0; justify-content: center; gap: 0.5rem; flex-direction: column; } .cateWrap > button > span {font-size: 1rem;} .cateWrap > button > .thum {width: 2.25rem; height: 2.25em;} .cateWrap > button > span {font-size: 1.125rem;} .cateWrap > button > .thum {width: 3rem; height: 3rem;} .courseItemList {grid-template-columns: 1fr 1fr; gap: 1rem 0.625rem; } .courseItemList .cardBox .thum {border-radius: 0 0.625rem 0 0.625rem;} .itemType { font-size: 0.75rem; padding :0.25rem 0; } .item-Book .itemType, .item-Online .itemType, .item-Zoom .itemType { width: 4.625rem; } .itemOut {height: 1.625rem;} .cardOut::after, .cardOut::before, .itemOut::after, .itemOut::before {width: 2rem; height: 2rem; } .itemOut::after {transform: translate(-0.5px, 80%) rotate(180deg); } .item-Book .itemOut, .item-Zoom .itemOut, .item-Online .itemOut {width: 5rem;} .item-Book .itemOut::before, .item-Zoom .itemOut::before, .item-Online .itemOut::before {left: 4.85rem;} .cardBtn {width: 1.675rem; height: 1.675rem; bottom: 0; right: 0;} .cardOut {width: 2rem; height: 2rem;} .cardInfo > strong {font-size: 1rem; margin-top: 0.5rem; margin-bottom: 0.25rem; line-height: 1.3;} .cardInfo > .fee {font-size: 1rem;} .subLayout:not(.full) .courseDetail nav, .courseDetail > nav {top: 4.375rem ; margin-top: 1.5rem; padding: 0; z-index: 2;} .courseDetail > nav > a {padding:1.0625rem 0 0.875rem 0; flex: 1; max-width: 30%; text-align: center;} .courseDetail .detailRow {flex-direction: column; gap: 0.5rem; } .courseDetail .detailRow h3 {padding: 0; width: 100%;} .courseDetail .detailRow > div:not(.em) {padding: 0;} .courseViewInfo .infoRow > b.expense {flex-wrap: wrap; flex: 1; gap: 0.5rem 0;} .detailRow > div > p {font-size: 0.9375rem; padding-top: 2px; padding-bottom: 2px;} .detailRow > div > p.dash {margin-left: 0;} .detailRow > div > p.mb {margin-bottom: 1rem;} } @media (max-width:550px) { .courseItemList { display: flex; flex-direction: column; gap: 0.625rem;} .courseItemList .cardBox {box-shadow: none; border-radius: 0.5rem;} .couseListContent > h3:first-of-type {display: none;} .calendarSection {display: none;} } @media (max-width:385px) { .cateWrap > button {border-radius: 0.375rem;} .cateWrap > button > span {font-size: 0.875rem;} .itemType {font-size: 0.6875rem;} .itemOut {height: 1.5rem;} .item-Book .itemType, .item-Online .itemType, .item-Zoom .itemType {width: 4rem;} .item-Book .itemOut, .item-Zoom .itemOut, .item-Online .itemOut {width: 4.5rem;} .cardOut::after, .cardOut::before, .itemOut::after, .itemOut::before {width: 1.85rem; height: 1.85rem; } .item-Book .itemOut::before, .item-Zoom .itemOut::before, .item-Online .itemOut::before {left: 4.3975rem;} } /* 결제 */ main.payment h2 { border-bottom: 0.1875rem solid var(--color-bl1);} main.payment > section:first-of-type {margin-top: 4rem;} main.payment > section.inner {max-width: 61.875rem; } main.payment form fieldset {display: flex; flex-direction: column; width: 100%;} .paymentCompletInfo {padding: 1rem 0 3.5rem 0;} .paymentCompletInfo > strong { font-size: 1.875rem; font-weight: 800; line-height: 128%; color: var(--color-bl2);} .paymentCompletInfo > strong > b {color: var(--color-primary-1);} .paymentCompletInfo .feeWrap {padding-top: 1rem;} .paymentCompletInfo .feeWrap span {font-weight: 500; color: var(--color-gy2); font-size: 1.25rem;} .paymentCompletInfo .feeWrap strong {color: #ff6600; font-weight: 800; font-size: 1.375rem;} .paymentComplete .btnWrap { display:flex; justify-content: center; padding-bottom: 5rem;} .paymentComplete .btnWrap > a { color: var(--color-bl2); display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1005; gap:0.5rem; height: 3.1875rem; border-radius: 0.5rem;; font-weight: 500; background: var(--color-primary-1); color: var(--color-white); font-weight: 600;} .paymentComplete .btnWrap > a:hover {background: var(--color-primary-1-hover);} .paymentComplete.RegisterComplete { } @media (min-width: 991px) { main.join section.paymentComplete {margin: 5rem auto; } .paymentComplete .btnWrap > a { max-width: 11rem; } .paymentComplete .btnWrap {padding-bottom: 1rem;} } .paymnetRow {display: flex; padding: 3rem 0;} .subLayout main.payment .fullConWrap h3 {font-weight: 700; letter-spacing: -0.05em; font-size: 1.25rem; padding: 0; color: var(--color-bl1);} .paymnetRow > div {flex: 1;} .paymentTable .row, .payment .row {display: flex; align-items: center;} .paymentTable .row.th, .payment .row.th { background: var(--color-primary-1); padding: 0.875rem 0; border-radius: 0.25rem;} .paymentTable .row span, .payment .row span {text-align: center; letter-spacing: -0.05em; color: var(--color-gy2); font-weight: 500;} .paymentTable .row.th > span, .payment .row.th span {font-size: 0.9375rem; color:var(--color-white); opacity: 0.8; font-weight: 400;} .paymentTable { display: flex ; flex-direction: column;} .paymentTable .row {display: flex;} .paymentTable .row.td {padding: 0.875rem 0; border-bottom: 1px solid var(--color-line-w);} .paymentTable .row.td span {line-height: 138%; padding: 0 0.5rem; color: var(--color-gy2); font-size: 0.9375rem;} .paymentTable.stMemberForm .row > .stName > input:read-only, .paymentTable.stMemberForm .row > .stPhone > input:read-only {color: var(--color-primary-1); background: var(--color-bg-1);} .paymentTable .row > .product {width: calc(100% - 30rem);} .paymentTable .row > .biz {width: 5rem; } .paymentTable .row > .type {width: 7rem; } .paymentTable .row > .unit {width: 4rem;} .paymentTable .row > .price {width: 6rem;} .paymentTable .row > .sum {width: 8rem;} .paymentTable .row.sSindustry1 > .biz::after { content: '제조업';} .paymentTable .row.sSindustry2 > .biz::after { content: '건설업';} .paymentTable .row.sSindustry3 > .biz::after { content: '보건업';} .paymentTable .row.sSindustry > .biz::after { content: '기타업';} .paymentTable .row > .idx {width: 4rem; } .paymentTable .row > .stName {width: 10rem;} .paymentTable .row > .stPhone {flex: 1;} .paymentTable .row > .btnCol {width: 4rem; padding: 0; font-size: 1.25rem;} .paymentTable .row > .btnCol .deleteBtn { font-size: 1.125rem; transition: 0.3s;} .paymentTable .row > .btnCol .deleteBtn:hover { color: var(--color-primary-1);} /* .paymentTable .row.btnWrap {padding: 0;} */ .paymentTable .row.btnWrap > button.submitBtn { color: var(--color-white); background: var(--color-primary-1-dk); display: flex; justify-content: center; align-items: center; width: 100%; height: 2.875rem; border-radius: 0.5rem; font-weight: 600; max-width: 11rem; } .paymentTable .row.btnWrap > button.submitBtn:hover {background: var(--color-primary-1-li); } .paymentTable .row.editing > .btnCol .editBtn { background: var(--color-bg-1); color: var(--color-gy1); } .paymentTable .row > .btnCol .editBtn {border: 1px solid var(--color-line-w); display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 0.25rem; height:2.6425rem ;line-height: 0; background: var(--color-primary-1-dk); color: var(--color-white); font-size: 0.9375rem; font-weight: 600; transition: 0.3s; } .paymentTable .row > .btnCol .editBtn:hover {background: var(--color-primary-1); color: var(--color-white);} .paymentTable .row.serchMemberWrap {width: 100%; padding: 1.5rem 1.875rem 1rem 1.875rem; border: 1px solid var(--color-line-w); display: flex; flex-direction: column; align-items: flex-start; border-radius: 0.875rem; gap: 0.875rem; margin-bottom: 1rem;} .paymentTable .row.serchMemberWrap .rowInfo {color: var(--color-bl2); line-height: 1;} .paymentTable .row.serchMemberWrap > div {display: flex; gap: 0 0.375rem;} .paymentTable .row.serchMemberWrap button {all:unset; display:flex; cursor: pointer; font-size: 0.875rem; padding: 0.875rem 1.875rem ; border:1px solid var(--color-line-w); border-radius: 0.375rem; font-weight: 500; justify-content: center; align-items: center; background: var(--color-bg-1); gap:0.6125rem; transition: 0.3s;} #serchMember {background: var(--color-primary-1-dk); color: var(--color-white);} #serchMember i {font-size: 0.75rem;} #myselfAdd.hasOn, #myselfAdd:hover {background: var(--color-primary-1); color: var(--color-white);} #serchMember:hover {background: var(--color-primary-1-hover); color: var(--color-white);} .paymentTable .row input { border: 1px solid var(--color-line-w); border-radius: 0.375rem; padding: 0.6125rem 0.5rem; text-align: center; font-weight: 700; color: var(--color-bl1); } .paymentTable .row input:active, .paymentTable .row input:focus {border-color: var(--color-primary-1); color: var(--color-primary-1);} .paymentTable .row > .stName > input {width:100%; } .paymentTable .row > .stPhone > input {width: 100%; } .paymentTable .row input::placeholder {font-weight: 400; color: var(--color-gy1); font-size: 0.875rem;} /* .paymentTable.stMemberForm .row.th {background: var(--color-bg-1);} .paymentTable.stMemberForm .row.th > span { color: var(--color-gy1);} */ .paymentTable .row.td > .price { text-align: right;} .paymentTable .row.td > .sum { text-align: right; color: var(--color-bl1); font-weight: 600;} .paymentTable .row.td > .biz {color: var(--color-bl1); font-weight: 500;} .paymentTable .row.td > .product {text-align: left; display: flex;flex-direction: column; gap: 0.25rem;} .paymentTable .row.td > .product > b { color: var(--color-bl2); font-weight: 700; line-height: 138%; font-size: 1.125rem;} .paymentTable .row.td > .product > em {font-weight: 400; color: var(--color-primary-1); font-weight: 500; display: flex;} .paymentTable .row.td > .product > em::before { color: var(--color-gy2); padding-right: 0.25rem; } .paymentTable .row.td.item-Zoom > .product > em .endDate {display: none;} .paymentTable .row.td.item-Zoom > .product > em .startDate::after {content: '09:00~18:00'; padding: 0.25rem;} .paymentTable .row.td > .product > em .endDate::before {content: '~'; padding: 0 0.25rem;} .paymentTable .row.td.item-Zoom > .product > em::before {content: '수강일 :';} .paymentTable .row.td.item-Online > .product > em::before, .paymentTable .row.td.item-Book > .product > em::before {content: '수강기간 :'; } .paymentTable .row.td .price::after, .paymentTable .row.td .sum::after {content: '원'; } .paymentTable .row.td .unit::after {content: '명'; } .paymentTable .row.tf {justify-content: flex-end; padding: 1rem 0 0.5rem 0;} .paymentTable .row.tf > span {text-align: right; width: 100%; font-weight: 600; color:var(--color-black); padding-right: 1rem; } .paymentTable .row.tf > span strong { color:#ff6600; font-weight: 900; font-size:1.25rem; text-decoration: underline; text-decoration-thickness:2px; padding-right: 0.25rem;} .paymentTable .row.tf > span::before {content: "총 결제금액"; padding-right: 2rem; font-weight: 700; color:var(--color-black);} .details .paymentTable .row.tf > span::before {content: "총 합계";} .studnetForm .row > .studentName {width: 10rem; } .paymentTable .stAgree {padding: 1.5rem 1rem 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; border-bottom: 1px solid var(--color-line-w); } .paymentTable .stAgree > div:first-of-type {line-height: 138%; color: var(--color-bl2);} .paymentTable .stAgree > div.danggu {padding-left: 1rem; padding-left: 1.25rem; position: relative;} .paymentTable .stAgree > div.danggu::before {content: '※'; position: absolute; left: 0; top: 0; } .paymentTable .stAgree p {flex: 1; font-weight: 700; color: var(--color-bl1); line-height: 134%;} .paymentTable .stAgree label {cursor: pointer; } .paymentTable .stAgree label span { font-weight: 600; color: var(--color-bl1); font-size: 1rem;} .payment {margin-bottom: 5rem;} .payment .formContainer {border-bottom: 2px solid var(--color-bl1);} .payment .paymentComplete .formContainer {border-bottom: 1px solid var(--color-line-w);} .payment .selectPg {display: flex; gap: 0.5rem;} .payment .selectPg .pgItem input {display: none;} .payment .selectPg .pgItem label {display: flex; justify-content: center; align-items: center; font-size: 1rem; font-weight: 500; padding: 0.875rem 0; width: 7rem; border-radius: 0.25rem; border: 1px solid var(--color-line-w); cursor: pointer; transition: 0.3s; gap: 0.375rem;} .payment .selectPg .pgItem input[name="pay_method"]:checked + label {background: var(--color-primary-1); color: var(--color-white);} .payment .selectPg .pgItem label::before { content: '\f058'; font : var(--fa-font-solid); color: #bdb6df; } .payment .selectPg .pgItem input[name="pay_method"]:checked + label::before {color: var(--color-white);} main.payment .formStyle .btnWrap > button[type="submit"]:disabled {background: #ddd; color: #7f7f7f;} main.payment .formStyle .btnWrap > button[type="submit"]:disabled::before {content: '필수 정보를 입력해주세요.';} .modalBd #memberList {display: flex; flex-direction: column;} .modalBd #memberList {border: 1px solid #ddd; border-radius: 0.25rem;} .modalBd #memberList .row.th { display: flex; padding: 0.5rem 1rem; gap: 0.5rem; background: var(--color-primary-1-dk); border-radius: 0.25rem 0.25rem 0 0; order: -9;} /* .modalBd #memberList .row.td.has {order: -1;} */ .modalBd #memberList .row.td label {border-bottom: 1px solid #ddd; display: flex; padding: 0.875rem 1rem; cursor: pointer; transition: 0.3s;} .modalBd #memberList .row.td:last-of-type label {border-bottom: 0;} .modalBd #memberList .row span {text-align: center; transition: 0.3s;} .modalBd #memberList .row.th span {text-align: center; color: var(--color-white); font-weight: 400; font-size: 0.9375rem ; opacity: 0.85;} .modalBd #memberList .row.td span { line-height: 138%; letter-spacing: -0.025em;} .modalBd #memberList .row.th .mdID {width: 10rem; padding-left: 2rem; } .modalBd #memberList .row .mdID {width: 8rem;} .modalBd #memberList .row .mdName {width: 7rem; font-weight: 600; color: var(--color-bl2);} .modalBd #memberList .row .mdBirth {width: 6.5rem;} .modalBd #memberList .row .mdphone {flex: 1; } .modalBd #memberList .row.td > input[type="checkbox"] {display: none;} .modalBd #memberList .row.td label::before {content: '\f00c'; font: var(--fa-font-solid); border: 1px solid var(--color-line-w); line-height: 0; display: inline-flex; justify-content: center; align-items: center; align-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.625rem; transition: 0.3s;} .modalBd #memberList .row.td > input[type="checkbox"]:checked + label { background: var(--color-bg-1); } .modalBd #memberList .row.td > input[type="checkbox"]:checked + label span{color: var(--color-primary-1);} .modalBd #memberList .row.td > input[type="checkbox"]:checked + label::before { color: var(--color-white); background: var(--color-primary-1); } @media (max-width: 990px) { .detailInfo {padding: 2rem 0 1rem; margin-bottom: 3rem;} .detailInfo > div.info-tit > div {gap: 0.375rem;} .detailInfo > div.info-tit > div > strong {font-size: 1.5rem;} .detailInfo > div.info-payment {margin-top: 1.5rem;} .paymentTable .row.td > .product {width: 100%; padding: 0.5rem 0 1rem 0;} .paymentTable .row.td > span {padding: 0; width: auto;} .paymentTable .row.td > .biz {order: -2;} .paymentTable .row.td > .type {order: -1;} .paymentTable .row.td .stName {width: 6rem;} .subLayout .paymentTable .row.td > .biz {margin-right: 0.25rem;} .subLayout .paymentTable .row.td > .biz, .subLayout .paymentTable .row.td > .type {border-width: 1px; border-style: solid; border-radius: 100rem; padding: 0.375rem 1rem; font-size:0.8125rem; line-height: 1;} .paymentTable .row.sSindustry1 > .biz { color: #516ef3; border-color: #5e76e494; } .paymentTable .row.sSindustry2 > .biz{ color: #d57f10; border-color: #d57f1061;} .paymentTable .row.sSindustry3 > .biz { color: #1c9715; border-color: #1c971594;} .paymentTable .row.sSindustry > .biz{ color: var(--color-primary-1); border-color: #5d4a7d85;} .paymentTable .row.item-Zoom > .type { color: var(--data-type3); border-color: var(--data-type3); } .paymentTable .row.item-Online > .type{ color: var(--data-type1); border-color:var(--data-type1);} .paymentTable .row.item-Book > .type{ color: var(--data-type4); border-color: var(--data-type4);} .paymentTable .row.td > .unit::before {content: '인원 :'; padding-right: 0.25rem;} .paymentTable .row.td > .price::before {content: '단가 :'; padding-right: 0.25rem;} .paymentTable .row.td > .sum::before {content: '합계 :'; padding-right: 0.25rem;} .paymentTable .row.td > .unit::after{content: '원 /'; padding-right: 0.25rem;} .paymentTable .row.td > .price::after {content: '명 /'; padding-right: 0.25rem;} .details .btnWrap button {flex: 1;} .subLayout .paymentTable.stMemberForm {border-top: 1px solid var(--color-line-w);} .subLayout .paymentTable.stMemberForm .row.td {padding: 0.875rem 0; border-radius: 0; border-left: 0; border-top: 0; border-right: 0; gap: 0.5rem;} .paymentTable .row > .btnCol .editBtn, .paymentTable .row > .btnCol .deleteBtn {min-width: 3rem;} .details .btnWrap {padding-top: 0;} .paymentTable .row.btnWrap > button.submitBtn {width: 100%; max-width: 100%;} } @media (max-width: 410px) { .paymentTable .row.td > span.idx {display: none;} } /******************************************* 수강하기 (수강상세) *******************************************/ main[data-type="1"] .learnViewTop .type::before {content: '온라인교육';} main[data-type="4"] .learnViewTop .type::before {content: '우편교육';} .ldEndDate::before {content: '수강 종료일'; } .logResult::before {content: '마지막 수강일'; } .ctProgress::before {content: '진도율'; } .ctStstudyDate::before {content: '수강시간'; } .learnViewTop {display: flex; align-items: flex-start; flex-direction: column; position: relative; padding: 1rem 0 2rem 0; border-bottom: 3px solid var(--color-bl1);} .learnViewTop .type { display:inline-flex; font-size: 1rem; color: var(--color-white); padding: 0.5rem 1rem; border-radius: 100rem;} main[data-type="1"] .learnViewTop .type {background: var(--data-type1);} main[data-type="4"] .learnViewTop .type {background: var(--data-type4) ;} .learnViewTop .titleInfo { display: flex; align-items: center; width: 100%; } .learnViewTop .titleInfo > div:first-of-type {display: flex; flex: 1; align-items: center; } .learnViewTop .titleInfo > div:first-of-type > span {font-size: 1rem ; color: var(--color-gy1); font-weight: 600;} .learnViewTop .titleInfo > div:first-of-type > span::before {color: var(--color-gy2); padding-right: 0.375rem; font-size: 0.9375rem; font-weight: 500;} .learnViewTop .titleInfo > div:first-of-type > .ldEndDate {font-size: 1rem; font-weight: 700;} .learnViewTop .titleInfo > div:first-of-type > span::after { content: 'I'; font-weight: 200; color: var(--color-gy3); padding: 0 0.5rem; opacity: 0.6;} .learnViewTop .titleInfo > div:first-of-type > span:last-of-type:after {display: none;} .subLayout .learnViewTop h2 {padding-top: 1.625rem; margin-bottom: 0;} .subLayout .learnViewCon h3 { font-weight: 700; letter-spacing: -0.05em; font-size: 1.25rem; padding-bottom: 1rem; padding-top: 2rem; color: var(--color-bl1);} .subLayout .learnViewCon > div:first-of-type h3 {padding-top: 0;} .learnViewNotice {padding: 1.5rem 1.5rem; border: 1px solid var(--color-line-w); border-radius: 0.875rem; margin-bottom: 1rem; background: var(--color-bg-1);} .learnViewNotice .online, .learnViewNotice .book {display: none;} main[data-type="1"] .learnViewNotice .online {display: block;} main[data-type="4"] .learnViewNotice .book {display: block;} /*학습진행 단계*/ .learninngMap {width: 100%; display: flex; flex-direction: column; padding: 3rem 0 0 0; border: 1px solid var(--color-line-w); border-radius: 0.875rem; margin-bottom: 1rem;} .learninngMap-progress {display:flex; width:100%; text-align: center; width: 100%; padding-bottom: 1.25rem;} .learninngMap-progress .mapItem {position: relative; flex: 1; } .learninngMap-progress .mapItem .fill {position: relative; background: #f1f1f1; display: block; height: 0.5rem; } .learninngMap-progress .mapItem .fill::after, .learninngMap-progress .mapItem:first-child .fill {border-radius: 100rem 0 0 100rem; width: 50%; transform: translateX(100%); } .learninngMap-progress .mapItem:last-child .fill {border-radius: 0 100rem 100rem 0; width: 50%;} .learninngMap-progress .mapItem .fill::after {border-radius: 0;} .learninngMap-progress .mapItem.true .fill::after {content: ''; display: block; width: 100%; position: absolute; left: 50%; height: 100%; background: var(--color-primary-1); z-index: 2; transform: translateX(-100%); border-radius: 100rem; } .learninngMap-progress .mapItem.complet .fill::after {transform: translateX(-50%); width: 110%; ;} .learninngMap-progress .mapItem.true:first-of-type .fill::after {transform: translateX(-50%); width: 100%;} .learninngMap-progress .mapItem:last-child .fill::after {width: 200%; left: auto; right: 0; transform: translateX(0);} .learninngMap-progress .mapItem.true .dot {background: var(--color-primary-1-li) ; border-color: var(--color-primary-1-dk);} .learninngMap-progress .mapItem .dot {display: inline-block; position: relative; width: 1.125rem; height: 1.125rem; border: 0.1375rem solid var(--color-gy3); border-radius: 50%; transform: translateY(calc(-50% - 0.25rem)); background: var(--color-white); z-index: 3;} .learninngMap-progress .mapItem .step {color: var(--color-gy3); font-weight: 500; display: flex; flex-direction: column; gap: 0.375rem;} .learninngMap-progress .mapItem .step::after {display: none;} .learninngMap-progress .mapItem .step span::before {content: '진행 전'; color: var(--color-gy3); font-size: 0.8125rem; background: #f1f1f1; display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid #f1f1f1; opacity: 0.8; } .learninngMap-progress .mapItem.true .step span::before { color: var(--color-bl1); background: var(--color-white); border: 1px solid var(--color-gy3); opacity: 1; } .learninngMap-progress .mapItem.true.learning .step span::before {content: '학습 중';} .learninngMap-progress .mapItem.learning.true.complet .step span::before, .learninngMap-progress .mapItem.true.complet .step span::before {content: '완료'; background: var(--color-primary-1); color: var(--color-white); } .learninngMap-progress .mapItem.true .step {color: var(--color-bl1);} .learninngMap-progress .mapItem.true.complet .step {color: var(--color-primary-1); } .learninngMap-desc {padding: 1rem 1.5rem; border-top: 1px solid var(--color-line-w); text-align: center; color: var(--color-primary-1); background: var(--color-bg-1); font-weight: 600;} /*수강리스트*/ .listWrap {display: flex; flex-direction: column;} .listWrap > .chapter {display: flex; flex-wrap: wrap; padding: 1.25rem 1.5rem; border: 1px solid var(--color-line-w); border-radius: 0.5rem; margin-bottom: 0.875rem;;} .chapter:not(.noPlay) {cursor: pointer; transition: 0.3s;} .chapter .ctName {width: 100%; font-size: 1.25rem; font-weight: 600; color: var(--color-bl3); line-height: 135%; padding-bottom: 0.375rem;} .chapter .ctProgress::before, .chapter .ctStstudyDate::before {color: var(--color-gy2); padding-right: 0.25rem; font-weight: 500;} .chapter .ctInfo {flex: 1; display: flex; align-items: flex-end;} .chapter .ctInfo > span {font-weight: 700; color: var(--color-primary-1); font-size: 0.9375rem;} .chapter .ctInfo > span::after { content: 'I'; font-weight: 200; color: var(--color-gy3); padding: 0 0.5rem; opacity: 0.6;} .chapter .ctInfo > span:last-of-type:after {display: none;} .ctBtnWrap {transform: translateY(10%);} .ctBtnWrap > button {all: unset; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; font-size: 0.875rem; background: #cfd9e3; color: var(--color-gy1); font-weight: 500; border-radius: 0.25rem; height: 2.125rem; padding: 0 1em; gap: 0.375rem; transition: 0.3s; } .ctBtnWrap > button::before {content: '\f144'; font: var(--fa-font-solid); font-size: 0.75rem; color: var(--color-gy1); transition: 0.3s; position: relative; top: 1px;} .ctBtnWrap > button:hover {background: var(--color-primary-1-hover); color: var(--color-white);} .ctBtnWrap > button:hover::before {color: var(--color-white);} .chapter:not(.noPlay).chapter.noCtTest:hover, .chapter.noCtTest { align-items: center; align-content: center; justify-content: center; cursor: default; background: transparent; border: 1px solid var(--color-line-w);} .listWrap > .chapter[data-test="ctTestReady"], .listWrap > .chapter[data-test="ctTest"] { border-radius: 0.5rem 0.5rem 0 0; margin-bottom: 0;} .listWrap > .chapter[data-test="ctTestReady"] + .chapter.ctTest, .listWrap > .chapter[data-test="ctTest"] + .chapter.ctTest{ border-radius: 0 0 0.5rem 0.5rem; border-top: 0; margin-top: 0;} .chapter.ctTest {display: flex; align-items: center; align-content: center; justify-content: center; background: #cfd9e3; color: var(--color-gy1); font-weight: 600; margin-top: 0;} .chapter.ctTest.after {background: var(--color-bg-1); display: flex; align-items: center; align-content: center; justify-content: center; text-align: center; font-weight: 500; text-decoration: underline; text-underline-offset : 0.25rem; color: var(--color-gy1); font-weight: 600;} .chapter:not(.noPlay).ctTest:hover {background: var(--color-primary-1); color: var(--color-white);} .chapter.ctTest.after:hover {color: var(--color-primary-1); background: #f0ebf9; border-color: var(--color-line-w);} .chapter.noPlay .ctName {color: var(--color-gy3); padding-bottom: 0; font-weight: 500; } .chapter .ctName::before { content: "#" attr(data-idx); color: var(--color-primary-1); padding-right: 0.375rem;} .noPlay.chapter .ctName::before { color: var(--color-gy3); padding-right: 0.375rem; } .noPlay.chapter .ctProgressBar, .noPlay.chapter .ctProgress, .noPlay.chapter .ctStstudyDate {display: none;} .ctProgressBar {width: 100%; position: relative; padding: 3px 0 ; line-height: 0; margin-bottom: 0.5rem;} .ctProgressBar > progress {width: 100%; height: 0.5rem; border-radius: 100px; border-color: #f1f1f1; margin: 0; } .ctProgressBar > progress::-webkit-progress-bar {background: #f3f3f3; transition: 0.3s;} .ctProgressBar > progress::-webkit-progress-bar, .ctProgressBar > progress::-webkit-progress-value {border-radius: 100px;} .ctProgressBar > progress::-webkit-progress-value {background: var(--color-primary-1-li);} .chapter.chapterEmexam {text-align: center; justify-content: center; align-items: center; background: var(--color-primary-1-dk); opacity: 0.9; color: #ffffffeb; font-weight: 600; } .chapter.chapterEmexam b {color: #ffd600; padding-left: 0.25rem;} .chapter.chapterEmexam:not(.noPlay):hover {background: var(--color-primary-1-dk); color: #fff; opacity: 1; border-color: transparent;} .chapter.chapterEmexam.takeEnd { background: #f1f1f1; color: var(--color-gy1); border: 1px solid #ddd;} .chapter.chapterEmexam.takeEnd:hover { background: #ededed; color: var(--color-gy1); border: 1px solid #ddd;} /*토론*/ .LearnView .llDebateList {padding:10px; margin:15px 0; width:100%;font-size: 16px; border-radius: 5px; display: block; text-align: center; transition: 0.4s; background-color: transparent; border:1px solid #5f5f5f; color: #121212; font-weight: 500;} .LearnView .modalWrap { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1000; } .LearnView .modalContent { position:absolute; top: 40%; left:50%; transform: translate(-50%, -60%); width:94%; max-width:640px; border-radius: 12px;} .LearnView #debateModal .modalContent .modalCon {width: 100%; position: relative; top:0; left:0; transform: translate(0, 0);} .LearnView #closeModal {position:absolute; top:15px; right:20px; font-size:24px; cursor:pointer; color: #fff; opacity: 0.6; transition: 0.4s; z-index: 99;} .LearnView #closeModal:hover {opacity: 1;} .LearnView #callDebateListOff {padding:10px; margin:15px 0; width:100%;font-size: 16px; border-radius: 5px; display: block; text-align: center; border:1px solid #ccc; background: #f1f1f1; color:#5f5f5f;} .learnViewCon { padding-top: 3rem; } .learnViewSide .sideBox { display: flex; flex-direction: column; } .cirProgressWrap {display: flex; flex-direction: row; align-items: flex-end; gap: 1.5rem; padding: 0 0 1rem 0;} .cirProgressWrap > div:first-of-type > strong {font-weight: 700; color: var(--color-bl1); text-align: center;} .cirProgressWrap > div:last-of-type {display: flex; flex-direction: column; flex: 1; padding-bottom: 0.875rem; gap: 0.5rem;} .cirProgressWrap > div:last-of-type > span {display: flex; justify-content: space-between; font-size: 0.875rem;} .cirProgressWrap > div:last-of-type > span b {font-weight: 500; color: var(--color-gy1);} .cirProgressWrap > div:last-of-type > span strong {font-weight: 700; color: var(--color-primary-1);} .cirProgressWrap > div:last-of-type > span strong .red {color: var(--color-red);} .learnViewSide .sideInfo {padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;} .learnViewSide .sideInfo > strong {font-weight: 600; color: var(--color-bl1); font-size: 1.125rem;} .learnViewSide .btnWrap {padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.375rem;} .learnViewSide .btnWrap .csPds {background: var(--color-white); border: 1px solid var(--color-primary-1);color: var(--color-primary-1); width: 100%;} .learnViewSide .btnWrap button, .learnViewSide .btnWrap a {display: flex; justify-content: center; align-items: center; font-size: 1rem ; color: #fff; height: 3rem; border-radius: 0.375rem; color: #fff; font-weight: 500; background: var(--color-primary-1);} .learnViewSide .btnWrap a.end {background: #f1f1f1; color: var(--color-gy1); border: 1px solid #ddd;} .learnViewSide .btnWrap a {width: 100%; cursor: pointer;} .learnViewSide .btnWrap a:nth-of-type(n+2).reTake {background: var(--color-primary-1-dk)} .learnViewSide .btnWrap a:nth-of-type(n+2).certificateDown {background: #3e72ed; gap: 0.5rem;} .learnViewSide .btnWrap a:nth-of-type(n+2).certificateDown::before {content: '\f019'; font: var(--fa-font-solid); font-size: 0.75rem; transition: 0.3s; position: relative; top: 1px; opacity: 0.9; transition: 0.3s; } .learnViewSide .btnWrap a:nth-of-type(n+2).certificateDown:hover {background: #2f5fd1 ;} .learnViewSide .sideBox .sideBoxTitle { background: var(--color-primary-1-dk); border: 1px solid #ddd; border-radius: 0.625rem 0.625rem 0 0; padding-top: 1rem; padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; } .learnViewSide .sideBox .sideBoxTitle h3 {color: var(--color-white); font-weight: 500; padding: 0; } .learnViewSide .sideBox .sideBoxTitle .step { color:#efefef; padding: 0.4375rem 1rem; gap: 0.25rem; border-radius: 100rem; font-size: 0.875rem; color: var(--color-white);} [data-step="3"] .learnViewSide .sideBox .sideBoxTitle .step {background: #41bd3a; } [data-step="5"] .learnViewSide .sideBox .sideBoxTitle .step {background: #4385ed; } [data-step="-1"] .learnViewSide .sideBox .sideBoxTitle .step, [data-step="-5"] .learnViewSide .sideBox .sideBoxTitle .step {background: #e74949; } .criteria {display: flex; flex-direction: column; flex: 1; align-items: flex-start; gap: 0.375rem; padding-top: 1rem; border-top: 1px solid var(--color-line-w);} .criteria > b {font-size: 0.8125rem; color: var(--color-bl1); padding-bottom: 0.25rem; padding-top: 0.25rem; font-weight: 700;} .criteria > span {display: flex; align-items: center; gap: 0.25rem; width: 100%; text-align: left; font-size: 0.875rem; font-weight: 500;} .criteria > span > b { flex: 1; color: var(--color-gy3); } .criteria > span::before {content: ''; display: inline-block; width: 0.3125rem; height: 0.3125rem; background: var(--color-gy3); border-radius: 50%; opacity: 0.6; } .criteria > span > strong::before {content: '\f057'; font: var(--fa-font-solid); color: var(--color-gy3); opacity: 0.6;} .criteria > span[data-step="충족"], .criteria > span[data-step="충족"] > b {color: var(--color-primary-1); } .criteria > span[data-step="충족"]::before {background: var(--color-primary-1); opacity: 1;} .criteria > span[data-step="충족"] > strong::before {content: '\f058'; font: var(--fa-font-solid); color: var(--color-primary-1); opacity: 1;} main[data-type="1"] .learnViewSide .btnWrap .csPds::after {content: '보충학습자료';} main[data-type="4"] .learnViewSide .btnWrap .csPds {gap: 0.5rem;} main[data-type="4"] .learnViewSide .btnWrap .csPds::after {content: '교재 다운로드';} main[data-type="4"] .learnViewSide .btnWrap .csPds::before {content: '';} main[data-type="4"] .learnViewSide .btnWrap .csPds::before {content: '\f019'; font: var(--fa-font-solid); font-size: 0.75rem; transition: 0.3s; position: relative; top: 1px; opacity: 0.9; transition: 0.3s; } main[data-type="4"] .learnViewSide .btnWrap .csPds:hover {background: var(--color-bg-1);} main[data-step="5"] .criteria > span[data-step="응시"] > b {color: var(--color-primary-1); } main[data-type="4"] .learnViewSide .btnWrap .csPds:hover {background: var(--color-bg-1);} main[data-step="5"] .criteria > span[data-step="응시"]::before {background: var(--color-primary-1); opacity: 1;} main[data-type="4"] .learnViewSide .btnWrap .csPds:hover {background: var(--color-bg-1);} main[data-step="5"] .criteria > span[data-step="응시"] > strong::before {content: '\f058'; font: var(--fa-font-solid); color: var(--color-primary-1); opacity: 1;} /*사이클 프로그래스*/ @property --percent { syntax: ''; inherits: true; initial-value: 0; } .cirProgressSvg {transform: rotate(-90deg); width: 100%; height: 100%;} .cirProgressSvg-Bg {fill: none; stroke: #eee; stroke-width: 3;} .cirProgressSvg-Bar{fill: none; stroke: var(--color-primary-1); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--percent)); transition: stroke-dashoffset .6s ease;} .cirProgressLabel {position: absolute; inset: 0; font-size: 1.25rem; font-weight: 900; display: flex; justify-content: center; align-items: center; font-weight: 600;} .cirProgressLabel::after {content: '%'; font-size: 0.8125rem; padding-left: 2px; color: var(--color-gl1);} @media (min-width: 991px) { .learnViewCon {display: grid; grid-template-columns: auto 21rem; gap: 0 3.25rem; align-items: start;} .learnViewCon .learnViewSide { grid-column: 2 / 3; grid-row: 1 / 6; position: sticky; top: 1rem; align-self: start;display: flex; flex-direction: column; } .learnViewCon .learnViewSide > div { flex: 1; display: flex; flex-direction: column; gap: 1rem; } .learnViewSide .sideBox .sideBoxCon {border: 1px solid var(--color-line-w); border-radius: 0 0 0.625rem 0.625rem; padding-top: 1.25rem; padding-bottom: 1rem;} .learnViewSide .sideBox .sideBoxTitle, .learnViewSide .sideBox .sideBoxCon {padding-left: 1.375rem; padding-right: 1.375rem;} .cirProgressWrap > div:first-of-type {display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; width: 6.25rem;} .cirProgress {--percent: 0; position: relative; width: 6.25rem;} .chapter:not(.noPlay):hover {background: var(--color-bg-1); border-color: var(--color-primary-1);} .chapter:not(.noPlay):hover .ctProgressBar > progress::-webkit-progress-bar {background: #dfdfdf;} } @media (max-width: 990px) { .learnViewSide .sideBox .sideBoxTitle {background: transparent; border: 0; padding-top: 2.5rem; padding-bottom: 1rem;} .learnViewSide .sideBox .sideBoxTitle h3 {color: var(--color-bl1); font-weight: 800;} .learnViewCon {display: flex ; flex-direction: column; padding-top: 0;} .learnViewCon .learnViewSide {order: -3;} .learnViewCon > div:nth-of-type(3) {order: -2; display: none;} .learnViewCon > div:nth-of-type(4) {order: -1;} .learnViewCon > div:nth-of-type(1) {padding-top: 2rem;} .learnViewSide .sideBox .sideBoxCon { display: grid; grid-template-columns: 9rem auto ; padding: 1.5rem 1.5rem; border: 1px solid var(--color-line-w); border-radius: 0.5rem 0.5rem 0 0; border-bottom: 0; align-items: center; gap: 0 2rem;} .cirProgressWrap { grid-row: 1 / 2; padding-bottom: 1rem; display: flex; align-items: center; justify-content: center; align-items: center; position: relative;} .cirProgressWrap > div:first-of-type {width: 100%;} .cirProgressWrap > div:last-of-type {display: none;} .cirProgressWrap > div:first-of-type > strong {display: none;} .cirProgress {position: relative;} .cirProgress .cirProgressLabel { font-size: 200%; align-items: center; justify-content: center; padding-top: 0.87rem; color: var(--color-primary-1);} .cirProgress .cirProgressLabel::before{content: '총 진도율'; font-size: 0.875rem; width: 100%; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -220%);color: var(--color-bl1);font-weight: 800; letter-spacing: -0.05em; } .criteria {border-top: 0; padding-top: 0;} .criteria > b { font-size: 1rem; text-align: left; padding:0 0 0.875rem 0;} .criteria {padding-bottom: 1rem;} .learnViewSide .btnWrap {width: 100%; grid-column: 1/2 span; padding-top: 0;} .learninngMap { border-radius: 0; border-radius: 0 0 0.5rem 0.5rem;} .learnViewNotice {border-radius: 0.5rem;} .learnViewSide .btnWrap button, .learnViewSide .btnWrap a {height: 2.5rem; font-size:0.875rem ;} } @media (max-width: 768px) { .learnViewTop .type { font-size: 0.875rem; padding: 0.375rem 1rem; border-radius: 100rem;} .learnViewSide .sideBox .sideBoxCon { grid-template-columns: 28% auto ; gap: 0 1.5rem; padding: 1rem;} .criteria > b { padding-bottom: 0.5rem;} .learninngMap {padding-top: 2rem;} .cirProgress .cirProgressLabel { font-size: 150%;} .cirProgress .cirProgressLabel::before { transform: translate(-50%, -180%); font-size: 0.875rem; } .learnViewTop .titleInfo > div:first-of-type {flex-direction: column; align-items: flex-start; gap: 0.5rem;} .learninngMap-progress .mapItem .step {font-size: 0.875rem;} .learninngMap-progress .mapItem .step span::before{font-size: 0.6875rem;} .learnViewTop .titleInfo > div:first-of-type > span::after {display: none; } .learnViewNotice {padding: 1rem;} .learninngMap-desc { font-size: 0.9375rem; padding: 1rem;} .listWrap > .chapter {padding: 1rem; font-size: 1rem; } .chapter .ctName {font-size: 1rem; padding-bottom: 0;} .chapter .ctBtnWrap {display: none;} .learnViewTop .titleInfo > div:first-of-type > .ldEndDate, .learnViewTop .titleInfo > div:first-of-type > span::before, .learnViewTop .titleInfo > div:first-of-type > span {font-size: 0.875rem;} .chapter .ctInfo > span {font-size: 0.8125rem;} .ctProgressBar > progress {height: 4px;} } @media (max-width: 450px) { .learnViewSide .sideBox .sideBoxCon { grid-template-columns: 33% auto ; gap: 0 1.25rem; padding: 0; border: 0;} .learninngMap-progress .mapItem .dot {width: 1rem; height: 1rem; } .cirProgress .cirProgressLabel {padding-top: 1rem;} .learninngMap {margin-top: 0.875rem; border-radius: 0.5rem;} .cirProgress .cirProgressLabel::before {transform: translate(-50%, -150%);} }