/* 사이드영역 기본 레이아아웃 */
.side_box {position:fixed; top:0; left:0; transform:translateX(-100%); max-width:300px; width:calc(100% - 25px); height:100%; visibility: hidden; opacity:0;  transition: all .3s; background: url(/hanji_festival/2026/images/bg_2026.jpg) ; z-index:10000002; }
.side_box.show {transform:translateX(0); visibility: visible; opacity: 1; }
.side_box:after {content:""; position:absolute; top:0; right:2px; width:48px; height:100%; background:url(/hanji_festival/2025/images/bg_mb.png) repeat-y; transform:translateX(100%); display:none;}


.side_box .sd_nav {position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:hidden; z-index:10;}
.side_box .sd_nav		{overflow-y:overlay;}
.side_box .sd_nav:: {-ms-overflow-style: none;}
.side_box .sd_nav::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;}
.side_box .sd_nav::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px;  transition:all .3s;}
.side_box .sd_nav:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;}
.side_box > i {position:absolute; top:25px; right:25px; color:red; font-size:22px; transition:all .3s; z-index: 1;}
.side_box .sd_head {position:sticky; top:0; left:0; text-align: center;transition: all .3s;  z-index: 4;  display:inline-block; vertical-align:middle; padding:30px; width:100%; background: url(/hanji_festival/2026/images/bg_2026.jpg) ; z-index:10; }
.side_box .sd_head:after {content:""; position:absolute; top:0; left:0; width:calc(100% + 45px); height:100%; background:transparent; z-index:10;}
.side_box .sd_head .logo_box {position:relative; text-align:left;}
.side_box .sd_head .logo_box img {width:180px;}

.side_box .sd_head .logo_box_s {position:relative;margin:7px 0 15px 7px; text-align:left;}
.side_box .sd_head .logo_box_s img {width:100px; opacity:0.7;}


