﻿#login {display: flex; justify-content: center; padding-top: 150px; padding-bottom: 200px; background-color:#f4f4f4;}
#login .cont {width: 450px;}

#login .tis {display: flex; align-items: center; justify-content: space-between;}
#login .tis h2 {color:#000; font-size: 24px; line-height: 1;}
#login .tis span {color:#888; cursor: pointer;}
#login .dl2, #login .reg {display: none;}

#login .form {margin-top: 30px;}
#login .form .item {display: flex; height: 50px; border-radius: 5px; border: 1px solid #dcdee0; background-color:#fff; overflow: hidden;}
#login .form .item:not(:first-child) {margin-top: 20px;}
#login .form .item:hover {border-color:#228ee7;}
#login .form .item input:-moz-placeholder {color:#aaa;}
#login .form .item input::-moz-placeholder {color:#aaa;}
#login .form .item input:-ms-input-placeholder {color:#aaa;}
#login .form .item input::-webkit-input-placeholder {color:#aaa;}

#login .form .item .text {flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; width: 130px; color:#454545; font-weight: bold; box-sizing: border-box; border-right: 1px solid #dcdee0;}
#login .form .item .input {flex: 1 1 auto; position: relative; font-size: 0;}
#login .form .item .input input {padding: 0 15px; width: 100%; height: 100%; color:#000; border: none; background-color:#fff;}
#login .form .item .input select {position: absolute; inset: 0; z-index: 10; opacity: 0; border: none; background-color:#fff; cursor: pointer;}
#login .form .item .xls::after {position: absolute; top: 50%; right: 15px; z-index: 2; display: block; width: 10px; height: 5px; background-color:#999; content: ''; clip-path: polygon(50% 100%, 0% 0%, 100% 0%); transform: translateY(-50%);}

#login .form .item .pcct {flex: 1 1 auto; display: flex; position: relative; font-size: 0;}
#login .form .item .pcct div {flex: 0 0 auto; position: relative; width: 33.33%; box-sizing: border-box;}
#login .form .item .pcct div:not(:last-child) {border-right: 1px solid #dcdee0;}
#login .form .item .pcct div::after {position: absolute; top: 50%; right: 15px; z-index: 2; display: block; width: 10px; height: 5px; background-color:#999; content: ''; clip-path: polygon(50% 100%, 0% 0%, 100% 0%); transform: translateY(-50%);}
#login .form .item .pcct div input {padding: 0 15px; width: 100%; height: 100%; color:#000; border: none; background-color:#fff;}
#login .form .item .pcct div span {position: absolute; inset: 0; z-index: 10; opacity: 0; cursor: pointer;}
#login .form .item .pcct div span .input_select {width: 100%; height: 100%; border: none; background-color:#fff;}

#login .form .item .yzm {position: absolute; top: 50%; right: 10px; font-size: 12px;  border-radius: 3px; background-color:#e0e0e0; transform: translateY(-50%);}
#login .form .item .yzm span {display: block; padding: 6px 10px; color:#333; cursor: pointer;}
#login .form .item .yzm strong {display: block; padding: 6px 10px; color:#888; text-shadow: 0 1px 1px #eee; font-weight: normal;}
#login .form .btns {margin-top: 30px; font-size: 0;}
#login .form .btns button {width: 100%; height: 50px; color:#fff; font-size: 14px; border: none; border-radius: 5px; background-color:#228ee7;}
#login .form .btna {margin-top: 15px; text-align: right;}
#login .form .btna span {cursor: pointer;}
#login .form .btna span:hover {color: #228ee7;}

@media (max-width: 480px){
	#login {padding: 10% 5%;}
	#login .cont {width: 100%;}

	#login .tis h2 {font-size: 18px;}

	#login .form {margin-top: 4%;}
	#login .form .item {height: 40px; border-radius: 4px;}
	#login .form .item:not(:first-child) {margin-top: 4%;}
	#login .form .item .text {padding-right: 10px; width: 100px; font-size: 12px;}
	#login .form .item .input input {padding: 0 10px;}
	#login .form .btns {margin-top: 5%;}
	#login .form .btns button {height: 40px; font-size: 14px; border-radius: 4px;}

	#login .form .dzs {height: auto;}
	#login .form .item .pcct {display: block;}
	#login .form .item .pcct div {width: 100%; height: 40px;}
	#login .form .item .pcct div:not(:last-child) {border-right: none;}
	#login .form .item .pcct div input {padding: 0 10px;}
}