* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	overflow: auto!important;
	background:white;
    font-family:"Noto Sans CJK TC", "Microsoft JhengHei", Arial, Verdana, Helvetica, sans-serif;
}

#Exposition {
	width:100%;
	min-width:320px;
	max-width:2560px;
	margin:0 auto;
	overflow:hidden;
    font-size:18px;
}

#Exposition img{
	width:100%;
}

#Exposition a{ 
    text-decoration:none
}


#Exposition a .circle{
	width:3.8%;
	max-width:66px;
	height:auto;
	position:fixed;
	right:1.2%;
	bottom:20%;
	z-index:500;  
}

#Exposition a:hover .circle{  
	/*animation:circle 0.7s infinite;*/
}

@keyframes circle{
    0%   {right:2%;}
    50%  {right:1.5%;}
    100% {right:2%;}
}

#Exposition .main-top {
    position:relative;
    width:100%;
    padding:0;
    max-height:1100px;
    margin-bottom:-6px;
}

#Exposition .main-top h1,h2 {
	display:block;
	text-indent:-9999px;
	height:0;
}

#Exposition .main-top .logo, #Exposition .main-top .logo-s{
    position:absolute;
    width:100%;  
    animation:logo 0.5s ease-in;
}

#Exposition .main-top img.topimg-s, #Exposition .main-top .logo-s{display:none;}

@keyframes logo{
    0% {
        opacity: 0;
        -webkit-transform:scale(150%);
        -ms-transform:scale(150%);
        transform:scale(150%);
  }
    
 75% {
        -webkit-transform:scale(100%);
        -ms-transform:scale(100%);
        transform:scale(100%);
  }
    
  90% {
         -webkit-transform:scale(110%);
         -ms-transform:scale(110%);
         transform:scale(110%);
   }
    
  100% {
        -webkit-transform:scale(100%);
        -ms-transform:scale(100%);
        transform:scale(100%);
  }
}

/* ==================  Button Star =================== */

#Exposition .sticky {
    z-index:9999;
    position:fixed;
    top:50px;
    left:0;
}

#Exposition .nav{    
    width:100%;
    line-height:3.5;    
    padding:.1% 0 0 0;
    background:#2759a7;
    margin:0 auto;
    text-align:center;
} 

#Exposition .nav ul{
    display:block;
}

#Exposition .nav ul li{  
    z-index:9999;
	cursor:pointer; 
    display:inline-flex;
    justify-content:center;
    align-items:center; 
    
    position:relative;
    overflow:hidden;  
    transition:0.5s;

    width:calc(100% / 4.2);
    border-top:0;
    border-bottom:0;
    border-left:0;
    border-right:3px solid #71c1ff;
    margin-left:-4px;

    font-size:2.4em; 
    text-align:center;
    letter-spacing:0.1em;
    color:white;        
    --c:#ed7cae;
    text-transform:uppercase;
}
#Exposition .nav ul li br{
    display:none
}

#Exposition .nav ul li.t2{
    --c:#ed7cae;
    color:rgb(255, 255, 255);
    border-right:3px solid #71c1ff;
}

#Exposition .nav ul li.t3{
    --c:#ed7cae;
    color:white;
    border-right:3px solid #71c1ff;
}

#Exposition .nav ul li:first-child{
    border-left:3px solid #71c1ff;
}

#Exposition .nav ul li span {
    position:absolute;
    width:25%;
    height:100%;
    background-color:var(--c);
    transform:translateY(150%);
    border-radius:50%;
    left:calc((var(--n) - 1) * 25%);
    transition:0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index:-1;
}

#Exposition .nav ul li:hover {
    color:#363a3a;
}

#Exposition .nav ul li:hover span {
    transform: translateY(0) scale(4);
}

#Exposition .nav ul li span:nth-child(1) {
    --n: 1;
}

#Exposition .nav ul li span:nth-child(2) {
    --n: 2;
}

#Exposition .nav ul li span:nth-child(3) {
    --n: 3;
}

#Exposition .nav ul li span:nth-child(4) {
    --n: 4;
}

/**nav置頂轉換樣式Start**/
#Exposition .nav.up{ 
    padding-top:0;
} 
#Exposition .nav.up ul li{
    line-height:2.5;
}

/**行程往下滑**/

#Exposition .main .reDown{
    padding-top:8%;
}
#Exposition .main .reDown2{
    padding-top:8%;
}
#Exposition .main .reDown3{
    padding-top:8%;
}


/* ================== button END =================== */

