﻿html,body {  color: rgba( 0, 40, 35, .85);  }
html,body,footer { overflow-x: hidden!important; }
body { font: normal 1.1rem 'Microsoft JhengHei','LiGothicMed','Century Gothic','Microsoft YaHei',Verdana; padding-top: 1rem; padding: 0;margin: 0;}
/*
A:visited{color: #517199; text-decoration: none}
A:active{color: #2989ff}
A:hover {color: #96c5ff;text-decoration: underline}
A:link{color: #2989ff; text-decoration: none}
*/

a { text-decoration: none; transition:color .5s;word-wrap:break-word; }
a:hover {color: #bc8423;text-decoration: none;}
p { line-height: 3rem; }
.btn {
    font-weight: 600;
    color: #ffffff;
    line-height: 2;
    background-color: #002823;
}

        
/* 1. 基本狀態 */
.btn-custom {
background-color: #002823; /* 自訂背景顏色 */
border-color: #002823;     /* 自訂邊框顏色 */
color: #fff;               /* 文字顏色 */
}

/* 2. 滑鼠懸停狀態 (Hover) */
.btn-custom:hover {
    background-color: #00494c; /* 懸停時稍微深一點 */
    border-color: #00494c;
    color: #fff;
} 

.ytvideo { cursor: pointer; }

.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, .5);
    border-color: transparent;
}

@media (max-width:767px) {
    .bg_GMA {
        background: #010a10 url(../images/share/bg_00.webp) no-repeat left top;
        background-size: 130%;
    }
}

@media (min-width:768px) {
    .bg_GMA {        
        background: #010a10 url(../images/share/bg_00.webp) no-repeat left top;
        background-size: 100%;

    }
} 
/*
a:focus,
a:not([href]):not([tabindex]):focus {
    outline-offset: 2px;
    outline: 3px dotted #af845a !important;
}
a:focus.carousel-control-prev,
a:focus.carousel-control-next { border: 3px dotted #5617e6;}
*/

