.index廣告方塊7{}
.index廣告方塊7 img
{
   
}
.index廣告方塊7 .eachShortcut
{
   display : block;
   position: relative;
   overflow: hidden;
}
.index廣告方塊7 .child {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        transition: all .5s;
    }
.index廣告方塊7 .eachShortcut:hover .child,
    .index廣告方塊7 .eachShortcut:focus .child {
        transform: scale(1.2);
    }

    .index廣告方塊7 .child::before {
        content: "";
        display: none;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(52, 73, 94, 0.2);
    }

    .index廣告方塊7 .eachShortcut:hover .child:before,
    .index廣告方塊7 .eachShortcut:focus .child:before {
        display: block;
    }


.index廣告方塊7 .hmHtmlLeftRight
{
   display : flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: stretch;
}
.index廣告方塊7 .hmHtmlLeft
{

}
.index廣告方塊7 .hmHtmlRight
{
   display : flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   align-content: space-between;
}
   


@media (max-width: 480px) 
{
   .index廣告方塊7 .hmHtmlLeft, .index廣告方塊7 .hmHtmlRight
   {
      flex-basis : 100%;
      margin-bottom : 10px;
   }
   .index廣告方塊7 .eachShortcut
   {
      width : 50%;
      height : 100px;
      margin: 0;
   }
   .index廣告方塊7 .hmHtmlLeft .eachShortcut
   {
      width : 100%;
      height : 120px;;
   }
   .index廣告方塊7 .hmHtmlRight .eachShortcut
   {
      width : 50%;
      height : 120px;
   }
}
@media (min-width: 481px) and (max-width: 767px) 
{
   .index廣告方塊7 .hmHtmlLeft, .index廣告方塊7 .hmHtmlRight
   {
      flex-basis : 100%;
      margin-bottom : 10px;
   }
   .index廣告方塊7 .hmHtmlLeft .eachShortcut
   {
/*      width : 100%;
      height : 280px;*/
      width : calc(878px * 0.53);
      height : calc(280px * 0.53);
   }
   .index廣告方塊7 .hmHtmlRight .eachShortcut
   {
/*      width : 49%;
      height : 280px;*/
      width : calc(423px * 0.51);
      height : calc(280px * 0.51);
      margin-bottom : 10px;
   }
}
@media (min-width: 768px) and (max-width: 979px) 
{
   .index廣告方塊7 .hmHtmlLeft, .index廣告方塊7 .hmHtmlRight
   {
      flex-basis : 100%;
      margin-bottom : 10px;
   }
   .index廣告方塊7 .hmHtmlLeft .eachShortcut
   {
/*      width : 100%;
      height : 404px;*/
      width : calc(878px * 0.81);
      height : calc(280px * 0.81);
   }
   .index廣告方塊7 .hmHtmlRight .eachShortcut
   {
/*      width : 49%;*/
      width : calc(423px * 0.81);
      height : calc(280px * 0.81);
      margin-bottom : 10px;
   }
}
@media (min-width: 980px) and (max-width:1199px) 
{
   .index廣告方塊7 .hmHtmlLeft, .index廣告方塊7 .hmHtmlRight
   {
      flex-basis : calc(50% - 10px);
   }
   .index廣告方塊7 .hmHtmlLeft .eachShortcut
   {
/*      width : calc(829px * 0.50);
      height : calc(474px * 0.50);*/
      width : calc(878px * 0.50);
      height : calc(280px * 0.50);
   }
   .index廣告方塊7 .hmHtmlRight .eachShortcut
   {
/*      width : calc(423px * 0.50);
      height : calc(225px * 0.50);*/
      width : calc(423px * 0.50);
      height : calc(280px * 0.50);
   }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
   .index廣告方塊7 .hmHtmlLeft, .index廣告方塊7 .hmHtmlRight
   {
      /*右邊四圖示垂直間距*/
      flex-basis : calc(50% - 10px);
   }
   .index廣告方塊7 .hmHtmlLeft .eachShortcut
   {
        /*內框放大圖示*/
      /*      width : calc(829px * 0.65);
      height : calc(474px * 0.65);*/
      width : calc(878px * 0.65);
      height : calc(280px * 0.65);
   }
   .index廣告方塊7 .hmHtmlRight .eachShortcut
   {
/*      width : calc(423px * 0.65);
      height : calc(225px * 0.65);*/
      width : calc(423px * 0.65);
      height : calc(280px * 0.65);
   }
}
@media (min-width: 1920px) 
{
   .index廣告方塊7 .hmHtmlLeft, .index廣告方塊7 .hmHtmlRight
   {
      /*右邊四圖示垂直間距*/
      flex-basis : calc(50% - 10px);
   }
   .index廣告方塊7 .hmHtmlLeft .eachShortcut
   {
        /*內框放大圖示*/
      /*      width : calc(829px * 0.65);
      height : calc(474px * 0.65);*/
      width : calc(878px * 0.65);
      height : calc(280px * 0.65);
   }
   .index廣告方塊7 .hmHtmlRight .eachShortcut
   {
/*      width : calc(423px * 0.65);
      height : calc(225px * 0.65);*/
      width : calc(423px * 0.65);
      height : calc(280px * 0.65);
   }
}