@charset "utf-8"; #userBody{padding:100px 0 150px 0;} #pageBodyHolder_NEW.mobile_width #userBody{padding-top:24px;} #userBody #feedRow .body_left{float:none;display:inline-block;width:588px;margin-right:30px;} #userBody #feedRow .body_right{float:none;display:inline-block;vertical-align:top;width:320px;} #userBody #feedRow .feed_right_spacer{width:100%;height:0px;} #userBody #feedRow .feed_right{position:sticky;} #userBody #feedRow.rating_row .body_left{width:632px;margin-right:28px;} #userBody #feedRow.rating_row .body_right{width:300px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userBody #feedRow .body_left{float:none;display:block;margin-right:auto;margin-left:auto;} .mobile_width #userBody #feedRow .body_right{display:none !important;} .mobile_width #userBody #feedRow .feed_right_spacer{display:none;} } @media only screen and (max-width:599px) { #userBody #feedRow .body_left{float:none;display:block;width:100% !important;margin:0 auto !important;} #userBody #feedRow .body_right{display:none !important;} #userBody #feedRow .feed_right_spacer{display:none;} } @media only screen and (max-width:599px) { #pageBodyHolder_NEW.mobile_width #userBody{padding-top:0px;} } #userBody #userMainBody .user_body_left{display:inline-block;width:280px;vertical-align:top;margin-right:60px} #userBody #userMainBody .user_body_right{display:inline-block;width:600px;vertical-align:top;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userMainBody{width:600px;margin:auto;} .mobile_width #userBody #userMainBody .user_body_left{display:block;width:600px;vertical-align:top;margin-right:0px;margin-bottom:24px;} .mobile_width #userBody #userMainBody .user_body_right{display:block;width:600px;vertical-align:top;} } @media only screen and (max-width:599px) { #userBody #userMainBody .user_body_left{display:block;width:100%;margin-right:0px;border-bottom:solid 1px #ebeff8;} #userBody #userMainBody .user_body_right{display:block;width:100%;padding:16px 16px 0 16px;overflow:hidden;} } #userMainBody .user_main_info{border-radius:13px;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);} #userMainBody .user_main_info .visitor_cnt_wrap{padding:12px 0;border-bottom:solid 1px #ebeff8;line-height:18px;text-align:center;} #userMainBody .user_main_info .visitor_cnt_wrap .visitor_cnt{width:50%;border-right:solid 1px #ebeff8;} #userMainBody .user_main_info .visitor_cnt_wrap .visitor_cnt:last-child{border-right:none;} #userMainBody .user_main_info .visitor_cnt_wrap .visitor_cnt .cnt_value{margin-left:4px;} #userMainBody .user_main_info .info_wrap{padding:24px;} #userMainBody .user_main_info .profile_image{width:80px;height:80px;border:solid 1px #ced8e5;border-radius:40px;} #userMainBody .user_main_info .mobile_summary_cnt_wrap{display:none;} #userMainBody .user_main_info .mobile_summary_cnt_wrap .user_badge_wrap{display:inline;position:relative;} #userMainBody .user_main_info .mobile_summary_cnt_wrap .user_badge_wrap .user_badge{display:none;position:absolute;width:6px;height:6px;background:#ec5245;border-radius:3px;top:-2px;right:-8px;} #userMainBody .user_main_info .user_name_wrap{margin-top:16px;} #userMainBody .user_main_info .achievement_title{line-height:20px;} #userMainBody .user_main_info .nickname{line-height:29px;} #userMainBody .user_main_info .nickname .dev_user_icon{height:22px;vertical-align:top;margin:4px 0 0 2px;} #userMainBody .user_main_info .nickname .button_wrap{float:right;height:20px;margin-top:4px;} #userMainBody .user_main_info .nickname .friend_button{height:20px;cursor:pointer;margin-right:8px;} #userMainBody .user_main_info .nickname .option_button{height:20px;cursor:pointer;} #userMainBody .user_main_info .user_id{margin-top:1px;line-height:18px;} #userMainBody .user_main_info .intro{margin-top:12px;line-height:19px;white-space:pre-wrap;word-break:break-word;} #userMainBody .user_main_info .follow_cnt_wrap{margin-top:4px;line-height:19px;} #userMainBody .user_main_info .follow_cnt_wrap .follow_page_button{cursor:pointer;margin-right:27px;} #userMainBody .user_main_info .follow_cnt_wrap .follow_page_button:last-child{margin-right:0;} #userMainBody .user_main_info .follow_cnt_wrap .follow_cnt{margin-left:8px;} #userMainBody .user_main_info .button_wrap{margin-top:20px;} #userMainBody .user_main_info .button_wrap .button_item_wrap{margin-bottom:8px;} #userMainBody .user_main_info .button_wrap .button_item_wrap:last-child{margin-bottom:0;} #userMainBody .user_main_info .button_wrap .button_item_wrap.hide_button{display:none;} #userMainBody .user_main_info .button_wrap .button_item{width:100%;} #userMainBody .user_main_info .button_wrap .button_item img{height:18px;margin:9px 2px 0 0;} #userMainBody .user_main_info .button_wrap .user_match_result{width:100%;text-align:center;line-height:18px;} #userMainBody .user_main_info .button_wrap .user_match_result .dev_user_icon{margin:1px 0 0 1px;} .popup_match_user_wrap{width:588px;border-radius:13px;background:#FFF;position:relative;} .popup_match_user_wrap .popup_title{line-height:24px;border-bottom:solid 1px #ebeff8;padding:16px 20px;} .popup_match_user_wrap .close_button{position:absolute;height:24px;top:16px;right:20px;cursor:pointer;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userMainBody .user_main_info .user_name_wrap{margin-top:0px;} .mobile_width #userMainBody .user_main_info .profile_wrap{display:inline-block;vertical-align:top;margin-right:26px;} .mobile_width #userMainBody .text_info_wrap{display:inline-block;vertical-align:top;width:calc(100% - 106px);} .mobile_width #userMainBody .user_main_info .nickname{margin-top:0px;} .mobile_width #userMainBody .user_main_info .button_wrap .button_item_wrap{display:inline-block;margin-bottom:0;} .mobile_width #userMainBody .user_main_info .button_wrap .button_item_wrap.first_button{width:calc(67% - 4px);margin-right:8px;} .mobile_width #userMainBody .user_main_info .button_wrap .button_item_wrap.second_button{width:calc(33% - 4px);} .mobile_width #userMainBody .user_main_info .button_wrap .button_item_wrap.hide_button{display:none;} .mobile_width #userMainBody .user_main_info .button_wrap .user_match_result{width:100%;margin-top:8px;} } @media only screen and (max-width:599px) { #userMainBody .user_main_info{border-radius:0;box-shadow:none;} #userMainBody .user_main_info .visitor_cnt_wrap{padding:4px 0 6px 0;border-bottom:none;background:#ebeff8;} #userMainBody .user_main_info .visitor_cnt_wrap .visitor_cnt{border-right:solid 1px #ced8e5;} #userMainBody .user_main_info .info_wrap{padding:16px 16px 20px 16px;} #userMainBody .user_main_info .profile_wrap{display:inline-block;vertical-align:top;margin-right:24px;} #userMainBody .user_main_info .mobile_summary_cnt_wrap{display:inline-block;margin-top:16px;vertical-align:top;width:calc(100% - 104px);max-width:340px;} #userMainBody .user_main_info .mobile_summary_cnt_wrap .summary_cnt_item{margin-right:0px;width:33%;text-align:center;} #userMainBody .user_main_info .mobile_summary_cnt_wrap .summary_cnt_item:last-child{margin-right:0;} #userMainBody .user_main_info .mobile_summary_cnt_wrap .summary_value{line-height:27px;} #userMainBody .user_main_info .mobile_summary_cnt_wrap .summary_title{line-height:19px;} #userMainBody .text_info_wrap{margin-top:12px;} #userMainBody .user_main_info .nickname{margin-top:0px;line-height:24px;font-size:16px;display:inline-block;vertical-align:top;} #userMainBody .user_main_info .nickname .button_wrap{display:none;} #userMainBody .user_main_info .nickname .dev_user_icon{height:20px;margin:3px 0 0 1px;} #userMainBody .user_main_info .user_id{margin-top:4px;margin-left:8px;line-height:19px;font-size:12px;display:inline-block;vertical-align:top;} #userMainBody .user_main_info .intro{margin-top:4px;} #userMainBody .user_main_info .summary_cnt_wrap{display:none;} #userMainBody .user_main_info .button_wrap{margin-top:16px;} #userMainBody .user_main_info .button_wrap .button_item_wrap{display:inline-block;margin-bottom:0;} #userMainBody .user_main_info .button_wrap .button_item_wrap.first_button{width:calc(67% - 4px);margin-right:8px;} #userMainBody .user_main_info .button_wrap .button_item_wrap.second_button{width:calc(33% - 4px);} #userMainBody .user_main_info .button_wrap .button_item_wrap.hide_button{display:none;} #userMainBody .user_main_info .button_wrap .user_match_result{width:100%;margin-top:12px;} .popup_match_user_wrap{width:100vw;border-radius:0;border-top-right-radius:13px;border-top-left-radius:13px;} } #userMainBody .user_main_content .summary_cnt_wrap{border:solid 1px #e0e8f3;border-radius:13px;margin-bottom:8px;} #userMainBody .user_main_content .summary_cnt_wrap .summary_cnt_item{width:25%;height:88px;cursor:pointer;text-align:center;} #userMainBody .user_main_content .summary_cnt_wrap .summary_cnt_item_wrap{position:relative;margin:20px 0;border-right:solid 1px #ebeff8;} #userMainBody .user_main_content .summary_cnt_wrap .summary_cnt_item:last-child .summary_cnt_item_wrap{border-right:none;} #userMainBody .user_main_content .summary_cnt_wrap .summary_title{line-height:18px;} #userMainBody .user_main_content .summary_cnt_wrap .summary_value{margin-top:1px;line-height:29px;} #userMainBody .user_main_content .summary_cnt_wrap .summary_cnt_item_wrap .user_badge{display:none;position:absolute;left:calc(50% + 16px);top:0;background:#ec5245;width:6px;height:6px;border-radius:3px;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .summary_cnt_wrap{width:calc(100% + 32px);border:none;border-radius:0px;margin:-16px 0 0 -16px;border-bottom:solid 1px #ebeff8;} #userMainBody .user_main_content .summary_cnt_wrap .summary_cnt_item{height:77px;} #userMainBody .user_main_content .summary_cnt_wrap .summary_cnt_item_wrap{margin:16px 0 18px 0;} #userMainBody .user_main_content .summary_cnt_wrap .summary_title{line-height:18px;} #userMainBody .user_main_content .summary_cnt_wrap .summary_value{margin-top:1px;line-height:25px;font-size:17px;} } #userMainBody .user_main_content .user_mission_wrap{height:269px;width:100%;border-radius:13px;background:#ebeff8;margin-bottom:0px;padding:20px;overflow:hidden;} #userMainBody .user_main_content .user_mission_wrap .section_title{line-height:16px;} #userMainBody .user_main_content .user_mission_wrap .total_progress{float:right;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list{margin-top:16px;width:632px;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item{text-align:center;display:inline-block;vertical-align:top;margin-right:16px;width:200px;height:199px;padding: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);} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item:last-child{margin-right:0;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .mission_icon_wrap{width:58px;height:58px;padding:12px;margin:auto;border-radius:29px;background:#e5f3ff;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .mission_icon{height:34px;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .title{line-height:17px;margin-top:10px;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .description{line-height:17px;margin-top:7px;height:34px;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .mission_button_wrap{margin-top:8px;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .mission_button_wrap .btn_r{width:100%;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .mission_complete_wrap{margin-top:14px;line-height:23px;text-align:center;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list .mission_item .mission_complete_wrap .complete_icon{height:24px;margin-right:4px;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .user_mission_wrap{border-radius:0px;padding:16px;max-width:calc(100% + 32px);width:calc(100% + 32px);margin:0 0 0 -16px;} #userMainBody .user_main_content .user_mission_wrap .section_title{font-size:13px;} #userMainBody .user_main_content .user_mission_wrap .user_mission_list{margin-top:16px;} } #userMainBody .user_main_content .user_main_section{padding:24px 0 28px 0;border-bottom:solid 1px #ebeff8;} #userMainBody .user_main_content .user_main_section.small_section{padding:0;} #userMainBody .user_main_content .user_main_section.main_game_card_section{padding-bottom:12px;} #userMainBody .user_main_content .user_main_section:first-child{padding-top:0;} #userMainBody .user_main_content .user_main_section:last-child{border-bottom:none;} #userMainBody .user_main_content .small_section .section_title_row{padding:20px 0;} #userMainBody .user_main_content .section_title_row{line-height:28px;} #userMainBody .user_main_content .section_title_row .section_title{display:inline-block;} #userMainBody .user_main_content .section_title_row .section_cnt{line-height:24px;margin:1px 0 0 6px;vertical-align:top;} #userMainBody .user_main_content .section_title_row .section_right{float:right;vertical-align:top;} #userMainBody .user_main_content .section_title_row .section_right .more_icon{height:18px;margin-top:3px;cursor:pointer;} #userMainBody .user_main_content .section_title_row .input_select_box .select_option_wrap{width:180px;} #userMainBody .user_main_content .section_title_row .input_select_box .select_img{margin:2px 0 0 2px;} #userMainBody .user_main_content .section_title_row .more_text{margin-right:8px;} #userMainBody .user_main_content .section_title_row .more_button{user-select:none;} #userMainBody .user_main_content .section_title_row .add_card_button{vertical-align:top;margin-left:12px;width:70px;} #userMainBody .user_main_content .section_title_row .title_icon{height:20px;margin:2px 6px 0 0;} #userMainBody .user_main_content .section_title_row .new_feature{vertical-align:top;margin-left:8px;background:#51acff;padding:0 6px;border-radius:4px;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .user_main_section{padding:16px 0 20px 0;} #userMainBody .user_main_content .section_title_row{line-height:24px;} #userMainBody .user_main_content .section_title_row .section_title{font-size:16px;} #userMainBody .user_main_content .section_title_row .section_cnt{margin:1px 0 0 6px;} #userMainBody .user_main_content .main_section_divider{width:100vw;height:8px;background:#ebeff8;margin-left:-16px;} } #userMainBody .user_main_content .empty_section{text-align:center;margin-top:40px;margin-bottom:36px;} #userMainBody .user_main_content .empty_section .empty_icon_wrap{margin-bottom:8px;} #userMainBody .user_main_content .empty_section .empty_icon{height:32px;margin-right:8px;} #userMainBody .user_main_content .empty_section .empty_icon:last-child{margin-right:0;} #userMainBody .user_main_content .empty_section .empty_text{line-height:20px;} #userMainBody .user_main_content .empty_section .empty_button_wrap{margin-top:12px;} #userMainBody .user_main_content .empty_section .empty_button_wrap .btn_r{font-weight:700;padding:0 16px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap{margin-top:4px;line-height:18px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .card_view_cnt{margin-right:12px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .card_view_cnt:last-child{margin-right:0px;margin-left:12px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .cnt_value{margin-left:8px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .cnt_divider{vertical-align:top;width:1px;height:12px;margin-top:3px;background:#ced8e5;} #userMainBody .user_main_content .main_game_card_list_content{overflow:hidden;width:100%;} #userMainBody .user_main_content .main_game_card_list_content.no_overflow{overflow:visible;} #userMainBody .user_main_content .game_card_list{min-width:824px;} #userMainBody .user_main_content .game_card_list .game_card_item_wrap{vertical-align:top;display:inline-block;margin:12px 16px 16px 0;width:264px;height:163px;position:relative;border-radius:12px;} #userMainBody .user_main_content .game_card_list .game_card_item_wrap .game_card_item{transform:scale(0.7880);} #userMainBody .user_main_content .game_card_list .game_card_item_wrap .game_card_item .game_card_content_wrap{box-shadow:none !important;} #userMainBody .user_main_content .game_card_list .game_card_item_wrap:last-child{margin-right:0;} #userMainBody .user_main_content .game_card_list .empty_game_card_item{width:100%;height:100%;border-radius:8px;border:dashed 2px #b2bdce;text-align:center;cursor:pointer;} #userMainBody .user_main_content .game_card_list .empty_game_card_item img{height:36px;margin-top:50px;} #userMainBody .user_main_content .game_card_list .empty_game_card_item .empty_text{line-height:20px;margin-top:8px;} #userMainBody .user_main_content .game_card_list .more_card_button{width:264px;height:164px;position:absolute;top:0;left:0;background:rgba(3, 24, 39, 0.7);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;border-radius:10px;} #userMainBody .user_main_content .game_card_list .more_card_button .more_cnt{line-height:41px;} #userMainBody .user_main_content .game_card_list .more_card_button .more_text{line-height:20px;margin-top:4px;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap{margin-top:8px;padding:4px 0 6px 0;line-height:18px;background:#ebeff8;border-radius:8px;text-align:center;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .card_view_cnt{width:50%;margin-right:0;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .card_view_cnt:last-child{margin-right:0px;margin-left:0;width:calc(50% - 1px);} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap .cnt_value{margin-left:8px;} } #userMainBody .user_main_content .game_card_swap_box_wrap{width:100%;margin-top:12px;transform-origin:left;position:relative;} #userMainBody .user_main_content .game_card_swap_box_wrap.game_card_cnt_1{height:208px;} #userMainBody .user_main_content .game_card_swap_box_wrap.game_card_cnt_2{height:224px;} #userMainBody .user_main_content .game_card_swap_box_wrap.game_card_cnt_3{height:238px;} #userMainBody .user_main_content .game_card_swap_box_wrap.game_card_cnt_4{height:250px;} #userMainBody .user_main_content .game_card_swap_box{width:335px;margin:auto;position:absolute;;z-index:5;top:0;bottom:0;left:0;right:0;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap{position:absolute;transition:z-index 0.1s ease-out, bottom 0.1s ease-out;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap.fade_out{transition:opacity 0.1s linear, transform 0.1s linear;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap .game_card_item{transition:transform 0.1s ease-in;transform-origin:center;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(1){left:0;bottom:0;z-index:10;width:335px;height:208px;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(1) .game_card_item{transform:scale(1);} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(2){left:0px;bottom:24px;z-index:8;width:335px;height:208px;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(2) .game_card_item{transform:scale(0.9283);} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(3){left:0px;bottom:46px;z-index:6;width:335px;height:208px;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(3) .game_card_item{transform:scale(0.8477);} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(4){left:0px;bottom:65px;z-index:4;width:335px;height:208px;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(4) .game_card_item{transform:scale(0.7820);} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(n+5){left:0px;bottom:50px;z-index:0;width:335px;height:208px;} #userMainBody .user_main_content .game_card_swap_box .game_card_item_wrap:nth-child(n+5) .game_card_item{transform:scale(0.5);} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap_m{max-width:340px;padding:8px 16px;margin:16px auto 0 auto;border-radius:8px;background:#ebeff8;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap_m .card_view_cnt{line-height:18px;margin-top:4px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap_m .card_view_cnt:first-child{margin-top:0px;} #userMainBody .user_main_content .main_game_card_section .card_view_cnt_wrap_m .cnt_value{float:right;} #userMainBody .user_main_content .add_card_mobile_button{width:100%;margin-top:16px;text-align:center;} #userMainBody .user_main_content .add_card_mobile_button .btn_r{width:100%;max-width:340px;font-weight:700;} #userMainBody .user_main_content .add_card_mobile_button img{height:20px;margin:14px 2px 0 0;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .user_main_section.main_game_card_section{padding-bottom:20px;} } #userMainBody .user_main_content .main_game_list{margin-top:12px;} #userMainBody .user_main_content .main_game_list .main_game_item{height:90px;width:90px;position:relative;vertical-align:top;margin-right:12px;} #userMainBody .user_main_content .main_game_list .main_game_item:last-child{margin-right:0;} #userMainBody .user_main_content .main_game_list .main_game_cover{height:100%;width:100%;border-radius:8px;vertical-align:top;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:#ced8e5;} #userMainBody .user_main_content .main_game_list .main_game_item .library_state_button_square{height:28px;position:absolute;right:-8px;bottom:-8px;} #userMainBody .user_main_content .main_game_list .main_game_item .library_star_button{width:52px;height:28px;position:absolute;right:-8px;bottom:-8px;background-size:cover;background-position:center;line-height:28px;text-align:center;user-select:none;padding-left:13px;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .main_game_list .main_game_item{height:calc(33vw - 18px);width:calc(33vw - 18px);margin-bottom:16px;} #userMainBody .user_main_content .main_game_list .main_game_item:nth-child(3n){margin-right:0;} #userMainBody .user_main_content .main_game_list .main_game_item:nth-child(n+4){margin-bottom:0;} } #userMainBody .user_main_content .achievement_cnt_wrap{line-height:18px;margin-top:4px;} #userMainBody .user_main_content .achievement_cnt_wrap .achievement_type{vertical-align:top;} #userMainBody .user_main_content .achievement_cnt_wrap .achievement_cnt_value{margin-left:8px;vertical-align:top;} #userMainBody .user_main_content .achievement_cnt_wrap .achievement_cnt_divider{width:1px;height:12px;vertical-align:top;margin:3px 12px;background:#ced8e5;} #userMainBody .user_main_content .recent_achievement_list{margin-top:12px;} #userMainBody .user_main_content .recent_achievement_list .achievement_icon{height:64px;width:64px;border-radius:8px;vertical-align:top;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:#ced8e5;} #userMainBody .user_main_content .recent_achievement_list .achievement_icon:last-child{margin-right:0;} #userMainBody .user_main_content .achievement_cnt_wrap_m{line-height:18px;margin-top:16px;padding:8px 16px;background:#ebeff8;border-radius:8px;} #userMainBody .user_main_content .achievement_cnt_wrap_m .achievement_cnt_item{margin-top:4px;} #userMainBody .user_main_content .achievement_cnt_wrap_m .achievement_cnt_item:first-child{margin-top:0px;} #userMainBody .user_main_content .achievement_cnt_wrap_m .achievement_cnt_value{float:right;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .recent_achievement_list .achievement_icon{height:calc(25vw - 17px);width:calc(25vw - 17px);margin-bottom:12px;} #userMainBody .user_main_content .recent_achievement_list .achievement_icon:nth-child(4n){margin-right:0;} #userMainBody .user_main_content .recent_achievement_list .achievement_icon:nth-child(n+5){margin-bottom:0;} } #userMainBody .user_main_content .montly_game_list{margin-top:12px;} #userMainBody .user_main_content .montly_game_list .montly_game_item{position:relative;height:90px;width:90px;border-radius:8px;vertical-align:top;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:#ced8e5;overflow:hidden;} #userMainBody .user_main_content .montly_game_list .montly_game_item:last-child{margin-right:0;} #userMainBody .user_main_content .montly_game_list .montly_game_item .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);} #userMainBody .user_main_content .montly_game_list .montly_game_item .month_text{position:relative;line-height:20px;width:90px;height:90px;padding:8px 0 0 12px;user-select:none;} @media only screen and (max-width:599px) { #userMainBody .user_main_content .montly_game_list .montly_game_item{height:calc(33vw - 18px);width:calc(33vw - 18px);margin-bottom:16px;} #userMainBody .user_main_content .montly_game_list .montly_game_item:nth-child(3n){margin-right:0;} #userMainBody .user_main_content .montly_game_list .montly_game_item:nth-child(n+4){margin-bottom:0;} } #userMainBody .user_main_content .recent_review_list{margin-top:16px;} #userMainBody .user_main_content .recent_review_list .short_review{padding-bottom:20px;border-bottom:solid 1px #ebeff8;margin-bottom:20px;cursor:pointer;} #userMainBody .user_main_content .recent_review_list .short_review:last-child{padding-bottom:0px;border-bottom:none;margin-bottom:0px;} #userMainBody .user_main_content .recent_review_list .short_review_header .game_cover{vertical-align:top;width:56px;height:56px;margin-right:12px;border-radius:8px;background-size:cover;background-position:center;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info{vertical-align:top;width:calc(100% - 68px);position:relative;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .user_info_wrap{line-height:18px;margin-top:2px;width:100%;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .user_info_wrap.has_open_state{width:calc(100% - 30px);} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .user_info_wrap.has_follow_button{width:calc(100% - 68px);} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .user_info_wrap.has_open_state.has_follow_button{width:calc(100% - 98px);} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .profile_image{height:16px;width:16px;border-radius:8px;border:solid 1px #ced8e5;vertical-align:top;margin:1px 4px 0 0;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .game_name{line-height:22px;margin-top:3px;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .game_name .mobile_icon_new{height:22px;vertical-align:top;margin:2px 2px 0 0;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info{margin-top:6px;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .short_review_point{height:21px;line-height:19px;border:solid 1px #3f9dff;border-radius:4px;padding:0 4px;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .short_review_point.no_review_point{border:solid 1px #b2bdce;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .short_review_point img{height:15px;vertical-align:top;margin:2px 2px 0 0;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info{height:21px;line-height:19px;border:solid 1px;border-radius:4px;padding:0 4px;margin-left:4px;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info img{height:15px;vertical-align:top;margin:2px 2px 0 0;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info.state_color_0{border-color:#b2bdce;color:#b2bdce;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info.state_color_1{border-color:#3f9dff;color:#3f9dff;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info.state_color_2{border-color:#00c2a8;color:#00c2a8;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info.state_color_3{border-color:#ec5245;color:#ec5245;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info.state_color_4{border-color:#3b4757;color:#3b4757;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .library_state_info.state_color_5{border-color:#f99b00;color:#f99b00;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .library_info .post_cnt{height:21px;line-height:19px;border:solid 1px #7f8fa6;border-radius:4px;padding:0 4px;margin-left:4px;} #userMainBody .user_main_content .recent_review_list .short_review_header .review_info .open_state_icon{height:22px;position:absolute;top:0;right:0;} #userMainBody .user_main_content .recent_review_list .short_review .featured_tag_wrap{margin-top:12px;} #userMainBody .user_main_content .recent_review_list .short_review .featured_tag{height:23px;line-height:21px;background:#fff5bd;border:solid 1px #ffef91;border-radius:6px;color:#f76f00;padding:0 6px;} #userMainBody .user_main_content .recent_review_list .short_review .featured_tag img{height:18px;margin-top:1px;} #userMainBody .user_main_content .recent_review_list .short_review .content{margin-top:8px;line-height:22px;max-width:548px;max-height:44px;overflow:hidden;} #userMainBody .user_main_content .recent_review_list .short_review .content .line_obj{margin:0;} #userMainBody .user_main_content .recent_review_list .short_review .more_text{line-height:24px;} #userMainBody .user_main_content .recent_review_list .short_review .display_time_wrap{margin-top:2px;line-height:21px;} #userMainBody .user_main_content .recent_review_list .short_review .cnt_wrap{margin-top:12px;line-height:21px;} #userMainBody .user_main_content .recent_review_list .short_review .cnt_wrap .comment_cnt_wrap{float:right;} #userBody #feedRow{padding-top:0;} #userBody #libraryRow{min-height:calc(100vh - 425px);overflow:unset;margin-top:12px;} #userBody #syncRow{min-height:calc(100vh - 425px);overflow:unset;} #userBody #syncRow .body_center{position:relative;} #userBody #followRow{min-height:calc(100vh - 425px);} #userBody #achievementHeaderRow{overflow:unset;} #userBody #achievementRow{min-height:calc(100vh - 425px);overflow:unset;} #userBody #yearChartRow{min-height:calc(100vh - 425px);margin-top:76px;} #userBody #cardHeaderRow{overflow:unset;} #userBody #cardRow{min-height:calc(100vh - 425px);overflow:unset;} #userBody .user_page_title{line-height:38px;margin-bottom:38px;} #userBody .collection_page_title{line-height:38px;margin-bottom:38px;} #userBody #bodyRow2 .body_center .info_module:first-child{margin-top:0;} #collectionPageFooter{display:none;position:fixed;bottom:0;left:0;width:100vw;height:53px;background:#FFF;z-index:1001;text-align:center;} .mobile_width #collectionPageFooter{display:block;} #collectionPageFooter .create_collection_button{margin-top:8px;width:95%;max-width:380px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userBody #feedRow .user_page_title{width:600px;margin-left:auto;margin-right:auto;} } @media only screen and (max-width:599px) { #userBody .feed_page_title{display:none;} #userBody #libraryRow{margin-top:0px;} #userBody .collection_page_title{display:none;} } #userBody .no_result{text-align:center;line-height:24px;margin-top:80px;} #userBody .little_result{text-align:center;line-height:24px;margin-bottom:30px;} #userBody .no_result_button{text-align:center;margin-top:30px;} #userBody .body_row{overflow:visible;} #userBody .body_left{float:none;display:inline-block;} #userBody .body_right{vertical-align:top;} #userBody .body_left_half{vertical-align:top;display:inline-block;float:none;} #userBody .body_right_half{vertical-align:top;display:inline-block;} @media only screen and (max-width:1000px) and (min-width:600px) { #pageBodyHolder_NEW.mobile_width #userBody .body_center{width:calc(100% - 40px);margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .body_left_half{width:calc(50% - 30px);margin-left:20px;} #pageBodyHolder_NEW.mobile_width #userBody .body_right_half{width:calc(50% - 30px);margin-right:20px;} #pageBodyHolder_NEW.mobile_width #userBody .body_left_invert{width:calc(100% - 40px);margin:auto;display:block;} #pageBodyHolder_NEW.mobile_width #userBody .body_right_invert{width:calc(100% - 40px);margin:auto;display:block;} } @media only screen and (max-width:1000px) and (min-width:700px) { #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_left{width:calc(100% - 380px);float:left;margin-left:20px;} #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_right{width:320px;float:right;margin-right:20px;} #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_center{width:calc(100% - 40px);margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_left_half{width:calc(50% - 30px);margin-left:20px;} #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_right_half{width:calc(50% - 30px);margin-right:20px;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_left{width:calc(100% - 380px);float:left;margin-left:20px;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_right{width:320px;float:right;margin-right:20px;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_left_half{width:calc(50% - 30px);margin-left:20px;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_right_half{width:calc(50% - 30px);margin-right:20px;} } @media only screen and (max-width:699px) and (min-width:600px) { #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_left{width:600px;float:none;margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_right{width:600px;float:none;margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .responsive .body_center{width:600px;margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_left{width:calc(100% - 40px);float:none;margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_right{width:calc(100% - 40px);float:none;margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_left_half{width:calc(100% - 40px);float:none;margin:auto;} #pageBodyHolder_NEW.mobile_width #userBody .full_responsive .body_right_half{width:calc(100% - 40px);float:none;margin:auto;} } @media only screen and (max-width:599px) { #userBody{padding-bottom:100px;} #userBody #yearChartRow{margin-top:0px;} #pageBodyHolder_NEW #userBody .body_left{width:100%;float:none;} #pageBodyHolder_NEW #userBody .body_right{width:100%;float:none;} #pageBodyHolder_NEW #userBody .body_center{width:100%;} #pageBodyHolder_NEW #userBody .body_left_invert{width:100%;display:block;} #pageBodyHolder_NEW #userBody .body_right_invert{width:100%;display:block;} #pageBodyHolder_NEW #userBody #bodyRow1 .body_center .info_module:first-child .top_divider{display:none;} } /******** 유저 미션 완료 팝업 */ #completeUserMissionPopup{width:420px;height:454px;border-radius:13px;background:#FFF;overflow:hidden;} #completeUserMissionPopup .image_wrap{text-align:center;} #completeUserMissionPopup .image_wrap .navi_image{width:100%;} #completeUserMissionPopup .title{text-align:center;margin-top:16px;line-height:25px;} #completeUserMissionPopup .description{text-align:center;margin-top:14px;line-height:22px;} #completeUserMissionPopup .button_wrap{text-align:center;margin-top:19px;} #completeUserMissionPopup .button_wrap .btn_r{width:228px;} #completeUserMissionPopup .close_button_wrap{text-align:center;margin-top:16px;line-height:16px;} #completeUserMissionPopup .close_button{cursor:pointer;} @media only screen and (max-width:599px) { #completeUserMissionPopup{width:280px;height:462px;} #completeUserMissionPopup .close_button_wrap{margin-top:24px;} } /******** 헤더 */ #pageHeader.user_page .user_background_wrap{position:absolute;top:0;left:0;width:100%;height:360px;} #pageHeader.user_page .user_background_image{width:100%;height:100%;} #pageHeader.user_page .user_background_image .cover{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.3);} #userInfoBox{position:relative;width:960px;height:360px;margin:auto;padding-top:70px;} #userInfoBox .share_button{position:absolute;top:16px;right:16px;line-height:20px;} #userInfoBox .share_button .share_icon{height:20px;margin-right:4px;} #userInfoBox .profile_info{height:100px;} #userInfoBox .profile_image{width:100px;height:100px;border-radius:50px;border:solid 1px #9B9B9B;margin-right:10px;float:left;background:#FFF;} #userInfoBox .nickname{line-height:68px;height:68px;} #userInfoBox .user_id{line-height:22px;height:22px;margin-bottom:10px;} #userInfoBox .intro{width:460px;line-height:22px;height:66px;max-height:66px;margin-top:20px;white-space:pre-wrap;} #userInfoBox .cnt_summary{margin-top:30px;} #userInfoBox .cnt_summary .cnt_item{float:left;margin-right:20px;} #userInfoBox .cnt_summary .cnt_item_title{line-height:18px;margin-bottom:10px;} #userInfoBox .cnt_summary .cnt_item_value{line-height:20px;} #userInfoBox .cnt_summary .follow_button_wrap .follow_button_r{margin-left:20px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userInfoBox{width:calc(100% - 40px);} } @media only screen and (max-width:599px) { #pageHeader.user_page .user_background_wrap{height:160px;} #userInfoBox{width:100%;height:auto;margin:auto;padding:96px 16px 16px 16px;overflow:hidden;border-bottom:solid 1px #D8D8D8;} #userInfoBox .profile_info{height:80px;padding-left:4px;} #userInfoBox .profile_image{width:80px;height:80px;border-radius:40px;margin-right:0px;margin-left:10px;float:right;} #userInfoBox .nickname{line-height:28px;height:28px;font-size:22px;font-weight:300;letter-spacing:-0.3px;} #userInfoBox .user_id{line-height:18px;height:18px;margin-bottom:0px;font-size:14px;font-weight:400;letter-spacing:-0.3px;} #userInfoBox .intro{color:#4a4a4a;width:100%;line-height:18px;height:auto;max-height:none;margin-top:5px;font-size:14px;font-weight:400;letter-spacing:-0.3px;} #userInfoBox .cnt_summary{margin-top:20px;overflow:hidden;} #userInfoBox .cnt_summary .cnt_item{margin-right:30px;} #userInfoBox .cnt_summary .cnt_item:nth-child(3){margin-right:0px;} #userInfoBox .cnt_summary .cnt_item_title{line-height:18px;margin-bottom:0px;} #userInfoBox .cnt_summary .cnt_item_value{line-height:20px;font-size:12px;} #userInfoBox .cnt_summary .follow_button_wrap .follow_button_r{margin-left:0px;float:right;} } /******** 라이브러리 */ #userBody .back_to_library{line-height:19px;margin-bottom:16px;} #userBody .back_to_library .go_back_button{cursor:pointer;} #userBody .back_to_library img{height:18px;margin-right:6px;} #userBody .create_collection_button{float:right;vertical-algin:top;margin-top:1px;width:144px;} #userBody .upper_header_wrap{padding-bottom:16px;border-bottom:solid 1px #ebeff8;} #userBody .upper_header_wrap .library_tab_menu{background:#ebeff8;border-radius:4px;height:36px;border:solid 2px #ebeff8;vertical-align:top;} #userBody .upper_header_wrap .library_tab_menu .library_tab_button{width:36px;height:32px;border-radius:4px;user-select:none;cursor:pointer;background-size:20px 20px;background-position:center;background-repeat:no-repeat;} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.selected{background-color:#FFF;} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.CARD{background-image:url('/images/icon_v3/library_card_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.LIST{background-image:url('/images/icon_v3/library_list_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.THUMB{background-image:url('/images/icon_v3/library_thumb_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.SHELF{background-image:url('/images/icon_v3/library_shelf_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.CARD.selected{background-image:url('/images/icon_v3/library_card_dark.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.LIST.selected{background-image:url('/images/icon_v3/library_list_dark.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.THUMB.selected{background-image:url('/images/icon_v3/library_thumb_dark.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.SHELF.selected{background-image:url('/images/icon_v3/library_shelf_dark.png');} #userBody .upper_header_wrap .rate_mode_button{float:right;vertical-align:top;width:86px;} #userBody .lower_header_wrap{height:56px;user-select:none;} #userBody .lower_header_wrap .cnt_wrap{line-height:56px;} #userBody .lower_header_wrap .sort_filter_search_wrap{float:right;vertical-align:top;} #userBody .lower_header_wrap .sort_filter_search_wrap .v_divider{width:1px;height:16px;vertical-align:top;margin:20px 8px;background:#ebeff8;} #userBody .lower_header_wrap .sort_filter_search_wrap .list_cnt_wrap{line-height:56px;} #userBody .lower_header_wrap .sort_filter_search_wrap .list_cnt_wrap .select_option_wrap{width:150px;} #userBody .lower_header_wrap .sort_filter_search_wrap .library_sort_wrap{line-height:56px;} #userBody .lower_header_wrap .sort_filter_search_wrap .library_sort_wrap .select_option_wrap{z-index:20;width:375px;max-height:292px;overflow:auto;} #userBody .lower_header_wrap .sort_filter_search_wrap .library_sort_wrap .select_text > .info_text{display:none;} #userBody .lower_header_wrap .sort_filter_search_wrap .library_sort_wrap .has_info{line-height:22px;padding-top:12px;padding-bottom:12px;} #userBody .lower_header_wrap .sort_filter_search_wrap .library_sort_wrap .info_text{line-height:18px;margin-top:2px;} #userBody .lower_header_wrap .sort_filter_search_wrap .library_sort_wrap .divider{width:calc(100% - 32px);height:1px;margin:auto;background:#ebeff8;} #userBody .lower_header_wrap .sort_filter_search_wrap .collection_sort_wrap{line-height:56px;} #userBody .lower_header_wrap .sort_filter_search_wrap .collection_sort_wrap .select_option_wrap{z-index:20;width:120px;max-height:292px;overflow:auto;} #userBody .lower_header_wrap .sort_filter_search_wrap .filter_button{line-height:56px;cursor:pointer;width:70px;} #userBody .lower_header_wrap .sort_filter_search_wrap .filter_button .filter_icon{height:16px;margin:20px 4px 0 0;} #userBody .lower_header_wrap .sort_filter_search_wrap .filter_button .arrow_icon{height:20px;margin:18px 0 0 2px;float:right;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap{position:relative;vertical-align:top;margin-top:10px;line-height:36px;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_off{width:48px;text-align:right;cursor:pointer;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .search_icon{height:16px;position:absolute;left:4px;top:10px;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_on .search_icon{left:8px;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .show_search_button{user-select:none;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .hide_search_button{user-select:none;cursor:pointer;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_library_search_input_box{overflow:hidden;display:inline-block;vertical-align:top;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_library_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;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_library_search_input_box input::placeholder{color:#697B96;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_on .user_library_search_input_box{display:inline-block;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_off .user_library_search_input_box{display:none;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_on .show_search_button{display:none;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_off .show_search_button{display:inline-block;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_library_search_input_box .input_cancel{top:1px;right:30px;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_collection_search_input_box{overflow:hidden;display:inline-block;vertical-align:top;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_collection_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;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_collection_search_input_box input::placeholder{color:#697B96;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_on .user_collection_search_input_box{display:inline-block;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_off .user_collection_search_input_box{display:none;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_on .show_search_button{display:none;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap.search_off .show_search_button{display:inline-block;} #userBody .lower_header_wrap .sort_filter_search_wrap .search_input_wrap .user_collection_search_input_box .input_cancel{top:1px;right:30px;} @media only screen and (max-width:599px) { #userBody .lower_header_wrap.collection_lower_header_wrap{padding:0 16px;} } #userBody .filter_group_wrap{position:relative;display:none;user-select:none;margin-bottom:20px;} #userBody .filter_group_wrap.show{display:block;} #userBody .filter_group_wrap .filter_tab_button{cursor:pointer;line-height:40px;width:88px;height:48px;background:#ebeff8;border-top-left-radius:13px;border-top-right-radius:13px;position:absolute;right:56px;top:-48px;padding:0 9px;} #userBody .filter_group_wrap .filter_tab_button .filter_icon{height:16px;margin:12px 4px 0 0px;} #userBody .filter_group_wrap .filter_tab_button .arrow_icon{height:20px;margin:10px 0 0 2px;float:right;} #userBody .filter_group_wrap .filter_body{width:100%;height:101px;background:#ebeff8;border-radius:13px;padding:20px 23px 24px 23px;} #userBody .filter_group_wrap .filter_body .filter_item{width:170px;margin-right:16px;} #userBody .filter_group_wrap .filter_body .filter_item:last-child{margin-right:0px;} #userBody .filter_group_wrap .filter_body .filter_item .filter_title{line-height:17px;padding-left:3px;} #userBody .filter_group_wrap .filter_body .filter_item .filter_title .reset_button{float:right;cursor:pointer;display:none;} #userBody .filter_group_wrap .filter_body .filter_item.has_value .filter_title .reset_button{display:inline-block;} #userBody .filter_group_wrap .filter_body .filter_item .filter_select_box{display:block;cursor:pointer;height:36px;padding:0 12px;margin-top:4px;border:solid 2px transparent;border-radius:4px;background:#FFF;line-height:32px;} #userBody .filter_group_wrap .filter_body .filter_item .filter_select_box.open{border:solid 2px #bfe1ff;} #userBody .filter_group_wrap .filter_body .filter_item.has_value .filter_text{color:#031827;} #userBody .filter_group_wrap .filter_body .filter_item .filter_select_box .select_img{float:right;margin-top:6px;} #userBody .filter_group_wrap .filter_body .filter_item .filter_select_box.open .select_img{transform:rotate(180deg);} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap{z-index:20;width:170px;right:-2px;top:40px;cursor:auto;} #userBody .filter_group_wrap .filter_body .filter_item.state_filter .select_option_wrap{width:200px;} #userBody .filter_group_wrap .filter_body .filter_item.platform_filter .select_option_wrap{width:300px;} #userBody .filter_group_wrap .filter_body .filter_item.sync_filter .select_option_wrap{width:300px;} #userBody .filter_group_wrap .filter_body .filter_item.etc_filter .select_option_wrap{width:380px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .option_title{line-height:19px;padding:12px 20px 0 20px} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .option_title .reset_button{float:right;cursor:pointer;display:none;} #userBody .filter_group_wrap .filter_body .filter_item.has_value .select_option_wrap .option_title .reset_button{display:inline-block;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .divider{width:calc(100% - 40px);height:1px;margin:auto;background:#ebeff8;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list{padding:0 20px 8px 20px;margin-top:12px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item{position:relative;vertical-align:top;cursor:pointer;width:calc(50% - 4px);height:52px;padding:6px 0;background:#ebeff8;margin-right:8px;border-radius:8px;text-align:center;margin-bottom:8px;border:solid 2px transparent;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item:nth-child(2n){margin-right:0;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item:hover{background:#e5f3ff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.selected{border:solid 2px #3f9dff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.single_item{width:100%;margin-right:0;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.triple_item{width:108px;margin-right:8px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.triple_item:nth-child(2n){margin-right:8px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.triple_item:nth-child(3n){margin-right:0;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.disable_item{opacity:0.2;cursor:auto;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item .check_mark{display:none;position:absolute;top:-6px;right:-6px;height:18px;width:18px;padding:2px;background:#3f9dff;border-radius:9px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item.selected .check_mark{display:block;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item .item_title{line-height:19px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_item_list .select_option_item .item_cnt{line-height:17px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list{margin-top:4px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item{line-height:20px;cursor:pointer;height:44px;padding:12px 20px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item:hover{background:#e5f3ff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item.disable_item{opacity:0.2;cursor:auto;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item .check_wrap{vertical-align:top;margin:1px 8px 0 0;width:18px;height:18px;border-radius:9px;border:solid 1px #95a3b8;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item .check_mark{display:none;height:16px;width:16px;background:#3f9dff;border-radius:8px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item.selected .check_wrap{border:solid 1px #3f9dff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item.selected .check_mark{display:block;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item .state_icon{height:16px;margin:2px 4px 0 0;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_list_item_list .select_option_list_item .item_cnt{float:right;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list{margin-top:4px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list .select_option_radio_item{vertical-align:top;line-height:20px;cursor:pointer;height:44px;padding:12px 20px;display:inline-block;width:calc(50% - 6px);margin-right:12px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list .select_option_radio_item:last-child{margin-right:0px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list .select_option_radio_item.disable_item{opacity:0.2;cursor:auto;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list .select_option_radio_item .radio_mark{vertical-align:top;margin-top:1px;margin-right:8px;height:18px;width:18px;border:solid 1px #95a3b8;border-radius:9px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list .select_option_radio_item.selected .radio_mark{border:solid 5px #3f9dff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_radio_list .select_option_radio_item .item_cnt{margin-left:2px;vertical-align:top;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list{padding:0 16px 8px 16px;margin-top:12px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag{position:relative;vertical-align:top;cursor:pointer;height:32px;padding:0 12px;background:#ebeff8;margin-right:6px;border-radius:16px;text-align:center;margin-bottom:8px;border:solid 2px transparent;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag:hover{background:#e5f3ff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag.selected{border:solid 2px #3f9dff;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag.disable_item{opacity:0.2;cursor:auto;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag .check_mark{display:none;position:absolute;top:-6px;right:-6px;height:18px;width:18px;padding:2px;background:#3f9dff;border-radius:9px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag.selected .check_mark{display:block;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag .tag_name{line-height:28px;} #userBody .filter_group_wrap .filter_body .filter_item .select_option_wrap .select_option_tag_list .select_option_tag .item_cnt{margin-left:2px;} #userBody .rating_filter_wrap{margin-bottom:16px;height:20px;line-height:20px;} #userBody .filter_tag_wrap{margin-top:10px;user-select:none;display:none;} #userBody .filter_tag_wrap .filter_tag_item{background:#3f9dff;border-radius:4px;line-height:31px;cursor:pointer;padding:0 8px 1px 8px;margin-right:8px;margin-bottom:16px;} #userBody .filter_tag_wrap .filter_tag_item.reset_filter_button{background:#7f8fa6;} #userBody .filter_tag_wrap .filter_tag_item:last-child{margin-right:0;} #userBody .filter_tag_wrap .filter_tag_item .tag_icon{height:16px;margin:8px 2px 0 0;} #userBody .filter_tag_wrap .filter_tag_item .close_icon{height:16px;margin:8px 0 0 4px;} #userBody .filter_tag_wrap .filter_tag_item .search_icon{height:16px;margin:8px 2px 0 0;} #userBody .filter_tag_wrap.mobile_tag_wrap{margin-top:12px;padding:0 16px;} #userBody .filter_tag_wrap.mobile_tag_wrap .filter_tag_item{line-height:28px;margin-bottom:8px;} #userBody .rating_header .filter_tag_wrap.mobile_tag_wrap{padding:0;} #userBody .mobile_library_cnt_wrap.library_cnt_wrap{padding:0 16px;line-height:20px;margin:4px 0 12px 0;} #userBody .rating_header .mobile_library_cnt_wrap.library_cnt_wrap{padding:0;margin-bottom:0px;} @media only screen and (max-width:599px) { #userBody .filter_tag_wrap .filter_tag_item{line-height:28px;padding:0 8px;margin-right:8px;margin-bottom:16px;} #userBody .filter_tag_wrap .filter_tag_item .tag_icon{margin:6px 2px 0 0;} #userBody .filter_tag_wrap .filter_tag_item .close_icon{margin:6px 0 0 4px;} #userBody .filter_tag_wrap .filter_tag_item .search_icon{margin:6px 2px 0 0;} } #userBody .rating_header{padding:12px 16px;line-height:20px;border-bottom:solid 1px #ebeff8;} #userBody .rating_header .input_check_group{float:right;} #userBody .mobile_library_tab_menu{width:100vw;height:49px;border-bottom:solid 1px #ebeff8;position:fixed;top:44px;left:0;z-index:200;background:#FFF;} #userBody .mobile_library_tab_menu .library_tab_button{width:50%;height:49px;border-bottom:solid 2px transparent;} #userBody .mobile_library_tab_menu .library_tab_button:nth-child(2){width:50%;} #userBody .mobile_library_tab_menu .library_tab_button.selected{border-bottom:solid 2px #3f9dff;} #userBody .mobile_library_tab_menu .library_tab_button .background{vertical-align:top;margin-top:6px;height:20px;background-size:20px 20px;background-position:center;background-repeat:no-repeat;} #userBody .mobile_library_tab_menu .library_tab_button.LIST .background{background-image:url('/images/icon_v3/library_list_gray.png');} #userBody .mobile_library_tab_menu .library_tab_button.CARD .background{background-image:url('/images/icon_v3/library_grid_gray.png');} #userBody .mobile_library_tab_menu .library_tab_button.SHELF .background{background-image:url('/images/icon_v3/library_shelf_gray.png');} #userBody .mobile_library_tab_menu .library_tab_button.LIST.selected .background{background-image:url('/images/icon_v3/library_list_dark.png');} #userBody .mobile_library_tab_menu .library_tab_button.CARD.selected .background{background-image:url('/images/icon_v3/library_grid_dark.png');} #userBody .mobile_library_tab_menu .library_tab_button.SHELF.selected .background{background-image:url('/images/icon_v3/library_shelf_dark.png');} #userBody .mobile_library_tab_menu .library_tab_button .tab_title{text-align:center;line-height:16px;} #userBody .mobile_library_tab_menu .library_tab_button.selected .tab_title{color:#031827;} #userBody .mobile_library_spacer{width:100%;height:49px;} #userBody .quick_modify_banner{padding-top:8px;width:100%;height:58px;background:#e5f3ff;text-align:center;} #userBody .quick_modify_banner .info_text{line-height:19px;} #userBody .quick_modify_banner .text_button{margin-top:3px;line-height:19px;} #userBody .quick_modify_banner .text_button img{height:16px;transform:rotate(180deg);margin-top:2px;} #userBody .upper_header_wrap .library_tab_menu{background:#ebeff8;border-radius:4px;height:36px;border:solid 2px #ebeff8;vertical-align:top;} #userBody .upper_header_wrap .library_tab_menu .library_tab_button{width:36px;height:32px;border-radius:4px;user-select:none;cursor:pointer;background-size:24px 24px;background-position:center;background-repeat:no-repeat;} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.selected{background-color:#FFF;} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.CARD{background-image:url('/images/icon_v3/library_card_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.LIST{background-image:url('/images/icon_v3/library_list_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.THUMB{background-image:url('/images/icon_v3/library_thumb_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.SHELF{background-image:url('/images/icon_v3/library_shelf_gray.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.CARD.selected{background-image:url('/images/icon_v3/library_card_dark.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.LIST.selected{background-image:url('/images/icon_v3/library_list_dark.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.THUMB.selected{background-image:url('/images/icon_v3/library_thumb_dark.png');} #userBody .upper_header_wrap .library_tab_menu .library_tab_button.SHELF.selected{background-image:url('/images/icon_v3/library_shelf_dark.png');} #userBody .state_chart_wrap{width:100%;background:#e5f3ff;border-radius:13px;} #userBody .state_chart_wrap .button_wrap{padding:20px 24px;border-bottom:solid 1px #bfe1ff;} #userBody .state_chart_wrap .button_wrap .btn_r{width:100%;margin-bottom:4px;} #userBody .state_chart_wrap .button_wrap .btn_r:last-child{margin-bottom:0;} #userBody .state_chart_wrap .state_chart{padding:20px 24px;} #userBody .state_chart_wrap .state_chart .text_info{text-align:center;line-height:19px;} #userBody .state_chart_wrap .state_chart .chart_info{margin-top:16px;} #userBody .state_chart_wrap .state_chart .chart_info .chart_row{height:30px;margin-bottom:16px;line-height:30px;color:#3f9dff} #userBody .state_chart_wrap .state_chart .chart_info .chart_row.max_index{color:#3b69d8} #userBody .state_chart_wrap .state_chart .chart_info .chart_row:last-child{margin-bottom:0px;} #userBody .state_chart_wrap .state_chart .chart_info .chart_icon{height:30px;width:30px;padding:7px;border-radius:15px;background:#FFF;margin-right:16px;} #userBody .state_chart_wrap .state_chart .chart_info .chart_bar{background:#3f9dff;height:8px;border-radius:4px;margin:11px 6px 0 0;vertical-align:top;} #userBody .state_chart_wrap .state_chart .chart_info .max_index .chart_bar{background:#3b69d8;} #userBody .library_header{line-height:58px;height:60px;background:#FFF;border:solid 1px #EBEFF8;padding-left:12px;} #userBody .library_header .library_sort_button{text-align:center;padding:0 8px;margin-right:20px;cursor:pointer;} #userBody .library_header .library_sort_button:nth-last-child(2){margin-right:0;} #userBody .library_header .library_sort_button.selected{color:#21A8AF;} #userBody .library_header .library_filter_button{float:right;cursor:pointer;} #userBody .library_header .library_filter_button .filter_image{height:32px;padding:4px 6px;vertical-align:top;margin-top:13px;} #userBody .library_header .library_filter_button .expand_image{height:32px;padding:10px 10px 10px 20px;vertical-align:top;margin-top:13px;} #userBody .library_header .library_view_mode_button{width:80px;} #userBody .library_header .library_view_mode_button .view_mode_image{height:32px;padding:5px 10px;vertical-align:top;margin-top:13px;} #userBody .library_header .library_view_mode_button .expand_image{height:32px;padding:10px;vertical-align:top;margin-top:13px;} #userBody .library_header .library_sort_dropdown{margin-left:30px;padding-left:10px;width:130px;} #userBody .library_header .library_sort_dropdown .expand_image{height:32px;padding:10px 7px;vertical-align:top;float:right;margin-top:13px;} @media only screen and (max-width:599px) { #userBody .library_header{line-height:56px;height:56px;margin-top:0px;border:none;padding-left:0;border-bottom:solid 1px #EBEFF8;} #userBody .library_header .library_filter_button{float:none;width:110px;} #userBody .library_header .library_filter_button .filter_image{height:56px;padding:16px 6px 16px 10px;margin-top:0px;} #userBody .library_header .library_filter_button .expand_image{height:56px;padding:22px 16px 22px 10px;float:right;margin-top:0px;} #userBody .library_header .library_view_mode_button{border-right:solid 1px #EBEFF8;} #userBody .library_header .library_view_mode_button .view_mode_image{height:56px;padding:17px 4px 17px 16px;margin-top:0px;} #userBody .library_header .library_view_mode_button .expand_image{height:56px;padding:22px 10px;float:right;margin-top:0px;} #userBody .library_header .library_sort_dropdown{margin-left:0px;padding-left:12px;width:calc(100% - 190px);border-right:solid 1px #EBEFF8;} #userBody .library_header .library_sort_dropdown .expand_image{height:56px;padding:22px 10px;margin-top:0px;} } @media only screen and (max-width:350px) { #userBody .library_header .library_sort_dropdown .expand_image{padding:22px 7px;} } #userBody .filter_button_list{margin-top:20px;display:none;} #userBody .filter_button_list .filter_button{margin-right:10px;margin-bottom:6px;} #userBody .filter_button_list .filter_button .review_point_star{height:28px;padding:6px 0;vertical-align:top;} #userBody .filter_button_list .filter_button:last-child{margin-right:0px;} #userBody .filter_button_list .filter_button .x_button{vertical-align:top;height:16px;margin:6px -8px 0 6px;} @media only screen and (max-width:599px) { #userBody .filter_button_list{margin-top:16px;padding:0 16px 12px 16px;border-bottom:solid 1px #D8D8D8;} #userBody .filter_button_list .filter_button{margin-right:4px;margin-bottom:4px;font-size:13px;padding:0 12px;} } #userBody .library_grid_group{margin-top:80px;} #userBody .library_grid_group:first-child{margin-top:60px;} #userBody .library_grid_group .top_divider{width:200px;height:4px;background:#21A8AF;} #userBody .library_grid_group .group_title{display:inline-block;margin-top:22px;height:24px;line-height:24px;min-width:200px;cursor:pointer;} #userBody .library_grid_group .group_title .review_point_star{height:24px;vertical-align:top;} #userBody .library_grid_group .group_cnt{margin-left:16px;} #userBody .library_grid_group .expand_button{float:right;height:24px;padding:4px 0px;margin-left:16px;vertical-align:top;transform:rotate(0deg);transition:transform .1s linear;position:relative;z-index:1;} #userBody .library_grid_group.folded .expand_button{transform:rotate(180deg);} #userBody .library_grid_group .group_item_container{margin-top:40px;} #userBody .library_grid_group .group_item_container.no_item{margin-top:0px;} #userBody .library_grid_group.folded .group_item_container{margin-top:0px;height:0px;overflow:hidden;} #userBody .library_grid_no_group{margin-top:60px;} #userBody .library_grid_no_group .group_item_container{} @media only screen and (max-width:599px) { #userBody .library_grid_group{margin-top:16px;padding:0 16px;} #userBody .library_grid_group:first-child{margin-top:0px;} #userBody .library_grid_group .top_divider{display:none;} #userBody .library_grid_group .group_title{margin-top:16px;min-width:120px;} #userBody .library_grid_group .group_item_container{margin-top:16px;} #userBody .library_grid_no_group{margin-top:16px;padding:0 16px;} } #userBody .library_card_item{width:300px;height:298px;margin:0 30px 40px 0;border-radius:13px;display:inline-block;vertical-align:top;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);} #userBody .library_card_item:nth-child(3n){margin-right:0px;} #userBody .library_card_item:nth-last-child(-n+3){margin-bottom:0px;} #userBody .library_card_item .cover_image{width:100%;height:165px;border-top-right-radius:13px;border-top-left-radius:13px;background-size:cover;background-position:center;position:relative;cursor:pointer;} #userBody .library_card_item .cover_image .sync_platform_icon{height:22px;position:absolute;right:12px;top:12px;} #userBody .library_card_item .cover_image .sync_platform_icon:nth-child(2){top:38px;} #userBody .library_card_item .cover_image .sync_platform_icon:nth-child(3){top:64px;} #userBody .library_card_item .text_wrap{padding:14px 16px 14px 20px;} #userBody .library_card_item .text_wrap .game_name{line-height:24px;max-width:calc(100% - 22px);cursor:pointer;} #userBody .library_card_item .text_wrap .game_name .mobile_icon_new{height:20px;margin-top:3px;margin-right:2px;} #userBody .library_card_item .text_wrap .game_name .library_open_state{height:20px;margin-top:3px;margin-right:1px;} #userBody .library_card_item .text_wrap .library_state_button_wrap{float:right;vertical-align:top;} #userBody .library_card_item .text_wrap .library_state_button_wrap .library_state_button_square{height:22px;margin-top:1px;} #userBody .library_card_item .review_point_wrap{margin-top:4px;} #userBody .library_card_item .review_point_star_wrap{width:80px;height:16px;position:relative;margin-right:4px;} #userBody .library_card_item .review_point_star_wrap .background{position:absolute;top:0;left:0;z-index:1;} #userBody .library_card_item .review_point_star_wrap .foreground{position:absolute;top:0;left:0;z-index:2;} #userBody .library_card_item .review_point_star_wrap .review_point_star{height:16px;} #userBody .library_card_item .review_point_wrap .review_point_text{line-height:16px;vertical-align:top;} #userBody .library_card_item .sort_info_wrap{overflow:hidden;margin-top:9px;height:18px;line-height:18px;} #userBody .library_card_item .sort_info_wrap .sort_info_item{margin-right:4px;background:#ebeff8;border-radius:9px;padding:0 8px;} #userBody .library_card_item .cnt_wrap{line-height:18px;margin-top:10px;} #userBody .library_card_item .cnt_wrap .cnt_item{padding:0 12px;border-right:solid 1px #ebeff8;cursor:pointer;} #userBody .library_card_item .cnt_wrap .cnt_item:first-child{padding-left:0;} #userBody .library_card_item .cnt_wrap .cnt_item:last-child{padding-right:0;border-right:none;} #userBody .library_card_item .cnt_wrap .cnt_item img{height:18px;margin-right:2px;} #userBody .library_card_item .cnt_wrap .cnt_item.input_select_box{line-height:18px;} #userBody .library_card_item .cnt_wrap .cnt_item.input_select_box .select_option_wrap{width:230px;} #userBody .library_card_item .cnt_wrap .cnt_item.input_select_box .select_option_wrap img{margin-top:13px;} #userBody .library_card_item .cnt_wrap .option_button{float:right;height:18px;width:18px;cursor:pointer;margin-right:3px;} #userBody .library_card_item .cnt_wrap .option_button:hover{border-radius:9px;background:#ebeff8;box-shadow: 0 0 0 4px #ebeff8;} #userBody .library_card_item .cnt_wrap .option_button .option_image{height:18px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userBody .library_card_item{margin-right:calc(33% - 185px);} .mobile_width #userBody .library_card_item:nth-child(3n){margin-right:calc(33% - 185px);} .mobile_width #userBody .library_card_item:nth-child(2n-1){margin-left:calc(33% - 205px);} .mobile_width #userBody .library_card_item:nth-child(2n){margin-right: calc(33% - 205px);} } #userBody .library_mobile_list_item{width:100%;border-top:solid 8px #ebeff8;} #userBody .library_mobile_list_item:last-child{border-bottom:solid 8px #ebeff8;} #userBody .library_mobile_list_item .upper_info{padding:12px 12px 12px 16px;} #userBody .library_mobile_list_item .cover_image{vertical-align:top;margin-right:16px;width:80px;height:80px;border-radius:8px;background-size:cover;background-position:center;position:relative;} #userBody .library_mobile_list_item .cover_image .sync_platform_icon{height:16px;position:absolute;right:4px;top:4px;} #userBody .library_mobile_list_item .cover_image .sync_platform_icon:nth-child(2){top:22px;} #userBody .library_mobile_list_item .cover_image .sync_platform_icon:nth-child(3){top:40px;} #userBody .library_mobile_list_item .text_wrap{vertical-align:top;width:calc(100% - 96px);} #userBody .library_mobile_list_item .text_wrap .game_name{line-height:22px;max-width:calc(100% - 24px);} #userBody .library_mobile_list_item .text_wrap .game_name .mobile_icon_new{height:20px;margin-top:1px;margin-right:2px;} #userBody .library_mobile_list_item .text_wrap .game_name .library_open_state{height:20px;margin-top:1px;margin-right:1px;} #userBody .library_mobile_list_item .text_wrap .library_state_button_wrap{float:right;vertical-align:top;} #userBody .library_mobile_list_item .text_wrap .library_state_button_wrap .library_state_button_square{height:24px;} #userBody .library_mobile_list_item .review_point_wrap{margin-top:3px;} #userBody .library_mobile_list_item .review_point_star_wrap{width:70px;height:14px;position:relative;margin-right:4px;margin-top:2px;} #userBody .library_mobile_list_item .review_point_star_wrap .background{position:absolute;top:0;left:0;z-index:1;} #userBody .library_mobile_list_item .review_point_star_wrap .foreground{position:absolute;top:0;left:0;z-index:2;} #userBody .library_mobile_list_item .review_point_star_wrap .review_point_star{height:14px;} #userBody .library_mobile_list_item .review_point_wrap .review_point_text{line-height:18px;vertical-align:top;} #userBody .library_mobile_list_item .sort_info_wrap{overflow:hidden;margin-top:16px;height:18px;line-height:18px;width:calc(100% - 22px);display:inline-block;} #userBody .library_mobile_list_item .sort_info_wrap .sort_info_item{margin-right:4px;background:#ebeff8;border-radius:9px;padding:0 8px;} #userBody .library_mobile_list_item .option_button{float:right;height:18px;width:18px;cursor:pointer;margin-right:3px;margin-top:16px;} #userBody .library_mobile_list_item .option_button:hover{border-radius:9px;background:#ebeff8;box-shadow: 0 0 0 4px #ebeff8;} #userBody .library_mobile_list_item .option_button .option_image{height:18px;} #userBody .library_mobile_list_item .cnt_wrap{border-top:solid 1px #ebeff8;line-height:18px;padding:8px 0 10px 0;text-align:center;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item{border-right:solid 1px #ced8e5;height:18px;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item:last-child{border-right:none;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.cnt_1{width:100%;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.cnt_2{width:50%;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.cnt_3{width:33%;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.cnt_3:nth-child(2){width:34%;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item img{height:18px;margin-right:2px;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.input_select_box{line-height:18px;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.input_select_box .select_option_wrap{width:230px;} #userBody .library_mobile_list_item .cnt_wrap .cnt_item.input_select_box .select_option_wrap img{margin-top:13px;} #userBody .library_grid_item{width:calc(33vw - 22px);height:calc(33vw - 22px);vertical-align:top;margin-top:12px;margin-bottom:12px;position:relative;} #userBody .library_grid_item:nth-child(3n + 1){margin-left:15px;margin-right:9px;} #userBody .library_grid_item:nth-child(3n + 2){margin-left:9px;margin-right:9px;} #userBody .library_grid_item:nth-child(3n){margin-left:9px;margin-right:15px;} #userBody .library_grid_item .cover_image{width:100%;height:100%;border-radius:13px;background-size:cover;background-position:center;position:relative;} #userBody .library_grid_item .cover_image .sync_platform_icon{height:14px;position:absolute;right:6px;top:6px;} #userBody .library_grid_item .cover_image .sync_platform_icon:nth-child(2){top:22px;} #userBody .library_grid_item .cover_image .sync_platform_icon:nth-child(3){top:38px;} #userBody .library_grid_item .library_star_button_wrap{position:absolute;right:17px;bottom:-8px;} #userBody .library_grid_item .library_star_button_wrap .library_star_button{width:46px;height:24px;background-size:cover;background-position:center;line-height:23px;text-align:center;user-select:none;padding-left:13px;} #userBody .library_grid_item .library_state_button_wrap{position:absolute;right:-6px;bottom:-8px;} #userBody .library_grid_item .library_state_button_wrap .library_state_button_square{height:24px;} #userBody .library_list_teble_wrap{} #userBody .library_list_table{} #userBody .library_list_table .title_row{line-height:18px;text-align:center;} #userBody .library_list_table .table_col{cursor:pointer;} #userBody .library_list_table .table_col.selected{color:#3f9dff;} #userBody .library_list_table .table_col.game_name{width:calc(100% - 518px);} #userBody .library_list_table .table_col.game_name.my_page{width:calc(100% - 536px);} #userBody .library_list_table .table_col.achievement_sync{width:78px;} #userBody .library_list_table .table_col.achievement_cnt{width:80px;} #userBody .library_list_table .table_col.post_cnt{width:80px;} #userBody .library_list_table .table_col.review_point{width:80px;} #userBody .library_list_table .table_col.library_state{width:110px;} #userBody .library_list_table .table_col.review_length{width:90px;} #userBody .library_list_table .table_col.option_button_col{width:18px;} #userBody .library_list_table .list_wrap.empty_list{min-height:500px;} #userBody .library_list_table .library_item_row{height:72px;padding:12px 0;border-bottom:solid 1px #ebeff8;text-align:center;} #userBody .library_list_table .library_item_row:last-child{border-bottom:none;} #userBody .library_list_table .library_item_row .cover_image{cursor:pointer;width:48px;height:48px;border-radius:8px;margin-right:12px;background-size:cover;background-position:center;} #userBody .library_list_table .library_item_row .text_wrap{width:calc(100% - 500px);vertical-align:top;} #userBody .library_list_table .library_item_row .text_wrap.my_page{width:calc(100% - 518px);} #userBody .library_list_table .library_item_row .text_wrap.has_sync{width:calc(100% - 578px);} #userBody .library_list_table .library_item_row .text_wrap.my_page.has_sync{width:calc(100% - 596px);} #userBody .library_list_table .library_item_row .text_wrap{line-height:48px;text-align:left;height:48px;} #userBody .library_list_table .library_item_row .text_wrap.multi_text{line-height:20px;} #userBody .library_list_table .library_item_row .text_wrap .game_name_wrap{vertical-align:top;height:48px;} #userBody .library_list_table .library_item_row .text_wrap .game_name{cursor:pointer;max-width:100%;} #userBody .library_list_table .library_item_row .text_wrap .game_name .mobile_icon_new{height:20px;margin-top:14px;margin-right:1px;} #userBody .library_list_table .library_item_row .text_wrap .game_name .library_open_state{height:20px;margin-top:14px;margin-right:2px;} #userBody .library_list_table .library_item_row .text_wrap.multi_text .game_name_wrap{height:20px;margin-top:1px;} #userBody .library_list_table .library_item_row .text_wrap.multi_text .game_name .mobile_icon_new{margin-top:0px;} #userBody .library_list_table .library_item_row .text_wrap.multi_text .game_name .library_open_state{margin-top:0px;} #userBody .library_list_table .library_item_row .text_wrap.multi_text .sort_info_wrap{margin-top:5px;overflow:hidden;height:20px;} #userBody .library_list_table .library_item_row .text_wrap.multi_text .sort_info_wrap .sort_info_item{margin-right:4px;background:#ebeff8;line-height:18px;border-radius:9px;padding:0 8px;} #userBody .library_list_table .library_item_row .sync_platform_wrap{width:78px;height:48px;vertical-align:top;} #userBody .library_list_table .library_item_row .sync_platform_wrap .sync_platform_icon{height:16px;margin-top:16px;margin-right:2px;cursor:pointer;} #userBody .library_list_table .library_item_row .sync_platform_wrap .sync_platform_icon:last-child{margin-right:0px;} #userBody .library_list_table .library_item_row .achievement_cnt{cursor:pointer;width:80px;vertical-align:top;line-height:48px;} #userBody .library_list_table .library_item_row .achievement_cnt img{height:16px;margin-top:16px;margin-right:2px;} #userBody .library_list_table .library_item_row .cnt_item{line-height:48px;} #userBody .library_list_table .library_item_row .cnt_item.input_select_box .select_option_wrap{width:230px;text-align:left;} #userBody .library_list_table .library_item_row .cnt_item.input_select_box .select_option_wrap img{margin-top:13px;} #userBody .library_list_table .library_item_row .post_cnt{cursor:pointer;width:80px;vertical-align:top;line-height:48px;} #userBody .library_list_table .library_item_row .post_cnt img{height:16px;margin-top:16px;margin-right:2px;} #userBody .library_list_table .library_item_row .review_point{width:80px;vertical-align:top;line-height:48px;} #userBody .library_list_table .library_item_row .review_point img{height:16px;margin-top:16px;margin-right:2px;} #userBody .library_list_table .library_item_row .library_state{width:110px;vertical-align:top;line-height:48px;} #userBody .library_list_table .library_item_row .library_state.state_1{color:#3f9dff;} #userBody .library_list_table .library_item_row .library_state.state_2{color:#00b597;} #userBody .library_list_table .library_item_row .library_state.state_3{color:#e75f5b;} #userBody .library_list_table .library_item_row .library_state.state_4{color:#3b4757;} #userBody .library_list_table .library_item_row .library_state.state_5{color:#f99b00;} #userBody .library_list_table .library_item_row .library_state img{height:16px;margin-top:16px;margin-right:2px;} #userBody .library_list_table .library_item_row .review_length{width:90px;vertical-align:top;line-height:48px;} #userBody .library_list_table .library_item_row .review_length .review_length_button{cursor:pointer;} #userBody .library_list_table .library_item_row .option_button_col{width:26px;} #userBody .library_list_table .library_item_row .option_button{vertical-align:top;margin-top:15px;height:18px;width:18px;cursor:pointer;} #userBody .library_list_table .library_item_row .option_button:hover{border-radius:9px;background:#ebeff8;box-shadow: 0 0 0 4px #ebeff8;} #userBody .library_list_table .library_item_row .option_button .option_image{height:18px;} #userBody .library_list_teble_wrap .page_wrap{margin-top:54px;} /******** 정렬 popup */ #librarySortPopup{width:100vw;height:auto;background:#FFF;border-top-left-radius:13px;border-top-right-radius:13px;padding:16px 16px 0 16px;} #librarySortPopup .title{line-height:24px;padding-bottom:16px;border-bottom:solid 1px #ebeff8;} #librarySortPopup .title .close_button{float:right;height:20px;vertical-align:top;margin-top:2px;} #librarySortPopup .sort_item_list{max-height:300px;overflow:auto;padding-bottom:16px;} #librarySortPopup .select_option{padding:11px 0 13px 0;} #librarySortPopup .select_option .sort_text{line-height:24px;} #librarySortPopup .select_option .sort_text_w_info{line-height:22px;} #librarySortPopup .select_option .sort_text .selected_check{float:right;height:20px;vertical-align:top;margin-top:2px;} #librarySortPopup .select_option .sort_text_w_info .selected_check{float:right;height:20px;vertical-align:top;margin-top:1px;} #librarySortPopup .select_option .info_text{line-height:18px;} #librarySortPopup .divider{width:100%;height:1px;background:#ebeff8;} /******** 필터 popup */ #popupName_libraryFilter .mobile_popup_title_bar{display:block !important;} #libraryFilterPopup{width:100vw;min-height:calc(100vh - 44px);background:#FFF;padding-top:44px;} @media only screen and (max-width:600px) { #libraryFilterPopup{padding-top:0;} } #libraryFilterPopup .search_input{width:100%;height:82px;background:#FFF;position:relative;padding:12px 16px 20px 16px;} #libraryFilterPopup .search_input .search_icon{height:24px;position:absolute;left:32px;top:25px;} #libraryFilterPopup .search_input .write_search_input{appearance:none;height:50px;width:100%;background:#FFF;border-radius:25px;box-shadow:0 4px 10px 6px rgba(3, 24, 39, 0.07);padding-left:46px;padding-right:40px;font-size:15px} #libraryFilterPopup .search_input .write_search_input::placeholder{color:#b2bdce;} #libraryFilterPopup .search_input .input_cancel{top:19px;right:24px;} #libraryFilterPopup .filter_body{padding:4px 16px 100px 16px;} #libraryFilterPopup .filter_body .filter_item{border-bottom:solid 1px #ebeff8;margin-top:20px;padding-bottom:12px;} #libraryFilterPopup .filter_body .filter_item:first-child{margin-top:0px;} #libraryFilterPopup .filter_body .filter_item:last-child{border-bottom:none;} #libraryFilterPopup .filter_body .filter_item .filter_title{line-height:20px;} #libraryFilterPopup .filter_body .filter_item .reset_button{float:right;display:none} #libraryFilterPopup .filter_body .filter_item.has_value .reset_button{display:inline-block;} #libraryFilterPopup .filter_body .select_option_item_list{margin-top:12px;} #libraryFilterPopup .filter_body .select_option_item{position:relative;vertical-align:top;cursor:pointer;width:calc(20% - 7px);height:52px;padding:6px 0;background:#ebeff8;margin-right:8px;border-radius:8px;text-align:center;margin-bottom:8px;border:solid 2px transparent;} #libraryFilterPopup .filter_body .select_option_item:nth-child(5n){margin-right:0;} #libraryFilterPopup .filter_body .select_option_item:last-child{margin-right:0;} #libraryFilterPopup .filter_body .has_review_filter .select_option_item{width:calc(50% - 4px);} #libraryFilterPopup .filter_body .open_state_filter .select_option_item{width:calc(50% - 4px);} #libraryFilterPopup .filter_body .open_state_filter .select_option_item.triple_item{width:calc(33% - 5px);} #libraryFilterPopup .filter_body .open_state_filter .select_option_item.triple_item:nth-child(2){width:calc(34% - 6px);} #libraryFilterPopup .filter_body .select_option_item.selected{border:solid 2px #3f9dff;} #libraryFilterPopup .filter_body .select_option_item.single_item{width:100%;margin-right:0;} #libraryFilterPopup .filter_body .select_option_item.disable_item{opacity:0.2;cursor:auto;} #libraryFilterPopup .filter_body .select_option_item .check_mark{display:none;position:absolute;top:-6px;right:-6px;height:18px;width:18px;padding:2px;background:#3f9dff;border-radius:9px;} #libraryFilterPopup .filter_body .select_option_item.selected .check_mark{display:block;} #libraryFilterPopup .filter_body .select_option_item .item_title{line-height:19px;} #libraryFilterPopup .filter_body .select_option_item .item_cnt{line-height:17px;} #libraryFilterPopup .filter_body .select_option_list_item_list{margin-top:4px;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item{line-height:20px;height:36px;padding:8px 0;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item.disable_item{opacity:0.2;cursor:auto;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item .check_wrap{vertical-align:top;margin:1px 8px 0 0;width:18px;height:18px;border-radius:9px;border:solid 1px #95a3b8;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item .check_mark{display:none;height:16px;width:16px;background:#3f9dff;border-radius:8px;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item.selected .check_wrap{border:solid 1px #3f9dff;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item.selected .check_mark{display:block;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item .state_icon{height:16px;margin:2px 4px 0 0;} #libraryFilterPopup .filter_body .select_option_list_item_list .select_option_list_item .item_cnt{float:right;} #libraryFilterPopup .filter_body .select_option_radio_list{margin-top:4px;} #libraryFilterPopup .filter_body .select_option_radio_list .select_option_radio_item{line-height:20px;height:36px;padding:8px 0;} #libraryFilterPopup .filter_body .select_option_radio_list .select_option_radio_item.disable_item{opacity:0.2;} #libraryFilterPopup .filter_body .select_option_radio_list .select_option_radio_item .radio_mark{vertical-align:top;margin-top:1px;margin-right:8px;height:18px;width:18px;border:solid 1px #95a3b8;border-radius:9px;} #libraryFilterPopup .filter_body .select_option_radio_list .select_option_radio_item.selected .radio_mark{border:solid 5px #3f9dff;} #libraryFilterPopup .filter_body .select_option_radio_list .select_option_radio_item .item_cnt{float:right;} #libraryFilterPopup .filter_body .select_option_tag_list{margin-top:12px;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag{position:relative;vertical-align:top;cursor:pointer;height:32px;padding:0 12px;background:#ebeff8;margin-right:6px;border-radius:16px;text-align:center;margin-bottom:8px;border:solid 2px transparent;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag.selected{border:solid 2px #3f9dff;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag.disable_item{opacity:0.2;cursor:auto;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag .check_mark{display:none;position:absolute;top:-6px;right:-6px;height:18px;width:18px;padding:2px;background:#3f9dff;border-radius:9px;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag.selected .check_mark{display:block;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag .tag_name{line-height:28px;} #libraryFilterPopup .filter_body .select_option_tag_list .select_option_tag .item_cnt{margin-left:2px;} #libraryFilterPopup .footer{width:100%;height:55px;position:fixed;left:0;bottom:0;background:#FFF;} #libraryFilterPopup .footer .shadow_gradation{width:100%;height:28px;position:absolute;left:0;top:-28px;background:linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(239, 241, 245, 0.9) 100%);} #libraryFilterPopup .footer .button_wrap{padding:9px 16px 10px 16px;} #libraryFilterPopup .footer .button_wrap .btn_r{width:calc(50% - 16px);margin-right:16px;} #libraryFilterPopup .footer .button_wrap .btn_r:last-child{margin-right:0px;} /* #userBody .library_list_table .library_item_row:last-child{height:60px;border-bottom:none;} #userBody .library_list_table .library_item_row .edit_cover{position:absolute;width:420px;height:100%;background:rgba(255,255,255,0.5);right:0;top:0;opacity:0;z-index:5;} #userBody .library_list_table .library_item_row .edit_cover:hover{opacity:1;} #userBody .library_list_table .library_item_row .edit_cover .modify_button{margin:12px auto 0 auto;} #userBody .library_list_table .library_item_row .edit_cover .modify_button img{height:18px;vertical-align:top;margin:6px 4px 0 0;} #userBody .library_list_table .library_item_row .table_col{vertical-align:top;} #userBody .library_list_table .library_item_row .select_check .checkmark{top:23px;} #userBody .library_list_table .library_item_row .cover_image{width:60px;height:60px;} #userBody .library_list_table .library_item_row .game_name_company{width:calc(100% - 570px);padding-left:10px;line-height:0;text-align:left;} #userBody .library_list_table .library_item_row .game_name_company.my_game{width:calc(100% - 600px);} #userBody .library_list_table .library_item_row .game_name_company .name_kor{line-height:22px;width:100%;margin-top:9px;} #userBody .library_list_table .library_item_row .game_name_company .library_open_state{height:22px;vertical-align:top;padding:1px 0;} #userBody .library_list_table .library_item_row .game_name_company .company{line-height:18px;width:100%;margin-top:2px;} #userBody .library_list_table .library_item_row .review_point_star{height:16px;vertical-align:top;margin:22px 0;} #userBody .library_list_table .library_item_row .compact_review_point{display:none;} #userBody .library_list_table .library_item_row .state .library_state_image{height:24px;margin-top:18px;} #userBody .library_list_table .library_item_row .modify_time .short_date{display:none;} #userBody .library_list_teble_wrap .page_wrap{margin-top:10px;} #userBody .library_list_teble_wrap .page_wrap .result_page{padding:24px 0;text-align:center;line-height:20px;user-select:none;} #userBody .library_list_teble_wrap .page_wrap .result_page span{min-width:40px;padding:8px 6px;cursor:pointer;} #userBody .library_list_teble_wrap .page_wrap .result_page .selected{color:#21A8AF;} @media only screen and (max-width:1000px) and (min-width:700px) { .mobile_width #userBody .library_list_table .table_col.game_name{width:calc(100% - 430px);} .mobile_width #userBody .library_list_table .table_col.game_name.my_game{width:calc(100% - 470px);} .mobile_width #userBody .library_list_table .table_col.release_date{width:70px;} .mobile_width #userBody .library_list_table .table_col.review_length{width:70px;} .mobile_width #userBody .library_list_table .table_col.platform{width:70px;} .mobile_width #userBody .library_list_table .table_col.modify_time{width:70px;} .mobile_width #userBody .library_list_table .library_item_row .game_name_company{width:calc(100% - 490px);} .mobile_width #userBody .library_list_table .library_item_row .game_name_company.my_game{width:calc(100% - 530px);} .mobile_width #userBody .library_list_table .library_item_row .game_name_company .name_kor{font-size:14px;} .mobile_width #userBody .library_list_table .library_item_row .modify_time .full_date{display:none;} .mobile_width #userBody .library_list_table .library_item_row .modify_time .short_date{display:inline-block;} } @media only screen and (max-width:699px) and (min-width:600px) { .mobile_width #userBody .library_list_table .table_col.game_name{width:calc(100% - 390px);} .mobile_width #userBody .library_list_table .table_col.game_name.my_game{width:calc(100% - 430px);} .mobile_width #userBody .library_list_table .table_col.release_date{width:70px;} .mobile_width #userBody .library_list_table .table_col.review_length{width:70px;} .mobile_width #userBody .library_list_table .table_col.platform{width:70px;} .mobile_width #userBody .library_list_table .table_col.review_point{width:60px;} .mobile_width #userBody .library_list_table .table_col.modify_time{width:70px;} .mobile_width #userBody .library_list_table .library_item_row .review_point{display:none;} .mobile_width #userBody .library_list_table .library_item_row .compact_review_point{display:inline-block;width:60px;} .mobile_width #userBody .library_list_table .library_item_row .game_name_company{width:calc(100% - 450px);} .mobile_width #userBody .library_list_table .library_item_row .game_name_company.my_game{width:calc(100% - 490px);} .mobile_width #userBody .library_list_table .library_item_row .game_name_company .name_kor{font-size:14px;} .mobile_width #userBody .library_list_table .library_item_row .modify_time .full_date{display:none;} .mobile_width #userBody .library_list_table .library_item_row .modify_time .short_date{display:inline-block;} } */ @media only screen and (max-width:599px) { #userBody .library_list_teble_wrap{margin-top:0px;} #userBody .library_modify_wrap{display:none;} #userBody .library_list_table{margin:0;padding:0;} #userBody .library_list_table .table_col.select_check{display:none;} #userBody .library_list_table .table_col.game_name{width:calc(100% - 140px);} #userBody .library_list_table .table_col.game_name.my_game{width:calc(100% - 140px);} #userBody .library_list_table .table_col.release_date{width:80px;} #userBody .library_list_table .table_col.review_length{width:80px;} #userBody .library_list_table .table_col.platform{width:80px;} #userBody .library_list_table .table_col.review_point{width:80px;} #userBody .library_list_table .table_col.state{width:60px;} #userBody .library_list_table .table_col.modify_time{width:80px;} #userBody .library_list_table .library_item_row .game_name_company{width:calc(100% - 200px);padding-left:10px;} #userBody .library_list_table .library_item_row .game_name_company.my_game{width:calc(100% - 200px);} #userBody .library_list_table .library_item_row .review_point{display:none;} #userBody .library_list_table .library_item_row .compact_review_point{display:inline-block;width:80px;} #userBody .library_list_table .library_item_row .modify_time .full_date{display:none;} #userBody .library_list_table .library_item_row .modify_time .short_date{display:inline-block;} } #userBody .library_rate_item{width:552px;height:176px;padding:20px 20px 16px 76px;margin:0 0 12px 80px;border-radius:13px;position:relative;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);} #userBody .library_rate_item:last-child{margin-bottom:0px;} #userBody .library_rate_item .cover_image_wrap{cursor:pointer;width:136px;height:136px;position:absolute;left:-80px;top:20px;} #userBody .library_rate_item .cover_image_background{filter:blur(18px) brightness(0.85);position:absolute;top:22px;left:5px;width:calc(100% - 10px);height:calc(100% - 20px);border-radius:13px;background-size:cover;background-position:center;background-color:#FFF;} #userBody .library_rate_item .cover_image{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:13px;background-size:cover;background-position:center;background-color:#FFF;} #userBody .library_rate_item .cover_image .sync_platform_icon{height:22px;position:absolute;right:12px;top:12px;} #userBody .library_rate_item .cover_image .sync_platform_icon:nth-child(2){top:38px;} #userBody .library_rate_item .cover_image .sync_platform_icon:nth-child(3){top:64px;} #userBody .library_rate_item .game_name_wrap{line-height:24px;} #userBody .library_rate_item .game_name_wrap .game_name{vertical-align:top;max-width:calc(100% - 20px);cursor:pointer;} #userBody .library_rate_item .game_name_wrap .game_name .mobile_icon_new{height:20px;margin-top:2px;margin-right:1px;} #userBody .library_rate_item .game_name_wrap .game_name .library_open_state{height:20px;margin-top:2px;margin-right:2px;} #userBody .library_rate_item .game_name_wrap .option_button{float:right;vertical-align:top;margin-top:3px;height:18px;width:18px;cursor:pointer;} #userBody .library_rate_item .game_name_wrap .option_button:hover{border-radius:9px;background:#ebeff8;box-shadow: 0 0 0 4px #ebeff8;} #userBody .library_rate_item .game_name_wrap .option_button .option_image{height:18px;} #userBody .library_rate_item .library_info_wrap{height:21px;margin-top:9px;} #userBody .library_rate_item .library_info_wrap .short_review_point{height:21px;line-height:19px;border:solid 1px #3f9dff;border-radius:4px;padding:0 4px;} #userBody .library_rate_item .library_info_wrap .short_review_point.no_review_point{border:solid 1px #b2bdce;} #userBody .library_rate_item .library_info_wrap .short_review_point img{height:15px;vertical-align:top;margin:2px 2px 0 0;} #userBody .library_rate_item .library_info_wrap .library_state_info{height:21px;line-height:19px;border:solid 1px;border-radius:4px;padding:0 4px;margin-left:4px;} #userBody .library_rate_item .library_info_wrap .library_state_info img{height:15px;vertical-align:top;margin:2px 2px 0 0;} #userBody .library_rate_item .library_info_wrap .library_state_info.state_color_0{border-color:#b2bdce;color:#b2bdce;} #userBody .library_rate_item .library_info_wrap .library_state_info.state_color_1{border-color:#3f9dff;color:#3f9dff;} #userBody .library_rate_item .library_info_wrap .library_state_info.state_color_2{border-color:#00c2a8;color:#00c2a8;} #userBody .library_rate_item .library_info_wrap .library_state_info.state_color_3{border-color:#ec5245;color:#ec5245;} #userBody .library_rate_item .library_info_wrap .library_state_info.state_color_4{border-color:#3b4757;color:#3b4757;} #userBody .library_rate_item .library_info_wrap .library_state_info.state_color_5{border-color:#f99b00;color:#f99b00;} #userBody .library_rate_item .quick_action_wrap{height:30px;margin-top:16px;line-height:30px;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap{display:inline-block;position:relative;width:190px;height:30px;margin-right:50px;vertical-align:top;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .background{position:absolute;top:0;left:40px;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .foreground{position:absolute;top:0;left:40px;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .review_point_star{height:30px;vertical-align:top;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .drag_area{position:absolute;width:165px;height:30px;top:0;left:25px;cursor:pointer;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap{display:inline-block;position:relative;width:calc(100% - 240px);height:30px;vertical-align:top;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .state_button_wrap{float:right;vertical-align:top;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_button_item{width:32px;height:28px;position:relative;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_button_item .library_state_button{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;cursor:pointer;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_button_item .background{width:28px;height:28px;border-radius:14px;background:#ebeff8;position:absolute;top:0px;left:2px;z-index:1;overflow:hidden;transition:background 0.1s linear;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_button_item .background .selected_background{width:80px;height:80px;border-radius:40px;position:absolute;top:-24px;left:-24px;transform:scale(0);transition:transform 0.1s linear;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_button_item.selected .selected_background{transform:scale(1);transition:transform 0.25s linear;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_button_item .state_icon{position:absolute;height:14px;top:7px;left:9px;z-index:5;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_1:hover .background{background:#bfe1ff;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_2:hover .background{background:#adeae1;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_3:hover .background{background:#fbd0d4;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_4:hover .background{background:#ced8e5;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_5:hover .background{background:#fff5bd;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_1 .selected_background{background:#3f9dff;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_2 .selected_background{background:#00b597;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_3 .selected_background{background:#e75f5b;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_4 .selected_background{background:#3b4757;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .library_state_5 .selected_background{background:#f99b00;} #userBody .library_rate_item .divider{width:100%;height:1px;background:#ebeff8;margin-top:11px;} #userBody .library_rate_item .review_info_wrap{line-height:18px;margin-top:10px;} #userBody .library_rate_item .review_info_wrap .write_review_button{float:right;cursor:pointer;} #userBody .library_rate_item .review_info_wrap .write_review_2{width:42px;vertical-align:top;} #userBody .library_rate_item .review_info_wrap .review_content{width:calc(100% - 140px);vertical-align:top;} #userBody .library_rate_item .review_info_wrap .review_button_wrap{float:right;vertical-align:top;} #userBody .library_rate_item .review_info_wrap .modify_review_button{vertical-align:top;cursor:pointer;} #userBody .library_rate_item .review_info_wrap .modify_review_button img{height:16px;margin:1px 1px 0 0;} #userBody .library_rate_item .review_info_wrap .view_review_button{margin-left:16px;vertical-align:top;cursor:pointer;} @media only screen and (max-width:599px) { #userBody .library_rate_item{width:100%;height:253px;padding:16px 16px 12px 16px;margin:0;border-radius:0px;box-shadow:none;border-bottom:solid 8px #ebeff8;} #userBody .library_rate_item .cover_image_wrap{display:inline-block;margin-right:16px;vertical-align:top;width:80px;height:80px;position:relative;left:auto;top:auto;} #userBody .library_rate_item .cover_image .sync_platform_icon{height:14px;right:6px;top:6px;} #userBody .library_rate_item .cover_image .sync_platform_icon:nth-child(2){top:22px;} #userBody .library_rate_item .cover_image .sync_platform_icon:nth-child(3){top:38px;} #userBody .library_rate_item .text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 96px);padding-top:3px;} #userBody .library_rate_item .quick_action_wrap{height:auto;line-height:32px;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap{display:block;width:100%;height:32px;margin-right:0px;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .background{left:auto;right:0;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .foreground{left:calc(100% - 160px);} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .review_point_star{height:32px;} #userBody .library_rate_item .quick_action_wrap .review_point_wrap .drag_area{width:176px;height:32px;left:auto;right:0;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap{display:block;width:100%;height:30px;line-height:30px;margin-top:12px;} #userBody .library_rate_item .quick_action_wrap .game_state_wrap .state_button_wrap{float:right;vertical-align:top;} #userBody .library_rate_item .divider{margin-top:16px;} } #userBody .no_result_divider{border-bottom:solid 1px #D8D8D8;margin:30px 0 30px 0;} #userBody .no_result_recommend_game_wrap .recommend_game_item{margin-right:40px;display:inline-block;box-shadow:0 2px 4px 0 #d8d8d8;cursor:pointer;} #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(5n){margin-right:0px;} #userBody .feed_list .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} #userBody .feed_footer .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .cover_image{width:160px;height:156px;background:#FFF;} #userBody .no_result_recommend_game_wrap .recommend_game_item .library_info{width:160px;height:68px;padding:10px;background:#FFF;border-top:solid 1px #D8D8D8;} #userBody .no_result_recommend_game_wrap .recommend_game_item .game_name{line-height:20px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .compact_review_point{margin-top:8px;line-height:18px;display:inline-block;} #userBody .no_result_recommend_game_wrap .recommend_game_item .compact_review_point img{height:18px;vertical-align:top;} #userBody .no_result_recommend_game_wrap .recommend_game_item .compact_review_point .review_point_value{margin-left:4px;} @media only screen and (max-width:999px) and (min-width:890px) { .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item{margin-right:calc(25% - 200px);} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(5n){margin-right:0px;} .mobile_width #userBody .feed_list .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} .mobile_width #userBody .feed_footer .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} } @media only screen and (max-width:889px) and (min-width:750px) { .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item{margin-right:calc(33% - 213px);} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(5n){margin-right:calc(33% - 212px);} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(4n){margin-right:0px;} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(n+5){display:none;} .mobile_width #userBody .feed_list .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} .mobile_width #userBody .feed_footer .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} } @media only screen and (max-width:749px) and (min-width:600px) { .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item{margin-right:calc(50% - 240px);} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(5n){margin-right:calc(50% - 240px);} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(3n){margin-right:0px;} .mobile_width #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(n+4){display:none;} .mobile_width #userBody .feed_list .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} .mobile_width #userBody .feed_footer .no_result_recommend_game_wrap .recommend_game_item{margin-right:0px;margin:0px 20px;} } @media only screen and (max-width:599px) { #userBody .no_result_recommend_game_wrap .recommend_game_item{margin-right:16px;} #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(5n){margin-right:16px;} #userBody .no_result_recommend_game_wrap .recommend_game_item:first-child{margin-left:16px;} #userBody .no_result_recommend_game_wrap .recommend_game_item:nth-child(n+4){display:none;} #userBody .feed_list .no_result_recommend_game_wrap .recommend_game_item{margin-right:16px;margin-left:0px;} #userBody .feed_list .no_result_recommend_game_wrap .recommend_game_item:first-child{margin-left:16px;} #userBody .feed_footer .no_result_recommend_game_wrap .recommend_game_item{margin-right:16px;margin-left:0px;} #userBody .feed_footer .no_result_recommend_game_wrap .recommend_game_item:first-child{margin-left:16px;} #userBody .library_list_table .recommend_game_item:first-child{margin-left:0px;} #userBody .library_list_table .recommend_game_item:nth-child(3){margin-right:0px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .cover_image{width:calc(33vw - 21px);height:calc(33vw - 21px);} #userBody .no_result_recommend_game_wrap .recommend_game_item .library_info{width:calc(33vw - 21px);height:47px;padding:6px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .game_name{line-height:16px;font-size:12px;font-weight:400;letter-spacing:0px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .compact_review_point{margin-top:0px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .compact_review_point img{height:14px;margin-top:2px;} #userBody .no_result_recommend_game_wrap .recommend_game_item .compact_review_point .review_point_value{margin-left:2px;} } /**************************************************************** * 라이브러리 필터 ****************************************************************/ #libraryFilterDropdown{position:absolute;z-index:1000;} #libraryFilterDropdown .filter_button_cover{width:105px;height:50px;position:absolute;top:0;right:0;background:#FFF;border-radius:2px;box-shadow:1px 1px 4px 2px rgba(0, 0, 0, 0.2);z-index:1;} #libraryFilterDropdown .filter_button{width:108px;position:absolute;top:0;right:0;line-height:58px;border-radius:2px;z-index:3;} #libraryFilterDropdown .filter_button .filter_image{height:32px;padding:4px 6px;vertical-align:top;margin-top:13px;} #libraryFilterDropdown .filter_button .expand_image{height:32px;padding:10px 20px 10px 10px;vertical-align:top;transform:rotate(180deg);margin-top:13px;} #libraryFilterDropdown .filter_background{background:#FFF;position:absolute;width:105px;height:24px;right:0px;top:36px;z-index:2;} #libraryFilterDropdown .filter_list{min-width:190px;height:315px;background:#FFF;box-shadow:1px 1px 4px 2px rgba(0, 0, 0, 0.2);border-radius:2px;position:absolute;top:50px;right:0px;z-index:1;} #libraryFilterDropdown .search_wrap{width:100%;padding:20px 30px;} #libraryFilterDropdown .search_wrap .search_icon{position:absolute;height:24px;top:25px;left:35px;} #libraryFilterDropdown .search_wrap .input_cancel{top:20px;right:32px;} #libraryFilterDropdown .search_wrap .input_text{padding-left:32px;padding-right:32px;width:100%;} #libraryFilterDropdown .filter_group_list_wrap{max-width:960px;overflow-y:hidden;overflow-x:auto;} #libraryFilterDropdown .filter_group_list{padding:0 30px;width:max-content;vertical-align:top;} #libraryFilterDropdown .filter_group_item{display:inline-block;min-width:80px;vertical-align:top;margin-right:30px;} #libraryFilterDropdown .filter_group_item:last-child{margin-right:0px;} #libraryFilterDropdown .filter_group_item .title{line-height:24px;} #libraryFilterDropdown .filter_group_item .checkbox_list{margin-top:12px;} #libraryFilterDropdown .filter_group_item .check_label{line-height:24px;margin-top:6px;display:block;} #libraryFilterDropdown .filter_group_item .check_label:first-child{margin-top:0px;} #libraryFilterDropdown .filter_group_item .check_label .checkmark{margin-top:6px;} #libraryFilterDropdown .filter_group_item .check_label .state_image{height:24px;padding:2px 0px;vertical-align:top;margin-right:4px;} #libraryFilterDropdown .filter_group_item .check_label .review_point_star{height:24px;padding:2px 0px;vertical-align:top;} @media only screen and (max-width:1000px) and (min-width:600px) { #libraryFilterDropdown.mobile_width .filter_group_list_wrap{max-width:calc(100vw - 40px);} } @media only screen and (max-width:599px) { #libraryFilterDropdown .filter_button_cover{width:110px;height:56px;border-radius:0px;} #libraryFilterDropdown .filter_button{width:110px;line-height:56px;border-radius:0px;} #libraryFilterDropdown .filter_button .filter_image{height:56px;padding:16px 6px 16px 10px;margin-top:0;} #libraryFilterDropdown .filter_button .expand_image{height:56px;padding:22px 10px 22px 16px;float:right;margin-top:0;} #libraryFilterDropdown .filter_background{width:110px;top:40px;} #libraryFilterDropdown .filter_list{width:100vw;height:auto;top:56px;} #libraryFilterDropdown .search_wrap{padding:16px;} #libraryFilterDropdown .search_wrap .search_icon{top:22px;left:22px;} #libraryFilterDropdown .search_wrap .input_cancel{top:16px;right:16px;} #libraryFilterDropdown .filter_group_list_wrap{max-width:auto;width:100%;overflow:auto;} #libraryFilterDropdown .filter_group_list{padding:0 16px 16px 16px;width:100%;} #libraryFilterDropdown .filter_group_item{min-width:auto;width:calc(50% - 10px);margin-right:20px;} #libraryFilterDropdown .filter_group_item:nth-child(n+3){margin-top:16px;} #libraryFilterDropdown .filter_group_item:nth-child(2n){margin-right:0px;} #libraryFilterDropdown .filter_group_item:nth-child(n+5){margin-top:0px;} #libraryFilterDropdown .filter_group_item:nth-child(n+5) .title{display:none;} #libraryFilterDropdown .filter_group_item:nth-child(n+5) .checkbox_list{margin-top:6px;} } /**************************************************************** * 라이브러리 뷰 모드 ****************************************************************/ #libraryViewModeDropdown{position:absolute;z-index:1000;} #libraryViewModeDropdown .view_mode_button_cover{width:80px;height:50px;position:absolute;top:0;left:0;background:#FFF;border-radius:2px;box-shadow:1px 1px 4px 2px rgba(0, 0, 0, 0.2);z-index:1;} #libraryViewModeDropdown .view_mode_button{width:80px;position:absolute;top:0;left:0;line-height:58px;border-radius:2px;z-index:3;} #libraryViewModeDropdown .view_mode_button .view_mode_image{height:32px;padding:5px 10px;vertical-align:top;margin-top:13px;} #libraryViewModeDropdown .view_mode_button .expand_image{height:32px;padding:10px;vertical-align:top;transform:rotate(180deg);margin-top:13px;} #libraryViewModeDropdown .view_mode_background{background:#FFF;position:absolute;width:80px;height:24px;left:0px;top:32px;z-index:2;} #libraryViewModeDropdown .view_mode_list{min-width:130px;background:#FFF;box-shadow:1px 1px 4px 2px rgba(0, 0, 0, 0.2);border-radius:2px;overflow-y:hidden;overflow-x:auto;position:absolute;top:50px;left:0px;z-index:1;} #libraryViewModeDropdown .view_mode_item{line-height:32px;margin-top:8px;} #libraryViewModeDropdown .view_mode_item:last-child{margin-bottom:8px;} #libraryViewModeDropdown .view_mode_item img{height:32px;padding:5px 10px;vertical-align:top;} @media only screen and (max-width:599px) { #libraryViewModeDropdown .view_mode_button_cover{width:80px;height:56px;top:0;left:0;border-radius:0px;} #libraryViewModeDropdown .view_mode_button{width:80px;line-height:56px;border-radius:0px;} #libraryViewModeDropdown .view_mode_button .view_mode_image{height:56px;padding:17px 5px 17px 16px;margin-top:0;} #libraryViewModeDropdown .view_mode_button .expand_image{height:56px;padding:22px 10px;float:right;margin-top:0;} #libraryViewModeDropdown .view_mode_background{height:24px;left:0px;top:40px;} #libraryViewModeDropdown .view_mode_list{top:56px;} #libraryViewModeDropdown .view_mode_item img{padding:5px 10px 5px 16px;} } /**************************************************************** * 라이브러리 정렬 ****************************************************************/ #librarySortDropdown{position:absolute;z-index:1000;} #librarySortDropdown .sort_button_cover{width:130px;height:50px;position:absolute;top:0;left:0;background:#FFF;border-radius:2px;box-shadow:1px 1px 4px 2px rgba(0, 0, 0, 0.2);z-index:1;} #librarySortDropdown .sort_button{width:130px;padding-left:10px;position:absolute;top:0;left:0;line-height:58px;border-radius:2px;z-index:3;} #librarySortDropdown .sort_button .expand_image{height:32px;padding:10px;vertical-align:top;transform:rotate(180deg);float:right;margin-top:13px;} #librarySortDropdown .sort_background{background:#FFF;position:absolute;width:130px;height:24px;left:0px;top:32px;z-index:2;} #librarySortDropdown .sort_list{min-width:130px;background:#FFF;box-shadow:1px 1px 4px 2px rgba(0, 0, 0, 0.2);border-radius:2px;overflow-y:hidden;overflow-x:auto;position:absolute;top:50px;left:0px;z-index:1;} #librarySortDropdown .sort_item{line-height:32px;margin-top:8px;padding-left:10px;} #librarySortDropdown .sort_item:last-child{margin-bottom:8px;} @media only screen and (max-width:599px) { #librarySortDropdown .sort_button_cover{width:calc(100vw - 190px);height:56px;border-radius:0px;} #librarySortDropdown .sort_button{width:calc(100vw - 190px);padding-left:12px;line-height:56px;border-radius:0px;} #librarySortDropdown .sort_button .expand_image{height:56px;padding:22px 10px;margin-top:0;} #librarySortDropdown .sort_background{width:calc(100vw - 190px);top:40px;} #librarySortDropdown .sort_list{min-width:calc(100vw - 190px);border-radius:2px;top:56px;} } /**************************************************************** * 친구목록 ****************************************************************/ #userBody .follow_user_header .profile_wrap{vertical-align:top;margin-right:16px;} #userBody .follow_user_header .profile_image{width:80px;height:80px;border:solid 1px #ced8e5;border-radius:40px;} #userBody .follow_user_header .text_wrap{vertical-align:top;padding-top:13px;} #userBody .follow_user_header .text_wrap .nickname{line-height:29px;} #userBody .follow_user_header .text_wrap .user_id{margin-left:8px;} #userBody .follow_user_header .text_wrap .follow_cnt_wrap{margin-top:4px;line-height:19px;} #userBody .follow_user_header .text_wrap .follow_cnt_wrap .follow_page_button{margin-right:16px;} #userBody .follow_user_header .text_wrap .follow_cnt_wrap .follow_page_button:last-child{margin-right:0;} #userBody .follow_user_header .text_wrap .follow_cnt_wrap .follow_page_button .follow_cnt{margin-left:8px;} #userBody .follow_user_header .friend_button{float:right;width:110px;margin-top:24px;} #userBody .follow_user_header .friend_button img{height:18px;margin:9px 2px 0 0;} #userBody .follow_user_header .follow_tab_menu{border-bottom:solid 1px #ebeff8;margin-top:38px;margin-bottom:30px;} #userBody .follow_user_header .follow_tab_menu .follow_tab_button{line-height:27px;padding-bottom:10px;margin-right:20px;user-select:none;cursor:pointer;} #userBody .follow_user_header .follow_tab_menu .follow_tab_button.selected{color:#031827;padding-bottom:8px;border-bottom:solid 2px #3f9dff;} #userBody .follow_user_header .follow_tab_menu .follow_tab_button:last-child{margin-right:0;} #userBody .follow_tab_button_wrap{display:inline-block;vertical-align:top;width:100vw;position:fixed;top:44px;left:0;background:#FFF;z-index:1000;transition:top 0.15s linear;border-bottom:solid 1px #EBEFF8;} #userBody .follow_tab_button_wrap.snap_top{top:-4px;} #userBody .follow_phone_tab_button{text-align:center;width:50%;height:48px;display:inline-block;vertical-align:top;border-bottom:solid 2px transparent;} #userBody .follow_phone_tab_button.selected{border-bottom:solid 2px #3f9dff;} #userBody .follow_phone_tab_button .button_text{line-height:46px;} #userBody .follow_phone_tab_button.selected .button_text{color:#031827;} #userBody .follow_title{line-height:24px;margin-top:30px;} #userBody .follow_list{margin-top:30px;} #userBody .feed_item_box.feed_user{width:300px;display:inline-block;margin-right:30px;} #userBody .feed_item_box.feed_user:nth-child(3n){margin-right:0px;} #userBody .feed_item_box.feed_user:nth-child(-n+3){margin-top:0px;} #userBody .user_feed_item .intro{max-height:36px;height:36px;} @media only screen and (max-width:999px) and (min-width:955px) { .mobile_width #userBody .feed_item_box.feed_user{margin-right:calc(50% - 450px);} .mobile_width #userBody .feed_item_box.feed_user:nth-child(3n){margin-right:0px;} .mobile_width #userBody .feed_item_box.feed_user:nth-child(-n+3){margin-top:0px;} } @media only screen and (max-width:954px) and (min-width:680px) { .mobile_width #userBody .feed_item_box.feed_user{margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_user:nth-child(3n){margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_user:nth-child(-n+3){margin-top:20px;} .mobile_width #userBody .feed_item_box.feed_user:nth-child(2n){margin-right:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_user:nth-child(2n-1){margin-left:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_user:nth-child(-n+2){margin-top:0px;} } @media only screen and (max-width:679px) and (min-width:600px) { .mobile_width #userBody .feed_item_box.feed_user{display:block;margin-right:auto;margin-left:auto;} .mobile_width #userBody .feed_item_box.feed_user:nth-child(3n){margin-right:auto;} .mobile_width #userBody .feed_item_box.feed_user:nth-child(-n+3){margin-top:20px;} } @media only screen and (max-width:599px) { #userBody .follow_title{margin-top:16px;padding-left:16px;padding-bottom:16px;border-bottom:solid 1px #D8D8D8;} #userBody .follow_list{margin-top:0px;} #userBody .feed_item_box.feed_user{width:100%;margin-right:0px;border-bottom:solid 1px #D8D8D8;} #userBody .user_feed_item .intro{max-height:auto;height:auto;} } /******** 업적 */ #userBody .achievement_header{padding-top:0px;} #userBody .achievement_header .platform_title{line-height:38px;display:inline-block;} #userBody .achievement_header .platform_title img{height:24px;vertical-align:top;margin:7px 0 0 4px;} #userBody .achievement_header .achievement_tab_menu{border-bottom:solid 1px #ebeff8;margin-top:38px;margin-bottom:30px;} #userBody .achievement_header .achievement_tab_menu .achievement_tab_button{line-height:27px;padding-bottom:10px;margin-right:20px;user-select:none;cursor:pointer;} #userBody .achievement_header .achievement_tab_menu .achievement_tab_button.selected{color:#031827;padding-bottom:8px;border-bottom:solid 2px #3f9dff;} #userBody .achievement_header .achievement_tab_menu .achievement_tab_button:last-child{margin-right:0;} #userBody .achievement_header .chart_banner_wrap{user-select:none;cursor:pointer;margin-top:28px;width:100%;height:100px;position:relative;border-radius:13px;overflow:hidden;background:#3b4757;} #userBody .achievement_header .chart_banner_wrap .background{height:106px;position:absolute;right:86px;top:0;} #userBody .achievement_header .chart_banner_wrap .text_wrap{position:absolute;left:202px;top:24px;} #userBody .achievement_header .chart_banner_wrap .text_wrap .title_tag{width:70px;text-align:center;border-radius:4px;line-height:22px;background:#3f9dff;} #userBody .achievement_header .chart_banner_wrap .text_wrap .description{margin-top:6px;line-height:22px;} @media only screen and (max-width:599px) { #userBody .achievement_header .chart_banner_wrap{margin-top:20px;} #userBody .achievement_header .chart_banner_wrap .background{height:100px;right:0px;} #userBody .achievement_header .chart_banner_wrap .text_wrap{left:24px;top:24px;} #userBody .achievement_header .chart_banner_wrap .text_wrap .description{font-size:15px;} } #userBody .achivement_tab_button_wrap{display:inline-block;vertical-align:top;width:100vw;position:fixed;top:44px;left:0;background:#FFF;z-index:1000;transition:top 0.15s linear;border-bottom:solid 1px #EBEFF8;} #userBody .achivement_tab_button_wrap.snap_top{top:-4px;} #userBody .achivement_tab_button{text-align:center;height:48px;display:inline-block;vertical-align:top;border-bottom:solid 2px transparent;} #userBody .achivement_tab_button.item_cnt_2{width:50%;} #userBody .achivement_tab_button.item_cnt_3{width:33%;} #userBody .achivement_tab_button.item_cnt_3:nth-child(2){width:34%;} #userBody .achivement_tab_button.item_cnt_4{width:25%;} #userBody .achivement_tab_button.selected{border-bottom:solid 2px #3f9dff;} #userBody .achivement_tab_button .button_text{line-height:46px;} #userBody .achivement_tab_button.selected .button_text{color:#031827;} #userBody .achievement_header .view_mode_wrap{margin-top:16px;} #userBody .achievement_header .view_mode{height:31px;line-height:31px;vertical-align:top;display:inline-block;margin-right:8px;cursor:pointer;background:#ebeff8;border-radius:4px;padding:0 8px;} #userBody .achievement_header .view_mode.selected{color:#FFF;background:#3f9dff;} #userBody .achievement_header .view_mode:last-child{margin-right:0;} #userBody .achievement_header .sync_open_state{margin-top:26px;} #userBody .achievement_header .sync_open_state .description{text-align:center;border-radius:13px;line-height:28px;padding:12px 16px;} #userBody .achievement_header .sync_open_state .description .description_image{height:24px;margin:2px 8px 0 0;vertical-align:top;} #userBody .achievement_header .sync_open_state .description .small_icon{height:16px;margin:6px 0px 0 5px;vertical-align:top;} #userBody .achievement_header .sync_open_state .description .privacy_button{cursor:pointer;} #userBody .achievement_header .minimap_achievement_info{margin-top:24px;} #userBody .achievement_header .minimap_achievement_info .minimap_achievement_bg{width:300px;height:140px;margin-right:32px;vertical-align:top;border-radius:10px;background-image:url('/images/background/minimap_achievement_bg.png');background-size:cover;background-position:center;} #userBody .achievement_header .minimap_achievement_info .info_wrap{width:calc(100% - 332px);vertical-align:top;} #userBody .achievement_header .minimap_achievement_info .info_wrap .info_title{line-height:36px;margin-top:2px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .lower_info_wrap{margin-top:58px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info{line-height:24px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info:nth-child(2){margin-top:8px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info img{height:24px;margin-right:8px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info .cnt_info .total_cnt{margin-left:4px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info .play_day_info{margin-left:24px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info .percent_info{float:right;} #userBody .achievement_header .minimap_achievement_info .percent_bar:nth-child(2){margin-top:12px;} #userBody .achievement_header .minimap_achievement_info .percent_bar .bar_background{width:100%;height:4px;border-radius:2px;background:#D9EBFF;position:relative;} #userBody .achievement_header .minimap_achievement_info .percent_bar .bar_foreground{height:4px;border-radius:2px;background:#3f9dff;box-shadow:0 0 4px 0 #3f9dff;} #userBody .achievement_header .cnt_sort_wrap{margin-top:24px;height:22px;position:relative;line-height:22px;} #userBody .achievement_header .cnt_sort_wrap .achievement_cnt{display:inline-block;} #userBody .achievement_header .cnt_sort_wrap .divider{margin:3px 10px 0 12px;width:1px;height:16px;background:#ced8e5;vertical-align:top;} #userBody .achievement_header .cnt_sort_wrap .refresh_button{cursor:pointer;} #userBody .achievement_header .cnt_sort_wrap .refresh_button img{height:20px;vertical-align:top;margin:1px 4px 0 0;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap{position:absolute;top:0;right:0;display:inline-block;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap .sort_item{display:inline-block;margin-left:14px;cursor:pointer;transition:color 0.1s linear;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap .sort_item.selected{color:#031827;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap .sort_item .dot{width:2px;height:2px;background:#7F8FA6;vertical-align:top;margin:10px 4px 0 0;transition:background 0.1s linear;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap .sort_item.selected .dot{background:#031827;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap .select_option_wrap{width:140px;} #userBody .achievement_header .achievement_game_header{margin-top:48px;width:100%;} #userBody .achievement_header .achievement_game_header .cover_image{width:300px;height:140px;display:inline-block;vertical-align:top;background-size:cover, 36px 36px;background-repeat:no-repeat;background-position:center center;border-radius:10px;background-color:#ced8e5;position:relative;} #userBody .achievement_header .achievement_game_header .steam_achievement_game_wrap .cover_image{height:140px;} #userBody .achievement_header .achievement_game_header .playstation_achievement_game_wrap .cover_image{height:165px;background-size:cover;} #userBody .achievement_header .achievement_game_header .xbox_achievement_game_wrap .cover_image{height:168px;background-size:cover;} #userBody .achievement_header .achievement_game_header .cover_image .complete_badge{position:absolute;top:0;left:14px;width:42px;} #userBody .achievement_header .achievement_game_header .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;} #userBody .achievement_header .achievement_game_header .cover_image .share_button:hover{background-image:url('/images/icon_v3/share_hover.png');} #userBody .achievement_header .achievement_game_header .game_info{width:calc(100% - 300px);display:inline-block;vertical-align:top;padding:2px 0 0 30px;} #userBody .achievement_header .achievement_game_header .game_info .game_name{line-height:36px;height:72px;max-height:72px;} #userBody .achievement_header .achievement_game_header .game_info .share_button{display:none;} #userBody .achievement_header .achievement_game_header .game_info .detail_info{margin-top:22px;line-height:24px;} #userBody .achievement_header .achievement_game_header .playstation_achievement_game_wrap .game_info .detail_info{margin-top:46px;} #userBody .achievement_header .achievement_game_header .xbox_achievement_game_wrap .game_info .detail_info{margin-top:49px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info img{height:24px;margin-right:8px;vertical-align:top;} #userBody .achievement_header .achievement_game_header .game_info .detail_info .trophy_icon{margin-left:16px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info .trophy_icon:first-child{margin-left:0px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info .achievement_cnt{margin-right:16px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info .achievement_percent{float:right;} #userBody .achievement_header .achievement_game_header .game_info .achievement_progress{width:100%;height:4px;margin-top:13px;position:relative;background:rgba(63,157,255,0.2);border-radius:2px;} #userBody .achievement_header .achievement_game_header .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;} #userBody .achievement_header .achievement_game_header .cnt_sort_wrap{margin-top:40px;margin-left:330px;} @media only screen and (max-width:999px) and (min-width:600px) { .mobile_width #userBody .achievement_header .achievement_game_header .cnt_sort_wrap{margin-left:0px;} } @media only screen and (max-width:599px) { #userBody .achievement_header{padding:16px 16px 9px 16px;} #userBody .achievement_header .platform_title{line-height:33px;font-size:22px;letter-spacing:-0.5px;} #userBody .achievement_header .platform_title img{margin:4px 0 0 4px;} #userBody .achievement_header .view_mode{height:28px;line-height:28px;font-size:15px;letter-spacing:-0.4px;} #userBody .achievement_header .cnt_sort_wrap{margin-top:8px;line-height:20px;} #userBody .achievement_header .cnt_sort_wrap .achievement_cnt{font-size:14px;margin-right:12px;} #userBody .achievement_header .cnt_sort_wrap .divider{display:none;} #userBody .achievement_header .cnt_sort_wrap .refresh_button{font-size:13px;letter-spacing:-0.3px} #userBody .achievement_header .cnt_sort_wrap .refresh_button img{margin:0px 4px 0 0;} #userBody .achievement_header .sync_open_state .description{text-align:left;line-height:22px;} #userBody .achievement_header .sync_open_state .description .description_image{height:22px;margin:0px 4px 0 0;vertical-align:top;display:inline-block;} #userBody .achievement_header .sync_open_state .description .description_line{display:inline-block;width:calc(100% - 26px);} #userBody .achievement_header .sync_open_state .description .small_icon{height:16px;margin:3px 0px 0 2px;} #userBody .achievement_header .cnt_sort_wrap .achievement_sort_wrap{position:absolute;top:0;right:0;display:inline-block;} #userBody .achievement_header .achievement_game_header{margin-top:32px;} #userBody .achievement_header .achievement_game_header .cover_image{width:116px;border-radius:8px;margin-right:12px;} #userBody .achievement_header .achievement_game_header .steam_achievement_game_wrap .cover_image{height:54px;} #userBody .achievement_header .achievement_game_header .playstation_achievement_game_wrap .cover_image{height:64px;} #userBody .achievement_header .achievement_game_header .xbox_achievement_game_wrap .cover_image{height:64px;} #userBody .achievement_header .achievement_game_header .cover_image .complete_badge{left:4px;width:24px;} #userBody .achievement_header .achievement_game_header .cover_image .share_button{display:none;} #userBody .achievement_header .achievement_game_header .game_info{width:calc(100% - 128px);padding:0;position:relative;} #userBody .achievement_header .achievement_game_header .game_info .game_name{line-height:22px;height:44px;max-height:44px;font-size:15px;letter-spacing:-0.4px;display:inline-block;width:calc(100% - 28px);} #userBody .achievement_header .achievement_game_header .game_info .share_button{display:inline-block;width:20px;height:20px;vertical-align:top;margin-top:8px;margin-left:8px;} #userBody .achievement_header .achievement_game_header .game_info .share_button img{width:20px;height:20px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info{margin-top:55px;line-height:20px;font-size:13px;letter-spacing:-0.4px;} #userBody .achievement_header .achievement_game_header .playstation_achievement_game_wrap .game_info .detail_info{margin-top:54px;} #userBody .achievement_header .achievement_game_header .xbox_achievement_game_wrap .game_info .detail_info{margin-top:54px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info img{height:16px;margin:2px 2px 0 0;} #userBody .achievement_header .achievement_game_header .game_info .detail_info .trophy_icon{margin-left:12px;height:16px;margin-top:2px;} #userBody .achievement_header .achievement_game_header .game_info .detail_info .achievement_cnt{margin-right:8px;} #userBody .achievement_header .achievement_game_header .game_info .achievement_progress{position:absolute;top:83px;left:0;margin-top:0;} #userBody .achievement_header .achievement_game_header .cnt_sort_wrap{margin-top:25px;margin-left:0;} #userBody .achievement_header .minimap_achievement_info .minimap_achievement_bg{width:116px;height:54px;margin-right:12px;border-radius:8px;} #userBody .achievement_header .minimap_achievement_info .info_wrap{width:calc(100% - 128px);} #userBody .achievement_header .minimap_achievement_info .info_wrap .info_title{font-size:15px;line-height:22px;margin-top:0px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info{font-size:13px;line-height:19px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info img{height:16px;margin:2px 4px 0 0;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info .cnt_info .total_cnt{margin-left:2px;} #userBody .achievement_header .minimap_achievement_info .info_wrap .text_info .play_day_info{margin-left:8px;} } #userBody .game_group_list .game_group_header{line-height:22px;margin-bottom:10px;} #userBody .game_group_list .game_group_item_wrap{padding:10px 0px;cursor:pointer;} #userBody .game_group_list .game_group_item_wrap.selected{background:#e5f3ff;} #userBody .game_group_list .cover_image{width:109px;height:60px;margin-right:12px;display:inline-block;vertical-align:top;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:10px;background-color:#ced8e5;} #userBody .game_group_list .group_name{display:inline-block;width:calc(100% - 121px);margin-top:8px;height:44px;line-height:22px;overflow:hidden;} #userBody .achievement_list{margin-top:30px;} #userBody .feed_item_box.feed_achievement{width:100%;border:none;border-bottom:solid 1px #ebeff8;margin-top:0;} #userBody .feed_item_box.feed_achievement:last-child{border-bottom:none;} #userBody .feed_item_box.feed_steam_achievement{width:100%;border:none;border-bottom:solid 1px #EBEFF8;background:transparent;margin-top:0px;} #userBody .feed_item_box.feed_steam_achievement:last-child{border-bottom:none;} #userBody .feed_item_box.feed_steam_achievement_game{width:300px;border:none;background:#FFF;margin-top:0px;box-shadow: 0 5px 10px 2px rgba(3, 24, 39, 0.12);border-radius:13px;overflow:hidden;display:inline-block;vertical-align:top;margin:36px 30px 0 0;} #userBody .feed_item_box.feed_steam_achievement_game:last-child{border-bottom:none;} #userBody .feed_item_box.feed_steam_achievement_game:nth-child(3n){margin-right:0px;} #userBody .feed_item_box.feed_steam_achievement_game:nth-child(-n+3){margin-top:0px;} #userBody .feed_item_box.feed_steam_game_achievement{width:100%;border:none;border-bottom:solid 1px #EBEFF8;background:transparent;margin-top:0px;} #userBody .feed_item_box.feed_steam_game_achievement:last-child{border-bottom:none;} #userBody .feed_item_box.feed_playstation_achievement{width:100%;border:none;border-bottom:solid 1px #EBEFF8;background:transparent;margin-top:0px;} #userBody .feed_item_box.feed_playstation_achievement:last-child{border-bottom:none;} #userBody .feed_item_box.feed_playstation_achievement_game{width:300px;border:none;background:#FFF;margin-top:0px;box-shadow: 0 5px 10px 2px rgba(3, 24, 39, 0.12);border-radius:13px;overflow:hidden;display:inline-block;vertical-align:top;margin:36px 30px 0 0;} #userBody .feed_item_box.feed_playstation_achievement_game:last-child{border-bottom:none;} #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(3n){margin-right:0px;} #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(-n+3){margin-top:0px;} #userBody .feed_item_box.feed_playstation_game_achievement{width:100%;border:none;border-bottom:solid 1px #EBEFF8;background:transparent;margin-top:0px;} #userBody .feed_item_box.feed_playstation_game_achievement:last-child{border-bottom:none;} #userBody .feed_item_box.feed_xbox_achievement{width:100%;border:none;border-bottom:solid 1px #EBEFF8;background:transparent;margin-top:0px;} #userBody .feed_item_box.feed_xbox_achievement:last-child{border-bottom:none;} #userBody .feed_item_box.feed_xbox_achievement_game{width:300px;border:none;background:#FFF;margin-top:0px;box-shadow: 0 5px 10px 2px rgba(3, 24, 39, 0.12);border-radius:13px;overflow:hidden;display:inline-block;vertical-align:top;margin:36px 30px 0 0;} #userBody .feed_item_box.feed_xbox_achievement_game:last-child{border-bottom:none;} #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(3n){margin-right:0px;} #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(-n+3){margin-top:0px;} #userBody .feed_item_box.feed_xbox_game_achievement{width:100%;border:none;border-bottom:solid 1px #EBEFF8;background:transparent;margin-top:0px;} #userBody .feed_item_box.feed_xbox_game_achievement:last-child{border-bottom:none;} @media only screen and (max-width:999px) and (min-width:680px) { .mobile_width #userBody .feed_item_box.feed_steam_achievement_game{margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(3n){margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(2n){margin-right:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(2n-1){margin-left:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(-n+3){margin-top:36px;} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(-n+2){margin-top:0px;} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game{margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(3n){margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(2n){margin-right:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(2n-1){margin-left:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(-n+3){margin-top:36px;} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(-n+2){margin-top:0px;} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game{margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(3n){margin-right:calc(33% - 185px);} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(2n){margin-right:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(2n-1){margin-left:calc(33% - 205px);} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(-n+3){margin-top:36px;} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(-n+2){margin-top:0px;} } @media only screen and (max-width:679px) and (min-width:600px) { .mobile_width #userBody .feed_item_box.feed_steam_achievement_game{display:block;margin-right:auto;margin-left:auto;} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(3n){margin-right:auto;} .mobile_width #userBody .feed_item_box.feed_steam_achievement_game:nth-child(-n+3){margin-top:36px;} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game{display:block;margin-right:auto;margin-left:auto;} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(3n){margin-right:auto;} .mobile_width #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(-n+3){margin-top:36px;} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game{display:block;margin-right:auto;margin-left:auto;} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(3n){margin-right:auto;} .mobile_width #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(-n+3){margin-top:36px;} } @media only screen and (max-width:599px) { #userBody .achievement_list{margin-top:0px;} #userBody .feed_item_box.feed_achievement{width:100%;margin-right:0px;border-bottom:none;} #userBody .feed_item_box.feed_steam_achievement{margin:0 auto;padding:16px 0;width:calc(100% - 32px);} #userBody .feed_item_box.feed_steam_achievement_game{width:calc(100% - 32px);border-bottom:solid 1px #EBEFF8;box-shadow:none;border-radius:0px;display:block;margin:0 auto;padding:16px 0px;} #userBody .feed_item_box.feed_steam_achievement_game:nth-child(3n){margin-right:auto;} #userBody .feed_item_box.feed_steam_game_achievement{width:calc(100% - 32px);margin:0 auto;} #userBody .feed_item_box.feed_playstation_achievement{margin:0 auto;padding:16px 0;width:calc(100% - 32px);} #userBody .feed_item_box.feed_playstation_achievement_game{width:calc(100% - 32px);border-bottom:solid 1px #EBEFF8;box-shadow:none;border-radius:0px;display:block;margin:0 auto;padding:16px 0px;} #userBody .feed_item_box.feed_playstation_achievement_game:nth-child(3n){margin-right:auto;} #userBody .feed_item_box.feed_playstation_game_achievement{width:calc(100% - 32px);margin:0 auto;} #userBody .feed_item_box.feed_xbox_achievement{margin:0 auto;padding:16px 0;width:calc(100% - 32px);} #userBody .feed_item_box.feed_xbox_achievement_game{width:calc(100% - 32px);border-bottom:solid 1px #EBEFF8;box-shadow:none;border-radius:0px;display:block;margin:0 auto;padding:16px 0px;} #userBody .feed_item_box.feed_xbox_achievement_game:nth-child(3n){margin-right:auto;} #userBody .feed_item_box.feed_xbox_game_achievement{width:calc(100% - 32px);margin:0 auto;} } /******** 챠트 */ #userBody .no_chart_wrap{width:100%;margin-top:80px;background:#FFF;border:solid 1px #D8D8D8;border-radius:4px;padding:26px;text-align:center;} #userBody .no_chart_wrap.not_my_chart{margin-top:160px;margin-bottom:240px} #userBody .no_chart_wrap .description{line-height:24px;} #userBody .no_chart_wrap.not_my_chart .description{line-height:80px;} #userBody .no_chart_wrap .button_wrap{margin-top:12px;} #userBody .no_chart_example_wrap{width:100%;margin-top:26px;background:#FFF;border:solid 1px #D8D8D8;border-radius:4px;text-align:center;line-height:24px;padding:120px 26px;} #userBody .chart_example_image{margin-top:60px;width:100%;} #userBody .chart_example_image img{width:100%;} #userBody .banner_row{margin-top:80px;cursor:pointer;width:100%;} #userBody .banner_row img{width:100%;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userBody .banner_row{width:calc(100% - 40px);margin:80px auto 0 auto;} } @media only screen and (max-width:599px) { #userBody .no_chart_wrap{margin-top:0px;border:none;border-radius:0px;padding:40px 16px;border-top:solid 8px #D8D8D8;} #userBody .no_chart_wrap.not_my_chart{margin-top:0px;margin-bottom:0px} #userBody .no_chart_wrap.not_my_chart .description{line-height:24px;} #userBody .no_chart_example_wrap{margin-top:0px;border:none;border-radius:0px;padding:0px 16px 40px 16px;} #userBody .chart_example_image{margin-top:0px;border-top:solid 8px #D8D8D8;} #userBody .chart_example_image:last-child{border-bottom:solid 8px #D8D8D8;} #userBody .banner_row{margin-top:0px;border-top:solid 8px #D8D8D8;} } /******** 휴지통 */ #userBody .title_help_text{margin-left:24px;} #userBody .clear_trash_button{float:right;cursor:pointer;margin-right:16px;} #userBody .clear_trash_button:hover{text-decoration:underline;} /******** 연동 */ #userBody .sync_main_wrap{} #userBody .sync_help_wrap{display:none;} #userBody .sync_info{margin-top:50px;} #userBody .sync_info .title{line-height:38px;} #userBody .sync_info .description{margin-top:16px;line-height:22px;} #userBody .sync_item_list{margin-top:50px;} #userBody .sync_item_list .sync_item{width:300px;height:321px;display:inline-block;margin-right:30px;border-radius:13px;box-shadow: 0 5px 10px 2px rgba(3, 24, 39, 0.12);vertical-align:top;} #userBody .sync_item_list .sync_item:nth-child(3n){margin-right:0px;} #userBody .sync_item_list .sync_item .no_sync{width:100%;height:100%;padding:70px 20px 24px 20px;text-align:center;} #userBody .sync_item_list .sync_item .no_sync .logo img{height:80px;} #userBody .sync_item_list .sync_item .no_sync .title{margin-top:8px;line-height:22px;} #userBody .sync_item_list .sync_item .no_sync .btn_wrap{margin-top:67px;} #userBody .sync_item_list .sync_item .no_sync .btn_r{width:100%;} #userBody .sync_item_list .sync_item .yes_sync{width:100%;height:100%;padding:20px;} #userBody .sync_item_list .sync_item .yes_sync .logo{line-height:24px;} #userBody .sync_item_list .sync_item .yes_sync .logo img{height:24px;margin-right:3px;vertical-align:top;} #userBody .sync_item_list .sync_item .yes_sync .user_info{text-align:center;margin-top:20px;} #userBody .sync_item_list .sync_item .yes_sync.private_user .user_info{opacity:0.3;} #userBody .sync_item_list .sync_item .yes_sync .user_info .profile img{width:54px;height:54px;border-radius:27px;} #userBody .sync_item_list .sync_item .yes_sync .user_info .name{margin-top:8px;line-height:24px;} #userBody .sync_item_list .sync_item .yes_sync .user_info .level{line-height:20px;} #userBody .sync_item_list .sync_item .yes_sync .init_info{margin-top:8px;text-align:center;padding-bottom:8px;} #userBody .sync_item_list .sync_item .yes_sync .init_info .help_loader{line-height:19px;} #userBody .sync_item_list .sync_item .yes_sync .init_info .help_loader .inline_loader{vertical-align:top;margin:1px 4px 0 0;width:16px;height:16px;} #userBody .sync_item_list .sync_item .yes_sync .init_info .description{margin-top:4px;line-height:19px;} #userBody .sync_item_list .sync_item .yes_sync .cnt_info{margin-top:12px;text-align:center;padding-bottom:20px;} #userBody .sync_item_list .sync_item .yes_sync.private_user .cnt_info{opacity:0.3;} #userBody .sync_item_list .sync_item .yes_sync .cnt_info .cnt_item{display:inline-block;width:calc(50% - 1px);} #userBody .sync_item_list .sync_item .yes_sync .cnt_info .cnt_item .cnt_value{line-height:24px;} #userBody .sync_item_list .sync_item .yes_sync .cnt_info .cnt_item .cnt_title{line-height:19px;margin-top:2px;} #userBody .sync_item_list .sync_item .yes_sync .cnt_info .divider_wrap{display:inline-block;width:1px;height:45px;padding-top:3px;vertical-align:top;} #userBody .sync_item_list .sync_item .yes_sync .cnt_info .divider{width:1px;height:42px;} #userBody .sync_item_list .sync_item .yes_sync .btn_wrap{width:100%;} #userBody .sync_item_list .sync_item .yes_sync .btn_wrap .btn_r{width:calc(50% - 4px);position:relative;} #userBody .sync_item_list .sync_item .yes_sync .btn_wrap .btn_r .new_cnt{position:absolute;top:-10px;right:-8px;width:36px;height:19px;line-height:17px;text-align:center;border-radius:10px;border:solid 1px #FFF;} #userBody .sync_item_list .sync_item .yes_sync .btn_wrap .btn_r:first-child{margin-right:8px;} #userBody .sync_item_list .sync_item .yes_sync .btn_wrap .one_button{width:100%;margin-right:0px;} #userBody .sync_middle_info{display:none;} #userBody .sync_bottom_info{margin-top:40px;} #userBody .sync_text_info .description{text-align:center;border-radius:13px;line-height:28px;padding:12px 16px;} #userBody .sync_text_info .description .description_image{height:24px;margin:2px 8px 0 0;vertical-align:top;} #userBody .sync_text_info .description .small_icon{height:16px;margin:6px 0px 0 5px;vertical-align:top;} #userBody .sync_text_info .description .privacy_button{cursor:pointer;} @media only screen and (max-width:999px) and (min-width:700px) { #pageBodyHolder_NEW.mobile_width #userBody .sync_item_list .sync_item{margin-right:30px;margin-top:30px;} #pageBodyHolder_NEW.mobile_width #userBody .sync_item_list .sync_item:nth-child(2n){margin-right:0px;} #pageBodyHolder_NEW.mobile_width #userBody .sync_item_list .sync_item:nth-child(-n+2){margin-top:0px;} } @media only screen and (max-width:699px) and (min-width:600px) { #pageBodyHolder_NEW.mobile_width #userBody .sync_item_list .sync_item{margin-right:30px;margin-top:30px;} #pageBodyHolder_NEW.mobile_width #userBody .sync_item_list .sync_item:nth-child(-n+1){margin-top:0px;} } @media only screen and (max-width:599px) { #userBody .sync_info{margin-top:40px;padding:0 16px;} #userBody .sync_info .title{line-height:33px;font-size:22px;letter-spacing:-0.5px;} #userBody .sync_info .description{margin-top:16px;line-height:20px;font-size:14px;letter-spacing:-0.3px;} #userBody .sync_item_list{margin-top:36px;width:100%;padding:0 16px;} #userBody .sync_item_list .sync_item{width:100%;height:auto;display:block;margin-right:0px;margin-top:16px;} #userBody .sync_item_list .sync_item:first-child{margin-top:0px;} #userBody .sync_item_list .sync_item .no_sync{width:100%;height:auto;padding:20px;text-align:left;} #userBody .sync_item_list .sync_item .no_sync .logo{width:56px;height:56px;display:inline-block;margin-right:16px;} #userBody .sync_item_list .sync_item .no_sync .logo img{height:56px;} #userBody .sync_item_list .sync_item .no_sync .title{display:inline-block;margin-top:0px;line-height:56px;} #userBody .sync_item_list .sync_item .no_sync .btn_wrap{margin-top:12px;} #userBody .sync_middle_info{display:block;margin-top:16px;} #userBody .sync_bottom_info{margin-top:28px;padding:0 16px;} #userBody .sync_text_info .description{text-align:left;line-height:22px;} #userBody .sync_text_info .description .description_image{height:22px;margin:0px 4px 0 0;vertical-align:top;display:inline-block;} #userBody .sync_text_info .description .description_line{display:inline-block;width:calc(100% - 26px);} #userBody .sync_text_info .description .small_icon{height:16px;margin:3px 0px 0 2px;} } /******** 게임카드 */ .game_card_item{position:relative;width:335px;height:208px;transform-origin:0 0;background:#FFF;border-radius:17px;} .game_card_item.is_clickable{cursor:pointer;} .game_card_item .mission_cover_main{width:100%;height:100%;position:absolute;z-index:5;background:rgba(255,255,255,0.8);line-height:24px;text-align:center;padding-top:76px;border-radius:12px;} .game_card_item .mission_cover{width:100%;height:100%;position:absolute;z-index:5;background:rgba(255,255,255,0.8);line-height:24px;text-align:center;padding-top:62px;border-radius:12px;} .game_card_item .mission_cover_button_wrap{margin-top:12px;} .game_card_item .mission_cover_button{cursor:pointer;} .game_card_item .card_badge{position:absolute;overflow:hidden;top:-4px;right:-4px;z-index:10;line-height:34px;text-align:center;width:34px;height:34px;border-radius:17px;box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.11), 0 2px 4px 0 rgba(0, 0, 0, 0.38);} .game_card_item .card_badge .lock_icon{height:34px;padding:6px;background:#FFF;} .game_card_item .card_badge .warning_icon{height:40px;margin:-3px 0 0 -3px;} .game_card_item .game_card_content_wrap{width:100%;height:100%;position:relative;border-radius:13px;overflow:hidden;box-shadow:0 3px 5px -1px rgba(3, 24, 39, 0.2), 0 1px 18px 0 rgba(3, 24, 39, 0.1), 0 6px 10px 0 rgba(3, 24, 39, 0.06);} .game_card_item .game_card_content_wrap.private_sync{opacity:0.4;} .game_card_item .game_card_content_wrap.is_detail{box-shadow:none;} .game_card_item .background{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#CED8E5;} .game_card_item .background_image{object-fit:cover;width:100%;height:100%;} .game_card_item .foreground{position:absolute;width:100%;height:100%;top:0;left:0;} .game_card_item .decoration{position:absolute;width:100%;height:100%;top:0;left:0;} .game_card_item .decoration .card_logo{position:absolute;height:44px;left:16px;top:8px;} .game_card_item.preset_sn_8 .decoration .card_logo{height:32px;} .game_card_item.preset_sn_9 .decoration .card_logo{height:36px;} .game_card_item .card_content{position:absolute;width:100%;height:100%;top:0;left:0;} .game_card_item .card_order_logo{position:relative;height:96px;margin:8px 0 0 16px;} .game_card_item .card_order_title{position:relative;font-size:26px;letter-spacing:-0.43px;line-height:32px;padding:16px 16px 0 16px;} .game_card_item .text_type_1{color:#FFF;} .game_card_item .text_type_2{color:#FFF;text-shadow:0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(15, 15, 15, 0.3);} .game_card_item .text_type_3{color:#1a1f26;} .game_card_item.preset_sn_1 .foreground .foreground_character{position:absolute;top:0;height:100%;} .game_card_item.preset_sn_1 .decoration .ic_chip{position:absolute;height:36px;top:77px;left:32px;} .game_card_item.preset_sn_1 .decoration .credit_logo{position:absolute;bottom:16px;right:16px;height:49px;} .game_card_item.preset_sn_1 .card_content.layout_1 .switch_id{position:absolute;left:16px;bottom:56px;} .game_card_item.preset_sn_1 .card_content.layout_1 .switch_id .title{display:none;} .game_card_item.preset_sn_1 .card_content.layout_1 .switch_id .value{font-size:18px;font-weight:700;letter-spacing:0.4px;line-height:27px;} .game_card_item.preset_sn_1 .card_content.layout_1 .island_name{position:absolute;left:16px;bottom:35px;} .game_card_item.preset_sn_1 .card_content.layout_1 .island_name .title{display:none;} .game_card_item.preset_sn_1 .card_content.layout_1 .island_name .value{font-size:11px;letter-spacing:0.24px;line-height:17px;} .game_card_item.preset_sn_1 .card_content.layout_1 .character_name{position:absolute;left:16px;bottom:16px;} .game_card_item.preset_sn_1 .card_content.layout_1 .character_name .value{font-size:13px;font-weight:700;letter-spacing:0.1px;line-height:19px;} .game_card_item.preset_sn_1 .card_content.layout_1 .specialties{position:absolute;right:16px;top:12px;text-align:center;} .game_card_item.preset_sn_1 .card_content.layout_1 .specialties .image_value{height:30px;} .game_card_item.preset_sn_1 .card_content.layout_1 .specialties .title{font-size:11px;letter-spacing:0;line-height:11px;margin-top:1px;} .game_card_item.preset_sn_1 .card_content.layout_1 .specialties .value{display:none;} .game_card_item.preset_sn_1 .card_content.layout_2 .switch_id{position:absolute;left:16px;bottom:16px;} .game_card_item.preset_sn_1 .card_content.layout_2 .switch_id .title{font-size:9px;font-weight:700;letter-spacing:0;line-height:10px;} .game_card_item.preset_sn_1 .card_content.layout_2 .switch_id .value{font-size:12px;font-weight:700;letter-spacing:0;line-height:12px;margin-top:3px;} .game_card_item.preset_sn_1 .card_content.layout_2 .island_name{position:absolute;left:16px;bottom:66px;} .game_card_item.preset_sn_1 .card_content.layout_2 .island_name .title{display:none;} .game_card_item.preset_sn_1 .card_content.layout_2 .island_name .value{font-size:10px;letter-spacing:0;line-height:10px;} .game_card_item.preset_sn_1 .card_content.layout_2 .character_name{position:absolute;left:16px;bottom:51px;} .game_card_item.preset_sn_1 .card_content.layout_2 .character_name .value{font-size:12px;font-weight:700;letter-spacing:0;line-height:12px;} .game_card_item.preset_sn_1 .card_content.layout_2 .specialties{position:absolute;left:123px;bottom:16px;} .game_card_item.preset_sn_1 .card_content.layout_2 .specialties .image_value{display:none;} .game_card_item.preset_sn_1 .card_content.layout_2 .specialties .title{font-size:9px;font-weight:700;letter-spacing:0;line-height:10px;} .game_card_item.preset_sn_1 .card_content.layout_2 .specialties .value{font-size:12px;letter-spacing:0;line-height:12px;margin-top:3px;} .game_card_item.preset_sn_1 .card_content.layout_3 .switch_id{position:absolute;left:16px;bottom:31px;} .game_card_item.preset_sn_1 .card_content.layout_3 .switch_id .title{display:none} .game_card_item.preset_sn_1 .card_content.layout_3 .switch_id .value{font-size:18px;font-weight:700;letter-spacing:0.4;line-height:27px;} .game_card_item.preset_sn_1 .card_content.layout_3 .island_name{position:absolute;right:16px;top:16px;text-align:right;} .game_card_item.preset_sn_1 .card_content.layout_3 .island_name .title{font-size:9px;font-weight:700;letter-spacing:0;line-height:10px;} .game_card_item.preset_sn_1 .card_content.layout_3 .island_name .value{font-size:12px;letter-spacing:0;line-height:12px;margin-top:4px;} .game_card_item.preset_sn_1 .card_content.layout_3 .character_name{position:absolute;left:16px;bottom:16px;} .game_card_item.preset_sn_1 .card_content.layout_3 .character_name .value{font-size:12px;font-weight:700;letter-spacing:0;line-height:12px;} .game_card_item.preset_sn_1 .card_content.layout_3 .specialties{position:absolute;right:16px;top:50px;text-align:right;} .game_card_item.preset_sn_1 .card_content.layout_3 .specialties .image_value{display:none;} .game_card_item.preset_sn_1 .card_content.layout_3 .specialties .title{font-size:9px;font-weight:700;letter-spacing:0;line-height:10px;} .game_card_item.preset_sn_1 .card_content.layout_3 .specialties .value{font-size:12px;letter-spacing:0;line-height:12px;margin-top:4px;} .game_card_item.preset_sn_2 .card_content .profile_image_wrap{position:absolute;left:30px;top:62px;width:48px;height:48px;border-radius:10px;} .game_card_item.preset_sn_2 .card_content .profile_image{width:48px;height:48px;border-radius:10px;} .game_card_item.preset_sn_2 .card_content .user_info{position:absolute;left:20px;bottom:20px;} .game_card_item.preset_sn_2 .card_content .user_info .nickname{font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_2 .card_content .user_info .user_id{font-size:11px;letter-spacing:-0.27px;line-height:17px;} .game_card_item.preset_sn_2 .card_content .avg_review_point{position:absolute;left:178px;bottom:16px;} .game_card_item.preset_sn_2 .card_content .review_cnt{position:absolute;left:245px;bottom:16px;} .game_card_item.preset_sn_2 .card_content .cnt_title{font-size:11px;letter-spacing:-0.27px;line-height:17px;} .game_card_item.preset_sn_2 .card_content .cnt_value{font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_3 .foreground .disable_background{width:100%;height:100%;background:#283240;} .game_card_item.preset_sn_3 .decoration .sync_card{position:absolute;width:74px;line-height:20px;text-align:center;color:rgba(255,255,255,153);right:20px;top:16px;border-radius:2px;border:solid 1px rgba(255,255,255,153);opacity:0.6;font-size:11px;letter-spacing:-0.27px;} .game_card_item.preset_sn_3 .card_content .profile_image{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_3 .card_content .user_info{position:absolute;left:20px;bottom:16px;} .game_card_item.preset_sn_3 .card_content .user_info.wrong_sync{opacity:0.4;} .game_card_item.preset_sn_3 .card_content .nickname{font-size:16px;font-weight:700;line-height:24px;} .game_card_item.preset_sn_3 .card_content .level{margin-top:1px;font-size:11px;line-height:17px;} .game_card_item.preset_sn_3 .card_content .game_cnt{position:absolute;left:178px;bottom:16px;} .game_card_item.preset_sn_3 .card_content .achievement_cnt{position:absolute;left:245px;bottom:16px;} .game_card_item.preset_sn_3 .card_content .cnt_title{line-height:17px;font-size:11px;letter-spacing:-0.27px;} .game_card_item.preset_sn_3 .card_content .cnt_value{line-height:24px;font-size:16px;font-weight:700;letter-spacing:-0.39px;} .game_card_item.preset_sn_3 .card_content .init_info{position:absolute;left:20px;top:72px;color:#FFF;} .game_card_item.preset_sn_3 .card_content .init_title{font-size:13px;font-weight:700;line-height:20px;letter-spacing:-0.31px;} .game_card_item.preset_sn_3 .card_content .init_title .inline_loader{width:16px;height:16px;margin:2px 4px 0 0;vertical-align:top;} .game_card_item.preset_sn_3 .card_content .init_desc{color:#bfe1ff;font-size:12px;line-height:18px;margin-top:1px;letter-spacing:-0.29px;} .game_card_item.preset_sn_4 .foreground .disable_background{width:100%;height:100%;background:#283240;} .game_card_item.preset_sn_4 .decoration .sync_card{position:absolute;width:74px;line-height:20px;text-align:center;color:rgba(255,255,255,153);right:20px;top:16px;border-radius:2px;border:solid 1px rgba(255,255,255,153);opacity:0.6;font-size:11px;letter-spacing:-0.27px;} .game_card_item.preset_sn_4 .card_content .profile_image{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_4 .card_content.layout_1 .user_info{position:absolute;left:20px;bottom:16px;} .game_card_item.preset_sn_4 .card_content.layout_1 .user_info.wrong_sync{opacity:0.4;} .game_card_item.preset_sn_4 .card_content.layout_1 .nickname{font-size:16px;font-weight:700;line-height:24px;letter-spacing:-0.39px;} .game_card_item.preset_sn_4 .card_content.layout_1 .level{margin-top:1px;font-size:11px;line-height:17px;letter-spacing:-0.27px;} .game_card_item.preset_sn_4 .card_content.layout_2 .user_info{position:absolute;left:20px;bottom:46px;} .game_card_item.preset_sn_4 .card_content.layout_2 .user_info.wrong_sync{opacity:0.4;} .game_card_item.preset_sn_4 .card_content.layout_2 .nickname{display:inline-block;font-size:16px;font-weight:700;line-height:24px;letter-spacing:-0.39px;} .game_card_item.preset_sn_4 .card_content.layout_2 .level{display:inline-block;margin:7px 0 0 8px;font-size:11px;line-height:17px;letter-spacing:-0.27px;} .game_card_item.preset_sn_4 .card_content .game_cnt{position:absolute;left:178px;bottom:16px;} .game_card_item.preset_sn_4 .card_content .achievement_cnt{position:absolute;left:245px;bottom:16px;} .game_card_item.preset_sn_4 .card_content .cnt_title{line-height:17px;font-size:11px;letter-spacing:-0.27px;} .game_card_item.preset_sn_4 .card_content .cnt_value{line-height:24px;font-size:16px;font-weight:700;letter-spacing:-0.39px;} .game_card_item.preset_sn_4 .card_content .trophy_list{position:absolute;left:20px;bottom:18px;line-height:22px;font-size:15px;font-weight:700;letter-spacing:-0.36px;} .game_card_item.preset_sn_4 .card_content .trophy_icon{height:18px;margin:2px 2px 0 0;} .game_card_item.preset_sn_4 .card_content .trophy_value{margin-right:16px;} .game_card_item.preset_sn_4 .card_content .trophy_value:last-child{margin-right:0px;} .game_card_item.preset_sn_4 .card_content .init_info{position:absolute;left:20px;top:72px;color:#FFF;} .game_card_item.preset_sn_4 .card_content .init_title{font-size:13px;font-weight:700;line-height:20px;letter-spacing:-0.31px;} .game_card_item.preset_sn_4 .card_content .init_title .inline_loader{width:16px;height:16px;margin:2px 4px 0 0;vertical-align:top;} .game_card_item.preset_sn_4 .card_content .init_desc{color:#bfe1ff;font-size:12px;line-height:18px;margin-top:1px;letter-spacing:-0.29px;} .game_card_item.preset_sn_5 .card_content .profile_image_wrap{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_5 .card_content .profile_image{width:48px;height:48px;border-radius:10px;object-fit:cover;} .game_card_item.preset_sn_5 .card_content .top_left_text{position:absolute;top:16px;left:20px;} .game_card_item.preset_sn_5 .card_content .bottom_left_text{position:absolute;bottom:16px;left:20px;} .game_card_item.preset_sn_5 .card_content .bottom_right_text{position:absolute;bottom:18px;right:20px;} .game_card_item.preset_sn_5 .card_content.layout_1 .card_name{font-size:13px;font-weight:700;letter-spacing:-0.31px;line-height:19px;max-width:295px;} .game_card_item.preset_sn_5 .card_content.layout_1 .id_title{font-size:12px;letter-spacing:-0.29px;line-height:18px;} .game_card_item.preset_sn_5 .card_content.layout_1 .id_text{font-size:14px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_5 .card_content.layout_1 .free_text{font-size:12px;letter-spacing:-0.29px;line-height:18px;max-width:136px;overflow-wrap:break-word;} .game_card_item.preset_sn_5 .card_content.layout_2 .card_name{font-size:13px;font-weight:700;letter-spacing:-0.31px;line-height:19px;max-width:295px;} .game_card_item.preset_sn_5 .card_content.layout_2 .id_text{font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;max-width:295px;} .game_card_item.preset_sn_5 .card_content.layout_2 .free_text{font-size:13px;letter-spacing:-0.31px;line-height:19px;max-width:295px;} .game_card_item.preset_sn_5 .card_content.layout_3 .id_text{font-size:18px;font-weight:700;letter-spacing:-0.43px;line-height:27px;max-width:295px;} .game_card_item.preset_sn_5 .card_content.layout_3 .card_name{font-size:14px;font-weight:700;letter-spacing:-0.34px;line-height:20px;max-width:295px;} .game_card_item.preset_sn_5 .card_content.layout_3 .free_text{font-size:13px;letter-spacing:-0.31px;line-height:19px;max-width:295px;} .game_card_item.preset_sn_6 .card_content .profile_image_wrap{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_6 .card_content .profile_image{width:48px;height:48px;border-radius:10px;object-fit:cover;} .game_card_item.preset_sn_6 .card_content.layout_1 .user_info{position:absolute;bottom:16px;left:20px;} .game_card_item.preset_sn_6 .card_content.layout_1 .id_value{font-size:18px;font-weight:700;letter-spacing:-0.43px;line-height:27px;} .game_card_item.preset_sn_6 .card_content.layout_1 .hash_code{font-size:15px;letter-spacing:-0.36px;line-height:22px;} .game_card_item.preset_sn_6 .card_content.layout_2 .user_info{position:absolute;bottom:16px;left:20px;} .game_card_item.preset_sn_6 .card_content.layout_2 .id_value{font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;display:inline-block;vertical-align:top;} .game_card_item.preset_sn_6 .card_content.layout_2 .hash_code{font-size:16px;letter-spacing:-0.39px;line-height:24px;margin-left:2px;display:inline-block;vertical-align:top;} .game_card_item.preset_sn_6 .card_content.layout_3 .user_info{position:absolute;bottom:16px;right:20px;} .game_card_item.preset_sn_6 .card_content.layout_3 .id_value{font-size:18px;font-weight:700;letter-spacing:-0.43px;line-height:27px;display:inline-block;vertical-align:top;} .game_card_item.preset_sn_6 .card_content.layout_3 .hash_code{font-size:18px;letter-spacing:-0.43px;line-height:27px;margin-left:2px;display:inline-block;vertical-align:top;} .game_card_item.preset_sn_7 .card_content .profile_image_wrap{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_7 .card_content .profile_image{width:48px;height:48px;border-radius:10px;object-fit:cover;} .game_card_item.preset_sn_7 .card_content .pre_url{opacity:0.7;} .game_card_item.preset_sn_7 .card_content.layout_1 .nickname{position:absolute;bottom:36px;left:20px;font-size:18px;font-weight:700;letter-spacing:-0.43px;line-height:27px;} .game_card_item.preset_sn_7 .card_content.layout_1 .id_value{position:absolute;bottom:16px;left:20px;font-size:13px;letter-spacing:-0.31px;line-height:19px;} .game_card_item.preset_sn_7 .card_content.layout_2 .nickname{position:absolute;top:16px;right:20px;font-size:15px;font-weight:700;letter-spacing:-0.36px;line-height:22px;} .game_card_item.preset_sn_7 .card_content.layout_2 .id_value{position:absolute;bottom:16px;right:20px;font-size:16px;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_7 .card_content.layout_3 .nickname{position:absolute;bottom:36px;right:20px;font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_7 .card_content.layout_3 .id_value{position:absolute;bottom:16px;right:20px;font-size:13px;letter-spacing:-0.31px;line-height:19px;} .game_card_item.preset_sn_8 .foreground .disable_background{width:100%;height:100%;background:#283240;} .game_card_item.preset_sn_8 .decoration .sync_card{position:absolute;width:74px;line-height:20px;text-align:center;color:rgba(255,255,255,153);right:20px;top:16px;border-radius:2px;border:solid 1px rgba(255,255,255,153);opacity:0.6;font-size:11px;letter-spacing:-0.27px;} .game_card_item.preset_sn_8 .card_content .profile_image{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_8 .card_content .user_info{position:absolute;left:20px;bottom:42px;} .game_card_item.preset_sn_8 .card_content .user_info.wrong_sync{opacity:0.4;} .game_card_item.preset_sn_8 .card_content .gamertag{font-size:15px;font-weight:700;line-height:22px;letter-spacing:-0.36px;} .game_card_item.preset_sn_8 .card_content div{vertical-align:top;} .game_card_item.preset_sn_8 .card_content.layout_3 .cnt_info{position:absolute;left:20px;bottom:16px;} .game_card_item.preset_sn_8 .card_content .gamer_score{position:absolute;left:20px;bottom:18px;font-size:13px;font-weight:700;line-height:20px;letter-spacing:-0.31px;} .game_card_item.preset_sn_8 .card_content.layout_3 .gamer_score{display:inline-block;position:relative;left:auto;bottom:auto;font-size:14px;font-weight:700;line-height:20px;letter-spacing:-0.34px;margin-right:24px;} .game_card_item.preset_sn_8 .card_content .gamer_score .cnt_title{display:inline-block;} .game_card_item.preset_sn_8 .card_content .gamer_score .gamer_score_icon{height:16px;margin:2px 2px 0 0;vertical-align:top;} .game_card_item.preset_sn_8 .card_content .gamer_score .cnt_value{display:inline-block;} .game_card_item.preset_sn_8 .card_content.layout_1 .game_cnt{position:absolute;left:178px;bottom:16px;} .game_card_item.preset_sn_8 .card_content.layout_2 .game_cnt{position:absolute;left:auto;bottom:41px;right:20px;width:84px;} .game_card_item.preset_sn_8 .card_content.layout_3 .game_cnt{display:inline-block;margin-right:24px;} .game_card_item.preset_sn_8 .card_content.layout_1 .game_cnt .cnt_title{font-size:11px;line-height:17px;letter-spacing:-0.27px;} .game_card_item.preset_sn_8 .card_content.layout_2 .game_cnt .cnt_title{display:inline-block;font-size:11px;line-height:20px;letter-spacing:-0.27px;} .game_card_item.preset_sn_8 .card_content.layout_3 .game_cnt .cnt_title{display:inline-block;} .game_card_item.preset_sn_8 .card_content.layout_3 .game_cnt .cnt_title .game_cnt_icon{height:16px;margin:1px 3px 0 0;vertical-align:top;} .game_card_item.preset_sn_8 .card_content.layout_1 .game_cnt .cnt_value{font-size:16px;font-weight:700;line-height:24px;letter-spacing:-0.39px;} .game_card_item.preset_sn_8 .card_content.layout_2 .game_cnt .cnt_value{display:inline-block;float:right;font-size:14px;font-weight:700;line-height:20px;letter-spacing:-0.34px;} .game_card_item.preset_sn_8 .card_content.layout_3 .game_cnt .cnt_value{display:inline-block;font-size:14px;font-weight:700;line-height:20px;letter-spacing:-0.34px;} .game_card_item.preset_sn_8 .card_content.layout_1 .achievement_cnt{position:absolute;left:245px;bottom:16px;} .game_card_item.preset_sn_8 .card_content.layout_2 .achievement_cnt{position:absolute;left:auto;bottom:16px;right:20px;width:84px;} .game_card_item.preset_sn_8 .card_content.layout_3 .achievement_cnt{display:inline-block;} .game_card_item.preset_sn_8 .card_content.layout_1 .achievement_cnt .cnt_title{font-size:11px;line-height:17px;letter-spacing:-0.27px;} .game_card_item.preset_sn_8 .card_content.layout_2 .achievement_cnt .cnt_title{display:inline-block;font-size:11px;line-height:20px;letter-spacing:-0.27px;} .game_card_item.preset_sn_8 .card_content.layout_3 .achievement_cnt .cnt_title{display:inline-block;} .game_card_item.preset_sn_8 .card_content.layout_3 .achievement_cnt .cnt_title .achievement_cnt_icon{height:16px;margin:1px 2px 0 0;vertical-align:top;} .game_card_item.preset_sn_8 .card_content.layout_1 .achievement_cnt .cnt_value{font-size:16px;font-weight:700;line-height:24px;letter-spacing:-0.39px;} .game_card_item.preset_sn_8 .card_content.layout_2 .achievement_cnt .cnt_value{display:inline-block;float:right;font-size:14px;font-weight:700;line-height:20px;letter-spacing:-0.34px;} .game_card_item.preset_sn_8 .card_content.layout_3 .achievement_cnt .cnt_value{display:inline-block;font-size:14px;font-weight:700;line-height:20px;letter-spacing:-0.34px;} .game_card_item.preset_sn_8 .card_content .init_info{position:absolute;left:20px;top:72px;color:#FFF;} .game_card_item.preset_sn_8 .card_content .init_title{font-size:13px;font-weight:700;line-height:20px;letter-spacing:-0.31px;} .game_card_item.preset_sn_8 .card_content .init_title .inline_loader{width:16px;height:16px;margin:2px 4px 0 0;vertical-align:top;} .game_card_item.preset_sn_8 .card_content .init_desc{color:#bfe1ff;font-size:12px;line-height:18px;margin-top:1px;letter-spacing:-0.29px;} .game_card_item.preset_sn_9 .card_content .profile_image_wrap{position:absolute;width:48px;height:48px;top:62px;left:30px;border-radius:10px;} .game_card_item.preset_sn_9 .card_content .profile_image{width:48px;height:48px;border-radius:10px;object-fit:cover;} .game_card_item.preset_sn_9 .card_content.layout_1 .channel{position:absolute;bottom:38px;left:20px;font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_9 .card_content.layout_1 .free_text{position:absolute;bottom:16px;left:20px;font-size:12px;letter-spacing:-0.29px;line-height:20px;} .game_card_item.preset_sn_9 .card_content.layout_2 .channel{position:absolute;bottom:18px;left:20px;font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_9 .card_content.layout_2 .free_text{position:absolute;bottom:42px;left:20px;font-size:12px;letter-spacing:-0.29px;line-height:20px;} .game_card_item.preset_sn_9 .card_content.layout_3 .channel{position:absolute;bottom:38px;right:20px;font-size:16px;font-weight:700;letter-spacing:-0.39px;line-height:24px;} .game_card_item.preset_sn_9 .card_content.layout_3 .free_text{position:absolute;bottom:16px;right:20px;font-size:12px;letter-spacing:-0.29px;line-height:20px;} /******** 카드 페이지 */ #userBody .card_header{padding-top:0px;} #userBody .card_header .card_header_title{line-height:38px;display:inline-block;} #userBody .card_header .card_header_title img{height:24px;vertical-align:top;margin:7px 0 0 4px;} #userBody .card_header .card_view_cnt_wrap{margin-top:4px;line-height:19px;} #userBody .card_header .card_view_cnt_wrap .card_view_cnt{margin-right:12px;} #userBody .card_header .card_view_cnt_wrap .card_view_cnt:last-child{margin-right:0px;margin-left:12px;} #userBody .card_header .card_view_cnt_wrap .cnt_value{margin-left:8px;} #userBody .card_header .card_view_cnt_wrap .cnt_divider{vertical-align:top;width:1px;height:12px;margin-top:3px;background:#ced8e5;} #userBody .card_header .card_tab_menu{border-bottom:solid 1px #ebeff8;margin-top:38px;margin-bottom:16px;} #userBody .card_header .card_tab_menu .card_tab_button{line-height:27px;padding-bottom:10px;margin-right:20px;user-select:none;cursor:pointer;} #userBody .card_header .card_tab_menu .card_tab_button.selected{color:#031827;padding-bottom:8px;border-bottom:solid 2px #3f9dff;} #userBody .card_header .card_tab_menu .card_tab_button:last-child{margin-right:0;} #userBody .card_view_cnt_wrap.mobile_cnt_wrap{margin-top:49px;margin-bottom:4px;line-height:18px;background:#ebeff8;font-size:12px;padding:8px 16px;} #userBody .card_view_cnt_wrap.mobile_cnt_wrap .card_view_cnt{display:block;margin-top:4px;} #userBody .card_view_cnt_wrap.mobile_cnt_wrap .card_view_cnt:first-child{margin-top:0;} #userBody .card_view_cnt_wrap.mobile_cnt_wrap .cnt_value{margin-left:0px;float:right;} #userBody .card_view_cnt_wrap.mobile_cnt_wrap .cnt_divider{display:none;} #userBody .game_card_list_header{line-height:36px;} #userBody .game_card_list_header .right_button_wrap{float:right;vertical-align:top;} #userBody .game_card_list_header .right_button_wrap .btn_r{width:86px;margin-left:4px;} @media only screen and (max-width:599px) { #userBody .game_card_list_header .right_button_wrap{float:none;vertical-align:top;position:fixed;z-index:1100;bottom:0;left:0;background:#FFF;width:100vw;height:55px;padding:0 16px;text-align:center;} #userBody .game_card_list_header .right_button_wrap .btn_r{width:calc(50% - 4px);margin:9px 8px 0 0;} #userBody .game_card_list_header .right_button_wrap .btn_r:last-child{margin-right:0;} #userBody .game_card_list_header .right_button_wrap .btn_r.single_button{width:100%;margin:9px 0 0 0;max-width:320px;} } #userBody .game_card_tab_button_wrap{display:inline-block;vertical-align:top;width:100vw;position:fixed;top:44px;left:0;background:#FFF;z-index:1000;transition:top 0.15s linear;border-bottom:solid 1px #EBEFF8;} #userBody .game_card_tab_button_wrap.snap_top{top:-4px;} #userBody .game_card_tab_button{text-align:center;width:25%;height:48px;display:inline-block;vertical-align:top;border-bottom:solid 2px transparent;} #userBody .game_card_tab_button.selected{border-bottom:solid 2px #3f9dff;} #userBody .game_card_tab_button .button_text{line-height:46px;} #userBody .game_card_tab_button.selected .button_text{color:#031827;} #userBody .card_list .game_card_list{margin-top:20px;} #userBody .card_list .game_card_list .game_card_item_wrap{vertical-align:top;display:inline-block;margin-bottom:16px;margin-right:16px;width:309px;height:192px;} #userBody .card_list .game_card_list .game_card_item_wrap .game_card_item{transform:scale(0.9223);} #userBody .card_list .game_card_list .game_card_item_wrap:nth-child(3n){margin-right:0;} #userBody .card_list .game_card_list .game_card_item_wrap .empty_game_card_item{width:100%;height:100%;border-radius:8px;border:dashed 2px #b2bdce;text-align:center;cursor:pointer;} #userBody .card_list .game_card_list .game_card_item_wrap .empty_game_card_item img{height:48px;margin-top:56px;} #userBody .card_list .game_card_list .game_card_item_wrap .empty_game_card_item .empty_text{line-height:20px;margin-top:8px;} @media only screen and (max-width:366px) { #userBody .card_list .game_card_list .game_card_item_wrap .empty_game_card_item img{margin-top:40px;} } #userBody .private_info{margin-top:12px;} #userBody .private_info .description{text-align:center;border-radius:13px;line-height:28px;padding:12px 16px;} #userBody .private_info .description .description_image{height:24px;margin:2px 8px 0 0;vertical-align:top;} #userBody .private_info .description .small_icon{height:16px;margin:6px 0px 0 5px;vertical-align:top;} #userBody .private_info .description .privacy_button{cursor:pointer;} #userBody .card_list .game_card_list .inline_private_info{margin-bottom:16px;} #userBody .card_list .game_card_list .inline_private_info .private_info{margin-top:0;} @media only screen and (max-width:999px) and (min-width:726px) { .mobile_width #userBody .card_list .game_card_list{margin:20px auto 0 auto;width:686px;} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap{width:335px;height:208px;} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap .game_card_item{transform:scale(1);} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap:nth-child(3n){margin-right:16px;} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap:nth-child(2n){margin-right:0px;} } @media only screen and (max-width:725px) and (min-width:600px) { .mobile_width #userBody .card_list .game_card_list{margin:20px auto 0 auto;width:335px;} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap{width:335px;height:208px;margin-right:0;} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap .game_card_item{transform:scale(1);} .mobile_width #userBody .card_list .game_card_list .game_card_item_wrap:nth-child(3n){margin-right:0px;} } @media only screen and (max-width:599px) { #userBody .card_list{padding:0 16px;} #userBody .card_list .game_card_list{margin:16px auto 0 auto;width:335px;} #userBody .card_list .game_card_list .game_card_item_wrap{width:335px;height:208px;margin-right:0;} #userBody .card_list .game_card_list .game_card_item_wrap .game_card_item{transform:scale(1);} #userBody .private_info .description{line-height:22px;font-size:13px;} #userBody .private_info .description .description_image{height:22px;margin:0 2px 0 0;} #userBody .private_info .description .small_icon{margin:3px 0px 0 5px;} #userBody .private_info .description .privacy_button{font-size:13px;} } @media only screen and (max-width:366px) { #userBody .card_list .game_card_list{width:288px;} #userBody .card_list .game_card_list .game_card_item_wrap{width:288px;height:179px;} #userBody .card_list .game_card_list .game_card_item_wrap .game_card_item{transform:scale(0.8597);} } /**************************************************************** * addCardPopup ****************************************************************/ #addCardPopup{background:#FFF;padding:80px 0px;min-height:100vh;} #addCardPopup .add_card_wrap{text-align:center;position:relative;margin:0 auto;width:calc(100% - 32px);max-width:960px;} #addCardPopup .mobile_header{display:none;} #addCardPopup .close_button{position:absolute;height:40px;top:-20px;right:0;cursor:pointer;} #addCardPopup .popup_title{line-height:38px;} #addCardPopup .card_type_section{margin-top:48px;} #addCardPopup .card_type_section .section_title{line-height:25px;} #addCardPopup .card_type_section .section_help{line-height:18px;margin-top:8px;} #addCardPopup .card_type_section .section_help .help_title{margin-right:4px;} #addCardPopup .card_type_section .select_card_list{margin-top:20px;} #addCardPopup .card_type_section .select_card_list .select_card_item{padding-top:28px;width:136px;height:150px;background:#ebeff8;border-radius:15px;vertical-align:top;margin-right:32px;cursor:pointer;user-select:none;} #addCardPopup .card_type_section .select_card_list .select_card_item:last-child{margin-right:0;} #addCardPopup .card_type_section .select_card_list .select_card_item.coming_soon{opacity:0.4;cursor:inherit;} #addCardPopup .card_type_section .select_card_list .select_card_item.have_card{opacity:0.4;cursor:inherit;} #addCardPopup .card_type_section .select_card_list .select_card_item .card_preview_image{height:48px;} #addCardPopup .card_type_section .select_card_list .select_card_item .card_title{line-height:20px;margin-top:8px;} #addCardPopup .card_type_section .select_card_list .select_card_item .card_desc{line-height:17px;margin-top:4px;} @media only screen and (max-width:599px) { #addCardPopup{padding:72px 0 80px 0;} #addCardPopup .add_card_wrap{text-align:left;} #addCardPopup .close_button{display:none;} #addCardPopup .mobile_header{display:block;position:fixed;top:0;left:0;height:44px;background:#FFF;width:100%;line-height:44px;text-align:center;z-index:5;} #addCardPopup .mobile_header .back_button{position:absolute;height:26px;left:16px;top:9px;} #addCardPopup .popup_title{width:240px;} #addCardPopup .card_type_section{margin-top:32px;} #addCardPopup .card_type_section .select_card_list{margin-top:16px;} #addCardPopup .card_type_section .select_card_list .select_card_item{padding-top:16px;width:calc(33vw - 18px);height:113px;border-radius:13px;margin-right:12px;text-align:center;} #addCardPopup .card_type_section .select_card_list .select_card_item:nth-child(3n){margin-right:0;} #addCardPopup .card_type_section .select_card_list .select_card_item .card_preview_image{height:38px;} #addCardPopup .card_type_section .select_card_list .select_card_item .card_title{margin-top:4px;} #addCardPopup .card_type_section .select_card_list .select_card_item .card_desc{margin-top:2px;} } /**************************************************************** * changeCardOrderPopup ****************************************************************/ #changeCardOrderPopup{background:#FFF;padding:80px 0px;min-height:100vh;} #changeCardOrderPopup .change_order_wrap{position:relative;margin:0 auto;width:calc(100% - 32px);max-width:960px;} #changeCardOrderPopup .mobile_header{display:none;} #changeCardOrderPopup .close_button{position:absolute;height:40px;top:-20px;right:0;cursor:pointer;} #changeCardOrderPopup .popup_title{line-height:38px;text-align:center;} #changeCardOrderPopup .card_cnt{margin-top:50px;line-height:22px;} #changeCardOrderPopup .card_order_list{margin-top:24px;} #changeCardOrderPopup .card_order_list .card_order_item{width:100%;padding:12px 0;border-bottom:solid 1px #ebeff8;} #changeCardOrderPopup .card_order_list .card_order_item:last-child{border-bottom:none;} #changeCardOrderPopup .card_order_list .card_order_item > span{vertical-align:top;} #changeCardOrderPopup .card_order_list .card_order_item .order_number{width:52px;text-align:center;line-height:56px;} #changeCardOrderPopup .card_order_list .card_order_item .game_card_wrap{width:90px;height:56px;} #changeCardOrderPopup .card_order_list .card_order_item .game_card_wrap .game_card_item{transform:scale(0.2686);} #changeCardOrderPopup .card_order_list .card_order_item .text_wrap{margin-left:16px;padding-top:8px;} #changeCardOrderPopup .card_order_list .card_order_item .text_wrap .card_title{line-height:22px;} #changeCardOrderPopup .card_order_list .card_order_item .text_wrap .card_title .lock_icon{height:16px;margin:3px 1px 0 0;} #changeCardOrderPopup .card_order_list .card_order_item .text_wrap .card_preview_button{line-height:18px;cursor:pointer;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap{float:right;vertical-align:top;margin-top:10px;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_button{padding:0;width:36px;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_button img{height:32px;margin-top:1px;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_up_button img{transform:rotate(180deg);} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_down_button{margin-left:8px;} @media only screen and (max-width:599px) { #changeCardOrderPopup{padding:60px 0 80px 0;} #changeCardOrderPopup .mobile_header{display:block;position:fixed;top:0;left:0;height:44px;background:#FFF;width:100%;line-height:44px;text-align:center;z-index:5;} #changeCardOrderPopup .mobile_header .back_button{position:absolute;height:26px;left:16px;top:9px;} #changeCardOrderPopup .close_button{display:none;} #changeCardOrderPopup .popup_title{display:none;} #changeCardOrderPopup .card_cnt{margin-top:0px;} #changeCardOrderPopup .card_order_list{margin-top:4px;} #changeCardOrderPopup .card_order_list .card_order_item .order_number{width:28px;text-align:left;line-height:50px;} #changeCardOrderPopup .card_order_list .card_order_item .game_card_wrap{width:80px;height:50px;} #changeCardOrderPopup .card_order_list .card_order_item .game_card_wrap .game_card_item{transform:scale(0.2388);} #changeCardOrderPopup .card_order_list .card_order_item .text_wrap{margin-left:12px;padding-top:4px;width:calc(100% - 200px);} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap{margin-top:7px;} } @media only screen and (max-width:374px) { #changeCardOrderPopup .card_order_list .card_order_item .text_wrap{margin-left:8px;width:calc(100% - 180px);} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap{margin-top:10px;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_button{width:30px;height:30px;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_button img{height:26px;margin-top:1px;} #changeCardOrderPopup .card_order_list .card_order_item .order_button_wrap .move_down_button{margin-left:4px;} } /**************************************************************** * gameCardPresetPopup ****************************************************************/ #gameCardPresetPopup{background:#FFF;padding:80px 0px 370px 0;min-height:100vh;} #gameCardPresetPopup .game_card_preset_wrap{position:relative;margin:0 auto;width:calc(100% - 32px);max-width:960px;} #gameCardPresetPopup .mobile_header{display:none;} #gameCardPresetPopup .close_button{position:absolute;height:40px;top:-20px;right:0;cursor:pointer;} #gameCardPresetPopup .popup_title{line-height:38px;text-align:center;} @media only screen and (max-width:599px) { #gameCardPresetPopup{padding:72px 0 360px 0;} #gameCardPresetPopup .mobile_header{display:block;position:fixed;top:0;left:0;height:44px;background:#FFF;width:100%;line-height:44px;text-align:center;z-index:5;} #gameCardPresetPopup .mobile_header .back_button{position:absolute;height:26px;left:16px;top:9px;} #gameCardPresetPopup .close_button{display:none;} #gameCardPresetPopup .popup_title{display:none;} } #gameCardPresetPopup .card_component_form{width:320px;margin:50px auto 0 auto;} #gameCardPresetPopup .component_section{margin-bottom:40px;} #gameCardPresetPopup .component_section:last-child{margin-bottom:0px;} #gameCardPresetPopup .component_title{line-height:18px;} #gameCardPresetPopup .component_input{width:100%;} #gameCardPresetPopup .component_input .n_input_text{width:100%;} #gameCardPresetPopup .component_list{margin-top:12px;} #gameCardPresetPopup .component_list .component_item{width:72px;height:36px;line-height:36px;margin-right:10px;border-radius:8px;position:relative;vertical-align:top;background-color:#ebeff8;background-size:cover;background-position:center;text-align:center;user-select:none;cursor:pointer;} #gameCardPresetPopup .component_list .component_item .multi_line{line-height:15px;margin-top:3px;} #gameCardPresetPopup .component_list .selected_border{display:none;border-radius:8px;position:absolute;width:100%;height:100%;top:0;left:0;border:solid 2px #3f9dff;} #gameCardPresetPopup .component_list .selected_check{position:absolute;width:18px;height:18px;top:-6px;right:-6px;background:#3f9dff;border-radius:9px;} #gameCardPresetPopup .component_list .selected_check img{height:16px;margin:1px;} #gameCardPresetPopup .component_list .selected .selected_border{display:block;} @media only screen and (max-width:599px) { #gameCardPresetPopup .card_component_form{margin:0 auto;} } @media only screen and (max-width:355px) { #gameCardPresetPopup .card_component_form{width:100%;} } #gameCardPresetPopup .component_list .preset_type_item{width:99px;height:62px;margin:0 11px 11px 0;border-radius:4px;line-height:62px;} #gameCardPresetPopup .component_list .preset_type_item:nth-child(3n){margin-right:0;} #gameCardPresetPopup .component_list .preset_type_item:nth-last-child(-n+3){margin-bottom:0;} #gameCardPresetPopup .component_list .preset_type_item .selected_border{border-radius:4px;} @media only screen and (max-width:355px) { #gameCardPresetPopup .component_list .preset_type_item{width:calc(33vw - 18px);height:calc(20vw - 11px);margin:0 12px 11px 0;line-height:calc(20vw - 11px);} } #gameCardPresetPopup .component_list .image_item{width:36px;height:36px;margin:0 10px 12px 0;border-radius:18px;} #gameCardPresetPopup .component_list .image_item:nth-child(7n){margin-right:0;} #gameCardPresetPopup .component_list .image_item:nth-last-child(-n+7){margin-bottom:0;} #gameCardPresetPopup .component_list .image_item .selected_border{border-radius:18px;} #gameCardPresetPopup .component_list .custom_image_item{width:84px;height:36px;margin:0 10px 12px 0;border-radius:18px;background:#e5f3ff;line-height:36px;} #gameCardPresetPopup .component_list .custom_image_item.small_item{padding:0 16px;height:36px;margin:0 10px 12px 0;border-radius:18px;background:#e5f3ff;line-height:36px;} #gameCardPresetPopup .component_list .no_image_item{width:36px;height:36px;margin:0 10px 12px 0;border-radius:18px;line-height:36px;} #gameCardPresetPopup .component_list .no_image_item:nth-child(7n){margin-right:0;} #gameCardPresetPopup .component_list .no_image_item:nth-last-child(-n+7){margin-bottom:0;} #gameCardPresetPopup .component_list .no_image_item .selected_border{border-radius:18px;} @media only screen and (max-width:343px) { #gameCardPresetPopup .component_list .image_item:nth-child(7n){margin-right:10px;} #gameCardPresetPopup .component_list .image_item:nth-child(6n){margin-right:0px;} #gameCardPresetPopup .component_list .image_item:nth-last-child(-n+7){margin-bottom:12px;} #gameCardPresetPopup .component_list .image_item:nth-last-child(-n+6){margin-bottom:0px;} #gameCardPresetPopup .component_list .no_image_item:nth-child(7n){margin-right:10px;} #gameCardPresetPopup .component_list .no_image_item:nth-last-child(-n+7){margin-bottom:12px;} #gameCardPresetPopup .component_list .no_image_item:nth-child(6n){margin-right:0;} #gameCardPresetPopup .component_list .no_image_item:nth-last-child(-n+6){margin-bottom:0;} } #gameCardPresetPopup .component_game_item{margin-top:12px;cursor:pointer;} #gameCardPresetPopup .component_game_item .game_cover{vertical-align:top;width:48px;height:48px;border-radius:8px;background-color:#ebeff8;background-size:cover;background-position:center;} #gameCardPresetPopup .component_game_item .game_cover img{height:24px;margin:12px;} #gameCardPresetPopup .component_game_item .game_name{line-height:48px;vertical-align:top;width:calc(100% - 82px);margin:0 4px 0 10px;} #gameCardPresetPopup .component_game_item .game_name .mobile_icon_new{height:20px;margin:14px 1px 0 0;} #gameCardPresetPopup .component_game_item .arrow_icon{height:20px;margin-top:14px;} #gameCardPresetPopup .custom_button_wrap{margin-top:12px;} #gameCardPresetPopup .custom_button_wrap .btn_r{font-weight:700;padding:0 24px;margin-right:8px;} #gameCardPresetPopup .custom_button_wrap .btn_r:last-child{margin-right:0;} #gameCardPresetPopup .custom_button_wrap input{display:none;} #gameCardPresetPopup .form_submit_button{width:320px;margin:36px auto 0 auto;} #gameCardPresetPopup .form_submit_button .btn_r{width:100%;} @media only screen and (max-width:599px) { #gameCardPresetPopup .form_submit_button{width:100%;max-width:320px;} } #gameCardPresetPopup .card_preview_wrap{position:fixed;bottom:0;left:0;width:100%;height:250px;border-top:solid 1px #ebeff8;background:#FFF;} #gameCardPresetPopup .card_preview_wrap .upper_gradation{pointer-events:none;width:100%;height:90px;position:absolute;top:-90px;left:0;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.75) 45%, rgba(245, 247, 252, 0.9) 83%, rgba(239, 241, 245, 0.9) 97%);} #gameCardPresetPopup .card_preview_wrap .game_card_item_wrap{width:335px;height:208px;margin:20px auto 0 auto;} @media only screen and (max-width:355px) { #gameCardPresetPopup .card_preview_wrap{height:219px;} #gameCardPresetPopup .card_preview_wrap .upper_gradation{height:60px;top:-60px;} #gameCardPresetPopup .card_preview_wrap .game_card_item_wrap{width:288px;height:179px;margin:20px auto 0 auto;} #gameCardPresetPopup .card_preview_wrap .game_card_item_wrap .game_card_item{transform:scale(0.8597);} } /**************************************************************** * gameCardPopup ****************************************************************/ #detailGameCardPopup{width:383px;border-radius:8px;background:#FFF;position:relative;} #detailGameCardPopup .game_card_title{width:calc(100% - 24px);line-height:24px;padding:16px 24px;border-bottom:solid 1px #ebeff8;} #detailGameCardPopup .game_card_title .private_icon{height:20px;vertical-align:top;margin:2px 2px 0 0;} #detailGameCardPopup .game_card_title .game_card_title_help{line-height:18px;margin-top:2px;} #detailGameCardPopup .close_button{position:absolute;top:16px;right:24px;height:24px;cursor:pointer;} #detailGameCardPopup .game_card_content{padding:16px 24px 20px 24px;} #detailGameCardPopup .upper_button_wrap{line-height:20px;margin-bottom:16px;} #detailGameCardPopup .upper_button_wrap .save_image_button{line-height:20px;cursor:pointer;} #detailGameCardPopup .upper_button_wrap .save_image_button.disabled_button{opacity:0.3;} #detailGameCardPopup .upper_button_wrap .save_image_button img{height:20px;margin-right:1px;} #detailGameCardPopup .upper_button_wrap .sync_request_button{line-height:20px;cursor:pointer;margin-left:12px;} #detailGameCardPopup .upper_button_wrap .sync_request_button.disabled_button{opacity:0.3;} #detailGameCardPopup .upper_button_wrap .sync_request_button img{height:20px;margin-right:1px;} #detailGameCardPopup .upper_button_wrap .option_button{float:right;cursor:pointer;} #detailGameCardPopup .upper_button_wrap .option_button img{height:20px;} #detailGameCardPopup .game_card_wrap{position:relative;} #detailGameCardPopup .game_card_wrap .game_card_image_item_wrap{position:absolute;top:0;left:0;display:none;} #detailGameCardPopup .sync_info_wrap{margin-top:20px;text-align:center;} #detailGameCardPopup .sync_info_wrap .cnt_info{width:calc(50% - 4px);vertical-align:top;border-radius:8px;padding:8px 0 10px;} #detailGameCardPopup .sync_info_wrap .cnt_info:hover{background:#e5f3ff;} #detailGameCardPopup .sync_info_wrap .cnt_info .cnt_value{line-height:27px;} #detailGameCardPopup .sync_info_wrap .cnt_info .cnt_title{line-height:19px;margin-top:2px;} #detailGameCardPopup .sync_info_wrap .divider{width:1px;height:60px;margin:2px 3px 0 3px;background:#ced8e5;} #detailGameCardPopup .private_info{margin-top:16px;} #detailGameCardPopup .private_info .description{text-align:center;border-radius:13px;line-height:22px;padding:12px 16px;font-size:13px;} #detailGameCardPopup .private_info .description .description_image{height:22px;margin:0 2px 0 0;vertical-align:top;} #detailGameCardPopup .private_info .description .small_icon{height:16px;margin:3px 0px 0 5px;vertical-align:top;} #detailGameCardPopup .private_info .description .privacy_button{cursor:pointer;font-size:13px;} #detailGameCardPopup .lower_button_wrap{} #detailGameCardPopup .lower_button_wrap .single_button{width:100%;margin-top:24px;position:relative;} #detailGameCardPopup .lower_button_wrap .multi_button{width:calc(50% - 4px);margin-right:8px;margin-top:20px;position:relative;} #detailGameCardPopup .lower_button_wrap .multi_button:last-child{margin-right:0;} #detailGameCardPopup .lower_button_wrap .sync_badge{position:absolute;top:-6px;right:-6px;line-height:18px;border-radius:11px;text-align:center;padding:0 6px;} /**************************************************************** * gameCardMobilePopup ****************************************************************/ #detailGameCardMobilePopup{width:100vw;border-top-left-radius:13px;border-top-right-radius:13px;background:#FFF;} #detailGameCardMobilePopup .game_card_header{padding:20px 16px 18px 16px;} #detailGameCardMobilePopup .title_row{} #detailGameCardMobilePopup .game_card_title{vertical-align:top;line-height:26px;amrgin-right:8px;} #detailGameCardMobilePopup .game_card_title.btn_cnt_1{width:calc(100% - 30px);} #detailGameCardMobilePopup .game_card_title.btn_cnt_2{width:calc(100% - 64px);} #detailGameCardMobilePopup .game_card_title.btn_cnt_3{width:calc(100% - 98px);} #detailGameCardMobilePopup .game_card_title .private_icon{height:20px;vertical-align:top;margin:3px 2px 0 0;} #detailGameCardMobilePopup .icon_button_wrap{vertical-align:top;text-align:right;} #detailGameCardMobilePopup .icon_button_wrap .icon_button{margin:3px 12px 0 0;vertical-align:top;} #detailGameCardMobilePopup .icon_button_wrap .icon_button.disabled_button{opacity:0.3;} #detailGameCardMobilePopup .icon_button_wrap .icon_button:last-child{margin-right:0;} #detailGameCardMobilePopup .icon_button_wrap .icon_button img{height:22px;} #detailGameCardMobilePopup .game_card_title_help{line-height:18px;margin-top:1px;} #detailGameCardMobilePopup .game_card_content{width:100%;padding:0 16px 16px 16px;} #detailGameCardMobilePopup .game_card_wrap{position:relative;width:335px;margin:auto;} #detailGameCardMobilePopup .game_card_wrap .game_card_image_item_wrap{position:fixed;bottom:0;left:0;z-index:-100;display:none;} #detailGameCardMobilePopup .sync_info_wrap{margin-top:20px;text-align:center;} #detailGameCardMobilePopup .sync_info_wrap .cnt_info{width:calc(50% - 1px);vertical-align:top;} #detailGameCardMobilePopup .sync_info_wrap .cnt_info .cnt_value{line-height:27px;} #detailGameCardMobilePopup .sync_info_wrap .cnt_info .cnt_title{line-height:19px;margin-top:2px;} #detailGameCardMobilePopup .sync_info_wrap .divider{width:1px;height:42px;margin-top:2px;background:#ced8e5;} #detailGameCardMobilePopup .private_info{margin-top:16px;width:335px;margin:20px auto 0 auto;} #detailGameCardMobilePopup .private_info .description{text-align:center;border-radius:13px;line-height:22px;padding:12px 16px;font-size:13px;} #detailGameCardMobilePopup .private_info .description .description_image{height:22px;margin:0 2px 0 0;vertical-align:top;} #detailGameCardMobilePopup .private_info .description .small_icon{height:16px;margin:3px 0px 0 5px;vertical-align:top;} #detailGameCardMobilePopup .private_info .description .privacy_button{cursor:pointer;font-size:13px;} #detailGameCardMobilePopup .lower_button_wrap{text-align:center;} #detailGameCardMobilePopup .lower_button_wrap .single_button{width:100%;margin-top:24px;max-width:320px;} #detailGameCardMobilePopup .lower_button_wrap .multi_button{width:calc(50% - 4px);margin-right:8px;margin-top:24px;max-width:320px;} #detailGameCardMobilePopup .lower_button_wrap .multi_button:last-child{margin-right:0;} #detailGameCardMobilePopup .lower_button_wrap .sync_badge{position:absolute;top:-6px;right:-6px;line-height:18px;border-radius:11px;text-align:center;padding:0 6px;} @media only screen and (max-width:366px) { #detailGameCardMobilePopup .game_card_wrap{width:288px;height:179px;} #detailGameCardMobilePopup .game_card_wrap .game_card_item{transform:scale(0.8597);} #detailGameCardMobilePopup .private_info{width:100%;} #detailGameCardMobilePopup .game_card_wrap .game_card_image_item_wrap{width:288px;height:179px;} } .game_card_image_canvas_wrap{max-width:calc(100vw - 32px);width:335px;} .game_card_image_canvas_wrap img{width:100%;} /**************************************************************** * selectGameCardGamePopup ****************************************************************/ #selectGameCardGamePopup{max-width:calc(100vw - 32px);width:620px;height:565px;margin:auto;background:#ebeff8;border-radius:8px;box-shadow:0 3px 12px 0 rgba(61, 65, 77, 0.13);overflow:hidden;} #selectGameCardGamePopup .header{line-height:56px;height:57px;padding:0 16px;text-align:center;position:relative;border-bottom:solid 1px #ced8e5;background:#FFF;} #selectGameCardGamePopup .header .close_button{position:absolute;left:16px;top:0;cursor:pointer;user-select:none;} #selectGameCardGamePopup .header .close_button img{height:24px;vertical-align:top;margin:16px 4px 0 0;} #selectGameCardGamePopup .postable_search_wrap{width:100%;height:60px;position:relative;padding:12px 16px;} #selectGameCardGamePopup .postable_search_wrap .search_icon{height:24px;position:absolute;top:18px;left:28px;} #selectGameCardGamePopup .postable_search_wrap .postable_search_input{appearance:none;width:100%;height:36px;border:solid 1px #ced8e5;line-height:34px;border-radius:18px;background:#FFF;padding:0 40px;font-size:15px;color:#031827} #selectGameCardGamePopup .postable_search_wrap .postable_search_input::placeholder{color:#b2bdce;} #selectGameCardGamePopup .postable_search_wrap .input_cancel{top:13px;right:18px;} #selectGameCardGamePopup .postable_search_result{width:100%;height:541px;} #selectGameCardGamePopup .postable_search_result .search_result_list{width:100%;height:448px;overflow:auto;position:relative;} #selectGameCardGamePopup .postable_search_result .search_result_item{width:100%;cursor:pointer;} #selectGameCardGamePopup .postable_search_result .search_result_item .background{width:100%;padding:0 20px;} #selectGameCardGamePopup .postable_search_result .search_result_item.selected .background{background:#ced8e5;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_image{display:inline-block;vertical-align:top;width:48px;height:48px;border-radius:8px;margin:8px 12px 8px 0;background-size:cover;background-position:center;background-color:#FFF;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_text_wrap{display:inline-block;vertical-align:top;width:calc(100% - 60px);padding:12px 0;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_name{line-height:22px;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_name.single_line{line-height:40px;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_name .mobile_icon_new{height:20px;vertical-align:top;margin:1px 2px 0 0;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_name.single_line .mobile_icon_new{margin:10px 2px 0 0;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_name .badge{display:inline-block;line-height:16px;vertical-align:top;padding:0 4px;margin:3px 0 0 4px;border-radius:2px;background:#3f9dff;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_name.single_line .badge{margin:12px 0 0 4px;} #selectGameCardGamePopup .postable_search_result .search_result_item .postable_cnt{line-height:18px;} @media only screen and (max-width:599px) { #selectGameCardGamePopup{max-width:100vw;width:100vw;height:100vh;background:#FFF;border-radius:0px;box-shadow:none;} #selectGameCardGamePopup .header{line-height:44px;height:44px;padding:0;border-bottom:none;} #selectGameCardGamePopup .header .close_button{position:absolute;left:16px;top:9px;} #selectGameCardGamePopup .header .close_button img{height:26px;margin:0;} #selectGameCardGamePopup .postable_search_wrap{height:82px;padding:12px 16px 20px 16px;background:#FFF;} #selectGameCardGamePopup .postable_search_wrap .search_icon{top:25px;left:32px;} #selectGameCardGamePopup .postable_search_wrap .postable_search_input{border:none;height:50px;width:100%;border-radius:25px;box-shadow:0 4px 10px 6px rgba(3, 24, 39, 0.07);padding-left:46px;padding-right:40px;} #selectGameCardGamePopup .postable_search_wrap .input_cancel{top:19px;right:24px;} #selectGameCardGamePopup .postable_search_result{height:calc(100vh - 126px);} #selectGameCardGamePopup .postable_search_result .search_result_list{height:100%;padding-bottom:90px;overflow-scrolling:touch;} } #userBody .ad_chart_wrap{width:100%;max-width:588px;padding-bottom:32px;margin-bottom:32px;border-bottom:solid 1px #ebeff8;} #userBody .ad_chart_wrap .chart_wrap_item{width:100%;max-width:588px;min-height:500px;border-radius:13px;padding:18px 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);} #userBody .ad_chart_wrap .sponsored_chart_wrap{margin-bottom:16px;} #userBody .ad_chart_wrap .chart_title{line-height:22px;padding-bottom:15px;border-bottom:solid 1px #ebeff8;} #userBody .ad_chart_wrap .chart_title .csv_button{float:right;margin-top:-3px;} #userBody .ad_chart_wrap .chart_header{padding:16px 0;line-height:26px;} #userBody .ad_chart_wrap .chart_header .date_input{border:solid 1px #697b96;color:#697b96;border-radius:4px;height:26px;line-height:24px;} #userBody .ad_chart_wrap .chart_header .start_date{margin-left:12px;margin-right:8px;} #userBody .ad_chart_wrap .chart_header .end_date{margin-left:8px;} #userBody .ad_chart_wrap .chart_header .chart_type_select{float:right;height:36px;background:#ebeff8;border-radius:8px;padding:6px 8px 6px 12px;vertical-align:top;margin-top:-5px;} #userBody .ad_chart_wrap .chart_header .chart_type_select .select_option_wrap{width:132px;top:40px;} #userBody .ad_chart_wrap .chart_area{width:100%;min-height:266px;} #userBody .ad_chart_wrap .chart_footer{margin-top:25px;} #userBody .ad_chart_wrap .chart_footer .footer_item{width:calc(33% - 16px);height:60px;vertical-align:top;border-right:solid 1px #ebeff8;margin-right:24px;} #userBody .ad_chart_wrap .chart_footer .footer_item:last-child{border-right:none;margin-right:0;} #userBody .ad_chart_wrap .chart_footer .footer_item .footer_title{padding-top:4px;line-height:18px;} #userBody .ad_chart_wrap .chart_footer .footer_item .footer_value{line-height:36px;margin-top:2px;} @media only screen and (max-width:599px) { #userBody .ad_chart_wrap{max-width:none;padding-bottom:0px;margin-bottom:0px;border-bottom:none;} #userBody .ad_chart_wrap .chart_wrap_item{max-width:none;min-height:535px;border-radius:0px;padding:16px;box-shadow:none;border-top:solid 8px #ebeff8;} #userBody .ad_chart_wrap .sponsored_chart_wrap{margin-bottom:0;} #userBody .ad_chart_wrap .chart_title{line-height:20px;padding-bottom:16px;font-size:14px;font-weight:700;} #userBody .ad_chart_wrap .chart_title .csv_button{float:right;margin-top:-4px;} #userBody .ad_chart_wrap .chart_header .date_range{display:none;} #userBody .ad_chart_wrap .chart_header .start_date{margin:0 4px 0 0;} #userBody .ad_chart_wrap .chart_header .end_date{margin:0 0 0 4px;} #userBody .ad_chart_wrap .chart_header .chart_type_select{display:block;width:132px;float:none;margin-top:16px;} #userBody .ad_chart_wrap .chart_footer .footer_item{width:calc(33% - 8px);margin-right:12px;} #userBody .ad_chart_wrap .chart_footer .footer_item .footer_value{font-size:18px;line-height:27px;} #userBody .ad_chart_wrap .chart_footer .footer_item .long_text{display:none;} } /* 일지 */ #userBody .feed_title .post_feed_header .cnt_wrap{vertical-align:top;} #userBody .feed_title .post_feed_header .cnt_wrap .title{line-height:33px;} #userBody .feed_title .post_feed_header .cnt_wrap .my_post_cnt{line-height:19px;} #userBody .feed_title .post_feed_header .write_post_button{width:110px;float:right;vertical-align:top;margin-top:9px;} #userBody .feed_title .post_feed_header .write_post_button img{height:18px;margin:8px 6px 0 0;} #userBody .feed_title .search_filter_wrap{line-height:36px;margin:16px 0 8px 0;} #userBody .feed_title .search_filter_wrap .search_result_cnt{line-height:22px;margin-bottom:10px;display:none;} #userBody .feed_title .search_filter_wrap .check_wrap .checkmark{top:8px;} #userBody .feed_title .search_filter_wrap .search_sort_wrap{float:right;vertical-align:top;} #userBody .feed_title .search_filter_wrap .select_option_wrap{width:120px;} #userBody .feed_title .search_filter_wrap .divider{width:1px;height:16px;background:#ced8e5;vertical-align:top;margin:10px 4px 0 4px;} #userBody .feed_title .search_filter_wrap .search_input_wrap{position:relative;vertical-align:top;} #userBody .feed_title .search_filter_wrap .search_input_wrap.search_off{width:48px;text-align:right;cursor:pointer;} #userBody .feed_title .search_filter_wrap .search_input_wrap .search_icon{height:16px;position:absolute;left:4px;top:10px;} #userBody .feed_title .search_filter_wrap .search_input_wrap.search_on .search_icon{left:8px;} #userBody .feed_title .search_filter_wrap .search_input_wrap .show_search_button{user-select:none;} #userBody .feed_title .search_filter_wrap .search_input_wrap .hide_search_button{user-select:none;cursor:pointer;} #userBody .feed_title .search_filter_wrap .search_input_wrap .user_post_search_input_box{overflow:hidden;display:inline-block;vertical-align:top;} #userBody .feed_title .search_filter_wrap .search_input_wrap .user_post_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;} #userBody .feed_title .search_filter_wrap .search_input_wrap .user_post_search_input_box input::placeholder{color:#697B96;} #userBody .feed_title .search_filter_wrap .search_input_wrap.search_on .user_post_search_input_box{display:inline-block;} #userBody .feed_title .search_filter_wrap .search_input_wrap.search_off .user_post_search_input_box{display:none;} #userBody .feed_title .search_filter_wrap .search_input_wrap.search_on .show_search_button{display:none;} #userBody .feed_title .search_filter_wrap .search_input_wrap.search_off .show_search_button{display:inline-block;} #userBody .feed_title .search_filter_wrap .search_input_wrap .user_post_search_input_box .input_cancel{top:1px;right:30px;} #userBody .feed_title .title_post_radio_wrap{display:none;} #userBody .feed_title .title_popular_tag_wrap{display:none;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userBody .feed_title{border-bottom:solid 1px #ebeff8;} .mobile_width #userBody .feed_title .post_feed_header{padding-top:24px;width:588px;margin-left:auto;margin-right:auto;} .mobile_width #userBody .feed_title .search_filter_wrap{width:588px;margin-left:auto;margin-right:auto;} .mobile_width #userBody .feed_list{margin-top:20px;width:588px;margin-left:auto;margin-right:auto;} .mobile_width #userBody .feed_title .title_post_radio_wrap{display:block;width:100%;border-top:solid 1px #ebeff8;} .mobile_width #userBody .feed_title .title_post_radio{width:588px;margin:auto;padding:12px 0;} .mobile_width #userBody .feed_title .title_post_radio .title{line-height:19px;} .mobile_width #userBody .feed_title .title_post_radio .title .expand_icon{height:24px;margin-top:-2px;float:right;} .mobile_width #userBody .feed_title .title_post_radio .radio_button_wrap{width:100%;height:0;overflow:hidden;} .mobile_width #userBody .feed_title .title_post_radio .radio_button_wrap.is_open{height:auto;} .mobile_width #userBody .feed_title .title_post_radio .post_radio_wrap{margin-top:12px;line-height:19px;} .mobile_width #userBody .feed_title .title_post_radio .post_radio_wrap .radio_item{margin-top:8px;} .mobile_width #userBody .feed_title .title_post_radio .post_radio_wrap .radio_item:first-child{margin-top:0px;} .mobile_width #userBody .feed_title .title_post_radio .show_family_button{width:100%;margin-top:16px;font-weight:700;} .mobile_width #userBody .feed_title .title_popular_tag_wrap{display:block;width:100%;border-top:solid 1px #ebeff8;} .mobile_width #userBody .feed_title .title_popular_tag{width:588px;margin:auto;padding:12px 0;} .mobile_width #userBody .feed_title .title_popular_tag .title{line-height:19px;} .mobile_width #userBody .feed_title .title_popular_tag .title .expand_icon{height:24px;margin-top:-2px;float:right;} .mobile_width #userBody .feed_title .title_popular_tag .popular_tag_wrap{width:100%;height:0;overflow:hidden;} .mobile_width #userBody .feed_title .title_popular_tag .popular_tag_wrap.is_open{height:auto;} .mobile_width #userBody .feed_title .title_popular_tag .popular_tag_list{margin-top:12px;} .mobile_width #userBody .feed_title .title_popular_tag .tag_item{line-height:28px;padding:0 6px;background:#ebeff8;border-radius:4px;margin:0 8px 8px 0;user-select:none;} .mobile_width #userBody .feed_title .title_popular_tag .tag_item.selected{background:#3f9dff;color:#FFF;} } @media only screen and (max-width:599px) { #userBody .feed_title .post_feed_header{display:none;} #userBody .feed_title .search_filter_wrap{width:100vw;padding:0 16px;margin:12px 0 4px 0;} #userBody .feed_title .search_filter_wrap .search_input_wrap .game_post_search_input_box input{width:160px;} #userBody .feed_list{margin-top:0px;} #userBody .feed_title .title_post_radio_wrap{display:block;width:100%;border-top:solid 1px #ebeff8;} #userBody .feed_title .title_post_radio{width:calc(100vw - 32px);margin:auto;padding:12px 0;} #userBody .feed_title .title_post_radio .title{line-height:19px;} #userBody .feed_title .title_post_radio .title .expand_icon{height:24px;margin-top:-2px;float:right;} #userBody .feed_title .title_post_radio .radio_button_wrap{width:100%;height:0;overflow:hidden;} #userBody .feed_title .title_post_radio .radio_button_wrap.is_open{height:auto;} #userBody .feed_title .title_post_radio .post_radio_wrap{margin-top:12px;line-height:19px;} #userBody .feed_title .title_post_radio .post_radio_wrap .radio_item{margin-top:8px;} #userBody .feed_title .title_post_radio .post_radio_wrap .radio_item:first-child{margin-top:0px;} #userBody .feed_title .title_post_radio .show_family_button{width:100%;margin-top:16px;font-weight:700;} #userBody .feed_title .title_popular_tag_wrap{display:block;width:100%;border-top:solid 1px #ebeff8;} #userBody .feed_title .title_popular_tag{width:calc(100vw - 32px);margin:auto;padding:12px 0;} #userBody .feed_title .title_popular_tag .title{line-height:19px;} #userBody .feed_title .title_popular_tag .title .expand_icon{height:24px;margin-top:-2px;float:right;} #userBody .feed_title .title_popular_tag .popular_tag_wrap{width:100%;height:0;overflow:hidden;} #userBody .feed_title .title_popular_tag .popular_tag_wrap.is_open{height:auto;} #userBody .feed_title .title_popular_tag .popular_tag_list{margin-top:12px;max-height:214px;} #userBody .feed_title .title_popular_tag .tag_item{line-height:29px;padding:0 6px;background:#ebeff8;border-radius:4px;margin:0 8px 8px 0;user-select:none;} #userBody .feed_title .title_popular_tag .tag_item.selected{background:#3f9dff;color:#FFF;} } #userBody .user_post_right_item{padding:48px 0;border-bottom:solid 1px #ebeff8;} #userBody .user_post_right_item:first-child{padding-top:58px;} #userBody .user_post_right_item:last-child{border-bottom:none;} #userBody .user_post_right_item .section_title{line-height:19px;margin-bottom:16px;} #userBody .recent_post_game_list .right_game_item{margin-top:18px;} #userBody .recent_post_game_list .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;} #userBody .recent_post_game_list .right_game_item .game_info_wrap{width:calc(100% - 68px);vertical-align:top;margin-top:8px;} #userBody .recent_post_game_list .right_game_item .game_info_wrap .game_name{line-height:20px;vertical-align:top;width:calc(100% - 26px);} #userBody .recent_post_game_list .right_game_item .game_info_wrap .game_name .mobile_icon_new{height:18px;margin:1px 2px 0 0;} #userBody .recent_post_game_list .right_game_item .library_state_button_square{height:24px;margin-left:2px;padding:0;vertical-align:top;cursor:pointer;} #userBody .recent_post_game_list .right_game_item .game_info_wrap .post_cnt_info{height:18px;line-height:18px;margin-top:2px;} #userBody .recent_post_game_list .right_game_item .game_info_wrap .post_cnt_info .post_cnt_button{cursor:pointer;} #userBody .recent_post_game_list .right_game_item .game_info_wrap .post_cnt_info .post_cnt_icon{height:16px;margin:1px 4px 0 0;} #userBody .post_tag_list .tag_list{overflow:hidden;max-height:200px;} #userBody .post_tag_list .tag_button{background:#ebeff8;vertical-align:top;max-width:100%;line-height:32px;border-radius:4px;margin:0 8px 8px 0;padding:0 8px;cursor:pointer;user-select:none;} #userBody .post_tag_list .tag_button.selected{background:#3F9DFF;color:#FFF;} #userBody .popular_review_list .right_game_item{margin-bottom:18px;} #userBody .popular_review_list .right_game_item:last-child{margin-bottom:0px;} #userBody .popular_review_list .right_game_item .game_cover{cursor:pointer;width:56px;height:56px;margin:2px 12px 0 0;vertical-align:top;border-radius:8px;background-size:cover;background-position:center;} #userBody .popular_review_list .right_game_item .game_info_wrap{width:calc(100% - 68px);vertical-align:top;position:relative;} #userBody .popular_review_list .right_game_item .game_info_wrap .game_name{cursor:pointer;line-height:20px;vertical-align:top;width:calc(100% - 26px);} #userBody .popular_review_list .right_game_item .game_info_wrap .game_name .mobile_icon_new{height:18px;margin:1px 2px 0 0;} #userBody .popular_review_list .right_game_item .library_state_button_square{height:24px;padding:0;vertical-align:top;cursor:pointer;position:absolute;top:0;right:0;} #userBody .popular_review_list .right_game_item .game_info_wrap .review_point_wrap{height:18px;line-height:18px;position:relative;margin-top:1px;} #userBody .popular_review_list .right_game_item .game_info_wrap .review_point_wrap .background{position:absolute;left:0;top:0;height:18px;width:90px;} #userBody .popular_review_list .right_game_item .game_info_wrap .review_point_wrap .foreground{position:absolute;left:0;top:0;height:18px;width:90px;} #userBody .popular_review_list .right_game_item .game_info_wrap .review_point_wrap .review_point_star{height:18px;} #userBody .popular_review_list .right_game_item .game_info_wrap .review_point_wrap .review_point_number{position:absolute;left:94px;top:0;} #userBody .popular_review_list .right_game_item .game_info_wrap .no_review_point{height:18px;line-height:18px;margin-top:1px;} #userBody .popular_review_list .right_game_item .game_info_wrap .post_cnt_info{height:18px;line-height:18px;margin-top:4px;} #userBody .popular_review_list .right_game_item .game_info_wrap .post_cnt_info .post_cnt_button{cursor:pointer;} #userBody .popular_review_list .right_game_item .game_info_wrap .post_cnt_info .post_cnt_icon{height:16px;margin:1px 2px 0 0;} #userBody .popular_review_list .right_game_item .game_info_wrap .post_cnt_info .spacer{width:16px;display:inline-block;} #userBody .chart_page_header .chart_text_wrap{width:calc(100% - 80px);vertical-align:top;margin-bottom:40px;} #userBody .chart_page_header .chart_page_title{line-height:38px;} #userBody .chart_page_header .chart_page_time{line-height:21px;margin-top:4px;} #userBody .chart_page_header .chart_page_time .time_icon{height:18px;margin:2px 2px 0 0;} #userBody .chart_page_header .chart_page_time_m{text-align:center;line-height:21px;margin-bottom:10px;} #userBody .chart_page_header .chart_page_time_m .time_icon{height:18px;margin:2px 2px 0 0;} #userBody .share_chart_button{width:80px;vertical-align:top;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow{width:600px;margin-left:auto;margin-right:auto;} } #chartRow .chart_item_wrap{border-radius:13px;background:#FFF;display:inline-block;position:relative;vertical-align:top;overflow:hidden;box-shadow:0px 4px 5px 0px rgba(3, 24, 39, 0.06), 0px 1px 10px 0px rgba(3, 24, 39, 0.12), 0px 2px 4px -1px rgba(3, 24, 39, 0.16);} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .chart_item_wrap{display:block;} } @media only screen and (max-width:599px) { #chartRow .chart_item_wrap{display:block;} } #chartRow .review_point_time_chart_wrap{width:465px;height:260px;} #chartRow .review_point_time_chart_wrap .canvas_wrap{width:100%;height:calc(100% - 50px);position:absolute;bottom:0;left:0px;z-index:1;overflow:hidden;border-bottom-left-radius:13px;border-bottom-right-radius:13px;} #chartRow .review_point_time_chart_wrap .text_info{padding:24px 28px;position:relative;width:100%;height:100%;} #chartRow .review_point_time_chart_wrap .text_info .title{line-height:20px;} #chartRow .review_point_time_chart_wrap .text_info .button_wrap{float:right;vertical-align:top;line-height:19px;} #chartRow .review_point_time_chart_wrap .text_info .button_wrap .text_button{cursor:pointer;user-select:none;} #chartRow .review_point_time_chart_wrap .text_info .button_wrap .text_button:first-child{margin-right:12px;} #chartRow .review_point_time_chart_wrap .text_info .button_wrap .text_button.selected{color:#031827;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap{position:absolute;z-index:3;left:28px;top:47px;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap .total_cnt{line-height:43px;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap .diff_cnt{margin-top:8px;line-height:19px;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap .diff_value{vertical-align:top;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap .diff_text{line-height:16px;margin:1px 0 0 4px;vertical-align:top;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap .top_percentage{margin-top:9px;display:inline-block;border-radius:4px;background:#7f8fa6;padding:0 5px;line-height:23px;} #chartRow .review_point_time_chart_wrap .info_cnt_wrap .top_percentage.high_percentage{background:#3f9dff;} #chartRow .review_point_time_chart_wrap .year_row{color:#BFE1FF;width:100%;position:absolute;z-index:3;bottom:24px;left:0;line-height:14px;} #chartRow .review_point_time_chart_wrap .year_row .start_year{width:60px;margin-left:30px;} #chartRow .review_point_time_chart_wrap .year_row .end_year{width:60px;text-align:right;margin-right:30px;} #chartRow .review_point_time_chart_wrap .year_row .divider{width:calc(100% - 180px);} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .review_point_time_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .review_point_time_chart_wrap .text_info{padding:20px 24px;} } @media only screen and (max-width:599px) { #chartRow .review_point_time_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .review_point_time_chart_wrap .text_info{padding:20px 24px;} } @media only screen and (max-width:350px) { #chartRow .review_point_time_chart_wrap{width:100%;border-radius:0;} #chartRow .review_point_time_chart_wrap .canvas_wrap{border-radius:0;} } #chartRow .age_chart_wrap{width:465px;height:260px;margin-left:30px;background:linear-gradient(-180deg, rgb(38, 144, 255) 0%, rgb(65, 199, 255) 100%);} #chartRow .age_chart_wrap.no_age{background:linear-gradient(-180deg, #4D596B 0%, #333A46 100%);} #chartRow .age_chart_wrap .text_info{padding:24px 28px;position:relative;width:100%;height:100%;z-index:1;} #chartRow .age_chart_wrap .text_info .title{line-height:20px;} #chartRow .age_chart_wrap .text_info .tooltip_icon{height:16px;margin:2px 0 0 2px;} #chartRow .age_chart_wrap .text_info .button_wrap{float:right;vertical-align:top;line-height:20px;} #chartRow .age_chart_wrap .text_info .button_wrap .refresh_button{cursor:pointer;vertical-align:top;} #chartRow .age_chart_wrap .text_info .button_wrap .refresh_button img{height:18px;margin:1px 4px 0 0;} #chartRow .age_chart_wrap .text_info .button_wrap .divider{width:1px;height:20px;background:#FFF;margin:0 12px;vertical-align:top;opacity:0.3;} #chartRow .age_chart_wrap .text_info .button_wrap .share_button{cursor:pointer;vertical-align:top;} #chartRow .age_chart_wrap .text_info .button_wrap .share_button img{height:18px;margin-top:1px;} #chartRow .age_chart_wrap .text_info .age_number{line-height:43px;margin-top:3px;} #chartRow .age_chart_wrap .text_info .diff_age{margin-top:8px;line-height:19px;} #chartRow .age_chart_wrap .text_info .diff_value{vertical-align:top;} #chartRow .age_chart_wrap .text_info .diff_text{line-height:16px;margin:3px 0 0 4px;vertical-align:top;} #chartRow .age_chart_wrap .text_info .description{position:absolute;bottom:24px;left:28px;line-height:21px;} #chartRow .age_chart_wrap .text_info .btn_r{width:100px;position:absolute;bottom:24px;right:28px;border-width:2px;line-height:32px;} #chartRow .age_chart_wrap .background_image{position:absolute;top:0;right:0;height:100%;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .age_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .age_chart_wrap .text_info{padding:20px 24px;} } @media only screen and (max-width:599px) { #chartRow .age_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .age_chart_wrap .text_info{padding:20px 24px;} } @media only screen and (max-width:350px) { #chartRow .age_chart_wrap{width:100%;border-radius:0;} } #chartRow .review_point_chart_wrap{width:630px;height:330px;margin-top:48px;} #chartRow .review_point_chart_wrap .text_info{padding:24px 28px 0 28px;width:100%;} #chartRow .review_point_chart_wrap .text_info .title{line-height:20px;} #chartRow .review_point_chart_wrap .text_info .tooltip_icon{height:16px;margin:2px 0 0 2px;} #chartRow .review_point_chart_wrap .text_info .button_wrap{float:right;vertical-align:top;line-height:20px;} #chartRow .review_point_chart_wrap .text_info .button_wrap .input_check_group .checkmark{top:1px;left:2px;height:18px;width:18px;} #chartRow .review_point_chart_wrap .text_info .button_wrap .input_check_group .checkmark .cm1{top:9px;left:2px;} #chartRow .review_point_chart_wrap .text_info .button_wrap .input_check_group .checkmark .cm2{top:7px;left:5px;} #chartRow .review_point_chart_wrap .text_info .legend_wrap{margin-top:20px;} #chartRow .review_point_chart_wrap .text_info .legend_item{vertical-align:top;margin-right:60px;} #chartRow .review_point_chart_wrap .text_info .legend_name{line-height:21px;} #chartRow .review_point_chart_wrap .text_info .legend_mark{width:12px;height:12px;border-radius:6px;margin:5px 4px 0 0;background:#ced8e5;} #chartRow .review_point_chart_wrap .text_info .my_item .legend_mark{background:#3f9dff;} #chartRow .review_point_chart_wrap .text_info .legend_value{line-height:47px;} #chartRow .review_point_chart_wrap .text_info .minimap_item{display:none;} #chartRow .review_point_chart_wrap.show_minimap .text_info .minimap_item{display:inline-block;} #chartRow .review_point_chart_wrap .text_info .diff_cnt{margin-top:8px;line-height:19px;} #chartRow .review_point_chart_wrap .text_info .diff_value{vertical-align:top;} #chartRow .review_point_chart_wrap .text_info .diff_text{line-height:16px;margin:1px 0 0 4px;vertical-align:top;} #chartRow .review_point_chart_wrap .graph_col_wrap{margin:16px 28px 20px;} #chartRow .review_point_chart_wrap .graph_col{display:inline-block;width:10%;vertical-align:top;} #chartRow .review_point_chart_wrap .graph_col .bar_background{width:100%;height:106px;position:relative;} #chartRow .review_point_chart_wrap .graph_col .bar_background.minimap_background{display:none;} #chartRow .review_point_chart_wrap.show_minimap .graph_col .bar_background{width:50%;display:inline-block;} #chartRow .review_point_chart_wrap .graph_col .bar_foreground{background:#3f9dff;width:8px;border-radius:4px;vertical-align:bottom;position:absolute;bottom:0;left:calc(50% - 4px);} #chartRow .review_point_chart_wrap .graph_col .bar_foreground.max_index{background:#3b69d8;} #chartRow .review_point_chart_wrap.show_minimap .graph_col .bar_foreground{left:auto;right:0;} #chartRow .review_point_chart_wrap .graph_col .bar_foreground.minimap_bar{left:0;background:#ced8e5;display:none;} #chartRow .review_point_chart_wrap.show_minimap .graph_col .bar_foreground.minimap_bar{display:inline-block;} #chartRow .review_point_chart_wrap .graph_col .graph_title{text-align:center;width:100%;line-height:18px;margin-top:8px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .review_point_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .review_point_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .review_point_chart_wrap .text_info .legend_item{margin-right:40px;} .mobile_width #chartRow .review_point_chart_wrap .text_info .legend_item:last-child{margin-right:0px;} .mobile_width #chartRow .review_point_chart_wrap .graph_col_wrap{margin:16px 24px 20px;} } @media only screen and (max-width:599px) { #chartRow .review_point_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .review_point_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .review_point_chart_wrap .text_info .legend_item{margin-right:40px;} #chartRow .review_point_chart_wrap .text_info .legend_item:last-child{margin-right:0px;} #chartRow .review_point_chart_wrap .graph_col_wrap{margin:16px 24px 20px;} } @media only screen and (max-width:350px) { #chartRow .review_point_chart_wrap{width:100%;border-radius:0;} } #chartRow .platform_chart_wrap{width:300px;height:330px;margin:48px 0 0 30px;} #chartRow .platform_chart_wrap .text_info{padding:24px 28px 0 28px;position:relative;width:100%;} #chartRow .platform_chart_wrap .text_info .title{line-height:20px;} #chartRow .platform_chart_wrap .text_info .tooltip_icon{height:16px;margin:2px 0 0 2px;} #chartRow .platform_chart_wrap .doughnut_chart_wrap{margin:30px auto 0 auto;width:140px;height:140px;position:relative;} #chartRow .platform_chart_wrap .platform_circle{height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;} #chartRow .platform_chart_wrap .platform_circle_path{stroke-linecap:round;stroke-dasharray:300;} #chartRow .platform_chart_wrap .platform_legend_wrap{padding: 0 28px;margin-top:40px;line-height:20px;} #chartRow .platform_chart_wrap .legend_item{width:33.33%;vertical-align:top;margin-bottom:12px;} #chartRow .platform_chart_wrap .legend_item.two_column{width:50%;} #chartRow .platform_chart_wrap .legend_item .legend_mark{display:inline-block;width:12px;height:12px;margin:6px 4px 0 0;vertical-align:top;border-radius:8px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .platform_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .platform_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .platform_chart_wrap .platform_legend_wrap{padding: 0 24px;} } @media only screen and (max-width:599px) { #chartRow .platform_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .platform_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .platform_chart_wrap .platform_legend_wrap{padding: 0 24px;} } @media only screen and (max-width:350px) { #chartRow .platform_chart_wrap{width:100%;border-radius:0;} } #chartRow .library_state_chart_wrap{width:465px;height:350px;margin-top:48px;} #chartRow .library_state_chart_wrap .text_info{padding:24px 28px 0 28px;position:relative;width:100%;} #chartRow .library_state_chart_wrap .text_info .title{line-height:20px;} #chartRow .library_state_chart_wrap .text_info .tooltip_icon{height:16px;margin:2px 0 0 2px;} #chartRow .library_state_chart_wrap .text_info .button_wrap{float:right;vertical-align:top;line-height:20px;} #chartRow .library_state_chart_wrap .text_info .button_wrap .input_check_group .checkmark{top:1px;left:2px;height:18px;width:18px;} #chartRow .library_state_chart_wrap .text_info .button_wrap .input_check_group .checkmark .cm1{top:9px;left:2px;} #chartRow .library_state_chart_wrap .text_info .button_wrap .input_check_group .checkmark .cm2{top:7px;left:5px;} #chartRow .library_state_chart_wrap .graph_row_wrap{margin-top:20px;padding:0 28px;} #chartRow .library_state_chart_wrap .graph_row{width:100%;margin-top:16px;} #chartRow .library_state_chart_wrap .graph_row:first-child{margin-top:0px;} #chartRow .library_state_chart_wrap .graph_row .state_icon_wrap{margin-right:12px;width:30px;height:30px;padding:7px;vertical-align:top;border-radius:15px;background:#ebeff8;} #chartRow .library_state_chart_wrap .graph_row .state_icon_wrap .state_icon{height:16px;} #chartRow .library_state_chart_wrap .graph_row .bar_background{width:calc(100% - 122px);height:30px;vertical-align:top;position:relative;} #chartRow .library_state_chart_wrap .graph_row .bar_foreground{background:#3f9dff;height:8px;border-radius:4px;position:absolute;left:0;top:calc(50% - 4px);} #chartRow .library_state_chart_wrap .graph_row .bar_foreground.max_index{background:#3b69d8;} #chartRow .library_state_chart_wrap.show_minimap .graph_row .bar_foreground{top:calc(50% - 10px);} #chartRow .library_state_chart_wrap .graph_row .bar_foreground.minimap_bar{top:calc(50% + 2px);background:#ced8e5;display:none;} #chartRow .library_state_chart_wrap.show_minimap .graph_row .bar_foreground.minimap_bar{display:block;} #chartRow .library_state_chart_wrap .graph_row .graph_value_wrap{text-align:right;width:80px;vertical-align:top;} #chartRow .library_state_chart_wrap .graph_row .graph_value_wrap .graph_value{line-height:30px;} #chartRow .library_state_chart_wrap.show_minimap .graph_row .graph_value_wrap .graph_value{line-height:24px;margin-top:-7px;} #chartRow .library_state_chart_wrap .graph_row .graph_value_wrap .minimap_graph_value{line-height:13px;display:none;} #chartRow .library_state_chart_wrap.show_minimap .graph_row .graph_value_wrap .minimap_graph_value{display:block;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .library_state_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .library_state_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .library_state_chart_wrap .graph_row_wrap{padding:0 24px;} } @media only screen and (max-width:599px) { #chartRow .library_state_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .library_state_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .library_state_chart_wrap .graph_row_wrap{padding:0 24px;} } @media only screen and (max-width:350px) { #chartRow .library_state_chart_wrap{width:100%;border-radius:0;} } #chartRow .genre_chart_wrap{width:465px;height:350px;margin:48px 0 0 30px;} #chartRow .genre_chart_wrap .text_info{padding:24px 28px 0 28px;position:relative;width:100%;} #chartRow .genre_chart_wrap .text_info .title{line-height:20px;} #chartRow .genre_chart_wrap .text_info .tooltip_icon{height:16px;margin:2px 0 0 2px;} #chartRow .genre_chart_wrap .genre_cloud{width:100%;height:284px;} #chartRow .genre_chart_wrap .genre_cloud > span{padding:2px;} #chartRow .genre_chart_wrap .genre_cloud .w1{font-size:14px;color:#e5f3ff;} #chartRow .genre_chart_wrap .genre_cloud .w2{font-size:16px;color:#bfe1ff;} #chartRow .genre_chart_wrap .genre_cloud .w3{font-size:16px;color:#97cfff;} #chartRow .genre_chart_wrap .genre_cloud .w4{font-size:18px;color:#6dbbff;} #chartRow .genre_chart_wrap .genre_cloud .w5{font-size:18px;color:#51acff;} #chartRow .genre_chart_wrap .genre_cloud .w6{font-size:20px;color:#3f9dff;} #chartRow .genre_chart_wrap .genre_cloud .w7{font-size:20px;color:#3f8eff;} #chartRow .genre_chart_wrap .genre_cloud .w8{font-size:22px;color:#3d7beb;} #chartRow .genre_chart_wrap .genre_cloud .w9{font-size:22px;color:#3b69d8;} #chartRow .genre_chart_wrap .genre_cloud .w10{font-size:26px;color:#3749b8;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .genre_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .genre_chart_wrap .text_info{padding:20px 24px 0 24px;} } @media only screen and (max-width:599px) { #chartRow .genre_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .genre_chart_wrap .text_info{padding:20px 24px 0 24px;} } @media only screen and (max-width:350px) { #chartRow .genre_chart_wrap{width:100%;border-radius:0;} } #chartRow .monthly_post_chart_wrap{width:100%;height:auto;margin-top:48px;} #chartRow .monthly_post_chart_wrap .text_info{padding:28px 28px 0 28px;position:relative;width:100%;} #chartRow .monthly_post_chart_wrap .text_info .title{line-height:26px;} #chartRow .monthly_post_chart_wrap .text_info .tooltip_icon{height:16px;margin:6px 0 0 4px;} #chartRow .monthly_post_chart_wrap .calendar_wrap{margin-top:16px;padding:0 20px 0 28px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_wrap{margin-bottom:12px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_wrap .title{line-height:13px;width:64px;margin-right:6px;text-align:center;vertical-align:top;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_wrap .title:first-child{margin-left:60px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_wrap .title:last-child{margin-right:0px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_cover{position:relative;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_cover .top_cover{width:100%;height:20px;z-index:2;position:absolute;top:0;left:0;background:linear-gradient(-180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_cover .bottom_cover{width:100%;height:20px;z-index:2;position:absolute;bottom:0;left:0;background:linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row_wrap{max-height:267px;overflow:auto;position:relative;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row{width:900px;height:76px;border-radius:8px;cursor:pointer;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row:first-child{margin-top:20px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row:last-child{margin-bottom:20px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row:hover{background:#e5f3ff;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row.selected{background:#3f9dff;} #chartRow .monthly_post_chart_wrap .calendar_wrap .year_title{line-height:76px;width:60px;text-align:center;} #chartRow .monthly_post_chart_wrap .calendar_wrap .selected .year_title{color:#FFF;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_list{vertical-align:top;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item{margin:6px 6px 0 0;display:inline-block;vertical-align:top;width:64px;height:64px;border-radius:4px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item.yes_game{background-color:#FFF;background-size:cover;background-position:center;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item.no_game{background:#EBEFF8;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap{padding:40px 28px 28px 28px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap{padding-right:32px;vertical-align:top;width:600px;border-right:solid 1px #ebeff8;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap .section_title{line-height:20px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap .section_title .button_wrap{float:right;vertical-align:top;line-height:19px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap .section_title .button_wrap .text_button{cursor:pointer;user-select:none;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap .section_title .button_wrap .text_button:first-child{margin-right:12px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap .section_title .button_wrap .text_button.selected{color:#031827;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap .canvas_wrap{width:100%;height:263px;margin-top:28px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap{padding-left:32px;width:calc(100% - 600px);} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .section_title{line-height:20px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .section_range{line-height:14px;margin-top:5px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .cnt_wrap{margin-right:4px;float:right;vertical-align:top;line-height:38px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_list{margin-top:24px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_col{width:calc(50% - 14px);margin-right:28px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_col:last-child{margin-right:0;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_item{line-height:16px;padding-bottom:12px;margin-bottom:7px;border-bottom:solid 1px #ebeff8;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_item:last-child{padding-bottom:0;border-bottom:none;margin-bottom:0;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_item .month_cnt{float:right;vertical-align:top;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .month_text_item .month_cnt img{height:16px;margin-right:4px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .go_post_button{margin-top:24px;text-align:center;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .go_post_button .btn_r{width:268px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .monthly_post_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .monthly_post_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap{padding:0 24px 0 24px;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .month_wrap{display:none;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row_wrap{max-height:278px;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row{width:100%;height:150px;border-radius:8px;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row:hover{background:unset;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row.selected{background:#3f9dff;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .year_title{line-height:150px;;width:54px;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .month_list{width:calc(100% - 54px);} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item{margin:6px 2px 0 0;width:68px;height:68px;border-radius:4px;} .mobile_width #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item:nth-child(n + 7){margin:2px 2px 0 0;} .mobile_width #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap{display:none;} .mobile_width #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap{padding-left:0px;width:100%;} .mobile_width #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap{padding:20px 24px 24px 24px;} .mobile_width #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .go_post_button .btn_r{width:100%;} } @media only screen and (max-width:599px) { #chartRow .monthly_post_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .monthly_post_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .monthly_post_chart_wrap .calendar_wrap{padding:0 24px 0 24px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_wrap{display:none;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row_wrap{max-height:278px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row{width:100%;height:calc(33.2vw - 40px);border-radius:8px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row:hover{background:unset;} #chartRow .monthly_post_chart_wrap .calendar_wrap .calendar_row.selected{background:#3f9dff;} #chartRow .monthly_post_chart_wrap .calendar_wrap .year_title{line-height:calc(33.2vw - 40px);width:54px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_list{width:calc(100% - 54px);} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item{margin:6px 2px 0 0;width:calc(16.6vw - 26px);height:calc(16.6vw - 26px);border-radius:4px;} #chartRow .monthly_post_chart_wrap .calendar_wrap .month_item:nth-child(n + 7){margin:2px 2px 0 0;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .chart_wrap{display:none;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap{padding-left:0px;width:100%;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap{padding:20px 24px 24px 24px;} #chartRow .monthly_post_chart_wrap .monthly_post_graph_wrap .text_info_wrap .go_post_button .btn_r{width:100%;} } @media only screen and (max-width:350px) { #chartRow .monthly_post_chart_wrap{width:100%;border-radius:0;} } #chartRow .popular_post_game_chart_wrap{width:100%;height:auto;margin-top:48px;overflow:unset;} #chartRow .popular_post_game_chart_wrap .text_info{padding:28px 28px 0 28px;position:relative;width:100%;} #chartRow .popular_post_game_chart_wrap .text_info .title{line-height:26px;} #chartRow .popular_post_game_chart_wrap .text_info .tooltip_icon{height:16px;margin:6px 0 0 4px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap{float:right;vertical-align:top;line-height:20px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .calendar_select_box{height:26px;cursor:pointer;vertical-align:top;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .calendar_select_box.start_cal{margin-right:8px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .calendar_select_box.end_cal{margin-left:8px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .calendar_select_box .select_text{line-height:26px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .calendar_select_box .cal_icon{height:18px;margin:4px 2px 0 0;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .calendar_select_box .select_img{margin-top:3px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .button_divider{width:1px;height:18px;margin:4px 12px 0 12px;background:#ced8e5;vertical-align:top;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .preset_select{height:26px;line-height:26px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .preset_select .select_text{line-height:26px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .preset_select .select_img{margin-top:3px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .preset_select .select_option_wrap{width:120px;} #chartRow .popular_post_game_chart_wrap .chart_wrap{margin:40px 50px 28px 32px;vertical-align:top;width:calc(100% - 386px);height:264px;} #chartRow .popular_post_game_chart_wrap .chart_wrap .canvas_wrap{width:100%;height:100%;} #chartRow .popular_post_game_chart_wrap .game_info_wrap{width:268px;margin-top:20px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .no_post_info{text-align:center;padding-top:100px;line-height:22px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .popular_post_game_item{cursor:pointer;padding-bottom:12px;border-bottom:solid 1px #ebeff8;margin-bottom:12px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .popular_post_game_item:last-child{padding-bottom:0;border-bottom:none;margin-bottom:0;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .legend_mark{width:16px;height:16px;border-radius:8px;margin:10px 12px 0 0;vertical-align:top;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .game_cover{margin-right:12px;width:36px;height:36px;border-radius:8px;background-size:cover;background-position:center;vertical-align:top;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .text_info_wrap{width:calc(100% - 76px);} #chartRow .popular_post_game_chart_wrap .game_info_wrap .game_name{line-height:16px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .game_name .mobile_icon_new{height:16px;margin-right:2px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .post_cnt{line-height:14px;margin-top:2px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .popular_post_game_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .popular_post_game_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .popular_post_game_chart_wrap .text_info .button_wrap{float:none;display:block;margin-top:12px;} .mobile_width #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .button_divider{display:none;} .mobile_width #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .preset_select{display:block;width:120px;} .mobile_width #chartRow .popular_post_game_chart_wrap .chart_wrap{display:block;width:100%;padding:0 24px;margin:40px 0 28px 0;height:220px;} .mobile_width #chartRow .popular_post_game_chart_wrap .game_info_wrap{width:100%;padding:0 24px;margin-bottom:24px;} .mobile_width #chartRow .popular_post_game_chart_wrap .game_info_wrap .no_post_info{padding:40px 0;} } @media only screen and (max-width:599px) { #chartRow .popular_post_game_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .popular_post_game_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap{float:none;display:block;margin-top:12px;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .button_divider{display:none;} #chartRow .popular_post_game_chart_wrap .text_info .button_wrap .preset_select{display:block;width:120px;} #chartRow .popular_post_game_chart_wrap .chart_wrap{display:block;width:100%;padding:0 24px;margin:40px 0 28px 0;height:220px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap{width:100%;padding:0 24px;margin-bottom:24px;} #chartRow .popular_post_game_chart_wrap .game_info_wrap .no_post_info{padding:40px 0;} } @media only screen and (max-width:350px) { #chartRow .popular_post_game_chart_wrap{width:100%;border-radius:0;} } #chartRow .total_achievement_chart_wrap{width:465px;height:270px;margin-top:48px;} #chartRow .total_achievement_chart_wrap.no_sync{opacity:0.4;} #chartRow .total_achievement_chart_wrap .text_info{padding:24px 28px 0 28px;position:relative;width:100%;} #chartRow .total_achievement_chart_wrap .text_info .title{line-height:20px;} #chartRow .total_achievement_chart_wrap .text_info .sync_platform_wrap{margin-top:8px;line-height:18px;} #chartRow .total_achievement_chart_wrap .text_info .sync_platform_wrap img{height:18px;margin-right:2px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap{padding:0 28px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap.complete_game_wrap{margin-top:24px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap.achievement_cnt_wrap{margin-top:28px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .trophy_icon_wrap{margin-right:12px;vertical-align:top;width:60px;height:60px;padding:18px;border-radius:30px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap.complete_game_wrap .trophy_icon_wrap{background:#e5f3ff;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap.achievement_cnt_wrap .trophy_icon_wrap{background:#ebeff8;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .trophy_icon_wrap img{height:24px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .text_wrap{vertical-align:top;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .text_wrap .item_title{line-height:14px;margin-top:2px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .text_wrap .item_value{line-height:38px;margin-top:2px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .text_wrap .item_value .top_percentage{vertical-align:top;padding:0 6px;height:22px;line-height:23px;margin:9px 0 0 8px;border-radius:4px;background:#7f8fa6;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .text_wrap .item_value .top_percentage.high_percentage{background:#3f9dff;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .diff_wrap{float:right;vertical-align:top;text-align:right;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .diff_wrap .diff_value{line-height:19px;margin-top:10px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .diff_wrap .diff_text{line-height:18px;margin-top:1px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .total_achievement_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .total_achievement_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .total_achievement_chart_wrap .cnt_item_wrap{padding:0 24px;} } @media only screen and (max-width:599px) { #chartRow .total_achievement_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .total_achievement_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap{padding:0 24px;} } @media only screen and (max-width:350px) { #chartRow .total_achievement_chart_wrap{width:100%;border-radius:0;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .trophy_icon_wrap{margin:4px 8px 0 0;width:50px;height:50px;padding:13px;border-radius:25px;} #chartRow .total_achievement_chart_wrap .cnt_item_wrap .text_wrap .item_value{font-size:26px;} } #chartRow .achievement_complete_chart_wrap{width:465px;height:270px;margin:48px 0 0 30px;} #chartRow .achievement_complete_chart_wrap.no_sync{opacity:0.4;} #chartRow .achievement_complete_chart_wrap .text_info{padding:24px 28px 0 28px;position:relative;width:100%;} #chartRow .achievement_complete_chart_wrap .text_info .title{line-height:20px;} #chartRow .achievement_complete_chart_wrap .text_info .sync_platform_wrap{margin-top:8px;line-height:18px;} #chartRow .achievement_complete_chart_wrap .text_info .sync_platform_wrap img{height:18px;margin-right:2px;} #chartRow .achievement_complete_chart_wrap .doughnut_chart_wrap{width:100%;position:relative;margin-top:12px;} #chartRow .achievement_complete_chart_wrap .doughnut_chart{width:180px;height:180px;position:absolute;top:0;left:calc(50% - 90px);} #chartRow .achievement_complete_chart_wrap .background_circle{transform:rotate(180deg);height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;z-index:0;} #chartRow .achievement_complete_chart_wrap .background_circle_path{stroke-linecap:round;stroke-dasharray:300;} #chartRow .achievement_complete_chart_wrap .foreground_circle{transform:rotate(180deg);height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;} #chartRow .achievement_complete_chart_wrap .foreground_circle_path{stroke-linecap:round;stroke-dasharray:300;} #chartRow .achievement_complete_chart_wrap .text_wrap{text-align:center;padding-top:38px;width:100%;position:absolute;top:0;left:0;} #chartRow .achievement_complete_chart_wrap .text_wrap .percentage_value{line-height:38px;} #chartRow .achievement_complete_chart_wrap .text_wrap .top_percentage_wrap{margin-top:7px;line-height:23px;} #chartRow .achievement_complete_chart_wrap .text_wrap .top_percentage{padding:0 6px;background:#7f8fa6;border-radius:4px;} #chartRow .achievement_complete_chart_wrap .text_wrap .top_percentage.high_percentage{background:#3f9dff;} #chartRow .achievement_complete_chart_wrap .text_wrap .user_title{line-height:18px;margin-top:12px;} #chartRow .achievement_complete_chart_wrap .text_wrap .description{line-height:21px;margin-top:6px;padding:0 28px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .achievement_complete_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;height:auto;} .mobile_width #chartRow .achievement_complete_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .achievement_complete_chart_wrap .text_wrap{position:relative;top:auto;left:auto;} .mobile_width #chartRow .achievement_complete_chart_wrap .text_wrap .description{padding:0 24px 24px 24px;} } @media only screen and (max-width:599px) { #chartRow .achievement_complete_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;height:auto;} #chartRow .achievement_complete_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .achievement_complete_chart_wrap .text_wrap{position:relative;top:auto;left:auto;} #chartRow .achievement_complete_chart_wrap .text_wrap .description{padding:0 24px 24px 24px;} } @media only screen and (max-width:350px) { #chartRow .achievement_complete_chart_wrap{width:100%;border-radius:0;} } #chartRow .achievement_summary_chart_wrap{width:100%;height:auto;margin-top:48px;margin-bottom:60px;} #chartRow .achievement_summary_chart_wrap.no_sync{opacity:0.4;} #chartRow .achievement_summary_chart_wrap .text_info{padding:28px 28px 0 28px;position:relative;width:100%;} #chartRow .achievement_summary_chart_wrap .text_info .title{line-height:26px;} #chartRow .achievement_summary_chart_wrap .text_info .title .open_state_icon{display:none;height:24px;margin:1px 2px 0 0;} #chartRow .achievement_summary_chart_wrap .text_info .title .open_state_icon.open_state_private{display:inline-block;} #chartRow .achievement_summary_chart_wrap .text_info .tooltip_icon{height:16px;margin:6px 0 0 4px;} #chartRow .achievement_summary_chart_wrap .text_info .button_wrap{float:right;vertical-align:top;line-height:20px;} #chartRow .achievement_summary_chart_wrap .text_info .button_wrap .select_option_wrap{width:100px;max-height:250px;overflow:auto;z-index:20;} #chartRow .achievement_summary_chart_wrap .text_info .button_wrap .button_divider{width:1px;height:18px;margin:3px 12px 0 12px;background:#ced8e5;vertical-align:top;} #chartRow .achievement_summary_chart_wrap .text_info .button_wrap .option_button{height:20px;cursor:pointer;margin-top:2px;} #chartRow .achievement_summary_chart_wrap .text_info .button_wrap .option_button:hover{background:#ebeff8;border-radius:10px;box-shadow: 0 0 0 4px #ebeff8;} #chartRow .achievement_summary_chart_wrap .sync_platform_wrap{padding:0 28px;margin-top:24px;line-height:28px;} #chartRow .achievement_summary_chart_wrap .sync_platform_wrap .sync_platform_item{user-select:none;background:#ebeff8;border-radius:4px;margin-right:6px;padding:0 8px;cursor:pointer;} #chartRow .achievement_summary_chart_wrap .sync_platform_wrap .sync_platform_item.selected{background:#3f9dff;color:#FFF;cursor:auto;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap{padding:0 28px;margin-top:24px;margin-bottom:24px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .month_wrap{padding-left:20px;line-height:15px;margin-bottom:12px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .month_text{width:40px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_wrap{} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .week_title_wrap{vertical-align:top;width:20px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .week_text{line-height:14px;height:14px;margin-bottom:2px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .week_text:last-child{margin-bottom:0;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .week_wrap{width:15px;margin-right:1px;vertical-align:top;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .week_wrap:last-child{margin-right:0px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item{vertical-align:top;position:relative;user-select:none;text-align:center;overflow:hidden;width:15px;height:15px;margin-bottom:1px;background:#ebeff8;border-radius:2px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item:last-child{margin-bottom:0;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.empty_date{background:transparent;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.new_date{opacity:0.3;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.step_1{background:#B2BDCE;cursor:pointer;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.step_2{background:#7F8FA6;cursor:pointer;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.step_3{background:#4A596D;cursor:pointer;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.step_4{background:#283240;cursor:pointer;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.has_complete{background:#3f9dff;cursor:pointer;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.selected{transform:scale(1.5);z-index:5;border:solid 1px #3d7beb;box-shadow:0px 0px 5px 4px rgba(61, 123, 235, 0.4);} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item .cnt_text{height:100%;position:absolute;top:0;left:50%;transform:translate(-50%, 0);z-index:3;line-height:14px;vertical-align:top;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item.selected .cnt_text{line-height:12px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_item .share_complete{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;border-left:solid 7px #3f9dff;border-top:solid 7px #3f9dff;border-right:solid 7px transparent;border-bottom:solid 7px transparent;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap{padding:0 28px;margin-top:28px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap.show_detail{display:none;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_text_wrap{width:calc(100% - 280px);} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_title{line-height:20px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_date_range{line-height:14px;margin-top:6px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap{width:280px;text-align:right;line-height:38px;height:38px;vertical-align:top;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .complete_game_icon_wrap{margin:3px 6px 0 0;vertical-align:top;width:32px;height:32px;padding:8px;border-radius:16px;background:#e5f3ff;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .complete_game_icon_wrap img{height:16px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .complete_game_cnt{vertical-align:top;margin-right:32px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .total_achievement_icon_wrap{margin:3px 6px 0 0;vertical-align:top;width:32px;height:32px;padding:8px;border-radius:16px;background:#ebeff8;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .total_achievement_icon_wrap img{height:16px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .total_achievement_cnt{vertical-align:top;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap{margin-top:16px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_col{width:calc(50% - 27px);margin-right:54px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_col:last-child{margin-right:0;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item{padding-bottom:12px;margin-bottom:12px;line-height:16px;border-bottom:solid 1px #ebeff8;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_number{width:100px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt{width:calc(100% - 100px);text-align:right;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt img{height:16px;margin-right:3px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt .complete_cnt{margin-right:12px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt .achievement_cnt{width:80px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .go_achievement_button{margin:24px 0;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .go_achievement_button .btn_r{width:100%;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap{padding:0 28px;margin-top:28px;display:none;/*min-height:343px;*/margin-bottom:24px;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap.show_detail{display:block;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .back_to_summary{line-height:16px;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .back_to_summary span{cursor:pointer;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .back_to_summary img{height:16px;margin-right:2px;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content{margin-top:6px;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list{margin-top:18px;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list .achievement_icon{height:64px;width:64px;border-radius:8px;vertical-align:top;margin:0 10px 10px 0;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:#ced8e5;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list .achievement_icon:last-child{margin-right:0;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .achievement_summary_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} .mobile_width #chartRow .achievement_summary_chart_wrap .text_info{padding:20px 24px 0 24px;} .mobile_width #chartRow .achievement_summary_chart_wrap .sync_platform_wrap{padding:0 24px;} .mobile_width #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap{padding:0 24px;overflow:auto;height:150px;} .mobile_width #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .month_wrap{width:892px;} .mobile_width #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_wrap{width:892px;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap{padding:0 24px;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_text_wrap{display:block;width:100%;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap{display:block;width:100%;text-align:left;margin-top:20px;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_col{width:calc(50% - 14px);margin-right:28px;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_col:last-child{margin-right:0;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_number{width:30px;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt{width:calc(100% - 30px);} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt .complete_cnt{margin-right:6px;} .mobile_width #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt .achievement_cnt{width:auto;} .mobile_width #chartRow .achievement_summary_chart_wrap .detail_info_wrap{/*min-height:401px;*/padding:0 24px;} .mobile_width #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list .achievement_icon{height:92px;width:92px;margin:0 5px 12px 0;} .mobile_width #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list .achievement_icon:nth-child(5n){margin-right:0;} } @media only screen and (max-width:599px) { #chartRow .achievement_summary_chart_wrap{width:calc(100% - 32px);margin:0 auto 30px auto;} #chartRow .achievement_summary_chart_wrap .text_info{padding:20px 24px 0 24px;} #chartRow .achievement_summary_chart_wrap .sync_platform_wrap{padding:0 24px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap{padding:0 24px;overflow:auto;height:150px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .month_wrap{width:892px;} #chartRow .achievement_summary_chart_wrap .grid_calendar_wrap .date_wrap{width:892px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap{padding:0 24px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_text_wrap{display:block;width:100%;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap{display:block;width:100%;text-align:left;margin-top:20px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_col{width:calc(50% - 14px);margin-right:28px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_col:last-child{margin-right:0;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_number{width:30px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt{width:calc(100% - 30px);} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt .complete_cnt{margin-right:6px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt .achievement_cnt{width:auto;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap{/*min-height:401px;*/padding:0 24px;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list .achievement_icon{height:calc(20vw - 20px);width:calc(20vw - 20px);margin:0 5px 12px 0;} #chartRow .achievement_summary_chart_wrap .detail_info_wrap .detail_content .achievement_list .achievement_icon:nth-child(5n){margin-right:0;} } @media only screen and (max-width:350px) { #chartRow .achievement_summary_chart_wrap{width:100%;border-radius:0;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .complete_game_cnt{font-size:26px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .info_cnt_wrap .total_achievement_cnt{font-size:26px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt{font-size:12px;} #chartRow .achievement_summary_chart_wrap .summary_info_wrap .month_info_wrap .month_item .month_cnt img{height:14px;margin:2px 2px 0 0;} } #chartRow .no_chart_result_wrap .need_more_game{line-height:19px;margin-top:12px;} #chartRow .no_chart_result_wrap .go_rating_button{margin-top:24px;} #chartRow .no_chart_result_wrap .go_rating_button .btn_r{width:144px;} #chartRow .no_chart_result_wrap .show_random_box{width:312px;margin:40px auto 0 auto;background:#ebeff8;border-radius:8px;padding:16px 0;} #chartRow .no_chart_result_wrap .info_text{line-height:19px;} #chartRow .no_chart_result_wrap .text_button{line-height:19px;margin-top:4px;} #chartRow .no_chart_result_wrap .text_button span{cursor:pointer;} #chartRow .no_sync_chart_wrap{width:100%;height:84px;margin-top:50px;background:#e5f3ff;padding:24px 28px;line-height:36px;} #chartRow .no_sync_chart_wrap .circle_mark{width:12px;height:12px;border-radius:6px;background:#3f9dff;vertical-align:top;margin:12px 12px 0 0;} #chartRow .no_sync_chart_wrap .btn_r{float:right;width:112px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #chartRow .no_sync_chart_wrap{width:calc(100% - 32px);height:auto;margin:0 auto 30px auto;padding:16px 24px;line-height:19px;text-align:center;} .mobile_width #chartRow .no_sync_chart_wrap .notice_title{display:inline;font-size:13px;} .mobile_width #chartRow .no_sync_chart_wrap .description{display:inline;font-size:13px;} .mobile_width #chartRow .no_sync_chart_wrap .circle_mark{width:8px;height:8px;border-radius:4px;margin:8px 6px 0 0;} .mobile_width #chartRow .no_sync_chart_wrap .btn_r{display:block;float:none;width:138px;margin:12px auto 0 auto;} } @media only screen and (max-width:599px) { #chartRow .no_sync_chart_wrap{width:calc(100% - 32px);height:auto;margin:0 auto 30px auto;padding:16px 24px;line-height:19px;text-align:center;} #chartRow .no_sync_chart_wrap .notice_title{display:inline;font-size:13px;} #chartRow .no_sync_chart_wrap .description{display:inline;font-size:13px;} #chartRow .no_sync_chart_wrap .circle_mark{width:8px;height:8px;border-radius:4px;margin:8px 6px 0 0;} #chartRow .no_sync_chart_wrap .btn_r{display:block;float:none;width:138px;margin:12px auto 0 auto;} } @media only screen and (max-width:350px) { #chartRow .no_sync_chart_wrap{width:100%;border-radius:0;} } /**************************************************************** * collection ****************************************************************/ .feed_user_collection{display:inline-block;width:160px;border:none;border-radius:0px;margin:0 40px 40px 0;vertical-align:top;background:transparent;} .feed_user_collection:nth-child(5n){margin-right:0px;} .feed_user_collection.main_mode{margin:0 40px 0px 0;} .feed_user_collection.main_mode:last-child{margin-right:0;} .feed_user_collection.main_list_mode{margin:0 40px 80px 0;} .feed_user_collection.main_list_mode:nth-child(5n){margin-right:40px;} .feed_user_collection.main_list_mode:nth-child(4n){margin-right:0px;} .feed_user_collection.search_mode{margin:0 40px 40px 0;} .feed_user_collection.search_mode:nth-child(5n){margin-right:40px;} .feed_user_collection.search_mode:nth-child(3n){margin-right:0px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width .feed_user_collection{margin-right:54px;} .mobile_width .feed_user_collection:nth-child(5n){margin-right:54px;} .mobile_width .feed_user_collection:nth-child(3n){margin-right:0;} .mobile_width .feed_user_collection.mobile_mode:nth-child(3n){margin-right:0;} } @media only screen and (max-width:599px) { .feed_user_collection.mobile_mode{display:block;width:100%;padding:0 16px;margin:0 0 24px 0;} .feed_user_collection.web_mode{width:148px;margin:0 16px 0px 0;} .feed_user_collection.recommend_mode{width:calc(50vw - 26px);margin:0 20px 0px 0;} .feed_user_collection.recommend_mode:nth-child(2n){margin:0;} .feed_user_collection.recommend_mode:nth-child(n+5){display:none;} .feed_user_collection.search_mode{width:calc(50vw - 26px);margin:36px 20px 0 0;} .feed_user_collection.search_mode:nth-child(5n){margin:36px 20px 0 0;} .feed_user_collection.search_mode:nth-child(3n){margin:36px 20px 0 0;} .feed_user_collection.search_mode:nth-child(2n){margin-right:0;} .feed_user_collection.search_mode:nth-child(2n+1){margin-left:16px;} .feed_user_collection.main_mode{width:148px;margin:0 16px 0px 0;} #collectionBody .feed_collection{display:block;width:100%;margin:0;padding-top:16px;} .feed_user_collection:last-child{border-bottom:none;margin-right:0;} } @media only screen and (max-width:599px) and (min-width:426px) { .feed_user_collection.recommend_mode{width:calc(33vw - 20px);margin:0 14px 0px 0;} .feed_user_collection.recommend_mode:nth-child(2n){margin-right:14px;} .feed_user_collection.recommend_mode:nth-child(3n){margin-right:0;} .feed_user_collection.recommend_mode:nth-child(n+5){display:inline-block;} .feed_user_collection.search_mode{width:calc(33vw - 20px);margin:36px 14px 0 0;} .feed_user_collection.search_mode:nth-child(2n+1){margin-left:0px;} .feed_user_collection.search_mode:nth-child(2n){margin-right:14px;} .feed_user_collection.search_mode:nth-child(3n){margin-right:0;} .feed_user_collection.search_mode:nth-child(3n+1){margin-left:16px;} } .user_collection_item{position:relative;} .user_collection_item .collection_image_wrap{position:relative;width:160px;height:160px;} .user_collection_item .collection_image_wrap .collection_image{width:160px;height:160px;border-radius:13px;box-shadow:0px 6px 10px 6px rgba(3, 24, 39, 0.07);} .main_mode .user_collection_item .collection_image_wrap .collection_image{box-shadow:none;} .user_collection_item .collection_image_wrap .collection_image.custom_image{background-color:#FFF;background-size:cover;background-position:center;} .user_collection_item .collection_image_wrap .collection_image.game_cover_image{background-color:#FFF;background-size:cover;background-position:center;} .user_collection_item .collection_image_wrap .collection_image.no_image{background-color:#ced8e5;background-image:url('/images/icon_v3/no_game_cover.png');background-size:24px 24px;background-repeat:no-repeat;background-position:center;} .user_collection_item .collection_image_wrap .game_cnt{padding:0 6px;line-height:20px;background:rgba(40, 50, 64, 0.6);position:absolute;right:8px;bottom:8px;border-radius:10px;} .user_collection_item .collection_info_wrap{margin-top:12px;height:62px;} .user_collection_item .collection_info_wrap .title{line-height:20px;max-height:40px;overflow:hidden;} .user_collection_item .collection_info_wrap .title .badge{line-height:20px;padding:0 4px;border-radius:2px;margin-right:4px;vertical-align:top;} .user_collection_item .collection_info_wrap .title .badge.new_badge{background:#ec5245;} .user_collection_item .collection_info_wrap .title .badge.hot_badge{background:#f99b00;} .user_collection_item .collection_info_wrap .title .open_state_icon{height:16px;margin:3px 1px 0 0;} .user_collection_item .collection_info_wrap .author{margin-top:4px;line-height:18px;} .user_collection_item .collection_interaction_wrap{margin-top:8px;line-height:18px;} .user_collection_item .collection_interaction_wrap .stat_cnt{margin-right:8px;} .user_collection_item .collection_interaction_wrap .stat_cnt:last-child{margin-right:0px;} .user_collection_item .collection_interaction_wrap .stat_cnt img{height:16px;margin:1px 2px 0 0;} .user_collection_item .collection_interaction_wrap .option_button{float:right;height:16px;vertical-align:top;cursor:pointer;} .user_collection_item .collection_interaction_wrap .option_button:hover{background:#ebeff8;border-radius:10px;box-shadow: 0 0 0 4px #ebeff8;} .user_collection_item .rank_wrap{border-radius:3px 3px 0 0;position:absolute;width:36px;height:36px;text-align:center;top:-4px;left:11px;background:#3b4757;line-height:36px;} .user_collection_item .rank_wrap .bottom_left{left:0;bottom:-12px;position:absolute;border-left:solid 9px #3b4757;border-top: solid 6px #3b4757;border-right: solid 9px transparent;border-bottom: solid 6px transparent;} .user_collection_item .rank_wrap .bottom_right{right:0;bottom:-12px;position:absolute;border-left:solid 9px transparent;border-top: solid 6px #3b4757;border-right: solid 9px #3b4757;border-bottom: solid 6px transparent;} .user_collection_item .rank_wrap.high_rank{background:#3f9dff;} .user_collection_item .rank_wrap.high_rank .bottom_left{border-left:solid 9px #3f9dff;border-top: solid 6px #3f9dff;} .user_collection_item .rank_wrap.high_rank .bottom_right{border-top: solid 6px #3f9dff;border-right: solid 9px #3f9dff;} @media only screen and (max-width:599px) { .user_collection_item.mobile_mode .collection_image_wrap{width:120px;height:131px;display:inline-block;vertical-align:top;margin-right:16px;} .user_collection_item.mobile_mode .collection_image_wrap .background1{width:100px;height:100px;border-radius:8px;border:solid 1px #ced8e5;position:absolute;left:10px;top:0;z-index:1;background:#FFF;} .user_collection_item.mobile_mode .collection_image_wrap .background2{width:112px;height:112px;border-radius:8px;border:solid 1px #ced8e5;position:absolute;left:4px;top:5px;z-index:2;background:#FFF;} .user_collection_item.mobile_mode .collection_image_wrap .collection_image{width:120px;height:120px;border-radius:8px;box-shadow: 0px 6px 10px 6px rgba(3, 24, 39, 0.07);position:absolute;left:0;top:11px;z-index:3;} .user_collection_item.mobile_mode .collection_image_wrap .game_cnt{z-index:4;} .user_collection_item.mobile_mode .right_info_wrap{display:inline-block;vertical-align:top;width:calc(100% - 136px);} .user_collection_item.mobile_mode .collection_info_wrap{height:78px;} .user_collection_item.web_mode .collection_image_wrap{width:148px;height:148px;} .user_collection_item.web_mode .collection_image_wrap .collection_image{width:148px;height:148px;} .user_collection_item.main_mode .collection_image_wrap{width:148px;height:148px;} .user_collection_item.main_mode .collection_image_wrap .collection_image{width:148px;height:148px;} .user_collection_item.recommend_mode .collection_image_wrap{width:calc(50vw - 26px);height:calc(50vw - 26px);} .user_collection_item.recommend_mode .collection_image_wrap .collection_image{width:calc(50vw - 26px);height:calc(50vw - 26px);} .user_collection_item.search_mode .collection_image_wrap{width:calc(50vw - 26px);height:calc(50vw - 26px);} .user_collection_item.search_mode .collection_image_wrap .collection_image{width:calc(50vw - 26px);height:calc(50vw - 26px);} .main_mode .user_collection_item .collection_image_wrap .collection_image{box-shadow:0px 6px 10px 6px rgba(3, 24, 39, 0.07);} } @media only screen and (max-width:599px) and (min-width:426px) { .user_collection_item.recommend_mode .collection_image_wrap{width:calc(33vw - 20px);height:calc(33vw - 20px);} .user_collection_item.recommend_mode .collection_image_wrap .collection_image{width:calc(33vw - 20px);height:calc(33vw - 20px);} .user_collection_item.search_mode .collection_image_wrap{width:calc(33vw - 20px);height:calc(33vw - 20px);} .user_collection_item.search_mode .collection_image_wrap .collection_image{width:calc(33vw - 20px);height:calc(33vw - 20px);} } /**************************************************************** * collectionCreatePopup ****************************************************************/ #collectionCreatePopup{background:#FFF;padding:80px 0px 0px 0;min-height:100vh;} #collectionCreatePopup .collection_create_wrap{position:relative;margin:0 auto;width:calc(100% - 32px);max-width:960px;min-height:388px;} #collectionCreatePopup .collection_game_list_wrap{border-top:solid 1px #ebeff8;padding-bottom:200px;background:#FBFCFE;min-height:calc(100vh - 468px);} #collectionCreatePopup .mobile_header{display:none;} #collectionCreatePopup .close_button{position:absolute;height:40px;top:-20px;right:0;cursor:pointer;} #collectionCreatePopup .popup_title{line-height:38px;text-align:center;} #collectionCreatePopup .open_state_wrap{text-align:center;} #collectionCreatePopup .open_state_wrap .select_option_wrap{width:120px;} #collectionCreatePopup .open_state_wrap .select_text img{display:none;} #collectionCreatePopup .open_state_wrap .select_option_wrap img{height:20px;margin:12px 2px 0 0;} #collectionCreatePopup .open_state_wrap .select_option_wrap .selected{display:none;} #collectionCreatePopup .collection_image_wrap{width:100px;height:109px;margin:36px auto 0 auto;position:relative;} #collectionCreatePopup .collection_image_wrap .collection_background1{position:absolute;width:84px;height:84px;border-radius:13px;border:solid 1px #ced8e5;left:8px;top:0;background:#FFF;} #collectionCreatePopup .collection_image_wrap .collection_background2{position:absolute;width:94px;height:94px;border-radius:13px;border:solid 1px #ced8e5;left:3px;top:4px;background:#FFF;} #collectionCreatePopup .collection_image_wrap .collection_image{display:none;position:absolute;width:100px;height:100px;border-radius:13px;left:0;top:8px;box-shadow: 0px 6px 10px 6px rgba(3, 24, 39, 0.07);} #collectionCreatePopup .collection_image_wrap .collection_image.game_cover_image{background-color:#fff;background-size:cover;background-repeat:no-repeat;background-position:center;} #collectionCreatePopup .collection_image_wrap .collection_image.custom_image{background-color:#fff;background-size:cover;background-repeat:no-repeat;background-position:center;} #collectionCreatePopup .collection_image_wrap .collection_image.no_image{cursor:pointer;background-color:#ced8e5;background-image:url('/images/icon_v3/no_game_cover.png');background-size:24px 24px;background-repeat:no-repeat;background-position:center;} #collectionCreatePopup .collection_image_wrap .collection_image_input{display:none;} #collectionCreatePopup .collection_image_wrap.image_type_0 .collection_image.no_image{display:block;} #collectionCreatePopup .collection_image_wrap.image_type_1 .collection_image.custom_image{display:block;} #collectionCreatePopup .collection_image_wrap.image_type_2 .collection_image.game_cover_image{display:block;} #collectionCreatePopup .collection_image_wrap .image_modify_button{display:none;cursor:pointer;position:absolute;right:8px;bottom:8px;text-align:center;background:rgba(40, 50, 64, 0.4);border-radius:12px;height:24px;width:40px;line-height:24px;} #collectionCreatePopup .collection_image_wrap.image_type_1 .image_modify_button{display:block;} #collectionCreatePopup .collection_image_wrap.image_type_2 .image_modify_button{display:block;} #collectionCreatePopup .text_component_form{width:320px;margin:29px auto 0 auto;} #collectionCreatePopup .component_section{margin-bottom:25px;} #collectionCreatePopup .component_section:last-child{margin-bottom:0px;} #collectionCreatePopup .create_button_wrap{position:fixed;width:100%;background:linear-gradient(0deg, #FBFCFE 80%, #FBFCFE00);padding:16px 0;bottom:0px;text-align:center;left:0;z-index:50;} #collectionCreatePopup .create_button{width:350px;} #collectionCreatePopup .suggest_button{position:absolute;right:16px;bottom:16px;cursor:pointer;background:#fff;border-radius:25px;padding:13px 20px 13px 12px;line-height:24px;box-shadow: 0px 6px 10px 0px rgba(3, 24, 39, 0.06),0px 1px 18px 0px rgba(3, 24, 39, 0.1),0px 3px 5px -1px rgba(3, 24, 39, 0.2);} #collectionCreatePopup .suggest_button img{height:24px;margin-right:4px;vertical-align:top;} #collectionCreatePopup .game_list_header_wrap{position:sticky;width:100%;height:60px;top:0;z-index:10;background:#FBFCFE;} #collectionCreatePopup .game_list_header{width:350px;margin:auto;padding-top:23px;text-align:center;position:relative;} #collectionCreatePopup .game_list_header .game_list_title{line-height:20px;} #collectionCreatePopup .game_list_header .game_list_cnt{line-height:17px;} #collectionCreatePopup .game_list_header .change_order_button{width:70px;position:absolute;left:0;top:25px;} #collectionCreatePopup .game_list_header .add_button{width:62px;position:absolute;right:0;top:25px;padding:0 1px 0 6px;} #collectionCreatePopup .game_list_header .add_button img{height:20px;margin-top:3px;} #collectionCreatePopup .game_list_grad{width:100%;height:10px;background:linear-gradient(180deg, #FBFCFE, #FBFCFE00);} #collectionCreatePopup .collection_game_list_body{width:350px;margin:auto;} #collectionCreatePopup .game_list{margin-top:25px;} #collectionCreatePopup .game_list .collection_game_item{margin-bottom:24px;} #collectionCreatePopup .game_list .collection_game_item .game_info{position:relative;} #collectionCreatePopup .game_list .collection_game_item .game_info .delete_button{height:28px;position:absolute;top:-12px;left:-12px;cursor:pointer;} #collectionCreatePopup .game_list .collection_game_item .game_info .cover_image{vertical-align:top;width:48px;height:48px;border-radius:8px;background-color:#fff;background-size:cover;background-repeat:no-repeat;background-position:center;} #collectionCreatePopup .game_list .collection_game_item .game_info .order_number{vertical-align:top;width:32px;padding-right:4px;text-align:right;line-height:48px;} #collectionCreatePopup .game_list .collection_game_item .game_info .game_name{vertical-align:top;width:calc(100% - 116px);margin-right:12px;line-height:48px;} #collectionCreatePopup .game_list .collection_game_item .game_info .game_name .mobile_icon_new{height:18px;margin:15px 2px 0 0;} #collectionCreatePopup .game_list .collection_game_item .game_info .comment_button{margin-top:12px;vertical-align:top;cursor:pointer;} #collectionCreatePopup .game_list .collection_game_item .game_info .comment_button img{height:24px;} #collectionCreatePopup .game_list .collection_game_item.show_comment .game_info .comment_button{display:none;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap{display:none;margin-top:12px;padding:12px 16px;width:100%;border:solid 1px #ebeff8;background:#FFF;border-radius:13px;border-top-left-radius:0;} #collectionCreatePopup .game_list .collection_game_item.show_comment .comment_wrap{display:block;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_textarea{width:100%;line-height:20px;height:20px;padding:0;font-size:14px;font-family:'Spoqa Han Sans', sans-serif;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_textarea::placeholder{font-size:12px;letter-spacing: -0.2px;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_bottom_button{margin-top:8px;line-height:19px;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_bottom_button .delete_comment_button{cursor:pointer;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_bottom_button .delete_comment_button img{height:16px;margin:1px 1px 0 0;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_bottom_button .comment_length_wrap{float:right;} #collectionCreatePopup .game_input_wrap{} #collectionCreatePopup .game_input_wrap .game_input_image{vertical-align:top;width:48px;height:48px;border-radius:8px;background-color:#ced8e5;background-size:20px 20px;background-repeat:no-repeat;background-position:center;background-image:url('/images/icon_v3/no_game_cover.png');} #collectionCreatePopup .game_input_wrap .game_input_order{vertical-align:top;width:32px;padding-right:4px;text-align:right;line-height:48px;} #collectionCreatePopup .game_input_wrap .game_input_form{vertical-align:top;width:calc(100% - 80px);margin-top:4px;} #collectionCreatePopup .game_input_wrap .game_input_form .n_input_text{width:100%;} @media only screen and (max-width:599px) { #collectionCreatePopup{padding:44px 0 0px 0;} #collectionCreatePopup .mobile_header{display:block;position:fixed;top:0;left:0;height:44px;background:#FFF;width:100%;line-height:44px;text-align:center;z-index:5;} #collectionCreatePopup .mobile_header .back_button{position:absolute;height:26px;left:16px;top:9px;} #collectionCreatePopup .mobile_header .mobile_suggest_button{position:absolute;right:12px;top:7px;text-align:center;line-height:13px;} #collectionCreatePopup .mobile_header .mobile_suggest_button img{height:20px;} #collectionCreatePopup .mobile_header .mobile_suggest_button .button_text{font-size:10px;font-weight:700;} #collectionCreatePopup .close_button{display:none;} #collectionCreatePopup .popup_title{display:none;} #collectionCreatePopup .collection_create_wrap{max-width:360px;} #collectionCreatePopup .collection_game_list_wrap{padding-bottom:220px;} #collectionCreatePopup .text_component_form{width:100%;} #collectionCreatePopup .game_list_header{width:calc(100% - 16px);max-width:350px;} #collectionCreatePopup .game_list .collection_game_item .comment_wrap .comment_textarea{font-size:13px;} #collectionCreatePopup .collection_game_list_body{width:calc(100% - 16px);max-width:350px;} #collectionCreatePopup .create_button{max-width:350px;width:calc(100% - 16px);} #collectionCreatePopup .suggest_button{display:none;} } #collectionCreatePopup .component_title{line-height:18px;} #collectionCreatePopup .component_input{width:100%;} #collectionCreatePopup .component_input .n_input_text{width:100%;} #collectionCreatePopup .component_list{margin-top:12px;} #collectionCreatePopup .component_list .component_item{width:72px;height:36px;line-height:36px;margin-right:10px;border-radius:8px;position:relative;vertical-align:top;background-color:#ebeff8;background-size:cover;background-position:center;text-align:center;user-select:none;cursor:pointer;} #collectionCreatePopup .component_list .component_item .multi_line{line-height:15px;margin-top:3px;} #collectionCreatePopup .component_list .selected_border{display:none;border-radius:8px;position:absolute;width:100%;height:100%;top:0;left:0;border:solid 2px #3f9dff;} #collectionCreatePopup .component_list .selected_check{position:absolute;width:18px;height:18px;top:-6px;right:-6px;background:#3f9dff;border-radius:9px;} #collectionCreatePopup .component_list .selected_check img{height:16px;margin:1px;} #collectionCreatePopup .component_list .selected .selected_border{display:block;} @media only screen and (max-width:599px) { #collectionCreatePopup .card_component_form{margin:0 auto;} } @media only screen and (max-width:355px) { #collectionCreatePopup .card_component_form{width:100%;} } #collectionCreatePopup .component_list .preset_type_item{width:99px;height:62px;margin:0 11px 11px 0;border-radius:4px;line-height:62px;} #collectionCreatePopup .component_list .preset_type_item:nth-child(3n){margin-right:0;} #collectionCreatePopup .component_list .preset_type_item:nth-last-child(-n+3){margin-bottom:0;} #collectionCreatePopup .component_list .preset_type_item .selected_border{border-radius:4px;} @media only screen and (max-width:355px) { #collectionCreatePopup .component_list .preset_type_item{width:calc(33vw - 18px);height:calc(20vw - 11px);margin:0 12px 11px 0;line-height:calc(20vw - 11px);} } #collectionCreatePopup .component_list .image_item{width:36px;height:36px;margin:0 10px 12px 0;border-radius:18px;} #collectionCreatePopup .component_list .image_item:nth-child(7n){margin-right:0;} #collectionCreatePopup .component_list .image_item:nth-last-child(-n+7){margin-bottom:0;} #collectionCreatePopup .component_list .image_item .selected_border{border-radius:18px;} #collectionCreatePopup .component_list .custom_image_item{width:84px;height:36px;margin:0 10px 12px 0;border-radius:18px;background:#e5f3ff;line-height:36px;} #collectionCreatePopup .component_list .custom_image_item.small_item{padding:0 16px;height:36px;margin:0 10px 12px 0;border-radius:18px;background:#e5f3ff;line-height:36px;} #collectionCreatePopup .component_list .no_image_item{width:36px;height:36px;margin:0 10px 12px 0;border-radius:18px;line-height:36px;} #collectionCreatePopup .component_list .no_image_item:nth-child(7n){margin-right:0;} #collectionCreatePopup .component_list .no_image_item:nth-last-child(-n+7){margin-bottom:0;} #collectionCreatePopup .component_list .no_image_item .selected_border{border-radius:18px;} @media only screen and (max-width:343px) { #collectionCreatePopup .component_list .image_item:nth-child(7n){margin-right:10px;} #collectionCreatePopup .component_list .image_item:nth-child(6n){margin-right:0px;} #collectionCreatePopup .component_list .image_item:nth-last-child(-n+7){margin-bottom:12px;} #collectionCreatePopup .component_list .image_item:nth-last-child(-n+6){margin-bottom:0px;} #collectionCreatePopup .component_list .no_image_item:nth-child(7n){margin-right:10px;} #collectionCreatePopup .component_list .no_image_item:nth-last-child(-n+7){margin-bottom:12px;} #collectionCreatePopup .component_list .no_image_item:nth-child(6n){margin-right:0;} #collectionCreatePopup .component_list .no_image_item:nth-last-child(-n+6){margin-bottom:0;} } #collectionCreatePopup .component_game_item{margin-top:12px;cursor:pointer;} #collectionCreatePopup .component_game_item .game_cover{vertical-align:top;width:48px;height:48px;border-radius:8px;background-color:#ebeff8;background-size:cover;background-position:center;} #collectionCreatePopup .component_game_item .game_cover img{height:24px;margin:12px;} #collectionCreatePopup .component_game_item .game_name{line-height:48px;vertical-align:top;width:calc(100% - 82px);margin:0 4px 0 10px;} #collectionCreatePopup .component_game_item .game_name .mobile_icon_new{height:20px;margin:14px 1px 0 0;} #collectionCreatePopup .component_game_item .arrow_icon{height:20px;margin-top:14px;} #collectionCreatePopup .custom_button_wrap{margin-top:12px;} #collectionCreatePopup .custom_button_wrap .btn_r{font-weight:700;padding:0 24px;margin-right:8px;} #collectionCreatePopup .custom_button_wrap .btn_r:last-child{margin-right:0;} #collectionCreatePopup .custom_button_wrap input{display:none;} #collectionCreatePopup .form_submit_button{width:320px;margin:36px auto 0 auto;} #collectionCreatePopup .form_submit_button .btn_r{width:100%;} @media only screen and (max-width:599px) { #collectionCreatePopup .form_submit_button{width:100%;max-width:320px;} } #collectionCreatePopup .card_preview_wrap{position:fixed;bottom:0;left:0;width:100%;height:250px;border-top:solid 1px #ebeff8;background:#FFF;} #collectionCreatePopup .card_preview_wrap .upper_gradation{pointer-events:none;width:100%;height:90px;position:absolute;top:-90px;left:0;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.75) 45%, rgba(245, 247, 252, 0.9) 83%, rgba(239, 241, 245, 0.9) 97%);} #collectionCreatePopup .card_preview_wrap .game_card_item_wrap{width:335px;height:208px;margin:20px auto 0 auto;} @media only screen and (max-width:355px) { #collectionCreatePopup .card_preview_wrap{height:219px;} #collectionCreatePopup .card_preview_wrap .upper_gradation{height:60px;top:-60px;} #collectionCreatePopup .card_preview_wrap .game_card_item_wrap{width:288px;height:179px;margin:20px auto 0 auto;} #collectionCreatePopup .card_preview_wrap .game_card_item_wrap .game_card_item{transform:scale(0.8597);} } /**************************************************************** * collection order popup ****************************************************************/ #changeCollectionOrderPopup{width:676px;border-radius:8px;background:#FFF;position:relative;} #changeCollectionOrderPopup .change_order_header{height:56px;line-height:56px;position:relative;} #changeCollectionOrderPopup .change_order_header .back_button{position:absolute;left:16px;top:0;cursor:pointer;} #changeCollectionOrderPopup .change_order_header .back_button img{height:24px;margin:16px 4px 0 0;} #changeCollectionOrderPopup .change_order_header .title{text-align:center;} #changeCollectionOrderPopup .change_order_body{height:510px;background:#ebeff8;} #changeCollectionOrderPopup .change_order_body .top_button_wrap{height:43px;line-height:19px;position:relative;text-align:center;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .select_all_button{position:absolute;left:16px;top:12px;cursor:pointer;user-select:none;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .select_all_button.all_selected{color:#3f9dff;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .select_all_button .check_icon{width:18px;height:18px;background-image:url('/images/icon_v3/check_light_gray.png');background-size:18px 18px;background-position:center;vertical-align:top;margin-right:2px;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .select_all_button.all_selected .check_icon{background-image:url('/images/icon_v3/check_blue_n.png');} #changeCollectionOrderPopup .change_order_body .top_button_wrap .order_type_button{position:absolute;right:16px;top:12px;cursor:pointer;user-select:none;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .order_type_button.is_reverse{color:#3f9dff;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .order_type_button .sort_icon{width:18px;height:18px;background-image:url('/images/icon_v3/sort_light_gray.png');background-size:18px 18px;background-position:center;vertical-align:top;margin-right:2px;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .order_type_button.is_reverse .sort_icon{background-image:url('/images/icon_v3/sort_blue.png');} #changeCollectionOrderPopup .change_order_body .top_button_wrap .select_cnt_wrap{display:none;padding:0 9px 1px 9px;background:#FFF;border-radius:12px;border:solid 2px #3f9dff;margin-top:10px;} #changeCollectionOrderPopup .change_order_body .top_button_wrap .select_cnt_wrap.has_cnt{display:inline-block;} #changeCollectionOrderPopup .change_order_body .game_list_wrap{height:467px;overflow:auto;} #changeCollectionOrderPopup .change_order_body .collection_game_item{height:64px;padding:0 16px;cursor:pointer;} #changeCollectionOrderPopup .change_order_body .collection_game_item:hover{background:#e5f3ff;} #changeCollectionOrderPopup .change_order_body .collection_game_item.selected{background:#bfe1ff;} #changeCollectionOrderPopup .change_order_body .collection_game_item .check_icon{vertical-align:top;width:20px;height:20px;margin:22px 12px 0 0;border:solid 1px #95a3b8;border-radius:10px;} #changeCollectionOrderPopup .change_order_body .collection_game_item .check_icon img{height:18px;width:18px;padding:1px;display:none;} #changeCollectionOrderPopup .change_order_body .collection_game_item.selected .check_icon{border:solid 1px #3f9dff;background:#3f9dff;} #changeCollectionOrderPopup .change_order_body .collection_game_item.selected .check_icon img{display:block;} #changeCollectionOrderPopup .change_order_body .collection_game_item .cover_image{width:40px;height:40px;background-color:#FFF;border-radius:8px;background-size:cover;background-position:center;margin:12px 12px 0 0;} #changeCollectionOrderPopup .change_order_body .collection_game_item .order_number{vertical-align:top;line-height:65px;max-width:30px;margin-right:2px;} #changeCollectionOrderPopup .change_order_body .collection_game_item .game_name{vertical-align:top;line-height:65px;width:calc(100% - 116px);} #changeCollectionOrderPopup .change_order_body .collection_game_item .game_name .mobile_icon_new{height:18px;margin:24px 1px 0 0;} #changeCollectionOrderPopup .change_order_body .collection_game_item .order_number.multi_line{line-height:20px;margin-top:13px;} #changeCollectionOrderPopup .change_order_body .collection_game_item .text_wrap{vertical-align:top;width:calc(100% - 116px);} #changeCollectionOrderPopup .change_order_body .collection_game_item .game_name.multi_line{line-height:20px;margin-top:13px;width:100%;} #changeCollectionOrderPopup .change_order_body .collection_game_item .game_name.multi_line .mobile_icon_new{margin:1px 1px 0 0;} #changeCollectionOrderPopup .change_order_body .collection_game_item .description{line-height:18px;margin-top:1px;} #changeCollectionOrderPopup .order_button_wrap{height:50px;background:#3f9dff;} #changeCollectionOrderPopup .order_button_wrap .order_button{text-align:center;width:25%;cursor:pointer;line-height:17px;} #changeCollectionOrderPopup .order_button_wrap .order_button img{height:24px;margin-top:5px;} #changeCollectionOrderPopup .change_order_footer{height:60px;padding:12px 20px;} #changeCollectionOrderPopup .change_order_footer .save_button{float:right;width:60px;} @media only screen and (max-width:599px) { #changeCollectionOrderPopup{width:100vw;height:100vh;border-radius:0;} #changeCollectionOrderPopup .change_order_header{height:45px;line-height:45px;} #changeCollectionOrderPopup .change_order_header .save_button{position:absolute;width:48px;right:16px;top:9px;} #changeCollectionOrderPopup .change_order_body .top_button_wrap{background:#FFF;} #changeCollectionOrderPopup .change_order_body{height:calc(100vh - 95px);} #changeCollectionOrderPopup .change_order_body .game_list_wrap{height:calc(100% - 43px);} #changeCollectionOrderPopup .change_order_footer{display:none;} /*#changeCollectionOrderPopup .order_button_wrap{height:111px;}*/ #changeCollectionOrderPopup .order_button_wrap{position:fixed;width:100%;height:50px;left:0;bottom:0;} } /**************************************************************** * collection detail page ****************************************************************/ .collection_detail_header{width:960px;padding:30px 0 60px 0;margin:auto;} .collection_detail_header .navi_button_wrap{color:#8090a6;line-height:22px;} .collection_detail_header .navi_button_wrap .back_button{cursor:pointer;height:22px;vertical-align:top;} .collection_detail_header .navi_button_wrap .collection_home_button{cursor:pointer;} .collection_detail_header .navi_button_wrap .collection_home_button img{height:22px;vertical-align:top;margin-right:2px;} .mobile_width .collection_detail_header .navi_button_wrap{display:none;} .collection_detail_header .collection_info{margin-top:40px;} .mobile_width .collection_detail_header .collection_info{margin-top:0;} .collection_detail_header .collection_info .collection_image_wrap{vertical-align:top;width:325px;height:210px;position:relative;} .collection_detail_header .collection_info .collection_image_wrap .collection_image{object-fit:cover;z-index:5;position:absolute;left:34px;top:10px;width:200px;height:200px;border-radius:8px;background-color:#FFF;background-size:cover;background-position:center;} .collection_detail_header .collection_info .collection_image_wrap .collection_image.no_image{background-repeat:no-repeat;background-size:24px 24px;background-color:#ced8e5;background-image:url('http://localhost:8080/images/icon_v3/no_game_cover.png');} .collection_detail_header .collection_info .collection_image_wrap .collection_image.background{z-index:3;filter:blur(28px);top:40px;} .collection_detail_header .collection_info .mobile_collection_match_wrap{text-align:center;margin-bottom:24px;} .collection_detail_header .collection_info .collection_match{position:relative;padding:0 8px;line-height:20px;border:solid 2px #ec5245;color:#ec5245;border-radius:12px;} .collection_detail_header .collection_info .collection_match .register_badge{position:absolute;width:320px;z-index:10;top:-72px;left:0;text-align:left;} .collection_detail_header .collection_info .collection_match .register_badge .badge_body{padding:11px 12px 11px 16px;line-height:19px;background:#00a789;border-radius:4px;overflow:hidden;box-shadow: 0px 4px 5px 0px rgba(3, 24, 39, 0.06),0px 1px 10px 0px rgba(3, 24, 39, 0.12),0px 2px 4px -1px rgba(3, 24, 39, 0.16);} .collection_detail_header .collection_info .collection_match .register_badge .badge_tip_wrap{position:absolute;width:10px;height:10px;bottom:1px;left:50px;transform:translate(-50%, 0);} .collection_detail_header .collection_info .collection_match .register_badge .badge_tip{width:10px;height:10px;background:#00a789;position:absolute;transform:rotate(45deg);left:0px;top:5px;} .collection_detail_header .collection_info .collection_match .register_badge .badge_icon{height:19px;float:right;cursor:pointer;margin-left:4px;} @media only screen and (max-width:599px) { .collection_detail_header .collection_info .collection_match .register_badge{width:286px;top:32px;left:calc(50% - 143px);} .collection_detail_header .collection_info .collection_match .register_badge .badge_tip_wrap{bottom:auto;left:50%;top:-9px;} } .collection_detail_header .collection_info .text_info_wrap{vertical-align:top;width:calc(100% - 325px);} .collection_detail_header .collection_info .text_info_wrap .main_info_wrap{margin-top:8px;min-height:126px;padding-bottom:16px;border-bottom:solid 1px #ebeff8;position:relative;} .collection_detail_header .collection_info .text_info_wrap .main_info_wrap .option_button{position:absolute;top:7px;right:0;height:20px;width:20px;cursor:pointer;} .collection_detail_header .collection_info .text_info_wrap .main_info_wrap .option_button:hover{border-radius:10px;background:#ebeff8;box-shadow:0 0 0 4px #ebeff8;} .collection_detail_header .collection_info .text_info_wrap .title{line-height:36px;} .collection_detail_header .collection_info .text_info_wrap .title .open_state_icon{height:26px;margin-top:5px;} .collection_detail_header .collection_info .text_info_wrap .description{margin-top:8px;line-height:21px;word-break:break-word;white-space:pre-line;} .collection_detail_header .collection_info .text_info_wrap .description a{color:#3F9DFF;} .collection_detail_header .collection_info .text_info_wrap .time_read{margin-top:4px;line-height:18px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width .collection_detail_header{width:100%;padding:90px 16px 60px 16px;} } .collection_detail_header .mobile_like_user_list{} .collection_detail_header .mobile_like_user_list .like_user_list{text-align:center;margin-top:16px;} .collection_detail_header .mobile_like_user_list .like_user_list.no_user{display:none;} .collection_detail_header .mobile_like_user_list .like_user_list .profile_image{width:28px;height:28px;border-radius:14px;border:solid 1px #ced8e5;background:#FFF;} .collection_detail_header .mobile_like_user_list .like_user_list .profile_list_wrap{vertical-align:top;height:28px;width:28px;position:relative;} .collection_detail_header .mobile_like_user_list .like_user_list .profile_list_wrap .profile_image{position:absolute;top:0;} .collection_detail_header .mobile_like_user_list .like_user_list .like_user_text{line-height:28px;margin-left:4px;} .collection_detail_header .mobile_like_user_list .like_user_list .like_user_text .dev_user_icon{margin-top:5px;} .collection_detail_header .mobile_like_user_list .like_user_list .show_list_button{cursor:pointer;} .collection_detail_header .collection_info .text_info_wrap .author_wrap{margin-top:20px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .profile_container{width:36px;height:36px;margin-right:8px;vertical-align:top;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .profile_container .profile_image{width:36px;height:36px;border-radius:18px;border:solid 1px #ced8e5;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .author_text_wrap{vertical-align:top;width:calc(100% - 102px);} .collection_detail_header .collection_info .text_info_wrap .author_wrap .author_text_wrap .achievement_title{line-height:18px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .author_text_wrap .nickname{line-height:36px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .author_text_wrap .nickname.multi_line{line-height:18px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .author_text_wrap .nickname .dev_user_icon{margin-top:9px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .author_text_wrap .nickname.multi_line .dev_user_icon{margin-top:1px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap .follow_button .btn_r{width:58px;margin-top:4px;} @media only screen and (max-width:599px) { .collection_detail_header{width:100%;padding:16px 0 0px 0;} .collection_detail_header .collection_info .collection_image_wrap{display:block;width:200px;height:200px;margin:auto;} .collection_detail_header .collection_info .collection_image_wrap .collection_image{left:0px;top:0px;width:200px;height:200px;border-radius:13px;} .collection_detail_header .collection_info .collection_image_wrap .collection_image.background{top:18px;filter:blur(28px);width:calc(100% - 10px);height:calc(100% - 10px);} .collection_detail_header .collection_info .text_info_wrap{display:block;width:calc(100% - 32px);margin:30px auto 0 auto;} .collection_detail_header .collection_info .text_info_wrap .main_info_wrap{margin-top:0px;min-height:auto;padding-bottom:0px;border-bottom:none;text-align:center;} .collection_detail_header .collection_info .text_info_wrap .main_info_wrap .option_button{display:none;} .collection_detail_header .collection_info .text_info_wrap .title{font-size:18px;line-height:25px;} .collection_detail_header .collection_info .text_info_wrap .title .open_state_icon{height:20px;margin-top:2px;} .collection_detail_header .collection_info .text_info_wrap .description{line-height:20px;font-size:13px;} .collection_detail_header .collection_info .text_info_wrap .time_read{margin-top:2px;line-height:17px;font-size:11px;} .collection_detail_header .collection_info .text_info_wrap .author_wrap{margin-top:28px;border-top:solid 1px #ebeff8;padding:12px 0 16px 0;} .collection_detail_header #collectionSideDisplayAd{display:none;margin-top:0px;} .collection_detail_header #collectionSideDisplayAd .display_ad_3{max-width:100%;border-radius:0;} .collection_detail_header #collectionSideDisplayAd .display_ad_3_0{max-width:100%;border-radius:0;} .collection_detail_header #collectionSideDisplayAd .display_ad_3_1{max-width:100%;border-radius:0;} .collection_detail_header #collectionSideDisplayAd .display_ad_3_2{max-width:100%;border-radius:0;} .collection_detail_header #collectionSideDisplayAd .ad_image{border-radius:0;} } .collection_detail_header .author_other_collection{margin-top:100px;display:none;} .collection_detail_header .author_other_collection .section_title{line-height:33px;} .collection_detail_header .author_other_collection .author_other_collection_list{margin-top:24px;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width .collection_detail_header .author_other_collection{overflow:hidden;} .mobile_width .feed_user_collection{margin-right:40px;} .mobile_width .feed_user_collection:nth-child(3n){margin-right:40px;} .mobile_width .feed_user_collection:nth-child(5n){margin-right:40px;} .mobile_width .feed_user_collection:last-child{margin-right:0px;} } @media only screen and (max-width:599px) { .collection_detail_header .author_other_collection{margin-top:0px;display:none;border-top:solid 8px #ebeff8;padding:0 16px 30px 16px;overflow:hidden;} .collection_detail_header .author_other_collection .section_title{line-height:29px;font-size:20px;margin-top:24px;} .collection_detail_header .author_other_collection .author_other_collection_list{margin-top:24px;} } .collection_header_tab{width:100%;height:59px;border-top:solid 1px #ebeff8;border-bottom:solid 1px #ebeff8;background:#FFF;position:sticky;top:75px;z-index:950;} .mobile_width .collection_header_tab{top:43px;} .collection_header_tab .tab_row_wrap{width:960px;margin:auto;} .collection_header_tab .tab_row_wrap .tab_button_wrap{display:inline-block;vertical-align:top;} .collection_header_tab .tab_row_wrap .tab_button{cursor:pointer;min-width:160px;text-align:center;vertical-align:top;line-height:55px;padding-bottom:2px;} .collection_header_tab .tab_row_wrap .tab_button.selected{color:#031827;padding-bottom:0;border-bottom:solid 2px #3f9dff;} .collection_header_tab .tab_row_wrap .tab_button .item_cnt{margin-left:6px;font-weight:400;} .collection_header_tab .tab_row_wrap .tab_button .comment_button_icon{vertical-align:top;height:20px;width:20px;background-image:url('/images/icon_v3/reaction_comment.png');background-size:20px 20px;margin-top:18px;margin-right:4px;} .collection_header_tab .tab_row_wrap .tab_button.selected .comment_button_icon{background-image:url('/images/icon_v3/reaction_comment_black.png');} .collection_header_tab .tab_row_wrap .tab_button.RECOMMEND{position:relative;background-image:url('/images/background/collection_bubble_web.png');background-repeat:no-repeat;background-size:contain;background-position:center;} .collection_header_tab .tab_row_wrap .tab_button .collection_star{position:absolute;width:22px;height:31px;top:2px;left:0;background-image:url('/images/background/collection_star.gif');background-repeat:no-repeat;background-size:contain;background-position:center;} .collection_header_tab .tab_row_wrap .tab_button .collection_thumb{position:absolute;width:61px;height:37px;bottom:-5px;right:-39px;background-image:url('/images/background/collection_thumb.gif');background-repeat:no-repeat;background-size:contain;background-position:center;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width .collection_header_tab .tab_row_wrap{width:100%;} } @media only screen and (max-width:599px) { .collection_header_tab{height:54px;} .collection_header_tab .tab_row_wrap{width:100%;} .collection_header_tab .tab_row_wrap .tab_button_wrap{width:100%;font-size:14px;} .collection_header_tab .tab_row_wrap .tab_button{min-width:auto;width:50%;line-height:20px;padding-top:7px;} .collection_header_tab .tab_row_wrap .tab_button .item_cnt{display:block;margin-left:0;font-size:12px;line-height:18px;padding-bottom:6px;} .collection_header_tab .tab_row_wrap .tab_button .comment_button_icon{height:18px;margin-top:1px;} .collection_header_tab .tab_row_wrap .tab_button.RECOMMEND{background-image:url('/images/background/collection_bubble_mobile.png');background-size:90% 90%;} .collection_header_tab .tab_row_wrap .tab_button .collection_thumb{width:46px;height:28px;bottom:-3px;right:2px;} } #userCollectionBody{padding:60px 0 60px 0;} @media only screen and (max-width:599px) { #userCollectionBody{padding:0;} } #userCollectionBody #collectionTopDisplayAd{display:none;} #userCollectionBody #collectionTopDisplayAd .display_ad_2{max-width:600px;} #userCollectionBody #collectionTopDisplayAd .display_ad_2_0{max-width:600px;} #userCollectionBody #collectionTopDisplayAd .display_ad_2_1{max-width:600px;} #userCollectionBody #collectionSideDisplayAd{display:none;margin-top:48px;} #userCollectionBody #collectionSideDisplayAd .display_ad_3{max-width:310px;} #userCollectionBody #collectionSideDisplayAd .display_ad_3_0{max-width:310px;} #userCollectionBody #collectionSideDisplayAd .display_ad_3_1{max-width:310px;} #userCollectionBody #collectionSideDisplayAd .display_ad_3_2{max-width:310px;} #userCollectionBody #collectionBottomDisplayAd{display:none;} #userCollectionBody .collection_game_row{width:960px;margin:auto;} #userCollectionBody .collection_game_left_wrap{display:inline-block;vertical-align:top;width:600px;margin-right:50px;} #userCollectionBody .collection_game_right_wrap{display:inline-block;vertical-align:top;width:calc(100% - 650px);} #userCollectionBody .collection_game_right_wrap .game_right_spacer{width:100%;height:0px;} #userCollectionBody .collection_game_right_wrap .game_info_right{position:sticky;} #userCollectionBody .game_link_row{border-top:solid 1px #ebeff8;padding-top:48px;width:960px;margin:auto;} #userCollectionBody #gameMiddleDisplayAd{width:960px;margin:0 auto 48px auto;display:none;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width #userCollectionBody .collection_game_row{width:600px;} .mobile_width #userCollectionBody .collection_game_left_wrap{display:block;width:100%;margin-right:50px;} .mobile_width #userCollectionBody .collection_game_right_wrap{display:none;} } @media only screen and (max-width:599px) { #userCollectionBody .collection_game_row{width:100%;} #userCollectionBody .collection_game_left_wrap{width:100%;margin-right:0;} #userCollectionBody .collection_game_right_wrap{display:none;} } #userCollectionBody .collection_body_game_list_wrap{position:relative;margin-bottom:48px;} #userCollectionBody .collection_body_game_list_wrap.long_list{padding-bottom:20px;} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap{display:none;width:100%;height:208px;background:linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 65%);position:absolute;bottom:0;left:0;} #userCollectionBody .collection_body_game_list_wrap.long_list .more_button_wrap{display:block;} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap .more_button{width:100%;position:absolute;bottom:0;left:0;} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap .more_button .register_badge{position:absolute;width:210px;z-index:10;pointer-events:none;top:-28px;left:calc(50% - 105px);animation:missionBadge 1.1s infinite;} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap .more_button .register_badge .badge_body{height:27px;line-height:26px;text-align:center;background:#3d7beb;border-radius:4px;overflow:hidden;box-shadow:0px 4px 5px 0px rgba(3, 24, 39, 0.06),0px 1px 10px 0px rgba(3, 24, 39, 0.12),0px 2px 4px -1px rgba(3, 24, 39, 0.16);} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap .more_button .register_badge .badge_tip_wrap{position:absolute;width:10px;height:10px;bottom:1px;left:50%;transform:translate(-50%, 0);} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap .more_button .register_badge .badge_tip{width:10px;height:10px;background:#3d7beb;position:absolute;transform:rotate(45deg);left:0px;top:5px;} @media only screen and (max-width:599px) { #userCollectionBody .collection_body_game_list_wrap .more_button_wrap{height:164px;} #userCollectionBody .collection_body_game_list_wrap .more_button_wrap .more_button{width:calc(100% - 32px);left:50%;transform:translate(-50%, 0);} } #userCollectionBody .collection_game_item{border-bottom:solid 1px #ebeff8;padding:32px 0;} #userCollectionBody .collection_game_item:last-child{border-bottom:none;padding-bottom:0;} #userCollectionBody .long_list .collection_game_item:nth-child(n+7){display:none;} #userCollectionBody .collection_game_item .game_cover_image{overflow:hidden;cursor:pointer;vertical-align:top;margin-right:16px;width:120px;height:120px;background-size:cover;background-position:center;border-radius:13px;position:relative;} #userCollectionBody .collection_game_item .game_cover_image .play_button{position:absolute;top:6px;left:6px;height:22px;line-height:22px;background:#3b4757;padding:0 7px 0 4px;border-radius:11px;} #userCollectionBody .collection_game_item .game_cover_image .play_button img{height:14px;margin:4px 2px 0 0;} #userCollectionBody .collection_game_item .game_cover_image .game_image{width:100%;height:100%;object-fit:cover;} #userCollectionBody .collection_game_item .game_cover_image.no_image{background-color:#ced8e5;background-image:url('/images/icon_v3/no_game_cover.png');background-size:24px 24px;background-position:center;background-repeat:no-repeat;} #userCollectionBody .collection_game_item .game_text_wrap{position:relative;width:calc(100% - 136px);height:120px;vertical-align:top;} #userCollectionBody .collection_game_item .game_text_wrap .game_name{line-height:24px;width:calc(100% - 32px);} #userCollectionBody .collection_game_item .game_text_wrap .game_name span{cursor:pointer;} #userCollectionBody .collection_game_item .game_text_wrap .game_name .mobile_icon_new{height:22px;margin-top:1px;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap{height:24px;width:24px;position:absolute;top:0;right:0;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_square{height:24px;position:absolute;top:0;right:0;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge{position:absolute;width:264px;z-index:10;top:34px;right:-14px;text-align:left;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge .badge_body{padding:11px 12px 11px 16px;line-height:19px;background:#00a789;border-radius:4px;overflow:hidden;box-shadow: 0px 4px 5px 0px rgba(3, 24, 39, 0.06),0px 1px 10px 0px rgba(3, 24, 39, 0.12),0px 2px 4px -1px rgba(3, 24, 39, 0.16);} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge .badge_tip_wrap{position:absolute;width:10px;height:10px;top:-9px;right:16px;transform:translate(-50%, 0);} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge .badge_tip{width:10px;height:10px;background:#00a789;position:absolute;transform:rotate(45deg);left:0px;top:5px;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge .badge_icon{height:19px;float:right;cursor:pointer;margin-left:4px;} #userCollectionBody .collection_game_item .game_text_wrap .genre_and_cnt{line-height:19px;margin-top:4px;} #userCollectionBody .collection_game_item .game_text_wrap .genre_wrap{vertical-align:top;} #userCollectionBody .collection_game_item .game_text_wrap .genre_item{margin-right:4px;text-decoration:underline;cursor:pointer;} #userCollectionBody .collection_game_item .game_text_wrap .genre_item:last-child{margin-right:0px;} #userCollectionBody .collection_game_item .game_text_wrap .divider{vertical-align:top;width:1px;height:15px;background:#ced8e5;margin:2px 8px;} #userCollectionBody .collection_game_item .game_text_wrap .owned_cnt{vertical-align:top;cursor:pointer;} #userCollectionBody .collection_game_item .game_text_wrap .owned_cnt img{height:16px;margin-top:2px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap{margin-top:44px;width:100%;height:28px;overflow:hidden;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item{margin-left:16px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item:first-child{margin-left:0px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.minimap_score{cursor:pointer;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item .score_value{vertical-align:top;border-radius:6px 6px 6px 0;line-height:27px;padding:0 8px 1px 8px;margin-right:6px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.no_score .score_value{background:#ced8e5;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.minimap_score.no_release .score_value{background:#95a3b8;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.minimap_score .score_value{background:#3f9dff;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.minimap_score:hover .score_value{background:#6dbbff;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.minimap_score:hover .score_text .title{color:#6dbbff;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.minimap_score:hover .score_text .score_cnt{color:#b2bdce;text-decoration:underline;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item.other_score .score_value{background:#3b4757;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .score_text{line-height:14px;} #userCollectionBody .collection_game_item .description_wrap{margin-top:16px;line-height:22px;background:#ebeff8;padding:12px 16px 16px;border-radius:0 13px 13px 13px;word-break:break-word;white-space:pre-line;} #userCollectionBody .collection_game_item .description_wrap .profile_image{width:18px;height:18px;background:#FFF;border:solid 1px #ced8e5;border-radius:9px;margin-right:2px;margin-top:2px;} #userCollectionBody .collection_game_item .description_wrap a{color:#3F9DFF;} #userCollectionBody .collection_game_item .description_wrap a:hover{text-decoration:underline;} @media only screen and (max-width:599px) { #userCollectionBody .collection_game_item{border-bottom:none;padding:24px 16px 16px 16px;} #userCollectionBody .collection_game_item .game_cover_image{margin-right:12px;width:100px;height:100px;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge{right:0px;} #userCollectionBody .collection_game_item .game_text_wrap .library_state_button_wrap .register_badge .badge_tip_wrap{right:2px;} #userCollectionBody .collection_game_item .game_text_wrap{width:calc(100% - 112px);height:100px;} #userCollectionBody .collection_game_item .game_text_wrap .game_name{font-size:16px;} #userCollectionBody .collection_game_item .game_text_wrap .game_name .mobile_icon_new{height:16px;margin-top:4px;} #userCollectionBody .collection_game_item .game_text_wrap .genre_and_cnt{line-height:18px;margin-top:1px;height:36px;} #userCollectionBody .collection_game_item .game_text_wrap .genre_wrap{font-size:11px;display:block;} #userCollectionBody .collection_game_item .game_text_wrap .divider{display:none;} #userCollectionBody .collection_game_item .game_text_wrap .owned_cnt{display:block;font-size:11px;} #userCollectionBody .collection_game_item .game_text_wrap .owned_cnt img{height:16px;margin-top:1px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap{margin-top:15px;width:100%;height:24px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item{margin-left:12px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item:first-child{margin-left:0;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .game_score_item .score_value{line-height:24px;padding:0 5px 0px 5px;margin-right:4px;font-size:12px;} #userCollectionBody .collection_game_item .game_text_wrap .game_score_wrap .score_text{line-height:12px;} #userCollectionBody .collection_game_item .description_wrap{font-size:13px;line-height:20px;} #userCollectionBody .collection_game_item .description_wrap .profile_image{margin-top:0px;} } #userCollectionBody .author_info_wrap{border-top:solid 1px #ebeff8;border-bottom:solid 1px #ebeff8;padding:46px 0;} #userCollectionBody .author_info_wrap .profile_container{width:46px;height:46px;margin-right:12px;vertical-align:top;} #userCollectionBody .author_info_wrap .profile_container .profile_image{width:46px;height:46px;border-radius:23px;border:solid 1px #ced8e5;} #userCollectionBody .author_info_wrap .author_text_wrap{vertical-align:top;width:calc(100% - 58px);position:relative;} #userCollectionBody .author_info_wrap .author_text_wrap .achievement_title{line-height:18px;} #userCollectionBody .author_info_wrap .author_text_wrap .nickname{line-height:46px;} #userCollectionBody .author_info_wrap .author_text_wrap .nickname.multi_line{line-height:28px;} #userCollectionBody .author_info_wrap .author_text_wrap .nickname .dev_user_icon{margin-top:15px;} #userCollectionBody .author_info_wrap .author_text_wrap .nickname.multi_line .dev_user_icon{margin-top:5px;} #userCollectionBody .author_info_wrap .author_text_wrap .review_point_summary{margin-top:2px;line-height:18px;} #userCollectionBody .author_info_wrap .author_text_wrap .intro{margin-top:8px;line-height:18px;white-space:pre-wrap;word-break:break-word;} #userCollectionBody .author_info_wrap .author_text_wrap .follow_button{position:absolute;right:0;top:2px;} #userCollectionBody .author_info_wrap .author_text_wrap .follow_button .btn_r{width:80px;} @media only screen and (max-width:599px) { #userCollectionBody .author_info_wrap{border-top:solid 8px #ebeff8;border-bottom:solid 8px #ebeff8;padding:24px 16px;} } #userCollectionBody .reaction_summary_wrap{padding:16px 20px 20px 20px;width:100%;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);} #userCollectionBody .reaction_summary_wrap .reaction_button_wrap{} #userCollectionBody .reaction_summary_wrap .reaction_button_wrap .reaction_item{width:33%;height:50px;padding-top:4px;text-align:center;line-height:18px;cursor:pointer;} #userCollectionBody .reaction_summary_wrap .reaction_button_wrap .reaction_item:nth-child(2){width:34%;} #userCollectionBody .reaction_summary_wrap .reaction_button_wrap .reaction_item img{height:24px;} #userCollectionBody .reaction_summary_wrap .reaction_button_wrap .reaction_item.animate img{transform-origin:-4% 70%;animation:likeAni .4s cubic-bezier(.64,.6,.73,1.39) 0s 1 normal;} #userCollectionBody .reaction_summary_wrap .reaction_button_wrap .reaction_item.selected{color:#3F9DFF;} #userCollectionBody .reaction_summary_wrap .like_user_list{text-align:center;margin-top:16px;border-top:solid 1px #ebeff8;padding-top:16px;} #userCollectionBody .reaction_summary_wrap .like_user_list.no_user{display:none;} #userCollectionBody .reaction_summary_wrap .like_user_list .profile_image{width:28px;height:28px;border-radius:14px;border:solid 1px #ced8e5;background:#FFF;} #userCollectionBody .reaction_summary_wrap .like_user_list .profile_list_wrap{vertical-align:top;height:28px;width:28px;position:relative;} #userCollectionBody .reaction_summary_wrap .like_user_list .profile_list_wrap .profile_image{position:absolute;top:0;} #userCollectionBody .reaction_summary_wrap .like_user_list .like_user_text{line-height:28px;margin-left:4px;} #userCollectionBody .reaction_summary_wrap .like_user_list .like_user_text .dev_user_icon{margin-top:5px;} #userCollectionBody .reaction_summary_wrap .like_user_list .show_list_button{cursor:pointer;} #reactionSummaryFooter{width:100%;height:53px;position:fixed;bottom:0;left:0;z-index:1001;background:#FFF;} #reactionSummaryFooter .reaction_button_wrap .reaction_item{width:33%;height:53px;text-align:center;line-height:52px;cursor:pointer;} #reactionSummaryFooter .reaction_button_wrap .reaction_item:nth-child(2){width:34%;} #reactionSummaryFooter .reaction_button_wrap .reaction_item img{height:22px;margin:15px 4px 0 0;} #reactionSummaryFooter .reaction_button_wrap .reaction_item.animate img{transform-origin:-4% 70%;animation:likeAni .4s cubic-bezier(.64,.6,.73,1.39) 0s 1 normal;} #reactionSummaryFooter .reaction_button_wrap .reaction_item.selected{color:#3F9DFF;} #userCollectionBody .popular_tag_wrap{margin-top:48px;display:none;} #userCollectionBody .popular_tag_wrap .section_title{line-height:16px;} #userCollectionBody .popular_tag_wrap .section_title .more_btn{float:right;cursor:pointer;} #userCollectionBody .popular_tag_wrap .popular_tag_list{margin-top:20px;} #userCollectionBody .popular_tag_wrap .collection_tag_item{height:56px;margin-bottom:16px;cursor:pointer;} #userCollectionBody .popular_tag_wrap .collection_tag_item:last-child{margin-bottom:0px;} #userCollectionBody .popular_tag_wrap .collection_tag_item .tag_icon_wrap{vertical-align:top;height:56px;width:56px;border-radius:8px;background:#ebeff8;padding:15px;margin-right:12px;} #userCollectionBody .popular_tag_wrap .collection_tag_item img{height:26px;} #userCollectionBody .popular_tag_wrap .text_wrap{vertical-align:top;height:56px;padding-top:8px;} #userCollectionBody .popular_tag_wrap .text_wrap .tag_name{line-height:18px;} #userCollectionBody .popular_tag_wrap .text_wrap .tag_cnt{margin-top:4px;line-height:14px;} #userCollectionBody .short_collection_item{margin-bottom:16px;} #userCollectionBody .short_collection_item:last-child{margin-bottom:0px;} #userCollectionBody .short_collection_item .collection_image_wrap{vertical-align:top;width:56px;height:56px;margin-right:12px;} #userCollectionBody .short_collection_item .collection_image_wrap .collection_image{width:56px;height:56px;border-radius:8px;} #userCollectionBody .short_collection_item .collection_image_wrap .collection_image.custom_image{background-color:#FFF;background-size:cover;background-position:center;} #userCollectionBody .short_collection_item .collection_image_wrap .collection_image.game_cover_image{background-color:#FFF;background-size:cover;background-position:center;} #userCollectionBody .short_collection_item .collection_image_wrap .collection_image.no_image{background-color:#ced8e5;background-image:url('/images/icon_v3/no_game_cover.png');background-size:24px 24px;background-repeat:no-repeat;background-position:center;} #userCollectionBody .short_collection_item .collection_info_wrap{vertical-align:top;width:calc(100% - 68px);} #userCollectionBody .short_collection_item .collection_info_wrap .title{line-height:20px;} #userCollectionBody .short_collection_item .collection_info_wrap .author{line-height:17px;} #userCollectionBody .short_collection_item .collection_interaction_wrap{margin-top:3px;line-height:18px;} #userCollectionBody .short_collection_item .collection_interaction_wrap .stat_cnt{margin-right:12px;} #userCollectionBody .short_collection_item .collection_interaction_wrap .stat_cnt:last-child{margin-right:0px;} #userCollectionBody .short_collection_item .collection_interaction_wrap .stat_cnt img{height:16px;margin:1px 1px 0 0;} #userCollectionBody .collection_comment_wrap{margin-top:48px;} #userCollectionBody .collection_comment{width:100%;margin:0 auto;} #userCollectionBody .collection_comment .comment_section_title{line-height:33px;} #userCollectionBody .collection_comment .comment_section_title .title_comment_cnt{line-height:24px;margin-left:8px;vertical-align:top;margin-top:5px;} #userCollectionBody .collection_comment .expand_comment_wrap{margin-top:20px;} #userCollectionBody .collection_comment .expand_comment_wrap .expand_comment{line-height:19px;cursor:pointer;} #userCollectionBody .collection_comment .comment_list .no_comment{text-align:center;line-height:20px;padding:36px 0;} #userCollectionBody .collection_comment .comment_list .comment_item{width:100%;padding-top:12px;position:relative;} #userCollectionBody .collection_comment .comment_item .profile_container{width:32px;vertical-align:top;margin:4px 8px 0 0;} #userCollectionBody .collection_comment .comment_item .profile_container .profile_image{width:32px;height:32px;border-radius:16px;border:solid 1px #ced8e5;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap{width:calc(100% - 66px);vertical-align:top;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .achievement_title{line-height:16px;margin-top:2px;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .user_nickname{line-height:19px;margin-top:2px;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .comment_text{width:calc(100% - 10px);line-height:19px;white-space:pre-wrap;position:relative;overflow:hidden;transition:height 0.15s ease-in;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .comment_text > p{min-height:19px;word-break:break-word;} #userCollectionBody .collection_comment .comment_item .comment_more_button{position:absolute;bottom:-1px;width:100%;height:75px;cursor:pointer;background:rgba(255,255,255,0.5);background:linear-gradient(to top, rgba(255,255,255,1) 25%, rgba(255,255,255,0));display:none;z-index:4;user-select:none;} #userCollectionBody .collection_comment .comment_item .comment_more_button span{position:absolute;line-height:18px;bottom:0px;left:0;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .comment_footer{margin-top:4px;line-height:18px;user-select:none;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .comment_footer .show_like_button{cursor:pointer;} #userCollectionBody .collection_comment .comment_item .comment_info_wrap .comment_footer .mention_button{cursor:pointer;} #userCollectionBody .collection_comment .comment_item .comment_image{width:calc(100% - 10px);margin-top:8px;} #userCollectionBody .collection_comment .comment_item .comment_image .image_container{max-height:260px;max-width:100%;} #userCollectionBody .collection_comment .comment_item .comment_image .image_container .image{cursor:pointer;} #userCollectionBody .collection_comment .comment_item .comment_divider{width:calc(100% - 40px);height:1px;background:#ebeff8;margin:12px 0 0 40px;} #userCollectionBody .collection_comment .comment_item:last-child .comment_divider{background:transparent;margin-top:4px;} #userCollectionBody .collection_comment .comment_item .comment_option_button{height:18px;position:absolute;top:13px;right:0px;cursor:pointer;} #userCollectionBody .collection_comment .comment_item .comment_like_button{height:18px;position:absolute;bottom:13px;right:0px;cursor:pointer;opacity:0.6;} #userCollectionBody .collection_comment .comment_item .comment_like_button.selected{opacity:1;} #userCollectionBody .collection_comment .comment_item:last-child .comment_like_button{bottom:4px;} #userCollectionBody .collection_comment .comment_item .comment_like_button.animate{transform-origin:-4% 70%;animation:likeAni .5s cubic-bezier(.64,.6,.73,1.39) 0s 1 normal;} #userCollectionBody .collection_comment .write_comment{padding:12px 0;width:100%;margin:auto;} #userCollectionBody .collection_comment .write_comment .comment_image_input{display:none;} #userCollectionBody .collection_comment .write_comment .collection_comment_image_dragover{border-radius:19px;background:#ebeff8;} #userCollectionBody .collection_comment .write_comment .dragover_on{background:#bfe1ff;} #userCollectionBody .collection_comment .write_comment .upload_image_icon{height:24px;vertical-align:top;margin:7px 0 0 16px;cursor:pointer;} #userCollectionBody .collection_comment .write_comment .comment_login{line-height:19px;width:calc(100% - 40px);padding:9px 8px 10px 8px;display:inline-block;} #userCollectionBody .collection_comment .write_comment .comment_text_area{line-height:19px;width:calc(100% - 100px);min-height:38px;display:inline-block;position:relative;} #userCollectionBody .collection_comment .write_comment .comment_text_area .editor_placeholder{position:absolute;line-height:19px;top:9px;left:8px;z-index:0;} #userCollectionBody .collection_comment .write_comment .comment_text_area .editor{position:relative;z-index:1;white-space:pre-wrap;padding:9px 8px 10px 8px;} #userCollectionBody .collection_comment .write_comment .comment_text_area .editor > p{position:relative;} #userCollectionBody .collection_comment .write_comment .write_comment_button{vertical-align:bottom;line-height:38px;cursor:pointer;color:#3f9dff;user-select:none;margin-left:20px;} #userCollectionBody .collection_comment .write_comment .write_comment_button.disabled{color:#bfe1ff;} #userCollectionBody .collection_comment .write_comment .comment_image_thumbnail_wrap{display:none;padding-bottom:12px;} #userCollectionBody .collection_comment .write_comment .comment_image_thumbnail_wrap .comment_image_thumbnail{margin-left:48px;position:relative;width:128px;height:128px;background:#FFF;} #userCollectionBody .collection_comment .write_comment .comment_image_thumbnail_wrap .comment_image_thumbnail .comment_image{width:128px;height:128px;} #userCollectionBody .collection_comment .write_comment .comment_image_thumbnail_wrap .button_container{position:absolute;top:0;left:0;width:128px;height:128px;border:solid 1px #ced8e5;} #userCollectionBody .collection_comment .write_comment .comment_image_thumbnail_wrap .button_container .crop_button{position:absolute;bottom:4px;right:4px;height:24px;width:24px;border-radius:12px;padding:4px;cursor:pointer;background:#3f9dff;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #userCollectionBody .collection_comment .write_comment .comment_image_thumbnail_wrap .button_container .delete_button{position:absolute;top:4px;right:4px;height:24px;width:24px;border-radius:12px;padding:4px;cursor:pointer;background:#7f8fa6;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #userCollectionBody .collection_comment .modify_comment{width:100%;} #userCollectionBody .collection_comment .modify_comment .comment_image_input{display:none;} #userCollectionBody .collection_comment .modify_comment .collection_comment_image_dragover{display:inline-block;vertical-align:top;width:calc(100% - 40px);border-radius:19px;background:#ebeff8;} #userCollectionBody .collection_comment .modify_comment .dragover_on{background:#bfe1ff;} #userCollectionBody .collection_comment .modify_comment .upload_image_icon{height:24px;vertical-align:top;margin:7px 0 0 12px;cursor:pointer;} #userCollectionBody .collection_comment .modify_comment .comment_text_area{line-height:19px;width:calc(100% - 40px);min-height:38px;display:inline-block;position:relative;} #userCollectionBody .collection_comment .modify_comment .comment_text_area .editor_placeholder{position:absolute;line-height:19px;top:9px;left:8px;z-index:0;} #userCollectionBody .collection_comment .modify_comment .comment_text_area .editor{position:relative;z-index:1;white-space:pre-wrap;padding:9px 8px 10px 8px;} #userCollectionBody .collection_comment .modify_comment .comment_text_area .editor > p{position:relative;} #userCollectionBody .collection_comment .modify_comment .comment_image_thumbnail_wrap{display:none;padding-bottom:12px;} #userCollectionBody .collection_comment .modify_comment .comment_image_thumbnail_wrap .comment_image_thumbnail{margin-left:44px;position:relative;width:128px;height:128px;background:#FFF;} #userCollectionBody .collection_comment .modify_comment .comment_image_thumbnail_wrap .comment_image_thumbnail .comment_image{width:128px;height:128px;} #userCollectionBody .collection_comment .modify_comment .comment_image_thumbnail_wrap .button_container{position:absolute;top:0;left:0;width:128px;height:128px;border:solid 1px #ced8e5;} #userCollectionBody .collection_comment .modify_comment .comment_image_thumbnail_wrap .button_container .crop_button{position:absolute;bottom:4px;right:4px;height:24px;width:24px;border-radius:12px;padding:4px;cursor:pointer;background:#3f9dff;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #userCollectionBody .collection_comment .modify_comment .comment_image_thumbnail_wrap .button_container .delete_button{position:absolute;top:4px;right:4px;height:24px;width:24px;border-radius:12px;padding:4px;cursor:pointer;background:#7f8fa6;box-shadow:-1px -1px 4px 0 rgba(29, 29, 29, 0.3);} #userCollectionBody .collection_comment .modify_comment .submit_button_wrap{text-align:right;line-height:18px;margin-top:4px;user-select:none;} #userCollectionBody .collection_comment .modify_comment .submit_button_wrap .cancel_button{cursor:pointer;} #userCollectionBody .collection_comment .modify_comment .submit_button_wrap .modify_comment_button{cursor:pointer;} @media only screen and (max-width:599px) { #userCollectionBody .collection_comment .expand_comment_wrap{margin-top:12px;} #userCollectionBody .collection_comment_wrap{padding:24px 16px 20px 16px;margin-top:0;border-bottom:solid 8px #ebeff8;} #userCollectionBody .collection_comment .comment_section_title{font-size:20px;} } .onboarding_banner_wrap{width:100%;max-width:960px;margin:auto;margin-top:70px;} .collection_recommend_wrap{padding-bottom:90px;} .collection_recommend_wrap .bottom_recommend_wrap{width:100%;padding:48px 0;} .collection_recommend_wrap .bottom_recommend_wrap.recommend_0{background:rgba(235, 239, 248, 0.4);} .collection_recommend_wrap .bottom_recommend_wrap .bottom_recommend_body{width:960px;margin:auto;} .collection_recommend_wrap .bottom_recommend_wrap .recommend_title{line-height:33px;} .collection_recommend_wrap .bottom_recommend_wrap .recommend_collection_list{margin-top:16px;} .collection_recommend_wrap .bottom_recommend_wrap .feed_user_collection{margin-bottom:0;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item{width:160px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_icon_wrap{width:160px;height:160px;border-radius:80px;background:#ebeff880;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_icon_wrap img{height:44px;margin:58px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_text{margin-top:12px;line-height:20px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_button{margin-top:20px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_button .btn_r{width:100%;} @media only screen and (max-width:1000px) and (min-width:600px) { .mobile_width .collection_recommend_wrap .bottom_recommend_wrap .bottom_recommend_body{width:calc(100% - 32px);} .mobile_width .collection_recommend_wrap .bottom_recommend_wrap .feed_user_collection{margin-bottom:20px;} } @media only screen and (max-width:599px) { .collection_recommend_wrap{padding-bottom:0px;} .collection_recommend_wrap .bottom_recommend_wrap{padding:24px 16px 28px 16px;} .collection_recommend_wrap .bottom_recommend_wrap .bottom_recommend_body{width:100%;} .collection_recommend_wrap .bottom_recommend_wrap .recommend_title{line-height:29px;font-size:20px;} .collection_recommend_wrap .bottom_recommend_wrap .feed_user_collection{margin-bottom:28px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item{padding:20px 64px;display:block;width:100%;background:#FFF;border-radius:13px;text-align:center;box-shadow:0px 4px 5px 0px rgb(3 24 39 / 6%), 0px 1px 10px 0px rgb(3 24 39 / 12%), 0px 2px 4px -1px rgb(3 24 39 / 16%);} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_icon_wrap{width:100px;height:100px;border-radius:50px;margin:auto;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_icon_wrap img{height:40px;margin:30px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_text{margin-top:12px;} .collection_recommend_wrap .bottom_recommend_wrap .keyword_recommend_item .keyword_button{margin-top:12px;} } .more_tag_button_wrap{text-align:center;padding-bottom:90px;} .more_tag_button_wrap .btn_r{padding:0 40px;} .more_tag_button_wrap .tag_name{font-weight:700;}