/*main*/ .main{ margin:2% auto; background: url(../images/mainbg.png) bottom no-repeat; background-size: 100%; } /*title*/ .title{ width: 1000px; margin: 0 auto; } .title p{ font-size: 22px; color: #333333; margin-bottom: 30px; font-weight: bold; } /*contain*/ /*content*/ .content{ min-height: 200px; font-size: 16px; } #zxdt{ display: flex; display: -webkit-flex; justify-content: space-between; margin-bottom: 40px; height: 400px; overflow: hidden; } .zxLeft{ width: 328px; height: 400px; } .zxDt{ padding: 10px 15px; background:#fafafa; height: 100%; } .zxLeft .zxTit{ color: #0FA3F0; font-size: 16px; margin-bottom: 15px; font-weight: bold; } .zxLeft .zxInfo{ color: #666666; font-size: 14px; } .zxLeft .zxInfo>p{ overflow: hidden; text-overflow: ellipsis; /* display: -webkit-box; */ display: inline; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .zxLeft .zxInfo>span{ color: #0FA3F0; cursor: pointer; } .zxRight{ width: 630px; } .zxRight .zxTop{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; } .zxRight .zxTab{ display: flex; display: -webkit-flex; font-size: 18px; color: #333333; } .zxRight .more{ font-size: 14px; color: #999999; cursor: pointer; } .zxRight .zxTab div{ margin-right: 30px; line-height: 36px; cursor: pointer; } .zxRight .zxTab div.active{ color: #0FA3F0; border-bottom: 2px solid #0FA3F0; } .zxBox{ /* background: #f7f8f9; */ box-sizing: border-box; padding-right: 1px; } .zxBox .zxList{ margin-bottom: 20px; padding: 10px 20px 10px 0px; position: relative; z-index: 99; box-sizing: border-box; cursor: pointer; /* box-shadow: 0 0 4px #e5e5e5; */ -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; } .zxBox>div{ display: none; } .zxBox>div.act{ display: block; } .zxList>span,.zxList>p{ display: block; color: #333; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; } .zxList::after{ width: 629px; height: 68px; content: ''; background: url(../images/zxListbg.png) no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; z-index: -1; } /* .zxList:hover, */ .zxList.on{ padding: 10px 20px 10px 20px; } .zxList.on>span,.zxList.on>p{ color:#fff; } /* .zxList:hover:after, */ .zxList.on:after{ width: 644px; height: 68px; content: ''; background: url(../images/zxListbg2.png) 0 -6px no-repeat; background-size: 100%; position: absolute; top: 0; left: -14px; z-index: -1; } #jjfa,#gywm,#bj,#zycp{ margin-bottom: 40px; } #jjfa{ background: url(../images/mbbg.png) no-repeat; background-size: 100% 100%; padding-top: 40px; } .faBox{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; } .faBox>div{ width: 32%; margin-bottom: 20px; position: relative; } .faBox>div .faImg{ position: relative; height: 208px; overflow: hidden; } .faBox>div .faImg>img{ width: 100%; } .faBox>div .faImg>span{ width: 100%; height: 50%; position: absolute; bottom: 0; left: 0; color: #fff; font-weight: bold; font-size: 20px; padding-top: 55px; padding-left: 20px; box-sizing: border-box; /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);*/ } .faBox .faTxt{ width: 100%; height: 100%; box-sizing: border-box; padding: 30px 20px; background: rgba(15, 162, 240, 0.8); cursor: pointer; position: absolute; top: 0; left: 0; color: #fff; transition: all 0.8s; opacity: 0; } .faBox>div:hover .faImg>span{ opacity: 0; transition: all 0.8s } .faBox>div:hover .faTxt{ transition: all 0.8s; opacity: 1; } .faTxt>h2{ margin-bottom: 5px; font-size: 18px; letter-spacing: 2px; } .faTxt>p{ height: 40px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 20px; } .faTxt>span{ display: block; width: 22px; height: 4px; background: #fff; margin-bottom: 10px; } .faTxt .lookM{ padding: 1px 10px; font-size: 14px; border-radius: 2px; border:1px solid #fff ; color: #fff; } #gywm,#bj{ display: flex; display: -webkit-flex; } #zycp{ position: relative; margin-bottom: 60px; } #zycp .swiper-pagination{ text-align: center; left: 0; right: 0; margin: 0 auto; } #zycp .swiper-pagination .swiper-pagination-bullet{ margin: 10px 6px 0; } #zycp .zyt{ color: #0FA2F0; padding: 4px; } #zycp .zyt img{ width: 100%; } #zycp .zyt .card{ box-sizing: border-box; padding: 10px 20px 25px; box-shadow: 0 0 4px #e5e5e5; } .zyTit{ /* font-weight: bold; */ margin-bottom: 20px; } .zyLook{ padding: 2px 8px; font-size: 12px; border: 1px solid #0FA2F0; cursor: pointer; } .cpInfo{ width: 368px; background: url(../images/cpbg.png) no-repeat; background-size: 100% 100%; padding: 20px 30px; box-sizing: border-box; color:#fff; font-size: 14px; text-align: justify; text-indent: 2em; line-height: 30px; } .cpInfo>p{ margin-bottom: 20px; } .cpInfo .lookMore{ border: 1px solid #fff; padding: 2px 8px; cursor: pointer; font-size: 12px; color: #fff; } .cpVideo img{ width: 642px; height: 450px; } #bj{ justify-content: space-around; align-items: center; } .bjTit p{ text-align: center; color:#333; font-weight: bold; font-size: 18px; margin-bottom: 20px; } .bjT{ width: 100%; height: 600px; } .bjT img{ width: 100%; } .bjInfo{ display: flex; display: -webkit-flex; justify-content: space-between; color: #0FA2F0; } .bjInfo>div{ width: 90px; margin-right: 20px; text-align: center; } .bjInfo>div>h2{ font-size: 26px; font-weight: normal; } .bjInfo>div>h2>p{ display: inline; } .bjInfo>div>h2>span{ font-size: 14px; margin-left: 4px; } .bjInfo>div>p{ color: #333; font-size: 14px; } /* .layui-btn .conut-next{text-align: center; font-size: 20px; color:#3E3E3E; padding: 5px 0; transition: all 0.5s;} .layui-btn:hover .conut-next{font-size: 18px; color: red; } */