#sub{ width: 100%;  min-width: 330px; top: 90px;  }

/*상단 배경 이미지*/
#sub .company{background: url("../images/img_company_visual.jpg") top center no-repeat;  background-size:cover;}
#sub .booklist{background: url("../images/img_book_visual.jpg") top center no-repeat;  background-size:cover;}
#sub .bookdetail{background: url("../images/img_book_visual.jpg") top center no-repeat;  background-size:cover;}
#sub .visual {overflow: hidden; display: flex; justify-content: center; align-items: center; height:380px;  }

/*상단 검색*/
#sub .visual .inner{width: 100%;}
#sub .visual .inner .search_form{display: block; position:relative; width:80%; max-width: 610px; margin:0 auto; }
#sub .visual .inner input{border-radius: 50px; }
#sub .visual .inner input[type=submit] {position:absolute; right:0px; top:0px; width:90px; height:67px; border:0; text-indent:500%;  background:url('../images/search_submit.png') no-repeat center center;}
#sub .visual .inner input.search_text{background: #fff; font-size: 1rem; height:68px; width:100%; max-width: 610px; padding: 0 145px 0 38px; border: none;}
#sub .visual .inner .btn{ margin:0 auto;border: 1px solid #FFF;text-align: left; width: 130px; padding:5px 15px 5px 25px; position: relative}

/*서브페이지_라운딩박스 및 중앙타이틀*/
#sub .content{ width: 100%;  max-width: 1024px;margin:0 auto; padding-bottom: 50px; color: #0b1424; font-size: 1.2rem; }
#sub .content .introduce-wrap, #sub .content .detail-wrap{ width: 100%; background-color: #FFF; margin-top: -50px;  border-top-left-radius:50px; border-top-right-radius:50px; padding: 100px 20px 0px 20px;}
#sub .content .introduce-wrap .title > h2{color: #004ea2; font-size: 1.9rem; line-height: 2.5rem; font-weight: 900; position: relative; padding-bottom:35px; text-align: center; letter-spacing: -0.02em;}
#sub .content .introduce-wrap .title > h2 span:after{content: "";     position: absolute;	bottom:0px; left: 50%; transform: translate(-50%, -50%);  background:#004ea2; width: 50px; margin-right: 20px; height: 1px;}
#sub .content .introduce-wrap .txt{padding-top: 70px; line-height:2rem; font-weight: 300;}

/*회사소개 연락처표*/
#sub .content .introduce-wrap .info{display: flex;  margin-top: 30px; flex-wrap: wrap; flex-direction:row; justify-content:center; width: 100%;border-top: 1px solid #e2e4e6; border-bottom: 1px solid #e2e4e6; }
#sub .content .introduce-wrap .info > ul{display: flex; flex-flow:column; width: 100%; padding: 10px 0; }
#sub .content .introduce-wrap .info > ul > li{padding:10px; display: flex; width: 100%;}
#sub .content .introduce-wrap .info > ul > li > div{width: 50%; position: relative; text-align: left; font-size: 1.1rem;}
#sub .content .introduce-wrap .info > ul > li > div > span{color: #004ea2; font-weight: 600; margin-right:10px; padding-left: 35px;}
#sub .content .introduce-wrap .info > ul > li > div > span.tit::before{content:' '; position: absolute; width: 26px; height: 26px; top:-5px; left: 0; background:url("../images/ico_avatar.png"); }
#sub .content .introduce-wrap .info > ul > li > div > span.tel::before{content:' '; position: absolute; width: 26px; height: 26px; top:-5px; left: 0; background:url("../images/ico_tel.png"); }
#sub .content .introduce-wrap .info > ul > li > div > span.email::before{content:' '; position: absolute; width: 26px; height: 26px; top:-5px; left: 0; background:url("../images/ico_email.png"); }
#sub .content .introduce-wrap .info > ul > li > div > span.fax::before{content:' '; position: absolute; width: 26px; height: 26px; top:-5px; left: 0; background:url("../images/ico_fax.png"); }

