.kh-body{ background: url(../images/kh/kh-1.png) center center no-repeat; width: 100%; height: 100%; min-width: 1366px; } .kh-xxpz{ width: 348px; height: 65px; background: url(../images/kh/kh-2.png) center center no-repeat; background-size: 100%; display: flex; justify-content: center; align-items: center; padding-bottom:10px; padding-left: 68px; position: absolute; right: 0; top: 85px; cursor: pointer; } .kh-ico5{ background: url(../images/kh/kh-5.png) center center no-repeat; width: 24px; height: 21px; display: inline-block; background-size: 100%; vertical-align: middle; } .kh-ico6{ background: url(../images/kh/kh-6.png) center center no-repeat; width: 8px; height: 13px; display: inline-block; background-size: 100%; vertical-align: middle; } .kh-xxpz>span{ font-size: 20px; color: #fff; margin: 0 16px; } .kh-zt{ width: 1150px; margin: 0 auto; margin-top: 235px; position: relative; } .khzt-box{ display: flex; justify-content: space-around; align-items: center; } .khzt-list{ width: 355px; height: 519px; background: url(../images/kh/kh-12.png) center center no-repeat; position: relative; transition: all 0.3s ease; border-radius: 10px; } .khzt-list-top { font-size: 22px; font-family:"FZZZHONGJW","Microsoft YaHei"; color: rgb(255, 255, 255); line-height: 43px; text-align: center; text-shadow: 1px 1.732px 5px rgba(0, 70, 110, 0.4); position: absolute; top: -7px; left: 50%; margin-left: -158px; background: url(../images/kh/kh-7.png) center center no-repeat; width: 317px; height: 43px; } .khzt-list-top>div{ margin: 0 auto; height: 43px; width: 66%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .khzt-ico1{ background: url(../images/kh/kh-8.png) center right 0 no-repeat; width: 89px; height: 44px; display: inline-block; background-size: 12px 44px; position: absolute; transition: all 0.5s ease; right: -6px; top:57px; } .khzt-list-con{ padding: 20px 15px; } .khzt-list-con-top{ padding: 10px; color: #fff; margin-top: 30px; } .khzt-list:hover{ box-shadow: 2px 2px 10px 0px #555; transition: all 0.3s ease; cursor: pointer; } .khzt-explain-tittle{ font-size: 16px; font-weight: bold; background: rgba(0, 0, 0, 0.15); padding: 2px 15px; border-radius: 20px; vertical-align: middle; } .khzt-explain-con{ font-size: 16px; height: 70px; /* overflow: auto; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 25px 0; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ .khzt-explain-con::-webkit-scrollbar{ width:6px; height: 16px; background-color: transparent; } /*定义滚动条轨道 内阴影+圆角*/ .khzt-explain-con::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ .khzt-explain-con::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2); background-color: #999; } .khzt-cjbl-num{ font-size: 24px; font-weight: bold; margin-left: 16px; vertical-align: middle; } .khzt-cjbl-num>em{ font-size:16px; font-weight: normal; } .khzt-list-con-fot{ width: 323px; height: 244px; margin: 0 auto; background: url(../images/kh/kh-15.png) center center no-repeat; background-size: 100%; } .khzt-list-fot-title{ font-size: 22px; font-family: "FZZZHONGJW"; color: rgb(0, 124, 155); text-align: center; text-shadow: 1px 1.732px 20px rgba(0, 148, 185, 0.3); height: 54px; line-height: 54px; } .khz-list-khx{ width: 245px; margin: 30px auto; } .khz-list-khx-list{ display: flex; justify-content: space-between; align-items: center; color: #fff; margin: 5px 0; } .khz-list-khx-list>div{ width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; } .khz-list-khx-list>span{ font-size: 24px; font-weight: bold; color: #fff; } .khz-list-khx-list>span>em{ font-size: 16px; font-weight: normal; margin-left: 8px; } .khzt-left{ background: url(../images/kh/kh-3.png) center center no-repeat; width: 66px; height: 66px; display: inline-block; background-size: 100%; position: absolute; top: 50%; left: -10%; margin-top: -33px; cursor: pointer; } .khzt-left2{ background: url(../images/kh/kh-4.png) center center no-repeat; width: 66px; height: 66px; display: inline-block; background-size: 100%; position: absolute; top: 50%; left: -10%; margin-top: -33px; cursor: pointer; transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); } .khzt-right2{ background: url(../images/kh/kh-4.png) center center no-repeat; width: 66px; height: 66px; display: inline-block; background-size: 100%; position: absolute; top: 50%; right: -10%; margin-top: -33px; cursor: pointer; } .khzt-right{ background: url(../images/kh/kh-3.png) center center no-repeat; width: 66px; height: 66px; display: inline-block; background-size: 100%; position: absolute; top: 50%; right: -10%; margin-top: -33px; cursor: pointer; transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); } .khzt-list2{ background: url(../images/kh/kh-13.png) center center no-repeat; background-size: 100%; } .khzt-list2 .khzt-list-top{ background: url(../images/kh/kh-7-2.png) center center no-repeat; background-size: 100%; } .khzt-list2 .khzt-list-con-fot{ background: url(../images/kh/kh-16.png) center center no-repeat; background-size: 100%; } .khzt-list2 .khzt-list-fot-title{ color: rgb(0, 115, 189); text-shadow: 1px 1.732px 20px rgba(0, 127, 208, 0.3); } .khzt-list2 .khzt-list-top>div{ color: rgb(255, 255, 255); text-shadow: 1px 1.732px 5px rgba(3, 20, 171, 0.4); } .khzt-list3{ background: url(../images/kh/kh-14.png) center center no-repeat; background-size: 100%; } .khzt-list3 .khzt-list-top{ background: url(../images/kh/kh-7-3.png) center center no-repeat; background-size: 100%; } .khzt-list3 .khzt-list-con-fot{ background: url(../images/kh/kh-17.png) center center no-repeat; background-size: 100%; } .khzt-list3 .khzt-list-fot-title{ color: rgb(138, 45, 217); text-shadow: 1px 1.732px 20px rgba(117, 85, 231, 0.3); } .khzt-list3 .khzt-list-top>div{ color: rgb(255, 255, 255); text-shadow: 1px 1.732px 5px rgba(132, 0, 115, 0.6); } .khzt-ico2{ width: 10px; height: 36px; display: inline-block; display: flex; justify-content: center; align-items: center; white-space: nowrap; z-index: 66; position: absolute; top: 57px; right: -6px; border-radius: 18px 3px 3px 18px; background-image: -moz-linear-gradient( 0deg, rgb(255,255,255) 0%, rgb(232,232,232) 90%, rgb(208,208,208) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(255,255,255) 0%, rgb(232,232,232) 90%, rgb(208,208,208) 100%); background-image: -ms-linear-gradient( 0deg, rgb(255,255,255) 0%, rgb(232,232,232) 90%, rgb(208,208,208) 100%); background-image: linear-gradient( to right 0deg, rgb(255,255,255) 0%, rgb(232,232,232) 90%, rgb(208,208,208) 100%); transition:width 1s; -moz-transition:width 1s; /* Firefox 4 */ -webkit-transition:width 1s; /* Safari and Chrome */ -o-transition:width 1s; /* Opera */ } .khzt-ico2:hover{ width: 89px; } .khzt-ico2>i{ margin: 8px 6px; cursor: pointer; white-space: nowrap; } .khzt-ico2-w{ width: 89px; } .khzt-ico2-ico1{ background: url(../images/kh/kh-9.png) center center no-repeat; width: 22px; height: 21px; display: inline-block; } .khzt-ico2-ico2{ background: url(../images/kh/kh-10.png) center center no-repeat; width: 22px; height: 21px; display: inline-block; } .khx-header{ width: 100%; height: 50px; background-color: rgb(40, 123, 246); position: fixed; left: 0px; top: 0px; right: 0; z-index: 999; padding: 12px 30px; } .khx-head-con{ position: relative; width: 100%; height: 100%; } .khx-head-back{ position: absolute; color: #fff; } .khx-ico-left{ background: url(../images/kh/kh-18.png) center center no-repeat; width: 24px; height: 24px; display: inline-block; vertical-align: middle; } .khx-head-back>span{ font-size: 18px; vertical-align: middle; color: #fff; } .khx-head-rig{ position: absolute; right: 30px; top: 3px; } .khx-head-file{ border-radius: 5px; display: inline-block; font-size: 16px; text-align: center; color: #555; position: relative; cursor: pointer; padding: 2px 11px; background-color: #fff; } .khx-head-file input { position: absolute; font-size: 100px; right: 0; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); border-width: 1px; border-color: rgb(255, 255, 255); border-style: solid; border-radius: 19px; width: 119px; height: 38px; cursor: pointer; } .khx-head-file:hover { color: #00a2ff; text-decoration: none; } .khx-head-tb{ padding-left: 360px; } .khx-head-tb-ico{ background: url(../images/kh/kh-19.png) center center no-repeat; width: 9px; height: 14px; display: inline-block; vertical-align: middle; } .khx-head-tb span{ color: #fff; font-size: 22px; padding: 4px 20px; vertical-align: middle; border-radius: 15px; margin: 0 10px; display: inline-block; cursor: pointer; transition: all 0.5s ease; } .khx-head-tb span:hover{ background: rgba(0, 0, 0, 0.1); } .khx-head-span{ color: #fff; font-size: 22px; background: rgba(0, 0, 0, 0.1); } .khx-tead-tit{ color: #fff; font-size:20px; font-weight: bold; } .khx-head-file>select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: transparent url(../images/kh/kh-20.png) center right 20px no-repeat; border: none; width: 100%; cursor: pointer; padding: 0 20px;} .khx-head-file>select::-ms-expand { display: none; } .khx-head-tb2{ padding-left:100px; margin-top: -3px; } .khx-two-head{ width: 100%; height: 40px; background-color: rgba(250, 205, 137, 0.2); position: fixed; left: 0px; top: 80px; right: 0; z-index: 999; font-size: 17px; color: #f28900; line-height: 40px; padding-left: 300px; } /*houtai */ .khht-top-list{ border-radius: 10px; box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.05); width: 234px; height: 130px; color: #fff; background: -webkit-linear-gradient(left, #1ec7ff, #00a2ff); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right,#1ec7ff, #00a2ff); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right,#1ec7ff, #00a2ff); /* Firefox 3.6 - 15 */ background: linear-gradient(to right,#1ec7ff, #00a2ff); /* 标准的语法 */ position: relative; cursor: pointer; transition: 0.5s all ease; } .khht-top-list:hover{ opacity: 0.8; transition: 0.5s all ease; } .khht-top-list2{ background: -webkit-linear-gradient(left, #a299ff, #9876fa); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #a299ff, #9876fa); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #a299ff, #9876fa); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #a299ff, #9876fa); /* 标准的语法 */ } .khht-top-list-title { font-size: 21px; font-family: "Microsoft YaHei"; color: rgb(255, 255, 255); font-weight: bold; text-align: left; position: absolute; top: 20px; left: 20px;} .khht-top-list>i{ position: absolute; right: 0px; bottom: 0px; } .khht-top{ margin: 100px auto; margin-bottom: 135px; display: flex; justify-content: space-around; align-items: center; max-width: 1420px; } .khht-top-ico1{ width: 62px; height: 66px; display: inline-block; background: url(../images/kh/kh-21.png) bottom -10px center no-repeat; background-size: 100%; } .khht-top-list2>i,.khht-top-ico2{ width: 71px; height: 64px; display: inline-block; background: url(../images/kh/kh-22.png) bottom -10px center no-repeat; background-size: 100%; } .khht-top-list3{ background: -webkit-linear-gradient(left, #00d9b8, #00bea5); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #00d9b8, #00bea5); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #00d9b8, #00bea5); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #00d9b8, #00bea5); /* 标准的语法 */ } .khht-top-list3>i,.khht-top-ico3{ width: 69px; height: 62px; display: inline-block; background: url(../images/kh/kh-23.png) bottom -10px center no-repeat; background-size: 100%; } .khht-top-list4{ background: -webkit-linear-gradient(left, #ff8f6f, #fd7858); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #ff8f6f, #fd7858); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #ff8f6f, #fd7858); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #ff8f6f, #fd7858); /* 标准的语法 */ } .khht-top-list4>i,.khht-top-ico4{ width: 56px; height: 63px; display: inline-block; background: url(../images/kh/kh-24.png) bottom -10px center no-repeat; background-size: 100%; } .khht-top-list5{ background: -webkit-linear-gradient(left, #8abdd7, #79a2c5); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #8abdd7, #79a2c5); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #8abdd7, #79a2c5); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #8abdd7, #79a2c5); /* 标准的语法 */ } .khht-top-list5>div{ color: rgb(255, 255, 255); text-shadow: 0px 10px 10px rgba(122, 163, 197, 0.4); } .khht-top-list5>i.khht-top-ico5{ width: 65px; height: 66px; display: inline-block; background: url(../images/kh/kh-25.png) bottom -10px center no-repeat; background-size: 100%; } .khht-bot{ border: 1px solid #dcdcdc; position: relative; margin: 0 60px; border-radius: 10px; } .khht-bot-title{ height: 70px; width: 298px; background: #fff; position: absolute; top: -35px; left: 50%; margin-left: -146px; text-align: center; } .khht-bot-title>div{ font-size: 24px; color: #555; } .khht-bot-title>span{ font-size: 17px; color: #aaa; } .khht-bot-con{ display: flex; justify-content: space-between; align-items: center; margin: 100px auto; max-width: 650px; } .khht-bot-con-list{ transition: all 0.5s ease; cursor: pointer; } .khht-bot-con-list:hover{ opacity: 0.8; transition: all 0.5s ease; } .khht-bot-con-list>i{ width: 100px; height: 100px; background: url(../images/kh/kh-26.png) center center no-repeat; background-size: 100%; display: inline-block; } .khht-bot-con-list>div{ color: #555; font-size: 20px; text-align: center; } .khht-bot-con-list2>i{ background: url(../images/kh/kh-27.png) center center no-repeat; background-size: 100% } .khht-bot-con-list3>i{ background: url(../images/kh/kh-28.png) center center no-repeat; background-size: 100% } .khx-body{ padding: 0 40px; padding-top: 70px; } .khx-body2{ padding: 0 40px; padding-top: 35px; } @media screen and (max-width: 1366px) { .khzt-left,.khzt-left{ left: -7%; } .khzt-right,.khzt-right2{ right: -7%; } } /* 2 */ .khfib-downbox{ position: relative; } .khfib-downbox:hover .khfib-downbox-txt{ opacity: 1; height: 130px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); } .khfib-downbox-txt{ z-index: 100; border-radius: 10px; top: 0; left: 0; right: 0; color: #424242 !important; position: absolute; opacity: 0; transition: all 0.2s; width: 234px; font-size: 14px; font-weight: normal; padding:15px 20px ; height: 0; overflow: hidden; line-height: 1.8; background-color: rgba(255, 255, 255, 0.93); transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; } .khfib-downbox-txt>b{ font-size: 16px; display: block; text-align: center; } /* 翻转显示text */