﻿@charset "utf-8";
/*头部导航*/
.tou{
	width:100%;
	height: 100vh;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.tou_load img{
	height: 30vh;
}
.tou_tu{
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	animation: 2s shangbian infinite linear;
}
.tou_bei{
	width:100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url("../images3/bei_01.png") no-repeat center;
	background-size:cover;
	animation: 40s fangda infinite linear;
}
@keyframes fangda{
		    0%{ transform: scale(5);}
		    50%{transform: scale(1); }
			100%{transform: scale(5); }
		}

@keyframes shangbian{
		    0%{ bottom: 10px; }
			25%{ bottom: 15px; }
		   	50%{ bottom: 10px; }
		   	75%{ bottom: 5px; }
		   
		    100%{bottom: 10px; }
		}

.banner{ 
	width:100%; 
	height: auto; 
	overflow:hidden; 
	position:relative; 
	background: url("../images3/bei_02.png") no-repeat center top;
	padding-top: 20.5rem;
}

.banner_img{ width:75vw; height:calc(75vw * 1020 / 1440); padding-top: 2.375rem; margin:0 auto; background:url(../images3/bei1_11.png) no-repeat center top; background-size:cover;  position:relative; z-index:2;}
.banner_img_1{
	width: 95.13%;
	 height:calc(75vw * 718 / 1370);
	margin: 0 auto;
	overflow: hidden;
	
}

.brief{ 
	width:75vw; 
	width: var(--mainwidth);
	height:auto; 
	overflow:hidden; 
	margin:0 auto;
	margin-top:9rem; 
	position: relative; 
	margin-bottom: 9.375rem;
}
.brief_bg{
	position: absolute;
	bottom: 0;
	left: 31.07%;
}
.brief_bg img{ width: 10.25rem; height: auto;}

.brief_con{ width:100%; height:auto;display: flex;justify-content: space-between; margin-top:2.75rem;}
.brief_left{ width:35.7%; height:auto;}
.brief_tit{ width:100%; color:#000; font-size:3.125rem;}
.brief_1{ font-size:2.125rem; color:#000; line-height:2.875rem;}
.brief_2{ font-size:1.25rem; color:rgba(0,0,0,0.6); line-height:2.125rem; margin-top: 4.5rem;}
.brief_3{ font-size:1.25rem; color:rgba(0,0,0,0.6); line-height:2rem; font-family:Arial;}
.brief_right{ 
	width:60.7%; 
	height: auto; 
	display: flex;
	justify-content: space-between;
	font-size:1.125rem; line-height:2.125rem;
}
.brief_ri{
	 color:rgba(0,0,0,0.8);
	font-size: 2.25rem;
	 font-family:Arial;
	line-height: 2.25rem;
}
.brief_nei{
	font-size: 1.125rem;
	color:rgba(0,0,0,0.8);
	line-height: 2.25rem;
	width: 82.35%;
}
.brief_nei span{
	font-family:Arial;
}

.impression_warp{
	width:100%;
	height: auto;
	position: relative;
}
.impression{
	width:75vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height:auto;
	display: flex;
	justify-content: space-between;
}
.impression_left{
	width: 70.7%;
	height: auto;
}
.impression_1{
	font-size: 2.875rem;
	color: #343434;
	line-height: 3.625rem;
	
}
.impression_2{
	font-size: 1.25rem;
	color: rgba(0,0,0,0.6);
	line-height: 1.875rem;
	margin-top: 2.875rem;
}
.impression_right{
	width:  calc(75vw * 0.2314);
	width:  calc(var(--mainwidth) * 0.2314);
	height: calc(75vw * 0.2314);
	height: calc(var(--mainwidth) * 0.2314);
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.impression_jian{
	width:100%;
	text-align: center;
	animation: 2s shangxia infinite linear;
}
.impression_jian img{
	width: 6.5rem;
	height: auto;
}

.impression_img{
	width:100%;
	height: 100%;
	font-size: 0px;
	overflow: hidden;
	border-radius: 50%;
	animation: 10s bian infinite linear;
	position: absolute;
	top: 0;
	
}
.impression_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.impression_bg{
	position: absolute;
	left: 0;
	top: 3.625rem;
	width: 9.7vw;
	height:9.7vw;
	background: #e8e8e8;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	animation: 4s fang infinite linear;
}

@keyframes fang{
		    0%{ transform: scale(1);}
		    100%{transform: scale(1.05); }
		}
@keyframes bian{
		    0%{ -webkit-transform:rotate(0deg); }
		   
		    100%{-webkit-transform:rotate(360deg);  }
		}
@keyframes shangxia{
		    0%{ margin-top: 0; }
			25%{ margin-top: 10px; }
		   	50%{ margin-top: 0px; }
		   	75%{ margin-top: -10px; }
		   
		    100%{margin-top: 0px; }
		}
.impression_all{
	width:75vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	margin-top: 0.75rem;
	height: 31.625rem;
	position: relative;
}
.impression_yan{
	border-radius:20px;
	width: 38.92%;
	height: 22.625rem;
	background: #bf9d6d;
	position:  absolute;
	bottom: 0;
	left: -10rem;
}
.impression_yan span{
	font-family:Arial;
	font-size: 1.375rem;
	color: #fff;
	line-height: 6.25rem;
	position: absolute;
	bottom: 0;
	left: 3.125rem;
	text-transform: uppercase; 
}
.impression_yan1{
	border-radius:20px;
	width: 32%;
	height:18.875rem;
	background: #343434;
	position:  absolute;
	bottom: 4.125rem;
	right: -10rem;
}
.impression_yan1 span{
	font-family:Arial;
	font-size: 1.375rem;
	color: #fff;
	line-height: 6.25rem;
	position: absolute;
	bottom: 0;
	right: 3.125rem;
	text-transform: uppercase; 
}
.impression_yan2{
	border-radius:20px;
	width: 15.85%;
	height:24.375rem;
	background: #d2232a;
	position:  relative;
	margin: 0 auto;
	
}
.impression_yan2 span{
	font-family:Arial;
	font-size: 1.375rem;
	color: #fff;
	line-height: 6.25rem;
	position: absolute;
	bottom: 4rem;
	right: 0;
	text-transform: uppercase; 
	    writing-mode: vertical-lr;
}
.grace{
	width:75vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	margin-top: 12.5rem;
	height:  auto;
	position: relative;
	padding-bottom: 6.625rem;
}
.grace_1{
	width:48.6%;
	font-size: 1.25rem;
	color: #343434;
	line-height: 2.25rem;
	margin-top: 3.5rem;
}
.grace_1 span{
	color: #d2232a;
	font-size: 1.687rem;
}
.grace_2{
	width: 100%;
	height: auto;
	font-size: 1.875rem;
	color: rgba(0,0,0,0.4);
	line-height: 4rem;
	margin-top: 7.8125rem;
}
.grace_3{
	width: 100%;
	height: auto;
	font-size: 3.5rem;
	color: #d2232a;
	font-family: din_bold;
	text-transform: uppercase; 
}
.grace_2a{
	margin-top: 4.875rem;
}
.grace_4{
	width: 100%;
	height: auto;
	font-size: 3.5rem;
	color: #d2232a;
}
.grace_you{
	position: absolute;
	top: 0;
	right: -2.75rem;
	width:54%;
	height: calc(75vw * 0.54 * 851 / 836);
	height: calc(var(--mainwidth) * 0.54 * 851 / 836);
}
.grace_img{
	width:100%;
	height: 100%;
	font-size: 0px;
	overflow: hidden;
}
.grace_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.grace_quan{
	width:30.875rem;
	height: 30.875rem;
	background: rgba(0,0,0,0.02);
	position: absolute;
	top: calc(50% - 15.4375rem);
	right: calc(50% - 15.4375rem);
	border-radius:50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	    animation: 1.5s fang infinite linear;
}
.grace_quan span{
	display: block;
	width: 15.375rem;
	height: 15.375rem;
	background: rgba(0,0,0,0.05);
	border-radius:50%;
	position: relative;
	z-index: 9;
	margin: 0 auto;
}
.grace_quan:after{
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.02);
	position: absolute;
	top:0;
	left: 0;
	border-radius:50%;
	transform: scale(1.35);
}
.grace_quan:before{
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.02);
	position: absolute;
	top:0;
	left: 0;
	border-radius:50%;
	transform: scale(1.7);
}
.science{
	width: 100%;
	height: auto;
	background: #131313;
	padding: 7.875rem 0;
}
.science .impression_1{
	width:75vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	color: #fff;
	
}
.science_img{
	width: 80.5vw;
	height: auto;
	margin: 0 auto;
	margin-top: 3.5rem;
	position: relative;
}
.science_img img{
	max-width: 100%;
	height: auto;
}
.science_1{
	font-family:Arial;
	font-weight: bold;
	font-size: 9rem;
	color: rgba(255,255,255,0.05);
	text-transform: uppercase;  
	position: absolute;
	top:23.375rem;
	left: -1.5rem;
}
.science_2{
	width: 100px;
	height: 100px;
	position: absolute;
	left: calc(50% - 50px);
	bottom:9rem;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}
.science_2 img{
	max-width: 33px;
	height: auto;
	margin: 0 auto;
	animation: 2s shangxia infinite linear;
}
.science_2:after{
	content: "";
	background: url("../images3/bei_28.png") no-repeat center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	    animation: 10s bian infinite linear;
}
.whole{
	width:100%;
	text-align: center;
	color: #000;
	font-size: 4.125rem;
	line-height: 16.625rem;
	padding-top: 5rem;
	
}
.design{
	width:100%;
	background: #515159;
	height: 1405px;
	position: relative;
}

.design_en{
	width:75vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	font-family:Arial;
	color: #dfdfdf;
	font-size: 3.125rem;
	line-height: 50px;
	text-transform: uppercase;
	padding-top: 114px;
}
.design_tit{
	width:75vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	color: #dfdfdf;
	font-size: 1.875rem;
	line-height: 66px;
}
.design_all{
	width:832px;
	height: 942px;
	margin: 0 auto;
	margin-top: -66px;
	position: relative;
 }
.design_hover .design_img{
	animation: touming 0.6s 0.4s forwards;  
	-moz-animation: touming 0.6s 0.4s forwards; 
	-ms-animation: touming 0.6s 0.4s forwards;
}
.design_hover .design_1{
	animation: touleft 1s 1s forwards;  
	-moz-animation: touleft 1s 1s forwards; 
	-ms-animation: touleft 1s 1s forwards;
}
.design_hover .design_2{
	animation: touleft2 1s 1s forwards;  
	-moz-animation: touleft2 1s 1s forwards; 
	-ms-animation: touleft2 1s 1s forwards;
}
.design_hover .design_3{
	animation: touleft3 1s 1s forwards;  
	-moz-animation: touleft3 1s 1s forwards; 
	-ms-animation: touleft3 1s 1s forwards;
}


.design_hover .design_4{
	animation: touright 1s 1s forwards;  
	-moz-animation: touright 1s 1s forwards; 
	-ms-animation: touright 1s 1s forwards;
}

.design_hover .design_5{
	animation: touright2 1s 1s forwards;  
	-moz-animation: touright2 1s 1s forwards; 
	-ms-animation: touright2 1s 1s forwards;
}

.design_hover .design_6{
	animation: touright3 1s 1s forwards;  
	-moz-animation: touright3 1s 1s forwards; 
	-ms-animation: touright3 1s 1s forwards;
}




@keyframes touming{ from {opacity:0px; top: -20px;} to {opacity:1; top: 0;} }
@keyframes touleft{ from {opacity:0px; left: -200px; top: 240px;} to {opacity:1; left:-76px; top: 282px;} }
@keyframes touright{ from {opacity:0px; right: -100px; top: -50px} to {opacity:1; right:32px; top: -18px;} }
@keyframes touleft2{ from {opacity:0px; left: -350px;} to {opacity:1; left:-263px;} }
@keyframes touright2{ from {opacity:0px; right: -250px;top: -120px;} to {opacity:1; right:-146px;top: -66px;} }
@keyframes touleft3{ from {opacity:0px; left: -200px;bottom: -150px;} to {opacity:1; left:-138px;bottom: -37px;} }
@keyframes touright3{ from {opacity:0px; right: -200px;top: 320px;} to {opacity:1; right:-118px;top: 222px;} }
 
.design_img{
	width:832px;
	height: 953px;
	margin: 0 auto;
	font-size: 0px;
	opacity:0; 
	position: relative;
 }
.design_img img{
	width:832px;
	height: 953px;
}
.design_1{
	width:145px;
	height: 391px;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: 282px;
	left: -200px;
	opacity:0;
}
.design_1 img{
	width:145px;
	height: 391px;
}
.design_2{
	width:160px;
	height: 211px;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	bottom: 165px;
	left: -263px;
	opacity:0;
}
.design_2 img{
	width:160px;
	height: 211px;
}
.design_3{
	width:261px;
	height: 408px;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	bottom: -37px;
	left: -138px;
	opacity:0;
}
.design_3 img{
	width:261px;
	height: 408px;
}
.design_4{
	width:324px;
	height: 212px;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: -50px;
	right: -100px;
	opacity:0;
}
.design_4 img{
	width:324px;
	height: 212px;
}
.design_5{
	width:439px;
	height: 579px;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: -66px;
	right: -146px;
	opacity:0;
}
.design_5 img{
	width:439px;
	height: 579px;
}
.design_6{
	width:220px;
	height: 332px;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: 222px;
	right: -118px;
	opacity:0;
}
.design_6 img{
	width:220px;
	height: 332px;
}
.design_bg{
	font-family:Arial;
	color: rgba(0,0,0,0.1);
	font-size: 10.4375rem;
	position: absolute;
	right: 5rem;
	bottom: 0;
	text-transform: uppercase;  
	writing-mode: vertical-lr;
}

.mate_warp{
	width:100%;
	height: auto;
	padding: 10rem 0;
	position: relative;
}
.mate_warp:after{
	content: "";
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #ce2229;
}
.mate_warp:before{
	content: "";
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #343434;
}
.mate{
	width:75vw; 
	width: var(--mainwidth);
	height: calc(73vw * 0.264 * 730 / 370);
	height: calc(var(--mainwidth) * 0.264 * 730 / 370);
	margin:0 auto;
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 2;
}
.mate_left{
	width: 30.7%;
	height: auto;
}
.mate_tit{
	width:100%;
	color: #fff;
	font-size: 3.375rem;
	padding-top: 7rem;
}
.mate_con{
	width:100%;
	color: #fff;
	line-height: 2.25rem;
	font-size: 1.5625rem;
	margin-top: 3.75rem;
}
.mate_come{
	width:100%;
	color: rgba(255,255,255,0.8);
	line-height:1.875rem;
	font-size: 1.125rem;
	margin-top: 1.5rem;
}

.mate_all{
	position: absolute;
	z-index: 2;
	top: 10rem;
	right: 0;
	width: 60%;
	display: flex;
	justify-content: space-between;
	height: calc(73vw * 0.264 * 730 / 370);
	height: calc(var(--mainwidth) * 0.264 * 730 / 370);
}
.mate_img{
	width: 32.1%;
	height: 100%;
	background: #fff;
	border-radius:20px;
	padding: 2rem;
	overflow: hidden;
	position: relative;
}
.mate_img_1{
	width:calc(100% - 4rem);
	height: calc(100% - 4rem);
	overflow: hidden;
	font-size: 0;
	position: absolute;
	top: 2rem;
	display: none;
}
.mate_img_1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.mate_dian{
	width: 6%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.mate_dian_1{
	width:100%;
	height: auto;
	text-align: center;
	display: flex;
	justify-content: center;
}
.mate_dian_1 a{
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius:50%;
	background: rgba(255,255,255,0.4);
	margin: 0px 4px;
}
.mate_dian_1 a.mate_dian_1_a{ background:#fff;transform: scale(1.1);}

.mate_imgpc{
	width:59.84%;
	height: 100%;
	background: #fff;
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
	padding: 2rem 0 2rem 2rem;
	position: relative;
}
.mate_imgpc_1{
	width:calc(100% - 2em);
	height: calc(100% - 4rem);
	overflow: hidden;
	font-size: 0;
	position: absolute;
	top:2rem;
	display: none;
}
.mate_imgpc_1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.delight_warp{
	width:100%;
	height: auto;
	padding-bottom: 58rem;
	background: #fff;
	position: relative;
	overflow: hidden;
	background: url("../images3/bei_42.png") no-repeat center bottom;
}
.delight_tit{
	width:100%;
	text-align: center;
	color: #000;
	font-size: 2.5rem;
	line-height: 3.5rem;
	padding-top: 9.375rem;
}
.delight_tit span{
	color: #cf2229;
}



.delight {
    width: 75vw;
    width: var(--mainwidth);
    height: auto;
    margin: 0 auto;
	margin-top: 4.25rem;
   position: relative;
	height: calc(75vw * 0.716 * 1409 / 1002);
	height: calc(var(--mainwidth) * 0.716 * 1409 / 1002);
}

.delight_img{
	width:71.6%;
	height: calc(75vw * 0.716 * 1409 / 1002);
	height: calc(var(--mainwidth) * 0.716 * 1409 / 1002);
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	z-index: 3;
	left: 0;
	top:0;
	-moz-box-shadow: 4px 7px 43px rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px rgba(0,0,0,0.24);
}
.delight_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.delight_img1{
	float: right;
	width:41.14%;
	height: calc(75vw * 0.4114 * 1078 / 576);
	height: calc(var(--mainwidth) * 0.4114 * 1078 / 576);
	font-size: 0px;
	overflow: hidden;
	position:  relative;
	z-index: 2;
	right: 0;
	top: 11.4%;
	-moz-box-shadow: 4px 7px 43px rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px rgba(0,0,0,0.24);
}
.delight_img1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}


.desktop{
	width:100%;
	height: auto;
	background: #1e1e23;
	padding: 8.75rem 0;
}
.desktop_img{
	width:100%;
	height: auto;
	text-align: center;
}
.desktop_img img{
	height: 2.625rem;
	width: auto;
}
.desktop_tit{
	width:100%;
	 color: #fff;
	font-weight: bold;
	font-family:  Arial;
	font-size: 3.75rem;
	text-align: center;
	text-transform: uppercase;
	line-height: 5.75rem;
}
.desktop_list{
	width: 75vw;
    width: var(--mainwidth);
    height: auto;
    margin: 0 auto;
	margin-top: 3.25rem;
}


.grid {
	max-width: var(--mainwidth);
	margin:  auto;
	padding: 0
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 25%;
	opacity: 0;list-style: none;
}


.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}




.mobile{
	width:100%;
	height: auto;
	background: #8b8183;
	padding-top: 8.75rem;
}
.mobile_img{
	/*margin-top: -7.25rem;*/
	text-align:center;
	width: 100%; 
	height: auto;
	/*display: flex;*/
	font-size: 0;
}
.mobile_img p { width:100%;}
.mobile_img img { max-width:80%;}
.design_phone{
	display: none;
}

@media screen and (max-width:1919px)and (min-width:1440px){
	.impression_bg{
		width: 6.7vw;
    	height: 6.7vw;
	}
	.mate_img{ padding: 1rem;}
	.mate_img_1 {
		width: calc(100% - 2rem);
		height: calc(100% - 2rem);
		top: 1rem;
	}
	.mate_imgpc{ padding: 1rem;}
	.mate_imgpc_1 {
		width: calc(100% - 1em);
		height: calc(100% - 2rem);
		top: 1rem;
	}

}
@media screen and (max-width:1439px)and (min-width:1024px){
	.tou_load img{
		height: 25vh;
		width: auto;
	}
	.tou_tu img{
		width:20px;
		height: auto;
	}
	.banner_img_1 {
		height: calc(75vw * 680 / 1370);
	}
	.impression_bg{
		width: 6.7vw;
    	height: 6.7vw;
	}
	.mate_img{ padding: 1rem;}
	.mate_img_1 {
		width: calc(100% - 2rem);
		height: calc(100% - 2rem);
		top: 1rem;
	}
	.mate_imgpc{ padding: 1rem;}
	.mate_imgpc_1 {
		width: calc(100% - 1em);
		height: calc(100% - 2rem);
		top: 1rem;
	}
}
@media screen and (max-width:1023px)and (min-width:300px){
	.tou_load img{
		height: 15vh;
		width: auto;
	}
	.tou_tu img{
		width:20px;
		height: auto;
	}
	.tou_tu{
		bottom: 5px;
	}

	.banner{ 
		width:100%; 
		height: auto; 
		overflow:hidden; 
		position:relative; 
			background: url(../images3/bei_02.png) no-repeat center -9rem;
		background-size:cover;
		padding-top: 5rem;
	}

	.banner_img{ width:96vw; height:calc(96vw * 1020 / 1440); padding-top: 2.375rem; 
		background-size:cover;
		}
	.banner_img_1{
		width: 95.13%;
		 height:calc(96vw * 620 / 1370);
		margin: 0 auto;
		overflow: hidden;

	}

	
	.brief{ 
		width:96vw; 
		margin-top:2rem; 
		margin-bottom:5vh;
	}
	.brief_bg{
		display: none;
	}


	.brief_con{ width:100%; height:auto;display: flex;justify-content: center; flex-direction: column; margin-top:0rem;}
	.brief_left{ width:100%; text-align: center;height:auto;}
	.brief_tit{  font-size:1.5rem;}
	.brief_1{ font-size:1.125rem; line-height:2.5rem;}
	.brief_2{ line-height:2.125rem; margin-top: 1rem;}

	.brief_right{ 
		width:100%; 
		height: auto; 
		display: flex;
		justify-content: center;
		flex-direction: column;
		font-size:1.125rem; 
		line-height:2.125rem;
		margin-top: 20px;
	}
	.brief_ri{
		 display: none;
	}
	.brief_nei{
		font-size: 1.125rem;
		color:rgba(0,0,0,0.8);
		line-height: 2.25rem;
		width: 100%;
		text-align: center;
	}


	.impression{
		width:96vw; 
		justify-content:center;
		flex-direction: column;
	}
	.impression_left{
		width:100%;
		height: auto;
		text-align: center;
	}
	.impression_1{
		font-size: 1.5rem;
		line-height: 2.5rem;

	}
	.impression_2{
		width: 90%;
		margin: 0 auto;
		margin-top: 1rem;
	}
	.impression_right{
		width:  60px;
		height: 60px;
		margin: 0 auto;
		margin-top: 2vh;
	}
	.impression_jian{
		width:100%;
		text-align: center;
		animation: 2s shangxia infinite linear;
	}
	.impression_jian img{
		width: 20px;
		height: auto;
	}


	.impression_bg{
		display: none;
	}

	.impression_all{
		width:96vw; 
		margin-top: 5vh;
		height: auto;
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.impression_yan{
		border-radius:10px;
		width: 32%;
		height: 100px;
		position:   relative;
		bottom: 0;
		left: inherit;
	}
	.impression_yan span{

		line-height:40px;
		position: absolute;
		bottom: 0;
		left: 3.125rem;

	}
	.impression_yan1{
		border-radius:10px;
		width: 32%;
		height:100px;
		bottom: 0rem;
		right: inherit;
		position: relative;
	}
	.impression_yan1 span{
		line-height: 40px;
		position: absolute;
		bottom: 0;
		right: inherit;
		left: 3.125rem;
	}
	.impression_yan2{
		border-radius:10px;
		width: 32%;
		height:100px;
		position:  relative;
		margin: initial;
	}
	.impression_yan2 span{
		line-height: 40px;
		position: absolute;
		bottom: 0;
		right:inherit;
		left: 3.125rem;
			writing-mode: horizontal-tb;
	}
.grace{
	width:96vw; 
	margin-top: 6rem;
	height:  auto;
	position: relative;
	padding-bottom: 5vh;
}
	.grace .impression_1{ text-align: center;}	
	.grace_1{
		width:100%;
		font-size: 1.125rem;

		line-height: 2.25rem;
		margin-top: 1.5rem;
		text-align: center;
	}
	.grace_1 span{
		font-size: 1.25rem;
	}
	.grace_2{
		font-size: 1.25rem;
		line-height: 3rem;
		margin-top: 4rem;
		text-align: center;
	}
	.grace_3{
		height: auto;
		font-size: 2.5rem;
		text-align: center;
	}
	.grace_2a{
		margin-top: 2.5rem;
	}
	.grace_4{
		font-size: 2.5rem;
		text-align: center;
		padding-bottom: 3vh;
	}
	.grace_you{
		display: none;
	}


	.science{
		padding: 5vh 0;
	}
	.science .impression_1{
		width:96vw; 
		text-align: center;
	}

	.science_2{
		width:30px;
		height: 30px;
		position: absolute;
		left: calc(50% - 15px);
		bottom:3rem;
	}
	.science_2 img{
		max-width: 10px;

	}
	.science_2:after{
		background-size: cover;
	}
	.whole{
		width:100%;
		text-align: center;
		color: #000;
		font-size: 2rem;
		line-height: 8rem;
		padding-top: 1rem;

	}
	.design{
		height:  auto;
	}

	.design_en{
		width:96vw; 
		font-size: 1.75rem;
		line-height: 26px;
		text-transform: uppercase;
		padding-top: 3vh;
		text-align: center;
	}
	.design_tit{
		width:96vw; 
		font-size: 1.5rem;
		line-height: 40px;
		text-align: center;
	}
.design_all{
	width:96%;
	height:  auto;
	margin: 0 auto;
	margin-top:2vh;
	position: relative;
	padding-bottom: 3vh;
 }
	
	.design_phone{
		display: block;
		width: 100%;
		height: auto;
	}
	.design_phone img{
		max-width: 100%;
		height: auto;
	}
	

.design_img,.design_1,.design_2,.design_3,.design_4,.design_5,.design_6{
	display: none;
 }


	.design_bg{
		display: none;
	}

	.mate_warp{
		padding: 3vh 0;
		background: #343434;
	}
	.mate_warp:after{
		display: none;
	}
	.mate_warp:before{
		display: none;
	}
	.mate{
		width:96vw; 
		height:  auto;
		margin:0 auto;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.mate_left{
		width: 100%;
		height: auto;
		text-align: center;
	}
	.mate_tit{
		width:100%;
		color: #fff;
		font-size: 1.5rem;
		padding-top: 0rem;
	}
	.mate_con{

		line-height: 2rem;
		font-size: 1.125rem;
		margin-top: 1rem;
	}
	.mate_come{
		width:90%;
		line-height:1.875rem;
		font-size: 1.125rem;
		margin: 0 auto;
		margin-top: 1.5rem;
	}

	.mate_all{
		position:  relative;
		z-index: 2;
		top: 0;
		right: 0;
		width: 98%;
		margin-left: 2%;
		display: flex;

		height: auto;
		margin-top: 3vh;
		padding-bottom:4rem;
	}
	.mate_img{
		width: 32%;
		height: 210px;
		padding: 1rem;
	}
	.mate_img_1{
		width:calc(100% - 2rem);
		height: calc(100% - 2rem);
		top: 1rem;
	}

	.mate_dian{
		width: 100%;
		height: 8px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: absolute;
		bottom: 0;
	}
	.mate_dian_1{
		justify-content: center;
	}
	.mate_dian_1 a{
		display: inline-block;
		width: 8px;
		height: 8px;
		margin: 0px 3px;
	}

	.mate_imgpc{
		width:63%;
		height: 210px;
		padding: 1rem 0 1rem 1rem;
	}
	.mate_imgpc_1{
		width:calc(100% - 1em);
		height: calc(100% - 2rem);
		top:1rem;
	}

	.delight_warp{
		width:100%;
		height: auto;
		padding-bottom: 5rem;
		background: #fff;
		position: relative;
		overflow: hidden;
		    background: url(../images3/bei_42.png) no-repeat center bottom;
		background-size:cover;
	}
	.delight_tit{
		font-size: 1.5rem;
		line-height: 2.5rem;
		padding-top:3vh;
	}


	.delight {
		width: 96vw;
		margin-top: 3vh;
	   position: relative;
		height: calc(96vw * 0.716 * 1409 / 1002);
	}

	.delight_img{
		width:71.6%;
		height: calc(96vw * 0.716 * 1409 / 1002);
	}

	.delight_img1{
		float: right;
		width:41.14%;
		height: calc(96vw * 0.4114 * 1078 / 576);
		top: 11.4%;

	}


	.desktop{
		padding: 3vh 0;
	}

	.desktop_img img{
		height: 2.25rem;
		width: auto;
	}
	.desktop_tit{
		font-size: 2.25rem;
		line-height: 4.25rem;
	}
	.desktop_list{
		width:96vw;
		margin-top:2vh;
	}


	.grid {
		max-width: 96vw;
	}

	.grid li {
		width:33%;
	}


	.mobile{
		padding-top:3rem;
	}
	.mobile_img{
		/*margin-top: -2vh;*/
		width: 100%; 
		height: auto;
		/*display: flex;*/
		font-size: 0;
	}
	.mobile_img img{
		max-width: 100%;
		height: auto;	
	}	
	
}


