@charset "UTF-8";
/*
 *
 * JSL Case Style
 * Author: KumaChen
 * 本檔案可作客製化作業
 * 可直接繼承 viewModel 內樣式使用
 *
*/
/* ------ */
.color_A48747 {
  color: #a48747 !important;
}

.white {
  color: #fff !important;
}

.imagesLoading .data {
  background-color: #f9f600 !important;
}

/* ------ */
/* ------ */
.noteBody {
  position: absolute;
  display: block;
  color: #fff;
  padding: 5px;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.5);
}

.noteBody.left {
  bottom: 10px;
  left: 10px;
}

.noteBody.right {
  bottom: 10px;
  right: 10px;
}

.noteBody.top {
  bottom: initial !important;
  top: 10px;
}

.noteBody.black {
  color: #000;
}

/* ------ */
.menu nav ul li a {
  margin: 0 0.5vw !important;
  color: #fff !important;
}
.menu nav ul li a:hover {
  border-bottom: 4px solid #a58f68 !important;
  color: #a58f68 !important;
}
.menu nav ul li.active a {
  color: #a58f68 !important;
  border-bottom: 4px solid #a58f68 !important;
}
.menu nav .rightNav .phone_txt {
  color: #fff !important;
}
.menu nav .rightNav .btn_menu .act_btn_menu .line {
  background-color: #fff !important;
}
.menu nav .rightNav .btn a svg {
  color: #fff;
}

.activeMenuFloatStatus {
  background-color: #000 !important;
}

.bodyPage .webNav {
  background-color: #000 !important;
}

