.tem-select-table{
padding: var(--section-gap) var(--pad-space) 0 var(--pad-space);
}
.table-unit{
text-align: right;
margin-bottom: 5px;
}
.table-unit p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
margin: 0;
font-weight: 400;
color: black;
}
.tem-select-table>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
.tem-select-table-header{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
grid-gap: 20px;
grid-gap: 0px;
}
.tem-select-table-header h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: var(--main-color);
}
.tem-select-table-header>div{
width: 130px;
background: var(--main-color);
border-radius: 100px;
position: relative;
}
.tem-select-table-header select {
padding: 7px 20px;
font-size: var(--xd-16px);
margin: 0;
border: unset;
background: transparent;
color: white;
font-weight: 500;
outline: unset;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 100px;
}
.tem-select-table-header select:hover{
background: var(--main-color);
}
.tem-select-table-header select option{
color: black;
background-color: white;
}
.tem-select-table-header svg{
position: absolute;
right: 20px;
top: calc(50% + 2px);
transform: translateY(-50%);
width: 13px;
transition: all .5s;
}
.tem-select-table-header svg line{
stroke: white;
}
.tem-select-table-header{
margin-bottom: 50px;
}
.tem-select-table-body {
overflow: auto;
height: 100%;
max-height: 574px;
width: 100%;
max-width: 1250px;
border-radius: 20px;
border: 2px solid #DBDBDB;
}
.tem-select-table-body>div{
height: 100%;
width: 100%;
}
.tem-select-table-body th,
.tem-select-table-body td{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
text-align: center;
vertical-align: middle;
color: #4B4A4A;
height: 95px;
}
.tem-select-table-body tr th:first-child,
.tem-select-table-body tr td:first-child{
width: 130px !important;
position:sticky;  
left: 0;
z-index:2;
}
.tem-select-table-body thead{
position:sticky;  
top: 0;
z-index:3;
}
.tem-select-table-body tr th:not(:first-child),
.tem-select-table-body tr td:not(:first-child){
width: 130px !important;
}
.tem-select-table-body th{
color: white;
font-weight: 500;
}
.tem-select-table-body a{
background: white;
border: 1px solid #707070;
padding: 8px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin: 0 auto;
}
.tem-select-table-body table{
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.tem-select-table-body th,
.tem-select-table-body td{
border: unset;
border-block-start:unset !important;
}
.tem-select-table-body th{
background: var(--main-color);
}
.tem-select-table-body tbody tr td:nth-child(odd) {
background-color: #F7F7F7;
}
.tem-select-table-body tbody tr td:nth-child(even) {
background-color: #E8E8E8;
}
.tem-select-table-body thead tr th:not(:last-child){
border-right:2px solid white;
}
.tem-select-table-body tbody tr td:not(:last-child){
border-right: 2px solid #DBDBDB;
}
.tem-select-table-body tbody tr:not(:last-child) td{
border-bottom: 2px solid #DBDBDB;
}
.tem-select-table-body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.tem-select-table-body::-webkit-scrollbar-button {
display: none;
}
.tem-select-table-body::-webkit-scrollbar-track{
background: white;
border-radius: 10px;
}
.tem-select-table-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #AFAFAF;
}
.tem-table{
padding: var(--section-gap) var(--pad-space) 0 var(--pad-space);
}
.tem-table>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
.tem-table-header{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
grid-gap: 20px;
grid-gap: 0px;
}
.tem-table-header h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: var(--main-color);
}
.tem-table-header>div{ background: var(--main-color);
border-radius: 100px;
position: relative;
}
.tem-table-header select {
padding: 7px 20px;
font-size: var(--xd-16px);
margin: 0;
border: unset;
background: transparent;
color: white;
font-weight: 500;
outline: unset;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 100px;
}
.tem-table-header select:hover{
background: var(--main-color);
}
.tem-table-header select option{
color: black;
background-color: white;
}
.tem-table-header svg{
position: absolute;
right: 20px;
top: calc(50% + 2px);
transform: translateY(-50%);
width: 13px;
transition: all .5s;
}
.tem-table-header svg line{
stroke: white;
}
.tem-table-header{
margin-bottom: 50px;
}
.tem-table-body {
overflow: auto; width: 100%;
max-width: 1250px;
border-radius: 20px;
border: 2px solid #DBDBDB;
}
.tem-table-body th,
.tem-table-body td{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
text-align: center;
vertical-align: middle;
color: #4B4A4A;
height: 95px;
}
.tem-table-body tr th:first-child,
.tem-table-body tr td:first-child{
width: 130px !important;
position:sticky;  
left: 0;
z-index:2;
}
.tem-table-body thead{
position:sticky;  
top: 0;
z-index:3;
}
.tem-table-body tr th:not(:first-child),
.tem-table-body tr td:not(:first-child){
width: 130px !important;
}
.tem-table-body th{
color: white;
font-weight: 500;
}
.tem-table-body a{
background: white;
border: 1px solid #707070;
padding: 8px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin: 0 auto;
}
.tem-table-body table{
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.tem-table-body th,
.tem-table-body td{
border: unset;
border-block-start:unset !important;
}
.tem-table-body th{
background: var(--main-color);
}
.tem-table-body tbody tr td:nth-child(odd) {
background-color: #F7F7F7;
}
.tem-table-body tbody tr td:nth-child(even) {
background-color: #E8E8E8;
}
.tem-table-body thead tr th:not(:last-child){
border-right:2px solid white;
}
.tem-table-body tbody tr td:not(:last-child){
border-right: 2px solid #DBDBDB;
}
.tem-table-body tbody tr:not(:last-child) td{
border-bottom: 2px solid #DBDBDB;
}
.tem-table-body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.tem-table-body::-webkit-scrollbar-button {
display: none;
}
.tem-table-body::-webkit-scrollbar-track{
background: white;
border-radius: 10px;
}
.tem-table-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #AFAFAF;
}
.tem-table-body tr td.custom-width,
.tem-table-body tr th.custom-width{
width: 410px !important;
text-align: left;
padding: 20px 50px;
}
.tem-table-body tr th.custom-width{
text-align: center;
}
.briefing{
padding: var(--section-gap) var(--pad-space);
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/blue-technology-background.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.briefing>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.briefing h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: white;
margin-bottom: 40px;
}
.briefing p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: white;
line-height: 1.9em;
margin-bottom: 50px;
}
.briefing>div>div{
display: flex;
align-items: center;
gap:7.5%;
}
.briefing a{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none !important;
background: rgba(255, 255, 255, 0.25);
border: 2px solid rgba(160, 160, 160, 0.25);
padding: 12px 30px;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.briefing a span{
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: white;
line-height: 1em;
z-index: 1;
}
.briefing a svg{
height: 18px;
z-index: 1;
}
.briefing a svg line{
stroke: white;
}
.briefing a::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
transition: all .5s;
background: var(--main-color);
z-index: 0;
}
.briefing a:hover:before{
top: 0%;
}
.briefing a:hover{
border: 2px solid var(--main-color);
background: var(--main-color);
transition: all .5s;
}
.financials-report .tem-select-table-body{
max-height: unset;
}
.financials-report .tem-select-table-body td{
height:auto;
}
@media only screen and (max-width:767px){
.tem-select-table-header{
margin-bottom: 25px;
grid-gap: 15px;
}
.tem-select-table-header>div{
width: 110px;
}
.tem-select-table-body{
grid-gap: 15px;
}
.tem-table-header{
margin-bottom: 25px;
grid-gap: 15px;
}
.tem-table-header>div{ }
.tem-table-body{
grid-gap: 15px;
}
.briefing p{
font-size: 15px;
}
.briefing>div>div{
gap: 30px;
}
}
@media only screen and (max-width:720px){
.briefing>div>div{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
}
@media only screen and (max-width:600px){
.tem-select-table-body thead th:first-child{
border-radius: 10px 0 0 0;
}
.tem-select-table-body thead th:last-child{
border-radius: 0 10px 0 0;
}
.tem-select-table-body tbody tr:last-child td:first-child{
border-radius: 0 0 0 10px;
}
.tem-select-table-body tbody tr:last-child td:last-child{
border-radius: 0 0 10px 0;
}
.tem-select-table-body th, .tem-select-table-body td{
padding: 15px 5px;
height: auto;
font-size: 13px;
}
.tem-select-table-body tr th:first-child, .tem-select-table-body tr td:first-child{
width: 60px !important;
}
.tem-select-table-body tr th:not(:first-child), .tem-select-table-body tr td:not(:first-child) {
width: 28vw !important;
}
.tem-select-table-body {
max-height: 307px;
}
.tem-table-body thead th:first-child{
border-radius: 10px 0 0 0;
}
.tem-table-body thead th:last-child{
border-radius: 0 10px 0 0;
}
.tem-table-body tbody tr:last-child td:first-child{
border-radius: 0 0 0 10px;
}
.tem-table-body tbody tr:last-child td:last-child{
border-radius: 0 0 10px 0;
}
.tem-table-body th,
.tem-table-body td{
padding: 15px 5px;
height: auto;
font-size: 13px;
}
.tem-table-body tr th:first-child,
.tem-table-body tr td:first-child{
width: 60px !important;
}
.tem-table-body tr th:not(:first-child),
.tem-table-body tr td:not(:first-child) {
width: 28vw !important;
}
.tem-table-body tr td.custom-width,
.tem-table-body tr th.custom-width{
width: 320px !important;
padding: 20px 20px;
}
.briefing p{
line-height: 1.7em;
}
.briefing>div>div{
grid-template-columns: 1fr;
gap: 15px;
}
.briefing p{
margin-bottom: 35px;
}
.briefing h5{
margin-bottom: 30px;
}
}