@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:0;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.pageNotice {color:#fff;font-size:16px;background:#2d2d38;border-radius:6px;padding:18px 22px;display:flex;align-items:start;line-height:1.4;margin-bottom:30px;}
.pageNotice i {margin-right:9px;color:#ff0000;font-size:22px;}

.slideTabWrap {position:relative;padding:0 24px;margin-bottom:16px;}
.slideTabWrap .swiper-button-next {width:auto;right:2px;color:#000;}
.slideTabWrap .swiper-button-prev {width:auto;left:2px;color: #000;}
.slideTabWrap .swiper-button-next:after,
.slideTabWrap .swiper-button-prev:after {font-size:18px;}
.slideTabWrap .slideTab .swiper-slide {width:auto;}
.slideTabWrap .slideTabBtn {font-size:14px;height:32px;line-height:32px;padding:0 14px;border:1px solid #2d2d38;border-radius:100px;background-color:#fff;display:flex;align-items:center;}
.slideTabWrap .slideTabBtn.on {color:#fff;background-color: #ff0000;border-color:#ff0000;}
.slideTabWrap .slideTabBtn.on:before {content:'';width:9px;height:12px;background:url(/img/slide_tab_btn_on.png) no-repeat center/contain;margin-right:6px;}

.slideTabWrap2 {position:relative;padding:0 50px;max-width:90%;margin:0 auto 14px;}
.slideTabWrap2 .swiper-button-next {width:auto;right:0;color:#000;}
.slideTabWrap2 .swiper-button-prev {width:auto;left:0;color: #000;}
.slideTabWrap2 .swiper-button-next:after,
.slideTabWrap2 .swiper-button-prev:after {font-size:18px;}
.slideTabWrap2 .slideTab2 .swiper-slide {width:auto;}
.slideTabWrap2 .slideTabBtn {font-size:14px;height:31px;line-height:31px;padding:0 12px;border:1px solid #2d2d38;border-radius:100px;background-color:#fff;display:flex;align-items:center;}
.slideTabWrap2 .slideTabBtn.on {color:#ff0000;border-color:#ff0000;}
.slideTabWrap2 .slideTabBtn.on:before {content:'';width:9px;height:12px;background:url(/img/slide_tab_btn_on_red.png) no-repeat center/contain;margin-right:6px;}

.signatureSearch {display:flex;align-items:center;width: 300px;position:relative;max-width:100%;margin-bottom:32px;}
.signatureSearch:after {content:'';width:18px;height:18px;display:inline-block;position:absolute;right:12px;background:url(/img/search_icon.png) no-repeat center/contain;top:50%;transform:translateY(-50%);}
.signatureSearch .searchInput {width:100%;padding:0 40px 0 15px;height:34px;border:1px solid #2d2d38;background:#FFF;border-radius: 100px;}

.signatureList {display:grid;grid-template-columns:repeat(4, 1fr);gap:50px 20px;}
.signature {position:relative;}
.signature:after {content:'';display:block;width:26px;height:26px;position:absolute;right:14px;top:14px;background:url(/img/play.png) no-repeat center/contain;}
.signature .sgImg {width:100%;height:0;padding-bottom:60%;margin-bottom:20px;position:relative;}
.signature .sgImg img {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.signature .sgInfo .cnt {background-color:  #ffe6e6;color:#ca7f7f;font-size:16px;display:inline-block;vertical-align:middle;padding:4px 10px;border-radius:100px;margin-right:10px;}
.signature .sgInfo .nm {display:inline-block;font-size:16px;color:#040404;vertical-align:middle;}

.sgModal {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, .38);z-index:-1;display:none;}
.sgModal.show {z-index: 10000;display:block;}
.sgModal .sgModalInner {background-color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:900px;height:auto;}
.sgModal .sgModalHead {display:flex;align-items:center;padding:30px 30px 0;margin-bottom:30px;gap:14px;}
.sgModal .sgModalTitle {font-size:22px;display:flex;align-items:center;flex:1;}
.sgModal .sgModalTitle img {margin-right:20px;}
.sgModal .sgModalBtn {display:flex;align-items:center;gap:20px;}
.sgModal .sgModalBtn button {background-color:transparent;font-size:20px;}
.sgModal .sgModalBody {padding:0 30px 30px;}

@media all and (max-width:1024px){
    .signatureContainer {padding:0 16px 24px;}
    .pageNotice { font-size: 14px;padding: 14px 14px;margin-bottom: 20px;}
    .pageNotice i {margin-right:6px;font-size:20px;}
    .signatureList {grid-template-columns: repeat(2, 1fr);gap:15px;}
    .signature:after {right:8px;top:8px;width:20px;height:20px;}
    
    .slideTabWrap {margin-bottom:24px;}
    .slideTabWrap .swiper-button-next:after,
    .slideTabWrap .swiper-button-prev:after {font-size:14px;}

    .slideTabWrap2 {max-width:unset;margin-bottom:10px;padding:0 20px;}
    
    .signatureSearch {width:100%;}

    .signature .sgImg {margin-bottom:8px;}
    .signature .sgInfo .cnt {font-size:12px;margin-right:6px;}
    .signature .sgInfo .nm {font-size:12px;}

    .sgModal .sgModalInner {width:94%;}
    .sgModal .sgModalHead {padding:15px 15px 0;margin-bottom:10px;}
    .sgModal .sgModalTitle img {margin-right:10px;width:20px;}
    .sgModal .sgModalTitle {font-size:15px;}
    .sgModal .sgModalBody {padding:0 15px 15px;}
    .sgModal .sgModalBtn {gap:12px;}
    .sgModal .sgModalBtn button {font-size:16px;}
    .sgModal iframe {width:100%;height:auto;}
}

@media all and (max-width:520px){
}