/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 5px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rebeccapurple; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rebeccapurple;
  }
  
  
  p{
      word-break: break-word;
      white-space: pre-line;
  }
  .summer-max-width{
      max-width: 550px !important;
  }
  .pc_width{
      max-width: 1000px;
      width: 95%;
      margin: 0 auto;
  }
  .ugc_item{
      text-align: center;
      margin-bottom: 10px;
  
  }
  .ugc_container{
      width:100%;
      height:300px;
      border:1px solid red;
      
  }
  .ugc_image{
      height: 60%;
      padding: 5px;
      border-bottom: 1px solid red;
  }
  .ugc_image img{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .ugc_comment{
      /*text-align: left;*/
      padding: 5px;
      /*height: 40%;*/
      overflow: auto;
  }
   .step{
         text-align: center;
         float: left;
      }
      .method_title{
          width: fit-content;
          padding: 5px 25px;
          background-color: yellow;
      }
      .method_title_content{
          margin-bottom: 40px;
      }
      .step{
          min-height: 150px;
          margin-top: 30px;
          margin-bottom: 30px;
      }
      .step_detail{
          width: 270px;
          height: 330px;
          /* background: white; */
          /* border: 1px solid red; */
          border-radius: 30px;
          border-block-start: none;
          position: relative;
          padding: 25px;
      }
      @media only screen and (max-width:1000px) {
        /* For mobile phones: */
        .col-md-4{
            width: 50%;
            max-width: 100%;
        }
        .ugc_item{
          width: 50%;
          float: left;
        }
       
        .pc_width{
          width: 95%;
        }
        .last-step{
            width: 50%;
            margin-left: 25%;
        }
        .preview_winner_shop{
          width: 100%;
        }
      }
      @media only screen and (max-width:400px) {
        /* For mobile phones: */
        .col-md-4{
            width: 100%;
            max-width: 100%;
        }
        .ugc_item{
          width: 100%;
          /*height: 450px;*/
          margin-bottom: 10px;
        }
        .ugc_image{
          height: 300px;
        }
        .ugc_comment{
          /*height: 150px;*/
        }
        .ugc_container{
          height: 450px;
        }
        .preview_winner_shop{
          width: 100%;
        }
        img#campaign_logo{
            height: 40px;
            margin-left: 10px;
        }
       
      }
      img.step_image{
              position: absolute;
              top: -43px;
              width: 145px;
              left: 50px;
      }
      .detail_content{
          height: 200px;
          margin-top: 30px;
          border: 2px solid grey;
          border-radius: 20px;
          /*padding: 20px;*/
      }
      .detail_title{
          overflow: hidden;
          word-wrap: break-word;
          white-space: initial;
          color: #1f99dc;
          font-size: 19px;
      }
      .twitter_image{
          width: 120px;
          margin-top: 10px;
      }
      .retweet_image{
          width: 50px;
          margin-top: 10px;
      }
      .campaign_way , .shop_way , .cupon_way{
          padding: 20px;
          height: 200px;
          overflow: auto;
          border: 0.5px solid silver;
              /*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;*/
              box-shadow: 5px 10px 18px #abacad;
      }
      .collapse-table{
          width: 100%;
          margin-top: 30px;
      }
      .collapse-table tr{
          border: 0.5px solid silver;
          height: 50px;
      }
      .collapse-table tr.collapse_header:hover{
          background-color: #eeeff0;
          transition-duration:0.3s;
      }
      .collapse_content{
          height: 200px;
          overflow: auto;
          padding: 20px;
      }
      .collapse_hide{
          display: none;
  
      }
      .collapse_show{
          display: table-row;
  
          
      }
      span.fr-emoticon.fr-emoticon-img {
      background-repeat: no-repeat !important;
      font-size: inherit;
      height: 1em;
      width: 1em;
      min-height: 20px;
      min-width: 20px;
      display: inline-block;
      margin: -.1em .1em .1em;
      line-height: 1;
      vertical-align: middle;
      }
      .preview_image_temp{
          width: fit-content;
          max-width:100%;
          height: auto;
          object-fit:contain;
          margin-bottom:10px;
      }
      
      
      .modal-body .preview-iframe{
          border:none;
          width: 100% !important;
      }
      .preview_disable{
          display: none;
      }
      .preview_winner_shop{
          text-align: left;
          margin-bottom: 15px;
          margin-top: 15px;
      }
      .preview_winner_image{
          padding-left: 0 !important;
      }
      .preview_winner_image img{
          /*min-width: 290px;*/
      }
      .preview_shop_title , .preview_shop_detail{
          width: 100%;
          word-break: break-word;
          white-space: pre-line;
      }
      .has-error label{
          color: #c20a0a;
      }
      .preview_shop_winner_num{
          float:right;
          width:50%;
          text-align:right;
          overflow: hidden;
          text-overflow: ellipsis;
          max-height: 18px;
      }
      .preview_shop_action{
          width:50%;
          float: left;
          text-align:left;
          overflow: hidden;
          text-overflow: ellipsis;
          max-height: 18px;
      }
      .preview_shop_image{
          width:100%;
          height:auto;
          object-fit:cover;
      }
      .winner_shop_content{
          /*min-height: 300px;*/
  
      }
      .winner_shop_content p{
  
          white-space: pre-line;
          word-break: break-word;
          float: left;
          width: 90%;
      }
      .action_name{
          width: 100%;
          /*text-overflow: ellipsis;*/
          /*max-height: 18px;*/
          /*overflow: hidden;*/
          white-space: pre-line;
          word-break: break-word;
      }
      .view-port i{
          opacity: 0.5;
          font-size: x-large;
          cursor: pointer;
      }
      .view-port i.active{
          opacity: 1;
      }
      body.fixed_body{
          position: fixed;
          /*top:700px;*/
          transition-duration:0.4s;
      }