@charset "UTF-8"; /* 重设样式 */ *{margin:0;padding:0;list-style:none;border:none;outline:none;} body{font:12px/1.5 "微软雅黑","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;font-style: normal;font-variant:normal;position: relative;} /* 内外边距通常让各个浏览器样式的表现位置不同 */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; font-family: "SourceHanSansCN-Bold", "SourceHanSansCN"; /*font-family: 'Noto Sans SC','STHeiti Light','Source Han Sans CN','SimHei', "Times New Roman",Georgia,Serif,SimHei;*/ } input, select, textarea {font-size: 100%;} /* 去掉各 Table cell 的边距并让其边重合 */ table {border-collapse: collapse;border-spacing: 0;} /* 去除默认边框 */ fieldset, img {border: 0;} /* 去掉 firefox 下此元素的边框 */ abbr, acronym {border: 0;font-variant: normal;} /* 一致的 del 样式 */ del {text-decoration: line-through;} address, caption, cite, code, dfn, em, th, var,i {font-size:100%;font-style: normal;font-weight: normal;} /* 去掉列表前的标识, li 会继承 */ ol, ul,li {list-style: none;} /* 对齐是排版最重要的因素, 别让什么都居中 */ caption, th {text-align: left;} /* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */ h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;} q:before, q:after {content: '';} /* 正常链接 未访问 */ /* 鼠标悬停 */ a:hover {text-decoration:none;} /* 默认不显示下划线,保持页面简洁 */ ins, a {text-decoration: none;} .fl_container{ width: 100%; height: auto; position: relative; } .fl_allb_top{ width: 1160px; height: 60px; line-height: 60px; margin: 0 auto; position: relative; } .fl_allb_top input{ width: 295px; height: 34px; background-color: #F5F5F5; font-size: 16px; color: #666; border-radius: 8px; display: block; position: absolute; right: 0;top: 14px; padding-left: 12px; box-sizing: border-box; } .fl_allb_top .seach{ width: 20px; height: 20px; position: absolute; top: 21px;right: 12px; cursor: pointer; } .fl_allb_top p{ height: 100%; line-height: 60px; font-size: 14px; color: #666; font-weight: 500; } .fl_allb_top em{ color: #DDA45A; } .fl_allb_top span{ color: #333; display: inline-block; margin-left: 12px; } .fl_allb_top p img{ width: 12px; height: 12px; display: inline-block; margin: 0 13px 0 12px; } .fl_allb_list{ width: 1160px; height: auto; margin: 0 auto; display: flex; justify-content: space-between; box-shadow: 2px 3px 14px 2px #F5F5F5; border: 2px solid #F8F8F8; border-radius: 24px; overflow: hidden; } .fl_allb_list ol{ width: 149px; height: auto; background-color: #F8F8F8; } .fl_allb_list ol li{ width: 100%; height: 60px; line-height: 60px; font-size: 14px; color: #333; padding-left: 60px; border-bottom: 1px dashed #F3F3F3; box-sizing: border-box; position: relative; } .fl_allb_list ol li img{ width: 16px; height: 16px; position: absolute; top: 22px;left: 36px; } .fl_allb_list ul{ width: 1011px; height: 60px; padding: 18px 0 0 28px; border-bottom: 1px dashed #F3F3F3; box-sizing: border-box; display: flex; flex-wrap: wrap; } .fg{ width: 1011px; height: 60px; border-bottom: 1px dashed #F3F3F3; box-sizing: border-box; position: relative; overflow: hidden; } .gd{ width: 50px; height: 19px; line-height: 14px; font-size: 14px; color: #333; position: absolute; top: 21px;right: 30px; cursor: pointer; } .fg ul{ width: 914px; height: 44px; display: flex; flex-wrap: wrap; box-sizing: border-box; position: relative; overflow: hidden; } .fl_allb_list ol li.active:nth-child(2){ height: 90px; line-height: 59px; } .fl_allb_list ol li.active:nth-child(2) img{ top: 22px; } .fg.active{ height: 120px; } .fg.active ul{ height: 100px !important; padding-top: 17px !important; } .fg.active ul li{ margin-bottom: 7px; } .fg.active ul li:nth-child(12){ margin-left: 62px; } .fg.active ul li:nth-child(20){ margin-right: 0; } .fg.active ul li:nth-child(22){ margin-left: 62px; } .fl_allb_list ol li:last-of-type{ border-bottom: none; } .gd.active{ top: 20px; } .gd img{ width: 14px; height: 14px; margin-left: 5px; } .fl_allb_list ul:last-of-type{ border-bottom: none; } .fl_allb_list ul li{ height: 24px; font-size: 14px; line-height: 24px; text-align: center; margin-right: 18px; padding: 0 8px; border-radius: 4px; cursor: pointer; color: #333; } .fl_allb_list ul:nth-child(2){ height: 43px; padding: 18px 0 0 28px; } .fl_allb_list ul:nth-child(3){ border-top: 1px dashed #F3F3F3; } .fl_allb_list ul li a{ width: 100%; height: 100%; display: block; } .fl_allb_list ul li.active{ color: white; background-color: #DDA45A; } .fl_allb_list ul li.active a{ color: white; } .fl_allb_list_a{ width: 1011px; height: auto; position: relative; } .fl_allb_list ul:nth-child(2) li{ margin-right: 9px; } .fl_allb_list ul:nth-child(1) li{ margin-right: 16px; } .fl_allb_list ul:nth-child(3) li{ margin-right: 16px; } .fl_allb_list ul:nth-child(4) li{ margin-right: 15px; } .fl_allb_list ul:nth-child(6) li{ margin-right: 13px; } .fl_allb_list ul li:first-of-type{ margin-right: 18px; } .fl_allb_content{ width: 1160px; height: auto; margin: 0 auto; } .fl_allb_content ol{ width: 100%; height: 76px; border-bottom: 1px solid #F3F3F3; box-sizing: border-box; display: flex; margin-bottom: 8px; } .fl_allb_content ol li{ height: 100%; line-height: 92px; font-size: 16px; color: #333; margin-right: 38px; position: relative; cursor: pointer; } .fl_allb_content ol li.active{ border-bottom: 2px solid #000; box-sizing: border-box; } .fl_allb_content ol li .imgone{ width: 10px; height: 6px; position: absolute; top: 39px;left: 54px; } .fl_allb_content ol li .imgtwo{ width: 14px; height: 14px; position: absolute; top: 43px;left: 52px; } .fl_allb_content ol li:nth-child(2) .imgone{ left: 38px;top: 47px; transform: rotate(180deg); } .fl_allb_content ol li:nth-child(2) .imgtwo{ left: 36px;top: 35px; transform: rotate(180deg); } .fl_allb_content_a{ width: 100%; max-height: 1153px; display: flex; flex-wrap: wrap; justify-content: flex-start; overflow: hidden; padding-top: 36px; box-sizing: border-box; } .fl_allb_content_a a{ width: 275px; height: 261px; display: block; position: relative; border: 2px solid #F5F5F5; border-radius: 24px; box-sizing: border-box; margin: 10px 7px; overflow: hidden; } .fl_allb_content_a a div:first-of-type{ width: 100%; height: 206px; overflow: hidden; } .fl_allb_content_a a .img{ width: 100%; height: 206px; display: block; border-radius: 24px 24px 0 0; transition-duration: 0.5s; } .fl_allb_content_a a h3{ width: 189px; height: 16px; line-height: 16px; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 530; padding-left: 12px; box-sizing: border-box; margin: 6px 0 4px 0; } .fl_allb_content_a a ul{ height: 17px; padding-left: 7px; box-sizing: border-box; display: flex; } .fl_allb_content_a a ul li{ height: 17px; line-height: 17px; text-align: center; font-size: 12px; color: #999; padding: 0 5px; border-right: 2px solid #999; } .fl_allb_content_a a ul li:last-of-type{ border-right: none; } .fl_allb_content_a a p{ width: 192px; height: 27px; line-height: 27px; padding: 0 11px 0 8px; box-sizing: border-box; color: white; font-size: 14px; background-color: #000; opacity: .4; position: absolute; top:169px;left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 0px 16px 0px 14px; z-index: 1; } .fl_allb_content_a_designer{ width: 56px; position: absolute; bottom: 4px;right: 16px; font-size: 14px; color: #666; text-align: center; } .fl_allb_content_a_designer img{ width: 46px; height: 46px; display: block; margin: 0 auto; border: 2px solid #fff; border-radius: 50%; } .fl_allb_content_a a.active{ box-shadow: 2px 3px 14px 2px #F5F5F5; } .fl_allb_content_a a.active h3{ color: #DE9D4D; } .fl_allb_content_a a .img:hover{ transform: scale(1.1); } input::-webkit-input-placeholder { color: #666; font-size: 16px !important; }