* { margin: 0; padding: 0; }

li { list-style: none; }

img { margin: 0; display: block; }

a { text-decoration: none; }

div { display: block; }

.clearfloat { clear: both; }

/*文章全选背景颜色及文字颜色*/
::selection { color: #1c1c1c; background-color: #eee; }

::-moz-selection { color: #1c1c1c; background-color: #eee; }

/*noinspection ALL*/
::-webkit-selection { color: #1c1c1c; background-color: #eee; }

@font-face { font-family: 'SourceHanSansCN-ExtraLight'; src: url('') format('embedded-opentype') }
@font-face { font-family: 'SourceHanSansCN-Light'; src: url('') format('embedded-opentype') }

@font-face { font-family: 'SourceHanSansCN-Regular'; src: url('') format('embedded-opentype') }
@font-face { font-family: 'SourceHanSansCN-Normal'; src: url('') format('embedded-opentype') }


@font-face { font-family: 'SourceHanSansCN-Medium'; src: url('') format('embedded-opentype') }



@font-face { font-family: 'SourceHanSansCN-Bold'; src: url('') format('embedded-opentype') }

@font-face { font-family: 'SourceHanSansCN-Heavy'; src: url('') format('embedded-opentype') }

@font-face { font-family: Montserrat-Medium; src: url(""), url("") format("truetype"); }

@font-face { font-family: Montserrat-ExtraLight; src: url(""), url("") format("truetype"); }


.top { width: 100%; height: 40px; padding-top: 20px; position: fixed; top: 0; left: 0; z-index: 11111; padding-bottom: 20px; transition: 0.3s; background-color: white; }
.top_logo { width: 450px; margin-left: 5%; float: left; position: relative; }
.logo_1 { width: 45px; float: left; }
.logo_1 img { width: 100%; }
/*.logo_2 { width: 320px; float: left; margin-left: 8px; overflow: hidden; }
.logo_2 img { width: 100%; position: relative; transition: 1s; }*/
.top_consult { width: 220px; float: right; margin-right: 60px; font-family: "Montserrat-Medium"; font-size: 14px; margin-top: 8px; opacity: 0; transition: 0.3s; }
.home { width: 80px; height: 80px; float: right; margin-right: calc(5% - 16px); margin-top: -20px; position: relative; z-index: 1111111; cursor: pointer; }

.menu { height: 80px; width: 80px; position: relative; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; }

.bar { height: 2px; width: 30px; display: block; position: relative; background-color: #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; }
.bar-color { background-color: #fff; }
.bar { position: absolute; }
.bar1 { top: 29px; left: 25px; -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s; -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out; -webkit-transition-delay: 0.3s, 0.1s; transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s; -moz-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); -webkit-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); }
.bar2 { top: 39px; left: 25px; -moz-transition: ease 0.3s 0.3s; -o-transition: ease 0.3s 0.3s; -webkit-transition: ease 0.3s; -webkit-transition-delay: 0.3s; transition: ease 0.3s 0.3s; -moz-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); -webkit-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); }
.bar3 { top: 49px; left: 25px; -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s; -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out; -webkit-transition-delay: 0.3s, 0.1s; transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s; -moz-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); -webkit-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01); }
.menu .bar1-1 { top: 40px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s; -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out; -webkit-transition-delay: 0.1s, 0.5s; transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s; }
.menu .bar2-2 { opacity: 0; }
.menu .bar3-3 { top: 40px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s; -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out; -webkit-transition-delay: 0.1s, 0.5s; transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s; }









