﻿.proShow_wrap{padding: 40px 0 60px 0;}
.magnifier{width:500px;height:500px;border:1px solid #d7d7d7;}
.preview{width:500px;height:500px;position:relative;}
.preview a{display:table;margin: 0 auto}
.preview a span{display: table-cell;vertical-align: middle;height: 500px;}
.preview a img{display: block; max-width: 100%;max-height: 100%;}
div.zoomDiv{z-index:20;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#fff;border:1px solid #ccc;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url(img/mask.png);cursor:move;z-index:2;}
.proVideo{position:absolute;top:0;left:0;display:none;}
.magnifier .play,.magnifier .close{width:50px;height:50px;position:absolute;right:0;top:0;z-index:5;cursor:pointer;background:#fff url('../images/v_close.png') no-repeat;width:42px;height:42px;z-index:20;display:none;}
.magnifier .play{right:auto;top:auto;bottom:5px;left:5px;display:none;background: url('../images/play.png') no-repeat;display:block;}
.proVideo .video-js .vjs-big-play-button{display:none;}


.magnifierSlide{margin-top:10px;width:500px;height:80px;overflow:hidden;position:relative;}
.magnifierSlide .btn{width:24px;height:80px;position:absolute;top:0;left:0;background:url('img/magnifier_btn.png') center;overflow:hidden;cursor:pointer;transition:all 0s;}
.magnifierSlide .prev{background-position: 0 6px;}
.magnifierSlide .next{background-position: -16px 6px;right:0;left:auto;}
.magnifierSlide .prev:hover{background-position:40px 6px;}
.magnifierSlide .next:hover{background-position: -56px 6px;}

.magnifierSlide .items{position:relative;width:440px;height:80px;margin:0 auto;overflow:hidden;}
.magnifierSlide .items ul{position:absolute;width:580px;height:80px;}
.magnifierSlide .items ul li{width:90px;height:80px;float:left;margin-right: 10px}
.magnifierSlide .items ul li a{display: block;width: 90px;height: 78px;}
.magnifierSlide .items ul li img{width:100%;max-height:78px;cursor:pointer;border:1px solid #ccc;display: block;margin: 0 auto}
.magnifierSlide .items ul li img:hover,.magnifierSlide .items ul .on img{border:1px solid #064088;}

/* ???????????? */
.proshow_synopsis{width:630px;color: #aaa;font-size: 14px;line-height: 30px; height:510px;padding:70px 0;background:#f5f5f5;background:#fff;}
.proshow_synopsis .title{font-size:25px; color:#000;font-weight:normal;}
.proshow_synopsis .title span{font-size: 14px;color: #9f9f9f;display: block;}
.proshow_synopsis strong{color: #333;font-weight: normal; }
.proshow_synopsis .font{line-height:24px;overflow: hidden;padding: 40px 0;border-top: 1px dashed #e7e7e7;margin: 30px 0 60px 0;font-size: 14px;color: #6f6f6f;}
.proshow_synopsis .font strong{display: block;font-size: 16px;margin-bottom: 20px;}
.prodcut-tel{ padding-left:40px; margin-bottom:20px; line-height:26px; background:url('../images/p_icon.png') no-repeat left 8px; }
.prodcut-tel span{font-family:arial; font-size:24px; color:#f13a3a;display: block; }
.proshow_synopsis .btn a{display: inline-block;float: left; width: 100px; height: 40px; line-height: 40px;text-align: center; color: #fff;transition: all 0.3s;font-size:12px;background: #064088;transition: 0.5s all;}
.proshow_synopsis .btn a:hover{box-shadow: 0 0 14px #68d17d}

.proshow_synopsis .btn dt{float: left;margin-left: 50px;font-size: 14px;color: #565656;background: url(img/tel.png)no-repeat left;padding-left: 24px}
.proshow_synopsis .btn dt span{font-size: 25px;color: #064088;}

.prosShow_main .menu{border-top: 1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;line-height: 50px;margin-bottom: 20px;}
.prosShow_main li{display: inline-block; color: #064088;font-size: 18px;border-bottom: 2px solid #064088;font-weight: bold;}

.relaPro .tie{font-size: 25px;color: #064088;border-bottom: 1px dashed #b9b9b9;padding-bottom: 20px;padding-left: 32px;position: relative;margin-bottom: 30px;}
.relaPro .tie:after{content: '';position: absolute;display: block;width: 8px;height: 20px;background: #064088;left: 0;top: 4px;}

.relaPro ul li{float: left;width: 378px;height: 468px; border:1px solid #e5e5e5;margin-right: 30px;position: relative;transition: 0.5s all}
.relaPro ul li h3{position: absolute;left: 0;bottom: 0;width: 100%;height: 100px;line-height: 100px;font-weight: normal;font-size: 16px;color: #333;text-align: center;}
.relaPro ul li .pic{display: table;margin: 0 auto;}
.relaPro ul li .pic span{display: table-cell;vertical-align: middle;height: 370px;overflow: hidden;}
.relaPro ul li .pic img{display: block;max-width: 100%;max-height: 100%;transition: 0.5s all}
.relaPro ul li:hover{border:1px solid #064088}
.relaPro ul li:hover h3{color: #064088}
.relaPro ul li:hover img{transform: scale(1.1);}