/* ------ */
/* ------ */
footer .caseInfo {
  background: transparent linear-gradient(180deg, #1d170c 5%, #3b2511 100%) 0% 0% no-repeat padding-box !important;
}

/* ------ */
/* ------ */
.keyVision {
  width: 100%;
  position: relative;
}
.keyVision .fullBg {
  position: relative;
  width: 100%;
  min-height: 53vw;
  background-image: url(/case_assets/npp250143/assets/images/sample/intro_pc.jpg?v=2301111005);
  background-size: cover;
  background-position: center;
}
.keyVision .fullBg img {
  width: 100%;
}
.keyVision .maxWidth {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.keyVision .logo {
  position: relative;
  width: 40vw;
  max-width: 774px;
  padding-top: 11vw;
  z-index: 8;
}
.keyVision .logo img {
  width: 100%;
}
.keyVision .slogan1 {
  position: relative;
  width: 30vw;
  max-width: 774px;
  margin-top: 4vw;
  z-index: 8;
}
.keyVision .slogan1 img {
  width: 100%;
}
.keyVision .slogan2 {
  position: relative;
  width: 20vw;
  max-width: 774px;
  margin-top: 1.25vw;
  z-index: 8;
}
.keyVision .slogan2 img {
  width: 100%;
}
.keyVision .slogan3 {
  position: relative;
  width: 7vw;
  max-width: 156px;
  margin-top: 1.25vw;
  z-index: 8;
}
.keyVision .slogan3 img {
  width: 100%;
}
.keyVision .video {
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
  position: relative;
  left: 0;
}
.keyVision .video .object {
  position: relative;
  height: 100%;
}
.keyVision .video .object .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.keyVision .video .object video {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -99;
}

.treeObject {
  position: absolute;
  left: -3px;
  bottom: -12px;
  z-index: 8;
  width: 30%;
  animation: treeMove 5s infinite alternate-reverse cubic-bezier(0.42, 0, 0.71, 1.02);
  transform-origin: bottom left;
}
.treeObject img {
  width: 100%;
  max-width: 593px;
}

@keyframes treeMove {
  0% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(8deg);
  }
}
/* ------ */
.flexRegion {
  display: flex;
}

.blockRegion {
  display: block;
}

.flexHorizonSpreadMode {
  justify-content: space-between;
  align-items: center;
}

.flexVerticalSpreadMode {
  flex-direction: column;
  justify-content: space-between;
}

.marginVerticalZero {
  margin-top: 0;
  margin-bottom: 0;
}

.regionTopNotSpace {
  margin-top: 0px !important;
}

.regionBottomNotSpace {
  margin-bottom: 0px !important;
}

.bottomMinHeight {
  min-height: 20vw;
}

.page_content {
  background-image: url(/case_assets/npp250143/assets/images/sample/intro_bg2.jpg);
}

.mainFullRegion {
  position: relative;
  width: 100%;
  padding: 3vw 0;
  overflow: hidden;
  align-items: center;
}
.mainFullRegion .left {
  order: 1;
}
.mainFullRegion .right {
  order: 2;
}
.mainFullRegion .textRegion {
  position: relative;
  display: flex;
  width: 26vw;
  padding-left: 4vw;
  padding-top: 2.75vw;
  flex-direction: column;
}
.mainFullRegion .textRegion .title {
  width: 80%;
  position: relative;
}
.mainFullRegion .textRegion .title h3 {
  display: flex;
  align-items: center;
  font-size: 1.25vw;
  color: #bfa167;
  padding: 0.25vw 0;
}
.mainFullRegion .textRegion .title h3 .signin {
  width: 34%;
  margin-top: 0;
  display: grid;
}
.mainFullRegion .textRegion .title h3 .signin img {
  width: 100%;
}
.mainFullRegion .textRegion .title h3 .signin.intro4 {
  width: 60%;
}
.mainFullRegion .textRegion .title h1 {
  font-size: 1.75vw;
  font-weight: bold;
  color: #231815;
  padding: 0.5vw 0;
  margin: 0.1vw 0 2.5vw;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}
.mainFullRegion .textRegion .text p {
  color: #9a7329;
  font-size: 1vw;
  letter-spacing: 0.15vw;
}
.mainFullRegion .textRegion .signin {
  position: relative;
  width: 45%;
  margin-top: 1vw;
}
.mainFullRegion .textRegion .signin img {
  width: 100%;
}
.mainFullRegion .imageRegion {
  position: relative;
  width: 70vw;
  overflow: hidden;
}
.mainFullRegion .imageRegion img {
  width: 100%;
}
.mainFullRegion .imageRegion .paginationBar {
  z-index: 8;
}
.mainFullRegion .imageRegion .paginationBar span {
  width: 11px;
  height: 11px;
  margin: 0 2.5px;
}
.mainFullRegion .imageRegion .paginationBar .swiper-pagination-bullet-active {
  background: #fff !important;
}
.mainFullRegion .imageRegion .paginationBar.inSideStyle {
  display: flex;
  width: 100%;
  bottom: 20px;
  left: 0px;
  position: absolute;
  align-items: center;
  justify-content: center;
  z-index: 8;
}
.mainFullRegion .more {
  display: flex;
  justify-content: flex-start;
  position: absolute;
}
.mainFullRegion .more a {
  width: 8vw;
  max-width: 130px;
  height: 35px;
  display: block;
  background-image: url(/assets/images/icon/icon_more.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.33s ease-in-out;
  -moz-transition: all 0.33s ease-in-out;
  -webkit-transition: all 0.33s ease-in-out;
}
.mainFullRegion .more a img {
  width: 100%;
}
.mainFullRegion .more a:hover {
  transition: all 0.33s ease-in-out;
  -moz-transition: all 0.33s ease-in-out;
  -webkit-transition: all 0.33s ease-in-out;
}
.mainFullRegion .more_w a {
  background-image: url(/assets/images/icon/icon_more_w.png) !important;
}
.mainFullRegion .more.left {
  bottom: 3vw;
  left: 20vw;
}
.mainFullRegion .more.left a:hover {
  margin-left: 10px;
}
.mainFullRegion .more.right {
  bottom: 3vw;
  right: 4vw;
}
.mainFullRegion .more.right a:hover {
  margin-right: -10px;
}
.mainFullRegion .more.otherSize1 {
  right: 18vw;
}
.mainFullRegion .needPadding {
  width: 65vw;
}
.mainFullRegion .needPadding.left {
  margin-left: 5vw;
}
.mainFullRegion .needPadding.right {
  margin-right: 5vw;
}

.mainFullRegion.noPadding {
  padding: 0 0;
}

.mainFullRegion.textBigSize .textRegion {
  width: 45vw;
  padding-left: 5vw;
  padding-top: 2.75vw;
}
.mainFullRegion.textBigSize .imageRegion {
  width: 60vw;
}
.mainFullRegion.textBigSize .needPadding {
  width: 55vw;
}
.mainFullRegion.textBigSize .needPadding.left {
  margin-left: 5vw;
}
.mainFullRegion.textBigSize .needPadding.right {
  margin-right: 5vw;
}

.mainFullRegionUsingFullBg {
  position: relative;
  width: 100%;
  min-height: 39vw;
  padding: 3vw 0;
  overflow: hidden;
}
.mainFullRegionUsingFullBg .textRegion {
  position: relative;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  padding: 2vw 3vw 3.5vw;
  background-image: url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
  flex-direction: column;
}
.mainFullRegionUsingFullBg .textRegion .title {
  width: 100%;
  position: relative;
  text-align: left;
}
.mainFullRegionUsingFullBg .textRegion .title h3 {
  display: flex;
  align-items: center;
  font-size: 1.25vw;
  color: #bfa167;
  padding: 0.25vw 0;
}
.mainFullRegionUsingFullBg .textRegion .title h3 .signin {
  width: 34%;
  margin-top: 0;
  display: grid;
}
.mainFullRegionUsingFullBg .textRegion .title h3 .signin img {
  width: 100%;
}
.mainFullRegionUsingFullBg .textRegion .title h3 .signin.intro5 {
  width: 46%;
}
.mainFullRegionUsingFullBg .textRegion .title h1 {
  font-size: 1.75vw;
  font-weight: bold;
  color: #231815;
  padding: 0.5vw 0;
  margin: 0.1vw 0 2.5vw;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}
.mainFullRegionUsingFullBg .textRegion .text {
  text-align: left;
}
.mainFullRegionUsingFullBg .textRegion .text p {
  color: #9a7329;
  font-size: 1vw;
  letter-spacing: 0.15vw;
}
.mainFullRegionUsingFullBg .textRegion .signin {
  position: relative;
  width: 45%;
  margin-top: 1vw;
}
.mainFullRegionUsingFullBg .textRegion .signin img {
  width: 100%;
}
.mainFullRegionUsingFullBg .textRegion .more {
  display: flex;
  margin-top: 2vw;
  position: relative;
  justify-content: flex-end;
}
.mainFullRegionUsingFullBg .textRegion .more a {
  width: 8vw;
  max-width: 130px;
  height: 35px;
  display: block;
  background-image: url(/assets/images/icon/icon_more.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.33s ease-in-out;
  -moz-transition: all 0.33s ease-in-out;
  -webkit-transition: all 0.33s ease-in-out;
}
.mainFullRegionUsingFullBg .textRegion .more a img {
  width: 100%;
}
.mainFullRegionUsingFullBg .textRegion .more a:hover {
  margin-right: -10px;
  transition: all 0.33s ease-in-out;
  -moz-transition: all 0.33s ease-in-out;
  -webkit-transition: all 0.33s ease-in-out;
}
.mainFullRegionUsingFullBg .textRegion .more_w a {
  background-image: url(/assets/images/icon/icon_more_w.png) !important;
}
.mainFullRegionUsingFullBg .imageRegion {
  position: relative;
}

.mainFullRegionUsingFullBg.left {
  justify-content: flex-start;
}
.mainFullRegionUsingFullBg.left .textRegion {
  margin-left: 5vw;
}

.mainFullRegionUsingFullBg.right {
  justify-content: flex-end;
}
.mainFullRegionUsingFullBg.right .textRegion {
  margin-right: 5vw;
}

.mainFullRegionUsingFullBg.top {
  align-items: flex-start;
}

.mainFullRegionUsingFullBg.center {
  align-items: center;
}

.mainFullRegionUsingFullBg.bottom {
  align-items: flex-end;
}

.mainFullRegionUsingFullImage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0 0 0;
  margin: 0;
  background-image: none;
  background-color: #fff;
}
.mainFullRegionUsingFullImage .textRegion {
  position: absolute;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  padding: 0.125vw 1.5vw 0.75vw;
  flex-direction: column;
  top: 0;
  left: 1vw;
  z-index: 9;
}
.mainFullRegionUsingFullImage .textRegion .title {
  width: 100%;
  position: relative;
  text-align: left;
}
.mainFullRegionUsingFullImage .textRegion .title h3 {
  display: flex;
  align-items: center;
  font-size: 1.25vw;
  color: #bfa167;
  padding: 0.01vw 0;
}
.mainFullRegionUsingFullImage .textRegion .title h3 .signin {
  width: 34%;
  margin-top: 0;
  display: grid;
}
.mainFullRegionUsingFullImage .textRegion .title h3 .signin img {
  width: 100%;
}
.mainFullRegionUsingFullImage .textRegion .title h3 .signin.intro5 {
  width: 46%;
}
.mainFullRegionUsingFullImage .textRegion .title h1 {
  font-size: 1.75vw;
  font-weight: bold;
  color: #231815;
  padding: 0.5vw 0;
  margin: 0.1vw 0 0.5vw;
  border-top: 0;
  border-bottom: 1px solid #231815;
}
.mainFullRegionUsingFullImage .textRegion .text {
  text-align: left;
}
.mainFullRegionUsingFullImage .textRegion .text p {
  color: #231815;
  font-size: 1vw;
  letter-spacing: 0.15vw;
}
.mainFullRegionUsingFullImage .bgView {
  position: relative;
  width: 100%;
}
.mainFullRegionUsingFullImage .bgView img {
  width: 100%;
}
.mainFullRegionUsingFullImage .imageRegion {
  width: 100%;
  position: relative;
}
.mainFullRegionUsingFullImage .imageRegion img {
  width: 100%;
}
.mainFullRegionUsingFullImage .bottomMask:after {
  position: absolute;
  width: 100%;
  height: 15vw;
  content: "";
  background-image: url(/case_assets/npp250143/assets/images/sample/mask.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  bottom: 0;
  left: 0;
  z-index: 8;
}

.masterInfoRegion {
  flex-direction: column;
  width: calc(100% - 7vw);
  margin: 0 3.5vw;
}
.masterInfoRegion .title {
  width: 100%;
}
.masterInfoRegion .title h1 {
  width: 60%;
  font-size: 4.12vw;
  padding-right: 10px;
  position: relative;
  font-family: Cormorant Upright, serif;
  font-style: italic;
}
.masterInfoRegion .title h1:after {
  content: "";
  position: absolute;
  width: 58%;
  height: 1px;
  top: 55%;
  right: 0;
  background-color: #000;
  z-index: 8;
}
.masterInfoRegion .title h3 {
  font-size: 1.75vw;
  font-weight: 400;
}
.masterInfoRegion .content {
  width: 100%;
  margin-top: 0.75vw;
}
.masterInfoRegion .content ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.masterInfoRegion .content ul li {
  display: flex;
  flex-direction: row;
  width: calc(33.3333333333% - 2vw);
  padding-right: 1vw;
}
.masterInfoRegion .content ul li .img {
  width: 88%;
}
.masterInfoRegion .content ul li .img img {
  width: 100%;
}
.masterInfoRegion .content ul li .info {
  display: flex;
  width: 10%;
  padding-left: 2%;
  flex-direction: column;
  align-items: flex-start;
}
.masterInfoRegion .content ul li .info h1 {
  font-size: 2vw;
  line-height: 2vw;
  font-weight: bold;
  letter-spacing: 0.4vw;
  writing-mode: vertical-rl;
}
.masterInfoRegion .content ul li .info p {
  font-family: "Noto Serif TC", serif !important;
  font-size: 1.125vw;
  letter-spacing: 0.3vw;
  writing-mode: vertical-rl;
  margin-top: 3vw;
}
.masterInfoRegion .content ul li:last-child {
  padding-right: 0;
}

.introBg1 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic01.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
  background-repeat: no-repeat, repeat;
  background-size: 25%, auto;
  background-position: top left, left;
}

.introBg2 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic02.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
  background-repeat: no-repeat, repeat;
  background-size: 12%, auto;
  background-position: top right, left;
}

.introBg3 {
  background-image: url(/case_assets/npp250143/assets/images/sample/intro3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.introBg4 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic03.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
  background-repeat: no-repeat, repeat;
  background-size: 16%, auto;
  background-position: bottom right, left;
}
.introBg4 .textRegion {
  padding-top: 0;
  padding-bottom: 3.75vw;
}

.introBg5 {
  background-image: url(/case_assets/npp250143/assets/images/sample/intro5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.introBg6 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic04.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
  background-repeat: no-repeat, repeat;
  background-size: 16%, auto;
  background-position: top right, left;
}

.introBg7 {
  background-image: url(/case_assets/npp250143/assets/images/sample/intro7_bg.jpg);
  background-repeat: repeat;
  background-size: cover;
  background-position: left bottom;
}
.introBg7 .textRegion .title h1 {
  color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.subBg7 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic_07.png);
  background-repeat: no-repeat;
  background-size: 25vw;
  background-position: 2vw 32vw;
}

.subBg8 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic_08.png);
  background-repeat: no-repeat;
  background-size: 11.5vw;
  background-position: 75vw bottom;
}

