@charset "utf-8";

button {border:none; background:none; cursor:pointer;}

.bo_top_title {width:100%;height:140px;font-size:1.6rem;text-align:center;font-weight:500;display:relative;}
.bo_top_title p {line-height:140px;}
.title-sticky {position:sticky;top:0;background: white;z-index: 100;transition: color 0.3s;color: black;}
.title-sticky.scrolled a {color:#CCC; /* 스크롤된 후 글자색 */}
.title-sticky ul {position:absolute;right:10px;bottom:10px;display:flex;justify-content: flex-end;gap:10px;}
.title-sticky ul li {padding:5px 10px;border:1px solid #CCC; border-radius:4px;background:#f1f1f1;font-size:0.75rem;transition:all .3s;}
.title-sticky ul li:hover {background:#363636;border-color: #363636;}
.title-sticky ul li:hover button {color:#FFF !important;}

/* list */
.list_container {width:100%;padding:10px;margin-bottom:10px;}
.new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}

.all_box {margin:10px 0 20px 0;}
.list_container ul {display:flex;justify-content: flex-start;flex-wrap: wrap;align-items: center;}
.list_container ul:nth-child(even) {background:#f0f0f0;}
.list_container ul li {padding:8px 5px;}
/* .list_container ul li.thumb_img input {margin-right:10px;} */
.list_container ul li:first-child {width:5%;text-align:center;} /* number */
.list_container ul li:nth-child(2) {width:162px;} /* thumb */
.list_container ul li:nth-child(3) {width:50%;font-size:0.85rem;font-weight:400;} /* title */
.list_container ul li:nth-child(4) {width:80px;text-align:center;} /* choice */
.list_container ul li:nth-child(5) {width:100px;text-align:right;} /* name */
.list_container ul li:nth-child(6) {width:60px;text-align:right;} /* date */
.list_container ul li:nth-child(7) {width:60px;text-align:right;} /* hit */

span.red_chk {color: red; font-weight: bold;}
span.hot-label {color:red;font-size:0.65rem;font-weight:300;}
/* popup */
.d_popup{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1000}
.d_popup.on{display:block}
.d_popup .bg{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.6);}
.d_popup .wins{display:none;position:absolute;width:600px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;}
.d_popup .wins.on{display:block}
.d_popup .wins .inner{max-height:700px; overflow-y:auto; padding:30px;font-size:14px;color:#555;line-height:1.6; width: 100%; padding-top: 20px;}
.d_popup .wins .inner:after{display:block;content:'';clear:both}
.d_popup .wins .close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:#000;color:#FFF;cursor:pointer;text-align:center;line-height:40px;}
/* .d_popup .wins .close:before{display:block;content:'';position:absolute;left:50%;top:50%;width:30px;height:2px;background:#000;transform:translate(-50%,-50%) rotate(45deg)} */
/* .d_popup .wins .close:after{display:block;content:'';position:absolute;left:50%;top:50%;width:30px;height:2px;background:#000;transform:translate(-50%,-50%) rotate(-45deg)} */
.d_popup .wins .tit {line-height:100%;font-size:0.9rem;color:#000;padding-left:30px; padding-top: 30px;}

.popup_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%;
     background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s;}
.popup_box {background:#fff; width:90%; max-width:600px; padding:20px; border-radius:10px; position:relative; max-height:80%; overflow-y:auto;}
.popup_box .popup_ul {list-style:none; padding:0; margin:14px 0 0 0;overflow-y:auto;}
.popup_box .popup_ul input {margin-right:10px;}

.popup_list {margin-top:15px; text-align:right;}
.popup_list span {display:inline-block;width:fit-content;padding:4px 6px;border:1px solid #CCC;border-radius:6px; margin-left:10px;}
.popup_list span:hover {background:#333;color:#FFF;}

ul.pop_list {width:100%;display:flex;justify-content: flex-start; flex-wrap: wrap;padding:10px;border-bottom:1px dotted #CCC;}
ul.pop_list li {padding:5px;}
ul.pop_list li:first-child {width:80px;}
ul.pop_list li:nth-child(2) {width:100px;text-align:center;}
ul.pop_list li:nth-child(3) {width:42%;}
ul.pop_list li:nth-child(4) {width:11%;height:26px;line-height:16px;text-align:center; border:1px solid #CCC;border-radius:6px;}
ul.pop_list li:nth-child(5) {width:11%;height:26px;line-height:16px;text-align:center; border:1px solid #CCC;border-radius:6px;margin-left:5px;}

.playlist-item {margin-bottom:10px; display:flex; justify-content:flex-start ;}

#board-menu ul li svg, #bo_w .btn_confirm svg, .bo_vc_w .btn_submit svg, #bo_btn_top .btn_bo_user svg {display: block; width: 18px; height: 18px; margin: 0 auto 8px;}
#bo_cate {margin: 0 0 10px;}
button {border-style: 0; padding: 0; all: unset; cursor: pointer;}
.category-box {position: relative; padding-right: 32px; min-height: 38px;}
.category-box button {background: #000; text-indent: -9999px; background: #000 url(./img/chevron-down.svg) no-repeat center center; position: absolute; right: 0; top: 0; width: 30px; height: 38px;}
.category-box.active button {transform: scaleY(-1);}
#board-menu {width: 60px; height:60px; position: fixed; right: 18%; bottom: 10px; z-index: 1000; text-align: center;}
#board-menu > button {width: 60px; height: 60px; border-radius: 50%; background-color: #52b69a; color: #fff; border: 0; overflow: hidden; position: relative; z-index: 10;} 
#board-menu > button svg {position: absolute; left: 50%; top: 50%; transition: .3s; transform: translate(-50%, -50%);} 
#board-menu > button svg:nth-of-type(2) {transform: translate(-50%, 60px);} 
#board-menu.active > button svg:nth-of-type(1) {transform: translate(-50%, -60px);} 
#board-menu.active > button svg:nth-of-type(2) {transform: translate(-50%, -50%);} 
#board-menu li {width: 60px; height: 60px; position: absolute; line-height: 5px; border-radius: 50%; background-color: #52b69a; transform: translate(0, -60px); 
    transition: all .4s; text-align: center; z-index: 1; opacity: 0;}
#board-menu li:hover {background-color: #ff0000;}
#board-menu li a {color: #fff; position: relative; top: 20%; left: 0;}
#board-menu li button {color: #fff; position: relative; top: 20%; left: 0; font-size: .9em;}
#board-menu.active li:nth-child(1) {opacity: 1; transform: rotate(-90deg) translateX(60px) translateY(-70px) rotate(90deg); transition-delay: 0s;}
#board-menu.active li:nth-child(2) {opacity: 1; transform: rotate(-90deg) translateX(60px) translateY(-140px) rotate(90deg); transition-delay: 0.1s;}
#board-menu.active li:nth-child(3) {opacity: 1; transform: rotate(-90deg) translateX(60px) translateY(-210px) rotate(90deg); transition-delay: 0.2s;}
#board-menu.active li:nth-child(4) {opacity: 1; transform: rotate(-90deg) translateX(130px) translateY(-210px) rotate(90deg); transition-delay: 0.3s;}
#board-menu.active li:nth-child(5) {opacity: 1; transform: rotate(-90deg) translateX(130px) translateY(-140px) rotate(90deg); transition-delay: 0.4s;}
#board-menu.active li:nth-child(6) {opacity: 1; transform: rotate(-90deg) translateX(130px) translateY(-70px) rotate(90deg); transition-delay: 0.5s;}
#board-menu.active li:nth-child(7) {opacity: 1; transform: rotate(-90deg) translateX(130px) translateY(0px) rotate(90deg); transition-delay: 0.6s;}

/* list_popup.js checkbox  */
  .checkbox-wrapper-34 {
    --blue: #0D7EFF;
    --g08: #E1E5EB;
    --g04: #848ea1;
  }

  .checkbox-wrapper-34 .tgl {
    display: none;
  }
  .checkbox-wrapper-34 .tgl,
  .checkbox-wrapper-34 .tgl:after,
  .checkbox-wrapper-34 .tgl:before,
  .checkbox-wrapper-34 .tgl *,
  .checkbox-wrapper-34 .tgl *:after,
  .checkbox-wrapper-34 .tgl *:before,
  .checkbox-wrapper-34 .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper-34 .tgl::selection,
  .checkbox-wrapper-34 .tgl:after::selection,
  .checkbox-wrapper-34 .tgl:before::selection,
  .checkbox-wrapper-34 .tgl *::selection,
  .checkbox-wrapper-34 .tgl *:after::selection,
  .checkbox-wrapper-34 .tgl *:before::selection,
  .checkbox-wrapper-34 .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 57px;
    height: 27px;
    position: relative;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:after,
  .checkbox-wrapper-34 .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 44%;
    height: 100%;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:before {
    display: inline;
    position: absolute;
    top: 7px;
  }
  .checkbox-wrapper-34 .tgl:checked + .tgl-btn:after {
    left: 56.5%;
  }

  .checkbox-wrapper-34 .tgl-ios + .tgl-btn {
    background: var(--g08);
    border-radius: 20rem;
    padding: 2px;
    transition: all 0.4s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:after {
    border-radius: 2em;
    background: #fff;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:before {
    content: "No";
    left: 28px;
    color: var(--g04);
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:active:after {
    padding-right: 0.4em;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn {
    background: var(--blue);
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:active:after {
    margin-left: -0.4em;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:before {
    content: "Yes";
    left: 4px;
    color: #fff;
  }

/* list.skin.php checkbox */
  .checkbox-wrapper-35 .switch {
    display: none;
  }

  .checkbox-wrapper-35 .switch + label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #78768d;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .checkbox-wrapper-35 .switch + label::before,
  .checkbox-wrapper-35 .switch + label::after {
    content: '';
    display: block;
  }

  .checkbox-wrapper-35 .switch + label::before {
    background-color: #05012c;
    border-radius: 500px;
    height: 15px;
    margin-right: 8px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
    width: 25px;
  }

  .checkbox-wrapper-35 .switch + label::after {
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
    height: 13px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
    width: 13px;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-text {
    display: block;
    margin-right: .3em;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-toggletext {
    display: block;
    font-weight: bold;
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 25px;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-unchecked,
  .checkbox-wrapper-35 .switch + label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-unchecked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-checked {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  .checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden;
  }

  .checkbox-wrapper-35 .switch:checked + label::before {
    background-color: #ffb500;
  }

  .checkbox-wrapper-35 .switch:checked + label::after {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  .checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  .checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

textarea {width:100%;padding:10px;margin-top:20px;border:1px solid #CCC;border-radius:10px;}

.more_btn {width:100%;padding:10px;text-align:center;}
.more_btn a {padding:10px;border:1px solid CCC;background:#f2f2f2;}
.more_btn a:hover {background:#999;color:#FFF;}


@media (max-width: 1694px) { 
	.list_container ul li:nth-child(3) {width:40%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width: 1385px) { 
	.list_container ul li:nth-child(3) {width:30%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width: 1200px) { 
	.list_container ul li:nth-child(3) {width:50%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width: 1070px) { 
	.list_container ul li:nth-child(3) {width:40%;font-size:0.85rem;font-weight:400;} /* title */

}

@media (max-width: 880px) { 
	.list_container ul li:nth-child(3) {width:30%;font-size:0.85rem;font-weight:400;} /* title */

}


@media (max-width: 765px) { 
  .list_container ul {gap:5px;margin-bottom:20px;border:1px solid #ccc;border-radius:10px;padding:10px;}
  .list_container ul li:first-child {width:10%;order:1;} /* number */
  .list_container ul li:nth-child(2) {width:98%;order:3;} /* thumb */
  .list_container ul li:nth-child(3) {width:88%;font-size:0.9rem;font-weight:500;order:2;} /* title */
  .list_container ul li:nth-child(4) {width:22%;text-align:right;order:4} /* choice */
  .list_container ul li:nth-child(5) {width:22%;text-align:right;order:5} /* name */
  .list_container ul li:nth-child(6) {width:22%;text-align:right;order:6} /* date */
  .list_container ul li:nth-child(7) {width:22%;text-align:right;order:7;} /* hit */

  .list_container ul li.thumb_img {width:100%;}

  ul.pop_list li:first-child {width:80px;order:1;}
  ul.pop_list li:nth-child(2) {width:100px;text-align:center;order:3;}
  ul.pop_list li:nth-child(3) {width:80%;order:2;}
  ul.pop_list li:nth-child(4) {width:60px;order:4;}
  ul.pop_list li:nth-child(5) {width:60px;order:5;}

	.d_popup .wins{width:90%}
}

@media (max-width: 496px) { 
  .popup_list span {padding:4px 4px;margin-left:4px;}
  .d_popup .wins {width:80%;height:80vh;overflow-y:auto;}

}