.milestone_text_slick {
margin-bottom: 30px;
}
.cross-text-sec{
padding: calc(var(--section-gap)/2) 0;
}
.cross_text{
width: 100%;
margin-bottom: 0px;
overflow: hidden;
position: relative;
z-index: 3;
}
.cross_text>div:first-child{
display: flex;
justify-content: center;
}
.cross_text>div:last-child{
display: flex;
justify-content: center;
}
.cross_text h6{
font-family: "Poppins", sans-serif;
font-size: clamp(16px, 10vw, 120px);
color: var(--main-color);
font-weight: 600;
line-height: 1em;
}
.cross_text>div:first-child h6{
transform: translateX(-35vw);
}
.cross_text>div:last-child h6{
transform: translateX(35vw);
}
.make-different{
width: 100%;
height: 100vh;
}
.make-different-cilp{
width: 100%;
height: 100%;
position: absolute;
}
.make-different-cilp img{
position: fixed;
left: 0;
bottom:0;
object-fit: cover;
display: block;
object-position: center;
width: 100%;
height: 100%;
}
.make-different-cilp>img:nth-child(1){
clip-path: inset(100% 100% 0 0 round 0 200px 0 0 );
}
.make-different-cilp>img:nth-child(2){
clip-path: inset(100% 0 0 100% round 200px 0 0 0 );
}
.make-different-text{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
position: relative;
z-index: 3;
gap: 40px;
padding: 10px var(--pad-space);
}
.make-different-text>div{
overflow: hidden;
}
.make-different-text h4{
font-size: var(--global-h4-size);
color: white;
font-family: "Noto Sans TC", sans-serif;
margin: 0;
font-weight: 600;
line-height: 1.5em;
text-align: center;
transform: translateY(100%);
}
.make-different-text p{
font-size: var(--global-p-size);
color: white;
font-family: "Noto Sans TC", sans-serif;
line-height: 1.8em;
font-weight: 400;
width: 100%;
max-width: 1250px;
margin: 0 auto;
text-align: center;
transform: translateY(100%);
}
.make-different-overlay{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
background: black;
opacity: 0;
}
.milestone-sec{
padding-top: var(--section-gap);
}
.milestone{
position: relative;
margin-bottom: calc(135px + var(--section-gap));
}
.milestone_bg{
position: absolute;
width: calc(95% - var(--pad-space));
height: calc(100% + 80px);
top: 44px;
left: 0;
background: #e8e8e8;
z-index: -1;
border-radius: 0 var(--box-radius) var(--box-radius) 0;
}
.milestone_text_m{
display:none;
}
.milestone>h3{
text-align: center;
position: relative;
z-index: 1;
}
.milestone>h4{
text-align: center;
position: relative;
z-index: 1;
}
.milestone_main{
position: relative;
z-index: 1;
margin-top: 97px;
}
.milestone_main>div:first-child{
position: absolute;
top: 0;
left: -26px;
width:200px;
}
.milestone_main>div:last-child{
padding-left: 13.6%;
}
.milestone_control{
position: relative;
width: calc( 86% - var(--pad-space));
}
.milestone_control>div{
width: calc(90% - 100px);
margin: 0 auto;
}
.milestone_control .slick-slide button{
width: 100%;
margin: 0 auto;
background: transparent !important;
outline: unset !important;
border: unset !important;
}
.milestone_control .slick-slide button:hover,
.milestone_control .slick-slide button:focus,
.milestone_control .slick-slide button:active{
color: #AFAFAF;
}
.year_nav .slick-slide button:hover{
color: #AFAFAF;
}
.milestone_control .slick-slide.slick-current button:hover,
.milestone_control .slick-slide.slick-current button:focus,
.milestone_control .slick-slide.slick-current button:active{
color: var(--main-color) !important;
}
.milestone_control>button{
padding: 0;
width: 50px;
top:50%;
transform: translateY(-50%);
display: flex;
border:unset !important;
background:unset !important;
outline: unset !important;
}
.milestone_control>button:nth-child(1){
position: absolute;
left: 0;
}
.milestone_control>button:nth-child(1) img{
transform: rotate(180deg);
}
.milestone_control>button:nth-child(3){
position: absolute;
right: 0;
}
.milestone_content{
display: flex;
margin-top: 70px;
gap:8.5%;
}
.milestone_content>div:first-child{
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.milestone_text_slick{
width: 100%;
}
.milestone_aside p{
margin: 0;
writing-mode: vertical-rl;
font-family: var(--en-font);
color: var(--main-color);
font-size: 180px;
font-weight: 600;
line-height: 1em;
}
.milestone h3{
font-size: var(--global-h3-size);
color: var(--main-color);
font-family: "Poppins", sans-serif;
font-weight: 600;
line-height: 1.1em;
margin: 0;
margin-bottom: 10px;
}
.milestone h4{
font-family: "Noto Sans TC", sans-serif;
font-size: var(--global-h4-size);
font-weight: 500;
color: var(--main-color);
margin: 0;
}
.year_nav button{
font-family: "Poppins", sans-serif;
font-size: 44px;
font-weight: 600;
color: #AFAFAF;
padding: 10px;
line-height:1em;
border:unset;
background: transparent;
}
.year_nav .slick-current button{
color: var(--main-color);
}
.milestone_text h6{
font-family: "Noto Sans TC", sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--main-color);
margin-bottom: 20px;
}
.milestone_text p{
font-family: "Noto Sans TC", sans-serif;
font-weight: 400;
line-height: 1.8em;
font-size: var(--xd-16px);
margin-bottom: 0px; }
.year_img{
overflow: hidden;
width: 63%;
}
.year_img .slick-slide>div{
aspect-ratio: 704 / 546;
}
.year_img img{
object-fit: cover;
object-position: top center;
width: 100%;
height: 100%;
border-radius: var(--box-radius) 0 0 var(--box-radius);
}
.milestone_text_under .slick-slide{
display: flex !important;
gap:25px;
align-items: flex-end;
height: inherit;
}
.milestone_text_under .slick-track{ }
.milestone_text_under .slick-slide>div{
aspect-ratio: 322 / 245;
}
.milestone_text_under .slick-slide>div img{
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
border-radius: var(--box-radius);
}
.milestone_text_under  .slick-slide:last-child>div{
aspect-ratio: 674 / 325;
}
@media only screen and (max-width: 1400px) {
.milestone_content>div:first-child,
.year_img{
width: 50%;
}
.milestone_content{
gap: 40px;
}
.milestone_main>div:first-child{
display: none;
}
.milestone_main>div:last-child{
padding-left: var(--pad-space);
}
.milestone_bg{
height:calc(100% + 30px)
}
.milestone_text p{
margin-bottom:0px;
}
.year_img .slick-slide>div {
aspect-ratio: 704 / 826;
}
}
@media only screen and (max-width: 1200px) {
.year_img .slick-slide>div {
aspect-ratio: 704 / 1096;
}
}
@media only screen and (max-width: 1100px) {
.milestone-sec{
padding: var(--section-gap) var(--pad-space);
}
.year_nav button{
font-size: 30px;
}
.milestone{
padding: var(--pad-space);
background: #e8e8e8;
border-radius: var(--box-radius);
margin-bottom: 0;
}
.milestone_content{
flex-direction: column-reverse;
margin-top: 40px;
}
.milestone_main>div:last-child{
padding-left: 0;
}
.milestone_content>div:first-child{
width: 100%;
}
.year_img{
width: 100%;
border-radius: var(--box-radius);
}
.milestone_main{
margin-top: 30px;
}
.milestone_text_under .slick-slide>div{
flex-grow: 1;
}
.milestone_text_under .slick-slide{
height: auto;
}
.milestone_text_under .slick-track{
display: block !important;
}
.year_img .slick-slide>div {
aspect-ratio: unset;
min-height: 400px;
height: 55vh;
}
.milestone_control{
width: 100%;
}
.milestone_bg{
display: none;
}
.milestone_control>div{
width: calc(90% - 60px);
}
.milestone_control>button{
width: 30px;
}
}
@media only screen and (max-width: 767px) {
.year_nav button {
font-size: 20px;
}
.cross_text h6{
margin: 5px 0;
}
.year_img .slick-slide>div{
height: 35vh;
}
.milestone_text p{
line-height: 1.7em;
}
.milestone h3{
margin-bottom: 0px;
}
.milestone_content{
margin-top: 20px;
}
.milestone_content{
gap:20px;
}
.milestone_text h6{
margin-top: 0px;
}
.milestone_text p{
margin-bottom: 0px;
}
.milestone_text_under .slick-slide{
flex-direction: column;
align-items: normal;
}
}
@media only screen and (max-width: 600px) {
.make-different-text{
gap:20px;
}
.make-different-text h4{
line-height: 1.3em;
}
.make-different-text p{
font-size: 13px;
line-height: 1.5em;
}
.make-different-text p{
line-height: 1.6em;
}
.year_img .slick-slide>div{
height: 30vh;
min-height: 250px;
}
.milestone_text_under .slick-slide>div img,
.year_img,
.year_img img{
border-radius: 15px;
}
.milestone_main{
margin-top: 20px;
}
.milestone_text_d{
display:none;
}
.milestone_text_m{
display:block;
}
}