.subBg9 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic_09.png);
  background-repeat: no-repeat;
  background-size: 18vw;
  background-position: 5vw bottom;
}

.subBg11 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic_11.png);
  background-repeat: no-repeat;
  background-size: 18vw;
  background-position: 79vw bottom;
}

.subBg12 {
  background-image: url(/case_assets/npp250143/assets/images/sample/pic12.png);
  background-repeat: no-repeat;
  background-size: 22vw;
  background-position: right 3vw;
}

.twoColBlock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  padding: 2.75vw 0;
  overflow: hidden;
}
.twoColBlock .textRegion {
  width: 30vw;
  z-index: 8;
}
.twoColBlock .textRegion h1 {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  margin: 0.75vw 0;
}
.twoColBlock .textRegion p {
  font-size: 20px;
  letter-spacing: 2.5px;
  line-height: 30px;
}
.twoColBlock .textRegion .text {
  width: 90%;
}
.twoColBlock .surpriseTextRegionSize_1 {
  width: 60vw;
  display: flex;
  justify-content: center;
}
.twoColBlock .surpriseTextRegionSize_1 .text {
  width: 50% !important;
}
.twoColBlock .imageRegion {
  position: relative;
  width: 65vw;
  overflow: hidden;
  z-index: 8;
  overflow: hidden;
}
.twoColBlock .imageRegion .images {
  width: 100%;
  overflow: hidden;
}
.twoColBlock .imageRegion .images img {
  width: 100%;
}
.twoColBlock .imageRegion .paginationBar {
  z-index: 8;
}
.twoColBlock .imageRegion .paginationBar span {
  width: 11px;
  height: 11px;
  margin: 0 2.5px;
}
.twoColBlock .imageRegion .paginationBar .swiper-pagination-bullet-active {
  background: #fff !important;
}
.twoColBlock .imageRegion .paginationBar.inSideStyle {
  display: flex;
  width: 100%;
  bottom: 20px;
  left: 0px;
  position: absolute;
  align-items: center;
  justify-content: center;
  z-index: 8;
}
.twoColBlock .imageRegion img {
  width: 100%;
}
.twoColBlock .imageRegionSpace {
  position: relative;
  width: 60vw;
  overflow: hidden;
}
.twoColBlock .imageRegionSpace img {
  width: 100%;
}
.twoColBlock .surpriseImageSize_1 {
  width: 35vw !important;
}
.twoColBlock .regionShadowRight {
  box-shadow: 20px 20px 0px 0 rgba(10, 56, 77, 0.1882352941);
}
.twoColBlock .regionShadowLeft {
  box-shadow: -20px 20px 0px 0 rgba(10, 56, 77, 0.1882352941);
}
.twoColBlock .left {
  order: 1;
}
.twoColBlock .left .text {
  float: right;
}
.twoColBlock .left.imageRegionSpace {
  margin-left: 5vw;
}
.twoColBlock .left.regionShadow {
  box-shadow: 20px 20px 0px 0 rgba(10, 56, 77, 0.1882352941);
}
.twoColBlock .right {
  order: 2;
}
.twoColBlock .right .text {
  float: left;
}
.twoColBlock .right.imageRegionSpace {
  margin-right: 5vw;
}
.twoColBlock .right.regionShadow {
  box-shadow: -20px 20px 0px 0 rgba(10, 56, 77, 0.1882352941);
}

