@charset "UTF-8";

/* 탭 */
.page_tab {margin-bottom:65px}
.page_tab .page_tab_inner {display:flex;border-radius:4px;background-color:#f5f5f5}
.page_tab .page_tab_inner .tab {width:50%;text-align:center}
.page_tab .page_tab_inner .tab > a {display:block;color:#757575;font-size:20px;line-height:64px;border-radius:4px;background-color:transparent}
.page_tab .page_tab_inner .tab.current {}
.page_tab .page_tab_inner .tab.current > a {font-weight:500;color:#fff;background-color:#098a5a}

/* 추가페이지 공통 */
.page_tit {margin-bottom:45px;padding-left:20px;font-size:24px;line-height:1;font-weight:700;color:#212121;position:relative}
.page_tit::before {display:inline-block;width:4px;height:22px;content:"";background-color:#098a5a;position:absolute;left:0;top:0}
.cstyle input[type="checkbox"] {border-radius:3px;vertical-align:sub}
.cstyle input[type="checkbox"]::placeholder {}
.cstyle input[type="checkbox"]::-webkit-input-placeholder {}
.cstyle input[type="checkbox"]:-ms-input-placeholder {}
.cstyle input[type="checkbox"]:checked {background-color:#098a5a;background-image:url(/license/images/advance/sub/ic_check.png);background-position:center;background-repeat:no-repeat;background-size:10px auto;border-color:#098a5a}

/* 일정 영역 */
.new_calendar {}
.new_calendar::after {display:block;height:0;content:"";clear:both;visibility:hidden}
.new_calendar .left_cont {display:inline-block;float:left;width:280px;vertical-align:top}
.new_calendar .right_cont {width:calc(100% - 320px);min-height:320px;float:right;margin-left:40px;vertical-align:top;position:relative}
.new_calendar .right_cont::before {display:inline-block;width:23px;height:173px;content:"";background-image:url(/license/images/advance/sub/bg_arrow.png);background-position:left top;background-repeat:no-repeat;background-size:cover;position:absolute;left:-31px;top:50%;transform:translateY(-50%)}
.new_calendar .page_tit {}

/* 일정 선택 리스트 */
.new_calendar .select_list {border:1px solid #eee;border-radius:10px}
.new_calendar .select_tit {padding:17px 25px;font-weight:700;text-align:center;font-size:17px;color:#212121;background-color:#ecfaf5;border-radius:10px 10px 0 0}
.new_calendar .check_list {}
.new_calendar .check_list .inner {}
.new_calendar .check_list .check {color:#212121;border-bottom:1px solid #eee;position:relative}
.new_calendar .check_list .check:last-child {border-bottom:0}
.new_calendar .check_list .check label {display:block;padding:19px 25px 19px 55px;position:relative;z-index:2}
.new_calendar .check_list .check input[type="checkbox"] {position:absolute;left:25px;top:22px}
.new_calendar .check_list .check .txt {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden}

.new_calendar .check_list .check.on {}
.new_calendar .check_list .check.on::after {display:block;width:100%;height:100%;content:"";background-color:transparent;border:1px solid #098a5a;position:absolute;left:-1px;top:-1px;z-index:1}
.new_calendar .check_list .check:last-child::after {border-radius:0 0 10px 10px}
.new_calendar .check_list .check.on label {}
.new_calendar .check_list .check.on input[type="checkbox"] {}

/* 일정 달력 */
.new_calendar .calendar_top {display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}
.new_calendar .calendar_top .category {display:flex;flex-wrap:nowrap;align-items:center}
.new_calendar .calendar_top .category .cbox {margin-right:23px}
.new_calendar .calendar_top .category .cbox:last-child {margin-right:0}
.new_calendar .calendar_top .category .cbox .color {display:inline-block;width:24px;height:10px;margin-right:8px;font-size:0;line-height:0;vertical-align:middle}
.new_calendar .calendar_top .category .cbox .color.c1 {background-color:#1875ff}
.new_calendar .calendar_top .category .cbox .color.c2 {background-color:#672fc0}
.new_calendar .calendar_top .category .cbox .color.c3 {background-color:#d10dcf}
.new_calendar .calendar_top .category .cbox .color.c4 {background-color:#ff3c00}

.new_calendar .calendar_top .calendar_tab {display:flex;border:1px solid #dcdcdc;background-color:#f5f5f5;border-radius:40px;position:relative;top:-10px}
.new_calendar .calendar_top .calendar_tab .tab {text-align:center;line-height:38px}
.new_calendar .calendar_top .calendar_tab .tab > button {display:block;height:100%;padding:6px 33px 8px 33px ;font-size:16px;color:#767676;border:1px solid transparent;background-color:transparent;border-radius:40px;transition:0.2s}
.new_calendar .calendar_top .calendar_tab .tab > button:hover {color:#098a5a;text-decoration:underline}
.new_calendar .calendar_top .calendar_tab .tab > button:focus {outline:2px solid #212121}
.new_calendar .calendar_top .calendar_tab .tab.current {}
.new_calendar .calendar_top .calendar_tab .tab.current > button {height:calc(100% + 2px);margin-top:-1px;font-weight:500;color:#098a5a;border-color:#7ed1b2;background-color:#ecfaf5}


.new_calendar .calendar_wrap {}
.new_calendar .calendar_table {border:1px solid #e1e1e1;border-radius:10px}
.new_calendar .calendar_table table {}
.new_calendar .calendar_table th {color:#212121;word-break:keep-all;background-color:#f2fcf8;border-bottom:1px solid #e1e1e1}
.new_calendar .calendar_table td {padding:15px 5px;color:#212121;word-break:keep-all;border-bottom:1px solid #e1e1e1;position:relative}
.new_calendar .calendar_table thead {}
.new_calendar .calendar_table thead th {padding:22px 22px 22px 25px;font-weight:700;text-align:center;font-size:17px;line-height:1}
.new_calendar .calendar_table thead th:first-child {border-right:1px solid #e1e1e1;border-radius:10px 0 0 0}
.new_calendar .calendar_table thead th:last-child {border-radius:0 10px 0 0}
.new_calendar .calendar_table tbody {}
.new_calendar .calendar_table tbody th {padding:15px 22px 15px 25px;text-align:left;border-right:1px solid #e1e1e1}
.new_calendar .calendar_table tbody td {}
.new_calendar .calendar_table tbody tr:last-child th, 
.new_calendar .calendar_table tbody tr.last th {border-bottom:0;border-radius:0 0 0 10px}
.new_calendar .calendar_table tbody tr:last-child td, 
.new_calendar .calendar_table tbody tr.last td {border-bottom:0}
.new_calendar .calendar_table .subject {width:230px}
.new_calendar .calendar_table .month {}
.new_calendar .calendar_table .city {color:#098a5a;font-size:14px}
.new_calendar .calendar_table .city .icon {margin-right:2px;font-size:16px;vertical-align:text-top}

.new_calendar .calendar_table .period_box {margin-bottom:4px;position:relative}
.new_calendar .calendar_table .period_box:last-child {margin-bottom:0}

.new_calendar .calendar_table .period {display:block;width:100%;margin-top:5px;padding:12px 13px;line-height:1;text-align:center;border-left:4px solid} 
.new_calendar .calendar_table .period:first-child {margin-top:0}
.new_calendar .calendar_table .period .date {font-weight:600}
.new_calendar .calendar_table .period.c1 {background-color:#e5f6ff;border-left-color:#1875ff}
.new_calendar .calendar_table .period.c1 .date {color:#1875ff}
.new_calendar .calendar_table .period.c2 {background-color:#f7f2ff;border-left-color:#672fc0}
.new_calendar .calendar_table .period.c2 .date {color:#672fc0}
.new_calendar .calendar_table .period.c3 {background-color:#fceeff;border-left-color:#d10dcf}
.new_calendar .calendar_table .period.c3 .date {color:#d10dcf}
.new_calendar .calendar_table .period.c4 {background-color:#fff2e2;border-left-color:#ff3c00}
.new_calendar .calendar_table .period.c4 .date {color:#ff3c00}
.new_calendar .calendar_table .period:hover .date, 
.new_calendar .calendar_table .period:focus .date {text-decoration:underline}

.new_calendar .calendar_table .period_pop {display:none;width:320px;padding:20px 15px;background-color:#fff;border:1px solid #7ed1b2;border-radius:10px;box-shadow:0 0 7px rgba(0,0,0,0.15);position:absolute;left:50%;bottom:50px;z-index:10;transform:translateX(-50%)}
.new_calendar .calendar_table .period_pop::after {display:block;width:17px;height:18px;content:"";background-image:url(/license/images/advance/sub/pop_bg_arrow.png);background-repeat:no-repeat;background-position:left top;background-size:cover;position:absolute;bottom:-18px;left:50%;transform:translateX(-50%)}
.new_calendar .calendar_table .pop_cont {}
.new_calendar .calendar_table .pop_cont .dl {margin-bottom:8px}
.new_calendar .calendar_table .pop_cont .dl:last-child {margin-bottom:0}
.new_calendar .calendar_table .pop_cont .dl::after {display:block;height:0;content:"";clear:both;visibility:hidden}
.new_calendar .calendar_table .pop_cont .dt {display:inline-block;float:left;width:76px;margin-right:10px;color:#098a5a;font-size:14px;line-height:24px;font-weight:500;text-align:center;background-color:#ecfaf5}
.new_calendar .calendar_table .pop_cont .dd {display:inline-block;width:calc(100% - 86px)}
.new_calendar .calendar_table .pop_cont .bold {font-weight:700 !important}


@media screen and (max-width:1400px){
	/* 탭 */
	.page_tab {margin-bottom:55px}
	.page_tab .page_tab_inner .tab > a {font-size:17px;line-height:54px}

	/* 추가페이지 공통 */
	.page_tit {margin-bottom:28px;font-size:20px}
	.page_tit::before {height:18px;top:1px}

	/* 일정 영역 */
	.new_calendar .right_cont {width:calc(100% - 310px);margin-left:30px}
	.new_calendar .right_cont::before {width:20px;height:150px;left:-26px}

	/* 일정 선택 리스트 */
	.new_calendar .select_tit {padding:15px 22px;font-size:16px}
	.new_calendar .check_list .check {font-size:15px}
	.new_calendar .check_list .check label {padding:16px 22px 16px 45px}
	.new_calendar .check_list .check input[type="checkbox"] {width:18px;height:18px;margin-right:10px;left:19px;top:19px}

	/* 일정 달력 */
	.new_calendar .calendar_top {align-items:flex-start;margin-bottom:9px}
	.new_calendar .calendar_top .calendar_tab .tab > button {padding:6px 28px 8px 28px;font-size:15px}
	.new_calendar .calendar_top .category .cbox {font-size:15px}
	.new_calendar .calendar_table th {font-size:15px}
	.new_calendar .calendar_table td {padding:15px 5px;font-size:15px}
	.new_calendar .calendar_table thead th {padding:19px 20px;font-size:16px}
	.new_calendar .calendar_table tbody th {padding:15px 15px 15px 20px}
	.new_calendar .calendar_table .subject {width:215px}
	.new_calendar .calendar_table .period {padding:10px 5px;font-size:15px}
	.new_calendar .calendar_table .city {font-size:13px}
	.new_calendar .calendar_table .city .icon {font-size:14px;vertical-align:baseline}
	.new_calendar .calendar_table .period_pop {padding:17px 13px;bottom:47px}
}

@media screen and (max-width:1200px){
	/* 탭 */
	.page_tab {margin-bottom:35px}
	
	/* 추가페이지 공통 */
	.page_tit {margin-bottom:22px;padding-left:15px;font-size:18px}
	.page_tit::before {height:16px;top:2px}

	/* 일정 영역 */
	.new_calendar .left_cont {display:block;float:none;width:auto}
	.new_calendar .right_cont {display:block;float:none;width:auto;margin:28px auto 0 auto}
	.new_calendar .right_cont::before {display:none}

	/* 일정 선택 리스트 */
	.new_calendar .select_list {border:0;border-radius:0;position:relative}
	.new_calendar .select_tit {padding:10.5px 20px 12.5px 20px;font-size:15px;text-align:left;cursor:pointer;border:1px solid #098a5a;border-radius:8px;position:relative}
	.new_calendar .select_tit::before {display:block;content:"";border:4px solid transparent;border-top:5px solid #333;position:absolute;right:20px;top:calc(50% + 2px);transform:translateY(-50%)}
	.new_calendar .select_tit.on {color:#098a5a}
	.new_calendar .select_tit.on::before {border-top:4px solid transparent;border-bottom:5px solid #098a5a;top:calc(50% - 2px)}
	.new_calendar .check_list {display:none;width:100%;border:1px solid #098a5a;border-radius:8px;background-color:#fff;box-shadow:0 4px 4px rgba(0,0,0,0.2);overflow:hidden;position:absolute;left:0;top:52px;z-index:10}
	.new_calendar .check_list .inner {display:block;max-height:215px;overflow-y:auto}
	.new_calendar .check_list .check {width:auto}
	.new_calendar .check_list .check label {padding:10.5px 22px 10.5px 43px}
	.new_calendar .check_list .check input[type="checkbox"] {width:16px;height:16px;top:12px;left:20px}
	.new_calendar .check_list .check.on {color:#098a5a;font-weight:500}
	.new_calendar .check_list .check.on::after {display:none}
	.new_calendar .check_list .check.on label {background-color:#f7f7f7}
	
	/* 일정 달력 */
	.new_calendar .calendar_top {align-items:flex-end;margin-bottom:18px}
	.new_calendar .calendar_top .calendar_tab {top:auto}
	.new_calendar .calendar_top .calendar_tab .tab > button {padding:4px 24px 5px 24px;font-size:14px}
	.new_calendar .calendar_top .category .cbox {margin-right:18px;font-size:14px}
	.new_calendar .calendar_top .category .cbox .color {width:18px;height:8px;margin-right:6px}
	.new_calendar .calendar_table td {padding:12px 5px;font-size:14px}
	.new_calendar .calendar_table thead th {padding:17px 10px;font-size:15px}
	.new_calendar .calendar_table tbody th {padding:12px 12px 12px 15px}
	.new_calendar .calendar_table .period {font-size:14px}
	.new_calendar .calendar_table .period_pop {width:100%;height:100%;padding:0;border:0;background-color:transparent;box-shadow:none;position:fixed;left:50%;top:50%;bottom:auto;z-index:100;transform:translate(-50%, -50%)}
	.new_calendar .calendar_table .period_pop::after {width:100%;height:100%;background-image:none;background-color:rgba(0,0,0,0.3);position:fixed;left:0;top:0;z-index:-1;transform:translate(0)}
	.new_calendar .calendar_table .period_pop .inner_wrap {display:flex;align-items:center;justify-content:center;width:100%;height:100%}
	.new_calendar .calendar_table .pop_cont {width:96%;max-width:600px;padding:15px;background-color:#fff;border:2px solid #7ed1b2;border-radius:10px;box-shadow:0 0 7px rgba(0,0,0,0.15)}
	.new_calendar .calendar_table .pop_cont .dl {margin-bottom:6px}
	.new_calendar .calendar_table .pop_cont .dt {width:72px;margin-right:8px;font-size:13px;line-height:22px}
}

@media screen and (max-width:850px){
	/* 일정 달력 */
	.new_calendar .calendar_wrap {border:1px solid #e1e1e1;border-radius:8px;overflow-y:auto}
	.new_calendar .calendar_table {width:840px;border:0}
	.new_calendar .calendar_table .subject {position:sticky;left:0;top:0;z-index:9}
	.new_calendar .calendar_table .subject::after {display:none;width:2px;height:100%;content:"";box-shadow:2px 0 4px rgba(0,0,0,0.25);position:absolute;right:0;top:0;z-index:1}
	.new_calendar .calendar_table .subject.sticky::after {display:block}
	/*.new_calendar .calendar_table .period_pop {bottom:55px}
	.new_calendar .calendar_table .period_pop::after {width:13px;height:14px;bottom:-14px}
	.new_calendar .calendar_table tbody tr:first-child .period_pop, 
	.new_calendar .calendar_table tbody tr:nth-child(2) .period_pop {bottom:auto;top:55px}
	.new_calendar .calendar_table tbody tr:first-child .period_pop::after, 
	.new_calendar .calendar_table tbody tr:nth-child(2) .period_pop::after {bottom:auto;top:-14px;transform:translateX(-50%) rotate(180deg)}	*/
}

@media screen and (max-width:767px){
	/* 탭 */
	.page_tab {margin-bottom:30px}
	.page_tab .page_tab_inner .tab > a {font-size:15px;line-height:42px}

	/* 추가페이지 공통 */
	.page_tit {margin-bottom:18px;padding-left:12px;font-size:17px}

	/* 일정 선택 리스트 */
	.new_calendar .select_tit {padding:8.5px 20px 10.5px 15px;font-size:14px}
	.new_calendar .select_tit::before {right:15px}
	.new_calendar .check_list {top:45px}
	.new_calendar .check_list .check {font-size:14px}

	/*.new_calendar .select_tit {padding:11.5px 15px 13.5px 15px;font-size:14px}
	.new_calendar .check_list .check {width:calc(100% / 2);font-size:14px}
	.new_calendar .check_list .check label {padding:11px 15px 11px 38px}
	.new_calendar .check_list .check input[type="checkbox"] {width:16px;height:16px;margin-right:7px;top:15px;left:15px}*/

	/* 일정 달력 */
	.new_calendar .calendar_top {margin-bottom:14px}
	.new_calendar .calendar_top .category .cbox {margin-right:15px;font-size:13px}
	.new_calendar .calendar_top .category .cbox .color {width:13px;height:7px;margin-right:5px}
	.new_calendar .calendar_table th {font-size:14px}
	.new_calendar .calendar_table td {padding:9px 5px}
	.new_calendar .calendar_table thead th {padding:15.5px 10px;font-size:14px}
	.new_calendar .calendar_table tbody th {padding:9px 9px 9px 12px}
	.new_calendar .calendar_table .subject {width:195px}
	.new_calendar .calendar_table .period {border-left-width:3px}
	/*.new_calendar .calendar_table .period_pop {padding:13px 10px}*/
	.new_calendar .calendar_table .pop_cont .dt {width:67px;font-size:12px}
	.new_calendar .calendar_table .pop_cont .dd {width:calc(100% - 75px)}
}
@media screen and (max-width:640px){

}
@media screen and (max-width:576px){
	/* 추가페이지 공통 */
	.page_tit {font-size:16px}
	.page_tit::before {height:15px}

	/* 일정 선택 리스트 */
	/*.new_calendar .select_tit {padding:9.5px 15px 11.5px 15px;font-size:13px}
	.new_calendar .check_list .check {;font-size:13px}
	.new_calendar .check_list .check label {padding:10px 15px 10px 32px}
	.new_calendar .check_list .check input[type="checkbox"] {width:15px;height:15px;top:13px;left:11px}*/

	/* 일정 달력 */
	.new_calendar .calendar_top {display:block;padding-top:45px;text-align:center;position:relative}
	.new_calendar .calendar_top .category {justify-content:center}
	.new_calendar .calendar_top .calendar_tab {width:175px;position:absolute;left:50%;top:0;transform:translateX(-50%)}
	.new_calendar .calendar_top .calendar_tab .tab {flex:1}
	.new_calendar .calendar_top .calendar_tab .tab > button {width:100%;font-size:13px}
	.new_calendar .calendar_table th {font-size:13px}
	.new_calendar .calendar_table td {padding:7px 5px}
	.new_calendar .calendar_table thead th {padding:13.5px 10px;font-size:13px}
	.new_calendar .calendar_table .city {font-size:12px}
	.new_calendar .calendar_table .city .icon {margin-right:1px;font-size:12px}
	.new_calendar .calendar_table .subject {width:180px;padding:7px 9px}
	.new_calendar .calendar_table .period {font-size:13px}
}

@media screen and (max-width:480px){

}

@media screen and (max-width:420px){
	/* 일정 선택 리스트 */
	.new_calendar .check_list .inner {display:block}
	.new_calendar .check_list .check {width:auto}

	/* 일정 달력 */
	.new_calendar .calendar_top .category .cbox {margin-right:12px}
	.new_calendar .calendar_top .category .cbox .color {width:9px;margin-right:4px}
	.new_calendar .calendar_table {width:705px}
	.new_calendar .calendar_table .subject {width:125px}
}