@charset "utf-8";
#container{padding:20px;}

/*sub*/

#sub_category {
    padding-bottom: 10px;
}
#sub_category.month{ 
    width: 600px;        
}

#sub_category .sub_menu{
    cursor: pointer;
}

#sub_category .sub_menu.active {
    box-shadow: 3px 3px 10px 3px #76767612;
    color: #ffa216!important;
    font-weight: bold;
    background: #fff;
}

#sub_category .sub_menu:first-child {
    margin-left: 0px;
}
#sub_category .sub_menu {
    padding: 5px 10px;
    border: 1px solid #ffffff91;
    color: #ffffff91;
    border-radius: 50px;
    display: inline-block;
    margin-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

#sub_container {
    padding: 0 20px 0 20px; background: #ffa216;
}
#sub_container {
    position: relative;
    min-height: 300px;
    height: calc(100vh - 85px);
    overflow: scroll;
}

#swiperConatiner {
    min-height: 500px;
}

#sub_search input.search:focus {  outline: none;}
div#sub_search {      position: relative;      height: 40px;   width: 100%;  padding-bottom: 0px;background: #ffa216;}
#sub_search div#idx_cate{    position: absolute;    padding: 20px;    width: 100%;top: -20px;}
#sub_search div.search {    position: relative;}
#sub_search select.searchSelect {position: absolute;    background: none;    border: none;    width: 25%;    left: 10px;    height: 40px;}
#sub_search input.search {    width: 100%;       height: 40px;    border-radius: 50px;    border: none;    background: #fff;    padding-left: 30%;    padding-right: 40px;}
#sub_search a {position: absolute;      right: 13px;    line-height: 3em;    color: #ffa216;;}

#intro{margin-bottom:0px; background:#ffa216;    position: relative;     text-align: center;    min-height: 0px;}
#intro h2 {    color: #fff;       padding: 10px 30px;    font-size: 2em; font-weight: 300; line-height: 1.5em;
   /* z-index: 888;   position: fixed; */}
#intro h2 span {  font-weight: 600;}
#intro img {    position: absolute;    right: 5%;    bottom: 30%;       max-width: 50%;    height: auto;    max-height: 80px;}

#sub_cate {}
#sub_cate ul{display:flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom:10px}
#sub_cate li{    border: 1px solid #fff;width: 100%;    margin-bottom: 4%; text-align:center;border-radius:5px; background: #ffa216;}
#sub_cate li:hover{    background: #fff;}
#sub_cate li a{display:block; color:#fff; padding:20px 0;     border-radius: 5px}
#sub_cate li i{font-size:2.5em; line-height:50px;}
#sub_cate li a img {    width: 70%;    margin-right: 5px;}
#sub_cate li a p{    margin-left: 10px;    font-size: 1.5em;    font-weight: 500;}
#sub_cate li:hover a p{ color: #000;    font-weight: 700;}
#exitSideBtn{ position: absolute; right: 20px; font-size: 20px; color: white; top: 5px; }


 #swiperSlideCate{ position: relative; }
