html, body {
    font-size: 14px;
}
label {
    font-weight: 100;
    cursor: pointer;
}
.m-t-md {
    margin-top: 20px;
}
.p-r-l-0{
	padding-left: 0;
	padding-right: 0;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}
/*登陸頁面*/
#login .loginBox {
    border-bottom: 1px solid #fff;
}
#login .loginForm {
    padding-top: 3%;
}
#login .loginForm .pull-right-lg a{
    color: #01ffbf
}
#login .loginForm .text-right a{
    color: #01ffbf
}
#login .colorBrightBlue a{
    color: #01ffbf
}
.loginUse {
    margin-top: 150px !important;
	margin-bottom: 100px !important;
}
#login{
	border-radius: 8px;
	border: none;
	box-shadow: rgba(40, 46, 76, 0.48) 3px 3px 20px;
	color: #fff;
}
#login p {
    padding-top: 20px;
    padding-bottom: 20px;
}
.loginUse {
    background: rgba(117, 175, 192, 0.35);
}
.loginBox strong {
    background-color: #ffffff00;
    font-size: 1.5em;
    color: #fff;
    padding: 15px 10px;
    border-radius: 10px;
}
#login .Btnlogin {
    font-weight: bolder;
}
.btn-get-started{
	color: #0071b8;
    background-color: #FFFFFF;
}
.btn{
	font-size: 16px!important;
}
.btn-get-started:hover{
    background: #0071b8;
	color: #FFFFFF;
} 
.form-control{
	background: rgba(34 ,42 ,88 ,0.67) !important;
	color: #fff;
	border: 1px solid rgba(204 ,204 ,204 ,0.49);
}

/*選擇平台*/
.mYfont p{
	height: auto;
}
.registerStyle hr {
    border-top: none;
}
.registerStyle p{
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2em;
}
.registerStyle button{
	background: #0000002b;
	font-weight: 500;
	margin-top:5%;
	color: #5fc7c8;
	font-size: 1em;
	padding: 10px 25px;
	border: 3px solid #5fc7c8;
	border-radius: 10px;
}
.registerSev button {
    color: #fbb273;
    border: 3px solid #fbb273;
}
.registerRep button {
    border: 3px solid #A65AD0;
    color: #A65AD0;
}
.registerStyle button:hover {
	color: white;
	background: #5fc7c8;
}
.registerSev button:hover {
	color: white;
	background: #fbb273;
}
.registerRep button:hover {
	background-color: #A65AD0;
}
.registerStyle strong {
    font-size: 1.25em;
    color: #FFFFFF;
    font-weight: bolder;
    padding: 10px 20px;
	background: #5fc7c8;
    border-radius: 10px;
    width: 100px;
}
.registerSev strong {
    background: #fbb273;
}
.registerRep strong {
    background: #A65AD0;
}
.registerStyle hr {
    margin-top: 10%;
    border-bottom: solid 3px #5fc7c8;
}
.registerSev hr {
    border-bottom: solid 3px #fbb273;
}
.registerRep hr {
    border-bottom: solid 3px #A65AD0;
}
#Container {
    padding-bottom: 50px !important;
	background: url(/assets/src/203/img/login/loginBg2.webp) fixed center center;
	width: 100%;
	/* padding: 50px 0; */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: calc(100vh - 275px);
}
p {
    margin: 0 0 10px;
}
.m-b-md {
    margin-bottom: 20px;
}
.m-t-lg {
    margin-top: 30px;
}
.register {
    margin-top: 2%;
}
.registerStyle{
	border-radius: 8px;
	display: block;
	padding-top: 9%;
	margin-bottom: 20px;
	border: none;
	box-shadow: rgba(40 ,46 ,76 ,0.48) 3px 3px 20px;
	color: white;
	background: rgba(114 ,144 ,169 ,0.29);
    padding-bottom: 8% !important;
}
.hoverPointer :hover{
    cursor:pointer;
}
.btnPre{
    color: #fcb291;
    font-size: 16px;
    padding: 10px 25px;
    margin-top: 9%;
    border: 3px solid #fbb273;
    border-radius: 10px;
    background: none;
}
.btnPre:hover {
    color: white;
    background: #fbb273;
}
.btnCus{
    color: #5fc7c8;
    font-size: 16px;
    padding: 10px 25px;
    margin-top: 9%;
    border: 3px solid #5fc7c8;
    border-radius: 10px;
    background: none;
}
.btnCus:hover {
    color: white;
    background: #5fc7c8;
}

