html,
    body {
        margin: 0;
        padding: 0;
        background: #000;
        width: 100%;
        height: 100%;
        position: absolute;
        min-width: 900px;
    }
    
    .clock {
        height: 200px;
        width: 1067px;
        text-align: center;
    }
    
    .digit {
        width: 120px;
        height: 200px;
        margin: 0 20px;
        position: relative;
        display: inline-block;
    }
    
    .digit .segment {
        background: #0ff;
        border-radius: 50px;
        position: absolute;
        opacity: 0.15;
        transition: opacity 0.2s;
        -webkit-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
    }
    
    .digit .segment.on,
    .separator {
        opacity: 1;
        box-shadow: 0 0 50px rgba(0, 255, 255, 0.7);
        transition: opacity 0s;
        -webkit-transition: opacity 0s;
        -ms-transition: opacity 0s;
        -moz-transition: opacity 0s;
        -o-transition: opacity 0s;
    }
    
    .separator {
        width: 20px;
        height: 20px;
        background: #0ff;
        border-radius: 100%;
        display: inline-block;
        position: relative;
        top: -110px;
    }
    
    .separator:after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        background: #0ff;
        top: 40px;
        left: 0px;
        border-radius: 100%;
    }
    
    .digit .segment:nth-child(1) {
        top: 0px;
        left: 20px;
        right: 20px;
        height: 20px;
    }
    
    .digit .segment:nth-child(2) {
        top: 20px;
        right: 0px;
        width: 20px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(3) {
        bottom: 20px;
        right: 0px;
        width: 20px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(4) {
        bottom: 0px;
        right: 20px;
        height: 20px;
        left: 20px;
    }
    
    .digit .segment:nth-child(5) {
        bottom: 20px;
        left: 0px;
        width: 20px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(6) {
        top: 20px;
        left: 0px;
        width: 20px;
        height: 75px;
        height: calc(50% - 25px);
    }
    
    .digit .segment:nth-child(7) {
        bottom: 90px;
        bottom: calc(50% - 10px);
        right: 20px;
        left: 20px;
        height: 20px;
    }
    
    .imgmask {
        width: 880px;
        height: 399px;
        float: left;
        margin-left: 4px;
        margin-top: 4px;
        mask: url(imgmask.png) center center/880px 399px no-repeat;
        -webkit-mask: url(imgmask.png) center center/880px 399px no-repeat;
    }
    
    .imgmask img {
        width: 879px;
        height: 401px;
    }
    
    .imgmask video {
        width: 879px;
        height: 660px;
    }
    
    .imgbox100 {
        width: 887px;
        height: 407px;
        background: url(imgborder@2x.png) no-repeat;
        background-size: 887px 407px;
        margin-top: 48px;
        position: relative;
    }
    
    .imgbox100::after {
        content: "";
        width: 165px;
        height: 5px;
        background: #0ff;
        display: block;
        position: absolute;
        top: 35px;
        right: 15px;
    }
    
    .listbox100 {
        width: 1067px;
        height: 407px;
        background: url(listbx@2x.png) no-repeat;
        background-size: 1067px 407px;
        margin-top: 48px;
        margin-left: 50px;
    }
    
    .listbox100 h3 {
        padding-top: 50px;
        padding-bottom: 10px;
        border-bottom: 2px solid #0ff;
    }
    
    .listbox100 h3 span {
        color: #0ff;
        font-weight: 900;
        font-size: 32px;
    }
    
    .listbox100 ul {
        margin-top: 0px;
    }
    
    .listbox100 ul li {
        color: #0ff;
        font-size: 22px;
        height: 46px;
        line-height: 46px;
        padding-left: 41px;
    }
    
    .listbox100 ul li::before {
        content: "";
        display: inline-block;
        background: #0ff;
        width: 4px;
        height: 4px;
        vertical-align: middle;
        margin-right: 0px;
        margin-left: 20px;
        border-radius: 5px;
    }
    
    .listbox100 h3 span {
        display: inline-block;
        width: 800px;
        padding-left: 95px;
    }
    
    .listbox100 ul li span {
        display: inline-block;
        width: 770px;
        padding-left: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }
    
    .listbox100 ul li span.date-time {
        width: 200px;
        display: inline-block;
        padding-left: 20px;
    }
    
    .listbox100 h3 span.date-time {
        width: 200px;
        display: inline-block;
        padding-left: 73px;
    }
    
    .listbox100 ul li:hover {
        background: rgba(3, 255, 255, 0.3);
    }
    
    .colpat3 {
        margin-left: 143px;
    }
    
    .videobox100 {
        width: 987px;
        height: 407px;
        margin-top: 48px;
        background: url(videoborder@2x.png) no-repeat;
        background-size: 987px 407px;
        margin-left: 50px;
        position: relative;
    }
    
    .videobox100::after {
        content: "";
        width: 165px;
        height: 5px;
        background: #0ff;
        display: block;
        position: absolute;
        top: 35px;
        right: 15px;
    }
    
    .videomask {
        width: 983px;
        height: 401px;
        float: left;
        margin-left: 4px;
        margin-top: 4px;
        mask: url(videomask.png) center center no-repeat;
        -webkit-mask: url(videomask.png) center center no-repeat;
    }
    
    .videomask video {
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .heightover {
        overflow: hidden;
        height: 290px;
        padding-top: 10px;
        position: relative;
    }
    
    .heightover::after {
        content: "";
        display: block;
        width: 100%;
        height: 46px;
        position: absolute;
        top: 104px;
        background: rgba(0, 255, 255, 0.2);
    }
    
    .dotdec {
        position: absolute;
        right: 30px;
        top: 100px;
        width: 100px;
    }
    
    .light1 {
        position: absolute;
        z-index: 9999;
        left: 490px;
        bottom: -71px;
    }
    
    .light2 {
        left: 1087px;
        top: -80px;
        z-index: 0;
    }
    
    .light3 {
        left: auto;
        right: -130px;
        bottom: -71px;
    }
    
    .imgbox200 {
	width: 887px;
	height: 407px;
	background: url(imgbox200@2x1.png) no-repeat;
	background-size: 887px 437px;
	margin-top: 45px;
    }
    
    .imgbox200 img {
	width: 810px;
	height: 385px;
	overflow: hidden;
	margin-top: 18px;
	margin-left: 30px;
    }
    
    .imgbox200 ul li {
        float: left;
        width: 620px;
        height: 286px;
        overflow: hidden;
    }
    
    .imgbox200 ul li img {
        width: 100%;
        height: 100%;
    }
    
    .colpat32 {
        position: relative;
        width: 3246px;
        margin-left: 0;
    }
    
    .colpat32::before {
        position: absolute;
        content: "";
        background: url(vline@2x.png) no-repeat;
        width: 9px;
        height: 422px;
        background-size: 9px 422px;
        left: -33px;
        top: 45px;
    }
    
    .titlebox200 {
	width: 1067px;
	margin-top: 40px;
	margin-left: 110px;
    }
    
    .titlebox200 h1 {
	width: 1219px;
	height: 108px;
	background: url(titbg200@2x1.png) no-repeat;
	background-size: 1519px 108px;
	line-height: 117px;
	color: #fff;
	font-size: 42px;
	text-align: center;
	font-weight: 900;
    }
    
    .titlebox200 p {
        color: #fff;
        font-size: 38px;
        line-height: 55px;
        margin-top: 20px;
        padding: 0 20px;
    }
    
    .videobox200 {
	width: 1005px;
	height: 464px;
	background: url(videobg200@2x.png) no-repeat;
	background-size: 1103px 460px;
	position: relative;
	bottom:5px;
	left:50px;
	margin-top:40px;
    }
    
    .videobox200 video {
        width: 100%;
        height: 367px;
        background: rgba(0, 0, 0, 0.5);
        margin-left: 43px;
        margin-top: 46px;
        opacity: 0.6;
    }
    
    .swiper-container {
	width: 2200px;
	height: 512px;
	margin: 0px;
    }
    
    .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {}
    
    .swiper-pagination-bullet {
        float: left;
        opacity: 1;
    }
    
    .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 20px;
    }
    
    .swiper-container-vertical>.swiper-pagination-bullets {
        top: auto;
        bottom: 50px;
        right: 100px;
    }
    
    .swiper-pagination-bullet {
        width: 40px;
        height: 40px;
        background: url(pagede@2x.png) no-repeat;
        background-size: 40px 40px;
    }
    
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 42px;
        height: 41px;
        background: url(pageon@2x.png) no-repeat;
        background-size: 42px 41px;
    }
    
    .videobox200::before {
        position: absolute;
        content: "";
        background: url(vline@2x.png) no-repeat;
        width: 9px;
        height: 422px;
        background-size: 9px 422px;
        left: -33px;
        top: -8px;
    }
    
    .videobox200::after {
        content: "";
        display: block;
        width: 158px;
        height: 44px;
        background-size: 158px 44px;
        top: 56px;
        right: 58px;
        position: absolute;
    }