/*---------- 0.public ----------*/
.white,
.white a:link,
.white a:visited,
.white a:hover {
  color: white;
}

.red,
.red a:link,
.red a:visited,
.red a:hover {
  color: #8f3533;
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing : antialiased;
  text-rendering         : optimizeLegibility;
}

body {
  background-color: #fffdfb;
}

/* main */
.lhnation-main {
  background     : url(../images/topbg.jpg) no-repeat top center;
  overflow       : hidden;
  background-size: 100% auto;
}

/*---------- 0. Top ----------*/
.lhnation-main .top {
  height  : 507px;
  position: relative;
}

.lhnation-main .top img.logo {
  position: absolute;
  top     : 31px;
}

.lhnation-main .top img.granada {
  position: absolute;
  width   : 186px;
  height  : auto;
  top     : 161px;
  right   : 209px;
  z-index : 2;
}

.lhnation-main .top img.ico {
  position: absolute;
  opacity : 0;
}

.lhnation-main .top img.ico1 {
  width          : 78px;
  height         : 83px;
  top            : 240px;
  right          : 436px;
}

.lhnation-main .top img.ico2 {
  width          : 83px;
  height         : 83px;
  top            : 99px;
  right          : 325px;
}

.lhnation-main .top img.ico3 {
  width          : 82px;
  height         : 84px;
  top            : 161px;
  right          : 129px;
}

.lhnation-main .top img.ico4 {
  width          : 81px;
  height         : 83px;
  top            : 290px;
  right          : 50px;
}

.lhnation-main .top img.shadow {
  background: url(../images/ico5.png) no-repeat;
  width     : 215px;
  height    : 75px;
  position  : absolute;
  top       : 445px;
  right     : 200px;
}

.lhnation-main .top .topTitle {
  width          : 511px;
  height         : 339px;
  background     : url(../images/tit0.png) no-repeat;
  background-size: contain;
  position       : absolute;
  left           : 77px;
  top            : 152px;
  opacity        : 0;
}

/*---------- 1. P1con ----------*/
.lhnation-main .p1Con {
  background : url(../images/bg1.png) no-repeat top center;
  height     : 38.958333333333336vw;
  position   : relative;
  text-align : center;
}

.lhnation-main .p1Con img.title {
  margin-top: 4.94791vw;
}

.lhnation-main .p1Con .wrap {
  position   : absolute;
  top        : 7vw;
  width      : 70vw;
  left       : 50%;
  margin-left: -35vw;
}

.lhnation-main .p1Con .wrap .container {
  display: none;
}

.lhnation-main .p1Con .wrap .text {
  position: relative;
}

.lhnation-main .p1Con .wrap .text span {
  position   : absolute;
  text-align : center;
  color      : #b42625;
	cursor     : pointer;
  font-weight: 600;
}

.lhnation-main .p1Con .wrap .text span a {
  color          : #b42625;
  text-decoration: none;
}

.lhnation-main .p1Con .wrap .text span:nth-child(1) {
  background     : url(../images/bg7a.png) no-repeat;
  background-size: 100% auto;
  width          : 22.6vw;
  height         : 65px;
  left           : 25.69vw;
  top            : 0;
  padding-top    : 0.78125vw;
  line-height    : 2.2916vw;
  font-size      : 1.45vw;
  z-index        : 3;
}

.lhnation-main .p1Con .wrap .text span:nth-child(1).active {
  background     : url(../images/bg7.png) no-repeat;
  background-size: 100% auto;
  color          : #fff;
}

.lhnation-main .p1Con .wrap .text span:nth-child(2) {
  background     : url(../images/bg8a.png) no-repeat;
  background-size: 100% auto;
  width          : 19.32vw;
  height         : 99px;
  left           : 13.625vw;
  top            : 2.34375vw;
  line-height    : 4vw;
  font-size      : 1.45vw;
  z-index        : 2;
}

.lhnation-main .p1Con .wrap .text span:nth-child(2).active {
  background     : url(../images/bg8.png) no-repeat;
  background-size: 100% auto;
  color          : #fff;
}

.lhnation-main .p1Con .wrap .text span:nth-child(3) {
  background     : url(../images/bg9a.png) no-repeat;
  background-size: 100% auto;
  width          : 19.16vw;
  height         : 78px;
  left           : 35.552083333333336vw;
  top            : 4.114583333333334vw;
  line-height    : 2.864vw;
  font-size      : 1.45vw;
  z-index        : 2;
}

.lhnation-main .p1Con .wrap .text span:nth-child(3).active {
  background     : url(../images/bg9.png) no-repeat;
  background-size: 100% auto;
  color          : #fff;
}

