@charset "utf-8";
/* CSS Document */
/**** 基礎元素 ****/
html { height:100%; font-size: 62.5%; }
body {
	/* 讓 ios 的字體變細 */
	-moz-osx-font-smoothing: grayscale; 
	-webkit-font-smoothing: antialiased;
	background-color:#fff;
	height:100%;
	font-size: 1.6rem;
	letter-spacing: .1rem;
}
ol, ul { list-style: none; padding:0px; margin:0px; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
* { box-sizing:border-box; }
/* 預設給 input 使用的樣式 , 常用項目：input[type="text"],input[type="password"],select,textarea */
.input_style_1 { border:1px solid #ccc; padding:5px 10px; border-radius:5px; }
h1,h2,h3,h4,h5,h6,span { font-weight: normal; }


/* ==== 唯獨首頁使用 Start ==== */
/* 關於我們 */
.index-aboutus { display: flex; flex-direction: column; background: url(../images/index_aboutus.jpg) no-repeat top center / cover; padding: 15rem 0; }
.index-aboutus article { width: 120rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.index-aboutus article .header { color: #0b2469; display: flex; flex-direction: column; font-weight: bold; align-items: center; margin-bottom: 3rem; }
.index-aboutus article .header .sub-header { font-size: 2.2rem; }
.index-aboutus article .header .main-header { font-size: 4.2rem; font-weight: bold; }
.index-aboutus article .text { width: 64%; font-weight: bold; line-height: 3rem; }
.index-aboutus article .btn { border-radius: 2rem; padding: .6rem 1.5rem; border: .1rem solid #333; transition: .3s; color: #333; }
.index-aboutus article .btn:hover { background-color: #1b7776; color: #fff; border: .1rem solid transparent; }

/* 商品 Slider 區塊 */
.index-products { display: flex; flex-wrap: nowrap; overflow-x: hidden; gap: 0; }
.index-products article { flex: 0 0 100%; background: no-repeat center / cover; min-height: 40rem; padding: 5rem 0; }
.index-products article .item { max-width: 120rem; margin: 0 auto; padding: 2rem 0; display: flex; justify-content: space-between; gap: 5rem; align-items: flex-end; }
.index-products article .item .info { color: #fff; background-color: #000000aa; padding: 1rem 2rem; }
.index-products article .item .info .tip { font-size: 1.4rem; line-height: 2rem; }
.index-products article .item .info .title { font-size: 4rem; letter-spacing: .2rem; line-height: 5rem;}
.index-products article .item .info .title span { font-size: 2.4rem;}
.index-products article .item .info .content { letter-spacing: .1rem; line-height: 2.6rem; }

/* 新聞與公告區塊 */
.index-news { display: flex; }
.index-news article { width: 120rem; margin: 0 auto; padding: 7rem 0; }
.index-news article .news-title { font-size: 2.4rem; letter-spacing: .2rem; margin-bottom: 2rem; font-weight: bold; }
.index-news article .news-box { display: grid; grid-template-columns: repeat(3,1fr); gap: 7rem 5rem; }
.index-news article .news-box .news-item { border-radius: .7rem; background-color: #fff; overflow: hidden; color: #333; transition: .3s; }
/* .index-news article .news-box .news-item:hover { box-shadow: 0 0 1rem 0 #00000099; } */
.index-news article .news-box .news-item:hover .img { transform: scale(1.1); }
.index-news article .news-box .news-item .imgbox { width: inherit; height: 22rem; overflow: hidden; }
.index-news article .news-box .news-item .img { background: no-repeat center / cover; width: inherit; height: inherit; transition: .7s; }
.index-news article .news-box .news-item .info { padding: 3rem 0rem; width: inherit;}
.index-news article .news-box .news-item .date { font-size: 1.4rem; }
.index-news article .news-box .news-item .title { font-size: 2rem; letter-spacing: .1rem; font-weight: bold; margin-bottom: 1rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.index-news article .news-box .news-item .content { line-height: 2.6rem;}

/* 應用領域 */
.index-solution { display: flex; justify-content: space-between; align-items: center; min-height: 50rem; background-color: #f3f3f3; width: 120rem; gap: 1rem; margin: 0 auto; }
.index-solution .left { width: calc( 40% - 1rem ); font-weight: bold; }
.index-solution .left header { margin-bottom: 2rem;}
.index-solution .left .main-header { font-size: 4.2rem; color: #0b2469;}
.index-solution .left .sub-header { font-size: 2.6rem; color: #333;}
.index-solution .left .text { font-size: 1.7rem; width: 65%; color: #444; }
.index-solution .right { width: 60%; display: flex; flex-direction: column; align-items: center; }
.index-solution .right.slide .box { display: flex; flex-wrap: nowrap; overflow: hidden; height:35rem; width: 100%; margin-bottom: 2.4rem; }
.index-solution .right.slide .box .item { display: flex; flex-wrap: nowrap; justify-content: space-between; flex: 0 0 100%; }
.index-solution .right.slide .box img { height: 35rem; }
.index-solution .right.slide .tips { display: flex; justify-content: center; gap: 2rem; }
.index-solution .right.slide .tips .item { border-radius: 50%; width: 2rem; height: 2rem; background-color: #999; border: .3rem solid #f3f3f3; transition: .3s; cursor: pointer; }
.index-solution .right.slide .tips .item:hover { border: .3rem solid #0b2469; }
.index-solution .right.slide .tips .item.focus { background-color: #0b2469; }


/* ==== 全域設定 Start ==== */
/* ==== 有引用 google fonts 的才能使用 ====
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
*/
.gfont-lato { font-family: "lato", sans-serif;  font-weight: 600; }

/* ==== 共用框架 Start ==== */
/* 因為選單定位點 ( sticky ) 的問題 , 所以 main-layout 框架不是只有首頁使用 */
.main-layout { display: grid; justify-content: stretch;}
.main-layout .banner { grid-area: 1/1/1/1; width: 100%; height: 95vh; }
.main-layout .banner.img { background: no-repeat center / cover; }
.main-layout .page-header { grid-area : 1/1/1/1; }

.banner { object-fit: cover; }

/* 頁首 */
.page-header { position: relative; top: 0; background-color: #00000066; display: flex; flex-direction: column; align-items: center; height: min-content; transition: .3s; z-index: 1; }
.page-header.sticky { position: sticky; }
.page-header.sticky .up-logo { display: none; }
.page-header .up-logo { width: 31rem; height: 3.4rem; background: url(../images/logo.svg) no-repeat center; filter: invert(100%); transition: .3s; cursor: pointer; margin: 3rem auto 1rem; }
.page-header .nav { display: flex; flex-direction: column; position: relative; align-items: stretch; width: 110rem; }
.page-header .nav .main-nav { display: flex; justify-content: center; }
.page-header .nav .main-nav .item { color: #fff; transition: .3s; font-size: 1.7rem; letter-spacing: .2rem; cursor: pointer; padding: 2rem 2rem 2rem 2rem; border-bottom: .2rem solid transparent; }
.page-header .nav .main-nav .item:hover { border-bottom-color: #1b7776 ;}
.page-header .nav .sub-nav {position: absolute; top: 6.5rem; width: inherit; display: flex; flex-direction: column; height: 0rem; overflow-y: hidden; box-shadow: 0 .3rem .5rem 0 #00000033; }
.page-header .nav .sub-nav .list { background-color: #ffffffee; padding: 2rem; }
.page-header .nav .sub-nav .list .title { font-size: 1.6rem; color: #333; letter-spacing: .1rem; font-weight: bold; padding: 1rem 2rem; border-bottom: .1rem solid #ccc; margin-bottom: 1rem; }
.page-header .nav .sub-nav .list .item-box { display: flex; flex-wrap: nowrap; gap: 1rem; padding: 0 1rem; }
.page-header .nav .sub-nav .list .item-box a { color: #333; transition: .3s; padding: 1rem 1.5rem; }
.page-header .nav .sub-nav .list .item-box a:hover { color: #fff; background-color: #1b7776; }

.page-header:hover { background-color: #ffffffee; box-shadow: 0 .1rem .1rem 0 #00000033;}
.page-header:hover .up-logo { filter: invert(30%); }
.page-header:hover .nav .main-nav .item { color: #333; }

/* 頁尾 */
.page-footer { background-color: #0c4e4d; background: url(../images/footer.png) no-repeat center / cover; color: #fff; }
.page-footer section { margin: 5rem auto; max-width: 120rem; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6rem; }
.page-footer section .footer-logo { width: 31rem; height: 3.4rem; background: url(../images/logo.svg) no-repeat center; filter: invert(100%); cursor: pointer; }
.page-footer section .footer-box { flex: 1 1 auto; }
.page-footer section .footer-box .nav { display: grid; grid-template-columns: repeat(5,1fr); text-align: center; }
.page-footer section .footer-box .nav .item { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.page-footer section .footer-box .nav .item .main-title { font-size: 1.8rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: .1rem solid #ffffff33; }
.page-footer section .footer-box .nav a { color: #ccc; transition: .3s; }
.page-footer section .footer-box .nav a:hover { color: #fff; }
.page-footer section .footer-box .copyright { margin-top: 3rem; padding-top: 3rem; border-top: .1rem solid #ffffff33; font-size: 1rem; text-align: right; }

/* slider */
.slider { display: grid; align-items: center; }
.slider > * { grid-area: 1/1/2/2; }
.slider .arrow{ font-family: 'Material Symbols Outlined'; cursor: pointer; font-size: 7rem; color: #ffffff99; text-shadow: 0 0 1rem #000000; width: max-content; transition: .3s; user-select: none; }
.slider .arrow:hover { color:#ffffff; text-shadow: 0 0 1rem #ffffff; }
.slider .prev { justify-self: left; margin-left: 10rem; }
.slider .next { justify-self: right; margin-right: 10rem; }

/* banner */
.banner { overflow: hidden; }
.banner .slogan { color: #fff; width: 120rem; margin: 0 auto; top: 55%; position: relative; display: flex; flex-direction: column; gap: 1rem; }
.banner .slogan.solution { top: 44.5%; }
/* .banner .slogan { text-shadow: 0 0 .2rem #fff;} */
.banner .slogan .sub-title2 { font-size: 2.8rem; line-height: 2.8rem; margin-bottom: .5rem; }
.banner .slogan .title2 { font-size: 8rem; line-height: 8rem; margin-bottom: 3rem; font-weight: bold; letter-spacing: .5rem; } 
.banner .slogan .title { font-size: 4.8rem; line-height: 5.6rem;  }
.banner .slogan .cons { font-size: 1.4rem; line-height: 2rem; max-width: 50rem; margin-bottom: 1rem; }
.banner .slogan .banner_btn { font-size: 1.2rem; border-radius: 50rem; padding: 1rem 2rem; background-color: #555; color: #fff; cursor: pointer; transition: .3s; align-self: flex-start; }
.banner .slogan .banner_btn:hover { background-color: #333; }

/* 每一頁的內容展示區塊 */
.page_body{ margin: 5rem auto; width: 120rem; line-height: 2.4rem; }
.breadcrumbs { display: flex; flex-wrap: nowrap; padding: 1rem 0 2rem; border-bottom: .1rem solid #ccc; margin-bottom: 1rem; color: #444; }
.breadcrumbs::before { content: 'fiber_smart_record'; font-family: 'Material Symbols Outlined'; margin-right: .5rem; font-size: 2.4rem; color: #c90; font-variation-settings: 'FILL' 1 ; }
.breadcrumbs .icon::before { content: 'arrow_forward_ios'; font-family: 'Material Symbols Outlined'; margin: 0 .5rem; font-weight: 100; color: #999; }
.breadcrumbs a { color: #0c4e4d; transition: .3s; border-bottom: .2rem solid transparent; }
.breadcrumbs a:hover { filter: brightness(1.5); border-bottom: .2rem solid #0c4e4d; }


/* ==== product 獨有 ==== */
.product_list { display: flex; flex-direction: column; gap: 5rem; margin-top: 5rem; }
.product_list article { border-radius: 2rem; background-color: #f3f3f3; padding: 5rem; display: grid; color: #555; }
.product_list article:nth-child(odd) { grid-template-columns: 65% 35%; }
.product_list article:nth-child(even) { grid-template-columns: 35% 65%; }
.product_list article:nth-child(even) .content { order: 1; }
.product_list article .content { padding-right: 3rem; }
.product_list article .sub-title { font-size: 1.2rem; line-height: 1.4rem; }
.product_list article .title { font-size: 3.4rem; font-weight: 900; line-height: 3.8rem; }
.product_list article .zh-title { font-size: 2rem; line-height: 2.4rem; }
.product_list article h3 { font-size: 1.8rem; font-weight: bold; margin: 0; }
.product_list article .img { text-align: center; background: no-repeat top / contain; height: 40rem;}
.product_list article .img img { max-height: 40rem;}
.product_list article .prod_btn { border: .2rem solid #999; transition: .3s; cursor: pointer; padding: .7rem 1.4rem; color: #999; letter-spacing: 0; background-color: transparent; display: inline-block; margin-top: 2rem; }
.product_list article .prod_btn:hover { border: .2rem solid transparent; color: #fff; background-color: #666; }

/* ==== products 獨有 ==== */
.page_search { border-radius: 5rem; border: .1rem solid #ddd; padding: 0 0 0 1rem; background-color: #f3f3f3; display: inline-block; width: max-content; display: flex; justify-content: space-between; align-items: center; margin: 5rem 0 2rem; transition: .3s; overflow: hidden; }
/* .page_search::after { content: 'search'; font-family: 'Material Symbols Outlined'; margin: 0 1rem; font-size: 2rem; color: #666; } */
.page_search input[type="text"] { padding: .5rem 1rem; border: 0; background-color: transparent; outline: 0; }
.page_search:has(input[type="text"]:focus) {  border: .1rem solid #999; }
.page_search .search_btn { font-family: 'Material Symbols Outlined'; padding: .5rem 2rem; font-size: 2rem; color: #666; cursor: pointer; border: none; border-left: .1rem solid #ccc; background-color: transparent; transition: .3s; }
.page_search .search_btn:hover { background-color: #1b7776; color: #fff; } 

.products_table { display: flex; flex-direction: column; padding: 0; background-color: #f3f3f3; border-radius: 2rem; }
.products_table .tr { display: grid; grid-template-columns: 15% 15% auto 15% 10%; border-bottom: .1rem dashed #ccc; align-items: center; }
.products_table .tr:first-child { border-bottom: .1rem solid #ccc; border-radius: 2rem 2rem 0 0; }
.products_table .tr div:first-child { padding-left: 4rem; }
.products_table .tr:not(:first-child) { background-color: transparent; transition: .3s;}
.products_table .tr:not(:first-child):hover { background-color: #fff; }
.products_table .tr:last-child { border-bottom: none; border-radius:  0 0 2rem 2rem; }
.products_table .tr > * { padding: 3rem 2rem; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; }
.products_table .tr .link { font-family: 'Material Symbols Outlined'; font-size: 4.8rem; font-weight: 100; color: #666; transition: .3s; vertical-align: middle; }
.products_table .tr .link:hover { font-weight: 300; font-size: 6rem; }