@charset "utf-8"; /**************************************************************** * quickLibraryPopup ****************************************************************/ #quickLibraryPopup{width:100vw;height:auto;position:relative;margin:auto;border-top-right-radius:13px;border-top-left-radius:13px;padding:20px 16px 16px 16px;background:#FFF;box-shadow:0 -1px 4px 0 rgba(0, 0, 0, 0.21);} #quickLibraryPopup .close_button{height:24px;position:absolute;right:12px;top:-39px;} #quickLibraryPopup .game_name{line-height:27px;text-align:center;} #quickLibraryPopup .game_name .mobile_icon{height:24px;vertical-align:top;margin:1px 4px 0 0;} #quickLibraryPopup .review_point_wrap{width:100%;height:100px;padding:16px 0;border-radius:12px;background:#e6ebf7;margin-top:16px;} #quickLibraryPopup .review_point_wrap .review_point_text{line-height:20px;text-align:center;} #quickLibraryPopup .review_point_wrap .review_point{width:200px;height:40px;margin:auto;position:relative;margin-bottom:8px;} #quickLibraryPopup .review_point_wrap .review_point_star{height:40px;vertical-align:top;} #quickLibraryPopup .review_point_wrap .background{position:absolute;top:0;left:0;z-index:1;} #quickLibraryPopup .review_point_wrap .foreground{position:absolute;top:0;left:0;z-index:2;} #quickLibraryPopup .review_point_wrap .drag_area{position:absolute;width:220px;height:40px;top:0;left:-20px;z-index:3;} #quickLibraryPopup .review_button_wrap .write_review_button{width:100%;height:60px;border-radius:12px;background:#e6ebf7;margin-top:8px;text-align:center;line-height:60px;} #quickLibraryPopup .review_button_wrap .write_review_button img{vertical-align:top;height:24px;margin:19px 4px 0 0;} #quickLibraryPopup .review_button_wrap .view_review_wrap{width:100%;height:102px;border-radius:12px;background:#e6ebf7;margin-top:8px;text-align:center;padding:16px;} #quickLibraryPopup .review_button_wrap .view_review_wrap .view_review_text{line-height:17px;} #quickLibraryPopup .review_button_wrap .view_review_wrap .review_content_preview{line-height:22px;height:22px;margin-top:5px;} #quickLibraryPopup .review_button_wrap .view_review_wrap .view_review_button_wrap{line-height:19px;margin-top:7px;} #quickLibraryPopup .review_button_wrap .view_review_wrap .modify_button{margin-right:20px;} #quickLibraryPopup .review_button_wrap .view_review_wrap .modify_icon{height:16px;vertical-align:top;margin:2px 2px 0 0;} #quickLibraryPopup .state_button_wrap{width:100%;height:95px;padding:16px 12px;border-radius:12px;background:#e6ebf7;margin-top:8px;text-align:center;} #quickLibraryPopup .state_button_wrap.platform_game{opacity:0.5;} #quickLibraryPopup .state_button_wrap .library_button_item{width:20%;max-width:68px;height:63px;position:relative;vertical-align:top;} #quickLibraryPopup .state_button_wrap .library_button_item .library_state_button{width:100%;height:63px;position:absolute;top:0;left:0;z-index:10;} #quickLibraryPopup .state_button_wrap .library_button_item .background{width:40px;height:40px;border-radius:20px;background:#FFF;position:absolute;top:0px;left:50%;z-index:1;transform:translateX(-50%);overflow:hidden;transition:background 0.1s linear;} #quickLibraryPopup .state_button_wrap .library_button_item .background .selected_background{width:42px;height:42px;border-radius:21px;position:absolute;top:-1px;left:-1px;transform:scale(0);transition:transform 0.15s linear;} #quickLibraryPopup .state_button_wrap .library_button_item.selected .selected_background{transform:scale(1);} #quickLibraryPopup .state_button_wrap .library_button_item .state_icon{position:absolute;height:22px;top:9px;left:50%;transform:translateX(-50%);z-index:5;} #quickLibraryPopup .state_button_wrap .library_state_1 .selected_background{background:#3f9dff;} #quickLibraryPopup .state_button_wrap .library_state_2 .selected_background{background:#00b597;} #quickLibraryPopup .state_button_wrap .library_state_3 .selected_background{background:#e75f5b;} #quickLibraryPopup .state_button_wrap .library_state_4 .selected_background{background:#3b4757;} #quickLibraryPopup .state_button_wrap .library_state_5 .selected_background{background:#f99b00;} #quickLibraryPopup .state_button_wrap .library_button_item .button_state_text{line-height:17px;position:absolute;bottom:0;text-align:center;width:100%;} #quickLibraryPopup .rating_black_list_wrap{width:100%;height:58px;border-radius:12px;background:#e6ebf7;margin-top:8px;} #quickLibraryPopup .rating_black_list_wrap .black_list_button{display:block;text-align:center;line-height:58px;border-radius:12px;} #quickLibraryPopup .rating_black_list_wrap .black_list_button.selected{background:#ec5245;color:#FFF;} #quickLibraryPopup .rating_black_list_wrap .black_list_icon{height:24px;vertical-align:top;margin:17px 4px 0 0;} #quickLibraryPopup .market_link_wrap{width:100%;height:58px;border-radius:12px;background:#e6ebf7;margin-top:8px;} #quickLibraryPopup .market_link_wrap .market_link_button{display:block;text-align:center;line-height:58px;vertical-align:top;} #quickLibraryPopup .market_link_wrap .market_link_button .market_icon{height:24px;vertical-align:top;margin:17px 4px 0 0;} #quickLibraryPopup .submit_button_wrap{margin-top:16px;} #quickLibraryPopup .submit_button_wrap .submit_button{width:100%;} @media only screen and (max-width:349px){ #quickLibraryPopup .state_button_wrap .library_button_item .button_state_text{font-size:10px;} } /**************************************************************** * writeReviewPopup ****************************************************************/ #writeReviewPopup{width:694px;margin:auto;background:#FFF;border-radius:8px;padding-bottom:16px;box-shadow:0 3px 12px 0 rgba(61, 65, 77, 0.13);position:relative;} #writeReviewPopup .header{padding:16px 20px;border-bottom:solid 1px #ebeff8;line-height:24px;} #writeReviewPopup .header .game_name{max-width:calc(100% - 120px);vertical-align:top;} #writeReviewPopup .header .game_name .mobile_icon_new{height:22px;vertical-align:top;margin:1px 4px 0 0;} #writeReviewPopup .header .close_button{float:right;cursor:pointer;height:24px;vertical-align:top;} #writeReviewPopup .left_title{width:74px;vertical-align:top;} #writeReviewPopup .library_info{padding:0 20px;user-select:none;position:relative;} #writeReviewPopup .library_info .review_point_wrap{line-height:40px;margin-top:20px;} #writeReviewPopup .library_info .review_point_wrap .review_point{vertical-align:top;position:relative;height:40px;width:200px;} #writeReviewPopup .library_info .review_point_wrap .review_point .background{position:absolute;top:0;left:0;} #writeReviewPopup .library_info .review_point_wrap .review_point .foreground{position:absolute;top:0;left:0;} #writeReviewPopup .library_info .review_point_wrap .review_point .review_point_star{height:40px;vertical-align:top;} #writeReviewPopup .library_info .review_point_wrap .review_point .drag_area{position:absolute;width:220px;left:-20px;top:0;height:40px;cursor:pointer;} #writeReviewPopup .library_info .review_point_wrap .review_point_text{margin-left:12px;vertical-align:top;line-height:23px;margin-top:12px;} #writeReviewPopup .library_info .library_state_wrap{line-height:36px;margin-top:20px;} #writeReviewPopup .library_info .library_state_wrap .state_button_wrap{width:220px;height:36px;margin-left:-4px;vertical-align:top;} #writeReviewPopup .library_info .library_state_wrap .state_button_wrap.platform_game{opacity:0.3;} #writeReviewPopup .library_info .library_state_wrap .library_button_item{width:44px;height:36px;position:relative;padding:0 4px;} #writeReviewPopup .library_info .library_state_wrap .library_button_item .library_state_button{width:100%;height:100%;position:absolute;top:0;left:0px;z-index:10;cursor:pointer;} #writeReviewPopup .library_info .library_state_wrap .platform_game .library_button_item .library_state_button{cursor:default;} #writeReviewPopup .library_info .library_state_wrap .library_button_item .background{width:36px;height:36px;border-radius:18px;background:#ebeff8;position:absolute;top:0px;left:4px;z-index:1;overflow:hidden;transition:background 0.1s linear;} #writeReviewPopup .library_info .library_state_wrap .library_button_item .background .selected_background{width:90px;height:90px;border-radius:45px;position:absolute;top:-27px;left:-28px;transform:scale(0);transition:transform 0.1s linear;} #writeReviewPopup .library_info .library_state_wrap .library_button_item.selected .selected_background{transform:scale(1);transition:transform 0.25s linear;} #writeReviewPopup .library_info .library_state_wrap .library_button_item .state_icon{position:absolute;height:18px;top:9px;left:13px;z-index:5;} #writeReviewPopup .library_info .library_state_wrap .library_state_1.can_hover:hover .background{background:#bfe1ff;} #writeReviewPopup .library_info .library_state_wrap .library_state_2.can_hover:hover .background{background:#adeae1;} #writeReviewPopup .library_info .library_state_wrap .library_state_3.can_hover:hover .background{background:#fbd0d4;} #writeReviewPopup .library_info .library_state_wrap .library_state_4.can_hover:hover .background{background:#ced8e5;} #writeReviewPopup .library_info .library_state_wrap .library_state_5.can_hover:hover .background{background:#fff5bd;} #writeReviewPopup .library_info .library_state_wrap .library_state_1 .selected_background{background:#3f9dff;} #writeReviewPopup .library_info .library_state_wrap .library_state_2 .selected_background{background:#00b597;} #writeReviewPopup .library_info .library_state_wrap .library_state_3 .selected_background{background:#e75f5b;} #writeReviewPopup .library_info .library_state_wrap .library_state_4 .selected_background{background:#3b4757;} #writeReviewPopup .library_info .library_state_wrap .library_state_5 .selected_background{background:#f99b00;} #writeReviewPopup .library_info .library_state_wrap .state_text{margin-left:12px;vertical-align:top;line-height:36px;} #writeReviewPopup .library_info .library_platform_wrap{line-height:32px;margin-top:20px;display:none;} #writeReviewPopup .library_info .library_platform_wrap .platform_list_wrap{width:calc(100% - 74px);} #writeReviewPopup .library_info .library_platform_wrap .platform_button{border-radius:16px;background:#ebeff8;padding:0 12px;margin-right:6px;margin-bottom:4px;cursor:pointer;} #writeReviewPopup .library_info .library_platform_wrap .platform_button:hover{background:#e5f3ff;} #writeReviewPopup .library_info .library_platform_wrap .platform_button:last-child{margin-right:0px;} #writeReviewPopup .library_info .library_platform_wrap .platform_button.selected{background:#3f9dff;color:#FFF;} #writeReviewPopup .library_info .open_platform_button{line-height:18px;position:absolute;right:20px;bottom:-14px;cursor:pointer;} #writeReviewPopup .editor_group_wrap{margin-top:20px;padding:0 20px;} #writeReviewPopup .editor_group_wrap .left_title{line-height:20px;} #writeReviewPopup .editor_group_wrap .editor_wrap{display:inline-block;vertical-align:top;width:calc(100% - 74px);} #writeReviewPopup .editor_group_wrap .guide_text_wrap{padding:16px;} #writeReviewPopup .editor_group_wrap .guide_icon{height:20px;vertical-align:top;margin-right:4px;} #writeReviewPopup .editor_group_wrap .guide_text{line-height:20px;width:calc(100% - 24px);vertical-align:top;transform:rotate3d(1,0,0,90deg);transition:transform 0.3s ease-in;} #writeReviewPopup .editor_group_wrap .guide_text.show_text{transform:rotate3d(1,0,0,0deg);transition:transform 0.3s ease-out;} #writeReviewPopup .open_state_wrap{margin-top:16px;padding:0 20px;line-height:36px;} #writeReviewPopup .open_state_wrap .open_state_select{height:36px;background:#ebeff8;border-radius:8px;padding:6px 8px 6px 12px;vertical-align:top;} #writeReviewPopup .open_state_wrap .open_state_select .select_option_wrap{width:132px;top:40px;} #writeReviewPopup .submit_button_wrap{position:absolute;right:20px;bottom:16px;} #writeReviewPopup .submit_button_wrap .input_check_group{margin-right:20px;line-height:36px;} #writeReviewPopup .submit_button_wrap .input_check_group .checkmark{top:9px;} #writeReviewPopup .submit_button_wrap .submit_button{width:84px;} @media only screen and (max-width:700px) { #writeReviewPopup{width:620px;} #writeReviewPopup .left_title{display:none;} #writeReviewPopup .editor_wrap{width:100%;} } /**************************************************************** * writeReviewMobilePopup ****************************************************************/ #writeReviewMobilePopup{width:100vw;height:100vh;background:#FFF;padding-top:45px;position:absolute;top:0;left:0;overflow:auto;} #writeReviewMobilePopup .write_review_header{width:100%;height:45px;position:fixed;top:0;left:0;z-index:100;border-bottom:solid 1px #ebeff8;line-height:44px;text-align:center;background:#FFF;} #writeReviewMobilePopup .write_review_header .close_button{position:absolute;left:16px;top:0px;width:36px;} #writeReviewMobilePopup .write_review_header .game_name{line-height:44px;width:calc(100% - 144px);} #writeReviewMobilePopup .write_review_header .game_name .mobile_icon_new{height:20px;vertical-align:top;margin-top:12px;} #writeReviewMobilePopup .write_review_header .submit_button{position:absolute;right:16px;top:8px;width:48px;} #writeReviewMobilePopup .write_post_wrap{width:100vw;height:100%;padding-bottom:200px;position:fixed;top:45px;left:0;overflow:auto;} #writeReviewMobilePopup .write_review_row{width:100%;padding:16px;} #writeReviewMobilePopup .left_title{width:64px;vertical-align:top;} #writeReviewMobilePopup .row_divider{width:100%;height:1px;margin:0 auto;background:#ebeff8;} #writeReviewMobilePopup .review_point_wrap{line-height:36px;} #writeReviewMobilePopup .review_point_wrap .review_point{vertical-align:top;position:relative;height:36px;width:180px;} #writeReviewMobilePopup .review_point_wrap .review_point .background{position:absolute;top:0;left:0;} #writeReviewMobilePopup .review_point_wrap .review_point .foreground{position:absolute;top:0;left:0;} #writeReviewMobilePopup .review_point_wrap .review_point .review_point_star{height:36px;vertical-align:top;} #writeReviewMobilePopup .review_point_wrap .review_point .drag_area{position:absolute;width:198px;left:-18px;top:0;height:36px;cursor:pointer;} #writeReviewMobilePopup .review_point_wrap .review_point_text{margin-left:8px;vertical-align:top;} #writeReviewMobilePopup .library_state_wrap{line-height:36px;} #writeReviewMobilePopup .library_state_wrap .state_button_wrap{width:210px;height:36px;margin-left:-3px;vertical-align:top;} #writeReviewMobilePopup .library_state_wrap .state_button_wrap.platform_game{opacity:0.3;} #writeReviewMobilePopup .library_state_wrap .library_button_item{width:42px;height:36px;position:relative;padding:0 3px;} #writeReviewMobilePopup .library_state_wrap .library_button_item .library_state_button{width:100%;height:100%;position:absolute;top:0;left:0px;z-index:10;cursor:pointer;} #writeReviewMobilePopup .library_state_wrap .library_button_item .background{width:36px;height:36px;border-radius:18px;background:#ebeff8;position:absolute;top:0px;left:3px;z-index:1;overflow:hidden;transition:background 0.1s linear;} #writeReviewMobilePopup .library_state_wrap .library_button_item .background .selected_background{width:90px;height:90px;border-radius:45px;position:absolute;top:-27px;left:-28px;transform:scale(0);transition:transform 0.1s linear;} #writeReviewMobilePopup .library_state_wrap .library_button_item.selected .selected_background{transform:scale(1);transition:transform 0.25s linear;} #writeReviewMobilePopup .library_state_wrap .library_button_item .state_icon{position:absolute;height:18px;top:9px;left:12px;z-index:5;} #writeReviewMobilePopup .library_state_wrap .library_state_1 .selected_background{background:#3f9dff;} #writeReviewMobilePopup .library_state_wrap .library_state_2 .selected_background{background:#00b597;} #writeReviewMobilePopup .library_state_wrap .library_state_3 .selected_background{background:#e75f5b;} #writeReviewMobilePopup .library_state_wrap .library_state_4 .selected_background{background:#3b4757;} #writeReviewMobilePopup .library_state_wrap .library_state_5 .selected_background{background:#f99b00;} #writeReviewMobilePopup .library_state_wrap .state_text{margin-left:6px;vertical-align:top;} #writeReviewMobilePopup .editor_wrap{display:inline-block;vertical-align:top;width:100%;} #writeReviewMobilePopup .editor_wrap .guide_text_wrap{padding:16px;} #writeReviewMobilePopup .editor_wrap .guide_icon{height:20px;vertical-align:top;margin-right:4px;} #writeReviewMobilePopup .editor_wrap .guide_text{line-height:20px;width:calc(100% - 24px);vertical-align:top;transform:rotate3d(1,0,0,90deg);transition:transform 0.3s ease-in;} #writeReviewMobilePopup .editor_wrap .guide_text.show_text{transform:rotate3d(1,0,0,0deg);transition:transform 0.3s ease-out;} #writeReviewMobilePopup .open_state_wrap{padding:12px 16px;line-height:36px;} #writeReviewMobilePopup .open_state_wrap .open_state_select{height:36px;background:#ebeff8;border-radius:8px;padding:6px 8px 6px 12px;vertical-align:top;} #writeReviewMobilePopup .open_state_wrap .open_state_select .select_option_wrap{width:132px;top:40px;} #writeReviewMobilePopup .refresh_time_wrap{line-height:20px;} #writeReviewMobilePopup .refresh_time_wrap .input_check_group .checkmark{top:1px;} #writeReviewMobilePopup .library_platform_wrap{line-height:32px;} #writeReviewMobilePopup .library_platform_wrap .platform_list_wrap{width:calc(100% - 74px);} #writeReviewMobilePopup .library_platform_wrap .platform_button{border-radius:16px;background:#ebeff8;padding:0 12px;margin-right:6px;margin-bottom:8px;cursor:pointer;} #writeReviewMobilePopup .library_platform_wrap .platform_button:last-child{margin-right:0px;} #writeReviewMobilePopup .library_platform_wrap .platform_button.selected{background:#3f9dff;color:#FFF;} @media only screen and (max-width:373px){ #writeReviewMobilePopup .left_title{display:none;} } /* @media only screen and (max-width:374px){ #writeReviewMobilePopup .library_info .info_title{width:84px;padding-right:10px;} #writeReviewMobilePopup .library_info .info_item_list{width:calc(100% - 84px);} } */ /**************************************************************** * 에디터 (공통) ****************************************************************/ .write_post_popup .editor_wrap .editor_background{width:580px;background:#ebeff8;border-radius:8px;} .write_post_popup .editor_wrap .editor_toolbox{padding:4px 10px;background:#ebeff8;border-radius:8px;} .write_post_popup .editor_wrap .editor_toolbox .toolbox_icon{height:36px;padding:6px;cursor:pointer;vertical-align:top;} .write_post_popup .editor_wrap .editor_toolbox .toolbox_text{height:36px;line-height:24px;padding:6px;cursor:pointer;vertical-align:top;} .write_post_popup .editor_wrap .editor_toolbox .toolbox_text.selected{color:#3f9dff;} .write_post_popup .editor_wrap .editor_toolbox .divider{width:1px;height:17px;margin:9px 6px;vertical-align:top;background:#ced8e5;} .write_post_popup.overflow_height .editor_wrap .editor_toolbox{position:fixed;top:0;width:580px;z-index:1001;} .write_post_popup .editor_wrap .editor_toolbox .disabled{opacity:0.2;pointer-events:none;} .write_post_popup .editor_wrap .editor_toolbox .hide{display:none;} .write_post_popup .editor_wrap .editor_toolbox .show_line_obj{display:none;} .write_post_popup .editor_wrap .editor_toolbox .show_line_obj.show{display:inline-block;} .write_post_popup .editor_wrap .editor_toolbox .inline_image_line_obj{display:none;} .write_post_popup .editor_wrap .editor_toolbox .inline_image_line_obj.show{display:inline-block;} .write_post_popup .editor_wrap .editor_toolbox .game_link_line_obj{display:none;} .write_post_popup .editor_wrap .editor_toolbox .game_link_line_obj.show{display:inline-block;} .write_post_popup .editor_wrap .editor_toolbox .achievement_link_line_obj{display:none;} .write_post_popup .editor_wrap .editor_toolbox .achievement_link_line_obj.show{display:inline-block;} .write_post_popup .editor_wrap .editor_toolbox .right_toolbox{float:right;} .write_post_popup.overflow_height .write_content_wrap{padding-top:44px;} .write_post_popup .write_content_wrap .content_text_area{width:100%;position:relative;} .write_post_popup .write_content_wrap .editor{padding:0 16px;width:100%;min-height:207px;line-height:22px;white-space:pre-wrap;position:relative;z-index:1;} .write_post_popup .write_content_wrap .editor > p{position:relative;} .write_post_popup .write_content_wrap .editor > p.p_c_title{font-size:20px;font-weight:bold;line-height:28px;} .write_post_popup .write_content_wrap .editor > p.p_c_title .mobile_icon_new{height:24px;margin-top:2px;} .write_post_popup .write_content_wrap .editor_placeholder{position:absolute;top:0px;left:16px;line-height:22px;z-index:0;width:calc(100% - 32px);} @media only screen and (max-width:599px){ .write_post_popup .editor_wrap .editor_background{width:100%;border-radius:0px;} .write_post_popup .editor_wrap .editor_toolbox{padding:6px 10px;border-radius:0px;} .write_post_popup.overflow_height .editor_wrap .editor_toolbox{top:45px;width:100%;} .write_post_popup.overflow_height .write_content_wrap{padding-top:44px;} .write_post_popup .write_content_wrap .editor > p.p_c_title{font-size:18px;font-weight:bold;line-height:26px;} .write_post_popup .write_content_wrap .editor > p.p_c_title .mobile_icon_new{height:22px;margin-top:2px;} } @media only screen and (max-width:375px){ .write_post_popup .editor_wrap .editor_toolbox .right_toolbox{display:none;} } /**************************************************************** * 앨범 (공통) ****************************************************************/ .write_post_popup .image_preview_list{margin:14px 0 0 -2px;width:calc(100% + 4px);position:relative;display:none;} .write_post_popup .image_preview_list .image_preview_wrap{overflow:hidden;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image{background:#FFF;vertical-align:top;width:93px;height:93px;border:solid 1px #ced8e5;position:relative;margin:2px;display:inline-block;user-select:none;cursor:grab;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image.grabbing{cursor:grabbing;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image .album_image{width:91px;height:91px;background-size:cover;background-position:center;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image .button_container{position:absolute;top:-1px;left:-1px;width:93px;height:93px;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image .order_number{text-align:center;position:absolute;top:4px;left:4px;height:24px;width:24px;border-radius:12px;line-height:24px;background:rgba(3,24,39,0.8);} .write_post_popup .image_preview_list .image_preview_wrap .preview_image .container_border{width:100%;height:100%;position:absolute;top:0;left:0;border:solid 2px #3f9dff;display:none;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image:hover .container_border{display:block;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image .delete_button{position:absolute;top:4px;right:4px;height:24px;width:24px;border-radius:12px;padding:4px;cursor:pointer;background:#7f8fa6;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} .write_post_popup .image_preview_list .image_preview_wrap .preview_image .crop_button{position:absolute;bottom:4px;right:4px;height:24px;width:24px;border-radius:12px;padding:4px;cursor:pointer;background:#3f9dff;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} .write_post_popup .image_preview_list .image_preview_wrap .preview_image_placeholder{position:relative;width:93px;height:93px;margin:2px;display:inline-block;text-align:center;line-height:93px;cursor:pointer;background:#ebeff8;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image_placeholder.dragover_on{background:#bfe1ff;} .write_post_popup .image_preview_list .image_preview_wrap .preview_image_placeholder .add_image_icon{height:28px;vertical-align:top;margin-top:32px;} .write_post_popup .image_preview_list .image_preview_wrap #postAlbumImage{vertical-align:top;width:93px;height:93px;opacity:0;position:absolute;top:0;left:0;cursor:pointer;} /**************************************************************** * 모바일 앨범 (공통) ****************************************************************/ .write_post_popup .image_album{overflow:hidden;width:100%;margin-top:16px;border-bottom:solid 1px #ebeff8;padding-bottom:16px;} .write_post_popup .image_album.empty{display:none;} .write_post_popup .image_album .toon_image_wrap{width:100%;height:100%;overflow:hidden;position:relative;text-align:center;} .write_post_popup .image_album .toon_image_wrap .toon_image{position:relative;width:100%;} .write_post_popup .image_album .toon_image_wrap .toon_image img{width:100%;} .write_post_popup .image_album .toon_image_wrap .cover{width:100%;height:50%;position:absolute;bottom:0;} .write_post_popup .image_album .toon_image_wrap .cover .upper{width:100%;height:50%;position:relative;background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));} .write_post_popup .image_album .toon_image_wrap .cover .lower{width:100%;height:50%;position:absolute;background:rgba(0,0,0,0.7);} .write_post_popup .image_album .toon_image_wrap .cover .lower div{position:relative;top:50%;transform:translateY(-50%);} .write_post_popup .image_album .single_image_wrap{width:100%;margin:auto;} .write_post_popup .image_album .multi_image_wrap{width:100%;position:relative;} .write_post_popup .image_album .multi_image_wrap .multi_image_padding{position:absolute;top:0;bottom:0;left:0;right:0;} .write_post_popup .image_album .multi_image_wrap .image_container{float:left;border:solid 1px #FFF;} .write_post_popup .image_album .more_image_cover{width:100%;height:100%;text-align:center;position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.7);} .write_post_popup .image_album .more_image_cover div{position:relative;top:50%;transform:translateY(-50%);} /**************************************************************** * 일지 에디터 (공통) ****************************************************************/ .post_editor .draggable-placeholder{border:dashed 2px #3f9dff;margin:12px auto;width:100%;height:26px;} .post_editor .drop_placeholder{width:100%;height:26px;} .post_editor > span{display:inline;} .line_obj{margin:12px 0px;position:relative;} .line_obj:first-child{margin-top:0px;} .line_obj:last-child{margin-bottom:0px;} .post_editor .line_obj + .line_obj{margin-top:0px;} .post_editor .line_obj a{position:relative;display:inline-block;vertical-align:top;max-width:100%;} .post_editor .line_obj .add_line_top{width:100%;height:12px;position:absolute;top:-12px;left:0;cursor:pointer;display:none;} .post_editor .line_obj:first-child .add_line_top{display:block;} .post_editor .line_obj + .line_obj .add_line_top{display:block;} .post_editor .line_obj .add_line_top:hover::after{width:100%;height:1px;background:#9B9B9B;position:absolute;content:' ';left:0px;top:6px;animation:lineCaret 1.2s linear infinite;} .post_editor .line_obj:last-child .add_line_bottom{display:block;} .post_editor .line_obj.dragging .add_line_top{display:none;} .post_editor .line_obj.dragging .add_line_bottom{display:none;} .post_editor .line_obj .add_line_bottom{width:100%;height:12px;position:absolute;bottom:-12px;left:0;cursor:pointer;display:none;} .post_editor .line_obj .add_line_bottom:hover::after{width:100%;height:1px;background:#9B9B9B;position:absolute;content:' ';left:0px;bottom:6px;animation:lineCaret 1.2s linear infinite;} .post_editor .line_obj .close_button{width:24px;height:24px;border-radius:12px;position:absolute;top:-16px;right:-16px;display:none;background-color:#3f9dff;background-image:url('/images/icon_v3/cancel_w.png');background-size:16px 16px;background-position:center;background-repeat:no-repeat;} .post_editor .line_obj a.selected .close_button{display:block;} .post_editor .line_obj .cover{width:100%;height:100%;position:absolute;border:solid 4px #3f9dff;top:0;left:0;display:none;} .post_editor .line_obj a.selected .cover{display:block;} .post_editor .line_obj.in_block a .cover{display:block;border:dashed 2px #3f9dff;} @keyframes lineCaret { 0%{background:#9B9B9B;}49%{background:#9B9B9B;} 50%{background:none;}100%{background:none;} } @media only screen and (max-width:599px){ .post_editor .line_obj a.selected .close_button{display:none;} } .post_editor .line_obj .line_obj_button_group{position:absolute;height:36px;top:8px;right:8px;background:#FFF;box-shadow:0 6px 10px 6px rgba(3, 24, 39, 0.07);border-radius:18px;padding:4px 12px;user-select:none;} .post_editor .line_obj .line_obj_button_group.small_image{left:calc(100% + 12px);right:auto;min-width:134px;width:max-content;} .post_editor .line_obj .line_obj_button_group.dark_button{background:#7f8fa6;} .post_editor .line_obj .line_obj_button_group .text_button{padding:4px;cursor:pointer;color:#7f8fa6;line-height:20px;font-size:13px;letter-spacing:-0.3px;} .post_editor .line_obj .line_obj_button_group .text_button.selected{color:#3f9dff;font-weight:700;} .post_editor .line_obj .line_obj_button_group.dark_button .text_button{color:#FFF;} .post_editor .line_obj .line_obj_button_group .icon_button{padding:4px;vertical-align:top;height:28px;cursor:pointer;} .post_editor .line_obj .line_obj_button_group .divider{width:1px;height:22px;margin:3px 4px;vertical-align:top;background:#ebeff8;} .line_obj.inline_image{text-align:center;position:relative;width:fit-content;margin-left:auto;margin-right:auto;cursor:pointer;} .line_obj.inline_image .image_preview{max-width:100%;height:auto;vertical-align:top;position:relative;z-index:0} .line_obj.inline_image.half_image .image_preview{width:50%;} .post_editor .line_obj.inline_image{text-align:center;width:auto;} .post_editor .line_obj.inline_image.half_image .image_preview{width:auto;max-width:50%;} .post_editor .line_obj.inline_image.half_image .cover{width:50%;left:50%;transform:translateX(-50%);} .line_obj.game_link_large{user-select:none;} .line_obj.game_link_large a{width:100%;} .line_obj.game_link_large .game_link_wrap{width:100%;border-radius:8px;overflow:hidden;background:#FFF;border:solid 1px #CED8D5;} .line_obj.game_link_large .cover_image{display:inline-block;vertical-align:top;width:165px;height:165px;background-size:cover;background-position:center;border-right:solid 1px #CED8D5;} .line_obj.game_link_large .info_wrap{display:inline-block;width:calc(100% - 165px);vertical-align:top;padding:20px 20px 0 20px;} .line_obj.game_link_large .info_wrap .game_name{line-height:24px;} .line_obj.game_link_large .info_wrap .game_name .mobile_icon_new{height:20px;vertical-align:top;margin:1px 4px 0 0;} .line_obj.game_link_large .info_wrap .score{line-height:16px;height:16px;margin-top:6px;} .line_obj.game_link_large .info_wrap .genre_wrap{margin-top:10px;line-height:24px;height:24px;overflow:hidden;} .line_obj.game_link_large .info_wrap .genre_wrap .genre_item{margin-right:4px;border-radius:6px;background:#ebeff8;padding:0 6px;display:inline-block;} .line_obj.game_link_large .info_wrap .genre_wrap .genre_item:last-child{margin-right:0px;} .line_obj.game_link_large .info_wrap .divider{width:100%;height:1px;margin-top:25px;background:#ebeff8;} .line_obj.game_link_large .info_wrap .link_text{line-height:18px;margin-top:8px;} .line_obj.game_link_large .info_wrap .link_text .arrow_icon{float:right;height:12px;vertical-align:top;margin-top:3px;transform:rotate(180deg);} .line_obj.game_link_large .cover{border-radius:8px;} @media only screen and (max-width:599px){ .line_obj.game_link_large .cover_image{width:105px;height:105px;} .line_obj.game_link_large .info_wrap{width:calc(100% - 105px);padding:12px 16px 0 16px;} .line_obj.game_link_large .info_wrap .game_name{line-height:22px;font-size:15px;} .line_obj.game_link_large .info_wrap .game_name .mobile_icon_new{margin:1px 2px 0 0;} .line_obj.game_link_large .info_wrap .score{line-height:15px;height:15px;margin-top:3px;font-size:12px;} .line_obj.game_link_large .info_wrap .genre_wrap{margin-top:17px;} .line_obj.game_link_large .info_wrap .divider{display:none;} .line_obj.game_link_large .info_wrap .link_text{display:none;} } .line_obj.link_preview{user-select:none;} .line_obj.link_preview a{width:100%;} .line_obj.link_preview .preview_wrap{width:100%;border:solid 1px #ced8e5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.link_preview .preview_wrap.video_preview{border-radius:0px;border:none;} .line_obj.link_preview .preview_wrap.placeholder{height:50px;line-height:48px;text-align:center;padding:0 16px;} .line_obj.link_preview .preview_wrap.no_data{height:50px;line-height:48px;text-align:center;padding:0 16px;} .line_obj.link_preview .preview_wrap.no_data .ellipsis{width:100%;} .line_obj.link_preview .cover{border-radius:13px;} .line_obj.link_preview .video_preview + .cover{border-radius:0px;} .line_obj.link_preview .text_only .post_link_image{width:0px;height:0px;} .line_obj.link_preview .left_image .post_link_image{display:inline-block;vertical-align:top;border-right:solid 1px #ced8e5;width:131px;height:130px;} .line_obj.link_preview .top_image .post_link_image{width:calc(100% + 1px);height:auto;border-bottom:solid 1px #ced8e5;} .line_obj.link_preview .text_wrap{padding:16px 20px;position:relative;} .line_obj.link_preview .text_wrap .title{line-height:24px;} .line_obj.link_preview .text_wrap .description{line-height:19px;margin-top:2px;max-height:38px;overflow:hidden;} .line_obj.link_preview .text_wrap .link{line-height:18px;margin-top:16px;} .line_obj.link_preview .left_image .text_wrap{padding:16px 20px;width:calc(100% - 131px);height:130px;display:inline-block;vertical-align:top;} .line_obj.link_preview .left_image .text_wrap .description{height:38px;} .line_obj.link_preview .top_image .text_wrap .link{margin-top:1px;} .line_obj.link_preview .video_image{position:relative;background-color:#040000;background-size:cover;background-position:center;} .line_obj.link_preview .video_image .video_cover{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0);} .line_obj.link_preview .video_image.type_twitter .video_cover{background:rgba(0,0,0,0.2);} .line_obj.link_preview .video_image.type_naver .video_cover{background:rgba(0,0,0,0.5);} .line_obj.link_preview .video_image.type_vimeo .video_cover{background:rgba(0,0,0,0.2);} .line_obj.link_preview .video_image.type_twitch .video_cover{background:rgba(0,0,0,0.2);} .line_obj.link_preview .video_image .video_play_button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);} .line_obj.link_preview .video_image.type_twitter .video_play_button{height:70px;} .line_obj.link_preview .video_image.type_youtube .video_play_button{height:50px;} .line_obj.link_preview .video_image.type_naver .video_play_button{height:88px;} .line_obj.link_preview .video_image.type_vimeo .video_play_button{height:40px;} .line_obj.link_preview .video_image.type_twitch .video_play_button{height:63px;} .line_obj.link_preview .video_image.type_kakao .video_play_button{height:58px;} .line_obj.link_preview .video_image .twitch_profile{width:50px;height:50px;border-radius:25px;position:absolute;top:15px;left:15px;} .line_obj.link_preview .video_image .twitch_info{width:calc(100% - 92px);position:absolute;top:17px;left:77px;} .line_obj.link_preview .video_image .twitch_name{line-height:27px;} .line_obj.link_preview .video_image .twitch_description{line-height:19px;} @media only screen and (max-width:599px){ .line_obj.link_preview .left_image .post_link_image{width:105px;height:104px;} .line_obj.link_preview .text_wrap{padding:12px 16px;} .line_obj.link_preview .text_wrap .description{margin-top:1px;} .line_obj.link_preview .text_wrap .link{margin-top:1px;} .line_obj.link_preview .left_image .text_wrap{padding:12px 16px;width:calc(100% - 105px);height:104px;} .line_obj.link_preview .left_image .text_wrap .description{max-height:24px;line-height:24px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .line_obj.link_preview .left_image .text_wrap .link{margin-top:13px;} .line_obj.link_preview .video_image.type_naver .video_play_button{height:44px;} .line_obj.link_preview .video_image.type_kakao .video_play_button{height:35px;} } .line_obj.link_preview .post_link_video{width:100%;position:relative;background:#000;z-index:1;} .line_obj.link_preview .video_box{width:100%;position:absolute;top:0;left:0;right:0;bottom:0;} .line_obj.link_preview .video_box.before_load{cursor:pointer;} .line_obj.link_preview .video_box .video_preview{width:100%;height:100%;position:absolute;top:0;left:0;background-size:cover;background-position:center;z-index:5;background-color:#000;} .line_obj.link_preview .video_box .video_preview .image_cover{position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;background:#00000033;} .line_obj.link_preview .video_box .video_title{line-height:52px;height:52px;padding:0 16px;text-shadow: 0 0 2px rgba(0,0,0,.5);background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));} .line_obj.link_preview .video_box .twitch_profile{width:50px;height:50px;border-radius:25px;position:absolute;top:15px;left:15px;} .line_obj.link_preview .video_box .twitch_info{width:calc(100% - 92px);position:absolute;top:17px;left:77px;} .line_obj.link_preview .video_box .twitch_name{line-height:27px;} .line_obj.link_preview .video_box .twitch_description{line-height:19px;} .line_obj.link_preview .video_box .loading_spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:60px;display:none;} .line_obj.link_preview .video_box .start_loading .loading_spinner{display:block;} .line_obj.link_preview .video_box .video_play_button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:50px;} .line_obj.link_preview .video_box .start_loading .video_play_button{display:none;} .line_obj.link_preview .type_twitter .video_box .video_play_button{height:70px;} .line_obj.link_preview .type_youtube .video_box .video_play_button{height:50px;} .line_obj.link_preview .type_naver .video_box .video_play_button{height:88px;} .line_obj.link_preview .type_vimeo .video_box .video_play_button{height:40px;} .line_obj.link_preview .type_twitch .video_box .video_play_button{height:63px;} .line_obj.link_preview .type_kakao .video_box .video_play_button{height:58px;} .line_obj.link_preview .link_video{position:absolute;width:100%;height:100%;z-index:1;} .post_editor .line_obj.spoiler_line{text-align:center;user-select:none;} .post_editor .line_obj.spoiler_line .left_line{width:calc(50% - 160px);height:13px;vertical-align:top;border-bottom:dashed 2px #ec5245;} .post_editor .line_obj.spoiler_line .spoiler_text{width:320px;line-height:24px;vertical-align:top;text-align:center;} .post_editor .line_obj.spoiler_line .spoiler_text .spoiler_icon{height:20px;vertical-align:top;margin:2px 4px 0 0;} .post_editor .line_obj.spoiler_line .right_line{width:calc(50% - 160px);height:13px;vertical-align:top;border-bottom:dashed 2px #ec5245;} .post_editor .line_obj.spoiler_line a{display:inline-block;width:100%;} @media only screen and (max-width:599px){ .post_editor .line_obj.spoiler_line .left_line{width:calc(100% - 282px);} .post_editor .line_obj.spoiler_line .spoiler_text{width:282px;} .post_editor .line_obj.spoiler_line .spoiler_text .spoiler_icon{display:none;} .post_editor .line_obj.spoiler_line .right_line{display:none;} } .line_obj.steam_achievement{user-select:none;} .line_obj.steam_achievement a{width:100%;} .line_obj.steam_achievement .steam_achievement_wrap{width:100%;padding:16px 16px 18px 16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.steam_achievement .game_info{line-height:18px;position:relative;} .line_obj.steam_achievement .game_info .platform_icon{height:20px;position:absolute;right:0;top:0;} .line_obj.steam_achievement .game_info .game_image{width:18px;height:18px;display:inline-block;margin-right:4px;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:4px;background-color:#ced8e5;vertical-align:top;} .line_obj.steam_achievement .game_info .game_title{display:inline-block;width:calc(100% - 44px);vertical-align:top;} .line_obj.steam_achievement .achievement_info_wrap{margin-top:8px;} .line_obj.steam_achievement .achievement_info_wrap .achievement_icon{height:64px;width:64px;display:inline-block;margin-right:12px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;border-radius:8px;vertical-align:top;} .line_obj.steam_achievement .achievement_info_wrap .achievement_info{display:inline-block;width:calc(100% - 76px);vertical-align:top;} .line_obj.steam_achievement .achievement_info_wrap .title{line-height:22px;} .line_obj.steam_achievement .achievement_info_wrap .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .line_obj.steam_achievement .achievement_info_wrap .description{line-height:22px;margin-top:2px;} .line_obj.steam_achievement .achievement_info_wrap .complete_info{margin-top:6px;line-height:19px;} .line_obj.steam_achievement .achievement_info_wrap .complete_info .global_percent{display:inline-block;margin-right:12px;} .line_obj.steam_achievement .achievement_info_wrap .complete_info .global_percent img{height:18px;margin:1px 4px 0 0;vertical-align:top;} .line_obj.steam_achievement .achievement_info_wrap .complete_info .complete_time{display:inline-block;} .line_obj.steam_achievement .cover{border-radius:13px;} .line_obj.steam_game{user-select:none;} .line_obj.steam_game a{width:100%;} .line_obj.steam_game .steam_game_wrap{width:100%;padding:16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.steam_game .cover_image{display:inline-block;margin-right:12px;position:relative;width:116px;height:54px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;border-radius:8px;vertical-align:top;} .line_obj.steam_game .cover_image .complete_badge{position:absolute;top:0;left:4px;width:24px;} .line_obj.steam_game .game_info{display:inline-block;width:calc(100% - 128px);position:relative;} .line_obj.steam_game .game_info .platform_icon{height:20px;position:absolute;right:0;top:0;} .line_obj.steam_game .game_info .game_name{width:calc(100% - 22px);line-height:22px;height:44px;max-height:44px;overflow:hidden;} .line_obj.steam_game .game_info .achievement_progress{width:100%;height:4px;margin-top:16px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} .line_obj.steam_game .game_info .achievement_progress .foreground{height:4px;position:absolute;top:0;left:0;background:#3F9DFF;border-radius:2px;box-shadow:0 0 4px 0 #3f9dff;} .line_obj.steam_game .detail_info{margin-top:10px;line-height:20px;} .line_obj.steam_game .detail_info img{vertical-align:top;height:16px;margin-top:2px;margin-right:4px;} .line_obj.steam_game .detail_info .achievement_cnt{margin-right:12px;} .line_obj.steam_game .detail_info .achievement_percent{float:right;} .line_obj.steam_game .cover{border-radius:13px;} @media only screen and (max-width:599px){ .line_obj.steam_game .cover_image{width:64px;height:64px;} .line_obj.steam_game .game_info{width:calc(100% - 76px);} .line_obj.steam_game .detail_info .achievement_cnt{margin-right:8px;} } .line_obj.playstation_achievement{user-select:none;} .line_obj.playstation_achievement a{width:100%;} .line_obj.playstation_achievement .playstation_achievement_wrap{width:100%;padding:16px 16px 18px 16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.playstation_achievement .game_info{line-height:18px;position:relative;} .line_obj.playstation_achievement .game_info .platform_icon{height:20px;position:absolute;right:0;top:0;} .line_obj.playstation_achievement .game_info .game_image{width:18px;height:18px;display:inline-block;margin-right:4px;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:4px;background-color:#ced8e5;vertical-align:top;} .line_obj.playstation_achievement .game_info .game_title{display:inline-block;width:calc(100% - 44px);vertical-align:top;} .line_obj.playstation_achievement .achievement_info_wrap{margin-top:8px;} .line_obj.playstation_achievement .achievement_info_wrap .achievement_icon{height:64px;width:64px;display:inline-block;margin-right:12px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;border-radius:8px;vertical-align:top;} .line_obj.playstation_achievement .achievement_info_wrap .achievement_info{display:inline-block;width:calc(100% - 76px);vertical-align:top;} .line_obj.playstation_achievement .achievement_info_wrap .title{line-height:22px;} .line_obj.playstation_achievement .achievement_info_wrap .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .line_obj.playstation_achievement .achievement_info_wrap .description{line-height:22px;margin-top:2px;} .line_obj.playstation_achievement .achievement_info_wrap .complete_info{margin-top:6px;line-height:19px;} .line_obj.playstation_achievement .achievement_info_wrap .complete_info .global_percent{display:inline-block;margin-right:12px;} .line_obj.playstation_achievement .achievement_info_wrap .complete_info .global_percent img{height:18px;margin:1px 4px 0 0;vertical-align:top;} .line_obj.playstation_achievement .achievement_info_wrap .complete_info .complete_time{display:inline-block;} .line_obj.playstation_achievement .cover{border-radius:13px;} .line_obj.playstation_game{user-select:none;} .line_obj.playstation_game a{width:100%;} .line_obj.playstation_game .playstation_game_wrap{width:100%;padding:16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.playstation_game .cover_image{display:inline-block;margin-right:12px;position:relative;width:116px;height:64px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;border-radius:8px;vertical-align:top;} .line_obj.playstation_game .cover_image .complete_badge{position:absolute;top:0;left:4px;width:24px;} .line_obj.playstation_game .game_info{display:inline-block;width:calc(100% - 128px);position:relative;} .line_obj.playstation_game .game_info .platform_icon{height:20px;position:absolute;right:0;top:0;} .line_obj.playstation_game .game_info .game_name{width:calc(100% - 22px);line-height:22px;height:44px;max-height:44px;overflow:hidden;} .line_obj.playstation_game .game_info .achievement_progress{width:100%;height:4px;margin-top:16px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} .line_obj.playstation_game .game_info .achievement_progress .foreground{height:4px;position:absolute;top:0;left:0;background:#3F9DFF;border-radius:2px;box-shadow:0 0 4px 0 #3f9dff;} .line_obj.playstation_game .detail_info{margin-top:10px;line-height:20px;} .line_obj.playstation_game .detail_info img{vertical-align:top;height:16px;margin-top:2px;margin-right:4px;} .line_obj.playstation_game .detail_info .trophy_icon{margin-left:12px;} .line_obj.playstation_game .detail_info .trophy_icon:first-child{margin-left:0px;} .line_obj.playstation_game .detail_info .achievement_cnt{margin-right:12px;} .line_obj.playstation_game .detail_info .achievement_percent{float:right;} .line_obj.playstation_game .cover{border-radius:13px;} @media only screen and (max-width:599px){ .line_obj.playstation_game .cover_image{width:64px;height:64px;} .line_obj.playstation_game .game_info{width:calc(100% - 76px);} .line_obj.playstation_game .detail_info .achievement_cnt{margin-right:8px;} } .line_obj.xbox_achievement{user-select:none;} .line_obj.xbox_achievement a{width:100%;} .line_obj.xbox_achievement .xbox_achievement_wrap{width:100%;padding:16px 16px 18px 16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.xbox_achievement .game_info{line-height:18px;position:relative;} .line_obj.xbox_achievement .game_info .platform_icon{height:20px;position:absolute;right:0;top:0;} .line_obj.xbox_achievement .game_info .game_image{width:18px;height:18px;display:inline-block;margin-right:4px;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:4px;background-color:#ced8e5;vertical-align:top;} .line_obj.xbox_achievement .game_info .game_title{display:inline-block;width:calc(100% - 44px);vertical-align:top;} .line_obj.xbox_achievement .achievement_info_wrap{margin-top:8px;} .line_obj.xbox_achievement .achievement_info_wrap .achievement_icon{height:64px;width:64px;display:inline-block;margin-right:12px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;border-radius:8px;vertical-align:top;} .line_obj.xbox_achievement .achievement_info_wrap .achievement_info{display:inline-block;width:calc(100% - 76px);vertical-align:top;} .line_obj.xbox_achievement .achievement_info_wrap .title{line-height:22px;} .line_obj.xbox_achievement .achievement_info_wrap .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .line_obj.xbox_achievement .achievement_info_wrap .description{line-height:22px;margin-top:2px;} .line_obj.xbox_achievement .achievement_info_wrap .complete_info{margin-top:6px;line-height:19px;} .line_obj.xbox_achievement .achievement_info_wrap .complete_info .gamer_score{display:inline-block;margin-right:12px;} .line_obj.xbox_achievement .achievement_info_wrap .complete_info .gamer_score_icon{height:16px;margin:1px 2px 0 0;vertical-align:top;} .line_obj.xbox_achievement .achievement_info_wrap .complete_info .global_percent{display:inline-block;margin-right:12px;} .line_obj.xbox_achievement .achievement_info_wrap .complete_info .complete_time{display:inline-block;} .line_obj.xbox_achievement .cover{border-radius:13px;} .line_obj.xbox_game{user-select:none;} .line_obj.xbox_game a{width:100%;} .line_obj.xbox_game .xbox_game_wrap{width:100%;padding:16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.xbox_game .cover_image{display:inline-block;margin-right:12px;position:relative;width:116px;height:65px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;border-radius:8px;vertical-align:top;} .line_obj.xbox_game .cover_image .complete_badge{position:absolute;top:0;left:4px;width:24px;} .line_obj.xbox_game .game_info{display:inline-block;width:calc(100% - 128px);position:relative;} .line_obj.xbox_game .game_info .platform_icon{height:20px;position:absolute;right:0;top:0;} .line_obj.xbox_game .game_info .game_name{width:calc(100% - 22px);line-height:22px;height:44px;max-height:44px;overflow:hidden;} .line_obj.xbox_game .game_info .achievement_progress{width:100%;height:4px;margin-top:16px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} .line_obj.xbox_game .game_info .achievement_progress .foreground{height:4px;position:absolute;top:0;left:0;background:#3F9DFF;border-radius:2px;box-shadow:0 0 4px 0 #3f9dff;} .line_obj.xbox_game .detail_info{margin-top:10px;line-height:20px;} .line_obj.xbox_game .detail_info img{vertical-align:top;height:16px;margin-top:2px;margin-right:4px;} .line_obj.xbox_game .detail_info .achievement_cnt{margin-right:12px;} .line_obj.xbox_game .detail_info .gamer_score{} .line_obj.xbox_game .detail_info .achievement_percent{float:right;} .line_obj.xbox_game .cover{border-radius:13px;} @media only screen and (max-width:599px){ .line_obj.xbox_game .cover_image{width:64px;height:64px;} .line_obj.xbox_game .game_info{width:calc(100% - 76px);} .line_obj.xbox_game .detail_info .achievement_cnt{margin-right:8px;} } .line_obj.minimap_achievement{user-select:none;} .line_obj.minimap_achievement a{width:100%;} .line_obj.minimap_achievement .minimap_achievement_wrap{width:100%;padding:16px 16px 18px 16px;border:solid 1px #CED8D5;border-radius:13px;overflow:hidden;background:#FFF;} .line_obj.minimap_achievement .minimap_info{line-height:18px;position:relative;} .line_obj.minimap_achievement .minimap_info .minimap_icon{width:16px;height:16px;padding:4px;display:inline-block;margin-right:4px;background:#3f9dff;border-radius:4px;vertical-align:top;margin-top:1px;} .line_obj.minimap_achievement .achievement_info_wrap{margin-top:8px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_image_wrap{position:relative;width:64px;vertical-align:top;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_image_wrap .achievement_image{width:64px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_image_wrap .achievement_title_icon{position:absolute;top:-2px;right:-1px;height:32px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap{width:calc(100% - 76px);margin-left:12px;vertical-align:top;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .title{line-height:22px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .description{margin-top:2px;line-height:22px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .complete_info{margin-top:10px;line-height:19px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .complete_info .global_percent{margin-right:12px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .progress_wrap{margin-top:10px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .progress_wrap .achievement_progress{margin-right:6px;position:relative;display:inline-block;width:160px;max-width:100%;height:4px;margin-top:6px;vertical-align:top;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .progress_wrap .achievement_slider_background{width:100%;height:4px;background:#e5f3ff;position:absolute;top:0px;left:0px;border-radius:2px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .progress_wrap .achievement_slider_foreground{width:0px;height:4px;background:#3f9dff;position:absolute;top:0px;left:0px;border-radius:2px;box-shadow:0px 0px 4px 0px rgb(63, 157, 255);} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .progress_wrap .achievement_progress_cnt{vertical-align:top;line-height:15px;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .title_info{margin-top:10px;width:195px;line-height:24px;text-align:center;border-radius:12px;background:#ebeff8;max-width:100%;} .line_obj.minimap_achievement .achievement_info_wrap .achievement_text_wrap .title_info.not_complete{opacity:0.3;} .line_obj.minimap_achievement .cover{border-radius:13px;} .inline_obj{display:inline;word-break:break-all;cursor:pointer;} .inline_obj.mention{color:#3f9dff;} .inline_obj.hashtag{color:#3f9dff;} .inline_obj.link{color:#3f9dff;} .inline_obj.game_link{color:#3f9dff;} .inline_obj.game_link .mobile_icon_new{height:20px;vertical-align:top;margin-top:1px;} .comment_text .inline_obj.game_link .mobile_icon_new{height:19px;vertical-align:top;margin-top:0;} .comment_text_area .inline_obj.game_link .mobile_icon_new{height:19px;vertical-align:top;margin-top:0;} .mobile_jcrop .jcrop-handle{width:20px;height:20px;} /**************************************************************** * imageCropPopup (공통) ****************************************************************/ #cropImagePopup{width:600px;height:679px;margin:auto;background:#FFF;border-radius:8px;box-shadow:0 3px 12px 0 rgba(61, 65, 77, 0.13);} #cropImagePopup .crop_header{line-height:56px;padding:0 16px;text-align:center;position:relative;} #cropImagePopup .crop_header .close_button{position:absolute;left:16px;top:0;cursor:pointer;user-select:none;} #cropImagePopup .crop_header .close_button img{height:24px;vertical-align:top;margin:16px 4px 0 0;} #cropImagePopup .crop_image_wrap{height:555px;position:relative;overflow:hidden;padding:26px;background:#ebeff8;} #cropImagePopup .crop_image_wrap .box_wrap{width:100%;height:100%;position:relative;overflow:hidden;} #cropImagePopup .crop_image_wrap .crop_image_box{position:absolute;transition:all 0.15s ease-in;} #cropImagePopup .crop_image_wrap .crop_image_box.small_crop{left:50%;top:50%;transform:translate(-50%, -50%);} #cropImagePopup .crop_image_wrap .crop_image{position:absolute;top:0px;left:0px;transition:all 0.15s ease-in;} #cropImagePopup .crop_footer{width:100%;height:68px;padding:16px;line-height:36px;text-align:right;} #cropImagePopup .crop_footer .reset_button{cursor:pointer;margin-right:16px;user-select:none;} #cropImagePopup .crop_footer .reset_button img{height:24px;vertical-align:top;margin:6px 4px 0 0;} #cropImagePopup .crop_footer .submit_button{width:70px;} #cropImagePopup .crop_footer .half_button{width:50%;text-align:center;} #cropImagePopup .crop_footer .half_button .btn_r{max-width:178px;min-width:144px;width:90%;font-weight:700;} #cropImagePopup .crop_footer .half_button .btn_r img{height:24px;vertical-align:top;margin:12px 4px 0 0;} @media only screen and (max-width:599px){ #cropImagePopup{width:100vw;height:calc(100vh - 44px);border-radius:0px;} #cropImagePopup.collection_crop_popup{height:100vh;} #cropImagePopup .crop_header{display:none;} #cropImagePopup.collection_crop_popup .crop_header{display:block;} #cropImagePopup .crop_image_wrap{padding:0px;} #cropImagePopup.crop_app .crop_image_wrap{height:calc(100vh - 105px);} #cropImagePopup.crop_mobile .crop_image_wrap{height:calc(100vh - 195px);} #cropImagePopup .crop_footer{width:100%;height:60px;padding:4px 0px;text-align:center;} } /**************************************************************** * 에디터 내부의 인풋검색창 (공통) ****************************************************************/ .obj_editor{position:absolute;z-index:2;border-radius:8px;box-shadow:0 2px 5px 0 rgba(3, 24, 39, 0.2);overflow:hidden;background:#FFF;} .obj_editor .search_input{width:100%;position:relative;} .obj_editor .search_input .input_text{width:100%;padding:9px 36px 9px 12px;appearance:none;border:none;height:37px;line-height:18px;color:#031827;font-size:15px;} .obj_editor .search_input .input_text::placeholder{font-size:15px;color:#B2BDCE;} .obj_editor .search_input .input_cancel{width:38px;height:42px;padding:10px 8px;top:-2px;right:-2px;} .obj_editor .search_result_list{overflow:auto;max-height:286px;border-top:solid 1px #ebeff8;} .obj_editor .search_result_list .search_result_item{cursor:pointer;width:100%;background:#FFF;} .obj_editor .search_result_list .search_result_item.no_result{text-align:center !important;line-height:44px !important;padding:0 !important;margin:0 !important;} .obj_editor .search_result_list .search_result_item.no_sync{text-align:center;line-height:24px;padding:12px 0;} .obj_editor .search_result_list .search_result_item.no_sync .no_sync_sub{line-height:19px;margin-top:8px;} .obj_editor .search_result_list .search_result_item.selected .background{background:#e5f3ff;} .obj_editor .search_result_list .search_result_cover_image{display:inline-block;vertical-align:top;width:32px;height:32px;border-radius:8px;margin:6px 8px;background-size:cover;background-position:center;} .obj_editor .search_result_list .game_name_wrap{display:inline-block;vertical-align:top;width:calc(100% - 48px);height:36px;overflow:hidden;margin:4px 0;padding-right:12px;} .obj_editor .search_result_list .game_name_table{display:table;height:100%;} .obj_editor .search_result_list .search_result_name{display:table-cell;vertical-align:middle;line-height:18px;} .obj_editor .search_result_list .search_result_name .mobile_icon_new{height:16px;vertical-align:top;margin:1px 2px 0 0} .obj_editor .search_result_list .select_link_type{height:0px;overflow:hidden;transition:height 0.1s linear;} .obj_editor .search_result_list .search_result_item.selected .select_link_type{height:44px;padding:4px 0;} .obj_editor .search_result_list .link_type_item{display:inline-block;width:50%;text-align:center;} .obj_editor .search_result_list .link_type_item .link_button{width:135px;} .obj_editor .search_result_list .link_type_item img{height:16px;vertical-align:top;margin:9px 2px 0 0;} .obj_editor .search_result_list .search_result_tag_name{padding:6px 12px 0 12px;line-height:16px;} .obj_editor .search_result_list .search_result_tag_cnt{padding:0 12px 6px 12px;line-height:16px;} .obj_editor .search_result_list .search_result_profile_image{display:inline-block;vertical-align:top;width:32px;height:32px;border-radius:16px;border:solid 1px #ced8e5;margin:6px 8px;background-size:cover;background-position:center;} .obj_editor .search_result_list .search_user_text_wrap{vertical-align:top;width:calc(100% - 48px);height:44px;padding-right:12px;} .obj_editor .search_result_list .search_result_user_name{line-height:44px;} .obj_editor .search_result_list .search_result_intro{display:none;} .obj_editor .search_result_list .search_result_achievement_image{display:inline-block;vertical-align:top;width:32px;height:32px;border-radius:8px;margin:6px 8px;background-size:cover;background-position:center;background-color:#ced8e5;} .obj_editor .search_result_list .achievement_game_wrap .search_result_achievement_image{width:58px;} .obj_editor .search_result_list .achievement_game_wrap .search_result_achievement_name{vertical-align:top;width:calc(100% - 74px);height:44px;line-height:44px;padding-right:12px;} .obj_editor .search_result_list .achievement_game_wrap .platform_icon{height:20px;vertical-align:top;margin:11px 4px 0 0;} .obj_editor .search_result_list .achievement_info_wrap .search_result_achievement_image{margin-left:34px;} .obj_editor .search_result_list .achievement_info_wrap .achievement_text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 74px);padding-right:12px;} .obj_editor .search_result_list .achievement_info_wrap .trophy_icon{height:14px;vertical-align:top;margin:2px 4px 0 0;} .obj_editor .search_result_list .achievement_info_wrap .search_result_achievement_name{line-height:18px;padding-top:4px;} .obj_editor .search_result_list .achievement_info_wrap .search_result_achievement_desc{line-height:18px;padding-bottom:4px;} .obj_editor .search_result_list .achievement_minimap_wrap .search_result_achievement_image{border-radius:0px;background-color:transparent;} .obj_editor .search_result_list .achievement_minimap_wrap .search_result_achievement_name{vertical-align:top;width:calc(100% - 74px);height:44px;line-height:44px;padding-right:12px;} /**************************************************************** * 모바일 공통 사이드 창 (공통) ****************************************************************/ .write_post_popup.stop_scroll{overflow:hidden;position:absolute;left:0;} .write_post_popup .write_post_wrap.stop_scroll{overflow:hidden !important;} .write_post_popup .write_post_wrap.stop_scroll_by_click{overflow:hidden !important;} .write_post_popup .side_wrap{position:fixed;top:0;right:0;z-index:250;} .write_post_popup .side_wrap .side{height:100vh;width:100vw;background:#FFF;position:absolute;right:-100vw;top:0;} .write_post_popup .side_wrap .side_header{height:44px;position:relative;} .write_post_popup .side_wrap .side_header .back_button{position:absolute;left:16px;top:10px;} .write_post_popup .side_wrap .side_header .back_button img{height:24px;} .write_post_popup .side_wrap .side_header .title{line-height:44px;width:calc(100% - 100px);text-align:center;margin:auto;} .write_post_popup .side_wrap .header_divider{width:100%;height:1px;background:#ebeff8;} .write_post_popup .side_wrap .side_app .side_content{width:100vw;height:calc(100vh - 45px);} .write_post_popup .side_wrap .side_mobile .side_content{width:100vw;height:calc(100vh - 135px);} .write_post_popup .side_wrap .side_content .side_footer{width:100%;height:60px;border-top:solid 1px #ebeff8;padding:4px 0px;text-align:center;border-bottom:solid 1px #ebeff8;} .write_post_popup .side_wrap .side_content .side_footer .half_button{width:50%;text-align:center;} .write_post_popup .side_wrap .side_content .side_footer .half_button .btn_r{max-width:178px;min-width:144px;width:90%;font-weight:700;} .write_post_popup .side_wrap .side_content .side_footer .half_button .btn_r img{height:24px;vertical-align:top;margin:12px 4px 0 0;} .write_post_popup .side_wrap .side_content .search_input{width:100%;height:82px;background:#FFF;position:relative;padding:12px 16px 20px 16px;} .write_post_popup .side_wrap .side_content .search_input .search_icon{height:24px;position:absolute;left:32px;top:25px;} .write_post_popup .side_wrap .side_content .search_input .write_search_input{appearance:none;height:50px;width:100%;background:#FFF;border-radius:25px;box-shadow:0 4px 10px 6px rgba(3, 24, 39, 0.07);padding-left:46px;padding-right:40px;font-size:15px} .write_post_popup .side_wrap .side_content .search_input .write_search_input::placeholder{color:#b2bdce;} .write_post_popup .side_wrap .side_content .search_input .input_cancel{top:19px;right:24px;} .write_post_popup .side_wrap .side_content .search_result_list{overflow:auto;height:calc(100vh - 126px);padding-bottom:90px;overflow-scrolling:touch;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_item{width:calc(100vw - 32px);margin:0 auto;border-bottom:solid 1px #ebeff8;background:#FFF;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_item:last-child{border-bottom:none;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_item.no_result{line-height:64px;text-align:center;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .no_search_result_wrap .no_sync_sub{line-height:19px;margin-top:8px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_item .background{width:100vw;margin-left:-16px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_item.selected .background{background:#e5f3ff;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_cover_image{display:inline-block;vertical-align:top;width:40px;height:40px;border-radius:8px;margin:12px 12px 12px 16px;background-size:cover;background-position:center;} .write_post_popup .side_wrap .side_content .search_result_list .game_name_wrap{display:inline-block;vertical-align:top;width:calc(100% - 68px);height:40px;overflow:hidden;margin:12px 0;padding-right:16px;} .write_post_popup .side_wrap .side_content .search_result_list .game_name_table{display:table;height:100%;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_name{display:table-cell;vertical-align:middle;line-height:20px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_name .mobile_icon_new{height:16px;vertical-align:top;margin:2px 2px 0 0} .write_post_popup .side_wrap .side_content .search_result_list .select_link_type{height:0px;overflow:hidden;transition:height 0.1s linear;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_item.selected .select_link_type{height:52px;padding:4px 0 12px 0;} .write_post_popup .side_wrap .side_content .search_result_list .link_type_item{display:inline-block;width:50%;text-align:center;} .write_post_popup .side_wrap .side_content .search_result_list .link_type_item .link_button{width:135px;} .write_post_popup .side_wrap .side_content .search_result_list .link_type_item img{height:16px;vertical-align:top;margin:9px 2px 0 0;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_tag_name{padding:12px 16px 0 16px;line-height:20px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_tag_cnt{padding:2px 16px 12px 16px;line-height:18px;font-size:12px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_profile_image{display:inline-block;vertical-align:top;width:40px;height:40px;border-radius:20px;border:solid 1px #ced8e5;margin:12px 12px 12px 16px;background-size:cover;background-position:center;} .write_post_popup .side_wrap .side_content .search_result_list .search_user_text_wrap{vertical-align:top;width:calc(100% - 68px);height:64px;padding:12px 16px 12px 0;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_user_name{line-height:20px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_user_name .user_id{font-size:12px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_intro{line-height:20px;} .write_post_popup .side_wrap .side_content .search_result_list .search_result_achievement_image{display:inline-block;vertical-align:top;width:40px;height:40px;border-radius:8px;margin:12px 12px 12px 16px;background-size:cover;background-position:center;background-color:#ced8e5;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_game_wrap .search_result_achievement_image{width:72px;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_game_wrap .search_result_achievement_name{vertical-align:top;width:calc(100% - 100px);height:64px;line-height:64px;padding-right:16px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_game_wrap .platform_icon{height:20px;vertical-align:top;margin:22px 4px 0 0;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_info_wrap .search_result_achievement_image{margin-left:48px;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_info_wrap .achievement_text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 100px);padding-right:16px;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_info_wrap .trophy_icon{height:16px;vertical-align:top;margin:2px 4px 0 0;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_info_wrap .search_result_achievement_name{line-height:20px;padding-top:12px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_info_wrap .search_result_achievement_desc{line-height:18px;padding:2px 0 12px 0;font-size:12px;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_minimap_wrap .search_result_achievement_image{border-radius:0px;background-color:transparent;} .write_post_popup .side_wrap .side_content .search_result_list .achievement_minimap_wrap .search_result_achievement_name{vertical-align:top;width:calc(100% - 100px);height:64px;line-height:64px;padding-right:16px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .postable_image{display:inline-block;vertical-align:top;width:40px;height:40px;border-radius:8px;margin:12px 12px 12px 16px;background-size:cover;background-position:center;background-color:#ced8e5;} .write_post_popup .side_wrap .side_content .search_result_list .postable_text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 68px);padding:12px 16px 12px 0;} .write_post_popup .side_wrap .side_content .search_result_list .postable_name{line-height:22px;font-size:14px;} .write_post_popup .side_wrap .side_content .search_result_list .postable_name.single_line{line-height:40px;} .write_post_popup .side_wrap .side_content .search_result_list .postable_name .mobile_icon_new{height:20px;vertical-align:top;margin:1px 2px 0 0;} .write_post_popup .side_wrap .side_content .search_result_list .postable_name.single_line .mobile_icon_new{margin:10px 2px 0 0;} .write_post_popup .side_wrap .side_content .search_result_list .postable_name .badge{display:inline-block;line-height:16px;vertical-align:top;padding:0 4px;margin:3px 0 0 4px;border-radius:2px;background:#3f9dff;} .write_post_popup .side_wrap .side_content .search_result_list .postable_name.single_line .badge{margin:12px 0 0 4px;} .write_post_popup .side_wrap .side_content .search_result_list .postable_cnt{line-height:18px;} .write_post_popup .side_wrap .side_content .album_image_list_wrap{width:102vw;height:calc(100% - 60px);overflow:hidden;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .album_image_wrap{display:inline-block;width:32vw;height:calc(25% - 2vw);max-height:32vw;background:#FFF;vertical-align:top;margin:0 2vw 2vw 0;position:relative;border:solid 1px #ced8e5;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .album_image{width:100%;height:100%;background-size:cover;background-position:center;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .button_container{position:absolute;top:0px;left:0px;width:100%;height:100%;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .order_number{text-align:center;position:absolute;top:6px;left:6px;height:28px;width:28px;border-radius:14px;line-height:28px;background:rgba(3, 24, 39, 0.8);} .write_post_popup .side_wrap .side_content .album_image_list_wrap .album_image_wrap .container_border{width:100%;height:100%;position:absolute;top:0;left:0;border:solid 4px #3f9dff;display:none;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .album_image_wrap.selected .container_border{display:block;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .album_image_placeholder{position:relative;width:32vw;height:calc(25% - 2vw);max-height:32vw;margin:0 2vw 2vw 0;display:inline-block;background:#ebeff8;} .write_post_popup .side_wrap .side_content .album_image_list_wrap .album_image_placeholder .add_image_icon{height:28px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .write_post_popup .side_wrap .side_content .crop_image_wrap{height:calc(100% - 60px);position:relative;overflow:hidden;background:#ebeff8;} .write_post_popup .side_wrap .side_content .crop_image_wrap .crop_image_box{position:absolute;transition:all 0.15s ease-in;} .write_post_popup .side_wrap .side_content .crop_image_wrap .crop_image_box.small_crop{left:50%;top:50%;transform:translate(-50%, -50%);} .write_post_popup .side_wrap .side_content .crop_image_wrap .crop_image{position:absolute;top:0px;left:0px;transition:all 0.15s ease-in;} /**************************************************************** * writePostPopup ****************************************************************/ #writePostPopup{width:620px;margin:auto;background:#FFF;border-radius:8px;box-shadow:0 3px 12px 0 rgba(61, 65, 77, 0.13);padding-bottom:16px;position:relative;} #writePostPopup .header{padding:16px 20px;height:56px;border-bottom:solid 1px #ebeff8;position:relative;} #writePostPopup .header .postable_name_wrap{line-height:24px;width:calc(100% - 38px);} #writePostPopup .header .postable_name{max-width:calc(100% - 120px);vertical-align:top;} #writePostPopup .header .postable_name .mobile_icon_new{height:20px;vertical-align:top;margin:3px 2px 0 0;} #writePostPopup .header .postable_post_text{vertical-align:top;} #writePostPopup .header .close_button{height:28px;padding:2px;cursor:pointer;position:absolute;top:14px;right:16px;} #writePostPopup .sponsored_info{line-height:28px;background:#3b4757;padding:0 20px;} #writePostPopup .sponsored_info .sponsored_button{float:right;cursor:pointer;} #writePostPopup .sponsored_info .sponsored_button .sponsored_icon{height:16px;margin:6px 2px 0 0;} #writePostPopup .sponsored_write_info{line-height:28px;background:#00b597;padding:0 20px;} #writePostPopup .postable_info{width:100%;height:112px;padding:20px 25px;} #writePostPopup .postable_info .postable_item{display:inline-block;vertical-align:top;width:54px;height:72px;margin-right:19px;text-align:center;position:relative;cursor:pointer;user-select:none;} #writePostPopup .postable_info .postable_item:last-child{margin-right:0px;} #writePostPopup .postable_info .postable_item .postable_background{border-radius:8px;width:48px;height:48px;background-color:#ebeff8;background-size:cover;background-position:center;margin:auto;} #writePostPopup .postable_info .postable_item .add_image_icon{height:25px;vertical-align:top;margin-top:12px;} #writePostPopup .postable_info .postable_item .postable_name{margin-top:6px;line-height:18px;} #writePostPopup .postable_info .postable_item .select_cover{position:absolute;top:-3px;right:0px;width:54px;height:54px;border:solid 3px #3f9dff;border-radius:12px;display:none;} #writePostPopup .postable_info .postable_item .select_cover .select_mark{height:24px;padding:4px;border-radius:12px;position:absolute;right:-12px;top:-12px;background:#3f9dff;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #writePostPopup .postable_info .postable_item.selected .select_cover{display:block;} #writePostPopup .postable_info .postable_list{display:inline-block;vertical-align:top;width:calc(100% - 78px);} #writePostPopup.is_sponsored .postable_info .postable_list{width:calc(100% - 146px);} #writePostPopup .select_post_type_wrap{width:100%;height:36px;padding:0 20px;margin-bottom:12px;} #writePostPopup .select_post_type_wrap.hide{display:none;} #writePostPopup .select_post_type_wrap .post_type_item{position:relative;user-select:none;cursor:pointer;width:185px;border-radius:8px;background:#ebeff8;border:2px solid transparent;line-height:32px;text-align:center;margin-right:12px;} #writePostPopup .select_post_type_wrap .post_type_item:last-child{margin-right:0;} #writePostPopup .select_post_type_wrap .post_type_item.selected{border:solid 2px #3f9dff;} #writePostPopup .select_post_type_wrap .post_type_item .select_mark{display:none;height:24px;padding:4px;border-radius:12px;position:absolute;right:-12px;top:-12px;background:#3f9dff;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #writePostPopup .select_post_type_wrap .post_type_item.selected .select_mark{display:block;} #writePostPopup .select_post_type_wrap .post_tip_badge{position:absolute;width:256px;z-index:10;top:48px;left:calc(50% - 128px);text-align:left;} #writePostPopup .select_post_type_wrap .post_tip_badge .badge_body{padding:11px 12px 11px 16px;line-height:19px;background:#00a789;border-radius:4px;overflow:hidden;box-shadow: 0px 4px 5px 0px rgba(3, 24, 39, 0.06),0px 1px 10px 0px rgba(3, 24, 39, 0.12),0px 2px 4px -1px rgba(3, 24, 39, 0.16);} #writePostPopup .select_post_type_wrap .post_tip_badge .badge_tip_wrap{position:absolute;width:10px;height:10px;top:-10px;left:50%;transform:translate(-50%, 0);} #writePostPopup .select_post_type_wrap .post_tip_badge .badge_tip{width:10px;height:10px;background:#00a789;position:absolute;transform:rotate(45deg);left:0px;top:5px;} #writePostPopup .select_post_type_wrap .post_tip_badge .badge_icon{height:19px;float:right;cursor:pointer;margin-left:4px;} #writePostPopup .editor_wrap{padding:0 20px;} #writePostPopup .editor_wrap .editor_background{padding-bottom:16px;} #writePostPopup.is_sponsored .write_content_wrap .editor{min-height:100px;} #writePostPopup .open_state_wrap{margin-top:12px;padding:0 20px;line-height:36px;} #writePostPopup .open_state_wrap .open_state_select{height:36px;background:#ebeff8;border-radius:8px;padding:6px 8px 6px 12px;vertical-align:top;} #writePostPopup .open_state_wrap .open_state_select .select_option_wrap{width:132px;top:40px;} #writePostPopup .submit_button_wrap{position:absolute;right:20px;bottom:16px;} #writePostPopup .submit_button_wrap .input_check_group{margin-right:20px;line-height:36px;} #writePostPopup .submit_button_wrap .input_check_group .checkmark{top:9px;} #writePostPopup .submit_button_wrap .submit_button{width:84px;} #writePostPopup.is_sponsored .submit_button_wrap .submit_button:first-child{width:110px;margin-right:8px;} #writePostPopup.is_sponsored .submit_button_wrap{position:relative;margin-top:12px;text-align:right;right:auto;bottom:auto;padding:0 20px;} #writePostPopup.is_sponsored .submit_button_wrap .submit_button:last-child{font-weight:700;} #writePostPopup .sponsored_preview_wrap{padding:0 16px;} #writePostPopup .sponsored_preview_wrap .sponsored_preview{margin-top:16px;border:solid 1px #ced8e5;border-radius:13px;overflow:hidden;background:#FFF;} #writePostPopup .sponsored_preview_wrap .sponsored_image{width:100%;height:246px;background-size:cover;background-position:center;} #writePostPopup .sponsored_preview_wrap .text_wrap{border-top:solid 1px #ced8e5;padding:16px 20px;} #writePostPopup .sponsored_preview_wrap .text_wrap .text_info_wrap{display:inline-block;vertical-align:top;width:calc(100% - 116px);margin-right:12px;} #writePostPopup .sponsored_preview_wrap .text_wrap .title{line-height:24px;} #writePostPopup .sponsored_preview_wrap .text_wrap .description{line-height:19px;margin-top:2px;} #writePostPopup .sponsored_preview_wrap .text_wrap .url{line-height:18px;margin-top:1px;} #writePostPopup .sponsored_preview_wrap .text_wrap .preview_button{width:104px;margin-top:13px;} #writePostPopup .sponsored_label{margin-top:12px;padding:0 20px;} #writePostPopup .sponsored_label .label_title{line-height:36px;width:94px;vertical-align:top;} #writePostPopup .sponsored_label .label_title.small_title{line-height:20px;} #writePostPopup .sponsored_label .label_title .info_icon{height:18px;margin-top:9px;} #writePostPopup .sponsored_label .label_title.small_title .info_icon{margin-top:1px;} #writePostPopup .sponsored_label .label_title .label_title_help{line-height:17px;} #writePostPopup .sponsored_label .label_content_wrap{width:calc(100% - 94px);vertical-align:top;} #writePostPopup .sponsored_label .label_content_wrap.button_text{width:130px;vertical-align:top;margin-right:16px;} #writePostPopup .sponsored_label .label_content_wrap.button_url{width:calc(100% - 240px);vertical-align:top;} #writePostPopup .sponsored_label .label_content_wrap .label_content{position:relative;} #writePostPopup .sponsored_label .label_content_wrap .sponsored_image_button{width:84px;margin-top:4px;} #writePostPopup .sponsored_label .label_content_wrap .sponsored_input{width:100%;height:36px;line-height:20px;padding:8px 12px;border:none;border-radius:8px;background:#ebeff8;appearance:none;} #writePostPopup .sponsored_label .label_content_wrap .sponsored_input::placeholder{color:#b2bdce;line-height:20px;font-size:14px;} #writePostPopup .sponsored_label .label_content_wrap .sponsored_input.button_text{width:130px;} #writePostPopup .sponsored_label .label_content_wrap .label_help{margin-top:4px;line-height:17px;} #writePostPopup .sponsored_label .label_content_wrap .label_help .link_test{text-decoration:underline;cursor:pointer;} #writePostPopup .sponsored_label #postAlbumImage{display:none;} #writePostPopup .sponsored_label .label_content_wrap .button_select{position:absolute;width:28px;height:36px;top:0;right:0;} #writePostPopup .sponsored_label .label_content_wrap .button_select .select_img{margin-top:8px;} #writePostPopup .sponsored_label .label_content_wrap .button_select .select_option_wrap{width:130px;max-height:170px;overflow-y:auto;} /**************************************************************** * selectPostablePopup ****************************************************************/ #selectPostablePopup{max-width:calc(100vw - 32px);width:620px;height:565px;margin:auto;background:#ebeff8;border-radius:8px;box-shadow:0 3px 12px 0 rgba(61, 65, 77, 0.13);overflow:hidden;} #selectPostablePopup .header{line-height:56px;height:57px;padding:0 16px;text-align:center;position:relative;border-bottom:solid 1px #ced8e5;background:#FFF;} #selectPostablePopup .header .close_button{position:absolute;left:16px;top:0;cursor:pointer;user-select:none;} #selectPostablePopup .header .close_button img{height:24px;vertical-align:top;margin:16px 4px 0 0;} #selectPostablePopup .postable_search_wrap{width:100%;height:60px;position:relative;padding:12px 16px;} #selectPostablePopup .postable_search_wrap .search_icon{height:24px;position:absolute;top:18px;left:28px;} #selectPostablePopup .postable_search_wrap .postable_search_input{appearance:none;width:100%;height:36px;border:solid 1px #ced8e5;line-height:34px;border-radius:18px;background:#FFF;padding:0 40px;font-size:15px;color:#031827} #selectPostablePopup .postable_search_wrap .postable_search_input::placeholder{color:#b2bdce;} #selectPostablePopup .postable_search_wrap .input_cancel{top:13px;right:18px;} #selectPostablePopup .postable_search_result{width:100%;height:541px;} #selectPostablePopup .postable_search_result .search_result_list{width:100%;height:448px;overflow:auto;position:relative;} #selectPostablePopup .postable_search_result .search_result_item{width:100%;cursor:pointer;} #selectPostablePopup .postable_search_result .search_result_item .background{width:100%;padding:0 20px;} #selectPostablePopup .postable_search_result .search_result_item.selected .background{background:#ced8e5;} #selectPostablePopup .postable_search_result .search_result_item .postable_image{display:inline-block;vertical-align:top;width:48px;height:48px;border-radius:8px;margin:8px 12px 8px 0;background-size:cover;background-position:center;background-color:#FFF;} #selectPostablePopup .postable_search_result .search_result_item .postable_text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 60px);padding:12px 0;} #selectPostablePopup .postable_search_result .search_result_item .postable_name{line-height:22px;} #selectPostablePopup .postable_search_result .search_result_item .postable_name.single_line{line-height:40px;} #selectPostablePopup .postable_search_result .search_result_item .postable_name .mobile_icon_new{height:20px;vertical-align:top;margin:1px 2px 0 0;} #selectPostablePopup .postable_search_result .search_result_item .postable_name.single_line .mobile_icon_new{margin:10px 2px 0 0;} #selectPostablePopup .postable_search_result .search_result_item .postable_name .badge{display:inline-block;line-height:16px;vertical-align:top;padding:0 4px;margin:3px 0 0 4px;border-radius:2px;background:#3f9dff;} #selectPostablePopup .postable_search_result .search_result_item .postable_name.single_line .badge{margin:12px 0 0 4px;} #selectPostablePopup .postable_search_result .search_result_item .postable_cnt{line-height:18px;} /**************************************************************** * writePostMobilePopup ****************************************************************/ #writePostMobilePopup{width:100vw;height:100vh;background:#FFF;overflow:hidden;position:absolute;top:0;left:0;} #writePostMobilePopup .write_post_header{width:100%;height:45px;position:fixed;top:0;left:0;z-index:100;border-bottom:solid 1px #ebeff8;line-height:44px;text-align:center;background:#FFF;} #writePostMobilePopup .write_post_header .close_button{position:absolute;left:16px;top:0px;width:36px;} #writePostMobilePopup .write_post_header .header_title{line-height:44px;width:calc(100% - 144px);} #writePostMobilePopup .write_post_header .submit_button{position:absolute;right:16px;top:8px;width:48px;} #writePostMobilePopup .write_post_wrap{width:100vw;height:100%;padding-bottom:200px;position:fixed;top:45px;left:0;overflow:auto;} #writePostMobilePopup .postable_info{width:100%;height:80px;padding:16px;position:relative;} #writePostMobilePopup .postable_info .postable_image{display:inline-block;width:48px;height:48px;border-radius:8px;margin-right:12px;vertical-align:top;background-size:cover;background-position:center;} #writePostMobilePopup .postable_info .postable_text_wrap{display:inline-block;vertical-align:top;max-width:calc(100% - 92px);} #writePostMobilePopup .postable_info .postable_name{line-height:22px;margin-top:3px;} #writePostMobilePopup .postable_info .postable_name .mobile_icon_new{height:20px;vertical-align:top;margin:1px 2px 0 0;} #writePostMobilePopup .postable_info .postable_cnt{line-height:18px;margin-top:2px;} #writePostMobilePopup .postable_info .postable_expand_img{height:20px;position:absolute;top:29px;right:16px;} #writePostMobilePopup .select_post_type_wrap{width:calc(100% - 32px);border-top:solid 1px #ebeff8;height:60px;padding:12px 0;margin:0 auto;} #writePostMobilePopup .select_post_type_wrap.hide{display:none;} #writePostMobilePopup .select_post_type_wrap .post_type_item{position:relative;user-select:none;cursor:pointer;width:calc(50% - 6px);border-radius:8px;background:#ebeff8;border:2px solid transparent;line-height:32px;text-align:center;margin-right:12px;} #writePostMobilePopup .select_post_type_wrap .post_type_item:last-child{margin-right:0;} #writePostMobilePopup .select_post_type_wrap .post_type_item.selected{border:solid 2px #3f9dff;} #writePostMobilePopup .select_post_type_wrap .post_type_item .select_mark{display:none;height:24px;padding:4px;border-radius:12px;position:absolute;right:-12px;top:-12px;background:#3f9dff;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #writePostMobilePopup .select_post_type_wrap .post_type_item.selected .select_mark{display:block;} #writePostMobilePopup .select_post_type_wrap .post_tip_badge{position:absolute;width:256px;z-index:10;top:48px;right:0px;text-align:left;} #writePostMobilePopup .select_post_type_wrap .post_tip_badge .badge_body{padding:11px 12px 11px 16px;line-height:19px;background:#00a789;border-radius:4px;overflow:hidden;box-shadow: 0px 4px 5px 0px rgba(3, 24, 39, 0.06),0px 1px 10px 0px rgba(3, 24, 39, 0.12),0px 2px 4px -1px rgba(3, 24, 39, 0.16);} #writePostMobilePopup .select_post_type_wrap .post_tip_badge .badge_tip_wrap{position:absolute;width:10px;height:10px;top:-10px;right:19vw;transform:translate(-50%, 0);} #writePostMobilePopup .select_post_type_wrap .post_tip_badge .badge_tip{width:10px;height:10px;background:#00a789;position:absolute;transform:rotate(45deg);left:0px;top:5px;} #writePostMobilePopup .select_post_type_wrap .post_tip_badge .badge_icon{height:19px;float:right;cursor:pointer;margin-left:4px;} #writePostMobilePopup .editor_wrap .editor_background{padding-bottom:16px;} #writePostMobilePopup .editor_wrap .editor{min-height:236px;} #writePostMobilePopup .left_title{width:64px;vertical-align:top;} #writePostMobilePopup .row_divider{width:100%;height:1px;margin:0 auto;background:#ebeff8;} #writePostMobilePopup .open_state_wrap{width:100%;padding:12px 16px;line-height:36px;} #writePostMobilePopup .open_state_wrap .open_state_select{height:36px;background:#ebeff8;border-radius:8px;padding:6px 8px 6px 12px;vertical-align:top;} #writePostMobilePopup .open_state_wrap .open_state_select .select_option_wrap{width:132px;top:40px;} #writePostMobilePopup .refresh_time_wrap{width:100%;padding:16px;line-height:20px;} #writePostMobilePopup .refresh_time_wrap .input_check_group .checkmark{top:1px;} /**************************************************************** * comment modify form ****************************************************************/ #modifyCommentPopup{margin:auto;width:600px;background:#FFF;} #modifyCommentPopup .modify_comment_popup_wrap{min-height:50px;position:relative;padding-bottom:154px;} #modifyCommentPopup .modify_comment_popup_wrap .dragover_on{background:rgba(66,96,247,0.5);} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_input{display:none;} #modifyCommentPopup .modify_comment_popup_wrap .upload_image_icon{padding:3px;height:28px;vertical-align:top;margin-top:10px;margin-left:17px;cursor:pointer;} #modifyCommentPopup .modify_comment_popup_wrap .comment_text_area{line-height:19px;width:calc(100% - 130px);min-height:50px;display:inline-block;position:relative;} #modifyCommentPopup .modify_comment_popup_wrap .comment_text_area .editor_placeholder{position:absolute;top:16px;left:12px;z-index:0;} #modifyCommentPopup .modify_comment_popup_wrap .comment_text_area .editor{position:relative;z-index:1;padding:16px 12px;} #modifyCommentPopup .modify_comment_popup_wrap .comment_text_area .editor > p{position:relative;} #modifyCommentPopup .modify_comment_popup_wrap .button_r{vertical-align:top;margin-top:10px;cursor:pointer;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap{display:none;padding-bottom:12px;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .comment_image_thumbnail{margin-left:60px;position:relative;width:100px;height:100px;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .comment_image_thumbnail .comment_image{width:100px;height:100px;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .button_container{position:absolute;top:0;left:0;width:100px;height:100px;border:solid 1px #D8D8D8;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .button_container .crop_button{position:absolute;bottom:0;left:0;height:25px;padding:2px;border-top:solid 1px #D8D8D8;border-right:solid 1px #D8D8D8;border-top-right-radius:4px;background:#FFF;display:none;cursor:pointer;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .comment_image_thumbnail:hover .button_container .crop_button{display:block;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .button_container .delete_button{position:absolute;bottom:0;right:0;height:25px;padding:2px;border-top:solid 1px #D8D8D8;border-left:solid 1px #D8D8D8;border-top-left-radius:4px;background:#FFF;display:none;cursor:pointer;} #modifyCommentPopup .modify_comment_popup_wrap .comment_image_thumbnail_wrap .comment_image_thumbnail:hover .button_container .delete_button{display:block;} @media only screen and (max-width:599px){ #modifyCommentPopup{width:100vw;min-height:calc(100vh - 44px);} }