#header .panel-v1{
	background: #09414e !important;
}

#wrapper{
	background-color: #09414e;
}

#footer-fixed-height{
    background-color: #09414e;
}

.top{
	margin-bottom: 0.6rem;
}

.top .logo-div{
	text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	top: 0.5rem;
    z-index: 99; /*用於高於 header z-index*/
}

.top .logo-div img{
	width: 75%;
}

/* LOGO 下方標題文字*/
.content .title-area{
	text-align: center;
	padding-top: 0.2rem;
	margin-bottom: 0.5rem;
}

.content .title-area .text-sty1{
	color: #55b7c8;
	font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
	font-weight: bold;
	font-size: 0.45rem;
	margin-bottom: 0.15rem;
}

.content .title-area .text-sty2{
	color: #55b7c8;
	font-weight: 400;
	font-size: 0.35rem;
	margin-top: 0rem; /*因為 內容文 & 共用 style 這邊要改回來*/
	padding-left: 0rem; /*因為 內容文 & 共用 style 這邊要改回來*/
    letter-spacing: 0.04rem;
}


/* 內容文 & 共用 style */
.position-r{
	position: relative;
}

.separator-line{
    height: 1px;
    background: linear-gradient(to bottom, #5dc7d9 0%, #5dc7d9 40%, #5dc7d9 100%);
	margin: 0.5rem 0;
}

.extra-symbol{
    font-size: 0.2rem;
    margin-right: 0.05rem;
}

.display-f{
	display: flex;
}

.color-1{
	color: #55b7c8;
}

.margin-sty1{
	margin-top: 0.8rem !important;
    margin-bottom: 0.2rem !important;
}

.margin-sty2{
	margin-top: 0 !important;
    margin-bottom: 0.1rem !important;
}

.content{
	padding: 0 0.5rem;
    margin-bottom: 1.4rem;
}

.content .text-title{
	color: #5dc7d9;
    font-size: 0.35rem;
}

.content .text-table table{
	width: 100%;
}

.content .text-table{
	margin-top: 0.05rem;
}

.content .text-table td{
	color: #80acb5;
	border: 1px solid #80acb5;
	text-align: center;
	padding: 0.1rem;
}

.content .text-table td.table-title{
	color: #5dc7d9;
}

.content .text-table .grade-icon{
	display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 0.3rem;
    height: 0.3rem;
    color: white;
    border-radius: 999px;
    text-align: center;
    margin: 0 0.05rem;
    font-size: 0.2rem;
    vertical-align: middle;
    box-shadow: inset 0.005rem 0.005rem 0.02rem #FFF, 0.01rem 0.01rem 0.02rem #000;
    transform: translateY(-0.01rem);
}
/* 內容文 & 共用 style */

/* 內容文 - 第一區塊 start */
.content .text-area1 .text-sty1{
	color: #FFF;
	margin-top: 0.2rem;
}

.content .text-area1 .text-sty2{
	color: #80acb5;
	margin-top: 0.05rem;
	padding-left: 0.2rem;
}

.content .text-area1 .text-sty2 .title{
	color: #FFF;
}

.content .text-area1 .img-sty1{
	position: absolute;
    top: -2.35rem;
    right: -0.2rem;
}

.content .text-area1 .img-sty1 img{
	width: 2.5rem;
}

/* 內容文 - 第一區塊 end */


/* 內容文 - 第二區塊 start */
.content .text-area2 .text-sty1{
	color: #FFF;
	margin-top: 0.2rem;
	font-size: 0.3rem;
}

.content .text-area2 .text-sty2{
	color: #80acb5;
	margin-top: 0.25rem;
}

.content .text-area2 .text-sty2 .title{
	color: #5dc7d9;
	font-size: 0.25rem;
}

.content .text-area2 .text-sty3{
	color: #80acb5;
	padding-left: 0.2rem;
    margin-top: 0.05rem;
}

.content .text-sty4{
    color: #80acb5;
	margin-top: 0;
}

.content .text-sty5{
    color: #80acb5;
	margin-top: 0.05rem;
}

.content .text-area2 .img-sty2{
    position: absolute;
    top: -2.1rem;
    right: 0rem;
}

.content .text-area2 .img-sty2 img{
	
}

.content .text-area2 .img-sty3{
    position: absolute;
    bottom: -0.3rem;
    left: -0.4rem;
}

.content .text-area2 .img-sty3 img{
	width: 0.8rem;
}

.content .text-area2 .img-sty4{
    position: absolute;
    top: 0.25rem;
    right: -0.3rem;
}

.content .text-area2 .img-sty4 img{
	width: 0.6rem;
}

.content .text-area2 .img-sty5{
    position: absolute;
    top: -0.8rem;
    right: -0.2rem;
}

.content .text-area2 .img-sty5 img{
	width: 0.5rem;
}

.content .text-area2 .img-sty6{
    position: absolute;
    top: 0.8rem;
    left: -0.35rem;
}

.content .text-area2 .img-sty6 img{
	width: 0.5rem;
}

.content .text-area2 .img-sty7{
    position: absolute;
    right: 0.1rem;
    bottom: -0.5rem;
}

.content .text-area2 .img-sty7 img{
	width: 0.7rem;
}

/* 內容文 - 第二區塊 end */


/* 置底區塊 */
.bottom{
	position: sticky;
    bottom: 1.6rem;
    padding: 0.2rem 0.4rem;
    background: #09414e;
    border-radius: 0.4rem;
    border: 0.06rem solid #0d98ac;
	width: 6.5rem;
    margin: auto;
	overflow: hidden;   /* 光暈不超出圓角 */
}

/* 中間光暈 */
.bottom::before{
  content:"";
  position:absolute;
  inset: -20%;        /* 讓光暈更大、更柔 */
  pointer-events:none;

  background: radial-gradient(
    ellipse 80% 65% at 55% 35%, /* 調整光暈座標 */
    rgba(80,255,255,.32) 0%,
    rgba(80,255,255,.16) 22%,
    rgba(80,255,255,.06) 38%,
    rgba(80,255,255,0) 52%
  );

  filter: blur(18px);
}

/* 確保內容在光暈上面 */
.bottom > *{
  position: relative;
  z-index: 1;
}

.bottom > div{
	display: flex;
	align-items: center;
    justify-content: center;
}

.text-area4{
	color: #216f7c;
	font-weight: 600;
    padding-left: 0.1rem;
}

.text-area4 > div{
	font-size: 0.28rem;
    color: #0d98ac;
}

.bottom .color-b{
	color: black;
}

.bottom .register-btn{
	cursor: pointer;
	background: #0d98ac;
	color: #FFF;
	font-size: 0.32rem;
    width: 100%;
    border: none;
    height: .9rem;
    border-radius: 0.45rem;
	margin-top: 0.1rem;
}

.bottom .register-btn::before{
	content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.45rem;
    box-shadow: 0 -0.05rem 0.1rem rgba(255, 255, 255, 0.5), 0 0.1rem 0.1rem #00000069;
    width: 98%;
    height: 85%;
    filter: blur(1.8px);
    pointer-events: none;
}

.bottom .register-btn span{
	font-size: 0.8rem;
    font-style: italic;
}

.bottom .fire{
	height: 0.5rem;
	margin-left: 0.1rem;
}