/***** RESET BROWSER STYLE *****/
/*******************************/

html {
    font-size: 20px;
    overflow-x: hidden;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent; /*背景透明*/
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline; /*文字和图片在垂直方向基线对齐*/
    line-height: 1.05rem;
    outline: none;
    list-style: none
}

.cl {
    clear: both
}

body {
    background: #272727;
    text-align: center;
    font-family: '微软雅黑', 'RobotoRegular', 'Helvetica Neue', Helvetica, sans-serif;
}

/*header*/
#header {
    background: #161616;
    height: 3.1rem;
    position: fixed;
    width: 100%;
    min-width: 60rem;
    z-index: 99;
    top: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.header_content {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    float: left;
    margin: auto;
    margin-right: 1rem;
    width: 6.2rem;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.logo_img {
    width: 100%;
    height: 1.8rem;
}

.nav {
    float: left;
    height: 100%;
    margin: auto;
    font-size: 0.7rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.nav ul li {
    float: left;
    margin-left: 1rem;
}

.nav ul li.navitem {
    height: 1.2rem;
}

.nav a {
    margin: 0;
    text-decoration: none;
    color: #fff
}

.nav a:hover {
    color: #D32E18;
    text-decoration: underline
}

a.point {
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    border-radius: 1rem;
    background: #f00;
    border: 0.1rem solid #f00;
    vertical-align: middle
}

.searchbar {
    position: absolute;
    right: 0.5rem;
    height: 1.5rem;
    width: 15rem;
    color: #5b5b5b;
    font-size: 0.6rem;
    top: 1rem
}

input[type="text"] {
    border: 0.05rem solid #5b5b5b;
    height: 0.9rem;
    width: 6.5rem;
    margin: 0 0.5rem;
    background: #363636;
    color: #ffffff
}

.searchbar img {
    vertical-align: middle;
    margin-right: 0.25rem
}

.lan_cn {
    cursor: pointer
}

.lan_en {
    cursor: pointer
}

.header_shadow {
    position: fixed;
    left: 0;
    top: 0.9rem;
    width: 100%;
    height: 3.95rem;
    z-index: 90;
}

.header_shadow img {
    margin: auto;
    width: 90%;
    height: 100%;
}

/*main*/
#main {
    padding-top: 4.75rem;
}

h1 {
    font-size: 1.1rem;
    color: #1f1f1f;
    margin-bottom: 0.1rem
}

h2 {
    font-size: 0.55rem;
    color: #1f1f1f;
    margin-bottom: 1.5rem;
}

.line {
    width: 10rem;
    height: 0.1rem;
    background: #1f1f1f;
    margin: auto
}

.letter {
    -webkit-animation-duration: 2s !important;
    animation-duration: 2s !important;
}

.letterdiv {
    cursor: pointer;
    box-shadow: 0 0.5rem 0.75rem 0 rgba(0, 0, 0, 0.5);
    position: relative;
    width: 55.45rem;
    margin: auto;
    height: 32.3rem
}

.letterdiv1 {
    cursor: pointer;
    position: relative;
    width: 55.45rem;
    margin: auto;
    height: 32.3rem
}

.letterimg {
    float: left;
    /*width: 55.45rem;*/
    width: 50%;
    height: 32.3rem;
}

.letterword {
    position: absolute;
    top: 5rem;
    width: 16.5rem;
    height: 4.5rem;
    z-index: 10;
    left: 19.5rem;
    cursor: pointer
}

.lettercontent {
    box-shadow: 0 0.5rem 0.75rem 0 rgba(0, 0, 0, 0.5);
    width: 28rem;
    height: auto;
    margin: auto;
    background: #f2f2f2;
    color: #000;
    font-size: 0.7rem;
    text-align: left;
    padding: 0.5rem 1.5rem 3.5rem 1.5rem;
    display: none;
}

.lettercontent img {
    margin-left: 11rem;
}

/*footer*/
#footer {
    color: #666;
    margin: 4rem 0 1.5rem 0;
    font-size: 0.55rem
}

/*service*/
.service {
    padding-top: 4.75rem;
    width: 62.8rem;
    margin: auto
}

.service li {
    float: left;
    width: 9rem;
    text-align: center;
    cursor: pointer;
}

.service li .me_sub {
    display: none;
    margin: 0;
    width: 9rem;
    background: url(../images/li_bg_b.png) no-repeat bottom center;
    background-size: 7.65rem 12rem;
    padding-bottom: 0.35rem;
}

.service li p {
    height: 1.75rem;
}

.service li p.sjtt {
    background: url(../images/li_bg_u.png) no-repeat top center;
    background-size: 7.65rem 0.85rem;
    height: 0.85rem;
}

