@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

.wrap_content.component{padding:50px 0;font-family:'Noto Sans KR';opacity:0;transition:opacity 0.2s;}
.wrap_content.component.on{opacity:1;}
.wrap_content.component.fullscreen { position: relative; width: 100%; }

.wrap_content.component.fullscreen .component_wrap [class*="-example"] pre { max-width: 1080px; margin: 20px auto 0; }
.wrap_content.component.fullscreen .component_wrap [class*="-example"] pre + .code-box{margin-top:20px;}

pre{position: relative; max-height: 350px; overflow: auto;}
pre, pre::-webkit-scrollbar-track, pre::-webkit-scrollbar-corner {background-color: #000 !important;}
pre .btn-base.xxs{position: absolute;right:10px;top:10px;}
pre::-webkit-scrollbar {width: 8px; height: 8px;}
pre::-webkit-scrollbar-track {border-radius: 6px;margin: 10px; }
pre::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 6px;}
pre::-webkit-scrollbar-corner {border-radius: 0 0 6px 0;}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}

.component_wrap{position: relative;}
.component_wrap > *:not(.btn-base, .eventWrap, .list_wrapper, .cmp_item, .total_info_area){border:1px dashed #999;padding:30px;border-radius:10px;}
.component_wrap [class*="-example"], .component_wrap .eventWrap{margin-top:30px;}
.component_wrap [class*="-example"]:first-child{margin-top:0;}
.component_wrap .eventWrap + .btn-base,
.component_wrap [class*="-example"] + .btn-base{margin-top:30px;}
.component_wrap .component_tit{font-size:16px;font-weight:700;font-family:'Noto Sans KR';margin-bottom:20px;text-align:left;padding:10px;background-color:#efefef;border-radius:3px;margin-top:30px;}
.component_wrap .component_tit:first-child{margin-top:0;}
.component_wrap .component_s_tit{font-size:14px;font-family:'Noto Sans KR';margin-bottom:10px;font-weight:700;margin-top:30px;}
.component_wrap .component_s_tit:first-child{margin-top:0;}
.component_wrap [class*="-example"] .code-info{font-size:13px;line-height:1.4;text-align:left;}
.component_wrap [class*="-example"] .code-info em{font-style:normal;background-color:#000;color:#fff;padding:0px 5px;border-radius:2px;font-size:12px;min-width:17px;display:inline-block;text-align:center;text-indent:0;font-family:'Pretendard';}
.component_wrap [class*="-example"] .code-info > *{margin-top:5px;}
.component_wrap [class*="-example"] .code-info > *:first-child{margin-top:0;}
.component_wrap [class*="-example"] .code-info.indent > li{padding-left:7px;text-indent:-7px;}
.component_wrap [class*="-example"] .code-info.indent > li .red{color:#f00;}
.component_wrap [class*="-example"] .code-info.indent > li .path{color:gray;text-decoration: underline;}
.component_wrap [class*="-example"] .half_img{display:flex;}
.component_wrap [class*="-example"] .half_img img{width:50%;}
.component_wrap [class*="-example"] .code-info.indent > li .center{display:block;text-align:center;}
.component_wrap [class*="-example"] pre + .code-info{margin-top:20px;}
.component_wrap [class*="-example"] .file-path{color:gray;display:flex;gap:10px 5px;align-items:center;}
.component_wrap [class*="-example"] .file-path .label{color:#000;}
.component_wrap [class*="-example"] .file-path .path{font-size:12px;}
.component_wrap [class*="-example"] * + .file-path{margin-top:5px;}
.component_wrap [class*="-example"] .component_tit + .file-path{margin-top:0;}
.component_wrap [class*="-example"].fullscreen .code-info{padding:0 30px;}

.component_wrap [class*="-example"].head{padding:0;border:0;}
.component_wrap [class*="-example"].head .component_tit{font-size:24px;background-color: transparent;margin-bottom:10px;padding:0;}
.component_wrap [class*="-example"].head .component_s_tit{font-size:16px;font-weight:500;color:#333;background-color:#efefef;padding:10px;display:flex;justify-content: space-between;align-items:center;}
.component_wrap .cmp_item{position:absolute;right:0;top:0;font-size:14px;}
.component_wrap .cmp_item .cmp_list{display:flex;align-items:center;}
.component_wrap .cmp_item .cmp_list > li{padding-left:8px;margin-left:8px;position: relative;}
.component_wrap .cmp_item .cmp_list > li:first-child{padding-left:0;margin-left:0;}
.component_wrap .cmp_item .cmp_list > li::before{content:'';display:inline-block;width:1px;height:12px;position:absolute;left:0;top:50%;margin-top:-6px;background-color:#aaa;}
.component_wrap .cmp_item .cmp_list > li.no-l{padding-left:0;}
.component_wrap .cmp_item .cmp_list > li.no-l::before,
.component_wrap .cmp_item .cmp_list > li:first-child::before{display:none;}
.component_wrap .cmp_item .cmp_list > li .regist_form,
.component_wrap .cmp_item .cmp_list > li .status_area{padding:10px;border:1px solid #ddd;border-radius:3px;position: absolute;right:0;top:30px;background-color:#fff;width:300px;display:none;z-index:10;}
.component_wrap .cmp_item .cmp_list > li .regist_form.on,
.component_wrap .cmp_item .cmp_list > li .status_area.on{display:block;}
.component_wrap .cmp_item .cmp_list > li .regist_form .input-base-wrap.ver_input-btn{gap:0 5px;}
.component_wrap .cmp_item .cmp_list > li .regist_form .input-base{height:24px;padding:5px;font-size:12px;}
.component_wrap .cmp_item .cmp_list > li .status_area li{margin-top:5px;display:flex;justify-content:space-between;gap:0 5px;}
.component_wrap .cmp_item .cmp_list > li .status_area li:first-child{margin-top:0;}
.component_wrap .cmp_item .cmp_list > li .status_area li > a{display:flex;justify-content:space-between;gap:0 5px;align-items:center;line-height:1.4;flex-grow:1;max-width:253px;}
.component_wrap .cmp_item .cmp_list > li .status_area li > .btn-delete{flex-shrink:0;}
.component_wrap .cmp_item .cmp_list > li .status_area li .url{flex-grow:1;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;font-size:13px;}
.component_wrap .cmp_item .cmp_list > li .status_area li .author{flex-shrink:0;color:#999;font-size:12px;}
.component_wrap .cmp_item .cmp_list > li .btn_view .count{font-style:normal;margin-left:3px;}
.component_wrap .cmp_item .count em{font-style:normal;font-weight:bold;color:#0082ff;}
.component_wrap .cmp_item .like_area{display:flex;gap:0 2px;}
.component_wrap .cmp_item .like_area .btn_like {width: 15px; height: 15px;background: url(https://img.megagong.net/m/pub/i_like_off.png) 50% 50% no-repeat; background-size: 100% auto; cursor: pointer; border:0; font-size:0; display:block;}
.component_wrap .cmp_item .like_area .btn_like.on {background: url(https://img.megagong.net/m/pub/i_like_on.png) 50% 50% no-repeat; animation: heartBeat .5s 1 alternate; background-size: 100% auto;}
.component_wrap .cmp_item .like_area em{font-style:normal;color:#000;}
.component_wrap .cmp_item .like_area .label_like{cursor:pointer;}
.component_wrap .cmp_item .like_area .like_members{position: absolute;right:0;top:20px;border:1px solid #000;border-radius:3px;background-color:#fff;padding:6px;display:none;z-index:10;}
.component_wrap .cmp_item .like_area .like_members.on{display:block;}
.component_wrap .cmp_item .like_area .like_members li{font-size:12px;margin-top:5px;}
.component_wrap .cmp_item .like_area .like_members li:first-child{margin-top:0;}
.noData{padding:30px 15px;font-size:16px;justify-content: center !important;white-space: nowrap;text-align:center;color:#666;}


@keyframes heartBeat {
    0% {transform: scale(1);}
    40% {transform: scale(1.25);}
    70% {transform: scale(0.9);}
    100% {transform: scale(1);}
}

.policy_sample dt {border: 1px solid #ddd;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);overflow-y: auto;max-height: 300px;}
.policy_sample.open dt{max-height:initial;}
.policy_sample dt::-webkit-scrollbar {width: 8px; height: 8px;}
.policy_sample dt::-webkit-scrollbar-track {border-radius: 6px;margin: 10px; }
.policy_sample dt::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 6px;}
.policy_sample dt::-webkit-scrollbar-corner {border-radius: 0 0 6px 0;}
.policy_sample dt .half{display:flex;flex-wrap:wrap;}
.policy_sample dt .half img{width:50%;}
.policy_sample dd {margin-top:10px;flex-grow: 1;font-size: 16px;line-height: 1.5;color: #333;}

.component_wrap .list_wrapper{display:flex;gap:30px;flex-wrap:wrap;}
.component_wrap .list_wrapper [class*="_list"]{border:1px dashed #999;padding:30px;border-radius:10px;font-family:'Noto Sans KR';width:calc(50% - 15px);box-sizing:border-box;}
.component_wrap .list_wrapper #root, .component_wrap .list_wrapper #root [class*="_list"]{width:100%;}
.component_wrap .search_area .tit,
.component_wrap .list_wrapper [class*="_list"] .tit{font-size:24px;font-weight:700;}
.component_wrap .search_area .tit .sub_txt{font-size: 20px;color:#666}
.component_wrap .list_wrapper [class*="_list"] > ul{margin-top:30px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li{margin-top:10px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li:first-child{margin-top:0;}
.component_wrap .list_wrapper [class*="_list"] > ul > li > *{font-weight:700;}
.component_wrap .list_wrapper [class*="_list"] > ul > li > .label{margin-top:10px;display:flex;align-items:center;gap:0 1px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li > .label:first-child{margin-top:0;}
.component_wrap .list_wrapper [class*="_list"] > ul > li > .label .state{display:inline-block;vertical-align:middle;padding:3px;background-color:#000;color:#fff;border-radius:3px;font-style:normal;font-size:11px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li ul{padding-left:7px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li a{color:#3183ff;text-decoration:underline;}
.component_wrap .list_wrapper [class*="_list"] > ul > li li.dev a{color:green;}
.component_wrap .list_wrapper [class*="_list"] > ul > li .highlight{display:inline-block;background-color: red;color:#fff;padding:0 1px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li li{margin-top:7px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li li .info{font-size:11px;color:#666;text-indent:-10px;padding-left:10px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li li .info li{margin-top:3px;}
.component_wrap .list_wrapper [class*="_list"] > ul > li .bookmark{cursor:pointer;background:url(/component/mock/ico-16-star-sel2.png) 50% 50% no-repeat;font-size:0;width:16px;height:16px;display:inline-block;vertical-align:middle;position: relative;top:-1px;display:none;}
.component_wrap .list_wrapper [class*="_list"] > ul > li .bookmark.on{background:url(/component/mock/ico-16-star-sel.png) 50% 50% no-repeat;}
.component_wrap .list_wrapper [class*="_list"] > ul > li .new{display:inline-block;width:16px;height:16px;background-color:#0082ff;font-size:10px;color:#fff;border-radius:50%;vertical-align:middle;text-align:center;line-height:14px;}
.component_wrap .search_area + .list_wrapper { margin-top:30px; }
.component_wrap .search_list > ul > li.no-data span{color:red;} 
.component_wrap .search_area{background-color: #fff;position: relative;width:100%;box-sizing:border-box;}
.component_wrap .search_form {display:flex;align-items:center;gap:5px;margin-top:10px;}
.component_wrap .search_form .input-base{height:36px;flex-grow:1;}
.component_wrap .search_form .btn-base{flex-shrink:0;display:flex;width:105px;}
.component_wrap .search_form .btn-base#all_view{width:128px;}
.component_wrap .search_area .autocomplete_wrap{position:absolute;left:30px;right:140px;top:99px;display:none;background-color:#fff;border:1px solid #ccc;border-top:0;max-height:165px;overflow-y:auto;z-index:1;}
.component_wrap .search_area .autocomplete_list > li{display:flex;align-items:center;justify-content:space-between;transition:background-color 0.2s;padding-right:5px;}
.component_wrap .search_area .autocomplete_list > li:hover{background-color: #efefef;}
.component_wrap .search_area .autocomplete_list > li > a{display:block;padding:10px 5px;flex-grow:1;}

.ver_fixSearch .component_wrap{padding-top:62px;}
.ver_fixSearch .component_wrap .search_area{position: fixed;left:50%;top:0;z-index: 1;max-width:1080px;transform:translateX(-50%);padding:10px 30px;border:1px solid #999;border-radius:0;}
.ver_fixSearch .component_wrap .search_area .autocomplete_wrap{top:45px;}
.ver_fixSearch .component_wrap .search_area .tit{display:none;}
.ver_fixSearch .component_wrap .search_form{margin-top:0;}

.component_wrap .eventWrap code[class*=language-]{font-size:14px !important;}

.component_wrap .btns-example .code-box{display:flex;flex-direction:column;gap:10px;}
.component_wrap .tabs-swiper-example{padding:0;}
.component_wrap .tabs-swiper-example .tab-swiper-wrap{padding:30px;}
.component_wrap .slide-example,
.component_wrap .column-example{padding:0;border:0;border-radius:0;}

.component_wrap .column-example{width:1200px;position: relative;left:-60px;}
.component_wrap .column-example .column_content{margin:0;}
.component_wrap .font-example{text-align:center;}

.component_wrap .detail-navi { position: fixed; right: 30px; top: 255px; z-index:9; background-color: #fff; width: 300px; box-sizing: border-box; padding: 20px; transition: all 0.2s; }
.component_wrap .detail-navi li { margin-top: 10px; line-height: 1.2; cursor: pointer; color: #111; transition: color 0.2s; }
.component_wrap .detail-navi li.on,
.component_wrap .detail-navi li:hover { color: #0082ff; }
.component_wrap .detail-navi li:first-child { margin-top: 0; }
.component_wrap .detail-navi a.top{ display:block; padding:5px; margin-top:10px; background-color: #0082ff; color:#fff; text-align:center; border-radius:5px; }
.component_wrap .detail-navi .btn-close{margin-top:10px;}
.component_wrap .detail-navi .btn-close, .component_wrap .detail-navi .btn-close > *{width:100%;box-sizing:border-box;}
.component_wrap .detail-navi.close { right: 0; top: 0; width: 100px; padding: 5px; }
.component_wrap .detail-navi.close ul { display: none; }
.component_wrap .detail-navi.close a.top { margin-top: 0; }
.component_wrap .detail-navi.close .btn-close { margin-top: 5px; }

.bookmark_wrap { padding: 10px; position: fixed; left: 30px; bottom: 70px; border: 1px solid #999; border-radius: 10px; background-color: #fff; z-index: 9; min-width: 150px; }
.bookmark_wrap h3 { text-align: center; }

#bookmark_list{margin-top:10px;}
#bookmark_list li + li {margin-top:7px;}
#bookmark_list li {color:#3183ff;text-decoration:underline;font-weight:700;}

.total_info_area{margin:30px 0;display:flex;gap:10px;}
.total_info_area > *{padding:30px;border:1px dashed #999;border-radius:10px;width:33.333%;min-height:140px;}
.total_info_area.col2 > *{width:50%;}
.total_info_area dt, .total_copy_ranking dt{position: relative;position: relative;}
.total_info_area dt .label, .total_copy_ranking dt .label,
.user_stats_area .label{font-size:18px;font-weight:600;}
.total_info_area dt .tiny_text,
.total_copy_ranking dt .tiny_text{position: absolute;right:0;top:3px;font-size:11px;color:#999;text-align:right;line-height:1.2;}
.total_info_area dd, .total_copy_ranking dd{margin-top:20px;}
.total_copy_ranking{margin-bottom:30px;width:66.666%;}

.component_wrap .total_list{overflow-y:auto;height:95px;padding:10px;border:1px solid #dedede;border-radius:3px;margin-bottom:20px;}
.component_wrap .total_list.mb0{margin-bottom:0 !important;}
.component_wrap .total_list.mb10{margin-bottom:10px !important;}
.component_wrap .total_list.h-auto{height:auto;overflow-y:initial;}
.component_wrap .total_list::-webkit-scrollbar {width: 8px;}
.component_wrap .total_list::-webkit-scrollbar-track {background-color: #f2f2f2;border-radius: 6px;margin: 10px 0;}
.component_wrap .total_list::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 6px;}
.component_wrap .total_list li{margin-top:5px;transition:color 0.2s;}
.component_wrap .total_list li:nth-child(1):not(.noData, .p_li){color:#0082ff;font-weight:bold;font-size:14px;}
.component_wrap .total_list li:not(.noData, .p_li):hover{color:#0082ff;}
.component_wrap .total_list li .url_date{margin-top:5px;font-size:11px;}
.component_wrap .total_list li .p_link{padding:3px;display:inline-block;background-color: #9ed0ff;font-size:11px;border-radius:3px;}
.component_wrap .total_list li .p_link:hover{color:#0082ff;}
.component_wrap .total_list li .p_info{display:flex;justify-content:space-between;gap:0 10px;font-size:12px;flex-wrap:wrap;}
.component_wrap .total_list li .p_info .p_date{font-size:11px;color:#666;padding-top:5px;}
.component_wrap .total_list li .p_info .p_wb{display:flex;gap:0 5px;align-items:center;position: relative;margin-top:3px;}
.component_wrap .total_list li .p_info .p_name{display:block;font-size:13px;}
.component_wrap .total_list li .p_info .p_name .p_link{font-size:inherit;}
.component_wrap .total_list li .p_info .p_details{position: relative;}
.component_wrap .total_list li .p_info .p_details ul{position: absolute;left:0;top:20px;background-color:#fff;padding:6px;border:1px solid #ddd;z-index:1;display:none;max-height:100px;overflow-y:auto;border-radius:3px;}
.component_wrap .total_list li .p_info .p_details ul::-webkit-scrollbar {width: 4px;}
.component_wrap .total_list li .p_info .p_details ul::-webkit-scrollbar-track {background-color: #f2f2f2;border-radius: 3px;margin: 0px 0;}
.component_wrap .total_list li .p_info .p_details ul::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 3px;}
.component_wrap .total_list li .p_info .p_details ul.on{display:block;}
.component_wrap .total_list li .p_info .p_details li{font-size:11px;font-weight:normal;color:#666;margin-top:3px;}
.component_wrap .total_list li .p_info .p_details li:first-child{margin-top:0px;}
.component_wrap .total_list li .p_info .p_worker{display:block;}
.component_wrap .total_list li .p_date{flex-shrink:0;}
.component_wrap .total_info_area .tiny_info{font-size:12px;color:#555;word-break: break-all;}
.component_wrap .total_info_area .tiny_info .comment{color:green;}

.total_info_area{position: relative;}
.total_info_area .google_trends{width:100%;}
.total_info_area .google_trends dt em{font-style:normal;font-size:14px;}
.total_info_area .total_view_count{position: relative;}
.total_info_area .total_view_count dd em{font-style:normal;color: #0082ff;font-weight:bold;display:block;font-size:26px;}
.total_info_area .stats{display:flex;margin-top:30px;gap:0 10px;}
.total_info_area .stats li{text-align:center;border:1px solid #ddd;border-radius:3px;cursor:pointer;}
.total_info_area .stats li dt, .total_info_area .stats li dd{padding:10px;}
.total_info_area .stats li dt{font-size:16px;font-weight:500;}
.total_info_area .stats li dd{border-top:1px solid #ddd;margin-top:0;}
.total_info_area .sub_label{font-size:16px;font-weight:500;margin-bottom:10px;margin-top:30px;}
.total_info_area .sub_label.center{text-align:center;}
.total_info_area .sub_label .sm_text{font-size:14px;color:#666;}
.total_info_area .chart_on{display: none;}
.total_info_area .chart_on i{transform: rotate(180deg);}

.total_info_area #loading_ui{position: absolute; padding: 0; border: 0; min-height: auto;background:none}  
/* #loading_ui .spinner {border: 8px solid rgba(0, 0, 0, 0.15);border-top-color: #0082ff; } */

.search_daterange_area{padding: 15px;background: #f5f5f5;font-size: 13px;border-radius:3px;}
.search_daterange_area .tit{font-size:14px;font-weight:700;margin-bottom:10px;}
.search_daterange_area .tit span{color:#999;font-size:12px;font-weight:400;}
.search_daterange_area .month_list{display:flex;border:1px solid #ddd;border-radius:3px;}
.search_daterange_area .month_list li{width:33.333%;border-left:1px solid #ddd;text-align:center;}
.search_daterange_area .month_list li:first-child{border-left:0;}
.search_daterange_area .month_list li a{display:block;background-color:#fff;padding:10px;font-size:14px;transition:color 0.2s;}
.search_daterange_area .month_list li a:hover{color:#0082ff;}
.search_daterange_area .month_list li.on a{background-color:#0082ff;color:#fff;}
.search_daterange_area .date_area{margin-top:10px;}
.search_daterange_area .date_area > .btn-base{margin-top:10px;}
.search_pageview_result{margin-top:10px;}
.search_pageview_result span.range{font-size:14px;}
.search_pageview_result span.result{display:flex;gap:0 5px;align-items:center;margin-top:5px;}
.search_pageview_result span.result em{font-size:16px;color:#0082ff;font-weight:600;}
.ui-widget.ui-widget-content.logs_datepicker .ui-state-active,
.ui-widget.ui-widget-content.logs_datepicker .ui-widget-content .ui-state-active{color:#0082ff;font-weight:bold;}
.search_daterange_area .date_area > .btn-base.xs > *{font-size:14px;}

#clickResearchTab{position: relative;}
#clickResearchTab.no_action::after{content:'';display:block;width:100%;height:100%;background-color:gold;opacity:0;position: absolute;left:0;top:0;}

.user_stats_area{position:fixed;right:30px;bottom:30px;width:250px;border-radius:3px;padding:15px !important;background-color:#fff;z-index:10;}
.user_stats_area .label{text-align:center;display:block;margin-bottom:10px;}
.user_stats_area .user_list{max-height:75px;overflow:auto;}
.user_stats_area .user_list::-webkit-scrollbar {width: 8px;}
.user_stats_area .user_list::-webkit-scrollbar-track {background-color: #f2f2f2;border-radius: 6px;margin: 10px 0;}
.user_stats_area .user_list::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 6px;}
.user_stats_area .user_list li{margin-top:5px;color:#999;font-size:14px;}
.user_stats_area .user_list li:first-child{margin-top:0;}
.user_stats_area .user_list li .label_area{display:flex;gap:0 5px;align-items:center;}
.user_stats_area .user_list li .state{display:block;width:5px;height:5px;background-color:#999;border-radius:50%;}
.user_stats_area .user_list li.online .state{background-color:#0082ff;}
.user_stats_area .user_list li.online{color:#000;}
.user_stats_area .user_list li .location,
.user_stats_area .user_list li .user_last_active{font-size:11px;padding-left:10px;}
.user_stats_area .btn-close{position: absolute;right:15px;top:15px;}

.collection_tit{margin-bottom:30px;}
.collection_wrap{margin-top:30px;}
.component_wrap > .collection_wrap{border:0;padding:0;}
.component_wrap > .collection_wrap .collection_item{margin-top:30px;border:1px dashed #999;padding:30px;border-radius:10px;}
.component_wrap > .collection_wrap .collection_item:first-child{margin-top:0;}
.component_wrap > .collection_wrap .collection_item pre{display:none;}
.component_wrap > .collection_wrap .collection_item .fullscreen{width:1920px;position: relative;left:50%;transform:translateX(-50%);}
.component_wrap > .collection_wrap .collection_item .fullscreen .component_tit{width:1080px;margin:0 auto 20px;}
.component_wrap > .collection_wrap .noData{border:1px solid #ddd;}
.cmp_top_links{margin-bottom:30px;}

.total_info_area > .log_clicks_area{width:100%;}
.total_info_area > .log_clicks_area li{margin-top:10px;font-size:14px;}
.total_info_area > .log_clicks_area li:first-child{margin-top:0;}
.total_info_area > .log_clicks_area li .key{display:block;padding:10px;text-align:left;color:#fff;background-color:#0082ff;}
.total_info_area > .log_clicks_area li .count_area{display:flex;}
.total_info_area > .log_clicks_area li .count{background-color:#cfe2ff;flex-grow:1;padding:10px;font-weight:bold;flex-grow:1;}
.total_info_area > .log_clicks_area li .count em.point{display:inline-block;font-size:16px;color:#000;font-weight:900;margin-left:5px;}
.total_info_area > .log_clicks_area .search_daterange_area li {margin-top:0;}
/* .total_info_area > .log_clicks_area .total_view_count > dd{display:flex;gap:0 10px;} */
.total_info_area > .log_clicks_area .total_view_count > dd .research_area{display:flex;gap:0 20px;margin-top:20px;position: relative;}
.total_info_area > .log_clicks_area .total_view_count > dd .research_area .btn-fullscreen{position: absolute;right: 10px; top: 10px;}
.total_info_area > .log_clicks_area .total_view_count > dd .half{width:50%;max-height:calc(100vh - 150px);overflow-y:auto;}
.total_info_area > .log_clicks_area .total_view_count > dd .half::-webkit-scrollbar {width: 8px; height: 8px;}
.total_info_area > .log_clicks_area .total_view_count > dd .half::-webkit-scrollbar-track {border-radius: 6px;margin: 10px; }
.total_info_area > .log_clicks_area .total_view_count > dd .half::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 6px;}
.total_info_area > .log_clicks_area .total_view_count > dd .half::-webkit-scrollbar-corner {border-radius: 0 0 6px 0;}
.total_info_area > .log_clicks_area .total_view_count > dd .image-popup{border:1px solid #ddd;border-radius:3px;overflow:hidden;display:block;}
.total_info_area > .log_clicks_area .total_view_count > dt .label .date{font-style:normal;font-size:14px;color:#0082ff;}
.total_info_area > .log_clicks_area .total_view_count > dd .research_tab > li{margin-top:0;}
.total_info_area > .log_clicks_area .total_view_count > dd .research_tab > li .s-count{color:#0082ff;}

.total_view_count > dt .total-count{margin-left:10px;font-size:14px;}
.total_view_count > dt .total-count .count{font-style:normal;color:#0082ff;font-weight:700;font-size:18px;}

.search_select_area{display:flex;gap:0 3px;align-items:center;}
.tab-base + .search_select_area{margin-top:20px;}

.monitoring .log_clicks_fs_wrap{position:fixed;left:50%;transform:translateX(-50%);top:0;width:1920px;height:100%;z-index:3;overflow-y:auto;padding:0;border:0;border-radius:0;}
.monitoring .log_clicks_fs_wrap.on{display:block;}
.monitoring .log_clicks_fs_wrap::-webkit-scrollbar {width: 8px; height: 8px;}
.monitoring .log_clicks_fs_wrap::-webkit-scrollbar-track {border-radius: 6px;/*margin: 10px;*/}
.monitoring .log_clicks_fs_wrap::-webkit-scrollbar-thumb {background-color: #777777;border-radius: 6px;}
.monitoring .log_clicks_fs_wrap::-webkit-scrollbar-corner {border-radius: 0 0 6px 0;}
.monitoring .log_clicks_fs_wrap .megagong_fs_area{position:relative;width: max-content;margin: 0 auto;}

.monitoring .total_view_count.monitor{position: fixed;left:30px;top:30px;z-index:3;}
.monitoring .total_view_count.monitor dl{display:none;background-color: #f5f5f5;border-radius:3px 0 3px 3px;padding:15px;}
.monitoring .total_view_count.monitor.on dl{display:block;}
.monitoring .total_view_count.monitor dt{margin-bottom:10px;}
.monitoring .total_view_count.monitor dt .label{font-size:18px;font-weight:600;}
.monitoring .total_view_count.monitor dt .label .date{font-style:normal;font-size:14px;color:#0082ff;}
.monitoring .total_view_count.monitor .btn-toggle{position:statice;right:0;top:-18px;min-width:40px;white-space:nowrap;}
.monitoring .total_view_count.monitor.on .btn-toggle{position: absolute;}
.monitoring .total_view_count.monitor .btn-toggle > *{border-radius:0;background-color:#0082ff;}
.monitoring .total_view_count.monitor .search_daterange_area{padding:0;}
.monitoring .total_view_count.monitor .search_daterange_area .date_area > .btn-base > *{background-color:#0082ff;border:0;}


.monitoring .main_bottom_bnr {position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 3;}
.monitoring .main_bottom_bnr a {display: flex; justify-content: center; align-items: center; gap: 60px; height: 80px;}
.monitoring .main_bottom_bnr .txt span {color: #fff;}
.monitoring .main_bottom_bnr .cir_txt {padding: 13px 25px; letter-spacing: normal; color: #fff; background: #000; border-radius: 22px;}

.monitoring .mcg_fixbn{position: fixed;top:auto; bottom: 24px; right: .5%;width: 255px;z-index: 3;}
.monitoring .mcg_fixbn a {display:block;text-align:right}
.monitoring .mcg_fixbn a.bnr-link {position: absolute; width: 100%; height: 180px; bottom: 0; left: 0;}
.monitoring .mcg_fixbn .close{z-index: 6;position: absolute; right: 5px; bottom: 190px; width: 17px; height: 17px; padding: 3px; }
.monitoring .mcg_fixbn .slick-arrow {display:none!important;}
.monitoring .mcg_fixbn .item {position: relative;text-align: right; height: 215px;}
.monitoring .mcg_fixbn .item .img_wrap {display: flex; height: 100%; align-items: flex-end;justify-content:flex-end;}
.monitoring .mcg_fixbn .item img {display:inline-block;}
.monitoring .mcg_fixbn .item .img_wrap .badge{position: absolute;left:0;top:20px;}

.monitoring .log_clicks_fs_wrap .btn-close{position:fixed;right:30px;top:30px;}
.ui-widget.ui-widget-content:not(.logs_datepicker) {
    background-color: #333;
    color: #fff;
    font-size: 14px;
    border: 0;
    box-shadow: none;
}

@media screen and (max-width: 1200px) {
    /* .component_wrap{width:96%;} */
    .wrap_content{width:96%;}
    .component_wrap .search_area{padding: 15px;}
    .component_wrap .search_area .tit, .component_wrap .list_wrapper [class*="_list"] .tit{font-size: clamp(17px, 2.9vmin, 24px);}
    .component_wrap .column-example{width:96%;left:0;}
    .component_wrap .column-example .column_content .inner{width:100%;}

    .component_wrap .list_wrapper{gap:15px;}
    .component_wrap .list_wrapper [class*="_list"]{padding:15px;width:calc(50% - 7.5px);}
    .component_wrap [class*="_list"] > ul{margin-top:15px;}

    .ver_fixSearch .component_wrap .search_area{padding:10px 2%;}
    .ver_fixSearch .component_wrap .search_area .autocomplete_wrap{left:2%;width:auto;right:calc(110px + 2%);}

    .total_info_area{flex-direction: row;flex-wrap: wrap;justify-content: space-between;gap: 15px;}
    .total_info_area > *, .total_info_area.col2 > *{box-sizing: border-box;width: calc(50% - 8px);padding: 15px;}
    .total_info_area dt .label, .user_stats_area .label{font-size: clamp(17px, 2.9vmin, 24px);}
    .total_view_count {width: 100%;}

    .user_stats_area{bottom:90px;right:2%;}

    .component_wrap > .collection_wrap .collection_item .fullscreen{width:100%;transform:none;left:0;}
    .component_wrap > .collection_wrap .collection_item .fullscreen .component_tit{width:auto;}

    .monitoring .log_clicks_fs_wrap {width:100%;}
    .monitoring .log_clicks_fs_wrap .megagong_fs_area{width:100%;}
    .monitoring .main_bottom_bnr {display: none;}
    .monitoring .mcg_fixbn{display: none;}
    .monitoring .total_view_count.monitor{width:auto;}
}

@media screen and (max-width: 768px) {
    .wrap_content.component{padding:30px 0;}
    .component_wrap .list_wrapper [class*="_list"]{width:100%;}
    .detail-navi {display:none !important;}
}

@media screen and (max-width: 576px) {
    .total_info_area .chart_on{float: right;border: 1px solid #acacac;border-radius: 3px;padding: 1px 5px;display: flex;align-items: center;justify-content: center;}
    .total_info_area .chart_on i{border-top: 7px solid #000;border-left: 4px solid transparent;border-right: 4px solid transparent;margin: 0 3px 0 0;}
    .total_view_ranking {width:100%}
    .total_cmp_ranking {width:100%}
    .total_copy_ranking {width:100%}

    .user_stats_area{padding:10px !important;bottom:70px;}
    .user_stats_area .btn-close{right:10px;top:10px;}
}