/* ------ */
/* ------ */
@media (max-width: 768px) {
  .keyVision .fullBg {
    position: relative;
    width: 100%;
    min-height: 154vw;
    background-image: url(/case_assets/npp250143/assets/images/sample/intro_mob.jpg?2212300928);
    background-size: cover;
    background-position: center;
  }
  .keyVision .fullBg img {
    width: 100%;
  }
  .keyVision .logo {
    position: absolute;
    width: 80vw;
    max-width: 850px;
    top: 20vw;
    left: 10vw;
  }
  .keyVision .video {
    width: 100%;
    height: initial;
    padding-bottom: 0%;
    position: relative;
    left: 0;
    z-index: 1;
  }
  .keyVision .video .object {
    position: relative;
    height: 100%;
  }
  .keyVision .video .object video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -99;
  }
  .treeObject {
    position: absolute;
    left: -20px;
    bottom: -25px;
    z-index: 8;
    width: 75%;
    animation: treeMove 5s infinite alternate-reverse ease-in-out;
  }
  .treeObject img {
    width: 100%;
    max-width: 593px;
  }
  .flexRegion {
    display: flex;
  }
  .blockRegion {
    display: block;
  }
  .mainFullRegion {
    flex-direction: column;
    width: 100%;
    margin: 0 0;
    overflow: hidden;
  }
  .mainFullRegion .left {
    order: initial;
  }
  .mainFullRegion .right {
    order: initial;
  }
  .mainFullRegion .textVerticalRLMode {
    writing-mode: initial;
  }
  .mainFullRegion .textVerticalLRMode {
    writing-mode: initial;
  }
  .mainFullRegion .textVerticalNumberMode {
    text-combine-upright: initial;
    font-weight: 0;
    margin-bottom: 0;
  }
  .mainFullRegion .textRegion {
    display: flex;
    width: 75vw;
    flex-direction: column;
    padding-left: 0;
    padding-top: 2.75vw;
    padding-bottom: 6.75vw;
  }
  .mainFullRegion .textRegion .title {
    width: 100%;
    position: relative;
  }
  .mainFullRegion .textRegion .title h3 {
    font-size: 3.75vw;
    padding: 8.25vw 0 0.25vw;
  }
  .mainFullRegion .textRegion .title h3 .signin {
    width: 34%;
    margin-top: 0;
    display: grid;
  }
  .mainFullRegion .textRegion .title h3 .signin img {
    width: 100%;
  }
  .mainFullRegion .textRegion .title h3 .signin.intro4 {
    width: 60%;
  }
  .mainFullRegion .textRegion .title h1 {
    font-size: 4.75vw;
    font-weight: bold;
    color: #231815;
    padding: 0.5vw 0;
    margin: 0.1vw 0 2.5vw;
    border-top: 1px solid #231815;
    border-bottom: 1px solid #231815;
  }
  .mainFullRegion .textRegion .text {
    width: 100%;
  }
  .mainFullRegion .textRegion .text p {
    font-size: 3.25vw;
    letter-spacing: 0.5vw;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .mainFullRegion .left.textRegion {
    align-items: flex-start;
  }
  .mainFullRegion .right.textRegion {
    align-items: flex-start;
  }
  .mainFullRegion .imageRegion {
    position: relative;
    width: 90vw;
    overflow: hidden;
  }
  .mainFullRegion .imageRegion img {
    width: 100%;
  }
  .mainFullRegion .more {
    display: flex;
    margin-top: 2vw;
    position: relative;
    justify-content: flex-end;
  }
  .mainFullRegion .more a {
    width: 22vw;
    max-width: 130px;
    height: 35px;
    display: block;
    background-image: url(/assets/images/icon/icon_more.png);
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.33s ease-in-out;
    -moz-transition: all 0.33s ease-in-out;
    -webkit-transition: all 0.33s ease-in-out;
  }
  .mainFullRegion .more a img {
    width: 100%;
  }
  .mainFullRegion .more a:hover {
    margin-left: 10px;
    transition: all 0.33s ease-in-out;
    -moz-transition: all 0.33s ease-in-out;
    -webkit-transition: all 0.33s ease-in-out;
  }
  .mainFullRegion .more.left a:hover {
    margin-left: 10px;
  }
  .mainFullRegion .more.right {
    width: 100%;
  }
  .mainFullRegion .more.right a:hover {
    margin-right: -10px;
  }
  .mainFullRegion .more_w a {
    background-image: url(/assets/images/icon/icon_more_w.png) !important;
  }
  .mainFullRegion .needPadding {
    width: 80vw;
  }
  .mainFullRegion .needPadding.left {
    margin: 0 5vw;
  }
  .mainFullRegion .needPadding.right {
    margin: 0 5vw;
  }
  .subMainStyle .textRegion {
    order: 2;
  }
  .subMainStyle .imageRegion {
    order: 1;
  }
  .mainFullRegionUsingFullBg {
    width: 100%;
    min-height: 120vw;
    padding: 10vw 0;
    overflow: hidden;
    flex-direction: column;
  }
  .mainFullRegionUsingFullBg .textRegion {
    position: relative;
    display: flex;
    width: 75vw;
    padding: 13vw 3vw 3.5vw;
    background-image: initial;
    flex-direction: column;
  }
  .mainFullRegionUsingFullBg .textRegion .title {
    width: 100%;
    position: relative;
    text-align: left;
  }
  .mainFullRegionUsingFullBg .textRegion .title h3 {
    display: flex;
    align-items: center;
    font-size: 3.75vw;
    color: #bfa167;
    padding: 0.25vw 0;
  }
  .mainFullRegionUsingFullBg .textRegion .title h3 .signin {
    width: 34%;
    margin-top: 0;
    display: grid;
  }
  .mainFullRegionUsingFullBg .textRegion .title h3 .signin img {
    width: 100%;
  }
  .mainFullRegionUsingFullBg .textRegion .title h3 .signin.intro5 {
    width: 46%;
  }
  .mainFullRegionUsingFullBg .textRegion .title h1 {
    font-size: 4.75vw;
    font-weight: bold;
    color: #231815;
    padding: 0.5vw 0;
    margin: 0.1vw 0 2.5vw;
    border-top: 1px solid #231815;
    border-bottom: 1px solid #231815;
  }
  .mainFullRegionUsingFullBg .textRegion .text {
    text-align: left;
  }
  .mainFullRegionUsingFullBg .textRegion .text p {
    color: #9a7329;
    font-size: 3.25vw;
    letter-spacing: 0.25vw;
  }
  .mainFullRegionUsingFullBg .textRegion .signin {
    position: relative;
    width: 45%;
    margin-top: 1vw;
  }
  .mainFullRegionUsingFullBg .textRegion .signin img {
    width: 100%;
  }
  .mainFullRegionUsingFullBg .textRegion .more a {
    width: 22vw;
  }
  .mainFullRegionUsingFullBg .textRegion .more a:hover {
    margin-right: -10px;
    transition: all 0.33s ease-in-out;
    -moz-transition: all 0.33s ease-in-out;
    -webkit-transition: all 0.33s ease-in-out;
  }
  .mainFullRegionUsingFullBg .textRegion .more_w a,
  .mainFullRegionUsingFullBg .textRegion .more.mobileW a {
    background-image: url(/assets/images/icon/icon_more_w.png) !important;
  }
  .mainFullRegionUsingFullBg.left {
    justify-content: flex-start;
  }
  .mainFullRegionUsingFullBg.left .textRegion {
    margin-left: 5vw;
  }
  .mainFullRegionUsingFullBg.right {
    justify-content: flex-start;
  }
  .mainFullRegionUsingFullBg.right .textRegion {
    margin-left: 5vw;
  }
  .mainFullRegionUsingFullBg.top {
    align-items: flex-start;
  }
  .mainFullRegionUsingFullBg.center {
    align-items: flex-start;
  }
  .mainFullRegionUsingFullBg.bottom {
    align-items: flex-start;
  }
  .mainFullRegionUsingFullImage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 0 0 0;
    margin: 0;
    background-image: none;
    background-color: #eeede7;
  }
  .mainFullRegionUsingFullImage .textRegion {
    position: relative;
    display: flex;
    width: 75vw;
    padding: 3.5vw 3vw 7vw;
    background-image: initial;
    flex-direction: column;
  }
  .mainFullRegionUsingFullImage .textRegion .title {
    width: 100%;
    position: relative;
    text-align: left;
  }
  .mainFullRegionUsingFullImage .textRegion .title h3 {
    display: flex;
    align-items: center;
    font-size: 3.75vw;
    color: #bfa167;
    padding: 0.25vw 0;
  }
  .mainFullRegionUsingFullImage .textRegion .title h3 .signin {
    width: 34%;
    margin-top: 0;
    display: grid;
  }
  .mainFullRegionUsingFullImage .textRegion .title h3 .signin img {
    width: 100%;
  }
  .mainFullRegionUsingFullImage .textRegion .title h3 .signin.intro5 {
    width: 46%;
  }
  .mainFullRegionUsingFullImage .textRegion .title h1 {
    font-size: 4.75vw;
    font-weight: bold;
    color: #231815;
    padding: 0.5vw 0;
    margin: 0.1vw 0 2.5vw;
    border-top: 0;
    border-bottom: 1px solid #231815;
  }
  .mainFullRegionUsingFullImage .textRegion .text {
    text-align: left;
  }
  .mainFullRegionUsingFullImage .textRegion .text p {
    color: #9a7329;
    font-size: 3.25vw;
    letter-spacing: 0.25vw;
  }
  .mainFullRegionUsingFullImage .bgView img {
    width: 250%;
  }
  .mainFullRegionUsingFullImage .noteBody {
    position: absolute;
    font-size: 12px;
    margin-top: initial;
    color: #c9c9c9;
    bottom: 10px;
    left: 10px;
  }
  .mainFullRegionUsingFullImage .imageRegion {
    width: 100%;
    position: relative;
  }
  .mainFullRegionUsingFullImage .imageRegion img {
    width: 100%;
  }
  .mainFullRegionUsingFullImage .bottomMask:after {
    height: 20vw;
    background-image: url(/case_assets/npp250143/assets/images/sample/mask_mob.png);
  }
  .mainFullRegion.textBigSize .textRegion {
    width: 75vw;
    padding-left: 5vw;
    padding-top: 2.75vw;
  }
  .mainFullRegion.textBigSize .imageRegion {
    width: 90vw;
  }
  .mainFullRegion.textBigSize .needPadding {
    width: 90vw;
  }
  .mainFullRegion.textBigSize .needPadding.left {
    margin-left: 5vw;
  }
  .mainFullRegion.textBigSize .needPadding.right {
    margin-right: 5vw;
  }
  .masterInfoRegion {
    position: relative;
    flex-direction: column;
    width: calc(100% - 3.5vw);
    padding-left: 3.5vw;
    margin-left: inherit;
  }
  .masterInfoRegion .title {
    width: 100%;
  }
  .masterInfoRegion .title h1 {
    width: 100%;
    font-size: 12.12vw;
  }
  .masterInfoRegion .title h1:after {
    width: 100%;
    top: initial;
    bottom: 3vw;
    right: 0;
  }
  .masterInfoRegion .title h3 {
    font-size: 4.12vw;
    line-height: 1vw;
    font-weight: bold;
  }
  .masterInfoRegion .content {
    width: 100%;
    margin-top: 5.75vw;
  }
  .masterInfoRegion .content ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .masterInfoRegion .content ul li {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-right: initial;
  }
  .masterInfoRegion .content ul li .img {
    width: 80%;
  }
  .masterInfoRegion .content ul li .img img {
    width: 100%;
  }
  .masterInfoRegion .content ul li .info {
    width: 10%;
  }
  .masterInfoRegion .content ul li .info h1 {
    font-size: 6vw;
    line-height: 6vw;
    letter-spacing: 0.75vw;
  }
  .masterInfoRegion .content ul li .info p {
    font-size: 3.125vw;
    letter-spacing: 1.3vw;
    margin-top: 7vw;
  }
  .masterInfoRegion .content ul li:last-child {
    padding-right: 1vw;
  }
  .introBg1 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic01.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
    background-repeat: no-repeat, repeat;
    background-size: 60%, auto;
    background-position: top left, left;
    padding-top: 39vw;
  }
  .introBg2 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic02.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
    background-repeat: no-repeat, repeat;
    background-size: 30%, auto;
    background-position: top right, left;
    padding-top: 15vw;
  }
  .introBg3 {
    background-image: initial;
    background-color: #202d16;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 5vw;
  }
  .introBg3 .textRegion .title h1 {
    color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  .introBg4 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic03.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
    background-repeat: no-repeat, repeat;
    background-size: 41%, auto;
    background-position: 54vw 49vw, left;
  }
  .introBg4 .textRegion {
    padding-top: 0;
    padding-bottom: 3.75vw;
  }
  .introBg5 {
    background-image: initial;
    background-color: #242225;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .introBg5 .textRegion .title h1 {
    color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  .introBg6 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic04.png), url(/case_assets/npp250143/assets/images/sample/intro_bg.jpg);
    background-repeat: no-repeat, repeat;
    background-size: 35%, auto;
    background-position: top right, left;
  }
  .introBg7 {
    background-image: url(/case_assets/npp250143/assets/images/sample/intro7_bg.jpg);
    background-repeat: repeat;
    background-size: cover;
    background-position: left bottom;
  }
  .introBg7 .textRegion .title h1 {
    color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  .introBg7 .left {
    order: 2;
  }
  .introBg7 .right {
    width: 100vw;
    margin-top: 4vw;
    order: 1;
  }
  .subBg7 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic_07.png), url(/case_assets/npp250143/assets/images/sample/pic_10.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 80vw, 35vw;
    background-position: center bottom, 60vw 90vw;
    padding-bottom: 35vw;
  }
  .subBg8 {
    background-repeat: no-repeat;
    background-size: 28.5vw;
    background-position: 65vw bottom;
    padding-bottom: 25vw;
  }
  .subBg9 {
    background-repeat: no-repeat;
    background-size: 48vw;
    background-position: 5vw 92vw;
    padding-bottom: 25vw;
  }
  .subBg11 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic_11.png);
    background-repeat: no-repeat;
    background-size: 50vw;
    background-position: 40vw bottom;
    padding-bottom: 25vw;
  }
  .subBg12 {
    background-image: url(/case_assets/npp250143/assets/images/sample/pic12.png);
    background-repeat: no-repeat;
    background-size: 66vw;
    background-position: right 54vw;
  }
  .subBg12 .textRegion {
    padding-top: 25vw;
  }
  .twoColBlock {
    flex-direction: column;
    padding: 5vw 0;
  }
  .twoColBlock .textRegion {
    width: 100vw;
  }
  .twoColBlock .textRegion h1 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3.5px;
    margin: 0.75vw 0;
  }
  .twoColBlock .textRegion p {
    font-size: 14px;
    letter-spacing: 1.9px;
    line-height: 25px;
    margin: 10px 0;
  }
  .twoColBlock .textRegion .text {
    width: 90%;
  }
  .twoColBlock .imageRegion {
    position: relative;
    width: 90vw;
    overflow: hidden;
  }
  .twoColBlock .imageRegion .paginationBar {
    z-index: 8;
  }
  .twoColBlock .imageRegion .paginationBar span {
    width: 11px;
    height: 11px;
    margin: 0 2.5px;
  }
  .twoColBlock .imageRegion .paginationBar .swiper-pagination-bullet-active {
    background: #fff !important;
  }
  .twoColBlock .imageRegion .paginationBar.inSideStyle {
    bottom: 10px;
    left: 0px;
  }
  .twoColBlock .imageRegion img {
    width: 100%;
  }
  .twoColBlock .imageRegionSpace {
    width: 85vw;
  }
  .twoColBlock .regionShadowRight {
    box-shadow: 10px 10px 0px 0 rgba(10, 56, 77, 0.1882352941);
  }
  .twoColBlock .regionShadowLeft {
    box-shadow: -10px 10px 0px 0 rgba(10, 56, 77, 0.1882352941);
  }
  .twoColBlock .clubRegionShadowRight {
    box-shadow: 10px 10px 0px 0 rgba(164, 135, 71, 0.26);
  }
  .twoColBlock .clubRegionShadowLeft {
    box-shadow: -10px 10px 0px 0 rgba(164, 135, 71, 0.26);
  }
  .twoColBlock .left {
    order: initial;
  }
  .twoColBlock .left .text {
    float: initial;
    margin: 30px auto 0;
  }
  .twoColBlock .left.imageRegionSpace {
    margin-left: 5vw;
  }
  .twoColBlock .left.regionShadow {
    box-shadow: 10px 10px 0px 0 rgba(10, 56, 77, 0.1882352941);
  }
  .twoColBlock .right {
    order: initial;
  }
  .twoColBlock .right .text {
    float: initial;
    margin: 30px auto 0;
  }
  .twoColBlock .right.imageRegionSpace {
    margin-right: 5vw;
  }
  .twoColBlock .right.regionShadow {
    box-shadow: -10px 10px 0px 0 rgba(10, 56, 77, 0.1882352941);
  }
  .twoColBlock .surpriseTextRegionSize_1 {
    width: 100vw;
    display: flex;
    justify-content: center;
  }
  .twoColBlock .surpriseTextRegionSize_1 .text {
    margin: 30px auto 0;
    width: 90% !important;
  }
  /* ------ */
  .webTree {
    height: 0;
  }
  .webTree ul {
    display: none;
  }
  .mobileNoWebTree {
    height: 0 !important;
  }
  .mobileNoWebTree ul {
    display: none;
  }
  .bottomMinHeight {
    min-height: 80vw;
  }
  .mobMoveImg {
    overflow: scroll;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .mobMoveImg::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
  .hend {
    animation: slide-left-right 1s ease-out infinite;
    position: absolute;
    bottom: 5%;
    right: 40%;
    z-index: 8;
    width: 15.6vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    vertical-align: middle;
    background-color: #8e8e8e;
    padding: 3%;
    border-radius: 24px;
    border: 1px solid #fff;
  }
  .hend img {
    width: 100% !important;
  }
}
/* ------ */
@media (min-width: 769px) and (max-width: 860px) {
  .houseRegionBg_2 {
    background-image: url(/case_assets/npp250143/assets/images/sample/house_bg_2.png?v=2506191414);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: left bottom;
  }
  .treeObject {
    width: 18%;
  }
  .mainFullRegion .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .mainFullRegionUsingFullBg .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .mainFullRegionUsingFullImage .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .twoColBlock .textRegion h1 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0.75vw 0;
  }
  .twoColBlock .textRegion p {
    font-size: 14px;
    letter-spacing: 1.9px;
    line-height: 25px;
    margin: 10px 0;
  }
  .twoColBlock .textRegion .text {
    width: 90%;
  }
  .twoColBlock .surpriseTextRegionSize_1 .text {
    margin: 30px auto 0;
    width: 90% !important;
  }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .houseRegionBg_2 {
    background-image: url(/case_assets/npp250143/assets/images/sample/house_bg_2.png?v=2506191414);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: left bottom;
  }
  .treeObject {
    width: 25%;
  }
  .mainFullRegion .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .mainFullRegionUsingFullBg .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .mainFullRegionUsingFullImage .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .twoColBlock .textRegion h1 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0.75vw 0;
  }
  .twoColBlock .textRegion p {
    font-size: 16px;
    letter-spacing: 1.9px;
    line-height: 25px;
    margin: 10px 0;
  }
  .twoColBlock .textRegion .text {
    width: 90%;
  }
  .twoColBlock .surpriseTextRegionSize_1 .text {
    margin: 30px auto 0;
    width: 90% !important;
  }
}
@media (min-width: 1181px) and (max-width: 1480px) {
  .treeObject {
    width: 25%;
  }
  .mainFullRegion .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .mainFullRegionUsingFullBg .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .mainFullRegionUsingFullImage .textRegion .text p {
    font-size: 1.15vw;
    letter-spacing: 0.1vw;
  }
  .twoColBlock .textRegion h1 {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 3.5px;
    margin: 0.75vw 0;
  }
  .twoColBlock .textRegion p {
    font-size: 20px;
    letter-spacing: 1.9px;
    line-height: 25px;
    margin: 10px 0;
  }
  .twoColBlock .textRegion .text {
    width: 90%;
  }
  .twoColBlock .surpriseTextRegionSize_1 .text {
    margin: 30px auto 0;
    width: 90% !important;
  }
}