.ggm-article { margin-top: 22px; } .ggm-article-main { display: inline-block; width: 680px; } .ggm-article-title-main { position: relative; display: inline-block; vertical-align: top; width: 680px; background: #7a6a56; height: 442px; } .ggm-article-title-main-container { position: absolute; bottom: 71px; left: 5px; background-color: rgba(67,67,67,0.5); } .ggm-article-title-main-title { color: #ffffff; font-size: 36px; } .ggm-article-title-main-subtitle { color: #ffffff; font-size: 30px; } .ggm-article-title-main-description { position: absolute; width: 100%; bottom: 0px; font-size: 14px; height: 71px; padding: 13px 23px; color: #ffffff; background: #322c2a; /*line-height:47px;*/ } .ggm-article-title-main-description-content { /*overflow: hidden;*/ height: 100%; } .ggm-article-title-main-description1 { position: absolute; width: 100%; bottom: 0px; font-size: 12px; height: 0px; padding: 13px 23px; color: #ffffff; background: #322c2a; } .ggm-article-share { position:relative; margin: 10px 0; color: transparent; /*background: #000000;*/ height: 50px; width: 320px; } .ggm-article-share-qrdiv { display: none; position: absolute; top: 0px; left: 0px; width: 400px; height: 110px; background-color: white; } /*.ggm-article-share > #qrcode { display: none; position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; }*/ .ggm-article-share:hover > #qrcodeDIV { display: block; } .ggm-article-recommend-list-container { display: inline-block; margin-left: 20px; } .ggm-article-recommend-famous { width: 220px; } .ggm-article-recommend-famous-title { font-size: 16px; margin-bottom: 10px; } .ggm-article-recommend-famous-item { display: inline-block; width: 105px; height: 60px; } .ggm-article-recommend-famous-item-graph { display: inline-block; vertical-align: bottom; height: 48px; width: 48px; border-radius: 100%; background: #c79e63; margin-right: 5px; } .ggm-article-recommend-famous-item-name { display: inline-block; font-size: 11px; } .ggm-article-keyword { color: #000000; font-size:14px; } .ggm-article-keyword a { color: #2587d0; font-size: 14px; margin-right: 8px; } .ggm-article-body { margin-bottom: 30px; } .ggm-article-body-container { display: inline-block; vertical-align: top; width: 900px; background: #000000; font-size:16px; } .ggm-article-body-container img { max-width: 680px; } .ggm-article-body-container video { max-width: 680px; } .ggm-article-more { margin-top: 50px; } .ggm-article-more-title { display: inline-block; padding: 24px 0 15px; border-top: 1px solid #c10d23; font-size: 18px; line-height: 22px; font-weight: bold; width:100%; } .ggm-article-more-body { } .ggm-article-more-item { display: inline-block; width: 286px; margin-bottom: 20px; } .ggm-article-more-item img { width: 286px; height: 178px; object-fit: cover; } .ggm-article-more-item:nth-child(odd) { margin-right: 108px; } .ggm-article-more-item-title { margin-top: 10px; font-size: 16px; line-height: 21px; color: #231815; height: 45px; overflow: hidden; } .ggm-article-sider { float: right; } .ggm-article-sider-blank { margin: 36px 0; } .ggm-article-sider-item { background: #ededed; } .ggm-article-sider-item-title { color: #000000; font-size: 17px; padding: 5px 17px 0; } .ggm-article-sider-item-content { position: relative; width: 320px; height: 194px; padding: 3px 16px; } .ggm-article-sider-item-content .carousel, .ggm-article-sider-item-content .carousel-inner, .ggm-article-sider-item-content .item { height: 100%; } .ggm-article-sider-item-content .carousel-caption { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 5px 10px; background: #322c2a; color: #ffffff; font-size: 14px; text-align: left; opacity:0.9; } .ggm-article-sider-item-content .carousel-indicators { display: flex; width: 100%; top: 100%; left: 0; margin: 0; height: 5px; } .ggm-article-sider-item-content .carousel-indicators li { background: #c7c8c8; border-radius: 0px; flex: auto; height: 5px; margin: 0px; } .ggm-article-sider-item-content .carousel-indicators li.active { height: 5px; background: #ac9373; } .ggm-article-sider-item-content img{ width: 100%; height: 100% !important; object-fit:cover; }