.service li p.pointkind {
    margin: auto;
    width: 9rem;
    height: 2.15rem;
    display: block;
    font-weight: bold;
    padding-top: 3.25rem;
    background-position: top center;
    background-repeat: no-repeat;
    color: #d6d6d6;
    font-size: 0.9rem;
}

.service li p.pointkind span {
    display: block;
    color: #7f7f7f;
    font-size: 0.65rem;
}

p.pk1 {
    background: url(../images/lm_01.png);
    background-size: 7.65rem 6.15rem;
}

p.pk2 {
    background: url(../images/lm_02.png);
    background-size: 7.65rem 6.15rem;
}

p.pk3 {
    background: url(../images/lm_03.png);
    background-size: 7.65rem 6.15rem;
}

p.pk4 {
    background: url(../images/lm_04.png);
    background-size: 7.65rem 6.15rem;
}

p.pk5 {
    background: url(../images/lm_05.png);
    background-size: 7.65rem 6.15rem;
}

.service li a {
    margin: 0 1rem;
    display: block;
    width: 7.05rem;
    line-height: 1.3rem;
    text-decoration: none;
    font-size: 0.75rem;
    color: #ccc;
    font-weight: bold;
}

.service li a:hover {
    background: #d32e18;
}

.service h1 {
    height: 1.2rem;
    color: #727272;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0;
}

.service h2 {
    height: 0.6rem;
    color: #D32E18;
    font-size: 0.6rem;
    font-weight: normal;
    margin-top: 0.1rem;
    margin-bottom: 0;
}

.service .line {
    width: 11%;
    background: #727272;
    height: 0.05rem;
    margin-top: 0.1rem;
    opacity: 0.3;
}

.friend_img {
    margin-top: 1rem;
    /*width: 60rem;*/
    /*height: 45.25rem;*/
    width: 50rem;
    height: 37.71rem;
}

.service p.intro {
    width: 70%;
    margin-top: 1rem;
    margin-right: auto;
    margin-left: auto;
    color: #939393;
    font-size: 0.7rem;
    text-align: left;
    line-height: 1.1rem
}

.service .friends {
    width: 62.8rem;
    margin: -1rem auto;
}

.service .friends li {
    float: left;
    width: 7.8rem;
    height: 7.8rem;
    margin: 0 0.05rem 0.05rem 0;
    background: #252629;
}

.nextpage{
    position: absolute;
    height: 1.7rem;
    width: 1.7rem;
    bottom: 1rem;
    left: 48.9%;
}

.movedown{
    animation:movedown 0.6s infinite;
    -moz-animation:movedown 0.6s infinite; /* Firefox */
    -webkit-animation:movedown 0.6s infinite; /* Safari and Chrome */
    -o-animation:movedown 0.6s infinite; /* Opera */
}

@keyframes movedown
{
    from {bottom:2rem;}
    to {bottom:0;}

}

@-moz-keyframes movedown /* Firefox */
{
    from {bottom:2rem;}
    to {bottom:0;}
}

@-webkit-keyframes movedown /* Safari and Chrome */
{
    from {bottom:2rem;}
    to {bottom:0;}
}

@-o-keyframes movedown /* Opera */
{
    from {bottom:2rem;}
    to {bottom:0;}
}

/*内容区*/
#sccontainer {
    min-width: 49rem
}

section {
    min-height: 32.5rem;
    background: repeat-x center center /* fixed*/;
    background-size: cover;
    overflow: hidden
}

section .wp {
    position: absolute;
    height: 100%;
    margin: auto;
    width: 48rem;
    text-align: center
}

/*内容移动特效*/
.con_01 {
    position: absolute;
    top: 2.5rem;
    animation: con01 1s;
    -moz-animation: con01 1s; /* Firefox */
    -webkit-animation: con01 1s; /* Safari 和 Chrome */
    -o-animation: con01 1s; /* Opera */
    animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
}

@keyframes con01 {
    from {
        opacity: 0;
        top: -35rem;
        width: 5rem
    }
    to {
        opacity: 0.9;
        top: 2.5rem;
        width: 49rem
    }
}

@-moz-keyframes con01 /* Firefox */
{
    from {
        opacity: 0;
        top: -35rem;
        width: 5rem
    }
    to {
        opacity: 0.9;
        top: 2.5rem;
        width: 49rem
    }
}

@-webkit-keyframes con01 /* Safari 和 Chrome */
{
    from {
        opacity: 0;
        top: -35rem;
        width: 5rem
    }
    to {
        opacity: 0.9;
        top: 2.5rem;
        width: 49rem
    }
}

