@charset "utf-8";
/* CSS Document */
.wrap {border-top:0;}
/*banner*/
#i_banner { position: relative; z-index: 0;}
#i_banner .swiper-slide { position: relative; z-index: 0;}
#i_banner .pic { position: relative; z-index: 0; max-height: 100vh; height: 49.5vw;}
#i_banner .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
object-fit: cover;}
#i_banner .txtb { position: absolute; left: 0; 
top: 7vw; bottom: 1vw; right: 0; right: 0;
display: flex; justify-content: center; align-items: center;}
#i_banner .txtb .txt { text-align: left;
 color: #fff ;
filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
transition: all 1s;
-webkit-transition:all 1s;
transform: translate(0,90px);
-ms-transform: translate(0,90px);
-webkit-transform: translate(0,90px);}
#i_banner .txtb .txt .name {  letter-spacing: 0.05em;}
#i_banner .txtb .txt .intro { letter-spacing: 0.05em; margin-top:0.8em; line-height: 1.5; 
overflow: hidden; color: #fff;}
#i_banner .txtb .txt .btnOrg { margin-top: 2em;}

#i_banner .swiper-slide-active  .txtb .txt {
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);}

.swiper-pagination { bottom: 7em !important;  text-align: right; right: 7.6% !important;
left: 7.6% !important; width: auto !important;}
.swiper-pagination-bullet { width: 1em; height: 1em;
 background-color: #fff; margin: 0 0.8em !important;
 filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 -moz-border-radius:0.8em; -webkit-border-radius:0.8em; border-radius:0.8em;
}
.swiper-pagination-bullet-active { position: relative; z-index: 0;
	filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0; width: 2.8em;
	 background-color: #fd7922;}

#i_banner .btnNext,#i_banner .btnPrev { z-index: 10; position: absolute;
right: 5.2%; top: 50%; margin-top: -2.25em;
	cursor: pointer; display: block; cursor: pointer;
	width: 4.5em; height: 4.5em; 
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	background: url(../images/arrow.png) center center no-repeat;
	background-size:contain;
} 
#i_banner .btnPrev { left: 5.2%; right: auto;
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); }
#i_banner .btnNext:hover,
#i_banner .btnPrev:hover {background-color: #fff;}

#i_banner  .swiper-button-disabled,
#i_banner  .swiper-button-disabled:hover{  background: transparent;
filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;}


 @media only screen and (max-width:828px) { 
	#i_banner .con { width: calc(100% - 2em);; margin: 0 2em;}
	#i_banner .swiper-pagination { left: 3% !important; right: 3% !important;
	 font-size: 1.4vw; bottom: 3em !important;}
	#i_banner .swiper-pagination-bullet { width: 1em; height: 1em;}
	#i_banner .txtb .txt .name { font-size: 3.6vw;}
	#i_banner .txtb .txt .intro { font-size: 2.8vw;}
	#i_banner .txtb .txt .btnOrg { margin-top: 1.2em; font-size: 3vw;}
}

