/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */
.mb50 {  margin-bottom: 50px; }
.mb100 {  margin-bottom: 100px; }

.lup_models li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.lup_models li.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {

.lineup202509 {
  width:100%;
  height: auto;
  display: block;
}
.lineup202509 h3 {
  font-size:60px;
  font-weight:100;
  line-height: 1em;
  color:#333;
  margin:0 0 0.2em 0;
}
.lineup202509 h4 {
  font-size:20px;
  font-weight:300;
  line-height: 1em;
  color:#0A5BB0;
  margin:0 0 1.5em 0;
}

.lup_models {
  width:100%;
  height:auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.lup_models li {
  width:32.3333333333%;
  height: auto;
  display: block;
  margin:0 0.5% 3%;
}
.lup_models li a {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.lup_models li a .lup_img {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.lup_models li a h5 {
  width: 80%;
  height: auto;
  display: block;
  font-size:20px;
  font-weight: 300;
  line-height: 1.25em;
  color: #333;
  text-align: center;
  margin:0 auto 0.6em;
  padding-bottom: 7px;
  background-image: url(../img/newboat/box333.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 1px;
  transition: all 0.8s ease;
}
.lup_models li a:hover h5 {
  background-size: 100% 1px;
}
.lup_models li a p {
  width:fit-content;
  height: 23px;
  display: block;
  text-align: center;
  font-size:11px!important;
  letter-spacing: 0px!important;
  line-height: 20px!important;
  border:1px solid #999;
  color: #999;
  padding:0 1em;
  margin:0 auto;
  transition: all 0.8s ease;
}
.lup_models li a:hover p {
  color:#fff;
  background-color: #333;
  border:1px solid #333;
}

}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

.lineup202509 {
  width:100%;
  height: auto;
  display: block;
}
.lineup202509 h3 {
  font-size:60px;
  font-weight:100;
  line-height: 1em;
  color:#333;
  margin:0 0 0.2em 0;
}
.lineup202509 h4 {
  font-size:20px;
  font-weight:300;
  line-height: 1em;
  color:#0A5BB0;
  margin:0 0 1.5em 0;
}

.lup_models {
  width:100%;
  height:auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.lup_models li {
  width:49%;
  height: auto;
  display: block;
  margin:0 0.5% 3%;
}
.lup_models li a {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.lup_models li a .lup_img {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.lup_models li a h5 {
  width: 80%;
  height: auto;
  display: block;
  font-size:20px;
  font-weight: 300;
  line-height: 1.25em;
  color: #333;
  text-align: center;
  margin:0 auto 0.6em;
  padding-bottom: 7px;
  background-image: url(../img/newboat/box333.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 1px;
  transition: all 0.8s ease;
}
.lup_models li a:hover h5 {
  background-size: 100% 1px;
}
.lup_models li a p {
  width:fit-content;
  height: 23px;
  display: block;
  text-align: center;
  font-size:11px!important;
  letter-spacing: 0px!important;
  line-height: 20px!important;
  border:1px solid #999;
  color: #999;
  padding:0 1em;
  margin:0 auto;
  transition: all 0.8s ease;
}
.lup_models li a:hover p {
  color:#fff;
  background-color: #333;
  border:1px solid #333;
}

}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

  .lineup202509 {
  width:100%;
  height: auto;
  display: block;
}
.lineup202509 h3 {
  font-size:34px;
  font-weight:100;
  line-height: 1em;
  color:#333;
  margin:0 0 0.4em 0;
}
.lineup202509 h4 {
  font-size:14px;
  font-weight:300;
  line-height: 1em;
  color:#0A5BB0;
  margin:0 0 1.5em 0;
}

.lup_models {
  width:100%;
  height:auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.lup_models li {
  width:100%;
  height: auto;
  display: block;
  margin:0 0% 3%;
}
.lup_models li a {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.lup_models li a .lup_img {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.lup_models li a h5 {
  width: 90%;
  height: auto;
  display: block;
  font-size:20px;
  font-weight: 300;
  line-height: 1.25em;
  color: #333;
  text-align: center;
  margin:0 auto 0.6em;
  padding-bottom: 7px;
  background-image: url(../img/newboat/box333.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 1px;
  transition: all 0.8s ease;
}
.lup_models li a:hover h5 {
  background-size: 100% 1px;
}
.lup_models li a p {
  width:fit-content;
  height: 23px;
  display: block;
  text-align: center;
  font-size:11px!important;
  letter-spacing: 0px!important;
  line-height: 20px!important;
  border:1px solid #999;
  color: #999;
  padding:0 1em;
  margin:0 auto;
  transition: all 0.8s ease;
}
.lup_models li a:hover p {
  color:#fff;
  background-color: #333;
  border:1px solid #333;
}

}
