/* 세림 css */

/* .write */
.write .select_flex {display: flex; justify-content: space-between;}
.write .select_flex > div {width: calc((100% - 80px) / 2);}
.write .form_inner li {margin-top: 24px;}
.write .summernote_box >textarea {padding: 19px;}
.write .radiobtn li {margin-top: 0;}
.write .radiobtn > .notice_ncsry::after{display: none;}
/* .write .radiobtn{margin-bottom: 40px;} */
.write .plus_element {margin-top: 20px;}
.write .plus_element .radiobtn{margin-bottom: 50px;}
.plus_element2 {margin-top: 50px;}

.write .question_box,
.write .answer_box {padding: 19px;}
.write .summernote_box { margin: 20px 0;}

.write .div_flex {display: flex; justify-content: space-between;}
.write .div_flex > div {width: calc((100% - 40px) / 2);}
.write .flex_column {display: flex; flex-direction: column; justify-content: space-between;}

.write .flex_end {align-items: flex-end;}
.write .right_check{float: right;}

.familynews_write .plus_element > div{display: flex; justify-content: space-between;} 
.familynews_write .plus_element > div > div {width: calc((100% - 60px) / 2);}
.teacherconfiguration_create .plus_element,
.management_write .plus_element{margin-top: 50px;}

.management_write .div_flex{display: flex;}
.management_write .div_flex > div:first-child {width: 80%;}
.management_write .div_flex > div:nth-child(2) {width: 20%; margin-left: 40px;}
.management_write .input_wrap {display: flex; align-items: flex-end}
.management_write .input_wrap > div {width: calc(100%/3); margin-left: 15px;}
.management_write .input_wrap > div:first-child{margin-left: 0;}
/* .management_write .btn_dc{justify-content: center;} */

/* .family_newsletter */

.family_newsletter .thumbnail {margin-top: 10px;}
.family_newsletter .thumbnail > ul,
/* .plan_activity .thumbnail > ul{display: flex; }
.plan_activity .thumbnail > ul{flex-wrap: wrap; } */

.plan_activity .thumbnail > ul{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;}

.family_newsletter .thumbnail li{cursor: pointer; width: 100%; height: 100%;}

.plan_activity .activity_list > ul{flex-wrap: wrap; gap: 50px 15px ;}
.plan_activity .activity_list > ul li{margin: 0;}

/* .plan_activity .thumbnail{flex-wrap: wrap; gap: 15px;} */

.plan_activity .thumbnail li {width: 100%; height: 100%; cursor: pointer;}

.family_newsletter .thumbnail li:first-child, .plan_activity .thumbnail li:first-child{margin-left: 0;}


.plan_activity .activity_rec .titlewrap{overflow: hidden; text-overflow:ellipsis;  white-space: nowrap;}
.plan_activity .activity_rec  li > div:last-child h4{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em; height: 2.6em; display: block;}


