﻿body {
    background: url(images/logo.jpg);
    /*opacity: 0.5;*/
    background-size: 100%;
}

    body:before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.7);
    }


.appCode {
    width: 120px; 
    position: absolute;
    right: 10px;
    top:30%;
    background:url(images/appCode.png) no-repeat;
    padding-top:125px;
    text-align:center;
}
.app {
    width: 115px;
    height:43px;
    display:inline-block;
    margin-top:5px;
}
.android {
    background:url(images/Android.jpg) no-repeat;
}
.ios {
     background:url(images/Apple.jpg) no-repeat;
}

.help {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}



.loginBox {
    width: 318px;
    margin: auto;
    margin-top: -50%;
    margin-left: -50%;
}

.ipt {
    position: relative;
    width: 100%;
}

    .ipt input {
        width: 100%;
        height: 50px;
        border: solid 1px #CCCCCC;
        /*border-radius: 5px;*/
        /*opacity:0.5;*/
        text-indent: 40px;
        margin: 10px 0px;
        outline: none;
        font-size: 16px;
        line-height: 50px;
    }

.icon {
    font-size: 24px;
    color: #999999;
}
/*.txt input {
    background: white url(images/account.svg) no-repeat 3px;
}

.pwd input {
    background: white url(images/password.svg) no-repeat 3px;
}*/

.diy_btn input {
    text-indent: 0px;
    background: #4d94dd;
    border: none;
    color: white;
}

.diy_ck {
    padding-top: 10px;
}

.checkbox {
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: bottom;
    background-color: #4d94dd; /*rgba(0,0,0,.8);*/
    opacity: 0.8;
    color: white;
    cursor: pointer;
}

    .checkbox input {
        height: 18px;
        opacity: 0;
        vertical-align: middle;
        width: 18px;
        margin: 0;
        position: static;
    }

.checkbox_check {
    background: #4d94dd url(images/checkBox.svg) center center no-repeat;
}

.foot {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 65px;
    font-size: 12px;
    vertical-align: middle;
    line-height: 25px;
    height: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: white;
}

    .foot .language {
        text-align: center;
    }

        .foot .language table {
            text-align: center;
            margin: auto;
        }

            .foot .language table td:first-child {
                border: none;
            }

            .foot .language table td {
                border-left: solid 1px white;
                text-align: center;
                padding: 0px 15px;
            }

                .foot .language table td a {
                    font-size: 12px;
                    color: white;
                    text-decoration: none;
                }


    .foot span {
        font-size: 12px;
    }

.languageBg { 
    height: 25px;
}

.ipt .appOs {
    position: absolute;
    left: 10px;
    top: 15px;
    vertical-align: middle;
    width: 32px;
    height: 46px;
}

.appOsImg {
    vertical-align: middle;
}

/*point*/
.mappin {opacity:.4;}
.mappin, .mappin:before {  position:absolute;  display: block; width: 20px; height: 20px; border: 5px solid; border-radius: 50%;  }
.mappin:before { content: ""; position: absolute; top: -5px; left: -5px; border-bottom-right-radius: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);  transform: rotate(45deg); }
.mappin:after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 10px; height: 4px; margin-left: -5px; box-shadow: inset 0 0 2px rgba(255,255,255,1); border-radius: 50%; -webkit-animation: scale-zoom 1s infinite; -moz-animation: scale-zoom 1s infinite; -ms-animation: scale-zoom 1s infinite;  animation: scale-zoom 1s infinite;}
.mappin:nth-child(1){left:480px; top:160px;  }
.mappin:nth-child(2){left:400px; top:-120px; }
.mappin:nth-child(3){left:250px; top:50px; }
.mappin:nth-child(4){left:-330px; top:-160px; }
.mappin:nth-child(5){left:-220px; top:30px; }
.mappin:nth-child(2n), .mappin:nth-child(2n):before { border-color: rgba(208,128,73,1); }
.mappin:nth-child(2n+1), .mappin:nth-child(2n+1):before { border-color: rgba(104,176,94,1); }
.mappin:nth-child(1), .mappin:nth-child(1):before { border-color: rgba(203,73,73,1); }

.mappin:nth-child(6){ left: -468px; top: -110px; -webkit-transform:scale(2, 2); -moz-transform:scale(2, 2); -ms-transform:scale(2, 2);    transform:scale(2, 2); opacity:.5; }
/*.mappin:nth-child(6),.mappin:nth-child(6):before {width: 40px; height: 40px; border-width:10px ;}
.mappin:nth-child(6):before { top: -10px; left: -10px;}
.mappin:nth-child(6):after {bottom: -21px;width: 20px; height: 8px;margin-left: -10px; box-shadow: inset 0 0 5px rgba(255,255,255,1);}*/
@media screen and (min-height:700px) {
.mappin:nth-child(1){left:450px; top:-122px; }
.mappin:nth-child(2){left:360px; top:20px; }
.mappin:nth-child(3){left:300px; top:-70px; }
.mappin:nth-child(4){left: -330px;
  top: 80px; }
.mappin:nth-child(5){left: -480px;
  top: 201px;}
}

@media screen and (min-height:900px) {
.mappin:nth-child(1){left:550px; top:200px; }
.mappin:nth-child(2){left:350px; top:-110px; }
.mappin:nth-child(3){left:350px; top:-320px; }
.mappin:nth-child(4){left:-430px; top:190px; }
.mappin:nth-child(5){left:-120px; top:260px; }		
}


.mappin:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 10px;
  height: 4px;
  margin-left: -5px;
  box-shadow: inset 0 0 2px rgba(255,255,255,1);
  border-radius: 50%;
  -webkit-animation: scale-zoom 1s infinite;
  -moz-animation: scale-zoom 1s infinite;
  -ms-animation: scale-zoom 1s infinite;
  animation: scale-zoom 1s infinite;
}
:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


@keyframes scale-zoom {
form {
-moz-transform:scale(1, 1);
-ms-transform:scale(1, 1);
transform:scale(1, 1);
opacity:1;
}
to {
-moz-transform:scale(5, 5);
-ms-transform:scale(5, 5);	
transform:scale(5, 5);
opacity:0;
}
}

@-webkit-keyframes scale-zoom {
form {
-webkit-transform:scale(1, 1);
opacity:1;
}
to {
-webkit-transform:scale(5, 5);
opacity:0;
}
}


.new_appIcon {
	position: absolute;
	left: -85px;
    top: 136px;
}