@charset "UTF-8";
/*#region text */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Microsoft JhengHei'; }

.wrap {
  display: flex;
  height: 100vh; }

.bg {
  width: 50%;
  background: url(images/bg1920x1080.svg);
  background-repeat: no-repeat;
  position: relative;
  background-attachment: fixed;
  background-position: 0 0; }

.bg .bg_box {
  height: 100%; }

.e_name {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%; }

.e_name h1 {
  font-size: 78px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  writing-mode: vertical-lr;
  margin-left: 70px;
  position: relative; }

.logo {
  width: 50%;
  position: absolute;
  bottom: 250px; }

.logo img {
  width: 100%; }

.bg h2 {
  position: absolute;
  bottom: 210px;
  font-size: 42px;
  font-weight: 500;
  color: #fff; }

.logo,
.bg h2 {
  left: 300px; }

.content {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center; }

.login {
  display: flex;
  text-align: center;
  margin-top: -80px; }

.login h2 {
  font-size: 122px;
  font-weight: 500;
  color: #269aff;
  margin-bottom: 70px; }

.input_div {
  display: grid;
  grid-template-columns: 15% 85%;
  margin-bottom: 45px;
  padding: 6px 12px;
  background: #f2f2f2;
  border-radius: 15px;
  width: 500px;
  height: 80px; }

.focus {
  background: #e6e6e6; }

.input_div div {
  position: relative; }

.icon {
  margin: auto;
  transition: 0.3s; }

.icon img {
  width: 90%; }

.type input {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 28px;
  color: #333; }

.btn {
  font-size: 38px;
  color: #fff;
  display: block;
  width: 100%;
  height: 90px;
  border-radius: 50px;
  outline: none;
  border: none;
  background: #269aff;
  color: #fff;
  margin: auto;
  margin-top: 90px;
  transition: 0.5s; }

.btn:hover {
  box-shadow: 0 15px #0f225f;
  color: #fff;
  cursor: pointer; }

/*#endregion text */
@media (max-width: 1680px) {
  .icon {
    padding-top: 4px; }
  .bg h2 {
    font-size: 38px; }
  .e_name h1 {
    font-size: 70px; }
  .input_div {
    width: 450px;
    margin-bottom: 35px;
    height: 75PX; }
  .btn {
    height: 85px; } }

@media (max-width: 1600px) {
  .e_name h1 {
    font-size: 70px;
    margin-left: 60px; }
  .logo {
    bottom: 200px; }
  .bg h2,
  .btn {
    bottom: 160px;
    font-size: 36px; }
  .logo,
  .bg h2 {
    left: 300px; } }

@media (max-width: 1440px) {
  .bg h2,
  .btn {
    font-size: 32px; }
  .logo,
  .bg h2 {
    left: 250px; }
  .login h2 {
    font-size: 110px; }
  .btn {
    height: 96px; } }

@media (max-width: 1400px) {
  .e_name h1 {
    font-size: 80px; }
  .logo {
    width: 50%; }
  .bg h2,
  .btn {
    font-size: 34px;
    bottom: 210px; }
  .logo {
    bottom: 250px; } }

@media (max-width: 1366px) {
  .bg {
    background-size: 106% 100%; }
  .e_name h1 {
    font-size: 60px; }
  .bg h2,
  .btn {
    font-size: 30px;
    bottom: 160px; }
  .logo {
    bottom: 200px; }
  .login {
    margin-top: -70px; }
  .login h2 {
    font-size: 90px;
    margin-bottom: 60px; }
  .input_div {
    width: 400px;
    height: 65px; }
  .btn {
    height: 75px; } }

@media (max-width: 1138px) {
  .bg {
    background-attachment: local;
    background-size: 213.3333% 100%; } }

@media (max-width: 1024px) {
  .bg {
    background-attachment: fixed;
    background-image: url(images/bg1024x768.svg);
    background-size: 111% 100%; }
  .e_name h1 {
    font-size: 50px;
    margin-left: 40px; }
  .logo {
    width: 50%;
    bottom: 170px; }
  .bg h2 {
    bottom: 140px; }
  .bg h2,
  .btn {
    font-size: 26px; }
  .logo,
  .bg h2 {
    left: 180px; }
  .login h2 {
    font-size: 80px; }
  .input_div {
    width: 350px;
    height: 60px;
    margin-bottom: 30px; }
  .type input {
    font-size: 24px;
    padding-left: 5px; }
  .icon img {
    width: 78%; }
  .btn {
    height: 66px;
    margin-top: 70px; } }

@media only screen and (min-height: 950px) and (min-width: 500px) and (max-width: 1000px) {
  /*特殊尺寸*/
  .logo {
    bottom: 23%;
    left: 30%;
    width: 72%; }
  .bg h2 {
    bottom: calc(23% - 40px);
    left: 30%;
    font-size: 32px; } }

@media (max-width: 768px) {
  .wrap {
    display: block; }
  .bg {
    background-image: url(images/bg414x736.svg);
    background-size: 150% 104%;
    background-attachment: revert;
    background-position: 100% 0;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .bg .bg_box {
    display: inline-block;
    position: relative;
    width: calc(100% - 5%); }
  .C_name, .e_name, .logo {
    position: absolute; }
  .e_name {
    height: 50px;
    top: calc(60% - 55px); }
  .C_name {
    height: 40px;
    top: 60%;
    width: 100%;
    text-align: center; }
  .content {
    width: 100%;
    height: 60%; }
  .login h2 {
    display: none; }
  .e_name h1 {
    font-size: 28px; }
  .logo {
    bottom: unset;
    width: 100%;
    left: 43px;
    top: calc(30% - 50px);
    max-height: 100px;
    display: inline-flex; }
  .e_name h1 {
    margin: 0 auto;
    writing-mode: unset;
    color: #fff;
    text-align: center; }
  .C_name h2 {
    left: unset;
    width: 100%;
    bottom: unset; }
  .login {
    margin-top: -3%; }
  .content {
    display: flex;
    justify-content: center;
    align-items: center; }
  .input_div {
    width: 514px;
    height: 75px;
    margin-bottom: calc(8% - 25px); }
  .btn {
    font-size: 32px;
    height: 85px; } }

@media only screen and (max-height: 730px) and (min-width: 400px) and (max-width: 768px) {
  .btn {
    margin-top: 5%; } }

@media (max-width: 660px) {
  .input_div {
    width: 100%;
    margin: 5px auto 20px;
    height: 50px; }
  .type input {
    position: relative; }
  .btn {
    font-size: 24px;
    height: 50px; } }

@media (max-width: 450px) {
  .logo {
    width: 90%;
    margin: 0 auto; }
  .bg h2, .e_name h1 {
    text-align: center;
    left: 0; }
  .login {
    padding: 8%; } }

@media (max-width: 360px) {
  .e_name h1 {
    font-size: 20px; } }