@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

body{background: #f5f5f5; font-family: 'Noto Sans KR', sans-serif;}

/* 공통속성 */
.container{width: 1000px; margin: 0 auto;} /* 모바일기준이므로 width 1000px */
.row{position: relative; margin: 0 16px;} /* 양옆 여백을 위한 클래스 */

/* header */
#header{position: fixed; top: 0; width: 100%; height:100px; margin: 0; padding: 0; background: #5C1680;}
#header h1{/* position: absolute; */ width: 193px; margin: 0 auto; padding-top: 55px; background: #5C1680;}

/* main */
.search{position: fixed; top: 100px; width: 100%; height: 284px; background: #5C1680;}
.search select{width: 48%; height: 42px; margin: 50px auto 45px auto;  padding: 0 16px; color: #fff; font-size: 16px; font-weight: 400; background: url(../images/select_arrow.png) no-repeat 93% center rgba(0,0,0,.2); border: 0; border-radius: 50px; }
.search #lib_sec{float: left;}
.search #idx_sec{float: right;}

.search .search_box{width: 100%; padding: 15px 5px; color: #fff; font-size: 21px; border-bottom: 1.5px solid #fff; box-sizing: border-box;}
.search .guide{width: 100%; color: rgba(255,255,255,.4); font-size: 21px;}

/* member */
.member{position: fixed; top: 340px; width: 100%;}
.member .member_box{width: 100%; height: 84px; padding: 20px; background: #fff; box-shadow: 1px 4px 4px rgba(0,0,0,.1); z-index: 2; box-sizing: border-box;}
.member .member_box a{display: flex; width: 100%; justify-content: space-between;}
.member .member_left{width: 55%; color: #333;}
.member .name{margin-bottom: 5px;}
.member p{font-size: 3.6vw; font-weight: 400; letter-spacing: -1px;}
.member .name>span{font-size: 4.4vw; font-weight: 500;}
.member .text>span{color: #5C1680; font-size: 4.8vw; font-weight: 500;}
.member .mem_barcode{position: relative; width: 40%; height: 46px;}
.member .mem_barcode .barcode{overflow: hidden; width: 100%; height: 46px; vertical-align: center;}
.member .barcode picture img{display: block; width: 100%; height: 46px;}
.member picture.plus{position: absolute; top: 8px; left: -14px; height: 28px;}

/* icon_menu */
.icon_menu{position: relative; top: 430px; width: 100%; height: 400px; margin-bottom: 70px; z-index: -2;}
.icon_menu .row{margin: 0 30px;}
.icon_menu ul{display: flex; align-items: flex-end; justify-content: space-between; width: 100%;}
.icon_menu li{width: auto; height: 70px; margin: 30px 0; text-align: center;}
.icon_menu li a{display: block;}
.icon_menu li object{pointer-events: none;}/* object요소가 a요소를 덮어서 클릭이벤트가 발생하지 않는 것을 해결(a요소 block으로 설정되어함) */
.icon_menu li picture{display: block; width: 42px; /* height: 43px; */ margin: 0 auto 10px auto;}
.icon_menu li picture.recommend{width: 38px;}
.icon_menu li picture.facebook{width: 22px;}
.icon_menu li p{color: #888; font-size: 15px; font-weight: 400;}

/* footer */
#footer{position: fixed; bottom: 0; width: 100%; height: 40px; padding: 15px 0; border-top: 1px solid #ccc; background: #fff; box-shadow: 0 -2px 5px rgba(200,200,200,.3); z-index: 12;}
#footer .row{margin: 0 30px;}
#footer ul{display: flex; width: 100%; align-items: flex-end; justify-content: space-between;}
#footer li{width: auto; text-align: center;}
#footer li picture{display: block; width: 24px; height: 24px; margin: 0 auto;}
#footer li p{margin-top: 5px;color: #8a8a8a; font-size: 12px; font-weight: 400;}
#footer li p.on{color: #5C1680;}



@media screen and (max-width:1010px) {
    .container{width: 100%;}
}