@charset "utf-8";

/* 공통 */
.hide {display: none;}
.show {display: block;}
.checked {color: #5f84fe;}
.txt-hide { position: absolute; width: 0px; height: 0px; overflow: hidden; opacity: 0; font-size: 0px; text-indent: -9999px;}
input[type=hidden] { display: none !important;}
input::placeholder {color: #555}
.table-list .right, .table-area .right { text-align: right; position: relative;}
.table-list .left, .table-list .right, .table-area .left, .table-area .right { display: table-cell; vertical-align: middle;}
.grid {position: relative;}
.full {width: 100%;}
.half {width: 49.5%;}
.third {width: 32%;}
.quarter {width: 25%;}
.sixth {width: 16.666%;;}
.mob {display: none;}
.mob-header {display: none;}

.pager-mob {position: relative; padding: 12px 24px; display: none;}
.pager-mob .mob-paging {position: static; border: 1px solid #333; text-align: center; display: block; box-sizing: border-box; height: 37px; line-height: 37px; width: 85px; border-radius: 2em; font-weight: 500; font-size: 18px; margin: 0 auto; font-size: 18px;}
.pager-mob .mob-paging span {font-weight: bold; color: #ee5663; font-size: 18px;}
.pager-mob button {position: absolute;}
.pager-mob .btn-page-prev {left: 10px; top: 50%; transform: translateY(-50%);}
.pager-mob .btn-page-next {right: 10px; top: 50%; transform: translateY(-50%);}

/* 게시글 더보기 버튼 */
a.more {color: #5f84fe; display: block;}

/* 모바일 버튼 */
.mob-btn-wrap {position: fixed; bottom: 30px; right: 30px; flex-direction: column; gap: 10px 0; display: none; z-index: 10;}
.mob-btn-wrap button {width: 68px; height: 68px; border-radius: 50%;}
.mob-btn-wrap .btn-set {background-color: rgba(0, 0, 0, 0.6); background-image: url(../image/ico-setting.svg); background-repeat: no-repeat; background-position: center; background-size: 36px 36px;}
.mob-btn-wrap .btn-create-board {background-color: #5f84fe; background-image: url(../image/ico-create-wh.svg); background-repeat: no-repeat; background-position: center; background-size: 33px 33px;}


/* 페이징 */
.pager {display: flex; align-items: center; justify-content: center; margin-top: 10px;}
.pager ul {display: flex; align-items: center;}
.pager ul li {padding: 0 6px;}
.pager ul li .pager-num.active {color: #e0656f;}
.pager ul li .first {width: 12px; height: 12px; background: url(../image/arrow-first.svg) center/contain no-repeat; font-size: 0;}
.pager ul li .prev {width: 12px; height: 12px; background: url(../image/arrow-prev.svg) center/contain no-repeat; font-size: 0;}
.pager ul li .next {width: 12px; height: 12px; background: url(../image/arrow-next.svg) center/contain no-repeat; font-size: 0;}
.pager ul li .last {width: 12px; height: 12px; background: url(../image/arrow-last.svg) center/contain no-repeat; font-size: 0;}
.pager ul li .ellipsis {width: 10px; height: 10px; background: url(../image/ico-dot3-gr.svg) center/contain no-repeat; font-size: 0; transform: rotate(90deg);}

/* 달력 커스텀 */
input[type="date"] {position: relative; padding-right: 20px; background: url(../image/ico-calendar.svg) no-repeat right 15px center / 20px auto;}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {display: none;}
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer;}

/* 아이콘 이미지 */
i[class^="ico-"] {display: inline-block; width: 20px; height: 20px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.ico-pen-gr {background-image: url(../image/ico-pen-gr.svg);}
.ico-info-gr {background-image: url(../image/ico-info-gr.svg);}
.ico-add_file {background-image: url(../image/ico-add_file.svg);}
.ico-add_img {background-image: url(../image/ico-add_img.svg);}
.ico-add_video {background-image: url(../image/ico-add_video.svg);}
.ico-add_book {background-image: url(../image/ico-add_book.svg);}
.ico-add_link {background-image: url(../image/ico-add_link.svg);}
.ico-add_art {background-image: url(../image/ico-add_art.svg);}
.ico-plus {background-image: url(../image/ico-plus-wh.svg);}
.ico-copy-gr {background-image: url(../image/ico-copy-gr.svg); }
.ico-download-gr {background-image: url(../image/ico-download-gr.svg);}
.ico-delete-gr {background-image: url(../image/ico-delete-gr.svg);}
.ico-refresh-gr {background-image: url(../image/ico-refresh-gr.svg);}
.ico-refresh-bl {background-image: url(../image/ico-refresh-bl.svg);}
.ico-info-wh {background-image: url(../image/ico-info-wh.svg);}
.ico-move {background-image: url(../image/ico-move.svg);}
.ico-search-wh {background-image: url(../image/ico-search-wh.svg);}
.ico-qrcode {background-image: url(../image/ico-qr.png);}
.ico-star {background-image: url(../image/ico-star-default.svg);}
.ico-logout {background-image: url(../image/ico-logout_01.svg);}
.ico-gclass {background-image: url(../image/ico-gclass.png); width: 100% !important; height: 100% !important;}
.ico-vclass {background-image: url(../image/ico-vclass.png); width: 100% !important; height: 100% !important;}

/* 배경색상 */
.bg_color_default {background: darkseagreen !important;}
.bg_color_01 {background: #92A795 !important;}
.bg_color_02 {background: #E4C0AD !important;}
.bg_color_03 {background: #A5ABBB !important;}
.bg_color_04 {background: #4C6F94 !important;}
.bg_color_05 {background: #8AABF0 !important;}
.bg_color_06 {background: #F2B257 !important;}
.bg_color_07 {background: #DCA19E !important;}
.bg_color_08 {background: #A7928A !important;}
.bg_color_09 {background: linear-gradient(135deg, #F1ADAB, #F4E09C) !important;}
.bg_color_10 {background: linear-gradient(135deg, #87A0DE, #E5B5DA) !important;}
.bg_color_11 {background: linear-gradient(135deg, #4BC6D0, #4EC49B) !important;}
.bg_color_12 {background: linear-gradient(135deg, #D164A5, #53C0D5) !important;}

/* 배경이미지 */
.bg_img_01 {background: url(../image/bg/bg_img_01.jpg) no-repeat center/cover !important;}
.bg_img_02 {background: url(../image/bg/bg_img_02.jpg) no-repeat center/cover !important;}
.bg_img_03 {background: url(../image/bg/bg_img_03.jpg) no-repeat center/cover !important;}
.bg_img_04 {background: url(../image/bg/bg_img_04.jpg) no-repeat center/cover !important;}
.bg_img_05 {background: url(../image/bg/bg_img_05.jpg) no-repeat center/cover !important;}
.bg_img_06 {background: url(../image/bg/bg_img_06.jpg) no-repeat center/cover !important;}
.bg_img_07 {background: url(../image/bg/bg_img_07.jpg) no-repeat center/cover !important;}
.bg_img_08 {background: url(../image/bg/bg_img_08.jpg) no-repeat center/cover !important;}
.bg_img_09 {background: url(../image/bg/bg_img_09.jpg) no-repeat center/cover !important;}
.bg_img_10 {background: url(../image/bg/bg_img_10.jpg) no-repeat center/cover !important;}
.bg_img_11 {background: url(../image/bg/bg_img_11.jpg) no-repeat center/cover !important;}
.bg_img_12 {background: url(../image/bg/bg_img_12.jpg) no-repeat center/cover !important;}
.bg_img_13 {background: url(../image/bg/bg_img_13.jpg) no-repeat center/cover !important;}
.bg_img_14 {background: url(../image/bg/bg_img_14.jpg) no-repeat center/cover !important;}
.bg_img_15 {background: url(../image/bg/bg_img_15.jpg) no-repeat center/cover !important;}
.bg_img_16 {background: url(../image/bg/bg_img_16.jpg) no-repeat center/cover !important;}
.bg_img_17 {background: url(../image/bg/bg_img_17.jpg) no-repeat center/cover !important;}
.bg_img_18 {background: url(../image/bg/bg_img_18.jpg) no-repeat center/cover !important;}
.bg_img_19 {background: url(../image/bg/bg_img_19.jpg) no-repeat center/cover !important;}
.bg_img_20 {background: url(../image/bg/bg_img_20.jpg) no-repeat center/cover !important;}
.bg_img_21 {background: url(../image/bg/bg_img_21.jpg) no-repeat center/cover !important;}
.bg_img_22 {background: url(../image/bg/bg_img_22.jpg) no-repeat center/cover !important;}
.bg_img_23 {background: url(../image/bg/bg_img_23.jpg) no-repeat center/cover !important;}
.bg_img_24 {background: url(../image/bg/bg_img_24.jpg) no-repeat center/cover !important;}
.bg_img_25 {background: url(../image/bg/bg_img_25.jpg) no-repeat center/cover !important;}
.bg_img_26 {background: url(../image/bg/bg_img_26.jpg) no-repeat center/cover !important;}
.bg_img_27 {background: url(../image/bg/bg_img_27.jpg) no-repeat center/cover !important;}
.bg_img_28 {background: url(../image/bg/bg_img_28.jpg) no-repeat center/cover !important;}
.bg_img_29 {background: url(../image/bg/bg_img_29.jpg) no-repeat center/cover !important;}
.bg_img_30 {background: url(../image/bg/bg_img_30.jpg) no-repeat center/cover !important;}
.bg_img_31 {background: url(../image/bg/bg_img_31.jpg) no-repeat center/cover !important;}


/* 토글 공용 */
.toggle-common input[type=checkbox]{display: none;}
.toggle-common label {display: block; height: 30px;}
.toggle-track{display: inline-block; position: relative; width: 70px; height: 30px; border-radius:60px; background: #8b8b8b;}
.toggle-track:before{content:''; display: block; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); width: 23px; height: 23px; background: #fff; border-radius:100%; border:1px solid #8b8b8b; transition:left 0.3s;}
.toggle-common input[type=checkbox] + label .toggle-track:after{content:'OFF'; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; color: #fff; font-size: 14px; font-weight: 600;}
.toggle-common input[type=checkbox]:checked + label .toggle-track{background: #35b58f;}
.toggle-common input[type=checkbox]:checked + label .toggle-track:before{left: 42px; border:1px solid #35b58f;}
.toggle-common input[type=checkbox]:checked + label .toggle-track:after{content:'ON'; left: 10px;}


/* 색상 */
.sky {background-color: #e3ebf5;}
.wh {background-color: #fff;}
.blue {background-color:#5f84fe;}
.gray {background-color: #707070;}
.dark {background-color: #60606b;}
.red {background-color: #e0656f;}
.skyblue {background-color: #f2f8ff;}


/* @@@@@@@@@@@@@@@@@@@@@ 보드 헤더 @@@@@@@@@@@@@@@@@@@*/
.board {height: 100%;}
.board-header {position: fixed; width: 100%; min-height: 70px; top: 0;left: 0; z-index: 11; box-sizing: border-box; background: #fff; height: 70px;}
.inner-header {width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;}
.header-left {display: flex; align-items: center; height: 100%; margin-left: 20px;}
.header-right {display: flex; align-items: center; height: 100%;}

/* 로고 */
.logo-main {width: 100px; margin-right: 20px;}

/* 타이틀 */
.header-info {max-width: 550px; cursor: pointer;}
.header-tit {font-size: 18px; font-weight: 500;}
.header-content {font-size: 14px;}

/* 타이틀 버튼 */
.header-tit-btn {margin-left: 20px; display: flex; align-items: center; gap: 0 10px;}
.btn.tit {width: 36px; height: 36px; border-radius: 7px;}


/* 공개, 비공개 버튼 */
.toggle-switch input[type=checkbox]{display: none;}
.toggle-switch label {display: block; height: 30px;}
.toggle-track{display: inline-block; position: relative; width: 70px; height: 30px; border-radius:60px; background: #8b8b8b;}
.toggle-track:before{content:''; display: block; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); width: 23px; height: 23px; background: #fff; border-radius:100%; border:1px solid #8b8b8b; transition:left 0.3s;}
.toggle-switch input[type=checkbox] + label .toggle-track:after{content:'비공개'; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; color: #fff; font-weight: 600; font-size: 14px;}
.toggle-switch input[type=checkbox]:checked + label .toggle-track{background: #35b58f;}
.toggle-switch input[type=checkbox]:checked + label .toggle-track:before{left: 42px; border:1px solid #35b58f;}
.toggle-switch input[type=checkbox]:checked + label .toggle-track:after{content:'공개'; left: 12px;}
/* 공개, 비공개 버튼 yhw*/
.track-yhw{width: 80px;}

/* 버튼 모음 */
.btn.round {border-radius: 0.375rem;}
.btn.hd {width: 38px; height: 38px; border-radius: 50%;}
.btn.square {width: 38px; height: 38px; border: 1px solid #cdcdcd}
.gnb-btn {margin-right: 30px; display: none;}

/* 헤더 공유 */
.board-share {margin-left: 30px; background: #f2f8ff; height: 100%; padding: 0px 20px;}
.share-tit {margin-top: 5px; text-align: center;}
.share-ico {display: flex; gap: 5px;}
.share-ico button:nth-child(1) {position: relative;}
.share-ico button:nth-child(1):before {position: absolute; content: ""; border-top: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; bottom: -10px; left: 50%; transform: translateX(-50%); display: none;}
.share-ico button:nth-child(1):after {content: "URL 복사"; font-size: 12px; position: absolute; bottom: -42px; left: 50%; transform: translateX(-50%); width: 70px; background: #fff; border-radius: 7px; display: none; padding: 10px 0px;}
.share-ico button:nth-child(1):hover:before {display: block;}
.share-ico button:nth-child(1):hover:after {display: block;}
.share-ico button:nth-child(1):hover {background: #5f84fe;}
.share-ico button:nth-child(1):hover .ico-share-gr {background-image: url(../image/ico-share-wh.svg);}
.share-ico button:nth-child(2) {position: relative;}
.share-ico button:nth-child(2):before {position: absolute; content: ""; border-top: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; bottom: -10px; left: 50%; transform: translateX(-50%); display: none;}
.share-ico button:nth-child(2):after {content: "QR 저장"; font-size: 12px; position: absolute; bottom: -42px; left: 50%; transform: translateX(-50%); width: 70px; background: #fff; border-radius: 7px; display: none; padding: 10px 0px;}
.share-ico button:nth-child(2):hover:before {display: block;}
.share-ico button:nth-child(2):hover:after {display: block;}
.share-ico button:nth-child(2):hover {background: #5f84fe;}
.share-ico button:nth-child(3) {position: relative;}
.share-ico button:nth-child(3):before {position: absolute; content: ""; border-top: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; bottom: -10px; left: 50%; transform: translateX(-50%); display: none;}
.share-ico button:nth-child(3):after {content: "비바클래스 \A 공유"; font-size: 12px; position: absolute; bottom: -54px; left: 50%; transform: translateX(-50%); width: 70px; background: #fff; border-radius: 7px; padding: 10px 5px; white-space: pre; display: none;}
.share-ico button:nth-child(3):hover:before {display: block;}
.share-ico button:nth-child(3):hover:after {display: block;}
.share-ico button:nth-child(4) {position: relative;}
.share-ico button:nth-child(4):before {position: absolute; content: ""; border-top: 0px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; bottom: -10px; left: 50%; transform: translateX(-50%); display: none;}
.share-ico button:nth-child(4):after {content: "클래스룸 \A 공유"; font-size: 12px; position: absolute; bottom: -54px; left: 50%; transform: translateX(-50%); width: 70px; background: #fff; border-radius: 7px; padding: 10px 5px; white-space: pre; display: none;}
.share-ico button:nth-child(4):hover:before {display: block;}
.share-ico button:nth-child(4):hover:after {display: block;}
.ico-share-gr {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-share-gr.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.ico-qr {display: inline-block; width: 25px; height: 25px; background-image: url(../image/QR-code.webp); background-position: center; background-size: contain; background-repeat: no-repeat;}

/* 썸네일 페이징 */
.board-thumb {position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);} /* 수정해야함 버튼 클릭이 안돰 */
.board-thumb-info {position: relative; display: inline-block; padding: 12px 24px;}
.board-thumb .thumb-paging {position: static; border: 1px solid #333; text-align: center; display: block; box-sizing: border-box; height: 37px; line-height: 37px; width: 100px; border-radius: 2em; font-weight: 500; font-size: 18px;}
.board-thumb .thumb-paging .this-page {font-weight: bold; color: #ee5663;}
.board-thumb .thumb-paging .total-page {font-weight: bold; color: #333;}
.board-thumb-info button {position: absolute;}
.board-thumb-info .btn-thumb-prev {left: 0; top: 50%; transform: translateY(-50%);}
.board-thumb-info .btn-thumb-next {right: 0; top: 50%; transform: translateY(-50%);}
.board-thumb-info .btn-thumb-open {left: 50%; transform: translateX(-50%); bottom: -16px;}
.board-thumb-info .btn-thumb-open span {padding: 5px 10px; background: #fff; border-radius: 50%;}


/* 헤더 hover 모음 */
.btn.tit.sky:hover {background-color: #5f84fe;}
.btn.tit:hover .ico-info-gr {background-image: url(../image/ico-info-wh.svg)}
.btn.hd.sky:hover {background-color: #5f84fe;}
.btn.hd:hover .ico-copy-gr {background-image: url(../image/ico-copy-wh.svg);}
.btn.hd:hover .ico-download-gr {background-image: url(../image/ico-download-wh.svg);}
.btn.hd:hover .ico-delete-gr {background-image: url(../image/ico-delete-wh.svg);}


/* @@@@@@@@@@@@@@@@@@@@보드 콘텐츠@@@@@@@@@@@@@@@@@@ */

/* 공통 */
.board-body {position: relative; display: flex; flex-direction: column; height: 100%; padding-top: 70px; box-sizing: border-box; width: 100%;}
.board-bg {position: fixed; top: 70px; left: 0; right: 0; bottom: 0; z-index: -2; background-size: 100% 100% !important;}
.board-cont {position: relative; flex: 1; overflow-x: auto; display: block;}
.board-cont-wrap {position: relative; box-sizing: border-box; margin-left: 20px; margin-right: 20px; height: 100%}
.drag-container { position: fixed; left: 0; top: 0; z-index: 1000;}

.board-cont::-webkit-scrollbar {width:8px;}
.board-cont::-webkit-scrollbar-thumb {background: rgba(38, 38, 42, 0.3); border-radius: 4px;}
.board-cont::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}

/* 보드 생성 버튼 */
.btn-create {width: 140px; height: 140px; border-radius: 50%; border: 6px solid #5f84fe; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url(../image/ico-create-bl.svg); background-repeat: no-repeat; background-position: center; background-size: 70px;}
.btn-create:hover {background-image: url(../image/ico-create-wh.svg); background-color: #5f84fe;}
.btn-create-small {width: 68px; height: 68px; border-radius: 50%; border: 6px solid #5f84fe; position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); background-image: url(../image/ico-create-bl.svg); background-repeat: no-repeat; background-position: center; z-index: 10;}
.btn-create-small:hover {background-image: url(../image/ico-create-wh.svg); background-color: #5f84fe; background-size: 30px;}

/* 설정 버튼 */
.btn-setting {width: 50px; height: 70px; position: absolute; top: 50%; left: -50px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; font-size: 16px; color: #fff; border-top-left-radius: 15px; border-bottom-left-radius: 15px; justify-content: center; background: #5f84fe; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.btn-setting:hover {color: #fff; background-color: #3057ff; border-color: #234dff;}
.btn-setting.active {right: 480px; background: rgba(0, 0, 0, 0.5);}
.btn-setting img {margin-bottom: 3px; width: 25px; height: 25px;}

/* 보드 QR 팝업 */
.board-qr {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50%; border-radius: 15px; background-color: #fff; text-align: center; display: none; z-index: 10; box-sizing: border-box; padding: 30px;}
.board-qr .qr-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.board-qr .qr-wrap .logo-img {width: 200px;}
.board-qr .board-tit {margin:20px 0; font-size: 20px;}
#generated-board-qrcode {width: 50%; margin: 0 auto;}
#generated-board-qrcode canvas {width: 100%;}
.board-qr .btn-area {margin-top: 30px; display: flex; justify-content: center;}
.board-qr .btn-area button + button {margin-left: 10px;}
.board-qr .btn-area button {color: #fff; border-radius: 7px; width: 85px; height: 40px; display: flex; align-items: center; justify-content: center;}
.board-qr .btn.dark {position: fixed; left: 0; bottom: 0; padding: 20px 0; font-size: 18px; color: #fff; width: 100%; display: none;}
.ico-download-wh {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-download-wh.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.ico-print {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-print.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.qr-pop-close {background: url(../image/ico-x.svg) center/cover no-repeat; position: absolute; top: 20px; right: 20px; width: 15px; height: 15px; text-indent: -9999px;}

/* 메뉴 */
.menu {position: fixed; top: 0; right: 0%; bottom: 0; max-width: 480px; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,.2); transition: all 0.8s; z-index: 11; background: #fff; transform: translateX(100%);}
.menu.open {transform: translateX(0%); transition: all 0.5s; z-index: 12;}
.menu .menu-header {height: 70px; background: #626272; position: relative; padding: 0 30px; line-height: 70px;}
.menu .menu-header .btn-menu-close {color: #fff; opacity: 0.8; font-size: 18px; position: absolute; top: 50%; transform: translateY(-50%);}
.menu .menu-header .btn-menu-close:hover {color: #fff; opacity: 1;}
.menu .menu-header h1 {text-align: center; color: #fff; font-weight: 500; font-size: 24px; line-height: 70px;}
.menu .menu-header .btn-menu-save {color: #fff; background: #e0656f; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; font-size: 18px; padding: 3px 10px; border-radius: 10px; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.menu .menu-header .btn-menu-choice {color: #fff; background: #e0656f; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; font-size: 18px; padding: 3px 10px; border-radius: 10px; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.menu .menu-header .btn-menu-save:hover, .menu .menu-header .btn-menu-choice:hover {color: #fff; background-color: #c2414b; border-color: #c4303c;}
.menu div[class^="menu-body-"] {overflow-y: auto; height: 90% !important;}

/* 보드 참여 결과 저장 */
.menu .menu-body-save {height: 100%; padding: 15px 20px;}
.menu .menu-body-save .txt {font-size: 15px; font-weight: 500; margin-bottom: 15px;}
.menu .menu-body-save ul {width: 100%;}
.menu .menu-body-save ul li {width: 100%; border-top: 1px solid #e1e1e1; display: flex; padding: 25px 10px;  align-items: center;}
.menu .menu-body-save ul li:last-child {border-bottom: 1px solid #e1e1e1;}
.menu .menu-body-save ul li .img-wrap {width: 40px; height: 40px; text-align: center; margin-right: 10px; cursor: pointer;}
.menu .menu-body-save ul li .img-wrap.excel {background: url(../image/ico-excel-gr.png) no-repeat center/cover;}
.menu .menu-body-save ul li .img-wrap.img {background: url(../image/ico-img-gr.png) no-repeat center/cover;}
.menu .menu-body-save ul li .img-wrap.pdf {background: url(../image/ico-pdf-gr.png) no-repeat center/cover;}
.menu .menu-body-save ul li .menu-tit {font-weight: bold; cursor: pointer; font-size: 19px;}
.menu .menu-body-save ul li .menu-download {margin-left: auto; margin-right: 10px;}
.menu .menu-body-save ul li.active .img-wrap.excel {background-image: url(../image/ico-excel-bl.png);}
.menu .menu-body-save ul li.active .img-wrap.img {background-image: url(../image/ico-img-bl.png);}
.menu .menu-body-save ul li.active .img-wrap.pdf {background-image: url(../image/ico-pdf-bl.png);}
.menu .menu-body-save ul li.active .menu-tit {color: #5f84fe;}

/* 보드 저장 상세 */
#board-download-menu .menu-body-save-page {padding: 20px; height: 83% !important;}
.menu-body-save-page ul li {position: relative; display: flex; align-items: center; margin-bottom: 15px;}
.menu-body-save-page ul li .page_img {width: 130px; height: 70px; background: #e4e4e4; border-radius: 22px; margin-right: 10px;}
.menu-body-save-page ul li .page_img span {position: absolute; width: 24px; height: 24px; border-radius: 7px; background: #f2f8ff; line-height: 24px; font-size: 14px; text-align: center;}
.menu-body-save-page ul li input[type="radio"] {margin: 0 5px;}
.menu-body-save-page ul li label {font-size: 16px; font-weight: 500;}
#board-download-menu .btn-wrap {width: 100%; padding: 20px 0; background: #fff; position: fixed; bottom: 0;}
#board-download-menu .btn.red {width: 100px; height: 40px; border-radius: 0.375rem; color: #fff; font-size: 16px; margin: 0 auto; display: block;}

/* 보드 배경화면 선택 */
.menu .menu-body-bg {height: 100%; padding: 15px 20px;}
.menu .menu-body-bg ul {width: 100%;}
.menu .menu-body-bg ul li {width: 100%; border-top: 1px solid #e1e1e1; display: flex; padding: 25px 10px;  align-items: center;}
.menu .menu-body-bg ul li:last-child {border-bottom: 1px solid #e1e1e1;}
.menu .menu-body-bg ul li .img-wrap {width: 40px; height: 40px; text-align: center; margin-right: 10px; cursor: pointer;}
.menu .menu-body-bg ul li .img-wrap.color {background: #626272; border-radius: 5px; transition: all 0.3s;}
.menu .menu-body-bg ul li .img-wrap.img {background: url(../image/ico-add_img.svg) no-repeat center/contain; transition: all 0.3s;}
.menu .menu-body-bg ul li .img-wrap.pdf {background: url(../image/ico-add_file.svg) no-repeat center/contain; transition: all 0.3s;}
.menu .menu-body-bg ul li .menu-tit {font-weight: bold; cursor: pointer; font-size: 19px; transition: all 0.3s;}
.menu .menu-body-bg ul li button {margin-left: auto; margin-right: 10px;}
.menu .menu-body-bg ul li.active .menu-tit {color: #5f84fe;}
.menu .menu-body-bg ul li.active .img-wrap.color {background: #5f84fe; transition: all 0.3s;}
.menu .menu-body-bg ul li.active .img-wrap.img {background: url(../image/ico-add_img-bl.svg) no-repeat center/contain; transition: all 0.3s;}
.menu .menu-body-bg ul li.active .img-wrap.pdf {background: url(../image/ico-add_file-bl.svg) no-repeat center/contain; transition: all 0.3s;}
.menu .menu-body-bg ul li:hover .menu-tit {color: #5f84fe; transition: all 0.3s;}
.menu .menu-body-bg ul li:hover .img-wrap.color {background: #5f84fe; transition: all 0.3s;}
.menu .menu-body-bg ul li:hover .img-wrap.img {background: url(../image/ico-add_img-bl.svg) no-repeat center/contain; transition: all 0.3s;}
.menu .menu-body-bg ul li:hover .img-wrap.pdf {background: url(../image/ico-add_file-bl.svg) no-repeat center/contain; transition: all 0.3s;}


/* 색 선택 */
.menu .menu-body-color {height: 100%; padding: 15px 20px;}
.menu .menu-body-color ul {display: flex; flex-wrap: wrap; flex-direction: row; gap: 25px; justify-content: center;}
.menu .menu-body-color ul li {width: 120px; height: 120px;}
.menu .menu-body-color ul li button {width: 100%; height: 100%; border-radius: 15px;}

/* 내 이미지 업로드 */
.menu .menu-body-upload {height: 100%; padding: 15px 20px;}
.menu .menu-body-upload .txt-wrap {text-align: center; padding-bottom: 30px; border-bottom: 1px solid #dddddd;}
.menu .menu-body-upload .txt-wrap div {font-weight: 500; font-size: 14px;}
.menu .menu-body-upload .txt-wrap button {padding: 7px 20px; background: #5f84fe; color: #fff; border-radius: 7px; margin-top: 15px;}
.menu .menu-body-upload .preview-wrap {margin-top: 20px;}
.menu .menu-body-upload .preview-wrap .tit {font-weight: bold; font-size: 16px; margin-bottom: 10px;}
.menu .menu-body-upload .preview-wrap .img-area {width: 100%; height: 220px; max-height: 220px; background: #ddd; border-radius: 10px; overflow: hidden;}
.menu .menu-body-upload .preview-wrap .img-area img {width: 100%; height: auto; max-width: 100%; max-height: 100%;}
.menu .menu-body-upload .btn-area {text-align: center;}
.menu .menu-body-upload .btn-area .btn {padding: 7px 20px; color: #fff; border-radius: 7px; margin-top: 15px;}
#boardBackgroundMenu .btn-menu-close, #color_choice .btn-menu-close, #img_choice .btn-menu-close, #img_upload .btn-menu-close {background-image: url(../image/arrow-prev-wh.svg); background-repeat: no-repeat; text-indent: -9999px; width: 30px; height: 30px; background-position: center; background-size: contain;}
@media screen and (max-width: 430px) {
    #boardBackgroundMenu .btn-menu-close, #color_choice .btn-menu-close, #img_choice .btn-menu-close, #img_upload .btn-menu-close {background-image: none; width: 100%; height: unset; text-indent: unset;}
}


/* 페이지 제목 내용 */
.board-body .board-info {width: 100%; background: rgba(0, 0, 0, 0.6); padding: 10px 20px; color: #fff; box-sizing: border-box; opacity: 0;}
.board-body .board-info.active {opacity: 1; margin-bottom: 30px; z-index: unset;}
.board-body .board-info .board-info-tit .board-tit {font-size: 18px; font-weight: 500;}
.board-body .board-info .board-info-tit p {font-size: 14px;}

/* 팝업 */
.pop-bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.2); z-index: 100 !important; display: block;}
.popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 15px; overflow: auto; -ms-overflow-style: none; scrollbar-width: none; max-height: 100%;}
.popup::-webkit-scrollbar {display: none;}
.pop-header {background: #5f84fe; color: #fff; width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; position: relative; padding: 10px 0;}
.pop-header .btn-pop-close {position: absolute; top: 50%; transform: translateY(-50%); right: 15px; background: url(../image/ico-x-wh.svg) center/cover no-repeat; width: 15px; height: 15px;}
.pop-body {padding: 35px 20px 30px;}
.popup .btn-area {margin-bottom: 30px; text-align: center;}

/* 보드 복사 메뉴 */
.menu-body-copy {height: 100%; padding: 15px 20px;}
.menu-body-copy ul {padding:20px 10px;}
.menu-body-copy ul li {background: #fafcff; border-radius: 29px; display: flex; flex-direction: column; align-items: center; width: 420px; height: 205px; cursor: pointer; justify-content: center; margin-bottom: 35px;}
.menu-body-copy ul li.active {border: 3px solid #5f84fe;}
.menu-body-copy ul li .img-wrap {margin-top: 30px; width: 100%; text-align: center; height: 55px; margin-bottom: 15px;}
.menu-body-copy ul li:nth-child(1) .img-wrap {margin-bottom: 5px;}
.menu-body-copy ul li.active .pop-tit {color: #5f84fe;}
.menu-body-copy ul li .pop-tit {text-align: center; font-size: 16px; font-weight: bold;}
.menu-body-copy ul li p {text-align: center; font-size: 14px;}
.menu-body-copy ul li:hover {border: 3px solid #5f84fe;}
.menu-body-copy ul li:hover .pop-tit {color: #5f84fe;}



/* 보드 정보 */
.menu .menu-body-info {height: 100%; padding: 15px 20px;}
.menu .menu-body-info .top {display: flex; align-items: center; position: relative;}
.menu .menu-body-info .top button {margin-right: 5px;}
.menu .menu-body-info .top .btn.round {color: #555; display: flex; align-items: center; justify-content: center; padding: 5px 20px; height: 40px;}
.menu .menu-body-info .top .btn.round:hover {background: #5f84fe; color: #fff;}
.menu .menu-body-info .top .btn.round:hover .ico-refresh-gr {background-image: url(../image/ico-refresh-wh.svg);}
.menu .menu-body-info .top .btn.round i {margin-right: 10px;}
.menu .menu-body-info .top .btn.hd {width: 30px; height: 30px;}
.menu .menu-body-info .top .btn.hd:hover {background: #5f84fe;}
.menu .menu-body-info .top .btn.hd:hover .ico-share-gr {background-image: url(../image/ico-share-wh.svg);}
.menu .menu-body-info .top .txt-info:hover .txt-box {display: block;}
.menu .menu-body-info .top .txt-box {font-size: 12px; background-color: #112a80; color: #fff; padding: 7px; border-radius: 10px; opacity: 0.8; position: absolute; left: 190px; display: none; top: 0;}
.menu .menu-body-info .top .btn-wrap {margin-left: auto;}

.menu .menu-body-info ul li {border-bottom: 1px solid #ddd; padding: 20px 0;}
.menu .menu-body-info ul li > h2 {margin-bottom: 10px;}
.menu .menu-body-info ul li .txt-area {border: 1px solid #e1e1e1; border-radius: 5px;}
.menu .menu-body-info ul li .txt-area textarea {border: none;}
.menu .menu-body-info ul li .txt-area .txt-count {text-align: right; margin-right: 10px; margin-bottom: 10px; color: #999; font-size: 12px;}
.menu .menu-body-info ul li .flex {display: flex; align-items: center;}
.menu .menu-body-info ul li .flex h2 {width: 35%;}
.menu .menu-body-info ul li .flex input {border: 1px solid #e1e1e1; border-radius: 11px; font-weight: bold; padding: 5px 15px;}
.menu .menu-body-info ul li .flex .date {font-weight: bold;}
.menu .menu-body-info ul li .flex .subject {font-weight: bold; display: flex;}
.menu .menu-body-info ul li .flex .subject button {width: 17px; height: 17px; margin-left: 10px;}
.menu .menu-body-info ul li .flex .subject button:hover .ico-pencil {background-image: url(../image/ico-pencil-bl.svg);}
.menu .menu-body-info ul li .flex span {color: #e0656f; font-weight: bold; margin-left: 50px;}
.menu .menu-body-info ul li .flex span.sub-name {margin-left: unset; color: #333;}
.menu .menu-body-info ul li .flex .btn {background: #f2f8ff; padding: 10px 15px; font-size: 14px; text-align: center;}
.menu .menu-body-info ul li .flex .btn:hover {background: #5f84fe; color: #fff;}
.menu .menu-body-info ul li:nth-child(6) .flex, .menu .menu-body-info ul li:nth-child(7) .flex {justify-content: space-between}
.menu .menu-body-info ul li:nth-child(6) .flex h2, .menu .menu-body-info ul li:nth-child(7) .flex h2 {width: unset;}
.menu .menu-body-info .tbl-post {text-align: center;}
.menu .menu-body-info .tbl-post th {background: #eeede8; border: 1px solid #e1e1e1; font-weight: 500; padding: 5px 0;}
.menu .menu-body-info .tbl-post td {font-weight: 500; background: #fff; border: 1px solid #e1e1e1; padding: 5px 0;}

.menu .menu-body-info ul li .btn-box {display: flex; align-items: flex-start; width: 65%; justify-content: space-between; flex-wrap: wrap;}
.menu .menu-body-info ul li .btn-box p {width: 100%; margin-bottom: 12px; word-break: keep-all; text-align: center; font-weight: 500;}
.menu .menu-body-info ul li .btn-box button {width: 33%;}
.menu .menu-body-info ul li .btn-box button i {display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; text-align: center; background-color: #E9ECF6; border-radius: 5px; margin: 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
.menu .menu-body-info ul li .btn-box button:hover i {background-color: #5676ff;}
.menu .menu-body-info ul li .btn-box button i.url {background-image: url(../image/ico-share-gr.svg); background-size: 28px;}
.menu .menu-body-info ul li .btn-box button:hover i.url {background-image: url(../image/ico-share-wh.svg);}
.menu .menu-body-info ul li .btn-box button i.vclass {background-image: url(../image/ico-vclass.png);}
.menu .menu-body-info ul li .btn-box button i.gclass {background-image: url(../image/ico-gclass.png);}
.menu .menu-body-info ul li .btn-box button > div {font-family: 'S Core Dream', 'Noto Sans KR', "맑은 고딕", "Malgun Gothic" , "Apple Gothic", "돋움", Dotum, "굴림", Gulim, sans-serif; font-size: 14px;}
.menu .menu-body-info ul li .btn-box button:hover > div {color: #5676ff;}

@media screen and (max-width: 450px) {
    .menu .menu-body-info ul li .btn-box button > div {display: none;}
}

/* 보드 유형 및 게시물 수 팝업 */
.popup.post {width: 500px;}
.popup.post .tbl-post {text-align: center;}
.popup.post .tbl-post th {background: #f2f8ff; border: 1px solid #e1e1e1; font-weight: 500; padding: 5px 0;}
.popup.post .tbl-post td {font-weight: 500; background: #fff; border: 1px solid #e1e1e1; padding: 5px 0;}

/* 참여자 리스트 팝업 */
.ico-user {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-user.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.popup.guest {max-width: 750px; max-height: 760px; min-width: 700px; overflow: auto;}
@media screen and (max-width: 700px) {
	.popup.guest {min-width: 380px;}
}
.popup.guest .pop-header {display: flex; padding: 10px 20px; align-items: baseline;}
.popup.guest .pop-header span {font-size: 13px; margin-left: 10px;}
.popup.guest .pop-body {padding-top: 20px;}
.popup.guest .record {display: flex; font-size: 16px; padding-bottom: 3px; align-items: center; font-weight: 500;}
.popup.guest .record i {margin-right: 5px;}
.popup.guest .record .num {font-weight: 500; margin-left: 5px;}
.popup.guest .record button {margin-left: auto; color: #5f84fe; font-weight: 500;}
.popup.guest .record button i {background-image: url(../image/ico-download-bl.svg); width: 16px; height: 16px;}
.popup.guest ul {margin-top: 10px; background: #f2f8ff; padding: 10px 20px; border-radius: 10px; height: 100%; display: flex; overflow: hidden; flex-wrap: wrap; justify-content: space-between;}
.popup.guest ul li {padding: 5px 0; overflow: hidden; width: 45%;}
.popup.guest ul li .guest-name {font-weight: 500;}
.popup.guest ul li .date {float: right; font-size: 14px;}

/* 교과정보 검색결과 팝업 중/고등학교용 */
.ico-search {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-search.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.popup.subject {width: 800px;}
.popup.subject h2 {color: #5f84fe; text-align: center;}
.popup.subject .sub-list {display: flex; gap: 0 4px; justify-content: center; margin-top: 5px;}
.popup.subject .sub-list li {border: 2px solid #5f84fe; border-radius: 5px; background: #fff;}
.popup.subject .sub-list li.active {background: #5f84fe;}
.popup.subject .sub-list li.active a {color: #fff;}
.popup.subject .sub-list li a {padding: 5px 10px; display: block; color: #5f84fe;}
.popup.subject p {text-align: center; margin: 15px 0; font-weight: 500;}
.popup.subject .search-bar {width: 100%; position: relative; height: 40px;}
.popup.subject .search-bar input {width: 100%; border: 1px solid #e1e1e1; height: 100%; border-radius: 10px; padding-left: 10px; box-sizing: border-box;}
.popup.subject .search-bar .btn-search {position: absolute; top: 50%; transform: translateY(-50%); right: 10px;}
.popup.subject .search-result {font-weight: bold; font-size: 17px; margin: 15px 0;}
.popup.subject .search-result span {font-weight: bold; color: #e0656f;}
.popup.subject .sub-tit {border-top: 1px solid #ddd;}
.popup.subject .sub-tit li {padding: 5px 0; border-bottom: 1px solid #ddd;}
.popup.subject .sub-tit li a {font-weight: 500;}
.popup.subject .sub-tit li a:hover {text-decoration: underline;}
.popup.subject .sub-tit li.active a {color: #5f84fe;}
.popup.subject .btn-area {margin-top: 20px; text-align: center;}
.popup.subject .btn-area .btn {padding: 7px 14px; color: #fff; font-size: 14px;}

.popup.subject .select-sub {position: relative; padding: 5px 10px; border-radius: 10px; border:2px solid #e1e1e1; background-color: #f2f8ff; background-image: url(../image/arrow-down.svg); background-repeat: no-repeat; background-position: 98% center; cursor: pointer; background-size: 15px 15px; text-align: center; margin-top: 10px; display: none;}
.popup.subject .select-sub span {font-size: 18px; display: flex; align-items: center; font-weight: 500; justify-content: center; color: #5f84fe; font-weight: 500;}
.popup.subject .select-sub ul {position: absolute; top: 35px; width: 100%; left: 0; border: 2px solid #e1e1e1; border-radius: 10px; background-color: #fff; z-index: 1;}
.popup.subject .select-sub ul li {padding: 5px 10px; border-radius: 10px; font-size: 14px; font-weight: 500;}
.popup.subject .select-sub ul li:hover {background-color: #f2f8ff;}

/* 교과정보 검색결과 팝업 초등용 */
.popup.subInfo {width: 600px;}
.popup.subInfo .tit {font-size: 18px; color: #5f84fe; font-weight: bold; display: inline-block; margin-right: 15px;}
.popup.subInfo .select-area {display: flex; flex-wrap: wrap; gap: 15px 5px; margin-top: 20px;}
.popup.subInfo .select-area select {border: 2px solid #e1e1e1; border-radius: 11px; background: #fff url(../image/arrow-down.svg) no-repeat right 12px center/10px 6px;}
.popup.subInfo .select-area select.custom {width: calc(100% - 100px);}
.popup.subInfo .select-area select.skyblue {background-color: #f2f8ff; color: #999999;}
.popup.subInfo .select-area select:focus {outline: unset; border: 2px solid #5f84fe;}
.popup.subInfo #btn-refresh-subInfo {border: 2px solid #5f84fe; border-radius: 10px; padding: 4px 8px; color: #5f84fe; font-weight: 400;}
.popup.subInfo #btn-refresh-subInfo i {margin-right: 3px; vertical-align: sub; width: 17px; height: 17px;}
.popup.subInfo .btn-area {margin-top: 20px; text-align: center;}
.popup.subInfo .btn-area .btn {padding: 7px 14px; color: #fff; font-size: 14px;}
.popup.subInfo span {display: inline-block; color: #e0656f; margin-left: 15px; font-size: 13px;}

@media screen and (max-width: 600px) {
	.popup.subInfo .select-area .half {width: 100%;}
	.popup.subInfo .select-area .half .third {margin: 1px;}
}

/* 보드 설정_좋아요 */
.menu .menu-body-page_info {height: 100%; padding: 15px 20px;}
.menu .menu-body-page_info ul.page-info > li {border-bottom: 1px solid #ddd; padding: 20px 0;}
.menu .menu-body-page_info ul.page-info > li:first-child {padding-top: 0;}
.menu .menu-body-page_info ul.page-info > li > h2 {margin-bottom: 10px;}
.menu .menu-body-page_info ul.page-info > li .txt-area {border: 1px solid #e1e1e1; border-radius: 5px;}
.menu .menu-body-page_info ul.page-info > li .txt-area textarea {border: none;}
.menu .menu-body-page_info ul.page-info > li .txt-area .txt-count {text-align: right; margin-right: 10px; margin-bottom: 10px; color: #999; font-size: 12px;}
.menu .menu-body-page_info ul.page-info > li .flex {display: flex; justify-content: space-between; align-items: center;}
.menu .menu-body-page_info ul.page-info > li .bg-info {display: inline-block; font-size: 0; height: 45px; width: 110px; border-radius: 12px; overflow: hidden;}
.menu .menu-body-page_info ul.page-info > li .bg-info i {display: inline-block; height: 100%; width: 55%; vertical-align: middle; background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; position: relative; background: darkseagreen;}
.menu .menu-body-page_info ul.page-info > li .bg-info .btn-bg {position: relative; display: inline-block; height: 100%; width: 45%; vertical-align: middle; background-color: #f2f8ff; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.menu .menu-body-page_info ul.page-info > li .bg-info .btn-bg:hover {background-color: #dbe7f5;}
.menu .menu-body-page_info ul.page-info > li .select{position: relative; padding: 5px 10px; width: 135px; border-radius: 10px; border:2px solid #e1e1e1; background-color: #f2f8ff; background-image: url(../image/arrow-down.svg); background-repeat: no-repeat; background-position: 96% center; cursor: pointer; background-size: 10px 10px;}
.menu .menu-body-page_info ul.page-info > li .select span {font-size: 14px; display: flex; align-items: center; font-weight: 500;}
.menu .menu-body-page_info ul.page-info > li .select span i {margin-right: 5px;}
.menu .menu-body-page_info ul.page-info > li .select span i img {width: 15px; height: 15px;}
.menu .menu-body-page_info ul.page-info > li .select ul {position: absolute; top: 35px; width: 100%; left: 0; border: 2px solid #e1e1e1; border-radius: 10px; background-color: #fff;}
.menu .menu-body-page_info ul.page-info > li .select ul li {padding: 5px 10px; border-radius: 10px; font-size: 14px; font-weight: 500;}
.menu .menu-body-page_info ul.page-info > li .select ul li:hover {background-color: #f2f8ff;}
.menu .menu-body-page_info ul.page-info > li .select ul li i{vertical-align: bottom; margin-right: 5px;}
.menu .menu-body-page_info ul.page-info > li .select ul li i img{width: 15px; height: 15px;}
.menu .menu-body-page_info ul.page-info > li .radio-area {display: flex; align-items: center;}
.menu .menu-body-page_info ul.page-info > li .radio-area span {display: flex; align-items: center; font-weight: 500; font-size: 14px;}
.menu .menu-body-page_info ul.page-info > li .radio-area span + span {margin-left: 10px;}
.menu .menu-body-page_info ul.page-info > li .radio-area input[type=radio] {margin: 0; width: 14px; height: 14px; margin-right: 3px;}

/* 보드 썸네일 */
.board-thumb-area {position: fixed; top: -100%; left: 0px; right: 0px; background: #fff; padding: 20px 50px 40px; box-shadow: 0 5px 10px rgba(0,0,0,.1); transition: all 0.8s ease-in;}
.board-thumb-area.active {top: 0; transition: all 0.5s;}

.board-thumb-area .thumb-list {display: flex; align-items: center; margin: 30px auto 20px; height: 190px; justify-content: center;}

.board-thumb-area .btn-thumb-add {width: 30px; height: 30px; background: url(../image/ico-plus-wh.svg) #5f84fe no-repeat center; background-size: 20px 20px; border-radius: 50%; flex: 0 0 auto;}
.board-thumb-area .item {display: inline-block; font-size: 0; vertical-align: top; margin: 0 15px; position: relative; animation: zoomIn .3s ease-in-out; flex: 0 0 auto;}
.board-thumb-area .item .item-num {font-size: 15px; background: #f2f8ff; border-radius: 5px; font-weight: 500; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); padding: 2px 5px;}
.board-thumb-area .item .item-cont {position: relative; display: inline-block; vertical-align: middle;}
.board-thumb-area .item a {display: inline-block; width: 190px; height: 110px; border-radius: 22px; vertical-align: middle; box-sizing: border-box; overflow: hidden;}
.board-thumb-area .item.is-active a {border: 3px solid #5f84fe; transform: scale(1.1); transition: all 0.3s;}
.board-thumb-area .item img {display: block; width: 100%; height: 100%;}
.board-thumb-area .item-fnc {display: none; position: absolute; top: -13px; right: -13px;}
.board-thumb-area .is-active .item-fnc, .board-thumb-area .item-fnc.is-active ul {display: block;}

.board-thumb-area .btn-layer-more.round {position: relative; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.2); box-sizing: border-box; background: url(../image/ico-dot3-bl.svg) #fff center center no-repeat; width: 30px; height: 30px; background-size: 15px 18px;}
.board-thumb-area .btn-layer-more.round.active {background: url(../image/ico-dot3-wh.svg) #5f84fe center center no-repeat; background-size: 15px 18px;}
.board-thumb-area .btn-thumb-close {position: absolute; left: 50%; transform: translateX(-50%) rotate(180deg); bottom: 25px; background: url(../image/arrow-down.svg) no-repeat; width: 15px; height: 10px;}

.board-thumb-area .layer-more {display: none; position: absolute; background-color: #fff; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); z-index: 100; text-align: left; padding: 10px 0; margin-left: -25px; min-width: 82px;}
.board-thumb-area .layer-more.active {display: block;}
.board-thumb-area .layer-more li {padding: 7px 0;}
.board-thumb-area .layer-more button {display: flex; align-items: center; width: 100%; padding: 0 20px; font-size: 13px;}
.board-thumb-area .layer-more button:hover {color: #5f84fe;}
.board-thumb-area .layer-more button.btn-thumb-copy:hover i {background-image: url(../image/ico-copy-bl.svg);}
.board-thumb-area .layer-more button.btn-thumb-del:hover i {background-image: url(../image/ico-delete-bl.svg);}
.board-thumb-area .layer-more button i {width: 15px; height: 15px; margin-right: 3px;}
/* 썸네일 스크롤바 */
.board-thumb-area .thumb-list::-webkit-scrollbar {height:8px;}
.board-thumb-area .thumb-list::-webkit-scrollbar-thumb {background: rgba(38, 38, 42, 0.3); border-radius: 4px;}
.board-thumb-area .thumb-list::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}

/* 보드 게시글 */
.ico-dia {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-dia-bl.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.board-tile {width: 100%; display: flex; flex-wrap: wrap;}
.board-item {position: absolute; box-sizing: border-box; width: 240px; max-width: 240px; min-width: 145px; margin: 0 10px 10px 0; font-family: 'S Core Dream'; z-index: 1;}
.board-item.fixed::before {content: ''; width: 35px; height: 35px; position: absolute; top: 0px; left: 50%; background: url(../image/ico-fixed.svg) no-repeat center/contain; z-index: 1;}
.board-item.full {max-width: 500px; width: 500px;}
.board-item-content {position: relative; display: block; background: #fff; border-radius: 10px;}
.board-item .item-header {padding-top: 15px; padding-right: 30px;}
.board-item:not(.is-edit):not(.fixed):not(.entr) .item-header:hover {cursor: all-scroll;}
.board-item:not(.is-edit):not(.fixed) .item-header::before {width: 20px; height: 20px; content: ''; position: absolute; background: url(../image/ico-move-gr.svg) no-repeat center/cover; right: 60px; top: 15px; transition: all 0.3s; opacity: 0;}
.board-item:not(.is-edit):not(.fixed) .item-header:hover::before {opacity: 1; transition: all 0.3s;}
.board-item .user {display: block; font-size: 16px; font-weight: 500; font-style: normal;}
.board-item .reply-header .user {font-weight: bold;}
.board-item .item-header .user {font-size: 16px; color: #5f84fe; display: flex; align-items: center;}
.board-item .item-header .user i {margin-right: 3px;}
.board-item .time {display: block; color: #777; font-size: 12px; margin-top: 5px;}
.board-item .header-fnc {position: absolute; top: 13px; right: 5px;}
.btn-alter {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-pencil.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.board-item .btn-layer-more {position: relative; display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-dot3-gr.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}

.board-item .item-body { padding-top: 10px; padding-bottom: 10px;}
.board-item .item-header, .board-item .item-body {padding-left: 15px; padding-right: 15px;}
.board-item .item-body h3 {padding-bottom: 10px; font-size: 16px; font-weight: bold; cursor: pointer;}
.board-item .item-body .txt span { display: block; /* margin-top: -10px; */ display: inline-block; font-size: 14px; /* padding-bottom: 20px; */ white-space: break-spaces; font-weight: 400; letter-spacing: -0.84px; cursor: pointer;}

.board-item .item-body .btn-txt-more {display: inline-block; font-size: 12px; color: #555; padding: 0;}
.board-item .item-etc {position: relative;}
.board-item .upload-area {position: relative; padding: 0 15px 10px;}
.board-item .item-etc .table-area {position: relative; border-top: 1px solid rgba(0, 0, 0, 0.2);}
.board-item .table-area {padding: 15px; box-sizing: border-box; width: 100%; display: table;}
.board-item .table-area .left, .board-item .table-area .right {display: inline-block; vertical-align: middle;}
.board-item .table-area .right {float: right;}
.board-item .table-area .left button, .board-item .table-area .right button {display: flex; align-items: center; width: 100%;}
.board-item .table-area .left button i, .board-item .table-area .right button i {margin-right: 5px;}
.board-item .table-area .right button {justify-content: end;}
.board-item .item-etc .btn-like .ico-heart {background-image: url(../image/ico-heart-gr.svg);}
.board-item .item-etc .btn-like.active .ico-heart {background-image: url(../image/ico-heart-bl.svg);}
.board-item .item-etc .btn-like.active span {color: #5f84fe;}

.btn-like, .btn-star, .btn-reply {font-size: 14px; font-weight: 700; padding: 0;}

.ico-heart {display: inline-block; width: 15px; height: 15px; background-image: url(../image/ico-heart-gr.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.ico-comment {display: inline-block; width: 17px; height: 17px; background-image: url(../image/ico-comment.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.board-item .table-area + div {border-top: 1px solid rgba(0, 0, 0, 0.2);}
.item-reply {padding: 15px;}
.item-reply ul.reply {display: none;}
.item-reply ul.reply.on {display: block;}
.item-reply .reply li {position: relative;}
.item-reply .reply > li {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.item-reply .reply-header { position: relative; padding-right: 30px;}
.item-reply .btn-layer-more {width: 17px; height: 17px; opacity: 0.7;}
.item-reply .layer-more {display: none; background: #fff; padding: 10px 15px; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); position: fixed; margin-left: -80px; margin-top: 10px; z-index: 1; min-width: 110px;}
.item-reply .layer-more li {padding: 5px 0;}
.item-reply .layer-more li button {display: flex; align-items: center;}
.item-reply .layer-more li button:hover {color: #5f84fe;}
.item-reply .layer-more li button:hover .ico-pencil {background-image: url(../image/ico-pencil-bl.svg);}
.item-reply .layer-more li button:hover .ico-delete-gr {background-image: url(../image/ico-delete-bl.svg);}
.item-reply .layer-more li button i {margin-right: 3px; width: 16px; height: 16px;}
.item-reply .layer-more.active {display: block;}
.item-reply .reply-fnc { position: absolute; top: -5px; right: -10px;}
.item-reply .txt { font-size: 13px; white-space: pre-wrap; margin-top: 5px;}
.item-reply .txt img {width: 100%; max-width: 100%; height: auto; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #fff; padding: 6px; display: block;}
.item-reply .reply-write-area {position: relative; margin-top: 15px;}
.item-reply .reply-write-area input {width: 100%; padding: 0 65px 0 10px; box-sizing: border-box; height: 40px; border-radius: 11px; background: #f2f8ff; border: 2px solid #e1e1e1;}
.item-reply .reply-write-area input::placeholder {color: #626272;}
.item-reply .reply-write-area .btn-wrap {display: flex; position: absolute; top: 50%; right: 5px; justify-content: flex-end; transform: translateY(-50%);}
.item-reply .reply-write-area .btn-send {width: 30px; height: 30px; background: url(../image/ico-send.svg) center no-repeat; background-size: 20px 20px;}
.item-reply .reply-write-area .btn-emoji {width: 30px; height: 30px; background: url(../image/ico-emoji.svg) center no-repeat; background-size: 24px 24px;}


.ico-pencil {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-pencil.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.btn-reply-hide.on .ico-hide {background-image: url(../image/ico-hide-off.svg);}
.ico-hide {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-hide-on.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.ico-fix {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-fix.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.ico-color {display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-color.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}

.board-item .header-fnc .layer-more {display: none; background: #fff; padding: 10px 15px; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); position: fixed; /*margin-left: -80px; margin-top: 10px;*/ right: 0; top: 45px; z-index: 10;}
.board-item .header-fnc .layer-more.active {display: block;}
.board-item .header-fnc .layer-more .color-area {display: flex; align-items: center;}
.board-item .header-fnc .layer-more i {margin-right: 7px;}
.board-item .header-fnc .item-bg-color-area {display: flex; gap: 0 3px;}
.board-item .header-fnc .item-bg-color-area li button {width: 24px; height: 24px; border-radius: 50%; border: 3px solid #e1e1e1;}
.board-item .header-fnc .item-bg-color-area li.active button {border-color: #5f84fe;}
.board-item .header-fnc .layer-more li {padding: 5px 0;}
.board-item .header-fnc .layer-more li button {display: flex; align-items: center;}
.board-item .header-fnc .layer-more li button:hover {color: #5f84fe;}
.board-item .header-fnc .layer-more li button:hover .ico-copy-gr {background-image: url(../image/ico-copy-bl.svg);}
.board-item .header-fnc .layer-more li button:hover .ico-fix {background-image: url(../image/ico-fix-bl.svg);}
.board-item .header-fnc .layer-more li button:hover .ico-delete-gr {background-image: url(../image/ico-delete-bl.svg);}
.board-item .header-fnc .layer-more li button:hover .ico-hide {background-image: url(../image/ico-hide-on-bl.svg)}
.board-item .header-fnc .layer-more li button.btn-item-hide.on:hover .ico-hide {background-image: url(../image/ico-hide-off-bl.svg)}
.btn-item-hide.on .ico-hide {background-image: url(../image/ico-hide-off.svg);}

.board-item .header-fnc .item-hide-notice {text-align: center; width: 240px; height: 90px; background: #283b89; color: #fff; font-size: 12px; border-radius: 15px; z-index: 2; justify-content: center; align-items: center; position: absolute; opacity: 0.9; top: 30px; display: none; right: -5px;}
.btn-create-small:hover::before {display: block; transition: all 0.2s;}
.btn-create-small::before {content: '게시글 쓰기'; position: absolute; width: 100px; height: 35px; background-color: #283b89; top: -45px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; display: none; transition: all 0.3s; font-size: 14px;}

/* 보드 그룹형 */
.board-cont-wrap.group-wrap {margin-left: 0; margin-right: 0; margin-top: 0; height: 100%; padding-right: 155px;}
.board-group { position: relative; overflow: auto; flex: 1; height: 100% !important;}
.board-group .board-column {position: absolute; z-index: 1; overflow-x: hidden !important; box-sizing: border-box; padding: 0 15px; min-width: 282px; height: 100%;}
.board-group .board-column:nth-of-type(1):nth-last-of-type(1) {width: 100%;}
.board-group .board-column:nth-last-of-type(2),
.board-group .board-column:nth-of-type(1):nth-last-of-type(2) ~ .board-column { width: 50%;}
.board-group .board-column:nth-last-of-type(3),
.board-group .board-column:nth-of-type(1):nth-last-of-type(3) ~ .board-column  { width: 33.33%;}
.board-group .board-column:nth-last-of-type(4),
.board-group .board-column:nth-of-type(1):nth-last-of-type(4) ~ .board-column  { width: 25%;}
.board-group .board-column:nth-last-of-type(5),
.board-group .board-column:nth-of-type(1):nth-last-of-type(5) ~ .board-column  { width: 20%;}
.board-group .board-column:nth-last-of-type(6),
.board-group .board-column:nth-of-type(1):nth-last-of-type(6) ~ .board-column  {width: 16.66%;}
.board-group .board-column, .board-group .board-column ~ .board-column {width: 282px;}
.board-group .board-column ~ .board-column {border-left:1px dashed rgba(0,0,0,.1);}
.board-group .board-column:last-child, .board-group .board-column ~ .board-column:last-child {margin-left:0;}
.board-column.muuri-item-releasing {z-index: 2;}
.board-column.muuri-item-dragging {z-index: 3;cursor: move;}
.board-column-container {position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;}
.board-column-header {position: relative; box-sizing: border-box;}
.board-column-header .tit-write-area {position: relative; border: 1px solid #ccc; background-color: #fff; box-sizing: border-box; border-radius: 11px; align-items: center; justify-content: space-between; cursor: all-scroll;}
.board-column-header .tit-write-area::before {width: 20px; height: 20px; content: ''; position: absolute; background: url(../image/ico-move-gr.svg) no-repeat center/cover; right: 40px; top: 10px; transition: all 0.3s; opacity: 0;}
.board-column-header .tit-write-area:hover::before {opacity: 1; transition: all 0.3s;}
.board-column-header .tit-write-area .tit {font-size: 16px; line-height: 24px; font-weight: 700; min-height: 40px; /* margin-right: 30px; */ padding: 8px 40px 8px 15px; box-sizing: border-box;}
.board-column-header .tit-write-area .tit .item-leng {color: #333; margin-left: 5px; font-size: 16px; font-weight: 700;}
.board-column-header .tit-fnc {position: absolute !important; right: 10px; top: 7px;}
.board-column-header .btn-group-add {background-color: #5f84fe; color: #fff; font-size: 18px; border-radius: 11px; font-weight: bold; padding: 10px; display: flex; align-items: center; width: 135px; height: 50px; justify-content: center;}
.board-column-header .btn-group-add i {margin-right: 5px;}
.board-column-header .btn-layer-more {position: relative; display: inline-block; width: 20px; height: 20px; background-image: url(../image/ico-dot3-bl.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.board-column-fnc {padding: 10px 0; box-sizing: border-box; display: block;}
.board-column-fnc .group-item-add-wrap {width: 240px; text-align: center;}
.btn-group-item-add {width: 40px; height: 40px; border-radius: 50%; background: #5f84fe; display: block; margin: 0 auto; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.btn-group-item-add i {width: 25px; height: 25px;}
.board-column-content {position: relative; min-height: 100%;}
.board-column-content-wrapper {position: relative; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; height: 100%; margin-top: 10px; flex: 1;}
.board-column-content-wrapper::-webkit-scrollbar {width:8px;}
.board-column-content-wrapper::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.1); border-radius: 4px;}
.board-column-content-wrapper::-webkit-scrollbar-track {background: transparent; border-radius: 4px;}

.board-group-fnc {width: 155px; position: absolute; top: 0; right: 0px; box-sizing: border-box; padding-left: 15px;}
.board-group-fnc .btn.spot {background-color: #5f84fe; color: #fff; font-size: 18px; border-radius: 11px; font-weight: bold; padding: 10px; display: flex; align-items: center; width: 125px; height: 40px; justify-content: center; min-width: 125px;}
.board-group-fnc .btn.spot:hover {color: #fff; background-color: #3057ff; border-color: #234dff; transition: all 0.3s;}
.board-group-fnc .btn.spot i {margin-right: 5px;}
.board-group-fnc .layer-add-group {background: #fff; padding: 10px; border-radius: 22px; font-family: 'Gmarket Sans'; position: absolute; z-index: 1; width: 240px; height: 210px; margin-top: 15px; right: 25px; display: none;}
.board-group-fnc .layer-add-group.active {display: block;}
.board-group-fnc .layer-add-group::before {content: ''; width: 0; height: 0; border-bottom: calc( 10px * 1.732 ) solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; top: -15px; right: 30px;}
.board-group-fnc .layer-add-group ul { margin-top: 20px;}
.board-group-fnc .layer-add-group ul li [type="radio"] { vertical-align: middle; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #f2f8ff; border: 2px solid #ddd; position: relative; margin: 0 5px;}
.board-group-fnc .layer-add-group ul li input[type="number"] { background: #f2f8ff; border: 1px solid #ddd; border-radius: 11px; width: 35px; text-align: center; margin-right: 3px; color: #5f84fe; font-weight: bold;}
.board-group-fnc .layer-add-group ul li span { vertical-align: middle;}
.board-group-fnc .layer-add-group p { color: #777; font-size: 14px; margin-top: 20px; margin-bottom: 10px;}
.board-group-fnc .layer-add-group .btn-area {text-align: center;}
.board-group-fnc .layer-add-group .btn-area .btn {padding: 7px 15px; color: #fff; font-size: 18px; font-weight: 500;}

.board-item-content .btn-color {width: 35px; height: 35px; border: 1px solid #e1e1e1; border-radius: 11px; background: #fff;}
.board-item-content .btn-color i {width: 25px; height: 25px;}
.board-item-content .btn-move {width: 35px; height: 35px; float: right;}
.board-item-content .btn-move.on .ico-move {background-image: url(../image/ico-stop.svg);}
.board-item.is-edit .board-item-content {box-shadow: 0 0 0 2px #5f84fe inset;}
.board-item.is-edit .board-item-content .item-bg-color-area {display: none; gap: 0 3px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 10px; padding: 10px; justify-content: center; position: absolute; margin-top: 3px;}
.board-item.is-edit .board-item-content .item-bg-color-area.on {display: flex;}
.board-item.is-edit .board-item-content .item-bg-color-area li button {width: 35px; height: 35px; border-radius: 8px; border: 3px solid #e1e1e1;}
.board-item.is-edit .board-item-content .item-bg-color-area li.active button {border-color: #5f84fe;}
.board-item-content .item-header .txt-area {border-bottom: 1px solid #ddd; margin-top: 5px;}
.board-item-content textarea.tit {padding: 0; border: none; background: none; height: 20px; line-height: 20px; border-radius: 0; font-weight: 700; font-size: 16px; margin-bottom: 10px;}
.board-item-content textarea.tit::placeholder {font-size: 14px;}
.board-item-content textarea {border: none; padding: 0; background: none; font-size: 14px; border-radius: 0; height: 40px; line-height: 20px; /* margin-bottom: 20px; */}
.board-item-content textarea::placeholder {color: #555; font-weight: 500;}
.board-item-content .item-body textarea {background: #f2f8ff; padding: 5px; min-height: 130px; overflow: auto;}
.board-item .item-fnc {position: relative; padding: 0 15px; width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between;}
.board-item .item-fnc button {width: 35px; height: 35px; border-radius: 50%; background: #f8f8f8; position: relative;}
.board-item .btn-cont {text-align: center; padding: 15px 0 20px;}
.board-item .btn-cont button {width: 60px; height: 30px; color: #fff; font-size: 14px;}

/* 버튼 호버 */
.btn {transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.btn.blue:hover {color: #fff; background-color: #3057ff; border-color: #234dff;}
.btn.dark:hover {color: #fff; background-color: #45454e; border-color: #2d2d33;}
.btn.red:hover {color: #fff; background-color: #c2414b; border-color: #c4303c;}

.board-item .item-fnc button:hover {background: #5f84fe;}
.board-item .item-fnc button:hover::before {display: block;}
.btn-group-item-add:hover {background-color: #3057ff; border-color: #234dff;}

.board-item .item-fnc button:hover .ico-add_file {background-image: url(../image/ico-add_file-wh.svg);}
.board-item .item-fnc button:hover .ico-add_img {background-image: url(../image/ico-add_img-wh.svg);}
.board-item .item-fnc button:hover .ico-add_video {background-image: url(../image/ico-add_video-wh.svg);}
.board-item .item-fnc button:hover .ico-add_book {background-image: url(../image/ico-add_book-wh.svg);}
.board-item .item-fnc button:hover .ico-add_link {background-image: url(../image/ico-add_link-wh.svg);}
.board-item .item-fnc button:hover .ico-add_art {background-image: url(../image/ico-add_art-wh.svg);}

.board-item .item-fnc .btn-add_file::before {content: '파일'; position: absolute; background-color: #283b89; top: -35px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; transition: all 0.3s; font-size: 14px; min-width: 50px; display: none;}
.board-item .item-fnc .btn-add_img::before {content: '이미지'; position: absolute; background-color: #283b89; top: -35px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; transition: all 0.3s; font-size: 14px; min-width: 50px; display: none;}
.board-item .item-fnc .btn-add_video::before {content: '동영상'; position: absolute; background-color: #283b89; top: -35px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; transition: all 0.3s; font-size: 14px; min-width: 50px; display: none;}
.board-item .item-fnc .btn-add_book::before {content: '샘퀴즈 과제'; position: absolute; background-color: #283b89; top: -35px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; transition: all 0.3s; font-size: 14px; min-width: 80px; display: none;}
.board-item .item-fnc .btn-add_link::before {content: '링크'; position: absolute; background-color: #283b89; top: -35px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; transition: all 0.3s; font-size: 14px; min-width: 50px; display: none;}
.board-item .item-fnc .btn-add_art::before {content: '그림'; position: absolute; background-color: #283b89; top: -35px; left: 50%; transform: translateX(-50%); line-height: 35px; border-radius: 7px; color: #fff; opacity: 0.8; transition: all 0.3s; font-size: 14px; min-width: 50px; display: none;}

/* 이미지 업로드 팝업 */
.popup.img-url {width: 1100px;}
.pop-header.wh {background: unset;}
.pop-header.wh h1 {color: #333; font-size: 24px; padding: 30px 0 0; font-weight: 500;}
.pop-header.wh .btn-pop-close {background: url(../image/ico-x.svg) center/cover no-repeat; position: absolute; top: 20px; right: 20px; }
.pop-header.wh .btn-pop-close:hover {background-image: url(../image/ico-x-bl.svg);}
.popup.img-url .pop-body {text-align: center; padding-top: 10px;}
.popup .tab-menu {border-bottom: 2px solid #ddd;}
.popup .tab-menu a {width: 140px; display: inline-block; font-size: 16px; color: #333; font-weight: 500; border-bottom: 2px solid #ddd;}
.popup .tab-menu a.active {color: #5f84fe; border-color: #5f84fe;}
.popup .tab-panel {padding: 20px 0; display: none;}
.popup .tab-panel.active {display: block;}
.popup.img-url .tab-panel .txt {font-size: 14px; font-weight: 500; color: #333; margin-bottom: 10px;}
.popup.img-url .tab-panel input {border: 1px solid #e1e1e1; border-radius: 11px; width: 340px; height: 40px; padding: 0 5px; box-sizing: border-box;}
.popup.img-url .btn-area .btn {padding: 7px 15px; color: #fff; font-size: 18px; font-weight: 500;}

/* 파일 업로드 팝업 */
.popup.file-upload {width: 1100px;}
.popup.file-upload .pop-header {border-bottom: 2px solid #ddd; margin: 0 auto; width: 96%;}
.popup.file-upload .pop-body {padding-top: 20px;}
.popup.file-upload .pop-content {padding: 20px; background: #f2f8ff; border-radius: 11px; text-align: center;}
.popup.file-upload .txt-area {font-size: 14px; font-weight: 500; font-family: 'Gmarket Sans'; margin-bottom: 20px;}
.popup.file-upload .txt-area span {font-size: 14px; color: #e0656f; display: block; font-weight: 500; font-family: 'Gmarket Sans';}
.upload-area input {border: 1px solid #e1e1e1; border-radius: 11px; width: 340px; height: 40px; padding: 0 15px; box-sizing: border-box;}
.upload-area input::placeholder {color: #555;}
.upload-area .btn {padding: 13px 20px; color: #fff; font-size: 14px; font-weight: 500; border: 1px solid #5f84fe; box-sizing: border-box;}
.popup.file-upload .btn-area {text-align: center;}
.popup.file-upload .btn-area .btn {color: #fff; font-size: 14px; font-weight: 500; width: 60px; height: 30px;}
.popup.file-upload .pop-header.wh .btn-pop-close {top: 20px; right: 0;}
.popup.file-upload #file-upload-area {border: 1px dashed #aaa; display: inline-block; padding: 20px 40px 20px 40px; position: relative;}
.popup.file-upload #upload-message {vertical-align: middle;}
.popup.file-upload .btn-delete {display: none; position: absolute; top: 50%; transform: translateY(-50%);}

@media screen and (max-width:768px) {
    .popup.file-upload #upload-message {display: none !important;}
}

/* 동영상 업로드 팝업 */
.popup.video-upload {width: 1100px;}
.popup.video-upload .pop-body {text-align: center;}
.popup.video-upload input {border: 1px solid #e1e1e1; border-radius: 11px; width: 365px; height: 40px; padding: 0 15px; box-sizing: border-box;}
.popup.video-upload input::placeholder {color: #555;}
.popup.video-upload .video-view {width: 460px; height: 260px; background-color: #60606b; border-radius: 11px; margin: 20px auto;}
.popup.video-upload .video-option {line-height: 52px; background: #f2f8ff; padding: 16px 0;}
.popup.video-upload .video-option input {width: 100px; height: 30px; color: #5f84fe; font-weight: 500; text-align: center; font-size: 15px; margin-left: 5px;}
.popup.video-upload .video-option input::placeholder {color: #5f84fe;}
.popup.video-upload .video-option span {display: block; color: #5f84fe; font-weight: 500;}
.popup.video-upload .btn-area .btn {color: #fff; font-size: 14px; font-weight: 500; width: 60px; height: 30px;}
.link-area .btn {padding: 13px 20px; color: #fff; font-size: 14px; font-weight: 500; border: 1px solid #5f84fe; box-sizing: border-box;}

/* 이미지 업로드 팝업 */
.popup.img-upload {width: 1100px;}
.popup.img-upload .pop-body {text-align: center; padding: 35px 50px 30px;}
.popup.img-upload .img-view {width: 460px; height: 260px; background-color: #60606b; margin: 0 auto; border-radius: 11px; overflow: hidden; line-height: 260px; position: relative;}
.popup.img-upload .img-view img {max-width: 100%; max-height: 100%;}
/* #imgToZoom {transform: scale(1);} */
.popup.img-upload .slider-wrap {width: 390px; margin: 0 auto 20px; position: relative;}
.popup.img-upload .slider-wrap::before {content: ''; position: absolute; width: 22px; height: 22px; left: -30px; top: 50%; transform: translateY(-50%); background: url(../image/zoom-out.svg) no-repeat center/cover;}
.popup.img-upload .slider-wrap::after {content: ''; position: absolute; width: 22px; height: 22px; right: -30px; top: 50%; transform: translateY(-50%); background: url(../image/zoom-in.svg) no-repeat center/cover;}
.popup.img-upload .btn-area .btn {color: #fff; font-size: 14px; font-weight: 500; width: 60px; height: 30px;}
.popup.img-upload .search-bar {width: 100%; position: relative; height: 40px;}
.popup.img-upload .search-bar input {width: 100%; border: 1px solid #e1e1e1; height: 100%; border-radius: 10px; padding-left: 10px; box-sizing: border-box;}
.popup.img-upload .search-bar .btn-search {position: absolute; top: 50%; transform: translateY(-50%); right: 10px;}
.popup.img-upload .img-search .img-wrap img {max-width: 100%; max-height: 100%; width: 100%; height: 100%;}
.popup.img-upload .img-search .txt {color: #5f84fe; font-size: 18px; font-family: 'Gmarket Sans'; margin-top: 40px; margin-bottom: 100px;}
.popup.img-upload .url-input {border: 1px solid #e1e1e1; border-radius: 11px; width: 460px; height: 40px; padding: 0 15px; box-sizing: border-box;}
.popup.img-upload .upload-area {width: 460px; height: 260px; margin: 0 auto; padding: 50px 0; box-sizing: border-box; border: 1px dashed; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.popup.img-upload .upload-area p {margin-top: 15px;}
.popup.img-upload .img-view-wrap {position: relative; display: inline-block;}
.popup.img-upload .img-view-wrap .btn-delete {position: absolute; bottom: 10px; right: 10px;}
.popup.img-upload #tab-panel-url-image .img-view {margin: 20px auto;}

@media screen and (max-width:768px) {
	.popup.img-upload .upload-area {width: unset;}
	.popup.img-upload .upload-area p {display: none;}
}

.slider {
    appearance: none; /* 기본 CSS 스타일을 적용하지 않기 위해서 */
    -moz-appearance: none; /* Firefox에서도 동작하도록 함 */
    width: 100%; /* 슬라이더 길이 */
    height: 8px; /* 슬라이더 두께 */
    border-radius: 11px; /* 슬라이더 모서리를 약간 둥글게 */
    background: #ddd; /* 슬라이더 색상 */
    outline: none; /* 슬라이더 테두리 없이 */
}
/* 슬라이더 핸들(클릭해서 드래그하는 부분) 커스텀
(Chrome, Opera, Safari, Edge 브라우저를 위해서는 -webkit-을,
Firefox 브라우저를 위해서는 -moz- 를 사용하세요 */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* 기본 CSS 스타일을 적용하지 않기 위해서 */
    appearance: none; /* 기본 CSS 스타일을 적용하지 않기 위해서 */
    width: 20px; /* 슬라이더 핸들 길이 */
    height: 20px; /* 슬라이더 핸들 높이 */
    border-radius: 50%; /* 핸들 모양을 원모양으로 만들기 위함 */
    background: #6f90fe; /* 슬라이더 핸들 색상 */
    cursor: pointer; /* 슬라이더 핸들에 마우스를 갖다대면 포인터로 변경 */
}
.slider::-moz-range-thumb {
    width: 20px; /* 슬라이더 핸들 길이 */
    height: 20px; /* 슬라이더 핸들 높이 */
    border-radius: 50%; /* 핸들 모양을 원모양으로 만들기 위함 */
    background: #6f90fe; /* 슬라이더 핸들 색상 */
    cursor: pointer; /* 슬라이더 핸들에 마우스를 갖다대면 포인터로 변경 */
}

/* 샘퀴즈 과제 팝업 */
/* .popup.samquiz {width: 1100px;} */
.popup.samquiz .pop-body {padding-top: 0px;}
.popup.samquiz .search-option {display: flex; align-items: center; border-top: 2px solid #ddd; padding-top: 30px;}
.popup.samquiz .search-option .left, .popup.samquiz .search-option .right {display: flex; align-items: center; width: 100%;}
.popup.samquiz .search-option .left span {font-size: 19px; font-weight: bold; margin: 0 10px;}
.popup.samquiz .search-option .left input {border: 2px solid #e1e1e1; border-radius: 11px; padding: 5px 35px 5px 15px; width: 130px; height: 25px;}
.popup.samquiz .search-option .left .date-input input {border: none;}
.popup.samquiz .search-option .right {gap: 0 5px; justify-content: center;}
.popup.samquiz .search-option .right li {border: 2px solid #e1e1e1; border-radius: 11px; background: #fff;}
.popup.samquiz .search-option .right li a {padding: 5px 10px; display: block; color: #333; font-size: 16px;}
.popup.samquiz .search-option .right li:last-child {border: unset;}
.popup.samquiz .search-option .right li button {display: flex; align-items: baseline; color: #fff; font-size: 16px; padding: 11px 20px; background: #60606b; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.popup.samquiz .search-option .right li button:hover {color: #fff; background-color: #45454e; border-color: #2d2d33;}
.popup.samquiz .search-option .right li button i {width: 12px; height: 12px; margin-right: 5px;}
.popup.samquiz .search-option .right li.active {border: 2px solid #5f84fe;}
.popup.samquiz .search-option .right li.active a {color: #5f84fe;}
.popup.samquiz span.txt {font-size: 13px; color: #e0656f; margin-left: 10px;}

.popup.samquiz .flex {margin-top: 25px; display: flex; justify-content: space-between;}
.popup.samquiz .quiz-list {width: 100%; overflow-y: scroll; max-height: 550px; padding: 5px; box-sizing: border-box;}
.popup.samquiz .quiz-list li {overflow: hidden; width: 100%; box-sizing: border-box; padding: 5px; cursor: pointer; border: 3px solid #fff; display: flex; align-items: center;}
.popup.samquiz .quiz-list li.active {border: 3px solid #5f84fe;}
.popup.samquiz .quiz-list li .quiz-thumb {float: left; max-width: 135px; max-height: 98px; width: 135px; height: 98px; margin-right: 20px; display: flex; align-items: center; background: #eee;}
.popup.samquiz .quiz-list li .quiz-thumb img {max-width: 100%; max-height: 100%; width: 100%;}
.popup.samquiz .quiz-list li .txt-area {font-family: 'Gmarket Sans';}
.popup.samquiz .quiz-list li .txt-area .quiz-tit {width: 100%; font-size: 16px; font-weight: 500;}
.popup.samquiz .quiz-content {width: 49%; overflow-y: scroll; max-height: 550px; padding: 20px; box-sizing: border-box; background: #f2f8ff; border-radius: 11px;}
.popup.samquiz .quiz-content li {margin-bottom: 30px;}
.popup.samquiz .quiz-content li .quiz-type {padding-bottom: 10px; border-bottom: 2px solid #5f84fe; color: #5f84fe; font-size: 20px; font-weight: 500;}
.popup.samquiz .quiz-content li .quiz-type span {background: #5f84fe; border-radius: 11px; width: 32px; height: 32px; color: #fff; display: inline-block; text-align: center; line-height: 32px; font-weight: 500; margin-right: 7px;}
.popup.samquiz .quiz-content li .quiz {padding-top: 10px;}
.popup.samquiz .quiz-content li .quiz .question, .popup.samquiz .quiz-content li .quiz .answer {padding: 5px 0;}
.popup.samquiz .quiz-content li .quiz .question {font-size: 18px; font-family: 'Gmarket Sans'; font-weight: 500; color: #333;}
.popup.samquiz .quiz-content li .quiz .question span {font-size: 20px; font-family: 'Gmarket Sans'; font-weight: bold; color: #5f84fe; margin-right: 10px;}
.popup.samquiz .quiz-content li .quiz .answer {display: flex;}
.popup.samquiz .quiz-content li .quiz .answer span {font-size: 20px; font-family: 'Gmarket Sans'; font-weight: bold; color: #5f84fe; margin-right: 10px;}
.popup.samquiz .quiz-content li .quiz .answer .answer-area {display: flex; flex-wrap: wrap; gap: 5px;}
.popup.samquiz .quiz-content li .quiz .answer .answer-area button {width: 170px; height: 40px; background: #fff; border: 1px solid #e1e1e1; border-radius: 5px; text-align: left; padding: 0 10px;}
.popup.samquiz .quiz-content li .quiz .answer .answer-area button.active {border: 3px solid #e0656f;}
.popup.samquiz .quiz-content li .quiz .answer .answer-area button span {background: #60606b; color: #fff; font-family: 'Gmarket Sans'; font-weight: bold; border-radius: 50%; width: 22px; height: 22px; display: inline-block; font-size: 16px; text-align: center;}
.popup.samquiz .quiz-content li .quiz .answer .answer-area input {width: 400px; height: 30px; border-radius: 5px; border: 3px solid #e0656f; padding: 0 15px; font-size: 15px;}
.popup.samquiz .btn-area {text-align: center; margin-top: 20px;}
.popup.samquiz .btn-area .btn {color: #fff; font-size: 14px; font-weight: 500; width: 60px; height: 30px;}

.popup.samquiz .quiz-list::-webkit-scrollbar {width:8px;}
.popup.samquiz .quiz-list::-webkit-scrollbar-thumb {background: rgba(38, 38, 42, 0.3); border-radius: 4px;}
.popup.samquiz .quiz-list::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}

.popup.samquiz .quiz-content::-webkit-scrollbar {width:8px;}
.popup.samquiz .quiz-content::-webkit-scrollbar-thumb {background: rgba(38, 38, 42, 0.3); border-radius: 4px;}
.popup.samquiz .quiz-content::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}

.popup.samquiz .no-search {width: 100%; text-align: center; background: #f2f8ff; border-radius: 11px; padding: 50px 0;}
.popup.samquiz .no-search div {font-family: 'Gmarket Sans'; font-size: 18px; font-weight: 500; color: #5f84fe; margin: 20px 0 10px;}
.popup.samquiz .no-search button {font-size: 18px; padding: 8px 15px; color: #fff; font-weight: 500; border-radius: 11px; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}
.popup.samquiz .no-search button:hover {color: #fff; background-color: #c2414b; border-color: #c4303c;}

/* URL 링크 팝업 */
.popup.URL-link {width: 1100px;}
.popup.URL-link .pop-header {border-bottom: 2px solid #ddd; margin: 0 auto; width: 96%;}
.popup.URL-link .pop-body {padding-top: 20px;}
.popup.URL-link .pop-content {padding: 20px; background: #f2f8ff; border-radius: 11px; text-align: center;}
.popup.URL-link .txt-area {font-size: 14px; font-weight: 500; font-family: 'Gmarket Sans'; margin-bottom: 20px;}
.popup.URL-link .txt-area span {font-size: 14px; color: #e0656f; display: block; font-weight: 500; font-family: 'Gmarket Sans';}
.upload-area input {border: 1px solid #e1e1e1; border-radius: 11px; width: 450px; height: 40px; padding: 0 15px; box-sizing: border-box;}
.upload-area input::placeholder {color: #555;}
.popup.URL-link .btn-area {text-align: center; margin-top: 15px;}
.popup.URL-link .btn-area .btn {color: #fff; font-size: 14px; font-weight: 500; width: 60px; height: 30px;}
.popup.URL-link .pop-header.wh .btn-pop-close {top: 20px; right: 0;}

/* 보드 설정 그룹형 > 그룹 상세 */
.board-column-header .tit-write-area .tit-fnc {position: relative;}
.board-column-header .tit-write-area .tit-fnc ul {position: absolute; width: 90px; height: 90px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 11px; z-index: 2; display: none; justify-content: center; flex-direction: column; top: 30px; right: 0;}
.board-column-header .tit-write-area .tit-fnc ul.active {display: flex;}
.board-column-header .tit-write-area .tit-fnc ul li {width: 100%; text-align: center; padding: 5px 0; box-sizing: border-box; font-size: 14px; font-family: 'Gmarket Sans';}
.board-column-header .tit-write-area .tit-fnc ul li:hover button {color: #5f84fe;}
.board-column-header .tit-write-area .tit-fnc ul li:hover button .ico-pencil {background-image: url(../image/ico-pencil-bl.svg);}
.board-column-header .tit-write-area .tit-fnc ul li:hover button .ico-delete-gr {background-image: url(../image/ico-delete-bl.svg);}
/* .board-column-header .add-group {position: relative;} */
.board-group-fnc .layer-add-group {background: #fff; padding: 10px; border-radius: 22px; font-family: 'Gmarket Sans'; position: absolute; z-index: 1; width: 240px; height: 210px; margin-top: 15px; display: none;}
.board-group-fnc .layer-add-group.active {display: block;}
.board-group-fnc .layer-add-group::before {content: ''; width: 0; height: 0; border-bottom: calc( 10px * 1.732 ) solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; top: -15px; right: 30px;}
.board-group-fnc .layer-add-group ul {margin-top: 20px;}
.board-group-fnc .layer-add-group ul li span {vertical-align: middle;}
.board-group-fnc .layer-add-group ul li [type="radio"] {vertical-align: middle; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #f2f8ff; border: 2px solid #ddd;position: relative; margin: 0 5px;}
.board-group-fnc .layer-add-group ul li [type="radio"]:checked {border: 2px solid #5f84fe; background: #fff;}
.board-group-fnc .layer-add-group ul li [type="radio"]:checked::after {width: 9px; height: 9px; background: #5f84fe; border-radius: 50%; position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.board-group-fnc .layer-add-group ul li input[type="number"] {background: #f2f8ff; border: 1px solid #ddd; border-radius: 11px; width: 35px; text-align: center; margin-right: 3px; color: #5f84fe; font-weight: bold;}
.board-group-fnc .layer-add-group ul li input[type="number"]::placeholder {color: #bbb;}
.board-group-fnc .layer-add-group ul li input[type="number"]::-webkit-outer-spin-button, .board-group-fnc .layer-add-group ul li input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.board-group-fnc .layer-add-group p {color: #777; font-size: 14px; margin-top: 20px; margin-bottom: 10px;}
.board-group-fnc .layer-add-group .btn-area {text-align: center;}
.board-group-fnc .layer-add-group .btn-area .btn {padding: 7px 15px; color: #fff; font-size: 18px; font-weight: 500;}

/* 게시글 입력 첨부하기 */
.upload-area > * { position: relative;}
.upload-area div[class^="upload-"] + div[class^="upload-"] {margin-top: 10px;}
.upload-file, .upload-img {background: #bababa; width:100%; max-width: 100%; overflow: hidden;}
.upload-file img, .upload-img img {display: block; margin: 0 auto; width:100%; max-width: 100%; cursor: pointer;}
.upload-area .file-nm {font-size: 15px; text-align: center; display: block; padding: 5px 10px 0; color: #fff; background: #60606b; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.upload-area .btn-delete {right: 5px; top: 5px; z-index: 2; display: none;}
.board-item.is-edit .upload-area .btn-delete {display: block;}
.btn-delete { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: url(../image/ico-delete-wh.svg) center center no-repeat rgba(0, 0, 0, 0.3);}

/* 게시글 확대, 선생님 스탬프 */
.post-bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.8); z-index: 100;}
.post-expand {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; font-family: 'S Core Dream'; max-height: 100%; /*overflow: auto;*/}
.post-expand .expand-header {width: 100%; position: relative; text-align: center; margin-bottom: 10px;}
.post-expand .expand-header .expand-info {color: #fff; position: relative; display: inline-block; padding: 0 45px;}
.post-expand .expand-header .expand-info .post-paging {border: 1px solid #fff; display: inline-block; padding: 5px 20px; border-radius: 25px; font-size: 18px;}
.post-expand .expand-header .expand-info .post-paging span {color: #e0656f;}
.post-expand .expand-header .expand-info button {position: absolute;}
.post-expand .expand-header .expand-info .btn-first {left: 0px; top: 50%; transform: translateY(-50%); background: url(../image/arrow-first-wh.svg) no-repeat center/cover; width: 15px; height: 15px;}
.post-expand .expand-header .expand-info .btn-prev {left: 25px; top: 50%; transform: translateY(-50%); background: url(../image/arrow-prev-wh.svg) no-repeat center/cover; width: 10px; height: 15px;}
.post-expand .expand-header .expand-info .btn-next {right: 25px; top: 50%; transform: translateY(-50%); background: url(../image/arrow-next-wh.svg) no-repeat center/cover; width: 10px; height: 15px;}
.post-expand .expand-header .expand-info .btn-last {right: 0px; top: 50%; transform: translateY(-50%); background: url(../image/arrow-last-wh.svg) no-repeat center/cover; width: 15px; height: 15px;}
.post-expand .expand-header .font-size-btn {position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.post-expand .expand-header .font-size-btn button {width: 38px; height: 38px;}
.post-expand .expand-header .font-size-btn button.size-up {background: #fff; font-size: 18px;}
.post-expand .expand-header .font-size-btn button.size-down {background: #626272; color: #fff; font-size: 14px; margin-left: -3px;}
.post-expand .expand-body {background: #fff; padding: 50px; position: relative; border-radius: 11px;}
.post-expand .expand-body .btn-expand-close {position: absolute; top: 15px; right: 15px;}
.post-expand .expand-body .item-body {overflow-y: auto; max-height: 300px;}
.btn-stamp-close {position: absolute; top: 15px; right: 15px;}
.post-expand .expand-body .expand-content .user {font-size: 18px; color: #5f84fe; display: flex; align-items: center; margin-bottom: 10px; font-weight: 500;}
.post-expand .expand-body .expand-content .user i {width: 25px; height: 25px; margin-right: 7px;}
.post-expand .expand-body .expand-content .time {color: #777; font-size: 14px; margin-bottom: 10px; display: block;}
.post-expand .expand-body .expand-content h3 {font-size: 18px; font-weight: bold; margin-bottom: 15px; letter-spacing: -1.32px;}
.post-expand .expand-body .expand-content .txt {font-size: 12px; color: #555; letter-spacing: -1.08px; line-height: 1.61; margin-bottom: 20px; font-weight: 400;}
.post-expand .expand-body .expand-content .item-etc {position: relative;}
.post-expand .expand-body .expand-content .item-etc .btn-like.active .ico-heart {background-image: url(../image/ico-heart-bl.svg);}
.post-expand .expand-body .expand-content .table-area {padding: 15px 0; box-sizing: border-box; border-top: 1px solid #ddd; position: relative; display: table; width: 100%;}
.post-expand .expand-body .expand-content .table-area button i {margin-right: 3px;}
.post-expand .expand-body .expand-content .table-area button span {vertical-align: bottom; font-weight: 500;}
.post-expand .expand-body .expand-content .item-reply {padding: 0;}
.post-expand .expand-body .expand-content .item-reply .reply {overflow-y: auto; height: 200px; overflow-x: hidden;}
.post-expand .expand-body .expand-content .item-reply .txt img {max-width: 200px; max-height: 200px;}
.post-expand .expand-body .expand-content .item-reply .reply-write-area {margin-top: 15px;}
.stamp-wrap {background: #fff; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); position: relative; right: -280px; top: -50px; width: 260px; height: 300px; padding: 25px 10px; box-sizing: border-box; display: none;}
.stamp-wrap h2 {font-size: 18px; font-weight: 500; color: #5f84fe; margin-bottom: 15px;}
.stamp-wrap p {font-size: 14px; margin-bottom: 10px; font-weight: 500; letter-spacing: -0.84px;}
.stamp-wrap .stamp-list {display: flex; flex-wrap: wrap; overflow-y: auto; width: 100%; height: calc(100% - 75px); justify-content: center; gap: 5px 10px;}
.stamp-wrap .stamp-list li {width: 63px; height: 63px; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}

.post-expand .expand-body .expand-content .stamp-wrap .stamp-list::-webkit-scrollbar {width:8px;}
.post-expand .expand-body .expand-content .stamp-wrap .stamp-list::-webkit-scrollbar-thumb {background: rgba(38, 38, 42, 0.3); border-radius: 4px;}
.post-expand .expand-body .expand-content .stamp-wrap .stamp-list::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}

.post-expand .expand-body .item-etc .upload-area {max-height: 300px; overflow-y: auto;}
.post-expand  .attach-down {position: absolute; top: 2px; right: 90px;}
.post-expand  .attach-down .attach-down-btn {background: #5f84fe; width: 140px; height: 35px; border-radius: 0.375rem; color: #fff;}
.post-expand  .attach-down .attach-down-btn i {margin-right: 5px; vertical-align: text-bottom;}

/* 참여자 입장 진입화면 */
.enter-wrap {width: 100%; height: 100vh; background: #f2f8ff; text-align: center;}
.enter-wrap .enter-inner {width: 100%; height: 100%;}
.enter-wrap .enter-inner img {width: 240px; height: 80px; margin-top: 100px;}
.enter-wrap .enter-inner .enter-info {margin: 70px 0 50px; padding: 60px 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;}
.enter-wrap .enter-inner .enter-info h2 {font-size: 24px; font-weight: bold; margin-bottom: 20px;}
.enter-wrap .enter-inner .enter-info input + h2 {margin-top: 30px;}
.enter-wrap .enter-inner .enter-info input {border: 2px solid #e1e1e1; background: #fff; border-radius: 15px; width: 400px; height: 60px; font-size: 18px; text-align: center; padding: 0 20px; box-sizing: border-box; font-family: 'Gmarket Sans';}
.enter-wrap .enter-inner .enter-info input.board-tit::placeholder {color: #999;}
.enter-wrap .enter-inner .enter-info input.nick-write {color: #e0656f;}
.enter-wrap .enter-inner .enter-info input.nick-write::placeholder {color: #e0656f;}
.enter-wrap .enter-inner button {width: 130px; height: 40px; border-radius: 11px; color: #fff; font-size: 18px; font-weight: 500;}

/* 이미지 업로드_비바샘이미지 등록 */
.popup.img-upload .img-search .search-road {margin: 20px 0; display: flex; font-family: 'Gmarket Sans';}
.popup.img-upload .img-search .search-road .category {padding: 0 20px; position: relative;}
.popup.img-upload .img-search .search-road .category button {font-family: 'Gmarket Sans';}
.popup.img-upload .img-search .search-road .category span {margin-left: 3px; color: #5f84fe;}
.popup.img-upload .img-search .search-road .category::after {content: ''; background: url(../image/arrow-next.svg); background-repeat: no-repeat; width: 12px; height: 12px; position: absolute; background-position: center; top: 50%; transform: translateY(-50%); background-size: contain; right: -10px;}
.popup.img-upload .img-search .search-road .category:first-child {padding-left: 0;}
.popup.img-upload .img-search .search-road .category:last-child {padding-right: 0;}
.popup.img-upload .img-search .search-road .category:last-child::after {display: none;}
.popup.img-upload .img-search .img-list {display: flex; flex-wrap: wrap; gap: 17px 44px; margin-top: 30px;}
.popup.img-upload .img-search .img-list li {width: 130px; overflow: hidden;}
.popup.img-upload .img-search .img-list li .img-wrap {border: 1px solid #707070; background: #b4b4b4; width: 130px; height: 130px;}
.popup.img-upload .img-search .img-list li .img-tit {text-align: center; font-size: 14px; font-family: 'Gmarket Sans'; color: #333; margin-top: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.popup.img-upload .pager {margin-top: 20px;}

/* GNB 메뉴 */
.gnb-menu {width: 180px; padding: 20px 15px; background: #fff; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); position: absolute; top: 65px; right: 10px; z-index: 1; box-sizing: border-box; display: none;}
.gnb-menu.active {display: block;}
.gnb-menu .gnb-list {width: 100%;}
.gnb-menu .gnb-list li {padding: 5px 0;}
.gnb-menu .gnb-list li button {font-family: 'Gmarket Sans';  font-size: 18px; color: #626272; font-weight: 500;}
.gnb-menu .gnb-list li button i {vertical-align: middle; margin-right: 10px;}


/* 반응형 */
/* 공통 */
@media screen and (max-width: 430px) {
    .btn-create-small {display: none !important;}
    .btn-setting {display: none;}
    .mob-btn-wrap {display: flex;}
    .menu div[class^="menu-body-"] {height: 85% !important;}
    .btn-create {display: none !important;}
    .mob {display: block;}
    .modal-section {width: 100%;}

    /* 메뉴 */
    .menu .menu-header .btn-menu-save {width: 50%; position: fixed; right: 0; bottom: 0; text-align: center; border-radius: 0px; transform: translateY(0); top: unset; z-index:10; height: 60px; line-height: 60px;}
    .menu .menu-header .btn-menu-choice {width: 50%; position: fixed; right: 0; bottom: 0; text-align: center; border-radius: 0px; transform: translateY(0); top: unset; z-index:10; height: 60px; line-height: 60px;}
    .menu .menu-header .btn-menu-close {width: 50%; position: fixed; left: 0; bottom: 0; text-align: center; border-radius: 0px; transform: translateY(0); top: unset; background: #60606b; opacity: 1; z-index:10; height: 60px; line-height: 60px;}

    /* 보드 복사 메뉴 */
    .menu-body-copy ul li {width: 100%;}
    #boardDownMenu .menu-header .btn-menu-close {width: 100%;}

    /* 보드 참여 결과 저장 */
    #boardCopyMenu .menu-header .btn-menu-close {width: 100%;}
    /* 페이지 배경화면 */
	#boardBackgroundMenu .menu-header .btn-menu-close {width: 100%;}
	#color_choice .menu-header .btn-menu-close {width: 100%;}
	#img_choice .menu-header .btn-menu-close {width: 100%;}
	#img_upload .menu-header .btn-menu-close {width: 100%;}

	/* 보드 저장 */
	#board-download-menu .btn.red {width: 50%; position: fixed; border-radius: 0px; z-index: 10; bottom: 0; right: 0; height: 60px; line-height: 60px; font-size: 18px; font-family: 'S Core Dream';}


    /* 팝업 */
    .popup.guest {width: 100%; transform: translate(0); bottom: 0; left: 0; top: unset; border-bottom-left-radius: unset; border-bottom-right-radius: unset;}

    /* 승인 텍스트 */
    .board-item .allow-txt {position: unset !important; transform: unset !important; display: block; text-align: center; margin-bottom: 10px;}
}

/* 헤더 영역 */
@media screen and (max-width: 1800px) {
    /* .header-tit-btn {flex-direction: column;} */
    /* .header-tit-btn .toggle-switch {margin-top: 5px;} */
    .header-info {max-width: 500px;}
    .header-left {width: 45%;}
    .header-tit-btn {margin-left: 10px;}
}

@media screen and (max-width: 1700px) {
    .header-info {max-width: 450px;}
}

@media screen and (max-width: 1600px) {
    .header-info {max-width: 400px;}
    .header-tit {text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis; display: -webkit-box;}
    .header-content {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
}

@media screen and (max-width: 1500px) {
    .header-info {max-width: 350px;}
}

@media screen and (max-width: 1400px) {
    .header-info {max-width: 300px;}
}

@media screen and (max-width: 1300px) {
    .header-info {max-width: 250px;}
}

@media screen and (max-width: 1200px) {
    .board-body {padding-top: 130px;}
    .header-left {width: unset;}
    .header-info {max-width: 400px;}
    .board-thumb {top: 70px; background: #f2f8ff; width: 100%; text-align: center; left: 0; transform: unset;}
    .board-thumb-info .btn-thumb-open {bottom: -15px;}
    .board-thumb-info .btn-thumb-open span {background: #f2f8ff;}
}

@media screen and (max-width: 1100px) {
    .popup.file-upload {width: 100%;}
}

@media screen and (max-width: 1024px) {
    /* 팝업창 */
    /* 교과정보 */
    .pager-mob {display: block;}
    .popup .btn-pop-close {display: none;}
    .popup {width: 100% !important; height: 100vh; border-radius: unset; position: fixed; top: 0; left: 0; transform: none;}
    .popup .pop-header {border-radius: unset; flex-shrink: 0;}
    .popup .pop-header h1 {font-size: 24px; padding: 20px 0;}
    .popup.subject .sub-list {display: none;}
    .popup.subject .select-sub {display: block;}
    .popup.subject .search-result {text-align: center;}
    .popup.subject .pager, .popup.img-upload .pager {display: none;}
    .popup .btn-area {position: fixed; bottom: 0; left: 0; width: 100%; display: flex; z-index: 101 !important; overflow: hidden; margin: 0; flex-shrink: 0;}
    .popup .btn-area button {width: 50% !important; height: 60px !important; font-size: 18px !important; font-weight: 500; border-radius: unset;}
	.pop-body {overflow-y: auto; position: relative; z-index: 100; flex: 1 1 auto; padding-bottom: 70px; height: calc(100vh - 150px);}

	/* 참여자 정보 */
	.popup.guest {max-width: unset; max-height: unset; min-width: unset;}
	#guestCountPop .btn.round.dark {width: 100% !important; color: #fff;}

	/* 이미지 다운로드 */
	.btn-img-close {display: block !important;}

    /* 동영상 업로드 */
    .pop-header.wh {background: #f2f8ff; border-radius: unset; padding: unset;}

    /* 이미지 업로드 */
    .popup.img-upload .upload-area .btn {margin-top: 10px;}
    .popup.img-upload .img-search {height: 480px;}
    .popup.img-upload .img-search .img-list {height: 90%; overflow-y: auto;}

    /* 파일 업로드 */
    .popup.file-upload .pop-header {width: 100%; border-bottom: unset;}
    .popup.file-upload .pop-content {margin-top: 100px; padding: 100px 0;}
    .popup.file-upload .txt-area {font-size: 18px;}
    .popup.file-upload .txt-area span {font-size: 16px;}

    /* 샘퀴즈 과제 */
    .popup.samquiz .pop-body {padding: 20px;}
    .popup.samquiz .search-option {flex-direction: column; gap: 10px;}
    .popup.samquiz .search-option .left, .popup.samquiz .search-option .right {width: 100%; justify-content: center; flex-wrap: wrap;}
    .popup.samquiz .search-option .left span:nth-child(1) {width: 100%; text-align: center; margin-bottom: 10px;}
    .popup.samquiz .quiz-list, .popup.samquiz .quiz-content {max-height: 490px;}
    .popup.samquiz .quiz-content li .quiz .answer .answer-area input {width: 100%;}

    /* 학생 참여 링크 */
    #boardURLPop .btn.round.dark {width: 100% !important;}
    /* 보드 유형 및 게시물 수 */
    #boardCountPop .btn.round.dark {width: 100%; color: #fff;}
    /* URL 링크 */
    .popup.URL-link .pop-header {width: 100%;}
}

@media screen and (max-width: 1000px) {
    .inner-header {height: 70px;}
    .header-info {max-width: 700px;}
    .header-tit-btn, .header-btn-wrap, .board-share {display: none;}
    .header-btn-wrap {margin-right: 100px;}
    button.gnb-btn {display: block;}
    .gnb-menu .gnb-list li:nth-child(3) {display: none;}
}

@media screen and (max-width: 900px) {
    .header-info {max-width: 600px;}
}

@media screen and (max-width: 800px) {
    .header-info {max-width: 500px;}
    .popup.samquiz .quiz-list li .txt-area {margin-top: 0;}

    /* 게시글 미리보기 */
    .post-expand {width: 100%; height: 100%; top:0; left:0; transform: none !important;}rmdR
    .post-expand .expand-header {background: #f2f8ff; padding: 15px 0; margin-bottom: 0px;}
    .post-expand .expand-header .expand-info {color: #000;}
    .post-expand .expand-header .expand-info .post-paging {border-color: #000; background: #fff;}
    .post-expand .expand-header .expand-info .btn-first {background-image: url(../image/arrow-first.svg); left: -15px;}
    .post-expand .expand-header .expand-info .btn-prev {background-image: url(../image/arrow-prev.svg); left: 20px;}
    .post-expand .expand-header .expand-info .btn-next {background-image: url(../image/arrow-next.svg); right: 20px;}
    .post-expand .expand-header .expand-info .btn-last {background-image: url(../image/arrow-last.svg); right: -15px;}
    .post-expand .expand-header .font-size-btn {right: 5%;}
    .post-expand .expand-body {width: 100%; border-radius: unset; padding: 15px; overflow: auto; padding-bottom: 120px; height: calc(100% - 127px); max-height: calc(100% - 127px);}
    .post-expand .expand-body .btn-expand-close {position: fixed; bottom: 0; left: 0; top: unset; right: unset; width: 100%; z-index: 1;}
    .post-expand .expand-body .btn-expand-close img {display: none;}
    .post-expand .expand-body .btn-expand-close::before {width: 100%; content: '닫기'; background: #60606b; display: block; color: #fff; font-size: 18px; padding: 20px 0;}
    .post-expand .expand-body .expand-content .txt {max-height: 350px; overflow: auto;}
    .post-expand .expand-body .expand-content .stamp-wrap {position: fixed; bottom: 0; top: unset; right: 0; width: 100%; border-bottom-left-radius: unset; border-bottom-right-radius: unset;}
    .post-expand .expand-body .expand-content .stamp-wrap h2 {text-align: center; margin-bottom: 5px;}
    .post-expand .expand-body .expand-content .stamp-wrap p {text-align: center;}
}

@media screen and (max-width: 700px) {
    .header-info {max-width: 400px;}
}

@media screen and (max-width: 600px) {
    .board-header {height: 150px; background: #f2f8ff;}
    .inner-header {height: 100%;}
    .header-left {flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px 0;}
    .board-body {padding-top: 210px;}
    .board-thumb {top: 150px; background: #fff;}
    .board-thumb-info .btn-thumb-open span {background: #fff;}
    .header-info {max-width: 500px;}
    button.gnb-btn {position: absolute; top: 30px; right: 0;}

    .popup.samquiz .flex {flex-direction: column;}
    .popup.samquiz .quiz-list, .popup.samquiz .quiz-content {max-height: 250px;width: 100%;}
}

@media screen and (max-width: 500px) {
    .header-info {max-width: 400px;}
    /* 동영상 업로드 */
    .popup.video-upload input {width: 90%;}
    .popup.video-upload .video-view {width: 90%;}
    .popup.img-upload input {width: 90% !important;}
    .popup.img-upload .img-view {width: 90% !important;}
    .popup.file-upload .upload-area input {width: 90% !important;}
    .popup.file-upload .upload-area .btn {margin-top: 10px;}

    /* 이미지 업로드 */
    .popup.img-upload .slider-wrap {width: 80%;}

    /* 샘퀴즈 과제 */
    .popup.samquiz .search-option .left input {width: 80px;}
    .popup.samquiz .search-option .right {gap: 0;}
}

@media screen and (max-width: 430px) {
    .board-thumb .thumb-paging {width: 87px;}
    .popup.video-upload .video-view {height: 210px;}
    .popup.samquiz .search-option .right li:last-child {width: 100%; margin-top: 10px;}
    .popup.samquiz .search-option .right li:last-child button {width: 100%; justify-content: center;}
    .board-qr {width: 100%; height: 100%; border-radius: unset; z-index: 11; top: 0; left:0; transform: unset; border-radius: 0;}
    .board-qr .btn-area {display: none;}
    .board-qr .btn.dark {display: block;}
    .qr-pop-close {width: 100%; height: 60px; font-size: 18px; text-indent: unset; background: #45454e; color: #fff; text-align: center; top: unset; bottom: 0; right: 0; line-height: 60px;}
	.board-qr > img {margin-top: 100px;}
	.popup.file-upload .pop-content {margin-top: 0px;}
	.popup.img-upload .search-bar {flex-wrap: wrap;}
	.popup.img-upload .search-bar select {width: 100% !important;}
	.popup.img-upload .search-bar input {width: 100% !important;}
	.popup.img-upload .search-bar .btn-search {transform: unset; bottom: -30px; top: unset;}
	.popup.img-upload .url-input {width: 100%;}
	.link-area .btn {margin-top: 15px;}
	.popup .tab-menu a {width: 85px;}
	.popup.img-upload .img-search .img-list {gap: 17px 8px; justify-content: space-between;}
	.popup.img-upload .img-search {margin-top: 55px;}
	.upload-area input {width: 100%;}
	.pop-body {height: 70%;}
	/* .popup:not(.popup.guest) .btn-area {-webkit-margin-after:55px;} */

	/* 게시글 닉네임쪽 */
	.board-item .item-header .user {width: 80px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis;}
	.ico-dia {vertical-align: text-bottom;}
	.board-item:not(.is-edit):not(.fixed) .item-header.allow::before {top: 102px !important;}
}

@media screen and (max-width: 400px) {
    .header-info {max-width: 300px;}
    .menu .menu-body-info ul li .flex input {width: 150px;}
    .post-expand .expand-header .expand-info .btn-first {left: 0px;}
    .post-expand .expand-header .expand-info .btn-prev {left: 30px;}
    .post-expand .expand-header .expand-info .btn-next {right: 30px;}
    .post-expand .expand-header .expand-info .btn-last {right: 0px;}
}

@media screen and (max-width: 350px) {
    .popup.samquiz .search-option .left input {width: 70px;}
    .popup.samquiz .search-option .right li a {font-size: 14px;}
    .popup.samquiz .flex {margin-top: 10px; gap: 10px;}
    .popup.samquiz .search-option .right li button {font-size: 14px;}
    .popup.samquiz .quiz-list, .popup.samquiz .quiz-content {max-height: 230px;}
}


@media screen and (max-width: 300px) {
    .header-info {max-width: 200px;}
}

/* 댓글 스탬프 기능 */
.item-reply .stamp {margin-top: 5px; width: 100%;}
.item-reply .stamp .stamp-wrap {display:inline-block; text-align: center; box-shadow:  0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #fff; padding: 6px; width: 100%;}

.item-stamp .stamp-wrap {background: #fff;}
.item-stamp .stamp-wrap h2 {font-size: 18px; font-weight: 500; color: #5f84fe; margin-bottom: 15px;}
.item-stamp .stamp-wrap .btn-stamp-close {position: absolute; top: 10px; right: 10px;}
.item-stamp .stamp-wrap p {font-size: 14px; margin-bottom: 10px; font-weight: 500; letter-spacing: -0.84px;}
.item-stamp .stamp-wrap .stamp-list {display: flex; flex-wrap: wrap; width: 100%; height: calc(100% - 75px); justify-content: center; gap: 5px 10px;}
.item-stamp .stamp-wrap .stamp-list li {width: 63px; height: 63px; border-radius: 11px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}

.item-stamp .stamp-wrap .stamp-list::-webkit-scrollbar {width:8px;}
.item-stamp .stamp-wrap .stamp-list::-webkit-scrollbar-thumb {background: rgba(38, 38, 42, 0.3); border-radius: 4px;}
.item-stamp .stamp-wrap .stamp-list::-webkit-scrollbar-track {background: #dddddd; border-radius: 4px;}

/* 게시글 승인 */
.board-item .allow-txt {position: absolute; font-size: 18px; color: #ee5663; font-weight: 500; left: 50%; transform: translateX(-50%); top: 18px;}
.board-item .allow-area {padding: 15px 0px; font-size: 18px; color: #ee5663; font-weight: 500; text-align: center; margin: 0 15px; border-bottom: 1px solid #ddd;}
.board-item .allow-wrap {display: flex; margin: 0 15px; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 15px 0;}
.board-item .allow-wrap span {color: #5f84fe; float: left; font-size: 18px; font-weight: 500;}
.board-item .allow-wrap button {padding:5px 10px; color: #fff; font-size: 14px; border-radius: 8px;}
.board-item .header-fnc.allow {top: 75px;}
.board-item .item-header .user {color: #626272;}

/* 별점 추가 */
.btn-sm {padding: 0 18px; height: 30px; line-height: 28px; font-size: 15px; min-width: 50px;}
.btn.spot3, .btn-sm.spot3, .btn-lg.spot3 { color: #fff; background-color: #7e7e7e; border: 1px solid #7e7e7e;}
.score-check .btn-sm { padding: 0; width: 50px;}
.btn-star {font-size:14px; font-weight:700; padding:0;}
.btn-star-default, .btn-star-active {display:block;white-space:nowrap;}
.btn-star .score {display:inline-block; height:14px; background: url('../image/ico-star-default.svg') 0 0 repeat-x; background-size: auto 14px; vertical-align:middle;}
.btn-star .score:before {content:''; display:block; height:14px; background: url('../image/ico-star-default.svg') 0 0 repeat-x; background-size:auto 14px;}
.btn-star-active .score:before {content:''; display:block; height:14px; background: url('../image/ico-star-spot.svg') 0 0 repeat-x; background-size:auto 14px;}
.btn-star .score-num {font-weight:normal; font-size:14px; color:#00000099; vertical-align:middle;}

.btn-star .score[data-score="0"],
.btn-star .score[data-score="0.0"],
.btn-star .score[data-score="0.1"],
.btn-star .score[data-score="0.2"],
.btn-star .score[data-score="0.3"],
.btn-star .score[data-score="0.4"],
.btn-star .score[data-score="0.5"]:before { width:7px; }
.btn-star .score[data-score="0.6"],
.btn-star .score[data-score="0.7"],
.btn-star .score[data-score="0.8"],
.btn-star .score[data-score="0.9"],
.btn-star .score[data-score="1.0"]:before { width:14px; }
.btn-star .score[data-score="1"]:before { width:14px; }
.btn-star .score[data-score="1.1"],
.btn-star .score[data-score="1.2"],
.btn-star .score[data-score="1.3"],
.btn-star .score[data-score="1.4"],
.btn-star .score[data-score="1.5"]:before { width:21px; }
.btn-star .score[data-score="1.6"],
.btn-star .score[data-score="1.7"],
.btn-star .score[data-score="1.8"],
.btn-star .score[data-score="1.9"],
.btn-star .score[data-score="2.0"]:before { width:28px; }
.btn-star .score[data-score="2"]:before { width:28px; }
.btn-star .score[data-score="2.1"],
.btn-star .score[data-score="2.2"],
.btn-star .score[data-score="2.3"],
.btn-star .score[data-score="2.4"],
.btn-star .score[data-score="2.5"]:before { width:35px; }
.btn-star .score[data-score="2.6"],
.btn-star .score[data-score="2.7"],
.btn-star .score[data-score="2.8"],
.btn-star .score[data-score="2.9"],
.btn-star .score[data-score="3.0"]:before { width:42px; }
.btn-star .score[data-score="3"]:before { width:42px; }
.btn-star .score[data-score="3.1"],
.btn-star .score[data-score="3.2"],
.btn-star .score[data-score="3.3"],
.btn-star .score[data-score="3.4"],
.btn-star .score[data-score="3.5"]:before { width:49px; }
.btn-star .score[data-score="3.6"],
.btn-star .score[data-score="3.7"],
.btn-star .score[data-score="3.8"],
.btn-star .score[data-score="3.9"],
.btn-star .score[data-score="4.0"]:before { width:56px; }
.btn-star .score[data-score="4"]:before { width:56px; }
.btn-star .score[data-score="4.1"],
.btn-star .score[data-score="4.2"],
.btn-star .score[data-score="4.3"],
.btn-star .score[data-score="4.4"],
.btn-star .score[data-score="4.5"]:before { width:63px; }
.btn-star .score[data-score="4.6"],
.btn-star .score[data-score="4.7"],
.btn-star .score[data-score="4.8"],
.btn-star .score[data-score="4.9"],
.btn-star .score[data-score="5.0"]:before { width:70px;}
.btn-star .score[data-score="5"]:before { width:70px;}

.score-layer {position:absolute;background:#fff; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.16);right:0;width:210px;box-sizing:border-box;z-index:2;padding:10px 12px;top:-35px; border-radius: 11px; display: none;}
.expand-body .score-layer {left:20px;top:-60px;border-radius:5px;}
.score-layer .score-check {display:inline-block;font-size:0;}
.score-check .btn-sm {padding:0;width:50px !important; border-radius: 11px; display: inline-block !important;}
.score-check .star-wrap {display:inline-block;overflow:hidden;vertical-align:middle;width:120px;margin-right:10px;}
.score-check .ui-checkboxradio-icon-space {width:0;}
.score-check .ui-checkboxradio-label {font-size:0;float:left;}
.score-check .ui-checkboxradio-label + .ui-checkboxradio-label {margin-left:0;}
.score-check .ui-checkboxradio-icon {width:20px;height:20px;border:0;background:transparent;background: url('../image/ico-star-default.svg') repeat-x;background-size:20px auto;border-radius:0;margin:0 2px;}
.score-check .star-wrap:hover .ui-checkboxradio-radio-label .ui-checkboxradio-icon {background-image: url('../image/ico-star-spot.svg');background-size:20px auto;}
.score-check .star-wrap:hover .ui-checkboxradio-radio-label:hover ~ .ui-checkboxradio-radio-label:nth-of-type(n - 1) .ui-checkboxradio-icon {background-image: url('../image/ico-star-default.svg');background-size:20px auto;}
.score-check input:nth-of-type(1):checked ~ .ui-checkboxradio-radio-label:nth-of-type(-n + 1) .ui-checkboxradio-icon,
.score-check input:nth-of-type(2):checked ~ .ui-checkboxradio-radio-label:nth-of-type(-n + 2) .ui-checkboxradio-icon,
.score-check input:nth-of-type(3):checked ~ .ui-checkboxradio-radio-label:nth-of-type(-n + 3) .ui-checkboxradio-icon,
.score-check input:nth-of-type(4):checked ~ .ui-checkboxradio-radio-label:nth-of-type(-n + 4) .ui-checkboxradio-icon,
.score-check input:nth-of-type(5):checked ~ .ui-checkboxradio-radio-label:nth-of-type(-n + 5) .ui-checkboxradio-icon {background-image: url('../image/ico-star-spot.svg');background-size:20px auto;}
.score-check .ui-checkboxradio-radio-label.ui-state-active .ui-checkboxradio-icon:after {content:none;}
.score-check .star-wrap input[type="radio"], .score-check .star-wrap input[type="checkbox"] {border: 0; height: auto; opacity: 0; display: none;}
.ui-checkboxradio-label { display:inline-block; cursor:pointer; font-weight:400; color:#333; box-sizing:border-box;}
.ui-checkboxradio-label + .ui-checkboxradio-label { margin-left:30px; }
.ui-checkboxradio-icon {position:relative;display:inline-block;line-height:22px;padding:0;width:24px;height:24px;border:1px solid #ccc;border-radius:4px;background:#fff;box-sizing:border-box;left:0;vertical-align:middle;}
.ui-checkboxradio-radio-label .ui-checkboxradio-icon  {border-radius:50%;}
.ui-checkboxradio-icon-space {display:inline-block;width:5px;}
.ui-checkboxradio-label.ui-state-active {color:#333;}
.ui-checkboxradio-label.ui-state-active .ui-checkboxradio-icon {background:#ff6759;border-color:#ff6759;}
.ui-checkboxradio-radio-label.ui-state-active .ui-checkboxradio-icon {background:none; border-color:#ccc;}
.ui-checkboxradio-label.ui-state-active .ui-checkboxradio-icon:after {position: absolute;content: "";width: 10px; height: 14px;border-top:3px solid #fff;border-left:3px solid #fff; top: 2px; left: 6px;margin-left:0;margin-top:0;box-sizing: border-box;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
.ui-checkboxradio-radio-label.ui-state-active .ui-checkboxradio-icon:after {position:absolute;content:"";width:50%;height:50%;border:none;left:50%;top:50%;border-radius:50%;background:#000;-webkit-transform:rotate(0) translate(-50%, -50%);-moz-transform: rotate(0) translate(-50%, -50%);-ms-transform: rotate(0) translate(-50%, -50%);-o-transform: rotate(0) translate(-50%, -50%);transform: rotate(0) translate(-50%, -50%);box-sizing:border-box;}
.ui-checkboxradio-radio-label.ui-state-active .ui-checkboxradio-icon:after  {border-radius:50%;}
.check-toggle {position:relative;display:inline-block;width:53px;height:24px;font-size:0;background-color:#ddd;border-radius:12px;overflow:hidden;text-align:left;padding:2px;transition:background .3s;}
.check-toggle .ui-checkboxradio-icon-space {display:none;}
.check-toggle .ui-checkboxradio-icon { position:absolute; top:2px; left:2px;width:20px;height:20px;border:none;background:#fff;border-radius:50%;transition:left .3s;}
.check-toggle .ui-checkboxradio-icon:after{ display:none;}
.check-toggle.ui-state-active { background-color:#ff6759;}
.check-toggle.ui-state-active .ui-checkboxradio-icon { background:#fff;left:30px;}

/* 입장 불가, URL오류 팝업 */
.popup.enter {text-align: center;}
.popup.enter .pop-body {padding: 60px 40px;}
.popup.enter span {display: block; font-size: 20px; font-weight: 500; font-family: 'Gmarket Sans'; margin-bottom: 20px;}
.popup.enter button {color: #fff; width: 100px; height: 40px; font-size: 18px; font-weight: 500;}

/* 보드 URL 복사 팝업 */
.popup.URL {width: 500px;}
.popup.URL .board-url {display: flex; justify-content: space-between;}
.popup.URL .board-url input {background-color: #E9ECF6; border: none; padding: 10px; border-radius: 0.375rem; width: 75%;}
.popup.URL .board-url .url-copy {border: 1px solid #5f84fe; color: #5f84fe; background: #fff; padding: 10px 15px; border-radius: 0.375rem; font-size: 14px; min-width: 85px;}
.popup.URL .board-url .url-copy:hover {background: #5f84fe; color: #fff; transition: all 0.3s ease-out;}
.popup.URL .btn-area {text-align: center; margin-top: 20px;}
.popup.URL .btn-area .btn {min-height: 40px; color: #fff; padding: 0 20px;}

/* 그리기 팝업 */
.canvas {cursor: crosshair; margin-top: 20px; background-color: white; border-radius: 15px; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);}
.controls {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.controls__width, .controls__height {color: 1px solid rgba(0,0,0,0.8); font-size: 15px; height: 18px; width: 50px; margin-right: 10px; padding-left: 5px;}
.controls__btns {margin-top: 20px;}
.controls .btn {width: 60px; height: 30px; color: #fff;}
.controls button:active {transform: scale(0.98);}
.controls__size {display: flex; align-items: center;}
.controls__size input {border: 1px solid #ccc; border-radius: 5px; margin-left: 10px;}
.controls__colors {display: flex; width: 100%; justify-content: space-between;}
.controls__colors button {all: unset;cursor: pointer;background-color: white;padding: 5px 0px;width: 60px;text-align: center;border-radius: 5px;box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);border: 1px solid rgba(0,0,0,0.2);color: 1px solid rgba(0,0,0,0.8);text-transform: uppercase;font-weight: 600;font-size: 12px;}
.controls__color {margin-left: 5px;width: 30px; cursor: pointer; border-radius: 25px; height: 30px;box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);color: 1px solid rgba(0,0,0,0.8);text-transform: uppercase;font-weight: 600;font-size: 12px;text-align: center;line-height: 30px;}
.controls__color:active {transform: scale(0.98);}
.controls__color__clicked {border-color: #4195fc; box-shadow: 0px 0px 15px #4195fc;}
input[type=range] {-webkit-appearance: none;}
input[type=range]::-webkit-slider-runnable-track {width: 300px; height: 5px; background: #ddd; border: none;border-radius: 3px;}
input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: grey; margin-top: -4px;}
input[type=range]:focus {outline: none;}
input[type=range]:focus::-webkit-slider-runnable-track {background: #ccc;}
.popup.painting .btn-area {text-align: center; margin-top: 20px;}
.popup.painting .btn-area .btn {width: 60px; height: 30px; color: #fff;}
.popup.painting .content {text-align: center;}

/*이미지 미리보기 */
.img-view {overflow: hidden;}
.img-view img {max-width: 100%; max-height: 100%;}

/* 게시글 스탬프 팝업 */
.board-item .stamp-wrap {width: 240px; top: 0px; right: unset; z-index: 10;}
.board-item .stamp-wrap .stamp-list {gap: 5px;}

/* 보드 그룹형 제목 수정 */
.board-column-header .tit-write-area textarea {padding: 5px 10px; box-sizing: border-box;}
.board-column-header .tit-write-area .btn-cont {text-align: center; margin: 5px 0px 10px;}
.board-column-header .tit-write-area .btn-cont button {width: 60px; height: 30px; color: #fff;}
.board-column.editGroup .board-column-header .tit-write-area {padding: 5px 5px 0;}
.board-column.editGroup .board-column-header .tit-write-area:hover::before {display: none;}

/* 토스트 팝업 */
.toast {position: fixed; top: 50%; left: 50%; padding: 15px 5px; transform: translate(-50%, 0); border-radius: 15px; overflow: hidden; font-size: 12px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s, transform .5s; background: #283b89; color: #fff; z-index: 10000; width: 100%; text-align: center;}
.toast.reveal { opacity: 1; visibility: visible; transform: translate(-50%, -50%)}

.reply-toast {position: absolute; top: 50%; left: 50%; padding: 15px 5px; transform: translate(-50%, 0); border-radius: 15px; overflow: hidden; font-size: 12px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s, transform .5s; background: #283b89; color: #fff; z-index: 10000; width: 100%; text-align: center;}
.reply-toast.reveal { opacity: 1; visibility: visible; transform: translate(-50%, -50%)}

/* 게시글 dimmed */
/* .dimmed::after {width: 100%; height: 100%; background: #000; opacity: 0.5; content: ''; position: absolute; border-radius: 10px; z-index: 0;} */
.board-item .board-item-content.dimmed::after {height: calc(100% - 65px); bottom: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; left: 0; width: 100%; background: #000; opacity: 0.5; content: ''; position: absolute; z-index: 0;}
.reply li.dimmed::after {top: 0; left: 0; border-radius: unset; width: calc(100% - 5px); height: 100%; background: #000; opacity: 0.5; content: ''; position: absolute; border-radius: 10px; z-index: 0;}

/* 이미지 원본보기 팝업 */
.popup.itemImg {max-height: 100%; width: auto;}
.popup.itemImg .img-wrap {width: 100%;}
.popup.itemImg .img-wrap img {width: 100%; max-width: 100%; max-height: 600px;}
.popup.itemImg .btn-pop-close {position: absolute; top: 10px; right: -30px; background: url(../image/ico-x-wh.svg) center/cover no-repeat; width: 20px; height: 20px;}
.popup.itemImg .btn-pop-close.img-pop {right: 20px; background-image: url(../image/ico-x.svg);}
.popup.itemImg .btn-img-close {display: none;}
.popup.itemImg .btn-area {text-align: center; margin-bottom: 20px;}
.popup.itemImg .btn-area .btn {color: #fff; padding: 10px 15px;}

/* 팝업창 알럿,컨펌 */
.dimLayer{display: block;width: 100%;background-color: rgba(0, 0, 0, 0.3);position: fixed;left: 0;top: 0px;margin: 0;padding: 0;z-index: 9998;}
.modal{border-radius: 10px;padding: 50px 40px; box-sizing: border-box; text-align: center; font-family: 'Gmarket Sans';}
.modal.noticeModal {text-align: left; font-family: "Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
.modal-section{background: #ffffff;box-sizing: border-box;position: fixed; top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);display: none;z-index: 9999; width: unset !important; height: unset !important;}
.menu_msg{font-size: 20px;font-weight: 500; margin: 0 0 20px;}
.enroll_btn .btn {width: 90px; color: #fff;height: 36px;line-height: 36px;transition: 0.5s;font-size: 17px; border: none;font-family: 'Gmarket Sans';}

/* 로그아웃 버튼 */
.logout-btn {display: flex; flex-direction: column; font-size: 12px; align-items: center; height: 100%; background: #f2f8ff; justify-content: center; padding:0 20px;}
.logout-btn i {margin-bottom: 5px;}

@media screen and (max-width: 430px) {
	.logout-btn span {display: none;}
	.board-item .header-fnc.allow {top: 99px;}
	.board-item .allow-wrap > div {text-align: right;}
	.header-right {flex-direction: column-reverse; justify-content: center; margin-right: 20px;}
	.nickname {margin-right: 0; margin-top: 15px;}
	.logout-btn {height: unset;}
	.logout-btn i {width: 30px; height: 30px;}
}

@media screen and (max-width: 400px) {
    .enter-wrap .enter-inner .enter-info input {width: 80%;}
    .enter-wrap .enter-inner img {width: 180px; height: 60px; margin-top: 120px;}
    .enter-wrap .enter-inner .enter-info {margin: 0; border: none;}
}

/* 승인 필요 게시글 */
/* .board-item.allow:not(.is-edit):not(.fixed) .item-header::before {top: 77px;} */
.board-item:not(.is-edit):not(.fixed) .item-header.allow::before {top: 77px;}

/* 보드 아이템  */
.board-column.muuri-item-releasing {z-index: 2;}
.board-column.muuri-item-dragging {z-index: 3; cursor: move;}
.board-item.muuri-item-releasing {z-index: 9998;}
.board-item.muuri-item-dragging {z-index: 9999; cursor: move;}
.board-item.muuri-item-hidden {z-index: 0;}

/* 스탬프 리스트 포인터 */
.stamp-list > li a img {cursor: pointer !important;}
.post-expand .stamp-wrap {position: absolute; top: 0;}

/* 댓글 수정시 텍스트 에어리어 */
.board-item-content .item-reply textarea {background: #f2f8ff; margin-top: -10px;}

/* 이미지 업로드 팝업 select 박스 */
.popup.img-upload .search-bar {display: flex; justify-content: space-between;}
.popup.img-upload .search-bar select {border-radius: 10px; height: 100%; padding: 0 10px; width: 33%; background-image: url(../image/arrow-down.svg); background-repeat: no-repeat; background-position: 96% center; cursor: pointer; background-size: 12px 12px; font-size: 15px;}

/* 로딩 */
@keyframes load1 {
    0%{transform:rotateZ(-90deg);-ms-transform:rotateZ(-90deg);}
    80%,100%{transform:rotateZ(270deg);-ms-transform:rotateZ(270deg)}
}
@keyframes load2 {
    0%{transform:rotateZ(-114deg);-ms-transform:rotateZ(-114deg)}
    80%,100%{transform:rotateZ(246deg);-ms-transform:rotateZ(246deg);}
}
@keyframes load3 {
    0%{transform:rotateZ(-138deg);-ms-transform:rotateZ(-138deg);}
    80%,100%{transform:rotateZ(222deg);-ms-transform:rotateZ(222deg);}
}
@keyframes load4 {
    0%{transform:rotateZ(-162deg);-ms-transform:rotateZ(-162deg);}
    80%,100%{transform:rotateZ(198deg);-ms-transform:rotateZ(198deg);}
}
@keyframes load5 {
    0%{transform:rotateZ(-186deg);-ms-transform:rotateZ(-186deg);}
    80%,100%{transform:rotateZ(174deg);-ms-transform:rotateZ(174deg);}
}

#loading {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: none; z-index: 9999; align-items: center; justify-content: center;}
#loading.active {display: flex;}
#loading.list .circle {margin-left: 218px;}
#loading .circle{position:relative;width:85px;height:85px;border-radius:50%;}
#loading .circle div{position:absolute;left:50%;top:50%;margin-left:-42px;margin-top:-7px;width:85px;height:14px; }
#loading .circle div span{position:relative;display:block;width:85px;height:14px;}
#loading .c1{transform:rotate(-90deg);-ms-transform:rotate(-90deg);animation: load1 1500ms cubic-bezier(0.215, 0.610, 0.355, 1) infinite forwards;animation-delay: -500ms;}
#loading .c2{transform:rotate(-114deg);-ms-transform:rotate(-114deg);animation: load2 1500ms cubic-bezier(0.215, 0.610, 0.355, 1) infinite forwards;animation-delay: -400ms;}
#loading .c3{transform:rotate(-138deg);-ms-transform:rotate(-138deg);animation: load3 1500ms cubic-bezier(0.215, 0.610, 0.355, 1) infinite forwards;animation-delay: -300ms;}
#loading .c4{transform:rotate(-162deg);-ms-transform:rotate(-162deg);animation: load4 1500ms cubic-bezier(0.215, 0.610, 0.355, 1) infinite forwards;animation-delay: -200ms;}
#loading .c5{transform:rotate(-186deg);-ms-transform:rotate(-186deg);animation: load5 1500ms cubic-bezier(0.215, 0.610, 0.355, 1) infinite forwards;animation-delay: -100ms;}
#loading .c1 span:before{content:'';position:absolute;left:0;top:0;width:14px;height:14px;background:#fd5b76;border-radius:50%;}
#loading .c2 span:before{content:'';position:absolute;left:0;bottom:0;width:14px;height:14px;background:#ffc657;border-radius:50%;}
#loading .c3 span:before{content:'';position:absolute;left:0;bottom:0;width:14px;height:14px;background:#9ae272;border-radius:50%;}
#loading .c4 span:before{content:'';position:absolute;left:0;bottom:0;width:14px;height:14px;background:#5bdac7;border-radius:50%;}
#loading .c5 span:before{content:'';position:absolute;left:0;bottom:0;width:14px;height:14px;background:#6569df;border-radius:50%;}

/* 유튜브 첨부 시 틀어짐 */
iframe#youtube-video-player {max-width: 100% !important; max-height: 100% !important;}

/* 툴팁 */
.header-btn-wrap {position: relative;}
.tooltip {position: absolute; left: 50%; transform: translateX(-50%); width: 210px; height: 220px; text-align: center; background: url(../image/tooltip-bg.svg) no-repeat; color: #fff; top: 45px; z-index: 10;}
.tooltip-cont {margin-top: 30px;}
.tooltip-cont img {transform: rotate(270deg);}
.tooltip-cont p {font-size: 19px; margin-top: 10px; font-weight: 500;}
.tooltip-cont p span {color: #fffb80;}
.tooltip button {margin-top: 8px;}

@media screen and (max-width: 450px) {
    /* 툴팁 */
    .header-btn-wrap {margin-right: 15px;}
    .tooltip {left: -230px; transform: none; height: 125px; background-position: bottom; top: -45px;}
    .tooltip::after {content: ''; position: absolute; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid #273A88; top: 50%; right: -16px; transform: translateY(-50%); opacity: 0.8;}
    .tooltip-cont {margin-top: 20px;}
}

/* 파일 아이콘 */
.upload-file .file-wrap {display: block; width: 100%; height: 120px; background-image: url(../image/ico-pdf-gr.png); background-repeat: no-repeat; background-position: 50% 30%; background-size: 70px}
.upload-file .file-wrap .file-nm {width: 100%; bottom: 0; position: absolute;}
.file-zip {background-image: url(../image/ico-zip.png) !important;}
.file-word {background-image: url(../image/ico-word.png) !important;}
.file-docx {background-image: url(../image/ico-word.png) !important;}
.file-doc {background-image: url(../image/ico-word.png) !important;}
.file-ppt {background-image: url(../image/ico-ppt.png) !important;}
.file-pptx {background-image: url(../image/ico-ppt.png) !important;}
.file-xlsx {background-image: url(../image/ico-excel.png) !important;}
.file-pdf {background-image: url(../image/ico-pdf.png) !important;}
.file-PDF {background-image: url(../image/ico-pdf.png) !important;}
.file-txt {background-image: url(../image/ico-txt.png) !important;}
.file-hwp {background-image: url(../image/ico-hwp.png) !important;}
.file-mp3 {background-image: url(../image/ico-mp3.png) !important;}

/* 참여자 닉네임 */
.nickname {margin-right: 20px; font-weight: 500;}
.nickname i {vertical-align: text-bottom; margin-right: 5px;}


/* 이미지 다운로드용 페이지 */
.board.show-all {width:auto; height:auto;}
.board.show-all .edit .board-cont-wrap.group-wrap { padding-right:0; }
.board.show-all .board-info-fnc,
.board.show-all .header-fnc {display:none; }
.board.show-all .board-body {height:auto; overflow:visible;}
.board.show-all .tit-bg {background:#faf8f5; display: block; margin-left: -25px; padding-left: 25px; width: 100vw;}
.board.show-all .board-cont {overflow:visible;}
.board.show-all .board-group,
.board.show-all .board-column-content-wrapper {overflow:visible;}
.board.show-all .board-group {display:flex;align-items:stretch;}
.board.show-all .board-cont-wrap,
.board.show-all .board-group,
.board.show-all .board-column,
.board.show-all .board-column-container {height:auto;max-height:inherit;}
.board.show-all .board-group .board-column {position:static;float:left;transform: translateX(0) !important;}
.board.show-all .board-thumb-info .btn-thumb-open:after {box-shadow:none; }
.board.show-all .btn-board-item-add  {box-shadow:none; }
.board.show-all .btn-group-item-add {box-shadow:none; }
.board.show-all .board-header .header-tit {overflow:visible; }
.board.show-all .board-column ~ .board-column {border-left:0; }
.board.show-all .header-tit-btn {display: none;}
.board.show-all .header-right {display: none;}
.board.show-all .btn-setting {display: none;}
.board.show-all .btn-create-small {display: none;}

/* pdf 다운로드용 페이지 */
.pdf_print {width: 100%; height: 100%; padding: 30px 25px; font-family: 'S Core Dream';}
/* 로고 */
.pdf_print .logo-area {width: 100%; padding: 30px 0; border-top: 1px solid #707070; border-bottom: 1px solid #707070; display: flex; justify-content: space-between; align-items: center;}
.pdf_print .logo-area h1 {width: 10%;}
.pdf_print .logo-area h1 img {width: 100%;}
.pdf_print .logo-area .tit {font-size: 50px; letter-spacing: -2px; color: #333; font-weight: 500;}
.pdf_print .logo-area .cont {text-align: right; font-size: 26px;}
/* 제목 */
.pdf_print .page-area {padding: 30px 0; border-bottom: 1px solid #707070;}
.pdf_print .page-area .page-tit {font-size: 50px; font-weight: 900; margin-bottom: 20px;}
.pdf_print .page-area .page-cont {font-size: 26px; font-weight: 500;}
/* 게시글 */
.pdf_print .post-area {width: 100%; margin-top: 50px; position: relative; column-count: 2; column-gap: 50px;}
.pdf_print .post-area::before {content: ''; width: 1px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); top: 0; background-color: #707070;}
.pdf_print .group-tit {font-size: 44px;}
.pdf_print .board-item {min-width: unset; width: unset; max-width: 100%; padding-bottom: 50px; border-bottom: 1px solid #707070; position: relative; margin: 0; height: 100%; break-inside: avoid; margin-bottom: 30px;}
.pdf_print .board-item span {font-family: 'S Core Dream';}
.pdf_print .board-item .item-header::before {display: none;}
.pdf_print .board-item .item-header {margin-bottom: 10px;}
.pdf_print .board-item .item-header:hover {cursor: unset !important;}
.pdf_print .board-item .item-header .user {font-size: 60px; color: #5f84fe; font-weight: 500;}
.pdf_print .board-item .item-header .user i {width: 65px; height: 52px;}
.pdf_print .board-item .item-header .time {font-size: 40px; color: #777; margin-top: 0;}

.pdf_print .board-item .item-body {margin-bottom: 20px;}
.pdf_print .board-item .item-body .txt-area h3 {font-size: 62px; color: #333; font-weight: 500; cursor: unset !important; margin-bottom: 20px;}
.pdf_print .board-item .item-body .txt-area .txt span {font-size: 54px; color: #555; font-weight: 500; cursor: unset;}

.pdf_print .board-item .item-etc .table-area {border-top: unset; margin-bottom: 30px;}
.pdf_print .board-item .table-area + div {border-top: unset;}
.pdf_print .board-item .table-area .left button i, .pdf_print .board-item .table-area .right button i {width: 60px; height: 60px;}
.pdf_print .board-item .item-etc .btn-like.active span {font-size: 56px; margin-left: 10px;}
.pdf_print .board-item .item-etc .btn-like span {font-size: 56px; margin-left: 10px;}
.pdf_print .board-item .table-area .right span {font-size: 56px; font-weight: 500; margin-left: 15px;}
.pdf_print .btn-star .score {height: 50px; background-size: auto 50px;}
.pdf_print .btn-score span {font-size: 40px; margin-left: 10px; font-weight: 500;}
.pdf_print .btn-star-active .score:before {height: 50px; background-size: auto 50px;}
.pdf_print .btn-star .score:before {height: unset;}
.pdf_print .btn-star-active .score:before {height: unset; background: url(../image/ico-star-spot.svg) 0 0 repeat-x;}

.pdf_print .btn-star .score[data-score="0.0000"],
.pdf_print .btn-star .score[data-score="0.1000"],
.pdf_print .btn-star .score[data-score="0.2000"],
.pdf_print .btn-star .score[data-score="0.3000"],
.pdf_print .btn-star .score[data-score="0.4000"],
.pdf_print .btn-star .score[data-score="0.5000"]:before { width:25px; }
.pdf_print .btn-star .score[data-score="0.6000"],
.pdf_print .btn-star .score[data-score="0.7000"],
.pdf_print .btn-star .score[data-score="0.8000"],
.pdf_print .btn-star .score[data-score="0.9000"],
.pdf_print .btn-star .score[data-score="1.0000"]:before { width:50px; }
.pdf_print .btn-star .score[data-score="1.1000"],
.pdf_print .btn-star .score[data-score="1.2000"],
.pdf_print .btn-star .score[data-score="1.3000"],
.pdf_print .btn-star .score[data-score="1.4000"],
.pdf_print .btn-star .score[data-score="1.5000"]:before { width:75px; }
.pdf_print .btn-star .score[data-score="1.6000"],
.pdf_print .btn-star .score[data-score="1.7000"],
.pdf_print .btn-star .score[data-score="1.8000"],
.pdf_print .btn-star .score[data-score="1.9000"],
.pdf_print .btn-star .score[data-score="2.0000"]:before { width:100px; }
.pdf_print .btn-star .score[data-score="2.1000"],
.pdf_print .btn-star .score[data-score="2.2000"],
.pdf_print .btn-star .score[data-score="2.3000"],
.pdf_print .btn-star .score[data-score="2.4000"],
.pdf_print .btn-star .score[data-score="2.5000"]:before { width:125px; }
.pdf_print .btn-star .score[data-score="2.6000"],
.pdf_print .btn-star .score[data-score="2.7000"],
.pdf_print .btn-star .score[data-score="2.8000"],
.pdf_print .btn-star .score[data-score="2.9000"],
.pdf_print .btn-star .score[data-score="3.0000"]:before { width:150px; }
.pdf_print .btn-star .score[data-score="3.1000"],
.pdf_print .btn-star .score[data-score="3.2000"],
.pdf_print .btn-star .score[data-score="3.3000"],
.pdf_print .btn-star .score[data-score="3.4000"],
.pdf_print .btn-star .score[data-score="3.5000"]:before { width:175px; }
.pdf_print .btn-star .score[data-score="3.6000"],
.pdf_print .btn-star .score[data-score="3.7000"],
.pdf_print .btn-star .score[data-score="3.8000"],
.pdf_print .btn-star .score[data-score="3.9000"],
.pdf_print .btn-star .score[data-score="4.0000"]:before { width:200px; }
.pdf_print .btn-star .score[data-score="4.1000"],
.pdf_print .btn-star .score[data-score="4.2000"],
.pdf_print .btn-star .score[data-score="4.3000"],
.pdf_print .btn-star .score[data-score="4.4000"],
.pdf_print .btn-star .score[data-score="4.5000"]:before { width:225px; }
.pdf_print .btn-star .score[data-score="4.6000"],
.pdf_print .btn-star .score[data-score="4.7000"],
.pdf_print .btn-star .score[data-score="4.8000"],
.pdf_print .btn-star .score[data-score="4.9000"],
.pdf_print .btn-star .score[data-score="5.0000"]:before {width: 250px;}
.pdf_print .btn-star .score-num {font-size: 56px;}

.pdf_print .item-reply ul.reply {display: block;}
.pdf_print .item-reply ul.reply li .user {font-size: 58px; color: #333; font-weight: 500; display: inline-block; margin-right: 50px;}
.pdf_print .item-reply ul.reply li span {font-size: 44px; color: #555; font-weight: 500;}
.pdf_print .item-reply ul.reply .ico-dia {width: 58px; height: 48px;}
.pdf_print .item-reply .reply > li {border-bottom: none;}
.pdf_print .item-reply .txt {width: 50%; display: inline-block; vertical-align: top; margin-top: 0px; white-space: unset;}

@media print {
    body {-webkit-print-color-adjust: exact;}

    /* 로고 */
    .pdf_print .logo-area {padding: 20px 0;}
    .pdf_print .logo-area h1 {width: 10%}
	.pdf_print .logo-area .tit {font-size: 22px; letter-spacing: -2px; color: #333; font-weight: 500;}
	.pdf_print .logo-area .cont {text-align: right; font-size: 18px;}

    /* 페이지 */
    .pdf_print .page-area {padding: 20px 0;}
    .pdf_print .page-area .page-tit {font-size: 26px; margin-bottom: 10px;}
    .pdf_print .page-area .page-cont {font-size: 18px;}

    /* 게시글 */
    .pdf_print .post-area {margin-top: 20px;}
    .pdf_print .group-tit {font-size: 22px;}
    .pdf_print .board-item {padding-bottom: 0px; margin-bottom: 20px;}
    .pdf_print .board-item .item-header {margin-bottom: 0px; padding-top: 0;}
    .pdf_print .board-item .item-header .user {font-size: 20px;}
    .pdf_print .board-item .item-header .user i {width: 25px; height: 18px;}
    .pdf_print .board-item .item-header .time {font-size: 16px;}

    .pdf_print .board-item .item-body {margin-bottom: 0px;}
    .pdf_print .board-item .item-body .txt-area h3 {font-size: 20px; margin-bottom: 0px;}
    .pdf_print .board-item .item-body .txt-area .txt span {font-size: 18px;}

    .pdf_print .board-item .item-etc .table-area {margin-bottom: 0px;}
    .pdf_print .board-item .table-area .left button i, .pdf_print .board-item .table-area .right button i {width: 20px; height: 20px;}
    .pdf_print .board-item .item-etc .btn-like.active span {font-size: 18px;}
    .pdf_print .board-item .item-etc .btn-like span {font-size: 18px;}
    .pdf_print .board-item .table-area .right span {font-size: 18px;}
    .pdf_print .btn-star .score {height: 18px; background-size: auto 20px;}
    .pdf_print .btn-score span {font-size: 20px;}
    .pdf_print .btn-star-active .score:before {height: 18px; background-size: auto 20px;}
    .pdf_print .btn-star .score:before {height: unset;}
    .pdf_print .btn-star-active .score:before {height: unset; background: url(../image/ico-star-spot.svg) 0 0 repeat-x;}

    .pdf_print .btn-star .score[data-score="0.0000"],
    .pdf_print .btn-star .score[data-score="0.1000"],
    .pdf_print .btn-star .score[data-score="0.2000"],
    .pdf_print .btn-star .score[data-score="0.3000"],
    .pdf_print .btn-star .score[data-score="0.4000"],
    .pdf_print .btn-star .score[data-score="0.5000"]:before { width:10px; }
    .pdf_print .btn-star .score[data-score="0.6000"],
    .pdf_print .btn-star .score[data-score="0.7000"],
    .pdf_print .btn-star .score[data-score="0.8000"],
    .pdf_print .btn-star .score[data-score="0.9000"],
    .pdf_print .btn-star .score[data-score="1.0000"]:before { width:20px; }
    .pdf_print .btn-star .score[data-score="1.1000"],
    .pdf_print .btn-star .score[data-score="1.2000"],
    .pdf_print .btn-star .score[data-score="1.3000"],
    .pdf_print .btn-star .score[data-score="1.4000"],
    .pdf_print .btn-star .score[data-score="1.5000"]:before { width:30px; }
    .pdf_print .btn-star .score[data-score="1.6000"],
    .pdf_print .btn-star .score[data-score="1.7000"],
    .pdf_print .btn-star .score[data-score="1.8000"],
    .pdf_print .btn-star .score[data-score="1.9000"],
    .pdf_print .btn-star .score[data-score="2.0000"]:before { width:40px; }
    .pdf_print .btn-star .score[data-score="2.1000"],
    .pdf_print .btn-star .score[data-score="2.2000"],
    .pdf_print .btn-star .score[data-score="2.3000"],
    .pdf_print .btn-star .score[data-score="2.4000"],
    .pdf_print .btn-star .score[data-score="2.5000"]:before { width:50px; }
    .pdf_print .btn-star .score[data-score="2.6000"],
    .pdf_print .btn-star .score[data-score="2.7000"],
    .pdf_print .btn-star .score[data-score="2.8000"],
    .pdf_print .btn-star .score[data-score="2.9000"],
    .pdf_print .btn-star .score[data-score="3.0000"]:before { width:60px; }
    .pdf_print .btn-star .score[data-score="3.1000"],
    .pdf_print .btn-star .score[data-score="3.2000"],
    .pdf_print .btn-star .score[data-score="3.3000"],
    .pdf_print .btn-star .score[data-score="3.4000"],
    .pdf_print .btn-star .score[data-score="3.5000"]:before { width:70px; }
    .pdf_print .btn-star .score[data-score="3.6000"],
    .pdf_print .btn-star .score[data-score="3.7000"],
    .pdf_print .btn-star .score[data-score="3.8000"],
    .pdf_print .btn-star .score[data-score="3.9000"],
    .pdf_print .btn-star .score[data-score="4.0000"]:before { width:80px; }
    .pdf_print .btn-star .score[data-score="4.1000"],
    .pdf_print .btn-star .score[data-score="4.2000"],
    .pdf_print .btn-star .score[data-score="4.3000"],
    .pdf_print .btn-star .score[data-score="4.4000"],
    .pdf_print .btn-star .score[data-score="4.5000"]:before { width:90px; }
    .pdf_print .btn-star .score[data-score="4.6000"],
    .pdf_print .btn-star .score[data-score="4.7000"],
    .pdf_print .btn-star .score[data-score="4.8000"],
    .pdf_print .btn-star .score[data-score="4.9000"],
    .pdf_print .btn-star .score[data-score="5.0000"]:before {width: 100px;}
    .pdf_print .btn-star .score-num {font-size: 20px;}

    .pdf_print .item-reply ul.reply {display: block;}
    .pdf_print .item-reply ul.reply li .user {font-size: 20px; margin-right: 20px;}
    .pdf_print .item-reply ul.reply .ico-dia {width: 20px; height: 20px;}
    .pdf_print .item-reply ul.reply li span {font-size: 16px;}
    .pdf_print .item-reply .reply > li {border-bottom: none;}
    .pdf_print .item-reply .txt {width: 30%; display: inline-block; vertical-align: top; margin-top: 0px; white-space: unset;}
}

/* 참여자 드래그 커서, 아이콘 제거 */
.board-column.entr .board-column-header .tit-write-area {cursor: unset;}
.board-column.entr .board-column-header .tit-write-area::before {display:none;}
.board-item.entr .item-header::before {display: none;}
.board-item.entr .item-header:hover {cursor: unset !important;}
.board-column-header .tit-write-area.post-form {cursor: unset;}
.board-column.editGroup .board-column-header .tit-write-area {cursor: unset;}

/* 보드 생성 영역 */
@media screen and (max-width: 430px) {
    .board-cont-wrap.group-wrap {overflow-y: hidden;}
	.board-cont.editor {position: fixed; width: 100% !important; height: 100% !important; top:0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 30; max-width: 100% !important; max-height: 100%;}
	.board-cont.editor .board-cont-wrap {position: unset; overflow: hidden; width: 100% !important; height: 100% !important; padding: 0px !important;}
	.board-cont.editor .board-group {position: unset; overflow: hidden; width: 100% !important; height: 100% !important;}
	.board-cont.editor .board-column {transform: none !important; z-index: unset !important; -webkit-transform: none !important; width: 100% !important; max-width: 100% !important; position: unset; overflow: hidden; width: 100% !important; height: 100% !important;}
	.board-cont.editor .board-column:not(.is-edit) {display: none;}
    .board-cont.editor .board-group .board-column, .board-cont.editor .board-group .board-column ~ .board-column {border: none;}
    .board-cont.editor .board-group-fnc {display: none;}
	.board-column.is-edit {transform: none !important; z-index: unset !important; -webkit-transform: none !important; width: 100% !important; max-width: 100% !important; position: unset; overflow: hidden; width: 100% !important; height: 100% !important;}
	.board-column.is-edit .board-column-container {transform: none !important; z-index: unset !important; -webkit-transform: none !important; opacity: unset !important; position: unset; overflow: hidden; width: 100% !important; height: 100% !important;}
	.board-column.is-edit .board-column-content-wrapper {overflow: hidden; z-index: unset; position: unset; overflow: hidden; width: 100% !important; height: 100% !important;}

/* 	.board-cont.editor .board-cont-wrap {overflow: hidden !important; height: 100%; width: 100%;} */
	.board-column.is-edit .board-column-content {height: 100% !important; overflow: hidden; max-height: 100%; position: unset; width: 100% !important;}

    .board-item.is-edit {position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; width: 100% !important; min-width: 100%; max-width: 100%; z-index: 90; padding: 0; box-sizing: border-box; transform: none !important; border: none; overflow: hidden; margin-left: 0; margin-right: 0; height: 100% !important; max-height: 100%; min-height: 100%;}
	.board-item.is-edit	.board-item-content {height: 100% !important; border-radius: unset; box-shadow: unset; overflow: hidden; position: fixed; width: 100%;}
	.board-item.is-edit .btn-cont {position: fixed; bottom: 0; left: 0; width: 100%; padding: unset; display: flex; overflow:hidden;}
    .board-item.is-edit .btn-cont button {width: 50%; border-radius: unset; height: 60px; font-size: 18px; font-family: 'S Core Dream';}
	.board-item.is-edit .board-item-content .btn-color {display: none;}
	.board-item.is-edit .board-item-content .btn-move {display: none;}
	.board-item.is-edit .board-item-content .item-bg-color-area {display: flex; position: relative; background: unset; box-shadow: unset; padding: unset; margin-bottom: 20px; gap: 0 10px;}
    .board-item.is-edit .board-item-content .item-bg-color-area li button {width: 45px; height: 45px;}
    .board-item.is-edit .mob-header {display: block;height: 70px; background: #626272; position: relative; padding: 0 30px; line-height: 70px;}
    .board-item.is-edit .mob-header h1 {text-align: center; color: #fff; font-weight: 500; font-size: 24px; line-height: 70px;}
    .board-item.is-edit .item-fnc {justify-content: space-between;}
    .board-item.is-edit .item-fnc button {width: 40px; height: 40px;}

    .board-thumb-area {padding: 0 50px;}
    .board-thumb-area.active {top: 150px;}
    .board-thumb-area .thumb-list {width: 100%;}
    .board-thumb-area .btn-thumb-close {display: none;}
    .board-thumb-area .thumb-list {margin: 0;}
    .board-thumb-area .thumb-list::-webkit-scrollbar{display: none;}
    .board-item .header-fnc .item-hide-notice {width: 170px; right: -3px;}
}

.item-wrap {overflow: auto; height: 100%;}
@media screen and (max-width: 430px) {
   .item-wrap {padding-bottom: 140px;}
}

.board-item-content textarea.tit:read-only {background: #f5f5f5;}
.board-item-content .item-body textarea:read-only {background: #f5f5f5;}


/* 비바클래스 공유하기 팝업 */
.share_pop {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; width: 440px; border: 0;z-index: 9999;}
.share_pop .popup_head {position: relative; padding: 0 0 0 33px; background: #4d8bef;}
.share_pop .popup_head p {font-size: 22px; font-weight: 500; color: #fff; line-height: 67px; letter-spacing: -0.05em;}
.share_pop .popup_head .popup_close {display: inline-block; position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; font-size: 0;}

.share_pop .popup_body {padding: 35px 93px 37px 93px; background: #eef5f8;}
.share_pop .popup_body strong {display: block; font-size: 18px; font-weight: 600; color: #333333; letter-spacing: -0.05em;}
.share_pop .popup_body .share_box.qr {display: flex; justify-content: center; align-items: center; width: 250px; height: 250px; margin-top: 13px; background: #fff; border: 2px solid #ededed; border-radius: 20px; overflow: hidden;}
.share_pop .popup_body .share_box.qr .qr_wrap {position: relative; width: 100%;}
.share_pop .popup_body .share_box.qr .qr_wrap img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 130%;}
.share_pop .popup_body .share_box.copy {margin-top: 18px; text-align: center; }
.share_pop .popup_body .share_box.copy p {font-size: 16px; font-weight: 400; color: #333333; letter-spacing: -0.05em;  text-align: center;}
.share_pop .popup_body .share_box.copy .pop_btn_share {display: inline-block; width: 140px; padding-left: 57px; margin-top: 8px;  font-size: 16px; font-weight: 400; color: #fff; line-height: 40px; letter-spacing: -0.05em; text-align: left; background: #4d8bef url('../..../images/teachware/ico_share.png') no-repeat left 25px center; border: 1px solid #3374dc; border-radius: 4px; box-sizing: border-box;}
.share_pop .popup_body .share_box.copy span {display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 400; color: #e76557; letter-spacing: -0.04em; opacity: 0;}
.share_pop .popup_body .share_box.copy span.on {opacity: 1;}

/* 비바샘 공유하기 */
.share_pop.type2{width:651px;}
.share_pop.type2 .popup_body{display:flex;}
.share_pop.type2 .popup_body{padding:37px 50px 41px 50px;}
.share_pop.type2 .popupQr{position:relative;padding-right:50px;}
.share_pop.type2 .popupQr:after{content:"";display:block;width:1px;height:93%;position:absolute;top:10px;right:0;border-left:1px solid #ced8e1;}
.share_pop.type2 .popupUrlBtn{padding-left:50px;}
.share_pop.type2 .popupUrlBtn ul{margin-top:13px;}
.share_pop.type2 .popupUrlBtn ul li+li{margin-top:17px;}
.share_pop.type2 .popupUrlBtn ul li[class^="url0"] a{font-size:15px;font-weight:400;display:block;color:#333;}
.share_pop.type2 .popupUrlBtn ul li[class^="url0"] a:before{content:"";display:inline-flex;align-items:center;background:url("../images/teachware/ico_url_share.png") no-repeat center 0;width:70px;height:70px;margin-right:27px;}
.share_pop.type2 .popupUrlBtn ul li.url02 a:before{background-position-y:-86px}
.share_pop.type2 .popupUrlBtn ul li.url03 a:before{background-position-y:-171px}
.share_pop.type2 .popupUrlBtn p{margin-top:26px;line-height:16px;padding-left:8px;position:relative; }
.share_pop.type2 .popupUrlBtn p:before{content:"*"; display:inline-block;vertical-align:top;font-size:14px;position:absolute;top:0;left:0;height:32px;}

/*비바샘 공유하기 - 비바클래스*/
.break_drop.ui-select-parent {width: 164px;height: 44px;text-align: left;}
.share_pop.vivaclass{width:600px;display:none; z-index: 9999;}
.share_pop.vivaclass#adminViva.on, .share_pop.vivaclass#noneadminViva.on{display:block;}
.share_pop.vivaclass .popup_head{height:82px;padding:20px 30px 0 30px;background-color:#fff;text-align:center; border-top-left-radius: 30px; border-top-right-radius: 30px;}
.share_pop.vivaclass .popup_head h1 {font-size: 26px; font-weight: 600;}
.share_pop.vivaclass .popup_head h1 span {color: #2C44AE !important; font-weight: 600;}
.share_pop.vivaclass .popup_head h1 br {display: none;}
.share_pop.vivaclass .popup_head:after{content:"";display:block;width:100%;border-bottom:1px solid #000;padding-bottom:20px;}
.share_pop.vivaclass .popup_head .popup_close{background:url('../image/ico_pop_close2.png') no-repeat center;}
.share_pop.vivaclass .popup_body{background-color:#fff;padding:40px 27px 41px 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
.share_pop.vivaclass .popup_body p{text-align:center;line-height:28px;font-size:16px;color:#000;}
.share_pop.vivaclass .popup_body p strong{font-size:20px;font-weight:500;color:#000;}
.share_pop.vivaclass .popup_body .formWrap{text-align:center;}
.share_pop.vivaclass .popup_body .formCont{height:46px;margin:36px 0 41px;}
.share_pop.vivaclass .popup_body .btnWrap{text-align:center;}
.share_pop.vivaclass .popup_body .btnWrap a{background-color:#2d57b6;color:#fff;display:inline-flex;width:213px;height:58px;font-size:18px;border-radius:28px;align-items:center;justify-content:center;}
.share_pop.vivaclass#noneadminViva .popup_body p{padding:20px 0 60px;}

.share_pop.vivaclass .popup_body .formCont .break_drop.ui-select-parent.sel1{width:295px;height:46px;margin-right:8px;}
.share_pop.vivaclass .popup_body .formCont .break_drop.ui-select-parent.sel2{width:236px;height:46px;}
.share_pop.vivaclass .popup_body .formCont .break_drop .select2-container .select2-selection--single{height:44px !important;border:1px solid #949494;border-radius:5px;}
.share_pop.vivaclass .popup_body .formCont .break_drop .select2-container--default .select2-selection--single .select2-selection__rendered{height:44px;line-height:41px;font-size:16px;color:#424a58;}
.share_pop.vivaclass .popup_body .formCont .break_drop .select2-selection--single .select2-selection__arrow,#themePopupWrap .share_pop.vivaclass .popup_body .formCont .break_drop .select2-selection--single .select2-selection__arrow b{height:44px;}
.share_pop.vivaclass .popup_body .formCont .break_drop .select2-selection--single .select2-selection__arrow b{top:-2px;}
.share_pop.vivaclass .popup_body .formCont .break_drop .select2-container--default .select2-results__option.select2-results__option--selectable.select2-results__option--selected{font-size:16px;}

.select2-container {vertical-align: top !important;width:100%!important;}
.select2-container .select2-selection--single {border: 1px solid #ceced3;border-radius: 10px;height: 46px !important;}
.select2-container--open .select2-selection--single{background-color:#f1f1f1;border-bottom:none;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {position: absolute;right: 16px !important;top: -4px;width: 7px;height: 39px;background: url('https://v.vivasam.com/images/educourse/ic_select.png') no-repeat center top;border-style: none !important;left: inherit !important;margin-left: inherit !important;margin-top: inherit !important;top: -4px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {position: relative;font-size: 16px;font-weight: 400;color: #9fa1a5;line-height: 42px;height: 42px;padding: 0 30px 0 17px;letter-spacing: -0.2px;}
.select2-container--default .select2-selection--single .select2-selection__placeholder{font-size:16px;}
.select2-results__option {display: block !important;font-size: 16px;letter-spacing: -0.04em;color: #9fa1a5;line-height: 39px;width: 100%;background: #fff;padding: 0 16px 0 17px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}
.select2-container--open .select2-selection--single .select2-selection__rendered{color:#393d49;}
.select2-results__option.select2-results__option--selectable.select2-results__option--selected{color:#393d49;}
.select2-container--default .select2-results__option.select2-results__option--selectable.select2-results__option--selected{color:#393d49;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{color: #ff8125;}
.select2-results__option--selected, .select2-results__option:hover, .select2-results__option--highlighted {background: #f1f1f1!important;color: #9fa1a5;}
.select2-dropdown {padding-bottom: 0px;border: 1px solid #ceced3;border-top: transparent;border-radius: 0 0 10px 10px;width: 100%;background: #fff;overflow: hidden;z-index: 1;}
.select2-results__options {border: none;}
.select2-container *:focus {outline: none;}
span.ui-select-parent *{box-sizing: border-box;}
.select2-container--default .select2-results>.select2-results__options{max-height:168px;padding-bottom:10px;}
.ui-select-parent { position: relative;display:inline-block;}
.ui-select-parent.wp200{width:200px;}
.ui-select-parent.textbook{position: absolute; right: 0; bottom: 0px; width:230px;}


@media screen and (max-width: 600px) {
   .share_pop.vivaclass {width: 100%; height: 100%; overflow: hidden;}
   .share_pop.vivaclass .popup_head {border-radius: 0;}
   .share_pop.vivaclass .popup_body {height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0px 27px 0px 30px; border-radius: 0;}
   .share_pop.vivaclass .popup_body .btnWrap {width: 100%; position: fixed; left: 0; bottom: 0;}
   .share_pop.vivaclass .popup_body .btnWrap a {width: 100%; border-radius: 0px;}
   .share_pop.vivaclass .popup_body .formCont {height: unset;}
   .share_pop.vivaclass .popup_body .formCont .break_drop.ui-select-parent.sel1 {width: 95%; margin-right: 0; margin-bottom: 10px;}
   .share_pop.vivaclass .popup_body .formCont .break_drop.ui-select-parent.sel2 {width: 95%;}
   .share_pop .popup_head .popup_close {right: 22px; width: 20px; height: 20px;}
}

@media screen and (max-width: 480px) {
	.share_pop.vivaclass .popup_head h1 br {display: block;}
	.share_pop .popup_head .popup_close {right: 18px; width: 18px; height: 18px;}
}