android-cloud-H5/microserviceUserH5/static/css/mainTui.css

html {
    font-size: 62.5%;
    color: #222;
}

::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    font-size: 1.2rem;
    line-height: 1.5;
    background-color: #E79006;
}

@media only screen and (min-width: 640px) {
    body {
        background-color: #ffffff;
    }
    .extension-style {
        width: 620px;margin: 0 auto;padding-bottom: 10px;background-color: #F45848;
    }
    .reg-invite-Pag {
        width: 620px;margin: 0 auto;padding-bottom: 10px;background-color: #E79006;
    }
}
@media only screen and (max-width: 640px) {
    body {
        background-color: #E79006;
    }
    .reg-invite-Pag {
        width: 620px;margin: 0 auto;padding-bottom: 10px;background-color: #E79006;
    }
}
a {
    color: #666;
    text-decoration: none;
}

a:hover, a:active {
    color: #0ae;
    text-decoration: underline;
}

button:focus, input:focus{
    outline: 0;
}
header {
    width: 100%;
}


header .top {

}

header .top .logo{
    position: absolute;
    /*left: 30%;*/
}

header .top .bottom-img{
    width: 100%;
}


/*@media only screen and (min-width: 700px) {*/
    /*header .top .center-pic{*/
        /*margin-left: 28%;*/
        /*width: 44%;*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 640px) and (max-width: 700px){*/
@media only screen and (min-width: 1071px) {
    header .top-font {
        color: #E64635;
        position: absolute;
        top: 9%;
        left: 31%;
    }

    header .top-font .top-font-m {
        font-size: 19rem
    }

    header .top-font .top-font-s {
        font-size: 5rem
    }
}
@media only screen and (min-width: 850px) and (max-width: 1071px) {
    header .top-font {
        color: #E64635;
        position: absolute;
        top: 24%;
        left: 38%;
    }

    header .top-font .top-font-m {
        font-size: 10rem
    }

    header .top-font .top-font-s {
        font-size: 3rem
    }
}
@media only screen and (min-width: 600px) and (max-width: 850px) {
    header .top-font {
        color: #E64635;
        position: absolute;
        top: 24%;
        left: 38%;
    }

    header .top-font .top-font-m {
        font-size: 10rem
    }

    header .top-font .top-font-s {
        font-size: 3rem
    }
}
@media only screen and (min-width: 450px) and (max-width: 600px) {
    header .top-font {
        color: #E64635;
        position: absolute;
        top: 24%;
        left: 38%;
    }

    header .top-font .top-font-m {
        font-size: 8rem
    }

    header .top-font .top-font-s {
        font-size: 2rem
    }
}
@media only screen and (max-width: 450px) {
    header .top-font {
        color: #E64635;
        position: absolute;
        top: 22%;
        left: 35%;
    }

    header .top-font .top-font-m {
        font-size: 6rem
    }

    header .top-font .top-font-s {
        font-size: 1rem
    }
}
@media only screen and (min-width: 640px) {
    body {
        background-color: white;
    }
    .extension-con {
        width: 45%;margin: 0 auto;padding-bottom: 10px;background-color: #F45848;
    }
    header .top .logo{
        left: 30%;
    }

    header .top .center-pic{
        margin-left: 10%;
        width: 79%;
    }
}

@media only screen and (max-width: 640px) {
    body {
        background-color: #F45848;
    }
    header .top .logo{
        top: 50px;
        left: 2.5%;
        width: 25%;
    }
    header .top .center-pic{
        margin-left: 2.5%;
        width: 95%;
    }
}

/*header .top .center-pic{*/
    /*margin-left: 28%;*/
    /*width: 44%;*/
/*}*/

header .top .center-pic img{
    width: 100%;
}

header .top .center-pic .recv-cont {
    width: 85%;
    margin-left: 7%;
    /*background-color: #ffffff;*/
    border-radius: 1rem;
    margin-top: -11rem;
}

@media only screen and (min-width: 700px) {
    header .top .center-pic .recv-cont{
        margin-bottom: 2rem;
    }
}