.nav { background-color: black; width: 860px; height: 100vh; position: absolute; top: 0; right: -860px; transition: 0.5s; }
.nav_nav { right: 0; }
.nav ul { margin: 0 auto; text-align: left; margin-top: 140px; }
.nav ul li { font-size: 32px; line-height: 50px; position: relative; margin-left: 50px; }
.nav ul li a { font-family: "Montserrat-Medium"; letter-spacing: 2px; color: white; }
.link { outline: none; text-decoration: none; position: relative; letter-spacing: 2px; color: #9e9ba4; display: inline-block; }
/* Mallki */
.link--mallki { -webkit-transition: color 0.5s 0.25s; transition: color 0.5s 0.25s; overflow: hidden; }

.link--mallki:hover { -webkit-transition: none; transition: none; color: transparent; }

.link--mallki::before { content: ''; width: 104%; height: 2px; margin: -3px 0 0 0; background: #fff; position: absolute; left: -2px; top: 50%; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transition-timing-function: cubic-bezier(0.3,0,0.3,1); transition-timing-function: cubic-bezier(0.3,0,0.3,1); }

.link--mallki:hover::before { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); }

.link--mallki span { font-family: "SourceHanSansCN-Light"; position: absolute; height: 50%; width: 100%; left: 0; top: 0; overflow: hidden; }

.link--mallki span::before { content: attr(data-letters); position: absolute; left: 0; width: 100%; color: #fff; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }

.link--mallki span:nth-child(2) { top: 50%; }

.link--mallki span:first-child::before { top: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }

.link--mallki span:nth-child(2)::before { bottom: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }

.link--mallki:hover span::before { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition-timing-function: cubic-bezier(0.3,1,0.3,1); transition-timing-function: cubic-bezier(0.3,1,0.3,1); }
.nav_contact { color: rgba(255,255,255,0.9); position: absolute; bottom: 40px; left: 50px; }
.nav_contact .nav_phone { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; font-weight: bold; }
.nav_contact .nav_phone1, .nav_contact .nav_email { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; }
.nav_contact .nav_name { font-family: "SourceHanSansCN-Light"; font-size: 14px; line-height: 24px; }
.nav_contact ul { margin: 0; margin-top: 15px; width: 200px; }
.nav_contact ul li { margin: 0; width: 12%; float: left; margin-right: 7%; position: relative; }
.nav_contact ul li img { width: 100%; }
.nav_contact ul li .gray { position: absolute; top: 0; opacity: 0; transition: 0.5s; }
.nav_contact ul li .white { transition: 0.5s; }
.nav_contact ul li:hover .gray { opacity: 1; }
.nav_contact ul li:hover .white { opacity: 0; }


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

    .nav { width: 600px; right: -600px; background-color: black; height: 100vh; position: absolute; top: 0; transition: 0.5s; }
    .nav_nav { right: 0; }
    .nav ul { margin: 0 auto; text-align: left; margin-top: 140px; }
    .nav ul li { font-size: 28px; line-height: 38px; position: relative; margin-left: 50px; }
    .nav ul li a { font-family: "Montserrat-Medium"; letter-spacing: 2px; color: white; }
    .nav ul li a .cn { width: 100%; display: block; position: absolute; top: 0; opacity: 0; }
    .nav ul li a .en { font-family: "Montserrat-Medium"; }
    .nav ul li a:hover .en { opacity: 0; }
    .nav ul li a:hover .cn { opacity: 1; }
    .nav_contact { color: rgba(255,255,255,0.9); position: absolute; bottom: 40px; left: 50px; }
    .nav_contact .nav_phone { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; font-weight: bold; }
    .nav_contact .nav_phone1, .nav_contact .nav_email { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; }
    .nav_contact .nav_name { font-family: "SourceHanSansCN-Light"; font-size: 14px; line-height: 24px; }
    .nav_contact ul { margin: 0; margin-top: 15px; width: 200px; }
    .nav_contact ul li { margin: 0; width: 12%; float: left; margin-right: 7%; position: relative; }
    .nav_contact ul li img { width: 100%; }
    .nav_contact ul li .gray { position: absolute; top: 0; opacity: 0; transition: 0.5s; }
    .nav_contact ul li .white { transition: 0.5s; }
    .nav_contact ul li:hover .gray { opacity: 1; }
    .nav_contact ul li:hover .white { opacity: 0; }
}

@media (min-width:750px) and (max-width:1024px) {
    .top_consult { font-size: 0; }
    .nav { width: 512px; right: -512px; background-color: black; height: 100vh; position: absolute; top: 0; transition: 0.5s; }
    .nav_nav { right: 0; }
    .nav ul { margin: 0 auto; text-align: left; margin-top: 140px; }
    .nav ul li { font-size: 28px; line-height: 38px; position: relative; margin-left: 50px; }
    .nav ul li a { font-family: "Montserrat-Medium"; letter-spacing: 2px; color: white; }
    .nav ul li a .cn { width: 100%; display: block; position: absolute; top: 0; opacity: 0; }
    .nav ul li a .en { font-family: "Montserrat-Medium"; }
    .nav ul li a:hover .en { opacity: 0; }
    .nav ul li a:hover .cn { opacity: 1; }
    .nav_contact { color: rgba(255,255,255,0.9); position: absolute; bottom: 40px; left: 50px; }
    .nav_contact .nav_phone { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; font-weight: bold; }
    .nav_contact .nav_phone1, .nav_contact .nav_email { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; }
    .nav_contact .nav_name { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; }
    .nav_contact ul { margin: 0; margin-top: 15px; width: 200px; }
    .nav_contact ul li { margin: 0; width: 12%; float: left; margin-right: 7%; position: relative; }
    .nav_contact ul li img { width: 100%; }
    .nav_contact ul li .gray { position: absolute; top: 0; opacity: 0; transition: 0.5s; }
    .nav_contact ul li .white { transition: 0.5s; }
    .nav_contact ul li:hover .gray { opacity: 1; }
    .nav_contact ul li:hover .white { opacity: 0; }
}


@media (min-width:500px) and (max-width:750px) {
    .top_logo { width: 380px; margin-left: 5%; float: left; position: relative; }
    .logo_1 { width: 36px; float: left; }
    .logo_1 img { width: 100%; }
    .logo_2 { width: 300px; float: left; margin-left: 8px; overflow: hidden; }
    .logo_2 img { width: 100%; position: relative; transition: 1s; }
    .top_consult { font-size: 0; }
    .nav { width: 100%; right: -100%; background-color: rgba(0,0,0,0.8); height: 100vh; position: absolute; top: 0; transition: 0.5s; }
    .nav_nav { right: 0; }
    .nav ul { margin: 0 auto; text-align: left; margin-top: 140px; }
    .nav ul li { font-size: 28px; line-height: 36px; position: relative; margin-left: 50px; }
    .nav ul li a { font-family: "Montserrat-Medium"; letter-spacing: 2px; color: white; }
    .nav ul li a .cn { width: 100%; display: block; position: absolute; top: 0; opacity: 0; }
    .nav ul li a .en { font-family: "Montserrat-Medium"; }
    .nav ul li a:hover .en { opacity: 0; }
    .nav ul li a:hover .cn { opacity: 1; }
    .nav_contact { color: rgba(255,255,255,0.9); position: absolute; bottom: 40px; left: 50px; }
    .nav_contact .nav_phone { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; font-weight: bold; }
    .nav_contact .nav_phone1, .nav_contact .nav_email { font-family: "Montserrat-Medium"; font-size: 14px; line-height: 24px; }
    .nav_contact .nav_name { font-family: "SourceHanSansCN-Light"; font-size: 14px; line-height: 24px; }
    .nav_contact ul { margin: 0; margin-top: 15px; width: 200px; }
    .nav_contact ul li { margin: 0; width: 12%; float: left; margin-right: 7%; position: relative; }
    .nav_contact ul li img { width: 100%; }
    .nav_contact ul li .gray { position: absolute; top: 0; opacity: 0; transition: 0.5s; }
    .nav_contact ul li .white { transition: 0.5s; }
    .nav_contact ul li:hover .gray { opacity: 1; }
    .nav_contact ul li:hover .white { opacity: 0; }
}

@media (max-width:550px) {
    .top { padding-top: 15px; height: 30px; padding-bottom: 15px; }
    .top_logo { width: 100px; margin-left: 5%; float: left; position: relative; }
    .logo_1 { width: 32px; float: left; }
    .logo_1 img { width: 100%; }
    .logo_2 { opacity: 0; }
    .top_consult { font-size: 0; }
    .home { float: right; margin-top: -25px; position: relative; z-index: 1111111; cursor: pointer; }

    .nav { width: 100%; right: -100%; background-color: rgba(0,0,0,1); height: 100vh; position: absolute; top: 0; transition: 0.5s; }
    .nav_nav { right: 0; }
    .nav ul { margin: 0 auto; text-align: left; margin-top: 140px; }
    .nav ul li { font-size: 24px; line-height: 40px; position: relative; margin-left: 50px; }
    .nav ul li a { font-family: "Montserrat-Medium"; letter-spacing: 2px; color: white; }
    .nav ul li a .cn { width: 100%; display: block; position: absolute; top: 0; opacity: 0; }
    .nav ul li a .en { font-family: "Montserrat-Medium"; }
    .nav ul li a:hover .en { opacity: 0; }
    .nav ul li a:hover .cn { opacity: 1; }
    .nav_contact { color: rgba(255,255,255,0.9); position: absolute; bottom: 30px; left: 50px; }
    .nav_contact .nav_phone { font-family: "Montserrat-Medium"; font-size: 12px; line-height: 20px; font-weight: bold; }
    .nav_contact .nav_phone1, .nav_contact .nav_email { font-family: "Montserrat-Medium"; font-size: 12px; line-height: 20px; }
    .nav_contact .nav_name { font-family: "SourceHanSansCN-Light"; font-size: 12px; line-height: 20px; }
    .nav_contact ul { margin: 0; margin-top: 15px; width: 200px; }
    .nav_contact ul li { margin: 0; width: 12%; float: left; margin-right: 7%; position: relative; }
    .nav_contact ul li img { width: 100%; }
    .nav_contact ul li .gray { position: absolute; top: 0; opacity: 0; transition: 0.5s; }
    .nav_contact ul li .white { transition: 0.5s; }
    .nav_contact ul li:hover .gray { opacity: 1; }
    .nav_contact ul li:hover .white { opacity: 0; }
}





.banner { width: 100%; position: relative; margin-top: 50px; overflow: hidden; }
.banner > img { width: 100%; min-height: 500px; }
.banner_content { position: absolute; left: 12.5%; top: calc(50% - 50px); width: 50%; color: white; text-transform: Uppercase; }
.banner_content h1 { font-family: "Montserrat-Medium"; font-size: 32px; margin-bottom: 30px; }
.banner_content span { display: block; font-family: "Montserrat-Medium"; font-size: 18px; margin-bottom: 30px; }
.banner_content .arrow { width: 20px; height: 40px; /*overflow: hidden;*/ position: relative; }
.banner_content .arrow img { width: 100%; position: absolute; top: 0; left: 0; animation: showHideDot 1.5s ease-in-out infinite; }

@keyframes showHideDot {
    0% { top: 0; }
    50% { top: 20%; }
    100% { top: 0; }
}

@media screen and (max-width:1220px) {
    .banner > img { width: auto; margin-left: calc(50% - 600px); height: 500px; }
    .banner_content h1 { font-size: 30px; margin-bottom: 30px; }
    .banner_content span { margin-bottom: 30px; }
}

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

@media screen and (max-width:680px) {
    .banner_content { position: absolute; left: 12.5%; top: calc(35% - 50px); width: 75%; color: white; text-transform: Uppercase; }
    .banner_content h1 { font-size: 24px; margin-bottom: 20px; }
    .banner_content span { font-size: 16px; margin-bottom: 20px; }
    .banner_content .arrow { width: 10px; height: 40px; /*overflow: hidden;*/ position: relative; }
}









/*案例*/
.case { width: 90%; max-width: 2120px; margin: 0 auto; margin-top: 30px; margin-bottom: 50px; }
.case .case_top { margin: auto 10px; }
.case .case_top .case_title { float: left; font-family: "Montserrat-Medium"; font-size: 12px; text-transform: uppercase; color: white; }

.case .case_top .case_nav { float: right; }

.case .case_top .case_nav ul li { float: left; margin-left: 20px; text-align: right; overflow: hidden; }
.case .case_top .case_nav ul li a{color:#FFF;}
.case .case_top .case_nav ul li.active a { font-weight: bold; }
.case .case_top .case_nav ul li { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; color: white; }
.case .case_top .case_nav ul li:first-child { margin-left: 0; }
.case .case_top .case_nav ul .case_text { font-family: "Montserrat-Medium"; }

.case .case_top .case_nav ul .case_on { text-decoration: underline; }

.case .case_top .case_nav ul li:hover { text-decoration: underline; cursor: pointer; }

.case_all { position: relative; }

.case_all .case_all_img { width: 100%; float: left; position: relative; overflow: hidden; }




.lanren { width: 100%; height: auto; margin: 0 auto; overflow: hidden; text-align: left; }


.lanren li { width: calc(20% - 10px); margin: 5px; border-radius: 4px; float: left; overflow: hidden; }

.lanren li img { width: 100%; }

.lanren p { text-align: center; padding: 10px; }




.case_all .case_all_img img { width: 100%; display: block; transition: all 0.5s; }

.case_all .case_all_img:hover img { transform: scale(1.1); }

.case_all .case_all_img .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

.case_all .case_all_img:hover .case_all_bg { opacity: 1; }

.case_all .case_all_img .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 24px; color: white; position: absolute; top: -8%; left: 5%; transition: 0.5s; }
.case_all .case_all_img:hover .case_all_bg .h1 { top: 8%; }
.case_all .case_all_img .case_all_bg .h3 { font-family: "SourceHanSansCN-Light"; font-size: 16px; color: white; position: absolute; top: -16%; left: 5%; transition: 0.5s; }
.case_all .case_all_img:hover .case_all_bg .h3 { top: 16%; }
.case_all .case_all_img .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; position: absolute; left: -5%; bottom: 20%; transition: 0.5s; }
.case_all .case_all_img:hover .case_all_bg .case_all_line { left: 5%; }
.case_all .case_all_img .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 16px; color: white; position: absolute; bottom: -15%; left: 5%; transition: 0.5s; }
.case_all .case_all_img:hover .case_all_bg .h2 { bottom: 15%; }
.case_all .case_all_img .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 12px; color: white; position: absolute; width: 84%; bottom: -7%; left: 5%; transition: 0.5s; }
.case_all .case_all_img:hover .case_all_bg .p { bottom: 7%; }
.case .case_more a { font-family: "Montserrat-Medium"; font-size: 20px; letter-spacing: 2px; color: black; }