@-o-keyframes con01 /* Opera */
{
    from {
        opacity: 0;
        top: -35rem;
        width: 5rem
    }
    to {
        opacity: 0.9;
        top: 2.5rem;
        width: 49rem
    }
}

/*contactus*/
#contactus {
    padding-top: 7.25rem;
    width: 40rem;
    margin: auto;
    text-align: left;
    color: #E8E8E8;
    font-size: 0.6rem;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

#contactus p {
    margin: 0.5rem 0;
    line-height: 1.4rem;
    text-align: left
}

#contactus ul {
    /*width: 40rem;*/
    margin: auto
}

#contactus li {
    float: left;
    margin: 0.5rem;
    text-align: center
}

#contactus li img {
    margin: auto;
    margin-bottom: 1rem
}

.btn {
    background: none repeat scroll 0 0 #333;
    border: 0.05rem solid #555;
    color: #999;
    cursor: pointer;
    font-size: 0.8em;
    height: 1.8rem;
    margin: 0 auto;
    text-align: center;
    width: 7.5rem;
}

/*work*/
#work {
    padding-top: 6.25rem;
    width: 55rem;
    margin: auto;
}

.media {
    background: none;
    border: #444 solid 0.05rem;
    border-radius: 0.03rem;
    box-shadow: 0 0 0.35rem 0 rgba(10, 10, 10, 0.8);
    /*background:url(../images/bg_media.png) no-repeat center ;*/
    width: 47.5rem;
    height: 33.45rem;
    margin: auto;
    overflow: hidden;
    text-align: center;
    color: #777777;
    margin-bottom: 4rem
}

.mediainner {
    background: #000;
    margin: 1.5rem;
    height: 25.6rem
}

.mediatextcn {
    font-size: 0.8rem
}

.mediatexten {
    font-size: 0.6rem
}

.pagination {
    padding: 1rem
}

.pageper {
    height: 0.75rem;
    line-height: 0.75rem;
    text-align: center;
    border: 0.05rem solid #555;
    background: #333;
    cursor: pointer;
    color: #999;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease-in-out 0s;
    text-decoration: none;
    margin: 0.15rem;
    font-size: 0.5rem
}

.curpage {
    background: #aaa;
    color: #000
}

.pageper:hover {
    background: #aaa;
    text-decoration: underline;
    color: #000
}

/*gallery*/
#gallery {
    width: 89.5%;
    margin: auto
}

#gallerysmall {
    margin-top: 5rem;
    margin-bottom: 4rem;
}

#gallerysmall .pic_cup {
    margin: 0.1rem;
    box-shadow: 0.1rem 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.9);
    /*height: 19.15rem;*/
    /*width: 13.6rem;*/
    /*height: 5.505625rem;*/
    /*width: 3.91rem;*/
    height: 7.865rem;
    width: 5.5857rem;
    border: 0.05rem solid #BC9969;
    float: left;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}

#gallerysmall .pic_cup:hover {
    border: 0.05rem solid #FF7F00;
}

#gallerysmall .pic_cup img {
    height: 100%;
}

/*team*/
#teamdiv {
    width: 60rem;
    margin: auto;
}

#teamtras {
    margin-top: 5rem;
}

#teamtras ul {
    width: 3.35rem;
    margin: auto;
}

#teamtras ul li {
    float: left;
    cursor: pointer
}

#teamtras p {
    width: 6rem;
    background: #111111;
    height: 0.05rem;
    margin: 0;
    padding: 0;
    margin: auto;
    display: block
}

#team {
    position: relative
}

#team1 {
    position: relative;
    display: none;
}

#fallcontainer {
    margin-top: 1.5rem;
}

#fallcontainer li {
    float: left;
    margin: 0 0 1.5rem 0;
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
    padding: 0
}

#fallcontainer li img {
    width: 18.5rem;
    height: auto
}

.nextpage {
}

.nextpage a {
    text-decoration: none;
    display: block;
    color: #999;
    font-size: 0.6rem;
    background: #333333;
    height: 2rem;
    border: 0.05rem solid #444444;
    -moz-border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    border-radius: 0.25rem;
    text-align: center;
    line-height: 2rem
}

.nextpage a:hover {
    background: #444444;
    color: #222
}

.boxcon {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%
}

.boxcover {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: none;
    transition: all 0.3s ease-in-out 0s;
    color: rgba(255, 255, 255, 0);
    font-size: 0.6rem;
}

.boxcover:hover {
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
}

.boxcover .words {
    position: absolute;
    width: 100%;
    bottom: 1.5rem;
    text-align: center;
}

