@charset "utf-8";
/* CSS Document */
html, body{height:100%; margin:0;}

/*setting*/
.orange{color:#ffae00;}

/*block1*/
.block1{width:100%; height:100%; overflow:hidden; position:relative;}
.headbottom{position:absolute; bottom:0; height:150px; width:100%; z-index:2;background:#fff; /*border-bottom:1px solid #dbdbdb;*/}
.logo-btm{width:50%; float:left; padding-left:6%;}
.logobox{width:620px; position:relative;}
.logobox img{width:100%; max-width:475px; position:absolute; left:0; top:-130px;}
.logobox .logo_words{text-align:right; padding:20px 0;}
.logobox .logoname{color:#929292; font-size:2em;}
.logobox .slogan{color:#a1a1a1; font-size:1.45em; margin-top:20px;}

.news{float:right; width:50%; padding:30px; padding-left:13%;}
.news .newstitle{background:#73d21e; margin:1% 5% 0 0; color:#fff; text-align:center; line-height:65px; width:65px; height:65px; border-radius:50%; float:right;}
.news a{color:#606060; display:block; line-height:30px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
.news a:hover{color:#73d21e;}
.news i{margin-right:10px; color:#332e2b;}

.cbp-bislideshow {width: 100%; height: 100%;}
.cbp-bislideshow li {
  position: absolute;
  width: 100.5%;
  height: 100.5%;
  top: -0.5%;
  left: -0.5%;
  opacity: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}

.backgroundsize .cbp-bislideshow li {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
}

.backgroundsize .cbp-bislideshow li img {display: none;}
.cbp-bislideshow li img {display: block; width: 100%;}

.no-js.no-backgroundsize .cbp-bislideshow li:first-child {
  opacity: 1;
}

.no-js.backgroundsize .cbp-bislideshow li:first-child img {
  display: block;
}


/*block2*/
.block2{width:100%; height:auto;}
.green{color:#00ff5a;}
.yellow{color:#ffea00;}
.picatours{width:50%; float:left;}
.picmenu{position:relative; height:80%;}
.picmenu a{position:absolute; width:100%; height:100%; left:0; top:0; right:0; bottom:0; text-indent:-9999px;
opacity:0;
z-index:2;
background:-webkit-gradient(linear, left top, right bottom, color-stop(30%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
background:-webkit-gradient(linear,15.85% -9.15%,84.15% 109.15%,color-stop(rgba(255, 255, 255, 0),0.3),color-stop(rgba(0, 0, 0, 0.65),1));
background:-webkit-linear-gradient(-60deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:   -moz-linear-gradient(-60deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:     -o-linear-gradient(-60deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:        linear-gradient(-60deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:-webkit-gradient(linear,-9.15% 9.15%,109.15% 90.85%,color-stop(rgba(255, 255, 255, 0),0.3),color-stop(rgba(0, 0, 0, 0.65),1));
background:-webkit-linear-gradient(330deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:   -moz-linear-gradient(330deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:     -o-linear-gradient(330deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:        linear-gradient(330deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:-webkit-gradient(linear,84.15% 109.15%,15.85% -9.15%,color-stop(rgba(255, 255, 255, 0),0.3),color-stop(rgba(0, 0, 0, 0.65),1));
background:-webkit-linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:   -moz-linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:     -o-linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
background:        linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ff0000',GradientType=1 );
-webkit-transition:opacity 0.5s ease;
   -moz-transition:opacity 0.5s ease;
     -o-transition:opacity 0.5s ease;
        transition:opacity 0.5s ease;
-webkit-transform:translateZ(0);
   -moz-transform:translateZ(0);
    -ms-transform:translateZ(0);
     -o-transform:translateZ(0);
        transform:translateZ(0);
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;
}
.picmenu a:hover{
opacity:1;
-webkit-transition:opacity 0.5s ease;
   -moz-transition:opacity 0.5s ease;
     -o-transition:opacity 0.5s ease;
        transition:opacity 0.5s ease;
}
.picmenu img{width:100%;}
.picmenu .yellowBox{position:absolute; left:0; top:0; width:40%; background:#ffd200; padding:25px 50px; z-index:1}
.picmenu .yellowBox:after{content:''; position:absolute; bottom:-15px; left:45%;width: 0; height: 0; border-style: solid; border-width: 15px 13px 0 13px; border-color: #ffd000 transparent transparent transparent;}
.picmenu .yellowBox .big_Word{color:#000; font-size:2em;}
.picmenu .yellowBox .sml_word{color:#b88f00;}
.picmenu .yellowBox .sml_seemore{ position:absolute; right:5%; top:40%; border:2px solid #b88f00; color:#b88f00; padding:3px 10px; display:none;}
.tourBox{width:33.33%;/* width: -webkit-calc(100% / 3); width: calc(100% / 3);*/ height:16vw; position:relative; overflow:hidden; float:left; background: #3085a3; cursor: pointer;}
.tourBox .tourName{position:absolute; left:0; bottom:0; width:100%; color:#fff; padding:15px; font-size:1em;}
.tourBox .tourName .tourType{display:block; font-size:0.75em;}
.tourBox .tourName .price {
	display: block;
	font-size: 1rem;
	font-weight: normal;
}

.tourBox .tourName .price i {
	padding: 0 3px;
	display: inline-block;
	font-style: normal;
}

.tourBox .tourName .price em {
	font-size: 12px;
	font-style: normal;
}
.tourBox img {
	position: relative;
	display: block;
	min-height: 100%;
	min-width:100%;
	max-width: -webkit-calc(100% + 100px);
	max-width: calc(100% + 100px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
	transform: translate3d(-30px,0,0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.tourBox:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}
.tourBox figcaption {
	padding: 2em;
	color: #fff;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); 
  background: -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); 
  background: -moz-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); 
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
}

.tourBox figcaption::before,
.tourBox figcaption::after {
	pointer-events: none;
}

.tourBox figcaption,
.tourBox a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tourBox a {
	z-index: 50;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.tourBox .tourName,
.tourBox p {
	margin: 0;
}
.tourBox p {
	font-size: 0.75em;
	padding: 0 10px 0 0;
	width: 50%;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

.tourBox:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*block3*/
.block3{width:100%; height:auto;}
.picTitle{background:#fff; text-align:center; padding:40px;}
.picTitle img{max-width:100%; max-height:100%;}
.beachImg{background-size: cover; width:100%; min-height:100%; position:relative; padding:7%; padding-top:15%; overflow:hidden; position:relative; overflow: hidden;}
.beachImg:before{background:url(../images/punhu_bg.jpg) no-repeat center top;
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: 0%;
	left: -50%;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 8s;
	-webkit-transform: scale3d(1, 1, 1);
	-moz-transform: scale3d(1, 1, 1);
	-ms-transform: scale3d(1, 1, 1);
	-o-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	pointer-events: none;
}
.beachImg:hover:before{
	-webkit-transform: scale3d(1.02, 1.02, 1) ;
	-moz-transform: scale3d(1.02, 1.02, 1);
	-ms-transform: scale3d(1.02, 1.02, 1);
	-o-transform: scale3d(1.02, 1.02, 1);
	transform: scale3d(1.02, 1.02, 1);
	}

.beachImg .en_word{position:absolute; left:5%; bottom:10%; width:487px; z-index:0;}
.beachImg .en_word img{max-width:100%;}
.beachImg .about_penghu{background:rgba(0, 0, 0, 0.6); float:right; padding:25px; max-width:600px; position:relative; z-index:1;}
.beachImg .about_penghu .about_tit{color:#00d8ff; font-size:2em; font-weight:bold; margin-bottom:20px;}
.beachImg .about_penghu .about_content{color:#fff; line-height:30px; font-size:1.1em;}
.beachImg .about_penghu .about_btn{margin-top:-90px; float:right; width:70%;}
.beachImg .about_penghu .about_btn div{float:left; width:29%; position:relative; margin-left:6%;transition:all ease 0.5s; height:130px;}
.beachImg .about_penghu .about_btn div:first-child{margin-left:0;}
.beachImg .about_penghu .about_btn div span{position:absolute; left:0; top:0; padding:25px 10px; text-align:center; width:100%; text-shadow:0 0 5px rgba(0, 0, 0, 0.6); letter-spacing:2px;}
.beachImg .about_penghu .about_btn div a{color:#fff; font-weight:bold; font-size:1.5em;}
.beachImg .about_penghu .about_btn div svg {fill: currentColor; width:110%;}
.beachImg .about_penghu .about_btn div:nth-of-type(1) { color: #fced00;}
.beachImg .about_penghu .about_btn div:nth-of-type(2) { color: #00deff;}
.beachImg .about_penghu .about_btn div:nth-of-type(3) { color: #ea2578;}
.beachImg .about_penghu .about_btn div:nth-of-type(1):hover{color: #ffc600;}
.beachImg .about_penghu .about_btn div:nth-of-type(2):hover{color: #00aeff;}
.beachImg .about_penghu .about_btn div:nth-of-type(3):hover{color: #d60f63;}

@media only screen 
and (max-width : 1400px) {
.logobox{max-width:530px; width:100%;}
.logobox img{width:400px; top:-100px;}
.logobox .logoname{font-size:1.8em;}
.logobox .slogan{font-size:1.25em;}
.news{padding-left:7%;}
.picmenu .yellowBox{padding:18px 30px;}
.picmenu .yellowBox .big_Word{font-size:1.8em;}
.picmenu .yellowBox .sml_word{color:#b88f00;}

.beachImg .en_word{width:400px;}

}

@media only screen 
and (max-width : 1200px) {
.logo-btm{padding-left:3%; margin-top:-70px;}
.logobox{width:480px; position:relative;}
.logobox img{width:350px; max-width:475px; position:absolute; left:0; top:0px;}
.logobox .logo_words{padding-top:110px;}
.logobox .slogan{margin-top:10px;}
.news .newstitle{margin:1% 0% 0 0;}
.picmenu .yellowBox{padding:15px 25px;}
.picmenu .yellowBox .big_Word{font-size:1.6em;}
.tourBox .tourName{font-size:0.95em;}

.beachImg .about_penghu .about_btn{margin-right:-25px;}
.beachImg .en_word{width:350px;}

}

@media only screen 
and (max-width : 990px) {
.headbottom{height:120px;}
.logo-btm{padding-left:3%; margin-top:-50px;}
.logobox{width:390px; position:relative;}
.logobox img{width:270px; max-width:475px; position:absolute; left:0; top:0px;}
.logobox .logo_words{padding-top:80px;}
.logobox .logoname{font-size:1.5em;}
.logobox .slogan{font-size:1em; margin-top:10px;}
.news{padding:15px; width:45%;}
.news .newstitle{width:60px; height:60px; line-height:60px; margin:4% 0% 0 1%;}
.news a{font-size:0.95em;}
.picatours{width:100%; float:none;}
.tourBox{height:30vw;}
.picmenu .yellowBox{padding:30px 25px;}
.picmenu .yellowBox .big_Word{font-size:2em;}
.picTitle{padding:30px;}

.beachImg{padding:5%; padding-top:15%;}


}

@media only screen 
and (max-width : 768px) {
.logo-btm{width:100%; margin-top:-160px;}
.logobox .logoname{color:#fff; }
.news{float:none; width:100%; padding:15px; padding-left:5%; position:relative}
.news .newstitle{margin:2% 0% 0 1%;}
.picmenu .yellowBox{padding:20px 25px;}
.picmenu .yellowBox .big_Word{font-size:1.6em;}
.picTitle img{max-width:90%;}
.beachImg .about_penghu{margin-top:50px; width:100%; max-width:none;}
.beachImg .en_word{ display:none;}

}

@media only screen 
and (max-width : 640px) {
.picmenu .yellowBox{padding:15px 25px;}
.beachImg .about_penghu .about_btn{margin-top:-80px;}
.beachImg .about_penghu .about_btn div span{padding:20px 10px; max-width:100%;}
}

@media only screen 
and (max-width : 480px) {
.logo-btm{display:none;}
.news .newstitle{margin:0 0; line-height:30px; width:80px; height:30px; border-radius:0px; font-size:0.85em; position:absolute; left:10px; top:-20px;}
.picmenu a{ background:none;}
.picmenu img{display:none;}
.picmenu .yellowBox{padding:30px 25px; width:100%; position:static;}
.picmenu .yellowBox .sml_seemore{display:block;}
.tourBox{width:50%;/* width: -webkit-calc(100% / 2); width: calc(100% / 2);*/ height:49vw;}
.tourBox:last-child{width:100%; /*width: -webkit-calc(100%); width: calc(100%);*/ height:60vw;}

.picTitle{padding:20px;}
.picTitle img{max-width:100%;}

.beachImg .about_penghu{float:none; padding:15px;}
.beachImg .about_penghu .about_tit{font-size:1.6em; margin-bottom:10px;}
.beachImg .about_penghu .about_content{line-height:25px; font-size:0.95em; text-align:justify;}
.beachImg .about_penghu .about_btn{width:100%; float:none;}
}


@media only screen  
and (min-device-width: 320px)  
and (max-width : 480px) and (orientation: portrait) {
.beachImg .about_penghu .about_btn div{width:30%; margin:0 1.5%;}
.beachImg .about_penghu .about_btn div span{/*padding:15px 10px;*/ width:100%; font-size:0.9em;}
}