/*회사소개 영상*/
#sub .content .introduce-wrap .video{position: relative; width: 100%;margin:0 auto; height: auto; padding-top: 56.25%; margin-top:50px;}
#sub .content .introduce-wrap .video > iframe{position: absolute;top:0; left: 0; width: 100%; height:100%}
#sub .content .introduce-wrap .image{ margin-top: 30px; }
#sub .content .introduce-wrap .image > img{width: 100%; max-width: 1024px;}

/* 회사소개_부서안내&사이트*/
#sub .content .introduce-wrap .Dept, #sub .content .introduce-wrap .Web{padding-top: 30px; line-height:2rem; font-weight: 300;}
#sub .content .introduce-wrap .Dept > h3, #sub .content .introduce-wrap .Web > h3{font-weight: 600; color: #004ea2; font-size: 1.5rem;}
#sub .content .introduce-wrap .Dept > ul, #sub .content .introduce-wrap .Web > p{margin-top: .75rem; font-size: 1.2rem;}
#sub .content .introduce-wrap .Dept > ul > li{padding-bottom: .2rem;}
#sub .content .introduce-wrap .Dept > ul > li::before, #sub .content .introduce-wrap .Web > p > a::before{ content: '-'; padding-right: .5rem; display: inline-block; height: 100%;}

#sub .content .introduce-wrap .Web > p > a{color: #0b1424;}
#sub .content .introduce-wrap .Web > p > a:hover{text-decoration: underline; color: #004ea2;}
#sub .content .introduce-wrap .Web > p > a::after{content: ''; position: absolute; margin:.25rem .5rem; width: 20px; height: 20px; background: url("../images/ico_link.png") no-repeat; background-size: 20px 20px;}
#sub .content .introduce-wrap .Web > p > a:hover::after{content: ''; position: absolute; margin:.25rem .5rem; width: 20px; height: 20px; background: url("../images/ico_link_on.png") no-repeat; background-size: 20px 20px;}

/*도서상세페이지_230828버튼추가*/
#sub .content .pre{position: absolute; padding-left:37px; margin-left: 30px; margin-top:45px;} 
#sub .content .pre a{color: #b2b2b2; font-size: 1rem;}
#sub .content .pre a:after {content: "";  display: block;  position: absolute; left:12px; top:7px;    width:16px;    height: 11px;    background: url(../images/ico_pre.png)no-repeat 0 0;}

