@charset "UTF-8";
/* === BASE === */
* { margin: 0; padding: 0; }

body { font: 16px "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti,
 "STHeiti Light [STXihei]", "Microsoft Yahei", sans-serif; position: relative; color: #333333; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

ol, ul { list-style: none; }

a { text-decoration: none; }

input { text-align: inherit; }

textarea { resize: none; }

/*使如下元素默认鼠标经过是`小手`的形状（一般表示可以点击）*/
button, input[type="submit"], input[type="button"] { cursor: pointer; }

input, button, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; outline: none; border: none; }

/*取消火狐浏览器部分版本`input`聚焦的时候默认的`padding、border`*/
input::-moz-focus-inner { padding: 0; border: 0; }

/*取消部分浏览器`input[type='number']`的默认样式*/
input[type="number"] { -moz-appearance: textfield; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/*输入控件的`placeholder`颜色设置为`#999`（浅灰色）*/
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 111111s; -webkit-transition: color 11111s ease-out, background-color 111111s ease-out; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; }

input:-moz-placeholder, textarea:-moz-placeholder { color: #999; }

input::-moz-placeholder, textarea::-moz-placeholder { color: #999; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; }

/* === BASE END === */
.w-1200 { width: 1200px; margin: 0px auto; padding: 50px 0; }

/* === HEADER === */
.header { width: 100%; margin: 0 auto; height: 80px; position: fixed; background-color: #fff; z-index: 100; /*box-shadow: 0 1px 10px 1px #eeeeee;*/ display: flex; justify-content: space-between; }

.header_container { box-sizing: border-box; margin: 0 auto; min-width: 1200px; height: 100%; display: flex; align-items: center; justify-content: space-between; }

.header_logo { width: 137px; height: 55px; }

.header_logo img { width: 100%; height: 100%; }

.header_nav { width: 60%; display: flex; position: relative; display: flex; justify-content: space-between; align-items: center; }

.header_nav a { color: #333333; }

.header_nav a:hover { color: #0622c2; }

.header_nav .nav--active { color: #0622c2; }

.header .tel { margin-left: 40px; display: flex; flex-direction: row; align-items: center; }

.header .tel .tel-icon { margin-right: 10px; display: block; width: 17px; height: 17px; }

/* === HEADER END === */
/* === BANNER === */
.header-none { height: 80px; }

.banner { width: 100%; height: 800px; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.banner .banner-text { display: block; width: 582px; height: 245px; }

/* === BANNER END === */
.section1 { width: 100%; height: 747px; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.section1-text-box { width: 80%; float: right; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; position: relative; }

.section1-text-box .text-wrapper { width: 69%; padding-right: 135px; float: right; }

.section1-text-box .text-wrapper h1 { font-weight: 600; font-size: 26px; margin-bottom: 10px; }

.section1-text-box .text-wrapper h2 { font-weight: normal; font-size: 18px; }

.section1-img { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.business { width: 100%; height: 998px; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; position: relative; z-index: 0; }

.business .left-img { position: absolute; left: 0; top: 0; z-index: -1; display: block; }

.business .w-1200 { position: relative; height: 100%; padding: 0; display: flex; align-items: center; }

.business-text-box { z-index: 10; width: 67%; height: 80%; position: absolute; }

.business .text-wrapper { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.business .text-wrapper ul { height: 78%; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 40px; }

.business .text-wrapper li { text-align: right; color: #fff; }

.business .text-wrapper h1 { margin-bottom: 20px; font-size: 22px; }

.business .text-wrapper p { font-size: 16px; color: rgba(255, 255, 255, 1); }

.business .title { color: #fff; display: flex; justify-content: flex-end; align-items: baseline; border-right: 4px solid #fff; }

.business .title .title--cn { color: #fff; font-size: 40px; margin-right: 20px; }

.business .title .title--en { font-size: 34px; font-weight: 300; margin-right: 20px; color: rgba(255, 255, 255, 0.8); }

.strengths { width: 100%; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; position: relative; }

.strengths .title { color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.strengths .title .title--cn { font-weight: bold; color: #000; font-size: 40px; }

.strengths .title .title--en { color: #000; font-size: 34px; font-weight: 300; }

.strengths_item { margin: 40px 0; display: flex; justify-content: space-evenly; align-items: center; }

.strengths_item .li { box-sizing: border-box; position: relative; }

.strengths_item .li img { width: 372px; height: 496px; display: block; }

.strengths_item .li .desc_text { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 270px; box-sizing: border-box; padding: 50px 16px; }

.strengths_item .li .desc_text h1 { font-size: 20px; color: rgba(255, 255, 255, 1); font-weight: normal; margin-bottom: 4px; }

.strengths_item .li .desc_text h2 { font-size: 18px; font-weight: normal; color: rgba(255, 255, 255, 1); }

.strengths_item .li .desc_text .line { margin: 10px 0 14px; display: block; width: 16px; height: 2px; background-color: rgba(255, 255, 255, 1); }

.strengths_item .li .desc_text .p-en1 { font-size: 18px; color: rgba(255, 255, 255, 1); }

.strengths_item .li .desc_text .p-en2 { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, 1); font-weight: 300; }

.case { height: 1028px; width: 100%; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; }

.case .title { margin-top: 30px; color: #fff; display: flex; flex-direction: row; align-items: flex-end; }

.case .title .title--cn { font-size: 34px; font-weight: bold; }

.case .title .title--en { margin-left: 20px; font-weight: 300; font-size: 34px; }

.case-container { margin-top: 40px; display: flex; justify-content: space-between; }

.case .left-wrapper { width: 480px; }

.case .left-wrapper .menu { width: 100%; display: flex; flex-direction: column; padding: 40px 0 20px; box-sizing: border-box; }

.case .left-wrapper .li-list-style { width: 100%; display: flex; flex-direction: row; }

.case .left-wrapper .li-list-style li { margin-right: 20px; width: 40px; height: 2px; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; }

.case .left-wrapper .li-list-style .active { background-color: #0522be; }

.case .left-wrapper .nav-li { margin-top: 70px; width: 100%; display: flex; }

.case .left-wrapper .nav-li li { margin-right: 30px; color: rgba(255, 255, 255, 0.8); cursor: pointer; }

.case .left-wrapper .nav-li .active { color: #0522be; }

.case .case-items { display: flex; flex-direction: column; }

.case .case-items .items-wrapper { display: none; }

.case .case-items .items { margin-top: 30px; }

.case .case-items .items .name { color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1.5; }

.case .case-items .items .time { color: #999; line-height: 1.5; font-size: 14px; }

.case .case-items .items .image-box { margin-top: 10px; width: 480px; height: 195px; position: relative; cursor: pointer; }

.case .case-items .items .image-box .image { width: 100%; height: 100%; display: block; }

.case .case-items .items .image-box .icon-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.case .right-wrapper { width: 680px; display: flex; flex-direction: column; }

.case .right-wrapper .name-title { padding: 20px; box-sizing: border-box; font-weight: bold; font-size: 26px; background-color: #fff; }

.case .right-wrapper .image-box { width: 680px; height: 400px; position: relative; cursor: pointer; }

.case .right-wrapper .image-box .image { width: 100%; height: 100%; display: block; }

.case .right-wrapper .image-box .icon-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.case .right-wrapper .text-box { flex: 1; padding-top: 80px; position: relative; }

.case .right-wrapper .text-box::after { cursor: pointer; content: "+"; background-color: #0521c2; font-size: 40px; font-weight: lighter; width: 60px; height: 60px; position: absolute; right: 0; top: 0; text-align: center; line-height: 60px; color: rgba(255, 255, 255, 0.8); }

.case .right-wrapper .text-box p { text-indent: 2em; line-height: 1.5; width: 80%; color: rgba(255, 255, 255, 0.9); }

.service { width: 100%; height: 823px; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; position: relative; z-index: 0; }

.service .left-img { position: absolute; left: 0; top: 0; z-index: -1; display: block; }

.service .w-1200 { position: relative; height: 100%; }

.service-text-box { z-index: 10; margin-top: 40px; height: 80%; position: absolute; }

.service .text-wrapper { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.service .text-wrapper ul { height: 78%; display: flex; flex-direction: column; justify-content: space-between; padding-left: 20px; position: relative; }

.service .text-wrapper li { color: #000; }

.service .text-wrapper h1 { margin-bottom: 4px; font-size: 18px; }

.service .text-wrapper p { font-size: 16px; color: rgba(0, 0, 0, 0.8); }

.service .title { position: absolute; right: 40px; top: 190px; color: #000; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }

.service .title .title--cn { color: #000; font-weight: bold; font-size: 40px; }

.service .title .title--en { font-size: 40px; font-weight: 300; color: rgba(0, 0, 0, 0.8); }

.section6 { width: 100%; height: 400px; min-width: 1200px; background-repeat: no-repeat; background-size: cover; background-position: bottom; position: relative; }

.section6 .w-1200 { padding: 0; }

.section6 .text-wrapper { height: 400px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; color: #fff; }

.section6 .text-wrapper h1 { font-size: 44px; font-weight: bold; margin: 80px 0 40px; }

.section6 .text-wrapper p { margin-bottom: 30px; color: rgba(255, 255, 255, 0.8); }

/* === BRAND END === */
/* === CONTACT === */
.contact .title { margin-bottom: 30px; }

.contact .title .title--cn { font-weight: bold; font-size: 28px; }

.contact .title .title--en { font-weight: bold; font-size: 22px; margin-top: 10px; }

.contact .line-style { width: 100%; height: 2px; background-color: #4e4e4e; margin: 40px 0; }

.contact_container { display: flex; justify-content: space-between; }

.contact_container .desc_text { display: flex; flex-direction: column; justify-content: space-between; }

.contact_container .desc_text .button { width: 140px; height: 50px; background-color: #000; border-radius: 50px; color: #fff; }

.contact_address .items { text-align: center; width: 20%; display: flex; flex-direction: column; align-items: center; }

.contact_address .items img { margin-bottom: 20px; }

.contact_message { margin-top: 40px; width: 100%; }

.contact_message .form-box { width: 100%; }

.contact_message .form-con { width: 100%; }

.contact_message .form-row { display: flex; justify-content: space-between; align-items: center; }

.contact_message .form-row .form-item { width: 40%; display: flex; flex-wrap: nowrap; align-items: center; padding: 5px 0; box-sizing: border-box; -webkit-box-sizing: border-box; border-bottom: 1px solid #494949; margin-bottom: 20px; }

.contact_message .form-row .form-item .f-title { white-space: nowrap; }

.contact_message .form-row .form-item .f-input { flex: 1 1 auto; margin-left: 10px; }

.contact_message .form-row .text_area_item { width: 100%; }

.contact_message .form-row .text_area_item .f-textarea { padding: 5px; margin-top: 10px; width: 100%; height: 200px; border: 1px solid #494949; box-sizing: border-box;}

.contact_message .form-bottom { display: flex; justify-content: space-between; align-items: center; }

.contact_message .form-bottom .form-btn { width: 100px; height: 40px; background-color: transparent; font-size: 16px; color: #000; text-align: center; border: 1px solid #494949; }

.contact .h1 { font-weight: bold; font-size: 30px; margin-bottom: 20px; }

.contact .h2 { font-weight: bold; font-size: 22px; margin: 20px 0; color: #333; }

.contact .h3 { font-weight: bold; font-size: 18px; margin: 20px 0; }

.contact .text_p { font-size: 16px; line-height: 1.5; }

.footer { background-color: #1f1f1f; border: 1px solid #000; }

.footer-container { padding: 30px 0; width: 1200px; min-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

.footer-container .logo { width: 177px; height: 72px; }

.footer-container .logo img { width: inherit; height: inherit; display: block; }

.footer-container .middle { width: 50%; color: #fff; }

.footer-container .middle h1 { font-size: 22px; margin-bottom: 6px; }

.footer-container .middle .nav-ul { border-top: 1px solid rgba(255, 255, 255, 0.8); padding: 10px 0; box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; }

.footer-container .middle .nav-ul li { color: rgba(255, 255, 255, 0.8); }

.footer-container .right { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

.footer-container .right .right-l { display: flex; flex-direction: column; align-items: center; }

.footer-container .right .tel-item { display: flex; flex-direction: row; align-items: center; }

.footer-container .right .tel-item .tel-icon { margin-right: 10px; width: 17px; height: 17px; display: block; }

.footer-container .right .tel-item h1 { font-size: 24px; color: #fff; }

.footer-container .right .lis { margin-top: 14px; display: flex; flex-direction: row; justify-content: space-between; }

.footer-container .right .lis .img-icon { width: 27px; height: 27px; display: block; }

.footer-container .right .lis .img-icon:not(:last-child) { margin-right: 10px; }

.footer-container .right .right-r { margin-left: 40px; width: 120px; height: 120px; }

.footer-container .right .right-r .qr-code { width: 100%; height: 100%; display: block; }

.footer-bottom { width: 1200px; min-width: 1200px; margin: 0 auto; text-align: center; padding: 0 0 30px; color: rgba(255, 255, 255, 0.8); }

.footer-bottom a { color: rgba(255, 255, 255, 0.8); }

.video-dialog .shadow { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 9; }

.video-dialog .boxed-group { width: 980px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.video-dialog .boxed-group .video-title { display: flex; align-items: center; justify-content: space-between; color: #fff; }

.video-dialog .boxed-group .video-title h3 { font-size: 20px; }

.video-dialog .boxed-group .video-title #cancel { font-size: 40px; cursor: pointer; }

.video-dialog .boxed-group .video-title #cancel:hover { color: #aaa; }

.video-dialog .boxed-group .boxed-group-inner { height: 550px; font-size: 14px; font-weight: 300; color: #aaa; border-color: #e6e9ed; }

.video-dialog #play-video { background-color: #c0392b; border: 1px solid #ab3326; }

.video-dialog #play-video:hover { background-color: #ab3326; }

/* === CONTACT END === */
#About, #Item, #Case, #Service, #Contact { position: relative; top: -80px; }