/******공통*/
.input_basic{ border:1px solid #ddd; border-radius:5px !important; background:#fff; height:45px; padding:0 10px; box-shadow:0 1px 3px rgba(95,95,95,0.1);}
.input_basic::-webkit-input-placeholder { color:#ccc }
.input_basic::-moz-placeholder { color:#ccc }
.input_basic::-ms-input-placeholder { color:#ccc } 


.input_date{ border:0; background:#fff; position:relative; height:32px;}
.input_time{ border:0; background:#fff; position:relative; height:32px;}
/* 네이티브 외형 감추기 */
.input_date::-webkit-inner-spin-button, .input_date::-webkit-outer-spin-button { 
	display: none;
    -webkit-appearance: none;
    appearance: none;}
.input_date::-webkit-calendar-picker-indicator { 
	display: none;
    -webkit-appearance: none;
    appearance: none;}
.input_time::-webkit-inner-spin-button, .input_time::-webkit-outer-spin-button { 
	display: none;
    -webkit-appearance: none;
    appearance: none;}
.input_time::-webkit-calendar-picker-indicator { 
	display: none;
    -webkit-appearance: none;
    appearance: none;}

/* 아이콘넣기 */
.input_date:after{ display:block;font-family:"Font Awesome 5 Pro"; content:"\f274"; font-weight:solid; color:#444; font-size:17px;
 position:absolute; top:0px; right:15px;}
.input_time:after{ display:block;font-family:"Font Awesome 5 Pro"; content:"\f017"; font-weight:solid; color:#444; font-size:17px;
 position:absolute; top:0px; right:15px;}

.text_basic{ border:1px solid #ddd; border-radius:5px; background:#fff; padding:10px; box-shadow:0 1px 3px rgba(95,95,95,0.1);}

.select_basic{ border:1px solid #ddd; border-radius:5px !important; background:#fff; height:45px; padding:0 10px; box-shadow:0 1px 3px rgba(95,95,95,0.1);
/* 네이티브 외형 감추기 */
 -webkit-appearance:none; 
-moz-appearance :none; 
appearance :none;
position:relative;}
/* IE 10, 11의 네이티브 화살표 숨기기 */
.select_basic::-ms-expand{ display:none;}

.btn_basic{ border:0px; border-radius:10px !important; text-align:center;}

/* 페이징 */
#paging{ text-align:center; padding:30px 0 10px 0;}
.page_box{ display:inline-block; }
.page_box:after{ display:block; content:""; clear:both;}
.page_box li{ float:left; text-align:center; margin:0 2px;}
.page_box li span{ display:block; width:25px; height:25px; border-radius:50%; background:#fff; border:1px solid #ddd; color:#999; font-size:11px;
 line-height:24px;}
.page_box li span a{ color:#999;}
.page_box li .page_now{ border-color:#666;}
.page_box li .page_now a{ color:#555;}
.page_box li i{ font-size:1.2em;}




/******레슨예약*/
#month_top{ background:#fff;}
.month_tbox{ padding:15px 20px; text-align:center;}
.month_tbox .mtb_arrow{ float:left; width:25%; font-size:2em; color:#ccc;}
.month_tbox .mtb_num{ float:left; width:50%; font-size:1.6em; font-weight:bold; color:#222;}
.month_tbox .mtb_al{ padding-right:20px;}
.month_tbox .mtb_ar{ padding-left:20px;}

#lesson_box{ background:#f3d420;}
.les_box{ padding:25px 20px; position:relative;}
.les_box .le_tit{ font-size:1.5em; font-weight:bold; line-height:1em; color:#222; margin-bottom:5px;}
.les_box .le_tit span{ font-size:15px;}
.les_box .le_date{ font-size:12px; font-weight:500; color:rgba(0,0,0,0.6); line-height:1em;}
.les_box .my_pro{ background:#fff; border-radius:8px; font-size:11px; font-weight:bold; color:#333; line-height:30px; padding:0 10px; 
position:absolute; top:50%; right:10px; margin-top:-15px; z-index:10;}


#calendar{ text-align:center;}
/* ======== Calendar ======== */
#calendar .my-calendar {width: inherit;/*margin: 30px;*/padding: 10px 10px 10px 10px;text-align: center;font-weight: 800;/*border: 1px solid #ddd;*/cursor: default;}
#calendar .my-calendar .clicked-date {border-radius: 25px;margin-top: 36px;float: left;width: 42%;padding: 46px 0 26px;background: #ddd;}
#calendar .my-calendar .calendar-box {/*float: right;*/width: 100%;/*padding-left: 30px;*/}
#calendar .clicked-date .cal-day {font-size: 24px;}
#calendar .clicked-date .cal-date {font-size: 130px;}
#calendar .ctr-box {padding: 0 16px;margin-bottom: 10px;font-size: 20px;}
#calendar .ctr-box .btn-cal {position: relative;float: left;width: 25px;height: 25px;margin-top: 5px;font-size: 16px;cursor: pointer;border: none;background: none;}
#calendar .ctr-box .btn-cal:after {content: '<';position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 25px;font-weight: bold;font-size: 20px;}
#calendar .ctr-box .btn-cal.next {float: right;}
#calendar .ctr-box .btn-cal.next:after {content: '>';}
#calendar .cal-table { width: 100%;}
#calendar .cal-table thead th { width: 14.2857%; padding-bottom: 5px;font-size: 13px;font-weight:300;text-align: center; color:#333;}
#calendar .cal-table td { font-size: 15px;vertical-align: middle;}
#calendar .cal-table tbody td { font-size: 15px;vertical-align: middle; font-weight:500;}

#calendar .cal-table .day { position: relative;cursor: pointer; width:40px; height:40px; line-height:40px;border-radius: 50%; margin:0 auto 3px auto;}
#calendar .cal-table .today { background: #ffd255; color: #fff;}/*오늘날짜*/
#calendar .cal-table .re_done { background: #f35f51; color: #fff;}/*예약완료*/
#calendar .cal-table .re_wait { background: #fff; border:2px solid #f35f51; line-height:38px;}/*예약대기*/
#calendar .cal-table .noshow { background: #fff; border:2px solid #ccc; line-height:38px;}/*노쇼*/
#calendar .cal-table .le_done { background: #ddd; color: #999; }/*레슨완료*/

#calendar .cal-table .prev {color: #c2c2c2 !important;}
#calendar .cal-table .day-active { background: #ff8585; color: #fff;}
#calendar .cal-table .has-event:after {content: '';display: block;position: absolute;left: 0;bottom: 0;width: 100%;height: 4px;background: #FFC107;}
/*달력표시 도움말*/
#cal_help{ padding:0 20px;}
#cal_help ul:after{ display:block; content:""; clear:both;}
#cal_help li{ float:right; margin-left:10px; padding-left:11px; position:relative;}
#cal_help li span{ font-size:10px; color:#999;}
#cal_help li:before{ display:block; content:""; width:9px; height:9px; border-radius:50%; position:absolute; top:10px; left:0px;}
#cal_help li.ch01:before{ background:#ffd255;}
#cal_help li.ch02:before{ background:#f35f51;}
#cal_help li.ch03:before{ border:2px solid #f35f51;}
#cal_help li.ch04:before{ background:#cfcfcf;}
#cal_help li.ch05:before{ border:2px solid #cfcfcf;}


#lesson_list{ margin-top:20px;}
.les_list{ width:95%; margin:0 auto 5px auto; border:1px solid #ddd; border-radius:5px; background:#fff; box-shadow:2px 2px 5px rgba(95,95,95,0.1);}
.les_list dl{ position:relative; padding:13px 10px; height:46px; border-bottom:1px solid #eee; margin-bottom:0; font-size:1.1em;}
.les_list dl:last-child{ border-bottom:0;}
.les_list dl:after{ display:block; content:""; clear:both;}
.les_list dt{ float:left; width:95px;}
.les_list dd{ float:left; width:calc(100% - 95px); font-weight:bold; color:#999;}
.les_list .les_state{ position:absolute; top:10px; right:10px;}
.les_list .les_state span{ font-weight:bold; font-size:13px;}
.les_list .les_state .res_done{ color:#f35f51;}
.les_list .les_state .res_wait{ color:#999;}
.les_list .les_modify{ position:absolute; top:10px; right:70px;}
.les_list .les_modify a{ display:block; width:25px; height:25px; border-radius:50%; background:#f3d420; color:#444; line-height:25px; text-align:center;
font-size:12px;}


#lere_modal .modal-content{ position:relative;}
#lere_modal .modal-content .close{ position:absolute; top:15px; right:15px; font-size:35px; opacity:1; text-shadow:0; z-index:10;}
#lere_modal .modal-body{ padding:30px 20px;}

#lere_modal .lere_today{ font-size:1.6em; font-weight:bold; letter-spacing:-0.5px; color:#222; line-height:1.2em; margin-bottom:20px;}
#lere_modal .lere_today span{ display:block; font-size:13px; font-weight:500; color:#999;}

#lere_modal .lere_time p{ font-size:13px; font-weight:500; color:#999; margin-bottom:3px;}
#lere_modal .lere_time .check_bx input[type=checkbox] {display: none;}
#lere_modal .lere_time .check_bx input[type=checkbox] + label {cursor: pointer; width:calc(24% - 2px); text-align:center; margin:2px 1px;}
#lere_modal .lere_time .check_bx input[type=checkbox] + label > div {display:inline-block; width:100%; background:#eee; font-size:1.2em; color:#999;  border:3px solid #eee; border-radius:5px;line-height:30px; padding:0 10px;}
#lere_modal .lere_time .check_bx input[type=checkbox]:checked + label > div { border-color:#f3d420 ; background:#fff;color:#222 !important;}

#lere_modal .modal-footer{ padding:0 20px 20px; border:0;}
#lere_modal .lere_btn01{ text-align:right; width:100%; height:45px; line-height:45px; padding:0 20px; font-size:1.1em; font-weight:bold; color:#222;
 background:#f3d420; border-radius:5px; border:0;}
#lere_modal .lere_btn01 i{ color:rgba(250,250,250,0.7);}

#lere_modal .lere_modify{ text-align:center;}
#lere_modal .lere_modify a{ display:inline-block; width:calc(50% - 3px);}
#lere_modal .lere_modify .lere_btn02{ line-height:43px; padding:0 20px; font-size:1.1em; font-weight:bold; color:#fff;
 background:#f55f51; border-radius:5px; border:2px solid #f55f51; margin-right:1px;}
#lere_modal .lere_modify .lere_btn03{ line-height:43px; padding:0 20px; font-size:1.1em; font-weight:bold; color:#333;
 background:#fff; border-radius:5px; border:2px solid #ddd; margin-left:1px;}


/******레슨정보*/
#lesson_cont{ width:90%; margin:0 auto;}
.no_les_list{ text-align:center; font-size:12px; color:#999; padding:50px 0; background:#f5f5f5;}

#lesson_info{ padding:20px 0;}
#lesson_info .les_tits{ font-size:15px; font-weight:normal; color:#999;}
#lesson_info .les_tit{ font-size:1.9em; font-weight:bold; color:#222; line-height:1em; margin:5px 5px 2px 0; display:inline-block;}
#lesson_info .les_tit .les_tit_term{ font-size:18px;}
#lesson_info .les_tit_ico{ width:15px; display:inline-block; vertical-align:top;line-height:32px;}
#lesson_info .les_tit_ico img{ width:100%;}
#lesson_info .les_date{ font-size:13px; font-weight:bold; color:#888; margin-bottom:10px;}
#lesson_info .les_teacher{ font-size:1.2em; font-weight:bold; color:#222;}
#lesson_info .les_teacher span{ font-size:13px; color:#666;}
#lesson_info .les_teacher strong{ font-size:13px; color:#d7c074;}

#lesson_acc{}
#lesson_acc .panel{ border:0; margin-bottom:8px; background:#f3d420; border-radius:5px; padding:12px 0; font-size:1.3em; font-weight:600; color:#222;
 box-shadow:0px 0px 3px rgba(95,95,95,0.2);}
#lesson_acc .panel button{ border:0px; background:#fff; width:23px; height:23px; border-radius:50%; line-height:20px; text-align:center; margin:0px 20px 2px 20px; 
font-size:16px;color:#999; box-shadow:0 0 3px rgba(95,95,95,0.3);}
#lesson_acc .panel-heading{ background:#f3d420; position:relative; border:0; border-radius:5px;}
#lesson_acc .panel-title{ position:relative; font-weight:bold; color:#222;}
#lesson_acc .panel-title a{ display:block;}
#lesson_acc .panel-title i{ color:rgba(250,250,250,0.7);}
#lesson_acc .panel-title .arrow_down{ position:absolute; top:0px; right:0px; font-size:1.2em;}
#lesson_acc .panel-body{ border:1px solid #ddd; border-radius:5px; margin-top:5px; padding:5px 15px 5px 15px;/* height:400px; overflow:hidden;*/}

.les_scroll{ /*overflow-y:scroll; height:380px;*/}
#les_detail{/* width:95%;*/ width:100%;}
#les_detail ul{ border-bottom:1px dotted #ddd;}
#les_detail ul:last-child{ border-bottom:0;}
#les_detail li{ padding:10px 0;}
#les_detail .les_dtit{ position:relative; font-size:1.1em; font-weight:bold; margin-bottom:5px;}
#les_detail .les_dtit .ld_date{ font-size:1.1em; color:#222; display:inline-block; vertical-align:top; margin-right:5px;}
#les_detail .les_dtit .ld_count{ color:#f3d420; display:inline-block; vertical-align:top;}
#les_detail .les_dtit .ld_btn_wrap{ position:absolute; top:0px; right:0px; z-index:10;}
#les_detail .les_dtit .ld_lescont{ text-align:center; float:left;}
#les_detail .les_dtit .ld_lescont a{ display:block; width:25px; height:25px; border-radius:50%; background:#f5da41; line-height:25px; color:#222; font-size:12px;}
#les_detail .les_dtit .ld_movie{ float:left; margin-left:10px;}
#les_detail .les_dtit .ld_movie img{ width:50px;}
#les_detail .my_memo{ position:relative;}
#les_detail .my_memo textarea{ border:1px solid #ddd; background:#f5f5f5; border-radius:5px; width:100%; height:60px; font-size:12px; line-height:1.5em;
 overflow-y:scroll; outline:none;}
#les_detail .my_memo p{ text-align:left; font-size:11px; color:#222;}
#les_detail .my_memo .my_memo_btn{ position:absolute; bottom:0px; right:0px; z-index:10;}
#les_detail .my_memo .my_memo_btn .btn_memo{ border:0; background:#444; font-size:11px; border-radius:3px; color:#fff; padding:0 8px; line-height:22px;}
#les_detail .no_les_list{ background:#fff; padding:30px 0;}
/*동영상 모달*/
#lere_modal2 .modal-dialog{ margin:0;}
#lere_modal2 .modal-content{ border:0; border-radius:0;}
#lere_modal2 .modal-header{ display:none;}
#lere_modal2 .modal-body{ padding:0;}
#lere_modal2 .close{ font-size:25px; line-height:35px; color:#fff; opacity:1; position:absolute; top:10px; right:10px; z-index:10; width:35px; height:35px; border-radius:50%; background:#222;}
#lere_modal2 .close span{ display:block; margin-top:-5px;}
/*레슨내용보기 모달*/
#lere_modal3 .modal-header{ font-weight:bold; font-size:1.2em;}
#lere_modal3 .modal-body{ line-height:1.5em;}
#lere_modal3 .close{ font-size:30px; color:#222; opacity:1; position:absolute; top:10px; right:20px; z-index:10;}

/******레슨예약 확인*/
#less_lbox{}
.less_lbox{ border-bottom:1px solid #eee; padding:17px 15px; line-height:1.2em; position:relative;}
.less_lbox .less_tit{ font-size:11px; color:#999; letter-spacing:0; margin-bottom:3px;}
.less_lbox .less_tit .less_pro{ display:inline-block; padding-left:11px; position:relative;}
.less_lbox .less_tit .less_pro:before{ display:block; content:""; width:4px; height:4px; background:#f3d421; border-radius:50%; position:absolute; top:6px; left:2px;}
.less_lbox .less_info{}
.less_lbox .less_info p{ display:inline-block; margin-right:10px; font-size:14px; color:#222;}
.less_lbox .less_info span{ color:#222; font-size:1.1em; font-weight:500;}
.less_lbox .btn_less{ display:inline-block; line-height:26px; font-size:12px; font-weight:bold; padding:0 8px; border-radius:20px; position:absolute; top:50%; right:15px;
margin-top:-13px;}
.less_lbox .btn_less_ok{ background:#f35f51; color:#fff;}
.less_lbox .btn_less_no{ background:#ddd; color:#777;}
.less_lbox .btn_less_wait{ background:#f3d421; color:#222;}

/*레슨예약 확인 검색*/
#less_search_top{ background:#f3d421; padding:10px 10px; font-size:13px; height:45px;}
#hd_sch_open{ position:absolute; top:0px; right:0px; border:0; background:#d1b516; color:#fff; font-size:1.5em; width:45px; height:45px; text-align:center;}
#sch_close{ position:absolute; top:0px; right:0px; border:0; background:#d1b516; color:#fff; font-size:1.5em; width:45px; height:45px; text-align:center;}
.hd_div{ display:none;}

#less_search{ background:#f3d421; padding:10px 10px;}	
.le_sea01{ margin-bottom:5px;}
.le_sea01:after{ display:block; content:""; clear:both;}
.le_sea01 .input_search{ float:left; border:0; background:#fff; border-radius:5px; padding:0 10px; height:33px; width:100%;}
#less_search .btn_search{ float:left; font-family:"Font Awesome 5 Pro"; font-size:1.1em; border:0; width:37px; height:33px; background:#fff; border-radius:0 5px 5px 0;}

.le_sea02{ margin-bottom:5px;}
.le_sea02:after{ display:block; content:""; clear:both;}
.le_sea02 .input_search2{ float:left; border:0; background:#fff; border-radius:5px; padding:0 10px; width:calc(50% - 8px); height:33px; display:inline-block;}
.le_sea02 p{ float:left;text-align:center; width:15px; line-height:33px;}
#less_search .btn_search2{ font-family:"Font Awesome 5 Pro"; font-size:1.1em; border:0; width:37px; height:33px; background:#444; border-radius:5px; color:#fff;}
.le_sea02 .btn_search2{ float:left; margin-left:3px;}

.le_sea03:after{ display:block; content:""; clear:both;}
.le_sea03 .le_sea03_t{ float:left; font-size:1em; line-height:33px; font-weight:bold; color:#222; width:80px; background:#d1b516; border-radius:5px; text-align:center;}
.le_sea03 .le_sea03_c{ float:left; width:calc(100% - 85px); margin-left:5px;}
.le_sea03 .le_sea03_c:after{ display:block; content:""; clear:both;}
.le_sea03 .select_search{ float:left; height:33px; border:0; background-image:url(../img/select_arrow.gif); background-repeat:no-repeat; background-position:95% center;background-size:10px auto; width:calc(100% - 40px); margin-right:3px;}
.le_sea03 .btn_search2{ float:left;}

/*****패밀리사이트*/
#family a{ display:block; height:120px;}
#family .fs_box{ width:100%; height:120px; background-repeat: no-repeat; background-size:auto 120px; position:relative;}
#family .fs_box:first-child{ background-image:url(../img/family_bg01.png); }
#family .fs_box:nth-child(2){ background-image:url(../img/family_bg02.png); }
#family .fs_box:nth-child(3){ background-image:url(../img/family_bg03.png); }
#family .fs_box:nth-child(4){ background-image:url(../img/family_bg04.png); }
#family .fs_box:nth-child(5){ background-image:url(../img/family_bg05.png); }
#family .fs_box:nth-child(6){ background-image:url(../img/family_bg06.png); }
#family .fs_box:nth-child(7){ background-image:url(../img/family_bg07.png); }
#family .fs_box:nth-child(8){ background-image:url(../img/family_bg02.png); }
#family .fs_box:nth-child(9){ background-image:url(../img/family_bg01.png); }
#family .fs_box:nth-child(10){ background-image:url(../img/family_bg04.png); }
#family .fs_box:nth-child(11){ background-image:url(../img/family_bg05.png); }
#family .fs_box:nth-child(12){ background-image:url(../img/family_bg06.png); }
#family .fs_box:nth-child(13){ background-image:url(../img/family_bg07.png); }
#family .fsite_box{ background-position:right top; background-color: #fdc403;}
#family .fsite_box2{ background-position: left top; background-color: #f3eee0;}
#family .fs_txt{ padding:20px 0 0 30px; line-height:1em;}
#family .fs_txt2{ position:absolute; top:0px; right:30px;}
#family .fs_txt span{ font-size:10px; color:rgba(0,0,0,0.4); letter-spacing:0;}
#family .fs_txt h1{ font-size:1.4em; font-weight:bold; color:#222; margin:5px 0 20px 0;}
#family .fs_txt .btn_go{ display:inline-block; font-size:13px; padding:5px 10px; border-top:1px solid rgba(0,0,0,0.3); border-bottom:1px solid rgba(0,0,0,0.3); color:rgba(0,0,0,0.7);}

/*****패밀리사이트 - 프로소개*/
#sub_family{ overflow-x:scroll; border-bottom:1px solid #ddd; background:#fff;}
#sub_family {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
#sub_family::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
#sub_family ul{ width:100%; min-width:580px;}
#sub_family ul:after{ display:block; content:""; clear:both;}
#sub_family li{ float:left;}
#sub_family li a{ display:block; line-height:50px; padding:0 12px; font-size:1.2em; font-weight:400; color:#777;}
#sub_family li a.on{ font-weight:bold; color:#222; position:relative;}
#sub_family li a.on:after{ display:block; content:""; width:100%; height:3px; background:#f3d421; position:absolute; bottom:-1px; left:0;}

#site_pro{ text-align:center; padding:30px 10px 20px 10px;}
#site_pro .site_title{ font-size:1.6em; font-weight:bold; color:#222; line-height:1em; margin-bottom:20px;}
#site_pro .site_title p{ font-size:12px; font-weight:normal; color:#777; margin-top:5px;}

#site_pro .spro_list:after{ display:block; content:""; clear:both;}
#site_pro .spro_list li{ float:left; width:calc(50% - 16px); height:180px; margin:8px 8px; background:#fff; border-radius:10px; padding:25px 20px; box-shadow:0 1px 6px rgba(95,95,95,0.2);}
#site_pro .spro_list li .spro_img{ width:80px; height:80px; border-radius:50%; overflow:hidden; margin:0 auto 20px auto;}
#site_pro .spro_list li .spro_img img{ width:100%;}
#site_pro .spro_list .spro_name{ font-size:1.2em; font-weight:bold; color:#222;}
#site_pro .spro_list .spro_name span{ color:#f3d421;}

#spro_Modal{}
#spro_Modal .close{ font-size:35px;opacity:0.8; position:absolute; top:10px; right:20px; z-index:10;}
#spro_Modal .spro_top{ border-bottom:1px solid #eee; padding:20px 0; }
#spro_Modal .spro_top .spro_img{ width:100px; height:100px; border-radius:50%; overflow:hidden; margin:0 auto 20px auto;}
#spro_Modal .spro_top .spro_img img{ width:100%;}
#spro_Modal .spro_top .spro_name{ font-size:1.5em; font-weight:bold; color:#222; text-align:center;}
#spro_Modal .spro_top .spro_name span{ color:#f3d421;}
#spro_Modal .spro_cont{ padding:20px 10px 30px 10px; font-size:1em; line-height:1.8em;}
#spro_Modal .spro_cont h1{ font-size:1.2em; font-weight:bold; color:#222; margin-bottom:8px;}

/*로딩바*/
#mask { position:fixed; z-index:9000; background-color:#000000; display:none; left:0; top:0; width: 100% !important; }
#loadingImg { position:fixed; left:50%; top:50%; display:none; z-index:10000;transform: translate(-50%, -50%); }
#loadingImg img {
    width: 80px;
    height: 80px;
}