@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : Content.CSS
	Company : The Webstyle co.,ltd
 	Author : Jong Hoon, Park 2015-12
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* 개인정보보호 동의 팝업 */
/* .pop-modal .pop-wrapper {padding:14px 50px 30px 50px;} */
.pop-modal .pop-wrapper .pop-header {min-height:69px; padding:25px 0 25px; border-bottom:2px solid #161616;}
.pop-modal .pop-wrapper .pop-header p {font-size:20px; font-weight:500; color:#1d3d6d;}
.pop-modal .pop-wrapper .pop-header h2 {margin-top:20px; font-size:36px; font-weight:700; color:#333;}
.pop-modal.pop-agree .pop-wrapper .pop-content {padding:30px 0; border-bottom:1px solid #ccc;}
.pop-modal.pop-agree .pop-wrapper .privacy-txt {height:328px; overflow-y:hidden;}
.pop-modal.pop-agree .pop-wrapper .privacy-txt p {font-size:12px; color:#666; line-height:1.4;}

/* custom scroll */
.mCSB_scrollTools {opacity:1;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width:5px; background-color:#1d3d6d; opacity:1; transition:none;}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#1d3d6d; transition:none; filter: none;}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {background-color:#1d3d6d; transition:none; filter: none;}
.mCSB_scrollTools .mCSB_draggerRail {width:5px; background-color:#eaeaea;}
.mCSB_inside > .mCSB_container {margin-right:20px;}

/* content-header */
.content-header {display:block; position:relative; height:131px; border-bottom:1px solid #ccc;}
.content-header .content-tit {font-size:36px; color:#333; font-weight:700; line-height:130px; text-align:center;}

/* filter */
.filter-wrap {display:flex; position:relative; margin-top:50px;}
.filter-wrap .filter-group {width:20%;}
.filter-wrap .filter-group dt {display:block; position:relative; height:63px; border-bottom:1px solid #ccc; background-color:#f4f4f4; font-size:18px; font-weight:700; color:#333; text-align:center; line-height:63px;}
.filter-wrap .filter-group dt span {font-weight:400; color:#666;}
.filter-wrap .filter-group dd {padding:30px 0; border-bottom:1px solid #ccc;}
.filter-wrap .filter-group dd .filter-items {display:block; position:relative; height:200px; padding-left:20px; border-left:1px solid #ccc;}
.filter-wrap .filter-group:first-child dd .filter-items {border-left:0;}
.filter-wrap .filter-group dd .filter-items .form-check02 label{display:block;}
.filter-wrap .filter-group dd .resultcnt-wrap {display:flex; position:relative; height:200px; border-left:1px solid #ccc; text-align:center; flex-direction:column; justify-content:center;}
.filter-wrap .filter-group dd .resultcnt-wrap p {font-size:20px; color:#333;}
.filter-wrap .filter-group dd .resultcnt-wrap p .num {display:inline-block; padding:0 3px 0 7px; font-size:36px; color:#1d3d6d;}
.filter-wrap .filter-group dd .resultcnt-wrap .btn-wrap{margin-top:30px;}



/* 검색 결과 */
.result-wrap {margin-top:50px; background-color:#f4f4f4;}
.result-wrap .inner {padding:50px 0 150px;}
.list-wrap {display:block; position:relative;}
.list-wrap .list-header {display:flex; justify-content:space-between;}
.list-wrap .list-header .left-area .cnt {font-size:16px; color:#333;}
.list-wrap .list-header .left-area .cnt span {font-weight:700; color:#1d3d6d;}
.list-wrap .list-header .right-area .sorting {display:flex;}
.list-wrap .list-header .right-area .sorting li {display:block; position:relative;}
.list-wrap .list-header .right-area .sorting li:before {display:block; position:absolute; width:1px; height:15px; top:1px; left:-10px; background-color:#c8c8c8; content:"";}
.list-wrap .list-header .right-area .sorting li:first-child:before  {display:none;}
.list-wrap .list-header .right-area .sorting li + li {margin-left:20px;}
.list-wrap .list-header .right-area .sorting a {font-size:16px; color:#666;}
.list-wrap .list-header .right-area .sorting li.cur a {font-weight:700; color:#333;}
.list-wrap .list-body {margin-top:30px;}
.list-wrap .list-schResult {display:flex; margin:-50px 0 0 -20px; flex-wrap:wrap;}
.list-wrap .list-schResult li {display:block; position:relative; width:calc(25% - 20px); height:680px; margin:50px 0 0 20px; padding:15px 20px 20px 20px; border:1px solid #ccc; background-color:#fff;;}
.list-wrap .list-schResult li .thumb-img {width:240px; height:240px; margin:auto; text-align:center;}
.list-wrap .list-schResult li .thumb-img img {width:100%;}
.list-wrap .list-schResult li .product-info {display:block; padding-bottom:20px; border-bottom:1px solid #1d3d6d; text-align:center;}
.list-wrap .list-schResult li .product-info .nm {display:table; width:100%; height:50px;}
.list-wrap .list-schResult li .product-info .nm .txt {display:table-cell; height:50px; font-weight:600; font-size:24px; color:#1d3d6d; vertical-align:bottom;}
/* .list-wrap .list-schResult li .product-info .nm {height:50px; font-weight:500; font-size:24px; color:#1d3d6d;} */
.list-wrap .list-schResult li .product-info .sub-desc {padding-top:10px; font-size:16px; color:#999;}
.list-wrap .list-schResult li .info-detail {display:block; margin-top:30px;}
.list-wrap .list-schResult li .info-detail .item {display:block; position:relative; height:60px; padding-bottom:10px; border-bottom:1px solid #e8e8e8;}
.list-wrap .list-schResult li .info-detail .item + .item {height:60px; margin-top:18px;}
.list-wrap .list-schResult li .info-detail .item dt {font-size:16px; color:#666;}
.list-wrap .list-schResult li .info-detail .item dd {overflow:hidden; height:30px; margin-top:17px; font-size:18px; color:#000/* color:#333 */; white-space:nowrap; text-overflow:ellipsis; font-weight:400;}
.list-wrap .list-schResult li .btn-wrap {position:absolute; bottom:20px; margin-top:20px; text-align:left;}
.list-wrap .list-schResult li .btn-wrap .form-check02 {width:111px; height:34px; line-height:34px;}
.list-wrap .list-schResult li .btn-wrap .form-check02 label {vertical-align:top;}
.list-wrap .list-schResult li .btn-wrap .form-check02 span {padding:0 16px 0 40px; font-weight:700; font-size:14px; color:#999; text-indent:3px;}
.list-wrap .list-schResult li .btn-wrap .btn-compare {display:none;}
.list-wrap .btn-moreWrap {margin-top:20px;}

/* checked */
.list-wrap .list-schResult li.checked {border-color:#1d3d6d;}
.list-wrap .list-schResult li.checked:before {display:block; position:absolute; width:20px; height:20px; top:15px; left:15px; border-radius:50%; background-color:#1d3d6d; content:"";}
.list-wrap .list-schResult li.checked .btn-wrap .form-check02 {width:20px; height:20px;}
.list-wrap .list-schResult li.checked .btn-wrap .form-check02 span {width:100%; height:100%; text-indent:-9999px;}
.list-wrap .list-schResult li.checked .btn-wrap .btn-compare {display:inline-block;}
.list-wrap .list-schResult li.checked .btn-wrap .btn {margin-left:7px; font-size:14px;}


/* 프린터 비교 팝업 */
.pop-compare .pop-content {height:550px;}
.printer-summary {display:block; position:relative;}
.printer-summary .list-summary {display:flex; padding-left:180px;}
.printer-summary .list-summary li {width:33.33%;}
.printer-summary .list-summary li:nth-child(odd) {background-color:#f7f7f7;}
.printer-summary .list-summary li .summary-wrap{display:block; position:relative; padding:0 10px 27px 10px;}
.printer-summary .list-summary li .thumbnail {width:215px; height:215px; margin:auto;}
.printer-summary .list-summary li .thumbnail img {width:100%;}
.printer-summary .list-summary li .txt-wrap {display:block; position:relative; margin-top:15px; text-align:center;}
.printer-summary .list-summary li .product-nm {font-weight:700; font-size:18px; color:#1d3d6d;}
.printer-summary .list-summary li .sub-desc {margin-top:2px; font-size:16px; color:#999;}
.printer-summary .list-summary li .btn-wrap {margin-top:15px;}
.printer-summary .list-summary li .btn-wrap .btn + .btn {margin-left:7px;}
.printer-summary .list-summary li .btn-addwrap {display:flex; position:relative; width:100%; height:100%; justify-content:center; align-items:center;}
.printer-detail {display:block; position:relative;}
.printer-detail .list-detail {display:flex; width:100%;}
.printer-detail .list-detail dt {width:180px; min-height:46px; padding:13px 10px; border-bottom:1px solid #e8e8e8; font-weight:700; font-size:16px; color:#666;}
.printer-detail .list-detail dd {width:calc((100% - 180px)/3); min-height:46px; padding:13px 20px 13px 20px; border-bottom:1px solid #e8e8e8; font-size:14px; color:#000/* color:#333 */; line-height:1.3;}
.printer-detail .list-detail dd:nth-of-type(odd) {background-color:#f7f7f7;}
.pop-compare .btn-homeWrap {margin-top:20px; text-align:right;}

/* 프인터 상세 팝업 */
.print-detailWrap {display:block; border-bottom:1px solid #ccc;}
.print-detailWrap .print-detail {display:flex; position: relative;}
.print-detailWrap .left-wrap {display:block; position:relative; width:530px; padding:50px 0 25px;}
.print-detailWrap .left-wrap .product-imgList {width:100%; height:380px;}
.print-detailWrap .left-wrap .product-price {margin-top:15px; font-weight:700; font-size:24px; color:#1d3d6d; text-align:center;}
.print-detailWrap .left-wrap .btn-wrap {margin-top:20px;}
.print-detailWrap .right-wrap {display:block; position:relative; width:calc(100% - 530px); padding:30px 0 30px 50px;}
.print-detailWrap .right-wrap .detail-item {display:flex;}
.print-detailWrap .right-wrap .detail-item dt {width:200px; padding:15px 0; border-bottom:1px solid #e8e8e8; font-size:16px; font-weight:500; color:#666;}
.print-detailWrap .right-wrap .detail-item dd {width:calc(100% - 200px); padding:15px 0; border-bottom:1px solid #e8e8e8; font-size:15px; color:#000; text-align:right; font-weight:300;}
.print-detailWrap .right-wrap .detail-item:last-child dt,
.print-detailWrap .right-wrap .detail-item:last-child dd {border-bottom:0;}
.pop-detail .btn-homeWrap {margin-top:20px; text-align:right;}
.product-imgList .product-img div .img {width:350px; height:350px; margin:auto;}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom, .swiper-pagination-fraction {bottom:0;}
.swiper-button-next,
.swiper-button-prev {width:10px; height:20px; }
.swiper-button-prev {background:url(/microsite/images/common/btn_prev.png) no-repeat; background-size:100% 100%;}
.swiper-button-next {background:url(/microsite/images/common/btn_next.png) no-repeat; background-size:100% 100%;}
.swiper-button-prev.swiper-button-disabled {background:url(/microsite/images/common/btn_prev_off.png) no-repeat; background-size:100% 100%; opacity:1;}
.swiper-button-next.swiper-button-disabled{background:url(/microsite/images/common/btn_next_off.png) no-repeat; background-size:100% 100%; opacity:1;}
.swiper-pagination-bullet {width:10px; height:10px; opacity:1; border:1px solid #cfcfcf; background:transparent;}
.swiper-pagination-bullet-active {border-color:#1d3d6d; background-color:#1d3d6d;}

@media all and (max-width:768px) {
	/* .pop-modal.pop-agree .pop-wrapper {padding:11px 15px 30px 15px;} */
	.pop-modal.pop-agree .pop-wrapper .pop-header {min-height:48px; padding:10px 20px 10px 0;}
	.pop-modal.pop-agree .pop-wrapper .pop-header h2 {font-size:1.5rem; line-height:48px;}
	.pop-modal.pop-agree .pop-wrapper .privacy-txt p {font-size:1.2rem;}

	.content-header {height:75px;}
	.content-header .content-tit {font-size:2.6rem; line-height:75px;}

	.pop-modal .pop-wrapper .pop-header p {font-size:1.5rem;}
	.pop-modal .pop-wrapper .pop-header h2 {font-size:2.6rem;}
	.pop-modal .btn-homeWrap {display:none;}


	/* filter */
	.filter-wrap {display:block; width:100%; margin-top:10px;}
	.filter-wrap .filter-group {width:100%;}
	.filter-wrap .filter-group dt {height:46px; padding:0 20px; border:1px solid #ccc; border-top:0; background-color:#fff; font-size:1.6rem; line-height:46px; text-align:left;}
	.filter-wrap .filter-group dt:after {display:block; position:absolute; width:18px; height:10px; top:50%; right:30px; margin-top:-5px; background:url(/microsite/images/common/ico_arr_off.png) no-repeat; background-size:100%; content:"";}
	.filter-wrap .filter-group:first-child dt {border-top:1px solid #ccc;}
	.filter-wrap .filter-group dd {display:none; padding:20px 10px; border:1px solid #ccc; border-top:0; background-color:#f4f4f4;}
	.filter-wrap .filter-group dd .filter-items {padding-left:0;}
	.filter-wrap .filter-group.is-active dt:after {background:url(/microsite/images/common/ico_arr_on.png) no-repeat; background-size:100%;}
	.filter-wrap .filter-group.is-active dd {display:block;}
	.filter-wrap .filter-group dd .filter-items,
	.filter-wrap .filter-group dd .resultcnt-wrap {border-left:0;}
	.filter-wrap .filter-group dd .filter-items {height:auto;}
	.filter-wrap .filter-group dd .filter-items .form-check02 {display:flex; width:100%; margin:-20px 0 0 -10px; flex-wrap:wrap;}
	.filter-wrap .filter-group dd .filter-items .form-check02 label {width:calc(50% - 10px); margin:20px 0 0 10px;}
	.filter-wrap .filter-group dd .filter-items .form-check02 label > span {font-size:1.6rem; word-break:break-all;}

	.filter-group.result-group {display:block; position:relative; margin-top:10px; border-top:2px solid #1d3d6d;}
	.filter-wrap .filter-group.result-group dt {height:40px; padding:0; border:0;}
	.filter-wrap .filter-group.result-group dt:after {display:none;}
	.filter-wrap .filter-group.result-group dd {display:block; height:auto; padding:0; border:0; background-color:#fff;}
	.filter-wrap .filter-group.result-group dd .resultcnt-wrap {height:auto; margin-top:20px;}
	.filter-wrap .filter-group.result-group dd .resultcnt-wrap p {display:inline; position:absolute; top:-54px; right:0; font-size:1.5rem;}
	.filter-wrap .filter-group.result-group dd .resultcnt-wrap p span {position:relative; top:2px; font-size:2.6rem;}
	.filter-wrap .filter-group.result-group dd .resultcnt-wrap .btn-wrap {margin-top:0;}
	.filter-wrap .filter-group.result-group dd .resultcnt-wrap .btn-wrap .btn-refresh {width:100%;}

	/* filter-wrap fixed */
	.filter-wrap.fixed {position:none;}
	/* .filter-wrap.fixed {position:fixed; top:0; left:0; margin-top:0; padding:15px; background-color:#fff; z-index:100; -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.05); -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.05); box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.05);;}
	.filter-wrap.fixed .filter-group.result-group dd .resultcnt-wrap {margin-top:0;}
	.filter-wrap.fixed .filter-group.result-group dd .resultcnt-wrap p {top:-34px}
	.filter-wrap.fixed  .btn-wrap {display:none;} */

	.result-wrap {background-color:#fff;}
	.result-wrap .inner {padding:0 15px 75px 15px;}
	.list-wrap .list-header {flex-direction:column-reverse;}
	.list-wrap .list-header .right-area {display:block; padding-bottom:15px; border-bottom:1px solid #ccc;}
	.list-wrap .list-header .right-area .sorting {justify-content:flex-end;}
	.list-wrap .list-header .right-area .sorting li a {font-size:1.6rem;}
	.list-wrap .list-header .left-area {display:block; padding:15px 0;}
	.list-wrap .list-header .left-area .cnt {font-size:1.6rem; color:#666;}
	.list-wrap .list-body {margin-top:0;}
	.list-wrap .list-schResult {display:block; margin:-30px 0 0 0;}
	.list-wrap .list-schResult li {width:100%; min-height:700px; height:auto; margin:30px 0 0 0;}
	.list-wrap .list-schResult li .thumb-img {width:265px; height:265px;}
	.list-wrap .list-schResult li .product-info .nm {font-size:2.4rem;}
	.list-wrap .list-schResult li .product-info .sub-desc {font-size:1.6rem;}
	.list-wrap .list-schResult li .info-detail .item dt {font-size:1.4rem;}
	.list-wrap .list-schResult li .info-detail .item dd {font-size:2rem;}
	.list-wrap .list-schResult li .btn-wrap .form-check02 {width:118px; height:40px; line-height:40px;}
	.list-wrap .list-schResult li .btn-wrap .form-check02 span {font-size:1.6rem;}

	.list-wrap .btn-moreWrap {margin-top:23px;}

	/* 프린터 비교 팝업 */
	.pop-compare .pop-content {height:450px;}
	.pop-modal.pop-compare .pop-wrapper .pop-header {min-height:55px; padding:12px 0;}
	.pop-modal.pop-compare .pop-wrapper .pop-header p {display:none;}
	.pop-modal.pop-compare .pop-wrapper .pop-header h2 {margin-top:0; font-size:2.6rem;}
	.printer-summary {width:906px;}
	.printer-summary .list-summary {width:100%; padding-left:0;}
	.printer-summary .list-summary li .summary-wrap {padding:0 0 25px 0;}
	.printer-summary .list-summary li .thumbnail {width:100%; height:auto;}
	.printer-summary .list-summary li .txt-wrap {margin-top:15px;}
	.printer-summary .list-summary li .product-nm {font-size:1.4rem;}
	.printer-summary .list-summary li .sub-desc {font-size:1.2rem;}
	.printer-detail {width:906px;}
	.printer-detail .list-detail {flex-wrap:wrap;}
	.printer-detail .list-detail dt {width:100%; background-color:#999; font-size:1.3rem; color:#fff;}
	.printer-detail .list-detail dd {width:33.33%; font-size:1.2rem; line-height:1.5;}

	/* 프인터 상세 팝업 */
	.print-detailWrap {display:block; height:100%; padding-bottom:40px;}
	.print-detailWrap .print-detail {display:block;}
	.print-detailWrap .left-wrap {width:100%; padding:0 0 20px 0;}
	.print-detailWrap .right-wrap {width:100%; padding:0; border-top:2px solid #161616;}
	.print-detailWrap .right-wrap .detail-item dt {width:120px; padding-left:15px; font-size:1.2rem;}
	.print-detailWrap .right-wrap .detail-item dd {width:calc(100% - 120px); font-size:1.2rem; text-align:left; line-height:1.4;}
	.print-detailWrap .left-wrap .product-imgList {height:290px;}
	.product-imgList .product-img div .img {width:265px; height:265px;}
	.print-detailWrap .left-wrap .product-price {font-size:1.6rem;}
	.print-detailWrap .left-wrap .btn-wrap .btn {width:calc(50% - 30px);}
	.print-detailWrap .left-wrap .btn-wrap .btn + .btn {margin-left:10px;}
	.pop-modal.pop-detail .pop-wrapper .pop-header {border-bottom:0; text-align:center;}
	.pop-modal .pop-wrapper .pop-header h2 {margin-top:15px;}
	.swiper-button-next,
	.swiper-button-prev {width:20px; height:45px;}

}