@charset "utf-8";

#sub_submenu {
	/* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */
	display: block;
	width: 1280px;
	margin:58px auto -30px;
	text-align: center;
	
	/* text-align: center;
	height: 124px; */
}

#sub_submenu ul {
	/* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */
	display: inline-block;

	/* margin-top: 21px;
	height: 103px; */	
}

#sub_submenu li {
	float: left;
	margin-right: 14px;
	height: 50px;
	padding-bottom: 20px;  /* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */

	/* padding-top: 37px; */	
}

#sub_submenu li:last-child {
	margin-right: 0px;
}

.submenu_i {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffffff;
}

.submenu_i:hover {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #0056e1;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #3985ff;
	color: #ffffff;
}

.submenu_i_on {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #0056e1;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #3985ff;
	color: #ffffff;
}

.submenu_p {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffffff;
}

.submenu_p:hover {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #f57025;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ff7900 !important;
	color: #ffffff !important;
}

.submenu_p_on {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #f57025;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ff7900;
	color: #ffffff;
}

.submenu_p_off {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffffff;
	color: #000000 !important;
}

.submenu_k {
	display: inline-block;
	height: 48px;
	padding-left: 42px;
	padding-right: 42px;
	border: 1px solid #ffa423;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #fff265;
	/* background-color: #fff681; */
	color: #ff7a00;
	background-image: url(/image/main/submenu_icon.png), url(/image/main/submenu_icon.png);
	background-repeat: no-repeat;
	background-position: 10px 12px, 105px 12px;
	font-weight: bold;
}

.submenu_k_on {
	display: inline-block;
	height: 48px;
	padding-left: 42px;
	padding-right: 42px;
	border: 1px solid #ffa423;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffd681;
	color: #ff3a01;
	background-image: url(/image/main/submenu_icon.png), url(/image/main/submenu_icon.png);
	background-repeat: no-repeat;
	background-position: 10px 12px, 105px 12px;
	font-weight: bold;
}

.submenu_k:hover {
	display: inline-block;
	height: 48px;
	padding-left: 42px;
	padding-right: 42px;
	border: 1px solid #ffea825;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffd681;
	color: #ff3a01;
	background-image: url(/image/main/submenu_icon.png), url(/image/main/submenu_icon.png);
	background-repeat: no-repeat;
	background-position: 10px 12px, 105px 12px;
	font-weight: bold;
}


.submenu_star {
	/* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */
	position: absolute;
    top: -36.5px;
    left: 50%;
    margin-left: -37px;
    background-image: url(/image/main/submenu_star.png);
    background-repeat: no-repeat;
    background-size: 76px 37px;
    width: 76px;
    height: 37px;

	/* background-image: url(/image/main/submenu_star.gif);
	background-repeat: no-repeat;
	background-position: 40px 1px; */
}

.nav_k:hover .submenu_ks {
	display: block;
}

.nav_k {
	position: relative;

	/* padding-bottom: 20px; */
}

.submenu_ks {
	display: none;
	position: absolute;
	width: 137px;
	margin-top: 10px;
	border: 1px solid #ffde27;
	background-color: #fff265;
	/* background-color: #fff681; */
	z-index: 2;
	border-radius: 20px;
}

.submenu_ks a {
	display: block;
	font-size: 18px;
	color: #ff7a01;
	font-weight: bold;
	border-bottom: 1px solid #fedf25;
	height: 40px;
	line-height: 40px;
}

.submenu_ks a:first-child {
	border-radius: 20px 20px 0px 0px;
}

.submenu_ks a:last-child {
	border-bottom: 0px;
	border-radius: 0px 0px 20px 20px;
}

.submenu_ks a:hover {
	background-color: #fedf25;
	color: #fe7900;
}

.subtitle {
	text-align: center;
	height: 130px;
	line-height: 150px;
	position: relative;
}

.subtitle p {
	display: inline-block;
	font-size: 38px;
	font-weight: 700;
}

/* .subtitle select {
	position: absolute;
	top: 45px;
	right: 0px;
	border: 1px solid #cccccc; 
	background: #ffffff; 
	width: 162px; 
	height: 38px; 
	text-align: center;
	font-size: 17px;
	z-index: 9999;
} */

.subtitle select {
	position: absolute;
	top: 55px;
	right: 0px;
	font-size: 17px;
	color: #171717;
	text-align: left;
	width: 162px; 
	height: 38px;
	padding-left: 20px;
	border: 1px solid #cccccc;
	box-sizing: border-box;
	background: #fff url(/image/sub/arrow_select_down.png);
	background-size: 12px 7px;
	background-repeat: no-repeat;
	background-position: right 20px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none !important;
	z-index: 9999;
}