.case .case_more:hover a { color: white; }

.case_all .case_all_img1 { width: calc(20% - 10px); margin: 5px; border-radius: 4px; float: left; position: relative; overflow: hidden; }

.case_all .case_all_img1 img { width: 100%; display: block; transition: all 0.5s; }

.case_all .case_all_img1:hover img { transform: scale(1.1); }

.case_all .case_all_img1 .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

.case_all .case_all_img1:hover .case_all_bg { opacity: 1; }

.case_all .case_all_img1 .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 24px; color: white; position: absolute; top: -8%; left: 5%; transition: 0.5s; }
.case_all .case_all_img1:hover .case_all_bg .h1 { top: 8%; }
.case_all .case_all_img1 .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 16px; color: white; position: absolute; top: -16%; left: 5%; transition: 0.5s; }
.case_all .case_all_img1:hover .case_all_bg .h3 { top: 16%; }
.case_all .case_all_img1 .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; position: absolute; left: -5%; bottom: 20%; transition: 0.5s; }
.case_all .case_all_img1:hover .case_all_bg .case_all_line { left: 5%; }
.case_all .case_all_img1 .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 16px; color: white; position: absolute; bottom: -15%; left: 5%; transition: 0.5s; }
.case_all .case_all_img1:hover .case_all_bg .h2 { bottom: 15%; }
.case_all .case_all_img1 .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 12px; color: white; position: absolute; width: 84%; bottom: -7%; left: 5%; transition: 0.5s; }
.case_all .case_all_img1:hover .case_all_bg .p { bottom: 7%; }

