/* ============================================================================ responsive.css - 반디북US 모바일/태블릿 반응형 오버레이 (2026-09-08 신설) ---------------------------------------------------------------------------- - 화면폭 1023px 이하(스마트폰, 태블릿 세로)에서만 동작한다. PC(1024px 이상)에는 아무 규칙도 적용되지 않으므로 기존 화면은 그대로다. - 기존 CSS(class.css, global.css 등)가 페이지 안에서 나중에 로딩되고 인라인 style 도 많아서, 덮어쓰기 위해 !important 를 쓴다. - 상단바/드로어 메뉴 DOM 은 /common/js/responsive.js 가 만든다. - 한글은 comment 에만 쓴다. content: 값은 유니코드 이스케이프로 쓴다. - 끄는 법: 헤더 3개(front_header*.jsp)에서 viewport meta + 이 파일 + responsive.js 세 줄을 지우면 완전히 원복된다. ========================================================================== */ /* 반응형 전용 요소는 PC 에서 절대 안 보이게 */ #rspBar, #rspDrawer, #rspDim { display:none; } .rspTxt { display:none; } #rspHelpNav, .rspHelpQ, .rspHelpCall, .rspMapBtns { display:none; } @media screen and (max-width: 1023px) { /* ---------- 0. 기본 --------------------------------------------------------- */ html, body { height:auto !important; min-width:0 !important; -webkit-text-size-adjust:100%; } html { overflow-x:hidden !important; } body { overflow-x:hidden !important; width:100% !important; background:#fff; } img { max-width:100%; } img[usemap] { height:auto; } .usNone { display:none !important; } #wrap { width:100% !important; height:auto !important; overflow:visible !important; } input[type=text], input[type=password], select, textarea { max-width:100%; box-sizing:border-box; } .rsp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin-bottom:6px; } .rsp-scroll > table, .rsp-scroll > iframe { max-width:none; } .rsp-scrollp { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } /* ---------- 1. 상단 (헤더) -------------------------------------------------- */ #recommWrap { display:none !important; } /* 회색 유틸바(로그인/북카트...) -> 드로어로 이동 */ #head { position:relative !important; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; background:#fff; z-index:70; } #head hr { display:none !important; } #head .logoArea, #head .myShoppingPop, #head .bookPeoplePop, #head .gnbEasy, #head .seachIssue, #head #gnb_right_usbanner, #head .ctView, #head #cListTop, #head .inkiUs, #head div[id^="cLayer"] { display:none !important; } /* 1-1. 모바일 상단바 (responsive.js 생성) */ #rspBar { display:flex !important; align-items:center; height:50px; padding:0 4px; border-bottom:1px solid #eee; } #rspBar .rspLogo { flex:1; text-align:center; line-height:0; } #rspBar .rspLogo img { height:30px; width:auto; vertical-align:middle; } #rspBar .rspIco { display:block; width:44px; height:44px; text-indent:-5000px; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:26px 26px; } #rspBar .rspIcoMenu { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235d4a2f' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); } #rspBar .rspIcoCart { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235d4a2f' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM3 3v2h2l3.6 7.6-1.4 2.4A2 2 0 0 0 9 18h11v-2H9.4l1-2H18a2 2 0 0 0 1.8-1.1L23 6H6.2l-.9-2H3z'/%3E%3C/svg%3E"); } /* 1-2. 검색창 : 상단바 아래 한 줄 통째로 */ #head .gnbR { float:none !important; position:static !important; height:auto !important; width:auto !important; margin:0 !important; padding:0 !important; } #head:after { content:""; display:block; clear:both; } #head .gnbSearch { position:static !important; top:auto !important; left:auto !important; width:auto !important; margin:8px 10px 0 !important; padding:0 !important; z-index:60; } #head .gnbSearch .seachType { display:none !important; } #head .gnbSearch .formA { float:none !important; width:auto !important; margin:0 !important; } #head .gnbSearch .formA form { display:flex; width:100%; height:40px; border:2px solid #8b6f47; border-radius:6px; background:#fff; box-sizing:border-box; overflow:hidden; } #head .gnbSearch .formA .inputA { float:none !important; flex:1; width:auto !important; height:auto !important; margin:0 !important; background:none !important; display:block !important; min-width:0; } #head .gnbSearch .formA .inputA input { width:100% !important; height:36px !important; margin:0 !important; padding:0 10px !important; border:0 !important; font:normal 16px Dotum,sans-serif !important; color:#333 !important; background:transparent !important; box-sizing:border-box; } #head .gnbSearch .formA .btnA { float:none !important; flex:0 0 52px; margin:0 !important; } #head .gnbSearch .formA .btnA a { display:block; height:36px; line-height:36px; text-align:center; background:#8b6f47; color:#fff !important; font-size:13px; font-weight:bold; text-decoration:none !important; } #head .gnbSearch .formA .btnA a:before { content:"\AC80\C0C9"; } /* 검색 */ #head .gnbSearch .formA .btnA a img, #head .gnbSearch .formA .btnA a .cbtn { display:none !important; } #head .gnbSearch .formA .btnB { display:none !important; } #layerPop_SRDBox, .layerPop_SRD { display:none !important; } /* 고급검색 레이어 */ /* 자동완성 레이어 */ #head .layer_search { position:absolute !important; top:100% !important; left:0 !important; right:0 !important; width:auto !important; margin:2px 0 0 !important; height:auto !important; max-height:60vh; overflow:auto; z-index:1000; } #head .layer_search .inner_words { float:none !important; width:auto !important; height:auto !important; border:0 !important; } #head .layer_search .inner_product { display:none !important; } #head .layer_search .inner_func { float:none !important; } #head .gnbSearch { position:relative !important; } /* 1-3. 퀵메뉴 (베스트셀러/추천책/새로나온 책...) : 가로 스크롤 칩 */ #head .gnbMenu { clear:both !important; width:auto !important; height:auto !important; margin:8px 0 0 !important; padding:0 10px 8px !important; background:none !important; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border-bottom:1px solid #eee; } #head .gnbMenu::-webkit-scrollbar { display:none; } #head .gnbMenu .pMenu, #head .gnbMenu .seMenu { position:static !important; display:inline !important; width:auto !important; margin:0 !important; padding:0 !important; } #head .gnbMenu li { float:none !important; display:inline-block !important; height:auto !important; margin:0 6px 0 0 !important; padding:0 !important; background:none !important; vertical-align:top; } #head .gnbMenu li a { display:inline-block !important; width:auto !important; height:auto !important; margin:0 !important; padding:6px 11px !important; background:#f6f3ee !important; text-indent:0 !important; font:normal 13px Dotum,sans-serif !important; color:#5d4a2f !important; border:1px solid #e3ddd2; border-radius:15px; text-decoration:none !important; line-height:1.2; overflow:visible !important; } #head .gnbMenu .pMenu .mEbook, #head .gnbMenu .pMenu .mGIFT, #head .gnbMenu .pMenu .mMusic, #head .gnbMenu .pMenu .mDvd, #head .gnbMenu .pMenu .mBeauty, #head .gnbMenu .seMenu .mEvent, #head .gnbMenu li.usNone { display:none !important; } #head .gnbMenu .seMenu .mBnP { cursor:pointer; } /* 1-4. 드로어 메뉴 (responsive.js 생성) */ #rspDim { display:block !important; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:9000; opacity:0; visibility:hidden; transition:opacity .2s; } #rspDrawer { display:block !important; position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:#fff; z-index:9001; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(-102%); -webkit-transform:translateX(-102%); transition:transform .25s; box-shadow:2px 0 8px rgba(0,0,0,.2); font:normal 14px Dotum,sans-serif; color:#444; } html.rsp-open #rspDim { opacity:1; visibility:visible; } html.rsp-open #rspDrawer { transform:none; -webkit-transform:none; } html.rsp-open, html.rsp-open body { overflow:hidden !important; } #rspDrawer a { color:#444; text-decoration:none; } #rspDrawer .rspDrHead { display:flex; align-items:center; justify-content:space-between; height:50px; padding:0 6px 0 14px; background:#5d4a2f; color:#fff; } #rspDrawer .rspDrHead strong { font-size:15px; } #rspDrawer .rspDrHead .rspClose { display:block; width:44px; height:44px; text-indent:-5000px; overflow:hidden; background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7l1.4-1.4 6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") no-repeat center; background-size:22px 22px; } #rspDrawer .rspUser { display:flex; flex-wrap:wrap; padding:8px 10px; border-bottom:1px solid #eee; background:#faf7f2; } #rspDrawer .rspUser a { display:block; padding:7px 10px; margin:2px; background:#fff; border:1px solid #e3ddd2; border-radius:4px; font-size:13px; } #rspDrawer .rspSec { border-bottom:1px solid #eee; } #rspDrawer .rspSec h3 { margin:0; padding:11px 14px; font-size:13px; font-weight:bold; color:#8b6f47; background:#f6f3ee; } #rspDrawer .rspSec h3.rspAcc { cursor:pointer; position:relative; } #rspDrawer .rspSec h3.rspAcc:after { content:""; position:absolute; right:16px; top:14px; width:7px; height:7px; border-right:2px solid #8b6f47; border-bottom:2px solid #8b6f47; transform:rotate(45deg); } #rspDrawer .rspSec h3.rspAcc.on:after { transform:rotate(-135deg); top:18px; } #rspDrawer .rspSec ul { margin:0; padding:0; list-style:none; } #rspDrawer .rspSec li { border-top:1px solid #f3f0ea; } #rspDrawer .rspSec li a { display:block; padding:11px 16px; font-size:14px; } #rspDrawer .rspSec ul.rspCols { display:flex; flex-wrap:wrap; } #rspDrawer .rspSec ul.rspCols li { width:50%; box-sizing:border-box; } #rspDrawer .rspSec ul.rspCols li a { padding:10px 14px; font-size:13px; } #rspDrawer .rspSec ul.rspHide { display:none; } #rspDrawer .rspFoot { padding:14px 16px 30px; font-size:11px; color:#999; line-height:1.6; } /* ---------- 2. 본문 공통 ---------------------------------------------------- */ #contentBody, #contentWrap, .conWrap, #bigBanner { width:auto !important; max-width:100% !important; margin:0 !important; padding:0 !important; height:auto !important; } #contentWrap { padding:0 0 20px !important; overflow-x:auto; } #contentWrap > div[style*="width"], #contentWrap > div[style*="960"] { width:auto !important; margin-left:0 !important; margin-right:0 !important; } #conLocation { width:auto !important; height:auto !important; margin:0 0 6px !important; padding:0 !important; } #conLocation .location { width:auto !important; height:auto !important; min-height:0 !important; padding:4px 10px !important; white-space:nowrap; overflow-x:auto; font-size:11px; } #conLocation .location li, #conLocation .location .ico01, #conLocation .location .ico02 { float:none !important; display:inline-block !important; margin:4px 3px 4px 0 !important; vertical-align:middle; } #conLocation .location .search, #conLocation .location .sublay { display:none !important; } #conBig, #conSmall, .conBig1, .conBig2, .w745, .w730, .w960 { float:none !important; display:block !important; width:auto !important; margin:0 !important; padding:0 10px !important; box-sizing:border-box; overflow:visible !important; } #conSmall { display:none !important; } /* 우측/좌측 보조칼럼(배너, 추천) */ #conBig > form > div[style*="width"], #conBig > div[style*="width"] { width:auto !important; } .hr_brown, .titInfo, .titInfo_line, .grayBox, .frameBox, .frameBox .con, .listWrap, .listTopA, .listTopAL, .listTopAL2, .pageBG, .boxShadowBr960, .boxShadowBr960 .con, .bookInfo_sublist, .h2_lay { width:auto !important; margin-left:0 !important; margin-right:0 !important; background-image:none !important; } .titInfo, .titInfo_line { height:auto !important; padding:6px 0 !important; border-bottom:1px solid #e3ddd2; } .grayBox { padding:8px !important; height:auto !important; background:#f6f3ee !important; border:1px solid #e3ddd2; } .grayBox dl, .grayBox dt, .grayBox dd { float:none !important; width:auto !important; display:inline-block; margin:2px 4px 2px 0 !important; } .listTopA .fl_left, .listTopA .fl_right { float:none !important; margin:4px 0 !important; display:block !important; } .listTopA .fl_right p { float:none !important; display:inline-block; margin:0 6px 0 0 !important; } .pageBG { height:auto !important; padding:6px 0 !important; text-align:center; } .pageBG .pageConL, .pageBG .pageConR { position:static !important; display:block; margin:4px 0; text-align:center; } .pageBG .page { display:inline-block; } /* 탭(.tab) : 가로 스크롤 */ ul.tab, .tab { width:auto !important; margin-left:0 !important; margin-right:0 !important; height:auto !important; background:none !important; white-space:nowrap; overflow-x:auto; overflow-y:hidden; border-bottom:2px solid #8b6f47; -webkit-overflow-scrolling:touch; } .tab li { float:none !important; display:inline-block !important; width:auto !important; height:auto !important; margin:0 !important; background:none !important; vertical-align:bottom; } .tab li a { display:inline-block !important; height:auto !important; padding:9px 12px !important; background:none !important; font-size:13px; color:#998B62 !important; text-decoration:none !important; } .tab li.on a { color:#5d4a2f !important; font-weight:bold; border-bottom:2px solid #5d4a2f; margin-bottom:-2px; } .tab li a img { vertical-align:middle; } /* 두 칸 서식 표는 100% 로, 나머지 넓은 표는 JS 가 .rsp-scroll 로 감싼다 */ table.orderTable col, table.orderTable2 col { width:auto !important; } table.orderTable2 td, table.orderTable td { word-break:break-all; white-space:normal !important; } table.orderTable2 td input[type=text], table.orderTable2 td input[type=password], table.orderTable2 td select { max-width:100% !important; } /* 레이어 팝업 */ .bookViewPop, .laypop { left:10px !important; right:10px !important; width:auto !important; max-width:none !important; margin-left:0 !important; box-sizing:border-box; z-index:600; } .bookViewPop .laypopCon, .laypop .laypopCon, .bookViewPop table, .laypop table { width:auto !important; max-width:100%; } .laypop table.boardList04, .bookViewPop table.boardList04 { display:block; overflow-x:auto; } /* ---------- 3. 하단 (푸터) --------------------------------------------------- */ #footer { width:auto !important; height:auto !important; margin:20px 0 0 !important; padding:16px 14px 24px !important; background:#f6f3ee !important; border-top:1px solid #e3ddd2; overflow:visible !important; } #footer .copyright { float:none !important; width:auto !important; padding:0 !important; } #footer .copyright p.logo { float:none !important; margin:0 0 10px !important; } #footer .copyright p.logo img { height:26px; width:auto; } #footer .copyright .copyC { float:none !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; } #footer .copyright .bMenu { margin:0 0 8px !important; overflow:visible !important; height:auto !important; } #footer .copyright .bMenu li { float:none !important; display:inline !important; height:auto !important; margin:0 2px 0 0 !important; font-size:12px; line-height:1.9; color:#999; } #footer .copyright .bMenu li a { display:inline !important; } #footer .copyright .bCopy { height:auto !important; margin:0 !important; } #footer .copyright .bCopy div { font-size:12px !important; line-height:1.6; } #footer .copyright .bCopy div[style*="8px"] { font-size:10px !important; } #floatArea, #message1, #message2 { display:none !important; } /* 와이즈카트 하단 고정 프레임 */ #topBtn { left:auto !important; right:12px !important; bottom:16px !important; margin:0 !important; width:auto !important; } #topBtn img { width:36px; height:auto; opacity:.85; } #rightBanner, #leftBanner { display:none !important; } /* ---------- 4. 메인 페이지 --------------------------------------------------- */ #main_visual_bannerContainer { width:auto !important; height:auto !important; overflow:visible !important; padding:0 10px; } #main_visual_bannerContainer > div[style] { width:auto !important; height:auto !important; background:none !important; } #main_visual_bannerContainer .mPaging2 { display:none !important; } .mainMdMenu { position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:8px 0 0 !important; background:none !important; text-align:left !important; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } .mainMdMenu span { display:inline-block; margin:0 6px 6px 0 !important; padding:5px 11px; background:#8b6f47; color:#fff !important; border-radius:14px; font:normal 12px Dotum,sans-serif; } .mainMdMenu span.on { background:#5d4a2f; color:#f4e9d2 !important; } .mainMdCon { width:auto !important; height:auto !important; margin:0 !important; overflow:visible !important; } .mainMd { margin:0 !important; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px 0 4px; } .mainMd li { float:none !important; display:inline-block !important; width:104px !important; height:auto !important; margin:0 8px 0 0 !important; vertical-align:top; position:static !important; } .mainMd li img { width:102px !important; height:auto !important; position:static !important; } #contentWrap > div[style*="960px"] img[usemap] { width:100%; height:auto; } .usBenefitBar { width:auto !important; height:auto !important; padding:8px 10px !important; flex-wrap:wrap; row-gap:2px; column-gap:8px; } .usBenefitBar .ubTit { font-size:13px !important; } .usBenefitBar .ubMore { font-size:11px !important; padding:0 !important; background:none !important; } .mainWrap { width:auto !important; margin:0 !important; display:flex; flex-direction:column; } .mainWrap:after { content:none; } .mainLeft { display:none !important; } /* 좌측 카테고리 목록 -> 드로어 메뉴 */ .mainCon { float:none !important; width:auto !important; margin:0 !important; padding:0 10px !important; background:none !important; order:1; box-sizing:border-box; } .mainRight { float:none !important; width:auto !important; margin:0 !important; padding:0 10px !important; order:2; box-sizing:border-box; } .mainCon > hr { display:none; } .mainCon .mainBanner, .mainCon .mbList { width:auto !important; margin-left:0 !important; } .mainCon .mainBanner img { width:100% !important; height:auto !important; } .mainCon .todayCon { width:auto !important; height:auto !important; margin:16px 0 0 !important; position:relative; padding-bottom:12px; border-bottom:1px solid #eee; background:none !important; } .mainCon .todayCon h2.tToday { float:none !important; margin:0 !important; } .mainCon .todayCon .btnL { position:absolute; right:0; top:0; margin:0 !important; } .mainCon .todayBookList .date { position:absolute; left:64px; top:0; float:none !important; margin:0 !important; line-height:14px; font-size:12px; color:#8b6f47 !important; } .mainCon .todayBookList .con { margin-top:12px !important; } .mainCon .todayBookList .con dl { padding-left:14px !important; } .mainCon .todayBookList .con .bookN { font-size:15px !important; line-height:1.4 !important; padding-left:0 !important; background:none !important; margin-top:4px !important; } .mainCon .todayBookList .con .bookN a { color:#222 !important; } .mainCon .todayBookList .con .bookC { font-size:12px; color:#777; margin-top:6px; } .mainCon .todayBookList { width:auto !important; height:auto !important; margin:0 !important; } .mainCon .todayBookList .con { width:auto !important; height:auto !important; margin:0 !important; display:flex; flex-direction:row-reverse; overflow:visible !important; } .mainCon .todayBookList .con dl { float:none !important; width:auto !important; flex:1; margin:0 !important; padding-left:12px; min-width:0; } .mainCon .todayBookList .con .todayImg { position:static !important; float:none !important; width:128px !important; margin:0 !important; flex:0 0 128px; } .mainCon .todayBookList .con .todayImg a { width:auto !important; padding:0 !important; background:none !important; } .mainCon .todayBookList .con .todayImg img { width:126px !important; height:auto !important; max-height:none !important; border:1px solid #d1d1d1; box-sizing:border-box; } .mainCon .newBook { width:auto !important; height:auto !important; margin:14px 0 0 !important; overflow:visible !important; background:none !important; } .mainCon .newBook .newList { width:auto !important; height:auto !important; margin:8px 0 0 !important; padding:0 !important; overflow:visible !important; display:flex; flex-wrap:wrap; } .mainCon .newBook .newList li { float:none !important; width:33.33% !important; margin:0 0 12px !important; padding:0 4px; box-sizing:border-box; text-align:center; } .mainCon .newBook .newList .bookImg { width:auto !important; height:auto !important; margin:0 !important; position:relative; } .mainCon .newBook .newList .bookImg img.bImg, .mainCon .newBook .newList .bookImg .bImg img { width:82px !important; height:auto !important; margin:0 !important; } .mainCon .newBook .newList .bookImg .commentIcon { display:none !important; } .mainCon .newBook .newList li p, .mainCon .newBook .newList li dl { width:auto !important; } .mainCon .recomCon { width:auto !important; height:auto !important; margin:14px 0 0 !important; overflow:visible !important; position:relative; } .mainCon .recomCon .btnL { position:absolute; right:0; top:2px; } .mainCon .recomCon .recomList { width:auto !important; height:auto !important; margin:0 !important; padding-top:8px !important; overflow:hidden !important; } .mainCon .recomCon .recomList li { float:left !important; clear:none !important; width:100% !important; margin:0 !important; padding:10px 0 !important; border-bottom:1px solid #f0ece4; box-sizing:border-box; overflow:hidden; } .mainCon .recomCon .recomList li:last-child { border-bottom:0; } .mainCon .recomCon .recomList li.no1 { width:100% !important; } .mainCon .recomCon .recomList .bookImg { float:left !important; width:84px !important; height:auto !important; margin:0 !important; text-align:left !important; } .mainCon .recomCon .recomList .bookImg img, .mainCon .recomCon .recomList .bookImg .bImg { width:80px !important; height:auto !important; max-height:none !important; margin:0 !important; border:1px solid #e3ddd2; box-sizing:border-box; } .mainCon .recomCon .recomList .bookImg .commentIcon { display:none !important; } .mainCon .recomCon .recomList .bookCon { float:none !important; width:auto !important; margin:0 0 0 96px !important; word-break:break-all; } .mainCon .recomCon .recomList .bookCon .booktit, .mainCon .recomCon .recomList .bookCon .booktit a { font-size:14px !important; font-weight:bold; color:#222 !important; line-height:1.4; } .mainCon .recomCon .recomList .bookCon dd { margin-top:3px !important; } .mainCon .recomCon .recomList li.no1 .bookCon { width:auto !important; } .mainTitle { margin:14px 0 0 !important; } .mainCon .newBook .tabTypeB { position:static !important; height:auto !important; margin:6px 0 0 !important; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } .mainCon .newBook .tabTypeB li { float:none !important; display:inline-block !important; margin:0 !important; } .mainCon .newBook .tabTypeB li a { display:inline-block !important; height:auto !important; padding:6px 8px !important; font-size:12px; } .mainRight .overflow { overflow:visible !important; } .mainRight .bestseller { width:auto !important; height:auto !important; margin:14px 0 0 !important; overflow:visible !important; padding-bottom:10px; } .mainRight .bestseller .bestImg { float:left !important; width:124px !important; margin:12px 0 0 10px !important; } .mainRight .bestseller .bestImg img { width:120px !important; height:auto !important; max-height:none !important; border:1px solid #e3ddd2; box-sizing:border-box; } .mainRight .bestseller .bestList { overflow:hidden; } .mainRight .bestseller .bestList ul { float:none !important; width:auto !important; margin:12px 0 0 12px !important; overflow:visible !important; } .mainRight .bestseller .bestList li { margin-bottom:6px !important; } .mainRight .bestseller .bestList .moreView { clear:both; text-align:right; padding-top:6px; } .mainRight .mediaComm, .mainRight .saleBook, .mainRight .reprice_book, .mainRight .peopleBest { width:auto !important; height:auto !important; margin:14px 0 0 !important; overflow:visible !important; } .mainRight .mediaList, .mainRight .saleList, .mainRight .RepriceList { width:auto !important; height:auto !important; } .mainRight .mediaList li, .mainRight .saleList li { width:auto !important; } .tabTypeA, .tabTypeB, .tabTypeC { height:auto !important; background:none !important; overflow:hidden; border-bottom:1px solid #d9d2c0; position:static !important; } .tabTypeA li, .tabTypeB li, .tabTypeC li { width:auto !important; height:auto !important; background:none !important; border:0 !important; } .tabTypeA li a, .tabTypeB li a, .tabTypeC li a { display:block; padding:6px 10px !important; height:auto !important; width:auto !important; background:none !important; text-indent:0 !important; } .tabTypeC li.on a, .tabTypeA li.on a, .tabTypeB li.on a { color:#5d4a2f !important; font-weight:bold; } .recommWrap, .recommWrap h2, .recommWrap .todayRecomm, .recommWrap .trand { width:auto !important; margin:0 10px !important; } .recommWrap .con01, .recommWrap .con02, .recommWrap .toProd, .recommWrap .toProd03, .recommWrap .toProd02 { float:none !important; width:auto !important; height:auto !important; margin-left:0 !important; } .recommWrap .con02 .toProd03 li, .recommWrap .con02 .toProd02 li { float:left !important; width:50% !important; margin:0 0 10px !important; box-sizing:border-box; padding-right:6px; } .serviceWrap { width:auto !important; height:auto !important; margin:16px 10px 0 !important; overflow:visible !important; background:none !important; border:1px solid #eaeaea; } .serviceWrap .seLeft, .serviceWrap .seCon, .serviceWrap .seRight, .serviceWrap .telInfo { float:none !important; width:auto !important; margin:0 !important; padding:10px !important; border:0 !important; border-bottom:1px solid #eee !important; height:auto !important; } .serviceWrap .seRight .noticeList, .serviceWrap .seRight .noticeList li, .serviceWrap .faqList li { width:auto !important; } .main_popup, #POP_GIFT { max-width:calc(100% - 20px) !important; left:10px !important; margin-left:0 !important; } /* ---------- 5. 목록 (베스트셀러/새로나온 책/검색결과/카테고리) ---------------- */ /* 알라딘/교보 모바일처럼 : 표지 왼쪽(순위 배지) + 제목/저자/소개 오른쪽, 그 아래 가격줄과 버튼 */ .bookList, .bookList > li, .bookList .overflow { width:auto !important; height:auto !important; } .bookList > li { padding:12px 0 !important; margin:0 !important; border:0 !important; border-bottom:1px solid #eee !important; background:none !important; } .bookList .overflow { position:relative; overflow:visible !important; } .bookList .listTit { display:none !important; } /* 순위 배지 : 표지 왼쪽 위에 얹는다 */ .bookList .ranking { position:absolute !important; left:0; top:0; z-index:2; float:none !important; width:auto !important; margin:0 !important; } .bookList .ranking .rnBox { width:26px !important; height:auto !important; padding:2px 0 3px; font:bold 9px verdana !important; line-height:1 !important; border-radius:0 0 4px 0; box-shadow:1px 1px 2px rgba(0,0,0,.25); } .bookList .ranking .rnBox img { max-width:22px; height:auto; } .bookList .ranking .rnBox span { display:block; margin-top:2px; } .bookList .ranking .rnBox span img { margin:0 1px 0 0 !important; vertical-align:middle; width:auto; max-width:8px; } .bookList .ranking .al_center, .bookList .ranking .chk, .bookList .chkA { display:none !important; } /* 일괄선택 체크박스 */ .bookList .bookView { float:none !important; width:auto !important; padding:0 !important; margin:0 !important; background:none !important; overflow:visible !important; display:block; } .bookView .viewA { float:none !important; width:auto !important; margin:0 !important; overflow:visible !important; display:flex; align-items:flex-start; } .bookView .viewA .viewImg { float:none !important; flex:0 0 96px; width:96px !important; margin:0 12px 0 0 !important; position:relative; } .bookView .viewA .viewImg img { max-width:90px; height:auto; } .bookView .viewA .viewImg img.d_imgLine { width:90px !important; height:auto !important; border:1px solid #ddd; } .bookView .viewA .viewImg .proImg { width:auto !important; text-align:left !important; } .bookView .viewA .viewImg .btnA, .bookView .viewA .viewImg .comment { display:none !important; } /* 북트리/새창 버튼 */ .bookView .viewA .viewInfo { float:none !important; flex:1; min-width:0; width:auto !important; margin:0 !important; } .bookView .viewA .viewInfo li { word-break:break-all; padding:0 !important; } .bookView .viewA .viewInfo .v_title { font:normal 11px Dotum,sans-serif !important; color:#777; line-height:1.5 !important; } .bookView .viewA .viewInfo .v_title p { font:bold 14px Dotum,sans-serif !important; line-height:1.35 !important; margin:0 0 4px !important; color:#222; } .bookView .viewA .viewInfo .v_title p a { color:#222 !important; } .bookView .viewA .viewInfo .v_titleDetail { font-size:15px !important; } .bookView .viewA .viewInfo .v_story { display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px !important; font:normal 11px Dotum,sans-serif !important; line-height:1.4 !important; color:#999; max-height:32px; } .bookView .viewA .viewInfo .v_story a { color:#999 !important; } .bookView .viewA .viewInfo .v_flag { margin-top:4px !important; } .bookView .viewA .viewInfo .v_flag img { height:14px; width:auto; margin-right:2px !important; } /* 표시 배지 : gif 네모(32x33)가 14px 로 줄어 안 보이던 것 -> 한 줄 알약 (알라딘/교보 라벨처럼) */ .cbtn-f { width:auto !important; min-width:0 !important; height:20px !important; line-height:20px !important; padding:0 6px !important; font-size:11px !important; letter-spacing:-0.2px !important; border-radius:3px !important; box-shadow:none !important; -webkit-clip-path:none !important; clip-path:none !important; text-shadow:none !important; background-image:none !important; vertical-align:middle !important; margin:0 4px 4px 0 !important; } .cbtn-f br { display:none; } .bookView .viewA .viewInfo .v_flag { display:flex; flex-wrap:wrap; align-items:center; } .bookView .viewA .viewInfo .v_flag > span:not(.cbtn) { display:inline-flex; flex-wrap:wrap; margin-right:0 !important; } .p_bookInfo .bookInfoWrap .flag { display:flex !important; flex-wrap:wrap; } .bookInfo_subCon dl dt .cbtn-f { margin:0 !important; } .p_bookInfo .bookInfoWrap .flagL { position:static !important; display:flex !important; flex-wrap:wrap; width:auto !important; padding:8px 10px 0; } .p_bookInfo .bookInfoWrap .flag .cbtn-f { height:22px !important; line-height:22px !important; font-size:12px !important; padding:0 8px !important; } .bookView .viewA .viewInfo .v_flag > span:not(.cbtn):empty { display:none !important; } .bookView .viewA .viewInfo li p.bookself, .bookView .viewA .viewInfo li.event .boxEvent { width:auto !important; } .bookView .viewA .viewInfo .v_event, .bookView .viewA .viewInfo .couponListTit, .bookView .viewA .viewInfo .couponList { display:none !important; } /* 가격줄 : 판매가 크게, 할인/적립, 정가는 취소선. 표지 오른쪽 열에 맞춰 들여쓴다 */ .bookView .viewB { float:none !important; width:100% !important; margin:6px 0 0 !important; padding:0 0 0 108px !important; box-sizing:border-box; } .bookView .viewB .viewBox { width:auto !important; margin:0 !important; background:none !important; border:0 !important; } .bookView .viewB .viewBox .con { width:auto !important; padding:0 !important; background:none !important; text-align:left !important; display:block; } .bookView .viewB .viewBox .con .boxA { width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; display:flex; flex-wrap:wrap; align-items:baseline; } .bookView .viewB .viewBox .con .boxA .v_price { order:1; font:bold 15px Dotum,sans-serif !important; color:#c0392b !important; margin-right:6px; } .bookView .viewB .viewBox .con .boxA .v_price img { display:none !important; } .bookView .viewB .viewBox .con .boxA p { order:2; margin:0 6px 0 0 !important; font:normal 11px Dotum,sans-serif !important; color:#e67e22; white-space:nowrap; } .bookView .viewB .viewBox .con .boxA .t_gr { order:3; font-size:0 !important; } /* 화살표를 지운다 */ .bookView .viewB .viewBox .con .boxA .t_gr strong { font:normal 11px Dotum,sans-serif !important; color:#999; text-decoration:line-through; } .bookView .viewB .viewBox .con .boxA .couponImgBG { order:4; } .bookView .viewB .viewBox .con .boxB { display:flex; flex-wrap:wrap; align-items:center; margin:2px 0 0 !important; font:normal 11px Dotum,sans-serif !important; color:#999; } .bookView .viewB .viewBox .con .boxB p { margin:0 0 0 6px !important; font:normal 11px Dotum,sans-serif !important; line-height:1.4 !important; color:#999 !important; } .bookView .viewB .viewBox .con .boxB .v_grade { display:inline-block; } .bookView .viewB .viewBox .con .boxB img { vertical-align:middle; } .bookView .viewB .btnA { margin:6px 0 0 !important; text-align:left !important; } .bookView .viewB .btnA img { height:22px; width:auto; } .bookView .viewB .btnA { display:flex !important; flex-wrap:wrap; gap:4px; } .bookView .viewB .btnA a { margin:0 !important; } .bookView .viewB .btnA .cbtn { height:30px !important; line-height:28px !important; min-width:0 !important; padding:0 12px !important; font-size:12px !important; letter-spacing:-0.3px !important; } .bookView .viewB .couponImgBG { float:none !important; margin:6px 0 0 !important; } .bookView .viewB .al_right { display:none !important; } .top100 { display:none !important; } .cbtn-b { max-width:100%; } table.orderTable2 td .cbtn-b, table.boardRegister td .cbtn-b, .loginForm .cbtn-b, .btnC .cbtn-b { height:32px !important; line-height:30px !important; min-width:0 !important; padding:0 12px !important; font-size:13px !important; } /* 목록 상단 : 탭(이미지 -> 글자), 제목띠, 조회조건, 정렬/일괄선택, 순위 페이저 */ .p_bestSeller .titInfo, .p_bestSeller .titInfo_line { display:none !important; } .p_bestSeller .bsTab { width:auto !important; margin:0 0 8px !important; } .grayBox { margin:0 0 8px !important; padding:8px 10px !important; } .grayBox dl.search { display:grid !important; grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:6px; align-items:center; width:auto !important; } .grayBox dl.search dt { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; font-weight:bold; color:#8b6f47; font-size:12px; white-space:nowrap; } .grayBox dl.search dd { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center; gap:4px; min-width:0; } .grayBox dl.search dd p { display:block !important; float:none !important; margin:0 !important; flex:1 1 0; min-width:0; } .grayBox dl.search dd p.mt1m, .grayBox dl.search dd p:last-child:not(:first-child) { flex:0 0 auto; } .grayBox dl.search dd > select { flex:1 1 0; min-width:0; } .grayBox select, .grayBox input[type=text] { width:100% !important; max-width:none !important; min-width:0; height:32px !important; font-size:13px !important; box-sizing:border-box; vertical-align:middle; } .grayBox dl.search dd img { vertical-align:middle; height:22px; width:auto; } .grayBox dl.search dd .cbtn { height:32px !important; line-height:30px !important; min-width:52px !important; padding:0 12px !important; font-size:13px !important; letter-spacing:0 !important; } .listTopA { margin:0 0 8px !important; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 8px; } .listTopA .fl_left, .listTopA .fl_right { float:none !important; margin:0 !important; display:flex !important; align-items:center; flex-wrap:wrap; } .listTopA .fl_left > input[name="prodIds"], .listTopA .fl_left > a, .listTopA .fl_left > span.ml10 { display:none !important; } /* 전체선택/일괄 북카트 */ .listTopA .fl_left > input.chk { vertical-align:middle; } .listTopA .fl_left img[alt*="\C81C\C678"] { vertical-align:middle; } .listTopA .fl_left .bestExceptA { margin:0 !important; white-space:nowrap; display:inline-flex !important; align-items:center; gap:4px; } .listTopA .fl_left .bestExceptA input { margin:0 !important; width:16px; height:16px; } .listTopA .fl_left .bestExceptA .cbtn-t { font-size:12px !important; letter-spacing:-0.3px !important; line-height:32px !important; color:#5d4a2f !important; } .listTopA .fl_left .bestExceptA img { vertical-align:middle; } .listTopA .fl_right { flex:1 1 auto; justify-content:flex-end; gap:6px; } .listTopA .fl_right p { float:none !important; margin:0 !important; } .listTopA .fl_right select { height:32px !important; font-size:13px !important; max-width:140px !important; box-sizing:border-box; } .listTopA .fl_right img { height:22px; width:auto; vertical-align:middle; } .listTopA .cbtn-b { height:32px !important; line-height:30px !important; min-width:0 !important; padding:0 10px !important; font-size:12px !important; letter-spacing:-0.3px !important; } .pageBG { margin:0 0 6px !important; padding:4px 0 !important; text-align:left !important; } .pageBG .page { display:block !important; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0; } .pageBG .page a, .pageBG .page span, .pageBG .page strong { display:inline-block; } .pageBG .pageConL { display:none !important; } .pageBG .pageConR { display:none !important; } /* 직접입력 GO */ .bestRankBG, .bestRankPage { width:auto !important; height:auto !important; background:none !important; } .pageBG.bestRankBG { margin:0 -10px 10px !important; padding:0 !important; border-top:1px solid #e3ddd2; } .pageBG.bestRankBG .page.bestRankPage { margin:0 !important; padding:0 !important; overflow:visible !important; white-space:normal !important; text-align:left !important; } .bestRankPage .pageNum { display:flex !important; flex-wrap:wrap; width:100%; margin:0 !important; font-size:0 !important; letter-spacing:0 !important; } .bestRankPage .pageNum a, .bestRankPage .pageNum strong { flex:0 0 20%; box-sizing:border-box; display:block !important; margin:0 !important; padding:11px 0 !important; border:0 !important; border-right:1px solid #e3ddd2 !important; border-bottom:1px solid #e3ddd2 !important; border-radius:0 !important; background:#fff !important; text-align:center; font-size:13px !important; line-height:1.2 !important; color:#5d4a2f !important; text-decoration:none !important; white-space:nowrap; } .bestRankPage .pageNum a:nth-of-type(5n) { border-right:0 !important; } .bestRankPage .pageNum a.on, .bestRankPage .pageNum strong { background:#5d4a2f !important; color:#fff !important; font-weight:bold; } .bestRankPage > .cbtn, .bestRankPage > a > .cbtn { margin:6px 4px !important; } .thumbNail_type02 { width:auto !important; text-align:center; } .thumbNail_type02 .photo { margin:0 0 6px !important; } .thumbNail_type02 .photo img { max-width:100px; height:auto; } .thumbNail_type02 .info { width:auto !important; height:auto !important; margin:0 !important; white-space:normal; } /* 새로나온 책 '주목할만한 신간' 슬라이드 -> 가로 스크롤 */ .p_newBook .frameBox .overflow { height:auto !important; } .p_newBook .frameBox h2, .p_newBook .frameBox .con, .p_newBook .frameBox { width:auto !important; } .p_newBook .frameBox .btn_arrowL, .p_newBook .frameBox .btn_arrowR { display:none !important; } .p_newBook .frameBox .listWrap { float:none !important; position:static !important; width:auto !important; height:auto !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; white-space:nowrap; } .p_newBook .frameBox ul { position:static !important; display:block !important; overflow:visible !important; white-space:nowrap; } .p_newBook .frameBox ul ~ ul { display:none !important; } /* 슬라이드용 복제 목록 */ .p_newBook .frameBox ul li { float:none !important; display:inline-block !important; width:120px !important; padding:0 4px !important; overflow:visible !important; vertical-align:top; white-space:normal; } .p_newBook .frameBox ul li .thumbNail_type02 { width:auto !important; } .p_newBook .frameBox ul li .thumbNail_type02 .info { width:auto !important; } .p_newBook .grayBox, .p_newBook .pageBG, .p_newBook .bookList, .p_newBook .bookList .bookView, .p_newBook .bookList .bookView .viewA, .p_newBook .bookList .bookView .viewInfo { width:auto !important; } .simpleList, .simpleList > li { width:auto !important; padding:0 !important; border:0 !important; overflow:visible !important; } .simpleList li .list { display:flex; flex-wrap:wrap; } .simpleList li .list li { float:none !important; width:33.33% !important; margin:0 0 12px !important; padding:0 4px !important; box-sizing:border-box; border:0 !important; overflow:visible !important; } .simpleList li .list .conA { width:auto !important; overflow:visible !important; } .simpleList li .list .conA .ranking { display:none !important; } .simpleList li .list .conA .viewImg { float:none !important; width:auto !important; margin:0 !important; text-align:center; border:0 !important; } .simpleList li .list .conA .viewImg img { width:90px; height:auto; border:1px solid #ddd; } .simpleList li .list .conB { width:auto !important; margin:0 !important; } .simpleList li .list .conB p { margin:3px 0 0 !important; text-align:center !important; font-size:11px; } .simpleList li .list .conB .btnA { display:none !important; } /* 이미지 탭 -> 글자 탭 (responsive.js 가 alt 글자를 .rspTxt 로 붙여준다) */ .tab li a img { display:none !important; } .tab li a .rspTxt { display:inline !important; } /* 검색 결과 상단 */ .p_search .searchPhrase, .p_search .noResult, .p_search .nonResult, .p_search #conBig > div[style*="width"], .p_search .boxShadowBr960 > .con > div[style*="width"] { width:auto !important; padding:8px 0; } .p_search .reSearchWrap, .p_search .reSearch { width:auto !important; float:none !important; margin:0 !important; } .p_search .reSearchWrap h2 { float:none !important; margin:0 0 6px !important; } .p_search .reSearch > div { float:none !important; width:auto !important; } .p_search .reSearch p { display:flex; align-items:center; } .p_search .reSearch input#reKwd { width:auto !important; flex:1; min-width:0; height:28px; margin-right:6px; } .p_search .popKeyword { display:none !important; } .p_search .boxShadowBr960 .con { padding:8px !important; } .p_search .bookInfo_sublist { margin:0 0 8px !important; overflow:visible !important; } /* 베스트셀러 검색조건 박스 */ .grayBox select, .grayBox input[type=text] { max-width:none !important; min-width:70px; height:26px; } .grayBox dl.search dd { margin-right:8px !important; } .bestRankBG, .bestRankPage { width:auto !important; } /* 카테고리 메인 */ .p_book .cateM, .p_book .cateS, .p_book .cateInside, .p_book #sortableArea { float:none !important; width:auto !important; margin:0 !important; } .p_book .cateS { margin-top:14px !important; } .p_book .temClassA, .p_book .temClassB, .p_book .temClassC, .p_book .temClassE, .p_book .cateBest, .p_book .bandiRecomm { width:auto !important; margin-left:0 !important; margin-right:0 !important; } .p_book .bandiRecomm h4, .p_book .bandiRecomm dl, .p_book .bandiRecomm ul { width:auto !important; } .p_book .bandiRecomm dl dd, .p_book .bandiRecomm dl dt { float:none !important; width:auto !important; margin-left:0 !important; } .p_book .bandiRecomm ul li { float:left !important; width:auto !important; margin:0 6px 6px 0 !important; } .p_book .bandiRecomm ul li img { width:48px; height:auto; } .p_book .temClassA ul, .p_book .cateBest ul { display:flex; flex-wrap:wrap; width:auto !important; } .p_book .temClassA ul li, .p_book .cateBest ul li { float:none !important; width:33.33% !important; box-sizing:border-box; padding:0 4px 12px !important; margin:0 !important; height:auto !important; text-align:center; } .p_book .temClassA ul li img, .p_book .cateBest ul li img { max-width:96px; height:auto; } .p_book .cateLeftInside { display:none !important; } .p_book .tabMenuA { height:auto !important; margin:0 0 10px !important; overflow:hidden; } .p_book .tabMenuA li { height:auto !important; width:auto !important; } .p_book .cMainBanner { display:none !important; } /* 카테고리 페이지 좌측 서브카테고리 : 상단에 가로 칩으로 */ .p_book #conSmall { display:block !important; padding:0 10px !important; } .p_book #conSmall > * { display:none !important; } .p_book #conSmall .cateNaviNew { display:block !important; width:auto !important; margin:0 0 10px !important; border:0 !important; } .p_book #conSmall .cateNaviNew .con { width:auto !important; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0; } .p_book #conSmall .cateNaviNew li { display:inline-block !important; width:auto !important; border:0 !important; background:none !important; margin:0 6px 0 0 !important; } .p_book #conSmall .cateNaviNew li a.d1 { position:static !important; display:inline-block !important; width:auto !important; height:auto !important; padding:6px 11px !important; background:#f6f3ee !important; border:1px solid #e3ddd2; border-radius:15px; font-size:13px !important; color:#5d4a2f !important; } .p_book #conSmall .cateNaviNew li.on a.d1 { background:#5d4a2f !important; color:#fff !important; } .p_book #conSmall .cateNaviNew .d2List, .p_book #conSmall .cateNaviNew .d2Layer, .p_book #conSmall .cateNaviNew .trans { display:none !important; } .p_book #conSmall .cateNaviNew .rspSub { display:block !important; padding:4px 0 2px !important; margin:0 !important; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px dashed #e3ddd2; } .p_book #conSmall .cateNaviNew .rspSub ul { margin:0 !important; padding:0 !important; border:0 !important; white-space:nowrap; } .p_book #conSmall .cateNaviNew .rspSub li { display:inline-block !important; width:auto !important; margin:0 4px 0 0 !important; padding:0 !important; background:none !important; border:0 !important; } .p_book #conSmall .cateNaviNew .rspSub li a { display:inline-block !important; width:auto !important; padding:4px 9px !important; background:#fff !important; border:1px solid #e3ddd2; border-radius:12px; font-size:12px !important; color:#5d4a2f !important; } .p_book #conSmall .cateNaviNew .rspSub li a.on, .p_book #conSmall .cateNaviNew .rspSub li a.on2 { background:#e3ddd2 !important; font-weight:bold; } .p_book #conSmall h2 { display:none !important; } /* ---------- 6. 상품 상세 ------------------------------------------------------ */ .p_bookInfo .prodName { width:auto !important; margin:0 !important; padding:12px 10px !important; background:none !important; border-bottom:1px solid #e3ddd2; z-index:1 !important; } .p_bookInfo .prodName .bCondi { position:static !important; display:inline-block; margin:0 0 6px !important; } .p_bookInfo .prodName h3 { width:auto !important; margin:0 !important; font-size:18px !important; line-height:1.35 !important; word-break:keep-all; } .p_bookInfo .prodName h4, .p_bookInfo .prodName .bWriter, .p_bookInfo .prodName .ebook { width:auto !important; margin:5px 0 0 !important; } .p_bookInfo .prodName .sns { display:none !important; } .p_bookInfo .prodName .scrapBtn { position:static !important; display:inline-block !important; width:auto !important; margin:0 6px 6px 0 !important; vertical-align:middle; } .p_bookInfo .prodName .scrapBtn .prodJoint { display:inline-block !important; width:auto !important; margin:0 !important; } .p_bookInfo .prodName .scrapBtn .prodJoint a { float:none !important; display:inline-block !important; vertical-align:middle; } .p_bookInfo .prodName .scrapBtn .cbtn { height:20px !important; line-height:18px !important; min-width:0 !important; padding:0 8px !important; font-size:11px !important; letter-spacing:-0.2px !important; vertical-align:middle; } .p_bookInfo .prodName .bCondi { vertical-align:middle; } .p_bookInfo .prodName .bCondi .cbtn-f { margin:0 !important; } .p_bookInfo .bookInfoWrap { width:auto !important; margin:0 !important; background:none !important; overflow:visible !important; } .p_bookInfo .bookInfoWrap .flag { position:static !important; width:auto !important; text-align:left !important; padding:8px 10px 0; } .p_bookInfo .bookInfoWrap .flag img { height:20px; width:auto; } .p_bookInfo .bookInfoWrap .bookImg { float:none !important; width:auto !important; margin:14px 0 0 !important; text-align:center; } .p_bookInfo .bookInfoWrap .bookImg > div[style] { margin:0 auto !important; } .p_bookInfo .bookInfoWrap .bookImg .proImg img { max-width:180px !important; height:auto; } .p_bookInfo .bookInfoWrap .bookImg .packPlus, .p_bookInfo .bookInfoWrap .bookImg .packageImg, .p_bookInfo .bookInfoWrap .bookImg .packMore { margin:0 auto !important; } .p_bookInfo .bookInfoWrap .buyInfo { float:none !important; width:auto !important; margin:12px 10px 0 !important; } .p_bookInfo .bookInfoWrap .buyInfo dl { width:auto !important; padding:8px 0 !important; background:none !important; border-top:1px solid #eee; overflow:hidden !important; } .p_bookInfo .bookInfoWrap .buyInfo dt { width:64px !important; padding:4px 0 5px 12px !important; background-position:2px 7px !important; } .p_bookInfo .bookInfoWrap .buyInfo dd { width:calc(100% - 90px) !important; padding-left:7px !important; word-break:break-all; } .p_bookInfo .bookInfoWrap .buyInfo dd.todayD { width:auto !important; margin:7px 0 6px !important; box-sizing:border-box; float:none !important; clear:both; } .p_bookInfo .bookInfoWrap .buyInfo dd.todayD .tit, .p_bookInfo .bookInfoWrap .buyInfo dd.todayD .tdInfo { float:none !important; width:auto !important; margin:0 !important; text-align:left !important; } .p_bookInfo .bookInfoWrap .etcInfo { float:none !important; width:auto !important; margin:12px 10px 0 !important; } .p_bookInfo .bookInfoWrap .etcInfo .numView, .p_bookInfo .bookInfoWrap .etcInfo .paperBookInfo, .p_bookInfo .bookInfoWrap .etcInfo .eBookReader { width:auto !important; margin:6px 0 0 !important; } .p_bookInfo .bookInfoWrap .etcInfo > div[style] { margin:0 !important; } .p_bookInfo .bookInfoWrap .isbn { margin:0 !important; padding:8px 10px !important; height:auto !important; overflow:visible !important; } .p_bookInfo .bookInfoWrap .isbn p { padding-left:12px !important; background-position:0 2px !important; } .p_bookInfo .bookInfoWrap .detailBox, .p_bookInfo .bookInfoWrap .buyInfo .detailBox { width:auto !important; margin:6px 0 !important; } .p_bookInfo .bookInfoWrap .isbn p { float:none !important; display:block; margin:0 0 4px !important; } .p_bookInfo .bookInfoWrap .npBox { width:auto !important; margin:10px 0 0 !important; } .p_bookInfo .bookcube { width:auto !important; margin:0 !important; padding:0 !important; background:none !important; } .p_bookInfo .dtWrap { width:auto !important; margin:14px 0 0 !important; } .p_bookInfo .detailtab, .p_bookInfo .w745 .detailtab { width:auto !important; height:auto !important; margin:0 0 14px !important; background:none !important; border-bottom:2px solid #786547 !important; display:flex; } .p_bookInfo .detailtab li { float:none !important; flex:1; width:auto !important; height:auto !important; margin:0 !important; background:none !important; } .p_bookInfo .detailtab li a { height:auto !important; padding:9px 0 !important; } .p_bookInfo .detailtab li { border:1px solid #d9cdb8 !important; border-bottom:0 !important; background:#fff !important; } .p_bookInfo .detailtab li a { color:#786547 !important; font-weight:bold !important; font-size:14px !important; text-decoration:none !important; } .p_bookInfo .detailtab li.on { background:#786547 !important; border-color:#786547 !important; } .p_bookInfo .detailtab li.on a { color:#fff !important; } .p_bookInfo .detailtab li a strong { color:inherit !important; } .p_bookInfo .bookInfo_tabCon { width:auto !important; margin:0 !important; } .p_bookInfo .bookInfo_sublist { width:auto !important; margin:0 0 12px !important; } /* 책정보 하위 탭 (분야 | 발자취 | 책소개 ...) : 한 줄 칩, 넘치면 가로 스크롤 */ .bookInfo_sublist { display:flex !important; flex-wrap:nowrap; gap:6px; width:auto !important; height:auto !important; margin:0 0 12px !important; padding:2px 0 6px !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; } .bookInfo_sublist::-webkit-scrollbar { display:none; } .bookInfo_sublist li, .bookInfo_sublist li.alt { float:none !important; flex:0 0 auto; margin:0 !important; padding:0 !important; background:none !important; } .bookInfo_sublist li a { display:inline-flex !important; align-items:center; gap:2px; padding:6px 11px !important; border:1px solid #e3ddd2; border-radius:15px; background:#f6f3ee; color:#5d4a2f !important; text-decoration:none !important; white-space:nowrap; } .bookInfo_sublist li a .cbtn-t { min-width:0 !important; font-size:12px !important; line-height:16px !important; letter-spacing:-0.3px !important; color:#5d4a2f !important; font-weight:bold; } .bookInfo_sublist li a .t_11br3 { font-size:11px !important; color:#8b6f47 !important; } .p_bookInfo .bookInfo_subCon, .p_bookInfo .bookInfo_more { width:auto !important; margin-bottom:24px !important; background-position:left top !important; } .p_bookInfo .bookInfo_subCon dl { width:auto !important; } .p_bookInfo .bookInfo_subCon dt { width:64px !important; } .p_bookInfo .bookInfo_subCon dd { width:calc(100% - 70px) !important; word-break:break-all; } .p_bookInfo .bookInfo_subCon > dl { display:flex; flex-wrap:wrap; align-items:flex-start; } .p_bookInfo .bookInfo_subCon > dl > dt { float:none !important; width:auto !important; min-width:64px; flex:0 0 auto; margin:0 10px 8px 0 !important; } .p_bookInfo .bookInfo_subCon > dl > dd { float:none !important; width:auto !important; flex:1 1 0; min-width:0; } .p_bookInfo .bookInfo_subCon .subtab, .p_bookInfo .bookInfo_subCon .listRN, .p_bookInfo .bookInfo_subCon .eventList, .p_bookInfo .bookInfo_subCon .reviewWrite .titA { width:auto !important; margin-left:0 !important; } .p_bookInfo .bookInfo_subCon .eventList .eventImg, .p_bookInfo .bookInfo_subCon .eventList dl { float:none !important; width:auto !important; } .p_bookInfo .bookInfo_subCon img, #bookDesc img, #indexDesc img, #openBookDesc img { max-width:100% !important; height:auto !important; } .p_bookInfo .bookInfo_author, .p_bookInfo .bookInfo_author .explore, .p_bookInfo .bookInfo_author .explore .first, .p_bookInfo .authorList { width:auto !important; padding-left:10px !important; padding-right:10px !important; box-sizing:border-box; } .p_bookInfo .bookInfo_author .explore .first li .wList, .p_bookInfo .bookInfo_author .explore .first li .wBooks, .p_bookInfo .bookInfo_author .explore .first li .wTendency { float:none !important; width:auto !important; height:auto !important; margin:10px 0 0 !important; } .p_bookInfo .bookInfo_author .explore .first li .wBooks dt { width:auto !important; } .p_bookInfo .bookInfo_author .explore .first li .proImg { float:left !important; margin-right:10px; } .p_bookInfo .bookInfo_author .explore .more { position:static !important; text-align:right; } .p_bookInfo iframe.iframe_review, .p_bookInfo iframe.iframe_package, .p_bookInfo #iframe_tag, .p_bookInfo #iframe_theme { max-width:100%; } /* 북카트/바로구매 : 하단 고정 바 */ .p_bookInfo .btnW { position:fixed !important; left:0; right:0; bottom:0; z-index:500; margin:0 !important; padding:8px 10px !important; background:rgba(255,255,255,.97); border-top:1px solid #ddd; display:flex; justify-content:center; align-items:center; box-shadow:0 -2px 6px rgba(0,0,0,.08); } .p_bookInfo .btnW a, .p_bookInfo .btnW > img { display:inline-block; margin:0 3px !important; } .p_bookInfo .btnW img { height:34px !important; width:auto !important; } .p_bookInfo .btnW a, .p_bookInfo .btnW > .cbtn { flex:1 1 0; min-width:0; } .p_bookInfo .btnW a > .cbtn { display:block !important; } .p_bookInfo .btnW .cbtn { width:100%; height:44px !important; line-height:42px !important; min-width:0 !important; padding:0 6px !important; font-size:15px !important; letter-spacing:-0.3px !important; border-radius:4px !important; } body.rsp-hasbar #footer { padding-bottom:80px !important; } body.rsp-hasbar #topBtn { bottom:66px !important; } /* ---------- 7. 북카트 / 주문 / 로그인 / 회원가입 ------------------------------ */ /* 표 -> 카드 : responsive.js 가 머리글(th) 글자를 각 칸의 data-label 로 붙이고 table 에 .rsp-card 를 단다. 상품명 칸은 .rsp-title(맨 위, 굵게), 체크박스만 든 칸은 .rsp-chk(오른쪽 위), 빈 칸은 .rsp-empty(숨김) */ table.rsp-card { display:block; width:auto !important; margin:0 0 10px !important; border:0 !important; border-top:2px solid #8b6f47 !important; background:none !important; } table.rsp-card colgroup, table.rsp-card thead, table.rsp-card tr.rsp-head { display:none !important; } table.rsp-card tbody, table.rsp-card tfoot { display:block; width:auto !important; } table.rsp-card tr { display:flex; flex-direction:column; position:relative; width:auto !important; padding:10px 12px !important; border-bottom:1px solid #e3ddd2 !important; background:#fff !important; } table.rsp-card td { display:block; width:auto !important; height:auto !important; padding:2px 0 !important; text-align:left !important; border:0 !important; background:none !important; font-size:12px; line-height:1.5; word-break:break-all; } table.rsp-card td[data-label]:before { content:attr(data-label); display:inline-block; min-width:56px; margin-right:6px; color:#8b6f47; font-size:11px; vertical-align:top; } table.rsp-card td.rsp-title { order:-1; font-weight:bold; font-size:13px; color:#222; padding:0 24px 4px 0 !important; } table.rsp-card td.rsp-title:before { content:none !important; } table.rsp-card td.rsp-title a { color:#222 !important; } table.rsp-card td.rsp-chk { position:absolute; right:10px; top:8px; padding:0 !important; } table.rsp-card td.rsp-chk:before { content:none !important; } table.rsp-card td.rsp-empty { display:none !important; } table.rsp-card td[colspan] { text-align:center !important; } table.rsp-card tr.rsp-total td, table.rsp-card tr.rsp-total td[colspan] { text-align:right !important; font-weight:bold; } table.rsp-card tr.rsp-total td:before { content:none !important; } table.rsp-card td[colspan]:before { content:none !important; } table.rsp-card td.total { font-size:15px !important; color:#c0392b; padding:6px 0 0 !important; } table.rsp-card td strong.t_br1 { font-size:14px; } table.rsp-card td img { max-height:24px; width:auto; vertical-align:middle; } table.rsp-card td.rsp-title img, table.rsp-card td img.d_imgLine { max-height:none; } table.rsp-card td.line { display:none !important; } /* 서식 표(라벨 | 입력) -> 라벨 위, 입력 아래 */ table.orderTable2, table.boardRegister { display:block; width:auto !important; margin:0 0 8px !important; background:none !important; border:1px solid #e3ddd2 !important; table-layout:auto; } table.orderTable2 colgroup, table.boardRegister colgroup { display:none !important; } table.orderTable2 tbody, table.orderTable2 tr, table.boardRegister tbody, table.boardRegister tr { display:block; width:auto !important; } table.orderTable2 th, table.boardRegister th { display:block; width:auto !important; padding:7px 10px 3px !important; background:#f6f3ee !important; border:0 !important; border-top:1px solid #eee !important; font-size:11px !important; color:#8b6f47; text-align:left !important; } table.orderTable2 td, table.boardRegister td { display:block; width:auto !important; padding:8px 10px 10px !important; border:0 !important; background:#fff !important; font-size:12px; line-height:1.6; } table.orderTable2 tr:first-child th, table.boardRegister tr:first-child th { border-top:0 !important; } table.boardRegister th img { margin:0 !important; } table.boardRegister td.line { display:none !important; } table.orderTable2 td input[type=text], table.orderTable2 td input[type=password], table.orderTable2 td select, table.orderTable2 td textarea { max-width:100% !important; height:32px; font-size:14px; box-sizing:border-box; } table.orderTable2 td textarea { height:auto; } table.orderTable2 td input.chk, table.orderTable2 td input[type=checkbox], table.orderTable2 td input[type=radio] { height:auto; width:auto; } table.orderTable2 td span { white-space:normal; } table.orderTable2 td img { max-height:26px; width:auto; vertical-align:middle; } h3.orderTit, .orderTit { width:auto !important; padding:16px 0 8px !important; font-size:14px !important; } h3.orderTit span { display:block; font-weight:normal; font-size:11px !important; } /* 주문 단계 머리 */ .orderStep, .regStep { width:auto !important; height:auto !important; margin:0 !important; padding:8px 10px !important; overflow:hidden; } .orderStep h2, .regStep h2 { float:none !important; position:static !important; } .orderStep h2 img, .regStep h2 img { height:22px; width:auto; } .orderStep .step, .regStep .step, .regStep p { float:none !important; position:static !important; margin:6px 0 0 !important; text-align:center; } .orderStep .step img, .regStep .step img, .regStep p img { max-width:100%; height:auto; } .orderStep .benefitA { position:static !important; float:none !important; width:auto !important; height:auto !important; margin:6px 0 0 !important; padding:6px 10px !important; background:#f6f3ee !important; color:#5d4a2f !important; font-size:11px !important; border-radius:4px; } .orderStep .benefitA strong { color:#c0392b; } /* 북카트 */ .p_bookCart .bookCartCon, .p_bookCart .bookCartCon .ment, .bookCartTotal, .cartTotal, .cartLay, .cartM { width:auto !important; margin-left:0 !important; margin-right:0 !important; } .p_bookCart .bookCartCon .ment { margin:0 0 8px !important; padding:8px 10px; background:#faf7f2; font-size:11px; color:#888; line-height:1.5; } .p_bookCart .bookCartCon .ment li { white-space:normal; margin:0 !important; } .p_bookCart .bookCartCon .ment br { display:none; } .p_bookCart .h2_lay { margin:12px 0 4px !important; padding:0 !important; height:auto !important; } .p_bookCart .h2_lay h2 img { height:18px; width:auto; } .p_bookCart .grayBox2 { padding:6px 8px !important; font-size:11px; } .p_bookCart .btnR { padding:4px 0 !important; text-align:right !important; } .p_bookCart .btnR img { height:22px; width:auto; } .p_bookCart .btnR .cbtn, .p_bookCart .h3_lay .btnA .cbtn { height:30px !important; line-height:28px !important; min-width:0 !important; padding:0 10px !important; font-size:12px !important; margin:0 0 0 4px !important; } .p_bookCart table.rsp-card td .cbtn { height:28px !important; line-height:26px !important; min-width:0 !important; padding:0 10px !important; font-size:12px !important; margin:0 4px 0 0 !important; } .p_bookCart .cartLay .btn .cbtn-i { width:22px !important; height:13px !important; line-height:13px !important; } .p_bookCart table.rsp-card td.td_L15 strong { display:block; } .p_bookCart .cartLay { display:inline-flex !important; align-items:center; width:auto !important; margin:0 !important; float:none !important; } .p_bookCart .cartLay input[type=text] { width:40px !important; height:24px !important; padding:0 !important; text-align:center; } .p_bookCart .cartLay .btn { display:inline-block; margin-left:2px; float:none !important; } .p_bookCart .cartLay .btn p { line-height:0; margin:0 !important; } .p_bookCart table.rsp-card td p.fl_clear { display:inline-block; clear:none !important; margin:0 0 0 6px !important; vertical-align:middle; } .p_bookCart .cartTotal, .p_bookCart .bookCartTotal { padding:10px 12px !important; margin:0 0 10px !important; background:#faf7f2 !important; border:1px solid #e3ddd2; overflow:hidden; } .p_bookCart .cartTotal .fl_left, .p_bookCart .bookCartTotal .fl_left, .p_bookCart .cartTotal .fl_right, .p_bookCart .bookCartTotal .fl_right { float:none !important; width:auto !important; margin:0 !important; } .p_bookCart .cartTotal .fl_left { font-size:11px; margin:0 0 6px !important; } .p_bookCart .bookCartTotal .fl_left h2 img { height:18px; width:auto; } .p_bookCart .priceList { width:auto !important; } .p_bookCart .priceList dl, .p_bookCart .t_price { float:none !important; width:auto !important; margin:0 !important; overflow:hidden; } .p_bookCart .priceList dt, .p_bookCart .t_price dt { float:left !important; clear:left; width:55% !important; margin:0 !important; padding:2px 0; font-size:12px; text-align:left; } .p_bookCart .priceList dd, .p_bookCart .t_price dd { float:left !important; width:45% !important; margin:0 !important; padding:2px 0; font-size:12px; text-align:right; } .p_bookCart .t_price { border-top:1px solid #e3ddd2; margin-top:6px !important; padding-top:6px; } .p_bookCart .t_price dt { font-weight:bold; } .p_bookCart .t_price dd { font-size:15px; font-weight:bold; color:#c0392b; } .p_bookCart .brBox { border-width:1px !important; padding:10px !important; margin:14px 0 0 !important; } .p_bookCart .h3_lay { position:relative; width:auto !important; margin:0 !important; padding:0 0 6px !important; overflow:hidden; } .p_bookCart .brBox ul { width:auto !important; display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 0; } .p_bookCart .brBox ul li { flex:0 0 110px; float:none !important; width:110px !important; margin:0 !important; text-align:center; } .p_bookCart .brBox ul li img { max-width:80px; height:auto; } .p_bookCart .brBox ul li p { width:auto !important; margin:3px 0 0 !important; font-size:11px; } .p_bookCart .h3_lay h3 img { height:16px; width:auto; } .p_bookCart .h3_lay .btnA { position:static !important; text-align:right; margin-top:4px; } .p_bookCart .h3_lay .btnA img { height:22px; width:auto; } /* 하단 고정 버튼바 (responsive.js 가 '주문하기' 든 .btnC 에 .rspFixBar 를 단다) */ .rspFixBar { position:fixed !important; left:0; right:0; bottom:0; z-index:500; margin:0 !important; padding:8px 10px !important; background:rgba(255,255,255,.97); border-top:1px solid #ddd; display:flex; justify-content:center; align-items:center; box-shadow:0 -2px 6px rgba(0,0,0,.08); } .rspFixBar img, .rspFixBar a { margin:0 3px !important; } .rspFixBar img { height:36px !important; width:auto !important; } .rspFixBar img.ml5 + img.ml5, .rspFixBar .cbtn.ml5 + .cbtn.ml5 { display:none !important; } /* 북카트에 주문하기 버튼이 두 번 들어있다 */ .rspFixBar a, .rspFixBar > .cbtn { flex:1 1 0; min-width:0; margin:0 3px !important; } .rspFixBar a > .cbtn { display:block !important; } .rspFixBar .cbtn { width:100%; height:44px !important; line-height:42px !important; min-width:0 !important; padding:0 6px !important; font-size:15px !important; border-radius:4px !important; } /* 주문서 */ .regBox, .regBox_top, .regBox_btm { width:auto !important; background:none !important; padding:0 !important; margin:0 !important; } .regBox_btm { padding:0 10px 10px !important; } .regBox h3 { width:auto !important; padding:12px 0 8px !important; margin:0 0 6px !important; background:none !important; border-bottom:2px solid #8b6f47; } .regBox .w720, .regBox .w750, .regBox .w755, .regBox .boxBrown755 { width:auto !important; margin-left:0 !important; } .p_order .orderTable, #orderProductDetail, #orderProductShort, #country_addr, #point_div, #settle_type_area1, #settle_type_area2 { width:auto !important; } .p_order table.orderTable:not(.rsp-card) { width:100% !important; margin:0 !important; } .p_order .cartM { width:auto !important; margin:6px 0 !important; text-align:right; } .p_order .cartM input, .p_order .orderM input { font-size:12px; padding:4px 8px; } .p_order .orderM { width:auto !important; margin:10px 0 !important; text-align:center; } .p_order .orderM#cash_id { position:fixed; left:0; right:0; bottom:0; z-index:500; margin:0 !important; padding:8px 10px !important; background:rgba(255,255,255,.97); border-top:1px solid #ddd; box-shadow:0 -2px 6px rgba(0,0,0,.08); } .p_order .orderM#cash_id input { height:40px; font-size:14px; min-width:110px; } .p_order #footer { padding-bottom:80px !important; } .p_order .t_14.t_bold.mt15.ml10 { margin-left:0 !important; } .successTxt, .osM, .moneyOrder, .successTxt .con, .successTxt p { width:auto !important; margin:10px 0 !important; } .successTxt img { max-width:100%; height:auto; } .successTxt { font-size:16px !important; line-height:1.45 !important; padding:16px 0 !important; text-align:center; } .successTxt br { display:none; } .moneyOrder { padding:10px 12px !important; font-size:12px !important; line-height:1.6 !important; border:1px solid #e3ddd2; background:#faf7f2; } .moneyOrder p br { display:none; } .moneyOrder p.con, .moneyOrder .con { width:auto !important; margin:8px 0 0 !important; font-size:13px !important; font-weight:bold; text-align:left !important; } .osM .fl_left, .osM .fl_right { float:none !important; text-align:center !important; margin:6px 0 !important; } .join { width:auto !important; margin:10px 0 0 !important; } /* 로그인 */ .loginBox, .loginBox_top, .loginBox_btm, .loginBox_daum, .loginBox_daum_top, .loginBox_daum_btm { width:auto !important; background:none !important; margin:0 !important; padding:0 !important; } .loginBox_btm, .loginBox_daum_btm { padding:14px 10px !important; overflow:visible !important; } .loginBox .loginCon, .loginBox_daum .loginCon { float:none !important; width:auto !important; margin:0 !important; overflow:visible !important; } .loginBox .banner, .loginBox_daum .banner { display:none !important; } .loginForm, .loginFormDaum { width:auto !important; padding:0 !important; margin:0 !important; } .loginForm .formA, .loginForm .memberA, .loginBox .memberA { float:none !important; width:auto !important; overflow:visible !important; } .loginForm dl, .loginForm dl.userA, .loginFormDaum dl { float:none !important; width:auto !important; margin:8px 0 0 !important; overflow:visible !important; } .loginForm dt, .loginForm dd, .loginForm dl.userA dd, .loginFormDaum dt, .loginFormDaum dd { float:none !important; width:auto !important; line-height:1.4 !important; } .loginForm dd input, .loginFormDaum dd input { width:100% !important; height:36px !important; font-size:16px; box-sizing:border-box; } .loginForm .btnA, .loginFormDaum .btnA { float:none !important; clear:both; margin:12px 0 0 !important; text-align:center; } .loginForm .loginInfoA, .loginFormDaum .loginInfoA { padding:12px 0 !important; } .loginForm .loginInfoA .btnA { padding:8px 0 0 !important; } .loginBox .noticeBox, .loginBox .noticeBox .con { width:auto !important; margin:10px 0 0 !important; background:none !important; border:1px solid #e3ddd2; } .loginBox .noticeBox .con { border:0 !important; } .loginBox .noticeBox .con .dotList { width:auto !important; padding:10px !important; } .loginBox .regBtnA { width:auto !important; height:auto !important; margin:0 !important; padding:12px 10px !important; background:none !important; } .loginFormDaum .formBandi, .loginFormDaum .formDaum { float:none !important; width:auto !important; border:0 !important; } .loginFormDaum .formBandi h4, .loginFormDaum .formDaum h4 { width:auto !important; } /* ---------- 8. 나의쇼핑정보 / 고객센터 ------------------------------------------ */ .p_mycart #conSmall, .p_center #conSmall { display:block !important; padding:0 10px !important; } .p_mycart #conSmall .subNavi, .p_center #conSmall .subNavi { width:auto !important; margin:0 0 10px !important; background:none !important; } .p_mycart #conSmall .subNavi .con, .p_center #conSmall .subNavi .con { width:auto !important; padding:0 !important; background:none !important; } .p_mycart #conSmall .subNavi h2, .p_center #conSmall .subNavi h2 { display:none !important; } .p_mycart #conSmall .sn2List, .p_center #conSmall .sn2List { width:auto !important; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 0; } .p_mycart #conSmall .sn2List > li, .p_center #conSmall .sn2List > li { display:inline-block; font-size:0; padding:0 !important; border:0 !important; vertical-align:top; } .p_mycart #conSmall .sn2List > li > a, .p_center #conSmall .sn2List > li > a { display:inline-block; margin:0 6px 0 0; padding:6px 11px; background:#5d4a2f; border-radius:15px; font-size:12px; color:#fff !important; white-space:nowrap; } .p_mycart #conSmall .sn3List, .p_center #conSmall .sn3List { display:inline; width:auto !important; margin:0 !important; } .p_mycart #conSmall .sn3List li, .p_center #conSmall .sn3List li { display:inline-block; margin:0 6px 0 0 !important; font-size:12px; } .p_mycart #conSmall .sn3List li a, .p_center #conSmall .sn3List li a { display:inline-block; padding:6px 11px; background:#f6f3ee; border:1px solid #e3ddd2; border-radius:15px; font-size:12px; color:#5d4a2f !important; white-space:nowrap; } .p_mycart #conSmall > *:not(.subNavi), .p_center #conSmall > *:not(.subNavi) { display:none !important; } .p_mycart #conBig { overflow:visible !important; } .p_mycart #conBig .top_myBox { width:auto !important; background:none !important; } .p_mycart #conBig .top_myBox .boxcon { width:auto !important; padding:12px !important; background:#faf7f2 !important; border:1px solid #e3ddd2; overflow:hidden; } .p_mycart #conBig .top_myBox .con1, .p_mycart #conBig .top_myBox .con2, .p_mycart #conBig .top_myBox .con3 { float:none !important; width:auto !important; } .p_mycart #conBig .top_myBox .con1 { display:none !important; } .p_mycart #conBig .top_myBox .con2 .nickname, .p_mycart #conBig .top_myBox .con2 dl { width:auto !important; } .p_mycart #conBig .top_myBox .con2 dt { width:80px !important; } .p_mycart #conBig .top_myBox .con2 dd { width:calc(100% - 90px) !important; } .p_mycart #conBig .top_myBox .con3 { margin-top:8px; } .p_mycart #conBig .top_myBox .con3 .infoBox { width:auto !important; height:auto !important; padding:8px 10px !important; background:#8b6f47 !important; border-radius:4px; } .p_mycart #conBig .top_myBox .con3 dt { width:80px !important; } .p_mycart #conBig .top_myBox .con3 dd { width:calc(100% - 90px) !important; } .p_mycart #conBig .grayBox { height:auto !important; padding:8px 10px !important; margin:10px 0 !important; overflow:visible !important; } .p_mycart #conBig .grayBox dt { float:none !important; width:auto !important; margin:0 0 4px !important; } .p_mycart #conBig .grayBox dt img { height:14px; width:auto; } .p_mycart #conBig .grayBox dd { margin:0 !important; font-size:12px; } .p_mycart #conBig .h2_lay, .p_mycart #conBig .h3_lay { position:relative; height:auto !important; margin:14px 0 6px !important; padding:0 0 6px !important; border-bottom:2px solid #8b6f47; overflow:hidden; } .p_mycart #conBig .h2_lay h2, .p_mycart #conBig .h3_lay h3 { float:left; } .p_mycart #conBig .h2_lay img, .p_mycart #conBig .h3_lay img { vertical-align:middle !important; height:16px; width:auto; } .p_mycart #conBig .h2_lay .more, .p_mycart #conBig .h2_lay .btnA, .p_mycart #conBig .h3_lay .btnA { position:static !important; float:right; margin:0 !important; } .p_mycart #conBig .h2_lay .more a { font-size:11px; color:#8b6f47; } .p_mycart #conBig .h2_lay2 { height:auto !important; padding:6px 0 !important; margin:0 0 8px !important; background:none !important; border-bottom:2px solid #8b6f47; } .p_mycart #conBig .h2_lay2 .step { position:static !important; display:block; margin-top:6px; text-align:center; } .p_mycart #conBig .h2_lay2 img { max-width:100%; height:auto; } .p_mycart #conBig .content { width:auto !important; margin:0 !important; overflow:visible !important; } .p_mycart #conBig .conLeft, .p_mycart #conBig .conRight { float:none !important; width:auto !important; margin:0 0 10px !important; } .p_mycart #conBig .boardBox, .p_mycart #conBig .boardBox.w363 { float:none !important; width:auto !important; height:auto !important; margin:0 0 8px !important; background:#fff !important; } .p_mycart #conBig .boardBox .fl_left, .p_mycart #conBig .boardBox .fl_right { float:none !important; width:auto !important; border:0 !important; } .p_mycart #conBig .boardBox dl { margin:6px 0 !important; overflow:hidden; } .p_mycart #conBig .boardBox dt, .p_mycart #conBig .boardBox dt.w104 { width:50% !important; margin:0 0 6px !important; padding-left:10px; box-sizing:border-box; } .p_mycart #conBig .boardBox dd { float:left; width:50%; margin:0 0 6px !important; } .p_mycart #conBig .boardBox ul { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 0 !important; height:auto !important; } .p_mycart #conBig .boardBox li { flex:0 0 110px; float:none !important; width:110px !important; background:none !important; } .p_mycart #conBig .boardBox li .bookimg img { width:80px; height:auto; } .p_mycart #conBig .boardBox li .booktit, .p_mycart #conBig .boardBox li .won, .p_mycart #conBig .boardBox li .sale { width:auto !important; margin:4px 4px 0 !important; font-size:11px; } .p_mycart .btnBA { margin:8px 0 !important; overflow:hidden; } .p_mycart .btnBA .fl_left, .p_mycart .btnBA .fl_right { float:none !important; text-align:right; } .p_mycart .btnBA img { height:24px; width:auto; } .p_mycart .btnBA .cbtn, .p_mycart .h2_lay .cbtn, .p_mycart .h3_lay .cbtn, .p_mycart .listTopA .cbtn, .p_mycart .listTopB .cbtn { height:30px !important; line-height:28px !important; min-width:0 !important; padding:0 10px !important; font-size:12px !important; margin:0 0 0 4px !important; } .p_mycart table.rsp-card td .cbtn { height:28px !important; line-height:26px !important; min-width:0 !important; padding:0 10px !important; font-size:12px !important; margin:2px 4px 2px 0 !important; } .p_mycart .listTopB { margin:0 0 8px !important; } .p_mycart .listTopB .fl_left, .p_mycart .listTopB .fl_right { float:none !important; margin:0 0 6px !important; } .p_mycart .grayBox2 { padding:8px !important; font-size:11px; } .p_mycart .page { text-align:center; } .p_mycart .listTopA .fl_left > input.chk, .p_mycart .listTopA .fl_left > a, .p_mycart .listTopA .fl_left > span.ml10 { display:inline-block !important; } .p_mycart .listTopA .fl_left > span.ml10 img, .p_mycart .listTopA .fl_left > a img { height:22px; width:auto; vertical-align:middle; } .p_mycart .bookList .bookView, .p_mycart .bookView { position:relative; padding-left:26px !important; } .p_mycart .bookView .chk { display:block !important; position:absolute; left:0; top:2px; width:22px; } .p_mycart .bookView .viewB { padding-left:108px !important; } .p_mycart .simpleList li .list .conA .ranking { display:block !important; float:none !important; width:auto !important; text-align:left; margin:0 0 4px !important; } .p_mycart .simpleList li .list .conA .ranking .rnBox { display:none; } .p_mycart .t_11.ml10 { margin-left:0 !important; } .p_center .tabWrap, .p_center .box_faqCate01, .p_center .box_faqCate02, .p_center .bookInfoCon, .p_center .bookInfoConT, .p_center .bookInfoConB, .p_center .faqMain, .p_center #conBig .titInfo, .p_center .detailtabBig { width:auto !important; margin-left:0 !important; } .p_center #conBig { overflow:visible !important; } [class^="boxShadow"], [class*=" boxShadow"], [class^="boxShadow"] > .con, [class*=" boxShadow"] > .con { width:auto !important; background:none !important; border:1px solid #e3ddd2; } .p_center .searchTop, .p_center .search2, .p_center .search2 form, .p_center .search2 p, .p_center .helpSearchTop { width:auto !important; margin:0 !important; padding:8px !important; } .p_center .search2 input[type=text], .p_center .searchTop input[type=text] { width:60% !important; max-width:220px; height:28px; } .p_center #conBig ul, .p_center #conBig li, .p_center #conBig li p, .p_center #conBig p.fl_clear, .p_center #conBig .more, .p_center #conBig dl, .p_center #conBig dd { width:auto !important; max-width:100%; float:none !important; } .p_center #conBig li p { display:inline; } .p_center #conBig .more { text-align:right; } .p_center #conBig div[style*="width"], .p_center .faqList, .p_center .faqTop, .p_center .helpSearch, .p_center .searchBox, .p_center .noticeList, .p_center .bbsList, .p_center .more, .p_center .boardList02, .p_center .boardList04, .p_center .boardList07, .p_center .listTopA, .p_center .pageBG, .p_center .titInfo_line { width:auto !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } .p_center .detailtab, .p_center .detailtabBig { height:auto !important; display:flex; flex-wrap:wrap; background:none !important; } .p_center .detailtab li, .p_center .detailtabBig li { width:auto !important; flex:1 1 33%; } /* ---------- 9. 키즈샵 / 수험서 (구조가 특수해 폭만 풀어줌) ---------------------- */ .kidsGnb2, .kidsGnb2 .kidsMenu, .exmLocation, .cateWrap, .cateListDetail, .simpleBestList { width:auto !important; max-width:100%; } .exmLocation { height:auto !important; background-size:cover !important; } .exmLocation h1, .exmLocation ul { float:none !important; width:auto !important; margin:0 !important; } .cateListDetail dt, .cateListDetail dd { float:none !important; width:auto !important; } .simpleBestList .list { float:none !important; width:auto !important; margin:0 !important; } .scheduleWrap, .scheduleTop, .scheduleWrap .exmMainCategory, .scheduleWrap .schedule, .scheduleWrap .scheduleBtn, .mainBottom, .mainBottom .mainCon, .mainBottom .mainRight, .recmdBook, .closeDday { float:none !important; width:auto !important; height:auto !important; margin-left:0 !important; margin-right:0 !important; } .scheduleWrap .exmMainCategory ul { width:auto !important; } .scheduleWrap .exmMainCategory ul li { display:inline-block; margin:0 8px 6px 0; } /* ---------- 추천책(오늘의 책, /front/display/recommendToday.do) ------------------------ */ .conWrap_today { width:auto !important; margin:0 !important; padding:0 10px !important; overflow:visible !important; box-sizing:border-box; } .conWrap_today #conBig { float:none !important; width:auto !important; } .conWrap_today #conSmall { display:none !important; } .conWrap_today .recBook_today1 { padding:14px !important; border-width:3px !important; } .conWrap_today .recBook_today1 .d_photo { float:none !important; margin:0 0 14px !important; text-align:center; } .conWrap_today .recBook_today1 .d_photo img { width:180px !important; max-width:60% !important; height:auto !important; box-shadow:0 4px 12px rgba(0,0,0,.15); } .conWrap_today .recBook_today1 .today_info .today_tit { font-size:18px !important; margin-bottom:8px !important; } .conWrap_today .recBook_today1 .today_info .today_desc { display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; } .conWrap_today .recBook_today1 .today_info .today_more a { display:block !important; text-align:center; padding:10px 0 !important; font-size:14px !important; border-radius:4px; } .conWrap_today .recBook_today2, .conWrap_today .btmBoundary { width:auto !important; margin:8px 0 0 !important; background-image:none !important; } .conWrap_today .recBook_today3 h3 { margin:22px 0 8px !important; font-size:15px !important; color:#5d4a2f !important; } .conWrap_today .recBook_cal { width:auto !important; margin:0 !important; background:none !important; } .conWrap_today .recBook_cal .con { padding:0 !important; background:none !important; } /* 달 고르기 "< 2026. 9 >" (2026-09-29) : 화살표 / 숫자 / 화살표 세 덩이를 한 줄 가운데, 세로도 정확히 가운데. 숫자는 codeButton.js 가 gif 를 .cbtn2 글자로 바꿔 둔 것 : 모바일 공통 규칙(.cbtn2-x 13px, 가운데 맞춤)과 점(.cbtn2-n, PC gif 높이 36px 상자 바닥에 찍힌 네모)이 따로 놀아 점이 숫자 밑으로 떨어졌다 -> 숫자 줄을 글자 밑선(baseline) 맞춤으로 묶고, 점은 네모 대신 마침표 글자로 "2026. 9" 제자리에. 화살표는 36px 누르는 칸 안에 30px 네모 + 가운데 꺾쇠(메인 화면 좌우버튼과 같은 모양). gif 가 그대로 남은 경우(codeButton 이 안 돌면)도 img 22px 높이로 같은 줄에 선다. */ .conWrap_today .recBook_cal .con .cal_selectY { width:auto !important; height:auto !important; padding:8px 0 10px !important; display:flex; justify-content:center; align-items:center; gap:8px; } .conWrap_today .recBook_cal .con .cal_year { float:none !important; display:flex !important; align-items:center; width:auto !important; height:36px !important; margin:0 !important; padding:0 4px !important; line-height:normal !important; } .conWrap_today .recBook_cal .con .cal_year > span { display:flex !important; align-items:baseline; position:relative; top:-1px; white-space:nowrap; } /* 숫자 글자 몸통이 줄 가운데보다 1px 아래라 화살표 꺾쇠 높이에 맞춘다 */ .conWrap_today .recBook_cal .con .cal_year img { height:22px; width:auto; } .conWrap_today .recBook_cal .con .cal_year .cbtn2 { display:block !important; float:none !important; position:static !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; margin:0 1px !important; padding:0 !important; font-size:21px !important; font-weight:bold !important; line-height:26px !important; letter-spacing:0 !important; color:#9a7a2c !important; vertical-align:baseline !important; overflow:visible !important; } .conWrap_today .recBook_cal .con .cal_year .cbtn2-n { margin:0 7px 0 0 !important; } .conWrap_today .recBook_cal .con .cal_year .cbtn2-n > i { display:none !important; } .conWrap_today .recBook_cal .con .cal_year .cbtn2-n:before { content:'.'; } .conWrap_today .recBook_cal .con p.btn_arrow { float:none !important; flex:0 0 auto; width:36px !important; height:36px !important; margin:0 !important; padding:0 !important; } .conWrap_today .recBook_cal .con p.btn_arrow a { display:flex !important; align-items:center; justify-content:center; width:36px; height:36px; -webkit-tap-highlight-color:rgba(139,111,71,.15); } .conWrap_today .recBook_cal .con p.btn_arrow .cbtn-i { position:relative !important; display:block !important; width:30px !important; height:30px !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; border:1px solid #d9cfbf !important; border-radius:4px !important; background:#fff !important; box-sizing:border-box !important; color:transparent !important; font-size:0 !important; line-height:0 !important; overflow:visible !important; } .conWrap_today .recBook_cal .con p.btn_arrow .cbtn-i:before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border:solid #8b6f47; border-width:2px 2px 0 0; box-sizing:border-box; } .conWrap_today .recBook_cal .con p.btn_arrow .cbtn-i-next:before { -webkit-transform:translate(-76%,-50%) rotate(45deg); transform:translate(-76%,-50%) rotate(45deg); } .conWrap_today .recBook_cal .con p.btn_arrow .cbtn-i-prev:before { -webkit-transform:translate(-24%,-50%) rotate(-135deg); transform:translate(-24%,-50%) rotate(-135deg); } .conWrap_today .recBook_cal .con p.btn_arrow .cbtn-i .cbtn-chev { display:none !important; } .conWrap_today .recBook_cal .con p.btn_arrow a:active .cbtn-i { background:#f6f3ee !important; } .conWrap_today .recBook_cal .con .sDate { display:none !important; } .conWrap_today .recBook_cal.rsp-flow-on table { display:none !important; } /* 커버플로 롤링 (responsive.js todayRail) : 위 날짜 / 가운데 표지 겹쳐 쌓기 / 아래 제목. 카드 크기·위치·겹침·흐림은 JS 가 인라인으로 넣는다. 여기는 모양만. */ .rspFlow { position:relative; margin:6px -10px 0; padding:16px 0 18px; background:#f6f3ee; border-top:1px solid #e3ddd2; border-bottom:1px solid #e3ddd2; text-align:center; overflow:hidden; } /* 날짜칸 = 일력 머리 (2026-09-29 사용자 그림대로 다시). 그림 파일 없이 CSS 로만 그린다. 맨 위 짙은 바인더 바(링 구멍 2개, 표지보다 좌우 2px 넓게) + 흰 날짜 띠 한 줄 "2026. 9. 6 일"(요일만 색). 큰 숫자·겹친 종이 단면은 없다. 띠 아랫변 = 가운데 표지 윗변 -> 일력 한 장이 곧 책 표지인 한 덩어리. 폭·자리는 JS(dock) 가, 끌기·넘기기 중 이동·축소와 z-index(활성 표지 +1)는 JS(follow) 가 넣는다. z-index 를 표지 바로 위로만 두어, 더 가운데 가까운 옆 책·좌우 버튼(2000)·하단바(1100) 밑으로 간다. */ .rspFlow .rfDate { position:absolute; left:0; right:0; top:0; z-index:1001; height:0; margin:0 !important; padding:0; line-height:0; font-size:0; pointer-events:none; } /* 카드 위에서 시작한 스와이프도 롤링에 전달 */ .rspFlow .rfCal { position:absolute; left:50%; top:0; display:block; width:200px; margin-left:-100px; text-align:center; -webkit-transform-origin:50% 100%; transform-origin:50% 100%; box-shadow:0 -3px 10px -3px rgba(40,28,15,.32); } .rspFlow .rfCalTop { position:relative; z-index:1; display:block; height:22px; margin:0 -2px; border-radius:3px 3px 1px 1px; background:#2b221c; background:-webkit-linear-gradient(top,#3e332b,#211a15); background:linear-gradient(to bottom,#3e332b,#211a15); box-shadow:0 1px 1px rgba(0,0,0,.28); } .rspFlow .rfCalTop:before, .rspFlow .rfCalTop:after { content:''; position:absolute; top:5px; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; box-sizing:border-box; background:#f5f1eb; border:2px solid #5d544c; box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px #140f0b; } .rspFlow .rfCalTop:before { left:27%; } .rspFlow .rfCalTop:after { left:70%; } .rspFlow .rfCalBody { position:relative; display:block; height:30px; overflow:hidden; background:#fff; background:-webkit-linear-gradient(top,#fff,#fcfaf6); background:linear-gradient(to bottom,#fff,#fcfaf6); color:#7a6a58; font-family:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif; font-size:20px; line-height:28px; letter-spacing:-.2px; white-space:nowrap; box-shadow:inset 1px 0 0 rgba(60,45,20,.07), inset -1px 0 0 rgba(60,45,20,.07); } /* 글자 몸통이 띠 가운데 오게 줄높이 28 */ .rspFlow .rfCalBody b, .rspFlow .rfTear b { font-weight:normal; } .rspFlow .rfCal.sun .rfCalDow { color:#d0304b; } /* 일요일 : 요일만 빨강 */ .rspFlow .rfCal.sat .rfCalDow { color:#2f67c0; } /* 토요일 : 요일만 파랑 */ /* 오늘 : 날짜 앞에 작은 금색 점 */ .rspFlow .rfDate.today .rfCalYm:before, .rspFlow .rfTear.wasToday .rfCalYm:before { content:''; display:inline-block; position:relative; top:-.14em; width:6px; height:6px; margin:0 5px 0 0; border-radius:50%; background:#c9a24e; vertical-align:middle; } /* ---- 종이 뜯기 : setActive() 가 헌 날짜 띠(한 장)를 .rfTearBox 에 옛 머리 자리·폭·변형 그대로 잠깐 얹고, 거기서 뜯겨 떨어진다. 머리는 새 활성 표지로 옮겨 가 새 날짜 띠가 살짝 떠오르듯 드러난다. 참고 영상(사용자 요청) : 일력 한 장이 제본선에서 뜯겨 떨어지는 모션. 찢긴 자리는 clip-path 톱니, 떨어질 때 한쪽이 먼저 떨어지듯 기울며 흐려진다. 표지들보다 위(1050), 하단바(1100) 밑. */ .rspFlow .rfTearBox { position:absolute; left:50%; top:0; z-index:1050; display:block; width:200px; margin-left:-100px; height:52px; -webkit-transform-origin:50% 100%; transform-origin:50% 100%; pointer-events:none; } .rspFlow .rfTear { position:absolute; left:0; right:0; top:22px; z-index:4; display:block; height:30px; overflow:hidden; background:#fff; text-align:center; color:#7a6a58; font-family:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif; font-size:20px; line-height:28px; letter-spacing:-.2px; white-space:nowrap; box-shadow:0 3px 7px rgba(0,0,0,.22); -webkit-clip-path:polygon(0 12%, 5% 2%, 10% 13%, 15% 3%, 20% 14%, 25% 3%, 30% 13%, 35% 2%, 40% 12%, 45% 3%, 50% 14%, 55% 2%, 60% 13%, 65% 3%, 70% 14%, 75% 2%, 80% 13%, 85% 3%, 90% 13%, 95% 2%, 100% 12%, 100% 100%, 0 100%); clip-path:polygon(0 12%, 5% 2%, 10% 13%, 15% 3%, 20% 14%, 25% 3%, 30% 13%, 35% 2%, 40% 12%, 45% 3%, 50% 14%, 55% 2%, 60% 13%, 65% 3%, 70% 14%, 75% 2%, 80% 13%, 85% 3%, 90% 13%, 95% 2%, 100% 12%, 100% 100%, 0 100%); -webkit-transform-origin:18% 0; transform-origin:18% 0; pointer-events:none; } .rspFlow .rfTear.back { -webkit-transform-origin:82% 0; transform-origin:82% 0; } .rspFlow .rfTear.wasSun .rfCalDow { color:#d0304b; } .rspFlow .rfTear.wasSat .rfCalDow { color:#2f67c0; } /* 뜯긴 자국 : 제본선 바로 아래 남은 종이 조각 */ .rspFlow .rfCal.tear .rfCalBody:before { content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:2; background:-webkit-repeating-linear-gradient(135deg,#fff 0,#fff 3px,#efe9dd 3px,#efe9dd 6px); background:repeating-linear-gradient(135deg,#fff 0,#fff 3px,#efe9dd 3px,#efe9dd 6px); opacity:.9; } @-webkit-keyframes rfTearOff { 0% { -webkit-transform:translate3d(0,0,0) rotate(0deg); opacity:1; } 16% { -webkit-transform:translate3d(0,-3px,0) rotate(-3deg); opacity:1; } 100% { -webkit-transform:translate3d(-10%,260%,0) rotate(-14deg); opacity:0; } } @keyframes rfTearOff { 0% { transform:translate3d(0,0,0) rotate(0deg); opacity:1; } 16% { transform:translate3d(0,-3px,0) rotate(-3deg); opacity:1; } 100% { transform:translate3d(-10%,260%,0) rotate(-14deg); opacity:0; } } @-webkit-keyframes rfTearOffBack { 0% { -webkit-transform:translate3d(0,0,0) rotate(0deg); opacity:1; } 16% { -webkit-transform:translate3d(0,-3px,0) rotate(3deg); opacity:1; } 100% { -webkit-transform:translate3d(10%,260%,0) rotate(14deg); opacity:0; } } @keyframes rfTearOffBack { 0% { transform:translate3d(0,0,0) rotate(0deg); opacity:1; } 16% { transform:translate3d(0,-3px,0) rotate(3deg); opacity:1; } 100% { transform:translate3d(10%,260%,0) rotate(14deg); opacity:0; } } .rspFlow .rfTear { -webkit-animation:rfTearOff .42s cubic-bezier(.32,.05,.5,1) forwards; animation:rfTearOff .42s cubic-bezier(.32,.05,.5,1) forwards; } .rspFlow .rfTear.back { -webkit-animation-name:rfTearOffBack; animation-name:rfTearOffBack; } /* 새 날짜 띠가 드러나는 것 : 투명도만(자리를 움직이면 표지와 1px 라도 어긋나 보인다) */ @-webkit-keyframes rfShow { 0% { opacity:.3; } 100% { opacity:1; } } @keyframes rfShow { 0% { opacity:.3; } 100% { opacity:1; } } /* 머리가 새 표지로 옮겨 갈 때 한 번 스르르 (투명도만 : 자리·축소는 JS 인라인 transform 이 맡는다) */ @-webkit-keyframes rfFade { 0% { opacity:.5; } 100% { opacity:1; } } @keyframes rfFade { 0% { opacity:.5; } 100% { opacity:1; } } .rspFlow .rfCal.tear { -webkit-animation:rfFade .22s ease-out; animation:rfFade .22s ease-out; } .rspFlow .rfCal.tear .rfCalBody { -webkit-animation:rfShow .3s ease-out; animation:rfShow .3s ease-out; } @media (prefers-reduced-motion: reduce) { .rspFlow .rfTearBox, .rspFlow .rfTear { display:none !important; } .rspFlow .rfCal.tear, .rspFlow .rfCal.tear .rfCalBody { -webkit-animation:none !important; animation:none !important; } .rspFlow .rfCal.tear .rfCalBody:before { display:none !important; } } .rspFlow .rfStage { position:relative; height:318px; overflow:hidden; touch-action:pan-y; -ms-touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); } .rspFlow .rfCard { position:absolute; left:50%; top:16px; width:180px; height:270px; margin-left:-90px; display:flex; align-items:center; justify-content:center; pointer-events:none; text-decoration:none !important; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-tap-highlight-color:rgba(0,0,0,0); } .rspFlow .rfImg { position:relative; display:block; width:180px; height:261px; overflow:hidden; pointer-events:auto; cursor:pointer; background:#ebe5da; box-shadow:0 8px 18px rgba(60,45,20,.28); } .rspFlow .rfImg img { display:block; width:100% !important; height:100% !important; margin:0; border:0; -webkit-user-drag:none; } .rspFlow .rfVeil { position:absolute; left:0; top:0; right:0; bottom:0; background:#f6f3ee; opacity:0; pointer-events:none; } .rspFlow .rfCard.on .rfImg { box-shadow:0 8px 20px rgba(60,45,20,.34); } /* 위로 12px·아래로 28px 까지 번진다 : JS padT(16)/padB(32) 안에 들어가야 안 잘린다 */ .rspFlow.rfDragging .rfImg { cursor:grabbing; cursor:-webkit-grabbing; } .rspFlow .rfCard:focus { outline:none; } .rspFlow .rfCard.on:focus-visible .rfImg { outline:2px solid #786547; outline-offset:2px; } .rspFlow .rfBtn { position:absolute; top:129px; z-index:2000; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(110,105,98,.42); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.12); -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:rgba(0,0,0,0); } .rspFlow .rfBtn.prev { left:8px; } .rspFlow .rfBtn.next { right:8px; } .rspFlow .rfBtn i { position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -3px; border-left:2px solid #fff; border-bottom:2px solid #fff; -webkit-transform:rotate(45deg); transform:rotate(45deg); } .rspFlow .rfBtn.next i { margin-left:-7px; -webkit-transform:rotate(-135deg); transform:rotate(-135deg); } .rspFlow .rfBtn:active { background:rgba(93,74,47,.6); } .rspFlow .rfBtn[disabled] { opacity:.35; cursor:default; } .rspFlow .rfTit { margin:2px 0 0 !important; padding:0 24px; font-size:16px; font-weight:bold; line-height:22px; max-height:44px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; } .rspFlow .rfTit a { color:#222 !important; text-decoration:none !important; } .rspFlowEmpty { margin:6px -10px 0; padding:34px 16px !important; background:#f6f3ee; border-top:1px solid #e3ddd2; border-bottom:1px solid #e3ddd2; text-align:center; color:#8b6f47; font-size:14px; } /* ---------- 상품 상세 : 발자취 / 탭 바꿔치기 / 리뷰 iframe / 하단바 글자 (2026-09-17) ---------- */ /* (1) 이 책의 발자취 : [배지] [글] 두 칸. 글은 배지 오른쪽 선에 맞춰 여러 줄로 줄바꿈, 배지-글 10px, 행 사이 10px. dt/dd 짝이 한 줄에 같이 흘러가던 flex 를 격자로 바꾼다 (dt 는 늘 1칸, dd 는 늘 2칸). */ .p_bookInfo .bookInfo_subCon > dl { display:grid !important; grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:10px; align-items:start; width:auto !important; margin:12px 0 0 !important; overflow:visible !important; } .p_bookInfo .bookInfo_subCon > dl > dt { grid-column:1; float:none !important; clear:none !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; line-height:20px; white-space:nowrap; } .p_bookInfo .bookInfo_subCon > dl > dd { grid-column:2; float:none !important; width:auto !important; min-width:0; margin:0 !important; padding:0 !important; line-height:20px !important; word-break:keep-all !important; overflow-wrap:anywhere; } .p_bookInfo .bookInfo_subCon > dl > dt img, .p_bookInfo .bookInfo_subCon > dl > dt .cbtn-f { display:block; margin:0 !important; } .p_bookInfo .bookInfo_subCon > dl > dd .t_gr { margin:0 2px; } /* (2) 탭(책 정보 / 독자리뷰) 바꿔치기 중 : 옛 내용을 흐리게 + 기다리는 표시 (responsive.js detailTabs) 기다리는 표시는 화면 한가운데에 띄운다. 탭 바 바로 아래에 두면 그 자리의 앵커 칩 줄(분야/발자취/책소개...) 글자를 가렸다 */ .p_bookInfo #conBig .w745.rsp-tabloading { opacity:.45; pointer-events:none; transition:opacity .15s; } .p_bookInfo .dtWrap.rsp-tabbusy:after, .p_bookInfo ul.detailtab.rsp-tabbusy:after { content:""; position:fixed; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; box-sizing:border-box; border:3px solid #e3ddd2; border-top-color:#786547; border-radius:50%; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.18); animation:rspDtSpin .7s linear infinite; z-index:1000; } @keyframes rspDtSpin { to { transform:rotate(360deg); } } /* (2-1) 분류 경로(#conLocation) 는 스크립트가 늦게 채운다. 채워지는 순간 아래 내용이 22px 밀려 내려가 (탭을 눌러 바꾼 직후면 탭 바도 같이 밀린다) -> 상세 페이지에서는 자리를 미리 잡아 둔다. :has 를 모르는 옛 브라우저는 이 규칙만 무시한다(지금과 같은 동작). 경로는 한 줄 고정(white-space:nowrap)이라 높이가 늘 같다 */ #conLocation:has(~ .p_bookInfo) { min-height:31px; box-sizing:border-box; } /* (3) 상세 안 iframe(리뷰/태그/테마/묶음) 은 화면 폭에 맞춘다 : 가로 스크롤 상자를 만들지 않는다. detail.css 의 .iframe_review2 {width:724px}, #iframe_tag width="730" 이 모바일에서 섹션 전체를 가로 스크롤로 만들던 원인 */ .p_bookInfo #conBig iframe.iframe_review, .p_bookInfo #conBig iframe.iframe_review2, .p_bookInfo #conBig iframe.iframe_package, .p_bookInfo #conBig iframe#iframe_tag, .p_bookInfo #conBig iframe#iframe_theme, .p_bookInfo #conBig iframe#frame_page4 { display:block; width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box; } .p_bookInfo #conBig .rsp-scrollp { overflow-x:visible !important; } /* 주소가 비어 있는 iframe(페이퍼/다음뷰 등 죽은 서비스) 은 빈 칸만 차지하므로 숨긴다. 스크립트가 src 를 넣으면 바로 보인다 */ .p_bookInfo #conBig iframe[src=""], .p_bookInfo #conBig iframe:not([src]) { display:none !important; } .p_bookInfo #conBig .bookInfo_subCon > iframe#simpleReview { margin-top:4px !important; } /* (4) 하단 고정바 : 북카트 / 바로구매 / 위시리스트 로 짧게. 코드버튼 span 의 원래 글자는 숨기고 CSS 로 짧은 글자를 쓴다 (코드버튼이 늦게 그려지거나 다시 그려져도 항상 같은 글자) */ .p_bookInfo .btnW .cbtn[data-src*="btn_bookCart"], .p_bookInfo .btnW .cbtn[data-src*="btn_dBuy"], .p_bookInfo .btnW .cbtn[data-src*="btn_wishlist"] { font-size:0 !important; letter-spacing:0 !important; } .p_bookInfo .btnW .cbtn[data-src*="btn_bookCart"]:before, .p_bookInfo .btnW .cbtn[data-src*="btn_dBuy"]:before, .p_bookInfo .btnW .cbtn[data-src*="btn_wishlist"]:before { font-size:15px; letter-spacing:-0.3px; white-space:nowrap; } .p_bookInfo .btnW .cbtn[data-src*="btn_bookCart"]:before { content:"\BD81\CE74\D2B8"; } /* 북카트 */ .p_bookInfo .btnW .cbtn[data-src*="btn_dBuy"]:before { content:"\BC14\B85C\AD6C\B9E4"; } /* 바로구매 */ .p_bookInfo .btnW .cbtn[data-src*="btn_wishlist"]:before { content:"\C704\C2DC\B9AC\C2A4\D2B8"; } /* 위시리스트 */ /* 코드버튼이 돌지 않아 gif 가 그대로인 경우의 대타 글자 (responsive.js barLabels 가 만든다) */ .p_bookInfo .btnW .rsp-btnlbl { display:block; width:100%; height:44px; line-height:44px; box-sizing:border-box; border-radius:4px; text-align:center; font-size:15px; letter-spacing:-0.3px; font-weight:bold; color:#fff; background:#8b6f47; } .p_bookInfo .btnW > .rsp-btnlbl { flex:1 1 0; min-width:0; margin:0 3px; } .p_bookInfo .btnW .rsp-lbl-buy { background:#5d4a2f; } .p_bookInfo .btnW .rsp-lbl-wish { background:#fff; color:#5d4a2f; border:1px solid #c9bda6; line-height:42px; } /* (5) 태블릿(600~1023) : 별점/리뷰수 상자(.etcInfo)가 100% + 좌우 여백 10px 로 오른쪽 10px 넘치던 것 */ @media screen and (min-width: 600px) { #contentWrap .p_bookInfo .bookInfoWrap .etcInfo { flex:0 0 auto !important; width:auto !important; max-width:none; box-sizing:border-box; } #contentWrap .p_bookInfo .bookInfoWrap > div.overflow > .etcInfo, #contentWrap .p_bookInfo .bookInfoWrap > div[cclass] > .etcInfo { flex-basis:calc(100% - 20px) !important; } } /* ---------- 고객센터 (/front/help/*.do : .conWrap.p_center) ----------------------------- - 좌측 메뉴(#conSmall, 칩 줄로 1,250px 가로스크롤)는 숨기고 responsive.js 가 만든 3열 메뉴판(#rspHelpNav)으로 대신 - FAQ 검색 : 분류 select 한 줄, 검색어+검색 버튼 한 줄, 둘 다 좌우 여백까지 꽉 차게. 파란 박스 = center.css 의 ".searchTop .search2 {background:blue}" (개발 때 남은 디버그 색). PC 는 안의 p 가 float 라 높이 0 이어서 안 보이고, 모바일 공통규칙(padding:8px)이 높이를 줘서 드러났던 것 - FAQ / 공지 목록 표(boardList01) -> 목록형. 답 열기/닫기는 사이트 JS(openContent)가 div.reply 의 style.display 를 바꾸므로 .reply 의 display 는 절대 건드리지 않는다 - 1:1 상담 서식(boardList07) : 분류에 따라 사이트 JS 가 table 의 style.display 를 바꾸므로 table display 에 !important 금지 - PC 에서 usNone 으로 숨긴 것(.conBig2 반품/교환신청 배너·1:1상담 박스 등)은 모바일에서도 숨긴다 (공통 규칙 ".conBig2 {display:block !important}" 가 되살려서 PC 크기 그대로 보이던 것) */ .rsp-help .conWrap.p_center { overflow:visible !important; } .rsp-help .conWrap.p_center > #rspHelpNav ~ #conSmall { display:none !important; } /* 메뉴판이 실제로 만들어졌을 때만 */ .rsp-help .conWrap.p_center .usNone, .rsp-help .conWrap.p_center .conBig2.usNone { display:none !important; } .rsp-help .conWrap.p_center #conBig { padding:0 10px !important; overflow:visible !important; } .rsp-help .conWrap.p_center #conBig .conBig1 { position:relative; padding:18px 0 0 !important; } /* #conBig 안에서 좌우 여백이 두 번 들어가던 것 (위 18px 은 제목과 '더보기' 줄 맞춤) */ /* 메뉴판 (responsive.js 생성) */ #rspHelpNav { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; margin:2px 10px 12px; border:1px solid #e3ddd2; border-radius:8px; overflow:hidden; background:#e3ddd2; } #rspHelpNav a { display:flex; align-items:center; justify-content:center; min-height:42px; padding:4px 2px; background:#fff; color:#5d4a2f !important; font:normal 13px Dotum,sans-serif; letter-spacing:-0.3px; line-height:1.25; text-align:center; text-decoration:none !important; word-break:keep-all; box-sizing:border-box; } #rspHelpNav a.on { background:#5d4a2f; color:#fff !important; font-weight:bold; } /* FAQ 검색 상자 (helpSearchTop.jsp) */ .rsp-help .p_center #conBig > .boxShadowBr750 { width:auto !important; margin:0 0 6px !important; padding:0 !important; border:0 !important; background:none !important; } .rsp-help .p_center #conBig > .boxShadowBr750 > .con { display:block !important; width:auto !important; margin:0 !important; padding:12px !important; border:1px solid #e3ddd2 !important; border-radius:8px; background:#f6f3ee !important; box-sizing:border-box; } .rsp-help .p_center .searchTop { width:auto !important; margin:0 !important; padding:0 !important; } .rsp-help .p_center .searchTop .rspHelpQ { display:block; margin:0 0 10px !important; font:bold 16px Dotum,sans-serif; color:#5d4a2f; } .rsp-help .p_center .searchTop .search2 { width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; background:none !important; } .rsp-help .p_center .searchTop .search2 form { display:flex; flex-wrap:wrap; gap:8px; width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box; } .rsp-help .p_center .searchTop .search2 p { float:none !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; min-width:0; } .rsp-help .p_center .searchTop .search2 p.select { flex:1 1 100%; } /* select 크기는 .rspNative 가 붙은 뒤에만 준다 : select.js(1:1 상담)가 가짜 select 를 만들 때 원래 select 의 크기를 재서 그대로 쓰므로, 그 전에 100%/42px 을 주면 창을 PC 폭으로 넓혔을 때 가짜 select 가 커진 채로 남는다 */ .rsp-help .p_center .searchTop .search2 p.select select.rspNative { width:100% !important; max-width:none !important; height:42px !important; margin:0 !important; padding:0 8px !important; border:1px solid #d6cdbd !important; border-radius:6px; background-color:#fff !important; color:#333; font-size:16px !important; box-sizing:border-box; } .rsp-help .p_center .searchTop .search2 p:not(.select) { flex:1 1 100%; display:flex !important; align-items:stretch; gap:6px; } .rsp-help .p_center .searchTop .search2 input[name=title] { flex:1 1 auto; display:block; width:auto !important; min-width:0; max-width:none !important; height:42px !important; margin:0 !important; padding:0 12px !important; border:1px solid #d6cdbd !important; border-radius:6px; background:#fff !important; color:#333; font-size:16px !important; box-sizing:border-box; -webkit-appearance:none; } .rsp-help .p_center .searchTop .search2 input[name=title]:focus { border-color:#8b6f47 !important; outline:0; } .rsp-help .p_center .searchTop .search2 p:not(.select) > a { flex:0 0 auto; display:block; text-decoration:none !important; } .rsp-help .p_center .searchTop .search2 p:not(.select) > a .cbtn { display:block !important; width:76px !important; min-width:0 !important; height:42px !important; line-height:42px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:6px !important; background:#8b6f47 !important; color:#fff !important; font-size:15px !important; font-weight:bold !important; letter-spacing:0 !important; text-align:center; box-sizing:border-box; } .rsp-help .p_center .searchTop .search2 p:not(.select) > a img { display:block; height:42px !important; width:auto !important; } .rsp-help .p_center .searchTop .keyword { display:none !important; } /* 제목 줄 (이미지 제목 + 설명) */ .rsp-help .p_center #conBig .titInfo { width:auto !important; height:auto !important; margin:16px 0 0 !important; padding:0 0 4px !important; border:0 !important; overflow:hidden; } .rsp-help .p_center #conBig .titInfo h3 { float:none !important; padding:0 !important; margin:0 !important; line-height:0; } .rsp-help .p_center #conBig .titInfo p { float:none !important; height:auto !important; margin:0 !important; padding:6px 0 0 !important; background:none !important; line-height:1.3; } .rsp-help .p_center #conBig .titInfo img { max-width:100%; height:auto; } /* 고객센터 홈 : FAQ TOP 10 */ .rsp-help .p_center .conBig1 .tabWrap { width:auto !important; margin:0 !important; overflow:visible !important; } .rsp-help .p_center .conBig1 ul.faqTab { width:auto !important; margin:0 !important; border-bottom:2px solid #5d4a2f !important; overflow:visible !important; } .rsp-help .p_center .conBig1 ul.faqTab li { width:auto !important; } .rsp-help .p_center .conBig1 ul.faqTab li a { padding:0 0 8px !important; color:#222 !important; font:bold 16px Dotum,sans-serif !important; border:0 !important; margin:0 !important; } .rsp-help .p_center .conBig1 > p.fl_clear { position:absolute; top:18px; right:0; width:auto !important; height:20px; margin:0 !important; padding:0 !important; line-height:20px !important; } .rsp-help .p_center .conBig1 > p.fl_clear span { display:block; margin:0 !important; } .rsp-help .p_center .conBig1 a.more, .rsp-help .p_center .box_faqCate02 h3 a.more { display:block; padding:0 0 0 8px; font-size:0 !important; line-height:20px !important; color:#8b6f47 !important; text-decoration:none !important; } .rsp-help .p_center .conBig1 a.more:after, .rsp-help .p_center .box_faqCate02 h3 a.more:after { content:"\B354\BCF4\AE30 \203A"; font:normal 12px/20px Dotum,sans-serif; } /* 더보기 > */ .rsp-help .p_center ol.faqList { width:auto !important; margin:0 !important; padding:0 !important; counter-reset:rspfaq; list-style:none; } .rsp-help .p_center ol.faqList li { display:flex !important; align-items:center; width:auto !important; min-height:46px; margin:0 !important; padding:0 !important; border-bottom:1px solid #eee7dc !important; overflow:visible !important; } .rsp-help .p_center ol.faqList li p { display:block !important; float:none !important; width:auto !important; margin:0 !important; padding:0 !important; } .rsp-help .p_center ol.faqList li p.no { flex:0 0 30px; text-align:left !important; counter-increment:rspfaq; } .rsp-help .p_center ol.faqList li p.no img { display:none !important; } .rsp-help .p_center ol.faqList li p.no:before { content:counter(rspfaq); display:inline-block; min-width:20px; height:20px; padding:0 2px; border-radius:4px; background:#efe9df; color:#8b6f47; font:bold 11px/20px Tahoma,Arial,sans-serif; text-align:center; box-sizing:border-box; } .rsp-help .p_center ol.faqList li:nth-child(-n+3) p.no:before { background:#8b6f47; color:#fff; } .rsp-help .p_center ol.faqList li p.no + p { flex:1 1 auto; min-width:0; } .rsp-help .p_center ol.faqList li p.no + p a { position:relative; display:block; padding:12px 20px 12px 0; color:#222 !important; font-size:14px; line-height:1.4; text-decoration:none !important; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center ol.faqList li p.no + p a:after { content:""; position:absolute; right:6px; top:50%; width:7px; height:7px; margin-top:-4px; border-top:2px solid #c2b59c; border-right:2px solid #c2b59c; transform:rotate(45deg); } /* 고객센터 홈 : 공지사항 */ .rsp-help .p_center .conBig1 .box_faqCate02 { float:none !important; width:auto !important; height:auto !important; margin:26px 0 0 !important; padding:0 !important; background:none !important; } .rsp-help .p_center .conBig1 .box_faqCate02 h3 { position:relative; margin:0 !important; padding:0 0 8px !important; border-bottom:2px solid #5d4a2f; font-size:0 !important; line-height:0; } .rsp-help .p_center .conBig1 .box_faqCate02 h3 > img { display:none !important; } .rsp-help .p_center .conBig1 .box_faqCate02 h3:before { content:"\ACF5\C9C0\C0AC\D56D"; font:bold 16px Dotum,sans-serif; color:#222; line-height:20px; } /* 공지사항 */ .rsp-help .p_center .conBig1 .box_faqCate02 h3 .t_normal { position:absolute; right:0; top:0; line-height:20px; } .rsp-help .p_center .conBig1 .box_faqCate02 h3 a.more { position:static !important; } .rsp-help .p_center .conBig1 .box_faqCate02 ul.dotList2 { width:auto !important; margin:0 !important; padding:0 !important; } .rsp-help .p_center .conBig1 .box_faqCate02 ul.dotList2 li { width:auto !important; margin:0 !important; padding:0 !important; background:none !important; border-bottom:1px solid #eee7dc; line-height:1.4 !important; } .rsp-help .p_center .conBig1 .box_faqCate02 ul.dotList2 li p { display:block !important; } .rsp-help .p_center .conBig1 .box_faqCate02 ul.dotList2 li a { display:block; padding:12px 0; color:#333 !important; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none !important; } /* 고객센터 홈 : 전화상담 (이미지 -> 카드, responsive.js) */ .rsp-help .p_center .conBig1 .rspCallImg { display:none !important; } .rspHelpCall { display:block; clear:both; margin:26px 0 6px; padding:16px 14px 14px; border:1px solid #e3ddd2; border-radius:8px; background:#f6f3ee; text-align:center; } .rspHelpCall .rhcTit { margin:0 !important; font:bold 13px Dotum,sans-serif; color:#8b6f47; } .rspHelpCall .rhcTel { display:inline-block; margin:4px 0 2px; font:bold 26px/1.2 verdana,sans-serif; letter-spacing:0; color:#5d4a2f !important; text-decoration:none !important; } .rspHelpCall .rhcTime { margin:0 !important; font-size:12px; line-height:1.6; color:#777; } .rspHelpCall .rhcBtn { display:block; height:44px; margin:12px 0 0; border-radius:6px; background:#5d4a2f; color:#fff !important; font:bold 15px/44px Dotum,sans-serif; text-decoration:none !important; } /* FAQ 분류 (전체질문/회원/상품...) : 3열 버튼 */ .rsp-help .p_center .grayBox2 { width:auto !important; margin:10px 0 0 !important; padding:0 !important; border:0 !important; background:none !important; } .rsp-help .p_center .faqsubList, .rsp-help .p_center .faqsubList ul { width:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; } .rsp-help .p_center .faqsubList ul { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; } .rsp-help .p_center .faqsubList li { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; line-height:1.25 !important; } .rsp-help .p_center #conBig .faqsubList li p { display:block !important; height:100%; } .rsp-help .p_center .faqsubList li a { display:flex; align-items:center; justify-content:center; height:100%; min-height:40px; padding:4px; border:1px solid #e3ddd2; border-radius:6px; background:#fff; color:#5d4a2f !important; font-size:13px; letter-spacing:-0.3px; text-align:center; text-decoration:none !important; word-break:keep-all; box-sizing:border-box; } .rsp-help .p_center .faqsubList li.on a { background:#5d4a2f; border-color:#5d4a2f; color:#fff !important; font-weight:bold; } .rsp-help .p_center ul.detailtab_sub { display:flex; flex-wrap:nowrap; gap:6px; width:auto !important; margin:10px 0 0 !important; padding:0 !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; } .rsp-help .p_center ul.detailtab_sub::-webkit-scrollbar { display:none; } .rsp-help .p_center ul.detailtab_sub li { flex:0 0 auto; float:none !important; width:auto !important; margin:0 !important; padding:0 !important; background:none !important; } .rsp-help .p_center ul.detailtab_sub li a { display:block; padding:6px 12px; border:1px solid #e3ddd2; border-radius:15px; background:#f6f3ee; color:#5d4a2f !important; font-size:12px; white-space:nowrap; text-decoration:none !important; } .rsp-help .p_center ul.detailtab_sub li.on a { background:#8b6f47; border-color:#8b6f47; color:#fff !important; } .rsp-help .p_center .faqResult { margin:0 !important; padding:14px 0 0 !important; font-size:13px; line-height:1.5; color:#555; word-break:keep-all; } /* 목록 표 공통 (FAQ / 공지사항) : 표 -> 목록 선택자는 모두 자식 결합자(> tbody > tr > td)로 쓴다 : 자손 선택자로 쓰면 FAQ 답·공지 본문 속 표까지 목록형으로 무너진다 */ .rsp-help .p_center table.boardList01 { display:block; width:auto !important; margin:14px 0 0 !important; border-top:2px solid #5d4a2f; } .rsp-help .p_center table.boardList01 > colgroup, .rsp-help .p_center table.boardList01 > thead { display:none !important; } .rsp-help .p_center table.boardList01 > tbody { display:block; width:auto !important; } .rsp-help .p_center table.boardList01 > tbody > tr { display:flex; flex-wrap:wrap; align-items:center; position:relative; width:auto !important; } .rsp-help .p_center table.boardList01 > tbody > tr > td { display:block; width:auto !important; min-width:0; height:auto !important; padding:0 !important; border:0 !important; background:none; text-align:left !important; font-size:13px; } .rsp-help .p_center table.boardList01 > tbody > tr > td.line, .rsp-help .p_center table.boardList01 > tbody > tr > td:empty { display:none !important; } .rsp-help .p_center table.boardList01 > tbody > tr > td[colspan="5"]:not(.reply_con) { flex:1 1 100%; padding:30px 0 !important; text-align:center !important; color:#999; border-bottom:1px solid #eee7dc !important; } /* FAQ : 분류(작게) / Q 질문 / 펼치면 A 답 */ .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td[colspan="2"]:first-child { display:none !important; } /* 번호 */ .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td[colspan="2"]:first-child + td { flex:1 1 100%; padding:12px 34px 0 0 !important; font-size:11px; line-height:1.4; color:#8b6f47; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td.td_L20 { flex:1 1 100%; padding:3px 34px 12px 0 !important; border-bottom:1px solid #eee7dc !important; font-size:14px; line-height:1.45; color:#222; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td.td_L20:before { content:"Q"; display:inline-block; margin-right:6px; font:bold 15px Arial,Helvetica,sans-serif; color:#8b6f47; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td.td_L20 > a { color:#222 !important; text-decoration:none !important; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td.td_L20:after { content:""; position:absolute; right:10px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid #c2b59c; border-bottom:2px solid #c2b59c; transform:rotate(45deg); transition:transform .2s; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr.rsp-fq { cursor:pointer; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr.rsp-open > td.td_L20 { border-bottom-color:transparent !important; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr.rsp-open > td.td_L20 > a { color:#5d4a2f !important; font-weight:bold; } .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr.rsp-open > td.td_L20:after { transform:rotate(-135deg); margin-top:-2px; } /* 답 칸 : flex 항목의 기본 min-width:auto 때문에 답 속 끊기지 않는 긴 글자('AR,AZ,CA,CO,...' 같은 주 목록) 폭까지 칸이 늘어나 화면 밖으로 나가던 것 -> min-width:0 + 아무 데서나 줄바꿈 */ .rsp-help .p_center form[name=faqList] table.boardList01 > tbody > tr > td.reply_con { flex:1 1 100%; min-width:0; max-width:100%; } .rsp-help .p_center table.boardList01 td.reply_con > div.reply { position:relative; width:auto !important; max-width:100%; margin:0 !important; padding:14px 14px 16px 34px !important; border:0 !important; border-bottom:1px solid #e3ddd2 !important; border-radius:0; background:#f6f3ee !important; color:#555 !important; font-size:13px; line-height:1.7; text-align:left !important; word-break:keep-all; overflow-wrap:break-word; overflow-wrap:anywhere; overflow-x:auto; box-sizing:border-box; } .rsp-help .p_center table.boardList01 td.reply_con > div.reply * { white-space:normal !important; overflow-wrap:anywhere; } .rsp-help .p_center table.boardList01 td.reply_con > div.reply:before { content:"A"; position:absolute; left:13px; top:14px; font:bold 15px/22px Arial,Helvetica,sans-serif; color:#5d4a2f; } .rsp-help .p_center table.boardList01 td.reply_con > div.reply img { max-width:100% !important; height:auto !important; } .rsp-help .p_center table.boardList01 td.reply_con > div.reply .rspLbl { display:none; } /* '내용:' 머리와 끝 따옴표 (responsive.js) */ .rsp-help .p_center table.boardList01 td.reply_con > div.reply [style*="width"] { max-width:100% !important; box-sizing:border-box; } /* 공지사항 목록 : 제목 / 날짜 */ .rsp-help .p_center table.boardList01 > tbody > tr > td:first-child:not([colspan]) { display:none !important; } /* 번호 */ .rsp-help .p_center table.boardList01 > tbody > tr > td.td_L15 { flex:1 1 100%; padding:12px 0 3px !important; font-size:14px; line-height:1.45; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center table.boardList01 > tbody > tr > td.td_L15 > a { color:#222 !important; text-decoration:none !important; } .rsp-help .p_center table.boardList01 > tbody > tr > td.td_L15 ~ td:last-child { flex:1 1 100%; padding:0 0 12px !important; border-bottom:1px solid #eee7dc !important; font-size:11px; color:#999; } .rsp-help .p_center .pageBG { margin:12px 0 0 !important; text-align:center !important; } .rsp-help .p_center .pageBG .page { text-align:center; } .rsp-help .p_center .pageBG .page a, .rsp-help .p_center .pageBG .page strong { display:inline-block; min-width:32px; height:32px; line-height:32px; margin:0 1px; padding:0 !important; font-size:14px !important; text-align:center; vertical-align:middle; } /* 공지사항 상세 */ .rsp-help .p_center table.boardList06 { display:block; width:auto !important; margin:14px 0 0 !important; border-top:2px solid #5d4a2f !important; border-bottom:1px solid #e3ddd2 !important; } .rsp-help .p_center table.boardList06 > colgroup, .rsp-help .p_center table.boardList06 > tbody > tr > th { display:none !important; } .rsp-help .p_center table.boardList06 > tbody { display:block; } .rsp-help .p_center table.boardList06 > tbody > tr { display:flex; flex-wrap:wrap; } .rsp-help .p_center table.boardList06 > tbody > tr > td { display:block; flex:1 1 100%; width:auto !important; min-width:0; padding:0 !important; border:0 !important; background:none; text-align:left !important; } .rsp-help .p_center table.boardList06 > tbody > tr:first-child > td:first-of-type { padding:14px 0 4px !important; font:bold 16px/1.4 Dotum,sans-serif; color:#222; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center table.boardList06 > tbody > tr:first-child > td.tdE { padding:0 0 12px !important; border-bottom:1px solid #eee7dc !important; font-size:12px; color:#999; } .rsp-help .p_center table.boardList06 > tbody > tr > td.tdCon { padding:16px 0 20px !important; font-size:14px; line-height:1.7; color:#333; word-break:keep-all; overflow-wrap:break-word; overflow-x:auto; } .rsp-help .p_center table.boardList06 td.tdCon img { max-width:100% !important; height:auto !important; } .rsp-help .p_center table.boardList06 td.tdCon [style*="width"] { max-width:100% !important; box-sizing:border-box; } /* 공지 본문 / FAQ 답 속 표 (예: 개인정보처리방침 변경 안내의 직무·부서·이름·연락처·이메일 표) : 목록형 규칙은 위에서 자식 선택자로 막았고, 여기서는 머리글·칸 테두리를 살린 표 모양 그대로 화면 폭에 맞춘다 */ .rsp-help .p_center table.boardList06 td.tdCon table, .rsp-help .p_center table.boardList01 td.reply_con > div.reply table { display:table !important; width:100% !important; max-width:100% !important; margin:10px 0 0 !important; table-layout:auto !important; border-collapse:collapse; } .rsp-help .p_center table.boardList06 td.tdCon table col, .rsp-help .p_center table.boardList01 td.reply_con > div.reply table col { width:auto !important; } .rsp-help .p_center table.boardList06 td.tdCon table th, .rsp-help .p_center table.boardList06 td.tdCon table td, .rsp-help .p_center table.boardList01 td.reply_con > div.reply table th, .rsp-help .p_center table.boardList01 td.reply_con > div.reply table td { padding:7px 3px !important; font-size:12px !important; line-height:1.45 !important; letter-spacing:-0.3px; word-break:keep-all; overflow-wrap:anywhere; vertical-align:middle; } .rsp-help .p_center .btnR { margin:10px 0 0 !important; text-align:right; } .rsp-help .p_center .btnR .cbtn { height:34px !important; line-height:32px !important; min-width:64px !important; padding:0 14px !important; font-size:13px !important; border-radius:4px !important; } .rsp-help .p_center .viewArticle { width:auto !important; margin:16px 0 0 !important; } .rsp-help .p_center .viewArticle ul { width:auto !important; margin:0 !important; } .rsp-help .p_center .viewArticle li { display:flex !important; align-items:center; gap:10px; width:auto !important; padding:12px 10px !important; font-size:13px; } .rsp-help .p_center .viewArticle li > span { flex:0 0 auto; display:block !important; width:auto !important; padding:0 10px 0 0 !important; background:none !important; border-right:1px solid #e3ddd2; line-height:0; } .rsp-help .p_center .viewArticle li > a { flex:1 1 auto; min-width:0; color:#333 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* '찾으시는 질문이 없나요? 1:1 상담' 상자 */ .rsp-help .p_center .boxBrown745 { width:auto !important; height:auto !important; margin:22px 0 0 !important; background:none !important; } .rsp-help .p_center .boxBrown745 > .con { display:block !important; width:auto !important; padding:16px 14px !important; border:1px solid #e3ddd2; border-radius:8px; background:#faf7f2 !important; box-sizing:border-box; } .rsp-help .p_center .boxBrown745 .counsel { margin:0 !important; padding:0 !important; font-size:13px !important; line-height:1.6; color:#555; text-align:center; word-break:keep-all; } .rsp-help .p_center .boxBrown745 .counsel > a:last-child { display:block; margin:10px 0 0; text-decoration:none !important; } .rsp-help .p_center .boxBrown745 .counsel > a:last-child .cbtn { display:block !important; width:auto !important; min-width:0 !important; height:44px !important; line-height:44px !important; padding:0 !important; border:0 !important; border-radius:6px !important; background:#5d4a2f !important; color:#fff !important; font-size:15px !important; font-weight:bold !important; letter-spacing:0 !important; text-align:center; } .rsp-help .p_center .boxBrown745 .counsel > a:last-child img { display:block; margin:0 auto; } .rsp-help .p_center .faQRecmdA { padding:0 !important; text-align:left; } .rsp-help .p_center .faQRecmdA h4 { margin:0 0 6px !important; } .rsp-help .p_center .faQRecmdA ul, .rsp-help .p_center .faQRecmdA table { width:auto !important; margin:0 !important; } .rsp-help .p_center .faQRecmdA .dotList li { width:auto !important; padding:9px 0 9px 12px !important; border-bottom:1px dashed #e3ddd2; background-position:0 15px !important; font-size:13px; line-height:1.45; } /* 사이트 JS(changeRecmdA)가 table#frequent 에 다시 넣는 추천 FAQ : 표가 글자 폭만큼 줄어 점선이 반쪽만 그어지던 것 -> 블록으로 전체폭. 서버가 이미 찍은 목록과 같은 질문은 responsive.js 가 .rspDup 을 달아 숨긴다 (PC 는 원래대로 두 번 보임) */ .rsp-help .p_center .faQRecmdA table#frequent, .rsp-help .p_center .faQRecmdA table#frequent > tbody, .rsp-help .p_center .faQRecmdA table#frequent > tbody > tr, .rsp-help .p_center .faQRecmdA table#frequent > tbody > tr > td { display:block !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; } .rsp-help .p_center .faQRecmdA li.rspDup { display:none !important; } /* 이용안내 (구매가이드 등 : .conBox) */ .rsp-help .p_center ul.usedBookTab { display:flex; width:auto !important; height:auto !important; margin:14px 0 0 !important; border-bottom:2px solid #5d4a2f; overflow-x:auto; } .rsp-help .p_center ul.usedBookTab.rsp-single { display:none !important; } /* 탭이 하나뿐이면 바로 아래 제목과 같은 글자라 숨김 (responsive.js) */ .rsp-help .p_center ul.usedBookTab li { display:flex !important; flex:1 1 0; float:none !important; width:auto !important; height:auto !important; min-width:0; margin:0 !important; background:none !important; } /* center.css 의 li/p 높이 25px 고정을 풀어 두 줄 탭 글자가 잘리지 않게 */ .rsp-help .p_center ul.usedBookTab li p { display:flex !important; flex:1 1 auto; min-width:0; height:auto !important; margin:0 !important; padding:0 !important; background:none !important; } .rsp-help .p_center ul.usedBookTab li a { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-width:0; min-height:38px; padding:6px 4px !important; background:#f6f3ee; color:#5d4a2f !important; font-size:13px; line-height:1.25; letter-spacing:-0.3px; text-align:center; white-space:normal; word-break:keep-all; cursor:pointer; box-sizing:border-box; } .rsp-help .p_center ul.usedBookTab li a img { display:none !important; } .rsp-help .p_center ul.usedBookTab li a .rspTxt { display:inline !important; color:inherit !important; font-size:inherit !important; font-weight:inherit !important; letter-spacing:inherit !important; } /* 사이트 CSS 의 흐린 11px 글자색을 탭 글자색으로 */ .rsp-help .p_center ul.usedBookTab li.on a, .rsp-help .p_center ul.usedBookTab li:only-child a { background:#5d4a2f; color:#fff !important; font-weight:bold; } .rsp-help .p_center .conBox { width:auto !important; margin:0 !important; } .rsp-help .p_center .conBox h4 { margin:14px 0 8px !important; line-height:0; } .rsp-help .p_center .conBox h4 img { max-width:100%; height:auto; } .rsp-help .p_center .conBoxB { width:auto !important; padding:14px 12px 4px !important; border:1px solid #e3ddd2 !important; border-radius:8px; background:#faf7f2 !important; box-sizing:border-box; } .rsp-help .p_center .conBox .conTxt { margin:0 !important; } .rsp-help .p_center .conBox .conTxt dt { margin:16px 0 4px !important; font-size:14px; line-height:1.45; } .rsp-help .p_center .conBox .conTxt dt:first-child { margin-top:0 !important; } .rsp-help .p_center .conBox .conTxt dt:empty { display:none; } .rsp-help .p_center .conBox .conTxt dd { margin:0 0 10px !important; padding:0 !important; font-size:13px; line-height:1.65; color:#555; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center .conBox .bul1 { background-position:0 5px !important; } .rsp-help .p_center .conBox .bul2 { margin:0 0 8px !important; padding-left:12px !important; background-position:2px 8px !important; } .rsp-help .p_center .eBookInfoTit, .rsp-help .p_center .eBookInfoList { width:auto !important; max-width:100%; box-sizing:border-box; } /* key=90 테마북 안내의 고정폭 제목 */ /* key=90 제목 띠 : 745px 배경그림 + 높이 28px 고정이라 두 줄로 넘어간 글자(흰 글자)가 잘려 안 보이던 것 -> 높이 자동인 갈색 띠 */ .rsp-help .p_center h4.eBookInfoTit { height:auto !important; min-height:0 !important; margin:24px 0 0 !important; padding:9px 12px !important; border-radius:4px; background:#8b6f47 none !important; color:#fff !important; font:bold 14px/1.4 Dotum,sans-serif !important; word-break:keep-all; overflow-wrap:break-word; } /* 제휴카드 안내 (key=70 .cardInfo) : li 높이 105px 고정 + float 때문에 카드 그림이 이름·혜택 글자를 덮던 것 -> 카드 그림(왼쪽 104px) + 설명(오른쪽) 한 묶음씩 세로로 */ .rsp-help .p_center #conBig .cardInfo { margin:18px 0 0 !important; padding:0 0 4px !important; background:none !important; border-bottom:1px solid #e3ddd2; overflow:hidden; } .rsp-help .p_center #conBig .cardInfo h3 { margin:0 0 2px !important; padding:0 !important; line-height:0; } .rsp-help .p_center #conBig .cardInfo h3 img { max-width:100%; height:auto; } .rsp-help .p_center #conBig .cardInfo > div, .rsp-help .p_center #conBig .cardInfo ul.con01, .rsp-help .p_center #conBig .cardInfo ul.con01 > li { float:none !important; width:auto !important; height:auto !important; margin:0 !important; overflow:hidden; } .rsp-help .p_center #conBig .cardInfo > div, .rsp-help .p_center #conBig .cardInfo ul.con01 > li { padding:12px 0 !important; border-top:1px dashed #e3ddd2; } .rsp-help .p_center #conBig .cardInfo > p, .rsp-help .p_center #conBig .cardInfo > div > p:first-child, .rsp-help .p_center #conBig .cardInfo ul.con01 > li > p { display:block !important; float:left !important; width:104px !important; margin:0 12px 0 0 !important; padding:0 !important; font-size:11px; line-height:1.3; color:#999; } .rsp-help .p_center #conBig .cardInfo > p { margin-top:10px !important; } .rsp-help .p_center #conBig .cardInfo > p img, .rsp-help .p_center #conBig .cardInfo > div > p:first-child img, .rsp-help .p_center #conBig .cardInfo ul.con01 > li > p img { display:block; width:100% !important; height:auto !important; } .rsp-help .p_center #conBig .cardInfo dl { float:none !important; width:auto !important; margin:0 !important; overflow:hidden; } .rsp-help .p_center #conBig .cardInfo > dl { margin-top:10px !important; } .rsp-help .p_center #conBig .cardInfo dt { width:auto !important; margin:0 0 4px !important; font-size:14px; line-height:1.4; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center #conBig .cardInfo dd { width:auto !important; margin:2px 0 0 !important; font-size:12px !important; line-height:1.5 !important; word-break:keep-all; overflow-wrap:break-word; background-position:3px 7px !important; } .rsp-help .p_center #conBig .cardInfo dl + p { float:none !important; clear:both; width:auto !important; margin:10px 0 0 !important; padding:0 !important; text-align:right; } /* 최저가 / 배송품질 보상제도 (dl.compensation) */ .rsp-help .p_center #conBig > h3 { margin:4px 0 0 !important; line-height:0; } .rsp-help .p_center #conBig img[usemap] { max-width:100%; height:auto; } .rspMapBtns { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; line-height:normal; } .rspMapBtns a { flex:1 1 auto; display:block; height:42px; padding:0 14px; border-radius:6px; background:#5d4a2f; color:#fff !important; font:bold 14px/42px Dotum,sans-serif; text-align:center; text-decoration:none !important; } .rsp-help .p_center dl.compensation { width:auto !important; margin:14px 0 0 !important; border-bottom:1px solid #e9e4dc; } .rsp-help .p_center dl.compensation dt { padding:10px 6px 8px 34px !important; background-position:8px 10px !important; line-height:0; } .rsp-help .p_center dl.compensation dt img { max-width:100%; height:auto; } .rsp-help .p_center dl.compensation dd { margin:0 !important; padding:10px 4px 16px 34px !important; background-position:8px 10px !important; } .rsp-help .p_center dl.compensation dd .dotList3 { width:auto !important; } .rsp-help .p_center dl.compensation dd .dotList3 li { padding:2px 0 6px 12px !important; font-size:13px !important; line-height:1.6 !important; background-position:2px 10px !important; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center dl.compensation dd .dotList3 li p.t_br3 { padding-left:10px !important; background-position:0 9px !important; } .rsp-help .p_center dl.compensation dd .dotList3 li br { display:none; } /* 보상 금액 예시 표 : 카드로 바꾸면 2단 머리글의 뜻이 사라지므로 표 모양 그대로 폭에 맞춘다 */ .rsp-help .p_center .w725 { width:auto !important; margin:22px 0 0 !important; } .rsp-help .p_center .w725 h4 { margin:0 0 8px !important; line-height:0; } .rsp-help .p_center .w725 h4 img { max-width:100%; height:auto; } .rsp-help .p_center .w725 table.boardList04, .rsp-help .p_center .w725 table.boardList04.rsp-card { display:table !important; width:100% !important; max-width:100% !important; margin:0 !important; table-layout:fixed; border-collapse:collapse; border:0 !important; border-top:2px solid #8b6f47 !important; } .rsp-help .p_center .w725 table.rsp-card thead { display:table-header-group !important; } .rsp-help .p_center .w725 table.rsp-card tbody { display:table-row-group !important; } .rsp-help .p_center .w725 table.rsp-card tfoot { display:table-footer-group !important; } .rsp-help .p_center .w725 table.rsp-card tr, .rsp-help .p_center .w725 table.rsp-card tr.rsp-head, .rsp-help .p_center .w725 table.rsp-card tr.rsp-total { display:table-row !important; padding:0 !important; border:0 !important; background:none !important; } .rsp-help .p_center .w725 table.boardList04 th, .rsp-help .p_center .w725 table.boardList04 td, .rsp-help .p_center .w725 table.rsp-card td.rsp-empty, .rsp-help .p_center .w725 table.rsp-card tr.rsp-total td { display:table-cell !important; width:auto !important; height:auto !important; padding:6px 2px !important; border:0 !important; border-bottom:1px solid #e9e4dc !important; font-size:11px !important; line-height:1.4 !important; text-align:center !important; vertical-align:middle; word-break:keep-all; overflow-wrap:break-word; } .rsp-help .p_center .w725 table.boardList04 th { background:#f6f3ee !important; } .rsp-help .p_center .w725 table.boardList04 th img { max-width:100%; height:auto; } .rsp-help .p_center .w725 table.rsp-card td:before { content:none !important; } .rsp-help .p_center .w725 table.rsp-card tfoot tr.rsp-total td { padding:10px 4px !important; font-size:12px !important; } /* 1:1 상담 서식 */ .rsp-help .p_center iframe[src*="rules_privacy"] { display:block; width:100% !important; height:200px; margin:12px 0 0; border:1px solid #e3ddd2; box-sizing:border-box; } .rsp-help .p_center input#chkBox { width:18px; height:18px; margin:0 4px 0 0; vertical-align:middle; } .rsp-help .p_center .boardRegisterDiv { margin:12px 0 0 !important; border-top:2px solid #5d4a2f !important; border-bottom:0 !important; } .rsp-help .p_center .boardRegisterDiv table.boardList07 { display:block; width:auto !important; margin:0 !important; border:0 !important; } .rsp-help .p_center .boardRegisterDiv table.boardList07 colgroup, .rsp-help .p_center .boardRegisterDiv table.boardList07 td.td_line { display:none !important; } .rsp-help .p_center .boardRegisterDiv table.boardList07 tbody, .rsp-help .p_center .boardRegisterDiv table.boardList07 tr { display:block !important; width:auto !important; } .rsp-help .p_center .boardRegisterDiv table.boardList07 th { display:block !important; width:auto !important; height:auto !important; padding:12px 0 6px !important; border:0 !important; background:none !important; text-align:left !important; line-height:0; } .rsp-help .p_center .boardRegisterDiv table.boardList07 th img { margin:0 !important; } .rsp-help .p_center .boardRegisterDiv table.boardList07 td { display:block !important; width:auto !important; padding:0 0 12px !important; border:0 !important; border-bottom:1px solid #eee7dc !important; text-align:left !important; font-size:12px; line-height:1.5; } .rsp-help .p_center .boardRegisterDiv td > p { float:none !important; display:flex; flex-wrap:wrap; align-items:center; gap:6px; width:auto !important; margin:0 !important; } .rsp-help .p_center .boardRegisterDiv td > p + p, .rsp-help .p_center .boardRegisterDiv td > p.fl_left + p.fl_left { margin-top:6px !important; } .rsp-help .p_center .boardRegisterDiv td > p:not(.fl_left) { font-size:0; gap:0; } /* 주문번호 칸 뒤   가 폭을 먹던 것 (버튼 글자는 .cbtn 이 따로 크기 지정) */ .rsp-help .p_center .boardRegisterDiv td > p:not(.fl_left) > a { margin-left:6px; } .rsp-help .p_center .boardRegisterDiv td > p.fl_left { gap:0; font-size:13px; color:#8b6f47; } /* 이메일 : [아이디] @ [도메인] */ .rsp-help .p_center .boardRegisterDiv td > p.fl_left > input[type=text]:first-child:not(:last-child) { margin-right:6px !important; } .rsp-help .p_center .boardRegisterDiv td > p.fl_left > .rspGap { display:none !important; } /* 도메인 칸 뒤   (responsive.js 가 감쌈) : 도메인 칸이 6px 짧던 것 */ .rsp-help .p_center .boardRegisterDiv td input[type=text], .rsp-help .p_center .boardRegisterDiv td textarea { width:100% !important; max-width:100% !important; height:42px; margin:0 !important; padding:0 10px; border:1px solid #d6cdbd; border-radius:6px; background:#fff; font-size:16px !important; box-sizing:border-box; -webkit-appearance:none; } .rsp-help .p_center .boardRegisterDiv td > p input[type=text] { flex:1 1 0; width:auto !important; min-width:0; } .rsp-help .p_center .boardRegisterDiv td textarea { height:200px !important; padding:10px !important; line-height:1.5; } .rsp-help .p_center .boardRegisterDiv td .cbtn { height:36px !important; line-height:34px !important; min-width:0 !important; padding:0 12px !important; font-size:13px !important; border-radius:4px !important; vertical-align:middle; } .rsp-help .p_center .boardRegisterDiv td > a, .rsp-help .p_center .boardRegisterDiv td > input + a { display:inline-block; margin-top:6px; } .rsp-help .p_center .boardRegisterDiv td .t_11br3 { display:block; margin-top:4px; font-size:11px; line-height:1.5; } .rsp-help .p_center .btnC { margin:16px 0 !important; text-align:center; } .rsp-help .p_center .btnC a { display:block; text-decoration:none !important; } .rsp-help .p_center .btnC .cbtn { display:block !important; width:auto !important; min-width:0 !important; height:46px !important; line-height:46px !important; padding:0 !important; border-radius:6px !important; font-size:15px !important; letter-spacing:0 !important; } .rsp-help .p_center #app .cbtn { background:#5d4a2f !important; border-color:#5d4a2f !important; color:#fff !important; font-weight:bold !important; } /* select.js 가짜 select 대신 원래 select (responsive.js 가 .rspSkin / .rspNative 를 단다) */ .rsp-help .rspSkin { display:none !important; } .rsp-help select.rspNative { display:block !important; width:100% !important; max-width:100% !important; height:42px !important; margin:0 !important; padding:0 8px !important; border:1px solid #d6cdbd !important; border-radius:6px; background-color:#fff !important; color:#333 !important; font-size:16px !important; box-sizing:border-box; } /* 16px 미만이면 아이폰이 누를 때 화면을 확대한다 */ .rsp-help .p_center .boardRegisterDiv td > p.fl_left.mr5 { display:block; } /* 태블릿 */ @media screen and (min-width:600px) { #rspHelpNav { grid-template-columns:repeat(6, minmax(0,1fr)); } .rsp-help .p_center .searchTop .search2 form { flex-wrap:nowrap; } .rsp-help .p_center .searchTop .search2 p.select { flex:0 0 200px; } .rsp-help .p_center .searchTop .search2 p:not(.select) { flex:1 1 0; } .rsp-help .p_center .faqsubList ul { display:flex; flex-wrap:wrap; } .rsp-help .p_center .faqsubList li a { padding:0 16px; border-radius:20px; } .rsp-help .p_center .boxBrown745 .counsel > a:last-child { display:inline-block; margin:0 0 0 10px; vertical-align:middle; } .rsp-help .p_center .boxBrown745 .counsel > a:last-child .cbtn { display:inline-block !important; height:36px !important; line-height:36px !important; padding:0 18px !important; font-size:13px !important; } .rsp-help .p_center .btnC a { display:inline-block; } .rsp-help .p_center .btnC .cbtn { min-width:220px !important; padding:0 20px !important; } .rsp-help .p_center iframe[src*="rules_privacy"] { height:240px; } } /* ---------- 메인(/front/main.do) : 오늘의 책 / 새로 나온 책 / 추천책 ------------------- - 세 섹션 머리줄을 같은 모양으로 : 왼쪽 제목(글자 16px), 오른쪽 좌우버튼 또는 '더보기'. 높이 28px. - 제목은 원래 스프라이트 그림(main_title.gif, 14px)이라 폰에서 흐리고, '새로나온 책'은 JSP 가 style="background:none" 으로 지워 두어 안 보였다 -> 세 제목 모두 글자로 보여준다. - 좌우버튼 : codeButton.js 가 gif 를 span.cbtn-i 로 바꾸면서 이전=테두리 없음, 다음=테두리 있음으로 모양이 달랐다 -> 둘 다 28px 네모 박스 + 가운데 꺾쇠(:before)로 통일. gif 가 그대로 남은 경우(img)도 같은 박스. - 새로 나온 책 : 모든 탭 목록을 가로 한 줄 카드 + 가로 스크롤. 탭을 누르면 jQuery show() 가 style="display:block" 을 넣어 세로로 무너졌다 -> 숨김(display:none)이 아닌 목록만 flex 로 고정. - '더보기' 는 새로 나온 책 머리줄 오른쪽으로 올려 추천책 좌우버튼과 겹치지 않게 한다. - 태블릿(600~1023) 규칙(파일 아래쪽)이 li 폭을 20% 로 바꾸므로 #newBook 으로 우선순위를 올려 둔다. */ /* 섹션 머리줄 공통 : 제목 글자 */ .mainWrap .mainCon h2.tToday, .mainWrap .mainCon h2.tNew, .mainWrap .mainCon h2.tRecom { float:none !important; display:block !important; width:auto !important; height:28px !important; margin:0 !important; padding:0 !important; background:none !important; text-indent:0 !important; line-height:28px !important; font-size:16px !important; font-weight:bold !important; color:#4d3d2d !important; letter-spacing:-0.3px; white-space:nowrap; overflow:visible; } .mainWrap .mainCon h2.tNew { font-size:0 !important; } .mainWrap .mainCon h2.tNew:before { content:"\C0C8\B85C\0020\B098\C628\0020\CC45"; font-size:16px; } /* 새로 나온 책 */ /* 좌우버튼 : 둘 다 같은 28px 박스, 꺾쇠는 박스 정중앙 */ .mainWrap .mainCon .btnL { position:absolute !important; top:0 !important; right:0 !important; float:none !important; width:auto !important; height:28px !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important; white-space:nowrap; z-index:2; } .mainWrap .mainCon .btnL .cbtn-i, .mainWrap .mainCon .btnL img { position:relative !important; display:inline-block !important; width:28px !important; height:28px !important; min-width:0 !important; max-width:none !important; margin:0 0 0 6px !important; padding:0 !important; border:1px solid #d9cfbf !important; border-radius:4px !important; background:#fff !important; box-sizing:border-box !important; vertical-align:top !important; color:transparent !important; font-size:0 !important; line-height:0 !important; overflow:visible !important; cursor:pointer; -webkit-tap-highlight-color:rgba(139,111,71,.15); } .mainWrap .mainCon .btnL > :first-child { margin-left:0 !important; } .mainWrap .mainCon .btnL .cbtn-i:before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border:solid #5d4a2f; border-width:2px 2px 0 0; box-sizing:border-box; } .mainWrap .mainCon .btnL .cbtn-i-next:before { transform:translate(-76%,-50%) rotate(45deg); -webkit-transform:translate(-76%,-50%) rotate(45deg); } .mainWrap .mainCon .btnL .cbtn-i-prev:before { transform:translate(-24%,-50%) rotate(-135deg); -webkit-transform:translate(-24%,-50%) rotate(-135deg); } .mainWrap .mainCon .btnL .cbtn-i:after { content:""; position:absolute; left:-4px; right:-4px; top:-9px; bottom:-9px; } /* 누르는 영역 34x44 (테두리 안쪽 기준) */ .mainWrap .mainCon .btnL .cbtn-i .cbtn-chev { display:none !important; } .mainWrap .mainCon .btnL img { padding:6px !important; object-fit:none; object-position:center; } /* codeButton 이 안 돌았을 때 */ .mainWrap .mainCon .btnL .cbtn-i:active { background:#f6f3ee !important; } /* 오늘의 책 : [오늘의 책 9월 17일 ........ < >] 줄 아래로 14px 띄우고 표지 */ .mainWrap .mainCon .todayCon { margin:18px 0 0 !important; padding:0 0 16px !important; border-bottom:1px solid #e3ddd2 !important; } .mainWrap .mainCon .todayCon h2.tToday { float:left !important; } .mainWrap .mainCon .todayBookList .date { position:static !important; float:left !important; height:28px !important; margin:0 0 0 8px !important; line-height:28px !important; font-size:13px !important; } .mainWrap .mainCon .todayBookList .con { clear:both !important; margin:0 !important; padding:14px 0 0 !important; align-items:flex-start; } /* clear 가 margin 을 먹으므로 padding */ /* 새로 나온 책 */ .mainWrap .mainCon .newBook { position:relative !important; margin:18px 0 0 !important; padding:0 0 16px !important; border-bottom:1px solid #e3ddd2 !important; } .mainWrap .mainCon .newBook .moreView { position:absolute !important; top:0 !important; right:0 !important; float:none !important; width:auto !important; height:28px !important; margin:0 !important; padding:0 !important; } .mainWrap .mainCon .newBook .moreView a { float:none !important; display:block !important; width:auto !important; height:28px !important; margin:0 !important; padding:0 0 0 12px !important; background:none !important; font-size:12px !important; line-height:28px !important; color:#8b6f47 !important; text-decoration:none !important; } .mainWrap .mainCon .newBook .moreView a:after { content:"\203A"; display:inline-block; margin-left:4px; font-size:15px; vertical-align:top; } /* 탭 줄 : 한 줄 가로 스크롤 */ .mainWrap .mainCon .newBook .tabTypeB { margin:8px 0 0 !important; padding:0 !important; border-bottom:1px solid #e3ddd2 !important; scrollbar-width:none; } .mainWrap .mainCon .newBook .tabTypeB::-webkit-scrollbar { display:none; } .mainWrap .mainCon .newBook .tabTypeB li { vertical-align:bottom; } .mainWrap .mainCon .newBook .tabTypeB li a { padding:8px 10px 7px !important; border-bottom:2px solid transparent !important; font-size:13px !important; line-height:18px !important; color:#8a7b66 !important; text-decoration:none !important; } .mainWrap .mainCon .newBook .tabTypeB li:first-child a { padding-left:2px !important; } .mainWrap .mainCon .newBook .tabTypeB li.on a { color:#5d4a2f !important; font-weight:bold !important; border-bottom-color:#5d4a2f !important; } /* 책 목록 : 모든 탭 가로 한 줄 카드 */ .mainWrap #newBook .newList { flex-wrap:nowrap !important; width:auto !important; height:auto !important; margin:12px 0 0 !important; padding:0 0 2px !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; white-space:nowrap; scrollbar-width:none; } .mainWrap #newBook .newList:not([style*="none"]) { display:flex !important; } .mainWrap #newBook .newList::-webkit-scrollbar { display:none; } .mainWrap #newBook .newList li { float:none !important; flex:0 0 100px; display:inline-block !important; width:100px !important; height:auto !important; margin:0 10px 0 0 !important; padding:0 !important; text-align:left !important; white-space:normal; vertical-align:top; scroll-snap-align:start; box-sizing:border-box; } .mainWrap #newBook .newList li:last-child { margin-right:0 !important; } .mainWrap #newBook .newList .bookImg { width:100px !important; height:144px !important; margin:0 !important; padding:0 !important; position:relative; line-height:0; } .mainWrap #newBook .newList .bookImg a { display:block; width:100%; height:100%; } .mainWrap #newBook .newList .bookImg img.bImg { display:block; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; border:0 !important; object-fit:contain; object-position:50% 100%; -webkit-filter:drop-shadow(0 0 1px rgba(0,0,0,.35)); filter:drop-shadow(0 0 1px rgba(0,0,0,.35)); } .mainWrap #newBook .newList li p.booktit { width:auto !important; height:2.7em; margin:8px 0 0 !important; overflow:hidden; font-size:13px !important; line-height:1.35 !important; word-break:keep-all; overflow-wrap:break-word; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .mainWrap #newBook .newList li p.booktit a { font-size:13px !important; font-weight:normal !important; color:#222 !important; } .mainWrap #newBook .newList li p.bookW { width:auto !important; margin:3px 0 0 !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px !important; line-height:16px; color:#888 !important; } .mainWrap #newBook .newList li p.bookP { width:auto !important; margin:2px 0 0 !important; white-space:nowrap; font-size:12px !important; line-height:16px; font-weight:bold; color:#222 !important; } .mainWrap #newBook .newList li p.bookP .bookS { height:auto !important; font-size:12px !important; color:#d9480f !important; } /* 카드 폭 : 한 화면에 3장 + 다음 카드가 조금 보이게(밀어서 넘긴다는 표시). 태블릿은 5장이 다 들어감 */ @media screen and (max-width: 374px) { .mainWrap #newBook .newList li { flex-basis:92px; width:92px !important; } .mainWrap #newBook .newList .bookImg { width:92px !important; height:132px !important; } } @media screen and (min-width: 600px) { .mainWrap #newBook .newList li { flex-basis:124px; width:124px !important; margin-right:14px !important; } .mainWrap #newBook .newList .bookImg { width:124px !important; height:178px !important; } } /* 추천책 : [추천책 ........ < >] */ .mainWrap .mainCon .recomCon { position:relative !important; margin:18px 0 0 !important; } .mainWrap .mainCon .recomCon .recomList { padding-top:6px !important; } /* 아래쪽 섹션 제목(정가인하 도서 / 미디어 & 기관 추천책)도 같은 글자 제목으로 맞춘다 */ .mainWrap .mainRight h2.tSale, .mainWrap .mainRight h2.tMedia { float:none !important; width:auto !important; height:28px !important; padding:0 !important; background:none !important; text-indent:0 !important; line-height:28px !important; font-size:16px !important; font-weight:bold !important; color:#4d3d2d !important; letter-spacing:-0.3px; white-space:nowrap; } .mainWrap .mainRight h2.tSale .hd { display:inline !important; } /* 북카트/주문/회원가입 머리 : bg_regBox.gif(PC 테두리 이미지, 모바일에선 윗/왼쪽 선만 보였음) 대신 CSS 상자, 제목 글자(.cbtn-tit)와 단계 원(.cbtn-steps)은 codeButton.js [wf-order] 가 gif 를 바꿔 만든 것 */ .orderStep, .regStep { position:relative !important; margin:10px 10px 8px !important; padding:12px 12px 14px !important; background:#fff none !important; border:1px solid #e3ddd2 !important; border-radius:8px; box-shadow:0 1px 3px rgba(93,74,47,.06); overflow:hidden !important; } .orderStep h2, .regStep h2 { margin:0 !important; padding:0 2px 10px !important; border-bottom:1px solid #eee8dd; line-height:0; text-align:left; } .orderStep h2 .cbtn-tit, .regStep h2 .cbtn-tit { width:auto !important; height:auto !important; font-size:20px !important; line-height:26px !important; letter-spacing:-1px !important; text-indent:0 !important; color:#5d4a2f !important; } .orderStep .step, .regStep > p { margin:12px 0 0 !important; line-height:0; text-align:center; } .orderStep .benefitA { margin:10px 0 0 !important; line-height:1.5 !important; } /* 단계 : 화면 폭 가운데, 원 58px (가입 4단계는 54px) */ .cbtn-steps { display:flex !important; justify-content:center; align-items:center; width:auto !important; height:auto !important; margin:0 auto !important; } .cbtn-steps li { position:relative !important; left:auto !important; top:auto !important; flex:0 0 auto; width:58px !important; height:58px !important; margin:0 0 0 26px !important; padding:0 !important; font-size:12px !important; line-height:58px !important; letter-spacing:-1px !important; } .cbtn-steps li:first-child { margin-left:0 !important; } .cbtn-steps li.two { padding-top:16px !important; font-size:11px !important; line-height:13px !important; } .cbtn-steps li + li:before { left:-20.5px !important; top:50% !important; width:9px !important; height:9px !important; margin-top:-4.5px; } .cbtn-steps-r li { width:54px !important; height:54px !important; line-height:54px !important; margin-left:22px !important; font-size:11px !important; } .cbtn-steps-r li.two { padding-top:14px !important; line-height:13px !important; } .cbtn-steps-r li + li:before { left:-18px !important; width:8px !important; height:8px !important; margin-top:-4px; } /* 로그인/비회원 주문확인 제목 (h2 가 font-size:0 이라 글자 크기를 직접 준다) */ .loginBox .tit h2 .cbtn-tit, .loginBox_daum .tit h2 .cbtn-tit { width:auto !important; height:auto !important; font-size:20px !important; line-height:28px !important; letter-spacing:-1px !important; text-indent:0 !important; color:#5d4a2f !important; } /* 다음쇼핑원 띠 : 두 줄 카드로 */ .cbtn-daumbar { width:auto !important; height:auto !important; padding:8px 12px !important; white-space:normal !important; } .cbtn-daumbar span, .cbtn-daumbar .db-l, .cbtn-daumbar .db-r { position:static !important; left:auto !important; top:auto !important; height:auto !important; line-height:1.5 !important; } .cbtn-daumbar .db-l, .cbtn-daumbar .db-r { display:block; width:auto !important; } .cbtn-daumbar .db-r { margin-top:4px; padding-top:4px; border-top:1px solid #efefef; } .cbtn-daumbar .db-r:before { display:none !important; } .cbtn-daumbar .db-bl { margin-right:6px; font-size:18px !important; line-height:1.5 !important; } .cbtn-daumbar .db-wel { font-size:14px !important; letter-spacing:-0.5px !important; } .cbtn-daumbar .db-txt { display:block; } .cbtn-daumbar .db-daum, .cbtn-daumbar .db-shop, .cbtn-daumbar .db-one { font-size:17px !important; line-height:1.6 !important; } .cbtn-daumbar .db-daum, .cbtn-daumbar .db-shop { margin-right:4px; } .cbtn-daumbar .db-more { position:relative !important; top:auto !important; display:inline-block; margin-left:8px; vertical-align:2px; line-height:15px !important; height:17px !important; } div.mt5.ml5 > a > .cbtn-daumbar { margin:0 10px 0 5px; } /* 감싸개 div 의 ml5(5px) 만큼 덜어 다른 카드와 왼쪽 끝(10px) 맞춤 */ /* ---------- 새로나온 책 목록(/front/display/newBookList.do) : 한 줄에 한 권 앱 카드 (2026-09-21) 참고 : 알라딘/교보/예스24 모바일 목록. 표지 왼쪽(약 95x135) + 오른쪽에 제목/저자·출판사/가격/뱃지 세로 배치, 표지 오른쪽 위 하트(위시리스트), 정보 아래 테두리 버튼(북카트/바로구매), 항목 사이 옅은 구분선. 적용 범위 : responsive.js 의 nbCards() 가 이 페이지의 .conWrap.p_newBook 에만 rspNb 를 붙인다. 아래 규칙은 전부 .rspNb 아래이므로 같은 마크업을 쓰는 베스트셀러/검색결과/카테고리 목록은 그대로다. '간단히 보기'(ul.simpleList)와 '자세히 보기'(ul.bookList) 두 마크업 모두 같은 카드 모양이 된다. 간단히 보기 마크업에는 정가/할인율/적립/뱃지/소개가 없다 -> 없는 값은 만들지 않는다. */ /* ---- 공통 부품 ---- */ .rspNb .rspNbBlind { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* 표지 칸 : 95x135 로 크기를 맞춘다. 표지 원본의 가로세로 비가 제각각(세로로 긴 웹툰/세트 표지)이라 자르지 않고 칸 안에 넣고 가운데로 둔다. 그래야 줄 높이가 고르다. */ .rspNb .rspNbCover { position:relative !important; width:95px !important; height:136px !important; line-height:136px !important; text-align:center !important; } .rspNb .rspNbCover > a { display:inline; } .rspNb .simpleList li .list > li .conA .viewImg.rspNbCover img, .rspNb .bookView .viewA .viewImg.rspNbCover img, .rspNb .bookView .viewA .viewImg.rspNbCover img.d_imgLine, .rspNb .rspNbCover img { width:auto !important; height:auto !important; max-width:95px !important; max-height:134px !important; vertical-align:middle !important; border:1px solid #e3ddd2 !important; } .rspNb .rspNbHeart { position:absolute !important; right:-7px; top:-7px; z-index:3; display:block !important; width:30px; height:30px; margin:0 !important; padding:0 !important; border-radius:50%; background:rgba(255,255,255,.92) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%237a6a52' stroke-width='1.8' d='M12 20.3 4.2 12.5a4.7 4.7 0 0 1 0-6.6 4.7 4.7 0 0 1 6.6 0l1.2 1.2 1.2-1.2a4.7 4.7 0 0 1 6.6 0 4.7 4.7 0 0 1 0 6.6z'/%3E%3C/svg%3E") no-repeat center; background-size:19px 19px; box-shadow:0 1px 3px rgba(0,0,0,.22); } .rspNb .rspNbHeart.on { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9490f' d='M12 20.8 4.2 12.9a4.9 4.9 0 0 1 0-6.9 4.9 4.9 0 0 1 6.9 0l.9.9.9-.9a4.9 4.9 0 0 1 6.9 0 4.9 4.9 0 0 1 0 6.9z'/%3E%3C/svg%3E"); } .rspNb .rspNbBtn { display:inline-block; height:32px; padding:0 15px; box-sizing:border-box; border:1px solid #d5cbb8; border-radius:4px; background:#fff; color:#5d4a2f; font:bold 12px/30px Dotum,sans-serif; letter-spacing:-0.3px; text-decoration:none !important; vertical-align:middle; } .rspNb .rspNbAct { display:flex !important; flex-wrap:wrap; gap:6px; margin:8px 0 0 !important; text-align:left !important; } /* 미리보기 : 원래 표지 아래 btnA(북트리/새창/미리보기) 안에 있고 그 줄은 모바일에서 감춰져 있다. responsive.js 가 미리보기 링크만 버튼 줄로 옮기고 여기서 테두리 버튼 모양을 입힌다(가진 상품에만 생긴다). */ .rspNb a.rspNbPv { display:inline-block !important; height:32px !important; padding:0 15px !important; box-sizing:border-box; border:1px solid #d5cbb8 !important; border-radius:4px !important; background:#fff !important; color:#5d4a2f !important; font:bold 12px/30px Dotum,sans-serif !important; letter-spacing:-0.3px; text-decoration:none !important; vertical-align:middle; white-space:nowrap; } .rspNb a.rspNbPv img, .rspNb a.rspNbPv .cbtn { display:none !important; } .rspNb a.rspNbPv:before { content:"\BBF8\B9AC\BCF4\AE30"; } /* 미리보기 */ /* ---- 1) 상단 : 제목띠 / 분야 / 주목할만한 신간 띠 ---- */ .rspNb .titInfo { margin:0 0 8px !important; } .rspNb .titInfo img { max-width:100%; height:auto; } .rspNb .grayBox { margin:0 0 10px !important; } /* 분야 칸은 DWR 이 select 를 늦게(또는 끝내 못) 채운다. - 숨겨 두면 값이 왔을 때 상자가 끼어들며 아래 글이 밀리고, 끝내 안 오면 분야 칸이 아예 사라진다. - 그래서 숨기지 않고 select 와 같은 크기(34px)를 처음부터 비워 둔다 -> 값이 와도 자리가 그대로다. - 기다리는 동안에는 responsive.js 가 .rspNbCateWait 를 붙여 빈 테두리 상자를 그려 둔다(select 가 들어오면 뗀다). */ .rspNb .grayBox dl.search dd { min-height:34px; } .rspNb .grayBox.rspNbCateWait dl.search dd { box-sizing:border-box; border:1px solid #e8e2d6; border-radius:4px; background:#faf8f4; } /* 분야 select 는 DWR(jutil.form.select)이 만들고 인라인 style(border:1pt #999 / color:#333)을 달고 나온다 -> !important 로 덮는다 */ .rspNb .grayBox dl.search dd select { width:100% !important; height:34px !important; box-sizing:border-box; border:1px solid #d9d2c4 !important; border-radius:4px !important; background:#fff !important; color:#5d4a2f !important; font-size:13px !important; } .rspNb .frameBox { margin:0 0 14px !important; padding:10px 0 0 !important; border-top:1px solid #e3ddd2; } .rspNb .frameBox h2 { margin:0 0 8px !important; } .rspNb .frameBox h2 img { height:15px; width:auto; } .rspNb .frameBox .listWrap { padding:0 0 6px !important; } .rspNb .frameBox ul li { width:104px !important; padding:0 9px 0 0 !important; } .rspNb .frameBox .thumbNail_type02 { text-align:left !important; } .rspNb .frameBox .thumbNail_type02 .photo { margin:0 0 5px !important; } .rspNb .frameBox .thumbNail_type02 .photo img { width:95px !important; max-width:95px !important; height:135px !important; border:1px solid #e3ddd2; } /* 마크업의 95x135 그대로 : 띠 안에서 높이를 고르게 */ .rspNb .frameBox .thumbNail_type02 .btnA { display:none !important; } .rspNb .frameBox .thumbNail_type02 .info .booktit { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 2px !important; font:bold 12px/1.35 Dotum,sans-serif !important; max-height:33px; } .rspNb .frameBox .thumbNail_type02 .info .booktit a { color:#222 !important; } .rspNb .frameBox .thumbNail_type02 .info p { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin:0 !important; font:normal 11px/1.4 Dotum,sans-serif !important; color:#8f8f8f !important; } .rspNb .frameBox .thumbNail_type02 .won { margin:3px 0 0 !important; font:bold 13px/1.3 Dotum,sans-serif !important; color:#c9490f !important; } /* ---- 2) 조회 줄(보기방식/개수/정렬) ---- */ .rspNb .listTopA { margin:0 0 8px !important; padding:0 !important; } .rspNb .listTopA .fl_right { width:100%; gap:6px; flex-wrap:nowrap; } /* 세 칸을 똑같이 3등분하면 360px 에서 폭이 109px 밖에 안 되어 가장 긴 항목이 화살표에 가려 잘린다. 칸마다 가장 긴 항목의 글자 길이만큼 바탕 폭을 주고, 남는 폭만 고르게 나눈다. 차례는 마크업 그대로 1=보기방식, 2=개수(20/40/100), 3=정렬. */ .rspNb .listTopA .fl_right p { flex:1 1 auto; min-width:0; } .rspNb .listTopA .fl_right p:nth-child(1) { flex-basis:98px; } .rspNb .listTopA .fl_right p:nth-child(2) { flex-basis:76px; } .rspNb .listTopA .fl_right p:nth-child(3) { flex-basis:128px; } .rspNb .listTopA .fl_right select { width:100% !important; max-width:none !important; min-width:0 !important; height:34px !important; box-sizing:border-box; border:1px solid #d9d2c4; border-radius:4px; background:#fff; color:#5d4a2f; font-size:13px !important; } /* ---- 3) 페이지 번호 ---- 한 덩어리에 번호가 10개까지 나온다. 칩을 키우면 화살표가 화면 밖으로 밀려 다음 페이지로 못 간다. 그래서 (a) 칩/여백을 26+1+1=28px 로 줄이고 (b) .page 를 font-size:0 으로 해 태그 사이 공백을 없애고 (c) 그래도 넘치면 responsive.js 의 nbPager() 가 현재 페이지에서 먼 칩부터 rspNbPgHide 로 감춘다. -> 화살표는 늘 보이고 가로 스크롤(숨은 스크롤)에 기대지 않는다. */ .rspNb .pageBG { margin:0 0 4px !important; padding:6px 0 !important; text-align:center !important; } .rspNb .pageBG .page { display:block !important; text-align:center !important; white-space:nowrap; font-size:0 !important; letter-spacing:0 !important; overflow:hidden !important; } .rspNb .pageBG .page .pageNum { font-size:0; letter-spacing:0; } .rspNb .pageBG .page .pageNum a, .rspNb .pageBG .page .pageNum strong { display:inline-block; min-width:26px; height:30px; margin:0 1px !important; padding:0 3px; box-sizing:border-box; border:1px solid #e3ddd2; border-radius:4px; background:#fff; color:#5d4a2f !important; font:normal 13px/28px Dotum,sans-serif !important; text-align:center; text-decoration:none !important; vertical-align:middle; } .rspNb .pageBG .page .pageNum a.on, .rspNb .pageBG .page .pageNum strong { background:#5d4a2f; border-color:#5d4a2f; color:#fff !important; font-weight:bold !important; } .rspNb .pageBG .page .rspNbPgHide { display:none !important; } .rspNb .pageBG .page .prev-btn, .rspNb .pageBG .page .next-btn { display:inline-block; vertical-align:middle; font-size:0; } .rspNb .pageBG .page .prev-btn > a, .rspNb .pageBG .page .next-btn > a { display:inline-block; width:24px; height:30px; line-height:30px; text-align:center; vertical-align:middle; } /* 화살표를 누르기 좋은 크기로 (안의 cbtn 은 4~8px 밖에 안 된다) */ /* codeButton.js 가 화살표 gif 를 인라인 style 이 붙은 4~8px 짜리 글자로 바꾼다 -> 눈에 보이게 키운다 */ .rspNb .pageBG .page .prev-btn > a .cbtn, .rspNb .pageBG .page .next-btn > a .cbtn { margin:0 !important; width:auto !important; height:28px !important; line-height:28px !important; font-size:18px !important; color:#5d4a2f !important; border:0 !important; background:none !important; vertical-align:middle; } .rspNb .pageBG .page .prev-btn img, .rspNb .pageBG .page .next-btn img { height:20px; width:auto; vertical-align:middle; } .rspNb .listTopAL, .rspNb .listTopAL2 { display:none !important; } /* ---- 4) '간단히 보기'(ul.simpleList) -> 한 줄 카드 ---- */ .rspNb .simpleList, .rspNb .simpleList > li { width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; } .rspNb .simpleList li .list { display:block !important; width:auto !important; } .rspNb .simpleList li .list > li { float:none !important; display:block !important; width:auto !important; margin:0 !important; padding:13px 0 !important; border:0 !important; border-bottom:1px solid #ece7dd !important; background:none !important; overflow:hidden !important; } .rspNb .simpleList li .list > li .conA { float:left !important; width:95px !important; margin:0 12px 0 0 !important; padding:0 !important; overflow:visible !important; } .rspNb .simpleList li .list > li .conA .viewImg { float:none !important; margin:0 !important; border:0 !important; } .rspNb .simpleList li .list > li .conB { display:block !important; float:none !important; width:auto !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .rspNb .simpleList li .list > li .conB p { margin:0 !important; text-align:left !important; font-size:12px; } .rspNb .simpleList li .list > li .conB .booktit { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 4px !important; font:bold 14px/1.4 Dotum,sans-serif !important; max-height:40px; } .rspNb .simpleList li .list > li .conB .booktit a { color:#222 !important; text-decoration:none !important; } .rspNb .simpleList li .list > li .conB .t_gr { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 7px !important; font:normal 12px/1.5 Dotum,sans-serif !important; color:#8f8f8f !important; } .rspNb .simpleList li .list > li .conB .won { margin:0 !important; font:bold 16px/1.3 Dotum,sans-serif !important; color:#c9490f !important; } /* ---- 5) '자세히 보기'(ul.bookList) -> 같은 카드 모양 ---- */ .rspNb .bookList > li { padding:13px 0 !important; border-bottom:1px solid #ece7dd !important; } .rspNb .bookView .viewA .viewImg { flex:0 0 95px; margin:0 12px 0 0 !important; } .rspNb .bookView .viewA .viewInfo .v_title { font:normal 12px/1.5 Dotum,sans-serif !important; color:#8f8f8f !important; overflow:hidden; } /* 저자 I 역자 I 출판사 I 발행일 : 마크업에서 제목

