@charset "utf-8";

@media screen and (min-width: 931px) {

    .trans (@transition: 0.3s) {

        -webkit-transition: all @transition ease-in-out;

        -moz-transition: all @transition ease-in-out;

        transition: all @transition ease-in-out;

    }

    section {

        text-align: center;

        padding: 0;

    }



    section > button {

        background: #c50003;

        display: block;

        margin: 0 auto;

        width: 220px;

        font-size: 16.996px;

        line-height: 20px;

        padding: 10px 8px 10px;

        border-radius: 5px;

        .rounded;

        .trans;

        color: #fff;

        cursor: pointer;

    }



    section > button:hover {

        background: #7e0103;

    }



    .pop {

        display: none;

        position: fixed;

        top: 12%;

        /* left: 20%;

        width: 60%; */

        height: 620px;

        background-color: rgba(0, 0, 0, 0.9);

        padding: 20px 0;

        margin: 0 0 10% 0;

        border-radius: 20px;

        z-index: 9999;

    }



    .pop > p {

        text-align: center;

        font-size: 100%;

        padding: 0;

        background-image: url(./images/step_by_a1.png);

        background-repeat: no-repeat;

        background-size: 100%;

        width: 645px;

        height: 334px;

        margin: 0 auto 30px;

    }



    .poplink {

        width: 100%;

        margin: 0 auto;

        text-align: center;

    }

    .poplink a {

        display: inline-block;

        width: 250px;

        font-size: 1.2em;

        padding: 8px 10px;

        background: linear-gradient(to bottom, #c9c9c9 0%, #999999 100%);

        color: #333;

        border-radius: 5px;

        border: solid #e7e7e7 2px;



        margin: 0 10px 10px 10px;

    }

    .poplink a:hover {

        background: linear-gradient(to bottom, #db0000 0%, #910202 100%);

        color: #fff;

    }



    .pop > span {

        cursor: pointer;

        position: absolute;

        top: 5%;

        right: 3%;

        font-size: 18px;

        -webkit-border-radius: 100px;

        -moz-border-radius: 100px;

        border-radius: 100px;

        background-color: #666;

        color: #fff;

        padding: 8px 0px 0px 13px;

        width: 40px;

        height: 40px;

        transition: 1s;

    }

    .pop > span:hover {

        background-color: #fff;

        color: #333;

    }

}

@media screen and (min-width: 768px) and (max-width: 930px) {

    .trans (@transition: 0.3s) {

        -webkit-transition: all @transition ease-in-out;

        -moz-transition: all @transition ease-in-out;

        transition: all @transition ease-in-out;

    }

    section {

        text-align: center;

        padding: 0;

    }



    section > button {

        background: #c50003;

        display: block;

        margin: 0 auto;

        width: 200px;

        font-size: 16.996px;

        line-height: 20px;

        padding: 8px 8px 8px;

        border-radius: 5px;

        .rounded;

        .trans;

        color: #fff;

        cursor: pointer;

    }



    section > button:hover {

        background: #7e0103;

    }



    .pop {

        display: none;

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.9);

        padding: 0 0 10% 0;

    }



    .pop > p {

        text-align: center;

        font-size: 100%;

        padding: 5% 0 0 0;

        background-image: url(./images/step_by_a2.png);

        background-repeat: no-repeat;

        background-size: 100%;

        width: 70%;

        

        margin: 0 auto;

    }

    .poplink {

        width: 100%;

        margin: 0 auto;

        text-align: center;

    }

    .poplink a {

        display: block;

        font-size: 1.5em;

        padding: 5px 10px;

        background-color: #af0003;

        color: #fff;

        border-radius: 5px;

        margin: 0 15px 10px;

    }

    .poplink a:hover {

        background-color: #700103;

    }



    .pop > span {

        cursor: pointer;

        position: absolute;

        top: 4%;

        right: 4%;

        -webkit-border-radius: 100px;

        -moz-border-radius: 100px;

        border-radius: 100px;

        background: @gray;

        color: #fff;

        padding: 6px 0px 0px 9px;

        width: 30px;

        height: 30px;

    }

}

@media screen and (min-width: 481px) and (max-width: 767px) {

    .trans (@transition: 0.3s) {

        -webkit-transition: all @transition ease-in-out;

        -moz-transition: all @transition ease-in-out;

        transition: all @transition ease-in-out;

    }

    section {

        text-align: center;

        padding: 0;

    }



    section > button {

        background: #c50003;

        display: block;

        margin: 0 auto;

        width: 200px;

        font-size: 16.996px;

        line-height: 20px;

        padding: 8px 8px 8px;

        border-radius: 5px;

        .rounded;

        .trans;

        color: #fff;

        cursor: pointer;

    }



    section > button:hover {

        background: #7e0103;

    }



    .pop {

        display: none;

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.9);

        padding: 0 0 10% 0;

    }



    .pop > p {

        text-align: center;

        font-size: 100%;

        padding: 5% 0 0 0;

        background-image: url(./images/step_by_a2.png);

        background-repeat: no-repeat;

        background-size: 100%;

        width: 65%;

        margin: 0 auto;

    }

    .poplink {

        width: 100%;

        margin: 0 auto;

        text-align: center;

    }

    .poplink a {

        display: block;

        font-size: 1.2em;

        padding: 5px 20px;

        background-color: #af0003;

        color: #fff;

        border-radius: 5px;

        margin: 0 20px 10px;

    }

    .poplink a:hover {

        background-color: #700103;

    }



    .pop > span {

        cursor: pointer;

        position: absolute;

        top: 4%;

        right: 4%;

        -webkit-border-radius: 100px;

        -moz-border-radius: 100px;

        border-radius: 100px;

        background: @gray;

        color: #fff;

        padding: 6px 0px 0px 9px;

        width: 30px;

        height: 30px;

    }

}

@media screen and (max-width: 480px) {

    .trans (@transition: 0.3s) {

        -webkit-transition: all @transition ease-in-out;

        -moz-transition: all @transition ease-in-out;

        transition: all @transition ease-in-out;

    }

    section {

        text-align: center;

        padding: 0;

    }



    section > button {

        background: #c50003;

        display: block;

        margin: 0 auto;

        width: 200px;

        font-size: 16.996px;

        line-height: 20px;

        padding: 8px 8px 8px;

        border-radius: 5px;

        color: #fff;

        cursor: pointer;

    }



    section > button:hover {

        background: #7e0103;

    }



    .pop {

        display: none;

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.9);

        padding: 0 0 10% 0;

        z-index: 9999;

    }



    .pop > p {

        text-align: center;

        font-size: 100%;

        padding: 5% 0 0 0;

        background-image: url(./images/step_by_a2.png);

        background-repeat: no-repeat;

        background-size: 100%;

        width: 85%;

        height:53%;	

        margin: 5% auto 0;

    }

    .poplink {

        width: 100%;

        margin: 0 auto;

        text-align: center;

    }

    .poplink a {

        display: block;

        font-size: 1.2em;

        padding: 5px 20px;

        background-color: #af0003;

        color: #fff;

        border-radius: 5px;

        margin: 0 20px 10px;

    }

    .poplink a:hover {

        background-color: #700103;

    }



    .pop > span {

        cursor: pointer;

        position: absolute;

        top: 1%;

        right: 1%;

        -webkit-border-radius: 100px;

        -moz-border-radius: 100px;

        border-radius: 100px;

        background: @gray;

        color: #fff;

        padding: 6px 0px 0px 9px;

        width: 30px;

        height: 30px;

    }

}