@media (min-width: 1024px) and (max-width: 1440px) {
    .lanren li { width: calc(25% - 10px); float: left; overflow: hidden; }
    .case_all .case_all_img img { width: 100%; display: block; transition: all 0.5s; }
    .case_all .case_all_img:hover img { transform: scale(1.1); }

    .case_all .case_all_img .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 22px; color: white; }

    .case_all .case_all_img .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; color: white; }

    .case_all .case_all_img .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 14px; color: white; }

    .case_all .case_all_img .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 12px; color: white; width: 84%; }

    .case_all .case_all_img1 { width: calc(25% - 10px); float: left; position: relative; overflow: hidden; }

    .case_all .case_all_img1 img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img1:hover img { transform: scale(1.1); }

    .case_all .case_all_img1 .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img1:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img1 .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 22px; color: white; }

    .case_all .case_all_img1 .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; color: white; }

    .case_all .case_all_img1 .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img1 .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 14px; color: white; }

    .case_all .case_all_img1 .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 12px; color: white; }
}


@media (min-width: 750px) and (max-width: 1024px) {
    .case .case_top .case_title { float: left; font-family: "Montserrat-ExtraLight"; font-size: 14px; text-transform: uppercase; }

    .case .case_top .case_nav ul li { float: left; margin-left: 20px; text-align: right; }

    .case .case_top .case_nav ul li { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; }

    .lanren li { width: calc(33.333% - 10px); float: left; overflow: hidden; }

    .case_all .case_all_img img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img:hover img { transform: scale(1.1); }

    .case_all .case_all_img .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 18px; color: white; }

    .case_all .case_all_img .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; color: white; }

    .case_all .case_all_img .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; bottom: 20%; }

    .case_all .case_all_img .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 14px; color: white; }

    .case_all .case_all_img .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 10px; color: white; }

    .case_all .case_all_img1 { width: calc(33.333% - 10px); float: left; position: relative; overflow: hidden; }

    .case_all .case_all_img1 img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img1:hover img { transform: scale(1.1); }

    .case_all .case_all_img1 .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img1:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img1 .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 18px; color: white; }

    .case_all .case_all_img1 .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; color: white; }

    .case_all .case_all_img1 .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img1 .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 14px; color: white; }

    .case_all .case_all_img1 .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 10px; color: white; }
}


