* {box-sizing: border-box; margin: 0; padding: 0;}


        body,
        html {
        margin: 0 auto;
          width: 100%;
         font-family: "Segoe UI", Arial, sans-serif;
        padding: 0; border: 0;
        font-size: 13px;
          }

        header {
              position: relative;
              width: 100%;
              height: 950px;
              overflow: hidden;
            background-color: #58cafe;
            }

        .inner {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 950px;
              background-image: url(./img/bgc.png);
              background-position: center top;
              background-repeat: no-repeat;
              background-attachment: fixed;
            }

        #fro1 {    /*top tree*/
            background-image: url(./img/fro1.png);
               top: 0;
              width: 100%;
              position: absolute;
              z-index: 3;
              height: 1700px;
            background-position: center top;
            background-repeat: no-repeat;
            background-attachment: fixed;
            }

        #fro2 {    /*lower grass*/
            background-image: url(./img/fro2.png);
               top: 0;
              width: 100%;
              position: absolute;
              z-index: 3;
              height: 1700px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-attachment: fixed;
            }

        #mid {
            background-image: url(./img/mid.png);
            position: absolute;
               top: 0;
               left: 0;
              width: 100%;
            z-index: 2;
               height: 1700px;
            background-position: center top;
               background-repeat: no-repeat;
            }

        section {
              width: 100%;
            }

        #con {
               top: 0;
              width: 100%;
              position: absolute;
              z-index: 5;
              height: auto;
            }

        #wrap0 {width: 100%;}/*copy*/
        #con0 {margin: 0 auto; text-align: center; position: absolute; top: 50px; left:50%; margin-left: -300px;}

        #wrap1 {width: 100%;}/*logo*/
        #dung{max-width: 100%; margin: 0 auto; position:absolute; top:70px; left:50%; margin-left: -445px; pointer-events: none; animation:ani 1s infinite alternate; z-index: 10;}
        @keyframes ani{0%{transform:translate(0,0);} 100%{transform:translate(0,50px);}}

        #wrap2 {width: 100%;}/*login box*/
        #con2 {margin: 0 auto; text-align: center; position: absolute; top: 645px; left:50%; margin-left: -435px; background: url(../common/img/login.png); background-repeat: no-repeat; width: 870px; height:725px;  padding-top: 55px;}
        .inbox{width: 450px; height: 85px; text-align: center; margin: 0 auto;}
        #fid{color: #fff; padding-top: 15px; height: 60px;}

        #button {
               top: 1300px;
              width: 100%;
              position: absolute;
              z-index: 5;
              height: auto;
            margin: 0 auto;
            text-align: center;}

        #con3 {margin: 0 auto; text-align: center; height: auto; }
        .butt {display: inline-block; display: inline; width: 280px; height: 200px; text-align: center; margin: 0 auto; vertical-align: middle;}

        input[type=text],input[type=password], textarea
        {color: #20aabb; width: 415px; height: 75px; font-size: 25px; border: 5px solid #ffa002; border-radius: 100px; box-shadow: 2px 2px 8px #4b1809; font-family: "Segoe UI", Arial, sans-serif; padding-left: 30px;
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        }
        input::placeholder { color: #ccc;}

        span{font-family: "Segoe UI", Arial, sans-serif; color: #fff; font-size: 18px; letter-spacing :2px;}

        a.ex1:link { color: grey; text-decoration: none; font-weight: bold;}
        a.ex1:visited { color: grey; text-decoration: none; font-weight: bold;}
        a.ex1:hover { color: grey; text-decoration: none; font-weight: bold;}

        a.ex2:link { color: white; text-decoration: none; font-weight: bold;}
        a.ex2:visited { color: white; text-decoration: none; font-weight: bold;}
        a.ex2:hover { color: white; text-decoration: none; font-weight: bold;}

        input[type=checkbox] { display:none; }
        input[type=checkbox] + label {
        display: inline-block;
        cursor: pointer;
        line-height: 33px;
        padding-left: 40px;
        background: url('../common/img/check_bt1.png') no-repeat; }
        input[type=checkbox]:checked + label { background-image: url('../common/img/check_bt2.png'); }


@media all and (min-width:1500px) {/*1500~*/
    #con3{width: 100%; min-width: 900px; }}
@media all and (max-width:1499px) {/*1201~1499*/
    #con3{max-width: 900px; min-width: 900px;}}



.bottom1{
            font-size: 13pt;
            height: 60px;
            bottom: 0px;
            border: 0px;
            font-weight: bold;
            color: #616161;
            padding-top: 20px;


        }
        .bottom2{
            height: 80px;
            font-family: Arial;
            font-size: 11px;
            line-height: 16px;
            bottom: 0px;
            border: 0px;
            color: #888787;
        }


        #bottom_wrap {position: relative; z-index: 10; margin-top: 750px; padding-bottom: 40px;}
        #bottom{width: 100%; height: 260px; margin: 0 auto; text-align: center;}
        .footers{position: relative; z-index: 10; width:100%; height: 330px; margin: 0 auto; text-align: center; padding-top:40px; }