/* 202103 */

.hote01-template-02 {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hote01-template-02.show {}

.hote01-template-02::after {
  content: '';
  display: block;
  clear: both;
}

.hote01-template-02 .order_link {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35%;
  height: 26%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', 'Microsoft JhengHei', sans-serif;
  transform: translateX(100%);
  opacity: 0;
}

.hote01-template-02.show .order_link {
  transform: translateX(0%);
  transition: all 1.5s ease ;
  opacity: 1;
}

.hote01-template-02 .order_link .imgs {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hote01-template-02 .order_link span {
  position: relative;
  z-index: 5;
  color: #e1d9c6;
  font-size: 16px;
  letter-spacing: 7px;
  font-weight: 500;
  border: 1px solid transparent;
  padding: 0;
  transition: all .5s ease;
}

.hote01-template-02 .company {
  position: absolute;
  WIDTH: 35%;
  HEIGHT: 74%;
}

.hote01-template-02 .company img {
  max-width: 100%;
  opacity: 0;
  transition: all .8s ease .5s;
}

.hote01-template-02.show .company img {
  opacity: 1;
}

.hote01-template-02 .company div {
  position: relative;
  height: 75%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hote01-template-02 .company div::after {
  content: '';
  background-color: #a8a8a8;
  position: absolute;
  width: 1px;
  height: 0;
  top: 80px;
  transition: all .8s ease;
}

.hote01-template-02.show .company div::after {
  height: calc(100% - 135px);
}

.hote01-template-02 .logo {
  position: absolute;
  left: 35%;
  width: 286px;
  height: 286px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) translateY(-53px);
  bottom: 26%;
  z-index: 10;
  opacity: 0;
}

.hote01-template-02.show .logo {
  transition: all .8s ease .5s;
  opacity: 1;
}

.hote01-template-02 .logo img {
  position: relative;
}

.hote01-template-02 .logo.logo_text {
  z-index: 1;
}

.hote01-template-02 .logo.logo_text img {
  position: relative;
  -webkit-animation: rotate_ 22s linear infinite;
  animation: rotate_ 22s linear infinite;
}

.hote01-template-02__swiper {
  position: relative;
  width: 65%;
  margin-right: 0;
  margin-left: auto;
  height: 100%;
  z-index: 5;
}

.hote01-template-02__swiper .swiper-slide {
  position: relative;
  pointer-events: none;
}

.hote01-template-02__swiper .swiper-slide.swiper-slide-active {
  pointer-events: auto;
}

.hote01-template-02__swiper .slide-img-box {
  position: relative;
  width: 100%;
  height: 100%;
}


/* .hote01-template-02__swiper .slide-img-box::after{
content: '';
position: absolute;
width: 0%;
bottom: 0;
height: 26%;
z-index: 3;
background-color: black;
color: white;
opacity: 0;
} */

.hote01-template-02__swiper .slide-img-box .imgbox {
  position: absolute;
  width: 0%;
  bottom: 0;
  height: 26%;
  z-index: 3;
  background-color: black;
  color: white;
  transform: translateX(-100%);
  opacity: 0;
}

.hote01-template-02.show .slide-img-box .imgbox {
  transform: translateX(0%);
  transition: all 1.5s ease;
  opacity: 1;
}

.hote01-template-02__swiper .slide-img-box .imgbox.move {
  width: 53%;
}

.hote01-template-02__swiper .box {
  position: relative;
  width: 100%;
  height: 100%;
}

.hote01-template-02__swiper .imgs {
  position: absolute;
  width: 100%;
  height: 0%;
  bottom: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.0);
  transition: 1s ease;
  overflow: hidden;
}

.hote01-template-02__swiper .imgs .color {
  background-color: #004f4f;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .2;
  z-index: 5;
}

.hote01-template-02__swiper .swiper-slide.swiper-slide-active .imgs,
.hote01-template-02__swiper .swiper-slide.swiper-slide-duplicate-active .imgs {
  height: 100%;
  transition:  1s ease;
}

.hote01-template-02__swiper .swiper-slide-active .imgs,
.hote01-template-02__swiper .swiper-slide-duplicate-active .imgs {
  transform: scale(1.2);
}

.hote01-template-02__swiper .imgs .bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  bottom: 0;
  background-position: center;
  background-size: cover;
}


/* 202103 */

