/* 사이드영역 기본 레이아아웃 */
.side_box {position:fixed; top:0; left:0; transform:translateX(-100%); max-width:300px; width:calc(100% - 75px); height:100%; visibility: hidden; opacity:0;  transition: all .3s; background:#fff; z-index:1002;}
.side_box.show {transform:translateX(0); visibility: visible; opacity: 1; }
.side_box > i {position:absolute; top:25px; right:25px; color:red; font-size:22px; transition:all .3s; z-index: 1; display: none;}
.side_box .sd_head {position:relative; text-align: center; height:235px; transition: all .3s; }
.side_box .sd_head:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/bg_slide.png); opacity:0.3; z-index:-1;}
.side_box .sd_content {position:relative; height:calc(100% - 235px);overflow-y:overlay;}
.side_box .sd_content:: {-ms-overflow-style: none;}
.side_box .sd_content::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;}
.side_box .sd_content::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px;  transition:all .3s;}
.side_box .sd_content:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;}

@media screen and (max-width: 650px){
	.side_box .sd_head {height:220px;}
	.side_box .sd_content {height:calc(100% - 220px);}
}

@media screen and (max-width: 300px){
	.side_mask > i {display: none;}
	.side_box {width:100%;}
	.side_box > i {display: block;}
}

.side_box .sd_head .logo_box {position:absolute; top:20px; right:20px;}
.side_box .sd_head .logo_box img {width:20px;}
.login_user	{ position:absolute; top:50%; left:0; transform:translateY(-50%); padding:0; width:100%; z-index:1;}
.login_user .info_box		{position:relative; padding:0 45px 35px 45px;}
.login_user .info_box i		{position:absolute; top:0; left:0; font-size:40px; color:#000;}
.login_user .info_box .set	{position:relative; }
.login_user .info_box .set > div	{display:inline-block; width:100%; line-height:110%; text-align:left; position:relative;}
.login_user .info_box .set .who	{font-family:var(--neo); font-size:20px; font-weight:800; color:#000; letter-spacing:-0.05em;padding:0px 0 10px 0;}
.login_user .info_box .set .who span	{display:inline-block; font-size:13px; letter-spacing:0em; padding-left:5px;}
.login_user .info_box .set .msg	{font-size:11px; color:#000; line-height:140%; opacity:0.4;}
.login_user nav.user_mov	{position:relative; font-size:0; padding:0 25px; display:flex; }
.login_user nav.user_mov li	{flex:1; font-size:0; position:relative;}
.login_user nav.user_mov li a	{position:absolute; top:0; left:0; font-size:0; width:100%; height:100%;}
.login_user nav.user_mov li i,
.login_user nav.user_mov li span	{display:inline-block; width:100%; line-height:100%;}
.login_user nav.user_mov li i	{font-size:28px; color:#000;}
.login_user nav.user_mov li span	{font-size:12px; color:#333; padding-top:3px;font-family:var(--neo); font-weight:600; letter-spacing:-0.05em;}

@media screen and (max-width: 650px){
	.side_box .sd_head .logo_box img {width:15px;}
	.login_user .info_box		{position:relative; padding:0 35px 30px 35px;}
	.login_user .info_box .set .who	{font-size:18px; padding:0px 0 10px 0;}
	.login_user .info_box .set .who span	{font-size:11px;}
	.login_user .info_box .set .msg	{font-size:10px; line-height:130%; opacity:0.3;}
	.login_user nav.user_mov	{padding:0 20px;}
	.login_user nav.user_mov li i	{font-size:25px;}
	.login_user nav.user_mov li span	{font-size:11px; padding-top:3px;}
}


/* 사이드영역 사이트메뉴 출력 / navi_default_toggle */
ul.navi_mb		{display:inline-block; width:100%;margin:0; padding:35px 40px;}
ul.navi_mb > li				{position:relative; }
ul.navi_mb > li > a			{display:block; font-family: var(--neo); font-size: 18px; font-weight: 700; letter-spacing: -0.05em;padding:10px 0px; color:rgba(0,0,0,0.5);  position:relative;}
ul.navi_mb > li > a:hover {color:#000; }
ul.navi_mb > li > a .plus			{position:absolute; top:50%; right:0; transform: translateY(-50%); color:rgba(0,0,0,0.2); font-size:12px; display: none;}
ul.navi_mb > li > a.on			{color:#000; font-weight:800;}
ul.navi_mb > li > a.on .plus	{color:#000; }
ul.navi_mb > li ul.sub2			{display: inline-block; padding:10px 0 25px 5px; font-size:0; width:100%; }
ul.navi_mb > li ul.sub2 li		{display:inline-block; vertical-align:middle; width:100%; }
ul.navi_mb > li ul.sub2 li a	{padding:7px 0; font-family: var(--neo); font-size: 15px; font-weight: 700; letter-spacing: -0.05em; width:100%; color:rgba(0,0,0,0.4); line-height:100%; display:block;}
ul.navi_mb > li ul.sub2 li a:before	{content:"ㆍ ";}

ul.navi_mb > li ul.sub2 li a.on2		{color:#000; font-weight:800;}

ul.navi_mb > li ul.sub3			{float:left; padding:10px 0 15px 0; font-size:0; width:100%; border-bottom:1px dashed #eeeeee;}
ul.navi_mb > li ul.sub3 li		{display:inline-block; vertical-align:middle; width:100%; }
ul.navi_mb > li ul.sub3 li a	{padding:5px 15px 5px 40px; font-size:11px; width:100%; color:rgba(0,0,0,0.7); display:block;background:white; border-bottom:0; }
ul.navi_mb > li ul.sub3 li:last-child a	{border-bottom:0; }
ul.navi_mb > li ul.sub3 li a:before	{content:"- ";}
ul.navi_mb > li ul.sub3 li a:hover	{background:#ffffff; color:black; }
ul.navi_mb > li ul.sub3 li a.on3		{color:orange;}

ul.navi_mb > li ul.sub4			{float:left; padding:5px 0 10px 0; font-size:0; width:100%; }
ul.navi_mb > li:last-child ul.sub4			{padding-bottom:0;}
ul.navi_mb > li ul.sub4 li		{display:inline-block; vertical-align:middle; width:100%; }
ul.navi_mb > li ul.sub4 li a	{padding:5px 15px 5px 45px; font-size:11px; width:100%; color:rgba(0,0,0,0.7); display:block;background:white; border-bottom:0; }
ul.navi_mb > li ul.sub4 li:last-child a	{border-bottom:0; }
ul.navi_mb > li ul.sub4 li a:before	{content:"";}
ul.navi_mb > li ul.sub4 li a:hover	{background:#ffffff; color:black; }
ul.navi_mb > li ul.sub4 li a.on4		{color:yellow;}

@media screen and (max-width: 650px){
	ul.navi_mb > li > a			{font-size: 16px; padding:7px 0px;}
	ul.navi_mb > li ul.sub2			{padding:5px 0 20px 5px;}
	ul.navi_mb > li ul.sub2 li a	{padding:5px 0; font-size: 13px;}
}

/* mask */
.side_mask {width: 100%; height: 100%; position: fixed; top: 0;  left: 0; background: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; transition: all .3s; z-index:1001;}
.side_mask.show {opacity: 1; visibility: visible; }
.side_mask > i {position:absolute; top:25px; right:25px; transform:translateX(-100%); color:#fff; font-size:22px; transition:all .3s;}
.side_mask.show > i { transform:translateX(0);}


.side_box .poster_thum {position:relative !important; bottom:initial !important; right:initial !important; width:100%; z-index:1 !important; padding:0 35px;}
.side_box .poster_thum img {width:100%; border-radius:7px;}