/* fonts */
  @font-face {
    font-family: 'Karbon-Medium';
    src: url('../fonts/Karbon-Medium.otf');
  }
  @font-face {
    font-family: 'Karbon-Regular';
    src: url('../fonts/Karbon-Regular.otf');
  }
  @font-face {
    font-family: 'Karbon-Semibold';
    src: url('../fonts/Karbon-Semibold.otf');
  }
  body{
    font-family: 'Karbon-Medium';
  }
ul,li{
    list-style: none;
}
.home{
    height:835px;
    overflow: hidden;
    background: url(../images/home.gif)no-repeat;
    background-position: 0% 40%;
    background-size: 100%;
}
.home .logo{
    margin-top: 64px;
}
.home .logo img{
    max-width: 49%;
    height:auto;
}
.home .text{
    width: 528px;
    margin-top: 140px;
    margin-left: 72px;
}
.home .text img{
    max-width: 100%;
}
.home .login-box{
    margin-top: 140px;
    margin-left: 78px;
    font-family: 'Karbon-Regular';
}
.home .login-box p{
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    font-family: 'Karbon-Semibold';
}
.home .login-box .login{
    width: 417px;
    height:333px;
    border-radius: 5px;
    background-color: #fff;
    padding:25px;
    margin-top: 10px;
}
.g-recaptcha-tips{
    height: 12px;
    color: red;
    font-size: 12px;
    line-height: 12px;
}

/*.g-recaptcha div{*/
/*    border: 1px solid #e1e1e1;*/
/*}*/
.home .login-box .login .form-group{
    margin-bottom: 0px;
}
.home .login-box .login h3{
    font-family: 'Karbon-Semibold';
}
.home .login-box .login h6{
    font-size: 18px;
    margin-top: 25px;
}
.home .login-box .login .form-control{
    height: 55px;
    font-size: 20px;
    outline:none;
}
.home .login-box .login .btn{
    background-color: #6CB535;
    border: none;
    width: 170px;
    height: 50px;
    font-size: 24px;
    font-family: 'Karbon-Semibold';
}
input:focus {
    outline: none;
    border-color: #cfdc00;
    box-shadow: 0 0 5px rgba(207, 220, 0, 0.4);
    }

.custom-control-input:checked~.custom-control-label::before{
    border-color: #6CB535;
    background-color: #6CB535;
    cursor: pointer;
}


.footer{
    position: relative;
    background-color: #fff;
    padding-top: 43px;
    padding-bottom: 27px;
    font-size: 15px;
}
.footer .footer-text{
    padding-top: 50px;
}
.footer .triangle{
    content: "";
    position: absolute;
    top: -57px;
    right: 0px;
    border-width: 0 0 57px 70px;
    border-style: solid;
    border-color: transparent transparent #fff;
}
.Validform_checktip{
	margin-left:5px;
	line-height:15px;
	min-height:3px;
    margin-top: 3px;
	overflow:hidden;
	color:#999;
	font-size: 14px;
}
.Validform_right{
	color:#71b83d;
	padding-left:5px;
}
.Validform_wrong{
	color:red;
	white-space:nowrap;
}
.Validform_loading{
	padding-left:20px;
}
.Validform_error{
	background-color:#ffe7e7;
}
/*===============================================================/
=========================index.html end~========================||
/*==============================================================*/
.header{
    background-color: #000;
    height: 112px;
    position: relative;
}
.header .header-triangle{
    position: absolute;
    top: 0px;
    width: 22%;
    height: 0px;
    right:0;
    border-width:0 0px 112px 60px;
    border-style:solid;
    border-color:transparent transparent #F2F2F2;
}
.header .channel-logo{
    padding-top: 18px;
}
.header .channel-logo img{
    max-width: 80%;
    height: auto;
}
.header .user-box{
    height: 50px;
    line-height: 40px;
    color: #fff;
    padding-top: 10px;
    overflow: hidden;
}
.header .user-box .user-face{
    width: 25px;
    height: 25px;
}
.header .user-box .user-face img{
    width: 100%;
    height: 100%;
}
.header .user-box .user-name{
    font-size: 18px;
    line-height: 40px;
    margin-bottom: 0px !important;
    margin-left: 10px;
}
.header .user-box a{
    padding: 0 20px 0px 20px;
    color: #fff;
    font-size: 18px;
    font-family: 'Karbon-Regular';
    text-decoration:underline;
}