.slideCateWrap{ width: calc(100% - 100px); height: 33px; margin: 10px auto 0 auto; border: 1px solid #ebebeb; border-radius: 5px; display: flex; justify-content: center; align-items: center; } 
.slideCateWrap span{ font-weight: bold; font-size: 1.1em; }
#swiperSlideCate .fa-left-long{ position: absolute; top: 20px; left: 12px; z-index: 100;}
#swiperSlideCate .fa-right-long{ position: absolute; top: 20px; right: 12px; z-index: 100;}
div#list_search { position: relative;      height: 40px;   width: 100%;  padding-bottom: 0px;}
#list_search div#idx_cate{    position: absolute;    padding: 10px;    width: 100%;top: -40px;}

#list_search .search select{ background: #fff; border: none; width: 60px; height: 40px; position: unset; }
#list_search #searchSelect{ border-radius: 20px; }    
#list_search div.search{ display: flex; align-items: center; height: 40px; border-radius: 50px; background: #fff; box-shadow: 0 0 15px 5px #0000000a; }
#list_search input.search{  border: none; padding-left: 10px !important;    width: 100%; }
#list_search input.search:focus {  outline: none;}

#list_search a {position: absolute;      right: 13px;    line-height: 3em;    color: #ffa216;;}


#listwrap li {display: flex;    justify-content: center;    height: 50px;    align-items: center;}
#listwrap .myBox button{ opacity: 0; }
#listwrap li.sort_mode{ background: #eee; }

#listwrap input[class="cb1"] + label {	display: inline-block;	margin-left: 1%; width: 16%;	height: 30px;	border: 2px solid #bcbcbc;	background: #F3F3F3;	cursor: pointer; color:#bcbcbc;text-align: center; 	border-radius: 50px 0px 0px 50px;}
#listwrap input[class="cb1"] {	display: none;}
#listwrap input[class="cb1"]:checked + label {color:#fff; font-size:0.9em ;	background-color: #14b371;	border: 2px solid #fff;}
#listwrap input[class="cb2"] + label {	display: inline-block;	width: 16%;	height: 30px;	border: 2px solid #bcbcbc;	background: #F3F3F3;	cursor: pointer;
	border-radius: 0px 50px 50px 0px;	 color:#bcbcbc;text-align: center;     margin-left: -6px;}
#listwrap input[class="cb2"] {	display: none;}
#listwrap input[class="cb2"]:checked + label {  color:#fff;  font-size:0.9em ;		background-color: #14b371;	border: 2px solid #fff;}
#listwrap h2 {    display: inline-block;width: 15%; margin-right: 3%;    font-size: 1.4em;    line-height: 1.8em;    font-weight: 700;    color: #000;
    letter-spacing: -1.5px;
    padding-left: 2%;}
#listwrap .team{     font-size: 12px; display: block; text-align: center; line-height: 10px; letter-spacing: 2px; color: #a5a5a5; opacity: 0.5; }
#listwrap button.heart {   background: #F8F8F8; border:none; margin-left: 3% }
#listwrap button.lock {   background: #F8F8F8; border:none; margin-left: 3% }
#listwrap button.call {   background: #fff; border:1px solid #FFA216; margin-left: 1%;
    margin-right: 2%;}
#listwrap button {       line-height: 1em; display: inline-block; width:12%;  height: 30px;border-radius: 50px}
#listwrap button img {    height: 16px;}
#sort_status{ position: fixed; bottom: 80px; left: 10px; border: 1px solid #eee; border-radius: 5px; padding: 5px; width: 70px; text-align: center; z-index: 1; }
#sort_status.day{  position: unset; bottom: 0px; left: 0px; border: 0; border-radius: 0px; padding: 0px; margin-top: 3px;}
#sort_status.month span{background: #fff;  }
#sort_status.day span {    border: 2px solid #fff;    color: #fff; border-radius: 5px; padding: 5px; }
#sort_status.active{ background: #ffa216; color: #fff; font-weight: bold; }
#sort_status.active.day{ background: none; color: #fff; font-weight: bold; }
#sort_status.active.day span{ background: #fff;color: #ffa216;  }

