.headerblog-mncntnr {
    background-image: linear-gradient(to bottom, #357FBC 67%, #347BB7 34%);
    padding: 0 20px;
    overflow: hidden;
}

.headerblog-bgcntnr {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.headerblog-mnwrapr {
    max-width: 1200px;
    text-align: center;
    margin: auto;
    padding: 1px 0px 21px;
}

.headerblog-pg-hdrttl {
    font-size: 51px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Open Sans', Arial;
    font-weight: 700;
    position: relative;
    padding-top: 20px;
}

.headerblog-pg-text p:first-child {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 400;
    color: #fff;
}

.headerblog-pg-text span {
    font-weight: 600;
}

.headerblog-pg-subtext {
    font-size: 18px;
    color: #fff;
    padding-top: 0px;
}

.headerblog-pg-subtext a {
    color: #fff;
    text-decoration: underline;
}

.headerblog-img {
    padding-top: 22%;
    background: url(images/headerBG.png)no-repeat;
    margin-top: -7px;
    background-position: center;
    background-size: 21%;
}

.pageSub-basic-container {
    padding: 60px 20px;
}

.pageSub-basic-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.pageSub-basic-wrapper p {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
}

.pageSub-basic-wrapper span {
    font-weight: 600;
}

.blgArt-mncntnr {
    padding: 8px 10px 64px 10px;
}

.htArt-prime {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.blgArt-mnwrapr {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 45px;
    display: flex;
    flex-flow: row wrap;
}

.blgArt-col {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 30%;
    background: #ecf9ff;
    padding: 20px;
    border-radius: 16px;
}

.blgArt-col-new {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 63%;
    background: #ecf9ff;
    padding: 20px;
    border-radius: 16px;
}

.article-img-web {
    padding-top: 54%;
    background: url(images/article-img/web-hosting.png)no-repeat;
    background-position: inherit;
}

.article-img-vps {
    padding-top: 22%;
    background: url(images/article-img/vps-hosting.png)no-repeat;
    background-position: inherit;
}

.article-img-webDe {
    padding-top: 51%;
    background: url(images/article-img/web-design.png)no-repeat;
    background-position: inherit;
}

.article-img-cms {
    padding-top: 21%;
    background: url(images/article-img/cms.png)no-repeat;
    background-position: inherit;
}

.article-img-wordpress {
    padding-top: 49%;
    background: url(images/article-img/wordpress.png)no-repeat;
    background-position: inherit;
}

.article-img-seo {
    padding-top: 20%;
    background: url(images/article-img/SEO.png)no-repeat;
    background-position: inherit;
}

.article-img-affliate {
    padding-top: 51%;
    background: url(images/article-img/affilate-mark.png)no-repeat;
    background-position: inherit;
}

.article-img-howTo {
    padding-top: 20%;
    background: url(images/article-img/edit-arti.png)no-repeat;
    background-position: left;
}

.article-text {
    font-size: 16px;
    color: #383838;
    margin: 5px 0;
}

.first-col,
.second-col {
    display: flex;
    flex-flow: row wrap;
    width: 50%;
}

.lineDiv {
    position: absolute;
    bottom: 14px;
    border-top: 1px solid #383838;
    width: 74%;
    opacity: 0.6;
}

.lineDiv2 {
    position: absolute;
    bottom: 14px;
    border-top: 1px solid #383838;
    width: 34%;
    opacity: 0.6;
}

.blgGuide-mncntnr {
    padding: 8px 10px;
    background: #DEF6FF;
}

.blgGuide-mnwrapr {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 24px;
    display: flex;
    flex-flow: row wrap;
}

.htGuide-prime {
    text-align: center;
    margin-top: 32px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.htGuide-subText {
    text-align: center;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
    padding-top: 10px;
}

.htGuide-content {
    width: 72%;
}

.blue-mark {
    background: #CAECFC;
    padding-right: 60px;
}

.htGuide-img {
    width: 28%;
    margin-top: 10%;
    background: url(images/notepad.png)no-repeat;
}

.guideline-list {
    padding: 2px;
    font-size: 16px;
}

.guideline-list li {
    margin: 16px 0;
    position: relative;
    padding-left: 33px;
}

.guideline-list li:before {
    content: '';
    position: absolute;
    left: -4px;
    width: 25px;
    height: 25px;
    background: url(images/checkedIcon.png)no-repeat;
}

.format-mncntnr {
    padding: 50px 10px;
}

.format-mnwrapr {
    width: 1000px;
    border: 1px solid #4A7999;
    border-radius: 12px;
    background: #E6F7FF;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 24px;
    display: flex;
    flex-flow: row wrap;
}

.format-list {
    padding: 35px 15%;
    font-size: 16px;
}

.format-list li {
    margin: 16px 0;
    position: relative;
    padding-left: 20px;
}

.format-list li:before {
    content: '';
    position: absolute;
    left: -7px;
    width: 25px;
    height: 25px;
    background: url(images/checked.png)no-repeat;
}

.note-mncntnr {
    display: flex;
    flex-flow: row wrap;
    padding: 40px 10px;
    background: radial-gradient(ellipse farthest-corner at 1090px -670px, #ADE4F2 73%, rgba(204, 152, 153, 0.4) 13%, #C2ECF9 52%);
    margin-top: 24px;
}

.note-mnwrapr {
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
}

.note-mnwrapr p {
    font-size: 18px;
    color: #4C4E4F;
    text-align: center;
}

.note-mnwrapr span {
    font-weight: 600;
}

.bottomtext-mncntnr {
    display: flex;
    flex-flow: row wrap;
    padding: 35px 10px;
}

.bottomtext-mnwrapr {
    width: 820px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
}

.bottomtext-mnwrapr p {
    font-size: 18px;
    color: #4C4E4F;
    text-align: center;
}

.bottomtext-mnwrapr span {
    font-weight: 600;
}

@media (max-width:1168px) {
    .headerblog-pg-hdrttl {
        font-size: 40px;
    }
    .headerblog-pg-text p:first-child {
        font-size: 19px;
    }
    .headerblog-img {
        background-size: 28%;
        padding-top: 30%;
    }
    .headerblog-pg-subtext {
        font-size: 18px;
    }
    .pageSub-basic-wrapper p {
        font-size: 16px;
    }
    .first-col,
    .second-col {
        display: contents;
    }
    .article-img-web,
    .article-img-webDe,
    .article-img-wordpress,
    .article-img-affliate {
        padding-top: 30%;
    }
    .article-img-vps,
    .article-img-cms,
    .article-img-seo,
    .article-img-howTo {
        padding-top: 13%;
    }
    .blgGuide-mncntnr {
        padding: 8px 33px;
    }
    .htGuide-img {
        margin-top: 21%;
        background-size: 100%;
    }
    .guideline-list {
        font-size: 15px;
    }
}

@media (max-width:912px) {
    .headerblog-pg-subtext {
        font-size: 15px;
    }
    .pageSub-basic-wrapper p {
        font-size: 15px;
    }
    .htArt-prime {
        font-size: 28px;
    }
}

@media (max-width:870px) {
    .article-img-web {
        padding-top: 35%;
    }
    .article-img-vps {
        padding-top: 15%;
    }
    .article-img-webDe {
        padding-top: 31%;
    }
    .article-img-cms {
        padding-top: 14%;
    }
    .article-img-wordpress {
        padding-top: 33%;
    }
    .article-img-seo {
        padding-top: 15%;
    }
    .article-img-affliate {
        padding-top: 34%;
    }
    .article-img-howTo {
        padding-top: 14%;
    }
    .blgArt-col {
        margin-left: 15px;
    }
    .htGuide-prime {
        font-size: 28px;
    }
    .htGuide-subText {
        font-size: 17px;
    }
    .htGuide-img {
        margin-top: 28%;
    }
    .guideline-list {
        font-size: 14px;
    }
    .headerblog-img {
        padding-top: 30%;
    }
    .guideline-list li:before {
        height: 21px;
        width: 21px;
    }
    .note-mnwrapr p,
    .bottomtext-mnwrapr p {
        font-size: 16px;
    }
    .note-mncntnr {
        background: radial-gradient(ellipse farthest-corner at 1030px -681px, #ADE4F2 82%, rgba(204, 152, 153, 0.4) 13%, #C2ECF9 55%);
    }
}

@media (max-width:800px) {
    .headerblog-pg-hdrttl {
        font-size: 28px;
    }
    .headerblog-pg-text p:first-child {
        font-size: 17px;
    }
    .headerblog-pg-text p:first-child {
        font-size: 15px;
    }
    .htArt-prime,
    .htGuide-prime {
        font-size: 23px;
    }
    .blgArt-col-new {
        width: 60%;
    }
    .article-img-affliate {
        padding-top: 43%;
    }
    .article-img-web {
        padding-top: 35%;
    }
    .lineDiv,
    .lineDiv2 {
        width: 82%;
    }
    .article-img-vps {
        padding-top: 15%;
    }
    .article-img-webDe {
        padding-top: 33%;
    }
    .article-img-cms {
        padding-top: 16%;
    }
    .article-img-wordpress {
        padding-top: 35%;
    }
    .article-img-seo {
        padding-top: 17%;
    }
    .article-img-affliate {
        padding-top: 31%;
    }
    .article-img-howTo {
        padding-top: 14%;
    }
    .blgArt-col,
    .blgArt-col-new {
        margin-left: 15px;
    }
    .htGuide-subText {
        font-size: 16px;
    }
    .htGuide-img {
        display: none;
    }
    .htGuide-content {
        width: 100%;
    }
    .blgArt-mncntnr {
        padding: 8px 10px 20px 10px;
    }
    .format-list li::before {
        top: 9px;
    }
    .guideline-list li::before {
        top: 7px;
    }
    .format-list {
        font-size: 15px;
    }
    .note-mnwrapr p,
    .bottomtext-mnwrapr p {
        font-size: 14px;
    }
}

@media (max-width:770px) {
    .blgArt-col,
    .blgArt-col-new {
        width: 100%;
    }
    .lineDiv,
    .lineDiv2 {
        width: 88%;
    }
    .article-text {
        text-align: center;
    }
    .article-img-web {
        padding-top: 20%;
        background-position: center;
    }
    .article-text {
        text-align: center;
    }
    .lineDiv,
    .lineDiv2 {
        width: 88%;
    }
    .article-img-vps {
        padding-top: 20%;
        background-position: center;
    }
    .article-img-webDe {
        padding-top: 20%;
        background-position: center;
    }
    .article-img-cms {
        padding-top: 20%;
        background-position: center;
    }
    .article-img-wordpress {
        padding-top: 20%;
        background-position: center;
    }
    .article-img-seo {
        padding-top: 20%;
        background-position: center;
    }
    .article-img-affliate {
        padding-top: 20%;
        background-position: center;
    }
    .article-img-howTo {
        padding-top: 20%;
        background-position: center;
    }
    .headerblog-img {
        padding-top: 47%;
        background-size: 44%;
    }
}

@media (max-width:360px) {
    .article-img-web,
    .article-img-vps,
    .article-img-webDe,
    .article-img-cms,
    .article-img-wordpress,
    .article-img-seo,
    .article-img-affliate,
    .article-img-howTo {
        padding-top: 24%;
    }
}

@media (max-width:280px) {
    .article-img-web,
    .article-img-vps,
    .article-img-webDe,
    .article-img-cms,
    .article-img-wordpress,
    .article-img-seo,
    .article-img-affliate,
    .article-img-howTo {
        padding-top: 35%;
    }
    .blue-mark {
        padding-right: 0;
    }
}