.shop3{
        margin-top: 250px;
        margin-bottom:300px;
}

.s_card{
    width: 1180px;
    height: 442px;
    margin: auto;
    position: relative;
    background: url(/common/image/service/webapp/webapp_shop3.png) no-repeat; 
    background-size: cover;
}

.s_card.s_blue{
    width: 1180px;
    height: 442px;
    margin: auto;
    position: relative;
    background: url(/common/image/service/webapp/webapp_shop2.png) no-repeat; 
    background-size: cover;
}

.s_card .cont_txt{

    color: #191919;

}
.s_card .cont_txt .cont_inner{
    left: 658px;
    position: absolute;
    top: 200px;
    color: #2c3036;
}

.s_card .cont_txt .cont_inner span{
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    color: #3c2b2b;
}

.s_card .cont_txt .cont_inner p{
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #857272;
    margin-left: 20px;
    line-height: 45px;

}

.wa_t {
    line-height: 42px;
    text-align:center;
  }
.wa_t .wa_t1{
    font-size:1rem;
    font-weight:400;
    display: block;
}

.frame {
    display: inline-block;
    position: relative;
    
    cursor:pointer;
}

.frame>div{
    background:rgba(0,0,0,0.6);
    width:424px;
    height:240px;
    position:absolute;
    top:40px;
    left:39px;
    display:none;
}


.frame:hover div{
 display:block;
}
.frame>div p{
    text-align:center;
    color:#FFF;
    font-size:20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.frame>div p a{
    font-size:18px;
    color:#0db5ff;
}

.frame>div p a:hover{
    text-decoration:underline;
}



.shopWrap table td:nth-of-type(2){
    width:15%;
}



.shopWrap table td:nth-of-type(3){
    width:15%;
}


.shopWrap table td:nth-of-type(4){
    width:15%;
}

.shopWrap table td:nth-of-type(5){
    width:15%;
}


  .shopWrap table{
      table-layout:fixed;
      width:100%;
      border-bottom:1px solid #ccc;
      border-left:1px solid #ccc;
  }

   .shopWrap table td{
       padding: 10px 10px;
       font-size:15px;
       border-right:1px solid #ccc;
       border-bottom:1px dashed #dadada;
       text-align:center;
       color:#333;
   }
  .shopWrap table .hd {
      background:#f5f5f5
  }
  
  .shopWrap table tr:nth-of-type(1) td{
      background:#333;
      color:#fff;
      border-bottom:none;
  }


  .portfolio{
      text-align:center;
      margin-top:250px;
  }


  .portWrap{
      display:inline-block;
      height:421px;
      text-align:center;
      margin-bottom:60px;

  }
  .mobshop img{
      height:426px;
  }

  .mobshop > div {
      width:173px ;
      top:24px;
     left:35px;
     height:380px;
     border-radius:22px;
  }


  .mobileport >div{
      width:30%;

  }




  .shop_pro{
      text-align:center;
      font-size:2.5rem;
  }
  .type{
    display: flex;
    justify-content: center;
     margin-bottom:20px;
     
  }
 .type span{
    width: 300px;
    background: linear-gradient(45deg, #ffa7a7, transparent);
    border-radius: 100px;
    line-height: 7px;
    font-size: 1.7rem;
    font-weight: 700;
    padding: 2px 10px;
    color: #362929;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 50px;
 }

 
 @media (max-width: 1179px){


     
.s_card{
    width: 100%;
    height: 442px;
    margin: auto;
    position: relative;
}

    .s_card.s_blue {
            width: 100%;
    height: 442px;
    margin: auto;
    position: relative;
    }

.s_card .cont_txt{
    width: 100%;
    color: #191919;

}
.s_card .cont_txt .cont_inner {
    right: 0;
    background: rgba(255,255,255,0.8);
    border-radius: 31px;
    position: absolute;
    top: 254px;
    left: 71%;
    color: #2c3036;
    width: 450px;
    
}
.s_card .cont_txt .cont_inner span{
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    color: #3c2b2b;
}

.s_card .cont_txt .cont_inner p{
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #857272;
    margin-left: 20px;
    line-height: 45px;

}



      



    @media all and (max-width: 768px){

    .portWrap{
        height:unset ;
    }
          
    .s_card .cont_txt .cont_inner {

    position: absolute;
    top: 156px;
    left: 25%;
    width:50%;
    height: 218px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 10px;

}

        .s_card .cont_txt .cont_inner span {
        font-size:20px;
        }


        .s_card .cont_txt .cont_inner p {
            margin-left:0;
        }

    .shop_cont:not(last-child){
    margin-right:14px !important;
}

.shop_cont ul{
    padding-left:4% !important;
}

.shop_cont ul li{
    font-size:16px !important;
}
.pcport{
    width:100%;

}

.pcport > .portWrap >.frame{
    width:100%;
}

.pcport > .portWrap >.frame>img{
    width:80%;
}
 .mobileport >div{
     width:48%;
 }

  .shopWrap table td{
      word-break:break-word;
      padding:4px;
  }

 
.frame:hover div{
 display:none;
}

  }



 
 @media all and (max-width: 488px){

     .shop3{
        margin-top: 250px;
        margin-bottom:300px !important;
}


     .wa_t .wa_t1{
    font-size:15px;
    line-height:20px;
    margin-top:15px;
    display: block;
}

    .s_card {
        background: linear-gradient(177deg, #ffbaba, transparent);
        border-radius: 92px;
            border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
    }


        .s_card.s_blue {
        background: linear-gradient(177deg, #85ccff, transparent);
        border-radius: 92px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        }

      .s_card .cont_txt .cont_inner {
    right: 0;
        padding: 10px;
    background: rgba(255,255,255,0.8);
    border-radius: 31px;
    position: absolute;
    top: 23%;
    left: 5%;
    color: #2c3036;
    width: 90%;
}
    .s_card .cont_txt .cont_inner p{
        line-height:2;
    }

    .shopWrap{
        display:block !important;
    }

    .shop_cont{
        margin-bottom:20px;
    }

     .mobileport >div{
     width:100%;
 }

     .mobshop img{
         width:100%;
         height:auto;
     }

     .portWrap {
         margin-bottom:20px;
     }
    


  }