/* mobile - detail */ /* 상세페이지 - 신규 font 연결 */ /* tenda font */ @font-face { font-family: 'Tenada'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* s-coredream font */ @font-face { font-family: 'S-CoreDream-1Thin'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-1Thin.eot'); src:url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-1Thin.woff') format('woff'); font-style: normal; } @font-face { font-family: 'S-CoreDream-4Regular'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-4Regular.eot'); src:url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-4Regular.woff') format('woff'); font-style: normal; } @font-face { font-family: 'S-CoreDream-5Medium'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-5Medium.eot'); src:url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-5Medium.woff') format('woff'); font-style: normal; } @font-face { font-family: 'S-CoreDream-6Bold'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-6Bold.eot'); src:url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-6Bold.woff') format('woff'); font-style: normal; } @font-face { font-family: 'S-CoreDream-7ExtraBold'; src: url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-7ExtraBold.eot'); src:url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-7ExtraBold.woff') format('woff'); font-style: normal; } /* bobaesum jindo */ @font-face { font-family: 'BobaesumJindoTTF'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/BobaesumJindoTTF.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* common */ h1, h2, h3, h4, h5, h6, p, ul, li, ol {margin: 0; padding: 0;} #m_contents {padding-top: 63px;} .social-worker * {box-sizing: border-box !important; font-style: normal; font-family: 'S-CoreDream-4Regular';} /* visual */ /* -start- 2025/02 visual height 전체 수정 */ #detail-visual.social-worker-visual {background: url('/mobi/img/2024/detail/mo-section-feature-bg.png') no-repeat 50% 50% / cover; height: calc(85vh - 63px);} /* -end- 2025/02 visual height 전체 수정 */ #detail-visual .inner {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; width: 100%;} #detail-visual .inner .sub-tit {margin-bottom: 11.0677vw;} #detail-visual .inner .sub-tit p {font-size: 3.9063vw; color: #fff; display: block; padding: 2.0833vw 5.2083vw; border: 1px solid #fff;} #detail-visual .inner .tit > span {display: block; text-align: center; font-size: 10.4167vw; color: #fff; font-family: 'Tenada'; letter-spacing: -0.07em; -webkit-text-stroke-width: 0.6510vw; -webkit-text-stroke-color: black;} #detail-visual .inner .tit > strong {font-size: 16.9271vw; font-family: 'Tenada'; color: #fff100; letter-spacing: -0.07em; -webkit-text-stroke-width: 0.6510vw; -webkit-text-stroke-color: black; margin-bottom: 6.5104vw;} #detail-visual .inner .tit p {font-size: 6.5104vw; color: #fff; display: block; margin-bottom: 5.2083vw;} #detail-visual .inner .tit p b {font-family: 'S-CoreDream-5Medium'; position: relative; z-index: 1;} #detail-visual .inner .tit p b::before {content: ''; display: block; position: absolute; bottom: -0.7813vw; left: 0; width: 100%; height: 2.3438vw; background: url('/mobi/img/2024/detail/mo-tit-acc.png') no-repeat 50% 50% / 100%; z-index: -1;} #detail-visual .inner .tit .label {width: fit-content; padding: 2.0833vw 8.7240vw; background-color: #fff; margin: 0 auto; display: block;} #detail-visual .inner .tit .label span {color: #646fff; font-family: 'S-CoreDream-6Bold'; font-size: 3.9063vw;} /* visual banner */ #detail-visual-banner {padding: 4.1667vw 0 8.8542vw; background-color: #a0a7ff; text-align: center;} #detail-visual-banner ul li{position: relative;} #detail-visual-banner ul li:nth-child(n + 2) {padding-top: 3.7760vw; margin-top: 8.9844vw;} #detail-visual-banner ul li:nth-child(n + 2)::after{content: ''; display: block; position: absolute; top: 0; left: 50%; width: calc(100% - 4.6875vw); height: 1px; background-color: #fff;transform: translateX(-50%);} #detail-visual-banner ul li strong {font-size: 4.6875vw; color: #fff; font-family: 'S-CoreDream-7ExtraBold'; display: block; margin-bottom: 8.0729vw; z-index: 1; position: relative;} #detail-visual-banner ul li strong span {display: block; font-size: 3.6458vw;} #detail-visual-banner ul li:last-child strong {margin-bottom: 4.6875vw;} #detail-visual-banner ul li p {font-size: 3.9063vw; color: #fff; font-family: 'S-CoreDream-5Medium'; line-height: 1.5; position: relative; z-index: 1;} #detail-visual-banner ul li i {position: absolute; bottom: -6.2500vw; right: 19.5313vw;} #detail-visual-banner ul li:first-child i img {width: 23.0469vw; } #detail-visual-banner ul li:nth-child(2) i img {width: 18.4896vw; } #detail-visual-banner ul li:last-child i img {width: 17.7083vw; } /* detail-content */ section.detail-info-content {padding: 10.4167vw 0 7.8125vw;} section.detail-info-content .cont-tit {text-align: center; margin-bottom: 10.0260vw;} section.detail-info-content .cont-tit p {font-size: 4.1667vw; display: block; margin-bottom: 0.5208vw;} section.detail-info-content .cont-tit strong {font-size: 4.1667vw; font-family: 'S-CoreDream-6Bold';} section.detail-info-content .price-ex-box { margin: 0 1.9531vw 7.8125vw; background-color: #e1e3ff; padding: 4.1667vw 0; box-shadow: 2px 2px 24px 0px rgba(65,65,65,0.2); } section.detail-info-content .price-ex-box ul {display: flex; align-items: center; justify-content: center;} section.detail-info-content .price-ex-box ul:last-child {margin-top: 4.0365vw;} section.detail-info-content .price-ex-box ul li:not(:last-child){margin-right: 3.2552vw; padding-right: 3.2552vw; position: relative;} section.detail-info-content .price-ex-box ul li:not(:last-child)::after{content: ''; display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 3.3854vw; background-color: #ababab; transform: translateY(-50%);} section.detail-info-content .price-ex-box ul li.new {position: relative;} section.detail-info-content .price-ex-box ul li.new::before{content: '신규회원 할인 적용가'; display: block; position: absolute; top: -6.5104vw; left: 0; padding: 1.3021vw 0.9115vw; width: max-content; background-color: #a0a7ff; z-index: 1; font-size: 2.8646vw; color: #fff; font-family: 'S-CoreDream-5Medium';} section.detail-info-content .price-ex-box ul li span {font-size: 3.3854vw; padding-right: 0.7813vw;} section.detail-info-content .price-ex-box ul li span.fc-purple {color: #646fff; font-family: 'S-CoreDream-6Bold';} section.detail-info-content .price-ex-box ul li strong {font-size: 3.3854vw; font-family: 'S-CoreDream-6Bold';} section.detail-info-content .detail-info-box .tit > p:not(.sub-desc) {display: block; font-size: 5.8594vw; text-align: center; margin-bottom: 3.9063vw; font-family: 'S-CoreDream-5Medium';} section.detail-info-content .detail-info-box .tit > p:not(.sub-desc) strong {font-family: 'S-CoreDream-7ExtraBold'; color: #4a57ff;} section.detail-info-content .detail-info-box .tit p.sub-desc {font-size: 3.6458vw; line-height: 1.5; text-align: center; font-family: 'S-CoreDream-5Medium'; color: #444; margin-bottom: 2.0833vw;} section.detail-info-content .detail-info-box .tit p.sub-desc span {font-family: 'S-CoreDream-5Medium'; position: relative; z-index: 1;} section.detail-info-content .detail-info-box .tit p.sub-desc span::before {content: ''; display: block; position: absolute; bottom: 0; left: 50%; width: 100%; height: 2.3438vw; background-color: #e1e3ff; transform: translateX(-50%); z-index: -1;} section.detail-info-content .detail-info-box .tit p.sub-desc b {font-family: 'S-CoreDream-7ExtraBold'; } section.detail-info-content .detail-info-box .fc-red {color: #ff5555; font-family: 'S-CoreDream-5Medium'; font-size: 3.1250vw; text-align: center; display: block; margin-bottom: 5.7292vw; line-height: 1.5;} section.detail-info-content .package-list {margin: 0 2.0833vw 6.5104vw;} section.detail-info-content .package-list li {padding: 3.9063vw 0 6.7708vw; text-align: center; border: 0.6510vw solid #444; box-shadow: 2px 2px 24px 0px rgba(65,65,65,0.2);} section.detail-info-content .package-list li:nth-child(n + 2) {margin-top: 4.2969vw;} .detail-info-content .detail-info-box .package-list li.purple {border-color: #a0a7ff;} .detail-info-content .detail-info-box .package-list li.blue {border-color: #3fa2f6;} .detail-info-content .detail-info-box .package-list li.orange {border-color: #ff7f3e;} .detail-info-content .detail-info-box .package-list li.pink {border-color: #ff8a8a;} .detail-info-content .detail-info-box .package-list li.green {border-color: #54bab9;} section.detail-info-content .package-list li .top-box .package-tit {margin-bottom: 2.6042vw;} section.detail-info-content .package-list li .top-box .package-tit > strong {display: block; text-align: center; margin-bottom: 2.3438vw; font-family: 'S-CoreDream-6Bold'; font-size: 5.8594vw;} section.detail-info-content .package-list li .top-box .package-tit > span {font-size: 3.6458vw; color: #444; letter-spacing: -0.04em; font-family: 'S-CoreDream-5Medium';} section.detail-info-content .package-list li .top-box .package-price {display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; position: relative;} section.detail-info-content .package-list li .top-box .package-price::after {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 46.7448vw; height: 2.0833vw; background: url('/mobi/img/2024/detail/mo-package-price-arrow.png') no-repeat 50% 50% / 100% auto; z-index: -1;} section.detail-info-content .package-list li .top-box .package-price > span {font-size: 3.1250vw; letter-spacing: -0.04em; font-family: 'S-CoreDream-5Medium';} section.detail-info-content .package-list li .top-box .package-price .acc {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 14.3229vw; height: 14.3229vw; background-color: #4d4d4d; border-radius: 50%; margin: 0 8.7240vw 0 5.3385vw;} section.detail-info-content .package-list li .top-box .package-price .acc span {font-size: 3.2552vw; color: #fff; font-family: 'S-CoreDream-5Medium';} section.detail-info-content .package-list li .top-box .package-price .acc b {font-family: 'S-CoreDream-5Medium'; font-size: 3.9063vw; color: #f7ff7e; letter-spacing: -0.04em;} section.detail-info-content .package-list li .top-box .package-price > strong {font-size: 5.7292vw; font-family: 'S-CoreDream-6Bold'; margin-top: 0vw;} section.detail-info-content .package-list li .top-box .package-price > strong em {font-size: 2.6042vw; display: block; font-family: 'S-CoreDream-5Medium'; color: #444; } section.detail-info-content .detail-info-box .package-list li.purple .package-tit strong, section.detail-info-content .detail-info-box .package-list li.purple .package-price strong {color: #a0a7ff;} section.detail-info-content .detail-info-box .package-list li.blue .package-tit strong, section.detail-info-content .detail-info-box .package-list li.blue .package-price strong {color: #3fa2f6;} section.detail-info-content .detail-info-box .package-list li.orange .package-tit strong, section.detail-info-content .detail-info-box .package-list li.orange .package-price strong {color: #ff7f3e;} section.detail-info-content .detail-info-box .package-list li.pink .package-tit strong, section.detail-info-content .detail-info-box .package-list li.pink .package-price strong {color: #ff8a8a;} section.detail-info-content .detail-info-box .package-list li.green .package-tit strong, section.detail-info-content .detail-info-box .package-list li.green .package-price strong {color: #54bab9;} /* btn-box */ section.detail-info-content .package-list li .btn-box {margin-top: 3.9063vw; padding: 0 5.0781vw;} section.detail-info-content .package-list li .btn-box a {display: flex; align-items: center; justify-content: center; text-align: center; font-size: 4.4271vw; font-family: 'S-CoreDream-6Bold'; padding: 4.4271vw 0; color: #fff; position: relative;} section.detail-info-content .detail-info-box .btn-box a::after{content: ''; position: absolute; top: 1.3021vw; right: -1.3021vw; width: 10.5469vw; height: 16.0156vw; background: url('/mobi/img/2024/detail/package-ico.png') no-repeat 50% 50% / 100% auto; z-index: 1; animation: cursor-ani 0.5s infinite alternate ease-in-out;} @keyframes cursor-ani{ 0%{transform: translateY(0);} 100%{transform: translateY(10px);} } section.detail-info-content .detail-info-box .package-list li.purple .btn-box a {background-color: #a0a7ff;} section.detail-info-content .detail-info-box .package-list li.blue .btn-box a {background-color: #3fa2f6;} section.detail-info-content .detail-info-box .package-list li.orange .btn-box a {background-color: #ff7f3e;} section.detail-info-content .detail-info-box .package-list li.pink .btn-box a {background-color: #ff8a8a;} section.detail-info-content .detail-info-box .package-list li.green .btn-box a {background-color: #54bab9;} /* bottom-acc */ .detail-info-content .detail-info-box .package-list li .bottom-acc {display: flex; align-items: center; gap: 2.3438vw; justify-content: center; padding-top: 2.6042vw; margin-top: 3.9063vw; position: relative;} .detail-info-content .detail-info-box .package-list li .bottom-acc::after{content: ''; display: block; position: absolute; top: 0; left: 50%; width: calc(100% - 10.1563vw); height: 1px; background-color: #222;transform: translateX(-50%);} .detail-info-content .detail-info-box .package-list li.pink .bottom-acc::after {background-color: #ff8a8a;} .detail-info-content .detail-info-box .package-list li.green .bottom-acc::after {background-color: #54bab9;} .detail-info-content .detail-info-box .package-list li .bottom-acc i {display: flex; align-items: center; justify-content: center; width: 8.3333vw;} .detail-info-content .detail-info-box .package-list li .bottom-acc i img {width: 100%; display: block;} .detail-info-content .detail-info-box .package-list li .bottom-acc span {font-size: 3.3854vw; font-family: 'S-CoreDream-5Medium'; color: #444; letter-spacing: -0.04em;} /* notice-box */ .detail-info-content .detail-info-box .notice-box {margin: 0 1.9531vw;} .detail-info-content .detail-info-box .notice-box strong {font-size: 3.3854vw; font-family: 'S-CoreDream-7ExtraBold'; display: block; margin-bottom: 3.6458vw; color: #444; letter-spacing: -0.04em;} .detail-info-content .detail-info-box .notice-box p {font-size: 2.8646vw; line-height: 1.6; color: #666; letter-spacing: -0.04em; display: flex; align-items: baseline; gap: 4px; word-break: keep-all;} /* feature-wrapper */ #feature-wrapper {padding: 7.8125vw 1.3021vw 9.1146vw; background-color: #f5f6ff;} #feature-wrapper .inner {background-color: #ffd973; border-radius: 2.6042vw; border: 0.3906vw solid #000;} #feature-wrapper .feature-box {background-color: #fff;border-radius: 2.6042vw; border: 0.3906vw solid #000; margin: 3.9063vw;} #feature-wrapper .feature-box .tit strong {text-align: center; margin: 6.6406vw 0 5.2083vw; letter-spacing: -0.05em; color: #ffc62c; font-family: 'BobaesumJindoTTF' !important; font-size: 6.2500vw; display: block; -webkit-text-stroke-width: 0.1302vw; -webkit-text-stroke-color: #000;} #feature-wrapper .feature-box .cont-list-wrapper > div:nth-child(n + 2) {padding-top: 5.0781vw; position: relative;} #feature-wrapper .feature-box .cont-list-wrapper > div:nth-child(n + 2)::after{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 1px; width: calc(100% - 2.0833vw); background: url('/mobi/img/2024/detail/section-feature-dash.png') no-repeat 50% 50% / 100% auto;} #feature-wrapper .feature-box .cont-box {padding-left: 1.5625vw; position: relative;} #feature-wrapper .feature-box .cont-box .txt-box {position: relative; z-index: 2;} #feature-wrapper .feature-box .cont-box .txt-box p {display: inline; font-size: 3.6458vw; letter-spacing: -0.06em; color: #333; line-height: 1.6;} #feature-wrapper .feature-box .cont-box .num {padding-right:4px; font-size: 10.4167vw;font-family: 'Tenada' !important; display: inline; -webkit-text-stroke-width: 0.2604vw; -webkit-text-stroke-color: #000; letter-spacing: -0.1em; line-height: normal;} #feature-wrapper .feature-box .cont-box .txt-box p b {font-family: 'S-CoreDream-6Bold';} #feature-wrapper .feature-box .cont-box .txt-box p + span {display: block; margin-top: 2.0833vw; font-size: 5.2083vw; font-family: 'S-CoreDream-6Bold'; color: #ff4d4d; position: relative; z-index: 1; letter-spacing: -0.04em; width: fit-content;} #feature-wrapper .feature-box .cont-box .txt-box p + span::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.7344vw; background-color: #ffe3e3; z-index: -1;} #feature-wrapper .feature-box .cont-box .ico {position: absolute; bottom: 0; right: 0;} #feature-wrapper .feature-box .cont-box .ico img {display: block; width: 100%;} /* btn-list */ #feature-wrapper .feature-box .btn-list {margin-top: 2.6042vw;} #feature-wrapper .feature-box .btn-list li:not(:last-child) {margin-bottom: 1.3021vw;} #feature-wrapper .feature-box .btn-list li a {display: flex; align-items: center; padding: 1.8229vw; border-radius: 25px; border: 1px solid #fec35b; color: #fec35b; font-size: 2.3438vw; font-family: 'S-CoreDream-7ExtraBold'; width: fit-content; box-sizing: border-box; gap: 1.3021vw;} #feature-wrapper .feature-box .btn-list li a i {display: flex; align-items: center; justify-self: center; width: 0.7813vw;} #feature-wrapper .feature-box .btn-list li a i img {display: block; width: 100%;} /* box1 */ #feature-wrapper .feature-box .cont-box.box1{padding-bottom: 20.8333vw;} #feature-wrapper .feature-box .cont-box.box1 .num {color: #ffb1b1;} #feature-wrapper .feature-box .cont-box.box1 .ico {width: 26.4323vw; bottom: 2.7344vw; right: 2.2135vw;} /* box2 */ #feature-wrapper .feature-box .cont-box.box2{padding-bottom: 17.5781vw;} #feature-wrapper .feature-box .cont-box.box2 .num {color: #8ecbff;} #feature-wrapper .feature-box .cont-box.box2 .ico {width: 30.5990vw; bottom: 2.6042vw; right: 2.6042vw;} /* box3 */ #feature-wrapper .feature-box .cont-box.box3{padding-bottom: 2.8646vw;} #feature-wrapper .feature-box .cont-box.box3 .num {color: #fec35b;} #feature-wrapper .feature-box .cont-box.box3 .ico {width: 31.7708vw; bottom: 3.9063vw; right: 2.6042vw;} /* box4 */ #feature-wrapper .feature-box .cont-box.box4{padding-bottom: 14.7135vw;} #feature-wrapper .feature-box .cont-box.box4 .num {color: #ffe552;} #feature-wrapper .feature-box .cont-box.box4 .ico {width: 28.9063vw; bottom: 2.6042vw; right: 3.1250vw;} #feature-wrapper .feature-box .cont-box.box4 span {font-family: 'S-CoreDream-6Bold'; position: relative; z-index: 1;} #feature-wrapper .feature-box .cont-box.box4 span::after {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.7344vw; background-color: #fff8d0; z-index: -1;} /* box5 */ #feature-wrapper .feature-box .cont-box.box5{padding-bottom: 18.75vw;} #feature-wrapper .feature-box .cont-box.box5 .num {color: #d3ee98;} #feature-wrapper .feature-box .cont-box.box5 .ico {width: 28.6458vw; bottom: 2.6042vw; right: 0;} #feature-wrapper .feature-box .cont-box.box5 b.big {position: relative; z-index: 1; display: inline-block; font-size: 4.1667vw;} #feature-wrapper .feature-box .cont-box.box5 b.big::after {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.7344vw; background-color: #efffcc; z-index: -1;} /* ***** (2025/1) 미용학 추가 css ***** */ /* visual */ /* -start- 2025/02 visual height 전체 수정 */ #detail-visual.beauty-visual {background: url('/mobi/img/2024/detail/beauty/mo-section-beauty-bg.png') no-repeat 50% 50% / cover; height: calc(85vh - 63px);} /* -end- 2025/02 visual height 전체 수정 */ #detail-visual.beauty-visual .inner .sub-tit p {color: #333; border-color: #333;} #detail-visual.beauty-visual .inner .tit > strong {color: #f793b9; font-size: 15.6250vw; line-height: 1.4;} #detail-visual.beauty-visual .inner .tit p {color: #333; font-size: 5.2083vw; line-height: 1.4;} #detail-visual.beauty-visual .inner .tit p b::before{display: none;} /* banner */ .beauty #detail-visual-banner {background-color: #f4bebd;} .beauty section.detail-info-content .price-ex-box {background-color: #ffd4d4;} .beauty section.detail-info-content .price-ex-box ul li span.fc-purple {color: #ff6767;} .beauty section.detail-info-content .price-ex-box ul li.new::before {background-color: #ff8a8a;} .beauty section.detail-info-content .detail-info-box .tit > p:not(.sub-desc) strong {color: #ff6767;} .beauty section.detail-info-content .detail-info-box .tit p.sub-desc span::before {background-color: #fef9d7;} /* ***** (2025/1) 보육교사 추가 css ***** */ /* visual */ /* -start- 2025/02 visual height 전체 수정 */ #detail-visual.child-visual {background: url('/mobi/img/2024/detail/child/mo-section-child-bg.png') no-repeat 50% 50% / cover; height: calc(85vh - 63px);} /* -end- 2025/02 visual height 전체 수정 */ #detail-visual.child-visual .inner .tit > strong {color: #ff78d1; line-height: 1.1;} #detail-visual.child-visual .inner .tit p:nth-of-type(1) {margin-bottom: 2.7344vw;} #detail-visual.child-visual .inner .tit p:nth-of-type(2) {margin-bottom: 0;} #detail-visual.child-visual .inner .tit .label {margin-bottom: 2.7344vw; padding: 2.0833vw 4.5573vw;} #detail-visual.child-visual .inner .tit .label span {color: #21299b;} #detail-visual.child-visual .inner .tit p b::before{display: none;} /* banner */ .child #detail-visual-banner {background-color: #79c2f5;} /* detail-content */ .child section.detail-info-content .cont-tit strong{background: linear-gradient(to left, #0568ae, #4eb7ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;} .child section.detail-info-content .price-ex-box{background-color: #c9e9ff;} .child section.detail-info-content .price-ex-box ul li.new::before{background-color: #6aacdb;} .child section.detail-info-content .price-ex-box ul li span.fc-purple{color: #6aacdb;} .child section.detail-info-content .detail-info-box .tit > p:not(.sub-desc) strong{color: #1b8fe1;} .child section.detail-info-content .detail-info-box .tit p.sub-desc span::before{background-color: #ffe2f5;} .child section.detail-info-content .detail-info-box .tit p.sub-desc b{color: #0f7ac6;} /* ***** (2025/1) 평생교육사 추가 css ***** */ /* visual */ /* -start- 2025/02 visual height 전체 수정 */ #detail-visual.lifelong-visual {background: url('/mobi/img/2024/detail/lifelong-educator/mo-section-lifelong-bg.png') no-repeat 50% 50% / cover; height: calc(85vh - 63px);} /* -end- 2025/02 visual height 전체 수정 */ #detail-visual.lifelong-visual .inner .tit > strong {color: #e58e3c; line-height: 1.1;} #detail-visual.lifelong-visual .inner .tit p:nth-of-type(1) {margin-bottom: 2.7344vw;} #detail-visual.lifelong-visual .inner .tit p:nth-of-type(2) {margin-bottom: 0;} #detail-visual.lifelong-visual .inner .tit .label {margin-bottom: 2.7344vw; padding: 2.0833vw 8.0729vw; border-radius: 3.9063vw;} #detail-visual.lifelong-visual .inner .tit .label span {color: #3cb667;} #detail-visual.lifelong-visual .inner .tit p b::before{background-image: url('/mobi/img/2024/detail/lifelong-educator/tit-acc-yellow.png');} /* banner */ .lifelong #detail-visual-banner {background-color: #59c1aa;} .lifelong section.detail-info-content .cont-tit strong{background: linear-gradient(to left, #05795f, #30cfac); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;} .lifelong section.detail-info-content .price-ex-box{background-color: #dbfff7;} .lifelong section.detail-info-content .price-ex-box ul li.new::before{background-color: #3cb69b;} .lifelong section.detail-info-content .price-ex-box ul li span.fc-purple{color: #3cb69b;} .lifelong section.detail-info-content .detail-info-box .tit > p:not(.sub-desc) strong{color: #25a386;} .lifelong section.detail-info-content .detail-info-box .tit p.sub-desc span::before{background-color: #dbfff7;} .lifelong section.detail-info-content .detail-info-box .tit p.sub-desc b{color: #067c62;} /* ***** (2025/1) 평생교육사 추가 css ***** */ /* visual */ /* -start- 2025/02 visual height 전체 수정 */ #detail-visual.korean-visual {background: url('/mobi/img/2024/detail/korean-language/mo-section-korean-bg.png') no-repeat 50% 50% / cover; height: calc(85vh - 63px);} /* -end- 2025/02 visual height 전체 수정 */ #detail-visual.korean-visual .inner .sub-tit p {color: #333; border-color: #333;} #detail-visual.korean-visual .inner .tit > span {-webkit-text-stroke-width: 1px;} #detail-visual.korean-visual .inner .tit > strong {color: #121212; line-height: 1.1; -webkit-text-stroke-width:0;} #detail-visual.korean-visual .inner .tit p{color: #4d4d4d;} #detail-visual.korean-visual .inner .tit p:nth-of-type(1) {margin-bottom: 2.7344vw;} #detail-visual.korean-visual .inner .tit p:nth-of-type(2) {margin-bottom: 0;} #detail-visual.korean-visual .inner .tit .label {margin-bottom: 2.7344vw; padding: 2.0833vw 8.0729vw; border-radius: 3.9063vw;} #detail-visual.korean-visual .inner .tit .label span {color: #4d3bd9;} /* banner */ .korean #detail-visual-banner {background-color: #fff6bb;} .korean #detail-visual-banner ul li strong {color: #333;} .korean #detail-visual-banner ul li p {color: #333;} .korean #detail-visual-banner ul li:nth-child(n + 2)::after{background-color: #f8e24e;} .korean section.detail-info-content .cont-tit strong{background: linear-gradient(to left, #bf5d00, #ff8109); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;} .korean section.detail-info-content .price-ex-box{background-color: #fff6bb;} .korean section.detail-info-content .price-ex-box ul li.new::before{background-color: #ff8109;} .korean section.detail-info-content .price-ex-box ul li span.fc-purple{color: #ff8109;} .korean section.detail-info-content .detail-info-box .tit > p:not(.sub-desc) strong{color: #ff8109;} .korean section.detail-info-content .detail-info-box .tit p.sub-desc span::before{background-color: #fff6bb;} .korean section.detail-info-content .detail-info-box .tit p.sub-desc b{color: #733800;} /* -start- 2025/02 media 600px 추가 */ @media screen and (max-width: 600px) { #payment-modal .pay-modal-wrapper .tit{font-size: 24px;} #payment-modal .pay-step1 p.f-red{font-size: 14px;} #payment-modal .pay-step1 .pay-step1-info li{font-size: 14px;} #payment-modal .pay-modal-wrapper .pay-check-box label span{width: calc(100% - 26px); font-size: 16px;} #payment-modal .pay-step4 .table-txt p{font-size: 14px;} #payment-modal .pay-step4 .pay-notice-box li{font-size: 14px;} } /* -end- 2025/02 media 600px 추가 */ /* -start- 2025/02 media 550px 추가 */ @media screen and (max-width: 550px) { #payment-modal .total-price-box td:first-child, #payment-modal .total-price-box th:first-child{width: 12%;} } /* -end- 2025/02 media 550px 추가 */ @media screen and (max-width: 360px) { #detail-visual .inner .tit > span{font-size: 32px;} #detail-visual .inner .tit > strong{font-size: 58px;} /* -start- 2025/02 폰트사이즈 미용학, 한국어교원, 사회복지사 수정 */ #detail-visual.beauty-visual .inner .tit > strong{font-size: 52px;} #detail-visual.korean-visual .inner .tit > strong{font-size: 52px;} /* -end- 2025/02 폰트사이즈 미용학, 한국어교원, 사회복지사 수정 */ section.detail-info-content .cont-tit strong{font-size: 12px;} section.detail-info-content .price-ex-box ul li:not(:last-child){padding-right: 8px; margin-right: 8px;} section.detail-info-content .price-ex-box ul li:not(:last-child)::after{height: 10px;} /* -start- 2025/02 폰트사이즈 기존 10px -> 11px 수정 */ section.detail-info-content .price-ex-box ul li span{font-size: 11px;} section.detail-info-content .price-ex-box ul li strong{font-size: 11px;} /* -end- 2025/02 폰트사이즈 기존 10px -> 11px 수정 */ #feature-wrapper .feature-box .cont-box .txt-box p{font-size: 12px;} /* -start- step popup 추가 */ #payment-modal .pay-modal-wrapper .tit{font-size: 20px;} #payment-modal .pay-step1 p.f-red{font-size: 12px;} #payment-modal .pay-step1 .pay-step1-info li{font-size: 12px;} #payment-modal .pay-modal-wrapper .pay-check-box label span{font-size: 14px;} #payment-modal .pay-btn-box .btn{font-size: 14px; height: 40px; width: 120px;} #payment-modal .pay-step4 .table-txt p{font-size: 12px;} #payment-modal .table-box{overflow: hidden; overflow-x: auto;} #payment-modal table{width: 110%;} #payment-modal table tr th{font-size: 10px;} #payment-modal table tr td{font-size: 10px; height: 42px;} #payment-modal .total-price-box table {width: 100%;} #payment-modal .total-price-box td:first-child{font-size: 10px;} #payment-modal .total-price-box td:first-child, #payment-modal .total-price-box th:first-child{width: 12%;} #payment-modal .total-price-box td.minus-ico::after{width: 15px; height: 15px; right: -8px; background-size: 6px 1px;} #payment-modal .total-price-box td.total-ico::after{width: 15px; height: 15px; right: -8px; background-size: 6px 6px;} #payment-modal .pay-step4 .pay-notice-box li{font-size: 12px;} /* -end- step popup 추가 */ } /* -start- 2025/02 media 340px 추가 */ @media screen and (max-width: 340px) { #detail-visual .inner .sub-tit p{font-size: 12px;} #detail-visual .inner .tit > span{font-size: 28px;} #detail-visual .inner .tit > strong{font-size: 54px;} #detail-visual .inner .tit p{font-size: 16px;} #detail-visual .inner .tit .label span{font-size: 12px;} #detail-visual.beauty-visual .inner .tit p{font-size: 14px;} } /* -end- 2025/02 media 340px 추가 */ /* 수강 페이지 내 결제창 */ #payment-modal {position: fixed; top: 50%; left: 0; transform: translateY(-50%); width: 96%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 99999;} #payment-modal .pay-modal-wrapper {max-width: 900px; width: 900px; background-color: #fff; padding: 40px 22px 40px 30px; border-radius: 25px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); max-height: 80vh; overflow: hidden; overflow-y: auto;} #payment-modal .pay-modal-wrapper .tit {font-size: 30px; font-weight: 600; letter-spacing: -0.04em; color: #333; text-align: center; display: block; width: 100%;} /* modal btn */ #payment-modal .pay-btn-box {display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 50px;} #payment-modal .pay-btn-box .btn {width: 150px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; border: 1px solid #de4949;} #payment-modal .pay-btn-box .btn.long {width: 300px; font-size: 24px;} #payment-modal .pay-btn-box .btn.confirm { color: #fff; background-color: #de4949;} #payment-modal .pay-btn-box .btn.cancel { color: #de4949; background-color: #fff;} /* chekbox */ #payment-modal .pay-modal-wrapper .pay-check-box {display: flex; align-items: center; margin-top: 42px;} #payment-modal .pay-modal-wrapper .pay-check-box label {display: flex; align-items: center; gap: 8px; cursor: pointer;} #payment-modal .pay-modal-wrapper .pay-check-box label span {font-size: 20px; color: #333;} #payment-modal input[type="checkbox"], #payment-modal input[type="radio"]{width: 20px; height: 20px; border: 1px solid #aaa; border-radius: 2px; background-color: #fff; appearance: none; margin: 0; cursor: pointer;} #payment-modal input[type="checkbox"]:checked::after, #payment-modal input[type="radio"]:checked::after{content: ''; background:url('../img/2024/join/chk-ico.png') no-repeat 50% 50% / 14px 11px; width: 20px; height: 20px; display: block; box-sizing: border-box;} /* pay-step-box */ #payment-modal .pay-step-box{margin: 30px 0; display: block;} #payment-modal .pay-step-box ul{display: flex; align-items: center; justify-content: center; gap: 96px; position: relative; width: fit-content; margin: 0 auto;} #payment-modal .pay-step-box ul::after{content: ''; position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); height: 5px; background-color: #bbb; display: block; } #payment-modal .pay-step-box ul li{display: flex; flex-direction: column; gap: 9px; align-items: center; color: #333; font-weight: 500; letter-spacing: -0.04em; position: relative; z-index: 2;} #payment-modal .pay-step-box ul li span{display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color: #fff; width: 40px; height: 40px; border-radius: 50%; background-color: #bbb; line-height: 1;} #payment-modal .pay-step-box ul li strong {font-size: 16px; color: #bbb; font-weight: 500;} #payment-modal .pay-step-box ul li.on:first-child::after{content: ''; position: absolute; top: 19px; left:7px;width: 100px; height: 5px; background-color: #de4949; display: block; z-index: -1;} #payment-modal .pay-step-box ul li.on:nth-child(2)::after{content: ''; position: absolute; top: 19px; left:50%;width: 160px; height: 5px; background-color: #de4949; display: block; z-index: -1; transform: translateX(-50%);} #payment-modal .pay-step-box ul li.on:last-child::after{content: ''; position: absolute; top: 19px; right:7px;width: 100px; height: 5px; background-color: #de4949; display: block; z-index: -1;} #payment-modal .pay-step-box ul li.on span{background-color: #de4949;} #payment-modal .pay-step-box ul li.on strong{color: #444;} /* table */ #payment-modal .table-box{width: 100%;} #payment-modal table{width: 100%;border: 1px solid #eeeeee; border-collapse: collapse; table-layout: fixed;} #payment-modal table tr th{height: 40px; background-color: #f9f9f9; font-size: 12px; font-weight: 400; color: #626262;} #payment-modal table tr td {border-top: 1px solid #eeeeee; height: 60px; font-size: 12px; color: #333333; font-weight: 500;} #payment-modal table tr td:first-child{font-size: 12px; color: #333333; font-weight: 500;} #payment-modal table tr td.price{font-weight: 500; text-align: right; font-size: 12px; padding: 0 23px;} #payment-modal table tr.table-total td:first-child{background-color: #f9f9f9;} #payment-modal table tr.table-total td:last-child{font-weight: 600; font-size: 20px; color: #f13f6f; } #payment-modal .table-box table td.price1{text-align: right; padding: 0 21px; text-decoration: line-through;} #payment-modal .table-box table td.sale{text-align: right; padding: 0 21px; font-weight: 600; color: #f13f6f;} #payment-modal .total-price-box {margin-top: 20px;} #payment-modal .total-price-box tr td:not(:last-child), #payment-modal .total-price-box tr th:not(:last-child){border-right: 1px solid #eee;} #payment-modal .total-price-box td, #payment-modal .total-price-box th {width: 25%; text-align: center;} #payment-modal .total-price-box td{font-size: 20px; font-weight: 500;} #payment-modal .total-price-box td:first-child{font-size: 20px;} #payment-modal .total-price-box td.minus-ico, #payment-modal .total-price-box td.total-ico{position: relative;} #payment-modal .total-price-box td.minus-ico::after{content: ''; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); width: 30px; height: 30px; background:#ddd url('/mobi/img/2024/pay/table-minus-ico.png') no-repeat 50% 50% / 12px 2px; display: block; border-radius: 50%; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);} #payment-modal .total-price-box td.total-ico::after{content: ''; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); width: 30px; height: 30px; background:#ddd url('/mobi/img/2024/pay/table-total-ico.png') no-repeat 50% 50% / 12px 12px; display: block; border-radius: 50%; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);} /* pay-step1 */ #payment-modal .pay-step1 p.f-red {font-size: 20px; letter-spacing: -0.04em; color: #ff0000; margin: 35px 0 22px; display: block;} #payment-modal .pay-step1 .pay-step1-info li {font-size: 20px; letter-spacing: -0.04em; color: #626262; line-height: 1.5; padding-left: 12px; position: relative;} #payment-modal .pay-step1 .pay-step1-info li::after{content: ''; position: absolute; top: 12px; left: 0; width:3px; height: 3px; border-radius: 50%; background-color: #626262; display: block;} /* pay-step2 */ #payment-modal .pay-step2 .table-box table tr th:not(:last-child), #payment-modal .pay-step2 .table-box table tr td{border-right: 1px solid #eee;} #payment-modal .pay-step2 .table-box table tr th, #payment-modal .pay-step2 .table-box table tr td {width: 20%;} #payment-modal .pay-step2 .table-box table tr th:nth-child(2), #payment-modal .pay-step2 .table-box table tr:not(:nth-child(2)) td:nth-child(1){width: 40%;} #payment-modal .pay-step2 .table-box table tr:nth-child(2) td {text-align: center;} /* pay-step3 */ #payment-modal .pay-step3 .tit + p {font-size: 18px; color: #333; letter-spacing: -0.04em; margin: 36px 0 24px;} #payment-modal .pay-step3 ul li {font-size: 18px; color: #626262; letter-spacing: -0.04em; line-height: 1.5;} #payment-modal .pay-step3 .acc {font-size: 18px; margin: 0; margin-top: 30px; font-weight: 500; color: #333;} #pay-dim{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 99998;} /* pay-step4 */ #payment-modal .pay-step4 .table-box table tr th:not(:last-child), #payment-modal .pay-step4 .table-box table tr td{border-right: 1px solid #eee;} #payment-modal .pay-step4 .table-box table tr th, #payment-modal .pay-step4 .table-box table tr td {width: 20%;} #payment-modal .pay-step4 .table-box table tr th:nth-child(2), #payment-modal .pay-step4 .table-box table tr:not(:nth-child(2)) td:nth-child(1){width: 40%;} #payment-modal .pay-step4 .table-box table tr:nth-child(2) td {text-align: center;} #payment-modal .pay-step4 .table-txt{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;} #payment-modal .pay-step4 .table-txt p{font-size: 18px; color: #333; letter-spacing: -0.03em; margin: 0;} #payment-modal .pay-step4 .table-txt a{display: flex; align-items: center; justify-content: center; width: 150px; height: 30px; border-radius: 25px; border: 1px solid #de4949; color: #de4949; font-size: 16px; font-weight: 600;} #payment-modal .pay-step4 strong.sub-tit {font-size: 20px; color: #333; letter-spacing: -0.04em; font-weight: 600; margin: 20px 0 10px; display: block;} #payment-modal .pay-step4 strong.sub-tit.pay-notice {margin-top: 40px;} #payment-modal .pay-step4 .pay-method-box th{border-right: 1px solid #eee;} #payment-modal .pay-step4 .pay-method-box td {padding: 0 21px;} #payment-modal .pay-step4 .pay-method-box .pay-method-chk{display: flex; align-items: center; gap: 40px;} #payment-modal .pay-step4 .pay-method-box .pay-method-chk label{display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 18px; color: #333; font-weight: 500;} #payment-modal .pay-step4 .pay-notice-box li {font-size: 15px; line-height: 1.5; color: #333333;} /* pay-step5 */ #payment-modal .pay-step5 .confirm-box{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; margin-bottom: 30px;} #payment-modal .pay-step5 .confirm-box i{display: flex; align-items: center; justify-content: center; width: 100px;} #payment-modal .pay-step5 .confirm-box i img {display: block; width: 100%;} #payment-modal .pay-step5 .confirm-box strong{font-size: 24px; color: #333; letter-spacing: -0.04em; font-weight: 400;} #payment-modal .pay-step5 .confirm-box strong span{color: #de4949; font-weight: 400;} #payment-modal .pay-step5 .table-box table tr td:first-child, #payment-modal .pay-step5 .table-box table tr th:first-child{width: 68%; border-right: 1px solid #eeeeee;} #payment-modal .pay-step5 .table-box table tr td:last-child, #payment-modal .pay-step5 .table-box table tr th:last-child{width: 32%;} @media screen and (max-width: 1080px){ #payment-modal{width: 100%;} } @media screen and (max-width: 920px){ #payment-modal .pay-modal-wrapper{max-width: 80vw; width: 80vw;} #payment-modal .pay-modal-wrapper .tit{font-size: 26px;} #payment-modal .pay-step1 p.f-red{font-size: 16px;} #payment-modal .pay-step1 .pay-step1-info li{font-size: 16px;} #payment-modal .pay-step1 .pay-step1-info li::after{top: 8px;} #payment-modal input[type="checkbox"]{width: 18px; height: 18px;} #payment-modal .pay-modal-wrapper .pay-check-box label span{font-size: 18px;} #payment-modal .pay-step3 .tit + p{font-size: 16px;} #payment-modal .pay-step3 ul li{font-size: 16px;} #payment-modal .pay-step3 .acc{font-size: 16px;} #payment-modal .pay-btn-box .btn.long{font-size: 20px;} #payment-modal .pay-step5 .confirm-box{gap: 24px;} #payment-modal .pay-step5 .confirm-box i{width: 80px;} #payment-modal .pay-step5 .confirm-box strong{font-size: 20px;} #payment-modal .table-box table tr.table-total td:last-child{font-size: 18px;} #payment-modal .total-price-box td{font-size: 12px;} #payment-modal .total-price-box td:first-child{font-size: 12px;} #payment-modal .pay-step4 .table-txt p{font-size: 16px;} #payment-modal .pay-step4 .table-txt a{font-size: 14px; width: 145px;} #payment-modal .pay-step4 strong.sub-tit{font-size: 18px;} #payment-modal .pay-step4 .pay-method-box .pay-method-chk label{font-size: 16px;} #payment-modal .pay-step4 .pay-notice-box li{font-size: 14px;} #detail-visual .inner .tit > span{font-size: 32px;} #detail-visual .inner .tit > strong{font-size: 58px;} section.detail-info-content .cont-tit strong{font-size: 12px;} section.detail-info-content .price-ex-box ul li:not(:last-child){padding-right: 8px; margin-right: 8px;} section.detail-info-content .price-ex-box ul li:not(:last-child)::after{height: 10px;} section.detail-info-content .price-ex-box ul li span{font-size: 10px;} section.detail-info-content .price-ex-box ul li strong{font-size: 10px;} #feature-wrapper .feature-box .cont-box .txt-box p{font-size: 12px;} } /* common */ #join * {box-sizing: border-box !important; font-style: normal;} #join .essential {color: #FF6600;} #join input[type="checkbox"]{width: 18px; height: 18px; border: 1px solid #aaa; border-radius: 2px; background-color: #fff; appearance: none; margin: 0; cursor: pointer;} #join input[type="checkbox"]:checked::after{content: ''; background:url('../img/2024/join/chk-ico.png') no-repeat 50% 50% / 12px 9px; width: 18px; height: 18px; display: block; box-sizing: border-box;} .join-btn-wrap {display: flex; align-items: center; justify-content: center; margin: 40px 0 60px;} .join-btn-wrap .next-btn {display: flex; align-items: center; justify-content: center; width: 150px; height: 40px; background-color: #de4949; font-size: 16px; font-weight: 400; color: #fff; } #m_contents .join-tit {font-size: 24px; font-weight: 600; text-align: center;margin: 60px 0 16px; color: #00bac8;} .join-tit {font-size: 24px; font-weight: 600; text-align: center;margin: 60px 0 16px; color: #de4949;} /* step-box */ #step-wrapper ul {display: flex; align-items: center; margin-bottom: 40px; position: relative;} #step-wrapper ul::after{content: ''; position: absolute; top: 15px; width: 100%; height: 3px; background-color: #bbb; z-index: -2; border-radius: 2px;} #step-wrapper ul li {width: 33.3333%; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;} #step-wrapper ul li .num {display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; width: 32px; height: 32px; border-radius: 50%; background-color: #bbb; margin: 0 auto;} #step-wrapper ul li .num.chk img {width: 18px;} #step-wrapper ul li strong {font-size: 14px; font-weight: 600; color: #bbb;} /* active */ #step-wrapper ul li.active{position: relative;} #step-wrapper ul li.active::after{content: ''; position: absolute; top: 15px; left: 0; width: 100%; height: 3px; background-color: #de4949; z-index: -1;} #step-wrapper ul li.step1.active::after{border-radius: 2px 0px 0px 2px;} #step-wrapper ul li.step2.active::after{border-radius: 0px;} #step-wrapper ul li.step3.active::after{border-radius: 0px 2px 2px 0px;} #step-wrapper ul li.active .num {background-color: #de4949;} #step-wrapper ul li.active strong {color: #444;} /* 약관 - step1 */ .step1-wrapper{border: 1px solid #eee;} .step1-wrapper > div:nth-child(n + 3){position: relative;} .step1-wrapper > div:nth-child(n + 3)::after{content: ''; position: absolute; top: 0; left: 50%; width: calc(100% - 20px); height: 1px; background-color: #D9D9D9; transform: translateX(-50%);} .step1-wrapper .input-box{display: flex; align-items: center; gap: 6px; width: calc(100% - 65px);} .step1-wrapper .all-chk-box .input-box {width: 100%;} .step1-wrapper .input-box input:not(#all_chk) + label {width: calc(100% - 24px);} .step1-wrapper .input-box input#all_chk + label {width: calc(100% - 24px);} .step1-wrapper .top-txt-box{padding: 20px 16px; display: flex; align-items: center; justify-content: space-between;} .step1-wrapper .top-txt-box label {font-size: 12px; line-height: 1.5; color: #626262; cursor: pointer;} .step1-wrapper .top-txt-box label p {margin: 0;} .step1-wrapper .top-txt-box label .gray {color: #aaa; background-color: transparent;} .step1-wrapper .top-txt-box a {font-size: 10px; color: #aaa; position: relative;} .step1-wrapper .top-txt-box a::before{content: ''; position: absolute; top:50%; right: 7px; height: 10px; width: 2px; border-radius: 1px; background-color: #aaa; display: block; transform: translateY(-50%);transition: 0.5s; opacity: 1;} .step1-wrapper .top-txt-box a::after{content: ''; position: absolute; top:50%; right: 3px; width: 10px; height: 2px; border-radius: 1px; background-color: #aaa; display: block; transform: translateY(-50%); } .step1-wrapper .top-txt-box a span {padding-right: 18px;} .step1-wrapper .top-txt-box a span.close {display: none;} /* on */ .step1-wrapper .top-txt-box a.on span.close {display: block;} .step1-wrapper .top-txt-box a.on span.open {display: none;} .step1-wrapper .top-txt-box a.on::before{content: ''; position: absolute; top:50%; right: 7px; height: 10px; width: 2px; border-radius: 1px; background-color: #aaa; display: block; transform: translateY(-50%) rotate(90deg); opacity: 0;} .step1-wrapper .all-chk-box{padding: 22px 16px; background-color: #F9F9F9;} .step1-wrapper .all-chk-box .input-box label {font-size: 15px; font-weight: 500; color: #444; cursor: pointer;} .step1-wrapper .all-chk-box .input-box + p {padding-left: 26px; margin: 0; margin-top: 6px; font-size: 12px; color: #626262; line-height: 1.6;} .step1-wrapper .bottom-txt-box{display: none; padding-bottom: 37px;} .step1-wrapper .bottom-txt-box .inner {margin: 0 16px; padding: 10px; border: 1px solid #d9d9d9; box-sizing: border-box; height: 160px; overflow: hidden; overflow-y: auto;} .step1-wrapper .bottom-txt-box .inner ul > li:not(:last-child){margin-bottom: 30px;} .step1-wrapper .bottom-txt-box .inner ul li p{margin: 0;} .step1-wrapper .bottom-txt-box .inner ul li p.tit {font-size: 13px; font-weight: 600; margin-bottom: 12px;} .step1-wrapper .bottom-txt-box .inner ul li p.sub-tit {font-size: 12px; font-weight: 600; margin-bottom: 6px;} .step1-wrapper .bottom-txt-box .inner ul li p:not(.tit, .sub-tit){font-size: 11px; color: #626262; line-height: 1.6;} .step1-wrapper .bottom-txt-box .inner ul li ol {padding-left: 16px; font-size: 11px; color: #626262; line-height: 1.6; margin-top: 6px;list-style: none; } .step1-wrapper .bottom-txt-box .inner ul li ol li {margin-bottom: 12px;} .step1-wrapper .bottom-txt-box .inner ul li ol li em {display: inline-block; width: 16px; vertical-align: top; font-style: normal;} .step1-wrapper .bottom-txt-box .inner ul li ol li em + span {width: calc(100% - 16px); display: inline-block;} .step1-wrapper .bottom-txt-box .inner ul li ol li .inner-list {display: block; width: auto; padding-left: 28px; margin-top: 12px;} .step1-wrapper .bottom-txt-box .inner ul li ol li .inner-list p:not(:last-child){margin-bottom: 12px} .step1-wrapper .bottom-txt-box table{border: 1px solid #eee;} .step1-wrapper .bottom-txt-box table tr:not(:last-child) td, .step1-wrapper .bottom-txt-box table tr:not(:last-child) th{border-bottom: 1px solid #eee;} .step1-wrapper .bottom-txt-box table tbody th {text-align: left; width: 20%; padding: 10px 6px; background-color: #F9F9F9; font-weight: 400; border-right: 1px solid #eee; color: #333; font-size: 10px; line-height: 1.4;} .step1-wrapper .bottom-txt-box table tbody td {text-align: left; width: 80%; padding: 10px 6px; color: #777; font-size: 11px;} .step1-wrapper .bottom-txt-box table.table-border tr td:nth-child(n+2){border-left: 1px solid #eee;} /* 정보입력 - step2 */ .step2-wrapper p.sub-txt {margin: 0; font-size: 12px; margin-bottom: 12px; color: #626262;} .step2-wrapper .join-box{border: 1px solid #eee; border-radius: 5px;} .step2-wrapper .join-box dl {padding: 0 10px; display: flex; align-items: stretch; position: relative; width: 100%; margin: 0;} .step2-wrapper .join-box dl:nth-child(n+2)::after{content: ''; position: absolute; top: 0; width: calc(100% - 20px); height: 1px; left: 50%; transform: translateX(-50%); background-color: #d9d9d9; display: block;} .step2-wrapper .join-box dl dt, .step2-wrapper .join-box dl dd {padding: 16px 0;} .step2-wrapper .join-box dl dt{padding-left: 12px; width: 90px; font-size: 13px; color: #626262; display: flex; margin-top: 8px; line-height: 1.5; word-break: keep-all;} .step2-wrapper .join-box dl dt em {padding-right: 4px;} .step2-wrapper .join-box dl dd{width: calc(100% - 90px); padding-right: 10px;} .step2-wrapper .join-box dl dd input:not([type="checkbox"]) {width: 100%; height: 36px; border-radius: 2px; border: 1px solid #aaa; padding: 0 12px; font-size: 13px; color: #333; font-weight: 400; outline: none;} .step2-wrapper .join-box dl dd input::placeholder{color: #aaa; font-size: 12px;} .step2-wrapper .join-box dl dd .input-box.w-btn {display: flex; align-items: center; gap: 5px;} .step2-wrapper .join-box dl dd .input-box.w-btn input {width: calc(100% - 77px);} .step2-wrapper .join-box dl dd .input-box.w-btn .confirm-btn {width: 72px; height: 36px; background-color: #de4949; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; border-radius: 2px; border: 1px solid #de4949;} .step2-wrapper .join-box dl dd .input-box.tel {display: flex; align-items: center; gap: 4px;} .step2-wrapper .join-box dl dd .input-box.tel .acc {display: block;width: 8px; height: 1px; background-color: #626262;} .step2-wrapper .join-box dl dd .input-box.tel select, .step2-wrapper .join-box dl dd .input-box.tel input {width: 28%; height: 36px; border: 1px solid #aaa; border-radius: 2px; max-width: 100px; box-sizing: border-box;} .step2-wrapper .join-box dl dd .input-box.tel select {padding: 0 6px; font-size: 13px; color: #626262; appearance: none; background: url('../../img/2024/join/select-arrow.png') no-repeat 90% 50% / 12px 12px; outline: none;} .step2-wrapper .join-box dl dd .input-box.tel input {text-align: center;} .step2-wrapper .join-box dl:last-child dt {margin-top: 0;} .step2-wrapper .join-box dl dd .chk-box {margin: 0; display: flex; align-items: center; gap: 17px;} .step2-wrapper .join-box dl dd .chk-box label {display: flex; align-items: center; gap: 5px; cursor: pointer;} .step2-wrapper .join-box dl dd .chk-box label span {font-size: 13px; color: #626262;} .step2-wrapper .join-box dl dd .chk-desc {margin: 0; margin-top: 12px; font-size: 12px; color: #626262; line-height: 1.6;} .step2-wrapper .join-box dl dd .chk-desc br {display: none;} /* 가입완료 - step3 */ .step3-wrapper .top-txt-box {display: flex; flex-direction: column; align-items: center; margin: 33px 0 49px;} .step3-wrapper .top-txt-box i {display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 10px;} .step3-wrapper .top-txt-box i img {width: 100%;} .step3-wrapper .top-txt-box strong {font-size: 18px; font-weight: 600; color: #626262; margin-bottom: 5px;} .step3-wrapper .top-txt-box strong em {color: #de4949;} .step3-wrapper .top-txt-box p {margin: 0; text-align: center; font-size: 16px; color: #626262; font-weight: 400; line-height: 1.5;} .step3-wrapper .bottom-member-box {max-width: 600px; margin: 0 auto;} .step3-wrapper .bottom-member-box .inner > p {font-size: 12px; font-weight: 400; color: #626262; margin: 0; margin-bottom: 12px;} .step3-wrapper .bottom-member-box .member-info {border: 1px solid #eee; border-radius: 5px; padding: 0 10px} .step3-wrapper .bottom-member-box .member-info dl {display: flex; align-items: center; padding: 20px 0; margin: 0;} .step3-wrapper .bottom-member-box .member-info dl:nth-child(n+2){border-top: 1px solid #d9d9d9;} .step3-wrapper .bottom-member-box .member-info dl dt {width: 100px; padding-left: 20px; font-size: 13px; color: #aaa;} .step3-wrapper .bottom-member-box .member-info dl dd {width: calc(100% - 100px); font-size: 14px; font-weight: 500; color: #646464;} .step3-wrapper .bottom-member-box .member-info dl.tel dd span:nth-child(n+2){position: relative; display: inline-block; padding-left: 30px;} .step3-wrapper .bottom-member-box .member-info dl.tel dd span:nth-child(n+2)::before{content: '';position: absolute; top: 50%; left: 11px; width: 8px; height: 1px; background-color: #626262; display: block; transform: translateY(-50%);}