<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>保安服务公司正本许可电子证</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<script type="text/javascript">
    if (top.location !== self.location) {
        top.location = self.location;
    }
</script>
<link th:href="@{/css/public.css}" rel="stylesheet"/>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
        font-style: normal;
        font-variant-ligatures: normal;
        font-variant-caps: normal;
        font-variant-numeric: normal;
        font-variant-east-asian: normal;
        font-weight: normal;
        font-stretch: normal;
        font-size: 14px;
        line-height: normal;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;
    }
    .certificate_container{
        width: 96%;
        min-height: 250px;
        margin: 0 auto;
        margin-top: 10px;
        /*display: flex;*/

        /*background-position: center;*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 40px 10px 20px;
        box-sizing: border-box;
        font-size: 10px;
    }
    .certificate_container i, .certificate_container em{
        font-style: normal;
    }
    .flex_container{
        display: flex;
        color: #333;
        padding: 10px 10px 20px;
    }
    .flex_container > section {
        width: 50%;
        /*min-height: 220px;*/
        height: 100%;
        flex-shrink: 0;
        overflow: hidden;
    }
    .flex_container > section header{
        text-align: center;
        color: #333;
        margin-bottom: 20px;
    }
    .flex_container > section header h3{
        font-size: 14px;
    }
    header {
        color: white;
        /* position: fixed; */
        width: 100%;
        /* top: 0; */
        z-index: 1000;
        height: 40px;
    }
    .certificate_container .info_item {
        display: flex;
        align-items: flex-start;
        margin-top: 5px;
    }
    .certificate_container .top_10{
        margin-top: 10px;
    }
    .certificate_container .explain_header{
        margin-top: 4px;
        text-align: center;
        font-size: 12px;
    }
    .info_item label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 56px;
        margin-right: 2px;
    }
    .info_item span{
        flex: 1;
        margin-left: 5px;
        line-height:18px;
    }

    .certificate_container .tit {
        padding-right: 20px;
        text-align: right;
    }

    .qr_content > img{
        width: 54px;
        min-height: 66px;
        background: orange;
    }
    .certificate_office{
        padding-left: 50%;
    }
    .certificate_inscription{
        margin-top: 20px;
        text-align: right;
    }
    .certificate_inscription > div {
        display: inline-block;
        text-align: left;
    }
    .qr_content {
        text-align: center;
    }
    section {
        display: block;
    }
    h3{
        font-weight: normal;
    }

</style>
<body>
<div class="weui-content certificate_container flex_container" style=" background-image: url(/img/certificate-f.jpg)">

    <section>
        <header>
            <h3>保安服务许可证</h3>
            <em>(副本)</em>
            <p th:text="${comCerDto.xkzh}"></p>
        </header>

        <p class="info_item">
            <label>
                <em>名</em>
                <em>称</em>
            </label>
            <i>:</i>
            <span th:text="${comCerDto.gsmc}"></span>
        </p>
        <p class="info_item">
            <label>
                <em>住</em>
                <em>所</em>
            </label>
            <i>:</i>
            <span th:text="${comCerDto.gsdz}"></span>
        </p>

        <p class="info_item top_10">
            <label>
                <em>法</em>
                <em>定</em>
                <em>代</em>
                <em>表</em>
                <em>人</em>
            </label>
            <i>:</i>
            <span th:text="${comCerDto.frmc}"></span>
        </p>
        <p class="info_item">
            <label>
                <em>服</em>
                <em>务</em>
                <em>范</em>
                <em>围</em>
            </label>
            <i>:</i>
            <span th:text="${comCerDto.management}"></span>
        </p>
        <p class="info_item">
            <label>
                <em>成</em>
                <em>立</em>
                <em>日</em>
                <em>期</em>
            </label>
            <i>:</i>
            <span th:text="${comCerDto.clrq}"></span>
        </p>
        <p class="info_item">
            <label>
                <em>批</em>
                <em>准</em>
                <em>文</em>
                <em>号</em>
            </label>
            <i>:</i>
            <span th:text="${comCerDto.pzwh}"></span>
        </p>

        <div class="certificate_inscription">
            <div>
                <p>发证机关（印章）</p>
                <span>
                    发证日期
                <i>:</i>
                <span th:text="${comCerDto.fzrq}"></span>
                </span>

            </div>
        </div>
    </section>

    <section>
        <h3 class="explain_header">说明</h3>
        <p class="info_item">
            <i>1、</i>
            <em>《保安服务许可证》是保安服公司依法开展保安服务的凭证。</em>
        </p>
        <p class="info_item">
            <i>2、</i>
            <em>《保安服务许可证》分正本和副本（副本是本式活页），正本和副本具有同等法律效力。</em>
        </p>
        <p class="info_item">
            <i>3、</i>
            <em>《保安服务许可证》不得伪造、变造、买卖、出租、出借。</em>
        </p>
        <p class="info_item">
            <i>4、</i>
            <em>保安服务公司注销，应交回《保安服务许可证》正、副本。《保安服务许可证》被发证机关吊销后即自行失效。</em>
        </p>

    </section>
</div>
</body>
</html>