@charset "utf-8";

img { max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
/* mini head */
.navbar { background:#172666; color:#fff; /*overflow:hidden;*/}
.navbar .left-nav{ float:left;  /*overflow:hidden;*/}
.navbar .right-nav{ float:right;}
.navbar:after{ content:''; display:block; clear:both;}
.navbar ul li{ float:left; font-size:13px; line-height:30px; height:30px; border-right:1px solid #475eb8;}
.navbar ul li.current{ background:#475eb8; padding:0 10px; color:#fff;}
.navbar ul li a { display:inline-block; padding:0 10px; font-size:13px; color:#fff;}
.navbar ul li a:hover { opacity:0.8;}
.navbar .member{ padding:0 10px;}
.navbar .member a { color:#fff; text-decoration:underline; padding:0; margin-right:5px;}
.navbar .member a:hover { opacity:0.8;}
.navbar .member img{ width:24px; height:24px; border-radius:12px; vertical-align:middle; margin:0 5px 3px 0;}
/*會員專區快捷*/
.panel{ position:relative;}
.member_hotkey{ display:none; border-bottom:solid 1px #475eb8; border-left:solid 1px #475eb8; z-index:99; width:100%; position:absolute; background:#172666; left:-1px;}
.arrow-d{ display:inline-block; height:0; width:0; border-top:6px solid #ccc; border-left:3px solid transparent; border-right:3px solid transparent; margin-left:3px; }
.member_hotkey:before{ content:''; display:block; position:absolute; height:100%; width:0; left:0px; top:0;}
.panel:hover .member_hotkey{ display:block;}
.member_hotkey li{ display:block; clear:both; text-align:center; width:100%; border-right:solid 1px #ccc;}
.member_hotkey a{ display:block; width:100%; box-sizing:border-box; color:#ccc;}

header { clear:both; height:150px; width:100%; background:url("../images/bbs/header-bg.png") no-repeat center #000; z-index:9998;}
header .wrap { width:1050px; margin:0 auto; height:100%; position:relative;}
#headlogo { display:block; position:absolute; width:200px; height:60px; left:0; top:50px; background: url("../images/bbs/logo.png") no-repeat center; background-size:contain; z-index:9997;}
#headlogo img { display:none;}
#menu-btn1,#menu-btn2,.menuclose { display:none;}

/*search*/
.search { position:absolute; width:1050px; top:50px; left:50%; margin-left:-525px; overflow:hidden;}
.search form { display:block; width:150px; float:right; margin:0; padding:3px 0; background:#333;}
.search input[type="text"] { width:110px; padding:5px; border:none; background:#333; color:#fff;}
.search .sent-btn { cursor:pointer; width:20px; height:20px; border:none; background:url(../images/icon-search.png) no-repeat center; background-size:20px 20px;}
.search .sent-btn:hover {}
.search input[type="text"]::-webkit-input-placeholder { color:#ccc;}
.search input[type="text"]::-moz-placeholder { color:#ccc;}
.search input[type="text"]:-ms-input-placeholder { color:#ccc;}
.search input[type="text"]:-moz-placeholder { color:#ccc;}

/*menu*/
#mainnav { text-align:right; position:absolute; width:100%; top:120px; right:0;}
#mainnav ul { width:1050px; margin:0 auto;}
#mainnav ul li { display:inline-block; margin-left:-4px;}
#mainnav ul li.sub:hover { background:url(../images/icon-menuarrow.png) no-repeat bottom;}
#mainnav ul li a { display:block; color:#fff; padding:22px 11px; font-size:16px; font-weight:bold; }
#mainnav ul li a.ora { color:#fff;}
#mainnav ul li a:hover { opacity:0.8; text-decoration:none;}
#mainnav ul li.mo { display:none;}
.submenu { text-align:center; background:#378bd6; margin-top:0; position:absolute; top:60px; left:0; width:100%; padding:10px 0; z-index:9996;}
.submenu a { display:inline-block !important; font-weight:normal !important; border-right:1px solid #7ec1fe; line-height:20px; font-size:15px !important; color:#fff !important; padding:0 10px!important;}
.submenu a:hover { color:#adfcff !important; background:none !important;}
.submenu a:last-child { border-right:none;}
#mainnav .submenu { display:none;}
#mainnav li:hover .submenu{ display:block; z-index:3;}

/*menu select*/
#mainnav ul li.current { background:url(../images/icon-menuarrow.png) no-repeat bottom;}
#mainnav ul li.current a { color:#378bd6;}
#mainnav ul li.alo.current { background:none;}
#mainnav ul li.current .menutitle {}
#mainnav ul li.current .submenu{ display:block; z-index:2;}
.submenu a.current { color:#adfcff !important;}

/*notice*/
.notice-area { width:1050px; text-align:right; position:absolute; left:50%; margin-left:-525px; top:90px;}
.notice-area #notice,.notice-area #hotwords { vertical-align:middle;}
.notice-area #notice {  height:auto !important; border:1px dashed #555; color:#d0d0d0; display:inline-block; padding:0 5px 0 20px; background:url(../images/icon-head-notice.png) 6px 6px no-repeat; background-size:16px 16px; margin-right:5px;}
.notice-area #notice a{ color:#d0d0d0; display:block; font-size:14px; /*max-width:12em; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;*/}
.notice-area #notice a:hover { text-decoration:underline;}
#notice ul { height:30px; overflow: hidden; }
#notice ul li { line-height:20px; font-size:14px; padding:5px 10px; text-align:left;}

/*hotwords*/
.notice-area #hotwords { display:inline-block;}
.notice-area #hotwords .hot{ background:#ffd266; vertical-align:middle; color:#000; margin-right:5px; font-size:11px; padding:3px; border-radius:3px; font-style:normal;}
.notice-area #hotwords a{display:inline-block; vertical-align:middle; /*max-width:11em; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;*/ color:#ccc;}
.notice-area #hotwords a:hover { text-decoration:underline;}
.notice-area #hotwords span:after { content:" / "; color:#ccc;}
.notice-area #hotwords span:last-child:after { content:"";}

/* 廣告開闔 */
.ad-bbs-wrap { width:1050px; margin:0 auto; position:absolute; top:180px; left:50%; margin-left:-525px; z-index:99;}
#openAD { width:60px; height:50px; padding-top:10px; text-align:center; position:absolute; right:-60px; top:0; background:#172667; color:#fff; font-size:13px; cursor:pointer;}
#openAD i { display:block; font-size:20px; font-weight:bold; font-style: normal;}
.ad-bbs {}
.ad-bbs-m { display:none;}

/* 側邊欄廣告 */
.category-bbs { float:left; width:285px; height:415px; }
.category-bbs-m { display: none;}

/* 浮動作者*/
#bbs-author { display:block; width:80px; height:80px; position:fixed; bottom:80px; right:20px; background-size:80px 80px; z-index:9996;}
#bbs-author img { border-radius:10px;}

/*----------for header */
@media screen and (max-width: 1024px) {
	
	header .wrap { width:100%;}
	
	#headlogo { top:30px;}
	.search { width:99%; top:80px; left:0; margin-left:0; right:1%;}
	#mainnav { text-align:center;}
	#mainnav ul { width:100%;}
	.search-wrap { width:100%;}
	.navbar .left-nav{ display:none;}
	
	.notice-area { width:100%; left:auto; right:160px; margin-left:0; top:80px;}
	.notice-area #hotwords { display:none;}

	/* 廣告開闔 */
	.ad-bbs-wrap { display:none;}
	.ad-bbs-m { display:block; width:420px; position:fixed; top:8%; left:50%; margin-left:-210px; z-index:9999;}
	.ad-bbs-m .adclose { position:absolute; right:10px; top:10px; background:#fff; color:#000; padding:5px 10px;}
	
	/* 側邊欄廣告 */
	.category-bbs { display:none;}
	.category-bbs-m { clear:both; display:block; background:#000; text-align:center;}
	.category-bbs-m a {}
    /* 浮動作者*/
    #bbs-author { bottom:60px; right:10px;}
}

@media screen and (max-width: 768px) {

	header { background:#000; width:100%; height:60px; position:fixed; top:0; left:0; z-index:9996;}
	header .wrap { height:auto; position:static;}
	
	#headlogo { width:150px; height:45px; left:10px; top:5px; z-index:999;}
	#headlogo img { display:none;}
	#menu-btn1 { display:block; width:30px; height:30px; position:absolute; top:15px; right:15px; background:url(../images/icon-menubtn1.png) no-repeat center; background-size:21px 14px;}
	#menu-btn2 { display:block; width:30px; height:30px; position:absolute; top:15px; right:60px; background:url(../images/icon-menubtn2.png) no-repeat center; background-size:17px 20px;}
	
	#menu_back1{ display: none; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; position:fixed; top: 0; z-index:1000;}
	#menu_back2{ display: none; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; position:fixed; top: 0; z-index:9998;}
	.menuclose { display:block; width:20px; height:20px; position:absolute; top:15px; right:15px; background:url(../images/icon-menuxx.png) no-repeat center; background-size:20px 20px;}
	
	/*member nav*/
	.navbar { height: 100%; width: 250px; position:fixed; top: 0; bottom: 0; right: -250px; background:#fff; padding:0; overflow-y:scroll; overflow-x:hidden; z-index:9999; -webkit-backface-visibility:hidden; border:none; box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);}
	.navbar .right-nav{ float:none;}
	.navbar ul li{ float:none; text-align:center; font-size:15px; line-height:30px; height:auto; border-right:none; border-bottom:1px solid #eee;}
	.navbar ul li a { display:block; padding:5px 0; line-height:35px; font-size:15px; color:#666;}
	.navbar ul li a:hover { background:#e7ecef;}
	.navbar ul li:last-child a { /*color:#288cc8;*/ color:#666 !important;}
	.navbar .member{ padding:30px 10px 10px 10px; background:#288cc8; color:#fff;}
	.navbar .member a { color:#fff; text-decoration:none; padding:0; margin-right:0; display:block; line-height:20px;}
	.navbar .member a:hover { background:none; color:#fff;}
	.navbar .member img{ width:100px; height:100px; border-radius:50px; vertical-align:middle; margin:5px auto;}
	
	/*main nav*/
	.mainnav-wrap { height: 100%; width: 250px; position:fixed; top: 0; bottom: 0; right: -250px; background:#2384be; padding:0; overflow-y:scroll; overflow-x:hidden; z-index:1001; -webkit-backface-visibility:hidden; border:none;}
	#mainnav { text-align:left; position:static; top:0; right:0;}
	#mainnav ul li { display:block; margin-left:0; border-bottom:1px solid #3895cd;}
	#mainnav ul li.sub:hover { background:none;}
	#mainnav ul li a { color:#fff; padding:15px 25px; font-size:16px; font-weight:normal;}
	#mainnav ul li a:hover { color:#fff;}
	#mainnav ul li.mo { display:block; border-bottom:1px solid #2f90ca; background:#1a78b0}
	#mainnav ul li.mo.mt {}
	#mainnav ul li.mo a { font-size:14px; color:#b6e4ff;}
	#mainnav ul li.current a { color:#fff;}
	
	/*submenu*/
	#mainnav .submenu {}
	#mainnav li:hover .submenu{ display:none;}
	.submenu { text-align:left; background:#1274b1; position:static; width:calc(100%-50px); padding:20px 10px 20px 50px;}
	.submenu a { display:block !important;border-right:none; line-height:35px; font-size:14px !important; padding:0!important;}
	.submenu a:hover { color:#fff !important;}

	/*search*/
	.search { position:static; width:200px; margin:50px auto 10px auto; background:#4c9fd2; border:none;}
	.search form { width:100%; float:none; padding:3px 0; background:#4c9fd2; border:none;}	
	.search input[type="text"] { width:160px; background:none; color:#fff; font-size:14px;}
	.search .sent-btn {}
	.search input[type="text"]::-webkit-input-placeholder { color:#a3cbe7;}
	.search input[type="text"]::-moz-placeholder { color:#a3cbe7;}
	.search input[type="text"]:-ms-input-placeholder { color:#a3cbe7;}
	.search input[type="text"]:-moz-placeholder { color:#a3cbe7;}
	
	/*notice*/
	.notice-area { display:block; text-align:left; right:0; top:58px; width:96%; padding:8px 2%;}
	.notice-area #notice { border:none; display:block; padding:0 5px 0 20px; background:url(../images/icon-head-notice.png) 9px 7px no-repeat #fff; background-size:16px 16px; box-shadow: 0 -1px 0 1px #e6e8ed inset; margin-right:0;}
	.notice-area #notice a{ color:#666; font-size:13px; max-width:100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
	#notice ul li {}
	
	/*會員專區快捷*/
	.member_hotkey{ display:block; position:relative; background:none; border:none; background:#f4f4f4;}
	.navbar .member_hotkey li:last-child a{ color:inherit;}
	.arrow-d{ border-top: 6px solid ;}

	/* 新增版位廣告 */
	.ad20070 { height:60px; top:0; left:110px;}
	.ad20070 iframe { height:60px !important;}
	
	.category-bbs-m { padding-top:90px;}
	.banner-bg { padding-top:0 !important;}
	.banner { margin-top:10px !important;}
}

@media screen and (max-width: 400px) {
	
	#headlogo { width:80px; height:30px; background-size:80px 30px; left:5px; top:10px;}
	.ad20070 { left:80px;}
	#menu-btn1 { right:5px;}
	#menu-btn2 { right:40px;}
    .ad-bbs-m { width:300px; top:5%; left:50%; margin-left:-150px;}
}

/* footer */

footer { clear:both; background:#fff; border-top:1px solid #e6e8ed;}
footer .foot { overflow:hidden; padding:80px 0; line-height:20px;}
footer .foot a{ display:block; width:33.333333%; /*width:calc(100% / 3)*/ ; float:left;}
footer .foot a img {
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
-ms-transition: -ms-transform 0.3s ease-out}
footer .foot a:hover img{ -webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);}
footer .foot a:hover h3 { color:#378bd6;}
footer .foot .left { width:26%;}
footer .foot .right { width:72%; padding:10px 0;}
footer .foot h3 { font-weight:bold; line-height:40px; font-size:18px;}

.copy-area { background:#378bd6; text-align:center; width:90%; padding:0 5% 20px 5%;}
.logo-area { position:relative; width:410px; height:85px; left:50%; margin-left:-205px;}
.logo-area .logo { position:absolute; width:225px; height:96px; top:-25px; left:0; background:url(../images/logo-foot.png) no-repeat center; background-size:225px 96px;}
.social { position:absolute; right:0; top:20px; overflow:hidden;}
.social a{ display:block; float:left; width:36px; height:36px; border-radius:20px; margin:0 3px; border:2px solid #378bd6; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.social a.fb { background:url(../images/icon-social-fb.png) no-repeat center #fff; background-size:25px 25px;}
.social a.wb { background:url(../images/icon-social-weibo.png) no-repeat center #fff; background-size:25px 25px;}
.social a.em { background:url(../images/icon-social-mail.png) no-repeat center #fff; background-size:25px 25px;}
.social a.ig { background:url(../images/icon-social-ig.png) no-repeat center #fff; background-size:25px 25px;}
.social a.fb:hover { background:url(../images/icon-social-fb-h.png) no-repeat center #378bd6; background-size:25px 25px; border:2px solid #fff;}
.social a.wb:hover { background:url(../images/icon-social-weibo-h.png) no-repeat center #378bd6; background-size:25px 25px; border:2px solid #fff;}
.social a.em:hover { background:url(../images/icon-social-mail-h.png) no-repeat center #378bd6; background-size:25px 25px; border:2px solid #fff;}
.social a.ig:hover { background:url(../images/icon-social-ig-h.png) no-repeat center #378bd6; background-size:25px 25px; border:2px solid #fff;}

.foot-nav { color:#7ebaf0; font-size:12px;}
.foot-nav li { display:inline-block;}
.foot-nav li:after { content:' | '; color:#68b0f1; font-size:12px;}
.foot-nav li:last-child:after { content:'';}
.foot-nav a { color:#fff; font-size:13px; line-height:20px; padding:0 10px;}
.foot-nav a:hover{ text-decoration:underline;}
.copy { color:#c5ebff; font-size:12px; padding:10px 0;}
.switchbtn{ color:#c5ebff; padding:10px 0;}
.switchbtn a{ color:#fff; display:inline-block; padding:4px 8px; border:1px solid #fff;}
.switchbtn a:first-child { border-right:none}
.switchbtn a:last-child { background:#fff; color:#378bd6;}
.switchbtn a:hover { text-decoration:underline;}