.warp {
    width: 100%;
    height: auto;
    background: url(../images/login/loginBg02.jpg) no-repeat 35% 25%;
    position:relative;
}

.contentArea {
    width: 100%;
    height: 100vh;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
    flex-direction: row;
    position: relative;
    justify-content: center;
}
.logArea {
    width: 800px;
    height: auto;
    margin: 0 5%;
    background: url(../images/login/bgLine.png) no-repeat 100% 100%, #0C2340;
    padding: 4rem 5% 20px;
    background-position: top;
    background-size: cover;
}
	.logoGold{
	    text-align: center;
	    margin: 0 0 30px;
	}
	.logArea h1 {
	    width: 100%;
	    height: 60px;
	    background: url(../images/login/nameBg.png) no-repeat;
	    color: #fff;
	    font-size: 26px;
	    font-weight: 600;
	    text-align: center;
	    letter-spacing: 2px;
	    padding-top: 13px;
	    margin: 7vh 0 7vh;
	    background-position: top;
	}
	.logArea > form{
		width: 80%;
	    height: auto;
	    margin: 0 auto;
	    padding: 0;
	}
		.inupt-line {
			display: flex;
		    -ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		    margin-right: 0px;
		    margin-left: 0px;
		    flex-direction: row;
		    align-content: center;
		    justify-content: flex-start;
		    align-items: center;
		    gap: 10px;
		    margin-bottom: 40px;
		}
			.inupt-line > label {
			    width: 100%;
			    font-size: 18px;
			    color: #ffffff;
			    letter-spacing: 5px;
			    margin-bottom: 0;
			}
			.inupt-line > input,
			input[name="vcode"] {
			    width: 100%;
			    color: #ffffff;
			    background: none;
			    border: none;
			    border-bottom: 1px solid #ffffff;
			    border-radius: unset;
			    padding-bottom: 5px;
			    font-size: 18px;
			}
		.Vcode{
		    width: 85%;
		    height: 35px;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    justify-content: space-between;
		    align-items: flex-end;
		    gap: 5%;
		}
		.remember{    width: 90%;margin: -10px 0 40px 5px;}

			input[type="checkbox"] {
			    width: 20px;
			    height: 20px;
			}
				input[name="rememberBox"] {    display: none;}
			/*.form-check label{
			    padding-left: 30px;
			}*/
			.form-check label::before{
			    content: "";
			    left: 0;
			    top: 5px;
			    position: absolute;
			    outline: 2px solid #fff;
			    border-radius: 3px;
			    width: 18px;
			    height: 18px;
			}
			.form-check label::after{
			    display:none;
			    content: "";
			    left: 6px;
			    top: 6px;
			    position: absolute;
			    width: 7px;
			    height: 13px;
			    border-right: 2px solid #f39800;
			    border-bottom: 2px solid #f39800;
			    transform: rotate(40deg);
			}
			
			input[type=checkbox]:checked+label::after{			    display:block; //點擊後將勾勾設為可視			}
			label[name="remember"]{ color: #fff;font-size: 18px;letter-spacing: 1px; }
			.form-check-label {    padding-left: 0.5rem;}
			input[name=account]:focus-visible, 
			input[name=password]:focus-visible,
			input[name=host]:focus-visible,
			input[name=vcode]:focus-visible,
			input[name=store_account]:focus-visible {     outline : 0 ;}

	.btnArea {
	    width: 100%;
	    height: 50px;
	    position: relative;
	    margin-left: 5px;
	}
	.btnBlue {
	    width: 100%;
	    height: 50px;
	    border-radius: 50px;
	    border: 2px solid #fff;
	    background: hsl(0deg 0% 100% / 0%);
	    color: #fff;
	    letter-spacing: 10px;
	    font-weight: 500;
	    font-size: 18px;
	    /*margin: 0 2% 0 8%;*/
	}
		.btnBlue:hover{
			width: 100%;
			background:#fff;
			color: #000;
			transition: 0.5s ease;
			border-radius: 0;
			font-weight: 600;		
		}

	.btnBlue:before {
		width: 90%;
	    position: absolute;
	    left: 0%;
	    top: 0;
	    right: 95px;
	    background: hsla(0, 0%, 100%, .08);
	    height: 1px;
	    content: "";
	    z-index: 1;
	    transition: all .5s ease;
	    opacity: 0;
	}
		.btnBlue:hover:before {
			width: 90%;
		    left: 8%;
		    right: 0;
		    background: #fff;
		    opacity: 1;
		}			
	.btnBlue:after {
		width: 90%;
	    position: absolute;
	    left: 0%;
	    bottom: 0;
	    right: 50px;
	    background: hsla(0, 0%, 100%, .08);
	    height: 1px;
	    content: "";
	    z-index: 1;
	    transition: all .5s ease;
	    opacity: 0;
	}
		.btnBlue:hover:after {
			width: 90%;
		    left: 8%;
		    right: 0;
		    background: #fff;
		    opacity: 1;
		}			
	.btnArea .bdrl {
	    position: absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    width: 1px;
	    background: hsla(0, 0%, 100%, .08);
	    transform: scale(0);
	    transform-origin: left top;
	    transition: all .5s ease;
	    z-index: -1;
	}
		.btnArea:hover .bdrl {
		    transform: scale(1);
		    background: #fff;
		}			
	.btnArea .bdrr {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    width: 1px;
	    background: hsla(0, 0%, 100%, .08);
	    transform: scale(0);
	    transform-origin: left top;
	    transition: all .5s ease;
	    z-index: -1;
	}
		.btnArea:hover .bdrr {
		    transform: scale(1);
		    background: #fff;
		}

	.forgetArea {
	    width: 95%;
	    height: auto;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: center;
	    margin: 10px auto 20px;
	    justify-content: space-between;
	}
		.forgetBtn, .registerBtn {
		    color: #fff;
		    font-size: 16px;
		    letter-spacing: 1px;
		    position: relative;
		    /* padding: 0 10%; */
		    width: auto;
		    /* min-width: 45%; */
		    text-align: center;
		}
		.forgetBtn:hover, 
		.registerBtn:hover{
			color: #4c7fcb;
		    text-decoration: none;
		}
			.forgetBtn:after, 
			.registerBtn:after{
				width: 0%;
				height: 1px;
				position: absolute;
			    left: 0;
			    bottom: 0;
			    content: "";
			    transition: all .5s ease;
			    opacity: 0;
			}

			.forgetBtn:hover:after{
				width: 77px;
				background: #4c7fcb;
		    	opacity: 1;
			}
			.registerBtn:hover:after{
				width: 87px;
				background: #4c7fcb;
		    	opacity: 1;
			}
	.lineGray{
	    color: #9a9898;
	    font-size: 13px;
	}

input::placeholder {font-size: 16px!important;}

@media only screen and (max-width: 1024px) {  
	.row {
     margin-right: 0px!important; 
     margin-left: 0px!important; 
    } 
	.logArea {    width: 600px;padding: 2.5rem 5% 50px;}
	.warp {    background: url(../images/login/loginBg02.jpg) no-repeat 100% 40%;}
	.logoGold {    margin: 0 0 30px;}
	.logArea h1 {	    padding-top: 13px;margin: 5vh 0 5vh;	 }
	.inupt-line {    gap: 5px; margin-bottom: 20px;}
}

@media only screen and (max-width: 820px) {  
    /*.warp {    background: url(../images/login/loginBg02.jpg) no-repeat 100% 100%;}*/
    .logArea {	    width: 70%;margin: 0 5%;padding: 5rem 0 20px;	}   
    .inupt-line {    margin-bottom: 30px;}
}

@media only screen and (max-width: 575px) {
	.warp {        background: url(../images/login/loginBg02.jpg) no-repeat 75% 70%;    }
	.logoGold img{ width: 230px; }
	.logArea {	   width: 90%;padding: 1.5rem 0 30px;	}   
	.logArea h1 {        font-size: 22px;    }
}

@media only screen and (max-width: 430px) {
	.logArea h1 {
	    background-size: 80%;
	    margin: 4vh 0 2vh;
	    padding-top: 11px;
	}
}

@media only screen and (max-width: 390px) {
	.logArea h1 {
        background-size: 85%;
        font-size: 22px;
        margin: 6vh 0 4vh;
        padding-top: 11px;
    }
}