/*
@font-face {
  font-family: SweiGothicCJKtc-Regular;
  src: url(https://cdn.jsdelivr.net/gh/max32002/swei-gothic@2.129/WebFont/CJK%20TC/SweiGothicCJKtc-Regular.woff2) format("woff2")
  , url(https://cdn.jsdelivr.net/gh/max32002/swei-gothic@2.129/WebFont/CJK%20TC/SweiGothicCJKtc-Regular.woff) format("woff");
}
*/

body {
    overflow: hidden;
    background-image: url('/images/login/20220113/bg-left.png?2022'),url('/images/login/20220113/bg-right.png');
    background-repeat: no-repeat;
    background-position-x: left,right;
    background-position-y: bottom,top;
    background-color: #78cfd8;
    position: relative;
    font-family: '微軟正黑體', sans-serif;
}

.wrap {
    height: 100VH;
    justify-content: center;
    display: flex;
}
.login {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    height: 540px;
    z-index: 999;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 0 25px rgb(0 0 0 / 20%);
    border-radius: 10px;
}

.login p {    font-size: 20px;    letter-spacing: 1px;}
.login img {
    margin: 50px auto 20px;
    width: 88%;
    max-width: 300px;
}
form {    width: 80%;    margin: 20px auto 10px;}
.btn-2020 {
    border: 1px solid transparent;
    border-width: 1px;
    -moz-border-image: -moz-linear-gradient(to right, #00d7d1 0%, #00b6ff 100%);
    -webkit-border-image: -webkit-linear-gradient(to right, #00d7d1 0%, #00b6ff 100%);
    border-image: linear-gradient(to right, #00d7d1 0%, #78cfd8 100%);
    border-image-slice: 1;
    background-color: #44b3be;
    color: #00c3ec;
    font-size: 20px;
    width: 100%;
    border-radius: 5px;
    display: inline-block;
    height: 40px;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
}
.btn-2020:hover {
    background: #35a4af;
    /* color: #fff; */
}
a.btn-2020:hover {
    background: #e14473;
    color: #fff;
}
a.btn-2020 {
    margin-top: 20px;
    text-decoration: none;
    background-color: #ef5281;
    border-radius: unset;
    border: #ef5281;
    letter-spacing: 3px;
}
.forgot_wrap {    text-align: right;}
a.forgot {       display: inline-block;    text-decoration: none;}

input.btn-2020 {    margin-top: 25px;}
.password {    margin-top: 15px;}
.side-quick-link{display:none;}

.logo {    margin-bottom: 15px;    display: inline-block;}

.hidden_wrap {    width: 430px;}

.block_wrap {  font-family:'Noto Sans CJK TC','微軟正黑體',sans-serif;  display: inline-block;    color: #fff;    text-align: center;  position: relative;    z-index: 99;}
.notice {
    color: #233d4d;
    text-align: left;
    padding: 0;
    /* letter-spacing: 1px; */
    max-width: 495px;
    margin: 0 auto;
    font-size: 14px;
    font-family: '微軟正黑體';
}
.block_title {
    font-size: 24px;
    font-weight: bold;
    width: 100%;
    letter-spacing: 2px;
    max-width: 490px;
    padding: 5px;
    border-radius: 50px;
    background-color: #ef5281;
    margin: 5px auto;
}
.block_text {    font-size: 30px;}
.block_img {    width: 100%;    max-width: 987px;    z-index: 9;}
.login_wrap {    position: relative;    z-index: 99;}
.wrap_2 {    margin-left: 0;    z-index: 1;}
.block_img img {    width: 100%;}
.block_title span {
    font-family: 'Noto Sans CJK TC','微軟正黑體';
    font-size: 45px;
    padding: 0 10px;
}
textarea:focus, select:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus {
	border: 1px solid #0850c0;}
.block {
    margin-left: 10%;
}
.main-img img {
    margin: 0 auto;
}
.coupon {
    margin: 25px 10px;
    background-image: url(/images/login/20220113/coupon-blue.png);
    width: 233px;
    height: 96px;
}

.coupon.pink {
    margin: 25px 10px;
    background-image: url(/images/login/20220113/coupon-pink.png);
    width: 233px;
    height: 96px;
}



.coupon-left {
    width: 60px;
    padding: 7px 12px;
    font-size: 22px;
    line-height: 1.1;
    font-weight: bold;
    text-align: center;
    height: 95px;
}
.coupon-left span {
    font-size: 31px;
}

.coupon-right {
    color: #003a4e;
    padding-top: 12px;
    width: 172px;
    font-weight: bold;
    font-size: 60px;
    position: relative;
}
.coupon-right .ver {
    width: 24px;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.2;
    display: inline-block;
    margin-left: -35px;
}

.coupon-right span {
    background-color: #003a4e;
    color: #fff;
    font-size: 28px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-block;
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 48px;
    right: 12px;
}

.coupon.pink .coupon-right {
    color: #ef5281;
}
.coupon.pink .coupon-right span {
    background-color: #ef5281;
}







@media screen and (max-width: 1600px) {
.block_text {    font-size: 26px;}
}
	
@media screen and (max-width: 1440px) {



}

@media screen and (max-width: 1366px) {

body {
    background-size: 13%,30%;
}
	
	
}

@media screen and (max-width: 1024px){

}


@media screen and (max-width: 992px){
body {background-image: none ;position: relative; background-color: #fff;}
.wrap_2 {display: none;}
.block_wrap {    display: none;}
.login_wrap {    text-align: center;}
.login {    margin: 0 auto; 	box-shadow: none;	}
.wrap {    margin: 0;}
	
	}
	
@media screen and (max-width: 640px){

.wrap {    min-height: 400px;   height: 65VH;}
.login img {    max-width: 250px;  margin: 50px 0 4%;}
.login {        height: auto;  max-width: 640px;}

		
form {    width: 100%;}	
/*.btn-2020 {    border-image: none;    border: 1px solid #00c3ec;}	*/

}