html { height: 100%; font-size: 14px;}

html,body { font-family: "Microsoft Yahei"; font-size: 1.2vmin; background-color: #fff; margin: 0; padding: 0;/* width: 100vw; */ height: 100vh; height: var(--app-height); }

a { color: #337ab7; text-decoration: none; background-color: transparent; }

* { box-sizing: border-box!important;}

.container-fluid { margin: 0 auto; }

.pointer{ cursor: pointer; }


.fwbc { font-weight: bold; color: #FF0004;}


.top { background-color: #fff; height: 9vh; max-height: 80px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 999;}

.top img{ height: 100%; width: 100%; object-fit: contain; object-position: 0% 50%; }

.top .max-center-content{/* max-width: none; */ padding: .5rem;}

.logo { background: url('../images/LOGO.png') no-repeat; background-size: contain; width: 100%; max-width: 200px; height: 100%; margin-left: 1%; }

.top .btn{ height: 100%; max-height: 45px; display: flex; justify-content: flex-end; align-items: center; margin: auto 1% auto 0; }



.notice { width: 46%; padding: 0; /*border: 1px solid #33b1ff;*/ /*background-color: #efefef; border-radius: 30px;*/ color: #FF0004; border-top: 5px solid #ecdbfe; border-bottom: 5px solid #ecdbfe; height: 50px; line-height: 0px; margin-top: 1%; background: url('../images/pattern01.jpg') repeat; }

.notice .marquee-wrap {  font-size: 20px; font-weight: bold;
  /*margin: 0 0.3rem;*/
  width: 100%; /* 宽度 100% */
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 防止内容换行 */
  height: 100%; 
}
.notice .marquee-wrap p { 
  display: inline-block;
  padding-left: 100%; /* 使内容从屏幕右侧开始 */
  animation: marquee-scroll 15s linear infinite; /* 使用动画滚动 */
}
.notice .marquee-wrap p:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0); /* 从右侧开始 */
  }
  to {
    transform: translateX(-100%); /* 移动到左侧 */
  }
}


.guideHead { margin-top: 0px; width: 100%; padding:0 0%; max-width: 960px; margin-left: auto; margin-right: auto; }

.guideHead.dns { background-color: #ecdbfe; width: 100%; max-width: 940px; margin-left: auto; margin-right: auto; border-radius: 20px;}

.guideHead .image { width: 20rem; margin:0 10px; }

.guideHead .title { width: 240px; font-size: 24px; color: #000; line-height: 28px; display: flex; align-items: center; white-space: nowrap; }

.guidHead-content { position: relative; padding-top: 0.5%; }

.max-center-content { height: 100%; width: 100%; max-width: 960px; display: flex; justify-content: space-between; }



.guid-content { width: 100%; margin: 32px 0px 92px;/* padding: 0px 0px 0px 10px; */padding: 0; text-align: left; position: relative; }

.linkk { display: block; margin: 0 auto; width: 200px; padding: 0.4rem 0; background-color: #ecdbfe; font-size: 18px; color: #6f32a0; text-align: center; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }

.linkk:hover {background-color: #6f32a0; color:#fff;}

.mainDiv { margin-top: 280px;}

.footer {
	width: 100vw;
	/* max-width: 1024px; */
	background-color: #f9f9f9;
	border-top: 1px solid #dedede;
}

.footer.guide {
	width: 100%;
	/* max-width: 1024px; */
}

.footer-content {
	margin: 20px auto 0px;
	height: 66px;
}

.copyright {
	color: #999;
	text-align: center;
	font-size: 1rem;
}

.bottomDiv {
	float: right;
}

.row a:hover,
.row a:focus,
.guideHead a:hover,
.guideHead a:focus {
	text-decoration: none;
}

.guid-content img {
	margin: 8px auto;
	/* margin: 8px 8px; */
	width: 100%;
}


/*.tabUl { display: flex; width:100%; zoom: 1; overflow-x: auto; white-space: nowrap; flex-wrap: wrap; gap:.1%; }*/

.tabUl { display: flex; white-space: nowrap; flex-wrap: wrap; gap:.2%; padding: 0; margin-left: 2%;}

/* 去除底部滚动条 */
.tabUl::-webkit-scrollbar { display: none; }

.tabUl li { /*width: calc(100% / 7 - 10%);*/ list-style: none; margin: 0 0 5px 0; /*display: inline-table;*/ }

.tabUl li a{ display: block; width: 100%; }

.tabUl li.on a .changeVersionButton { background-color: #fff; color: #333; font-weight: 700; }


.changeVersionButtonGroup { position: relative; margin-bottom:0;/* width: 85%;*/ }

.changeVersionButton {
	width: 90px;
	height: 44px;
	background-color: #6f32a0;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	margin-left: 1px;
	line-height: 44px;
	font-size: 16px;
}
.changeVersionButton:hover{
	background-color: #fff;
	color: #333;
	font-weight: 400;
}






.tabBox { width: 1000px; margin: 20px 10px; border: 2px solid #ecdbfe; border-radius: 20px; }


/* Lightbox background */
#lightbox-1_lightboxbg {
    display: none;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
}

/* Lightbox panel with some content */
#lightbox-1 {
    display: none;
    position: fixed;
	width: 100%;
    /*max-width: 90vw;*/max-width: 960px;
    background: #FFFFFF;
    padding: .5rem;
    border: 2px solid #CCCCCC;
    z-index: 1001;

}

#lightbox-1 .lightbox1_lightbox-content {
    height: 100%;
    width: 100%;
       overflow-y: scroll;
       overflow-x: hidden;
    max-height: 90vh;
}
#lightbox-1 img{
	width: 100%;
	height: auto;
}
#lightbox-1 .lightbox1_lightbox-close {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    position: absolute;
    top: -40px;
    right: -40px;
    -moz-transition: ease-in-out 0.5s;
    -o-transition: ease-in-out 0.5s;
    -webkit-transition: ease-in-out 0.5s;
    transition: ease-in-out 0.5s;
    background-color: #fff !important;
    border-radius: 100%;
    text-align: center;
    font-size: 4rem;
}

/*彈窗1 lightbox-1_end*/



.dropdown {
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0 16px;
    width: auto;
    border: 2px solid #6f32a0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    /*margin-top: 12px;*/
    transition: .2s;
}

.dropdown.active {
    opacity: 1;
    padding: 10px 16px;
    height: auto;
    border: 2px solid #6f32a0;
    transition: .4s;
	margin: 0 auto 10px auto;
}

.dropdown img {
    height: auto;
    width: initial;
    max-width: 120px;
    display: block;
}

.dropdown img:hover {
    opacity: 1;
}

.dropdown span { cursor: pointer; 
    width: auto;
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #555;
    padding: 16px 4px;
    display: flex;
    justify-content: center;
}

.dropdown span:nth-last-of-type(1) {
    border: none;
}

.dropdown .menu_logo03 { width: 80px;}

.wap { display: none;}


@media screen and (max-width:1024px) {
	
.logo { width: 40vw; height: 100%; background-position: center left; }
	
.top .btn { display: flex; width: auto; max-width: 45vw; justify-content: flex-end; }
	
/*.guideHead { margin-top:5vh; }*/
	
.guideHead.dns { height: auto;}
	
.guidHead-content { display: flex; /* flex-direction:column; */ align-items: flex-start; gap: .5rem; height: auto; display: inline-block; }
	
.guideHead .title { width: 100%; max-width: 200px;  font-size: 24px; color: #000; line-height: 28px; margin: 1% auto; display: flex; justify-content: center; align-items: center; white-space: nowrap;}
	
.guideHead .image { width: 100%; /*max-height:5rem;*/ }	

	ul { /*padding-right: 8%;*/padding: 0; }
	
.tabUl { justify-content: center; align-items: center;  }

.tabUl li {  padding: 0.5%; position:relative; list-style: none; display: inline-table; }
	
.changeVersionButtonGroup { width: 100%; border: solid; padding-left: 5rem;}

.changeVersionButton { width: 90px; font-size: 1.8rem;}
	
	
	#lightbox-1 .lightbox1_lightbox-close{
		top:-1rem;
		right: 0;
	}
	
	.footer-content{
		height: auto;
		margin: auto;
		padding: 2rem;
		font-size: 3rem;
	}
	.copyright{
		font-size: 3rem;
	}

/* 手機版選單 */
.dropdown {
    position: absolute;
    z-index: 5;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0 16px;
    width: 80vw;
    border: 1px solid #6f32a0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    margin-top: 12px;
    transition: .2s;
    box-sizing: border-box;
}
.dropdown.active {
    opacity: 1;
    padding: 10px 16px;
    height: auto;
    border: 1px solid #6f32a0;
    transition: .4s;
}

.dropdown img {
    height: auto;
    width: min(35vw, 270px);
    display: block;
    opacity: .85;
}

.dropdown span {
    width: auto;
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #555;
    padding: 16px 4px;
    display: flex;
    justify-content: center;
}
.dropdown span:nth-last-of-type(1) {
    border: none;
}

/*.dropdown .menu_logo01,
.dropdown .menu_logo05 {
    width: min(21vw, 210px);
}	*/
	
}

.bottom .menu a .icon {
    	display: block;
    	width: 4vh;
    	height: 4vh;
    	margin-left: 0;
	}

    .bottom .menu a:hover .text {
    	color:#6f32a0;
	}
	.bottom .menu a.m01 .icon {
    	background: url(../images/micon01.png) no-repeat center center;
    	background-size: contain;
	}
	.bottom .menu a.m02 .icon {
    	background: url(../images/micon02.png) no-repeat center center;
    	background-size: contain;
	}
	.bottom .menu a.m03 .icon {
    	background: url(../images/micon03.png) no-repeat center center;
    	background-size: contain;
	}
	.bottom .menu a.m04 .icon {
    	background: url(../images/micon04.png) no-repeat center center;
    	background-size: contain;
	}
	.bottom .menu a.m01:hover .icon {
    	background: url(../images/micon01a.png) no-repeat center center;
		background-size: contain;
	}

	.bottom .menu a.m02:hover .icon {
    	background: url(../images/micon02a.png) no-repeat center center;
		background-size: contain;
	}

	.bottom .menu a.m03:hover .icon {
    	background: url(../images/micon03a.png) no-repeat center center;
		background-size: contain;
	}

	.bottom .menu a.m04:hover .icon {
    	background: url(../images/micon04a.png) no-repeat center center;
		background-size: contain;
	}

@media (min-width: 1024px) {
    .bottom{
        width: 150px;
        height: 50vh;
        /*position: absolute;*/ position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        right:2%;
        top:15%;
        z-index: 999;
		/*background-image: url("../images/bottombg.png");
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    	background-position: bottom;*/
    }
	
	.bottom .menu {
    	width: 90%;
    	position: relative;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	/*flex-direction: row;*/flex-direction: column;
    	flex-wrap: wrap;
		margin-top: 5px;
	}

	.bottom .menu a {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 70px;
    	width: 70px;
    	margin: 0 0;
		flex-direction: column;
        margin-bottom: 5%;
        border: #6f32a0 2px solid;
        border-radius: 20%; background-color: #fff;
	}
    .bottom .menu a .text {
    	text-align: center;
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	color:#6f32a0;
		font-size: 13px;
		font-weight: 500;
	}
}

@media (max-width: 1024px) {
.bottom{
        width: 100%;
        height: 10vh;
        /*position: absolute;*/ position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom:0;
        z-index: 999;
		background-image: url("../images/bottombg_m.png");
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    	background-position: bottom;
    }
.bottom .menu {
    	width: 90%;
    	position: relative;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	flex-direction: row;
    	flex-wrap: wrap;
		margin-top: 5px;
	}

.bottom .menu a {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 6.5vh;
    	width: 25%;
    	margin: 0 0;
		flex-direction: column;
	}
.bottom .menu a .text {
    	text-align: center;
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	color:#6f32a0;
		font-size: 0.8vw;
		font-weight: 500;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
.guideHead { margin-top:0vh; }
.guide-container-content { padding-bottom: 10%;} 
    
.bottom .menu {
        margin-top: 0.5vh;
    }
	.bottom .menu a {
        height: 8vh;
    }
	.bottom .menu a .icon {
        width: 6vw;
        height: 5vw;
    }
	.bottom .menu a .text {
        font-size: 2.5vw;
    }
/*.wap { display: block;}
.pc { display: none;}*/
}

@media (max-width: 750px) {
.mainDiv { margin-top: 0px;}
.wap { display: block;}
.pc { display: none;}
.notice { display: none;}
.guideHead { margin-top:0vh; }
.notice2 { width: 100%; padding: 0; /*border: 1px solid #33b1ff;*/ /*background-color: #efefef; border-radius: 30px;*/ color: #FF0004; border-top: 5px solid #ecdbfe; border-bottom: 5px solid #ecdbfe; height: 50px; line-height: 0px; margin-top:9vh; background: url('../images/pattern01.jpg') repeat; }

.notice2 .marquee-wrap2 {  font-size: 20px; font-weight: bold;
  /*margin: 0 0.3rem;*/
  width: 100%; /* 宽度 100% */
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 防止内容换行 */
  height: 100%; 
}
.notice2 .marquee-wrap2 p { 
  display: inline-block;
  padding-left: 100%; /* 使内容从屏幕右侧开始 */
  animation: marquee-scroll 15s linear infinite; /* 使用动画滚动 */
}
.notice2 .marquee-wrap2 p:hover {
  animation-play-state: paused;
}
	
.guide-container-content { padding-bottom: 15%;} 
	#lightbox-1 {max-width: 90vw;}
}

@media (max-width: 530px) {
.changeVersionButton { font-size: 3rem;}
.bottom .menu {
        margin-top: 0.5vh;
    }
	.bottom .menu a {
        height: 8vh;
    }
	.bottom .menu a .icon {
        width: 10.2vw;
        height: 10vw;
    }
	.bottom .menu a .text {
        font-size: 4vw;
    }
}