@media only screen and (min-width: 480px) and (max-width: 700px){
    header .top .center-pic .recv-cont{
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 480px) {
    header .top .center-pic .recv-cont{
        margin-bottom: 1rem;
    }
}

header .top .center-pic .recv-cont .icon {
    position: absolute;
    left: 17%;
    background-color: red;
    width: 15%;
    background: url("../img/phone.png") no-repeat;
    background-size: 100% auto;
}
header .top .center-pic .recv-cont .recv-ipt{
    margin-top: 3rem;
    width: 100%;
    padding-left: 15%;
    border-radius: 5rem;
    color: #BBBBBB;
    background-color: white;
    border: none;
}
header .top .center-pic .recv-cont .recv-btn {
    /*border-radius: 5rem;*/
    width: 109%;
    margin: 7% 0 0 -4%;
    /*border:none;*/
}
.exte-recv-btn{
	 width: 100%;
    margin: 7rem 0 0 0%;
}
@media only screen and (min-width: 1000px) {
    header .top .center-pic .recv-cont .recv-btn-font {
        position: absolute;
        font-size: 6rem;
        color: white;
        top: 42%;
        left: 38%;
        letter-spacing: 3rem;
    }
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
    header .top .center-pic .recv-cont .recv-btn-font {
        position: absolute;
        font-size: 5rem;
        color: white;
        top: 41%;
        left: 38%;
        letter-spacing: 15px;
    }
}
@media only screen and (min-width: 455px) and (max-width: 700px) {
    header .top .center-pic .recv-cont .recv-btn-font {
        position: absolute;
        font-size: 32px;
        color: white;
        top: 44%;
        left: 38%;
        letter-spacing: 15px;
    }
}
@media only screen and (max-width: 455px) {
    header .top .center-pic .recv-cont .recv-btn-font {
        position: absolute;
        font-size: 2.8rem;
        color: white;
        top: 40%;
        left: 33%;
        letter-spacing: 15px;
    }
}
header .top .center-pic .load-menu {
    width: 100%;
    background-color: rgba(255,192,185, 0.5);
    border-radius: 1rem;
    margin-top: 7rem;
   padding: 0.1rem 0rem;
    margin-bottom: 4rem;
}
header .top .center-pic .load-menu .tb-codes {
    width: 92%;
    margin: 1rem auto;
    border-radius: 1rem;
    background-color: white;
}
header .top .center-pic .load-menu .tb-codes .tb-con {
    width: 90%;
    margin: 0 auto;
    padding-top: 8%;
    padding-bottom: 3%;
}

header .top .center-pic .load-menu .tb-codes p{
    font-size: 2rem;
    color: #6D747C;
    letter-spacing: 0.2rem;
    margin-bottom: 5%;
}

header .top .center-pic .load-menu .tb-font {
    font-size: 3%;
    display: block;
    text-align: center;
    font-weight: bold;
}


@media only screen and (min-width: 700px) {
    header .top .center-pic .load-menu .tb-font {
        font-size: 3rem;
    }
}

@media only screen and (min-width: 480px) and (max-width: 700px){
    header .top .center-pic .load-menu .tb-font {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 480px) {
    header .top .center-pic .load-menu {
        border-radius: 0.5rem;
    }
    header .top .center-pic .load-menu .tb-font {
      font-size: 1.5rem;
    margin-top: 1rem;
    }
}

header .top .center-pic .load-menu .recv-btn {
    border-radius: 5rem;
    width: 60%;
    margin: 7% 0 7% 19%;
    border:none;
    background-color: #ffa71c;
    color: #1C262E;
}

header .top .center-pic .load-menu .recv-btn a:hover{
    color: #ffffff;
    text-decoration: none;
}

header .top .center-pic .load-menu .recv-btn a:active{
    text-decoration: none;
}

header .top .center-pic .load-menu .recv-btn a:visited{
    text-decoration: none;
}

.strategy{
	    overflow: hidden;
    width: 80%;
    margin: 0 auto;
}
.strategyText{
	overflow: hidden;
    width: 100%;
    margin: 0 auto;
    margin: 1rem 0 02rem 0;
}
.strategyHao{
    width: 10%;
    height: 10%;
    background: rgba(219,112,19,1);
    border-radius: 50%;
    text-align: center;

    line-height: 2rem;
    font-size: 14px;
    color: #fff !important;
}
.strategyBox{
	    width: 30%;
    height: 2px;
    background: rgba(219,112,19,1);
    margin: 1rem 2% 0 2%;

}
.strategyLeft-text{
	width: 33%;
	font-size:14px;
	color:#DB7013 ;
	text-align: center;
}

.goodFriend{
	overflow: hidden;
	width: 95%;
	margin: 0 auto;
}
.goodFriend-hoed{
	width: 100%;
	overflow: hidden;
}
.goodFriend-text-left{
	width: 40%;
	text-align: center;
	font-size: 15px;
	color: #000;
	padding: 0.7rem 0rem;

}
.goodFriend-text-right{
	width: 40%;
	text-align: center;
	font-size: 15px;
	color: #000;
	padding: 0.7rem 0rem;
}
.goodFriend-text-left-xe{
		width: 40%;
	text-align: center;
	font-size: 13px;
	color: #6D747C;
	padding: 0.7rem 0rem;
}
.setww{
	font-size: 14px;
	margin-bottom: 1rem;
	color: #6D747C;
}

.goodFriend-text-right-xe{
	width: 40%;
	text-align: center;
	font-size: 13px;
	color: #6D747C;
	padding: 0.7rem 0rem;
}
.box-color{
	color: #F04646;
}
.left{
	float: left;
}
.right{
	float: right;
}

.goodFriend-hoedtext{
	text-align: center;
    margin: 1.5rem;
    font-size: 14px;
}