#Exposition .main .tours h3 {
	width:100%;
	height:0;
	text-indent: -9999px;
}

#Exposition .main .bank h4 {
	font-weight: bold !important; 
}

#Exposition .main .pro1_txt .add h4 {
	font-weight: bold !important; 
}

#Exposition .main{
	width:100%;
    background:url(Bg_007.webp) 61.5% 65.8% no-repeat, url(Bg_001.webp) top left no-repeat, url(Bg_002.webp) top right no-repeat, url(Bg_005.webp) bottom left no-repeat, url(Bg_006.webp) bottom right no-repeat, url(Bg_003.webp) 100% 33% no-repeat, url(Bg_004.webp) 0% 67.5% no-repeat;
    background-size:36.36%, 50%, 50%, 41.4%, 58.6%, 48%, 50%;
    padding-top: 5%;
}

#Exposition .main .tours{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
	width:100%;
}

#Exposition .main .tours .content{
    flex:none;
	width:50%;
}

#Exposition .main .tours .content img.photo{
    width:96.5%;
    margin-top:8%;
    margin-left:19.3%;
}

#Exposition .main .tours .content img.roulette{
    width:75.5%;
    margin-top:5%;
    margin-left:-24.5%;
}

#Exposition .main .tours .content img.coffee{
    width:88.67%;
    margin-left:-24%;
    margin-top:5%;
    /*margin-top:12%;
    margin-left:20%;*/
}

/* ==================== 文字 ==================== */

/*------------202505修改單一區塊-------------*/


#Exposition .main .pro1_box {
    flex:none;
	width:100%;
    margin-left:10%;
}

#Exposition .main .pro1_box .title {
    flex:none;
    width:40%;
    margin-left:25%;
}

#Exposition .main .pro1_box .photo {
    flex:none;
    margin-left: 3%;
    width:40%;
    height: 100%;   
}
#Exposition .main .pro1_box .photo2 {
    flex:none;
    margin-left: 3%;
    width:50%;
    height: 100%;
}
#Exposition .main .pro1_box .photo-s {
    display: none;    
}

#Exposition .main .pro1_box.blue {
    width: 100%;
    margin-top:1%;
    margin-left:20%;
}

#Exposition .main .pro1_txt {
    display: flex;
    flex-wrap: wrap;
    width:80%;
    margin:2% 6%;
    font-size:2em;
    font-weight:400;
    line-height:2.1;
    color:#000000;
    text-align:justify;
    background-size:6%;
    text-decoration:underline 1px gray dashed;
    text-underline-offset:60%;
    letter-spacing:-1px;
    
}

#Exposition .main .pro1_txt ul{/*disc*/
    list-style:outside circle;
    width: 45%; 
    margin-left: 1%; 
      
}

#Exposition .main .pro1_txt .add{
    list-style-type:none;
    font-weight: bold;
    font-size:1.2em; 
    margin-left: 1%;
    margin-top: 5%;
} 

#Exposition .main .pro1_txt ul li{
    margin-left:6.5%;
}

#Exposition .main .pro1_txt ul li span, #Exposition .main .pro_txt ol.orange li span{
    background:linear-gradient(to bottom, white 0, white 60%, #fffc9b 61%, #fffc9b 100%)
}

#Exposition .main .pro1_txt ul li span.noYellow{
    font-size:0.6em; 
    background:none;
}

#Exposition .main .pro1_txt ul .t {
    list-style-type:none;
    position:relative;
    z-index:0;
    font-size:0.7em;   
    letter-spacing:0;
}

#Exposition .main .pro1_txt ol{
    margin-left:0.3em;  
    list-style:none outside;
    counter-reset:li;
} 

#Exposition .main .pro1_txt ol li {
    position:relative;
    z-index:0;
    font-size:0.8em;
    padding-left:1.2em;
    letter-spacing:0;
}

#Exposition .main .pro1_txt ol li::before{
    counter-increment:li;
    content:counter(li);
    position:absolute;
    left:0;
    top:1.1em;
    display:block;
    width:2em;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color:#3da5e1;
    font-size:0.5em;
    font-weight:600;
    color:#fff;
    text-align:center;
}
#Exposition .main .pro2_txt { 
    display: flex;
    flex-wrap: wrap;
    width:80%;
    margin:2% 6%;
    font-size:2em;
    font-weight:400;
    line-height:2.1;
    color:#000000;
    text-align:justify;
    background-size:6%;
    text-decoration:underline 1px gray dashed;
    text-underline-offset:60%;
    letter-spacing:-1px;    
}

