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, 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; } } .margin-top-60 { margin-top: 60px; }