@charset "utf-8";
.deep{color: #111;}
.grayBox{padding: max(4%, 20px) max(5%, 20px); background: #f9f9f9; border-radius:1rem}
.conbtnBox{text-align: center; margin-top: 4rem;}
.tbox+.conbtnBox{margin-top: 2rem;}
[class^=conbtn]:not(.conbtnBox){display: inline-block; padding:1.5rem 3rem 1.3rem; border-radius:.5rem; ; font-size: 1em;}
[class^=conbtn][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 right center / 4rem}
.conbtn{background: var(--color); color: #fff; box-shadow:0px 2px 5px rgba(0,0,0,.1), 0px 1px 2px rgba(0,0,0,.1)}
.conbtn:nth-child(2n){background: var(--color)}
.conbtnW{background:#fff; border:1px solid #ddd; }
#childengLibrary .conbtn{text-shadow: 0px 0px 2px rgba(150,40,60,.8)}
[class^=consbtn]{display: inline-block; padding:.3rem 1.5rem .3rem; border-radius:3rem; ; font-size: 1.4rem; color: #fff; vertical-align: middle;}
.consbtn{background: var(--color01); color: rgba(0,0,0,.8); box-shadow:0px 1px 3px rgba(0,0,0,.1);  border:1px solid rgba(0,0,0,.1)}
.consbtnW{color: #484848; border:1px solid #666; font-weight: 400;}
.btn_link{display: inline-block; position: relative; padding-left: 3rem;}
.btn_link:before{content: ''; position: absolute; left: 0px; top: .3rem; width: 2rem; height: 1.5rem; background:url(/annex/img/sub/ic_link.png) no-repeat left center / 4rem}
.btn_down{display: inline-block; position: relative; padding-left:2rem;}
.btn_down:before{content: ''; position: absolute; left: 0px; top: .5rem; width: 1.5rem; height: 1.5rem; background:url(/annex/img/sub/ic_down.png) no-repeat left center / 1.5rem; opacity: .6;}
.btn_viewmap{display: inline-block; font-size: 0px; text-indent: -5000px; width:30px; height:30px; background:url(/annex/img/sub/ic_viewmap.png) no-repeat center center / cover; line-height: 0px; vertical-align: middle;}
/* 리스트  */
.bgboxList{display: flex; flex-wrap:wrap; gap:1rem}
.bgboxList>dl{flex:1 0 30%; padding:max(30px, 4.5%) max(20px, 4.5%); background: #f5f5f5; border-radius:1rem;}
.bgboxList>dl:first-child:nth-last-of-type(4),
.bgboxList>dl:first-child:nth-last-of-type(4)~dl{flex-basis:49%}
.bgboxList>dl>dt{font-size: 1.2em; color: #333;}
.bgboxList>dl>dd:before{display: block; content:''; margin:3rem 0px; width: 2rem; height: 1px; background: rgba(0,0,0,.5); transform:rotate(-45deg)}
.bgboxList>dl>dd.nobef:before{margin:1rem 0px 0px; visibility:hidden}
.bdboxList{display:flex; justify-content:space-between; gap:1%}
.bdboxList>li{flex:1 0 32%; text-align:center; padding:max(4%, 30px) 3%; border:.5rem solid #eee; border-radius:7px}
.bdboxList>li:before{display: block; content: ''; margin:0px auto 1.5rem;  width: 5rem; height: 5rem; background-repeat:no-repeat; background-position:center center; background-size:contain}
.bdboxList.operate>li:nth-child(1):before{background-image: url(/annex/img/sub/operate_ic01.png);}
.bdboxList.operate>li:nth-child(2):before{background-image: url(/annex/img/sub/operate_ic02.png);}
.bdboxList.operate>li:nth-child(3):before{background-image: url(/annex/img/sub/operate_ic03.png);}
.bdboxList.smalllibrary>li:nth-child(1):before{background-image: url(/annex/img/sub/smalllibrary_ic01.png);}
.bdboxList.smalllibrary>li:nth-child(2):before{background-image: url(/annex/img/sub/smalllibrary_ic02.png);}
.bdboxList.smalllibrary>li:nth-child(3):before{background-image: url(/annex/img/sub/smalllibrary_ic03.png);}
.conphotoBox{margin: auto; width:96%;}
.conphotoBox img{height:100%; width: 100%; object-fit:cover}
.conphotoBox>p{margin:3rem auto 0px; padding: 1rem; border:.5rem solid #eee; ;max-width:900px; height: clamp(200px, 25vw, 4500px); overflow:hidden}
.conphotoBox ul{margin-top: 10px; text-align: center; overflow-x:auto; padding-bottom: 1rem; white-space: nowrap;}
.conphotoBox ul::-webkit-scrollbar {height:3px;}
.conphotoBox ul::-webkit-scrollbar-track { border-radius: 10px; background: #eee;}
.conphotoBox ul::-webkit-scrollbar-thumb {background: #666 ;}
.conphotoBox ul>li{position: relative; display: inline-block; width:12%; max-width: 100px; min-width:8rem; height: 6rem; vertical-align: top;}
.conphotoBox ul>li.on a:before{position: absolute; content: ''; left: 0px; top: 0px; right: 0px; bottom: 0px; border:2px solid #222}
.round{border-radius:2rem; overflow:hidden; }
.flex{display: flex; ; gap:20px}
.flex.rate30>*:nth-child(1){flex-basis:30%}
.flex.rate40>*:nth-child(1){flex-basis:40%}
.flex[class*=rate]>*:not(:nth-child(1)){flex-grow:1}

/*** 도서관소개 ***/
.greeting{position: relative; display: flex; max-width: 1020px;}
.greeting:before,
.greeting:after{display: block; content: ''; position: absolute; right: -10%; top: -35%; width:80%; height: 200%; ; clip-path: ellipse(50% 41% at 50% 50%); z-index: -2}
.greeting:before{background:url(/songlim/img/m_bg.png) no-repeat 10% top/cover; opacity: .8;}
#irumLibrary .greeting:before{background-image:url(/erum/img/m_bg.png)}
#shsmallLibrary .greeting:before{background-image:url(/shsmall/img/m_bg.png)}
#childengLibrary .greeting:before{background-image:url(/shsmall/img/m_bg.png); opacity:.5}
.greeting:after{background: radial-gradient(50% 41% at 50% 50%, rgba(255, 255, 255, 0) 80%, #FFF 100%)}
.greeting .slogan{position: relative; margin-top: 1%; flex:0 0 38%; order:1}
.greeting .slogan p{display:flex; flex-direction:column; text-align: center; align-items:center; justify-content:center; position: absolute; width: 66%; height:100%; max-height:25.5rem; color: #fff; font-size: 1.9rem; font-family:'SCDream-regular'; letter-spacing: -.05rem;}
.greeting .slogan p:nth-child(1){z-index: 1;}
.greeting .slogan p:nth-child(2){right: 0px; margin-top:18rem;}
.greeting .slogan p:before{display: block; content: ''; margin-bottom: 1rem; width: 4rem; height: 4rem; background: url(/annex/img/sub/greeting_ic01.png) no-repeat center center / cover;}
.greeting .slogan p:nth-child(2):before{background-image: url(/annex/img/sub/greeting_ic02.png);}
.greeting .slogan p:after{content: ''; position: absolute; left:0px; top: 0px; right: 0px; bottom: 0px; border-radius:500px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); z-index: -1;}
.greeting .slogan p:nth-child(1):after{background: var(--color); opacity: .8;  }
.greeting .slogan p:nth-child(2):after{background: var(--color01);}
#childengLibrary  .greeting .slogan p:nth-child(2):after{background: var(--color-txt02); opacity: .9;}
.greeting .con{flex:0 0 60%; padding:2%;}
.greeting .con .tit{margin-bottom: 3rem; font:300 4rem 'SBaggro'; color: #333; }
.greeting .con .tit span{color: var(--color); font-weight: 500;}
.greeting .con .txt{margin-top: 2.5rem;}
.greeting .con .sign span{margin-left: .5rem; font-size: 1.25em; color: #000;}
.history{position: relative;}
.history:before{content: ''; position: absolute; left: 50%; top:2rem; bottom: 0px; width: 1px; background: #ddd;}
.history>dl{display:flex; gap:10%; justify-content:space-between; position: relative; margin-top: 6rem;}
.history>dl>dt{flex:0 0 46%; position: relative; top: .5rem; font-size:2.1rem; color: var(--color); font-family: 'SBAggro';}
#childengLibrary .history>dl>dt{color: var(--color-txt)}
.history>dl:before{content: ''; position:absolute; left: calc(50% - .5rem); top:1.5rem; width: 1rem; height: 1rem; background: var(--color01); border-radius:5rem; z-index: 1;}
.history>dl>dd{flex:0 0 46%;}
.history>dl>dd ul li{display:flex; gap:1rem; margin-top: 1rem; font-family: 'SCDream-regular'; letter-spacing: -.05rem; font-size: 1.6rem;}
.history>dl>dd ul li span.date{display: block;min-width:6rem; font-family: 'SCDream'; color: #222; font-weight: 500; letter-spacing: 0px;}
.history>dl>dd ul li span.wfont{font-family: 'SCDream'; font-weight: 500;  text-decoration: underline;}
.history>dl:nth-child(2n)>dt{text-align: right;}
.history>dl:nth-child(2n-1)>dt{order:1}
.history>dl:nth-child(2n-1)>dd>ul>li{text-align: right; justify-content: flex-end}
.history>dl:nth-child(2n-1)>dd span.date{order:2; }
.history>dl:last-child:After{content: ''; position: absolute; left: 50%; top:2rem; bottom: 0px; width: 1px; background: #fff;}
/* .organize{display: flex; justify-content:space-between; position: relative; margin: auto; padding:2rem 5%;padding-top: 3rem; --bdr:-2.2rem; }
.organize:before{content: ''; position: absolute; left: 0px; top: 0px; right: 0px; height: 40%; z-index: -1; border-radius:1rem; }
.organize>p{display: flex; align-items:center; justify-content:center; position: absolute; left: 0px; right: 0px; margin:6rem auto 0px; width: 20rem; height: 20rem; font-size: 1.6em; color: #222; border-radius:50rem; background: #fff; box-shadow:inset 0px 1px 2px rgba(0,0,0,.05)}
.organize>p:before,
.organize>p:after{content: ''; position: absolute; left: var(--bdr); top: var(--bdr); right: var(--bdr); bottom: var(--bdr); background: var(--color01); opacity: .15; border-radius:50rem; z-index: -2;}
.organize>p:before{box-shadow:0px 1px 2px rgba(0,0,0,2)}
.organize>p:after{left: calc(var(--bdr) * 3); top:calc(var(--bdr) * 3); right: calc(var(--bdr) * 3); bottom: calc(var(--bdr) * 3); background:#ccc; outline:4rem solid #e5e5e5}
.organize>dl{width: 25%; margin-top: 13rem; display: flex; flex-direction:column}
.organize>dl dt,
.organize>dl dd{padding: 2rem 10%; border-radius:.6rem}
.organize>dl dt{position: relative; text-align: center; color: #fff; background: var(--color01); font-size: 1.12em;}
.organize>dl dt:before,
.organize>dl dt:after{display: block; content: ''; position: absolute;  }
.organize>dl dt:before{left: 100%; top: 50%; width: 100%; height: 1px; background: rgba(0,0,0,.07); z-index:-1}
.organize>dl:nth-last-child(1) dt:before{left: auto; right: 100%;}
.organize>dl dt:after{margin-top: -.5rem; left: calc(200% - 10.5rem); top: 50%; width: 1rem; height: 1rem; background: var(--color-txt); border-radius:5rem; opacity:.5;}
.organize>dl:nth-last-child(1) dt:after{left: auto; right: calc(200% - 10.5rem);}
.organize>dl dd{flex-grow:1; margin-top: .5rem; border:1px solid #ddd; background: #fff;}
.organize>dl dd ul li{margin-top: .5rem;} */


.organize{position: relative}
.organize .org1{margin-left: calc(50% - 90px); position: relative; text-align: center; padding: 2rem 1rem; width:80%; max-width:280px; background: #fff; border:.5rem solid var(--subbg); border-radius:.5rem;; box-shadow: 0px 1px 2px rgba(0,0,0,.1)}
.organize .org1:before{content: ''; position: absolute; margin: auto; left: 0px; top: 0px; right: 0px; width: 1px; height: 15.2rem; background: #eee; z-index: -1;}
.organize .org2{margin: auto; text-align: center; padding: 2rem 1rem; width:70%; max-width:220px; color:rgba(0,0,0,.8); background:var(--color01); border:1px solid rgba(0,0,0,.3); border-radius:.5rem;; box-shadow: 0px 1px 2px rgba(0,0,0,.1)}
.organize .team{display: flex; gap:1rem; justify-content: center; margin-top: 5rem;}
.organize .team>li{min-width: 30%; max-width: 50%;}
.organize .team>li:first-child{flex-grow: 2;}
.organize ul.part{display: flex; gap:10px; justify-content:center; margin-top: 3rem;}
.organize ul.part>li{flex-grow:1; text-align: center; padding:1.5rem 1rem; max-width:220px; border-radius:.5rem; border:1px solid rgba(0,0,0,.3); box-shadow: 0px 1px 2px rgba(0,0,0,.1)}
.organize ul.part>li:nth-child(1){background: var(--songlim-subbg); color:var(--songlim-txt)}
.organize ul.part>li:nth-child(2){background: var(--irum-subbg); color:var(--irum-txt)}
.organize ul.part>li:nth-child(3){background: var(--shsmall-subbg); color:var(--shsmall-txt)}
.organize ul.part>li:nth-child(4){background: var(--kb-subbg); color:var(--kb-txt)}
.organize .team>li:nth-child(2) .org2{position: relative; background:var(--childeng); }
.organize .team>li:nth-child(2) .org2:before{content: ''; position: absolute; right: 0px; top: 3.4rem; width: 210%; max-width: 450px; height: 1px; background: #eee; z-index: -1;}
.organize .team>li:nth-child(2) ul.part>li:nth-child(1){background: var(--childeng-subbg); color:var(--childeng-txt)}
.charter{position: relative; padding: 3%; background: #F0F0F0; border-radius:2rem; overflow:hidden}
.charter:before,
.charter:after{content: ''; position: absolute;  width: clamp(100px, 50%, 400px); height: clamp(100px, 50%, 400px); ; opacity: .8}
.charter:before{left: 0px; top: 0px ; background:var(--color) url(/annex/img/sub/charter_bgL.png) no-repeat left center; clip-path: polygon(0 0, 0% 100%, 100% 0)}
.charter:after{right: 0px; bottom: 0px ;background:var(--color01) url(/annex/img/sub/charter_bgR.png) no-repeat right center; clip-path: polygon(100% 100%, 0% 100%, 100% 0);}
.charter>div.box{position: relative; padding: max(20px, 3.5%); background: #fff; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.15); border-radius:1rem; z-index: 1;}
.charter>div.box>div{padding: max(40px,5.5%) 8% 3%; border:1px solid var(--color); border-radius:.5rem}
.charter .tit{text-align: center; font:3rem 'SBaggro'; color: var(--color-txt);}
.charter .txt{text-align: center; margin-top: 2rem;}
.charter :where(p.tit, p.txt)+ul{margin-top: 4rem; padding: 0px 1rem; padding-top: 5%; border-top:1px solid #000}
.charter ul>li{display: flex; margin:3rem 0px; color: #333;}
.charter ul>li span{flex:0 0 4rem;}
.charter .name{margin-top: 2rem; text-align: right;}
.rule_txt{margin-bottom: 2rem; margin-left:2rem;}
.rule ul{margin-top: 1rem; margin-left: 2rem;}
.rule ul:not(.bl03)>li{position: relative; margin:.8rem 0px; padding-left: 2rem}
.rule ul.decimal>li{padding-left: 1.3rem}
.rule ul>li span.num{position: absolute; left: 0px;}
.rule ul ul{margin-top: .7rem; margin-left:-.7rem; margin-bottom: 1.5rem;}
.rule ul ul li{margin:.5rem 0px}
.rule_sup{padding: 2rem 1.5rem; border:2px solid #f0f0f0; border-radius:1rem; line-height: 1.6;}
.rule_sup *{font-size: 1.4rem; font-family: 'SCDream-regular';}
.rule_asterisk{display: flex; gap:2rem; justify-content: flex-end; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid #ddd;}
.rule_asterisk>li{font-size: 13px;}
.rule_asterisk>li a:before{top: 2px;}
.map{position: relative; width:100%; height: 400px; background:#f0f0f0; border-radius:2rem; overflow:hidden; box-shadow:0px 1px 5px rgba(0,0,0,.1)}
.facility {position: relative;}
.facility .contab{position:absolute; right: 3rem; top: 6rem;}
.facility .tabcon{width: 100%; padding: 6% 8.5%; border-radius:2rem; background: #f9fafa; overflow:hidden; vertical-align: top; border:1px solid #eee}
.facility .tabcon .tit{font:300 6rem 'SBaggro'; color: var(--color-txt);}
.facility .tabcon>.con{overflow:hidden; white-space: wrap;}
.facility .tabcon .floor{float:right; width: 40%;}
.facility .tabcon .floor .bl02{margin-top: 3rem;}
.facility .tabcon .img{float:left; width: 57%; padding-top: 4rem;}
/* .tabconBox>div.tabcon{display: none;}
.tabconBox>div.tabcon:first-child{display: block} */
.office-btn{display: inline-block;  margin-top: 0.3rem; padding: 0.2rem 1rem;  color: #444;   font-size: 1.4rem;   font-weight: 500; line-height: 1.8rem;   border: 2px solid #444; border-radius: 1.7rem;   box-sizing: border-box;}
.iframebody,
.iframebody>*,
.iframebody body>div{height: 100%;}
.totalNum{display: flex; padding: 2rem max(20px, 4.5%); align-items:center; border:1px solid #666; border-radius:1rem; box-shadow:0px 2px 0px #ddd}
.totalNum>p{flex-grow:1}
.totalNum>p.total{font-size: 1.8rem; color: #333; font-weight: bold;}
.totalNum>p.total span{color:var(--color-txt);}
.totalNum>p.asof{margin: 0px;}

/* 열린마당 */
.bookstore{border-top:2px solid #666}
.bookstore>li{display:flex; gap:3rem; padding:3rem 1%; border-bottom:1px solid #ddd}
.bookstore>li .img{flex:0 0 20%}
.bookstore>li .img img{border-radius:.6rem}
.bookstore>li .tit{font-size: 2rem; color: #222;}
.bookstore>li .txt{margin-top: 1rem; letter-spacing: -.05rem;}
.bookstore>li ul.info{margin-top: 2rem}
.bookstore>li ul.info>li{display: inline-block; padding-top: .2rem; padding-left: 2.4rem; margin-right: 2rem; background: url(/annex/img/sub/bookstore_ic.png) no-repeat left top/2rem; font-size: 1.3rem; color: #888; }
.bookstore>li ul.info>li.addr{background-position-y:-2rem}
.bookstore>li ul.info>li.tel{background-position-y:-4rem}
.bookstore>li ul.info>li.mail{background-position-y:-6rem}
.bookstore>li ul.info>li.blog{background-position-y:-8rem}
.bookstore>li ul.info>li.insta{background-position-y:-10rem}

/* 사이트이용 */
.sitemap{border-top:2px solid #333}
.sitemap>li{padding:3rem 0px; display:flex; flex-wrap:wrap; align-items: flex-start; border-bottom:1px solid #ddd}
.sitemap>li>a{display: block; flex:0 0 25%; text-align: center; padding: 1rem; font-weight: 600; color: #333; border-radius:.6rem; font-size: 1.125em;}
.sitemap>li>p{display: none;}
.sitemap>li>ul{flex:0 0 75%}
.sitemap>li>ul>li{float:left; margin:.5rem 1%; min-width: 23%;}
.sitemap>li>ul>li>a{display: block; padding: .8rem; text-align: center; ;border:1px solid #ddd; border-radius:.5rem; font-size: 1.4rem;}
.sitemap>li>ul>li ul{margin-top: .5rem; padding:7% 12%; background: #f0f0f0; border-radius:.5rem}
.sitemap>li>ul>li ul>li{position: relative; padding-left: 1rem; margin:.5rem 0px; font-size: 1.3rem}
.sitemap>li>ul>li ul>li:before{display: block; content: ''; position: absolute; top: .8rem; left: 0px; width: .5rem; height: 1px; background: #666;}
.policy h4{position: relative; padding-right: 6rem;}
.policy .policyTop{display: block; position: absolute; right: 0px; top: .3rem; width:6rem; height: 3rem; font-size: 0px; background: #eee; border-radius:50px}
.policy .policyTop:After{content:'';position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; border:1px solid #333; border-width:1px 1px 0px 0px; transform:rotate(-45deg) translate(-.25rem, -.5rem)}
.policy .bl02_txt{margin-top:1rem; margin-bottom:2rem;}
.pastPolicy{padding:5rem 0px}
.policy_step dl{margin-top: 2rem;}
.policy_step dl dt{font-weight:bold;}
.policy_step dl dd {margin-top: .5rem;}
.policy_step ol{display: flex}
.policy_step ol li{margin:.5rem; display: flex; flex-direction:column; justify-content: center}
.policy_step ol li.step{min-width:15%; text-align: center; padding: 3rem 2rem; border:1px solid rgba(0,0,0,.6); border-radius:.6rem}
.policy_step ol li.arr>p{position: relative; text-align: center; padding: 0px 1rem; margin:5px 0px; font-size: .9em; letter-spacing: -1px;}
.policy_step ol li.arr p:after{content:''; position:absolute; width: 0px; height:11px; border:5px solid transparent; }
.policy_step ol li.arr p.arrR{padding-bottom: 3px; ;border-bottom:1px solid #aaa}
.policy_step ol li.arr p.arrR:after{right: -5px; bottom: -5px; border-left-color:#666}
.policy_step ol li.arr p.arrL{padding-top: 3px; border-top:1px solid #aaa}
.policy_step ol li.arr p.arrL:after{left: -5px; top: -5px; border-right-color:#666}
.individualBox{margin-top:3rem; border: 1px solid #ddd; border-radius: 1rem; overflow: hidden;}
.individualBox>.tit{text-align:center; padding:1.5rem; font-weight: 500; background:#eee; border-bottom: 1px solid #ddd;}
.individualBox .labelling{display:flex; flex-wrap:wrap; overflow:hidden}
.individualBox .labelling>li{text-align: center; position: relative; bottom: -1px; left: -1px; width:14%; border-bottom:1px dashed #ddd; border-left:1px dashed #ddd;}
.individualBox .labelling>li>a{display:block; padding:2rem .5rem}
.individualBox .labelling>li>a>span{display:block; margin-top:0.5rem; font-size:1.4rem}
.individualBox .indexCon{display:flex; flex-wrap:wrap;}
.individualBox .indexCon>li{flex:0 0 50%; position: relative; bottom: -1px; left: -1px; border-left:1px dashed #ccc; border-bottom:1px dashed #ccc;}
.individualBox .indexCon>li>a{display:block; padding:1.3rem 2rem;}
.individualBox .indexCon>li>a span{margin-right: 1rem;}

/* 나의도서관 */
.mbCard .mbcard_close{display: none;}
.mbCard .btn_mbcard{display: none;}
.mbCard .memberCard{display: flex; padding:4rem 4rem; background: #f5f5f5; border-radius:2rem}
.mbCard .card{flex:0 0 50%; padding:3rem 4rem; border-radius:1rem; background-color: #fff; background-size:200% 100%; box-shadow:0px 1px 4px rgba(0,0,0,.3); }
#songlimLibrary .mbCard .card{background-image:url(/songlim/img/m_bg.png)}
#irumLibrary .mbCard .card{background-image:url(/erum/img/m_bg.png)}
#shsmallLibrary .mbCard .card{background-image:url(/shsmall/img/m_bg.png)}
#childengLibrary .mbCard .card{background-image:url(/dream/img/m_bg.png)}
.mbCard .card .eng{font-size: .8em;}
.mbCard .card .kor{font-family: 'SBaggro'; font-size: 1.5em; color: var(--color-txt);}
.mbCard .card .barcode{text-align: center; padding: 2rem .5rem; margin: 1rem 0px; background: #fff;  border-radius:5px}
.mbCard .card .barcode #code{margin: auto;}
.mbCard .card .memname{color: #222; font-size: 1.05em;}
.mbCard ul.bl03{margin: 2rem 0px 2rem 4rem}
.mbCard.open{height: 100%; background:rgba(0,0,0,.8); }
.mbCard.open .btn_mbcard a span:after{margin-top: .5rem; transform:rotate(45deg)}


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

@media screen and (max-width:820px){
	a[class^=consbtn]{padding-bottom:.35rem}
	.bgboxList{flex-direction:column}
	.bgboxList>dl>dd{margin-top: 1rem;}
	.bgboxList>dl>dd:before{margin:1.5rem 0px 2rem; transform:rotate(-45deg) scale(.8)}
	.bdboxList{flex-direction:column}
	.bdboxList>li{position: relative; text-align: left; margin:.5rem 0px; padding:2.5rem 6% 2.5rem 9rem}
	.bdboxList>li:before{position: absolute; left: 2rem; top:50%; margin-top:-2.5rem; margin-right:2rem; transform:scale(.8)}
	.flex{flex-direction: column;}
	.greeting{flex-direction:column}
	.greeting:before,
	.greeting:after{display: none;}
	.greeting .slogan{display:flex; justify-content: center; text-align: center; order:0; margin-top: 0px; margin-bottom:4rem; z-index: -1}
	.greeting .slogan p{position: relative; margin: 0px !important; padding: 10px 20px; width: 48%; height:auto; min-height: 20rem; font-size: 1em;}
	.greeting .slogan p:nth-child(1){left: 10px;}
	.greeting .slogan p:nth-child(2){left: -10px;}
	.greeting .con .tit{font-size: 2.3em;}
	.greeting .con{flex-grow:1}
	/* .organize{padding-top:0rem; --bdr:-1.8rem}
	.organize>p{width: 15rem; height: 15rem; font-size: 1.3em}
	.organize>dl{width:48%; margin-top:25rem}
	.organize>dl dt{font-size: 1em}
	.organize>dl dt:before, .organize>dl dt:after{display: none;}
	.organize>dl dd ul li{font-size: .95em;} */
	.rule .rule_txt{margin-left:1rem;}
	.rule ul{margin-left: 1rem}
	.history:before{left:.5rem}
	.history>dl{padding-left: 3rem; flex-direction:column}
	.history>dl:nth-child(2n)>dt{text-align: left;}
	.history>dl:nth-child(2n-1)>dt{order:0}
	.history>dl:nth-child(2n-1)>dd>ul>li{text-align: left; justify-content: flex-start}
	.history>dl:nth-child(2n-1)>dd span.date{order:0}
	.history>dl:before{left:0px}
	.history>dl:last-child:After{left:.5rem}
	.history>dl>dt{font-size:2.3rem; margin-bottom: 1rem;}
	.map{height: 200px}
	.facility .contab{position:static; margin-bottom: 3rem;}
	.facility .tabcon{padding:9% 7%}
	.facility .tabcon .tit{display: none;}
	.facility .tabcon .floor,
	.facility .tabcon .img{float:none; width: 100%; padding-top: 0px;}
	.totalNum{flex-direction:column}
	.bookstore>li{flex-direction:column}
	.bookstore>li .img{margin: auto; width: 150px;}
	.sitemap>li{flex-direction:column}
	.sitemap>li>a{display: block; flex:0 0 25%; text-align: center; padding: 1rem; font-weight: 600; color: #333; border-radius:.6rem; font-size: 1.125em;}
	.sitemap>li>p{display: none;}
	.sitemap>li>ul{font-size: 0px; width:100%;}
	.sitemap>li>ul>li{display: inline-block; float:none; width: 48%; vertical-align: top;}
	.policy_step{max-width: 280px;}
	.policy_step ol{flex-direction:column; align-items: stretch}
	.individualBox .labelling>li{flex:0 0 25%; word-break:keep-all}
	.individualBox .labelling>li img{max-width:55%; }
	.individualBox .labelling>li a span{font-size: .9em;}
	.individualBox .indexCon{flex-direction:column}
	.mbCard .memberCard{flex-direction:column; padding:0rem 2rem 2rem; background:linear-gradient(180deg, var(--color-txt) 0%, var(--color) 100%)}
	.mbCard .card{margin-top: -2rem;}
	.mbCard .barcode #code{transform:scale(.8)}
	.mbCard ul.bl03{margin-left: 1rem;}
	.mbCard ul.bl03>li{color: #fff;}
	.mbCard ul.bl03>li:before{background: #fff;}

}