
@import "./common.css";
:root {

/* ºìÉ« */
  --primary: #D92E2D;
  --bg:url("/zfcg/static/gboat2.index/themes/default/images/bg11.jpg") no-repeat center center /100% 100%;
  --pr2:#870E0E;
/* À¶É« */
 /* --primary: #4192F7;
  --bg:url("/zfcg/static/gboat2.index/themes/default/images/bg2.jpg") no-repeat center center /100% 100%;
  --pr2:#0C53A8;  */
  
  --color: #c80101;
  --shadow:color(var(--primary) a(-30%));

}
/* ----main css begin-------*/

.container-login {
  width: 100%;
  height: 100%;
  min-width: 1300px;
  overflow: hidden
}

.container-login .login{
      min-width: 1200px;
      width:100%;
      overflow:hidden
  }

@media  (max-width: 1600px){

.container-login .login{
         width:1600px
  }
      }

@media (max-width: 1440px){

.container-login .login{
         width:1440px
  }
      }

.container-login .login{
      margin: 0 auto;
      position: relative
  }

.container-login .login > .header{
        height: 150px;
        border:0 !important
      }

@media (max-width: 1600px){

.container-login .login > .header{
          height: 130px
      }
        }

@media (max-width: 1440px){

.container-login .login > .header{
          height: 120px
      }
        }

.container-login .login > .panel{
          height: 600px;
          margin:0 auto
      }

@media (max-width: 1600px){

.container-login .login > .panel{
            height: 550px
      }
          }

@media (max-width: 1440px){

.container-login .login > .panel{
            height: 400px
      }
          }

.container-login .login > .ftlogin{
        text-align: center;
      }

.container-login .login .c{
        width:100%;
        margin: 0 auto;
        height: 100%;
        display: table;
  
        position: relative
      }

.container-login .login .c .logo1{
       
          height: 100%;
          display: table-cell;
          vertical-align: middle;
          font-size:36px;
          font-family:PingFangSC-Semibold;
          font-weight:700;
          color:#333;
          text-align: left;
          padding-left: 40px;
          width:750px;
        }

.container-login .login .c .logo2{
          height: 100%;
          display: table-cell;
          vertical-align: middle;
          font-size:28px;
          font-family:PingFangSC-Medium;
          font-weight:500;
          color:#D92E2D;
          color:#D92E2D;
          color:var(--primary);
          text-align: left;
          position: relative;
           line-height: 35px
        }

.container-login .login .c .logo2::before{
              content: "";
              width:2px;
              height: 35px;
              float: left;
              background: #D92E2D;
              background: #D92E2D;
              background: var(--primary);
              margin-right: 25px;
          }

.container-login .login .c.pp{
            width:100%;
            position: relative;
            height: 100%;
            background: url(/zfcg/static/gboat2.index/themes/default/images/bg11.jpg) no-repeat center center /100% 100%;
        }

.container-login .login .c .pan{
          position: absolute;
          top:-46px;
          margin-left: 58%;
          width:540px;
          bottom:-24px;
          background:#fff;
          box-shadow:10px 0px 60px 0px rgba(39,100,171,0.2);
          border-radius:4px
        }

@media (max-width: 1600px){

.container-login .login .c .pan{
              top:-36px;
              bottom:-19px;
              width:420px
        }
            }

@media (max-width: 1440px){

.container-login .login .c .pan{
              top:-26px;
              bottom:-14px;
              width:380px
        }
            }

.container-login .login .c .pan >.title{
              width:100%;
              float: left;
              margin-top: 100px;
          }

@media  (max-width: 1600px){

.container-login .login .c .pan >.title{
                margin-top: 60px;
          }
              }

@media  (max-width: 1440px){

.container-login .login .c .pan >.title{
                margin-top: 25px;
          }
              }

.container-login .login .c .pan >.title{
              text-align: center;
              font-size:36px;
              font-family:PingFangSC-Semibold;
              font-weight:600;
              color: #D92E2D;
              color: #D92E2D;
              color: var(--primary);
          }

.container-login .login .c .pan .pa{
              width:100%;
              height: 330px;
              float: left;
              margin-top: 130px;
              text-align: center;
              font-size:36px;
              font-family:PingFangSC-Semibold;
              font-weight:600;
              color:#D92E2D;
              color:#D92E2D;
              color:var(--primary);
              margin-top: 40px;
              padding: 0 80px;
              position: relative;
              overflow:hidden
          }

@media  (max-width: 1600px){

.container-login .login .c .pan .pa{
                margin-top: 40px;
                padding: 0 60px;
                height: 300px
          }
              }

@media  (max-width: 1440px){

.container-login .login .c .pan .pa{
                margin-top: 11px;
                height: 226px
          }
              }

.container-login .login .c .pan .pa li{
                width:50%;
                float: left;
                height: 60px;
                line-height: 60px;
                font-size:20px;
                font-family:PingFangSC-Medium;
                font-weight:400;
                color:#ccc;
                border-bottom:1px solid #DCDCDC;
                cursor: pointer
              }

@media  (max-width: 1600px){

.container-login .login .c .pan .pa li{
                  height: 50px;
                  line-height: 50px
              }
                }

@media  (max-width: 1440px){

.container-login .login .c .pan .pa li{
                  height: 40px;
                  line-height: 40px
              }
                }

.container-login .login .c .pan .pa li.on{
                  border-bottom: 2px solid #D92E2D;
                  border-bottom: 2px solid #D92E2D;
                  border-bottom: 2px solid var(--primary);
                  color:#D92E2D;
                  color:#D92E2D;
                  color:var(--primary)
                }

.container-login .login .c .pan .pa li.on .filed{
                      display:block;
                   }