.main-content{
    min-height: 500px;
    padding-bottom: 140px;
}
.main-content h2{
    line-height: 50px;
    padding: 42px 0px 42px 0px;
    font-family: 'Karbon-Semibold';
    font-size: 40px;
}
.main-content .user-list{
    min-height: 542px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    padding:10px 30px 10px 55px;
}

.main-content .radomiseme{
    position: relative;
    padding: 0px !important;
}
.main-content .radomiseme .col-xl-6{
    padding: 0px;
}
.main-content .radomiseme .radomiseme-ico{
    width: 193px;
    height: 193px;
    position: absolute;
    z-index: 999;
    left: 255px;
    top: 210px;
    background-color: #F2F2F2;
    border-radius: 50%;
    display: none;
}
.main-content .radomiseme .radomiseme-ico img{
    margin: 10px;
}
.main-content h5{
    line-height: 40px;
    font-size: 26px;
    font-family: 'Karbon-Regular';
}
.main-content .online-list{
    min-height: 542px;
    background: linear-gradient(45deg, transparent 20px, #fff 0);
    padding: 25px;

}
.face-color-violet{
    background-color: #5E2365 !important;
}
.face-color-orange{
    background-color: orange !important;
}
.face-color-grey{
    background-color: grey !important;
}
.face-color-black{
    background-color: black !important;
}
.u-face{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    line-height: 60px;
    text-align: center;
    font-size: 28px;
    color: #fff;
}
.main-content .online-list .online-user-list{
    padding: 0px;
}
.main-content .online-list .online-user-list li{
    padding: 0px;
    margin-bottom: 10px;
}
.user-body{
    padding-top: 5px;
    padding-right: 0px !important;
}
.user-body h4{
    font-family: 'Karbon-Semibold';
    padding: 0px;
    font-size: 20px;
    line-height: 15px;
}
 .user-body p{
    font-family: 'Karbon-Regular';
    font-size: 14px;
    line-height: 14px;
}
.main-content .online-list .loadmore{
    font-size: 22px;
    color: #6CB535;
    text-decoration:underline;
    line-height: 40px;
}
#getMatch{
    cursor: pointer;
    border: 0px;
    border-radius: 50%;
    padding: 0px;
    margin: 0px;
    display: block;
}
button:focus{outline:none;}
/*===============================================================/
=========================user.html end~=========================||
/*==============================================================*/
.content-left{
    width: 711px;
    min-height: 500px;
    
}

.content-left .main .radomiseme-ico{
    width: 193px;
    height: 193px;
    position: absolute;
    z-index: 999;
    left: 255px;
    top: 150px;
    background-color: #F2F2F2;
    border-radius: 50%;
    display: none;
}
.content-left .main .radomiseme-ico img{
    margin: 5px;

}
.content-left .main .userList{
    padding: 20px;
    margin-top:0px;
    margin-bottom: 0px;
}
.content-left .main .userList li{
    margin-bottom: 20px;
}
.content-left .main .userList li .userInfo{
    float: left;
    font-family: 'Karbon-Semibold';
}
.content-left .main .userList li .userInfo button{
    margin-left: 5px;
    background: #E5E5E5;
    border: 1px solid #E5E5E5;
    color: #7F7F7F;
}
.content-left .main .userList li .arrow{
    float: left;
    height: 40px;
    width: 90px;
    margin-left: 20px;
    margin-top: 7px;
}
.content-left .main .userList li .u_face{
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 26px;
    font-family: 'Karbon-Medium';
    color: #fff;
    float: left;
    margin-left: 5px;
}

.content-left .main .userList li .u_body{
    float: left;
    width: 210px;
    padding-left: 8px;
}
.content-left .main .userList li .u_body h3{
    font-size: 20px;
    margin-bottom: 0px;
}
.content-left .main .userList li .u_body p{
    font-family: 'Karbon-Regular';
    font-size: 16px;
    margin-bottom: 3px;
    line-height: 16px;
}
.title{
    height: 40px;
    font-size: 26px;
}
.title .rnitiator{
    float: left;
    font-size: 26px;
    line-height: 40px;
    width: 370px;
}