뒤에 그냥 글자로 붙어 있다(감싸개가 없다). responsive.js 의 nbAuthorLine() 이 그 글자들을 .rspNbAu 로 감싸 준다 -> 여기서 한 줄로 자른다. (감싸지 않으면 이름이 길 때 두 줄로 흘러 출판사/날짜가 글자 중간에서 갈라진다. '간단히 보기'의 .t_gr 과 같은 한 줄 규칙.) */ .rspNb .bookView .viewA .viewInfo .v_title .rspNbAu { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; max-height:19px; font:normal 12px/1.5 Dotum,sans-serif !important; color:#8f8f8f !important; word-break:break-all; } .rspNb .bookView .viewA .viewInfo .v_title p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 4px !important; font:bold 14px/1.4 Dotum,sans-serif !important; max-height:40px; } .rspNb .bookView .viewA .viewInfo .v_title p a { color:#222 !important; text-decoration:none !important; } .rspNb .bookView .viewA .viewInfo .v_story { margin:5px 0 0 !important; font:normal 12px/1.45 Dotum,sans-serif !important; color:#aaa !important; max-height:35px; } .rspNb .bookView .viewA .viewInfo .v_story a { color:#aaa !important; } .rspNb .bookView .viewA .viewInfo .v_flag { margin:6px 0 0 !important; gap:4px; } .rspNb .bookView .viewA .viewInfo .v_flag .cbtn { width:auto !important; height:19px !important; padding:0 7px !important; border-radius:3px !important; font:bold 11px/19px Dotum,sans-serif !important; letter-spacing:-0.3px !important; } .rspNb .bookView .viewA .viewInfo .v_flag .cbtn br { display:none; } .rspNb .bookView .viewB { margin:7px 0 0 !important; padding:0 0 0 107px !important; } /* 가격 줄 : 할인율 -> 판매가 -> 적립 -> 정가 (responsive.js 가 실제 차례를 이렇게 바꾼다) */ .rspNb .bookView .viewB .viewBox .con .boxA { display:flex !important; flex-wrap:wrap; align-items:baseline; gap:0 6px; } .rspNb .bookView .viewB .viewBox .con .boxA > * { order:0 !important; margin:0 !important; } .rspNb .bookView .viewB .viewBox .con .boxA .rspNbSale { font:bold 14px/1.3 Dotum,sans-serif !important; color:#c9490f !important; white-space:nowrap; } .rspNb .bookView .viewB .viewBox .con .boxA .rspNbSale img { display:none !important; } .rspNb .bookView .viewB .viewBox .con .boxA .v_price { font:bold 16px/1.3 Dotum,sans-serif !important; color:#c9490f !important; } .rspNb .bookView .viewB .viewBox .con .boxA .rspNbPt { font:normal 12px/1.3 Dotum,sans-serif !important; color:#8b6f47 !important; white-space:nowrap; } .rspNb .bookView .viewB .viewBox .con .boxA .rspNbPt img { height:11px; width:auto; vertical-align:baseline; } .rspNb .bookView .viewB .viewBox .con .boxA .t_gr { font-size:0 !important; } .rspNb .bookView .viewB .viewBox .con .boxA .t_gr strong { font:normal 12px/1.3 Dotum,sans-serif !important; color:#b3b3b3 !important; text-decoration:line-through; } .rspNb .bookView .viewB .viewBox .con .boxB { margin:4px 0 0 !important; font-size:11px !important; } .rspNb .bookView .viewB .btnA { margin:9px 0 0 !important; gap:6px; } .rspNb .bookView .viewB .btnA a[href*="add_wish"] { display:none !important; } /* 표지 위 하트가 대신한다 */ .rspNb .bookView .viewB .btnA a .cbtn, .rspNb .bookView .viewB .btnA .cbtn { width:auto !important; min-width:0 !important; height:32px !important; padding:0 15px !important; border:1px solid #d5cbb8 !important; border-radius:4px !important; background:#fff !important; background-color:#fff !important; color:#5d4a2f !important; font:bold 12px/30px Dotum,sans-serif !important; letter-spacing:-0.3px !important; } .rspNb .bookView .viewB .btnA a[href*="goBuy"] .cbtn { background:#8b6f47 !important; background-color:#8b6f47 !important; border-color:#8b6f47 !important; color:#fff !important; } /* 품절/절판 : JSP 가 없이 _off.gif 만 찍고 codeButton.js 가 그것을 span.cbtn.cbtn-off (인라인 style 로 빨간 바탕)로 바꾼다. 위 규칙이 그 빨간색을 흰 버튼으로 덮어 버려서 누를 수 있는 버튼과 똑같이 보인다 -> 회색 비활성 모양으로 되돌린다. (a 가 없어 누를 수 없는 것은 원래 그대로다. 보이는 모양만 맞춘다.) */ .rspNb .bookView .viewB .btnA .cbtn.cbtn-off { border-color:#e6e2da !important; background:#f2f0eb !important; background-color:#f2f0eb !important; color:#a9a296 !important; opacity:.85; cursor:default; } /* ---- 6) 태블릿(가로 680px 이상) : 한 줄에 두 권 ---- 휴대폰 기준 한 줄 카드를 그대로 두면 768px 에서는 오른쪽 400px 가 통째로 빈다. 두 칸으로 깐다. */ @media screen and (min-width: 680px) { .rspNb .simpleList li .list { display:flex !important; flex-wrap:wrap !important; } .rspNb .simpleList li .list > li { width:50% !important; box-sizing:border-box !important; } .rspNb .simpleList li .list > li:nth-child(odd) { padding-right:14px !important; } .rspNb .simpleList li .list > li:nth-child(even) { padding-left:14px !important; } .rspNb .bookList { display:flex !important; flex-wrap:wrap !important; } .rspNb .bookList > li { width:50% !important; box-sizing:border-box !important; } .rspNb .bookList > li:nth-child(odd) { padding-right:14px !important; } .rspNb .bookList > li:nth-child(even) { padding-left:14px !important; } /* viewB 의 107px 들여쓰기는 태블릿에서도 그대로 둔다 : 가격줄·버튼이 제목과 같은 선에 맞아야 카드가 한 덩어리로 보인다. (680px 에서 칸 폭 326px - 107px = 219px 로 가격줄·버튼 두 개가 들어간다.) */ } /* ---------- 10. 하단 네비게이션 바 (2026-09-21) -------------------------------- responsive.js 의 buildBottomNav() 가