/* start editing from here */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
.underline {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px 0;
}

/* Add 5px bottom padding and a underline */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/*end reset*/
body {
    background-size: cover;
    padding: 50px 0px 30px 0px;
    font-family: 'Armata', sans-serif;
    font-size: 100%;
    background: rgb(30, 87, 153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 37%, rgba(32, 124, 202, 1) 61%, rgba(125, 185, 232, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(37%, rgba(41, 137, 216, 1)), color-stop(61%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 37%, rgba(32, 124, 202, 1) 61%, rgba(125, 185, 232, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 37%, rgba(32, 124, 202, 1) 61%, rgba(125, 185, 232, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 37%, rgba(32, 124, 202, 1) 61%, rgba(125, 185, 232, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 37%, rgba(32, 124, 202, 1) 61%, rgba(125, 185, 232, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0); /* IE6-9 */
}

/*--contact start here--*/
.contact {
    background: #fff;
    width: 35%;
    margin: 0 auto;
    text-align: center;
    padding: 30px 25px 45px 25px;
    border-radius: 5px;
    box-shadow: 3px 3px 8px 0px rgba(23, 22, 22, 0.33);
}

p a {
    color: #909090;
}

span {
    color: red;
}

h1 {
    font-size: 40PX;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin: 0px 0px 30px 0px;
}

.contact h2 {
    font-size: 30px;
    color: #000;
    margin: 0px 0px 8px 0px;
}

.contact p {
    font-size: 12px;
    color: #909090;
    padding: 0px 0px 15px 0px;
    border-bottom: 1px solid #E9E9E9;
}

.contact form {
    padding: 20px 0px 0px 0px;
}

.contact h3 {
    font-size: 16px;
    font-weight: 400;
    color: #818181;
    margin: 5px 0px 10px 0px;
}

.contact input[type="text"] {
    outline: none;
    font-size: 15px;
    font-weight: 400;
    color: #bcbcbc;
    padding: 12px 10px 12px 50px;
    border-radius: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 0px 0px 10px 0px;
    width: 55%;
    -webkit-appearance: none;
    border: 1px solid;
}

.contact input[type="text"]:hover, .contact input.active {
    box-shadow: 0px 0px 4px 0px #3386E1;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.contact input.user {
    background: url(../images/user.png) no-repeat 10px 8px;
}

input.url {
    background: url(../images/link.png) no-repeat 8px 8px;
}

input.email {
    background: url(../images/email.png) no-repeat 8px 8px;
}

.contact textarea {
    outline: none;
    font-size: 15px;
    font-weight: 400;
    color: #bcbcbc;
    padding: 12px 10px 12px 50px;
    border-radius: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 0px 0px 10px 0px;
    width: 55%;
    -webkit-appearance: none;
    border: 1px solid;
    resize: none;
    height: 6em;
}

.contact textarea.i {
    background: url(../images/i.png) no-repeat 16px 8px;
}

.contact textarea.i:hover {
    box-shadow: 0px 0px 4px 0px #3386E1;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.contact input[type="submit"] {
    background: #1A7CEA;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    padding: 15px 7px;
    width: 66%;
    border-radius: 6px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 10px 0px 0px 0px;
    border-bottom: 3px solid #0E5099;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border-right: none;
    border-left: none;
    border-top: none;
}

.contact input[type="submit"][disabled] {
    background: #727c88;
    border-bottom: 3px solid #525a63;
}

.contact input[type="submit"]:not([disabled]):hover {
    background: #3B73B3;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.contact input[type="button"] {
    background: #1A7CEA;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    padding: 15px 7px;
    width: 66%;
    border-radius: 6px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 10px 0px 0px 0px;
    border-bottom: 3px solid #0E5099;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border-right: none;
    border-left: none;
    border-top: none;
}

.contact input[type="button"]:hover {
    background: #3B73B3;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.copyright {
    padding: 120px 0px 0px 0px;
    text-align: center;
}

.copyright p {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

.copyright p a {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
}

.copyright p a:hover {
    color: #fff;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

/*--签约价值主张 + 修 .contact p 的越界--*/
/* .contact p 是后代选择器，连带把 border-bottom 套到了表单里的 .cats-hint 上；
   又因为介绍区现在有两段 p，分隔线会画两条。这里把分隔线明确交给最后那段 .pitch。 */
.contact > p {
    border-bottom: 0;
    padding-bottom: 6px;
}

.contact > p.pitch {
    border-bottom: 1px solid #E9E9E9;
    padding-bottom: 15px;
    line-height: 1.8;
}

.contact > p.pitch b {
    color: #757575;
    font-weight: 600;
}

/*--博客题材多选--*/
/* 做成可点的胶囊而不是裸 checkbox：选题材是这个表单里唯一需要"判断"的一步，
   点击区域给足，勾中态要一眼看得出。配色沿用本页既有的蓝（#3386E1）。 */
/* 宽度给满、让胶囊自己换行，这样不用为每个断点再写一遍宽度 */
.contact .cats {
    margin: 0px 0px 8px 0px;
}

.contact .cat {
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    color: #818181;
    padding: 8px 14px;
    margin: 0px 8px 8px 0px;
    border: 1px solid #bcbcbc;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: 0.3s all;
}

.contact .cat:hover {
    border-color: #3386E1;
    color: #3386E1;
}

/* 勾中态：靠 :has() 让整个胶囊变色，而不是只有那个小方框 */
.contact .cat:has(input:checked) {
    border-color: #3386E1;
    background: #3386E1;
    color: #fff;
}

/* 勾满上限后其余项禁用，明确"不是坏了，是到顶了" */
.contact .cat:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}

.contact .cat:has(input:disabled):hover {
    border-color: #bcbcbc;
    color: #818181;
}

.contact .cat input {
    margin: 0px 4px 0px 0px;
    vertical-align: middle;
}

.contact .cats-hint {
    font-size: 13px;
    color: #818181;
    margin: 0px 0px 10px 0px;
    line-height: 1.6;
    /* 显式关掉从 .contact p 继承来的分隔线与内边距 */
    border-bottom: 0;
    padding-bottom: 0;
}

.contact .cats-hint.is-full {
    color: #3386E1;
}

/*--contact end here--*/
/*--meadia quiries start here--*/
@media (max-width: 1440px) {
    .contact {
        width: 40%;
    }
}

@media (max-width: 1366px) {
    .contact {
        width: 43%;
    }
}

@media (max-width: 1280px) {
    .contact {
        width: 45%;
    }
}

@media (max-width: 1024px) {
    .contact {
        width: 56%;
    }

    .copyright {
        padding: 50px 0px 0px 0px;
    }
}

.copyright p a {
    color: #ffffff;
}

@media (max-width: 768px) {
    .contact {
        width: 73%;
    }

    .contact h2 {
        font-size: 26px;
    }

    .contact h3 {
        font-size: 15px;
    }

    .contact input[type="text"] {
        font-size: 13px;
    }

    .contact input[type="submit"] {
        font-size: 15px;
    }

    .contact textarea {
        font-size: 13px;
    }

    body {
        padding: 50px 0px 80px 0px;
    }
}

@media (max-width: 640px) {
    .contact h2 {
        font-size: 24px;
    }

    .contact input[type="text"] {
        font-size: 12px;
    }

    .contact textarea {
        font-size: 12px;
    }

    .contact input[type="submit"] {
        width: 69%;
        font-size: 14px;
    }

    body {
        padding: 50px 0px 30px 0px;
    }

    h1 {
        font-size: 35PX;
    }
}

@media (max-width: 480px) {
    .contact h2 {
        font-size: 22px;
    }

    .contact p {
        font-size: 9.5px;
    }

    .contact form {
        padding: 10px 0px 0px 0px;
    }

    .contact h3 {
        font-size: 13px;
    }

    .contact input[type="text"] {
        width: 61%;
    }

    .contact textarea {
        width: 61%;
    }

    .contact input[type="submit"] {
        width: 80%;
    }

    h1 {
        font-size: 30PX;
        margin: 0px 0px 20px 0px;
    }
}

@media (max-width: 320px) {
    .contact h2 {
        font-size: 20px;
    }

    body {
        padding: 30px 0px 30px 0px;
    }

    .contact {
        padding: 20px 15px 30px 15px;
        width: 85%;
    }

    .contact input[type="text"] {
        width: 65%;
        padding: 10px 10px 10px 45px;
    }

    .contact input.user {
        background: url(/assets/images/user.png) no-repeat 8px 6px;
    }

    .contact input.url {
        background: url(/assets/images/link.png) no-repeat 6px 5px;
    }

    .contact input.email {
        background: url(/assets/images/email.png) no-repeat 5px 6px;
    }

    .contact textarea.i {
        background: url(/assets/images/i.png) no-repeat 10px 9px;
    }

    .contact input[type="submit"] {
        width: 90%;
        font-size: 12px;
        padding: 10px 7px;
        margin: 0px 0px 0px 0px;
    }

    h1 {
        font-size: 25PX;
        margin: 0px 0px 13px 0px;
    }

    .copyright p {
        font-size: 12px;
    }

    .copyright p a {
        font-size: 12px;
    }

    .copyright {
        padding: 50px 0px 0px 0px;
    }

    .contact textarea {
        width: 65%;
        height: 5em;
        padding: 10px 10px 10px 45px;
    }

    .contact h3 {
        font-size: 11px;
        margin: 1px 0px 6px 0px;
    }
}

/*--meadia quiries end here--*/