@charset "utf-8";

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

.bo_top_title {width:100%; font-size:1.6rem;text-align:center;font-weight:500;position:relative; margin-bottom: 0px; }  /* ★ margin-bottom: 20px; */
.bo_top_title p {padding-bottom:0px;}  /* ★ padding-bottom:15px; */
.title-sticky {position:sticky;top:0; z-index: 100; transition: color 0.3s;color: black;}
.title-sticky.scrolled a {color:#CCC; /* 스크롤된 후 글자색 */}
.title-sticky ul {position:absolute;right:10px;bottom:0px;display:flex;justify-content: flex-end;gap:10px;}   /* ★ bottom: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:0px 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:1.20rem;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:1000px; overflow-y:auto; padding:30px 60px;font-size:15px;color:#333;line-height:1.4; width: 100%; padding-top: 30px;}
.d_popup .wins .inner:after{display:block;content:'';clear:both}
.d_popup .wins .close{position:absolute;right:10px;top:25px;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:1.4rem;font-weight:800; color:#11148B;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 { width: 100%; 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 ;}
.zoomer:hover .overlay-zoom .zoom-icon {
	opacity:0.4;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	filter: alpha(opacity = 50);
}
.overlay-zoom {
	z-index: 90;
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	position: relative;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.overlay-zoom .zoom-icon {
	display:block; /* ★★ added background-color: #5263F7;*/
	top:0;
	opacity: 0;
	z-index: 100;
	width: 100%;
	height: inherit;
	position: absolute;
	background-color: #5263F7;
	background-position: 50%;
	filter: alpha(opacity = 0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
/*
.fz_gallery_list li .overlay-zoom .zoom-icon i {
	color: #fff;
	text-align:center;
	font-weight:bold;
	font-size:30px;
	z-index:100;
	position:absolute;
	top:45%;
	left:50%;	
}
*/
/* IMAGE PRELOADER ?? */

.preloader {  
	background: url('./img/preloader.gif') center center no-repeat #fff;  
	display: inline-block;  
}  

/* ★★ 2018.06.27 */

.small_image {	
	width: 150px;
	height: 100px;
	float:left;
	background-image: url('./img/blog_small_pic2.png'); background-repeat:no-repeat; background-position:0px 0px;		
}
.small_image img,.small_image .preloader {		 
	border: 0px;	
	width: 150px;
	height: 100px;	
}

/* ★★ */


.small_image2 {	
	padding:0px 11px;
	width: 120px;
	height: 90px;
	background-image: url('./img/skin_right_img.png'); background-repeat:no-repeat; background-position:132px 10px;
}
.small_image2 img,.small_image2 .preloader {	
	border: 0px;	
	width: 120px;	
	height: 90px;
}

/* ★★ 2018.06.30 */

.small_image3 {	
	width: 130px;
	height: 90px;
	float: left;	
/*	background-image: url('/images/i_s2.png'); background-repeat:no-repeat; background-position:0px 0px; */
}

.small_image3 img,.small_image3 .loader {
	border: 0px;	
	width: 130px;
	height: 90px;
	text-align:bottom;
}

#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:50px; 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;}

}



/* ==============================================
   썸네일 효과 및 아이콘 스타일 (list.skin.php)
   ============================================== */

/* 1. 썸네일 줌 영역 설정 */
.zoomer {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    width: 140px;   /* 썸네일 너비 */
    margin: 0 auto; /* 중앙 정렬 */
}

.overlay-zoom {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}


/* 2. 아이콘 위치 (썸네일이 아닌 배경 기준 왼쪽 상단 끝) */
.thumb_icons {
    position: absolute;
    top: 0;       
    left: 1px; /* ★ 기존 left: 15; 에서 px 단위가 빠져있어 수정했습니다. */
    z-index: 200; 
    pointer-events: none; 
    line-height: 0;
}

/* 아이콘 공통 속성 */
.thumb_icons img {
    display: block;
}

/* NEW 아이콘 개별 위치 조정 (아주 조금 오른쪽/배경 라인쪽) */
.thumb_icons img.icon_new_img {
    margin-left: 0px; /* 오른쪽으로 밀어내기 (원하시는 만큼 수치 조절) */
    margin-top: 0px;  /* 위아래 조절이 필요하면 사용 */
}

/* HOT 아이콘 개별 위치 조정 (아래로/오른쪽으로 배경라인에 맞춰서) */
.thumb_icons img.icon_hot_img {
    margin-left: 2px; /* 오른쪽으로 밀어내기 (수치 조절) */
    margin-top: 4px; /* 아래로 밀어내기 (수치 조절) */
    margin-bottom: 3px; /* HOT과 NEW가 같이 뜰 경우 둘 사이의 간격 */
}

/* 3. 파란색 배경 레이어 */
.blue_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(82, 99, 247, 0.8);
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* ★ 마우스 이벤트 통과 (툴팁 작동 핵심) */
}

/* 4. ani.gif 레이어 (위에서 아래로 내려옴) */
.ani_slide {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('./img/ani.gif'); 
    background-repeat: no-repeat;
    background-position: center center;
    
    /* ★ 사이즈 축소 (30px) */
    background-size: 30px auto; 
    
    z-index: 51;
    transition: top 0.3s ease-in-out;
    pointer-events: none; /* ★ 마우스 이벤트 통과 (툴팁 작동 핵심) */
}

/* 마우스 오버 시 효과 적용 */
.zoomer:hover .blue_layer { opacity: 1; }
.zoomer:hover .ani_slide { top: 0; }
.zoomer:hover img.main_thumb { transform: scale(1.1); }

/* 메인 썸네일 이미지 */
img.main_thumb {
    width: 100%; 
    display: block; 
    transition: transform 0.3s ease;
}