@charset "utf-8"; /*基本样式*/ html { font-size: 62.5%; /* 10÷16=62.5% */ } body { font-size: 14px; font-size: 1.4rem; /* 14÷10=1.4 */ color: #333; font-family: 'Microsoft YaHei', SimSun, SimHei, "STHeiti Light", STHeiti, "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; } html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, ul, dd, dl, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0px; padding: 0px; -webkit-font-smoothing: antialiased; } table { border-collapse: collapse; border-spacing: 0; padding: 0 } fieldset, img { border: 0; } img, object { max-width: 100%; width: auto\9; /* for ie8 */ -ms-interpolation-mode: bicubic; } a { outline: none; blr: expression(this.onFocus=this.blur()); text-decoration: none; color: #333 } a:hover { text-decoration: none; } input[type='button'] { outline: none; border: 0 none; background-color: transparent; cursor: pointer; } ul, ol, li { list-style: none outside none; } pre, code { white-space: pre-wrap } .gp-pa { position: absolute; } .gp-pr { position: relative; } .gp-clearFix { *zoom: 1; clear: both; } .gp-clearFix:after { content: ''; display: block; clear: both; } .gp-clear { width: 100%; overflow: hidden; } .gp-f16 { line-height: 35px; font-size: 16px; font-size: 1.6rem; } /*响应式图片*/ .gp-img-responsive { width: 100%; height: 0; padding-bottom: 66.67%; overflow: hidden; display: block; background-color: #d2d2d2 } .gp-img-responsive img { width: 100%; transition: all 0.5s ease-in-out; } .gp-img-responsive img:hover { transform: scale(1.03); opacity: 0.85; } .gp-radius { border-radius: 3px; display: block; overflow: hidden; } .gp-round { border-radius: 500px; display: block; overflow: hidden; } .gp-circle { border-radius: 50%; display: block; overflow: hidden; } /*边框*/ .gp-img-thumbnail { display: inline-block; max-width: 100%; height: auto; padding: 2px; line-height: 1.6; background-color: #fff; border: 1px solid #ddd; border-radius: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .gp-ib { display: inline-block; *display: inline; *zoom: 1; } /*半透明背景*/ .gp-overlay { width: 100%; height: 100%; position: fixed; top: 0; z-index: 800; background: #000; opacity: 0.8; filter: alpha(opacity=80); display: none; left: 0 } /*文章页控制ul li序号*/ .gp-article ol, .gp-article ol li, .gp-order-list li, .gp-order-list { list-style: decimal inside none; } .gp-article ul, .gp-article ul li, .gp-unorder-list li, .gp-unorder-list { list-style: disc inside none; } .gp-unorder-list.circle { list-style-type: circle } .gp-unorder-list.square, .gp-unorder-list.square li { list-style-type: square } .gp-unorder-list.upper-roman, .gp-unorder-list.upper-roman li { list-style-type: upper-roman } .gp-unorder-list.lower-alpha, .gp-unorder-list.lower-alpha li { list-style-type: lower-alpha } /*字号*/ .gp-f12 { font-size: 12px; font-size: 1.2rem; } .gp-f14 { font-size: 14px; font-size: 1.4rem; } .gp-f16 { font-size: 16px; font-size: 1.6rem; } .gp-f18 { font-size: 18px; font-size: 1.8rem; } .gp-f20 { font-size: 20px; font-size: 2rem; } .gp-f22 { font-size: 22px; font-size: 2.2rem; } .gp-f24 { font-size: 24px; font-size: 2.4rem; } .gp-f26 { font-size: 26px; font-size: 2.6rem; } .gp-f28 { font-size: 28px; font-size: 2.8rem; } .gp-f30 { font-size: 30px; font-size: 3rem; } .gp-f32 { font-size: 32px; font-size: 3.2rem; } .gp-f34 { font-size: 34px; font-size: 3.4rem; } .gp-f36 { font-size: 36px; font-size: 3.66rem; } .gp-f38 { font-size: 38px; font-size: 3.8rem; } .gp-f40 { font-size: 40px; font-size: 4rem; } .gp-ul-inline { font-size: 0; } .gp-ul-inline>li { display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; } .gp-fl { float: left; } .gp-fr { float: right; } .gp-center { display: block; margin-left: auto; margin-right: auto; } .gp-vam, .gp-vama * { vertical-align: middle; } /* 字体色 */ .black * { color: #333 } .white * { color: #fff } /*一行截短*/ .gp-ellipsis, .gp-text-truncate { word-wrap: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } /*透明度*/ .gp-opt-50 { opacity: 0.5; filter: alpha(opacity=50); } /*-平均分配*/ [class*="gp-avg"]>li { float: left; } /* 版心和间距的问题 */ .gp-container { width: 1400px; margin-left: auto; margin-right: auto; } .gp-row { margin-left: -15px; margin-right: -15px; } .gp-m15 { margin: 0 15px } .gp-p15 { padding-left: 15px; padding-right: 15px; } @media screen and (max-width:1480px) { .gp-container { width: 1200px; } } @media screen and (max-width:1240px) { /* .gp-container{width: 1000px;} */ .gp-container { width: 100%; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } } @media screen and (max-width:1080px) { /* .gp-container{width: auto;margin-left: 30px;margin-right: 30px;} */ .gp-container { padding-left: 30px; padding-right: 30px; } } @media screen and (max-width:767px) { /* .gp-container{margin-left: 15px;margin-right: 15px;} */ .gp-container { padding-left: 15px; padding-right: 15px; } .gp-row { margin-left: -8px; margin-right: -8px; } .gp-p15 { padding-left: 8px; padding-right: 8px; } .gp-m15 { margin-left: 8px; margin-right: 8px; } } /*水平导航*/ .gp-nav-horizontal {} .gp-nav-horizontal>li { display: inline-block; *display: inline; *zoom: 1; position: relative; } .gp-nav-justify { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; text-align: center; } .gp-nav-justify>li { float: none; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 } /*导航二级菜单*/ .gp-nav-horizontal .gp-subNav { position: absolute; left: 0; top: 50px; background: #fff; } .gp-subNav { width: 100%; overflow: hidden; display: none; } .gp-subNav dd a { padding: 8px 12px; display: block; line-height: 1.5; font-size: 14px; font-size: 1.4rem; text-align: center; } /* 面包屑 */ .gp-bread { height: auto; line-height: 20px; color: #999; padding: 15px 0; overflow: hidden; } .gp-bread span { color: #999; margin: 0 10px } .gp-bread a { color: #666; } .gp-bread a:hover { color: #000; } @media screen and (max-width:997px) { .gp-f16 { font-size: 1.5rem; } } @media screen and (max-width:767px) { .gp-article img { width: auto !important; height: auto !important; } .gp-article video { width: auto !important; } .gp-article table { width: 100% !important; } html { font-size: 54.705%; } body { font-size: 1.4rem; } } /* pad端固定宽度 */ @media screen and (max-width:999px) { .gp-flex { display: flex; display: -webkit-flex; } .gp-flex-fixed { width: 250px; } .gp-flex-flexible { flex: 1; width: auto; } } /*** 布局-网格样式**/ [class*="gp-xs"], [class*="gp-sm"], [class*="gp-md"], [class*="gp-lg"] { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 100%; } @media screen and (min-width:100px) { [class*="gp-avg"] li { width: 100%; display: block; } /*平均分配*/ .gp-avg-xxs-1>li { width: 100%; } .gp-avg-xxs-2>li { width: 50%; } .gp-avg-xxs-3>li { width: 33.3%; } .gp-avg-xxs-4>li { width: 25%; } .gp-avg-xxs-5>li { width: 20%; } .gp-avg-1>li { width: 100%; } .gp-avg-2>li { width: 50%; } .gp-avg-3>li { width: 33.3%; } .gp-avg-4>li { width: 25%; } .gp-avg-5>li { width: 20%; } } @media screen and (max-width:479px) { [class*="gp-xs"] { width: 100%; display: block; } /*平均分配*/ .gp-avg-xxs-1>li { width: 100%; } .gp-avg-xxs-2>li { width: 50%; } .gp-avg-xxs-3>li { width: 33.3%; } .gp-avg-xxs-4>li { width: 25%; } .gp-avg-xxs-5>li { width: 20%; } } @media screen and (min-width:479px) { /* [class*="gp-xs"],[class*="gp-sm"],[class*="gp-md"],[class*="gp-lg"] { display: inline-block;*display: inline;*zoom:1;margin-right: -2px;margin-left: -2px;vertical-align: top; } */ [class*="gp-xs"] { margin-right: -2px; margin-left: -2px; } .gp-xs-1 { width: 8.33333333%; } .gp-xs-2 { width: 16.66666667%; } .gp-xs-3 { width: 25%; } .gp-xs-4 { width: 33.33333333%; } .gp-xs-5 { width: 41.66666667%; } .gp-xs-6 { width: 50%; } .gp-xs-7 { width: 58.33333333%; } .gp-xs-8 { width: 66.66666667%; } .gp-xs-9 { width: 75%; } .gp-xs-10 { width: 83.33333333%; } .gp-xs-11 { width: 91.66666667%; } .gp-xs-12 { width: 100%; } .gp-xs-offset-0 { margin-left: 0; } .gp-xs-offset-1 { margin-left: 8.33333333%; } .gp-xs-offset-2 { margin-left: 16.66666667%; } .gp-xs-offset-3 { margin-left: 25%; } .gp-xs-offset-4 { margin-left: 33.33333333%; } .gp-xs-offset-5 { margin-left: 41.66666667%; } .gp-xs-offset-6 { margin-left: 50%; } .gp-xs-offset-7 { margin-left: 58.33333333%; } .gp-xs-offset-8 { argin-left: 66.66666667%; } .gp-xs-offset-9 { margin-left: 75%; } .gp-xs-offset-10 { margin-left: 83.33333333%; } .gp-xs-offset-11 { margin-left: 91.66666667%; } .gp-xs-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } [class*="gp-"].gp-xs-centered { margin-left: auto; margin-right: auto; display: block; } [class*="gp-"].gp-xs-centered:last-child { float: none; } [class*="gp-"].gp-xs-uncentered { margin-left: 0; margin-right: 0; float: left; } [class*="gp-"].gp-xs-uncentered:last-child { float: left; } /*平均分配*/ .gp-avg-xs-1>li { width: 100%; } .gp-avg-xs-2>li { width: 50%; } .gp-avg-xs-3>li { width: 33.3%; } .gp-avg-xs-4>li { width: 25%; } .gp-avg-xs-5>li { width: 20%; } } @media screen and (min-width:767px) { [class*="gp-sm"] { margin-right: -2px; margin-left: -2px; } .gp-sm-1 { width: 8.33333333%; } .gp-sm-2 { width: 16.66666667%; } .gp-sm-3 { width: 25%; } .gp-sm-4 { width: 33.33333333%; } .gp-sm-5 { width: 41.66666667%; } .gp-sm-6 { width: 50%; } .gp-sm-7 { width: 58.33333333%; } .gp-sm-8 { width: 66.66666667%; } .gp-sm-9 { width: 75%; } .gp-sm-10 { width: 83.33333333%; } .gp-sm-11 { width: 91.66666667%; } .gp-sm-12 { width: 100%; } .gp-sm-offset-0 { margin-left: 0; } .gp-sm-offset-1 { margin-left: 8.33333333%; } .gp-sm-offset-2 { margin-left: 16.66666667%; } .gp-sm-offset-3 { margin-left: 25%; } .gp-sm-offset-4 { margin-left: 33.33333333%; } .gp-sm-offset-5 { margin-left: 41.66666667%; } .gp-sm-offset-6 { margin-left: 50%; } .gp-sm-offset-7 { margin-left: 58.33333333%; } .gp-sm-offset-8 { margin-left: 66.66666667%; } .gp-sm-offset-9 { margin-left: 75%; } .gp-sm-offset-10 { margin-left: 83.33333333%; } .gp-sm-offset-11 { margin-left: 91.66666667%; } .gp-sm-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } [class*="gp-"].gp-sm-centered { margin-left: auto; margin-right: auto; display: block; } [class*="gp-"].gp-sm-centered:last-child { display: block; } [class*="gp-"].gp-sm-uncentered { margin-left: 0; margin-right: 0; } [class*="gp-"].gp-sm-uncentered:last-child { display: block; } /*平均分配*/ .gp-avg-sm-1>li { width: 100%; } .gp-avg-sm-2>li { width: 50%; } .gp-avg-sm-3>li { width: 33.3%; } .gp-avg-sm-4>li { width: 25%; } .gp-avg-sm-5>li { width: 20%; } } @media screen and (min-width:997px) { [class*="gp-md"] { margin-right: -2px; margin-left: -2px; } .gp-md-1 { width: 8.33333333%; } .gp-md-2 { width: 16.66666667%; } .gp-md-3 { width: 25%; } .gp-md-4 { width: 33.33333333%; } .gp-md-5 { width: 41.66666667%; } .gp-md-6 { width: 50%; } .gp-md-7 { width: 58.33333333%; } .gp-md-8 { width: 66.66666667%; } .gp-md-9 { width: 75%; } .gp-md-10 { width: 83.33333333%; } .gp-md-11 { width: 91.66666667%; } .gp-md-12 { width: 100%; } .gp-md-offset-0 { margin-left: 0; } .gp-md-offset-1 { margin-left: 8.33333333%; } .gp-md-offset-2 { margin-left: 16.66666667%; } .gp-md-offset-3 { margin-left: 25%; } .gp-md-offset-4 { margin-left: 33.33333333%; } .gp-md-offset-5 { margin-left: 41.66666667%; } .gp-md-offset-6 { margin-left: 50%; } .gp-md-offset-7 { margin-left: 58.33333333%; } .gp-md-offset-8 { margin-left: 66.66666667%; } .gp-md-offset-9 { margin-left: 75%; } .gp-md-offset-10 { margin-left: 83.33333333%; } .gp-md-offset-11 { margin-left: 91.66666667%; } .gp-md-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } [class*="gp-"].gp-md-centered { margin-left: auto; margin-right: auto; float: none; } [class*="gp-"].gp-md-centered:last-child { float: none; } [class*="am-u-"].gp-md-uncentered { margin-left: 0; margin-right: 0; float: left; } [class*="gp-"].gp-md-uncentered:last-child { float: left; } /*平均分配*/ .gp-avg-md-1>li { width: 100%; } .gp-avg-md-2>li { width: 50%; } .gp-avg-md-3>li { width: 33.3%; } .gp-avg-md-4>li { width: 25%; } .gp-avg-md-5>li { width: 20%; } } @media screen and (min-width:1920px) { [class*="gp-lg"] { margin-right: -2px; margin-left: -2px; } .gp-lg-1 { width: 8.33333333%; } .gp-lg-2 { width: 16.66666667%; } .gp-lg-3 { width: 25%; } .gp-lg-4 { width: 33.33333333%; } .gp-lg-5 { width: 41.66666667%; } .gp-lg-6 { width: 50%; } .gp-lg-7 { width: 58.33333333%; } .gp-lg-8 { width: 66.66666667%; } .gp-lg-9 { width: 75%; } .gp-lg-10 { width: 83.33333333%; } .gp-lg-11 { width: 91.66666667%; } .gp-lg-12 { width: 100%; } .gp-lg-offset-0 { margin-left: 0; } .gp-lg-offset-1 { margin-left: 8.33333333%; } .gp-lg-offset-2 { margin-left: 16.66666667%; } .gp-lg-offset-3 { margin-left: 25%; } .gp-lg-offset-4 { margin-left: 33.33333333%; } .gp-lg-offset-5 { margin-left: 41.66666667%; } .gp-lg-offset-6 { margin-left: 50%; } .gp-lg-offset-7 { margin-left: 58.33333333%; } .gp-lg-offset-8 { margin-left: 66.66666667%; } .gp-lg-offset-9 { margin-left: 75%; } .gp-lg-offset-10 { margin-left: 83.33333333%; } .gp-lg-offset-11 { margin-left: 91.66666667%; } .gp-lg-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } [class*="gp-"].gp-lg-centered { margin-left: auto; margin-right: auto; float: none; } [class*="gp-"].gp-lg-centered:last-child { float: none; } [class*="gp-"].gp-lg-uncentered { margin-left: 0; margin-right: 0; float: left; } [class*="gp-"].gp-lg-uncentered:last-child { float: left; } /*平均分配*/ .gp-avg-lg-1>li { width: 100%; } .gp-avg-lg-2>li { width: 50%; } .gp-avg-lg-3>li { width: 33.3%; } .gp-avg-lg-4>li { width: 25%; } .gp-avg-lg-5>li { width: 20%; } } /* 表格 */ .gp-table>tbody>tr>td, .gp-table>tbody>tr>th, .gp-table>tfoot>tr>td, .gp-table>tfoot>tr>th, .gp-table>thead>tr>td, .gp-table>thead>tr>th { padding: 12px; padding: 1rem; } .gp-table-bordered { border: solid #ddd; border-width: 0px 1px 1px 0px; } .gp-table * { word-break: break-all; } /*边框*/ .gp-table-bordered td { border: solid #ddd; border-width: 1px 0px 0px 1px; } /*条纹*/ .gp-table-striped>tbody>tr:nth-child(odd)>td, .gp-table-striped>tbody>tr:nth-child(odd)>th { background-color: #f9f9f9 } /*置顶*/ .gp-goTop { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 2.5rem; transition: all 0.3s ease-in-out; } .gp-goTop-fixed { position: fixed; right: 20px; bottom: 20px; z-index: 800; } .gp-goTop-fixed.bottom { bottom: 150px; }