/*도서상세페이지*/
.pro_info {width: 100%;	margin: 20px 0 40px;}
.pro_info ul {display: flex; flex-wrap: wrap; width: 100%;}
.pro_info ul > li { }
.pro_info ul > li:nth-child(1){width:30%; display: flex;justify-content: center;  }
.pro_info ul > li:nth-child(2){width:70%;  display: flex;  flex-wrap: wrap;  padding-left: 10px; }
.pro_info ul > li:nth-child(2) > p{padding:15px 0px 5px 0px; font-size:1rem; }
.pro_info ul > li:nth-child(2) > p a{color:#005dc1; text-decoration: underline}
.pro_info ul > li > div.gallery{width:240px;}
.pro_info ul > li > div.gallery img{width: 100%;}
.pro_info ul > li > div.gallery > div.btn_box{ text-align: center; margin-top: 10px; box}
.pro_info ul > li > div.gallery > div.btn_box > button {border: 1px solid #999da3;font-size: 0.9rem; color: #6e737c; cursor: pointer; padding: 5px 15px 5px 13px;}
.pro_info ul > li > div.gallery > div.btn_box > button > img{width: 18px; height: 18px;  margin-right: 3px; vertical-align: bottom}
.pro_info ul > li > div.info_text{width: 100%; flex-wrap: wrap; display: flex;}
.pro_info ul > li > div.info_text h3{width: 100%;  font-size:  1.5rem;letter-spacing:-0.025rem; line-height:2rem; font-weight: 900; border-bottom: 1px solid #e2e4e6; padding-bottom:20px;}
.pro_info ul > li > div.info_text > dl { display:inline-block; padding-bottom: 15px; width: 100%; font-size:1.1rem; }
.pro_info ul > li > div.info_text > dl:nth-of-type(1) {padding-top:15px;}
.pro_info ul > li > div.info_text > dl dt,
.pro_info ul > li > div.info_text > dl dd {line-height:1.5rem;}
.pro_info ul > li > div.info_text > dl dt {width: 25%; float: left}
.pro_info ul > li > div.info_text > dl dd {width: 75%; float: right}
.pro_info ul > li > div.info_text > dl dd > span.red{ color: #f10039;font-size:1rem; padding: 1px 5px; margin-left: 5px; border: 1px solid #f10039;}
.pro_txtbox, .pro_series{padding:40px 15px 20px; position: relative }
.pro_txtbox{border-top: 1px solid #e2e4e6;font-size: 1.2rem; font-weight:300; line-height: 150% }
.pro_txtbox > h4, .pro_series > h4{color:#005dc1; font-size:  1.25rem;  font-weight: 900; margin-bottom:20px;}
.pro_txtbox > h4 img, .pro_series > h4 img{ padding-right: 5px; vertical-align: middle;}
.pro_txtbox p, .pro_series > ul >li{ font-size: 1.2rem; font-weight:300;  }
.pro_txtbox p{line-height: 2rem;}
.pro_txtbox > iframe{width: 100%; max-width: 450px;}

.pro_series{ }
.swiper_container{ margin-left: auto;  margin-right: auto;  position: relative;  overflow: hidden;  list-style: none;  padding: 0;  z-index: 1;}
.swiper-wrapper {position: relative;width: 100%;  height: 100%;  z-index: 1;  display: flex;  transition-property: transform;  box-sizing: content-box;}
.swiper-wrapper {transition-timing-function: ease-out;  margin: 0 auto;}
.swiper-slide{font-size: 18px; text-align: center; background: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.swiper-slide {flex-shrink: 0;position: relative; width:240px; padding-bottom: 10px;} 
.item-container{float: left;width: 100%;height: 100%;}
.item-wrapper{position: relative;  margin:0 15px 0 0;  padding: 0;  }
span.blind {display: block; overflow: hidden;  top: 0; left: 0; width: 0; height: 0; border: 0; background: none; font-size: 0; line-height: 0;}
.swiper_pre {position: absolute; top:45%; transform: translate(0, -45%); left:-2px; width: 36px; height: 36px; z-index: 9;}
.swiper_pre a {display: block;  width: 34px;  height: 34px; background: #fff url(../images/swiper.png) no-repeat -2px 0px;  border-radius: 24px;  border: 1px solid #dfdfdf; opacity:0.8;}
.swiper_pre a:hover {background: #fafafa url(../images/swiper.png) no-repeat -2px 0px;  box-shadow: 1px 1px 4px 0px #f9f9f9;}
.swiper_next {position: absolute; top:45%; transform: translate(0, -45%); right:-2px; width: 36px; height: 36px;  z-index: 9;}
.swiper_next a {display: block;  width: 34px;  height: 34px; background: #fff url(../images/swiper.png) no-repeat -1px -62px;  border-radius: 24px;  border: 1px solid #dfdfdf;  opacity:0.8;}
.swiper_next a:hover {background: #fafafa url(../images/swiper.png) no-repeat -1px -62px;   box-shadow: 1px 1px 4px 0px #f9f9f9;}

ul.item-wrapper >li{font-size:1rem; width:100%; }
ul.item-wrapper >li a .book_info{width: 100%;  display: flex;  flex-wrap: wrap; justify-content: center;  text-align: center}
ul.item-wrapper >li a .book_info .book_title h3{font-size: 1.1rem; font-weight:400; line-height: 1.4rem; }
ul.item-wrapper >li a .book_info .book_price{font-size:0.95rem; color:#b2b2b2; margin-top: .7rem}
ul.item-wrapper >li a .book_info .book_price span{margin-right:.5rem;}
ul.item-wrapper >li a img.thumbs{ width:85%; max-width: 150px; margin: 10px 0; text-align: center;}
ul.item-wrapper >li a{color: #0b1424; letter-spacing: -0.03rem}


ul.item-wrapper >li.soldout{position: relative}
ul.item-wrapper >li.soldout > a > img.thumbs { opacity:35%;  }
ul.item-wrapper >li.soldout > a > div.book_info { opacity:35%; margin-bottom: 10px; }
ul.item-wrapper > span.red{ color: #f10039;font-size:1rem; box-sizing: border-box; padding:2px 5px;border: 1px solid #f10039;  width:110px; left:50%;}


.detail-wrap > div:nth-child(3){border-top:none; }

.pro_info ul > li > div.btn_area{width:100%; display: flex; flex-wrap: wrap; column-gap: 5px; align-items: flex-end; margin-top:15px; }
.pro_info ul > li > div.btn_area > button{flex-grow:1; min-height:51px; background-color: #0098f0; box-sizing: border-box; float: left; color: #FFF; letter-spacing: -.015rem; font-size:  1.1rem; cursor: pointer}
.pro_info ul > li > div.btn_area > button > span.Amazon, .pro_info ul > li > div.btn_area > button > span.Hanbooks{position: relative; padding-left: 30px;}
.pro_info ul > li > div.btn_area > button > span.Amazon::before{content:''; position: absolute; left: 0; width: 26px; height: 22px; background: url("../images/Amazon_icon.png") no-repeat;}
.pro_info ul > li > div.btn_area > button > span.Hanbooks::before{content:''; position: absolute; left: 0; width: 26px; height: 22px; background: url("../images/Hanbooks_icon.png") no-repeat;}
.pro_info ul > li > div.btn_area > button:last-child{min-width:calc(33.3% - 5px);  background-color: #005dc1;}
.pro_txtbox > div.more, .pro_series > div.more{display: none}



@media screen and (max-width: 980px){
	#sub .content .detail-wrap{padding:70px 20px 0px 20px;}
	#sub .content .introduce-wrap .info > ul > li > div{font-size:.9rem; letter-spacing: -0.01rem}
	#sub .content .introduce-wrap .Dept > h3, #sub .content .introduce-wrap .Web > h3{font-size: 1.3rem;}
	#sub .content .introduce-wrap .Dept > ul > li {font-size: 1.1rem;}
	.pro_info ul > li > div.info_text h3{ padding-bottom:15px;}
	.pro_info ul > li > div.gallery{ padding: 0 10px;}
	.pro_info ul > li > div.gallery img{width:100%;}
	.pro_info ul > li > div.info_text{padding-left: 10px;}
	.pro_info ul > li > div.info_text > dl {padding-bottom: 10px;font-size:1rem; }
	.pro_info ul > li > div.info_text > dl dd > span.red{font-size:0.9rem; padding: 1px 3px; margin-left: 3px;}
	#sub .content .pre{ margin-top:35px;}
	.pro_info ul > li > div.btn_area > button{ padding: 5px 10px; margin-top:10px;font-size: 1rem; }
	.pro_series > ul >li{font-size:1rem; width:calc(33% - 1rem); }
	.swiper-slide{width:220px;}
}	

	

@media screen and (max-width: 640px){
	#sub .visual{height: 260px;}
	#sub .content .introduce-wrap .title > h2{font-size: 1.6rem;}
	#sub .visual .inner .search_form{display:none}
	#sub .content, #sub .content .introduce-wrap .txt{font-size: 1.1rem; }
	#sub .content .introduce-wrap, #sub .content .detail-wrap{ padding:80px 20px 0px 20px;}
	#sub .content .introduce-wrap .info > ul > li{display: flex; flex-flow: column; width: 100%; padding: 0px;}
	#sub .content .introduce-wrap .info > ul > li > div{width:100%; margin: 12px 5px; font-size:.85rem;}
	#sub .content .introduce-wrap .Web > p, #sub .content .introduce-wrap .Dept > ul > li{font-size: 1rem;}
	#sub .content .detail-wrap{padding:50px 20px 0px 20px;}
	#sub .content .pre{ margin-top:30px;}
	.pro_info ul > li:nth-child(1){width:100%; justify-content: center;  }
	.pro_info ul > li:nth-child(2){width:100%; padding-left: 0px;}
	.pro_txtbox{font-size:1rem; line-height: 1.5rem;}
	.pro_txtbox p, .pro_series > ul >li{font-size:1rem; line-height: 1.5rem;}
	.pro_info ul > li > div.info_text h3{font-size: 1.35rem; line-height:1.65rem; padding-bottom:15px; padding-top: 20px;}
	.pro_info ul > li > div.info_text > dl {font-size:0.9rem;  padding-bottom: 10px; }
	.pro_info ul > li > div.info_text > dl dt, .pro_info ul > li > div.info_text > dl dd { line-height:1.3rem; letter-spacing:-0.025rem;}
	.pro_info ul > li > div.gallery{width:100%; text-align: center;}
	.pro_info ul > li > div.gallery img{width:70%; max-width:240px;}
	.pro_info ul > li > div.info_text > dl dd > span.red{font-size:0.85rem; padding: 1px 3px; margin-left: 3px;}
	.pro_series > ul >li{margin-bottom:10px;}
	.pro_txtbox{height:450px; overflow: hidden;}
	ul.item-wrapper >li a .book_info .book_title h3, ul.item-wrapper >li a .book_info .book_price{font-size:.95rem; line-height: 1.2rem;}
	.pro_txtbox > div.more, .pro_series > div.more{position: absolute; display: flex; justify-content: center; align-items:flex-end;width: 100%; padding: 0 20px; left: 0;  bottom: 0; height: 115px; background: url("../images/bg_more.png") repeat-x bottom}
	.pro_info ul > li > div.btn_area > button{ font-size:  0.95rem; }
	.pro_info ul > li > div.btn_area > button.center{ margin:0 auto; margin-top:10px;}
	.pro_info ul > li:nth-child(2) > p {margin:0 auto; padding-top: 15px; font-size:  0.9rem;}
	.swiper-slide {width:170px;} 
	ul.item-wrapper > span.red {font-size: 0.9rem;}
	}	


@media screen and (max-width:480px){
	#sub .visual{height: 260px;}
	#sub .content{ padding-bottom: 0px;}
	#sub .content .introduce-wrap{border-top-left-radius:50px; border-top-right-radius:50px; padding:40px 20px 20px;}
	#sub .content .introduce-wrap .title > h2{font-size: 1.5rem; line-height: 2rem; }
	#sub .content .introduce-wrap .title > h2:after{ left: 43%;}
	#sub .content .introduce-wrap .txt{padding-top:50px;font-size: 0.95rem; line-height: 1.8rem;}
	#sub .content .introduce-wrap .Dept > ul, #sub .content .introduce-wrap .Web > p{font-size: 0.95rem; line-height: 1.6rem;}
	#sub .content .introduce-wrap .Dept > h3, #sub .content .introduce-wrap .Web > h3{font-size: 1.1rem;}
	#sub .content .introduce-wrap .video{margin-top:30px;}
	#sub .bookdetail{display: none}
	#sub .content .detail-wrap{ width: 100%; background-color: #FFF; margin-top:100px;  padding-top:30px; padding-bottom: 50px;}
	#sub .content .introduce-wrap .title > h2.pb0{ padding-bottom:0px}
	.pro_txtbox{font-size: 0.9rem; line-height: 1.5rem;}
	.pro_txtbox p, .pro_series > ul >li{font-size: 0.9rem; line-height: 1.5rem;}
	.pro_info ul > li > div.info_text h3{font-size: 1.2rem; line-height:1.7rem; padding-bottom:15px; padding-top: 20px;}
	.pro_info ul > li > div.info_text > dl dt {width: 30%;}
	.pro_info ul > li > div.info_text > dl dd {width: 70%; }
	.pro_info ul > li > div.info_text > dl dd > span.red{font-size:0.75rem; padding: 1px 3px; margin-left: 3px;}
	.pro_info ul > li > div.btn_area > button{letter-spacing: -0.02em; font-size: 0.9rem;margin-top:10px;  }
	.pro_info ul > li > div.btn_area > button.Amazon{min-width:140px; }
	.pro_info ul > li > div.btn_area > button.center{ margin:0 auto;}
	.pro_info ul > li > div.btn_area > button{font-size: 0.9rem;} 
	.swiper-slide {width:130px;} 
	ul.item-wrapper >li a .book_info .book_title h3, ul.item-wrapper >li a .book_info .book_price{font-size:0.88rem; line-height: 1.1rem;}
	ul.item-wrapper > span.red {font-size: 0.75rem;}
	#sub .content .pre{ margin-top:15px; margin-left:10px;}
	.pro_info ul > li > div.gallery > div.btn_box{margin: 10px 0px 15px; }
	}
@media screen and (max-width:380px){
	.pro_info ul > li > div.btn_area > button{width: 100%;}
	
}