@charset "utf-8";

@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/*初始化样式*/
* {
    -webkit-tap-highlight-color: transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*html5设置*/
article, aside, details, figcaption, figure, footer, header, main, nav, section {
    display: block;
}

html, body, div, pre, code, form, fieldset, legend, input, textarea, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, p, h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    color: #333;
    font: normal 0.9375vw/1.5em 'Arial','Sans-serif';
    overflow-x: hidden;
    word-wrap: break-word;
}

a {
    text-decoration: none;
    outline: none;
    color: #333;
}

    a:focus {
        outline: none;
        -moz-outline: none;
    }

    a:hover {
        color: #d02b26;
    }

    a img {
        border: none;
    }

img {
    vertical-align: middle;
    max-width: 100%;
}

li {
    list-style: none;
}

select, input, textarea, button {
    border-radius: 0;
    -webkit-border-radius: 0;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    font-family: 'Arial','Sans-serif';
    font-size: 1em;
}

    input:focus {
        outline: none;
    }

textarea {
    resize: none;
}

input::-moz-placeholder {
    opacity: 0.75;
    color: inherit;
}

input:-moz-placeholder {
    opacity: 0.75;
    color: inherit;
}

input::-webkit-input-placeholder {
    opacity: 0.75;
    color: inherit;
}

input:-ms-input-placeholder {
    opacity: 0.75;
    color: inherit;
}

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    border-top: solid 1px #e4e4e4;
    border-left: solid 1px #e4e4e4;
    box-sizing: border-box;
}

    table th {
        background-color: #f9f9f9;
        text-align: center;
        box-sizing: border-box;
    }

    table td, table th {
        padding: 5px;
        border: 1px solid #e4e4e4;
        box-sizing: border-box;
    }

/*全局样式*/
.inner {
    width: 93.75%;
    max-width: 80em;
    margin: 0 auto;
}

.clear {
    clear: both;
    height: 0px;
    overflow: hidden;
}

.image {
    overflow: hidden;
    position: relative;
}

    .image a {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .image .img {
        background: no-repeat center center;
        background-size: cover;
        display: block;
        transition: all .3s;
    }

.rows {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.submit {
    cursor: pointer;
}

.fz48 {
    font-size: 2.6667em;
    line-height: 1.35em;
}

/*flexbox*/
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: wrap;
    -moz-flex-flow: wrap;
    -ms-flex-flow: wrap;
    -o-flex-flow: wrap;
    flex-flow: wrap;
}

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

/*entry*/
.entry {
    text-align: justify;
}

    .entry img {
        max-width: 100%;
        height: auto !important;
    }

    .entry ul, .entry ol {
        margin-left: 2em;
    }

        .entry ul li {
            list-style: outside disc none;
        }

        .entry ol li {
            list-style: outside decimal none;
        }

    .entry h1 {
        font-size: 1.5em;
    }

    .entry h2 {
        font-size: 1.25em;
    }

    .entry h3 {
        font-size: 1.125em;
    }

    .entry h4 {
        font-size: 1em;
    }

    .entry h5 {
        font-size: 0.875em;
    }

    .entry h6 {
        font-size: 0.75em;
    }

    .entry blockquote {
        margin: 0 2em;
        font-style: italic;
        opacity: 0.95;
        padding: 1em;
        border: 1px solid #e8e8e8;
        background-color: #f9f9f9;
    }

    .entry hr {
        border: none;
        clear: both;
        border-bottom: 1px solid #e6e6e6;
    }

/*header*/
#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    color: #fff;
    transition: all .5s;
    background-color: rgba(0,0,0,0.45);
}

    #header a {
        color: #fff;
    }

    #header .inner {
        display: table;
        table-layout: fixed;
        position: relative;
    }

    #header.back-white {
        background-color: rgba(0,0,0,0.45);
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }

/*logo*/
#logo {
    width: 2.66666667em;
    font-size: 1em;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}

    #logo a {
        display: block;
        overflow: hidden;
        padding-bottom: 118.75%;
        position: relative;
        background: no-repeat left center;
        background-size: contain;
    }

    #logo i {
        position: absolute;
        width: 100%;
        height: 100%;
        text-indent: -99999em;
        display: block;
        overflow: hidden;
    }

/*button*/
#button {
    display: table-cell;
    vertical-align: middle;
    width: 9.44444444em;
    position: relative;
}

    #button .box {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        align-items: center;
    }

/*language*/
#language {
    position: relative;
    text-align: center;
    font-size: 0.88888889em;
    line-height: 1.875em;
}

    #language span {
        background: url(../images/language.png) no-repeat left center;
        background-size: 1.25em auto;
        display: block;
        cursor: pointer;
        position: relative;
        padding: 0 1.25em 0 1.875em;
    }

        #language span:after {
            background: url(../images/arrow_down_01.png) no-repeat center center;
            background-size: contain;
            width: 0.75em;
            height: 0.4375em;
            content: '';
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

    #language ul {
        position: absolute;
        top: 100%;
        z-index: 5;
        left: 50%;
        transform: translateX(-50%);
        min-width: 100%;
        border-radius: 0.3125em;
        background-color: #d02b26;
        line-height: 2em;
        padding: 0.5em;
        margin-top: 1em;
        display: none;
    }

/*search*/
#search span {
    width: 1.05555556em;
    height: 1.05555556em;
    background: url(../images/search_01.svg) no-repeat center center;
    background-size: contain;
    cursor: pointer;
    display: block;
    overflow: hidden;
}

#search .input {
    background-color: #d02b26;
    position: absolute;
    right: 100%;
    top: 100%;
    border-radius: 1.375em;
    z-index: 8;
    overflow: hidden;
    width: 18.75em;
    padding-right: 2.75em;
    display: none;
    font-size: 0.88888889em;
    transform: translateX(2em);
}

#search form {
    display: block;
}

#search .text {
    display: block;
    width: 100%;
    height: 2.75em;
    line-height: 1.5em;
    padding: 0.625em 1em;
    color: #fff;
}

#search .go {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 2.75em;
    cursor: pointer;
    background: url(../images/search_01.svg) no-repeat center center;
    background-size: 1em auto;
}

/*navbtn*/
#navbtn {
    display: none;
}

/*navi*/
#navi {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.75em;
    text-transform: uppercase;
    padding: 0 8.33333333%;
}

    #navi .menu {
        align-items: center;
        justify-content: flex-end;
    }

    #navi a {
        color: #fff;
        display: block;
        position: relative;
        font-size: 1em;
    }

    #navi .parent {
        position: relative;
        margin: 0 3.05498982%;
        padding: 3.66598778% 0;
    }

    #navi .cur a, #navi .on a {
        color: #d02b26;
    }

    #navi .drop {
        position: absolute;
        top: 100%;
        z-index: 5;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        min-width: 8.5em;
        text-align: center;
        background-color: rgba(0,0,0,0.5);
        overflow: hidden;
        padding: 0;
        font-size: 0.88888889em;
    }

        #navi .drop a {
            padding: 1em;
            white-space: nowrap;
            color: #fff;
            border-bottom: solid 1px #fff;
        }

        #navi .drop li:last-child a {
            border-bottom: none;
        }

        #navi .drop li:hover a {
            color: #d02b26;
        }

    #navi em {
        display: none;
    }

/*banner*/
#banner {
    padding-bottom: 30.98958333%;
    background: no-repeat center center;
    background-size: cover;
    color: #fff;
    position: relative;
}

    #banner .text {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        z-index: 2;
        transform: translateY(-50%);
    }

    #banner .name {
        font-size: 1em;
        font-weight: normal;
        line-height: 1.35em;
        margin-bottom: 0.16666667em;
    }

    #banner .alias {
        font-size: 0.375em;
        line-height: 1.25em;
        font-weight: normal;
        text-transform: uppercase;
    }

/*footer*/
#footer {
    background-color: #383838;
    color: rgba(255,255,255,0.3);
}

    #footer .inner {
        padding: 2.22222222em 0 0.77777778em;
        position: relative;
    }

    #footer a {
        color: rgba(255,255,255,0.3);
    }

        #footer a:hover {
            color: #fff;
        }

/*bottom*/
#bottom {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-size: 0.77777778em;
    line-height: 2em;
    flex-direction: row-reverse;
    padding: 1.42857143em 0;
}

    #bottom a {
        display: inline-block;
    }

/*pagelist*/
#pagelist li {
    margin-left: 1.42857143em;
}

    #pagelist li:first-child {
        margin-left: 0;
    }

/*btminfo*/
#btminfo {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-bottom: 4.86111111%;
    padding-top: 2.08333333%;
}

/*info*/
#info {
    width: 27.77777778em;
    margin-bottom: 1.11111111em;
}

    #info .tel {
        color: #fff;
        line-height: 1.125em;
        font-size: 2em;
        margin-bottom: 0.16666667em;
    }

    #info .list {
        font-size: 0.88888889em;
        line-height: 1.75em;
        color: #fff;
        opacity: 0.3;
    }

        #info .list span {
            display: inline-block;
            vertical-align: middle;
            background: no-repeat left center;
            background-size: 1em auto;
        }

            #info .list span:first-child {
                padding-left: 1.875em;
                padding-right: 1.25em;
            }

        #info .list .mail {
            background-image: url(../images/icon_mail.svg);
        }

        #info .list .addr {
            background-image: url(../images/icon_addr.svg);
            background-size: 0.875em auto;
            background-position: 0.0625em center;
        }

