@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Brush+Script&family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100..900&family=Single+Day&display=swap');

.banner-area {
    width: 100%;
    height: 480px;
    position: relative;
}

.img_banner {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.img_banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.subj-con {
    width: 100%;
    height: 480px;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.last_time {width:30px;height:30px;position:absolute;top:5px;left:5px;z-index:99;display:flex;justify-content: center;align-items: center;
                border-radius:50%;background:#000;color:#FFF;font-size:0.85rem;}
.last_time a {color:#FFF;}
.none-post {width:100%;height:480px;border:1px solid #CCC;background:url(img/noimgs005.jpg) no-repeat center;background-size:cover;
    display:flex !important;justify-content:center;align-items: center;}

.subj-con .t1-none {padding:20px;margin-bottom:10px;font-size:24px;}
.subj-con .t2-none {padding:20px;margin-bottom:10px;font-size:18px;}

/* 
.t1-slideup, 
.t1-slideleft,
.t1-slidedown,
.t1-slideright {padding:10px;margin-bottom:10px;font-size:24px;}

.t2-slideup, 
.t2-slideleft,
.t2-slidedown,
.t2-slideright {padding:10px;font-size:18px;}
 */

.t1-text {padding:10px;margin-bottom:10px;font-size:24px;}
.t2-text {padding:10px;font-size:18px;}


.t1-slideup {opacity: 0; transform: translateY(50px);}
.t1-slideup.animate {animation: slideUp 1s ease-out forwards;}

.t1-slideleft {opacity: 0; transform: translateX(100px);}
.t1-slideleft.animate {animation: slideLeft 1s ease-out forwards;}

.t1-slidedown {opacity: 0; transform: translateY(-50px);}
.t1-slidedown.animate {animation: slideDown 1s ease-out forwards;}

.t1-slideright {opacity: 0; transform: translateX(-100px);}
.t1-slideright.animate {animation: slideRight 1s ease-out forwards;}


.t2-slideup {opacity: 0; transform: translateY(50px);}
.t2-slideup.animate {animation: slideUp 1s ease-out 0.5s forwards;}

.t2-slideleft {opacity: 0; transform: translateX(100px);}
.t2-slideleft.animate {animation: slideUp 1s ease-out 0.5s forwards;}

.t2-slidedown {opacity: 0; transform: translateY(-50px);}
.t2-slidedown.animate {animation: slideUp 1s ease-out 0.5s forwards;}

.t2-slideright {opacity: 0; transform: translateX(-100px);}
.t2-slideright.animate {animation: slideUp 1s ease-out 0.5s forwards;}


@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#chamcode-banner {position: relative; width: 100%;}
#chamcode-banner .btn-config {position: absolute; right:0; top: -540px; z-index: 200;}
#chamcode-banner .btn-config svg {width: 24px; height: 24px; stroke: #fff;}
#chamcode-banner .slick-wrap {position: relative;}
/* #chamcode-banner .slick {border:5px solid black;} */
#chamcode-banner .slick .wrap {padding: 20px;border:5px solid #CCC;}
#chamcode-banner .pack {position: relative;}
#chamcode-banner figure {display: grid; grid-template-columns: 400px 1fr; gap: 20px; grid-template-areas: 'img txt'; width: 100%; padding: 0; max-width: 1180px; margin: 0 auto;}
#chamcode-banner figure > a {grid-area: img;}
#chamcode-banner figcaption {grid-area: txt;}
#chamcode-banner h2 {font-size: 40px; font-weight: bold; margin-bottom: 20px;}
#chamcode-banner h2 a {color: #fff;}
#chamcode-banner .banner-content {color: #fff; margin-top: 10px;}
#chamcode-banner button {background-color: transparent; border-style: none; }
#chamcode-banner .icon {stroke: #fff;}
#chamcode-banner .dots-wrap {position: absolute; left: 50%; bottom: 20px; padding-right: 25px; transform: translateX(-50%);}
#chamcode-banner .slick-dots {display: flex; flex-wrap: wrap;}
#chamcode-banner .slick-dots li:not(:last-child) {margin-right: 5px;}
#chamcode-banner .slick-dots li button {width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; text-indent: -9999px; transition: all .5s;}
#chamcode-banner .slick-dots .slick-active button {width: 40px; border-radius: 10px; background: #fff;}
#chamcode-banner .pause {position: absolute; right: 0; top: 0;}
#chamcode-banner .play {display: none; position: absolute; right: 0; top: 0;}
#chamcode-banner .prev {position: absolute; right: 70px; bottom: 10px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;}
#chamcode-banner .next {position: absolute; right: 10px; bottom: 10px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;}
#chamcode-banner .prev .icon, #chamcode-banner .next .icon {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;}
#chamcode-banner .prev:after, #chamcode-banner .next:after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; z-index: 1;}

@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1200px) {
}

/* print */
@media print {
}

/* ie only */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
}