#Exposition .main .pro2_txt ul{/*disc*/
    list-style:outside circle;
}
#Exposition .main .pro2_txt .bank{
    list-style-type:none;
    font-size:1.2em;
    font-weight: bold; 
    margin-left: -3%;
    margin-top: 5%;
}

#Exposition .main .pro2_txt .bank h4{
    font-weight: bold;
}

#Exposition .main .pro2_txt .bank2{
    list-style-type:none;
    font-size:1.2em; 
    text-align: center;
    text-decoration: none；
    margin-left: -3%;
    margin-top: 5%;
    font-weight: bold;
}

#Exposition .main .pro2_txt .gift1 {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 6%;
    margin-bottom: 2%;
}

#Exposition .main .pro2_txt .gift1 img {
    width:24%;      
   
}
#Exposition .main .pro2_txt .gift2 {
    width:90%; 
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2%;
    margin-left: 6%;
}

#Exposition .main .pro2_txt .gift2 .half {
    width:65%;        
}
 
#Exposition .main .pro2_txt .gift2 img {
    width:25%;
    margin-left: 5%;
}
#Exposition .main .pro2_txt ul li{
    margin-right: 0%;   
}


#Exposition .main .pro2_txt ul li span, #Exposition .main .pro_txt ol.orange li span{
    background:linear-gradient(to bottom, white 0, white 60%, #fffc9b 61%, #fffc9b 100%)
}

#Exposition .main .pro2_txt ul li span.noYellow{
    font-size:0.6em; 
    background:none;
}

#Exposition .main .pro2_txt ul .t {
    list-style-type:none;
    position:relative;
    z-index:0;
    font-size:0.8em;   
    letter-spacing:0;
     
}
/*------------202505-END-------------*/

#Exposition .main .pro_box {
    flex:none;
	width:50%;
    margin-left:6%;
}

#Exposition .main .pro_box.blue {
    margin-left:25.7%;
    margin-top:1%;
}

#Exposition .main .pro_box .pro_title{   
    margin-top:9%;
    width:73.5%;
}

#Exposition .main .pro_box .pro_title.blue{   
    margin-top:5%;
    width:73.5%;
}  

#Exposition .main .pro_box .pro_title.orage{   
    margin-top:14.85%;
    width:73.5%;
}  

#Exposition .main .pro_txt { 
    width:58%;
    margin:2% 6%;
    font-size:2.35em;
    font-weight:400;
    line-height:2.1;
    color:#000000;
    text-align:justify;
    background-size:6%;
    text-decoration:underline 1px gray dashed;
    text-underline-offset:60%;
    letter-spacing:-1px;
}

#Exposition .main .pro_txt ul{/*disc*/
    list-style:outside circle;
} 
#Exposition .main .pro_txt ul li{
    margin-left:6.5%;
}
#Exposition .main .pro_txt ul li span, #Exposition .main .pro_txt ol.orange li span{
    background:linear-gradient(to bottom, white 0, white 60%, #fffc9b 61%, #fffc9b 100%)
}

#Exposition .main .pro_txt ul li span.noYellow{
    font-size:0.6em; 
    background:none;
}

#Exposition .main .pro_txt ul .t {
    list-style-type:none;
    position:relative;
    z-index:0;
    font-size:0.8em;
    margin-left:2em;
    letter-spacing:0;
     
}

#Exposition .main .pro_txt ol{
    margin-left:1.2em;  
    list-style:none outside;
    counter-reset:li;
} 

#Exposition .main .pro_txt ol li {
    position:relative;
    z-index:0;
    font-size:0.8em;
    padding-left:1.2em;
    letter-spacing:0;
}

#Exposition .main .pro_txt ol li::before{
    counter-increment:li;
    content:counter(li);
    position:absolute;
    left:0;
    top:1.1em;
    display:block;
    width:2em;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color:#3da5e1;
    font-size:0.5em;
    font-weight:600;
    color:#fff;
    text-align:center;
}

#Exposition .main .pro_txt ol.orange{
    margin-left:0; 
}

#Exposition .main .pro_txt ol.orange li::before {
    background-color:#ff8932;
}

#Exposition .main .pro_txt ol.orange li span{
    background:linear-gradient(to bottom, white 0, white 60%, #9bddff 61%, #9bddff 100%)
}
    

/* ==================== button ==================== */

