/* intro */
@keyframes intro_bg{
	0%{background-position:50% top;}
	100%{background-position:50% bottom;}
}
@keyframes flower_bg{
	0%{opacity:0;}
	20%{opacity:0;}
	40%{opacity:0.5;}
	60%{opacity:1;}
	80%{opacity:0.5;}
	100%{opacity:0;}
}
@keyframes logo_bg{
	0%{opacity:0;}
	100%{opacity:1;}
}
.intro {overflow: hidden; position:relative; height:820px; background:url('/common/images/intro/intro_bg.jpg') no-repeat 50% bottom; background-size: cover; animation:intro_bg 3s;}
.flower_bg{position:absolute;top:0;left:0;right:0;height:820px;margin:0 auto;background:url('/common/images/intro/intro_flower.png') no-repeat 50% top;animation:flower_bg 3s infinite;}
.logo_bg{position:absolute;top:0;left:0;right:0; height:100%; max-height: 820px; margin:0 auto;background:url('/common/images/intro/intro_logo.png') no-repeat left top;animation:logo_bg 3s;}
.intro_wrap{max-width:1540px; padding:110px 15px 0 15px; box-sizing: border-box; margin: 0 auto}
.intro_wrap1{max-width:1640px; margin:0 auto; padding:115px 0 0 0; text-align:center; position: relative; z-index: 1;}

