/*!

    common css style

    define the wrap of header/footer/page

*/





/*!

	common css style

	define html body

*/





/*! normalize.css v3.0.0 | MIT License | git.io/normalize */





/*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section,

summary {

    display: block

}



audio,

canvas,

progress,

video {

    display: inline-block;

    vertical-align: baseline

}



audio:not([controls]) {

    display: none;

    height: 0

}



[hidden],

template {

    display: none

}





/*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */



html {

    font-family: sans-serif;

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%

}



body {

    margin: 0

}





/*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */



a {

    background: transparent

}



a:active,

a:hover {

    outline: 0

}





/*! normalize.css v3.0.0 | Typography | MIT License | git.io/normalize */



abbr[title] {

    border-bottom: 1px dotted

}



b,

strong {

    font-weight: bold

}



dfn {

    font-style: italic

}



h1 {

    font-size: 2em;

    margin: 0.67em 0

}



mark {

    background: #ff0;

    color: #000

}



small {

    font-size: 80%

}



sub,

sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline

}



sup {

    top: -0.5em

}



sub {

    bottom: -0.25em

}





/*! normalize.css v3.0.0 | Embedded Content | MIT License | git.io/normalize */



img {

    border: 0

}



svg:not(:root) {

    overflow: hidden

}





/*! normalize.css v3.0.0 | Figures | MIT License | git.io/normalize */



figure {

    margin: 1em 40px

}



hr {

    -moz-box-sizing: content-box;

    box-sizing: content-box;

    height: 0

}



pre {

    overflow: auto

}



code,

kbd,

pre,

samp {

    font-family: monospace, monospace;

    font-size: 1em

}





/*! normalize.css v3.0.0 | Forms | MIT License | git.io/normalize */



button,

input,

optgroup,

select,

textarea {

    color: inherit;

    font: inherit;

    margin: 0

}



button {

    overflow: visible

}



button,

select {

    text-transform: none

}



button,

html input[type="button"],

input[type="reset"],

input[type="submit"] {

    -webkit-appearance: button;

    cursor: pointer

}



button[disabled],

html input[disabled] {

    cursor: default

}



button::-moz-focus-inner,

input::-moz-focus-inner {

    border: 0;

    padding: 0

}



input {

    line-height: normal

}



input[type="checkbox"],

input[type="radio"] {

    box-sizing: border-box;

    padding: 0

}



input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

    height: auto

}



input[type="search"] {

    -webkit-appearance: textfield;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box

}



input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

    -webkit-appearance: none

}



fieldset {

    border: 1px solid #c0c0c0;

    margin: 0 2px;

    padding: 0.35em 0.625em 0.75em

}



legend {

    border: 0;

    padding: 0

}



textarea {

    overflow: auto

}



optgroup {

    font-weight: bold

}





/*! normalize.css v3.0.0 | Tables | MIT License | git.io/normalize */



table {

    border-collapse: collapse;

    border-spacing: 0

}



td,

th {

    padding: 0

}



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,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

    margin: 0;

    padding: 0;

    border: 0;

    font: inherit;

    font-size: 100%;

    vertical-align: baseline

}



html {

    line-height: 1

}



ol,

ul {

    list-style: none

}



table {

    border-collapse: collapse;

    border-spacing: 0

}



caption,

th,

td {

    text-align: left;

    font-weight: normal;

    vertical-align: middle

}



q,

blockquote {

    quotes: none

}



q:before,

q:after,

blockquote:before,

blockquote:after {

    content: "";

    content: none

}



a img {

    border: none

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

    display: block

}



html {

    box-sizing: border-box

}



*,

*:before,

*:after {

    box-sizing: inherit

}



html {

    font-size: 10px;

    -webkit-tap-highlight-color: transparent;

    width: 100%;

    height: 100%

}



body {

    width: 100%;

    height: 100%;

    font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 1.4rem;

    color: #333;

    background-color: #f9fbfb

}



a {

    text-decoration: none;

    cursor: pointer

}



ol,

ul,

dl {

    margin-top: 0;

    margin-bottom: 1rem

}



ol ol,

ul ul,

ol ul,

ul ol {

    margin-bottom: 0

}



a:link {

    text-decoration: none

}



a:visited {

    text-decoration: none

}



a:active {

    text-decoration: none

}



.nav a {

    text-decoration: none;

    outline: none;

    -moz-border-radius: .4rem;

    -webkit-border-radius: .4rem;

    border-radius: .4rem

}



.nav .logo {

    position: relative;

    float: left;

    top: 14px;

    background: url(../images/bannerlogow.png) no-repeat;

    width: 92px;

    height: 30px;

    margin-right: 76px

}





.nav .logo h1 {

    text-indent: -119988px;

    overflow: hidden;

    text-align: left

}



.nav .logo {

    position: relative;

    float: left;

    /*top: 22px;*/

    width: 110px;

    height: 36px;

    background-size: 110px 36px;

    transition: all .8s ease-in-out 0s;

    border-radius: 0px;

    margin-right: 26px !important;

}



.header-item {

    position: relative;

    float: left;

    color: #140808;

    line-height: 60px;

    text-align: center;

    font-size: 16px;

    margin-right: 26px;

    width: 80px;

    overflow: hidden;

    white-space: nowrap;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    cursor: pointer;

    transition: all .8s ease-in-out 0s

}


.header-item{
    font-size: 16px !important;
}


.header-item {

    font-weight: 500;
    font-size: 16px;

    line-height: 80px;

    width: auto;

    margin-right: 30px;

    color: white;

    transition: line-height .6s ease-in-out 0s;

    -moz-transition: all .6s ease-out 0s;

    -webkit-transition: all .6s ease-out 0s;

    -o-transition: all .6s ease-out 0s;

}









.login-item {

    color: #f69452;

    font-weight: 500;

    margin-right: 26px

}



#shelper {

    overflow: hidden;

    position: absolute;

    left: 0;

    text-indent: 8px;

    z-index: 999;

    display: none;

    font-size: 1.4rem;

    background-color: #fff;

    min-width: 250px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    #shelper {

        min-width: 490px

    }

}



@media screen and (min-width: 1500px) {

    #shelper {

        min-width: 570px

    }

}



#banner-search #shelper {

    overflow: hidden;

    position: absolute;

    left: 0;

    text-indent: 8px;

    text-align: left;

    z-index: 999;

    display: none;

    font-size: 1.4rem;

    background: rgba(255, 255, 255, 0) none repeat scroll 0 0 !important;

    filter: Alpha(opacity=0);

    background: #fff;

    -moz-opacity: 0;

    -khtml-opacity: 0;

    color: #ccc;

    width: 536px

}



.shelper-lucency {

    border-left: 1px solid #e6e6e6;

    border-right: 1px solid #e6e6e6;

    border-bottom: 1px solid #e6e6e6;

    color: #666;

    -moz-box-shadow: 1px 1px 3px #ededed;

    -webkit-box-shadow: 1px 1px 3px #ededed;

    box-shadow: 1px 1px 3px #ededed

}



#banner-search .shelper-lucency {

    border-left: 1px solid #e6e6e6;

    border-right: 1px solid #e6e6e6;

    border-bottom: 1px solid #e6e6e6;

    color: #666;

    -moz-box-shadow: 0 0 0 #e6e6e6;

    -webkit-box-shadow: 0 0 0 #e6e6e6;

    box-shadow: 0 0 0 #e6e6e6

}



.shelper-opacity {

    border-left: 1px solid rgba(173, 173, 173, 0.8);

    border-right: 1px solid rgba(173, 173, 173, 0.8);

    border-bottom: 1px solid rgba(173, 173, 173, 0.8);

    background-color: #fff;

    color: #666

}



#shelper li {

    padding: 0;

    line-height: 22px;

    cursor: pointer;

    width: 100%;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden

}



#shelper .on {

    background: #f0f0f0

}



#banner-search #shelper .on {

    background: #fff

}



.video-content {

    position: relative;

    width: 100%;

    height: 100%

}



