@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:var(--dy-font-base); 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; cursor:default;} /*位置*/ .fl{ float:left; clear: both;} .fr{ float:right;} .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%;} .w_max{ width: auto; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; display: block;} /* 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;} /*响应式边距*/ :root { --dy-num-120: 44px; --dy-num-100: 36px; --dy-num-80: 29px; --dy-num-60: 22px; --dy-num-50: 18px; --dy-num-40: 15px; --dy-num-30: 11px; --dy-num-25: 9px; --dy-num-20: 8px; --dy-num-15: 6px; --dy-num-10: 4px; } @media (min-width: 768px) { :root { --dy-num-120: 72px; --dy-num-100: 60px; --dy-num-80: 48px; --dy-num-60: 36px; --dy-num-50: 30px; --dy-num-40: 24px; --dy-num-30: 18px; --dy-num-25: 15px; --dy-num-20: 12px; --dy-num-15: 9px; --dy-num-10: 6px; } } @media (min-width: 992px) { :root { --dy-num-120: 96px; --dy-num-100: 80px; --dy-num-80: 64px; --dy-num-60: 48px; --dy-num-50: 40px; --dy-num-40: 32px; --dy-num-30: 24px; --dy-num-25: 20px; --dy-num-20: 16px; --dy-num-15: 12px; --dy-num-10:8px; } } @media (min-width: 1200px) { :root { --dy-num-120: 120px; --dy-num-100: 100px; --dy-num-80: 80px; --dy-num-60: 60px; --dy-num-50: 50px; --dy-num-40: 40px; --dy-num-30: 30px; --dy-num-25: 25px; --dy-num-20: 20px; --dy-num-15: 15px; --dy-num-10: 10px; } } .r_mt120{ margin-top: var(--dy-num-120);} .r_mb120{ margin-bottom: var(--dy-num-120);} .r_ml120{ margin-left: var(--dy-num-120);} .r_mr120{ margin-right: var(--dy-num-120);} .r_pt120{ padding-top: var(--dy-num-120);} .r_pb120{ padding-bottom: var(--dy-num-120);} .r_pl120{ padding-left: var(--dy-num-120);} .r_pr120{ padding-right: var(--dy-num-120);} .r_mtb120{ margin-top: var(--dy-num-120); margin-bottom: var(--dy-num-120);} .r_mlr120{ margin-left: var(--dy-num-120); margin-right: var(--dy-num-120);} .r_ptb120{ padding-top: var(--dy-num-120); padding-bottom: var(--dy-num-120);} .r_plr120{ padding-left: var(--dy-num-120);padding-right: var(--dy-num-120);} .r_m120{ margin-top: var(--dy-num-120); margin-bottom: var(--dy-num-120); margin-left: var(--dy-num-120); margin-right: var(--dy-num-120);} .r_p120{ padding-top: var(--dy-num-120); padding-bottom: var(--dy-num-120); padding-left: var(--dy-num-120); padding-right: var(--dy-num-120);} .r_mt100{ margin-top: var(--dy-num-100);} .r_mb100{ margin-bottom: var(--dy-num-100);} .r_ml100{ margin-left: var(--dy-num-100);} .r_mr100{ margin-right: var(--dy-num-100);} .r_pt100{ padding-top: var(--dy-num-100);} .r_pb100{ padding-bottom: var(--dy-num-100);} .r_pl100{ padding-left: var(--dy-num-100);} .r_pr100{ padding-right: var(--dy-num-100);} .r_mtb100{ margin-top: var(--dy-num-100); margin-bottom: var(--dy-num-100);} .r_mlr100{ margin-left: var(--dy-num-100); margin-right: var(--dy-num-100);} .r_ptb100{ padding-top: var(--dy-num-100); padding-bottom: var(--dy-num-100);} .r_plr100{ padding-left: var(--dy-num-100);padding-right: var(--dy-num-100);} .r_m100{ margin-top: var(--dy-num-100); margin-bottom: var(--dy-num-100); margin-left: var(--dy-num-100); margin-right: var(--dy-num-100);} .r_p100{ padding-top: var(--dy-num-100); padding-bottom: var(--dy-num-100); padding-left: var(--dy-num-100); padding-right: var(--dy-num-100);} .r_mt80{ margin-top: var(--dy-num-80);} .r_mb80{ margin-bottom: var(--dy-num-80);} .r_ml80{ margin-left: var(--dy-num-80);} .r_mr80{ margin-right: var(--dy-num-80);} .r_pt80{ padding-top: var(--dy-num-80);} .r_pb80{ padding-bottom: var(--dy-num-80);} .r_pl80{ padding-left: var(--dy-num-80);} .r_pr80{ padding-right: var(--dy-num-80);} .r_mtb80{ margin-top: var(--dy-num-80); margin-bottom: var(--dy-num-80);} .r_mlr80{ margin-left: var(--dy-num-80); margin-right: var(--dy-num-80);} .r_ptb80{ padding-top: var(--dy-num-80); padding-bottom: var(--dy-num-80);} .r_plr80{ padding-left: var(--dy-num-80);padding-right: var(--dy-num-80);} .r_m80{ margin-top: var(--dy-num-80); margin-bottom: var(--dy-num-80); margin-left: var(--dy-num-80); margin-right: var(--dy-num-80);} .r_p80{ padding-top: var(--dy-num-80); padding-bottom: var(--dy-num-80); padding-left: var(--dy-num-80); padding-right: var(--dy-num-80);} .r_mt60{ margin-top: var(--dy-num-60);} .r_mb60{ margin-bottom: var(--dy-num-60);} .r_ml60{ margin-left: var(--dy-num-60);} .r_mr60{ margin-right: var(--dy-num-60);} .r_pt60{ padding-top: var(--dy-num-60);} .r_pb60{ padding-bottom: var(--dy-num-60);} .r_pl60{ padding-left: var(--dy-num-60);} .r_pr60{ padding-right: var(--dy-num-60);} .r_mtb60{ margin-top: var(--dy-num-60); margin-bottom: var(--dy-num-60);} .r_mlr60{ margin-left: var(--dy-num-60); margin-right: var(--dy-num-60);} .r_ptb60{ padding-top: var(--dy-num-60); padding-bottom: var(--dy-num-60);} .r_plr60{ padding-left: var(--dy-num-60);padding-right: var(--dy-num-60);} .r_m60{ margin-top: var(--dy-num-60); margin-bottom: var(--dy-num-60); margin-left: var(--dy-num-60); margin-right: var(--dy-num-60);} .r_p60{ padding-top: var(--dy-num-60); padding-bottom: var(--dy-num-60); padding-left: var(--dy-num-60); padding-right: var(--dy-num-60);} .r_mt50{ margin-top: var(--dy-num-50);} .r_mb50{ margin-bottom: var(--dy-num-50);} .r_ml50{ margin-left: var(--dy-num-50);} .r_mr50{ margin-right: var(--dy-num-50);} .r_pt50{ padding-top: var(--dy-num-50);} .r_pb50{ padding-bottom: var(--dy-num-50);} .r_pl50{ padding-left: var(--dy-num-50);} .r_pr50{ padding-right: var(--dy-num-50);} .r_mtb50{ margin-top: var(--dy-num-50); margin-bottom: var(--dy-num-50);} .r_mlr50{ margin-left: var(--dy-num-50); margin-right: var(--dy-num-50);} .r_ptb50{ padding-top: var(--dy-num-50); padding-bottom: var(--dy-num-50);} .r_plr50{ padding-left: var(--dy-num-50);padding-right: var(--dy-num-50);} .r_m50{ margin-top: var(--dy-num-50); margin-bottom: var(--dy-num-50); margin-left: var(--dy-num-50); margin-right: var(--dy-num-50);} .r_p50{ padding-top: var(--dy-num-50); padding-bottom: var(--dy-num-50); padding-left: var(--dy-num-50); padding-right: var(--dy-num-50);} .r_mt40{ margin-top: var(--dy-num-40);} .r_mb40{ margin-bottom: var(--dy-num-40);} .r_ml40{ margin-left: var(--dy-num-40);} .r_mr40{ margin-right: var(--dy-num-40);} .r_pt40{ padding-top: var(--dy-num-40);} .r_pb40{ padding-bottom: var(--dy-num-40);} .r_pl40{ padding-left: var(--dy-num-40);} .r_pr40{ padding-right: var(--dy-num-40);} .r_mtb40{ margin-top: var(--dy-num-40); margin-bottom: var(--dy-num-40);} .r_mlr40{ margin-left: var(--dy-num-40); margin-right: var(--dy-num-40);} .r_ptb40{ padding-top: var(--dy-num-40); padding-bottom: var(--dy-num-40);} .r_plr40{ padding-left: var(--dy-num-40);padding-right: var(--dy-num-40);} .r_m40{ margin-top: var(--dy-num-40); margin-bottom: var(--dy-num-40); margin-left: var(--dy-num-40); margin-right: var(--dy-num-40);} .r_p40{ padding-top: var(--dy-num-40); padding-bottom: var(--dy-num-40); padding-left: var(--dy-num-40); padding-right: var(--dy-num-40);} .r_mt30{ margin-top: var(--dy-num-30);} .r_mb30{ margin-bottom: var(--dy-num-30);} .r_ml30{ margin-left: var(--dy-num-30);} .r_mr30{ margin-right: var(--dy-num-30);} .r_pt30{ padding-top: var(--dy-num-30);} .r_pb30{ padding-bottom: var(--dy-num-30);} .r_pl30{ padding-left: var(--dy-num-30);} .r_pr30{ padding-right: var(--dy-num-30);} .r_mtb30{ margin-top: var(--dy-num-30); margin-bottom: var(--dy-num-30);} .r_mlr30{ margin-left: var(--dy-num-30); margin-right: var(--dy-num-30);} .r_ptb30{ padding-top: var(--dy-num-30); padding-bottom: var(--dy-num-30);} .r_plr30{ padding-left: var(--dy-num-30);padding-right: var(--dy-num-30);} .r_m30{ margin-top: var(--dy-num-30); margin-bottom: var(--dy-num-30); margin-left: var(--dy-num-30); margin-right: var(--dy-num-30);} .r_p30{ padding-top: var(--dy-num-30); padding-bottom: var(--dy-num-30); padding-left: var(--dy-num-30); padding-right: var(--dy-num-30);} .r_mt25{ margin-top: var(--dy-num-25);} .r_mb25{ margin-bottom: var(--dy-num-25);} .r_ml25{ margin-left: var(--dy-num-25);} .r_mr25{ margin-right: var(--dy-num-25);} .r_pt25{ padding-top: var(--dy-num-25);} .r_pb25{ padding-bottom: var(--dy-num-25);} .r_pl25{ padding-left: var(--dy-num-25);} .r_pr25{ padding-right: var(--dy-num-25);} .r_mtb25{ margin-top: var(--dy-num-25); margin-bottom: var(--dy-num-25);} .r_mlr25{ margin-left: var(--dy-num-25); margin-right: var(--dy-num-25);} .r_ptb25{ padding-top: var(--dy-num-25); padding-bottom: var(--dy-num-25);} .r_plr25{ padding-left: var(--dy-num-25);padding-right: var(--dy-num-25);} .r_m25{ margin-top: var(--dy-num-25); margin-bottom: var(--dy-num-25); margin-left: var(--dy-num-25); margin-right: var(--dy-num-25);} .r_p25{ padding-top: var(--dy-num-25); padding-bottom: var(--dy-num-25); padding-left: var(--dy-num-25); padding-right: var(--dy-num-25);} .r_mt20{ margin-top: var(--dy-num-20);} .r_mb20{ margin-bottom: var(--dy-num-20);} .r_ml20{ margin-left: var(--dy-num-20);} .r_mr20{ margin-right: var(--dy-num-20);} .r_pt20{ padding-top: var(--dy-num-20);} .r_pb20{ padding-bottom: var(--dy-num-20);} .r_pl20{ padding-left: var(--dy-num-20);} .r_pr20{ padding-right: var(--dy-num-20);} .r_mtb20{ margin-top: var(--dy-num-20); margin-bottom: var(--dy-num-20);} .r_mlr20{ margin-left: var(--dy-num-20); margin-right: var(--dy-num-20);} .r_ptb20{ padding-top: var(--dy-num-20); padding-bottom: var(--dy-num-20);} .r_plr20{ padding-left: var(--dy-num-20);padding-right: var(--dy-num-20);} .r_m20{ margin-top: var(--dy-num-20); margin-bottom: var(--dy-num-20); margin-left: var(--dy-num-20); margin-right: var(--dy-num-20);} .r_p20{ padding-top: var(--dy-num-20); padding-bottom: var(--dy-num-20); padding-left: var(--dy-num-20); padding-right: var(--dy-num-20);} .r_mt15{ margin-top: var(--dy-num-15);} .r_mb15{ margin-bottom: var(--dy-num-15);} .r_ml15{ margin-left: var(--dy-num-15);} .r_mr15{ margin-right: var(--dy-num-15);} .r_pt15{ padding-top: var(--dy-num-15);} .r_pb15{ padding-bottom: var(--dy-num-15);} .r_pl15{ padding-left: var(--dy-num-15);} .r_pr15{ padding-right: var(--dy-num-15);} .r_mtb15{ margin-top: var(--dy-num-15); margin-bottom: var(--dy-num-15);} .r_mlr15{ margin-left: var(--dy-num-15); margin-right: var(--dy-num-15);} .r_ptb15{ padding-top: var(--dy-num-15); padding-bottom: var(--dy-num-15);} .r_plr15{ padding-left: var(--dy-num-15);padding-right: var(--dy-num-15);} .r_m15{ margin-top: var(--dy-num-15); margin-bottom: var(--dy-num-15); margin-left: var(--dy-num-15); margin-right: var(--dy-num-15);} .r_p15{ padding-top: var(--dy-num-15); padding-bottom: var(--dy-num-15); padding-left: var(--dy-num-15); padding-right: var(--dy-num-15);} .r_mt10{ margin-top: var(--dy-num-10);} .r_mb10{ margin-bottom: var(--dy-num-10);} .r_ml10{ margin-left: var(--dy-num-10);} .r_mr10{ margin-right: var(--dy-num-10);} .r_pt10{ padding-top: var(--dy-num-10);} .r_pb10{ padding-bottom: var(--dy-num-10);} .r_pl10{ padding-left: var(--dy-num-10);} .r_pr10{ padding-right: var(--dy-num-10);} .r_mtb10{ margin-top: var(--dy-num-10); margin-bottom: var(--dy-num-10);} .r_mlr10{ margin-left: var(--dy-num-10); margin-right: var(--dy-num-10);} .r_ptb10{ padding-top: var(--dy-num-10); padding-bottom: var(--dy-num-10);} .r_plr10{ padding-left: var(--dy-num-10);padding-right: var(--dy-num-10);} .r_m10{ margin-top: var(--dy-num-10); margin-bottom: var(--dy-num-10); margin-left: var(--dy-num-10); margin-right: var(--dy-num-10);} .r_p10{ padding-top: var(--dy-num-10); padding-bottom: var(--dy-num-10); padding-left: var(--dy-num-10); padding-right: var(--dy-num-10);} /*响应式字体*/ :root { --dy-font-42:28px;--dy-font-base:12px; } @media (min-width: 576px) { :root { --dy-font-42:30px;--dy-font-base:13px; } } @media (min-width: 768px) { :root { --dy-font-42:34px;--dy-font-base:14px; } } @media (min-width: 992px) { :root { --dy-font-42:38px;--dy-font-base:15px; } } @media (min-width: 1200px) { :root { --dy-font-42:42px;--dy-font-base:16px; } } /*圆角、边线*/ .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;} /********图片********/ .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;} /*使用方法：
*/ /*animate*/ .htmleaf{ margin: 0 auto; overflow: hidden;} /********滚动条特效********/ .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: var(--diy-zhuti);/*滚动条的背景颜色*/} /********返回顶部********/ #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;}