@charset "utf-8";
/* CSS Document */
.mainArea{padding:50px 0}
@media (max-width:1180px){.mainArea{padding:30px 0 0}
}
.mainArea .wrap{width:1400px}
@media (max-width:1440px){.mainArea .wrap{width:100%;padding:0 20px}
}

.mainArea .titleBox{padding:20px 0;text-align:center;margin-bottom:20px}
@media (max-width:1180px){.mainArea .titleBox{margin-bottom:0}
}
.mainArea .titleBox .title{font-size:30px;font-weight:600;color:#006934}
.mainArea .stepBox{
position:relative;
background-repeat:no-repeat;
background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 104, 53, 0.3)), to(rgba(0, 104, 53, 0.3)));
background-image:-webkit-linear-gradient(top, rgba(0, 104, 53, 0.3) 0%, rgba(0, 104, 53, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(0, 104, 53, 0.3) 0%, rgba(0, 104, 53, 0.3) 100%);
background-image:linear-gradient(to bottom, rgba(0, 104, 53, 0.3) 0%, rgba(0, 104, 53, 0.3) 100%);
background-size:calc(100% - 26px) 1px;
background-position:center calc(50% - 55px)}
@media (max-width:1180px){.mainArea .stepBox{background-image:none}
}
.mainArea .stepBox:after,.mainArea .stepBox:before{
content:"";
position:absolute;top:calc(50% - 55px);
left:0;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
width:13px;
height:13px;
border-radius:50%;
border:1px solid rgba(0, 104, 53, 0.3);
-webkit-box-sizing:border-box;
box-sizing:border-box}
@media (max-width:1180px){.mainArea .stepBox:after,.mainArea .stepBox:before{display:none}
}
.mainArea .stepBox:after{left:auto;right:0}
@media (max-width:1180px){
	.mainArea .stepList{
	display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-ms-flex-wrap:wrap;
flex-wrap:wrap}
.mainArea .stepList li{padding:10px}
}
.mainArea .item{position:relative;padding-bottom:110px}
@media (max-width:1180px){.mainArea .item{margin:0 auto;padding:10px 0;max-width:200px}
}
@media (min-width:1181px){
.mainArea .item:hover .Img:before{width:200px;height:200px;background-color:rgba(0, 104, 53, 0.5)}
.mainArea .item:hover .Img img{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);z-index:99;}
}
/*@media (min-width:1181px) and (max-width:1366px){.mainArea .item:hover .Img img{-webkit-transform:scale(0.27);-ms-transform:scale(0.27);transform:scale(0.27)}
}
@media (min-width:1181px) and (max-width:1280px){.mainArea .item:hover .Img img{-webkit-transform:scale(0.29);-ms-transform:scale(0.29);transform:scale(0.29)}
}*/
@media (min-width:1181px){
.mainArea .item:hover .Txt{bottom:35%}.mainArea .item:hover .Txt .stepNum{opacity:0}
.mainArea .item.current .Img img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.mainArea .item.current .Txt{bottom:0%}
.mainArea .item.current .Txt .stepNum{opacity:1}
.mainArea .item.current .Txt .title{opacity:1}
.mainArea .item.current:hover .Img img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.mainArea .item.current:hover .Txt{bottom:0%}.mainArea .item.current:hover .Txt .stepNum{opacity:1}
}

.mainArea .Img{position:relative;max-width:280px;max-height:280px;border-radius:50%;overflow:hidden}
.mainArea .Img:before{
content:"";
position:absolute;top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
border-radius:50%;
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease;
width:15px;
height:15px;
background-color:#006934}
@media (max-width:1180px){

.mainArea .Img:before{display:none}}

.mainArea .Img img{
display:block;
width:100%;
border-radius:50%;
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease;
-webkit-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0)}
@media (max-width:1180px){
	.mainArea .Img img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.mainArea .Txt{
pointer-events:none;
position:absolute;
bottom:15%;
left:0;
width:100%;
text-align:center;
z-index:1;
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;transition:all .4s ease}
@media (max-width:1180px){
	.mainArea .Txt{pointer-events:auto;padding:10px 0;position:relative;bottom:auto;-webkit-box-sizing:border-box;box-sizing:border-box}
}
.mainArea .Txt .stepNum{line-height:1;margin-bottom:20px;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.mainArea .Txt .num{font-size:40px;font-weight:400;color:#006934;margin-bottom:10px}

@media (max-width:840px){.mainArea .Txt .num{font-size:30px}}
.mainArea .Txt .word{font-size:15px;font-weight:400;color:#006934}
.mainArea .Txt .title{-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease;opacity:0}
@media (max-width:1180px){.mainArea .Txt .title{opacity:1}}

.mainArea .Txt .title a{display:inline-block;font-size:18px;font-weight:600;color:#353535;height:55px}

.mainArea .selectBox>div{
position:absolute;
top:calc(50% - 75px);
cursor:pointer;
width:40px;
height:40px;
border-radius:50%;
border:1px solid #006934;
background-color:rgba(255, 255, 255, 0.7);
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease}

@media (max-width:1180px){.mainArea .selectBox>div{top:calc(50% - 85px)}
}
.mainArea .selectBox>div:hover{
background-color:#99CA1F;
border-color:#99CA1F}
.mainArea .selectBox>div:hover:before{background-color:#fff}
.mainArea .selectBox>div:hover:after{border-color:#fff}
.mainArea .selectBox>div:before{
	content:"";
	position:absolute;
	top:50%;
	left:12px;
	width:16px;
	height:1px;
background-color:#006934;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.mainArea .selectBox>div:after{
content:"";
position:absolute;
top:20px;
width:6px;
height:6px;
border:1px solid #006934;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease}
.mainArea .selectBox .prev{left:calc(36% - 20px)}
@media (max-width:1180px){.mainArea .selectBox .prev{left:-40px}}
.mainArea .selectBox .prev:after{
left:12px;
border-bottom:none;
border-right:none;
-webkit-transform-origin:left top;
-ms-transform-origin:left top;
transform-origin:left top;-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.mainArea .selectBox .next{left:calc(64% - 20px)}

@media (max-width:1180px){
.mainArea .selectBox .next{left:auto;right:-40px}

}
.mainArea .selectBox .next:after{
right:12px;
border-bottom:none;
border-left:none;
-webkit-transform-origin:right top;
-ms-transform-origin:right top;
transform-origin:right top;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)}