* {
            margin: 0 auto;
            padding: 0;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        .header {
            display: flex;
            justify-content: flex-start;
            width: 1000px;
            height: 100px;
            background-color: #fff;
        }

        a:link {
            text-decoration: none;
            color: black;

        }

        a:visited {
            text-decoration: none;
            color: black;
        }

        a:hover {
            /* text-decoration: underline; */
            font-weight: bold;
        }

        a:active {
            text-decoration: none;
        }


        .logo {
            margin: 15px 15px 15px 60px;
            width: 180px;
            line-height: 80px;

        }

        .line {
            height: 12px;
            background-image: linear-gradient(to top, #eaf1fb, #ccd2db);
        }

        .navtop {
            width: 800px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 300;
            display: flex;
            justify-content: flex-end;
        }

        #contact {
            margin-right: 10px;
        }

        .navtop>a {
            line-height: 100px;
            margin: 5px;
            padding: 5px;
            font-size: 14px;
            text-align: center;

        }

        .content {
            background-color: #eaf1fb
        }

        #newpro>span {
            font-weight: 900;
        }

        #newpro {
            margin-bottom: 8px;
            font-size: 13px;
            padding: 5px;
            background-color: yellow;
            color: black;
            /* background-color: white; */
            width: 250px;
            text-align: center;
            border-radius: 5px;
            box-shadow: 0 4px 8px 0 rgba(16, 16, 24, 0.4), 0 6px 20px 0 rgba(16, 16, 24, 0.4);
        }

        /* #newpro:hover {
            background-color: #0037fe;
            color: gold;
        } */
        .new:hover {
            background-color: #0037fe;
            color: white;
        }

        .main {
            width: 1000px;
            display: flex;
            justify-content: center;

        }

        .mainleft {
            width: 270px;

        }

        .mainleft .leftnav {
            color: white;
            width: 250px;
            height: 16px;
            padding: 5px;
            margin-top: 8px;
            font-size: 14px;
            font-weight: bolder;
            border-top: dodgerblue;
            border-left: 1px solid dodgerblue;
            border-right: 1px solid dodgerblue;
            /* border-bottom: dotted #0037fe 1px; */
            /* color: white;
            background-color: #0037fe; */
            text-align: center;
            line-height: 16px;
            /* border: 1px solid dodgerblue; */
            border-radius: 5px 5px 0 0;
            /* background-image: linear-gradient(to top, dodgerblue, #0037fe); */
            background-image: linear-gradient(to bottom, #0037fe, rgb(102, 165, 237));

        }

        #leftnavtop {
            margin-top: 0;
        }

        .mainleft .subleftnav {
            width: 250px;
            height: 16px;
            padding: 5px;
            font-size: 14px;
            /* background-image: linear-gradient(to right, #0037fe, rgb(102, 165, 237)); */
            background-color: white;
            text-align: center;
            line-height: 16px;
            border-left: 1px solid dodgerblue;
            border-right: 1px solid dodgerblue;
        }

        .mainleft .subleftnav:hover {
            /* color: white; */
            background-color: rgb(102, 165, 237);
            font-weight: 200;
        }

        .btmnav {
            border-radius: 0 0 5px 5px;
            border-bottom: 1px solid dodgerblue;            
        }

        .mainright {
            margin-left: 3px;
            margin-bottom: 5px;
            font-size: 14px;
            width: 730px;
            /* background-color: white; */
            border-radius: 5px;
            /* color: white; */
            /* color: #0037fe; */
        }

        .mainright {
            /* border-top: 1px solid   #eaf1fb; */
            margin-left: 3px;
            margin-bottom: 5px;
            font-size: 14px;
            width: 730px;
            /* background-color: white; */
            border-radius: 5px;
            /* color: white; */
        }


        .mainrightline {
            border-radius: 10px 10px 0 0;
            padding: 5px 0 5px 10px;
            height: 16px;
            line-height: 16px;
            font-size: 13px;
            background-image: linear-gradient(to bottom, white, #ccd2db);
        }

        .mainrightline a:hover {
            font-weight: 100;
            text-decoration: underline;
        }

        /* RUDDY BLUE RGB 102, 165, 237 */
        .articletitle {
            /* border: #0037fe 1px dotted; */
            /* color: white; */
            /* border-top: black dotted 1px; */
            line-height: 40px;
            height: 40px;
            padding: 0 0 0 15px;
            text-align: center;
            background-image: linear-gradient(to top, white, #ccd2db);
        }

        .article {
            background-color: white;
            /* margin-bottom: 2em; */
        }

        /* .container{margin-bottom: 2em;} */
        /* 文章明暗开关 */
        /* .article:hover {
            background-color: white;
        } */
        /* .article:hover {
            background-color: #ccd2db;
        } */
        h3 {
            /* margin-top: 15px; */
            /* border: black 1px solid; */
            background-image: linear-gradient(to right, #0037fe, rgb(102, 165, 237));
            /* background-image: linear-gradient(to left, #0037fe, rgb(102, 165, 237)); */
            color: white;
            padding: 4px 0 4px 15px;
        }


        h4 {
            /* margin-top: 5px; */
            /* margin-left: 30px; */
            /* margin-right: 10px; */
            /* color: white; */
            background-image: linear-gradient(to right, rgb(102, 165, 237), white);
            /* background-image: linear-gradient(to right, #ccd2db, #eaf1fb); */
            /* background-color: #eaf1fb; */
            padding: 3px 0 3px 25px;
            font-weight: 500;
            /* border-top: #0037fe 1px dotted; */
            /* border-left: 1px black solid; */
            /* border-right: 1px black solid; */
        }

        .items {
            /* margin-left: 30px; */
            padding: 5px;
            display: flex;
            flex-direction: left;
            flex-wrap: wrap;
            /* border-left: 1px black solid;
            border-right: 1px black solid; */
            /* background-image: linear-gradient(to right, rgb(102, 165, 237), #eaf1fb); */
            /* background-color: #ccd2db; */
            background-color: white;
            /* width: 600px; */
            /* border-radius: 5px 0 0 5px; */
        }

        /* .btmitems {
            border-radius: 0 0 10px 10px;
        } */
        /* .items:hover {
            background-color: #ccd2db; 
            background-color: black;
            background-color: #eaf1fb;
            background-image: linear-gradient(to right, #0037fe, rgb(102, 165, 237)); 
        } */

        .item {
            margin-left: 1em;
            margin-top: 4px;
            margin-bottom: 5px;
            width: 120px;
            height: 25px;
            line-height: 25px;
            /* background-image: linear-gradient(to bottom, #0037fe, rgb(102, 165, 237)); */
            color: black;
            text-align: center;
            border-radius: 5px;

        }

        .active {
            background-color: white;
            /* color: #0037fe; */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .active:hover {
            color: white;
            background-color: #0037fe;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .new {
            background-color: yellow;
            color: black;
        }


        form {
            margin-left: 2.5em;
            font-size: 15px;
        }

        #uc {
            padding-left: 200px;
            padding-top: 120px;
            /* margin-top: 120px; */
        }

        p {
            text-indent: 2em;
            padding: 10px;
        }

        .feedback {
            margin-left: 30px;
        }


        label {
            display: inline-block;
            margin-top: 3px;
            margin-bottom: 3px;
        }

        input textarea {
            padding: 5px;
        }

        .address {
            padding: 5px;
            margin-left: 2.5em;
            margin-top: 1em;
        }


        .mainrightbtmline {
            border-radius: 0 0 10px 10px;
            padding: 5px 0 5px 10px;
            height: 16px;
            line-height: 16px;
            font-size: 13px;
            background-image: linear-gradient(to bottom, white, #ccd2db);

        }

        .mainrightbtmline>a:hover {
            font-weight: 100;
            text-decoration: underline;

        }

        .mainrightbtmline a:hover {
            font-weight: 100;
            text-decoration: underline;
        }

        .luokuan {
            text-align: right;
            font-size: 13px;
            line-height: 20px;
            padding: 10px 30px 0 0;
        }

        .linebtm {
            height: 12px;
            background-image: linear-gradient(to bottom, #eaf1fb, #ccd2db);
        }

        .footer {
            text-align: center;
            font-size: 13px;
            padding: 10px;
            width: 1000px;
        }

        .footer>a:hover {
            font-weight: 100;
            text-decoration: underline;
        }