/* div 가운데 정렬용 */
.box_content { display:flex; justify-content:space-between; height:100%; margin:0 auto; width:1200px; transition:0.1s }

.topbox_login { z-index:90; width:100%; height:40px; position:sticky;top:0; }
.topbox_login > .box_content { align-items:center; }
.topbox_login > .box_content span+span { margin-left:5px; }
#side_menu span+span { margin-left:5px; }

.topbox_menu { z-index:90; width:100%; position:sticky;top:40px;  }
.topbox_menu > .box_content ul li { height:81px; line-height:80px; font-size:1.2rem; letter-spacing:-0.5px; }
.topbox_menu > .box_content ul:first-child li:first-child > :first-child { font-weight:bold; font-size:1.4rem;color:#3a9ae0; }

.topbox_menu_small { z-index:90; width:100%; top:30px; display:none; }
.topbox_menu_small > .box_content { padding:0 5px; height:30px; justify-content:space-between; align-items:center; }
.topbox_menu_small > .box_content > * { flex-grow:0; text-align:center; }
.topbox_menu_small > .box_content > * > a { font-weight:bold; color:#3a9ae0; }



.dropmenu   { display:inline-block; margin-left:10px; }
.dropmenu > a:nth-child(n+1) { padding-left:15px; padding-right:15px; }
.dropmenu:last-child > a { padding-right:5px; }

.dropmenu:hover { border-bottom:solid 4px #226aa3; }
.dropmenu:hover > .dropmenu_sub { display:block; }

.dropmenu_sub { position:absolute; left:0; right:0; width:100%; background-color:#4B4D57; display:none; border-bottom:solid 1px #cccccc; transition:0.3s; }
.dropmenu_sub a { color:#dddddd; }
.dropmenu_sub a:hover { color:orange; }

.dropmenu_sub > .box_content {  height:200px; padding:30px;line-height:25px; background-color:#535661; color:white; }
.dropmenu_sub > .box_content > :first-child { flex-basis:200px; flex-grow:0; }
.dropmenu_sub > .box_content > :first-child > :first-child { font-size:2rem; }
.dropmenu_sub > .box_content > :last-child { font-size:1.1rem; padding:0; justify-content:flex-start; } /* flex_container */
.dropmenu_sub > .box_content > :last-child > * { flex-grow:0; flex-basis:calc( (100% - 40px)/5 ); }




.middlebox  {  }

.bottombox_copyright	{ line-height:1.5;  font-weight:bold; padding:30px 20px; vertical-align:middle; }
.bottombox_copyright .box_content { padding:10px 0; }


#jukebox {  padding:10px 0; position:relative; color:white;  flex-direction:column; } /* box_content */

.jukebox_button span:hover { font-weight:bold; color:#97dcff; }

.jukebox_now { display:flex; padding:5px 0; justify-content:space-between; }
.jukebox_now #jukebox_text { }  /* 제목 등 */
.jukebox_now #jukebox_title  { color:lightcoral; font-weight:bold; margin-right:5px; }
.jukebox_now #jukebox_singer { color:#b2a5ff; margin-left:5px; }
.jukebox_now #jukebox_time   { color:#CCA5B3; margin-left:13px; }
.jukebox_now #jukebox_playing { border:solid 1px #84F2B6;color:#F2E85A;border-radius:3px;margin:0 3px;padding:2px 5px; }
.jukebox_now .jukebox_button { color:#005985; }
.jukebox_now .jukebox_button span { font-weight:bold; cursor:pointer; } /* 세부창들 */

.jukebox_control { color:#007DBC; display:flex; justify-content:space-between; padding:5px 0; }
.jukebox_control .jukebox_button { }
.jukebox_control .jukebox_button span { margin:0 2px; cursor:pointer; }

.jukebox_now #jukebox_playing { animation: blink 1s linear infinite; }


#jukebox_player { position:relative; }

#jukebox_player > #jukebox_lyric  { padding:10px 0px 10px 10%; border:solid black 1px; position:absolute;width:100%; bottom:100px; background-color:rgba(0,0,0,0.5); font-size:1.1rem; }
#jukebox_player > #jukebox_lyric > #jukebox_lyric0 { color:#404040; }
#jukebox_player > #jukebox_lyric > #jukebox_lyric1 { color:orange; font-weight:bold; font-size:1.2em; }
#jukebox_player > #jukebox_lyric > #jukebox_lyric2 { color:#dddddd; }


#jukebox_list   { padding:10px 0;border-top: solid #dddddd 1px; background-color:#2F343D;width:100%;text-align:left; overflow:auto;height: -webkit-fill-available; --backgroundColorDeep:var(--fontColorDeep); } /* ;position:absolute;top:72px; min-height: 400px; */
#jukebox_list a { color:#808080; }
#jukebox_list a:hover { color:orange; }
#jukebox_list .current a { color:#EA625D; }


#jukebox_fulllyric  { padding:10px; border-top:solid #dddddd 1px; }
#jukebox_fulllyric a { color:#cccccc; }
#jukebox_fulllyric .current a { color:#F75C8C; }

#jukeSpeaker  { cursor:default; } /* 어따쓰이는 거지? */


/* addmenu_right */
#addmenu_right { position:fixed; text-wrap:nowrap; }
#addmenu_right:before	{ content:'QuickMenu';  width:100%; display:inline-block; padding:10px; background-color:var(--backgroundColored1); color:white; border:solid 1px var(--borderColor); border-radius:5px; }
#addmenu_right > div { margin:2px 0; padding:5px; width:100%; background-color:var(--backgroundColor); border:solid 1px var(--borderColor); border-radius:5px; cursor:pointer; }
#addmenu_right > div:hover { box-shadow: 0px 0px 10px #ffee10; transition: .2s; }

.flex_container > .box {  padding:20px; border:var(--border); border-radius:5px; background-color:transparent; margin:0; }


/* 2024-10-23 */
.scroll_process_bar { height:3px; background:orange; width:0%; margin-bottom:0px; transition: all 0.1s; }


.fixed_menu { display:block;position:fixed; width:35px; right:50px; bottom:35px; }
.fixed_menu div { cursor:pointer; margin:5px auto; width:35px;height:35px;line-height:35px;text-align:center;font-weight:bold;font-size:20px;border-radius:50%; color:#eeeeee;background-color:rgba(0, 0, 0, 0.3); transition: all 0.2s;}
.fixed_menu #b_btn0 { width:120px;border-radius:20px; margin-left:-40px; }
.fixed_menu #b_btn0 > * { display:inline-block; width:30px; }
.fixed_menu #b_btn3 { font-size:25px; }


.fixed_menu div.on { transform:rotate(45deg); background-color:red; }


#fixed_menu_top { position:fixed; }
#fixed_menu_top div { cursor:pointer; margin:5px auto; width:35px;height:35px;line-height:35px;text-align:center;font-weight:bold;font-size:20px;border-radius:50%; color:#eeeeee;background-color:rgba(0, 0, 0, 0.3);}


/* 2026-03-19 */
#side_menu_icon { cursor:pointer; display:none; }
#side_menu  { position:fixed;width:100%;height:100%;background-color:var(--backgroundColor);left:0;right:0;top:40px;bottom:100%;z-index:1; overflow: auto; }
#side_menu a { color:var(--fontColorDeep); }

.folding_button[data-foldingtargetid="side_menu"]	{ display:none; }
#topbox_login_logo { display:none; color:#3a9ae0; }
#topbox_login_logo a { color:#3a9ae0 !important; }

/* side_menu */
#side_menu li { padding:15px; border-bottom: solid 1px var(--borderColor); }
#side_menu > ul > li:has(ul) { padding:0; }
#side_menu > ul > li:not(:has(ul)) { font-weight:bold; background-color:var(--backgroundColorLight); }
#side_menu > ul li > ul > li { padding:10px 10px 8px 25px; cursor:pointer; }
ide_menu > ul li > ul > li:last-child { border-bottom-width:0; }


@media screen and (max-width:768px)
{
	body        { padding:0 5px; }
	/* .middlebox > .box_content:has(#iframe_body) { padding:0 5px; } */

	.topbox_login { border-bottom:solid 1px #eeeeee; }
	/*	.topbox_login > .box_content { padding:0 5px; } */

	#topbox_login_logo { display:inline-block; }

	#side_menu_icon { display:inline; }

    .topbox_menu { display:none !important; }
    .topbox_menu_small { display:block !important; }
	.topbox_menu_small > .box_content { gap: 10px; }
    .topbox_menu_scroll { top:69px !important; }



	.bottombox_copyright	{ line-height:1; padding:10px 10px; }
	.bottombox_copyright .box_content { padding:10px 0; gap: 10px; flex-wrap:wrap; }

	.icon.grade.user_grade1 { display:none; }
	.icon.grade.user_grade2 { display:none; }
	.icon.grade.user_grade3 { display:none; }
	.icon.grade.user_grade4 { display:none; }

    #jukebox_player > #jukebox_lyric  { bottom:50px !important; }
	.jukebox_control { flex-wrap: wrap; }

	.screen_hide { display:none !important; }

	/* .fixed_menu { display:none !important; } */
	.fixed_menu { right:20px; bottom:40px; }
	.fixed_menu #b_btn0 { display:none !important; }
	#addmenu_right { display:none !important; }
}
@media screen and (min-width:769px) and (max-width:1199px)
{
	.topbox_login > .box_content { padding:0 5px; }
	.middlebox > .box_content:has(#iframe_body) { padding:0 5px; }
}
@media screen and (min-width: 1200px) {

}