@charset "utf-8";

/* ======================================
	Media Queries
====================================================================================================================================== */

@media (max-width: 1399.9px) {
	.message-box p.topic_text { -webkit-line-clamp:4; } /** 文章字限制行數 **/
	.block_body .topic_text   { -webkit-line-clamp:4; } /** 文章字限制行數 **/

	.xxl-hidden { display:none !important; }

	.line-clamp-xxl-1 { -webkit-line-clamp:1; }
	.line-clamp-xxl-2 { -webkit-line-clamp:2; }
	.line-clamp-xxl-3 { -webkit-line-clamp:3; }
	.line-clamp-xxl-4 { -webkit-line-clamp:4; }
	.line-clamp-xxl-5 { -webkit-line-clamp:5; }
	.line-clamp-xxl-6 { -webkit-line-clamp:6; }
	.line-clamp-xxl-7 { -webkit-line-clamp:7; }
	.line-clamp-xxl-8 { -webkit-line-clamp:8; }
	.line-clamp-xxl-9 { -webkit-line-clamp:9; }
}

@media (max-width: 1199.9px) {
	.page-flex-left  { order:1; width:240px; margin-right:1.5rem; }
	.page-flex-right { order:2; width:calc(100% - 240px - 1.5rem); }

	.message-box p.topic_text { -webkit-line-clamp:3; } /** 文章字限制行數 **/
	.block_body .topic_text   { -webkit-line-clamp:3; } /** 文章字限制行數 **/

	.xl-hidden { display:none !important; }

	.line-clamp-xl-1 { -webkit-line-clamp:1; }
	.line-clamp-xl-2 { -webkit-line-clamp:2; }
	.line-clamp-xl-3 { -webkit-line-clamp:3; }
	.line-clamp-xl-4 { -webkit-line-clamp:4; }
	.line-clamp-xl-5 { -webkit-line-clamp:5; }
	.line-clamp-xl-6 { -webkit-line-clamp:6; }
	.line-clamp-xl-7 { -webkit-line-clamp:7; }
	.line-clamp-xl-8 { -webkit-line-clamp:8; }
	.line-clamp-xl-9 { -webkit-line-clamp:9; }
}

@media (max-width: 991.9px) {
	.header-top-flex { padding:10px; }

	.header-top-flex .flex-col-logo    { order:1; width:60%; }
	.header-top-flex .flex-col-trigger { order:2; width:40%; display:block; }
	.header-top-flex .flex-col-social  { order:3; width:50%; justify-content: flex-start; }
	.header-top-flex .flex-col-login   { order:4; width:50%; justify-content: flex-end; }

	.header-login-list .tiny-item { width:95px; }

	.main-menu-list > li { width:calc( 100% / 7 ); }

	.page-flex-left  { order:2; width:100%; margin-right:0; }
	.page-flex-right { order:1; width:100%; }
	.message-box p.topic_text { -webkit-line-clamp:2; } /** 文章字限制行數 **/
	.block_body .topic_text   { -webkit-line-clamp:2; } /** 文章字限制行數 **/
	.block_body .topic-item .topic_text   { -webkit-line-clamp:3; } /** 文章字限制行數 **/

	.lg-hidden { display:none !important; }

	.line-clamp-lg-1 { -webkit-line-clamp:1; }
	.line-clamp-lg-2 { -webkit-line-clamp:2; }
	.line-clamp-lg-3 { -webkit-line-clamp:3; }
	.line-clamp-lg-4 { -webkit-line-clamp:4; }
	.line-clamp-lg-5 { -webkit-line-clamp:5; }
	.line-clamp-lg-6 { -webkit-line-clamp:6; }
	.line-clamp-lg-7 { -webkit-line-clamp:7; }
	.line-clamp-lg-8 { -webkit-line-clamp:8; }
	.line-clamp-lg-9 { -webkit-line-clamp:9; }

	/* ======================================
		06. 頁首header設定
	=================================================================================================================== */
	.mobile-fixed-bar { display:block; }

	.logo { max-width:300px; margin-left:0; }

	.header-social-list .social-item { width:40px; height:40px; }

	.main-menu { display:none; }

	.mobile-quickly-bar { display:block; }

	.submenu-bottom {
		margin-left:5px;
	}

	/* ======================================
		07. 小螢幕時選單設定
	=================================================================================================================== */
	.menu-trigger { position:relative; display:block; top:2px; }

	.mobile-menu { display:block; }

	.page-overlay {
		display:none;
		position:fixed;
		z-index:9998;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		background:rgba(0,0,0,0.6);
		overflow:hidden;
	}

	.page-overlay.opened { display:block; }

	body.overflow-hidden { overflow:hidden; }



	/* ======================================
		08. 頁尾設定
	=================================================================================================================== */
	/*.footer { padding-bottom:20px; }
	.footer-flex-left { width:100%; margin-bottom:30px; }
    .footer-flex-center { width:50%; }
	.footer-flex-right { width:50%; }*/

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

	.copyright-left { width:100%; }
	.copyright-right { width:100%; }
	.copyright { line-height:25px; }
	.social-list { text-align:center; }
	.social-list li { width:30%; margin:0 5%; }

    .mobile-show { display:block; }



	/* ======================================
		11. 左側內容
	=================================================================================================================== */
	/*.aside-area { max-width:300px; margin:0 auto; }*/
	.aside-area.aside-search { display:none; }
	.sec-search { display:block; }

	.aside-item.aside-category { display:none; }



	/* ======================================
		12. 全頁面共同設定
	=================================================================================================================== */

	main { padding:15px; }

	.forum-iframe { overflow-y:auto; }
}