.subtitle select:focus {
	border: 1px solid #276fe5;
	outline: none !important;
	background: #fff url(/image/sub/arrow_select_up.png);
	background-size: 12px 7px;
	background-repeat: no-repeat;
	background-position: right 20px center;
}

.subtitle_02 {
	display: block;
	margin: 40px auto 30px;
	text-align: center;
	position: relative;
}

.subtitle_02 p {
	font-size: 38px;
	font-weight: 700;
}

#sub_list {
	width: 1158px;
	border: 1px solid #cccccc;
	min-height: 250px;
	/* min-height: 400px; */
	padding: 60px;
}

#sub_list li {
	width: 100%;
	text-align: left;
	position: relative;
	font-size: 20px;
	display: inline-block;
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #d7d7d7;
}

#sub_list li:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: 0px;
}


.book-card_l {
  gap: 20px;
  position: relative;
}

.book-card_l .book_photo_l {
  border: 1px solid  #dddddd;
  height: 220px;
}

.book-info {
	font-size: 29px;
	width: 100%;
}

.book-info_l .book_detail_l {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	position: absolute;
	font-size: 20px;
	top: 55px;
	left: 172px;
	width: 998px;
	overflow: hidden;
}

.book-info_l h3 {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
    position: absolute;
	font-size: 29px;
	top: 0px;
	left: 172px;
	height: 100px;
	line-height: 40px;
	font-weight: 700;
}