/*social*/
#social {
    width: 46.66666667em;
}

    #social ul {
        justify-content: end;
    }

    #social li {
        margin-left: 1.11111111em;
        position: relative;
        margin-bottom: 1.11111111em;
    }

    #social a {
        display: block;
        overflow: hidden;
        width: 2.77777778em;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.14);
    }

        #social a:hover i {
            opacity: 1;
        }

    #social i {
        display: block;
        overflow: hidden;
        padding-bottom: 100%;
        background: no-repeat center center;
        background-size: contain;
        opacity: 0.5;
    }

    #social .wx {
        background-image: url(../images/social_wx.svg);
    }

    #social .wb {
        background-image: url(../images/social_wb.svg);
    }

    #social .dy {
        background-image: url(../images/social_dy.svg);
    }

    #social .xhs {
        background-image: url(../images/social_xhs.png);
    }

    #social .qr {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width:max-content;
        margin-top: 1.11111111em;
        display: none;
        background-color:#fff;
    }
    #social .qr dl{ display:flex;}

    #social li:hover .qr {
        display: block;
    }

    #social .qr img {
        display: block;
        width:1rem;
        height: auto;
    }

    #social .qr:after {
        content: '';
        display: block;
        position: absolute;
        border-bottom: 0.55555556em solid #fff;
        border-left: 0.44444444em solid transparent;
        border-right: 0.44444444em solid transparent;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

/*site*/
#site {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 1.66666667em 0;
}

    #site img {
        display: block;
        width: auto;
        height: 3.16666667em;
    }

/*backtop*/
#backtop {
    border-radius: 50%;
    width: 2.77777778em;
    height: 2.77777778em;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff;
    cursor: pointer;
    background: #d02b26 url(../images/backtop.png) no-repeat center center;
    background-size: 60% auto;
}

.readmore .span {
    font-size: 0.77777778em;
    display: block;
    width: 10.14285714em;
    height: 3em;
    text-align: center;
    line-height: 3em;
    border-radius: 1.5em;
    color: #fff;
    background-color: #d02b26;
    text-transform: uppercase;
    transition: all .5s;
}

.readmore i {
    display: inline-block;
    font-style: normal;
    background: url(../images/arrow_right_01.png) no-repeat right center;
    background-size: 0.42857143em auto;
    padding-right: 1.21428571em;
}

.readmore.center .span {
    margin: 0 auto;
}

.readmore.large {
    font-size: 1.11111111em;
}

    .readmore.large .span {
        width: 14em;
        height: 3.5em;
        border-radius: 1.75em;
        line-height: 3.5em;
    }

.readmore .span:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}


/*newsitem*/
.newsitem {
    padding: 5.20833333% 0;
    border-bottom: 1px solid #f1f1f1;
}

    .newsitem .figure {
        width: 27.43055556%;
        display: table-cell;
        vertical-align: middle;
    }

    .newsitem .image {
        border-radius: 0.27777778em;
    }

    .newsitem .img {
        padding-bottom: 66.58227848%;
    }

    .newsitem .text {
        display: table-cell;
        vertical-align: middle;
        padding-left: 5.20833333%;
    }

    .newsitem .date {
        font-size: 0.88888889em;
        color: #888;
        line-height: 1.625em;
        margin-bottom: 2.88659794%;
    }

    .newsitem .title {
        font-size: 1.33333333em;
        line-height: 1.20833333em;
        font-weight: normal;
        margin-bottom: 3.09278351%;
    }

        .newsitem .title span {
            color: #d02b26;
        }

    .newsitem .excerpt {
        color: #666;
        line-height: 1.44444444em;
        height: 2.88888889em;
        -webkit-line-clamp: 2;
        margin-bottom: 5.77319588%;
    }

        .newsitem .excerpt span {
            color: #d02b26;
        }

    .newsitem a:hover .img {
        transform: scale(1.05);
    }

/*pagenavi*/
#pagenavi {
    font-size: 0.88888889em;
    padding: 5.20833333% 0;
}

    #pagenavi .inner {
        justify-content: center;
        align-items: center;
    }

    #pagenavi a {
        display: block;
        height: 3.125em;
        line-height: 3.125em;
        min-width: 3.125em;
        color: #888;
        border-radius: 0.3125em;
        margin: 0.15625em;
        text-align: center;
        padding: 0 0.3125em;
        position: relative;
        background-color: #f5f5f5;
    }

    #pagenavi span {
        display: flex;
        align-items: center;
        margin: 0 0.78125em;
    }

    #pagenavi em {
        font-style: normal;
    }

    #pagenavi .num numeric {
        display: flex;
        align-items: center;
    }

    #pagenavi a:hover,
    #pagenavi .a_cur {
        color: #fff;
        background-color: #d02b26;
    }

    #pagenavi .a_prev:before,
    #pagenavi .a_next:before {
        width: 0.4375em;
        height: 0.6875em;
        background: no-repeat 0 0;
        background-size: 100% auto;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -0.21875em 0 0 -0.34375em;
    }

    #pagenavi .a_prev:hover:before,
    #pagenavi .a_next:hover:before {
        background-position: 0 100%;
    }

    #pagenavi .a_prev {
        margin-right: 1.09375em;
    }

        #pagenavi .a_prev:before {
            background-image: url(../images/page_left.png);
        }

    #pagenavi .a_next {
        margin-left: 1.09375em;
    }

        #pagenavi .a_next:before {
            background-image: url(../images/page_right.png);
        }

/*wrapper*/
#wrapper {
    padding: 4.79166667% 0 5.20833333%;
    overflow: hidden;
}

/*newspost*/
#newspost {
    max-width: 73.38888889em;
    margin: 0 auto;
}

    #newspost .date {
        text-align: center;
        font-size: 0.88888889em;
        color: #888;
        line-height: 1.625em;
        margin-bottom: 2.04390613%;
    }

    #newspost .title {
        text-align: center;
        color: #d02b26;
        font-weight: normal;
        font-size: 1.33333333em;
        line-height: 1.35em;
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: 2.64950795%;
        margin-bottom: 2.64950795%;
    }

    #newspost .entry {
        margin-bottom: 6.05601817%;
    }

    #newspost .navi {
        border-top: 1px solid #f1f1f1;
        padding: 2.72520818% 0;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        align-items: center;
        font-size: 0.88888889em;
        line-height: 1.625em;
        margin-bottom: 2.11960636%;
    }

        #newspost .navi > div {
            max-width: 48%;
        }

/*result*/
#result {
    border-bottom: 1px solid #fafafa;
    padding: 4.84375% 0 4.6875%;
}

    #result .name {
        font-size: 1.66666667em;
        line-height: 1.35em;
        font-weight: normal;
        text-align: center;
        margin-bottom: 2.22222222%;
    }

    #result .total {
        text-align: center;
        color: #666;
        line-height: 1.88888889em;
    }

        #result .total span {
            color: #d02b26;
        }

    #result .input {
        max-width: 48.88888889em;
        margin: 0 auto;
        position: relative;
        box-shadow: 0px 0px 1.55555556em rgba(148,148,148,0.14);
        background-color: #fff;
        margin-bottom: 2.08333333%;
        border-radius: 1.66666667em;
        overflow: hidden;
        padding-right: 5.55555556em;
    }

    #result .text {
        display: block;
        width: 100%;
        height: 3.33333333em;
        line-height: 2em;
        padding: 0.66666667em 0 0.66666667em 2.22222222em;
    }

    #result .submit {
        position: absolute;
        top: 0.55555556em;
        height: 2.22222222em;
        width: 4.44444444em;
        border-radius: 1.11111111em;
        background: #d02b26 url(../images/search_01.svg) no-repeat center center;
        background-size: 0.94444444em auto;
        right: 0.55555556em;
    }

/*hgroup*/
.hgroup {
    margin-bottom: 0.625em;
    font-size: 2.66666667em;
}

    .hgroup .alias {
        font-size: 1em;
        line-height: 1.125em;
        text-transform: uppercase;
        color: #d02b26;
        font-family: 'BarlowCondensed';
    }

    .hgroup .name {
        font-size: 0.625em;
        font-weight: normal;
        line-height: 1.25em;
    }

    .hgroup.white {
        color: #fff;
    }

        .hgroup.white .alias {
            color: #fff;
        }

    .hgroup.center {
        text-align: center;
    }

/*jobinfo*/
#jobinfo {
    border-bottom: 1px solid #f1f1f1;
    padding: 4.73958333% 0 3.80208333%;
}

/*jobitem*/
.jobitem {
    border-bottom: 1px solid #f1f1f1;
    padding: 3.85416667% 0;
}

    .jobitem .top {
        position: relative;
        cursor: pointer;
        padding-right: 2.22222222em;
    }

        .jobitem .top:hover .name {
            color: #d02b26;
        }

    .jobitem .arrow {
        width: 1.72222222em;
        height: 1.33333333em;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 0.16666667em;
        background: #d02b26 url(../images/arrow_down_02.png) no-repeat center center;
        background-size: 0.61111111em auto;
    }

    .jobitem .name {
        font-size: 1.44444444em;
        font-weight: normal;
        line-height: 1.5em;
        margin-bottom: 0.5em;
    }

    .jobitem .meta {
        line-height: 1.44444444em;
    }

        .jobitem .meta li {
            margin-right: 9.28571429%;
        }

        .jobitem .meta span {
            display: inline-block;
            vertical-align: middle;
            color: #a7a7a7;
        }

        .jobitem .meta .val {
            color: #666;
        }

    .jobitem .btm {
        display: none;
    }

    .jobitem .entry {
        line-height: 1.8;
        color: #666;
        margin-top: 1.66666667em;
    }

        .jobitem .entry h4 {
            margin-bottom: 0.66666667em;
        }

    .jobitem .readmore {
        margin-top: 2.22222222em;
    }

    .jobitem.cur .arrow {
        transform: rotateZ(180deg);
    }

/*boxtitle*/
.boxtitle {
    font-size: 2em;
}

    .boxtitle .alias {
        font-size: 1em;
        text-transform: uppercase;
        line-height: 1.25em;
        font-family: 'BarlowCondensed';
    }

    .boxtitle .name {
        font-size: 0.61111111em;
        font-weight: normal;
        line-height: 1.35em;
        margin-top: 0.22727273em;
    }

