html body {
    overflow: hidden;
}

body {
    background: url("../images/AI-BG_LOGIN-1920X1080.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    font-size: 1.4vw;
    font-family: Trebuchet MS, sans-serif;
}

div {
    posititon: relative;
}

.imgcenter {
	display: block;
	margin-left: auto;
	margin-right: auto;	
	width: 80%;
	padding-top: 20vh;
}

#cname {
	font-size:3vw;font-weight: bold;color: #15B5CF;font-family:'Tw Cen MT Std', sans-serif;vertical-align: middle;text-shadow: 2px 0 #31383F, -2px 0 #31383F, 0 2px #31383F, 0 -2px #31383F,1px 1px #31383F, -1px -1px #31383F, 1px -1px #31383F, -1px 1px #31383F;
}

/*img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}*/

/*-------------------------------------Login Box-------------------------------------*/
#loginBox {
    /* background: -webkit-linear-gradient(to bottom left,#99D3FB 10%, #AADD98); /* Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(to bottom left,#99D3FB 10%, #AADD98 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 2.5vw;
    position: absolute;
    width: 79%;
    /*min-width:600px;
	min-height:200px;*/
    padding-top: 40%;
    /*border:1px red solid;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin:0 auto;
}

.loginTopicImg {
    position: absolute;
    width: 90%;
    height: auto;
    margin: auto;
    left: 0;
    right: 1%;
    top: 7%;
    text-align: center;
}

.loginBtnNew {
    position: absolute;
    width: 23%;
    height: auto;
    margin: auto;
    left: 59%;
    right: 1%;
    top: 51.5%;
    text-align: center;
    cursor:pointer;
}

#loginBox table {
    position: absolute;
    top: 64%;
    left: 37.5%;
    width: 60%;
    height: 26%;
    transform: translate(-50%, -50%);
}

    #loginBox table tr:nth-child(1) {
        height: 50%;
    }

    #loginBox table img {
        width: 100%;
        height: auto;
    }

    #loginBox table td:nth-child(1) {
        width: 35%;
        text-align: center;
    }

    #loginBox table td:nth-child(2) {
        width: 65%;
        text-align: center;
    }


.textBox {
    padding-bottom:0;
    padding-top:0;
    padding-left: 0.8vw;
    padding-right: 0.8vw;
    width: 88%;
    height: 80%;
    font-size: 2vw;
    border: none;
    border-radius: 0.5vw;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.2) inset;
    -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0.2) inset;
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0.2) inset;
    background-color: #FFFFFE;
    left: 48%;
}

.loginBtn:hover {
    margin-top: 0.2vw;
}


/*-------------------------------------footer-------------------------------------*/
.fixed-bottom {
	background-image: url('../images/AI-BG_whiteBar.png?v=3');
    background-color: transparent;
	background-size: 100% 100%;
    height: 5vw;
    position: fixed;
    bottom: 0;
    width: 100%;
	display: grid;
	place-content: center;
	font-family: Varino;
}

    .fixed-bottom a {
        color: inherit;
        text-decoration: none;
    }

.fixed-bottom1 {
    background-color: transparent;
	background-size: 100% 100%;
    height: 12vw;
    position: fixed;
    bottom: 0;
    width: 100%;
	display: grid;
	place-content: center;
	font-family: Varino;
}

    .fixed-bottom1 a {
        color: inherit;
        text-decoration: none;
    }

.footer {
    width: 100%;
	margin-left: auto;
	margin-right: auto;
}

    .footer table {
        width: 100%;
        border-collapse: collapse;
		vertical-align: middle;
    }

    .footer td {
        white-space: nowrap;
        color: #275763;
        font-size: 0.9vw;
        font-weight: bold;
        /* text-shadow: 0.2vw 0.2vw 1vw #88FF88; */
		padding-top: 0.8vh;
    }

        .footer td:nth-child(1) {
            text-align: left;
        }

        .footer td:nth-child(2) {
            text-align: left;
        }

        .footer td:nth-child(3) {
            text-align: left;
        }

        .footer td:nth-child(4) {
            text-align: left;
        }
		
.bottom-adjust {
	padding-top: 4vh;
}
/*-------------------------------------ratio-------------------------------------*/
@media only screen and (min-aspect-ratio:2248/1242) {
    body {
        background-image: url("../images/BG_2423X1125.png");
    }

    #loginBox {
        padding-top: 32%;
        width: 72%;
        top: 47%;
    }

        #loginBox table img {
            width: 90%;
            height: auto;
        }

    .fixed-bottom {
        height: 5vw;
    }

    .loginBtn {
        top: 51.5%;
        width: 20.5%;
        left: 57%;
    }
	
	.imgcenter {
		display: block;
		margin-left: auto;
		margin-right: auto;		
		width: 60vw;
		padding-top: 19vh;
	}
}

@media only screen and (max-aspect-ratio:42/30) {
    body {
        background-image: url("../images/BG_2224X1668.png");
    }

    #loginBox {
        top: 45%;
        padding-top: 45%;
    }

    .loginTopicImg {
        top: 10%;
    }

    .loginBtn {
        top: 53.5%;
    }
	
	.imgcenter {
		display: block;
		margin-left: auto;
		margin-right: auto;	
		width: 62%;
		padding-top: 18vh;
	}	
}


@media only screen and (max-aspect-ratio:35/30) {
    body {
        /* background-image: url("../images/bg_1x1.jpg"); */
		background-image: url("../images/BG_2224X1668.png");
    }

    #loginBox {
        top: 47%;
        padding-top: 52%;
        width: 85%
    }

    .loginTopicImg {
        top: 10%;
    }

    .loginBtn {
        top: 54%;
    }
	
	.imgcenter {
		display: block;
		margin-left: auto;
		margin-right: auto;	
		width: 90%;
		padding-top: 30vh;
	}	
	
	.bottom-adjust {
		padding-top: 0vh;
	}

	#cname {
		font-size:5vw;font-weight: bold;color: #15B5CF;font-family:'Tw Cen MT Std', sans-serif;vertical-align: middle;text-shadow: 2px 0 #31383F, -2px 0 #31383F, 0 2px #31383F, 0 -2px #31383F,1px 1px #31383F, -1px -1px #31383F, 1px -1px #31383F, -1px 1px #31383F;
	}
}