@media (min-width: 500px) and (max-width: 750px) {

    .case .case_top .case_title { float: left; font-family: "Montserrat-ExtraLight"; font-size: 14px; text-transform: uppercase; }

    .case .case_top .case_nav ul li { float: left; margin-left: 10px; text-align: right; }

    .case .case_top .case_nav ul li { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; }

    .lanren li { width: calc(50% - 10px); float: left; overflow: hidden; }

    .case_all .case_all_img img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img:hover img { transform: scale(1.1); }

    .case_all .case_all_img .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 16px; color: white; }

    .case_all .case_all_img .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; color: white; }

    .case_all .case_all_img .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 12px; color: white; }

    .case_all .case_all_img .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 10px; color: white; }

    .case_all .case_all_img1 { width: calc(50% - 10px); float: left; position: relative; overflow: hidden; }

    .case_all .case_all_img1 img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img1:hover img { transform: scale(1.1); }

    .case_all .case_all_img1 .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img1:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img1 .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 16px; color: white; }

    .case_all .case_all_img1 .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; color: white; }

    .case_all .case_all_img1 .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img1 .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 12px; color: white; }

    .case_all .case_all_img1 .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 10px; color: white; }
}

@media (max-width: 550px) {

    .case .case_top .case_title { float: left; margin-right: 100px; font-family: "Montserrat-ExtraLight"; font-size: 20px; text-transform: uppercase; }

    .case .case_top .case_nav { float: left; margin-top: 10px; }

    .case .case_top .case_nav ul li { float: left; margin-left: 0; text-align: left; width: 22%; }

    .case .case_top .case_nav ul li { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; }
    .case .case_top .case_nav ul li:first-child { margin-left: 0; font-size: 16px; width: auto; margin-right: 5%; }
    .lanren li { width: calc(100% - 10px); float: left; overflow: hidden; }

    .case_all .case_all_img img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img:hover img { transform: scale(1.1); }

    .case_all .case_all_img .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 18px; }

    .case_all .case_all_img .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; color: white; }

    .case_all .case_all_img .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 14px; color: white; }

    .case_all .case_all_img .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 10px; color: white; }

    .case_all .case_all_img1 { width: calc(100% - 10px); float: left; position: relative; overflow: hidden; }

    .case_all .case_all_img1 img { width: 100%; display: block; transition: all 0.5s; }

    .case_all .case_all_img1:hover img { transform: scale(1.1); }

    .case_all .case_all_img1 .case_all_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 11; opacity: 0; transition: 0.5s; }

    .case_all .case_all_img1:hover .case_all_bg { opacity: 1; }

    .case_all .case_all_img1 .case_all_bg .h1 { font-family: "Montserrat-Medium"; text-transform: uppercase; font-size: 18px; color: white; }

    .case_all .case_all_img1 .case_all_bg .h3 { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 14px; color: white; }

    .case_all .case_all_img1 .case_all_bg .case_all_line { width: 30px; height: 2px; background-color: white; margin-bottom: 30px; }

    .case_all .case_all_img1 .case_all_bg .h2 { font-family: "SourceHanSansCN-Regular"; text-transform: uppercase; font-size: 14px; color: white; }

    .case_all .case_all_img1 .case_all_bg .p { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; text-transform: uppercase; font-size: 10px; color: white; }
}