/*msgform*/
#msgform .boxtitle {
    margin-bottom: 0.91666667em;
}

#msgform .item {
    overflow: hidden;
    margin-bottom: 1.11111111em;
}

#msgform .label {
    float: left;
    display: block;
    color: #666;
    height: 3.33333333em;
    line-height: 3.33333333em;
}

    #msgform .label i {
        font-style: normal;
        color: #d02b26;
    }

#msgform .ml {
    margin-left: 7.22222222em;
    overflow: hidden;
}

#msgform .select {
    position: relative;
    background-color: #f5f5f5;
    border-radius: 0.27777778em;
}

    #msgform .select:after {
        width: 0.33333333em;
        height: 0.55555556em;
        background: url(../images/arrow_right_02.png) no-repeat right center;
        background-size: contain;
        content: '';
        display: block;
        position: absolute;
        right: 1.11111111em;
        top: 50%;
        transform: translateY(-50%);
    }

    #msgform .select select {
        display: block;
        height: 3.33333333em;
        color: #aaa;
        width: 100%;
        padding: 0 1.11111111em;
        -webkit-appearance: none;
        position: relative;
        z-index: 2;
    }

        #msgform .select select:focus {
            color: #666;
        }

        #msgform .select select::-ms-expand {
            display: none;
        }

#msgform .text {
    display: block;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 0.27777778em;
    height: 3.33333333em;
    line-height: 2em;
    padding: 0.66666667em 1.11111111em;
    color: #aaa;
}

    #msgform .text:focus {
        color: #666;
    }

#msgform textarea.text {
    height: 11.11111111em;
    resize: vertical;
}

#msgform .upload {
    position: relative;
}

    #msgform .upload input[type='file'] {
        display: none;
    }

    #msgform .upload a {
        display: block;
        position: absolute;
        background-color: #d02b26;
        right: 0.625em;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        width: 6.25em;
        height: 2.5em;
        line-height: 2.5em;
        border-radius: 0.3125em;
        font-size: 0.88888889em;
        z-index: 2;
        text-align: center;
    }

#msgform .column {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

    #msgform .column .item {
        width: 49.30555556%;
    }

#msgform .readmore {
    margin-top: 2.77777778em;
}

/*cooperate*/
.cooperate {
    border-bottom: 1px solid #f8f8f8;
    padding: 4.53125% 0 3.80208333%;
}

    .cooperate:last-child {
        border-bottom: none;
    }

    .cooperate .boxtitle {
        margin-bottom: 0.83333333em;
    }

    .cooperate .entry {
        color: #a7a7a7;
        margin-bottom: 1.66666667em;
        min-height: 4.5em;
    }

    .cooperate .info {
        color: #666;
    }

        .cooperate .info .title {
            font-weight: normal;
            font-size: 1em;
            line-height: 1.44444444em;
            margin-bottom: 0.44444444em;
        }

        .cooperate .info li {
            line-height: 1.44444444em;
            padding: 0.14444444em 2% 0.14444444em 0;
        }

            .cooperate .info li:nth-child(3n+1) {
                width: 23.95833333%;
            }

            .cooperate .info li:nth-child(3n+2) {
                width: 28.81944444%;
            }

            .cooperate .info li:nth-child(3n+3) {
                width: 47.22222222%;
                padding-right: 0;
            }

        .cooperate .info span {
            display: inline-block;
            vertical-align: middle;
        }

            .cooperate .info span:first-child {
                padding-left: 1.38888889em;
                background: no-repeat left center;
                background-size: 0.88888889em auto;
            }

            .cooperate .info span:last-child {
                color: #d02b26;
            }

        .cooperate .info .man span:first-child {
            background-image: url(../images/icon_man.png);
        }

        .cooperate .info .mail span:first-child {
            padding-left: 1.55555556em;
            background-image: url(../images/icon_mail.png);
            background-size: 1.05555556em auto;
        }

        .cooperate .info .addr span:first-child {
            padding-left: 1.22222222em;
            background-image: url(../images/icon_addr.png);
            background-size: 0.77777778em auto;
        }

        .cooperate .info .world span:first-child {
            background-image: url(../images/icon_world.png);
        }

        .cooperate .info .tel span:first-child {
            padding-left: 1.44444444em;
            background-image: url(../images/icon_tel.png);
            background-size: 0.94444444em auto;
        }

/*bizinfo*/
#bizinfo {
    text-align: center;
    margin-bottom: 4.72222222%;
}

    #bizinfo .entry {
        line-height: 1.61111111em;
    }

/*retail*/
#retail .list {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 4.16666667%;
}

#retail .item {
    width: 48.61111111%;
    margin-bottom: 2.77777778%;
}

    #retail .item a {
        display: block;
        overflow: hidden;
        border-radius: 0.27777778em;
        position: relative;
    }

#retail .img {
    padding-bottom: 54.28571429%;
}

#retail .text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    transform: translateY(100%);
    transition: all 0.2s;
}

    #retail .text:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(../images/bg_dots.jpg) repeat left top;
        opacity: 0.7;
    }

#retail .box {
    position: relative;
    z-index: 2;
    padding: 1em;
    transition: all 0.2s;
}

#retail .title {
    font-size: 1em;
    font-weight: normal;
    line-height: 1.61111111em;
    margin-bottom: 1.27777778em;
}

#retail .readmore .span {
    margin: 0 auto;
}

#retail .item a:hover .text {
    transform: translateY(0);
}

#retail .item a:hover .box {
    transform: scale(1.2);
}

#retail .item a:hover .img {
    transform: scale(1.1);
}

/*ecommerce*/
#ecommerce {
    overflow: hidden;
}

    #ecommerce #bizinfo {
        margin-bottom: 0;
        padding: 4.53125% 0 2.5%;
    }

    #ecommerce .info {
        background: #9d2e2b url(../images/bg_dots_02.png) repeat center center;
        color: #fff;
        padding: 2.60416667% 0;
    }

        #ecommerce .info .inner {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

    #ecommerce .image {
        width: 50%;
        align-items: center;
    }

    #ecommerce .img {
        padding-bottom: 75%;
        width: 100%;
        background-size: contain;
    }

    #ecommerce .text {
        width: 22.56944444%;
        padding: 4.58333333% 0;
    }

        #ecommerce .text:first-child {
            align-items: flex-end;
        }

    #ecommerce .title {
        font-size: 1.77777778em;
        font-style: italic;
        line-height: 1.35em;
        margin-bottom: 0.875em;
    }

    #ecommerce .intro {
        text-align: justify;
        font-size: 0.88888889em;
        line-height: 1.5em;
    }

/*livebox*/
.livebox {
    padding: 4.6875% 0;
    overflow: hidden;
}

    .livebox .image {
        padding: 2.08333333% 0;
    }

/*talent*/
#talent {
    background: #fff url(../images/bg_dots_03.png) repeat center center;
}

/*branding*/
#branding .readmore {
    margin-top: 4.86111111%;
}

/*caseitem*/
.caseitem {
    padding: 5.20833333% 0;
    border-bottom: 1px solid #f1f1f1;
}

    .caseitem .figure {
        width: 27.43055556%;
        display: table-cell;
        vertical-align: top;
    }

    .caseitem .image {
        border-radius: 0.27777778em;
    }

        .caseitem .image:after {
            border-right: 0.55555556em solid #fff;
            border-top: 0.55555556em solid transparent;
            border-bottom: 0.55555556em solid transparent;
            content: '';
            display: block;
            position: absolute;
            right: 0;
            top: 1.22222222em;
        }

    .caseitem .img {
        padding-bottom: 66.58227848%;
    }

    .caseitem .date {
        display: table-cell;
        vertical-align: top;
        font-size: 1.11111111em;
        width: 4.65em;
    }

        .caseitem .date time {
            display: block;
            background-color: #d02b26;
            color: #fff;
            text-align: center;
            border-radius: 0.25em;
            padding: 0.9em 0;
        }

        .caseitem .date i {
            font-style: normal;
            display: block;
            font-size: 1.3em;
            line-height: 1.125em;
        }

    .caseitem .text {
        display: table-cell;
        vertical-align: top;
        padding: 0 5.20833333%;
    }

    .caseitem .box {
        width: 74.81296758%;
    }

    .caseitem .title {
        font-size: 1.33333333em;
        line-height: 1.20833333em;
        max-height: 2.45833333em;
        -webkit-line-clamp: 2;
        font-weight: normal;
        margin-bottom: 6.16666667%;
    }

    .caseitem .excerpt {
        color: #666;
        line-height: 1.44444444em;
        height: 2.88888889em;
        -webkit-line-clamp: 2;
        margin-bottom: 6%;
    }

    .caseitem a:hover .img {
        transform: scale(1.05);
    }

/*ipbox*/
.ipbox .hgroup {
    margin-bottom: 0;
    padding: 6.04166667% 0 4.86111111%;
}

/*original*/
.original .list {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.original .item {
    width: 25%;
    transition: all 0.2s;
    display: table-cell;
    vertical-align: middle;
}

    .original .item a {
        display: block;
        position: relative;
    }

.original .image:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg_dots.jpg) repeat center center;
    z-index: 2;
    opacity: 0.6;
    transition: all 0.2s;
}

.original .img {
    padding-bottom: 40.625vw;
    background-position: 62.5% center;
}

    .original .img.pc-img {
        display: block;
    }

    .original .img.web-img {
        display: none;
    }

.original .item:nth-child(1) .img {
    background-position: 85% center;
}

.original .item:nth-child(2) .img {
    background-position: 62.5% center;
}

.original .item:nth-child(3) .img {
    background-position: 71% center;
}

