/**/
.class_tit{color:#000;}
.class_tab{border-radius:5px; border:1px solid #6a6a6a; overflow:hidden}
.class_tab a{float:left; display:block; width:25%; color:#000; text-align:center; background-color:#efefef;font-family:"GmarketSans"; font-weight:500}
.class_tab a:hover,.class_tab a.on{background-color:#0068b7; color:#fff;}

.class_tb{}

.tb_body{}
.tb_body li{background-color:#efefef;
transition: box-shadow 0.25s ease-in-out;
-webkit-transition: box-shadow 0.25s ease-in-out;
-moz-transition: box-shadow 0.25s ease-in-out;
-ms-transition: box-shadow 0.25s ease-in-out;
-o-transition: box-shadow 0.25s ease-in-out;}
.tb_body li:hover{box-shadow: inset 0 0 0 2px #0068b7; }

.tb1 h6,.tb1 span,.tb2 span,.tb3 a{display:inline-block; vertical-align:middle;}
.tb1 h6{background-color:#fff; color:#000; border:1px solid #6a6a6a; border-radius:5px; text-align:center; font-weight:300}
.tb1 span,.tb2 span{color:#000;  }
.tb3 a{color:#fff; text-align:center; border-radius:5px;}
.state1{background-color:#0068b7}
.state2{background-color:#e8340c}
.state3{background-color:#f18e1e}


/**/
.class_info{}
.class_info li{float:left;  }
.class_info li div{background-color:#efefef; vertical-align:middle; text-align:center; border-radius:5px; overflow:hidden}
.class_info li h6{color:#000; font-family :"GmarketSans", Malgun Gothic, "맑은 고딕" ; font-weight:400}
.class_info li span{display:block; color:#0068b7; font-family :"GmarketSans", Malgun Gothic, "맑은 고딕"; font-weight:700}
.class_info li.on div{background-color:#0068b7}
.class_info li.on h6{color:#fff}
.class_info li.on span{color:#fff;}
 
 .class_info .info1 li{width:33.33%;}



.calandar_wrap{}
.calandar_wrap .month{text-align:center;}
.calandar_wrap .month .month_btn,.calandar_wrap .month strong{display:inline-block; vertical-align:middle;}
.calandar_wrap .month .month_btn{color:#0068b7}
.calandar_wrap .month .month_btn i{display:block;}
.calandar_wrap .month strong{color:#000; vertical-align:top}


.cal_cate{}
.cal_cate div{float:left;text-align:center;background-color:#efefef;color:#000;font-family:Noto Sans KR DemiLight;border-radius: 5px;}
.cal_cate div span{display:inline-block;vertical-align:middle;text-align: left;line-height: 1.2em;}
.cal_cate div img{vertical-align:middle;display:inline-block}

.calandar table{border-collapse: separate;}
.calandar td{border: 0.5px solid #dcdcdc;border-radius: 5px;vertical-align:top;}
.calandar td.class_date{border:1px solid #e8340c; }
.calandar tr td:first-child,.calandar tr td:last-child{background-color:#eee}
.calandar td .cal_icon{text-align:center;}
.calandar td .date{display:block; color:#000}
.calandar td .date strong{color:#0068b7; font-weight:900}

.holiday{text-align:center;}


.ready{text-align:center;}
.ready span,.ready strong{display:block;}
.ready a{display:inline-block;}
.ready span{font-family :"GmarketSans", Malgun Gothic, "맑은 고딕" ; font-weight:400}
.ready span,.ready strong{color:#e8340c; word-break:keep-all}
.ready strong{font-weight:bold;}




.bg_box{position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); z-index:99; }
.pop_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);/* display:none */}
.pop_box .close{position:absolute; }

.comment_pop{}
.comment_pop h3{}

.comment_box{border-radius:5px; border:1px solid #dcdcdc; overflow:hidden; }
.comment_box h6{background-color:#eee; color:#282828; border-bottom:1px solid #dcdcdc}
.comment_box .selec_date{background-color:#eee;padding: 2%;}
.comment_box:last-child{margin-bottom:0;}
.comment_box .comment p{color:#000;}

.delay_box{}
.delay_box p{color:#000; line-height:1.9em;}
.delay_box p strong{display:block; font-weight:900}
.delay_box p span{display:block;  }
.delay_box div{display:inline-block; background-color:#eee; border-radius:5px; color:#282828}

.delay_pop .btn_submit{display:block; }



.delay_pop .nice-select,.delay_pop input[type=text]{border:1px solid #6a6a6a;background-color: #ffffff;font-family: "GmarketSans", Malgun Gothic;font-weight:500;padding: 0% 1%;border-radius:5px;vertical-align: middle;float: left;}
.delay_pop .nice-select .current{color:#000;  font-weight:500}
.delay_pop  input[type=text]{width: 44%;cursor: pointer;}
.delay_pop  .nice-select{width: 24%;margin-left: 4%;} 



@media (min-width:1200px){
/**/
.mypage .contents{background:url(/on-tact/images/pc/sub5/deco_left.png) no-repeat 0 100%;}
.class_tit{font-size:35px; margin-bottom:35px}
.class_tit img{margin-right:15px;}
.class_tab{margin:0 0 35px;}
.class_tab a{height:60px; line-height:65px; font-size:25px; ;}
	
.class_tb{margin-bottom:30px; }	

.tb_head{border-radius:5px;background-color:#000;}
.tb_head span{float:left; display:block; height:60px; line-height:60px; color:#fff; font-size:18px; text-align:center;}

.th1{width:400px;}
.th2{width:280px;}
.th3{width:100px;}
.th4{width:130px;}


.tb_body li{margin-top:10px; padding:30px 0;}
.tb_body li>div{float:left; text-align:center;}
.tb1 {width:396px;}
.tb2 {width:380px;}
.tb3 {width:420px;padding: 0 16px;}

.tb1 h6{width:145px; height:40px; line-height:38px; margin-right:18px;}
.tb1 h6,.tb1 span,.tb2 span{font-size:18px;}

.tb2 span{height:40px; line-height:38px;  }
 
.tb3 a{width:102px;height:40px;line-height:40px;font-size:16px;margin-right: 27px;}	
.tb3 a strong{display:none;}


/***/
.class_info li div{padding:45px 0;}

.class_info .info1 {margin:0 -5px 15px;} 
.class_info .info1 li{padding:0 5px} 
.class_info .info1 h6{font-size:30px;}
.class_info .info1 span{font-size:24px; margin-top:24px;}

.class_info .info2{margin: 0 -3px  ;}
.class_info .info2 li{width:12.5%; padding:0 3px;}
.class_info .info2 h6{font-size:23px;}
.class_info .info2 span{font-size:50px; margin-top:15px;}


.calandar_wrap .month .month_btn{font-size:65px}
.calandar_wrap .month strong{font-size:80px; margin:0 60px;}

.cal_cate{margin: 35px -6px;}
.cal_cate div{width: 230px;margin: 0 6px;font-size:18px;padding: 10px 0;}
.cal_cate div img{margin-right:18px}

.calandar{margin:0 -6px;}
.calandar table{border-spacing: 6px;width: 100%;}


.calandar td{padding:8px 10px;}
.calandar td .colwrap{min-height:160px}
.calandar td .date{font-size:15px}
.calandar td .date font{font-size:30px; margin-right:10px;}
.calandar td .date strong{font-size:18px; margin-left:20px;}

.cal_icon_wrap{margin:38px 0;}
.cal_icon{width:40px;}
.cal_icon_wrap .cal_icon{margin:0 2px}

.holiday{padding:15px 0}
.holiday img{width:auto;}

.ready {padding: 15px 0 0;}
.ready span{font-size:21px;}
.ready strong{font-size:30px;margin: 5px 0;}




.pop_box{width:860px; padding:50px 30px 30px;}
.pop_box .close{top:30px; right:30px;}

.pop_box h3{font-size:30px; margin-bottom:30px;}
.pop_box h3 span{margin-left:14px;}
.delay_pop h3 span{margin-left:30px;}

.comment_box{margin-bottom:10px;}
.comment_box h6{padding:0 22px; font-size:22px; line-height:64px;}
.comment_box .comment{width:100%;padding:24px 28px; min-height:120px;}
.comment_box textarea.comment{font-size:15px; border:0}
.comment_box .comment p{font-size:15px; line-height:1.4em;}

.delay_box p strong{font-size:20px; margin-bottom:15px;}
.delay_box p{font-size:16px;}
.delay_box p span{margin-top:15px; font-size:18px;}
.delay_box div{margin:15px 0 10px; padding:10px 20px; font-size:22px;}

.delay_pop .btn_submit{width:200px; margin:10px auto 0; font-size:22px; text-align:center; height:50px; line-height:55px;}

.delay_pop  input[type=text], .delay_pop  .nice-select .current{font-size:25px; height:60px; line-height:64px;}
.delay_pop  .nice-select .list{height: 100px;}
}
@media (min-width: 650px){
.cal_cate br{display:none;}
.calandar td .cal_icon_wrap{text-align:center;}
.calandar td .cal_icon_wrap>a{display:inline-block; vertical-align:middle;}	

}
@media (max-width:1199px){
.tb_head{display:none;}


.tb1 h6,.th3{margin-right:3%;}
.tb1 h6,.tb2 span,.th4{width: 32%;padding: 2.5vw 0;}
.tb1 span,.tb2 .th2{width: 65%;}
.tb2 span{float:right;}

.th3{border:1px solid #6a6a6a; border-radius:5px; text-align:center; font-weight:300} 
.tb2{margin:2% 0}
.tb2 span{font-weight:300;}

.tb3 .state2{margin:0 2%;}
.tb3 a strong{display:inline-block;}
.tb3 a font{font-weight:bold;}	


/***/
.class_info .info2 li{width:25%; padding:0.5vw}
}
@media (min-width:650px) and (max-width:1199px){

/**/
.class_tit{font-size:114%; margin-bottom:4vw}
.class_tit img{width:25px; margin-right:15px;}

.class_tab {margin:0 0 4vw;}
.class_tab a{padding: 2vw 0 1.5vw;font-size:100%;}
	
.class_tb{margin-bottom:30px; }	

.tb_body li{margin-top:10px; padding:2.5vw;}
 
.tb1 span,.tb2 span{font-size:100%;}
.tb1 h6,.th3,.th4{font-size:85% !important}
.th2{padding:1.3vw 0 !important;}

.tb3 a{}	



/***/
.class_info li div{padding:4vw 0;}

.class_info .info1 {margin:0 -1vw 4vw;} 
.class_info .info1 li{padding:0 1vw} 
.class_info .info1 h6{font-size:100%; margin-bottom:2.5vw}
.class_info .info1 span{font-size:100%;line-height:1.4em; height:2.8em}

.class_info .info2{margin: 0 -1vw;}
.class_info .info2 h6{font-size:100%;}
.class_info .info2 span{font-size:120%; margin-top:15px;}



.calandar_wrap .month .month_btn{font-size:120%}
.calandar_wrap .month strong{font-size:160%; margin:0 5vw;}

.cal_cate{margin: 4vw -0.8%;}
.cal_cate div{width: 18.4%;margin: 0 0.8%;font-size:60%;padding:1vw 0;}
.cal_cate div img{margin-right:4px}


.calandar{margin:0 -0.6vw;}
.calandar table{border-spacing: 0.6vw;width: 100%;}


.calandar td{padding:1vw 0.5vw;}
.calandar td .colwrap{min-height:15vw}
.calandar td .date{font-size:50%}
.calandar td .date font{font-size:200%; margin-right:5%}
.calandar td .date strong{display:block; font-size:120%;}


.cal_icon_wrap{margin: 2vw 0;}
.cal_icon{width:4vw;}
.cal_icon_wrap .cal_icon{margin:  2px;}


.holiday{padding:3vw 0 0}
.holiday img{width:8vw;}

.ready {padding:2vw 0 0;}
.ready span{font-size:60%;}
.ready strong{font-size:85%;margin:3px 0;}



 
 
 
.pop_box{width:91%; padding:4vw;}
.pop_box .close{top:2vw; right:2vw;}

.pop_box h3{font-size:100%; margin-bottom:30px;}
.pop_box h3 span{margin-left:3%;}


.comment_box{margin-bottom:2vw;}
.comment_box h6{padding:0 1.6vw; font-size:100%; line-height:6vw;}
.comment_box .comment{width:100%;padding:2vw; min-height:14vw;}
.comment_box textarea.comment{font-size:85%; border:0}
.comment_box .comment p{font-size:85%; line-height:1.4em;}

.delay_box p strong{font-size:120%; margin-bottom:1vw;}
.delay_box p{font-size:71%;}
.delay_box p span{margin-top:2.5vw; font-size:100%;}
.delay_box div{margin:2vw 0 1vw; padding:2vw 3vw; font-size:85%;}

.delay_pop .btn_submit{width:25%; margin:2vw auto 0; font-size:100%; text-align:center; height:6vw; line-height:6.7vw;}

.delay_pop .nice-select{}
.delay_pop input[type=text],.delay_pop .nice-select .current{font-size: 100%;height: 6vw;line-height: 6.7vw;}
.delay_pop  .nice-select .list{height:13vw}
}
@media (max-width:649px){

/**/
.class_tit{font-size: 80%; margin-bottom:4vw}
.class_tit img{width:25px; margin-right:15px;}

.class_tab {margin:0 0 4vw;}
.class_tab a{padding: 3vw 0 2vw;font-size: 70%;}
	
.class_tb{margin-bottom:30px; }	




.tb_body li{margin-top:10px; padding:2.5vw;}
.tb_body li:hover{box-shadow: inset 0 0 0 1px #0068b7; }
.tb1 span,.tb2 span{font-size: 70%;}
.tb1 h6,.th3{border:0.5px solid #6a6a6a;}

.tb1 h6,.th3,.th4{font-size: 60% !important;}
.th2{padding: 2.3vw 0 !important;}

.tb3 a{}	


/**/

.class_info li div{padding:5vw 1vw;}

.class_info .info1 {margin:0 -1vw 4vw;} 
.class_info .info1 li{padding:0 1vw} 
.class_info .info1 h6{font-size: 70%;margin-bottom:2.3vw;}
.class_info .info1 span{font-size:60%;line-height:1.4em; height:2.8em}

.class_info .info2{margin: 0 -1vw;}

.class_info .info2 h6{font-size:70%;}
.class_info .info2 span{font-size:120%; margin-top:2.3vw;}



.calandar_wrap .month .month_btn{font-size:120%}
.calandar_wrap .month strong{font-size:160%; margin:0 5vw;}

.cal_cate{margin: 4vw -0.8%;}
.cal_cate div{width: 19%;margin: 0 0.5%;font-size: 55%;height: 10vw;line-height: 9.4vw;}
.cal_cate div span{width: 60%;}
.cal_cate div img{margin-right: 2px; width:4.5vw}


.calandar{margin:0 -0.6vw;}
.calandar table{border-spacing: 0.6vw;width: 100%;}


.calandar td{padding:1vw 0.5vw;}
.calandar td .colwrap{min-height: 25vw;}
.calandar td .date{font-size: 30%;}
.calandar td .date font{font-size:200%; margin-right:5%}
.calandar td .date strong{display:block; font-size:120%;}


.cal_icon_wrap{margin:3vw 0;}
.cal_icon{width: 5.5vw;display: inline-block;}
.cal_icon_wrap .cal_icon{margin: 0 auto 3px;display: block;}


.holiday{padding: 5vw 0 0;}
.holiday img{width: 10vw;}

.ready {padding: 4vw 0 0;}
.ready span{font-size: 50%;}
.ready strong{font-size: 80%;margin:3px 0;}



 
 
 
.pop_box{width:91%;padding: 5vw 4vw;}
.pop_box .close{top: 4vw;right: 4vw;width: 4.5vw;}

.pop_box h3{font-size: 75%;margin-bottom: 4vw;}
.pop_box h3 span{margin-left:3%;}


.comment_box{margin-bottom:2vw;}
.comment_box h6{padding:0 1.6vw;font-size: 70%;line-height: 7vw;}
.comment_box .comment{width:100%;padding:2vw;min-height: 17vw;}
.comment_box textarea.comment{font-size:60%; border:0}
.comment_box .comment p{font-size: 60%;line-height:1.4em;}

.delay_box p strong{font-size:120%; margin-bottom:1vw;}
.delay_box p{font-size: 50%;line-height: 1.6em;}
.delay_box p span{margin-top:2.5vw; font-size:100%;}
.delay_box div{margin: 3vw 0 1vw;padding:2vw 3vw;font-size: 60%;width: 100%;text-align: center;}

.delay_pop .btn_submit{width: 30vw;margin:2vw auto 0;font-size:100%;text-align:center;height: 10vw;line-height: 10.7vw;font-size: 70%;border-radius: 3px;}


.delay_pop .nice-select{}
.delay_pop input[type=text],.delay_pop .nice-select .current{font-size: 3.5vw;height: 8vw;line-height: 8.7vw;}
.delay_pop input[type=text]{padding-top: 1% !important;}
.delay_pop  .nice-select .list{height:15vw}
}