@charset "utf-8";
#songlimLibrary {--color: var(--songlim); --color-txt: var(--songlim-txt);   --subbg: var(--songlim-subbg);  --color01:var(--songlim01)}
#irumLibrary      {--color: var(--irum);     --color-txt: var(--irum-txt);        --subbg: var(--irum-subbg);       --color01:var(--irum01)}
#shsmallLibrary  {--color: var(--shsmall);  --color-txt: var(--shsmall-txt);    --subbg: var(--shsmall-subbg);   --color01:var(--shsmall01)}
#childengLibrary{--color: var(--childeng); --color-txt: var(--childeng-txt);  --subbg: var(--childeng-subbg); --color01:var(--childeng01); --color02:var(--childeng02); --color-txt02:var(--childeng-txt02) }
#kbLibrary        {--color: var(--kb);          --color-txt: var(--kb-txt);          --subbg: var(--kb-subbg);          --color01:var(--kb01)}

header{position: relative; padding: 4.1rem 0px}
header>.wrap{display: flex; align-items: center; }
h1{font-size: 0px;}
h1 a{display: inline-block; position: relative; top: .4rem; padding: 0rem 0px 0px 4.5rem; background: url(/share/images/inc/logo.png?v1) no-repeat left top / 3.4rem; font: 400 2.3rem 'SBaggro'; color: #222}
h2{position: absolute;}
nav .submenu div>ul>li>a[target=_blank]:after{display: inline-block; content:''; position: relative; top: -.2rem; vertical-align: middle; margin-left: .7rem; width: 2rem; height: 1.5rem; background:url(/annex/img/sub/ic_link.png) no-repeat left center / 3rem; }
#childengLibrary header{padding: 2.6rem 0px 3rem}
#childengLibrary h1 a{width: 25.2rem; top: 0px; padding: 0px; aspect-ratio: 4.5 / 1; background: url(/dream/img/logo.png) no-repeat left top / cover; font-size: 0px}

.dp_songlim, .dp_irum, .dp_shsmall, .dp_dream, .dp_kb{display: none;}
#songlimLibrary .dp_songlim{display: block;}
#irumLibrary  .dp_irum{display: block;}
#shsmallLibrary .dp_shsmall{display: block;}
#childengLibrary .dp_dream{display: block;}
#kbLibrary .dp_kb{display: block;}


/***************************************************************************************************************************/


@media screen and (min-width: 821px){
	.dp_mb{display:none;}
	nav .submenu:before,
	body.main #wrapper:before{content: ''; position: absolute; right:0px; top: 0px; width: calc((100vw - var(--wrapW)) / 2 + clamp(300px, 18.5%, 340px)); height: 610px; background-repeat:no-repeat; background-position:left -114px; z-index: -1;}
	/* body.main #wrapper:before{content: ''; position: absolute; left: calc(50% + min(20.5%, 400px)); top: 0px; width: 1920px; height: 610px; background-repeat:no-repeat; background-position:center -114px; z-index: -1;} */
	#songlimLibrary nav .submenu:before, #songlimLibrary.main #wrapper:before{background-image:url(/songlim/img/m_bg.png)}
	#irumLibrary nav .submenu:before, #irumLibrary.main #wrapper:before{background-image:url(/erum/img/m_bg.png)}
	#shsmallLibrary  nav .submenu:before, #shsmallLibrary.main #wrapper:before{background-image:url(/shsmall/img/m_bg.png)}
	#childengLibrary nav .submenu:before, #childengLibrary.main #wrapper:before{background-image:url(/dream/img/m_bg.png)}
	#kbLibrary nav .submenu:before, #kbLibrary.main #wrapper:before{background-image:url(/kb/img/m_bg.png)}
	nav{flex-grow: 1; margin: auto; max-width: 835px; z-index: 2;}
	body:not(.main) header .wrap>.h1{flex-grow: 1;}
	body:not(.main) header .wrap>nav{flex-grow: 2}
	nav ul.menu{display: flex; justify-content: space-around; }
	nav ul.menu>li{flex-grow:1}
	nav ul.menu>li>a{font-size: 2rem; letter-spacing: 0px; color: #333;}
	nav ul.menu>li.select>a{font-weight: bold; color: #111;}
	nav ul.menu>li.on>a{text-decoration: underline;}
	nav .submenu{opacity: 0; visibility: hidden; position: absolute; top: 80%; left: 0rem; right: 0rem; padding: 4rem 0px 3rem; transition: all ease .2s; overflow: hidden; background: rgba(255,255,255,.3); ;  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, .15); border-radius: 0px 0px 2rem 2rem; z-index: 1}
	/* nav ul.menu>li:nth-child(2) .submenu{opacity: 1; visibility: visible;} */
	nav .submenu:before{display: block; content: ''; position: absolute;  top: 0px; background-position-y: -23rem; z-index: -1; opacity: .7;}
	nav .submenu div>p{position: absolute; margin-top: -2rem; padding: 2rem 2vw; width: 25rem; color: #fff; background: linear-gradient(90deg, var(--color) 50%, var(--color01) 100%); border-radius: 1rem; font-size: 1.2em; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1)}
	nav .submenu div>ul{display: flex; flex-wrap: wrap; align-content:  flex-start; gap: 3%; margin-left: 12vw; padding-left: 6%; padding-bottom: 2rem; min-height: 28rem; border-left: 1px solid rgba(0,0,0,.0); letter-spacing: -.05rem; transition:border ease .5s}
	nav .submenu div>ul:has(:not(ul)){gap: 7%}
	nav .submenu div>ul:has(li:nth-child(7))>li{width: 15%;}
	nav .submenu div>ul>li>a{font-size: 1.2em; color: var(--color-txt); font-weight: 600}
	nav .submenu div>ul ul{margin: 1.5rem 0px 3rem}
	nav .submenu div>ul ul>li{position: relative; padding-left: 1rem; margin-top: 5px}
	nav .submenu div>ul ul>li:before{display: block; content: ''; position: absolute; left: 0px; top: .9rem; width: 3px; height: 3px; background: #ddd}
	nav .submenu div>ul ul>li>a{font-size: .94em;}
	nav ul.menu>li.on .submenu{opacity: 1; visibility: visible;}
	nav.on  ul.menu>li .submenu div>ul{border-left-color:rgba(0,0,0,.07);}
	nav.on ul.menu>li .submenu{ top: 100%; background: rgba(255,255,255,1); transition: top ease .5s, background ease .5s}
}

@media screen and (max-width: 1080px) and (min-width: 821px){
	header{padding-top: 2rem;}
	header>.wrap{flex-wrap: wrap; justify-content: space-between}
	nav{margin-top: 3rem; max-width: 100%; width: 100%; order: 3}
	nav .submenu div>p{display: none;}
	nav .submenu div>ul{border:0px; margin-left: 0px;}
}

@media screen and (max-width: 820px){
	.dp_pc{display:none;}
	.mb_fix{position: fixed;}
	header{padding: 0px !important; background:var(--color)}
	header>.wrap{padding-right: 4%; width: 100%; justify-content: space-between}
	header .h1{position: relative; margin-top: 3px; padding: 18px 75px 8px 4%; background: url(/annex/img/inc/mb_h1_bg.png) no-repeat bottom right  / cover}
	header .h1 h1{transform: scale(.9); transform-origin: left center; white-space: nowrap;}
	header .h1 .gnb_dglibrary{position: absolute; top: 2.4rem; right: 58px}
	header .h1 .gnb_dglibrary>a{display:  block; position: relative; width: 20px; height: 20px; font-size: 0px; border-radius: 50px; overflow: hidden; border: 2px solid #333}
	header .h1 .gnb_dglibrary>a:after{content: ''; position: absolute; right: 0px; margin-top: .3rem; margin-right: .5rem; width: .8rem; height: .8rem; border:2px solid #333; border-width:2px 0px 0px 2px; transform:rotate(225deg); transform-origin:center; box-sizing:border-box; transition:all ease .2s}
	header .h1 .gnb_dglibrary>a.close:after{transform:rotate(45deg); margin-top: .6rem; }
	header .h1 .gnb_dglibrary>ul{width: 180px; top: calc(100% + 10px); right: -30px;}
	#childengLibrary header .h1{padding-top: 5px; padding-bottom: 0px;}
	#childengLibrary header .h1 .gnb_dglibrary{top: 3rem;}
	nav{position: fixed; left: 0px; right: 0px; top: 0px; height: 100%; background: #fff; z-index: 901; overflow-y: auto/* ; display: block !important; */}
	nav>.dp_mb{position: sticky; top: 0px; padding-bottom:30px; z-index:1; background: #fff; border-bottom: 8px solid #eee}
	nav h1{margin: 20px 5%}
	nav .closeMenu{position: absolute; right: 4%; top: -5px; }
	nav .closeMenu a{display: block; width: 40px; height: 40px; font-size: 0px; overflow: hidden; text-indent: -5000px;}
	nav .closeMenu a:before,
	nav .closeMenu a:after{content: ''; position: absolute; left: 50%; top: 50%; margin-left: -30%; width: 60%; height: 2px; background: #333; transform: rotate(45deg)}
	nav .closeMenu a:after{transform: rotate(-45deg)}
	nav .myinfo{margin: 0px 5%;  }
	nav .myinfo a{display: block; padding: 2rem; background: var(--color-txt) url(/annex/img/inc/ic_logbanr04.png) no-repeat right 20px center / 20px; border-radius: 5px; color: #fff;}
	nav .mb_nav_banr{display: flex; justify-content: center; margin-top: 20px;}
	nav .mb_nav_banr>li{text-align: center; flex-grow: 1; max-width: 130px;}
	nav .mb_nav_banr>li a:before{display: block; content: '';  margin: 5px auto; width: 36px; height: 36px; background-color: #000}
	nav .mb_nav_banr>li:nth-child(1) a:before{-webkit-mask: url(/annex/img/inc/ic_logbanr01.svg) no-repeat 50% 50% / cover;  mask: url(/annex/img/inc/ic_logbanr01.svg) no-repeat 50% 50% / cover;}
	nav .mb_nav_banr>li:nth-child(2) a:before{-webkit-mask: url(/annex/img/inc/ic_logbanr02.svg) no-repeat 50% 50% / cover;  mask: url(/annex/img/inc/ic_logbanr02.svg) no-repeat 50% 50% / cover;}
	nav .mb_nav_banr>li:nth-child(3) a:before{-webkit-mask: url(/annex/img/inc/ic_logbanr03.svg) no-repeat 50% 50% / cover;  mask: url(/annex/img/inc/ic_logbanr03.svg) no-repeat 50% 50% / cover;}
	nav ul.menu{height: calc(100% - 185px)}
	nav ul.menu>li{border-top: 1px solid #ddd}
	nav ul.menu>li>a{display: block; position: relative; padding: 15px 6%; font-size: 1.125em; overflow:hidden}
	nav ul.menu>li>a:before{content: ''; position: absolute; right: 6%; top: 35%; width: 8px; height: 8px; border: 0px solid rgba(0,0,0,.3); border-width: 0px 2px 2px 0px; transform: rotate(45deg); transition: all ease .5s}
	nav ul.menu>li>a.close:before{top: 45%; transform: rotate(-135deg); }
	nav ul.menu>li:last-child{padding-bottom: 60px ;}
	nav .submenu{display: none;}
	nav .submenu div{width: 100%;}
	nav .submenu div>p{display:  none;}
	nav .submenu div>ul{padding: 30px 6% 30px; background: #f5f5f5; overflow: hidden}
	nav .submenu div>ul>li{float: left; width: 48%; margin: 1% 1%; background: #fff; box-shadow: 0px 1px 1px rgba(0,0,0,.1); border-radius: 5px; border:1px solid transparent; }
	nav .submenu div>ul>li:nth-child(2n-1){float: left}
	nav .submenu div>ul>li:nth-child(2n){float: right}
	nav .submenu div>ul>li>a{display: block; text-align: center; padding: 11px 10px 9px;  overflow:hidden}
	nav .submenu div>ul>li ul{border-top: 1px solid #ccc; padding: 10px 0px 20px; margin: 0px 10%}
	nav .submenu div>ul>li ul li{margin: 5px; font-size: .95em; font-family: 'SCDream-regular';}
	nav ul.menu>li.select>a{background: var(--color); color: #fff}
	nav .submenu div>ul>li.select{border-color:var(--color-txt); background:var(--subbg)}
	nav .submenu div>ul>li.select>a{color:var(--color-txt)}
	nav .submenu div>ul>li ul li.select>a{font-weight: bold; color:var(--color-txt)}
}