
.in-title3{  text-align: center; margin: 0 auto; }
.in-title3 p{ display: inline-block; background-color:#1cc3ae;  font: 22px/1.5 "微軟正黑體" ; color: #fff;    margin: 2% 0 0.5% 0 ; padding: 0.2% 1%; border-radius: 50px;}


/* 澎湖旅遊攻略 */

.localview-base { margin:0 auto; max-width: 1500px; text-align: center;  overflow: hidden; }
.localview-base h2 { margin-bottom: 30px; text-align: center;}
.localview-base  .localview-content { margin:0 auto;  width: 95%; max-width: 1400px;}
/*
.localview-base ul{  text-align: center; white-space:nowrap; border-radius: 20px; overflow: visible; }
.localview-base  .localview-content { margin:0 auto; padding-bottom: 20px; width: 95%; max-width: 1400px;overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
*/
.localview-base ul{  text-align: center;border-radius: 20px;  }
.localview-base li { position: relative; display: inline-block; margin: 0.7% 0.8%; letter-spacing: normal; background: #078796; transition: .5s; border-radius:  10px;}

.localview-base .name { margin: 3%;  text-align: center; }
.localview-base .img img,
.localview-base .other img { width: 100%; border-radius: 10px 10px 0 0; }
.localview-base a {cursor: default;}
.localview-base a .name {font: 22px/1 "微軟正黑體"; color: #fff;  }
.localview-base p { position: absolute; top: 0; left: 0; padding: 15px; width: 100%;  height: 87%; font: 16px/1.7 "微軟正黑體"; color: #fff; text-align: left; 
white-space: normal; word-break: break-all;  background: #1374a2e8; z-index: 5; opacity: 0; display: block; transition: .5s; }
.localview-base li:hover p { display: block; opacity: 1;  border-radius: 10px 10px 0 0;} 


.localview-base .localview-content.bigArea{width: 80%;margin: 0 auto;}
.localview-base .localview-content.bigArea ul li{background: #FFF;margin: 0 auto;}
.localview-base .localview-content.bigArea ul li .name {color: #1374a2e8;font: bold 26px/1.4 "微軟正黑體";margin: 0px auto 20px auto;text-align: left;position: relative; z-index: 2;display: inline-block;padding: 0 10px; }
.localview-base .localview-content.bigArea ul li .name:before{content: "";background: #fdfaa5;width: 100%;position: absolute;bottom: 2px;left: 0;height: 50%;z-index:-1;}
.localview-base .localview-content.bigArea ul li:hover p{border-radius: 0;}
.localview-base .localview-content.bigArea p {position: static; opacity: 1;background: #FFF; color: #464646;padding: 0;font: 16px/1.6 "微軟正黑體";}
.localview-base .localview-content.bigArea .img{display: inline-block;width: 40%;}
.localview-base .localview-content.bigArea .img img{border-radius: 10px ;}
.localview-base .localview-content.bigArea .localviewText{display: inline-block;width: 55%;padding: 10px 10px 10px 20px;text-align: left;}





/* 馬祖旅遊攻略 */
.localview-base2 { margin:1.5% auto; max-width: 1500px; text-align: center;  overflow: hidden; }
.localview-base2 h2 { margin-bottom: 30px; text-align: center;}
.localview-base2  .localview-content { margin:0 auto;  width: 95%; max-width: 1400px;}
.localview-base2 ul{  text-align: center;border-radius: 20px;  }
.localview-base2 li { position: relative; display: inline-block; margin: 0.7% 0.8%; letter-spacing: normal; background: #078796; transition: .5s; border-radius:  10px;}
.localview-base2 .name { margin: 3%;  text-align: center; }
.localview-base2 .img img,
.localview-base2 .other img { width: 100%; border-radius: 10px 10px 0 0; }
.localview-base2 a .name {font: 22px/1 "微軟正黑體"; color: #fff;  }
.localview-base2 p { position: absolute; top: 0; left: 0; padding: 15px; width: 100%;  height: 87%; font: 15px/1.5 "微軟正黑體"; color: #fff; text-align: left; 
white-space: normal; word-break: break-all;  background: #1374a2e8; z-index: 5; opacity: 0; display: block; transition: .5s; }
.localview-base2 li:hover p { display: block; opacity: 1;  border-radius: 10px 10px 0 0;} 








@media only screen and (max-width: 1480px) {

.localview-base .localview-content.bigArea{width: 90%;}


}


@media only screen and (max-width: 1300px) {




/* 澎湖旅遊攻略 */
.localview-base {margin: 50px auto;  overflow-x: scroll; overflow-y: hidden; white-space: nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;
    width: auto; }



/* 馬祖旅遊攻略 */
.localview-base2 {margin: 50px auto;  overflow-x: scroll; overflow-y: hidden; white-space: nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;
    width: auto; }



.localview-base.noscroll{ overflow-x:hidden;white-space:normal;}
.localview-base .localview-content.bigArea{width: 100%;}
}




@media only screen and (max-width: 1000px) {
.localview-base .localview-content.bigArea .img{width: 30%;}

.localview-base .localview-content.bigArea .localviewText{width: 65%;}

}








@media only screen and (max-width: 842px) {


/*澎湖旅遊攻略*/
.localview-base p {position: sticky; width: 100%;height: 240px;    opacity: unset;}
.localview-base li { width: 65%;}


/* 馬祖旅遊攻略 */
.localview-base2 p {position: sticky; width: 100%;height: 245px;    opacity: unset;}
.localview-base2 li { width: 65%;}


.localview-base .localview-content.bigArea .img{width: 100%;}

.localview-base .localview-content.bigArea .localviewText{width: 100%;text-align: center;padding: 10px;}


}





/* 平板 */

@media only screen and (max-width: 800px) {

/* 澎湖旅遊攻略  */
.localview-base .localview-content {margin: 0 3%;width: 82%;}

/* 馬祖旅遊攻略 */
.localview-base2 .localview-content {margin: 0 3%;width: 82%;}
.localview-base2 p {position: sticky; width: 100%;height: 280px;    opacity: unset;}

}


@media only screen and (max-width: 719px) {

/* 馬祖旅遊攻略 */
.localview-base2 p {position: sticky; width: 100%;height: 229px; font: 14px/1.4 "微軟正黑體"; padding: 13px;   opacity: unset;}
.localview-base2 a .name {font: 18px/1 "微軟正黑體";}
.localview-base2 li { width: 75%;}

}


@media only screen and (max-width: 620px) {

/* 馬祖旅遊攻略 */
.localview-base2 p {position: sticky; width: 100%;height: 225px; font: 14px/1.4 "微軟正黑體"; padding: 13px;   opacity: unset;}



}
/* 手機 */

@media only screen and (max-width: 560px) {

    .breathe4{ height: 0px; }

/*澎湖旅遊攻略*/
.localview-base p {position: sticky; width: 100%;height: 240px; font: 15px/1.5 "微軟正黑體"; padding: 13px;   opacity: unset;}
.localview-base a .name {font: 18px/1 "微軟正黑體";}
.localview-base li { width: 75%;}

.localview-base .localview-content.bigArea .localviewText p{height: auto;}

/* 馬祖旅遊攻略 */
/*.localview-base2 p {position: sticky; width: 100%;height: 300px; font: 14px/1.4 "微軟正黑體"; padding: 13px;   opacity: unset;}
.localview-base2 a .name {font: 18px/1 "微軟正黑體";}
.localview-base2 li { width: 75%;}

*/

}




@media only screen and (max-width: 420px) {


/*澎湖旅遊攻略*/
.localview-base p {height: 207px; font: 14px/1.5 "微軟正黑體"; padding: 12px; }
.localview-base li { width: 95%;}

/* 馬祖旅遊攻略 */
.localview-base2 p {height: 291px; font: 14px/1.5 "微軟正黑體"; padding: 12px; }
.localview-base2 li { width: 95%;}


.localview-base .localview-content.bigArea p {font: 15px/1.6 "微軟正黑體";}
.localview-base .localview-content.bigArea ul li .name{margin: 10px auto;}

}


@media only screen and (max-width: 376px) {
/* 馬祖旅遊攻略 */
.localview-base2 p {height: 340px; font: 14px/1.5 "微軟正黑體"; padding: 12px; }


}


@media only screen and (max-width: 360px) {


/*澎湖旅遊攻略*/
.localview-base p {height: 240px; font: 14px/1.5 "微軟正黑體"; padding: 12px; }


/* 馬祖旅遊攻略 */
.localview-base2 p {height:360px; font: 14px/1.5 "微軟正黑體"; padding: 12px; }


}

.breathe4{ height: 15px; }
.breathe3{ height: 30px; }

/*normal*/
.breathe{height: 80px; }

@media screen and (max-width:980px) {
    .breathe{height: 65px;}
}



/*normal*/
.breathe2{height: 30px; }

@media screen and (max-width:980px) {
    .breathe2{height: 23px;}
    .breathe4{ height: 0px; }
}