.video-content>.video-row {

    margin: 0 auto 30px;

    width: 960px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .video-content>.video-row {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .video-content>.video-row {

        width: 1464px

    }

}



.video-row:last-child {

    margin: 0 auto

}



.video-row>.video-card {

    display: inline-block;

    padding: 0;

    margin: 0;

    margin-right: 22px;

    border: solid 1px #d9d9de;

    overflow: hidden;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px

}



.video-row>.video-card:hover {

    border: solid 1px #b8b8b8

}



.video-col-3 {

    width: 303.33333px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .video-col-3 {

        width: 387.33333px

    }

}



@media screen and (min-width: 1500px) {

    .video-col-3 {

        width: 471.33333px

    }

}



.video-col-4 {

    width: 221.5px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .video-col-4 {

        width: 284.5px

    }

}



@media screen and (min-width: 1500px) {

    .video-col-4 {

        width: 347.5px

    }

}



.video-card:last-child {

    margin-right: 0

}



.video-card .img-card-4 {

    width: 222.5px;

    height: 125.15625px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .video-card .img-card-4 {

        width: 285.5px;

        height: 160.59375px

    }

}



@media screen and (min-width: 1500px) {

    .video-card .img-card-4 {

        width: 348.5px;

        height: 196.03125px

    }

}



.video-card .img-card-3 {

    width: 304.33333px;

    height: 171.1875px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .video-card .img-card-3 {

        width: 388.33333px;

        height: 218.4375px

    }

}



@media screen and (min-width: 1500px) {

    .video-card .img-card-3 {

        width: 472.33333px;

        height: 265.6875px

    }

}



.video-card .video-desc-section {

    width: 94%;

    padding-top: 20px;

    margin: auto

}



.video-card .video-desc-section h3 {

    color: #333;

    line-height: 12px;

    white-space: nowrap;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    font-size: 1.2rem;

    margin-bottom: 12px

}



.video-card .video-desc-section h3:hover {

    color: #FE5453

}



.video-card .video-desc-section .video-tags {

    width: 100%;

    height: 56px;

    color: #999;

    font-size: 1.2rem;

    font-weight: normal;

    line-height: 16px;

    overflow: hidden

}



.video-card .video-price-section {

    width: 94%;

    margin: auto

}



.video-card .video-price-section a {

    text-decoration: none;

    color: #666;

    font-size: 1.2rem;

    margin-left: 4px

}



.video-card .video-price-section a:hover {

    color: #333

}



.video-card .video-price {

    margin-bottom: 12px

}



.video-card .video-price h2 {

    display: inline-block;

    position: relative;

    color: #FE5453;

    font-size: 1.6rem;

    line-height: 16px

}



.video-card .video-price h3 {

    display: inline-block;

    position: relative;

    color: #666;

    font-size: 1.2rem;

    line-height: 16px;

    text-decoration: line-through;

    float: right

}



.prompt-word {

    margin: 0 auto;

    margin-top: 30px;

    width: 960px;

    text-align: center;

    font-size: 2rem;

    color: #666;

    line-height: 2rem

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .prompt-word {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .prompt-word {

        width: 1464px

    }

}



.prompt-level-word {

    margin: auto;

    margin-top: 60px;

    margin-bottom: 20px;

    width: 960px;

    text-align: center;

    font-size: 1.6rem;

    color: #666;

    line-height: 1.6rem

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .prompt-level-word {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .prompt-level-word {

        width: 1464px

    }

}



.prompt-level-word a {

    color: #FE5453;

    font-weight: 600

}



.btn {

    display: inline-block;

    font-weight: normal;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    touch-action: manipulation;

    cursor: pointer;

    user-select: none;

    border: .0625rem solid transparent;

    padding: 1.375rem 2rem;

    font-size: 1.2rem;

    line-height: 1rem;

    -moz-border-radius: .4rem;

    -webkit-border-radius: .4rem;

    border-radius: .4rem;

    -moz-transition: all .1s ease-in-out;

    -o-transition: all .1s ease-in-out;

    -webkit-transition: all .1s ease-in-out;

    transition: all .1s ease-in-out

}



.btn:focus,

.btn.focus,

.btn:active:focus,

.btn:active.focus,

.btn.active:focus,

.btn.active.focus {

    outline: thin dotted;

    outline: 5px auto -webkit-focus-ring-color;

    outline-offset: -2px

}



.btn:focus,

.btn:hover {

    text-decoration: none

}



.btn.focus {

    text-decoration: none

}



.btn:active,

.btn.active {

    background-image: none;

    outline: 0;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn.disabled,

.btn:disabled,

fieldset[disabled] .btn {

    cursor: not-allowed;

    opacity: .65;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none

}



a.btn.disaabled,

fieldset[disabled] a.btn {

    pointer-events: none

}



.btn-primary {

    color: #fff;

    background-color: #FE5453;

    border-color: #fe2220

}



.btn-primary:focus,

.btn-primary.focus,

.btn-primary:active,

.btn-primary.active,

.open>.btn-primary.dropdown-toggle {

    color: #fff;

    background-color: #fe0807;

    border-color: #e00301

}



.btn-primary:hover {

    color: #fff;

    background-color: #fe0807;

    border-color: #e00301

}



.btn-primary:active,

.btn-primary.active,

.open>.btn-primary.dropdown-toggle {

    background-image: none;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn-primary.disabled:focus,

.btn-primary.disabled.focus,

.btn-primary:disabled:focus,

.btn-primary:disabled.focus,

fieldset[disabled] .btn-primary:focus,

fieldset[disabled] .btn-primary.focus {

    background-color: #FE5453;

    border-color: #fe2220

}



.btn-primary.disabled:hover,

.btn-primary:disabled:hover,

fieldset[disabled] .btn-primary:hover {

    background-color: #FE5453;

    border-color: #fe2220

}



.btn-secondary {

    color: #333;

    background-color: #fff;

    border-color: #ccc

}



.btn-secondary:focus,

.btn-secondary.focus,

.btn-secondary:active,

.btn-secondary.active,

.open>.btn-secondary.dropdown-toggle {

    color: #333;

    background-color: #d9d9d9;

    border-color: #adadad

}



.btn-secondary:hover {

    color: #333;

    background-color: #d9d9d9;

    border-color: #adadad

}



.btn-secondary:active,

.btn-secondary.active,

.open>.btn-secondary.dropdown-toggle {

    background-image: none;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn-secondary.disabled:focus,

.btn-secondary.disabled.focus,

.btn-secondary:disabled:focus,

.btn-secondary:disabled.focus,

fieldset[disabled] .btn-secondary:focus,

fieldset[disabled] .btn-secondary.focus {

    background-color: #fff;

    border-color: #ccc

}



.btn-secondary.disabled:hover,

.btn-secondary:disabled:hover,

fieldset[disabled] .btn-secondary:hover {

    background-color: #fff;

    border-color: #ccc

}



.btn-info {

    color: #fff;

    background-color: #5bc0de;

    border-color: #5bc0de

}



.btn-info:focus,

.btn-info.focus,

.btn-info:active,

.btn-info.active,

.open>.btn-info.dropdown-toggle {

    color: #fff;

    background-color: #28a1c5;

    border-color: #2aabd2

}



.btn-info:hover {

    color: #fff;

    background-color: #28a1c5;

    border-color: #2aabd2

}



.btn-info:active,

.btn-info.active,

.open>.btn-info.dropdown-toggle {

    background-image: none;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn-info.disabled:focus,

.btn-info.disabled.focus,

.btn-info:disabled:focus,

.btn-info:disabled.focus,

fieldset[disabled] .btn-info:focus,

fieldset[disabled] .btn-info.focus {

    background-color: #5bc0de;

    border-color: #5bc0de

}



.btn-info.disabled:hover,

.btn-info:disabled:hover,

fieldset[disabled] .btn-info:hover {

    background-color: #5bc0de;

    border-color: #5bc0de

}



.btn-success {

    color: #fff;

    background-color: #5cb85c;

    border-color: #5cb85c

}



.btn-success:focus,

.btn-success.focus,

.btn-success:active,

.btn-success.active,

.open>.btn-success.dropdown-toggle {

    color: #fff;

    background-color: #3d8b3d;

    border-color: #419641

}



.btn-success:hover {

    color: #fff;

    background-color: #3d8b3d;

    border-color: #419641

}



.btn-success:active,

.btn-success.active,

.open>.btn-success.dropdown-toggle {

    background-image: none;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn-success.disabled:focus,

.btn-success.disabled.focus,

.btn-success:disabled:focus,

.btn-success:disabled.focus,

fieldset[disabled] .btn-success:focus,

fieldset[disabled] .btn-success.focus {

    background-color: #5cb85c;

    border-color: #5cb85c

}



.btn-success.disabled:hover,

.btn-success:disabled:hover,

fieldset[disabled] .btn-success:hover {

    background-color: #5cb85c;

    border-color: #5cb85c

}



.btn-warning {

    color: #fff;

    background-color: #f0ad4e;

    border-color: #f0ad4e

}



.btn-warning:focus,

.btn-warning.focus,

.btn-warning:active,

.btn-warning.active,

.open>.btn-warning.dropdown-toggle {

    color: #fff;

    background-color: #df8a13;

    border-color: #eb9316

}



.btn-warning:hover {

    color: #fff;

    background-color: #df8a13;

    border-color: #eb9316

}



.btn-warning:active,

.btn-warning.active,

.open>.btn-warning.dropdown-toggle {

    background-image: none;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn-warning.disabled:focus,

.btn-warning.disabled.focus,

.btn-warning:disabled:focus,

.btn-warning:disabled.focus,

fieldset[disabled] .btn-warning:focus,

fieldset[disabled] .btn-warning.focus {

    background-color: #f0ad4e;

    border-color: #f0ad4e

}



.btn-warning.disabled:hover,

.btn-warning:disabled:hover,

fieldset[disabled] .btn-warning:hover {

    background-color: #f0ad4e;

    border-color: #f0ad4e

}



.btn-danger {

    color: #fff;

    background-color: #d9534f;

    border-color: #d9534f

}



.btn-danger:focus,

.btn-danger.focus,

.btn-danger:active,

.btn-danger.active,

.open>.btn-danger.dropdown-toggle {

    color: #fff;

    background-color: #b52b27;

    border-color: #c12e2a

}



.btn-danger:hover {

    color: #fff;

    background-color: #b52b27;

    border-color: #c12e2a

}



.btn-danger:active,

.btn-danger.active,

.open>.btn-danger.dropdown-toggle {

    background-image: none;

    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)

}



.btn-danger.disabled:focus,

.btn-danger.disabled.focus,

.btn-danger:disabled:focus,

.btn-danger:disabled.focus,

fieldset[disabled] .btn-danger:focus,

fieldset[disabled] .btn-danger.focus {

    background-color: #d9534f;

    border-color: #d9534f

}



.btn-danger.disabled:hover,

.btn-danger:disabled:hover,

fieldset[disabled] .btn-danger:hover {

    background-color: #d9534f;

    border-color: #d9534f

}



.btn-primary-outline {

    color: #FE5453;

    background-image: none;

    background-color: transparent;

    border-color: #FE5453

}



.btn-primary-outline:focus,

.btn-primary-outline.focus,

.btn-primary-outline:active,

.btn-primary-outline.active,

.open>.btn-primary-outline.dropdown-toggle {

    color: #fff;

    background-color: #FE5453;

    border-color: #FE5453

}



.btn-primary-outline:hover {

    color: #fff;

    background-color: #FE5453;

    border-color: #FE5453

}



.btn-primary-outline.disabled:focus,

.btn-primary-outline.disabled.focus,

.btn-primary-outline:disabled:focus,

.btn-primary-outline:disabled.focus,

fieldset[disabled] .btn-primary-outline:focus,

fieldset[disabled] .btn-primary-outline.focus {

    border-color: #ffb9b8

}



.btn-primary-outline.disabled:hover,

.btn-primary-outline:disabled:hover,

fieldset[disabled] .btn-primary-outline:hover {

    border-color: #ffb9b8

}



.btn-secondary-outline {

    color: #ccc;

    background-image: none;

    background-color: transparent;

    border-color: #ccc

}



.btn-secondary-outline:focus,

.btn-secondary-outline.focus,

.btn-secondary-outline:active,

.btn-secondary-outline.active,

.open>.btn-secondary-outline.dropdown-toggle {

    color: #fff;

    background-color: #ccc;

    border-color: #ccc

}



.btn-secondary-outline:hover {

    color: #fff;

    background-color: #ccc;

    border-color: #ccc

}



.btn-secondary-outline.disabled:focus,

.btn-secondary-outline.disabled.focus,

.btn-secondary-outline:disabled:focus,

.btn-secondary-outline:disabled.focus,

fieldset[disabled] .btn-secondary-outline:focus,

fieldset[disabled] .btn-secondary-outline.focus {

    border-color: #fff

}



.btn-secondary-outline.disabled:hover,

.btn-secondary-outline:disabled:hover,

fieldset[disabled] .btn-secondary-outline:hover {

    border-color: #fff

}



.btn-info-outline {

    color: #5bc0de;

    background-image: none;

    background-color: transparent;

    border-color: #5bc0de

}



.btn-info-outline:focus,

.btn-info-outline.focus,

.btn-info-outline:active,

.btn-info-outline.active,

.open>.btn-info-outline.dropdown-toggle {

    color: #fff;

    background-color: #5bc0de;

    border-color: #5bc0de

}



.btn-info-outline:hover {

    color: #fff;

    background-color: #5bc0de;

    border-color: #5bc0de

}



.btn-info-outline.disabled:focus,

.btn-info-outline.disabled.focus,

.btn-info-outline:disabled:focus,

.btn-info-outline:disabled.focus,

fieldset[disabled] .btn-info-outline:focus,

fieldset[disabled] .btn-info-outline.focus {

    border-color: #b0e1ef

}



.btn-info-outline.disabled:hover,

.btn-info-outline:disabled:hover,

fieldset[disabled] .btn-info-outline:hover {

    border-color: #b0e1ef

}



.btn-success-outline {

    color: #5cb85c;

    background-image: none;

    background-color: transparent;

    border-color: #5cb85c

}



.btn-success-outline:focus,

.btn-success-outline.focus,

.btn-success-outline:active,

.btn-success-outline.active,

.open>.btn-success-outline.dropdown-toggle {

    color: #fff;

    background-color: #5cb85c;

    border-color: #5cb85c

}



.btn-success-outline:hover {

    color: #fff;

    background-color: #5cb85c;

    border-color: #5cb85c

}



.btn-success-outline.disabled:focus,

.btn-success-outline.disabled.focus,

.btn-success-outline:disabled:focus,

.btn-success-outline:disabled.focus,

fieldset[disabled] .btn-success-outline:focus,

fieldset[disabled] .btn-success-outline.focus {

    border-color: #a3d7a3

}



.btn-success-outline.disabled:hover,

.btn-success-outline:disabled:hover,

fieldset[disabled] .btn-success-outline:hover {

    border-color: #a3d7a3

}



.btn-warning-outline {

    color: #f0ad4e;

    background-image: none;

    background-color: transparent;

    border-color: #f0ad4e

}



.btn-warning-outline:focus,

.btn-warning-outline.focus,

.btn-warning-outline:active,

.btn-warning-outline.active,

.open>.btn-warning-outline.dropdown-toggle {

    color: #fff;

    background-color: #f0ad4e;

    border-color: #f0ad4e

}



.btn-warning-outline:hover {

    color: #fff;

    background-color: #f0ad4e;

    border-color: #f0ad4e

}



.btn-warning-outline.disabled:focus,

.btn-warning-outline.disabled.focus,

.btn-warning-outline:disabled:focus,

.btn-warning-outline:disabled.focus,

fieldset[disabled] .btn-warning-outline:focus,

fieldset[disabled] .btn-warning-outline.focus {

    border-color: #f8d9ac

}



.btn-warning-outline.disabled:hover,

.btn-warning-outline:disabled:hover,

fieldset[disabled] .btn-warning-outline:hover {

    border-color: #f8d9ac

}



.btn-danger-outline {

    color: #d9534f;

    background-image: none;

    background-color: transparent;

    border-color: #d9534f

}



.btn-danger-outline:focus,

.btn-danger-outline.focus,

.btn-danger-outline:active,

.btn-danger-outline.active,

.open>.btn-danger-outline.dropdown-toggle {

    color: #fff;

    background-color: #d9534f;

    border-color: #d9534f

}



.btn-danger-outline:hover {

    color: #fff;

    background-color: #d9534f;

    border-color: #d9534f

}



.btn-danger-outline.disabled:focus,

.btn-danger-outline.disabled.focus,

.btn-danger-outline:disabled:focus,

.btn-danger-outline:disabled.focus,

fieldset[disabled] .btn-danger-outline:focus,

fieldset[disabled] .btn-danger-outline.focus {

    border-color: #eba5a3

}



.btn-danger-outline.disabled:hover,

.btn-danger-outline:disabled:hover,

fieldset[disabled] .btn-danger-outline:hover {

    border-color: #eba5a3

}



input[type="submit"].btn-block,

input[type="reset"].btn-block,

input[type="button"].btn-block {

    width: 100%

}



.btn-red-common {

    width: 140px;

    height: 35px;

    background-color: #FE5453;

    border-color: #fff;

    border-radius: 5px;

    border: none;

    color: #fff;

    font-size: 1.4rem

}



.btn-red-common:hover {

    background-color: #666;

    color: #fff;

    cursor: pointer

}



.btn-gray-common {

    width: 140px;

    height: 35px;

    background-color: #666;

    border-color: #fff;

    border-radius: 4px;

    border: none;

    color: #fff;

    font-size: 1.4rem;

    text-align: center

}



.btn-gray-common:hover {

    background-color: #999;

    color: #fff;

    cursor: pointer

}



.btn-c-r {

    cursor: pointer;

    background: #FE5453

}



.btn-c-r:hover {

    background-color: #fe2220 !important;

    color: #fff !important

}



.btn-c-g {

    cursor: pointer;

    background: #999

}



.btn-c-g:hover {

    background-color: gray !important;

    color: #fff !important

}



body {

    font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

    font-weight: 500

}



.page {

    background: #FDFFFF !important

}



a:focus,

a:hover {

    text-decoration: none !important;

    outline: none !important

}



a {

    outline: none !important

}



.header {

    position: fixed;

    left: 0;

    right: 0;

    top: 0;

    height: 60px;

    z-index: 9998;

    background: #f9fbfb;

    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px;

    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px;

    box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px

}



.header>.menu-bar {

    position: absolute;

    height: 100%;

    left: 0;

    right: 0;

    margin: 0 auto;

    width: 960px !important

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .header>.menu-bar {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .header>.menu-bar {

        width: 1300px !important

    }

}



.menu-bar>.left-part {

    position: relative;

    float: left;

    left: 0

}



.menu-bar>.left-part a:last-child {

    margin-right: 0

}



.menu-bar>.middle-part {

    position: relative;

    float: left;

    left: 30px;

    right: 20px;

    top: 14px

}



.menu-bar>.middle-part input {

    min-width: 250px;

    height: 32px;

    font-size: 1.2rem !important;

    padding: 0 10px;

    border: 1px solid rgba(217, 217, 222, 0.9);

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    background-color: rgba(248, 248, 245, 0.2)

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .menu-bar>.middle-part input {

        min-width: 490px

    }

}



@media screen and (min-width: 1500px) {

    .menu-bar>.middle-part input {

        min-width: 570px

    }

}



.menu-bar>.middle-part input:focus,

.menu-bar>.middle-part input:hover {

    border: 1px solid #d9d9e0;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    background-color: rgba(241, 241, 237, 0.3)

}



.menu-bar>.right-part {

    position: absolute;

    right: 0

}



.menu-bar>.right-part:hover .warnWindom {

    opacity: 1

}



.menu-bar>.right-part a:last-child {

    margin-right: 0

}



.right-part img {

    height: 30px;

    width: 30px;

    border-radius: 90px;

    vertical-align: middle !important

}



.page {

    position: relative;

    top: 60px;

    background: #f9fbfb

}



.footer {

    position: relative;

    width: 100%;

    top: 60px

}



.footer .footer-desc-wrap {

    position: relative;

    width: 100%;

    height: 285px;

    background: #FFEEEF

}



.footer-desc-wrap .footer-desc {

    width: 960px;

    text-align: center;

    margin: 0 auto;

    padding-top: 60px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .footer-desc-wrap .footer-desc {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .footer-desc-wrap .footer-desc {

        width: 1464px

    }

}



.footer-desc-wrap .footer-desc h2 {

    font-size: 2.6rem;

    color: #333;

    line-height: 2.6rem;

    margin-bottom: 26px

}



.footer-desc-wrap .footer-desc p {

    font-size: 1.6rem;

    color: #666;

    height: 24px;

    line-height: 24px

}



.footer-desc-wrap .footer-desc .known-btn {

    margin-top: 22px

}



.footer-desc-wrap .footer-desc .known-btn a {

    display: block;

    text-decoration: none;

    color: #fff

}



.footer-desc-wrap .footer-desc .known-btn a:hover,

.footer-desc-wrap .footer-desc .known-btn a:visited {

    color: #fff

}



.footer-wrap {

    position: relative;

    width: 100%;

    height: 330px;

    background: #140808

}



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

    .footer-wrap {

        height: 344px

    }

}



.footer-wrap .footer-content {

    width: 960px;

    height: 294px;

    margin: 0 auto;

    border-bottom: solid 1px #d9d9de

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .footer-wrap .footer-content {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .footer-wrap .footer-content {

        width: 1464px

    }

}



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

    .footer-wrap .footer-content {

        height: 308px

    }

}



.footer-content .footer-column {

    display: inline-block;

    vertical-align: top;

    width: 156px;

    margin-top: 60px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .footer-content .footer-column {

        width: 198px

    }

}



@media screen and (min-width: 1500px) {

    .footer-content .footer-column {

        width: 240px

    }

}



.footer-content .footer-column .title {

    font-size: 1.4rem;

    font-weight: normal;

    line-height: 1.4rem;

    color: #fff;

    margin-bottom: 20px

}



.footer-content .footer-column .top-margin {

    margin-top: 40px

}



.footer-content .footer-column a {

    display: block;

    text-decoration: none;

    color: #dedede;

    font-size: 1.2rem;

    line-height: 1.4rem;

    margin-bottom: 10px

}



.footer-content .footer-column .mark-icon {

    width: 120px;

    height: 120px

}



.footer-content .footer-column h3 {

    display: inline-block

}



.footer-content .footer-column h4 {

    margin: 5px auto;

    text-indent: 2.2rem;

    font-size: 1.2rem;

    line-height: 1.2rem;

    color: #dedede

}



.footer-content .footer-column .qq-icon {

    display: inline-block;

    width: 16px;

    height: 16px;

    vertical-align: bottom;

    margin-right: 6px

}



.footer-content .footer-column .tel-icon {

    display: inline-block;

    width: 16px;

    height: 16px;

    vertical-align: middle;

    margin-right: 6px

}



.footer-content .footer-column .mail-icon {

    display: inline-block;

    width: 16px;

    height: 16px;

    vertical-align: middle;

    margin-right: 6px

}



.footer-content .footer-column .mailClient {

    margin-bottom: 12px

}



.footer-content .footer-notice {

    margin: 20px auto

}



.footer-content .footer-notice h2 {

    font-size: 1.4rem;

    font-weight: normal;

    line-height: 1.4rem;

    margin-bottom: 10px;

    color: #c8c8c8

}



.footer-content .footer-notice p {

    font-size: 1.2rem;

    line-height: 1.2rem;

    margin: 5px auto;

    color: #bbb

}



.footer-wrap .footer-box {

    width: 960px;

    height: 36px;

    margin: 0 auto;

    text-align: center;

    color: #dedede;

    line-height: 36px;

    font-size: 1.2rem

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .footer-wrap .footer-box {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .footer-wrap .footer-box {

        width: 1464px

    }

}



.footer-wrap .footer-box a {

    text-decoration: none;

    color: #dedede;

    font-size: 1.2rem

}



.toolbar {

    position: fixed;

    right: 0px;

    bottom: 50px

}



.toolbar-item {

    display: block;

    width: 52px;

    height: 52px;

    margin-top: 1px;

    position: relative;

    -moz-transition: background-position 1s;

    -ms-transition: background-position 1s;

    -o-moz-transition: background-position 1s;

    -webkit-moz-transition: background-position 1s;

    transition: background-position 1s

}



.modal-open {

    overflow: hidden

}



.modal {

    display: none;

    overflow: hidden;

    position: fixed;

    top: 50%;

    margin-top: -212px;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1050;

    -webkit-overflow-scrolling: touch;

    outline: 0

}



.modal.fade .modal-dialog {

    -webkit-transform: translate(0, -25%);

    -ms-transform: translate(0, -25%);

    -o-transform: translate(0, -25%);

    transform: translate(0, -25%);

    -webkit-transition: -webkit-transform 0.3s ease-out;

    -o-transition: -o-transform 0.3s ease-out;

    transition: transform 0.3s ease-out

}



.modal.in .modal-dialog {

    -webkit-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    -o-transform: translate(0, 0);

    transform: translate(0, 0)

}



.modal-open .modal {

    overflow-x: hidden;

    overflow-y: auto

}



.modal-dialog {

    position: relative;

    width: auto;

    margin: 10px

}



.modal-content {

    position: relative;

    background-color: #fff;

    border: 1px solid #999;

    border: 1px solid rgba(0, 0, 0, 0.2);

    border-radius: 6px;

    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    outline: 0

}



.modal-backdrop {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1040;

    background-color: #000

}



.modal-backdrop.fade {

    opacity: 0;

    filter: alpha(opacity=0)

}



.modal-backdrop.in {

    opacity: .8;

    filter: alpha(opacity=80)

}



.modal-header {

    padding: 15px;

    border-bottom: 1px solid #e5e5e5;

    min-height: 16.42857px

}



.modal-header .close {

    margin-top: -2px

}



.modal-title {

    margin: 0;

    line-height: 1.42857

}



.modal-body {

    position: relative;

    padding: 15px

}



.modal-footer {

    padding: 15px;

    text-align: right;

    border-top: 1px solid #e5e5e5

}



.modal-footer .btn+.btn {

    margin-left: 5px;

    margin-bottom: 0

}



.modal-footer .btn-group .btn+.btn {

    margin-left: -1px

}



.modal-footer .btn-block+.btn-block {

    margin-left: 0

}



.modal-scrollbar-measure {

    position: absolute;

    top: -9999px;

    width: 50px;

    height: 50px;

    overflow: scroll

}



@media (min-width: 768px) {

    .modal-dialog {

        width: 600px;

        margin: 50px auto

    }

    .modal-content {

        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)

    }

    .modal-sm {

        width: 300px

    }

}



@media (min-width: 992px) {

    .modal-lg {

        width: 900px

    }

}



.clearfix:before,

.clearfix:after,

.modal-footer:before,

.modal-footer:after {

    content: " ";

    display: table

}



.clearfix:after,

.modal-footer:after {

    clear: both

}



.center-block {

    display: block;

    margin-left: auto;

    margin-right: auto

}



.pull-right {

    float: right !important

}



.pull-left {

    float: left !important

}



.hide {

    display: none !important

}



.show {

    display: block !important

}



.invisible {

    visibility: hidden

}



.text-hide {

    font: 0/0 a;

    color: transparent;

    text-shadow: none;

    background-color: transparent;

    border: 0

}



.hidden {

    display: none !important

}



.affix {

    position: fixed

}



.modal-body .modal-icon {

    position: relative;

    float: right;

    right: -36px;

    top: -34px;

    width: 40px;

    height: 40px;

    cursor: pointer

}



.modal-body dl {

    text-align: center

}



.modal-body dl dt:first-child {

    margin: 40px auto;

    color: #666;

    font-size: 36px;

    font-weight: 600

}



.modal-body dl dd:nth-child(2) {

    margin: 30px auto;

    font-size: 1.8rem

}



.modal-body dl dd:nth-child(2) input {

    display: inline-block;

    text-indent: 10px;

    width: 240px;

    height: 48px;

    border: solid 1px #666;

    color: #666

}



.modal-body dl dd:nth-child(2) .call-btn {

    display: inline-block;

    vertical-align: top;

    line-height: 48px;

    margin-left: -6px;

    width: 118px;

    height: 48px;

    background-color: #FE5453;

    color: #ffffff

}



.modal-body dl dd:nth-child(2) .call-btn .call-icon {

    display: inline-block;

    vertical-align: middle;

    line-height: 34px;

    width: 14px;

    height: 14px

}



.modal-body dl dd:nth-child(2) .modal-message {

    display: block;

    height: 30px;

    line-height: 30px;

    color: #FE5453;

    font-size: 1.6rem;

    font-weight: normal

}



.modal-body dl dt:nth-child(3) {

    margin-top: 30px;

    margin-bottom: 15px

}



.modal-body dl dt:nth-child(3) .model-qq-icon {

    width: 42px;

    height: 42px;

    margin: 0 auto

}



.modal-body dl dd:last-child {

    color: #666;

    margin-bottom: 40px;

    font-size: 1.8rem

}



.warn {

    width: 16px;

    height: 16px;

    border-radius: 120px;

    background: #FE5453;

    color: white;

    text-align: center;

    line-height: 18px;

    position: absolute;

    top: 41px;

    left: 17px

}



.warnWindom {

    width: 80px;

    height: 30px;

    border: 1px solid #ccc;

    position: absolute;

    background: white;

    color: #333;

    border-radius: 5px;

    line-height: 30px;

    padding-right: 0px;

    margin-top: 77px;

    text-align: inherit;

    padding-left: 20px;

    opacity: 0

}



.warnWindom .divImg {

    position: absolute;

    top: -17px;

    left: 37px;

    width: 25px;

    height: 25px;

    background: url("../images/upjiao_1.png") no-repeat;

    background-size: 25px 25px

}



@CHARSET "UTF-8";

.header {

    position: fixed;

    left: 0;

    right: 0;

    top: 0;

    height: 60px;

    z-index: 9998;

    background: transparent;

    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px;

    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px;

    box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px;

    height: 80px;

    transition: all .8s ease-in-out 0s;

    box-shadow: none

}



.login-item {

    color: white !important;

    font-weight: 500;

    max-width: 100px;

    white-space: nowrap;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .login-item {

        max-width: 120px

    }

}



@media screen and (min-width: 1500px) {

    .login-item {

        max-width: 180px

    }

}



.headerMove .login-item {

    color: #FE5453 !important;

    font-weight: 500

}



.headerMove .warn {

    width: 16px;

    height: 16px;

    border-radius: 120px;

    background: #FE5453;

    color: white;

    text-align: center;

    line-height: 18px;

    position: absolute;

    top: 33px;

    left: 17px

}



.headerMove {

    height: 60px !important;

    background: white;

    -moz-box-shadow: 10px 10px 5px #cccccc;

    box-shadow: 0px 0px 10px #cccccc

}



.headerMove .header-item {

    line-height: 60px !important;

    color: black;

    font-weight: 500

}



.headerMove .header-item:hover {

    color: #FE5453 !important

}



.headerMove .header-item:hover .showVideo {

    background-position: 0px -15px !important

}



.headerMove .header-item span {

    bottom: 10px

}



.headerMove .showVideo {

    width: 15px;

    height: 15px;

    background: url(../images/showvideob_1.png) no-repeat 0 0px !important;

    position: absolute;

    top: 23px !important;

    left: 75px !important

}



.headerMove .tele-h-svg {

    transition: all .8s ease-in-out 0s;

    position: relative;

    top: 22px !important;

    width: 145px;

    height: 60px;

    background: url(../images/bannerphoner_1.svg) no-repeat !important

}



.headerMove .nav .logo {

    background: url(../images/bannerlogor.png) no-repeat

}



.foot3 {

    background: black;

    height: 440px;

    position: relative;

    border-top: 1px solid white;

    font-weight: 500

}



.foot3 .title a {

    cursor: default !important

}



.foot3 a:hover {

    color: white

}



.foot3 a:visited {

    color: white

}



.foot3 a:link {

    color: white

}



.foot3 a {

    color: white

}



.foot3 .footContent {

    width: 960px !important;

    margin: 0 auto;

    padding-top: 60px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .foot3 .footContent {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .foot3 .footContent {

        width: 1300px !important

    }

}



.foot3 .footContent .contentBottom {

    text-align: center;

    color: white;

    padding-top: 30px

}



.foot3 .footContent .contentBottom div {

    font-size: 1.2rem

}



.foot3 .footContent .contentBottom div:first-child {

    font-size: 1.6rem !important;

    margin-bottom: 16px

}



.foot3 .footContent .contentBottom div:nth-child(3) {

    margin-top: 5px

}



.foot3 .footContent .contentBottom div:last-child {

    margin-top: 20px

}



.foot3 .footContent .contentTop {

    font-size: 0;

    padding-bottom: 55px;

    border-bottom: 1px solid #666

}



.foot3 .footContent .contentTop .codeWidth {

    width: 140px !important

}



@media screen and (min-width: 1276px) {

    .foot3 .footContent .contentTop .codeWidth {

        width: 200px !important

    }

}



.foot3 .footContent .contentTop .commonWidth {

    width: 110px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .foot3 .footContent .contentTop .commonWidth {

        width: 144px !important

    }

}



@media screen and (min-width: 1500px) {

    .foot3 .footContent .contentTop .commonWidth {

        width: 184px !important

    }

}



.foot3 .footContent .contentTop .onLineWidth {

    width: 220px !important

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .foot3 .footContent .contentTop .onLineWidth {

        width: 196px !important

    }

}



@media screen and (min-width: 1500px) {

    .foot3 .footContent .contentTop .onLineWidth {

        width: 296px !important

    }

}



.foot3 .footContent .contentTop .topItem {

    display: inline-block;

    color: white;

    font-size: 1.2rem;

    vertical-align: top

}



.foot3 .footContent .contentTop .topItem .Twocode {

    width: 110px;

    height: 110px;

    background: url(../images/pai.png) no-repeat !important;

    margin-bottom: 10px

}



.foot3 .footContent .contentTop .topItem .smWord {

    font-size: 1.2rem;

    color: white

}



.foot3 .footContent .contentTop .topItem .title {

    font-size: 1.6rem !important;

    margin-bottom: 30px

}



.foot3 .footContent .contentTop .topItem .noiconItem {

    height: 12px;

    margin-bottom: 11px

}



.foot3 .footContent .contentTop .topItem .noiconItem:hover a {

    color: #FE5453

}



.foot3 .footContent .contentTop .topItem .noiconItem a {

    position: relative;

    top: -2px

}



.foot3 .footContent .contentTop .topItem .iconItem {

    height: 12px;

    padding-left: 14px;

    margin-bottom: 11px;

    padding-top: 1px

}



.foot3 .footContent .contentTop .topItem .iconItem:hover a {

    color: #FE5453

}



.foot3 .footContent .contentTop .topItem .iconItem a {

    position: relative;

    top: -2px;

    left: 8px

}



.foot3 .footContent .contentTop .topItem .iconItem:hover {

    background-position-y: -12px

}



.foot3 .footContent .contentTop .topItem .cusLogin {

    background: url(../images/cuslogin_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .proLogin {

    background: url(../images/prologin_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .manLogin {

    background: url(../images/manlogin_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .reg {

    background: url(../images/reg.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .cusSer {

    background: url(../images/cusser_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .proSer {

    background: url(../images/proser_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .email {

    background: url(../images/email.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .tel {

    font-size: 34px !important;

    position: relative;

    top: -10px;

    background: black

}



.foot3 .footContent .contentTop .topItem .tel a {

    color: #FE5453 !important

}



.foot3 .footContent .contentTop .topItem .workTime {

    position: relative;

    top: -3px

}



.foot3 .footContent .contentTop .topItem .workTime a {

    cursor: none

}



.proSer {

    position: relative

}



.proSer:hover .showCodeToPro {

    display: block !important

}



.proSer .showCodeToPro {

    display: none;

    position: absolute;

    background: white;

    top: -240px;

    left: 0px;

    text-align: center;

    width: 270px;

    height: 312px;

    background: url(../images/footcodebackground_1.png);

    top: -315px;

    left: -30px;

    z-index: 99

}



.proSer .showCodeToPro img {

    display: block;

    width: 180px;

    margin-top: 40px;

    margin-left: 45px;

    margin-bottom: 10px

}



.proSer .showCodeToPro span {

    color: #FE5453;

    font-size: 1.4rem;

    margin-top: 30px;

    margin-bottom: 10px

}



.cusSer {

    position: relative

}



.cusSer:hover .showCodeToPro {

    display: block !important

}



.cusSer .showCodeToPro {

    display: none;

    position: absolute;

    width: 270px;

    height: 312px;

    background: url(../images/footcodebackground_1.png);

    top: -315px;

    left: -30px;

    text-align: center;

    z-index: 99

}



.cusSer .showCodeToPro img {

    display: block;

    width: 180px;

    margin-top: 40px;

    margin-left: 45px;

    margin-bottom: 10px

}



.cusSer .showCodeToPro span {

    color: #FE5453;

    font-size: 1.4rem;

    margin-top: 30px;

    margin-bottom: 10px

}



.openVideo {

    background: black;

    text-align: center;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0px;

    overflow: hidden;

    z-index: 99;

    background: transparent

}



.openVideo .videoClose {

    position: absolute;

    height: 24px;

    width: 24px;

    z-index: 15;

    right: -486px;

    top: -10px;

    background: url(../images/close_2.png) no-repeat;

    cursor: pointer

}



.openVideo .videoClose:hover {

    background-position-y: -24px

}



.openVideo .openVideoCommon {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0px;

    background: black;

    opacity: 0.8;

    z-index: 10

}



.openVideo video {

    position: fixed;

    z-index: 12;

    width: 960px;

    height: 544px;

    -moz-transition: perspective(1000px) rotatex(-61deg);

    -webkit-transition: perspective(1000px) rotatex(-61deg);

    -o-transition: perspective(1000px) rotatex(-61deg);

    transform: perspective(1000px) rotatex(-61deg);

    transition: transform .3s linear, opacity .3s linear;

    -moz-transition: transform .3s linear, opacity .3s linear;

    -webkit-transition: transform .3s linear, opacity .3s linear;

    -o-transition: transform .3s linear, opacity .3s linear;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

    border: 5px solid rgba(255, 255, 255, 0.3);

    border-radius: 6px;

    opacity: 0

}



.openVideo #videoRoata {

    position: fixed;

    z-index: 12;

    width: 960px;

    height: 540px;

    top: 50%;

    left: 50%;

    margin-top: -270px;

    margin-left: -960px

}



.openVideo .active {

    -moz-transition: rotateX(0);

    -webkit-transition: rotateX(0);

    -o-transition: rotateX(0);

    transform: rotateX(0);

    opacity: 1

}



.comOrder {

    position: fixed;

    z-index: 120;

    top: 0px;

    height: 100%;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.5)

}



.cOrder {

    position: relative;

    width: 400px;

    bottom: -300px;

    top: 50%;

    margin-top: -200px;

    left: 50%;

    margin-left: -190px;

    border: 1px solid #999;

    border-radius: 4px;

    padding: 50px 50px 50px 50px;

    background: white

}



.cOrder .cOrderTitle {

    color: #FE5453;

    font-size: 1.6rem;

    margin-bottom: 20px;

    text-align: center

}



.cOrder .cCloseBtn {

    width: 24px;

    height: 24px;

    position: absolute;

    top: -12px;

    right: -12px;

    background: #f0f2f5 !important;

    border: 1px solid #d1d1d1;

    border-radius: 90px

}



.cOrder .cCloseBtn div {

    width: 12px;

    height: 12px;

    background: url(../images/close_2.png) no-repeat;

    position: relative;

    top: 5px !important;

    left: 5px !important

}



.cOrder .cCloseBtn div:hover {

    background-position-y: -12px

}



.cOrder .cOrderItem {

    position: relative;

    margin-bottom: 20px

}



.cOrder .cOrderItem input {

    height: 35px;

    border: 1px solid #999 !important;

    border-radius: 4px;

    color: #666;

    font-size: 1.4rem;

    outline: none;

    padding-right: 110px;

    padding-left: 10px;

    width: 100%

}



.cOrder .cOrderItem input:focus {

    border: 1px solid #999

}



.cOrder .cOrderItem div {

    height: 35px;

    width: 106px;

    background: #FE5453;

    color: white;

    font-size: 1.4rem;

    border-top-right-radius: 4px;

    border-bottom-right-radius: 4px;

    text-align: center;

    position: absolute;

    right: 0px;

    top: 0px;

    line-height: 35px;

    cursor: pointer

}



.cOrder .cOrderItem div:active {

    background: #ea0301

}



.cOrder .cOrderItem::after {

    content: attr(data-content);

    position: absolute;

    color: #FE5453;

    font-size: 1.2rem;

    top: 36px;

    right: 0px;

    bottom: 0px;

    left: 15px

}



.cOrder .cOrderBtn {

    height: 35px;

    color: white;

    font-size: 1.4rem;

    line-height: 35px;

    background: #FE5453;

    margin-bottom: 12px;

    text-align: center;

    border-radius: 4px;

    cursor: pointer

}



.cOrder .cOrderBtn:active {

    background: #ea0301

}



.cOrder .cOrderBotTitle {

    color: #999;

    font-size: 1.2rem

}



.dropdown-toggle {

    padding: 6px 12px

}



.dropdowns .dropdown-menu {

    left: 0px !important

}



.dropdowns {

    width: 100% !important;

    height: 35px !important;

    display: inline-block !important;

    border: none !important;

    background: transparent !important;

    position: relative !important

}



.dropdowns div {

    background: transparent !important

}



.dropdowns div:hover {

    background: transparent !important

}



.dropdowns span {

    color: #666;

    font-size: 1.4rem;

    position: absolute;

    left: 11px;

    bottom: -1px

}



.dropdowns .dropdown-menus {

    width: 100% !important;

    top: 29px;

    border-top-left-radius: 0px;

    border-top-right-radius: 0px;

    padding: 0px;

    margin: 0px;

    left: 0px !important

}



.dropdowns .dropdown-menus li {

    width: 100% !important;

    padding-left: 13px !important;

    color: #333;

    cursor: pointer;

    text-align: left

}



.dropdowns .dropdown-menus li:hover {

    background: #f0f2f5 !important

}



.dropdowns .carets {

    height: 15px !important;

    width: 15px !important;

    background: url("../images/selecticon_1.png") no-repeat !important;

    position: absolute !important;

    right: 20px !important;

    top: 10px !important

}



.dropdowns .carets:hover {

    background: url("../images/selecticon_1.png") no-repeat !important

}



.dropdowns .dropdown-toggle {

    color: #666;

    font-size: 1.4rem;

    width: 100% !important;

    height: 35px !important;

    background: white !important;

    text-align: left;

    padding-left: 20px;

    border: 1px solid #999 !important;

    outline: none !important

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 1000;

    display: none;

    float: left;

    min-width: 160px;

    padding: 5px 0;

    margin: 2px 0 0;

    font-size: 14px;

    text-align: left;

    list-style: none;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ccc;

    border: 1px solid rgba(0, 0, 0, 0.15);

    border-radius: 4px;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)

}



.showSuccess {

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    position: fixed;

    top: 0px;

    left: 0px;

    z-index: 230

}



.showSuccess .cCloseBtn {

    width: 24px;

    height: 24px;

    position: absolute;

    top: -12px;

    right: -12px;

    background: #f0f2f5;

    border-radius: 90px;

    border: 1px solid #d1d1d1

}



.showSuccess .cCloseBtn div {

    width: 12px;

    height: 12px;

    background: url(../images/close_2.png) no-repeat;

    position: relative;

    top: 5px;

    left: 5px

}



.showSuccess .cCloseBtn div:hover {

    background-position-y: -12px

}



.successModal {

    position: relative;

    background: white;

    width: 402px;

    height: 286px;

    padding-top: 65px;

    border-radius: 6px;

    top: 50%;

    left: 50%;

    margin-top: -143px;

    margin-left: -201px;

    z-index: 101

}



.successWord {

    color: #333;

    font-size: 1.4rem;

    text-align: center;

    margin-bottom: 10px;

    cursor: pointer;

    border-bottom: 1px solid #FE5453;

    width: 80px;

    margin: 0 auto;

    line-height: 25px;

    color: #FE5453;

    margin-bottom: 10px

}



.successInfo {

    color: #999;

    font-size: 1.2rem;

    text-align: center

}



.successInfo span:nth-child(1) {

    color: #FE5453;

    margin-right: 16px;

    cursor: pointer

}



.show-zero2 {

    -webkit-animation: showZeroAlert 0.3s;

    animation: showZeroAlert 0.3s

}



.zeromodal-icon {

    width: 80px;

    height: 80px;

    border: 4px solid #808080;

    border-radius: 50%;

    margin: 16px auto 16px;

    margin-top: 16px;

    padding: 0;

    position: relative;

    box-sizing: content-box;

    cursor: default;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



.zeromodal-icon.zeromodal-success {

    border-color: #a5dc86

}



.zeromodal-icon.zeromodal-success .line {

    height: 5px;

    background-color: #a5dc86;

    display: block;

    border-radius: 2px;

    position: absolute;

    z-index: 2

}



.zeromodal-icon.zeromodal-success .line.tip {

    width: 25px;

    left: 14px;

    top: 46px;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg)

}



.zeromodal-icon.zeromodal-success .line.long {

    width: 47px;

    right: 8px;

    top: 38px;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg)

}



.zeromodal-icon.zeromodal-success .placeholder {

    width: 80px;

    height: 80px;

    border: 4px solid rgba(165, 220, 134, 0.2);

    border-radius: 50%;

    box-sizing: content-box;

    position: absolute;

    left: -4px;

    top: -4px;

    z-index: 2

}



@-webkit-keyframes showZeroAlert {

    0% {

        -webkit-transform: scale(0.7);

        transform: scale(0.7)

    }

    45% {

        -webkit-transform: scale(1.05);

        transform: scale(1.05)

    }

    80% {

        -webkit-transform: scale(0.95);

        transform: scale(0.95)

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}



@keyframes showZeroAlert {

    0% {

        -webkit-transform: scale(0.7);

        transform: scale(0.7)

    }

    45% {

        -webkit-transform: scale(1.05);

        transform: scale(1.05)

    }

    80% {

        -webkit-transform: scale(0.95);

        transform: scale(0.95)

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}



.errorLCommon {

    border: 1px solid #FE5453 !important

}



.errorLCommon:focus {

    border-color: #FE5453

}



.right-part:hover .showInfo {

    display: block !important

}



.showInfo {

    width: 180px;

    background: white;

    border-radius: 4px;

    color: #666;

    position: absolute;

    top: 60px;

    display: none;

    left: -70px

}



.showInfo .showInfoList {

    margin: 0px;

    padding: 0px 0px 10px 0px

}



.showInfo .showInfoList a,

.showInfo .showInfoList a:hover {

    color: #666

}



.showInfo .showInfoList li {

    padding-left: 75px;

    height: 36px;

    line-height: 36px;

    position: relative

}



.showInfo .showInfoList li:hover {

    background: #f0f2f5

}



.showInfo .showInfoList .showName {

    height: 41px;

    border-bottom: 1px solid #eee;

    line-height: 40px;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    padding: 0px;

    margin-bottom: 10px

}



.showInfo .showInfoList .toSet:before {

    content: '';

    position: absolute;

    background: url(../images/toinfo_1.png);

    width: 14px;

    height: 14px;

    top: 11px;

    left: 50px

}



.showInfo .showInfoList .toSafe:before {

    content: '';

    position: absolute;

    background: url(../images/tosafe_1.png);

    width: 14px;

    height: 14px;

    top: 11px;

    left: 50px

}



.showInfo .showInfoList .toList:before {

    content: '';

    position: absolute;

    background: url(../images/toinfo_1.png);

    width: 14px;

    height: 14px;

    top: 11px;

    left: 50px

}



.showInfo .showInfoList .toMy:before {

    content: '';

    position: absolute;

    background: url(../images/tomypro_1.png);

    width: 14px;

    height: 14px;

    top: 11px;

    left: 50px

}



.showInfo .showInfoList .loginOut:before {

    content: '';

    position: absolute;

    background: url(../images/loginout_1.png);

    width: 14px;

    height: 14px;

    top: 11px;

    left: 50px

}



.widthHear {

    width: 60px;

    text-align: left

}



.flexVideo {

    position: absolute;

    width: 100%;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

    min-width: 960px;

    min-height: 320px

}



.flexVideo section {

    position: relative;

    overflow: hidden

}



.flexVideo .video-bg {

    position: absolute;

    width: 100%

}



.swiper-containers {

    width: 100%;

    height: 300px;

    margin: 20px auto

}



.swiper-slide {

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .6s linear 0s;

    -webkit-transition: all .6s linear 0s;

    -o-transition: all .6s linear 0s

}



.swiper-button-prev {

    background: url(../images/prev.png) no-repeat !important

}



.swiper-button-prev:hover {

    background-position-x: -26px !important

}



.swiper-button-next {

    background: url(../images/next.png) no-repeat !important

}



.swiper-button-next:hover {

    background-position-x: -26px !important

}



.swiper-banner .swiper-button-prev {

    left: 150px !important

}



@media screen and (min-width: 1500px) {

    .swiper-banner .swiper-button-prev {

        left: 300px !important

    }

}



.swiper-banner .swiper-button-next {

    right: 150px !important

}



@media screen and (min-width: 1500px) {

    .swiper-banner .swiper-button-next {

        right: 300px !important

    }

}



.swiper-banner-slide .swiper-slide {

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center

}



.swiper-pagination-bullet {

    width: 10px !important;

    height: 10px !important;

    background: #333 !important

}



.swiper-pagination-bullet-active {

    width: 10px !important;

    height: 10px !important;

    background: white !important

}



.swiper-banner {

    width: 100%;

    height: 300px;

    margin: 20px auto

}



.swiper-banner ul {

    position: relative;

    top: -15px

}



.swiper-banner .swiper-pagination-bullets {

    bottom: 81px !important

}



.swiper-banner .title {

    width: 100%;

    font-size: 4rem;

    line-height: 4rem;

    margin: 0 auto 30px;

    text-align: center;

    color: #fff;

    top: 5px;

    position: relative;

    font-weight: bold;

    z-index: 10;

    display: block

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .swiper-banner .title {

        font-size: 4.6rem

    }

}



@media screen and (min-width: 1500px) {

    .swiper-banner .title {

        font-size: 5rem

    }

}



.swiper-banner .showTitle {

    opacity: 1 !important

}



.swiper-banner .showTitle2 {

    opacity: 1 !important;

    top: 0px !important

}



.swiper-banner .showTitle3 {

    opacity: 1 !important;

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -o-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1) !important

}



.swiper-banner .desc {

    width: 100%;

    height: 23px;

    margin: 10px auto 26px;

    line-height: 2rem;

    text-align: center;

    color: #fff;

    display: block;

    font-size: 1.4rem;

    font-weight: 300

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .swiper-banner .desc {

        font-size: 1.6rem;

        font-weight: 300

    }

}



@media screen and (min-width: 1500px) {

    .swiper-banner .desc {

        font-size: 1.8rem;

        font-weight: 300

    }

}



.swiper-banner .one {

    -moz-opacity: 0;

    opacity: 0;

    -webkit-transition: opacity .6s ease-in-out 0s;

    -moz-transition: opacity .6s ease-in-out 0s;

    -ms-transition: opacity .6s ease-in-out 0s;

    -o-transition: opacity .6s ease-in-out 0s;

    transition: opacity .6s ease-in-out 0s

}



.swiper-banner .two {

    -moz-opacity: 0;

    opacity: 0;

    position: relative;

    top: -100px;

    -webkit-transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s ease-in-out 0s;

    -ms-transition: all .6s ease-in-out 0s;

    -o-transition: all .6s ease-in-out 0s;

    transition: all .6s ease-in-out 0s

}



.swiper-banner .twoDesc {

    -moz-opacity: 0;

    opacity: 0;

    position: relative;

    top: 100px;

    -webkit-transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s ease-in-out 0s;

    -ms-transition: all .6s ease-in-out 0s;

    -o-transition: all .6s ease-in-out 0s;

    transition: all .6s ease-in-out 0s

}



.swiper-banner .three {

    -moz-opacity: 0;

    opacity: 0;

    -webkit-transform: scale(0.8);

    -moz-transform: scale(0.8);

    -o-transform: scale(0.8);

    -ms-transform: scale(0.8);

    transform: scale(0.8);

    -webkit-transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s ease-in-out 0s;

    -ms-transition: all .6s ease-in-out 0s;

    -o-transition: all .6s ease-in-out 0s;

    transition: all .6s ease-in-out 0s

}



.backgroundCover {

    background: url(../images/hotback.png) !important;

    background-size: cover;

    position: relative

}



.backgroundCover .swiper-button-prev {

    left: 20px !important

}



@media screen and (min-width: 1500px) {

    .backgroundCover .swiper-button-prev {

        top: 295px;

        left: 150px !important

    }

}



.backgroundCover .swiper-button-next {

    right: 20px !important

}



@media screen and (min-width: 1500px) {

    .backgroundCover .swiper-button-next {

        top: 295px;

        right: 150px !important

    }

}



.swiperCover {

    width: 960px !important;

    padding-top: 126px;

    height: 521px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .swiperCover {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .swiperCover {

        width: 1300px !important

    }

}



.swiperCover .hotLogo {

    width: 300px;

    height: 50px;

    background: url(../images/hotlogo.svg) no-repeat !important;

    position: absolute;

    top: 80px

}



.swiperCover .leftClick {

    position: absolute;

    top: 80px;

    width: 33%;

    height: 400px;

    left: 0;

    background: red;

    z-index: 5;

    opacity: 0

}



.swiperCover .rightClick {

    position: absolute;

    top: 80px;

    width: 33%;

    height: 400px;

    right: 0px;

    background: blue;

    z-index: 5;

    opacity: 0

}



.swiperCover .swiper-slide {

    height: 0px

}



.swiperCover .coverSlide {

    width: 35%

}



.swiperCover .coverSlide .scaleDiv {

    transform: scale(0.8, 0.8) !important

}



.swiperCover .coverSlide .scaleDiv img {

    border-top-left-radius: 4px;

    border-top-right-radius: 4px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .swiperCover .coverSlide .scaleDiv img {

        height: 240px

    }

}



@media screen and (min-width: 1500px) {

    .swiperCover .coverSlide .scaleDiv img {

        height: 260px

    }

}



.swiperCover .coverSlide .scaleDiv .bg {

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.6)

}



.swiperCover .coverSlide .coverContent {

    background: white;

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 4px

}



.swiperCover .coverSlide .coverContent div {

    font-size: 1.4rem;

    color: #666;

    text-align: center

}



.swiperCover .coverSlide .coverContent div:nth-child(1) {

    padding-top: 12px;

    padding-bottom: 9px

}



.swiperCover .coverSlide .coverContent div:nth-child(1):hover {

    color: #FE5453

}



.swiperCover .coverSlide .coverContent div:nth-child(2) {

    padding-bottom: 19px;

    color: #FE5453

}



.swiperCover .coverSlide img {

    width: 100%

}



.swiperCover .coverSlide .swiper-slide-shadow-left {

    opacity: 5 !important

}



.swiperCover .coverSlide .swiper-slide-shadow-right {

    opacity: 5 !important

}



.swiperCover .swiper-slide-prev .scaleDiv {

    transform: scale(0.9, 0.9) !important

}



.swiperCover .swiper-slide-prev .scaleDiv img {

    border-top-left-radius: 4px;

    border-top-right-radius: 4px

}



.swiperCover .swiper-slide-prev .scaleDiv .bg {

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.3)

}



.swiperCover .swiper-slide-prev .coverContent {

    background: white

}



.swiperCover .swiper-slide-prev .swiper-slide-shadow-left {

    opacity: 1 !important

}



.swiperCover .swiper-slide-prev .swiper-slide-shadow-right {

    opacity: 0 !important

}



.swiperCover .swiper-slide-next .scaleDiv {

    transform: scale(0.9, 0.9) !important;

    -webkit-filter: grayscale(60%);

    -moz-filter: grayscale(60%);

    -ms-filter: grayscale(60%);

    -o-filter: grayscale(60%);

    filter: grayscale(60%);

    filter: gray

}



.swiperCover .swiper-slide-next .scaleDiv img {

    border-top-left-radius: 4px;

    border-top-right-radius: 4px

}



.swiperCover .swiper-slide-next .scaleDiv .bg {

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.3)

}



.swiperCover .swiper-slide-next .coverContent {

    background: white

}



.swiperCover .swiper-slide-next .swiper-slide-shadow-left {

    opacity: 0 !important

}



.swiperCover .swiper-slide-next .swiper-slide-shadow-right {

    opacity: 1 !important

}



.swiperCover .swiper-slide-active .scaleDiv {

    transform: scale(1, 1) !important

}



.swiperCover .swiper-slide-active .scaleDiv img {

    background: transparent !important;

    border-top-left-radius: 4px;

    border-top-right-radius: 4px

}



.swiperCover .swiper-slide-active .scaleDiv .bg {

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4);

    display: none

}



.swiperCover .swiper-slide-active .coverContent {

    background: white

}



.swiperCover .swiper-slide-active .swiper-slide-shadow-left {

    opacity: 0 !important

}



.swiperCover .swiper-slide-active .swiper-slide-shadow-right {

    opacity: 0 !important

}



.swiper-director {

    width: 960px !important;

    margin: 0 auto;

    background: none;

    height: 434px;

    padding-top: 150px;

    transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s linear 0s;

    -webkit-transition: all .6s linear 0s;

    -o-transition: all .6s linear 0s;

    position: relative

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .swiper-director {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .swiper-director {

        width: 1300px !important

    }

}



.swiper-director div {

    -moz-user-select: none;

    user-select: none;

    -webkit-user-select: none;

    -o-user-select: none

}



.swiper-director .directorLogo {

    width: 300px;

    height: 30px;

    background: url(../images/directorlogo_1.svg) no-repeat !important;

    position: absolute;

    top: 80px

}



.swiper-director .directorWant {

    width: 130px;

    height: 28px;

    line-height: 27px;

    position: absolute;

    top: 80px;

    right: 0px;

    text-align: center;

    border: 1px solid #FE5453;

    border-radius: 4px;

    font-size: 1.4rem;

    color: #FE5453

}



.swiper-director .directorWant:hover {

    background: #FE5453;

    color: white;

    border: none

}



































































/*.director .swiper-button-next {

    background: url(../images/hotlogo_1.svg) no-repeat !important;

    position: absolute;

    top: 80px

}*/



.page {

    top: 0 !important;

    background: transparent !important

}



.btn-default {

    border: none !important

}



.changeHideHeader {

    height: 1px;

    width: 1px;

    position: absolute;

    opacity: 1;

    top: 80px

}



.tel {

    text-align: center;

    background: #101112;

    height: 50px;

    font-size: 1.6rem;

    line-height: 50px;

    position: relative

}



.tel span:nth-child(1) {

    color: white

}



.tel span:nth-child(2) {

    color: white

}



.tele-svg {

    background: url(../images/tele_1.svg) no-repeat !important

}



.flex-wrap {

    position: relative;

    width: 100%;

    background: #f9fbfb;

    min-width: 960px;

    min-height: 320px

}



.flex-wrap .flexslider {

    position: absolute;

    top: 0px;

    width: 100%;

    margin: 0 auto;

    overflow: hidden;

    height: 350px

}



@media screen and (min-width: 1100px) and (max-width: 1276px) {

    .flex-wrap .flexslider {

        height: 420px

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .flex-wrap .flexslider {

        height: 520px

    }

}



@media screen and (min-width: 1500px) and (max-width: 1600px) {

    .flex-wrap .flexslider {

        height: 550px

    }

}



@media screen and (min-width: 1600px) {

    .flex-wrap .flexslider {

        height: 680px

    }

}



.flex-wrap .flexslider .slides {

    position: relative;

    z-index: 1

}



.flex-wrap .flexslider .slides li {

    width: 100%;

    overflow: hidden

}



.flex-wrap .flexslider .slides li section {

    position: relative;

    overflow: hidden

}



.flex-wrap .flexslider .slides li .video-bg {

    position: relative;

    height: 100%;

    width: 100%;

    z-index: -1

}



.flex-wrap .flex-control-nav {

    position: absolute;

    bottom: 10px;

    z-index: 2;

    width: 100%;

    text-align: center

}



.flex-wrap .flex-control-nav li {

    display: inline-block;

    width: 14px;

    height: 14px;

    margin: 0 5px;

    *display: inline;

    zoom: 1

}



.flex-wrap .flex-control-nav a {

    display: inline-block;

    width: 14px;

    height: 14px;

    line-height: 40px;

    overflow: hidden;

    background: #999;

    border-radius: 120px

}



.flex-wrap .flex-control-nav a:hover {

    background: #FE5453

}



.flex-wrap .flex-control-nav .flex-active {

    background-position: 0 0

}



.flex-wrap .flex-direction-nav {

    position: absolute;

    z-index: 3;

    width: 100%;

    top: 42%

}



.flex-wrap .flex-direction-nav li a {

    display: block;

    width: 30px;

    height: 70px;

    overflow: hidden;

    cursor: pointer;

    position: absolute

}



.flex-wrap .flex-direction-nav li a.flex-prev {

    left: 0;

    background: url(../images/prev.png) center center no-repeat

}



.flex-wrap .flex-direction-nav li a.flex-next {

    right: 0;

    background: url(../images/next.png) center center no-repeat

}



.oVideo {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 1

}



.dropdown {

    width: 220px;

    height: 36px;

    display: inline-block;

    position: relative;

    top: -1px

}



.dropdown .dropdown-menuHost {

    width: 222px;

    top: 31px;

    left: -1px;

    border-top-left-radius: 0px;

    border-top-right-radius: 0px;

    margin: 0;

    padding: 0

}



.dropdown .dropdown-menuHost li {

    width: 220px;

    padding-left: 20px !important;

    color: #333;

    cursor: pointer;

    line-height: 35px

}



.dropdown .dropdown-menuHost li:hover {

    background: #f0f2f5

}



.dropdown .carets {

    height: 15px;

    width: 15px;

    background: url("../images/selecticon_1.png") no-repeat !important;

    position: absolute;

    right: 20px;

    top: 10px

}



.dropdown .dropdown-toggle {

    color: #666;

    font-size: 1.4rem;

    width: 220px;

    height: 36px !important;

    background: white !important;

    text-align: left;

    padding-left: 20px

}



.bannerOut {

    height: 90px !important;

    width: 620px !important;

    background: url("../images/setinput_1.png") no-repeat !important;

    background-size: 620px 90px !important;

    background: white;

    color: #333;

    font-size: 1.4rem;

    padding-top: 16px;

    top: 150px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .bannerOut {

        top: 200px

    }

}



@media screen and (min-width: 1500px) {

    .bannerOut {

        top: 0px

    }

}



input:focus {

    border: none !important

}



.bannerDiv {

    height: 70px !important;

    width: 692px !important;

    background: none !important;

    border: none !important;

    line-height: 70px;

    border: 0 !important;

    outline: none !important;

    color: #333 !important;

    padding-left: 30px !important

}



.bannerSearch {

    position: absolute;

    height: 60px;

    width: 84px;

    right: 5px;

    top: 5px;

    background: #FE5453;

    border-radius: 2px;

    padding: 10px 22px 10px 22px;

    cursor: pointer

}



.i-lucency {

    font-size: 1.2rem !important

}



.new-banner {

    position: absolute;

    left: 0;

    right: 0;

    top: 15px;

    margin: 50px auto 50px;

    width: 620px;

    height: 90px;

    z-index: 10

}



@media screen and (min-width: 1100px) and (max-width: 1276px) {

    .new-banner {

        top: 40px

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .new-banner {

        top: 40px

    }

}



@media screen and (min-width: 1500px) and (max-width: 1600px) {

    .new-banner {

        top: 260px

    }

}



@media screen and (min-width: 1600px) {

    .new-banner {

        top: 326px

    }

}



.new-banner .bannerOut::after {

    content: attr(data-content);

    position: absolute;

    color: #FE5453;

    font-size: 1.2rem;

    top: 60px;

    right: 0px;

    bottom: 0px;

    left: 15px

}



.new-banner .search-box {

    text-align: center

}



.new-banner .search-box>form {

    display: inline-block;

    position: relative

}



.new-banner .search-box>form .helpYou {

    width: 140px;

    height: 36px;

    background: #FE5453;

    border-radius: 4px;

    color: white;

    font-size: 1.4rem;

    border: none;

    outline: none

}



.new-banner .search-box>form .helpYou:active {

    background: #fe2220

}



.new-banner .search-box>form .wordPosition {

    width: 100%;

    text-align: left !important;

    padding-left: 34px;

    padding-top: 6px;

    position: relative;

    z-index: 5

}



.new-banner .search-box>form .bannerWord {

    display: inline-block;

    font-size: 1.2rem;

    color: #FE5453;

    margin-right: 15px;

    cursor: pointer

}



.new-banner .search-box>form .bannerWord img {

    margin-right: 5px;

    position: relative;

    bottom: 1px;

    cursor: pointer

}



.new-banner .search-box>form .bannerWord span {

    position: relative;

    bottom: 1px;

    cursor: pointer

}



.new-banner .search-box>form input {

    margin: 0 auto;

    margin-left: 2px;

    margin-right: 2px;

    padding: 0 10px;

    padding-left: 16px;

    width: 220px;

    height: 36px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    border: none;

    color: #fff;

    background: white;

    color: #333;

    font-size: 1.4rem;

    padding-right: 40px;

    outline: none

}



.new-banner .search-box>form input:focus,

.new-banner .search-box>form input:hover {

    border: none;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px

}



.new-banner .search-box ol,

.new-banner .search-box ul,

.new-banner .search-box dl {

    margin-bottom: 0

}



.new-banner .known-btn {

    position: absolute;

    left: 50%;

    width: 118px;

    margin-left: -59px

}



.new-banner .known-btn a {

    display: block;

    text-decoration: none;

    color: #fff

}



.new-banner .known-btn a:hover,

.new-banner .known-btn a:visited {

    color: #fff

}



.tele-wrap {

    position: relative;

    width: 100%;

    height: 48px;

    background: black

}



.tele-wrap>.tele-section {

    width: 960px;

    margin: auto;

    height: 100%

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .tele-wrap>.tele-section {

        width: 1212px

    }

}



@media screen and (min-width: 1500px) {

    .tele-wrap>.tele-section {

        width: 1464px

    }

}



.tele-wrap>.tele-section .tele-svg {

    position: relative;

    top: 14px;

    width: 220px;

    height: 20px;

    background: url("../images/tele.svg") no-repeat;

    margin: auto

}



.FourModelColor {

    background: #FDFFFF;

    width: 100%;

    height: auto;

    position: relative

}



.FourModel {

    width: 960px !important;

    height: 340px;

    margin: 0 auto;

    font-size: 0;

    position: relative;

    z-index: 5

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .FourModel {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .FourModel {

        width: 1300px !important

    }

}



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

    .FourModel {

        height: 300px

    }

}



.FourModel .last {

    margin-right: 0px !important

}



.FourModel .FourBorder {

    width: 310px;

    height: 180px;

    background-size: 310px 180px !important;

    display: inline-block;

    margin-top: 80px

}



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

    .FourModel .FourBorder {

        width: 240px;

        background-size: 240px 142px !important;

        margin-right: 9px

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .FourModel .FourBorder {

        width: 280px;

        height: 180px;

        background-size: 280px 180px !important;

        margin-right: 9px

    }

}



@media screen and (min-width: 960px) and (max-width: 1275px) {

    .FourModel .FourBorder {

        margin-right: 0px

    }

}



.FourModel .FourBorder:hover .fb1,

.FourModel .FourBorder:hover .fb2,

.FourModel .FourBorder:hover .fb3,

.FourModel .FourBorder:hover .fb4 {

    width: 310px;

    clip: rect(0px 310px 180px 180px)

}



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

    .FourModel .FourBorder:hover .fb1,

    .FourModel .FourBorder:hover .fb2,

    .FourModel .FourBorder:hover .fb3,

    .FourModel .FourBorder:hover .fb4 {

        width: 240px;

        clip: rect(0px 240px 142px 142px)

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .FourModel .FourBorder:hover .fb1,

    .FourModel .FourBorder:hover .fb2,

    .FourModel .FourBorder:hover .fb3,

    .FourModel .FourBorder:hover .fb4 {

        width: 280px;

        clip: rect(0px 280px 180px 180px)

    }

}



.FourModel .FourBorder:hover .fb1b,

.FourModel .FourBorder:hover .fb2b,

.FourModel .FourBorder:hover .fb3b,

.FourModel .FourBorder:hover .fb4b {

    clip: rect(0px 180px 180px 0px)

}



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

    .FourModel .FourBorder:hover .fb1b,

    .FourModel .FourBorder:hover .fb2b,

    .FourModel .FourBorder:hover .fb3b,

    .FourModel .FourBorder:hover .fb4b {

        clip: rect(0px 142px 142px 0px)

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .FourModel .FourBorder:hover .fb1b,

    .FourModel .FourBorder:hover .fb2b,

    .FourModel .FourBorder:hover .fb3b,

    .FourModel .FourBorder:hover .fb4b {

        clip: rect(0px 180px 180px 0px)

    }

}



.FourModel .FourBorder .fb1,

.FourModel .FourBorder .fb2,

.FourModel .FourBorder .fb3,

.FourModel .FourBorder .fb4,

.FourModel .FourBorder .fb1b,

.FourModel .FourBorder .fb2b,

.FourModel .FourBorder .fb3b,

.FourModel .FourBorder .fb4b {

    position: absolute;

    height: 180px;

    transition: all .3s ease-in-out .2s;

    -moz-transition: all .3s ease-in-out .2s;

    -webkit-transition: all .3s ease-in-out .2s;

    -o-transition: all .3s ease-in-out .2s;

    opacity: 1;

    width: 310px;

    background-size: 310px 180px !important

}



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

    .FourModel .FourBorder .fb1,

    .FourModel .FourBorder .fb2,

    .FourModel .FourBorder .fb3,

    .FourModel .FourBorder .fb4,

    .FourModel .FourBorder .fb1b,

    .FourModel .FourBorder .fb2b,

    .FourModel .FourBorder .fb3b,

    .FourModel .FourBorder .fb4b {

        width: 240px;

        background-size: 240px 142px !important

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .FourModel .FourBorder .fb1,

    .FourModel .FourBorder .fb2,

    .FourModel .FourBorder .fb3,

    .FourModel .FourBorder .fb4,

    .FourModel .FourBorder .fb1b,

    .FourModel .FourBorder .fb2b,

    .FourModel .FourBorder .fb3b,

    .FourModel .FourBorder .fb4b {

        width: 280px;

        background-size: 280px 180px !important

    }

}



.FourModel .FourBorder .fb1,

.FourModel .FourBorder .fb2,

.FourModel .FourBorder .fb3,

.FourModel .FourBorder .fb4 {

    width: 310px;

    clip: rect(180px 310px 180px 310px)

}



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

    .FourModel .FourBorder .fb1,

    .FourModel .FourBorder .fb2,

    .FourModel .FourBorder .fb3,

    .FourModel .FourBorder .fb4 {

        width: 240px;

        clip: rect(142px 240px 142px 240px)

    }

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .FourModel .FourBorder .fb1,

    .FourModel .FourBorder .fb2,

    .FourModel .FourBorder .fb3,

    .FourModel .FourBorder .fb4 {

        width: 280px;

        clip: rect(180px 280px 180px 280px)

    }

}



.FourModel .FourBorder .fb1b,

.FourModel .FourBorder .fb2b,

.FourModel .FourBorder .fb3b,

.FourModel .FourBorder .fb4b {

    clip: rect(0px 0px 0px 0px)

}



.FourModel .FourBorder .fb1,

.FourModel .FourBorder .fb1b {

    background: url("../images/fourborder1_1.png") no-repeat

}



.FourModel .FourBorder .fb2,

.FourModel .FourBorder .fb2b {

    background: url("../images/fourborder2_1.png") no-repeat

}



.FourModel .FourBorder .fb3,

.FourModel .FourBorder .fb3b {

    background: url("../images/fourborder3_1.png") no-repeat

}



.FourModel .FourBorder .fb4,

.FourModel .FourBorder .fb4b {

    background: url("../images/fourborder4_1.png") no-repeat

}



.FourModel .FourBorder .FourContent {

    height: 100%;

    width: auto;

    background: transparent;

    position: relative;

    z-index: 3;

    padding-top: 45px;

    padding-left: 78px

}



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

    .FourModel .FourBorder .FourContent {

        padding-top: 27px;

        padding-left: 45px

    }

}



@media screen and (min-width: 1275px) and (max-width: 1500px) {

    .FourModel .FourBorder .FourContent {

        padding-left: 58px

    }

}



.FourModel .FourBorder .FourContent .typeBottom {

    margin-top: 9px;

    cursor: pointer

}



.FourModel .FourBorder .FourContent .typeBottom span:nth-child(1) {

    font-size: 1.4rem;

    color: #999;

    margin-right: 30px

}



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

    .FourModel .FourBorder .FourContent .typeBottom span:nth-child(1) {

        margin-right: 20px;

        font-size: 1.2rem

    }

}



.FourModel .FourBorder .FourContent .typeBottom span:nth-child(1):hover {

    color: #FE5453

}



.FourModel .FourBorder .FourContent .typeBottom span:nth-child(2) {

    font-size: 1.4rem;

    color: #999

}



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

    .FourModel .FourBorder .FourContent .typeBottom span:nth-child(2) {

        font-size: 1.2rem

    }

}



.FourModel .FourBorder .FourContent .typeBottom span:nth-child(2):hover {

    color: #FE5453

}



.FourModel .FourBorder .FourContent .typeHover {

    cursor: pointer

}



.FourModel .FourBorder .FourContent .typeHover div:nth-child(2) {

    font-size: 3.0rem;

    color: #333

}



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

    .FourModel .FourBorder .FourContent .typeHover div:nth-child(2) {

        font-size: 2.6rem

    }

}



.FourModel .FourBorder .FourContent .typeHover div:nth-child(3) {

    font-size: 1.4rem;

    color: #333;

    margin-top: 5px

}



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

    .FourModel .FourBorder .FourContent .typeHover div:nth-child(3) {

        font-size: 1.2rem

    }

}



.FourModel .FourBorder .FourContent .typeHover:hover div {

    color: #FE5453

}



.FourModel .FourBorder .FourContent .typeHover:hover .four1 {

    width: 26px;

    height: 25px;

    background: url("../images/four1.png") no-repeat;

    position: absolute;

    background-position: 0px -26px

}



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

    .FourModel .FourBorder .FourContent .typeHover:hover .four1 {

        width: 20px;

        height: 20px;

        background: url("../images/four1s.png") no-repeat;

        background-position: 0px -20px

    }

}



.FourModel .FourBorder .FourContent .typeHover:hover .four2 {

    width: 26px;

    height: 25px;

    background: url("../images/four2.png") no-repeat;

    position: absolute;

    background-position: 0px -26px

}



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

    .FourModel .FourBorder .FourContent .typeHover:hover .four2 {

        width: 20px;

        height: 20px;

        background: url("../images/four2s.png") no-repeat;

        background-position: 0px -20px

    }

}



.FourModel .FourBorder .FourContent .typeHover:hover .four3 {

    width: 26px;

    height: 25px;

    background: url("../images/four3.png") no-repeat;

    position: absolute;

    background-position: 0px -26px

}



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

    .FourModel .FourBorder .FourContent .typeHover:hover .four3 {

        width: 20px;

        height: 20px;

        background: url("../images/four3s.png") no-repeat;

        background-position: 0px -20px

    }

}



.FourModel .FourBorder .FourContent .typeHover:hover .four4 {

    width: 26px;

    height: 25px;

    background: url("../images/four4.png") no-repeat;

    position: absolute;

    background-position: 0px -26px

}



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

    .FourModel .FourBorder .FourContent .typeHover:hover .four4 {

        width: 20px;

        height: 20px;

        background: url("../images/four4s.png") no-repeat;

        background-position: 0px -20px

    }

}



.FourModel .FourBorder .FourContent li span {

    margin-left: 30px;

    cursor: pointer

}



.FourModel .FourBorder .FourContent .four1 {

    width: 26px;

    height: 25px;

    background: url("../images/four1.png") no-repeat;

    position: absolute;

    top: 56px;

    left: 35px

}



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

    .FourModel .FourBorder .FourContent .four1 {

        width: 20px;

        height: 20px;

        background: url("../images/four1s.png") no-repeat

    }

}



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

    .FourModel .FourBorder .FourContent .four1 {

        top: 37px;

        left: 16px

    }

}



@media screen and (min-width: 1275px) and (max-width: 1500px) {

    .FourModel .FourBorder .FourContent .four1 {

        top: 56px;

        left: 23px

    }

}



.FourModel .FourBorder .FourContent .four2 {

    width: 26px;

    height: 25px;

    background: url("../images/four2.png") no-repeat;

    position: absolute;

    top: 56px;

    left: 35px

}



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

    .FourModel .FourBorder .FourContent .four2 {

        width: 20px;

        height: 20px;

        background: url("../images/four2s.png") no-repeat

    }

}



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

    .FourModel .FourBorder .FourContent .four2 {

        top: 37px;

        left: 16px

    }

}



@media screen and (min-width: 1275px) and (max-width: 1500px) {

    .FourModel .FourBorder .FourContent .four2 {

        top: 56px;

        left: 23px

    }

}



.FourModel .FourBorder .FourContent .four3 {

    width: 26px;

    height: 25px;

    background: url("../images/four3.png") no-repeat;

    position: absolute;

    top: 56px;

    left: 35px

}



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

    .FourModel .FourBorder .FourContent .four3 {

        width: 20px;

        height: 20px;

        background: url("../images/four3s.png") no-repeat

    }

}



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

    .FourModel .FourBorder .FourContent .four3 {

        top: 37px;

        left: 16px

    }

}



@media screen and (min-width: 1275px) and (max-width: 1500px) {

    .FourModel .FourBorder .FourContent .four3 {

        top: 56px;

        left: 23px

    }

}



.FourModel .FourBorder .FourContent .four4 {

    width: 26px;

    height: 25px;

    background: url("../images/four4.png") no-repeat;

    position: absolute;

    top: 56px;

    left: 35px

}



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

    .FourModel .FourBorder .FourContent .four4 {

        width: 20px;

        height: 20px;

        background: url("../images/four4s.png") no-repeat

    }

}



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

    .FourModel .FourBorder .FourContent .four4 {

        top: 37px;

        left: 16px

    }

}



@media screen and (min-width: 1275px) and (max-width: 1500px) {

    .FourModel .FourBorder .FourContent .four4 {

        top: 56px;

        left: 23px

    }

}



.classical {

    padding-top: 80px;

    background: #FDFFFF;

    position: relative

}



.classical .classicalArea {

    width: 960px !important;

    margin: 0 auto;

    position: relative

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .classical .classicalArea {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .classical .classicalArea {

        width: 1300px !important

    }

}



.classicalLogo {

    width: 300px;

    height: 25px;

    background: url(../images/classicallogo_1.svg) no-repeat !important

}



.cardUl {

    font-size: 0;

    padding-top: 20px;

    padding-bottom: 80px

}



.cardUl .topAnimaltion {

    opacity: 1 !important

}



.cardUl .oneFlow:nth-child(4) {

    margin-right: 0px !important

}



.cardUl .oneFlow {

    opacity: 0;

    transition: opacity 1.5s ease-in-out .2s;

    -moz-transition: opacity 1.5s ease-in-out .2s;

    -webkit-transition: opacity 1.5s ease-in-out .2s;

    -o-transition: opacity 1.5s ease-in-out .2s;

    display: inline-block;

    margin-right: 20px;

    border-radius: 4px;

    margin-top: 40px;

    background: transparent;

    vertical-align: top;

    width: 225px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .cardUl .oneFlow {

        width: 288px

    }

}



@media screen and (min-width: 1500px) {

    .cardUl .oneFlow {

        width: 310px

    }

}



.cardUl .oneFlow:hover {

    border: solid 1px #b8b8b8

}



.cardUl .oneFlow:hover .videoContet {

    -moz-box-shadow: 10px 10px 5px #d1d1d1;

    -webkit-box-shadow: 0px 0px 10px #d1d1d1;

    -o-box-shadow: 0px 0px 10px #d1d1d1;

    box-shadow: 0px 0px 10px #d1d1d1;

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 4px

}



.cardUl .oneFlow img {

    width: 100%;

    height: 126.5625px;

    border-top-right-radius: 4px;

    border-top-left-radius: 4px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .cardUl .oneFlow img {

        height: 162px

    }

}



@media screen and (min-width: 1500px) {

    .cardUl .oneFlow img {

        height: 174.375px

    }

}



.cardUl .oneFlow .videoContet {

    background: white;

    font-size: 1.4rem;

    padding: 20px 20px 20px 20px;

    -moz-box-shadow: 10px 10px 5px #d1d1d1;

    box-shadow: 0px 0px 10px #d1d1d1;

    border--bottom-left-radius: 4px;

    border--bottom-right-radius: 4px

}



.cardUl .oneFlow .title {

    color: #333

}



.cardUl .oneFlow .title:hover {

    color: #FE5453

}



.cardUl .oneFlow .type {

    padding-top: 8px;

    font-size: 1.2rem;

    color: #999;

    height: 25px;

    white-space: nowrap;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis

}



.cardUl .oneFlow .price {

    padding-top: 28px;

    width: 48%;

    color: #FE5453;

    display: inline-block

}



.cardUl .oneFlow .realPrice {

    display: inline-block;

    position: relative;

    width: 49%;

    text-align: right;

    font-size: 1.2rem;

    text-decoration: line-through;

    color: #333

}



.cardUl .oneFlow .realPrice:hover {

    color: #333 !important

}



.director {

    height: 526px;

    background: #f0f2f5;

    position: relative

}



.ourClients {

    background: white;

    height: 690px;

    position: relative

}



.ourClients .hereClients {

    width: 960px !important;

    margin: 0 auto;

    padding-top: 148px;

    position: relative

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .ourClients .hereClients {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .ourClients .hereClients {

        width: 1300px !important

    }

}



.ourClients .hereClients .ClientsLogo {

    width: 300px;

    height: 25px;

    position: absolute;

    top: 80px;

    background: url(../images/clientslogo_1.svg) no-repeat !important

}



.ourClients .hereClients .r {

    border-right: 1px dotted #ddd

}



.ourClients .hereClients .b {

    border-bottom: 1px dotted #ddd

}



.ourClients .hereClients .up {

    position: relative;

    top: -100px;

    opacity: 0

}



.ourClients .hereClients .down {

    position: relative;

    top: 100px;

    opacity: 0

}



.ourClients .hereClients ul {

    font-size: 0;

    width: 960px;

    min-width: 960px;

    margin: 0 auto;

    padding-top: 20px

}



@media screen and (min-width: 1276px) {

    .ourClients .hereClients ul {

        width: 1090px

    }

}



.ourClients .hereClients li {

    width: 150px;

    height: 120px;

    display: inline-block;

    overflow: hidden

}



@media screen and (min-width: 1276px) {

    .ourClients .hereClients li {

        width: 180px;

        height: 144px

    }

}



.ourClients .hereClients li div {

    width: 100%;

    height: 100%;

    transition: all .2s linear .2s;

    -moz-transition: all .2s linear .2s;

    -webkit-transition: all .2s linear .2s;

    -o-transition: all .2s linear .2s;

    background: url(../images/ourfriends.jpg) no-repeat !important

}







.advan{

    background: url(../images/advanback.png) top center no-repeat; background-size: cover;width:100%;;

}



.advan .advanContent .ca {

    padding-top: 158px;

    border-bottom: 2px solid #666

}



.advan .advanContent .ca ul {

    padding-bottom: 45px

}



.advan .advanContent .ca li {

    display: inline-block;

    border: none;

    width: 33%;

    width: calc(100/3 - 2px);

    text-align: center;

    color: white

}



.advan .advanContent .ca li .oro {

    top: 20px;

    opacity: 0

}



.advan .advanContent .ca li .hoverLogo {

    top: 0px;

    opacity: 1

}



.advan .advanContent .ca li div {

    position: relative

}



.advan .advanContent .ca li div:nth-child(1)::after {

    content: '';

    position: absolute;

    border: 1px solid;

    border-radius: 90px;

    border-color: white;

    width: 80px;

    height: 80px;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0px;

    transition: all 1s ease-out 0s;

    -moz-transition: all 1s ease-out 0s;

    -webkit-transition: all 1s ease-out 0s;

    -o-transition: all 1s ease-out 0s

}



.advan .advanContent .ca li div:nth-child(1) {

    width: 80px;

    height: 80px

}



.advan .advanContent .ca li div:nth-child(1):hover::after {

    content: '';

    position: absolute;

    border: 2px solid;

    border-radius: 90px;

    border-color: #FE5453;

    width: 120px;

    height: 120px;

    top: -20px;

    right: 0px;

    bottom: 0px;

    left: -20px;

    opacity: 0

}



.advan .advanContent .ca li div:nth-child(2) {

    font-size: 1.8rem;

    margin-top: 42px

}



.advan .advanContent .ca li div:nth-child(3) {

    font-size: 1.2rem;

    margin-top: 15px;

    position: relative;

    transition: all .4s ease-out 0s;

    -moz-ransition: all .4s ease-out 0s;

    -webkit-transition: all .4s ease-out 0s;

    -o-transition: all .4s ease-out 0s

}



/*.advan .advanContent .ca li:nth-child(1) div:nth-child(1) {

    background: url(../images/free.png) no-repeat !important

}

*/







.advan .advanContent .service li {

    position: relative;

    display: inline-block;

    border: none;

    width: 33%;

    width: calc(100/3 - 2px);

    text-align: center;

    color: white;

    margin-top: 70px;

    left: 23px;

    top: 50px;

    vertical-align: top;

    transition: all .4s ease-out 0s;

    -moz-transition: all .4s ease-out 0s;

    -webkit-transition: all .4s ease-out 0s;

    -o-transition: all .4s ease-out 0s

}



.advan .advanContent .service li:hover div {

    position: relative;

    top: -10px

}



.advan .advanContent .service li div {

    width: 250px;

    margin: 0 auto;

    text-align: left

}



.advan .advanContent .service li div:nth-child(1) {

    font-size: 1.8rem

}



.advan .advanContent .service li div:nth-child(1) img {

    position: relative;

    top: -13px;

    left: 0%

}



.advan .advanContent .service li div:nth-child(2) {

    font-size: 1.2rem;

    margin-top: 8px

}



.news {

    background: #FDFFFF;

    position: relative

}



.news .newsContent {

    width: 960px !important;

    margin: 0 auto

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .news .newsContent {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .news .newsContent {

        width: 1300px !important

    }

}



.news .newsContent .newsLogo {

    width: 300px;

    height: 25px;

    position: absolute;

    top: 80px;

    background: url(../images/newslogo_1.svg) no-repeat !important

}



.news .newsContent ul {

    padding-top: 80px;

    padding-bottom: 80px;

    margin-bottom: 0px !important

}



.news .newsContent li:nth-child(3) {

    margin-right: 0px !important

}



.news .newsContent li:nth-child(6) {

    margin-right: 0px !important

}



.news .newsContent li {

    position: relative;

    display: inline-block;

    border: none;

    width: 256px;

    text-align: center;

    color: white;

    text-align: left;

    margin-top: 66px;

    margin-right: 96px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .news .newsContent li {

        width: 340px

    }

}



@media screen and (min-width: 1500px) {

    .news .newsContent li {

        width: 369.33333px

    }

}



.news .newsContent li:hover div {

    color: #FE5453 !important

}



.news .newsContent li:hover div:nth-child(2) {

    background: #FE5453

}



.news .newsContent li:hover div:nth-child(3) {

    color: #FE5453 !important;

    cursor: pointer

}



.news .newsContent li:hover div:nth-child(4) {

    color: #FE5453 !important

}



.news .newsContent li:hover .moreIcon {

    background-position: 0px -13px !important

}



.news .newsContent li .moreIcon {

    position: relative;

    width: 13px !important;

    height: 13px !important;

    background: url("../images/newsmore_1.png") no-repeat !important;

    background-position: 0px 0px;

    margin-left: 10px !important;

    margin-top: 0px !important;

    margin-bottom: 0px !important;

    left: 50px;

    top: -14px

}



.news .newsContent li .Contentp::after {

    content: "...";

    font-weight: bold;

    position: absolute;

    bottom: 0;

    right: 0;

    padding: 0 20px 1px 45px

}



.news .newsContent li div:nth-child(1) {

    color: #333;

    font-size: 1.8rem;

    cursor: pointer;

    white-space: nowrap;

    overflow: hidden;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis

}



.news .newsContent li div:nth-child(2) {

    height: 2px;

    width: 42px;

    background: #999;

    margin-top: 6px;

    margin-bottom: 6px

}



.news .newsContent li div:nth-child(3) {

    color: #999 !important;

    font-size: 1.2rem;

    height: 54px;

    overflow: hidden;

    text-overflow: ellipsis

}



.news .newsContent li div:nth-child(4) {

    color: #666;

    font-size: 1.2rem;

    margin-top: 10px;

    cursor: pointer

}



.news .newsContent li div:nth-child(4):active {

    color: #FE5453 !important

}



.join {

    background: url(../images/joins_1.jpg) no-repeat !important;

    background-size: cover !important;

    background-position: center 0;

    height: 307px;

    min-width: 960px;

    position: relative

}



@media screen and (min-width: 1276px) and (max-width: 1460px) {

    .join {

        background: url(../images/joinm_1.jpg) no-repeat !important

    }

}



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

    .join {

        background: url(../images/joinl_1.jpg) no-repeat !important

    }

}



.join .joinContent {

    width: 960px !important;

    margin: 0 auto

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .join .joinContent {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .join .joinContent {

        width: 1300px !important

    }

}



.join .joinContent ul {

    padding-top: 80px;

    display: block !important

}



.join .joinContent li {

    position: relative;

    display: inline-block;

    border: none;

    width: 33%;

    width: calc(100/3 - 2px);

    text-align: center

}



.join .joinContent li div {

    color: gray-dark;

    position: relative

}



.join .joinContent li div:nth-child(1) {

    font-size: 48px

}



.join .joinContent li div:nth-child(1) span:nth-child(1) {

    font-size: 26px;

    position: relative;

    top: -23px

}



.join .joinContent li div:nth-child(1) span:nth-child(2) {

    font-size: 36px;

    position: relative;

    top: -5px;

    left: 5px

}



.join .joinContent li div:nth-child(2) {

    font-size: 1.4rem

}



.join .joinContent .joinBtn {

    width: 420px;

    margin: 0 auto;

    margin-top: 40px;

    font-size: 0

}



.join .joinContent .joinBtn div {

    height: 40px;

    width: 200px;

    line-height: 38px;

    display: inline-block;

    border-radius: 4px;

    font-size: 1.4rem;

    text-align: center;

    cursor: pointer

}



.join .joinContent .joinBtn div:first-child {

    margin-right: 14px

}



.join .joinContent .joinBtn div {

    border: 1px solid #333;

    color: #333 !important

}



.join .joinContent .joinBtn div:hover {

    background: #FE5453;

    color: white !important;

    border: none

}



.foot3 {

    background: black;

    height: 440px;

    position: relative

}



.foot3 a:hover {

    color: white

}



.foot3 a:visited {

    color: white

}



.foot3 a:link {

    color: white

}



.foot3 a {

    color: white

}



.foot3 .footContent {

    width: 960px !important;

    margin: 0 auto;

    padding-top: 60px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .foot3 .footContent {

        width: 1212px !important

    }

}



@media screen and (min-width: 1500px) {

    .foot3 .footContent {

        width: 1300px !important

    }

}



.foot3 .footContent .contentBottom {

    text-align: center;

    color: white;

    padding-top: 30px

}



.foot3 .footContent .contentBottom div {

    font-size: 1.2rem

}



.foot3 .footContent .contentBottom div:first-child {

    font-size: 1.6rem !important;

    margin-bottom: 16px

}



.foot3 .footContent .contentBottom div:last-child {

    margin-top: 20px

}



.foot3 .footContent .contentTop {

    font-size: 0;

    padding-bottom: 55px;

    border-bottom: 1px solid #666

}



.foot3 .footContent .contentTop .codeWidth {

    width: 140px !important

}



@media screen and (min-width: 1276px) {

    .foot3 .footContent .contentTop .codeWidth {

        width: 200px !important

    }

}



.foot3 .footContent .contentTop .commonWidth {

    width: 110px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .foot3 .footContent .contentTop .commonWidth {

        width: 144px !important

    }

}



@media screen and (min-width: 1500px) {

    .foot3 .footContent .contentTop .commonWidth {

        width: 184px !important

    }

}



.foot3 .footContent .contentTop .onLineWidth {

    width: 220px !important

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .foot3 .footContent .contentTop .onLineWidth {

        width: 196px !important

    }

}



@media screen and (min-width: 1500px) {

    .foot3 .footContent .contentTop .onLineWidth {

        width: 296px !important

    }

}



.foot3 .footContent .contentTop .topItem {

    display: inline-block;

    color: white;

    font-size: 1.2rem;

    vertical-align: top

}



.foot3 .footContent .contentTop .topItem .Twocode {

    width: 110px;

    height: 110px;

    background: url(../images/pai.png) no-repeat !important;

    margin-bottom: 10px

}



.foot3 .footContent .contentTop .topItem .smWord {

    font-size: 1.2rem;

    color: white

}



.foot3 .footContent .contentTop .topItem .title {

    font-size: 1.6rem !important;

    margin-bottom: 30px

}



.foot3 .footContent .contentTop .topItem .noiconItem {

    height: 12px;

    margin-bottom: 11px

}



.foot3 .footContent .contentTop .topItem .noiconItem a {

    position: relative;

    top: -2px

}



.foot3 .footContent .contentTop .topItem .iconItem {

    height: 12px;

    padding-left: 14px;

    margin-bottom: 11px

}



.foot3 .footContent .contentTop .topItem .iconItem a {

    position: relative;

    top: -2px;

    left: 8px

}



.foot3 .footContent .contentTop .topItem .iconItem:hover {

    background-position: 0px -12px

}



.foot3 .footContent .contentTop .topItem .cusLogin {

    background: url(../images/cuslogin_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .proLogin {

    background: url(../images/prologin_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .manLogin {

    background: url(../images/manlogin_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .reg {

    background: url(../images/reg.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .cusSer {

    background: url(../images/cusser_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .proSer {

    background: url(../images/proser_2.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .email {

    background: url(../images/email.png) no-repeat

}



.foot3 .footContent .contentTop .topItem .tel {

    font-size: 34px !important;

    position: relative;

    top: -10px;

    color: #FE5453

}



.foot3 .footContent .contentTop .topItem .workTime {

    position: relative;

    top: -3px

}



.directorWants {

    width: 130px;

    height: 28px;

    line-height: 27px;

    position: absolute;

    top: 0px;

    right: 0px;

    text-align: center;

    border: 1px solid #FE5453;

    border-radius: 4px;

    font-size: 1.4rem;

    color: #FE5453

}



.directorWants:hover {

    background: #FE5453;

    color: white;

    border: none

}



.right-part img {

    height: 30px;

    width: 30px;

    border-radius: 90px

}



#getImgUrl {

    height: 30px;

    width: 30px;

    border-radius: 90px

}









@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .login-item {

        max-width: 120px

    }

}



@media screen and (min-width: 1500px) {

    .login-item {

        max-width: 180px

    }

}



.headerMove .login-item {

    color: #FE5453 !important;

    font-weight: 500

}



.headerMove .warn {

    width: 16px;

    height: 16px;

    border-radius: 120px;

    background: #FE5453;

    color: white;

    text-align: center;

    line-height: 18px;

    position: absolute;

    top: 33px;

    left: 17px

}



.headerMove {

    height: 60px !important;

    background: white;

    -moz-box-shadow: 10px 10px 5px #cccccc;

    box-shadow: 0px 0px 10px #cccccc

}



.headerMove .header-item {

    line-height: 60px !important;

    color: black;

    font-weight: 500

}



.headerMove .header-item:hover {

    color: #FE5453 !important

}



.headerMove .header-item:hover .showVideo {

    background-position: 0px -15px !important

}



.headerMove .header-item span {

    bottom: 10px

}



.headerMove .showVideo {

    width: 15px;

    height: 15px;

    background: url(../images/showvideob.png) no-repeat 0 0px !important;

    position: absolute;

    top: 23px !important;

    left: 75px !important

}



.headerMove .tele-h-svg {

    transition: all .8s ease-in-out 0s;

    position: relative;

    top: 22px !important;

    width: 145px;

    height: 60px;

    background: url(../images/bannerphoner.svg) no-repeat !important

}



.headerMove .nav .logo {

    background: url(../images/bannerlogor.png) no-repeat;

    width: 92px !important;

    height: 30px !important;

    background-size: 92px 30px !important;

    top: 14px !important;

    border-radius: 0px !important

}



.headerMove .menu-bar .middle-part {

    top: 15px

}



.headerMove .menu-bar .middle-part input {

    color: #000 !important;

    border: 1px solid #666 !important

}



.headerMove .menu-bar .middle-part .bannerSearchFind {

    background: url(../images/bannnersearch.png) no-repeat;

    background-position-y: -16px

}



.nav .logo {

    position: relative;

    float: left;

    top: 22px;

    background: url(../images/bannerlogow.png) no-repeat;

    width: 110px;

    height: 36px;

    background-size: 110px 36px;

    transition: all .8s ease-in-out 0s;

    border-radius: 0px;

    margin-right: 26px !important

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .nav .logo {

        margin-right: 76px !important

    }

}



@media screen and (min-width: 1500px) {

    .nav .logo {

        margin-right: 76px !important

    }

}



.nav .logo h1 {

    text-indent: -119988px;

    overflow: hidden;

    text-align: left

}



.menu-bar>.right-part {

    right: -20px !important

}



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

    .menu-bar>.right-part {

        margin-right: 25px

    }

}



.menu-bar .middle-part {

    top: 24px;

    width: 300px;

    height: 30px;

    transition: all .8s ease-in-out 0s;

    width: 115px !important

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .menu-bar .middle-part {

        width: 300px !important

    }

}



@media screen and (min-width: 1500px) {

    .menu-bar .middle-part {

        width: 400px !important

    }

}



.menu-bar .middle-part input {

    width: 115px !important;

    min-width: 115px;

    height: 30px !important;

    color: white;

    border: 1px solid white;

    outline: none;

    padding-right: 40px

}



@media screen and (min-width: 1276px) and (max-width: 1500px) {

    .menu-bar .middle-part input {

        width: 300px !important

    }

}



@media screen and (min-width: 1500px) {

    .menu-bar .middle-part input {

        width: 400px !important

    }

}



.menu-bar .middle-part .bannerSearchFind {

    position: absolute;

    right: 15px;

    top: 7px;

    width: 15px;

    height: 15px;

    background: url(../images/bannnersearch.png) no-repeat;

    cursor: pointer

}