@charset "utf-8";



/* ****************************************************************************************** *
 * landing 스타일 시작
 * ****************************************************************************************** */

:root {
    --ff_bk: 'ff_bk', sans-serif;
    --ff_b: 'ff_b', sans-serif;
    --ff_r: 'ff_r', sans-serif;

    /* 기본 폰트 크기 설정 (소형 화면 기준) */
    --fs_50: 2.2rem;    /* H1 */
    --fs_40: 1.75rem;   /* H2 */
    --fs_30: 1.5rem;    /* H3 */
    --fs_25: 1.25rem;   /* H4 */
    --fs_20: 1rem;      /* H5 */
    --fs_18: 0.875rem;  /* H6 */
    --fs_p: 16px;       /* Paragraph */  
    --fs_small: 0.75rem; /* Small */ 
}

/* 중간 크기의 화면에 대한 폰트 크기 조정 */
@media (min-width: 768px) {
    :root {
        --fs_50: 3.5rem;    /* H1 */
        --fs_40: 2.5rem;    /* H2 */
        --fs_30: 2rem;      /* H3 */
        --fs_25: 1.75rem;   /* H4 */
        --fs_20: 1.5rem;    /* H5 */
        --fs_18: 1.25rem;   /* H6 */
    }
}

/* 대형 화면에 대한 폰트 크기 조정 */
@media (min-width: 1024px) {
    :root {
        --fs_50: 4rem;      /* H1 (64px -> 4rem) */
        --fs_40: 3.625rem;  /* H2 (58px -> 3.625rem) */
        --fs_30: 3rem;      /* H3 (48px -> 3rem) */
        --fs_25: 2rem;      /* H4 (2rem 그대로) */
        --fs_20: 1.75rem;   /* H5 (1.75rem 그대로) */
        --fs_18: 1.5rem;    /* H6 (1.5rem 그대로) */
    }
}
.ff_bk { font-family: var(--ff_bk) !important; }
.ff_b { font-family: var(--ff_b) !important; }
.ff_r { font-family: var(--ff_r) !important; }

/* 공통 속성 */
.editable-content h1, 
.editable-content h2, 
.editable-content h3, 
.editable-content h4, 
.editable-content h5, 
.editable-content h6, 
.editable-content span, 
.editable-content p,
.edi_content h1, 
.edi_content h2, 
.edi_content h3, 
.edi_content h4, 
.edi_content h5, 
.edi_content h6, 
.edi_content span, 
.edi_content p,
.pell-content h1, 
.pell-content h2, 
.pell-content h3, 
.pell-content h4, 
.pell-content h5, 
.pell-content h6,  
.pell-content span, 
.pell-content p {
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
	box-sizing: border-box; 
}

/* 개별 폰트 크기 설정 */
.editable-content h1, .edi_content h1, .pell-content h1 { font-size: var(--fs_50); }
.editable-content h2, .edi_content h2, .pell-content h2 { font-size: var(--fs_40); }
.editable-content h3, .edi_content h3, .pell-content h3 { font-size: var(--fs_30); }
.editable-content h4, .edi_content h4, .pell-content h4 { font-size: var(--fs_25); }
.editable-content h5, .edi_content h5, .pell-content h5 { font-size: var(--fs_20); }
.editable-content h6, .edi_content h6, .pell-content h6 { font-size: var(--fs_small); }
.editable-content p, .edi_content p, .pell-content p { font-size: var(--fs_p); }