.container-login .login .c .pan .pa li .filed{
                    width:100%;
                    display:none;
                    position: absolute;
                    left:0;
                    top:75px;
                    padding: 40px 60px
                }

@media  (max-width: 1600px){

.container-login .login .c .pan .pa li .filed{
                         padding: 30px 60px
                }
                      }

@media  (max-width: 1440px){

.container-login .login .c .pan .pa li .filed{
                         padding: 0px 60px
                }
                      }

.container-login .login .c .pan .pa li .filed .filedItem, .container-login .login .c .pan .pa li .filed .filedBtn{
                      width:100%;
                      float: left;
                      width:100%;
                      height:50px;
                      border-radius:25px;
                      margin-bottom: 20px;
                      border:0;
                      padding-left: 3rem;
                      padding-right: 1rem
                    }

@media  (max-width: 1600px){

.container-login .login .c .pan .pa li .filed .filedItem, .container-login .login .c .pan .pa li .filed .filedBtn{
                        height:40px
                    }
                      }

@media  (max-width: 1440px){

.container-login .login .c .pan .pa li .filed .filedItem, .container-login .login .c .pan .pa li .filed .filedBtn{
                        height:35px
                    }
                      }

.container-login .login .c .pan .pa li .filed .filedItem.un,.container-login .login .c .pan .pa li .filed .filedBtn.un{
                        background: url("/zfcg/static/gboat2.index/themes/default/images/username.png") no-repeat left 15px center rgba(242,242,242,1);
                      }

.container-login .login .c .pan .pa li .filed .filedItem.pw,.container-login .login .c .pan .pa li .filed .filedBtn.pw{
                        background: url("/zfcg/static/gboat2.index/themes/default/images/password.png") no-repeat left 15px center rgba(242,242,242,1);
                      }

.container-login .login .c .pan .pa li .filed .filedBtn{
                      background: #D92E2D;
                      background: #D92E2D;
                      background: var(--primary);
                      box-shadow:0px 5px 19px 0px rgba(217, 46, 45, 0.71);
                      box-shadow:0px 5px 19px 0px rgba(217, 46, 45, 0.71);
                      border-radius:25px;
                      font-size:18px;
                      font-family:PingFangSC-Semibold;
                      font-weight:600;
                      color:rgba(255,255,255,1);
                      /* margin-top: 10px; */
                      padding-left: 0;
                      padding-right: 0;
                    }

.container-login .login .c .pan .mak{
              float: left;
              width:100%;
              text-align: center;
              font-size:16px;
              font-family:PingFangSC-Medium;
              font-weight:400;
              color:#D92E2D;
              color:#D92E2D;
              color:var(--primary);
              text-shadow:0px 1px 1px #D92E2D;
              text-shadow:0px 1px 1px #D92E2D;
              text-shadow:0px 1px 1px var(--primary);
              margin-top: 20px
          }

@media  (max-width: 1600px){

.container-login .login .c .pan .mak{
                margin-top: 15px
          }
              }

@media  (max-width: 1440px){

.container-login .login .c .pan .mak{
                margin-top: 0px
          }
              }

.container-login .login .c .pan::before{
              position: absolute;
              content: "";
              left:-26px;
              border:13px solid transparent;
              border-top:23px solid transparent;
              border-left:13px solid transparent;
              border-bottom: 23px solid #870E0E;
              border-bottom: 23px solid #870E0E;
              border-bottom: 23px solid var(--pr2);
              border-right: 13px solid  #870E0E;
              border-right: 13px solid  #870E0E;
              border-right: 13px solid  var(--pr2);
              width:0;
              height: 0
          }

@media  (max-width: 1600px){

.container-login .login .c .pan::before{
                left:-20px;
                border:8px solid transparent;
                border-top:18px solid transparent;
                border-left:10px solid transparent;
                border-bottom: 18px solid #870E0E;
                border-bottom: 18px solid #870E0E;
                border-bottom: 18px solid var(--pr2);
                border-right: 10px solid  #870E0E;
                border-right: 10px solid  #870E0E;
                border-right: 10px solid  var(--pr2)
          }
              }

@media  (max-width: 1440px){

.container-login .login .c .pan::before{
                left:-16px;
                border:8px solid transparent;
                border-top:13px solid transparent;
                border-left:8px solid transparent;
                border-bottom: 13px solid #870E0E;
                border-bottom: 13px solid #870E0E;
                border-bottom: 13px solid var(--pr2);
                border-right: 8px solid  #870E0E;
                border-right: 8px solid  #870E0E;
                border-right: 8px solid  var(--pr2)
          }
              }

.container-login .login .c .frlink{
            width:100%;
            float: left;
            text-align: center;
            margin-top: 68px;
            margin-bottom:8px;
            color: #999
        }

@media  (max-width: 1600px){

.container-login .login .c .frlink{
                margin-top: 30px
        }
            }

@media  (max-width: 1440px){

.container-login .login .c .frlink{
                margin-top: 30px
        }
            }

.container-login .login .c .frlink li{
              display: inline-block;
              padding: 0 10px;
              border-right:1px solid #ccc
            }

.container-login .login .c .frlink li:last-child{
                border:0;
              }

.container-login .login .c .text{
          text-align: center;
          float: left;
          width:100%;
          color: #999;
          margin-bottom:8px
        }

@media  (max-width: 1600px){

.container-login .login .c .text{
                margin: 8px 0
        }
            }

@media  (max-width: 1440px){

.container-login .login .c .text{
                margin: 5px 0
        }
            }

.newuser {
    float: right;
    font-size: 14px;
    color:#d92e2d;
    line-height: 40px;
    cursor: pointer;
    text-align: right;
    /* margin-top: -44px; */
    /* margin-bottom: 16px; */
    margin-right: 31%;
    width: 100%;
}
