.blank-gap{
width:100%;
height:var(--section-gap);
background: white;
}
.relations-body h5.mobile-mode{
display: none;
}
.banner-nav-anchor.six-items{
grid-template-columns: auto auto auto;
grid-gap: 20px 4vw;
}
.information{
padding: 0 var(--pad-space) ;
position: relative;
}
.information>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 1;
position: relative;
padding-bottom: 130px;
}
.information::before{
position: absolute;
content: "";
width: 85%;
height: calc(100% - 129px);
bottom: 0;
left: 50%;
background-color: red;
z-index: 0;
transform: translateX(-50%);
border-radius: var(--box-radius);
background-image: linear-gradient(to right,rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 50%), url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/unknown-businessmen-woman-sitting-working-discussing-questions-meeting-modern-office-closeup.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.information h5{
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
color: var(--main-color);
margin: 0;
line-height: 1.2em;
margin-bottom: 100px;
}
.information h4{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
color: var(--main-color);
margin: 0;
margin-bottom: 100px;
}
.information h6{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
color: #000000;
margin: 0;
padding-bottom: 20px;
}
.information span{
font-family: var(--ch-font);
font-size: var(--xd-28px);
font-weight: 400;
color: var(--main-color);
margin: 0;
}
.information p{
font-family: var(--ch-font);
font-size: var(--xd-28px);
font-weight: 400;
color: #000000;
margin: 0;
max-width: 460px;
}
.information>div>div{
display: flex;
flex-direction: column;
gap: 25px;
}
.information-grid{
display: grid;
grid-template-columns: 130px auto;
align-items: flex-start;
gap: 35px;
}
.stock{
padding: 0 var(--pad-space);
}
.stock>div{
width: 84.5vw;
margin: 0 auto;
background-image: linear-gradient(to right,rgba(215, 25, 33, 0.8), rgba(215, 25, 33, 0.8)), url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/blue-technology-background.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-gap) 6vw;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: var(--box-radius);
}
.stock>div .stock-box:first-child{
border-right: 1px solid white;
}
.stock-box{
padding: 0 calc(var(--pad-space) / 2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.stock-box>div{
margin-bottom: 50px;
}
.stock-box h6{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
color: white;
margin: 0;
text-align: center;
margin-bottom: 30px;
}
.stock-box p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: white;
margin: 0;
text-align: center;
line-height: 2em;
max-width: 80%;
margin: 0 auto;
}
.stock-box a{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none !important;
background: var(--main-color);
border: 2px solid white;
padding: 11px 30px;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.stock-box a span{
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
color: white;
margin: 0;
z-index: 1;
line-height: 1em;
}
.stock-box a::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
transition: all .5s;
background: white;
z-index: 0;
}
.stock-box a:hover:before{
top: 0%;
}
.stock-box a:hover{
border: 2px solid white;
background: white;
transition: all 1s;
}
.stock-box a:hover span{
color: var(--main-color);
transition: all .5s;
}
.announcement{
padding: 0 var(--pad-space);
}
.announcement>div{
background-image: linear-gradient(to right,rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/candles-charts-trade-concept-hong-kong-background.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: var(--box-radius);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: var(--pad-space) 0;
}
.announcement>div .announcement-box:not(:last-child){
border-right: 1px solid white;
}
.announcement-box{
padding: calc( var(--section-gap) - var(--pad-space) ) var(--pad-space);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.announcement-box h6{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
color: white;
margin: 0;
text-align: center;
margin-bottom: 20px;
}
.announcement-box p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: white !important;
margin: 0;
text-align: center;
line-height: 2em;
max-width: 80%;
margin: 0 auto;
}
.announcement-box p a{
color: white !important;
text-decoration: none;
}
.announcement-box>a{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none !important;
background: rgba(0, 0, 0, 0.5);
border: 2px solid rgba(255  , 255, 255, 0.5);
padding: 11px 30px;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.announcement-box>a span{
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
color: white;
margin: 0;
z-index: 1;
line-height: 1em;
}
.announcement-box>a svg{
height: 14px;
transform: translateY(1px);
}
.announcement-box>div{
margin-bottom: 30px;
}
.announcement-box>a::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
transition: all .5s;
background: var(--main-color);
z-index: 0;
}
.announcement-box>a:hover::before{
top: 0;
}
.announcement-box>a:hover{
border: 2px solid white;
background: var(--main-color);
transition: all 1s;
}
.relations{
position: relative;
padding: 0 var(--pad-space);
}
.relations>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 1;
position: relative;
}
.relations::before{
content: "";
width: 100%;
height: calc(100% - 57px);
position: absolute;
left: 0;
bottom: 0;
background: #E8E8E8;
z-index: 0;
}
.relations-head h5{
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
margin: 0;
line-height: 1.2em;
margin-bottom: 6px;
color: var(--main-color);
}
.relations-head h4{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: var(--main-color);
}
.relations-body h6{
font-family: var(--ch-font);
font-size: var(--xd-28px);
font-weight: 400;
margin: 0;
color: #000000;
margin-bottom: 60px;
text-align: right;
}
.relations-body h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: #4B4A4A;
margin-bottom: 30px;
}
.relations-body h5 span{
color: var(--main-color);
padding-right: 8px;
}
.relations-body p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
}
.relations-body p a{
color: #000000 !important;
text-decoration: none;
}
.relations-foot span{
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: white;
line-height: 1em;
z-index: 1;
}
.relations-body{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
margin-top: 60px;
margin-bottom: 0px;
}
.relations-body>div{
padding: 50px;
background: #FFFFFF;
border: 2px solid #AFAFAF;
border-radius: var(--box-radius);
min-height: 325px;
}
.relations-foot a{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none !important;
background: var(--main-color);
border: 2px solid white;
padding: 11px 30px;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.relations-foot a::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
transition: all .5s;
background: white;
z-index: 0;
}
.relations-foot a:hover:before{
top: 0%;
}
.relations-foot a:hover{
border: 2px solid white;
background: white;
transition: all 1s;
}
.relations-foot a:hover span{
color: var(--main-color);
transition: all .5s;
}
.relations-foot{
display: flex;
justify-content: center;
}
.tem-table{
padding: 0 var(--pad-space);
}
.tem-table>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
.tem-table-box{
border: 2px solid #DBDBDB;
border-radius: 20px;
overflow: auto;
width: 100%;
max-width: 1250px;
}
.tem-table-box table{
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.tem-table-box th,
.tem-table-box 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;
border: unset;
border-block-start:unset !important;
}
.tem-table-box th{
background: var(--main-color);
color: white;
font-weight: 500;
}
.tem-table-box th.gray-item{
background: #2E2E2E;
}
.tem-table-box tbody tr td:nth-child(odd) {
background-color: #F7F7F7;
}
.tem-table-box tbody tr td:nth-child(even) {
background-color: #E8E8E8;
}
.tem-table-box tbody tr td:not(:last-child){
border-right: 2px solid #DBDBDB;
}
.tem-table-box thead tr th:not(:last-child){
border-right: 2px solid white;
}
.tem-table-box tbody tr:not(:last-child) td{
border-bottom: 2px solid #DBDBDB;
}
.tem-table-box 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-box::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.tem-table-box::-webkit-scrollbar-button {
display: none;
}
.tem-table-box::-webkit-scrollbar-track{
background: #E8E8E8;
border-radius: 10px;
}
.tem-table-box::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #AFAFAF;
}
.tem-table-02{
padding: 0 var(--pad-space);
}
.tem-table-02>div{
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
.tem-table-02-head{
margin-bottom: 50px;
}
.tem-table-02-head h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: var(--main-color);
}
.tem-table-02-box{
border-radius: 20px;
overflow: auto;
border: 2px solid #DBDBDB;
height: 100%;
max-height: 688px;
width: 100%;
max-width: 1300px;
}
.tem-table-02-box table{
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.tem-table-02-box thead{
position:sticky;  
top: 0;
z-index:3;
}
.tem-table-02-box th,
.tem-table-02-box td{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
text-align: center;
vertical-align: middle;
color: #4B4A4A;
border: unset;
border-block-start:unset !important;
padding: 10px;
}
.tem-table-02-box th{
background: var(--main-color);
color: white;
font-weight: 500;
}
.tem-table-02-box thead tr:first-child th:not(:last-child){
border-right: 2px solid white;
}
.tem-table-02-box thead tr:first-child th:nth-child(2),
.tem-table-02-box thead tr:first-child th:nth-child(3){
border-bottom: 2px solid white;
}
.tem-table-02-box thead tr:last-child th{
border-right: 2px solid white;
width: 126px;
}
.tem-table-02-box tbody td{
padding: 15px 10px;
}
.tem-table-02-box tbody tr td:not(:last-child){
border-right: 2px solid #DBDBDB;
}
.tem-table-02-box tbody tr:not(:last-child) td{
border-bottom: 2px solid #DBDBDB;
}
.tem-table-02-box tbody tr td:nth-child(odd) {
background-color: #E8E8E8;
}
.tem-table-02-box tbody tr td:nth-child(even) {
background-color: #F7F7F7;
}
.tem-table-02-box::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.tem-table-02-box::-webkit-scrollbar-button {
display: none;
}
.tem-table-02-box::-webkit-scrollbar-track{
background: #E8E8E8;
border-radius: 10px;
}
.tem-table-02-box::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #AFAFAF;
}
.tem-table-02-box thead tr:first-child th:first-child,
.tem-table-02-box tr td:first-child{
position:sticky;  
left: 0;
z-index:2;
}
.tem-table-02-box thead tr:first-child th:first-child{
width: 140px !important;
}
.tem-table-02-box thead tr:first-child th:nth-child(2){
width: 645px !important;
}
.tem-table-02-box thead tr:first-child th:nth-child(3){
width: 645px !important;
}
.tem-table-02-box thead tr:first-child th:nth-child(4){
width: 160px !important;
}
.tem-table-02-box thead tr:first-child th:nth-child(5){
width: 160px !important;
}
.dividend-history .tem-table-02-box tbody tr:first-child td:nth-child(odd){
background-color: #d3d3d3;
color: var(--main-color);
font-weight: 700;
}
.dividend-history .tem-table-02-box tbody tr:first-child td:nth-child(even){
background-color: #ff978859;
color: var(--main-color);
font-weight: 700;
}
@media only screen and (max-width:1630px){
.banner-nav-anchor.six-items{
grid-template-columns: auto auto;
}
.banner-nav-anchor a{
font-size: 15px;
}
.announcement-box p{
max-width: 100%;
}
}
@media only screen and (max-width:1350px){
.information>div{
padding: 0 var(--pad-space) 80px var(--pad-space);
}
.information::before{
width: calc( 100% - var(--pad-space) - var(--pad-space) );
}
.stock>div{
width: 100%;
padding: var(--section-gap) calc(var(--pad-space) / 2);
}
}
@media only screen and (max-width:1300px){
.relations-body>div{
padding: var(--pad-space);
}
}
@media only screen and (max-width:1240px){
.banner-nav-anchor.six-items {
grid-template-columns: auto;
}
}
@media only screen and (max-width:1200px){
.announcement>div{
grid-template-columns: 1fr 1fr;
padding: var(--pad-space);
grid-gap: 40px 0;
}
.announcement>div>.announcement-box:nth-child(3){
grid-column: 1/3;
border-top: 1px solid white;
}
.announcement-box{
padding: var(--pad-space);
}
.announcement>div .announcement-box:nth-child(2){
border-right: unset;
}
}
@media only screen and (max-width:1100px){
.relations-body h5.desk-mode{
display: none;
}
.relations-body h5.mobile-mode{
display: block;
}
}
@media only screen and (max-width:1024px){
.information-grid{
grid-template-columns: 100px auto;
}
.information::before{
height: calc( 100% - 107px);
}
.stock>div{
grid-template-columns: 1fr;
}
.stock>div .stock-box:first-child {
border-bottom: 1px solid white;
border-right: unset;
}
.stock-box{
padding: 0;
}
.stock>div {
padding: var(--section-gap) var(--pad-space);
}
.stock>div .stock-box:first-child{
padding-bottom: 50px;
}
.stock>div .stock-box:last-child{
padding-top: 50px;
}
.announcement>div{
grid-template-columns: 1fr;
}
.announcement>div>.announcement-box:nth-child(3){
grid-column: unset;
}
.announcement>div>.announcement-box:nth-child(1){
border-bottom: 1px solid white;
border-right: 9px;
}
.announcement>div{
grid-gap: 0px;
}
.announcement-box{
padding: var(--pad-space) 0;
}
.relations::before{
height: calc(100% - 47px);
}
}
@media only screen and (max-width:900px){
.relations-body h5.desk-mode{
display: block;
}
.relations-body h5.mobile-mode{
display: none;
}
.relations-body{
grid-template-columns: 1fr;
}
.relations-body>div{
min-height: unset;
}
.relations-body h5{
margin-bottom: 10px;
}
}
@media only screen and (max-width:850px){
.tem-table-box tr th:first-child,
.tem-table-box tr td:first-child{
width: 80px !important;
position:sticky;  
left: 0;
z-index:2;
} .tem-table-box tr th:not(:first-child),
.tem-table-box tr td:not(:first-child){
width: 200px !important;
}
}
@media only screen and (max-width:767px){
.information-grid {
grid-template-columns: 80px auto;
}
.information h5{
margin-bottom: 60px;
}
.information>div{
padding: var(--section-gap) var(--pad-space);
}
.information::before {
height: 100%;
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/unknown-businessmen-woman-sitting-working-discussing-questions-meeting-modern-office-closeup.png);
}
.information h4{
margin-bottom: 60px;
}
.information>div>div{
gap: 5px;
}
.information h5,
.information h4,
.information h6,
.information p,
.information span{
color: white;
}
.information p,
.information span{
font-size: 15px;
}
.tem-table-02-head{
margin-bottom: 25px;
}
}
@media only screen and (max-width:600px){
.relations-body h5.desk-mode{
display: none;
}
.relations-body h5.mobile-mode{
display: block;
}
.relations-body h5{
margin-bottom: 15px;
}
.stock-box p{
max-width: 100%;
}
.banner-nav-anchor.six-items{
max-width:calc(100% - var(--pad-space));
}
.banner-nav-anchor a span{
line-height: 1.3em;
}
.information h5{
font-size: 35px;
line-height: 1.1em;
margin-bottom: 40px;
}
.information-grid{
display: grid;
align-items: flex-start;
gap: 20px;
}
.information h6{
padding-bottom: 15px;
}
.information h4 {
margin-bottom: 50px;
}
.stock-box h6{
margin-bottom: 15px;
}
.stock-box p{
line-height: 1.7em;
}
.stock-box>div{
margin-bottom: 20px;
}
.stock>div .stock-box:first-child{
padding-bottom: 30px;
}
.stock>div .stock-box:last-child{
padding-top: 30px;
}
.relations-body h6{
margin-bottom: 15px;
text-align: left;
}
.relations-body{
margin-top:40px;
margin-bottom: 0px;
grid-gap: 20px;
}
.relations-body>div{
border-radius: 20px;
}
.relations::before{
height: calc(100% - 34px);
}
.relations-head h5{
line-height: 1em;
margin-bottom: 0px;
}
.announcement-box>div{
margin-bottom: 20px;
}
.announcement-box p{
line-height: 1.7em;
}
.tem-table-box{
border-radius: 10px;
}
.tem-table-box th, .tem-table-box td{
padding: 15px 5px;
height: auto;
font-size: 13px;
}
.tem-table-box tr th:first-child,
.tem-table-box tr td:first-child{
width: 60px !important;
}
.tem-table-02-box thead tr:first-child th:first-child{
width: 130px !important;
}
}