@charset "utf-8";

/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

img,
object,
embed,
video {
    max-width: 100%;
}


/* IE 6 does not support max-width so default to width 100% */

.ie6 img {
    width: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #fff;
    color: #000000;
    font-family: 'Graphik';
    font-weight: 400;
}

.num {
    font-size: 26px;
    padding: 0px 10px 0 0;
    margin-left: -30px;
}

.container {
    width: 940px;
    height: auto;
    margin: 0 auto;
}

.img-with-text {
    float: right;
    width: 275px;
    margin: -30px 0px 0 97px;
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

.img-with-text p {
    text-align: center;
    margin: 0px;
    color: white;
    background: #a3a3a3ad;
    padding: 10px 0px;
    font-size: 20px;
}

.img-with-text1 {
    float: left;
    width: 247px;
    margin-right: 40px;
}

.img-with-text1 img {
    display: block;
    margin: 0 auto;
}

.img-with-text1 p {
    text-align: center;
    margin: 0px;
    color: white;
    background: #a3a3a3ad;
    padding: 10px 0px;
    font-size: 20px;
}

.text-text {
    display: block;
    margin: 0 auto;
    width: 800px;
}

.text-text>p {
    text-align: center;
    margin: 0px;
    color: white;
    background: #a3a3a3ad;
    padding: 10px 0px;
    font-size: 20px;
}

a {
    text-decoration: none;
}

.dsplay {
    display: table;
    box-sizing: border-box;
}

p,
h1,
ul {
    padding: 0;
    margin: 0;
}

p {
    font-size: 20px;
    line-height: 32px;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Graphik';
    font-weight: 400;
    letter-spacing: normal;
}

.par-new {
    font-size: 28px;
    line-height: 40px;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Graphik';
    font-weight: 600;
    margin-top: 25px;
}

.br-hide {
    display: block;
}

.c12 {
    font-weight: 600;
}

.c19 {
    text-align: center;
}

.c8 {
    font-style: italic;
}

.c1 {
    text-decoration: underline;
}

.image-all {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
}

.image-all-order {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.blue-box {
    background: #f0f7fc;
    border: 1px solid #ebebeb;
    padding: 10px 20px;
}

.c32 {
    color: #e6432d;
}

li {
    list-style: none;
}

.c25 {
    color: #999999;
    font-size: 12px;
}

.bonus-img {
    display: block;
    margin: 0 auto;
    width: 500px;
}

.bonus-spec {
    display: block;
    width: 250px;
}

.bonus-box {
    display: flex;
}

.img-zn-mg-b6 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.left-img {
    float: left;
    margin: 30px 40px 30px 0px;
}

.clearall {
    clear: both;
    height: 1px;
    width: auto;
}

.position {
    position: relative;
}

.dsplay {
    width: 100%;
    display: table;
}

* {
    box-sizing: border-box;
}

.bdfont {
    font-size: 20px;
    line-height: 32px;
    color: #000000;
}

b {
    font-weight: 600;
}

.bdfont u {
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.bdfont sup a {
    color: #999999;
    font-size: 10px;
}

.bdfont a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    color: #004db3;
}

.bdhding1 {
    font-weight: 600;
    font-size: 40px;
    line-height: 52px;
    font-style: italic;
}

.red {
    color: #ff0000;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.bdfont sup a {
    color: #999999;
    font-size: 10px;
}


/*========================*/

.sec1 {
    background: url(../images/sec1.jpg) center top no-repeat;
    padding: 0 0 30px;
}

.logo {
    display: block;
    margin: 0 auto;
    padding: 15px 0 0 0;
}

.yesbox {
    padding: 0 0 0 130px;
    margin: 20px 0 0 0;
    min-height: 52px;
    height: 100%;
}

.yes,
.yes2 {
    background: #e6432d;
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    margin: 6px auto 0 auto;
    display: table;
    padding: 8px 10px 6px;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
}

.yes::after,
.yes2::after {
    content: '';
    position: absolute;
    right: -11px;
    top: 11px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid #e6432d;
    border-bottom: 12px solid transparent;
    clear: both;
}

.s1-p1,
.s1-p2 {
    font-size: 26px;
    line-height: 34px;
    text-align: left;
    color: #fff;
    padding: 0;
}

.s1-p2 {
    padding: 14px 0 0 0;
}

.s1-line {
    background: url(../images/s1-line.png) center top no-repeat;
    height: 1px;
    display: block;
    margin: 20px auto 0 auto;
}

.s1-end-arw {
    display: block;
    margin: -30px auto 15px auto;
    width: 45px;
}

@media only screen and (max-width: 810px) {
    .text-text {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .text-text>p {
        text-align: center;
        margin: 0px;
        color: white;
        background: #878787;
        padding: 10px 0px;
        font-size: 18px;
    }
    .img-with-text1 {
        float: none;
        width: 253px;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .img-with-text {
        float: none;
        display: block;
        margin: 0 auto;
        width: 275px;
    }
}

@media only screen and (max-width: 1050px) {
    .container {
        max-width: 760px;
        width: 100%;
    }
    .s1-p1,
    .s1-p2 {
        font-size: 24px;
        line-height: 30px;
        text-align: left;
        color: #fff;
        padding: 0;
    }
}

@media only screen and (max-width: 767px) {
    .bonus-box {
        display: flex;
        flex-direction: column;
    }
    .container {
        width: 100%;
        max-width: 640px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .sec1 {
        background-size: cover;
        padding: 1px 0 30px 0;
    }
    .yesbox {
        padding: 0 0 0 94px;
        margin: 15px 0 0 0;
    }
    .yes,
    .yes2 {
        font-size: 26px;
        line-height: 26px;
    }
    .yes::after,
    .yes2::after {
        top: 9px;
    }
    .s1-line {
        margin: 15px auto 0 auto;
    }
    .s1-p1,
    .s1-p2 {
        font-size: 20px;
        line-height: 26px;
    }
    .s1-end-arw {
        margin: -30px auto 5px auto;
        width: 40px;
    }
}

@media only screen and (max-width: 479px) {
    .logo {
        width: 200px;
        padding: 10px 0 0 0;
    }
    .yesbox {
        padding: 0 0 0 80px;
        margin: 12px 0 0 0;
    }
    .yes,
    .yes2 {
        font-size: 24px;
        line-height: 24px;
        padding: 5px 6px 4px;
        border-radius: 2px;
    }
    .yes::after,
    .yes2::after {
        top: 7px;
        right: -9px;
        border-top: 9px solid transparent;
        border-left: 9px solid #e6432d;
        border-bottom: 9px solid transparent;
    }
    .s1-p1,
    .s1-p2 {
        font-size: 17px;
        line-height: 23px;
    }
    .s1-line {
        margin: 12px auto 0 auto;
    }
}

@media only screen and (max-width: 359px) {
    .s1-p1,
    .s1-p2 {
        font-size: 16px;
        line-height: 21px;
    }
}


/*============select============*/

.sec2 {
    padding: 20px 0 40px;
}

.s2-p1 {
    text-align: center;
    padding: 0 0;
    width: 90%;
    display: block;
    margin: 0 auto;
    font-size: 24px;
    line-height: 34px;
}

.pink {
    color: #e6432d;
    text-shadow: 1px 1px rgb(41, 41, 41);
}

.freeship {
    margin: 10px auto;
    display: block;
}

.imptxt {
    font-size: 14px;
    line-height: 19px;
    color: #727b76;
    text-align: left;
    padding: 20px 0 0 0;
}

a.pkg1btn {
    height: 72px;
    width: 95%;
    background: #00d47a;
    background: -webkit-linear-gradient(#00d47a, #00ac37);
    background: -moz-linear-gradient(#00d47a, #00ac37);
    background: -o-linear-gradient(#00d47a, #00ac37);
    background: linear-gradient(#00d47a, #00ac37);
    border-bottom: 1px solid #747265;
    border-radius: 5px;
    font-weight: bold;
    font-size: 26px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px #00953e;
    outline: none;
    margin: 0 auto 0 auto;
    display: block;
    box-sizing: border-box;
    padding: 2px 0 0 0;
}

.freeship-txt1,
.freeship-txt2 {
    font-family: 'Graphik';
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0 0 0;
}

.freeship-txt2 {
    background: url(../images/worldwidebg.png) center center no-repeat;
    padding: 0;
    margin: 0 0 0 0;
}

.freeship-img {
    margin: 10px auto -10px auto;
    display: block;
}

.freeship-txt3 {
    font-size: 13px;
    line-height: 18px;
    color: #727b76;
    text-align: left;
    padding: 25px 0 0 0;
    margin-bottom: 40px;
}

.freeship-txt3 a {
    color: #03F;
}


/*===================pkg-end================*/

.s2-box {
    background: #e6432d;
    margin: 50px auto 0 auto;
    padding: 30px 30px;
    position: relative;
}

.s2-box::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 0;
    display: block;
    margin: 0 auto;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-top: 35px solid #e6432d;
    clear: both;
}

.s2-box-p1 {
    text-align: center;
    color: #fff;
}

.yellow {
    color: #fff000;
}

.s2-box2 {
    background: #d33924;
    display: block;
    margin: -1px auto 0 auto;
    padding: 50px 10px;
}

.s2-box2-p1 {
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
}

.s2-p2 {
    padding: 35px 0 0 0;
}

.comnt-img {
    float: left;
    margin: -63px 30px 0 20px;
}

.cont-name {
    display: block;
    margin: 10px 0 0 0;
}

ul.s2-list1 {
    margin: 30px 0 0 35px;
}

ul.s2-list1 li {
    background: url(../images/pnk-tk.png) left 14px no-repeat;
    font-size: 22px;
    line-height: 38px;
    text-align: left;
    color: #333333;
    padding: 0 0 0 36px;
}

ol.s2-list1 {
    margin: 30px 0 0 12px;
}

ol.s2-list1 li {
    font-size: 22px;
    line-height: 38px;
    text-align: left;
    color: #333333;
    padding: 0 0 0 10px;
}

.s2-hding1 {
    text-align: center;
    margin: 50px auto 0 auto;
}

.s2-img1 {
    float: right;
    margin: -38px 0 0 32px;
}

.ing1,
.ing2,
.ing3,
.ing4,
.ing5,
.ing6,
.ing7,
.ing8 {
    background: url(../images/ing1.jpg) center top no-repeat;
    height: 180px;
    position: relative;
    display: block;
    margin: 40px auto 0 auto;
    width: 100%;
}

.ing2 {
    background: url(../images/ing2.jpg) center top no-repeat;
}

.ing3 {
    background: url(../images/ing3.jpg) center top no-repeat;
}

.ing4 {
    background: url(../images/ing4.jpg) center top no-repeat;
}

.ing5 {
    background: url(../images/ing5.jpg) center top no-repeat;
}

.ing6 {
    background: url(../images/ing6.jpg) center top no-repeat;
}

.ing7 {
    background: url(../images/ing7.jpg) center top no-repeat;
}

.ing8 {
    background: url(../images/ing8.jpg) center top no-repeat;
}

.ing-txt {
    background: url(../images/ing-shedow.png) left bottom repeat-x;
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: 600;
    font-size: 42px;
    line-height: 44px;
    text-align: left;
    color: #fff;
    padding: 10px 0 10px 29px;
    box-sizing: border-box;
    width: 100%;
    text-decoration: underline;
}

ul.ing-list {
    margin: 20px 0 0 35px;
}

ul.ing-list li {
    background: url(../images/bullet1.png) left 11px no-repeat;
    font-size: 20px;
    line-height: 32px;
    text-align: left;
    color: #333333;
    padding: 0 0 0 30px;
    margin: 5px 0 0 0;
}

ul.ing-list li.onlhsup {
    background: url(../images/bullet1.png) left 14px no-repeat;
    margin: 12px 0 0 0;
}

ul.ing-list li sup a {
    color: #999999;
    font-size: 10px;
}

ul.ing-list li sup,
ul.ing-list li sup,
ul.ing-list li sup {
    color: #999999;
    font-size: 10px;
}

.s1txt4 {
    padding: 35px 0 0 0;
}

@media only screen and (max-width: 1050px) {
    .freeship-txt3 {
        width: 90%;
    }
    .bdhding1 {
        font-weight: 600;
        font-size: 36px;
        line-height: 51px;
    }
    .s2-p1 {
        width: 100%;
        font-size: 22px;
        line-height: 30px;
    }
    .s2-img1 {
        float: right;
        margin: 4px 0 0 25px;
        width: 280px;
    }
    .s2-hding1 {
        margin: 43px auto 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .left-img {
        float: none;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .img-zn-mg-b6 {
        flex-direction: column;
    }
    .solo-img {
        margin-bottom: 20px;
    }
    .s2-p1 {
        font-size: 20px;
        line-height: 26px;
        width: 100%;
    }
    .freeship-txt3 {
        width: 100%;
    }
    .bdhding1 {
        font-size: 32px;
        line-height: 42px;
    }
    .s2-box {
        padding: 20px 10px;
        margin: 30px auto 0 auto;
    }
    .s2-box::after {
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 25px solid #e6432d;
    }
    .s2-box2 {
        padding: 30px 10px 50px 10px;
    }
    .s2-box2-p1 {
        font-size: 22px;
        line-height: 32px;
    }
    .comnt-img {
        float: none;
        display: block;
        margin: -46px auto 20px auto;
    }
    .comnt-img-p {
        text-align: center;
    }
    .cont-name {
        display: block;
        margin: 10px auto 0 auto;
    }
    ul.s2-list1 {
        margin: 30px 0 0 0;
    }
    ul.s2-list1 li {
        font-size: 20px;
        line-height: 32px;
        margin: 10px 0 0 0;
    }
    ol.s2-list1 {
        margin: 30px 0 0 0px;
        padding-left: 15px;
    }
    ol.s2-list1 li {
        font-size: 20px;
        line-height: 32px;
        margin: 10px 0 0 0;
    }
    .par-new {
        font-size: 22px;
        line-height: 30px;
    }
    .s2-hding1 {
        margin: 30px auto 0 auto;
    }
    .s2-img1 {
        float: none;
        display: block;
        margin: 4px auto 22px auto;
        width: 280px;
    }
    .s1txt4 {
        padding: 16px 0 0 0;
    }
    .ing-txt {
        font-size: 36px;
        line-height: 39px;
        padding: 10px 0 10px 13px;
    }
    .s2-p2 {
        padding: 15px 0 0 0;
    }
    ul.ing-list {
        margin: 20px 0 0 0;
    }
}

@media only screen and (max-width:479px) {
    .s2-p1 {
        font-size: 20px;
        line-height: 26px;
    }
    .bdfont {
        font-size: 18px;
        line-height: 30px;
    }
    .bdhding1 {
        font-size: 28px;
        line-height: 37px;
    }
    ul.ing-list li {
        font-size: 18px;
        line-height: 25px;
    }
    .ing-txt {
        font-size: 32px;
        line-height: 34px;
    }
    .s2-hding1 {
        margin: 25px auto 0 auto;
    }
    .s2-box2-p1 {
        font-size: 20px;
        line-height: 29px;
    }
    .s2-box::after {
        border-left: 22px solid transparent;
        border-right: 22px solid transparent;
        border-top: 22px solid #e6432d;
    }
    .s2-box2 {
        padding: 37px 10px 50px 10px;
    }
}


/*===================sec3====================*/

.sec3 {
    background: #f8f6ef;
    padding: 30px 0 60px;
}

.s3-hd {
    margin: 0 auto;
}

.s3-probg {
    background: url(../images/s3-probg.png) center top no-repeat;
    margin: 0 auto;
}

.s3-pro {
    display: block;
    margin: -78px auto 0 auto;
}

.s3-box1 {
    background: #f6eed0;
    border: 1px solid #c3a94d;
    position: relative;
    display: block;
    margin: 60px auto 0 auto;
    padding: 0 10px 0 246px;
    min-height: 210px;
    height: 100%;
}

.s3-box-txt1,
.s3-box-txt2,
.s3-box-txt3,
.s3-box-txt4,
.s3-box-txt5,
.s3-box-txt6 {
    text-align: left;
    padding: 56px 0 0 0;
}

.s3-box-txt2 {
    padding: 71px 0 0 0;
}

.s3-box-txt3 {
    padding: 56px 0 0 0;
}

.s3-box-txt4 {
    padding: 71px 0 0 0;
}

.s3-box-txt5 {
    padding: 56px 0 0 0;
}

.s3-box-txt6 {
    padding: 28px 0 0 0;
}

.s3-img1 {
    position: absolute;
    top: -22px;
    left: 20px;
}


/*===================sec4====================*/

.sec4 {
    padding: 40px 0;
}

.s4-img1 {
    float: right;
    margin: 0 0 0 30px;
}

.s4-p1 {
    padding: 35px 0 0 0;
}

.comt {
    margin: 52px 0 0 0;
}

.comnt-img2 {
    float: left;
    margin: 0 30px 0 0;
}

.cont-name2 {
    display: block;
    margin: 30px 0 30px 0;
}


/*===========================*/

.s12-box {
    border: 1px solid #e9e9e9;
    display: block;
    margin: 50px auto 20px auto;
    position: relative;
    background: url(../images/s12-bx-bg.jpg) center top repeat;
    border-radius: 6px;
    padding: 15px 15px;
    width: 76.11%;
}

.s12-box-mid {
    background: #fffaec;
    padding: 0 0 30px;
}

.s4-seal {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
}

.bdhding2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    margin-top: 28px;
    margin-bottom: 23px;
}

.s12-box-mid-hd {
    text-align: center;
    padding: 155px 0 0 0;
}

.s12-line {
    display: block;
    margin: 23px auto 0 auto;
}

.s12-box-mid-hd-p {
    text-align: center;
    padding: 18px 60px 0;
}

ul.cont-list {
    padding: 25px 0 10px 28px;
}

ul.cont-list li {
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    display: table;
    text-align: left;
    width: 383px;
    margin: 15px 0 0 0;
}

ul.cont-list li a {
    color: #06C;
    text-decoration: underline;
}

.cont-list-p1,
.cont-list-p2 {
    float: left;
    font-size: 17px;
    line-height: 22px;
    color: #333333;
    padding: 10px 15px;
    border-right: 1px solid #d7d7d7;
    width: 85px;
}

.cont-list-p2 {
    margin: 0 0 0 0;
    border-right: none;
    width: auto;
}

@media only screen and (max-width: 1050px) {
    .s3-box-txt1,
    .s3-box-txt2,
    .s3-box-txt3,
    .s3-box-txt4,
    .s3-box-txt5,
    .s3-box-txt6 {
        padding: 54px 0 0 0;
        font-size: 18px;
        line-height: 26px;
    }
    .s3-box-txt2 {
        padding: 60px 0 0 0;
    }
    .s3-box-txt3 {
        padding: 56px 0 0 0;
    }
    .s3-box-txt4 {
        padding: 59px 0 0 0;
    }
    .s3-box-txt5 {
        padding: 38px 0 0 0;
    }
    .s3-box-txt6 {
        padding: 12px 0 0 0;
    }
    .s4-img1 {
        width: 346px;
    }
    .s12-box {
        margin: 100px auto 20px auto;
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .s3-pro {
        margin: -55px auto 0 auto;
        width: 400px;
    }
    .s3-pro {
        margin: -46px auto 0 auto;
        width: 364px;
    }
    .s3-box1 {
        margin: 170px auto 0 auto;
        padding: 0 10px 0 10px;
        min-height: auto;
        height: auto;
    }
    .s3-img1 {
        top: 0;
        left: 0;
        right: 0;
        display: block;
        margin: -136px auto 0 auto;
        position: initial;
    }
    .s3-box-txt1,
    .s3-box-txt2,
    .s3-box-txt3,
    .s3-box-txt4,
    .s3-box-txt5,
    .s3-box-txt6 {
        padding: 20px 0 20px 0;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
    }
    .s4-img1 {
        width: 290px;
        float: none;
        display: block;
        margin: 0 auto 28px auto;
    }
    /*------------------------*/
    .s12-box-mid-hd-p {
        padding: 20px 12px 0;
    }
    .s12-box-mid-hd {
        padding: 93px 0 0 0;
    }
    .s4-seal {
        top: -72px;
        width: 173px;
    }
    .s12-box {
        padding: 10px 10px;
    }
    .s12-box-mid {
        padding: 0 0 20px;
    }
    .s12-line {
        margin: 14px auto 0 auto;
    }
    .s12-box-mid-hd-p {
        padding: 14px 12px 0;
    }
    .bdhding2 {
        font-size: 30px;
        line-height: 36px;
    }
    /*------------------*/
    .comt {
        margin: 32px 0 0 0;
    }
    .comnt-img2 {
        float: none;
        margin: 0 auto 20px auto;
        display: block;
    }
    ul.cont-list {
        padding: 10px 0 0 0;
    }
    ul.cont-list li {
        width: 90%;
    }
}

@media only screen and (max-width:479px) {
    /*------------------------*/
    .s12-box {
        margin: 80px auto 0 auto;
    }
    .s4-seal {
        top: -58px;
        width: 159px;
    }
    .s12-box-mid-hd {
        font-size: 28px;
        line-height: 32px;
    }
    ul.cont-list li {
        width: 100%;
    }
    .cont-list-p2 {
        font-size: 15px;
        padding: 6px 0 6px 6px;
    }
    .cont-list-p1 {
        width: 61px;
        font-size: 16px;
        padding: 6px 0 6px 6px;
    }
}


/*----------------product area-----------------*/

.pkgcontainer {
    margin: 15px auto 10px auto;
}

.pkg1 {
    position: absolute;
    left: 33.03%;
    top: 10px;
    z-index: 9;
    width: 33.92%;
    box-sizing: border-box;
    border-radius: 10px;
}

.pkg2,
.pkg3 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    width: 33.61%;
    border-radius: 10px;
    margin: 19px 0 0 0;
    background: #dbdbdb;
}

.pkg2 {
    float: right;
}

.pkg1-hdbx,
.pkg2-hdbx {
    height: 96px;
    border-radius: 8px 8px 0 0;
    position: relative;
    background: #ff8400;
    background: -webkit-linear-gradient(to right, rgba(255, 132, 0, 1), rgba(255, 189, 0, 1));
    background: -moz-linear-gradient(to right, rgba(255, 132, 0, 1), rgba(255, 189, 0, 1));
    background: -o-linear-gradient(to right, rgba(255, 132, 0, 1), rgba(255, 189, 0, 1));
    background: linear-gradient(to right, rgba(255, 132, 0, 1), rgba(255, 189, 0, 1));
    border-bottom: 4px solid #ff8400;
    box-sizing: border-box;
}

.pkg2-hdbx {
    height: 87px;
    border: 10px solid #666666;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #ababab;
}

.pkg1-hdbx-txt1,
.pkg2-hdbx-txt1,
.pkg1-hdbx-txt2,
.pkg2-hdbx-txt2 {
    font-family: 'Graphik';
    font-weight: 600;
    font-size: 36px;
    line-height: 86px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px #c47300;
    padding: 10px 0 0 0;
}

.pkg2-hdbx-txt1 {
    text-shadow: 1px 1px #848483;
    line-height: 56px;
}

.pkg1-hdbx-txt2,
.pkg2-hdbx-txt2 {
    font-size: 29px;
    line-height: 31px;
    text-shadow: 1px 1px #848483;
    padding: 8px 0 0 0;
}

.pkg1btm {
    background: #ffd078;
    background: -webkit-linear-gradient(#ffd078, #fffbce);
    background: -moz-linear-gradient(#ffd078, #fffbce);
    background: -o-linear-gradient(#ffd078, #fffbce);
    background: linear-gradient(#ffd078, #fffbce);
    height: 743px;
}

.pkg2btm {
    background: #dbdbdb;
    border: 10px solid #d5d5d5;
    border-top: none;
    box-sizing: border-box;
    height: 743px;
    border-radius: 0 0 8px 8px;
}

.pkg1prdbx,
.pkg2prdbx {
    height: 346px;
}

.pkg1prdbx-hding,
.pkg2prdbx-hding {
    font-family: 'Graphik';
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    padding: 13px 0 0 0;
    color: #333333;
    margin: 0px;
}

.pkg2prdbx-hding {
    font-size: 16px;
}

.pkg1prdbx-hding span.span1,
.pkg2prdbx-hding span.span1 {
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
}

.pkgprd {
    margin: 5px auto 0 auto;
    display: block;
}

.pkgprcbx {
    height: 258px;
}

.rtlprice {
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    margin: 0px;
}

.rtlprice span {
    font-size: 24px;
    font-family: 'Graphik';
    font-weight: bold;
}

.strikeout {
    position: relative;
}

.strikeout::after {
    border-bottom: 0.05em solid #F00;
    content: "";
    left: 0;
    margin-top: calc(0.125em / 2 * -1);
    position: absolute;
    right: 0;
    top: 54%;
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.pkg2prdbd-cont {
    width: 292px;
    margin: 0 auto;
}

.pkg1-prcbd,
.pkg2-prcbdlft,
.pkg2-prcbdrgt {
    height: 175px;
    width: 198px;
    margin: 16px auto 0 auto;
    display: table;
    border: 1px solid #f2da59;
    box-sizing: border-box;
    background: #fce569 url(../images/rdio.png) center 8px no-repeat;
    border-radius: 4px;
}

.pkg2-prcbdlft,
.pkg2-prcbdrgt {
    display: inline-block;
    width: 135px;
    margin: 16px 4px 0 4px;
}

.pkg2-prcbdrgt {
    background: #ededed url(../images/rdio.png) center 8px no-repeat;
    border: 1px solid #a8a8a8;
}

.pkg1-prcbd,
.pkg2-prcbdlft.active {
    background: #fce569 url(../images/rdio-checked.png) center 8px no-repeat;
}

.pkg2-prcbdrgt.active {
    background: #ededed url(../images/rdio-checked.png) center 8px no-repeat;
}

.pkgprcbd-top {
    height: 142px;
    border-bottom: 1px solid #e7d057;
    position: relative;
}

.pkgprcbd-bottom {
    height: 31px;
    background: #fff9b6;
    border-radius: 0 0 4px 4px;
    position: relative;
}

.pkg2prcbdrgt-top {
    height: 142px;
    border-bottom: 1px solid #a8a8a8;
    position: relative;
}

.pkg2prcbdrgt-bottom {
    height: 31px;
    background: #cccccc;
    border-radius: 0 0 4px 4px;
    position: relative;
}

.rdbx {
    height: 21px;
    width: 21px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: url(../images/rdio.png) center top no-repeat;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
}

.rdbx:checked {
    background: url(../images/rdio-checked.png) center top no-repeat;
}

.pkgprcbline {
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    margin: 0 auto;
    display: block;
}

.pkg1-prctxt1,
.pkg2-prctxt1 {
    font-size: 20px;
    line-height: 30px;
    color: #7c7b73;
    text-align: center;
    padding: 44px 0 0 0;
    margin: 0px;
}

.pkg2-prctxt1 {
    padding: 34px 0 0 0;
    line-height: 21px;
}

.pkg1-prctxt2,
.pkg2-prctxt2 {
    font-family: 'Graphik';
    font-weight: bold;
    font-size: 42px;
    line-height: 45px;
    color: #000;
    text-align: center;
    margin: 0px;
}

.pkg1-eachbtlprc {
    font-family: 'Graphik';
    font-size: 14px;
    line-height: 16px;
    color: #000;
    text-align: center;
}

.pkg1-prctxt3,
.pkg2-prctxt3 {
    font-weight: bold;
    font-size: 22px;
    line-height: 31px;
    color: #ff6600;
    text-align: center;
}

.pkg2-prctxt3 {
    color: #6a6968;
}

.pkg2-prctxt4 {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    color: #8c8c8c;
    text-align: center;
    padding: 10px 0 0 0;
}

.pkg2-prctxt4 span {
    color: #000;
}

.cards {
    margin: 10px auto;
    display: block;
}

@media only screen and (max-width: 1050px) {
    .pkgcontainer {
        margin: 15px auto 10px auto;
    }
    .pkg1-hdbx-txt1,
    .pkg2-hdbx-txt1 {
        font-size: 29px;
    }
    .pkg1-hdbx-txt2,
    .pkg2-hdbx-txt2 {
        font-size: 23px;
        line-height: 25px;
        padding: 13px 0 0 0;
    }
    .pkg1btm,
    .pkg2btm {
        height: 625px;
    }
    .pkg2prdbx-hding,
    .pkg1prdbx-hding {
        line-height: 18px;
        font-size: 12px;
    }
    .pkg1prdbx-hding span.span1,
    .pkg2prdbx-hding span.span1 {
        font-size: 16px;
    }
    .pkg2-prcbdlft,
    .pkg2-prcbdrgt {
        width: 104px;
        margin: 16px 4px 0 4px;
    }
    .pkg1-prctxt1,
    .pkg2-prctxt1 {
        font-size: 17px;
        line-height: 19px;
    }
    .pkg1-prctxt2,
    .pkg2-prctxt2 {
        font-size: 36px;
        line-height: 42px;
    }
    .pkg1-prctxt3,
    .pkg2-prctxt3 {
        font-size: 19px;
    }
    .pkg1prdbx,
    .pkg2prdbx {
        height: 271px;
    }
    .pkg2-prctxt4 {
        font-size: 16px;
        line-height: 18px;
    }
    .pkgprd {
        max-width: 220px;
    }
    .pkg2prdbd-cont {
        width: 100%;
    }
    .pkg1-eachbtlprc {
        font-size: 13px;
        line-height: 15px;
    }
    .pkgprcbx {
        height: 243px;
    }
    .pkgprcbd-top,
    .pkg2prcbdrgt-top {
        height: 137px;
    }
    .pkg2-prcbdlft,
    .pkg2-prcbdrgt,
    .pkg1-prcbd {
        height: 170px;
    }
    .pkg2-prcbdlft,
    .pkg2-prcbdrgt {
        margin: 10px 4px 0 4px;
    }
    .pkg1-prcbd {
        margin: 10px auto 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        width: 100%;
        max-width: 640px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    /*----------------product area-----------------*/
    .pkgcontainer {
        margin: 8px auto 10px auto;
    }
    .pkg1,
    .pkg2,
    .pkg3 {
        float: none;
        position: inherit;
        left: auto;
        top: auto;
        margin: 10px auto 0 auto;
        display: block;
        width: 400px;
    }
    .pkg1-hdbx {
        height: 80px;
    }
    .pkg1-hdbx-txt1 {
        line-height: 70px;
    }
    .pkg1-hdbx-txt2,
    .pkg2-hdbx-txt2 {
        font-size: 29px;
        line-height: 31px;
        text-shadow: 1px 1px #848483;
        padding: 8px 0 0 0;
    }
    .pkg1prdbx,
    .pkg2prdbx,
    .pkgprcbx,
    .pkg2btm,
    .pkg1btm {
        height: auto;
    }
    .pkg2prdbx-hding,
    .pkg1prdbx-hding {
        line-height: 22px;
        font-size: 14px;
    }
    .pkg1prdbx-hding {
        font-size: 17px;
    }
    .pkg1btm {
        padding-bottom: 10px;
    }
    .pkg2prdbd-cont {
        width: 226px;
        margin: 0 auto;
    }
    .order-include {
        font-size: 21px;
        line-height: 21px;
        padding: 30px 0 0 0;
    }
    .pkg2-prcbdlft,
    .pkg2-prcbdrgt,
    .pkg1-prcbd,
    .pkgprcbd-top,
    .pkg2prcbdrgt-top {
        height: auto;
    }
    .pkgprcbd-top,
    .pkg2prcbdrgt-top {
        padding-bottom: 5px;
    }
    .pkg1-prctxt1 {
        padding: 35px 0 0 0;
    }
}

@media only screen and (max-width: 479px) {
    .pkg1,
    .pkg2,
    .pkg3 {
        width: 100%;
    }
}


/*===============start reference section====================*/

.refsec {
    padding: 20px 0 20px 0;
}

ul.reflist {
    padding: 10px 0 0 0;
}

ul.reflist li {
    position: relative;
    padding: 0px 0 0 28px;
    font-size: 12px;
    line-height: 18px;
    color: #b1b1b1;
    text-align: left;
    margin: 5px 0 0 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

ul.reflist li a {
    color: #004db3;
    text-decoration: underline;
}

.refnum {
    position: absolute;
    left: 0;
    top: 0;
}


/*======================= start footer ===================*/

footer {
    border-top: 1px solid #d7d7d7;
    padding: 35px 0;
}

.ftrtxt,
.ftrtxt2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #909090;
    text-align: center;
}

.ftrtxt2 a {
    color: #909090;
}

@media only screen and (max-width: 767px) {
    footer {
        padding: 20px 0;
    }
    .ftrtxt,
    .ftrtxt2 {
        font-size: 14px;
        line-height: 19px;
    }
    .num {
        font-size: 24px;
        padding: 5px 5px 0 0;
        margin-left: -25px;
    }
}