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


.plan{ width:1200px; margin:25px auto; overflow:hidden; position:relative; margin-bottom:20px;}
.plan-lm{ width:100%; float:left; margin-top:45px; margin-bottom:25px; height:30px;}
.plan-lm ul{ margin:auto; width:900px;}
.plan-lm ul li{ float:left; text-align:center; cursor:pointer; width:25%;}
.plan-lm ul li:nth-child(1){ transition:all 1s; background:url(../images/fa-1.png) top center no-repeat;}
.plan-lm ul li:nth-child(1):hover{ transition:all 1s; background:url(../images/fa-v1.png) top center no-repeat;}
.plan-lm ul li:nth-child(2){ transition:all 1s; background:url(../images/fa-2.png) top center no-repeat;}
.plan-lm ul li:nth-child(2):hover{ transition:all 1s; background:url(../images/fa-v2.png) top center no-repeat;}
.plan-lm ul li:nth-child(3){ transition:all 1s; background:url(../images/fa-3.png) top center no-repeat;}
.plan-lm ul li:nth-child(3):hover{ transition:all 1s; background:url(../images/fa-v3.png) top center no-repeat;}
.plan-lm ul li:nth-child(4){ transition:all 1s; background:url(../images/fa-4.png) top center no-repeat;}
.plan-lm ul li:nth-child(4):hover{ transition:all 1s; background:url(../images/fa-v4.png) top center no-repeat;}