.original .item:nth-child(4) .img {
    background-position: 71% center;
}

.original .icon {
    max-width: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7.05128205%;
    z-index: 2;
    transition: all 0.2s;
}

    .original .icon img {
        display: block;
        height: auto;
        max-height: 3.88888889em;
        width: auto;
        max-width: 100%;
    }

.original .list:hover .item {
    width: 13%;
}

.original .list:hover .on {
    width: 61%;
}

.original .item:hover .image:after {
    opacity: 0;
}

.original .item:hover .icon {
    bottom: 50%;
    transform: translateY(50%);
    left: 2.60416667vw;
}

    .original .item:hover .icon img {
        width: 17.44791667vw;
        max-height: none;
    }

/*science*/
.science .info {
    position: relative;
}

.science .image:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg_dots.jpg) repeat center center;
    opacity: 0.6;
    transition: all 0.2s;
}

.science .img {
    padding-bottom: 40.72916667%;
}

.science .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    z-index: 2;
    padding: 0 7.03125%;
}

    .science .text i {
        display: block;
        padding-bottom: 9.6969697%;
        background: no-repeat left center;
        background-size: contain;
    }

.science .info:hover .image:after {
    opacity: 0;
}

.science .swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
}

.science .swiper-pagination-bullet-active {
    background: #d02b26;
}

/*ipcontact*/
.ipcontact {
    padding: 4.53125% 0 3.38541667%;
}

    .ipcontact .hgroup {
        padding: 0;
        margin-bottom: 0.72916667em;
    }

/*chic*/
.chic {
    overflow: hidden;
}

    .chic .item {
        display: table-cell;
        vertical-align: middle;
        transition: all 0.2s;
        position: relative;
    }

    .chic .image {
        transition: all 0.2s;
    }

        .chic .image:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(../images/bg_dots.jpg) repeat center center;
            opacity: 0.6;
            transition: all 0.2s;
        }

    .chic .img {
        padding-bottom: 40.78125vw;
        background-size: auto 100%;
    }

    .chic .icon {
        position: absolute;
        left: 8.125vw;
        bottom: 6.38569604%;
        transition: all 0.2s;
        transform: scale(.8);
    }

        .chic .icon img {
            display: block;
            height: auto;
            max-height: 7.39583333vw;
            width: auto;
            max-width: 100%;
            object-fit: contain;
        }

    .chic .item1 {
        width: 57.29166667%;
    }

        .chic .item1 .img {
            background-position: right center;
        }

        .chic .item1.enable {
            width: 81.51041667%;
        }

            .chic .item1.enable .icon {
                transform: scale(1);
            }

        .chic .item1.disable {
            width: 29.89583333%;
        }

    .chic .item2 {
        width: 42.70833333%;
        position: relative;
        z-index: 2;
    }

        .chic .item2 .img {
            background-position: 73% top;
        }

        .chic .item2 .image {
            width: 126.82926829%;
            margin-left: -26.82926829%;
            mask: url(../images/triangle_right.svg) no-repeat left center;
            -webkit-mask: url(../images/triangle_right.svg) no-repeat left center;
            mask-size: cover;
            -webkit-mask-size: cover;
        }

        .chic .item2.disable {
            width: 18.48958333%;
        }

            .chic .item2.disable .image {
                width: 161.97183099%;
                margin-left: -61.97183099%;
            }

        .chic .item2.enable {
            width: 70.10416667%;
        }

            .chic .item2.enable .image {
                width: 116.34472511%;
                margin-left: -16.34472511%;
            }

    .chic .disable .icon {
        left: 1.5vw;
    }

    .chic .item1.disable .icon {
        bottom: 75%;
        left: -1vw;
    }

    .chic .enable .image:after {
        opacity: 0;
    }

    .chic .enable .icon {
        bottom: 50%;
        transform: translateY(50%);
    }


/*ippage*/
.ippage #header {
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.ippage #wrapper {
    background: url(../images/bg_case.jpg) no-repeat center top;
    background-size: 100% auto;
}

/*ipinfo*/
#ipinfo {
    /* background-color: #c52925; */
    padding-top: 5.55555556em;
    color: #fff;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom right;
}

    #ipinfo .inner {
        padding: 3.90625% 0 0;
    }

    #ipinfo .logo img {
        display: block;
        height: 1.61111111em;
        width: auto;
    }

    #ipinfo .info {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        position: relative;
        z-index: 2;
    }

    #ipinfo .image {
        width: 48.33333333%;
        margin-bottom: -6.80555556%;
    }

    #ipinfo .img {
        padding-bottom: 100%;
        background-size: contain;
    }

    #ipinfo .text {
        width: 50%;
        line-height: 1.66666667em;
        position: relative;
        z-index: 2;
        padding-bottom: 2.08333333%;
    }

    #ipinfo .title {
        font-family: 'BarlowCondensed';
        margin-bottom: 0.54166667em;
    }

    #ipinfo .tag {
        border-bottom: 1px solid rgba(255,255,255,0.2);
        margin-bottom: 2.13888889em;
        padding-bottom: 1.77777778em;
    }

        #ipinfo .tag span {
            display: block;
            background-color: #fff;
            color: #d02b26;
            border-radius: 0 0.25em 0 0.25em;
            margin: 0 0.5em 0.5em 0;
            font-size: 1.33333333em;
            line-height: 1.91666667em;
            padding: 0 0.5em;
            box-shadow: 0px 0px 1em rgba(0,0,0,0.05);
        }

    #ipinfo .intro {
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 2.13888889em;
        margin-bottom: 2.22222222em;
    }

    #ipinfo .feature p {
        padding-bottom: 0.22222222em;
    }

    #ipinfo .name {
        justify-content: center;
        writing-mode: sideways-lr;
        letter-spacing: 1em;
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
        margin-top: -5.72916667%;
        font-size: 0.88888889em;
        opacity: 0.2;
        display: flex;
        line-height: 2em;
    }

        #ipinfo .name span {
            display: block;
            white-space: nowrap;
        }

    #ipinfo .company {
        /* background-color: #a6221e; */
        padding: 5.15625% 0;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: wrap;
        -moz-flex-flow: wrap;
        -ms-flex-flow: wrap;
        -o-flex-flow: wrap;
        flex-flow: wrap;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
        color: rgba(255,255,255,0.1);
        text-transform: uppercase;
        letter-spacing: 1.65em;
        position: relative;
    }

/*ipcase*/
#ipcase {
    margin-bottom: 11.80555556%;
}

    #ipcase .list {
        overflow: hidden;
        margin-bottom: 3.47222222%;
    }

    #ipcase .item {
        background-color: #ededed;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        margin-top: 2.77777778%;
    }

        #ipcase .item:nth-child(2n) {
            flex-direction: row-reverse;
        }

    #ipcase .image {
        width: 59.30555556%;
    }

    #ipcase .img {
        padding-bottom: 69.08665105%;
    }

    #ipcase video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
    }

    #ipcase .icon {
        padding: 5%;
        width: 40.69444444%;
    }

        #ipcase .icon img {
            display: block;
            margin: 0 auto;
        }

    #ipcase .play {
        width: 7.72833724%;
        padding-bottom: 7.72833724%;
        background: url(../images/play.svg) no-repeat center center;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -3.86416862% 0 0 -3.86416862%;
        z-index: 2;
        transition: all 0.3s;
    }

    #ipcase .image a:hover .play {
        transform: scale(0.9);
    }

    #ipcase .image:hover .img {
        transform: scale(1.05);
    }


/*ipgallery*/
#ipgallery .box {
    padding: 1.94444444em 2.77777778em;
    position: relative;
}

#ipgallery .image {
    border-radius: 0.55555556em;
}

    #ipgallery .image:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        transition: all 0.5s;
    }

#ipgallery .img {
    padding-bottom: 100%;
}

#ipgallery .image:hover .img {
    transform: scale(1.05);
}

#ipgallery .swiper {
    padding: 2.87313433% 0;
}

#ipgallery .swiper-slide {
    transition: all 0.5s;
}

#ipgallery .swiper-slide-active, #ipgallery .swiper-slide-duplicate-active {
    transform: scale(1.17);
    z-index: 9;
}

    #ipgallery .swiper-slide-active .image:after, #ipgallery .swiper-slide-duplicate-active .image:after {
        opacity: 0;
    }

#ipgallery .swiper-button-arrow {
    margin-top: 0;
    transform: translateY(-50%);
    width: 1.66666667em;
    background: no-repeat 0 0;
    background-size: 100% auto;
    height: auto;
    opacity: 0.5;
}

    #ipgallery .swiper-button-arrow:after {
        content: '';
        padding-bottom: 163.33333333%;
        position: relative;
        width: 100%;
    }

    #ipgallery .swiper-button-arrow:hover {
        background-position: 0 100%;
        opacity: 1;
    }

#ipgallery .swiper-button-prev {
    background-image: url(../images/swiper_arrow_left_01.png);
    left: 0;
}

#ipgallery .swiper-button-next {
    background-image: url(../images/swiper_arrow_right_01.png);
    right: 0;
}

/*slides*/
#slides .inner {
    position: relative;
}

#slides .img {
    padding-bottom: 50%;
}
#slides .image::before{ content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../images/ban-back.png);}
#slides .img.pc-img {
    display: block;
}

#slides .img.web-img {
    display: none;
}

#slides .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
}

#slides .logo {
    margin-bottom: 5.20833333%;
    width: 39.58333333%;
    position: relative;
}

    #slides .logo img {
        display: block;
        width: 100%;
    }

#slides .swiper-navigation {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 6.25%;
}

#slides .swiper-button-arrow {
    position: absolute;
    right: 0;
    top: auto;
    bottom: 0;
    width: 2.83333333em;
    height: 2.83333333em;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    margin-top: 0;
    cursor: pointer;
    background: no-repeat center center;
    background-size: 0.38888889em auto;
    transition: all 0.2s;
}

    #slides .swiper-button-arrow:hover {
        border-color: #fff;
    }

    #slides .swiper-button-arrow:after {
        display: none;
    }