.aboutBox { padding-top: 16.25em;}
.aboutBox .con { display: flex; justify-content: space-between;
align-items: center;}
.aboutBox  .picb { width: 51.7%;}
.aboutBox  .picb .pic { position: relative; z-index: 0; padding-top: 110.1%;}
.aboutBox  .picb .pic img { position: absolute;
left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.aboutBox .txtb { width: 40.5%; text-align: left;}
.aboutBox .txtb .name .ch { font-weight: bold; font-size: 3.1em;}
.aboutBox .txtb .name .en { display: inline-block; margin-left: 0.2em; font-size: 1.87em;
text-transform: uppercase;}
.aboutBox .txtb .intro { margin-top:1em; line-height: 2em;}
.aboutBox .txtb  .btnW { margin-top: 5em;}
 @media only screen and (max-width:828px) {
	.aboutBox { padding-top: 5em;}
	 .aboutBox .con { display: block; }
	 .aboutBox  .picb { width: auto; margin-left: -1em; margin-right: -1em;}
	 .aboutBox  .txtb { width: 100%; margin-top: 2em;}
	 .aboutBox .txtb .btnW { margin-top: 2em;}
	 
 }
 
.dataBox { padding-top: 8em;}
.dataBox  ul { line-height: 1.25; flex-wrap: wrap; display: flex; justify-content: space-around; align-items: flex-start;}
.dataBox  .name { font-size: 2.4em;}
.dataBox  .info .num { color: #fd7922; font-weight: bold; font-size: 2.2em;}
.dataBox .info { font-size: 2.25em;}
 @media only screen and (max-width:828px) {
	 .dataBox { padding-top: 3em;}
	.dataBox  ul li { width: 48%; margin: 8% 1% 0;} 
    .dataBox  .info .num { font-size: 2em;}
	.dataBox .name { font-size: 2em;}
	.dataBox .info { font-size: 1.6em;}
 }

.photoBox { margin-top: 14.5em; position: relative; z-index: 0;}
.photoBox::after { background-color: #eee; padding-bottom: 34%; content: ""; display: block; z-index: -1;
 position: absolute; left: 0; width: 100%; bottom: 0;}
.photoBox .swiper-slide { position: relative; z-index: 0;}
.photoBox .pic { display: block; cursor: pointer; position: relative; z-index: 0; padding-top: 45.6%;}
.photoBox .pic img { position: absolute; left: 0; top: 0;/* width: 100%;*/ height: 100%;
object-fit: cover;}
.photoBox .txtb { padding-bottom: 13.8em; 
margin-top: 1.2em; display: flex; justify-content: space-between; align-items: flex-start;}
.photoBox .txtb .t1 { font-size: 3.5em;}
.photoBox .txtb .t2 { font-size: 2.8em;}

.photoBox .swiper-pagination { bottom: 7em !important; text-align: center;}
 @media only screen and (max-width:828px) {
.photoBox { margin-top: 5em;}
.photoBox .txtb { display: block; padding-bottom: 5em; }
.photoBox .txtb .t1 { font-size: 5.8vw;}
.photoBox .txtb .t2 { font-size: 5.2vw;}
.photoBox::after { padding-bottom: 60%;}
.photoBox .swiper-pagination { font-size: 3.6vw; bottom: 2em !important;}
.photoBox .swiper-pagination-bullet { width: 6px; height: 6px;}
}

.introBox { padding: 13em 0 11.5em;}
.introBox .tit { display: flex; justify-content: space-between; align-items: center;}
.introBox .tit .name .ch { font-weight: bold; font-size: 3.1em;}
.introBox .tit .name .en { text-transform: uppercase; display: inline-block; margin-left: 0.2em; font-size: 1.87em;}
.introBox .tit2 { margin-top: 2em; text-align: left;}

 @media only screen and (max-width:828px) {
	 .introBox { padding: 5em 0;}
	 .introBox .tit { display: block;}
	 .introBox .tit2 { text-align: center;}
 }

.swiper-intro { margin-top: 4.8em; position: relative; z-index: 0;}
.swiper-intro .swiper-slide { position: relative; z-index: 0;}
.swiper-intro .item { display: flex; justify-content: space-between; align-items: flex-start;}
.swiper-intro .picb { width: 100%; margin-left: 1px;}
.swiper-intro .pic { position: relative; z-index: 0; padding-top: 70%;}
.swiper-intro .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
object-fit: cover;}

.swiper-intro .txtb { width: 43.7%;}
.swiper-intro .txtb .txt {  text-align: left; color:#000; }

.swiper-intro .txtb .txt .name { margin-top: 0.45em; font-weight: bold; 
line-height: 1.2; }
.swiper-intro .txtb .txt .intro {font-size: 0.95em; margin-top: 1em; line-height: 1.8; 
 max-height: 3.6em;
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; }
.swiper-intro .txtb .txt .name2 { margin-top: 1.4em; font-weight: bold; 
line-height: 1.2; }
.swiper-intro .txtb .txt .intro2 {font-size: 0.95em; margin-top: 0.7em;  
line-height: 1.8;  max-height: 5.4em;
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:3; }

.swiper-intro .txtb .txt .btnOrg3 { margin-top: 2.1em;font-size: 0.95em;}
.swiper-intro .swiper-slide-active  .txtb .txt {
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);}

.swiper-intro .swiper-pagination { left: 9.3%; right: 9.3%; width: auto;
 bottom: 2.43em; display: flex; justify-content: flex-start; align-items: center;}
.swiper-intro .swiper-pagination-bullet { flex: 1; height: 1px;
 -moz-border-radius:0; -webkit-border-radius:0; border-radius:0;
 background-color: #fff; margin: 0 !important;
 filter:alpha(opacity=60);-moz-opacity:0.6; opacity:0.6;
}
.swiper-intro .swiper-pagination-bullet-active {height: 2px; background-color: #058d7f;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}


.swiper-intro .btnNPW { height: 1.4em; text-align: right; 
position: absolute; z-index: 20; bottom: 20px; right: 6.5%;}
.swiper-intro .btnNextI,.swiper-intro .btnPrevI { position: relative;
	cursor: pointer; display: inline-block;
	width: 1.35em; height: 1.35em; 
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
	background:  url(../images/arrow4.png) center center no-repeat;
		background-size: contain;
} 
.swiper-intro .btnPrevI { right: auto; margin-right:1em;
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); }
.swiper-intro .btnNextI:hover,
.swiper-intro .btnPrevI:hover { background-color: transparent;}

.swiper-intro .swiper-button-disabled,
.swiper-intro .swiper-button-disabled:hover{ 
filter:alpha(opacity=40);-moz-opacity:0.4; opacity:0.4;}

.swiper-intro .num { position: absolute; z-index: 10; right: 4%;
 bottom: 0; margin-bottom: 3%; color: #fff; font-size: 1.1em;  }
 .swiper-intro .num .lines { display: inline-block; width: 2px;
  height: 1.9em; background-color: #fff;
 transform: rotate(20deg);
 -ms-transform: rotate(20deg); /* IE 9 */
 -webkit-transform: rotate(20deg); /* Safari and Chrome */}
.swiper-intro .num span.cur { margin-right: 0.2em; position: relative; top: -0.45em; font-size: 1.66em; }

 @media only screen and (max-width:828px) { 
.swiper-intro { margin-top: 2.5em;}
.swiper-intro .item { display: block; }
.swiper-intro .picb { width: 100%;}
.swiper-intro .txtb { margin-top: 2em; width: 100%;}
.swiper-intro .txtb .txt { width: auto; margin: 0 1.5em;}
/* .swiper-intro .txtb .txt .intro2{ font-size: 3.2vw;}
.swiper-intro .txtb .txt .name { font-size: 5.8vw;}
.swiper-intro .txtb .txt .intro { font-size: 2.8vw;} */
.swiper-intro .num { font-size: 10px; left: 2em; bottom: 3em;}
.swiper-intro .btnNPW  { font-size: 0.7em; right: 0.4em; bottom: 0;}

}

.hotelBox { margin-top: 13em}
.hotelBox .pic { margin-top: 3.4%; display: block; position: relative; z-index: 0;}
.hotelBox .pic img { display: block; width:100%; height: 10%;}
.hotelBox .pic .btnWhite,
.hotelBox .pic .btnBlack{ position: absolute; z-index: 1; bottom: 0; right: 7%; margin-bottom: 5.2%;}

.brandBox { padding: 12% 0 6%;}
.brandBox .titW { display: flex; justify-content: space-between;
align-items: center;} 
.brandBox .titW .tit { text-align: left;} 
.brandBox .titW .tit .en { display: inline-block; font-weight: bold;}
.brandBox .titW .tit .ch { font-weight: bold; margin-right: 0.3em;}
.brandBox .titW .tit .intro { margin-top: 1.2em; line-height: 2;}
.brandBox .titW .tab { margin-top: 1em; font-weight: bold;} 
.brandBox .titW .tab a { display: inline-block; margin: 0 0.5em;}

.brandBox .list { margin-top: 0.5em; text-align: left;}
.brandBox .list ul { display: flex; justify-content: flex-start;
align-items: flex-start; flex-wrap: wrap;}
.brandBox .list li { margin-top: 1.3em; width: 15%; margin-right: 6.25%;}
.brandBox .list li:nth-child(5n) { margin-right: 0;}
.brandBox .list .pic { position: relative; z-index: 0;
 padding-top: 100%; display: block;cursor: pointer; overflow: hidden;
 -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;}
.brandBox .list .pic img { position: absolute; left: 0; top: 0;
width: 100%; height: 100%;
transition: all 0.5s;
-webkit-transition:all 0.5s;}
.brandBox .list li:hover img {
	-ms-transform: scale(1.03, 1.03);
		-webkit-transform: scale(1.03, 1.03);
		transform: scale(1.03, 1.03);
}
.brandBox .list .name { margin: 0.4em 0.5em 0;}

 @media only screen and (max-width:828px) {
	 .brandBox .titW { display: block;}
	 .brandBox .titW .tab { text-align: right;}
	 .brandBox .list li { margin-top: 1.3em; width: 47%; margin-right: 6%;}
	 .brandBox .list li:nth-child(5n) { margin-right: 6%;}
	 .brandBox .list li:nth-child(2n) { margin-right: 0;}
 }

.histBox { padding: 6% 0 6%;}
.histBox .tit { text-align: left;} 
.histBox .tit .en { margin-left: 0.3em; display: inline-block; font-weight: bold;}
.histBox .tit .ch { font-weight: bold;}

.histBox .pic img { display: block; width: 100%; height: auto;}