/* CSS Document */


@media screen and (max-width: 3000px) {
    .wapper { width: 1000px; margin: 0 auto; }

    .card-s-left { border-right: 1px solid #E6E6E6; float: left; margin: 20px 0 50px; min-height: 200px; padding-bottom: 10px; width: 50%; }

    .card-s-right { float: right; margin: 20px 0 50px; padding-bottom: 10px; width: 49%; }
}

@media screen and (max-width: 760px) {
    .wapper { width: 740px; margin: 0 auto; }

    .card-s-left { border-right: 1px solid #E6E6E6; float: left; margin: 20px 0 50px; min-height: 200px; padding-bottom: 10px; width: 50%; }

    .card-s-right { float: right; margin: 20px 0 50px; padding-bottom: 10px; width: 49%; }
}

@media screen and (max-width: 480px) {
    .wapper { width: 95%; max-width: 1000px; }

    .card-s-left { border-right: 0px; float: none; width: auto; }

    .card-s-right { float: none; width: auto; }
}


/*----------------- app detail_start  -----------------*/
#appDetail { max-width: 1000px; margin: 0 auto; }

@media screen and (max-width: 3000px) {
    #appDetail .header { position: relative; min-height: 200px; padding: 20px; width: 550px; float: left; margin-bottom: 16px; text-align: left; font-size: inherit}
}

@media screen and (max-width: 760px) {
    #appDetail .header { position: relative; min-height: 220px; padding: 20px; width: 300px; float: left; margin-bottom: 16px; text-align: center; font-size: smaller}
}

@media screen and (max-width: 480px) {
    #appDetail .header { width: 90%; padding: 5%; font-size: inherit}
}


@media screen and (max-width: 3000px) {
    #appDetail .header .appIcon { width: 200px; height: 200px; float: left; margin-right: 3.6363636%; }

    #appDetail .header .titleName { text-align: left; float: left; width: 330px; position: relative; word-break: normal; word-wrap: break-word; }

    #appDetail .header .titleName .appTitle { font-size: 32px; margin: 0; }

    #appDetail .header .titleName .userName { font-size: 24px; }
}

@media screen and (max-width: 760px) {
    #appDetail .header .appIcon { width: 130px; height: 130px; float: none; margin-bottom: 5%; }

    #appDetail .header .titleName { text-align: center; width: 100%; float: none; }

    #appDetail .header .titleName .appTitle { font-size: 24px; margin: 0; }

    #appDetail .header .titleName .userName { font-size: 28px; }
}

@media screen and (max-width: 480px) {
    #appDetail .header .appIcon { width: 150px; height: 150px; float: none; margin-bottom: 5%; }

    #appDetail .header .titleName { width: 100%; float: none; }

    #appDetail .header .titleName .appTitle { font-size: 32px; margin: 0; }

    #appDetail .header .titleName .userName { font-size: 24px; }
}

@media screen and (max-width: 3000px) {
    #appDetail .header .share { position: absolute; bottom: 20px; right: 20px; }
}

@media screen and (max-width: 760px) {
    #appDetail .header .share { top: 10%; bottom: initial; right: 0; }
}

@media screen and (max-width: 480px) {
    #appDetail .header .share { top: 10%; bottom: initial; right: 0; }
}


#appDetail .header .appDes { padding: 20px; font-size: 18px; }

@media screen and (max-width: 3000px) {
    #appDetail .appDes { min-height: 200px; padding: 20px; width: 350px; float: right; margin-bottom: 16px; text-align: left; }
}

@media screen and (max-width: 760px) {
    #appDetail .appDes { min-height: 215px; padding: 20px; width: 310px; float: right; margin-bottom: 16px; text-align: left; padding: 5%; }
}

@media screen and (max-width: 480px) {
    #appDetail .appDes { width: 90%; padding: 5%; }
}

#appDetail .QR-wapper { padding: 20px; position: relative; min-height: 350px; clear: both; }


    #appDetail .QR-wapper .QRcode { width: 200px; height: 200px; }

    #appDetail .QR-wapper #android-wapper, #iphone-wapper { width: 500px; position: absolute; margin: 50px 0px; }

    #appDetail .QR-wapper .QR-title { height: 50px; width: 180px; margin: 0 auto; position: relative; font-size: 16px; }

        #appDetail .QR-wapper .QR-title img { position: absolute; left: 10px; }

        #appDetail .QR-wapper .QR-title span { position: absolute; left: 60px; top: 15px; }

    #appDetail .QR-wapper #android-wapper { left: 0px; top: 0px; border-right: 1px solid #cccccc; }

    #appDetail .QR-wapper #iphone-wapper { right: 0px; top: 0px; }

#appDetail .QR-des { font-size: 14px; color: #999999; margin: 0 30px; }

#msg-form { line-height: 1.2em; }
    #msg-form li { margin-bottom: 10px; font-size: 0.875em; }
    #msg-form img { width: 80%; margin: 15px auto 0; display: block; }


/*----------------- short link page  -----------------*/
#short-link-download { }
    #short-link-download .content > * { display: inline-block; vertical-align: middle; width: 49%; }
    #short-link-download .download { }
        #short-link-download .download ul { list-style: none; margin: 0; padding-left: 100px; }
            #short-link-download .download ul li { margin-bottom: 25px; text-align: left; }
        #short-link-download .download div { margin-bottom: 10px; font-weight: bold; }
        #short-link-download .download .gray { padding: 15px 5px; cursor: initial; }
        #short-link-download .download .mark { font-size: 0.75em; color: #999999; text-indent: -em; }
            #short-link-download .download .mark span { font-size: 1.5em; }
            #short-link-download .download .mark a { font-weight: bold; }
    #short-link-download .QR-wapper { }
        #short-link-download .QR-wapper span { display: block; font-weight: bold; }
        #short-link-download .QR-wapper .icon { width: 30px; vertical-align: middle; }
        #short-link-download .QR-wapper a { color: #999999; font-size: 0.75em; }

        
@media screen and (max-width: 3000px) {
    #short-link-download { font-size: inherit;}
    #short-link-download .download button { width: 150px; margin-right: 15px; font-size: inherit;}
    #short-link-download .title { display:block;}
}

@media screen and (max-width: 760px) {
    #short-link-download { font-size: 15px;}
    #short-link-download .title { display:none;}
    #short-link-download .download button { width: 100px; margin-right: 15px; font-size: 13px;}
    
}

@media screen and (max-width: 480px) {
    #short-link-download { font-size: inherit;}
    #short-link-download .download button { width: 150px; margin-right: 15px; font-size: inherit;}
    #short-link-download .title { display:block;}

    #short-link-download .content > * { display:block;width:100%;}
    #short-link-download .download ul { padding: 0; width:90%;margin:auto; }
        #short-link-download .download ul li { padding-bottom:15px; border-bottom:1px solid #cccccc;}
        #short-link-download .download ul img { display: block; margin: auto; }
    #short-link-download .download button { display: block; width: 100%;margin-bottom:10px; }
}