.content-left .bg-bottom{
    background:url(../images/user_list_bottom_bg.png);
    width: 100%;
    height: 14px;
}
.main-content .user-list li{
    height: 64px;
    margin: 20px auto;
    position: relative;
}
.main-content .user-list li .user-body{
    padding-top: 10px;
    margin-left: 10px;
}
.main-content .user-list li .user-body h4{
    font-size: 21px;
}
.main-content .user-list li .user-body p{
    font-size: 16px;
}
.chat-icon{
    width: 70px;
    height: 25px;
    position: absolute;
    z-index: 999;
    top: 45px;
    right: -42px;
    background-color: #D8D8D8;
}
.chat-arrow{
    position: absolute;
    width:0;
    height:0;
    top: -8px;
    right: -25px;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:26px solid #D8D8D8;
}
.user-list li .btn{
    width: 80%;
    height: 60px;
    background-color: #E5E5E5;
    border: none;
    font-size: 25px;
    box-shadow: none;
    color: grey;
}

.btn:focus,.btn:active:focus,
.btn.active:focus,.btn.focus,
.btn:active.focus,.btn.active.focus { 
 outline: none;  
 border-color: transparent;  
 box-shadow:none;

}



@media (min-width: 768px) and (max-width: 991px){
    .home{
        height: 510px;
        background-position: 0% 0%;
        background-size: 100%;
    }
    .home .logo{
        margin-top: 34px;
    }
    .home .logo img{
        width: 45%;
        height: auto;
    }
    .home .text{
        width: 48%;
        margin-top: 70px;
        margin-left: 20px;
    }
    .home .text img{
        width: 100%;
        height: auto;
    }
    .home .login-box{
        margin-top: 70px;
        margin-left: 18px;
    }
    .home .login-box .login{
        width: 317px;
    }
    .header .header-triangle{
        width: 0%;
    }
    .header .channel-logo{
        padding-top: 28px;
    }
    .header .channel-logo img{
        width: 100%;
        height: auto;
    }
    .header .user-box{
        margin-top: 15px;
    }
    .header .user-box a{
        padding: 0 10px 0px 10px;
    }
    .header .user-box .user-name{
        font-size: 16px;
    }
    .header .user-box a{
        font-size: 16px;
    }

    .main-content .radomiseme .radomiseme-ico{
        width: 130px;
        height: 130px;
        position: absolute;
        z-index: 999;
        left: 155px;
        top: 220px;
        background-color: #F2F2F2;
        border-radius: 50%;
        display: none;
    }
    .main-content .radomiseme .radomiseme-ico img{
        width: 120px;
        height: 120px;
        margin: 5px;
    }
    .main-content .online-list{
        padding: 25px;
    }
    .u-face{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0px;
        font-size: 18px;
    }
    .user-body{
        padding-top: 2px;
    }
    .user-body h4{
        font-size: 16px;
    }
    .user-body p{
        font-size: 14px;
        margin-bottom: 0px;
    }
    .main-content .online-list .loadmore{
        font-size: 16px;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .home{
        height: 648px;
        background-position: 0% 0%;
        background-size: 100%;
    }

    .home .logo{
        margin-top: 30px;
    }
    .home .text{
        margin-top: 70px;
        margin-left: 36px;
    }
    .home .login-box{
        margin-top: 70px;
        margin-left: 28px;
    }
    .home .login-box .login{
        width: 317px;
        height: 300px;
    }
    .footer .footer-text{
        padding-top: 30px;
    }
    .header .header-triangle{
        width: 0%;
    }

}



@media (min-width:1100px) and (max-width:1620px){
    .header .header-triangle{
        width: 0%;
        border-width: 0 0px 152px 60px;
    }


}



@media (min-width:500px) and (max-width:763px) {
    .main-content .radomiseme .radomiseme-ico{
        left: 90px;
        display: none;
    }

}






/************************************************************************/
.main-left{
    min-height:500px;
    position: relative;
}
.main-left .rnitiator{
    min-height: 500px;
    padding: 0px;
    border-radius:5px ;
}
.main-left .recipent{
    min-height: 500px;
    padding: 0px;
    border-radius:5px ;
}
.content-box{
    border: 1px #e1e1e1 solid;
    width: 95%;
    min-height:580px;
    height:auto;
    border-radius: 5px;
    background: #fff;
}

.main-left .content-inner{
    position: absolute;
    width: 91%;
    min-height: 500px;
    height: 500px;
    top: 70px;
    left: 30px;
    padding: 0px;

}
.main-left .content-inner li{
    min-height: 60px;
    background:url("../images/arrow.png") center no-repeat;
    width:100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    background-position: 50% 20%;
}
.main-left .content-inner li .rnitiator-box{
    width: 41%;
    min-height: 60px;
    float: left;
}
.main-left .content-inner li .recipent-box{
    width: 43%;
    min-height: 60px;
    float: right;
}
.main-left .content-inner li .userface{
    width: 50px;
    height: 50px;
    font-size: 23px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: #fff;
    float: left;
    background: #1c7430;
}
.main-left .content-inner li .recipent-box .userbody{
    width: 220px;
}
.main-left .content-inner li .recipent-box .btn{
    background: #E5E5E5;
    border:1px #E5E5E5 solid;
    color: #848484;
    margin-top: 5px;
}
.main-left .content-inner li .userbody{
    width: 210px;
    min-height: 60px;
    float: right;
}
.main-left .content-inner li .userbody h3{
    font-size: 22px;
    line-height: 20px;
    font-family: 'Karbon-Semibold';
    margin-bottom: 0px;
}
.main-left .content-inner li .userbody p{
    font-size: 16px;
    line-height: 20px;
    font-family: "Karbon-Regular";
}
.main-right{
    min-height: 500px;
    float: right;
}
.main-right .online-title{
    margin-left: 10%;
}
.main-left .radomiseme-ico{
    width: 192px;
    height: 192px;
    position: absolute;
    z-index: 999;
    left: 265px;
    top: 220px;
    display: none;
}
.main-right .online{
    width: 90%;
    margin-left: 10%;
    background: linear-gradient(45deg, transparent 20px, #fff 0);
    padding: 25px;
    min-height: 500px;
}
.main-right .online li{
    width: 100%;
    min-height: 50px;
    margin-bottom: 15px;
}
.main-right .online li .userface{
    width: 50px;
    height: 50px;
    font-size: 23px;
    background: #000;
    border-radius: 50%;
    float: left;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.main-right .online li .userbody{
    float: left;
    width: 75%;
    margin-left: 5px;
    padding-top: 0px;
}
.main-right .online li .userbody h3{
    line-height: 20px;
    font-size: 22px;
    margin-bottom: 0px;
}
.main-right .online li .userbody p{
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0px;
    font-family: "Karbon-Regular";
}


@media (min-width: 992px) and (max-width: 1199px){
    .home{
        height: 648px;
        background-position: 0% 0%;
        background-size: 100%;
    }

    .home .logo{
        margin-top: 30px;
    }
    .home .text{
        margin-top: 70px;
        margin-left: 36px;
    }
    .home .login-box{
        margin-top: 70px;
        margin-left: 28px;
    }
    .home .login-box .login{
        width: 317px;
        height: 350px;
    }
    .g-recaptcha{
        width: 100%;
        overflow: hidden;
    }
    .footer .footer-text{
        padding-top: 30px;
    }
    .header .header-triangle{
        width: 0%;
    }
    .content-box{
        width: 95%;
    }
    .main-content .radomiseme .radomiseme-ico{
        left: 200px;
        display: none;
    }
    .u-face{
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        padding: 0px;
    }
    .user-body{
        padding-top:5px;
    }
    .user-body p{
        font-size: 16px;
        margin-bottom: 0px;
    }

    .main-content .main-left .radomiseme-ico{
        left: 205px;
        top: 220px;
        display: none;
    }
    .main-left .content-inner li .userbody{
        width: 165px;
    }
    .main-left .content-inner li{
        background-position: 47% 6px;
    }
    .main-right .onlinetitle{
        line-height: 20px;
        padding-left: 10px;
    }
    .main-left .content-inner li .recipent-box .userbody{
        width: 190px;
    }
    .main-left .content-inner{
        width: 92%;
    }
    .main-left .content-inner li .rnitiator-box{
        width: 40%;
    }




}

@media (min-width: 768px) and (max-width: 991px){
    .home{
        height: 510px;
        background-position: 0% 0%;
        background-size: 100%;
    }
    .home .logo{
        margin-top: 34px;
    }
    .home .logo img{
        width: 45%;
        height: auto;
    }
    .home .text{
        width: 48%;
        margin-top: 70px;
        margin-left: 20px;
    }
    .home .text img{
        width: 100%;
        height: auto;
    }
    .home .login-box{
        margin-top: 70px;
        margin-left: 18px;
    }
    .home .login-box .login{
        width: 317px;
    }
    .g-recaptcha{
        width: 100%;
        overflow: hidden;
    }
    .header .header-triangle{
        width: 0%;
    }
    .header .channel-logo{
        padding-top: 28px;
    }
    .header .channel-logo img{
        width: 100%;
        height: auto;
    }
    .header .user-box{
        margin-top: 15px;
    }
    .header .user-box a{
        padding: 0 10px 0px 10px;
    }
    .header .user-box .user-name{
        font-size: 16px;
    }
    .header .user-box a{
        font-size: 16px;
    }
    .main-content .radomiseme .radomiseme-ico{
        width: 130px;
        height: 130px;
        position: absolute;
        z-index: 999;
        left: 155px;
        top: 220px;
        background-color: #F2F2F2;
        border-radius: 50%;
        display: none;
    }
    .main-content .radomiseme .radomiseme-ico img{
        width: 120px;
        height: 120px;
        margin: 5px;
    }
    .main-content .online-list{
        padding: 25px;
    }
    .u-face{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0px;
        font-size: 18px;
    }
    .user-body{
        padding-top: 2px;
    }
    .user-body h4{
        font-size: 16px;
    }
    .user-body p{
        font-size: 14px;
        margin-bottom: 0px;
    }
    .content-box{
        width: 95%;
    }
    .main-content {
        font-size: 16px;
    }
    .main-left .radomiseme-ico{
        left: 130px;
        display: none;
    }
    .main-left .content-inner li .userbody{
        width: 120px;
    }
    .main-left .content-inner li .recipent-box .userbody{
        width: 120px;
    }
    .main-right{
        padding-left: 15px;
        padding-right: 15px;
    }
    .main-left .content-inner li{
        background-position: 45% 6px;
    }
    .main-left .content-inner li .userbody h3{
        font-size: 18px;
    }
    .main-right .online li .userbody{
        width: 60%;
    }
    .main-left .content-inner li .rnitiator-box{
        width: 46%;
    }
    .main-left .content-inner{
        left: 15px;
    }
    .main-left .content-inner li .userbody{
        width: 130px;
    }
}

@media (min-width:450px) and (max-width:760px){
    .home{
        background-position: 0% 0%;
        height:auto;
    }
    .home .logo{
        margin-top: 34px;
    }
    .home .text{
        margin-top: 70px;
        margin-left: 30px;
        float: none !important;
    }
    .home .login-box{
        margin-top:50px;
        float: none !important;
    }
    .header{
        height: 152px;
    }
    .header .header-triangle{
        width: 0%;
        border-width: 0 0px 152px 60px;
    }
    .header .user-box{
        margin-left: 0px;

    }
    .title .rnitiator{
        width: 180px;
        float: left;
    }
    .title .recipent{
        width: 100px;
        float: left;
    }
    .main-content .user-list{
        padding: 10px 20px 10px 25px;
    }
    .u-face{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        margin: 0 auto;
        float: none !important;
    }
    .main-content .user-list li .user-body h4{
        font-size: 12px;
        text-align: center;
        margin-bottom: 0px;
    }
    .main-content .user-list li .user-body p{
        font-size: 12px;
        text-align: center;
        line-height: 14px;
    }
    .main-content .user-list li{
        height: auto;
    }
    .user-list li .btn{
        margin-left: 15px;
        font-size: 14px;
        padding: 0px;
    }
    .content-left .col-sm-6{
        padding-right: 5px !important;
        padding-left: 5px !important;
    }
    .main-content .radomiseme .radomiseme-ico{
        width: 120px;
        height: 120px;
        left: 105px;
        top: 230px;
        display: none;
    }
    .main-content .radomiseme .radomiseme-ico img{
        width: 110px;
        height: 110px;
        margin: 5px;
    }
    .main-left .content-inner li .rnitiator-box{
        width: 45%;
    }
    .main-left .content-inner li .userbody{
        width: 150px;
    }
    .main-left .content-inner{
        left: 15px;
    }
    .main-left .content-inner li{
        background-position: 50% 5px;
    }
    .main-left .content-inner li .recipent-box .userbody{
        width: 130px;
    }
    .main-right .online-title{
        line-height: 50px;
    }
    .main-right .online{
        width: 100%;
        margin-left: 0px;
    }
    .content-box{
        width: 100%;
    }
    .main-left .content-inner li .recipent-box{
        width: 40%;
    }


}
@media (max-width: 575px){
    .home{
        background-position: 0% 0%;
        height: 650px;
    }
    .home .logo{
        margin-top: 20px;
    }
    .home .logo img{
        width: 100%;
    }
    .home .text{
        float:none !important;
    }
    .home .text{
        margin-top: 35px;
        margin-left: 40px;
        text-align: center;
    }
    .g-recaptcha{
        width: 100%;
        overflow: hidden;
    }
    .home .text img{
        width: 80%;
        height: auto;
    }
    .home .login-box{
        float: none !important;
        margin-top: 30px;
        margin-left: 0px;
        width: 100%;
    }
    .home .login-box .login{
        width: 100%;
        margin-top: 15px;
    }
    .home .login-box .login .btn{
        float: none !important;
        margin-top: 10px;
        height:55px;
    }
    .footer{
        padding-top: 0px;
    }
    .footer img{
        max-width: 100%;
    }
    .header{
        height: 152px;
    }
    .header .header-triangle{
        width: 0%;
        border-width: 0 0px 152px 60px;
    }
    .header .channel-logo img{
        max-width: 90%;
    }
    .header .user-box{
        margin-left: 0px;
    }
    .header .user-box .user-name{
        font-size: 16px;
    }
    .header .user-box a{
        font-size: 16px;
        padding: 0 10px 0px 10px;
    }
    .content-box{
        width: 100%;
    }
    .main-left .radomiseme-ico{
        width: 120px;
        height: 120px;
        left: 130px;
        display: none;
    }
    .main-left .radomiseme-ico img{
        width: 110px;
        height: 110px;
        margin: 5px;
    }
    .main-left .content-inner{
        width: 95%;
        left: 10px;
    }
    .main-left .content-inner li .userface{
        margin: 0 auto;
        float: none;
    }
    .main-left .content-inner li .userbody{
        float: none;
        width: 100%;
        margin: 8px auto;
    }
    .main-left .content-inner li .rnitiator-box{
        text-align: center;
    }
    .main-left .content-inner li .userbody p{
        margin-bottom: 0px;
    }
    .main-left .content-inner li .userbody h3{
        font-size: 18px;
    }
    .main-left .content-inner li .recipent-box .userbody{
        width: 100%;
        text-align: center;
    }
    .main-left .content-inner li .recipent-box .btn{
        width: 80%;
        float: right;
        padding: 0px;
        line-height: 50px;
        margin-top: 20px;
    }
    .main-right .online{
        width: 100%;
        margin-left: 0px;
    }
    .main-right .online-title{
        line-height: 50px;
    }
    .main-left .content-inner li{
        background-position: 50% 8px;
    }

}
@media (max-width: 575px){
    .main-left .radomiseme-ico{
        width: 120px;
        height: 120px;
        left: 200px;
        display: none;
    }

}
@media (max-width:414px){
    .main-left .radomiseme-ico{
        width: 120px;
        height: 120px;
        left: 130px;
        display: none;
    }
}
@media (max-width:375px){
    .header .header-triangle{
        width: 0%;
        border-width: 0 0px 152px 60px;
    }
    .main-left .radomiseme-ico{
        left: 115px;
        display: none;
    }
    .header .user-box a{
        padding: 0 5px 0px 5px;
    }
    .main-left .content-inner li .recipent-box .btn{
        font-size: 16px;
    }
    .main-left .content-inner li{
        background-position: 50% 7px;
    }
    .main-right .online{
        width: 100%;
        margin-left: 0px;
    }
    .main-right .online-title{
        line-height: 60px;
    }
}


@media (max-width:280px){
    .main-content h2{
        font-size: 30px;
        padding: 22px 0px 22px 0px;
    }
    .main-left .content-inner li .recipent-box .btn{
        font-size: 10px;
        width: 70%;
        line-height: 18px;
        margin-top: 25px;
    }

    .footer{
        text-align: center;
    }

}
@media (max-width:360px){
    .main-left .radomiseme-ico{
        left: 100px;
        display: none;
    }
}

@media (max-width:320px){
    .main-left .content-inner li .recipent-box .btn{
        font-size: 14px;
    }

    .footer{
        text-align: center;
    }
    .main-left .radomiseme-ico{
        left: 85px;
    }

}