@charset "UTF-8";
/* CSS Document */

#main{
  padding-bottom: 50px;
}

h3{
  color:#1e5192;
  font-size: 21px;
  border-bottom:solid 3px #1e5192;
  margin-bottom: 30px;
}
hr{
  height: 1px;
  border:none;
  border-top:dashed 1px #1e5192;
  margin:60px 0;
}

.detailBox{
  margin:-20px 0 55px;
  padding-top: 20px;
}
.photo{
  margin-bottom: 40px;
  overflow: hidden;
}
.mainPhoto{
  max-width:644px;
  float:left;
}
ul.thumbPhoto{
  max-width:304px;
  float:right;
}
ul.thumbPhoto li:first-child{
  margin-bottom: 23px;
}


table{
  width:100%;
  margin-bottom: 55px;
  border-collapse:collapse;
  table-layout:fixed;
}
table th{
  width: 120px;
  font-weight: bold;
  text-align:left;
  vertical-align: middle;
  background:#e4f0ff;
  border:solid 1px #b5b5b5;
  padding: 15px 27px 15px 70px;
}
table td{
  text-align:left;
  vertical-align: middle;
  border:solid 1px #b5b5b5;
  padding: 15px 27px;
}

table.spTable{
  display: none;
}


.sizeBox{
}
.sizeBox ul{
  margin-bottom: 35px;
  overflow: hidden;
}
.sizeBox ul li{
  width:230px;
  margin-right: 20px;
  float:left;
}
.sizeBox ul li:last-child{
  margin-right: 0;
}
.sizeBox ul li p{
  color:#fff;
  text-align:center;
  line-height:34px;
  background:#1e5192;
  margin-top: 10px;
}



@media screen and (max-width:767px){
  #main{
    padding-bottom: 30px;
  }
  .contentInr{
    padding:0 15px;
  }
  
  h3{
    font-size: 18px;
    border-bottom:solid 2px #1e5192;
    margin-bottom: 20px;
  }
  hr{
    margin:30px 0;
  }
  
  .detailBox{
    margin:-15px 0 50px;
    padding-top: 15px;
  }
  .photo{
    margin-bottom: 25px;
  }
  .mainPhoto{
    max-width:100%;
    margin-bottom: 4%;  
    float:none;
  }
  ul.thumbPhoto{
    max-width:100%;
    float:none;
    overflow: hidden;
  }
  ul.thumbPhoto li{
    width: 48%;
  }
  ul.thumbPhoto li:first-child{
    margin-bottom: 0;
    float:left;
  }
  ul.thumbPhoto li:last-child{
    float:right;
  }
  
  table{
    margin-bottom: 30px;
  }
  table th{
    width: 60px;
    padding: 5px 10px;
  }
  table td{
    padding: 5px 10px;
  }
  
  table.spTable{
    display: block;
  }
  table.spTable th,
  table.spTable td{
    width: 200px;
  }
  table.pcTable{
    display: none;
  }
  
  
  .sizeBox ul{
    margin-bottom: 5px;
  }
  .sizeBox ul li{
    width:48%;
    margin:0 0 20px;
  }
  .sizeBox ul li:nth-child(2n){
    float:right;
  }
  
  .sizeBox ul li p{
    color:#fff;
    text-align:center;
    line-height:27px;
    margin-top: 7px;
  }
}



/* products.html */

.productsList{
  margin-bottom: 100px;
}
.productsList h3{
  text-align:center;
  border-bottom: none;
  margin-bottom: 30px;
}

.productsList ul{
  margin-bottom: 30px;
  overflow: hidden;
}
.productsList ul li{
  width: 294px;
  height: 230px;
  margin:0 24px 30px 0;
  padding-right:24px;
  float:left;
}
.productsList ul li:nth-child(3n-2){
  border-right:dashed 1px #b5b5b5;
}
.productsList ul li:nth-child(3n-1){
  border-right:dashed 1px #b5b5b5;
}
.productsList ul li:nth-child(3n){
  margin-right: 0;
  padding-right:0;
}
.productsList ul li p{
  font-size: 16px;
  text-align:center;
  margin-top: 5px;
}

@media screen and (max-width:767px){
  .productsList{
    margin-bottom: 30px;
  }
  .productsList h3{
    margin-bottom: 15px;
  }
  .productsList h3 img{
    width:auto;
    max-width:100%;
    max-height:15px;
  }
  .productsList ul{
    margin-bottom: 10px;
  }
  .productsList ul li{
    width: 100%;
    height: auto;
    border-bottom:dashed 1px #b5b5b5;
    margin:0 0 30px;
    padding:0 0 30px;
    float:none;
  }
  .productsList ul li:nth-child(3n-2){
    border-right:none;
  }
  .productsList ul li:nth-child(3n-1){
    border-right:none;
  }
  .productsList ul li:last-child{
    border-bottom: none;
  }
  .productsList ul li p{
    font-size: 14px;
  }
}