#Exposition a .icon {    
    width:80%;  
    line-height:2.5;
    border-radius:50px;
    margin:5% auto;
    background:#ec88a5;     
    
    background:url("button.svg") 80% center no-repeat, #ec88a5;
    background-size:10%;
    font-size:1em;
    font-weight:200;
    color:white;
    text-align:center;
    text-decoration:underline 1px #ec88a5 dashed;
}

#Exposition a .icon.box2 {   
    background:url("button.svg") 80% center no-repeat, #3da5e1; 
    background-size:10%; 
    text-decoration:underline 1px #3da5e1 dashed;
}

#Exposition a .icon.box3 {   
    background:url("button.svg") 85% center no-repeat, #ff8932; 
    background-size:10%; 
    text-decoration:underline 1px #ff8932 dashed;
}

#Exposition a:hover .icon {
    position: relative;
	animation:icon 0.7s infinite;
}
@keyframes icon{
        0%   {left:0;}
        50%  {left:15px;}
        100% {left:0;}
}

@media screen and (max-width: 1920px) {   
    #Exposition a .circle{right:1.5%}
    #Exposition{font-size:14px;} 
}

@media screen and (max-width:1440px) {  
}

@media screen and (max-width: 1280px) {
    #Exposition a .circle{width:5%;right:2%}
    #Exposition{font-size:12px;} 
    #Exposition .nav{padding:0.2% 0 0 0;}
    #Exposition .nav ul li{  
        width:calc(100% / 3);
    }
}

/*1080x2340-iphone12*/
@media screen and (max-width:1080px) {
    #Exposition a .circle{width:7%;}
    #Exposition .main .pro1_box .title {
        flex:none;
        width:50%;
        margin-left:20%;
    }
    
    #Exposition .nav ul li{  
        width:calc(100% / 3);
    }
}

@media screen and (max-width:1024px) {
    #Exposition a .circle{width:7%;}

    #Exposition .nav ul li{  
        width:calc(100% / 3);
    }

    #Exposition .main .pro1_box .title {
        flex:none;
        width:50%;
        margin-left:20%;
    }

    #Exposition .main .pro2_txt .gift1 {
        width:95%;
    }    
    #Exposition .main .pro2_txt .gift1 img {
        width:48%;
        margin-right: 2%;
    }
    #Exposition .main .pro2_txt .gift2 .half {
    width:50%;        
    }
 
    #Exposition .main .pro2_txt .gift2 img {
        width:45%;
        margin-left: 5%;
    }
}

@media screen and (max-width:880px) {
    #Exposition a .circle{width:7%;}
    #Exposition .main .pro1_box .title {
        flex:none;
        width:50%;
        margin-left:20%;
    }
    
    #Exposition .nav ul li{  
        width:calc(100% / 3);
    }
    #Exposition .nav ul li, #Exposition .nav.up ul li{
        line-height:1.2;height:70px;font-size:1.8em;}

    #Exposition .nav ul li br{display:block; line-height:1.5;}
}

