/* 도서목록 */
#product {min-width: 300px; width: 100%;}
#product .title{position: relative; width: 100%;  max-width: 1024px; margin:0 auto; padding:50px 20px 30px;}
#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: 5px;}

#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 10px 30px; text-align:center;}
#product .book a{color: #101c33;}
#product .thumbs{ max-width:80%;  margin:10px;}
#product .book_info{  display: flex; justify-content: center; }
#product .book_title h3{font-size: 1.15rem; line-height: 1.5rem; }
#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:55px;  width: 155px;  background-color: #e6e7e8; text-align:center;}
#product .title .sort_wrap button.sort_btn {position: relative;  padding:0px 28px 0px 10px; font-size: 1.1rem; letter-spacing:0.03em; color: #101c33;  height: 35px;  line-height: 35px;}
#product .title .sort_wrap button.sort_btn:after {content: "";  display: block;   position: absolute;   right: 0;   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: center;  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 2.2rem; border: 1px solid #9fa4ad; border-radius: 10rem; 	color:#9fa4ad; cursor:pointer;}
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: 1rem;font-weight: 500;  line-height: 1.5rem;  background-color: #40485b; border: none; margin-top: 10px;}
a.btn_black span.small{font-size: 0.8rem; font-weight: 300;}
a.btn_gray {color: #FFF; font-size: 1rem;font-weight: 500;  line-height: 1.5rem;  background-color: #a1a4ab; border: none; margin-top: 10px;}
a.none{border: 1px solid #dddfe2; color:#dddfe2;}

/* 간격 */
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.mb100{ margin-bottom:100px;}

input:focus::-webkit-input-placeholder{
    color: transparent!important;
}
input:focus::-moz-placeholder{
    color: transparent!important;
}
input:focus:-moz-placeholder{
    color: transparent!important;
}

/*레이어팝업_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-conts > h5{width:100%; max-width: 800px; margin:0 auto; margin-top:20px; font-weight:400; font-size: 1rem;letter-spacing: -0.02em; word-break: keep-all; color: #2d3648; line-height: 135%}
.pop-layer .pop-container .pop-conts > h5 > p{font-size: .9rem; margin-top:8px;line-height: 130%; font-weight:300;}
.pop-layer .pop-container .pop-inner{width:100%; max-width: 800px; margin:0 auto; letter-spacing: 0.02em; line-height: 120%}
.pop-layer .pop-container .pop-inner > input{ width:80%; max-width: 800px; border:1px solid #ced1d4; padding:0px 15px;height: 50px; font-size: 1rem;color: #70747d;  margin-top:30px;}
.pop-layer .pop-container .pop-inner > textarea{ width:80%; max-width: 800px; border:1px solid #ced1d4; padding:15px; height:150px; font-size: 1rem; color: #70747d; margin-top: 10px; letter-spacing: 0.02em;}
.pop-layer .pop-container .pop-inner > p{ width:80%; max-width: 800px; margin:0 auto;border:1px solid #ced1d4; background-color: #eeeff0; padding:15px;  font-size: 1rem; color: #70747d; text-align: left; margin-top: 10px; }
.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; }
.subtxt_area{width:100%; max-width: 800px;  padding:15px 0px; margin: auto; font-size: .85rem; font-weight:400; color:#a7aaaf; word-break: keep-all; line-height: 130%}
.subtxt_area > p{font-size: .8rem; margin-top:5px; font-weight:300; line-height: 125%}



/*상단으로가기버튼*/
.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{ width: 150px;     top:45px;}
	#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{font-size: 1.2rem;}
	#product .title h3 span{/*font-size:1rem; padding-left:0px;*/ display: none}
	#product .title.line {margin-bottom:20px;}
	#product .title .sort_wrap{ width: 120px;     top:42px;}
	#product .title .sort_wrap button.sort_btn{font-size: 0.95rem; height: 32px; padding:0px 20px 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, a.btn_gray {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;}
	.pop-layer .pop-container .pop-conts > h5{ font-size:.95rem;}
	.pop-layer .pop-container .pop-conts > h5 > p{font-size:.85rem;}
	.subtxt_area{font-size: .8rem;}
	.subtxt_area > p{font-size: .75rem;}
	.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; }
}