.plan-lm ul li .plan-en{ display:block; transition:all 1s; font-size:12px; color:#666; text-transform:uppercase; padding-top:40%;}
.plan-lm ul li:hover .plan-en{ color:#1D2089;}
.plan-lm ul li:hover i{ transition:all 1s; color:#1D2089;}
.plan-lm ul li p{transition:all 1s; font-size:18px; color:#666;}
.plan-lm ul li:hover p{transition:all 1s; color:#1D2089;}


.plan-list{ width:100%; float:left;}
.plan-list .xclist{ width:1300px; float:left;}
.plan-list .xclist li{ width:350px !important; height:340px !important; float:left; margin-right:74px; background:#FFF; margin-bottom:50px;}
.plan-list .xclist li .plan-img{ overflow:hidden; float:left;}
.plan-list .xclist li .plan-img img{ transition:all 1s; width:100%;}
.plan-list .xclist li .plan-img:hover img{ transition:all 1s; transform: scale(1.2); }
.plan-list .xclist li h2{ width:90%; margin:auto; font-size:18px; color:#666; line-height:24px;text-align: center; margin-top:10px; margin-bottom:10px;overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.plan-list .xclist li p{ width:90%; margin:auto; font-size:14px;text-align: center;color:#999; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}

.plan-info{ float:left; width:100%; height:90px; overflow:hidden;}
.plan-link{ float:left; width:100%;}
.plan-link a{ color:#09F; font-size:14px; margin-left:5%;}



@media screen and (min-width:1480px) and (max-width:1579px) {
.plan-lm{ margin-top:10px;}	




}

@media screen and (min-width:1380px) and (max-width:1479px) {
.plan-lm{ margin-top:10px;}	
	
.plan-lm ul li .plan-en{ font-size:14px; padding-top:35%;}
.plan-lm ul li p{ font-size:16px;}
.plan-lm ul li:nth-child(1){ background-size:70px;}
.plan-lm ul li:nth-child(1):hover{ background-size:70px;}
.plan-lm ul li:nth-child(2){ background-size:70px;}
.plan-lm ul li:nth-child(2):hover{ background-size:70px;}
.plan-lm ul li:nth-child(3){ background-size:70px;}
.plan-lm ul li:nth-child(3):hover{ background-size:70px;}
.plan-lm ul li:nth-child(4){ background-size:70px;}
.plan-lm ul li:nth-child(4):hover{ background-size:70px;}


}


@media screen and (min-width:1280px) and (max-width:1379px) {

.plan-lm{ margin-top:10px;}	
	

.plan-lm ul li .plan-en{ font-size:14px; padding-top:35%;}
.plan-lm ul li p{ font-size:16px;}
.plan-lm ul li:nth-child(1){ background-size:70px;}
.plan-lm ul li:nth-child(1):hover{ background-size:70px;}
.plan-lm ul li:nth-child(2){ background-size:70px;}
.plan-lm ul li:nth-child(2):hover{ background-size:70px;}
.plan-lm ul li:nth-child(3){ background-size:70px;}
.plan-lm ul li:nth-child(3):hover{ background-size:70px;}
.plan-lm ul li:nth-child(4){ background-size:70px;}
.plan-lm ul li:nth-child(4):hover{ background-size:70px;}
	
}


@media screen and (min-width:1024px) and (max-width:1199px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:25%; float:left; margin-left:0; margin-bottom:1%;}
.plan-lm ul li .plan-en{ padding-top:38%;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width:31.5% !important; height:auto; margin-right:auto; margin-left:1.5%; overflow:hidden; margin-bottom:3%; padding-bottom:2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}
}
@media screen and (min-width:900px) and (max-width:1023px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:25%; float:left; margin-left:0; margin-bottom:1%;}
.plan-lm ul li .plan-en{ padding-top:42%;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width:48%; height:auto; margin-right:auto; margin-left:1.5%; overflow:hidden; margin-bottom:3%; padding-bottom:2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}
}

@media screen and (min-width:800px) and (max-width:899px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:25%; float:left; margin-left:0; margin-bottom:5%;}
.plan-lm ul li .plan-en{ padding-top:45%;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width:48%; height:auto; margin-right:auto; margin-left:1.5%; overflow:hidden; margin-bottom:5%; padding-bottom:2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}
}

@media screen and (min-width:750px) and (max-width:799px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:25%; float:left; margin-left:0; padding-top:0%; margin-bottom:2%;}
.plan-lm ul li .plan-en{ padding-top:50%;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width:48%; height:auto; margin-right:auto; margin-left:1.5%; overflow:hidden; margin-bottom:5%; padding-bottom:2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}


}

@media screen and (min-width:720px) and (max-width:749px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:25%; float:left; margin-left:0; padding-top:13%; margin-bottom:2%;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width:48%; height:auto; margin-right:auto; margin-left:1.5%; overflow:hidden; margin-bottom:5%; padding-bottom:2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}

}

@media screen and (min-width:640px) and (max-width:719px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:25%; float:left; margin-left:0; padding-top:0; margin-bottom:5%;}
.plan-lm ul li .plan-en{ padding-top:56%;}
.plan-lm ul li p{font-size:16px;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width:48%; height:auto; margin-right:auto; margin-left:1.5%; overflow:hidden; margin-bottom:5%; padding-bottom:2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}

}

@media screen and (min-width:415px) and (max-width:639px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:50%; float:left; margin-left:0; padding-top:0; margin-bottom:5%;}
.plan-lm ul li .plan-en{ padding-top:32%;}
.plan-lm ul li p{font-size:16px;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width: 90% !important;
    margin: 0 5%;
    height: auto;
    margin-right: auto;
    overflow: hidden;
    margin-bottom: 5%;
    padding-bottom: 2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}


}

@media screen and (min-width:376px) and (max-width:414px) {
.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:50%; float:left; margin-left:0; padding:0; margin-bottom:5%;}
.plan-lm ul li .plan-en{ padding-top:42%;}
.plan-lm ul li p{font-size:16px;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{width: 92% !important;
    height: auto;
    margin: 0 4%;
    margin-right: auto;
    overflow: hidden;
    margin-bottom: 5%;
    padding-bottom: 2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}

}

@media screen and (min-width:320px) and (max-width:375px) {

.plan{ width:100%;}
.plan-lm{ margin-top:1%; margin-bottom:2%; height:auto;}
.plan-lm ul{ width:100%;}
.plan-lm ul li{ width:50%; float:left; margin-left:0; padding:0;}
.plan-lm ul li .plan-en{ padding-top:60%;}
.plan-lm ul li p{font-size:16px;}
.plan-list{ width:98%; margin:auto; float:none;}
.plan-list .xclist{ width:100%;}
.plan-list .xclist li{ width: 92% !important;
    height: auto;
    margin: 0 4%;
    margin-right: auto;
    overflow: hidden;
    margin-bottom: 5%;
    padding-bottom: 2%;}
.plan-list .xclist li .plan-img{ width:100%;}
.plan-list .xclist li .plan-img img{ width:100%;}
.plan-list .xclist li h2{ font-size:16px;}
	

}