/* contents - element & picture */
.sub-creator-title {font-size:20px;font-weight:800;padding-bottom:32px;line-height: 1.2;}

.ep-filter-wrap {position: relative; width: 100%; padding: 30px 0 20px 0;}
.ep-filter {}
.ep-filter-menu {display: flex; align-items: center; justify-content: space-between;}
.ep-filter-left {display: flex; align-items: center;}
.content-select-search {display: flex; margin-right: 24px;}

.content-select-drop {background:#000; color: #fff;cursor:pointer;margin:0 auto;max-width:100px;padding:10px 16px;position:relative;width:100%;z-index:9; 
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.content-select-drop::after {border-bottom: 2px solid #999; border-right: 2px solid #999;content: '';display: block;width: 6px;height: 6px;margin-top: -4px;pointer-events: none;
  position: absolute;right: 16px;top: 50%;-webkit-transform-origin: 66% 66%;-ms-transform-origin: 66% 66%;transform-origin: 66% 66%;-webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}
.content-select-drop .drop {background:#000;-webkit-box-shadow: 0 10px 40px 10px rgb(140 152 164 / 18%); box-shadow: 0 10px 40px 10px rgb(140 152 164 / 18%);
  left:0;list-style:none;margin-top:0;opacity:0;padding-left:0;pointer-events:none;position:absolute; right:0;top:44px; border-radius: 4px; z-index: 9;
   transform: translateY(-4px); transition: transform .2s;   -webkit-transform-origin: 50% 0;     -ms-transform-origin: 50% 0;    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px);    transform: scale(0.75) translateY(-21px); 
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;}
.content-select-drop .drop li a {color:#fff;display: flex; align-items: center;padding:1rem;text-decoration:none;}
.content-select-drop .drop li a i {margin-right: 6px;}
.content-select-drop span {color:#fff; display: flex; align-items: center;}
.content-select-drop span i {margin-right: 6px;}
.content-select-drop .drop li:hover a {background-color:#484848;color:#fff;border-radius: 4px;}
.content-select-drop.active::after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg);}
.content-select-drop.active .drop {    opacity: 1; z-index: 9; pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);-ms-transform: scale(1) translateY(0);transform: scale(1) translateY(0); overflow-y: auto;}

.content-search{height: 40px;transition: 0.4s;width: 100%;}
.content-search .c-search-form{width:100%;height: 40px;padding-left:12px;padding-right: 12px;font-size: 14px;background: #fff; color:#000;border:1px solid #d6d6d6;border-left: 0;border-radius: 0;
  border-top-right-radius: 4px; border-bottom-right-radius: 4px;transition: .2s; font-weight: 500;}