.lhnation-main .p1Con .wrap .pic {
  margin-top: 7.5vw;
  display   : flex;
}

.lhnation-main .p1Con .wrap .pic .item img {
  width : 100%;
  height: auto;
}

/*---------- 2. P2con ----------*/
.lhnation-main .p2Con {
  text-align: center;
  margin-top: 30px;
}

.lhnation-main .p2Con .wrap {
  background: url(../images/bg2.png) no-repeat;
  width     : 984px;
  height    : 507px;
  box-shadow: 7.314px 6.82px 10.34px 0.66px rgba(214, 191, 191, 0.44);
  position  : relative;
}

.lhnation-main .p2Con .wrap .fl {
  width      : 286px;
  padding-top: 60px;
}

.lhnation-main .p2Con .wrap .fl img {
  margin-left: 68px;
  box-shadow : 3px 1px transparent,
    5px 2px transparent,
    5px 3px transparent;
}

.lhnation-main .p2Con .wrap .fl img:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 1px transparent,
    5px 3px transparent;
}

.lhnation-main .p2Con .wrap .fr img.granada {
  position: absolute;
  width   : 110px;
  height  : auto;
  top     : 191px;
  right   : 306px;
  z-index : 2;
}

/*---------- 3. P3con ----------*/
.lhnation-main .p3Con {
  margin-top: 45px;
  text-align: center;
}

.lhnation-main .p3Con .wrap {
  background: url(../images/bg3.png) no-repeat top center;
  height    : 489px;
  padding   : 0 45px 0 44px;
}

.lhnation-main .p3Con .wrap .fl {
  width: 556px;
}

.lhnation-main .p3Con .wrap .fl .mySwiper {
  width      : 539px;
  height     : 377px;
  overflow   : hidden;
  margin-left: 0;
}

.lhnation-main .p3Con .wrap .fl .mySwiper .swiper-slide img {
  border-radius: 30px 0 30px 0;
}

.lhnation-main .p3Con .wrap .fl .mySwiper .swiper-pagination {
  bottom       : 80px;
  width        : 539px;
  left         : 45px;
  text-align   : right;
  padding-right: 22px;
}

.lhnation-main .p3Con .wrap .fl .mySwiper .swiper-pagination .swiper-pagination-bullet {
  width           : 22px;
  height          : 2px;
  background-color: #c23330 !important;
}

.lhnation-main .p3Con .wrap .fl .mySwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #ecc285;
}

.lhnation-main .p3Con .wrap .fr {
  width: 540px;
}

.lhnation-main .p3Con .wrap .fr .list {
  margin-top: 68px;
}

.lhnation-main .p3Con .wrap .fr .list li {
  font-size   : 20px;
  line-height : 2.2;
  position    : relative;
  padding-left: 22px;
}

.lhnation-main .p3Con .wrap .fr .list li::before {
  position        : absolute;
  content         : '';
  width           : 6px;
  height          : 6px;
  background-color: #b42625;
  left            : 0;
  top             : 19px;
  border-radius   : 50%;
}

.lhnation-main .p3Con .wrap .fr .list li a {
  color: #525252;
}

/*---------- 4. P4con ----------*/
.lhnation-main .p4Con {
  margin-top: 50px;
  text-align: center;
  width     : 1230px;
}

.lhnation-main .p4Con .pic {
  display: flex;
}

/*---------- 5. P5con ----------*/
.lhnation-main .p5Con {
  background     : url(../images/bg4.jpg) no-repeat top center;
  height         : 37.65625vw;
  background-size: 100% auto;
  margin-top     : 40px;
  text-align     : center;
  position       : relative;
}

.lhnation-main .p5Con img.title {
  margin-top: 2.34375vw;
}

.lhnation-main .p5Con .wrap {
  min-height : 100%;
  padding-top: 20vw;
}

.lhnation-main .p5Con .wrap .pagi-outer {
  position  : absolute;
  left      : 50%;
  width     : auto;
  bottom    : 5vw;
  color     : #fff;
  text-align: center;
}

.lhnation-main .p5Con .wrap .pagi-outer .pagi-m-wrap {
  display  : inline-block;
  font-size: 1.2rem;
}

.lhnation-main .p5Con .wrap .swiper-button-next {
  top  : 60%;
  right: 11%;
  color: #fff5de;
}

.lhnation-main .p5Con .wrap .swiper-button-prev {
  color: #fff5de;
  left : 11%;
  top  : 60%;
}

