@charset "utf-8";
/*************************************************************************
* @ 서비스명   : main
* @ 파일명     : /css/main.css
* @ 페이지설명  : main.css

**************************************************************************/

/* 가람 */

aside {text-align: center;}
aside .layout{width:100%}
aside .layout .info{margin-top: 20px;height: 140px;}

aside .layout .section02{border-radius:8px;background:#fff;margin-top:30px;}
aside .layout .section02 .side_banner{border-radius:8px;background:#fff;margin-top:5px;width:100%;}
aside .layout .section02 .side_banner img{border-radius:8px;max-width:350px;width:100%;}

aside .layout .section03{border-radius:8px;background:#92bf39;margin-top:15px;height:90px;padding:19px 15px;}
aside .layout .section03 a{text-align:center;}
aside .layout .section03 .text_01{font-size:14px;color:#fff;}
aside .layout .section03 .text_02{font-size:20px;font-weight:600;color:#fff;}
aside .layout .section04{border-radius:8px;background:#fff;margin-top:15px;padding:15px 20px 20px 20px;border:1px solid#e5e5e5;}
aside .layout .section04 .title{font-size:17px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
aside .layout .section04 .title a{font-size:13px;font-weight:normal;}

aside .layout .section05 .side_bottom_banner{margin-top:15px;background:#fff;border-radius:8px;height:100px;display:flex;align-items:center;justify-content:center;}

.pages{display:flex;gap:20px;width:1200px;margin:0 auto;}
.pages .content{width:830px;}
.pages .content .section_tv{border-radius:8px;background:#fff;margin-top:30px;padding-bottom:20px;}
.pages .content .section_tv .title{font-size:19px;font-weight:600;display:flex;justify-content:space-between;}
.pages .content .section_tv .title a{font-size:13px;font-weight:normal;}
.pages .content .section_tv .list{display:flex;gap:15px;flex-wrap:wrap;margin-top:15px;}
.pages .content .section_tv .list .tv{width:calc(33% - 8px)}
.pages .content .section_tv .list .tv .img img{border-radius:8px;width:100%;height:285px;aspect-ratio:16/9;object-fit:cover;}
.pages .content .section_tv .list .tv .name{margin-top:3px;font-size:16px;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
.pages .content .section_tv .list .tv .date{margin-top:3px;font-size:14px;color:#999;}

.pages {display: flex; gap: 20px; width: 1200px; margin: 0 auto;}
.pages .content {width: 830px;}
.pages .content .section_ebook {border-radius: 8px; background: #fff; margin-top: 30px; padding-bottom: 20px;}
.pages .content .section_ebook .title {font-size: 19px; font-weight: 600; display: flex; justify-content: space-between;}
.pages .content .section_ebook .title a {font-size: 13px; font-weight: normal;}
.pages .content .section_ebook .list {display: flex; gap: 15px; flex-wrap: wrap; margin-top: 15px;}
.pages .content .section_ebook .list .tv {width: calc(33% - 8px); display: flex; flex-direction: column; gap: 10px;}
.pages .content .section_ebook .list .tv .img img {border-radius: 8px; width: 100%; height:285px; aspect-ratio: 16/9; object-fit: cover;}
.pages .content .section_ebook .list .tv .info {margin-top: 10px;}
.pages .content .section_ebook .list .tv .info .title-qr {display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.pages .content .section_ebook .list .tv .info .content {flex: 1;}
.pages .content .section_ebook .list .tv .info .content .name {font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-bottom: 5px;}
.pages .content .section_ebook .list .tv .info .content .name.main-title {font-weight: 700; color: #333;}
.pages .content .section_ebook .list .tv .info .content .name.sub-title {font-weight: 400; color: #666; font-size: 14px;}
.pages .content .section_ebook .list .tv .info .qr-code {width: 50px; height: 50px; flex-shrink: 0;}
.pages .content .section_ebook .list .tv .info .qr-code img {width: 100%; height: auto; border-radius: 5px;}
.pages .content .section_ebook .list .tv .info .date {margin-top: 10px; font-size: 14px; color: #999;}

.pages .content .section_common {border-radius: 8px; background: #fff; margin-top: 30px; padding-bottom: 20px;}
.pages .content .section_common img{width:750px;}

.top-banner{border-radius:8px;margin-top:20px;overflow:hidden;height:140px;}

.middle-banner img {display: none;}
.middle-banner img:first-of-type {display: block;}
.slick-initialized .middle-banner img {display: block;}

.side-banner-mo img {display: none;}
.side-banner-mo img:first-of-type {display: block;}
.slick-initialized .side-banner-mo img {display: block;}

.side-banner img {display: none;}
.side-banner img:first-of-type {display: block;}
.slick-initialized .side-banner img {display: block;}

.notice-slick .notice {display: none;}
.notice-slick .notice:first-of-type {display: block;}
.slick-initialized .notice-slick .notice {display: block;}

/* 페이지 제목 스타일 */
.page-title {
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

/* 검색창 컨테이너 */
.page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

/* 검색창 스타일 */
.search-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px 10px;
    width: 100%;
    max-width: 600px; /* 최대 너비 설정 */
}

/* 검색창 입력 필드 */
.search-input {
    flex: 1; /* 입력 필드가 가변 크기를 가지도록 설정 */
    padding: 10px;
    font-size: 16px;
    border: none;
    outline: none;
    border-radius: 5px;
}

/* 검색 버튼 스타일 */
.search-button {
    border: 1px solid #333; /* 검은색 테두리 추가 */
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none; /* 배경색 제거 */
    color: #333; /* 아이콘 색상 검은색 */
    transition: transform 0.2s;
}

.search-button:hover {
    transform: scale(1.1); /* 버튼 클릭 시 살짝 확대 */
}

/* 검색 버튼 아이콘 */
.search-button i {
    font-size: 16px;
}

#map {
   width: 100%;
   max-width: 700px;
   height: 600px;
   margin: 20px auto;
   border: 1px solid #ddd;
   border-radius: 8px;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.contact-form textarea {
    resize: none;
    height: 100px;
}

.contact-form .checkbox-group {
    display: flex;
    align-items: center;
}

.contact-form .checkbox-group input {
    margin-right: 10px;
}

.contact-form .submit-btn {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form .submit-btn:hover {
}

#hd_pop {width:1200px}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* tablet */
@media all and (max-width:1280px) {
    aside .layout{text-align: center;}
    aside .layout .section02 .side_banner img{height: 250px;}

    .search-bar-container {
        gap: 10px;
        margin: 0px 20px;
    }

    .search-input {
        width: 100%;
    }

    .contact-form {
        padding: 15px;
    }

    .contact-form .submit-btn {
        font-size: 14px;
    }


    /* 가람 */
    body{background:#fff}
    .top-banner{height:auto;margin-top:15px;}
    .middle-banner{margin-top:30px;}
    .bottom-banner-mo{margin-top:20px;}
    .pages{display:block;gap:0px;width:100%;padding:0px 20px;}
    .pages .content{width:100%}
    .pages .content .section_tv{margin-top:30px;}
    .pages .content .section_tv .title{font-size:18px;}
    .pages .content .section_tv .title a{font-size:12px;}
    .pages .content .section_tv .list{gap:10px;}
    .pages .content .section_tv .list .tv{width:calc(50% - 5px);}
    .pages .content .section_tv .list .tv .name{font-size:15px;}

    .pages .content .section_ebook {margin-top: 30px;}
    .pages .content .section_ebook .title {font-size: 18px;}
    .pages .content .section_ebook .title a {font-size: 12px;}
    .pages .content .section_ebook .list {gap: 10px;}
    .pages .content .section_ebook .list .tv {width: calc(50% - 5px);}
    .pages .content .section_ebook .list .tv .info .content .name {font-size: 15px;}
}


/* mobile */
@media all and (max-width:768px) {
    /* 팝업레이어 */
    #hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0}
    #hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
    /* .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
    .hd_pops img {max-width:100%;height:auto} */
    /* .hd_pops_con {} */

    .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;width: 100%;left: 0!important;top: 0px!important}
    .hd_pops_con {width: auto!important;height: auto!important}
    .hd_pops_con img {width: 100%;height: auto}
    .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
    .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
    .hd_pops_footer .hd_pops_close {background:#393939;position:relative;top:0;right:0}

}

/* mobile */
@media all and (max-width:550px) {
    .pages .content .section_tv .list .tv{width:100%}
    .pages .content .section_ebook .list .tv{width:100%}
}