.btnSer{
    color: #A65AD0;
    font-size: 1em;
    padding: 10px 25px;
    margin-top: 9%;
    border: 3px solid #A65AD0;
    border-radius: 10px;
    background: none;
}
.btnSer:hover {
    color: white;
    background: #A65AD0;
}
/*不能點選的樣式*/
.defourtCss {
    cursor: no-drop !important;
}
.defourtCss .mYfont{
    cursor: no-drop !important;
}
.defourtCss b{
    cursor: no-drop !important;
}
.defourtCss p{
    cursor: no-drop !important;
}
.defourtCss strong {
	cursor: no-drop !important;
    font-size: 1.25em;
    background: #a9a7a7 none repeat scroll 0% 0%;
    color: #FFF;
    font-weight: bolder;
    padding: 10px 20px;
    border-radius: 10px;
    width: 100px;
}
.defourtCss hr {
	cursor: no-drop !important;
    margin-top: 10%;
    border-bottom: 3px solid #7d7d7d;
}
.defourtCss a {
	cursor: no-drop !important;
    color: #7d7d7d;
    font-size: 1em;
    padding: 10px 25px;
    margin-top: 15%;
    border: 3px solid #7d7d7d;
    border-radius: 10px;
    background: transparent none repeat scroll 0% 0%;
}
.defourtCss a:hover {
	color: #FFF;
	background: #7d7d7d none repeat scroll 0% 0%;
}
/*demo服务协议样式*/
.marginLeft {
    margin-left: 2em;
}
.infoTop {
    margin-top: -23px;
}
.center{
	background-color: #ffffffd4;
    width: 85%;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 5%;
	border-radius: 10px;
}
.serAgreement{
    border: solid 1px #ddd;
    border-radius: 4px 4px 0 0;
    overflow: auto;
    height: 360px;
	background: white;
}
.agreeInput{
    margin-top:10px;
}
.active{
    background-color: #00a0e9;
}
/*loginBox*/
#login {
    margin: auto;
}
.form-group-display{
	display: flex;
	align-items: center;
}
/*試用站模擬資料登入頁面*/
.prompt{
	font-size: 14px;
	padding-top: 0 !important;
	color: #18d26e;
}
.nextBtn{
	display: flex;
}
.btn_next{
	background: #18d26e;
	width: 150px;
	padding: 5px 0;
}
.btn_pre{
	margin-right: 20px;
	background: #b9b8b8;
	width: 150px;
	padding: 5px 0;
}
.btn_re{
	margin-right: 20px;
	background: #ff9092;
	width: 150px;
	padding: 5px 0;
}
.loginTrial {
    margin-top: 150px !important;
    margin-bottom: 50px !important;
	background: rgba(117, 175, 192, 0.35);
}
.w400{
	font-weight: 400;
}
.servicePage {
	height: 100%;
	display:none;
	position:absolute;
	z-index:200;
}
.servicePage h3{
	margin-bottom: 0;
	text-align: right;
	font-size: 24px;
	position: relative;
	height: 50px;
	color: #fff;
}
.servicePage h3 span{
	right: -15px;
	position: absolute;
	bottom: 0;
	top: -20px;
}
.servicePage h3 p{
	font-size: 18px;
	color: black;
	text-align: center;
	padding-top: 15px;
}
.servicePage h3 i{
	cursor: pointer;
	box-shadow: rgb(0 27 45 / 67%) 0px 3px 8px;
	background: #0066b7;
	border-radius: 100px;
	padding: 8px;
	height: 40px;
	width: 40px;
	text-align: center;
	transition: all 0.5s ease 0s;
}
.servicePage h3 i:hover{
	background: #18d26e;
}
#greybackground {
	background:#000;
	display:block;
	z-index:100;
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
.serviceBox .fa-check-square-o{
	color: #01ffbf;
}
.agreeMaskBox{
	position: relative;
}
.nextBtnS{
	background: #9c9c9c;
	width: 150px;
	border-radius: 8px;
	border: 2px solid #fff;
	margin: 10px 0;
	position: absolute;
	right: 15px;
}
.nextBtnS a{
	color: #fff;
}
.agreeBtn{
	opacity: 0.5;
	width: 100%;
}
.agreeMask{
	width: 100%;
	z-index: 1;
	height: 60px;
	position: absolute;
}
#tel_prefix_options{
	height: 34px;
	background: rgba(34 ,42 ,88 ,0.67) !important;
	color: #fff;
	border: 1px solid rgba(204 ,204 ,204 ,0.49);
}
/*登入提示框*/
.modal-backdrop.show{
	opacity: 0.5 !important;
}
.modal.show .modal-dialog{
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}