.side_box .sd_content {position:relative; padding:0 30px 30px 30px;z-index: 3; display:inline-block; vertical-align:middle; width:100%;}
.side_box .sd_content nav {position:relative; font-size:0; padding:0 15px; z-index:1;}
.side_box .sd_content nav > li {display:inline-block; vertical-align:middle; position:relative; width:100%;text-align:left; }
.side_box .sd_content nav > li:last-child		{margin-bottom:0; }
.side_box .sd_content nav > li > a {display:block; font-weight:600; font-family:var(--neo); font-size:15px; line-height:110%; padding:8px 0px;color:#000; transition:all .3s;}
.side_box .sd_content nav > li > a:hover {color:#000;}
.side_box .sd_content nav > li.on > a {color:#d9005a;}
.side_box .sd_content nav > li.old_festival {margin:25px 0 0 -15px;}
.side_box .sd_content nav > li.old_festival a {}
.side_box .sd_content nav > li.old_festival a img {display:none;}
.side_box .sd_content nav > li.old_festival a span {color: #000; border: 1px dashed rgba(0, 0, 0, 0.5); padding: 7px 15px; border-radius: 30px;
font-size: 13px; background: #fff;}

.side_box .sd_bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}


:root {
	--tree_line: rgba(0,0,0,0.07);
	--tree_line_on: rgba(0,0,0,0.15);
	--tree_pos1: 17px;
}

.side_box .sd_content ul.sub_cate1 {position: relative;  line-height: 100%; padding:5px 0px 25px 0px; font-size:0;}
.side_box .sd_content ul.sub_cate1 > li {display:inline-block; vertical-align:middle; line-height: 100%; width:calc(100% - 0px); margin:0px;padding:0; position:relative;}
.side_box .sd_content ul.sub_cate1 > li:before,
.side_box .sd_content ul.sub_cate1 > li:after {content:""; position:absolute; left:var(--tree_pos1);width:13px; display:none;}
.side_box .sd_content ul.sub_cate1 > li:before {top:0; height:100%; transform:translateX(-100%);border-left:1px solid var(--tree_line); }
.side_box .sd_content ul.sub_cate1 > li:last-child:before {height:calc(50% + 1px);}
.side_box .sd_content ul.sub_cate1 > li:after {top:10px; border-top:1px solid var(--tree_line); transform:translateX(-100%);}
.side_box .sd_content.on ul.sub_cate1 > li:before,
.side_box .sd_content.on ul.sub_cate1 > li:after {border-color:var(--tree_line_on); }
.side_box .sd_content.on ul.sub_cate1 > li.on:after {/*border-color:yellow; */}
.side_box .sd_content ul.sub_cate1 > li > a {display:block; font-weight:500; font-family:var(--neo); font-size:12px; line-height:110%; padding:3px 0px 3px 5px;color:#000; transition:all .3s; background:rgba(0,0,0,0); border-radius:0px; text-align:left;}
.side_box .sd_content ul.sub_cate1 > li > a:hover {color:#000; font-weight:600;}
.side_box .sd_content ul.sub_cate1 > li.on > a {color:#d9005a !important;}
.side_box .flower {position:fixed; bottom:0; right: 0; height:150px; opacity: 0.5;}
.side_box .flower img {position:absolute; bottom:0; right:0; height:200px;}
.side_box .pattern {position:fixed; bottom:0; right: 0; width:calc(100% - 10px); height:90px; overflow:hidden;}
.side_box .pattern img {position:absolute; top:0; left:0; width:100%;}



.side_box .count_day {position:fixed; top:10px; right:10px; width:100%; font-size:0; color:#fff; z-index:100; text-align:right; display:inline-block; padding:0px;}
.side_box .count_day .dday,
.side_box .count_day .now_festival {display:inline-block; vertical-align:middle; width:100%;}
.side_box .count_day .dday span,
.side_box .count_day .dday em {display:inline-block; vertical-align:middle; line-height:110%;}
.side_box .count_day .dday span {font-family:var(--neo); font-weight:500;color:#ddd; font-size:11px;}
.side_box .count_day .dday em {font-family:var(--neo);font-weight:700; font-size:11px; color:#fff; font-style:normal;}

.side_box .count_day .now_festival {font-family:var(--neo); font-weight:800; color:#333; line-height:110%; margin-top:4px;font-size:0px; }
.side_box .count_day .now_festival span {display:inline-block; font-size:8px; font-weight:500; color:red;}
.side_box .count_day .now_festival span.ready {color:orange;}
.side_box .count_day .now_festival span.ing {color:#438919;}
.side_box .count_day .now_festival span.pass {color:red;}

.side_box .sd_copy {position:relative; height:50px; border:1px solid red;}
.side_box .sd_copy img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:10%;}


.side_box ul.schedule_box_ing {position:relative; font-size:0;  text-align:left; padding-top:25px;}
.side_box ul.schedule_box_ing > li {display:inline-block; vertical-align:top; width:100%; }
.side_box ul.schedule_box_ing > li .go_content {display:inline-block; position:relative; background:#009962; color:#fff; font-size:13px;margin:20px 0 0 10px; padding:10px 0; max-width:150px; width:100%; text-align:center;font-family:var(--neo);font-weight:800; border-radius:35px;}
.side_box ul.schedule_box_ing > li ul.date_check {display:inline-block; vertical-align:top; width:100%; padding-left:4px;}
.side_box ul.schedule_box_ing > li ul.date_check li {display:inline-block; vertical-align:top; width:50%; font-size:0; margin:1px 0; padding-left:8px; }
.side_box ul.schedule_box_ing > li ul.date_check li.now {padding:0 0 30px 0;font-family:var(--neo);font-weight:800; width:100%; border:0; margin:-15px 0 0 -3px;}
/*.side_box ul.schedule_box_ing > li ul.date_check li.now {position:absolute; top:0; right:0; width:auto; ;font-family:var(--neo);font-weight:800;}*/
.side_box ul.schedule_box_ing > li ul.date_check li.now span {font-size:14px !important; letter-spacing:-0.05em;}
.side_box ul.schedule_box_ing > li ul.date_check li.now span em {font-style:normal;}
.side_box ul.schedule_box_ing > li ul.date_check li.now span.ready em {color:orangered;}
.side_box ul.schedule_box_ing > li ul.date_check li.now span.ing em {color:green;}
.side_box ul.schedule_box_ing > li.none {width:100%; padding:30px 0; text-align:center; font-size:12px; color:red; background:#fafafa; border-radius:7px;}
.side_box ul.schedule_box_ing > li ul.date_check li span {display:inline-block; vertical-align:top;  line-height:110%; font-family:var(--neo);font-weight:500; position:relative; width:100%; }
.side_box ul.schedule_box_ing > li ul.date_check li .dc_t {color:rgba(0,0,0,0.6);font-size:10px; margin-bottom:5px;}
.side_box ul.schedule_box_ing > li ul.date_check li .dc_c {color:#000; font-weight:800;font-size:12px;letter-spacing:0em;}
.side_box ul.schedule_box_ing > li ul.date_check li .dc_c em {position:absolute; top:50%; left:90px; transform:translateY(-50%); font-style:normal; display:inline-block; vertical-align:middle; background:rgba(0,0,0,0.2); border-radius:3px; line-height:100%; width:16px; height:16px; line-height:16px; text-align:center;  margin-left:2px; font-size:11px; font-family:var(--bar);font-weight:normal; color:#fff;}
.side_box ul.schedule_box_ing > li ul.detail_info {display:inline-block; vertical-align:top; width:100%; padding:10px 0 0 7px;}
.side_box ul.schedule_box_ing > li ul.detail_info li {display:inline-block; vertical-align:top; width:100%; font-size:0; margin:0; }
.side_box ul.schedule_box_ing > li ul.detail_info li span {display:inline-block; vertical-align:top;  line-height:120%; font-family:var(--neo);font-weight:500; position:relative;  letter-spacing:0em;}
.side_box ul.schedule_box_ing > li ul.detail_info li .dc_t {color:rgba(0,0,0,0.6);font-size:10px; width:40px;}
.side_box ul.schedule_box_ing > li ul.detail_info li .dc_t:before {content:"ㆍ";}
.side_box ul.schedule_box_ing > li ul.detail_info li .dc_c {color:#000; font-weight:500;font-size:10px;width:calc(100% - 40px);}

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


.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){

	.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:10000001;}
.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 .sd_bg .sd_gra {position:absolute; bottom:20px; right:0; width:80%; height:1px;}
.side_box .sd_bg .sd_gra .gbw {position:absolute; left:0; width:100%; }
.side_box .sd_bg .sd_gra .gbw:after {content:""; display:block; padding-top:80%; }
.side_box .sd_bg .sd_gra .gbw.str {bottom:0; z-index:1;border:0px solid red;}
.side_box .sd_bg .sd_gra .gbw.sha {top:0; opacity:0.3; transform:translateY(-15%);border:0px solid blue;}
.side_box .sd_bg .sd_gra .gbw .step {position:absolute;left:0; width:100%;}
.side_box .sd_bg .sd_gra .gbw.str .step {bottom:0; }
.side_box .sd_bg .sd_gra .gbw.sha .step {top:0;}
.side_box .sd_bg .sd_gra .gbw.sha .step.sha_l_01 {top:-10%;}
.side_box .sd_bg .sd_gra .gbw img {width:100%;}

.side_box .sd_bg .sd_sha {position:absolute; bottom:0; right:-80px; height:40%;opacity:0.7;}
.side_box .sd_bg .sd_sha img {height:100%;}