.intro_top {font-family: 'Noto Sans KR';}
.intro_top p {font-size: 3.551em; color: #3131b2; letter-spacing: -0.1em; font-weight: 200; line-height: 1.2;}
.intro_top p br {display: none;}
.intro_top h1 {font-size: 4.048em; color: #2c39b5; letter-spacing: -0.1em; font-weight: 500; line-height: 1.2; margin-bottom: 30px;}
.intro_top span {font-size: 1.704em; color: #365fc7; opacity: 0.6; line-height: 1;}

/* .intro_top h1 {text-align: left;}
.intro_top .intro_notice {float: right; width: 680px; height: 300px; background: rgba(255,255,255,0.3); padding: 20px 30px; box-sizing: border-box; border-radius: 5px}
.intro_notice a {display: block; padding-left: 60px; text-overflow: ellipsis; overflow: hidden; line-height: 22px; width: 100%; box-sizing: border-box;}
.intro_notice ul{margin-top: 20px}
.intro_notice ul li {position: relative;}
.intro_notice ul li span.date {position: absolute; top: 0; right: 0;}
.intro_notice ul li + li {margin-top: 8px;}
.intro_notice ul li i {font-style: normal; width: 50px; height: 22px; color: #fff; display: inline-block; text-align: center; line-height: 22px; position: absolute; left: 0; top: 0}
.intro_notice ul li a {display: block; padding-left: 60px; text-overflow: ellipsis; overflow: hidden; line-height: 22px; width: 100%; box-sizing: border-box;}
.intro_notice li i.mslib {background-color: #a95f99}
.intro_notice li i.all {background-color: #444 ;}
.intro_notice li i.nalib {background-color: #0866c0;}
.intro_notice li i.iglib {background-color: #b08774;}
.intro_notice li i.wilib {background-color: #93d500;}
.intro_notice li i.selib {background-color: #f85c79;}
.intro_notice li i.dilib {background-color: #6180a1;}
.intro_notice li i.dulib {background-color: #f7aa31;}
.intro_notice li i.silib {background-color: #15bba5;} */

.tab {margin-top: 30px}
.tab .tabBtn {display: flex; justify-content: center}
.tab .tabBtn a {display: inline-flex; padding: 5px 17px; background: #fff; color: #000; border: 2px solid #485091; font-size: 1.278em; transform : rotate(0.04deg); }
.tab .tabBtn a:nth-child(1){border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.tab .tabBtn a:nth-child(2){border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.tab .tabBtn a.on {background-color: #485091; color: #fff; font-weight: 550}

.lib_link {box-sizing: border-box; position:relative; display: none; margin:30px auto 0 auto; padding-left: 10px; padding-right: 10px;}
.lib_link * {box-sizing: border-box;}
.lib_link ul {display: flex; flex-wrap: wrap; justify-content: center; margin: -8px -2px; padding-left: 20px; padding-right: 10px; vertical-align: top;}
.lib_link.on {display: inline-block}
/* #link2 ul {padding: 0 10.4%;}
#link2 li {width: calc(33% - 5px); margin-left: 5px} */

/*.lib_link > a {display:inline-block; width:100%; max-width: 335px; line-height:75px; border:2px solid #3131b2; color:#3131b2; font-weight:bold; font-size:1.5em;}*/
.lib_link li {flex: 1; max-width: 177px; padding: 8px 2px;}
.lib_link li a {display: block; }
.lib_link li img {display: block; width:100%; transition: all 0.2s;}

.lib_link li a:hover img {transform: translateY(-20px);}
.book_bar{box-sizing: border-box; height: 15px; width: 100%; margin-top: -1px; background: #f5efeb; border: 1px solid #798796; box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.2);}
#footer .wrap{position:relative;width:892px;margin:0 auto;}
#footer .flogo{position:absolute;top:30px;left:100px;}
#footer .footer_info{margin:0 0 0 290px;padding:30px 0 30px 0;}
#footer address{color:#838383;font-size:13px;line-height:17px;}
#footer address div {display: flex; justify-content: space-between;}
#footer address div span {letter-spacing: -0.5px}
#footer address div .lib, #footer address div .tel {color: #606267}
#footer address div .lib {width: 118px;}
#footer address div .txt {width: 210px;}
#footer address div .tel {width: 112px;}

#footer address em,#footer address .tel{color:#565656;}
#footer address em{display: inline-block; width: 118px;}
.footer_info p{margin:15px 0 0 0;color:#9e9fa2;font-size:12px;line-height:14px;}

@media all and (max-width:1440px) {
  .lib_link ul {padding-left: 15px;}
  .lib_link li {padding-right: 0;}
}

@media all and (max-width:1200px) {
  .intro {height: auto;}
  .lib_link ul {padding-bottom: 40px;}
  .lib_link#link1 li {flex: none; width: 20%;}
  .book_bar {display: none;}
}

@media all and (max-width:1024px) {
  .intro_top p {font-size: 3.051em}
  .intro_top h1 {margin-bottom: 20px}
  .tab {margin-top: 20px}
  .flower_bg,.logo_bg{width:100%;background-size:100% auto;}
  .flower_bg{background-position:50%;}
  .intro_wrap {padding: 50px 15px 0 15px}
  .intro_wrap, .intro_wrap1{width:100%;}
  .intro_wrap > img, .intro_wrap1 > img{width:100%;max-width:486px;}

  .lib_link li a:hover img{transform: translateY(0);}

  #footer .wrap{width:100%;}
  .intro_top .intro_notice {float: left !important; width: 100% !important; margin-top: 30px; height: auto}
  /* #link2 li {margin-bottom: 0} */

  #footer address div {justify-content: flex-start;}
  #footer address span + span {margin-left: 10px}
  #footer address div .lib {width: auto;}
  #footer address div .txt {width: auto;}
  #footer address div .tel {width: auto;}
}

@media all and (max-width:768px) {
  .intro{height:inherit;padding:20px 10px;background-size:auto 100%;}
  .intro_top p br {display: block;}
  .intro_top h1 {font-size: 3.5em}
  .lib_link#link1 li {width: 25%;}
  #footer .flogo{display:block;position:inherit;top:inherit;left:inherit;}
  #footer .wrap{padding:3%;box-sizing:border-box;}
  #footer .footer_info{margin:0;}
  .intro_wrap1 {padding-top: 40px} 
  /* #link2 ul {padding: 0 4.5%;;}
  #link2 li {width: 50%; margin-left: 0px} */
  .intro_top .intro_notice {padding: 10px}
  .intro_notice ul li a {width: calc(100% - 100px);}
  .intro_top > img {width: 100%}
  
  /* .lib_link {width: 100%}
  .lib_link ul {margin-left: 16px}
  .lib_link li {width:50%; margin-left:0}
  .lib_link li:nth-child(n+7) {margin-top: 10px;} */
}


@media screen and (max-width: 640px){
  .lib_link ul {padding-left: 0; padding-right: 0; padding-bottom: 20px;}
  .lib_link li {flex: none !important; width: 33.3333% !important;}


}


@media screen and (max-width:480px) {
  .lib_link {padding-left: 0; padding-right: 0;}
  .lib_link ul {margin-right: -10px; padding-left: 5px; padding-right: 5px;}
  .lib_link li {width: 50% !important;}
  .intro_top p {font-size: 2.5em}
  .intro_top h1 {font-size: 3em}
  #footer address div {flex-direction: column;}
  #footer .footer_info {padding: 20px 0}
  
}