@charset "utf-8";
/* CSS Document */
.pro_box{width:calc(33.3% - 30px);margin:0 15px 30px; float:left; position:relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+1,d1d1d1+93 */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top, #ededed 1%, #d1d1d1 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ededed 1%,#d1d1d1 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ededed 1%,#d1d1d1 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */border-radius:3px; border:1px solid #CFCFCF ;padding:20px 20px 110px}
.pro_box a{ position:absolute;width:100%; height:100%;left:0; top:0; z-index:10}
.pro_box .pic{ text-align:center}
.pro_name{ background:#fff;padding:15px 10px; position:absolute; bottom:35px; left:0;width:80%; transition:all 0.5s ease-in-out}
.pro_box:hover .pro_name{ background:#9A031E; color:#fff}
.index_pro div.pro_box:nth-child(2){ -webkit-animation-delay:0.1s ; animation-delay:0.2s}
.index_pro div.pro_box:nth-child(3){ -webkit-animation-delay:0.2s ; animation-delay:0.4s}
.show_add , .ahow_date , .booth{-webkit-animation-delay:0.2s; animation-delay: 0.2s ; -webkit-animation-duration:500;animation-duration: 500}

.banner{ background:url(../images/banner/banner.jpg) center top no-repeat ;width:100%; height:700px; overflow: hidden}
.banner_slick{width:680px;margin:0 auto}
.banner_slick .slick-dots li{width:35px; height:8px; transition:all 0.3s ease-in-out}
.banner_slick .slick-dots li.slick-active{width:50px}
.banner_slick .slick-dots li button{width:100%; height:100%; border-radius:20px; background:#EFEFEF;padding:0; display:block}
.banner_slick .slick-dots li.slick-active button{ background:#50F3F3}
.banner_slick .slick-dots li button:before{ content:""; height:auto}
.banner_slick .slick-dots{ bottom:40px}

.ban_box{ position:relative}
.ban_box .ban_info , .ban_box h2{ position:absolute; z-index: 100; color:#800E13}
.ban_box .ban_info{line-height: 160%; color:#38040E}
.ban_box h2{font-size:35px;width:50%; line-height: 130%}

.ban_box h2 { transform:all 1s ease-in-out}
.ban_box .ban_info{ transform:all 1.5s ease-in-out;font-size:14px;}

.ban_box1 h2{ left:22%; bottom:12%; opacity: 0; transform: translateX(-100px)}
.ban_box1 .ban_info{ right:0%; top:15%; width:45%;opacity: 0; transform: translateX(150px)}

.ban_box2 h2{ right:10%; top:20%;width:45%;opacity: 0; transform: translateX(150px)}
.ban_box2 .ban_info{ left:12%; bottom:13%;  color:#38040E;width:45%; opacity: 0; transform: translateX(-100px)}

.ban_box3 h2{ right:10%; top:20%;width:45%;opacity: 0; transform: translateX(150px)}
.ban_box3 .ban_info{ left:12%; bottom:13%;  color:#38040E;width:45%; opacity: 0; transform: translateX(-100px)}


.ban_box1.slick-active h2{ animation-name: ban_left_fade ;animation-duration: 1s; transform: translateX(0); opacity: 1}
.ban_box1.slick-active .ban_info{ animation-name: ban_right_fade ;animation-duration: 1.5s; transform: translateX(0); opacity: 1}


.ban_box2.slick-active h2{ animation-name:ban_right_fade   ;animation-duration: 1s; transform: translateX(0); opacity: 1}
.ban_box2.slick-active .ban_info{ animation-name: ban_left_fade;animation-duration: 1.5s; transform: translateX(0); opacity: 1}

.ban_box3.slick-active h2{ animation-name:ban_right_fade   ;animation-duration: 1s; transform: translateX(0); opacity: 1}
.ban_box3.slick-active .ban_info{ animation-name: ban_left_fade;animation-duration: 1.5s; transform: translateX(0); opacity: 1}


@media (max-width: 980px) {
.banner{height:600px; background-size:cover}
.banner_slick{width:600px}
}


@media (max-width: 880px) {
.index_pro div.pro_box:nth-child(2){ -webkit-animation-delay:0s ; animation-delay:0s}
.index_pro div.pro_box:nth-child(3){ -webkit-animation-delay:0s ; animation-delay:0s}
.show_add , .ahow_date , .booth{-webkit-animation-delay:0.1s; animation-delay: 0.1s ; -webkit-animation-duration:300;animation-duration: 300}
.ban_box h2{font-size:30px;line-height: 120%}
.ban_box .ban_info{line-height: 150%}
}



@media (max-width: 680px) {
	.pro_name{width:90%;padding:10px; font-size:15px}
	.pro_box{margin:0 10px ;padding:20px 5px 70px}
	
}
@media (max-width: 580px) {
.banner{height:400px;}
.banner_slick{width:400px}
.ban_box .ban_info{ display:none}
.ban_box img{ position:relative;top:-10px;  z-index: 5}
.ban_box1 h2 , .ban_box2 h2 ,.ban_box3 h2{right:auto; left:13%; bottom:25%; top:auto;width:60%; font-size:25px}	
.ban_box2 h2{width:45%;opacity: 0; transform: translateX(-100px)}
.ban_box3 h2{width:45%;opacity: 0; transform: translateX(-100px)}
.ban_box2.slick-active h2{ animation-name:ban_left_fade ; transform: translateX(0px) }
.ban_box3.slick-active h2{ animation-name:ban_left_fade ; transform: translateX(0px)}
}
@media (max-width: 480px) {
.pro_name{ bottom:20px}
.banner{height:350px;}
.banner_slick{width:350px}
.ban_box1 h2 , .ban_box2 h2 ,.ban_box3 h2{right:auto; left:8%; bottom:25%; top:auto;width:60%; font-size:20px}	
}

@-webkit-keyframes ban_left_fade {
  0%   { opacity: 0; transform: translateX(-100px) }
  100% { opacity: 1; transform: translateX(0) }
}

@-webkit-keyframes ban_right_fade {
  0%   { opacity: 0; transform: translateX(150px) }
  100% { opacity: 1; transform: translateX(0) }
}