:root {
	--side_set_bg: #170024;
}
/* 사이드영역 기본 레이아아웃 */
.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:url(/images/top_bg_pt.jpg) no-repeat; background-position:top center !important; background-size:100% 100% !important;z-index:1002;overflow-y:overlay; background:var(--side_set_bg);}
.side_box .eff_bg {position:absolute; bottom:0; right:17px; width:110px; height:300px; background:yellow; opacity:1; border-radius:70px 0 0 0;}





.side_box:: {-ms-overflow-style: none;}
.side_box::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;}
.side_box::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px;  transition:all .3s;}
.side_box:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;}

.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:sticky; top:0; left:0; width:100%; text-align: center; border:0px solid red; transition: all .3s; z-index:2; overflow:hidden;}
.side_box .sd_head:before {content:""; position:absolute; top:0; right:17px; width:110px; height:95%; background:#fff; opacity:0.02; border-radius:0 0 70px 0;}
.side_box .sd_head:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/top_bg_pt.jpg) no-repeat; background-position:center center !important; background-size:auto 100% !important; opacity:1; z-index:-1; background:var(--side_set_bg);}
.side_box .sd_content {position:relative; z-index:1; padding-bottom:40px;}


@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:relative;font-size:0; max-width:230px;padding:45px 35px 35px 35px; cursor:pointer; text-align:left; }
.side_box .sd_head .logo_box .logo { width:100%;}
.side_box .sd_head .logo_box .tebi {position:absolute; top:0; right:-100px; height:140px;}