.hote01-template-02__swiper .name {
  color: white;
  position: absolute;
  width: 80%;
  bottom: 26%;
  height: 38%;
  font-size: 6.2vw;
  padding-left: 23%;
  line-height: 7vw;
  font-weight: 500;
  transform: translateY(60px);
  opacity: 0;
  transition: 1.6s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hote01-template-02__swiper .swiper-slide-active .name {
  transform: translateY(0);
  opacity: 1;
  transition: 1.6s ease ;
}


/* 202103 */

.hote01-template-02__swiper .memo {
  position: absolute;
  width: 34%;
  bottom: 0;
  height: auto;
  z-index: 5;
  color: white;
  left: 53%;
  padding-left: 6%;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 1px;
  padding-bottom: 7%;
  transform: translateY(60px);
  opacity: 0;
  transition:2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.hote01-template-02__swiper .swiper-slide-active .memo {
  transform: translateY(0);
  opacity: 1;
  transition:  2s ease ;
}

.hote01-template-02__swiper .swiper-slide-active .more {
  opacity: 1;
  transition: all .8s ease .8s;
}

.hote01-template-02__swiper .more {
  position: absolute;
  bottom: 0;
  z-index: 5;
  left: 23%;
  height: 26%;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #e1d9c6;
  letter-spacing: 5px;
  padding-left: 5px;
  font-weight: bold;
  transition: all .5s ease;
  opacity: 0;
}

.hote01-template-02__swiper .more span {
  position: relative;
  overflow: hidden;
  width: 185px;
}

.hote01-template-02__swiper .more span::after {
  content: '';
  background-color: #e1d9c6;
  position: absolute;
  width: 88px;
  top: 50%;
  height: 1px;
  margin-left: 11px;
  left: 85px;
}

.hote01-template-02__swiper .more span::before {
  content: '';
  background-color: black;
  position: absolute;
  width: 0;
  top: 50%;
  height: 1px;
  margin-left: 11px;
  right: 0;
  z-index: 3;
  transition: all .5s ease;
}

@-webkit-keyframes rotate_ {
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(360deg);
  }
}

@keyframes rotate_ {
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(360deg);
  }
}

.hote01-template-02__swiper-bottom {
  position: absolute;
  width: 38px;
  height: 26%;
  bottom: 0;
  left: 53%;
  margin-left: -60px;
  color: #e1d9c6;
  z-index: 10;
  font-size: 25px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
}

.hote01-template-02.show .hote01-template-02__swiper-bottom {
  opacity: 1;
  transition: all .5s ease .5s;
}

.hote01-template-02__swiper-bottom::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 1px;
  top: 50%;
  display: block;
  z-index: 3;
  background-color: #e1d9c6;
}

.hote01-template-02__swiper-bottom .icon-right {
  transform: rotate(90deg);
  cursor: pointer;
  transition: all .3s ease;
}

.hote01-template-02__swiper-bottom .icon-left {
  transform: rotate(90deg);
  margin-bottom: 60px;
  cursor: pointer;
  transition: all .3s ease;
}

.hote01-template-02 .num_box {
  position: absolute;
  z-index: 5;
  width: 53%;
  bottom: 64%;
  height: 55px;
  font-size: 6.2vw;
  padding-left: 23%;
  display: flex;
  color: white;
  align-items: flex-end;
  align-content: flex-end;
  font-weight: 500;
  letter-spacing: 10px;
  margin-bottom: 15px;
  margin-left: 3px;
}

.hote01-template-02 .num_box .now {
  font-size: 48px;
  line-height: 45px;
  margin-right: 35px;
  position: relative;
}

.hote01-template-02 .num_box .all {
  font-size: 14px;
  letter-spacing: 5px;
  font-weight: bold;
}

.hote01-template-02 .num_box .now::after {
  content: '';
  background-color: white;
  position: absolute;
  width: 16px;
  height: 2px;
  transform: rotate(-58deg);
  bottom: 10px;
  right: -22px;
}

.hote01-template-02 .bg_mobile {
  display: none;
}

@media (max-width:1500px) {
  .hote01-template-02 .logo {
      transform: translateX(-50%) translateY(-21px) scale(.8);
  }
  .hote01-template-02__swiper .memo {
      width: 40%;
      font-size: 18px;
  }
  .hote01-template-02__swiper .more span::after {
      width: 60px;
  }
}

@media (min-width:1199px) {
  .hote01-template-02__swiper .more:hover {
      color: #fff;
  }
  .hote01-template-02__swiper .more:hover span::after {}
  .hote01-template-02__swiper .more:hover span::before {
      width: 90px;
  }
  .hote01-template-02 .order_link:hover span,
  .hote01-template-02__swiper .more:hover {
      color: #c0b48c;
  }
  .hote01-template-02__swiper-bottom .icon-left:hover,
  .hote01-template-02__swiper-bottom .icon-right:hover {
      color: #c0b48c;
  }
}


