@charset "utf-8";
/* CSS Document */
/* fc__* 는 기능용. 스타일 넣지 말것. */
/* 전체 공용 */
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
.nscroll { overflow: hidden; }
#XP_box { position:fixed; top: 50%; left: 50%; transform: translate( -50%, -50%); display: none; border-radius: var(--radius-out); padding: 40px; width: 410px; max-width: 90%; max-height: 50vh; z-index: 99999; background-color: #ff4343; }
.XP_noti { font-size: 14px; color: #fff; word-break: keep-all; word-wrap: break-word; }
.XP_noti_head { margin: 0 0 20px 0; font-size: 18px; font-weight: 700; }
#layoutMain { container-type: inline-size; }
#layoutContainer:after { content: " "; display: block; clear: both; float: none; }
svg { fill: currentColor; }
/* Mobile Device */
@media (max-width : 767px) {
#wrap { background-color: var(--color-emp-wt); min-width: initial !important; }
/* M 임시 */
#layoutContainerTop,
#layoutLeft,
#layoutRight,
#layoutContainerBottom,
.widget_ui-title { display: none; }
#layoutContainer { width: 100% !important; }
#layoutContainer #layoutMain { width: 100% !important; float: none!important; }
/* M 전체공용 */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: var(--theme-font), sans-serif; }
.hdbx { display: none !important; }
.CBX { font-family: var(--theme-font), sans-serif; color: var(--color-normal); font-size: var(--font-m); font-weight: 500; }
/* M 글자 */
/* M 크기, 굵기 */
.t-h1 { margin: 0 var(--m-gap) 20px; font-size: 40px; font-weight: 700; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.t-h2 { margin: 0 var(--m-gap) 20px; font-size: 30px; font-weight: 600; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.t-h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.t-h4 { margin: 0; font-size: 18px; font-weight: 500; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.t-prd { margin: 0; padding: 0; font-size: var(--font-l); font-weight: 500; color: var(--color-emp-bk); word-break: keep-all; word-wrap: break-word; }
.lecname_title { margin: 0; padding: 0; font-size: 20px; font-weight: 500; color: var(--color-theme); line-height: 120%; }
.lecname_subtit { margin: 0; padding: 0; font-weight: 600; line-height: 120%; font-size: var(--font-l); }
/* M 색상 */
.v-n { color: inherit; }
.v-mk1 { border: 1px solid var(--color-theme); color: var(--color-emp-wt); background-color: var(--color-theme); }
.v-mk2 { border: 1px solid var(--color-theme); color: var(--color-theme); background-color: var(--color-emp-wt); }
.v-bs1 { border: 1px solid var(--color-normal); color: var(--color-normal); background-color: var(--color-emp-wt); }
.v-bs2 { border: 1px solid var(--color-line); color: var(--color-unfocus); background-color: var(--color-emp-wt); }
.v-sd1 { border: 1px solid var(--color-unfocus); color: var(--color-bg02); background-color: var(--color-unfocus); }
.v-sd2 { border: 1px solid var(--color-line); color: var(--color-normal); background-color: var(--color-line); }
.v-pl1 { color: var(--color-unfocus); }
/* 특정 색상 */
.v-naverbtn { color: var(--color-emp-wt); background-color: #03C75A; }
/* M 버튼 기본 */
.mybtn { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; border-radius: var(--radius-in); margin: 2px 0; max-width: 100%; text-decoration: none; line-height: 100%; font-weight: 400; cursor: pointer; font-family: var(--theme-font-family); text-align: center; word-break: keep-all; word-wrap: break-word; }
/* M 버튼 크기 */
.mybtn-l { padding: 15px; font-size: var(--font-l); }
.mybtn-m { padding: 9px; font-size: var(--font-m); }
.mybtn-s { padding: 6px; font-size: var(--font-s); font-weight: 400; }
.mybtn-xs { padding: 2px 4px; font-size: var(--font-xs); font-weight: 400; word-break: break-all; }
/* M 버튼 길이 */
.mybtn-fx { width: 440px; max-width: 100%; text-align: center; box-shadow: 0 5px 10px 0 rgba( 0, 0, 0, 0.15); }
.mybtn-fl { width: 100%; text-align: center; }
/* M 버튼 심볼 */
.mybtn-i { width: 26px; height: 26px; text-align: center; line-height: 25px; vertical-align: middle; font-size: var(--font-m); overflow: hidden; }
.mybtn-i:before { font-family: var(--font-symbol); font-weight: var(--fa-style, 900); }
/* M 버튼 박스 */
.mybtn-cbx { text-align: center; }
/* M 버튼 선택 */
.mybtn.mybtn-on { border: 1px solid var(--color-theme); color: var(--color-theme); background-color: var(--color-emp-wt); }
/* M 버튼 컨테이너 */
.btnbx { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0 var(--m-gap) var(--m-gap); }
/* M 링크 */
.mylk1 { text-decoration: none; color: var(--color-normal); cursor: pointer; }
.mylk2 { text-decoration: none; color: var(--color-theme); cursor: pointer; word-break: keep-all; word-wrap: break-word; }
.link-in { text-decoration: none; cursor: pointer;}
.link-in:after { content: "\276F"; padding-left: 4px; color: var(--color-unfocus); }
.link-back { text-decoration: none; cursor: pointer;}
.link-back:before { content: "\276E"; padding-right: 4px; color: var(--color-unfocus); }
/* M 심볼, 기호 */
.i-icon:before { font-family: var(--font-symbol); font-weight: var(--fa-style, 900); }
.i-list:before { content: "\f00b"; }
.i-thmb:before { content: "\f0ce"; }
.i-scrp:before { content: "\f65e"; }
.i-cart:before { content: "\f07a"; }
.i-star:before { content: "\f005"; padding-right: 4px; }
.i-close:before,
.i-del:before {content: "\2b"; display: inline-block; transform: rotate(45deg); line-height: 100%; }
.i-ms:before { content: "\2013"; }
.i-pl:before { content: "\2b"; }
/* M 심볼, 기호 - 페이징 */
.i-prev:before { content: ""; border: 6px solid transparent; border-left: 0px solid var(--color-unfocus); border-right: 10px solid var(--color-unfocus); }
.i-prev2:before { content: ""; border: 6px solid transparent; border-left: 0px solid var(--color-unfocus); border-right: 10px solid var(--color-unfocus); }
.i-prev2:after { content: ""; border: 6px solid transparent; border-left: 0px solid var(--color-unfocus); border-right: 10px solid var(--color-unfocus); }
.i-next:before { content: ""; border: 6px solid transparent; border-left: 10px solid var(--color-unfocus); border-right: 0px solid var(--color-unfocus); }
.i-next2:before { content: ""; border: 6px solid transparent; border-left: 10px solid var(--color-unfocus); border-right: 0px solid var(--color-unfocus); }
.i-next2:after { content: ""; border: 6px solid transparent; border-left: 10px solid var(--color-unfocus); border-right: 0px solid var(--color-unfocus); }
/* M 심볼, 기호 - 평점, 난이도 용 */
.i-star1:before { content: "\2605\2606\2606\2606\2606"; }
.i-star2:before { content: "\2605\2605\2606\2606\2606"; }
.i-star3:before { content: "\2605\2605\2605\2606\2606"; }
.i-star4:before { content: "\2605\2605\2605\2605\2606"; }
.i-star5:before { content: "\2605\2605\2605\2605\2605"; }
/* M 아이콘 - svg */
.iconbx { display: inline-flex; color: var(--color-unfocus); }
.iconbx-on { color: var(--color-theme); }
.icon_caution > svg { width: 50px; height: 50px; }
.icon_play { width: 14px; height: 15px; }
.icon_scrap { width: 14px; height: 13px; }
.icon_subs { width: 16px; height: 18px; fill: }
/* M 레이블 */
.mylb {display: inline-flex; justify-content: center; align-items: center; border-radius: 9px; padding: 1px 6px; height: 18px; line-height: 100%; font-size: var(--font-s); word-break: break-all; }
.mylb2 {display: inline-block; border-radius: var(--radius-in); line-height: 100%; }
.lb-lec { border: 1px solid var(--color-theme); color: var(--color-theme); }
.lb-bok { border: 1px solid var(--color-devided); }
.lb-mlg {}
.lb-range { background-color: var(--color-unfocus); font-size: var(--font-xs); color: var(--color-bg02); }
.lb-agreedate { gap: 3px; color: var(--color-theme); font-weight: 400; }
.lb-agreedate:after { content: " 변경"; }
.lb-uploaded {}
/* M 뱃지 */
.bdg {display: inline-block; border-radius: 13px; width: 26px; height: 26px; line-height: 26px; text-align: center; vertical-align: middle; font-size: var(--font-l); }
/* M 태그 */
.htag { position: relative; display: inline-block; padding: 4px 1em; color: var(--color-theme); font-size: var(--font-s); }
.htag:before { content: "#"; padding-right: 4px; }
.htag:after { content: " "; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; border-radius: 2em; background-color: var(--color-theme); opacity: 0.1; }
/* M 가격 표시 (원단위 붙음)*/
.prc-cur { font-weight: 600; color: var(--color-emp-bk); }
.prc-org { font-weight: 300; text-decoration: line-through; color: var(--color-unfocus); }
.prc-mlg { color: var(--color-theme); }
.prc-mlg:before { content: "+"; padding-right: 2px; }
/* M 가격 표시 (원단위 안 붙음) */
.t-prc { font-weight: 600; }
/* M 강조설명, 보조설명 문장 */
.p-emp { margin: 0; font-size: 0.9em; color: var(--color-theme); }
.p-des { margin: 0; line-height: 1.5em; font-size: 0.9em; color: var(--color-unfocus); }
.vsum_btn > .p-des { padding-top: 0.5em; text-align: center; }
/* M 강조 단어 */
.t-empc { color: var(--color-theme); }
.t-empb { color: var(--color-emp-bk); }
.t-empw { font-weight: 600; }
.t-mark { background-color: antiquewhite; }
/* M 필수 입력 */
.t-ncs:after { content: "\002A"; padding-left: 2px; color: var(--color-theme); font-weight: 600; }
/* M 차감, 적립
.t-ded:before { content: "-"; padding-right: 2px; }
.t-acc:before { content: "+"; padding-right: 2px; }*/
/* M 단위 */
.t-val + .t-unit { padding-left: 2px; }
.t-unit + .t-val { padding-left: 2px; }
/* M 활성, 비활성 */
.t-ing { color: var(--color-emp-bk); }
.t-end { color: var(--color-unfocus); }
/* M 표기 제목 - 값 */
.t-sbj { margin: 0; padding: 0; font-size: 0.85em; font-weight: 400; color: var(--color-unfocus); }
.t-sbjv { margin: 0; padding: 0; font-weight: 600; color: var(--color-emp-bk); }
/* M 단위
.t-per:after { content: "%"; padding-left: 2px; }
.t-qnt:after { content: "개"; padding-left: 2px; }
.t-won:after { content: "원"; padding-left: 2px; }
.t-scr:after { content: "점"; padding-left: 2px; } */
/* M 비밀번호 검증 */
.myif_pw_msg:before { display: block; margin-top: 4px; color: var(--color-theme); }
.pw_bad:before { content:"사용불가"; color: #ff5850; }
.pw_normal:before { content:"보통"; }
.pw_good:before { content:"안전"; }
.pw_avl:before { content:"일치"; }
.pw_unavl:before { content:"불일치"; color: #ff5850; }
/* M 구분 */
.unit-bars { display: flex; flex-wrap: wrap; align-items: center; }
.unit-bar { line-height: 100%; }
.unit-bar + .unit-bar { margin-left: 10px; padding-left: 10px; border-left: 2px solid var(--color-line); }
/* M 기본 문장 */
.p-emt { margin: 0; padding: 0; }
.brd_val .p-emt { flex: 1 1 100%; }
/* M 탭메뉴 - 기록보기, 적립금 등 */
.tlnb { display: grid; grid-template-columns: repeat( auto-fill, minmax( 30%, auto)); gap: 6px; border-top: 1px dashed var(--color-line); padding: var(--m-gap); }
.tlnb_a { border-radius: 25px; padding: 6px 1.4em; text-decoration: none; text-align: center; color: var(--color-normal); background-color: var(--color-bg01); transition: .2s; }
.tlnb_a.tlnb_on { color: var(--color-emp-wt); background-color: var(--color-theme); }
.tlnb_a:hover { color: var(--color-emp-wt); background-color: var(--color-theme); cursor: pointer; }
/* M 인풋
-----------------------------------------------------------------------------------------------------------------------------------------*/
/* M 인풋 사이즈 */
.ip-fl { width: 100%; }
.ip-l { width: 20em; }
.ip-m { width: 12em; }
.ip-s { width: 8em; }
.ip-n { width: 5em; text-align: center; }
.ip-n { width: 5em; text-align: center; }
.ip-d { width: 8em; text-align: center; }
/* M 인풋 텍스트 */
.ip-txt { border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 2px; padding: 10px 8px; max-width: calc( 100% - 4px ); background-color: var(--color-bg02); font-size: var(--font-m); }
.ip-txt::placeholder { color: var(--color-unfocus); }
.ip-txt:focus { outline: 1px solid var(--color-devided); }
/* 인풋 비활성화 */
.ip-txtnot { color: var(--color-unfocus); background-color: var(--color-line); }
.ip-txtnot:focus { outline: none; }
/* M 인풋 텍스트 입력값별 */
.otl_bad:focus,
.otl_unavl:focus { outline: 2px solid var(--color-emp); }
.otl_normal:focus,
.otl_good:focus,
.otl_avl:focus { outline: 2px solid var(--color-theme); }
/* M 인풋 셀렉트 */
.ip-sel { border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 2px; padding: 9px 8px 8px; max-width: calc( 100% - 4px ); background-color: var(--color-bg02); font-family: var(--theme-font-family); font-size: var(--font-m); cursor: pointer; }
/* M 인풋 파일 */
.ip-file { border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 2px; padding: 5px; max-width: calc( 100% - 4px ); background-color: var(--color-bg02); font-size: var(--font-m); }
.ip-file_uploaded { display: flex; align-items: center; gap: 10px; padding: 5px; font-size: var(--font-s); }
.ip-file_uploaded > a { text-decoration: none; color: var(--color-normal); }
/* M 인풋 컨테이너 */
.ips-container { display: flex; gap: 4px; align-items: center; width: 100%; }
.ips-container .ip-txt { width: 100%; }
/* M 체크박스 label(ip, bx, sp) */
.chklb { display: inline-flex; align-items: center; cursor: pointer; word-break: keep-all; word-wrap: break-word; vertical-align: middle; }
.chklb_ip { width: 0; height: 0; opacity: 0; }
.chklb_bx { flex: 0 0 20px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: var(--radius-out); width: 20px; height: 20px; }
.chklb_bx:before { content: " "; font-family: var(--font-symbol); font-size: var(--font-s); font-weight: var(--fa-style, 900); color: var(--color-emp-wt); line-height: 100%; }
.chklb_sp { padding-left: 6px; flex: 1 0; }
.chklb_ip:focus + .chklb_bx { border: 2px solid var( --color-theme); }
.chklb_ip:checked + .chklb_bx { border-color: var( --color-theme); background-color: var( --color-theme); transition: all .3s; }
.chklb_ip:checked + .chklb_bx:before { content: "\f00c"; }
.chklb_ip:checked + .chklb_bx + .chklb_sp { color: var( --color-theme); font-weight: 600; }
/* M 체크박스 버튼형(ip, bx, sp) */
.chkbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; word-break: keep-all; word-wrap: break-word; vertical-align: middle; }
.chkbtn_ip { width: 0; height: 0; opacity: 0; }
.chkbtn_btn { display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: var(--radius-out); padding: 7px 8px; cursor: pointer; color: var( --color-normal); }
.chkbtn_ip:focus + .chkbtn_btn { border-width: 3px; }
.chkbtn_ip:checked + .chkbtn_btn { border-color: var( --color-theme); color: var( --color-theme); font-weight: 600; }
/* M 라디오버튼 label(ip, bx, sp) */
.rdolb { display: inline-flex; align-items: center; cursor: pointer; word-break: keep-all; word-wrap: break-word; vertical-align: middle; }
.rdolb_ip { width: 0; height: 0; opacity: 0; }
.rdolb_bx { flex: 0 0 20px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: 10px; width: 20px; height: 20px; }
.rdolb_bx:before { content: " "; border-radius: var(--radius-out); width: 10px; height: 10px; background-color: transparent; line-height: 100%; }
.rdolb_sp { padding-left: 6px; flex: 1 0; }
.rdolb_ip:focus + .rdolb_bx { border-width: 3px; }
.rdolb_ip:checked + .rdolb_bx { border-color: var( --color-theme); }
.rdolb_ip:checked + .rdolb_bx:before { background-color: var(--color-theme); }
.rdolb_ip:checked + .rdolb_bx + .rdolb_sp { color: var(--color-theme); font-weight: 600; }
/* M 라디오버튼 버튼형 */
.rdobtn { display: block; }
.rdobtn_ip { width: 0; height: 0; opacity: 0; }
.rdobtn_btn { display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: var(--radius-out); padding: 4px 10px; height: 50px; cursor: pointer; color: var( --color-normal); }
.rdobtn_ip:focus + .rdobtn_btn { border-width: 3px; }
.rdobtn_ip:checked + .rdobtn_btn { border-color: var( --color-theme); color: var( --color-theme); font-weight: 600; }
/* M 라디오버튼 리스트형 */
.rdoli { display: grid; grid-template-columns: 0 auto 1fr auto; align-items: center; padding: 1em; }
.rdoli:hover { background-color: var(--color-bg02); cursor: pointer; }
.rdoli:has(.rdolb_ip:checked) { background-color: var(--color-bg01); }
.rdoli:has(.rdolb_ip:checked) .rdoli_sp { font-weight: 500; color: var( --color-theme); }
.rdoli_sp { padding: 0 10px; text-align: left; }
.rdoli_sp2 { text-align: right; }
/* M 라디오버튼 리스트형 컨테이너 */
.pickli{ overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 0; padding: 0; list-style: none; }
/* M 라디오버튼 옆 삭제 버튼 */
.rdolb + .mybtn-i { margin-left: .1em; width: 20px; height: 20px; }
/* M 팝업 */
.mdbx { transform: translate( -50%, -50% ); position: fixed; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: var(--m-gap); width: clamp( 300px, 660px, 90vw); border-radius: var(--radius-big); background-color: #fff; z-index: 100; font-family: var(--theme-font), sans-serif; }
.mdbx_head {flex: 0 0 auto; display: flex; justify-content: space-between; font-size: var(--font-l); }
.mdbx_head_title { font-weight: 600; }
.mdbx_head_close { padding-left: 20px; cursor: pointer; }
.mdbx_body { overflow-y: auto; margin-right: -4px; padding: 1em 10px 1em 0; min-height: 100px; max-height: 60vh; text-align: left; }
.mdbx_body::-webkit-scrollbar { width: 4px; }
.mdbx_body::-webkit-scrollbar-thumb { background-color: var(--color-theme); border-radius: 4px; }
.mdbx_body::-webkit-scrollbar-track { background-color: var(--color-unfocus); border-radius: 4px; box-shadow: none; }
.mdbx_desc { margin-bottom: 16px; word-break: keep-all; word-wrap: break-word; }
.mdbx_foot {flex: 0 0 50px; text-align: center; }
/* M 마이페이지 로컬메뉴 */
.mplnb { display: flex; gap: 1em; margin-bottom: 2em; padding: var(--m-gap); width: 100%; overflow-x: scroll; scroll-snap-type: x mandatory; }
.mplnb_a { display: flex; align-items: center; gap: .5em; padding: .2em; text-decoration: none; color: var(--color-normal); white-space: nowrap; scroll-snap-align: start; scroll-margin: 0 var(--m-gap); }
.mplnb_a:before { content: " "; flex: 0 0 4px; border-radius: 2px; height: 4px; background-color: var(--color-normal); }
/* M 날짜 검색 */
.schbx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 20px; background-color: var(--color-bg01); }
.schbx_btns { display: flex; gap: 6px; align-items: center; width: 100%; }
.schbx_btns > .mybtn { flex: 1 1 max-content; }
.schbx_input { flex: 1 1; display: flex; gap: 4px; align-items: center; }
.schbx_input > .ip-d { margin: 2px 0; width: 100%; }
/* M 인풋 수량 */
.qtbx { display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 0; height: auto; }
.qtbxl { font-size: var(--font-l); }
.qtbxm { font-size: var(--font-m); }
.qtbx_c { padding: 6px 12px; color: var(--color-unfocus); }
.qtbx_n { font-weight: 600; color: var(--color-emp-bk); }
/* M 테이블 설명, 컨트롤 */
.brdcap { display: grid; grid-template-columns: 100%; align-items: center; gap: 10px; margin: var(--m-gap); word-break: keep-all; word-wrap: break-word; }
.brdcap_r { }
.brdfnc { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 16px 20px; word-break: keep-all; word-wrap: break-word; }
.brdfnc_r { flex: 1 1 auto; text-align: right; }
/* M 테이블 공통 */
.brd_br { padding:0; border-bottom: 1px dashed var(--color-line); grid-column: 1/none; }
.brd_br2 { padding:0; border-bottom: 1px solid var(--color-line); grid-column: 1/none; }
.brd_mrg { grid-column: 1/none; padding: 30px 1em; text-align: center; }
/* M 섹션별 */
.brds { display: grid; gap: var(--m-gap); border-top: 1px solid var(--color-theme); padding: var(--m-gap); background-color: var(--color-bg01); }
.brd { position: relative; display: grid; grid-template-columns: 100%; border-radius: var(--radius-out); border: 1px solid var(--color-line); margin: 0; padding: calc( var(--m-gap) - 4px) 0 0; font-size: var(--font-m); line-height: 130%; background-color: #fff; }
.brd_hlighter:before { content: " "; position: absolute; inset: 0; background-color: var(--color-theme); opacity: .05; }
.brd_head { display: none; visibility: hidden; }
.brd_col { overflow: hidden; position: relative; display: flex; gap: var(--m-gap); margin: 4px 0; padding: 0 var(--m-gap); }
.brd_col:last-child { padding-bottom: calc( var(--m-gap) - 4px); }
.brd_title { grid-row: 1; border-bottom: 1px dashed var(--color-line); margin-bottom: var(--m-gap); padding: 0 var(--m-gap) var(--m-gap); }
.brd_title .brd_sbj { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.brd_title .brd_val { flex: 1; font-size: var(--font-l); font-weight: 600; color: var(--color-emp-bk); line-height: 130%; }
.brd_btns { padding-top: var(--m-gap); }
.brd_btns .brd_sbj { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.brd_btns .brd_val { flex: 1 1; display: flex; gap: 4px; flex-wrap: wrap; }
.brd_btns .mybtn { flex: 1 1 90px; }
.brd_sbj { flex: 0 0 3.4em; margin: 0; padding: 0; word-break: keep-all; word-wrap: break-word; color: var(--color-unfocus); font-weight: 400; }
.brd_val { flex: 1; margin: 0; padding: 0; word-break: keep-all; word-wrap: break-word; font-weight: 500; }
.brd_dt { margin: 0; padding: 14px; background-color: var(--color-bg01); }
.brd_dd { margin: 0; padding: 14px; word-break: keep-all; word-wrap: break-word; }
.brd_unfocus { background-color: var(--color-bg02); }
.brd_unfocus .brd_sbj,
.brd_unfocus .brd_val { color: var(--color-unfocus); }
.brd_unfocus .mylb { opacity: .5; }
.brd_unfocus .prc-cur { color: inherit; }
/* M 테이블 가로형*/
.hbrd { display: grid; grid-template-columns: 100%; align-items: center; border-top: 1px solid var(--color-theme); padding: 0 var(--m-gap); font-size: var(--font-m); }
.hbrd_th { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px 1em; height: 100%; text-align: center; font-weight: 600; background-color: var(--color-bg02); word-break: keep-all; word-wrap: break-word; }
.hbrd_td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); padding: 2px var(--m-gap); word-break: keep-all; word-wrap: break-word; }
.hbrd_td:before { font-weight: 600; }
/* M 테이블 가로형 - 스키니 */
.hbrd2 { display: grid; align-items: center; border-top: 1px solid var(--color-line); font-size: var(--font-s); }
.hbrd2_th {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0.3em 0.6em; height: 100%; text-align: center; font-weight: 600; background-color: var(--color-bg02); word-break: keep-all; word-wrap: break-word; line-height: 120%; }
.hbrd2_td { padding: 0.6em; word-break: keep-all; word-wrap: break-word; text-align: center; overflow: hidden; line-height: 120%; }
/* M 테이블 세로형 */
.vbrd { display: grid; align-items: center; border-top: 1px solid var(--color-devided); font-size: var(--font-s); }
.vbrd_th { padding: 14px 8px 14px var(--m-gap); font-weight: 600; word-break: keep-all; word-wrap: break-word; }
.vbrd_td { padding: 14px var(--m-gap) 14px 8px; word-break: keep-all; word-wrap: break-word; line-height: 1.6em; overflow: hidden; }
/* M only 테이블 */
.mbrd > .brd_br { display: none; }
.mbrd_fst { border-radius: 5px 5px 0 0; border-top: 1px solid var(--color-line); border-bottom: 1px dashed var(--color-line); margin-top: var(--m-gap); padding: var(--m-gap); }
.mbrd_fst + .hbrd_td { padding-top: var(--m-gap); }
.mbrd_lst { border-radius: 0 0 5px 5px; border-bottom: 1px solid var(--color-line); padding-bottom: var(--m-gap); }
.mbrd_gap { padding-top: var(--m-gap); }
/* M 영수증-가로형 */
.hsum .t-h4 { font-size: 16px; }
/* M 상품소개 */
.hprdbx { display: flex; gap: 20px; max-width: 100%; } /* 리스트형 */
.vprdbx { min-width: 280px; max-width: 100%; } /* 썸네일형 */
.hprdbx .thumb { text-align: center; flex: 0 0 min(120px, 20%); }
.vprdbx .thumb { margin-bottom: 16px; }
.checks { flex : 0 0 20px; }
.thumb { margin: 0; padding: 0; }
.thumb_img { width: auto; max-height: 74vw; max-width: 100%; }
.item { flex: 1 1 auto; text-align: left; word-break: keep-all; word-wrap: break-word; }
.item_icons { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 0; padding: 0; }
.item_icons > span { flex: 0 0 auto; margin-bottom: 4px; }
.item_icon { line-height: 100%; }
.item_name { margin: 0; padding: 0; text-decoration: none; font-size: var(--font-l); font-weight: 600; color: var(--color-emp-bk); word-break: keep-all; word-wrap: break-word; line-height: 140%; }
.item_infos { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 8px; font-size: var(--font-s); }
.item_info { display: flex; align-items: center; min-height: 22px; line-height: 100%; }
.item_details { margin-top: 4px; }
.item_details .item_info + .item_info:before { content:"\00B7"; padding-right: 8px; }
.item_prcinfo { margin-top: 14px; }
.item_periods { margin-top: 4px; }
.item_prc { margin: 0; padding: 0; font-size: var(--font-l); }
.item_discount { border-radius: 10px; padding: 1px 8px; font-weight: 500; background-color: var(--color-bg01); }
.item_discount:before { content: "-"; padding-right: 2px; }
.item_prc + .item_mlg:before { content: " "; padding-right: 8px; height: 12px; border-left: 1px solid var(--color-line); }
.item_preview { margin-top: 14px; }
/* M 쿠폰 */
.cpnbx { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-out); min-width: 200px; max-width: 100%; word-break: keep-all; word-wrap: break-word; font-size: var(--font-s); color: var(--font-normal); text-align: left; background-color: var(--color-emp-wt); }
.cpnbx_head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; height: 34px; background-color: var(--color-bg02); color: var(--color-unfocus) }
.cpnbx_info { font-size: 13px; }
.cpnbx_seq:before { content: "개별상품"; }
.cpnbx_seq[seq="0"]:before { content: "장바구니"; }
.cpnbx_type[type="0"]:before { content: " "; }
.cpnbx_type[type="1"]:before { content: " / 강좌전용"; }
.cpnbx_type[type="2"]:before { content: " / 교재전용"; }
.cpnbx_body { display: flex; flex-direction: column; gap: 4px; padding: 16px; line-height: 140%; }
.cpnbx_desc { display: flex; gap: 4px; }
.cpnbx_sbj { flex: 0 0 50px; display: flex; align-items: center; height: fit-content; font-size: 12px; font-weight: 600; color: var(--color-unfocus); }
.cpnbx_val { font-weight: 500; }
.cpnbx_tk { height: calc( 100% - 86px ); }
.cpnbx_offs { margin: 0 0 10px; padding: 0; font-size: 20px; font-weight: 600; letter-spacing: -1px; line-height: 130%; color: var(--color-theme) }
.cpnbx_vlid > .cpnbx_val { font-weight: 600; color: var(--color-emp-bk); }
.cpnbx_apply { padding: 0 16px 16px; height: 52px; }
.cpnon { border-color: var(--color-theme); }
.cpnon .cpnbx_head { background-color: var(--color-theme); color: var(--color-emp-wt) }
.cpnpic { position: relative; cursor: pointer; }
.cpnpic + .cpnpic { margin-top: 10px; }
.cpnpic_btn { position: absolute; inset: 0; z-index: 1; }
/* M 영수증 - 장바구니, 결제, 결제상세 */
.vsum { border-top: 1px solid var(--color-line); padding: var(--m-gap); background-color: var(--color-bg01); }
.vsum_tit { margin: 0; text-align: center; font-size: 20px; }
.vsum_lst { margin: 0; font-size: var(--font-s); }
.vsum_unit { display: flex; justify-content: space-between; align-content: flex-start; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 2px 0; }
.vsum_subtotal { margin: 18px 0; padding: 12px 0; border-top: 1px dashed var(--color-unfocus); border-bottom: 1px dashed var(--color-unfocus); }
.vsum_total { margin-top: 18px; padding: 12px 0 0; border-top: 1px solid var(--color-normal); font-weight: 600; }
.vsum_total .prc-cur { font-size: 20px; color: var(--color-theme); }
.vsum_subtotal + .vsum_total { margin-top: 0; padding-top: 0; border-top: none; }
.vsum_sbj { flex: 0 1 min(120px, 50%); display: flex; column-gap: 8px; align-items: center; }
.vsum_sbj:before { border-radius: 6px; width: 10px; height: 10px; line-height: 9px; background-color: var(--color-line); text-align: center; font-size: 12px; color: var(--color-normal); overflow: hidden; }
.vsum_add .vsum_sbj:before { content: "+"; }
.vsum_dis .vsum_sbj:before { content: "-"; }
.vsum_val { margin: 0; text-align: right; }
.vsum_desc { flex: 0 0 100%; margin: 0; padding-left: 18px; min-height: 14px; font-size: var(--font-xs); font-weight: 400; color: var(--color-unfocus); }
.vsum_mg { width: 100%; text-align: right; font-size: var(--font-s); font-weight: 400; color: var(--color-normal); }
.vsum_btn { margin-top: 16px; }
/* M 토글박스 */
.tglbx { border: 1px solid var(--color-line); border-radius: var(--radius-out); max-width: 100%; background-color: var(--color-bg02); }
.tglbx_head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; cursor: pointer; }
.tglbx_head:after { content: " "; border: 6px solid transparent; border-bottom: none; border-top: 10px solid var(--color-unfocus); transition: 0.3s; }
.tglbx_head.tglbx_on { background-color: var(--color-line); }
.tglbx_head.tglbx_on:after { transform: rotate(180deg); border-top-color: var(--color-normal); }
.tglbx_titl { margin: 0; padding: 0; word-break: keep-all; word-wrap: break-word; line-height: 130%; }
.tglbx_body { display: none; height: 0; transition: 0.2s; }
.tglbx_on + .tglbx_body { display: block; height: fit-content; }
/* M 병렬구조 리스트 */
.hul { list-style: none; display: inline-flex; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; }
.hul + .hul { margin-top: 4px; }
.hul_hgap { gap: 4px 20px; }
.hul_li { margin: 0; padding: 0; max-width: 100%; }
/* M 직렬구조 리스트 */
.vul { list-style: none; margin: 0; padding: 0; }
.vul_important + .vul_li { margin-top: 2px; }
.vul_li + .vul_important { margin-top: 2px; }
.vul_li:not(.vul_important) { font-size: var(--font-s); color: var(--color-unfocus); line-height: 150%; }
/* M 작업단계, 페이지단계, step */
.mysteps { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin: 0 16px 4vh; font-size: var(--font-m); counter-reset: steps; }
.mystep:before { content: counter(steps); flex: 0 0 1.4em; display: flex; justify-content: center; align-items: center; border-radius: 0.7em; width: 1.4em; height: 1.4em; background-color: var(--color-unfocus); color: var(--color-emp-wt); }
.mystep { display: flex; justify-content: flex-end; align-items: center; gap: 6px; counter-increment: steps; }
.mystep_cur:before { background-color: var(--color-theme); }
.mystep_cur { font-weight: 600; }
/* M 내용 요약, 브리프 */
.brf { display: grid; align-items: center; border-radius: var(--radius-out); }
.brf_u { display: flex; align-items: center; gap: 0 10px; z-index: 1; }
/* M 페이징 */
.pgctl_container { margin: 20px var(--m-gap); }
.pgctl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; margin: 0 auto; padding: 0; width: fit-content; list-style: none; }
.pgctl_btn { position: relative; display: flex; justify-content: center; align-items: center; border-radius: 20px; width: 30px; height: 30px; text-decoration: none; color: var(--color-normal); font-size: var(--font-m); font-weight: 500; line-height: 100%; letter-spacing: -1px; }
.pgctl_btn > svg { position: relative; width: 10px; height: 10px; fill: var(--color-normal); z-index: 2; }
.pgctl_btn_on { overflow: hidden; color: var(--color-theme); font-weight: 600; }
/* M 노티보드 */
.notibx { padding: var(--m-gap); font-size: var(--font-m); }
.notibx_head { font-size: var(--font-l); color: var(--color-emp-bk); font-weight: 600; }
.notibx_ul { margin: 0.5em 0 0; padding: 0; list-style: none; }
.notibx_li { position: relative; padding: .2em 0 .2em 0.6em; font-weight: 500; }
.notibx_li:before { content: " "; position: absolute; top: 0.8em; left: 0; border-radius: 2px; width: 3px; height: 3px; background-color: var(--color-normal); }
.notibx_dl { display: grid; grid-template-columns: 5em auto; align-items: center; }
.notibx_dt { position: relative; margin: 0; padding: .3em 0 .3em 0.6em; font-weight: 500; color: var(--color-emp-bk); }
.notibx_dt:before { content: " "; position: absolute; transform: translate( -50%, -50%); top: 50%; left: 0; border-radius: 2px; width: 3px; height: 3px; background-color: var(--color-normal); }
.notibx_dd { margin: 0; padding: 0; grid-column: 2/3; }
/* M 사용불가, 해지, 끝, 만료 */
.v-exped { filter: grayscale(100%); opacity: 0.5; pointer-events: none; font-weight: 300; }
/* M 모바일 웹 전환 버튼 */
.mobileweb_link { display: none; }
}
/* Desktop Device */
@media (min-width : 768px) {
/* 전체공용 */
* { box-sizing: border-box; }
body, ul, ol, p { margin: 0; padding: 0; }
.hdbx { display: none !important; }
h1.hdbx { position: absolute; display: block !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
#mpgs { padding-bottom: 40px; }
.CBX { box-sizing: border-box; padding: 10px 0 80px; min-height: 70vh; font-family: var(--theme-font), sans-serif; color: var(--color-normal); font-size: var(--font-m); font-weight: 400; }
/* 글자 */
/* 크기, 굵기 */
.t-h1 { margin-bottom: 20px; font-size: 50px; font-weight: 700; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.t-h2 { margin: 1.2em 0 0.8em 0; font-size: 38px; font-weight: 600; line-height: 120%; letter-spacing: -.015em; word-break: keep-all; word-wrap: break-word; }
.t-h3 { margin: 0; font-size: 28px; font-weight: 500; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.t-h4 { margin: 0; font-size: 20px; font-weight: 500; line-height: 120%; word-break: keep-all; word-wrap: break-word; }
.lecname_title { margin: 0; padding: 0; font-size: 26px; font-weight: 500; color: var(--color-theme); line-height: 130%; } /* h3, h4 관계없이 상품명 쓸 때 사용 */
.lecname_subtit { margin: 0; padding: 0; font-weight: 600; line-height: 120%; }
.t-prd { margin: 0; padding: 0; font-size: var(--font-l); font-weight: 500; color: var(--color-emp-bk); word-break: keep-all; word-wrap: break-word; }
/* 색상 */
.v-n { color: inherit; }
.v-mk1 { border: 1px solid var(--color-theme); color: var(--color-emp-wt); background-color: var(--color-theme); }
.v-mk2 { border: 1px solid var(--color-theme); color: var(--color-theme); background-color: var(--color-emp-wt); }
.v-bs1 { border: 1px solid var(--color-normal); color: var(--color-normal); background-color: var(--color-emp-wt); }
.v-bs2 { border: 1px solid var(--color-line); color: var(--color-unfocus); background-color: var(--color-emp-wt); }
.v-sd1 { border: 1px solid var(--color-unfocus); color: var(--color-bg02); background-color: var(--color-unfocus); }
.v-sd2 { border: 1px solid var(--color-line); color: var(--color-normal); background-color: var(--color-line); }
.v-pl1 { color: var(--color-unfocus); }
/* 특정 색상 */
.v-naverbtn { color: var(--color-emp-wt); background-color: #03C75A; }
/* 버튼 기본 */
.mybtn { display: inline-flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; border-radius: var(--radius-in); margin: 2px 0; max-width: 100%; text-decoration: none; line-height: 100%; font-weight: 400; cursor: pointer; transition: .2s; font-family: var(--theme-font-family); text-align: center; word-break: keep-all; word-wrap: break-word; }
.mybtn:hover { border-color: var(--color-devided); background-color: var(--color-devided); color: var(--color-emp-wt); box-shadow: none; }
.mybtn-deact { cursor: none; transition: none; pointer-events: none; }
/* 버튼 크기 */
.mybtn-l { padding: 15px; font-size: var(--font-l); }
.mybtn-m { padding: 2px 9px; height: 36px; font-size: var(--font-m); }
.mybtn-s { padding: 6px; font-size: var(--font-s); font-weight: 400; }
.mybtn-xs { padding: 4px; font-size: var(--font-xs); font-weight: 400; }
/* 버튼 길이 */
.mybtn-fx { width: 440px; max-width: 100%; text-align: center; }
.mybtn-fl { width: 100%; text-align: center; }
.mybtn-ft { box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.15); }
.mybtn-ft:hover,
.mybtn-fx:hover { box-shadow: 0 3px 6px 0 rgba( 0, 0, 0, 0.2); }
/* 버튼 심볼 */
.mybtn-i { width: 26px; height: 26px; text-align: center; line-height: 25px; vertical-align: middle; font-size: var(--font-m); overflow: hidden; }
.xmybtn-i:before { font-family: var(--font-symbol); font-weight: var(--fa-style, 900); }
/* 버튼 박스 */
.mybtn-cbx { text-align: center; }
/* 버튼 선택 */
.mybtn.mybtn-on { border: 1px solid var(--color-theme); color: var(--color-theme); background-color: var(--color-emp-wt); }
/* 버튼 컨테이너 */
.btnbx { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 1.4em; text-align: center; }
/* 특정버튼 */
.mybtn-naver { gap: 10px; background-color: #03C75A; color: #fff; }
/* 링크 */
.mylk1 { text-decoration: none; color: var(--color-normal); cursor: pointer; }
.mylk2 { text-decoration: none; color: var(--color-theme); cursor: pointer; word-break: keep-all; word-wrap: break-word; }
.link-in { text-decoration: none; cursor: pointer;}
.link-in:after { content: "\276F"; padding-left: 4px; color: var(--color-unfocus); }
.link-back { text-decoration: none; cursor: pointer;}
.link-back:before { content: "\276E"; padding-right: 4px; color: var(--color-unfocus); }
/* 심볼, 기호 */
.i-icon { overflow: hidden; }
.i-icon:before { display: inline-flex; font-weight: 500; font-size: 26px; line-height: 26px; }
.i-list:before { content: "\f00b"; }
.i-thmb:before { content: "\f0ce"; }
.i-scrp:before { content: "\f65e"; }
.i-cart:before { content: "\f07a"; }
.i-star:before { content: "\f005"; padding-right: 4px; }
.i-close:before,
.i-del:before {content: "\2b"; display: inline-block; transform: rotate(45deg) translate(0,-2px); font-size: 26px; line-height: 26px; }
.i-ms:before { content: "\2013"; }
.i-pl:before { content: "\2b"; transform: translate(0,-1px); }
/* 심볼, 기호 - 페이징 */
.i-prev:before { content: ""; border: 6px solid transparent; border-left: 0px solid var(--color-unfocus); border-right: 10px solid var(--color-unfocus); }
.i-prev2:before { content: ""; border: 6px solid transparent; border-left: 0px solid var(--color-unfocus); border-right: 10px solid var(--color-unfocus); }
.i-prev2:after { content: ""; border: 6px solid transparent; border-left: 0px solid var(--color-unfocus); border-right: 10px solid var(--color-unfocus); }
.i-next:before { content: ""; border: 6px solid transparent; border-left: 10px solid var(--color-unfocus); border-right: 0px solid var(--color-unfocus); }
.i-next2:before { content: ""; border: 6px solid transparent; border-left: 10px solid var(--color-unfocus); border-right: 0px solid var(--color-unfocus); }
.i-next2:after { content: ""; border: 6px solid transparent; border-left: 10px solid var(--color-unfocus); border-right: 0px solid var(--color-unfocus); }
/* 심볼, 기호 - 평점, 난이도 용 */
.i-star1:before { content: "\2605\2606\2606\2606\2606"; }
.i-star2:before { content: "\2605\2605\2606\2606\2606"; }
.i-star3:before { content: "\2605\2605\2605\2606\2606"; }
.i-star4:before { content: "\2605\2605\2605\2605\2606"; }
.i-star5:before { content: "\2605\2605\2605\2605\2605"; }
/* 아이콘 - svg */
.iconbx { display: inline-flex; color: var(--color-unfocus); }
.iconbx_on {color: var(--color-theme); }
.icon_caution > svg { width: 50px; height: 50px; fill: var(--color-normal); }
.icon_play { width: 14px; height: 15px; }
.icon_scrap { width: 14px; height: 13px; }
.icon_subs { width: 15px; height: 17px; }
.icon_prev { width: 10px; height: 10px; }
.icon_next { width: 10px; height: 10px; }
/* 레이블 */
.mylb {display: inline-flex; justify-content: center; align-items: center; border-radius: 9px; padding: 1px 6px; height: 18px; line-height: 100%; font-size: var(--font-s); }
.mylb2 {display: inline-block; border-radius: var(--radius-in); line-height: 100%; }
.lb-lec { border: 1px solid var(--color-theme); color: var(--color-theme); }
.lb-bok { border: 1px solid var(--color-devided); }
.lb-mlg { }
.lb-range { background-color: var(--color-unfocus); font-size: var(--font-xs); color: var(--color-bg02); }
.lb-agreedate { gap: 3px; color: var(--color-theme); font-weight: 400; }
.lb-agreedate:after { content: " 변경"; }
/* 뱃지 */
.bdg {display: inline-block; border-radius: 13px; width: 26px; height: 26px; line-height: 26px; text-align: center; vertical-align: middle; font-size: var(--font-l); }
/* 태그 */
.htagbx { display: flex; gap: 2px; }
.htag { position: relative; display: inline-block; border-radius: var(--radius-in); padding: .5em .8em; color: var(--color-normal); font-size: var(--font-s); text-decoration: none; background-color: transparent; transition: .5s; }
.htag:hover { background-color: var(--color-bg01); }
.htag:before { content: "#"; padding-right: 4px; }
/* 가격 표시 (원단위 붙음)*/
.prc-cur { font-weight: 600; color: var(--color-emp-bk); }
.prc-org { font-weight: 300; text-decoration: line-through; color: var(--color-unfocus); }
.prc-mlg { color: var(--color-theme); }
.prc-mlg:before { content: "+"; padding-right: 2px; }
/* 가격 표시 (원단위 안 붙음) */
.t-prc { font-weight: 600; }
/* 강조설명, 보조설명 문장 */
.p-emp { margin: 0; font-size: 0.9em; color: var(--color-theme); }
.p-des { margin: 0; line-height: 1.5em; font-size: 0.9em; color: var(--color-unfocus); }
.vsum_btn > .p-des { padding-top: 0.5em; text-align: center; }
/* 강조 단어 */
.t-empc { color: var(--color-theme); }
.t-empb { color: var(--color-emp-bk); }
.t-empw { font-weight: 600; }
.t-mark { background-color: antiquewhite; }
/* 필수 입력 */
.t-ncs:after { content: "\002A"; padding-left: 2px; color: var(--color-theme); font-weight: 600; }
/* 차감, 적립
.t-ded:before { content: "-"; padding-right: 2px; }
.t-acc:before { content: "+"; padding-right: 2px; }*/
/* 단위 */
.t-val + .t-unit { padding-left: 2px; }
.t-unit + .t-val { padding-left: 2px; }
/* 활성, 비활성 */
.t-ing { color: var(--color-emp-bk); }
.t-end { color: var(--color-unfocus); }
/* 표기 제목 - 값 */
.t-sbj { margin: 0; padding: 0; font-size: 0.85em; font-weight: 400; color: var(--color-unfocus); }
.t-sbjv { margin: 0; padding: 0; font-weight: 600; color: var(--color-emp-bk); }
/* 단위
.t-per:after { content: "%"; padding-left: 2px; }
.t-qnt:after { content: "개"; padding-left: 2px; }
.t-won:after { content: "원"; padding-left: 2px; }
.t-scr:after { content: "점"; padding-left: 2px; } */
/* 비밀번호 검증 */
.myif_pw_msg:before { padding-left: 10px; color: var(--color-theme); }
.pw_bad:before { content:"사용불가"; color: var(--color-emp); }
.pw_normal:before { content:"보통"; }
.pw_good:before { content:"안전"; }
.pw_avl:before { content:"일치"; }
.pw_unavl:before { content:"불일치"; color: #ff5850; }
/* 구분 */
.unit-bars { display: flex; flex-wrap: wrap; align-items: center; }
.unit-bar { line-height: 100%; }
.unit-bar + .unit-bar { margin-left: 10px; padding-left: 10px; border-left: 2px solid var(--color-line); }
/* 기본 문장 */
.p-emt { margin: 0; padding: 0; }
/* 탭메뉴 - 기록보기, 적립금 등 */
.tlnb { display: flex; gap: 4px; flex-wrap: wrap; }
.tlnb_a { border-radius: 25px; padding: 6px 1.4em; text-decoration: none; text-align: center; color: var(--color-normal); background-color: var(--color-bg01); transition: .2s; }
.tlnb_a.tlnb_on { color: var(--color-emp-wt); background-color: var(--color-theme); }
.tlnb_a:hover { color: var(--color-emp-wt); background-color: var(--color-theme); cursor: pointer; }
/* 인풋 */
/* 인풋 사이즈 */
.ip-fl { width: 100%; }
.ip-l { width: 20em; }
.ip-m { width: 12em; }
.ip-s { width: 8em; }
.ip-n { width: 5em; text-align: center; }
.ip-d { width: 8em; text-align: center; }
/* 인풋 텍스트 */
.ip-txt { display: inline-flex; border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 2px; padding: 4px 8px; max-width: calc( 100% - 4px ); height: 36px; background-color: var(--color-bg02); font-size: var(--font-m); transition: .3s; font-family: var(--theme-font-family); line-height: 100%; }
.ip-txt::placeholder { color: var(--color-unfocus); }
.ip-txt:focus { outline: 1px solid var(--color-theme); }
/* 인풋 비활성화 */
.ip-txtnot { color: var(--color-unfocus); background-color: var(--color-line); }
.ip-txtnot:focus { outline: none; }
/* 인풋 텍스트 입력값별 */
.otl_bad:focus,
.otl_unavl:focus { outline-color: var(--color-emp); }
.otl_normal:focus,
.otl_good:focus,
.otl_avl:focus { outline-color: var(--color-theme); }
/* 인풋 셀렉트 */
.ip-sel { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 2px; padding: 4px 8px; height: 36px; max-width: calc( 100% - 4px ); background-color: var(--color-bg02); font-family: var(--theme-font-family); font-size: var(--font-m); cursor: pointer; }
.ip-sel:focus { outline: 1px solid var(--color-theme); }
/* 인풋 파일 */
.ip-file { border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 2px; padding: 4px; max-width: calc( 100% - 4px ); background-color: var(--color-bg02); font-size: var(--font-m);}
.ip-file_uploaded { display: flex; align-items: center; gap: 14px; padding: 5px 14px; font-size: var(--font-s); }
.ip-file_uploaded > a { text-decoration: none; color: var(--color-normal); }
.ip-file_uploaded > a:hover { text-decoration: none; color: var(--color-theme); }
/* 인풋 박스 */
.ips-container { display: flex; gap: 2px; align-items: center; }
/* 체크박스 label(ip, bx, sp) */
.chklb { display: inline-flex; align-items: center; cursor: pointer; word-break: keep-all; word-wrap: break-word; vertical-align: middle; }
.chklb_ip { margin: 0; padding: 0; width: 0; height: 0; opacity: 0; }
.chklb_bx { flex: 0 0 20px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: var(--radius-out); width: 20px; height: 20px; }
.chklb_bx:before { content: " "; font-family: var(--font-symbol); font-size: var(--font-s); font-weight: var(--fa-style, 900); color: var(--color-emp-wt); line-height: 100%; }
.chklb_sp { padding-left: 6px; flex: 1 0 auto; }
.chklb_ip:focus + .chklb_bx { border: 2px solid var( --color-theme); }
.chklb_ip:checked + .chklb_bx { border-color: var( --color-theme); background-color: var( --color-theme); transition: all .3s; }
.chklb_ip:checked + .chklb_bx:before { content: "\f00c"; }
.chklb_ip:checked + .chklb_bx + .chklb_sp { color: var( --color-theme); font-weight: 600; }
/* 체크박스 버튼형(ip, bx, sp) */
.chkbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; word-break: keep-all; word-wrap: break-word; vertical-align: middle; }
.chkbtn_ip { width: 0; height: 0; opacity: 0; }
.chkbtn_btn { display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: var(--radius-out); padding: 7px 8px; cursor: pointer; color: var( --color-normal); }
.chkbtn_ip:focus + .chkbtn_btn { border-width: 3px; }
.chkbtn_ip:checked + .chkbtn_btn { border-color: var( --color-theme); color: var( --color-theme); font-weight: 600; }
/* 라디오버튼 label(ip, bx, sp) */
.rdolb { display: inline-flex; align-items: center; cursor: pointer; word-break: keep-all; word-wrap: break-word; vertical-align: middle; }
.rdolb_ip { width: 0; height: 0; opacity: 0; }
.rdolb_bx { flex: 0 0 20px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: 10px; width: 20px; height: 20px; }
.rdolb_bx:before { content: " "; border-radius: var(--radius-out); width: 10px; height: 10px; background-color: transparent; line-height: 100%; }
.rdolb_sp { padding-left: 6px; flex: 1 0; }
.rdolb_ip:focus + .rdolb_bx { border-width: 3px; }
.rdolb_ip:checked + .rdolb_bx { border-color: var( --color-theme); }
.rdolb_ip:checked + .rdolb_bx:before { background-color: var(--color-theme); }
.rdolb_ip:checked + .rdolb_bx + .rdolb_sp { color: var(--color-theme); font-weight: 600; }
/* 라디오버튼 버튼형 */
.rdobtn { display: block; }
.rdobtn_ip { width: 0; height: 0; opacity: 0; }
.rdobtn_btn { display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-unfocus); border-radius: var(--radius-out); padding: 4px 10px; height: 50px; cursor: pointer; color: var( --color-normal); }
.rdobtn_ip:focus + .rdobtn_btn { border-width: 3px; }
.rdobtn_ip:checked + .rdobtn_btn { border-color: var( --color-theme); color: var( --color-theme); font-weight: 600; }
/* 라디오버튼 리스트형 */
.rdoli { display: grid; grid-template-columns: 0 auto 1fr auto; align-items: center; padding: 1em; }
.rdoli:hover { background-color: var(--color-bg02); cursor: pointer; }
.rdoli:has(.rdolb_ip:checked) { background-color: var(--color-bg01); }
.rdoli:has(.rdolb_ip:checked) .rdoli_sp { font-weight: 500; color: var( --color-theme); }
.rdoli_sp { padding: 0 10px; text-align: left; }
.rdoli_sp2 { text-align: right; }
/* 라디오버튼 리스트형 컨테이너 */
.pickli{ overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 0; padding: 0; list-style: none; }
/* 라디오버튼 옆 삭제 버튼 */
.rdolb + .mybtn-i { margin-left: .1em; width: 20px; height: 20px; }
/* 팝업 */
.mdbx { transform: translate( -50%, -50% ); position: fixed; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 24px; width: clamp( 320px, 660px, 90vw); max-height: 80vh; border-radius: var(--radius-big); background-color: #fff; z-index: 100; font-family: var(--theme-font), sans-serif; color: var(--color-normal); }
.mdbx_head {flex: 0 0 auto; display: flex; justify-content: space-between; font-size: var(--font-l); }
.mdbx_head_title { font-weight: 600; }
.mdbx_head_close { padding-left: 20px; cursor: pointer; }
.mdbx_body { overflow-y: auto; margin-right: -4px; padding: 1em 10px 1em 0; min-height: 100px; max-height: 64vh; text-align: left; }
.mdbx_body::-webkit-scrollbar { width: 4px; }
.mdbx_body::-webkit-scrollbar-thumb { background-color: var(--color-theme); border-radius: 4px; }
.mdbx_body::-webkit-scrollbar-track { background-color: var(--color-unfocus); border-radius: 4px; box-shadow: none; }
.mdbx_desc { margin-bottom: 16px; word-break: keep-all; word-wrap: break-word; }
.mdbx_foot {flex: 0 0 50px; text-align: center; }
/* 마이페이지 로컬메뉴 */
.mplnb { display: grid; align-items: center; grid-template-columns: repeat( auto-fit, minmax( 9rem, auto)); gap: 4px; border-radius: var(--radius-out); margin: 40px 0; padding: 20px; background-color: var(--color-bg01); font-size: var(--font-s); font-weight: 400; }
.mplnb_a { display: flex; align-items: center; gap: .5em; padding: .3em 1em; text-decoration: none; color: var(--color-normal); word-wrap: break-word; word-break: keep-all; }
.mplnb_a:before { content: " "; flex: 0 0 4px; border-radius: 2px; height: 4px; background-color: var(--color-normal); }
/* 날짜 검색 */
.schbx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-radius: var(--radius-out); padding: 20px; background-color: var(--color-bg01); }
.schbx_btns { display: flex; gap: 4px; align-items: center; }
.schbx_input { flex: 1 1; display: flex; gap: 4px; align-items: center; }
.schbx_input > .ip-d { max-width: 100%; }
/* 인풋 수량 */
.qtbx { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-out); margin: 0; min-width: 90px; width: 100%; }
.qtbxl { height: 50px; font-size: var(--font-l); }
.qtbxm.item_infos { gap: 4px; height: 34px; font-size: var(--font-m); }
.qtbx_c { flex: 0 0 26px; text-align: center; color: var(--color-unfocus); transition: .2s; }
.qtbx_c:before { font-size: 22px; }
.qtbx_c:hover { color: var(--color-theme); cursor: pointer; }
.qtbx_n { flex: 1 0 24px; font-weight: 600; color: var(--color-emp-bk); text-align: center; }
/* 테이블 설명, 컨트롤 */
.brdcap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 20px 0; word-break: keep-all; word-wrap: break-word; }
.brdcap_r { flex: 0 1 auto; }
.brdfnc { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 20px 0; word-break: keep-all; word-wrap: break-word; }
.brdfnc_r { flex: 1 1 auto; text-align: right; }
/* 테이블 공통 */
.brd_br { padding:0; border-bottom: 1px dashed var(--color-line); grid-column: 1/none; }
.brd_br2 { padding:0; border-bottom: 1px solid var(--color-line); grid-column: 1/none; }
.brd_mrg { grid-column: 1/none; border-bottom: 1px dashed var(--color-line); padding: 30px 1em; text-align: center; }
/* 섹션별 */
.brd { position: relative; display: grid; grid-template-columns: repeat( auto-fit, minmax( 1em, auto)); gap: 6px; align-items: center; border-bottom: 1px dashed var(--color-line); margin: 0; padding: 30px 0; min-height: 66px; font-size: 15px; }
.brd_hlighter:before { content: " "; position: absolute; inset: 0; z-index: -1; background-color: var(--color-theme); opacity: .05; }
.brd_head { border-top: 1px solid var(--color-theme); padding: 8px 0; min-height: 50px; background-color: var(--color-bg02); font-size: 14px; font-weight: 500; text-align: center; }
.brd_col { overflow: hidden; position: relative; margin: 0; padding: 0 10px; text-align: center; }
.brd_title { padding-left: 1em; text-align: left; font-weight: 500; }
.brd_sbj { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.brd_val { margin: 0; padding: 0; word-break: keep-all; word-wrap: break-word; }
.brd_dt { margin: 0; padding: 14px; background-color: var(--color-bg01); }
.brd_dd { margin: 0; padding: 14px; word-break: keep-all; word-wrap: break-word; }
.brd_unfocus { background-color: var(--color-bg01); }
.brd_unfocus > .brd_title { font-weight: 400; }
.brd_unfocus .brd_val {color: var(--color-unfocus); }
.brd_unfocus .mylb { opacity: .5; }
.brd_unfocus .prc-cur { color: inherit; }
/* 가로형*/
.hbrd { display: grid; align-items: center; border-top: 1px solid var(--color-theme); font-size: 15px; }
.hbrd_th {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px 1em; height: 100%; text-align: center; font-weight: 600; background-color: var(--color-bg02); word-break: keep-all; word-wrap: break-word; }
.hbrd_td { padding: 24px 14px; text-align: center; word-break: keep-all; word-wrap: break-word; overflow: hidden; }
/* 가로형 - 스키니 */
.hbrd2 { display: grid; align-items: center; border-top: 1px solid var(--color-line); font-size: var(--font-s); }
.hbrd2_th {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0.3em 0.6em; height: 100%; text-align: center; font-weight: 600; background-color: var(--color-bg02); word-break: keep-all; word-wrap: break-word; }
.hbrd2_td { padding: 0.6em; word-break: keep-all; word-wrap: break-word; text-align: center; overflow: hidden; }
/* 세로형 */
.vbrd { display: grid; align-items: center; border-top: 1px solid var(--color-devided); font-size: 15px; }
.vbrd_th { padding: 20px 8px; font-weight: 600; word-break: keep-all; word-wrap: break-word; }
.vbrd_td { padding: 20px 8px; word-break: keep-all; word-wrap: break-word; line-height: 1.6em; overflow: hidden; }
/* 상품소개 */
.prdbx {display: flex; gap: 10px 20px; width: 100%; } /* 리스트형 */
.thumb { margin: 0; padding: 0; }
.thumb_img { max-width: 100%; }
.thumb_noimg { aspect-ratio: 3 / 4; display: flex; justify-content: center; align-items: center; padding: 10px; max-width: 160px; background-color: var(--color-bg01); text-decoration: none; color: var(--color-normal); word-break: keep-all; word-wrap: break-word; text-align: center; }
.item { flex: 1 1 auto; text-align: left; word-break: keep-all; word-wrap: break-word; }
.item_icons { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 0; padding: 0; }
.item_icons > span { margin-bottom: 4px; }
.item_icon { line-height: 100%; }
.item_name { margin: 0; padding: 0; text-decoration: none; font-size: var(--font-l); font-weight: 600; color: var(--color-emp-bk); word-break: keep-all; word-wrap: break-word; line-height: 140%; }
.item_infos { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 8px; font-size: var(--font-s); }
.item_info { display: flex; align-items: center; min-height: 24px; line-height: 100%; }
.item_details .item_info + .item_info:before { content:"\00B7"; padding-right: 8px; }
.item_prcinfo { margin-top: 14px; }
.item_periods { margin-top: 14px; }
.item_prc { margin: 0; padding: 0; font-size: var(--font-m); }
.item_discount { border-radius: 10px; padding: 1px 8px; font-weight: 500; background-color: var(--color-bg01); }
.item_discount:before { content: "-"; padding-right: 2px; }
.item_prc + .item_mlg:before { content: " "; padding-right: 8px; height: 14px; border-left: 1px solid var(--color-line); }
.item_preview { margin-top: 14px; }
/* 쿠폰 */
.cpnbx { border: 1px solid var(--color-line); border-radius: var(--radius-out); min-width: 280px; max-width: 100%; word-break: keep-all; word-wrap: break-word; font-size: var(--font-s); color: var(--font-normal); text-align: left; }
.cpnbx_head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; height: 34px; background-color: var(--color-bg01); color: var(--color-unfocus) }
.cpnbx_info { font-size: 13px; }
.cpnbx_seq:before { content: "개별상품"; }
.cpnbx_seq[seq="0"]:before { content: "장바구니"; }
.cpnbx_type[type="0"]:before { content: " "; }
.cpnbx_type[type="1"]:before { content: " / 강좌전용"; }
.cpnbx_type[type="2"]:before { content: " / 교재전용"; }
.cpnbx_body { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.cpnbx_desc { display: flex; gap: 4px; line-height: 140%; overflow: hidden; }
.cpnbx_sbj { flex: 0 0 50px; display: flex; align-items: center; height: fit-content; font-size: 13px; font-weight: 600; color: var(--color-unfocus); }
.cpnbx_tk { height: calc( 100% - 86px ); }
.cpnbx_offs { margin: 0 0 10px; padding: 0; font-size: 20px; font-weight: 700; letter-spacing: -1px; line-height: 130%; color: var(--color-theme); }
.cpnbx_vlid > .cpnbx_val { font-weight: 600; color: var(--color-emp-bk); }
.cpnbx_apply { padding: 0 16px 16px; height: 52px; }
.cpnon { border-color: var(--color-theme); }
.cpnon .cpnbx_head { background-color: var(--color-theme); color: var(--color-emp-wt) }
.cpnpic { position: relative; cursor: pointer; }
.cpnpic + .cpnpic { margin-top: 10px; }
.cpnpic_btn { position: absolute; inset: 0; z-index: 1; }
/* 영수증 - 장바구니, 결제, 결제상세 */
.vsum { position: sticky; top: 20px; border-radius: var(--radius-out); border: 1px solid var(--color-line); padding: 20px; background-color: var(--color-bg02); }
.vsum_tit { margin: 16px 0; text-align: center; font-size: 24px; }
.vsum_lst { margin: 0; font-size: var(--font-s); }
.vsum_unit { display: flex; justify-content: space-between; align-content: flex-start; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 8px 0; }
.vsum_subtotal { margin: 18px 0; padding: 12px 0; border-top: 1px dashed var(--color-unfocus); border-bottom: 1px dashed var(--color-unfocus); }
.vsum_sbj { flex: 0 0 6rem; display: flex; column-gap: 8px; align-items: center; }
.vsum_sbj:before { flex: 0 0 auto; line-height: 100%; font-size: 14px; color: var(--color-normal); overflow: hidden; }
.vsum_add .vsum_sbj:before { content: "+"; }
.vsum_dis .vsum_sbj:before { content: "-"; }
.vsum_val { margin: 0; text-align: right; }
.vsum_desc { flex: 0 0 100%; margin: 0; padding-left: 18px; min-height: 14px; font-size: var(--font-xs); font-weight: 400; color: var(--color-unfocus); }
.vsum_total { margin-top: 18px; padding: 12px 0 0; border-top: 1px solid var(--color-normal); font-weight: 600; }
.vsum_total .vsum_sbj { flex: 0 0 4rem; color: var(--color-emp-bk); }
.vsum_total .prc-cur { font-size: 20px; color: var(--color-theme); }
.vsum_subtotal + .vsum_total { margin-top: 0; padding-top: 0; border-top: none; }
.vsum_mg { width: 100%; text-align: right; font-size: var(--font-s); font-weight: 400; color: var(--color-normal); }
.vsum_btn { margin-top: 16px; }
/* 토글박스 */
.tglbx { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-out); background-color: var(--color-bg02); }
.tglbx_head { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 16px; cursor: pointer; }
.tglbx_head:after { content: " "; border: 6px solid transparent; border-bottom-width: 0; border-top: 10px solid var(--color-unfocus); transition: 0.2s; }
.tglbx_head.tglbx_on { background-color: var(--color-line); }
.tglbx_head.tglbx_on:after { transform: rotate(180deg); border-top-color: var(--color-normal); }
.tglbx_titl { margin: 0; padding: 0; word-break: keep-all; word-wrap: break-word; line-height: 130%; }
.tglbx_body { display: none; height: 0; transition: 0.2s; }
.tglbx_on + .tglbx_body { display: block; height: fit-content; }
/* 병렬구조 리스트 */
.hul { list-style: none; display: inline-flex; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; }
.hul + .hul { margin-top: 6px; }
.hul_hgap { gap: 0 20px; }
.hul_li { margin: 0; padding: 0; max-width: 100%; }
/* 직렬구조 리스트 */
.vul { list-style: none; margin: 0; padding: 0; }
.vul_important + .vul_li { margin-top: 2px; }
.vul_li + .vul_important { margin-top: 2px; }
.vul_li:not(.vul_important) { font-size: var(--font-s); color: var(--color-unfocus); line-height: 150%; }
/* 작업단계, 페이지단계, step */
.mysteps { display: flex; justify-content: flex-end; align-items: center; gap: 50px; margin-bottom: 4vh; font-size: var(--font-l); counter-reset: steps; }
.mystep:before { content: counter(steps); flex: 0 0 1.4em; display: flex; justify-content: center; align-items: center; border-radius: 0.7em; width: 1.4em; height: 1.4em; background-color: var(--color-unfocus); color: var(--color-emp-wt); }
.mystep { display: flex; justify-content: flex-end; align-items: center; gap: 6px; counter-increment: steps; }
.mystep_cur:before { background-color: var(--color-theme); }
.mystep_cur { font-weight: 600; }
/* 내용 요약, 브리프 */
.brf { display: grid; align-items: center; width: 100%; border-radius: var(--radius-out); }
.brf_u { display: flex; align-items: center; gap: 0 10px; z-index: 1; }
/* 페이징 */
.pgctl_container { margin: 80px auto 40px auto; }
.pgctl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 auto; padding: 0; width: fit-content; list-style: none; }
.pgctl_btn { position: relative; display: flex; justify-content: center; align-items: center; border-radius: 20px; width: 30px; height: 30px; text-decoration: none; color: var(--color-normal); font-size: var(--font-m); font-weight: 500; line-height: 100%; letter-spacing: -1px; }
.pgctl_btn > svg { position: relative; width: 10px; height: 10px; z-index: 2; }
.pgctl_btn_on { overflow: hidden; color: var(--color-theme); font-weight: 600; }
.pgctl_btn:hover { color: var(--color-theme); }
/* 노티보드 */
.notibx { margin: 30px 0; padding: 2em; border-radius: var(--radius-out); font-size: var(--font-m); background-color: var(--color-bg02); }
.notibx_head { font-size: var(--font-l); color: var(--color-emp-bk); font-weight: 600; }
.notibx_ul { margin: 0.5em 0 0; padding: 0; list-style: none; }
.notibx_li { position: relative; padding: .2em 0 .2em 0.6em; }
.notibx_li:before { content: " "; position: absolute; top: 1em; left: 0; border-radius: 2px; width: 3px; height: 3px; background-color: var(--color-normal); }
.notibx_dl { display: grid; grid-template-columns: 5em auto; align-items: center; }
.notibx_dt { position: relative; margin: 0; padding: .3em 0 .3em 0.6em; font-weight: 500; color: var(--color-emp-bk); }
.notibx_dt:before { content: " "; position: absolute; transform: translate( -50%, -50%); top: 50%; left: 0; border-radius: 2px; width: 3px; height: 3px; background-color: var(--color-normal); }
.notibx_dd { margin: 0; padding: 0; grid-column: 2/3; }
/* 사용불가, 해지, 끝, 만료 */
.v-exped { filter: grayscale(100%); opacity: 0.5; pointer-events: none; font-weight: 300; }
/* 모바일 웹 전환 버튼 */
.mobileweb_link { padding: 20px; }
.mobileweb_button { display: flex; justify-content: center; align-items: center; border-radius: 2vw; height: 20vw; text-decoration: none; font-size: 8vw; line-height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.mobileweb_button:active { position: relative; top: 1px; }
.mobileweb_white { color: #555; border: solid 1px #b7b7b7; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); }
.mobileweb_white:hover { background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top, #fff, #dcdcdc); }
.mobileweb_white:active { color: #999; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); background: -moz-linear-gradient(top, #ededed, #fff); }
}