@charset "utf-8";

.fc-l { color: var(--color-basic-l) !important; }
.fc   { color: var(--color-basic)   !important; }
.fc-b { color: var(--color-basic-b) !important; }

.fc-manager { color:#f64a7b; }
.fc-manager.fc-manager a { color:#f64a7b; }

.fc-review { color: var(--color-basic-b); }
.fc-review.fc-review a { color: var(--color-basic-b); }

.eb-btn-basic,
a.eb-btn-basic {background: var(--color-basic); padding:3px 8px; text-align:center; color:#fff !important; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-basic:hover {background: var(--color-basic-b); color:#fff;}

.eb-btn-basicb,
a.eb-btn-basicb {background: var(--color-basic-b); padding:3px 8px; text-align:center; color:#fff !important; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-basicb:hover {background: var(--color-basic); color:#fff;}

.eb-btn-black,
a.eb-btn-black {background:#000; padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-black:hover {background:#000; color:#fff;}

.eb-btn-white,
a.eb-btn-white {background:#ffffff; padding:2px 8px; text-align:center; color:#333; border:1px solid #dedede; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-white:hover {background:#000; color:#fff;}

.eb-btn-gray,
a.eb-btn-gray {background:#999999; padding:3px 8px; text-align:center; color:#fff !important; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-gray:hover {background:#000; color:#fff;}

.eb-btn-grayr, /* 흐린것을 r을 안쓰고 L을 씀*/
a.eb-btn-grayr {background:#f1f1f1; padding:3px 8px; text-align:center; color:#fff !important; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-grayr:hover {background:#000; color:#fff;}

.eb-btn-grayl,
a.eb-btn-grayl {background:#f1f1f1; padding:3px 8px; text-align:center; color:#fff !important; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-grayl:hover {background:#000; color:#fff;}

.eb-btn-red,
a.eb-btn-red {background:#ff0000; padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-red:hover {color:#fff;}

.eb-btn-manager,
a.eb-btn-manager {background:#f55582; padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;}
.eb-btn-manager:hover {color:#ffff00;}

.reviewForm {display:flex; margin-top:25px; }
.reviewForm li {width:calc((100%)/2); padding:0px 1px;}

/* 더보기 로딩 */
#infscr-loading { font-size:1.0rem; opacity:0.8; background: #000; color: #fff; padding: 10px; border-radius: 10px; left: 50%; width:200px; min-width:200px; margin-left:-100px; text-align: center; bottom: 100px; position: fixed; z-index: 100; -webkit-border-radius: 10px; -moz-border-radius: 10px; white-space:nowrap;}
#infscr-loading div{ color: #fff;}

.label-noti-quick-m { position: absolute; top: 12%; right: 20px; text-align: center; font-size: 12px; font-weight:500; padding: 2px 3px; line-height: 0.9; border-radius: .25em !important; }

.bg-basic, i.bg-basic, .badge.bg-basic { 
	background-color: var(--color-basic); 
	color: #fff; 
}

.bg-red, i.bg-red, .badge.bg-red { 
	background-color: red; 
	color: #fff; 
}

.bg-mint, i.bg-mint, .badge.bg-mint { 
	background-color: #15d0f2; 
	color: #fff; 
}

.bg-pink, i.bg-pink, .badge.bg-pink { 
	background-color: #e50150; 
	color: #fff; 
}

.bg-grayl, i.bg-grayl, .badge.bg-grayl { 
	background-color: #f8f8f8; 

}


/* ------------------- 공통여백 */

.eb-inner {max-width:1400px; width:92%; margin:0 auto; height: 100%; position: relative;}

.eb-mg-sub     { margin:40px 0 0 0 } /* 서브영역별 */

.eb-my-sub     { margin:40px 0 0 0 } /* 서브영역별 */
.eb-my-sub-s   { margin:30px 0 0 0 } /* 서브영역별 */

.eb-py-main    { padding:80px 0 0 0 } /* 메인영역별 */
.eb-py-sub     { padding:40px 0 0 0 } /* 서브영역별 */
.eb-py-sub-s   { padding:30px 0 0 0 } /* 서브영역별 */

.eb-py-title   { padding:0 0 20px 0 } /* 타이틀하단 */
.eb-py-title-s { padding:0 0 10px 0 } /* 타이틀하단 */

.visual-sub { padding-top:40px; margin-bottom:20px; }

@media (max-width: 1023px) { /* 모바일,테블릿까지 */

	.eb-my-sub     { margin:30px 0 0 0 } /* 서브영역별 */
	.eb-my-sub-s   { margin:20px 0 0 0 } /* 서브영역별 */

	.eb-py-main  { padding:50px 0 0 0 }
	.eb-py-sub   { padding:30px 0 0 0 }
	.eb-py-sub-s { padding:20px 0 0 0 }
	.visual-sub { padding-top:30px; margin-bottom:0px; }
}


/* ------------------- 레이아웃 */

.detailWrap {display:flex;}
.detailContent {width: calc(100% - 386px);margin-right:47px;}

@media (max-width:1279px){ /* 노트북까지 */
	.detailContent {width:100%; margin-right:0;}

}

.subTop {}


/* ------------------- 신 나리야 소스 */

.na-convert {font-size:16px;}

.list-group-item {padding-left:0;padding-right:0}
.list-group-item .col-form-label { font-weight: bold; }
.comment-list-photo { width:50px;border-radius: 50%;}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */

}

.commom-photo {width:50px;height:50px;border-radius: 10%;}
.commom-photo-big {width:60px;height:60px;border-radius: 50%;}


/* ------------------- 구 나리야 소스 */

.list-group-item.bb0 {border-bottom: 0px;}
.list-group-item.pl0 {padding-left:0px;margin-left:0px;}
.list-group-item.pr0 {padding-right:0px;margin-right:0px;}

hr.hr::before { width:100%; height:1px; content: ""; position:absolute; left:0; bottom:1px; line-height:1px; background-color:#ddd; }
hr.hr { display:block; position:relative; height:3px; border: none; line-height:1px; padding:0;	margin:0; opacity: 1;}
hr.hr::after { width:4.0rem; height:3px; content: ""; position:absolute; left:0; bottom:0; line-height:1px; background-color:  var(--color-basic-b)}

@media all and (max-width:575px) {
	.responsive h3.h3 {	padding-left:1.0rem; padding-right:1.0rem; }
	.responsive hr.hr::after { left:1.0rem;	}
}

/* SLY 분류탭 */
.sly-tab { border:0; overflow:hidden; }
.sly-tab .d-flex { border-left:1px solid #e5e5e5; }
.sly-tab li a {	display:block; text-align:center; border:1px solid #e5e5e5;	border-left:0; color:#333; background:#fafafa; }
.sly-tab li.active a { font-weight:bold; background:#fff; border-bottom:1px solid #fff; }
.sly-tab .sly-btn {	display:none; text-align:center; border:1px solid #e5e5e5; color:#333; background:#fff; }
.sly-tab .sly-btn:hover { background:#fafafa; }
.sly-tab .sly-btn.sly-next { border-left:0; }
.sly-tab hr { display:block; border-top:1px solid #e5e5e5; height:1px; margin:0; margin-top:-1px; padding:0; }

/* 모달 */
#clipContent, 
#setupContent {	display: block; border: none; width:100%; }
#clipModal .btn { border-radius:0; }


/* ------------------- 부트스크랩 수정 */

.form-check-input {width:20px; height:20px; border-radius:5px; } /* 체크박스 기본크기키우기 */
.form-check-label {padding-left:3px; line-height:28px }


/* ------------------- 비쥬얼 타이틀, 인기검색어, 검색 부분 */

.comPopWrap {display:flex; align-items:center; justify-content:space-between; cursor:pointer;margin-top:20px}
.comPopTit {display:flex;flex-wrap: wrap; align-items:center; gap:0px; }
.comPopTit ul {display:flex;flex-wrap: wrap; gap:10px; align-items:center;padding-bottom:3px}
.comPopTit ul li span { font-size:16px; font-weight:var(--font-m);}
.comPopTit span { width:95px; font-size:var(--font-size_18); font-weight:var(--font-b);}
.comPopWrap_downArr { position:absolute; right:0px; background:#fff;width:25px;text-align:right; }

.comPopTermInputWrap {margin-top:20px;}
.comPopTermInputBox {position:relative;     max-width: 500px;  margin: 0 auto; }
.comPopTermInputBox button {position:absolute; right:15px; top:45%; transform:translateY(-45%);}
.comPopTermInput {border:none; width:100%; border: 2px solid var(--color-color1); border-radius: 50px; height: 50px; line-height: 50px; padding: 0 20px; font-weight:var(--font-b);}
.comPopTermInput::placeholder {font-weight:var(--font-b); color:#999; font-size:var(--font-size_14);}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.comPopTermInputWrap {margin-top:}
	.comPopTermInput{border: 2px solid var(--color-color1);border-radius: 5px; height: 45px; line-height: 45px; padding: 0 20px ;}
}

.comPopTerm {display:none;}

.comSelBox {display:flex; }
.comSelBox .comSelBox_list {display:flex;justify-content : space-between; }
.comSelBox .comSelBox_list .item {padding-left:5px;}
.comSelBox .comSelBox_list .item:nth-child(1) {padding-left:0px;}
.comSelBox .comSelBox_list .item span {display:block; border-radius:20px; border:1px solid #d4d4d4; color:#000; padding:9px 29px; font-weight:var(--font-sb);}
.comSelBox .comSelBox_list .item.on span {background:#333333; border-radius:20px; border:1px solid #333333; color:#fff;}
.comSelBox .comSelBox_list .item.on span {color:#fff}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.comSelBox .comSelBox {gap:4px;}
	.comSelBox .comSelBox_list .item span { padding:6px 19px;}
}

.visual-sub-title-wrap {display:flex; align-items:center; justify-content:space-between;}
.visual-sub-title      {font-size:22px; font-weight:700; line-height:1;}

.comSearchList {width:calc(100% - 230px); margin-right:11px;display:flex; gap:11px; }
.comSearchList li {width:100%; position:relative;}
.comSearchList li:nth-of-type(2) {margin-right:0;}
.comSearchInputBox {position:relative; width:100%; cursor:pointer;}
.comSearchInputBox i {position:absolute; right:28px; top:50%; transform:translateY(-50%);}
.comSearchInput {width:100%; border:none; height:100%; background:#f5f5f5; border-radius:15px; padding: 20px 89px 20px 28px; text-align:right; font-size:var(--font-size_17); font-weight:var(--font-b);}
.comSearchInput::placeholder {text-align:left; font-size:var(--font-size_17); color:#a4a4a4; font-weight:var(--font-r);} 
.comDeTit {font-size:var(--font-size_18); font-weight:var(--font-sb);}
.comSearchBar_mo {display:none;}

@media (min-width: 1023px) { /* 모바일,테블릿이상 */
}

@media (max-width:1279px){ /* 노트북까지 */
	.comSearchBar_mo .comSearchInputBox { box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:15px; border:1px solid #ebebeb;}
	.comSearchBar_mo {display:block;}
}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.comSearchBar_mo {padding-bottom:23px; border-bottom:1px solid #f2f2f2;}
}


/* ------------------- 리스트상단 */

.msRoof {display:flex; justify-content:space-between;}
.roofMore {font-size: var(--font-size_16); font-weight: var(--font-r); color:var(--color-color6);}
.LinkBox {margin-top:17px; display:flex;}


/* ------------------- header 모바일상단*/

.moRoadWrap {display:none;}
.moRoadWrap {background:#fff; border-top:1px solid #ebebeb; padding-top:13px ; margin-top: -px; }
.moRoadWrap .faviriteBtnBox .serBtn02 {border:none;}

.moRoadBox {display: flex;  align-items: center; justify-content: space-between;}
.moRoadCate {font-size: var(--font-size_22);font-weight: var(--font-b); line-height:26px;width:70%;min-width:250px;text-align:center}
.backBtn img {width:16px;}

.mobileBtnBox {display:none; width: 22px; height: 17px;}
.nav_btn {width: 100%; height: 100%; position:relative;}
.nav_btn>span {display: block;width: 100%; height: 3px;background: #000;position: absolute; transition: .3s;}
.nav_btn>span:nth-of-type(1) {transform: translateY(7px);}
.nav_btn>span:nth-of-type(2) {transform: translateY(0px);}
.nav_btn>span:nth-of-type(3) {transform: translateY(-7px);}

@media (max-width:1279px){ /* 노트북까지 */
	.mobileBtnBox {display:block;}
}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.moRoadWrap {display:block; }
}


/* ------------------- sidebar */

.mobileWrap {width:100%; height:100vh; background:#f7f8fa; z-index:999; position:fixed; top:0; left:0; padding: 20px 0; display:none; overflow-y:scroll; overflow-y:scroll; -ms-overflow-style: none;}
.mobileWrap::-webkit-scrollbar { display: none;}
.mbLogo {width:50%;}
.mbLogo img {max-width:100%;}
.mobileWrapInner {max-width:1280px; width:92%; margin:0 auto;}
.mbCloseBtn { display: flex;align-items: center;justify-content: center;}
.mbTop {display:flex; justify-content:space-between; margin-bottom:55px}
.mbCloseBtn button { position: relative; width: 24px; height: 24px;  background: none; border: none; cursor: pointer;padding: 0;}
.mbCloseBtn button span {position: absolute;  display: block;  width: 100%; height: 2px;  background-color: #666; /* 선 색상 */  top: 50%; left: 0; transform: translateY(-50%);}
.mbCloseBtn button span:first-child { transform: rotate(45deg); }
.mbCloseBtn button span:last-child { transform: rotate(-45deg); }

.mbSmWrap {max-width:550px; margin:0 auto; width:100%; }
.mbLoginArea {width:100%; padding:20px; border-radius:20px; background:#fff; text-align:center;}
.mbLoginArea span {font-size:var(--font-size_20); font-weight:var(--font-m); line-height:1.5em;}
.mbLoginArea span b {font-weight:var(--font-b); color:var(--color-color1);}
.mbLoginBox {display:flex; gap:15px; justify-content:center; margin-top:0px;}
.mbLoginBox a {display:block; width:200px; height:60px; border-radius:20px; border:1px solid  var(--color-basic-b); line-height:60px; color: var(--color-basic-b); font-size:var(--font-size_20); font-weight:var(--font-b);}
.mbLoginBox a.mbReg {background: var(--color-basic-b); color:#fff;} 

.mbLoginHelpBox {font-size:var(--font-size_18); font-weight:var(--font-l); color:#aaaaaa; display:flex; gap:20px; justify-content:center; margin-top:20px;}

.mbInfo {width:100%; padding:20px; border-radius:20px; background:#fff; margin-top:20px;}
.infoDesc {text-align:center; }
.infoDesc span {font-size:var(--font-size_18); font-weight:var(--font-m); color:#848484; }
.infoDesc a {font-size:var(--font-size_18); font-weight:var(--font-m);  background:#ddf7fb; color:#07afcd; width:100%; height:50px; text-align:center; line-height:50px; border-radius:15px; display:block; margin-top:20px;}
.mbSchArea {position:relative; height:50px; margin:10px 0;}
.mbSchArea input {width:100%;padding:15px 20px; border:1px solid #ebebeb; border-radius:15px; background:#fff;}
.mbSchArea input::placeholder {font-size:var(--font-size_18); font-weight:var(--font-m); color:#b6b6b6;}
.mbSchBtn {position:absolute; right:20px; top:50%; transform:translateY(-50%); width:21px; height:21px;}

.mbSchTag {display:flex; align-items:center; gap:14px;}
.mbSchTag li a {font-size:var(--font-size_14); font-weight:var(--font-r); color:#545454; letter-spacing:-0.02em; display:block; position:relative;}
.mbSchTag li a:after {content:''; position:absolute; width:1px; height:1px; border-radius:50%; background:#545454; top:50%; right:-7px; }
.mbSchTag li:last-child a:after {display:none;}

.mbAcorWrap {background:#fff; border-radius:15px; padding:15px; margin:0px 0 20px 0; }
.mbAcorList {cursor:pointer;}
.mbAcorTit {display:flex; align-items:center; font-size:var(--font-size_18); font-weight:var(--font-sb); justify-content:space-between; padding:0px 0 10px 0px; cursor:pointer; position:relative;}

.mbAcorTit i img {display:block;}

.mbAcorbox {padding-left:5px}
.sidebar-menu-ul { display: flex; flex-wrap: wrap; width:100%; font-weight: var(--font-sb);}
.sidebar-menu-ul li {width:50%}
.sidebar-menu-ul li a {display:block; padding:8px 0 8px 0; }

.mbSiteLink {padding:25px 0;}
.mbSiteLink li + li {margin-top:25px;}
.mbSiteLink li a {font-size:var(--font-size_16); font-weight:var(--font-r); color:#434343; }


@media (max-width:1279px){ /* 노트북까지 */
	.mbLoginBox {gap:6px;}
	.mbLoginBox a {height:45px; line-height:45px; width:145px; font-size:14px;} 
	.mbLoginHelpBox {font-size:12px;}
	.infoDesc span {font-size:14px; text-align:left;}
	.mbSchTag li a {font-size:12px;}
	.mbAcorTit {font-size:18px;}
	.mobileWrap {overflow-y:scroll; -ms-overflow-style: none;}
	.mobileWrap::-webkit-scrollbar { display: none;}
	.mbSiteLink li a {font-size:14px;}
	.mbSiteLink {padding:15px 0;}
}


/* ------------------- sidebar 로그인시 */

.userArea {background:#fff; border-radius:15px; padding:15px;}
.mbUserInfo {display:flex; align-items:start;justify-content: space-between; flex-wrap:wrap}
.mbUserIcon {display:flex; gap:17px;}
.mbUserName {font-size:var(--font-size_18); font-weight:var(--font-l);}
.mbUserName b {font-weight:var(--font-eb);}
.mbTxt {margin-top:9px;}
.mbInfoMor { font-weight: 500; color:#999999; }

.userLev {display:flex; align-items:center; width:100%; border-radius:15px; background:#f3f4f6; padding:20px; justify-content:space-between;}
.userlevel {display:flex; align-items:center; gap:7px;}
.userlevel h4 { font-weight:var(--font-l);}
.mbUserPoint  {display:flex; align-items:center; gap:12px;}
.mbUserPoint span {color:#07afcd; font-weight:var(--font-b);padding-left:10px}
.userLevRemain { font-weight:var(--font-l); color:#07afcd; margin:10px 0;} 


.mbUserFavBox {cursor:pointer; position:relative;}
.mbUserFavTit {display:flex; padding:10px 20px; border-radius:15px; background:#07afcd; color:#fff; justify-content:space-between;position:relative;}
.mbUserFavTit.difc {background: var(--color-basic-b); margin-top:10px;}

.mbUserFavBoxDepth02 {display:none;width:100%;padding-top:5px}
.mbUserFavBoxDepth02 li {display:flex; justify-content:space-between; padding:5px 5px}
.mbUserFavBoxDepth02 li > a {display:block; padding:5px 0px;; font-weight:700;  transition:0.28s;}
.mbUserFavBoxDepth02 li:hover a {color: var(--color-basic-b);}

.stListAdd {display:flex; gap:3px; align-items:center;}
.stListAdd img {width:16px;}

.userUtillList {display:flex; flex-wrap:wrap;}
.userUtillList li {width:calc((100% - 10px*3)/4); height:50px; margin-right:10px;}
.userUtillList li:nth-of-type(4n) {margin-right:0;}
.userUtillList li:nth-of-type(n + 5) {margin-top:20px;}
.userUtillList li a {display:flex; align-items:center; gap:10px; font-size:14px; font-weight:var(--font-r);}
.userUtillList i{color:#ff4500;}

.usertype02 {margin:20px 0;}

.userLinkTxt { font-weight:var(--font-m); color:#848484;}
.userAreaLink {display:block; width:100%; padding:20px; text-align:center; background:#fff6d9; color:#e78200; font-weight:var(--font-m); border-radius:15px; margin-top:10px; }
.userAreaLink.link_vs02 {background:#ddf7fb; color:#07afcd;}


@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.mbUserName {font-size:18px;}
	.mbTxt {font-size:18px;}

	.userUtillList li {width:50%; margin-right:0;}
	.userUtillList li a {font-size:16px;}
	.userUtillList li:nth-of-type(n + 3) {margin-top:20px;}

}


/* ------------------- 탑배너 */

.topBanner.close { display: none; } 

.tempBanner {background: linear-gradient(to right, #4beedc, #49c6f9); width:100%; position:relative; height:45px; text-align:center; line-height:45px; }

.topBannerClose { width: 14px; height: 15px;position: absolute; top:50%; right:30%; transform:translateY(-50%); cursor:pointer;}
.topBannerClose span {display: block;width: 100%; height: 1px;background-color: black; /* X자 표시를 위한 색상 */ position: absolute; top: 50%; left: 0;transform-origin: center;}
.topBannerClose span:nth-of-type(1) {transform: rotate(45deg);}
.topBannerClose span:nth-of-type(2) {transform: rotate(-45deg);}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.tempBanner {padding:0 20px;  text-align:unset;}
	.topBannerClose {right:20px;}
}