@charset "utf-8";

/* 본관메인 */
:root{--color: var(--gulip); --color-txt: var(--gulip-txt);  --color01:var(--gulip01)}
body:before{content: ''; position: absolute; left: -50vw; top: -16vw; width: 200vw; height: 56vw; background: #f8f8f8; border-radius:100%; z-index: -1;}

#layerPop{opacity: 0; visibility: hidden ; z-index: -900; transition:opacity ease .3s; position:fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; padding-bottom: 10rem; overflow-y:scroll}
#layerPop.view{opacity: 1; visibility: visible; z-index: 900;}
#layerPop:before{content: ''; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,.8)}
.layerPop{display: block; position: relative; margin: auto; width: 87%; max-width: 1655px; color: #fff;}
.layerPop .layerPop_close{margin: 4rem auto 1rem; width: 8rem; }
.layerPop .layerPop_close a{display: block; position: relative;  height: 8rem; background: #000; font-size: 0px; border-radius:100px}
.layerPop .layerPop_close a:before,
.layerPop .layerPop_close a:after{content: ''; position: absolute; top: 50%; left: 25%; width: 50%; height: 1px; background: #fff; transform:rotate(45deg)}
.layerPop .layerPop_close a:after{transform:rotate(-45deg)}
.layerPop .todayBox{display: flex; flex-wrap:wrap; justify-content:space-between; margin: 0rem 0px 1rem;}
.layerPop .todayBox p{font-family:'SCDream-regular'}
.layerPop .todayBox p.count{font-size:1.8rem;}
.layerPop .todayBox p.today{padding: 8px 20px; background: #fff; border-radius:.5rem; color: #333;}
.layerPop .todayBox p.today input[type=checkbox]{width: 1.8rem; height: 1.8rem; background: #000; appearance:none; -webkit-appearance:none; border-radius:2px}
.layerPop .todayBox p.today input[type=checkbox]+label{margin-left:1rem; vertical-align: middle;}
.layerPop .todayBox p.today input[type=checkbox]:checked{width: 1.8rem; height: 1.8rem; background: #222; border-radius:2rem; border:.4rem solid #ffcc00; outline:.3rem solid #333}
.layerPop .popList>ul{display:flex; flex-wrap:wrap; gap:15px .9%; position: relative;}
.layerPop .popList>ul>li{width:24.3%}
.layerPop .control{display: none;}
.layerPop_open{position: sticky; height:0px; top: 20px; z-index: 1;}
.layerPop_open a{float:right; display: block; text-align: center; padding:4rem 1rem 2rem; width: 3.9rem; left: calc(100vw - 3.9rem); line-height: 1.2; background:#FFDE32 url(/main/img/ic_layerPop.png) no-repeat center .5rem / 100%; border-radius:.7rem 0px 0px .7rem; overflow:hidden; box-shadow:0 3px 0px rgba(0,0,0,.1)}

h1{margin-left:3.2%; margin-top:4rem; display: inline-block; padding: 0rem 0px 0px 5rem; background: url(/share/images/inc/logo.png?v1) no-repeat left top / 3.7rem; font:300 1.6rem 'SBaggro'; line-height: 1.25;}
h1 span{display: block; font: 400 2.3rem/3rem 'SBaggro'; color: #222}

/* intro */
.intro{position: relative; margin:3.8rem auto; padding-bottom:8rem; width:94%; min-height: calc(100vh - 19rem); background:url(/main/img/intro_bg.png) no-repeat left top, linear-gradient(270deg, #486EF3 0%, #48A1F3 80.73%, #48C0F3 100%); border-radius: 40px 40px 300px 40px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10);}
.intro{background:url(/main/img/intro_bg.png) no-repeat left top, linear-gradient(270deg, #0D3191 0%, #0D3191 57.69%, #2D56C3 100%);}
.intro:After{display:block; content:''; clear:both;}
.intro h3{float:left; font-family:'SBaggro'; font-size:min(10vw, 7rem); color:var(--color)}
.intro h3 span{display:block; font-weight:300; font-size:1.8rem; color:rgba(0,0,0,.3)}
.intro .m_search{position:relative; top: -5rem; margin:0px auto; padding: 2rem; width:57%; background: var(--color01); border-radius:1rem; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);}
.intro .m_search form{display:flex; }
.intro .m_search form>div{font-size:1.8rem;}
.intro .m_search .selbox{position:relative; width:200px;  }
.intro .m_search .selbox:after{content:""; position:absolute; right:10px; top:45%; width:1rem; height:1rem; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) translateY(-50%);}
.intro .m_search .inpbox{flex-grow:1}
.intro .m_search input,
.intro .m_search select{border:0px; padding:1.9rem 0rem; padding-left:2rem; width:100%; height: 100%; background:none; font-size:1em; color: #fff; ; text-shadow:0px 0px 1px rgba(0,0,0,.5); appearance:none;  -webkit-appearance:none; outline:0px}
.intro .m_search select:focus {color: #fff !important; outline:0px; background: rgba(0,0,0,.2) !important;}
.intro .m_search input[type=text]{width:calc(100% - 9rem); padding:0px 2rem; border-radius:5px; }
.intro .m_search input[type=text]:focus {color: #fff !important; outline:0px; background: rgba(0,0,0,.2) !important;}
.intro .m_search input[type=submit]{width:8rem; font-size:0px; background:url(../img/search_ic.png) no-repeat center center / 4rem !important}
.intro .slogan{text-align: center; margin:5vh 0px 9vh; color: #222;}
.intro .slogan>p{letter-spacing: -.5rem; font-weight: 200;}
.intro .slogan .tit{font-size:6.2rem; }
.intro .slogan .txt{margin-top: 1rem; font-size: 2.3rem;}
.intro .slogan img{max-width: 100%;}
.libraries{display:flex; justify-content:space-between; gap:1.5rem; position:relative; margin:0px auto; padding: 0px 3rem; width:90%; max-width: 1260px}
.libraries:After{content:''; position: absolute; height: 15px; bottom: 0px; left: 0px; right: 0px; border-radius: 3px; background: #A6C2DC; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);}
.libraries>li{flex:1 0; min-width: 200px; }
.libraries>li a{display: block; position: relative; top: 0px; padding: 14% 15%; padding-bottom: 14rem; height: 100%; border:1px solid #666; border-radius:1.5rem; box-shadow:2px 0px 0px rgba(0,0,0,.2); background-color: #fff; background-repeat: no-repeat; background-position: right 10% bottom 2rem; background-size:12rem; word-break:keep-all; transition:all ease .5s;; text-decoration: none}
.libraries>li a:hover{top:-18px;;  box-shadow:0px 1px 8px rgba(20,20,100,.5), 0px 1px 50px rgba(20,20,100,.3)}
.libraries>li:nth-child(1) a{background-image: url(/main/img/ic_songlim.png);}
.libraries>li:nth-child(2) a{background-image: url(/main/img/ic_irum.png);}
.libraries>li:nth-child(3) a{background-image: url(/main/img/ic_shsmall.png);}
.libraries>li:nth-child(4) a{background-image: url(/main/img/ic_childeng.png);}
.libraries>li:nth-child(5) a{background-image: url(/main/img/ic_kb.png);}
.libraries>li a:before,
.libraries>li a:after{content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; right: 1px; border:1px solid #aaa; border-width:0px 1px 0px 0px; border-radius:1.5rem}
.libraries>li a:after{right: 3px;}
.libraries>li a span{color: #888; font-size: 1.3rem; font-family: 'SCDream-regular';}
.libraries>li a .name{margin-top: 1rem; --fz:2.6rem; max-height: calc(var(--fz) * 2.5); font: 400 var(--fz) 'SBaggro'; color: #222; transition:all ease .5s}
.libraries>li:nth-child(1) a:hover .name{color: var(--songlim-txt)}
.libraries>li:nth-child(2) a:hover .name{color: var(--irum-txt)}
.libraries>li:nth-child(3) a:hover .name{color: var(--shsmall-txt)}
.libraries>li:nth-child(4) a:hover .name{color: var(--childeng-txt)}
.libraries>li:nth-child(5) a:hover .name{color: var(--kb-txt)}
.libraries>li a .comingsoon{opacity:0; position: absolute; top: 0px; left: 0px; right: 3px; bottom: 0px; text-align: center; padding:18% 10% 10px; border-radius:1.5rem;  background:#fff url(/main/img/ic_childeng.png) no-repeat  right 10% bottom 2rem / 12rem; transition:all ease .5s; font: 400 1.8rem 'SBaggro'; color: #333;}
.libraries>li a.hover .comingsoon{opacity:1; background-position: center 12rem; }

.mytown{position: absolute; right: 1.5rem; bottom: 4rem;}
.mytown a{display: flex; gap:1rem; flex-direction: column; align-items: center; justify-content: center; position: relative; top: 0px; text-align: center;  width: 17rem; height: 17rem; background:#FFDE32 ; color: #333; border-radius:20rem; box-shadow:0px 1px 4px rgba(0,0,0,.15); font-size:1.7rem; line-height: 1.2; transition:all ease .5s; text-decoration: none;}
.mytown a:before{display: block; content: ''; margin-top: -1rem; width: 6rem; height: 6rem; background: url(/main/img/ic_mytown.png) no-repeat center center / cover}
.mytown a:after{opacity:1; content: ''; position: absolute; left: 0px; right: 0px; bottom: -1.8rem; margin: auto; width: 11.8rem; height: 2rem; background: url(/main/img/mytown_shadow.png) no-repeat center center / cover; transition:all ease .5s}
.mytown a:hover{top: -1rem}
.mytown a:hover:After{opacity:.5; bottom:-3rem}
.scroll{position: absolute; margin: auto; width: 10rem; left: 0px; right: 0px; bottom: -4rem;}
.scroll a{display: block; position: relative; top: 0px; text-align: center; height: 10rem; background:var(--color-txt) url(/main/img/ic_scroll.png) no-repeat center center / 24px; border-radius:20rem; box-shadow:0px 2px 4px rgba(0,0,0,.15); font-size: 0px; transition:all ease .5s}
.scroll a:hover{top: -.5rem; background-position: center bottom 1rem}

/*** 컨텐츠 ***/
#contents>.wrap>div{position:relative; margin-top:7em}
.notizone{display:flex; justify-content:space-between; width:100%; gap:4.445%}
.notice{display:flex; flex-direction:column; position:relative; max-width:1016px;}
.board .libtabcon{flex-grow:1}
.board .libtabcon ul{display:flex; gap:1.3rem; flex-wrap:wrap; height:100%;}
.board .libtabcon ul li{flex:1 1 32%;  }
/* .board .libtabcon ul li:first-child:last-child{flex-grow:0} */
.board .libtabcon ul li a{display:flex; flex-direction:column; align-items:flex-start; height:100%; color: #333; border-radius:1.3rem; overflow:hidden; letter-spacing:-.1rem; transition:all ease .2s }
.notice .libtabcon ul li a{padding:min(7%, 22px) min(9.5%, 35px) min(7.5%, 26px);  border:1px solid #666}
.culture .libtabcon ul li a{padding:min(8%, 26px) min(10%, 38px) min(11%, 37px); background:#EFF2F8}
.board .libtabcon ul li .tag_place{display:inline-block; padding:6px 2rem 6px 0px; border-radius:0px 30px 30px 0px; box-shadow:-50px 0px 0px rgba(0,0,0,0); transition:all ease .2s}
.board .libtabcon ul li .tit{flex-grow:1; margin-top:.8rem; font-size:1.8rem}
.board .libtabcon ul li .date{opacity:.6; margin-top: 15px;}
.culture{margin-top: 7rem; position: relative;}
/* 팝업존 */
.pzone{position:relative; flex-shrink:0; width:360px; --pzoneH : 460px; height:calc(var(--pzoneH) * 2 + 1.1rem); overflow:hidden;}
.pzone ul.list{display:flex; gap:1.1rem; flex-direction: column; position:relative; align-items: flex-start}
.pzone ul.list>li{flex:0 0 var(--pzoneH); height:var(--pzoneH); border-radius:1.3rem; overflow:hidden}
.pzone ul.list>li>a{display:block;}
.pzone ul.control{display:flex; flex-direction: column; gap:1.1rem; justify-content: center; position:absolute; right:0px; top:0px; height: 100%; border-radius:1.3rem 0px 1.3rem 0px}
.pzone ul.control>li a{display:block; width:5rem; height:5rem; --arrWid:3px; background:rgba(0,0,0,.5); overflow:hidden}
.pzone ul.control>li.prev a{border-radius:.5rem 0px 1.3rem 0px}
.pzone ul.control>li.next a{border-radius:0px 1.3rem 0px .5rem}
.pzone ul.control>li.cnt{display: none; text-align: center; width:5.3rem; line-height:100%; font-weight:bold; color:#fff; font-size:.95em}


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

@media screen and (max-width:1280px){
	.intro{--gap:.8rem; min-height: auto;}
	.libraries{flex-wrap:wrap; justify-content: flex-start; gap:var(--gap); padding:2rem 0px 0px }
	.libraries br.dp_mb{display: block;}
	.libraries:After{display: none;}
	.libraries>li{flex:0 0 calc(33% - var(--gap)/2); min-width: auto;}
	.libraries>li a{padding: min(1.5rem,12%) min(2rem, 15%); padding-bottom:4rem; background-size:7rem; background-position:right 10% bottom}
	.libraries>li a[href*=dream]{letter-spacing: -2px; background-size: 6.5rem;}
	.libraries>li a:hover{top:0px; }
	.libraries>li a span{font-size:1.2rem}
	.libraries>li a .name{margin-top: .2rem; font-size: 2rem;}
	.libraries>li a .comingsoon{opacity:0; padding-top:12rem; background-position:right 10% bottom 1rem; background-size:8rem; }
	.libraries>li a:hover .comingsoon{background-position-y:2rem; }
	.mytown{transform: scale(.9); bottom: 3rem;}
}

@media all and (min-width:821px){
	.dp_mb{display:none;}
	.notice .libtabcon ul li a:hover{color:#fff; border-color:rgba(0,0,0,.8); box-shadow:.3rem .3rem 0px var(--boxcolor), 0px 5px 11px rgba(0, 0, 0, 0.4); background:#333; text-decoration:none;}
	.notice .libtabcon ul li.songlim a{--boxcolor:var(--songlim-txt)}
	.notice .libtabcon ul li.songlim a:hover{background:var(--songlim);}
	.notice .libtabcon ul li.irum a{--boxcolor:var(--irum-txt)}
	.notice .libtabcon ul li.irum a:hover{background:var(--irum);}
	.notice .libtabcon ul li.shsmall a{--boxcolor:var(--shsmall-txt)}
	.notice .libtabcon ul li.shsmall a:hover{background:var(--shsmall);}
	.notice .libtabcon ul li.dream a{--boxcolor:var(--childeng-txt)}
	.notice .libtabcon ul li.dream a:hover{background:var(--childeng);}
	.board .libtabcon ul li .tit{min-height: 5.4rem;}
	.notice .libtabcon ul li a:hover *{text-shadow:0px 0px 3px rgba(0,0,0,.2)}
	.notice .libtabcon ul li a:hover .tag_place{margin-top:-.3rem; margin-bottom:.3rem; background:rgba(0,0,0,.7); text-shadow:none; box-shadow:-50px 0px 0px rgba(0,0,0,.7); color: #fff;}
}

@media screen and (max-width:820px){
	.dp_pc{display:none;}
	#layerPop{overflow:hidden }
	.layerPop .popList>ul{flex-wrap: nowrap; gap:10px}
	.layerPop .popList>ul>li{flex-shrink:0; width:80%;}
	.layerPop_open{top:80vh;}
	.layerPop_open a{padding:8px 0px 15px 5px; width:100px; border-right:5px solid #FFDE32; background-image:none}
	.layerPop_open a:before{display: block; content: '';  margin-left: 10%; margin-bottom: 15px; width: 90%; height: 6px; border-radius:50px 0px 0px 50px; background: #fff; box-shadow:inset 0px 1px 1px rgba(0,0,0,.2)}
	.layerPop .todayBox{align-items: center}
	.layerPop .todayBox p.today{padding-right: 0px; background: transparent; color: #fff;}
	.layerPop .todayBox p.today input[type=checkbox]{background:#fff;}
	body:before{display: none;}
	h1 span{letter-spacing: -1px;}
  	.intro{display:flex; flex-direction:column; border-radius:0px; margin: 3rem 0px 0px; padding:0px var(--posR) 4rem; width: 100%; background-size:100%; --posR:6%;  }
	.intro>*:not(.slogan){order:1}
	.intro .m_search{top:0rem; width:100%; padding: 0px; overflow:hidden}
	.intro .m_search form{flex-direction:column}
	.intro .m_search .selbox{padding: 0px; width:100%; border-bottom:1px solid rgba(0,0,0,.1)}
	.intro .m_search .selbox:After{right: 2rem;}
	.intro .m_search .selbox select{padding:10px 2.5rem; height:5rem;}
	.intro .m_search .inpbox{padding: 0px; width: 100%; border-radius:.5rem }
	.intro .m_search .inpbox input{height:5rem;}
	.intro .m_search input[type=submit]{background-size:2.5rem !important}
	.intro .slogan{margin: 30px 0px}
	.intro .slogan p{color: #fff; letter-spacing: 0px;}
	.intro .slogan p.tit{font-size:clamp(2rem, 7vw, 3rem)}
	.intro .slogan p.tit span{font-weight: 500; letter-spacing: -2px;}
	.intro .slogan p.txt{font-size: 1em;}
	.libraries{width: 100%;}
	.libraries>li{flex:0 0 calc(50% - var(--gap)/2)}
	.mytown{right: var(--posR); bottom: 4rem; width:calc((100% - var(--posR)*2) / 2 - var(--gap)); z-index: 1; transform: scale(1);}
	.mytown a{padding:2rem 1rem; width:100%; ; height:13rem; background: rgba(0,0,0,.2); border-radius:1.8rem;  box-shadow:none; color: #fff; font-size: 1.5rem;}
	.mytown a:before{background-image: url(/main/img/ic_mytownW.png);}
	.mytown a:after{display: none;}
	.mytown a:hover{top:0rem}
	.scroll{display: none;}
	#contents{margin-top:1rem ;--mbgap:4rem}
	#contents>.wrap>div:not(:first-child){position:relative; margin-top:var(--mbgap)}
	.notizone{flex-direction:column; top: -2rem;}
	.board{order: 1}
	.board .libtabcon ul>li:nth-child(4)~li{display: none;}
	.notice{margin: 0px; margin-top:var(--mbgap); }
	.notice .libtabcon ul{overflow-x:auto; gap:3px}
	.notice .libtabcon ul>li{flex:0 0 100%; width:100%}
	.notice .libtabcon ul>li a{display: block; position: relative; padding:15px 8% 20px}
	.notice .libtabcon ul li .tit{margin-top: 0px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; word-break:break-all}
	.notice .libtabcon ul li .date{position:absolute; right: 8%; top: 20px; margin-top: 0px;}
	.board .libtabcon ul li .tit{font-size: 1.6rem; line-height: 140%;}
	.pzone{width:unset; height:unset; margin-top: 0px;}
	.pzone h3{margin-bottom: 1rem;}
	.pzone ul.list{gap:1rem; flex-direction: row; }
	.pzone ul.list>li{flex:0 0 65%; width:unset; height:unset; max-width:290px; border-radius:1.3rem; overflow:hidden}
	.pzone ul.control{top:1.3rem; justify-content: flex-start}
	.pzone ul.control>li:not(.cnt){display: none;}
	.pzone ul.control>li.cnt{display: block; font-size: .9em; color: #666}
}