@charset "utf-8";

/* Common */
body,ul,ol,li,article,section,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,form,fieldset,legend{margin:0;padding:0}
img,fieldset{border:0;}
img{vertical-align:middle}
ul,ol{list-style:none}
a{color:black;text-decoration:none}
a:hover,a:active,a:focus{;}
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box} 

/* 2026-09-14: 웹폰트 Noto Sans KR(링크는 m/layout/header.php). 폼 요소는 브라우저 기본 글꼴을 쓰므로 inherit */
body{background-color:#efefef;overflow-x:hidden;font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
button,input,select,textarea{font-family:inherit}

img,.img{max-width:100%}

.blind{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;font-size:0;line-height:0}
.container{position:relative;max-width:720px;margin:0 auto}

.clearfix:before, .clearfix:after {content:" ";display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}

.text-right{text-align:right}
.btn{display:inline-block;padding:7px 15px;cursor:pointer;background-color:#eee;border:0;text-decoration:none;font-weight:bold}
.btn-primary{background-color:#e5af4a;color:#fff}
.xLarge{font-size:14px}

.tbl-list, .tbl-list th, .tbl-list td{border:0}
.tbl-list{width:100%;table-layout:fixed;font-size:12px}
.tbl-list th, .tbl-list td{padding:4px;}
.tbl-list th{border-top:2px solid #e8c6c4;border-bottom:1px solid #e8c6c4;background-color:#fddfdd}
.tbl-list td.event{background-color:#f7f7f7}
.tbl-view, .tbl-view th, .tbl-view td{border:0}
.tbl-view{width:100%;font-size:12px;border-collapse:collapse}
.tbl-view th, .tbl-view td{padding:4px;text-align:left;}
.tbl-view th{background-color:#eee}
.tbl-view td{background-color:#f7f7f7}

.article-view{font-size:12px}
.article-view .article-text{padding:10px}

.article-view .list-comment{border-top:1px solid #ccc}
.article-view .list-comment ul{;}
.article-view .list-comment ul li{padding:10px;border-bottom:1px solid #ccc}
.article-view .list-comment ul li:after{display:block;clear:both;content:''}
.article-view .list-comment ul li .writer{float:left;width:80px;font-weight:bold;}
.article-view .list-comment ul li .comment{margin-left:80px;}
.article-view .write-comment{margin:20px 0;}
.article-view .write-comment th,
.article-view .write-comment td{padding:8px;vertical-align:top}
.article-view .write-comment textarea{display:block;width:100%;height:80px;box-sizing:border-box}
.paginate{padding:10px 0;text-align:center;font-size:12px;}
.paginate a{margin:2px}
.form-login{;}

.tbl, .tbl th, .tbl td{;}
.tbl{min-width:100%;table-layout:fixed;border-top:2px solid #b193a6;font-size:13px;}
.tbl th, .tbl td{padding:4px;border-bottom:1px solid #b193a6;white-space:nowrap;}
.tbl th{padding:8px;text-align:left;}
/* Common */

.mask{position: fixed;top: 0;left: 0;z-index: 15;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);}

/* General styles for all menus */
.cbp-spmenu {position:fixed;background-color:#fefefe}
.cbp-spmenu header{position:relative;height:50px;padding:10px;background:#e58744;color:#fff}
.cbp-spmenu header a{color:#fff}
.cbp-spmenu header .btnArea{position:absolute;left:0;top:15px;}
.cbp-spmenu header .btnArea a{padding:10px;color:#fff}
.cbp-spmenu header .btn-close{position:absolute;top:15px;right:15px;color:#fff;font-weight:bold;}
.cbp-spmenu header .btn-logout{position:absolute;top:15px;left:15px}
.cbp-spmenu ul{;}
.cbp-spmenu ul li{height:50px;border-bottom:1px solid #a1a2a3}
.cbp-spmenu ul li a{display:block;padding:10px 10px 10px 20px;font-size:16px;line-height:25px;}

/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {width: 280px;height: 100%;top: 0;z-index: 1000;}
.cbp-spmenu-vertical a{;}
.cbp-spmenu-horizontal {width: 100%;height: 150px;left: 0;z-index: 1000;overflow: hidden;}
.cbp-spmenu-horizontal h3 {height: 100%;width: 20%;float: left;}
.cbp-spmenu-horizontal a {float: left;width: 20%;padding: 0.8em;border-left: 1px solid #258ecd;}

/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {left: -280px;}
.cbp-spmenu-right {right: -280px;}
.cbp-spmenu-left.cbp-spmenu-open {left: 0px;}
.cbp-spmenu-right.cbp-spmenu-open {right: 0px;}

/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {top: -150px;}
.cbp-spmenu-bottom {bottom: -150px;}
.cbp-spmenu-top.cbp-spmenu-open {top: 0px;}
.cbp-spmenu-bottom.cbp-spmenu-open {bottom: 0px;}

/* Push classes applied to the body */
.cbp-spmenu-push {overflow-x: hidden;position: relative;left: 0;}
.cbp-spmenu-push-toright {left: 280px;}
.cbp-spmenu-push-toleft {left: -280px;}

/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}

/* Example media queries */
@media screen and (max-width: 55.1875em){
	.cbp-spmenu-horizontal {font-size: 75%;height: 110px;}
	.cbp-spmenu-top {top: -110px;}
	.cbp-spmenu-bottom {bottom: -110px;}
}

@media screen and (max-height: 26.375em){
	.cbp-spmenu-vertical {font-size: 90%;width: 190px;}
	.cbp-spmenu-left, .cbp-spmenu-push-toleft {left: -190px;}
	.cbp-spmenu-right {right: -190px;}
	.cbp-spmenu-push-toright {left: 190px;}
}

#wrap{background-color:#fff}

#top-login{padding:4px;background-color:#efefef;border-top:1px solid #ccc;border-bottom:1px solid #bbb;text-align:right;font-size:13px}
#top-login a{color:#444}

#header{;}
#header .quick{position:absolute;right:10%;top:10%;;}
#header .login{position:absolute;right:10%;bottom:10%;}
#header ul{;}
#header ul li{float:left}

#header2{padding:10px 0 15px;text-align:center;}
#header2 img{height:35px}
#header2 .logo img{height:45px}
#header2 .btn-call{position:absolute;top:40px;right:10px}
#header2 .btn-menu{position:absolute;top:40px;left:10px}

#header_top{background-color:#eee;overflow:hidden;border-bottom:1px solid #ddd;}
#header_top .se{float:right;font-size:13px;padding:6px 10px}

#footer{padding:1em 0;text-align:center;font-size:11px;line-height:1.4em;border-top:1px solid #707070}

#menu{;}
#menu ul{;}
#menu ul li{float:left;width:20%}

#main{;}
#main .spot{;}
#main .main_menu{;}
#main .main_menu ul{;}
#main .main_menu ul li{float:left;width:50%}

#video{padding:10px;}
#video h1{padding:4px;background-color:#000;color:#fff;font-size:12px;border-bottom:1px solid #999}
#video .btn-close{position:absolute;top:12px;right:12px;color:#fff}
#video video{width:100%}

#container{padding:10px}
#container h1{margin-bottom:10px}
#container hr{height:0;border:0}
#container .cont{;}
#container .cont .mb20{margin-bottom:20px}

#container .form-select-sub{margin-bottom:10px;}
#container .form-select-sub select{display:block;width:100%;padding:10px;box-sizing:border-box}

.cont-join{;}
.cont-join h2{margin-top:20px;margin-bottom:10px;}
.cont-join h3{margin-bottom:10px}
.cont-join .form-table{margin-bottom:40px;padding:8px;border:1px solid #ccc;background-color:#fefefe;border-radius:4px}
.cont-join .form-table table{border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.cont-join .form-table legend{display:block;width:100%;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ccc;}
.cont-join .form-table .form-group{margin-bottom:10px;;}
.cont-join .form-table .form-group label{float:left;width:80px;padding-top:6px;text-align:right;font-weight:bold;font-size:12px;letter-spacing:-1px}
.cont-join .form-table .form-group .col{margin-left:90px;margin-right:10px}
.cont-join .form-table .form-group .col .form-control{display:block;width:100%;margin:2px;padding:3px 5px;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;background-color:#fefefe}
.cont-join .form-table .form-group .col .inline{display:inline;width:inherit;}
.cont-join .form-table .form-group .col .help{font-size:11px}
.cont-join .form-table .center{text-align:center;}
.cont-join .form-table .center img{vertical-align:top}

/* =======================================================================
   2026-09-13: 모바일 과정목록 / 수강신청
   8칸 표(과정명·소개·교수·기간·수강료·검정료·인증료·신청)를 폰에서 볼 수 없어
   카드로 바꿨다. 표는 가로 스크롤로 감싼다.
   ======================================================================= */
.m-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.m-scroll > table{min-width:560px}

.m-cards{margin:0 0 14px}
.m-card{position:relative;margin:0 0 10px;padding:12px 14px;border:1px solid #e0e0e0;border-radius:6px;background:#fff}
.m-card h3{margin:0 0 8px;font-size:15px;line-height:1.35;color:#222;font-weight:bold}
.m-card h3 a{color:#222;text-decoration:none}
.m-card .m-desc{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:#666;
  word-break:break-all}
.m-card .m-meta{margin:0 0 10px;font-size:12px;color:#888;line-height:1.6}
.m-card .m-meta b{display:inline-block;min-width:38px;color:#555;font-weight:normal}
.m-fee{margin:0 0 12px;padding:9px 10px;background:#f7f8fa;border-radius:4px;font-size:12.5px}
.m-fee dl{display:flex;flex-wrap:wrap;margin:0}
.m-fee dt{flex:0 0 52px;margin:0;padding:2px 0;color:#777}
.m-fee dd{flex:1 1 0;min-width:80px;margin:0;padding:2px 0;text-align:right;color:#333}
.m-fee .m-fee-sum{margin-top:6px;padding-top:6px;border-top:1px solid #e3e5e9;font-weight:bold}
.m-fee .m-fee-sum dd{color:#c0392b}

.m-btn{display:inline-block;padding:10px 16px;border:0;border-radius:4px;background:#d07d79;
  color:#fff;font-size:14px;font-family:inherit;line-height:1.2;text-align:center;
  text-decoration:none;cursor:pointer;vertical-align:middle}
.m-btn:hover{background:#bb6763}
.m-btn-block{display:block;width:100%;box-sizing:border-box}
.m-btn-plain{background:#f2f2f2;color:#555;border:1px solid #cdcdcd}
.m-btn-plain:hover{background:#e6e6e6}
.m-btn-lg{padding:13px 16px;font-size:15px}
.m-btn[disabled],.m-btn.is-off{background:#c9c9c9;cursor:default}

.m-empty{padding:34px 12px;text-align:center;color:#999;font-size:13px;
  border:1px solid #e8e8e8;border-radius:6px}
.m-note{margin:10px 0 0;font-size:12px;color:#888;line-height:1.6}
.m-warn{margin:0 0 12px;padding:10px 12px;border-radius:4px;background:#fdf3f2;
  border:1px solid #f0d5d2;color:#b5433b;font-size:12.5px;line-height:1.6}
.m-srch{display:flex;gap:6px;margin:0 0 12px}
.m-srch input[type=text]{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:8px 9px;
  border:1px solid #cdcdcd;border-radius:4px;font-size:13px;font-family:inherit}
.m-paging{margin:14px 0;text-align:center;font-size:13px}
.m-paging a,.m-paging strong{display:inline-block;min-width:30px;padding:6px 4px;margin:0 2px;
  border:1px solid #ddd;border-radius:3px;color:#555;text-decoration:none}
.m-paging strong{background:#d07d79;border-color:#d07d79;color:#fff}

/* 수강신청 확인 화면 */
.m-order dl{margin:0 0 14px;border-top:1px solid #ddd}
.m-order dl > div{display:flex;border-bottom:1px solid #eee}
.m-order dt{flex:0 0 88px;margin:0;padding:9px 8px;background:#fafafa;color:#666;font-size:12.5px}
.m-order dd{flex:1 1 0;min-width:0;margin:0;padding:9px 10px;font-size:13px;color:#333;word-break:break-all}
.m-order .m-bank{padding:11px 12px;background:#f7f8fa;border-radius:4px;font-size:13px;line-height:1.7}
.m-order ul.m-lec{margin:6px 0 14px;padding:0;list-style:none}
.m-order ul.m-lec li{padding:7px 10px;border-bottom:1px solid #f0f0f0;font-size:12.5px;color:#444}
.m-order .m-actions{display:flex;gap:8px;margin-top:16px}
.m-order .m-actions > *{flex:1 1 0}
/* 2026-09-13: 내 주문 (/m/online/orders.php) 상태 배지 */
.m-badge{display:inline-block;margin:0 0 6px;padding:2px 9px;border-radius:10px;font-size:11.5px}
.m-badge-pending{background:#fff4e0;color:#a36200}
.m-badge-paid{background:#e7f4ec;color:#2d7a4f}
.m-badge-cancelled{background:#f0f0f0;color:#999}
.m-field{margin:0 0 12px}
.m-field label{display:block;margin-bottom:5px;font-size:12.5px;color:#555}
.m-field input[type=text]{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #cdcdcd;
  border-radius:4px;font-size:14px;font-family:inherit}

/* =======================================================================
   2026-09-13: 수강중인 강좌 (/m/online/?b_info=3)
   14칸 표(1·2교시 각 10차시 O/X + 기간 + 과제 + 점수)를 폰에서 볼 수 없어
   강좌별 카드 + 출석 점 10개로 바꿨다.
   ======================================================================= */
.m-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.m-head h2{margin:0;font-size:16px;color:#333;font-weight:bold}
.m-btn-sm{padding:6px 11px;font-size:12.5px}

.m-ok{color:#2d7a4f}
.m-no{color:#b5433b}

.m-att{margin:0 0 12px;padding:8px 9px;background:#f7f8fa;border-radius:4px}
.m-att-row{display:flex;align-items:center;gap:6px;padding:3px 0}
.m-att-label{flex:0 0 40px;font-size:12px;color:#777}
.m-att-dots{flex:1 1 0;min-width:0;display:flex;gap:3px}
.m-att-dots i{flex:1 1 0;min-width:0;height:20px;border:1px solid #dcdee2;border-radius:3px;
  background:#fff;color:#bbb;font-size:10px;font-style:normal;line-height:18px;text-align:center}
.m-att-dots i.on{background:#d07d79;border-color:#d07d79;color:#fff}
.m-att-sum{flex:0 0 36px;text-align:right;font-size:11.5px;color:#888}
.m-summary{margin:0 0 12px;padding:9px 11px;background:#f7f8fa;border-radius:4px;
  font-size:12.5px;color:#666}
.m-summary b{color:#d07d79}
.m-meta .m-sep{margin:0 6px;color:#ccc}

/* 수업 보기 (/m/online/?b_info=6) — 4칸 표를 카드로 */
.m-lec h3{display:flex;align-items:baseline;gap:7px;margin:0 0 10px}
.m-lec .m-lec-no{flex:0 0 auto;padding:2px 7px;border-radius:10px;background:#f0eaea;
  color:#a2605d;font-size:11.5px;font-weight:normal}
.m-lec-btns{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.m-lec-btns .m-btn{flex:1 1 0;min-width:74px}
.m-chk{color:#2d7a4f;font-weight:bold}
/* 강의 재생 — 전폭 16:9 (폰에서 <video> 가 기본 크기로 찌그러지던 것) */
.m-video{position:relative;width:100%;margin:0 0 10px;background:#000;border-radius:4px;overflow:hidden}
.m-video:before{content:"";display:block;padding-top:56.25%}
.m-video > video,.m-video > iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* 2026-09-14: 로그인 화면(m/views/auth/login.php) */
.m-field input[type=password]{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #cdcdcd;
  border-radius:4px;font-size:16px;font-family:inherit}
.m-login{max-width:420px;margin:8px auto 0;padding:20px 16px;background:#fff;border:1px solid #e0e0e0;border-radius:6px}
.m-login .m-field input{font-size:16px;padding:11px 12px}
.m-login .m-field input:focus{outline:0;border-color:#d07d79;box-shadow:0 0 0 2px rgba(208,125,121,.2)}
.m-login .m-warn{margin:4px 0 12px}
.m-login-links{max-width:420px;margin:14px auto 24px;text-align:center;font-size:13px;color:#777}
.m-login-links a{color:#d07d79;font-weight:500;text-decoration:underline}

/* 2026-09-14: 게시판 목록(m/views/board/list.php) — 표 대신 카드형 목록 */
.m-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.m-list-total{font-size:13px;color:#777}
.m-list-total b{color:#333;font-weight:700}
.m-list{margin:0 0 14px;padding:0;list-style:none;background:#fff;border:1px solid #e3e3e3;border-radius:6px;overflow:hidden}
.m-list li{border-top:1px solid #efefef}
.m-list li:first-child{border-top:0}
.m-list li a{display:block;padding:12px 14px;color:#222;text-decoration:none}
.m-list li a:active{background:#faf4f3}
.m-list li.is-notice{background:#fdf7f6}
.m-list li.is-reply a{padding-left:28px}
.m-list-subject{display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;line-height:1.45;font-weight:500;word-break:break-all}
.m-list-re{margin-right:4px;color:#aaa}
.m-list-meta{display:flex;flex-wrap:wrap;margin-top:5px;font-size:12px;color:#999;line-height:1.4}
.m-list-meta span+span:before{content:"";display:inline-block;width:1px;height:9px;margin:0 7px;background:#ddd;vertical-align:0}
.m-list-meta .m-list-cmt{color:#d07d79}
.m-tag{display:inline-block;margin-right:5px;padding:1px 6px;border-radius:3px;font-size:11px;font-style:normal;font-weight:500;line-height:1.5;vertical-align:2px}
.m-tag-notice{background:#d07d79;color:#fff}
.m-tag-new{margin:0 0 0 4px;padding:0 5px;background:#fff0e6;color:#e2742f}