﻿
.artwrap { width: 60%;max-width:1000px;min-width:1000px; margin: 0 auto;padding-top:50px;}
@media (max-width: 1000px) {
   .artwrap { width: 100%;max-width:initial;min-width:initial;padding-top:20px;}
}
.faq-LR-flex{display:flex;display:-webkit-flex;justify-content: space-between;margin-top: 25px;position:relative;}
.faq-LR-flex .good-bad{position: sticky; right: 0px; top: 0;width:82px;}

.faq-LR-flex .gb-good-bad{cursor:pointer;}
.faq-LR-flex .gb-good-bad span.iconfont{font-size:30px;}
.faq-LR-flex .gb-good-bad { text-align: center; border: solid 1px #333; padding: 15px 10px; margin-bottom: 25px; border-radius: 4px; }

.faq-LR-flex .gb-good-bad .bad{;}
.faq-LR-flex .gb-good-bad .text{padding:2px 0;}
.ifbox { position: relative; height: 30px; width: 40px; margin: 0 auto; }
.ifbox span.iconfont { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.bad .ifbox span.iconfont {  transform: rotate(180deg); }

.faq-LR-flex .gb-good-bad.active { border: solid 1px #D7000F;  }
.faq-LR-flex .gb-good-bad.active *{ color:#D7000F;  }

.topline {
	position: relative;
	padding: 30px;
	width:calc(100% - 150px);
	background: #fff;
	box-shadow: 0 4px 16px 0 rgb(0 0 0 / 16%);
	box-sizing: border-box;
	margin-bottom: 100px;
}
.topline img{max-width:100%;}

.qrbox { background-color: #D7000F; padding: 3px; box-shadow: 0px 6px 16px 0px rgb(38 25 25 / 30%);text-align:center;color:#fff; }
.qrbox img{ width:300px;height:300px; }
.qrbox .wxsaoma{text-align:center;color:#fff; padding-top:5px;font-size:16px;letter-spacing:3px;}


.contentpage {
	padding-bottom: 70px
}
 .artheader { }
.artheader .title { font-size: 1.4vw; line-height: 1.5; font-weight: 700; text-align: left; }
 .artheader .title a{ display:flex;display:-webkit-flex;justify-content:space-between; }
 .artheader .date{font-size:12px;font-weight:500;color:#777}
 .artheader .citem{padding:15px 0;display:flex;display:-webkit-flex;justify-content:space-between;}
.artheader .citem a.btn-a {cursor:pointer;; display: inline-block; position: relative; font-size: 12px; font-weight: 500; color: #777; text-transform: uppercase; padding: 0 10px; border: solid 1px #999; margin-left: 5px;-webkit-transition:all 500ms ease;-ms-transition:all 500ms ease;-moz-transition:all 500ms ease;-o-transition:all 500ms ease;transition:all 500ms ease }
 .artheader .citem a.btn-a:hover{background-color:#eee;}

.dropbtn {
	padding: 0 10px;
	border: solid 1px #999 !important;
	font-size: 12px;
	border: none;
	cursor: pointer;
	background-color: #fff;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	display: flex;
	display:-webkit-flex;
	align-items: center;
}
 .dropbtn:hover{background-color:#eee  !important}
 .data-hits{ display: flex; align-items: center; justify-content: stretch;}
.dropdown {position:relative;display:inline-block;margin-left: 5px;}
.dropdown-content {display:none;position:absolute;background-color:#f9f9f9;min-width:100px;padding:12px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;}
.dropdown-content a { color: #777 !important; height: 35px; line-height: 35px; text-decoration: none; display: block; text-align: center; }
.dropdown-content a:hover {background-color:#f1f1f1}
.dropdown:hover .dropdown-content {display:block;}
.dropdown:hover .dropbtn {background-color:#3e8e41;}
.dropdown .iconfont { line-height: 15px;}


.artMarkWrap .artMark { padding: 0;  }
	.artMarkWrap .artMark h1, .artMarkWrap .artMark h2, .artMarkWrap .artMark h3, .artMarkWrap .artMark h4, .artMarkWrap .artMark h5, .artMarkWrap .artMark h6 {
		font-size: 16px;
		line-height: 1.5;
		margin: 15px 0;
		font-weight: 700
	}
.artMarkWrap .artMark h1{	font-size:20px;}
.artMarkWrap .artMark h1{	font-size:18px;}

.artMarkWrap .artMark p{	font-size:16px;line-height:1.5;margin-bottom:15px;}
.show-in-mobile {display:none !important}
.hide-in-mobile{display:initial !important}


@media (max-width: 1000px) {
	.topline {  padding:25px 10px;width: 99%; margin: 0 0.5%;margin-top: 0px;     margin-bottom:50px;}

    .artheader { padding: 0 10px;  }
.artheader .title { font-size: 3.6vw;  }
	.btnQRCoder{display:none;}
.faq-LR-flex {  margin-top:0px; flex-direction: column-reverse; }
.faq-LR-flex .good-bad { position: relative; right: initial; top: initial; width: initial;display:flex;display:-webkit-flex;justify-content:space-between; padding: 0px; }
.faq-LR-flex .gb-good-bad {  padding: 3px 10px; margin-bottom: 20px; display:flex;display:-webkit-flex;justify-content:space-between;align-items: center;}
.faq-LR-flex .gb-good-bad span.iconfont { font-size: 20px; height:30px;line-height:30px;}

.show-in-mobile {display: flex !important; display: -webkit-flex !important;}
.hide-in-mobile{display:none !important}


}
@media (max-width: 500px) {

.artheader .title { font-size: 5.6vw;  }
}

@media (max-width: 350px) {

.dropdown{ display:none;  }
}

.videoBox{width: 100%; position:relative;  }

.videoBox .video{ border-radius: 10px;width:100%;  }
.videoBox .vbin:hover{-webkit-box-shadow:0 10px 16px rgba(0,0,0,.24);-moz-box-shadow:0 10px 16px rgba(0,0,0,.24);box-shadow:0 10px 16px rgba(0,0,0,.24); }

.tooltip-inner {
	background-color: #000;
	padding: 3.5px 7px;
}
#bigimg {
	max-width:initial !important;
}

/* 全局看图CSS样式 */
.full-view-layer.show-view { display: block; animation: show-full-view 0.3s; z-index: 10 !important; } 
.full-view-layer { position: fixed; z-index: 101; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); cursor: zoom-out; overflow: auto; opacity: 1; transition: opacity .3s; display: none; } 
.full-view-layer > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f4f6f8; animation: zoomIn .3s; }

/*全屏看图  */
@keyframes show-full-view { 0% { opacity: 0; } 100% { opacity: 1; } } 
.js-full-view { cursor: zoom-in; }

@media (max-width: 1023px) {
	.full-view-layer > img { height: auto; max-height: 90%; }
}
