@charset "utf-8";
/* 
date:6:58 2015-8.28
Copyright H-ui&zcool Inc.
Created & Modified by guojunhui.
*/
/*
	Name:			style_clearfix
	Example:		class="clearfix|cl"
	Explain:		Clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
body{font-family: "HanHei SC","PingHei","PingFang SC","STHeitiSC-Light","Helvetica Neue","Helvetica","Arial","Microsoft Yahei","Hiragino Sans GB","Helvetica Neue","\5B8B\4F53";}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{zoom:1}
.hide{display:none}[hidden]{display: none}

.wp{ width:1083px; margin:0 auto}
.wp2{ width:1043px; margin:0 auto; overflow:hidden}
.l,.f-l{float:left!important;_display:inline}
.r,.f-r{float:right!important;_display:inline}
.text-l{text-align:left}.text-r{text-align:right}.text-c{text-align:center}
.mt-55{ margin-top:55px;}
.radius{border-radius:8px}
.mt-10{margin-top:10px}
.ml-20{margin-left:20px}
.iconpic{display:inline-block; vertical-align:sub;*vertical-align:middle;_vertical-align:middle; width:16px; height:16px; background-position:center; background-repeat:no-repeat}
.iconpic-a{ width:52px; height:98px; background-image:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/iconpic-a.jpg)}
.iconpic-q{ width:52px; height:98px; background-image:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/iconpic-q.png)}
.iconpic-attow-up-1{width:10px; height:10px; background-image:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/iconpic-attow-up-1.png)}
.iconpic-attow-up-2{width:12px; height:11px; background-image:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/iconpic-attow-up-2.jpg)}
.iconpic-zan{ width:20px; height:20px; background-image:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/iconpic-zan.png)}
.zaned .iconpic-zan{background-image:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/iconpic-zan-active.png)}

/*按钮*/
.btn{display:inline-block;box-sizing:border-box;cursor:pointer;text-align:center;font-weight:700; padding:5px 30px;white-space:nowrap;vertical-align: middle;-moz-padding-start:npx; -moz-padding-end:npx;border:solid 2px #ddd; background-color:#fff; width:auto;*zoom:1;*overflow:visible; font-size:16px;
	-webkit-transition:background-color .1s linear;
		-moz-transition:background-color .1s linear;
		-o-transition:background-color .1s linear;
			transition:background-color .1s linear}