/*828x1792-iphone11*/
@media screen and (max-width:828px) {  
    #Exposition a .circle{width:6%;right:3%;}
    #Exposition .main{
        width:100%;
        background:url(Bg_007.webp) -28% 48% no-repeat, url(Bg_001.webp) top left no-repeat, url(Bg_002.webp) top right no-repeat, url(Bg_005.webp) bottom left no-repeat, url(Bg_006.webp) bottom right no-repeat, url(Bg_003.webp) 110% 31% no-repeat, url(Bg_004.webp) 0 69% no-repeat;
        background-size:66.36%, 70%, 70%, 60%, 60%, 80%, 60%;
        padding-top: 8%;
    }

    #Exposition a .icon {font-weight:500;}

    #Exposition .nav ul li{width:calc(100% / 3);}
    #Exposition .nav ul li br{display:block; line-height:1.5;}
    #Exposition .nav ul li:first-child{border-left:0;}
    #Exposition .nav ul li:last-child{border-right:0;}

    #Exposition .main-top img.topimg, #Exposition .main-top .logo{display:none;}
    #Exposition .main-top img.topimg-s, #Exposition .main-top .logo-s{display:block;text-align:center;}
    #Exposition .main-top .logo-s img{width:100%;margin-top:0.5%;}
    #Exposition .main .tours{flex-direction:column;margin-bottom:0%;}
    #Exposition .main .tours.tours_blue{flex-direction:column-reverse}
    #Exposition .main .tours:last-child{margin-bottom:0}
    #Exposition .main .tours .content{width:80%;margin:5% auto 0 auto;text-align:center;}   


        /**行程往下滑**/
    
    #Exposition .main .reDown{
         padding-top:23%;
    }
    #Exposition .main .reDown2{
        padding-top:25%;
    }
    #Exposition .main .reDown3{
        padding-top:23%;
    }


    #Exposition .main .pro_box, #Exposition .main .pro_box.blue, #Exposition .main .pro_box.orage{width:70%;margin:0 auto;text-align:center;}
    #Exposition .main .pro1_box .title {
        flex:none;
        width:95%;
        margin-left:-1%;
    }

    #Exposition .main .pro1_box .photo2 {
        flex:none;
        margin-left: 3%;
        width:95%;
    }
    #Exposition .main .pro1_txt ul{/*disc*/
         width: 100%;
    }
    #Exposition .main .pro2_txt .gift2 .half {
    width:100%;        
    }
    #Exposition .main .pro1_txt .add{/*disc*/
        list-style: none;
        width: 90%;
        margin-left: 2%;        
    }
    #Exposition .main .pro2_txt .gift1 {
        width:100%;
    }    
    #Exposition .main .pro2_txt .gift1 img {
        width:95%;
    }
    #Exposition .main .pro2_txt .gift2 {
        width:95%;
        margin-left:5% ;
    }
    #Exposition .main .pro2_txt .gift2 img {
    width:90%;
    margin-left: 2%;
    }
    #Exposition .main .pro_box.blue {margin-top:8%;}
    #Exposition .main .tours .content  #Exposition .main .tours .content img.roulette, #Exposition .main .tours .content img.coffee{width:100%;margin:0 auto;}
    #Exposition .main .tours .content img.coffee{width:90%;}
    #Exposition .main .tours .content {width:110%; margin-left:-5%;}
    #Exposition .main .pro1_box .photo {display: none; }
    #Exposition .main .pro1_box .photo-s {display:block; text-align:center; }
    #Exposition .main .pro_box .pro_title, #Exposition .main .pro_box .pro_title.blue, #Exposition .main .pro_box .pro_title.orage{width:100%; margin:0 auto;}
    #Exposition .main .pro_txt{width:90%; font-weight:800;}  
}

@media screen and (max-width:480px) {  
    #Exposition a .circle{width:7%;right:3%;}
    #Exposition{font-size:11px;}     

    #Exposition .nav{padding:1.2% 0 0 0;}
    #Exposition .nav ul li, #Exposition .nav.up ul li{line-height:1.2;height:65px;font-size:1.8em;}

    #Exposition .nav ul li br{display:block; line-height:1.5;}

    #Exposition .nav ul li.t2{border-bottom:1px solid var(--c);}
    #Exposition .nav ul li.t3{border-bottom:1px solid var(--c);}
    #Exposition .nav ul li:last-child{border-bottom:0}

    #Exposition a .icon, #Exposition a .icon.box3{width:80%;letter-spacing:.05em;line-height:2;background:#ec88a5;text-decoration:underline 1px #fff dashed;}
    #Exposition a .icon.box3{background:#ff8932;}
    #Exposition .main .tours .content, #Exposition .main .pro_box, #Exposition .main .pro_box.blue, #Exposition .main .pro_box.orage{width:90%;text-align:center;} 
}
/**iPhone 15 Pro Max尺寸430 x 932 企劃主管手機尺寸**/
@media screen and (max-width:430px) {
    #Exposition a .circle{width:10%;right:4.5%;bottom:12%}  
    #Exposition{font-size:12px;} 
    #Exposition a .icon {width:80%;} 
    #Exposition .main{
        width:100%;
        background:url(Bg_007.webp) -20% 48% no-repeat, url(Bg_001.webp) -10% -2% no-repeat, url(Bg_002.webp) top right no-repeat, url(Bg_005.webp) bottom left no-repeat, url(Bg_006.webp) bottom right no-repeat, url(Bg_003.webp) 110% 32% no-repeat, url(Bg_004.webp) 0 69% no-repeat;
        background-size:62%, 80%, 80%, 60%, 60%, 80%, 60%;
    }
    #Exposition .main .pro_txt{font-weight:500;}
}
/**iPhone 15 Pro Max尺寸393 x 852**/
@media screen and (max-width:393px) {
    #Exposition{font-size:8px;} 
}
/**sony尺寸320 x 568 手機尺寸**/
@media screen and (max-width:320px) {
    #Exposition a .circle{width:14%;right:5%;}  
    #Exposition{font-size:6px;} 
}