#slides .swiper-button-next {
    right: 0;
    background-image: url(../images/swiper_arrow_right_02.png);
}

#slides .swiper-button-prev {
    left: auto;
    right: 4em;
    background-image: url(../images/swiper_arrow_left_02.png);
}

/*hmabout*/
#hmabout {
    padding: 4.53125% 0 9.63541667%;
}

    #hmabout .hgroup {
        margin-bottom: 6.59722222%;
    }

    #hmabout .info {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        align-items: center;
    }

    #hmabout .image {
        width: 61.11111111%;
    }

    #hmabout .img {
        padding-bottom: 56.81818182%;
    }

    #hmabout .play {
        width: 7.15909091%;
        padding-bottom: 7.15909091%;
        background: url(../images/play.svg) no-repeat center center;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -3.68852459% 0 0 -3.68852459%;
        z-index: 2;
        transition: all 0.3s;
    }

    #hmabout .image {
        border-radius: 0.33333333em;
    }

        #hmabout .image a:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }

        #hmabout .image a:hover .play {
            transform: scale(0.9);
        }

    #hmabout .text {
        width: 34.02777778%;
    }

    #hmabout .title {
        margin-bottom: 1.11111111em;
    }

    #hmabout .par {
        font-size: 1.77777778em;
        line-height: 1.5em;
    }

    #hmabout .sub {
        font-size: 2.83333333em;
        line-height: 1.35em;
        text-transform: uppercase;
        font-weight: bold;
    }

        #hmabout .sub span {
            color: #d02b26;
        }

    #hmabout .intro {
        font-size: 0.88888889em;
        line-height: 1.8125em;
        text-align: justify !important;
        margin-bottom: 15.625%;
    }

/*hmbiz*/
#hmbiz {
    background-color: #f7f7f7;
    padding: 4.53125% 0 5.20833333%;
    overflow: hidden;
}

    #hmbiz .hgroup {
        margin-bottom: 4.51388889%;
    }

    #hmbiz .list {
        margin-bottom: 4.86111111%;
        padding-left: 1px;
        padding-bottom: 1px;
    }

    #hmbiz .box {
        width: 100%;
    }

    #hmbiz .icon {
        width: 33.33333333%;
        margin: 0 auto 15%;
        transition: all 0.2s;
    }

        #hmbiz .icon i {
            display: block;
            padding-bottom: 85%;
            background: no-repeat center center;
            background-size: contain;
        }

            #hmbiz .icon i:nth-child(2) {
                display: none;
            }

    #hmbiz .title {
        font-size: 1.44444444em;
        font-weight: normal;
        line-height: 1.35em;
    }

    #hmbiz .intro {
        line-height: 1.66666667em;
        margin-top: 10%;
        text-align: justify;
        display: none;
    }

    #hmbiz .item {
        width: 33.333%;
        text-align: center;
    }

        #hmbiz .item a {
            display: block;
            overflow: hidden;
            position: relative;
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: wrap;
            -moz-flex-flow: wrap;
            -ms-flex-flow: wrap;
            -o-flex-flow: wrap;
            flex-flow: wrap;
            align-items: center;
            height: 100%;
            min-height: 27.77777778em;
            border: 1px solid #e4e4e4;
            margin-left: -1px;
            margin-bottom: -1px;
            padding: 18.71101871%;
            transition: all 0.3s;
        }

            #hmbiz .item a:hover {
                background-color: #d02b26;
                border-color: #d02b26;
                color: #fff;
            }

                #hmbiz .item a:hover .icon i:nth-child(1) {
                    display: none;
                }

                #hmbiz .item a:hover .icon i:nth-child(2) {
                    display: block;
                }

                #hmbiz .item a:hover .intro {
                    display: block;
                }

/*hmnews*/
#hmnews {
    padding: 4.53125% 0 4.94791667%;
    overflow: hidden;
}

    #hmnews .hgroup {
        margin-bottom: 3.81944444%;
    }

    #hmnews .box {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    #hmnews .date {
        font-size: 0.77777778em;
        color: #888;
        line-height: 1.85714286em;
    }

.istop {
    width: 50%;
    background-color: #f7f7f7;
    border-radius: 0.33333333em;
}

    .istop .title {
        font-size: 1.11111111em;
        line-height: 1.3em;
        font-weight: normal;
        margin-bottom: 3.10344828%;
    }

    .istop .date {
        margin-bottom: 5.51724138%;
    }

    .istop .image {
        margin-bottom: 7.75862069%;
    }

    .istop .img {
        padding-bottom: 55.34482759%;
    }

    .istop a {
        display: block;
        overflow: hidden;
        padding: 6.38888889% 9.72222222% 6.94444444%;
    }

        .istop a:hover .img {
            transform: scale(1.05);
        }

.islist {
    width: 46.52777778%;
    border-top: 1px solid #f1f1f1;
}

    .islist .item {
        border-bottom: 1px solid #f1f1f1;
        padding: 6.86567164% 5.97014925% 6.56716418%;
    }

    .islist .title {
        font-size: 1.11111111em;
        line-height: 1.3em;
        height: 2.6em;
        -webkit-line-clamp: 2;
        font-weight: normal;
        padding-right: 4em;
        margin-bottom: 2.85714286%;
    }

    .islist .date {
        position: absolute;
        right: 0;
        top: 0;
    }

    .islist .excerpt {
        font-size: 0.88888889em;
        line-height: 1.625em;
        color: #666;
        height: 3.25em;
        -webkit-line-clamp: 2;
        padding-right: 25%;
        background: url(../images/arrow_right_03.svg) no-repeat right center;
        background-size: 1.375em auto;
    }

    .islist a {
        display: block;
        overflow: hidden;
        position: relative;
        padding-left: 1.66666667em;
    }

        .islist a:before {
            border-radius: 50%;
            content: '';
            display: block;
            position: absolute;
            left: 0;
            width: 0.44444444em;
            height: 0.44444444em;
            background-color: #d3d3d3;
            top: 0.5em;
        }

/*hmmatrix*/
#hmmatrix {
    color: #fff;
    padding: 4.53125% 0;
    position: relative;
}

    #hmmatrix .back-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        #hmmatrix .back-bg .item {
            display: none;
        }

            #hmmatrix .back-bg .item.on {
                display: block;
                width: 100%;
                height: 100%;
            }

                #hmmatrix .back-bg .item.on figure {
                    width: 100%;
                    height: 100%;
                    background: no-repeat center center;
                    background-size: cover;
                }

    #hmmatrix .hgroup {
        margin-bottom: 5.20833333%;
        position: relative;
        z-index: 2;
    }

    #hmmatrix .alias {
        color: #fff;
    }

/*matrixtext*/
#matrixtext {
    max-width: 51.94444444em;
    margin: 0 auto 22.22222222%;
}

    #matrixtext .intro {
        font-size: 0.88888889em;
        line-height: 1.8125em;
        text-align: center;
        margin-bottom: 5.6684492%;
    }

/*matriximage*/
#matriximage {
    padding: 0 5em;
    position: relative;
}

    #matriximage .image {
        margin: 0 12.24514786%;
    }

        #matriximage .image:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 0.27777778em solid #f5f6f6;
            box-sizing: border-box;
            transition: all 0.2s;
        }

    #matriximage .img {
        padding-bottom: 100%;
        border-radius: 50%;
        overflow: hidden;
    }

    #matriximage .swiper {
        padding: 0.77777778em 0;
        max-width: 54.44444444em;
        margin: 0 auto;
    }

    #matriximage .swiper-slide {
        transition: all 0.2s;
        cursor: pointer;
    }

    #matriximage .swiper-slide-thumb-active {
        transform: scale(1.2177);
    }

        #matriximage .swiper-slide-thumb-active .image:after {
            border-color: #d02b26;
        }

    #matriximage .swiper-button-arrow {
        margin-top: 0;
        width: 1.66666667em;
        height: 2.77777778em;
        opacity: 0.5;
        transform: translateY(-50%);
        background: no-repeat center center;
        background-size: contain;
    }

        #matriximage .swiper-button-arrow:after {
            display: none;
        }

        #matriximage .swiper-button-arrow:hover {
            opacity: 1;
        }

    #matriximage .swiper-button-next {
        right: 0;
        background-image: url(../images/swiper_arrow_right_03.png);
    }

    #matriximage .swiper-button-prev {
        right: auto;
        left: 0;
        background-image: url(../images/swiper_arrow_left_03.png);
    }

/*cobranding*/
#cobranding {
    padding: 4.6875% 0;
}

    #cobranding .image {
        margin-top: 2.43055556%;
    }

/*culture*/
#culture {
    background-color: #f7f7f7;
    padding: 4.53125% 0 5.72916667%;
    overflow: hidden;
}

    #culture .hgroup {
        margin-bottom: 4.51388889%;
    }

    #culture .list {
        padding-left: 1px;
        padding-bottom: 1px;
    }

    #culture .box {
        width: 100%;
    }

    #culture .icon {
        width: 35.9375%;
        margin: 0 auto 11.66666667%;
        transition: all 0.2s;
    }

        #culture .icon i {
            display: block;
            padding-bottom: 91.30434783%;
            background: no-repeat center center;
            background-size: contain;
        }

            #culture .icon i:nth-child(2) {
                display: none;
            }

    #culture .title {
        font-size: 1.44444444em;
        font-weight: normal;
        line-height: 1.35em;
    }

    #culture .intro {
        line-height: 1.66666667em;
        margin-top: 9.375%;
        display: none;
    }

    #culture .item {
        width: 33.333%;
        text-align: center;
    }

        #culture .item a {
            display: block;
            overflow: hidden;
            position: relative;
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: wrap;
            -moz-flex-flow: wrap;
            -ms-flex-flow: wrap;
            -o-flex-flow: wrap;
            flex-flow: wrap;
            align-items: center;
            height: 100%;
            min-height: 27.77777778em;
            border: 1px solid #e4e4e4;
            margin-left: -1px;
            margin-bottom: -1px;
            padding: 16.63201663%;
            transition: all 0.3s;
        }

            #culture .item a:hover {
                background-color: #d02b26;
                border-color: #d02b26;
                color: #fff;
            }

                #culture .item a:hover .icon i:nth-child(1) {
                    display: none;
                }

                #culture .item a:hover .icon i:nth-child(2) {
                    display: block;
                }

                #culture .item a:hover .intro {
                    display: block;
                }

