@charset "utf-8"; /* ------- 样式书写顺序 ------- 1、定位属性：position display float left top right bottom overflow clear z-index 2、自身属性：width height padding border margin background 3、文字样式：font-family font-size font-style font-weight font-varient color 4、文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow 5、css3中新增属性：content box-shadow border-radius transform…… */ :root { --diy-base: #333333; --diy-zhuti: #104290; --diy-fuzhu: #f5830a; --diy-dianjing: #6f42c1; --diy-font: 'Microsoft YaHei',Arial,Helvetica,sans-serif,SimSun; --diy-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); } *{margin: 0px;padding: 0px;word-break:break-all;-webkit-text-size-adjust:none;} body{ background:#ffffff; font-size:0.875rem; line-height:1.5;font-family: var(--diy-font); color: var(--diy-base);} ul,ol,li,dl{list-style-type:none;} p,h1,h2,h3,h4,h5,h6,img,video{list-style:none;} h1,h2,h3,h4,h5,h6{} em,i,dfn,cite,strong,small{/*font-style:normal;*/} fieldset,button,input,select,option,textarea{vertical-align:middle;outline: none;} textarea{resize:none} table{border-collapse:collapse;border-spacing:0;} img{border:0px;vertical-align: middle;} article,aside,dialog,footer,header,section,nav,figure,menu{display:block} /*jAlert*/ #popup_title{display: none;} #popup_message{text-align: center;} #popup_message .er{width: 450px; margin: 0px 10px 10px 0;padding: 10px;border: 1px solid #dedede;text-align: center; } #popup_message{font-size: 13px;line-height: 21px;} /* A basic */ a{color: var(--diy-base);cursor:pointer;text-decoration:none;} a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:none; color: var(--diy-zhuti);cursor:pointer;} a:active {text-decoration:none;} a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none;} /*位置*/ .fl{ float:left; } .fr{ float:right;} .fc{clear: both;} .re{ position: relative;} .ab{ position: absolute;} .hide{ display: none;} .show{ display: block;} .dib{ display: inline-block;} .tc{ text-align: center;} .w{width: 100%; height: 100%;} .w1{width: 100%;} .iw{ width: 100%; height: auto;} .wh{width: 100%;min-height: 100%;} /* clearfix */ .clearfix{ *zoom:1;} .clearfix:after{ display:block; line-height:0; content:""; clear:both;} /*宽高*/ .lh1{ line-height: 1;} .lh12{ line-height: 1.2;} .lh15{ line-height: 1.5;} .lh18{ line-height: 1.8;} .lh2{ line-height: 2;} .w1200{ width: 100%; max-width: 1200px; margin: auto;} /*外边距*/ .ml5{ margin-left:5px;} .mr5{ margin-right:5px;} .mt5{ margin-top:5px;} .mb5{ margin-bottom:5px;} .m5{ margin: 5px;} .ml10{ margin-left:10px;} .mr10{ margin-right:10px;} .mt10{ margin-top:10px;} .mb10{ margin-bottom:10px;} .m10{ margin: 10px;} .ml15{ margin-left:15px;} .mr15{ margin-right:15px;} .mt15{ margin-top:15px;} .mb15{ margin-bottom:15px;} .m15{ margin: 15px;} .ml20{ margin-left:20px;} .mr20{ margin-right:20px;} .mt20{ margin-top:20px;} .mb20{ margin-bottom:20px;} .m20{ margin: 20px;} .ml25{ margin-left:25px;} .mr25{ margin-right:25px;} .mt25{ margin-top:25px;} .mb25{ margin-bottom:25px;} .m25{ margin: 25px;} .ml30{ margin-left:30px;} .mr30{ margin-right:30px;} .mt30{ margin-top:30px;} .mb30{ margin-bottom:30px;} .m30{ margin: 30px;} .ml35{ margin-left:35px;} .mr35{ margin-right:35px;} .mt35{ margin-top:35px;} .mb35{ margin-bottom:35px;} .m35{ margin: 35px;} .ml40{ margin-left:40px;} .mr40{ margin-right:40px;} .mt40{ margin-top:40px;} .mb40{ margin-bottom:40px;} .m40{ margin: 40px;} .ml45{ margin-left:45px;} .mr45{ margin-right:45px;} .mt45{ margin-top:45px;} .mb45{ margin-bottom:45px;} .m45{ margin: 45px;} .ml50{ margin-left:50px;} .mr50{ margin-right:50px;} .mt50{ margin-top:50px;} .mb50{ margin-bottom:50px;} .m50{ margin: 50px;} .ml60{ margin-left:60px;} .mr60{ margin-right:60px;} .mt60{ margin-top:60px;} .mb60{ margin-bottom:60px;} .m60{ margin: 60px;} .ml80{ margin-left:80px;} .mr80{ margin-right:80px;} .mt80{ margin-top:80px;} .mb80{ margin-bottom:80px;} .m80{ margin: 80px;} .ml100{ margin-left:100px;} .mr100{ margin-right:100px;} .mt100{ margin-top:100px;} .mb100{ margin-bottom:100px;} .m100{ margin: 100px;} .ml120{ margin-left:120px;} .mr120{ margin-right:120px;} .mt120{ margin-top:120px;} .mb120{ margin-bottom:120px;} .m120{ margin: 120px;} .mlr5{ margin-left:5px; margin-right:5px;} .mtb5{ margin-top:5px; margin-bottom:5px;} .mlr10{ margin-left:10px; margin-right:10px;} .mtb10{ margin-top:10px; margin-bottom:10px;} .mlr15{ margin-left:15px; margin-right:15px;} .mtb15{ margin-top:15px; margin-bottom:15px;} .mlr20{ margin-left:20px; margin-right:20px;} .mtb20{ margin-top:20px; margin-bottom:20px;} .mlr25{ margin-left:25px; margin-right:25px;} .mtb25{ margin-top:25px; margin-bottom:25px;} .mlr30{ margin-left:30px; margin-right:30px;} .mtb30{ margin-top:30px; margin-bottom:30px;} .mlr35{ margin-left:35px; margin-right:35px;} .mtb35{ margin-top:35px; margin-bottom:35px;} .mlr40{ margin-left:40px; margin-right:40px;} .mtb40{ margin-top:40px; margin-bottom:40px;} .mlr45{ margin-left:45px; margin-right:45px;} .mtb45{ margin-top:45px; margin-bottom:45px;} .mlr50{ margin-left:50px; margin-right:50px;} .mtb50{ margin-top:50px; margin-bottom:50px;} .mlr60{ margin-left:60px; margin-right:60px;} .mtb60{ margin-top:60px; margin-bottom:60px;} .mlr80{ margin-left:80px; margin-right:80px;} .mtb80{ margin-top:80px; margin-bottom:80px;} .mlr100{ margin-left:100px; margin-right:100px;} .mtb100{ margin-top:100px; margin-bottom:100px;} .mlr120{ margin-left:120px; margin-right:120px;} .mtb120{ margin-top:120px; margin-bottom:120px;} /*内边距*/ .pl5{ padding-left:5px;} .pr5{ padding-right:5px;} .pt5{ padding-top:5px;} .pb5{ padding-bottom:5px;} .p5{ padding: 5px;} .pl10{ padding-left:10px;} .pr10{ padding-right:10px;} .pt10{ padding-top:10px;} .pb10{ padding-bottom:10px;} .p10{ padding: 10px;} .pl15{ padding-left:15px;} .pr15{ padding-right:15px;} .pt15{ padding-top:15px;} .pb15{ padding-bottom:15px;} .p15{ padding: 15px;} .pl20{ padding-left:20px;} .pr20{ padding-right:20px;} .pt20{ padding-top:20px;} .pb20{ padding-bottom:20px;} .p20{ padding: 20px;} .pl25{ padding-left:25px;} .pr25{ padding-right:25px;} .pt25{ padding-top:25px;} .pb25{ padding-bottom:25px;} .p25{ padding: 25px;} .pl30{ padding-left:30px;} .pr30{ padding-right:30px;} .pt30{ padding-top:30px;} .pb30{ padding-bottom:30px;} .p30{ padding: 30px;} .pl35{ padding-left:35px;} .pr35{ padding-right:35px;} .pt35{ padding-top:35px;} .pb35{ padding-bottom:35px;} .p35{ padding: 35px;} .pl40{ padding-left:40px;} .pr40{ padding-right:40px;} .pt40{ padding-top:40px;} .pb40{ padding-bottom:40px;} .p40{ padding: 40px;} .pl45{ padding-left:45px;} .pr45{ padding-right:45px;} .pt45{ padding-top:45px;} .pb45{ padding-bottom:45px;} .p45{ padding: 45px;} .pl50{ padding-left:50px;} .pr50{ padding-right:50px;} .pt50{ padding-top:50px;} .pb50{ padding-bottom:50px;} .p50{ padding: 50px;} .pl60{ padding-left:60px;} .pr60{ padding-right:60px;} .pt60{ padding-top:60px;} .pb60{ padding-bottom:60px;} .p60{ padding: 60px;} .pl80{ padding-left:80px;} .pr80{ padding-right:80px;} .pt80{ padding-top:80px;} .pb80{ padding-bottom:80px;} .p80{ padding: 80px;} .pl100{ padding-left:100px;} .pr100{ padding-right:100px;} .pt100{ padding-top:100px;} .pb100{ padding-bottom:100px;} .p100{ padding: 100px;} .pl120{ padding-left:120px;} .pr120{ padding-right:120px;} .pt120{ padding-top:120px;} .pb120{ padding-bottom:120px;} .p120{ padding: 120px;} .plr5{ padding-left:5px; padding-right:5px;} .ptb5{ padding-top:5px; padding-bottom:5px;} .plr10{ padding-left:10px; padding-right:10px;} .ptb10{ padding-top:10px; padding-bottom:10px;} .plr15{ padding-left:15px; padding-right:15px;} .ptb15{ padding-top:15px; padding-bottom:15px;} .plr20{ padding-left:20px; padding-right:20px;} .ptb20{ padding-top:20px; padding-bottom:20px;} .plr25{ padding-left:25px; padding-right:25px;} .ptb25{ padding-top:25px; padding-bottom:25px;} .plr30{ padding-left:30px; padding-right:30px;} .ptb30{ padding-top:30px; padding-bottom:30px;} .plr35{ padding-left:35px; padding-right:35px;} .ptb35{ padding-top:35px; padding-bottom:35px;} .plr40{ padding-left:40px; padding-right:40px;} .ptb40{ padding-top:40px; padding-bottom:40px;} .plr45{ padding-left:45px; padding-right:45px;} .ptb45{ padding-top:45px; padding-bottom:45px;} .plr50{ padding-left:50px; padding-right:50px;} .ptb50{ padding-top:50px; padding-bottom:50px;} .plr60{ padding-left:60px; padding-right:60px;} .ptb60{ padding-top:60px; padding-bottom:60px;} .plr80{ padding-left:80px; padding-right:80px;} .ptb80{ padding-top:80px; padding-bottom:80px;} .plr100{ padding-left:100px; padding-right:100px;} .ptb100{ padding-top:100px; padding-bottom:100px;} .plr120{ padding-left:120px; padding-right:120px;} .ptb120{ padding-top:120px; padding-bottom:120px;} /*圆角、边线*/ .border1{} /*字体大小*/ .fz10{font-size: 10px;} .fz12{font-size: 12px;} .fz14{font-size: 14px;} .fz16{font-size: 16px;} .fz18{font-size: 18px;} .fz20{font-size: 20px;} .fz22{font-size: 22px;} .fz24{font-size: 24px;} .fz26{font-size: 26px;} .fz28{font-size: 28px;} .fz30{font-size: 30px;} .fz32{font-size: 32px;} .fz34{font-size: 34px;} .fz36{font-size: 36px;} .fz38{font-size: 38px;} .fz40{font-size: 40px;} .fz42{font-size: 42px;} .fz44{font-size: 44px;} .fz46{font-size: 46px;} .fz48{font-size: 48px;} .fz50{font-size: 50px;} .fz52{font-size: 52px;} .fz56{font-size: 56px;} .fz58{font-size: 58px;} /*字体颜色*/ .c-0{ color: #000;} .c-3{ color: #333;} .c-6{ color: #666;} .c-9{ color: #999;} .c-f{ color: #fff;} .c-d{ color: #ddd;} .c-e{ color: #eee;} /*背景颜色*/ .bg-c0{ background-color: #000;} .bg-c3{ background-color: #333;} .bg-c6{ background-color: #666;} .bg-c9{ background-color: #999;} .bg-cf{ background-color: #fff;} .bg-cd{ background-color: #ddd;} .bg-ce{ background-color: #eee;} .highlight{color: var(--diy-zhuti); font-weight: bold; } /********图片********/ .img{position: relative; width: 100%; box-sizing: border-box; flex-shrink: 0;} .img img{ width: 100%; height: auto; object-fit: cover;margin: 0px auto;} /***图片比例***/ .img_s{position: relative; width: 100%; height: 100%; padding-top: 100%;} .sz1_1{padding-top: 100%;height: 0;}/*图片宽高1:1*/ .sz2_1{padding-top: 50%;height: 0;}/*图片宽高1:1*/ .sz3_2{padding-top: 65.55%;height: 0;}/*图片宽高3:2*/ .sz4_3{padding-top: 75%;height: 0;}/*图片宽高4:3*/ .sz25_14{padding-top: 56%;height: 0;}/*图片宽高5:2.8*/ .sz5_3{padding-top: 60%;height: 0;}/*图片宽高5:3*/ .sz5_4{padding-top: 80%;height: 0;}/*图片宽高5:4*/ .sz5_6{padding-top: 120%;height: 0;}/*图片宽高5:6*/ .sz5_7{padding-top: 140%;height: 0;}/*图片宽高5:7*/ .img_s img{position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: cover;} /*使用方法：
*/ /********滚动条特效********/ .gdbox{width:100%; height:auto;padding-right: 10px;overflow-y:auto;scrollbar-base-color:#f00; box-sizing: border-box;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ .gdbox::-webkit-scrollbar{ width: 20px;/*滚动条宽度*/ height: 12px;/*滚动条高度*/} .gdbox::-webkit-scrollbar-button{ background-color:#aaaaaa; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3); border-radius: 0px;color:#900;} /*定义滚动条轨道 内阴影+圆角*/ .gdbox::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3); border-radius: 0px;/*滚动条的背景区域的圆角*/ background-color: #efefef;/*滚动条的背景颜色*/ } /*定义滑块 内阴影+圆角*/ .gdbox::-webkit-scrollbar-thumb{ border-radius: 2px;/*滚动条的圆角*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #1a64ba;/*滚动条的背景颜色*/} /********返回顶部********/ #gotop{ z-index:20; bottom:30px;_margin-bottom:30px; width:29px;height:29px;position:fixed;right:15px;cursor:pointer;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); } /*swiper初始化*/ .swiper { width: 100%; height:auto;} .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center;} .h20 {height: 20px;}