@charset "utf-8";

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

@media (max-width: 1399.9px) {
	.xxl-hidden { display:none !important; }
	.xxl-show   { display:block !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); }

	/*.main-menu-list a { font-size:1rem; padding:0 5px; }*/

	.xl-hidden { display:none !important; }
	.xl-show   { display:block !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) {
	.banner_block { min-height:100px; }

	.flex-col-trigger { position: absolute; right: 5px; top: 5px; }

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

	/*.ok-pop { width:50%; top:2rem; left:25%; }*/


	.lg-hidden { display:none !important; }
	.lg-show   { display:block !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;
	}

	.wrapper-bg:after {
		background-size:100% auto;
		opacity:0.8;
	}

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

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

	.tiny-item a { font-size:17px; }
	/*.main-menu { display:none; }*/
	#loft_banner { margin-bottom:3px; box-shadow: 0 0 3px #666; }

	.submenu-bottom:before {
	    border-right: 2px solid #000;
	    border-bottom: 2px solid #000;
	}

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

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

	/* ======================================
		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; }
	.footer-info-list.right-side li span { margin-right:6px; margin-left:0; }


	.social-list { text-align:center; }
	.social-list li { width:30%; margin:0 5%; }*/

    .mobile-show { display:block; }



	/* ======================================
		11. 左側內容
	=================================================================================================================== */
	.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) {

	.banner_block { min-height: 80px; }

	.copyright { line-height:1.5; }

	.page-flex-left { order:2; width:100%; max-width:280px; margin-top:1.5rem; margin-left:auto; margin-right:auto; display:none; }
	.page-flex-right { order:1; width:100%; }

	.md-hidden { display:none !important; }
	.md-show   { display:block !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; }


	.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) {
	.banner_block { min-height: 60px; }
	/* ======================================
		06. 頁首header設定
	=================================================================================================================== */
	.logo img { max-width:70%; }



	.pigeon-list { flex: 0 0 auto; width: 50%; }

}




@media (max-width: 575.9px) {
	#loft_banner { padding:5px; }
	.banner_block { padding:2px; }
	.banner_block span { left:10px; }

	main { padding:10px; background:#f5f5f5; }
	.heading a, .heading .title { background:#f5f5f5; }

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

	/* ======================================
		自適應表格設定
	=================================================================================================================== */
	.rwd-table th { display:none; }

	.rwd-table td { display:block; padding:0.25rem; margin:0.5rem; text-align:left; border:0; }


	.rwd-table .data-th {
		display: inline-block;
		/*width: 5rem;*/
		font-weight: bold;
		color: #a00;
	}

	.rwd-table td input[type=text] { display:block; /*width:calc(100% - 5rem); display:inline-block;*/ } /*自適應表格之表單輸入欄位*/

	.action-block { display:inline-block; width: calc(100% - 4rem); }


	.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; }


	.block_body { border:0 !important; padding:0 !important; }

	.features li { min-height:auto !important; }

}


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

	#loft_banner, .main-menu, main, .copyright {
		margin-left:-10px;
		margin-right:-10px;
	}

	.pigeon-list { width: 100%; }


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


	/* ======================================
		06. 頁首header設定
	=================================================================================================================== */
	.tiny-item a { font-size:15px; font-weight:400; }
    .ss-12 { display:block; margin-bottom:2px; }
}

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

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

	.tiny-item a { font-size:14px; }

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




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

	.tiny-item a { font-size:15px; font-weight:600; }
	.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; }
}

@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; }
}

@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; }

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


@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; }
}

@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; }
}