/*
** Name: dgy.grid.css
** Date: 2020/01/10.
** Anthor: tonney@duoguyu.com.
** Version: 1.0.1
** Last: 2020/03/16 tonney.
*/

/* 
#283042  #51e0c1
*/
/* launchBannerGrid */
.launchBannerGrid{ display: flex; justify-content: space-between; margin-top: 100px; }
.launchBannerGrid .bannerGroup{ width: 900px; height: 310px; border-radius: 6px; position: relative; overflow: hidden; }
.launchBannerGrid .extendGroup{ width: 280px; height: 310px; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1); background: #fff; }
.launchBannerGrid .cover{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-image: linear-gradient(to top,rgba(0, 0, 0, .3) 0%,rgba(0, 0, 0, 0) 100%); overflow: hidden; }
.launchBannerGrid .bannerGroup .item{ height: 310px; overflow: hidden; position:relative; }
.launchBannerGrid .bannerGroup .banner{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.launchBannerGrid .bannerGroup .item::before{ content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(to top,rgba(0, 0, 0, .1) 0%,rgba(0, 0, 0, 0) 100%); overflow: hidden; }
.launchBannerGrid .bannerGroup .img{ display:block; width: 100%; height: 100%; overflow: hidden; object-fit:cover; }

.launchBannerGrid .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 10px; }
.launchBannerGrid .swiper-pagination-bullet { border-radius: 4px; width: 8px; height: 4px; background: #fff; opacity: .5; }
.launchBannerGrid .swiper-pagination-bullet-active { opacity: 1; background: #fff; width: 20px; }
.launchBannerGrid .swiper-button-next, .launchBannerGrid .swiper-button-prev { cursor: pointer; width: 50px; height: 50px; opacity: .9; margin-top: -25px; transition: all .2s ease; }
.launchBannerGrid .swiper-button-next { background: url('../images/icon_arr_right.png') no-repeat center; background-size: 20px; right: 0; }
.launchBannerGrid .swiper-button-prev { background: url('../images/icon_arr_left.png') no-repeat center; background-size: 20px; left: 0; }
.swiper-button-prev:after, .swiper-button-next:after { display: none; }

.launchBannerGrid.category{ margin-top: 0; }
.launchBannerGrid.category .bannerGroup{ height: 300px;}
.launchBannerGrid.category .bannerGroup .item{ height: 300px;}

/* indexBannerGrid */
.indexBannerGrid{ width: 100%; height: 420px; position: relative; overflow: hidden; }
.indexBannerGrid.index{ margin-top: -80px; }
.indexBannerGrid .bannerGroup{ height: 420px; position: relative; background-color: #eee; }
.indexBannerGrid .cover{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-image: linear-gradient(to top,rgba(0, 0, 0, .3) 0%,rgba(0, 0, 0, 0) 100%); overflow: hidden; }
.indexBannerGrid .bannerGroup .item{ height: 420px; overflow: hidden; }
.indexBannerGrid .bannerGroup .banner{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.indexBannerGrid .bannerGroup .banner::before{ content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(to top,rgba(0, 0, 0, .4) 0%,rgba(0, 0, 0, 0) 100%); overflow: hidden; }

.indexBannerGrid .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 20px; }
.indexBannerGrid .swiper-pagination-bullet { border-radius: 4px; width: 8px; height: 4px; background: #fff; opacity: .5; }
.indexBannerGrid .swiper-pagination-bullet-active { opacity: 1; background: #fff; width: 20px; }
.indexBannerGrid .swiper-button-next, .indexBannerGrid .swiper-button-prev { cursor: pointer; width: 50px; height: 50px; opacity: .9; margin-top: -25px; transition: all .2s ease; }
.indexBannerGrid .swiper-button-next { background: url('../images/icon_arr_right.png') no-repeat center; background-size: 20px; }
.indexBannerGrid .swiper-button-prev { background: url('../images/icon_arr_left.png') no-repeat center; background-size: 20px; }
.swiper-button-prev:after, .swiper-button-next:after { display: none; }

.indexBannerGrid .textWrapper{ width: 640px; color: #fff;  position: absolute; left: 50%; margin-left: -580px; bottom: 160px; z-index: 5; overflow: hidden; }
.indexBannerGrid .textWrapper .textBox{ display: table-cell; width: 100%; height: 240px; vertical-align: bottom; }
.indexBannerGrid .textWrapper h2{ font-size: 42px; line-height: 48px; letter-spacing: 1.2px; margin-bottom: 10px; font-weight: 400; }
.indexBannerGrid .textWrapper p{ font-size: 18px; line-height: 20px; margin-bottom: 20px; }

/* searchWrapper */
.searchWrapper{ width: 420px; overflow: hidden; position: absolute; left: 50%; margin-left: -580px; bottom: 60px; z-index: 5; }
.searchWrapper .searchBox{ background: #fff; border-radius: 4px; padding: 10px 20px 10px 40px; position: relative; overflow: hidden; }
.searchWrapper .searchBox .searchBtn{ position: absolute; left: 5px; top: 8px; background: none; height: 30px; width: 30px; line-height: 30px; text-align: center; font-size: 16px; color: #666; }
.searchWrapper .searchBox .searchInput{ display: block; width: 100%; height: 24px; line-height: 24px; font-size: 14px; color: #666; border: 0; background: none; }
.searchWrapper .searchBox .icondgy{ font-size: 20px; color: #999; }
.searchWrapper .tagBox{ font-size: 14px; height: 28px; line-height: 28px; margin-top: 10px; overflow: hidden; }
.searchWrapper .tagBox .tag{ margin-right: 20px; color: #fff; }
.searchWrapper .tagBox .tag:hover{ font-weight: 600; }

.searchWrapper.extend{ width: auto; position: relative; left: 0; margin-left: 0; bottom: auto; text-align: center; }
.searchWrapper.extend .searchBox{ background: #f2f2f2; border-radius: 22px; padding-left: 45px; }
.searchWrapper.extend .searchBox .searchInput{ font-size: 12px; }
.searchWrapper.extend .searchBox .searchBtn{ left: 10px; }
.searchWrapper.extend .tagBox{ font-size: 12px; }
.searchWrapper.extend .tagBox .tag{ color: #999; margin-left: 5px; margin-right: 5px; }

.searchWrapper.category .searchBox{ background: #e6e7e8; }
.searchWrapper.category .tagBox .tag{ color: #666; }

/* launchGrid */
.launchGrid{ margin: 20px auto; height: 480px; overflow: hidden; }
.launchGrid .leftGroup{ width: 860px; position: relative; float: left; overflow: hidden; }
.launchGrid .rightGroup{ width: 320px; position: relative; float: right; }

.launchGrid .newsWrap{ color: #FFF; width: 600px; height: 360px; position: relative;
    float: left; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(15,37,64,0.55)), to(rgba(15,37,64,0.85)));
    background-image: linear-gradient(-180deg, rgba(15,37,64,0.55) 0%, rgba(15,37,64,0.85) 100%);
    border-radius: 6px; }
.launchGrid .newsWrap.small{ width: 240px; height: 140px; float: right; margin-bottom: 20px; }

.articleWrapper{ margin-bottom:10px;}
.articleWrapper li{ padding-left:35px; position:relative; font-size:14px; color:#777; line-height:24px; padding-bottom:30px;}
.articleWrapper li:before{ content:""; display:block; position:absolute; width: 16px; height: 16px; border-radius: 50%; background: #2254f4; left: 4px; top: 4px; border: 4px solid #d5e8fb; z-index:5;}
.articleWrapper li:after{ content:""; display:block; position:absolute; width: 1px; height: 100%; background:#eee; left: 12px; top: 4px;}
.articleWrapper li .title{ font-size:15px; color:#454545;}
.articleWrapper .tipsInfo{margin-top:10px; padding:5px 15px; border-left:3px solid #eee; background:#f7f8f9; font-size:12px; color:#999;}
.articleWrapper .cfBlue, .articleWrapper li a{ color:#2254f4;}

.indexListGrid .catWrap{ margin-bottom:5px; font-size:12px; color:#2254f4;}
.indexListGrid .catWrap .catBox{ display:inline-block; background:#f6f6f6; border-radius:15px; height:30px; position:relative; padding-left:30px; padding-right:10px; line-height:30px; overflow:hidden;}
.indexListGrid .catWrap .catBox .i{ display:block; width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; position:absolute; left:5px; top:5px; overflow:hidden; background:#2254f4; color:#fff; font-size:14px;}

/*************************************************************/

/* 通用标题 */
.titleWrapper{ margin-bottom: 15px; margin-top: -10px; border-bottom: 1px solid #eee; overflow: hidden; display: flex; justify-content: space-between;  }
.titleWrapper .title{ line-height: 40px; color: #454545;}
.titleWrapper .title b{ display: inline-block; border-bottom: 4px solid #2254f4; }
.titleWrapper .title b>small{ padding-left: 10px; font-size: 12px; color: #999; }
.titleWrapper .more{ font-size: 12px; color: #999; line-height: 40px; }

.tagWrapper{ margin-bottom:5px; display: flex; }
.tagWrapper .tagBox{ display:inline-block; background:#f6f6f6; border-radius:14px; height:28px; font-size:12px; color:#2254f4; position:relative; padding-left:30px; padding-right:10px; line-height:28px; overflow:hidden;}
.tagWrapper .tagBox .i{ display:block; width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; position:absolute; left:5px; top:4px; overflow:hidden; background:#2254f4; color:#fff; font-size:14px;}

.tagWrapper .tagBox.badge{ display:flex; align-items:center; justify-content:space-between; padding-left:5px; padding-right:10px; }
.tagWrapper .tagBox.badge .iconfont{ color:#2254f4; font-size:20px; margin-right: 5px;}
.tagWrapper .tagBox.red{color:#f60;}
.tagWrapper .tagBox.red .i{background:#f60;}
.tagWrapper .tagBox.green{color:#04ac71;}
.tagWrapper .tagBox.green .i{background:#04ac71;}
.tagWrapper .tagBox.badge.red .iconfont{color:#f60;}
.tagWrapper .tagBox.badge.green .iconfont{color:#04ac71;}

.tagWrapper.inline{ display:inline-block; margin-bottom: 0; margin-right: 10px; }

/* flexBetweenMode */
.flexBetweenMode{ display: flex; justify-content: space-between; }
.flexBetweenMode .flexWrapper{ width: 280px; }
.flexBetweenMode .flexWrapper.mid{ width: 600px; }
.flexBetweenMode .flexWrapper.max{ width: 900px; }
.flexBetweenMode .flexWrapper.plr20{ padding-left: 20px; padding-right: 20px; }

/* widgetWrapper */
.widgetWrapper{ background: #fff; border-radius: 6px; padding: 20px; }
.widgetWrapper.p0{ padding: 0; }
.widgetWrapper.bgNone{ background: none; }

/* adImg, adBox */
.adImg, .adBox img{ display: block; width: 100%; height: auto; border-radius: 6px; }
.adImg.border, .adBox.border img{ border: 1px solid #eee; }
.adImg.shadow, .adBox.shadow img{ box-shadow: 0px 3px 18px rgba(0,0,0,0.08); }

/* layoutWrapper */
.layoutWrapper{}
.layoutWrapper .fullBox{ margin-bottom: 15px; position: relative; overflow: hidden; font-size: 12px; color: #999; line-height: 18px; }
.layoutWrapper .bannerImg{ display: block; width: 100%; height: 160px; object-fit: cover; margin-bottom: 10px; border-radius: 6px; }
.layoutWrapper .title{ font-size: 14px; line-height: 24px; margin-bottom: 10px; color: #454545; }
.layoutWrapper .title.ellipsis{ height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.layoutWrapper .fullBox.item{ padding-left: 90px; padding-top: 15px; height: 78px; border-top: 1px solid #eee; }
.layoutWrapper .fullBox.item .banner{ display: block; width: 80px; height: 60px; object-fit: cover; border-radius: 4px; position: absolute; left: 0; top: 15px; overflow: hidden; }
.layoutWrapper .fullBox.item .title{ height: 36px; font-size: 12px; line-height: 18px; margin-bottom: 5px; overflow: hidden; }
.layoutWrapper p{ font-size: 12px; color: #999; }

/* articleBox */
.articleBox{ margin-bottom: 10px; }
.articleBox li{ margin-bottom: 15px; padding-bottom: 15px; line-height: 18px; border-bottom: 1px solid #eee; font-size: 12px; color: #999; }
.articleBox li h4{ font-size: 14px; line-height: 24px; margin-bottom: 10px; color: #454545; /*height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;*/ }
.articleBox li p{ font-size: 12px; color: #999; }

/* memberBox */
.memberBox{ display: flex; flex-wrap: wrap; margin-top: 20px; }
.memberBox .item{ width: 80px; height: 100px; padding: 10px 0; text-align: center; font-size: 12px; line-height: 24px; color: #666; overflow: hidden; }
.memberBox .item .avatar{ display: block; width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 10px; overflow: hidden; }
.memberBox .item p{ height: 20px; font-size: 12px; line-height: 20px; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* flexItemWrapper */
.flexItemWrapper{ display: flex; flex-wrap: wrap; font-size: 12px; color: #999; }
.flexItemWrapper .itemBox{ width: 400px; padding: 10px; }

/* focusBox */
.focusBox{ position: relative; font-size: 12px; color: #999; }
.focusBox .topTag { width: 40px; height: 40px; border: 2px solid #fff; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2); color: #fff; text-align: center; line-height: 38px; border-radius: 50%; position: absolute; left: 15px; top: 0; z-index: 5; overflow: hidden; }
.focusBox .topTag .iconfont{ font-size: 24px; }
.focusBox .tagBox{ display:flex; justify-content:space-between; align-items:center; background:#f6f6f6; border-radius:14px; height:28px; font-size:12px; color:#2254f4; position:relative;  line-height:28px; margin-bottom:5px; overflow:hidden; width: 65px; padding-right: 10px; }
.focusBox .tagBox .iconfont{ font-size: 12px; line-height:20px; }
.focusBox .tagBox.badge .iconfont{ margin-left: 5px; font-size: 20px; line-height:20px; }
.focusBox .tagBox .i{ display:block; margin-left:5px; width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; overflow:hidden; background:#2254f4; color:#fff; font-size:14px;}
.focusBox .focus{ position: relative; height: 120px; border-radius: 6px; padding: 0 25px; margin-bottom: 10px; overflow: hidden; }
.focusBox .focus .title{ position: relative; z-index: 5; height: 120px; display: flex; align-items: center; line-height: 24px; color: #fff; font-size: 14px; }
.focusBox .focus .img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; position: absolute; left: 0; top: 0; }
.focusBox .focus:before { content: ''; background: -webkit-gradient(linear, right top, left top, from(#282290), to(#1E0635)); background: linear-gradient(to left, #282290, #1E0635); background-image: linear-gradient(-225deg, #1E0635 0%, #282290 78%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; z-index: 1; border-radius: 6px; }

/* richTextItem */
.richTextItem{ padding: 20px; background: #fff; border-radius: 6px; overflow: hidden; }
.richTextItem .article{ display: flex; justify-content: space-between; margin-top: 15px; font-size: 12px; color: #999; }
.richTextItem .article.detail{ display: block; }
.richTextItem .title{ font-size: 15px; line-height: 24px; margin-bottom: 15px; color: #454545; }
.richTextItem .title.ellipsis{ height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.richTextItem .focus { width: 140px; height: 90px; border-radius: 4px; object-fit: cover; overflow: hidden; }
.richTextItem .textBox{ width: 400px; height: 100px; line-height: 22px; font-size: 13px; color: #999; }
.richTextItem p{ font-size: 12px; color: #999; }

.richTextItem .tag { font-size: 12px; padding: 4px 10px; line-height: 12px; border-radius: 4px; color: #999; }
.richTextItem .tag:hover { background: #2254f4; color: #fff; }

.richTextItem .headWrap{ margin-bottom: 15px; }
.richTextItem .headWrap .text{ font-size: 15px; line-height: 24px; color: #454545; }

.richTextItem.list{ padding: 20px 0; border-bottom: 1px solid #eee; }
.richTextItem.list .textBox{ width: 440px; }

.richTextItem.border{ border: 1px solid #fff; }
.richTextItem.border:hover{ border-color: rgba(34, 84, 244,.5); }

/*imgTextItem*/
.imgTextWrapper{ display: flex; flex-wrap: wrap; margin: -15px -30px 10px -10px; }
.imgTextItem{ width: 314px; height: 280px; padding: 20px; background: #fff; overflow: hidden; }
.imgTextItem .article{ display: block; font-size: 12px; color: #999; }
.imgTextItem .title{ font-size: 13px; line-height: 20px; max-height: 40px; margin-bottom: 10px; color: #333; overflow: hidden; }
.imgTextItem .title.ellipsis{ height: 24px; text-overflow: ellipsis; white-space: nowrap; }
.imgTextItem .focusImgWrap{ position: relative; margin-bottom:20px; height: 140px; border-radius: 6px; overflow: hidden; }
.imgTextItem .tag{ position:absolute; right:10px; bottom:10px; height:26px; padding:0 10px; background:#fff; color:#333; font-size:12px; line-height:26px; border-radius:6px; overflow: hidden; }
.imgTextItem .focus { display:block; width: 100%; height: 200px; object-fit: cover; }
.imgTextItem .textBox{ height: 60px; line-height: 22px; font-size: 13px; color: #999; }
.imgTextItem p{ font-size: 12px; color: #999; }

.imgTextGrid{ margin-bottom:20px; padding-bottom:20px; overflow:hidden; }
.imgTextGrid ul{ margin:-15px -30px 10px -20px; display: flex; flex-wrap: wrap; overflow:hidden; }
.imgTextGrid li{ width:33%; padding:20px; border-left:1px solid #eee; border-bottom:1px solid #eee; }
.imgTextGrid .tophead{ height:160px; overflow:hidden; background:#f2f2f2; position:relative; border-radius: 6px; }
.imgTextGrid .tophead::before { content:""; display:block; position: absolute; top: 0; bottom: 0; width: 100%; background-image: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); background-size: 100%;}
.imgTextGrid .tag{ position:absolute; right:10px; bottom:10px; z-index:10; height:26px; padding:0 10px; background:#fff; color:#333; font-size:12px; line-height:26px; border-radius:6px; overflow: hidden; }
.imgTextGrid .tophead img{ display:block; width:100%; height:160px; object-fit: cover; overflow:hidden; }
.imgTextGrid h2{color:#333; font-size:14px; font-weight: bold; line-height:30px; height:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imgTextGrid .article{ background:#fff; color:#999; font-size:12px; height: 36px; margin-bottom:15px; overflow:hidden;}
.imgTextGrid .article p{ line-height:18px;}
.imgTextGrid .info{ display: flex; justify-content: space-between; margin-top:10px; line-height:20px; font-size: 12px; color: #999;}
.imgTextGrid li:hover h2{color:#2254f4;}

/* commentWrapper */
.commentWrapper{ margin-bottom:20px;}
.commentWrapper .commentForm{ margin-bottom:30px;}
.commentWrapper .commentTextarea{ padding:10px 15px; font-size:14px; color:#333; line-height:18px; background:#f6f6f6; border-radius:4px; border:1px solid #ddd; width:100%; min-height:80px; margin-bottom:10px;}
.commentWrapper .commentTextarea.reply{ background:#fff; margin-top:20px;}
.commentWrapper .btnBox{ text-align:right;}
.commentWrapper .submitBtn{ display: inline-block; width: 110px; height: 36px; cursor:pointer; line-height:36px; text-align:center; color:#fff; font-size:14px; border-radius:18px; background:#2254f4;}
.commentWrapper .submitBtn:hover{ opacity:.8;}

.commentWrapper .commentList{ padding-top: 20px;}
.commentWrapper .commentList .title{ border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; font-size: 14px; color: #666;}
.commentWrapper .commentList .tips{text-align: center; font-size: 14px; color: #999; padding: 30px;}
.commentWrapper .commentGroup{ padding: 15px; border-radius: 4px; background: #f6f6f6; overflow: hidden; }
.commentWrapper .commentGroup .detailText{ line-height:20px;}
.commentWrapper .commentGroup .adminText{ margin-top:10px; line-height:20px; word-break:break-all;}
.commentWrapper .itemUl{}
.commentWrapper .item{ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #eee;}
.commentWrapper .username{ font-size: 15px; color: #333; line-height: 24px; margin-bottom: 10px;}
.commentWrapper .username span{ font-size: 12px; color: #999; margin-left: 5px;}
.commentWrapper .username .reply{ float:right; font-size:12px; color:#999;}
.commentWrapper .otherInfo{ font-size: 12px; color: #666; line-height: 18px; margin-top: 10px; word-break: break-all; }
.commentWrapper .moreBtn{ display: block; margin: 0 auto; line-height: 20px; text-align: center; width: 220px; padding: 10px 0; color: #fff; cursor: pointer; font-weight: 700; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2); border-radius: 20px; }

/* articleMode */
.articleMode{}
.articleMode .leftGrid{ width: 900px; float: left; min-height: 500px; }
.articleMode .rightGrid{ width: 280px; float: right; }
.articleMode .articleDetail { margin-top: 20px; padding-top: 20px; border-right: 1px solid #eee; padding-right: 40px; }
.articleMode .articleDetail p { color: #4a4a4a; line-height: 24px; font-size: 14px; margin-bottom:10px; }
.articleMode .articleDetail a { color: #2254f4; }
.articleMode .articleDetail img{ max-width: 90%; }
.articleMode .articleDetail .detail { text-align: justify; }

.articleMode .tagWrapper { display:flex; justify-content:space-between; align-items:center; margin: 20px 0; padding-top: 20px; border-top: 1px solid #eee; margin-bottom: 50px; }
.articleMode .tagWrapper .tag { font-size: 12px; padding: 4px 10px; line-height: 12px; border-radius: 4px; background: #f4f4f4; color: #999; margin-right: 5px; }

.articleMode .tagWrapper.top { text-align: right; padding-top: 0; border-top: 0; margin-bottom: 0; }
.articleMode .tagWrapper.top .tag { margin-left: 5px; margin-right: 0; }

.articleMode .favoriteBtn { display: block; width: 80px; height: 30px; cursor: pointer; line-height: 30px; text-align: center; color: #999; font-size: 12px; border-radius: 15px; background: #f4f4f4; }

.fullPitchGroup { height: 420px; position: relative; width: 100%; text-align: left; }
.fullPitchGroup .textGrid { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
.fullPitchGroup .textBox { position: absolute; left: 0; bottom: 40px; z-index: 10; width: 100%; font-size: 14px; color: #fff; line-height: 28px; vertical-align: bottom; overflow: hidden; }
.fullPitchGroup .textBox h1 { font-size: 32px; color: #fff; line-height: 42px; font-weight: 400; margin-bottom: 10px; vertical-align: bottom; }
.fullPitchGroup .moreInfo { font-size: 12px; color: #fff; opacity: .8; line-height: 20px; }

.articleMode .textWrapper { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; overflow: hidden; }
.articleMode .textWrapper h1 { font-size: 32px; color: #333; line-height: 36px; margin-bottom: 10px; }
.articleMode .textWrapper p { margin-bottom: 5px; color: #454545; }
.articleMode .textWrapper .moreInfo { font-size: 12px; color: #999; line-height: 28px; }

.articleMode.listTitle .textWrapper { margin-bottom: 0; border-bottom: 0; padding: 0 25px; }
.articleMode.listTitle .textWrapper p { font-size: 12px; color: #999; }
.articleMode.listTitle .textWrapper .moreInfo { font-size: 12px; line-height: 18px; text-align: justify; }

/* commentGrid */
.commentGrid{ margin-bottom:20px;}
.commentGrid .commentForm{ margin-bottom:30px;}
.commentGrid .commentTextarea{ padding:10px 15px; font-size:14px; color:#333; line-height:18px; background:#f6f6f6; border-radius:4px; border:1px solid #ddd; width:100%; min-height:80px; margin-bottom:10px;}
.commentGrid .commentTextarea.reply{ background:#fff; margin-top:20px;}
.commentGrid .btnBox{ text-align:right;}
.commentGrid .submitBtn{ display: inline-block; width:140px; height:36px; cursor:pointer; line-height:36px; text-align:center; color:#fff; font-size:14px; border-radius:18px; background:#2254f4; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2); }
.commentGrid .submitBtn:hover{ opacity:.8;}

.commentGrid .commentList{ padding-top:20px;}
.commentGrid .commentList .title{ border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:20px; font-size:14px; color:#666;}
.commentGrid .commentList .tips{ text-align:center; font-size:14px; color:#999; padding:30px;}
.commentGrid .commentGroup{ padding:15px 20px; border-radius: 4px; background: #f6f6f6; overflow: hidden; }
.commentGrid .commentGroup .detailText{ line-height:20px;}
.commentGrid .commentGroup .adminText{ margin-top:10px; line-height:20px; word-break:break-all;}
.commentGrid .itemUl{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.commentGrid .item{ width: 400px; margin-bottom:20px; position: relative; padding-left: 60px; min-height: 60px; overflow: hidden; }
.commentGrid .avatar{ display:block; width: 40px; height: 40px; object-fit: cover; position: absolute; left: 0; top: 0; border-radius: 50%; }
.commentGrid .username{ font-size:15px; color:#333; line-height:24px; margin-bottom: 5px; }
.commentGrid .username span{ font-size:12px; color:#999; margin-left:5px;}
.commentGrid .username .reply{ float:right; font-size:12px; color:#999;}

.commentGrid.full .item{ width: 100%; padding-left: 0; }

.original_comment{ display: block; }

.commentGrid .moreBtn{ display:block; height:40px; cursor:pointer; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #2254f4; color:#2254f4; font-size:14px; text-align:center; line-height:38px; transition:all .2s ease;}
.commentGrid .moreBtn:hover{ background:#2254f4; color:#fff; opacity:.9; transition:all .2s ease;}

/* fixedListWrapper */
.fixedListWrapper{ width: 260px; position: fixed; left: 50%; top: 120px; margin-left: -600px; z-index: 10; }

/* about */
.myInfoGrid{ padding:25px; position:relative; border:1px solid #eee; border-radius:4px; box-shadow: 0px 3px 18px rgba(0,0,0,0.08); overflow:hidden; line-height:24px; font-size:12px; color:#999;}
.myInfoGrid.user{ width:230px; margin:0 auto; }
.myInfoGrid .avatar{display:block; width:60px; height:60px; border-radius:50%; margin:30px auto; background:url('../images/avatar_tonney.jpg') no-repeat center; background-size:60px; overflow:hidden;}
.myInfoGrid .userName{ font-size:14px; color:#333; text-align:center; line-height:24px; margin-bottom:10px;}
.myInfoGrid .detail{ font-size:13px; color:#999; line-height:20px; padding-top:25px; margin-top:25px; border-top:1px solid #eee; margin-bottom:20px;}
.myInfoGrid .detail.down{ border-top:0;}
.myInfoGrid .detail p{ margin-bottom:10px; text-indent:2em;}
.myInfoGrid .detail p.title{ text-indent:0; color:#f30;}
.myInfoGrid .cfBlue, .myInfoGrid .detail a{ color:#2254f4;}

.myInfoGrid .itemTitle{ font-size:14px; color:#333; line-height:16px; margin-bottom:15px;}
.myInfoGrid .itemTitle p{ font-size:12px; color:#999; line-height:14px;}
.myInfoGrid .itemTitle h6{ font-size:13px; line-height:16px;}
.myInfoGrid .itemTitle.float{ border-bottom:1px dotted #ddd; padding-bottom:10px; margin-bottom:10px;}
.myInfoGrid .itemTitle.float h6{float:right; line-height:30px;}
.myInfoGrid .itemTitle.float p{float:left; line-height:30px;}
.myInfoGrid .downloadBtn{ padding:0 20px; background:#2254f4; color:#fff !important; border-radius:4px; display:inline-block; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2); border-radius: 20px;}
.myInfoGrid .thumbBox{margin-bottom:10px;}
.myInfoGrid .thumbBox img{ width:100%; height:auto; display:block; border-radius:4px;}

.myInfoGrid .itemTitle.w2{ float:left; width:50%; height:50px; padding:10px; }

/* newArticleGrid */
.newArticleGrid{ margin:-5px -5px 35px;}
.newArticleGrid .itemLi{ width:33.33333%; float:left; padding:5px;}
.newArticleGrid .content{ display:block; height:100px; border:1px solid #eee; padding:25px 20px 25px 95px; position:relative; font-size:12px; color:#999; line-height:1.8; border-radius:5px; background:#fff; overflow:hidden; -webkit-transition:all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition:all 0.6s cubic-bezier(0.19, 1, 0.22, 1); will-change:transform;}
.newArticleGrid .img{ display:block; width:60px; height:60px; position:absolute; left:20px; top:20px; border-radius:4px; background:#f6f6f6; overflow:hidden;}
.newArticleGrid .catName{ display:block; width:60px; height:60px; text-align:center; line-height:60px; padding:0 10px; color:#fff; font-size:13px; font-weight:bold; position:absolute; left:20px; top:20px; border-radius:50%; background:#f6f6f6; overflow:hidden;}
.newArticleGrid .catName.green{ background: linear-gradient(-125deg,#57bdbf,#2f9de2);}
.newArticleGrid .catName.red{ background: linear-gradient(-128deg,#e14062,#a13582);}
.newArticleGrid .catName.grayBlue{ background: linear-gradient(-113deg,#81328d,#592984);}
.newArticleGrid .catName.yellow{ background: linear-gradient(-141deg,#ffc000,#ea942e);}

.newArticleGrid .itemLi h2{ line-height:26px; color:#454545; font-size:15px; height:26px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.newArticleGrid .content:hover { z-index:9; -webkit-transition-delay:.15s; transition-delay:.15s; -webkit-transform:translate3d(0, -7px, 0); transform:ranslate3d(0, -7px, 0); -webkit-box-shadow:0 20px 60px rgba(61, 79, 127, 0.17); box-shadow:0 20px 60px rgba(61, 79, 127, 0.17);}
.newArticleGrid .content:hover h2{ color:#2254f4;}

.newArticleGrid.link{ margin-bottom: 20px; }
.newArticleGrid.link .itemLi{ /*width:100%; float: none;*/ }
.newArticleGrid.web .itemLi{ width:33.33333%;}
.newArticleGrid.link .itemLi h2{ margin-bottom:0; font-size:14px; }
.newArticleGrid.link .itemLi p{ line-height:21px; height:21px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.newArticleGrid.link .content{ height: 70px; padding: 14px 10px 10px 65px; }
.newArticleGrid.link .img{ width:40px; height:40px; border-radius:50%; left:15px; top:14px; }
.newArticleGrid.link .itemLi h2 { line-height: 20px; font-size: 13px; height: 20px; }

.newArticleGrid.list .content{ height:170px; }
.newArticleGrid.list .btmBox{ height:80px; position:absolute; left:0; right:0; bottom:0; padding:15px 20px; border-top:1px dotted #eee;}
.newArticleGrid.list .itemLi p{ font-size:13px; color:#777;}

.thankGroup{ color:#777;}
.thankGroup .cfBlue, .thankGroup a{ color:#2254f4;}

/* layui 代码修饰 */
.articleDetailGroup pre { margin:10px 0; border:0; color:#454545; font-size:13px; border-left-width:0; background-color:#f8f8f8; white-space:pre-wrap; word-wrap:break-word; word-break:break-all;}
.articleDetailGroup pre .layui-code-ol{ padding:20px; border-left:3px solid #e7e9ed;}
.articleDetailGroup pre .layui-code-ol li { line-height:16px; padding:2px 0; border:0; background-color:#f8f8f8; margin-left:0; list-style-type:none;}
.articleDetailGroup pre .layui-code-h3 { display:none; }

.updateGroup{ margin-bottom:10px;}
.updateGroup li{ padding-left:35px; position:relative; font-size:14px; color:#777; line-height:24px; padding-bottom:15px;}
.updateGroup li:before{ content:""; display:block; position:absolute; width: 16px; height: 16px; border-radius: 50%; background: #2254f4; left: 4px; top: 4px; border: 4px solid #d5e8fb; z-index:5;}
.updateGroup li:after{ content:""; display:block; position:absolute; width: 1px; height: 100%; background:#eee; left: 12px; top: 4px;}
.updateGroup li .title{ font-size:15px; color:#454545;}
.updateGroup .tipsInfo{margin-top:10px; padding:5px 15px; border-left:3px solid #eee; background:#f7f8f9; font-size:12px; color:#999;}
.updateGroup .cfBlue, .updateGroup li a{ color:#2254f4;}
.updateGroup .updateLog{ font-size:13px; padding: 10px 15px; }

/*guestBookGroup*/
.guestBookGroup{ margin-bottom:40px;}
.guestBookGroup .inputLabel{ margin-bottom:15px; position:relative; border:1px solid #ddd; background:#fff; font-size:12px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; overflow:hidden; color:#333;}
.guestBookGroup .inputBlock, .guestBookGroup .textareaBlock{ display:block; width:100%; height:40px; line-height:20px; padding:10px 15px; background:none; border:0;}
.guestBookGroup .textareaBlock{ height:90px;}
.guestBookGroup .inputLabel.qrcode{ padding-right:100px; width:660px; float:left;}
.guestBookGroup .inputLabel.qrcode:after{ content:''; display:block; height:40px; width:1px; background:#ddd; position:absolute; right:100px; top:0;}
.guestBookGroup .inputLabel.qrcode .qrcode{ display:block; cursor:pointer; width:80px; height:25px; border:0; position:absolute; top:8px; right:10px; overflow:hidden;}
.guestBookGroup .submitBtn{ display:block; width:100%; height:40px; cursor:pointer; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background: #2254f4; color:#fff; font-size:14px; text-align:center; line-height:40px; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2); }

/* articleModeGrid */
.articleModeGrid { margin: 0 -5px; display: flex; flex-wrap: wrap; }
.articleModeGrid .itemLi { width:25%; padding:5px; position:relative; transition:all .2s ease; }
.articleModeGrid .content{ display:block; height:265px; background:#fff; border:1px solid #eee; font-size:12px; line-height:1.5; cursor:pointer; color:#999; border-radius: 4px; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform; overflow: hidden; position:relative;}

.articleModeGrid .articleGroup{ padding:30px 30px 50px 30px;}
.articleModeGrid .imgBox { position:relative; height:auto; overflow:hidden; margin-bottom:20px; }
.articleModeGrid .imgBox.full { display:block; height:0; margin-bottom:0; transition:all .2s ease;}
.articleModeGrid .imgBox .img { display:block; width:100%; /*height:100%;*/ border:0; }
.articleModeGrid .itemLi h2 { font-size:15px; color:#454545; line-height:20px; max-height:40px; overflow:hidden; }
.articleModeGrid .detail { height:80px; margin-top:20px; text-align:justify; overflow:hidden; margin-bottom:10px; position:relative; }
.articleModeGrid .btmInfo { display:flex; line-height:30px; font-size:12px; color:#999; padding:0 30px; position:absolute; left:0; right:0; bottom:25px;}
.articleModeGrid .btmInfo .strong { font-size:13px; color:#454545; }
.articleModeGrid .btmInfo .text { flex:1; text-align:right; }
.articleModeGrid .topText{ margin-bottom:5px;}

.articleModeGrid.on .articleGroup{ padding:0 20px 50px;}
.articleModeGrid.on .content{ height:310px;}
.articleModeGrid.on .imgBox{ height:180px; margin-bottom:20px; transition:all .2s ease;}
.articleModeGrid.on .itemLi h2 { max-height:60px; height:60px; font-size:14px; line-height:18px; border-bottom:1px dotted #eee;}
.articleModeGrid.on .topText, .articleModeGrid.on .itemLi .detail{ display:none;}
.articleModeGrid.on .btmInfo{ bottom:15px; padding:0 20px;}
.articleModeGrid.on .btmInfo .strong { font-size:12px; color:#999;}

.articleModeGrid.w3 .itemLi{ width:33.33333%;} 
.articleModeGrid.w3 .imgBox { height:auto; }
.articleModeGrid.w3 .content{ height:auto;}
.articleModeGrid.w3 .articleGroup{ padding-bottom:55px;}
.articleModeGrid.w3 .btmInfo{ bottom:20px; justify-content:space-between; align-items:center;}
.articleModeGrid.w3 .btmInfo .strong { font-size:13px; color:#454545; }
.articleModeGrid .btmInfo .downloadBtn{display: block; line-height: 24px; height: 24px; text-align: center; font-size:12px; width:90px; color: #fff; cursor: pointer; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2); border-radius: 12px;}

.articleModeGrid .content:hover { z-index:9; background:#FFF; -webkit-transition-delay:.15s; transition-delay:.15s; -webkit-transform:translate3d(0, -7px, 0); transform:ranslate3d(0, -7px, 0); -webkit-box-shadow:0 20px 60px rgba(61, 79, 127, 0.17); box-shadow:0 20px 60px rgba(61, 79, 127, 0.17);}

/* zanGroup */
.zanGroup{ padding:30px; text-align:center; overflow:hidden; margin-top:40px;}
.zanGroup .zanBtn{ display:block; cursor:pointer; width:70px; height:70px; border-radius:50%; text-align:center; font-size:26px; color:#fff; background:#409eff; margin:0 auto 5px; overflow:hidden; background: linear-gradient(270deg,#2254f4,#406dff); box-shadow: 0 12px 30px 0 rgba(34,84,244,.2);}
.zanGroup .zanBtn .iconfont{ font-size:26px; color:#fff; line-height:68px;}
.zanGroup p{ line-height:24px; color:#999; font-size:18px;}

/* lowBrowserGroup */
.lowBrowserGroup{ position:fixed; left:0; top:0; width:100%; height:100%; min-width:600px; min-height:600px; text-align:center; font-size:12px; color:#999; line-height:18px; background:#fff; z-index:1024; overflow:hidden; }
.lowBrowserGroup .lowBrowserWrapper{ width: 600px; margin: 10% auto 0; overflow: hidden;}
.lowBrowserGroup .title{ font-size:16px; color:#333; line-height:24px; }
.lowBrowserGroup .detail{ font-size:14px; color:#666; line-height:24px; }
.lowBrowserGroup .browserWrap{ text-align:center; width: 600px; margin:20px auto 40px; overflow:hidden; }
.lowBrowserGroup .item{ float:left; width:25%; height:120px; overflow:hidden; }
.lowBrowserGroup .img{ display:block; width:80px; height:80px; background:url('../images/browser-chrome.jpg') no-repeat; margin:0 auto 10px; }
.lowBrowserGroup .img.chrome{ background:url('../images/browser-chrome.jpg') no-repeat; }
.lowBrowserGroup .img.firefox{ background:url('../images/browser-firefox.jpg') no-repeat; }
.lowBrowserGroup .img.i360{ background:url('../images/browser-360.jpg') no-repeat; }
.lowBrowserGroup .img.qq{ background:url('../images/browser-qq.jpg') no-repeat; }
.lowBrowserGroup .wechatImg{ width:280px; margin: 20px auto; overflow: hidden;}
.lowBrowserGroup .wechatImg img{ display:block; width:100%; height:auto; overflow: hidden;}

/* update */
.menuBtn{ display:none; position: absolute; left:-30px; bottom: 60px; width:60px; height:60px; text-align:center; line-height:60px; background:#fff; border-radius:50%; overflow: hidden; box-shadow: 0 1px 6px #ddd; }
.menuBtn .icondgy{ font-size: 24px; color:#333; }
.navGrid.layout .menuBtn{ display: block;}
.layoutGroup.layout, .layoutView{ filter: blur(2px); overflow:hidden; }
.layoutLocked{ height:100vh; overflow:hidden; }
.layoutDisplay, .layoutShow, .layoutDownLoad{ display:none; }
.layoutNone{ display:block; }
.layoutDownLoad{ margin-top: 40px; }
.layoutW3{ width:30%; }
.layoutW7{ width:70%; }
.layoutFullPitch{ margin-top: -80px;}
.layoutLogin{ display: flex; justify-content:space-between; align-items:center; padding-right:24%; padding-top: 10px; border-top: 1px solid #eee; margin-top: 20px;}
.layoutLogin .name{ line-height: 40px; color: #444950; font-size: 13px; padding-left: 30px;}
.layoutLogin .avatar{ display:block; width:20px; height:20px; border-radius:50%;}

@media screen and (max-width: 950px)  {
    .container{ width:100%; padding:0 10px; }
    .launchBannerGrid{ display:block;}
    .launchBannerGrid .bannerGroup, .launchBannerGrid.category .bannerGroup{ width:100%; height:auto;}
    .launchBannerGrid.category .bannerGroup{ border-radius:6px;}
    .launchBannerGrid .bannerGroup.swiper-wrapper{ height:auto;}
    .launchBannerGrid .bannerGroup .item{ height:auto;}
    .launchBannerGrid .extendGroup{ display:none;}
    .flexBetweenMode .flexWrapper.right, .flexWrapper.layout{ display:none;}
    .flexBetweenMode .flexWrapper.mid { width: 100%; margin-left: 20px; }
    .flexBetweenMode .flexWrapper.max { width: 100%; padding-right: 10px; }
    .richTextItem .textBox, .richTextItem.list .textBox { width: auto; margin-left: 20px; }
    .footerGrid{ padding: 0 20px;}
    .footerGrid .menuWrap, .footerGrid .midWrapper{ width:100%;}
    .imgTextGrid li { width: 33%; }
    .articleMode .leftGrid { width: 100%; float: none; padding: 0 20px;}
    .articleMode .rightGrid { display:none;}
    .fullPitchGroup .textGrid{ width:100%;}
    .fullPitchGroup .textBox { left: 20px; width: 80%; }
    .articleMode .articleDetail {border-right: 0; padding-right: 0; }
    .layoutDownLoad, .layoutDisplay{ display:block;}
    .myInfoGrid .thumbBox { border-radius: 6px; height: 200px; overflow: hidden; }
    .myInfoGrid .thumbBox img { max-width: 100%; }
    .flexBetweenMode.about{ display:block;}
    .fixedListWrapper.layoutHide, .flexBetweenMode .flexWrapper.layoutHide{ display:none;}
    .flexBetweenMode.about .myInfoGrid {border: 0; box-shadow: none; padding: 10px; }
    .flexBetweenMode.about .myInfoGrid .detail { padding-top: 15px; margin-top: 10px; }
}

@media screen and (max-width: 768px) {
    html { font-size: 10px }
    body{ min-width:320px;}
    .layoutNone{ display:none;}
    .layoutShow{ display:block;}
    .container{ width:100%; padding:0 10px; }
    .container.layoutList{ padding:0 20px; margin-top:0; }
    .container.resource{ margin-top:-10px; }
    .container.resource .flexWrapper.max, .container.about .flexWrapper.max{ padding-right:0; }
    .container.about{ margin-top: 0; }
    .container.about .widgetWrapper { padding: 10px; }
    .launchBannerGrid{ margin-top:10px; display:block;}
    .launchBannerGrid .bannerGroup{ width:100%; height:auto;}
    .launchBannerGrid .bannerGroup.swiper-wrapper{ height:auto;}
    .launchBannerGrid .bannerGroup .item, .launchBannerGrid.category .bannerGroup .item { height:auto;}
    .launchBannerGrid .extendGroup{ display:none; }
    .richTextItem .article{ display: block;}
    .richTextItem .focus { width: 100%; height: 120px; }
    .richTextItem .textBox { margin-left: 0; height:auto; }
    .flexBetweenMode .flexWrapper.left, .flexBetweenMode .flexWrapper.right{ display:none;}
    .flexBetweenMode .flexWrapper.mid { margin-left: 0; }
    .fixedWidget{ width: 50px; border-radius: 25px; }
    .fixedWidget.layout{ right: 62%; z-index: 1025; }
    .fixedWidget .layoutMenu{ display:block; }
    .fixedWidget .mail{ display:none;}
    .fixedWidget a.top { margin-bottom: -22px; }
    .fixedWidget a.top:hover{ margin-bottom: -22px; }
    .serviceWidget .layoutMenu{ display: block; }
    .serviceWidget .layoutHideMenu{ display: none; }
    .imgTextGrid li { width: 49%; }
    .navGrid.white .navUl .item, .whiteNav .navGrid .navUl .item { color: #444950; }
    .navGrid.fixed { display:block; left: auto; right:-110%; height: 100%; }
    .navGrid.layout, .whiteNav .navGrid.fixed { box-shadow:none; right:auto; width: 100%; right:0; padding-left: 40%; overflow: hidden; background: rgba(0,0,0,.2); }
    .navGrid .leftWrap { justify-content: left; padding-left:30px; }
    .navGrid .navGroup{ display:block; height: 100%; padding: 0; background:#fff; position: relative; }
    .navGrid .navUl{ display:block; height: 80%; overflow-y: auto; width: 120%; }
    .navGrid .navUl .item{ display:block; line-height:40px; color: #444950; font-size: 13px; padding-left:30px; text-align:left; margin: 0 0 10px; border-bottom:0;}
    .navGrid .navUl .item.on, .navGrid .navUl .item:hover{ border-bottom:0;}
    .navGrid .navUl .item.on:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #2254f4; }
    .fullPitchGroup { height: 320px; }
    .fullPitchGroup .textBox { bottom: 20px; }
    .fullPitchGroup .textBox h1 { font-size: 16px; line-height: 24px; font-weight: 600; }
    .articleMode .favoriteBtn{ display:none;}
    .guestBookGroup .inputLabel.qrcode { width:100% !important; }
    .container.category { padding: 0 10px; margin-top: 0; }
    .container.category .flexWrapper.max { padding-top:10px; padding-right: 0; }
    .launchBannerGrid.category { padding-left: 0; margin-bottom:20px; }
    .imgTextGrid { margin-left: 10px; margin-right: 10px; }
    .layoutFullPitch{ margin-top: 0;}
    .footerGrid { width:100%; padding: 0; overflow: hidden; }
    .footerGrid .topWrapper{ display:none;}
    .footerGrid .midWrapper{ width:100%; padding: 0 20px; }
    .articleModeGrid.w3 .itemLi { width: 50%; }
}
@media screen and (max-width: 640px){
    .imgTextGrid ul{ margin: 0;}
    .imgTextGrid li { width: 100%; border-left: 0; padding: 0 0 20px; margin-bottom: 20px; }
    .newArticleGrid .itemLi { width: 50%; }
}
@media screen and (max-width: 480px){
    .articleModeGrid{ margin-top:0;}
    .articleModeGrid.w3 .itemLi { width: 100%; }
    .flexBetweenMode.res{ display:block;}
    .flexBetweenMode.res .flexWrapper.max { padding-right: 0; }
    .newArticleGrid .itemLi { width: 100%; }
}