.lhnation-main .p5Con .wrap .swiper-m {
  margin: 0 auto;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide {
  position: relative;
  width   : 20vw;
  height  : 40vw;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container {
  perspective: 1000px;
  margin     : 0 auto;
  width      : 100%;
  height     : 100%;
  overflow   : hidden;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .front,
.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .back {
  cursor                     : pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility        : hidden;
  -webkit-transition         : 0.6s ease-out;
  transition                 : 0.6s ease-out;
  -webkit-transform-style    : preserve-3d;
  transform-style            : preserve-3d;
  position                   : absolute;
  top                        : 0;
  left                       : 0;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .front img,
.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .back img {
  width   : 100%;
  height  : auto;
  overflow: hidden;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .front {
  z-index          : 2;
  -webkit-transform: rotateY(0deg);
  transform        : rotateY(0deg);
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .back {
  z-index          : 1;
  -webkit-transform: rotateY(-180deg);
  transform        : rotateY(-180deg);
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  transform        : rotateY(0deg);
  z-index          : 2;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  transform        : rotateY(180deg);
  z-index          : 1;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .flipper {
  -webkit-transition     : all 0.6s ease-out;
  transition             : all 0.6s ease-out;
  transition             : all 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transform-style: preserve-3d;
  transform-style        : preserve-3d;
  display                : block;
  position               : relative;
  margin                 : 0 auto;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .flipper.n-1,
.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .flipper.p-1 {
  margin-top: 2vw;
}

.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .flipper.n-2,
.lhnation-main .p5Con .wrap .swiper-m .swiper-slide .flip-container .flipper.p-2 {
  margin-top: 4vw;
}

.lhnation-main .p5Con .wrap .swiper-m .img-slidem {
  width: 100%;
}

.lhnation-main .p5Con .wrap .swiper-m-wrap {
  position   : absolute;
  top        : 7vw;
  width      : 70vw;
  left       : 50%;
  margin-left: -35vw;
}

.lhnation-main .p5Con .wrap .swiper-m-wrap .show {
  opacity           : 1;
  -webkit-transition: all 1s linear;
  transition        : all 1s linear;
}

.lhnation-main .p5Con .wrap .swiper-m-wrap .swiper-pagination-bullet {
  background           : #ffffff;
  margin-right         : 0.133333rem;
  opacity              : 1;
  width                : 0.106667rem;
  height               : 0.106667rem;
  -webkit-border-radius: 0.106667rem;
  border-radius        : 0.106667rem;
}

.lhnation-main .p5Con .wrap .swiper-m-wrap .swiper-pagination-bullet .swiper-pagination-bullet-active {
  background: #ab2a1c;
}

/*---------- 6. P6con ----------*/
.lhnation-main .p6Con {
  margin-top: 40px;
  text-align: center;
}

.lhnation-main .p6Con .wrap {
  display   : flex;
  margin-top: 25px;
}

.lhnation-main .p6Con .wrap .pic {
  width      : 220px;
  height     : 227px;
  box-shadow : 1.268px 2.719px 11.28px 0.72px rgba(219, 146, 140, 0.67);
  background : url(../images/bg5.png) no-repeat;
  text-align : center;
  font-size  : 20px;
  font-weight: 600;
}

.lhnation-main .p6Con .wrap .pic img {
  margin-top: 10px;
}

.lhnation-main .footer {
  background: url(../images/bg6.png) no-repeat top center;
  height    : 315px;
  margin-top: 50px;
}

/*---------- footer ----------*/
.lhnation-main .copyright {
  text-align : center;
  font-size  : 14px;
  line-height: 1.5;
  padding    : 30px 0;
  color      : #aa2c1a;
}


@media screen and (min-width: 1200px) and (max-width: 1600px) {
   .lhnation-main .top {
      scale: 0.8;
      top: -4vw;
   }

   .lhnation-main .p1Con {
      background-size: 90% auto;
      top: -6vw;
      height: 35.958333333333336vw;
   }

   .lhnation-main .p1Con .wrap {
      top: 8vw;
   }
}

/*---------- mobile ----------*/
@media (min-device-width: 320px) and (max-width: 689px),
(max-device-width: 480px) {
  body {
    width: 1200px;
  }

  .lhnation-main .top {
    height: 477px !important;
  }

  .lhnation-main .top img.logo {
    left: 8vw;
  }

  .lhnation-main .top .topTitle {
    width: 36.6vw !important;
    top  : 12vw !important;
    left : 24vw !important;
	  opacity: 1;
  }
	
	.lhnation-main .top img.ico {
		opacity: 1;
	}

  .lhnation-main .p1Con {
    height         : 46.9375vw !important;
    background-size: 85% auto !important;
  }
	
	.lhnation-main .p1Con img.title {
    margin-top: 5.94791vw !important;
  }

  .lhnation-main .p1Con .wrap {
    top: 12vw !important;
  }
	.lhnation-main .p4Con {
		margin-left: -14px;
	}
}