@charset "utf-8";
/* CSS Document */
/**
 * 主站用選單 ( ltwww3 + ltnews3 )
 * 
 * css/ltn_header.css
 * application/views/cache_ltn_header.php
 * application/views/block/ltn_header.php
 */

div.ltnheader * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family:"微軟正黑體"; }
div.ltnheader {	width:100%; height:100px; overflow: hidden; border-bottom:1px solid #dcdcdc; background-color: #fff; position:fixed; top: 0; z-index: 5; /*全站統一 z-index:5;*/ }

.headerP_high { width:100%; height:100px; } /* 配合程式 (PC→100 | M→150) */

@media screen and (max-width:800px){ /* 配合快訊轉 M 版 #marqueeHeader，高度撐開 */
	div.ltnheader { height:150px; }
	.headerP_high { height:152px; }
}

div.ltnheader .row1 { max-width: 1260px; height:60px; margin: 0 auto; padding:12px 0 0; }

/* for pad and mobile */
div.ltnheader .row1 .ltnSearch, div.ltnheader .row1 .nav_bar { display:none; }

/*----- LOGO -----*/
div.ltnheader .row1 a.logo { display:inline-block; width:185px; }
div.ltnheader .row1 a.logo img { width:100%; }

/*----- LOGO右側 關鍵字 -----*/
.row1 ul.header_kw { display: inline-block; margin:0 0 7px 30px; }
.row1 ul.header_kw > li { float:left; }
.row1 ul.header_kw li.h_kw a { font-size:16px; border-radius:20px; border:1px solid #d66900; padding:2px 12px 3px; margin:0 15px 0 0; }
.row1 ul.header_kw li.h_kw a:hover { color:#d66900; }
/*----- 搜尋 for PC -----*/
.ltnsch_show { display: inline-block; float:right; margin:5px 0 0 0; position:relative; }
.ltnsch_show input { width:200px; height:30px; padding:0 10px; border-radius: 20px; border: 1px solid #999; background-color: #fff; outline: none; transition: all 0.3s; color: #555; position:absolute; top:0; right:0; }
.ltnsch_show form button { display:inline-block; width:30px; height: 30px; background:url(https://cache.ltn.com.tw/images/icon/g_search.svg) no-repeat center, transparent; background-size:20px; border:none; position:absolute; top:0; right:6px; z-index:1; cursor:pointer; padding:0; }

@media screen and (max-width:1270px){
	div.ltnheader .row1 { padding:12px 10px 0; }
}
@media screen and (max-width:800px){   /* 快訊轉 M 版 */
	div.ltnheader .row1 { max-width:none; width:100%; height:45px; }
	div.ltnheader .row1 a.logo { width: 160px; }
	div.ltnheader .row1 ul.header_kw { display:none; } /* 隱藏 LOGO右側 關鍵字 */
	div.ltnheader .row1 .ltnsch_show { display:none; } /* 隱藏 搜尋 for PC */
}

/*----- 選單 -----*/
div.ltnheader .row2 { width:100%; height:40px; background-color:#f3f3f3; scrollbar-width:thin; overflow-y:hidden; }
div.ltnheader .row2 ul { max-width: 1260px; margin: 0 auto; display:flex; flex-direction:row; flex-wrap:nowrap; gap:0 10px; }
div.ltnheader .row2 ul li { flex-shrink: 0; }
div.ltnheader .row2 ul li a { line-height:40px;	font-size:17px; letter-spacing:0.5px; }
/* 舊版scrollbar */
div.ltnheader .row2::-webkit-scrollbar { height:10px; }
div.ltnheader .row2::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 3px; }
div.ltnheader .row2::-webkit-scrollbar-track { background: transparent; }
	
div.ltnheader .row2 ul li.li_TT a, div.ltnheader .row2 ul li.li_rich a { letter-spacing: -0.01rem; } /* 財富自由 + TT */
div.ltnheader .row2 ul li a:hover, div.ltnheader .row2 ul li a:active { color:#c00; }

/*----- 隱藏：選單 關鍵字 + 箭頭指示 -----*/
div.ltnheader .row2 ul li.h_kw { display:none; margin:0 0 2px; }
div.ltnheader .row2 ul li.h_kw a { font-weight: bold; color:#a00; }
div.ltnheader .row2 ul li.h_kw:hover a { color: #680909; }
span.slipR { display:none; }

@media screen and (max-width:1270px){  /* 選單左右滑動 */
	div.ltnheader .row2 ul { padding:0 10px; }
}
@media screen and (max-width:800px){  /* 快訊轉 M 版 */
	div.ltnheader .row2 { border-bottom:3px solid #b03c3f; height: auto; }
	
	div.ltnheader .row2::-webkit-scrollbar { height:5px; }
	div.ltnheader .row2::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; }
	
	div.ltnheader .row2 { background-color:#fff; padding:5px 0 0 0; }
	div.ltnheader .row2 ul { width:1300px; max-width:none; margin:0; }

	/*----- 行動裝置：Search + Menu -----*/
    div.ltnheader .row1 .nav_bar, div.ltnheader .row1 .ltnSearch 
	{ display: block; width: 50px; height: 45px; position: absolute; top: 0px; z-index: 5; cursor: pointer; }
    div.ltnheader .row1 .nav_bar { background: url(https://cache.ltn.com.tw/images/icon/g_menu.svg) no-repeat center; background-size: 20px; right: 0; }
    div.ltnheader .row1 .ltnSearch { background: url(https://cache.ltn.com.tw/images/icon/g_search.svg) no-repeat center; background-size: 20px; right:50px; }
	
	/*----- 箭頭指示 -----*/
	div.ltnheader .row2 .slipR { display:block; width:40px; height:45px; font-size:17px; color:#a00; font-weight:bold; padding: 0 0 0 20px;
    line-height: 56px; position:absolute; right:0; top:42px; z-index:0;	background:linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 40%); background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 40%); }
}

/*----- 行動裝置：Search 遮罩 -----*/
.M_LTN_Search { width:100vw; height:100vh; position:fixed; z-index:200; top:0; left:0; right:0; overflow:hidden; display:none; }
.mobileMask { width:100vw; height:100vh; background:rgba(0,0,0,0.8); position:fixed; top:0; left:0; right:0; -webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px); }
.MSearch_con { width:100%; max-width:600px; min-width:300px; margin:0px auto; position:relative; padding:20px 0px 0px; }
.searchltn_close { width:58px; height:58px; background:url(https://cache.ltn.com.tw/images/icon/w_close.svg) no-repeat center; background-size:25px; position:absolute; top:0px; right:0px; cursor:pointer; }
.searchltn_close:active { background:url(https://cache.ltn.com.tw/images/icon/w_close.svg) no-repeat center,rgba(0,0,0,0.2); background-size:21px; }

form.formSearch { margin:50px 15px 0px; }
.formSearch input[type='text'] { height:50px; width:100%; border:1px solid transparent; border-bottom:1px solid #fff; background-color:transparent; padding:0px 8px; margin:0px auto;font-size:18px; font-family:"微軟正黑體"; font-weight:normal; line-height:1.5; color:#fff; border-radius:5px; }
button.formSearchbt { background-color:#222; border:1px solid #ffbf31; color:#ffbf31; font-size:16px; padding:10px 20px; margin:20px auto; border-radius:5px; cursor:pointer; }
button.formSearchbt:hover { background-color:#ffbf31; color:#000; }