.br { clear:both}
.no_link > a {
  display: inline-block;  /* For IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}   

.liner { 
    margin-top: -25px;
    padding-top: 35px;
    background: rgba(255, 255, 255, .8);
    border-radius: 0 0 10px 10px;
    padding-bottom: 80px;
}

@media (max-width:1199px) {
  .liner { border-radius: 0; }
}

.liner .breadcrumb a { color: #777; }
.liner .breadcrumb a:hover,
.liner .breadcrumb-item.active a:hover { color: #000; }
.liner .breadcrumb-item.active a { color: #777; }
.liner .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    color: #777;
}

.liner .title_alou .line { background: rgba(255, 255, 255, .95); }
.liner .title_alou .line:after {
    content: "";
    background: #ff096f;
}





                    
svg g .e { fill: #ff0000; transition: fill 0.5s; }                    
svg g .e:hover { fill: #323333; }

.no_wrap { white-space:nowrap}
.breadcrumb { background-color: transparent; }
.breadcrumb a { color: rgba(255,255,255,.5); font-size: 1rem; }
.breadcrumb a:hover { color: #fffde5; }
.breadcrumb-item+.breadcrumb-item::before { content: "›";color: #fff; }

        .container { max-width:800px; align-items:center;}
        hr{ border: 0;color:#666;background-color: rgb(255 255 255 / 15%);height: 1px;width:100%;}

.huge { font-size:3rem}
.middle {font-size: 2.1rem;}
.middle1 {font-size: 1.3rem;}
.middle2 {font-size: 1rem;}
.middle3 {font-size: 0.85rem;}
.small {font-size: 0.7rem;}
.xsmall {font-size: 0.5rem;}
.bold {font-weight:800;letter-spacing:0.06rem}

        .newsContent { line-height:2.0; text-align:left}
        .newsContent .col-md-6 { padding:0 1.6rem 0 2rem}
        .newsContent .first-column { border-right:dotted 1px #444}
        @media screen and (max-width: 767px){
        .newsContent .first-column { border-right:none} 
        }       

        .text-gold   { color:#444 }
        .text-gold a  { 
            position: relative;
            color: rgba(255, 255, 255, .6);
        }
        .text-gold a:hover { 
          color: #a08cfa;
          /* text-shadow: 2px 1px rgba(255, 255, 255, .7);  */
        }
        
        @media (min-width:768px) {
            .text-gold a  { top: 0px; transition: all .3s; }
            .text-gold a:hover { top: -10px; }
        }
        /*.text-gold a { color:#4e4e4e }
        .text-gold a:hover { color:#ffffee}*/
        .text-yellow   { color:#ffff66 }
        
        .text-blue   { color:#6699ff}
        .text-blue a { color:#6699ff}
        .text-blue a:hover { color:#ccddff}        
        .text-grey { color:#999; }
        .text-black { color:#000 }
        .text-red { color:#e72e56 }
        .text-darkgray { color:rgba(255,255,255,.5); }
        .text-lightgray { color:#777777; }
        .text-light80 { color:rgba(255,255,255,.80)}
        .text-light65 { color:rgba(255,255,255,.65)}
        .text-light45 { color:rgba(255,255,255,.45)}
        .text-purple { color: #9d85dc; text-shadow: 2px 1px rgba(0,0,0,1);}
        /*.text-purple { color: #856dc5; text-shadow: 2px 1px rgba(0,0,0,1);}*/
        
        .text-shadow { text-shadow: 1px 1px 2px rgba(168,168,168,0.2)}
        
        .bg-yellow { background:#ffff00;}
        .bg-purple { background:#7d3095;}
        .bg-black  { background:#000;}
        .bg-blue1  { background:rgba(117,143,156,0.8);}
        .bg-blue  { background:#005cff}
        .bg-gold { background:#f6eb00;}
        .bg-brown { background:#54391e;}
        .bg-hazel { background:#000;}
        .bg-red { background:#750d02; }
        .bg-white { background:rgba(255,255,255,.75); }
        .bg-Gradient { background: linear-gradient(to right, rgb(14 24 49) 1%, rgb(52 38 81) 51%, rgb(54 59 122) 100%); color: #fff;}
        .border-gold { border-color:#bb8f5e; }
        
        .underline {  border-bottom:solid 1px} 
        .underline > a { text-decoration: none} 
       
        .social_media { height:600px; display:block; font-size:20px; position:fixed; z-index:2; right:0; top:0; padding:168px 15px; background-image:url('images/gradient_dark.png'); background-repeat:repeat-x;} 
        .social_media .nav-link { padding:5px 0; margin:0 auto; } 
        @media screen and (max-width: 767px){
        .social_media {  position:relative;right:16px; margin-top:168px; padding-top:80px}
        }
        @media screen and (min-width: 768px) and (max-width: 1300px){
        .prev_next  { margin-right:2.5rem}
        }
        

    #BothSideLine { margin:0 -1rem; padding:0rem 1rem 4rem 1rem; list-style-type:none;}
    #BothSideLine li span{ background: #000; padding:0.3rem 1rem; color:#999; letter-spacing:0.1rem}
    #BothSideLine li{ float: left; height: 2rem;  width: 100%}
    #BothSideLine .list1{ border-bottom: 1px solid #666; width: 100%; margin-bottom: -0.85rem}
    #BothSideLine .list2{ display: block; width: 100%; text-align: center;}
    #BothSideLine2 { margin:0 -1em; padding:0rem 1rem 4rem 1rem; list-style-type:none;}
    #BothSideLine2 li span{ background: #111; padding:0.3rem 1rem; color:#999; letter-spacing:0.1rem}
    #BothSideLine2 li{ float: left; height: 2rem;  width: 100%}
    #BothSideLine2 .list1{ border-bottom: 1px solid #666; width: 100%; margin-bottom: -0.85rem}
    #BothSideLine2 .list2{ display: block; width: 100%; text-align: center;}
    
    .tip_news {
        margin: 20px auto 10px;
        padding:5px 15px; 
        border-radius:20px;
        background: #333;
        display: inline-block;
        color: rgba(255,255,255,.7);
    }
    
    /* 樣式01 */

    .title_alou {
      position: relative;
      margin: 0;
      padding: 30px 15px;
      /* padding: 30px 15px 20px 4px; */
      display: initial;
    }

    .liner .title_alou {
	    position: relative;
	    margin: 0;
	    padding: 30px 0 20px 4px;
    }

    .title_alou .line {
      position: relative;
      width: 120px;
      height: 1px;
      top: 0;
      background: rgba(255,255,255,.25);
      overflow: hidden;
    }

    .title_alou .line:after {
      content: "";
      position: absolute;
      height: 1px;
      width: 30%;
      background: #fa7f58;
      top: 0;
      left: 0;
      right: 100px;
      overflow: hidden;
      animation: maskStart 3s cubic-bezier(0.9,0,0.1,1) 0s forwards;
    }

    .title_alou h2 { 
        font-size: 2rem;
        line-height: 55px;
        font-weight: 700;
        color: rgba(255,255,255,.95);
        animation: Fall 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s both;
        will-change: Fall;
        margin-bottom: 1rem;
        /*-webkit-text-stroke: 1px #ff0864;*/
    }

    .title_alou small {
      font-family: "Montserrat Alternates",sans-serif;
      color: #d5c8ff;
      letter-spacing: 8px;
      /* display:none; */
    }

    .liner .title_alou h2 { 
      font-style: italic;
      font-family: initial;
      letter-spacing: 14px;
    }

    .liner .title_alou small {
      font-style: italic;
      color: #cb94aa;
      /* display:none; */
    }

    .title_alou .h5 {
      font-size: 1.1rem;
      line-height: 2;
    }

    .title_alou hr {
        color: #666;        
        height: 21px;
        width: 100%;
        /* background-color: rgba(255, 255, 255, .5); */
        background: linear-gradient(to right,  rgba(255,255,255,0.5) 30%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        /* margin-top: 25px; */
        /* border-top: 1px solid #aaa; */
    }

	@media (min-width:768px) {
		.title_alou .h5 {
		    margin: 35px 0 0 150px;
		    /*margin: 20px 0 0 150px;*/
            /*text-align: justify; */
        }
	}
	@media (max-width:991px) {
		.title_alou h2 { font-size: 1.6rem;  }
	}

	@keyframes Fall {
	     0% { transform: translateY(0px); opacity: 0; }
	   100% { transform: translateY(20px); opacity: 1; }}

	@keyframes maskStart {
		0%   { right: 10%; left: 100%; }
		48%  { right: 0%; left: 0%; }
		52%  { right: 0%; left: 0%; }
		100% { right: 100%; left: 0%; }}




    /* 樣式02 */
    /*.title_alou {
		    position: relative;
		    padding: 0 0 20px;
		}

	.title_alou h2 { 
		position: relative;
    	display: table;
		font-size: 2rem;
		line-height: 55px;
		font-weight: 700;
		border-radius: 50px 0;
		margin-bottom: 1rem;
		padding: 0 75px 0 50px;
		color: #fff;
		background: rgba(255, 255, 255, .5);
		animation: Slip 2s cubic-bezier(0.165, 0.84, 0.44, 1) both;
		will-change: Slip;
	}
	
	.title_alou .line {
		position: absolute;
		width: 120px;
		height: 1px;
		top: 0;
		bottom: 0;
		right: -60px;
		margin: auto;
		background: #fff;
		overflow: hidden;
		animation: Slip 2s .6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	}

	.title_alou .line:after {
		content: "";
		position: absolute;
		height: 1px;
		width: 30%;
		background: #9d8a74;
		top: 0;
		left: 0;
		right: 100px;
		overflow: hidden;
		animation: maskStart 1.7s .6s cubic-bezier(0.9,0,0.1,1) forwards;
	}

	.title_alou small {
		position: absolute;
		height: 15px;
		top: 0;
		bottom: 0;
		right: -270px;
		margin: auto;
		font: 13px "EB Garamond", serif;
		color: rgba(255,255,255,.3);
		letter-spacing: 2px;
		animation: Fall 1.5s 1.35s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	}

	@media (max-width:991px) {
		.title_alou { height: 110px; }
		.title_alou h2 {
			font-size: 1.6rem;
			padding: 0 50px;
			line-height: 50px;			
		}

		.title_alou .line {
			left: 0;
			margin: 80px 0 0 50px;
		}

		.title_alou small {
			width: 200px;
			left: 0;
			margin: 72px 0 0 190px;
		}
	}


	@keyframes Slip {
		    0% { transform: translateX(40px); opacity: 0; }
		100% { transform: translateX(0px); opacity: 1; }}

	@keyframes Fall {
		    0% { transform: translateY(20px); opacity: 0; }
		100% { transform: translateY(0px); opacity: 1; }}   

	@keyframes maskStart {
		0%   { right: 0%; left: -30%; }
		100% { right: 0%; left: 70%; }}

    */
    .tag {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        margin: 0 auto;   
    }

    @media (max-width:991px) {
        .tag { width: auto; }
    }
    
    @media (min-width:992px) {
        .tag { width: 720px; }
    }
    

    .tag a { margin: 3px 4px; }

    .btn-sm {
        font-weight: 600;
        color: #8d8d8d;
    }
    .btn-sm:hover {
        color: #212529;
        text-decoration: none;
    }


/* 播出平台
-------------------------------------------*/

#accordion .card {
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .85);
}
#accordion .card-header {
  padding: 0;
  border-bottom: 0;
}
#accordion .card-header .btn {
  width: 100%;
  text-align: left;
  font-weight: normal;
}
#accordion .btn-lightblue {
  color: rgba(255,255,255,.9);
  background: rgb(122 107 163 / 80%);
  border-radius: 0;
}
#accordion button{
  font-size: 1.1rem;
  padding: 0.75rem;
}

#accordion .card-body {
  padding: 1.5rem 6rem;
  line-height: 2rem;
}
@media (max-width: 767px) {
  #accordion .card-body {
    padding: 2rem;
  }
}

#accordion button { border: 0; }



	/* 影音預告 video
	-------------------------------------------*/
	/* 入場須知 ticket
	-------------------------------------------*/
	.ticket ul,
	.ticket ol,
	.ticket p { 
		line-height: 2.5;
		text-align: justify;
		word-break: break-all;
	}
	.ticket p { margin-left: 17px; }
	.ticket b,
	.text-danger { color:#a08cfa !important; }

	.ticket span { color:#a08cfa !important; }

	@media (max-width: 991px) {
		.ticket ul {
		  padding: 0 25px !important;
		}
	}
	.wlist { width:100%; }
	@media (min-width: 1200px) { .wlist { width:530px;}}
	
	
  
	/* 抽現金 sweepstakes.asp
	-------------------------------------------*/	
		
		
	/* 贈票資訊 activity
	-------------------------------------------*/
	.img_activity {
		max-width: 720px;
		margin: 0 auto;
		height: auto;
	}
  
	/* 入場須知 ticket
	-------------------------------------------*/ 



	/* 表格區塊 */

        table { color: rgba(255, 255, 255, .85) !important; }
        .table th  { text-align: center; }

        /* table-bordered 帶框表格 */
        .table-bordered td, 
        .table-bordered th { border: 1px solid rgba(255,255,255,.2); }

        .table-bordered {
          border: solid rgba(255,255,255,.1);
          border-width: 0;
        }

        .table-striped tbody tr:nth-of-type(odd) {
          background-color: rgb(123 112 198 / 19%);
        }

        

        .table thead {
            background: #a08cfa;
        }
        .table thead th {
          border-bottom: 2px solid #c8d7dc;
          font-weight: normal;
        }
        
        .tab_info p {
          color: #212121;
          font-weight: bold;
          margin-bottom: 0rem;
        }
			
	
	
	/* 影音滑動區塊 */
    .ytvideo {     
        cursor: pointer;
        overflow: hidden;
        border: 1px solid #796da0;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
        transition: border .5s; 
    }
    .ytvideo:hover { border: 1px solid #c8beef;  }  
    .ytvideo img { width: 100%;  /*margin-top: -9.7%; margin-bottom:-9.7%;*/ }	


	/* 回顧 */

  @media ( min-width:768px ) {
    .history a,
    .history .row .col-12 > div {
      border-radius: 10px;
      overflow: hidden;
      display: table;
    }

  }

    
			
	/* 以下可刪 */		
    
    .tip-line {
        width:100%; 
        border-bottom: 1px solid #933227;
        -moz-border-image: -moz-linear-gradient(top left, #9C9C9C 50%, #5E5E5E 65%);
        -webkit-border-image: -webkit-linear-gradient(top left, #9C9C9C 50%, #5E5E5E 65%);
        border-image: linear-gradient(to bottom right, #9C9C9C 50%, #5E5E5E 65%);
        border-image-slice: 1;
    }
    .tip-title {        
        position:absolute; 
        display: inline-block;  
        padding:0 15px; 
        line-height:1.2; 
        font-size:30px; 
        margin-top:-18px;
        padding: 0 13px;      
        border-radius:20px;        
	
        /* IE10 Consumer Preview */ 
        background-image: -ms-linear-gradient(left, #5E5E5E 0%, #9C9C9C 100%);

        /* Mozilla Firefox */ 
        background-image: -moz-linear-gradient(left, #5E5E5E 0%, #9C9C9C 100%);

        /* Opera */ 
        background-image: -o-linear-gradient(left, #5E5E5E 0%, #9C9C9C 100%);

        /* Webkit (Safari/Chrome 10) */ 
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #5E5E5E), color-stop(1, #9C9C9C));

        /* Webkit (Chrome 11+) */ 
        background-image: -webkit-linear-gradient(left, #5E5E5E 0%, #9C9C9C 100%);

        /* W3C Markup, IE10 Release Preview */ 
        background-image: linear-gradient(to right, #5E5E5E 0%, #9C9C9C 100%);
    }
    .tip-black  { position:relative; display: inline-block; color:rgba(255,255,255,.85); font-weight: 300; padding:0 10px; margin:0;}
    
    
    
    
    .tip-interpret, .tip-interpret h1, .tip-interpret h2, .tip-interpret h3, .tip-interpret h4, .tip-interpret h5, .tip-interpret h6  { line-height:1.8; color:rgba(255,255,255,.55);/*text-shadow: 2px 1px rgba(255,255,255,.4)*/; font-weight: bold; }/*title下方金色說明文字*/
    .tip-interpret h2 { font-size: 1.65rem; }
    .tip-interpret hr { width:97.5%; background-color:transparent; border-bottom:1px dotted rgba(175,133,90,0.68); margin-left:2px;}
    @media (min-width: 1200px) { .col-10.tip-interpret { margin-top:-5rem}} 
    @media (min-width: 992px) and (max-width: 1199px)  { .col-10.tip-interpret { margin-top:-3rem}}
    @media (max-width: 768px)  {
        .tip-title{ font-size:20px; margin-top:-12px}/*margin-top = -50%(font-size x line-height 1.2)*/
        .tip-interpret { font-size:1.05rem; margin-top:1rem}
        .tip-interpret h5 { font-size:1.2rem;}
        #tip-content { margin-top:2rem}
    }   
    
    .award:before {content:url('images/award.gif');position:relative;top:0.1rem;padding-right:0.45rem}
    .award-category-line    { position:relative; border-bottom:1px solid #c3996b; width:100%; height:2rem; margin:0 auto;} 
    .award-category         { position:absolute; padding:1rem; margin:0 0 0 2rem}
    .award-category:before  { position:absolute; content:url('images/mini-icon.png'); margin:-0.35rem 0 0 -3rem }
    
    h1 .award-category-line { margin-bottom:5rem}
    h1 .award-category { margin:-0.6rem 0 0 2rem}
    h1 .award-category:before { margin:0.3rem 0 0 -3rem}
        
     
/*--define bootstrap 5 columns--*/ 
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; padding-right: 0.5em; padding-left: 0.5em; }  
.col-xs-1-5 { width: 20%; float: left; }  
@media (min-width: 768px) { .col-sm-1-5 { width: 19.5%; float: left; }} 
@media (min-width: 992px) { .col-md-1-5 { width: 19.5%; float: left; } } 
@media (min-width: 1200px) { .col-lg-1-5 { width: 19.5%; float: left; } }        
/*--/define bootstrap 5 columns--*/ 


a#nav-1-tab,a#nav-2-tab,a#nav-3-tab,a#nav-4-tab,a#nav-5-tab { color:#c3996b}
a#nav-1-tab.active,a#nav-2-tab.active,a#nav-3-tab.active,a#nav-4-tab.active,a#nav-5-tab.active { color:#000}

/*--下標籤 myTab--*/
        #myTab.nav-tabs {border-bottom: 0px; padding-top:1rem}    
        #myTab.nav-tabs .nav-link {
            
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            border-bottom-left-radius: .25rem;
            border-bottom-right-radius: .25rem;
            margin:0 2px;
        }
        #myTab.nav-tabs .nav-item.show .nav-link, #myTab.nav-tabs .nav-link.active {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a2a2a2+0,ffffff+38 */
        background: #fff; /* Old browsers */
        background: -moz-linear-gradient(top, #a2a2a2 0%, #ffffff 30%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #a2a2a2 0%,#ffffff 30%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #a2a2a2 0%,#ffffff 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2a2a2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        }
        @media (max-width: 768px){
        .tab-pane { font-size:0.95rem}
        }
/*--上標籤 myTab2--*/
        #myTab2.nav-tabs { border-bottom: 0px; margin-bottom:1px}    
        #myTab2.nav-tabs .nav-link {
            border-bottom: 0px;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        #myTab2.nav-tabs .nav-item.show .nav-link, #myTab2.nav-tabs .nav-link.active {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aeaeae+0,ffffff+38 */
        background: #fff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff  80%,#aeaeae 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ffffff 80%,#aeaeae 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ffffff 80%,#aeaeae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#aeaeae',GradientType=0 ); /* IE6-9 */
        }
/*--image_overlay_slide--*/
        .photo_overlay_container {
          position: relative;
          width: 100%;
          margin-bottom:1.5rem;
        }
        .photo {
          display: block;
          width: 100%;
          height: auto;
          border-radius: 0.25rem !important;
          display : inline-block;           
        }
        .photo_overlay {
          position: absolute;
          bottom: 0;
          left: 100%;
          right: 0;
          background-color: #b29176;
          overflow: hidden;
          width: 0;
          height: 100%;
          transition: .3s ease;
          border-radius: 0.25rem !important;
          display : inline-block;          
        }
        .photo_overlay_container:hover .photo_overlay {
          width: 100.1%;
          left: 0;
        }
        .photo_overlay_text {
          color: #000;
          font-size: 2rem; letter-spacing:2px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          white-space: nowrap;
        }   
         @media (max-width: 768px){
         .photo_overlay_text { font-size: 1.5rem; letter-spacing:0;}
         } 
/*----*/         
        .colorbg-block { border-top:solid 1px #bbb; border-bottom:solid 1px rgba(167,130,102,0.8); box-shadow:0px 5px 20px rgba(0,0,0,0.1)}
        /*.title-block  { background:#fffbbb; border-top:solid 1px #bbb; border-bottom:solid 1px #aaa; box-shadow:0px 5px 20px rgba(0,0,0,0.5);}*/
        .colorbg-block h1 {font-size:2.65rem; }
        .colorbg-block .title { background:url('images/logo_tip.png') no-repeat; background-position:1rem 1.35rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); letter-spacing:1px; line-height:1.4;; padding:1.6rem 0 1.2rem 6.5rem }
        @media(max-width:767px) {
        .colorbg-block h1 { font-size:1.5rem; }
        .colorbg-block .title { background-size:8.5%; background-position:0.7rem 0.6rem; padding:1rem 0 0.5rem 12%}
        }
/*--典禮下方浮動logo--*/
        .under_dec {
            position:relative;
            width:100%;
            height:auto;
            overflow: hidden;
        }
        .under_dec:after {
            content:"";
            position:absolute;
            width:100%;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background:url(../images/share/logo_bottom.webp) no-repeat;     
            background-size: 100% auto;
            animation: Stretch 4s 35 both;
        }
        
        @keyframes Stretch {
              0%,100% { transform: scale(1.1); }
             50% { transform: scale(1); }}
        @-webkit-keyframes Stretch {
              0%,100% { transform: scale(1.1); }
             50% { transform: scale(1); }}
     
     
     
        footer { position:absolute; width:100%}
        @media screen and (min-width: 1680px){
            .GMFsponsor { padding-left:12%}
        }
        @media screen and (min-width: 768px) and (max-width: 1200px){
            .GMFsponsor { padding-left:1rem}
        }
        @media screen and (max-width: 768px){
            footer .logo_group img{ padding-bottom:1rem;}
        }
        
        
/*--sponsor--*/
@media screen and (min-width: 768px){
    #tb { margin:0 0 1.5rem -2.5rem;}
}
#tb li {
    list-style-type: none;
    width: 200px;
    height: 87px;
    padding: 10px 0;
    float: left;
    background-color: Transparent;
    border: 0.5px solid #0a0a0a;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}
#tb li:hover {background-color: #0a0a0a}

#tb2 { margin:0 -2.5rem 1.5rem -2.5rem}
#tb2 li {
 list-style-type:none;
 width:220px;
 height:65px;
 text-align:center;
 vertical-align:middle;
 padding:5px 15px; margin-top:1.5rem;  
 float:left;
 background-color:Transparent;
 border:dotted 1px #101010
}
#tb2 li:hover {background-color:#111}
/*----*/
.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	
	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@keyframes pulse {
	0% {
		transform: scale(0.97);
		opacity: 1;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.97);
		opacity: 1;	
	}			
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.97);
		opacity: 1;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.97);
		opacity: 1;	
	}			
}

footer{ 
    position: relative;
    padding: 0 4rem;
    color: #fff;
    font-size: 0.7rem;
    background: #002823;    
    /* background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 21%, #ececec 49%, #e3e3e3 80%, #f5f6f6 100%); */
    /* background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 21%, #ececec 49%, #e3e3e3 80%, #f5f6f6 100%); */
}
@media(max-width:1680px) {footer{ padding:0 2rem}}
@media(max-width:1438px) {footer{ padding:0 1rem}}
@media(max-width:1366px) {footer{ padding:0 0}}
footer .unit { text-align:left}
footer .unit:before{ content:"│"; padding-right:0.25rem} 
footer .unit:after { content:"│"; padding-left:0.25rem; margin-right:0.25rem} 
@media screen and (min-width: 1200px) and (max-width: 1460px){
footer .unit   { text-align:right; padding-right:0.25rem; margin-right:0.25rem; border-right:1px solid #666; }
footer .unit:before{ content:""; padding-right:0rem} 
footer .unit:after { content:""; padding-left:0rem; margin-right:0}
}
@media (min-width:768px) and (max-width:1199px) {
footer img { padding:.8rem 0.5rem .2rem; }
}

@media(min-width:768px) {
.no_br br { display:none}
}
@media(max-width:767px) {
ul,ol { margin-left:-1.5rem; }
li>ol, li>ul { margin-left:-1rem; }
.no_br2 br { display:none; }
footer .unit { text-align:center; }
.pr-3.unit + img,
.logo_group > img { margin: 15px 0 20px; }
ul#tb {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}       

/*--tip--*/

        .tip{position:relative;height:1.875rem;line-height: 1.875rem;margin:2.47rem auto;text-align: center;}
        .tip i{display:block;height:1px; background:#fff;position:absolute;top:0.9rem;width:100%;}
        .tip p {
            display:inline-block;
            font-size: 0.75rem;
            color:#ffff00;
            background:rgba(255,255,255,1);
            padding:0 1.875rem;
            text-align: center;
            margin:0 auto;
            position:relative;
            z-index:99;}
            
            