@charset "utf-8";

/* content */
#sub_container_wrap {position:relative; background:#fff; padding-top:60px;}
#sub_container_wrap:after {content:""; display:block; clear:both;} 

.sub_content_wrap {position:relative; display: flex; justify-content: space-between; gap:80px; width:100%; /* max-width:1640px; */ padding: 0 20px; margin:0 auto; min-height:680px;} 
#sub_container {flex: 1;}
#sub_content {width:100%; margin-bottom: 60px; letter-spacing: -1px;} 
.subCntBody{ position:relative;}

/* sub 타이틀 */
#sub_content .title_area{ position:relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px; overflow:hidden;}
.title_area .location { position:absolute; top:18px; right:0; font-size:13px; line-height:18px;}
.title_area .location span, 
.title_area .location strong {display:inline-block; *display:inline; zoom:1; padding-left:16px; background:url('/images/org/web/ebook/sub/icon_location_arrow.gif') no-repeat 5px 6px; color:#777}
.title_area .location strong { font-weight:normal}
.title_area .location a.home { color:#666;}
.title_area .pageTitle{ display: flex; gap:28px;}
.title_area .pageTitle li {position: relative; font-weight:700; letter-spacing:-2px; font-size:30px; color:#000; line-height: 1;}
.title_area .pageTitle li.dflex {display: flex; flex-wrap: wrap; align-items: end; gap:5px 10px;}
.title_area .pageTitle li ~ li::before {content:'\EA6E'; position: absolute; left:-23px; top:50%; transform: translateY(-50%); font-weight: 400; font-family: 'remixicon'; font-size: 22px;}
.title_area .pageTitle li span {display: inline-block; font-size: 16px; font-weight: 400; color: #666; letter-spacing: -1px;}

/* sub location */
.sub_location {border-radius: 10px; background: #f6f6f6; padding: 20px;}
.sub_location ul {display: flex; flex-wrap: wrap; gap: 5px 25px; align-items: center;}
.sub_location li {position: relative; font-size: 16px; color: #555;}
.sub_location li.home {font-size: 18px; color:#000;}
.sub_location li:first-child::after,
.sub_location li ~ li::after {content:'\EA6E'; position: absolute; right:-21px; top:55%; transform: translateY(-50%); font-family: 'remixicon'; font-size: 18px; color: #555;}
.sub_location li:last-child::after {display: none;}


/*** 이미지게시판-리스트 ***/

/* 게시판 상단 옵션 */
.bt_option_wrap {display: flex; gap:20px; align-items: center;}
.bt_option {display: flex; align-items: center; width: fit-content; height: 40px; background: #f8f9fb; border:1px solid #ddd; border-radius: 20px;}
.bt_option a {position: relative; display: flex; align-items: center; height: 38px; padding: 0 20px; font-size: 16px; color:#666; font-weight: 500; z-index: 1;}
.bt_option a::before {content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; width: auto; height: auto; border-radius: 20px; background: #1c85c7; z-index: -1; opacity: 0; transition: all 0.1s;}
.bt_option a.on {color: #fff;}
.bt_option a.on::before {opacity: 1;}
.bt_option a i {font-size: 20px; margin-right: 8px;}

/* 검색영역 */
.bt_srch_box {background: #fafafa; border:1px solid #dedede; border-radius: 10px; padding: 33px 40px; font-weight: 600; font-size: 17px;}
.open_cmt {color:#000; margin-bottom: 20px;}
.bt_srch_box .srch_blue {color: #1a87c8;}
.bt_srch_wrap {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.bt_srch_left,
.bt_srch_right {display: flex; flex-wrap: wrap; align-items: center;}
.bt_srch_left {flex:1; gap:10px 18px;}
.bt_srch_left span,
.bt_srch_left label {display: inline-block; color: #555; vertical-align: middle;}
.bt_srch_right {width: fit-content; gap: 10px;}
.bt_srch_box .srch_select,
.bt_srch_box .srch_input {height: 40px; padding:0 10px; background: #fff; border: 1px solid #ededed; border-radius: 5px; color:#555;}
.bt_srch_box .srch_select {width: 120px;}
.bt_srch_box .srch_input {width: 350px;}
.bt_srch_box .srch_btn {width: 110px; height: 40px; border-radius: 5px; background: #1c85c7; color:#fff; font-weight: 600; text-align: center;}

/* 썸네일 리스트 */
.thum_list {display: flex; flex-wrap: wrap; gap: 30px 2.25%; margin-top:60px;}
.thum_list li {flex: 0 0 calc(20% - 1.8%);}
/* .thum_list li:nth-child(n + 16) {display: none;} */
.thum_list li a {display: block;}
.thum_list .img {position: relative; width:100%; height:300px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(15,8,23,0.1);}
.thum_list .img img {position: absolute; left:50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); transition: all 0.2s;}
.thum_list .tit {font-size: 20px;font-weight: 600;color: #222;word-break: break-word;margin-top: 15px;line-height: 28px;text-align: center;}
/* 썸네일 리스트 :active */
.thum_list li a:hover .img img,
.thum_list li a:focus .img img {transform: translate(-50%, -50%) scale(1.2);}
.noSrchRst {position: relative; font-size: 18px; text-align: center; display: flex; justify-content: center; align-items: center;}

/* 페이징 - 스킨A */
.bbs_pagerA { margin:50px 0 20px; text-align:center; line-height:0; font-size:0; }
.bbs_pagerA a, .bbs_pagerA span, .bbs_pagerA strong { display:inline-block; margin:0 2px; border-radius:50%; vertical-align:middle; }
.bbs_pagerA div { display:inline-block; margin:0 0.25rem; }
.bbs_pagerA .bbs_arr { width:38px; height:38px; line-height:38px; text-indent:-10000em; border:1px solid #bfbfbf; }
.bbs_pagerA .bbs_arr:hover, .bbs_pagerA .bbs_arr:focus { border-color: #1c85c9; background-color: #fff; background-position:center -39px; }
.bbs_pagerA .pgeL1 { background:url('/images/org/web/ebook/common/bbs_PAarrL1.png') no-repeat center -1px; }
.bbs_pagerA .pgeL2 { background:url('/images/org/web/ebook/common/bbs_PAarrL2.png') no-repeat center -1px; }
.bbs_pagerA .pgeR1 { background:url('/images/org/web/ebook/common/bbs_PAarrR1.png') no-repeat center -1px; }
.bbs_pagerA .pgeR2 { background:url('/images/org/web/ebook/common/bbs_PAarrR2.png') no-repeat center -1px; }
.bbs_pagerA .bbs_pge_num { min-width:40px; height:40px; line-height:40px; font-size:16px; }
.bbs_pagerA .bbs_pge_num:hover, .bbs_pagerA .bbs_pge_num:focus { color:#555; background:#ededed; }
.bbs_pagerA strong.bbs_pge_num, .bbs_pagerA strong.bbs_pge_num:hover, .bbs_pagerA strong.bbs_pge_num:focus { color:#fff; font-weight:400; background:#1c85c9; } /* color */
.bbs_pagerA .w_paging { display:inline-block; }
.bbs_pagerA .m_paging { display:none; }


/*** 이미지게시판-뷰페이지 ***/
.eb_view_wrap {position: relative; display: flex; flex-wrap: wrap; gap:35px 40px; margin-top: 60px;}
.eb_img {width:300px; height:400px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(15,8,23,0.1);}
.eb_img img {width: 100%; height: 100%; object-fit: cover;}

.eb_tit_wrap {flex: 1; display: flex; justify-content: space-between;}
.eb_tit_left {flex:1;}
.eb_star {display: flex; font-size: 24px; color: #ff9000;}
.eb_tit {font-size: 26px; color:#222; font-weight: 600; margin:10px 0; word-break: keep-all;}
.eb_location { display: flex; gap:24px;}
.eb_location li {position: relative; font-weight:600; font-size:18px; color:#444; line-height: 1;}
.eb_location li ~ li::before {content:'\EA54'; position: absolute; left:-21px; top:50%; transform: translateY(-50%); font-weight: 400; font-family: 'remixicon';}

.eb_content {position: absolute; right:0; bottom:0; display: flex; flex-direction: column; justify-content: center; width:calc(100% - 340px); height: calc(100% - 135px); border-radius: 10px; background: #fafafa; border:1px solid #dedede; padding: 0 35px;}
.eb_content li {position: relative; display: flex; min-height: 28px; font-size: 18px; color: #666; padding-left: 10px;}
.eb_content li::before {content: ''; position: absolute; left:0; top:11px; width:4px; height:4px; background: #1b86cc;}
.eb_content li strong {display: inline-block; color: #222; width: 80px; padding-top:5px;}
.eb_content li span {flex:1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;}
.eb_content button {display: inline-block; line-height: 30px; border-radius: 5px; text-align: center; color: #fff; margin-right: 10px;}
.eb_content .btnCopy {width: 60px; background: #1b86ca; font-size: 14px; font-weight: 600; margin-right: 0;}


.eb_content li:nth-child(n+6) {display: inline-flex;}
.eb_content li:nth-child(n+7) {margin-left: 40px;}
.eb_content li:nth-child(n+6) strong {width:40px;}
.eb_content li:nth-child(n+6) span {left:10px;}

.eb_sns {display: inline-block; width: fit-content;}
.eb_sns button {width:30px; overflow: hidden; font-size: 18px;}
.eb_sns button i {vertical-align: middle;}
.eb_sns .btnFbook {background: #3b599f;}
.eb_sns .btnTwt {background: #000000;}
.eb_sns .btnKko {background: #fae100;}

.eb_btn_wrap {display: flex; align-items: center; justify-content: center; gap:10px; width: 100%; margin-top: 20px;}
.eb_btn_wrap a {display: flex; width: 180px; height: 40px; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 15px; color: #111; font-weight: 500; border-radius: 10px; background: #ddd; transition: all 0.15s;}
.eb_btn_wrap a i {font-size: 20px;}
.eb_btn_wrap a:hover,
.eb_btn_wrap a:focus {background:#1b86ca; color: #fff;}

/* sns */ 
.snsBox { position:absolute; top:59px; right:0;}
.snsBox button { display:inline-block; *display:inline; zoom:1; width:28px; height:28px; overflow:hidden; margin-left:2px; background:url("/images/org/web/ebook/sub/btnSns.png") no-repeat 0 0}
.snsBox button > span {text-indent:-1140px; font-size:0; line-height:0}
.snsBox .btnPrint { background-position:0 0; }
.snsBox .btnFbook { background-position:-31px 0; }
.snsBox .btnTwt { background-position:-62px 0; }
.snsBox .btnKko { background-position:-93px 0; }
.snsBox .btnKkot { background-position:-124px 0; }
.snsBox .btnBand{ background-position:-155px 0; }
.snsBox .btnDaum{ background-position:-186px 0; }
.snsBox .btnShare{ background-position:-217px 0; }
.snsBox .snsClose{ background-position:-248px 0; margin-left:-133px;}
.snsBox .sns_more{display:none; position:absolute; right:-105px; top:0; text-align:right}
.snsBox.on{ right:105px}
.snsBox.on .sns_more{ display:block;}

/* 담당자 및 페이지 만족도 */
#charge-satisfy {width:100%; margin-top:40px}

/* 페이지별 담당자 */
.charge-wr {position:relative; border:1px solid #d2d2d2; margin:50px 0 15px; padding:22px 25px 22px 7px; overflow:hidden; font-size:13px;}
.charge-wr .manager-wr {overflow:hidden}
.charge-wr .manager-wr .manager-list {float:left; width:auto}
.charge-wr .manager-wr .manager-list dt, .charge-wr .manager-wr .manager-list dd {display:inline-block; vertical-align:top; width:auto;}
.charge-wr .manager-wr .manager-list dt {position:relative; margin-left:18px; font-weight:bold; color:#333; padding-left:14px;}
.charge-wr .manager-wr .manager-list dt:before {position:absolute; top:8px; left:0; content:""; display:block; width:6px; height:3px; background:#0b856c;}
.charge-wr .manager-wr .manager-list dt:after{content:":"; margin:0 4px 0 7px; font-weight:bold}
.charge-wr .manager-wr .manager-list dd { color:#666}
/* 페이지만족도 */
.satisfy-wr {display: flex; align-items: center; border:1px solid #dedede; height: 60px; border-radius: 10px; overflow: hidden; margin:0; padding:0; background:#fff;}
.satisfy-wr dt {width: 300px; line-height: 60px; text-align: center; background: #eef7ff; font-size: 18px; color: #222; font-weight: 600;}
.satisfy-wr dd {flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap:10px 25px; height: 100%; padding: 0 40px; font-size: 16px; color:#444;}
.satisfy-wr .qus {flex:1; font-size: 16px; font-weight: 400;}
.satisfy-wr dd div {display: flex; gap:10px 25px;}
.satisfy-wr .ans {display: flex; align-items: center; gap:10px 20px;}
.satisfy-wr .ans input[type=radio] {display: none;}
.satisfy-wr .ans label {position: relative; display: block; cursor: pointer;}
.satisfy-wr .ans label::before {content:'\EB7D'; font-family: 'remixicon'; font-size: 18px; margin-right: 5px; transition: all 0.15s;}
.satisfy-wr .ans input[type=radio]:checked + label::before {content: '\EB81';}
.satisfy-wr dd button {border-radius: 10px; width: 60px; height: 30px; background: #1c85c9; color: #fff; text-align: center;}

#ebookLink {display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 353px; /* 원하는 너비로 설정하세요 */ position: relative; line-height: normal;}

.hide-before::before {
    content: ""; /* 가상 요소 내용을 비우고 숨깁니다 */
    display: none;
}
@media screen and (max-width:1620px) { 
	/* 페이지만족도 */
	.satisfy-wr {flex-direction: column; height: auto;}
	.satisfy-wr dt {width: 100%; line-height: 40px;}
	.satisfy-wr dd {flex: none; width: 100%; height: 50px; padding: 0 20px;}
	.satisfy-wr .qus {flex:1; font-size: 16px; font-weight: 400;}
	.satisfy-wr .ans {display: flex; align-items: center; gap:10px 20px;}
	.satisfy-wr .ans input[type=radio] {display: none;}
	.satisfy-wr .ans label {position: relative; display: block; cursor: pointer;}
	.satisfy-wr .ans label::before {content:'\EB7D'; font-family: 'remixicon'; font-size: 18px; margin-right: 5px; transition: all 0.15s;}
	.satisfy-wr .ans input[type=radio]:checked + label::before {content: '\EB81';}
	.satisfy-wr dd button {border-radius: 10px; width: 60px; height: 30px; background: #1c85c9; color: #fff; text-align: center;}
}

@media screen and (max-width:1440px) { 
	.sub_content_wrap {/* display: block; */}	
	
	/* 썸네일 리스트 */
	.thum_list {gap: 25px 2.25%; margin-top:40px;}
	.thum_list li {flex: 0 0 calc(25% - 1.6875%);}
	.thum_list li:nth-child(n + 9) {display: none;}
}

@media screen and (max-width:1240px) {

	.sub_content_wrap, #sub_content, .subCntBody, #menu h1 {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}

	/* 검색영역 */
	.bt_srch_left,
	.bt_srch_right {width:100%;}
	.bt_srch_left {flex:none;}
	.bt_srch_right {width: 100%; margin-top:10px;}
	.bt_srch_box .srch_input {width: auto; flex:1;}
	
	/* 썸네일 리스트 */
	.thum_list li {flex: 0 0 calc(33.3% - 1.5%);}
	.thum_list li:nth-child(n + 10) {display: none;}
	.thum_list li:nth-child(9) {display: block;}
	
}

@media screen and (max-width:1024px){	
	


	/*** 이미지게시판-뷰페이지 ***/
	.eb_view_wrap {margin-top: 40px;}
}

@media screen and (max-width:1000px) { 
	.sub_content_wrap {padding-top: 30px;} /* 20251204 추가 */
	#wrap.no_langs .sub_content_wrap {padding-top: 30px;} /* 20251204 추가 */
	
	/* 썸네일 리스트 */
	.thum_list {gap: 25px 2.25%;}
	.thum_list li {flex: 0 0 calc(25% - 1.6875%);}
	.thum_list li:nth-child(n + 9) {display: none;}
	.thum_list .tit {font-size:18px; line-height: 1.3;}
	.sub_content_wrap { display: block;} /*241121*/
	#sub_container_wrap {padding-top: 110px;}
}

@media screen and (max-width:960px){	
	/*** 이미지게시판-뷰페이지 ***/
	.eb_img {width:300px; height:400px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(15,8,23,0.1);}
	.eb_tit_wrap {flex-direction: column; height: fit-content; gap: 15px;}
	.eb_content {position: relative; right:auto; bottom:auto; width: 100%; height: auto; padding: 20px 30px;}

	/* 페이지만족도 */
	.satisfy-wr dd {height: auto; padding:10px 20px;}
	.satisfy-wr dd div {width:100%; justify-content: space-between;}
}
@media (max-width:860px){
	/* 썸네일 리스트 */
	.thum_list {gap: 20px 2.25%;}
	.thum_list li {flex: 0 0 calc(33.3% - 1.5%);}
	.thum_list li:nth-child(n + 7) {display: none;}
	.thum_list .tit {font-size:17px;}

}


@media screen and (max-width:800px) {

	/* 페이징 - 스킨A */
	.bbs_pagerA .bbs_pge_num { /* display:none;  */min-width:28px; height:28px; line-height:28px; } /* 230211 수정 */
	.bbs_pagerA .bbs_arr {width:28px; height:28px; line-height:28px; background-size: cover;} /* 230211 수정 */
	.bbs_pagerA .bbs_arr:hover, .bbs_pagerA .bbs_arr:focus { background-position:center -27px; }
	.bbs_pagerA .bbs_pge_num.mActive{ display:inline-block; }
	.bbs_pagerA strong.bbs_pge_num, .bbs_pagerA strong.bbs_pge_num:hover, .bbs_pagerA strong.bbs_pge_num:focus { display:inline-block; min-width:28px; /* color:#3e4e6f; background:none; */ } /* color *//* 230211 수정 */
	.bbs_pagerA .bbs_pge_num:hover, .bbs_pagerA .bbs_pge_num:focus{ color:#3e4e6f; background:none; text-decoration:underline; } /* color */
	.bbs_pagerA div a.bbs_pge_num:last-child { display:inline-block; min-width:auto; padding-left:15px; background:url('/images/org/web/jjdaum/sub/bbs_pgeNum_mb.png') no-repeat 4px center; }
	/* .bbs_pagerA .w_paging { display:none; } */ /* 230211 수정 */
	.bbs_pagerA .m_paging { display:inline-block; }
	
	
	/* sns */ 
	.snsBox { position:relative; top:auto; right:auto; z-index:1; text-align:right; margin-top:10px}	

    /* 페이지만족도 */
	.satisfy-wr p {float:none;padding-top:0;}
	.satisfy-wr .satis-chk {text-align:left; margin-top:5px;}
	.satisfy-wr .satis-chk input.radio, .satisfy-wr .satis-chk input[type="radio"] {margin-right:5px; margin-left:0;}
	.satisfy-wr .satis-chk label {margin-right:22px; margin-left:0;}
	.satisfy-wr .satis-chk .pcomment input.text {width:80%;}

}

@media screen and (max-width:768px) {
	/* sub 타이틀 */
	.title_area .pageTitle li {font-size: 28px;}
	.bt_option_wrap {width: 100%; margin-top: 15px; justify-content: end;}

	/* 검색영역 */
	.bt_srch_box {padding:20px 25px;}
	.bt_srch_box .srch_btn {width:80px;}

    /* 썸네일 리스트 */
	.thum_list {gap: 20px 2.25%;}
	.thum_list li {flex: 0 0 calc(33.3% - 1.5%);}
	.thum_list .tit {font-size:17px;}

	/*** 이미지게시판-뷰페이지 ***/
	.eb_star {font-size: 20px;}
	.eb_tit {font-size:24px;}
	.eb_location li {font-size: 17px;}
	.eb_content li {font-size: 17px;}
}

@media screen and (max-width:680px) {
	/* sub 타이틀 */
	.bt_option a {font-size: 15px;}

	/* 검색영역 */
	.bt_srch_box {font-size: 16px;}

    /*** 이미지게시판-뷰페이지 ***/
	.eb_view_wrap {gap:25px;}
	.eb_img {width:40%; height:330px;}
	.eb_content {padding:15px 20px;}
}

@media screen and (max-width:580px) {
	
	#sub_container_wrap { padding-top:80px;}

	#sub_content {margin-bottom: 40px;}
	
	/* sub 타이틀 */
	.title_area .pageTitle li {font-size: 26px;}
	.bt_option_wrap {justify-content: space-between; gap:10px;}
	.bt_option {width: calc(50% - 5px);}
	.bt_option li {width: 50%;}
	.bt_option a {width: 100%; justify-content: center; padding:0 10px;}
	.bt_option a i {display: none;}

	.sub_location {padding: 10px 20px;}

	/* 검색영역 */
	.open_cmt {margin-bottom: 15px;}
	.bt_srch_left .bt_srch_sel1 {width: 100%; display: flex; align-items: center;} 
	.bt_srch_left label {margin-right: 5px;}
	.bt_srch_left .srch_select {width: auto; flex:1;}
	.bt_srch_right .srch_select {width: 100%;}
	.bt_srch_box .srch_input {width:100%; flex:none;}
	.bt_srch_box .srch_btn {width: 100%;}

	/* 썸네일 리스트 */
	.thum_list {gap: 20px 3%;}
	.thum_list li {flex: 0 0 calc(50% - 1.5%);}

	/*** 이미지게시판-뷰페이지 ***/
	.eb_view_wrap {margin-top: 30px;}
	.eb_img {width: 230px; height: 300px; margin:0 auto;}
	.eb_tit_wrap {flex:none; width:100%;}
	.eb_content li {flex-direction: column; gap: 5px;}
	.eb_content li ~ li {margin-top: 10px;}
	.eb_btn_wrap a {padding: 0 10px;}

	/* 페이지만족도 */
	#charge-satisfy {margin-top:30px;}
	.satisfy-wr dd div {flex-direction: column;}
	.satisfy-wr .ans {flex-wrap: wrap;}
	.satisfy-wr .ans li {flex: 1 1 auto;}
	.satisfy-wr dd button {margin: 0 auto;}
}

@media (max-width :480px) {
	/*** 이미지게시판-뷰페이지 ***/
	.eb_btn_wrap {flex-direction: column;}
	.eb_btn_wrap a {width: 100%; justify-content: center; gap: 10px;}
		
}

@media (max-width:440px){

	/* 썸네일 리스트 */
	.thum_list li {flex: 0 0 100%;}
	.thum_list li:nth-child(n + 4) {display: none;}
	.thum_list .img img {object-fit: contain;}

}

@media (max-width: 360px){

	/* sub 타이틀 */
	.bt_option_wrap {flex-direction: column;}
	.bt_option {width: 100%;}

}