/*pad*/

@media (max-width:1200px) {
  .hote01-template-02 .logo {
      transform: translateX(-50%) translateY(0) scale(.6);
  }
  .hote01-template-02__swiper .more span::after {
      display: none;
  }
  .hote01-template-02__swiper .memo {
      font-size: 16px;
  }
}

@media (max-width:1000px) {
  .hote01-template-02__swiper-bottom {
      transform: scale(.8);
  }
  .hote01-template-02 .order_link {
      width: 25%;
      height: 18%;
  }
  .hote01-template-02 .order_link span {
      font-size: 14px;
      letter-spacing: 4px;
  }
  .hote01-template-02 .company {
      width: 25%;
  }
  .hote01-template-02__swiper {
      width: 75%;
  }
  .hote01-template-02__swiper .name {
      padding-left: 10%;
      height: auto;
      position: relative;
      bottom: auto;
      padding-top: 40vw;
      width: 80%;
      margin-bottom: 30px;
  }
  .hote01-template-02 .num_box {
      padding-left: 10%;
      bottom: auto;
      top: 40vw;
      margin-top: -80px;
  }
  .hote01-template-02__swiper .memo {
      font-size: 16px;
      position: relative;
      left: auto;
      padding-left: 10%;
      width: 80%;
  }
  .hote01-template-02__swiper .slide-img-box::after {
      width: 100%;
      height: 18%;
  }
  .hote01-template-02__swiper .more {
      position: relative;
      bottom: 0;
      height: auto;
      left: 10%;
      font-size: 16px;
  }
  .hote01-template-02__swiper .slide-img-box::after {
      display: none;
  }
  .hote01-template-02__swiper-bottom {
      left: auto;
      top: 50%;
      bottom: auto;
      right: 5%;
      margin-top: -75px;
      margin-left: auto;
      height: 150px;
  }
  .hote01-template-02 .logo {
      transform: translateX(-50%) translateY(0) scale(.6);
      bottom: 18%;
      left: 25%;
      transform-origin: bottom;
      margin-bottom: -82px;
  }
  .hote01-template-02 .num_box .now {
      font-size: 35px;
      line-height: 35px;
  }
  .hote01-template-02__swiper .slide-img-box .imgbox.move {
      display: none;
  }
}

@media (max-width:650px) {
  .hote01-template-02 .order_link {
      width: 100%;
      height: 15%;
  }
  .hote01-template-02 .company div {
      padding: 0 15px;
  }
  .hote01-template-02 .logo {
      transform: translateX(0%) translateY(0) scale(.5);
      bottom: 18%;
      left: 0;
      transform-origin: left bottom;
      margin-bottom: -92px;
      margin-left: 0;
      width: 50%;
  }
  .hote01-template-02__swiper {
      width: 75%;
      height: 85%;
  }
  .hote01-template-02 .num_box .now {
      font-size: 26px;
      line-height: 26px;
      margin-right: 22px;
      letter-spacing: 3px;
  }
  .hote01-template-02 .num_box {
      padding-left: 10%;
      bottom: auto;
      top: 50%;
      margin-top: -45px;
      margin-bottom: 0;
  }
  .hote01-template-02 .num_box .now::after {
      content: '';
      background-color: white;
      position: absolute;
      width: 10px;
      height: 1px;
      bottom: 8px;
      right: -14px;
  }
  .hote01-template-02 .num_box .all {
      font-size: 12px;
      letter-spacing: 4px;
  }
  .hote01-template-02__swiper .box {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      padding-bottom: 0;
      align-content: flex-start;
  }
  .hote01-template-02__swiper .memo {
      font-size: 14px;
      line-height: 22px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: 105px;
      padding-bottom: 0;
      margin-bottom: 30px;
  }
  .hote01-template-02__swiper .more {
      left: 10%;
      font-size: 12px;
      padding-left: 0;
      padding-bottom: 31px;
      letter-spacing: 2px;
  }
  .hote01-template-02__swiper .name {
      padding-left: 10%;
      bottom: auto;
      padding-top: 0;
      width: 80%;
      margin-bottom: 20px;
      margin-top: 45vh;
  }
  .hote01-template-02__swiper .slide-img-box .imgbox {
      opacity: 0;
  }
  .hote01-template-02__swiper .imgs .bg {
      background-size: 0;
  }
  .hote01-template-02 .bg_mobile {
      position: absolute;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      display: block;
      z-index: 1;
  }
}