/* 도서목록 */
#product .title{position: relative; width: 100%;  max-width: 1024px; margin:0 auto; padding:20px 20px 40px;}
#product .title.line{border-bottom: 1px solid #e2e4e6; margin-bottom:40px;}
#product .title h3{font-size: 1.5rem; letter-spacing: -0.02em; color: #101c33; font-weight: 600;}
#product .title h3 span{font-size: 1.25rem; font-weight: 300; color: #8c929d; padding-left: 0px;}
#product .results{font-size: 1.5rem; letter-spacing: -0.02em; color: #101c33; font-weight: 600; padding:0px 20px 0px}
#product .book_wrapper{width: 100%;  max-width: 1024px; padding-left:20px; padding-right:20px; margin:0 auto;  display: flex;  flex-wrap: wrap;}
#product .book{width: 25%; padding: 0px 15px 30px; text-align:center;}
#product .book a{color: #101c33;}
#product .thumbs{ max-width:80%;  margin:10px;}
#product .book_info{  display: flex; justify-content: center;  flex-flow: column}
#product .book_title h3{font-size: 1.1rem; line-height: 1.5rem; }
#product .book_info .book_price{font-size:1rem; margin-top: 1rem; color: #005dc1; letter-spacing: -0.01rem;}
#product .book_info .book_price > span{color: #8c929d; padding-right: 7px;}
#product .soldout{position: relative}
#product .soldout > a > img.thumbs { opacity:35%;  }
#product .soldout > a > div.book_info { opacity:35%; margin-bottom: 15px; }
#product .soldout > a > span.red{ color: #f10039;font-size:1rem; padding:2px 5px;border: 1px solid #f10039;  width:110px; left:50%;}


#product > div.btn_area{ text-align: center; margin:25px;}
.btn_center{margin:0 auto; text-align: center; padding:70px 0px;}
.btn_center a{ padding:8px 32px; line-height: 1.5rem; border-radius:30px;}


