@charset "utf-8";

.lou_header {display:block;position:relative;left:0;right:0;top:0;margin:0 0 80px 0;;color:#fff;font-size:50px;font-weight:800;text-align:center;z-index:999;}
.lou_header a.btn_back {display:block;position:absolute;left:20px;top:0;}
.lou_header a.btn_back i {color:#fff;font-size:28px;}

.sec {padding:80px 20px;}
.sec h3 {display:block;margin:0 0 40px 0;color:#17393c;font-size:40px;font-weight:700;}
.sec .content {display:block;position:relative;width:100%;max-width:1180px;margin:0 auto;}

.sec00 {background:url(../img/lou_bg.png) no-repeat 50% 0;background-size:cover;}
.sec00 p {margin:0 0 180px 0;color:#fff;font-size:30px;text-align:center;line-height:140%;}
.sec00 p strong {font-weight:600;}

#search_wrap {position:relative;width:100%;max-width:1180px;margin:0 auto;}
#search_wrap .input {display:block;width:100%;height:70px;margin:0 0 30px 0;padding:0 40px;font-size:30px;font-weight:500;background:#fff;border:none;border-radius:10px;}
#search_wrap .btn_search {display:block;position:absolute;right:40px;top:0;width:40px;height:70px;background:none;border:none;}

.swiper_tags .swiper-slide {width:auto;}
.swiper_tags .swiper-slide a {display:block;padding:0 24px;color:#fff;font-size:16px;line-height:46px;border:solid 2px #fff;border-radius:40px;}

.sec01 ul {}
.sec01 ul:after {display:block;visibility:hidden;clear:both;content:""}
.sec01 ul li {display:block;float:left;width:calc(25% - 15px);margin:0 20px 0 0}
.sec01 ul li:last-child {margin:0;}
.sec01 ul li .box {display:block;position:relative;}
.sec01 ul li .box a {display:block;position:relative;}
.sec01 ul li .box a img {width:100%;height:auto;border-radius:20px;}
.sec01 ul li .box a label {display:block;position:absolute;left:0;right:0;bottom:0;width:100%;padding:20px 0;color:#fff;font-size:24px;font-weight:600;text-align:center;line-height:30px;}
.sec01 ul li .box a label strong {color:#7cd9e1;font-weight:700;}
.sec01 ul li:nth-child(2) a label ,
.sec01 ul li:nth-child(3) a label {line-height:60px;}

.sec02 {background:#ade5ea;box-shadow:inset 0 0 20px rgba(0,0,0,0.1);}
.sec02 h3 .upd {display:block;position:absolute;right:0;top:0;color:#fff;font-size:26px;font-weight:400;}
.sec02 a.more {display:block;position:relative;width:100%;margin:40px 0 0 0;color:#17393c;font-size:32px;font-weight:600;text-align:center;line-height:120px;background:#fff;border-radius:20px;}
.sec02 a.more .icon {display:none;position:absolute;right:20px;top:0;color:#293c3e;}
.sec02 a.more .icon i {font-size:20px;}


.swiper_popular_wrap {display:block;position:relative;}
.swiper_popular {display:block;position:relative;}
.swiper_popular .box {padding:40px;background:#fff;border-radius:20px;}
.swiper_popular .box .id {margin:0 0 40px 0;font-size:26px;font-weight:400;}
.swiper_popular .box .id .profile_img {display:inline-block;width:50px;height:50px;margin:0 12px 0 0;}
.swiper_popular .box .id .profile_img img {width:100%;height:auto;border-radius:50%;}
.swiper_popular .box a {display:block;}
.swiper_popular .box a.subj {margin:0 0 30px 0;font-size:30px;font-weight:700;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
.swiper_popular .box a.cont {min-height:270px;font-size:30px;line-height:140%;}
.swiper_popular .box a.btn_heart {display:block;position:absolute;left:40px;bottom:40px;color:#b7b7b7;font-size:26px}
.swiper_popular .box a.btn_heart i {color:#ba4640;font-size:32px;}

.swiper_popular_wrap .gradient {display:block;position:absolute;right:0;top:0;bottom:0;width:20%;z-index:6;
background: linear-gradient(to right,  rgba(173,229,234,0) 0%,rgba(173,229,234,1) 100%);
}
.swiper_popular_wrap .swiper-nav {display:block;position:absolute;left:0;right:0;top:50%;z-index:9;}
.swiper_popular_wrap .swiper-nav .swiper-btn-prev,
.swiper_popular_wrap .swiper-nav .swiper-btn-next {display:block;position:absolute;top:50%;width:60px;height:60px;text-align:center;background:#fff;border-radius:50%;}
.swiper_popular_wrap .swiper-nav .swiper-btn-prev i,
.swiper_popular_wrap .swiper-nav .swiper-btn-next i {color:#b7b7b7;font-size:32px;line-height:60px;}
.swiper_popular_wrap .swiper-nav .swiper-btn-prev {left:-100px;}
.swiper_popular_wrap .swiper-nav .swiper-btn-next {right:-100px}



.sec03 a.more {display:block;position:relative;width:100%;margin:0 0 40px 0;padding:0 60px;color:#fff;font-size:32px;font-weight:400;line-height:120px;background:#17393c;border-radius:20px;}
.sec03 a.more .icon {display:block;position:absolute;right:60px;top:0;}
.sec03 ul {padding:0 60px;}
.sec03 ul li {display:block;position:relative;margin:0 0 40px 0;}
.sec03 ul li:after {display:block;visibility:hidden;clear:both;content:""}
.sec03 ul li:last-child {margin:0;}
.sec03 ul li .icon {display:block;float:left;width:110px;}
.sec03 ul li .icon img {width:100%;height:auto;}
.sec03 ul li .cont {display:block;float:right;width:calc(100% - 150px);color:#b7b7b7;font-size:26px;font-weight:400;line-height:200%;}
.sec03 ul li .cont strong {display:block;color:#222;font-size:30px;font-weight:800;}
.sec03 ul li .cont .count {display:block;position:absolute;right:0;top:50%;margin:-33px 0 0 0;padding:0 40px;color:#17393c;font-size:30px;font-weight:600;text-align:center;line-height:66px;background:#e3f4f6;border-radius:50px;}



@media screen and (max-width:1180px) {
lou_header {margin:0 0 80px 0;font-size:36px;}

.swiper_popular_wrap .swiper-nav .swiper-btn-prev {left:-10px;}
.swiper_popular_wrap .swiper-nav .swiper-btn-next {right:-10px}
}



@media screen and (max-width:980px) {
.lou_header {position:fixed;margin:0;font-size:28px;line-height:60px;text-shadow:0 0 10px rgba(0,0,0,0.6);}
.lou_header a.btn_back {display:block;}

.sec {padding:60px 20px;}
.sec h3 {margin:0 0 30px 0;font-size:30px;}

.sec00 p {margin:0 0 120px 0;font-size:24px;}

#search_wrap .input {height:60px;margin:0 0 20px 0;padding:0 20px;font-size:24px;}
#search_wrap .btn_search {right:20px;width:40px;height:60px;}
#search_wrap .btn_search img {width:32px;height:auto;}

.swiper_tags .swiper-slide a {padding:0 18px;font-size:14px;line-height:36px;}

.sec01 ul li .box a label {font-size:18px;line-height:24px;}
.sec01 ul li:nth-child(2) a label ,
.sec01 ul li:nth-child(3) a label {line-height:48px;}


.sec02 h3 .upd {font-size:18px;}
.sec02 a.more {margin:30px 0 0 0;font-size:24px;line-height:80px;border-radius:10px;}
.sec02 a.more .icon {display:block;}

.swiper_popular .box {padding:30px;}
.swiper_popular .box .id {margin:0 0 30px 0;font-size:20px;}
.swiper_popular .box .id .profile_img {width:40px;height:40px;margin:0 8px 0 0;}
.swiper_popular .box a.subj {margin:0 0 20px 0;font-size:24px;}
.swiper_popular .box a.cont {min-height:240px;font-size:24px;}
.swiper_popular .box a.btn_heart {left:30px;bottom:30px;font-size:20px}
.swiper_popular .box a.btn_heart i {font-size:28px;}

.swiper_popular_wrap .swiper-nav .swiper-btn-prev,
.swiper_popular_wrap .swiper-nav .swiper-btn-next {width:40px;height:40px;}
.swiper_popular_wrap .swiper-nav .swiper-btn-prev i,
.swiper_popular_wrap .swiper-nav .swiper-btn-next i {font-size:24px;line-height:40px;}

.sec03 a.more {margin:0 0 30px 0;padding:0 40px;font-size:24px;line-height:80px;border-radius:10px;}
.sec03 a.more .icon {right:40px;top:0;}
.sec03 a.more .icon img {width:36px;height:auto;}

.sec03 ul {padding:0 40px;}
.sec03 ul li {margin:0 0 30px 0;}
.sec03 ul li .icon {width:90px;}
.sec03 ul li .cont {width:calc(100% - 120px);font-size:24px;}
.sec03 ul li .cont strong {font-size:24px;}
.sec03 ul li .cont .count {margin:-25px 0 0 0;padding:0 30px;font-size:24px;line-height:50px;}
}



@media screen and (max-width:768px) {
.sec h3 {margin:0 0 20px 0;font-size:24px;}

.sec00 p {margin:0 0 80px 0;font-size:18px;}

#search_wrap .input {height:50px;margin:0 0 20px 0;padding:0 20px;font-size:18px;}
#search_wrap .btn_search {right:20px;width:40px;height:50px;}
#search_wrap .btn_search img {width:32px;height:auto;}

.swiper_tags .swiper-slide a {padding:0 12px;font-size:14px;line-height:32px;}

.sec01 ul li {width:calc(50% - 10px);margin:0 20px 20px 0}
.sec01 ul li:nth-child(2n) {margin:0;}
.sec01 ul li:last-child {margin:0;}
.sec01 ul li .box a label {font-size:16px;line-height:24px;}
.sec01 ul li:nth-child(2) a label ,
.sec01 ul li:nth-child(3) a label {line-height:48px;}


.sec02 h3 .upd {font-size:16px;}
.sec02 a.more {margin:20px 0 0 0;font-size:20px;line-height:60px;}

.swiper_popular .box {padding:20px;}
.swiper_popular .box .id {margin:0 0 20px 0;font-size:18px;}
.swiper_popular .box .id .profile_img {width:30px;height:30px;margin:0 6px 0 0;}
.swiper_popular .box a.subj {margin:0 0 12px 0;font-size:20px;}
.swiper_popular .box a.cont {min-height:180px;font-size:20px;}
.swiper_popular .box a.btn_heart {left:20px;bottom:20px;font-size:16px}
.swiper_popular .box a.btn_heart i {font-size:18px;}

.swiper_popular_wrap .gradient {display:none;}

.sec03 a.more {margin:0 0 20px 0;padding:0 30px;font-size:20px;line-height:60px;}
.sec03 a.more .icon {right:20px;top:0;}
.sec03 a.more .icon img {width:32px;height:auto;}

.sec03 ul {padding:0 30px;}
.sec03 ul li {margin:0 0 20px 0;}
.sec03 ul li .icon {width:60px;}
.sec03 ul li .cont {width:calc(100% - 80px);font-size:20px;}
.sec03 ul li .cont strong {font-size:20px;}
.sec03 ul li .cont .count {margin:-20px 0 0 0;padding:0 20px;font-size:18px;line-height:40px;}
}



@media screen and (max-width:480px) {
.sec h3 {margin:0 0 20px 0;font-size:20px;}

.sec00 p {margin:0 0 60px 0;font-size:14px;}

#search_wrap .input {height:40px;margin:0 0 20px 0;padding:0 20px;font-size:14px;}
#search_wrap .btn_search {height:40px;}
#search_wrap .btn_search img {width:26px;height:auto;}

.swiper_tags .swiper-slide a {padding:0 8px;font-size:14px;line-height:28px;}


.sec02 h3 .upd {font-size:12px;}
.sec02 a.more {margin:20px 0 0 0;font-size:20px;line-height:50px;}

.swiper_popular .box .id {font-size:14px;}
.swiper_popular .box a.subj {font-size:16px;}
.swiper_popular .box a.cont {min-height:120px;font-size:14px;}
.swiper_popular .box a.btn_heart {font-size:14px}
.swiper_popular .box a.btn_heart i {font-size:18px;}

.sec03 a.more {padding:0 30px;font-size:16px;line-height:50px;}
.sec03 a.more .icon img {width:24px;height:auto;}

.sec03 ul {padding:0 20px;}
.sec03 ul li .icon {width:48px;}
.sec03 ul li .cont {width:calc(100% - 60px);font-size:14px;}
.sec03 ul li .cont strong {font-size:16px;}
.sec03 ul li .cont .count {margin:-15px 0 0 0;padding:0 12px;font-size:14px;line-height:30px;}
}