@charset "utf-8";

@font-face {
  font-family:'Pigeon-font';
  src:url('../fonts/Pigeon-font-Regul.woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}

@font-face {
  font-family:'Pigeon-font';
  src:url('../fonts/Pigeon-font-Bold.woff2') format('truetype');
  font-weight:bold; font-style:normal; font-display:swap;
}

@font-face {
  font-family:'Lato';
  src:url('../fonts/Lato-Regular.woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}

@font-face {
  font-family:'Lato';
  src:url('../fonts/Lato-Bold.woff2') format('truetype');
  font-weight:bold; font-style:normal; font-display:swap;
}

/* ======================================
	01. 其他基本設定
	02. 表單元件基本設定
	03. 分頁設定
	04. 回頂端按紐
	05. 頁首header設定
	06. 小螢幕時選單設定
	07. 頁尾footer設定
	08. 全頁面共同設定
====================================== */



/* ======================================
	01. 其他基本設定
========================================= */
html { scroll-behavior:auto !important; } /*修正 bootstrap 造成回頂端流暢不順*/

html, body {
	height:100%;
	font-family:'Pigeon-font', 'Source Han Sans', '微軟正黑體', sans-serif;
	background:#073043;
	background-size:100% auto;
	/*background:linear-gradient(#08394f, #073043, #08394f);*/
}

.wrapper {}

h1, h2, h3, h4, h5, h6 { font-weight:bold; }

/* a鏈結字 */
a                { color:#285cb5; text-decoration:none !important; }
a:hover, a:focus { color:#db0f0f; }

ul, li, ol { margin:0px; padding:0px; list-style:none; }

img { max-width:100%; height:auto; border-width:0; }

.gen      { font-size:1.05rem; }
.genmed   { font-size:1.1rem; font-weight:bold; }
.genbig   { font-size:1.15rem; }
.gensmall { font-size:0.95rem; }

.coco     { font-family:'Lato', 'Source Han Sans', sans-serif; }

.row-gap1 { row-gap:0.25rem; } /*上下行距*/
.row-gap2 { row-gap:0.5rem; }
.row-gap3 { row-gap:0.75rem; }
.row-gap4 { row-gap:1rem; }
.row-gap5 { row-gap:1.5rem; }
.row-gap6 { row-gap:2rem; }

.col-gap1 { column-gap:0.25rem; } /*左右間隔*/
.col-gap2 { column-gap:0.5rem; }
.col-gap3 { column-gap:0.75rem; }
.col-gap4 { column-gap:1rem; }
.col-gap5 { column-gap:1.5rem; }
.col-gap6 { column-gap:2rem; }

/*.mt-co2 { margin-top:-0.5rem !important; }
.mt-co3 { margin-top:-1rem !important; }*/

[class*=line-clamp-] { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }/*文字行數*/
.line-clamp-1 { -webkit-line-clamp:1; } /*文字限制行數*/
.line-clamp-2 { -webkit-line-clamp:2; }
.line-clamp-3 { -webkit-line-clamp:3; }
.line-clamp-4 { -webkit-line-clamp:4; }

hr.hr1 { border-style:solid; }
hr.hr2 { border-style:dotted; }
hr.hr3 { border-style:dashed; }

.w100p { width:100%; }


form { margin:0px; display:inline; }
input, select, textarea, .input, .select, .textarea {
    padding:3px;
    color:#333;
    background-color:#fff;
    border:1px solid #ccc;
	border-radius:0.25rem;
	/*vertical-align:middle;*/
    transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/*表單欄位提示 placeholder */
input::placeholder, select::placeholder, textarea::placeholder { font-family:'Pigeon-font', 'Source Han Sans', '微軟正黑體', sans-serif; font-size:1rem; color:#bbb !important; }

/* ======================================
	04. 回頂端按紐
========================================= */
#scrolltop { display:none; }

#scrolltop.show { display:block; width:40px; height:40px; position:fixed; right:10px; bottom:15px; color:#fff; text-align:center; line-height:2.5; opacity:0.7;
    cursor:pointer;
	background:radial-gradient(#56a8f0, #2d74c1, #31577e);
    outline:2px solid #fff;
    border-radius:50%;
}
#scrolltop:hover { opacity:1; background:radial-gradient(#f22f2f, #c01f1f, #861515); }

#scrolltop i { animation:scroll-show 1.2s infinite; }
#scrolltop:hover i { animation:scroll-show paused; }

@keyframes scroll-show {
	0%   {opacity:0; transform:translateY(10px);}
	25%  {opacity:1; transform:translateY(6px);}
	50%  {opacity:1; transform:translateY(2px);}
	75%  {opacity:1; transform:translateY(-8px);}
	100% {opacity:0; transform:translateY(-10px);}
}



/* ======================================
	頁首header設定
========================================= */
header {
	background-size:100% auto;
	margin-bottom:15px;
	z-index:99;
}

.mobile-fixed-bar {
	display:none;
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
	background:#e2f2fb;
	box-shadow:0 -2px 5px rgba(0,0,0,0.2);
}
.mobile-fixed-list { display:flex; flex-wrap:wrap; align-items:center; }
.mobile-fixed-list > li { width:25%; }


.mobile-fixed-item a {
	display:block;
	padding:13px 5px;
	line-height:1;
	text-align:center;
	position:relative;
	border-right:1px solid #c1d9f4;
	border-top:1px solid #c1d9f4;
}
.mobile-fixed-item .title {
	display:block;
	font-weight:bold;
	font-size:18px;
	color:#000;
	line-height:1;
	letter-spacing:0;
}

.fixed-menu-toggle-wrap { position:relative; }

.fixed-menu-toggle-contnet {
	width:100%;
	min-width:140px;
	padding-bottom:45px;
	position:absolute;
	bottom:0;
	right:0;
	background:#e2f2fb;
	box-shadow:-1px -2px 5px rgba(0,0,0,0.2);
	visibility:hidden;
	opacity:0;
}
.fixed-menu-toggle-contnet.opened {
	display:block;
	visibility:visible;
	opacity:1;
}

.fixed-menu-list { position:relative; display:flex; flex-wrap:wrap; }
.fixed-menu-list li { width:100%; }
.fixed-menu-list li a {
	display:block;
	padding:16px 5px;
	position:relative;
	font-size:17px;
	color:#000;
	text-align:center;
	line-height:1.5;
	letter-spacing:0;
	border-bottom:1px solid #c1d9f4;
}
.fixed-menu-list li:last-child a { border-bottom-width:0px; }
.fixed-menu-list li a .title { display:block; }

.header-top-flex {
	display:flex;
	padding:20px;
	margin:0;
	flex-wrap:wrap;
	align-items:stretch;
	background:linear-gradient(to right, #1e486e, #1e4f77, #1e5780, #1e5f8c, #1e5c88, #1e5078, #1e4266, #1e4a71, #1e537c, #1e4a71, #1f4367, #1e3f62);
}

.header-top-flex .flex-col-logo    { width:50%; }
.header-top-flex .flex-col-banner  { width:50%; }
.header-top-flex .flex-col-social  { width:50%; display:flex; align-items:center; justify-content:flex-end; }
.header-top-flex .flex-col-login   { width:50%; }
.header-top-flex .flex-col-trigger { display:none; }

.logo { display:block; position:relative; display:block; max-width:350px; }

/*登入、註冊*/
.header-login-list { display:flex; align-items:center; justify-content:flex-end; }
.header-login-list li { margin-right:30px; }
.header-login-list li:last-child { margin-right:0; }
.header-login-list a {
	width:110px; height:40px; display:flex; align-items:center; justify-content:center;
	font-weight:bold; font-size:calc(1rem + 0.2vw); color:#fff;
	outline:1px solid #fff;
	border-radius:5px;
	overflow:hidden;
}
.header-login-list a:hover { box-shadow:1px 1px 3px rgba(0,0,0,1); }
.item-register 	{ background:#0a4a22; }
.item-login 	{ background:#950095; }

/*社群*/
.header-social-list { display:flex; align-items:center; }
.header-social-list li { margin-right:16px; }
.header-social-list li:last-child { margin-right:0; }
.header-social-list li.mobile-show { display:none; }

.header-social-list a { width:64px; height:64px;
	cursor:pointer;
	font:normal 60px/1 "FontAwesome";
	background:#fff;
	outline: 1px solid #fff;
	border-radius:50%;
}
.fa-top-line::before{content:"\f3c1"; color:#3acd01}
.fa-top-tw_cn::before{content:"\f801"; color:#f46d00}
.fa-top-mail::before{content:"\f802"; color:#0043ab}
.fa-top-youtobe::before{content:"\f803"; color:#cf2200}
.fa-top-fb::before{content:"\f804"; color:#3b5998}



/* ======================================
	06. 主選單設定
========================================= */
.main-menu {
	height:50px;
	position:relative;
	z-index:99;
}

/*選單*/
.main-menu-list {
	display:table;
	width:100%;
	font-family:'Source Han Sans', '微軟正黑體', sans-serif;
	text-align:center;
	background:#f5f9fd;
	background:linear-gradient(#f5f9fd, #d0e5f9);
}

/*選單-第一層*/
.main-menu-list > li {
	position:relative;
	width:calc( 100% / 8 );
	display:table-cell;
	padding:0;
	line-height:45px;
	font-weight:bold;
	font-size:1.38rem;
	color:#212;
	border-top:5px solid #063465;
	border-right:1px solid #b3cce4;
}

.main-menu-list a { display:block; color:#212; }
.main-menu-list > li:last-child { border-right:0; }
.main-menu-list > li.active, .main-menu-list > li:hover { color:#c00; background:#f5f9fd; border-top:5px solid #f7671a; }
.main-menu-list > li a:hover, .main-menu-list li > li:hover, .main-menu-list > li.active > a { color:#c00; }
.main-menu-list > li:hover li { color:#212; }

/*選單-第一層滑鼠移過秀出第二層 ul 區塊*/
.main-menu-list > li:hover > ul {
	visibility:visible;
	opacity:1;
	transform:translateY(0);
}

/*選單-第二層*/
.main-menu-list ul {
	width:100%;
	position:absolute;
	left:0;
	background:#f5f9fd;
	background:linear-gradient(to right, #d0e5f9, #f5f9fd, #d0e5f9);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);
	visibility:hidden;
	opacity:0;
	transition:opacity 0.5s ease, transform 0.5s ease;
	transform:translateY(5px);
}

.main-menu-list ul > li a { font-weight:bold; font-size:1.25rem; color:#212; border-top:1px solid #b3cce4; }
.main-menu-list ul > li:hover { background:#bfecfb; color:#c00; }
.main-menu-list ul > li a:hover { color:#c00; }

/*選單-第二層滑鼠移過秀出第三層 ul 區塊*/
.main-menu-list > li > ul > li:hover > ul {
	visibility:visible;
	opacity:1;
	transform:translateY(0);
}

/*選單-第三層*/
.main-menu-list ul > li > ul {
	left:100%;
	top:0;
	position:absolute;
	background:linear-gradient(to right, #bfecfb, #f1fbfe, #bfecfb);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);
	visibility:hidden;
	opacity:0;
	transition:opacity 0.5s ease, transform 0.5s ease;
	transform:translateX(5px);
}

.main-menu-list ul > li > ul > li a { border-top:1px solid #b3cce4; color:#212; font-weight:bold; font-size:1.25rem; }
.main-menu-list ul > li > ul > li a:hover { background:#abecfc; color:#c00; }



/* ======================================
	06. 小螢幕時選單設定
========================================= */
/*小螢幕時選單鈕*/
.menu-trigger {
	display:none;
	width:32px;
	margin-left:calc(100% - 32px);
}

.menu-trigger-icon {
	padding:calc(3px + 0.3vw) 0;
	position:relative;
	color:#c00;
	text-align:center;
	background:#fff;
	border-radius:3px;
	overflow:hidden;
}

.menu-trigger-txt { margin-top:4px; font-size:calc(13px + 0.3vw); color:#fff; line-height:1; text-align:center; }

/*小螢幕時選單*/
.mobile-menu {
	display:none;
	width:280px;
	max-width:100%;
	height:100%;
	height:100vh;
	padding:15px;
	position:fixed;
	top:0;
	bottom:0;
	right:-280px;
	z-index:9999;
	background:#dcf5fe;
	overflow-y:auto;
	overflow-x:hidden;
	box-shadow:0 4px 10px rgba(0, 0, 0, 0.2);
	transition:transform 0.5s ease;
}
.mobile-menu.opened {
	transform:translateX(-280px);
}

/*mobile選單*/
.mobile-menu-list { font-family:'Source Han Sans', '微軟正黑體', sans-serif; margin-top:10px; margin-bottom:30px; }
.mobile-menu-list li { position:relative; display:block; }
.mobile-menu-list li a { display:block; padding:10px 20px 10px 10px; position:relative; font-size:20px; color:#000; border-bottom:1px solid rgba(0, 0, 0, 0.2); }
.mobile-menu-list li a:hover { color:#2483bc; }

/*第一層*/
.mobile-menu-list > li > a { font-weight:bold; }
.mobile-menu-list > li:first-child a { border-top:1px solid rgba(0, 0, 0, 0.2); }

/*第二層之後的層級收縮*/
.mobile-menu-list ul {
	display:none;
	width:100%;
	position:relative;
	top:0;
	left:0;
}

/*第二層*/
.mobile-menu-list ul li a {
	padding-left:25px;
	font-size:1.2rem; /*第二層之後的文字字級*/
}

/*第三層*/
.mobile-menu-list ul ul li a { padding-left:42px; opacity:0.8; }

/*第四層*/
.mobile-menu-list ul ul ul li a { padding-left:58px; opacity:0.6; }

/*第一層有下層點開之後變化*/
.mobile-menu-list > li.current { background:#badbfc; }
.mobile-menu-list > li.current > a { background:#0f497d; color:#fff !important; }
.mobile-menu-list > li.current a { border-bottom:1px solid rgba(255, 255, 255, 0.8); }
.mobile-menu-list > li.current > a .submenu-button:before { border-right-color:#fff; border-bottom-color:#fff;  }

/*第二層之後有下層點開之後變化*/
.mobile-menu-list li li.current li { background:#87e9ff; }
.mobile-menu-list li li.current > a { color:#d12921 !important; }
.mobile-menu-list li li.current > a .submenu-button:before { border-right-color:#d12921; border-bottom-color:#d12921;  }

.mobile-menu-header-area { text-align:center; }

/*關閉選單按鈕*/
.menu-close-trigger { display:flex; align-items:center; justify-content:center; }
.close-trigger-icon, .close-trigger-txt {
	display:inline-block;
}
.close-trigger-icon {
	position:relative;
	height:30px;
}
.close-trigger-icon:before, .close-trigger-icon:after {
	width:3px;
	height:100%;
	position:absolute;
	left:30px;
	top:0;
	content:"";
	background:#a40018;
}
.close-trigger-icon:before {
	transform:rotate(45deg);
}
.close-trigger-icon:after {
	transform:rotate(-45deg);
}

.close-trigger-txt { margin-left:50px; font-size:15px; color:#a40018; text-transform:uppercase; }


/*有下層之提示圖樣*/
.submenu-bottom {
	display:inline-block;
	width:7px;
	height:7px;
	position:relative;
	top:-5px;
	left:7px;
}
.submenu-bottom:before {
	width:7px;
	height:7px;
	position:absolute;
	border-right:2px solid #2e1011;
	border-bottom:2px solid #2e1011;
	content:"";
	transform:rotate(45deg);
}

.mobile-menu-list > li.current > a > .submenu-bottom:before {
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
}

/*滑鼠移入動畫*/
.main-menu-list > li:hover .submenu-bottom {
	transition:opacity 0.3s ease, transform 0.3s ease;
	transform:translateY(10px);
}

/*有右層之提示圖樣*/
.submenu-right {
	display:inline-block;
	width:7px;
	height:7px;
	position:relative;
	top:-3px;
	left:7px;
}
.submenu-right:before {
	width:7px;
	height:7px;
	position:absolute;
	border-right:2px solid #212;
	border-bottom:2px solid #212;
	content:"";
	transform: rotate(315deg);
}

/*滑鼠移入動畫*/
.main-menu-list > li > ul > li:hover .submenu-right {
	transition:opacity 0.3s ease, transform 0.3s ease;
	transform:translateX(10px);
}



/* ======================================
	07. 頁尾footer設定
========================================= */
footer { position:relative; padding-top:1rem; padding-bottom:1rem; color:#fff; text-shadow:2px 1px 5px #000; }

.footer-flex { display:flex; flex-wrap:wrap; }
.footer-flex-left { width:35%; }
.footer-flex-center { width:35%; }
.footer-flex-right { width:30%; }

.footer-info li { font-size:1.05rem; }
.footer-info li span, .footer-info li a { color:#84d7ff; letter-spacing:0.03rem; }
.footer-info-item { display:inline-block; margin-right:20px; }

.footer-info.right-side { text-align:right; margin-bottom:5px; }
.footer-info.right-side  li span { margin-right:0; margin-left:6px; }

.footer-blod { font-weight:bold; font-size:20px; color:#5fb; padding-bottom:10px }

.qrcode-list li { display:inline-block; width:115px; margin:0 5%; }
.qrcode-list li img { display:block; max-width:100%; height:auto; border:5px solid #fff; }

.copyright { width:100%; padding-top:20px; margin:10px auto; font-size:15px; color:#fff; text-align:center; border-top:1px solid #185b72; }

.mobile-show { display:none; }



/* ======================================
	08. 全頁面共同設定
========================================= */
.main {
	padding:20px !important;
	background:#fff;
	border-radius:5px;
	box-shadow:2px 2px 10px rgba(0, 0, 0, 0.3);
}

.page-flex       { display:flex; flex-wrap:wrap; }
.page-flex-left  { order:1; width:260px; margin-right:1.5rem; }
.page-flex-right { order:2; width:calc(100% - 260px - 1.5rem); }

.calendar { color:#666; }

.none { display:none; }
.background-none { background:none !important; }

/* ======================================
	按鈕
========================================= */
.btn-topic a { padding:5px 10px; display:inline-block; white-space:nowrap; font-size:18px; font-weight:bold; color:#fff; background:#207bb3; border-radius:10px 0; }
.btn-topic a:hover, .btn-topic a:focus { color:rgba(255, 255, 255); background:#2767ad; border-radius:0 10px; }



/* ======================================
	index 首頁使用
========================================= */
.block-item { margin-bottom:2.5rem; border-radius:0.25rem; }
.block-item:last-child { margin-bottom:.5rem }
.block-item-box { box-shadow:0 0 8px #ddd; }

.block_title { border-radius:0.25em 0.25em 0 0; border-bottom:3px solid #8bc34a; }
.more        { padding:0.75rem 0.5rem 0; margin-top:1rem; font-size:0.9rem; text-align:right; border-top:1px dotted #ddd; }

.block_body   { word-wrap:break-word; word-break:break-all; border-radius:0.25em; }
.block_body.radius0  { border-top-left-radius:0; border-top-right-radius:0; }

.block_body .topic-box, .block_body .offer-box { padding:0.5rem; background:#fff; border:1px solid #ccc; border-radius:0.25rem; box-shadow:0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%); }

.pic-item { border-bottom:4px solid #8bc34a; }
.text-item { border-left:5px solid #8bc34a; }

.topic-box .img-thumbnail { border:0; border-bottom:1px solid #fff; padding:0 !important; border-radius:0; }

.body_flex       { display:flex; flex-wrap:wrap; }
.body_flex-left  { flex-grow: 1; }
.body_flex-right { width:150px; margin-left:1rem; }

.forum-iframe { overflow-y:hidden; overflow-x:hidden; }
.forum-iframe:hover, .forum-iframe:focus { overflow-y:auto; }
.forum-iframe::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0); background-color:#eaf9fb; } /*捲軸底色*/
.forum-iframe::-webkit-scrollbar { width:6px; } /*捲軸寬度*/
.forum-iframe::-webkit-scrollbar-thumb { background-color:#47bdd6; } /*捲軸本體顏色*/

/*拍賣、展售商品*/
.block-item .sub_title { margin-bottom:0.5rem; font-size:1.05rem; color:#096; }
.block-item .offer_data { font-size:1.15rem; }
.block-item .coco { color:#c00; }

/* ======================================
	ICON 文字
========================================= */
.fa-user { color:#16c; } /*帳號*/
.fa-key { color:#c22; } /*密碼*/
.show_pass { color:#666; position:relative; left:calc(100% - 60px); top:32px; cursor:pointer; } /*檢視密碼*/
.avast-pam-login, .avast-pam-pass_gen { display:none !important; opacity:0 !important; } /*清除火狐瀏覽器+Avast登入及密碼框key提示*/



/* ======================================
	發文、PM、刊登商品之 YouTube 自動縮放
========================================= */
.block_body iframe { width:100%; }

.videobox {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.videobox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}