pfhwyigou/mobile/web/css/investhot/index.css

body{ background: #F3F4F9; max-width: 640px;margin: 0 auto;}
.HotInvest_nav{ width: 100%; position: fixed; left: 0px; top: 0px; padding: 10px 15px; z-index: 5;}
.HotInvest_nav a{display: block; width: 40px; height: 40px; }
.HotInvest_nav a.left_m{ float: left; background: url('/image/investhot/ico_hot8.png') no-repeat center; background-size:40px 40px;}
.HotInvest_nav a.right_m{ float: right; background: url('/image/investhot/ico_hot7.png')no-repeat center; background-size:40px 40px;}
.HotInvest_nav a img{ width: 100%; height: 100%;}
.HotInvest_nav2{ background: #fff;}
.HotInvest_nav2 a.left_m{ background: url('/image/investhot/ico_hot15.png') no-repeat center; background-size:25px 25px;}
.HotInvest_nav2 a.right_m{ background: url('/image/investhot/ico_hot16.png') no-repeat center; background-size:27px 27px;}
.HotInvest_slied{ width: 100%; height: 260px; position: relative;z-index: 1; overflow: hidden;}
.HotInvest_slied ul li{ width: 100%; height: 100%;}
.HotInvest_slied ul li img{ width: 100%; height: 100%;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom: 10%;
}
.swiper-pagination-bullet{
	background: #fff;
	opacity: 1;
	width: 8px;
	height: 8px;
}
.swiper-pagination-bullet-active{
	width: 20px;
	background: #DF3030;
	border-radius: 20px;
}
.HotInvestBox{ position: relative; top: -20px; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 0; z-index: 2}
.HotInvestBox_main{ width: 92%; margin: 0 auto;}
.navBox { position: relative;}
.main_nav{ padding: 0 10px;}
.main_nav a{ position: relative; z-index: 2; font-size: 1rem; color: #000; display: inline-block; width: 33.3%; float: left; text-align: center; padding: 10px 0; border-radius: 50px;}
.main_nav a.on{ background: #DF3030; color: #fff;}
.main_nav a:nth-child(1) i{ margin-left: 8px; display: inline-block; background: url('/image/investhot/ico_hot4.png') no-repeat center; width: 10px; height: 9px; background-size: 100% 100%; }
.main_nav a.on i{background: url('/image/investhot/ico_hot4_1.png') no-repeat center; width: 10px; height: 9px; background-size: 100% 100%;}
.main_city{ position: absolute; left: 12px; top: 30px; z-index: 1; background: #F3F4F9; width: 30%; text-align:center; padding-top: 20px;}
.main_city a{ display: block; font-size: 1rem; color: #010101; padding: 5px 0; margin: 5px 0;}
.main_city a.on{ background: #7A83AE; color: #fff; border-radius: 5px; padding: 5px 5px;}
.xiang{ width: 100%; height: 2px; margin-top: 10px;}
.xiang img{ width: 100%; height: 100%;}
.mainList{ margin-top: 40px;}

.mainList ul li{ width:49%; float: left; margin-bottom: 10px;}
.mainList ul li:nth-child(2n){ margin-left: 2%;}
.mainList ul li p.m_img{ position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);height:112px;}
.mainList ul li p.m_img span{ display: block; width: 100%;height:100%;}
.mainList ul li p.m_img span img{ width: 100%; height:100%;}
.mainList ul li p.m_img i{display: block; position: absolute; right: 0px; top: 0px; width: 30px; height: auto;}
.mainList ul li p.m_img i img{width: 100%; height: auto;}
.mainList ul li div.m_text{ padding: 5px 8px;}

.mainList ul li div.m_text p.title{ font-size: 1rem; color: #000; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mainList ul li div.m_text p.title_v{ font-size: 0.857rem; color: #DF3030; margin-top: 5px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mainList ul li div.m_text p.shijian{ font-size: 0.657rem; color: #696969; margin-top: 5px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gengduo{ background: url('/image/investhot/ico_hot12.png') no-repeat center; width: 60%; margin: 0 auto; background-size:100%; }
.gengduo a{ display: block; width: 40px; height: auto; margin: 0 auto;}
.gengduo a.on{
	transform:rotate(180deg);
	-ms-transform:rotate(180deg); 	/* IE 9 */
	-moz-transform:rotate(180deg); 	/* Firefox */
	-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
	-o-transform:rotate(180deg); 	/* Opera */
}

/*购房意向*/
.purposeBox{ width: 100%; border-radius: 10px; overflow: hidden; margin: 0 auto; margin-top: 30px; background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); }
.purposeBox_main{ width: 100%; height: auto;}
.purposeBox_main .topimg{ position: relative; height: 130px;}
.purposeBox_main .topimg p.img{ width: 100%; height: 100%;}
.purposeBox_main .topimg p.img img{ width: 100%; height: 100%;}
.purposeBox_main .toptext{ background: rgba(0,0,0,0.2); position: absolute; left: 0px; top: 0px; width: 100%; height:100%; text-align: center;}
.purposeBox_main .toptext p:nth-child(1){ margin-top:11.5%; font-size: 1.3rem; color: #fff; font-weight: 600;}
.purposeBox_main .toptext p:nth-child(2){ margin-top: 10px;}
.purposeBox_main .toptext p:nth-child(2) span{ display: inline-block; font-size: 0.95rem; color: #fff; background: #D7975A; border-radius: 50px; padding: 3px 15px;}
.purposeBox_main .bottomtext{ padding:10px 15px; font-size: 1rem; color: #D0A780;}
.purposeBox_main .bottomtext span{ color: #EE4343; display: inline-block; padding-left:3px; }

/*考察团*/
.delegation{ background: #fff; padding: 40px 0; position: relative; top: -10px;}
.delegation_main{ width: 92%; margin: 0 auto; }
.delegation_li{ width: 100%;}
.delegation_li ul li{ width: 100%; height: 110px;}
.delegation_li ul li+li{ margin-top: 15px;}
.delegation_li ul li .list_m{ width: 100%; height: 110px; position: relative; }
.delegation_li ul li .list_m p.img{ width: 100%; height: 100%;}
.delegation_li ul li .list_m p.img img{ width: 100%; height: 100%;}
.delegation_li ul li .list_m p.text{ position: absolute; left: 0px; background: rgba(0,0,0,0.2); width: 100%; height: 100%; top: 0px; text-align: center; line-height: 110px; font-size: 1.4rem; color: #fff; font-weight: bold;}

/*推荐楼盘*/
.tuijianBox{background: #fff; padding: 30px 0;}
.tuijianBox_main{ width: 92%; margin: 0 auto; overflow: hidden;}
.puictit span{display: block; float: left;}
.puictit span i{ display: inline-block; width: 26px; height: auto; position: relative; top: -4px; margin-right: 10px;}
.puictit span i img{ width: 100%; height: auto;}
.puictit span em{ display:inline-block;font-size: 1.4rem; color: #000;}
.puictit a{ display: block; float: right; font-size: 0.95rem; color:#0682D1; position: relative; top: 5px;}
.puictit a i{display: inline-block; width: 8px; height: auto; position: relative; top: -2px; margin-left: 5px;}
.puictit a i img{ width: 100%; height: auto;}
.tuijianBox_list{ padding: 10px 0;}
.tuijianBox_list ul li{ width:70%;}
.tuijianBox_list ul li a{ display: inline-block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); margin: 0 7px;}
.tuijianBox_list ul li .topimg{ margin-right: 10px; width: 100%; position: relative; height: 150px; }
.tuijianBox_list ul li .topimg p.img{ width: 100%; height: 100%;}
.tuijianBox_list ul li .topimg p.img img{ width: 100%; height: 100%;}
.tuijianBox_list ul li .topimg div.title{ text-align: center; position: absolute; left:  0px; height: 100%; width: 100%; top: 0px; background: rgba(0,0,0,0.2)}
.tuijianBox_list ul li .topimg div.title p:nth-child(1){ width: 90%; text-overflow: ellipsis;white-space: nowrap;overflow: hidden; margin:0 auto; margin-top: 23%;  font-size: 1.125rem; color: #fff; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.tuijianBox_list ul li .topimg div.title p:nth-child(2){ width: 90%; text-overflow: ellipsis;white-space: nowrap;overflow: hidden; margin:0 auto; font-size: 0.95rem; color: #fff; margin-top: 5px;}
.tuijianBox_list ul li .bottomtext{ padding: 10px; text-align: center;}
.tuijianBox_list ul li .bottomtext p.left em{ display: block; font-size: 1rem; color: #FF3131; font-weight: bold;}
.tuijianBox_list ul li .bottomtext p.left span{ display: block; font-size: 0.857rem; color: #717070; margin-top: 5px;}
.tuijianBox_list ul li .bottomtext p.left em i{display: inline-block; font-size: 0.7rem;}


/*海外热门新闻*/
.hotnews{background: #fff; padding: 30px 0; margin-top: 10px;}
.hotnews_box{ width: 92%; margin: 0 auto;}

.hotnews_list ul li{ border-top: 1px solid #F3F4F9; padding: 20px 0;}
.hotnews_list ul li .list_main p.left_img{ float: left; width: 35%; height: 80px; border-radius: 5px; overflow: hidden;}
.hotnews_list ul li .list_main p.left_img img{ width: 100%; height: 100%;}
.hotnews_list ul li .list_main div.right_text{ width:62%; float: right; height: 80px; position: relative; }
.hotnews_list ul li .list_main div.right_text p.title{ font-size: 1rem; color: #000; line-height: 25px;}
.hotnews_list ul li .list_main div.right_text p.shijian{ position: absolute; left: 0px; bottom: 5px; font-size: 0.8rem; color: #666;}
.news_gengduo{ margin-top: 30px; width: 100%; text-align: center;}
.news_gengduo a{ width: 100%; display: inline-block; font-size: 1rem; color: #AEAEAE; background: #F3F4F9; padding: 10px 0;}
.hotnews_list ul li:hover{ background: #F3F4F9;}

/*侧边栏*/
.sidebarBox{ position: fixed; right: -100%; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 10;} 
.sidebarBox_main{ width: 50%; background: #fff; height: 100%; float: right;}
.sidebarBox_list{ padding: 20px 20px;}
.sidebarBox_list a{ font-size: 1.058rem; color: #2E2E2E; display: block; padding: 10px 0;}