a.btn:hover,a.btn:focus,a.btn:active,a.btn.active,a.btn.disabled,a.btn[disabled]{text-decoration:none}
.btn:active,.btn.active{background-color:#ccc}
.btn:first-child{*margin-left:0}
.btn.active,.btn:active{}

/*默认——灰色	通常用于取消*/
.btn-default{background-color:#fff;border-color:#282828; color:#282828}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active{color:#282828;background-color:#fff;border-color:#282828}

/*主要——主色	通常用于确定、提交、购买、支付等*/
.btn-primary{color:#fff;background-color:#111412; border-color:#111412}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active{color:#fff;background-color:#111412;border-color:#111412}

/*Huimodal*/
.modal-open{overflow:hidden}/*当弹出层出现时，隐藏body右侧滚动条*/
.page-overflow{margin-right:16px}/*隐藏body滚动条时，页面偏移*/
.modal-scrollable{position:fixed;top:0;right:0;bottom:0;left:0;overflow: auto}/*弹出层的最外层，全屏，用户响应点击和滚动*/
.modal-overflow .modal-scrollable{overflow-y:scroll}/*弹窗超出屏幕高度时，弹出层替代body右侧滚动条，实现弹出层的整体滚动*/
.modal-backdrop {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1040;background-color:#000}/*默认遮罩层，全屏黑色*/
* html .modal-backdrop{position:absolute;left:expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)}/*解决IE下 遮罩层兼容性*/
.modal-backdrop.fade {opacity:0;filter: alpha(opacity=0)}/*遮罩层失去时，透明度为0*/
.modal-backdrop,.modal-backdrop.fade.in {opacity: 0.3;filter: alpha(opacity=30)}/*遮罩层进入 0.7透明度*/

.modal.container{width: 980px}/*满页面宽度*/
.modal {position:absolute;top:50%;left:50%; width:500px;margin-left:-250px;z-index:1050;background-color: #fff;
    -webkit-background-clip:padding-box;
    -khtml-background-clip:padding-box;
    -moz-background-clip:padding-box;
    -ms-background-clip:padding-box;
    -o-background-clip:padding-box;
    background-clip:padding-box;
	box-shadow: 4px 0px 12px rgba(1, 1, 1, 0.4);*border:1px solid #999}/*弹出层，绝对定位，默认【宽度500px，高度自适应，背景白色，带阴影】，自定义宽度可在data-width中设置参数*/
	
.fade {opacity: 0;filter: alpha(opacity=0);-webkit-transition: opacity 0.2s linear;-moz-transition: opacity 0.2s linear;-o-transition: opacity 0.2s linear;transition: opacity 0.2s linear}
.fade.in {opacity: 1;filter: alpha(opacity=100)}
.modal.fade {top: -100%}/*弹出层进入动画效果*/
.modal.fade.in{top:50%}/*弹出层进入后居顶距离，配合margin-top负值，实现上下自动居中*/
.modal.modal-overflow.fade.in{top:0px}/*如果弹出层高度大于窗口，弹出窗口距顶0像素*/

.modal-alert{position:fixed; right:auto; bottom:auto; width:300px; left:50%;margin-left:-150px; top:50%;margin-top:-30px; z-index:9999;background-color: #fff;border: 1px solid #999;border: 1px solid rgba(0,0,0,.2);outline: 0;
-webkit-background-clip: padding-box;
		background-clip: padding-box;					
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
		box-shadow: 0 3px 9px rgba(0,0,0,.5)}

	.modal-alert-info{padding:30px; text-align:center; font-size:14px; background-color:#fff}


.dropDown{display:inline-block}
.dropDown_A{display:inline-block}
.dropDown-menu{ display:none;transition: all 0.3s ease 0s}
.dropDown:focus,.dropDown-menu:focus {outline:0}
	.dropDown-menu li.arrow{ position:absolute;display:block; width:12px; height:8px; margin-top:-13px; margin-left:20%; line-height:0;background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/icon-jt.png) no-repeat 0 0}
 
/*鼠标经过	*/
.dropDown.hover.dropDown_A,.dropDown.open.dropDown_A{text-decoration:none;background-color:rgba(255,255,255,0.2)}
.dropDown.open.dropDown_A.menu_dropdown-arrow{transition-duration:0.3s ;transition-property:all;_background-position:0 0}
.dropDown.open.dropDown_A.menu_dropdown-arrow{transform: rotate(180deg);}
	.menu{background-color:#fff;border:solid 1px #f2f2f2; display: inline-block;}
	.menu.radius{border-top-left-radius:0;border-top-right-radius:0}
	.menu.box-shadow{border-top:none;}
	.menu > li{ position: relative; float: none;display:block;}
	.menu > li > a{ display: block;clear: both;border-bottom:solid 1px #f2f2f2;padding:6px 20px;text-align:left;line-height:1.5;font-weight: normal;white-space:nowrap}
	.menu > li:last-child > a{ border-bottom:none}
	.menu > li > a:hover,.menu > li > a:focus,.menu > li.open > a{ text-decoration:none;background-color:#fafafa}
	.menu > li > a.arrow{ position:absolute; top:50%; margin-top:-10px; right:5px;line-height: 20px; height: 20px; color: #999}
	.menu > li >.menu{ display: none}
	.menu > li.open >.menu{ display: inline-block;position: absolute; left:100%;top:-1px;min-width:100%;}
	/*禁用菜单*/
	.menu > li.disabled > a{color:#999;text-decoration:none; cursor:no-drop; background-color:transparent}
	/*线条*/
	.menu > li.divider{ display:block;height:0px; line-height:0px;margin:9px 0;overflow:hidden; border-top:solid 1px #eee}
/*打开菜单*/
.dropDown >.dropDown-menu{ display: none}
.dropDown.open{position:relative;z-index:990}
/*默认左对齐*/
.dropDown.open >.dropDown-menu{position:absolute;z-index:1000;display:inline-block;top:100%;left:-1px;min-width:100%;background-color:#fff;border:solid 1px #f2f2f2}
/*右对齐*/
.dropDown.open.right >.dropDown-menu{right:-1px!important;left:auto!important}

body{ background:#fff url(https://public-static.zcool.com.cn/special-resource/ask2017/images/bg.jpg) repeat center top;font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
.bannerWP{ height:663px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/banner.png) no-repeat center 0; margin-top:-2px; position:relative; z-index:0}
.bannerWP .wp{ position:relative}
#section-1{ height:527px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/01.png) no-repeat center}
#section-2{ height:172px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/02.png) no-repeat center}
#section-3{ height:837px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/03.png) no-repeat center; margin-top:45px}
#section-4{ height:594px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/04.png) no-repeat center}
#section-5{ height:219px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/05.png) no-repeat center bottom;padding-top:105px}
#section-7{ height:227px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/06.png) no-repeat center bottom;padding-top:105px}
#section-9{ height:130px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/07.png) no-repeat center bottom;padding-top:105px}
#section-5 .wp,#section-7 .wp{ position:relative}
#section-10{ margin-top:66px; padding-bottom:55px}

.dashen-list{ padding-top:50px; margin-right:-25px}
.dashen-list .item{ width:197px; float:left; margin-bottom:40px; margin-right:24.5px;}
.dashen-list .pic-box{ position:relative; width:185px; height:185px; padding:6px; overflow:hidden; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/border.png) no-repeat 0 0}
.dashen-list .pic-box img{ width:185px; height:185px; display:block}
.dashen-list .pic-box .tiwen{ position:absolute; width:197px; height:197px; display:block; top:100%; left:0; right:0; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/bg-tiwen.png) no-repeat center; cursor:pointer;transition: top 200ms;
	-moz-transition: top 200ms; /* Firefox 4 */
	-webkit-transition: top 200ms; /* Safari 和 Chrome */
	-o-transition: top 200ms; /* Opera */}
.dashen-list .pic-box:hover .tiwen{ top:0;}
.dashen-list .text-dt{ font-weight:bold; text-align:center; color:#f0e1aa; font-size:18px; overflow:hidden; height:24px; line-height:24px; margin-top:8px}
.dashen-list .text-dt a{ color:#f0e1aa; text-decoration:none}
.dashen-list .text-dd{ font-size:14px; color:#c29f63; line-height:22px; height:44px; overflow:hidden; word-break:break-all; margin-top:8px;text-align: center;}

.right-aside-nav{ position:fixed; width:185px; height:529px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/aside.png); right:0; top:60px}
.right-aside-nav ul{ padding-top:167px}
.right-aside-nav ul li{ height:67px; cursor:pointer;}

#modal-send-sueecss{ width:695px; height:291px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/bg-send-ok.png) no-repeat center}
#modal-send-sueecss .modal-close{ position:absolute; width:40px; height:40px; right:15px; top:15px; cursor:pointer; text-decoration:none;}

.tabbar-qa{ position:absolute; width:320px; height:44px; top:130px; left:50%; margin-left:-160px}
.tabbar-qa > a{ display:block; float:left; width:156px; border:solid 2px #f0e1aa; height:40px; line-height:40px; font-size:18px; font-weight:bold; text-align:center; text-decoration:none; color:#d9c087}
.tabbar-qa > a:hover,
.tabbar-qa > a.active{text-decoration:none; color:#141917; background-color:#f0e1aa;}

#dashen-zhuanqu{float:left;width:156px; border:solid 2px #f0e1aa;height:40px; line-height:40px;}
#dashen-zhuanqu a.dropDown_A{ display:block; width:100%;cursor: pointer; text-align:center;font-size:18px; font-weight:bold;text-decoration:none; color:#d9c087}
#dashen-zhuanqu.active a.dropDown_A{color:#141917; background-color:#f0e1aa;}
#dashen-zhuanqu.dropDown.open >.dropDown-menu{ border:solid 2px #111412; box-sizing:border-box; box-shadow:none; padding:0; width:auto; left:-4px; right:-5px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/bg-menu.png) repeat-y 0 0/100%}
#dashen-zhuanqu.dropDown.open >.dropDown-menu li{ display:block; width:100%; height:38px; line-height:38px; text-align:center; font-size:16px; font-weight:bold; color:#111412; white-space:nowrap; overflow:hidden; border-bottom:solid 1px #111412; cursor:pointer}
#dashen-zhuanqu.dropDown.open >.dropDown-menu li:hover{ background-color:#111412; color:#fff;}


.comment-wp{ padding-top:30px;}
.comment-list{}
.comment-list .comment-item{ margin-bottom:10px; background-color:#fff; padding:20px;}
.comment-list .comment-item .question-wp{ padding-left:73px; position:relative; min-height:98px; padding-right:30px}
#tabcon-q-zx .comment-list .comment-item .question-wp{padding-right:120px}
#tabcon-q-zz .comment-list .comment-item .question-wp{padding-right:120px}
.comment-list .comment-item .answer-wp{ border-top:solid 1px #454545; padding-top:20px;padding-left:73px; padding-right:30px;position:relative;min-height:98px;}
.question-wp .iconpic-q{ position:absolute; left:0; top:0}
.answer-wp .iconpic-a{ position:absolute; left:0; top:20px}

	.user-info{ position:relative; padding-left:50px; min-height:40px}
	.user-info .user-headpic{ position:absolute; left:0; top:0;overflow:hidden}
	.user-info .user-headpic,
	.user-info .user-headpic img{width:40px; height:40px; }
	.zan-wp{font-size:16px}
	.question-wp .zan-wp{position:absolute; left:950px; top:68px;}
	.answer-wp .zan-wp{ position:absolute; left:950px}
	.question-info{ position:relative; display:block; width:auto; padding:10px 20px; background-color:#ffd100; color:#282828; font-size:16px; line-height:1.6; margin-top:20px; font-weight:bold}
	.question-info .iconpic-attow-up-1{ position:absolute; top:-10px; left:15px;}
	.user-info{}
		.user-text-name{ font-size:16px; line-height:20px;font-weight:bold; color:#282828}
			.user-text-info{ font-size:12px; line-height:18px; color:#666}
		.user-text-name2{ font-size:18px; line-height:40px; font-weight:bold; color:#282828}
	.answer-info{position:relative; width:auto; padding:10px 20px; background-color:#fff;border:solid 1px #454545;color:#282828; font-size:16px;line-height:1.6;margin-top:20px;}
	.answer-info .iconpic-attow-up-2{ position:absolute; top:-11px; left:14px;}
	
	.datetime{ font-size:14px; color:#666}
	.question-wp .datetime{ position:absolute; top:10px; right:0}
	.answer-wp .datetime{}
	.answer-footer{ margin-top:15px;}

/*提问*/
.tiwen-wp{ background-color:#fff; padding:40px}
.at-bg{ width:167px; padding-left:38px; height:24px; background:url(https://public-static.zcool.com.cn/special-resource/ask2017/images/bg-@.png) no-repeat center}
.at-bg .dropDown{ width:100%;}
.at-bg .dropDown_A{ width:100%; text-align:left; height:24px; line-height:24px; font-size:16px; font-weight:bold; cursor:pointer}
.at-bg .dropDown.open >.dropDown-menu{ border:solid 2px #111412; box-sizing:border-box}
.at-bg .dropDown.open >.dropDown-menu li{ display:block; width:100%; height:38px; line-height:38px; text-align:center; font-size:16px; font-weight:bold; color:#111412; white-space:nowrap; overflow:hidden; border-bottom:solid 1px #111412; cursor:pointer}
.at-bg .dropDown.open >.dropDown-menu li:hover{ background-color:#111412; color:#fff;}

.textarea-wp{ border:solid 2px #282828; padding:10px; margin-top:25px}
.textarea-wp .textarea{ width:100%; height:140px; resize:none; border:none; font-size:16px; line-height:1.8;-webkit-appearance:none;outline:none}
.textarea-wp .textarea:hover,.textarea-wp .textarea{border:none;}
	.textarea-numberbar{ text-align:right; margin-top:5px; font-size:14px}
	.textarea-length{ font-style:normal}
	

/*翻页代码*/
.pageNav{ text-align:center; margin-top:40px}
.laypage_main{font-size:0; clear:both; color:#666}
.laypage_main *{display:inline-block; vertical-align: top; font-size:18px}
.laypage_main a{height:30px; line-height:30px; text-decoration:none; color:#b6965e}
.laypage_main a, .laypage_main span{margin:0 3px 6px; padding:0 10px}
.laypage_main span{height:26px; line-height:26px}
.laypage_main input, .laypage_main button{ border:1px solid #ccc; background-color:#fff}
.laypage_main input{width:40px; height:26px; line-height:26px; margin:0 5px; padding:0 5px}
.laypage_main button{height:28px; line-height:28px; margin-left:5px; padding:0 10px; color:#666}

/* 默认皮肤 */
.laypageskin_default a:hover{color:#fff}
.laypageskin_default span{height:28px; line-height:28px; color:#999}
.laypageskin_default .laypage_curr{font-weight:700; color:#fff}