/* common */ /* font-family: 'Nanum Gothic', sans-serif; font-family: 'Noto Sans KR', sans-serif; font-family:'NanumSquare','나눔스퀘어',sans-serif; */ /* 서브 비주얼*/ #sv { height:260px; background-size:cover !important;} #sv .txt { text-align:center; font-family:'NanumSquare','나눔스퀘어',sans-serif; text-align:center; color:#fff; line-height:1.4; text-shadow:0 0 5px rgba(0,0,0,0.3); position:relative; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } #sv .txt dl {} #sv .txt dl dt { font-size:34px; font-weight:900;} #sv .txt dl dd { font-size:20px; margin-top:5px;} .sv01 { background:url("/html/img/sub/sv01.jpg") no-repeat center top; } .sv02 { background:url("/html/img/sub/sv02.jpg") no-repeat center top; } .sv03 { background:url("/html/img/sub/sv03.jpg") no-repeat center top; } .sv04 { background:url("/html/img/sub/sv04.jpg") no-repeat center top; } .sv05 { background:url("/html/img/sub/sv05.jpg") no-repeat center top; } .sv06 { background:url("/html/img/sub/sv06.jpg") no-repeat center top; } .sv07 { background:url("/html/img/sub/sv07.jpg") no-repeat center top; } #subContents { padding:50px 0 130px; } /* 페이지 타이틀*/ .pageTit {font-family:'NanumSquare','나눔스퀘어',sans-serif; text-align:center; margin-bottom:40px;} .pageTit h2{ font-size:30px; color:#333; font-weight:700; } /* 북클럽 커뮤니티 */ .box_shadow { box-shadow:12px 12px 12px rgba(0,0,0,0.12);} .best_bd_list { border:1px solid #555; border-radius:10px; padding:20px 18px; margin-bottom:52px;} .best_bd_list > p { line-height:1.3; font-weight:300; padding:0 0 0 86px; color:#444; margin-bottom:28px; position:relative;} .best_bd_list > p:before { content:url("/html/img/sub/medal_icon.png"); position:absolute; left:28px; top:-20px;} .best_bd_list .list {} .best_bd_list .list ul {} .best_bd_list .list ul li { float:left; width:32%; margin-right:2%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-radius:10px; overflow:hidden;} .best_bd_list .list ul li:last-child { margin-right:0;} .best_bd_list .list ul li .tit { width:80px; color:#fff; padding-left:16px; font-size:13px; } .best_bd_list .list ul li .txt { font-size:15px; padding:0 13px; width:calc(100% - 80px); width:-moz-calc(100% - 80px); width:-webkit-calc(100% - 80px); } .best_bd_list .list ul li .txt p { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .best_bd_list .list ul li > div { height:50px; float:left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .best_bd_list .list ul li > div p { position:relative; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } /* faq _list 자주하는 질문*/ #faq_list {} #faq_list .list {} #faq_list .list ul { border-top:2px solid #555; } #faq_list .list ul li { border-bottom:1px solid #ddd; line-height:1.4; font-size:15px;} #faq_list .list .q_txt { } #faq_list .list .q_txt button { width:100%; padding:20px; text-align:left; background:none; border:none; font-size:15px; background:url("/html/img/sub/down_btn.png") no-repeat 98% center; } #faq_list .list .q_txt.on button {background:url("/html/img/sub/up_btn.png") no-repeat 98% center; } #faq_list .list .q_txt button span { display:inline-block; position:relative; padding:0 30px; position:relative;} #faq_list .list .q_txt button span:before { content:"Q"; position:absolute; left:0; top:0; color:#333;} #faq_list .list .txt_box { border-top:1px solid #ddd; padding:20px; background:#fffdf7; display:none;} #faq_list .list .txt_box > div { padding:0 30px; position:relative;} #faq_list .list .txt_box > div:before { content:"A"; position:absolute; left:0; top:0; color:#ffbe00;} /* 북스토어 */ #strore_list {} #strore_list .bd_list { margin-top:72px;} #strore_list .list_li {} #strore_list .list_li ul { padding:0 2.5%; text-align:center;font-size: 0;} #strore_list .list_li ul li { display:inline-block;vertical-align: top; width:21.05263157895%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-right:5.26315789474%; margin-bottom:38px;} #strore_list .list_li ul li:nth-child(4n) { margin-right:0;} #strore_list .list_li ul li .img { border: 1px solid #ddd; box-shadow: 12px 12px 12px rgba(0,0,0,0.15); padding:14px; } #strore_list .list_li ul li .txt { line-height:1.3; margin-top:20px;font-size: 16px;} #strore_list .list_li ul li .txt span { color:#88878a; font-weight:300;} #strore_list .list_li ul li .txt p { font-weight:500; color:#333; margin-top:6px;} .price { font-size:20px; color:#e10808; font-weight:500; margin-top:8px;} .price span { font-size:16px; color:#444;} .price span em { font-size:14px; font-weight:300;} .pd_slide_li .slider_wrap { border:1px solid #ddd; border-top:1px solid #555; padding:40px 30px; position:relative; margin-top:20px;} .pd_slide_li .item { border-right:1px solid #e6e6e6;} .pd_slide_li .item .img { width:31.57894736842%; margin-right:7.89473684211%;} .pd_slide_li .item .img, .pd_slide_li .item .txt { float:left;} .pd_slide_li .item .txt { line-height:1.3; width:calc(100% - 31.57894736842% - 7.89473684211%); width:-webkit-calc(100% - 31.57894736842% - 7.89473684211%); width:-moz-calc(100% - 31.57894736842% - 7.89473684211%); } .pd_slide_li .item .txt > span { font-size:15px; font-weight:300; color:#88878a; position:relative; padding:0 0 0 33px; display:block; } .pd_slide_li .item .txt > span > div { max-height:38px; overflow:hidden;} .pd_slide_li .item .txt p { font-weight:500; color:#333; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pd_slide_li .slick-arrow { width:43px; height:43px; background-color:rgba(85,85,85,0.9) !important; border:none; text-indent:-9999px; position:absolute; z-index:100; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } .pd_slide_li .slick-arrow:hover { background-color:rgba(255,196,25,0.9) !important; } .pd_slide_li .slick-prev { background:url("/html/img/sub/slick-prev_s3.png") no-repeat center; left:19px;} .pd_slide_li .slick-next { background:url("/html/img/sub/slick-next_s3.png") no-repeat center; right:19px;} .pd_slide_li .slick-slide { margin-right:20px; position:relative; } .pd_slide_li .item:after { position:absolute; right:20px; bottom:0;} .pd_slide_li .num1:after { content:url("/html/img/sub/medal_icon2.png");} .pd_slide_li .num2:after { content:url("/html/img/sub/medal_icon3.png");} .pd_slide_li .num3:after { content:url("/html/img/sub/medal_icon4.png");} .pd_slide_li .list_page_num { position:absolute; right:30px; top:40px;} .pd_slide_li .list_page_num p {} .pd_slide_li .list_page_num p span, .pd_slide_li .list_page_num p em { display:inline-block; vertical-align:bottom; font-size:14px;} .pd_slide_li .list_page_num p em { margin:0 5px;} .pd_slide_li .list_page_num .current { font-size:20px;} /* 북스토어 도서 */ .book_list .pd_slide_li { } .book_list .pd_slide_li .slider_wrap { border:none; padding:0; border-top:1px solid #ddd; padding-top:25px; margin-bottom:0;} .book_list .pd_slide_li .item:after { display:none;} .book_list .pd_slide_li .item { border:none;} .book_list .pd_slide_li .item a { display:block;} .book_list .pd_slide_li .item a:after { content:""; display:block; clear:both;} .book_list .price span em { display:block;} .book_list .list_group section { float:left; border:1px solid #ddd; padding:40px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-right:0.75%; position:relative;} .book_list .list_group section:nth-child(1) { width:33.08333333333%; background:#fffbf8;} .book_list .list_group section:nth-child(1) .img { width:32.84%;} .book_list .list_group section:nth-child(1) .txt { width:calc(100% - 32.84% - 7.89473684211%); width:-webkit-calc(100% - 32.84% - 7.89473684211%); width:-moz-calc(100% - 32.84% - 7.89473684211%); } .book_list .list_group section:nth-child(2) { width:66.16666666667%; margin:0;} .book_list .list_group section:nth-child(2) .img { width:31.79190751445%;} .book_list .list_group section:nth-child(2) .txt { width:calc(100% - 31.79190751445% - 7.89473684211%); width:-webkit-calc(100% - 31.79190751445% - 7.89473684211%); width:-moz-calc(100% - 31.79190751445% - 7.89473684211%); } .book_list .medal { position:absolute; left:0; top:0;} /* strore_view */ #strore_view {} #strore_view .prod_info { } #strore_view .prod_info > div { float:left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} #strore_view .prod_info .main_img { width:47.5%; text-align:center; padding:0 15px;} #strore_view .prod_info .item_info { width:52.5%;} #strore_view .prod_info .item_info .category { } #strore_view .prod_info .item_info .category ul { } #strore_view .prod_info .item_info .category ul li { float:left; padding:0 22px; height:34px; line-height:34px; border-radius:6px; color:#ddd; font-size:13px; font-weight:700; border:1px solid #ddd; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-right:4px;} #strore_view .prod_info .item_info .category ul li:last-child { margin:0; } #strore_view .prod_info .item_info .category ul li.on { background:#e10808; color:#fff;} #strore_view .prod_info .item_info .item_tit { color:#333; line-height:1.3; margin-top:18px;} #strore_view .prod_info .item_info .item_tit span { font-size:18px; font-weight:300;} #strore_view .prod_info .item_info .item_tit p { font-size:28px; font-weight:700; margin-top:8px;} #strore_view .prod_info .item_info .item_dtlInfo { border:1px solid #333; border-left:none; border-right:none; margin-top:28px;} #strore_view .prod_info .item_info .item_dtlInfo ul {} #strore_view .prod_info .item_info .item_dtlInfo ul li { padding:20px; font-size:0; letter-spacing:-4px; border-bottom:1px solid #ddd; position:relative;} #strore_view .prod_info .item_info .item_dtlInfo ul li:after { content:""; display:block; clear:both; } #strore_view .prod_info .item_info .item_dtlInfo ul li > span, #strore_view .prod_info .item_info .item_dtlInfo ul li > div { display:inline-block; letter-spacing:-0.5px; font-size:15px; vertical-align:middle;} #strore_view .prod_info .item_info .item_dtlInfo ul li > span { width:22.85714285714%; color:#222; } #strore_view .prod_info .item_info .item_dtlInfo ul li > div { font-weight:300; color:#444; width:calc(100% - 22.85714285714%); width:-moz-calc(100% - 22.85714285714%); width:-webkit-calc(100% - 22.85714285714%); } #strore_view .prod_info .item_info .s_txt { padding:30px 20px;} #strore_view .prod_info .item_info .s_txt p { font-size:15px; position:relative; padding-left:10px;} #strore_view .prod_info .item_info .s_txt p:before { content:"·"; position:absolute; left:0; top:0;} .tx_num { } .tx_num span { font-size:20px; font-weight:500;} .point_num { font-weight:500; } .point_num span { width:20px; height:20px; background:#ee7623; color:#fff; display:inline-block; text-align:center; line-height:20px; font-weight:700; font-size:12px; border-radius:50%; margin-left:3px;} .point_num + .guide { position:absolute; background:#444; color:#fff; width:110px; border-radius:3px; overflow:hidden; right:20px; top:50%; margin-top:-13px;} .point_num + .guide a { display:block; height:26px; line-height:26px; font-size:12px; color:#fff; padding-left:7px;} .point_num + .guide a em { position:relative; padding-right:16px;} .point_num + .guide a em:after { content:url("/html/img/sub/arr_s2.png"); position:absolute; right:0; top:0; line-height:1;} .pd_length { font-size:0; letter-spacing:-4px;} .pd_length button { width:30px; } .pd_length button, .pd_length input { height:38px; display:inline-block; vertical-align:top; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0; letter-spacing:-0.5px; font-size:16px; color:#333; border:1px solid #777; } .pd_length input { width:42px; text-align:center; border-left:none; border-right:none;} .pd_length .minus_length { background:url("/html/img/sub/minus_icon.png") no-repeat center; border-radius:5px 0 0 5px;} .pd_length .plus_length { background:url("/html/img/sub/plus_icon.png") no-repeat center; border-radius:0 5px 5px 0;} .prd_btn_area { position:relative; font-size:0; letter-spacing:-4px;} .prd_btn_area button { display:block; float:left; width:140px; margin-right:10px; height:60px; border:none; font-size:17px; font-weight:500; color:#fff; position:relative;} .prd_btn_area .btn_buy { background:#fcc41f; width:calc(100% - 300px); width:-webkit-calc(100% - 300px); width:-moz-calc(100% - 300px); } .prd_btn_area button:after { content:""; border:1px solid rgba(255,255,255,0.25); display:block; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; left:1px; top:1px; position:absolute; width:calc(100% - 2px); width:-webkit-calc(100% - 2px); width:-moz-calc(100% - 2px); height:calc(100% - 2px); height:-webkit-calc(100% - 2px); height:-moz-calc(100% - 2px); } .prd_btn_area button:last-child { margin:0; } .prd_btn_area .btn_wishlist { background:#008264;} .prd_btn_area .btn_gift { background:#62606c;} .prd_btn_area button span { position:relative; padding-left:28px;} .prd_btn_area button span:before { position:absolute; left:0; top:3px;} .prd_btn_area .btn_buy span:before { content:url("/html/img/sub/buy_icon.png");} .prd_btn_area .btn_wishlist span:before { content:url("/html/img/sub/wishlist_icon.png"); } .prd_btn_area .btn_gift span:before { content:url("/html/img/sub/gift_icon.png"); } #strore_view .prd_detail { margin-top:90px; } #strore_view .prd_detail .prd_detail_tab {} #strore_view .prd_detail .prd_detail_tab ul { text-align:center; overflow:hidden; height:56px;} #strore_view .prd_detail .prd_detail_tab ul li { float:left; width:25%; border:1px solid #d2d2d2; border-right:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:55px; border-bottom:1px solid #555; } #strore_view .prd_detail .prd_detail_tab ul li button { background:#f5f5f5; width:100%; height:100%; font-size:15px; color:#888; font-weight:500; border:none;} #strore_view .prd_detail .prd_detail_tab ul li.on { border:1px solid #555; border-bottom:1px solid #fff;} #strore_view .prd_detail .prd_detail_tab ul li.on button { background:#fff; color:#222; } #strore_view .prd_detail .tab_con { font-size:15px; padding:50px 2.5%;} #strore_view .prd_detail .tab_con > section { line-height:1.6; display:none;} #strore_view .prd_detail .tab_con > section:first-child { display:block;} /* 북클럽 이벤트*/ #event_list {} #event_list .list_li {} #event_list .list_li > ul {font-size: 0;} #event_list .list_li > ul > li { display: inline-block; width:32.16666666667%; margin-right:1.75%; border:1px solid #ddd; vertical-align: top; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-bottom:30px; position:relative;} #event_list .list_li > ul > li:nth-child(3n) { margin-right:0;} #event_list .list_li > ul > li .img { position:relative; padding:18px;} #event_list .list_li > ul > li .img .date { left:18px; bottom:0; position:absolute; width:calc(100% - 36px); width:-moz-calc(100% - 36px); width:-webkit-calc(100% - 36px); } #event_list .list_li > ul > li .img .date dl { color:#fff; } #event_list .list_li > ul > li .img .date dl p { top:50%; position:absolute; width:100%; left:0; padding:0 20px; font-size: 16px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } #event_list .list_li > ul > li .img .date dl dt { background:rgba(255,190,0,0.8); width:110px; text-align:center;} #event_list .list_li > ul > li .img .date dl dd { background:rgba(0,0,0,0.8); padding:0 20px; width:calc(100% - 110px); width:-webkit-calc(100% - 110px); width:-moz-calc(100% - 110px); } #event_list .list_li > ul > li .img .date dl dt, #event_list .list_li > ul > li .img .date dl dd { height:50px; position:relative; float:left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} #event_list .list_li > ul > li .tit { color:#222; font-weight:500; line-height:1.375em; padding:20px 18px;font-size: 16px;} #event_list .list_li > ul > li .tit p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #event_list .list_li > ul > li .write { background:#f7f7f7; position:relative; padding:16px 18px; } #event_list .list_li > ul > li .write ul {} #event_list .list_li > ul > li .write ul li { font-weight:300; font-size:14px; color:#777; } #event_list .list_li > ul > li .write ul li span { display:inline-block; width:58px; color:#555;} #event_list .list_li > ul > li .write ul li:last-child { position:absolute; right:18px; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } #event_list .list_li > ul > li .hover_txt { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); text-align:center; color:#fff; font-weight:700; line-height:1.5; opacity:0;font-size: 16px; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; } #event_list .list_li > ul > li .hover_txt > div { position:absolute; width:100%; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } #event_list .list_li > ul > li a:hover .hover_txt { opacity:1;} .event_link { margin-top:50px;} .event_link a { display:block; width:260px; height:60px; line-height:60px; color:#fff; background:#ffbe00; text-align:center; border-radius:10px; overflow:hidden; margin:0 auto; border:1px solid #eeb203; box-shadow:7px 7px 7px rgba(0,0,0,0.15); text-shadow:0 0 3px rgba(0,0,0,0.2);} .event_link a span { display:inline-block; padding-right:36px; position:relative;} .event_link a span:after { content:url("/html/img/sub/arr_s3.png"); position:absolute; right:0; top:0;} /* 이 달의 도서 */ #month_list { } #month_list .txt_box { border-top:1px solid #555; border-bottom:1px solid #ccc; padding:30px; font-size:15px;} #month_list .txt_box .img { text-align:center;} #month_list .txt_box .txt { line-height:1.733em; font-weight:300; color:#333; margin-top:46px;} #month_list .select_s1 { margin-top:-46px; } #month_list .select_s1 { margin-top:-46px; } #month_list .btn_group { text-align:right; margin-top:70px;} #month_list .btn_group ul { display:inline-block;} #month_list .btn_group ul li { width:100px; height:46px; line-height:46px; border:1px solid #888; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-radius:23px; float:left; margin-right:6px; overflow:hidden;} #month_list .btn_group ul li:last-child { margin:0; } #month_list .btn_group ul li a { display:block; text-align:left; line-height:44px; padding-left:14px; position:relative;} #month_list .btn_group ul li a span { display:inline-block; position:relative; padding-left:24px;} #month_list .btn_group ul li a span:before { position:absolute; left:0; top:3px;} #month_list .btn_group ul li.heart_btn a span:before { content:url("/html/img/sub/heart_icon.png"); } #month_list .btn_group ul li.comment_btn a span:before { content:url("/html/img/sub/comment_icon.png"); } #month_list .btn_group ul li .hover { position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; font-size:14px; color:#888; opacity:0; background:#fff; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; } #month_list .btn_group ul li:hover { border:1px solid #cccccc;} #month_list .btn_group ul li:hover .hover { opacity:1 } .comment_wrap { margin-top:40px;} /* 미션 */ .mission_view { } .mission_view .list { border-top:2px solid #555; padding-bottom:50px ;border-bottom:1px solid #555; margin-bottom:40px;} .mission_view .list > div { margin-bottom:10px; } .mission_view .list > div:last-child { margin:0; } .mission_view .list ul {} .mission_view .list ul li { font-size:0; letter-spacing:-4px; border-bottom:1px solid #ddd;} .mission_view .list ul li:last-child { border:none; } .mission_view .list ul li strong { color:#333; } .mission_view .list .info { border-bottom:1px solid #ddd; } .mission_view .list .info ul li > div > span { background:#f7f7f7;} .mission_view .list ul li > div > span, .mission_view .list ul li > div > div { display:inline-block; vertical-align:middle; letter-spacing:-0.5px; font-size:15px; min-height:60px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .mission_view .list ul li > div > span { width:128px; text-align:center; line-height:60px; color:#333; } .mission_view .list ul li > div > div { padding:0 10px; position:relative; width:calc(100% - 128px); width:-webkit-calc(100% - 128px); width:-moz-calc(100% - 128px); } .mission_view .list ul li > div section { position:absolute; top:50%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); width:calc(100% - 20px); width:-moz-calc(100% - 20px); width:-webkit-calc(100% - 20px); } /* .mission_view .list .question_list ul { border:1px solid #ddd; } */ .mission_view .list .question_list ul li { margin-bottom:10px; border:1px solid #ddd;} .mission_view .list .question_list ul li:last-child { margin:0; } .mission_view .list .question_list ul li > div > span { background:#fdf9ed; border-right:1px solid #ddd;} .mission_view .list .question_list ul li > div { border-bottom:1px solid #ddd;} .mission_view .list .question_list ul li > div:last-child { border:none; } .mission_view .list .question_list ul li input[type="text"] { width:100%; height:32px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #ddd; padding:0 10px;} .mission_view .list .event_link { margin-top:50px !important; } .mission_view .list .chk_q section { overflow:hidden;} .mission_view .list .chk_q section > div { float:left; margin-right:16px;} .mission_view .list .chk_q section input[type="radio"] { position:absolute; left:-9999px; } .mission_view .list .chk_q section label span { width:14px; height:14px; border:1px solid #676767; border-radius:50%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; display:inline-block; vertical-align:middle; margin-right:5px; margin-top:-3px; position:relative;} .mission_view .list .chk_q section input[type="radio"]:checked + label span:after { content:""; width:8px; height:8px; background:#676767; border-radius:50%; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); } .mission_view .list .comment_q { } .link_s1 { overflow:hidden;} .link_s1 a { display:inline-block; /* width:120px; */ padding:0 10px; height:30px; line-height:30px; color:#fff; font-size:13px; border-radius:3px; margin-right:6px; text-align:center; } .link_s1 a:last-child { margin:0; } .link_s1 a span { display:inline-block; padding-right:10px; position:relative; padding-right:18px;} .link_s1 a span:after { content:url("/html/img/sub/arr_s2.png"); position:absolute; right:0; top:-3px;} /* .link_s1 a.view_btn { background:#555; } */ /* .link_s1 a.apply_btn { background:#ffbe00; } */ /* 미션 댓글 보기*/ #comment_wrap { position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000; display:none; } #comment_wrap .bg { background:rgba(0,0,0,0.5); position:absolute; width:100%; height:100%; } #comment_wrap .list_wrap::-webkit-scrollbar {display:none;} #comment_wrap .list_wrap > div { display:none;} #comment_wrap .list_wrap { background:#fff; position:absolute; left:50%; top:50%; padding-bottom:48px; width:90%; max-width:620px; height:80%; overflow:scroll; max-height:800px; overflow: hidden; overflow-y: auto;-ms-overflow-style: none; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); } #comment_wrap .list_wrap .top { border-bottom:1px solid #eee; padding:0 20px; height:90px; position:relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #comment_wrap .list_wrap .top .tit { font-size:18px; color:#333; font-weight:700; padding-top:40px;} #comment_wrap .list_wrap .top .tit span {} #comment_wrap .list_wrap .top .align { position:absolute; right:20px; bottom:28px;} #comment_wrap .list_wrap .top .align ul {} #comment_wrap .list_wrap .top .align ul li { float:left; padding-right:10px; margin-right:10px; position:relative;} #comment_wrap .list_wrap .top .align ul li:last-child { margin:0; padding:0;} #comment_wrap .list_wrap .top .align ul li:after { content:""; width:1px; height:13px; background:#e6e6e6; display:block; position:absolute; right:0; top:50%; margin-top:-6px;} #comment_wrap .list_wrap .top .align ul li:last-child:after { display:none; } #comment_wrap .list_wrap .top .align ul li a { color:#888; font-size:14px;} #comment_wrap .list_wrap .top .align ul li.on a { color:#333; } #comment_wrap .list_wrap .list { padding:0 20px; line-height:1.4;} #comment_wrap .list_wrap .list ul {} #comment_wrap .list_wrap .list ul li { font-size:0; letter-spacing:-4px; border-bottom:1px solid #eee; /*height:150px;*/ padding:25px 0 0 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; overflow:hidden;} #comment_wrap .list_wrap .list ul li > div { display:inline-block; vertical-align:middle; letter-spacing:-0.5px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} #comment_wrap .list_wrap .list ul li .heart, #comment_wrap .list_wrap .profile { text-align:center; width:90px;} #comment_wrap .list_wrap .profile .img { width:50px; height:50px; border-radius:50%; overflow:hidden; margin:0 auto;} #comment_wrap .list_wrap .profile .name { font-size:14px; color:#333; margin-top:10px;} #comment_wrap .list_wrap .txt_box { font-size:15px; padding:0 20px; word-break: break-all; width:calc(100% - 180px); width:-webkit-calc(100% - 180px); width:-moz-calc(100% - 180px); } #comment_wrap .list_wrap .txt_box .date { font-size:14px; color:#888; text-align:right; margin-top:20px;} #comment_wrap .list_wrap .txt_box a { color:#0099ff; } #comment_wrap .list_wrap .list ul li .heart { font-size:14px; color:#333;} #comment_wrap .list_wrap .list ul li .heart button { width:18px; height:16px; border:none; margin-top:5px; background:url("/html/img/sub/heart_icon_off.png") no-repeat;} #comment_wrap .list_wrap .list ul li .heart button.on { background:url("/html/img/sub/heart_icon_on.png") no-repeat;} #comment_wrap .paging { margin-top:30px; } #comment_wrap .list_wrap .join_form ul li { height:auto; padding:25px 0 30px;} #comment_wrap .list_wrap .join_form ul li > div { vertical-align:top; } #comment_wrap .list_wrap .join_form .txt_box { width:calc(100% - 9px); width:-webkit-calc(100% - 90px); width:-moz-calc(100% - 90px); } #comment_wrap .list_wrap .join_form .txt_box textarea { background:#f9f9f9; border:1px solid #eee; width:100%; height:120px; padding:20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; resize:none;} #comment_wrap .list_wrap .join_form .link_s1 { width:100%; text-align:right; padding:0 20px; margin-top:5px;} /* 강연 */ #lecture_list {} #lecture_list .list_li {} #lecture_list .list_li > ul {} #lecture_list .list_li > ul > li { float:left; width:32.16666666667%; margin-right:1.75%; border:1px solid #ddd; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-bottom:30px; position:relative; padding:18px;} #lecture_list .list_li > ul > li:nth-child(3n) { margin-right:0;} #lecture_list .list_li > ul > li .img { position:relative; margin-bottom:18px;} #lecture_list .list_li > ul > li .img img { width:100% !important; height:auto !important; } #lecture_list .list_li > ul > li .tit { color:#222; font-weight:500; line-height:1.375em; margin-bottom:12px;} #lecture_list .list_li > ul > li .tit p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #lecture_list .list_li > ul > li .info { position:relative; padding:0;font-size:14px; margin-top:18px;} #lecture_list .list_li > ul > li .info > div { overflow:hidden; margin-bottom:5px;} #lecture_list .list_li > ul > li .info > div:last-child { margin:0; } #lecture_list .list_li > ul > li .info > div > span { width:70px;} #lecture_list .list_li > ul > li .info > div > p { color:#888; width:calc(100% - 70px); width:-webkit-calc(100% - 70px); width:-moz-calc(100% - 70px); } #lecture_list .list_li > ul > li .info > div > span, #lecture_list .list_li > ul > li .info > div > p { float:left;} #lecture_list .list_li > ul > li .hover_txt { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); text-align:center; color:#fff; font-weight:700; line-height:1.5; opacity:0; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; } #lecture_list .list_li > ul > li .hover_txt > div { position:absolute; width:100%; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } #lecture_list .list_li > ul > li a:hover .hover_txt { opacity:1;} /* lecture_view*/ #lecture_view {} #lecture_view .item_top { background:#f5f5f5; margin-bottom:70px;} #lecture_view .item_top > div {} #lecture_view .item_top > div > div { float:left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:508px; position:relative;} #lecture_view .item_top .main_img { width:calc(100% - 400px); width:-webkit-calc(100% - 400px); width:-moz-calc(100% - 400px); } #lecture_view .item_top .main_img .thum_list { position:absolute; right:0; top:0; height:100%; width:140px; padding:0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; background: #f2efec; background: -moz-linear-gradient(to bottom, #fff, #f2efec); background: -webkit-linear-gradient(to bottom, #fff, #f2efec); background: linear-gradient(to bottom, #fff, #f2efec); } #lecture_view .item_top .main_img .thum_list .slick-arrow { width:13px; height:8px; border:none; border:none; text-indent:-9999px; position:absolute; width:100%; } #lecture_view .item_top .main_img .thum_list .slick-prev { background:url("/html/img/sub/slick-prev_s4.png") no-repeat center; top:-20px;} #lecture_view .item_top .main_img .thum_list .slick-next { background:url("/html/img/sub/slick-next_s4.png") no-repeat center; bottom:-20px;} #lecture_view .item_top .main_img .thum_list .slick-list { margin:-3px 0; height: 100% !important;} #lecture_view .item_top .main_img .thum_list .slick-slide { margin:3px 0;} #lecture_view .item_top .main_img .thum_list .slick-slide img { max-height:80px;} #lecture_view .item_top .main_img .thum_list .slick-slider { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:440px; top:50%; margin-top:-220px;} #lecture_view .item_top .main_img .thum_list .slick-current { } #lecture_view .item_top .main_img .thum_list a { display:block; position:relative;} #lecture_view .item_top .main_img .thum_list .slick-current a:after { content:""; display:block; width:100%; height:100%; border:1px solid #ee7623; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position:absolute; left:0; top:0;} #lecture_view .item_top .item_sel_info { width:380px; border:1px solid #ddd;background:#fff; padding:18px 38px;} #lecture_view .item_top .item_sel_info .tit { font-size:18px; color:#222; font-weight:700; line-height:1.333em; border-bottom:1px solid #e5e5e5; padding-bottom:20px;} #lecture_view .item_top .item_sel_info .list {} #lecture_view .item_top .item_sel_info .list ul {} #lecture_view .item_top .item_sel_info .list ul li { border-bottom:1px solid #e5e5e5; padding:18px 10px; overflow:hidden; } #lecture_view .item_top .item_sel_info .list ul li:last-child { border:none;} #lecture_view .item_top .item_sel_info .list ul li > span, #lecture_view .item_top .item_sel_info .list ul li > div { float:left; display:block; line-height:1.3;} #lecture_view .item_top .item_sel_info .list ul li > span { color:#222; font-weight:500; font-size:15px; width:80px; } #lecture_view .item_top .item_sel_info .list ul li > div { margin-top:-2px; width:calc(100% - 80px); width:-webkit-calc(100% - 80px); width:-moz-calc(100% - 80px); } #lecture_view .item_top .item_sel_info .list ul li strong { color:#333; display:block; font-weight:500; margin-bottom:3px;} #lecture_view .item_top .item_sel_info .list ul li .day_on { overflow:hidden;} #lecture_view .item_top .item_sel_info .list ul li .day_on em { display:block; float:left; width:26px; height:26px; line-height:26px; background:#f0f0f0; text-align:center; font-size:14px; border-radius:2px; margin-right:2px;} #lecture_view .item_top .item_sel_info .list ul li .day_on em:last-child { margin:0; } #lecture_view .item_top .item_sel_info .list ul li .day_on em.on { color:#fff; background:#ee7623;} #lecture_view .item_top .price { margin-top:-3px;} #lecture_view .item_top .apply_btn { text-align:center; } #lecture_view .item_top .apply_btn a { display:block; height:60px; line-height:60px; color:#fff; background:#e10808; font-sizE:17px; font-weight:500; position:relative;} #lecture_view .item_top .apply_btn a:after { content:""; border:1px solid rgba(255,255,255,0.25); position:absolute; left:1px; top:1px; display:block; width:calc(100% - 2px); width:-webkit-calc(100% - 2px); width:-moz-calc(100% - 2px); height:calc(100% - 2px); height:-webkit-calc(100% - 2px); height:-moz-calc(100% - 2px); } #lecture_view .detail_con_box { padding:50px 2.5%;} #lecture_view .detail_con_box > div { display:none;} #lecture_view .detail_con_box > div:first-child { display:block;} #lecture_view .detail_con_box .item_info > div { float:left;} #lecture_view .detail_con_box .item_info .img { width:280px; margin-right:5.61403508772%;} #lecture_view .detail_con_box .item_info .txt_box { line-height:1.4; width:calc(100% - 280px - 5.61403508772%); width:-moz-calc(100% - 280px - 5.61403508772%); width:-webkit-calc(100% - 280px - 5.61403508772%); } #lecture_view .detail_con_box .item_info .txt_box .tit { color:#333; } #lecture_view .detail_con_box .item_info .txt_box .tit span { font-size:18px; font-weight:300;} #lecture_view .detail_con_box .item_info .txt_box .name p, #lecture_view .detail_con_box .item_info .txt_box .tit p { font-size:28px; font-weight:700;} #lecture_view .detail_con_box .item_info .txt_box .name { margin-top:20px;} #lecture_view .detail_con_box .item_info .txt_box .name span { width:96px; height:46px; line-height:46px; border-radius:15px;background:#ee7623; color:#fff; text-align:center; font-size:18px; font-weight:700; margin-right:16px;} #lecture_view .detail_con_box .item_info .txt_box .name p { color:#222;} #lecture_view .detail_con_box .item_info .txt_box .name span, #lecture_view .detail_con_box .item_info .txt_box .name p { display:inline-block; vertical-align:middle;} #lecture_view .detail_con_box .teacher_info { margin-top:70px;} #lecture_view .detail_con_box .teacher_info > div { float:left; width:32%; margin-right:2%; line-height:1.4; color:#333;} #lecture_view .detail_con_box .teacher_info > div ul {} #lecture_view .detail_con_box .teacher_info > div ul li { margin-bottom:5px;} #lecture_view .detail_con_box .teacher_info > div ul li:last-child { margin:0; } #lecture_view .detail_con_box .teacher_info > div:last-child { margin:0;} .book_cate { margin-top:38px;} .book_cate button { display:none;} .book_cate ul { text-align:left; font-size:0; letter-spacing:-4px; } .book_cate ul li { display:inline-block; margin-right:10px; padding-right:12px; letter-spacing:-0.5px; font-size:15px; position:relative; margin-top:10px;} .book_cate ul li:after { content:""; width:1px; height:10px; background:#ddd; display:block; position:absolute; right:0; top:50%; margin-top:-5px; } .book_cate ul li:last-child { margin-right:0; padding:0;} .book_cate ul li:last-child:after { display:none;} .book_cate ul li a { font-size:15px; } .book_cate ul li.on a { color:#ffbe00} .book_cate_mo {display: none;} /* 동영상 목록*/ .mv_list .tit { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .video_frame { position:fixed; width:100%; height:100%; left:0; top:0; z-index:19999; background:rgba(0,0,0,0.6); display:none;} .video_frame > div { position:absolute; left:50%; top:50%; height:0; padding-top:22.67143983184%; width:90%; max-width:767px; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); } .video_frame > div { } .video_frame iframe { position:absolute; left:0; top:0; width:100%; height:100%; max-height:100%;} .video_frame .close_btn { position:absolute; right:0; top:-40px;} .video_frame .close_btn button { width:30px; height:30px; border:1px solid #fff; background:url("/html/img/sub/close_btn_w.png") no-repeat center; } /* 회원 서비스 */ .b_cont_box { text-align:center;} .b_cont_box img { cursor:pointer;} #pop_wrap { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:10000; display:none;} #pop_wrap > div { position:absolute; left:50%; top:50%; height:100%; max-width:1200px; width:80%; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); } #pop_wrap .img { overflow: hidden; overflow-y: auto;-ms-overflow-style: none; height:100%;} #pop_wrap .img::-webkit-scrollbar {display:none;} #pop_wrap .close_btn { position:absolute; right:0; top:0;} #pop_wrap .close_btn button { width:30px; height:30px; border:none; background:url("/html/img/sub/close_btn_w.png") no-repeat center #ffbe00; border:none; background-size:15px !important;}