/*关注登录弹框*/
@mixin bgpage {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    position: relative;
}
@mixin bgcolor($width,$height,$color) {
    width: $width;
    height: $height;
    background-color: $color;
}
@mixin center($width,$height,$left,$top) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $width;
    height: $height;
    margin-left: $left;
    margin-top: $top;
    background-color: #fff;
} 
@mixin border($width,$height,$color) {
    width: $width;
    height: $height;
    border: 1px solid $color;
}
@mixin absolute($width,$height,$left,$top) {
    position: absolute;
    width: $width;
    height: $height;
    left: $left;
    top: $top;
}



/*关注登录弹框*/
.concern {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: fixed;
}
.top-bg {
    @include bgpage;
}
.entry { 
    @include center(308px,288px,-194px,-144px);
    padding-left: 40px;
    padding-right: 40px;
    background-color: #fff;
    h2 {
        position: relative;
        padding-bottom: 20px;
        padding-top: 28px;
        text-align: center;
        font-size: 18px;
        font-weight: normal;
        color: #444;
    }
    span {
        position: absolute;
        display: inline-block;
        width: 10px;
        height: 10px;
        top: 10px;
        right: 10px;
        background: #eee url(../../images/top.png) no-repeat 0 -76px;
        cursor: pointer;
    }
    input {
        display: block;
        @include border(272px,43px,#dfdfdf);
        margin-bottom: 15px;
        padding: 0 10px;
        line-height: 42px;
        font-size: 16px;
        color: #ccc;
    }
    button {
        @include bgcolor(294px,45px,#25ad48);
        margin-top: 15px;
        border: none;
        line-height: 46px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
    }
}

/*视频弹出框*/
.bg-video {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: fixed;
    .bg {
    @include bgpage;
    }
    
    .small-bg {
        @include center(921px,676px,-476px,-338px);
        padding-left: 31px;
    }
    video {
        @include absolute(890px,568px,31px,38px);
    }
    h2 {
        display: inline-block;
        padding-top: 28px;
        font-weight: normal;
        font-size: 18px;
        color: #444;
    }
    span {
        float: right;
        display: inline-block;
        margin: 38px 14px;
        height: 10px;
        width: 10px;
        background: #eee url(../../images/top.png) no-repeat 0 -76px;
        cursor: pointer;
    }
}

/*顶部cookie*/
#cookie-bg {
    @include bgcolor(100%,36px,#f3f3f3);
}
.cookie {
    width: 1204px;
    margin: 0 auto;
    font-size: 12px;
    color: #333;
    a {
    color: #21a557;
    line-height: 36px;
    }
}
.cookie-left {
    display: inline-block;
    line-height: 36px;
}
.cookie-right {
    float: right;
    margin-top: 13px;
    padding-left: 16px;
    line-height: 12px;
    background: url(../../images/top.png) no-repeat -80px 2px;
    cursor:pointer;
}

/*导航条*/
.nav {
    margin: 0 auto;
    width: 1204px;
    height: 89px;
    position: relative;
    h2 {
    display: inline-block;
    float: left;
    line-height: 22px;
    margin-top: 30px;
    padding-left: 82px;
    font-weight: normal;
    font-size: 22px;
    line-height: 22px;
    background: url(../../images/top.png) no-repeat -22px -9px;
  }
  input {
    margin-left: 31px;
    margin-top: 31px;
    line-height: 22px;
    padding-right: 9px;
    padding-left: 22px;
    font-size: 12px;
    font-family: '宋体';
    color: #fff;
    border: none;
    border-radius: 3px;
    background: #21a557 url(../../images/top.png) no-repeat -78px -31px;
    cursor:pointer;
    }
    input:hover {
        background: #2fb556 url(../../images/top.png) no-repeat -78px -31px;
    }
    span {
        margin-left: 14px;
        font-size: 12px;
        font-family: '宋体';
        color: #666;
    }
    p {
        display: none;
        position: absolute;
        @include border(88px,22px,#f1f1f1);
        top: 30px;
        left: 266px;
        padding-left: 21px;
        background: #fff url(../../images/top.png) no-repeat -44px -66px;
        font-size: 12px;
        color: #000;
    a {
        margin-left: 6px;
        color: #acacac;
        &:hover {
            color: #2fb556;
            text-decoration: underline;
        }
    }   
    }
    ul {
        float: right;
        margin-top: 34px;
        font-size: 16px;
        line-height: 20px;
    }
    li {
        float: left;
        margin-right: 54px;
    }
    a {
        color: #666;
    }
    a:hover {
        color: #21a557;
    }
    .mooc {
        margin-right: 30px;
    }
    .search {
        margin-right: 14px;
    }
}
.search a {
  display: inline-block;
  width: 20px;
  height: 22px;
  background: url(../../images/top.png) no-repeat;
}

/*轮播图*/
.banner {
    margin: 0 auto;
    width: 1614px;
    height: 460px;
    position: relative;
    a {
        @include absolute(100%,460px,0,0);
        display: block;
    }
    .dot {
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -142px;
    }
    li {
        @include bgcolor(10px,10px,#fff);
        float: left;
        margin-right: 11px;
        border-radius:50%;
    }
    .active {
        background-color: #333;
    }
}

/*三种课*/
.three {
    width: 1206px;
    height: 295px;
    margin: 0 auto;
    div {
        display: inline-block;
        width: 240px;
        height: 236px;
        margin-right: 80px;
        padding-left: 100px;
    }
    h2 {
        margin-top: 60px;
        font-weight: normal;
        font-size: 22px;
        line-height: 22px;
        color: #333;
    }
    p {
        display: block;
        width: 248px;
        margin-top: 20px;
        font-size: 14px;
        color: #666;
    }
    a {
        width: 72px;
        display: block;
        margin-top: 34px;
        font-size: 14px;
        color: #39a030;
    }
    a:hover {
        text-decoration: underline;
    }
    .product1 {
        background: url(../../images/top1.png) no-repeat 0 -46px;
    } 
    .product2 {
        background: url(../../images/top1.png) no-repeat 0 -214px;
    } 
    .product3 {
        background: url(../../images/top1.png) no-repeat 0 -380px;
        margin-right: 0;
    } 
}

/*工作环境图片展示*/
.list {
    @include bgcolor(100%,301px,#f8f8f8);
    ul {
        width: 1940px;
        margin: 0 auto;
    }
    li {
        float: left;
        margin-right: 4px;
    }
    .last {
        margin-right: 0;
    }
}

/*选项卡*/
.choose {
	width: 100%;
	height: 1466px;
	background-color: #f8f8f8;
}
.classes  {
	width: 1208px;
	height: 1466px;
	margin: 0 auto;
	position: relative;
}
.tab {
	float: left;
	width: 982px;
	h2 {
		display: inline-block;
		width: 200px;
		font-weight: normal;
		font-size: 20px;
		text-align: center;
		line-height: 50px;
		background-color: #fff;
		border-right: 1px solid #d4d3d3;
		border-bottom: 1px solid #d4d3d3;	
		cursor:pointer;
	}
	
}
#first {
		background-color: #39a030;
		border-left:  1px solid #d4d3d3;
	}
#design {
	margin-top: 8px;
	height: 1130px;
	li {
		float: left;
		margin-top: 20px;
		@include border(224px,228px,#e6e6e6);
		margin-right: 18px;
		border-top: none;
		position: relative;
		background-color: #fff;
		font-size: 12px;
		&:hover {
			.hover {
				display: block;
			}
		}
	}
	img {
		width: 222px;
		height: 124px;
		margin-left: 1px;
		margin-top: 1px;
	}
	h3 {
		height: 22px;
		width: 216px;
		padding-left: 6px;
		font-weight: normal;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	a {
		color: #333;
	}
	a:hover {
		color: #39a030;
	}
	p {
		padding-left: 6px;
		line-height: 22px;
		color: #999;
	}
	span {
		display: block;
		margin-top: 6px;
		margin-left: 6px;
		padding-left: 17px;
		width: 26px;
		height: 16px;
		border:1px solid #ddd;
		border-radius: 2px;
		background: url(../../images/top.png) no-repeat 3px -54px;
		line-height: 16px;
		color: #999;
	}
	strong {
		line-height: 30px;
		color: #ff3f00;
		padding-left: 6px;
	}
	.hover  {
		display: none;
		position: absolute;
		top: -10px;
		left: -10px;;
		z-index: 4;
		width: 480px;
		height: 238px;
		border: 1px solid #d0cfd0;
		background-color: #fff;
		img {
			float: left;
			margin-top: 10px;
			margin-left: 10px;
		}
		h3 {
			float: left;
			width: 224px;
			height: 36px;
			padding-left: 18px;
			// margin-top: 14px;
			line-height: 46px;
			font-size: 18px;
		}
		span {
			float: left;
			display: inline-block;
			margin-left: 22px;
			padding-left: 1px;
			width: 200px;
			height: 26px;
			border:none;
			line-height: 26px;
			background: url(../../images/count.png) no-repeat 0 6px;
		}
		p {
			float: left;
			width: 430px;
			height: 52px;
			margin-top: 20px;
			padding: 20px 30px 10px 20px;
			background-color: #f8f8f8;
			font-size: 14px;
			line-height: 20px;
			color: #666;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
#programme {
	@extend #design;
	display:none;
}

#bottom {
	width: 100%;
	height: 262px;
	background-color: #2c3339;
}
.foot {
	width: 1206px;
	margin: 0 auto;
	font-size: 12px;
	color: #bebfc0;
}
.first {
	float: left;
	margin-left: 50px;
	padding-top: 92px;
	line-height: 24px;
	.name {
		padding-left: 82px;
		margin-bottom: 21px;
		font-size: 22px;
		line-height: 22px;
		color: #39a030;
		background: url(../../images/top.png) no-repeat -22px -9px;
	}
}
.second {
	float: left;
	margin-left: 150px;
	padding-top: 82px;
	line-height: 30px;
	a {
		color: #bebfc0;
		font-size: 14px;
	}
	a:hover {
    	text-decoration: underline;
  	}
}
.third {
	margin-left: 98px;
	.concern {
		padding-right: 32px;
		background: url(../../images/top.png) no-repeat 36px -33px;
	}
}

.forth {
	margin-left: 104px;
}

.video {
	float: right;
	width: 224px;
	height: 230px;
	background-color: #fff;
	border-left: 1px solid #ecebeb;
	border-bottom: 1px solid #ecebeb;
	h2 {
		line-height: 55px;
		padding-left: 20px;
		border-bottom: 1px solid #ecebeb;
		font-weight: normal;
		font-size: 16px;
		color: #333;
	}
	p {
		line-height: 32px;
		padding-left: 22px;
		padding-top: 12px;
		font-size: 14px;
		color: #666;
	}
	img {
		width: 180px;
		height: 110px;
		margin-left: 22px;
		cursor: pointer;
	}
	div {
		width: 100%;
		height: 100%;
		z-index: 9;
	}
}
.hot {
	float: right;
	margin-top: 20px;
	width: 224px;
	background-color: #fff;
	border-left: 1px solid #ecebeb;
	border-bottom: 1px solid #ecebeb;
	h2 {
		line-height: 55px;
		padding-left: 20px;
		border-bottom: 1px solid #ecebeb;
		font-weight: normal;
		font-size: 16px;
		color: #333;
	}
	ul {
		padding-left: 20px;
		height: 720px;
		overflow: hidden;
	}
	li {
		height: 50px;
		margin-top: 20px;
	}
	img {
		float: left;
		width: 50px;
		height: 49px;
		margin-right: 12px;
	}
	p {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 14px;
		color: #333;
	}
	span {
		padding-left: 17px;
		width: 26px;
		line-height: 30px;
		background: url(../../images/top.png) no-repeat 0 -52px;
		font-size: 10px;
		color: #999;
	}
}
.page {
	position: absolute;
	right: 246px;
	bottom: 120px;;
	li {
		float: left;
		margin-left: 5px;
		margin-right: 5px;
	}
	a {
		display: inline-block;
		width: 20px;
		height: 20px;
		font-size: 14px;
		color: #666;
		text-align: center;
	}
	a:hover {
		color: #fff;
		background-color: #9dd8b1;
	}
	.active {
		color: #39a030;
	}
	.pre,
	.next  {
		cursor:pointer;
	}
	.pre {
		width: 30px;
		height: 20px;
		background: #9dd8b1 url(../../images/top.png) no-repeat -72px -49px;
	}
	.next {
		width: 30px;
		height: 20px;
		background: #9dd8b1 url(../../images/top.png) no-repeat -72px -69px;
	}
}