
.r_list{ width: 100%; padding-top: 55px; background: #fff; }
.row{ width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden; margin-bottom: 15px; }
.card_l{ position: relative; height: 420px;border-radius: 5px;}
.row01 .card_l{ float: left; width: 42%; margin-right: 15px; background:url('../img/recommend/01.jpg') no-repeat; background-size: cover; background-position: 50% }
.row02 .card_l{ display: inline-block; width: 42%; background-size: cover; }
.card_s_wrap{ display: inline-block; width: 55.5%;}
.row02 .card_s_wrap{ float: left; margin-right: 15px; }
.card_l .text_box{ padding: 10px; margin: 10px 10px 0; background: rgba(255,255,255,.7); }
.card_l > div{ position: absolute; bottom: 10px; }
.card_l h6{ font-size: 1.5rem; color:#0055b7; margin-bottom: 10px; }
.text_box p{ font-size: 14px; line-height: 1.6; }
.more_btn{ position: absolute; top: -20px; right: 10px; border: solid 1px #0055b7; display: inline-block; color: #fff; background: #0055b7; font-size: 13px; padding: 4px 5px; }
.more_btn:hover{ background: #fff; color:#0055b7;  border: solid 1px #0055b7; }

.card_s{ position: relative; padding: 10px; border: solid 1px #e6eef5; height: 203px; border-radius: 5px;  }
.card_s .more_btn{ position: absolute; top: 85%; right: 10px; padding: 0 5px; }
.card_s:first-child{ margin-bottom: 15px;}
.card_s h6{ font-size: 1.2rem; color:#0055b7; margin-bottom: 5px; }
.card_s .text_box p{ font-size: 14px; line-height: 1.6; }
.recom_photo{ display: inline-block; float: left; width: 180px; height: 180px; border-radius: 5px; background: url(../img/recommend/02.jpg) no-repeat; margin-right: 10px; background-position: 50% 50%; }
.p03{ background: url(../img/recommend/03.jpg) no-repeat; background-size: cover;}
.p04{ background: url(../img/recommend/04.jpg) no-repeat; background-size: cover;}
.p05{ background: url(../img/recommend/05.jpg) no-repeat; background-size: cover;}
.p06{ background: url(../img/recommend/06.jpg) no-repeat; background-size: cover;}
.row01 .p07{ background: url(../img/recommend/07.jpg) no-repeat; background-size: cover;}
.p08{ background: url(../img/recommend/08.jpg) no-repeat; background-size: cover;}
.p09{ background: url(../img/recommend/09.jpg) no-repeat; background-size: cover;}
.p10{ background: url(../img/recommend/10.jpg) no-repeat; background-size: cover;}
.p11{ background: url(../img/recommend/11.jpg) no-repeat; background-size: cover;}
.p12{ background: url(../img/recommend/12.jpg) no-repeat; background-size: cover;}
.row01 .p13{ background: url(../img/recommend/13.jpg) no-repeat; background-size: cover;}
.p14{ background: url(../img/recommend/14.jpg) no-repeat; background-size: cover;}
.p15{ background: url(../img/recommend/15.jpg) no-repeat; background-size: cover;}

@media only screen and (max-width:1000px) {
	.r_list{ padding:95px 2% 2%;}
}
@media only screen and (max-width: 959px) {
	.card_l{ height: 520px;}
	.card_s{ height: 252px;}
}
@media only screen and (max-width: 767px) {
	.row{ margin-bottom: 0; }
	.card_l,.row02 .card_s_wrap,.recom_photo{ float:none;}
	.card_s_wrap{ display: block; width: 100%; overflow: hidden;}
	.row .card_l{ width: 100%; margin: 0; height: 340px; margin-bottom: 15px; background-position: 0 30%;}
	.card_s{ width:49.47%; height: 400px;  display: inline-block; vertical-align: top; text-align: center;}
	.card_s .text_box{ margin: 10px 0; }
	.card_s .more_btn{ position: static; display: block; width: 50px; margin: 10px auto 0;}
}
@media only screen and (max-width: 639px) {
	.card_s{ width: 100%; min-height: 210px; height: auto; margin-bottom: 15px;}
}