/*選擇角色*/
.show {
    opacity: 1 !important;
}
.BDicon{
	position: absolute;
	top: 10px;
	right: 20px;
	text-align: center;
}
.assetIcon{
	position: absolute;
	top: 10px;
	right: 90px;
	text-align: center;
}
.BDicon img{
	width: 60px;
	padding-bottom: 3px;
}
.BDicon p{
	color: #00ff7f;
}
#category h5{
	font-size: 22px;
}
#category span{
	font-size: 18px;
}
.roleSev{
	background: #fbb273;
}
.roleUse{
	background: #5fc7c8;
}
.roleRep{
	background: #A65AD0;
}
.roleDiv{
	min-height: 110px;
	border-radius: 8px;
	display: block;
	padding-top: 15px;
	margin-bottom: 10px;
	border: none;
	color: white;
	padding-bottom: 15px !important;
	line-height: 16px;
}
.roleDivTop{
	height: 25px;
}
.roleDiv hr{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: solid 3px #fff;
}
.roleDiv strong{
	padding: 0;
}
#category{
	border-radius: 8px;
	border: none;
	margin-top: 150px !important;
	margin-bottom: 50px !important;
	background: rgba(117, 175, 192, 0);
}
.chartButton{
	position: relative;
	z-index: 10;
	padding: 20px 0 0 0;
	margin: auto;
	border-bottom: 1px solid #cccccc;
}
.chartButton a{
	color: rgba(255, 255, 255, 0.5);
	display: inline-block;
	margin-bottom: 2px;
	text-align: center;
	background-color: rgba(117, 175, 192, 0) !important;
	border-color: rgba(117, 175, 192, 0) !important;
}
.chartButton img{
	opacity: 0.5;
}
.list-group-item.active img{
	opacity: 1;
}
.list-group-item:hover img{
	opacity: 1;
}
a.list-group-item:hover, a.list-group-item:focus {
    color: #fff;
}
.chartButton h4 {
    margin-bottom: 10px;
    font-size: 18px;
}
#category .btn{
	position: absolute;
	bottom: 20px;
}
#category .registerStyle{
	min-height: 350px;
	height: auto;
}
#homeChart {
	background: url(../img/home/chartBg.jpg) center;
	background-size: cover;
    padding: 50px 0;
}
#homeChart .chartTitle{
	text-align: center;
}
.chartTitle li{	
	color:#428BFF;	
}
#homeChart .row{
	margin: 0;
	
}
#homeChart img{
	width: 100%;
}
#homeChart h2{
	color: #000000;
	font-size: 20px;
}
#homeChart h3{
	color: #000;
}
#homeChart p{
	color: #fff;
}
#homeChart .chartLeft{
	position: relative;
}
#homeChart .chartRight{
	position: absolute;
	bottom: 0;
	right: 0;
}
#homeChart a.chartBtn{
	background: none;
	font-size: 18px;
	font-weight: 400;
	min-height: 40px;
	border: none;
	padding: 0;
	text-align: center;
	float: left;
}
#homeChart a.chartBtn.active{
	color: #235ee7;

}
@keyframes upIndex{
    0%{ 
		opacity: 0; 
		transform: translate(0, 500px) 
	}
    100%{
		opacity: 1; 
		transform: translate(0, 0) 
	}
}
.chartLeft{
	border-radius: 8px;
	border: none;
	/*box-shadow: rgba(40, 46, 76, 0.48) 3px 3px 20px;*/
	/*background: rgba(117, 175, 192, 0.35);*/
	color: #fff;
}

.chartContent{
	animation: upIndex 0.6s;
	-moz-animation: upIndex  0.6s; /* Firefox */
	-webkit-animation: upIndex  0.6s; /* Safari and Chrome */
	-o-animation: upIndex  0.6s; /* Opera */
}
.chartContent{
	padding:20px 0 0 0;
	margin: auto;
}
.chartContent .col-md-10{
	margin: auto;
}
.slider{
	margin: auto;
	-webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
	transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.slider .indicator{
	    position: relative;
	    width: 100px;
	    max-width: 100%;
	    margin: 0 auto;
	    height: 4px;
	    background: #18d26e;
	    border-radius: 1px;
}
.slider.line3{
	    -webkit-transform: translateX(0%);
	    transform: translateX(0%);
}
.slider.line2{
	    -webkit-transform: translateX(-20%);
	    transform: translateX(-20%);
}
.slider.line1{
	    -webkit-transform: translateX(-40%);
	    transform: translateX(-40%);
}
.slider.line4{
	    -webkit-transform: translateX(20%);
	    transform: translateX(20%);
}
.slider.line5{
	    -webkit-transform: translateX(40%);
	    transform: translateX(40%);
}
@media (max-width: 1199px){
	#homeChart {
	    padding: 50px 0 30px 0;
	}
}
@media (max-width: 767px){
	#homeChart .chartRight{
		display: none;
	}
	.center{
	    margin-top: 20%;
	}
}

/* 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: 10px;
    padding-left: 10px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-1-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
}
.T2a, .T2aB, .T2b, .T2bB, .T2c, .T3, .T3B{
	display: none;
}
/*文字閃爍*/
.blink {
	color:#00ff7f;
    animation-duration: 2s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    91% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}