@font-face {
    font-family: 'KaiTi';
    src: url(../font/SIMKAI.TTF)
}
@font-face {
    font-family: 'FangSong';
    src: url(../font/SIMFANG.TTF)
}
@font-face {
    font-family: 'LiSu';
    src: url(../font/SIMLI.TTF)
}
@font-face {
    font-family: 'STXingkai';
    src: url(../font/STXINGKA.TTF)
}
/*新版字体*/
@font-face {
    font-family: 'sj_gzksj';
    src: url(../font/sj_gzksj.ttf)
}
@font-face {
    font-family: 'sj_qsjtc';
    src: url(../font/sj_qsjtc.ttf)
}
@font-face {
    font-family: 'sj_dhjt';
    src: url(../font/sj_dhjt.ttf)
}
@font-face {
    font-family: 'sj_zdhjt';
    src: url(../font/sj_zdhjt.ttf)
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input,
button {
    outline: none;
}

.head {
    width: 1140px;
    margin: 0 auto 40px;
}

.head_title {
    height: 37px;
    line-height: 37px;
    border-radius: 1px 1px 0 0;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    background-color: #2196f3;
    box-sizing: border-box;
    padding: 0 15px;
}

.hide,
.show {
    cursor: pointer;
}

.show {
    display: none;
}

form {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-top: none;
    box-shadow: 0 1px 1px 1px #dddddd;
}

.top_title,
.bottom_title {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #2196f3;
    display: flex;
    align-items: center;
}

.top_title span,
.bottom_title span {
    display: inline-block;
    width: 4px;
    height: 22px;
    background-color: #ff9800;
    margin-right: 15px;
}

.bottom_title {
    margin-top: 15px;
}

.font_type,
.box_type,
.text_type,
.box_loop,
.zitie_title {
    height: 46px;
    line-height: 46px;
    display: flex;
    align-items: center;
    padding-left: 18px;
    border-bottom: 1px dashed #bbbbbb;
}

.item_title {
    margin-right: 20px;
}

.font_item,
.box_item,
.text_item,
.loop_item {
    width: 50px;
    height: 30px;
    display: flex;
    margin-right: 10px;
    border: 1px dashed #cccccc;
    box-sizing: border-box;
}

form .active {
    border: 1px solid #2196f3;
}

label {
    width: 50px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.zitie_title label {
    width: auto;
    margin-right: 19px;
}

.zitie_title input {
    width: 200px;
    height: 25px;
}

#input {
    display: block;
    width: 100%;
    height: 80px;
    margin-top: 15px;
    resize: none;
    outline: none;
    border: 1px solid #bbb;
    padding: 10px;
    box-sizing: border-box;
}

.btn_box {
    margin-top: 20px;
    text-align: center;
}

#submit {
    margin-right: 20px;
    background-color: #2196f3;
}

#print {
    margin-right: 20px;
    background-color: #ff9800;
}

#download {
    background-color: #7bcf06;
}

#submit,
#print,
#download {
    cursor: pointer;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.shuoming {
    margin-top: 10px;
    text-align: center;
    color: red;
}

.shuoming span {
    cursor: pointer;
}

ul,
li {
    list-style: none;
}

.title {
    width: 650px;
    color: #000000;
    text-align: center;
    font-size: 26px;
    margin: 0 auto;
    border-bottom: 1px double #000000;
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-family: 'Microsoft YaHei';
}

.zitie_wrap {
    width: 794px;
    margin: 0 auto;
    display: none;
    color: #b8b8b8;
    font-family: "楷体", "楷体_gb2312";
}

.page {
    width: 794px;
    height: 1123px;
    margin: 0 auto 60px;
    padding: 40px 0px 60px;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px 3px #eeeeee;
    position: relative;
}

.zitie_wrap .ul {
    display: block;
    width: 686px;
    height: 935px;
    margin: 0 auto;
    border: 2px solid #000000;
    text-align: center;
    box-sizing: border-box;
    padding: 2px 0;
    overflow: hidden;
}

.zitie_wrap li {
    display: inline-block;
    width: 56px;
    height: 56px;
    font-size: 40px;
    text-align: center;
    line-height: 58px;
    background: url(../images/hello.svg);
    background-size: 56px;
    margin: 5px 0px 5px -1px;
    vertical-align: middle;
}

.zitie_wrap li.first {
    color: #000;
    margin-left: 0;
}

.page .zitie_footer {
    width: 100%;
    height: 70px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    padding: 0 53px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Microsoft YaHei';
    color: #000000;
    font-size: 15px;
    box-sizing: border-box;
}

.zitie_footer>div {
    flex: 1;
}

.f_left {
    text-align-last: left;
}

.f_right {
    text-align: right;
}

.image_box {
    width: 60px;
}

.image_box img {
    width: 100%;
}

.dy_box {
    padding: 20px 4%;
}

.dyxz,
.dysz {
    text-align: center;
    color: red;
}

.dysz {
    margin-top: 30px;
}

.dyxz_content,
.dysz_content {
    margin-top: 30px;
}

.dyxz_item,
.dysz_item {
    margin-top: 20px;
}

.dysz_imgbox {
    margin-top: 20px;
}

.dysz_imgbox img {
    width: 100%;
}

.xzzt_box {
    padding: 20px 40px;
}
.xzzt {
    text-align: center;
    color: red;
}

.xzzt_content {
    margin-top: 30px;
}

.xzzt_item {
    margin-top: 20px;
}

.xzzt_imgbox {
    margin-top: 20px;
}

.xzzt_imgbox img {
    width: 100%;
}

@media print {
    html {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 0;
        margin: 0;
        -webkit-print-color-adjust: exact !important;
        -moz-print-color-adjust: exact !important;
        -ms-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .zitie_wrap {
        width: 210mm;
        padding: 0;
        margin: 0;
        -webkit-print-color-adjust: exact !important;
        -moz-print-color-adjust: exact !important;
        -ms-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .page {
        width: 210mm;
        height: 296mm;
        margin: 0;
        box-shadow: none;
        border: none;
        background-color: #fff;
        -webkit-print-color-adjust: exact !important;
        -moz-print-color-adjust: exact !important;
        -ms-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

input[type="radio"] {
    opacity: 0;
    width: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    vertical-align: text-bottom;
    margin-right: 0.1rem;
    border: none;
}

@media screen and (max-width: 500px) {
    .head {
        width: 90%;
        margin-top: 20px;
    }

    form {
        padding: 12px;
    }

    .top_title span,
    .bottom_title span {
        margin-right: 10px;
    }

    .font_type,
    .box_type,
    .text_type,
    .box_loop,
    .zitie_title {
        padding-left: 14px;
    }

    .font_type{
        height: auto;
        flex-wrap: wrap;
        padding-bottom: 7px;
    }

    .item_title {
        margin-right: 0px;
    }

    .font_item,
    .box_item,
    .text_item {
        width: 14%;
        margin-right: 2%;
    }

    .zitie_title input {
        width: 50%;
    }
    .zitie_title label {
        margin-right: 0px;
    }
    #print {
        display: none;
    }

    #download {
        display: inline-block;
    }

    .huadong {
        width: 90%;
        overflow-x: scroll;
    }
}