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

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

/* 공통속성 */
.container{width: 1000px; margin: 0 auto;} /* 모바일기준이므로 width 1000px */
.row{position: relative; margin: 0 16px;} /* 양옆 여백을 위한 클래스 */
.red{color: #E80808;}
h2{margin-bottom: 18px; color: #333; font-size: 18px; font-weight: 600; letter-spacing: -1.5px;}
h3{margin-bottom: 15px; padding-bottom: 12px; color: #333; font-size: 16px; font-weight: 500; letter-spacing: -1px; border-bottom: 1px solid #ccc;}

	/* 탭 */
.tap{margin:115px 0 40px 0; width: 100%; height: auto;}
/* .tap .row{margin: 0 30px;} */
.tap ul{display: flex; width: 100%; justify-content: space-between;}
.tap ul li{width: 48%; padding-bottom: 10px; font-size: 21px; letter-spacing: -1.5px; color: #aaa; border-bottom: 2px solid #ccc;}
.tap ul li.active{color: #5C1680; font-weight: 500; border-bottom-color: #5C1680;}

	/* 리스트 스타일 */
.depth_1{margin-bottom: 15px; color: #555; font-size: 16px; }
.depth_1>li{margin-bottom: 8px; padding-left: 10px; background: url(../images/bullet_1.png) no-repeat 0 8px;}
.depth_2{margin-top: 2px; margin-bottom: 1px; color: #555; font-size: 14px; }
.depth_2>li{margin-bottom: 5px; padding-left: 10px; background: url(../images/bullet_2.png) no-repeat 0 9px;}
.depth_3{margin-top: 2px; margin-bottom: 1px; color: #555; font-size: 13px; }
.depth_3>li{margin-bottom: 3px; padding-left: 6px; background: url(../images/bullet_3.png) no-repeat 0 8px;}

	/* 테이블 */
table{width: 100%; border-collapse: collapse; margin-bottom: 30px; color: #555; font-size: 14px; font-weight: 400;}
table thead{font-weight: 500; text-align: center; background: #eee; border-top: 2px solid #5C1680; border-bottom: 1px solid #5C1680;}
table thead th, table tbody td{padding: 8px; border-right: 1px solid #5C1680;}
table thead th:last-child, table tbody td:last-child{border-right: 0;}
table tbody tr:last-child{border-bottom: 1px solid #5C1680;}
table tbody td{vertical-align: top;}

table ul.depth_1>li{margin-bottom: 7px; padding-left: 10px; color: #555; font-size: 14px; background: url(../images/bullet_1.png) no-repeat 0 7px;}
table ul.depth_1>li>ul.depth_2>li{margin-bottom: 4px;padding-left: 10px;background: url(../images/bullet_2.png) no-repeat 0 7px;}

	/* 인풋 박스 */
fieldset{margin-bottom: 30px; padding: 20px; background: #f5f5f5;}
fieldset.fieldset_p{margin-bottom: 30px; padding: 20px; border: 1px solid #ccc; background: #fff;}
label{display: block; margin-bottom: 4px; padding-left: 15px; font-size: 14px; font-weight: 500; color: #555;}
input{width: 100%; margin-bottom: 10px; padding: 10px; font-size: 14px; background: rgba(92,22,128,.12); border: 0; border-radius: 50px; box-sizing: border-box;}

	/* 텍스트 박스 */
.text_box{margin-bottom: 20px; padding: 10px; background: #eee;}
.text_box dl{color: #555; font-size: 14px; letter-spacing: -1px;}
.text_box dl dt{margin-bottom: 2px; font-weight: 500;}
.text_box dl dd{margin-bottom: 2px; padding-left: 17px; font-weight: 400;}

	/* 버튼 */
button.btn_p{width: 48%; margin-bottom: 30px; padding: 10px; color: #5C1680; font-size: 16px; font-weight: 400; text-align: center; letter-spacing: -1px; border: 1px solid #5C1680; border-radius: 50px; background: #fff;}
button.btn_n{width: 48%; margin-bottom: 30px; padding: 10px; color: #fff; font-size: 16px; font-weight: 400; text-align: center; letter-spacing: -1px; border: 1px solid #5C1680; border-radius: 50px; background: #5C1680;}
button.btn_g{width: 48%; margin-bottom: 30px; padding: 10px; color: #fff; font-size: 16px; font-weight: 400; text-align: center; letter-spacing: -1px; border: 1px solid #aaa; border-radius: 50px; background: #aaa;}
button.btn_s{width: 25%; padding: 7px; color: #fff; font-size: 14px; text-align: center; letter-spacing: -1px; border: 1px solid #5C1680; border-radius: 50px; background: #5C1680;}


/* header */
#header{position: fixed; top: 0; width: 100%; height:43px; margin: 0; padding-top: 42px; background: #5C1680; z-index: 10}
#header .row{display: flex; align-items: flex-start;}
#header .arrow{width: 24px; height: 24px;}
#header h1{position: relative; display: inline-block; width: 100%; margin: 0 auto; color: #fff; font-size: 21px; text-align: center;}
#header .menu{float: right; width: 24px;}
#header .appBtn {width: 22px; height: 16px; display: block; position: relative; top: 3px; z-index: 999;}
#header .appBtn>i {position: absolute; width: 100%; height: 2px; background: #fff; display: block; left: 0;}
#header .appBtn>i.bar1 {top: 0; transform: rotate(0deg); transition: all 0.3s;}
#header .appBtn>i.bar1.addAppbar {transform: rotate(45deg); top: 50%; margin-top: -1px; transition: all 0.3s;}
#header .appBtn>i.bar2 {top: 50%; margin-top: -1px;}
#header .appBtn>i.bar2.addAppbar {opacity: 0; transition: all 0.3s;}
#header .appBtn>i.bar3 {bottom: 0; transform: rotate(0deg); transition: all 0.3s;}
#header .appBtn>i.bar3.addAppbar {bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg); transition: all 0.3s;}


/* sub_1 */
/* main */
.my_data .row{margin: 0 30px;}
.my_data{position: relative; padding-top:85px; width: 100%; height: 400px; color: #fff; background: #5C1680;}
.my_data .text_wrap{margin-top: 20px;}
.my_data .text_wrap .name{font-size: 24px; font-weight: 300; line-height: 38px;}
.my_data .text_wrap .name span{font-size: 28px; font-weight: 500;}
.my_data .text_wrap .guide{margin-top: 10px; color: rgba(255,255,255,.6); font-size: 20px; font-weight: 300;}
.my_data .data_wrap{display: flex; width: 100%; height: 130px;margin-top: 48px; }
.my_data .data_wrap .genre{width: 50%; border-right: 1px solid rgba(255,255,255,.3); box-sizing: border-box;}
.my_data .data_wrap .genre picture{display: block; width: 100px; margin: 0 auto;}
.my_data .data_wrap .total{width: 50%; box-sizing: border-box; padding-left: 15px;}
.my_data .data_wrap h2{margin-bottom: 5px; color: #fff; font-size: 16px; font-weight: 400;}
.my_data .data_wrap .text{margin-top: 50px; font-size: 20px; font-weight: 400; text-align: center;}
.my_data .data_wrap .text span{font-size: 45px; font-weight: 500; letter-spacing: -1px;}

/* member */
.member{position: relative; width: 100%; margin-top: -75px;}
.member .member_box{width: 100%; height: 150px; padding: 20px; background: #fff; box-shadow: 1px 4px 4px rgba(0,0,0,.1); z-index: 2; box-sizing: border-box;}
.member picture img{display: block; width: 100%; height: 90px; overflow: hidden;}
.member .member_num{margin-top: 8px; color: #333; font-size: 18px; text-align: right; font-weight: 400;}

/* icon_menu */
.icon_menu{position: relative; top: 0; width: 100%; height: auto; margin-bottom: 70px; z-index: -2;}
.icon_menu .row{margin: 0px 30px;}
.icon_menu ul{display: flex;  justify-content: space-between;}
.icon_menu li{display: flex; justify-content: flex-start; align-items: center; width: auto; height: auto; margin: 30px 0; text-align: center;}
.icon_menu li .icon_wrap picture{display: block; width: 29px; /* height: 43px; */ margin: 0 auto 10px auto;}
.icon_menu li .icon_wrap p{color: #333; font-size: 16px; font-weight: 400;}
.icon_menu li .text_wrap{margin-left: 24px; color: #666; font-size: 20px; font-weight: 400;}
.icon_menu li .text_wrap span{color: #FFC926; font-size: 52px; font-weight: 600;}

/* sub_2 */
.request_btn{display: flex; justify-content: space-between; margin-bottom: 70px;}


/* sub_3 */
#apply{margin-top: 115px;}
.apply_wrap dl{display: flex; justify-content: space-between;} 
.apply_wrap dt{width: 38%;} 
.apply_wrap dd{width: 60%;} 
.apply_btn{text-align: center; margin-bottom: 70px;}

.apply_wrap .tap>ul{margin-top: -100px; margin-bottom: -15px;}
.apply_wrap .tap>ul>li{font-size: 16px;}
.apply_wrap select{width: 100%; margin-bottom: 10px; padding: 10px 10px 10px 15px; color: #333; font-size: 14px; font-weight: 500; background: url(../images/sub_select_arrow.png) rgba(92,22,128,.12) no-repeat 95% center; border: 0; border-radius: 50px; box-sizing: border-box;}
.apply_wrap #apply_check{display: inline-block; width: 20px; margin-left: 10px;}
.apply_wrap .check_label{display: inline-block; padding-left: 0;}
.apply_wrap .btn_s{margin-left: 75%;}

/* sub_4 */
#notice{margin-top: 115px;}
table.notice_tbl{width: 100%; border-collapse: collapse; margin-bottom: 70px; color: #333; letter-spacing: -1.5px;}
table.notice_tbl .notice_label{padding: 13px 0 0 0; border-bottom: 1px solid #ccc; border-right: 0; font-size: 21px; font-weight: 300; color: #5C1680; letter-spacing: 0;}
table.notice_tbl .notice_label span{height: 12px; padding: 2px 8px; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: -1px; background: #FFC926; border-radius: 50px;}
table.notice_tbl .notice_tit{padding-top: 10px; font-size: 21px; line-height: 28px; border: none;}
table.notice_tbl .notice_more{padding-top: 17px; border-bottom: 1px solid #ccc;}
table.notice_tbl .notice_more picture{display: block; width: 8px;}
table.notice_tbl .notice_date{color: #aaa; letter-spacing: 0; padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid #ccc;}

/* sub_5 */
#reading_room{margin-top:115px; margin-bottom: 100px;}
#reading_room .select_box{display: flex; justify-content: space-between; margin-bottom: 30px; padding: 20px; background: #f5f5f5;}
#reading_room select{width: 48%; padding: 10px 10px 10px 15px; color: #5C1680; font-size: 16px; font-weight: 400; background: url(../images/sub_select_arrow.png) rgba(92,22,128,.12) no-repeat 94% center; border: 0; border-radius: 50px; box-sizing: border-box;}
#reading_room .r_room_tbl{width: 100%; margin-top: -20px; border-collapse: collapse; border: 0;}
table.r_room_tbl .room{padding: 45px 0; color: #333; font-size: 21px; border-bottom: 1px solid #ccc; border-right: 0;}
table.r_room_tbl .seat{display: inline-block; color: #888; font-size: 16px;}
table.r_room_tbl .seat span{color: #5C1680; font-size: 21px; font-weight: 500;}
table.r_room_tbl .seat picture{display: inline-block; width: 2px; margin: 0 3vw;}
table.r_room_tbl .graph{color: #888; font-size: 14px; text-align: right; border-bottom: 1px solid #ccc; vertical-align: middle;}
table.r_room_tbl .graph .circle{display: inline-block; width: 80px; height: 80px; padding-top: 23px; text-align: center; border: 10px solid #ccc; border-radius: 50px; box-sizing: border-box;}
table.r_room_tbl .graph span{color: #5C1680; font-weight: 500;}

.chart{position: relative; right: 0; width: 80px; height: 80px;}
.circle_mask_outer, .circle_mask_inner{
	width: 40px;
	height: 80px;
	position: absolute;
	overflow: hidden;
}
.circle_mask_outer.left{left: 0;}
.circle_mask_outer.right{right: 0;}
.circle_mask_outer.left .circle_mask_inner{left: 100%;
	/* transform: rotate(52deg); jQuery에서 설정 */
	transform-origin: 0 50%; /* 회전기준점 옮기기 */
}
.circle_mask_outer.right .circle_mask_inner{right: 100%;
	/* transform: rotate(180deg); jQuery에서 설정 */
	transform-origin: 100% 50%; /* 회전기준점 옮기기 */
}
.circle_mask_outer.left .circle_body{
	right: 0;
}
.circle_mask_outer.right .circle_body{
	left: 0;
}
.circle_body{
	width: 80px;
	height: 80px;
	position: absolute;
	border-radius: 50%;
	background-color: #5C1680;
}
.chart_content{
	width: 60px;
	padding-top: 20px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	/* box-shadow: 0 0 20px rgba(0,0,0,.5); */
	text-align: center;
	backface-visibility: hidden;
	position: absolute;
	top: 10px;
	left: 10px;
}
.chart_content .text{color: #888; font-size: 14px;}
.chart_content .text .percent_number{color: #5C1680; font-weight: 500;}

/* sub_6 */
#re_book{margin-top:115px; margin-bottom: 90px; position: relative; height: 100%;}
#re_book h2{margin-bottom: 10px; color: #333; font-size: 21px; font-weight: 500;}
#re_book h2 span{color: #5C1680;}
#re_book .h2_bg{position: relative; top: -20px; left: -16px; width: 240px; height: 15px; background: #FFE926; z-index: -1;}
#re_book h3{margin-top: 12px;padding: 20px 0 12px 0; color: #333; font-size: 18px; border-top: 1px solid #fff; border-bottom: 0;}
#re_book .h3_bg{position: relative; top: -300px; left: 0; width: 100%; height: 320px; background: #f2f2f2; z-index: -2;}
#re_book .book_tit{position: absolute; bottom: -26px; width: 100%; color: #555; font-size: 14px; font-weight: 500; letter-spacing: -1.5px; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;}
.swiper-container {
      width: 100%;
      height: 100%;
	  padding-bottom: 39px;
    }
    .swiper-slide {
      text-align: center;
      /* font-size: 18px;
      background: #fff; */

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
#re_book .keywords{display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start;}
#re_book .keywords>li{margin: 0 5px 8px 0; padding: 5px 15px; color: #5C1680; font-size: 16px; letter-spacing: -1px;  border: 1px solid #5C1680; border-radius: 50px;}
#re_book .keywords>li:before{content: "#";}
#re_book .new_book{margin-top: -270px;}
#re_book .new_book h2{margin-bottom: 25px;}
#re_book .best_book{margin: 25px 0 20px 0; padding-top: 30px; border-top: 1px solid #ccc;}

/* sub_7 */
.book_detail_bg{position: relative; top: 85px; left: 0; width: 100%; height: 260px; background: #eee; z-index: -1;}
#book_detail{margin-top: -135px; margin-bottom: 100px;}
#book_detail .cover{position: relative; width: 100%;}
#book_detail .like_btn{position: absolute; top: -22px; left: 68%; cursor: pointer;}
#book_detail .book_img>picture{display: block; width: 50%; margin: 25px auto;}
#book_detail .book_tit{text-align: center;}
#book_detail .book_tit .tit{width: 60%; margin: 0 auto; color: #333; font-size: 18px; font-weight: 600; line-height: 28px; letter-spacing: -1px;}
#book_detail .book_tit .writer{margin-top: 8px; color: #666; font-size: 16px; font-weight: 400; letter-spacing: -0.5px;}
#book_detail .book_tit .publisher{margin-top: 5px; color: #888; font-size: 14px; font-weight: 500; letter-spacing: -0.5px;}
#book_detail .detail_tbl{width: 100%; margin-top: 38px; font-size: 14px;}
#book_detail .detail_tbl tr{border-bottom: 0;}
#book_detail .detail_tbl th{padding: 3px 0; color: #666;  font-weight: 300; text-align: left; border: 0;}
#book_detail .detail_tbl td{color: #333; font-weight: 400; border: none; vertical-align: middle;}
#book_detail .detail_btn{margin-top: 55px;}

/* sub_8 */
#event{margin-top:115px; margin-bottom: 70px;}
#event .select_box{display: flex; justify-content: space-between; margin-bottom: 30px; padding: 20px; background: #f5f5f5;}
#event select{width: 48%; padding: 10px 10px 10px 15px; color: #5C1680; font-size: 16px; font-weight: 400; background: url(../images/sub_select_arrow.png) rgba(92,22,128,.12) no-repeat 94% center; border: 0; border-radius: 50px; box-sizing: border-box;}
#event .tap{margin-top: 50px; margin-bottom: 20px;}
#event .event_tit{margin-bottom: 10px; padding: 10px 15px; color: #333; font-size: 18px; font-weight: 500; background: rgba(92,22,128,.07);}
#event table{margin-bottom: 10px;}
#event table td{text-align: center;}
#event .event_btn{text-align: right;}

/* sub_9 */
#lib_info{margin-bottom: 100px;}
#lib_info .text_box{margin-bottom: 40px; padding: 15px 10px 3px 20px;}
#lib_info .text_box dl dt{display: inline-block; width: 20%; color: rgba(92,22,128,.5); font-size: 14px; font-weight: 500; vertical-align: top;}
#lib_info .text_box dl dd{display: inline-block; width: 78%; margin-bottom: 12px; padding-left: 0px; color: #555; font-size: 16px; font-weight: 400;}
#lib_info .depth_1{margin-bottom: 25px;}
#lib_info .info_time{margin: 6px 0 5px 0;}
#lib_info .info_time>li{margin-bottom: 3px; color: #666; font-size: 14px;}
#lib_info .facilities{}
#lib_info .facilities tr{border-bottom: 0;}
#lib_info .facilities tr.v_bg{background: rgba(92,22,128,.07);}
#lib_info .facilities tr td{padding: 8px; color: #555; font-size: 14px; border-right: 0;}
#lib_info .facilities tr td.seat_r{text-align: right;}


/* 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%;}
}