.content-search .c-search-form::placeholder{color:#bbbbbb; font-weight: 300;}
.content-search .c-search-form[disabled], .content-search .c-search-form[readonly] {background-color: #fff;opacity: 1;}
.content-search .c-search-form:focus { background: #fff; border-color: #666666; box-shadow: 0 0 10px rgb(206 211 217 / 10%);}
.content-search ::-webkit-search-decoration, .content-search ::-webkit-search-cancel-button { -webkit-appearance: none;}
.input-group.content-search>.form-control.c-search-form:not(:last-child) {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}


.content-icons{display: inline-block;width: 16px;height: 16px;vertical-align:top ;background: url(/assets/img/contents_icons.png) no-repeat;background-size: 192px 32px;}
.content-icon1{background-position: 0 0px;}
.content-icon2{background-position: 0 -16px;}
.content-icon3{background-position: -16px 0px;}
.content-icon3.active {background-position: -16px -16px;}
.content-icon4{background-position: -32px 0px;}
.content-icon4.active {background-position: -32px -16px;}
.content-icon5{background-position: -48px 0px;}
.content-icon5.active {background-position: -48px -16px;}
.content-icon6{background-position: -64px 0px;}
.content-icon6.active {background-position: -64px -16px;}
.content-icon7{background-position: -80px 0px;}
.content-icon7.active {background-position: -80px -16px;}
.content-icon8{background-position: -96px 0px;}
.content-icon8.active {background-position: -96px -16px;}
.content-icon9{background-position: -112px 0px;}
.content-icon9.active {background-position: -112px -16px;}
.content-icon10{background-position: -128px 0px;}
.content-icon10.active {background-position: -128px -16px;}
.content-icon11{background-position: -144px 0px;}
.content-icon11.active {background-position: -144px -16px;}


.ep-filter-list {display: flex; align-items: center; margin-right: 24px; border: 1px solid #000; border-radius: 4px; overflow: hidden;}
.ep-filter-list.last {margin-right: 0;}
.ep-filter-list input{display: none;}
.ep-filter-list label{position: relative; font-size: 13px; padding: 10px 16px; background: #fff; border-right: 1px solid #000;  cursor: pointer; transition: border .2s; display: block; align-items: center;}
.ep-filter-list label:last-child {margin-right: 0; border-right: 0;}
.ep-filter-list label:hover {background: #ededed;}
.ep-filter-list label span {font-size: 13px; font-weight: 500;}
.ep-filter-list label i {margin-right: 6px;}
.ep-filter-list .filter-label.active {border-color: #000; background-color: #000; color: #fff;}
/*.ep-filter-list input:checked + label {border-color: #000; background-color: #000; color: #fff;}*/

.ep-filter-reset {text-align: right;}
.ep-filter-reset-btn {background: none;border: 0; border-radius: 4px; height: 40px; line-height: 40px; font-size: 13px; font-weight: 500; transition: background .2s; color: #999;}
.ep-filter-reset-btn span {font-size: 13px; font-weight: 500;}
.ep-filter-reset-btn:hover {background: #ededed; color: #000;}
.ep-filter-reset-btn i {font-size: 15px;}

.contents-of-creator {}
.contents-of-creator .frame {transform: none;}
.frame .inner {width: 400px;height: 240px; padding: 26px 24px 24px 24px; background: #fff; border: 1px solid #ececec; border-radius: 14px; transition: border .2s;}
.slick-arrow {  top: 0;color: white;width: auto;}
.slick-prev {left: 0;}
.slick-next { right: 0;}

.coc-list-wrap {display: flex; flex-direction: column; justify-content: space-between;}
.coc-list-top {}
.coc-list {display: flex; flex-wrap: wrap;}
.frame.slick-slide {}
.frame.slick-slide:hover .inner{ border-color: #333;}
.frame.slick-slide:hover img {-webkit-transform: translateY(0); transform: translateY(0);}
.frame.slick-slide .coc-list li {width: 25%; max-height: 60px; margin-bottom: 10px;}
.frame.slick-slide .coc-list li img {width: 100%; max-width: 100%; vertical-align: middle; -o-object-fit: contain; object-fit: contain; height: 60px; border: 0; box-shadow: 0 0 0 0;}
.frame.slick-slide .coc-list li img:hover {transform: none; box-shadow: 0 0 0 0; border: 0;}
.frame.slick-slide .coc-list li:hover img {box-shadow: 0 0 0 0; }
.coc-list-bottom {display: flex; justify-content: flex-start; align-items: center;}
.coc-profile {}
.coc-name {display: flex; align-items: center; font-size: 16px; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden;}
.coc-name .username {overflow: hidden;}

/* slider */
.slick-prev, .slick-next {position: absolute;top: 50%;content: "";z-index: 9;cursor: pointer;opacity: 1;transition: all .3s;background-color: transparent;}
.slick-prev {left: -22px;}
.slick-next {right: -22px;}
.slick-prev:before {content: "\e81c";font-family: "fontello";font-size: 16px;color: #a9a9a9;position: absolute;left: 4px;top: 43%;transform: translateY(-50%);width: 46px;height: 46px;
  border-radius: 36px;background: #fff;box-shadow: rgb(0 0 0 / 16%) 0px 3px 7px, rgb(0 0 0 / 5%) 0px 2px 4px 1px;display: flex;align-items: center;justify-content: center;transition: all .3s;}
.slick-next:before {content: "\e81d";font-family: "fontello";font-size: 16px;color: #a9a9a9;position: absolute;right: 4px;top: 43%;transform: translateY(-50%);width: 46px;height: 46px;
  border-radius: 36px;background: #fff;box-shadow: rgb(0 0 0 / 16%) 0px 3px 7px, rgb(0 0 0 / 5%) 0px 2px 4px 1px;display: flex;align-items: center;justify-content: center;transition: all .3s;}
.slick-prev:hover::before, .slick-next:hover::before { color: #000;}


.commu-detail-comment-all {display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;}
.commu-detail-comment-title {font-size: 20px; font-weight: 800; line-height: 1.2;}
.commu-search-filter {display: flex;}
.c-filter {color: #AAAAAA;display: block;position: relative;padding-left: 18px; padding-right: 12px;}
.c-filter input[type=radio]{position: absolute;visibility: hidden;}
.c-filter label{display: block;position: relative;font-weight: 500;font-size: 14px;z-index: 9;cursor: pointer; -webkit-transition: all 0.25s linear;}
.c-filter:hover label{color: ;}
.c-filter .check{display: block;position: absolute;border-radius: 100%;height: 16px;width: 16px;top: 1px;left: 0px;z-index: 5;transition: border .25s linear;
    -webkit-transition: border .25s linear;}
.c-filter .check::before {display: block;position: absolute;content: '';background: #ddd;border-radius: 100%;height: 5px;width: 5px;top: 5px;left: 5px;margin: auto;transition: background 0.25s linear; -webkit-transition: background 0.25s linear;}
.c-filter input[type=radio]:checked ~ .check::before{background: #00a3ff;}
.c-filter input[type=radio]:checked ~ label{color: #000; font-weight: 700;}

@media (max-width: 1640px) {
}
@media (max-width: 1401px) {
}
@media (max-width: 1299px) {
  .ep-filter-reset-btn span{display: none;}
}
@media (max-width: 1140px) {
  .ep-filter-menu {align-items: flex-start; justify-content: space-between; }
  .content-select-search {margin-right: 0; width: 100%; margin-bottom: 10px;}
  .ep-filter-left {width: 100%; flex-wrap: wrap;}
  .ep-filter-reset {margin-left: 10px;}
}
@media (max-width: 991px) {
  .ep-filter-reset {margin-left: 0;}
  .ep-filter-reset-btn{display: none;}
}
@media (max-width: 768px) {
  .ep-filter-list label span {display: none;}
  .ep-filter-list label i {margin-right: 0;}  
}
@media (max-width: 576px) {
  .ep-filter-list {margin-right: 16px;}
  .ep-filter-list label {padding: 10px 12px;}
}