/******************************************
   name :  comm.css
   auth :  SYSMATE
   date :  2024.04.16
   desc :  공통 CSS 
*******************************************/

/*
녹색 #A0CD57 160,205,87
청색 #025297 2,82,151  025FB0

#0071ff
#414453

*/

/* CUSTOM CSS */
.cus_no_data{text-align:center; padding:150px 0; font-size:15px; margin:auto; }
.cus_list_btns{text-align:right; margin:0 0 10px 0; }
.cus_align_right{ text-align:right; }
.cus_txt_error{color:#FF3E1D; text-align:center; height:20px; }
.cus_circle_label{color:#ffffff; text-align:center; height:20px; border-radius:100%; }

/* SEARCH */
.cus_search_box{text-align:right; vertical-align:top;}
.cus_search_box .search_info{display:inline-block; vertical-align:top;}
.cus_search_box .search_info .search_label{text-align:right; margin:0 5px 0 20px; }
.cus_search_box .btn_search{margin:0 0 0 10px; }

.cus_monitor01{ display:flex; align-items:start; margin-bottom:10px; }
.cus_monitor01 .thumb{ display:flex; justify-content:center; align-items:center; width:200px; height:200px; background:#fafafa; }
.cus_monitor01 .thumb img{ object-fit:contain; max-width:200px; max-height:200px;}
.cus_monitor01 .info{padding:10px 0 0 15px; line-height:25px;}

.cus_input01{ display:flex; align-items:start; margin-bottom:10px; }
.cus_input01 .label_title{ font-weight:500; font-size:12px; line-height:1.53; color:#566a7f; text-align:right; margin:7px 0 0 0; padding:0 15px 0 0; }
.cus_input01 .input_box{ }
.cus_input01 .input_box .static_margin{ display:inline-block; margin:7px 0 0 0; padding:0; color:#333333;}
.cus_input01 .label_help{ font-size:12px; padding:7px 0 0 15px; }
.cus_input01 .txt_wait{
	-webkit-animation: txt_wait_loop 2s linear infinite;
	animation: txt_wait_loop 2s linear infinite;
}

.cus_input02{ margin-bottom: 1rem !important; }
.cus_input02 .label_title{ font-weight:500; font-size:12px; line-height:1.53; color:#566a7f; text-align:left; padding:0 0 2px 0; }
.cus_input02 .input_box{ height:30px; }
.cus_input02 .input_box .static_margin{ display:inline-block; margin:7px 0 0 0; padding:0; }
.cus_input02 .label_help{ font-size:12px; padding:0 0 0 15px; }

.cus_input03{ display:flex; align-items:center; margin-bottom: 5px; }
.cus_input03 .label_title{ font-weight:500; font-size:12px; line-height:1.53; color:#566a7f; text-align:right; padding:0 15px 0 0; }
.cus_input03 .input_box{ height:30px; }
.cus_input03 .input_box .static_margin{ display:inline-block; margin:7px 0 0 0; padding:0; }
.cus_input03 .label_help{ font-size:12px; padding:0 0 0 15px; }

/* CTS */
.cus_img_box01{ display:inline-block; vertical-align:top; width:220px; border-radius:5px; box-shadow: 0 0 0.15rem 0.05rem rgba(2,82,151, 0.3); margin:0 10px 10px 0; }
.cus_img_box01 .top_area{ display:flex; justify-content: space-between;}
.cus_img_box01 .top_area .thumb{
	position:relative;display:flex; justify-content:center; align-items:center; width:185px; height:80px; padding:0; margin:0; border-top-left-radius:5px; background:#fafafa; word-break:break-all;
}
.cus_img_box01 .top_area .thumb .icon_new{ position:absolute; width:32px; left:-5px; top:-5px;}
.cus_img_box01 .top_area .thumb .icon_new img{ width:100%;height:100%}
.cus_img_box01 .top_area .thumb img{object-fit:contain; width:185px; height:80px;}
.cus_img_box01 .top_area .right_mnu{width:40px;text-align:right; margin:5px 5px 0 0;}
.cus_img_box01 .top_area .right_mnu button{margin:0 0 5px 0;}
.cus_img_box01 .info_area{padding:5px 0 3px 0; margin:0;width:100%;}
.cus_img_box01 .info_area .info{display:flex; width:100%; margin:0; padding:0; font-size:12px;}
.cus_img_box01 .info_area .info .title{text-align:right; width:60px; padding:0 5px 2px 0;}
.cus_img_box01 .info_area .info .desc{width:155px;}

/* BRN */
.cus_img_box02{ display:inline-block; vertical-align:top; width:240px; border-radius:5px; box-shadow: 0 0 0.15rem 0.05rem rgba(2,82,151, 0.3); margin:0 15px 15px 0; }
.cus_img_box02 .top_area{ display:flex;}
.cus_img_box02 .top_area .thumb{display:flex; justify-content:center; align-items:center; width:200px; height:100px; padding:0; margin:0; border-top-left-radius:5px; background:#fafafa; overflow:hidden;}
.cus_img_box02 .top_area .thumb img{object-fit:contain; width:92%; height:92%;}
.cus_img_box02 .top_area .right_mnu{width:40px;text-align:center; margin:5px 0 0 0;}
.cus_img_box02 .top_area .right_mnu button{margin:0 0 5px 0;}
.cus_img_box02 .info_area{padding:5px; margin:0;width:100%;}
.cus_img_box02 .info_area .info{display:flex; width:100%; margin:0;padding:0;}
.cus_img_box02 .info_area .info .title{text-align:right; width:70px; padding:0 5px 5px 0;}
.cus_img_box02 .info_area .info .desc{}

/* PAGE SEARCH CTS */
.cus_img_box03{ display:inline-block; vertical-align:top; width:120px; border-radius:5px; margin:0 5px 10px 0;}
.cus_img_box03 .top_area{}
.cus_img_box03 .top_area .thumb{ 
	position:relative; display:flex; justify-content:center; align-items:center; width:120px; height:60px; padding:0; margin:0; border-top-left-radius:5px; background:#fafafa; overflow:hidden;}
.cus_img_box03 .top_area .thumb .icon_new{ position:absolute; width:28px; left:0px; top:-3px;}
.cus_img_box03 .top_area .thumb .icon_new img{ width:100%;height:100%}
.cus_img_box03 .top_area .thumb img{object-fit:contain; width:100px; height:60px;}
.cus_img_box03 .top_area .rect{width:120px; height:100px; display:flex; justify-content:center; align-items:center; background:#fafafa;}
.cus_img_box03 .top_area .rect .inner{background:#000000;}
.cus_img_box03 .info_area{padding:5px; margin:0;width:100%;}
.cus_img_box03 .info_area .desc{font-size:11px;}

.cus_play_box01{position:relative; display:inline-block; vertical-align:top; width:120px; border-radius:5px; margin:0 5px 5px 0;  border: 1px solid #d9dee3;}
.cus_play_box01 .number{position:absolute; top:0px; left:-5px; font-size:10px; width:18px; height:18px; color:#ffffff; border-radius:18px; text-align:center; line-height:18px; }
.cus_play_box01 .close{position:absolute; top:1px; right:1px; cursor:pointer;}
.cus_play_box01 .thumb{ 
	display:flex; justify-content:center; align-items:center; width:100px; height:70px; padding:0; margin:0; border-top-left-radius:5px; background:#fafafa; overflow:hidden;}
.cus_play_box01 .thumb .rect{width:70px; height:70px; display:flex; justify-content:center; align-items:center; background:#fafafa;}
.cus_play_box01 .thumb .rect .inner{background:#000000;}
.cus_play_box01 .thumb img{object-fit:contain; width:100%; height:100%;}
.cus_play_box01 .txt{width:110px;height:20px;overflow:hidden;padding:0 5px;}

/* 키오스크용*/
.cus_play_box02{position:relative; display:inline-block; vertical-align:top; width:120px; border-radius:5px; margin:0 5px 5px 0;  border: 1px solid #d9dee3;}
.cus_play_box02 .close{position:absolute; top:1px; right:1px; cursor:pointer;}
.cus_play_box02 .thumb{ 
	display:flex; justify-content:center; align-items:center; width:100px; height:100px; padding:0; margin:0; border-top-left-radius:5px; background:#fafafa; overflow:hidden;}
.cus_play_box02 .inner{background:#000000;}
.cus_play_box02 .txt{width:110px;padding:0 5px; font-size:11px;}


.cus_kiosk_box01{ position:relative; display:inline-block; vertical-align:top; width:140px; border-radius:5px; margin:0 5px 5px 0;  border: 1px solid #d9dee3;}
.cus_kiosk_box01 .icon{ position:absolute; left:5px; top:3px; z-index:10; font-size:11px;}
.cus_kiosk_box01 .thumb{ 
	position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:110px; padding:0; margin:0; border-radius:5px; background:#fafafa; overflow:hidden;}
.cus_kiosk_box01 .thumb img{object-fit:contain; width:110px; height:110px;}
.cus_kiosk_box01 .txt{font-size:11px;padding:5px;}

/* UPLOAD */
.cts_upload01{margin:auto; width:50%;}
.cts_upload01 .top_area{display:flex; justify-content:center; align-items:center; height:250px; box-shadow: 0 0 2px 2px rgba(2,82,151, 0.3); border-radius:5px;}
.cts_upload01 .top_area i{font-size:50px; margin:0 10px 0 0;}
.cts_upload01 .list_area{margin:10px 0 0 0;}
.cts_upload01 .list_area .upload_list{ margin:0 0 10px 0;}
.cts_upload01 .list_area .upload_list .info{display:flex; width:100%; margin:0;padding:0;}
.cts_upload01 .list_area .upload_list .info .title{width:80%;}
.cts_upload01 .list_area .upload_list .info .title .txt_wait{
	-webkit-animation: txt_wait_loop 2s linear infinite;
	animation: txt_wait_loop 2s linear infinite;
}
.cts_upload01 .list_area .upload_list .info .btns{width:20%; text-align:right; vertical-align:top;}
.cts_upload01 .list_area .upload_list .info .btns i{font-size:20px;}

@keyframes txt_wait_loop {
    0%{opacity:1;}
    50%{opacity:0.1;}
    100%{opacity:1;}
}
@-webkit-keyframes txt_wait_loop{
    0%{opacity:1;}
    50%{opacity:0.1;}
    100%{opacity:1;}
}

/* LISTE */
/*
.cts_list_left{ display:flex; flex-direction:row;justify-content:start;flex-wrap:wrap;padding:20px 0 0 0; }
*/
.cts_list_left{ display:flex; flex-direction:row; align-content: flex-start; justify-content:start;flex-wrap:wrap;padding:20px 0 0 0; }

/* CATE */
.cus_cate_info{ display:flex; align-items:center; justify-content: space-between; margin:0 0 10px 0;}
.cus_cate_info.header{ font-weight:600;}
.cus_cate_info .col01{ width:50%; text-align:center;}
.cus_cate_info .col02{ width:10%; text-align:center;}
.cus_cate_info .col03{ width:30%; text-align:center;}
.cus_cate_info .col04{ width:10%; text-align:center;}

/* CHECK BOX */
.cus_checkbox01{
    position:relative; display:inline-block; padding:1px 0 0 20px; margin:1px 10px 0 0; cursor:pointer; font-size:13px; line-height:14px; vertical-align:top;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.cus_checkbox01 input{ position:absolute; opacity:0; cursor:pointer; height:0; width:0; margin:0; padding:0; }
.cus_checkbox01 .checkmark{
    position:absolute; width:16px; height:16px; border:1px solid #cccccc; border-radius:3px; top:0; left:0; background:#ffffff;
    background: url("/images/icons/c-check-gray.svg") no-repeat center;
}
.cus_checkbox01:hover input ~ .checkmark{ }
.cus_checkbox01 input:checked ~ .checkmark{ }
.cus_checkbox01 input:checked ~ .checkmark:after{ display: block; }
.cus_checkbox01 input:disabled ~ .checkmark{ background:#fafafa; }
.cus_checkbox01 .checkmark:after {
    display:none; content: ""; position:absolute; width:16px; height:16px; border-radius:3px; border:0;
    top:-1px; left:-1px; background: url("/images/icons/c-check-wh.svg") no-repeat center #025297;
}
.cus_checkbox01.disabled{color:#aaaaaa;}
.cus_checkbox01.disabled .checkmark{ background:#fafafa; }

/* RADIO BOX */
.cus_radio01{
    position:relative; display:inline-block; padding:1px 0 0 20px; margin:1px 10px 0 0; cursor:pointer; font-size:13px; line-height:14px; vertical-align:top;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.cus_radio01 input{ position:absolute; opacity:0; cursor:pointer; height:0; width:0; margin:0;padding:0; }
.cus_radio01 .checkmark{
    position:absolute; width:16px; height:16px; border:1px solid #cccccc; border-radius:16px; top:0; left:0; background:#ffffff;
    background: url("/images/icons/c-check-gray.svg") no-repeat center; background-size: 10px 10px;
}
.cus_radio01:hover input ~ .checkmark{ }
.cus_radio01 input:checked ~ .checkmark{ }
.cus_radio01 input:checked ~ .checkmark:after{ display: block; }
.cus_radio01 input:disabled ~ .checkmark{ background:#fafafa; }
.cus_radio01 .checkmark:after {
    display:none; content: ""; position:absolute; width:16px; height:16px; border-radius:16px; border:0;
    top:-1px; left:-1px; background: url("/images/icons/c-check-wh.svg") no-repeat center #025297; background-size: 10px 10px;
}
.cus_radio01.disabled{color:#aaaaaa;}
.cus_radio01.disabled .checkmark{ background:#fafafa; }


.cus_noselect {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome, Edge, Opera and Firefox */
}

/* MODAL */
/* display:none; visibility:hidden; opacity:0; */
.mymodal_nor{
    position:fixed; width:100%; height:100%; left:0;top:0;z-index:90000; transition:all .3s;
    visibility:hidden; opacity:0;
}
.mymodal_nor .modal_nor_bg{ position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1; }
.mymodal_nor .modal_nor_cts{ position:relative; background:#ffffff; z-index:2; left:50%; top:50%; transform:translate(0,-50%); border-radius:10px; overflow:hidden; opacity:1; }
.mymodal_nor .modal_nor_cts .btn_pop_close{ position:absolute; top:5px; right:5px; z-index:3; cursor:pointer; }

.mymodal_nor .modal_nor_cts .btn_pop_close img { width:20px; height:20px;}
.mymodal_nor .modal_nor_cts .btn_pop_close i { font-size:40px;}

.mymodal_nor .modal_nor_cts .btn_pop_bottom { position:absolute; bottom:10px; right:10px; z-index:3; cursor:pointer; }

.mymodal_nor .modal_pop_inner{ position:relative; width:100%; max-height:800px; padding:20px 20px; background:#ffffff; }
.mymodal_nor .modal_pop_inner .modal_title{ font-weight:700; font-size:20px; text-align:center; padding-bottom:40px; }
.mymodal_nor .modal_pop_inner .modal_desc{ padding:0 0 30px 0;line-height:20px; font-size:14px;}




@media(max-width:1000px){
	.cus_search_box .search_info{display:block;margin:0 0 10px 0;}
}

@media(max-width:576px){
	.cus_input01{ display:block; }
	.cus_input01 .label_title{ text-align:left; padding:0 0 5px 0;  }
	.cus_input01 .label_help{ padding:5px 0 0 0px; }
}