@media (max-width: 767.9px) {

	/*.header-login-list .tiny-item { width:90px; }*/

    .footer-flex-center { width:100%; margin-bottom:30px; }
	.footer-flex-right { width:100%; margin-bottom:10px; }

	.body_flex-left  { width:100%; }
	.body_flex-left .topic_title  { margin-bottom:0.25rem; }
	.body_flex-left.btn-topic  { margin-top:0.5rem; }
	.body_flex-right { width:100%; margin-left:0; text-align:left !important; }
	.body_flex-left.btn-topic  { order:3; }
	.body_flex-right.calendar  { order:2; }

	.md-hidden { display:none !important; }

	.line-clamp-md-1 { -webkit-line-clamp:1; }
	.line-clamp-md-2 { -webkit-line-clamp:2; }
	.line-clamp-md-3 { -webkit-line-clamp:3; }
	.line-clamp-md-4 { -webkit-line-clamp:4; }
	.line-clamp-md-5 { -webkit-line-clamp:5; }
	.line-clamp-md-6 { -webkit-line-clamp:6; }
	.line-clamp-md-7 { -webkit-line-clamp:7; }
	.line-clamp-md-8 { -webkit-line-clamp:8; }
	.line-clamp-md-9 { -webkit-line-clamp:9; }

	.topiclist dd { margin-left:10px !important; margin-right:10px !important; }

	.bbcode-color-box { display:none !important; }

	/* ===================================================================================================================
		發文、PM、刊登商品之 YouTube 自動縮放
	=================================================================================================================== */
	.videobox2 {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
	}

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


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

	/* ======================================
		06. 頁首header設定
	=================================================================================================================== */
	.header-top-bar:before { display:none; }

	ul.ucp-menu > li, ul.mcp-menu > li { position:static; }
}




@media (max-width: 575.9px) {

	main, .heading a, .heading .title { background:#f5f5f5; }
	.header-top-flex .flex-col-login { width:100%; margin-top:20px; }
	.header-top-flex .flex-col-social { width:100%; }


	/*.header-login-list li { margin-right:15px; }*/
	/*.header-login-list .tiny-item { width:80px; }*/

	[class*=FORUM_B] .hr2-3 { margin:0.25rem !important; }

	.body_flex-left.btn-topic { margin-top:0.75rem; }
	.btn-topic a { padding:10px 15px; }

	.topic-item-y .col-12 img { margin-bottom:0.5rem; }

	.sm-hidden { display:none !important; }
	.sm-show   { display:block !important; }

	.line-clamp-sm-1 { -webkit-line-clamp:1; }
	.line-clamp-sm-2 { -webkit-line-clamp:2; }
	.line-clamp-sm-3 { -webkit-line-clamp:3; }
	.line-clamp-sm-4 { -webkit-line-clamp:4; }
	.line-clamp-sm-5 { -webkit-line-clamp:5; }
	.line-clamp-sm-6 { -webkit-line-clamp:6; }
	.line-clamp-sm-7 { -webkit-line-clamp:7; }
	.line-clamp-sm-8 { -webkit-line-clamp:8; }
	.line-clamp-sm-9 { -webkit-line-clamp:9; }

	.pic-in-right { padding-left:0; }
	.pic-in-left { padding-right:0; }

	.block_body { border:0 !important; }
	.ucp .topic_img img { max-width:35% !important; }
	.features li { min-height:auto !important; }

}


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

	.header-top-flex, main {
		margin-left: calc(-0.5 * var(--bs-gutter-x));
		margin-right: calc(-0.5 * var(--bs-gutter-x));
	}

	/* ======================================
		02. 其他基本設定
	=================================================================================================================== */
	.thumbnail-list.four-cols-list > li { width:50%; }


	.link-list.four-cols-list > li { width:100%; }
	.link-list.three-cols-list > li { width:100%; }
	.store-list.four-cols-list > li { width:100%; }
	.store-list.three-cols-list > li { width:100%; }

	.product-list.three-cols-list > li { width:100%; }
	.product-list.four-cols-list > li { width:100%; }

	.article-list.three-cols-list > li { width:100%; }
	.article-list.four-cols-list > li { width:100%; }

	.ss-hidden { display:none !important; }
	.ss-show   { display:block !important; }
	.mobile-show { display:block !important; }

	.message-box p.topic_text { -webkit-line-clamp:1; } /** 文章字限制行數 **/
	.block_body .topic_text   { -webkit-line-clamp:1; } /** 文章字限制行數 **/

	/* ======================================
		06. 頁首header設定
	=================================================================================================================== */
	.header-top-flex .flex-col-login { width:100%; }
	.header-top-flex .flex-col-social { width:100%; }

	/*.header-login-list .tiny-item { width:50px; }*/
    .ss-12 { display:block; margin-bottom:2px; }
	/* ======================================
		08. 頁尾設定
	=================================================================================================================== */
	.footer-info-item { display:block; }

}