ul.title h2{ color: #ACACAC!important; font-weight: 500!important; }
.title p span {    color: #14b371;    font-size: 0.9em;}
.title p {    font-weight: 600;        width: 27%;    text-align: center;    font-size: 1.1em;    line-height: 1.1em;}
.title p.tdy {      padding-right: 5px;}
.title p.tmo {   padding-left: 5px;}
.title a.write {      text-align: center;    width: 28.5%;}
.title a.write span {    text-align: center;    background: #fff;    border: 1px solid #FFA216;    line-height: 30px;    display: inline-block;
    padding: 1px 15px;    color: #FFA216;    border-radius: 50px;    width: 89%;}

#list_month p.month{       font-size: 1.1em;}
#list_month p.month.now {    color: #ffa216;    width: 7.5%;    margin: 0 2%;    text-align: center;    border-bottom: 2px solid #ffa216;    font-weight: 700;}
#list_month p.month.next {    color: #a9a9a9;    width: 7.5%;    margin: 0 2%;    text-align: center;    border-bottom: 2px solid #a9a9a9;    font-weight: 700;}
#list_month p.date {    font-size: 1.1em;    font-weight: 600;    color: #000;    width: 48%;}
#list_month .date span {    font-size: 1.15em;    font-weight: 800;    color: #ffa216;}

#list_like #listwrap h2 {    width: 63%!important;}
.card.card-body {    background: #F8F8F8;    width: 91%;    margin: 0 auto;    border-radius: 35px;    padding:20px 30px 30px;}


#list_like p.month.now { display: inline-block; color: #000;  font-size: 1.2em;     margin: 0 2%;    text-align: center;    border-bottom: 2px solid #ffa216;    font-weight: 700;}
#list_like p.month.next { display: inline-block;    color: #000;  font-size: 1.2em;     margin: 0 2%;    text-align: center;    border-bottom: 2px solid #a9a9a9;    font-weight: 700;}
#list_like p.date { display: inline-block;    font-size: 1.35em;    font-weight: 500;    color: #000;}
#list_like .date span {    font-size: 1.25em;    font-weight: 500;    color: #ffa216;}
#list_like div.day {font-size:1.2em;font-weight: 600; color: #000;    display: flex; padding-bottom: 10px;    border-bottom: 2px solid #fff; }
#list_like div.day_left {text-align: left;width: 50%;}
#list_like div.day_right {text-align: right;width: 50%;}
#list_like p.equipment {font-size:1.2em; font-weight: 600; color: #000; line-height: 1.5em; padding:10px 0;}
#list_like p.equipment span { color: #ffa216}
#list_like input[class="cb1"] + label, #list_like input[class="cb2"] + label {width: 35%!important;}
.search_equip {    position: absolute;    top: -95px;    padding: 20px;    width: 100%;}
select.equipment01,select.equipment02 {   /* width: 49%; */   width: 100%; height: 40px;    border-radius: 50px;    border: none;    background: #fff;    padding: 10px;}
select.equipment02 {    float: right;}


#list_lock #listwrap h2 {    width: 75%!important;}
#list_lock p.month.now { display: inline-block; color: #000;  font-size: 1.2em;     margin: 0 2%;    text-align: center;    border-bottom: 2px solid #ffa216;    font-weight: 700;}
#list_lock p.month.next { display: inline-block;    color: #000;  font-size: 1.2em;     margin: 0 2%;    text-align: center;    border-bottom: 2px solid #a9a9a9;    font-weight: 700;}
#list_lock p.date { display: inline-block;    font-size: 1.35em;    font-weight: 500;    color: #000;}
#list_lock .date span {    font-size: 1.25em;    font-weight: 500;    color: #ffa216;}
#list_lock div.day {font-size:1.2em;font-weight: 600; color: #000;    display: flex; padding-bottom: 10px;    border-bottom: 2px solid #fff; }
#list_lock div.day_left {text-align: left;width: 50%;}
#list_lock div.day_right {text-align: right;width: 50%;}
#list_lock p.equipment {font-size:1.2em; font-weight: 600; color: #000; line-height: 1.5em; padding:10px 0;}
#list_lock p.equipment span { color: #ffa216}
#list_lock input[class="cb1"] + label, #list_lock input[class="cb2"] + label {width: 35%!important;}
.search_equip {    position: absolute;    top: -95px;    padding: 20px;    width: 100%;}
select.equipment01,select.equipment02 {   /* width: 49%; */   width: 100%; height: 40px;    border-radius: 50px;    border: none;    background: #fff;    padding: 10px;}
select.equipment02 {    float: right;}


#writewrap input[class="cb1"] + label {	display: inline-block;	margin-left: 1%; width: 35%;	height: 40px;	border: 2px solid #bcbcbc;	background: #ffffff;	cursor: pointer; color:#bcbcbc;text-align: center; 	border-radius: 50px 0px 0px 50px;}
#writewrap input[class="cb1"] {	display: none;}
#writewrap input[class="cb1"]:checked + label {color:#fff; font-size:0.9em ;	background-color: #14b371;	border: 2px solid #fff;}
#writewrap input[class="cb2"] + label {	display: inline-block;	width: 33%;	height: 40px;	border: 2px solid #bcbcbc;	background: #ffffff;	cursor: pointer;
	border-radius: 0px 50px 50px 0px;	 color:#bcbcbc;text-align: center;     margin-left: -5px;}
#writewrap input[class="cb2"] {	display: none;}
#writewrap input[class="cb2"]:checked + label {  color:#fff;  font-size:0.9em ;		background-color: #14b371;	border: 2px solid #fff;}
#writewrap .title p {     color: #000;   font-weight: 600;    width: 100%;   text-align: center;    font-size: 1.4em;    line-height: 2em;}
div#writewrap {    text-align: center;}
#writewrap .title p span {    color: #fda015;    font-size: 0.8em;     font-weight: 500;}
#writewrap .title p.tdy {   padding-left: 0px;}
#writewrap .title p.tmo {   padding-right: 0px;}
#writewrap ul.title {    display: flex;    margin-top: 30px;}
#writewrap ul.title li {    width: 50%;}
#writewrap .button {    display: flex;    justify-content: center;}
#writewrap button:hover {    background: #e98c00}
#writewrap button {      padding: 15px;    width: 90%;    border-radius: 50px;    border: 0;    font-size: 1.2em;    background: #ffa216;    color: #000;
    margin: 0 auto;    font-weight: 700;    margin-top: 50px;    }
#intro.write {    border-radius: 0 0 20px 20px;   box-shadow: 0 0 15px rgb(0 0 0 / 10%)}
#writewrap .month {    display: flex;    justify-content: center;     margin: 10px 0;    font-size: 1.5em;    line-height: 1.8em; }
#writewrap h3 {    margin: 50px  0 20px;}
#writewrap .month:first-child {padding-top: 50px;}
#writewrap .month p {    font-weight: 700;    line-height: 2em;    color: #ffa216;    margin-left: 10px;}
#writewrap .month select {    padding: 2px;    border-radius: 0;    border: 3px solid #ffa216;}
#writewrap h3 span {      font-size: 1.2em;  background: #ffa216;    color: #fff;    padding: 5px 10px;    border-radius: 50px;    font-weight: 700;}
#writewrap p.month {    color: #000;    font-weight: 600;}

.infoM .modal-content {
    background: #ff9c48;
}
.infoM .modal-dialog {    margin: 2% auto;}
.infoM .modal-title {    color: #fff;    font-weight: 800; font-size: 1.5em;}
.infoM .modal-body {     padding: 15px;}
.infoM tr:first-child th:first-child { border-top-left-radius: 10px; }
.infoM tr:first-child td:last-child { border-top-right-radius: 10px; }
.infoM tr:last-child th:first-child { border-bottom-left-radius: 10px;  border-bottom: 0px }
.infoM tr:last-child td:last-child { border-bottom-right-radius: 10px;  border-bottom: 0px }


.eo_table {    width: 100%;    /*border-left:1px solid #ddd; border-right:1px solid #ddd;*/     line-height: 1.5em;}
.eo_table.lesson {    border: 2px solid #0080b9;}
.eo_table caption {    display: none}
.eo_table th,
.eo_table td {  background: #fff;     padding: 12px;    border-bottom: 1px solid #d8e2e8;    border-right: 1px solid #d8e2e8;    font-size: 1em;    line-height: 1.6em;    text-align: left;    word-break: keep-all;}
.eo_table th {    background: #FEFDF9;    color: #333;    text-align: center;    font-size: 1.1em;    font-weight: 500;}
.eo_table tbody th {    background: #FEFDF9;    color: #555;    text-align: center;    font-size: 1.03em;    font-weight: 800;}
.eo_table th:first-child,
.eo_table td:first-child {border-left: 0px solid #d8e2e8;}
.eo_table th:last-child,
.eo_table td:last-child {border-right: 0px solid #d8e2e8;}