/* Scss Document */
@import "global";
.header_txt{
	position: absolute;
	top: 68px;
	right: -163px;
}

#key ul,#key li{
	height: 829px;
	width: 100%;
	overflow: hidden;
}
@for $i1 from 1 through 2{
	#key li:nth-child(#{$i1}) {
		background: url(../img/index/key_bg#{$i1}.jpg) no-repeat center / cover;
	}
}
#news{
	background: url(../img/index/news_bg2.jpg) no-repeat top center, url(../img/index/news_bg1.jpg) repeat-x top center;
	padding-top: 69px;
	height: 113px;
	h2{
		float: left;
		width: 126px;
		margin-left: 127px;
	}
	#feed{
		float: left;
		margin: 15px 0 0 83px;
		width: 470px;
		font-size: 15px;
		letter-spacing: 0;
		li{
			margin-bottom: 10px;
		}
		a{
			color: #000000;
			span{
				color: #5e3310;
				font-weight: bold;
				padding-right: 17px;
			}
		}
	}
}
#lead{
	background: url(../img/index/lead_bg.png) no-repeat center bottom / cover;
	padding-top: 112px;
	margin-bottom: 31px;
	h2{
		position: absolute;
		top: -36px;
		right: 0;
		width: 253px;
	}
	.lead_txt1{
		margin: 0 0 166px 43px;
	}
	.lead_txt2{
		width: 683px;
		height: 490px;
		font-size: 17px;
		line-height: 43px;
		letter-spacing: 1.4px;
		p{
			margin-left: 43px;
		}
	}
	.wrap{
		&:before{
			@include line_y(317px,-111px,-1px);
		}
		&:after{
			@include line_x(150%,161px,-1367px);
		}
	}
}
#reco{
	line-height: 40px;
	letter-spacing: 1.5px;
}
#reco1{
	background: url(../img/index/reco_bg1.png) no-repeat top center;
	padding-top: 185px;
	position: relative;
	&:before{
		@extend .content_pos;
		@include be_af(57.7%,730px,auto,auto);
		right: 0 !important;
		bottom: 72px !important;
		background: url(../img/index/reco_img1.png) no-repeat top center / cover;
	}
	.reco_txt1{
		float: left;
		width: 160px;
		height: 481px;
		margin: 125px 0 0 -240px;
	}
	h2{
		float: left;
		width: 298px;
		margin-left: -62px;
	}
	.reco_btn{
		position: absolute;
		width: 230px;
		left: 153px;
		bottom: 48px;
	}
	.wrap{
		&:before{
			@include line_y(430px,-161px,261px);
		}
		&:after{
			@include line_x(150%,-94px,-1188px);
		}
	}	
}
#reco2{
	background: url(../img/index/reco_bg1-02.png) no-repeat top center;
	padding-top: 46px;
	position: relative;
	.reco_img{
		position: absolute;
		@include be_af(56.25%,637px,auto,0);
		bottom: 92px !important;
		background: url(../img/index/reco_img2.jpg) no-repeat top center / cover;
	}
	.reco_img:before{
		@extend .content_pos;
		@include be_af(77.29%,328px,-47px,auto);
		right: -42px !important;
		background: url(../img/index/reco_deco1.jpg) repeat top center;
		z-index: -1;
	}
	.reco_img:after{
		@extend .content_pos;
		@include be_af(80.786%,259px,auto,0);
		bottom: -40px !important;
		background: url(../img/index/reco_deco2.jpg) repeat bottom left;
		z-index: -1;
	}
	h2{
		float: right;
		margin-right: -180px;
		width: 235px;
	}
	.reco_txt2{
		float: right;
		width: 197px;
		height: 532px;
		margin: 120px 33px 0 0;
	}
	.reco_btn{
		position: absolute;
		width: 239px;
		right: 243px;
		bottom: 35px;
	}
	.wrap{
		padding-top: 123px;
		&:before{
			@include line_y(560px,-26px,auto);
			right: -218px !important;
		}
		&:after{
			@include line_x(150%,30px,874px);
		}
	}
}
#reco3{
	background: url(../img/index/reco_bg1-03.png) no-repeat bottom center;
	margin-top: 102px;
	padding-bottom: 89px;
	.wrap{
		height: 969px;
		&:before{
			@include line_y(432px,auto,925px);
			bottom: 0 !important;
		}
		&:after{
			@include line_x(150%,auto,704px);
			bottom: 49px !important;
		}
	}
	position: relative;
	.reco_img{
		position: absolute;
		@include be_af(49.87%,537px,0,auto);
		right: 0 !important;
		background: url(../img/index/reco_img3.jpg) no-repeat top center / cover;
	}
	.reco_img:before{
		@extend .content_pos;
		@include be_af(57.644%,415px,-45px,-57px);
		background: url(../img/index/reco_deco3.png) repeat top center;
		z-index: -1;
	}
	.reco_img:after{
		@extend .content_pos;
		@include be_af(41.353%,60px,auto,auto);
		bottom: -60px !important;
		right: 0 !important;
		background: url(../img/index/reco_deco1.jpg) repeat top center;
		z-index: -1;
	}
	.reco_img2{
		position: absolute;
		width: 478px;
		top: -137px;
		left: -129px;
	}
	.reco_btn{
		position: absolute;
		width: 239px;
		left: 112px;
		bottom: 106px;
	}
	h2{
		position: absolute;
		right: 125px;
    	top: 374px;
		width: 249px;
	}
	.reco_txt2{
		position: absolute;
		width: 220px;
		height: 495px;
		right: 410px;
		bottom: 0;
	}
}
#counter{
	&:hover{
		opacity: 0.8;
		transition: 0.3s;
		cursor: pointer;
	}
	background: url(../img/index/counter_bg.jpg) no-repeat center / cover;
	.wrap{
		height: 741px;
		h2{
			position: absolute;
			left: 0;
			top: -63px;
			width: 190px;
		}
		#conterInner{
			position: absolute;
			right: 25px;
			top: 253px;
			width: 431px;
			.counter_txt{
				margin: 26px 0 0 27px;
				line-height: 40px;
				height: 182px;
			}
			.counter_btn{
				width: 394px;
				margin-left: 29px;
			}
		}
	}
}
@media (max-width: 1476px) {
	#reco1:before{
		height: 510px;
		width: 45.4%;
	}
	#reco1 .reco_txt1{
		margin: 124px 0 0 0;
		width: 171px;
	}
	#reco1 h2{
		margin-left: 18px;
	}
	#reco1 .reco_btn{
		left: 402px;
	}
	#reco1 .wrap:before{
		left: 511px;
	}
	#reco1 .wrap:after{
		left: -941px;
	}
	#reco2 .reco_img {
		width: 46.5%;
		height: 500px;
		bottom: 115px !important;
	}
	#reco2 .reco_img:before {
		top: -38px;
		right: -34px !important;
	}
	#reco2 .reco_img:after {
		bottom: -31px !important;
	}
	#reco2 h2{
		margin-right: -9px;
	}
	#reco2 .reco_btn{
		right: 413px;
	}
	#reco3 .reco_img2{
		top: -49px;
    	left: -93px;
		img{
			 width: 85.5%;
		}
	}
	#reco3 .reco_img{
		width: 52.95%;
		height: 452px;
		top: 66px;
	}
}