section{
padding-top: var(--section-gap);
}
.no-scroll {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
} .category .teamplate-01-header p{
max-width: 640px;
}
.development,
.planning{
padding-top: calc( var(--section-gap) + var(--sec-en-size) );
}
.development .template-02{
width: 100%;
max-width: unset;
}
.development .template-02 > div:first-child{
flex:0 0 42%;
}
.development .template-02 > div:last-child {
align-items: center;
padding: 0 var(--pad-space);
}
.development .template-02>div:nth-child(2)>div{
max-width: 760px;
}
.development .template-02>div:nth-child(2)>div>p:nth-child(2){
margin-bottom: 30px;
}
.development .template-02>div:nth-child(2)>div>p:nth-child(3){
font-weight: 700;
}
.development .template-02>div:first-child>h3:nth-child(1) {
right: 15%;
}
.development .template-02>div:first-child>h3:nth-child(2) {
transform: translateX(10%);
}
.planning .template-02{
width: 100%;
max-width: unset;
}
.planning .template-02 > div:first-child{
flex:0 0 50%;
}
.planning .template-02 > div:last-child {
align-items: center;
padding: 0 var(--pad-space);
}
.planning .template-02>div:nth-child(2)>div{
max-width: 590px;
}
.planning .template-02>div:nth-child(2)>div>p{
margin-bottom: 70px;
}
.planning .template-02>div:first-child>h3:nth-child(1) {
right: 30px;
}
.planning .template-02>div:first-child>h3:nth-child(2) {
transform: translateX(20%);
}
.planning .global_btn_style{
padding: 10px 40px;
}
.tender{
background-image:url(//www.tahhsin.com.tw/wp-content/uploads/2024/06/group-tender-bg.png);
min-height: 50vh;
display: flex;
align-items: center;
padding: var(--section-gap) var(--pad-space);
}
.tender>div{
background: white;
padding: var(--pad-space);
width: 100%;
max-width: 1350px;
margin: 0 auto;
border-radius: var(--box-radius);
display: flex;
gap:var(--pad-space);
align-items: center;
}
.tender-content{
flex: 1;
padding-left: var(--pad-space);
}
.tender-img{
flex: 1;
}
.tender-content p{
font-family: var(--ch-font);
font-weight: 400;
font-size: 18px;
margin: 40px 0 60px 0;
width: 100%;
max-width: 440px;
line-height: 2em;
}
.tender-content .global_btn_style{
padding: 12px 40px;
}
.tender-img{
aspect-ratio: 644 / 412;
background: red;
border-radius: var(--box-radius);
overflow: hidden;
}
.tender-img img{
display: block;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.video-pop-up{
position: fixed;
top: 0;
left: 0;
z-index: 111;
width: 100%;
height: 100dvh;
padding: 0 var(--pad-space);
background: rgba(0, 0, 0, 0.8);
display:none;
}
.video-pop-up>div{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding-bottom: 0px;
}
.video-pop-up>div>div{
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
}
.video-pop-up>div>div>div{
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
max-height: calc(100vh - 70px);
border-radius: 20px;
}
.video-pop-up>div>div>div video{
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.close-video-pop-up{
display: flex;
flex-direction: column;
background: transparent  !important;
gap: 9px;
justify-content: center;
padding: 10px;
align-items: center;
position: relative;
border: unset !important;
outline: unset !important;
}
.close-video-pop-up span:first-child {
width: 29px;
height: 1px;
background: white;
transform: rotate(45deg);
position: absolute;
}
.close-video-pop-up span:last-child {
width: 29px;
height: 1px;
background: white;
transform: rotate(-45deg);
position: absolute;
}
.service-popup{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
z-index: 111;
background: rgba(0, 0, 0, 0.8);
padding-top: 0px;
display: none;
}
.service-popup>div{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.service-popup>div>div{
background: white;
width: calc(100% - var(--pad-space) - var(--pad-space));
height: calc(100% - var(--pad-space) - var(--pad-space));
max-width: 1500px;
padding: 40px 3.5vw 50px 3.5vw;
position: relative;
border-radius: var(--box-radius);
}
.service-popup-close{
position: absolute;
right: 30px;
top: 22px;
background: transparent !important;
outline: unset !important;
border: unset;
display:flex;
padding:0px;
}
.service-popup-close svg{
width: 45px;
}
.service-popup-head>h4{
font-size: var(--xd-65px);
font-family: var(--en-font);
font-weight: 600;
margin: 0;
color: var(--main-color);
line-height: 1em;
}
.service-popup-head>h3{
font-size: var(--xd-33px);
font-family: var(--ch-font);
font-weight: 600;
margin: 0;
color: var(--main-color);
margin-top: 0px;
}
.service-popup-body{
overflow-y: scroll;
overflow-x: hidden;
}
.service-popup-body>div{
display: grid;
grid-gap: 20px;
grid-template-columns: repeat( 10 , 1fr);
grid-template-rows: repeat( 10 , 1fr);
height: 120vh;
}
.service-popup-body.one-line>div{
grid-template-rows: repeat( 5 , 1fr);
height: 60vh;
}
.service-popup-body>div button{
width: 35px;
padding: 0px;
display: flex;
border: unset !important;
background: transparent !important;
cursor: zoom-in;
position: absolute;
bottom: 20px;
right: 20px;
}
.service-popup-body-box-main{
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
.service-popup-body-box-item{
overflow: hidden;
}
.service-popup-body>div button img{
width: 100%;
}
.service-popup-section{
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 25px;
}
.service-popup-section.two-column-section{
grid-template-rows: unset;
grid-template-columns: auto 1fr;
padding: 0 6vw;
grid-gap: 10vw;
}
.service-popup-section>div{
padding: 0 3.5vw;
}
.service-popup-section.two-column-section>div{
padding:0px;
}
.service-popup-section.two-column-section button{
width: 35px;
padding: 0px;
display: flex;
border: unset !important;
background: transparent !important;
cursor: zoom-in;
position: absolute;
bottom: 20px;
right: 20px;
}
.service-popup-body-box{
border-radius: 30px;
cursor: zoom-in;
background: #DDDDDD;
overflow:hidden;
position:relative;
}
.service-popup-body-box-text{
text-align: left;
padding: 25px;
padding-bottom: 5px;
position: relative;
z-index: 2;
}
.service-popup-body-box-main picture img{
width: 100%;
display: block;
object-fit: cover;
object-position: top;
height: 100%;
}
.service-popup-body-box-text h4{
font-size: var(--xd-19px);
font-family: var(--ch-font);
font-weight: 400;
margin: 0;
color:#000000;
}
.service-popup-body-box-text h5{
font-size: var(--xd-28px);
font-family: var(--en-font);
font-weight: 700;
margin: 0;
color: var(--main-color);
margin-bottom: 3px;
}
.service-popup-body-box-imgbk{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
display: none;
background-repeat: no-repeat;
}
.service-popup-body-box.zoom-mode .service-popup-body-box-imgbk{
display: block;
}
.service-popup-body-box.zoom-mode picture,
.service-popup-body-box.zoom-mode button,
.service-popup-body-box.zoom-mode .service-popup-body-box-text{
display: none;
}
.service-popup-body-box.zoom-mode{
cursor: zoom-out;
touch-action: pan-x;
}
.service-popup-body-box-item img{
object-fit: cover;
object-position: top center;
display: block;
width: 100%;
height: 100%;
}
.pop-up-trek .service-popup-body-box:nth-child(1){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-trek .service-popup-body-box:nth-child(2),
.pop-up-trek .service-popup-body-box:nth-child(3){
grid-column: span 3;
grid-row: span 5;
}
.pop-up-trek .service-popup-body-box:nth-child(4),
.pop-up-trek .service-popup-body-box:nth-child(5){
grid-column: span 3;
grid-row: span 5;
}
.pop-up-trek .service-popup-body-box:nth-child(6){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-bike .service-popup-body-box:nth-child(1){
grid-column: span 5;
grid-row: span 4;
}
.pop-up-bike .service-popup-body-box:nth-child(2){
grid-column: span 5;
grid-row: span 6;
}
.pop-up-bike .service-popup-body-box:nth-child(3){
grid-column: span 5;
grid-row: span 6;
}
.pop-up-bike .service-popup-body-box:nth-child(4){
grid-column: span 5;
grid-row: span 4;
}
.pop-up-leisure .service-popup-body-box:nth-child(1){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-leisure .service-popup-body-box:nth-child(2),
.pop-up-leisure .service-popup-body-box:nth-child(3){
grid-column: span 3;
grid-row: span 5;
}
.pop-up-leisure .service-popup-body-box:nth-child(4){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-leisure .service-popup-body-box:nth-child(5){
grid-column: span 6;
grid-row: span 5;
}
.pop-up-running .service-popup-body-box:nth-child(1){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-running .service-popup-body-box:nth-child(2),
.pop-up-running .service-popup-body-box:nth-child(3){
grid-column: span 3;
grid-row: span 5;
}
.pop-up-golf .service-popup-body-box:nth-child(1){
grid-column: span 5;
grid-row: span 4;
}
.pop-up-golf .service-popup-body-box:nth-child(2){
grid-column: span 5;
grid-row: span 6;
}
.pop-up-golf .service-popup-body-box:nth-child(3){
grid-column: span 5;
grid-row: span 6;
}
.pop-up-golf .service-popup-body-box:nth-child(4){
grid-column: span 5;
grid-row: span 4;
}
.pop-up-hunt .service-popup-body-box:nth-child(1){
grid-column: span 5;
grid-row: span 4;
}
.pop-up-hunt .service-popup-body-box:nth-child(2){
grid-column: span 5;
grid-row: span 6;
}
.pop-up-hunt .service-popup-body-box:nth-child(3){
grid-column: span 5;
grid-row: span 6;
}
.pop-up-hunt .service-popup-body-box:nth-child(4){
grid-column: span 5;
grid-row: span 4;
}
.pop-up-workwear .service-popup-body-box:nth-child(1){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-workwear .service-popup-body-box:nth-child(2),
.pop-up-workwear .service-popup-body-box:nth-child(3){
grid-column: span 3;
grid-row: span 5;
}
.pop-up-workwear .service-popup-body-box:nth-child(4),
.pop-up-workwear .service-popup-body-box:nth-child(5){
grid-column: span 3;
grid-row: span 5;
}
.pop-up-workwear .service-popup-body-box:nth-child(6){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-fishing .service-popup-body-box:nth-child(1){
grid-column: span 4;
grid-row: span 5;
}
.pop-up-fishing .service-popup-body-box:nth-child(2){
grid-column: span 6;
grid-row: span 5;
}
.service-popup-body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.service-popup-body::-webkit-scrollbar-button {
display: none;
}
.service-popup-body::-webkit-scrollbar-track{
background: #E8E8E8;
border-radius: 10px;
}
.service-popup-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #AFAFAF;
}
@media only screen and ( max-width:1600px ) {
.development .template-02>div:first-child>h3:nth-child(2) {
transform: translateX(0%);
}
}
@media only screen and ( max-width:1500px ) {
.development .template-02>div:nth-child(2)>div{
padding-left: unset;
}
.planning .template-02>div:nth-child(2)>div{
padding-left: unset;
}
}
@media only screen and ( max-width:1200px ) {
.development .template-02>div:first-child>h3:nth-child(1){
top:0;
right:0px;
transform: translateY(-100%);
}
.development .template-02>div:first-child>h3:nth-child(2){
top:15px;
right:0;
transform: translateX(0%);
}
.development .template-02>div:nth-child(2)>div{
width: 100%;
max-width:unset;
}
.development .template-02 > div:last-child {
align-items: center;
padding: 0;
padding-left: var(--pad-space);
}
.planning .template-02>div:first-child>h3:nth-child(1){
top:0;
right:0px;
transform: translateY(-100%);
}
.planning .template-02>div:first-child>h3:nth-child(2){
top:15px;
right:0;
transform: translateX(0%);
}
.planning .template-02 > div:last-child{
align-items: flex-start;
padding: 0;
padding-left: var(--pad-space);
}
.planning .template-02>div:nth-child(2)>div>p {
margin-bottom: 40px;
}
}
@media only screen and (max-width:1150px){
.tender-content{
flex: 0 0 45%;
padding-left: 0px;
}
.tender-img{
aspect-ratio: 1 / 1;
}
.service-popup-body>div{
grid-template-columns: repeat( 6 , 1fr);
}
.pop-up-trek .service-popup-body-box{
grid-column: span 2 !important;
}
.pop-up-bike .service-popup-body-box{
grid-column: span 3 !important;
}
.pop-up-leisure .service-popup-body-box{
grid-column: span 2 !important;
}
.pop-up-running .service-popup-body-box{
grid-column: span 2 !important;
}
.pop-up-golf .service-popup-body-box{
grid-column: span 3 !important;
}
.pop-up-hunt .service-popup-body-box{
grid-column: span 3 !important;
}
.pop-up-workwear .service-popup-body-box{
grid-column: span 2 !important;
}
.pop-up-fishing .service-popup-body-box{
grid-column: span 3 !important;
}
} 
@media only screen and (max-width:1024px){
.equipment{
padding: var(--section-gap) var(--pad-space) 0 var(--pad-space);
}
.development,
.planning{
padding-top: calc( var(--section-gap) + 50px );
}
.teamplate-01-box button svg{
width: 50px;
}
} 
@media only screen and (max-width:900px){
.tender>div{
flex-direction: column;
}
.tender-content{
flex: 1;
width: 100%;
}
.tender-img{
aspect-ratio: 644 / 412;
width: 100%;
}
.service-popup .service-popup-body-box{
grid-column: span 3 !important;
grid-row: unset !important;
height: 50vh;
}
.service-popup-body>div{
grid-template-rows: unset;
height: auto;
}
.service-popup-section.two-column-section{
display: flex;
grid-gap:unset;
gap:20px 0;
flex-direction: column;
}
.service-popup-section.two-column-section .service-popup-body-box{
height: 100%;
}
}
@media only screen and ( max-width: 767px ){
.service-popup-close{
padding: 0;
right: 25px;
top: 20px;
}
.service-popup-close svg{
width: 35px;
}
.service-popup>div>div {
padding: 25px;
border-radius: 20px;
}
.service-popup-section>div {
padding: 0 25px;
}
.service-popup-section {
grid-gap: 15px;
}
.service-popup-body-box{
border-radius: 20px;
}
.service-popup-body-box-text{
padding: 15px !important;
padding-bottom: 5px !important;
}
}
@media only screen and (max-width:600px){
.teamplate-01-box:hover:after {
border: 0px solid var(--main-color);
}
.teamplate-01-box:hover>div {
opacity: 0;
}
.teamplate-01-box:hover img {
opacity: 1;
}
.development .template-02>div:nth-child(2)>div>p:nth-child(2){
margin-bottom: 20px;
}
.tender-content p{
font-size: 15px;
margin: 20px 0;
line-height: 1.7em;
}
.tender>div{
gap:20px;
padding: 20px;
}
.development,,
.planning{
padding-top: calc( var(--section-gap) + 30px );
}
.planning .template-02>div:nth-child(2)>div>p{
margin-bottom: 20px;
}
.tender-content .sec-en-title{
margin-bottom: 0;
line-height: 1em;
}
.tender-img img{
border-radius: 20px;
}
.teamplate-01-box button svg{
width: 40px;
}
.service-popup>div>div {
padding: 25px 12.5px;
}
.service-popup-section>div{
padding:0 12.5px;
}
.service-popup .service-popup-body-box{
grid-column: span 6 !important;
}
}