@charset "utf-8";
/* CSS Document */





.downloadtop{	width: 1140px;	height: 330px;	margin: 0 auto;	margin-top: 50px; }	
	.downloadtop_left{width:612px;height: 100%;background: url(https://www.ubuntukylin.com/upload/202008/1596717202.png);float: left}
	.downloadtop_right{width:528px;height: 100%;background: url(https://www.ubuntukylin.com/public/images/down20.04righten.jpg);float: right}	
	.downcont{width: 500px;height: 151px;margin: 179px 0px 0px 75px;color: #666}
	ul.down2004ul{overflow: auto;margin-bottom: 0;}
	.down2004ul li{width: 30%; float: left; margin-right: 25px; list-style: inside none;word-wrap: break-word}
	.down2004ul li p.down_ca{margin-bottom: 0px;}
	.down2004ul li:last-child{margin-right: 0px}
	.down2004ul li a.a2004{width: 147px;height: 41px;line-height: 41px; text-align: center;background: #3d6be5;display: block;border-radius: 4px; color: #FFF;font-weight: 18px;margin: 11px 0px }
	.down2004ul li a.a2004:hover{background: #4676f5}
	.down2004ul li .down_ca{font-size: 11px;}
	.down2004ul li .md5{font-size: 9px;margin-bottom: 5px}
	.downcont h6{font-size: 11px;color: #666;margin-top: 0px}
	.downcont h6 a{text-decoration: underline;margin-left:22px}
		.down_zhichi{margin-left: 20px;margin-right: 0px}
	
	@media (max-width: 800px){
	.downloadtop{	width:100%;	overflow: auto; height: auto;margin: 0 auto;	margin-top: 20px; }	
	.downloadtop_left{width:100%;height: 330px;background: url(https://www.ubuntukylin.com/public/images/down2004leften.jpg) no-repeat top center;margin-bottom: 20px ;float: left}
	.downloadtop_right{width:100%;height:330px; background: url(https://www.ubuntukylin.com/public/images/down20.04righten.jpg) no-repeat top center;float: left}
	.downcont{width: 95%;height: 151px;color: #666;margin: 0 auto;margin-top: 175px;}	
	.down2004ul li{width: 30%; float: left; margin-right: 15px; list-style: inside none;word-wrap: break-word}
	.down2004ul li p.down_ca{margin-bottom: 0px;}
	.down2004ul li:last-child{margin-right: 0px}
	.down2004ul li a.a2004{width: 100%;height: 41px;line-height: 41px; text-align: center;background: #3d6be5;display: block;border-radius: 4px; color: #FFF;font-weight: 18px;margin: 11px 0px }
	.down2004ul li a.a2004:hover{background: #4676f5}
	.down2004ul li .down_ca{font-size: 11px;}
	.down2004ul li .md5{font-size: 9px;}
	.downcont h6{font-size: 11px;color: #666}
	.downcont h6 a{text-decoration: underline;margin-left:22px}
		.down_zhichi{display: none}
	
	}



.button_base {
    margin: 0;
    border: 0;
    font-size: 18px;
    line-height: 18px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: 25px;
    margin-left: -70px;
    width: 140px;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}
	
	
	#tx .button_base {
    margin: 0;
    border: 0;
    font-size: 14px;
    line-height: 14px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: 25px;
    margin-left: -70px;
    width: 100px;
    height: 32px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}
#tx .b04_skewed_slide_in div a{width: 100%;height: 100%;display: block;color: #FFF;font-size: 14px;text-decoration: none;margin-top: 0px; line-height: 14px;background: none!important}

.button_base a:hover {
    cursor: pointer;
}
.b04_skewed_slide_in {
    overflow: hidden;
}

.b04_skewed_slide_in div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
	cursor: pointer
}
.b04_skewed_slide_in div a{width: 100%;height: 100%;display: block;color: #FFF;font-size: 18px;text-decoration: none;margin-top: 0px;}

.b04_skewed_slide_in div:nth-child(1) {
    color: #ffffff;
    background-color: #006ead;
	cursor: pointer
}

.b04_skewed_slide_in div:nth-child(2) {
    background-color: #4175e2;
    width: 180px;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transform: translate(-250px, 0px) skewX(-30deg);
    -webkit-transform: translate(-250px, 0px) skewX(-30deg);
    -moz-transform: translate(-250px, 0px) skewX(-30deg);\
	cursor: pointer
}
	
	
.b04_skewed_slide_in div:nth-child(3) {
    color: #ffffff;
    left: -200px;
    transition: left 1s ease;
    -webkit-transition: left 1s ease;
    -moz-transition: left 1s ease;
	cursor: pointer;
}

.b04_skewed_slide_in:hover div:nth-child(2) {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transform: translate(-15px, 0px) skewX(-30deg);
    -webkit-transform: translate(-15px, 0px) skewX(-30deg);
    -moz-transform: translate(-15px, 0px) skewX(-30deg);
}

.b04_skewed_slide_in:hover div:nth-child(3) {
    left: 0px;
    transition: left 0.5s ease;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
}




.downloadtopleft{
	width: 340px;
	height: 330px;
	float: left;

	/*background: linear-gradient(to right,#c7e4fa,#f6f9fe);*/
}
.downloadtopleft img{
	position: absolute;
	z-index: 90;
	width: 340px;
	height: 330px;text-align: left!important
}
.downloadtopleft-title{
	width: 300px;
	height: 285px;
	position: absolute;
	z-index: 100;
	text-align: center;
}
.downloadtopleft-title h2{
	font-size: 35px;
	font-weight: bold;
	color: #333333;
	margin:0 auto;
	margin-top: 20px;
	text-align: center;
    padding-left: 10px;

	
}
.downloadtopleft-title p{
	line-height: 20px;
	padding-left: 10px;
	font-size: 11px;
	color: #666;
	text-align: center;	
	    margin-top: 8px;
}
.downl-t-button{
	background-color: #006ead;
	border-radius: 30px 30px 30px 30px;
	width: 150px;
	height: 40px;
	margin: 0 auto;

	padding-top: 8px;
	padding-left: 8px;
	cursor: pointer;
}
.top8402{
	margin-top: 20px;
}
.downl-t-button img{
	margin-left: 13px;
	width: 25px;
	height: 25px;
}
.downl-t-button p{
	margin-top: 2px;
	margin-left: 23px;
	font-size: 18px;
	font-weight: 700;
	color: #8d9ab9;
}
.downloadtopleft-title span{
	display: block;
	margin-top: 20px;
	margin-left: -4px;
	font-size: 10px;
	color:#666;
		
}
.downloadtopleft-title a{
	display: block;
	margin-top: 5px;
	font-size: 11px;
	color: #006ead;
	text-decoration: underline;	
	text-align: center
}
.downloadtopleft-title a:hover{
	text-decoration: none;
}
.downloadtopright{
	width: 800px;
	height: 330px;
	float: right;
}







.downloadmain{
	width: 1140px;
	height: 220px;
	margin: 40px auto;
}
.downloadmainleft{
	height: 218px;
	width: 560px;
	float: left;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: #fafafa;
}
.mainleft-left{
	width: 50%;
	height: 100%;
	float: left;
}
.mainleft-left img{
	width: 220px;
	height: 145px;
	float: left;
	margin-top: 45px;
	margin-left: 40px; 
}
.mainleft-right{
	width: 50%;
	height:100%;
	text-align: center;
	float: left;
}
.mainleft-right h2{
	font-size: 23px;
	color: #666666;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 0;
}
.mainleft-right p{
	font-size: 11px;
	color: #ababab;
	line-height: 18px;
	margin-top: 5px
}
.mainleft-right span{
	font-size: 10px;
	color: #aaaaaa;
}
.mainl-r-button{
	width: 102px;
	height: 32px;
    margin: 0 auto;
    margin-bottom: 15px;
    padding-left: 40px;
}
.mainl-r-button a{
	display: block;
	width: 100px;
	height: 30px;
	float: left;
	margin:0 auto; 
	background-color: #006ead;
	color: white;
	font-size: 14px;
	line-height: 30px;
}
.downloadmaincenter{
	height: 220px;
	width: 270px;
	margin-left: 20px;
	text-align: center;
	float: left;
	background-image: url(https://www.ubuntukylin.com/public/images/version2019/images/otheren.jpg);
    transition: all .5s;	
}
.downloadmaincenter:hover{
	background-image: url(https://www.ubuntukylin.com/public/images/version2019/images/other2en.jpg);
}

.downloadmainright{

	float: right;
	height: 220px;
	width: 270px;


}
.downloadmainright p{
	display: block;
    font-size: 14px;
    text-indent: 40px;
    line-height: 18px;
	margin: 16px auto;
    color: #666666;
    width: 100%;
    text-align: justify;

}
.internation {
	width: 100%;
	height: 98px;
	background: linear-gradient(to right,#0370b0,#1c8acd);
}
.internation img{
	margin-top: 37px;
	margin-left: 25px;
	width: 30px;
}
.internation-button{
	height: 100%;
	width: 210px;
	float: right;
}
.internation-button h4{
	float: left;
	color: white;
	margin: 0 auto;
	font-size: 26px;
	letter-spacing: 1px;
	margin-top: 18px;
	font-weight: normal
}
.internation-button span{
	display: block;
	float: left;
	color: white;
	font-size: 12px;
}






.downloadfoot{
	width: 1140px;
	height: 330px;
	margin: 0 auto;

}
.downloadfootleft{
	width: 340px;
	height: 330px;
	float: left;
	background:  linear-gradient(to right,#e1f1fe,#edf7fe);
}
/*.downloadfootleft img{
	position: absolute;
	z-index: 90;
	width: 340px;
	height: 330px;
}*/


.downloadfootleft-title{
	position: absolute;
	z-index: 100;
	width: 330px;
}
.downloadfootleft-title h2{
	font-size: 35px;
	font-weight: bold;
	color: #333333;
	margin:0 auto;
	margin-top: 35px;
	text-align: center;
}
.downloadfootleft-title p{
	display: block;
	line-height: 26px;
	font-size: 11px;
	color: #8d9ab9;
	text-align: center;	
	margin-bottom: 5px;
}
.downl-f-button{
	border-radius: 30px 30px 30px 30px;
	width: 150px;
	height: 40px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 35px;	
	padding-top: 8px;
	padding-left: 8px;
	cursor: pointer;
}
.downl-f-button img{
	margin-left: 13px;
	width: 25px;
	height: 25px;
}
.downl-f-button p{
	margin-top: 2px;
	margin-left: 23px;
	font-size: 18px;
	font-weight: 700;
	color: #4175e2;
}
.downloadfootleft-title span{
	display: block;
	font-size: 10px;
	color:#8d9ab9;
	text-align: center;
	margin-top: 5px;

}
.downloadfootright{
	width: 800px;
	height: 330px;
	float: right;
}







.downloadfootre{
	width: 900px;
	margin: 0 auto;
	text-align: center;
	color: #666666;
    margin-top: 40px;
    padding-bottom: 50px;
	overflow: auto
}
.footre-title{

	height: 50px;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: center;
}
.footre-title h2{
	font-size: 25px;
	color: #666666;
}
.footre-title span{
	font-size: 11px;
	color: #a9a9a9;	
}
.footbox{
	width: 180px;
	height:45px;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: #fafafa;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 25px;
	float: left;
}
.footbox img{
	height: 100%;
}


@media (max-width: 840px){

	.downloadtopright {
		width: 760px;
		height: 312px;
	}
	.downloadtopright img{
		width: 760px;
		text-align: center;
	}
	.downloadtopleft{
		width: 760px;
		height: 160px;
	}

	.downloadtopleft img{
		width: 760px;height: 160px;
	}
	.top8402{
		margin-top: 0
	}
	.downloadtopleft-title{
		width: 760px;
		height: 160px;
	}
	.top8401{
		width: 50%;
		height: 160px;
		float: left;
	}
	.top8402{
		width: 50%;
		height: 160px;
		float: right;
		text-align: center;
	}
	.top8402 span{
		margin-top: 20px;
	}	
	.mainleft-left img{
		margin-left: 100px;
	}
	.downl-t-button{
		margin-right: 100px;
	}
	.downl-t-button img{
		display: block;
	}
	.downloadmain{
		width: 680px;
		height: 440px;
		margin: 0 auto;
		margin-top: 30px;
	}
	.downloadmainleft{
		width: 680px;
		margin-left: 40px;
	}
	.downloadmaincenter{
		margin-top: 10px;
		margin-left: 60px;
	}
	.downloadmainright{
		margin-top: 10px;
		
	}
	.downloadfoot{
		width: 760px;
		height: 460px;
		margin-top: 30px;

	}
	.downloadfootright {
		width: 760px;
		height: 312px;

	}

	.downloadfootright img{
		width: 760px;
		text-align: center;
	}
	.downloadfootleft{
		width: 760px;
		height: 210px;
		background-color: #4175e2;
	}

	.downloadfootleft img{
		display: none;
	}
	.downloadfootleft-title{
		width: 760px;
		height: 180px;
	}
	.foot8401{
		width: 50%;
		height: 180px;
		float: left;
	}
	.foot8402{
		width: 50%;
		height: 180px;
		float: right;
		text-align: center;
	}
	.foot8402 span{
		margin-top: 20px;
	}	
	.foot8402 .downl-f-button{
		margin-top: 40px;
		margin-right: 120px;
	}
	.downl-f-button img{
		display: block;
	}
	.downloadfootre{

		margin-top: 80px;
	}
	.footbox{
		margin-left: 0px;
		margin-right: 10px;
	}
}


@media (max-width: 640px){

	.downloadtopleft{
		width: 330px;
		height: 320px;
	}
	.downloadtopleft img{
		width: 330px;
		height: 320px
	}
	.downloadtopright{
		width: 330px;
		height:132px;
	}
	.downloadtopright img{
		width: 330px;
	}
	.downloadtopleft-title{
		width: 330px;
		height: 320px;
	}
	.top8401{
		width: 330px;
		height: 160px;
		float: left;
	}
	.top8402{
		width: 330px;
		height: 160px;
		text-align: center;
		margin: 0 auto;
	}
	.top8402 span{
		margin-top: 20px;
	}	
	.downl-t-button{
		margin-right: 80px;
		margin-top: 20px;
	}
	.downl-t-button img{
		display: block;
	}
	.downloadtopleft-title a{
		margin-left: 0px;
	}
	.downloadmain{
		width: 330px;
		height: 880px;
		margin: 0 auto;
	}
	.downloadmainleft{
		width: 330px;
		height: auto;
		margin-top:20px;
		margin-bottom: 20px;
		overflow: auto;
		margin-left: 0;
	}
	.mainleft-left{
		width: 330px;
		height: 220px;
	}
	.mainleft-left img{
		margin-left: 55px;
	}
	.mainleft-right{
		width: 330px;
		height: 220px;
	}
	.downloadmaincenter{
		margin:0 auto;
		height: 220px;
		margin-left: 40px;

	}
	.downloadmainright{
		width: 330px;
		margin-left: 0;
	}
	.downloadmainright p{
		margin-bottom: 0
	}
	.downloadfoot{
		width: 330px;
		height: 480px;
	}
	.downloadfootright img{
		width: 330px;
	}
	.downloadfootright{
		width: 330px;
		height: 132px;
	}
	.downloadfootleft{
		width: 330px;
		height: 330px;
		background-color:#4175e2; 		
	}
	.downloadfootleft img{
		display:none;
	}
	.downloadfootleft-title{
		width: 330px;
		height: 320px;
	}
	.downloadfootleft-title img{
		display: block;
	}
	.downloadfootre{
		width: 330px;
		height: 300px;
		margin-top: 30px;
		text-align: center;
	}
	.foot8401{
		width: 330px;
		height: 160px;
		float: left;
	}
	.foot8402{
		width: 330px;
		height: 160px;
		text-align: center;
	}
	.foot8402 span{
		margin-top: 20px;
	}	
	.foot8402 .downl-f-button{
		margin-right: 90px;
		margin-top: 20px;
	}
	.downl-f-button img{
		display: block;
	}
	.downloadfootleft-title a{
		margin-left: 0px;
	}
	.footbox{
		margin-left: 0;
		margin-right: 0;
		float: none;
		margin: 0 auto;
		margin-top: 20px;	
	}