/*profile*/
.aboutswiper .swiper-button-arrow {
    margin-top: 0;
    transform: translateY(-50%);
    width: 2.08333333%;
    background: no-repeat center center;
    background-size: contain;
    height: auto;
    opacity: 0.5;
}

    .aboutswiper .swiper-button-arrow:after {
        content: '';
        padding-bottom: 163.33333333%;
        position: relative;
        width: 100%;
    }

    .aboutswiper .swiper-button-arrow:hover {
        opacity: 1;
    }

.aboutswiper .swiper-button-prev {
    background-image: url(../images/swiper_arrow_left_03.png);
    left: 1.38888889%;
}

.aboutswiper .swiper-button-next {
    background-image: url(../images/swiper_arrow_right_03.png);
    right: 1.38888889%;
}

/*profile*/
#profile {
    text-align: center;
    padding: 4.53125% 0;
}

    #profile .inner {
        overflow: hidden;
    }

    #profile .title {
        margin-bottom: 0.3125em;
        font-size: 1.77777778em;
    }

    #profile .par {
        font-size: 1em;
        line-height: 1.5em;
    }

    #profile .sub {
        font-size: 1.59375em;
        line-height: 1.35em;
        text-transform: uppercase;
        font-weight: bold;
    }

        #profile .sub span {
            color: #d02b26;
        }

    #profile .intro {
        font-size: 0.88888889em;
        line-height: 1.8125em;
        max-width: 45.625em;
        margin: 0 auto 5.20833333%;
    }

    #profile .image:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.5;
        transition: all 0.2s;
    }

    #profile .img {
        padding-bottom: 56.89839572%;
    }

    #profile .play {
        width: 7.05882353%;
        padding-bottom: 7.05882353%;
        background: url(../images/play.svg) no-repeat center center;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -3.52941176% 0 0 -3.52941176%;
        transition: all 0.3s;
        z-index: 5;
        display: block;
    }

    #profile .image:hover .img {
        transform: scale(1.05);
    }

    #profile .swiper {
        padding: 0.44444444em 0;
    }

    #profile .swiper-slide {
        transition: all 0.2s;
        width: 51.94444444em;
        border-radius: 0.44444444em;
    }

    #profile .swiper-slide-active, #profile .swiper-slide-duplicate-active {
        box-shadow: 0px 0.11111111em 0.44444444em rgba(0,0,0,0.35);
    }

        #profile .swiper-slide-active .image:after, #profile .swiper-slide-duplicate-active .image:after {
            opacity: 0.2;
        }

/*popup*/
.popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0,0,0,0.75);
    z-index: 10;
    -webkit-overflow-scrolling: touch;
    display: none;
}

    .popup .box {
        width: 100%;
        min-height: 100%;
        justify-content: center;
        align-items: center;
        padding: 1vh 0;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: wrap;
        -moz-flex-flow: wrap;
        -ms-flex-flow: wrap;
        -o-flex-flow: wrap;
        flex-flow: wrap;
    }

    .popup .info {
        background-color: #fff;
    }

    .popup video {
        display: block;
        width: auto;
        max-width: 90vw;
        height: auto;
        max-height: 90vh;
    }

/*ranked*/
#ranked {
    color: #fff;
    position: relative;
    padding: 4.53125% 0 5.20833333%;
}

    #ranked:before {
        background: #fff url(../images/bg_dots.jpg) repeat center center;
        opacity: 0.45;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #ranked .inner {
        position: relative;
        z-index: 2;
    }

    #ranked .hgroup {
        margin-bottom: 4.86111111%;
    }

    #ranked .alias {
        color: #fff;
    }

    #ranked .entry {
        text-align: center;
        margin-bottom: 5.20833333%;
    }

    #ranked .box {
        position: relative;
        padding: 0 6.5625%;
    }

    #ranked .image {
        border-radius: 5px;
    }

    #ranked .img {
        padding-bottom: 42.19653179%;
    }

        #ranked .img:hover {
            transform: scale(1.05);
        }


/*service*/
#service {
    background: url(../images/bg_01.png) no-repeat center center;
    background-size: cover;
    padding: 5.20833333% 0 2.60416667%;
}

    #service .swiper {
        padding: 5em .5em 0;
    }

    #service .info {
        background: url(../images/service-back.png);
        background-size: 100% 100%;
        border-radius: 0.44444444em 0.44444444em 0 0;
        text-align: center;
        padding-top: 5.18537724%;
        position: relative;
        height: 100%;
        margin-bottom: 19.18589577%;
        transition: all .5s;
        padding-bottom: 19.27083333%;
    }

    #service .box {
        position: relative;
        height: 100%;
        padding: 18.14882033% 15% 8.8151413%;
    }

    #service .title {
        font-size: 1.22222222em;
        font-weight: normal;
        line-height: 1.35em;
        margin-bottom: 33%;
    }

    #service .icon {
        margin: 0 auto 33%;
        width: 67.74557772%;
        position: relative;
        transition: all .5s;
    }

        #service .icon:before,
        #service .icon:after {
            width: 12.7963869%;
            padding-bottom: 8.28001505%;
            background: no-repeat center center;
            background-size: contain;
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #service .icon:before {
            background-image: url(../images/flag_left_arrow.png);
            right: 110%;
        }

        #service .icon:after {
            background-image: url(../images/flag_right_arrow.png);
            left: 110%;
        }

        #service .icon i {
            display: block;
            overflow: hidden;
            padding-bottom: 61.11111111%;
            background: no-repeat center center;
            background-size: contain;
        }


    #service .info:hover {
        transform: scale(1.05);
    }

    #service .alias {
        font-size: 0.77777778em;
        color: #666;
        line-height: 1.42857143em;
    }

        #service .alias pre {
            white-space-collapse: preserve-breaks;
            font-family: 'Arial','Sans-serif';
            font-style: normal;
        }

    #service .swiper-slide {
        height: auto;
        padding-bottom: 2.56944444%;
    }

    #service .swiper-navigation {
        justify-content: center;
        margin-top: 3.47222222%;
    }

    #service .swiper-button-arrow {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 2.83333333em;
        height: 2.83333333em;
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 50%;
        margin-top: 0;
        cursor: pointer;
        background: no-repeat center center;
        background-size: 0.38888889em auto;
        transition: all 0.2s;
        margin: 0 0.55555556em;
    }

        #service .swiper-button-arrow:hover {
            border-color: #fff;
        }

        #service .swiper-button-arrow:after {
            display: none;
        }

    #service .swiper-button-next {
        background-image: url(../images/swiper_arrow_right_02.png);
    }

    #service .swiper-button-prev {
        background-image: url(../images/swiper_arrow_left_02.png);
    }

/*honors*/
#honors {
    padding: 4.53125% 0 5.20833333%;
}

    #honors .list {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        height: 39.44444444em;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 0.88888889em;
    }

        #honors .list::-webkit-scrollbar {
            width: 6px;
            border: 1px solid #f9f9f9;
        }

        #honors .list::-webkit-scrollbar-thumb {
            background-color: #d02b26;
        }

    #honors .item {
        background: url(../images/bg_02.png) no-repeat center center;
        background-size: cover;
        overflow: hidden;
        width: 49.6488764%;
        color: #fff;
        align-items: center;
        min-height: 15.55555556em;
        padding: 2.77777778em 0;
        position: relative;
        margin-top: 0.55555556em;
    }

        #honors .item:nth-child(-n+2) {
            margin-top: 0;
        }

        #honors .item:before, #honors .item:after {
            width: 1px;
            height: 2.55555556em;
            background-color: rgba(255,255,255,0.2);
            content: '';
            display: block;
            position: absolute;
            left: 30.97595474%;
        }

        #honors .item:before {
            top: 2.77777778em;
        }

        #honors .item:after {
            bottom: 2.77777778em;
        }

    #honors .year {
        font-size: 2.88888889em;
        font-family: 'BarlowCondensed';
        line-height: 1em;
        width: 31.11739745%;
        text-align: center;
        position: relative;
    }

        #honors .year:after {
            width: 0.19230769em;
            height: 0.34615385em;
            background: url(../images/arrow_right_01.png) no-repeat center center;
            background-size: contain;
            content: '';
            display: block;
            position: absolute;
            left: 100%;
            top: 50%;
            margin-top: -0.17307692em;
            opacity: 0.4;
            transform: translateX(-50%);
        }

    #honors .intro {
        width: 68.88260255%;
        line-height: 1.66666667em;
        padding: 0 9.9009901%;
    }

        #honors .intro p {
            position: relative;
            padding: 0.13888889em 0 0.13888889em 1.66666667em;
        }

            #honors .intro p:before {
                width: 0.38888889em;
                height: 0.38888889em;
                border: 1px solid #fff;
                border-radius: 50%;
                background-color: #fff;
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0.77777778em;
            }

            #honors .intro p:nth-child(2n):before {
                background-color: transparent;
            }

