﻿@import url(style.css);
@import url(slide.css);
@import url(pscroll.css);
/*首页*/
/*.header-v1 .top-main{ max-width:1600px;}
.navBar{ max-width:1600px;}
.nav-hide .navBar{ max-width:none; width:auto;}
.nav .sub dl{ max-width:1600px;}*/
/*Get Inspired and Design!*/
.i_tt{ text-align:center; color:#999999; overflow:hidden; margin-top:5%;}
.i_tt .h2{ font-weight:normal;color:#333333; margin-bottom:1%; line-height:1.2;}
.i_tt .desc{ margin:0 auto; max-width:400px; width:60%; overflow:hidden; line-height:1.3;}
.i_border{ overflow:hidden;}
.i_one{ overflow:hidden; margin-top:2.5%;}
.i_one ul li{ margin-bottom:2%; overflow:hidden; display:block; position:relative; }
.i_one ul li:last-child{ margin-bottom:0;}
.i_one ul li .imgs{background-repeat:no-repeat; background-position:center center; background-size:cover;transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;}
.i_one ul li .imgs img{ height:100%; display:block; width:100%;opacity:0;filter:Alpha(opacity=0);}
.i_one ul li:hover .imgs{transform: scale(1.1);}
.i_one ul li .txts{ width:50%; position:absolute; right:0; max-width:594px; top:50%;transform: translate(0%, -50%); overflow:hidden;color:#333333;}
.i_one ul li .txts .cons{ width:94%; margin:0 auto; max-width:485px; background:rgba(255,255,255,0.6); overflow:hidden; padding-top:8%; padding-bottom:8%;}
.i_one ul li .txts .cons .boxs{width:94%; margin:0 auto; max-width:426px;}
.i_one ul li .txts .h3{  font-weight:normal; margin-bottom:2.5%;}
.i_one ul li .txts .p{ font-size:13px; line-height:24px; height:48px;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.i_one ul li .txts .a{ width:28px; height:12px; margin-top:8%; overflow:hidden; display:block; background:url(../images/i_bg1.png) left top no-repeat; background-size:100% auto;transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;}
.i_one ul li .txts:hover .a{ margin-left:5px;}
.i_one ul li:hover .txts .a{ background-image:url(../images/i_bg1_on.png);}
.i_one ul li:nth-child(2n+0) .txts{ left:0;}
/*Magazine*/
.i_two{ overflow:hidden; margin-top:3%;}
.i_two.mobile{ display:none;}
.i_two ul li{ float:left; width:645px; overflow:hidden; font-size:16px; position:relative;}
.i_two ul li .imgs{ overflow:hidden;}
.i_two ul li .imgs img{display: block;width: 100%;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s; transition:all 0.3s ease-out 0s;}
.i_two ul li:hover .imgs img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);}
.i_two ul li:nth-child(1){ margin-right:10px; height:450px;}
.i_two ul li:nth-child(2){ height:220px;margin-bottom:10px;}
.i_two ul li:nth-child(3){ width:317px; height:220px; margin-right:10px; /*text-align:right;*/}
.i_two ul li:nth-child(4){ width:317px; height:220px;}
.i_two ul li .txts{ position:absolute; width:100%; height:100%; top:0; left:0;}
.i_two ul li .txts .cons{ margin:0 auto; width:90%; overflow:hidden; color:#333;}
.i_two ul li .h2{ font-weight:normal; overflow:hidden; margin-bottom:5px; margin-top:8%;}
.i_two ul li:nth-child(1) .h2,.i_two ul li:nth-child(3) .h2,.i_two ul li:nth-child(4) .h2{ margin-top:16%;}
/*Products*/
.i_three{ overflow:hidden; margin-top:3%; border-left:1px solid #f3f3f3;border-top:1px solid #f3f3f3;}
.i_three.bgs2{ margin-top:2%;}
.i_three ul li{ float:left; width:25%; overflow:hidden;}
.i_three ul li .boxs{ overflow:hidden;border-right:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3;}
.i_three ul li .imgs{ overflow:hidden; position:relative;}
.i_three ul li .imgs img{display: block;width: 100%; height:250px;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s; transition:all 0.3s ease-out 0s;}
.i_three ul li:hover .imgs img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);}
.i_three ul li .imgs .bgs{ background:rgba(255,255,255,0.89); position:absolute; top:0; left:0; width:100%; height:100%;transition:all 0.3s;opacity:0;filter:Alpha(opacity=0);}
.i_three ul li .imgs .bgs .desc{ width:80%; position:absolute; top:50%; left:50%; max-width:196px; border:3px solid #0000ff; color:#333333; line-height:24px; font-size:14px;transform: translate(-50%, -50%); text-align:center;}
.i_three ul li .imgs .bgs .desc span{ display:block; max-width:148px; width:92%; margin:0 auto; padding-top:10%; padding-bottom:10%;}
.i_three ul li .imgs:hover .bgs{opacity:1.0;filter:Alpha(opacity=100);}
.i_three ul li .txts{ width:94%; margin:0 auto; max-width:266px; overflow:hidden; margin-top:22px; margin-bottom:29px; color:#333;}
.i_three ul li .txts .h3{ font-size:14px; height:26px; line-height:26px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis; font-weight:lighter;}
.i_three ul li .txts .h3 span{ font-weight:bold; padding-right:7px;}
.i_three ul li .txts .h3:hover{ color:#0000ff;}
.i_three ul li .txts .price{ font-size:14px;height:24px; line-height:24px; overflow:hidden;}
.i_three ul li .txts .price{ font-size:14px;height:24px; line-height:24px; overflow:hidden;}
.i_three ul li .txts .color{ overflow:hidden; margin-top:10px;}
.i_three ul li .txts .color span{ float:left; padding-left:10px; padding-right:10px;height:24px; line-height:24px; overflow:hidden; background:#f6f6f6; font-size:12px; color:#666666;}
.i_three_a{ display:block; margin:0 auto; width:138px; height:38px; line-height:38px; overflow:hidden; border:1px solid #e3e3e3; border-radius:6px; text-transform:uppercase; text-align:center; color:#999999; font-size:14px;transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s; margin-top:4%;}
.i_three_a:hover{ background:#0000ff; color:#fff; border:1px solid #0000ff;}
.i_three ul li .boxs2{ overflow:hidden;border-right:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3; height:385px;}
.i_three ul li .boxs2 a{ display:block; margin:0 auto; width:76%; max-width:185px; text-align:center; overflow:hidden; border:5px solid #cccccc; padding-top:40px; padding-bottom:40px; margin-top:122px;transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;}
.i_three ul li .boxs2 a .span1{ display:block; height:26px; line-height:26px; overflow:hidden; margin-bottom:8px; color:#333333; font-size:18px;}
.i_three ul li .boxs2 a .span2{ display:block; height:20px; line-height:20px; overflow:hidden; font-size:12px; color:#666666;}
.i_three ul li .boxs2 a:hover{ border-color:#0000ff;}
.i_three ul li .boxs2 a:hover .span1{ color:#0000ff;}
.i_three ul li .boxs2 a:hover .span2{ color:#0000ff;}
.i_pro_t{ border-left:3px solid #3a3a3a; padding-left:10px; height:18px; line-height:18px; margin-top:4%; /*overflow:hidden;*/ font-size:20px;}
#i_three_3{ margin-bottom:4%;}

@media screen and (max-width: 1440px) {
/*Magazine*/
.i_two ul li{ width:49.61%;}
.i_two ul li:nth-child(1){ margin-right:0.769%;}
.i_two ul li:nth-child(2){margin-bottom:0.769%;}
.i_two ul li:nth-child(3){ width:24.38%;margin-right:0.769%;}
.i_two ul li:nth-child(4){ width:24.38%;}
}
@media screen and (max-width: 960px) {
/*Get Inspired and Design!*/
.i_tt{ margin-top:6%;}
.i_border{ border-top:10px solid #eeeeee; padding-bottom:6%;}
.i_one ul li .txts .cons{ padding-top:6%; padding-bottom:6%;}
.i_one ul li .txts .p{ line-height:22px; height:66px;}
.i_one ul li .txts .a{ width:24px; height:10px; margin-top:6%; display:none;}
/*Magazine*/
.i_two ul li{ width:49%; margin-bottom:2%; font-size:15px;}
.i_two ul li:nth-child(1){ margin-right:0%; height:auto;}
.i_two ul li:nth-child(2){ margin-bottom:2%;height:auto;}
.i_two ul li:nth-child(3){ width:49%;margin-right:0%;height:auto;}
.i_two ul li:nth-child(4){ width:49%;height:auto;}
.i_two ul li:nth-child(2n+0){ float:right;}
.i_two ul li .h2{ margin-top:10%;}
.i_two ul li:nth-child(1) .h2,.i_two ul li:nth-child(3) .h2,.i_two ul li:nth-child(4) .h2{ margin-top:10%;}
.i_two.pc{ display:none;}
.i_two.mobile{ display:block;}
/*Products*/
.i_pro_t{ border-left:0; text-align:center; margin-top:6%; font-size:28px; line-height:1.5; height:auto;}
.i_three ul li{ width:50%;}
.i_three ul li .imgs img{ height:auto;}
.i_three ul li .imgs .bgs .desc{ font-size:13px;}
.i_three ul li .boxs2 a{ margin-top:35%;}
}
@media screen and (max-width: 780px) {
/*Get Inspired and Design!*/
.i_border{ border-top:8px solid #eeeeee;}
}
@media screen and (max-width: 640px) {
/*Get Inspired and Design!*/
.i_border{ border-top:6px solid #eeeeee;}
.i_one ul li .txts .p{ line-height:20px; height:60px; font-size:12px;}
/*Magazine*/
.i_two ul li{ font-size:14px;}
/*Products*/
.i_pro_t{ font-size:24px;}
.i_three.bgs2{ margin-top:4%;}
.i_three ul li .txts{ margin-top:15px; margin-bottom:18px;}
.i_three ul li .imgs .bgs{ display:none;}
.i_three ul li .boxs2 a{ border-width:3px; padding-top:30px; padding-bottom:30px;}
.i_three ul li .boxs2 a .span1{ font-size:16px;}
.i_three_a{ font-size:13px; height:32px; line-height:32px; width:130px;}


}

@media screen and (max-width: 480px) {
/*Get Inspired and Design!*/
.i_border{ border-top:5px solid #eeeeee;}
.i_one ul li .imgs{ padding-top:3%; padding-bottom:3%;}
.i_one ul li .txts .p{ line-height:18px; height:54px;}
/*Magazine*/
.i_two ul li{ font-size:13px;}
/*Products*/
.i_pro_t{ font-size:20px;}
.i_three ul li .txts .h3{ font-size:13px;}
.i_three ul li .txts .price{ font-size:13px;}
.i_three ul li .boxs2 a .span1{ font-size:15px;}
}
@media screen and (max-width: 420px) {
/*Get Inspired and Design!*/
.i_tt .desc{ width:70%;}
}
@media screen and (max-width: 380px) {
/*Get Inspired and Design!*/
.i_tt .desc{ width:90%;}
.i_border{ border-top:4px solid #eeeeee;}
/*Magazine*/
.i_two ul li{ font-size:12px;}
/*Products*/
.i_pro_t{ font-size:19px;}
}