/* 카테고리 선택박스 */
#product .title .sort_wrap { z-index:22;    position: absolute;    right:20px;    top:15px; min-width: 155px; width: 30%; max-width: 170px;  background-color: #e6e7e8;}
#product .title .sort_wrap button.sort_btn {position: relative;  padding:0px 10px 0px; font-size: 1.1rem; text-align: left; letter-spacing:0.03em; color: #101c33; width:100%; box-sizing: border-box;  height: 35px;  line-height: 35px;}
#product .title .sort_wrap button.sort_btn:after {content: "";  display: block;   position: absolute;   right: 10px;   top: 50%;  margin-left: 10px;   margin-top: -3px;   width:16px;   height: 9px;   background: url("../images/ico_main_sort.png") no-repeat right center/cover;}
.option_box { background: #fff; border: 1px solid #dddfe1;}
.option_box > li > a {display: block;  font-size: 1rem;  text-align:left;  height: 36px;  line-height: 36px;  padding: 0 10px; color: #70747d}
.option_box > li > a:hover {background: #d9e7f6;   color: #70747d;}

/* button */
a[class^="btn_"],
button[class^="btn_"] {position: relative; display: inline-block; padding: 0.5rem 2rem; border: 1px solid #9fa4ad; border-radius: 10rem; 	color:#9fa4ad;}
a[class^="btn_"] span,
button[class^="btn_"] span {position: relative; display: inline-block; line-height: 1.5rem; font-weight: 500; font-size: 1.2rem;}
a.btn_black {color: #FFF; font-size: 1.1rem;font-weight: 500; letter-spacing: -.01rem;  line-height: 1.3rem;  background-color: #40485b; border: none; margin-top: 15px;}
a.btn_black span.small{font-size: 0.9rem; font-weight: 300;}
a.btn_close{border: none;}
/* 간격 */
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.mb100{ margin-bottom:100px;}


/*레이어팝업_content us*/
.layer-wrap { z-index:51;   position: fixed; left: 0; right: 0; top: 90px; bottom: 0;  text-align: center;  background-color: rgba(0, 0, 0, 0.5);}
.layer-wrap:before {content: "";  display: inline-block;  height: 100%;   margin-right: -.25em;}
.pop-layer  {z-index:99; position: absolute; top:0px; border-top: 1px solid #e2e4e6;  width:100%;   background-color: #fff;    z-index: 1;}
.pop-layer .pop-container {width:100%; max-width:1024px; margin:0 auto; padding: 50px 25px; position: relative}
.pop-layer .pop-container h3{color: #004ea2; font-size: 1.75rem; line-height: 2.5rem; font-weight: 900;}
.pop-layer .pop-container h3 > img{ margin-right:10px;}
.pop-layer .pop-container h4{ padding-top: 10px; font-size: 1.2rem; letter-spacing: -0.02em; color: #2d3648;  font-weight:400;}
.pop-layer .pop-container h4 > strong{ font-weight:600;}
.pop-layer .pop-container .pop-inner{width:100%; max-width: 600px; margin:0 auto; letter-spacing: 0.02em; line-height: 120%}
.pop-layer .pop-container .pop-inner > input{ width:80%; max-width: 600px; border:1px solid #dddfe1; padding:0px 15px;height: 50px; font-size: 1rem;color: #70747d;  margin-top:20px; margin-bottom:5px;}
.pop-layer .pop-container .pop-inner > textarea{ width:80%; max-width: 600px; border:1px solid #dddfe1; padding:15px; height:150px; font-size: 1rem; color: #70747d; margin-top: 20px; letter-spacing: 0.02em;}
.pop-layer .pop-container .pop-inner > p{ width:80%; max-width: 600px; margin:0 auto;border:1px solid #dddfe1; background-color: #eeeff0; padding:15px;  font-size: 1rem; color: #70747d;
	text-align: left; margin-top: 10px; }
.pop-layer .pop-container .pop-inner > span.error{width:80%;max-width: 600px; margin:0 auto; font-size:.85rem; display: block; text-align: left; color: #f1715c}
.pop-layer .pop-container .alert{position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); width:70%; max-width:300px; background-color: rgba(0, 93, 193, 0.85); color: #FFF; border-radius:10px; padding:40px 30px; font-size: 1.1rem; line-height:1.5rem;  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); font-weight: 600;}
.btn-layerClose {display: inline-block; position: absolute; top:15px; right:20px; height: 25px;  padding: 0 14px 0;}

.searchlayer-wrap{display:none; }




/*상단으로가기버튼*/
.topbtn {
	cursor: pointer;
 	display:none;
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 999;
	width:45px;
	height:45px;
	background-image: url(../images/btn_up.png);
    background-size: 45px 45px;
    background-position: left top;
    background-repeat: no-repeat;
}

.screen_out {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    font-size: 1px;
    overflow: hidden;
}


@media screen and (max-width: 640px){
	#product .title { padding-bottom: 20px;}
	#product .book_title h3{font-size:1rem; line-height: 1.3rem;}
	#product .title.line {margin-bottom:30px; }
	#product .title .sort_wrap{ min-width: 145px; }
	#product .title .sort_wrap button.sort_btn{font-size:1rem; }
	#product .book_wrapper {padding-left:0px;   padding-right:0px;}
	#product .book{width: 33%;}
	.layer-wrap{top: 0;}

	/*레이어팝업_검색*/
	.searchlayer-wrap{display:block;  z-index:51;   position: fixed; left: 0; right: 0; top:0; bottom: 0;  text-align: center;  background-color: rgba(0, 0, 0, 0.5);}
	.searchlayer-wrap > div.pop-layer { position: absolute; top:0px; border-top: 1px solid #e2e4e6;  width:100%;   background-color: #fff;    z-index: 1;}
	.searchlayer-wrap > div.pop-layer .pop-container .search_form{display: block; position:relative; width:100%; max-width:480px; margin:0 auto; margin-top: 5px;}
	.searchlayer-wrap > div.pop-layer .pop-container input{border-radius: 50px; }
	.searchlayer-wrap > div.pop-layer .pop-container input[type=submit] {position:absolute; right:0px; top:0px; width:70px; height:50px; border:0; text-indent:500%;  background:url('../images/search_submit.png') no-repeat center center;}
	.searchlayer-wrap > div.pop-layer .pop-container input.search_text{background: #fff; font-size:0.9rem; color: #757587; height:50px; width:100%; max-width: 610px; padding: 0 100px 0 25px; border: 1px solid #dfe2e4; box-shadow: 2px 2px 3px #e7e7e8;}
	.searchlayer-wrap > div.pop-layer .pop-container .btn{ margin:0 auto;border: 1px solid #FFF;text-align: left; width: 130px; padding:5px 15px 5px 25px; position: relative}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category{text-align: left; width: 95%; max-width:460px; margin:0 auto;}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category h4{ padding: 30px 0px 20px; font-size: 1.3rem; letter-spacing: -0.02em; color: #101c33;  font-weight:900; border-bottom: 1px solid #e9ebed}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category > ul > li{padding:13px 0px}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category > ul > li:first-child{padding-top: 20px;}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category > ul > li a{background: url("../images/ico_list.png") no-repeat left center; padding-left:12px; color: #70747d; font-size: 1rem; font-weight:400;}	
	
	/*상단으로가기버튼*/
	.topbtn {
    right: 10px !important;
    bottom: 12px!important;
	width:50px;
	height:50px;
   background-size: 49px 49px !important;
}
}

@media screen and (max-width:480px){
	#product .title h3, #product .results{font-size: 1.2rem;}
	#product .title h3 span{font-size:1rem; padding-left:0px; /*display: none*/}
	 .totalrecord {display: none !important;  }
	.block{display: block !important;}
	#product .title.line {margin-bottom:20px;}
	#product .title .sort_wrap{ min-width: 135px;}
	#product .title .sort_wrap button.sort_btn{font-size: 0.95rem; height: 32px; padding:0px 10px 0px; }
	#product .book{width: 50%;}
	#product .book_title h3{font-size:0.85rem; line-height: 1.2rem;}
	#product > div.btn_area { margin-bottom: 80px;}
	.option_box > li > a{font-size: 0.9rem;}
	.pop-layer{height:100%; }
	.pop-layer .pop-container .pop-inner > input{ width:100%;padding:0px 10px;height:40px; font-size:0.8rem;}
	.pop-layer .pop-container .pop-inner > textarea{ width:100%; padding:10px; font-size:0.8rem;}
	.pop-layer .pop-container .pop-inner > p{ width:100%; font-size: 0.8rem;}
	a.btn_black {font-size:0.9rem;}
	.pop-layer .pop-container h3{font-size: 1.5rem;}
	.pop-layer .pop-container h4{padding-top:5px;  font-size: 1.1rem;}
	.searchlayer-wrap > div.pop-layer .pop-container input[type=submit] {height:40px; background-size:25px 25px; }
	.searchlayer-wrap > div.pop-layer .pop-container input.search_text{ height:40px;}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category h4{ padding:18px 0px 13px; font-size: 1.1rem;}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category > ul > li{padding:8px 0px}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category > ul > li:first-child{padding-top:15px;}
	.searchlayer-wrap > div.pop-layer .pop-container .pop-conts > div.category > ul > li a{ font-size:0.9rem;}
	#product .soldout > a > div.book_info{ margin-bottom:7px; }
	#product .soldout > a > span.red{font-size:0.75rem;  width:90px; }
	.pop-layer .pop-container .alert{font-size: 1rem; line-height:1.3rem; }
}