@charset "utf-8"; /************************************************************************************************ Feed Item 옛날 컴포넌트가 사용중 *************************************************************************************************/ .feed_item_box{width:600px;border:solid 1px #D8D8D8;border-radius:4px;margin-top:20px;background:#FFF;} .feed_item_box:first-child{margin-top:0px;} #modalPopupRegion .feed_item_box{margin:20px auto 0px auto;} #modalPopupRegion .feed_item_box:first-child{margin:auto;} @media only screen and (max-width:599px) { .feed_item_box{width:100%;border:none;border-bottom:solid 8px #EEEEEE;border-radius:0px;margin-top:0px;} .feed_item_box:last-child{border-bottom:solid 1px #EEEEEE;} #modalPopupRegion .feed_item_box{margin:auto;} } /******** 공통 */ #feedBody_N{padding-top:58px;/*padding-bottom:100px;*/} #feedBody_N .feed_category_button_wrap{display:inline-block;vertical-align:top;width:80px;position:sticky;top:134px;} #feedBody_N .feed_list_wrap{display:inline-block;vertical-align:top;width:588px;min-height:calc(100vh - 134px);margin-right:30px;} #feedBody_N .feed_list .feed_post:last-child{margin-bottom:100px;} #feedBody_N .feed_right_wrap{display:inline-block;width:260px;vertical-align:top;margin-top:5px;} #feedBody_N .feed_right_wrap .feed_right_spacer{width:100%;height:0px;} #feedBody_N .feed_right_wrap .feed_right{position:sticky;} .mobile_width #feedBody_N .feed_category_button_wrap{top:102px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #feedBody_N .feed_category_button_wrap{position:fixed;left:calc(50% - 375px);} .mobile_width #feedBody_N .feed_list_wrap{display:block;margin:0 auto;} .mobile_width #feedBody_N .feed_right_wrap{display:none;} } @media only screen and (max-width:782px) and (min-width:600px) { .mobile_width #feedBody_N .feed_category_button_wrap{left:16px;} .mobile_width #feedBody_N .feed_list_wrap{margin-left:96px;} } @media only screen and (max-width:700px) and (min-width:600px) { #feedBody_N{padding-top:68px;} .mobile_width #feedBody_N .feed_category_button_wrap{width:100vw;position:fixed;top:44px;left:0;background:#FFF;z-index:1000;border-bottom:solid 1px #EBEFF8;transition:top 0.15s linear;} .mobile_width #feedBody_N .feed_category_button_wrap.snap_top{top:-5px;} .mobile_width #feedBody_N .feed_list_wrap{margin:auto;} } @media only screen and (max-width:599px) { #feedBody_N{padding-top:48px;} .mobile_width #feedBody_N .feed_category_button_wrap{width:100vw;position:fixed;top:44px;left:0;background:#FFF;z-index:1000;transition:top 0.15s linear;} .mobile_width #feedBody_N .feed_category_button_wrap.snap_top{top:-4px;} .mobile_width #feedBody_N .feed_category_button_wrap.bottom_line{border-bottom:solid 1px #EBEFF8;} .mobile_width #feedBody_N .feed_list_wrap{width:100vw;min-height:calc(100vh - 145px);margin:0;} .mobile_width #feedBody_N .feed_right_wrap{display:none;} } /******** 피드 탭 버튼 */ #feedBody_N .feed_side_button{cursor:pointer;text-align:center;margin-top:12px;width:50px;} #feedBody_N .feed_side_button:first-child{margin-top:0px;} #feedBody_N .feed_side_button .button_background{width:50px;height:50px;background-size:cover;background-position:center;} #feedBody_N .minimap_feed_button .button_background{background-image:url('/images/icon_v3/feed_minimap_off.png');} #feedBody_N .minimap_feed_button.selected .button_background{background-image:url('/images/icon_v3/feed_minimap_on.png');} #feedBody_N .news_feed_button .button_background{background-image:url('/images/icon_v3/feed_news_off.png');} #feedBody_N .news_feed_button.selected .button_background{background-image:url('/images/icon_v3/feed_news_on.png');} #feedBody_N .feed_side_button .button_text{margin-top:4px;line-height:19px;color:#95a3b8;} #feedBody_N .feed_side_button.selected .button_text{color:#3f9dff;} #feedBody_N .feed_tab_wrap{margin-bottom:16px;line-height:28px;} #feedBody_N .feed_tab_wrap .dragdealer_list{width:max-content;} #feedBody_N .feed_tab_wrap .feed_tab_button{cursor:pointer;margin-right:6px;border-radius:4px;background:#ebeff8;display:inline-block;} #feedBody_N .feed_tab_wrap .feed_tab_button a{padding:0 8px;} #feedBody_N .feed_tab_wrap .feed_tab_button:last-child{margin-right:0px;} #feedBody_N .feed_tab_wrap .feed_tab_button.selected{background:#3f9dff;color:#FFF;} #feedBody_N .feed_tab_wrap .feed_option_button{float:right;user-select:none;cursor:pointer;} #feedBody_N .feed_tab_wrap .feed_option_button .feed_option_icon{height:18px;margin:5px 2px 0 0;} @media only screen and (max-width:700px) and (min-width:600px) { .mobile_width #feedBody_N .feed_side_button{width:50%;height:48px;margin-top:0;display:inline-block;vertical-align:top;border-bottom:solid 2px transparent;} .mobile_width #feedBody_N .feed_side_button.selected{border-bottom:solid 2px #3f9dff;} .mobile_width #feedBody_N .feed_side_button .button_background{display:none;} .mobile_width #feedBody_N .feed_side_button .button_text{line-height:46px;margin-top:0;font-size:16px;color:#95a3b8;} .mobile_width #feedBody_N .feed_side_button.selected .button_text{color:#031827;} .mobile_width #feedBody_N .feed_tab_wrap{margin-bottom:20px;} } @media only screen and (max-width:599px) { #feedBody_N .feed_side_button{width:50%;height:48px;margin-top:0;display:inline-block;vertical-align:top;border-bottom:solid 2px transparent;} #feedBody_N .feed_side_button.selected{border-bottom:solid 2px #3f9dff;} #feedBody_N .feed_side_button .button_background{display:none;} #feedBody_N .feed_side_button .button_text{line-height:46px;margin-top:0;font-size:16px;color:#95a3b8;} #feedBody_N .feed_side_button.selected .button_text{color:#031827;} #feedBody_N .feed_tab_wrap{height:52px;padding:12px 16px;margin-bottom:0px;} #feedBody_N .feed_tab_wrap .feed_option_button{display:none;} } @media only screen and (max-width:340px) { #feedBody_N .feed_tab_wrap .feed_tab_button a{padding:0 6px;} } /******** 피드 미션 */ #feedBody_N .feed_mission_wrap{height:296px;width:100%;max-width:588px;border-radius:13px;background:#ebeff8;margin-bottom:16px;padding:20px 20px 24px 20px;overflow:hidden;} #feedBody_N .feed_mission_wrap .section_title{line-height:16px;} #feedBody_N .feed_mission_wrap .total_progress{float:right;} #feedBody_N .feed_mission_wrap .feed_mission_list{margin-top:26px;width:100%;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item{display:inline-block;vertical-align:top;margin-right:18px;width:265px;height:209px;position:relative;padding:43px 18px 16px 18px;background:#FFF;border-radius:13px;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);} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item:last-child{margin-right:0;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .mission_icon{position:absolute;top:-19px;left:20px;height:55px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .title{line-height:18px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .description{line-height:17px;margin-top:6px;height:51px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .progress_cnt{line-height:17px;margin-top:8px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .progress_bar{width:100%;height:6px;border-radius:3px;position:relative;background:rgba(63, 157, 255, 0.2);margin-top:4px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .progress_bar .foreground{height:6px;border-radius:3px;position:absolute;top:0;left:0;background:#3f9dff;box-shadow:0px 0px 4px 0px rgb(63, 157, 255);} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .mission_button_wrap{margin-top:12px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .mission_button_wrap .btn_r{width:100%;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .mission_complete_wrap{margin-top:14px;line-height:24px;text-align:center;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item .mission_complete_wrap .complete_icon{height:24px;margin-right:4px;} @media only screen and (max-width:599px) { #feedBody_N .feed_mission_wrap{max-width:100%;border-radius:0px;margin-bottom:0px;padding:16px;} #feedBody_N .feed_mission_wrap .section_title{font-size:13px;} #feedBody_N .feed_mission_wrap .feed_mission_list{margin-top:36px;width:412px;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item{margin-right:12px;width:200px;} } @media only screen and (max-width:599px) and (min-width:444px) { #feedBody_N .feed_mission_wrap .feed_mission_list{width:100%;} #feedBody_N .feed_mission_wrap .feed_mission_list .mission_item{margin-right:12px;width:calc(50% - 6px);} } /******** 피드 미션 완료 팝업 */ #completeFeedMissionPopup{width:420px;height:437px;border-radius:13px;background:#FFF;overflow:hidden;} #completeFeedMissionPopup .image_wrap{text-align:center;} #completeFeedMissionPopup .image_wrap .navi_image{width:100%;} #completeFeedMissionPopup .title{text-align:center;margin-top:16px;line-height:25px;} #completeFeedMissionPopup .description{text-align:center;margin-top:14px;line-height:22px;} #completeFeedMissionPopup .button_wrap{text-align:center;margin-top:19px;} #completeFeedMissionPopup .button_wrap .btn_r{width:228px;} #completeFeedMissionPopup .close_button_wrap{text-align:center;margin-top:16px;line-height:16px;} #completeFeedMissionPopup .close_button{cursor:pointer;} @media only screen and (max-width:599px) { #completeFeedMissionPopup{width:280px;height:446px;} #completeFeedMissionPopup .close_button_wrap{margin-top:24px;} } /******** 친구 찾기 팝업 */ #recommendUserPopup{width:460px;height:614px;border-radius:8px;background:#FFF;overflow:hidden;} #recommendUserPopup .popup_header{padding:16px 20px;border-bottom:solid 1px #ebeff8;line-height:24px;} #recommendUserPopup .popup_header .close_icon{display:none;width:24px;height:24px;} #recommendUserPopup .popup_header .refresh_icon{width:24px;height:24px;border-radius:12px;background:#7f8fa6;cursor:pointer;padding:3px;float:right;} #recommendUserPopup .recommend_user_list{width:100%;height:calc(100% - 57px);overflow:auto;} #recommendUserPopup .recommend_user_item{padding:12px 0 0 16px;position:relative;} #recommendUserPopup .recommend_user_item .profile_container{display:inline-block;vertical-align:top;width:40px;height:40px;margin-right:12px;margin-bottom:12px;} #recommendUserPopup .recommend_user_item .profile_container .profile_image{width:40px;height:40px;border-radius:24px;border:solid 1px #ced8e5;} #recommendUserPopup .recommend_user_item .info_wrap{display:inline-block;vertical-align:top;width:calc(100% - 52px);min-height:40px;padding-right:16px;} #recommendUserPopup .recommend_user_item .text_wrap{display:inline-block;vertical-align:top;width:100%;} #recommendUserPopup .recommend_user_item .text_wrap .user_achievement_title{width:100%;line-height:13px;margin-bottom:2px;} #recommendUserPopup .recommend_user_item .text_wrap .nickname{width:100%;line-height:22px;} #recommendUserPopup .recommend_user_item .text_wrap .nickname .dev_user_icon{margin:3px 0px 0 2px;} #recommendUserPopup .recommend_user_item .text_wrap .review_summary{line-height:18px;margin-bottom:1px;} #recommendUserPopup .recommend_user_item .text_wrap .recommend_reason{width:100%;line-height:18px;margin-top:0px;} #recommendUserPopup .recommend_user_item .game_name{display:inline;} #recommendUserPopup .recommend_user_item .game_name .mobile_icon_new{height:17px;margin-top:1px;} #recommendUserPopup .recommend_user_item .follow_button{width:76px;margin:2px 0 0 12px;} #recommendUserPopup .recommend_user_item .library_game_list{margin-top:8px;margin-bottom:16px;width:100%;overflow:hidden;} #recommendUserPopup .recommend_user_item .library_game_list .library_game_wrap{padding-left:52px;} #recommendUserPopup .recommend_user_item .library_game_list .library_game_item{cursor:pointer;vertical-align:top;width:80px;height:80px;border-radius:13px;margin-right:8px;background-size:cover;background-position:center;background-color:#ebeff8;} #recommendUserPopup .recommend_user_item .library_game_list .library_game_item:last-child{margin-right:0;} #recommendUserPopup .recommend_user_item .button_wrap{position:absolute;right:8px;top:12px;} #recommendUserPopup .recommend_user_item .button_wrap .btn_r{width:80px;} #recommendUserPopup .recommend_user_item .button_wrap .btn_r:first-child{margin-right:4px;} #recommendUserPopup .recommend_user_item .button_wrap .btn_r.single_button{width:164px;margin-right:0;} #recommendUserPopup .recommend_user_item .divider{width:calc(100% - 8px);height:1px;background:#ebeff8;} #recommendUserPopup .recommend_user_item:last-child .divider{display:none;} #recommendUserPopup .refresh_button_wrap{margin:12px auto 16px auto;width:300px;} #recommendUserPopup .refresh_button_wrap .btn_r{width:100%;} #recommendUserPopup .refresh_button_wrap .btn_r .icon{height:20px;margin:7px 1px 0 0;} @media only screen and (max-width:599px) { #recommendUserPopup{width:100vw;height:100vh;border-radius:0px;} #recommendUserPopup .popup_header{text-align:center;font-size:17px;line-height:44px;position:relative;padding:0;} #recommendUserPopup .popup_header .close_icon{display:block;position:absolute;top:10px;left:16px;} #recommendUserPopup .popup_header .refresh_icon{border-radius:0;background:transparent;padding:0px;float:none;position:absolute;top:10px;right:16px;content:url("/images/icon_v3/refresh_gray_n.png");} #recommendUserPopup .recommend_user_list{height:calc(100vh - 44px);} #recommendUserPopup .recommend_user_item .library_game_list{margin-bottom:12px;} #recommendUserPopup .recommend_user_item .button_wrap{position:relative;right:auto;top:auto;width:calc(100% - 68px);margin-left:52px;margin-bottom:16px;} #recommendUserPopup .recommend_user_item .button_wrap .btn_r{width:calc(50% - 2px);} #recommendUserPopup .recommend_user_item .button_wrap .btn_r.single_button{width:100%;} } /******** 피드 옵션 도움말 */ #feedBody_N .feed_option_help_wrap{width:100%;max-width:588px;border-radius:13px;margin-bottom:10px;padding:16px 20px;background:#FFF;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} #feedBody_N .feed_option_help_wrap .description{width:calc(100% - 28px);line-height:20px;} #feedBody_N .feed_option_help_wrap .description .go_option_button{margin-left:8px;text-decoration:underline;cursor:pointer;} #feedBody_N .feed_option_help_wrap img{height:20px;float:right;cursor:pointer;margin-top:1px;} @media only screen and (max-width:599px) { #feedBody_N .feed_option_help_wrap{max-width:none;border-radius:0px;margin-bottom:0px;padding:16px;box-shadow:none;border-top:solid 8px #ebeff8;} #feedBody_N .feed_option_help_wrap .description span{display:inline;} } /******** 유저 목록 팝업 */ #postUserListPopup{width:445px;height:422px;border-radius:8px;background:#FFF;overflow:hidden;} #postUserListPopup .user_list_header{line-height:56px;border-bottom:solid 1px #ebeff8;padding:0 16px;} #postUserListPopup .close_button{float:right;height:24px;cursor:pointer;margin-top:16px;} #postUserListPopup .user_list_wrap{height:365px;overflow:auto;} #postUserListPopup .user_list_wrap .user_item_wrap{height:64px;padding:12px 16px;} #postUserListPopup .user_list_wrap .user_item_wrap .profile_image{width:48px;height:48px;margin-right:12px;border-radius:24px;border:solid 1px #ced8e5;} #postUserListPopup .user_list_wrap .user_item_wrap .user_text_wrap{vertical-align:top;width:calc(100% - 60px);} #postUserListPopup .user_list_wrap .user_item_wrap .user_text_wrap.has_button{width:calc(100% - 157px);} #postUserListPopup .user_list_wrap .user_item_wrap .user_nickname{line-height:17px;margin-top:3px;} #postUserListPopup .user_list_wrap .user_item_wrap .user_intro{line-height:18px;margin-top:4px;} #postUserListPopup .user_list_wrap .user_item_wrap .user_achievement_title{line-height:13px;margin-top:-2px;} #postUserListPopup .user_list_wrap .user_item_wrap .has_achievement_title .user_nickname{line-height:17px;margin-top:3px;} #postUserListPopup .user_list_wrap .user_item_wrap .has_achievement_title .user_intro{line-height:18px;margin-top:1px;} #postUserListPopup .user_list_wrap .user_item_wrap .follow_button{width:81px;margin:2px 0 0 12px;} @media only screen and (max-width:599px) { #postUserListPopup{width:100vw;height:calc(100vh - 44px);border-radius:0px;} #postUserListPopup .user_list_header{display:none;} #postUserListPopup .user_list_wrap{height:100%;} #postUserListPopup .user_list_wrap .user_item_wrap{width:calc(100% - 32px);height:73px;padding:12px 0;margin:auto;border-bottom:solid 1px #ebeff8;} #postUserListPopup .user_list_wrap .user_item_wrap:last-child{border-bottom:none;} #postUserListPopup .user_list_wrap .user_item_wrap .user_text_wrap.has_button{width:calc(100% - 150px);} #postUserListPopup .user_list_wrap .user_item_wrap .follow_button{width:82px;margin:2px 0 0 8px;} #postUserListPopup .user_list_wrap .user_item_wrap .user_nickname{margin-top:5px;} #postUserListPopup .user_list_wrap .user_item_wrap .user_intro{margin-top:5px;} } /******** 핫한게임 */ #feedBody_N .hot_game_list_wrap{width:588px;border-radius:13px;padding:16px 20px 20px 20px;border:none;overflow:hidden;margin-top:16px;background:#FFF;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} #feedBody_N .hot_game_list_wrap:first-child{margin-top:0px;} #feedBody_N .hot_game_list_wrap .list_title{line-height:19px;} #feedBody_N .hot_game_list_wrap .hot_game_list{margin-top:16px;width:max-content;min-width:100%;text-align:center;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item{display:inline-block;vertical-align:top;width:116px;margin-right:18px;position:relative;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item:last-child{margin-right:0px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .cover_image{width:100px;height:100px;margin:0 auto;border-radius:8px;background-size:cover;background-position:center;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .library_state_button_square{height:28px;position:absolute;top:83px;right:-2px;cursor:pointer;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .game_name{line-height:18px;margin-top:16px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .game_name .mobile_icon_new{height:16px;margin:2px 2px 0 0;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .new_post_cnt{line-height:18px;margin-top:1px;} @media only screen and (max-width:599px) { #feedBody_N .hot_game_list_wrap{width:100%;border-radius:0px;padding:16px;box-shadow:none;border:none;margin-top:0px;border-top:solid 8px #EBEFF8;} #feedBody_N .hot_game_list_wrap .hot_game_list{margin-top:12px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item{width:64px;margin-right:20px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .cover_image{width:64px;height:64px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .library_state_button_square{height:24px;top:48px;right:auto;left:48px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .game_name{line-height:18px;margin-top:11px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .new_post_cnt{line-height:17px;margin-top:2px;font-size:11px;} #feedBody_N .hot_game_list_wrap .hot_game_list .hot_game_item .new_post_cnt span{font-size:11px;} } /******** 추천피드 그룹 표시 */ #feedBody_N .group_value_title{line-height:19px;width:588px;margin-top:48px;padding:0 8px;} #feedBody_N .group_value_title:first-child{margin-top:16px;} #feedBody_N .group_value_title .mobile_icon_new{height:18px;margin:1px 2px 0 0;} @media only screen and (max-width:599px) { #feedBody_N .group_value_title{width:100%;margin-top:0px;padding:20px 16px 0px 16px;background:#ebeff8;} } /******** 오른쪽 광고 */ #feedBody_N .feed_right_ad_wrap{width:260px;margin-bottom:32px;} #feedBody_N .feed_right_ad_wrap .feed_ad_title{line-height:19px;} #feedBody_N .feed_right_ad_wrap .feed_ad_list{margin-top:12px;} /******** 오른쪽 게임 목록 */ #feedBody_N .right_game_list_wrap{width:260px;} #feedBody_N .right_game_list_wrap .list_title{line-height:19px;} #feedBody_N .right_game_list_wrap .list_title .more_button{float:right;} #feedBody_N .right_game_list_wrap .right_game_item{margin-top:18px;} #feedBody_N .right_game_list_wrap .right_game_item .game_cover{width:56px;height:56px;margin:2px 12px 0 0;vertical-align:top;border-radius:8px;background-size:cover;background-position:center;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap{width:calc(100% - 68px);vertical-align:top;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .game_name{line-height:20px;vertical-align:top;width:calc(100% - 22px);} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .game_name .mobile_icon_new{height:18px;margin:1px 2px 0 0;} #feedBody_N .right_game_list_wrap .right_game_item .library_state_button_n{height:20px;margin-left:2px;padding:0 0 2px 2px;vertical-align:top;cursor:pointer;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .post_cnt_info{height:18px;line-height:18px;margin-top:2px;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .post_cnt_info .post_cnt_button{cursor:pointer;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .post_cnt_info .post_cnt_icon{height:16px;margin:1px 4px 0 0;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .library_cnt_info{height:18px;line-height:18px;margin-top:1px;} #feedBody_N .right_game_list_wrap .right_game_item .game_info_wrap .library_cnt_info .library_cnt_icon{height:16px;margin:1px 4px 0 0;} /******** 오른쪽 배너 */ #feedBody_N .feed_right_banner_wrap{width:260px;margin-top:32px;} #feedBody_N .feed_right_banner_wrap:first-child{margin-top:0px;} #feedBody_N .feed_right_banner_wrap .feed_banner_title{line-height:19px;} #feedBody_N .feed_right_banner_wrap .feed_right_banner_list{margin-top:12px;} #feedBody_N .feed_right_banner_wrap .feed_right_banner_list .banner_background{width:100%;height:80px;padding:16px 20px;overflow:hidden;border-radius:8px;margin-top:8px;position:relative;} #feedBody_N .feed_right_banner_wrap .feed_right_banner_list .banner_background:first-child{margin-top:0px;} #feedBody_N .feed_right_banner_wrap .feed_right_banner_list .logo_image{width:80px;height:28px;} #feedBody_N .feed_right_banner_wrap .feed_right_banner_list .description{line-height:17px;margin-top:2px;opacity:0.7;} #feedBody_N .feed_right_banner_wrap .feed_right_banner_list .banner_image{position:absolute;top:0;right:0;height:80px;} #feedBody_N .feed_right_google_ad{width:260px;margin-top:32px;} #feedBody_N .feed_right_google_ad:first-child{margin-top:0px;} #feedBody_N .feed_right_google_ad .google_ad_title{line-height:19px;} #feedBody_N .feed_right_google_ad .ad_div{margin-top:12px;} /******** 인피드 친구추천 */ .feed_recommend_user{width:588px;border-radius:13px;margin-top:16px;border:none;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} .recommend_user_feed_item{padding:16px 20px;overflow:hidden;} .recommend_user_feed_item .title{line-height:19px;padding-bottom:12px;border-bottom:solid 1px #ebeff8;} .recommend_user_feed_item .title .more_friend{float:right;cursor:pointer;} .recommend_user_feed_item .recommend_user_list{width:100%;} .recommend_user_feed_item .recommend_user_item{padding-top:12px;} .recommend_user_feed_item .recommend_user_item .profile_container{display:inline-block;vertical-align:top;width:48px;height:48px;margin-right:12px;} .recommend_user_feed_item .recommend_user_item .profile_container .profile_image{width:48px;height:48px;border-radius:24px;border:solid 1px #ced8e5;} .recommend_user_feed_item .recommend_user_item .info_wrap{display:inline-block;vertical-align:top;width:calc(100% - 60px);min-height:60px;padding-bottom:12px;border-bottom:solid 1px #ebeff8;} .recommend_user_feed_item .recommend_user_item:last-child .info_wrap{border-bottom:none;} .recommend_user_feed_item .recommend_user_item .text_wrap{display:inline-block;vertical-align:top;width:100%;} .recommend_user_feed_item .recommend_user_item .text_wrap.has_follow_button{width:calc(100% - 88px);} .recommend_user_feed_item .recommend_user_item .text_wrap .user_achievement_title{width:100%;line-height:13px;margin-bottom:2px;} .recommend_user_feed_item .recommend_user_item .text_wrap .nickname{width:100%;line-height:22px;} .recommend_user_feed_item .recommend_user_item .text_wrap .nickname .dev_user_icon{margin:3px 0px 0 2px;} .recommend_user_feed_item .recommend_user_item .text_wrap .recommend_reason{width:100%;line-height:18px;margin-top:0px;word-break:break-word;} .recommend_user_feed_item .recommend_user_item .game_name{display:inline;} .recommend_user_feed_item .recommend_user_item .game_name .mobile_icon_new{height:17px;margin-top:1px;} .recommend_user_feed_item .recommend_user_item .follow_button{width:76px;margin:6px 0 0 12px;} @media only screen and (max-width:599px) { .feed_recommend_user{width:100%;border-radius:0px;box-shadow:none;margin-top:0px;border:none;border-top:solid 8px #EBEFF8;} .recommend_user_feed_item{padding:12px 16px 4px 16px;} .recommend_user_feed_item .recommend_user_item .text_wrap.has_follow_button{width:calc(100% - 82px);} .recommend_user_feed_item .recommend_user_item .text_wrap .nickname{line-height:20px;font-size:14px;} .recommend_user_feed_item .recommend_user_item .text_wrap .nickname .dev_user_icon{margin:2px 0px 0 2px;} .recommend_user_feed_item .recommend_user_item .follow_button{width:70px;} } /******** 인피드 친구 매칭 */ .feed_recommend_user_match{width:588px;border-radius:13px;margin-top:16px;border:none;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} .recommend_user_match_feed_item{padding:16px 20px;overflow:hidden;} .recommend_user_match_feed_item .title{line-height:19px;padding-bottom:12px;border-bottom:solid 1px #ebeff8;} .recommend_user_match_feed_item .chart_info_wrap{display:inline-block;vertical-align:top;width:294px;height:290px;margin-top:14px;position:relative;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap{text-align:center;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap .score_value{line-height:22px;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap .label{line-height:18px;margin-top:1px;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap .label .info_icon{height:16px;margin-top:1px;cursor:pointer;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap .question_icon{height:22px;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap.top_score{margin-top:16px;margin-bottom:6px;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap.left_score{display:inline-block;vertical-align:top;width:calc(50% - 74px);padding-top:54px;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap.right_score{display:inline-block;vertical-align:top;width:calc(50% - 74px);padding-top:54px;} .recommend_user_match_feed_item .chart_info_wrap .score_wrap.bottom_score{margin-top:6px;} .recommend_user_match_feed_item .chart_info_wrap .chart_wrap{display:inline-block;vertical-align:top;width:148px;height:150px;} .recommend_user_match_feed_item .chart_info_wrap .chart_wrap .user_match_chart{width:148px;height:150px;} .recommend_user_match_feed_item .chart_info_wrap .legend_wrap{position:absolute;right:16px;bottom:0;line-height:17px;} .recommend_user_match_feed_item .chart_info_wrap .legend_wrap .past_legend{width:14px;height:13px;border:solid 2px #b2bdce;background:rgba(206, 216, 229, 0.2);vertical-align:top;margin:2px 4px 0 0;} .recommend_user_match_feed_item .chart_info_wrap .legend_wrap .current_legend{width:14px;height:13px;border:solid 2px #3f9dff;background:rgba(63, 157, 255, 0.2);vertical-align:top;margin:2px 4px 0 8px;} .recommend_user_match_feed_item .user_info_wrap{display:inline-block;vertical-align:top;width:calc(100% - 294px);border-radius:13px;background:#f1f4fb;margin-top:14px;padding:36px 16px 20px 16px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap{position:relative;text-align:center;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container{width:60px;height:60px;display:inline-block;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container:first-child{margin-right:12px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container.has_result:first-child{margin-right:60px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container .profile_image{width:60px;height:60px;background:#FFF;border-radius:30px;border:solid 1px #ced8e5;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade{line-height:42px;top:5px;left:calc(50% - 26px);position:absolute;width:52px;height:52px;border-radius:25px;border:solid 4px #f1f4fb;background:#283240;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade.has_result{width:104px;left:calc(50% - 52px);} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade .old_value{opacity:0.5;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade .arrow_icon{vertical-align:top;line-height:20px;margin:10px 4px 0 4px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade .question_icon{height:24px;margin-top:9px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade .value.animate_tada{animation-name:tadaText;animation-duration:1.2s;animation-fill-mode:both;animation-iteration-count:2} .recommend_user_match_feed_item .user_info_wrap .text_wrap{width:100%;min-height:160px;margin-top:18px;text-align:center;position:relative;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .loading_cover_wrap{position:absolute;width:100%;height:160px;top:0;left:0;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .nickname{display:inline;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .game_name{display:inline;cursor:pointer;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .game_name .mobile_icon_new{height:18px;margin-right:2px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .before_small_text{line-height:18px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .before_large_text{line-height:24px;margin-top:4px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .match_button{width:128px;margin-top:16px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .after_large_text{line-height:24px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .after_small_text{line-height:18px;margin-top:8px;} .recommend_user_match_feed_item .user_info_wrap .fade_out_wrap{opacity:1;transition:opacity 0.15s linear;} .recommend_user_match_feed_item .user_info_wrap .fade_out_wrap.animate{opacity:0;pointer-events:none;} .recommend_user_match_feed_item .user_info_wrap .fade_in_wrap{opacity:0;transition:opacity 0.15s linear;} .recommend_user_match_feed_item .user_info_wrap .fade_in_wrap.animate{opacity:1;} @media only screen and (max-width:599px) { .feed_recommend_user_match{width:100%;border-radius:0px;box-shadow:none;margin-top:0px;border:none;border-top:solid 8px #EBEFF8;} .recommend_user_match_feed_item{padding:12px 16px;} .recommend_user_match_feed_item .chart_info_wrap{display:block;width:100%;height:236px;margin-top:16px;} .recommend_user_match_feed_item .chart_info_wrap .legend_wrap{right:0px;} .recommend_user_match_feed_item .user_info_wrap{display:block;width:100%;height:auto;margin-top:24px;padding:20px 16px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container{width:48px;height:48px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container:first-child{margin-right:24px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container.has_result:first-child{margin-right:80px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .profile_container .profile_image{width:48px;height:48px;border-radius:24px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade{line-height:38px;top:0px;left:calc(50% - 24px);width:48px;height:48px;border-radius:24px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade .arrow_icon{line-height:20px;margin:8px 2px 0 2px;} .recommend_user_match_feed_item .user_info_wrap .profile_wrap .match_grade .question_icon{height:24px;margin-top:8px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap{min-height:76px;} .recommend_user_match_feed_item .user_info_wrap .text_wrap .loading_cover_wrap{position:absolute;height:76;} } @keyframes tadaText { from { transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 0deg); } 10%, 30%, 50%, 70%, 90% { transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 6deg); } 20%, 40%, 60%, 80% { transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -6deg); } to { transform: scale3d(1, 1, 1); } } /******** 인피드 추천 리뷰 */ .feed_recommend_user_review{width:588px;border-radius:13px;margin-top:16px;border:none;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} .recommend_user_review_feed_item{padding:16px 20px;overflow:hidden;} .recommend_user_review_feed_item .title{line-height:19px;padding-bottom:12px;border-bottom:solid 1px #ebeff8;} .recommend_user_review_feed_item .game_info_wrap{margin-top:16px;} .recommend_user_review_feed_item .game_info_wrap .game_cover{width:100px;height:100px;margin-right:16px;vertical-align:top;background:#FFF;border-radius:8px;box-shadow:0 5px 6px -3px rgba(3, 24, 39, 0.16), 0 3px 16px 2px rgba(3, 24, 39, 0.1), 0 9px 12px 1px rgba(3, 24, 39, 0.07);background-size:cover;background-position:center;} .recommend_user_review_feed_item .game_info_wrap .game_info_text{width:calc(100% - 116px);vertical-align:top;} .recommend_user_review_feed_item .game_info_wrap .game_info_text .game_name{line-height:24px;margin-top:38px;} .recommend_user_review_feed_item .game_info_wrap .game_info_text .game_name.has_score{margin-top:27px;} .recommend_user_review_feed_item .game_info_wrap .game_info_text .game_name .mobile_icon_new{height:20px;margin:2px 2px 0 0;} .recommend_user_review_feed_item .game_info_wrap .game_info_text .game_score{line-height:16px;margin-top:6px;} .recommend_user_review_feed_item .library_list{} .recommend_user_review_feed_item .library_list .library_item{border-bottom:solid 1px #ebeff8;padding:16px 0;} .recommend_user_review_feed_item .library_list .library_item:last-child{border-bottom:none;} .recommend_user_review_feed_item .library_list .library_item .library_header{line-height:20px;} .recommend_user_review_feed_item .library_list .library_item .review_point_wrap{display:inline-block;vertical-align:top;position:relative;height:20px;width:100px;} .recommend_user_review_feed_item .library_list .library_item .review_point_background{position:absolute;top:0;left:0;} .recommend_user_review_feed_item .library_list .library_item .review_point_foreground{position:absolute;top:0;left:0;} .recommend_user_review_feed_item .library_list .library_item .review_point_star{height:20px;} .recommend_user_review_feed_item .library_list .library_item .review_point{margin-left:4px;} .recommend_user_review_feed_item .library_list .library_item .user_info_wrap{float:right;} .recommend_user_review_feed_item .library_list .library_item .user_info_wrap .profile_container{height:18px;width:18px;margin:1px 4px 0 0;} .recommend_user_review_feed_item .library_list .library_item .user_info_wrap .profile_image{height:18px;width:18px;border:solid 1px #ced8e5;border-radius:9px;} .recommend_user_review_feed_item .library_list .library_item .content{line-height:20px;width:495px;max-height:60px;overflow:hidden;margin-top:8px;cursor:pointer;position:relative;} .recommend_user_review_feed_item .library_list .library_item .content .review_more{position:absolute;bottom:0;right:0;width:42px;height:20px;line-height:20px;text-align:right;background:#FFF;} .recommend_user_review_feed_item .button_wrap{margin-top:8px;border-top:solid 1px #ebeff8;padding-top:12px;} .recommend_user_review_feed_item .button_wrap .other_review_button{width:33%;margin-right:2%;} .recommend_user_review_feed_item .button_wrap .write_review_button{width:65%;} @media only screen and (max-width:599px) { } /******** 구글 광고 */ #feedBody_N .feed_list .ad_wrap{margin-top:16px;} #feedBody_N .feed_list .ad_text{text-align:right;line-height:19px;margin-bottom:4px;} #feedBody_N .feed_list .ad_div{box-sizing:content-box;margin-bottom:20px;position:relative;border-radius:13px;border:none;overflow:hidden;background:#FFF;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} @media only screen and (max-width:599px) { #feedBody_N .feed_list .ad_wrap{margin-top:0px;border-top:solid 8px #EBEFF8;} #feedBody_N .feed_list .ad_text{padding-right:16px;} #feedBody_N .feed_list .ad_div{margin-bottom:0;box-shadow:none;border:none;border-radius:0px;} } /******** 인피드 배너 */ #feedBody_N .infeed_banner_wrap{margin-top:16px;border-radius:13px;overflow:hidden;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} #feedBody_N .infeed_banner_wrap:first-child{margin-top:0;} #feedBody_N .feed_banner{width:100%;height:164px;position:relative;} #feedBody_N .feed_banner .banner_background{padding:26px 32px;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center;} #feedBody_N .feed_banner .banner_foreground{position:absolute;z-index:0;} #feedBody_N .feed_banner .banner_text{line-height:26px;position:relative;z-index:5;} #feedBody_N .feed_banner .banner_button{margin-top:16px;position:relative;z-index:5;} #feedBody_N .feed_banner .banner_button > button{padding:0 16px;} @media only screen and (max-width:599px) { #feedBody_N .infeed_banner_wrap{box-shadow:none;margin-top:0;border-radius:0px;border-top:solid 8px #EBEFF8;} #feedBody_N .feed_banner{height:160px;} #feedBody_N .feed_banner .banner_background{padding:20px 16px;} #feedBody_N .feed_banner .banner_text{line-height:24px;font-size:15px;} #feedBody_N .feed_banner .banner_button{margin-top:12px;} } /******** 피드액션카드 */ #feedBody_N .feed_action_card_wrap{height:298px;position:relative;border-radius:13px;overflow:hidden;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} #feedBody_N .feed_action_card_wrap.small_wrap{height:267px;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation{padding:16px 20px;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.fade_animation{pointer-events:none;} #feedBody_N .feed_action_card_wrap .title{line-height:19px;height:19px;opacity:1;transition:opacity 0.2s linear;} #feedBody_N .feed_action_card_wrap .title .close_button{float:right;height:19px;cursor:pointer;} #feedBody_N .feed_action_card_wrap .description_wrap{margin:16px 0;height:135px;line-height:27px;text-align:center;opacity:1;transition:opacity 0.2s linear, transform 0.2s ease-in-out;} #feedBody_N .feed_action_card_wrap .description_wrap .description_table{width:100%;height:100%;display:table;} #feedBody_N .feed_action_card_wrap .description_wrap .description_cell{display:table-cell;vertical-align:middle;white-space:pre-line;} #feedBody_N .feed_action_card_wrap .action_card_navi{line-height:19px;height:19px;margin-bottom:12px;text-align:center;} #feedBody_N .feed_action_card_wrap .action_card_navi .move_left{float:left;width:72px;height:19px;text-align:left;} #feedBody_N .feed_action_card_wrap .action_card_navi .move_right{float:right;width:72px;height:19px;text-align:right;} #feedBody_N .feed_action_card_wrap .action_card_navi .arrow_icon{height:19px;} #feedBody_N .feed_action_card_wrap .action_card_navi .move_right .arrow_icon{transform:rotate(180deg);} #feedBody_N .feed_action_card_wrap .action_card_navi .move_button{cursor:pointer;} #feedBody_N .feed_action_card_wrap .action_card_button_wrap{border-top:solid 1px #ebeff8;padding-top:12px;text-align:center;} #feedBody_N .feed_action_card_wrap .action_card_button_wrap .main_button{width:65%;opacity:1;transition:opacity 0.2s linear;} #feedBody_N .feed_action_card_wrap .action_card_button_wrap .second_button{width:33%;margin-right:2%;opacity:1;transition:opacity 0.2s linear;} #feedBody_N .feed_action_card_wrap .action_card_button_wrap .single_button{width:220px;margin-right:0;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.fade_animation .title{opacity:0;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.fade_animation .main_button{opacity:0;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.fade_animation .second_button{opacity:0;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.fade_animation .description_wrap{opacity:0;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.animate_left .description_wrap{transform:translateX(-40px);} #feedBody_N .feed_action_card_wrap .feed_action_card_animation.animate_right .description_wrap{transform:translateX(40px);} @media only screen and (max-width:599px) { #feedBody_N .feed_action_card_wrap{height:326px;box-shadow:none;border-radius:0px;border-top:solid 8px #EBEFF8;} #feedBody_N .feed_action_card_wrap.small_wrap{height:295px;} #feedBody_N .feed_action_card_wrap .feed_action_card_animation{padding:16px 16px 12px 16px;} #feedBody_N .feed_action_card_wrap .description_wrap{margin:28px 0;} } #searchBody .feed_action_card_wrap{height:298px;position:relative;margin-bottom:20px;border-radius:13px;overflow:hidden;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} #searchBody .feed_action_card_wrap.small_wrap{height:267px;} #searchBody .feed_action_card_wrap .feed_action_card_animation{padding:16px 20px;position:absolute;top:0;left:0;width:100%;height:100%;} #searchBody .feed_action_card_wrap .title{line-height:19px;height:19px;opacity:1;transition:opacity 0.2s linear;} #searchBody .feed_action_card_wrap .title .close_button{float:right;height:19px;cursor:pointer;} #searchBody .feed_action_card_wrap .description_wrap{margin:16px 0;height:135px;line-height:27px;text-align:center;opacity:1;transition:opacity 0.2s linear, transform 0.2s ease-in-out;} #searchBody .feed_action_card_wrap .description_wrap .description_table{width:100%;height:100%;display:table;} #searchBody .feed_action_card_wrap .description_wrap .description_cell{display:table-cell;vertical-align:middle;white-space:pre;} #searchBody .feed_action_card_wrap .action_card_button_wrap{border-top:solid 1px #ebeff8;padding-top:12px;text-align:center;} #searchBody .feed_action_card_wrap .action_card_button_wrap .main_button{width:65%;opacity:1;transition:opacity 0.2s linear;} #searchBody .feed_action_card_wrap .action_card_button_wrap .second_button{width:33%;margin-right:2%;opacity:1;transition:opacity 0.2s linear;} #searchBody .feed_action_card_wrap .action_card_button_wrap .single_button{width:220px;margin-right:0;} @media only screen and (max-width:599px) { #searchBody .feed_action_card_wrap{height:326px;margin-bottom:0px;box-shadow:none;border-radius:0px;border-top:solid 8px #EBEFF8;} #searchBody .feed_action_card_wrap.small_wrap{height:295px;} #searchBody .feed_action_card_wrap .feed_action_card_animation{padding:16px 16px 12px 16px;} #searchBody .feed_action_card_wrap .description_wrap{margin:28px 0;} } /******** 추천 리뷰 쓰기 */ #feedBody_N .recommend_write_review_wrap{margin-top:16px;border-radius:13px;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);position:relative;} #feedBody_N .recommend_write_review_wrap:first-child{margin-top:0px;} #feedBody_N .recommend_write_review_wrap .background_wrap{width:100%;height:80px;overflow:hidden;border-top-right-radius:13px;border-top-left-radius:13px;position:relative;} #feedBody_N .recommend_write_review_wrap .cover_image_background{width:calc(100% + 20px);height:100px;background-size:cover;background-position:center;filter:blur(10px);margin:-10px 0 0 -10px;} #feedBody_N .recommend_write_review_wrap .background_cover{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(3, 24, 39, 0.2);} #feedBody_N .recommend_write_review_wrap .cover_image{cursor:pointer;width:100px;height:100px;position:absolute;top:30px;left:calc(50% - 50px);border-radius:13px;background-size:cover;background-position:center;background-color:#FFF;box-shadow:0 5px 6px -3px rgba(3, 24, 39, 0.16), 0 3px 16px 2px rgba(3, 24, 39, 0.1), 0 9px 12px 1px rgba(3, 24, 39, 0.07);} #feedBody_N .recommend_write_review_wrap .write_review_text{width:540px;margin:72px auto 0 auto;text-align:center;line-height:24px;} #feedBody_N .recommend_write_review_wrap .write_review_text .game_name{display:inline;} #feedBody_N .recommend_write_review_wrap .write_review_text .game_name .mobile_icon_new{height:20px;vertical-align:top;margin-top:2px;} #feedBody_N .recommend_write_review_wrap .write_review_subtext{line-height:24px;text-align:center;margin-bottom:16px;} #feedBody_N .recommend_write_review_wrap .button_wrap{border-top:solid 1px #ebeff8;width:calc(100% - 40px);margin:0 auto;padding:16px 0;text-align:center;} #feedBody_N .recommend_write_review_wrap .button_wrap .write_button{width:220px;} @media only screen and (max-width:599px) { #feedBody_N .recommend_write_review_wrap{margin-top:0px;box-shadow:none;border-radius:0px;border-top:solid 8px #EBEFF8;} #feedBody_N .recommend_write_review_wrap .background_wrap{border-top-right-radius:0px;border-top-left-radius:0px;} #feedBody_N .recommend_write_review_wrap .write_review_text{max-width:calc(100% - 32px);margin:70px auto 0 auto;} #feedBody_N .recommend_write_review_wrap .button_wrap{width:calc(100% - 32px);padding:12px 0;} } @media only screen and (max-width:350px) { #feedBody_N .recommend_write_review_wrap .write_review_text{font-size:15px;} #feedBody_N .recommend_write_review_wrap .write_review_text .game_name{font-size:15px;} #feedBody_N .recommend_write_review_wrap .write_review_subtext{font-size:15px;} } /******** 추천 리뷰 쓰기 */ #hideConfirmPopup{background:#FFF;width:420px;padding:20px 24px;border-radius:13px;} #hideConfirmPopup .title{line-height:27px;} #hideConfirmPopup .title .mobile_icon_new{height:24px;margin-top:2px;} #hideConfirmPopup .description{line-height:22px;margin-top:6px;} #hideConfirmPopup .alert{line-height:19px;margin-top:16px;} #hideConfirmPopup .alert .alert_icon{height:19px;margin-right:2px;} #hideConfirmPopup .button_wrap{margin-top:28px;} #hideConfirmPopup .button_wrap .btn_r{width:48%;margin-right:4%;} #hideConfirmPopup .button_wrap .btn_r:last-child{margin-right:0;} @media only screen and (max-width:599px) { #hideConfirmPopup{width:calc(100% - 32px);margin:auto;} } /******** 공통 - 피드 기본 레이아웃 - 포스트피드형태 사용하는 곳에서 모두 사용함 (피드, 게임, 게시판, 검색, 유저 등) */ #feedBody{padding-bottom:150px;} #feedRow{padding:60px 0;min-height:100vh;} #feedRow .feed_title{line-height:24px;} #feedRow .feed_title .feed_search_title{margin-bottom:60px;} #feedRow .info_module:first-child{margin-top:0px;} #feedRow .feed_title .feed_search_title .search_cnt{margin-left:4px;} #feedRow .no_search_result{line-height:24px;} #feedRow .no_result{text-align:center;line-height:24px;margin-top:60px;} #feedRow .no_result_button{text-align:center;margin-top:30px;} @media only screen and (max-width:1000px) and (min-width:600px) { #pageBodyHolder_NEW.mobile_width #feedRow .body_left{width:600px;float:none;margin:auto;display:block;} #pageBodyHolder_NEW.mobile_width #feedRow .body_right{display:none;} } @media only screen and (max-width:599px) { #feedRow{padding-top:0px;} #pageBodyHolder_NEW #feedRow .body_right{display:none;} #feedRow .feed_title{width:100%;} #feedRow .feed_title .feed_search_title{padding:20px 16px;margin-bottom:0px;border-bottom:solid 1px #D8D8D8;} #feedRow .no_search_result{text-align:center;margin-top:50px;} #feedRow .no_result{padding:0 16px;} #feedRow .no_result_button{margin-bottom:50px;} } /******** 피드 배너 */ #feedBody .body_left .banner_wrap{margin-top:20px;} @media only screen and (max-width:599px) { #feedBody .body_left .banner_wrap{margin-top:0px;border-bottom:solid 8px #D8D8D8;} } /******** 배너 */ #feedRow .feed_guide_banner{width:100%;margin-bottom:40px;} #feedRow .feed_guide_banner img{width:100%;border-radius:4px;} @media only screen and (max-width:599px) { #feedRow .feed_guide_banner{border-bottom:solid 8px #D8D8D8;margin-bottom:0px;border-radius:0px;} #feedRow .feed_guide_banner img{border-radius:0px;} } /******** 내용 없는 리뷰 */ .short_review_feed_item .short_review_header{padding:18px 20px;line-height:22px;} .short_review_feed_item .short_review_header span{display:inline;} .short_review_feed_item .short_review_header .profile_wrap{display:inline-block;width:24px;vertical-align:top;} .short_review_feed_item .short_review_header .text_wrap{display:inline-block;width:calc(100% - 24px);vertical-align:top;} .short_review_feed_item .short_review_header .profile_wrap .profile_image{vertical-align:top;margin-right:4px;margin-top:1px;width:20px;height:20px;border-radius:10px;border:solid 1px #ced8e5;} .short_review_feed_item .short_review_header .user_info .user_nickname_id{vertical-align:top;} .short_review_feed_item .short_review_header .user_info.short_name .user_nickname_id{} .short_review_feed_item .short_review_header .user_info .user_nickname_id .dev_user_icon{margin-top:3px;} .short_review_feed_item .short_review_header .user_info .user_id{margin-left:4px;margin-right:4px;} .short_review_feed_item .short_review_header .game_info{margin-left:4px;} .short_review_feed_item .short_review_header .game_info .library_state_button_square{height:20px;margin-top:1px;margin-right:1px;} .short_review_feed_item .short_review_header .game_info .game_name{vertical-align:top;} .short_review_feed_item .short_review_header .game_info .game_name .mobile_icon_new{height:18px;margin-top:2px;} .short_review_feed_item .short_review_header .game_info.short_name .game_name{} .short_review_feed_item .short_review_header .game_info .review_point_star{height:18px;vertical-align:top;margin-top:2px;} .short_review_feed_item .short_review_header .display_time{float:right;vertical-align:top;margin-left:4px;} @media only screen and (max-width:599px) { .short_review_feed_item .short_review_header{padding:16px;} } /******** 숨겨진 포스트 */ .hidden_post_feed_item .post_header{width:100%;padding:26px 0 0 27px;position:relative;} .hidden_post_feed_item .post_header .profile_container{float:left;width:42px;margin-right:10px;} .hidden_post_feed_item .post_header .profile_image{width:42px;height:42px;border-radius:21px;border:solid 1px #9B9B9B;} .hidden_post_feed_item .post_header .user_row{height:18px;line-height:18px;} .hidden_post_feed_item .post_header .user_row .nickname_id{max-width:calc(100% - 155px);} .hidden_post_feed_item .post_header .user_row .user_id{margin-left:9px;} .hidden_post_feed_item .post_header .user_row .game_admin_user_mark{margin:1px 0px 0px 3px;height:16px;vertical-align:top;} .hidden_post_feed_item .post_header .title_row{padding-right:25px;margin-top:1px;height:24px;line-height:24px;} .hidden_post_feed_item .post_header .post_option{float:right;} .hidden_post_feed_item .post_header .post_option .open_state{height:20px;vertical-align:top;margin-top:-1px;margin-right:2px;} .hidden_post_feed_item .post_header .post_option .option_button{cursor:pointer;width:30px;height:100%;text-align:center;} .hidden_post_feed_item .post_header .post_option .option_image{height:18px;vertical-align:top;margin-top:0px;} .hidden_post_feed_item .hidden_content_wrap{width:100%;height:472px;padding:16px;} .hidden_post_feed_item .hidden_content_wrap .hidden_content{background-image:url('/images/background/hidden_post.jpg');width:100%;height:100%;background-size:100% 100%;padding-top:90px;} .hidden_post_feed_item .hidden_content_wrap .hidden_info{width:440px;height:232px;margin:0px auto;padding:55px 32px;background:#E5F3FF;border:solid 1px #CED8E5;border-radius:8px;text-align:center;} .hidden_post_feed_item .hidden_content_wrap .hidden_info .description{line-height:26px;} .hidden_post_feed_item .hidden_content_wrap .hidden_info .hidden_button{margin-top:20px;} .hidden_post_feed_item .hidden_content_wrap .hidden_info .hidden_button .btn_r{width:178px;} @media only screen and (max-width:599px) { .hidden_post_feed_item .post_header{padding:16px 0 0 16px;} .hidden_post_feed_item .post_header .profile_container{width:40px;margin-right:8px;} .hidden_post_feed_item .post_header .profile_image{width:40px;height:40px;border-radius:20px;} .hidden_post_feed_item .post_header .user_row{height:16px;line-height:16px;} .hidden_post_feed_item .post_header .user_row .nickname_id{max-width:calc(100% - 130px);font-size:13px;font-weight:400;letter-spacing:-0.3px;} .hidden_post_feed_item .post_header .user_row .user_id{margin-left:8px;} .hidden_post_feed_item .post_header .title_row{padding-right:16px;margin-top:3px;height:20px;line-height:20px;font-size:14px;font-weight:400;letter-spacing:-0.3px;} .hidden_post_feed_item .post_header .post_option .open_state{margin-top:-2px;} .hidden_post_feed_item .hidden_content_wrap{height:416px;} .hidden_post_feed_item .hidden_content_wrap .hidden_info{width:calc(100% - 24px);max-width:320px;padding:43px 50px;} .hidden_post_feed_item .hidden_content_wrap .hidden_info .hidden_button{margin-top:16px;} .hidden_post_feed_item .hidden_content_wrap .hidden_info .hidden_button .btn_r{width:178px;} } @media only screen and (max-width:374px) { .hidden_post_feed_item .hidden_content_wrap .hidden_info{padding:43px 16px;} } /******** 추천게임 */ .recommend_game_feed_item{padding:20px 25px;} .recommend_game_feed_item .title{line-height:24px;height:24px;} .recommend_game_feed_item .title .info_tooltip{margin-top:4px;} .recommend_game_feed_item .selected_game_info{height:18px;line-height:18px;margin-top:10px;margin-bottom:18px;} .recommend_game_feed_item .selected_game_info .selected_game_name{vertical-align:top;} .recommend_game_feed_item .selected_game_info .selected_game_name.high_review_point{max-width:410px;} .recommend_game_feed_item .selected_game_info .selected_game_name.recent_added{max-width:435px;} .recommend_game_feed_item .selected_game_info .selected_game_name.write_post{max-width:360px;} .recommend_game_feed_item .selected_game_info .selected_game_name.also_played{max-width:370px;} .recommend_game_feed_item .feed_recommend_game_row{height:64px;margin-top:10px;} .recommend_game_feed_item .feed_recommend_game_row:first-child{margin-top:0px;} .recommend_game_feed_item .feed_recommend_game_row .image_container{width:64px;height:64px;float:left;margin-right:12px;border-radius:2px;} .recommend_game_feed_item .feed_recommend_game_row .game_score{line-height:18px;min-height:7px;} .recommend_game_feed_item .feed_recommend_game_row .game_name{height:20px;line-height:20px;margin-top:2px;} .recommend_game_feed_item .feed_recommend_game_row .recommend_reason{height:16px;line-height:16px;margin-top:4px;} .recommend_game_feed_item .feed_recommend_game_row .recommend_genre{height:16px;line-height:16px;margin-top:4px;} @media only screen and (max-width:599px) { .recommend_game_feed_item{padding:16px;} .recommend_game_feed_item .selected_game_info .selected_game_name.high_review_point{max-width:calc(100vw - 170px);} .recommend_game_feed_item .selected_game_info .selected_game_name.recent_added{max-width:calc(100vw - 145px);} .recommend_game_feed_item .selected_game_info .selected_game_name.write_post{max-width:calc(100vw - 225px);} .recommend_game_feed_item .selected_game_info .selected_game_name.also_played{max-width:calc(100vw - 210px);} } @media only screen and (max-width:374px) { .recommend_game_feed_item .selected_game_info{height:auto;max-height:36px;} .recommend_game_feed_item .selected_game_info .selected_game_name.high_review_point{max-width:70vw;} .recommend_game_feed_item .selected_game_info .selected_game_name.recent_added{max-width:70vw;} .recommend_game_feed_item .selected_game_info .selected_game_name.write_post{max-width:70vw;} .recommend_game_feed_item .selected_game_info .selected_game_name.also_played{max-width:70vw;} } /******** 게임부족 */ .not_enough_game_feed_item{padding:20px 25px;} .not_enough_game_feed_item .title{line-height:24px;height:24px;} .not_enough_game_feed_item .not_enough_game .description{line-height:20px;margin-top:10px;} .not_enough_game_feed_item .not_enough_game .go_rating_button{margin-top:20px;} @media only screen and (max-width:599px) { .not_enough_game_feed_item{padding:16px;} } /******** 유저 */ .user_feed_item{padding:16px;} .user_feed_item .profile_container{width:50px;margin-right:10px;vertical-align:top;} .user_feed_item .profile_container .profile_image{width:50px;height:50px;border-radius:25px;border:solid 1px #9B9B9B;} .user_feed_item .user_info_wrap{width:calc(100% - 136px);vertical-align:top;padding-top:4px;} .user_feed_item .user_info_wrap .follow_button_r{width:76px;} .user_feed_item .user_info_wrap .nickname{line-height:22px;height:22px;vertical-align:top;} .user_feed_item .user_info_wrap .nickname.my_nickname{} .user_feed_item .user_info_wrap .nickname .dev_user_icon{height:18px;margin:3px 0 0 2px;} .user_feed_item .user_info_wrap .user_id{line-height:22px;height:22px;vertical-align:top;} .user_feed_item .intro{margin-top:10px;line-height:18px;max-height:54px;} /******** 업적 */ .achievement_feed_item{padding:12px 16px 14px 0px;} .achievement_feed_item.need_claim{background:#e5f3ff;} .achievement_feed_item .achievement_image_wrap{position:relative;vertical-align:top;} .achievement_feed_item .achievement_image{height:48px;} .achievement_feed_item .achievement_title_icon{position:absolute;top:-6px;right:-6px;height:28px;} .achievement_feed_item .info_wrap{margin-left:12px;display:inline-block;vertical-align:top;width:calc(100% - 56px);} .achievement_feed_item .text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 274px);} .achievement_feed_item .text_wrap.has_title{width:calc(100% - 526px);} .achievement_feed_item .text_wrap .title{line-height:22px;} .achievement_feed_item .text_wrap .description{margin-top:1px;line-height:22px;} .achievement_feed_item .title_wrap{width:240px;vertical-align:top;margin-top:12px;line-height:24px;margin-right:12px;} .achievement_feed_item .title_wrap.is_use{margin-top:5px;} .achievement_feed_item .title_wrap .title_name{width:174px;margin-right:4px;border-radius:12px;background:#bfe1ff;text-align:center;color:#031827;} .achievement_feed_item .title_wrap .title_name.did_claim{background:#ebeff8;} .achievement_feed_item .title_wrap .title_name.cant_claim{background:#ebeff8;opacity:0.3;} .achievement_feed_item .title_wrap .title_status{width:60px;height:24px;line-height:22px;font-size:11px;letter-spacing:-0.27px;} .achievement_feed_item .title_wrap .is_use_mark{width:174px;text-align:center;line-height:12px;margin-top:4px;} .achievement_feed_item .title_wrap .is_use_mark .check_mark{height:12px;width:12px;padding:1px;background:#3f9dff;vertical-align:top;margin:0px 2px 0 0;border-radius:6px;} .achievement_feed_item .global_percent{text-align:center;width:118px;line-height:24px;margin-top:15px;} .achievement_feed_item .complete_time{text-align:center;width:118px;line-height:24px;margin-top:15px;margin-right:16px;} .achievement_feed_item .share_button{height:20px;width:20px;margin-top:14px;} .achievement_feed_item .share_button img{height:20px;cursor:pointer;} .achievement_feed_item .achievement_progress{position:relative;display:inline-block;width:146px;height:4px;margin-top:25px;margin-left:16px;vertical-align:top;} .achievement_feed_item .achievement_slider_background{width:100%;height:4px;background:#e5f3ff;position:absolute;top:0px;left:0px;border-radius:2px;} .achievement_feed_item .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);} .achievement_feed_item .achievement_progress_cnt{width:84px;line-height:24px;margin-top:15px;margin-left:8px;} .achievement_feed_item .divider{display:none;} @media only screen and (max-width:900px) and (min-width:600px) { .mobile_width .achievement_feed_item{padding:20px;} .mobile_width .achievement_feed_item .achievement_image{height:48px;} .mobile_width .achievement_feed_item .text_wrap{display:block;width:100%;} .mobile_width .achievement_feed_item .text_wrap.has_title{width:100%;} .mobile_width .achievement_feed_item .title_wrap{width:100%;margin-top:12px;margin-right:0px;} .mobile_width .achievement_feed_item .title_wrap.is_use{margin-top:12px;} .mobile_width .achievement_feed_item .title_wrap .title_name{width:calc(100% - 64px);} .mobile_width .achievement_feed_item .title_wrap .is_use_mark{width:calc(100% - 64px);} .mobile_width .achievement_feed_item .global_percent{text-align:left;width:auto;margin-top:12px;margin-right:16px;} .mobile_width .achievement_feed_item .complete_time{text-align:left;width:auto;margin-top:12px;margin-right:0;} .mobile_width .achievement_feed_item .share_button{float:right;} .mobile_width .achievement_feed_item .achievement_progress{width:160px;margin-top:20px;margin-left:0px;} .mobile_width .achievement_feed_item .achievement_progress_cnt{width:auto;margin-top:10px;margin-left:6px;} } @media only screen and (max-width:599px) { .achievement_feed_item{padding:16px 16px 0 16px;} .achievement_feed_item .achievement_image{height:48px;} .achievement_feed_item .text_wrap{display:block;width:100%;} .achievement_feed_item .text_wrap.has_title{width:100%;} .achievement_feed_item .title_wrap{width:100%;margin-top:12px;margin-right:0px;} .achievement_feed_item .title_wrap.is_use{margin-top:12px;} .achievement_feed_item .title_wrap .title_name{width:calc(100% - 64px);} .achievement_feed_item .title_wrap .is_use_mark{width:calc(100% - 64px);} .achievement_feed_item .global_percent{text-align:left;width:auto;margin-top:12px;margin-right:16px;} .achievement_feed_item .complete_time{text-align:left;width:auto;margin-top:12px;margin-right:0;} .achievement_feed_item .share_button{float:right;} .achievement_feed_item .achievement_progress{width:160px;margin-top:20px;margin-left:0px;} .achievement_feed_item .achievement_progress_cnt{width:auto;margin-top:10px;margin-left:6px;} .achievement_feed_item .divider{display:block;margin-top:16px;width:100%;height:1px;background:#ebeff8;} } #gameTooltipWrap .achievement_feed_item{padding:0px;} #gameTooltipWrap .achievement_feed_item .achievement_image{height:48px;} #gameTooltipWrap .achievement_feed_item .text_wrap{display:block;width:100%;} #gameTooltipWrap .achievement_feed_item .text_wrap.has_title{width:100%;} #gameTooltipWrap .achievement_feed_item .title_wrap{width:100%;margin-top:12px;margin-right:0px;} #gameTooltipWrap .achievement_feed_item .title_wrap.is_use{margin-top:12px;} #gameTooltipWrap .achievement_feed_item .title_wrap .title_name{width:calc(100% - 64px);} #gameTooltipWrap .achievement_feed_item .title_wrap .is_use_mark{width:calc(100% - 64px);} #gameTooltipWrap .achievement_feed_item .global_percent{text-align:left;width:auto;margin-top:12px;margin-right:16px;} #gameTooltipWrap .achievement_feed_item .complete_time{text-align:left;width:auto;margin-top:12px;margin-right:0;} #gameTooltipWrap .achievement_feed_item .share_button{float:right;} #gameTooltipWrap .achievement_feed_item .achievement_progress{width:160px;margin-top:20px;margin-left:0px;} #gameTooltipWrap .achievement_feed_item .achievement_progress_cnt{width:auto;margin-top:10px;margin-left:6px;} #gameTooltipWrap .achievement_feed_item .divider{display:none;} /******** 스팀 업적 */ .steam_achievement_feed_item{padding:12px 0;overflow:hidden;} .steam_achievement_feed_item > div{vertical-align:top;} .steam_achievement_feed_item > div > div{vertical-align:top;} .steam_achievement_feed_item .achievement_icon{height:48px;width:48px;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;} .steam_achievement_feed_item .achievement_info{display:inline-block;width:calc(43% - 60px);margin-right:12px;} .steam_achievement_feed_item .achievement_info .title{line-height:22px;} .steam_achievement_feed_item .achievement_info .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .steam_achievement_feed_item .achievement_info .description{line-height:22px;margin-top:1px;} .steam_achievement_feed_item .game_info{display:inline-block;width:26%;padding-top:12px;cursor:pointer;} .steam_achievement_feed_item .game_info .game_image{display:inline-block;width:24px;height:24px;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:4px;background-color:#ced8e5;} .steam_achievement_feed_item .game_info .game_title{display:inline-block;width:calc(100% - 36px);line-height:24px;} .steam_achievement_feed_item .complete_info{display:inline-block;padding-top:12px;width:calc(31% - 12px);} .steam_achievement_feed_item .complete_info .global_percent{display:inline-block;line-height:24px;width:45%;text-align:center;} .steam_achievement_feed_item .complete_info .global_percent img{height:18px;margin:3px 6px 0 0;vertical-align:top;} .steam_achievement_feed_item .complete_info .complete_time{display:inline-block;line-height:24px;width:calc(55% - 48px);text-align:center;} .steam_achievement_feed_item .complete_info .share_button{display:inline-block;width:48px;} .steam_achievement_feed_item .complete_info .share_button img{height:20px;cursor:pointer;vertical-align:top;margin:2px 0 0 12px;} @media only screen and (max-width:599px) { .steam_achievement_feed_item{position:relative;padding:26px 0 0 0;} .steam_achievement_feed_item .achievement_icon{height:56px;width:56px;} .steam_achievement_feed_item .achievement_info{width:calc(100% - 68px);margin-right:0px;} .steam_achievement_feed_item .game_info{display:block;position:absolute;top:0;left:0;width:100%;padding-top:0px;margin-right:0px;} .steam_achievement_feed_item .game_info .game_image{width:16px;height:16px;margin-right:4px;} .steam_achievement_feed_item .game_info .game_title{width:calc(100% - 20px);line-height:16px;font-size:12px;} .steam_achievement_feed_item .complete_info{display:block;margin-left:68px;padding-top:0px;width:calc(100% - 68px);margin-top:4px;} .steam_achievement_feed_item .complete_info .global_percent{line-height:20px;width:auto;margin-right:12px;} .steam_achievement_feed_item .complete_info .global_percent img{margin:1px 4px 0 0;} .steam_achievement_feed_item .complete_info .complete_time{line-height:20px;width:auto;text-align:left;} .steam_achievement_feed_item .complete_info .share_button{width:auto;float:right;} .steam_achievement_feed_item .complete_info .share_button img{height:20px;margin:0px;} } #gameTooltipWrap .achievement_tooltip{width:370px;padding:16px;background:#FFF;border-radius:8px;overflow:hidden;box-shadow:0 5px 5px -3px rgba(3, 24, 39, 0.16), 0 3px 14px 2px rgba(3, 24, 39, 0.08), 0 8px 10px 1px rgba(3, 24, 39, 0.07);} #gameTooltipWrap .steam_achievement_feed_item{position:relative;padding:26px 0 0 0;} #gameTooltipWrap .steam_achievement_feed_item .platform_icon{position:absolute;top:0;right:0;height:20px;} #gameTooltipWrap .steam_achievement_feed_item .achievement_icon{height:56px;width:56px;} #gameTooltipWrap .steam_achievement_feed_item .achievement_info{width:calc(100% - 68px);margin-right:0px;} #gameTooltipWrap .steam_achievement_feed_item .game_info{display:block;position:absolute;top:0;left:0;width:100%;padding-top:0px;margin-right:0px;} #gameTooltipWrap .steam_achievement_feed_item .game_info .game_image{width:16px;height:16px;margin-right:4px;} #gameTooltipWrap .steam_achievement_feed_item .game_info .game_title{width:calc(100% - 20px);line-height:16px;font-size:12px;} #gameTooltipWrap .steam_achievement_feed_item .complete_info{display:block;margin-left:68px;padding-top:0px;width:calc(100% - 68px);margin-top:4px;} #gameTooltipWrap .steam_achievement_feed_item .complete_info .global_percent{line-height:20px;width:auto;margin-right:12px;} #gameTooltipWrap .steam_achievement_feed_item .complete_info .global_percent img{margin:1px 4px 0 0;} #gameTooltipWrap .steam_achievement_feed_item .complete_info .complete_time{line-height:20px;width:auto;text-align:left;} #gameTooltipWrap .steam_achievement_feed_item .complete_info .share_button{width:auto;float:right;} #gameTooltipWrap .steam_achievement_feed_item .complete_info .share_button img{height:20px;margin:0px;} @media only screen and (max-width:402px) { #gameTooltipWrap .achievement_tooltip{width:calc(100vw - 32px);} } /******** 스팀 업적 게임 */ .steam_achievement_game_feed_item{width:100%;height:284px;cursor:pointer;} .steam_achievement_game_feed_item .cover_image{position:relative;width:100%;height:140px;background-size:cover, 36px 36px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} .steam_achievement_game_feed_item .cover_image .complete_badge{position:absolute;top:0;left:14px;width:42px;} .steam_achievement_game_feed_item .cover_image .share_button{position:absolute;bottom:12px;right:12px;cursor:pointer;height:24px;width:24px;background-image:url('/images/icon_v3/share_shadow.png');background-size:24px 24px;} .steam_achievement_game_feed_item .cover_image .share_button:hover{background-image:url('/images/icon_v3/share_hover.png');} .steam_achievement_game_feed_item .game_info{padding:16px 20px;} .steam_achievement_game_feed_item .game_info .game_name{line-height:24px;height:48px;max-height:48px;overflow:hidden;} .steam_achievement_game_feed_item .game_info .share_button{display:none;} .steam_achievement_game_feed_item .game_info .achievement_progress{width:100%;height:4px;margin-top:30px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} .steam_achievement_game_feed_item .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;} .steam_achievement_game_feed_item .detail_info{margin-top:10px;line-height:20px;} .steam_achievement_game_feed_item .detail_info img{vertical-align:top;height:16px;margin-top:2px;margin-right:4px;} .steam_achievement_game_feed_item .detail_info .achievement_cnt{margin-right:12px;} .steam_achievement_game_feed_item .detail_info .achievement_percent{float:right;} @media only screen and (max-width:599px) { .steam_achievement_game_feed_item{height:auto;} .steam_achievement_game_feed_item .cover_image{position:relative;width:116px;height:54px;display:inline-block;margin-right:12px;border-radius:8px;vertical-align:top;} .steam_achievement_game_feed_item .cover_image .complete_badge{position:absolute;top:0;left:4px;width:24px;} .steam_achievement_game_feed_item .cover_image .share_button{display:none;} .steam_achievement_game_feed_item .game_info{padding:0;display:inline-block;width:calc(100% - 128px);vertical-align:top;} .steam_achievement_game_feed_item .game_info .game_name{width:calc(100% - 20px);display:inline-block;vertical-align:top;} .steam_achievement_game_feed_item .game_info .share_button{display:inline-block;width:20px;height:20px;vertical-align:top;margin-top:8px;} .steam_achievement_game_feed_item .game_info .share_button img{width:20px;height:20px;} } /******** 스팀 게임 업적 */ .steam_game_achievement_feed_item{padding:12px 0;overflow:hidden;position:relative;} .steam_game_achievement_feed_item > div{vertical-align:top;} .steam_game_achievement_feed_item .achievement_icon{height:48px;width:48px;display:inline-block;margin-right:12px;border-radius:8px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} .steam_game_achievement_feed_item .achievement_icon.incomplete_achievement{opacity:0.12;} .steam_game_achievement_feed_item .achievement_info{display:inline-block;width:calc(100% - 60px);} .steam_game_achievement_feed_item .achievement_info .title{line-height:22px;} .steam_game_achievement_feed_item .achievement_info .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .steam_game_achievement_feed_item .achievement_info .hidden_info_button{float:right;} .steam_game_achievement_feed_item .achievement_info .hidden_info_button img{height:16px;vertical-align:top;margin:3px 2px 0 0;} .steam_game_achievement_feed_item .achievement_info .description{line-height:20px;margin-top:2px;margin-bottom:6px;} .steam_game_achievement_feed_item .complete_info{margin-top:2px;width:100%;line-height:20px;} .steam_game_achievement_feed_item .complete_info .global_percent{margin-right:12px;} .steam_game_achievement_feed_item .complete_info .global_percent img{height:18px;margin:1px 6px 0 0;vertical-align:top;} .steam_game_achievement_feed_item .complete_info .share_button{float:right;} .steam_game_achievement_feed_item .complete_info .share_button img{height:20px;cursor:pointer;vertical-align:top;} .steam_game_achievement_feed_item .hidden_info_wrap{position:absolute;top:0px;height:0;width:100%;height:100%;padding:12px 0px;z-index:1;} .steam_game_achievement_feed_item .hidden_info_wrap > div{vertical-align:top;} .steam_game_achievement_feed_item .hidden_info_wrap .hidden_icon{height:48px;width:48px;display:inline-block;margin-right:12px;border-radius:8px;background-size:24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} /******** 플스 업적 */ .playstation_achievement_feed_item{padding:12px 0;overflow:hidden;} .playstation_achievement_feed_item > div{vertical-align:top;} .playstation_achievement_feed_item > div > div{vertical-align:top;} .playstation_achievement_feed_item .achievement_icon{height:48px;width:48px;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;} .playstation_achievement_feed_item .achievement_info{display:inline-block;width:calc(43% - 60px);margin-right:12px;} .playstation_achievement_feed_item .achievement_info .title{line-height:22px;} .playstation_achievement_feed_item .achievement_info .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .playstation_achievement_feed_item .achievement_info .description{line-height:22px;margin-top:1px;} .playstation_achievement_feed_item .game_info{display:inline-block;width:26%;padding-top:12px;cursor:pointer;} .playstation_achievement_feed_item .game_info .game_image{display:inline-block;width:24px;height:24px;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:4px;background-color:#ced8e5;} .playstation_achievement_feed_item .game_info .game_title{display:inline-block;width:calc(100% - 36px);line-height:24px;} .playstation_achievement_feed_item .complete_info{display:inline-block;padding-top:12px;width:calc(31% - 12px);} .playstation_achievement_feed_item .complete_info .global_percent{display:inline-block;line-height:24px;width:45%;text-align:center;} .playstation_achievement_feed_item .complete_info .global_percent img{height:18px;margin:3px 6px 0 0;vertical-align:top;} .playstation_achievement_feed_item .complete_info .complete_time{display:inline-block;line-height:24px;width:calc(55% - 48px);text-align:center;} .playstation_achievement_feed_item .complete_info .share_button{display:inline-block;width:48px;} .playstation_achievement_feed_item .complete_info .share_button img{height:20px;cursor:pointer;vertical-align:top;margin:2px 0 0 12px;} #gameTooltipWrap .playstation_achievement_feed_item{position:relative;padding:26px 0 0 0;} #gameTooltipWrap .playstation_achievement_feed_item .platform_icon{position:absolute;top:0;right:0;height:20px;} #gameTooltipWrap .playstation_achievement_feed_item .achievement_icon{height:56px;width:56px;} #gameTooltipWrap .playstation_achievement_feed_item .achievement_info{width:calc(100% - 68px);margin-right:0px;} #gameTooltipWrap .playstation_achievement_feed_item .game_info{display:block;position:absolute;top:0;left:0;width:100%;padding-top:0px;margin-right:0px;} #gameTooltipWrap .playstation_achievement_feed_item .game_info .game_image{width:16px;height:16px;margin-right:4px;} #gameTooltipWrap .playstation_achievement_feed_item .game_info .game_title{width:calc(100% - 20px);line-height:16px;font-size:12px;} #gameTooltipWrap .playstation_achievement_feed_item .complete_info{display:block;margin-left:68px;padding-top:0px;width:calc(100% - 68px);margin-top:4px;} #gameTooltipWrap .playstation_achievement_feed_item .complete_info .global_percent{line-height:20px;width:auto;margin-right:12px;} #gameTooltipWrap .playstation_achievement_feed_item .complete_info .global_percent img{margin:1px 4px 0 0;} #gameTooltipWrap .playstation_achievement_feed_item .complete_info .complete_time{line-height:20px;width:auto;text-align:left;} #gameTooltipWrap .playstation_achievement_feed_item .complete_info .share_button{width:auto;float:right;} #gameTooltipWrap .playstation_achievement_feed_item .complete_info .share_button img{height:20px;margin:0px;} @media only screen and (max-width:599px) { .playstation_achievement_feed_item{position:relative;padding:26px 0 0 0;} .playstation_achievement_feed_item .achievement_icon{height:56px;width:56px;} .playstation_achievement_feed_item .achievement_info{width:calc(100% - 68px);margin-right:0px;} .playstation_achievement_feed_item .game_info{display:block;position:absolute;top:0;left:0;width:100%;padding-top:0px;margin-right:0px;} .playstation_achievement_feed_item .game_info .game_image{width:16px;height:16px;margin-right:4px;} .playstation_achievement_feed_item .game_info .game_title{width:calc(100% - 20px);line-height:16px;font-size:12px;} .playstation_achievement_feed_item .complete_info{display:block;margin-left:68px;padding-top:0px;width:calc(100% - 68px);margin-top:4px;} .playstation_achievement_feed_item .complete_info .global_percent{line-height:20px;width:auto;margin-right:12px;} .playstation_achievement_feed_item .complete_info .global_percent img{margin:1px 4px 0 0;} .playstation_achievement_feed_item .complete_info .complete_time{line-height:20px;width:auto;text-align:left;} .playstation_achievement_feed_item .complete_info .share_button{width:auto;float:right;} .playstation_achievement_feed_item .complete_info .share_button img{height:20px;margin:0px;} } /******** 플스 업적 게임 */ .playstation_achievement_game_feed_item{width:100%;height:309px;cursor:pointer;} .playstation_achievement_game_feed_item .cover_image{position:relative;width:100%;height:165px;background-size:cover;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} .playstation_achievement_game_feed_item .cover_image .complete_badge{position:absolute;top:0;left:14px;width:42px;} .playstation_achievement_game_feed_item .cover_image .share_button{position:absolute;bottom:12px;right:12px;cursor:pointer;height:24px;width:24px;background-image:url('/images/icon_v3/share_shadow.png');background-size:24px 24px;} .playstation_achievement_game_feed_item .cover_image .share_button:hover{background-image:url('/images/icon_v3/share_hover.png');} .playstation_achievement_game_feed_item .game_info{padding:16px 20px;} .playstation_achievement_game_feed_item .game_info .game_name{line-height:24px;height:48px;max-height:48px;overflow:hidden;} .playstation_achievement_game_feed_item .game_info .share_button{display:none;} .playstation_achievement_game_feed_item .game_info .achievement_progress{width:100%;height:4px;margin-top:30px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} .playstation_achievement_game_feed_item .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;} .playstation_achievement_game_feed_item .detail_info{margin-top:10px;line-height:20px;} .playstation_achievement_game_feed_item .detail_info img{vertical-align:top;height:16px;margin-top:2px;margin-right:4px;} .playstation_achievement_game_feed_item .detail_info .trophy_icon{margin-left:12px;} .playstation_achievement_game_feed_item .detail_info .trophy_icon:first-child{margin-left:0px;} .playstation_achievement_game_feed_item .detail_info .achievement_percent{float:right;} @media only screen and (max-width:599px) { .playstation_achievement_game_feed_item{height:auto;} .playstation_achievement_game_feed_item .cover_image{position:relative;width:116px;height:64px;display:inline-block;margin-right:12px;border-radius:8px;vertical-align:top;} .playstation_achievement_game_feed_item .cover_image .complete_badge{position:absolute;top:0;left:4px;width:24px;} .playstation_achievement_game_feed_item .cover_image .share_button{display:none;} .playstation_achievement_game_feed_item .game_info{padding:0;display:inline-block;width:calc(100% - 128px);vertical-align:top;} .playstation_achievement_game_feed_item .game_info .game_name{width:calc(100% - 20px);display:inline-block;vertical-align:top;} .playstation_achievement_game_feed_item .game_info .share_button{display:inline-block;width:20px;height:20px;vertical-align:top;margin-top:8px;} .playstation_achievement_game_feed_item .game_info .share_button img{width:20px;height:20px;} } /******** 플스 게임 업적 */ .playstation_game_achievement_feed_item{padding:12px 0;overflow:hidden;position:relative;} .playstation_game_achievement_feed_item > div{vertical-align:top;} .playstation_game_achievement_feed_item .achievement_icon{height:48px;width:48px;display:inline-block;margin-right:12px;border-radius:8px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} .playstation_game_achievement_feed_item .achievement_icon.incomplete_achievement{opacity:0.12;} .playstation_game_achievement_feed_item .achievement_info{display:inline-block;width:calc(100% - 60px);} .playstation_game_achievement_feed_item .achievement_info .title{line-height:22px;} .playstation_game_achievement_feed_item .achievement_info .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .playstation_game_achievement_feed_item .achievement_info .hidden_info_button{float:right;} .playstation_game_achievement_feed_item .achievement_info .hidden_info_button img{height:16px;vertical-align:top;margin:3px 2px 0 0;} .playstation_game_achievement_feed_item .achievement_info .description{line-height:20px;margin-top:2px;margin-bottom:6px;} .playstation_game_achievement_feed_item .complete_info{margin-top:2px;width:100%;line-height:20px;} .playstation_game_achievement_feed_item .complete_info .global_percent{margin-right:12px;} .playstation_game_achievement_feed_item .complete_info .global_percent img{height:18px;margin:1px 6px 0 0;vertical-align:top;} .playstation_game_achievement_feed_item .complete_info .share_button{float:right;} .playstation_game_achievement_feed_item .complete_info .share_button img{height:20px;cursor:pointer;vertical-align:top;} .playstation_game_achievement_feed_item .hidden_info_wrap{position:absolute;top:0px;height:0;width:100%;height:100%;padding:12px 0px;z-index:1;} .playstation_game_achievement_feed_item .hidden_info_wrap > div{vertical-align:top;} .playstation_game_achievement_feed_item .hidden_info_wrap .hidden_icon{height:48px;width:48px;display:inline-block;margin-right:12px;border-radius:8px;background-size:24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} @media only screen and (max-width:599px) { .playstation_game_achievement_feed_item .hidden_info_wrap{background:#FFF;} } /******** 엑박 업적 */ .xbox_achievement_feed_item{padding:12px 0;overflow:hidden;} .xbox_achievement_feed_item > div{vertical-align:top;} .xbox_achievement_feed_item > div > div{vertical-align:top;} .xbox_achievement_feed_item .achievement_icon{height:48px;width:48px;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;} .xbox_achievement_feed_item .achievement_info{display:inline-block;width:calc(39% - 60px);margin-right:12px;} .xbox_achievement_feed_item .achievement_info .title{line-height:22px;} .xbox_achievement_feed_item .achievement_info .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .xbox_achievement_feed_item .achievement_info .description{line-height:22px;margin-top:1px;} .xbox_achievement_feed_item .game_info{display:inline-block;width:26%;padding-top:12px;cursor:pointer;} .xbox_achievement_feed_item .game_info .game_image{display:inline-block;width:24px;height:24px;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:4px;background-color:#ced8e5;} .xbox_achievement_feed_item .game_info .game_title{display:inline-block;width:calc(100% - 36px);line-height:24px;} .xbox_achievement_feed_item .complete_info{display:inline-block;padding-top:12px;width:calc(35% - 12px);} .xbox_achievement_feed_item .complete_info .gamer_score{display:inline-block;line-height:24px;width:80px;} .xbox_achievement_feed_item .complete_info .gamer_score .gamer_score_icon{height:16px;margin:4px 2px 0 0;vertical-align:top;} .xbox_achievement_feed_item .complete_info .global_percent{display:inline-block;line-height:24px;width:calc(46% - 80px);text-align:center;} .xbox_achievement_feed_item .complete_info .global_percent img{height:18px;margin:3px 6px 0 0;vertical-align:top;} .xbox_achievement_feed_item .complete_info .complete_time{display:inline-block;line-height:24px;width:calc(54% - 48px);text-align:center;} .xbox_achievement_feed_item .complete_info .share_button{display:inline-block;width:48px;} .xbox_achievement_feed_item .complete_info .share_button img{height:20px;cursor:pointer;vertical-align:top;margin:2px 0 0 12px;} #gameTooltipWrap .xbox_achievement_feed_item{position:relative;padding:26px 0 0 0;} #gameTooltipWrap .xbox_achievement_feed_item .platform_icon{position:absolute;top:0;right:0;height:20px;} #gameTooltipWrap .xbox_achievement_feed_item .achievement_icon{height:56px;width:56px;} #gameTooltipWrap .xbox_achievement_feed_item .achievement_info{width:calc(100% - 68px);margin-right:0px;} #gameTooltipWrap .xbox_achievement_feed_item .game_info{display:block;position:absolute;top:0;left:0;width:100%;padding-top:0px;margin-right:0px;} #gameTooltipWrap .xbox_achievement_feed_item .game_info .game_image{width:16px;height:16px;margin-right:4px;} #gameTooltipWrap .xbox_achievement_feed_item .game_info .game_title{width:calc(100% - 20px);line-height:16px;font-size:12px;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info{display:block;margin-left:68px;padding-top:0px;width:calc(100% - 68px);margin-top:4px;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .gamer_score{line-height:20px;width:auto;margin-right:12px;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .gamer_score .gamer_score_icon{margin:2px 2px 0 0;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .global_percent{line-height:20px;width:auto;margin-right:12px;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .global_percent img{margin:1px 4px 0 0;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .complete_time{line-height:20px;width:auto;text-align:left;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .share_button{width:auto;float:right;} #gameTooltipWrap .xbox_achievement_feed_item .complete_info .share_button img{height:20px;margin:0px;} @media only screen and (max-width:599px) { .xbox_achievement_feed_item{position:relative;padding:26px 0 0 0;} .xbox_achievement_feed_item .achievement_icon{height:56px;width:56px;} .xbox_achievement_feed_item .achievement_info{width:calc(100% - 68px);margin-right:0px;} .xbox_achievement_feed_item .game_info{display:block;position:absolute;top:0;left:0;width:100%;padding-top:0px;margin-right:0px;} .xbox_achievement_feed_item .game_info .game_image{width:16px;height:16px;margin-right:4px;} .xbox_achievement_feed_item .game_info .game_title{width:calc(100% - 20px);line-height:16px;font-size:12px;} .xbox_achievement_feed_item .complete_info{display:block;margin-left:68px;padding-top:0px;width:calc(100% - 68px);margin-top:4px;} .xbox_achievement_feed_item .complete_info .gamer_score{line-height:20px;width:auto;font-size:12px;margin-right:12px;} .xbox_achievement_feed_item .complete_info .gamer_score .gamer_score_icon{margin:2px 2px 0 0;} .xbox_achievement_feed_item .complete_info .global_percent{line-height:20px;width:auto;margin-right:12px;font-size:12px;} .xbox_achievement_feed_item .complete_info .global_percent img{margin:1px 4px 0 0;} .xbox_achievement_feed_item .complete_info .complete_time{line-height:20px;width:auto;text-align:left;font-size:12px;} .xbox_achievement_feed_item .complete_info .share_button{width:auto;float:right;} .xbox_achievement_feed_item .complete_info .share_button img{height:20px;margin:0px;} } @media only screen and (max-width:350px) { .xbox_achievement_feed_item .complete_info .gamer_score{margin-right:8px;} .xbox_achievement_feed_item .complete_info .gamer_score .gamer_score_icon{margin:2px 1px 0 0;} .xbox_achievement_feed_item .complete_info .global_percent{margin-right:8px;} .xbox_achievement_feed_item .complete_info .global_percent img{margin:1px 2px 0 0;} } /******** 엑박 업적 게임 */ .xbox_achievement_game_feed_item{width:100%;height:312px;cursor:pointer;} .xbox_achievement_game_feed_item .cover_image{position:relative;width:100%;height:168px;background-size:cover;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} .xbox_achievement_game_feed_item .cover_image .complete_badge{position:absolute;top:0;left:14px;width:42px;} .xbox_achievement_game_feed_item .cover_image .share_button{position:absolute;bottom:12px;right:12px;cursor:pointer;height:24px;width:24px;background-image:url('/images/icon_v3/share_shadow.png');background-size:24px 24px;} .xbox_achievement_game_feed_item .cover_image .share_button:hover{background-image:url('/images/icon_v3/share_hover.png');} .xbox_achievement_game_feed_item .game_info{padding:16px 20px;} .xbox_achievement_game_feed_item .game_info .game_name{line-height:24px;height:48px;max-height:48px;overflow:hidden;} .xbox_achievement_game_feed_item .game_info .share_button{display:none;} .xbox_achievement_game_feed_item .game_info .achievement_progress{width:100%;height:4px;margin-top:30px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} .xbox_achievement_game_feed_item .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;} .xbox_achievement_game_feed_item .detail_info{margin-top:10px;line-height:20px;} .xbox_achievement_game_feed_item .detail_info img{vertical-align:top;height:16px;margin-top:2px;margin-right:2px;} .xbox_achievement_game_feed_item .detail_info .trophy_icon{margin-left:12px;} .xbox_achievement_game_feed_item .detail_info .trophy_icon:first-child{margin-left:0px;} .xbox_achievement_game_feed_item .detail_info .achievement_cnt{margin-left:8px;} .xbox_achievement_game_feed_item .detail_info .achievement_cnt:first-child{margin-left:0px;} .xbox_achievement_game_feed_item .detail_info .achievement_percent{float:right;} @media only screen and (max-width:599px) { .xbox_achievement_game_feed_item{height:auto;} .xbox_achievement_game_feed_item .cover_image{position:relative;width:116px;height:64px;display:inline-block;margin-right:12px;border-radius:8px;vertical-align:top;} .xbox_achievement_game_feed_item .cover_image .complete_badge{position:absolute;top:0;left:4px;width:24px;} .xbox_achievement_game_feed_item .cover_image .share_button{display:none;} .xbox_achievement_game_feed_item .game_info{padding:0;display:inline-block;width:calc(100% - 128px);vertical-align:top;} .xbox_achievement_game_feed_item .game_info .game_name{width:calc(100% - 20px);display:inline-block;vertical-align:top;} .xbox_achievement_game_feed_item .game_info .share_button{display:inline-block;width:20px;height:20px;vertical-align:top;margin-top:8px;} .xbox_achievement_game_feed_item .game_info .share_button img{width:20px;height:20px;} } /******** 엑박 게임 업적 */ .xbox_game_achievement_feed_item{padding:12px 0;overflow:hidden;position:relative;} .xbox_game_achievement_feed_item > div{vertical-align:top;} .xbox_game_achievement_feed_item .achievement_icon{height:48px;width:48px;display:inline-block;margin-right:12px;border-radius:8px;background-size:cover, 24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} .xbox_game_achievement_feed_item .achievement_icon.incomplete_achievement{opacity:0.12;} .xbox_game_achievement_feed_item .achievement_info{display:inline-block;width:calc(100% - 60px);} .xbox_game_achievement_feed_item .achievement_info .title{line-height:22px;} .xbox_game_achievement_feed_item .achievement_info .title img{height:18px;vertical-align:top;margin:2px 4px 0 0;} .xbox_game_achievement_feed_item .achievement_info .hidden_info_button{float:right;} .xbox_game_achievement_feed_item .achievement_info .hidden_info_button img{height:16px;vertical-align:top;margin:3px 2px 0 0;} .xbox_game_achievement_feed_item .achievement_info .description{line-height:20px;margin-top:2px;margin-bottom:6px;} .xbox_game_achievement_feed_item .complete_info{margin-top:2px;width:100%;line-height:20px;} .xbox_game_achievement_feed_item .complete_info .gamer_score{margin-right:12px;} .xbox_game_achievement_feed_item .complete_info .gamer_score img{height:16px;margin:2px 2px 0 0;vertical-align:top;} .xbox_game_achievement_feed_item .complete_info .global_percent{margin-right:12px;} .xbox_game_achievement_feed_item .complete_info .global_percent img{height:18px;margin:1px 6px 0 0;vertical-align:top;} .xbox_game_achievement_feed_item .complete_info .share_button{float:right;} .xbox_game_achievement_feed_item .complete_info .share_button img{height:20px;cursor:pointer;vertical-align:top;} .xbox_game_achievement_feed_item .hidden_info_wrap{position:absolute;top:0px;height:0;width:100%;height:100%;padding:12px 0px;z-index:1;} .xbox_game_achievement_feed_item .hidden_info_wrap > div{vertical-align:top;} .xbox_game_achievement_feed_item .hidden_info_wrap .hidden_icon{height:48px;width:48px;display:inline-block;margin-right:12px;border-radius:8px;background-size:24px 24px;background-repeat:no-repeat;background-position:center center;background-color:#ced8e5;} @media only screen and (max-width:599px) { .xbox_game_achievement_feed_item .hidden_info_wrap{background:#FFF;} } /******** 설문 */ .poll_feed_item{width:100%;height:498px;position:relative;} .poll_feed_item .result_header{width:100%;height:88px;line-height:88px;text-align:center;position:absolute;top:-100px;left:0;background:rgba(0,0,0,0.56);animation:resultHeader 2.5s;} .poll_feed_item .poll_header{padding:20px;padding-bottom:0px;width:100%;height:85px;} .poll_feed_item .poll_header .title_time_wrap{width:100%} .poll_feed_item .poll_header .title{line-height:20px;min-height:26px;} .poll_feed_item .poll_header .remain_time{line-height:18px;} .poll_feed_item .poll_header .date_range{line-height:18px;} .poll_feed_item .poll_body{width:100%;height:342px;position:relative;} .poll_feed_item .poll_body_1 .poll_query_item{width:50%;height:100%;display:inline-block;position:relative;} .poll_feed_item .poll_body_1:not(.finished) .poll_query_item{cursor:pointer;} .poll_feed_item .poll_body_1 .poll_query_item .query_image{width:100%;height:100%;} .poll_feed_item .poll_body_1 .poll_query_item .description_wrap{width:100%;height:66px;position:absolute;bottom:0px;background:rgba(0,0,0,0.7);transition: all .15s ease-in;} .poll_feed_item.hoverable .poll_body_1:not(.finished) .poll_query_item:hover .description_wrap{background:rgba(33, 168, 175, 0.65);} .poll_feed_item .poll_body_1 .description{line-height:18px;position:absolute;width:100%;text-align:center;top:50%;left:50%;transform:translate(-50%, -50%);padding:0 40px;} .poll_feed_item .poll_body_1 .description img{height:18px;vertical-align:top;margin-right:6px;} .poll_feed_item .poll_body_1 .selected .description_wrap{background:rgba(33, 168, 175, 0.65);} .poll_feed_item .poll_body_1 .is_answer .description_wrap{background:rgba(33, 168, 175, 0.65);} .poll_feed_item .poll_body_1 .selected.not_answer .description_wrap{background:rgba(227, 0, 0, 0.65);} .poll_feed_item .poll_body_1 .select_percentage_wrap{width:136px;height:136px;position:absolute;top:calc(50% - 33px);left:50%;transform:translate(-50%, -50%);background:rgba(0,0,0,0.65);border-radius:68px;text-align:center;line-height:136px;} .poll_feed_item .poll_body_1 .select_percentage_wrap .percent_circle{width:calc(100% + 4px);height:calc(100% + 4px);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .poll_feed_item .poll_body_2 .background_image{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;transition: all .15s ease-in;} .poll_feed_item .poll_body_2 .query_list_wrap{position:absolute;width:100%;height:100%;top:0;left:0;padding:25px 30px;z-index:2;transition: all .15s ease-in;} .poll_feed_item .poll_body_2:not(.finished) .query_list_wrap{opacity:0;} .poll_feed_item.hoverable .poll_body_2:not(.finished) .query_list_wrap:hover{opacity:1;} .poll_feed_item .poll_body_2.selected .query_list_wrap{opacity:1;} .poll_feed_item .poll_body_2.finished .query_list_wrap{opacity:1;} .poll_feed_item.hoverable .poll_body_2:not(.finished) .query_list_wrap:hover + .background_image{opacity:0.5;} .poll_feed_item .poll_body_2.selected .background_image{opacity:0.5;} .poll_feed_item .poll_body_2.finished .background_image{opacity:0.5;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item_wrap{position:relative;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item{margin:auto;width:100%;background:rgba(0, 0, 0, 0.65);padding:0 24px;position:absolute;top:50%;left:0;transform:translate(0, -50%);transition: all .15s ease-in;} .poll_feed_item .poll_body_2.finished .query_list_wrap .poll_query_item{padding:0 60px 0 24px;} .poll_feed_item .poll_body_2:not(.finished) .query_list_wrap .poll_query_item{cursor:pointer;} .poll_feed_item.hoverable .poll_body_2:not(.finished) .query_list_wrap .poll_query_item:hover{background:rgba(33, 168, 175, 0.6);} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.selected{background:rgba(33, 168, 175, 0.6);} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.is_answer{background:rgba(33, 168, 175, 0.6);} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.selected.not_answer{background:rgba(227, 0, 0, 0.6);} .poll_feed_item .poll_body_2 .query_list_wrap.thick_query .poll_query_item{height:60px;} .poll_feed_item .poll_body_2 .query_list_wrap.thin_query .poll_query_item{height:40px;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item .background{position:absolute;height:100%;left:0;top:0;background:#21A8AF;z-index:4;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.not_answer .background{background:#ABABAB;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.is_answer .background{background:#21A8AF;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.selected.not_answer .background{background:#e30000;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.selected.is_answer .background{background:#21A8AF;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item .description{display:table-cell;line-height:18px;vertical-align:middle;position:relative;z-index:5;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item .description img{height:18px;vertical-align:top;margin-right:6px;} .poll_feed_item .poll_body_2 .query_list_wrap.thick_query .poll_query_item .description{height:60px;} .poll_feed_item .poll_body_2 .query_list_wrap.thin_query .poll_query_item .description{height:40px;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item .select_percentage{position:absolute;height:18px;line-height:18px;right:24px;;top:50%;transform:translate(0, -50%);z-index:5;} .poll_feed_item .poll_body_3 .background_image{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.5;} .poll_feed_item .poll_body_3 .query_list_wrap{position:absolute;width:100%;height:100%;top:0;left:0;padding:25px 30px;z-index:2;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item_wrap{position:relative;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item{margin:auto;width:100%;background:rgba(0, 0, 0, 0.65);padding:0 24px;position:absolute;top:50%;left:0;transform:translate(0, -50%);transition: all .15s ease-in;} .poll_feed_item .poll_body_3.finished .query_list_wrap .poll_query_item{padding:0 60px 0 24px;} .poll_feed_item .poll_body_3:not(.finished) .query_list_wrap .poll_query_item{cursor:pointer;} .poll_feed_item.hoverable .poll_body_3:not(.finished) .query_list_wrap .poll_query_item:hover{background:rgba(33, 168, 175, 0.6);} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.selected{background:rgba(33, 168, 175, 0.6);} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.is_answer{background:rgba(33, 168, 175, 0.6);} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.selected.not_answer{background:rgba(227, 0, 0, 0.6);} .poll_feed_item .poll_body_3 .query_list_wrap.thick_query .poll_query_item{height:60px;} .poll_feed_item .poll_body_3 .query_list_wrap.thin_query .poll_query_item{height:40px;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item .background{position:absolute;height:100%;left:0;top:0;background:#21A8AF;z-index:4;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.not_answer .background{background:#ABABAB;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.is_answer .background{background:#21A8AF;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.selected.not_answer .background{background:#e30000;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item.selected.is_answer .background{background:#21A8AF;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item .description{display:table-cell;line-height:18px;vertical-align:middle;position:relative;z-index:5;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item .description img{height:18px;vertical-align:top;margin-right:6px;} .poll_feed_item .poll_body_3 .query_list_wrap.thick_query .poll_query_item .description{height:60px;} .poll_feed_item .poll_body_3 .query_list_wrap.thin_query .poll_query_item .description{height:40px;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item .select_percentage{position:absolute;height:18px;line-height:18px;right:24px;;top:50%;transform:translate(0, -50%);z-index:5;} .poll_feed_item .button_group{width:100%;height:71px;padding:17px 20px 18px 20px;text-align:center;} .poll_feed_item .button_group .single_button{width:100%;display:inline-block;} .poll_feed_item .button_group .two_button{width:50%;display:inline-block;} .poll_feed_item .button_group .copy_link_button img{height:34px;padding:8px 0px;margin-right:6px;vertical-align:top;} .poll_feed_item .button_group .poll_submit_button .button_r{width:80%;} .poll_feed_item .button_group .poll_submit_button img{height:34px;padding:8px 0px;margin-right:6px;vertical-align:top;} @media only screen and (max-width:599px) { .poll_feed_item{width:100vw;height:auto;} .poll_feed_item .result_header{height:78px;line-height:78px;} .poll_feed_item .poll_header{padding:16px 16px 8px 16px;height:auto;} .poll_feed_item .poll_header .title{line-height:20px;min-height:26px;} .poll_feed_item .poll_header .remain_time{line-height:18px;} .poll_feed_item .poll_header .date_range{line-height:18px;} .poll_feed_item .poll_body{height:auto;} .poll_feed_item .poll_body_1 .poll_query_item{height:auto;} .poll_feed_item .poll_body_1 .poll_query_item .query_image{width:100%;height:52vw;} .poll_feed_item .poll_body_1 .poll_query_item .description_wrap{position:relative;bottom:auto;} .poll_feed_item .poll_body_1 .description{padding:0 16px;} .poll_feed_item .poll_body_1 .selected .description_wrap{background:rgba(33, 168, 175, 0.8);} .poll_feed_item .poll_body_1 .is_answer .description_wrap{background:rgba(33, 168, 175, 0.8);} .poll_feed_item .poll_body_1 .selected.not_answer .description_wrap{background:rgba(227, 0, 0, 0.8);} .poll_feed_item .poll_body_1 .select_percentage_wrap{width:26vw;height:26vw;border-radius:13vw;line-height:26vw;} .poll_feed_item .poll_body_2 .background_image{height:52vw;position:relative;transition:none;} .poll_feed_item .poll_body_2 .query_list_wrap{position:relative;height:auto;padding:16px 0px 0px 0px;transition:none;} .poll_feed_item .poll_body_2:not(.finished) .query_list_wrap{opacity:1;} .poll_feed_item .poll_body_2.selected .background_image{opacity:1;} .poll_feed_item .poll_body_2.finished .background_image{opacity:1;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item{margin-bottom:8px;padding:0 16px;position:relative;top:auto;left:auto;transform:none;transition:none;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item_wrap:last-child .poll_query_item{margin-bottom:0;} .poll_feed_item .poll_body_2.finished .query_list_wrap .poll_query_item{padding:0 52px 0 16px;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.selected{background:rgba(33, 168, 175, 0.7);} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.is_answer{background:rgba(33, 168, 175, 0.7);} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item.selected.not_answer{background:rgba(227, 0, 0, 0.7);} .poll_feed_item .poll_body_2 .query_list_wrap.thick_query .poll_query_item{height:auto;} .poll_feed_item .poll_body_2 .query_list_wrap.thin_query .poll_query_item{height:auto;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item .description{padding:12px 0;} .poll_feed_item .poll_body_2 .query_list_wrap.thick_query .poll_query_item .description{height:auto;} .poll_feed_item .poll_body_2 .query_list_wrap.thin_query .poll_query_item .description{height:auto;} .poll_feed_item .poll_body_2 .query_list_wrap .poll_query_item .select_percentage{right:16px;} .poll_feed_item .poll_body_3{padding:12px 0px} .poll_feed_item .poll_body_3 .query_list_wrap{position:relative;height:auto;padding:0px;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item{margin-bottom:8px;padding:0 16px;position:relative;top:auto;left:auto;transform:none;transition:none;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item_wrap:last-child .poll_query_item{margin-bottom:0;} .poll_feed_item .poll_body_3.finished .query_list_wrap .poll_query_item{padding:0 52px 0 16px;} .poll_feed_item .poll_body_3 .query_list_wrap.thick_query .poll_query_item{height:auto;} .poll_feed_item .poll_body_3 .query_list_wrap.thin_query .poll_query_item{height:auto;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item .description{padding:12px 0;} .poll_feed_item .poll_body_3 .query_list_wrap.thick_query .poll_query_item .description{height:auto;} .poll_feed_item .poll_body_3 .query_list_wrap.thin_query .poll_query_item .description{height:auto;} .poll_feed_item .poll_body_3 .query_list_wrap .poll_query_item .select_percentage{right:16px;} .poll_feed_item .button_group{height:auto;padding:12px 16px 16px 16px;} .poll_feed_item .button_group .poll_submit_button .button_r{width:auto;min-width:120px;} } /******** 게임평가하기 */ .rating_game_feed_item{width:100%;height:165px;position:relative;} .rating_game_feed_item .cover_image{width:165px;height:165px;float:left;margin-right:20px;} .rating_game_feed_item .info_wrap{padding:20px 16px;} .rating_game_feed_item .info_wrap .library_state_wrap{float:right;height:24px;width:24px;text-align:center;cursor:pointer;} .rating_game_feed_item .info_wrap .library_state_wrap:hover{box-shadow: 0 0 0 7px #ebeff8;border-radius:12px;} .rating_game_feed_item .info_wrap .library_state_wrap .library_state_button_square{height:24px;vertical-align:top;} .rating_game_feed_item .info_wrap .game_name{line-height:25px;width:calc(100% - 205px);} .rating_game_feed_item .info_wrap .game_name .mobile_icon_new{height:20px;vertical-align:top;margin:4px 4px 0 0;} .rating_game_feed_item .info_wrap .release_date{line-height:20px;margin-top:6px;} .rating_game_feed_item .info_wrap .review_point_wrap{position:relative;width:210px;height:42px;margin-left:169px;margin-top:35px;} .rating_game_feed_item .info_wrap .review_point_wrap .background{position:absolute;top:0;left:0px;} .rating_game_feed_item .info_wrap .review_point_wrap .foreground{position:absolute;top:0;left:0px;} .rating_game_feed_item .info_wrap .review_point_star{height:42px;vertical-align:top;} .rating_game_feed_item .info_wrap .review_point_wrap .drag_area{position:absolute;width:231px;height:42px;top:0;left:-16px;cursor:pointer;} .rating_game_feed_item .black_list_cover{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.95);padding-top:71px;user-select:none;z-index:10;} .rating_game_feed_item .black_list_cover .black_list_text{line-height:22px;text-align:center;} .rating_game_feed_item .black_list_cover .black_list_text .cancel_button{cursor:pointer;margin-left:12px;} @media only screen and (max-width:599px) { .rating_game_feed_item{height:132px;padding:16px 16px 0 16px;} .rating_game_feed_item .cover_image{float:none;display:inline-block;width:100px;height:100px;margin-right:16px;border-radius:13px;box-shadow:0 4px 15px 4px rgba(3, 24, 39, 0.15), 0 12px 10px 2px rgba(3, 24, 39, 0.08);vertical-align:top;} .rating_game_feed_item .info_wrap{width:calc(100% - 116px);height:100%;display:inline-block;padding:3px 0 0 0;;border-bottom:solid 1px #ebeff8;vertical-align:top;} .rating_game_feed_item .info_wrap .library_state_wrap{height:22px;width:22px;} .rating_game_feed_item .info_wrap .library_state_wrap .library_state_button_n{height:22px;} .rating_game_feed_item .info_wrap .game_name{font-size:15px;line-height:22px;width:calc(100% - 22px);} .rating_game_feed_item .info_wrap .game_name .mobile_icon_new{height:20px;margin:1px 4px 0 0;} .rating_game_feed_item .info_wrap .release_date{font-size:13px;line-height:16px;margin-top:4px;} .rating_game_feed_item .info_wrap .review_point_wrap{margin-left:0px;margin-top:13px;} .rating_game_feed_item .black_list_cover{padding-top:43px;} .rating_game_feed_item .black_list_cover .black_list_text .cancel_button{margin-left:0;margin-top:8px;display:block;} } @media only screen and (max-width:350px) { .rating_game_feed_item{height:112px;} .rating_game_feed_item .cover_image{width:80px;height:80px;} .rating_game_feed_item .info_wrap{width:calc(100% - 96px);} .rating_game_feed_item .info_wrap .release_date{margin-top:2px;} .rating_game_feed_item .info_wrap .review_point_wrap{width:170px;height:34px;margin-left:0px;margin-top:6px;} .rating_game_feed_item .info_wrap .review_point_star{height:34px;vertical-align:top;} .rating_game_feed_item .info_wrap .review_point_wrap .drag_area{width:187px;height:34px;left:-13px;} .rating_game_feed_item .black_list_cover{padding-top:30px;} } /******** 탐험목록 */ .collection_feed_item{width:100%;} .collection_feed_item .collection_item{width:100%;margin-bottom:24px;} .collection_feed_item .collection_item:last-child{margin-bottom:0px;} .collection_feed_item .collection_item .collection_content_wrap{padding:16px;} .collection_feed_item .collection_item .title{line-height:30px;} .collection_feed_item .collection_item .description{line-height:18px;white-space:pre-wrap;} .collection_feed_item .collection_item .cover_image_wrap{width:100%;height:100px;overflow:hidden;margin-top:10px;} .collection_feed_item .collection_item .cover_image_list{width:600px;} .collection_feed_item .collection_item .cover_image_list .cover_image{width:100px;height:100px;display:inline-block;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width .responsive .collection_feed_item .collection_item_wrap{width:100%;margin:auto;} } @media only screen and (max-width:599px) { .collection_feed_item .collection_item{width:100%;margin-bottom:0px;border:none;border-bottom:solid 1px #D8D8D8;border-radius:0px;overflow:hidden;} .collection_feed_item .collection_item:last-child{border-bottom:none;} .collection_feed_item .collection_item .title{line-height:22px;} .collection_feed_item .collection_item .description{margin-top:2px;line-height:16px;height:auto;} .collection_feed_item .collection_item .cover_image_wrap{height:80px;margin-top:8px;} .collection_feed_item .collection_item .cover_image_list{width:480px;} .collection_feed_item .collection_item .cover_image_list .cover_image{width:80px;height:80px;} } /******** 피드 뉴스 */ #feedBody_N .feed_list_header .news_section_header{line-height:36px;margin-bottom:8px;} #feedBody_N .feed_list_header .news_section_header h1{display:inline-block;} #feedBody_N .feed_list_header .divider{width:100%;height:1px;background:#ebeff8;margin:4px 0 16px 0;} #feedBody_N .feed_list_header .dragdealer{overflow:hidden;padding-bottom:20px;} #feedBody_N .feed_list_header .hot_news_list{width:984px;} #feedBody_N .feed_list_header .filter_news_source_wrap{width:100%;line-height:28px;margin-bottom:16px;} #feedBody_N .feed_list_header .filter_news_source_wrap .filter_news_source{cursor:pointer;vertical-align:top;background:#e5f3ff;border-radius:14px;padding:0 8px 0 12px;} #feedBody_N .feed_list_header .filter_news_source_wrap .filter_news_source img{height:16px;vertical-align:top;margin:6px 0 0 2px;} #feedBody_N .feed_list_header .filter_news_source_wrap .reset_text{margin-left:8px;cursor:pointer;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap{position:relative;vertical-align:top;float:right;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap.search_off{width:48px;text-align:right;cursor:pointer;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .search_icon{height:16px;position:absolute;left:4px;top:10px;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap.search_on .search_icon{left:8px;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .show_search_button{user-select:none;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .hide_search_button{user-select:none;cursor:pointer;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .news_search_input_box{overflow:hidden;display:inline-block;vertical-align:top;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .news_search_input_box input{height:36px;vertical-align:top;padding-left:26px;padding-right:26px;border-radius:18px;border:solid 1px #ced8e5;margin-right:4px;width:200px;font-size:13px;appearance:none;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .news_search_input_box input::placeholder{color:#697B96;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap.search_on .news_search_input_box{display:inline-block;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap.search_off .news_search_input_box{display:none;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap.search_on .show_search_button{display:none;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap.search_off .show_search_button{display:inline-block;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .news_search_input_box .input_cancel{top:1px;right:30px;} #feedBody_N .feed_list_header .news_search_section_header{margin-bottom:12px;} @media only screen and (max-width:599px) { #feedBody_N .feed_list_header .news_section_header{background:#ebeff8;padding:16px 16px 0px 16px;margin-bottom:0;} #feedBody_N .feed_list_header .news_section_header.image_type{background:none;padding:0 16px;margin-bottom:8px;} #feedBody_N .feed_list_header .divider{display:none;} #feedBody_N .feed_list_header .dragdealer{padding-bottom:24px;} #feedBody_N .feed_list_header .hot_news_list{width:716px;padding:0 16px;} #feedBody_N .feed_list_header .filter_news_source_wrap{padding:0 16px;margin-bottom:12px;} #feedBody_N .feed_list_header .filter_news_source_wrap .filter_news_source{max-width:calc(100% - 60px);} #feedBody_N .feed_list_header .news_search_section_header{padding:8px 16px 0px 16px;} #feedBody_N .feed_list_header .news_section_header .search_input_wrap .news_search_input_box input{width:180px;} } @media only screen and (max-width:350px) { #feedBody_N .feed_list_header .news_section_header .search_input_wrap .news_search_input_box input{width:150px;} } .feed_news_item{width:588px;border-radius:13px;margin-top:12px;border:none;padding:16px 20px;box-shadow:0 1px 8px 0 rgba(3, 24, 39, 0.12), 0 3px 3px -2px rgba(3, 24, 39, 0.1), 0 3px 4px 0 rgba(3, 24, 39, 0.08);} .feed_news_item .text_wrap{display:inline-block;vertical-align:top;width:100%;height:96px;} .feed_news_item .text_wrap.has_image{width:calc(100% - 172px);} .feed_news_item .text_wrap .title{line-height:24px;max-height:72px;overflow:hidden;} .feed_news_item .text_wrap .source_info{line-height:18px;margin-top:6px;} .feed_news_item .text_wrap .source_name{display:inline;} .feed_news_item .text_wrap .news_source_icon{height:18px;vertical-align:top;margin-right:2px;} .feed_news_item .news_image{display:inline-block;vertical-align:top;width:156px;height:104px;border-radius:8px;margin-left:16px;} .feed_news_item .news_image.hide_image{display:none;} .feed_news_item .reaction_wrap{width:100%;height:18px;margin-top:16px;line-height:18px;} .feed_news_item .reaction_wrap img{height:18px;vertical-align:top;} .feed_news_item .reaction_wrap .reaction_button{margin-left:24px;vertical-align:top;cursor:pointer;} .feed_news_item .reaction_wrap .reaction_button:first-child{margin-left:0px;} .feed_news_item .reaction_wrap .reaction_button .total_cnt{margin-left:4px;} .feed_news_item .reaction_wrap .reaction_button .total_cnt.hide_cnt{display:none;} .feed_news_item .reaction_wrap .like_button.selected .total_cnt{color:#3f9dff;} .feed_news_item .reaction_wrap .dislike_button.selected .total_cnt{color:#ec5245;} .feed_news_item .reaction_wrap .option_button{vertical-align:top;float:right;cursor:pointer;} .feed_news_item .reaction_wrap .option_button:hover{background:#ebeff8;border-radius:9px;box-shadow: 0 0 0 4px #ebeff8;} @media only screen and (max-width:599px) { .feed_news_item{width:100vw;border-radius:0px;margin-top:0;border:none;border-top:solid 8px #EBEFF8;padding:12px 16px;box-shadow:none;} .feed_news_item:first-child{border-top:solid 6px #EBEFF8;} .feed_news_item .text_wrap{height:auto;min-height:72px;} .feed_news_item .text_wrap.has_image{width:calc(100% - 132px);} .feed_news_item .text_wrap .title{line-height:22px;max-height:88px;overflow:hidden;font-size:15px;} .feed_news_item .text_wrap .source_info{margin-top:4px;} .feed_news_item .news_image{width:120px;height:80px;margin-left:12px;} .feed_news_item .reaction_wrap{margin-top:28px;} } .hot_news_item{display:inline-block;width:320px;height:320px;position:relative;overflow:hidden;border-radius:13px;padding:16px 20px;background:#283240;box-shadow:0 2px 4px -1px rgba(3, 24, 39, 0.16), 0 1px 10px 0 rgba(3, 24, 39, 0.12), 0 4px 5px 0 rgba(3, 24, 39, 0.06);} .hot_news_item.small_size{margin-left:12px;} .hot_news_item .news_image{position:absolute;top:0;left:0;width:100%;height:100%;background:#FFF;} .hot_news_item .news_image.hide_image{display:none;} .hot_news_item .image_cover{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(3, 24, 39, 0) 3%, #031827);} .hot_news_item .text_wrap{height:calc(100% - 30px);position:relative;} .hot_news_item .text_wrap .text_position_wrap{position:absolute;bottom:0;left:0;} .hot_news_item .text_wrap .title{line-height:24px;} .hot_news_item .text_wrap .source_info{line-height:18px;margin-top:6px;} .hot_news_item .text_wrap .news_source_icon{height:18px;vertical-align:top;margin-right:2px;} .hot_news_item .reaction_wrap{position:relative;width:100%;height:18px;margin-top:12px;line-height:18px;} .hot_news_item .reaction_wrap img{height:18px;vertical-align:top;} .hot_news_item .reaction_wrap .reaction_button{margin-left:24px;vertical-align:top;cursor:pointer;} .hot_news_item .reaction_wrap .reaction_button:first-child{margin-left:0px;} .hot_news_item .reaction_wrap .reaction_button .total_cnt{margin-left:4px;} .hot_news_item .reaction_wrap .reaction_button .total_cnt.hide_cnt{display:none;} .hot_news_item .reaction_wrap .like_button.selected .total_cnt{color:#3f9dff;} .hot_news_item .reaction_wrap .dislike_button.selected .total_cnt{color:#ec5245;} .hot_news_item .reaction_wrap .option_button{vertical-align:top;float:right;cursor:pointer;} @media only screen and (max-width:599px) { .hot_news_item{width:220px;height:260px;} .hot_news_item .text_wrap .title{font-size:15px;line-height:22px;} .hot_news_item .text_wrap .source_info{margin-top:4px;} .hot_news_item .text_wrap .news_source_icon{height:18px;vertical-align:top;margin-right:2px;} } #feedBody_N .news_login_cover{position:absolute;width:calc(100% + 40px);height:530px;bottom:-20px;left:-20px;background:linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 84%);} #feedBody_N .news_login_cover .text_wrap{position:absolute;width:100%;left:0;bottom:0px;text-align:center;} #feedBody_N .news_login_cover .text_wrap .info_text{line-height:24px;} #feedBody_N .news_login_cover .text_wrap .login_button{width:165px;margin-top:16px;} @media only screen and (max-width:599px) { #feedBody_N .news_login_cover{position:fixed;width:100%;height:330px;bottom:54px;left:0px;background:linear-gradient(to bottom, rgba(235, 239, 248, 0), #ebeff8 74%);} #feedBody_N .news_login_cover .text_wrap{bottom:54px;} } #feedBody_N .feed_register_help{width:100%;padding:32px 0 20px 0;text-align:center;border-radius:13px;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);} #feedBody_N .feed_register_help .register_text{line-height:27px;} #feedBody_N .feed_register_help .button_wrap{margin-top:24px;} #feedBody_N .feed_register_help .button_wrap .btn_r{width:100%;max-width:300px;} @media only screen and (max-width:599px) { #feedBody_N .feed_register_help{padding:32px 16px 20px 16px;border-radius:0;box-shadow:none;border-top:solid 1px #EBEFF8;} } #feedBody_N .feed_recommend_friend_list{position:relative;width:100%;padding:16px 20px;margin-top:8px;border-radius:13px;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);} #feedBody_N .feed_recommend_friend_list.login_user{box-shadow:none;} #feedBody_N .feed_recommend_friend_list .title{line-height:19px;padding-bottom:12px;border-bottom:solid 1px #ebeff8;} #feedBody_N .feed_recommend_friend_list .title .more_button{float:right;cursor:pointer;} #feedBody_N .feed_recommend_friend_list .refresh_icon{width:24px;height:24px;border-radius:12px;background:#7f8fa6;position:absolute;right:20px;top:13px;cursor:pointer;padding:3px;} #feedBody_N .feed_recommend_friend_list .friend_item{position:relative;padding:16px 0 20px 0;border-bottom:solid 1px #ebeff8;} #feedBody_N .feed_recommend_friend_list .friend_item .profile_container{display:inline-block;vertical-align:top;width:40px;height:40px;margin-right:12px;margin-bottom:12px;} #feedBody_N .feed_recommend_friend_list .friend_item .profile_container .profile_image{width:40px;height:40px;border-radius:24px;border:solid 1px #ced8e5;} #feedBody_N .feed_recommend_friend_list .friend_item .info_wrap{position:relative;display:inline-block;vertical-align:top;width:calc(100% - 52px);min-height:40px;} #feedBody_N .feed_recommend_friend_list .friend_item .text_wrap{display:inline-block;vertical-align:top;width:100%;} #feedBody_N .feed_recommend_friend_list .friend_item .text_wrap .user_achievement_title{width:100%;line-height:13px;margin-bottom:2px;} #feedBody_N .feed_recommend_friend_list .friend_item .text_wrap .nickname{width:100%;line-height:20px;} #feedBody_N .feed_recommend_friend_list .friend_item .text_wrap .nickname .dev_user_icon{margin:1px 0px 0 2px;} #feedBody_N .feed_recommend_friend_list .friend_item .text_wrap .review_summary{line-height:18px;} #feedBody_N .feed_recommend_friend_list .friend_item .text_wrap .recommend_reason{width:100%;line-height:18px;margin-top:1px;} #feedBody_N .feed_recommend_friend_list .friend_item .button_wrap{position:absolute;right:0;top:16px;} #feedBody_N .feed_recommend_friend_list .friend_item .btn_r{width:80px;} #feedBody_N .feed_recommend_friend_list .friend_item .btn_r:first-child{margin-right:4px;} #feedBody_N .feed_recommend_friend_list .friend_item .btn_r.single_button{width:164px;margin-right:0;} #feedBody_N .feed_recommend_friend_list .friend_item .library_game_list{margin-top:8px;width:100%;overflow:hidden;} #feedBody_N .feed_recommend_friend_list .friend_item .library_game_list .library_game_wrap{padding-left:52px;} #feedBody_N .feed_recommend_friend_list .friend_item .library_game_list .library_game_item{cursor:pointer;vertical-align:top;width:80px;height:80px;border-radius:13px;margin-right:8px;background-size:cover;background-position:center;background-color:#ebeff8;} #feedBody_N .feed_recommend_friend_list .friend_item .library_game_list .library_game_item:last-child{margin-right:0;} #feedBody_N .feed_recommend_friend_list .refresh_button_wrap{margin-top:12px;text-align:center;} #feedBody_N .feed_recommend_friend_list .refresh_button_wrap .btn_r{width:100%;max-width:300px;} #feedBody_N .feed_recommend_friend_list .refresh_button_wrap .icon{height:20px;margin:7px 2px 0 0;} @media only screen and (max-width:599px) { #feedBody_N .feed_recommend_friend_list{padding:16px;border-radius:0;box-shadow:none;border-top:solid 8px #EBEFF8;} #feedBody_N .feed_recommend_friend_list.login_user{border-top:none;margin-top:0px;} #feedBody_N .feed_recommend_friend_list .friend_item .button_wrap{position:relative;margin-top:12px;width:calc(100% - 52px);margin-left:52px;top:auto;left:auto;} #feedBody_N .feed_recommend_friend_list .friend_item .btn_r{width:calc(50% - 2px);} #feedBody_N .feed_recommend_friend_list .friend_item .btn_r.single_button{width:100%;} } #feedBody_N .feed_write_wrap{width:100%;padding:16px 20px 8px 20px;margin-top:8px;border-radius:13px;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);} #feedBody_N .feed_write_wrap .write_input_wrap{padding-bottom:16px;border-bottom:solid 1px #ebeff8;} #feedBody_N .feed_write_wrap .write_input_wrap .profile_container{width:40px;height:40px;margin-right:8px;vertical-align:top;} #feedBody_N .feed_write_wrap .write_input_wrap .profile_container .profile_image{width:40px;height:40px;border-radius:20px;border:solid 1px #ced8e5;background:#FFF;} #feedBody_N .feed_write_wrap .write_input_wrap .write_input_button{width:calc(100% - 48px);height:40px;border-radius:20px;background:#ebeff8;line-height:22px;padding:9px 16px;cursor:text;} #feedBody_N .feed_write_wrap .button_wrap{margin-top:6px;display:flex;align-items:center;} #feedBody_N .feed_write_wrap .button_wrap .write_button{text-align:center;flex:1;height:32px;line-height:32px;cursor:pointer;border-radius:16px;} #feedBody_N .feed_write_wrap .button_wrap .write_button:hover{background:#e5f3ff;} #feedBody_N .feed_write_wrap .button_wrap .divider{width:1px;height:16px;background:#ced8e5;} #feedBody_N .feed_write_wrap .button_wrap .button_icon{height:20px;margin:6px 4px 0 0;} @media only screen and (max-width:599px) { #feedBody_N .feed_write_wrap{border-top:solid 8px #ebeff8;padding:16px 16px 8px 16px;margin-top:0px;border-radius:0px;box-shadow:none;} }