.side_box .festival_day {position: absolute; top:86px; right:37px; white-space:nowrap;}
.side_box .festival_day year {position: absolute; top:-57px; right:0px;font-size:10px; color:#fff; }


.side_box .festival_day start,
.side_box .festival_day end {display:inline-block; vertical-align:middle; font-size:8px; font-weight:100; color:#fff; line-height:130%; text-align:center; letter-spacing:0.1em;}

.side_box .festival_day start {}
.side_box .festival_day start:after {content:"-"; color:#fff; opacity:0.85;}
.side_box .festival_day end {}


.side_box .count_day {position:relative; left:0; right:0; margin:10px auto 10px auto; width:calc(100% - 20px); height:50px; text-align:left; display:inline-block;}
.side_box .count_day:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);border-radius:5px;transform: skewX(var(--skew_default)); transition:all .3s;}
.side_box .count_day .dday {position:relative; font-size:0;padding:15px 0 15px 50px; z-index:1;transform: skewX(var(--skew_default));}
.side_box .count_day .dday:before {content:"D -"; position:absolute; left:32px;top:19px; color:#fff; font-size:10px; line-height:100%; font-weight: 100; opacity:0.5;}

/*
.side_box .count_day .dday:before {content:"\ea1f"; position:absolute; left:25px;top:50%; transform:translateY(-50%); color:#fff; font-size:18px; line-height:100%; font-family: xeicon !important; display: inline-block; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1;-webkit-font-smoothing: antialiased;}

.side_box .count_day .dday:before,
.side_box .count_day .dday:after {content:""; position:absolute; left:30px;}
.side_box .count_day .dday:before {content:"댄싱카니발"; top:-18px; background:red; color:#fff; font-size:11px; line-height:100%; padding:3px; border-radius:3px;}
.side_box .count_day .dday:after {border-top:7px solid red; border-right:5px solid transparent; top:-2px; left:30px;}
*/

.side_box .count_day .dday span,
.side_box .count_day .dday em,
.side_box .count_day .dday .day_info {display:inline-block; vertical-align:middle; position:relative; font-style:normal;}
.side_box .count_day .dday span {font-size:12px;  font-weight:100; display:none;}
.side_box .count_day .dday em {font-size:12px; font-weight:600; color:#55feff;}
.side_box .count_day .dday em:after {content:" 일 남음"; font-size:12px; font-weight:500; color:#fff;}
.side_box .count_day .dday .day_info {font-size:9px; font-weight:500; padding:0px 0 0 10px; color:rgba(255,255,255,0.4); line-height:100%;}
.side_box .count_day .dday .day_info week {}
.side_box .count_day .dday .day_info week:after {content:"요일 개막";}

.side_box .count_day .tg_year {position:absolute; left:50px;top:-13px; background:red; color:#fff; font-size:10px; line-height:100%; padding:3px; border-radius:3px;}
.side_box .count_day .tg_year:after {content:""; position:absolute; bottom:-5px; left:5px;border-top:7px solid red; border-right:5px solid transparent; }

.side_box .now_festival {position:absolute; top:50%; left:0; transform:translateY(-50%); font-size:0;font-size:13px; text-align:left; padding-left:35px; z-index:1; width:100%;}
.side_box .now_festival.ready {color:orange; display:none;}
.side_box .now_festival.ing {color:#6de3ff;}
.side_box .now_festival.pass {color:#99acb5; }
.side_box .now_festival.unknown {color:#99acb5; }

.side_box .now_festival.ing:after,
.side_box .now_festival.pass:after,
.side_box .now_festival.unknown:after {content:""; position:absolute; top:calc(50% - 10px);right:20px; width:100%; height:80px; transform: translateY(-50%); background: url(/images/tebi_01.png) no-repeat; background-size: auto 100%; background-position: center right; display:none;}


.side_box .tebi_icon {position:absolute; bottom:0px; right:20px; display:none;}
.side_box .tebi_icon img {height:80px;}



.side_box .d_logo {display:none;}
.side_box .fp_con {position:relative; padding:0 0 0 0px;}
.side_box ul.fr_kind {position:relative; font-size:0; z-index: 1; }
.side_box ul.fr_kind li {display:inline-block; vertical-align:top; width:33.3333%; position:relative; font-size:12px; padding:0px 0 0 0px; font-weight:500; color:#eee; transition:all .3s; cursor:pointer; line-height:110%; border:1px solid red;}


.side_box .support {position: relative; padding:0 30px 30px 30px; border:1px solid red; display:none;}
.side_box .latest_aca_list_mb {position: relative; }
.side_box .latest_aca_list_mb h2 {display:inline-block; background:#0161ce; line-height:100%; padding:5px 7px ;font-size:9px; margin:0 0 10px 33px; color:rgba(255,255,255,0.7); border-radius:30px;}

.side_box .festival_link {position: relative; \text-align: left; padding: 0px 0 30px 0px;margin: -20px 0 0 -45px; display: inline-block; font-size: 0;}
.side_box .festival_link youtube,
.side_box .festival_link pdffile {display: inline-block;  vertical-align: top; line-height: 100%; width: auto; white-space: nowrap; border: 0px solid red; margin: 0 3px;}
.side_box .festival_link a {display: block; font-size: 0; line-height: 100%; position: relative; padding: 6px 15px 6px 10px;}
.side_box .festival_link a:after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; transform:skewX(var(--skew_default)); border-radius: 5px; opacity: 0.14; transition: all .3s;}
.side_box .festival_link a:hover:after {opacity: 0.3;}

.side_box .festival_link i,
.side_box .festival_link span {display: inline-block; vertical-align: middle; line-height: 100%; position: relative; color: #fff; z-index: 1;}

.side_box .festival_link i:before {content:""; font-size: 27px;}
.side_box .festival_link youtube i:before {content:"youtube_activity"; color: red;}
.side_box .festival_link pdffile i:before {content:"PDF"; font-size: 11px; font-weight: 500; font-family: var(--neo);}
/*.side_box .festival_link pdffile i:before {content:"picture_as_pdf";}*/
.side_box .festival_link youtube i:after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:8px; height:8px; border-radius:100%; background:#fff; z-index:-1;}
.side_box .festival_link span {font-size: 11px; font-weight: 500; padding: 0px 0 0 5px; opacity: 0.6; transition: all .3s;}
.side_box .festival_link a:hover span {opacity: 1;}


.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;}
nav.user_mov	{position:absolute; bottom:80px; left:0; width:100%; font-size:0; padding:0 25px; display:flex; }
nav.user_mov li	{flex:1; font-size:0; position:relative;}
nav.user_mov li a	{position:absolute; top:0; left:0; font-size:0; width:100%; height:100%;}
nav.user_mov li i,
nav.user_mov li span	{display:inline-block; width:100%; line-height:100%;}
nav.user_mov li i	{font-size:20px; color:#fff;}
nav.user_mov li span	{font-size:10px; color:#ddd; padding-top:3px;font-family:var(--neo); font-weight:300; letter-spacing:-0.05em;}
nav.user_mov li.out	{position:absolute; top:0; right:0; width:auto;}

:root {
	--pick_m_on: #e4b7ff;
}

/* 사이드영역 사이트메뉴 출력 / navi_default_toggle */
ul.navi_mb		{display:inline-block; width:100%;margin:0; padding:10px 40px 35px 40px;}
ul.navi_mb > li				{position:relative; }
ul.navi_mb > li > a			{display:block; font-family: var(--neo); font-size: 14px; font-weight: 500; letter-spacing: 0em;padding:10px 0 10px 30px; color:rgba(255,255,255,0.7);  position:relative;}
ul.navi_mb > li > a:hover {color:#fff; }
ul.navi_mb > li > a .plus			{position:absolute; top:50%; right:0; transform: translateY(-50%); color:rgba(255,255,255,0.2); font-size:12px; display: none;}
ul.navi_mb > li > a.on			{color:var(--pick_m_on); font-weight:800;}
ul.navi_mb > li > a.on .plus	{color:#fff; }

ul.navi_mb > li > a > i	{color:#fff; position:absolute; top:10px; left:0; width:20px; text-align:center; font-size:17px;}

ul.navi_mb > li:nth-child(1) > a > i:before			{content:"celebration";}
ul.navi_mb > li:nth-child(2) > a > i:before			{content:"info";}
ul.navi_mb > li:nth-child(3) > a > i:before			{content:"dashboard";}
ul.navi_mb > li:nth-child(4) > a > i:before			{content:"send";}
ul.navi_mb > li:nth-child(5) > a > i:before			{content:"hub";}
ul.navi_mb > li:nth-child(6) > a > i:before			{content:"explore";}
ul.navi_mb > li:nth-child(7) > a > i:before			{content:"language";}





ul.navi_mb > li > a > em	{position:absolute; top:13px; right:0; color:#fff;  font-size:9px; opacity:0.5;}

ul.navi_mb > li ul.sub2			{display: inline-block; padding:0px 0 20px 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:0px 0 0px 11px; font-family: var(--neo); font-size: 12px; font-weight: 500; letter-spacing: 0em; width:100%; color:rgba(255,255,255,0.7); line-height:100%; display:block; position:relative;}
ul.navi_mb > li ul.sub2 li a:before	{content:"ㆍ "; opacity:0.3;}

ul.navi_mb > li ul.sub2 li a.on2		{color:var(--pick_m_on);}
ul.navi_mb > li ul.sub2 li a span		{position:relative; padding:6px 1px; display:inline-block;}

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(255,255,255,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:#fff; }
ul.navi_mb > li ul.sub3 li a.on3		{color:#fd9104;}

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(255,255,255,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:#fff; }
ul.navi_mb > li ul.sub4 li a.on4		{color:#fd9104;}


ul.navi_mb > li.link .sub2 li a:before {display:none;}
ul.navi_mb > li.link .sub2 li a span {width:auto;}
ul.navi_mb > li.link .sub2 li a span:before {content:"\e980"; vertical-align:middle; font-family: xeicon !important; display: inline-block; speak: none; font-style: normal;font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size:13px; margin-right:7px;}
ul.navi_mb > li.link .sub2 li a span:after {content:""; position:absolute; bottom:0; right:0; width:calc(100% - 20px); border-bottom:1px dashed rgba(255,255,255,0.25);}



/*
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(1) a:before,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(2) a:before,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(3) a:before,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(4) a:before {display:none;}

ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(1) a span,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(2) a span,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(3) a span,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(4) a span {width:auto;}

ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(1) a span:before,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(2) a span:before,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(3) a span:before,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(4) a span:before {content:"\e980"; vertical-align:middle; font-family: xeicon !important; display: inline-block; speak: none; font-style: normal;font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size:13px; margin-right:7px;}

ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(1) a span:after,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(2) a span:after,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(3) a span:after,
ul.navi_mb > li:nth-of-type(6) .sub2 li:nth-child(4) a span:after {content:""; position:absolute; bottom:0; right:0; width:calc(100% - 20px); border-bottom:1px dashed rgba(255,255,255,0.25);}

ul.navi_mb > li:last-child .sub2 li:nth-child(1) a:before,
ul.navi_mb > li:last-child .sub2 li:nth-child(2) a:before,
ul.navi_mb > li:last-child .sub2 li:nth-child(3) a:before,
ul.navi_mb > li:last-child .sub2 li:nth-child(4) a:before {display:none;}

ul.navi_mb > li:last-child .sub2 li:nth-child(1) a span,
ul.navi_mb > li:last-child .sub2 li:nth-child(2) a span,
ul.navi_mb > li:last-child .sub2 li:nth-child(3) a span,
ul.navi_mb > li:last-child .sub2 li:nth-child(4) a span {width:auto;}

ul.navi_mb > li:last-child .sub2 li:nth-child(1) a span:before,
ul.navi_mb > li:last-child .sub2 li:nth-child(2) a span:before,
ul.navi_mb > li:last-child .sub2 li:nth-child(3) a span:before,
ul.navi_mb > li:last-child .sub2 li:nth-child(4) a span:before {content:"\e980"; vertical-align:middle; font-family: xeicon !important; display: inline-block; speak: none; font-style: normal;font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size:13px; margin-right:7px;}

ul.navi_mb > li:last-child .sub2 li:nth-child(1) a span:after,
ul.navi_mb > li:last-child .sub2 li:nth-child(2) a span:after,
ul.navi_mb > li:last-child .sub2 li:nth-child(3) a span:after,
ul.navi_mb > li:last-child .sub2 li:nth-child(4) a span:after {content:""; position:absolute; bottom:0; right:0; width:calc(100% - 20px); border-bottom:1px dashed rgba(255,255,255,0.25);}
*/

/* mask */
.side_mask {width: 100%; height: 100%; position: fixed; top: 0;  left: 0; background: rgba(0,0,0,0.9); 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;}