@charset "utf-8";


/* =========================================================
   Portfolio List
========================================================= */

.portAdminBar{display:flex;align-items:center;justify-content:space-between;gap:3px;margin:0 0 clamp(18px,2vw,28px);padding: 15px 30px;border:1px solid rgba(255,255,255,.14);background: rgb(151 37 209);backdrop-filter:blur(10px);color:#fff;position: fixed;bottom: -7px;z-index: 100;left: 80px;;border-radius: 999px;}

.portAdminBar {}

.portAdminLeft,
.portAdminRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.portAdminBar .all_chk{margin:0;}
.portAdminBar .all_chk label{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.78);cursor:pointer;}

.portAdminBtn,
.portWriteBtn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.18);background: rgb(255 255 255 / 32%);color:#fff;font-size:12px;line-height:1;text-decoration:none;cursor:pointer;transition:.25s ease;border-radius: 999px;margin-left: 2px;}
.portAdminBtn:hover,.portWriteBtn:hover{background:#ff533f;border-color:#ff533f;color:#fff;}
.portAdminBtn.is-danger:hover{background:#d9362a;border-color:#d9362a;}
.portAdminBtn.is-order{color:#ff533f;border-color:rgba(255,83,63,.45);}
.portAdminHint{font-size:12px;color:rgba(255,255,255,.42);}
.portAdminCheck{margin-right: 10px;}
.portAdminCheck input[type="checkbox" i] {margin-right: 5px;}

.portCard{position:relative;}
.portCard .selec_chk{position:absolute;z-index:15;left:14px;top:14px;width:18px;height:18px;}
.portCardCheck{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;}
.portCardCheck input{position:absolute;opacity:0;pointer-events:none;}
.portCardCheck span{display:block;width:18px;height:18px;border:1px solid rgba(255,255,255,.85);background:#fff;box-shadow:0 0 10px rgba(255,255,255,.28);transition:.2s ease;}
.portCardCheck input:checked + span{border-color:#ff533f;background:#ff533f;box-shadow:0 0 0 2px rgba(255,83,63,.22);}

.portCardAdmin{position:absolute;z-index:20;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);opacity:1;transform:none;pointer-events:auto;}
.portAdminMainSet{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;}
.portAdminDeleteSet,
.portAdminOrderSet{display:flex;align-items:center;gap:8px;min-width:0;}
.portAdminEditSet{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:0 0 auto;}
.portAdminTitle{min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:13px;font-weight:700;line-height:1.2;}

.portCardTools{display:flex;align-items:center;gap:6px;}

.portCardTool,
.portCardAdmin a,
.portCardAdmin button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:11px;text-decoration:none;cursor:pointer;transition:.2s ease;}

.portCardTool:hover,
.portCardAdmin a:hover,
.portCardAdmin button:hover{background:#ff533f;border-color:#ff533f;color:#fff;}


.portOrderField{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.72);font-size:11px;white-space:nowrap;}
.portOrderField span{font-size:11px;}
.portOrderField input{width:58px;height:28px;padding:0 8px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.5);color:#fff;font-size:12px;text-align:center;}

.mainSwitchWrap{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78);font-size:11px;white-space:nowrap;cursor:pointer;user-select:none;}
.mainSwitchWrap input{position:absolute;opacity:0;pointer-events:none;}
.mainSwitchText{font-size:11px;font-weight:700;}
.switch-slider{position:relative;display:inline-block;width:38px;height:20px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.16);transition:.2s ease;}
.switch-slider::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s ease;}
.mainSwitchWrap input:checked + .switch-slider{border-color:#ff533f;background:#ff533f;}
.mainSwitchWrap input:checked + .switch-slider::before{transform:translateX(18px);}
.mainSwitchWrap input:disabled + .switch-slider{opacity:.55;cursor:wait;}

.portSearchOpen{display:inline-flex;align-items:center;height:40px;padding:0;border:0;background:transparent;color:#111;font-size:13px;
	font-weight:900;letter-spacing:.12em;cursor:pointer;position:fixed;z-index:100;top: 80px;right: 0;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;
	transition:opacity .28s ease, transform .28s ease, color .25s ease;visibility .28s ease;flex-direction: column;background: rgb(255 255 255 / 72%);backdrop-filter: blur(16px);
	border-radius: 10px;width: 100px;height: 70px;justify-content: center;}
.portSearchOpen.is-show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:border-color .25s ease,color .25s ease,background-color .25s ease,transform .25s ease;}
.portSearchOpen i{display: inline-flex;justify-content: center;border-radius: 50%;font-style: normal;font-size: 27px;}
.portSearchOpen:hover{color:#ff533f;}
.portSearchOpen:hover i{border-color:#ff533f;color:#ff533f;}
.portSearchOpen span,
.portSearchOpen i{background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 10s infinite linear;}
.portSearchLayer{position:fixed;inset:0;z-index:9999;display:none;}
.portSearchLayer.is-open{display:block;}
.portSearchDim{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(12px);}
.portSearchModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px, calc(100% - 40px));padding:54px 46px;background:#fff;color:#111;box-shadow:0 30px 100px rgba(0,0,0,.28);border-radius: 2em;}
.portSearchClose{position:absolute;right:22px;top:20px;width:42px;height:42px;border:1px solid #ddd;background:#fff;color:#111;font-size:28px;line-height:1;cursor:pointer;}
.portSearchLabel{margin:0 0 10px;color:#ff533f;font-size:13px;font-weight:900;letter-spacing:.14em;text-align: left;}
.portSearchTitle{margin:0 0 34px;font-size: 36px;line-height:.9;letter-spacing:-.07em;font-weight:900;text-align: left;}
.portSearchField{display:flex;align-items:center;gap:14px;}
.portSearchField input{flex:1;height:48px;border:0;border-bottom:2px solid #111;background:transparent;color:#111;font-size:24px;font-weight:700;outline:none;padding: 0 15px;}
.portSearchField input::placeholder{color:#aaa;}
.portSearchSubmit{flex:0 0 auto;height:48px;padding:0 22px;border:0;background:#111;color:#fff;font-size:13px;font-weight:800;cursor:pointer;}
.portSearchGuide{margin:18px 0 0;color:#777;font-size:14px;}

@-webkit-keyframes hue {
	from {-webkit-filter: hue-rotate(0deg);}
	to {-webkit-filter: hue-rotate(-360deg);}
}

/* Pagination */
.pg_wrap{display:flex;justify-content:center;margin-top: 10em;}
.pg{display:flex;align-items:center;justify-content:center;gap:8px;}
.pg_page,
.pg_current{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid #ddd;border-radius:999px;background:#fff;color:#111;font-size:13px;font-weight:800;line-height:1;text-decoration:none;transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;}
.pg_current{border-color:#111;background:#111;color:#fff;}
.pg_page:hover{border-color:#ff533f;background:#ff533f;color:#fff;transform:translateY(-2px);}
.pg_start,.pg_prev,
.pg_next,.pg_end{padding:0 18px;}.pg_wrap .sound_only{position: absolute !important;overflow: hidden !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;clip: rect(0, 0, 0, 0) !important;clip-path: inset(50%) !important;white-space: nowrap !important;border: 0 !important;}

@media(max-width:768px){
	.pg_wrap{margin:48px 0 0;}
	.pg{gap:6px;flex-wrap:wrap;}
	.pg_page,.pg_current{min-width:38px;height:38px;padding:0 12px;font-size:12px;}
}


@media (max-width:768px){
	.portAdminBar{flex-direction:column;align-items:flex-start;}
	.portAdminLeft,.portAdminRight,.portAdminDeleteSet,.portAdminEditSet,.portAdminOrderSet{width:100%;}
	.portAdminEditSet{align-items:flex-start;}
	.portAdminTitle{max-width:calc(100vw - 190px);}
	.portAdminBtn,.portWriteBtn{height:32px;padding:0 10px;}
	.portAdminHint{display:none;}
	.portCardAdmin{flex-wrap:wrap;}

	.portSearchModal{padding:40px 24px;border-radius: 1em;}
	.portSearchField{flex-direction:column;align-items:stretch;}
	.portSearchField input{width:100%;padding: 0.8em;font-size: 18px;font-weight: 500;}
	.portSearchSubmit{width:100%;}
	.portSearchTitle {font-size: 24px;letter-spacing: -.025em;font-weight: 700;}
}

@media (max-width:640px){
	.portSearchModal{top: 35%;}
}

.board-btn-wrap {position: fixed;right: 25px;top: 12%;z-index: 100;}
.board-btn-wrap li a {width: 132px;height: 54px;border: 1px solid rgba(255,255,255,.18);border-radius: 999px;background: rgba(15,15,15,.72);backdrop-filter: blur(16px);color: #fff;font-size: 13px;font-weight: 700;letter-spacing: .08em;cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 5px;}



/* =========================================================
   Portfolio Write
========================================================= */

#bo_w{width:min(1080px, calc(100% - 40px));margin: 0 auto;padding:0;color:#111;font-family:inherit;}
#bo_w h2{font-size: 3em;font-weight: 700;text-align: center;margin-bottom: 1em;border-bottom: 3px solid #000;padding-bottom: 0.5em;}
#bo_w *,
#bo_w *::before,#bo_w *::after{box-sizing:border-box;}
#bo_w form{width:100% !important;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px;}
#bo_w .write_div{margin: 0 0 7px;width: 100%;}
#bo_w .write_div label{text-align: right;display: flex;justify-content: space-between;font-size: 18px;align-items: center;height: 30px;}
.sound_only strong{font-size: 14px;color: #ff5841;}
#bo_w .bo_w_info{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px;}
#bo_w .bo_w_tit{/* margin-bottom:14px; */}
#bo_w .frm_input,
#bo_w select,
#bo_w textarea{width:100%;min-height:54px;padding:0 18px;border:1px solid #ddd;background:#fff;color:#111;font-size:15px;line-height:1.45;border-radius:0;outline:none;transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
#bo_w textarea{min-height:180px;padding:16px 18px;resize:vertical;}
#bo_w .frm_input::placeholder,
#bo_w textarea::placeholder{color:#999;}
#bo_w .frm_input:focus,
#bo_w select:focus,
#bo_w textarea:focus{border-color:#ff533f;box-shadow:0 0 0 3px rgba(255,83,63,.12);}
#bo_w select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:linear-gradient(45deg, transparent 50%, #777 50%),linear-gradient(135deg, #777 50%, transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px, 6px 6px;background-repeat:no-repeat;}
#bo_w .half_input,
#bo_w .full_input{width:100%;}
.bo_w_tit label{font-size: 18px;margin-bottom: 7px;display: block;}
#bo_w .bo_w_link{display:none !important;}


/* editor */
#bo_w .wr_content{padding:18px;border:1px solid #e5e5e5;background:#fafafa;}
#bo_w .wr_content textarea{min-height:120px;border:1px solid #ddd;background:#fff;}
#char_count_desc{margin:0 0 10px;color:#777;font-size:13px;}
#char_count_wrap{margin-top:10px;color:#777;font-size:13px;text-align:right;}

#autosave_wrapper{position:relative;}

#btn_autosave,
#bo_w .btn_frmline{position:absolute;right:10px;top:50%;transform:translateY(-50%);height:34px;padding:0 12px;border:1px solid #ddd;background:#fff;color:#555;font-size:12px;cursor:pointer;}

#btn_autosave:hover,
#bo_w .btn_frmline:hover{border-color:#ff533f;background:#ff533f;color:#fff;}
#autosave_pop{display:none;position:absolute;z-index:50;right:0;top:calc(100% + 8px);width:320px;padding:18px;border:1px solid #ddd;background:#fff;color:#111;box-shadow:0 20px 60px rgba(0,0,0,.14);}
#autosave_pop strong{display:block;margin-bottom:10px;font-size:14px;}
#autosave_pop ul{margin:0;padding:0;list-style:none;}
#autosave_pop li{padding:8px 0;border-top:1px solid #eee;font-size:13px;}
#autosave_pop .autosave_close{margin-top:12px;height:32px;padding:0 12px;border:1px solid #ddd;background:#fff;color:#111;cursor:pointer;}
#autosave_pop .autosave_close:hover{border-color:#111;}
/* file upload */
#bo_w .bo_w_flie{display:grid;gap:10px;padding:18px;border:1px solid #e5e5e5;background:#fafafa;}
#bo_w .file_wr{display:flex;align-items:center;gap:10px;margin:0;}
#bo_w .lb_icon{display:inline-flex;align-items:center;justify-content:center !important;flex: 0 0 70px;width: 70px;height:42px;border:1px solid #ddd;background:#fff;color:#ff533f;}
.lb_icon span{font-size: 13px;}
#bo_w .frm_file{width:100%;color:#555;font-size:13px;position: absolute;}
#bo_w .frm_file::file-selector-button{height:38px;margin-right:12px;padding:0 16px;border:0;background:#ff533f;color:#fff;cursor:pointer;}
#bo_w .file_del{display: flex;margin-top:4px;color:#666;font-size:13px;align-items: center;}
#bo_w .file_del input{margin-right: 13px;margin-top: -1px;}
#bo_w .file_del label{font-size: 15px;}
/* link */
#bo_w .bo_w_link{display:flex;align-items:center;gap:10px;}
#bo_w .bo_w_link label{display:inline-flex;align-items:center;justify-content:center;flex: 0 0 70px;width: 70px;height:42px;border:1px solid #ddd;background:#fff;color:#ff533f;}
/* checkbox options */
#bo_w .chk_box{display:inline-flex;align-items:center;gap:6px;margin-right:12px;color:#555;font-size:13px;}
#bo_w .chk_box input{width:16px;height:16px;}
/* captcha */
#bo_w #captcha{padding:18px;border:1px solid #e5e5e5;background:#fafafa;}
/* buttons */
#bo_w .btn_confirm{display:flex;align-items:center;justify-content: flex-start;gap:10px;margin-top:40px;position: fixed;bottom: 2vh;width: 100%;left: 81vw;}
#bo_w .btn{display:inline-flex;align-items:center;justify-content:center;min-width:130px;height:46px;padding:0 24px;border:1px solid #ddd;background:#fff;color:#111;font-size:14px;line-height:1;text-decoration:none;cursor:pointer;transition:.2s ease;}
#bo_w .btn_cancel:hover{border-color:#111;background:#111;color:#fff;}
#bo_w .btn_submit{border-color:#ff533f;background:#ff533f;color:#fff;}
#bo_w .btn_submit:hover{border-color:#e94635;background:#e94635;}

/* mobile */
@media (max-width:768px){
	#bo_w{width:calc(100% - 28px);margin:60px auto 80px;}
	#bo_w .bo_w_info{grid-template-columns:1fr;}
	#bo_w .frm_input,#bo_w select,#bo_w textarea{min-height:50px;padding:0 14px;font-size:14px;}
	#bo_w textarea{padding:14px;}
	#btn_autosave,#bo_w .btn_frmline{position:static;transform:none;width:100%;margin-top:8px;}
	#autosave_pop{width:100%;}
	#bo_w .file_wr,#bo_w .bo_w_link{align-items:flex-start;}
	#bo_w .btn_confirm{flex-direction:column-reverse;}
	#bo_w .btn{width:100%;}
}


.viewAdminBar{display: flex;align-items: center;gap: 8px;flex-wrap: wrap;margin: 18px 0 0;justify-content: flex-end;position: fixed;bottom: 40px;left: 92px;z-index: 100;}
.viewAdminBtn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.28);backdrop-filter:blur(8px);color:#fff;font-size:12px;line-height:1;text-decoration:none;transition:.2s ease;}
.viewAdminBtn:hover{background:#ff533f;border-color:#ff533f;color:#fff;}
.viewAdminBtn.is-primary{border-color:#ff533f;background:#ff533f;color:#fff;}
.viewAdminBtn.is-danger:hover{background:#d9362a;border-color:#d9362a;}


@media (max-width: 640px){
	.portSearchOpen{width: 50px;height: 50px;border-radius: 999px;top: inherit;bottom: 25px;right: 80px;background: transparent;}
	.portSearchOpen span{display:none;}
	.portSearchOpen i {font-size: 40px;width: 100%;height: 100%;display: block;}
}