/*milestone*/
#milestone {
    background: url(../images/milestone.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 4.53125% 0 2.60416667%;
    position: relative;
}

    #milestone .inner {
        position: relative;
    }

    #milestone .alias {
        color: #fff;
    }

    #milestone .year {
        position: relative;
        text-align: center;
    }

        #milestone .year span {
            display: block;
            font-size: 1.44444444em;
            color: rgba(255,255,255,0.12);
            line-height: 1.35em;
        }

        #milestone .year .cur span {
            color: #fff;
        }

    #milestone .swiper-slide {
        cursor: pointer;
    }

    #milestone .swiper-navigation {
        position: absolute;
        right: 0;
        bottom: 100%;
        margin-bottom: 1.77777778em;
    }

    #milestone .swiper-button-arrow {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        margin-bottom: 1.11111111em;
        width: 2.83333333em;
        height: 2.83333333em;
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 50%;
        margin-top: 0;
        cursor: pointer;
        background: no-repeat center center;
        background-size: 0.38888889em auto;
        transition: all 0.2s;
    }

        #milestone .swiper-button-arrow:hover {
            border-color: #fff;
        }

        #milestone .swiper-button-arrow:after {
            display: none;
        }

    #milestone .swiper-button-next {
        background-image: url(../images/swiper_arrow_right_02.png);
    }

    #milestone .swiper-button-prev {
        background-image: url(../images/swiper_arrow_left_02.png);
    }

    #milestone .wap {
        display: none;
    }

    #milestone .info {
        text-align: center;
    }

        #milestone .info h4 {
            font-size: 1.44444444em;
            line-height: 1.35em;
            font-weight: normal;
            margin-bottom: 0.69230769em;
            opacity: 0.7;
        }

        #milestone .info .icon {
            width: 6em;
            margin: 0 auto;
            height: 4.5em;
        }

            #milestone .info .icon img {
                width: auto;
                max-width: 100%;
                height: auto;
                object-fit: contain;
                display: block;
                margin: 0 auto;
            }

    #milestone .list {
        margin-bottom: 5.44444444em;
        height: 32.77777778em;
        display: flex;
        position: relative;
        background: url(../images/line.png) no-repeat center 6em;
        background-size: 99.09722222% auto;
    }

        #milestone .list .item {
            cursor: pointer;
            width: 6em;
            text-align: center;
            transform: translateY(-100%);
            position: absolute;
            transition: all 0.3s;
        }

            #milestone .list .item:nth-child(1) {
                left: 0;
                top: 100%;
            }

            #milestone .list .item:nth-child(2) {
                left: 17.70833333%;
                top: 80%;
            }

            #milestone .list .item:nth-child(3) {
                left: 36.45833333%;
                top: 75%;
            }

            #milestone .list .item:nth-child(4) {
                left: 55.90277778%;
                top: 53%;
            }

            #milestone .list .item:nth-child(5) {
                left: 75.69444444%;
                top: 47%;
            }

            #milestone .list .item:nth-child(6) {
                left: 92.36111111%;
                top: 25%;
            }

            #milestone .list .item:nth-child(7) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(8) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(9) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(10) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(11) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(12) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(13) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(14) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }

            #milestone .list .item:nth-child(15) {
                left: 110%;
                top: 25%;
                opacity: 0;
            }


        #milestone .list .no {
            filter: brightness(0.5);
        }

        #milestone .list .cur h4 {
            opacity: 1;
        }

    #milestone .text {
        width: 25em;
        position: absolute;
        right: 10%;
        bottom: 23.97959184%;
    }

        #milestone .text .item {
            display: none;
        }

        #milestone .text .title {
            font-size: 1.33333333em;
            color: #ffedba;
            font-weight: normal;
            line-height: 1.25em;
            margin-bottom: 0.41666667em;
        }

        #milestone .text .entry {
            font-size: 1.11111111em;
            line-height: 1.35em;
        }



/* 弹框 */
.Job-tank {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}

    .Job-tank .Juz {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Job-tank .back {
        position: relative;
        background: #fff;
        padding: 2em 1.5em;
        border-radius: 5px;
    }

    .Job-tank .title {
        margin-bottom: 1em;
        font-size: 1.5em;
        text-align: center;
    }

    .Job-tank .form-ke .item {
        display: flex;
        align-items: center;
        margin-bottom: 0.9em;
    }

        .Job-tank .form-ke .item .name {
            margin-right: .9em;
            font-size: .91em;
        }

        .Job-tank .form-ke .item .input-box {
            background: #f7f7f7;
            padding: .5em;
            border-radius: 5px;
            overflow: hidden;
        }

            .Job-tank .form-ke .item .input-box input {
                width: 400px;
                font-size: .9em;
            }

    .Job-tank .form-ke .but {
        margin-top: 2em;
        display: flex;
        justify-content: center;
    }

    .Job-tank .form-ke .submit {
        padding: .5em 3em;
        font-size: .9em;
        background: #d02b26;
        color: #fff;
        border-radius: 5px;
    }

    .Job-tank .form-ke .input-file {
        width: calc(100% - 3em);
        display: flex;
        justify-content: space-between;
        font-size: .9em;
        background: #f7f7f7;
        padding: .81em .5em;
        border-radius: 5px;
        overflow: hidden;
    }

    .Job-tank .form-ke .txt {
        width: 80%;
    }

    .Job-tank .form-ke .aniu {
        line-height: 1;
        width: 4em;
        text-align: center;
        position: relative;
        border-left: solid 1px #e8e8e8;
        cursor: pointer;
    }

        .Job-tank .form-ke .aniu .axt {
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

    .Job-tank .close {
        cursor: pointer;
        width: 2em;
        height: 2em;
        position: absolute;
        right: 0;
        top: 0;
        background: url(../images/close.png) center no-repeat;
    }




@media only screen and (max-width:1280px) {
    body {
        font-size: 12px;
    }
}

@media only screen and (max-width:1024px) {

    /*1024px*/
    #header .inner {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding: 1.16666667em 0;
    }

    /*1024px*/
    #logo {
        display: block;
        position: relative;
        z-index: 10;
    }

    /*1024px*/
    #button {
        display: block;
        width: 13em;
        position: static;
    }

    /*1024px*/
    #search .input {
        right: 0;
        transform: none;
        width: 100%;
    }

    /*navbtn*/
    #navbtn {
        position: relative;
        cursor: pointer;
        width: 1.25em;
        height: 1.08333333em;
        transition: all 0.3s;
        display: block;
        z-index: 10;
    }

    #navbtn:before, #navbtn:after, #navbtn i {
        width: 100%;
        height: 1px;
        background-color: #fff;
        display: block;
        position: absolute;
        left: 0;
        border-radius: 1px;
        transition: all 0.3s;
        content: '';
    }

    #navbtn:before {
        top: 0;
    }

    #navbtn:after {
        bottom: 0;
    }

    #navbtn i {
        top: 50%;
        transform: translateY(-50%);
    }

    #navbtn.active:before {
        transform: rotate(45deg);
        top: 49%;
    }

    #navbtn.active:after {
        transform: rotate(-45deg);
        bottom: auto;
        top: 49%;
    }

    #navbtn.active i {
        opacity: 0;
    }

    /*1024px*/
    #navi {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 9;
        left: 0;
        top: 0;
        display: none;
        line-height: 2em;
        font-size: 1em;
    }

        #navi .menu {
            position: fixed;
            right: 0;
            top: 66px;
            width: 80%;
            max-width: 300px;
            background-color: #fff;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: calc(100% - 66px);
            display: block;
            padding: 3.5vh;
            transform: translateX(100%);
            transition: transform 0.2s;
            box-shadow: 0px 0.05em 1.05em rgba(0,0,0,0.1);
            border-top-left-radius: 5px;
        }

        #navi.active .menu {
            transform: translateX(0);
        }

        #navi a {
            color: #333;
            padding: 0.5em 0;
        }

        #navi .parent {
            padding: 0;
            margin: 0;
        }

        #navi em {
            display: block;
            position: absolute;
            right: -3.5vh;
            width: 3em;
            height: 3em;
            z-index: 2;
            top: 0;
            cursor: pointer;
        }

            #navi em:after {
                width: 0.41666667em;
                height: 0.41666667em;
                border-right: 1px solid #333;
                border-bottom: 1px solid #333;
                content: '';
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: rotate(-45deg);
                background-color: transparent;
                margin: -0.33333333em 0 0 -0.41666667em;
                transition: all 0.3s;
            }

        #navi .on em:after {
            border-right-color: #d02b26;
            border-bottom-color: #d02b26;
            transform: rotate(45deg);
        }

        #navi .drop {
            position: static;
            transform: none;
            background-color: transparent;
            line-height: 2.2em;
            font-size: 1em;
            min-width: 0;
            text-align: left;
        }

            #navi .drop li {
                margin-left: 2em;
            }

            #navi .drop a {
                padding: 0.35em 0;
                color: #333;
            }

    /*1024px*/
    #hmabout .info {
        display: block;
    }

    #hmabout .text {
        width: auto;
        margin-bottom: 5%;
    }

    #hmabout .intro {
        margin-bottom: 5%;
    }

    #hmabout .image {
        width: auto;
    }

    /*1024px*/
    #milestone .pc, #milestone .year .swiper {
        display: none;
    }

    #milestone .wap {
        display: block;
        margin-bottom: 5%;
    }

    #milestone .year {
        margin-top: 5%;
    }

    #milestone .swiper-navigation {
        position: relative;
        margin-bottom: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        width: auto;
        justify-content: center;
    }

    #milestone .swiper-button-arrow {
        margin: 0 0.5em;
    }

    #milestone .text {
        position: static;
        margin: 0 auto;
        max-width: 100%;
        width: 50em;
    }

    #social .qr{ left:auto; right:0; transform:translateX(0);}
    #social .qr img{ max-width:.8rem;}
    #social .qr:after{ left:auto; right:.12rem; transform:translateX(0);}
}

