@charset "utf-8";
/*ͼƬ´Ó×ó±ßƯ³ö¶¯»­*/
.code {
  clear: both;
  background: #d4f2e7 ;
  border-radius: 15px;
  /*margin: 12vh 0;Del by bbh 20160722 */
  padding: 20px; 
  text-align: center;}
  .code pre, .code code {
    height: 100%;
    margin: 0; }
  .code code {
    padding: 20px 0 0 20px; }
  .code--small code {
    padding-top: 75px; }
  .code--left {
    float: left; }
  .code--right {
    float: right; }
  .code--wider {
    width: 60%; }
    .code--wider code {
      padding-top: 60px; }
	 
/* effect-4 css */
@media(max-width: 350px) 
{
.text-desc{border-radius:35px;position: absolute; left: 0; top: 0; background-color: #d2f0f4; height: 100%; opacity: 0; width: 100%; padding: 20px;color:#ff2d51}
.text-desc p{ text-indent:20px; width:100%; text-align:left; font-size:10px;}
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);border-radius:35px;}
.port-4 .text-desc h3{font-size: 10px;margin:-16% 0 1%;color:#2587c6;}
.port-4 img{border-radius:10px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; padding:2px;}
 
}
@media (min-width: 351px) and (max-width: 1000px) 
{
.text-desc{border-radius:35px;position: absolute; left: 0; top: 0; background-color: #d2f0f4; height: 100%; opacity: 0; width: 100%; padding: 20px;color:#ff2d51}
.text-desc p{ text-indent:20px; width:100%; text-align:left; font-size:10px;}
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);border-radius:35px;}
.port-4 .text-desc h3{font-size: 12px;margin:-5% 0 1%;color:#2587c6;}
.port-4 img{border-radius:10px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; padding:2px;}
 
}
@media (min-width: 1024px) 
{
.text-desc{border-radius:35px;position: absolute; left: 0; top: 0; background-color: #d2f0f4; height: 100%; opacity: 0; width: 100%; padding: 20px;color:#ff2d51}
.text-desc p{ text-indent:20px; width:100%; text-align:left; font-size:10px;}
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);border-radius:35px;}
.port-4 .text-desc h3{font-size: 12px;margin:-16% 0 1%;color:#2587c6;}
.port-4 img{border-radius:10px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; padding:2px;}
 
}
@media (min-width: 1200px) and (max-width: 1366px) {
.text-desc{border-radius:35px;position: absolute; left: 0; top: 0; background-color: #d2f0f4; height: 100%; opacity: 0; width: 100%; padding: 20px;color:#ff2d51}
.text-desc p{ text-indent:20px; width:100%; text-align:left;font-size:inherit;}
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);border-radius:35px;}
.port-4 .text-desc h3{font-size: 16px;margin: -7% 0 2%;color:#2587c6;}
.port-4 img{border-radius:10px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; padding:2px;}
 
}
@media (min-width: 1400px) and  (max-width: 1600px) 
{
.text-desc{border-radius:35px;position: absolute; left: 0; top: 0; background-color: #d2f0f4; height: 100%; opacity: 0; width: 100%; padding: 20px;color:#ff2d51}
.text-desc p{ text-indent:20px; width:100%; text-align:left;font-size:inherit;}
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);border-radius:35px;}
.port-4 .text-desc h3{font-size: 19px;margin: -1% 0 5%;color:#2587c6;}
.port-4 img{border-radius:10px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; padding:2px;}
}
.port-4.effect-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}
.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-1:hover .text-desc{transform: rotateY(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-1:hover img{transform: rotateY(0deg) scale(0, 0);}

/*.port-4.effect-2{z-index: 12;}*/
.port-4.effect-2 img{transition: 0.5s; transform: rotateX(360deg) scale(1, 1);}
.port-4.effect-2 .text-desc{transform: rotateX(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-2:hover .text-desc{transform: rotateX(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-2:hover img{transform: rotateX(0deg) scale(0, 0);}

.port-4.effect-3 img{transition: 0.5s; transform: rotate(360deg) scale(1, 1);}
.port-4.effect-3 .text-desc{transform: rotate(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-3:hover .text-desc{transform: rotate(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-3:hover img{transform: rotate(0deg) scale(0, 0);}
/* effect-4 css end */


/*.case-content{overflow:hidden;margin:80px auto 0 auto;width:1200px}*/
.case-content{overflow:hidden;width:100%; }
/* .case-item{float:left;margin:30px 40px;margin-bottom:20px} */
.case-item{float:left;}
.ih-item{position:relative;-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
.ih-item,.ih-item *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ih-item a{color:#333}
.ih-item a:hover{text-decoration:none}
.ih-item img{width:100%;height:100%}
.ih-item.circle,.ih-item.circle .img{position:relative;width:100px;height:100px;border-radius:50%}/*ͼƬµÄ¿í¶È*/
.ih-item.circle .img:before{position:absolute;display:block;content:'';width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.3);-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
.ih-item.circle .img img{border-radius:50%}
.ih-item.circle .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ih-item.square{position:relative;width:316px;height:216px;border:8px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,.3)}
.ih-item.square .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ih-item.circle.effect1 .spinner{width:110px;height:110px;/*¿í¡¢¸ßΪͼƬ¿í¡¢¸ß¸÷¼Ó10ÏñËØ*/border:10px solid #ecab18;border-right-color:#1ad280;border-bottom-color:#1ad280;border-radius:50%;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.ih-item.circle.effect1 .img{position:absolute;top:10px;bottom:0;left:10px;right:0;width:auto;height:auto}
.ih-item.circle.effect1 .img:before{display:none}
.ih-item.circle.effect1.colored .info{background:#1a4a72;background:rgba(26,74,114,.6)}
.ih-item.circle.effect1 .info{top:10px;bottom:0;left:10px;right:0;background:#333;background:rgba(0,0,0,.6);opacity:0;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
/* .ih-item.circle.effect1 .info h3{color:#fff;text-transform:uppercase;position:relative;letter-spacing:2px;font-size:24px;margin:0 30px;padding:55px 0 0;height:110px;text-shadow:0 0 1px white,0 1px 2px rgba(0,0,0,.3)} */
.ih-item.circle.effect1 .info h3 {color: #fff;font-size: 12px;height: 100px;letter-spacing: 2px;position: relative;text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);text-transform: uppercase;  width: 100px;  margin-top: 26px;line-height: 2em;padding: 10px 0;text-indent:0px;}
/* .ih-item.circle.effect1 .info p{color:#bbb;padding:10px 5px;font-style:italic;margin:0 30px;font-size:12px;border-top:1px solid rgba(255,255,255,.5)} */
.ih-item.circle.effect1 a:hover .spinner{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.ih-item.circle.effect1 a:hover .info{opacity:1}

.rotating{-moz-transition: -moz-transform 0.5s ease-out;-o-transition: -o-transform 0.5s ease-out;-ms-transition: -ms-transform 0.5s ease-out;}
.rotating:hover{-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-o-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg);}