/*底部导航*/
.bottom_frame { width: 100%; background-color: #1c1c1c; padding-top: 80px; }
.bottom_name { font-family: "SourceHanSansCN-Medium"; font-size: 30px; letter-spacing: 2px; color: #dddddd; margin-bottom: 30px; }
.bottom_nav { width: 1440px; margin: 0 auto; }
.bottom_left { width: 36%; float: left; }
.bottom_title ul li { width: 25%; float: left; font-size: 16px; color: #dddddd; font-family: "Montserrat-Medium"; }
.bottom_left .line { width: 100%; height: 1px; background-color: #333333; margin-top: 10px; }
.bottom_content ul { width: 25%; float: left; margin-top: 8px; }
.bottom_content ul li { line-height: 16px; }
.bottom_content ul li a { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; letter-spacing: 2px; color: #dddddd; }
.bottom_content ul li a:hover { color: gray; text-decoration: underline; }
.bottom_contact { width: 15%; margin-left: 13%; float: left; }
.bottom_contact .title { font-size: 16px; font-family: "Montserrat-Medium"; color: #dddddd; }
.bottom_contact .line { width: 120px; height: 1px; background-color: #333333; margin-top: 10px; }
.bottom_contact .phone { margin-top: 8px; font-family: "Montserrat-Medium"; font-size: 12px; color: #dddddd; line-height: 20px; }
.bottom_contact .email { font-family: "Montserrat-Medium"; font-size: 12px; color: #dddddd; }
.bottom_contact ul { margin: 0; margin-top: 12px; width: 240px; }
.bottom_contact ul li { margin: 0; width: 12%; float: left; margin-right: 8%; position: relative; }
.bottom_contact ul li img { width: 100%; }
.bottom_contact ul li .gray { position: absolute; top: 0; opacity: 0; transition: 0.5s; }
.bottom_contact ul li .white { transition: 0.5s; }
.bottom_contact ul li:hover .gray { opacity: 1; }
.bottom_contact ul li:hover .white { opacity: 0; }
.bottom_nav .ewm { float: right; width: 120px; }
.bottom_nav .ewm img { width: 100%; }
.bottom_nav .ewm .content { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; text-align: center; margin-top: 10px; letter-spacing: 4px; color: #dddddd; }
.bottom { width: 1440px; margin: 0 auto; margin-top: 50px; padding-bottom: 50px; }
.bottom .record { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; line-height: 24px; color: #555555; }
.bottom .record span { font-family: "Montserrat-Medium"; }
.bottom .record img { width: 16px; height: 100%; }
.bottom .friendship_link ul { width: 100%; }
.bottom .friendship_link ul li { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; line-height: 24px; color: #555555; float: left; margin-right: 10px; }
.bottom .friendship_link ul li a { font-family: "SourceHanSansCN-ExtraLight"; font-weight: 200; font-size: 12px; line-height: 24px; color: #777777; }




@media screen and (max-width:1560px) {
    .bottom_nav { width: 1024px; margin: 0 auto; }
    .bottom { width: 1024px; }
}

@media (min-width:750px) and (max-width:1024px) {
    .bottom_nav { width: 750px; margin: 0 auto; }
    .bottom { width: 750px; }
    .bottom_title ul li { width: 25%; float: left; }
    .bottom_content ul li a { letter-spacing: 2px; }
    .bottom_contact .line { width: 80px; }
}

@media (min-width:500px) and (max-width:750px) {
    .bottom_nav { width: 90%; margin: 0 auto; }
    .bottom_left { width: 100%; }
    .bottom_contact { width: 30%; margin-left: 0; float: left; margin-top: 20px }
    .bottom { width: 90%; }
    .bottom_title ul li { width: 25%; float: left; }
    .bottom_content ul li { line-height: 20px; }
    .bottom_contact .line { width: 80px; }
    .bottom_contact .email { font-size: 10px; }
    .bottom_contact ul { margin-top: 24px; width: 200px; }
    .bottom_nav .ewm { float: right; width: 120px; }
    .bottom .record { line-height: 20px; }
}

@media (max-width:550px) {
    .map img { width: 200%; margin-left: -50%; }
    .bottom_nav { width: 90%; margin: 0 auto; }
    .bottom_left { width: 0; height: 0; overflow: hidden; }
    .bottom_contact { width: 50%; margin-left: 0; float: left; }
    .bottom { width: 90%; margin: 0 auto; margin-top: 50px; padding-bottom: 30px; }
    .bottom_title ul li { width: 25%; float: left; font-size: 16px; }
    .bottom_content ul li { line-height: 20px; }
    .bottom_content ul li a { font-size: 12px; letter-spacing: 2px; }
    .bottom_contact .title { font-size: 16px; }
    .bottom_contact .line { width: 80px; }
    .bottom_contact .email { font-size: 12px; }
    .bottom_contact ul { margin-top: 24px; width: 200px; }
    .bottom_nav .ewm { float: right; width: 120px; }
    .bottom .record { font-size: 10px; line-height: 20px; }
    .bottom .friendship_link ul li { font-size: 8px; line-height: 16px; }
    .bottom .friendship_link ul li a { font-size: 8px; line-height: 16px; }
}




/*返回顶部*/
.back_to_top { position: fixed; bottom: 80px; right: 30px; width: 40px; color: #8a8a8a; text-align: center; font-size: 16px; font-family: "SourceHanSansCN-Regular"; }
.back_to_top img { width: 100%; }

@media (max-width:750px) {
    .back_to_top { position: fixed; bottom: 80px; right: 20px; width: 20px; color: #8a8a8a; text-align: center; font-size: 8px; font-family: "SourceHanSansCN-Regular"; }
    .back_to_top img { width: 100%; }
}