body{margin:0; padding:0;} @media screen and (min-width:1460px){ .swt-Container{width:1440px; margin:auto;} } @media screen and (max-width:1459px){ .swt-Container{width:90%; margin:auto;} } @media screen and (max-width:990px){ .swt-Container{width:96%; margin:auto;} } @media screen and (min-width:1280px){ .swt-Container-1200{width:1200px; margin:auto;} } @media screen and (max-width:1279px){ .swt-Container-1200{width:96%; margin:auto;} } /* CSS Document */ /*@media screen and (min-width:1400px){ body, html{font-size:16px;} } @media screen and (min-width:768px) and (max-width:1399px){ body, html{font-size:15px;} } @media screen and (min-width:384px) and (max-widt.S-Cricle-Bgh:767px){ body, html{font-size:13px;} } @media screen and (max-width:383px){ body, html{font-size:12px;} }*/ @media screen and (min-width:1441px){ body, html{font-size:100%;} } @media screen and (min-width:1201px) and (max-width:1440px){ body, html{font-size:98%;} } @media screen and (min-width:767px) and (max-width:1200px){ body, html{font-size:96%;} } @media screen and (min-width:641px) and (max-width:768px){ body, html{font-size:94%;} } @media only screen and (min-width: 481px) and (max-width:640px){ body, html{font-size:92%;} } @media only screen and (min-width: 383px) and (max-width:480px){ body, html{font-size:90%;} } @media only screen and (min-width: 321px) and (max-width:384px){ body, html{font-size:88%;} } @media only screen and (max-width:320px){ body, html{font-size:86%;} } ul, li{list-style: none; padding:0; margin:0;} .Ts-Orage{color:#ff9800;} .Ts-White{color:#ffffff} .transparent_black{color:#333333;} .swt-punctuation{margin-left:8px; font-size: 1.25em;} .float-f{float: left;} .float-r{float: right;} .text-r{text-align: right;} .text-l{text-align: left;} .text-c{text-align: center} .font-75{font-size: 0.75em;} .font-11{font-size: 1.125em;} .font-18{font-size: 1.875em} .font-9{font-size: 0.9em;} .font-color-gray{color:#444;} .letter-S-2{letter-spacing: 2px;} .img-responsive img{height: auto; max-width: 100%} .img-responsives img{display: block; height: auto; width: 100%} .overflow-f{overflow: hidden} .c-fix{clear: both;} .margin-t-5{margin-top: 5%;} .margin-t-1{margin-top:1%;} .margin-t-3{margin-top: 3%;} .margin-b-3{margin-bottom: 3%;} .margin-b-5{margin-bottom: 5%;} .padding-t-3{padding-top:3%;} .padding-b-3{padding-bottom: 3%;} .padding-b-3{padding-bottom: 3%;} .padding-t-4{padding-top:4%;} @media screen and (max-width:767px){ .margin-b-3{margin-bottom: 5%;} } .bg-gray{background-color:#f1f1f1} .bg-white{background-color:#FFF;} .font-red{color: red;} .width-100{width:100%;} .width-92{width:92%; margin:auto;} .f-weight-b{font-weight: bold;} .position-r{position: relative} .swt-Title{font-size: 1.875em; color:#002855; text-align: center; font-weight: 600;} @media screen and (min-width:769px){ .swt-Table{display: table; width:100%;} .swt-Table .Table-Row{display: table-row;} .swt-Table .Table-Row .Table-Cell{display: table-cell; margin:0; padding:0;} } .Swt-Gray{background-color:#f1f1f1; overflow: hidden;} .Swt-Blue-line{width: 4.25%; height: 5px; background-color: #002855; overflow: hidden; margin: 0 auto 2%;} .Swt-Banner{width:100%;} .Swt-Banner img{width:100vw;} .swt-punctuation { margin-left: 8px; font-size: 1.25em; position: absolute; display: inline-block; font-weight: 600; } .Swt-title { color: #002855; font-weight: 600; padding: 5% 0 3%; font-size: 1.875em; text-align: center; } @media screen and (max-width:768px){ .Swt-title {font-size: 1.5em;} } /*一级列表滚动条样式*/ .scrollbar{width:3px; height:562px;} /*详情放大样式*/ .enlarge-img{position: fixed; width:100%; height: 100%; background-color:rgba(0,0,0,0.5); z-index: 99999; top:0; left:0; text-align: center; } .enlarge-img img{height:100vh; max-width: 100%;} .enlarge-img .close{position: absolute; width:100%; height: 28px; background-color:rgba(0,0,0,0.8); z-index: 9; top:0px; color:#FFF; font-size: 0.875em; cursor: pointer; text-align: right;} .enlarge-img .close span{display: inline-block; margin-right:5%;} /*一级列表页*/ .S-list-top{position: relative;} .S-list-top-text{position: absolute; width:100%; height: 100%; top:0; opacity: 0; text-align: center;} @media screen and (min-width:768px){ .S-list-top:hover .S-list-top-text{top:0px; opacity: 1; transition: 0.5s; box-shadow: 3px 5px 15px rgba(0,0,0,0.2);} } .S-list-top{position: relative; } @media screen and (max-width:768px){ .S-list-top-text{opacity: 1; position: relative;} .dcp li .ptit1{margin-top: 0; color:#333; padding-top:8%;} .dcp li .ptit2{color:#333;} .S-list-p-text{background-color:#FFF; } } .cricle{display: block; width: 16px; height: 16px; border-radius: 8px; border: 1px solid #d6d6d6;} .on .cricle{border: 1px solid #737373;} .S-Cricle-Bg{width:10px; height: 10px; border-radius: 5px; margin:3px;} @media screen and (max-width:767px){ .cricle{width:16px; height: 16px; border-radius: 8px;} .ejul dd .ejtext .hd ul li.on{width:16px; height: 16px} .ejul dd .ejtext .hd ul li {float: right; width: 16px; height: 16px; cursor: pointer; margin-right: 5px; margin-bottom: 5px;} .S-Cricle-Bg{width:12px; height: 12px; border-radius:6px; margin:2px;} } /*手机端文件隐藏*/ @media screen and (min-width:1025px){ .Swt-Phone{display: block} } @media screen and (max-width:1024px){ .Swt-Phone{display: none} } /*在线客服*/ .suspension{position:fixed;top:50%;right:0px;transform:translate(0%,-50%);z-index:100;} .suspension-box{position:relative;float:right;} .suspension .a{display:block;text-align:center;border-top:1px solid #f1f1f1;border-left:1px solid #f1f1f1;background:#fff; padding:8px 8px; position: relative; cursor: pointer;} .suspension .a-top{border-bottom:1px solid #f1f1f1;margin-top:10px;} .suspension .a i{display:inline-block;transition:all 2s; font-size: 20px; color:rgba(0,0,0,0.4)} .suspension .a i:hover{color:rgba(0,0,0,0.8)} @media screen and (min-width:769px) and (max-width:1440px){ .suspension .a{padding:15px;} .suspension .a i{font-size: 1.5em;} } @media screen and (max-width:768px){ .suspension .a{padding:10px;} .suspension .a i{font-size: 1.5em;} } @media screen and (max-width:480px){ .suspension .a{padding:5px;} } /*.suspension .a i.l1{width:38px;height:42px;background:url(../images/images/qq1.png);margin-top:12px;} .suspension .a i.l2{width:42px;height:33px;background:url(../images/images/wx1.png);margin:12px 0 12px 0;} .suspension .a i.l3{width:42px;height:30px;background:url(../images/images/ys1.png);margin:12px 0 12px 0;} .suspension .a i.l4{width:42px;height:37px;background:url(../images/images/kf1.png);margin-top:12px;} .suspension .a i.l5{width:34px;height:42px;background:url(../images/images/top1.png);margin-top:12px;} .suspension .a:hover i.l1{background:url(../images/images/qq1-1.png);} .suspension .a:hover i.l2{background:url(../images/images/wx1-1.png);} .suspension .a:hover i.l3{background:url(../images/images/ys1-1.png);} .suspension .a:hover i.l5{background:url(../images/images/top1-1.png);} */ .suspension .a p{text-align:center;color:#666; font-size: 12px;} .suspension .d{display:none;width:190px;background:#fff;position:absolute;right:100%;min-height:90px;border:1px solid #E0E1E5;border-radius:3px;box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);} .suspension .d .arrow{position:absolute;width:8px;height:12px;background:url(../images/side_bg_arrow.png) no-repeat;right:-8px;top:31px;} .d-servcie{top:0;} .d-servcie ul{margin-top:10px; margin-bottom:10px;} .d-servcie li{white-space:nowrap; margin-left:10px; margin-right:10px;padding-left:5px; padding-top: 5px; padding-bottom: 5px; text-align: left; border-bottom: 1px solid rgba(197,197,197,0.2); font-size: 12px;} .d-servcie li a{padding:0;} .suspension .d-service-phone{top:0px;} .suspension .d-qrcode{top:96px;} .suspension .d .inner-box{padding:8px 10px 10px;} .suspension .d-service-item{padding:5px 0;} .suspension .d-service .d-service-item{border-bottom:none;} .suspension .d-service-item .circle{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#F1F1F3;display:block;float:left; } .suspension .d-service-item .i-tel{width:44px;height:44px;background:url(../images/side_con_icon02.png) no-repeat center center;display:block;} .suspension .d-service-item .text{float:left;width:120px;line-height:22px;font-size:15px;margin-left:5px;} .suspension .d-service-item .text .number{color:#e0143f;} .suspension .d-service-intro{padding-top:10px;} .suspension .d-service-intro p{float:left;line-height:27px;font-size:12px;width:100%;color:#888;} .suspension .d-service-intro i{background:url(../images/side_con_icon01.png) no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;} .suspension .d-qrcode{text-align:center;} .suspension .d-qrcode .inner-box{padding:20px 0;} .suspension .d-qrcode p{font-size:16px;color:#93959c;} .show{width:100%;height:100%;background:rgba(0,0,0,.75);position:fixed;top:0;left:0;z-index:10000;display:none;} .show .smask{background:#f1f1f1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:600px;overflow:auto;padding:0 30px;} .show .smask .sarea{padding:46px 0px 49px 0;} .show .smask .sarea .stop1{border-bottom:1px solid #d8d8d8;padding-bottom:28px;} .show .smask .sarea .stop1 span{font-size:24px;color:#444;margin-left:48px;} .show .smask .sarea .stop1 a{float:right;} .show .smask .sarea .feed{padding:28px 76px 0 76px;} .show .smask .sarea .feed .finput{margin-bottom:30px;} .show .smask .sarea .feed .finput label{display:inline-block;width:70px;font-size:14px;color:#444;} .show .smask .sarea .feed .finput label.fla{vertical-align:top;} .show .smask .sarea .feed .finput select{font-size:14px;color:#444;width:29%;padding-left:1%;height:36px;border:none;background:#fff url(../images/images/bott.png) 96% center no-repeat;border-radius:5px;margin-left:10px;} .show .smask .sarea .feed .finput input{font-size:14px;color:#444;width:29%;padding-left:1%;height:36px;border:none;background:#fff;border-radius:5px;margin-left:10px;} .show .smask .sarea .feed .finput input.them{width:89%;padding-left:1%;} .show .smask .sarea .feed .finput textarea{font-size:14px;color:#444;width:89%;padding:18px 0 0 1%;height:198px;background:#fff;border-radius:5px;margin-left:10px;} .show .smask .sarea .feed .finput input.them1{width:59%;margin-left:1%;} .show .smask .sarea .feed .finput a.yzm{display:inline-block;vertical-align:middle;margin-left:1%;} .show .smask .sarea .feed .finput a.yzm img{display:block;} .show .smask .sarea .feed a.feda{display:inline-block;width:100px;height:36px;border:1px solid #002855;line-height:36px;font-size:16px;color:#002855;text-align:center;border-radius:100px;margin-right:15px;} .show .smask .sarea .feed a.feda:hover{background:#002855;color:#fff;} /*在线客服*/ /*品类探索*/ .home-pinlei{width:100%; background-color:rgba(0,0,0,0.6); position: absolute; bottom:0px;} .home-pinlei a{color:#FFF; font-size: 1.125em; line-height: 2em; display:inline-block; margin:1% 5%;} /*专题标题*/ .subject-title{font-size: 2em; font-weight: 600; color:#101010; text-align: center; margin-bottom: 5%;} /*品类探索李静*/ .image-box {position: relative;} .groups_a{padding: 0; margin: 0; line-height: 22px; position: absolute;top: 65%; text-align: center; width:100%; color: rgba(255,255,255,0.6); font-size: 0.875em;} .text-desc{position: absolute; left: 0; top: 0; height: 100%; opacity: 0; width: 100%;} .lj_index_img, .lj_index_img_01 {width:100%; background:#252525; height:100%; } @media screen and (min-width:1480px){ .lj_index_img .lj_its_img{width:1440px;} .lj_index_img_01 .lj_its_img{width:1440px;} } @media screen and (max-width:1479px){ .lj_its_img {width:90%; } } @media screen and (max-width:640px){ .groups_a{line-height: 15px;} } .lj_its_img{ margin: auto;} .lj_its_img img , .lj_index_img_01 img{width:100%; display: block;} .lj_index_img_01 .lj_its_img li{display: inline-block; float: left;} .lj_index_img .lj_its_img li{display: inline-block; vertical-align:bottom;} @media screen and (min-width:880px){ .lj_index_img_01 .lj_its_img li{width:14.28%; } } @media screen and (max-width:879px){ .lj_index_img_01 .lj_its_img li{width:20%; } } @media screen and (max-width:640px){ .lj_index_img_01 .lj_its_img li{width:25%; } } @media screen and (min-width:769px){ .lj_its_img li{width:14.28%; } } @media screen and (max-width:768px){ .lj_its_img li, .lj_index_img_01 li{width:25%; overflow: hidden;} /*.lj_its_img {padding-bottom: 2%;}*/ } .lj_its_img ul{text-align: center;} /* effect-1 css */ .lj-port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center;} .lj-port-1 .text-desc{opacity:1; top: -150%; transition: 0.5s; color: #fff; } .lj-port-1.effect-1:hover .text-desc{top: 0;} .lj-port-1.effect-2 .text-desc{top: auto; bottom: -100%;} .lj-port-1.effect-2:hover .text-desc{bottom: 0;} .lj-port-1.effect-3 .text-desc{top:0; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;} .lj-port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; } /* effect-1 css end */ /*热门产品*/ .rmBox ul{width:100%; margin-top:2%;} .rmBox li{width:23.73%; margin-right:1.5%; float: left; margin-bottom: 3%; text-align: center;} .rmBox li:hover{box-shadow: 5px 5px 15px rgba(0,0,0,0.2); transition: 0.5s;} .rmBox li:nth-child(5n){margin-right: 0;} @media screen and (max-width:864px){ .rmBox li{width:22.6%;} } @media screen and (max-width:768px){ .rmBox li{width:48.9%;} .rmBox li:nth-child(2n){margin-right: 0} } @media screen and (max-width:580px){ .rmBox li{width:48.8%;} } @media screen and (max-width:460px){ .rmBox li{width:47.8%;} } /*新增google浏览器图片模糊解决*/ @media screen and (min-width:1480px){ .rmimg img{width:302px} } @media screen and (max-width:767px){ } /*一级列表热门产品*/ /*详情样式*/ .o_detail_all {text-align: center;} .o_detail_title {font-size:2.25em; color: #101010; margin-top:3.125vw; font-weight: 600; margin-bottom:1.25vw; line-height: 1.2em;} .o_detail_small {font-size:1.5em; color: #333; margin-bottom:0.7vw;} .o_detail_text {font-size:1em;color: #737373; line-height: 1.5em;width:80%; margin-left: auto; margin-right: auto; margin-bottom: 0.7vw;} @media screen and (max-width:768px){ .o_detail_title {font-size: 1.875em;} } /*专题页字体样式*/ .subject_title{font-size: 2.5em;} .subject_subtitle{font-size: 1.25em;} .subject_des{font-size: 0.875em;} .subject_buy .subject_buy_button{position: relative; top:50%; margin-top:-1.5em; width:100%; text-align: center;} .subject_buy a{padding-left:5%; padding-right:5%; height: 2em; margin-left:2%; margin-right:2%;display: inline-block; line-height: 2em; color:#333; font-size: 1.25em; } .subject_buy a:hover{background-color:#2dccd2; color:#FFF; border:1px solid #2dccd2; } .subject_span{display: inline-block; padding-left:5%; padding-right:5%; height: 2em; margin-left:0%; margin-right:4%;display: inline-block; line-height: 2em; color:#939393; font-size: 1em; border:1px solid #939393; } @media screen and (max-width:1280px){ .subject_title{font-size: 2.5em;} } @media screen and (max-width:768px){ .subject_title{font-size: 2em;} .subject_subtitle{font-size: 1.5em; } .subject_des{display: none;} .subject_buy a{font-size: 1em;} .subject .subject_buy{position: absolute; bottom:-30%; width:100%;} .subject li:hover .subject_buy{background-color:rgba(255,255,255,0.5); overflow: hidden; position: absolute; bottom:0px; width:100%; height: 30%; transition: 0.5s;} } @media screen and (max-width:480px){ .subject_title{font-size: 1.5em;} .subject_subtitle{font-size: 1.125em; } .subject_buy .subject_buy{position: relative; margin-bottom: 3vw;} .subject li:hover .subject_buy{position: relative;} } .subject_02_bg{width:100%; padding-top:5%; padding-bottom: 5%; overflow: hidden; background-color:#f2f2f2; } .subject_02{width:100%; color:#333;} .subject_02 .left{width:29%; float: left;} .subject_02 .right{width:69%; float: right; position: relative} .subject_02 .right img{opacity: 0;} @media screen and (max-width:769px){ .subject_02 .left{width:100%; text-align: center; margin-bottom: 3%;} .subject_02 .right{width:100%; float: left; } } .subject_02 video{position: absolute; top:0; left:0; width:100%; } .subject_02 .subject_title{line-height: 1.1em;} .subject_02 .subject_subtitle{line-height: 1.5em; margin-top:1.4vw;} .subject_02 .subject_text{margin-top:2vw; line-height: 1.75em; } .subject_span_margin{margin-bottom: 1vw; display: inline-block;} .subject_travel_text{background: #f2f2f2;text-align: center;color: #333; padding: 5% 0;} @media screen and (max-width:1365px){ .subject_02 .subject_text{display: none;} .Fan_04 .subject_des{display: none;} .Fan_03 .subject_des{display: none;} } /*手机端图片*/ @media screen and (min-width:769px){ .homebans_p{display: block;} .homebans_m{display: none} } @media screen and (max-width:768px){ .homebans_p{display: none;} .homebans_m{display: block;} } /*新版首页样式*/ .comit p{ display: inline-block; position: relative;} .comit span:before{position: absolute;height: 1px; background-color:#101010; width:2.6vw; content: "";left:102%; top:50%;} .comit span:after{position: absolute;height: 1px; background-color:#101010; width:2.6vw; content: ""; right:102%; top:50%;} .comit span{display: inline-block; background-color:#FFF; padding:0px 10px; position: relative;} @media screen and (max-width:768px){ .comit span:before, .comit span:after{width:0px;} } .home_new{width:100%; background-color:#FFF; padding-top:1vw; padding-bottom: 1vw; overflow: hidden;} .home_new .hot{width:100%;} .home_new .hot li{width:49.3%; margin-right:1.4%; float: left; position: relative;} .home_new .hot li:last-child{margin-right:0;} .home_new .hot .text{position: absolute; width:100%; text-align: center; top:50%; line-height: 40px; height: 30px; margin-top:-15px; color: #101010; font-size: 2.25em; font-weight: 600;} /*.home_new .hot .workshop .workshop_all{display: none;} .home_new .hot .workshop:hover .hot_all{display: none;} .home_new .hot .workshop:hover .workshop_all{display: block;}*/ .home_new .hot .workshop_all a{display: block; width:100%; margin-bottom: 0.74vw; overflow: hidden; position: relative; color:#101010;} .home_new .hot .workshop_all a:last-child{margin-bottom:0;} .home_new .hot .workshop_all a .content{position: absolute; width:100%; height: 100%; top:0; z-index: 2;} .home_new .hot .workshop_all a .content_text{margin-top:1.8vw; width:80%; margin-left:auto; margin-right: auto; overflow: hidden;} .home_new .hot .workshop_all a .left{width:80%; float: left} .home_new .hot .workshop_all a .right{width:20%; float: left; font-size: 4.375em; text-align: center; padding-top:2.2vw;} .home_new .hot .workshop_all a .title{font-size: 1.5em; text-align: left; line-height: 1.75em; margin-top:0.5vw;} .home_new .hot .workshop_all a .subtitle{font-size: 1.125em; text-align: left; margin-top:0.5vw;} .home_new .hot .workshop_all a:hover .content{position: absolute; width:100%; height: 100%; top:0; background-color:rgba(0,0,0,0.1); z-index: 2; color:#101010;} /*首页文化与价值观*/ .home_new .value_new{width:100%;} .home_new .value_new li{width:32.3%; margin-right: 1.55%; float: left; position: relative;} .home_new .value_new li:last-child{margin-right: 0;} .home_new .value_new li .text{position: absolute; width:100%; text-align: center; top:0; height: 100%; color:#101010;} .home_new .value_new li .text .title{font-size: 2.25em; font-weight: 600; margin-top:26%;} .home_new .value_new li .text .subtitle{font-size: 1.5em; margin-top:2vw;} .home_new .news{margin-top:2.8vw;} .hz{margin-top:2vw;} .lttext p{margin-bottom: 1vw;} .home_new .value_new li:hover{box-shadow:5px 5px 5px rgba(217,217,217);} @media screen and (max-width:1440px){ .home_new .hot .text{font-size: 2em;} .home_new .hot .workshop_all a .subtitle{font-size: 1em; margin-top:0vw; line-height: 20px} .home_new .hot .workshop_all a .right{font-size: 3em;} .home_new .hot .workshop_all a .content_text{width:84%;} .home_new .value_new li .text .title{font-size: 1.875em} .home_new .value_new li .text .subtitle{font-size: 1.25em; margin-top:1.5vw;} } @media screen and (max-width:1080px){ .home_new .hot .text{font-size: 1.5em;} .home_new .hot .workshop_all a .title{font-size: 1.125em; line-height: 1.5em} .home_new .hot .workshop_all a .subtitle{font-size: 0.875em; margin-top:0.8vw; line-height: 18px;} .home_new .hot .workshop_all a .right{font-size: 2em; width:12%} .home_new .hot .workshop_all a .content_text{width:90%;} .home_new .hot .workshop_all a .left{width:88%;} .home_new .value_new li .text .title{font-size: 1.5em} .home_new .value_new li .text .subtitle{font-size: 1em; margin-top:1vw;} } @media screen and (max-width:768px){ .home_new .hot li{width:100%; margin-bottom: 2vw;} .home_new .hot .workshop_all a .content_text{margin-top:5vw;} .home_new .value_new li{width:100%; margin-bottom: 1vw; text-align: center;} } @media screen and (max-width:480px){ .home_new .hot .workshop_all a .content_text{margin-top:4vw;} } @media screen and (max-width:320px){ .home_new .hot .workshop_all a .subtitle{line-height: 16px; margin-top:0vw;} .home_new .hot .workshop_all a .content_text{margin-top:3vw;} }