* { box-sizing: border-box; font-family: Arial, Helvetica,'思源黑體'; transition: 0.3s;}
a{text-decoration: none;}
/*統一*/
:root{
    --p-lineHeight:1.8;
    --p-size:18px;
    --p-spacing:2px;
    --p-weight:320;
}
/*模組調整*/
nav.ph-menu.has-banner,
header.ph-group-title{display: none;}
a.ph-group-content-text-price{font-weight: 550;}
a.ph-group-content-text-price span{font-size: 22px; vertical-align: bottom; font-weight: 300;}
/*版頭*/
header.header h1{display:none;}
header.header{height:626px; background:url('../images/header.jpg') top center no-repeat; margin-bottom: 30px;}
@media screen and (max-width:1024px){
    header.header{height: auto;}
    header.header h1{display: block;}
    header.header h1 img{width: 100%;}
}
/*nav*/
nav.nav-bar{position: sticky;position: -webkit-sticky; top: 0px; left: 0px; text-align: center; z-index: 10;}
nav.nav-bar ul{max-width: 1400px; width: 100%; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1); overflow: hidden;
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed;
}
nav.nav-bar ul li{position:relative;display: inline-block; width: 14.2857%; color: #1aa8c2; font-size:24px; font-weight: 400; cursor: pointer; padding: 18px 0 28px 0; letter-spacing: 1.3px;}
nav.nav-bar ul li.on,
nav.nav-bar ul li:hover{background: #1aa8c2; color: #fff;}
nav.nav-bar ul li::before{position:absolute;content:''; width: 100%; height:6px;left: 0px; bottom: 19px; background:center top / contain no-repeat url('../images/wave-1.png') ; transition: 0.3s; }
nav.nav-bar ul li.medium::before{background:center top / contain no-repeat url('../images/wave-2.png'); height:8px; bottom: 16px;}
nav.nav-bar ul li.large::before{background:center top / contain no-repeat url('../images/wave-3.png'); height:8px; bottom: 16px;}
nav.nav-bar ul li.on::before,
nav.nav-bar ul li:hover::before{background:center top / contain no-repeat url('../images/h-wave-1.png');}
nav.nav-bar ul li.medium:hover::before,
nav.nav-bar ul li.medium.on::before{background:center top / contain no-repeat url('../images/h-wave-2.png'); height:8px; bottom: 16px;}
nav.nav-bar ul li.large:hover::before,
nav.nav-bar ul li.large.on::before{background:center top / contain no-repeat url('../images/h-wave-3.png'); height:8px; bottom: 16px;}
@media screen and (max-width:1200px){
    nav.nav-bar{padding: 0 15px;}
    nav.nav-bar ul li{font-size: 20px;}
    nav.nav-bar ul li::before{transform: scale(0.8);}
}
@media screen and (max-width:940px){
    nav.nav-bar ul{border-radius: 0; border: #1aa8c2 1px solid; box-shadow: none; }
    nav.nav-bar ul li{font-size: 16px;padding: 20px 0;}
    nav.nav-bar ul li::before{display: none;}
}
@media screen and (max-width:768px){
    nav.nav-bar{padding: 0px; overflow-x: auto;}
    nav.nav-bar ul{white-space: nowrap; overflow-x: auto;}
    nav.nav-bar ul li{width: 110px; }
}
@media screen and (max-width:425px){
    nav.nav-bar ul li{font-size: 15px; width: 105px; padding: 15px 0; }
}
/*共用*/
.content-pannel{text-align: center; background: url('../images/content-bg.jpg') bottom center no-repeat; padding: 100px 0 150px 0;}
.wrap-trip,.wrap-hotel,.wrap-experience,.wrap-hotspot,.wrap-about-guam{display:none;}
.ph-group-content-photo a img{width: 100%;}
h2{position:relative; display: inline-block; font-size:34px; color: #232323; margin: 0 auto 40px auto;letter-spacing: 2px;}
h2::before{position: absolute; content: ''; width: 46px; height: 46px; left: -55px; top: calc(50% - 23px);background: url('../images/l-h2.png') center center no-repeat;}
h2::after{position: absolute; content: ''; width: 46px; height: 46px; right: -55px; top: calc(50% - 23px);}
.wrap-trip h2::after{background: url('../images/r-h2-1.png') center center no-repeat;}
.wrap-hotel h2::after{width: 56px; height: 38px; right: -62px; top: calc(50% - 19px); background: url('../images/r-h2-2.png') center center no-repeat;}
.wrap-experience h2::after{width: 45px; height: 41px; right: -55px; top: calc(50% - 20px); background: url('../images/r-h2-3.png') center center no-repeat;}
.wrap-hotspot h2::after{width: 36px; height: 37px; right: -50px; top: calc(50% - 18px); background: url('../images/r-h2-4.png') center center no-repeat;}
.wrap-about-guam h2::after{width: 35px; height: 33px; right: -46px; top: calc(50% - 16.5px); background: url('../images/r-h2-5.png') center center no-repeat;}
@media screen and (max-width:1200px){
    .content-pannel{padding: 60px 0px 120px 0px;}
    h2{font-size: 30px;}
}
@media screen and (max-width:425px){
    .content-pannel{padding: 40px 0px 40px 0px;}
    h2{font-size: 26px; margin-bottom: 20px;}
    h2::before,h2::after{transform: scale(0.85);}
}

/*機加酒*/
.wrap-trip.on{display: block;}
.wrap-trip article.ph{max-width: 1400px; margin: 0 auto;}
.wrap-trip article.ph-group-content{position: relative; display: inline-block; width: 32%; background: #ffffff; padding: 15px 15px 48px 15px; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);}
.wrap-trip article.ph-group-content:hover{transform: translateY(12px); transition:0.3s;} 
.wrap-trip section.ph-group{display: flex; flex-wrap: wrap; justify-content: space-between;}
.wrap-trip a.ph-group-content-text-name{display: inline-block; width: 100%; font-size: 24px; font-weight: 550;line-height: 1.25; text-align: left; color: #1aa8c2; padding: 12px 0 8px 0; border-bottom: #1aa8c2 1px solid; margin-bottom: 10px;}
.wrap-trip .ph-group-content-text-sale{
    background: #fffcaf;
    padding: 4px 8px;
    font-size: 16px;
    color: #1353b8;
    
}
.wrap-trip .ph-group-content-text-sale a{
    font-size: 16px;
    font-weight: 500;
    color: #1353b8;
}

.wrap-trip p.ph-group-content-text-detail{display: inline-block; width: 100%; color: #232323; font-size: var(--p-size); line-height: var(--p-lineHeight); letter-spacing: var(--p-spacing); font-weight: var(--p-weight); text-align: left;padding-bottom: 10px;}
.wrap-trip a.ph-group-content-text-price{position:absolute; display:inline-block; width: 100%; bottom: 0px; left: 0px; font-size:28px; color: #fffcaf; padding: 10px 0; background: #1aa8c2;}
@media screen and (max-width:1024px){
    .wrap-trip a.ph-group-content-text-name{font-size: 20px;}
    .wrap-trip a.ph-group-content-text-price{font-size: 24px;}
}
@media screen and (max-width:870px){
    .wrap-trip article.ph-group-content{width: 100%; margin:0 15px 40px 15px;}
}
/*飯店、景點、體驗*/
.wrap-hotel.on,
.wrap-experience.on,
.wrap-hotspot.on{display:block;}
.wrap-hotel,
.wrap-experience,
.wrap-hotspot{max-width: 1400px; margin: 0 auto;}
.wrap-hotel .ph-group-content,
.wrap-experience .ph-group-content,
.wrap-hotspot .ph-group-content{display: flex; flex-wrap:wrap; padding: 60px 100px 80px 100px; 
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed;
}
.wrap-hotel .ph-group-content:hover .ph-group-content-photo img,
.wrap-experience .ph-group-content:hover .ph-group-content-photo img,
.wrap-hotspot .ph-group-content:hover .ph-group-content-photo img{transform: scale(1.15);transition:1.8s;}
.wrap-hotel .ph-group-content-text-name:hover,
.wrap-experience .ph-group-content-text-name:hover,
.wrap-hotspot .ph-group-content-text-name:hover{color: #fffcaf; transition:0.3s;}
.wrap-hotel .ph-group-content:nth-child(even){flex-direction: row-reverse; background: url('../images/stripe.jpg') top left repeat; }
.wrap-hotel .ph-group-content-photo,
.wrap-hotspot .ph-group-content-photo,
.wrap-experience .ph-group-content-photo{display: inline-block; width: 40%; overflow: hidden;}
.wrap-hotel .ph-group-content-text,
.wrap-experience .ph-group-content-text,
.wrap-hotspot .ph-group-content-text{display: inline-block; width: 60%;  border: #1aa8c2 solid 1px; background: #fff;  letter-spacing: var(--p-spacing);}
.wrap-hotel a.ph-group-content-text-name,
.wrap-experience a.ph-group-content-text-name,
.wrap-hotspot a.ph-group-content-text-name{display:block; font-size: 27px; color: #fff; font-weight:600; text-align: left; letter-spacing: 1.3px; line-height: 1.4; background: #1aa8c2; padding: 15px 20px;}
.wrap-hotel p.ph-group-content-text-detail,
.wrap-experience p.ph-group-content-text-detail,
.wrap-hotspot p.ph-group-content-text-detail{text-align: left;font-size: var(--p-size); line-height: var(--p-lineHeight); letter-spacing: var(--p-spacing); font-weight: var(--p-weight); color: #232323; padding: 20px;}
.ph-group-content-text-detail a{ color: #232323; }

.wrap-experience .ph-group-content:nth-child(odd),
.wrap-hotspot .ph-group-content:nth-child(odd){flex-direction: row-reverse; background: url('../images/stripe.jpg') top left repeat; }
@media screen and (max-width: 1400px){
    .wrap-hotel a.ph-group-content-text-name, .wrap-experience a.ph-group-content-text-name, .wrap-hotspot a.ph-group-content-text-name{
        font-size: 24px;
    }
    .wrap-hotel p.ph-group-content-text-detail, .wrap-experience p.ph-group-content-text-detail, .wrap-hotspot p.ph-group-content-text-detail{
        font-size: 20px;
    }
}
@media screen and (max-width: 1024px){
    .wrap-hotel .ph-group-content-photo, .wrap-hotspot .ph-group-content-photo, .wrap-experience .ph-group-content-photo{
        width: 100%;
    }
    .wrap-hotel .ph-group-content-text, .wrap-experience .ph-group-content-text, .wrap-hotspot .ph-group-content-text{
        width: 100%;
    }
    .wrap-hotel .ph-group-content:nth-child(1){padding-top: 10px;}
    .wrap-hotel .ph-group-content, .wrap-experience .ph-group-content, .wrap-hotspot .ph-group-content{
        padding: 60px 15px;
    }
}
@media screen and (max-width: 425px){
    .wrap-hotel a.ph-group-content-text-name, .wrap-experience a.ph-group-content-text-name, .wrap-hotspot a.ph-group-content-text-name{
        font-size: 22px; padding: 10px;
    }
    .wrap-hotel p.ph-group-content-text-detail, .wrap-experience p.ph-group-content-text-detail, .wrap-hotspot p.ph-group-content-text-detail{
        font-size: 16px; padding: 10px;
    }
}
/*關於關島*/
.wrap-about-guam.on{display: block;}
.wrap-about-guam{max-width: 1400px; text-align:center; margin: 0 auto;}
.wrap-about-guam>section{margin: 60px 0;}
.wrap-about-guam .ph-group-content{display: inline-block; max-width: 800px;  }
.wrap-about-guam h3{display: inline-block; font-size: 26px; color: #fff;letter-spacing: 1.3px; font-weight: 500; background: #1aa8c2; padding: 10px 20px; margin: 20px 0; border-radius: 99rem; }
.wrap-about-guam .ph-group-content{background: #fff; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);}
.wrap-about-guam a.ph-group-content-text-name{display:inline-block; font-size: 26px; color: #1aa8c2; font-weight:400; border-bottom: #1aa8c2 solid 2px; padding-bottom: 4px; margin-bottom: 15px;}
.wrap-about-guam p.ph-group-content-text-detail{font-size: 20px; color: #232323; line-height: 2; text-align: left; letter-spacing: var(--p-spacing);}

.wrap-about-guam .ph-group-content-text{padding: 20px; }
.wrap-about-guam section.about-content{margin-top:0px;}
.wrap-about-guam section.film-content .ph-group-content-photo{position:relative;background: #000;}
.wrap-about-guam section.film-content .ph-group-content-photo::before{content:"";position: absolute; width: 100%; height: 130px; left: 0px; top: calc(50% - 65px); background: center / contain no-repeat url('../images/play.png'); z-index:5; pointer-events: none; opacity:0.7; transition: 0.3s;}
.wrap-about-guam section.film-content .ph-group-content-photo:hover::before{transform: scale(1.1); transition: 0.3s; opacity: 1;}
.wrap-about-guam section.film-content .ph-group-content-photo img{opacity: 0.7;}
.wrap-about-guam section.film-content{ background: url('../images/stripe.jpg') top left repeat; padding: 35px 0 80px 0;}
.wrap-about-guam section.blog-content .ph-group-content-text{position:relative; padding-bottom: 40px;}
.wrap-about-guam section.film-content .ph-group-content-text-name,
.wrap-about-guam section.blog-content .ph-group-content-text-name{display: none;}
.wrap-about-guam section.blog-content .read{position: absolute; right: 15px; bottom: 15px; color: #1aa8c2; font-size: 20px; font-weight: 500;}
@media screen and (max-width:1024px){
    .wrap-about-guam h3{font-size: 22px; margin-top: 0;}
    .wrap-about-guam section.about-content,.wrap-about-guam section.film-content,.wrap-about-guam section.blog-content{padding: 25px 15px 40px 15px;}
    .wrap-about-guam p.ph-group-content-text-detail{font-size: 16px;}
    .wrap-about-guam>section{margin: 20px 0 30px 0;}
}
@media screen and (max-width:768px){
    .wrap-about-guam section.film-content .ph-group-content-photo::before{height: 100px; top: calc(50% - 50px);}
}
@media screen and (max-width:425px){
    .wrap-about-guam h3{font-size: 20px; font-weight: 400;}
    .wrap-about-guam a.ph-group-content-text-name{font-size: 21px; border-bottom-width: 2px;}
}
@media screen and (max-width:320px){
    .wrap-about-guam p.ph-group-content-text-detail{font-size: 14px;}
}