#backtotop {
    position: fixed;
    z-index: 10;
    width: 4rem;
    height: 4rem;
    border-radius: 4rem;
    display: block;
    line-height: 4rem;
    font-weight: bold;
    right: 1.5rem;
    bottom: 1.5rem;
    font-size: 0.7rem;
    font-weight: solid;
    box-shadow: 0.25rem 0.25rem 0.35rem 0 rgba(0, 0, 0, 0.3);
    background: #333;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer
}

#backtotop:hover {
    background: #ccc;
    color: #333
}

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/

.controldiv {
    top: 0;
    width: 5%;
    min-width: 1rem;
    max-width: 2.5rem;
    height: 40rem;
    cursor: pointer
}

.prevdiv {
    left: 0;
    float: left;
    background: url(../images/prev.png) no-repeat center;
}

.prevdiv:hover {
    background: url(../images/prev.png) no-repeat center center rgba(255, 255, 255, 0.3)
}

.nextdiv {
    right: 0;
    float: right;
    background: url(../images/next.png) no-repeat center
}

.nextdiv:hover {
    background: url(../images/next.png) no-repeat center center rgba(255, 255, 255, 0.3)
}

.container {
    min-height: 100%;
}

[v-cloak] {
    display: none;
}

.lettercontent_img {
    width: 6rem;
    height: 5.3rem;
}

.trans_img {
    width: 1.5rem;
    height: 1.7rem;
}

.logo_img_1 {
    width: 7.65rem;
    height: 4.1rem;
}

.logo_friend {
    width: 7.8rem;
    height: 7.8rem;
}

.contact_img {
    width: 4rem;
    height: 4rem;
}

.contact_line {
    width: 0.05rem;
    height: 15rem;
    vertical-align: bottom
}

.lan_en {
    width: 1.2rem;
    height: 1.2rem;
}

.lan_cn {
    width: 1.2rem;
    height: 1.2rem;
}

#pageenter {
    width: 1.5rem;
    height: 1.1rem;
    vertical-align: middle;
    margin: 0 0.15rem 0 1rem;
    background: #666;
    font-size: 0.7rem
}

.wf_item {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0.25rem
}

.wf_div {
    width: 92%;
    margin: auto
}

.wf_item1 {
    position: relative;
    margin-top: 0.5rem
}

.wf_img {
    width: 100%;
    height: 100%
}

.item-move {
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
    -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1)
}

.wf_text {
    background-color: #000000;
    opacity: 0.7;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    display: none;
}

.wf_text p {
    width: 100%;
    position: absolute;
    bottom: 1.5rem;
    text-align: center;
    font-size: 0.6rem;
    color: #ffffff;
}

#md {
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10.25rem;
    font-size: 0.7rem;
    color: #E8E8E8;
    display: none;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.md-row {
    width: 20rem;
    height: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.md-row-1 {
    width: 20rem;
    height: 7.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.md-row-2 {
    width: 20rem;
    height: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.md-text {
    width: 12%;
    height: 100%;
    line-height: 2rem;
    float: left;
}

.md-text-1 {
    width: 12%;
    height: 100%;
    line-height: 8rem;
    float: left;
}

.md-input {
    width: 88%;
    height: 100%;
    float: left
}

.md-input input {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0.05rem;
    border-color: rgb(169, 169, 169);
}

.md-input textarea {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0.05rem;
    background: #363636;
    color: #ffffff;
}

.md-row-button {
    margin-left: 12%;
    width: 88%;
    height: 100%;
}

.md-button {
    width: 30%;
    height: 100%;
    background: #363636;
    border: 0.05rem solid #999999;
    color: #E8E8E8;
    cursor: pointer;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.msg-button {
    width: 6.5rem;
    height: 1.6rem;
    background: #363636;
    border: 0.05rem solid #999999;
    color: #E8E8E8;
    cursor: pointer;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

#team-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .8);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#team-overlay-box {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#team-overlay-box img {
    width: auto;
    height: 100%;
}

.team-overlay-button {
    position: fixed;
    border: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    display: block;
    line-height: 2rem;
    font-weight: bold;
    font-size: 1.5rem;
    box-shadow: 0.25rem 0.25rem 0.35rem 0 rgba(0, 0, 0, 0.3);
    background: #333;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    color: #ccc
}

.team-overlay-button:hover {
    background: #ccc;
    color: #333
}

.team-overlay-close {
    right: 0;
    top: 0;
}

.team-overlay-last {
    width: 4rem;
    height: 4rem;
    border-radius: 4rem;
    line-height: 4rem;
    font-size: 3rem;
    left: 0;
    top: 45%;
}

.team-overlay-next {
    width: 4rem;
    height: 4rem;
    border-radius: 4rem;
    line-height: 4rem;
    font-size: 3rem;
    right: 0;
    top: 45%;
}