@charset "utf-8";
/* 분관메인 */

#contents>div:not(:first-child){position:relative; margin-top:6em}
/* .intro-container{container-name:intro-container ; container-type: inline-size;} */
.intro{position:relative}
/* 비주얼 */
.intro .visual{padding:6.6% 6% 3%; max-width:1240px; height:46rem; border-radius: 15px 15px 500px 15px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); background-repeat: no-repeat; background-position: right center; background-size:cover}
#songlimLibrary .intro .visual{background-image:url(/songlim/img/visual_songlim.jpg)}
#irumLibrary .intro .visual{background-image:url(/erum/img/visual_irum.jpg)}
#shsmallLibrary .intro .visual{background-image:url(/shsmall/img/visual_shsmall.jpg)}
#childengLibrary .intro .visual{background-image:url(/dream/img/visual_dream.jpg)}
#kbLibrary .intro .visual{background-image:url(/kb/img/visual_kb.jpg)}
/* 검색 */
.intro .m_search{position:relative; padding: .7rem 0px; padding-left: 9.5rem; margin-top:3rem; width:80%; max-width:550px; font-size:0px; background:rgba(0,0,0,.7) url(/annex/img/main/search_bg.png) no-repeat 3rem center / 3.6rem;  border-radius:5px; box-shadow:0px 2px 1px 0px rgba(0, 0, 0, 0.10);}
.intro .m_search:before{content: ''; position: absolute; margin: auto; left: 9.5rem; top: 0px; bottom: 0px; width: 1px; height: 30%; background: #fff; opacity: .5;}
.intro .m_search form{z-index:1;}
.intro .m_search input[type=text]{position: relative; background:transparent !important; padding:1.7rem 6%; width:calc(100% - 7rem); border:0px; font-size:1.7rem; color: #fff;; border-radius:5px}
.intro .m_search input[type=text]:focus {color: #fff !important; outline:0px; border:2px solid #fff; box-sizing:border-box}
.intro .m_search input[type=text]::placeholder{color:rgba(255,255,255,.5);}
.intro .m_search input[type=submit]{border:0px; width:7rem; height:6rem; background:url(../img/main/search_ic.png) no-repeat 40% center / 26px; font-size:0px;}
.intro .m_search input[type=submit]:focus-visible{background-color: #000 !important}
.intro .nosearch{font-family:'SBaggro'; font-size: 5rem; color: #fff; opacity:.4;}

/* 로그인 */
.intro .m_login{display:flex; flex-direction:column; justify-content:center; position:absolute; top:3rem; right:0px; text-align:center; padding:0px max(40px, 3.9%) 3%; width:33.334%; min-width:420px; height:43rem; border-radius:min(20rem, 12vw) 3rem min(15rem, 12vw) 3rem; background: var(--color, #144BDA); box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 0px 0px rgba(0, 0, 0, 0.15); color:#fff}
.intro .m_login .tit{font-family:'SBaggro'; font-size:clamp(3rem, 3vw, 3.8rem); font-weight:normal; margin: .3rem 0px; line-height: 120%;}
.intro .m_login .txt{opacity:.8;}
.intro .m_login form{margin-top:1rem;}
.intro .m_login input[type]{text-align:center; margin-top:5px; padding:14px 3% 15px; width:100%; max-width:300px; height:50px; border-radius:5px; border:0px; background:rgba(40,20,40,.15); color:#fff; font-family:'SCDream-regular'; }
.intro .m_login input:not([type=submit]){background-color:var(--color); background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)); background-blend-mode: color-burn;}
.intro .m_login input:not([type=submit]):focus-visible{background-color:var(--color-txt) !important; outline:2px solid #fff; !important; color: #fff !important; font-weight: bold;}
.intro .m_login input:not([type=submit]):focus-visible::placeholder{opacity:0}
.intro .m_login input::placeholder{color:rgba(255,255,255,.5)}
.intro .m_login input#login_id{border-top-left-radius: 3rem;}
.intro .m_login input[type=submit]{padding-left:calc(3.9% + 1.2rem); background-repeat: no-repeat; background-position: calc(50% - 3.5rem)  center; background-size: 2.5rem; background-color:var(--color-txt); box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.20); color:var(--color01)}
#songlimLibrary .intro .m_login input[type=submit]{background-image: url(/songlim/img/login_ic.png);}
#irumLibrary .intro .m_login input[type=submit]{background-image: url(/erum/img/login_ic.png);}
#shsmallLibrary .intro .m_login input[type=submit]{background-image: url(/shsmall/img/login_ic.png)}
#childengLibrary .intro .m_login input[type=submit]{background-image: url(/dream/img/login_ic.png)}
#childengLibrary .intro .m_login form{margin: 0px;}
#kbLibrary .intro .m_login input[type=submit]{background-image: url(/kb/img/login_ic.png)}
.intro .m_login input[type]:first-child{border-top-left-radius:4rem}
.intro .m_login input[type]:last-child{border-bottom-right-radius:3rem}
.intro .m_findid{margin-top:1.3rem; font-size:0px;}
.intro .m_findid>li{position:relative; display:inline-block; opacity:.8; padding:0px 1.8rem; font-family:'SCDream-regular';}
.intro .m_findid>li+li:before{display:block; content:''; position:absolute; margin:auto; left:0px; top:.5rem; bottom:.5rem; width:1px; background:rgba(255,255,255,.3);}
.intro .memBox .m_findid{text-align: right; margin-right: 5%;}
.intro .m_login.memBox .tit { font-size: clamp(2.5rem, 2vw, 3.5rem); font-weight: 300;  height: 4.5rem; margin-bottom: 1rem;}
.intro .m_login.memBox .txt{font-size: 1.6rem}
.intro .mem_banr{margin-top:1rem;}
.intro .mem_banr>li{margin-top:.5rem;}
.intro .mem_banr>li a{display:block; position:relative; text-align:left; margin:auto; max-width:300px; padding:1.3rem 2rem; background:var(--color-txt); color:#ffffff; border-radius:5px;  font-family:'SCDream-regular'; opacity: .8; transition:all ease .2s}
.intro .mem_banr>li a:after{display:block; content:''; position:absolute; right:2rem; top:40%; width:.5em; height:.5em; transform:rotate(45deg); border:2px solid #fff; border-width:2px 2px 0px 0px; opacity:.6; transition:all ease .2s}
.intro .mem_banr>li a:before{display: inline-block; content: ''; vertical-align: middle;   margin:0px 10px; width: 25px; height: 25px; background:url(/annex/img/main/membanr_ic.png) no-repeat center top / cover; opacity: .6; transition:all ease .2s}
.intro .mem_banr>li:nth-child(2) a:before{background-position-y:-25px;}
.intro .mem_banr>li:nth-child(3) a:before{background-position-y:-50px;}
.intro .mem_banr>li a:hover,
.intro .mem_banr>li a:hover:before,
.intro .mem_banr>li a:hover:after{opacity:1;}

.intro :where(.m_mypage, .m_join){position:absolute; bottom:-10px; right:0px; }
.intro :where(.m_mypage, .m_join) a{display:block; text-align:center; padding-top:5.2rem; width:9rem; height:9rem; letter-spacing:-.05rem; font-size:14px; background:url(/annex/img/main/join_ic.png) no-repeat center 1.6rem/3.5rem, var(--yellow); border-radius:100%; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); transition:all ease .3s; color: rgba(0,0,0,.8); text-decoration:none;}
.intro .m_mypage a{background-image:url(/annex/img/main/mybook_ic.png)}
.intro :where(.m_mypage, .m_join) a:hover{box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 5px 15px 0px rgba(0, 0, 0, 0.20)}
/* .intro :where(.m_mypage, .m_join) a:hover{background-size:3.5rem; background-position:center 1.6rem; } */
.intro .closed{position: absolute; bottom:-.5rem; right:11.5%; padding:0px max(40px, 3%); width:28.7%; min-width:410px; height:23rem; }
.intro .closed:before{content: ''; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; border-radius:2.5rem; border-top-right-radius:50rem; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); background: var(--color01); opacity: .95; }
.intro .closed *{z-index: 1;}
.intro .closed .tit{margin-top: 11.5%; }
.intro .closed .tit span{position: relative; display: inline-block; padding-left: 3.5rem; font-size: 1.8rem; color: rgba(0,0,0,.8); background: url(/annex/img/main/closed_ic.png)  no-repeat left center/3rem}
.intro .closed .day{margin-top:7%; display: flex; gap:3px; }
.intro .closed .day>li{flex-grow:1; max-width: 3.2rem; text-align: center; line-height: 3.2rem; background: var(--color-txt); border-radius:100px; color: #fff;}
.intro .closed .list{margin-top:5%; margin-left: .5rem;}
.intro .closed .list>li{position: relative; margin-top: .2rem; padding-left: 1rem; font-size:13px}
.intro .closed .list>li:before{content: ''; position: absolute; left: 0px; top: 7px; width: .6rem; height: 1px; background: rgba(0,0,0,.5);}
.intro .closed .btn_gomore{position: absolute; width: 100%; bottom: 4rem; max-width: 18.5rem; right: -12rem}
.intro .closed .btn_gomore a{display: block; position: relative; width:97%; text-align: right; padding-bottom: .5rem; padding-right: 17%; letter-spacing: -.1rem; border-bottom:1px solid rgba(0,0,0,.5); font-size: 1.4rem; transition:all ease .3s; z-index: auto}
.intro .closed .btn_gomore a:before,
.intro .closed .btn_gomore a:after{display: block; content: ''; position: absolute; right: 0px; bottom: 0px; transition:all ease .3s}
.intro .closed .btn_gomore a:before{width: 1.5rem; height: 1px; background: rgba(0,0,0,.5); transform:rotate(45deg); transform-origin:right bottom}
.intro .closed .btn_gomore a:after{margin-right:-1.5rem; margin-bottom:-1.7rem; width:4rem; height: 4rem; border-radius:5rem; background: #eaeaea; opacity:1; z-index: -1;}
.intro .closed .btn_gomore a:hover{width: 105%; padding-right: 20%;}
.intro .closed .btn_gomore a:hover:after{background: var(--color01);}

.intro .banr{display:flex; width:calc(100% - 550px); margin-top:3.4rem}
.intro .banr>li{flex:1 0 20%; position:relative; text-align:center; max-width:165px; }
.intro .banr>li a{display:inline-block; position:relative; color: #333;}
.intro .banr>li a:before{display:block; content:''; margin:0px auto 1.2rem; width:6rem; height:6rem; background:url(../img/main/banr_ic.png) no-repeat center top / 6rem }
.intro .banr>li.ic01 a:before{background-position-y:0px}
.intro .banr>li.ic02 a:before{background-position-y:-6rem}
.intro .banr>li.ic03 a:before{background-position-y:-12rem}
.intro .banr>li.ic04 a:before{background-position-y:-18rem}
.intro .banr>li.ic05 a:before{background-position-y:-24rem}
.intro .banr>li.ic06 a:before{background-position-y:-30rem}
.intro .banr>li a:hover{text-decoration:none;}
.intro .banr>li a:after{display:block; content:''; position:absolute; top:50%; left:50%; width:1rem; height:1rem; background:var(--color01); transition:all ease .3s; opacity:0; border-radius:100%; z-index:-1;}
.intro .banr>li a:hover:after{top:-1rem; left:calc(50% - 1rem); width:5.6rem; height:5.6rem; opacity:.1}
#kbLibrary .intro .banr>li a:hover:after{opacity:.2}
.intro .banr>li a span{position:relative;}
.intro .banr>li a span:after{display:block; content:''; position:absolute; left:25%; bottom:0px; width:50%; height:1rem; background:var(--color01); transition:all .3s ease .1s; opacity:0; border-radius:50px; z-index:-1;}
.intro .banr>li a:hover span:after{left:-5px; width:calc(100% + 10px); opacity:.2;}

.board{display: flex; gap:4%; justify-content: space-between;}
.board h3{margin-bottom:2rem;}
.notice{width:45%; position: relative;}
.notice ul li:nth-child(2)~li{border-top:1px dashed #d6d6d6}
.notice ul li a{font-size:1.8rem; letter-spacing:-.05rem;}
.notice ul li a:hover .date{text-decoration:none;}
.notice ul li:first-child{margin-bottom:1rem; background:var(--color); border-radius:1rem}
#childengLibrary .notice ul li:first-child{background:var(--color02); text-shadow: 0px 0px 2px var(--color-txt);}
.notice ul li:first-child a{display:block; padding:6.5% 7%; color:#fff}
.notice ul li:first-child a .tit{font-size:1.05em; font-family:'SCDream-regular';}
.notice ul li:first-child a .date{margin-top:1rem; font-size:.83em; font-family:'SCDream-regular';}
.notice ul li:not(:first-child){padding:min(2.6vw, 1.65rem) 1.5rem}
.notice ul li:not(:first-child) a{display:flex; gap:5%; justify-content:space-between; align-items:center; position:relative; padding-left:4rem;}
.notice ul li:not(:first-child) a:before{position:absolute; left:1rem; top:.4rem; content:''; width:.9rem; height:1.3rem; border:2px solid #484848; border-width:0px 3px 3px 0px; transform:rotate(45deg)}
.notice ul li:not(:first-child) a .tit{flex:1 1 calc(100% - 9rem - 5%); font-size:1em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.notice ul li:not(:first-child) a .date{flex:0 0 8.5rem; color:#666}
.notice ul li:last-child{padding-bottom:0px}
.culture{width:50.139%; position: relative;}
.culture ul{display:flex; gap:1.1rem 1.5%; flex-wrap:wrap}
.culture ul li{flex:1 0 49%; background:#F5F5F5; border-radius:1.3rem; overflow:hidden;  }
.culture ul li:nth-child(4)+li{display: none;}
.culture ul li a{display:flex; flex-direction:column; align-items:flex-start; padding:min(30px, 9%) min(40px, 11%) min(35px, 10%); color: #333; letter-spacing:-.1rem; transition:all ease .2s }
.culture ul li .tit{margin-top:.8rem; font-size:1.8rem; min-height: 5rem; letter-spacing: -.05rem;}
.culture ul li .view{display: inline-block; margin-top: 2.5rem; padding: 5px 2rem; border:1px solid #ddd; border-radius:5rem; font-size: .95em;}

.pgmzone{display:flex; gap:4%}
.program{display: block; flex-grow:1}
.program .libtab{flex-direction: row; width: 100%; margin-bottom: 1rem; padding-top: 3rem;}
.program .libtab ul>li{display:inline-block; margin-top:2px}
.program .libtabcon{padding: 0px;}
.program .libtabcon ul.list>li{padding: 1.5rem 1rem;}
.program .libtabcon ul.list>li:nth-child(4)~li{display: none;}
.pzone{position:relative; flex: 0 0 25%; max-height: 460px; border-radius:1rem; overflow:hidden; }
.pzone ul.list{display:flex; position:relative; align-items: flex-start; }
.pzone ul.list>li{flex:0 0 100%; max-height: 100%; border-radius:1rem; overflow:hidden; }
.pzone ul.list>li img{width:100%; height:100%; object-fit:cover}
.pzone ul.control{display:flex; align-items:center; position:absolute; right:0px; bottom:0px; padding:1rem 2rem ;background:rgba(0,0,0,.5); border-radius:1.3rem 0px 1.3rem 0px}
.pzone ul.control>li a{display:block; width:30px; height:30px; --arrWid:2.5px}
.pzone ul.control>li.cnt{text-align: center; width:5.3rem; line-height:100%; font-weight:bold; color:#fff; font-size:.95em}


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


@media screen and (max-width:1280px){
	.intro{display:flex; flex-wrap:wrap; gap:4%}
	.intro .visual{width: 100%; margin-bottom: 4%; border-radius:1.8rem; border-bottom-right-radius:8rem}
	.intro .m_login,
	.intro .closed{display: flex; flex-direction:column; align-items: center; position: relative; top: 0px; left: auto; right: 0px; padding: 5%; min-width: unset; height: auto; width: 48%}
	.intro .closed:before{border-radius:3rem  min(20rem, 12vw) 3rem min(15rem, 12vw) }
	.intro .closed .day>li{width: 3.2rem;}
	.intro .closed .btn_gomore{right: 4rem}
	.intro .banr{order:1; margin:3rem 0px; width:100%; overflow-x:auto; padding-bottom:5px}
	.intro .banr>li{max-width:unset;}
}

@media screen and (max-width:820px){
	#contents{--mbgap:5rem;}
	#contents>div:not(:first-child){margin-top:var(--mbgap)}
	.intro .visual{height:auto; margin:20px 0px}
	.intro .m_search{position: relative; bottom: -35px; margin: auto; margin-top: 80px; width: 100%; padding-left: 3rem; border-top-left-radius:4rem; background-image: none;}
	.intro .m_search:before{display: none;}
	.intro .m_search input[type=text]{padding: 10px 10px 8px; font-size: 1.6rem; letter-spacing: -0.05rem}
	.intro .m_login{display:none; position:relative; width:100%; border-radius:5vw}
	.intro .m_join{display:none}
	.intro .closed{display: block; margin-top: calc(var(--mbgap) - 3rem); padding:0px; min-width: 100%}
	.intro .closed:before{display: none;}
	.intro .closed .tit{margin-top: 0px;}
	.intro .closed .tit span{background: none; padding-left: 0px; font-family: 'SBaggro'; font-size: clamp(2.5rem, 3vw, 3.6rem); color: #222; font-weight: normal;}
	.intro .closed .day{justify-content: center; margin-top: 5px; padding:15px 10px; background:#f0f0f0; border-radius:.5rem}
	.intro .closed .day>li{background: #D63636;}
	.intro .closed .btn_gomore{right:0px; bottom:auto; top: 3rem;}
	.intro .closed .btn_gomore:before,
	.intro .closed .btn_gomore:after{display: none;}
	.intro .banr{order:0; margin-top: var(--mbgap)}
	.intro .banr::-webkit-scrollbar{height:3px;}
	.intro .banr::-webkit-scrollbar-thumb{border-radius:2px; background:#ddd;}
	.intro .banr::-webkit-scrollbar-thumb:hover{background:#333;}
	.intro .banr>li:before{display:block; content:''; position:absolute; left:5%; right:5%; height:6rem; background:#f0f0f0; border-radius:5px}
	.intro .banr>li a{font-size:min(2.9vw, .9em)}
	.intro .banr>li a:before{transform:scale(.8)}
	.intro .banr>li a:hover:after, .intro .banr>li a:hover :after{display: none;}
	.board{flex-direction: column;}
	.notice{width: 100%;}
	.notice h3{margin-bottom:1rem;}
	.notice ul li:last-child{border-bottom: 1px dashed #ddd; padding-bottom: min(2.6vw, 1.65rem)}
	.notice ul li:first-child a{font-size:1.6rem; }
	.notice ul li:first-child a .date{margin-top:5px}
	.notice ul li:not(:first-child) a{font-size:1.05em; padding-left:2rem;}
	.notice ul li:not(:first-child) a:before{margin-left:-1rem; transform:rotate(45deg) scale(.7)}
	.culture{width: 100%; margin-top:var(--mbgap)}
	.culture ul li .tit{min-height: unset; font-size: 1.6rem; line-height: 140%; display:-webkit-box; -webkit-line-clamp:3;  -webkit-box-orient:vertical;  max-height:6.5rem; overflow:hidden; text-overflow:ellipsis;}
	.pgmzone{flex-direction: column}
	.pzone{margin-top:var(--mbgap); width:100%; --pzoneW:65%}
	.pzone h3{margin-bottom: 1rem;}
	.pzone ul.list{gap:1rem}
	.pzone ul.list>li{max-width:290px}
}