@media only screen and (max-width:390px) {
	.header-top-flex .flex-col-logo    { width:65%; }
	.header-top-flex .flex-col-trigger { width:35%; }

	.s1-hidden			{ display:none !important; }
	.s1-block			{ display:block !important; }
	.s1-inline-block	{ display:inline-block !important; }
	/*.header-login-list .tiny-item { width:45px; }*/
	.header-top-flex .header-login-list { justify-content:center; }

	.bbcode-fontsize-box { top:-45px; left:-45px; }
}




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

	.header-top-flex .flex-col-login { width:100%; margin-top:20px; }
	.header-top-flex .flex-col-social { width:100%; justify-content:center; }
	.header-top-flex .header-login-list { justify-content:center; }
	.header-login-list li { margin-right:5px; }
	.header-login-list .tiny-item { width:70px; height:40px; }
	.header-login-list .tiny-item a { font-size:0.9rem; }

	.ss-12 { display:inline; }

	.s2-hidden			{ display:none !important; }
	.s2-block			{ display:block !important; }
	.s2-inline-block	{ display:inline-block !important; }
}


@media only screen and (max-width:326px) { /*101 ~ 115%*/
	.s3-hidden							{ display:none !important; }
	.s3-block							{ display:block !important; }
	.s3-inline-block					{ display:inline-block !important; }

	.footer-info li						{ font-size:1rem; }

	.ucp-menu li a img, .mcp-menu li a img	{ max-width:80% !important; }
}

@media only screen and (max-width:300px) { /*116 ~ 125 %*/
	.s4-hidden							{ display:none !important; }
	.s4-block							{ display:block !important; }
	.s4-inline-block					{ display:inline-block !important; }

	.footer-info li						{ font-size:0.95rem; }
}

@media only screen and (max-width:250px) { /*126 ~ 150 %*/
	.s5-hidden							{ display:none !important; }
	.s5-block							{ display:block !important; }
	.s5-inline-block					{ display:inline-block !important; }
}

@media only screen and (max-width:214px) { /*151 ~ 175 %*/

	.header-top-flex .flex-col-logo    { width:75%; }
	.header-top-flex .flex-col-trigger { width:25%; }
	.menu-trigger { width: 25px; margin-left: calc(100% - 25px); }
	.menu-trigger-txt { font-size:0.75em; }

	.header-social-list .social-item { width:35px; height:35px; }
	.s6-hidden							{ display:none !important; }
	.s6-block							{ display:block !important; }
	.s6-inline-block					{ display:inline-block !important; }

	.ucp-menu li a img, .mcp-menu li a img	{ max-width:90% !important; }
}

@media only screen and (max-width:200px) { /*175 ~ 200 %*/
	.header-login-list .tiny-item { width:45px; height:42px; }
}

@media only screen and (max-width:188px) { /*175 ~ 200 %*/
	.s7-hidden							{ display:none !important; }
	.s7-block							{ display:block !important; }
	.s7-inline-block					{ display:inline-block !important; }

	.ucp-menu li a img, .mcp-menu li a img	{ max-width:100% !important; }
}

@media only screen and (max-width:181.9px) { /*200 ~ 250 %*/
	.s8-hidden							{ display:none !important; }
	.s8-block							{ display:block !important; }
	.s8-inline-block					{ display:inline-block !important; }
}