@media screen and (max-width: 420px) {
        .list {
          height:calc(100% - 170px);
          width:100%;
        }
        .ads1,.ads2 {
          width:100%;
          left:0px;
        }
        .ads2{
          top:calc(100% - 60px);
        }
        .navbar-navl
        {
          top:50px;
          left:0px;
        }
    }
    @media screen and (min-width: 400px) and  (max-width: 760px){
        .list {
          height:100%;
          width:100%;
        }
        .ads1,.ads2 {
          width:100%;
          left:0px;
        }
        .ads2{
          display:none;
          top:calc(100% - 60px);
        }
        .navbar-navl
        {
          top:50px;
          left:0px;
        }
    }
    @media screen and (min-width: 760px) and (max-width: 1330px) {
        .list {
          height:calc(100% - 170px);
          left:130px;
          width:90%;
        }
        .ads1,.ads2 {
          width:calc(100% - 130px);
          left:130px;
        }
        .ads2{
          top:calc(100% - 60px);
        }
        .navbar-navl
        {
          top:50px;
          left:0px;
          height:100%;
          width:130px;
        }
    }
    @media screen and (min-width: 1330px) {
        .list {
          height:calc(100% - 170px);
          left:130px;
          width:90%;
        }
        .ads1,.ads2 {
          width:1200px;
          left:130px;
        }
        .ads2{
          top:calc(100% - 60px);
        }
        .navbar-navl
        {
          top:50px;
          left:0px;
          height:100%;
          width:130px;
        }
    }

.mon{
  top : 70px;
  height : 160px;
  width : 160px;
  margin : 5px;
  float: left;
  text-align:center;
  z-index:0;
}
.mon img {
  width: auto;       /* 寬度依比例縮放 */
  object-fit: contain; /* 保持完整、不裁切 */
  height: 100px;
}
.mon p
{
  font-size:12px;
  line-height:14px;
  letter-spacing:1px;
  padding-bottom:1px;
}
.list
{
  position:fixed;
  top : 110px;
  overflow-x: scroll;
  text-align:center;
  margin:0 auto;
}
.navbar-default
{
// display:none;
 position:fixed;
 width:100%;
 height:50px;
 top:0px;
 z-index:1;
}
.navbar-default p
{
  font-size:18px;
  line-height:20px;
  letter-spacing:2px;
  padding-bottom:2px;
  padding-left:10px;
  padding-top:15px;
}
.navbar-navl
{
 position:fixed;
 background:#D0D0D0;
 overflow-x: scroll;
 overflow: auto;
 height: calc(100% - 50px);
 padding-left:5px;
 z-index:1;
}
.ads1
{
 position:fixed;
 width:100%;
 top:50px;
}
.ads2
{
 position:fixed;
 width:100%;
}

/* 主圖：手機 140x140、PC 320x320 */
.main-monster-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}
@media screen and (min-width: 761px) {
  .main-monster-img {
    width: 320px;
    height: 320px;
  }
}

/* 小圖：手機 100x100、PC 160x160 */
.small-monster-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
@media screen and (min-width: 761px) {
  .small-monster-img {
    width: 160px;
    height: 160px;
  }
}

/* 角色解說：手機 size 1、PC size 2 */
.monster-desc {
  font-size: small;   /* 約等同 font size=1 */
}
@media screen and (min-width: 761px) {
  .monster-desc {
    font-size: medium;  /* 約等同 font size=2 */
  }
}