150 lines
5.2 KiB
CSS
Executable File
150 lines
5.2 KiB
CSS
Executable File
body {font: 14px "Microsoft YaHei",sans-serif; min-width: 100%; min-height: 100%; color: #666;}
|
|
p {padding: 0; margin: 0;}
|
|
ul { padding: 0; margin: 0; list-style-type: none;}
|
|
.image-box {}
|
|
.image-box img { width:100%; display: block;}
|
|
|
|
/*tab*/
|
|
.li_special_a img {width:100%;display: block;}
|
|
|
|
.lj_special_t {width:100%;background:#ddd; padding: 3% 0;}
|
|
|
|
@media screen and (min-width:1366px){
|
|
.lj_table,.lj_special_p{width:73%;margin: auto;}
|
|
}
|
|
|
|
|
|
@media screen and (max-width:1365px){
|
|
.lj_table,.lj_special_p{width:90%;margin: auto;}
|
|
}
|
|
|
|
@media screen and (min-width:1000px){
|
|
.t-one {width: 24.25%; margin: 1% 1% 0 0;}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width:550px) and (max-width:999px){
|
|
.t-one {width:49%;margin: 1% 1% 0 0;}
|
|
.lj_special_p {display: none;}
|
|
.t-one:nth-child(2n) {margin: 1% 0 1% 1%;}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width:549px){
|
|
.t-one {width:100%;margin:2% 0;}
|
|
.lj_special_p {display: none;}
|
|
|
|
}
|
|
|
|
@media screen and (min-width:1200px){
|
|
.t-up img{margin-top: 35%;}
|
|
}
|
|
@media only screen and (min-width:1000px) and (max-width:1199px){
|
|
.t-up img{margin-top: 45%;}
|
|
}
|
|
@media only screen and (min-width:769px) and (max-width:999px){
|
|
.t-up img{margin-top: 26%;}
|
|
}
|
|
|
|
@media only screen and (min-width:640px) and (max-width:768px){
|
|
.t-up img{margin-top: 30%;}
|
|
}
|
|
|
|
|
|
@media only screen and (min-width:550px) and (max-width:639px){
|
|
.t-up img{margin-top: 30%;}
|
|
}
|
|
@media only screen and (min-width:400px) and (max-width:549px){
|
|
.t-up img{margin-top: 24%;}
|
|
}
|
|
|
|
|
|
@media only screen and (max-width:399px){
|
|
.t-up img{margin-top: 28%;}
|
|
}
|
|
|
|
|
|
|
|
|
|
.t-one{float: left;background-color: #fff;position: relative;border-radius: 5%; padding: 2% 0;}
|
|
.t-one:last-child{margin-right: 0;}
|
|
.t-one p {text-align: center; line-height: 32px;}
|
|
.t-up{width:100%;background: #51BDE9;opacity:0.85;text-align: center;position: absolute;top: 0;display:none;border-radius: 5%;}
|
|
.sjx{width:0;height:0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid #51BDE9;position: absolute;bottom:-3%;left:50%;opacity:0.85; margin-left: -15px;}
|
|
.lj_special_p li {width:24.25%; margin-right:1%; text-align: center; padding: 4% 0 2%; float: left;}
|
|
.lj_special_p li:last-child{margin-right:0;}
|
|
.lj_special_line { width:50px; margin:6% auto; border-bottom: 1px solid #828282; }
|
|
.special_font { color: #002855;}
|
|
|
|
/*special*/
|
|
.text-desc{position: absolute; left: 0; top: 0; background-color: #4467a1; height: 100%; opacity: 0; width: 100%;}
|
|
.li_special_b { padding:0 0 3% 0;}
|
|
.li_special_b img {width:100%; display: block;}
|
|
.spe_m {padding-top: 3%;}
|
|
.lj_special { margin: auto;}
|
|
.lj_special img {width:100%; display: block;}
|
|
.lj_com-gray::before { content: "";left: 10%; right: 10%; border-bottom: 1px solid #dedede; position: absolute;top: 50%;z-index: 1;}
|
|
.lj_special_com {text-align: center; position: relative; margin-bottom:3%;}
|
|
.lj_special_com .comtit {font-size: 1.56em;color: #404040;}
|
|
.special_eng{ letter-spacing: 0.1em; opacity: 0.5;}
|
|
|
|
.lj_special_com p {position: relative;display: inline-block;font-size: 1.33rem;z-index: 1;padding: 0 2rem;background-color: #fff;}
|
|
.lj_special_img {width:100%;}
|
|
.lj_special_img li{float: left; width:49%; margin:0.5% 1% 0.5% 0; list-style: none;}
|
|
.lj_special_img li:nth-child(2n) {margin: 0.5% 0 0.5%;}
|
|
|
|
.lj_special_img01 {}
|
|
.lj_special_img01 li{float: left; width:32%; margin:1%; list-style: none;}
|
|
.lj_special_img01 li:nth-child(2n) {margin: 1% 0;}
|
|
@media screen and (min-width:1366px){
|
|
.special_title {top:40%;font-size: 1.8em; }
|
|
.special_title01 {top:40%;font-size: 1.375em; }
|
|
.lj_special { width:73%;}
|
|
}
|
|
|
|
@media screen and (min-width:1000px) and (max-width:1365px){
|
|
.special_title {top:40%;font-size: 1.5em; }
|
|
.special_title01 {top:36%;font-size: 1.2em; }
|
|
.lj_special { width:90%;}
|
|
}
|
|
|
|
@media screen and (min-width:768px) and (max-width:999px){
|
|
.special_title {top:38%;font-size: 1.3em; }
|
|
.special_title01 {top:32%;font-size: 1.1em; }
|
|
.lj_special { width:90%;}
|
|
}
|
|
|
|
@media screen and (min-width:480px) and (max-width:767px){
|
|
.special_title {top:34%;font-size: 1.2em; }
|
|
.special_title01 {top:36%;font-size:1em; }
|
|
.lj_special { width:90%;}
|
|
}
|
|
|
|
@media screen and (max-width:479px){
|
|
.special_title {top:40%;font-size:0.9em; }
|
|
.special_title01 {top:30%;font-size: 0.9em; }
|
|
.special_line {display: none;}
|
|
.lj_special { width:90%;}
|
|
}
|
|
.special_title,.special_title01 {position: absolute; text-align: center;width:100%;}
|
|
.special_line {border-bottom:1px solid #fff; width:50px; text-align: center; margin: auto; padding-top:4%; }
|
|
|
|
/* effect-1 css */
|
|
.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);}
|
|
.port-1 .text-desc{opacity: 0.9; top: 100%; transition: 0.5s; color: #fff; }
|
|
|
|
.port-1 img{transition: 0.5s;}
|
|
.port-1:hover img{transform: scale(1.2);}
|
|
|
|
.port-1.effect-1:hover .text-desc{top: 0;}
|
|
|
|
.port-1.effect-2 .text-desc{top: auto; bottom: -100%;}
|
|
.port-1.effect-2:hover .text-desc{bottom: 0;}
|
|
|
|
.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
|
|
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%;}
|
|
/* effect-1 css end */
|
|
|
|
|
|
|