@charset "utf-8";

/* Top Search */
.list-tsearch { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }

/* Category */
.list-category .tabs { margin-bottom:20px; }
.list-category .dropdown { margin-bottom:20px; }
.list-category .active a, .list-category .selected a { color:crimson; font-weight:bold !important; }
@media (max-width: 991px){
    .category_modify {width: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap;}
    .category_modify::-webkit-scrollbar {display: none;}
}

/* List */
.list-wrap { width:100%; }
.list-admin { text-align:center; margin:15px 0px; padding: 15px 0 0; }
.list-btn .sort-drop { min-width:120px !important; left:auto !important; right:0px !important; }
.list-btn .sort-drop .sort a { color:crimson !important; font-weight:bold !important; }
.is-pc .ko .list-btn .sort-drop { font-size: 12px; }
.img-wrap .img-item a{position: relative;}
.img-wrap .img-item a:hover::after{content:""; position:absolute; width: 100%; height: 100%;background:url(/img/modal_btn.png) no-repeat center rgba(0,0,0,.4); top:0; left:0;}
@media (max-width:991px){
    .img-wrap .img-item a{position: relative;}
    .img-wrap .img-item a:hover::after{content:""; position:absolute; width: 100%; height: 100%;background:url(/img/mmodal_btn.png) no-repeat center rgba(0,0,0,.4); top:0; left:0; border-radius:0;}
    .gallery_container.list-container{margin-bottom: 0;}
}

/* Page */
.list-wrap .pagination a, .view-wrap .pagination a { color:#333 !important; }
.list-wrap .pagination .active a, .view-wrap .pagination .active a { color:#fff !important; background:#444 !important; border-color:#444 !important; }

/* View */
.view-wrap { width:100%; }
.view-wrap.view-modal {margin:0px; }
.view-btn { margin:0px 0px 30px; }
.view-btn i { margin-right:2px; }
@media (max-width:991px){
  .view-btn { margin:0; }
}

/* Write */
.write-wrap { width:100%; overflow:hidden; }

@media all and (max-width:460px) {
	.responsive .view-btn i { margin-right:0px; }
}

/* Modal */
body {background-color: transparent;}
.modal-content {background-color: transparent; box-shadow: none; border: none;}
.modal-body {background-color: transparent; padding: 0;}
.responsive .modal .modal-dialog {width: 100%; margin: 0 auto; }
.modal-body .text-center.cursor{position: absolute; top: 0; right: 0;}
.modal-body .text-center.cursor .lightgray, i.lightgray{background-color: transparent; border: none;}
.modal-body .text-center.cursor .fa-times:before{content:url(/img/modal_close.png); position: absolute; top: 0; right: 0;}

.m03_04_modal {position: fixed; top: 0; width: 100%; height: 100vh;}

.view-img {width: 100%; object-fit: cover;}
.img-tag {min-width: 50%;}

.content-wrap {background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) ); color:#fff; position: absolute; bottom: 0; width: 100%; padding: 50px 150px 50px;}

.view_title {font-size: 35px; margin-bottom: 40px; font-weight: 500;}

.view-content-box {display: flex; font-size: 18px;}
.view-content-box .flex-box {margin-right: 115px;}

@media (max-width:991px){
    /* .modal-body .text-center.cursor {top: 30%;} */
    .modal-body .text-center.cursor .fa-times:before {  width: 50px; height: 50px; background-image: url('/img/mmodal_close.png'); background-size: contain; background-repeat: no-repeat; display: inline-block; content: "";}
    .m03_04_modal{height: auto; top: 50%; transform: translateY(-50%);}
    .view_title{font-size: 23px; margin-bottom: 20px;}
    .content-wrap{padding: 25px 15px;}
    .view-content-box{display: block;}
    .view-content-box .view-content{padding-bottom: 0; font-size: 13px;}
}

/* modal btn */
.view-btn {display: flex; justify-content: space-between; width: 100%;}
.view-btn .btn-group {display: flex; justify-content: space-between; width: 100%; position: absolute; top: 50%; transform: translateY(-50%);}
.view-btn .btn {background-color: rgba(0,0,0,.4); border-radius: 50% !important; width: 76px; height: 76px; line-height: 58px; transition: .3s; position: absolute;}
.view-btn .btn:hover{background-color: #c81808;}
.view-btn .prev-btn{left: 150px;}
.view-btn .next-btn{right: 150px;}
.btn:active {box-shadow: none;}
@media (max-width:991px){
    .view-btn .btn-group{transform: translateY(0); bottom: 65px; top:auto}
    .view-btn .btn{width: 40px; height: 40px; line-height: 26px; z-index: 30;}
    .view-btn .next-btn{right: 15px; padding: 5px 10px 5px 12px;}
    .view-btn .prev-btn{left: inherit; right: 65px; padding: 5px 12px 5px 10px;}
    .view-btn .btn img{width: 7px; height: 11px;}
}

.adm-btn {z-index: 1000; position: absolute; right: 30px; bottom: 30px; display: flex;}