﻿.fir-show{position: relative;height: 100%;z-index: 11;}
.swiper-firban{position: relative;height: 100%;}
.swiper-firban .swiper-slide{position: relative;overflow: hidden;}
.swiper-firban img{height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.swiper-firban>.swiper-pagination-bullets, .swiper-firban .swiper-pagination-custom,.swiper-firban .swiper-pagination-fraction{width: 22px;left: auto;right: 55px;bottom: 50%;}
.swiper-firban>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 6px 0;}
.swiper-firban .swiper-pagination-bullet{width: 22px;height: 1px;background: #fff;display: block;opacity: 1;float: right;}
.swiper-firban .swiper-pagination-bullet-active{width: 50px;}
.dots{position: absolute;left: 50%;bottom: 4%;z-index: 2;margin-left: -11px;width: 22px;height: 38px;border: 1px solid #fff;border-radius: 20px;}
.dots-ani{width: 3px;height: 7px;background: #fff;
position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
animation: dotsani 1.2s infinite linear;
-moz-animation: dotsani 1.2s infinite linear;	
-webkit-animation: dotsani 1.2s infinite linear;	
-o-animation: dotsani 1.2s infinite linear;	}
@keyframes dotsani{0% {top: 30%;}25%{top: 50%;}50%{top: 70%;}75%{top: 50%;}100% {top: 30%;}}

.fir-nav{z-index: 2;width: 100%;width: 80%;text-align: center;position: absolute;left: 50%;top: 16%;transform: translate(-50%,0);}
.fir-nav .fir-logo{float: none;}
.fir-nav .fir-logo .logoheng{display: none;}
.fir-nav .fir-tit{float: none;text-align: center;}
.fir-nav .bar{margin-top: 0;}
.fir-nav .bar .nav>ul>li>a{color: #fff;}

.fir-alone{top: auto;bottom: 20%;}

.fir-alone .fir-tools-gr .ydlbox{display: none !important;}
.fir-logo{margin-bottom: 8%;text-align: center;}
.fir-logo img{}
.fir-logo .logoshu{display: inline-block;}
.fir-logo .logoheng{display: none;}
.fir-tit{}
.fir-tit .nav ul{display: inline-block;margin-bottom: 0;}
.fir-tit .nav li{font-size: 14px;color: #fff;display: inline-block;margin-right: 100px;}
.fir-tit .nav li a{font-size: 14px;color: #fff;}
.fir-tit .fir-tools-gwc{display: none !important;}
.fir-shows{background-color: #dcdcdc;}
.fir-shows .swiper-firban,.fir-shows .dots{display: none;}
.fir-shows .fir-logo{float: left;margin-bottom: 0;}
.fir-shows .fir-logo .logoshu{display: none;}
.fir-shows .fir-logo .logoheng{display: inline-block;}
.fir-shows .fir-tit{float: right;display: inline-block;}
.fir-shows .fir-tools img.nav-gwc{display: inline-block;}
.fir-shows .fir-tit .nav li{margin-right: 80px;}
.fir-shows .fir-nav .bar .nav>ul>li>a{color: #999;}
.fir-shows .fir-nav .bar .nav>ul>li.nav-act>a{color: #fff;}
.fir-shows .fir-nav .bar .nav>ul>li:hover a{color: #fff;}

.fir-shows .fir-nav{line-height: 80px;position:relative;width: 100%;}
.fir-shows .fir-nav .ydlbox{top: 70px;}
.fir-shows .fir-nav .ydlbox li{line-height: initial;}
.fir-shows .fir-tit .fir-tools-gwc{display: block;}
.fir-shows .ssbox{opacity: 0;}
/* .fir-shows .fir-tools-ss .ssbai,.fir-shows .fir-tools-ss .ssbox{ top: 50%; margin-top: -8px;} */
.fir-shows .fir-tools-ss .ssbai{ top: 50%; margin-top: -8px;}
.fir-shows  .fir-tools-gwc i{ top: 50%;margin-top: -16px;}
.fir-shows .fir-tit .nav, .fir-shows .bar .tools{float: left;}
.fir-shows .ssbox,.fir-shows .ssbox input,.fir-shows .fir-tit .nav ul{line-height: initial;}
.fir-shows .ssbox:before{    top: 30px;    bottom: auto;}


/* 首页主内容 */
.zhunr{position: relative;}
.swiper-banner{width: 100%;}
.swiper-banner img{width: 100%;}
.gonggao{background: #fff;opacity: 0.8;padding: 8px 0;position: absolute;left: 50%;top:26px;z-index: 1;transform: translate(-50%, 0);}
.gonggao h3{font-size: 14px;font-weight: bold;color: #000;margin: 0; display: inline-block;}
.gonggao .gongv{margin: 0 15px;}
.gonggao .gongc{float: right;margin-top: 5px;}
.gonggao .gongcon{display: inline-block;vertical-align: middle;width: 70%;}
.gonggao .swiper-gg{height: 20px;overflow: hidden;}
.gonggao .swiper-gg .swiper-slide a{font-size: 14px;color: #000;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;}
.gonggao .swiper-container-free-mode > .swiper-wrapper {-webkit-transition-timing-function: linear;-moz-transition-timing-function: linear;-ms-transition-timing-function: linear;-o-transition-timing-function: linear;transition-timing-function: linear;margin: 0 auto;}

.swiper-scro {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -600px;
    z-index: 999;
	width: 300px;
	height: 160px;
}
.swiper-scro .swiper-wrapper {}
.swiper-scro .swiper-slide{height: 32px !important;}
.swioutline{ position: relative;}
.swioutline .swiper-scro:before {
	content: ''; position: absolute;
    top:50%;
	margin-top: -8px;
    width: 2px;
    height: 16px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
	left: 0;
	display: block;
	background-color: #fff;
}
.swiper-scro .swiper-slide .swiper-scroller-item{opacity: 0.2;}
.swiper-scro .swiper-slide-prev .swiper-scroller-item{opacity: 0.5;}
.swiper-scro .swiper-slide-active .swiper-scroller-item{opacity: 1;}
.swiper-scro .swiper-slide-next .swiper-scroller-item{opacity: 0.5;}
.swiper-scro .swiper-scroller-item{
    position: absolute;
    transition: all .4s;
    top: 0;
    left: 0;
}
.swiper-scro .swiper-scroller-item a {
    padding: 6px 40px;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    cursor: default;
}


.sec-coffe{font-size: 0;position: relative;}
.model{position: relative;width: 33.33%;display: inline-block;}
.main-model>img{width: 100%;}
.modelcon{position: absolute;top: 50px;left: 56px;display: none;}
.mo-tit{}
.mo-tit h3{font-size: 30px;font-weight: bold;margin-top: 0;}
.mo-tit h5{font-size: 14px;color: #333;}
.mo-tit-bai h3,.mo-tit-bai h5{color: #fff;}
.arrow{display: inline-block;margin-top: 40px;width: 40px;height: 40px;border-radius: 50%;text-align: center;position: relative;line-height: 40px;}
.arrow img{}
.arrow-hei:before,.arrow-bai:before{
	content: '';position: relative;
	    display: block;
	    width: 100%;
	    height:100%;
	    border-radius: 100%;
		z-index: 3;
		background: url("../img/arrow-fff.png") no-repeat center;
		background-size: 16px auto;
		background-color:#000;
}
.arrow-hei:after,.arrow-bai:after{
	content: '';position: absolute;
	    display: block;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%) scale(1.0);
	    width: 100%;
	    height:100%;
	    border-radius: 100%;
	    background-color:#000;
	-webkit-animation: warn1 1.2s infinite ease-out;
	 -moz-animation: warn1 1.2s infinite ease-out;
	 animation: warn1 1.2s infinite ease-out;
}
.arrow-bai{background: #fff;}
.arrow-bai:before{background: url("../img/arrow-hei.png") no-repeat center;background-color:#fff;}
.arrow-bai:after{background-color:#fff;}
.main-model-act,.main-model-act .main-model{position: relative;z-index: 4;}

@keyframes warn1 {
0% {transform: translate(-50%, -50%) scale(1.0);opacity:1.0;}
100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0;}}


.sub-model{display: none;overflow: hidden;
background-image: url("../img/coffe-bg.png");
background-repeat: no-repeat;background-size: 100% auto;
width: 200%;height: 100%;position: absolute;left: 100%;top: 0;z-index: 1;
-webkit-animation: subshow 0.6s ease-out;-moz-animation: subshow 0.6s ease-out; animation: subshow 0.6s ease-out;}
@keyframes subshow {from{left: -200%;}to{left: 100%;}}
.sub-model-in{padding: 50px 45px;box-sizing: border-box;}
.sub-shangp{width: 100%;font-size: 0;}

.sub-shp-li{position:relative;cursor: pointer;}
.shp-li-pic{text-align: center;position: relative;    margin-bottom: 20px;}
.shp-li-pic img{}
.shp-li-pic:after{content: ''; width: 150px;height: 110px;background: rgba(0,0,0,0.5);border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); z-index: -1;}
.shp-li-txt{font-size: 14px;color: #fff;text-align: center;}
.shp-li-txt p{font-size: 14px;color: #fff;}
.shp-li-act .shp-li-pic:after{ background: rgba(255,255,255,0.5);}
.hov{display: none;position: absolute;right: -10%;top: 0;width: 102px;height: 31px;}
.sub-shp-li:hover .hov{display: block;}

.swiper-coffee{overflow: inherit;}

.jiezuo{}
.swiper-jiezuo{}
.swiper-jiezuo .swiper-pagination{bottom:10%;}
.swiper-jiezuo .swiper-pagination-bullet{ margin-right: 10px;width: 16px;height: 3px;border-radius: 3px;background: #fff;opacity: 0.5;}
.swiper-jiezuo .swiper-pagination-bullet-active{opacity: 1;width: 24px;}
.swiper-jiezuo>.swiper-pagination-bullets{left: -36%;bottom: 15%;}
.jzuoIn{position: absolute;left: 0%;top: 0%;width:100%;height: 100%;}
.jzuoIn .container{padding-right: 50%;position: relative;top: 30%;}
.jzuoIn h3{font-size: 30px;color: #fff;font-weight: bold;}
.opcp{font-size: 14px;color: #fff;opacity: 0.5;line-height: 26px;}
.jzuoIn .opcp{padding: 6% 0 10% 0;}
.ljieBtn,.ljieBtnhei{display: inline-block;position: relative;background: #fff;width: 136px;height: 42px;border-radius: 30px;line-height: 42px;text-align: center;-webkit-animation: boxs 1.2s infinite ease-out;-moz-animation: boxs 1.2s infinite ease-out;animation: boxs 1.2s infinite ease-out;}
.ljieBtnhei{-webkit-animation: boxs1 1.2s infinite ease-out;-moz-animation: boxs1 1.2s infinite ease-out;animation: boxs1 1.2s infinite ease-out;}
@keyframes boxs {
	0% {box-shadow: 0 0 0px 0px rgba(255,255,255,0.6);}
	100% {box-shadow: 0 0 0px 10px transparent;}
}
@keyframes boxs1 {
	0% {box-shadow: 0 0 0px 0px rgba(0,0,0,0.6);}
	100% {box-shadow: 0 0 0px 10px transparent;}
}
.ljieBtn span{color: #000;margin-right: 4px;font-size: 14px;display: inline-block;vertical-align: middle;}
.ljieBtn .heng{width: 20px;height: 1px;background: #ccc;display: inline-block;vertical-align: middle;position: relative;}
.ljieBtn .heng:before,.ljieBtnhei .heng:before{content: '';position: absolute;left: 0;top: -1px;width: 3px; height: 3px;border-radius: 50%;background: #000;-webkit-animation: heng 1.2s infinite ease-out;-moz-animation: heng 1.2s infinite ease-out;animation: heng 1.2s infinite ease-out;}
@keyframes heng {0% {left: 0;}100% {left: 100%;}}


.liaojie{font-size: 0;
background-image: url("../img/people-in-couch.png");
	background-repeat: no-repeat;background-size: auto 100% ;
	background-position: right top;
}
.liaojie-l,.liaojie-r{width: 50%;display: inline-block;}
.liaojie-l{ background-color: #fff;    padding: 6% 4% 6% 0;}
.liaojie-l h3{font-size: 30px;font-weight: bold;color: #000;}
.liaojie-l h3 span{font-size: 20px;color: #333;opacity: 0.5;margin-left: 20px;}
.liaojie-l .opcp{font-size: 14px;color: #999;opacity: 1;margin: 6% 0 10% 0;
 -webkit-line-clamp:4;line-clamp: 4;}
.ljieBtnhei{background: #000;}
.ljieBtnhei span{color: #fff;}
.ljieBtnhei .heng:before{background-color:#fff;}
.ljieBtnhei:after{background-color:#000;}
.ljiepic{display: none;}
.sec-coffew{display: none;}



@media screen and (max-width: 1700px){
	.sub-model-in{padding: 30px 20px;}
}
@media screen and (max-width: 1600px){
	.sub-model-in{padding: 20px;}
	.shp-li-pic img {width: 40%;}
	.arrow-bai{margin-top: 20px;float: left;}
	.jzuoIn .container{padding-right: 45%;}
}
@media screen and (max-width: 1500px){
	.sub-model-in{padding: 20px;}
	.arrow-bai{margin-top: 20px; }
}
@media screen and (max-width: 1400px){
	.mo-tit h3{font-size: 28px;}
	.mo-tit-bai h3{font-size: 24px;}
	.arrow-bai{margin-top: 10px;}
	.shp-li-pic img{width: 36%;}
}
@media screen and (max-width: 1200px){
	.mo-tit-bai{display: none;}
	.mo-tit h3{font-size: 22px;}
	.modelcon{top: 20px;left: 20px;}
	
	.swiper-scro{margin-left: -45%;}
	.jzuoIn .container{padding-right: 40%;}
	.jzuoIn h3{font-size: 26px;}
}

@media screen and (max-width: 991px){
	.fir-tit .nav li{margin-right: 50px;}
	.fir-shows .fir-tit .nav{float: initial;}
	.fir-shows .bar .tools{float: inherit;}
	.fir-shows .fir-nav{line-height: 80px;position: initial;left: 0px;top: 0px;transform: none;}
	.fir-show{z-index: 99;}
	.fir-nav .bar .nav>ul>li>a{color: #000;}
	.fir-alone .bar{display: none;}
	
	.fir-shows .fir-nav .bar .nav>ul>li>a{color: #666;}
	.fir-shows .fir-nav .bar .nav>ul>li.nav-act>a{color: #000;}
	.fir-shows .fir-nav .bar .nav>ul>li:hover a{color: #000;}
	
	.fir-alone .bar .nav>ul{display: block;position: relative;background: transparent;box-shadow:none;}
	.fir-nav.fir-alone .bar .nav{display: block;}
	.fir-nav.fir-alone .bar .nav>ul>li>a{color: #fff;}
	.fir-alone .bar .nav-abbreviation{display: none;}
	.fir-alone .fir-logo .logoshu{width: 200px;}
	.fir-tit .nav ul{display: none;}
	.ydlbox{top: 60px;}
	.ydlbox li{line-height: initial;}
	.fir-shows .fir-tools-ss .ssbox{margin-top: 0;}
	.gonggao{position: relative;top: 0;}
	.gonggao .gongv{margin: 0 8px 0 0;}
	
	.model{width: 100%;}
	.sub-model{display: block;position: relative;left: 0;width: 100%;}
	.sub-shangp{overflow: hidden;}

	.liaojie{  background: #fff;}
	.liaojie-l, .liaojie-r{width: 100%;}
	.liaojie-l{padding: 20px 0;}
	.ljiepic{display: block;    width: 100%;}
	
	.swiper-jiezuo .swiper-slide{overflow: hidden;}
	.swiper-jiezuo img{width: 150%;margin-left: -25%;}
	.jzuoIn .container{top: 30px;}
	
}
@media screen and (max-width: 768px){
	.swioutline{display: none;}
	.jzuoIn .container {padding-right: 15px;}
	.jzuoIn h3 {font-size: 20px;}
	.jzuoIn .opcp {padding: 20px 0 30px 0;}
}
@media screen and (max-width: 640px){
	.sub-model-in {padding: 0 20px;}
	.sub-model{background: #262626; height: 100%;}
	.shp-li-pic img {width: 30%;}
	.hov{right: 0;display: block;}
	.swiper-jiezuo img{width: 200%;margin-left: -50%;}  
	.jzuoIn .container {top: 0;}
	.jzuoIn h3 {font-size: 16px;}
	.jzuoIn .opcp{ padding: 0;margin: 20px 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}
}
@media screen and (max-width: 540px){
	.fir-shows .fir-nav{line-height: 60px;}
	.fir-shows .fir-tit .fir-tools-gwc{display: none;}
	.fir-shows .fir-tools-ss .ssbai{margin-top: 0;top: 0;}
	.fir-shows .fir-tools-ss .ssbox {margin-top: 40px;}
	.gonggao h3{display: none;}
	.fir-alone .fir-logo .logoshu{width: 160px;}
}

@media screen and (max-width: 414px){
	.swiper-banner .swiper-slide{overflow: hidden;}
	.swiper-banner img{width: 150%;margin-left: -25%;}
	.mo-tit h3 {font-size: 18px;}
	
	.jzuoIn h3{font-size: 16px;}
	.liaojie-l h3{font-size: 22px;}
}


