@charset "utf-8";

.tuancan{ }
.tuancan ul li{ position:relative; height:720px; float:left; width:50%; background-repeat:no-repeat; background-position:center center; background-size:cover; line-height:1; overflow:hidden;}
.tuancan ul li .back_imgs{height:720px; width:100%;transition: 0.4s;background-size: cover;}
.tuancan ul li:hover .back_imgs{transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);filter: blur(2px);}
.tuancan ul li::after {
  left:0; right:0;
  position: absolute;
  top:0; bottom:0;
  content: " ";
  width: 100%;
  background: rgba(0,0,0,0.6);
  -webkit-transition: .3s;
  transition: .3s;
  height: 100%;
  z-index: 1;
}
.tuancan ul li .fonts_show{ position:absolute; left:0; width:100%; text-align:center; top:50%; margin-top:-200px; color:#ffffff; z-index:2}
.tuancan ul li .fonts_show .icon{position: relative; width:120px; height:120px; line-height:120px; text-align:center; font-size:50px; margin:0px auto; margin-bottom:60px; background: rgba(217,179,114,0.9);border-radius:50%;}
.tuancan ul li:nth-child(1) .fonts_show .icon::after {
  display: block;
  content: '';
  background: rgba(217,179,114,0.15);
  position: absolute;
  border-radius: 50%;
  animation: twinkle2 1.3s;
    animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-iteration-count: infinite;
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
}
.tuancan ul li:nth-child(2) .fonts_show .icon::after {
  display: block;
  content: '';
  background: rgba(217,179,114,0.15);
  position: absolute;
  border-radius: 50%;
  animation: twinkle2 2.3s;
    animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-iteration-count: infinite;
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
}
@keyframes twinkle2{
				0%{
					width: 0;
    			  height: 0;
					opacity: 0;
              left: 50%;
    				top: 50%;border-radius: 50%;
					}
				50%{
					opacity: 1;border-radius: 50%;
				}
				100%{
              width: 200%;
    			  height: 200%;
              left:-50%;
    				top:-50%;
					opacity: 0;border-radius: 50%;
					}
			}
.tuancan ul li .fonts_show h3{ font-size:24px; font-weight:bold; margin-bottom:50px;}
.tuancan ul li .fonts_show p{ font-size:50px; font-weight:bold;text-transform: uppercase;font-family: 'Swiss721BTBlackCondensed'; margin-bottom:20px;}
.tuancan ul li .fonts_show .links{ display:inline-block; padding:12px 25px; border:#fff 1px solid; color:#ffffff;}
.tuancan ul li:hover .fonts_show .links{background: rgba(217,179,114,0.9);border:#d9b372 1px solid;}
  
@media (max-width:768px) {
.tuancan ul li {
    position: relative;
    height: 400px;
    float: none;
    width: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    line-height: 1;
    overflow: hidden;
}
	.tuancan ul li .back_imgs{ height: 400px;}
	.tuancan ul li .fonts_show .icon {
    position: relative;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 40px;
    margin: 0px auto;
    margin-bottom: 30px;
    background: rgba(217,179,114,0.9);
    border-radius: 50%;
}
	.tuancan ul li .fonts_show p {
		font-size: 26px;}
	.tuancan ul li .fonts_show h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
	.tuancan ul li .fonts_show{ margin-top: -115px;}
}





<!--ºÄÊ±1755412824.8872Ãë-->