.mc-container { /*width:75vw!important;*/ width:100%; margin:0 auto; /*background:#f8f8f8;*/ border:1px solid #eee; } @media screen and (max-width:767px) { .mc-container { width:90%!important } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-container { width:95%!important } } .mc-milestone .swiper-wrapper { height:18.05556vw; padding-top:15.97222vw; padding-left:9.375vw; } @media screen and (max-width:767px) { .mc-milestone .swiper-wrapper { height:41.6vw; padding-top:36.26667vw; padding-left:9.33333vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-wrapper { height:25.39062vw; padding-top:20.01953vw; padding-left:9.76562vw } } .mc-milestone .swiper-slide { width:17.36111vw } @media screen and (max-width:767px) { .mc-milestone .swiper-slide { width:36vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-slide { width:20.50781vw } } .mc-milestone .swiper-slide:last-child { width:40.27778vw } @media screen and (max-width:767px) { .mc-milestone .swiper-slide:last-child { width:77.33333vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-slide:last-child { width:56.64062vw } } .mc-milestone .swiper-banner-btn-next { display:inline-block; width:4.16667vw; height:4.16667vw; background-color:#225560; z-index:1; right:0; top:50%; margin-top:-2.08333vw; cursor:pointer } @media screen and (max-width:767px) { .mc-milestone .swiper-banner-btn-next { width:8vw; height:8vw; margin-top:-3.46667vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-banner-btn-next { width:5.85938vw; height:5.85938vw; right:0; top:50%; margin-top:-2.92969vw } } .mc-milestone .swiper-banner-btn-next:before { content:""; position:absolute; width:1.38889vw; height:1.38889vw; top:50%; left:45%; border:.13889vw solid #fff; border-right:0; border-bottom:0; box-sizing:border-box; -webkit-transform:translate(-50%,-50%) rotate(135deg); transform:translate(-50%,-50%) rotate(135deg) } @media screen and (max-width:767px) { .mc-milestone .swiper-banner-btn-next:before { width:2.93333vw; height:2.93333vw; border:.53333vw solid #fff; border-right:0; border-bottom:0 } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-banner-btn-next:before { width:1.95312vw; height:1.95312vw; top:50%; left:45%; border:.19531vw solid #fff; border-right:0; border-bottom:0 } } .mc-milestone .swiper-banner-btn-next:after { display:none } .mc-milestone .swiper-banner-btn-prev { display:inline-block; width:4.16667vw; height:4.16667vw; background-color:#225560; z-index:1; left:0; top:50%; margin-top:-2.08333vw; cursor:pointer } @media screen and (max-width:767px) { .mc-milestone .swiper-banner-btn-prev { width:8vw; height:8vw; margin-top:-3.46667vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-banner-btn-prev { width:5.85938vw; height:5.85938vw; left:0; top:50%; margin-top:-2.92969vw } } .mc-milestone .swiper-banner-btn-prev:before { content:""; position:absolute; width:1.38889vw; height:1.38889vw; top:50%; left:55%; border:.13889vw solid #fff; border-right:0; border-bottom:0; box-sizing:border-box; -webkit-transform:translate(-50%,-50%) rotate(-45deg); transform:translate(-50%,-50%) rotate(-45deg) } @media screen and (max-width:767px) { .mc-milestone .swiper-banner-btn-prev:before { width:2.93333vw; height:2.93333vw; border:.53333vw solid #fff; border-right:0; border-bottom:0 } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-banner-btn-prev:before { width:1.95312vw; height:1.95312vw; top:50%; left:55%; border:.19531vw solid #fff; border-right:0; border-bottom:0 } } .mc-milestone .swiper-banner-btn-prev:after,.mc-milestone .swiper-button-disabled { display:none } .mc-milestone .ilestone-list { width:100%; height:2.43056vw; position:relative } @media screen and (max-width:767px) { .mc-milestone .ilestone-list { height:5.33333vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list { height:3.41797vw } } .mc-milestone .ilestone-list .ilestone-list-circle { display:inline-block; width:2.36111vw; height:2.36111vw; border-radius:50%; border:.55556vw solid #34364e } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-circle { height:6.4vw; width:6.4vw; border:1.33333vw solid #34364e } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-circle { width:3.32031vw; height:3.32031vw; border-radius:50%; border:.78125vw solid #34364e } } .mc-milestone .ilestone-list .ilestone-list-rec { display:inline-block; width:12.84722vw; height:2.08333vw; position:relative; margin-bottom:.13889vw; background-color:#34364e } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-rec { height:5.33333vw; width:24.53333vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-rec { width:14.64844vw; height:2.92969vw; margin-bottom:.19531vw } } .mc-milestone .ilestone-list .ilestone-list-rec:before { content:""; display:inline-block; position:absolute; left:-.06944vw; top:-.20833vw; border:1.18056vw solid transparent; border-left-color:#fff } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-rec:before { left:-1px; top:0; border:2.66667vw solid transparent; border-left-color:#fff } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-rec:before { left:-.09766vw; top:-.29297vw; border:1.66016vw solid transparent; border-left-color:#fff } } .mc-milestone .ilestone-list .ilestone-list-rec:after { content:""; display:inline-block; position:absolute; top:0; right:-2.01389vw; border:1.04167vw solid transparent; border-left-color:#34364e } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-rec:after { right:-5.28vw; border:2.66667vw solid transparent; border-left-color:#34364e } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-rec:after { right:-2.83203vw; border:1.46484vw solid transparent; border-left-color:#34364e } } .mc-milestone .ilestone-list .ilestone-list-container { position:absolute; left:1.04167vw; top:2.36111vw; width:29.16667vw; height:14.23611vw; border-left:.34722vw solid #34364e } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-container { left:2.4vw; top:6.4vw; width:58.13333vw; height:26.66667vw; background-color:#fff; border-left:1.06667vw solid #34364e } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-container { left:1.46484vw; top:3.32031vw; width:34.17969vw; height:16.11328vw; background-color:#fff; border-left:.48828vw solid #34364e } } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img { position:absolute; bottom:0; left:-4.30556vw; width:8.33333vw; height:8.33333vw; border-radius:50%; overflow:hidden; text-align:center; background-color:#34364e; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img { left:-8.26667vw; width:16vw; height:16vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img { bottom:0; left:-4.88281vw; width:9.76562vw; height:9.76562vw; border-radius:50% } } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img .img-container { width:6.94444vw; height:6.94444vw; border-radius:3.47222vw; overflow:hidden; border:.06944vw solid #97a8b2 } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img .img-container { width:12.53333vw; height:12.53333vw; border-radius:6.26667vw; border:.26667vw solid #97a8b2 } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img .img-container { width:7.8125vw; height:7.8125vw; border-radius:4.88281vw; border:.09766vw solid #97a8b2 } } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img img { width:100%; height:100%; border-radius:50%; -webkit-transition:.5s ease-in-out; transition:.5s ease-in-out } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-img img:hover { -webkit-transform:scale(1.1); transform:scale(1.3) } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; align-items:flex-start; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; padding-left:5.55556vw; margin-top:10px; } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text { padding-left:9.6vw; margin-top:1.6vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text { padding-left:5.85938vw; margin-top:.97656vw } } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text .ilestone-list-title { font-size:1.66667vw; font-weight:700 } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text .ilestone-list-title { font-size:3.73333vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text .ilestone-list-title { font-size:2.34375vw } } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text .ilestone-list-subTitle { font-size:1.11111vw; width:100%; overflow:hidden; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:6; -webkit-box-orient:vertical } @media screen and (max-width:767px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text .ilestone-list-subTitle { font-size:3.2vw; -webkit-line-clamp:4 } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text .ilestone-list-subTitle { font-size:1.36719vw; -webkit-line-clamp:5 } } .mc-milestone .swiper-slide:nth-child(odd) .ilestone-list-container { top:-14.23611vw } @media screen and (max-width:767px) { .mc-milestone .swiper-slide:nth-child(odd) .ilestone-list-container { top:-26.66667vw } } @media screen and (min-width:768px) and (max-width:1024px) { .mc-milestone .swiper-slide:nth-child(odd) .ilestone-list-container { top:-16.11328vw } } .mc-milestone .swiper-slide:nth-child(odd) .ilestone-list-img { top:0 } .mc-milestone .swiper-slide:nth-child(5n+2) .ilestone-list-circle { border-color:#225560 } .mc-milestone .swiper-slide:nth-child(5n+2) .ilestone-list-rec { background-color:#225560 } .mc-milestone .swiper-slide:nth-child(5n+2) .ilestone-list-container,.mc-milestone .swiper-slide:nth-child(5n+2) .ilestone-list-rec:after { border-left-color:#225560 } .mc-milestone .swiper-slide:nth-child(5n+2) .ilestone-list-container .ilestone-list-img { background-color:#225560 } .mc-milestone .swiper-slide:nth-child(5n+3) .ilestone-list-circle { border-color:#efefef } .mc-milestone .swiper-slide:nth-child(5n+3) .ilestone-list-rec { background-color:#efefef } .mc-milestone .swiper-slide:nth-child(5n+3) .ilestone-list-container,.mc-milestone .swiper-slide:nth-child(5n+3) .ilestone-list-rec:after { border-left-color:#efefef } .mc-milestone .swiper-slide:nth-child(5n+3) .ilestone-list-container .ilestone-list-img { background-color:#efefef } .mc-milestone .swiper-slide:nth-child(5n+4) .ilestone-list-circle { border-color:#70798c } .mc-milestone .swiper-slide:nth-child(5n+4) .ilestone-list-rec { background-color:#70798c } .mc-milestone .swiper-slide:nth-child(5n+4) .ilestone-list-container,.mc-milestone .swiper-slide:nth-child(5n+4) .ilestone-list-rec:after { border-left-color:#70798c } .mc-milestone .swiper-slide:nth-child(5n+4) .ilestone-list-container .ilestone-list-img { background-color:#70798c } .mc-milestone .swiper-slide:nth-child(5n+5) .ilestone-list-circle { border-color:#34364e } .mc-milestone .swiper-slide:nth-child(5n+5) .ilestone-list-rec { background-color:#34364e } .mc-milestone .swiper-slide:nth-child(5n+5) .ilestone-list-container,.mc-milestone .swiper-slide:nth-child(5n+5) .ilestone-list-rec:after { border-left-color:#34364e } .mc-milestone .swiper-slide:nth-child(5n+5) .ilestone-list-container .ilestone-list-img { background-color:#34364e } .mc-milestone .ilestone-list .ilestone-list-container .ilestone-list-text:hover{ color:#DC4F03; } .mc-milestone .swiper-slide:hover{ color:#DC4F03; font-weight:700; } .mc-milestone .swiper-slide:hover .ilestone-list-circle { border-color:#DC4F03; } .mc-milestone .swiper-slide:hover .ilestone-list-rec { background-color:#DC4F03; } .mc-milestone .swiper-slide:hover .ilestone-list-container,.mc-milestone .swiper-slide:hover .ilestone-list-rec:after { border-left-color:#DC4F03; } .mc-milestone .swiper-slide:hover .ilestone-list-container .ilestone-list-img { background-color:#DC4F03; }