.main1600{width:92%;margin:0 auto;}
.main1630{width:92%;margin:0 auto;}
.main1580{width:90%;margin:0 auto;}
.main1820{width:96%;margin:0 auto;}
.bgfff{background:#ffffff !important;}
.bg18{background:#1c1818;}

/*html,body,*/
.h100{height:100%;}
#app{min-height:100%;}
.main{
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	position: relative;
}


#banner,.banner{height: 100%;}
#banner a,.banner a{display: block;width: 100%;height:100%;background-size: cover;}


.back{
	width: 50px;
	height: 50px;
	border-radius:50%;
	background-size:auto 24px;
	cursor:pointer;
	position:fixed;
	top:60px;
	left:4%;
	background:#000 ;
	z-index: 20;
}
.back:after{width:16px;height:16px;top: 30px;
left: 18px;content:"";position:absolute;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:swing;transition-timing-function:swing;
    border:0px solid #FFF;
    border-width: 3px 0 0 3px ;
    transform:translateY(-15px) rotate(-45deg);
}
.back:hover:after{left: 15px;
}

.navDiv{
	width: 50px;
	height: 50px;
	border-radius:50%;
	background-size:auto 30px;
	position: fixed;
    right: 4%;
    top: 60px;
    cursor:pointer;
    z-index: 20;
    /*transform:scale(.7);*/
}
body.nav-open .lower-screen{-webkit-transform:scale(0.8, 0.8);-ms-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8);}
body.nav-open .nav{-webkit-transform:translateY(0);transform:translateY(0);position:relative;}
body.nav-open .nav .bom{}

body.nav-open .nav-toggle{box-shadow:none;}
/*body.nav-open .nav-toggle:before{position:fixed;top:0;left:0;width:130px;height:100%;border-radius:0%;background-color:rgba(45,45,45,0.95);}*/

body.nav-open .nav-toggle .icon{width:24px;height:0;}
body.nav-open .nav-toggle .icon:before{width:24px;height:3px;top:-16px;-webkit-transform:translateY(15px) rotate(45deg);-ms-transform:translateY(15px) rotate(45deg);transform:translateY(15px) rotate(45deg);}
body.nav-open .nav-toggle .icon:after{width:24px;height:3px;top:14px;-webkit-transform:translateY(-15px) rotate(-45deg);-ms-transform:translateY(-15px) rotate(-45deg);transform:translateY(-15px) rotate(-45deg);}

.nav-toggle{position:absolute;top:23.5px;left:13px;cursor:pointer;z-index:10;-webkit-transition-duration:0.66s;transition-duration:0.66s;-webkit-transition-timing-function:swing;transition-timing-function:swing;}
.nav-toggle:before{width:145px;height:100%;border-radius:20px;content:"";position:fixed;
left:-200px;
/*top:50%;-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);*/

-webkit-transition-duration:0.66s;transition-duration:0.66s;-webkit-transition-timing-function:swing;transition-timing-function:swing;}

.icon{width:24px;height:3px;background-color:#fff;-webkit-transition-duration:0.5s;transition-duration:0.5s;transiting-timing-function:swing;}
.nav-toggle .icon:before{width:24px;height:3px;background-color:#fff;content:"";position:absolute;right:0;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:swing;transition-timing-function:swing;}
.nav-toggle .icon:after{width:24px;height:3px;background-color:#fff;content:"";position:absolute;top:7px;right:0;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:swing;transition-timing-function:swing;}
.nav-toggle .icon:before{top:-7px;}
.nav-toggle2{position:fixed;
/*display:none;*/
left:-200px;
width: 145px;
}
.nav-open .nav-toggle2{display:block;width:145px;height:100%;top:0px;left:0px;z-index:20;transition:all 0.5s ease-in-out 0s;transiting-timing-function:swing;background-color:rgba(35,35,35,0.95);overflow: auto;}
.nav-toggle2 .logo{width:145px;height:145px;}
.nav ul li{
	margin: 1px auto 0;
}
.nav ul li a{
	display:block;
	padding:8px 8px 8px 20px;
	height:100%;
	text-align: left;
}
.nav ul li a:hover{
	padding:8px 8px 8px 16px;
}
.nav ul li span{
	display:block;
	/*color: #ffffff;*/
}
.nav ul li span:first-of-type{
	font-size:16px;
	margin-bottom: 0px;
}
.nav ul li span:nth-child(2){
	/*font-size:12px;*/
	opacity: 0.5;
}
.nav ul li a:hover,.nav ul li a.hover{
    background:#111 ;
}

/*.nav ul li a:hover span,.nav ul li a.hover span{*/
/*    color:#000;*/
/*}*/

.brand_con img{display:block;width: 100%;}

.case_class{
	margin-left:0px;
	min-height: 100%;
}


.case_contit span{
	color: #FFF;
}

.case_tit{
	padding-top:70px;
}


.case_classList ul{
	display: table;
	margin: 0 auto;
	text-align: center;
}
.case_classList ul li{
	float:left;
	width: 30.66%;
	margin-right:4%;
	margin-bottom:55px;
    transition:0.3s;
}
/*.case_classList ul li:hover{*/
/*	cursor:pointer;*/
/*    transform: translateY(-10px);*/
/*    transition:0.3s;*/
/*}*/
.case_classList ul li:nth-child(3n){
	margin-right:0;
}
.case_classList ul li img{
	width: 100%;
}
.case_classList ul li a,.case_classList ul li a:visited{
    color:#FFF;
}

.case_fl ul{
	display: table;
	margin: 0 auto;
	text-align: center;
}
.case_fl ul li{
	line-height: 48px;
	margin:0 -1px 20px 0px;
	display: inline-block;
	border:1px solid #333;
	box-sizing:border-box;
	cursor: pointer;
}
.case_fl ul li a{
	padding:0 26px;
}
.case_fl ul li:hover{
	background:#EEE;
}
.case_fl ul li.on{
	background:#ffffff;
}
.case_fl ul li.on a,.case_fl ul li:hover a{
	color: #000000 !important;
}
.case_fl ul li:nth-child(3n){
	/*margin-right:0;*/
}

.case_list ul li{
	float:left;
	width: 21.875%;
	margin-right:4.166%;
	margin-bottom:35px;
    transition:0.3s;
	cursor:pointer;
}
.case_list ul li.w1{
	width: 90%;
	margin-right:0;
	margin-left: 5%;
}
.case_list ul li.w2{
	width: 47.91%;
}
.case_list ul li.w3{
	width: 30.556%;
}
.case_list ul li.w4{
}
.case_list ul li.w5{
    width: 18.4%;
    margin-right: 2%;
}
.case_list ul li.w6{
	width: 15%;
	margin-right: 2%;
}
.case_list ul li.w7{
	width: 12.9%;
	margin-right: 1.5%;
}
.case_list ul li.w8{
	width: 11.187%;
	margin-right: 1.5%;
}
.case_list ul li.w9{
	width: 10%;
	margin-right: 1.2%;
}
.case_list ul li.w10{
	width: 8.9%;
	margin-right: 1.2%;
}
.case_list ul li a,.case_fl ul li a{
	display:block;
	height:100%;
}
.case_list ul li a,.case_fl ul li a,.case_list ul li a:visited,.case_fl ul li a:visited{
	color:#FFF;
}
.case_list ul li img{
	width: 100%;
}
/*.case_list ul li:nth-child(4n){*/
/*	margin-right:0;*/
/*}*/
/*.case_list ul li:hover{*/
/*    transform: translateY(-10px);*/
/*    transition:0.3s;*/
/*}*/

.case_contit{
	width: 91%;
	margin: 0 auto;
	padding-top:56px;
}
.case_contit span{
	display:block;
	height: 60px;
	line-height:60px;
    margin-left: 65px;
}
.case_con{
	padding-top: 64px;
	padding-bottom: 64px;
}
.caseImg ul li{
	float:left;
	width: auto;
	height:150px;
	margin:0 20px 20px 0;
    transition:0.3s;
}
.caseImg ul li img{
	height: 100%;
}
.caseImg ul li:hover{
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.header{
    position:fixed;
    z-index: 2;
    left: 0;
    right: 0px;
    top:-100px;
    line-height: 64px;
    height: 64px;
    
}
.header.open{
    top:0;
}
.header .ac-ln-content {
    margin: 0 auto;
    /*max-width: 980px;
    padding: 0 60px;*/
    width: 92%;
    position: relative;
    z-index: 2;
    /*padding-left: calc(22px + constant(safe-area-inset-left));*/
    /*padding-right: calc(22px + constant(safe-area-inset-right));*/
}
.header .ac-ln-content .ac-ln-back {
    font-size: 30px;
    float: left;
    padding-left:5px;
    padding-right:15px;
    cursor:pointer;
}
.header .ac-ln-content .ac-ln-back:hover {
    padding-left:0px;
    padding-right:20px;
}
.header .ac-ln-content .ac-ln-title {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .011em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    cursor: default;
    display: block;
    float: left;
    padding: 0;
    white-space: nowrap;
}
.header .ac-ln-content .ac-ln-menu {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -.01em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    float: right;
}


.view-bar{
}
.view-bar li .btn{
    margin:0 2px;
    padding:5px 10px;
    border-radius: 5px;
    opacity: 0.7;
}
.view-bar li .btn.hover,.view-bar li .btn:hover{
    background:rgba(100,100,100,0.1);
    opacity: 1;
}

.view-bar li.fen{
    margin-left:40px;
    /*padding-left:40px;*/
    /*border-left:1px solid rgba(100,100,100,0.2);*/
}
.buy-btn{
    margin:0 2px;
    padding:5px 10px;
    border-radius: 50px;
    background: #0071e3;
    color:#FFF;
}
.buy-btn:hover{
    background: #1e85ee;
}

.bodyinfo{font-size:14px;line-height:2;}
.bodyinfo img{max-width:100%;margin:0 auto;display: block;}
.bodyinfo.w1200{max-width:1200px;border-radius:30px;margin: 60px auto;padding:30px;}

.bodyinfo.vertical{max-width:750px;border-radius:25px;margin: 60px auto;padding:20px;box-shadow: 0 10px 40px 0 rgba(0,0,0,0.13);}
.bodyinfo.vertical img{border-radius: 3px;margin: 0 auto 20px;}



footer{
	position: fixed;
    left: 0;
    bottom: 30px;
    width: 100%;
    z-index: 10;
    text-align:center;
}
.nav2 {
	display: inline-block;
    margin: 0 auto;
	border-radius: 22px;
}
.nav2 ul{
	display: table;
    margin: 0 auto;
	border-radius: 22px;
	padding:18px 25px;
	box-sizing: border-box;
}
.nav2 ul li{
	float:left;
	text-align: center;
	padding:0 20px;
	box-sizing: border-box;
	transform: translateY(0px);
}
.nav2 ul li a{
	display:block;
	width: 100%;
	height:100%;
}
.nav2 ul li span{
	display:block;
}
.nav2 ul li span:first-of-type{
	font-size:18px;
	margin-bottom: 0px;
}
.nav2 ul li span:nth-child(2){
	font-size:12px;
	text-transform: uppercase
}
.nav2 ul li:hover{
	opacity: 0.7;
	transform: translateY(-5px);
}
.header{}


.set{position:fixed;right:50px;bottom:50px;z-index:20;font-size:12px;}
.set .set_btn .set_menu{padding:10px;margin-bottom: 5px; line-height:1.8;font-size:14px;display:none;}

.set .set_btn .set_menu li{transform: translateX(0px);}
.set .set_btn .set_menu li:hover{transform: translateX(-3px);}
.set .set_btn{padding:5px;position:relative;cursor:pointer;display:block;}
.set .set_btn:hover .set_menu{display:block;}
/*.set .set_btn:hover i{display:none;}*/

.tcLight,.tcLight a,.tcLight a:visited{color:#FFF;}
a.tcLight:hover,.tcLight a:hover{color:rgba(255, 255, 255, 0.7);}

.tcLight_bg{background: rgba(17, 17, 17,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border: 1px solid rgba(255, 255, 255,0);
  /*box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .03);*/
  overflow:hidden;
}
.brd10{border-radius:10px;}
.brd5{border-radius:5px;}
.brd3{border-radius:3px;}

.nav-open .case_class,.nav-open .case_con{margin-left:145px;transition:all 0.3s ease-in-out 0s;}
.nav-open .case_class,.nav-open .case_con{margin-left:145px;transition:all 0.3s ease-in-out 0s;}
.nav-open .header{
    left: 145px;
}
.nav-open .back {
    margin-left: 125px;
}
.navDiv.nav_view  {
    top:0;
}
#app{
	background:#111;
	color:#FFF;
	display: none;
}
#app.block{
	display: block;
}

/**白色**/
#app.white{
	background:#FFF;
	color:#333;
}
#app.white .nav2 ul li span:first-of-type{
	color: #333;
}
#app.white .nav2 ul li span:nth-child(2){
	color: #333;
}

#app.white .case_list ul li a,
#app.white .case_fl ul li a,
#app.white .case_list ul li a:visited,
#app.white .case_fl ul li a:visited{
	color:#333;
}
#app.white .case_classList ul li a,
#app.white .case_classList ul li a:visited{
    color:#333;
}
#app.white .case_fl ul li {
    border-color:#DDD;
}

#app.white .case_fl ul li:hover{
	background:#666;
	
}

#app.white .case_fl ul li.on{
	background:#000;
	
}
#app.white .case_fl ul li.on a,#app.white .case_fl ul li:hover a{
	color: #FFF !important;
}
#app.white .case_contit span{
	color: #333;
}

#app.white .tcLight,
#app.white .tcLight a,
#app.white .tcLight a:visited{color:#333;}

#app.white .tcLight_bg{background: rgba(255, 255, 255,0.85);border-color:rgba(255, 255, 255,0.5);}

#app.white .back:after{
    border-color:#333;
}

#app.white .nav-toggle .icon,
#app.white .nav-toggle .icon:before,
#app.white .nav-toggle .icon:after
{
    background:#333;
}

#app.white .nav-toggle2{background-color:#F5F5F7;}
#app.white .nav ul li a:hover,#app.white .nav ul li a.hover{
    background:#FFF ;
}
#app .back_view{
    background:none;
    top: 8px;
    border-width: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0);
}