:root { --base-font-size: 16px; --small-font-size: 0.875rem; --medium-font-size: 1rem; --large-font-size: 1.25rem; } body { font-size: var(--base-font-size); } /* font */ @font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('/css/fonts/Pretendard/Pretendard-Black.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-Black.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('/css/fonts/Pretendard/Pretendard-ExtraBold.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('/css/fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-Bold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('/css/fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-SemiBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('/css/fonts/Pretendard/Pretendard-Medium.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-Medium.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('/css/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-Regular.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('/css/fonts/Pretendard/Pretendard-Light.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-Light.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('/css/fonts/Pretendard/Pretendard-ExtraLight.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-ExtraLight.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('/css/fonts/Pretendard/Pretendard-Thin.woff2') format('woff2'), url('/css/fonts/Pretendard/Pretendard-Thin.woff') format('woff'); } @font-face { font-family: 'noto'; font-style: normal; font-weight: 400; src: local('Noto Sans Thin'), local('NotoSans-Thin'); src: url('/css/fonts/noto/NotoSansKR-Thin-Hestia.eot'); src: url('/css/fonts/NotoSansKR-Thin-Hestia.eot?#iefix') format('embedded-opentype'),url('/css/fonts/NotoSansKR-Thin-Hestia.woff') format('woff'); font-display: swap; } @font-face { font-family: 'noto'; font-style: normal; font-weight: 500; src: local('Noto Sans Regular'), local('NotoSans-Regular'); src: url('/css/fonts/NotoSansKR-Regular-Hestia.eot'); src: url('/css/fonts/NotoSansKR-Regular-Hestia.eot?#iefix') format('embedded-opentype'),url('/css/fonts/NotoSansKR-Regular-Hestia.woff') format('woff'); font-display: swap; } @font-face { font-family: 'noto'; font-style: normal; font-weight: 600; src: local('Noto Sans Medium'), local('NotoSansKR-Medium'); src: url('/css/fonts/NotoSansKR-Medium-Hestia.eot'); src: url('/css/fonts/NotoSansKR-Medium-Hestia.eot?#iefix') format('embedded-opentype'),url('/css/fonts/NotoSansKR-Medium-Hestia.woff') format('woff'); font-display: swap; } @font-face { font-family: 'noto'; font-style: normal; font-weight: 700; src: local('Noto Sans bold'), local('NotoSansKR-Bold'); src: url('/css/fonts/NotoSansKR-Bold.eot'); src: url('/css/fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),url('/css/fonts/NotoSansKR-Bold.woff2') format('woff2'),url('/css/fonts/NotoSansKR-Bold.woff') format('woff'),url('/css/fonts/NotoSansKR-Bold.ttf') format('truetype'); font-display: swap; } /* reset css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 14px; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; box-sizing: border-box; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; font-family: 'Pretendard' !important; color: #333; word-break: keep-all; scroll-behavior: smooth !important; } a { text-decoration: none; color: #333; } input:focus { outline: 1px solid #3b63d8; } textarea:focus { outline: 1px solid #3b63d8; } #wrap { width: 100%; min-width: 340px; margin: 0 auto; } .p_r { position: relative; } .p_c { position: absolute; left:50%; transform: translateX(-50%); } .k_color { color:#3b63d8 !important } .r_color { color:#e15353 !important } .hidden { position: absolute; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); overflow: hidden; } /* font_weight */ .tw_100 { font-weight: 100 !important; } .tw_200 { font-weight: 200 !important; } .tw_300 { font-weight: 300 !important; } .tw_400 { font-weight: 400 !important; } .tw_500 { font-weight: 500 !important; } .tw_600 { font-weight: 600 !important; } .tw_700 { font-weight: 700 !important; } .tw_800 { font-weight: 800 !important; } .tw_900 { font-weight: 900 !important; } /* icon */ .cart_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/cart.png') 0 0 no-repeat; background-size: 100%; } .user_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/user_icon.png') 0 0 no-repeat; background-size: 100%; } .join_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/join_icon.png') 0 0 no-repeat; background-size: 100%; } .logout_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/logout_icon.png') 0 0 no-repeat; background-size: 100%; } .time_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/time.png') 0 0 no-repeat; background-size: 100%; } .time_icon_y { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/time_icon_y.png') 0 0 no-repeat; background-size: 100%; } .level_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/level_icon.png') 0 0 no-repeat; background-size: 100%; } .level_icon01 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/icon01.png') 0 0 no-repeat; background-size: 100%; } .level_icon02 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/icon02.png') 0 0 no-repeat; background-size: 100%; } .level_icon03 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/icon03.png') 0 0 no-repeat; background-size: 100%; } .point_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/point_icon.png') 0 0 no-repeat; background-size: 100%; } .coupon_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/coupon01.png') 0 0 no-repeat; background-size: 100%; } .arrow_x { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow_x.png') 0 0 no-repeat; background-size: 100%; } .arrow_y { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow_y.png') 0 0 no-repeat; background-size: 100%; } .arrow_g { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow02.png') 0 0 no-repeat; background-size: 100%; } .arrow_w { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow_w.png') 0 0 no-repeat; background-size: 100%; } .call { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/call.png') 0 0 no-repeat; background-size: 100%; } .x_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/close.png') 0 0 no-repeat; background-size: 100%; } .arrow_back { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow_back.png') 0 0 no-repeat; background-size: 100%; } .close_arrow { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow03.png') 0 0 no-repeat; background-size: 100%; } .video_b { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/youtube_b.png') 0 0 no-repeat; background-size: 100%; } .video_r { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/youtube_r.png') 0 0 no-repeat; background-size: 100%; } .time_b { background: url('//cdn.edu2080.co.kr/gumjung/m/common/time_b.png') 0 0 no-repeat; background-size: 100%; } .info_g { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/info_g.png') 0 0 no-repeat; background-size: 100%; } .file_b { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/file.png') 0 0 no-repeat; background-size: 100%; } .file_g { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/file_g.png') 0 0 no-repeat; background-size: 100%; } .del_g { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/del_g.png') 0 0 no-repeat; background-size: 100%; } .lect_icon01 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon01.png') 0 0 no-repeat; background-size: 100%; } .lect_icon02 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon02.png') 0 0 no-repeat; background-size: 100%; } .lect_icon03 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon03.png') 0 0 no-repeat; background-size: 100%; } .logo_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/logo_icon.png') 0 0 no-repeat; background-size: 100%; } .write_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/write01.png') 0 0 no-repeat; background-size: 100%; } .play_b { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/play_b.png') 0 0 no-repeat; background-size: 100%; } .play_w { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/play_w.png') 0 0 no-repeat; background-size: 100%; } .view_g { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/play_g.png') 0 0 no-repeat; background-size: 100%; } .check_b { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/check03.png') 0 0 no-repeat; background-size: 100%; } .consult_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/smile_icon.png') 0 0 no-repeat; background-size: 100%; } .consult_icon01 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/consult_icon01.png') 0 0 no-repeat; background-size: 100%; } .consult_icon01 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/consult_icon01.png') 0 0 no-repeat; background-size: 100%; } .consult_icon02 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/consult_icon02.png') 0 0 no-repeat; background-size: 100%; } .consult_icon03 { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/consult_icon03.png') 0 0 no-repeat; background-size: 100%; } .answer_x { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/answer01.png') 0 0 no-repeat; background-size: 100%; } .answer_o { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/answer02.png') 0 0 no-repeat; background-size: 100%; } .go_icon { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/go_icon.png') 0 0 no-repeat; background-size: 100%; } /* close btn */ .close { font-size: 0; padding: 0; width: 2rem; height: 2rem; position: absolute; right: 0%; top: -2%; border-radius: 0; background: none; } .close::after, .close::before { content:''; display:block; width:100%; height:1px; background:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(45deg); } .close::after { transform: translate(-50%,-50%) rotate(-45deg); } .close.black::after, .close.black::before { background:#333; } /* text_overflow 처리 */ .overflow_txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 기본 tab_btn */ .default_tab { display: flex; justify-content: space-between; width: 100%; align-items: center; } .default_tab li { width: 49%;; } .default_tab li a { display: block; padding: 8.5% 0px; font-size: 1.25rem; border: 1px solid #3b63d8; border-radius: 2rem; color: #3b63d8; font-weight: 700; text-align: center; } .default_tab li a.active { background: #3b63d8; color: #fff; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.08) } .default_btn { display: block; background: #fff; border:1px solid #3b63d8; border-radius: 0.75rem; padding: 4.5% 0; font-size: 1.4rem; font-weight: 700; text-align: center; width: 100%; color: #3b63d8; } .default_btn.fill { background: #3b63d8; color: #fff; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.08) } /* label/input:text 기본 css */ label.nomal { font-size: 1.25rem; width: 100%; font-weight: 700; color: #333; display: block; } label.nomal span { color: #3b63d8; } input.nomal { display: block; width: 100%; margin-top: 2.4%; font-size: 1.25rem; padding: 3.7%; color: #333; border-radius: 0.75rem; border: 1px solid #cccccc; } input.nomal::placeholder { color: #bcbcbc; font-size: 1.25rem; font-weight: 500; } input[readonly] { background-color: #f5f5f5 !important; } input[type="checkbox"].nomal { display: none; } input[type="checkbox"].nomal + label { font-size: 1.25rem; padding-left: 2.5rem; position: relative; margin-top: 1.5rem; display: block; } input[type="checkbox"].nomal + label::after { content: ''; width: 1.8rem; height: 1.8rem; border: 1px solid #eee; background: #f4f4f4; display: block; border-radius: 0.35rem; top: -25%; left: 0; position: absolute; } input[type="checkbox"].nomal:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/check01.png')0 0 no-repeat; background-size: 100%; } input.error { border: 1px solid #ff0000 !important; color:#ff0000 !important; } textarea.default { margin: 3% auto 0; font-size: 1.25rem; color: #333; display: block; width: 100%; border: 1px solid #ccc; height: 15rem; overflow-y: scroll; border-radius: 1.05rem; padding: 3%; } textarea.default::placeholder { color: #ccc; } textarea.default::-webkit-scrollbar { width: 3px; } textarea.default::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2rem; } textarea.default::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } /* seclet box css */ .find_area.default { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; width: 90%; margin: 0 auto; padding: 5% 0; } .select_wrap.default { position: relative; width: 49%; } .select_wrap.default select { width: 100%; display: block; font-size: 1.25rem; padding: 5%; color: #333; border-radius: 0.75rem; border: 1px solid #cccccc; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; } .select_wrap.default span { position: absolute; display: block; width: 2rem; height: 2rem; top: 25%; right: 3%; transition: .3s; transform: rotate(180deg); } .select_wrap.default select:focus + span { transform: rotate(360deg); } .select_wrap select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: inherit; } .select_wrap select option { color: initial; } /* popup 기본 css */ .popup { width: 100%; height: 100%; position: fixed; z-index: 99; display: block; top:0; left: 0; } .popup .pop_inner { background: #fff; padding: 7% 5%; border-radius: 1.75rem 1.75rem 0 0; position: absolute; bottom: 0; left: 0; width: 100%; } .popup .pop_inner .tit_wrap { border-bottom: 1px solid #999; padding-bottom: 5%; position: relative; } .popup .pop_inner .tit_wrap .close { width: 1.7rem; height: 1.7rem; } .popup .pop_inner .tit_wrap p { font-size: 1.35rem; font-weight: 700; } .bg { background: rgba(0,0,0,0.7); position: fixed; left: 0; top:0; width: 100%; height: 100%; } /* 하단버튼 기본 CSS */ .btn_wrap.default { display: flex; justify-content: space-between; align-items: center; width: 100%; } .btn_wrap.default a { display: block; color: #fff; width: 35%; background: #333; padding: 5% 0; text-align: center; font-weight: 600; font-size: 1.25rem; } .btn_wrap.default a:nth-of-type(2) { background: #2b4db2; width: 65%; } .btn_wrap.default a:nth-of-type(2).coupon_use { background: #4b4e57; width: 65%; } .btn_wrap.default a:nth-of-type(2).coupon_use.active { background: #2b4db2; width: 65%; } a.btn_blue { background: #3b63d8; width: 100%; padding: 5% 0; text-align: center; font-weight: 600; color:#fff; font-size: 1.25rem; display: block; } /* 더보기 버튼 기본 */ .more_btn.default { background: #f8f8f8; width: 90%; margin: 3% auto 5%; display: block; border-radius: 0.75rem; text-align: center; font-weight: 700; padding: 3.5% 0; font-size: 1.25rem; } .more_btn.default span { display: inline-block; margin-left: 1.5%;; } .more_btn.default span.total { color:#bcbcbc } /* 유의사항 자세히 보기 */ .detail_script { display: none; background: #f9f9f9; height: 10rem; width: 100%; margin: 3% 0; line-height: 1.25rem; overflow-y: scroll; padding: 5%; border-radius: 0.75rem; } .detail_script.active { display: block; } .detail_script h3 { font-weight: 700; font-size: 1.15rem; margin-bottom: 5%; } .detail_script p { font-size: 1.05rem; line-height: 1.55rem; } .detail_script::-webkit-scrollbar { width: 3px; } .detail_script::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2rem; } .detail_script::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } /* file_wrap */ .file_wrap.default p { font-size: 1.25rem; font-weight: 700; } .file_wrap.default label { display: block; margin: 2.4% auto 5%; width: 100%; font-size: 1.35rem; text-align: center; padding: 3.5% 0; background:#EFF3FC; color: #3b63d8; border-radius: .75rem; } .file_wrap.default input { display: none; } .file_wrap.default ul { margin-top: 3%; } .file_wrap.default li { font-size: 1.25rem; padding: 3% 5%; margin-bottom: 2%; display: flex; align-items: center; margin: 3% auto; background: #f8f8f8; color:#333; border-radius: .75rem; } .file_wrap.default li .file_size { color: #aaa; font-size: 1.05rem; margin-left: 3%; } .file_wrap.default li .x_icon { display: block; width: 1.45rem; height: 1.45rem; margin-left: auto; } /* header */ header { background: #fff; position: relative; top:0; left: 0; z-index: 99; width: 100%; } header.fixed { position: fixed; } header *::-webkit-scrollbar { height: 2px; } header .header_inner { border-bottom: 1px solid #f2f2f2; width: 100%; padding:4% 5%; display: flex; justify-content: space-between; align-items: center; } header .header_inner a { display: block; } header .header_inner a.snb_btn { position: relative; width: 2.3rem; height: 2rem; } header .header_inner a.snb_btn span { width: 100%; height: 1px; display: block; background: #333; position: absolute; top:0 } header .header_inner a.snb_btn::after,header .header_inner a.snb_btn::before { content: ''; width: 100%; height: 1px; top:1.5rem; background: #333; display: block; left: 0; position: absolute; } header .header_inner a.snb_btn::after { top:0.7rem } header .header_inner .icon_w { display: flex; align-items: center; gap: 24%; } header .header_inner a.logo { width: 13rem; height: 1.8rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/logo.png') 0 0 no-repeat; background-size: 100%; } header .header_inner a.cart { width: 2.8rem; height: 2.3rem; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } header .header_inner a.cart span { position: absolute; top: -18%; right: -31%; display: block; background: #3b63d8; color: #fff; text-align: center; padding: 0.35rem 0.5rem; border-radius: 50%; font-size: 0.75rem; -webkit-transform: translateZ(0); transform: translateZ(0); } header .header_inner a.mypage { width: 2.8rem; height: 2.3rem; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } header .sub_tit { position: relative; border-bottom: 1px solid #f2f2f2; width: 100%; padding:3.4% 5%; } header .sub_tit a { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); display: block; width: 2.2rem; height: 2.05rem; } header .sub_tit h2 { font-size: 1.45rem; font-weight: 700; text-align: center; } header .gnb_wrap >ul.depth_1 { display: flex; width: 100%; flex-wrap: nowrap; overflow-y: scroll; background: #fff; padding: 0 3%; border-bottom: 1px solid #f2f2f2 } header .gnb_wrap >ul.depth_1>li>a { font-size: 1.25rem; font-weight: 700; display: block; padding: 1.4rem 1.6rem 1.3rem 1.7rem; width: 100%; white-space: nowrap; } header .gnb_wrap >ul.depth_1>li>a h2 { white-space: nowrap; } header .gnb_wrap >ul.depth_1>li.active>a h2 { color: #3b63d8; } header .gnb_wrap .depth_2 { width: 100%; overflow-y: scroll; background: #f5f5f5; } header .gnb_wrap .depth_2 li { display: none; width: 100%; justify-content: left; align-items: center; gap: 5%; padding: 1.5% 5% } header .gnb_wrap .depth_2 li.active { display: flex; } header .gnb_wrap .depth_2 a { display: block; padding: 0.6rem 1rem; font-size: 1.15rem; background: #fff; color: #888; border-radius: 2rem; text-align: center; line-height: 1.15rem; font-weight: 600; } header .gnb_wrap .depth_2 a.active { border: 1px solid #cecece; } header .gnb_wrap .depth_2 a.active h3 { color: #3b63d8; } header .snb_wrap { z-index: 999; background: #f0f0f0; position: fixed; width: 104%; overflow-y: scroll; height: 100vh; left: 0; top:0; display: none; } header .snb_wrap.active { display: block; } header .snb_wrap .login_info_wrap { background: #3b63d8; color: #fff; padding:11vw 5vw 7vw; position: relative; } header .snb_wrap .login_info_wrap .close { top: 6%; right: 5%; } header .snb_wrap .login_info_wrap span { color: #fff; font-weight: 700; font-size: 2.05rem; } header .snb_wrap .login_info_wrap p { color: #fff; font-size: 1.1rem; line-height: 1.55rem; margin: 4% 0 5%; } header .snb_wrap .login_info_wrap a.login_btn { background: #fff; display: block; width: 100%; border-radius: 0.75rem; padding: 3.5% 0; text-align: center; font-size: 1.25rem; font-weight: 700; } header .snb_wrap .login_before_wrap { background: #fff; padding-bottom: 3%; } header .snb_wrap .login_before_wrap .before_top { padding: 3% 5%; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } header .snb_wrap .login_before_wrap .before_top a:nth-of-type(1) { font-size: 1.25rem; display: flex; justify-content: space-between; align-items: flex-end; width: 20%; } header .snb_wrap .login_before_wrap .before_top a:nth-of-type(1) span { width: 1.5rem; height: 1.5rem; display:block; } header .snb_wrap .login_before_wrap .before_top a:nth-of-type(2) { position: relative; top:0; left: 0; } header .snb_wrap .login_before_wrap > p { font-size: 1.75rem; font-weight: 700; width: 90%; margin: 7% auto; } header .snb_wrap .login_before_wrap .benefits { background: #3b63d8; margin: 2% auto; width: 90%; border-radius: 1.25rem; display: flex; justify-content: space-between; align-items: center; padding: 7%; box-shadow: 0 10px 24px 0 rgba(59, 99, 216, 0.3); } header .snb_wrap .login_before_wrap .benefits li { width: 50%; position: relative; } header .snb_wrap .login_before_wrap .benefits li:nth-of-type(2) { padding-left: 10%; } header .snb_wrap .login_before_wrap .benefits li:nth-of-type(1):after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; top:0; right: 0; } header .snb_wrap .login_before_wrap .benefits li span { display: block; font-size: 1.25rem; padding-left: 1.45rem; color: #bccdff; position: relative; margin-bottom: 7%; } header .snb_wrap .login_before_wrap .benefits li span::after { content: ''; display: block; width: 1.2rem; height: 1.2rem; position: absolute; left: 0; top:50%; transform: translateY(-50%); background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/coupon01.png')0 0 no-repeat; background-size: 100%; } header .snb_wrap .login_before_wrap .benefits li span:nth-of-type(2):after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/point_icon.png')0 0 no-repeat; background-size: 100%; } header .snb_wrap .login_before_wrap .benefits li p { color:#fff; font-size: 2rem; font-weight: 500; } header .snb_wrap .login_before_wrap .benefits li p b { color: #fff; font-weight: 500; display: inline-block; margin-right: 3%; } header .snb_wrap .login_before_wrap .user_menu { display: flex; justify-content: space-between; align-items: center; width: 90%; margin: 7% auto; } header .snb_wrap .login_before_wrap .user_menu li { width: 24%; } header .snb_wrap .login_before_wrap .user_menu li span.icon_wrap { width: 55%; margin: 0 auto 7%; display: block; } header .snb_wrap .login_before_wrap .user_menu li span.icon_wrap img { width: 100%; } header .snb_wrap .login_before_wrap .user_menu li p { font-size: 1.25rem; text-align: center; font-weight: 700; } header .snb_wrap .menu_wrap { background: #fff; width: 100%; margin: 2% auto; } header .snb_wrap .menu_wrap>li { border-bottom: 1px solid #f0f0f0; } header .snb_wrap .menu_wrap>li>a { display: block; position: relative; padding: 5.5% 5%; font-size: 1.25rem; font-weight: 700; width: 100%; } header .snb_wrap .menu_wrap>li>a.depth_btn.active span { transform: scaleY(-1) translateY(50%); } header .snb_wrap .menu_wrap>li>a span { display: block; transition: all 0.5s; position: absolute; right: 5%; top: 50%; width: 2rem; height: 1.75rem; transform: translateY(-50%); } header .snb_wrap .menu_wrap .depth_2 { display: none; background: #f5f5f5; flex-wrap: wrap; justify-content:left; align-items: center; } header .snb_wrap .menu_wrap .depth_2.active { display: flex; } header .snb_wrap .menu_wrap .depth_2 li { width: 50%; } header .snb_wrap .menu_wrap .depth_2 li a { display: block; width: 100%; font-size: 1.15rem; color: #888; font-weight: 400; padding: 10%; letter-spacing: 0.05rem; } header .snb_wrap .StarPlayer_wrap { width: 100%; background: #fff; padding: 7% 5% 15%; } header .snb_wrap .StarPlayer_wrap p { color: #aaa; line-height: 1.35rem; font-size: 1rem; margin-bottom: 3%; } header .snb_wrap .StarPlayer_wrap a { display: block; color: #e15353; border: 1px solid #e15353; border-radius: 0.75rem; text-align: center; width: 100%; padding: 3% 0; font-size: 1.15rem; font-weight: 700; } /* footer */ footer .footer_inner { padding: 0% 5% 5%; background: #fff; } footer .footer_inner .footer_top { display: flex; justify-content: space-between; width: 100%; align-items: center; border-bottom: 1px solid#eee; border-top:1px solid#eee; padding: 0 3% } footer .footer_inner .footer_top li a { padding: 20% 0; display: block; font-size: 1rem; font-weight: 500; } footer .footer_inner > a { display: flex; justify-content: left; align-items: center; gap: 0.75rem; margin: 2.75rem 0 1.75rem; width: 100%; font-size: 1.35rem; font-weight: 700; } footer .footer_inner > a span { display: block; width: 1.55rem; height: 1.55rem; } footer .footer_inner > a.active span { transform: scaleY(-1); } footer .footer_inner .info_inner { display: block; width: 100%; text-align: left; } footer .footer_inner .info_inner.active { display: none; } footer .footer_inner .info_inner li { margin-bottom: 1.05rem; } footer .footer_inner .info_inner li p { font-size: 1rem; margin-bottom: 0.3rem; } footer .footer_inner .info_inner li a { font-weight: 700; text-decoration: underline; } /* 메인 둥둥 배너 */ .left_bnr { position: fixed; left: 2%; top: 21%; z-index: 11; } .left_bnr .close_btn { position: absolute; top: -14%; right: 5%; display: block; width: 1.5rem; height: 1.5rem; background: rgba(0, 0, 0, 0.8); } .left_bnr .close_btn:after, .left_bnr .close_btn:before { content: ''; display: block; width: 1px; height: 100%; background:#fff; position: absolute; top: 0; left: 50%; transform: rotate(45deg) translateX(-50%); } .left_bnr .close_btn:before { transform: rotate(-45deg) translateX(-50%); } /* 데이터없을때 표시되는 공통 UI */ .none_wrap { padding: 10%; background: #fff;; width: 90%; margin: 5% auto; } .none_wrap .icon_wrap { width: 35%; display: block; margin: 5% auto; } .none_wrap .icon_wrap img { width: 100%; } .none_wrap p { font-size: 1.15rem; text-align: center; width: 70%; margin: 0 auto; color: #ccc; line-height: 2rem; } /* 메인 */ .main_content .tit_wrap { position: relative; width: 90%; margin:0 auto 5%; } .main_content .tit_wrap h4 { font-size: 1.85rem; font-weight: 900; margin-bottom: 3%; } .main_content .tit_wrap p { font-size: 1.15rem; font-weight: 500; } .main_content .tit_wrap a { display: flex; align-items: center; font-size: 1.15rem; font-weight: 500; color: #999; position: absolute; right: 0; bottom: 0; } .main_content .tit_wrap a span { display: inline-block; margin-left: 2%; width: 1.2rem; height: 1.2rem; } /* 메인 비주얼 */ .main_content .main_visual { width: 100%; } .main_content .main_visual li a { position: relative; display: block; width: 100%; } .main_content .main_visual li a span.date { position: absolute; z-index: 9; top: 10%; left: 8%; color: #fff; font-size: 1.05rem; font-weight: 400; border: 1px solid #fff; padding: 1% 2%; border-radius: 1.6rem 1.6rem 1.6rem 0; } .main_content .main_visual li a span.date.black { color: #333; border: 1px solid #333; } .main_content .main_visual .bxslider-default .bx-wrapper .bx-pager { left: 50%; transform: translateX(-50%); bottom: -2rem; } .main_content .main_visual .bxslider-default .bx-wrapper .bx-pager.bx-default-pager a { background: #ddd; width: 5px; height: 5px; margin: 0 3px; border-radius: 50%; } .main_content .main_visual .bxslider-default .bx-wrapper .bx-pager.bx-default-pager a.active { background: #333; } /* 메인 상담 */ .main_content .consult_wrap .consult_info { margin: 5% auto; width: 90%; } .main_content .consult_wrap .consult_info .tel { font-size: 2.15rem; font-weight: 900; display: flex; align-items: end; justify-content: left; margin-bottom: 3%; } .main_content .consult_wrap .consult_info .tel span { display:block; width: 2.75rem; height: 2.75rem; margin-right: 0.75rem; } .main_content .consult_wrap .consult_info .time { display: flex; justify-content: left; align-items: center; gap: 3%; } .main_content .consult_wrap .consult_info .time span { font-size: 1.15rem; } .main_content .consult_wrap .consult_info .time span:nth-of-type(1) { padding-right: 3%; position: relative; } .main_content .consult_wrap .consult_info .time span:nth-of-type(1)::after { content: ''; display: block; width: 1px; height: 9px; background: #333; position: absolute; top:50%; transform: translateY(-50%); right: 0; } .main_content .consult_wrap .consult_btn { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #3b63d8; padding: 4% 3%; } .main_content .consult_wrap .consult_btn li { width: 32.33%; } .main_content .consult_wrap .consult_btn li a { display: flex; justify-content: center; align-items: center; gap: 2%; width: 100%; border-radius: 2.25rem; padding: 10% 0; text-align: center; color: #fff; font-size: 1.15rem; font-weight: 500; background: rgba(0, 0, 0, 0.15); } .main_content .consult_wrap .consult_btn li a span { display: block; width: 1.75rem; height: 1.75rem; } /* 메인 스크롤 */ .main_content *::-webkit-scrollbar { height: 1px; -webkit-appearance: none; } .main_content *::-webkit-scrollbar-thumb { background: #333; } .main_content *::-webkit-scrollbar-track { background: #f0f0f0; } /* 메인 스타강사 */ .main_content .main_teacher { padding-left: 5%; } .main_content .main_teacher .tit_wrap { width: 100%; } .main_content .main_teacher .tit_wrap .ani_icon { position: absolute; z-index: -1; top: -14%; right: 25%; width:5rem; height: 5rem; opacity: 0.3; } .main_content .main_teacher .teacher_list_wrap { overflow-x: scroll; padding-bottom: 5%; margin-bottom: 10%; } .main_content .main_teacher .teacher_list { width: fit-content; margin-top: 5%; display: flex; flex-wrap: nowrap; } .main_content .main_teacher .teacher_list li { position: relative; width: 65vw; margin-right: 3%; } .main_content .main_teacher .teacher_list li .subject { position: absolute; z-index: 9; top: -10%; left: 0; color: #fff; font-size: 1.25rem; font-weight: 500; padding: 4.3% 7.6%; border-radius: 1.6rem 1.6rem 1.6rem 0; } .main_content .main_teacher .teacher_list li .subject.subject01 { background-color: #00A9D9; } .main_content .main_teacher .teacher_list li .subject.subject02 { background-color: #F96332; } .main_content .main_teacher .teacher_list li .subject.subject03 { background-color: #DC5F88; } .main_content .main_teacher .teacher_list li .subject.subject04 { background-color: #4ABFB7; } .main_content .main_teacher .teacher_list li .teacher_info { position: relative; } .main_content .main_teacher .teacher_list li .teacher_info_inner { width: 80%; background: #3b63d8; padding:18% 10%; border-radius: 1.25rem; } .main_content .main_teacher .teacher_list li .teacher_info_inner p.name { color: #fff; font-size: 1.25rem; font-weight: 400; } .main_content .main_teacher .teacher_list li .teacher_info_inner p.name span { font-size: 1.75rem; font-weight: 700; color: #fff; display: inline-block; margin-right: 0.25rem; } .main_content .main_teacher .teacher_list li .teacher_info_inner p.career { font-size: 1.05rem; font-weight: 400; line-height: 1.5rem; margin-top: 3%; width: 80%; color: #fff; } .main_content .main_teacher .teacher_list li .teacher_info .teacher_img_wrap { width: 100%; overflow: hidden; } .main_content .main_teacher .teacher_list li .teacher_info img { width: 100%; } .main_content .main_teacher .teacher_list li .btn_wrap { display: flex; justify-content: center; align-items: center; padding: 3%; border-radius: 0.75rem; border: 1px solid #3b63d8; margin-top: 5%; } .main_content .main_teacher .teacher_list li .btn_wrap a { display: block; width: 50%; color: #3b63d8; font-size: 1.15rem; text-align: center; font-weight: 600; padding: 2% 0; } .main_content .main_teacher .teacher_list li .btn_wrap a:nth-of-type(1) { border-right: 1px solid #3b63d8; } /* 메인 합격패스 */ .main_content .main_pass { overflow: hidden;; } .main_content .main_pass .pass_list_wrap { width: 80%; margin: 7% auto 0; position: relative; } .main_content .main_pass .pass_list_wrap .bx-wrapper .bx-viewport { overflow: visible !important; } .main_content .main_pass .pass_list_wrap li { margin-right: 1rem; } .main_content .main_pass .pass_list_wrap a.pass_item { box-shadow: 0 20px 10px 0 rgba(0, 0, 0, 0.08); display: block; width: 100%; padding:10% 7%; position: relative; border-radius: 1rem; } .main_content .main_pass .pass_list_wrap a.pass_item.pass01 { background: #6844CD url('//cdn.edu2080.co.kr/gumjung/m/common/pass_bg.png') no-repeat center center; background-size: 100%; } .main_content .main_pass .pass_list_wrap a.pass_item.pass02 { background: #3b63d8 url('//cdn.edu2080.co.kr/gumjung/m/common/pass_bg.png') no-repeat center center; background-size: 100%; } .main_content .main_pass .pass_list_wrap a.pass_item.pass03 { background: #00A9D9 url('//cdn.edu2080.co.kr/gumjung/m/common/pass_bg.png') no-repeat center center; background-size: 100%; } .main_content .main_pass .pass_list_wrap a.pass_item .ani_icon { position: absolute; z-index: 9; top: -30%; right: 5%; width:6rem; height: 6rem; opacity: 0.5; } .main_content .main_pass .pass_list_wrap a.pass_item span { display: block; font-size: 1.15rem; font-weight: 500; color: #fff; } .main_content .main_pass .pass_list_wrap a.pass_item span.notice { font-size: 0.95rem; position: absolute; bottom: 13%; left: 5%; } .main_content .main_pass .pass_list_wrap a.pass_item span.go_icon { position: absolute; bottom: 13%; right: 5%; width: 6rem; height: 2.5rem; } .main_content .main_pass .pass_list_wrap a.pass_item p { display: block; font-size: 1.65rem; font-weight: 500; color: #fff; margin: 3% 0 0; } .main_content .main_pass .pass_list_wrap .current { display: block; position: absolute; z-index: 9; top: -40%; right: -5%; font-size: 1.15rem; font-weight: 400; color: #999; text-align: center; } .main_content .main_pass .pass_list_wrap .current .current_num { color: #333; font-weight: 700; } /* 메인 추천강의 */ .main_content .main_lect { padding-left: 5%; margin-bottom: 10%; } .main_content .main_lect .tit_wrap { width: 100%;; } .main_content .main_lect .lect_list_wrap { overflow-x: scroll; padding-bottom: 5%; margin-bottom: 5%; -webkit-overflow-scrolling: touch; } .main_content .main_lect .lect_list_wrap .lect_list { width: 350%; display: flex; flex-wrap: nowrap; align-items: center; } .main_content .main_lect .lect_list_wrap .lect_list li { width: 60vw; margin-right: 1.3%; } .main_content .main_lect .lect_list_wrap .lect_list li a { display: block; width: 100%; position: relative; border: 1px solid #bbb; border-radius: 1rem; overflow: hidden; } .main_content .main_lect .lect_list_wrap .lect_list li a .play_b { position: absolute; z-index: 9; bottom: -13%; left: -6%; width: 5rem; height: 5rem; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_img_wrap { width: 100%; position: relative; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_img_wrap .lect_bg { width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; background: rgba(0,0,0,0.1); } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_img_wrap img { width: 100%; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_info_wrap { padding: 10% 5%; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_info_wrap .tit { font-size: 1.3rem; line-height: 1.7rem; font-weight: 600; margin-bottom: 2%; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_info_wrap .teacher { font-size: 1.05rem; line-height: 1.35rem; font-weight: 400; color: #999; margin-bottom: 5%; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_info_wrap .view { display: flex; justify-content:left; align-items: center; gap: 2%; } .main_content .main_lect .lect_list_wrap .lect_list li a .lect_info_wrap .view span { display: block; width:1rem; height:1rem; } /* 메인 추천강의 팝업 */ .main_content .main_lecture_popup { display: none; } .main_content .main_lecture_popup.active { display: block; } .main_content .main_lecture_popup .pop_inner { height: 90%; } .main_content .main_lecture_popup .tit_wrap { width: 100%; } .main_content .main_lecture_popup ul { width: 100%; height: 95%; margin: 0 auto; overflow-y: scroll; } .main_content .main_lecture_popup ul::-webkit-scrollbar { display: none; } .main_content .main_lecture_popup ul li a { width: 100%; position: relative; padding: 5% 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .main_content .main_lecture_popup ul li:nth-of-type(1) a { padding:0 0 5% } .main_content .main_lecture_popup ul li a .lect_img_wrap { width: 37%; height: 23vw; border-radius: 1rem; overflow: hidden; position: relative; } .main_content .main_lecture_popup ul li a .lect_img_wrap:after { content: ''; display: block; position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); } .main_content .main_lecture_popup ul li a .lect_img_wrap:before { content: ''; display: block; position: absolute; z-index: 9; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 4.5rem; height: 4.5rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/play_w.png') no-repeat center center; background-size: 100%; } .main_content .main_lecture_popup ul li a .lect_img_wrap img { width: 100%; } .main_content .main_lecture_popup ul li a .lect_info_wrap { width: 58%; } .main_content .main_lecture_popup ul li a .lect_info_wrap p:nth-of-type(1) { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; margin-bottom: 2%; } .main_content .main_lecture_popup ul li a .lect_info_wrap >span { display: block; margin-bottom: 7%; color: #888; font-size: 1rem; } .main_content .main_lecture_popup ul li a .lect_info_wrap p:nth-of-type(2) { font-size: 1.05rem; font-weight: 400; line-height: 1.35rem; color: #888; margin-bottom: 5%; display: flex; justify-content: left; align-items: center; } .main_content .main_lecture_popup ul li a .lect_info_wrap p:nth-of-type(2) span { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; } /* 메인 유투브 */ .main_content .main_youtube { background: #e6f1ff; padding: 10% 0 5%; margin-bottom: 10%; } .main_content .main_youtube .tit_wrap { width: 100%; } .main_content .main_youtube .tit_wrap .logo_icon { display: block; width: 5rem; height: 5rem; margin: 0 auto; } .main_content .main_youtube .tit_wrap h4 { text-align: center; font-weight: 700; font-size: 1.75rem; margin: 5% auto 2%; } .main_content .main_youtube .tit_wrap p { font-size: 1.25rem; font-weight: 500; text-align: center; } .main_content .main_youtube .tit_wrap .ani_icon { position: absolute; z-index: 9; top: -60%; right: 20%; width:5rem; height: 5rem; opacity: 0.45; } .main_content .main_youtube .tit_wrap .ani_icon02 { position: absolute; z-index: 9; top: -5%; left: 30%; width:3rem; height: 3rem; opacity: 0.35; } .main_content .main_youtube .yt_btn { display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.15rem; font-weight: 500; color: #e15353; margin-top: 5%; } .main_content .main_youtube .yt_btn span { display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: 0.75rem; } .main_content .main_youtube .list_wrap { width: 100%; overflow: hidden; } .main_content .main_youtube .youtube_list_wrap { width: 80%; margin: 5% auto 0;; position: relative; } .main_content .main_youtube .youtube_list_wrap .bx-wrapper { margin: 0 auto 8% } .main_content .main_youtube .youtube_list_wrap .bx-wrapper .bx-viewport { overflow: visible !important; } .main_content .main_youtube .youtube_list_wrap .bx-wrapper .bx-viewport .bxslider li { margin-right: 0.55rem !important; } .main_content .main_youtube .youtube_list_wrap .youtube_current { position: absolute; left: 50%; bottom: -14%; display: block; font-size: 1.15rem; font-weight: 400; color: #999; text-align: center; transform: translateX(-50%); } .main_content .main_youtube .youtube_list_wrap .youtube_current .current_num { color: #333; font-weight: 700; } /* */ /* 메인 배너 */ .main_content .main_banner { position: relative; } .main_content .main_banner .banner_list_wrap { width: 95%; margin: 0 0 0 5%; } .main_content .main_banner .banner_list_wrap .current, .main_content .main_banner .banner_list_wrap .banner_current { display: block; position: absolute; top:0; right: 5%; font-size: 1.15rem; font-weight: 400; color: #999; text-align: center; } .main_content .main_banner .banner_list_wrap .banner_current { top:8% } .main_content .main_banner .banner_list_wrap .current .current_num { color: #333; font-weight: 700; } /* 메인 공지사항 */ .main_content .main_notice .notice_list { padding: 2% 5%; } .main_content .main_notice .notice_list li { margin-bottom: 1.5%; } .main_content .main_notice .notice_list li:last-of-type(1) { margin-bottom: 0; } .main_content .main_notice .notice_list li a { display: flex; justify-content: space-between; align-items: center; padding:4% 5%; background: #f9f9f9; border-radius: 1rem; } .main_content .main_notice .notice_list li a span { font-size: 1.15rem; font-weight: 600; } .main_content .main_notice .notice_list li a p.tit { width: 65%; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .main_content .main_notice .notice_list li a p.date { color: #999; font-size: 1rem; } /* 개인정보 */ .privacy_wrap { display: none; width: 100%; height: 100%; position: fixed; z-index: 100; top:0; left: 0; } .privacy_wrap.active { display: block; } .privacy_wrap .privacy_inner { position: absolute; bottom: 0; padding:15% 5% 5%; height: 90%; width: 100%; background: #fff; border-radius: 2rem 2rem 0 0; } .privacy_wrap .privacy_inner .close { top: 4%; right: 5%; } .privacy_wrap .privacy_inner *::-webkit-scrollbar { width: 2px; } .privacy_wrap .privacy_inner *::-webkit-scrollbar-thumb { background: #3b63d8; } .privacy_wrap .privacy_inner *::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } /* 이용약관 */ .terms_wrap { display: none; width: 100%; height: 100%; position: fixed; z-index: 100; top:0; left: 0; } .terms_wrap.active { display: block; } .terms_wrap .terms_inner { position: absolute; bottom: 0; padding:15% 5% 5%; height: 90%; width: 100%; background: #fff; border-radius: 2rem 2rem 0 0; left: 50%; transform: translateX(-50%); } .terms_wrap .terms_inner .close { top: 4%; right: 5%; } .terms_wrap .terms_inner *::-webkit-scrollbar { width: 2px; } .terms_wrap .terms_inner *::-webkit-scrollbar-thumb { background: #3b63d8; } .terms_wrap .terms_inner *::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } /* 스타플레이어 안내 페이지 */ .starPlayer_wrap { width: 90%; margin: 10% auto; } .starPlayer_wrap .download { padding-bottom: 5%; border-bottom: 1px solid #eee; } .starPlayer_wrap .download p:nth-of-type(1) { font-size: 1.75rem; text-align: center; font-weight: 700; line-height: 2.35rem; } .starPlayer_wrap .download p:nth-of-type(1) span { color: #e15353; } .starPlayer_wrap .download p:nth-of-type(2) { font-size: 1.25rem; text-align: center; font-weight: 600; line-height: 1.8rem; margin: 0 auto 5%; } .starPlayer_wrap .download .icon_wrap { width: 45%; margin: 3% auto 1.7%; } .starPlayer_wrap .download .icon_wrap img { width: 100%; } .starPlayer_wrap .download a { display: block; width: 100%; background:#3a424b; color:#fff; font-size: 1.15rem; text-align: center; border-radius: 0.75rem; padding: 4% 0; } .starPlayer_wrap .download a h4 { color: #fff; font-weight: 500; } .starPlayer_wrap .download_done p { margin: 9% auto 5%; font-size: 1.45rem; line-height: 2.05rem; text-align: center; font-weight: 500; } .starPlayer_wrap .download_done a { display: block; width: 100%; background: #fff; border: 1px solid #e15353; color: #e15353; font-size: 1.15rem; text-align: center; border-radius: 0.75rem; padding: 4% 0; font-weight: 700; } /* 로그인 */ .login_wrap { width: 90%; margin: 5% auto 0; } .login_wrap form input[type="text"],.login_wrap form input[type="password"] { border: none; border-bottom: 1px solid #333; display: block; width: 100%;; padding: 5% 2%; font-size: 1.35rem; font-weight: 600; } .login_wrap form input[type="password"] { color: #3b63d8; font-size: 1.35rem; border: none; } /* placeholder 스타일 */ .login_wrap form input[type="text"]::placeholder { color: #ccc !important; font-size: 1.2rem !important; font-weight: 300 !important; opacity: 1 !important; } .login_wrap form input[type="password"]::placeholder { color: #ccc !important; font-size: 1.2rem !important; font-weight: 300 !important; opacity: 1 !important; } /* 브라우저 호환성을 위한 추가 규칙 */ .login_wrap form input[type="text"]::-webkit-input-placeholder, .login_wrap form input[type="password"]::-webkit-input-placeholder, .login_wrap form input[type="text"]:-ms-input-placeholder, .login_wrap form input[type="password"]:-ms-input-placeholder, .login_wrap form input[type="text"]::-ms-input-placeholder, .login_wrap form input[type="password"]::-ms-input-placeholder { color: #ccc !important; font-size: 1.2rem !important; font-weight: 300 !important; opacity: 1 !important; } .login_wrap form p.notice { color: #e15353; margin: 3% 0; font-size: 1rem; line-height: 1.35rem; display:none; } .login_wrap form input[type="checkbox"] { display: none; } .login_wrap form input[type="checkbox"] + label { font-size: 1.25rem; padding-left: 2.5rem; position: relative; margin-top: 1.5rem; display: block; } .login_wrap form input[type="checkbox"] + label::after { content: ''; width: 1.8rem; height: 1.8rem; border: 1px solid #eee; background: #f4f4f4; display: block; border-radius: 0.55rem; top: -25%; left: 0; position: absolute; } .login_wrap form input[type="checkbox"]:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/check01.png')0 0 no-repeat; background-size: 100%; } .login_wrap form .pw_wrap { border-bottom: 1px solid #333; position: relative; } .login_wrap form .pw_wrap a { display: none; position: absolute; width: 2rem; height: 2rem; top: 50%; right: 2%; transform: translateY(-50%); } .login_wrap form .btn_wrap { margin: 6% 0; } .login_wrap form .btn_wrap a { display: block; font-weight: 700; width: 100%; border-radius: 0.75rem; padding: 5% 0; text-align: center; font-size: 1.35rem; color: #bcbcbc; background: #f5f5f5; } .login_wrap form .btn_wrap a.login_btn.active { color: #fff; background: #3b63d8; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.08); } .login_wrap form .btn_wrap a:nth-last-of-type(1) { color: #3b63d8; border: 1px solid #3b63d8; background: #fff; margin-top: 3%; } .login_wrap form .find_btn { display: flex; justify-content: center; align-items: center; margin-bottom: 12%; } .login_wrap form .find_btn a { display: block; font-size: 1.15rem; color: #888; } .login_wrap form .find_btn a:nth-of-type(1) { padding-right: 5%; margin-right: 4.5%; position: relative; } .login_wrap form .find_btn a:nth-of-type(1)::after { content: '\00B7'; position: absolute; top: -25%; right: 0; display: block; font-size: 1.8rem; } .login_wrap .call_info_wrap { display: block; margin: 5% auto; background: #eff3ff; color: #7591e3; padding: 4% 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.35rem; border-radius: 1.75rem 1.75rem 1.75rem 0; font-size: 1.35rem; } .login_wrap .call_info_wrap p { color:#7591e3; font-weight: 700; } .login_wrap .call_info_wrap span { display: block; width: 1.5rem; height: 1.7rem; } /* 인증번호 전송 공통 */ li.code_area { display: none; } li.code_area.active { display: block; } li .verification_area { display: flex; align-items: center; justify-content: left; gap: 2%; position: relative; } li .verification_area input.nomal { width: 68%;; } li .verification_area a { display: block; margin-top: 2.4%; background: #eff3fc; color: #3b63d8; padding: 5.7% 0; font-size: 1.25rem; width: 30%; line-height: 0; text-align: center; font-weight: 700; border-radius: 0.6rem; } li .verification_area p.timer { position: absolute; font-size: 1.35rem; top: 56.6%; transform: translateY(-50%); color: #3b63d8; right: 12.5rem; } /* 아이디 찾기 / 비밀번호 찾기 */ .find_area { padding: 5%; } .find_area .default_tab { margin-bottom: 5%; } .find_area .tab_cont { width: 100%; display: none; margin-bottom: 10%; } .find_area .tab_cont.active { display: block; } .find_area .tab_cont a.send_btn { display: block; width: 100%; background: #3b63d8; color: #fff; font-weight: 700; font-size: 1.45rem; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.08); text-align: center; padding: 4.6% 0; border-radius: 1rem; } .find_area .tab_cont ul { margin: 7% auto; } .find_area .tab_cont li { margin-bottom: 1.75rem; } .findResult_area { padding: 5%; margin-bottom: 10%; } .findResult_area .result { background: #f8faff; width: 100%; padding: 10% 0; display: flex; justify-content: center; align-items: center; border-radius: 0.75rem; margin: 5% 0; } .findResult_area .result p { font-size: 1.75rem; text-align: center; line-height: 2.5rem; } .findResult_area .result p span { font-weight: 700; color: #3b63d8; } .findResult_area .default_btn { margin-bottom: 5%; } .findResult_area ul li { margin-bottom: 1.75rem; } /* 회원가입 */ .join_wrap .step_info { display: flex; justify-content: space-between; align-items: center; margin: 5% auto; width: 86%; } .join_wrap .step_info li { width: 25%; position: relative; } .join_wrap .step_info li::after { content: ''; width: 24%; height: 0.95rem; display: block; position: absolute; right: -35%; top: 34%; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/dot.png') 0 0 no-repeat; background-size: 100% } .join_wrap .step_info li:nth-last-of-type(1)::after { display: none; } .join_wrap .step_info li p { font-size: 1.75rem; color: #BBCAF1; background: #F3F6FD; font-weight: 700; border-radius: 50%; width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center; margin: 5% auto 12%; } .join_wrap .step_info li.active p { color: #fff; background: #3b63d8; box-shadow: 0 0.75rem 0.75rem 0 rgba(1, 68, 255, 0.07) } .join_wrap .step_info li span { color: #BBCAF1; display: block; text-align: center; margin: 3% 0; font-size: 1.35rem; font-weight: 500; } .join_wrap .step_info li.active span { color: #3b63d8; } .join_wrap .btn_wrap { display: flex; width: 100%;; } .join_wrap .btn_wrap a { display: block; padding: 4.3% 0; text-align: center; color: #fff; font-weight: 700; font-size: 1.35rem; } .join_wrap .btn_wrap a:nth-of-type(1) { background: #333; width: 30%; } .join_wrap .btn_wrap a:nth-of-type(2) { background: #3b63d8; width: 70%; } .join_wrap .notice_txt { display: none; font-size: 1rem; margin-top:2%; color: #e15353; } .join_wrap .guide_txt { color: #aaa; margin-top: 1rem; } /* 회원가입 - step1*/ .join_wrap.step1 input { visibility: hidden; position: absolute; } .join_wrap.step1 .all_chk_wrap { width: 90%; padding: 5%; border: 1px solid #dddddd; border-radius: 0.75rem; margin:0 auto; } .join_wrap.step1 .all_chk_wrap label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.55rem; } .join_wrap.step1 .all_chk_wrap label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .join_wrap.step1 .all_chk_wrap input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .join_wrap.step1 .chk_list { width: 90%; border: 1px solid #dddddd; border-radius: 0.75rem; margin: 5% auto 7%; } .join_wrap.step1 .chk_list li { padding: 3.5% 5%; border-bottom: 1px solid #ddd; } .join_wrap.step1 .chk_list li > label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.75rem; } .join_wrap.step1 .chk_list li > label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .join_wrap.step1 .chk_list li > input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .join_wrap.step1 .chk_list li > label p { width: 80%; } .join_wrap.step1 .chk_list li > label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 1rem; } .join_wrap.step1 .chk_list li > label span.gray { border-color: #888; color: #888; } .join_wrap.step1 .chk_list li > label a { display: inline-block; width: 2rem; height: 2rem; position: absolute; right: 0; top: 0; } .join_wrap.step1 .chk_list li > label a.active { transform: scaleY(-1); } .join_wrap.step1 .chk_list li dl { background: #f9f9f9; padding: 5%; border-radius: 0.75rem; margin: 5% 0;; } .join_wrap.step1 .chk_list li dl dt { border-bottom: 1px solid #ccc; padding-bottom: 5%; font-size: 1.25rem; font-weight: 700; } .join_wrap.step1 .chk_list li dl dd { display: block; margin-top: 4.5%; } .join_wrap.step1 .chk_list li dl dd label { position: relative; display: block; font-size: 1.05rem; padding-left: 2rem; } .join_wrap.step1 .chk_list li dl dd label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.1rem; height: 1.1rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/v_off.png')0 0 no-repeat; background-size: 100%; } .join_wrap.step1 .chk_list li dl dd input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/v_on.png')0 0 no-repeat; background-size: 100%; } .join_wrap.step1 .chk_list li > p { font-size: 1.15rem; margin-top:8%; line-height: 1.55rem; } .join_wrap.step1 .chk_list li > p:nth-last-of-type(1) { color: #3b63d8; margin-top: 5%; } .join_wrap.step1 .detail { display: none; background: #f9f9f9; height: 15rem; width: 100%; margin: 3% 0; line-height: 1.25rem; overflow-y: scroll; padding: 3%; border-radius: 0.5rem; } .join_wrap.step1 .detail.active { display: block; } .join_wrap.step1 .detail h3 { font-weight: 700; padding-bottom: 3%; border-bottom: 1px solid #ddd; margin-bottom: 5%; } .join_wrap.step1 .detail::-webkit-scrollbar { width: 3px; } .join_wrap.step1 .detail::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2rem; } .join_wrap.step1 .detail::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } /* 이용약관 */ .terms_wrap { padding: 2%; } /* 수신동의 관련 popup */ .ads_popup { position: fixed; top:0; left: 0; width: 100%; height: 100%; display: none; } .ads_popup.active { display: block; } .ads_popup .pop_inner { background: #fff; border-radius: 0.75rem; padding: 5%; width: 86%; position: absolute; left: 50%; top:50%; z-index: 9; transform: translate(-50%, -50%); } .ads_popup .pop_inner .icon_wrap { width: 50%; margin: 5% auto 3%; display: block; } .ads_popup .pop_inner .icon_wrap img { width: 100%; } .ads_popup .pop_inner p:nth-of-type(1) { font-size: 1.75rem; margin-bottom: 3%; color: #3b63d8; text-align: center; line-height: 2.75rem;; font-weight: 700; } .ads_popup .pop_inner p:nth-of-type(2) { font-size: 1.35rem; font-weight: 500; color:#333; text-align: center; margin-bottom: 10%; line-height: 2rem; } .ads_popup .pop_inner a { font-weight: 500; font-size: 1.5rem; } .ads_popup .pop_inner a.close_btn { margin-top: 5%; } /* 필수정보 */ .required_wrap { padding: 5%; background: #fff; margin-bottom: 2%; } .required_wrap li { margin-bottom: 3%; } .required_wrap li .zip_code { display: flex; justify-content: space-between; align-items: center; } .required_wrap li .zip_code input { width: 68%; background: #fff; } .required_wrap li .zip_code a { display: block; margin-top: 2.4%; background: #eff3fc; color: #3b63d8; padding: 5.7% 0; font-size: 1.25rem; width: 30%; line-height: 0; text-align: center; font-weight: 700; border-radius: 0.6rem; } .required_wrap .radio_wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 2.4%; } .required_wrap .radio_wrap input[type="radio"] { display: none; } .required_wrap .radio_wrap label { display: block; width: 49%; text-align: center; border-radius: 0.75rem; border: 1px solid #ccc; font-size: 1.25rem; padding: 3.7% 0; color: #ccc; } .required_wrap .radio_wrap input[type="radio"]:checked+label { color: #3b63d8; font-weight: 700; border-color: #3b63d8; } .required_wrap input[readonly] { background-color: #f5f5f5; } /* 회원가입 - step2*/ .join_wrap.step2 .join_inner { background: #f0f0f0; } .join_wrap.step2 .point_info { padding: 5%; background: #F3F6FD;; } .join_wrap.step2 .point_info .top { display: flex; justify-content: space-between; align-items: center; margin-bottom:3%; } .join_wrap.step2 .point_info .top p:nth-of-type(1) { width: 55%; font-size: 1.45rem; font-weight: 500; line-height: 2rem; } .join_wrap.step2 .point_info .top p:nth-of-type(1) span { font-weight: 700; } .join_wrap.step2 .point_info .top p:nth-of-type(2) { width: 45%; } .join_wrap.step2 .point_info .top p:nth-of-type(2) img { width: 100%; } .join_wrap.step2 .point_info > p { font-size: 1rem; line-height: 1.35rem; } .join_wrap.step2 .additional_wrap { padding: 7% 5%; background: #fff; margin-bottom: 2%; } .join_wrap.step2 .additional_wrap li { margin-bottom: 3%; } .join_wrap.step2 .additional_wrap dl dt { font-size: 1.25rem; width: 100%; font-weight: 700; color: #333; display: block; } .join_wrap.step2 .additional_wrap dl dd { display: block; padding: 5%; border: 1px solid #ccc; border-radius: 0.75rem;; margin-top: 2.4%; } .join_wrap.step2 .additional_wrap dl dd input[type="checkbox"].nomal:disabled + label::after { background: #ddd; } .join_wrap.step2 .additional_wrap dl dd li:nth-of-type(1) label { margin-top: 0; } .join_wrap.step2 .additional_wrap li .input_wrap { display: flex; justify-content: space-between; align-items: center; } .join_wrap.step2 .additional_wrap li .input_wrap input { width: 68%; } .join_wrap.step2 .additional_wrap li .input_wrap a { display: block; margin-top: 2.4%; background: #eff3fc; color: #3b63d8; padding: 6.4% 0; font-size: 1.25rem; width: 30%; line-height: 0; text-align: center; font-weight: 700; border-radius: 0.6rem; } .join_wrap.step2 .additional_wrap li .select_wrap { position: relative; } .join_wrap.step2 .additional_wrap li .select_wrap a { width: 100%; display: block; margin-top: 2.4%; font-size: 1.25rem; padding: 3.7%; color: #333; border-radius: 0.75rem; border: 1px solid #cccccc; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .join_wrap.step2 .additional_wrap li .select_wrap span { position: absolute; display: block; width: 2rem; height: 2rem; top: 20%; right: 3%; transition: .3s; transform: rotate(180deg); } .join_wrap.step2 .additional_wrap li .select_wrap a:focus + span { transform: rotate(360deg); } .join_wrap.step2 .additional_wrap .add_info { margin-top: 7%; margin-bottom: 0; display: none; } .join_wrap.step2 .additional_wrap .add_info.active { display: block; } .join_pop { display: none; } .join_pop.active { display: block; } .join_pop .input_wrap { margin-top: 5%; } .join_pop .input_wrap li { margin-bottom: -0.5%; } .join_pop .input_wrap li input { visibility: hidden; margin: 0; } .join_pop .input_wrap li.university.active { background: #f8faff; padding: 1% 5% 5%;; border-radius: 0.75rem; border:1px solid #3b63d8 } .join_pop .input_wrap li.university a { display: block; width: 100%; border-radius: 0.75rem; padding:4% 5%; border:1px solid #ccc; font-size: 1.15rem; } .join_pop .input_wrap li.university a.active { border-radius: 0; border: none; border-bottom: 1px solid #ccc; color: #3b63d8; font-weight: 700; } .join_pop .input_wrap li.university .more_con input[type="radio"] +label { position: relative; display: block; font-size: 1.05rem; padding-left: 2rem; color:#888 } .join_pop .input_wrap li.university .more_con input[type="radio"] +label::before { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.1rem; height: 1.1rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/v_off.png')0 0 no-repeat; background-size: 100%; } .join_pop .input_wrap li.university .more_con input[type="radio"]:checked +label { color: #3b63d8; } .join_pop .input_wrap li.university .more_con input[type="radio"]:checked +label::before { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/v_on.png')0 0 no-repeat; background-size: 100%; } .join_pop .input_wrap li.university .more_con { display: none; } .join_pop .input_wrap li.university .more_con.active { display: block; } .join_pop .input_wrap li>label { display: block; width: 100%; border-radius: 0.75rem; padding: 4% 5%; border:1px solid #ccc; font-size: 1.15rem; } .join_pop .input_wrap li>input[type="radio"]:checked + label { border-color: #3b63d8; color: #3b63d8; font-weight: 700; } /* 회원가입 - step3*/ .join_wrap.step3 { padding: 5%; } .join_wrap.step3 .membership { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; padding: 5% 0; border-top:1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .join_wrap.step3 .membership p { text-align: center; width: 100%; } .join_wrap.step3 .membership p:nth-of-type(1) { width: 35%; height: 11rem; margin: 0 auto; } .join_wrap.step3 .membership p:nth-of-type(2) { font-size: 1.75rem; line-height: 2.25rem; margin-bottom: 10%; } .join_wrap.step3 .membership p:nth-of-type(2) span { font-weight: 700; } .join_wrap.step3 .membership p:nth-of-type(3) { text-align: left; padding: 3% 7%; border-radius: 0.75rem; font-size: 1rem; line-height: 1.5rem; background: #f8faff; border: 1px solid #dee5f8; position: relative; } .join_wrap.step3 .membership p:nth-of-type(3)::before { content: ''; position: absolute; display: block; width: 3px; height: 3px; background: #555; left: 5%; top: 30%; border-radius: 50%; } .join_wrap.step3 .rcv_ads { padding: 7% 0 10%; } .join_wrap.step3 .rcv_ads p { color:#aaa; text-align: center; text-align: 1.05rem; line-height: 1.5rem; margin-bottom: 8%; } /* 정보수정 */ .modify_wrap .required_wrap li .select_wrap { position: relative; } .modify_wrap .required_wrap li .select_wrap a { width: 100%; display: block; margin-top: 2.4%; font-size: 1.25rem; padding: 3.7%; color: #333; border-radius: 0.75rem; border: 1px solid #cccccc; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .modify_wrap .required_wrap li .select_wrap span { position: absolute; display: block; width: 2rem; height: 2rem; top: 20%; right: 3%; transition: .3s; transform: rotate(180deg); } .modify_wrap .required_wrap li .select_wrap a:focus + span { transform: rotate(360deg); } .modify_wrap .ads_input_wrap { padding: 5%; border-top: 8px solid #f0f0f0; border-bottom: 8px solid #f0f0f0; } .modify_wrap .ads_input_wrap .inner { margin: 0 auto; border-radius: .75rem; border:1px solid #f0f0f0; } .modify_wrap .ads_input_wrap dl { background: #f9f9f9; padding: 5%; border-radius: 0.75rem; margin: 5% auto; width: 90%; } .modify_wrap .ads_input_wrap dl dt { border-bottom: 1px solid #ccc; color: #666; padding-bottom: 5%; font-size: 1.25rem; font-weight: 700; } .modify_wrap .ads_input_wrap dl dd { display: block; margin-top: 4.5%; } .modify_wrap .ads_input_wrap dl dd input { display: none; } .modify_wrap .ads_input_wrap dl dd label { position: relative; display: block; font-size: 1.05rem; padding-left: 2rem; } .modify_wrap .ads_input_wrap dl dd label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.1rem; height: 1.1rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/v_off.png')0 0 no-repeat; background-size: 100%; } .modify_wrap .ads_input_wrap dl dd input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/v_on.png')0 0 no-repeat; background-size: 100%; } .modify_wrap .ads_input_wrap .all_chk_wrap { width: 100%; padding: 5%; margin:0 auto; border-bottom: 1px solid #f0f0f0; } .modify_wrap .ads_input_wrap .all_chk_wrap label { position: relative; display: block; font-size: 1.25rem; font-weight: 700; padding-left: 2.35rem; line-height: 1.55rem; } .modify_wrap .ads_input_wrap .all_chk_wrap label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #aaa; color: #aaa; border-radius: 1rem; } .modify_wrap .ads_input_wrap .all_chk_wrap label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .modify_wrap .ads_input_wrap .all_chk_wrap input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .modify_wrap .withdrawal_wrap { padding: 5% 5% 10%; } .modify_wrap .withdrawal_wrap p { font-size: 1.25rem; font-weight: 700; margin-bottom: 5%; } .modify_wrap .withdrawal_wrap a { display: block; padding: 5% 0; font-size: 1.25rem; color: #3b63d8; font-weight: 500; text-align: center; border-radius: 0.75rem; border: 1px solid #3b63d8; } /* 회원탈퇴 */ .scsn_wrap { background: #f0f0f0; } .scsn_wrap form input[type="text"]::placeholder, .scsn_wrap form .scsn_step1 textarea::placeholder, .scsn_wrap form input[type="text"]::-webkit-input-placeholder, .scsn_wrap form .scsn_step1 textarea::-webkit-input-placeholder, .scsn_wrap form input[type="text"]:-ms-input-placeholder, .scsn_wrap form .scsn_step1 textarea:-ms-input-placeholder, .scsn_wrap form input[type="text"]::-ms-input-placeholder, .scsn_wrap form .scsn_step1 textarea::-ms-input-placeholder { color: #ccc; font-size: 1.05rem; } .scsn_wrap form .scsn_step1,.scsn_wrap form .scsn_step2 { padding: 5%; background: #fff; margin-bottom: 1.5%; } .scsn_wrap form .scsn_step1 .comments { width: 100%; border-radius: 0.75rem; border: 1px solid #ddd; padding: 5%; margin: 4% auto 7%; } .scsn_wrap form .scsn_step1 .comments li { margin-bottom: 6%; } .scsn_wrap form .scsn_step1 .comments li:nth-last-of-type(1) { margin-bottom: 0; } .scsn_wrap form .scsn_step1 .comments li input { display: none; } .scsn_wrap form .scsn_step1 .comments li label { position:relative; font-size: 1.18rem; padding-left: 2.35rem; } .scsn_wrap form .scsn_step1 .comments li label::before { content: ''; display: block; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .scsn_wrap form .scsn_step1 .comments li input:checked + label::before { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .scsn_wrap form .scsn_step1 textarea { display: block; width: 100%; padding: 5%; border-radius: 0.75rem; margin: 3% auto; border: 1px solid #ddd; } .scsn_wrap form .scsn_step2 > span { font-size: 1.25rem; font-weight: 700; display: block; text-align: left; margin: 5% 0; } .scsn_wrap form .scsn_step2 p { font-size: 1.2rem; margin-bottom: 6%; } .scsn_wrap form .scsn_step2 p span { color: #3b63d8; } .scsn_wrap form .scsn_step2 .delete_table { width: 100%; font-size: 1.15rem; margin-bottom: 5%; } .scsn_wrap form .scsn_step2 .delete_table th { background: #f0f0f0; padding: 3% 0; } .scsn_wrap form .scsn_step2 .delete_table td { text-align: center; padding: 3% 0; border: 1px solid #f0f0f0; } .scsn_wrap form .scsn_step3 { padding: 5%; background: #fff; } .scsn_wrap form .scsn_step3 li { margin-bottom: 5%; } .scsn_wrap form .scsn_step3 li dl { display: flex; justify-content: left; gap: 1rem; } .scsn_wrap form .scsn_step3 li dt { font-size: 1.25rem; font-weight: 700; display: block; width: 30%;; } .scsn_wrap form .scsn_step3 li dd { font-size: 1.25rem; font-weight: 700; } /* .scsn_wrap form .scsn_step3 li input.nomal { font-size: 2.65rem; padding: 0.8% 3%; } */ .scsn_wrap form .btn_wrap { background: none; width: 100%; display: flex; justify-content: space-between; align-items: center; } .scsn_wrap form .btn_wrap a { display: block; padding: 4.3% 0; text-align: center; color: #fff; font-weight: 700; font-size: 1.35rem; } .scsn_wrap form .btn_wrap a:nth-of-type(1) { background: #333; width: 65%; } .scsn_wrap form .btn_wrap a:nth-of-type(2) { background: #3b63d8; width: 35%; } /* 강의관련 공통 구간 */ .lecture_wrap { width: 90%; border: 1px solid #3b63d8; border-radius: 1rem; margin: 0% auto 7%; overflow: hidden; max-width: 700px; } .lecture_wrap .info_top { display: flex; justify-content: space-between; align-items: center; padding: 5% 6%; background: #3b63d8; } .lecture_wrap .info_top .left { width: 60%; text-align: left; } .lecture_wrap .info_top .left p { color: #fff; font-size: 1.05rem; font-weight: 400; line-height: 1.65rem; } .lecture_wrap .info_top .left a { color: #fff; font-weight: 700; margin:5% 0; padding-right: 1.35rem; font-size: 1.35rem; display: flex; justify-content: left; gap: 0; align-items: center; position: relative; } .lecture_wrap.package .info_top .left span { display: block; width: 2rem; height: 2rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow_w.png') 0 0 no-repeat; background-size: 100%; } .lecture_wrap .info_top .icon_wrap { display: block; width: 40%; height: 8.4rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/user_icon02.png') 0 70% no-repeat; background-size: 100%; } .lecture_wrap .info_top .img_wrap { display: block; width: 37%; position: absolute; right: 0; bottom: -0.2%; } .lecture_wrap .info_top .img_wrap img { width: 100%; } .lecture_wrap .info { padding: 5%; display: block; } .lecture_wrap .info h5 { font-size: 1.6rem; font-weight: 700; display: flex; justify-content: left; align-items: top; gap: 2%; margin-bottom: 6%; line-height: 2.25rem; } .lecture_wrap .info h5 span.arrow_y { display: block; margin-left: auto; width: 1.65rem; height: 1.65rem;; } .lecture_wrap .info h5 span.new { display: inline-block; width: 1.5rem; height: 1.5rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/new_bubble.png') 0 0 no-repeat; background-size: 100%; } .lecture_wrap .info > span { display: inline-block; padding-left: 1.75rem; margin-right: 5%; position: relative; font-size: 1.25rem; } .lecture_wrap .info > span::after { content: ''; display: block; position: absolute; top:0; left: 0; width: 1.35rem; height: 1.35rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon01.png') 0 0 no-repeat; background-size: 100%; } /* .lecture_wrap .info > span:nth-last-of-type(1)::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon02.png') 0 0 no-repeat; background-size: 100%; } */ .lecture_wrap .price_area { width: 94%; padding-top: 6%; margin: 2% auto 5%; position: relative; display: flex; align-items: center; justify-content: end; gap: 5%; border-top: 1px solid #eee; } .lecture_wrap .price_area span { display: block; font-size: 1.3rem; } .lecture_wrap .price_area span.sale { position: absolute; background: #e15353; border-radius: 0.5rem; top:-30%; right: 0; color: #fff; font-size: 1.05rem; padding:2% 4%; font-weight: 700; } .lecture_wrap .price_area span.price { color:#888; text-decoration:line-through; } .lecture_wrap .price_area p { display: flex; justify-content: end; align-items: center; gap: 3%; font-size: 1.75rem; color: #e15353; font-weight: 700; } .lecture_wrap .price_area p span { font-size: 1.55rem; font-weight:500; color: #e15353; } .lecture_wrap .btn_wrap { width: 94%; margin:3% auto; display: flex; justify-content: space-between; align-items: center; } .lecture_wrap .btn_wrap a { display: block; text-align: center; border: 1px solid #3b63d8; width: 49%; font-size: 1.45rem; color: #3b63d8; font-weight: 700; padding: 3.5% 0; border-radius: 0.75rem; } .lecture_wrap .btn_wrap a.apply_btn { background: #eff3ff; border-color: #eff3ff; } .lecture_wrap.dan { position: relative; overflow: visible; margin:5% auto 10%;; } .lecture_wrap.dan .subject { position: absolute; display: block; z-index: 9; top: -4.6%; left: -0.2%; padding: 2.3% 5%; border-radius: 1.35rem 1.35rem 1.35rem 0; background: #00a9d9; font-size: 1.35rem; font-weight: 500; color: #fff; } .lecture_wrap.dan .info_top .left p { font-size: 1.25rem; margin-top: 2%; } .lecture_wrap.dan .info_top .left span { color: #fff; font-weight: 700; margin:3% 0 0; padding-right: 2.35rem; font-size: 1.75rem; display: block; } .lecture_wrap.dan .info_top { border-radius: 1rem 1rem 0 0; padding: 8% 6% 0%; display: block; position: relative; height: 11rem; } .lecture_wrap.dan .info_top .left { width: 100%; text-align: left; } .lecture_wrap.teacher .info>a { display: inline-block; padding-left: 1.95rem; margin-right: 5%; position: relative; font-size: 1.25rem; } .lecture_wrap.teacher .info>a::before { content: ''; display: block; background: #eee; width: 1px; height: 100%; position: absolute; right: -10%; top: 0; } .lecture_wrap.teacher .info>a>span { display: block; position: absolute; top:50%; transform: translateY(-50%); left: 0; width: 1.45rem; height: 1.45rem; } .lecture_wrap.teacher .info>a b { font-weight: 500; text-decoration: underline; } /* 01. 수강신청 */ .banner_wrap { width: 100%; margin-bottom: -10%; } .banner_wrap img { width: 100%; } .banner_wrap .bx-wrapper .bx-pager { position: absolute; bottom: 15%; left: 7.5%; } .banner_wrap .bx-wrapper .bx-pager.bx-default-pager a { background: #999; width: 7px; height: 7px; border-radius: 50%; margin: 0 3px } .banner_wrap .bx-wrapper .bx-pager.bx-default-pager a.active { background: #333; } .lecture_main { display: block; padding-top: 4%; } .lecture_main .more_btn { background: #f8f8f8; width: 90%; margin: 3% auto 5%; display: block; border-radius: 0.75rem; text-align: center; font-weight: 700; padding: 3.5% 0; font-size: 1.25rem; } .lecture_main .more_btn span { display: inline-block; margin-left: 1.5%;; } .lecture_main .more_btn span.total { color:#bcbcbc } .teacher_list_pop { display: none; } .teacher_list_pop.active { display: block; } .teacher_list_pop .tit_wrap { position: relative; padding-bottom: 5%;; border-bottom: 1px solid #ddd; } .teacher_list_pop .tit_wrap p { font-size: 1.55rem; font-weight: 700; } .teacher_list_pop ul li { width: 100%; border-bottom: 1px solid #f0f0f0; font-size: 1.25rem; font-weight: 500; margin: 2% 0; } .teacher_list_pop ul li a { display: block; width: 100%; padding: 3% 0; } /* 단과 */ .lecture_main .find_result { margin: 5% auto 8%; font-size: 1.65rem; font-weight: 700; width: 90%; } /* 강좌상세보기 */ .lecture_info_wrap .lecture_tab { width: 90%; margin: 7% auto; } .lecture_info_wrap .lecture_tit { background: url('//cdn.edu2080.co.kr/gumjung/m/common/tit_bg.png') 0 0 no-repeat; background-size: 100%; padding: 7% 5%; margin-bottom: 5%; } .lecture_info_wrap .lecture_tit.dan { position: relative;; } .lecture_info_wrap .lecture_tit.dan span { font-size: 1.45rem; font-weight: 700; color: #fff;; } .lecture_info_wrap .lecture_tit.dan p:nth-of-type(1) { font-size: 1.25rem; line-height: 1.55rem; font-weight: 400; padding: 5% 0 2%; } .lecture_info_wrap .lecture_tit.dan p:nth-of-type(2) { padding: 0; line-height: 2rem; margin-bottom: 5%; } .lecture_info_wrap .lecture_tit.dan .img_wrap { position: absolute; right: 0; bottom: -2.2%; width: 47%; } .lecture_info_wrap .lecture_tit.dan .img_wrap img { width: 100%; } .lecture_info_wrap .lecture_tit .tit_top { display: flex; align-items: center; justify-content: start; gap: 3%; } .lecture_info_wrap .lecture_tit .tit_top span { font-size: 1.25rem; font-weight: 700; color: #fff; } .lecture_info_wrap .lecture_tit .tit_top span:nth-last-of-type(1) { font-weight: 400; } .lecture_info_wrap .lecture_tit p { font-size: 1.85rem; font-weight: 700; color: #fff; padding: 7% 0; line-height: 2.75rem; } .lecture_info_wrap .lecture_info { display: none; padding: 2% 5% 15%; } .lecture_info_wrap .lecture_info.active { display: block; } .lecture_info_wrap .lecture_info .sample_player { margin: 7% auto 0; width: 100%; } .lecture_info_wrap .lecture_info .sample_player p:nth-of-type(1) { font-size: 1.35rem; margin-bottom: 3%; font-weight: 700;; } .lecture_info_wrap .lecture_info .sample_player p:nth-of-type(2) { width: 100%; background:#FFFBFB; padding: 5%; border-radius: 0.75rem; border: 1px solid #fee4e4; } .lecture_info_wrap .lecture_info .sample_player p:nth-of-type(2) img { display: block; width: 40%; margin: 0 auto; } .lecture_info_wrap .lecture_info .sample_player p:nth-of-type(2) a { display: block; text-align: center; color: #e15353; font-weight: 700; padding: 3.5% 0; width: 90%; margin: 5% auto; font-size: 1.25rem; border-radius: 0.75rem; border: 1px solid #e15353; } .lecture_info_wrap .lecture_info table { width: 100%; border-top: 2px solid #333 !important; -webkit-border-top: 2px solid #333; border-style: solid; border-collapse: collapse; } .lecture_info_wrap .lecture_info table tr th,.lecture_info_wrap .lecture_info table tr td { border-bottom: 1px solid #eee; padding: 5% 0; } .lecture_info_wrap .lecture_info table tr th { text-align: left; font-size: 1.15rem; font-weight: 700; } .lecture_info_wrap .lecture_info.curriculum table tr th { text-align: center; background: #f8f8f8; } .lecture_info_wrap .lecture_info table tr td a { display: block; padding: 3% 0; border-radius: 0.85rem; border: 1px solid #333; text-align: center; width: 35%; } .lecture_apply_btn { position: fixed; z-index: 2; width: 100%; display: block; font-size: 1.45rem; text-align: center; color: #fff; background: #3b63d8; padding: 5% 0; font-weight: 500; left: 0; bottom: 0; } /* 수강신청 팝업 */ .lecture_appliy_pop { display: none; } .lecture_appliy_pop.active { display: block; } .lecture_appliy_pop .pop_inner { padding: 5% 0 0 0; height: 70%; } .lecture_appliy_pop .pop_inner a.close_arrow { display: block; width: 2.9rem; height: 1.7rem; margin: -2% auto 3%; } .lecture_appliy_pop .top_wrap { height: 65%; overflow-y: scroll; } .lecture_appliy_pop .top_wrap li { margin: 3% auto; width: 90%; } .lecture_appliy_pop .top_wrap li.active { border-radius: 0.75rem; border:1px solid #3b63d8 } .lecture_appliy_pop .top_wrap .apply_wrap li>a { display: flex; align-items: center; width: 100%; border-radius: 0.75rem; padding:4% 5%; border:1px solid #ccc; font-size: 1.15rem; color: #DCDCDD; } .lecture_appliy_pop .top_wrap .apply_wrap li>a span { width: 1.75rem; height: 1.75rem; margin-left: auto; display: inline-block; transition: .3s; transform: rotate(180deg); } .lecture_appliy_pop .top_wrap .apply_wrap li>a.active { border: none; background: #fff; font-weight: 700; } .lecture_appliy_pop .top_wrap .apply_wrap li>a.active span { transform: rotate(360deg); } .lecture_appliy_pop .top_wrap li .more_con input[type="checkbox"] { display: none; } .lecture_appliy_pop .top_wrap li .more_con { display: none; background: #f8faff; padding: 5%; border-radius: 0.75rem; } .lecture_appliy_pop .top_wrap li .more_con.active { display: block; } .lecture_appliy_pop .top_wrap li .more_con label span { display: block; font-size: 1.15rem; font-weight: 400; } .lecture_appliy_pop .top_wrap li .more_con label p { display: block; margin-top: 3%; font-size: 1.45rem; font-weight: 700; color: #333; } .lecture_appliy_pop .top_wrap .lecture_add_wrap { width: 90%; margin: 5% auto; max-height: 50vh; overflow-y: scroll; } .lecture_appliy_pop .top_wrap .lecture_add_wrap li { width: 100%; margin-bottom: 3%; background: #f8f8f8; padding: 5%; position: relative; border-radius: 0.75rem; } .lecture_appliy_pop .top_wrap .lecture_add_wrap li a { display: block; position: absolute; top: 20%; right: 5%; width: 1.75rem; height: 1.75rem; } .lecture_appliy_pop .top_wrap .lecture_add_wrap li span { display: block; font-size: 1.15rem; font-weight: 400; width: 90%; line-height: 1.75rem; } .lecture_appliy_pop .top_wrap .lecture_add_wrap li p { display: block; margin-top: 3%; font-size: 1.45rem; font-weight: 700; color: #333; } .lecture_appliy_pop .bottom_wrap { position: absolute; bottom: 0; width: 100%; background: #fff; z-index: 9; } .lecture_appliy_pop .bottom_wrap dl { margin: 0 auto 0; width: 90%; padding: 7% 0; border-top: 2px solid #666; } .lecture_appliy_pop .bottom_wrap dl dt,.lecture_appliy_pop dl dd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5%; } .lecture_appliy_pop .bottom_wrap dl dt p { font-size: 1.15rem; } .lecture_appliy_pop .bottom_wrap dl dd p { font-size: 1.55rem; font-weight: 700; } .lecture_appliy_pop .bottom_wrap dl dd p:nth-last-of-type(1) { color: #e15353; font-size: 1.35rem; font-weight: 500; } .lecture_appliy_pop .bottom_wrap dl dd p span { display: inline-block;; font-size: 1.55rem; font-weight: 700; color: #e15353; } .lecture_appliy_pop .bottom_wrap .btn_wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; } .lecture_appliy_pop .bottom_wrap .btn_wrap a { display: block; padding: 5% 0; text-align: center; color: #fff; font-size: 1.35rem; font-weight: 500; width: 65%; background-color: #3b63d8; } .lecture_appliy_pop .bottom_wrap .btn_wrap a:nth-of-type(1) { background: #333; width: 35%; } /* 스타강사 */ .teacher_main { display: block; padding: 5%; margin: 0 auto; } .teacher_main .teacher_area { width: 100%; margin-bottom: 11%; max-width: 700px; } .teacher_main .teacher_area .info_wrap { position: relative; background: #3b63d8; padding: 10% 5%; margin: 6% 0 3%; border-radius: 0.75rem; } .teacher_main .teacher_area .info_wrap .subject { position: absolute; display: block; z-index: 9; top: -10.6%; left: -0.2%; padding: 2.3% 5%; border-radius: 1.35rem 1.35rem 1.35rem 0; background: #00a9d9; font-size: 1.35rem; font-weight: 500; color: #fff; } .teacher_main .teacher_area .info_wrap p { width: 70%; font-size: 1.2rem; font-weight: 400; margin:5% 0 3%; color: #fff; line-height: 1.55rem; } .teacher_main .teacher_area .info_wrap h4 { font-size: 1.55rem; font-weight: 700; color: #fff; } .teacher_main .teacher_area .info_wrap .img_wrap { width: 50%; position: absolute; right: 0; bottom: -0.2%; height: 100%; text-align: right; overflow: hidden; border-radius: 0 0 0.75rem 0; } .teacher_main .teacher_area .info_wrap .img_wrap img { width: 90%; } .teacher_main .teacher_area .btn_wrap { display: flex; justify-content: space-between; align-items: center; padding: 3% 5%; border-radius: 0.75rem; border: 1px solid #3b63d8; } .teacher_main .teacher_area .btn_wrap a { display: block; width: 50%; text-align: center; color:#3b63d8; position: relative; font-size: 1.25rem; } .teacher_main .teacher_area .btn_wrap a:nth-of-type(1)::before { content: ''; display: block; position: absolute; background: #3b63d8; width: 1px; height: 100%; right: 0; top: 0; } .teacher_info_wrap { display: block; margin: 0 auto; } .teacher_info_wrap .teacher_info { display: none; } .teacher_info_wrap .teacher_info.active { display: block; } .teacher_info_wrap .teacher_tab { margin: 3% auto 8%; width: 90%; } .teacher_info_wrap .teacher_info_tit { background: url('//cdn.edu2080.co.kr/gumjung/m/common/tit_bg.png') 0 0 no-repeat; background-size: 150%; padding: 7% 5%; margin-bottom: 5%; } .teacher_info_wrap .teacher_info_tit .tit_top { position: relative; width: 100%; margin: 10% auto 0; } .teacher_info_wrap .teacher_info_tit .tit_top span { display: block; font-size: 1.45rem; font-weight: 700; color: #fff;; margin-top: -5%; } .teacher_info_wrap .teacher_info_tit .tit_top span.img_wrap { width: 50%; height: 175%; text-align: center; } .teacher_info_wrap .teacher_info_tit .tit_top p:nth-of-type(1) { font-size: 1.25rem; line-height: 1.55rem; font-weight: 400; padding: 5% 0 2%; color: #fff; } .teacher_info_wrap .teacher_info_tit .tit_top p:nth-of-type(2) { font-size: 1.65rem; font-weight: 700; padding: 0; line-height: 2rem; margin-bottom: 5%; color: #fff; } .teacher_info_wrap .teacher_info_tit .img_wrap { position: absolute; right: -5%; bottom: -27.2%; width: 50%; overflow: hidden; } .teacher_info_wrap .teacher_info_tit a { background: #fff; color:#3b63d8; position: relative; z-index: 3; display: block; width: 100%; border-radius: 0.75rem; text-align: center; font-size: 1.25rem; padding: 4% 0; } /* 교재 */ .books_main { display: block; } .books_main .slider_area { position: relative; overflow: hidden; height: 35rem; border-bottom: 10px solid #f0f0f0; } .books_main .slider_area img { width: 100%; } .books_main .slider_area h4 { font-size: 2rem; font-weight: 700; color: #fff; margin: 5% 0; position: absolute; left: 5%; top:0; } .books_main .slider_area .slide_box { position: absolute; left: 0; top:18%; width: 100%; } .books_main .slider_area .slide_box li { width: 30%; } .books_main .slider_area .slide_box li a { display: block; } .books_main .slider_area .slide_box li img { width: 90%; box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08); } .books_main .slider_area .slide_box li span { font-size: 1.15rem; color: #3b63d8; margin: 5% 0; display: block; } .books_main .slider_area .slide_box li p { font-size: 1.35rem; line-height: 1.75rem; font-weight: 700; width: 80%;; } .books_main .slider_area .slide_box.non_slider { padding: 0 5%; width: 100%; display: flex; justify-content: center; } .books_main .slider_area .slide_box.non_slider li { width: 30%; float: left; list-style: none; position: relative; } .books_main .slider_area .slide_box.non_slider li a { width: 33vw; } .books_main .find_area { border-bottom: 1px solid #eee; padding-bottom: 5%; } .books_main .book_info_wrap { max-width: 650px; width: 90%; border: 1px solid #aaa; border-radius: 1.05rem; padding: 5%; position: relative; margin: 10% auto; } .books_main .book_info_wrap .subject { position: absolute; width: 30%; display: flex; justify-content: space-between; align-items: center; z-index: 9; top: -6%; left: -0.2%; padding: 3% 0; border-radius: 1.35rem 1.35rem 1.35rem 0; background: #00a9d9; } .books_main .book_info_wrap .subject span { font-size: 1.15rem; text-align: center; font-weight: 500; color: #fff; display: block; width: 50%; position: relative; padding: 0 3%; } .books_main .book_info_wrap .subject span:nth-of-type(1)::before { content: ''; display: block; position: absolute; width: 1px; height: 100%; right:0; background: #fff;; } .books_main .book_info_wrap .info_top { width: 90%; margin: 3% auto; display: flex; justify-content: space-between; align-items: start; gap: 2%; } .books_main .book_info_wrap .info_top .img_wrap { width: 40%;; } .books_main .book_info_wrap .info_top .img_wrap img { width: 100%; } .books_main .book_info_wrap .info_top .book_txt { width: 50%; } .books_main .book_info_wrap .info_top .book_txt h5 { font-size: 1.45rem; font-weight: 700; line-height: 2rem; margin-bottom: 5%; } .books_main .book_info_wrap .info_top .book_txt span { display: inline-block; padding-left: 1.75rem; margin-right: 5%; position: relative; font-size: 1.15rem; } .books_main .book_info_wrap .info_top .book_txt span::after { content: ''; display: block; position: absolute; top:0; left: 0; width: 1.35rem; height: 1.35rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon02.png') 0 0 no-repeat; background-size: 100%; } .books_main .book_info_wrap .info_top .book_txt span.instrctr::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon03.png') 0 0 no-repeat; background-size: 100%; } .books_main .book_info_wrap .info_top .book_txt p { font-size: 1.5rem; font-weight: 700; color: #e15353; margin-top: 6.2%; line-height: 1.85rem; } .books_main .book_info_wrap .info_top .book_txt p em { color: #888; text-decoration: line-through; display: inline-block; margin-left: 3%; font-weight: 400; font-size: 1.25rem; } .books_main .book_info_wrap>a { display: block; border: 1px solid #3b63d8; border-radius: 0.75rem; text-align: center; padding: 4% 0; font-size: 1.25rem; color: #3b63d8; } /* 교재상세정보 */ .book_info_wrap .book_tit { border-bottom: 8px solid #f0f0f0; } .book_info_wrap .book_tit .img_area { display: flex; justify-content: center; align-items: center; background: #f5f5f5; padding: 7% 5%; } .book_info_wrap .book_tit .img_area .img_wrap { width: 40%; box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.08); } .book_info_wrap .book_tit .img_area .img_wrap img { width: 100%; } .book_info_wrap .book_tit .txt_area { width: 90%; margin: 5% auto; } .book_info_wrap .book_tit .txt_area >span { display: inline-block; padding: 2% 3%; margin-right: 2%; font-size: 1rem; border-radius: 0.75rem; border:1px solid #666; color: #666; } .book_info_wrap .book_tit .txt_area >span:nth-of-type(1) { color: #3b63d8; border-color: #3b63d8; } .book_info_wrap .book_tit .txt_area>p { font-size: 1.55rem; font-weight: 700; line-height: 2rem; margin: 5% 0; } .book_info_wrap .book_tit .txt_area .detail_info { border-bottom: 1px solid #eee; padding-bottom: 5%; display: flex; justify-content: space-between; align-items: flex-start; gap: 1%; width: 100%; } .book_info_wrap .book_tit .txt_area .detail_info span { display: flex; justify-content: left; align-items:flex-start; position: relative; font-size: 1rem; flex-wrap: nowrap; width: 25%; gap: 2%; } .book_info_wrap .book_tit .txt_area .detail_info span:nth-of-type(1) { width: 50%; } .book_info_wrap .book_tit .txt_area .detail_info span em { display: block; font-size: 1rem; line-height: 1.55rem; font-weight: 400; color: #333; width: 100%; } .book_info_wrap .book_tit .txt_area .detail_info span:nth-of-type(1) em { width: 70%; } .book_info_wrap .book_tit .txt_area .detail_info span::before { content: ''; display: block; width: 1.5rem; height:1.5rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon02.png') 0 0 no-repeat; background-size: 100%; } .book_info_wrap .book_tit .txt_area .detail_info span:nth-of-type(1)::before { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon03.png') 0 0 no-repeat; background-size: 100%; } .book_info_wrap .book_tit .txt_area .detail_info span:nth-of-type(2)::before { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon04.png') 0 0 no-repeat; background-size: 100%; } .book_info_wrap .book_tit .txt_area .book_price_info { display: flex;; margin: 3% auto 5%; justify-content:space-between; align-items: center; } .book_info_wrap .book_tit .txt_area .book_price_info span { font-size: 1.15rem; } .book_info_wrap .book_tit .txt_area .book_price_info p { font-style: normal; font-weight: 500; font-size: 1.35rem; } .book_info_wrap .book_tit .txt_area .book_price_info p b { font-size: 1.45rem; font-weight:700; color:#e15353; } .book_info_wrap .buy_btn { display: block; width: 100%; font-size: 1.35rem; font-weight: 500; text-align: center; padding: 5.5% 0; color:#fff; background: #3b63d8; position: fixed; bottom: 0; left: 0; z-index: 9; } .book_info_wrap .book_info_list li,.book_info_wrap .video_area { border-bottom: 8px solid #f0f0f0; } .book_info_wrap .book_info_list li a,.book_info_wrap .video_area a { display: flex; justify-content: space-between; background: #f9f9f9; width: 100%; font-size: 1.45rem; font-weight: 700; padding: 3.5% 5%; } .book_info_wrap .video_area .slider_area { background: #fff; padding: 5%; width: 100%; overflow: scroll; } .book_info_wrap .video_area .slider_area ul { display: flex; justify-content: left; align-items: center; width: 200%; } .book_info_wrap .video_area .slider_area li { width: 25%; margin-right: 1.7%; height: 10rem; flex-shrink: 0; } .book_info_wrap .video_area .slider_area .video_wrap { position: relative; border-radius: 1rem; overflow: hidden; width: 100%; height: 100%; } .book_info_wrap .video_area .slider_area .video_wrap b { display: block; position: absolute; top:5%; left:5%; color:#fff; background: #000; z-index: 9; border-radius: 1rem 1rem 1rem 0; padding: 3% 5%; font-size: 1rem; } .book_info_wrap .video_area .slider_area .video_wrap span.play_w { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); display: block; width: 5rem; height: 5rem; } .book_info_wrap .video_area .slider_area .video_wrap .video_bg { position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); } .book_info_wrap .video_area .slider_area .video_wrap img { width: 100%; height: 100%; } .book_info_wrap .book_info_list li a span { display: inline-block; width: 1.55rem; height: 1.55rem; margin-left: auto; transition: all 0.5s; } .book_info_wrap .book_info_list li a.active span { transform: rotate(180deg); } .book_info_wrap .book_info_list li .detail_cont { display:none; background: #fff; color:#666; font-size: 1.15rem; line-height: 1.55rem; padding: 5%;; } .book_info_wrap .book_info_list li .detail_cont.active { display:block; } /* 후기 리스트 (메인)*/ .review_list_wrap .review_tit { background: #3b63d8 url('//cdn.edu2080.co.kr/gumjung/m/common/review_bg.png') 0 0 no-repeat; background-size: 100%; padding: 5%; } .review_list_wrap .review_tit span { background: #2b4db2; border-radius: 1.75rem; padding: 2.5% 5%; font-size: 1rem; color: #fff; text-align: center; display: block; width: 80%; margin: 2% auto; line-height: 1.45rem; } .review_list_wrap .review_tit img { width: 100%; margin: 2% auto; } .review_list_wrap .review_tit ul { border-radius: .75rem; background: rgba(255, 255, 255, 0.1); padding: 5%; width: 100%; margin: 0% auto; } .review_list_wrap .review_tit ul li { list-style: disc; width: 90%;; line-height: 1.45rem; font-size: 1rem; color: #fff; margin: 0 auto 3%; } .review_list_wrap .review_write_wrap { padding: 5%; border-bottom: 8px solid #f0f0f0; } .review_list_wrap .review_write_wrap p { color:#aaa; display: flex; justify-content: left; gap: 3%; align-items: start; font-size: 1.15rem; line-height: 1.85rem; margin: 0 auto 5%; } .review_list_wrap .review_write_wrap p span { display: block; width: 1.3rem; height: 1.3rem; position: relative; top: 0.2rem; } .review_list_wrap .review_write_wrap a { display: block; text-align: center; color: #3b63d8; background: #EFF3FC; font-size: 1.23rem; font-weight: 500; border-radius: 1rem; padding: 3.5% 0; } .review_list_wrap .review_tab { width: 90%; margin: 5% auto; } .review_list_wrap .select_wrap.default { width: 90%; margin: 3% auto 7%; } .review_list_wrap .select_wrap.default select { padding: 3% 5%; } .review_list_wrap .write_list { display: none; } .review_list_wrap .write_list.active { display: block; } .review_list_wrap table { table-layout:fixed; border-collapse:collapse; border-spacing:0; border-top: 2px solid #333; margin: 3% auto 5%; width: 90%; } .review_list_wrap table tr th { background: #f8f8f8; text-align: center; padding:5% 0; font-weight: 700; font-size: 1.15rem; } .review_list_wrap table tr td:nth-of-type(1) span { font-weight: 700; border: 1px solid #666; display: inline-block; padding: 3% 5%; border-radius: 0.55rem; } .review_list_wrap table tr td { padding: 3.5% 0; height: 40px; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 1.05rem; } .review_list_wrap table tr td:nth-of-type(2) { text-align: left; display: grid; } .review_list_wrap table tr td:nth-of-type(2) a { position: relative; display: block; width: 80%; } .review_list_wrap table tr td:nth-of-type(2) span { color: #3b63d8; font-size: 1.05rem; } .review_list_wrap table tr td:nth-of-type(2) p { font-size: 1.05rem; margin-top: 3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 75%; } .review_list_wrap table tr td:nth-of-type(2) b { position: absolute; top: 1rem; left: 90%; display: flex; gap: 2%; } .review_list_wrap table tr td:nth-of-type(2) span.hot,.review_list_wrap table tr td:nth-of-type(2) span.new { display: block; width: 1.25rem; height: 1.25rem; } .review_list_wrap table tr td:nth-of-type(2) span.hot { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/hot_r.png') 0 0 no-repeat; background-size: 100%; } .review_list_wrap table tr td:nth-of-type(2) span.new { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/new_b.png') 0 0 no-repeat; background-size: 100%; } .review_list_wrap table tr td.best span { font-weight: 700; } .review_list_wrap table tr td.best p { font-weight: 700; } .list_view { display: block; width: 100%; color: #3b63d8; background: #eff3fc; border-radius: 0.75rem; padding: 3.5% 0; text-align: center; font-size: 1.25rem; } .list_view.v2 { margin-top: 5%; } /* 후기 팝업 */ .review_pop { display: none; } .review_pop .pop_inner { height: 95%; } .review_pop.active { display: block; } .review_pop .close { right: 5%; top: 3%; } .review_pop dl dt { border-bottom: 1px solid #333; padding-bottom: 3%; } .review_pop dl dt p { font-size: 1.25rem; line-height: 2rem; font-weight: 700; width: 95%; display: block; word-wrap: break-word; } .review_pop dl dt p span { display: inline-block; border-radius: 0.5rem; padding: 0 3%; background: #eff3fc; color: #2b4db2; font-size: 1rem; margin-right: 3%; } .review_pop dl dd { margin: 5% auto; } .review_pop dl dd:nth-last-of-type(1) { margin: 5% auto 0; } .review_pop dl dd.img_wrap { width: 100%; border-radius: .75rem; overflow: hidden; } .review_pop dl dd.img_wrap img { width: 100%; } .review_pop dl dd ul { height: 45vh; overflow: scroll; } .review_pop dl dd ul::-webkit-scrollbar { width: 3px; } .review_pop dl dd ul::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2rem; } .review_pop dl dd ul::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .review_pop dl dd ul li { margin-bottom: 7%; } .review_pop dl dd ul li .answer_tit { font-size: 1.15rem; line-height: 1.75rem; width: 100%; font-weight: 700; color: #333; display: block; } .review_pop dl dd ul li .answer_tit span { color: #3b63d8; } .review_pop dl dd ul li .answer { font-size: 1.05rem; line-height: 1.75rem; font-weight: 500; margin-top: 5%; } /* 후기 작성하기 */ .review_write_wrap .write_info { color: #aaa; display: flex; justify-content: left; align-items: start; gap: 2%; font-size: 1.05rem; width: 90%; margin: 5% auto 0 } .review_write_wrap .write_info span { width: 1.25rem; height: 1.25rem; display: block; } .Author_info { padding: 5%; margin: 0 auto; border-bottom: 8px solid #f0f0f0; } .Author_info li { margin-bottom: 4%; } .Author_info .file_wrap p { font-size: 1.25rem; font-weight: 700; } .Author_info .file_wrap label { display: block; margin: 2.4% auto; width: 100%; font-size: 1.35rem; text-align: center; padding: 3.5% 0; background:#EFF3FC; color: #3b63d8; border-radius: .75rem; } .Author_info .file_wrap input { display: none; } .Author_info .file_wrap span { color: #ccc; font-size: 1.05rem; display: block; margin-bottom: 3%; } .Author_info .select_wrap { width: 100%; margin-top: 2.4%; } .Author_info .select_wrap select { padding: 3% 5%; } .review_write_wrap .write_area { padding: 5%; border-bottom: 8px solid #f0f0f0; } .review_write_wrap .write_area li { margin-bottom: 3.5%; } .review_write_wrap .write_area li textarea { margin: 5% auto 0; font-size: 1.05rem; color: #333; display: block; width: 100%; border: 1px solid #ccc; height: 15rem; overflow-y: scroll; border-radius: 1.05rem; padding: 3%; } .review_write_wrap .write_area li textarea::placeholder { color: #ccc; } .review_write_wrap .write_area li textarea::-webkit-scrollbar { width: 3px; } .review_write_wrap .write_area li textarea::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2rem; } .review_write_wrap .write_area li textarea::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .review_write_wrap .all_chk_wrap { padding: 3.5% 5%; background: #eff3fc; border-bottom: 2px solid #f0f0f0; } .review_write_wrap .all_chk_wrap >label { font-weight: 700; } .review_write_wrap .chk_list { width: 100%; margin: 0% auto; padding:0 5%; border-bottom: 8px solid #f0f0f0; } .review_write_wrap .chk_list li { padding: 3.5% 0; border-bottom: 1px solid #f0f0f0; } .review_write_wrap .chk_list li > input,.all_chk_wrap >input { display: none; } .review_write_wrap .chk_list li > label,.all_chk_wrap >label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.75rem; } .review_write_wrap .chk_list li > label::after,.all_chk_wrap >label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .review_write_wrap .chk_list li > input:checked + label::after,.all_chk_wrap >input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .review_write_wrap .chk_list li > label p { width: 80%; } .review_write_wrap .chk_list li > label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 1rem; } .review_write_wrap .chk_list li > label a { display: inline-block; width: 1.75rem; height: 1.75rem; position: absolute; right: 0; top: 0; } .review_write_wrap .chk_list li > label a.active { transform: scaleY(-1); } .review_write_wrap .btn_wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; } .review_write_wrap .btn_wrap a { display: block; color: #fff; width: 35%; background: #333; padding: 5% 0; text-align: center; font-weight: 600; font-size: 1.25rem; } .review_write_wrap .btn_wrap a:nth-of-type(2) { background: #2b4db2; width: 65%; } /* myclass-강좌관리 */ .myclass_list_wrap { padding: 5%; } .myclass_list_wrap .my_class_notice { width: 100%; margin: 0 auto 5%; background: #f8faff; border: 1px solid #dee5f8; padding: 5%; border-radius: 0.75rem; } .myclass_list_wrap .my_class_notice li { padding-left: 1rem; position: relative; margin-bottom: 3%; color: #5367a4; font-size: 1.15rem; line-height: 1.5rem; } .myclass_list_wrap .my_class_notice li span { color: #e15353; } .myclass_list_wrap .my_class_notice li::after { content: ''; display: block; background: #5367a4; width: 3px; height: 3px; border-radius: 50%; top:20%; left: 0; position: absolute; } .myclass_list_wrap .select_wrap { width: 100%; margin: 5% auto; } .myclass_list_wrap .select_wrap select { padding: 3.5% 5%; } .myclass_list_wrap .class_list_con { display: none; } .myclass_list_wrap .class_list_con.active { display: block; } .myclass_list_wrap .class_list_con > li { border-radius: 0.75rem; border:1px solid #aaa; padding: 5%; margin-bottom: 5%; width: 100%; } .myclass_list_wrap .class_list_con li .lect_info_wrap { width: 96%; margin: 0 auto 5%; } .myclass_list_wrap .class_list_con li .lect_info_wrap > span { display: inline-block; background: #fff; border: 1px solid #666; color: #666; padding:2%; font-size: 1.05rem; border-radius: 0.55rem; margin-right: 2%; } .myclass_list_wrap .class_list_con li .lect_info_wrap > span.state { border-color: #3b63d8; color: #3b63d8; } .myclass_list_wrap .class_list_con li .lect_info_wrap > span.state.v2 { background: #7591E3; color: #fff; } .myclass_list_wrap .class_list_con li .lect_info_wrap p.tit { font-size: 1.45rem; font-weight: 700; margin: 5% 0; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul { margin: 3% auto; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul li { display: flex; align-items: center; justify-content: left; gap: 2%; font-size: 1.05rem; margin-bottom: 3%; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul li:nth-last-of-type(1) { margin-bottom: 0; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul li b { color: #e15353; font-weight: 500; font-size: 0.9rem; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul li span { display: block; width: 1.15rem; height: 1.15rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon01.png') 0 0 no-repeat; background-size: 100%; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul li:nth-of-type(2) span { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon02.png') 0 0 no-repeat; background-size: 100%; } .myclass_list_wrap .class_list_con li .lect_info_wrap ul li:nth-of-type(3) span { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/level_icon.png') 0 0 no-repeat; background-size: 100%; } .myclass_list_wrap .class_list_con li > a { display: block; width: 100%; border: 1px solid #3b63d8; color: #3b63d8; background: #fff; border-radius: 0.75rem; padding: 3.5% 0; text-align: center; font-size: 1.25rem; } .myclass_list_wrap .class_list_con li > a.start { background: #eff3fc; border-color: #eff3fc; } .myclass_list_wrap a.more_btn { width: 100%; } /* 진도율 공통 css */ .progress_bar { width: 100%; position: relative; height: 0.6rem; background: #f5f5f5; border-radius: 1.25rem; margin: 5% auto 8%; } .progress_bar span { display: block; height: 0.6rem; position: relative; left: 0; top:0; border-radius: 1.25rem; background: linear-gradient(to right, #779bff, #6865ff) } /* 패기지강의 목록보기 팝업 */ .package_list_pop, .done_list_pop { display: none; } .package_list_pop.active,.done_list_pop.active { display: block; } .package_list_pop .package_tit, .done_list_pop .package_tit { font-size: 1.45rem; font-weight: 700; padding-bottom: 5%; border-bottom: 1px solid #333;; } .package_list_pop .close, .done_list_pop .close { right: 5%; top: 6vw; } .package_list_pop > .pop_inner > ul,.done_list_pop > .pop_inner > ul { height: 73vh; overflow-y: scroll; margin:5% auto; } .package_list_pop > .pop_inner > ul > li,.done_list_pop > .pop_inner > ul > li { border-radius: 1rem; border:1px solid #aaa; padding: 5%; margin-bottom: 5%; width: 100%; } .package_list_pop > .pop_inner > ul > li > span, .done_list_pop > .pop_inner > ul >li > span { display: inline-block; background: #fff; border: 1px solid #666; color: #666; padding:1% 2%; font-size: 1rem; border-radius: 0.55rem; margin-right: 2%; } .package_list_pop > .pop_inner > ul > li > span.state, .done_list_pop > .pop_inner > ul >li > span.state { border-color: #3b63d8; color: #3b63d8; } .package_list_pop ul li p.tit, .done_list_pop ul li p.tit { font-size: 1.45rem; font-weight: 700; margin: 5% 0; } .package_list_pop ul li ul, .done_list_pop ul li ul { margin: 3% auto; } .package_list_pop ul li ul li, .done_list_pop ul li ul li { display: flex; align-items: center; justify-content: left; gap: 2%; font-size: 1.05rem; margin-bottom: 3%; } .package_list_pop ul li ul li em, .done_list_pop ul li ul li em { color: #ccc; } .package_list_pop ul li ul li strong, .done_list_pop ul li ul li strong { color: #3b63d8; font-weight: 500; } .package_list_pop ul li ul li span, .done_list_pop ul li ul li span { content: ''; display: block; width: 1.15rem; height: 1.15rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon01.png') 0 0 no-repeat; background-size: 100%; } .package_list_pop ul li ul li:nth-of-type(2) span, .done_list_pop ul li ul li:nth-of-type(2) span { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/lect_icon02.png') 0 0 no-repeat; background-size: 100%; } .package_list_pop ul li ul li:nth-of-type(3) span, .done_list_pop ul li ul li:nth-of-type(3) span { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/level_icon.png') 0 0 no-repeat; background-size: 100%; } .package_list_pop ul li > a, .done_list_pop ul li > a { display: block; width: 100%; color: #3b63d8; background: #eff3fc; border-radius: 0.75rem; padding: 3.5% 0; text-align: center; font-size: 1.25rem; } .done_list_pop ul li > a.survey_form_btn { margin-bottom: 3%; } /* 만족도 조사 폼 팝업 */ .survey_pop { display: none; } .survey_pop.active { display: block; } .survey_pop .pop_inner { padding: 7% 0 0; } .survey_pop .tit_wrap { width: 90%; margin: 0 auto; } .survey_pop .survey_info { position: relative; padding:3% 5%; border-bottom: 8px solid #f0f0f0; width: 100%;; } .survey_pop .survey_info::after { content: ''; position: absolute; left: 0; top:0; width: 100%; height: 100%; opacity: .3; background: url('//cdn.edu2080.co.kr/gumjung/m/common/review_bg.png')0 0 no-repeat; background-size: 100%;; } .survey_pop .survey_info p { text-align: center; line-height: 1.5rem; font-weight: 700; margin-bottom: 3%; font-size: 1.25rem; } .survey_pop .survey_info p:nth-of-type(1) { font-size: 1.75rem; color: #3b63d8; line-height: 2.25rem; } .survey_pop .survey_info p:nth-of-type(2) { font-weight: 500; } .survey_pop .survey_info p:nth-of-type(3) { color: #333; } .survey_pop form ul { padding: 0 5%; height: 50vh; overflow-y: scroll; } .survey_pop form ul li { border-bottom: 1px solid #f0f0f0; padding: 5% 0; } .survey_pop form ul li p { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; margin-bottom: 5%; width: 100%; } .survey_pop form ul li input[type="radio"] { display: none; } .survey_pop form ul li label { display: inline-block; font-size: 1.15rem; color: #666; padding-left: 1.75rem; width: 30%; position: relative; } .survey_pop form ul li label:nth-of-type(1), .survey_pop form ul li label:nth-of-type(2), .survey_pop form ul li label:nth-of-type(3) { margin-bottom: 5%; } .survey_pop form ul li label::after,.survey_pop form ul li label::before { content: ''; display: block; position: absolute; left: 0; top:50%; transform: translateY(-50%); } .survey_pop form ul li label::after { width: 1.35rem; height: 1.35rem; border:1px solid #666; border-radius: 50%;; } .survey_pop form ul li label::before { width: 0.95rem; height: 0.95rem; background: #3b63d8; border-radius: 50%; left: 2.8%; opacity: 0; } .survey_pop form ul li input[type="radio"]:checked +label { color: #3b63d8; } .survey_pop form ul li input[type="radio"]:checked +label::after { border-color: #3b63d8; } .survey_pop form ul li input[type="radio"]:checked +label::before { opacity: 1; } /* 강의실 */ .classRoom_wrap .sub_tit { width: 100%; background: #7591e3; color: #fff; text-align: center; padding: 3.5% 0; font-size: 1.45rem; font-weight: 500; } .classRoom_wrap .class_top { background:#fafafa; padding: 5%; } .classRoom_wrap .class_top h5 { font-size: 1.55rem; font-weight: 700; text-align: center; margin-bottom: 6%; } .classRoom_wrap .class_top .info_wrap { display: flex; justify-content: space-between; align-items: center; width: 100%;; } .classRoom_wrap .class_top .info_wrap dl { background: #fff; border: 1px solid #3b63d8; border-radius: 1rem; padding: 5%; box-shadow: 0 6px 20px 0 rgba(117, 145, 227, 0.16); width: 33%; } .classRoom_wrap .class_top .info_wrap dl:nth-of-type(2) { width: 62%; } .classRoom_wrap .class_top .info_wrap dl dt { color: #3b63d8; font-size: 1.15rem;; } .classRoom_wrap .class_top .info_wrap dl dd { color: #333; font-size: 1rem; } .classRoom_wrap .class_top .info_wrap dl:nth-of-type(2) dd { font-size: .9rem; } .classRoom_wrap .class_top .info_wrap dl dd:nth-of-type(1) { display: block; margin: 1rem 0 .75rem; font-size: 1.55rem; color: #3b63d8; font-weight: 700; } .classRoom_wrap .class_menu { display: flex; justify-content: space-between; align-items: center; padding: 3% 5% 5%; border-bottom: 8px solid #f0f0f0; } .classRoom_wrap .class_menu li { width: 23%; } .classRoom_wrap .class_menu li a { display: block; width: 100%; } .classRoom_wrap .class_menu li a .icon_wrap { width: 55%; display: block; margin: 0 auto 3%; } .classRoom_wrap .class_menu li a .icon_wrap img { width: 100%; } .classRoom_wrap .class_menu li a p { font-size: 1.15rem; line-height: 1.55rem; text-align: center; font-weight: 600; } .classRoom_wrap .class_list_area { padding: 5%; } .classRoom_wrap .class_list_area > p.tit { font-size: 1.5rem; font-weight: 700; margin-bottom: 5%; } .classRoom_wrap .class_list_area ul li { width: 100%; padding: 5%; margin-bottom: 5%; border-radius: .75rem; border:1px solid #aaa; } .classRoom_wrap .class_list_area ul li > span { border: 1px solid #9F9F9F; display: inline-block; margin-right: 2%; border-radius: .55rem; text-align: center; padding: 1% 3%; } .classRoom_wrap .class_list_area ul li > span.state { padding: 1% 2%; } .classRoom_wrap .class_list_area ul li > span.state.v2 { border-color: #3b63d8; color: #3b63d8; } .classRoom_wrap .class_list_area ul li > span.state.v3 { background:#7591e3; color: #fff; border-color: #7591E3; } .classRoom_wrap .class_list_area ul li > p { font-size: 1.25rem; margin: 3% 0; font-weight: 700; } .classRoom_wrap .class_list_area ul li .time_info { margin-bottom: 3%; display: flex; justify-content: left; align-items: center; } .classRoom_wrap .class_list_area ul li .time_info .time_icon { margin-right: 3%; width: 1.25rem; height: 1.25rem; display: block;; } .classRoom_wrap .class_list_area ul li .time_info p { font-size: 1rem; } .classRoom_wrap .class_list_area ul li .time_info p span.watch { color: #7591e3; } .classRoom_wrap .class_list_area ul li > a { display: block; border-radius: .75rem; background: #EFF3FC; color:#3b63d8; text-align: center; width: 100%; padding: 3.5% 0;; } /* 강의실 - 자료 다운로드 팝업 */ .download_pop { display: none; } .download_pop.active { display: block; } .download_pop .download_tab { margin-top: 5%; } .download_pop .download_cont { display: none; width: 100%; margin: 5% auto 15%; height: 50vh; overflow-y: scroll; } .download_pop .download_cont.active { display: block; } .download_pop .download_cont table { width: 100%; margin: 5% auto; border-top: 2px solid #f0f0f0; table-layout:fixed; border-collapse:collapse; border-spacing:0; } .download_pop .download_cont table tr th { background:#f9f9f9; font-weight: 700; font-size: 1.15rem; text-align: center; padding: 3% 0; } .download_pop .download_cont table tr td { text-align: center; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 1% 0 3%; font-size: 1.15rem; } .download_pop .download_cont table tr.active td { background: #F3F6FD; } .download_pop .download_cont table tr td input { display: none; } .download_pop .download_cont table tr td input.nomal + label { margin-top: 0; padding: 0; } .download_pop .download_cont table tr td input.nomal + label::after { width: 1.5rem; height: 1.5rem; top: 0.3rem; left: 50%; position: relative; transform: translateX(-50%); } .download_pop .download_cont .btn_wrap { position: fixed; left: 0; bottom: 0; } /* myclass-학습질문 */ .qna_list_wrap { padding: 5%; } .qna_list_wrap .select_wrap { width: 100%; margin:5% 0; } .qna_list_wrap .select_wrap select { padding: 3.5% 5% } .qna_list_wrap .ask_cont { display: none; } .qna_list_wrap .ask_cont.active { display: block; } .qna_list_wrap .ask_cont li { padding: 5%; margin: 5% auto; border-radius: 0.75rem; border: 1px solid #aaa; } .qna_list_wrap .ask_cont li >a { display: block; width: 100%; } .qna_list_wrap .ask_cont li a > .info_top { display: flex; justify-content: left; align-items: center; gap: 2%; } .qna_list_wrap .ask_cont li a > .info_top span { display: block; padding: 1% 2%; border-radius: .55rem; color: #aaa; border:1px solid #aaa; } .qna_list_wrap .ask_cont li a > .info_top span.state { color:#3b63d8; border-color: #3b63d8; } .qna_list_wrap .ask_cont li a > p.ask_tit { font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; margin: 3% auto;; } .qna_list_wrap .ask_cont li a > p:nth-of-type(2) { font-size: 1.1rem; margin-bottom: 3%; } .qna_list_wrap .ask_cont li a > .author { margin-bottom: 5%; } .qna_list_wrap .ask_cont li a > .author span { color: #aaa; font-size: 1.05rem; display: inline-block; margin-right: 5%; } .qna_list_wrap .ask_cont li a > .author span:nth-of-type(1) { border-right: 1px solid #aaa } .qna_list_wrap .ask_cont li .del_btn { display: block; width: 100%; padding: 3.5% 0; font-weight: 600; border-radius: .55rem; text-align: center; color: #3b63d8; background: #eff3fc; font-size: 1.15rem; } .qna_list_wrap .write_btn { display: block; position: fixed; bottom: 0; left: 0; text-align: center; background: #3b63d8; width: 100%; color: #fff; font-size: 1.35rem; font-weight: 700; padding: 5% 0; } /* 작성된 학습질문 보기 팝업 */ .qna_view_pop { display: none; } .qna_view_pop.active { display: block; } .qna_view_pop .pop_inner { height: 90vh; overflow-y: scroll; padding: 0; } .qna_view_pop .close { right: 5%; top: 2%; } .qna_view_pop table { table-layout:fixed; border-collapse:collapse; border-spacing:0; width: 90%; border-top: 2px solid #333; margin: 13% auto 5% } .qna_view_pop table tr { border-bottom: 1px solid #eee; } .qna_view_pop table tr th { font-size: 1.25rem; padding: 5% 0; font-weight: 700; text-align: left; color: #333; display: block; } .qna_view_pop table tr th span { color: #3b63d8; } .qna_view_pop table tr td { text-align: left; font-size: 1.25rem; padding: 5% 0; line-height: 2rem; } .qna_view_pop table tr td.file p { display: flex; align-items: center; justify-content: left; gap: 3%; } .qna_view_pop table tr td span { width: 1.35rem; height: 1.35rem; display: inline-block; } .qna_view_pop table tr td a { display: inline-block; color: #3b63d8; text-decoration: underline; } .qna_view_pop table tr td.tit { font-weight: 700; } .qna_view_pop table tr:nth-last-of-type(1) { border-bottom: none; } .qna_view_pop .answer { background: #EFF3FC; width: 100%; padding: 5%; } .qna_view_pop .answer .answer_tit { padding-bottom: 3%; border-bottom: 1px solid #b4c0e2; margin-bottom: 3%; display: flex; align-items: center; gap: 3%; font-weight: 700; font-size: 1.25rem; } .qna_view_pop .answer .answer_tit span { display: block; padding: 1% 2%; color: #3b63d8; background: #fff; border: 1px solid #3b63d8; border-radius: 0.55rem; } .qna_view_pop .answer .file { display: flex; justify-content: left; align-items: center; gap: 3%; } .qna_view_pop .answer .file span { display: block; width: 1.35rem; height: 1.35rem; } .qna_view_pop .answer .file a { display: inline-block; color: #3b63d8; text-decoration: underline; font-size: 1.15rem; margin-bottom: 3%; } .qna_view_pop .answer p:nth-last-of-type(1) { font-size: 1.15rem; line-height: 2rem; } /* 학습질문 작성하기 */ .qna_write_wrap .Author_info { border-bottom: 8px solid #f0f0f0; } .qna_write_wrap .Author_info textarea { margin: 5% auto 0; font-size: 1.25rem; color: #333; display: block; width: 100%; border: 1px solid #ccc; height: 15rem; overflow-y: scroll; border-radius: 1.05rem; padding: 3%; } .qna_write_wrap .Author_info textarea::placeholder { color: #ccc; } .qna_write_wrap .Author_info textarea { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(0,0,0,0.35) rgba(0,0,0,0.0); /* Firefox */ } .qna_write_wrap .Author_info textarea::-webkit-scrollbar { width: 5px; } .qna_write_wrap .Author_info textarea::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: 1rem; } .qna_write_wrap .Author_info textarea::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .qna_write_wrap .btn_wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; } .qna_write_wrap .btn_wrap a { display: block; color: #fff; width: 35%; background: #333; padding: 5% 0; text-align: center; font-weight: 600; font-size: 1.25rem; } .qna_write_wrap .btn_wrap a:nth-of-type(2) { background: #2b4db2; width: 65%; } /* 장바구니 */ .cart_wrap .cart_top { border-bottom: 8px solid #f0f0f0; padding: 5%; } .cart_wrap .cart_top p.info { color:#aaa; font-size: 1.15rem;; display: flex; align-items: start; justify-content: left; gap: 2%; } .cart_wrap .cart_top p.info span { display: block; width: 1.2rem; height: 1.2rem; } .cart_wrap .cart_top dl { display: flex; align-items: center; justify-content: space-between; gap: 2%; margin: 3.7% auto 0; } .cart_wrap .cart_top dt { width: 60%; display: flex; align-items: normal; justify-content: left; } .cart_wrap .cart_top dt input { display: none; } .cart_wrap .cart_top dt input[type="checkbox"].nomal + label { margin-top: 0; } .cart_wrap .cart_top dt p { width: 100%; font-size: 1.25rem; } .cart_wrap .cart_top dt p span { font-weight: 700; } .cart_wrap .cart_top dt p span b { color: #3b63d8 } .cart_wrap .cart_top dd { width: 26%; } .cart_wrap .cart_top dd a { display: flex; width: 100%; border: 1px solid #aaa; border-radius: 0.75rem; text-align: center; font-size: 1.15rem; font-weight: 600; padding: 7%; justify-content: center; align-items: center; gap: 2%; } .cart_wrap .cart_top dd a span { display: block; width: 1.4rem; height: 1.4rem; } .cart_wrap .cart_list li { position: relative; width: 100%; padding: 3% 13%; border-bottom: 1px solid #ccc; } .cart_wrap .cart_list li .cart_item_top .close { right: 5%; top:15%; } .cart_wrap .cart_list li .cart_item_top input[type="checkbox"].nomal + label { position: absolute; left: 5%; top: 15%; margin-top: 0; } .cart_wrap .cart_list li .cart_item_top > span { display: inline-block; font-size: 1rem; padding: 1% 2.5%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 0.6rem; margin: 6.9% 0% 3.1% 0.8%; } .cart_wrap .cart_list li .cart_item_top > span:nth-of-type(2) { color:#666; border-color: #aaa; } .cart_wrap .cart_list li .cart_item_top p:nth-of-type(1) { font-size: 1.35rem; font-weight: 700; margin-bottom: 2.5%; line-height: 1.75rem; } .cart_wrap .cart_list li .cart_item_top p:nth-of-type(2) { font-size: 1.1rem; border-bottom: 1px solid #f0f0f0; font-weight: 500; padding-bottom: 2.5%; } .cart_wrap .cart_list li .cart_item_top p:nth-of-type(2) span { display:inline-block; width: 1.15rem; height: 1.15rem; margin-right: 2%; } .cart_wrap .cart_list li .price_info p { display: flex; justify-content: space-between; font-size: 1.2rem; margin: 5% 0; } .cart_wrap .cart_list li .price_info p:nth-of-type(2) span:nth-of-type(2) { font-weight: 700; } .cart_wrap .cart_list li .price_info p:nth-of-type(2) span:nth-of-type(2) b { font-size: 1.55rem; } .cart_wrap .total_area { padding: 5%; background:#f8faff; border-top: 8px solid #f0f0f0; border-bottom: 8px solid #f0f0f0; } .cart_wrap .total_area ul { border-bottom: 1px solid #aaa; margin-bottom: 5%; } .cart_wrap .total_area li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3%; } .cart_wrap .total_area li span:nth-of-type(1) { font-size: 1.15rem; font-weight: 500; } .cart_wrap .total_area li span:nth-of-type(2) { font-size: 1.15rem; font-weight: 700; width: 50%; text-align: end; } .cart_wrap .total_price { display: flex; align-items: center; justify-content: space-between; } .cart_wrap .total_price p { font-size: 1.35rem; font-weight: 700; } .cart_wrap .total_price p:nth-of-type(2) { color: #e15353; font-size: 1.45rem; width: 50%; text-align: end; } .cart_wrap .total_price p span { font-weight: 700; font-size: 1.85rem; display: inline-block; margin-right: 2%; color: #e15353; } .cart_wrap .pay_btn { display: block; width: 100%; padding: 5% 0; text-align: center; font-size: 1.35rem; background: #3b63d8; color: #fff; font-weight: 600; } .cart_wrap .pay_btn span { color: #fff; font-size: 1.35rem; font-weight: 700; } .cart_wrap .add_btn { display: block; width: 43%; margin: -8% auto 4%; padding: 2.8% 0; text-align: center; font-size: 1.15rem; background: #fff; color: #3b63d8; border-radius: 0.75rem; border: 1px solid #3b63d8; font-weight: 600; } /* 주문결제/ 주문완료 */ .order_wrap .info_wrap { padding: 5%; border-bottom: 8px solid #f0f0f0; } .order_wrap .info { color:#aaa; font-size: 1.15rem;; line-height: 1.75rem; display: flex; align-items: start; justify-content: left; gap: 2%; } .order_wrap .info span { display: block; width: 1.6rem; height: 1.6rem; transform: translateY(20%); } .order_wrap .order_cut { background: #fafafa; padding: 5%; display: flex; align-items: end; justify-content: left; gap: 4%; } .order_wrap .order_cut p { font-size: 1.65rem; font-weight: 700; color: #333; } .order_wrap .order_cut span { font-size: 1.25rem; font-weight: 600; color: #3b63d8; } /* .order_wrap .order_list { height: 50vh; overflow-y: scroll; } */ .order_wrap .order_list > li { padding: 2.5% 5%; border-bottom: 8px solid #f0f0f0; } .order_wrap .order_list li .order_item_top { position: relative; } .order_wrap .order_list li .order_item_top > span { display: inline-block; font-size: 1rem; padding: 1% 2.5%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 0.6rem; margin: 3% 0% 5% 0; } .order_wrap .order_list li .order_item_top .arrow_x { display: block; transition: all 0.3s; transform: rotate(360deg); width: 2.3rem; height: 2.3rem; position: absolute; right: 0; top: 5%; } .order_wrap .order_list li .order_item_top .arrow_x.active { transform: rotate(180deg); } .order_wrap .order_list li .order_item_top > span:nth-of-type(2) { color:#666; border-color: #aaa; } .order_wrap .order_list li .order_item_top p:nth-of-type(1) { font-size: 1.35rem; font-weight: 700; margin-bottom: 2.5%; line-height: 1.75rem; } .order_wrap .order_list li .order_item_top p:nth-of-type(2) { font-size: 1.1rem; border-bottom: 1px solid #f0f0f0; font-weight: 500; padding-bottom: 2.5%; } .order_wrap .order_list li .order_item_top p:nth-of-type(2) span { display:inline-block; width: 1.15rem; height: 1.15rem; margin-right: 2%; } .order_wrap .order_list li .order_item_middle { padding: 5% 0; display: none; } .order_wrap .order_list li .order_item_middle.active { display: block; } .order_wrap .order_list li .order_item_middle p { display: flex; align-items: center; justify-content: space-between; margin: 5% 0; } .order_wrap .order_list li .order_item_middle p span:nth-of-type(1) { font-size: 1.25rem; font-weight: 500; } .order_wrap .order_list li .order_item_middle p span:nth-of-type(2) { font-size: 1.25rem; font-weight: 700; } .order_wrap .order_list li .order_item_middle ul { border-bottom: 1px solid #f0f0f0; } .order_wrap .order_list li .order_item_middle ul li .input_wrap { margin-bottom: 3.5%; display: flex; align-items: center; justify-content: left; gap: 2%; } .order_wrap .order_list li .order_item_middle ul li .input_wrap input { width: 68%; padding: 3% 5%; margin-top: 0; } .order_wrap .order_list li .order_item_middle ul li .input_wrap a { display: block; width: 30%; padding: 4% 0; text-align: center; font-size: 1.25rem; font-weight: 500; color: #3b63d8; background: #EFF3FC; border-radius: 0.75rem; } .order_wrap .order_list li .order_item_middle ul li > p { display: flex; align-items: center; justify-content: left; gap: 2%; } .order_wrap .order_list li .order_item_middle ul li > p span { font-size: 1.15rem; font-weight: 500; } .order_wrap .order_list li .order_item_middle ul li > p span:nth-of-type(2) { font-size: 1.2rem; font-weight: 700; color: #3b63d8; } .order_wrap .order_list li .order_item_bottom { padding: 0; } .order_wrap .order_list li .order_item_bottom p { display: flex; align-items: center; justify-content: space-between; margin: 5% 0; } .order_wrap .order_list li .order_item_bottom p span:nth-of-type(1) { font-size: 1.25rem; font-weight: 500; } .order_wrap .order_list li .order_item_bottom p span:nth-of-type(2) { font-size: 1.25rem; font-weight: 700; } .order_wrap .order_list li .order_item_bottom p.price span:nth-of-type(1) { font-size: 1.35rem; font-weight: 700; } .order_wrap .order_list li .order_item_bottom p.price span:nth-of-type(2) { font-size: 1.35rem; font-weight: 700; } .order_wrap .order_list li .order_item_bottom p.price span.total_price { font-size: 1.65rem; font-weight: 700; } .order_wrap .order_list li .order_item_bottom span.point_use { font-size: 1.65rem; font-weight: 700; } .order_wrap .order_address { border-bottom: 8px solid #f0f0f0; } .order_wrap .order_address .title { font-size: 1.65rem; font-weight: 700; color: #333; background: #fafafa; padding: 5%; } .order_wrap .order_address .default_tab { width: 90%; margin: 5% auto; } .order_wrap .order_address .address_cont { padding: 5%; } .order_wrap .order_address .address_cont li { margin-bottom: 5%; } .order_wrap .order_address .address_cont .zip_code { display: flex; align-items: center; justify-content: left; gap: 2%; } .order_wrap .order_address .address_cont .zip_code input { width: 68%; background: #fff; } .order_wrap .order_address .address_cont .zip_code a { display: block; margin-top: 2.4%; background: #eff3fc; color: #3b63d8; padding: 5.7% 0; font-size: 1.25rem; width: 30%; line-height: 0; text-align: center; font-weight: 700; border-radius: 0.6rem; } .order_wrap .order_address .address_cont .save_address p { font-size: 1.25rem; padding-left: 8%; margin-bottom: 8%; transform: translateY(0.4rem); z-index: -1; position: relative } .order_wrap .order_total { padding: 5%; background: #f8faff; border-bottom: 8px solid #f0f0f0; } .order_wrap .order_total ul { border-bottom: 1px solid #aaa; } .order_wrap .order_total ul li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3%; } .order_wrap .order_total ul li span { font-size: 1.15rem; font-weight: 400; } .order_wrap .order_total ul li span:nth-of-type(2) { font-size: 1.15rem; font-weight: 700; } .order_wrap .order_total p.total_price { display: flex; align-items: center; justify-content: space-between; margin: 5% 0 0; } .order_wrap .order_total p.total_price span:nth-of-type(1) { color: #333; font-size: 1.55rem; font-weight: 700; } .order_wrap .order_total p.total_price span:nth-of-type(2) { color: #e15353; font-size: 1.55rem; font-weight: 700; } .order_wrap .order_total p.total_price span:nth-of-type(2) b { color: #e15353; font-size: 1.95rem; font-weight: 700; } .order_wrap .payment .title { font-size: 1.65rem; font-weight: 700; color: #333; background: #fafafa; padding: 5%; } .order_wrap .payment .payment_list { display: flex; align-items: center; justify-content: space-between; padding: 5%; flex-wrap: wrap; } .order_wrap .payment .payment_list li { width: 31.33%; } .order_wrap .payment .payment_list li.gift_voucher_wrap { width: 100%; } .order_wrap .payment .payment_list li input { display: none; } .order_wrap .payment .payment_list li label { display: block; width: 100%; padding: 6% 0; border: 1px solid #ccc; border-radius: 0.75rem; } .order_wrap .payment .payment_list li.active label { border-color: #3b63d8; } .order_wrap .payment .payment_list li label span.icon_wrap { display: block; width: 5.2rem; height: 4rem; margin: 0 auto; } .order_wrap .payment .payment_list li:nth-of-type(1) label span.icon_wrap { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/card_g.png') no-repeat center center / 100%; } .order_wrap .payment .payment_list li:nth-of-type(2) label span.icon_wrap { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/cash_g.png') no-repeat center center / 100%; } .order_wrap .payment .payment_list li:nth-of-type(3) label span.icon_wrap { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/voucher_g.png') no-repeat center center / 100%; } .order_wrap .payment .payment_list li:nth-of-type(1).active label span.icon_wrap { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/card_b.png') no-repeat center center / 100%; } .order_wrap .payment .payment_list li:nth-of-type(2).active label span.icon_wrap { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/cash_b.png') no-repeat center center / 100%; } .order_wrap .payment .payment_list li:nth-of-type(3).active label span.icon_wrap { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/voucher_b.png') no-repeat center center / 100%; } .order_wrap .payment .payment_list li label p { margin-top: 2%; line-height: 1.75rem; font-weight: 500; text-align: center; font-size: 1.2rem; font-weight: 500; color: #666; } .order_wrap .payment .payment_list li.active label p { color: #3b63d8; } .order_wrap .payment .gift_voucher { margin: 5% 0 -5%; } .order_wrap .payment .gift_voucher dt { font-size: 4.5vw; font-weight: 700; margin-bottom: 3%; padding-bottom: 2%; border-bottom: 1px solid #999; } .order_wrap .payment .gift_voucher dd { display: flex; align-items: center; justify-content: left; } .order_wrap .payment .gift_voucher dd input { display: block; width: 18px; height: 18px; } .order_wrap .payment .gift_voucher dd label { font-size: 4vw; font-weight: 500; margin-left: 2%; padding: 0; border: none; } .order_wrap .payment .payment_info { margin: 5% auto; } .order_wrap .payment .payment_info li { display: none; background: #f9f9f9; padding: 5%; border-radius: 0.75rem; width: 90%; margin: 3% auto 7%; } .order_wrap .payment .payment_info li.active { display: block; } .order_wrap .payment .payment_info li p { font-size: 1rem; margin-bottom: 3%; position: relative; padding-left: 1.25rem; font-weight: 500; color: #888; line-height: 1.75rem; } .order_wrap .payment .payment_info li p::after { content:''; display: block; position: absolute; left: 0; top:15%; border-radius: 50%; width: 3px; height: 3px; background: #888; } .order_wrap .agree_wrap .all_chk_wrap { padding: 5%; background: #f8faff; border-top: 8px solid #f0f0f0; } .order_wrap .agree_wrap .all_chk_wrap label { font-size: 1.25rem; font-weight: 700; } .order_wrap .agree_wrap .chk_list { padding: 2% 5% 0; border-bottom: 8px solid #f0f0f0; } .order_wrap .agree_wrap .chk_list li { padding: 3% 0; border-bottom: 1px solid #ddd; margin-bottom: 2%; } .order_wrap .agree_wrap .chk_list li:nth-last-of-type(1) { border-bottom: none; } .order_wrap .agree_wrap .chk_list li > input { display: none; } .order_wrap .agree_wrap .chk_list li > label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.75rem; } .order_wrap .agree_wrap .chk_list li > label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .order_wrap .agree_wrap .chk_list li > input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .order_wrap .agree_wrap .chk_list li > label p { width: 80%; } .order_wrap .agree_wrap .chk_list li > label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 1rem; } .order_wrap .agree_wrap .chk_list li > label span.gray { border-color: #888; color: #888; } .order_wrap .agree_wrap .chk_list li > label a { display: inline-block; width: 2rem; height: 2rem; position: absolute; right: 0; top: 0; } .order_wrap .agree_wrap .chk_list li > label a.active { transform: scaleY(-1); } /* 주문완료 추가 */ .order_result_wrap .result_wrap { padding: 5%; } .order_result_wrap .result_wrap .top_area { width: 80%; margin: 5% auto; } .order_result_wrap .result_wrap .top_area .icon_wrap { display: block; width: 4.4rem; height: 4.6rem; margin: 0 auto; } .order_result_wrap .result_wrap .top_area p { font-size: 1.65rem; font-weight: 700; color: #333; text-align: center; line-height: 2.15rem; margin-top: 5%; } .order_result_wrap .result_wrap ul { background: #F3F6FF; border-radius: 0.75rem; padding: 7%; } .order_result_wrap .result_wrap ul li { display: flex; align-items: center; justify-content: left; gap: 5%; margin-bottom: 5%; } .order_result_wrap .result_wrap ul li.bank_info { font-size: 1.05rem; font-weight: 500; color: #3b63d8; margin-bottom: 0; line-height: 1.55rem; border-top: 1px solid #ddd; padding-top: 3%; } .order_result_wrap .result_wrap ul li span:nth-of-type(1) { font-size: 1.25rem; font-weight: 700; color: #333; display: block; width: 30%; } .order_result_wrap .result_wrap ul li span:nth-of-type(2) { font-size: 1.25rem; font-weight: 500; color: #333; } .order_result_wrap .result_wrap .notice { font-size: 1.15rem; background: #f9f9f9; padding: 5%; font-weight: 500; color: #888; line-height: 1.75rem; margin: 5% auto; border-radius: 1rem; border-radius: 0.75rem; } .order_result_wrap .order_list .order_item_bottom .price { padding-top: 5%; border-top: 1px solid #ddd; } .order_result_wrap .payment_method { padding: 5%; border-bottom: 8px solid #f0f0f0; } .order_result_wrap .payment_method li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5%; } .order_result_wrap .payment_method li:nth-last-of-type(1) { margin-bottom: 0; } .order_result_wrap .payment_method li span { font-size: 1.25rem; font-weight: 500; } .info_popup_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: none; } .info_popup_wrap *{font-family: 'noto' !important; font-weight: 500;line-height: 1.35;} .info_popup_wrap.active { display: block; } .info_popup_wrap .bg { background: #000; opacity: 0.7; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .info_popup_wrap .popup_content { display: none; position: absolute; top: 50%; left: 50%; z-index: 99; max-width: 640px; width: 90%; border-radius: 5vw; padding:5%; transform: translate(-50%, -50%); background: #fff; font-family: 'noto', sans-serif !important; } .info_popup_wrap .popup_content.active { display: block; } .info_popup_wrap .popup_content .popup_tit { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 4%; margin-bottom: 4%; font-size: 4vw; color: #333; font-weight: 700; } .info_popup_wrap .popup_content .popup_tit a.close_btn { width: 20px; height: 20px; display: block; position: relative; } .info_popup_wrap .popup_content .popup_tit a.close_btn::after, .info_popup_wrap .popup_content .popup_tit a.close_btn::before { content: ''; display: block; width: 100%; height: 2px; background: #333; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .info_popup_wrap .popup_content .popup_tit a.close_btn::before { transform: translateY(-50%) rotate(45deg); } .info_popup_wrap .popup_content .popup_tit a.close_btn::after { transform: translateY(-50%) rotate(-45deg); } .info_popup_wrap .popup_content p.main_tit { display: flex; align-items: center; gap: 2%; font-size: 3.4vw; font-weight: 700; line-height: 1.75rem; } .info_popup_wrap .popup_content p { font-size: 3vw; color: #333; text-align: left; } .info_popup_wrap .popup_content .main_tit i { background: url('//cdn.hackers.com/integration/popup/payment/ico_info.png') 0 0 / 100%; width: 5.8vw; height: 4.6vw; display: inline-block; } .info_popup_wrap .popup_content .notice_list { background: #f8f8f8; padding: 5%; margin: 5% 0; } .info_popup_wrap .popup_content .notice_list li { line-height: 5vw; font-size: 2.8vw; text-align: left; color: #333; } .info_popup_wrap .popup_content .notice_list li b { color: #e32727; } .info_popup_wrap .popup_content .popup_btn_wrap { display: flex; justify-content: center; align-items: center; gap: 2%; margin-top: 5%; } .info_popup_wrap .popup_content .popup_btn_wrap a { display:block; padding: 2.5% 0; text-align: center; border-radius: 10px; background: #222; color: #fff; width: 49%; font-weight: bold; font-size: 4vw; } .payment_popup_wrap { display: none; width: 100vw; height: 100vh; overflow: hidden; position: fixed; z-index: 99999; left: 50%; transform: translateX(-50%); top:0 } .payment_popup_wrap.active { display: block; } /* 쿠폰 팝업 */ .coupon_use_pop { display: none; } .coupon_use_pop.active { display: block; } .coupon_use_pop .pop_inner { padding: 5% 0 0; } .coupon_use_pop .pop_inner .tit_wrap { width: 90%; margin: 0 auto; } .coupon_use_pop .tit { font-size: 1.35rem; margin: 0 2% 5%; position: relative; padding-left: 3%; font-weight: 700; } .coupon_use_pop .tit::after { display: block; content: ''; width: 3px; height: 90%; background: #3b63d8; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .coupon_use_pop .registration_wrap { padding: 5%; border-bottom: 8px solid #f0f0f0; } .coupon_use_pop .registration_wrap .registration_cont { display: flex; align-items: center; justify-content: space-between; } .coupon_use_pop .registration_wrap .registration_cont input { width: 68%; padding:4.5% 5%; margin-top: 0; border: 1px solid #ccc; border-radius: 0.75rem; } .coupon_use_pop .registration_wrap .registration_cont a { display: block; width: 30%; padding: 5% 0; text-align: center; font-size: 1.25rem; font-weight: 500; color: #3b63d8; background: #EFF3FC; border-radius: 0.75rem; } .coupon_use_pop .registration_wrap ul { margin: 5% 0 0; padding: 5%; border-radius: 0.75rem; background: #f9f9f9; } .coupon_use_pop .registration_wrap ul li { font-size: 1.05rem; font-weight: 500; color: #888; line-height: 1.75rem; position: relative; padding-left: 1.25rem; } .coupon_use_pop .registration_wrap ul li::after { content:''; display: block; position: absolute; left: 0; top:35%; border-radius: 50%; width: 3px; height: 3px; background: #888; } .coupon_use_pop .possession_wrap { padding: 5%; height: 40vh; overflow-y: auto; } .coupon_use_pop .possession_wrap li { margin-bottom: 5%; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ccc; border-radius: 0.75rem; } .coupon_use_pop .possession_wrap li.active { border-color: #3b63d8; } .coupon_use_pop .possession_wrap li.active .right { background: #F8FAFF; } .coupon_use_pop .possession_wrap li .left { width: 75%; padding: 5%; } .coupon_use_pop .possession_wrap li .left p:nth-of-type(1) { font-size: 1.75rem; font-weight: 700; margin-bottom: 3%; } .coupon_use_pop .possession_wrap li .left p:nth-of-type(2) { font-size: 1.15rem; font-weight: 500; margin-bottom: 5%; } .coupon_use_pop .possession_wrap li .left p:nth-of-type(3) { font-size: 1rem; font-weight: 500; color: #aaa; } .coupon_use_pop .possession_wrap li .right { width: 25%; border-left: 1px solid #ccc; display: flex; align-items: center; justify-content: center; background: #f9f9f9; height: 9rem; border-radius: 0 0.75rem 0.75rem 0; } .coupon_use_pop .possession_wrap li .right input { display: none; } .coupon_use_pop .possession_wrap li .right label { position: relative; } .coupon_use_pop .possession_wrap li .right label::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 2.35rem; height: 2.35rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png') 0 0 no-repeat; background-size: 100%; transform: translate(-50%, -50%); } .coupon_use_pop .possession_wrap li .right input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } /* 결제/ 환불내역 */ .paylist_wrap .default_tab { width: 90%; margin: 5% auto 0; } .paylist_wrap .payment { display: none; } .paylist_wrap .payment.active { display: block; } .paylist_wrap .paylist_area { margin-top: 5%; padding: 5%; } .paylist_wrap .payment.refund .paylist_area { margin-top: 0%; padding: 0 5%; border-top: 8px solid #f0f0f0; } .paylist_wrap .paylist_area.wait { border-bottom: 8px solid #f0f0f0; } .paylist_wrap .paylist_area dl { padding: 0 0 4%; border-bottom: 1px solid #aaa; } .paylist_wrap .paylist_area dl dt { font-size: 1.35rem; margin-bottom: 2%; position: relative; padding-left: 3%; font-weight: 700; } .paylist_wrap .paylist_area dl dt::after { display: block; content: ''; width: 3px; height: 90%; background: #3b63d8; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .paylist_wrap .paylist_area.finish dl dt::after { height: 60%; top: 28%; } .paylist_wrap .paylist_area dl dt span { color: #3b63d8; display: inline-block; margin-left: 2%; } .paylist_wrap .paylist_area dl dt span b { color: #3b63d8; } .paylist_wrap .paylist_area dl dd { font-size: 1.15rem; line-height: 1.75rem; } /* 결제/환불 내역 */ .pay_list { margin: 5% 0; } .pay_list > li { width: 100%; border: 1px solid #aaa; padding: 5%; border-radius: 1rem; margin-bottom: 5%; } .pay_list li .order_info_top { display: flex; align-items: center; justify-content: left; } .pay_list li .order_info_top span { font-size: 1.25rem; font-weight: 700; } .pay_list li .order_info_top span.num { display: inline-block; margin-right: 2%; } .pay_list li .order_info_top span.num b { color: #888; font-weight: 500; } .pay_list li .order_info_top span:nth-of-type(2) { color: #3b63d8; display: block; margin-left: auto; } .paylist_wrap .paylist_area.wait .pay_list li .order_info_top span:nth-of-type(2) { color: #e15353 } .paylist_wrap .paylist_area.wait .pay_list li .order_info_top span:nth-of-type(2) em { color: #e15353;; } .pay_list li .order_info { padding: 5%; background: #f9f9f9; border-radius: 0.75rem; margin: 5% 0; width: 100%; } .pay_list li .order_info li { display: flex; align-items: center; justify-content: space-between; } .pay_list li .order_info li span { text-align: left; padding: 2% 0; font-size: 1.15rem; color: #888; } .pay_list li .order_info li span:nth-of-type(2) { text-align: right; } .pay_list li .order_info li:nth-last-of-type(1) span { padding-bottom: 0; } .pay_list li .order_info li span.end_date { color: #e15353; } .pay_list li .pay_info { margin-bottom: 5%; } .pay_list li .pay_info li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3%; } .pay_list li .pay_info li span { font-size: 1.15rem; font-weight: 500; } .pay_list li .pay_info li:nth-last-of-type(1) span { font-size: 1.35rem; font-weight: 700; } .pay_list li .pay_info li:nth-last-of-type(1) span b { font-size: 1.55rem; font-weight: 700; } .pay_list li a { display: block; width: 100%; padding: 3.7% 0; text-align: center; font-size: 1.25rem; font-weight: 500; color: #3b63d8; background: #EFF3FC; border-radius: 0.75rem; } .pay_list li a.v2 { color: #bcbcbc; background: #f9f9f9; } .pay_list.default li .lect { padding: 5%; background: #f9f9f9; border-radius: 0.75rem; margin: 5% 0; width: 100%; } .pay_list.default li .lect p { display: block; font-size: 1.25rem; font-weight: 700; margin-bottom: 3%; } .pay_list.default li .lect span { display: inline-block; color: #aaa; font-size: 1.05rem; font-weight: 500; } .pay_list.default li .lect span:nth-of-type(1) { margin-right: 3%; padding-right: 3%; border-right: 1px solid #aaa; } .paylist_wrap .paylist_area.finish dl { border: none; padding:0; } .paylist_wrap .paylist_area.finish dt { border-bottom: 1px solid #aaa; padding-bottom: 3%; margin-bottom: 3%; } .paylist_wrap .paylist_area.finish dd { display: flex; flex-wrap: wrap; justify-content:space-between; margin: 3% 0; align-items: center; font-size: 1.25rem; } .dey_search { display: flex; flex-wrap: wrap; justify-content:space-between; margin: 5% auto; padding-top: 5%; border-top: 1px solid #eee; width: 90%; align-items: center; font-size: 1.25rem; } a.search_btn { display: block; width: 20%; padding: 3% 0; text-align: center; font-size: 1.25rem; font-weight: 600; color: #3b63d8; background: #EFF3FC; border-radius: 0.75rem; } .date_day_select { width: 35.5%; position: relative; } .date_day_select .ui-datepicker-trigger { position: absolute; width:1.6rem; left: 5%; top: 51%; transform: translateY(-50%); } .date_day_select input.nomal { margin-top: 0; background: #fff; border: 1px solid #aaa; color: #aaa; padding: 10.5% 5%; text-align: end; } .date_day_select input.nomal::placeholder { color: #aaa; } .paylist_wrap .paylist_area.finish dd a { display: block; width: 20%; padding: 3% 0; text-align: center; font-size: 1.25rem; font-weight: 600; color: #3b63d8; background: #EFF3FC; border-radius: 0.75rem; } .paylist_wrap .payment.refund .refund_complete .pay_info { margin-bottom: 0; } .paylist_wrap .payment.refund .refund_apply_btn { margin-top: 5%; border-top: 8px solid #f0f0f0; display: block; text-align: center; background: #3b63d8; width: 100%; color: #fff; font-size: 1.35rem; font-weight: 600; padding: 5% 0; } /* 환불 신청 팝업 */ .refund_apply_pop { display: none; } .refund_apply_pop.active { display: block; } .refund_apply_pop .dey_search { width: 100%; border: none; padding: 0; } .refund_apply_pop a.search_btn { padding: 4% 0; } .refund_apply_pop .pay_list { height: 65vh; overflow-y: auto; } .refund_apply_pop.refund_step2 .pop_inner { padding: 5% 0; } .refund_apply_pop.refund_step2 .pop_inner .tit_wrap { width: 90%; margin: 0 auto; } .refund_apply_pop.refund_step2 p.refund_info { padding:3% 5%; width: 90%; line-height: 1.75rem; font-size: 1.15rem; font-weight: 500; color: #3b63d8; background: #f8faff; border-radius: 0.75rem; margin: 5% auto; } .refund_apply_pop.refund_step2 ul { margin: 5% auto 0; border-bottom: 8px solid #f0f0f0; padding:3% 5%; height: 35vh; overflow-y: auto; } .refund_apply_pop.refund_step2 li { margin-bottom: 5%; } .refund_apply_pop.refund_step2 .select_wrap { width: 100%; margin-top:2.4%; } .refund_apply_pop.refund_step2 .select_wrap select { width: 100%; padding: 3.5% 5%; } .refund_apply_pop.refund_step2 input[readonly] { background-color: #f5f5f5; border:none } .refund_apply_pop.refund_step2 .refund_rule { display: flex; padding: 5%; font-size: 1.15rem; line-height: 1.75rem; border-top: 1px solid #f0f0f0; border-bottom: 8px solid #f0f0f0; align-items: center; } .refund_apply_pop.refund_step2 .refund_rule span { display: block; width: 2rem; height: 2rem; margin-left: auto; } .refund_apply_pop.refund_step2 .agree_wrap { padding: 5%; } .refund_apply_pop.refund_step2 .agree_wrap > input { display: none; } .refund_apply_pop.refund_step2 .agree_wrap > label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.75rem; } .refund_apply_pop.refund_step2 .agree_wrap label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .refund_apply_pop.refund_step2 .agree_wrap > input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .refund_apply_pop.refund_step2 .agree_wrap > label p { width: 80%; } .refund_apply_pop.refund_step2 .agree_wrap > label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 1rem; } .refund_apply_pop.refund_step2 .agree_wrap > label a { display: inline-block; width: 2rem; height: 2rem; position: absolute; right: 0; top: 0; } .refund_apply_pop.refund_step2 .agree_wrap > label a.active { transform: scaleY(-1); } /* 포인트 내역 / 쿠폰 내역 */ .boon_wrap .boon_info_top { padding: 5%; } .boon_wrap .boon_info_top dl { background: #3b63d8; padding: 8% 10%; border-radius: 1.35rem; box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; margin-bottom: 5%; } .boon_wrap .boon_info_top dl dt { opacity: 0.8; color: #fff; border-right: 1px solid #90A9F2; font-size: 1.15rem; font-weight: 500; width: 50%; display: flex; align-items: center; justify-content: left; } .boon_wrap .boon_info_top dl dt span { display: inline-block; margin-right: 4%; width: 1.3rem; height: 1.3rem; } .boon_wrap .boon_info_top dl dd { color: #fff; font-weight: 600; font-size: 2.15rem; } .boon_wrap .boon_info_top ul { margin-top: 5%; padding: 0 3%; } .boon_wrap.coupon .boon_info_top ul { border-bottom: 1px solid #f0f0f0; padding:3% 3% 0%; margin-bottom: 3%; } .boon_wrap.coupon .boon_info_top .input_wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } .boon_wrap.coupon .boon_info_top .input_wrap input { width: 70%; margin-top: 0; } .boon_wrap.coupon .boon_info_top .input_wrap a { display: block; width: 28%; padding: 4.4% 0; background: #eff3fc; color: #3b63d8; border-radius: 0.75rem; text-align: center; font-size: 1.15rem; font-weight: 600; } .boon_wrap .boon_info_top ul li { display: flex; align-items: start; justify-content: left; margin-bottom: 3%; } .boon_wrap .boon_info_top ul li span { display: block; font-size: 1.15rem; font-weight: 700; width: 10%; line-height: 1.55rem; } .boon_wrap .boon_info_top ul li p { line-height: 1.55rem; font-size: 1.1rem; width: 90%; } .boon_wrap .boon_history_wrap { padding: 5%; border-top: 8px solid #f0f0f0; } .boon_wrap .boon_history_wrap .boon_history_list { display: none; } .boon_wrap .boon_history_wrap .boon_history_list.active { display: block; } .boon_wrap .boon_history_wrap .boon_history_list { margin: 5% 0;; } .boon_wrap .boon_history_wrap .boon_history_list ul { margin-bottom: 10%; } .boon_wrap .boon_history_wrap .boon_history_list li { position: relative; border: 1px solid #ccc; border-radius: 1.35rem; padding: 5%; margin: 5% 0; } .boon_wrap .boon_history_wrap .boon_history_list li span.state { display: inline-block; font-weight: 600; font-size: 1rem; border: 1px solid #3b63d8; color: #3b63d8; padding: 1% 2%; border-radius: 0.55rem; position: absolute; top: 15%; right: 5%; } .boon_wrap .boon_history_wrap .boon_history_list.minus li span.state { border-color: #e15353; color: #e15353; } .boon_wrap .boon_history_wrap .boon_history_list.minus li span.state.v2 { border-color: #ccc; color: #ccc; } .boon_wrap .boon_history_wrap .boon_history_list li span.point { font-size: 1.75rem; font-weight: 700; color: #3b63d8; } .boon_wrap .boon_history_wrap .boon_history_list.minus li span.point { color: #e15353; } .boon_wrap .boon_history_wrap .boon_history_list li p { font-weight: 600; font-size: 1.15rem; margin: 5% 0 3%; } .boon_wrap .boon_history_wrap .boon_history_list li span.dete { font-size: 1.05rem; font-weight: 500; color: #aaa; } .boon_wrap .boon_history_wrap .boon_history_list a.more_btn.default { width: 100%; } .boon_wrap .boon_history_wrap .coupon_list li { padding: 2% 3%; display: flex; align-items: center; justify-content: center; gap: 20%; } .boon_wrap .boon_history_wrap .coupon_list li .left { width: 43%; } .boon_wrap .boon_history_wrap .coupon_list li .left p { font-size: 1.25rem; font-weight: 700; margin:0 0 3% 0; line-height: 1.75rem; } .boon_wrap .boon_history_wrap .coupon_list li .left span.c_state { font-size: 1rem; font-weight: 400; margin-bottom: 5%; display: block; color: #e15353; } .boon_wrap .boon_history_wrap .coupon_list li p.coupon { position: relative; width: 30%; font-size: 1.15rem; font-weight: 700; line-height: 1.75rem; } .boon_wrap .boon_history_wrap .coupon_list li p.coupon span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 1.25rem; text-align: center; color:#3b63d8 } .boon_wrap .boon_history_wrap .coupon_list.expired p.coupon span { color: #aaa; } .boon_wrap .boon_history_wrap .coupon_list li p.coupon img { width: 100%; } /* 공지사항-리스트 */ .notice_list_wrap table { table-layout:fixed; border-collapse:collapse; border-spacing:0; margin: 0 auto; width: 90%; } .notice_list_wrap table tr td:nth-of-type(1) span { font-weight: 700; border: 1px solid #666; display: inline-block; padding: 3% 5%; border-radius: 0.55rem; } .notice_list_wrap table tr td { padding: 3.5% 0; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 1.05rem; } .notice_list_wrap table tr:nth-last-of-type(1) td { border-bottom: none; } .notice_list_wrap table tr td:nth-of-type(2) { text-align: left; display: grid; } .notice_list_wrap table tr td:nth-of-type(2) a { position: relative; font-size: 1.15rem; line-height: 1.75rem; display: block; width: 95%; } .notice_list_wrap table tr td:nth-of-type(2) b { display: inline-block; width: 20%; } .notice_list_wrap table tr td:nth-of-type(2) span.hot,.notice_list_wrap table tr td:nth-of-type(2) span.new { display: inline-block; width: 1.25rem; height: 1.25rem; } .notice_list_wrap table tr td:nth-of-type(2) span.hot { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/hot_r.png') 0 0 no-repeat; background-size: 100%; } .notice_list_wrap table tr td:nth-of-type(2) span.new { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/new_b.png') 0 0 no-repeat; background-size: 100%; } .notice_list_wrap table tr td.best a { font-weight: 700; } /* 공지사항-보기 */ .notice_view_wrap .notice_tit { padding: 5%; background: #fff } .notice_view_wrap .notice_tit span { font-size: 1.05rem; display: inline-block; padding: 1% 2%; border-radius: .75rem; color: #7591e3; border:1px solid #7591e3; } .notice_view_wrap .notice_tit p { font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; margin: 3% auto; } .notice_view_wrap .notice_tit dl { display: flex; align-items: center; justify-content: left; } .notice_view_wrap .notice_tit dl dt { font-size: 1.15rem; font-weight: 500; color: #aaa; margin-right: 2%; } .notice_view_wrap .notice_tit dl dd { font-size: 1.15rem; font-weight: 500; color: #aaa; position: relative; } .notice_view_wrap .notice_tit dl dd:nth-of-type(1) { margin-right: 3%; padding-right: 3%; position: relative; } .notice_view_wrap .notice_tit dl dd:nth-of-type(1)::after { content: ''; display: block; width: 1px; height:100%; background: #aaa; position: absolute; right: 0; top: 0; } .notice_view_wrap .notice_inner { padding: 5%; background: #f8faff; font-size: 1.15rem; line-height: 1.75rem; } .notice_view_wrap .go_list { display: block; width: 90%; padding: 3.5% 0; margin: 3% auto 7%; text-align: center; font-size: 1.35rem; background: #fff; color: #3b63d8; border-radius: .75rem; border: 1px solid #3b63d8; font-weight: 700; } /* 자주묻는 질문 */ .fna_list_wrap .fna_list { margin: 5% 0; } .fna_list_wrap .fna_list li .answer_view { display: flex; align-items: start; justify-content: left; line-height: 1.75rem; font-size: 1.25rem; font-weight:500; border-bottom: 1px solid #eee; width: 90%; margin: 0 auto; padding: 3.5% 0; } .fna_list_wrap .fna_list li .answer_view span { color: #7591E3; display: block; margin-right: 2%; } .fna_list_wrap .fna_list li .answer_view.active { font-weight: 700; } .fna_list_wrap .fna_list li .answer { display: none; font-size: 1.15rem; line-height: 1.75rem; background:#f8faff; color:#5367a4; padding: 3.5% 10%; } .fna_list_wrap .fna_list li .answer.active { display: block; } /* 교재문의 / 오타정정노트 */ .book_qna_wrap .consult_info { color:#aaa; font-size: 1.15rem;; display: flex; align-items: start; justify-content: left; gap: 2%; margin:5% auto 0; width: 90%; } .book_qna_wrap .consult_info span { display: block; width: 1.2rem; height: 1.2rem; } .book_qna_wrap .subject_list { display: flex; align-items: center; justify-content: left; flex-wrap: wrap; gap: 1%; padding: 5%; border-bottom: 1px solid #f0f0f0; margin-bottom: 5%; } .book_qna_wrap .subject_list li { width: 18%; margin-bottom: 3%; } .book_qna_wrap .subject_list li:nth-last-of-type(1), .book_qna_wrap .subject_list li:nth-last-of-type(2), .book_qna_wrap .subject_list li:nth-last-of-type(3) { margin-bottom: 0; } .book_qna_wrap .subject_list li a { display: block; width: 100%; padding: 13% 0; text-align: center; font-size: 1.15rem; background: #fff; color: #888; border-radius: 1.5rem; border: 1px solid #ccc; } .book_qna_wrap .subject_list li a.active { background: #3b63d8; color: #fff; border-color: #3b63d8; } .book_qna_wrap .select_wrap { width: 90%; margin: 5% auto 0; } .book_qna_wrap .select_wrap select { width: 100%; padding: 3.5% 5%; } .book_qna_wrap .search_wrap { display: flex; align-items: center; justify-content: space-between; padding: 3% 5% 5%; margin: 0 auto 5%; border-bottom: 8px solid #f0f0f0; } .book_qna_wrap .search_wrap .input_wrap { width: 73%; position: relative; border: 1px solid #7591e3; border-radius: 0.75rem; text-align: center; padding: 2.2% 0; } .book_qna_wrap .search_wrap .input_wrap input { padding: 2% 5%; width: 83%; border: none; border-right: 1px solid #CACACA; margin: 0; display: block; background-color: #fff !important; } .book_qna_wrap .search_wrap .input_wrap input:focus { outline: none; } .book_qna_wrap .search_wrap .input_wrap input::placeholder { color: #CACACA; } .book_qna_wrap .search_wrap .input_wrap a { position: absolute; right: 5%; top: 50%; width: 1.95rem; height: 1.95rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/re_icon_b.png') 0 0 no-repeat; background-size: 100%; transform: translateY(-50%); } .book_qna_wrap .search_wrap > a { display: block; width: 24%; padding: 4% 0; background: #eff3fc; color: #3b63d8; font-size: 1.35rem; font-weight: 500; border-radius: .75rem; text-align: center; } .book_qna_wrap .default_tab { width: 90%; margin: 0 auto 5%; } .book_qna_wrap .result_list_wrap ul > li { border: 1px solid #aaa; border-radius: .75rem; padding: 5%; width: 90%; margin: 0 auto 5%; } .book_qna_wrap .result_list_wrap ul > li .user_info { color: #aaa; font-size: 1.05rem; font-weight: 500; display: flex; align-items: center; justify-content: left; margin: 3% 0 5%; border-bottom: 1px solid #ccc; padding-bottom: 5%; } .book_qna_wrap .result_list_wrap ul > li .user_info span { color: #aaa; } .book_qna_wrap .result_list_wrap ul > li .user_info span:nth-of-type(1) { margin-right: 3%; padding-right: 3%; position: relative; } .book_qna_wrap .result_list_wrap ul > li .user_info span:nth-of-type(1)::after { content: ''; display: block; width: 1px; height: 100%; background: #aaa; position: absolute; right: 0; top: 0; } .book_qna_wrap .result_list_wrap ul > li > span { display: inline-block; background: #fff; border: 1px solid #666; color: #666; padding:1% 2%; font-size: 1.05rem; border-radius: 0.55rem; margin-right: 2%; } .book_qna_wrap .result_list_wrap ul > li > span.state { border-color: #3b63d8; color: #3b63d8; } .book_qna_wrap .result_list_wrap ul > li > span.state.v2 { background: #7591E3; color: #fff; } .book_qna_wrap .result_list_wrap ul > li p:nth-of-type(1) { margin: 2% 0 1%; font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; } .book_qna_wrap .result_list_wrap ul > li p.book_tit { font-size: 1.15rem; font-weight: 500; line-height: 1.75rem; } .book_qna_wrap .result_list_wrap ul > li > a { display: block; padding: 3.5% 0; margin: 5% auto 0; text-align: center; font-size: 1.25rem; background: #fff; color: #3b63d8; border-radius: .75rem; border: 1px solid #3b63d8; font-weight: 600; } .book_qna_wrap .qna_list { display: none; } .book_qna_wrap .qna_list.active { display: block; } .book_qna_wrap .qna_list li .question { margin-bottom: 5%; } .book_qna_wrap .qna_list li .question .file_wrap { display: flex; align-items: center; justify-content: left; gap: 2%; margin: 3% 0; } .book_qna_wrap .qna_list li .question .file_wrap span { display: block; width: 1.2rem; height: 1.2rem; } .book_qna_wrap .qna_list li .question .file_wrap a { display: block; font-size: 1.15rem; text-decoration: underline; color: #3b63d8; } .book_qna_wrap .qna_list li .question .file_wrap b { display: block; font-size: 1.15rem; color: #aaa; font-weight: 500; } .book_qna_wrap .qna_list li .question p { font-size: 1.15rem; line-height: 1.75rem; font-weight: 500; } .book_qna_wrap .qna_list li .answer_view { margin-top: 5%; background: #f3f6fd; padding: 5%; display: none; width: 112%; position: relative; left: 0; left: 50%; transform: translateX(-50%); } .book_qna_wrap .qna_list li .answer_view h5 { font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; border-bottom: 1px solid #b4c0e2; padding-bottom: 3%; margin-bottom: 3%; } .book_qna_wrap .qna_list li .answer_view h5 span { color: #3b63d8; font-weight: 500; border: 1px solid #3b63d8; border-radius: 1rem; padding: 0.5% 1.5%; background: #fff; margin-right: 3%; font-size: 1.15rem; } .book_qna_wrap .qna_list li .answer_view > span { color: #b4c0e2; font-weight: 500; font-size: 1.15rem; } .book_qna_wrap .qna_list li .answer_view > p { font-size: 1.15rem; line-height: 1.75rem; margin-top: 3%; } .book_qna_wrap .qna_list li .answer_view.active { display: block; } .book_qna_wrap .write_pop_btn { display: block; width: 100%; padding: 5% 0; margin: 7% auto 0; text-align: center; font-size: 1.35rem; background: #3b63d8; color:#fff; font-weight: 700; } /* 문의등록 팝업 */ .note_write_pop { display: none; } .note_write_pop.active { display: block; } .note_write_pop .pop_inner form > ul { margin:5% 0; height: 75vh; overflow-y: scroll; padding-bottom: 5%; } .note_write_pop li { margin-bottom: 5%; } .note_write_pop li label.select { margin-bottom: 2.4%; } .note_write_pop li .select_wrap { width: 100%; } .note_write_pop li .select_wrap select { padding: 3.5% 5%; } .note_write_pop li textarea { margin: 3% auto 0; font-size: 1.25rem; color: #333; display: block; width: 100%; border: 1px solid #ccc; height: 15rem; overflow-y: scroll; border-radius: 1.05rem; padding: 3%; } .note_write_pop .send_btn { position: fixed; bottom: 0; left: 0; display: block; width: 100%; padding: 5% 0; font-size: 1.35rem; font-weight: 700; text-align: center; color: #fff; background: #3b63d8; } .note_write_pop input[readonly] { background-color: #f5f5f5; } /* 오타정정노트-보기 */ .note_view_wrap { padding: 5%; } .note_view_wrap table { width: 100%; margin-bottom: 5%; } .note_view_wrap table tr td,.note_view_wrap table tr th { padding: 4.5% 0; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 1.25rem; } .note_view_wrap table tr th { font-weight: 700; } .note_view_wrap table tr td .file_info { display: flex; align-items: center; justify-content: left; gap: 2%; } .note_view_wrap table tr td .file_info a { font-size: 1.15rem; color:#3b63d8; text-decoration: underline; } .note_view_wrap table tr td .file_info span { display: block; width: 1.2rem; height: 1.2rem; } .note_view_wrap .note_inner { font-size: 1.15rem; line-height: 1.75rem; border-bottom: 1px solid #f0f0f0; padding-bottom: 5%; } .note_view_wrap .go_list { display: block; width: 100%; padding: 3.5% 0; margin: 5% auto 7%; text-align: center; font-size: 1.25rem; background: #fff; color: #3b63d8; border-radius: .75rem; border: 1px solid #3b63d8; font-weight: 700; } /* 해커스에 바란다 / 1:1 무료상담 */ .wish_wrap .sub_tit { width: 100%; background: #7591e3; color: #fff; text-align: center; padding: 3.5% 0; font-size: 1.45rem; font-weight: 500; } .wish_wrap .info_txt { background: #eff3fc; border: 1px solid #dee5f8; border-radius: .75rem; font-size: 1.05rem; color: #5367a4; line-height: 1.45rem; width: 90%; margin: 5% auto 0; padding: 3%; } .wish_wrap .consult_info { color:#aaa; font-size: 1.15rem;; display: flex; align-items: start; justify-content: left; gap: 2%; width: 90%; margin: 5% auto 0; } .wish_wrap .consult_info span { display: block; width: 1.2rem; height: 1.2rem;; } .wish_wrap ul { padding: 5%; } .wish_wrap ul li { margin-bottom: 5%; } .wish_wrap ul li textarea { margin: 3% auto 0; font-size: 1.25rem; color: #333; display: block; width: 100%; border: 1px solid #ccc; height: 15rem; overflow-y: scroll; border-radius: 1.05rem; padding: 3%; } .wish_wrap ul li textarea::placeholder { color: #ccc; } .wish_wrap ul li textarea::-webkit-scrollbar { width: 3px; } .wish_wrap ul li textarea::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2rem; } .wish_wrap ul li textarea::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .wish_wrap .select_wrap { width: 100%; } .wish_wrap .select_wrap select { padding: 3.5% 5%; margin-top: 2.4%; } .wish_wrap ul li.file_wrap { margin-bottom: 0; } .wish_wrap ul li.file_wrap p { font-size: 1.25rem; font-weight: 700; } .wish_wrap ul li.file_wrap label { display: block; margin: 2.4% auto 0; width: 100%; font-size: 1.35rem; text-align: center; padding: 3.5% 0; background:#EFF3FC; color: #3b63d8; border-radius: .75rem; } .wish_wrap ul li.file_wrap input { display: none; } .wish_wrap ul li.file_wrap span { color: #ccc; font-size: 1.05rem; display: block; margin-bottom: 3%; } .wish_wrap .agree_wrap { padding: 5%; border-top:8px solid #f0f0f0; border-bottom: 8px solid #f0f0f0; } .wish_wrap .agree_wrap input { display: none; } .wish_wrap .agree_wrap label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.75rem; } .wish_wrap .agree_wrap label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 1rem; } .wish_wrap .agree_wrap label a { display: inline-block; width: 2rem; height: 2rem; position: absolute; right: 0; top: 0; } .wish_wrap .agree_wrap label a.active { transform: scaleY(-1); } .wish_wrap .agree_wrap label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .wish_wrap .agree_wrap input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .wish_wrap a.send_btn { display: block; width: 100%; padding: 5% 0; font-size: 1.35rem; font-weight: 700; text-align: center; color: #fff; background: #3b63d8; } /* 전화상담 예약 */ .consult_call_wrap .date_select_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } .consult_call_wrap .date_select_wrap label { margin-bottom: 2.4%; } .consult_call_wrap .date_select_wrap div { width: 48%; position: relative; } .consult_call_wrap .date_select_wrap div .ui-datepicker-trigger { position: absolute; width:1.6rem; left: 5%; top: 51%; transform: translateY(-50%); } .consult_call_wrap .date_select_wrap div input.nomal { border: none; background: #eff3fc; padding: 7.5% 5%; text-align: end; margin-top: 2.4%; } .consult_call_wrap .date_select_wrap .select_wrap span { transform: rotate(0); right: 85%; top: 33%; width: 1.7rem; height: 1.7rem; } .consult_call_wrap .date_select_wrap .select_wrap select { padding: 7.5% 5%; border: none; background: #eff3fc; text-align: end; } .consult_call_wrap .date_select_wrap .select_wrap select::placeholder { color: #3b63d8; } .consult_call_wrap .all_chk_wrap { padding: 5%; margin:0 auto; background: #f9f9f9; border-top: 8px solid #f0f0f0; } .consult_call_wrap .all_chk_wrap input { display: none; } .consult_call_wrap .all_chk_wrap label { position: relative; display: block; font-size: 1.25rem; font-weight: 700; padding-left: 2.35rem; line-height: 1.55rem; } .consult_call_wrap .all_chk_wrap label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .consult_call_wrap .all_chk_wrap input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .consult_call_wrap .chk_list { padding: 2% 5%; } .consult_call_wrap .chk_list li { padding: 3% 0; border-bottom: 1px solid #ddd; margin-bottom: 2%; } .consult_call_wrap .chk_list li > input { display: none; } .consult_call_wrap .chk_list li > label { position: relative; display: block; font-size: 1.15rem; padding-left: 2.35rem; line-height: 1.75rem; } .consult_call_wrap .chk_list li > label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 1.75rem; height: 1.75rem; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_off.png')0 0 no-repeat; background-size: 100%; } .consult_call_wrap .chk_list li > input:checked + label::after { background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/round_chk_on.png')0 0 no-repeat; background-size: 100%; } .consult_call_wrap .chk_list li > label p { width: 80%; } .consult_call_wrap .chk_list li > label span { display: inline-block; margin-left: 2%; font-size: 1rem; padding: 0% 2%; border: 1px solid #3b63d8; color: #3b63d8; border-radius: 1rem; } .consult_call_wrap .chk_list li > label span.gray { border-color: #888; color: #888; } .consult_call_wrap .chk_list li > label a { display: inline-block; width: 2rem; height: 2rem; position: absolute; right: 0; top: 0; } .consult_call_wrap .chk_list li > label a.active { transform: scaleY(-1); } .consult_call_wrap.wish_wrap a.send_btn { color: #C7C7C7; background: #aaa; } .consult_call_wrap.wish_wrap a.send_btn.active { color: #fff; background: #3b63d8; } /* 무료강의 목록 */ .free_lecture_wrap .search_wrap { padding: 5%; border-bottom:8px solid #f0f0f0 } .free_lecture_wrap .search_wrap h4 { font-size: 1.55rem; font-weight: 700; line-height: 1.75rem; margin-bottom: 4%; } .free_lecture_wrap .search_wrap form > ul { margin-bottom: 5%; padding-bottom: 2%; border-bottom: 1px solid #eee; } .free_lecture_wrap .search_wrap form > ul > li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3%; } .free_lecture_wrap .search_wrap form > ul > li label { width: 20%; padding-left: 3%; font-size: 1.25rem; font-weight: 600; position: relative; } .free_lecture_wrap .search_wrap form > ul > li label::after { content: ''; display: block; position: absolute; left: 0; top:50%; width: 3px; height: 3px; background: #ddd; border-radius: 50%; transform: translateY(-50%); } .free_lecture_wrap .search_wrap form > ul > li .select_wrap { width:80%; } .free_lecture_wrap .search_wrap form > ul > li .select_wrap select { padding: 3% 5%; } .free_lecture_wrap .search_wrap .btn_wrap { display: flex; align-items: center; justify-content: space-between; } .free_lecture_wrap .search_wrap .btn_wrap a { display: block; width: 48%; padding: 4% 0; text-align: center; font-size: 1.25rem; font-weight: 600; border-radius: 0.75rem; } .free_lecture_wrap .search_wrap .btn_wrap a.reset_btn { background: #f8f8f8; color:#333; } .free_lecture_wrap .search_result { padding: 5%; } .free_lecture_wrap .search_result li { margin-bottom: 5%; } .free_lecture_wrap .search_result li a { display: block; overflow: hidden; border: 1px solid #aaa; border-radius: 1rem; } .free_lecture_wrap .search_result li .lect_video_top { position: relative; } .free_lecture_wrap .search_result li .lect_video_top .video_bg { width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: 1; background: rgba(0,0,0,.3); } .free_lecture_wrap .search_result li .lect_video_top .play_w { display: block; width: 5rem; height: 5rem; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); z-index: 2; } .free_lecture_wrap .search_result li .lect_video_top .img_wrap { width: 60%; margin:0 auto; position: relative; } .free_lecture_wrap .search_result li .lect_video_top .img_wrap img { width: 100%; } .free_lecture_wrap .search_result li .lect_video_info { padding: 5%; } .free_lecture_wrap .search_result li .lect_video_info p:nth-of-type(1) { font-size: 1.55rem; font-weight: 700; line-height: 1.75rem; margin-bottom: 4%; } .free_lecture_wrap .search_result li .lect_video_info p:nth-of-type(2) { display: flex; align-items: center; justify-content: left; font-size: 1.15rem; font-weight: 500; color:#aaa; } .free_lecture_wrap .search_result li .lect_video_info p:nth-of-type(2) span { display: inline-block; margin-right: 2%; width: 1.2rem; height: 1.2rem; } /* 레벨테스트 */ .level_test_wrap { background: #3b63d8 url('//cdn.edu2080.co.kr/gumjung/m/common/review_bg.png')0 0 no-repeat; background-size: 100%; padding: 5%; } .level_test_wrap .level_tit { margin: 5% auto; width: 90%; } .level_test_wrap .level_tit img { width: 100%; } .level_test_info { position: relative; z-index: 1; } .level_test_info > img { width: 110%; position: relative; z-index: -1; left: 50%; transform: translateX(-50%); } .level_test_info p { font-size: 1.55rem; width: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; position: absolute; left: 0; top: 23.5%; } .level_test_info p span { display: block; } .level_test_info p span:nth-of-type(1) { margin-right: 2%; padding-right: 2%; border-right: 1px solid #aaa; } .level_test_info a { display: block; position: absolute; left: 50%; top: 45%; transform: translateX(-50%); width: 75%; } .level_test_info a > img { width: 100%; } /* 레벨테스트 팝업 공통 */ .level_pop { display: none; } .level_pop.active { display: block; } .level_pop .pop_inner { padding: 0; overflow: hidden; width: 100vw; min-width: 340px; height: 95%; } .level_pop .pop_inner .tit_wrap { background: #000; padding: 5%; border: none; border-radius: 1.75rem 1.75rem 0 0; } .level_pop .pop_inner .tit_wrap p { color: #fff; } .level_pop .pop_inner .tit_wrap p span { color: #fff; } .level_pop .pop_inner .tit_wrap a.close { top: 25%; right: 5%; } .level_pop .level_test_con { background: #3b63d8 url('//cdn.edu2080.co.kr/gumjung/m/common/review_bg.png')0 0 no-repeat; background-size: 100%; padding: 5% 5% 15%; height:100%; } .level_pop.level_step2_pop .level_test_con .level_test_info p { font-size: 1.45rem; padding: 3% 0; width: 70%; margin: 0 auto; left: 50%; transform: translateX(-50%); top: 12%; border-bottom: 3px solid #f0f0f0; border-top: 3px solid #f0f0f0; } .level_pop.level_step2_pop .level_test_con .level_test_info .select_wrap { position: absolute; width: 70%; left: 50%; top: 33%; transform: translateX(-50%); } .level_pop.level_step2_pop .level_test_con .level_test_info a { top:55%; width: 70%; } .level_pop .level_test_con .tit { width: 90%; margin: 5% auto; } .level_pop .level_test_con .tit img { width: 100%; } /* 레벨테스트 팝업 3단계 문제부분 */ .level_pop.level_step3_pop .level_test_con { background: #fff; padding: 0; } .level_pop.level_step3_pop .level_test_con .time_bar { display: flex; align-items: center; justify-content: space-between; padding:3.5% 5%; background: #3b63d8; } .level_pop.level_step3_pop .level_test_con .time_bar > p:nth-of-type(1) { display: flex; align-items: center; justify-content: left; gap: 2%; } .level_pop.level_step3_pop .level_test_con .time_bar > p:nth-of-type(1) span { color:#ffe032; font-size: 1.15rem; font-weight: 500; } .level_pop.level_step3_pop .level_test_con .time_bar > p:nth-of-type(1) span.time_icon_y { display: block; width: 1.2rem; height: 1.2rem; } .level_pop.level_step3_pop .level_test_con .time_bar > p:nth-of-type(2) { width: 60%; height: 0.75rem; background: rgba(0,0,0,0.3); border-radius: 1rem; } .level_pop.level_step3_pop .level_test_con .time_bar > p:nth-of-type(2) span { display: block; height: 100%; border-radius: 1rem; background: #ffe032; } .level_pop.level_step3_pop .level_test_con .time_bar > span { display: block; font-size: 1.05rem; font-weight: 500; color:#fff; } .level_pop.level_step3_pop .question_wrap { padding: 5% 2% 15% 5%; background: #fff; } .level_pop.level_step3_pop .question_wrap .qclass { display: none; padding-right: 3%; height: 75vh; overflow-y: scroll; } .level_pop.level_step3_pop .question_wrap .qclass.active { display: block; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li { border: 1px solid #ddd; padding: 0 5% 5%; border-radius: 0.75rem; margin-bottom: 5%; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li strong { font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; display: block; margin: 5% 0; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box { border-radius: 0.75rem; padding: 5%; background: #fafafa; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box p { color:#5367a4; font-size: 1.15rem; font-weight: 600; line-height: 1.75rem; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box dl dt, .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box dl dd, .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box dl dd li { color:#5367a4; font-size: 1.15rem; font-weight: 600; line-height: 1.75rem; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box b { font-weight: 700; text-decoration: underline; color:#5367a4; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box p.bot_txt { font-size: 1rem; font-weight: 500; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box.img { padding: 0; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li .gray_box.img img { width: 100%; border-radius: 0.75rem; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li > ol { margin-top: 5%; } .level_pop.level_step3_pop .question_wrap .qclass > ol > li > ol >li { font-size: 1.15rem; font-weight: 500; margin-bottom: 3%; border: none; padding: 0; } .level_pop.level_step3_pop .answer_wrap { width: 100%; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; } .level_pop.level_step3_pop .answer_wrap .tit { border-bottom: 1px solid #fff; padding: 4% 8% 5% 5%; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; background: #3b63d8; } .level_pop.level_step3_pop .answer_wrap .tit strong { font-size: 1.45rem; font-weight: 600; color:#fff; display: flex; align-items: center; justify-content:left; gap: 8%; } .level_pop.level_step3_pop .answer_wrap .tit strong span { display: block; width: 2.25rem; height: 1.95rem; } .level_pop.level_step3_pop .answer_wrap .tit a { display: block; width: 2.4rem; height: 2.4rem; transform: rotate(0deg); transition: all 0.3s; } .level_pop.level_step3_pop .answer_wrap .tit a.active { transform: rotate(180deg); } .level_pop.level_step3_pop .answer_wrap .answer_in { display: none; background: #3b63d8; width: 100vw; padding:2%; } .level_pop.level_step3_pop .answer_wrap .answer_in.active { display: block; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap { width: 100%; height: 25vh; overflow-y: scroll; padding:5% 5% 20%; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap::-webkit-scrollbar { width: 5px; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: 1rem; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(0,0,0,0.35) rgba(0,0,0,0.0); /* Firefox */ } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap::-webkit-scrollbar { width: 5px; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: 1rem; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap > li { padding: 2% 3%; display: flex; align-items: center; justify-content: space-between; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap > li:nth-of-type(even) { background: rgba(0, 0, 0, 0.1); border-radius: 1rem; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap p { font-size: 1.25rem; color: #fff; font-weight: 400; padding: 3.5% 0; text-align: center; width: 20%; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap >li > ul { display: flex; align-items: center; justify-content: space-between; gap: 2%; width: 70%; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap >li > ul > li { width: 23% } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap input[type="radio"] { display: none; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap input[type="radio"] + label { font-size: 1.25rem; color: #3b63d8; background: #D7E0F7; display: flex; position: relative; padding: 10% 3%; border-radius: 2rem; text-align: center; width: 50%; justify-content: center; align-items: center; font-weight: 700; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap input[type="radio"] + label::after { content: ''; display: block; position: absolute; left: 0; top:0; width: 125%; height: 125%; border-radius: 2rem; border: 1px solid #ffe032; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); opacity: 0; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap input[type="radio"]:checked + label { background: #ffe032; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_input_wrap input[type="radio"]:checked + label::after { opacity: 1; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_btn_wrap { padding: 5% 7% 5% 5%; position: fixed; bottom: 0; width: 100%; left: 0; display: flex; align-items: center; justify-content: space-between; background:#000; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_btn_wrap p { font-size: 0.95rem; font-weight: 400; color: #fff; width: 150%; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_btn_wrap a { display: flex; align-items: center; justify-content: right; width: 100%; font-size: 1.45rem; font-weight: 700; color: #fff; } .level_pop.level_step3_pop .answer_wrap .answer_in .answer_btn_wrap a span { display: block; width: 1.4rem; height: 1.4rem; margin-left: 4%; background: url('//cdn.edu2080.co.kr/gumjung/m/common/icon/arrow04.png')0 0 no-repeat; background-size: 100%; } /* 레벨테스트 팝업 4단계 결과 */ .level_pop.level_step4_pop .level_test_con { background: #c0d5f1; padding: 5%; height: 86vh; overflow-y: scroll; width: 100vw; } .level_pop.level_step4_pop .level_test_result_wrap { position: relative; width: 100%; margin: 15% auto -3%; z-index: 1; } .level_pop.level_step4_pop .level_test_result_wrap .result_icon { width: 12rem; height: 7rem; position: absolute; left: 50%; top: -6%; transform: translateX(-50%); } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap { position: absolute; width: 100%; left: 50%; top: 15%; transform: translateX(-50%); } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .score_wrap { display: flex; align-items: center; justify-content: center; gap: 5%; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .score_wrap span { display: block; width: 2.5rem; height: 2.5rem; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .score_wrap span img { width: 100%; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .score_wrap span.score_num { position: relative; font-size: 4.05rem; font-weight: 700; color: #3b63d8; width: auto; height: auto; z-index: 2; letter-spacing: -0.1rem; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .score_wrap span.score_num::after { content: ''; display: block; position: absolute; left: 0; bottom: 5%; width: 100%; height:0.5rem; border-radius: 1rem; background: #ffe032; opacity: 0.7; z-index: 1; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .result_tit { display: block; width: 68%; margin: 5% auto 2.5%; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .result_tit img { width: 100%; } .level_pop.level_step4_pop .level_test_result_wrap .result_text_wrap .result_txt { font-size: 1.15rem; font-weight: 600; line-height: 1.75rem; margin-bottom: 4%; text-align: center; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result { position: absolute; width: 80%; left: 50%; top:50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; border-radius: 1rem; overflow: hidden;; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li { width: 20%; border-right: 1px solid #E2E8F2; border-bottom: 1px solid #E2E8F2; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li:nth-of-type(5), .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li:nth-of-type(10) { border-right: none; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li dl { width: 100%; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li dt { font-size: 1.15rem; color:#888; font-weight: 500; background: #DFEBFE; padding: 10% 0; text-align: center; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li dd { display: flex; align-items: center; justify-content: center; padding: 25% 0%; background: #EDF3FC; } .level_pop.level_step4_pop .level_test_result_wrap .level_test_result li dd span { display: block; width: 2.05rem; height: 2.05rem; } .level_pop.level_step4_pop .level_test_result_wrap > img { width: 115%; position: relative; z-index: -1; left: 50%; transform: translateX(-50%); } .level_pop.level_step4_pop .result_btn_wrap a { display: block; width: 100%; padding: 5% 0; font-size: 1.35rem; border: 1px solid #3b63d8; text-align: center; font-weight: 500; color:#fff; background: #3b63d8; border-radius: 0.75rem; margin-bottom: 3%; } .level_pop.level_step4_pop .result_btn_wrap a.other_btn { background: #fff; color:#3b63d8; border: 1px solid #3b63d8; } /*과목합격전략 페이지*/ ul.free_lect_cont { padding-bottom:1rem; } ul.free_lect_cont .content_list { margin-top:2.6rem; } ul.free_lect_cont .content_list li { margin-bottom:1rem; } ul.free_lect_cont .content_list li p { font-size:1.15rem; line-height: 1.75rem; padding: 0 5vw; } ul.free_lect_cont .content_list li h5 { font-size:1.55rem; margin-bottom:1.5rem; position:relative; margin-left:3rem; color:#393939 } ul.free_lect_cont .content_list li h5 span { position: absolute; left: -6vw; } ul.free_lect_cont .content_list li img { width: 100%; } .free_lect_tab.sub ul.depth { width: 100%; overflow-x: scroll; background: #f5f5f5; } .free_lect_tab.sub ul.depth li { width: 100%; display: flex; justify-content: left; align-items: center; gap: 5%; padding: 1.5% 5%; } .free_lect_tab.sub ul.depth li a { display: block; padding: 0.6rem 1rem; font-size: 1.15rem; background: #fff; color: #888; border-radius: 2rem; text-align: center; line-height: 1.15rem; font-weight: 600; width: 20%; } .free_lect_tab.sub ul.depth li a.active { color: #3b63d8; } #loadingSpinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; text-align: center; z-index: 9999; display: block; } #loadingSpinner .spinner_wrap { width: 100%; height: 100%; margin: auto auto; transform: translate(0%, 45%); } #loadingSpinner .spinner_wrap .spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #000; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; } #loadingSpinner .spinner_wrap p { font-size: 1.25rem; font-weight: 600; color: #3b63d8; margin-top: 1rem; margin-top: 5% } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*팝업*/ .m_pop_wrap { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99; } .m_pop_wrap .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); } .m_pop_wrap .in_wrap { position:absolute; top:50%; left:50%; width:94%; transform:translate(-50%,-50%); padding: 85px 3% 30px; background: #fff url(//gscdn.hackers.co.kr/hackerssabok_m/img/main/ico_bang.png)no-repeat center 25px; background-size: 45px; } .m_pop_wrap .in_wrap.ty, .m_pop_wrap .in_wrap.play { padding-top:70px; } .m_pop_wrap .in_wrap strong { display:block; font-size:16px; text-align:center; } .m_pop_wrap .in_wrap ol { padding:5% 0; } .m_pop_wrap .in_wrap ol li { line-height:1.6; text-align:center; } .m_pop_wrap .in_wrap ol li:first-child { margin-bottom:10px; } .m_pop_wrap .in_wrap .close_pop { position:absolute; top: 1rem; right: 2rem; width: 3vw; } .m_pop_wrap .books_btn ul { overflow:hidden; width:100%; } .m_pop_wrap .books_btn li { float:left; width:100%; padding-top:0; } .m_pop_wrap .books_btn li:first-child { float:left; } .m_pop_wrap .books_btn .col2 li { width:49%; float:right; } .m_pop_wrap .books_btn .col2 li:first-child { float:left; } .m_pop_wrap .books_btn .black_btn { display:block; text-align:center; background: #EFF3FC; color: #3b63d8; font-size:15px; border:1px solid #414141; line-height:35px; border-radius:4px; font-weight:bold; width:100%; box-sizing: border-box; } .m_pop_wrap .books_btn .white_btn { display:block; text-align:center; background:none; color:#787878; font-size:15px; border:1px solid #919191; line-height:35px; border-radius:4px; font-weight:bold; width:100%; box-sizing: border-box; } .voucher_pop { display: none; } .voucher_pop.active { display: block; } .voucher_pop.popup .pop_inner { left: 50%; bottom: 30%; transform: translateX(-50%); width: 90%; border-radius: 1.75rem; padding: 10% 5%; } .voucher_pop.popup .pop_inner a.close { position: absolute; top: 2rem; right: 2rem; } .voucher_pop.popup .pop_inner a.close::before, .voucher_pop.popup .pop_inner a.close::after { content:''; display:block; width:100%; height:1px; background:rgba(0,0,0,0.7); position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(45deg); } .voucher_pop.popup .pop_inner a.close::after { transform: translate(-50%,-50%) rotate(-45deg); } .voucher_pop .voucher_wrap { width: 100%;; } .voucher_pop .voucher_wrap .icon_wrap { width: 24%; margin: 0 auto 5%; display: block; } .voucher_pop .voucher_wrap p { font-size: 1.15rem; font-weight: 600; line-height: 1.75rem; margin-bottom: 5%; text-align: center; } .voucher_pop .voucher_wrap p:nth-of-type(1) { font-size: 1.35rem; } .voucher_pop .voucher_wrap a { color: #3b63d8; font-size: 1.45rem; font-weight: 700; line-height: 1.75rem; text-align: center; display: block; text-decoration: underline; } .voucher_pop .voucher_wrap .icon_wrap img { width: 100%; } /* 이벤트 페이지 */ .event_wrap { width:100%; margin:0; padding:0; overflow:hidden; } .event_wrap img { width:100%; vertical-align: top; } .event_wrap > div > a { display:block; width:100%; } /* 근거 문구 */ .reason { position: absolute; width:95%; top:95%; left:50%; padding: 5%; box-sizing: border-box; background:rgba(0,0,0,0.85); color:#fff; text-align: left; border-radius: 1rem; font-size:0.95rem; line-height: 1.5rem; letter-spacing: -0.04em; display:none; transform: translateX(-50%); z-index: 9999; } .reason.active { display:block; } .reason .close { position: absolute; width:4vw; height:4vw; top:4%; right:1.5%; cursor: pointer; } .reason .close::before, .reason .close::after { content:''; display:block; width:100%; height:1px; background:rgba(255,255,255,0.7); position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(45deg); } .reason .close::after { transform: translate(-50%,-50%) rotate(-45deg); } /* 선생님 탭 */ .tab_area.teacher_tab .tab_btn { display: flex; justify-content: center; gap: 1%; align-items: center; width: 90%; margin: 0 auto; flex-wrap: wrap; } .tab_area.teacher_tab .tab_btn li { width: 23.5%; margin-bottom: 3%; } .tab_area.teacher_tab .tab_btn li a { display: block; width: 100%; text-align: center; padding: 11% 0; font-size: 1.45rem; font-weight: 500; color: #9c9797; background: #fff; border: 1px solid #9c9797; border-radius: 2.15rem; } .tab_area.teacher_tab .tab_btn li a.active { background: #5047cf; color:#fff; font-weight: 700; border-color: #5047cf; } /* 미디어 쿼리 */ @media all and (min-width: 768px) and (max-width: 1024px) { html { font-size: 14px; } /* 태블릿용 레이아웃 조정 */ .lecture_main, .teacher_main, .books_main { display: flex; flex-wrap: wrap; justify-content: space-between; } .lecture_main .lecture_package, .teacher_main .teacher_area, .books_main .book_info_wrap { width: 48%; margin-bottom: 4%; } /* 그리드 레이아웃 적용 */ .myclass_list_wrap .class_list_con.active { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* 폼 요소 크기 조정 */ input[type="text"], input[type="email"], select, textarea { font-size: 16px; /* iOS에서 자동 확대 방지 */ } /* 버튼 크기 및 여백 조정 */ .btn_wrap a, .lecture_appliy_pop .btn_wrap a { padding: 3% 0; font-size: 1.2rem; } .pop_inner { max-width: 600px; } } @media all and (min-width:940px) { html { font-size: 16px } .lecture_main { display: flex; justify-content: center; gap: 2%; flex-wrap: wrap; } .lecture_main .lecture_package { width: 44%; margin: 5% 0; } .lecture_main .lecture_package .info_top .left { width: 65%; } .lecture_main .lecture_package .info_top .icon_wrap { width: 35%; } .lecture_main .lecture_package .info h5 { font-size: 1.5rem; } .lecture_main .lecture_package .info_top .left a { font-size: 1.35rem; } .teacher_main { display: flex; justify-content: center; gap: 2%; flex-wrap: wrap; } .teacher_main .teacher_area { width: 44%; margin: 5% 0; } .books_main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .books_main .book_info_wrap { width: 45%; } .books_main .slider_area { height: 39rem; } .books_main .slider_area .slide_box { top:18%; width: 100%; } .review_list_wrap table tr td:nth-of-type(2) b { left: 70% } .myclass_list_wrap .class_list_con.active { display: flex; flex-wrap: wrap; justify-self: center; gap: 2%; align-items: center; } .myclass_list_wrap .class_list_con > li { width: 48%; } } @media all and (max-width:750px) { html { font-size: 16px } .review_list_wrap table tr td:nth-of-type(2) b { left: 80% } .books_main .slider_area { height: 32rem; } .books_main .slider_area .slide_box { top:20%; width: 120%; } } @media all and (max-width:620px) { html { font-size: 15px; } .review_list_wrap table tr td:nth-of-type(2) b { left: 85% } } @media all and (max-width:520px) { html { font-size: 13px; } .review_list_wrap table tr td:nth-of-type(2) b { left: 90% } } @media all and (max-width:460px) { html { font-size: 12px; } } @media all and (max-width:360px) { html { font-size: 11px; } } } @media all and (max-width:360px) { html { font-size: 11px; } }