.book-info_l p {
  float: left;
  margin: 5px 0;
  font-size: 20px;
  line-height: 1.6em;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer_gap {
	display: inline-block;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #606060;
	padding: 0 10px;
	vertical-align: text-bottom;
	/* vertical-align: top; */
	/* margin-top: -2px; */
}

.book-info_l p:nth-child(2n) {
  float: left;
  margin: 5px 0;
  font-size: 20px;
  line-height: 1.6em;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-info_l p:nth-child(2n) img {
	vertical-align: top;
}

.book-info_l p:nth-child(5) {
  float: left;
  margin: 5px 0;
  font-size: 18px;
  line-height: 1.6em;
  width: 984px;
  /* height: 100px; */
  color: #6c6c6c;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  display: -webkit-box;  
  -webkit-line-clamp: 3;  /* 3줄 넘어가면 말줄임 */
  -webkit-box-orient: vertical;
  white-space: normal;
}


.tag1_l {
	display: inline-block;
	background-color: #1f88e5;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 13px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}

.tag2_l {
	display: inline-block;
	background-color: #1976b3;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 13px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}


.tag3_l {
	display: inline-block;
	background-color: #199db2;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 13px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}

.tag4_l {
	display: inline-block;
	background-color: #1ab289;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 8px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}

.tag5_l {
	display: inline-block;
	background-color: #1ab289;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 8px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}

.tag_txt {
	display: inline-block;
	overflow: hidden;
  /* text-overflow: ellipsis; */
  display: -webkit-box;  
  -webkit-line-clamp: 3;  /* 3줄 넘어가면 말줄임 */
  -webkit-box-orient: vertical;
  white-space: normal;
  width: 880px;
  float: right;
}

.tag_star{
	display: inline-block;
	vertical-align: bottom !important;
	line-height: 26px;
}

.tag_star img{
	margin-right: 3px;
}

.paging { 
	text-align: center; 
	font-size: 0; /* 공백 제거 */
}
.paging a { 
	display: inline-block; 
	width: 30px;
	height: 30px; 
	line-height: 30px;
	background-color: #f8f8f8; 
	border: 1px solid #dddddd;
	text-decoration: none;
	font-size:13px; 
	color:#979797; 
	margin-right: 5px;
}
.paging a:last-child { 
	margin-right: 0;
}
.paging a.num { 
	background: #ffffff; 
}
.paging a.on {
	background-color: #4a4a4a; 
	color: #ffffff;
	font-weight: bold;
	cursor: default; 
	border: 1px solid #4a4a4a;
}
.paging a.first { 
	text-indent: -9999px;
	background: #f8f8f8 url(/image/sub/arrow_first.png) no-repeat center;
}
.paging a.prev { 
	text-indent: -9999px;
	background: #f8f8f8 url(/image/sub/arrow_prev.png) no-repeat center;
}
.paging a.next { 
	text-indent: -9999px;
	background: #f8f8f8 url(/image/sub/arrow_next.png) no-repeat center;
}
.paging a.end {
	text-indent: -9999px; 
	background: #f8f8f8 url(/image/sub/arrow_end.png) no-repeat center; 
}


#parking {
	width: 1158px;
	border: 1px solid #cccccc;
	min-height: 300px;
	padding: 60px;
	text-align: center;
}

#ctn_square {
	width: 1158px;
	border: 1px solid #cccccc;
	min-height: 300px;
	padding: 60px;
	text-align: center;
}

#ctn_square_02 {
	width: 1158px;
	border: 1px solid #cccccc;
	padding: 50px 60px 40px;
	text-align: center;
}

.member_join {
	text-align: left;
	margin-top: 40px;
	margin-left: 180px;
	/* margin-left: 110px; */
}

.member_login {
	text-align: left;
	margin-left: 280px;
}

.main_detail {
	text-align: left;
	margin-left: 280px;
}


.member_join ul {
	display: inline-block;
	margin-bottom: 12px;
}

.member_login ul {
	display: inline-block;
	margin-bottom: 12px;
}

.main_detail ul {
	display: inline-block;
	margin-bottom: 12px;
}

.member_join li {
	float: left !important;
}

.member_login li {
	float: left !important;
}

.pw_notice {
	display: inline-block;
	width: 100%;
	margin-left: 120px;
	font-size: 14px;
	font-weight: 400;
	color: #ff7900;
	text-align: left;
}

.member_join_completed {
	display: inline-block;
	width: 100%;
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
	background-image: url(/image/sub/logo_join_bg.png);
	background-size: 655px 227px;
	background-repeat: no-repeat;
	background-position: center center;
}

.join_completed_title {
	font-size: 25px;
	font-weight: 700;
	color: #003ea1;
	margin: 20px auto 35px;
}

.font_orange_01 {
	color: #fe7800 !important;
}

.main_detail li {
	float: left !important;
}

.input_title_01 {
	width: 120px;
	font-size: 19px;
	font-weight: 700;
	color: #323232;
	text-align: left;
	line-height: 60px;
}

.input_box_01 {
	line-height: 0px;
}

.text_st {
	display: inline-block;
	width: 476px;
	height: 56px;
	background: #fff;
	border: 1px solid #d4d4d4;
	font-size: 19px;
	color: #323232;
	text-align: left;
	vertical-align: middle;
	padding-left: 20px;
}

.text_st_a {
	display: inline-block;
	width: 496px;
	height: 56px;
	background: #0056e0;
	border: 1px solid #2663c5;
	font-size: 19px;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
	line-height: 56px;
}

.text_st_a:hover {
	display: inline-block;
	width: 496px;
	height: 56px;
	background: #0049bd;
	border: 1px solid #26549d;
	font-size: 19px;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
	line-height: 56px;
}

.text_st_02 {
	display: inline-block;
	width: 700px;
	height: 56px;
	background: #fff;
	border: 1px solid #d4d4d4;
	font-size: 19px;
	color: #323232;
	text-align: left;
	vertical-align: middle;
	padding: 0 20px;
}

input[type="checkbox" i] {
    cursor: pointer;
    appearance: auto;
    box-sizing: border-box;
	vertical-align: baseline;
}

.input_box_area {
	display: inline-block;
	width: 100%;
	margin: 0 auto;
	vertical-align: baseline;
}

.search_category {
	display: block;
	width: 1000px;  /* 250611 카테고리 추가로 인한 2줄 이상일 경우 레이아웃 정렬 위해 추가 */
	margin: 20px auto 0;
}

.search_category ul {
	display: inline-block;
	overflow: hidden;
	margin-bottom: 0 !important;
}

.search_category ul li{
	float: left;
	margin-right: 30px;
}

.search_category ul li:last-child{
	margin-right: 0px;
}

.check_box_02 {
  display: inline-flex;
  align-items: center;
  height: 15px;
  position: relative;
  margin-top: 5px;
}

.check_box_02 label {
  display: inline-flex;
  align-items: center;
  height: 15px;
  margin-left: 16px; /* 여백을 label 내부에서 조정 */
}

.check_box_02 input {
	vertical-align: middle;
}

.check_box_02 input[type="checkbox"] {
  appearance: none; /* 브라우저 기본 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: #fff;
  border-radius: 50px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
}

.check_box_02 input[type="checkbox"]:checked {
  background: #0056e0 url(../image/sub/icon_check_01.png) no-repeat center center;
}

.check_box_02 input[type="checkbox"] + label:before {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    background: #fff;
	border-radius: 50px;
    border: 1px solid #ccc;
    box-sizing: border-box;
	cursor: pointer;
}

.check_box_02 input[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
	border-radius: 50px;
    background: #0056e0 url(../image/sub/icon_check_01.png) no-repeat center center;
	cursor: pointer;
}

.check_text_02 {
	display: inline-block;
    font-size: 18px;
    margin-left: 8px;
}

#searchView {
	display: block;
}



.member_mail {
	font-size: 18px;
	width: 168px;
	height: 58px;
	line-height: 58px;
	border: 1px solid #d8d8d8;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #f1f2f4;
	text-align: center;
	vertical-align: middle;
}

.member_mail:hover {
	font-size: 18px;
	width: 168px;
	height: 58px;
	line-height: 58px;
	border: 1px solid #c3c3c3;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #d8d8d8;
	text-align: center;
	vertical-align: middle;
	color: #323232;
}

.member_confirm {
	font-size: 18px;
	width: 132px;
	height: 58px;
	line-height: 58px;
	background-color: #3985ff;
	border: 1px solid #266fe5;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
}

.member_confirm:hover {
	font-size: 18px;
	width: 132px;
	height: 58px;
	line-height: 58px;
	background-color: #274ce5;
	border: 1px solid #2668d0;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
}

.btn_style_001 {
	width: 168px;
	height: 58px;
	border: 1px solid #2668d0;
	background-color: #0056e0;
	display: inline-block;
	color: #ffffff;
	border-radius: 60px;
	font-size: 18px;
	line-height: 56px;
}

.btn_style_001:hover {
	width: 168px;
	height: 58px;
	border: 1px solid #0049bd;
	background-color: #0049bd;
	display: inline-block;
	color: #ffffff;
	border-radius: 60px;
	font-size: 18px;
	line-height: 56px;
}

.btn_style_002 {
	width: 168px;
	height: 58px;
	border: 1px solid #5f5f5f;
	background-color: #707070;
	display: inline-block;
	color: #ffffff;
	border-radius: 60px;
	font-size: 18px;
	line-height: 56px;
}

.btn_style_002:hover {
	width: 168px;
	height: 58px;
	border: 1px solid #505050;
	background-color: #474747;
	display: inline-block;
	color: #ffffff;
	border-radius: 60px;
	font-size: 18px;
	line-height: 56px;
}

.btn_style_003 {
	width: 220px;
	height: 58px;
	border: 1px solid #2668d0;
	background-color: #0056e0;
	display: inline-block;
	color: #ffffff;
	border-radius: 60px;
	font-size: 18px;
	line-height: 56px;
}

.btn_style_003:hover {
	width: 220px;
	height: 58px;
	border: 1px solid #0049bd;
	background-color: #0049bd;
	display: inline-block;
	color: #ffffff;
	border-radius: 60px;
	font-size: 18px;
	line-height: 56px;
}


.text_st::placeholder {
  color: #999;
  font-size: 15px;
  opacity: 1; /* 일부 브라우저에서 흐릿하게 나오는 걸 방지 */
}

/* 크로스 브라우징용 (선택사항) */
.text_st::-webkit-input-placeholder {
  color: #999;
}
.text_st:-ms-input-placeholder {
  color: #999;
}
.text_st::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.text_st_02::placeholder {
  color: #999;
  font-size: 15px;
  opacity: 1; /* 일부 브라우저에서 흐릿하게 나오는 걸 방지 */
}

/* 크로스 브라우징용 (선택사항) */
.text_st_02::-webkit-input-placeholder {
  color: #999;
}
.text_st_02:-ms-input-placeholder {
  color: #999;
}
.text_st_02::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.input_text_01 {
	font-size: 17px;
	color: #707070;
}

.input_text_02 {
	float: right;
	right: 0px;
	width: 438px;
	text-align: right;
}

.input_text_02 li {
	font-size: 17px;
	color: #707070;
	background: #fff url(/image/sub/login_gap.gif);
	background-repeat: no-repeat;
	background-position: 15px 9px;
	padding-left: 30px;
}

.input_text_02 li:first-child {
	padding-left: 0px;
	background-image: none;
}



/* 250612 국신원 요청에 따른 현재 위치 네비게이션 추가 */
.navi_location {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 28px auto 0;
  /* margin: 15px auto 0; */
}

.navi_location ul {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.navi_location_area {
	position: relative;
	padding-left: 28px;	
	line-height: 11px;
}

.navi_location_area:first-child {
	padding-left: 0;
}

.navi_location_area:not(.home)::before {
	content: '';
	position: absolute;
	top: 33%;
	left: 10px;
	width: 8px;
	height: 14px;
	background: url(/image/sub/arrow_next_04.png) no-repeat center center;
	background-size: 8px 14px;
	transform: translateY(-50%);
}

.navi_location_home {
	display: inline-block;
	width: 22px;
	height: 19px;
	background: url(/image/sub/icon_home.png) no-repeat center center;
	background-size: 22px 19px;
}

.navi_location_text {
	display: inline-block;
	font-size: 17px;
	color: #767675;
	text-align: left;
}


#sub_detail {
	width: 1158px;
	border: 1px solid #cccccc;
	min-height: 400px;
	padding: 60px;
}

.book_gr_01 {
	float: left;
	width: 325px;
	margin-right: 60px;	
	text-align: center;
}

.book_gr_02 {
	float: left;
	width: 773px;
}

.thumb_detail_01 {
	border: 40px solid #f0f0f0;
}

.thumb_label {
	position: relative;
}

.thumb_label_thumb {
	position: absolute;
	top: 40px;
	left: 40px;
}

.thumb_gr {
	width: 100%;
	text-align: center;
	margin-top: 20px;
}

.thumb_total {
	display: inline-block;
	font-size: 12px;
	border: 1px solid #d8d8d8;
	width: 80px;
	height: 28px;
	line-height: 28px;
	border-radius: 30px;
	text-align: center;
	background-image: url(/image/main/thumb_total.gif);
	background-repeat: no-repeat;
	background-position: 10px 9px;
	text-indent: 13px;
	background-color: #ffffff;
}

.thumb_total:hover {
	border: 1px solid #0056e1;
}

.thumb_detail_02 img {
	padding: 12px;
	border: 1px solid #e1e1e1;
	width: 81px;
	height: 119px;
}

.book_gr_02 h3 {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.5em;
	width: 604px;  /* 250717 아이콘 추가로 인한 길이 조절 */
	/* width: 685px; */
}

.book_title {
	padding-bottom: 25px;
	border-bottom: 1px solid #000000;
	position: relative;
}

.icon_share {
	position: absolute;
	top: 10px;
	right: 0px;
}

.icon_heart {
	position: absolute;
	top: 10px;
	right: 42px;
}

.icon_library_go {
	position: absolute;
	top: 10px;
	right: 84px;
}

.book_subtitle {
	display: block;
	font-size: 18px;
	color: #000000;
}

.book_gap {
	display: inline-block;
	background-image: url(/image/sub/book_subtitle_gap.gif);
	background-repeat: no-repeat;
	background-position: 0px 10px;
	color: #606060;
	margin-left: 15px;
	padding-left: 15px;
	margin-top: 10px;
}

.book_gap img {
	margin-right: 8px;
	vertical-align: middle;
	margin-bottom: 7px;
}

.go_quiz {
	display: inline-block;
	width: 300px;
	height: 70px;
	text-align: center;
	color: #ffffff;
	font-weight: 700;
	background-color: #0056e0;
	line-height: 70px;
	font-size: 19px;
}

.detail_gap {
	width: 100%;
	border-bottom: 0px;
	border-top: 1px solid #dcdcdc;
}

.book_detail_01 {
	display: inline-block;
	border-top: 1px solid #dcdcdc;
	margin-top: 40px;
	padding-top: 40px;
	position: relative;
	width: 100%;
}

.book_detail_011 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 30px;
}

.book_detail_012 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 30px;
}

.book_detail_013 {
	color: #5f5f5f;
}

.book_detail_014 {
	color: #000000;
}

.book_detail_015 {
	float: left;
	border: 1px solid #dcdcdc;
	box-sizing: border-box;
	width: 115px;
	height: 145px;
}

.book_detail_blur {
	filter: blur(25px);
    background-color: #fff;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    position: absolute;
    inset: auto -100px 20px;
}

.spread_total {
	position: absolute;
	right: 0px;
	bottom: -20px;
	display: inline-block;
	font-size: 12px;
	border: 1px solid #d8d8d8;
	width: 80px;
	height: 28px;
	line-height: 28px;
	border-radius: 30px;
	text-align: center;
	background-image: url(/image/main/ar-spread.gif);
	background-repeat: no-repeat;
	background-position: 60px 10px;
	text-indent: -10px;
	background-color: #ffffff;
}

.spread_total:hover {
	border: 1px solid #0056e1;
}


.tab-content__main {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.tab-content__main.collapsed {
	max-height: 14em; /* 저자 사진이 잘리는 문제로 전체적으로 늘여줌 */
	/* max-height: 8em; */ /* 대략 3줄 정도 (줄간격에 따라 조절 가능) */
	margin-bottom: 30px;
	position: relative;
}

.btn--viewing-status {
	position: absolute;
	right: 0px;
	bottom: -20px;
	display: inline-block;
	font-size: 12px;
	border: 1px solid #d8d8d8;
	width: 80px;
	height: 28px;
	line-height: 25px;
	border-radius: 30px;
	text-align: center;
	background-image: url(/image/sub/ar-spread.gif);
	background-repeat: no-repeat;
	background-position: 60px 8px;
	text-indent: -10px;
	background-color: #ffffff;
	cursor: pointer;
	z-index: 10;
}

/* .btn--viewing-status:focus {
	background-image: url(/image/sub/ar-folding.gif);
	background-repeat: no-repeat;
	background-position: 60px 8px;
} */

.btn--viewing-status.open {
	background-image: url(/image/sub/ar-folding.gif);
}


.btn--viewing-status:hover {
	border: 1px solid #0056e1;
}



.bg_opacity_01 {
	display: block;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 30px;
	background: url(/image/sub/bg_opacity.png);
	background-repeat: repeat-x;
	background-size: 100% 30px;
	z-index: 5;
}

.bg_opacity_02 {
	display: block;
	position: absolute;
	bottom: -5px;
	width: 100%;
	height: 30px;
	background: url(/image/sub/bg_opacity.png);
	background-repeat: repeat-x;
	background-size: 100% 30px;
	z-index: 5;
}

.bg_opacity_01,
.bg_opacity_02 {
	transition: opacity 0.3s ease;
}



#book_detail_list_wrap .swiper-container { 
	min-width: 1158px;
	height: 100%;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.book_detail_list {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none; /* IE 10+ */
	/* scrollbar-width: none; */ /* Firefox */
	z-index: 100;
	cursor: grab;
	user-select: none; /* 텍스트 선택 방지 */
}

.book_detail_list .my-custom-style {
	width: 74px !important;
	height: 130px !important;
	border: 0px !important;
	margin-right: 15px !important;
	background-color: transparent !important;	
	display: flex !important;
	align-items: flex-start !important;
	border-radius: 0 !important;
}

.book_detail_list .my-custom-style .thumb {
	width: 74px !important;
	height: 109px !important;
	border: 1px solid #dddddd !important;
	vertical-align: top !important;
	box-sizing: border-box;
}

.book_detail_list .my-custom-style .book_txt {
	display: block;
	width: 74px;
	margin-top: 5px !important;
	vertical-align: top !important;
	line-height: 20px !important;
	font-size: 10px;
	text-align: center;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}




.book_detail_list {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none; /* IE 10+ */
	/* scrollbar-width: none; */ /* Firefox */
	z-index: 100;
	cursor: grab;
	user-select: none; /* 텍스트 선택 방지 */
}

.book_detail_list:active {
	cursor: grabbing;
}

.book_detail_list ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.book_detail_list li {
	display: inline-block;
	margin-right: 20px;
	height: 230px;
}

.book_detail_list .thumb_d {
	width: 117px !important;
	height: 170px !important;
	border: 1px solid #dddddd !important;
	vertical-align: top !important;
	box-sizing: border-box;
}

.book_detail_list .book_txt_d {
	display: block;
	width: 117px;
	margin-top: 10px !important;
	vertical-align: top !important;
	line-height: 20px !important;
	font-size: 16px;
	text-align: center;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}



.popup-overlay {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
}

.popup-overlay.active {
  display: block;
}

.popup-content {
  position: absolute;
  top: 50px;
	left: 50%;
	/* right: 20px; */
	margin-left: -65px;
  background: white;
  /*padding: 20px; */
  border-radius: 10px;
  width: 452px;
  height: 237px;
  max-width: 90vw;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 1001;
  text-align: center;
}

.popup-content h3 {
  color: #3985ff;
  height: 103px;
  line-height: 103px;
  border-bottom: 1px solid #3985ff;
  width: 452px;
}

.popup-content ul {
	display: inline-block;
	margin: 0 auto;
	margin-top: 40px;
}

.popup-content li {
	float: left;
	margin-left: 10px;
}

.close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
}


.tblArea_02 { 
	border-top: 2px solid rgba(0,100,172,1);
}

.tb_basic_02 { 
	border-collapse: collapse;
	width: 100%;
	transform: skew(-0.001deg); /* 웹 폰트 깨짐 현상 해결 */
}

.tb_basic_02 .select_on {
	background: rgba(248,248,248,1);
}

.tb_basic_02 .select_on td:nth-child(-n+4) {  /* 1번째 td부터 3번째 td까지 */
	font-weight: 700 !important;
}

.tb_basic_02 tr:hover {
	background: rgba(248,248,248,1);
}

.tb_basic_02 th, .tb_basic_02 td { 
	text-align: center;
	transform: skew(-0.001deg); /* 웹 폰트 깨짐 현상 해결 */
}

.tb_basic_02 th { 
	padding: 28px 0px 33px;
	color: #034bc0;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 20px;
	font-weight: 500; 
	background-color: #fff;
	border-bottom: 1px solid rgba(178,178,178,1);
}

.tb_basic_02 td {
	padding: 30px 0px;
	color: #171717; 
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 20px;
	font-weight: 400; 
	vertical-align: middle;
	line-height: 28px;
	border-bottom: 1px solid rgba(178,178,178,1);
	letter-spacing: -0.5px;
}

.tb_basic_02 td a {
	padding: 0;
	margin: 0;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
}

.tb_basic_02 td .on {
	background: rgba(109,175,222,1);
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 17px !important;
	color: #fff !important;
}


.paging_area {
	display: block; 
	width: 1280px;
	margin: 0 auto;
	text-align: center;
	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
}

.paging_area_02 {
	display: block; 
	width: 1280px;
	margin: 0 auto 100px;
	padding-top: 40px;
	/* border-top: 1px solid rgba(178,178,178,0.5); */
	text-align: center;
	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
}

.paging_arrow_L {
	margin-right: 60px;
}

.paging_arrow_R {
	margin-left: 60px;
}

.paging_num_first {
	display: inline-block;
	width: 80px;
	height: 20px;
	text-align: center;
	line-height: 24px;
	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 25px;
	color: #171717;
	margin-top: 2px;
	border-left: 1px solid rgba(178,178,178,1);
	border-right: 1px solid rgba(178,178,178,1);
}

.paging_num_mid {
	display: inline-block;
	width: 80px;
	height: 20px;
	text-align: center;
	line-height: 24px;
	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 25px;
	color: #171717;
	margin-top: 2px;
	border-right: 1px solid rgba(178,178,178,1);
}

.paging_num_end {
	display: inline-block;
	width: 80px;
	height: 20px;
	text-align: center;
	line-height: 24px;
	font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 25px;
	color: #171717;
	margin-top: 2px;
	border-right: 1px solid rgba(178,178,178,1);
}

.paging_area a.on {	
	font-weight: 800;
	color: #034bc0;
}

.paging_area_02 a.on {
	font-weight: 800;
	color: #034bc0;
}

.request_input_wrap {
	display: block;
	width: 100%;
}

.request_input_top {
	display: block;
	border-top: 2px solid rgba(0,100,172,1);
	border-bottom: 1px solid rgba(178,178,178,1);
	padding: 29px 0 28px;
}

.request_input_top_title {
	display: block;	
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;    
	font-size: 25px;
	font-weight: 700;
	color: #034bc0;
	letter-spacing: -0.5px;
	border-bottom: 1px solid rgba(0,100,172,1);
	padding: 0 60px 28px;
}

.request_input_top_info {
	padding: 29px 0 29px 60px;
}

.request_input_top_title_left {
	/* overflow: hidden; */
	box-sizing: border-box;
	float: left;
}

.request_input_top_title_left li {
	float: left;
}

.request_input_top_title_right {
	/* overflow: hidden; */
	box-sizing: border-box;
	float: right;
}

.request_input_top_title_right li {
	float: left;
}

.gap_line_h15 {
	display: inline-block;
	width: 1px;
	height: 10px;
	padding: 2.5px 0;
	background: rgba(178,178,178,1);
	margin: 2.5px 20px;
}

.request_input_title_01 {	
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;   
	font-size: 20px;
	font-weight: 700;
	color: #034bc0;
	text-align: left;
	letter-spacing: -0.5px;
	margin-right: 5px;
}

.request_input_title_02 {	
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;   
	font-size: 20px;
	font-weight: 700;
	color: #034bc0;
	text-align: left;
	letter-spacing: -0.5px;
	margin-right: 15px;
}

.request_input_info_01 {	
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;     
	font-size: 20px;
	font-weight: 400;
	color: #171717;
	text-align: left;
	letter-spacing: -0.5px;
}

.request_input_content {
	display: block;
	padding: 52px 59px;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;     
	font-size: 20px;
	font-weight: 400;
	color: #171717;
	text-align: left;
	letter-spacing: -0.5px;
	line-height: 33px;
}

.request_input_content  p {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;   
}

.attachments {
	margin-top: 198px;
	margin-bottom: 20px;
}

.attachments_title {
	font-weight: 700;
	color: #034bc0;
	margin-right: 10px;
}

.attachments a {
	font-weight: 400;
	color: #171717;
	margin-right: 10px;
}

.request_input_bottom {
	display: block;
	border-top: 1px solid rgba(178,178,178,1);
	border-bottom: 1px solid rgba(0,100,172,1);
	padding: 29px 0 28px;
}

/* 라인 한줄만 나오게 추가함 */
.request_input_bottom_oneline {
	display: block;
/*	border-top: 1px solid rgba(178,178,178,1); */
	border-bottom: 1px solid rgba(0,100,172,1);
	padding: 0px 0 28px;
}

.request_input_bottom_info {
	padding: 0 0 29px 60px;
}

.request_input_bottom_left {
	box-sizing: border-box;
	float: left;
}

.request_input_bottom_left li {
	float: left;
}

.request_input_bottom_right {
	box-sizing: border-box;
	float: right;
}

.request_input_bottom_right li {
	float: left;
}

.view_list_wrap {
	display: block;
	margin: 90px auto 100px;
	border-top: 1px solid rgba(178,178,178,1);
	border-bottom: 1px solid rgba(178,178,178,1);
	padding: 31px 0 29px;
}

.view_list_prev {
	padding: 0 60px 30px;
	border-bottom: 1px solid rgba(178,178,178,1);
}

.view_list_next {
	padding: 30px 60px 0;
}


.btn_style_01 {
	display: inline-block;
	height: 60px !important;
    padding: 14px 40px;
    text-align: center;
    font-size: 20px;
    color: #6dafde;
    background: #fff;
    border: solid 1px rgba(109,175,222,1);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    outline: none;
}

.btn_style_01:hover {
	color: #fff !important;
    background: #6dafde;
    border: solid 1px rgba(109,175,222,1);
	font-weight: 800;
}

.btn_style_01_no_hover {
	display: inline-block;
	height: 60px !important;
    padding: 19px 40px;
    text-align: center;
    font-size: 20px;
    color: #6dafde;
    background: #fff;
    border: solid 1px rgba(109,175,222,1);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    outline: none;
}


.btn_style_09 {
	display: inline-block;
    padding: 23px 61px;
    text-align: center;
    font-size: 25px;
	font-weight: 700;
    color: #fff;
    background: #b2b2b2;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    outline: none;
}

.btn_style_10 {
	display: inline-block;
    padding: 23px 61px;
    text-align: center;
    font-size: 25px;
	font-weight: 700;
	color: #fff;
    background: #034bc0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    box-sizing: border-box;
    outline: none;
}





/*=== 도서 크게보기 슬라이드 ===*/
.popup-overlay2 {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
}

.popup-overlay2.active {
  display: block;
}
.popup-content2 {
	position: absolute;
	top: -535px;
	left: 50%;
	margin-left: -203px;
	background: white;
	padding: 20px;
	border-radius: 10px;
	width: 1200px;
	height: 800px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	z-index: 1001;
	text-align: center;
}

.close-btn2 {
	position: absolute;
	top: 30px;
	right: 30px;
	background: transparent;
	border: none;
	font-size: 22px;
	cursor: pointer;
	z-index: 1002;
}

.zoom_slide_wrap {
	display: inline-block;
	width: 100%;
}

.zoom_slide {
	/* layout */
	display: flex;
	flex-wrap: nowrap;
	/* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */
	overflow: hidden;

	/* position */
	/* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offset을 적용시키기 때문) */
	position: relative;

	/* size */
	width: 100%;

	/* slide drag를 위해 DOM요소가 드래그로 선택되는것을 방지 */
	user-select: none;
}
.zoom_slide_item {
	/* layout */
	display: flex;
	align-items: center;
	justify-content: center;

	/* position - 버튼 클릭시 left offset값을 적용시키기 위해 */
	position: relative;
	left: 0px;

	/* size */
	width: 100%;
	height: 800px;
	/* flex item의 flex-shrink는 기본값이 1이므로 컨테이너 크기에 맞게 줄어드는데, 슬라이드를 구현할 것이므로 줄어들지 않도록 0을 준다. */
	flex-shrink: 0;

	/* transition */
	transition: left 0.15s;
}
.zoom_slide_button {
	/* layout */
	display: flex;
	justify-content: center;
	align-items: center;

	/* position */
	position: absolute;
	/* 버튼이 중앙에 위치하게 하기위해 계산 */
	top: calc(50% - 16px);

	/* size */
	width: 40px;
	height: 40px;

	/* style */
	border-radius: 100%;
	background-color: rgba(255,255,255,1);
	border: 1px solid rgba(0,0,0,0.15);
	font-size: 0;
	cursor: pointer;
}

.zoom_slide_button:hover {
	border: 1px solid rgba(0,0,0,0.5);
}

/* 클릭 후 반대편 버튼에 border 유지 */
.zoom_slide_prev_button.stay-border,
.zoom_slide_next_button.stay-border {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.zoom_slide_prev_button {
	left: 150px;
	display: inline-block;
	background-image: url(../image/sub/icon_prev_arrow.png);
	background-repeat: no-repeat;
	background-size: 8px 14px;
	background-position: center center;
}
.zoom_slide_next_button {
	right: 150px;
	display: inline-block;
	background-image: url(../image/sub/icon_next_arrow.png);
	background-repeat: no-repeat;
	background-size: 8px 14px;
	background-position: center center;
}

/* 각 슬라이드가 변경되는 것을 시각적으로 확인하기 쉽도록 각 슬라이드별 색상 적용 */
.zoom_slide_item:nth-child(1) {
	background-color: #fff;
}
.zoom_slide_item:nth-child(2) {
	background-color: #fff;
}
.zoom_slide_item:nth-child(3) {
	background-color: #fff;
}


.zoom_slide_item img {
	height: 700px;
	border: 1px solid rgba(0,0,0,0.1);
	box-sizing: border-box;
}

/* 페이지네이션 스타일 */
.zoom_slide ul, li {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.zoom_slide_pagination {
	/* layout */
	display: flex;
	gap: 8px;

	/* position */
	position: absolute;
	bottom: 10px;
	/* left:50%, translateX(-50%)를 하면 가로 가운데로 위치시킬 수 있다. */
	left: 50%;
	transform: translateX(-50%);
}

.zoom_slide_pagination > li {
	/* 현재 슬라이드가 아닌 것 */
	color: #d8d8d8;
	cursor: pointer;
	font-size: 30px;
}

.zoom_slide_pagination > li.active {
	/* 현재 슬라이드 색상 */	
	color: #ff7900;
}