Files
orico-official-website-old/public/frontend/webvn/css/style.css
2024-10-29 14:04:59 +08:00

478 lines
21 KiB
CSS
Executable File

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;}
}