.edit_modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.4);}
.modal-content { background-color: #e9e9e9; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%;}
.modal-title { padding:10px 0;  }
.module_hidden_item.edit_hover .editable-content { cursor: pointer;} 
.module_hidden_item.edit_hover .editable-content:hover { outline: 2px dashed red; border-radius: 20px;}
#saveChanges { margin-top: 15px; color: #fff; background: var(--color-main); padding: 10px; min-width: 150px; border-radius: 3em; display: inline-block; border: none;text-decoration: none; text-align: center;}
#saveChanges:hover { color: #fff; background-color: #ccc;}
.modal-content .pell_right{ text-align: right; }
#closeModal {
    float: right;
    cursor: pointer;
    display: block;
    position: relative;
    right: 0;
    top: -15px;
    z-index: 100;
    font-weight: bold;
    margin: 0;
    height: 40px;
    width: 40px;
    border: 0;
	color: var(--color-main);     
    font-size: 1.8em;
    background: transparent;
}
#closeModal:hover { color: #bfb8b2;}

.wr_subject_edit .pell-content { height: 200px; }
.wr_2_edit .pell-content, .wr_3_edit .pell-content { height: 100px; }
#bo_w .wr_2_edit .pell-content, #bo_w .wr_3_edit .pell-content { height: 200px; }

.btn_img_name {
    width: 50%;
    word-break: keep-all;
    margin-top: 25px;
    letter-spacing: 0.6px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.btn_img_name1 {
    margin-top: 25px;
    color: #888;
    letter-spacing: 0.6px;
    padding: 6px 18px;
    border-radius: 3em;
    display: inline-block;
    border: 1px #888 solid;
    text-decoration: none;
    text-align: center;
}
.btn_img_name1:hover {
    color: #fff ! important;
    border: 1px #888 solid ! important;
    background-color: #888 ! important;
}

/* 모율 이동시 */
#sortable .list_info_box.edit_hover { cursor: move; }
.list_info_box.edit_hover:hover {border: 0.1px dashed var(--color-main);}

/* 추가된 중앙 모달창 */
.btn_delete { display: inline-flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #ccc; border-radius: 4px;padding: 0; width: 32px; height: 32px; cursor: pointer;}
.btn_file { border: 2px dashed #ddd;width: 80px; height: 80px;  font-size: 30px;}
.btn_save { background: var(--color-main); margin-top: 20px; border: none; color: #fff; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; padding: 12px 20px; cursor: pointer; border-radius: 50px; width: 100%; margin-bottom: 30px;}
.btn_save:hover { background: #333333;}
.btn_save>input:focus {outline:none;}

/* 이미지 미리보기 */
.preview_img { 
    height: 250px; 
    width: 100%; 
    border: 1px dashed #ff0000; 
    display: flex; 
    align-items: center; 
    justify-content: center; border-radius: 10px;
}
.preview_img img {
    max-height: 240px; 
    max-width: 100%; 
    margin: 10px;
    padding: 10px;
}

/* 카테고리 스와이프 이미지 미리보기 */
.swiper-container {  width: 100%; height: 250px;}
.swiper-container .swiper-slide { cursor: pointer; text-align: center; display: flex;flex-direction: column;justify-content: center; align-items: center;}
.swiper-container .swiper-slide.selected { border: 2px dashed red; border-radius: 10px; overflow: hidden;}
.swiper-container .swiper-slide.selected .swiper_img_box img { max-width: 100%; object-fit: contain; }
.swiper-container .swiper_img_tit { position: absolute; bottom: 20px; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px;}

.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev { width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after { color: #fff; font-size: 16px;}
.swiper-container .swiper-button-next:hover,
.swiper-container .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.7); }

/* 모듈스위치 토클 */
.art_switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.art_switch input { opacity: 0; width: 0; height: 0; }
.art_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.art_slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white;transition: .4s; }
input:checked + .art_slider { background-color: var(--color-main); }
input:checked + .art_slider:before { transform: translateX(26px); }
.art_slider.round { border-radius: 34px; }
.art_slider.round:before {  border-radius: 50%; }

.w_10 { width: 10%; }
.w_20 { width: 20%; }
.w_30 { width: 30%; }
.w_40 { width: 40%; }
.w_50 { width: 50%; }
.w_60 { width: 60%; }
.w_70 { width: 70%; }
.w_80 { width: 80%; }
.w_90 { width: 90%; }

.word_keep{ 
  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}