.plan_activity .titlewrap{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.plan_activity .thumbnail li > div:last-child h4{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


.plan_activity .thumbnail li > div:first-child{border-radius: 15px; overflow: hidden; position: relative; width: 100%; padding-bottom: 100%;}

.family_newsletter .thum_img > i,
.plan_activity .thum_img > i {position: relative; width: 100%; padding-bottom: 75%; display: block;}

.family_newsletter .thum_img > i > img,
.plan_activity .thum_img > i > img  {width: 100%; border-radius: 15px; position: absolute; width: 100%; height:100%; left:50%; top:50%;
    transform: translate(-50%, -50%); object-fit: cover;}
.family_newsletter .thumbnail li > div:last-child{margin-top: 15px; display: flex; justify-content: space-between;}
.plan_activity .thumbnail li > div:last-child{display: flex; margin-top: 5px; align-items: center; justify-content: space-between;}
.family_newsletter .thumbnail li > div:last-child h4{font-weight: 800; font-size: 16px; cursor: pointer;}
.plan_activity .thumbnail li > div:last-child h4{font-weight: 800; font-size: 14px; cursor: pointer;}
.family_newsletter .thumbnail li:hover > div:last-child h4,
.plan_activity .thumbnail li:hover > div:last-child h4{color: #FFCD4A;}
.family_newsletter .thumbnail li:hover .download_btn button,
.plan_activity .thumbnail li:hover .download_btn button{background-color: #FFCD4A;}

.plan .btn_manage{justify-content: space-between; align-items: flex-end;}

.family_newsletter .thumbnail li > div:last-child p,
.plan_activity .thumbnail li > div:last-child p{font-weight: 400; font-size: 14px; color: #686868;}
.family_newsletter .file_download > a,
.plan_activity .file_download > a{display: block; width: 40px; height: 41px;}
.plan_activity .sec01{margin-bottom: 60px;}
.plan_activity .btn_manage > h5 {font-weight: 800; font-size: 20px;}
.plan_activity .clib_category > ul {display: flex; flex-wrap: wrap;}
.plan_activity .clib_category > ul > li {display: flex; align-items: center; padding: 5px 10px; cursor: pointer;}
.plan_activity .clib_category > ul > li > input {width: 14px; height: 14px; margin-bottom: 0; margin-right: 3px;}
.plan_activity .clib_category > ul > li > label {font-size: 14px; cursor: pointer;}
.plan_festival .titlewrap {width: 80%;}
.plan_festival .thumbnail li{cursor: pointer;}
.plan_festival .thumbnail li:hover > div:last-child h4{color: #FFCD4A;}
.plan_festival .thumbnail li:hover .download_btn button{background-color: #FFCD4A;}

.plan_festival h4 {font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.plan_festival .thum_img {position: relative; width: 100%; padding-bottom: 100%; display: block;}
.plan_activity .thumbnail li > div:first-child > img{width: 100%; border-radius: 15px; border: 1px solid #ddd; position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%); object-fit: cover;}
.plan_festival .thumbnail li > div:first-child > img {width: 100%; border-radius: 15px; border: 1px solid #ddd; position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%); object-fit: cover;} 
.plan_activity .thumbnail > ul {margin-top: 20px;}
.plan_activity .thumbnail li > div:last-child em{font-size: 12px; color: #F5821E;}

.plan_activity .thumbnail li:hover {}

.plan_festival .fevbox + .fevbox{margin-top: 70px;}

.plan_festival h5{font-size: 20px; font-weight: 700;} 
.plan_festival .btn_manage > h5 {font-weight: 800; font-size: 20px;}
.plan_festival .month_select{width: 22%;}
.plan_festival .month_select > select {border-radius: 15px;}
.plan_festival .big_banner{width: 100%; margin-top: 20px; position: relative;}
.plan_festival .big_banner > .banner_main_txt{position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-150%, -50%);}
.plan_festival .big_banner > .banner_memo_txt{width: 360px; padding: 25px; position: absolute; color: #333; top: 50%; right: 50%; transform: translate(130%, -55%);}
.plan_festival .big_banner > .banner_main_txt > h2 {font-size: 24px; font-weight: 800; line-height: 1.2;}
.plan_festival .big_banner > .banner_main_txt > p {font-size: 14px; font-weight: 400; margin-top: 5px;}
.plan_festival .big_banner > .banner_memo_txt a {display: block; margin: 10px 0; font-size: 16px; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden;}
.plan_festival .big_banner > .banner_memo_txt a > span {font-size: 16px; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden;}
.border_gray{border-bottom: 1px solid #ddd;}
.plan_festival .btn_manage {margin-bottom: 6px;}
.plan_festival .thumbnail > ul {margin: 20px 0; display: flex; justify-content: space-between;}
.plan_festival .thumbnail li > div:last-child {display: flex; align-items: center; justify-content: space-between; margin-top: 7px;}
.plan_festival .thumbnail li > div:last-child em {display: block; font-size: 12px; color: #F5821E;}
.plan_festival .thumbnail li > div:last-child h4 { line-height: 1.2; font-weight: 800; font-size: 14px; cursor: pointer;}
.plan_festival_banner .form_inner > div {margin-top: 24px;}
.plan_festival_banner .plus_element{margin-top: 70px;}

.main_content .btn_save{display: flex; justify-content: space-between;}

.access_control_edit .access_check {display: flex; flex-wrap: wrap;}
.access_control_edit .access_check > div{display: flex; align-items: center; padding: 5px 20px 5px 0; font-size: 14px;}
.access_control_edit .check input[type=checkbox] + label:before, .access_control_edit .check input[type=checkbox]:checked + label:before {margin-right: 5px;}

.write .btn_save {display: flex; justify-content: space-between;}

.access_control_edit .plus_element {margin-top: 40px;}

.royal_management .subtit{margin-bottom:60px;}

.royal_management .cen_but {text-align: center; margin-top: 25px;}
.royal_management .search_top {justify-content: center;}
.royal_management .element_top {width: calc(100%/3); margin: 0 auto;}
.royal_management .element_top > div {margin-bottom: 20px;}
.royal_management .element_top > div:nth-child(2) > div{margin-bottom: 15px;}
.royal_management .duraiton_flex {display: flex; justify-content: space-between;}
.duraiton_flex li{width: calc((100% - 10px) / 3); padding: 11px 17px; font-size: 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; text-align: center; line-height: 1;}
.duraiton_flex li a{display: inline-block; color: #686868; height: 100%; width: 100%}
.duraiton_flex li.on{border-color: #F5821E; }
.duraiton_flex li.on a{color: #F5821E;}

/* .royal_management .duraiton_flex > li {width: calc((100% - 10px) / 3); text-align: center; border: 1px solid #ddd; padding: 10px 17px; border-radius: 3px;} */
.royal_management .tabli_wid li a {width: max-content; margin: 0;}
.royal_management .date_flex{display: flex; justify-content: space-between; position: relative;}
.royal_management .date_flex > li {width: calc((100% - 15px) / 2);}
.royal_management .date_flex > li:last-child {display: flex;}
.royal_management .date_flex > li:last-child::before {content: '~'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.royal_management .date_flex .date input{padding-left:20%; background-position: left 75% top 50%; text-align: left; color: #686868;}

.royal_management .searchbox {width: 100%;}
.royal_management .searchbox .search {width: 100%; max-width: 100%; margin: 0;}
.royal_management table.list_table {margin-top: 50px;}
.royal_management table.list_table tbody tr.ro_receipt{background-color: #fef2cd;}
.royal_management table.list_table tbody tr.ro_sales{background-color: #fff;}


.ca{padding: 6px 12px; border-radius: 4px; display: inline-block;}
.ca > p {font-size: 14px; font-weight: 700; text-align: center; display: inline-block;}
.ca_gray {background-color: #ececec;}
.ca_orange {background-color: #FBBC06;}
.ft_orange{color: #F5821E;}

.royal_management .amount_input_wrap {display: flex; justify-content: space-between; margin-top: 40px; height: 39px;}
.royal_management .amount_input_wrap > div {display: flex; width: calc((100% - 94px) / 3); border-radius: 4px; outline: 1px solid #ddd;}
.royal_management .amount_input_wrap > div > div:first-child {width: 45%; background-color: #343A40; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.royal_management .amount_input_wrap > div > div:first-child > p{color: #fff; font-size: 14px; padding: 8px; text-align: center;}
.royal_management .amount_input_wrap > div > div:last-child{width: 55%; display: flex; align-items: center; justify-content: flex-end; padding: 10px;} 
.royal_management .amount_input_wrap > div > div:last-child > p{text-align: right; font-size: 14px;} 

.clip_management_create .clip_checkbox{display: flex;}
.clip_management_create .clip_checkbox > div {display: flex; align-items: center; margin-right: 25px;}
.clip_management_create .check input[type=checkbox] + label:before {margin-right: 5px;}
.clip_management_create .check input[type=checkbox]:checked + label:before {margin-right: 5px;}

/* .clip_management_create .selection_wrap {justify-content: space-between;} */
.checkflex{display: flex;}
.clip_management_create .check_elem {margin-top: 10px;}
.clip_management_create .check_elem:first-child{margin-right: 30px;}
.clip_management_create .plus_element {margin-top: 40px;}

.tit_flex{display: flex;}
.tit_flex .check{margin-left: 20px;}

.flex .check {
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}
.form_inner ul + ul {
    padding-top: 50px;
    margin-top: 50px;
    border-top: 1px solid #ddd;
}
.franchiesee_create .form_inner {
    margin-bottom: 30px;
}

/* .inputlist:first-child {margin-bottom: 30px;} */

.left_date > input[type=text] {text-align: left;}
.left_date > input {background: none;}

.royal_management .date{position: static;}
.search_long {width: 100%;}
.pointer_tr{cursor: pointer;}

.management_write .btn_save_fc{justify-content: center;}
/* .office_archive_write .form_inner .inputlist li {margin-top: 45px;} */

.clip_ic {position: absolute; right: 0; top: 0; transform: translate(-10px, 10px);}
.file_download > a {display: block; height: 40px;}


.franchiesee_create .formtit{font-size: 14px;}

.reroyal{color: #bdbdbd !important;}



/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){

   
    
}
 
 /* ********************************************* *
 * 1400px
 * ********************************************* */
 @media screen and (max-width: 1440px){
 

 }
 
 /* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px){
 

 }
 
 /* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 1024px){
 
  
 }
 
 
 /* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px){
 }
  
 /* ********************************************* *
 * 900px
 * ********************************************* */

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


 }
 
 /* ********************************************* *
 * 768px
 * ********************************************* */
 @media screen and (min-width: 769px){
  
 
  
 }
 @media screen and (max-width: 768px){
 
 }
 
 
 /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){
 }
 
 
 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){
 
 }
 
 /* ********************************************* *
 * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){
 
 }
 
  /* ********************************************* *
 * 300px
 * ********************************************* */
 @media screen and (max-width: 300px){

 }