#use_project_listview  {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background-color:#F2F2F2;
  padding:0px 0px 0px 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.empty_margin {
  width:100%;
  height:90px;
}

#use_project_listview_content {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding-bottom: 50px;
  padding-top:35px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left; 
}

.use_project_listview_item {
  /* width:350px;
  height:315px; */
  width: 350px;
  height: 275px;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  cursor:pointer;
  box-shadow: 0px 4px 3px #7B7B7B29;
  margin-right:20px;
  margin-bottom:20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  background: white;
}

@media (min-width: 768px){
  .use_project_listview_item {
    /* width: 318px; */
    width: 330px;
    height: 275px;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    cursor:pointer;
    box-shadow: 0px 4px 3px #7B7B7B29;
    margin-right:20px;
    margin-bottom:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background: white;
  }
}


.use_project_listview_item_create_time {
  color: #414141;
  font-size: 0.75em;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

@media not all and (min-width: 350px) {
  .use_project_listview_item {
    width:280px;
    height: 275px;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    cursor:pointer;
    box-shadow:0px 0px 23px 0px rgba(218,218,218,1);
    margin-right:20px;
    margin-bottom:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .use_project_listview_item_create_time {
    color: #414141;
    font-size: 0.6em;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
  }
}

.use_project_listview_item:hover {
  outline: solid 2px #97BAFF;
  box-shadow:0px 0px 23px 0px rgba(151,186,255, 0.4);
}

.use_project_listview_item_template {
  height:1px;
  display:none;
  pointer-events:none;
}

.use_project_listview_item_content {
  float: left;
  position: relative;
  width: 100%;
  height:100%;
}

.use_project_listview_item_content_up {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  /* height: 255px; */
  height: 210px;
}


.use_project_listview_item_content_up_toolbar {
  position: absolute;
  bottom:0px;
  left:0px;
  width: 100%;
  height: 45px;
}

.user_project_item_imageButton {
  width:36px;
  height:36px;
  float:left;
  margin-top:7px;
  margin-left:10px;
}


.user_project_item_on_imageButton {
  width:56px;
  height:28px;
  float:right;
}

.user_project_item_off_imageButton {
  width:56px;
  height:28px;
  float:right;
}

.use_project_listview_item_content_bottom {
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 70px;
  cursor: default;
}



.delete_project_circle {
  width:28px;
  height:28px;
  border-radius:50px;
  background:#13a8c5;
  display:none;
}

.delete_project_circle:hover {
  background:#293655;
}

.delete_project_circle:active {
  background:#19a7d0;
}

.use_project_listview_item:hover  .delete_project_circle {
  display:block;
}

.use_project_listview_item_content_bottom_body {
  position: absolute;
  bottom:0px;
  left:0px;
  width: 100%;
  height:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 11px 16px 9px 16px;
  display: flex;
}


/*名稱*/
.use_project_listview_item_title {
  width: 100%;
  font-size: 1em;
  margin-bottom: 8px;
  color: #414141;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
}



.use_project_listview_item_date_title {
  margin-right: 3px;
}

.use_project_listview_item_date_title.expieres {
  color: #249E00;
}

.use_project_listview_item-extend-hosting {
  color: #5F74CB;
  font-size: 0.75em;
  text-align: center;
  background: #EFEFFF;
  border-radius: 10px;
  height: 22px;
  line-height: 22px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  margin-left: 8px;
  float: left;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);

}


.use_project_listview_item_date_title.expiered {
  color: #D83A3A;
}

.use_project_listview_item_project_size {
  color: #747985;
  font-size: 0.75em;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
  margin-left: 6px;
  margin-right: 8px;
}


.use_project_listview_item_img {
  position:absolute;
  top:0;
  left:0;
  width:  100%;
  height: 100%;
  pointer-events:none;
  /*height: 180px;*/
  /*border: solid 1px blue;*/
}

.use_project_listview_item_img_box {
  position:relative;
  top:0;
  left:0;
  width:  100%;
  height: calc(100% - 45px);
  overflow: hidden;
}

.use_project_listview_item_img_box_content {
  position: absolute;
  left: 50%;
  /*top: 10%;
  transform: translate(-50%, -10%);
  -webkit-transform: translate(-50%,10%);
  min-width: 100%;*/
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  min-width: 100%;

  min-height: 100%;
  max-width: 100%;
  max-height: 100%;

  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}

.use_project_listview_item_img_box_content:hover {
  min-width: 200%;
  min-height: 200%;
  max-width: 200%;
  max-height: 200%;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}

.use_project_listview_item_img_box_content_default {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 0px);
  }

.use_project_listview_item_title_parent{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: calc(100% - 44px);
}

.triangle-down { 
  width: 0;
  height: 0;
  border-left: 5px solid transparent; 
  border-right: 5px solid transparent;
  border-top: 10px solid #57c2c0; 
} 


#view_count,#leadgen_count {
  color: #324D9B;
  font-size: 0.8125em;
  float: right;
  line-height: 32px;
  margin-left: 6px;
}

.use_project_listview_item-photo-count-icon {
  float: left;
  margin-right: 3px;
  margin-top: 3px;
}

.use_project_listview_item-divider {
  float: left;
  background: #D9D9D9;
  width: 1px;
  height: 8px;
  margin-top: 3px;
}

.use_project_listview-bottom-title {
  color: #818181;
  font-size: 0.75em;
  float: left;
  line-height: 16px;
  margin-left: 7px;
}

.use_project_listview-bottom-title.share {
  color: #26a800;
}

.use_project_listview-view-block {
  /* float: left;
  height: 100%;
  margin-left: 17px; */
  -webkit-flex: 1;
  flex: 1;
}

.use_project_listview-view-block-box {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: left;
  justify-content: left;
  /* background: #F2F2F2; */
  /* border-radius: 40px; */
  /* padding-left: 11px;
  padding-right: 13px; */
  height: 25px;
}


.use_project_listview-ga-block {
  /* float: right;
  margin-right: 26px; */
  height: 100%;
  -webkit-flex: 1;
  flex: 1;
}

.use_project_listview-ga-en-offset {
  padding-left: 10px;
}

.use_project_listview-share-block {
  /* float: right;
  margin-right: 17px; */
  height: 100%;
  -webkit-flex: 1;
  flex: 1;
}

.preview-icon {
  width: 18px;
  height: 13px;
}

.ga-icon {
  width: 17px;
  height: 15px;
}

.share-icon {
  width: 20px;
  pointer-events: none;
}

.share-icon:disabled {
  cursor: pointer !important;
}

.task-icon-parent {
  position:absolute;
  right: 9px; 
  top: 12px;
  width: 36px;
}

.pdr-icon-parent {
  position:absolute;
  left: 0; 
  top: 0;
  width: 100px;
}

.pdr-icon {
  width: 100px;
  display: none;
}

.preview-button-offset {
  -webkit-justify-content: flex-start !important;
  justify-content: flex-start !important;
  padding-left: 20px;
}

.share-button-offset {
  -webkit-justify-content: flex-end !important;
  justify-content: flex-end !important;
  padding-right: 20px;
}