@charset "utf-8";
/* CSS Document */

#main{ width: 100%; height: auto; float: left;}


#mainN1{width: 100%; height:auto; float: left;background: url("../images/become_distributorimg.jpg?s=1.0.5") no-repeat center top;background-size:cover;padding-bottom: 120px;}
#mainN1 .mainN1In{width: 900px;height: auto;float: left;padding-left: 200px;}
@media(max-width: 1100px){
    #mainN1 .mainN1In{ padding-left: 0; width: 80%; margin-left: 10%;}
}
#mainN1 .mainN1T{width: 100%;height: auto;float: left;margin-top: 66px;font-size: 72px;color: #fff;font-family: BarlowSemiBold;margin-bottom: 56px;}
#mainN1 .mainN1M{width: 94%;height: auto;float: left}
#mainN1 .mainN1M ul{width: 100%;height: auto;float: left}
#mainN1 .mainN1M ul li{position:relative;margin-bottom:26px;width: 100%;height: auto;float: left;}

#mainN1 .mainN1M ul li .liIn{width: 100%;height: auto;float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;position: relative}
#mainN1 .mainN1M ul li.ts .liIn:after{content: '*';position: absolute;top: 56%;display: inline-block;right: -18px;transform: translateY(-50%);color: #fff}
#mainN1 .mainN1M ul li .magco{
    width: 100%;
    height: auto;
    float: left;
    padding: 5px;
    font-size: 18px;
    color: #fff;
    margin-top: 7px;
    text-align: center;
    position: absolute;
    bottom:0;
    background: rgba(0, 0, 0, 0.5);
    left: 0;




}







#mainN1 .mainN1M ul .liL{width: auto;height: auto;float: left;margin-right: 51px;font-family: BarlowRegular;font-size: 18px;color: #fff}
#mainN1 .mainN1M ul .liR{width:auto;height: 30px;float: left;flex: 1;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;position: relative}
#mainN1 .mainN1M ul .liRL{width: auto;height: 100%;float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: none;align-items: center}
#mainN1 .mainN1M ul .liRLL{width: 107px;height: 100%;float: left}
#mainN1 .mainN1M ul .liRLR{width: 32px;height: 100%;float: left;position: relative}
#mainN1 .mainN1M ul .liRLR span{width: 20px;height: 1px;background:#fff;display: inline-block;    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

#mainN1 .mainN1M ul .liRM{width:auto;height: 100%;float: left;padding:0 16px;background: red;position: relative}


#mainN1 .mainN1M ul .liRR{width: auto;height: 100%;float: left;flex: 1}


#mainN1 .mainN1M ul li:nth-of-type(2) .liL{margin-right: 56px;}


#mainN1 .mainN1M ul li:nth-of-type(3) .liL{margin-right: 132px;}
#mainN1 .mainN1M ul li:nth-of-type(4) .liL{margin-right: 85px;}
#mainN1 .mainN1M ul li:nth-of-type(5) .liL{margin-right: 115px;}
#mainN1 .mainN1M ul li:nth-of-type(6) .liL{margin-right: 127px;}
#mainN1 .mainN1M ul li:nth-of-type(7) .liL{margin-right: 115px;}

#mainN1 .mainN1M ul li:nth-of-type(8) .liL{margin-right: 132px;}
#mainN1 .mainN1M ul li .van-cell{padding: 3px 19px;height: 100%}

#mainN1 .mainN1M ul li .van-field__body{height: 100%}

#mainN1 .mainN1M ul li .liIn{align-items: flex-start}
#mainN1 .mainN1M ul li:last-child .liR{height: auto}

#mainN1 .mainN1M ul .liRLL .van-cell{padding: 0 0 0 24px}


#mainN1 .mainN1B{width: 100%;height: auto;float: left;cursor: pointer}
#mainN1 .mainN1B span{background: #f47722;display: inline-block;padding: 10px 78px;color: #fff;font-size: 18px;font-family: BarlowRegular;margin-left: 178px;}
@media screen and (max-width: 640px) {
    #mainN1{width: 100%; height:auto; float: left;background: url("../images/wapbecome_distributorimg.jpg?s=1.0.5") no-repeat center top;background-size:cover;}

    #mainN1 .mainN1In{width: calc(100% - 3rem);margin: 0 1.5rem}
    #mainN1 .mainN1T{font-size: 3.6rem;margin: 2rem 0 3rem 0}
    #mainN1 .mainN1M ul li{margin-bottom: 1.5rem}
    #mainN1 .mainN1M ul .liL{font-size: 1.2rem;width: 100px;margin-right: 1rem !important}

    #mainN1 .mainN1B{margin-top: 0.5rem !important}
    #mainN1 .mainN1B span{    margin-left: 9rem;font-size: 1rem;        padding: 0.3rem 2rem 0.5rem;}
    #mainN1 .mainN1M ul li .liIn{align-items: center}
    #mainN1 .mainN1M ul .liR{height: 2rem}

    #mainN1 .mainN1M ul li .magco{font-size: 1rem}


}

#mainN2{width: 100%;height: auto;float: left}

#mainN3{width: 100%; height: auto; float: left;}


/* 通用样式 */
input::placeholder {
    color: #eee; /* 默认颜色 */
}

/* 针对不同浏览器的兼容性写法 */
::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color:  #eee;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:  #eee;
}

::-moz-placeholder { /* Firefox 18-53 */
    color: #eee;
    opacity: 1; /* 修复老版本Firefox的不透明度问题 */
}

:-moz-placeholder { /* Firefox 19+ */
    color:  #eee;
    opacity: 1; /* 修复新版本Firefox的不透明度问题 */
}