@charset "utf-8"; :root{ --point:#d72323; --gra:linear-gradient(90deg, #38C7A5 0%, #4C7CF8 37.50%, #6A2AD2 69.79%); --gulip:#0E3291; --gulip-txt:#231A5B; --gulip01:#77C949; --songlim:#1354DE; --songlim-txt:#09286A; --songlim-subbg: #EFF6FF; --songlim01:#28B1FE; --irum:#20A055; --irum-txt:#0D6431; --irum-subbg: #F2F9F1; --irum01:#82CB48; --shsmall:#924bdd; --shsmall-txt:#59278E; --shsmall-subbg: #FBF7FF; --shsmall01:#cb85eb; --childeng:#FFCD1E; --childeng-txt:#F66930; --childeng-subbg: #FFFAED; --childeng01:#FFEC8A; --childeng02:#FCB01D; --childeng-txt02:#F88737/*DB3B91*/; ; --kb:#f56383/* #FF7291*/; --kb-txt:#D83458; --kb-subbg: #FFEFF3; --kb01:#ff93b1/* #FFA3BD */; --yellow:#FFDE32; --wrapW:1440px} body{overflow-x:hidden;} .wrap{margin:auto; width:92%; max-width:var(--wrapW)} #contents, footer{word-break:keep-all; word-wrap:break-word; overflow-wrap:anywhere} .btn_arrL, .btn_arrR, .btn_arrT, .btn_arrB{display:block; position:relative; font-size:0px; overflow:hidden; text-indent:-50000px; --arrWid:2px; --arrCol:#fff;} .arrWid1{--arrWid:1px} .btn_arrL:before, .btn_arrR:before, .btn_arrT:before, .btn_arrB:before{display:block; content:''; position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; width:30%; height:30%; transform:rotate(45deg); border-style:solid; border-color:var(--arrCol)} .btn_arrL:before{left:20%; border-width:0px 0px var(--arrWid) var(--arrWid)} .btn_arrR:before{right:20%; border-width:var(--arrWid) var(--arrWid) 0px 0px } .btn_arrT:before{top:20%; border-width:var(--arrWid) 0px 0px var(--arrWid) } .btn_arrB:before{bottom:20%; border-width:0px var(--arrWid) var(--arrWid) 0px} #gnb{display: flex; gap:1.5rem} #gnb *{font-size: 1.4rem} #gnb a{display: block;} #gnb>[class^=gnb_]>a:before{display: inline-block; content: ''; vertical-align: middle; position: relative; top: -1px; margin-right: 3px; --size: 15px; width: var(--size); height: var(--size); background: url(/share/images/inc/ic_gnb.png?v1) no-repeat left top / cover; transition:all ease .5s} #gnb .gnb_dglibrary a.close:before{transform:rotate(180deg)} #gnb .gnb_login a:before{background-position-y: calc(0px - var(--size))} #gnb .gnb_logout a:before{background-position-y: calc(0px - var(--size)*2)} #gnb .gnb_mypage a:before{background-position-y: calc(0px - var(--size)*3)} #gnb .gnb_menu a:before{background-position-y: calc(0px - var(--size)*4)} #gnb .gnb_myroom a:before{background-position-y: calc(0px - var(--size)*5)} #gnb :where(.gnb_mypage, .gnb_myroom) {display: none;} #main #gnb{position: absolute; right: 4%; top: 3.7rem; gap:.8rem} #main #gnb :where(.gnb_mypage, .gnb_myroom) {display: block;} #main #gnb a{padding: 5px 2rem 4px; border:2px solid #333; border-radius:50px; color: #333;} .gnb_dglibrary ul{display: none; position: absolute; top: 80%; padding: 1.5rem 2rem; background:#fff; border:1px solid #fff; border-radius: .8rem; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10), 0px 6px 8px 0px rgba(0, 0, 0, 0.20); z-index: 900;} .gnb_dglibrary ul li{padding: .8rem .5rem} .gnb_dglibrary ul li+li{border-top:1px dashed #ddc} .gnb_dglibrary ul li a{position:relative; padding-left:1rem} .gnb_dglibrary ul li a:before{content: ''; position: absolute; left: 0px; top: 1rem; width: .6rem; height: 1px; background: #aaa;} .gnb_dglibrary ul li a:hover{color:var(--color-txt)} footer{margin: 3rem auto; padding: 0px 8rem; max-width: calc(var(--wrapW) + 10px); background: #f5f5f5; margin-top: 10rem; color: #666; border-radius: 1.5rem} footer .bottom{display: flex; align-items:center; gap: 3rem; padding: 4rem 0px 3.6rem; border-bottom: 1px solid rgba(0,0,0,.1)} footer .btm_menu{flex-grow: 1} footer .btm_menu li{display: inline-block;} footer .btm_menu li+li:before{display: inline-block; content:'/'; position: relative; top: -.2rem; margin: 0px 1rem 0px .8rem; font-family:dotum; font-size: 1.3rem; color: #ccc;} footer .btm_menu li a[href*=policy]{color: var(--color)} #childengLibrary footer .btm_menu li a[href*=policy]{color: var(--color-txt)} footer .btm_library{margin-top: 3rem;} footer .btm_library>dl{display:flex; margin:.5rem 0px; } footer .btm_library dt{min-width: 13%; margin-right:1rem; color: #333;} footer .btm_library dd{font-size: 1.4rem;} footer .relatedsite{display: flex; gap:1%; width: 28%} footer .relatedsite>div{flex:0 0 49.5%; position: relative; } footer .relatedsite>div>a{display: none; position: relative; padding: 1rem 1.5rem; font-size: 1.4rem; border: 1px solid #ddd; border-radius: .6rem; z-index: 2; background: #f5f5f5} footer .relatedsite>div>a:after{content: ''; position: absolute; right: 1.3rem; top: 50%; width: .8rem; height: .8rem; border:1px solid #aaa; border-width:0px 1px 1px 0px; transform:rotate(45deg)} footer .relatedsite>div>a.view{display: block; } footer .relatedsite>div>a.view:After{border-width:1px 0px 0px 1px; } footer .relatedsite>div>a span{font-size: 0px;} footer .relatedsite>div>div{display: none; position: absolute; right: 0px; width: calc(200% + 5px); max-width: 220px; bottom: calc(100% + -1px); padding: 1rem 0rem; ; border: 1px solid #ddd; border-radius: .6rem; background: #fff; z-index:1;} footer .relatedsite>div+div>div{left: 0px; right: auto} footer .relatedsite ul{padding: 1rem 2rem; max-height: 410px; overflow-y:auto} footer .relatedsite ul li{padding:.6rem 0px; ; font-size:1.3rem; letter-spacing:-.1rem; font-family:'SCDream-regular'} footer .relatedsite ul li+li{border-top: 1px dotted #ddd;} footer .relatedsite ul li a{font-family:'SCDream'} footer .btm_info{display: flex; justify-content: space-between; gap:3rem; align-items:center; padding: 5rem 0px} footer .btm_library+.btm_info{padding-top: 2rem;} footer p.name{padding-top: .3rem; color: #484848; font: 500 2.3rem/3rem 'SBaggro'; white-space: nowrap;} footer address{flex-grow: 1; font-size:1.4rem} footer .tel{margin-left:1rem; color: #333; } footer .tel:before{display: inline-block; content:''; vertical-align: middle; margin-top: -1px; margin-right: .5rem; width: 1.5rem; height: 1.5rem; background: url(/share/images/inc/ic_tel.png) no-repeat left center / cover} footer .copy{letter-spacing: 0px; font-size: 1.4rem} #login{display: flex; min-height: 100vh; ;} #login>div{flex:0 0 40%; display: flex; flex-direction: column; justify-content: center; } #login>div.welcome{position: relative; text-align: center; padding: 20px; background:var(--color, var(--gulip)); color: #fff} #login>div.welcome:before{content: ''; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background:url(/share/images/inc/login_bg.jpg) no-repeat center center / cover, rgba(0,0,0,1); opacity: .1; z-index: 0;} #login>div.welcome *{z-index: 1;} #login>div.welcome .logo{position: absolute; top: 3rem; left: 3rem; display: inline-block; color: #fff; text-align: left; padding: .2rem 0px 0px 6rem; background: url(/share/images/inc/logoW.png) no-repeat left .5rem / 4.5333rem; font:300 1.6rem 'SBaggro'; line-height: 1.25;} #login>div.welcome .logo span{display: block; font: 400 2.3rem/3rem 'SBaggro'} #login>div.welcome .txt{text-align: center; font:300 2.5em/1.5 'SBaggro' } #login>div.welcome .joinus{text-align: center; margin-top: 2rem;} #login>div.welcome .joinus a{display: inline-block; padding: 1rem 2em; border:3px solid #fff; background:rgba(0,0,0,.3); border-radius:6rem; font-size: 1.2em;} #login>div.con{position: relative; margin:5rem auto 7rem; padding-bottom: 4rem; max-width: 500px; flex-grow:1; } #login>div.con h1{margin-bottom: 6rem;} #login>div.con .tit{padding-bottom:3rem; margin-bottom: 3rem; font-size: 3rem; font-family: 'SCDream-regular'; color: #222; border-bottom:1px solid #222} #login>div.con form{padding: 0px 1rem;} #login>div.con input{text-align: center; width:100%; padding: 2rem 1rem; background: #f0f0f0; border-radius:.8rem; border:0px; font-size: 1.6rem;} #login>div.con input{margin-top: 1rem;} #login>div.con input[type=submit]{background: var(--color-txt, var(--gulip-txt)); color: #fff; margin-top: 2rem;} #login>div.con .findid{text-align: right; margin-top: 2rem;} #login>div.con .findid>li{position: relative; display: inline-block; padding: 0px 2rem;} #login>div.con .findid>li+li:before{display: block; content: ''; position: absolute; left: 0px; top: .4rem; width: 1px; height: 1.2rem; background: #ddd;} #login>div.con .joinus{margin-top: 5rem;} #login>div.con .joinus a{display:block; text-align: center; padding: 1.5rem .5rem; border:2px solid #333; border-radius:.8rem} #login>div.con .libraries{display: flex; flex-wrap:wrap; gap:6px; margin-top: 1rem;} #login>div.con .libraries>li{flex:1 0 calc(50% - 3px)} #login>div.con .libraries>li a{display: block; text-align: center; padding: 1.5rem .5rem; border-radius:.6rem; border:3px solid #f0f0f0} #login>div.con .libraries>li a[href*=dream]{letter-spacing: -1px;} #login>div.con .libraries>li a[onclick*=back]{background: #333;} #login>div.con .libraries>li a[href*=main]{background: var(--color, var(--gulip))} #login>div.con .libraries>li :is(a[onclick*=back], a[href*=main]){color: #fff; border-color:transparent} @media screen and (max-width: 820px){ #gnb{position: absolute; right: 4%; gap:2rem} #gnb .gnb_dglibrary{display: none} body:not(#main) #gnb>[class^=gnb_]>a{font-size: 0px; opacity: .8;} body:not(#main) #gnb>[class^=gnb_]>a:before{--size: 24px; margin-top: .2rem; background-image: url(/annex/img/inc/ic_gnb_mb.png)} #main #gnb{gap:5px} #main #gnb li:not(.gnb_login)[class^=gnb_]>a:before{position: absolute; margin:auto; top:0px; bottom: 0px; left: 0px; right: 0px; } #main #gnb li:not(.gnb_login) a{position: relative; padding: 0px; width: 4rem; height: 4rem; font-size: 0px;} footer{margin-bottom: 0px; margin-top:5rem; padding:30px; border-bottom-right-radius:0px; border-bottom-left-radius:0px} #main footer .copy{padding: 0px;} footer .bottom{display: none;} footer .btm_library{margin-top:0rem;} footer .btm_library>dl{margin:2rem 0px; flex-wrap:wrap} footer .btm_library>dl dd:first-of-type{width: 100%; order:1; font-size: 1.3rem;} footer .btm_info{flex-direction: column; gap:1rem; align-items: flex-start; padding: 0px;} footer .btm_info .name{display: none;} footer .btm_info address span.tel{display: block; margin-left: 0px;} footer .tel{background-position-y:0px} #login{margin: auto; width: 80%;} #login>div.welcome{display: none;} #login>div.con .findid{text-align: center; } }