.editable_box { display: block; width: 100%; padding-right: 15px; padding-left: 100px; }
.editable_box .editable_item { display: flex; flex-direction: row; background-color: #f5f5f5; margin-top: 2px; padding: 2px; }
.editable_box .editable_item:first-child { margin-top: 0px; }
.editable_box .editable_item > div { padding: 8px 8px; box-sizing: border-box; }
.editable_box .editable_item:hover,
.editable_box .editable_item:focus,
.editable_box .editable_item:active { background-color: #e0e0e0; }

.editable_box .editable_item .item_image, .editable_box .editable_item .item_data { display: inline-block; }
.editable_box .editable_item .item_image { width: 190px; position: relative; background-color: #fff; }
.editable_box .editable_item .item_image.item_file .image_path,
.editable_box .editable_item .item_image.item_path .image_file { display: none; }
.editable_box .editable_item .item_image .image_path,
.editable_box .editable_item .item_image .image_file label { background-size: cover; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; }
.editable_box .editable_item .item_image .image_file label { background-image: url('../../images/icon/file-upload.svg'); background-size: auto 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; }
.editable_box .editable_item .item_image .image_file label .file_style { display: inline-block; width: 80%; }
.editable_box .editable_item .item_image .image_file label .file_style img { max-width: 100%; }

.editable_box .editable_item .item_data { width: calc(100% - 190px); position: relative; }
.editable_box .editable_item .item_data .item_cross { display: none; position: absolute; top: 6px; right: 6px; background: url('../../images/icon/cross.svg'); background-size: contain; background-repeat: no-repeat; width: 12px; height: 12px; cursor: pointer; }
.editable_box .editable_item:hover .item_data .item_cross,
.editable_box .editable_item:focus .item_data .item_cross,
.editable_box .editable_item:active .item_data .item_cross { display: block; }
.editable_box .editable_item .item_data .item_cross:hover,
.editable_box .editable_item .item_data .item_cross:focus,
.editable_box .editable_item .item_data .item_cross:active { color: red;}
.editable_box .editable_item .item_data .data_url,
.editable_box .editable_item .item_data .data_title,
.editable_box .editable_item .item_data .data_description { display: block; width: 100%; font-size: 14px; line-height: 20px; color: #666; }
.editable_box .editable_item .item_data .data_title { font-size: 16px; font-weight: bold; line-height: 28px; color: 333; }

.editable_box .editable_item .item_data .data_title {
    overflow: hidden; height: 26px; max-height: 26px; min-height: 26px;
    text-align: justify; text-overflow: ellipsis;
    box-orient: vertical; -ms-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-orient: vertical;
    display: -webkit-box; line-clamp: 1; -ms-line-clamp: 1; -moz-line-clamp: 1; -webkit-line-clamp: 1;
}

.editable_box .editable_item .item_data .data_description {
    overflow: hidden; height: 40px; max-height: 40px; min-height: 40px;
    text-align: justify; text-overflow: ellipsis;
    box-orient: vertical; -ms-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-orient: vertical;
    display: -webkit-box; line-clamp: 2; -ms-line-clamp: 2; -moz-line-clamp: 2; -webkit-line-clamp: 2;
}

/* 網址錯誤 or 404頁面 */
.editable_box .editable_item.editable_error .item_image { display: none; }
.editable_box .editable_item.editable_error .item_data { width: 100%; }
.editable_box .editable_item.editable_error .item_data .data_title,
.editable_box .editable_item.editable_error .item_data .data_description { height: unset; max-height: unset; min-height: unset; }

.editable_box .editable_hidden { display: none; }

/*.editable_box.edShow .editable_item .item_image .image_file, */.editable_box.edShow .editable_hidden{display:none;}

@media screen and (max-width: 767px) {
	.editable_box { padding-right: 10px; padding-left: 10px; }
	.editable_box .editable_item .item_data .data_title { font-size: 16px; font-weight: bold; line-height: 25px; color: #333; padding-bottom:5px;}

.editable_box .editable_item .item_data .data_title {
    overflow: auto;
    height: auto;
    max-height: none;
    min-height: auto;
    text-align: initial;
    text-overflow: ellipsis;
    box-orient: inherit;
    -ms-box-orient: inherit;
    -moz-box-orient: inherit;
    -webkit-box-orient: inherit;
    display: block;
}

.editable_box .editable_item .item_image { width: 100%; position: relative; background-color: #fff; padding-bottom:50%;}

.editable_box .editable_item { display: block; background-color: #f5f5f5; margin-top: 2px; padding: 2px; }

.editable_box .editable_item .item_image, .editable_box .editable_item .item_data { display: block; }
.editable_box .editable_item .item_image { width: 100%; position: relative; background-color: #fff; }
.editable_box .editable_item .item_data { width: 100%; position: relative; }

}