@charset "utf-8";

/*Layout*/
body,#divWrapper{min-width: 320px;}
#divTopMenu ul, .top, .banner, .familySite, .visualText, #divGlobalMenu, .wholeMenuTitle{display: none;}

/*header*/
#divHeader{z-index: 200;}
.header h1{margin-left: 10px;}

/*wholeMenu*/
.wholeMenu{position: absolute;z-index: 102;top: 54px;width: 100%;background-color: transparent;border-top: none;transition-property: transform;transition-timing-function: ease;}
.wholeMenu > div{position: relative; left: auto; right: auto; top: -49px; bottom: auto; overflow: visible; margin: 0; margin-left: 10px; transition: none;}
.wholeMenu > div > div{visibility:visible; opacity:1; transition:none; transform:none; position: absolute;top:-5px;right:-100%; width: 100%; background: none;}
.wholeMenu .mobile{display: block;height: 84px;background: #2e2e2e;}
.wholeMenu .mobile > ul{padding-top: 26px;}
.wholeMenu .mobile > ul > li{float:left;margin-left: 17px;height: 32px;line-height: 32px;color:#c2c2c2;font-size: 0;}
.wholeMenu .mobile > ul > li:first-child{margin-left: 18px;}
.wholeMenu .mobile > ul > li > a{display: inline-block; padding-right: 16px; font-family: Roboto,sans-serif; font-size: 13px; color: #c2c2c2; letter-spacing: -0.3px; background:url(../../../../image/en/local/gnbMenuBg2.png) no-repeat 100% 50%; -webkit-background-size: 10px 5px; background-size: 10px 5px;}
.wholeMenu .mobile > ul > li.login > a{padding-left: 23px; padding-right: 0; background:url(../../../../image/en/local/login.png) no-repeat 0 50%; -webkit-background-size: 16px 16px; background-size: 16px 16px;}
.wholeMenu .mobile > ul > li.lang{position: relative; padding-left: 24px; background: url(../../../../image/en/local/langBg2.png) no-repeat 0 50%; -webkit-background-size: 16px 16px; background-size: 16px 16px;}
.langWrap{z-index: 10;}
.wholeMenu.leaving > div > div{visibility: hidden; opacity: 0;}
.wholeMenu.active > div > div{visibility: visible;opacity: 1;}
.wholeMenu > div > div > ul{display: block !important;height: 100%;padding: 0; background: #fff; min-height: 0;}
.wholeMenu > div > div > ul > li{float: none;width: auto; transition-duration: 0.5s;transition-timing-function: ease;}
.wholeMenu > div > div > ul > li.wholeMenu1{width: auto;}
.wholeMenu > div > div > ul > li.wholeMenu2{width: auto;}
.wholeMenu > div > div > ul > li.wholeMenu3{width: auto;}
.wholeMenu > div > div > ul > li.wholeMenu4{width: auto;clear: both;}
.wholeMenu > div > div > ul > li.wholeMenu5{width: auto;}
.wholeMenu > div > div > ul > li.wholeMenu6{width: auto;}
.wholeMenu > div > div > ul > li:hover > span{color: #232323}
.wholeMenu > div > div > ul > li > span{position: relative;padding: 19px 10px 19px 18px;line-height: 27px;margin: 0;border: none;text-align: left;cursor: pointer;font-family: RobotoM,sans-serif;font-size: 18px;color: #232323;letter-spacing: 0.1px;display: block;border-bottom: 1px solid #ddd;}
.wholeMenu > div > div > ul > li.on > span{color: #7534a0; background-color:#f6f6f6}
.wholeMenu > div > div > ul > li >  span span.bg{display: block;position: absolute;top: 28px;right: 15px;width: 15px;height: 10px;transform: translate(0, -10px);opacity: 0;visibility: hidden;transition: all .3s ease;background: url(../../../../image/en/local/wholeMenuBg2.png) no-repeat 0 0;-webkit-background-size: 15px 10px;background-size: 15px 10px;}
.wholeMenu > div > div > ul > li.on >  span span.bg{transform: translate(0, 0); opacity: 1; visibility: visible;}
.wholeMenu > div > div > ul > li > div{display: none;margin:0;padding: 18px 18px;box-shadow: 0 4px 3px 0px rgba(0,0,0,0.1);transition: none;}
.wholeMenu > div > div > ul > li > div ul > li{float: none; width: auto; margin: 0; line-height: 49px;}
.wholeMenu > div > div > ul > li > div > ul > li{float: none;width: auto;margin: 0;}
.wholeMenu > div > div > ul > li > div > ul > li > a{position: relative;padding: 5px 15px;margin-bottom: 0;font-family: Roboto,sans-serif;font-size: 15px;color: #171717;line-height: 20px;transition: 0.3s ease;background:url(../../../../image/en/local/wholeMenuBg.png) no-repeat 0 14px;-webkit-background-size: 5px 4px;background-size: 5px 4px;}
.wholeMenu > div .menuClose{visibility:hidden;opacity: 0;z-index: 31;top: 22px;width: 40px;height: 40px;right: 10px;}
.wholeMenu > div .menuClose.active{visibility:visible; opacity: 1;}
.wholeMenu > div .menuClose > span:nth-child(1){height: 2px;background-color: #fff;top: 47%;}
.wholeMenu > div .menuClose > span:nth-child(2){width: 2px;background-color: #fff;left: 47%;}
.wholeMenu .btn{position: absolute; right: 0px; top: 50%; margin-top: -7px; width: 14px; height: 14px; display: block; transition: transform,opacity; transition: transform,opacity,-webkit-transform,-moz-transform,-o-transform; -webkit-transition-duration: .35s; -moz-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;-webkit-transition-timing-function: cubic-bezier(.37,.01,0,.98); -moz-transition-timing-function: cubic-bezier(.37,.01,0,.98); -o-transition-timing-function: cubic-bezier(.37,.01,0,.98); transition-timing-function: cubic-bezier(.37,.01,0,.98);}
.wholeMenu .btn span{position: absolute; background-color: #403b38;-webkit-transition: -webkit-transform; -o-transition: -o-transform; -moz-transition: transform,-moz-transform; transition: transform; transition: transform,-webkit-transform,-moz-transform,-o-transform; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(.42,0,.58,1); -moz-transition-timing-function: cubic-bezier(.42,0,.58,1); -o-transition-timing-function: cubic-bezier(.42,0,.58,1); transition-timing-function: cubic-bezier(.42,0,.58,1); width: 3px; height: 100%; left: 50%; top: 0;  -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; margin-left: -3px;}
.wholeMenu .btn span:first-child{-webkit-transition: opacity,-webkit-transform; -o-transition: opacity,-o-transform; -moz-transition: transform,opacity,-moz-transform; transition: transform,opacity; transition: transform,opacity,-webkit-transform,-moz-transform,-o-transform; -webkit-transition-duration: .15s,.25s; -moz-transition-duration: .15s,.25s; -o-transition-duration: .15s,.25s; transition-duration: .15s,.25s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(.42,0,.58,1); -moz-transition-timing-function: cubic-bezier(.42,0,.58,1); -o-transition-timing-function: cubic-bezier(.42,0,.58,1); transition-timing-function: cubic-bezier(.42,0,.58,1); width: 100%; height: 3px; top: 50%; left: 0; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; margin-top: -1px; margin-left: -2px;}
.wholeMenu .btn.active{-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
.wholeMenu .btn.active span{background-color: #24866c;}
.wholeMenu .btn.active span:first-child{opacity: 0;}
.menuOpen > div{margin-right: 10px;}

/*Main Bg*/
.mainBg, .mainBg .bg1{height: 182px;}	
	
/*content*/
.contents1 > div{margin:0 10px;}
.contents2{margin-top: 56px;}
.contents3{position: relative; margin: 0;}
.contents3 > div{margin-right: 0; margin-left: 0; margin-bottom: 0;}
.contents4{padding-left: 0px; padding-right: 0px;}

/*divSearch*/
#divSearch{height: 160px;padding-top: 22px;}
.selectbox label{padding: 0; height: 0;}
#divSearch > div{width: auto; margin:0 10px;}
#divSearch > div .searchForm{padding-top: 43px; height: 57px;}
#divSearch > div .searchForm form{height: 57px;}
#divSearch > div .searchForm > ul{margin-left: 172px;}
#divSearch > div .searchForm ul li > a{width: 166px;left: -171px;}
#divSearch > div .searchForm > ul > li.on > a{width: 171px; font-size: 17px;}
#divSearch > div .searchForm > ul > li.on:first-child > a{text-indent: -15px;}
#divSearch > div .searchForm ul li > a .bg{right: 11px;}
#divSearch > div .searchForm ul li form fieldset{padding-left: 15px;margin: 0px 40px;}
#divSearch > div .searchForm > ul > li > div > ul{margin:0 10px;}
#divSearch > div .searchForm > ul > li > div > ul > li{padding:0 14px;}
#divSearch > div .searchForm > ul > li > div > ul > li li a{margin-left: 30px;}
#divSearch input::placeholder{color:#fff;}
#divSearch input[type="text"]::-webkit-input-placeholder{color:#fff;}
#divSearch input[type="text"]:-moz-placeholder{color:#fff;}
#divSearch input[type="text"]::-moz-placeholder{color:#fff;}
#divSearch input[type="text"]:-ms-input-placeholder{color:#fff;}
#divSearch input.placeholder{color:#fff;}
#divSearch form .inputWrap{margin-left: 135px;padding-left: 15px;height: 57px;line-height: 57px;}
#divSearch form input[type=text]{height: 57px; font-size: 13px;}
#divSearch form input[type=image]{padding: 18px 19px 17px;  width: 24px; height: 22px;}
.selectbox{width: 135px;height: 57px;}
.optList > dt{padding: 21px 10px 21px 10px;}
.optList > dt > span{padding-right: 15px;-webkit-background-size: 14px 9px;background-size: 14px 9px;}
.optList > dt > span > a{font-size: 13px;}
.optList > dd > ul{padding:16px 14px;}
.optList > dd > ul > li > a{font-size: 13px;}

/*notice*/
.notice{float: none; width: auto; margin-bottom: 38px;}
.notice h2{padding-top: 25px;margin-bottom: 30px;font-size: 35px;}
.noticeList > div{height: auto;}
.noticeList > div > ul{margin-left: 0; position: static; top: auto; left: auto; width: auto;}
.noticeList > div > ul > li{float: none; width:auto; margin: 0; display: none; margin-bottom: 9px;}
.noticeList > div > ul > li:first-child, .noticeList > div > ul > li:nth-child(2),  .noticeList > div > ul > li:nth-child(3){display: block;}
.noticeList > div > ul > li > a{margin-left: 0; margin-right: 0;}
.noticeList > div > ul > li > a > div{margin:0 20px;}
.noticeList .noticeImg{height: 178px;}
.noticeList .noticeImg img{min-height: 178px; min-width: 298px;}
.noticeList .noticeTitle{margin-top: 12px;margin-bottom: 2px;}
.noticeList .noticeTxt{padding-bottom: 21px;}
.noticeList > div.btn{display: none;}

/*Quick Menu*/
.quickMenu{padding-top: 45px;height: auto;}
.quickMenu > div{height: auto;}
.quickMenu > div > ul{position: static; width: 100%;}
.quickMenu li{width: 50%;height: auto;margin-bottom: 53px;}
.quickMenu li a img{margin-bottom: 12px;}

/*Calendar & Schedule*/
.csWrap{padding-bottom: 99px;}
.csWrap h2{margin-bottom: 33px; padding-top: 44px; font-size: 31px;}	
.csWrap > ul > li:first-child{display: block; position: static; width: auto;}
.csWrap > ul > li:last-child{width: 100%; margin-right: 0;}
.csWrap .csList{max-width: 100%;}
.csWrap .csList > div > ul{margin-left: 0;}
.csWrap .csList > div > ul > li{width: 50%; margin-bottom: 60px;}
.csWrap .csList > div > ul > li > a{margin-left: 10px; margin-right: 10px;}
.csWrap .btn{right: 0; width: 100%; text-align: center;}
.csWrap .btn a{float: none; display: inline; margin:0 21px;}
.calendarWrap{max-width: 100%;}
.calendarWrap > div{margin:0px;height: 349px;margin-bottom: 10px;}
.calendarWrap > div > .calendarBox{margin:0 48px 16px; padding-top: 17px;}
.calendarWrap > div > .calendarBox > .yearMonth{font-size: 18px;}
.calendarWrap > div > .calendarBox > span img{width: 12px; height: 12px;}
.calendarWrap > div > .calendar > table thead th, .calendarWrap > div > .calendar > table tbody td{padding:7px 0;}

/*book*/
.book{float: none; height: auto; width: auto;}
.book h2{margin-top: 56px;margin-bottom: 23px;}
.book > ul > li{position: relative; clear: both; display: block; padding-left: 0; margin-left: 0; background: none;}
.book > ul > li > a{display: block; padding-left: 0; margin:0 auto; max-width: 245px; height: 53px; text-align: center; line-height: 53px; font-family: RobotoL,sans-serif; color:#242a3a; border-top: 2px solid #b993cf; border-bottom: 2px solid #b993cf;}
.book > ul > li:first-child > a{margin:0 auto; max-width: 245px;}
.book > ul > li > a > span{display: inline-block; vertical-align:top; padding-right: 30px; background: url(../../../../image/en/local/main/bookMore2.png) no-repeat 100% 19px; -webkit-background-size: 15px 15px; background-size: 15px 15px;}
.book > ul > li > a:after{display: none;}
.book > ul > li > .bookWrap{display: block; position: static; top: auto; height: 273px; margin: 30px 0;}
.bookList > div > ul > li > div div.bookOff .bookImg{margin:0 auto;}
.book .bookList > div{height: 279px; margin: 0;}
.book .bookList > div > ul > li{width: 12.5%;}
.bookList > div > ul > li > div{width: 209px;}
.book .more, .book > ul > li.on > a.more{right: 0px;}
.book .bookList > div > ul > li{width: 25%; margin-bottom: 0;}
.bookList .bookOn{left: 50%; margin-left: -87px;}
.book > ul > li:hover .bookWrap .btn{visibility: visible; opacity: 1;}
.book .btn{top: -193px;}
.book .btn a, .book .btn a.next{margin-left: 6px;}
.book .noData{line-height: 220px;}
@media screen and (max-width:480px){
	.book .bookList{height: 238px; overflow: hidden;}
	.book > ul > li > .bookWrap{height: 223px;}
	.book .bookList > div{height: 279px;}
	.bookList > div > ul > li > div{width: 128px;}
	.bookList > div > ul > li > div > div.bookOff{width: 126px;height: 166px;}
	.bookList > div > ul > li > div > div.bookOff > p{padding-top: 12px;height: 153px;}
	.bookList > div > ul > li > div div.bookOff .bookTitle span{margin-right: 0; margin-left: 0;}
	.bookList > div > ul > li > div div.bookOff .bookImg{padding-top: 12px; width: 127px;height: 154px;}
	.bookList > div > ul > li .bookImg > span{width: 127px;}
	.book .bookList > div > ul > li .bookImg > span img{width: 105px;height: 142px;}
	.bookList .bookOn{margin-left: -64px; width: 128px;height: 169px;}
	.bookList .bookOn p.title{margin-top: 25px;}
	.book .btn{top: -181px;}
	.book .btn a, .book .btn a.next{margin-left: 6px;}
	.book .noData{line-height: 157px;}
}

/*footer*/
.footer{padding-top: 59px;text-align: center;}
.footerWrap > div.sns{position: static; font-size: 0; right: auto; top: auto; padding-bottom: 53px;}
.sns li{display: inline-block; float: none;}
.footerLogo{left: 50%;margin-left: -52px;top: 31px;}
.footerLogo span{margin-left: 0;}
.libraryInfo{margin: 0 10px 0; padding-bottom: 59px;}
.libraryInfo li{float: none; display: inline;}
.footerWrap > div{padding: 20px;}
.copyright{font-size: 13px;}