@media only screen and (max-width:768px) {
    body {
        font-size: 3.64583333vw;
    }

    /*768px*/
    #banner {
        padding-bottom: 75%;
    }

        #banner .name {
            font-size: 0.75em;
        }

    /*768px*/
    #bottom {
        display: block;
    }

    /*768px*/
    #copyright {
        text-align: center;
    }

    /*768px*/
    #pagelist ul {
        justify-content: center;
    }

    /*768px*/
    #footer .inner {
        padding: 0.75em 0;
    }

    /*768px*/
    #site img {
        margin: 0 auto;
    }

    /*768px*/
    #btminfo {
        padding: 1.5em 0;
    }

    /*768px*/
    #info .tel {
        text-align: center;
    }

    /*768px*/
    .newsitem {
        padding: 7% 0;
    }

        .newsitem .figure {
            display: block;
            width: auto;
            margin-bottom: 5%;
        }

        .newsitem .text {
            display: block;
            padding-left: 0;
        }

        .newsitem a {
            display: block;
        }

    /*768px*/
    #pagenavi {
        padding: 7% 0;
    }

        #pagenavi a {
            min-width: 3em;
            height: 3em;
            line-height: 3em;
        }

        #pagenavi .a_prev {
            margin-right: 0.15625em;
        }

        #pagenavi .a_next {
            margin-left: 0.15625em;
        }

        #pagenavi span {
            margin: 0 0.7em;
        }

    /*768px*/
    #wrapper {
        padding: 7% 0 8%;
    }

    /*768px*/
    #newspost .navi {
        display: block;
        line-height: 2em;
    }

        #newspost .navi > div {
            max-width: none;
        }

    /*768px*/
    #result {
        padding: 7% 0;
    }

        #result .name, #result .input {
            margin-bottom: 3.5%;
        }

    /*768px*/
    .hgroup {
        font-size: 2.2em;
    }

        .hgroup .name {
            font-size: 0.7em;
        }

    /*768px*/
    #jobinfo {
        padding: 7% 0 6%;
    }

    /*768px*/
    .jobitem {
        padding: 7% 0;
    }

    /*768px*/
    .boxtitle .alias {
        font-size: 0.875em;
    }

    /*768px*/
    #msgform .label {
        float: none;
        height: auto;
        line-height: 2em;
    }

    #msgform .ml {
        margin-left: 0;
    }

    #msgform .column {
        display: block;
    }

        #msgform .column .item {
            width: auto;
        }

    /*768px*/
    .cooperate {
        padding: 8% 0 7%;
        line-height: 1.8;
    }

        .cooperate .info ul {
            display: block;
        }

        .cooperate .entry {
            line-height: 1.8;
        }

        .cooperate .info span {
            line-height: 2;
        }

        .cooperate .info li:nth-child(n+1) {
            width: auto;
        }

    /*768px*/
    #retail .item {
        width: 100%;
    }

    /*768px*/
    #ecommerce #bizinfo {
        padding: 7% 0 6%;
    }

    #ecommerce .info {
        padding: 5% 0;
    }

        #ecommerce .info .inner {
            display: block;
        }

    #ecommerce .image, #ecommerce .text {
        width: auto;
        display: block;
    }

    /*768px*/
    .livebox {
        padding: 8% 0;
    }

    /*768px*/
    .caseitem {
        padding: 7% 0;
    }

        .caseitem .figure {
            display: block;
            width: auto;
            margin-bottom: 5%;
        }

        .caseitem .text {
            display: block;
            padding: 0;
        }

        .caseitem .box {
            width: auto;
        }

        .caseitem .date {
            display: block;
            position: absolute;
            top: 0.71428571em;
            right: 0.71428571em;
            z-index: 2;
        }

        .caseitem a {
            display: block;
            position: relative;
        }

    /*768px*/
    .original .list {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: wrap;
        -moz-flex-flow: wrap;
        -ms-flex-flow: wrap;
        -o-flex-flow: wrap;
        flex-flow: wrap;
    }

        .original .list:hover .item,
        .original .list:hover .on {
            width: 100%;
        }

    .original .item {
        display: block;
        width: 100%;
    }

    .original .img {
        padding-bottom: 66.66666667%;
    }

        .original .img.pc-img {
            display: none;
        }

        .original .img.web-img {
            display: block;
        }

    /*768px*/
    .science .img {
        padding-bottom: 75%;
        background-position: 85% center;
    }

    .science .text i {
        padding-bottom: 15%;
    }

    /*768px*/
    .ipcontact {
        padding: 8% 0;
    }

    /*768px*/
    #chic .info {
        display: block;
    }

    #chic .item {
        display: block;
        width: auto;
    }

        #chic .item .image {
            width: auto;
            margin-left: 0;
            mask: none;
            -webkit-mask: none;
        }

        #chic .item .img {
            background-size: cover;
            padding-bottom: 70%;
        }

        #chic .item.disable, #chic .item.enable {
            width: auto;
        }

            #chic .item.disable .image, #chic .item.enable .image {
                width: auto;
                margin-left: 0;
            }

    /*768px*/
    #ipinfo .inner {
        padding: 7% 0;
    }

    #ipinfo .info {
        display: block;
    }

    #ipinfo .image {
        width: auto;
        margin-bottom: 5%;
    }

    #ipinfo .text {
        width: auto;
    }

    #ipinfo .company {
        letter-spacing: 0;
    }

    /*768px*/
    #ipcase .list {
        margin-bottom: 6%;
    }

    #ipcase .icon {
        width: 100%;
        padding: 15%;
    }

    #ipcase .image {
        width: 100%;
    }

    /*768px*/
    #ipgallery .image:after {
        display: none;
    }

    #ipgallery .swiper {
        border-radius: 0.55555556em;
    }

    #ipgallery .swiper-slide-active, #ipgallery .swiper-slide-duplicate-active {
        transform: scale(1);
    }

    #ipgallery .box {
        padding-top: 0;
    }

    /*768px*/
    #slides .img {
        padding-bottom: 100%;
    }

        #slides .img.pc-img {
            display: none;
        }

        #slides .img.web-img {
            display: block;
        }

    /*768px*/
    #hmabout {
        padding: 7% 0 8%;
    }

        #hmabout .title {
            font-size: 0.92857143em;
        }

    /*768px*/
    #hmbiz {
        padding: 7% 0 8%;
    }

        #hmbiz .hgroup {
            margin-bottom: 6%;
        }

        #hmbiz .list {
            padding-left: 0;
            padding-bottom: 0;
            margin-bottom: 6%;
            justify-content: center;
        }

        #hmbiz .intro {
            display: block;
        }

        #hmbiz .icon {
            width: 23.333%;
            margin-bottom: 10%;
        }

        #hmbiz .item {
            width: 80%;
            margin: 0 auto;
            margin-bottom: 5%;
        }

            #hmbiz .item a {
                margin-left: 0;
                padding: 10%;
                min-height: 0;
            }

    /*768px*/
    .istop {
        width: 100%;
        margin-bottom: 5%;
    }

    /*768px*/
    .islist {
        width: 100%;
    }

    /*768px*/
    #hmnews {
        padding: 7% 0 8%;
    }

        #hmnews .hgroup {
            margin-bottom: 5%;
        }

    /*768px*/
    #hmmatrix {
        padding: 8% 0;
    }

    /*768px*/
    #matriximage {
        padding: 0 3em;
    }

    /*768px*/
    #cobranding {
        padding: 8% 0;
    }

    /*768px*/
    #culture {
        padding: 7% 0 8%;
    }

        #culture .hgroup {
            margin-bottom: 6%;
        }

        #culture .list {
            padding-left: 0;
            padding-bottom: 0;
        }

        #culture .intro {
            display: block;
        }

        #culture .item {
            width: 100%;
        }

            #culture .item a {
                margin-left: 0;
                padding: 15%;
            }

    /*768px*/
    #profile {
        padding: 7% 0;
    }

        #profile .title {
            font-size: 1.28571429em;
        }

        #profile .sub {
            font-size: 1.2em;
        }

        #profile .swiper-slide {
            width: auto;
        }

    /*768px*/
    #ranked {
        padding: 7% 0 8%;
    }

        #ranked .hgroup {
            margin-bottom: 6%;
        }

        #ranked .entry {
            margin-bottom: 7%;
        }

    /*768px*/
    #service {
        padding: 8% 0;
    }

        #service .title {
            font-size: 1em;
        }

        #service .swiper-navigation {
            margin-top: 12%;
        }

    /*768px*/
    #honors {
        padding: 8% 0;
    }

        #honors .item {
            width: 100%;
            display: block;
            padding: 10%;
            min-height: 0;
        }

            #honors .item:nth-child(-n+2) {
                margin-top: 0.55555556em;
            }

            #honors .item:before, #honors .item:after {
                display: none;
            }

        #honors .year {
            width: auto;
            margin-bottom: 5%;
            text-align: left;
        }

            #honors .year:after {
                display: none;
            }

        #honors .intro {
            padding: 0;
            width: 100%;
        }

    /*768px*/
    #milestone {
        padding: 8% 0;
    }

        #milestone .hgroup {
            margin-bottom: 1em;
        }

        #milestone .wap {
            margin-bottom: 10%;
        }

        #milestone .year {
            margin-top: 10%;
        }

        #milestone .info .icon img {
            max-height: 100%;
        }
}

@media only screen and (max-width:640px) {
    /* 640 */
    #social .qr:after{ right:.2rem;}

    /* 640 */
    .hgroup .alias {
        font-size: .7em;
    }


    /* 640 */
    #honors .year {
        font-size: 2em;
    }

    /* 640 */
    .Job-tank .form-ke .item .input-box input {
        width: 220px;
    }
}