.top-section{
background: white;
}
.banner-nav-anchor{
max-width: calc( 100% - var(--pad-space) );
}
.banner_anchor{
width: 50%;
min-height: 156px;
}
.banner_anchor_a {
grid-template-columns: 1fr 1fr 0.2fr;
}
.banner-nav-anchor{
grid-template-columns: auto auto;
}
.tahsin {
padding-top: var(--section-gap);
background: white;
}
.tahsin>div{
display: flex;
gap:24px;
}
.tahsin>div>div{
width: calc(50% - 12px);
}
.tahsin>div>div:first-child{
background: #e8e8e8;
border-radius: 0 var(--box-radius) var(--box-radius) 0;
padding: 60px;
padding-left: var(--pad-space);
}
.tahsin>div>div:first-child>div{
max-width: 613px;
margin-left: auto;
}
.tahsin>div>div:last-child{
border-radius: var(--box-radius) 0 0 var(--box-radius);
overflow: hidden;
aspect-ratio: 740 / 400;
position: relative;
}
.tahsin>div>div:last-child img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tahsin>div>div:last-child p{
position: absolute;
bottom: 40px;
left: 80px;
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
color: white;
margin-bottom: 0;
}
.tahsin .sec-ch-title{
margin-bottom: 40px;
}
.tahsin-list{
display: flex;
gap:30px;
}
.tahsin-list p{
font-family: var(--ch-font);
font-size: 16px;
width: 92px;
line-height: 1.6em;
color:var(--main-color);
font-weight: 400;
}
.tahsin-list span{
font-family: var(--ch-font);
font-size: 16px;
line-height: 1.6em;
font-weight: 400;
color: black;
}
.tahsin-list>div{
display: flex;
flex-direction: column;
flex:1;
}
.tahsin-list>div>span{
margin-bottom: 15px;
}
.tahsin-list>div>span:last-child{
margin-bottom: 0px;
}
.scope{
padding: 0 var(--pad-space);
padding-top: var(--section-gap);
padding-bottom: calc(var(--section-gap) / 2 );
background: white;
}
.scope>div{
display: flex;
flex-direction: column;
align-items: center;
}
.scope-header{
text-align: center;
margin-bottom: 60px;
}
.scope-card{
background: var(--main-color);
border-radius: var(--box-radius);
padding: 30px;
display: flex;
position: relative;
overflow: hidden;
width: 100%;
max-width: 1500px;
margin: 0 auto;
margin-bottom: 60px;
min-height: 50vh;
height: 100%;
}
.scope-slick-sec .slick-list{
padding-right: 40px;
margin-left: 5px;
}
.scope-slick-sec .scope-card{
margin-bottom: 0;
justify-content: flex-end;
}
.scope-slick-sec .slick-slide{
opacity: 0.3;
transition: all .5s;
}
.scope-slick-sec .slick-slide.slick-current {
opacity: 1;
}
.scope-slick-sec .slick-dots {
display: flex;
gap: 10px;
width: 100%;
max-width: 160px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: calc(var(--section-gap) / 2);
padding-inline-start: 0px;
}
.scope-slick-sec .slick-dots li{
display: block;
text-align: center;
flex-grow: 1;
}
.scope-slick-sec .slick-dots li button {
border: unset;
width: 100%;
padding: 0;
background: transparent !important;
outline: unset !important;
}
.scope-slick-sec .slick-dots li button>div{
width: 13px;
height: 13px;
border-radius: 100%;
background: #707070;
margin: 0 auto;
opacity: 0.3;
}
.scope-slick-sec  .slick-dots li.slick-active div{
opacity: 1;
}
.scope-card>div:nth-child(4){
min-width: 50%;
aspect-ratio: 2 / 1.4;
}
.scope-card>div:nth-child(4) img{
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
border-radius: var(--box-radius);
}
.scope-card h6{
font-family: var(--en-font);
color: white;
font-weight: 600;
font-size:150px;
font-size:9vw;
} 
.scope-card-ab{
position: absolute;
top: 50%;
left: -15px;
transform: translateY(-50%);
}
.scope-card-re{
opacity: 0;
}
.scope-card>div:nth-child(3){
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 0 5% 30px 1%;
}
.scope-card h5{
color: white;
font-family: var(--cn-font);
margin-bottom: 25px;
font-size: 22px;
font-weight: 400;
}
.scope-card p{
color: white;
font-family: var(--cn-font);
font-size: 14px;
font-weight: 300;
line-height: 2em;
margin-bottom: 40px;
}
.scope-card a{
padding: 12px 40px;
}
.scope-card a span{
color:white;
}
.scope-card a:hover span{
color:var(--main-color);
}
.scope-h5-m{
display: none;
}
.scope-slick-sec{
display: none;
width: 100%;
}
.scope-slick{
width: 100%;
}
.slick-track {
display:flex !important;
}
.scope-slick .slick-slide{
padding: 7px; }
.scope-a-box{
margin: 15px 0;
}
.advantage-sec{
}
.advantage{ padding: var(--section-gap) var(--pad-space);  }
.advantage>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
.advantage h2,
.advantage h3{
color: white;
}
.advantage-header{
margin-bottom: 70px;
}
.advantage-body h5{
font-family: var(--en-font);
}
.advantage-body h4{
font-family: var(--ch-font);
font-size: 25px;
}
.advantage-body h6{
font-family: var(--ch-font);
font-size: 22px;
font-weight: 400;
line-height: 1.2em;
margin-bottom: 25px;
}
.advantage-body p{
font-family: var(--ch-font);
font-size: 14px;
line-height: 2em;
margin: 0;
font-weight: 300;
}
.advantage-body-1{
display: flex;
gap:24px;
margin-bottom: 24px;
}
.advantage-body-1>div,
.advantage-body-2>div{
border-radius: var(--box-radius);
padding:50px;
}
.advantage-body-1>div:first-child{
background: white;
min-width: 67%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.advantage-body-1>div:first-child>img{
position: absolute;
right:0;
top:-7%;
width: 170px;
transform: translateX(90%);
}
.advantage-body-1>div:last-child{
background: var(--main-color);
display: flex;
flex-direction: column;
justify-content: center;
} .advantage-body-1 h5{
font-size: 100px;
font-weight: 600;
margin: 0;
line-height: 1em;
margin-bottom: 10px;
}
.advantage-body-1 h4{
margin: 0;
line-height: 1.2em;
}
.advantage-body-1 .small-title{
font-size: 85px;
}
.advantage-body-1-1{
padding: 40px 0;
border-bottom: 2px solid #bebebe;
gap:10%;
padding-bottom: 50px;
display: grid;
align-items: center;
grid-template-columns: 200px 1fr;
}
.advantage-body-1-1 h4,
.advantage-body-1-2 h4{
text-align: center;
}
.advantage-body-1-2{
padding: 40px 0;
gap:10%;
padding-top: 50px;
display: grid;
align-items: center;
grid-template-columns: 1fr 265px;
}
.advantage-body-1>div:last-child h4{
margin-bottom: 70px;
}
.advantage-body-2{
display: flex;
gap:24px;
}
.advantage-body-2>div{
min-width: calc(50% - 12px);
}
.advantage-body-2>div{
aspect-ratio: 1 / 0.75;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.advantage-body-2>div:first-child{
aspect-ratio: 1 / 0.75;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/DSC04292.png);
}
.advantage-body-2>div:last-child{
aspect-ratio: 1 / 0.75;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), url(//www.tahhsin.com.tw/wp-content/uploads/2024/06/black-fabric-texture-n-t.png);
}
.advantage-body-2 h5{
color: white;
font-size: 70px;
font-weight: 600;
margin: 0;
line-height: 1em;
margin-bottom: 10px;
}
.advantage-body-2 h5 b{
font-weight: 600;
}
.advantage-body-2 h5 span{
font-size: 40px;
padding-left: 5px;
}
.advantage-body-2 h4{
color: white;
font-size: 35px;
margin: 0;
line-height: 1.2em;
margin-bottom: 40px;
}
.advantage-body-2 h6{
color: white;
margin: 0;
line-height: 1.2em;
font-size: 25px;
font-weight: 400;
margin-bottom: 20px;
}
.advantage-body-2 p{
color: white;
line-height: 2em;
margin: 0;
font-weight: 300;
width: 100%;
max-width: 350px;
}
@media only screen and (max-width:1100px){
.advantage-body-1 h5{
font-size: 80px;
}
.advantage-body-1>div, .advantage-body-2>div{
padding: 30px;
}
.advantage-body-1 .small-title{
font-size: 70px;
}
.advantage-body-2 h5{
font-size: 60px;
}
.advantage-body-2 h5 span{
font-size: 30px;
}
.advantage-body-2 h4{
font-size: 30px;
}
.advantage-body-2 h6{
font-size: 22px;
}
.advantage-body-1>div:first-child{
min-width: 62%;
}
.advantage-body-1-1{
grid-template-columns: 167px 1fr;
}
.advantage-body-1-2{
grid-template-columns: 1fr 220px;
}
.advantage-body-1{
flex-direction: column;
}
.advantage-body-1>div:first-child>img{
display: none;
}
}
@media only screen and (max-width:1024px){
.tahsin-list {
gap: 15px;
}
.tahsin>div>div:last-child p{
bottom: 30px;
left: 50px;
}
.banner_anchor{
min-height: 136px;
}
.scope-card h6{
display: none;
}
.scope-card>div:nth-child(3){
padding: 0;
padding-right: 30px;
padding-bottom: 30px;
}
.scope-card p{
margin-bottom: 30px;
}
.scope-h5-m{
display: block;
}
.scope-h5-d{
display: none;
}
.advantage-body-2{
flex-direction: column;
}
.advantage-body-2>div:first-child,
.advantage-body-2>div:last-child{
aspect-ratio: unset;
}
}
@media only screen and (max-width:900px){
.tahsin>div{
flex-direction: column-reverse;
align-items: center;
}
.tahsin>div>div{
width: calc(100% - (var(--pad-space) * 2));
}
.tahsin>div>div:last-child,
.tahsin>div>div:first-child{
border-radius: var(--box-radius);
overflow: hidden;
}
.tahsin>div>div:first-child>div{
max-width: unset;
padding: 0 0px;
}
.advantage-body-1{
flex-direction: column;
}
.advantage-body-1>div:first-child>img{
display: none;
}
}
@media only screen and (max-width:900px){
.scope-card{
flex-direction: column-reverse;
padding: 15px;
padding-bottom: 25px;
gap:20px;
}
.scope-card>div:nth-child(4){
width: 100%;
}
.scope-card>div:nth-child(3){
padding: 0px;
align-items: center;
height: 100%;
}
.scope-card p{
margin-bottom: 15px;
text-align: left;
}
.scope-card h5{
margin: 0;
margin-bottom: 15px;
}
.scope-pin{
display: none;
}
.scope-a-box{
widht: 100%;
height: 100%;
display: flex;
align-items: center;
}
.scope-slick-sec{
display: block;
}
.scope{
padding: 0;
padding-top: var(--section-gap);
padding-bottom: calc(var(--section-gap) / 2 );
}
.scope-header{
padding: 0 var(--pad-space);
}
}
@media only screen and (max-width:767px){
.banner_anchor{
min-height: 110px;
}
.scope-card{
flex-direction: column-reverse;
padding: 15px;
padding-bottom: 25px;
gap:20px;
}
.scope-card>div:nth-child(4){
width: 100%;
}
.scope-card>div:nth-child(3){
padding: 0px;
align-items: center;
height: 100%;
}
.scope-card p{
margin-bottom: 15px;
text-align: left;
}
.scope-card h5{
margin: 0;
margin-bottom: 15px;
}
.scope-pin{
display: none;
}
.scope-a-box{
widht: 100%;
height: 100%;
display: flex;
align-items: center;
}
.scope-slick-sec{
display: block;
}
.scope{
padding: 0;
padding-top: var(--section-gap);
padding-bottom: calc(var(--section-gap) / 2 );
}
.scope-header{
padding: 0 var(--pad-space);
}
}
@media only screen and (max-width:600px){
.advantage-body-2 h6{
margin-top:8px;
}
.advantage-header h3{
margin-bottom: 3px;
}
.advantage-header{
margin-bottom: 40px;
}
.advantage-body p{
line-height: 1.7em;
}
.advantage-body-1>div:last-child{
align-items: flex-start;
}
.advantage-body-1>div:last-child p{
text-align: left !important;
}
.advantage-body-1>div:last-child h4{
margin-bottom: 0px;
}
.tahsin h3{
margin-bottom: 0px;
}
.tahsin>div>div:last-child p{
bottom: 20px;
left: 30px;
}
.banner_anchor{
min-height: 100px;
width: 65%;
}
.banner_anchor_a {
grid-template-columns: 1fr 1fr 0;
}
.tahsin>div>div:first-child>div{
padding: 0px;
}
.tahsin>div{
gap:14px;
}
.tahsin>div>div:first-child{
padding: 25px;
}
.tahsin .sec-ch-title {
margin-bottom: 20px;
}
.tahsin-list p{
font-size: 15px;
margin-bottom: 5px;
}
.tahsin-list span{
font-size: 15px;
margin-bottom: 10px;
}
.scope-card p{
line-height: 1.6em;
}
.scope-header h3{
margin-bottom: 5px;
}
.scope-header{
margin-bottom: 20px;
}
.scope{
padding-top: calc(var(--section-gap) + 20px);
}
.scope-card>div:nth-child(4) img{
border-radius: 20px;
}
.scope-slick .slick-slide{
padding: 0;
padding-right: 10px;
}
.scope-slick-sec{
padding-left: 20px;
}
.scope-slick-sec .slick-list{
padding-right: 20px;
}
.advantage-body-1>div:first-child>div:first-child{
flex-direction: column;
align-items: flex-start;
}
.advantage-body-1-2{
flex-direction: column-reverse;
align-items: flex-start !important;
}
.advantage-body-1-1{
padding-top: 0;
padding-bottom: 30px;
}
.advantage-body-1-2{
padding-top: 30px;
padding-bottom: 0px;
}
.advantage-body-1-1 h5,
.advantage-body-1-1 h4,
.advantage-body-1-2 h5,
.advantage-body-1-2 h4{
text-align: left;
}
.advantage-body-1 h5{
font-size: 60px;
}
.advantage-body-1 .small-title{
font-size: 50px;
}
.advantage-body h4{
font-size: 27px;
padding-bottom: 30px;
}
.advantage-body h6{
font-size: 19px;
margin-bottom: 10px;
}
.advantage-body-1>div, .advantage-body-2>div{
padding: 20px;
}
.advantage-body-1-1{
padding-bottom: 20px;
}
.advantage-body-1-2{
padding-top: 20px;
}
.advantage-body-2 h5{
font-size: 50px;
margin-bottom: 0px;
}
.advantage-body-2 h4{
margin-bottom: 0px;
}
.advantage-body-2 h5 span,
.advantage-body-2 h4{
font-size: 25px;
}
.advantage-body-1-1,
.advantage-body-1-2{
grid-template-columns: 1fr;
gap:0;
}
.advantage-body-1-2>div:nth-child(2){
grid-row: 1;
}
.advantage-body h4{
padding-bottom: 20px;
}
}
@media only screen and (max-width:500px){
.tahsin .tahsin-list:last-child{
flex-direction: column;
gap: 0;
}
}
@media only screen and (max-width:410px){
.banner-nav-anchor {
grid-template-columns: auto ;
}
}